@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/MetricCard/MetricCard.js

@@ -0,0 +1,1293 @@
+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 { METRIC_CONTEXT_DATASET, METRIC_HIGHLIGHT_DATASET, METRIC_HIGHLIGHT_POINTS_DATASET, METRIC_HIGHLIGHT_ROWS_DATASET, METRIC_LATEST_DATASET, METRIC_REFERENCE_DATASET, METRIC_TREND_DATASET, buildMetricTrendSpec } from "./MetricCard.chart.js";
+import { METRIC_PREVIOUS_KEY, axisGranularity, buildHighlightDatasets, buildHighlightDetails, buildHighlightInsight, buildMetricChartDescription, buildMetricDescription, createMetricFormatters, deriveDelta, deriveMetricState, deriveTarget, describeComparisons, normalizeComparisons, normalizeTrend, resolveComparison, resolveHighlight, resolveMetricLabels } from "./MetricCard.model.js";
+import { Fragment, forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { AILoader, Badge, Box, Button, Menu, MenuGroupLabel, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuTrigger, Meter, Popover, PopoverDescription, 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/MetricCard/MetricCard.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,
+		trendHeight: 32
+	},
+	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,
+		trendHeight: 40
+	},
+	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,
+		trendHeight: 56
+	}
+};
+const polarityTextClasses = {
+	positive: "text-chart-positive",
+	negative: "text-chart-negative",
+	neutral: "text-muted-foreground"
+};
+const TARGET_BLOCK_PX = 52;
+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 polarityBadgeVariant = {
+	positive: "success",
+	negative: "destructive",
+	neutral: "neutral"
+};
+const deltaStackClasses = "ms-auto flex min-w-0 max-w-1/2 shrink-0 flex-col items-end gap-1 rounded-md text-right font-sans focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+const deltaButtonClasses = "group cursor-pointer";
+const menuGridClasses = "grid grid-cols-[minmax(0,1fr)_auto_auto_auto] gap-x-2";
+const menuRowClasses = "col-span-4 grid grid-cols-subgrid items-center";
+const menuFigureClasses = "text-right tabular-nums whitespace-nowrap";
+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";
+/** Match the plot's mark shape so its meaning never depends on color alone. */
+function MetricTrendKey({ label, mark, 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: mark === "bar" ? /* @__PURE__ */ jsx("rect", {
+				x: "7",
+				y: "1",
+				width: "10",
+				height: "10",
+				rx: "1",
+				fill: "currentColor"
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [mark === "area" && /* @__PURE__ */ jsx("rect", {
+				x: "1",
+				y: "6",
+				width: "22",
+				height: "5",
+				fill: "currentColor",
+				opacity: "0.12"
+			}), /* @__PURE__ */ jsx("line", {
+				x1: "2",
+				y1: "6",
+				x2: "22",
+				y2: "6",
+				stroke: "currentColor",
+				strokeWidth: mark === "target" ? 1.5 : 2,
+				strokeLinecap: "round",
+				strokeDasharray: mark === "target" ? "0 4" : void 0
+			})] })
+		}), label]
+	});
+}
+/** 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)) });
+}
+/**
+* Label → value rows on the popover surface — the light-surface counterpart
+* of `ArcTooltipRows`: muted keys, tabular values, an optional class per
+* value for a change's polarity tone.
+*/
+function DetailRows({ rows, className, ...rest }) {
+	return /* @__PURE__ */ jsx("dl", {
+		className: cn("m-0 flex flex-col gap-1 font-sans text-xs", className),
+		...rest,
+		children: rows.map(([label, value, valueClassName], index) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between gap-3",
+			children: [/* @__PURE__ */ jsx("dt", {
+				className: "min-w-0 text-muted-foreground",
+				children: label
+			}), /* @__PURE__ */ jsx("dd", {
+				className: cn("m-0 shrink-0 font-medium text-foreground tabular-nums", valueClassName),
+				children: value
+			})]
+		}, index))
+	});
+}
+function highlightHue(tokens, polarity) {
+	return polarity === "positive" ? tokens.divergingPositive : polarity === "negative" ? tokens.divergingNegative : tokens.emphasis;
+}
+const tileStateClasses = "w-full max-w-none gap-2 px-2 py-2 [--artwork-box:3rem]";
+const X_AXIS_HEIGHT_PX = 24;
+const MISSING_NAME = "Metric";
+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" })
+		]
+	});
+}
+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" })
+	});
+}
+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;
+}
+/**
+* A metric tile for dashboard grids: the headline value, its comparison
+* against the previous period and/or a target, a sparkline of the recent
+* readings, and every loading, empty, error and stale state — layout-stable,
+* with a generated text equivalent and a data table in an info popover. The
+* `highlight` variant makes one window of the trend the subject: the headline
+* and delta derive from the window's readings and the sparkline paints it in
+* the polarity hue on a gray context.
+*/
+const MetricCard = forwardRef(({ variant = "default", highlight, highlightDetails = true, defaultHighlightDetailsOpen = false, label, name: nameProp, hint, value, format = "compact", formatValue, unit, previousValue, comparisonLabel, comparisons, comparison, defaultComparison, onComparisonChange, selectable = true, deltaMode = "percent", goodDirection = "up", target, trend, trendMark = "line", trendScale = "auto", trendAxes = "x", trendHeight: trendHeightProp, trendGranularity, 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(() => resolveMetricLabels(labelOverrides), [labelOverrides]);
+	const sizes = sizeStyles[size];
+	const showXAxis = trendAxes === "x" || trendAxes === "both";
+	const trendHeight = trendHeightProp ?? sizes.trendHeight + (showXAxis ? X_AXIS_HEIGHT_PX : 0);
+	const name = nameProp ?? (typeof label === "string" ? label : MISSING_NAME);
+	const isHighlight = variant === "highlight";
+	const id = useId();
+	const headingId = `${id}-label`;
+	const descriptionId = `${id}-description`;
+	const hintId = `${id}-hint`;
+	const tableId = `${id}-table`;
+	const targetExplanationId = `${id}-target-explanation`;
+	const deltaExplanationId = `${id}-delta-explanation`;
+	const [rootRef, setRootRef] = useMergedRef(forwardedRef);
+	const plotRef = useRef(null);
+	const [tableOpen, setTableOpen] = useState(defaultTableOpen);
+	const [highlightDetailsOpen, setHighlightDetailsOpen] = useState(defaultHighlightDetailsOpen);
+	const [popoverContainer, setPopoverContainer] = useState(null);
+	const hasComparisons = comparisons !== void 0;
+	const comparisonRows = useMemo(() => normalizeComparisons(comparisons), [comparisons]);
+	const isComparisonControlled = comparison !== void 0;
+	const [innerComparison, setInnerComparison] = useState(defaultComparison);
+	const comparisonKey = isComparisonControlled ? comparison : innerComparison;
+	const selectedComparison = useMemo(() => hasComparisons ? resolveComparison(comparisonRows, comparisonKey) : null, [
+		hasComparisons,
+		comparisonRows,
+		comparisonKey
+	]);
+	const baselineValue = hasComparisons ? selectedComparison?.value : previousValue;
+	const pendingAnnounce = useRef(false);
+	const [announcement, setAnnouncement] = useState("");
+	const selectComparison = useCallback((key) => {
+		pendingAnnounce.current = true;
+		if (!isComparisonControlled) setInnerComparison(key);
+		onComparisonChange?.(key);
+	}, [isComparisonControlled, onComparisonChange]);
+	const summary = useMemo(() => normalizeTrend(trend, trendGranularity), [trend, trendGranularity]);
+	const formatters = useMemo(() => createMetricFormatters({
+		format,
+		locale,
+		timeZone,
+		formatValue,
+		xType: summary?.xType ?? "temporal",
+		granularity: summary?.granularity ?? trendGranularity ?? "day"
+	}), [
+		format,
+		locale,
+		timeZone,
+		formatValue,
+		summary,
+		trendGranularity
+	]);
+	const highlightStart = highlight?.start;
+	const highlightEnd = highlight?.end;
+	const highlightLabel = highlight?.label;
+	const highlightInfo = useMemo(() => isHighlight && highlightStart != null && highlightEnd != null ? resolveHighlight(summary, {
+		start: highlightStart,
+		end: highlightEnd,
+		label: highlightLabel
+	}, {
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		percentagePoints: labels.percentagePoints,
+		formatters
+	}) : null, [
+		isHighlight,
+		summary,
+		highlightStart,
+		highlightEnd,
+		highlightLabel,
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		labels.percentagePoints,
+		formatters
+	]);
+	const highlightActive = isHighlight && highlightInfo != null;
+	const headlineValue = isHighlight ? highlightInfo?.end.y ?? summary?.latest?.y ?? null : value;
+	const hasValue = typeof headlineValue === "number" && Number.isFinite(headlineValue);
+	const hasData = hasValue || (summary?.count ?? 0) > 0;
+	const state = deriveMetricState({
+		status,
+		hasValue,
+		hasData,
+		filtered
+	});
+	const showContent = state === "ready" || state === "refreshing";
+	const hasTable = showContent && summary != null && summary.rows.length > 0;
+	const delta = useMemo(() => isHighlight ? highlightInfo?.delta ?? null : deriveDelta(headlineValue, baselineValue, {
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		percentagePoints: labels.percentagePoints
+	}), [
+		isHighlight,
+		highlightInfo,
+		headlineValue,
+		baselineValue,
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		labels.percentagePoints
+	]);
+	const targetInfo = useMemo(() => deriveTarget(headlineValue, target, {
+		goodDirection,
+		format,
+		locale,
+		formatValue
+	}), [
+		headlineValue,
+		target,
+		goodDirection,
+		format,
+		locale,
+		formatValue
+	]);
+	const targetExplanationRows = targetInfo ? labels.targetExplanation(targetInfo) : [];
+	const targetExplanation = targetExplanationRows.map(([key, value]) => `${key}: ${value}`).join(". ");
+	const valueText = formatters.formatY(headlineValue);
+	const comparisonText = isHighlight ? highlightInfo?.label ?? highlightInfo?.rangeText ?? "" : hasComparisons ? selectedComparison ? labels.versus(selectedComparison.label) : labels.compareWith : typeof comparisonLabel === "string" ? comparisonLabel : labels.previousPeriod;
+	const comparisonNode = !isHighlight && !hasComparisons && comparisonLabel != null ? comparisonLabel : comparisonText || null;
+	const deltaExplanationRows = delta ? labels.deltaExplanation({
+		kind: isHighlight ? "window" : "period",
+		previousText: formatters.formatY(isHighlight ? highlightInfo?.start.y : baselineValue),
+		previousLabel: !isHighlight && hasComparisons ? selectedComparison?.label ?? null : null,
+		currentText: valueText,
+		changeText: delta.text,
+		secondaryText: delta.secondaryText,
+		renderedMode: delta.renderedMode,
+		direction: delta.direction,
+		comparisonText,
+		periodText: isHighlight ? highlightInfo?.rangeText ?? null : null
+	}) : [];
+	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 hasChart = summary != null && summary.count >= 2;
+	const insufficient = showContent && summary != null && !hasChart;
+	const cardDescription = description ?? buildMetricDescription({
+		name,
+		state,
+		valueText,
+		unit: typeof unit === "string" ? unit : void 0,
+		delta,
+		comparisonText,
+		target: targetInfo,
+		trend: summary,
+		formatters,
+		asOfText,
+		labels,
+		highlight: highlightActive ? highlightInfo : null
+	});
+	useEffect(() => {
+		if (!pendingAnnounce.current) return;
+		pendingAnnounce.current = false;
+		setAnnouncement(cardDescription);
+	}, [cardDescription]);
+	const hasPreviousValue = typeof previousValue === "number" && Number.isFinite(previousValue);
+	const previousLabel = labels.previous;
+	const menuRows = useMemo(() => hasComparisons ? comparisonRows : hasPreviousValue ? [{
+		key: METRIC_PREVIOUS_KEY,
+		label: previousLabel,
+		value: previousValue
+	}] : [], [
+		hasComparisons,
+		comparisonRows,
+		hasPreviousValue,
+		previousLabel,
+		previousValue
+	]);
+	const showComparisonMenu = !isHighlight && selectable && (!isComparisonControlled || onComparisonChange != null) && menuRows.length > 0;
+	const comparisonCandidates = useMemo(() => showComparisonMenu ? describeComparisons(menuRows, headlineValue, {
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		percentagePoints: labels.percentagePoints,
+		formatters
+	}) : [], [
+		showComparisonMenu,
+		menuRows,
+		headlineValue,
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		labels.percentagePoints,
+		formatters
+	]);
+	const showHighlightDetails = highlightActive && highlightDetails;
+	const highlightDetailsInfo = useMemo(() => showHighlightDetails && summary && highlightInfo ? buildHighlightDetails(summary, highlightInfo, {
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		percentagePoints: labels.percentagePoints,
+		formatters
+	}) : null, [
+		showHighlightDetails,
+		summary,
+		highlightInfo,
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		labels.percentagePoints,
+		formatters
+	]);
+	const tokens = useChartTokens(rootRef);
+	const plotWidth = usePlotWidth(plotRef, showContent && hasChart);
+	const highlightColor = tokens && highlightActive && highlightInfo ? highlightHue(tokens, highlightInfo.delta.polarity) : void 0;
+	const seriesColor = tokens ? highlightActive ? tokens.context : tokens.emphasis : void 0;
+	const tooltipContent = useCallback(({ item }) => {
+		const raw = item.datum;
+		const datum = raw && "datum" in raw && raw.datum ? raw.datum : raw;
+		const row = datum && "x" in datum ? datum : null;
+		if (!row && !(datum && "value" in datum)) return null;
+		const inWindow = highlightActive && highlightInfo != null && row?.hl === true;
+		const rows = [];
+		if (row) rows.push([labels.tablePeriod, formatters.formatX(row.x)], [/* @__PURE__ */ jsx(MetricTrendKey, {
+			label: name,
+			mark: trendMark,
+			color: inWindow ? highlightColor : seriesColor
+		}, "actual"), formatters.formatY(row.y)]);
+		if (target != null) rows.push([/* @__PURE__ */ jsx(MetricTrendKey, {
+			label: labels.target,
+			mark: "target",
+			color: tokens?.reference
+		}, "target"), formatters.formatY(target)]);
+		if (!inWindow || !highlightInfo) return /* @__PURE__ */ jsx(ArcTooltipRows, { rows });
+		const windowRows = [];
+		if (highlightInfo.label) windowRows.push([labels.highlightRange, highlightInfo.rangeText]);
+		windowRows.push([`${labels.highlightStart} · ${formatters.formatX(highlightInfo.start.x)}`, formatters.formatY(highlightInfo.start.y)], [`${labels.highlightEnd} · ${formatters.formatX(highlightInfo.end.x)}`, formatters.formatY(highlightInfo.end.y)], [labels.highlightChange, highlightInfo.absoluteText], [labels.highlightChangePercent, highlightInfo.percentText]);
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1.5",
+			children: [
+				/* @__PURE__ */ jsx(ArcTooltipRows, { rows }),
+				/* @__PURE__ */ jsx("div", {
+					role: "presentation",
+					className: "border-t border-background/20"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "font-medium",
+					"data-part": "highlight-key",
+					children: /* @__PURE__ */ jsx(MetricTrendKey, {
+						label: highlightInfo.label ?? highlightInfo.rangeText,
+						mark: trendMark,
+						color: highlightColor
+					})
+				}),
+				/* @__PURE__ */ jsx(ArcTooltipRows, { rows: windowRows })
+			]
+		});
+	}, [
+		labels,
+		formatters,
+		name,
+		trendMark,
+		tokens,
+		target,
+		highlightActive,
+		highlightInfo,
+		highlightColor,
+		seriesColor
+	]);
+	const { handler: tooltipHandler, tooltip } = useArcTooltipHandler({ content: tooltipContent });
+	const embedOptions = useMemo(() => arcEmbedOptions({ tooltip: tooltipHandler }), [tooltipHandler]);
+	const xType = summary?.xType;
+	const granularity = summary?.granularity;
+	const hasReference = target != null;
+	const periodTitle = labels.tablePeriod;
+	const spec = useMemo(() => {
+		if (!tokens || !xType || !granularity) return null;
+		const timeGrammar = (kind) => [
+			kind,
+			locale ?? "",
+			timeZone ?? ""
+		].join("@").replace(/@+$/, "");
+		const built = buildMetricTrendSpec({
+			mark: trendMark,
+			scale: trendScale,
+			xType,
+			axes: trendAxes,
+			height: trendHeight,
+			reference: hasReference,
+			tooltip: true,
+			highlight: highlightActive,
+			xTitle: periodTitle,
+			yTitle: name,
+			targetTitle: labels.target,
+			valueFormat: locale ? `${format}@${locale}` : format,
+			timeFormat: timeGrammar(granularity),
+			axisTimeFormat: timeGrammar(axisGranularity(granularity)),
+			locale,
+			timeZone
+		}, tokens);
+		return patchSpec ? patchSpec(built) : built;
+	}, [
+		tokens,
+		xType,
+		granularity,
+		trendMark,
+		trendScale,
+		trendAxes,
+		trendHeight,
+		hasReference,
+		highlightActive,
+		periodTitle,
+		labels.target,
+		name,
+		format,
+		locale,
+		timeZone,
+		patchSpec
+	]);
+	const trendRows = summary?.rows;
+	const latest = summary?.latest;
+	const referenceRows = useMemo(() => target != null ? [{ value: target }] : [], [target]);
+	const latestRows = useMemo(() => latest ? [latest] : [], [latest]);
+	const highlightDatasets = useMemo(() => highlightActive && summary && highlightInfo ? buildHighlightDatasets(summary, highlightInfo) : null, [
+		highlightActive,
+		summary,
+		highlightInfo
+	]);
+	const datasets = useMemo(() => {
+		if (highlightDatasets) return {
+			[METRIC_TREND_DATASET]: highlightDatasets.table,
+			[METRIC_CONTEXT_DATASET]: highlightDatasets.context,
+			[METRIC_HIGHLIGHT_ROWS_DATASET]: highlightDatasets.highlightRows,
+			[METRIC_HIGHLIGHT_POINTS_DATASET]: highlightDatasets.highlightPoints,
+			[METRIC_HIGHLIGHT_DATASET]: highlightDatasets.highlight,
+			[METRIC_REFERENCE_DATASET]: referenceRows
+		};
+		return {
+			[METRIC_TREND_DATASET]: trendRows ?? [],
+			[METRIC_REFERENCE_DATASET]: referenceRows,
+			[METRIC_LATEST_DATASET]: latestRows
+		};
+	}, [
+		highlightDatasets,
+		trendRows,
+		referenceRows,
+		latestRows
+	]);
+	const chartDescription = summary && hasChart ? buildMetricChartDescription({
+		name,
+		mark: trendMark,
+		trend: summary,
+		target: targetInfo,
+		formatters,
+		labels,
+		highlight: highlightActive ? highlightInfo : null
+	}) : void 0;
+	const insightContent = insight === void 0 ? highlightActive && highlightInfo ? /* @__PURE__ */ jsx(InsightText, { segments: buildHighlightInsight({
+		name,
+		highlight: highlightInfo,
+		formatters,
+		labels
+	}) }) : null : insight;
+	const showInsight = insightContent != null && insightContent !== false;
+	const reserveDelta = isHighlight || previousValue !== void 0 || hasComparisons;
+	const reserveTrend = trend !== void 0;
+	const reserveTarget = target !== void 0;
+	const reserveInsight = insight === void 0 ? isHighlight : insight != null && insight !== false;
+	const headlineMinHeight = Math.max(sizes.valueLinePx, reserveDelta ? sizes.deltaLinePx + 4 + sizes.comparisonLinePx : 0);
+	const bodyMinHeight = headlineMinHeight + (reserveTrend ? sizes.gapPx + trendHeight : 0) + (reserveTarget ? sizes.gapPx + TARGET_BLOCK_PX : 0) + (reserveInsight ? 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 targetTone = goodDirection === "none" ? "neutral" : targetInfo?.variant ?? "primary";
+	const targetPolarity = !targetInfo || goodDirection === "none" || targetInfo.direction === "flat" ? "neutral" : targetInfo.met ? "positive" : "negative";
+	const deltaStack = (chevron) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		delta && /* @__PURE__ */ jsx("span", {
+			id: deltaExplanationId,
+			className: "sr-only",
+			children: deltaExplanation
+		}),
+		delta && /* @__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), " "]
+				}),
+				delta.text
+			]
+		}),
+		chevron ? /* @__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__ */ jsx("span", {
+			className: "max-w-full text-muted-foreground wrap-break-word text-xs",
+			children: comparisonNode
+		})
+	] });
+	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-variant": variant,
+		"data-highlight": isHighlight && showContent ? highlightActive ? "resolved" : "unresolved" : void 0,
+		"data-empty": state === "empty" || state === "no-match" ? "" : void 0,
+		"data-stale": stale ? "" : void 0,
+		"data-insufficient": insufficient ? "" : void 0,
+		"data-trend-axes": summary ? trendAxes : void 0,
+		"data-polarity": showContent && delta ? delta.polarity : void 0,
+		"data-selectable": showContent && showComparisonMenu ? "" : void 0,
+		"data-comparison": showContent && hasComparisons ? selectedComparison?.key : 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 && /* @__PURE__ */ jsxs(Popover, {
+							open: tableOpen,
+							onOpenChange: setTableOpen,
+							children: [hasChart && !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-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: [
+											/* @__PURE__ */ jsx(MetricTrendKey, {
+												label: name,
+												mark: trendMark,
+												color: seriesColor
+											}),
+											highlightActive && highlightInfo && /* @__PURE__ */ jsx(MetricTrendKey, {
+												label: `${highlightInfo.label ?? highlightInfo.rangeText} · ${highlightInfo.delta.text}`,
+												mark: trendMark,
+												color: highlightColor
+											}),
+											target != null && /* @__PURE__ */ jsx(MetricTrendKey, {
+												label: `${labels.target} ${formatters.formatY(target)}`,
+												mark: "target",
+												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.tablePeriod }), /* @__PURE__ */ jsx(TableHead, {
+													className: "text-right",
+													children: labels.tableValue
+												})] }) }),
+												/* @__PURE__ */ jsx(TableBody, { children: summary.rows.map((row, index) => {
+													const inWindow = highlightDatasets?.table[index]?.hl === true;
+													return /* @__PURE__ */ jsxs(TableRow, {
+														"data-highlight": inWindow ? "" : void 0,
+														children: [/* @__PURE__ */ jsxs(TableCell, { children: [
+															inWindow && /* @__PURE__ */ jsx("span", {
+																"aria-hidden": "true",
+																className: "me-1.5 inline-block size-1.5 rounded-full align-middle",
+																style: { background: highlightColor }
+															}),
+															formatters.formatX(row.x),
+															inWindow && /* @__PURE__ */ jsxs("span", {
+																className: "sr-only",
+																children: [
+																	" (",
+																	labels.highlighted,
+																	")"
+																]
+															})
+														] }), /* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums",
+															children: formatters.formatY(row.y)
+														})]
+													}, index);
+												}) })
+											]
+										})
+									})
+								]
+							})]
+						}),
+						action
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: descriptionId,
+				className: "sr-only",
+				children: cardDescription
+			}),
+			hasComparisons && /* @__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: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 items-center justify-between gap-2",
+								style: { minHeight: headlineMinHeight },
+								children: [/* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "w-2/5",
+									style: { height: sizes.valueLinePx }
+								}), reserveDelta && /* @__PURE__ */ jsxs("div", {
+									className: "flex w-2/5 flex-col items-end gap-1",
+									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 }
+									})]
+								})]
+							}),
+							reserveTrend && /* @__PURE__ */ jsx(Skeleton, {
+								variant: "rounded",
+								className: "w-full",
+								style: { height: trendHeight }
+							}),
+							reserveTarget && /* @__PURE__ */ jsx(Skeleton, {
+								variant: "rounded",
+								className: "w-full",
+								style: { height: TARGET_BLOCK_PX }
+							}),
+							reserveInsight && /* @__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: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 items-center justify-between gap-2",
+								style: { minHeight: headlineMinHeight },
+								"data-part": "headline",
+								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 && /* @__PURE__ */ jsx("span", {
+										className: cn("font-sans text-muted-foreground", sizes.unit),
+										children: unit
+									})]
+								}), showComparisonMenu ? /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+									render: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": hasComparisons ? labels.chooseComparison(name) : labels.deltaComparison(name),
+										"aria-describedby": delta ? deltaExplanationId : void 0,
+										className: cn(deltaStackClasses, deltaButtonClasses, sizes.body),
+										"data-part": "delta"
+									}),
+									children: deltaStack(true)
+								}), /* @__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": "comparison-menu",
+									children: [
+										/* @__PURE__ */ jsxs("div", {
+											className: "flex items-center justify-between gap-3 px-2 py-1.5 font-sans text-xs",
+											"data-part": "comparison-menu-subject",
+											children: [/* @__PURE__ */ jsx("span", {
+												className: "min-w-0 truncate font-medium text-foreground",
+												children: name
+											}), /* @__PURE__ */ jsx("span", {
+												className: "shrink-0 font-medium text-foreground tabular-nums",
+												children: valueText
+											})]
+										}),
+										/* @__PURE__ */ jsx(MenuSeparator, {}),
+										/* @__PURE__ */ jsxs(MenuRadioGroup, {
+											className: menuGridClasses,
+											value: hasComparisons ? selectedComparison?.key ?? "" : "__previous__",
+											onValueChange: hasComparisons ? (value) => selectComparison(String(value)) : void 0,
+											children: [/* @__PURE__ */ jsxs(MenuGroupLabel, {
+												inset: true,
+												className: menuRowClasses,
+												"data-part": "comparison-menu-header",
+												children: [
+													/* @__PURE__ */ jsx("span", {
+														className: "min-w-0 truncate",
+														children: labels.compareWith
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: menuFigureClasses,
+														children: labels.tableValue
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: menuFigureClasses,
+														children: labels.changePercent
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: menuFigureClasses,
+														children: labels.changeAmount
+													})
+												]
+											}), comparisonCandidates.map(({ row, polarity, valueText: baselineText, percentText, amountText }) => /* @__PURE__ */ jsxs(MenuRadioItem, {
+												value: row.key,
+												closeOnClick: true,
+												disabled: row.value == null,
+												className: menuRowClasses,
+												"data-polarity": polarity,
+												children: [
+													/* @__PURE__ */ jsx("span", {
+														className: "min-w-0 truncate",
+														children: row.label
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: cn(menuFigureClasses, "text-muted-foreground"),
+														children: baselineText
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: cn(menuFigureClasses, "font-medium", changeTextClasses[polarity]),
+														children: percentText
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: cn(menuFigureClasses, "font-medium", changeTextClasses[polarity]),
+														children: amountText
+													})
+												]
+											}, row.key))]
+										})
+									]
+								})] }) : delta && showHighlightDetails && highlightInfo && highlightDetailsInfo ? /* @__PURE__ */ jsxs(Popover, {
+									open: highlightDetailsOpen,
+									onOpenChange: setHighlightDetailsOpen,
+									children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+										render: /* @__PURE__ */ jsx("button", {
+											type: "button",
+											"aria-label": labels.highlightDetails(name),
+											"aria-describedby": deltaExplanationId,
+											className: cn(deltaStackClasses, deltaButtonClasses, sizes.body),
+											"data-part": "delta"
+										}),
+										children: deltaStack(true)
+									}), popoverContainer && /* @__PURE__ */ jsxs(PopoverPopup, {
+										side: "right",
+										align: "start",
+										sideOffset: 8,
+										collisionPadding: 8,
+										container: popoverContainer,
+										className: "pointer-events-auto w-80",
+										"data-part": "highlight-popover",
+										children: [
+											/* @__PURE__ */ jsx(PopoverTitle, {
+												className: highlightInfo.label ? "mb-0.5" : "mb-3",
+												children: highlightInfo.label ?? highlightInfo.rangeText
+											}),
+											highlightInfo.label && /* @__PURE__ */ jsx(PopoverDescription, {
+												className: "mb-3",
+												children: highlightInfo.rangeText
+											}),
+											/* @__PURE__ */ jsx(DetailRows, {
+												rows: [
+													[`${labels.highlightStart} · ${formatters.formatX(highlightInfo.start.x)}`, formatters.formatY(highlightInfo.start.y)],
+													[`${labels.highlightEnd} · ${formatters.formatX(highlightInfo.end.x)}`, formatters.formatY(highlightInfo.end.y)],
+													[
+														labels.highlightChange,
+														highlightInfo.absoluteText,
+														changeTextClasses[delta.polarity]
+													],
+													[
+														labels.highlightChangePercent,
+														highlightInfo.percentText,
+														changeTextClasses[delta.polarity]
+													]
+												],
+												"data-part": "highlight-summary"
+											}),
+											/* @__PURE__ */ jsx(TableContainer, {
+												variant: "plain",
+												tabIndex: 0,
+												role: "region",
+												"aria-label": labels.highlightReadings(name),
+												className: "mt-3 max-h-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+												"data-part": "highlight-steps",
+												children: /* @__PURE__ */ jsxs(Table, {
+													size: "sm",
+													stickyHeader: true,
+													hoverable: false,
+													children: [
+														/* @__PURE__ */ jsx(TableCaption, {
+															side: "top",
+															className: "sr-only",
+															children: labels.highlightReadings(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: delta.renderedMode === "percent" ? labels.highlightChangePercent : labels.highlightChange
+															})
+														] }) }),
+														/* @__PURE__ */ jsx(TableBody, { children: highlightDetailsInfo.steps.map((step, index) => /* @__PURE__ */ jsxs(TableRow, {
+															"data-role": step.role,
+															children: [
+																/* @__PURE__ */ jsx(TableCell, { children: step.xText }),
+																/* @__PURE__ */ jsx(TableCell, {
+																	className: "text-right tabular-nums",
+																	children: step.yText
+																}),
+																/* @__PURE__ */ jsx(TableCell, {
+																	className: cn("text-right tabular-nums", step.changeText ? cn("font-medium", changeTextClasses[step.polarity]) : "text-muted-foreground"),
+																	children: step.changeText ?? "—"
+																})
+															]
+														}, index)) })
+													]
+												})
+											}),
+											(highlightDetailsInfo.before || highlightDetailsInfo.since) && /* @__PURE__ */ jsx(DetailRows, {
+												className: "mt-3 border-t border-border pt-3",
+												rows: [...highlightDetailsInfo.before ? [[
+													`${labels.highlightBefore} · ${highlightDetailsInfo.before.rangeText}`,
+													highlightDetailsInfo.before.changeText,
+													changeTextClasses[highlightDetailsInfo.before.polarity]
+												]] : [], ...highlightDetailsInfo.since ? [[
+													`${labels.highlightSince} · ${highlightDetailsInfo.since.rangeText}`,
+													highlightDetailsInfo.since.changeText,
+													changeTextClasses[highlightDetailsInfo.since.polarity]
+												], [`${labels.highlightLatest} · ${highlightDetailsInfo.since.to.xText}`, highlightDetailsInfo.since.to.yText]] : []],
+												"data-part": "highlight-context"
+											})
+										]
+									})]
+								}) : delta ? /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+									delay: 150,
+									render: /* @__PURE__ */ jsx("p", {
+										tabIndex: 0,
+										role: "group",
+										"aria-label": labels.deltaComparison(name),
+										"aria-describedby": deltaExplanationId,
+										className: cn(deltaStackClasses, sizes.body),
+										"data-part": "delta"
+									}),
+									children: deltaStack(false)
+								}), /* @__PURE__ */ jsx(TooltipPopup, {
+									arrow: false,
+									side: "bottom",
+									align: "end",
+									sideOffset: 8,
+									collisionPadding: 8,
+									container: popoverContainer,
+									className: "text-left",
+									"data-part": "delta-tooltip",
+									children: /* @__PURE__ */ jsx(ArcTooltipRows, { rows: deltaExplanationRows })
+								})] }) : null]
+							}),
+							summary && /* @__PURE__ */ jsx("div", {
+								ref: plotRef,
+								className: "relative w-full",
+								style: { height: trendHeight },
+								"data-part": "trend",
+								children: hasChart ? plotWidth > 0 && spec ? /* @__PURE__ */ jsx(ArcVegaChart, {
+									spec,
+									options: embedOptions,
+									datasets,
+									description: chartDescription,
+									width: plotWidth,
+									height: trendHeight,
+									onEmbed,
+									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("p", {
+									className: cn(captionClasses, "flex h-full items-center"),
+									children: labels.insufficientTrend
+								})
+							}),
+							targetInfo && /* @__PURE__ */ jsxs(Tooltip, {
+								trackCursorAxis: "both",
+								children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+									delay: 150,
+									render: /* @__PURE__ */ jsx(Box, {
+										background: "transparent",
+										shadow: "none",
+										border: true,
+										radius: "md",
+										padding: "sm",
+										tabIndex: 0,
+										role: "group",
+										"aria-label": labels.targetProgress(name),
+										"aria-describedby": targetExplanationId,
+										className: "flex w-full min-w-0 flex-col gap-1.5 bg-slate-50 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+										"data-part": "target",
+										"data-tone": targetTone,
+										"data-direction": targetInfo.direction
+									}),
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											id: targetExplanationId,
+											className: "sr-only",
+											children: targetExplanation
+										}),
+										/* @__PURE__ */ jsxs("p", {
+											className: "flex min-w-0 flex-wrap items-center justify-between gap-2",
+											children: [/* @__PURE__ */ jsxs("span", {
+												className: "flex min-w-0 flex-wrap items-center gap-1.5",
+												children: [/* @__PURE__ */ jsxs("span", {
+													className: "shrink-0 font-semibold text-foreground tabular-nums",
+													children: [targetInfo.percentText, /* @__PURE__ */ jsxs("span", {
+														className: "sr-only",
+														children: [" ", labels.ofTarget]
+													})]
+												}), /* @__PURE__ */ jsxs("span", {
+													className: "text-muted-foreground tabular-nums",
+													"data-part": "target-amount",
+													children: [
+														"(",
+														targetInfo.progressAmountText,
+														")"
+													]
+												})]
+											}), /* @__PURE__ */ jsxs("span", {
+												className: "ms-auto flex min-w-0 items-center gap-1.5",
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "min-w-0 font-semibold text-foreground tabular-nums wrap-break-word",
+													"data-part": "target-goal",
+													children: targetInfo.targetText
+												}), /* @__PURE__ */ jsxs("span", {
+													className: cn("inline-flex shrink-0 items-center gap-x-1", polarityTextClasses[targetPolarity]),
+													"data-part": "target-variance",
+													"data-polarity": targetPolarity,
+													children: [
+														/* @__PURE__ */ jsxs("span", {
+															className: "sr-only",
+															children: [directionWordFor(targetInfo.direction), " "]
+														}),
+														/* @__PURE__ */ jsx("span", {
+															className: "font-medium tabular-nums",
+															children: targetInfo.varianceText
+														}),
+														/* @__PURE__ */ jsxs("span", {
+															className: "sr-only",
+															children: [" ", labels.vsTarget]
+														})
+													]
+												})]
+											})]
+										}),
+										/* @__PURE__ */ jsx(Meter, {
+											value: Math.min(100, Math.max(0, targetInfo.ratio * 100)),
+											size: "sm",
+											variant: targetInfo.variant,
+											"aria-label": labels.targetProgress(name),
+											getAriaValueText: () => `${targetInfo.percentText} ${labels.ofTarget}`
+										})
+									]
+								}), /* @__PURE__ */ jsx(TooltipPopup, {
+									arrow: false,
+									side: "bottom",
+									align: "start",
+									sideOffset: 12,
+									alignOffset: 12,
+									collisionPadding: 8,
+									container: popoverContainer,
+									className: "text-left",
+									"data-part": "target-tooltip",
+									children: /* @__PURE__ */ jsx(ArcTooltipRows, { rows: targetExplanationRows })
+								})]
+							}),
+							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: 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"
+			}),
+			tooltip
+		]
+	});
+});
+MetricCard.displayName = "MetricCard";
+//#endregion
+export { MetricCard };