@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/HighlightCard/HighlightCard.js

@@ -0,0 +1,1286 @@
+import { ArcVegaChart } from "../../lib/vega/ArcVegaChart.js";
+import { arcEmbedOptions } from "../../lib/vega/embed.js";
+import { formatDate } from "../../lib/vega/formatters.js";
+import { useChartTokens } from "../../lib/vega/tokens.js";
+import { ArcTooltipRows, useArcTooltipHandler } from "../../lib/vega/tooltip.js";
+import { HIGHLIGHT_BAND_DATASET, HIGHLIGHT_DRIVERS_DATASET, HIGHLIGHT_ENDPOINTS_DATASET, HIGHLIGHT_INSIDE_DATASET, HIGHLIGHT_OUTSIDE_DATASET, HIGHLIGHT_PEERS_DATASET, HIGHLIGHT_TABLE_DATASET, HIGHLIGHT_TYPICAL_DATASET, HIGHLIGHT_ZERO_DATASET, buildHighlightContextSpec, buildHighlightDriversSpec, buildHighlightPeersSpec } from "./HighlightCard.chart.js";
+import { buildContextDescription, buildDriverRows, buildDriversDescription, buildHighlightAnalysisInsight, buildHighlightContextDatasets, buildHighlightDescription, buildPeerVerdict, buildPeersDescription, buildTypicalRows, createHighlightFormatters, deriveHighlightState, derivePeers, normalizeDrivers, normalizeHighlightSeries, resolveHighlightLabels, resolveHighlightWindow } from "./HighlightCard.model.js";
+import { Fragment, forwardRef, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { AILoader, Badge, Box, Button, Popover, PopoverPopup, PopoverTitle, PopoverTrigger, Skeleton, SkeletonGroup, SystemState, Table, TableBody, TableCaption, TableCell, TableContainer, TableHead, TableHeader, TableRow, Tooltip, TooltipPopup, TooltipTrigger, cn } from "@arcfusionz/arc-primitive-ui";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/HighlightCard/HighlightCard.tsx
+const sizeStyles = {
+	sm: {
+		padding: "sm",
+		gap: "gap-2",
+		gapPx: 8,
+		sectionGap: "gap-3",
+		label: "text-xs",
+		value: "text-2xl leading-8",
+		valueLinePx: 32,
+		body: "text-xs",
+		rowText: "text-xs",
+		badge: "sm",
+		headlinePx: 52,
+		contextHeight: 132,
+		peersHeight: 52,
+		step: 22,
+		barHeight: 10,
+		sectionTitlePx: 18
+	},
+	md: {
+		padding: "md",
+		gap: "gap-3",
+		gapPx: 12,
+		sectionGap: "gap-4",
+		label: "text-sm",
+		value: "text-3xl leading-9",
+		valueLinePx: 36,
+		body: "text-sm",
+		rowText: "text-sm",
+		badge: "md",
+		headlinePx: 60,
+		contextHeight: 176,
+		peersHeight: 60,
+		step: 26,
+		barHeight: 12,
+		sectionTitlePx: 20
+	},
+	lg: {
+		padding: "lg",
+		gap: "gap-3",
+		gapPx: 12,
+		sectionGap: "gap-5",
+		label: "text-sm",
+		value: "text-4xl leading-10",
+		valueLinePx: 40,
+		body: "text-sm",
+		rowText: "text-sm",
+		badge: "lg",
+		headlinePx: 64,
+		contextHeight: 216,
+		peersHeight: 68,
+		step: 30,
+		barHeight: 14,
+		sectionTitlePx: 20
+	}
+};
+const labelClasses = "min-w-0 font-sans font-medium text-muted-foreground";
+const valueClasses = "font-heading font-semibold tracking-tight";
+const captionClasses = "font-sans text-xs text-muted-foreground";
+const sectionTitleClasses = "font-sans font-medium text-muted-foreground";
+const changeTextClasses = {
+	positive: "text-chart-positive",
+	negative: "text-chart-negative",
+	neutral: "text-foreground"
+};
+const headerControlClasses = "size-6 min-w-0 text-muted-foreground hover:text-foreground";
+const panelStateClasses = "w-full max-w-none gap-3 px-3 py-4 [--artwork-box:4rem]";
+const driverGridClasses = "grid grid-cols-[fit-content(38%)_minmax(0,1fr)_auto_auto] gap-x-3";
+const X_AXIS_HEIGHT_PX = 24;
+const MISSING_NAME = "Highlight";
+const SECTION_LEVEL = {
+	2: 3,
+	3: 4,
+	4: 5,
+	5: 6,
+	6: 6
+};
+const DEFAULT_SECTIONS = [
+	"context",
+	"peers",
+	"drivers"
+];
+const EMPTY_DRIVERS = [];
+const ZERO_ROWS = [{ value: 0 }];
+function InfoIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9"
+		}), /* @__PURE__ */ jsx("path", { d: "M12 11v5M12 8h.01" })]
+	});
+}
+function DeltaGlyph({ direction, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			direction === "up" && /* @__PURE__ */ jsx("path", { d: "M7 17 17 7M7 7h10v10" }),
+			direction === "down" && /* @__PURE__ */ jsx("path", { d: "M7 7 17 17M7 17h10V7" }),
+			direction === "flat" && /* @__PURE__ */ jsx("path", { d: "M5 12h14M13 6l6 6-6 6" })
+		]
+	});
+}
+/** A generated insight: words as text, values in bold. */
+function InsightText({ segments }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: segments.map((segment, index) => typeof segment === "string" ? /* @__PURE__ */ jsx(Fragment, { children: segment }, index) : /* @__PURE__ */ jsx("strong", { children: segment.value }, index)) });
+}
+/** The bar swatch beside a driver's name — the exact hue its bar wears. */
+function DriverSwatch({ color, hollow }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		fill: "none",
+		"aria-hidden": "true",
+		className: "size-3 shrink-0",
+		style: { color },
+		children: /* @__PURE__ */ jsx("rect", {
+			x: "1",
+			y: "3",
+			width: "10",
+			height: "6",
+			rx: "1.5",
+			fill: "currentColor",
+			fillOpacity: hollow ? .35 : 1
+		})
+	});
+}
+function useMergedRef(forwarded) {
+	const inner = useRef(null);
+	return [inner, useCallback((node) => {
+		inner.current = node;
+		if (typeof forwarded === "function") forwarded(node);
+		else if (forwarded) forwarded.current = node;
+	}, [forwarded])];
+}
+function usePlotWidth(ref, enabled) {
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		if (!enabled) return;
+		const el = ref.current;
+		if (!el) return;
+		let frame = 0;
+		const measure = () => {
+			const next = Math.round(el.getBoundingClientRect().width);
+			setWidth((prev) => prev === next ? prev : next);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(measure);
+		});
+		observer.observe(el);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [ref, enabled]);
+	return width;
+}
+function usePlotBox(cellRef, wrapperRef, enabled, resetKey) {
+	const [box, setBox] = useState({
+		left: 0,
+		width: 0
+	});
+	useLayoutEffect(() => {
+		if (!enabled) return;
+		const cell = cellRef.current;
+		const wrapper = wrapperRef.current;
+		if (!cell || !wrapper) return;
+		let frame = 0;
+		const measure = () => {
+			const cellRect = cell.getBoundingClientRect();
+			const wrapperRect = wrapper.getBoundingClientRect();
+			const next = {
+				left: cellRect.left - wrapperRect.left,
+				width: Math.round(cellRect.width)
+			};
+			setBox((prev) => prev.left === next.left && prev.width === next.width ? prev : next);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(measure);
+		});
+		observer.observe(cell);
+		observer.observe(wrapper);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [
+		cellRef,
+		wrapperRef,
+		enabled,
+		resetKey
+	]);
+	return box;
+}
+/**
+* A highlight-analysis panel: one window of a metric, established and
+* explained. The change across the window is the headline; the window is
+* painted inside the whole series; its change is placed among the changes of
+* every comparable window as a strip plot with a typical range and a verdict;
+* and the change is decomposed into signed driver contributions that reconcile
+* with it — plus every loading, empty, error and stale state, layout-stable,
+* with generated text equivalents and a table for every plot.
+*
+* Where `MetricCard variant="highlight"` asserts that a window moved and by
+* how much, HighlightCard answers "is that unusual, and what drove it".
+*/
+const HighlightCard = forwardRef(({ label, name: nameProp, hint, series, highlight, drivers = EMPTY_DRIVERS, sections = DEFAULT_SECTIONS, peerMode = "rolling", baseline = "sigma", minPeers = 4, severityThresholds, driverLimit, driverTolerance, selectedDriver, defaultSelectedDriver, onDriverSelect, mark = "line", scale = "auto", axes = true, contextHeight: contextHeightProp, deltaMode = "percent", goodDirection = "up", format = "compact", formatValue, unit, granularity, insight, status = "ready", filtered = false, stale = false, updatedAt, updatedAtFormat = "day", onRetry, onClearFilters, size = "md", titleLevel = 3, locale, timeZone, labels: labelOverrides, description, action, defaultTableOpen = false, hideTableToggle = false, onEmbed, patchSpec, render, className, ...rest }, forwardedRef) => {
+	const labels = useMemo(() => resolveHighlightLabels(labelOverrides), [labelOverrides]);
+	const sizes = sizeStyles[size];
+	const contextHeight = contextHeightProp ?? sizes.contextHeight + (axes ? X_AXIS_HEIGHT_PX : 0);
+	const name = nameProp ?? (typeof label === "string" ? label : MISSING_NAME);
+	const id = useId();
+	const headingId = `${id}-label`;
+	const descriptionId = `${id}-description`;
+	const hintId = `${id}-hint`;
+	const tableId = `${id}-table`;
+	const windowExplanationId = `${id}-window`;
+	const peerExplanationId = `${id}-peer`;
+	const [rootRef, setRootRef] = useMergedRef(forwardedRef);
+	const contextRef = useRef(null);
+	const peersRef = useRef(null);
+	const driverRowsRef = useRef(null);
+	const driverCellRef = useRef(null);
+	const [tableOpen, setTableOpen] = useState(defaultTableOpen);
+	const [popoverContainer, setPopoverContainer] = useState(null);
+	const tokens = useChartTokens(rootRef);
+	const isDriverControlled = selectedDriver !== void 0;
+	const [innerDriver, setInnerDriver] = useState(defaultSelectedDriver);
+	const driverKey = isDriverControlled ? selectedDriver : innerDriver;
+	const pendingAnnounce = useRef(false);
+	const [announcement, setAnnouncement] = useState("");
+	const selectDriver = useCallback((key) => {
+		pendingAnnounce.current = true;
+		if (!isDriverControlled) setInnerDriver(key);
+		onDriverSelect?.(key);
+	}, [isDriverControlled, onDriverSelect]);
+	const summary = useMemo(() => normalizeHighlightSeries(series, granularity), [series, granularity]);
+	const formatters = useMemo(() => createHighlightFormatters({
+		format,
+		locale,
+		timeZone,
+		formatValue,
+		xType: summary?.xType ?? "temporal",
+		granularity: summary?.granularity ?? granularity ?? "day",
+		deltaMode,
+		percentagePoints: labels.percentagePoints
+	}), [
+		format,
+		locale,
+		timeZone,
+		formatValue,
+		summary,
+		granularity,
+		deltaMode,
+		labels.percentagePoints
+	]);
+	const deltaOptions = useMemo(() => ({
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		percentagePoints: labels.percentagePoints,
+		formatters
+	}), [
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		labels.percentagePoints,
+		formatters
+	]);
+	const info = useMemo(() => resolveHighlightWindow(summary, highlight, deltaOptions), [
+		summary,
+		highlight,
+		deltaOptions
+	]);
+	const wantsPeers = sections.includes("peers");
+	const peers = useMemo(() => wantsPeers ? derivePeers(summary, info, {
+		...deltaOptions,
+		mode: peerMode,
+		baseline,
+		minPeers,
+		thresholds: severityThresholds
+	}) : null, [
+		wantsPeers,
+		summary,
+		info,
+		deltaOptions,
+		peerMode,
+		baseline,
+		minPeers,
+		severityThresholds
+	]);
+	const wantsDrivers = sections.includes("drivers");
+	const driverInfo = useMemo(() => wantsDrivers ? normalizeDrivers(drivers, info, {
+		goodDirection,
+		formatters,
+		limit: driverLimit,
+		otherLabel: labels.driverOther,
+		residualLabel: labels.driverResidual,
+		tolerance: driverTolerance
+	}) : null, [
+		wantsDrivers,
+		drivers,
+		info,
+		goodDirection,
+		formatters,
+		driverLimit,
+		labels.driverOther,
+		labels.driverResidual,
+		driverTolerance
+	]);
+	const hasData = (summary?.count ?? 0) > 0;
+	const state = deriveHighlightState({
+		status,
+		hasData,
+		filtered
+	});
+	const showContent = state === "ready" || state === "refreshing";
+	const wantsContext = sections.includes("context");
+	const hasContext = showContent && wantsContext && summary != null && info != null && summary.count >= 2;
+	const hasPeers = showContent && peers != null;
+	const peersInsufficient = showContent && wantsPeers && info != null && peers == null;
+	const hasDrivers = showContent && driverInfo != null && driverInfo.rows.length > 0;
+	const unresolved = showContent && info == null;
+	const driverRows = driverInfo?.rows ?? [];
+	const interactive = onDriverSelect != null && hasDrivers;
+	const asOfDate = updatedAt == null ? null : updatedAt instanceof Date ? updatedAt : new Date(updatedAt);
+	const asOfValid = asOfDate != null && !Number.isNaN(asOfDate.getTime());
+	const asOfText = asOfValid ? typeof updatedAtFormat === "function" ? updatedAtFormat(asOfDate) : formatDate(asOfDate, {
+		granularity: updatedAtFormat,
+		locale,
+		timeZone
+	}) : void 0;
+	const cardDescription = description ?? buildHighlightDescription({
+		name,
+		state,
+		info,
+		peers,
+		drivers: driverInfo,
+		formatters,
+		asOfText,
+		labels
+	});
+	const selectedRow = driverKey == null ? null : driverRows.find((row) => row.key === driverKey) ?? null;
+	useEffect(() => {
+		if (!pendingAnnounce.current) return;
+		pendingAnnounce.current = false;
+		setAnnouncement(selectedRow ? labels.driverSelected({
+			label: selectedRow.label,
+			contribution: selectedRow.contributionText,
+			share: selectedRow.share == null ? null : selectedRow.shareText
+		}) : "");
+	}, [selectedRow, labels]);
+	const windowExplanationRows = info ? labels.windowExplanation({
+		periodText: info.rangeText,
+		startText: formatters.formatY(info.start.y),
+		endText: formatters.formatY(info.end.y),
+		changeText: info.delta.text,
+		secondaryText: info.delta.secondaryText,
+		renderedMode: info.delta.renderedMode,
+		direction: info.delta.direction,
+		peakText: info.peak ? `${formatters.formatY(info.peak.y)} · ${formatters.formatX(info.peak.x)}` : null,
+		troughText: info.trough ? `${formatters.formatY(info.trough.y)} · ${formatters.formatX(info.trough.x)}` : null,
+		steepestText: info.steepest ? `${info.steepest.changeText} · ${info.steepest.rangeText}` : null
+	}) : [];
+	const windowExplanation = windowExplanationRows.map(([key, value]) => `${key}: ${value}`).join(". ");
+	const peerExplanationRows = peers ? labels.peerExplanation(peers) : [];
+	const peerExplanation = peerExplanationRows.map(([key, value]) => `${key}: ${value}`).join(". ");
+	const contextWidth = usePlotWidth(contextRef, hasContext);
+	const peersWidth = usePlotWidth(peersRef, hasPeers);
+	const driverPlotHeight = driverRows.length * sizes.step;
+	const driverBox = usePlotBox(driverCellRef, driverRowsRef, hasDrivers, driverRows[0]?.key ?? "");
+	const contextTooltip = useArcTooltipHandler({ content: useCallback(({ item }) => {
+		const raw = item.datum;
+		const datum = raw && "datum" in raw && raw.datum ? raw.datum : raw;
+		if (!datum || datum.x == null) return null;
+		const rows = [[labels.tablePeriod, formatters.formatX(datum.x)], [name, formatters.formatY(datum.y)]];
+		if (datum.hl && info) {
+			rows.push([labels.windowPeriod, info.label ? `${info.label} · ${info.rangeText}` : info.rangeText]);
+			rows.push([labels.windowChange, info.delta.text]);
+		}
+		return /* @__PURE__ */ jsx(ArcTooltipRows, { rows });
+	}, [
+		labels,
+		formatters,
+		name,
+		info
+	]) });
+	const peersTooltip = useArcTooltipHandler({ content: useCallback(({ item }) => {
+		const datum = item.datum;
+		if (!datum) return null;
+		if (datum.low != null && datum.high != null && peers) return /* @__PURE__ */ jsx(ArcTooltipRows, { rows: [[labels.peerTypical, peers.typicalText]] });
+		if (!datum.rangeText) return null;
+		const rows = [[labels.tableWindow, datum.rangeText], [labels.tableChange, datum.changeText ?? "—"]];
+		if (datum.isHighlight && peers) rows.push([labels.peerRank, peers.rankText]);
+		return /* @__PURE__ */ jsx(ArcTooltipRows, { rows });
+	}, [labels, peers]) });
+	const driversTooltip = useArcTooltipHandler({ content: useCallback(({ item }) => {
+		const datum = item.datum;
+		if (!datum || datum.label == null) return null;
+		const rows = [[labels.tableDriver, datum.label], [labels.driverContribution, formatters.formatAmountChange(datum.value ?? 0)]];
+		if (datum.share != null) rows.push([labels.tableShare, formatters.formatShare(datum.share)]);
+		return /* @__PURE__ */ jsx(ArcTooltipRows, { rows });
+	}, [labels, formatters]) });
+	const contextOptions = useMemo(() => arcEmbedOptions({ tooltip: contextTooltip.handler }), [contextTooltip.handler]);
+	const peersOptions = useMemo(() => arcEmbedOptions({ tooltip: peersTooltip.handler }), [peersTooltip.handler]);
+	const driversOptions = useMemo(() => arcEmbedOptions({ tooltip: driversTooltip.handler }), [driversTooltip.handler]);
+	const xType = summary?.xType;
+	const summaryGranularity = summary?.granularity;
+	const valueFormat = locale ? `${format}@${locale}` : format;
+	const changeFormat = deltaMode === "percent" ? locale ? `percent:1@${locale}` : "percent:1" : valueFormat;
+	const contextSpec = useMemo(() => {
+		if (!tokens || !xType || !summaryGranularity) return null;
+		const timeGrammar = (kind) => [
+			kind,
+			locale ?? "",
+			timeZone ?? ""
+		].join("@").replace(/@+$/, "");
+		const axisGranularity = summaryGranularity === "day" ? "day-short" : summaryGranularity === "month" ? "month-short" : summaryGranularity === "datetime" ? "time" : summaryGranularity;
+		const built = buildHighlightContextSpec({
+			mark,
+			scale,
+			xType,
+			height: contextHeight,
+			axes,
+			tooltip: true,
+			xTitle: labels.tablePeriod,
+			yTitle: name,
+			valueFormat,
+			timeFormat: timeGrammar(summaryGranularity),
+			axisTimeFormat: timeGrammar(axisGranularity),
+			locale,
+			timeZone
+		}, tokens);
+		return patchSpec ? patchSpec(built, "context") : built;
+	}, [
+		tokens,
+		xType,
+		summaryGranularity,
+		mark,
+		scale,
+		contextHeight,
+		axes,
+		labels.tablePeriod,
+		name,
+		valueFormat,
+		locale,
+		timeZone,
+		patchSpec
+	]);
+	const peersSpec = useMemo(() => {
+		if (!tokens) return null;
+		const built = buildHighlightPeersSpec({
+			height: sizes.peersHeight,
+			tooltip: true,
+			windowTitle: labels.tableWindow,
+			changeTitle: labels.tableChange,
+			changeFormat,
+			typicalTitle: labels.peerTypical,
+			locale,
+			timeZone
+		}, tokens);
+		return patchSpec ? patchSpec(built, "peers") : built;
+	}, [
+		tokens,
+		sizes.peersHeight,
+		labels.tableWindow,
+		labels.tableChange,
+		labels.peerTypical,
+		changeFormat,
+		locale,
+		timeZone,
+		patchSpec
+	]);
+	const driversSpec = useMemo(() => {
+		if (!tokens) return null;
+		const built = buildHighlightDriversSpec({
+			barHeight: Math.min(sizes.barHeight, 24),
+			height: driverPlotHeight,
+			tooltip: true,
+			driverTitle: labels.tableDriver,
+			contributionTitle: labels.driverContribution,
+			shareTitle: labels.tableShare,
+			valueFormat,
+			locale,
+			timeZone
+		}, tokens);
+		return patchSpec ? patchSpec(built, "drivers") : built;
+	}, [
+		tokens,
+		sizes.barHeight,
+		driverPlotHeight,
+		labels.tableDriver,
+		labels.driverContribution,
+		labels.tableShare,
+		valueFormat,
+		locale,
+		timeZone,
+		patchSpec
+	]);
+	const contextData = useMemo(() => summary && info ? buildHighlightContextDatasets(summary, info) : null, [summary, info]);
+	const contextDatasets = useMemo(() => ({
+		[HIGHLIGHT_TABLE_DATASET]: contextData?.table ?? [],
+		[HIGHLIGHT_OUTSIDE_DATASET]: contextData?.outside ?? [],
+		[HIGHLIGHT_INSIDE_DATASET]: contextData?.inside ?? [],
+		[HIGHLIGHT_ENDPOINTS_DATASET]: contextData?.endpoints ?? [],
+		[HIGHLIGHT_BAND_DATASET]: contextData?.band ?? []
+	}), [contextData]);
+	const peersDatasets = useMemo(() => ({
+		[HIGHLIGHT_PEERS_DATASET]: peers ? peers.peers : [],
+		[HIGHLIGHT_TYPICAL_DATASET]: peers ? buildTypicalRows(peers) : [],
+		[HIGHLIGHT_ZERO_DATASET]: ZERO_ROWS
+	}), [peers]);
+	const driversDatasets = useMemo(() => ({
+		[HIGHLIGHT_DRIVERS_DATASET]: driverInfo ? buildDriverRows(driverInfo) : [],
+		[HIGHLIGHT_ZERO_DATASET]: ZERO_ROWS
+	}), [driverInfo]);
+	const contextChartDescription = summary && info ? buildContextDescription({
+		name,
+		mark,
+		summary,
+		info,
+		formatters,
+		labels
+	}) : void 0;
+	const peersChartDescription = peers ? buildPeersDescription({
+		name,
+		stats: peers,
+		labels
+	}) : void 0;
+	const driversChartDescription = driverInfo ? buildDriversDescription({
+		name,
+		info: driverInfo,
+		labels
+	}) : void 0;
+	const handleContextEmbed = useCallback((result) => onEmbed?.(result, "context"), [onEmbed]);
+	const handlePeersEmbed = useCallback((result) => onEmbed?.(result, "peers"), [onEmbed]);
+	const handleDriversEmbed = useCallback((result) => onEmbed?.(result, "drivers"), [onEmbed]);
+	const handleDriverPlotClick = (event) => {
+		if (!interactive) return;
+		const top = event.currentTarget.getBoundingClientRect().top;
+		const row = driverRows[Math.floor((event.clientY - top) / sizes.step)];
+		if (row && row.role === "driver" && row.key !== driverKey) selectDriver(row.key);
+	};
+	const onDriverKeyDown = (event, key) => {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		selectDriver(key);
+	};
+	const insightContent = insight === void 0 ? info ? /* @__PURE__ */ jsx(InsightText, { segments: buildHighlightAnalysisInsight({
+		name,
+		info,
+		peers,
+		drivers: driverInfo,
+		labels
+	}) }) : null : insight;
+	const showInsight = insightContent != null && insightContent !== false;
+	const reserveContext = wantsContext;
+	const reservePeers = wantsPeers;
+	const reserveDrivers = wantsDrivers && drivers.length > 0;
+	const sectionBlock = (plot) => sizes.sectionTitlePx + sizes.gapPx / 2 + plot;
+	const bodyMinHeight = sizes.headlinePx + (reserveContext ? sizes.gapPx + contextHeight : 0) + (reservePeers ? sizes.gapPx + sectionBlock(sizes.peersHeight + sizes.gapPx + sizes.sectionTitlePx) : 0) + (reserveDrivers ? sizes.gapPx + sectionBlock(Math.min(drivers.length, driverLimit ?? drivers.length) * sizes.step) : 0) + (showInsight || insight === void 0 ? sizes.gapPx + sizes.sectionTitlePx : 0);
+	const HeadingTag = `h${titleLevel}`;
+	const SectionTag = `h${SECTION_LEVEL[titleLevel]}`;
+	const busy = state === "loading" || state === "refreshing";
+	const directionWord = info?.delta.direction === "up" ? labels.increase : info?.delta.direction === "down" ? labels.decrease : labels.unchanged;
+	const driverColor = useCallback((tone) => tokens ? tone === "positive" ? tokens.divergingPositive : tone === "negative" ? tokens.divergingNegative : tokens.emphasis : void 0, [tokens]);
+	return /* @__PURE__ */ jsxs(Box, {
+		ref: setRootRef,
+		render: render ?? /* @__PURE__ */ jsx("figure", {}),
+		padding: sizes.padding,
+		"aria-labelledby": headingId,
+		"aria-describedby": descriptionId,
+		"aria-busy": busy || void 0,
+		"data-status": status,
+		"data-state": state,
+		"data-size": size,
+		"data-mark": mark,
+		"data-sections": sections.join(" "),
+		"data-peers": wantsPeers ? peerMode : void 0,
+		"data-baseline": wantsPeers ? baseline : void 0,
+		"data-severity": hasPeers ? peers?.severity : void 0,
+		"data-window": showContent ? info ? "resolved" : "unresolved" : void 0,
+		"data-polarity": showContent && info ? info.delta.polarity : void 0,
+		"data-reconciles": hasDrivers ? driverInfo?.reconciles ? "" : "false" : void 0,
+		"data-folded": hasDrivers && driverInfo && driverInfo.folded > 0 ? driverInfo.folded : void 0,
+		"data-selected-driver": hasDrivers ? driverKey ?? void 0 : void 0,
+		"data-empty": state === "empty" || state === "no-match" ? "" : void 0,
+		"data-stale": stale ? "" : void 0,
+		...rest,
+		className: cn("relative flex min-w-0 flex-col", sizes.gap, className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center gap-1",
+					children: [/* @__PURE__ */ jsx(HeadingTag, {
+						id: headingId,
+						className: cn(labelClasses, sizes.label, "line-clamp-2"),
+						children: label
+					}), hint && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+						render: /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							iconOnly: true,
+							circular: true,
+							"aria-label": labels.about(name),
+							"aria-describedby": hintId,
+							className: headerControlClasses
+						}),
+						children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-3.5" })
+					}), /* @__PURE__ */ jsx(TooltipPopup, { children: hint })] }), /* @__PURE__ */ jsx("span", {
+						id: hintId,
+						className: "sr-only",
+						children: hint
+					})] })]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1",
+					children: [
+						stale && /* @__PURE__ */ jsx(Badge, {
+							variant: "warning",
+							appearance: "soft",
+							size: "sm",
+							children: labels.stale
+						}),
+						showContent && info && /* @__PURE__ */ jsxs(Popover, {
+							open: tableOpen,
+							onOpenChange: setTableOpen,
+							children: [!hideTableToggle && /* @__PURE__ */ jsx(PopoverTrigger, {
+								render: /* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "sm",
+									iconOnly: true,
+									circular: true,
+									"aria-label": tableOpen ? labels.hideTable(name) : labels.showTable(name),
+									className: headerControlClasses
+								}),
+								children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-3.5" })
+							}), popoverContainer && /* @__PURE__ */ jsxs(PopoverPopup, {
+								id: tableId,
+								anchor: rootRef,
+								container: popoverContainer,
+								side: "right",
+								align: "start",
+								collisionPadding: 8,
+								className: "pointer-events-auto w-[min(30rem,var(--available-width))]",
+								"data-part": "data-popover",
+								children: [/* @__PURE__ */ jsx(PopoverTitle, {
+									className: "mb-3",
+									children: name
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "flex max-h-[min(26rem,calc(var(--available-height)-5rem))] flex-col gap-4 overflow-y-auto",
+									tabIndex: 0,
+									role: "region",
+									"aria-label": labels.tableCaption(name),
+									"data-part": "tables",
+									children: [
+										/* @__PURE__ */ jsxs(TableContainer, {
+											variant: "plain",
+											"data-part": "window-table",
+											children: [/* @__PURE__ */ jsx("p", {
+												className: cn(sectionTitleClasses, "mb-1 text-xs"),
+												children: labels.contextTitle
+											}), /* @__PURE__ */ jsxs(Table, {
+												size: "sm",
+												stickyHeader: true,
+												hoverable: false,
+												children: [
+													/* @__PURE__ */ jsx(TableCaption, {
+														side: "top",
+														className: "sr-only",
+														children: labels.tableCaption(name)
+													}),
+													/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+														/* @__PURE__ */ jsx(TableHead, { children: labels.tablePeriod }),
+														/* @__PURE__ */ jsx(TableHead, {
+															className: "text-right",
+															children: labels.tableValue
+														}),
+														/* @__PURE__ */ jsx(TableHead, {
+															className: "text-right",
+															children: labels.tableStep
+														})
+													] }) }),
+													/* @__PURE__ */ jsx(TableBody, { children: info.readings.map((reading, at) => {
+														const leg = at === 0 ? null : info.legs[at - 1];
+														const edge = at === 0 ? labels.windowStart : at === info.readings.length - 1 ? labels.windowEnd : null;
+														return /* @__PURE__ */ jsxs(TableRow, { children: [
+															/* @__PURE__ */ jsxs(TableCell, { children: [formatters.formatX(reading.x), edge && /* @__PURE__ */ jsx("span", {
+																className: "ms-1.5 text-muted-foreground text-xs",
+																children: edge
+															})] }),
+															/* @__PURE__ */ jsx(TableCell, {
+																className: "text-right tabular-nums",
+																children: formatters.formatY(reading.y)
+															}),
+															/* @__PURE__ */ jsx(TableCell, {
+																className: "text-right tabular-nums",
+																children: leg ? leg.changeText : "—"
+															})
+														] }, `${reading.x}`);
+													}) })
+												]
+											})]
+										}),
+										hasDrivers && driverInfo && /* @__PURE__ */ jsxs(TableContainer, {
+											variant: "plain",
+											"data-part": "drivers-table",
+											children: [/* @__PURE__ */ jsx("p", {
+												className: cn(sectionTitleClasses, "mb-1 text-xs"),
+												children: labels.driversTitle
+											}), /* @__PURE__ */ jsxs(Table, {
+												size: "sm",
+												hoverable: false,
+												children: [
+													/* @__PURE__ */ jsx(TableCaption, {
+														side: "top",
+														className: "sr-only",
+														children: labels.driversGroup(name)
+													}),
+													/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+														/* @__PURE__ */ jsx(TableHead, { children: labels.tableDriver }),
+														/* @__PURE__ */ jsx(TableHead, {
+															className: "text-right",
+															children: labels.driverContribution
+														}),
+														/* @__PURE__ */ jsx(TableHead, {
+															className: "text-right",
+															children: labels.tableShare
+														})
+													] }) }),
+													/* @__PURE__ */ jsxs(TableBody, { children: [driverInfo.rows.map((row) => /* @__PURE__ */ jsxs(TableRow, {
+														"data-role": row.role,
+														children: [
+															/* @__PURE__ */ jsx(TableCell, { children: row.label }),
+															/* @__PURE__ */ jsx(TableCell, {
+																className: "text-right tabular-nums",
+																children: row.contributionText
+															}),
+															/* @__PURE__ */ jsx(TableCell, {
+																className: "text-right tabular-nums",
+																children: row.shareText
+															})
+														]
+													}, row.key)), /* @__PURE__ */ jsxs(TableRow, { children: [
+														/* @__PURE__ */ jsx(TableCell, {
+															className: "font-medium",
+															children: labels.driverTotal
+														}),
+														/* @__PURE__ */ jsx(TableCell, {
+															className: "text-right font-medium tabular-nums",
+															children: driverInfo.totalText
+														}),
+														/* @__PURE__ */ jsx(TableCell, {})
+													] })] })
+												]
+											})]
+										}),
+										hasPeers && peers && /* @__PURE__ */ jsxs(TableContainer, {
+											variant: "plain",
+											"data-part": "peers-table",
+											children: [/* @__PURE__ */ jsx("p", {
+												className: cn(sectionTitleClasses, "mb-1 text-xs"),
+												children: labels.peersTitle
+											}), /* @__PURE__ */ jsxs(Table, {
+												size: "sm",
+												stickyHeader: true,
+												hoverable: false,
+												children: [
+													/* @__PURE__ */ jsx(TableCaption, {
+														side: "top",
+														className: "sr-only",
+														children: labels.peersCaption({
+															count: peers.count,
+															readings: peers.length + 1,
+															mode: peers.mode
+														})
+													}),
+													/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [/* @__PURE__ */ jsx(TableHead, { children: labels.tableWindow }), /* @__PURE__ */ jsx(TableHead, {
+														className: "text-right",
+														children: labels.tableChange
+													})] }) }),
+													/* @__PURE__ */ jsx(TableBody, { children: peers.peers.map((peer, at) => /* @__PURE__ */ jsxs(TableRow, {
+														"data-highlighted": peer.isHighlight ? "" : void 0,
+														children: [/* @__PURE__ */ jsxs(TableCell, { children: [
+															peer.rangeText,
+															peer.isHighlight && /* @__PURE__ */ jsxs("span", {
+																className: "sr-only",
+																children: [
+																	" (",
+																	labels.highlighted,
+																	")"
+																]
+															}),
+															peer.isHighlight && /* @__PURE__ */ jsx("span", {
+																"aria-hidden": "true",
+																className: "ms-1.5 inline-block size-1.5 rounded-full align-middle",
+																style: { background: driverColor(peer.polarity) }
+															})
+														] }), /* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums",
+															children: peer.changeText
+														})]
+													}, at)) })
+												]
+											})]
+										})
+									]
+								})]
+							})]
+						}),
+						action
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: descriptionId,
+				className: "sr-only",
+				children: cardDescription
+			}),
+			/* @__PURE__ */ jsx("p", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				"data-part": "announcement",
+				children: announcement
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("relative flex min-w-0 flex-col", sizes.sectionGap),
+				style: { minHeight: bodyMinHeight },
+				children: [
+					state === "loading" && /* @__PURE__ */ jsxs(SkeletonGroup, {
+						className: cn("flex flex-col", sizes.sectionGap),
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 items-start justify-between gap-2",
+								style: { minHeight: sizes.headlinePx },
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex w-1/2 flex-col gap-1",
+									children: [/* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-3/5",
+										style: { height: sizes.valueLinePx }
+									}), /* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-full",
+										style: { height: sizes.sectionTitlePx }
+									})]
+								}), /* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "w-20",
+									style: { height: sizes.sectionTitlePx + 4 }
+								})]
+							}),
+							reserveContext && /* @__PURE__ */ jsx(Skeleton, {
+								variant: "rounded",
+								className: "w-full",
+								style: { height: contextHeight }
+							}),
+							reservePeers && /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-2",
+								children: [
+									/* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-24",
+										style: { height: sizes.sectionTitlePx }
+									}),
+									/* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-full",
+										style: { height: sizes.peersHeight }
+									}),
+									/* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-4/5",
+										style: { height: sizes.sectionTitlePx }
+									})
+								]
+							}),
+							reserveDrivers && /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-2",
+								children: [/* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "w-28",
+									style: { height: sizes.sectionTitlePx }
+								}), Array.from({ length: Math.min(4, drivers.length) }, (_, index) => /* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									style: {
+										height: sizes.barHeight,
+										width: `${Math.max(30, 90 - index * 18)}%`
+									}
+								}, index))]
+							})
+						]
+					}),
+					state === "error" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "server-error",
+						scope: "inline",
+						title: labels.error,
+						description: false,
+						action: onRetry ? /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							onClick: onRetry,
+							children: labels.retry
+						}) : void 0,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					state === "empty" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "empty",
+						scope: "inline",
+						title: labels.noData,
+						description: false,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					state === "no-match" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "no-results",
+						scope: "inline",
+						title: labels.noMatch,
+						description: false,
+						action: onClearFilters ? /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: onClearFilters,
+							children: labels.clearFilters
+						}) : void 0,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					unresolved && /* @__PURE__ */ jsx("p", {
+						className: cn(captionClasses, "my-auto"),
+						"data-part": "unresolved",
+						children: labels.unresolved
+					}),
+					showContent && info && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 items-start justify-between gap-3",
+							style: { minHeight: sizes.headlinePx },
+							"data-part": "headline",
+							children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+								delay: 150,
+								render: /* @__PURE__ */ jsx("div", {
+									tabIndex: 0,
+									role: "group",
+									"aria-label": labels.windowDetails(name),
+									"aria-describedby": windowExplanationId,
+									className: cn("flex min-w-0 flex-col rounded-md", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"),
+									"data-part": "window"
+								}),
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										id: windowExplanationId,
+										className: "sr-only",
+										children: windowExplanation
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "flex min-w-0 flex-wrap items-baseline gap-x-1.5",
+										"data-part": "value",
+										children: [/* @__PURE__ */ jsxs("span", {
+											className: cn(valueClasses, sizes.value, "min-w-0 wrap-break-word", changeTextClasses[info.delta.polarity]),
+											"data-direction": info.delta.direction,
+											children: [/* @__PURE__ */ jsxs("span", {
+												className: "sr-only",
+												children: [directionWord, " "]
+											}), info.delta.text]
+										}), unit != null && /* @__PURE__ */ jsx("span", {
+											className: cn("font-sans text-muted-foreground", sizes.body),
+											children: unit
+										})]
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: cn(captionClasses, "mt-1 min-w-0 wrap-break-word"),
+										"data-part": "readings",
+										children: [
+											formatters.formatY(info.start.y),
+											" → ",
+											formatters.formatY(info.end.y),
+											" ·",
+											" ",
+											labels.windowLine({
+												range: info.rangeText,
+												label: info.label
+											})
+										]
+									})
+								]
+							}), /* @__PURE__ */ jsx(TooltipPopup, {
+								arrow: false,
+								side: "bottom",
+								align: "start",
+								sideOffset: 8,
+								collisionPadding: 8,
+								container: popoverContainer,
+								className: "text-left",
+								"data-part": "window-tooltip",
+								children: /* @__PURE__ */ jsx(ArcTooltipRows, { rows: windowExplanationRows })
+							})] }), hasPeers && peers && /* @__PURE__ */ jsxs(Badge, {
+								variant: "neutral",
+								appearance: "outline",
+								size: sizes.badge,
+								className: "shrink-0",
+								"data-part": "severity",
+								"data-severity": peers.severity,
+								children: [/* @__PURE__ */ jsx(DeltaGlyph, { direction: info.delta.direction }), labels.severityNames[peers.severity]]
+							})]
+						}),
+						sections.map((section) => {
+							if (section === "context") {
+								if (!hasContext) return null;
+								return /* @__PURE__ */ jsx("div", {
+									ref: contextRef,
+									className: "relative w-full",
+									style: { height: contextHeight },
+									"data-part": "context",
+									children: contextWidth > 0 && contextSpec ? /* @__PURE__ */ jsx(ArcVegaChart, {
+										spec: contextSpec,
+										options: contextOptions,
+										datasets: contextDatasets,
+										description: contextChartDescription,
+										width: contextWidth,
+										height: contextHeight,
+										onEmbed: onEmbed ? handleContextEmbed : void 0,
+										className: "absolute inset-0 [&_svg]:block [&_.vega-bindings:empty]:hidden",
+										fallback: /* @__PURE__ */ jsx(Skeleton, {
+											variant: "rounded",
+											className: "size-full"
+										})
+									}) : /* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "size-full"
+									})
+								}, section);
+							}
+							if (section === "peers") {
+								if (!hasPeers && !peersInsufficient) return null;
+								return /* @__PURE__ */ jsxs("div", {
+									className: "flex min-w-0 flex-col gap-2",
+									"data-part": "peers",
+									children: [/* @__PURE__ */ jsx(SectionTag, {
+										className: cn(sectionTitleClasses, sizes.body),
+										children: labels.peersTitle
+									}), peersInsufficient ? /* @__PURE__ */ jsx("p", {
+										className: captionClasses,
+										children: labels.insufficientPeers
+									}) : peers && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+										/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+											delay: 150,
+											render: /* @__PURE__ */ jsx("div", {
+												tabIndex: 0,
+												role: "group",
+												"aria-label": labels.peersTitle,
+												"aria-describedby": peerExplanationId,
+												className: cn("relative w-full rounded-md", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"),
+												style: { height: sizes.peersHeight },
+												"data-part": "peers-plot"
+											}),
+											children: [/* @__PURE__ */ jsx("span", {
+												id: peerExplanationId,
+												className: "sr-only",
+												children: peerExplanation
+											}), /* @__PURE__ */ jsx("div", {
+												ref: peersRef,
+												className: "absolute inset-0",
+												children: peersWidth > 0 && peersSpec ? /* @__PURE__ */ jsx(ArcVegaChart, {
+													spec: peersSpec,
+													options: peersOptions,
+													datasets: peersDatasets,
+													description: peersChartDescription,
+													width: peersWidth,
+													height: sizes.peersHeight,
+													onEmbed: onEmbed ? handlePeersEmbed : void 0,
+													className: "absolute inset-0 [&_svg]:block [&_.vega-bindings:empty]:hidden",
+													fallback: /* @__PURE__ */ jsx(Skeleton, {
+														variant: "rounded",
+														className: "size-full"
+													})
+												}) : /* @__PURE__ */ jsx(Skeleton, {
+													variant: "rounded",
+													className: "size-full"
+												})
+											})]
+										}), /* @__PURE__ */ jsx(TooltipPopup, {
+											arrow: false,
+											side: "bottom",
+											align: "start",
+											sideOffset: 8,
+											collisionPadding: 8,
+											container: popoverContainer,
+											className: "text-left",
+											"data-part": "peers-tooltip",
+											children: /* @__PURE__ */ jsx(ArcTooltipRows, { rows: peerExplanationRows })
+										})] }),
+										/* @__PURE__ */ jsx("p", {
+											className: cn("font-sans text-foreground", sizes.body),
+											"data-part": "verdict",
+											children: buildPeerVerdict(peers, labels)
+										}),
+										/* @__PURE__ */ jsx("p", {
+											className: captionClasses,
+											"data-part": "peers-caption",
+											children: labels.peersCaption({
+												count: peers.count,
+												readings: peers.length + 1,
+												mode: peers.mode
+											})
+										})
+									] })]
+								}, section);
+							}
+							if (!hasDrivers || !driverInfo) return null;
+							return /* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-col gap-2",
+								"data-part": "drivers",
+								children: [
+									/* @__PURE__ */ jsx(SectionTag, {
+										className: cn(sectionTitleClasses, sizes.body),
+										children: labels.driversTitle
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										ref: driverRowsRef,
+										className: "relative w-full",
+										children: [/* @__PURE__ */ jsx("ul", {
+											"aria-label": labels.driversGroup(name),
+											className: cn(driverGridClasses, "font-sans", sizes.rowText),
+											style: { gridAutoRows: `${sizes.step}px` },
+											"data-part": "driver-rows",
+											children: driverInfo.rows.map((row, index) => {
+												const choosable = interactive && row.role === "driver";
+												const selected = row.key === driverKey;
+												const cells = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+													/* @__PURE__ */ jsxs("span", {
+														className: "flex min-w-0 items-center gap-1.5",
+														"data-part": "driver-label",
+														children: [/* @__PURE__ */ jsx(DriverSwatch, {
+															color: driverColor(row.polarity),
+															hollow: row.role === "residual"
+														}), /* @__PURE__ */ jsx("span", {
+															className: "min-w-0 truncate",
+															children: row.label
+														})]
+													}),
+													/* @__PURE__ */ jsx("span", {
+														ref: index === 0 ? driverCellRef : void 0,
+														"aria-hidden": "true",
+														className: "min-w-0 self-stretch",
+														"data-part": "driver-plot-cell"
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: cn("text-right tabular-nums", changeTextClasses[row.polarity]),
+														"data-part": "driver-value",
+														children: row.contributionText
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: "text-right text-muted-foreground tabular-nums",
+														"data-part": "driver-share",
+														children: row.shareText
+													})
+												] });
+												return /* @__PURE__ */ jsx("li", {
+													className: "col-span-4 grid grid-cols-subgrid items-center",
+													"data-part": "driver-row",
+													"data-role": row.role,
+													"data-selected": selected ? "" : void 0,
+													children: choosable ? /* @__PURE__ */ jsx("button", {
+														type: "button",
+														onClick: () => selectDriver(row.key),
+														onKeyDown: (event) => onDriverKeyDown(event, row.key),
+														"aria-label": labels.selectDriver(row.label),
+														"aria-pressed": selected,
+														className: cn("col-span-4 grid cursor-pointer grid-cols-subgrid items-center rounded-md text-left", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", selected ? "bg-primary-50" : "hover:bg-muted"),
+														children: cells
+													}) : cells
+												}, row.key);
+											})
+										}), driverBox.width > 0 && driversSpec && /* @__PURE__ */ jsx(ArcVegaChart, {
+											spec: driversSpec,
+											options: driversOptions,
+											datasets: driversDatasets,
+											description: driversChartDescription,
+											width: driverBox.width,
+											height: driverPlotHeight,
+											onEmbed: onEmbed ? handleDriversEmbed : void 0,
+											onClick: interactive ? handleDriverPlotClick : void 0,
+											className: cn("absolute top-0 [&_svg]:block [&_.vega-bindings:empty]:hidden", interactive && "cursor-pointer"),
+											style: {
+												left: driverBox.left,
+												width: driverBox.width,
+												height: driverPlotHeight
+											},
+											"data-part": "drivers-plot",
+											fallback: /* @__PURE__ */ jsx(Skeleton, {
+												variant: "rounded",
+												className: "absolute top-0",
+												style: {
+													left: driverBox.left,
+													width: driverBox.width,
+													height: driverPlotHeight
+												}
+											})
+										})]
+									}),
+									/* @__PURE__ */ jsxs("p", {
+										className: captionClasses,
+										"data-part": "drivers-caption",
+										children: [labels.driversCaption({
+											total: driverInfo.totalText,
+											explained: driverInfo.explainedText,
+											residual: driverInfo.residualText,
+											reconciles: driverInfo.reconciles
+										}), driverInfo.folded > 0 && ` ${labels.foldedCaption(driverInfo.folded, labels.driverOther)}`]
+									})
+								]
+							}, section);
+						}),
+						showInsight && /* @__PURE__ */ jsxs("div", {
+							className: cn("flex items-start gap-2 font-sans text-foreground", sizes.body),
+							"data-part": "insight",
+							children: [/* @__PURE__ */ jsx(AILoader, {
+								size: "sm",
+								state: "default",
+								label: labels.insightMark,
+								className: cn("shrink-0", size === "sm" ? "" : "mt-0.5")
+							}), /* @__PURE__ */ jsx("p", {
+								className: "min-w-0 flex-1 text-xs leading-[1.8] [&_strong]:font-semibold [&_strong]:text-foreground",
+								children: insightContent
+							})]
+						})
+					] }),
+					state === "refreshing" && /* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						className: "absolute -inset-1 rounded-md bg-veil"
+					})
+				]
+			}),
+			asOfValid && asOfDate && /* @__PURE__ */ jsx("p", {
+				className: cn(captionClasses, "text-right"),
+				"data-part": "as-of",
+				children: /* @__PURE__ */ jsx("time", {
+					dateTime: asOfDate.toISOString(),
+					children: asOfText
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: setPopoverContainer,
+				className: "pointer-events-none absolute inset-0",
+				"data-part": "popover-host"
+			}),
+			contextTooltip.tooltip,
+			peersTooltip.tooltip,
+			driversTooltip.tooltip
+		]
+	});
+});
+HighlightCard.displayName = "HighlightCard";
+//#endregion
+export { HighlightCard };