@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/TrendCard/TrendCard.js

@@ -0,0 +1,1053 @@
+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 { TREND_BANDS_DATASET, TREND_LATEST_DATASET, TREND_PERIODS_DATASET, TREND_REFERENCE_DATASET, TREND_TABLE_DATASET, buildTrendPlotSpec } from "./TrendCard.chart.js";
+import { bandAt, buildLatestRows, buildPeriodRows, buildTrendChartDescription, buildTrendDescription, buildTrendInsight, buildTrendTooltip, createTrendFormatters, deriveTrendSpan, deriveTrendState, normalizeSeries, resolveBands, resolveSeriesColorMode, resolveTrendLabels, trendAxisGranularity } from "./TrendCard.model.js";
+import { Fragment, forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { AILoader, Badge, Box, Button, HorizontalScroll, Popover, PopoverPopup, PopoverTitle, PopoverTrigger, Skeleton, SkeletonGroup, SystemState, Table, TableBody, TableCaption, TableCell, TableContainer, TableHead, TableHeader, TableRow, Toggle, Tooltip, TooltipPopup, TooltipTrigger, cn } from "@arcfusionz/arc-primitive-ui";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TrendCard/TrendCard.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,
+		plotHeight: 120,
+		legendLinePx: 24
+	},
+	md: {
+		padding: "md",
+		gap: "gap-3",
+		gapPx: 12,
+		label: "text-sm",
+		value: "text-3xl leading-9",
+		valueLinePx: 36,
+		unit: "text-sm",
+		body: "text-sm",
+		badge: "md",
+		deltaLinePx: 24,
+		comparisonLinePx: 20,
+		plotHeight: 160,
+		legendLinePx: 28
+	},
+	lg: {
+		padding: "lg",
+		gap: "gap-3",
+		gapPx: 12,
+		label: "text-sm",
+		value: "text-4xl leading-10",
+		valueLinePx: 40,
+		unit: "text-base",
+		body: "text-sm",
+		badge: "lg",
+		deltaLinePx: 28,
+		comparisonLinePx: 20,
+		plotHeight: 200,
+		legendLinePx: 28
+	}
+};
+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";
+const polarityBadgeVariant = {
+	positive: "success",
+	negative: "destructive",
+	neutral: "neutral"
+};
+const changeTextClasses = {
+	positive: "text-chart-positive",
+	negative: "text-chart-negative",
+	neutral: "text-foreground"
+};
+const headerControlClasses = "size-6 min-w-0 text-muted-foreground hover:text-foreground";
+const panelStateClasses = "w-full max-w-none gap-3 px-3 py-4 [--artwork-box:4rem]";
+const X_AXIS_HEIGHT_PX = 24;
+const PX_PER_Y_TICK = 48;
+const MISSING_NAME = "Trend";
+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" })
+		]
+	});
+}
+/** Match the plot's mark shape so a series' meaning never depends on colour alone. */
+function TrendSeriesKey({ label, mark, color, variant = "series" }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex min-w-0 items-center gap-1.5",
+		children: [/* @__PURE__ */ jsx("svg", {
+			width: "20",
+			height: "12",
+			viewBox: "0 0 20 12",
+			fill: "none",
+			"aria-hidden": "true",
+			className: "shrink-0",
+			style: { color },
+			children: variant === "band" ? /* @__PURE__ */ jsx("rect", {
+				x: "1",
+				y: "1",
+				width: "18",
+				height: "10",
+				rx: "2",
+				fill: "currentColor",
+				opacity: "0.5"
+			}) : mark === "bar" ? /* @__PURE__ */ jsx("rect", {
+				x: "5",
+				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: "18",
+				height: "5",
+				fill: "currentColor",
+				opacity: "0.16"
+			}), /* @__PURE__ */ jsx("line", {
+				x1: "2",
+				y1: "6",
+				x2: "18",
+				y2: "6",
+				stroke: "currentColor",
+				strokeWidth: variant === "target" ? 1.5 : 2,
+				strokeLinecap: "round",
+				strokeDasharray: variant === "target" ? "0 4" : void 0
+			})] })
+		}), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate",
+			children: 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)) });
+}
+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 trend panel for dashboards: several series over the same periods on one
+* shared scale, with labelled axes, a legend the reader operates, a shared-x
+* crosshair that reads every series at the pointed period, named period bands,
+* an optional target rule, the subject's change across the span as a headline,
+* and every loading, empty, error and stale state — layout-stable, with a
+* generated text equivalent and a data table in an info popover.
+*
+* Where `MetricCard` answers "what is this number and is it good", TrendCard
+* answers "what shape is this metric in, and which series is driving it".
+*/
+const TrendCard = forwardRef(({ label, name: nameProp, hint, series, focus, defaultFocus, onFocusChange, visibleSeries, defaultVisibleSeries, onVisibleSeriesChange, legend, legendMode = "auto", mark = "line", scale = "auto", stack = false, normalize = "none", indexFormat = "number:0", seriesColor = "auto", maxSeries, bands, target, expectedSeries, headline = "latest", deltaMode = "percent", goodDirection = "up", format = "compact", formatValue, unit, plotHeight: plotHeightProp, axes = true, labelSeries = false, granularity, insight, status = "ready", filtered = false, stale = false, updatedAt, updatedAtFormat = "day", onRetry, onClearFilters, size = "md", titleLevel = 3, locale, timeZone, labels: labelOverrides, description, action, defaultTableOpen = false, hideTableToggle = false, onEmbed, patchSpec, render, className, ...rest }, forwardedRef) => {
+	const labels = useMemo(() => resolveTrendLabels(labelOverrides), [labelOverrides]);
+	const sizes = sizeStyles[size];
+	const plotHeight = plotHeightProp ?? sizes.plotHeight + (axes ? X_AXIS_HEIGHT_PX : 0);
+	const name = nameProp ?? (typeof label === "string" ? label : MISSING_NAME);
+	const effectiveLabelSeries = labelSeries && stack === false && mark !== "bar";
+	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 plotRef = useRef(null);
+	const [tableOpen, setTableOpen] = useState(defaultTableOpen);
+	const [popoverContainer, setPopoverContainer] = useState(null);
+	const tokens = useChartTokens(rootRef);
+	const isFocusControlled = focus !== void 0;
+	const [innerFocus, setInnerFocus] = useState(defaultFocus);
+	const focusKeyRequest = isFocusControlled ? focus : innerFocus;
+	const isVisibleControlled = visibleSeries !== void 0;
+	const [innerVisible, setInnerVisible] = useState(defaultVisibleSeries);
+	const visibleRequest = isVisibleControlled ? visibleSeries : innerVisible;
+	const pendingAnnounce = useRef(false);
+	const [announcement, setAnnouncement] = useState("");
+	const slots = tokens?.category.length ?? 3;
+	const seriesCount = series?.length ?? 0;
+	const colorMode = resolveSeriesColorMode(seriesColor, maxSeries != null ? Math.min(seriesCount, maxSeries) : seriesCount, slots);
+	const emphasize = colorMode === "emphasis" && seriesCount > 1;
+	const allKeys = useMemo(() => {
+		const seen = /* @__PURE__ */ new Map();
+		return (series ?? []).map((entry) => {
+			const base = entry.key ?? entry.label;
+			const repeats = seen.get(base) ?? 0;
+			seen.set(base, repeats + 1);
+			return repeats === 0 ? base : `${base}·${repeats + 1}`;
+		});
+	}, [series]);
+	const visibleKeys = useMemo(() => {
+		const known = new Set(allKeys);
+		const requested = visibleRequest?.filter((key) => known.has(key));
+		return requested && requested.length > 0 ? requested : allKeys;
+	}, [allKeys, visibleRequest]);
+	const summary = useMemo(() => tokens ? normalizeSeries(series, {
+		granularity,
+		normalize,
+		focus: focusKeyRequest,
+		visible: visibleKeys,
+		maxSeries,
+		otherLabel: labels.other,
+		colorMode,
+		tokens,
+		stack: mark === "line" ? false : stack
+	}) : null, [
+		tokens,
+		series,
+		granularity,
+		normalize,
+		focusKeyRequest,
+		visibleKeys,
+		maxSeries,
+		labels.other,
+		colorMode,
+		mark,
+		stack
+	]);
+	const formatters = useMemo(() => createTrendFormatters({
+		format,
+		locale,
+		timeZone,
+		formatValue,
+		xType: summary?.xType ?? "temporal",
+		granularity: summary?.granularity ?? granularity ?? "day",
+		normalize,
+		stack: mark === "line" ? false : stack,
+		indexFormat
+	}), [
+		format,
+		locale,
+		timeZone,
+		formatValue,
+		summary,
+		granularity,
+		normalize,
+		mark,
+		stack,
+		indexFormat
+	]);
+	const resolvedBands = useMemo(() => resolveBands(bands, summary), [bands, summary]);
+	const span = useMemo(() => deriveTrendSpan(summary, summary?.focusKey, {
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		percentagePoints: labels.percentagePoints,
+		formatters
+	}), [
+		summary,
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		labels.percentagePoints,
+		formatters
+	]);
+	const hasReadings = (summary?.count ?? 0) > 0;
+	const state = deriveTrendState({
+		status,
+		hasValue: hasReadings,
+		hasData: seriesCount > 0,
+		filtered
+	});
+	const showContent = state === "ready" || state === "refreshing";
+	const hasChart = summary != null && summary.periods.length >= 2 && summary.count >= 2;
+	const insufficient = showContent && summary != null && !hasChart;
+	const hasTable = showContent && summary != null && summary.periods.length > 0;
+	const focusInfo = summary?.series.find((info) => info.key === summary.focusKey) ?? null;
+	const resolvedLegendMode = legendMode === "auto" ? emphasize ? "focus" : "visibility" : legendMode;
+	const showLegend = (legend ?? seriesCount > 1) && showContent && summary != null && summary.series.length > 1;
+	const visibleSet = useMemo(() => new Set(visibleKeys), [visibleKeys]);
+	const shownSeries = useMemo(() => (summary?.series ?? []).filter((info) => visibleSet.has(info.key)), [summary, visibleSet]);
+	const selectFocus = useCallback((key) => {
+		pendingAnnounce.current = true;
+		if (!isFocusControlled) setInnerFocus(key);
+		onFocusChange?.(key);
+	}, [isFocusControlled, onFocusChange]);
+	const toggleSeries = useCallback((key, shown) => {
+		const next = shown ? [...visibleKeys, key] : visibleKeys.filter((entry) => entry !== key);
+		if (next.length === 0) return;
+		pendingAnnounce.current = true;
+		if (!isVisibleControlled) setInnerVisible(next);
+		onVisibleSeriesChange?.(next);
+	}, [
+		visibleKeys,
+		isVisibleControlled,
+		onVisibleSeriesChange
+	]);
+	const targetText = target != null ? formatters.formatValue(target) : null;
+	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 ?? buildTrendDescription({
+		name,
+		state,
+		headline,
+		summary,
+		visibleKeys,
+		span,
+		bands: resolvedBands,
+		formatters,
+		targetText,
+		asOfText,
+		labels
+	});
+	useEffect(() => {
+		if (!pendingAnnounce.current) return;
+		pendingAnnounce.current = false;
+		setAnnouncement(cardDescription);
+	}, [cardDescription]);
+	const deltaExplanationRows = span ? labels.deltaExplanation({
+		seriesLabel: span.seriesLabel,
+		fromLabel: formatters.formatX(span.from.x),
+		fromText: formatters.formatValue(span.from.y),
+		toLabel: formatters.formatX(span.to.x),
+		toText: formatters.formatValue(span.to.y),
+		changeText: span.delta.text,
+		secondaryText: span.delta.secondaryText,
+		renderedMode: span.delta.renderedMode,
+		direction: span.delta.direction
+	}) : [];
+	const deltaExplanation = deltaExplanationRows.map(([key, value]) => `${key}: ${value}`).join(". ");
+	const plotWidth = usePlotWidth(plotRef, showContent && hasChart);
+	const transformed = normalize === "index" || stack === "normalize" && mark !== "line";
+	const tooltipContent = useCallback(({ item }) => {
+		const raw = item.datum;
+		const datum = raw && "datum" in raw && raw.datum ? raw.datum : raw;
+		const x = datum && typeof datum === "object" && "x" in datum ? datum.x : void 0;
+		const model = buildTrendTooltip({
+			summary,
+			visibleKeys,
+			bands: resolvedBands,
+			x,
+			target,
+			formatters,
+			transformed
+		});
+		if (!model) return null;
+		const rows = [[labels.tablePeriod, model.periodText]];
+		if (model.bandText) rows.push([labels.band, model.bandText]);
+		for (const entry of model.entries) rows.push([/* @__PURE__ */ jsx(TrendSeriesKey, {
+			mark,
+			color: entry.color,
+			label: /* @__PURE__ */ jsxs(Fragment$1, { children: [entry.label, entry.isFocus && emphasize && /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [
+					" (",
+					labels.focused,
+					")"
+				]
+			})] })
+		}, entry.key), entry.plottedText != null ? /* @__PURE__ */ jsxs(Fragment$1, { children: [entry.plottedText, /* @__PURE__ */ jsxs("span", {
+			className: "ms-1 text-background/70",
+			children: [
+				"(",
+				entry.valueText,
+				")"
+			]
+		})] }) : entry.valueText]);
+		if (model.targetText) rows.push([/* @__PURE__ */ jsx(TrendSeriesKey, {
+			mark: "target",
+			variant: "target",
+			label: labels.target,
+			color: tokens?.reference
+		}, "target"), model.targetText]);
+		return /* @__PURE__ */ jsx(ArcTooltipRows, { rows });
+	}, [
+		summary,
+		visibleKeys,
+		resolvedBands,
+		target,
+		formatters,
+		transformed,
+		labels,
+		mark,
+		tokens,
+		emphasize
+	]);
+	const { handler: tooltipHandler, tooltip } = useArcTooltipHandler({ content: tooltipContent });
+	const embedOptions = useMemo(() => arcEmbedOptions({ tooltip: tooltipHandler }), [tooltipHandler]);
+	const xType = summary?.xType;
+	const summaryGranularity = summary?.granularity;
+	const hasReference = target != null;
+	const hasBands = resolvedBands.length > 0;
+	const periodTitle = labels.tablePeriod;
+	const yTicks = Math.max(2, Math.round(plotHeight / PX_PER_Y_TICK));
+	const plotFormat = normalize === "index" ? indexFormat : stack === "normalize" && mark !== "line" ? "percent:0" : format;
+	const spec = useMemo(() => {
+		if (!tokens || !xType || !summaryGranularity) return null;
+		const timeGrammar = (kind) => [
+			kind,
+			locale ?? "",
+			timeZone ?? ""
+		].join("@").replace(/@+$/, "");
+		const built = buildTrendPlotSpec({
+			mark,
+			scale,
+			xType,
+			stack: mark === "line" ? false : stack,
+			height: plotHeight,
+			axes,
+			yTicks,
+			reference: hasReference,
+			bands: hasBands,
+			tooltip: true,
+			labelSeries: effectiveLabelSeries,
+			emphasize,
+			xTitle: periodTitle,
+			yTitle: name,
+			targetTitle: labels.target,
+			plotFormat: locale ? `${plotFormat}@${locale}` : plotFormat,
+			timeFormat: timeGrammar(summaryGranularity),
+			axisTimeFormat: timeGrammar(trendAxisGranularity(summaryGranularity)),
+			locale,
+			timeZone
+		}, tokens);
+		return patchSpec ? patchSpec(built) : built;
+	}, [
+		tokens,
+		xType,
+		summaryGranularity,
+		mark,
+		scale,
+		stack,
+		plotHeight,
+		axes,
+		yTicks,
+		hasReference,
+		hasBands,
+		effectiveLabelSeries,
+		emphasize,
+		periodTitle,
+		labels.target,
+		name,
+		plotFormat,
+		locale,
+		timeZone,
+		patchSpec
+	]);
+	const tableRows = summary?.rows;
+	const referenceRows = useMemo(() => target != null ? [{ value: target }] : [], [target]);
+	const periodRows = useMemo(() => summary ? buildPeriodRows(summary) : [], [summary]);
+	const latestRows = useMemo(() => summary && effectiveLabelSeries ? buildLatestRows(summary, visibleKeys) : [], [
+		summary,
+		effectiveLabelSeries,
+		visibleKeys
+	]);
+	const datasets = useMemo(() => ({
+		[TREND_TABLE_DATASET]: tableRows ?? [],
+		[TREND_PERIODS_DATASET]: periodRows,
+		[TREND_REFERENCE_DATASET]: referenceRows,
+		[TREND_BANDS_DATASET]: resolvedBands,
+		[TREND_LATEST_DATASET]: latestRows
+	}), [
+		tableRows,
+		periodRows,
+		referenceRows,
+		resolvedBands,
+		latestRows
+	]);
+	const chartDescription = summary && hasChart ? buildTrendChartDescription({
+		name,
+		mark,
+		summary,
+		visibleKeys,
+		focusLabel: emphasize ? focusInfo?.label ?? null : null,
+		stack: mark === "line" ? false : stack,
+		normalize,
+		formatters,
+		targetText,
+		labels
+	}) : void 0;
+	const insightContent = insight === void 0 ? span ? /* @__PURE__ */ jsx(InsightText, { segments: buildTrendInsight({
+		span,
+		formatters,
+		labels
+	}) }) : null : insight;
+	const showInsight = insightContent != null && insightContent !== false;
+	const reserveHeadline = headline !== "none";
+	const countForLegend = seriesCount > 0 ? seriesCount : expectedSeries ?? 0;
+	const reserveLegend = legend ?? countForLegend > 1;
+	const reserveInsight = insight === void 0 ? true : insight != null && insight !== false;
+	const headlineMinHeight = reserveHeadline ? Math.max(sizes.valueLinePx, sizes.deltaLinePx + 4 + sizes.comparisonLinePx) : 0;
+	const captionText = !transformed ? null : normalize === "index" && summary && summary.periods.length > 0 ? labels.indexedAt(formatters.formatX(summary.periods[0])) : labels.normalized;
+	const bodyMinHeight = (reserveHeadline ? headlineMinHeight + sizes.gapPx : 0) + plotHeight + (reserveLegend ? sizes.gapPx + sizes.legendLinePx : 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 legendRef = useRef(null);
+	const onLegendKeyDown = useCallback((event) => {
+		const keys = shownSeries.map((info) => info.key);
+		if (keys.length === 0) return;
+		const current = keys.indexOf(summary?.focusKey ?? "");
+		let next = -1;
+		if (event.key === "ArrowRight" || event.key === "ArrowDown") next = (current + 1 + keys.length) % keys.length;
+		else if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = (current - 1 + keys.length) % keys.length;
+		else if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = keys.length - 1;
+		if (next < 0) return;
+		event.preventDefault();
+		selectFocus(keys[next]);
+		requestAnimationFrame(() => {
+			(legendRef.current?.querySelectorAll("[data-part=\"legend-chip\"]"))?.[next]?.focus();
+		});
+	}, [
+		shownSeries,
+		summary,
+		selectFocus
+	]);
+	const legendNode = showLegend && summary && /* @__PURE__ */ jsx(HorizontalScroll, {
+		fade: true,
+		className: "min-w-0",
+		"data-part": "legend-scroll",
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: legendRef,
+			role: resolvedLegendMode === "focus" ? "radiogroup" : "group",
+			"aria-label": labels.legendGroup(name),
+			onKeyDown: resolvedLegendMode === "focus" ? onLegendKeyDown : void 0,
+			className: cn("flex min-w-0 flex-wrap items-center gap-x-1 gap-y-1 font-sans", sizes.body),
+			"data-part": "legend",
+			children: [
+				summary.series.map((info) => {
+					const shown = visibleSet.has(info.key);
+					const isFocus = info.key === summary.focusKey;
+					const key = /* @__PURE__ */ jsx(TrendSeriesKey, {
+						mark,
+						color: shown ? info.color : tokens?.mutedForeground,
+						label: /* @__PURE__ */ jsxs("span", {
+							className: "inline-flex min-w-0 items-baseline gap-1.5",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 truncate",
+								children: info.label
+							}), /* @__PURE__ */ jsx("span", {
+								className: "shrink-0 text-muted-foreground tabular-nums",
+								children: formatters.formatValue(info.latest?.y)
+							})]
+						})
+					});
+					if (resolvedLegendMode === "focus") return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						role: "radio",
+						"aria-checked": isFocus,
+						tabIndex: isFocus ? 0 : -1,
+						onClick: () => selectFocus(info.key),
+						className: cn("inline-flex max-w-full cursor-pointer items-center rounded-md px-1.5 py-1 text-left transition-colors", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", isFocus ? "bg-primary-50 font-medium text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"),
+						"data-part": "legend-chip",
+						"data-focused": isFocus ? "" : void 0,
+						children: [key, isFocus && /* @__PURE__ */ jsxs("span", {
+							className: "sr-only",
+							children: [
+								" (",
+								labels.focused,
+								")"
+							]
+						})]
+					}, info.key);
+					return /* @__PURE__ */ jsx(Toggle, {
+						variant: "ghost",
+						size: "sm",
+						pressed: shown,
+						onPressedChange: (next) => toggleSeries(info.key, next),
+						disabled: shown && shownSeries.length <= 1,
+						"aria-label": shown ? labels.hideSeries(info.label) : labels.showSeries(info.label),
+						className: cn("h-auto max-w-full px-1.5 py-1", shown ? "" : "opacity-60"),
+						"data-part": "legend-chip",
+						"data-shown": shown ? "" : void 0,
+						children: key
+					}, info.key);
+				}),
+				resolvedBands.map((band, index) => /* @__PURE__ */ jsx("span", {
+					className: cn("inline-flex max-w-full items-center px-1.5 py-1 text-muted-foreground", sizes.body),
+					"data-part": "legend-band",
+					children: /* @__PURE__ */ jsx(TrendSeriesKey, {
+						mark: "band",
+						variant: "band",
+						color: tokens?.brush,
+						label: band.label ?? formatters.formatXRange(band.start, band.end)
+					})
+				}, index)),
+				target != null && /* @__PURE__ */ jsx("span", {
+					className: cn("inline-flex max-w-full items-center px-1.5 py-1 text-muted-foreground", sizes.body),
+					"data-part": "legend-target",
+					children: /* @__PURE__ */ jsx(TrendSeriesKey, {
+						mark: "target",
+						variant: "target",
+						color: tokens?.reference,
+						label: `${labels.target} ${targetText}`
+					})
+				})
+			]
+		})
+	});
+	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-stack": mark === "line" ? "false" : String(stack),
+		"data-normalize": normalize,
+		"data-series-color": colorMode,
+		"data-legend": showLegend ? resolvedLegendMode : void 0,
+		"data-headline": headline,
+		"data-empty": state === "empty" || state === "no-match" ? "" : void 0,
+		"data-stale": stale ? "" : void 0,
+		"data-insufficient": insufficient ? "" : void 0,
+		"data-polarity": showContent && span ? span.delta.polarity : void 0,
+		"data-focus": showContent ? summary?.focusKey : void 0,
+		"data-folded": showContent && summary && summary.folded > 0 ? summary.folded : void 0,
+		"data-hidden": showContent && summary ? summary.series.length - shownSeries.length || void 0 : 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: [!hideTableToggle && /* @__PURE__ */ jsx(PopoverTrigger, {
+								render: /* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "sm",
+									iconOnly: true,
+									circular: true,
+									"aria-label": tableOpen ? labels.hideTable(name) : labels.showTable(name),
+									className: headerControlClasses
+								}),
+								children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-3.5" })
+							}), popoverContainer && /* @__PURE__ */ jsxs(PopoverPopup, {
+								id: tableId,
+								anchor: rootRef,
+								container: popoverContainer,
+								side: "right",
+								align: "start",
+								collisionPadding: 8,
+								className: "pointer-events-auto w-[min(28rem,var(--available-width))]",
+								"data-part": "data-popover",
+								children: [
+									/* @__PURE__ */ jsx(PopoverTitle, {
+										className: "mb-3",
+										children: name
+									}),
+									/* @__PURE__ */ jsx(TableContainer, {
+										variant: "plain",
+										tabIndex: 0,
+										role: "region",
+										"aria-label": labels.tableCaption(name),
+										className: "max-h-[min(20rem,calc(var(--available-height)-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 }), shownSeries.map((info) => /* @__PURE__ */ jsx(TableHead, {
+													className: "text-right",
+													children: info.label
+												}, info.key))] }) }),
+												/* @__PURE__ */ jsx(TableBody, { children: (summary?.periods ?? []).map((x, at) => {
+													const band = bandAt(resolvedBands, summary?.periods ?? [], x);
+													return /* @__PURE__ */ jsxs(TableRow, {
+														"data-band": band ? "" : void 0,
+														children: [/* @__PURE__ */ jsxs(TableCell, { children: [
+															band && /* @__PURE__ */ jsx("span", {
+																"aria-hidden": "true",
+																className: "me-1.5 inline-block size-1.5 rounded-full align-middle",
+																style: { background: tokens?.brush }
+															}),
+															formatters.formatX(x),
+															band && /* @__PURE__ */ jsxs("span", {
+																className: "sr-only",
+																children: [
+																	" ",
+																	"(",
+																	band.label ?? labels.band,
+																	")"
+																]
+															})
+														] }), shownSeries.map((info) => /* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums",
+															children: info.reported[at] ? formatters.formatValue(info.values[at]) : "—"
+														}, info.key))]
+													}, at);
+												}) })
+											]
+										})
+									}),
+									captionText && /* @__PURE__ */ jsx("p", {
+										className: cn(captionClasses, "mt-3"),
+										children: captionText
+									})
+								]
+							})]
+						}),
+						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: [/* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "w-2/5",
+									style: { height: sizes.valueLinePx }
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "flex w-1/3 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 }
+									})]
+								})]
+							}),
+							/* @__PURE__ */ jsx(Skeleton, {
+								variant: "rounded",
+								className: "w-full",
+								style: { height: plotHeight }
+							}),
+							reserveLegend && /* @__PURE__ */ jsx("div", {
+								className: "flex flex-wrap gap-2",
+								children: Array.from({ length: Math.max(2, Math.min(4, countForLegend || 3)) }, (_, index) => /* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "w-24",
+									style: { height: sizes.legendLinePx }
+								}, index))
+							}),
+							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(panelStateClasses, "my-auto")
+					}),
+					state === "empty" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "empty",
+						scope: "inline",
+						title: labels.noData,
+						description: false,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					state === "no-match" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "no-results",
+						scope: "inline",
+						title: labels.noMatch,
+						description: false,
+						action: onClearFilters ? /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: onClearFilters,
+							children: labels.clearFilters
+						}) : void 0,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					showContent && /* @__PURE__ */ jsxs("div", {
+						className: cn("flex min-w-0 flex-col", sizes.gap),
+						children: [
+							headline !== "none" && /* @__PURE__ */ jsx("div", {
+								className: "flex min-w-0 items-center justify-between gap-2",
+								style: { minHeight: headlineMinHeight },
+								"data-part": "headline",
+								children: headline === "change" && span ? /* @__PURE__ */ jsxs("div", {
+									className: "flex min-w-0 flex-col",
+									"data-part": "value",
+									children: [/* @__PURE__ */ jsxs("span", {
+										className: cn(valueClasses, sizes.value, "min-w-0 wrap-break-word", changeTextClasses[span.delta.polarity]),
+										children: [/* @__PURE__ */ jsxs("span", {
+											className: "sr-only",
+											children: [directionWordFor(span.delta.direction), " "]
+										}), span.delta.text]
+									}), /* @__PURE__ */ jsxs("span", {
+										className: cn(captionClasses, "mt-1 min-w-0 wrap-break-word"),
+										children: [
+											formatters.formatValue(span.from.y),
+											" → ",
+											formatters.formatValue(span.to.y),
+											" · ",
+											span.rangeText
+										]
+									})]
+								}) : /* @__PURE__ */ jsxs(Fragment$1, { 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: formatters.formatValue(span?.to.y ?? focusInfo?.latest?.y)
+									}), unit != null && /* @__PURE__ */ jsx("span", {
+										className: cn("font-sans text-muted-foreground", sizes.unit),
+										children: unit
+									})]
+								}), span && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+									delay: 150,
+									render: /* @__PURE__ */ jsx("p", {
+										tabIndex: 0,
+										role: "group",
+										"aria-label": labels.changeGroup(name),
+										"aria-describedby": deltaExplanationId,
+										className: cn("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", sizes.body),
+										"data-part": "delta"
+									}),
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											id: deltaExplanationId,
+											className: "sr-only",
+											children: deltaExplanation
+										}),
+										/* @__PURE__ */ jsxs(Badge, {
+											variant: polarityBadgeVariant[span.delta.polarity],
+											appearance: "soft",
+											size: sizes.badge,
+											"data-direction": span.delta.direction,
+											children: [
+												/* @__PURE__ */ jsx(DeltaGlyph, { direction: span.delta.direction }),
+												/* @__PURE__ */ jsxs("span", {
+													className: "sr-only",
+													children: [directionWordFor(span.delta.direction), " "]
+												}),
+												span.delta.text
+											]
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "max-w-full text-muted-foreground wrap-break-word text-xs",
+											children: labels.since(formatters.formatX(span.from.x))
+										})
+									]
+								}), /* @__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 })
+								})] })] })
+							}),
+							/* @__PURE__ */ jsx("div", {
+								ref: plotRef,
+								className: "relative w-full",
+								style: { height: plotHeight },
+								"data-part": "plot",
+								children: hasChart ? plotWidth > 0 && spec ? /* @__PURE__ */ jsx(ArcVegaChart, {
+									spec,
+									options: embedOptions,
+									datasets,
+									description: chartDescription,
+									width: plotWidth,
+									height: plotHeight,
+									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.insufficient
+								})
+							}),
+							captionText && /* @__PURE__ */ jsx("p", {
+								className: cn(captionClasses, "-mt-1"),
+								"data-part": "caption",
+								children: captionText
+							}),
+							legendNode,
+							showInsight && /* @__PURE__ */ jsxs("div", {
+								className: cn("flex items-start gap-2 font-sans text-foreground", sizes.body),
+								"data-part": "insight",
+								children: [/* @__PURE__ */ jsx(AILoader, {
+									size: "sm",
+									state: "default",
+									label: labels.insightMark,
+									className: cn("shrink-0", size === "sm" ? "" : "mt-0.5")
+								}), /* @__PURE__ */ jsx("p", {
+									className: "min-w-0 flex-1 text-xs leading-[1.8] [&_strong]:font-semibold [&_strong]:text-foreground",
+									children: insightContent
+								})]
+							})
+						]
+					}),
+					state === "refreshing" && /* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						className: "absolute -inset-1 rounded-md bg-veil"
+					})
+				]
+			}),
+			asOfValid && asOfDate && /* @__PURE__ */ jsx("p", {
+				className: cn(captionClasses, "text-right"),
+				"data-part": "as-of",
+				children: /* @__PURE__ */ jsx("time", {
+					dateTime: asOfDate.toISOString(),
+					children: asOfText
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: setPopoverContainer,
+				className: "pointer-events-none absolute inset-0",
+				"data-part": "popover-host"
+			}),
+			tooltip
+		]
+	});
+});
+TrendCard.displayName = "TrendCard";
+//#endregion
+export { TrendCard };