@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/InsightCard/InsightCard.js

@@ -0,0 +1,961 @@
+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 { INSIGHT_INTERVAL_DATASET, INSIGHT_POINTS_DATASET, INSIGHT_STRIP_DATASET, buildInsightSparkSpec, buildInsightStripSpec } from "./InsightCard.chart.js";
+import { buildInsightChartDescription, buildInsightDescription, buildInsightProvenance, createInsightFormatters, deriveInsightState, formatInsightX, insightAxisGranularity, normalizeInsight, resolveInsightLabels } from "./InsightCard.model.js";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { AILoader, Badge, Box, Button, Popover, PopoverPopup, PopoverTitle, PopoverTrigger, Skeleton, SkeletonGroup, SystemState, Table, TableBody, TableCaption, TableCell, TableContainer, TableHead, TableHeader, TableRow, Toggle, Tooltip, TooltipPopup, TooltipTrigger, cn } from "@arcfusionz/arc-primitive-ui";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/InsightCard/InsightCard.tsx
+const sizeStyles = {
+	sm: {
+		padding: "sm",
+		gap: "gap-2",
+		gapPx: 8,
+		label: "text-xs",
+		statement: "text-sm",
+		statementPx: 20,
+		body: "text-xs",
+		keyRowPx: 35,
+		keyColumns: 2,
+		spark: 44,
+		strip: 22,
+		yTicks: 2,
+		captionPx: 16
+	},
+	md: {
+		padding: "md",
+		gap: "gap-3",
+		gapPx: 12,
+		label: "text-sm",
+		statement: "text-base",
+		statementPx: 24,
+		body: "text-sm",
+		keyRowPx: 34,
+		keyColumns: 3,
+		spark: 56,
+		strip: 26,
+		yTicks: 3,
+		captionPx: 18
+	},
+	lg: {
+		padding: "lg",
+		gap: "gap-3",
+		gapPx: 12,
+		label: "text-sm",
+		statement: "text-lg",
+		statementPx: 28,
+		body: "text-sm",
+		keyRowPx: 38,
+		keyColumns: 3,
+		spark: 72,
+		strip: 30,
+		yTicks: 4,
+		captionPx: 18
+	}
+};
+const severityBadge = {
+	info: "neutral",
+	notable: "warning",
+	critical: "destructive"
+};
+const polarityTextClasses = {
+	positive: "text-chart-positive",
+	negative: "text-chart-negative",
+	neutral: "text-foreground"
+};
+const labelClasses = "min-w-0 font-sans font-medium text-muted-foreground";
+const captionClasses = "font-sans text-xs text-muted-foreground";
+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 MISSING_NAME = "Insight";
+const EMPTY_POINTS = [];
+const EMPTY_ROWS = [];
+function KindGlyph({ kind, ...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: [
+			kind === "anomaly" && /* @__PURE__ */ jsx("path", { d: "M3 16h4l3-9 4 13 3-8h4" }),
+			kind === "trend" && /* @__PURE__ */ jsx("path", { d: "M3 17l6-6 4 4 8-8M15 7h6v6" }),
+			kind === "threshold" && /* @__PURE__ */ jsx("path", { d: "M3 14h18M8 21V9m0 0-3 3m3-3 3 3" }),
+			kind === "outlier" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", { d: "M5 18h.01M10 15h.01M15 17h.01M9 20h.01" }), /* @__PURE__ */ jsx("circle", {
+				cx: "18",
+				cy: "6",
+				r: "2.5"
+			})] }),
+			kind === "correlation" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", { d: "M4 20 20 4" }), /* @__PURE__ */ jsx("path", { d: "M7 16h.01M12 11h.01M17 7h.01M9 13h.01" })] }),
+			kind === "forecast" && /* @__PURE__ */ jsx("path", {
+				d: "M3 15l5-5 3 3 4-5M15 8h4v4M14 19h7",
+				strokeDasharray: "0"
+			}),
+			kind === "milestone" && /* @__PURE__ */ jsx("path", { d: "M6 21V4m0 0h11l-2.5 4L17 12H6" }),
+			kind === "note" && /* @__PURE__ */ jsxs(Fragment$1, { 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 12h14" })
+		]
+	});
+}
+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 TableIcon(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("rect", {
+			x: "3",
+			y: "4",
+			width: "18",
+			height: "16",
+			rx: "2"
+		}), /* @__PURE__ */ jsx("path", { d: "M3 10h18M9 10v10" })]
+	});
+}
+function CloseIcon(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 6l12 12M18 6 6 18" })
+	});
+}
+function ThumbIcon({ down, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		style: down ? { transform: "rotate(180deg)" } : void 0,
+		children: [/* @__PURE__ */ jsx("path", { d: "M7 10v11H4a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h3Z" }), /* @__PURE__ */ jsx("path", { d: "M7 10l4.5-7a2.5 2.5 0 0 1 3.7 3.2L14 10h5a2 2 0 0 1 2 2.4l-1.4 6A2 2 0 0 1 17.6 20H7" })]
+	});
+}
+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 node = ref.current;
+		if (!node) return;
+		let frame = 0;
+		const measure = () => setWidth((previous) => {
+			const next = Math.round(node.getBoundingClientRect().width);
+			return previous === next ? previous : next;
+		});
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(measure);
+		});
+		observer.observe(node);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [ref, enabled]);
+	return width;
+}
+/**
+* A finding, stated — the tenth member of the analytics card family, and the
+* only one whose primary content is a **claim** rather than a reading.
+* Everything else here takes data and computes something; this takes a finding
+* a detector or a model already made and lays it out so a person can judge it:
+* the statement, the observed reading against what was expected, the evidence
+* plot, the provenance behind the claim, and the triage — act, dismiss, or say
+* it was wrong.
+*
+* The evidence resolves itself: a `spark` when there is history to plot, a
+* `range` strip when there is only a reading and an expectation, `none` when
+* the finding is not a number on a scale. Severity is derived on whichever
+* scale the detector's own data establishes and stamped with which one that
+* was, polarity is separate and rides `goodDirection`, and every value the
+* plot shows is also in the key row, the description and the popover table.
+*/
+const InsightCard = forwardRef(({ label, name: nameProp, statement, statementText, hint, kind = "anomaly", observation, points = EMPTY_POINTS, xType, evidence = "auto", axes = "none", zeroScale = false, severity: severityProp, severityThresholds, goodDirection = "none", deltaMode = "percent", format = "compact", formatValue, granularity = "day", method, confidence, sampleSize, detectedAt, detectedAtFormat = "day", generated = true, status = "ready", filtered = false, stale = false, updatedAt, updatedAtFormat = "day", onRetry, onClearFilters, onDismiss, feedback, defaultFeedback, onFeedback, primaryAction, action, expectedLines = 2, size = "md", titleLevel = 3, locale, timeZone, labels: labelOverrides, description, defaultTableOpen = false, hideTableToggle = false, onEmbed, patchSpec, render, className, ...rest }, forwardedRef) => {
+	const labels = useMemo(() => resolveInsightLabels(labelOverrides), [labelOverrides]);
+	const sizes = sizeStyles[size];
+	const name = nameProp ?? (typeof label === "string" ? label : MISSING_NAME);
+	const claimText = statementText ?? (typeof statement === "string" ? statement : null);
+	const id = useId();
+	const headingId = `${id}-label`;
+	const descriptionId = `${id}-description`;
+	const hintId = `${id}-hint`;
+	const tableId = `${id}-table`;
+	const [rootRef, setRootRef] = useMergedRef(forwardedRef);
+	const plotRef = useRef(null);
+	const [popoverContainer, setPopoverContainer] = useState(null);
+	const [tableOpen, setTableOpen] = useState(defaultTableOpen);
+	const tokens = useChartTokens(rootRef);
+	const [feedbackState, setFeedbackState] = useState(defaultFeedback);
+	const chosen = feedback !== void 0 ? feedback : feedbackState ?? null;
+	const chooseFeedback = useCallback((next, pressed) => {
+		const value = pressed ? next : null;
+		if (feedback === void 0) setFeedbackState(value);
+		onFeedback?.(value);
+	}, [feedback, onFeedback]);
+	const summary = useMemo(() => normalizeInsight({
+		observation,
+		points,
+		xType,
+		goodDirection,
+		evidence,
+		severity: severityProp,
+		severityThresholds,
+		tokens
+	}), [
+		observation,
+		points,
+		xType,
+		goodDirection,
+		evidence,
+		severityProp,
+		severityThresholds,
+		tokens
+	]);
+	const formatters = useMemo(() => createInsightFormatters({
+		format,
+		locale,
+		deltaMode,
+		formatValue,
+		labels
+	}), [
+		format,
+		locale,
+		deltaMode,
+		formatValue,
+		labels
+	]);
+	const hasStatement = statement != null && statement !== false;
+	const hasFinding = hasStatement || (summary?.value ?? null) != null;
+	const hasData = hasStatement || (points?.length ?? 0) > 0 || observation != null;
+	const insufficient = (evidence === "auto" || evidence === "spark") && (points?.length ?? 0) > 0 && (summary?.insufficient ?? false);
+	const state = deriveInsightState({
+		status,
+		hasFinding,
+		hasData,
+		insufficient,
+		filtered
+	});
+	const showContent = state === "ready" || state === "refreshing" || state === "insufficient";
+	const severity = summary?.severity ?? severityProp ?? "info";
+	const polarity = summary?.polarity ?? "neutral";
+	const plotEvidence = showContent ? summary?.evidence ?? "none" : "none";
+	const asOfText = useMemo(() => {
+		if (updatedAt == null) return null;
+		return typeof updatedAtFormat === "function" ? updatedAtFormat(new Date(updatedAt)) : formatDate(updatedAt, {
+			granularity: updatedAtFormat,
+			locale,
+			timeZone
+		});
+	}, [
+		updatedAt,
+		updatedAtFormat,
+		locale,
+		timeZone
+	]);
+	const detectedAtText = useMemo(() => {
+		if (detectedAt == null) return null;
+		return typeof detectedAtFormat === "function" ? detectedAtFormat(new Date(detectedAt)) : formatDate(detectedAt, {
+			granularity: detectedAtFormat,
+			locale,
+			timeZone
+		});
+	}, [
+		detectedAt,
+		detectedAtFormat,
+		locale,
+		timeZone
+	]);
+	const atText = useMemo(() => summary?.at != null ? formatDate(summary.at, {
+		granularity,
+		locale,
+		timeZone
+	}) : null, [
+		summary,
+		granularity,
+		locale,
+		timeZone
+	]);
+	const provenance = useMemo(() => buildInsightProvenance({
+		method,
+		confidence,
+		sampleSize,
+		detectedAtText,
+		locale,
+		labels
+	}), [
+		method,
+		confidence,
+		sampleSize,
+		detectedAtText,
+		locale,
+		labels
+	]);
+	const cardDescription = description ?? buildInsightDescription({
+		name,
+		state,
+		statement: claimText,
+		kind,
+		severity,
+		summary,
+		formatters,
+		provenance,
+		asOfText,
+		labels
+	});
+	const datasets = useMemo(() => ({
+		[INSIGHT_POINTS_DATASET]: summary?.points ?? EMPTY_ROWS,
+		[INSIGHT_INTERVAL_DATASET]: summary?.interval ?? EMPTY_ROWS,
+		[INSIGHT_STRIP_DATASET]: summary?.strip ?? EMPTY_ROWS
+	}), [summary]);
+	const plotHeight = plotEvidence === "spark" ? sizes.spark : plotEvidence === "range" ? sizes.strip : 0;
+	const hasPlot = plotEvidence !== "none";
+	const plotWidth = usePlotWidth(plotRef, hasPlot);
+	const sparkBand = summary?.hasBand ?? false;
+	const sparkExpectedLine = summary?.hasExpectedLine ?? false;
+	const sparkInterval = (summary?.interval.length ?? 0) > 0;
+	const stripBand = summary?.strip[0]?.lo != null && summary?.strip[0]?.hi != null;
+	const stripExpected = summary?.strip[0]?.e != null;
+	const resolvedXType = summary?.xType ?? "temporal";
+	const timeFormat = [
+		granularity,
+		locale ?? "",
+		timeZone ?? ""
+	].join("@").replace(/@+$/, "");
+	const spanMs = useMemo(() => {
+		const rows = summary?.points ?? [];
+		if (resolvedXType !== "temporal" || rows.length < 2) return null;
+		const first = rows[0]?.x;
+		const last = rows[rows.length - 1]?.x;
+		return typeof first === "number" && typeof last === "number" ? last - first : null;
+	}, [summary, resolvedXType]);
+	const axisTimeFormat = [
+		insightAxisGranularity(granularity, spanMs),
+		locale ?? "",
+		timeZone ?? ""
+	].join("@").replace(/@+$/, "");
+	const valueFormat = locale ? `${format}@${locale}` : format;
+	const spec = useMemo(() => {
+		if (!tokens || plotEvidence === "none") return null;
+		const built = plotEvidence === "spark" ? buildInsightSparkSpec({
+			height: sizes.spark,
+			xType: resolvedXType,
+			axes,
+			zero: zeroScale,
+			band: sparkBand,
+			expectedLine: sparkExpectedLine,
+			interval: sparkInterval,
+			tooltip: true,
+			xTitle: labels.tablePeriod,
+			valueTitle: name,
+			expectedTitle: labels.expected,
+			valueFormat,
+			timeFormat,
+			axisTimeFormat,
+			yTicks: sizes.yTicks,
+			locale
+		}, tokens) : buildInsightStripSpec({
+			height: sizes.strip,
+			band: stripBand,
+			expected: stripExpected,
+			tooltip: true,
+			observedTitle: labels.observed,
+			expectedTitle: labels.expected,
+			lowerTitle: `${labels.expected} ↓`,
+			upperTitle: `${labels.expected} ↑`,
+			valueFormat,
+			locale
+		}, tokens);
+		return patchSpec ? patchSpec(built) : built;
+	}, [
+		tokens,
+		plotEvidence,
+		sizes.spark,
+		sizes.strip,
+		sizes.yTicks,
+		resolvedXType,
+		axes,
+		zeroScale,
+		sparkBand,
+		sparkExpectedLine,
+		sparkInterval,
+		stripBand,
+		stripExpected,
+		labels,
+		name,
+		valueFormat,
+		timeFormat,
+		axisTimeFormat,
+		locale,
+		patchSpec
+	]);
+	const chartDescription = summary && hasPlot ? buildInsightChartDescription({
+		name,
+		summary,
+		formatters,
+		atText,
+		labels
+	}) : void 0;
+	const tooltipContent = useCallback(({ item }) => {
+		const raw = item.datum;
+		const datum = raw && "datum" in raw && raw.datum ? raw.datum : raw;
+		if (!datum) return null;
+		const num = (key) => typeof datum[key] === "number" ? datum[key] : null;
+		const rows = [];
+		if (plotEvidence === "spark") {
+			const x = datum.x;
+			rows.push([labels.tablePeriod, formatInsightX(x ?? null, {
+				xType: resolvedXType,
+				granularity,
+				locale,
+				timeZone
+			})]);
+			rows.push([labels.observed, formatters.formatValue(num("y"))]);
+			const expected = num("e");
+			if (expected != null) rows.push([labels.expected, formatters.formatValue(expected)]);
+			const range = formatters.formatRange(num("lo"), num("hi"));
+			if (range) rows.push([labels.tableRange, range]);
+		} else {
+			rows.push([labels.observed, formatters.formatValue(num("v"))]);
+			const expected = num("e");
+			if (expected != null) rows.push([labels.expected, formatters.formatValue(expected)]);
+			const range = formatters.formatRange(num("lo"), num("hi"));
+			if (range) rows.push([labels.tableRange, range]);
+		}
+		return /* @__PURE__ */ jsx(ArcTooltipRows, { rows });
+	}, [
+		plotEvidence,
+		labels,
+		formatters,
+		resolvedXType,
+		granularity,
+		locale,
+		timeZone
+	]);
+	const { handler: tooltipHandler, tooltip } = useArcTooltipHandler({ content: tooltipContent });
+	const embedOptions = useMemo(() => arcEmbedOptions({ tooltip: tooltipHandler }), [tooltipHandler]);
+	const observedText = summary?.value != null ? formatters.formatValue(summary.value) : null;
+	const rangeText = summary ? formatters.formatRange(summary.lower, summary.upper) : null;
+	const expectedText = rangeText ?? (summary?.expected != null ? formatters.formatValue(summary.expected) : null);
+	const deviationText = summary?.value != null && summary.expected != null ? formatters.formatDeviation(summary.value, summary.expected) : null;
+	const strengthText = summary ? formatters.formatStrength(summary.strength, summary.strengthKind) : null;
+	const keyCells = [
+		observedText ? {
+			key: "observed",
+			label: labels.observed,
+			value: observedText,
+			tone: "plain"
+		} : null,
+		expectedText ? {
+			key: "expected",
+			label: labels.expected,
+			value: expectedText,
+			tone: "muted"
+		} : null,
+		deviationText ? {
+			key: "deviation",
+			label: labels.deviation,
+			value: deviationText,
+			tone: "delta"
+		} : null
+	].filter((cell) => cell != null);
+	const keyRows = keyCells.length > 0 ? Math.ceil(keyCells.length / sizes.keyColumns) : 0;
+	const statementLines = Math.max(1, expectedLines);
+	const loading = state === "loading";
+	const reservedKeyRows = loading ? Math.ceil(3 / sizes.keyColumns) : keyRows;
+	const provenanceLines = provenance.length >= 3 ? 2 : 1;
+	const bodyMinHeight = (hasStatement || loading ? statementLines * sizes.statementPx : 0) + (reservedKeyRows > 0 ? sizes.gapPx + reservedKeyRows * sizes.keyRowPx : 0) + (hasPlot || loading ? sizes.gapPx + (hasPlot ? plotHeight : sizes.spark) : 0) + (state === "insufficient" ? sizes.gapPx + sizes.captionPx : 0) + (provenance.length > 0 ? sizes.gapPx + provenanceLines * sizes.captionPx : 0);
+	const HeadingTag = `h${titleLevel}`;
+	const busy = state === "loading" || state === "refreshing";
+	const badgeText = labels.badge(labels.severityNames[severity], labels.kindNames[kind], severity);
+	const hasTable = showContent && summary != null && (summary.points.length > 0 || summary.value != null);
+	const showFeedback = onFeedback != null;
+	const showFooter = primaryAction != null || showFeedback;
+	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-kind": kind,
+		"data-severity": severity,
+		"data-polarity": polarity,
+		"data-evidence": plotEvidence,
+		"data-strength": summary?.strengthKind ?? void 0,
+		"data-outside": summary?.outside ? "" : void 0,
+		"data-feedback": chosen ?? void 0,
+		"data-stale": stale ? "" : void 0,
+		"data-empty": state === "empty" || state === "no-match" ? "" : void 0,
+		className: cn("relative flex min-w-0 flex-col", sizes.gap, className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: setPopoverContainer,
+				className: "contents"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-start justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1",
+					children: [
+						/* @__PURE__ */ jsxs(Badge, {
+							variant: severityBadge[severity],
+							appearance: "soft",
+							size: "sm",
+							"data-part": "badge",
+							children: [/* @__PURE__ */ jsx(KindGlyph, {
+								kind,
+								className: "size-3"
+							}), badgeText]
+						}),
+						/* @__PURE__ */ jsx(HeadingTag, {
+							id: headingId,
+							className: cn(labelClasses, sizes.label, "truncate"),
+							"data-part": "label",
+							children: label
+						}),
+						hint && /* @__PURE__ */ jsx("span", {
+							id: hintId,
+							className: "sr-only",
+							children: hint
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1",
+					children: [
+						hint && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+							delay: 150,
+							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, {
+							side: "top",
+							sideOffset: 6,
+							container: popoverContainer,
+							children: hint
+						})] }),
+						stale && /* @__PURE__ */ jsx(Badge, {
+							variant: "warning",
+							appearance: "soft",
+							size: "sm",
+							"data-part": "stale",
+							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(TableIcon, { className: "size-3.5" })
+							}), popoverContainer && summary && /* @__PURE__ */ jsxs(PopoverPopup, {
+								id: tableId,
+								anchor: rootRef,
+								container: popoverContainer,
+								side: "right",
+								align: "start",
+								collisionPadding: 8,
+								className: "pointer-events-auto w-[min(30rem,var(--available-width))]",
+								"data-part": "data-popover",
+								children: [/* @__PURE__ */ jsx(PopoverTitle, {
+									className: "mb-3",
+									children: name
+								}), /* @__PURE__ */ jsx(TableContainer, {
+									variant: "plain",
+									tabIndex: 0,
+									role: "region",
+									"aria-label": labels.tableCaption(name),
+									className: "max-h-[min(18rem,calc(var(--available-height)-6rem))] 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)
+										}), summary.points.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+											/* @__PURE__ */ jsx(TableHead, { children: labels.tablePeriod }),
+											/* @__PURE__ */ jsx(TableHead, {
+												className: "text-right",
+												children: labels.tableValue
+											}),
+											/* @__PURE__ */ jsx(TableHead, {
+												className: "text-right",
+												children: labels.tableExpected
+											}),
+											/* @__PURE__ */ jsx(TableHead, {
+												className: "text-right",
+												children: labels.tableRange
+											})
+										] }) }), /* @__PURE__ */ jsx(TableBody, { children: summary.points.map((row) => /* @__PURE__ */ jsxs(TableRow, {
+											"data-flagged": row.f ? "" : void 0,
+											children: [
+												/* @__PURE__ */ jsxs(TableCell, {
+													className: cn(row.f && "font-semibold text-foreground"),
+													children: [formatInsightX(row.x, {
+														xType: resolvedXType,
+														granularity,
+														locale,
+														timeZone
+													}), row.f && /* @__PURE__ */ jsxs("span", {
+														className: "sr-only",
+														children: [
+															" (",
+															labels.flagged,
+															")"
+														]
+													})]
+												}),
+												/* @__PURE__ */ jsx(TableCell, {
+													className: cn("text-right tabular-nums", row.f && "font-semibold text-foreground"),
+													children: formatters.formatValue(row.y)
+												}),
+												/* @__PURE__ */ jsx(TableCell, {
+													className: "text-right text-muted-foreground tabular-nums",
+													children: formatters.formatValue(row.e)
+												}),
+												/* @__PURE__ */ jsx(TableCell, {
+													className: "text-right text-muted-foreground tabular-nums",
+													children: formatters.formatRange(row.lo, row.hi) ?? "—"
+												})
+											]
+										}, String(row.x))) })] }) : /* @__PURE__ */ jsxs(TableBody, { children: [
+											/* @__PURE__ */ jsxs(TableRow, { children: [/* @__PURE__ */ jsx(TableCell, { children: labels.observed }), /* @__PURE__ */ jsx(TableCell, {
+												className: "text-right font-semibold tabular-nums",
+												children: formatters.formatValue(summary.value)
+											})] }),
+											/* @__PURE__ */ jsxs(TableRow, { children: [/* @__PURE__ */ jsx(TableCell, { children: labels.tableExpected }), /* @__PURE__ */ jsx(TableCell, {
+												className: "text-right tabular-nums",
+												children: formatters.formatValue(summary.expected)
+											})] }),
+											/* @__PURE__ */ jsxs(TableRow, { children: [/* @__PURE__ */ jsx(TableCell, { children: labels.tableRange }), /* @__PURE__ */ jsx(TableCell, {
+												className: "text-right tabular-nums",
+												children: formatters.formatRange(summary.lower, summary.upper) ?? "—"
+											})] })
+										] })]
+									})
+								})]
+							})]
+						}),
+						action,
+						onDismiss && /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							iconOnly: true,
+							circular: true,
+							onClick: onDismiss,
+							"aria-label": labels.dismiss(name),
+							className: headerControlClasses,
+							"data-part": "dismiss",
+							children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-3.5" })
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: descriptionId,
+				className: "sr-only",
+				children: cardDescription
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative flex min-w-0 flex-col",
+				style: { minHeight: bodyMinHeight },
+				children: [
+					loading && /* @__PURE__ */ jsxs(SkeletonGroup, {
+						className: cn("flex flex-col", sizes.gap),
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "flex flex-col gap-1",
+								children: Array.from({ length: statementLines }, (_, index) => /* @__PURE__ */ jsx(Skeleton, {
+									variant: "text",
+									className: index === statementLines - 1 ? "w-3/5" : "w-full",
+									style: { height: sizes.statementPx - 6 }
+								}, index))
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: cn("grid gap-x-4 gap-y-1", sizes.keyColumns === 2 ? "grid-cols-2" : "grid-cols-3"),
+								style: { minHeight: reservedKeyRows * sizes.keyRowPx },
+								children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxs("div", {
+									className: "flex flex-col gap-1",
+									children: [/* @__PURE__ */ jsx(Skeleton, {
+										variant: "text",
+										className: "w-3/5",
+										style: { height: sizes.captionPx - 6 }
+									}), /* @__PURE__ */ jsx(Skeleton, {
+										variant: "text",
+										className: "w-4/5",
+										style: { height: sizes.captionPx - 4 }
+									})]
+								}, index))
+							}),
+							/* @__PURE__ */ jsx(Skeleton, {
+								variant: "rounded",
+								className: "w-full",
+								style: { height: sizes.spark }
+							})
+						]
+					}),
+					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, {
+							size: "sm",
+							variant: "secondary",
+							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, state === "refreshing" && "bg-veil"),
+						children: [
+							hasStatement && /* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 items-start gap-2",
+								"data-part": "statement",
+								children: [generated && /* @__PURE__ */ jsx(AILoader, {
+									size: "sm",
+									state: "default",
+									label: labels.insightMark,
+									className: "mt-1 shrink-0"
+								}), /* @__PURE__ */ jsx("p", {
+									className: cn("min-w-0 flex-1 font-heading font-semibold text-foreground leading-snug", sizes.statement, "[&_strong]:font-semibold [&_strong]:text-foreground"),
+									style: {
+										display: "-webkit-box",
+										WebkitBoxOrient: "vertical",
+										WebkitLineClamp: statementLines,
+										overflow: "hidden"
+									},
+									children: statement
+								})]
+							}),
+							keyCells.length > 0 && /* @__PURE__ */ jsx("dl", {
+								className: cn("grid min-w-0 gap-x-4 gap-y-1", sizes.keyColumns === 2 ? "grid-cols-2" : "grid-cols-3"),
+								"data-part": "key-row",
+								children: keyCells.map((cell) => /* @__PURE__ */ jsxs("div", {
+									className: "flex min-w-0 flex-col",
+									"data-part": `key-${cell.key}`,
+									children: [/* @__PURE__ */ jsx("dt", {
+										className: cn(captionClasses, "truncate"),
+										children: cell.label
+									}), /* @__PURE__ */ jsx("dd", {
+										className: cn("truncate font-sans font-semibold tabular-nums", sizes.body, cell.tone === "muted" && "text-muted-foreground", cell.tone === "plain" && "text-foreground", cell.tone === "delta" && polarityTextClasses[polarity]),
+										children: cell.tone === "delta" && summary ? /* @__PURE__ */ jsxs("span", {
+											className: "inline-flex min-w-0 items-center gap-0.5",
+											children: [
+												/* @__PURE__ */ jsx(DeltaGlyph, {
+													direction: summary.direction,
+													className: "size-3 shrink-0"
+												}),
+												/* @__PURE__ */ jsxs("span", {
+													className: "sr-only",
+													children: [labels.directionWords[summary.direction], " "]
+												}),
+												/* @__PURE__ */ jsx("span", {
+													className: "truncate",
+													children: cell.value
+												})
+											]
+										}) : cell.value
+									})]
+								}, cell.key))
+							}),
+							hasPlot && /* @__PURE__ */ jsx("div", {
+								ref: plotRef,
+								className: "relative w-full",
+								style: { height: plotHeight },
+								"data-part": "plot-block",
+								children: 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",
+									"data-part": "plot",
+									fallback: /* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "absolute inset-0"
+									})
+								})
+							}),
+							state === "insufficient" && /* @__PURE__ */ jsx("p", {
+								className: cn(captionClasses, "min-w-0"),
+								"data-part": "insufficient",
+								children: labels.needsHistory
+							}),
+							(strengthText || rangeText) && /* @__PURE__ */ jsxs("p", {
+								className: "sr-only",
+								"data-part": "claim-text",
+								children: [rangeText ? summary?.outside ? labels.outsideRange(rangeText) : labels.insideRange(rangeText) : null, strengthText ? ` ${strengthText}.` : null]
+							}),
+							provenance.length > 0 && /* @__PURE__ */ jsx("p", {
+								className: cn(captionClasses, "min-w-0"),
+								"data-part": "provenance",
+								children: provenance.join(" · ")
+							})
+						]
+					})
+				]
+			}),
+			showFooter && showContent && /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-wrap items-center justify-between gap-2",
+				"data-part": "footer",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "min-w-0",
+					children: primaryAction
+				}), showFeedback && /* @__PURE__ */ jsxs("div", {
+					role: "group",
+					"aria-label": labels.feedbackGroup(name),
+					className: "flex shrink-0 items-center gap-1",
+					"data-part": "feedback",
+					children: [/* @__PURE__ */ jsx(Toggle, {
+						variant: "ghost",
+						size: "sm",
+						pressed: chosen === "helpful",
+						onPressedChange: (pressed) => chooseFeedback("helpful", pressed),
+						"aria-label": labels.helpful,
+						className: "size-7 min-w-0 text-muted-foreground hover:text-foreground",
+						"data-part": "feedback-helpful",
+						children: /* @__PURE__ */ jsx(ThumbIcon, { className: "size-3.5" })
+					}), /* @__PURE__ */ jsx(Toggle, {
+						variant: "ghost",
+						size: "sm",
+						pressed: chosen === "not-helpful",
+						onPressedChange: (pressed) => chooseFeedback("not-helpful", pressed),
+						"aria-label": labels.notHelpful,
+						className: "size-7 min-w-0 text-muted-foreground hover:text-foreground",
+						"data-part": "feedback-not-helpful",
+						children: /* @__PURE__ */ jsx(ThumbIcon, {
+							down: true,
+							className: "size-3.5"
+						})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "sr-only",
+				children: chosen ? chosen === "helpful" ? labels.helpful : labels.notHelpful : ""
+			}),
+			asOfText && /* @__PURE__ */ jsxs("figcaption", {
+				className: cn(captionClasses, "text-right"),
+				"data-part": "as-of",
+				children: [
+					labels.asOf,
+					" ",
+					asOfText
+				]
+			}),
+			tooltip
+		]
+	});
+});
+InsightCard.displayName = "InsightCard";
+//#endregion
+export { InsightCard };