@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/ComparisonCard/ComparisonCard.js

@@ -0,0 +1,1325 @@
+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 { COMPARISON_REFERENCE_DATASET, COMPARISON_TABLE_DATASET, COMPARISON_ZERO_DATASET, buildComparisonPlotSpec, comparisonOrientation, comparisonUsesFrom, resolveComparisonScale } from "./ComparisonCard.chart.js";
+import { buildComparisonChartDescription, buildComparisonDescription, createComparisonFormatters, deriveComparisonDelta, deriveComparisonState, normalizeItems, resolveComparisonLabels } from "./ComparisonCard.model.js";
+import { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { AILoader, Badge, Box, Button, Menu, MenuGroupLabel, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuTrigger, 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/ComparisonCard/ComparisonCard.tsx
+const sizeStyles = {
+	sm: {
+		padding: "sm",
+		gap: "gap-2",
+		gapPx: 8,
+		label: "text-xs",
+		value: "text-2xl leading-8",
+		valueLinePx: 32,
+		unit: "text-xs",
+		body: "text-xs",
+		badge: "sm",
+		deltaLinePx: 20,
+		comparisonLinePx: 16,
+		chip: "sm",
+		chipLinePx: 20,
+		step: 24,
+		barHeight: 10,
+		pointSize: 64,
+		plotBlock: 104,
+		rowText: "text-xs"
+	},
+	md: {
+		padding: "md",
+		gap: "gap-2",
+		gapPx: 8,
+		label: "text-sm",
+		value: "text-3xl leading-9",
+		valueLinePx: 36,
+		unit: "text-sm",
+		body: "text-sm",
+		badge: "md",
+		deltaLinePx: 24,
+		comparisonLinePx: 20,
+		chip: "sm",
+		chipLinePx: 20,
+		step: 28,
+		barHeight: 12,
+		pointSize: 90,
+		plotBlock: 128,
+		rowText: "text-sm"
+	},
+	lg: {
+		padding: "lg",
+		gap: "gap-2",
+		gapPx: 8,
+		label: "text-sm",
+		value: "text-4xl leading-10",
+		valueLinePx: 40,
+		unit: "text-base",
+		body: "text-sm",
+		badge: "lg",
+		deltaLinePx: 28,
+		comparisonLinePx: 20,
+		chip: "md",
+		chipLinePx: 24,
+		step: 32,
+		barHeight: 14,
+		pointSize: 120,
+		plotBlock: 152,
+		rowText: "text-sm"
+	}
+};
+const CHIP_GAP_PX = 4;
+const deltaStackClasses = "flex min-w-0 shrink-0 flex-col gap-1 font-sans focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+const labelClasses = "min-w-0 font-sans font-medium text-muted-foreground";
+const valueClasses = "font-heading font-semibold tracking-tight text-foreground";
+const captionClasses = "font-sans text-xs text-muted-foreground mt-1";
+const rowLabelClasses = {
+	focus: "font-medium text-foreground",
+	baseline: "text-foreground",
+	item: "text-muted-foreground",
+	other: "text-muted-foreground"
+};
+const rowValueClasses = {
+	focus: "font-semibold text-foreground",
+	baseline: "font-medium text-foreground",
+	item: "font-medium text-foreground",
+	other: "font-medium text-muted-foreground"
+};
+const selectableRowClasses = "relative isolate cursor-pointer rounded-md before:pointer-events-none before:absolute before:-inset-x-1.5 before:inset-y-0 before:-z-10 before:rounded-md before:bg-muted before:opacity-0 hover:before:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring";
+const disabledRowClasses = "cursor-default hover:before:opacity-0";
+const polarityBadgeVariant = {
+	positive: "success",
+	negative: "destructive",
+	neutral: "neutral"
+};
+const headerControlClasses = "size-6 min-w-0 text-muted-foreground hover:text-foreground";
+const tileStateClasses = "w-full max-w-none gap-2 px-2 py-2 [--artwork-box:3rem]";
+const rowGridClasses = "grid grid-cols-[fit-content(40%)_minmax(0,1fr)_auto] gap-x-3";
+const blockRowGridClasses = "grid grid-cols-[minmax(0,1fr)_auto] gap-x-3";
+const MISSING_NAME = "Comparison";
+const EMPTY_ROWS = [];
+/** The swatch inside the subject chip — the exact hue AND the exact shape the subject's mark wears. */
+function FocusSwatch({ color, mark = "bar" }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		fill: "none",
+		"aria-hidden": "true",
+		className: "size-3 shrink-0",
+		style: { color },
+		children: mark === "bar" || mark === "column" ? /* @__PURE__ */ jsx("rect", {
+			x: "1",
+			y: "3",
+			width: "10",
+			height: "6",
+			rx: "1.5",
+			fill: "currentColor"
+		}) : /* @__PURE__ */ jsx("circle", {
+			cx: "6",
+			cy: "6",
+			r: "3.5",
+			fill: "currentColor"
+		})
+	});
+}
+/**
+* Match the plot's mark shape so its meaning never depends on color alone —
+* the key beside a lollipop is a stemmed dot, beside a dumbbell a hollow dot
+* joined to a solid one, and the target is always the dotted rule the plot
+* draws.
+*/
+function ComparisonKey({ label, mark = "bar", target = false, color }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("svg", {
+			width: "24",
+			height: "12",
+			viewBox: "0 0 24 12",
+			fill: "none",
+			"aria-hidden": "true",
+			className: "shrink-0",
+			style: { color },
+			children: target ? /* @__PURE__ */ jsx("line", {
+				x1: "2",
+				y1: "6",
+				x2: "22",
+				y2: "6",
+				stroke: "currentColor",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeDasharray: "0 4"
+			}) : mark === "bar" || mark === "column" ? /* @__PURE__ */ jsx("rect", {
+				x: "1",
+				y: "2",
+				width: "22",
+				height: "8",
+				rx: "1",
+				fill: "currentColor"
+			}) : mark === "dot" ? /* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "6",
+				r: "4",
+				fill: "currentColor"
+			}) : mark === "lollipop" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("line", {
+				x1: "2",
+				y1: "6",
+				x2: "18",
+				y2: "6",
+				stroke: "currentColor",
+				strokeWidth: 2,
+				strokeLinecap: "round"
+			}), /* @__PURE__ */ jsx("circle", {
+				cx: "19",
+				cy: "6",
+				r: "3.5",
+				fill: "currentColor"
+			})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx("line", {
+					x1: "5",
+					y1: "6",
+					x2: "19",
+					y2: "6",
+					stroke: "currentColor",
+					strokeWidth: 2,
+					strokeLinecap: "round"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "4",
+					cy: "6",
+					r: "3",
+					fill: "var(--color-background)",
+					stroke: "currentColor",
+					strokeWidth: 1.5
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "20",
+					cy: "6",
+					r: "3.5",
+					fill: "currentColor"
+				})
+			] })
+		}), label]
+	});
+}
+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 ChevronDownIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+	});
+}
+const menuValueColumnClasses = "w-16 shrink-0 text-right tabular-nums";
+const menuChangeColumnClasses = "w-16 shrink-0 text-right tabular-nums";
+const polarityTextClasses = {
+	positive: "text-chart-positive",
+	negative: "text-chart-negative",
+	neutral: "text-foreground"
+};
+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" })
+		]
+	});
+}
+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 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 comparison tile for dashboard grids — the second subtype of the KPI card
+* family beside `MetricCard`: one metric across a few items (periods,
+* segments, sources, plans) on one shared scale, with every name and value as
+* text beside the plot, the focus item in the emphasis hue, its delta against
+* a baseline in a polarity badge, an optional target rule, and every loading,
+* empty, error and stale state — layout-stable inside one `Box` frame, with a
+* generated text equivalent and a data table in an info popover.
+*
+* `mark` picks the form the data calls for: `bar` (default), `column` and
+* `lollipop` put length on a zero baseline; `dot` drops the baseline so
+* values clustered far from zero separate; `dumbbell` and `slope` read a
+* second reading per item (`ComparisonItem.from`) and draw the gap and the
+* move between the two.
+*/
+const ComparisonCard = forwardRef(({ label, name: nameProp, hint, items, focus, defaultFocus, onFocusChange, selectable = true, baseline, defaultBaseline, onBaselineChange, headline = "focus", focusChip = true, comparisonLabel, deltaMode = "percent", goodDirection = "up", format = "compact", formatValue, unit, target, mark = "bar", scale, fromLabel, toLabel, sort = "none", maxItems, expectedItems = 2, 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(() => resolveComparisonLabels(labelOverrides), [labelOverrides]);
+	const sizes = sizeStyles[size];
+	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 deltaExplanationId = `${id}-delta-explanation`;
+	const [rootRef, setRootRef] = useMergedRef(forwardedRef);
+	const rowsRef = useRef(null);
+	const plotCellRef = useRef(null);
+	const blockCellRef = useRef(null);
+	const [tableOpen, setTableOpen] = useState(defaultTableOpen);
+	const [popoverContainer, setPopoverContainer] = useState(null);
+	const isFocusControlled = focus !== void 0;
+	const [innerFocus, setInnerFocus] = useState(defaultFocus);
+	const focusKey = isFocusControlled ? focus : innerFocus;
+	const rowRefs = useRef(/* @__PURE__ */ new Map());
+	const pendingAnnounce = useRef(false);
+	const [announcement, setAnnouncement] = useState("");
+	const selectFocus = useCallback((key) => {
+		pendingAnnounce.current = true;
+		if (!isFocusControlled) setInnerFocus(key);
+		onFocusChange?.(key);
+	}, [isFocusControlled, onFocusChange]);
+	const isBaselineControlled = baseline !== void 0;
+	const [innerBaseline, setInnerBaseline] = useState(defaultBaseline);
+	const baselineKey = isBaselineControlled ? baseline : innerBaseline;
+	const selectBaseline = useCallback((key) => {
+		pendingAnnounce.current = true;
+		if (!isBaselineControlled) setInnerBaseline(key);
+		onBaselineChange?.(key);
+	}, [isBaselineControlled, onBaselineChange]);
+	const otherLabel = labels.other;
+	const summary = useMemo(() => normalizeItems(items, {
+		focus: focusKey,
+		baseline: baselineKey,
+		sort,
+		maxItems,
+		otherLabel
+	}), [
+		items,
+		focusKey,
+		baselineKey,
+		sort,
+		maxItems,
+		otherLabel
+	]);
+	const formatters = useMemo(() => createComparisonFormatters({
+		format,
+		locale,
+		formatValue,
+		deltaMode,
+		percentagePoints: labels.percentagePoints
+	}), [
+		format,
+		locale,
+		formatValue,
+		deltaMode,
+		labels.percentagePoints
+	]);
+	const rows = summary?.rows ?? EMPTY_ROWS;
+	const focusRow = summary?.focus ?? null;
+	const baselineRow = summary?.baseline ?? null;
+	const hasValue = (summary?.count ?? 0) > 0;
+	const hasData = rows.length > 0;
+	const state = deriveComparisonState({
+		status,
+		hasValue,
+		hasData,
+		filtered
+	});
+	const showContent = state === "ready" || state === "refreshing";
+	const hasChart = showContent && rows.length > 0;
+	const hasTable = hasChart;
+	const delta = useMemo(() => deriveComparisonDelta(focusRow, baselineRow, {
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		percentagePoints: labels.percentagePoints
+	}), [
+		focusRow,
+		baselineRow,
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		labels.percentagePoints
+	]);
+	const comparisonWanted = focus !== null && baseline !== null;
+	const insufficient = showContent && comparisonWanted && delta == null;
+	const targetText = target != null && Number.isFinite(target) ? formatters.formatValue(target) : null;
+	const hasReference = targetText != null;
+	const emphasize = focusRow != null;
+	const valueText = headline === "focus" ? formatters.formatValue(focusRow?.value) : headline === "gap" ? delta?.text ?? "—" : null;
+	const badgeText = delta ? headline === "gap" ? delta.secondaryText : delta.text : null;
+	const comparisonNode = comparisonLabel ?? (baselineRow ? headline === "gap" && focusRow ? labels.gapComparison(focusRow.label, baselineRow.label) : labels.versus(baselineRow.label) : null);
+	const deltaExplanationRows = delta && focusRow && baselineRow ? labels.deltaExplanation({
+		focusLabel: focusRow.label,
+		focusText: formatters.formatValue(focusRow.value),
+		baselineLabel: baselineRow.label,
+		baselineText: formatters.formatValue(baselineRow.value),
+		changeText: delta.text,
+		secondaryText: delta.secondaryText,
+		renderedMode: delta.renderedMode,
+		direction: delta.direction
+	}) : [];
+	const deltaExplanation = deltaExplanationRows.map(([key, value]) => `${key}: ${value}`).join(". ");
+	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 ?? buildComparisonDescription({
+		name,
+		state,
+		headline,
+		summary,
+		delta,
+		formatters,
+		targetText,
+		asOfText,
+		labels
+	});
+	useEffect(() => {
+		if (!pendingAnnounce.current) return;
+		pendingAnnounce.current = false;
+		setAnnouncement(cardDescription);
+	}, [cardDescription]);
+	const rowsSelectable = selectable && focusRow != null && (!isFocusControlled || onFocusChange != null);
+	const baselineSelectable = selectable && focusRow != null && (!isBaselineControlled || onBaselineChange != null);
+	const interactive = rowsSelectable;
+	const selectableRows = useMemo(() => rows.filter((row) => row.role !== "other"), [rows]);
+	const baselineCandidates = useMemo(() => rows.filter((row) => row.key !== focusRow?.key && row.value != null), [rows, focusRow]);
+	const percentagePoints = labels.percentagePoints;
+	const candidateChanges = useMemo(() => baselineCandidates.map((row) => {
+		const change = deriveComparisonDelta(focusRow, row, {
+			deltaMode,
+			goodDirection,
+			format,
+			locale,
+			percentagePoints
+		});
+		const percentText = change ? change.renderedMode === "percent" ? change.text : change.secondaryText : null;
+		const amountText = change ? change.renderedMode === "absolute" ? change.text : change.secondaryText : null;
+		return {
+			row,
+			polarity: change?.polarity ?? "neutral",
+			percentText: percentText ?? "—",
+			amountText: amountText ?? "—"
+		};
+	}), [
+		baselineCandidates,
+		focusRow,
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		percentagePoints
+	]);
+	const handleRowKeyDown = (event, row) => {
+		if (!interactive) return;
+		const index = selectableRows.indexOf(row);
+		if (index < 0) return;
+		let next;
+		switch (event.key) {
+			case "ArrowDown":
+			case "ArrowRight":
+				next = selectableRows[(index + 1) % selectableRows.length];
+				break;
+			case "ArrowUp":
+			case "ArrowLeft":
+				next = selectableRows[(index - 1 + selectableRows.length) % selectableRows.length];
+				break;
+			case "Home":
+				next = selectableRows[0];
+				break;
+			case "End":
+				next = selectableRows[selectableRows.length - 1];
+				break;
+			case " ":
+			case "Enter":
+				next = row;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		if (next.key !== focusRow?.key) selectFocus(next.key);
+		rowRefs.current.get(next.key)?.focus();
+	};
+	const handlePlotClick = (event) => {
+		if (!interactive) return;
+		const top = event.currentTarget.getBoundingClientRect().top;
+		const row = rows[Math.floor((event.clientY - top) / sizes.step)];
+		if (row && row.role !== "other" && row.key !== focusRow?.key) selectFocus(row.key);
+	};
+	const tokens = useChartTokens(rootRef);
+	const vertical = comparisonOrientation(mark) === "vertical";
+	const usesFrom = comparisonUsesFrom(mark);
+	const plotScale = resolveComparisonScale(mark, scale);
+	const fromTitle = fromLabel ?? labels.from;
+	const toTitle = toLabel ?? labels.to;
+	const showFromColumns = usesFrom && (summary?.hasFrom ?? false);
+	const plotHeight = vertical ? sizes.plotBlock : rows.length * sizes.step;
+	const overlayBox = usePlotBox(plotCellRef, rowsRef, hasChart && !vertical, rows[0]?.key ?? "");
+	const blockBox = usePlotBox(blockCellRef, blockCellRef, hasChart && vertical, mark);
+	const plotBox = vertical ? blockBox : overlayBox;
+	const barColor = useCallback((role) => tokens ? !emphasize || role === "focus" ? tokens.emphasis : tokens.context : void 0, [tokens, emphasize]);
+	const tooltipContent = useCallback(({ item }) => {
+		const datum = item.datum;
+		if (!datum) return null;
+		if ("key" in datum) {
+			const tooltipRows = [[/* @__PURE__ */ jsx(ComparisonKey, {
+				mark,
+				label: datum.label,
+				color: barColor(datum.role)
+			}, "item"), formatters.formatValue(datum.value)]];
+			if (showFromColumns) {
+				tooltipRows.unshift([fromTitle, formatters.formatValue(datum.from)]);
+				tooltipRows[1] = [/* @__PURE__ */ jsx(ComparisonKey, {
+					mark,
+					label: toTitle,
+					color: barColor(datum.role)
+				}, "item"), formatters.formatValue(datum.value)];
+				tooltipRows.push([labels.tableChange, formatters.formatVariance(datum.value, datum.from)]);
+			}
+			if (baselineRow && datum.key !== baselineRow.key) tooltipRows.push([labels.tableVersus(baselineRow.label), formatters.formatVariance(datum.value, baselineRow.value)]);
+			if (target != null) tooltipRows.push([/* @__PURE__ */ jsx(ComparisonKey, {
+				label: labels.target,
+				target: true,
+				color: tokens?.reference
+			}, "target"), formatters.formatValue(target)]);
+			return /* @__PURE__ */ jsx(ArcTooltipRows, { rows: tooltipRows });
+		}
+		if ("value" in datum) return /* @__PURE__ */ jsx(ArcTooltipRows, { rows: [[/* @__PURE__ */ jsx(ComparisonKey, {
+			label: labels.target,
+			target: true,
+			color: tokens?.reference
+		}, "target"), formatters.formatValue(datum.value)]] });
+		return null;
+	}, [
+		barColor,
+		formatters,
+		baselineRow,
+		target,
+		labels,
+		tokens,
+		mark,
+		showFromColumns,
+		fromTitle,
+		toTitle
+	]);
+	const { handler: tooltipHandler, tooltip } = useArcTooltipHandler({ content: tooltipContent });
+	const embedOptions = useMemo(() => arcEmbedOptions({ tooltip: tooltipHandler }), [tooltipHandler]);
+	const itemTitle = labels.tableItem;
+	const targetTitle = labels.target;
+	const barHeight = sizes.barHeight;
+	const pointSize = sizes.pointSize;
+	const hasNegative = summary?.hasNegative ?? false;
+	const spec = useMemo(() => {
+		if (!tokens) return null;
+		const built = buildComparisonPlotSpec({
+			mark,
+			barHeight,
+			pointSize,
+			height: 56,
+			scale: plotScale,
+			reference: hasReference,
+			zeroRule: hasNegative,
+			tooltip: true,
+			emphasize,
+			itemTitle,
+			valueTitle: name,
+			fromTitle,
+			toTitle,
+			targetTitle,
+			valueFormat: locale ? `${format}@${locale}` : format,
+			locale
+		}, tokens);
+		return patchSpec ? patchSpec(built) : built;
+	}, [
+		tokens,
+		mark,
+		barHeight,
+		pointSize,
+		plotScale,
+		hasReference,
+		hasNegative,
+		emphasize,
+		itemTitle,
+		name,
+		fromTitle,
+		toTitle,
+		targetTitle,
+		format,
+		locale,
+		patchSpec
+	]);
+	const referenceRows = useMemo(() => hasReference ? [{ value: target }] : [], [hasReference, target]);
+	const zeroRows = useMemo(() => hasNegative ? [{ value: 0 }] : [], [hasNegative]);
+	const datasets = useMemo(() => ({
+		[COMPARISON_TABLE_DATASET]: rows,
+		[COMPARISON_REFERENCE_DATASET]: referenceRows,
+		[COMPARISON_ZERO_DATASET]: zeroRows
+	}), [
+		rows,
+		referenceRows,
+		zeroRows
+	]);
+	const chartDescription = summary && hasChart ? buildComparisonChartDescription({
+		mark,
+		name,
+		summary,
+		formatters,
+		targetText,
+		span: usesFrom && summary.hasFrom ? {
+			from: fromTitle,
+			to: toTitle
+		} : null,
+		labels
+	}) : void 0;
+	const showInsight = insight != null && insight !== false;
+	const reserveHeadline = headline !== "none" || comparisonWanted;
+	const reserveChip = focusChip && headline !== "none" && focus !== null;
+	const showChip = reserveChip && focusRow != null;
+	const headlineMinHeight = Math.max(headline !== "none" ? sizes.valueLinePx + (reserveChip ? CHIP_GAP_PX + sizes.chipLinePx : 0) : 0, comparisonWanted ? sizes.deltaLinePx + 4 + sizes.comparisonLinePx : 0);
+	const rowCount = hasChart ? rows.length : Math.max(0, expectedItems);
+	const bodyMinHeight = (reserveHeadline ? headlineMinHeight : 0) + (vertical ? sizes.gapPx + sizes.plotBlock : 0) + (rowCount > 0 ? (reserveHeadline ? sizes.gapPx : 0) + rowCount * sizes.step : 0) + (showInsight ? sizes.gapPx + sizes.comparisonLinePx : 0);
+	const HeadingTag = `h${titleLevel}`;
+	const busy = state === "loading" || state === "refreshing";
+	const directionWordFor = (direction) => direction === "up" ? labels.increase : direction === "down" ? labels.decrease : labels.unchanged;
+	const gridRows = { gridAutoRows: `${sizes.step}px` };
+	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-scale": plotScale,
+		"data-headline": headline,
+		"data-sort": sort,
+		"data-selectable": rowsSelectable || baselineSelectable ? "" : void 0,
+		"data-focus": showContent ? focusRow?.key : void 0,
+		"data-baseline": showContent ? baselineRow?.key : void 0,
+		"data-empty": state === "empty" || state === "no-match" ? "" : void 0,
+		"data-stale": stale ? "" : void 0,
+		"data-insufficient": insufficient ? "" : void 0,
+		"data-folded": showContent && summary && summary.folded > 0 ? summary.folded : void 0,
+		"data-polarity": showContent && delta ? delta.polarity : 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
+						}),
+						hasTable && summary && /* @__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: cn("pointer-events-auto", baselineRow && hasReference ? "w-96 max-w-[min(24rem,var(--available-width))]" : "w-80"),
+								"data-part": "data-popover",
+								children: [
+									/* @__PURE__ */ jsx(PopoverTitle, {
+										className: "mb-3",
+										children: name
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "mb-3 flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground",
+										"data-part": "chart-legend",
+										children: [focusRow && emphasize ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComparisonKey, {
+											mark,
+											label: focusRow.label,
+											color: tokens?.emphasis
+										}), rows.length > 1 && /* @__PURE__ */ jsx(ComparisonKey, {
+											mark,
+											label: labels.otherItems,
+											color: tokens?.context
+										})] }) : /* @__PURE__ */ jsx(ComparisonKey, {
+											mark,
+											label: name,
+											color: tokens?.emphasis
+										}), hasReference && /* @__PURE__ */ jsx(ComparisonKey, {
+											label: `${labels.target} ${targetText}`,
+											target: true,
+											color: tokens?.reference
+										})]
+									}),
+									/* @__PURE__ */ jsx(TableContainer, {
+										variant: "plain",
+										tabIndex: 0,
+										role: "region",
+										"aria-label": labels.tableCaption(name),
+										className: "max-h-[min(16rem,calc(var(--available-height)-4.5rem))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+										"data-part": "table",
+										children: /* @__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.tableItem }),
+													showFromColumns && /* @__PURE__ */ jsx(TableHead, {
+														className: "text-right",
+														children: fromTitle
+													}),
+													/* @__PURE__ */ jsx(TableHead, {
+														className: "text-right",
+														children: showFromColumns ? toTitle : labels.tableValue
+													}),
+													showFromColumns && /* @__PURE__ */ jsx(TableHead, {
+														className: "text-right",
+														children: labels.tableChange
+													}),
+													baselineRow && /* @__PURE__ */ jsx(TableHead, {
+														className: "text-right",
+														children: labels.tableVersus(baselineRow.label)
+													}),
+													hasReference && /* @__PURE__ */ jsx(TableHead, {
+														className: "text-right",
+														children: labels.tableVsTarget
+													})
+												] }) }),
+												/* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => /* @__PURE__ */ jsxs(TableRow, {
+													"data-role": row.role,
+													children: [
+														/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("span", {
+															className: "inline-flex items-baseline gap-1.5",
+															children: [row.role === "focus" && /* @__PURE__ */ jsx("span", {
+																"aria-hidden": "true",
+																className: "inline-block size-1.5 shrink-0 self-center rounded-full",
+																style: { background: tokens?.emphasis }
+															}), /* @__PURE__ */ jsxs("span", { children: [row.label, row.role === "focus" && /* @__PURE__ */ jsxs("span", {
+																className: "sr-only",
+																children: [
+																	" (",
+																	labels.highlighted,
+																	")"
+																]
+															})] })]
+														}) }),
+														showFromColumns && /* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums",
+															children: formatters.formatValue(row.from)
+														}),
+														/* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums",
+															children: formatters.formatValue(row.value)
+														}),
+														showFromColumns && /* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums",
+															children: formatters.formatVariance(row.value, row.from)
+														}),
+														baselineRow && /* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums",
+															children: row.key === baselineRow.key ? "—" : formatters.formatVariance(row.value, baselineRow.value)
+														}),
+														hasReference && /* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums",
+															children: formatters.formatVariance(row.value, target)
+														})
+													]
+												}, row.key)) })
+											]
+										})
+									})
+								]
+							})]
+						}),
+						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: "relative flex min-w-0 flex-col",
+				style: { minHeight: bodyMinHeight },
+				children: [
+					state === "loading" && /* @__PURE__ */ jsxs(SkeletonGroup, {
+						className: cn("flex flex-col", sizes.gap),
+						children: [
+							reserveHeadline && /* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 items-center justify-between gap-2",
+								style: { minHeight: headlineMinHeight },
+								children: [headline !== "none" && /* @__PURE__ */ jsxs("div", {
+									className: "flex w-2/5 flex-col items-start gap-1",
+									children: [/* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-full",
+										style: { height: sizes.valueLinePx }
+									}), reserveChip && /* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-16 max-w-full",
+										style: { height: sizes.chipLinePx }
+									})]
+								}), comparisonWanted && /* @__PURE__ */ jsxs("div", {
+									className: cn("flex w-2/5 flex-col gap-1", headline !== "none" ? "items-end" : "items-start"),
+									children: [/* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-20 max-w-full",
+										style: { height: sizes.deltaLinePx }
+									}), /* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-full",
+										style: { height: sizes.comparisonLinePx }
+									})]
+								})]
+							}),
+							vertical && /* @__PURE__ */ jsx(Skeleton, {
+								variant: "rounded",
+								className: "w-full",
+								style: { height: sizes.plotBlock }
+							}),
+							rowCount > 0 && /* @__PURE__ */ jsx("div", {
+								className: vertical ? blockRowGridClasses : rowGridClasses,
+								style: gridRows,
+								"data-part": "rows-skeleton",
+								children: Array.from({ length: rowCount }, (_, index) => /* @__PURE__ */ jsxs("div", {
+									className: cn(vertical ? "col-span-2" : "col-span-3", "grid grid-cols-subgrid items-center"),
+									children: [
+										/* @__PURE__ */ jsx(Skeleton, {
+											variant: "rounded",
+											className: "h-3 w-16"
+										}),
+										!vertical && /* @__PURE__ */ jsx(Skeleton, {
+											variant: "rounded",
+											style: {
+												height: sizes.barHeight,
+												width: `${Math.max(30, 90 - index * 22)}%`
+											}
+										}),
+										/* @__PURE__ */ jsx(Skeleton, {
+											variant: "rounded",
+											className: "h-3 w-10"
+										})
+									]
+								}, index))
+							}),
+							showInsight && /* @__PURE__ */ jsxs("div", {
+								className: "flex items-start gap-2",
+								children: [/* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "size-4 shrink-0"
+								}), /* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "w-full",
+									style: { height: sizes.comparisonLinePx }
+								})]
+							})
+						]
+					}),
+					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(tileStateClasses, "my-auto")
+					}),
+					state === "empty" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "empty",
+						scope: "inline",
+						title: labels.noData,
+						description: false,
+						className: cn(tileStateClasses, "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(tileStateClasses, "my-auto")
+					}),
+					showContent && /* @__PURE__ */ jsxs("div", {
+						className: cn("flex min-w-0 flex-col", sizes.gap),
+						children: [
+							(valueText != null || delta || insufficient) && /* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 items-center justify-between gap-2",
+								style: { minHeight: headlineMinHeight },
+								"data-part": "headline",
+								children: [valueText != null && /* @__PURE__ */ jsxs("div", {
+									className: "flex min-w-0 flex-col items-start gap-1",
+									"data-part": "value-stack",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "flex min-w-0 flex-wrap items-baseline gap-x-1.5",
+										"data-part": "value",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: cn(valueClasses, sizes.value, "min-w-0 wrap-break-word"),
+											children: valueText
+										}), unit != null && headline === "focus" && /* @__PURE__ */ jsx("span", {
+											className: cn("font-sans text-muted-foreground", sizes.unit),
+											children: unit
+										})]
+									}), showChip && focusRow && /* @__PURE__ */ jsxs(Badge, {
+										variant: "primary",
+										appearance: "soft",
+										size: sizes.chip,
+										className: "max-w-full",
+										"data-part": "focus-chip",
+										children: [/* @__PURE__ */ jsx(FocusSwatch, {
+											mark,
+											color: tokens?.emphasis
+										}), /* @__PURE__ */ jsx("span", {
+											className: "truncate",
+											children: focusRow.label
+										})]
+									})]
+								}), delta && focusRow && baselineRow ? baselineSelectable ? /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsxs(MenuTrigger, {
+									render: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": labels.chooseBaseline(name),
+										"aria-describedby": deltaExplanationId,
+										className: cn(deltaStackClasses, "group cursor-pointer rounded-md", valueText != null ? "ms-auto max-w-1/2 items-end text-right" : "items-start text-left", sizes.body),
+										"data-part": "delta"
+									}),
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											id: deltaExplanationId,
+											className: "sr-only",
+											children: deltaExplanation
+										}),
+										badgeText && /* @__PURE__ */ jsxs(Badge, {
+											variant: polarityBadgeVariant[delta.polarity],
+											appearance: "soft",
+											size: sizes.badge,
+											"data-direction": delta.direction,
+											children: [
+												/* @__PURE__ */ jsx(DeltaGlyph, { direction: delta.direction }),
+												/* @__PURE__ */ jsxs("span", {
+													className: "sr-only",
+													children: [directionWordFor(delta.direction), " "]
+												}),
+												badgeText
+											]
+										}),
+										/* @__PURE__ */ jsxs("span", {
+											className: "inline-flex max-w-full items-center gap-0.5 text-muted-foreground text-xs transition-colors group-hover:text-foreground group-data-popup-open:text-foreground",
+											children: [/* @__PURE__ */ jsx("span", {
+												className: "min-w-0 wrap-break-word",
+												children: comparisonNode
+											}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3 shrink-0" })]
+										})
+									]
+								}), /* @__PURE__ */ jsxs(MenuPopup, {
+									side: "right",
+									align: "start",
+									sideOffset: 8,
+									collisionPadding: 8,
+									container: popoverContainer,
+									className: "pointer-events-auto w-[26rem] max-w-[min(26rem,var(--available-width))]",
+									"data-part": "baseline-menu",
+									children: [
+										/* @__PURE__ */ jsxs("div", {
+											className: "flex items-center justify-between gap-3 px-2 py-1.5 font-sans text-xs",
+											"data-part": "baseline-menu-subject",
+											children: [/* @__PURE__ */ jsxs("span", {
+												className: "inline-flex min-w-0 items-center gap-1.5 font-medium text-foreground",
+												children: [/* @__PURE__ */ jsx(FocusSwatch, {
+													mark,
+													color: tokens?.emphasis
+												}), /* @__PURE__ */ jsx("span", {
+													className: "truncate",
+													children: focusRow.label
+												})]
+											}), /* @__PURE__ */ jsx("span", {
+												className: "shrink-0 font-medium text-foreground tabular-nums",
+												children: formatters.formatValue(focusRow.value)
+											})]
+										}),
+										/* @__PURE__ */ jsx(MenuSeparator, {}),
+										/* @__PURE__ */ jsxs(MenuRadioGroup, {
+											value: baselineRow.key,
+											onValueChange: (value) => selectBaseline(String(value)),
+											children: [/* @__PURE__ */ jsxs(MenuGroupLabel, {
+												inset: true,
+												className: "flex items-center gap-2",
+												"data-part": "baseline-menu-header",
+												children: [
+													/* @__PURE__ */ jsx("span", {
+														className: "min-w-0 flex-1 truncate",
+														children: labels.compareWith
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: menuValueColumnClasses,
+														children: labels.tableValue
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: menuChangeColumnClasses,
+														children: labels.changePercent
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: menuChangeColumnClasses,
+														children: labels.changeAmount
+													})
+												]
+											}), candidateChanges.map(({ row, polarity, percentText, amountText }) => /* @__PURE__ */ jsxs(MenuRadioItem, {
+												value: row.key,
+												closeOnClick: true,
+												"data-role": row.role,
+												"data-polarity": polarity,
+												children: [
+													/* @__PURE__ */ jsx("span", {
+														className: "min-w-0 flex-1 truncate",
+														children: row.label
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: cn(menuValueColumnClasses, "text-muted-foreground"),
+														children: formatters.formatValue(row.value)
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: cn(menuChangeColumnClasses, "font-medium", polarityTextClasses[polarity]),
+														children: percentText
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: cn(menuChangeColumnClasses, "font-medium", polarityTextClasses[polarity]),
+														children: amountText
+													})
+												]
+											}, row.key))]
+										})
+									]
+								})] }) : /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+									delay: 150,
+									render: /* @__PURE__ */ jsx("p", {
+										tabIndex: 0,
+										role: "group",
+										"aria-label": labels.deltaComparison(name),
+										"aria-describedby": deltaExplanationId,
+										className: cn(deltaStackClasses, "rounded-md", valueText != null ? "ms-auto max-w-1/2 items-end text-right" : "items-start text-left", sizes.body),
+										"data-part": "delta"
+									}),
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											id: deltaExplanationId,
+											className: "sr-only",
+											children: deltaExplanation
+										}),
+										badgeText && /* @__PURE__ */ jsxs(Badge, {
+											variant: polarityBadgeVariant[delta.polarity],
+											appearance: "soft",
+											size: sizes.badge,
+											"data-direction": delta.direction,
+											children: [
+												/* @__PURE__ */ jsx(DeltaGlyph, { direction: delta.direction }),
+												/* @__PURE__ */ jsxs("span", {
+													className: "sr-only",
+													children: [directionWordFor(delta.direction), " "]
+												}),
+												badgeText
+											]
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "max-w-full text-muted-foreground wrap-break-word text-xs",
+											children: comparisonNode
+										})
+									]
+								}), /* @__PURE__ */ jsx(TooltipPopup, {
+									arrow: false,
+									side: "bottom",
+									align: valueText != null ? "end" : "start",
+									sideOffset: 8,
+									collisionPadding: 8,
+									container: popoverContainer,
+									className: "text-left",
+									"data-part": "delta-tooltip",
+									children: /* @__PURE__ */ jsx(ArcTooltipRows, { rows: deltaExplanationRows })
+								})] }) : insufficient ? /* @__PURE__ */ jsx("p", {
+									className: cn(captionClasses, "mt-0", valueText != null && "ms-auto max-w-1/2 text-right"),
+									"data-part": "delta",
+									children: labels.insufficient
+								}) : null]
+							}),
+							hasChart && /* @__PURE__ */ jsxs("div", {
+								ref: rowsRef,
+								className: "relative w-full",
+								"data-part": "comparison",
+								children: [
+									vertical && /* @__PURE__ */ jsx("div", {
+										ref: blockCellRef,
+										className: "relative mb-2 w-full",
+										style: { height: plotHeight },
+										"data-part": "plot-block",
+										children: plotBox.width > 0 && spec && /* @__PURE__ */ jsx(ArcVegaChart, {
+											spec,
+											options: embedOptions,
+											datasets,
+											description: chartDescription,
+											width: plotBox.width,
+											height: plotHeight,
+											onEmbed,
+											className: "absolute inset-0 [&_svg]:block [&_.vega-bindings:empty]:hidden",
+											style: {
+												width: plotBox.width,
+												height: plotHeight
+											},
+											"data-part": "plot",
+											fallback: /* @__PURE__ */ jsx(Skeleton, {
+												variant: "rounded",
+												className: "absolute inset-0"
+											})
+										})
+									}),
+									/* @__PURE__ */ jsx("ul", {
+										role: interactive ? "radiogroup" : "list",
+										"aria-label": interactive ? labels.focusGroup(name) : void 0,
+										className: cn(vertical ? blockRowGridClasses : rowGridClasses, "font-sans", sizes.rowText),
+										style: gridRows,
+										"data-part": "rows",
+										children: rows.map((row, index) => {
+											const choosable = interactive && row.role !== "other";
+											const selected = row.role === "focus";
+											return /* @__PURE__ */ jsxs("li", {
+												ref: (node) => {
+													if (node) rowRefs.current.set(row.key, node);
+													else rowRefs.current.delete(row.key);
+												},
+												role: interactive ? "radio" : void 0,
+												"aria-checked": interactive ? selected : void 0,
+												"aria-disabled": interactive && !choosable ? true : void 0,
+												tabIndex: choosable ? selected ? 0 : -1 : void 0,
+												onClick: choosable && !selected ? () => selectFocus(row.key) : void 0,
+												onKeyDown: choosable ? (event) => handleRowKeyDown(event, row) : void 0,
+												className: cn(vertical ? "col-span-2" : "col-span-3", "grid grid-cols-subgrid items-center", interactive && selectableRowClasses, interactive && !choosable && disabledRowClasses),
+												"data-part": "row",
+												"data-role": row.role,
+												children: [
+													/* @__PURE__ */ jsxs("span", {
+														className: cn("min-w-0 truncate", rowLabelClasses[row.role]),
+														"data-part": "row-label",
+														children: [row.label, selected && !interactive && /* @__PURE__ */ jsxs("span", {
+															className: "sr-only",
+															children: [
+																" (",
+																labels.highlighted,
+																")"
+															]
+														})]
+													}),
+													!vertical && /* @__PURE__ */ jsx("span", {
+														ref: index === 0 ? plotCellRef : void 0,
+														"aria-hidden": "true",
+														className: "min-w-0 self-stretch",
+														"data-part": "row-plot"
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: cn("text-right tabular-nums", rowValueClasses[row.role]),
+														"data-part": "row-value",
+														children: formatters.formatValue(row.value)
+													})
+												]
+											}, row.key);
+										})
+									}),
+									!vertical && plotBox.width > 0 && spec && /* @__PURE__ */ jsx(ArcVegaChart, {
+										spec,
+										options: embedOptions,
+										datasets,
+										description: chartDescription,
+										width: plotBox.width,
+										height: plotHeight,
+										onEmbed,
+										onClick: interactive ? handlePlotClick : void 0,
+										className: cn("absolute top-0 [&_svg]:block [&_.vega-bindings:empty]:hidden", interactive && "cursor-pointer"),
+										style: {
+											left: plotBox.left,
+											width: plotBox.width,
+											height: plotHeight
+										},
+										"data-part": "plot",
+										fallback: /* @__PURE__ */ jsx(Skeleton, {
+											variant: "rounded",
+											className: "absolute top-0",
+											style: {
+												left: plotBox.left,
+												width: plotBox.width,
+												height: plotHeight
+											}
+										})
+									})
+								]
+							}),
+							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 [&_strong]:font-semibold [&_strong]:text-foreground text-xs leading-[1.8]",
+									children: insight
+								})]
+							})
+						]
+					}),
+					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"
+			}),
+			tooltip
+		]
+	});
+});
+ComparisonCard.displayName = "ComparisonCard";
+//#endregion
+export { ComparisonCard };