@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/AnomalyCard/AnomalyCard.js

@@ -0,0 +1,1019 @@
+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 { ANOMALY_PERIODS_DATASET, ANOMALY_SPAN_DATASET, ANOMALY_TABLE_DATASET, buildAnomalyPlotSpec } from "./AnomalyCard.chart.js";
+import { anomalyAxisGranularity, buildAnomalyChartDescription, buildAnomalyDescription, buildAnomalyExplanation, buildAnomalyInsight, buildAnomalyPeriodRows, buildAnomalySpanRows, buildAnomalyTooltip, createAnomalyFormatters, deriveAnomalyStanding, deriveAnomalyState, normalizeAnomalies, resolveAnomalyLabels } from "./AnomalyCard.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, Tooltip, TooltipPopup, TooltipTrigger, cn } from "@arcfusionz/arc-primitive-ui";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/AnomalyCard/AnomalyCard.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",
+		verdictLinePx: 20,
+		captionLinePx: 16,
+		plotHeight: 120,
+		keyLinePx: 20,
+		episodeRowPx: 26
+	},
+	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",
+		verdictLinePx: 24,
+		captionLinePx: 20,
+		plotHeight: 160,
+		keyLinePx: 22,
+		episodeRowPx: 30
+	},
+	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",
+		verdictLinePx: 28,
+		captionLinePx: 20,
+		plotHeight: 200,
+		keyLinePx: 22,
+		episodeRowPx: 32
+	}
+};
+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 verdictBadgeVariant = {
+	clear: "success",
+	watch: "warning",
+	breach: "warning"
+};
+const polarityTextClasses = {
+	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 INSIGHT_LINES = 4;
+const MISSING_NAME = "Metric";
+const NO_EPISODES = [];
+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" })]
+	});
+}
+/** The verdict's own glyph, so the chip never depends on its hue (WCAG 1.4.1). */
+function VerdictGlyph({ verdict, ...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: [
+			verdict === "clear" && /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }),
+			verdict === "watch" && /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2M21 12a9 9 0 1 1-9-9" }),
+			verdict === "breach" && /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" })
+		]
+	});
+}
+/**
+* The flag's own shape, repeated in DOM text wherever an excursion is named —
+* the same triangle the plot draws, so a reader who cannot separate the hues
+* still reads the direction off the mark. A flag with no side to place it on
+* takes the plot's neutral circle.
+*/
+function FlagGlyph({ direction, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			direction === "high" && /* @__PURE__ */ jsx("path", { d: "M12 4 22 20H2Z" }),
+			direction === "low" && /* @__PURE__ */ jsx("path", { d: "M12 20 2 4h20Z" }),
+			direction == null && /* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "8"
+			})
+		]
+	});
+}
+/** A key-row swatch in the plot's own mark shape, so a name never depends on colour alone. */
+function AnomalyKey({ label, variant, color }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex min-w-0 items-center gap-1.5",
+		children: [/* @__PURE__ */ jsxs("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: "2",
+					width: "18",
+					height: "8",
+					rx: "2",
+					fill: "currentColor",
+					opacity: "0.28"
+				}),
+				variant === "expected" && /* @__PURE__ */ jsx("line", {
+					x1: "2",
+					y1: "6",
+					x2: "18",
+					y2: "6",
+					stroke: "currentColor",
+					strokeWidth: 1,
+					strokeDasharray: "4 3",
+					strokeLinecap: "round",
+					opacity: "0.9"
+				}),
+				variant === "series" && /* @__PURE__ */ jsx("line", {
+					x1: "2",
+					y1: "6",
+					x2: "18",
+					y2: "6",
+					stroke: "currentColor",
+					strokeWidth: 2,
+					strokeLinecap: "round"
+				}),
+				variant === "flag" && /* @__PURE__ */ jsx("path", {
+					d: "M10 1.5 15 10.5H5Z",
+					fill: "currentColor"
+				})
+			]
+		}), /* @__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;
+}
+/**
+* An anomaly panel for dashboards: one measure plotted against the range it
+* was expected to stay inside, every reading that broke out marked with a
+* direction-shaped flag, the excursions grouped into episodes and ranked as
+* rows the reader can select, a verdict that says whether it is happening
+* now, and every loading, empty, error and stale state — layout-stable, with
+* a generated text equivalent and a data table in an info popover.
+*
+* Where `HighlightCard` explains ONE window it was handed, AnomalyCard is the
+* surface that finds them: select an excursion here and hand its window on.
+*/
+const AnomalyCard = forwardRef(({ label, name: nameProp, hint, points, bounds, selectedEpisode, defaultSelectedEpisode = null, onSelectedEpisodeChange, mark = "line", scale = "auto", headline = "latest", deltaMode = "absolute", goodDirection = "none", format = "compact", formatValue, scoreFormat = "number:1", unit, plotHeight: plotHeightProp, axes = true, band = true, expected = true, keys = true, episodes = true, maxEpisodes = 3, 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(() => resolveAnomalyLabels(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 episodeSlots = Math.max(1, Math.round(maxEpisodes));
+	const id = useId();
+	const headingId = `${id}-label`;
+	const descriptionId = `${id}-description`;
+	const hintId = `${id}-hint`;
+	const tableId = `${id}-table`;
+	const episodesId = `${id}-episodes`;
+	const standingId = `${id}-standing`;
+	const [rootRef, setRootRef] = useMergedRef(forwardedRef);
+	const plotRef = useRef(null);
+	const [tableOpen, setTableOpen] = useState(defaultTableOpen);
+	const [popoverContainer, setPopoverContainer] = useState(null);
+	const tokens = useChartTokens(rootRef);
+	const isSelectionControlled = selectedEpisode !== void 0;
+	const [innerSelected, setInnerSelected] = useState(defaultSelectedEpisode);
+	const selectionRequest = isSelectionControlled ? selectedEpisode : innerSelected;
+	const pendingAnnounce = useRef(false);
+	const [announcement, setAnnouncement] = useState("");
+	const summary = useMemo(() => tokens ? normalizeAnomalies(points, {
+		granularity,
+		bounds,
+		goodDirection,
+		tokens
+	}) : null, [
+		tokens,
+		points,
+		granularity,
+		bounds,
+		goodDirection
+	]);
+	const formatters = useMemo(() => createAnomalyFormatters({
+		format,
+		locale,
+		timeZone,
+		formatValue,
+		xType: summary?.xType ?? "temporal",
+		granularity: summary?.granularity ?? granularity ?? "day",
+		deltaMode,
+		percentagePoints: labels.percentagePoints,
+		scoreFormat
+	}), [
+		format,
+		locale,
+		timeZone,
+		formatValue,
+		summary,
+		granularity,
+		deltaMode,
+		labels.percentagePoints,
+		scoreFormat
+	]);
+	const standing = useMemo(() => deriveAnomalyStanding(summary), [summary]);
+	const hasReadings = (summary?.count ?? 0) > 0;
+	const hasPoints = (points?.length ?? 0) > 0;
+	const state = deriveAnomalyState({
+		status,
+		hasValue: hasReadings,
+		hasData: hasPoints,
+		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 showBand = band && (summary?.hasBand ?? false);
+	const showExpected = expected && (summary?.hasExpected ?? false);
+	const showScore = summary?.hasScore ?? false;
+	const allEpisodes = summary?.episodes ?? NO_EPISODES;
+	const rankedEpisodes = useMemo(() => {
+		const magnitude = (episode) => {
+			if (!episode.peak) return -1;
+			return episode.peak.bound === 0 ? Math.abs(episode.peak.deviation) : Math.abs(episode.peak.deviation / episode.peak.bound);
+		};
+		return [...allEpisodes].sort((a, b) => magnitude(b) - magnitude(a));
+	}, [allEpisodes]);
+	const selectedKey = useMemo(() => selectionRequest != null && allEpisodes.some((episode) => episode.key === selectionRequest) ? selectionRequest : null, [selectionRequest, allEpisodes]);
+	const selectEpisode = useCallback((key) => {
+		pendingAnnounce.current = true;
+		if (!isSelectionControlled) setInnerSelected(key);
+		onSelectedEpisodeChange?.(key);
+	}, [isSelectionControlled, onSelectedEpisodeChange]);
+	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 ?? buildAnomalyDescription({
+		name,
+		state,
+		summary,
+		standing,
+		formatters,
+		asOfText,
+		labels
+	});
+	useEffect(() => {
+		if (!pendingAnnounce.current) return;
+		pendingAnnounce.current = false;
+		setAnnouncement(cardDescription);
+	}, [cardDescription]);
+	const standingExplanation = useMemo(() => {
+		if (!summary?.latest) return null;
+		return buildAnomalyExplanation({
+			row: summary.latest,
+			formatters,
+			labels
+		});
+	}, [
+		summary,
+		formatters,
+		labels
+	]);
+	const standingRows = standingExplanation ? labels.explanation(standingExplanation) : [];
+	const standingText = standingRows.map(([key, value]) => `${key}: ${value}`).join(". ");
+	const plotWidth = usePlotWidth(plotRef, showContent && hasChart);
+	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 = buildAnomalyTooltip({
+			summary,
+			x,
+			formatters,
+			labels
+		});
+		if (!model) return null;
+		const rows = labels.explanation(model.explanation).map(([key, value]) => [key, value]);
+		if (model.flagged && model.directionText) rows.unshift([/* @__PURE__ */ jsxs("span", {
+			className: "inline-flex min-w-0 items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx(FlagGlyph, {
+				direction: model.explanation.direction,
+				className: "size-2.5 shrink-0",
+				style: { color: model.color }
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				children: model.directionText
+			})]
+		}, "flag"), ""]);
+		return /* @__PURE__ */ jsx(ArcTooltipRows, { rows });
+	}, [
+		summary,
+		formatters,
+		labels
+	]);
+	const { handler: tooltipHandler, tooltip } = useArcTooltipHandler({ content: tooltipContent });
+	const embedOptions = useMemo(() => arcEmbedOptions({ tooltip: tooltipHandler }), [tooltipHandler]);
+	const xType = summary?.xType;
+	const summaryGranularity = summary?.granularity;
+	const periodTitle = labels.tablePeriod;
+	const yTicks = Math.max(2, Math.round(plotHeight / PX_PER_Y_TICK));
+	const spec = useMemo(() => {
+		if (!tokens || !xType || !summaryGranularity) return null;
+		const timeGrammar = (kind) => [
+			kind,
+			locale ?? "",
+			timeZone ?? ""
+		].join("@").replace(/@+$/, "");
+		const built = buildAnomalyPlotSpec({
+			mark,
+			scale,
+			xType,
+			height: plotHeight,
+			axes,
+			yTicks,
+			band: showBand,
+			expected: showExpected,
+			span: true,
+			tooltip: true,
+			xTitle: periodTitle,
+			yTitle: name,
+			plotFormat: locale ? `${format}@${locale}` : format,
+			timeFormat: timeGrammar(summaryGranularity),
+			axisTimeFormat: timeGrammar(anomalyAxisGranularity(summaryGranularity)),
+			locale,
+			timeZone
+		}, tokens);
+		return patchSpec ? patchSpec(built) : built;
+	}, [
+		tokens,
+		xType,
+		summaryGranularity,
+		mark,
+		scale,
+		plotHeight,
+		axes,
+		yTicks,
+		showBand,
+		showExpected,
+		periodTitle,
+		name,
+		format,
+		locale,
+		timeZone,
+		patchSpec
+	]);
+	const tableRows = summary?.rows;
+	const periodRows = useMemo(() => summary ? buildAnomalyPeriodRows(summary) : [], [summary]);
+	const spanRows = useMemo(() => buildAnomalySpanRows(summary, selectedKey), [summary, selectedKey]);
+	const datasets = useMemo(() => ({
+		[ANOMALY_TABLE_DATASET]: tableRows ?? [],
+		[ANOMALY_PERIODS_DATASET]: periodRows,
+		[ANOMALY_SPAN_DATASET]: spanRows
+	}), [
+		tableRows,
+		periodRows,
+		spanRows
+	]);
+	const chartDescription = summary && hasChart ? buildAnomalyChartDescription({
+		name,
+		mark,
+		summary,
+		formatters,
+		labels
+	}) : void 0;
+	const insightContent = insight === void 0 ? summary && hasChart ? /* @__PURE__ */ jsx(InsightText, { segments: buildAnomalyInsight({
+		name,
+		summary,
+		standing,
+		formatters,
+		labels
+	}) }) : null : insight;
+	const showInsight = insightContent != null && insightContent !== false;
+	const reserveHeadline = headline !== "none";
+	const reserveInsight = insight === void 0 ? true : insight != null && insight !== false;
+	const headlineMinHeight = reserveHeadline ? Math.max(sizes.valueLinePx + sizes.captionLinePx, sizes.verdictLinePx + 4 + sizes.captionLinePx) : 0;
+	const episodesMinHeight = episodes ? sizes.captionLinePx + 4 + episodeSlots * sizes.episodeRowPx : 0;
+	const bodyMinHeight = (reserveHeadline ? headlineMinHeight + sizes.gapPx : 0) + plotHeight + (keys ? sizes.gapPx + sizes.keyLinePx : 0) + (episodes ? sizes.gapPx + episodesMinHeight : 0) + (reserveInsight ? sizes.gapPx + 88 : 0);
+	const HeadingTag = `h${titleLevel}`;
+	const busy = state === "loading" || state === "refreshing";
+	const captionText = summary && hasChart && !summary.hasBand ? labels.unjudged : null;
+	const worstPeak = summary?.worst?.peak ?? null;
+	const headlineValue = headline === "count" ? String(allEpisodes.length) : headline === "worst" ? worstPeak ? formatters.formatDeviation(worstPeak.deviation, worstPeak.bound) ?? "—" : "—" : formatters.formatValue(summary?.latest?.y);
+	const headlineCaption = headline === "count" ? summary ? labels.ofJudged(summary.judged) : null : headline === "worst" ? worstPeak ? `${formatters.formatX(worstPeak.x)} · ${worstPeak.direction === "high" ? labels.high : labels.low}` : null : summary?.latest && (summary.latest.lo != null || summary.latest.hi != null) ? labels.expectedRange(formatters.formatRange(summary.latest.lo, summary.latest.hi)) : null;
+	const headlineClasses = headline === "worst" && summary?.worst ? polarityTextClasses[summary.worst.polarity] : "text-foreground";
+	const shownEpisodes = rankedEpisodes.slice(0, allEpisodes.length > episodeSlots ? episodeSlots - 1 : episodeSlots);
+	const overflow = allEpisodes.length - shownEpisodes.length;
+	const episodeRow = (episode) => {
+		const range = formatters.formatXRange(episode.start, episode.end);
+		const isSelected = episode.key === selectedKey;
+		const directionText = episode.mixed ? labels.mixed : episode.direction === "high" ? labels.high : episode.direction === "low" ? labels.low : labels.flagKey;
+		const deviation = episode.peak ? formatters.formatDeviation(episode.peak.deviation, episode.peak.bound) : null;
+		const score = episode.peak ? formatters.formatScore(episode.peak.score) : null;
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-pressed": isSelected,
+			"aria-label": labels.openEpisode({
+				range,
+				direction: directionText,
+				periods: labels.periodCount(episode.count),
+				deviation,
+				score,
+				ongoing: episode.ongoing
+			}),
+			onClick: () => selectEpisode(isSelected ? null : episode.key),
+			className: cn("flex w-full min-w-0 cursor-pointer items-center gap-2 rounded-md px-1.5 text-left font-sans transition-colors", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", sizes.body, isSelected ? "bg-primary-50 text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"),
+			style: { height: sizes.episodeRowPx },
+			"data-part": "episode",
+			"data-direction": episode.direction ?? void 0,
+			"data-selected": isSelected ? "" : void 0,
+			"data-ongoing": episode.ongoing ? "" : void 0,
+			children: [
+				/* @__PURE__ */ jsx(FlagGlyph, {
+					direction: episode.mixed ? null : episode.direction,
+					className: "size-2.5 shrink-0",
+					style: { color: episode.color }
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "min-w-0 flex-1 truncate text-foreground",
+					children: [
+						range,
+						/* @__PURE__ */ jsxs("span", {
+							className: "sr-only",
+							children: [", ", directionText]
+						}),
+						episode.ongoing && /* @__PURE__ */ jsxs("span", {
+							className: "ms-1.5 text-muted-foreground",
+							children: [
+								"(",
+								labels.ongoing,
+								")"
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-muted-foreground tabular-nums",
+					children: labels.periodCount(episode.count)
+				}),
+				deviation && /* @__PURE__ */ jsx("span", {
+					className: cn("shrink-0 font-medium tabular-nums", polarityTextClasses[episode.polarity]),
+					children: deviation
+				}),
+				score && /* @__PURE__ */ jsxs("span", {
+					className: "shrink-0 text-muted-foreground tabular-nums",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "sr-only",
+						children: [labels.score, " "]
+					}), score]
+				})
+			]
+		}, episode.key);
+	};
+	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-headline": headline,
+		"data-verdict": showContent ? standing.verdict : void 0,
+		"data-polarity": showContent ? standing.polarity : void 0,
+		"data-flagged": showContent && summary ? summary.flagged || void 0 : void 0,
+		"data-episodes": showContent ? allEpisodes.length || void 0 : void 0,
+		"data-selected": showContent ? selectedKey ?? void 0 : void 0,
+		"data-unjudged": showContent && summary && hasChart && !summary.hasBand ? "" : void 0,
+		"data-empty": state === "empty" || state === "no-match" ? "" : void 0,
+		"data-stale": stale ? "" : void 0,
+		"data-insufficient": insufficient ? "" : void 0,
+		...rest,
+		className: cn("relative flex min-w-0 flex-col", sizes.gap, className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-6 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(34rem,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 }),
+												/* @__PURE__ */ jsx(TableHead, {
+													className: "text-right",
+													children: labels.tableValue
+												}),
+												(summary?.hasExpected ?? false) && /* @__PURE__ */ jsx(TableHead, {
+													className: "text-right",
+													children: labels.tableExpected
+												}),
+												/* @__PURE__ */ jsx(TableHead, {
+													className: "text-right",
+													children: labels.tableRange
+												}),
+												/* @__PURE__ */ jsx(TableHead, {
+													className: "text-right",
+													children: labels.tableDeviation
+												}),
+												showScore && /* @__PURE__ */ jsx(TableHead, {
+													className: "text-right",
+													children: labels.score
+												}),
+												/* @__PURE__ */ jsx(TableHead, { children: labels.tableFlag })
+											] }) }),
+											/* @__PURE__ */ jsx(TableBody, { children: (summary?.rows ?? []).map((row, at) => {
+												const bound = row.dir === "high" ? row.hi : row.dir === "low" ? row.lo : null;
+												const deviation = formatters.formatDeviation(row.d, bound);
+												const directionText = row.dir === "high" ? labels.high : row.dir === "low" ? labels.low : null;
+												return /* @__PURE__ */ jsxs(TableRow, {
+													"data-flagged": row.a ? "" : void 0,
+													children: [
+														/* @__PURE__ */ jsx(TableCell, { children: formatters.formatX(row.x) }),
+														/* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums",
+															children: formatters.formatValue(row.y)
+														}),
+														(summary?.hasExpected ?? false) && /* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums",
+															children: formatters.formatValue(row.ex)
+														}),
+														/* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums",
+															children: formatters.formatRange(row.lo, row.hi)
+														}),
+														/* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums",
+															children: deviation ?? "—"
+														}),
+														showScore && /* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums",
+															children: formatters.formatScore(row.sc) ?? "—"
+														}),
+														/* @__PURE__ */ jsx(TableCell, { children: row.a ? /* @__PURE__ */ jsxs("span", {
+															className: "inline-flex items-center gap-1.5",
+															children: [/* @__PURE__ */ jsx(FlagGlyph, {
+																direction: row.dir,
+																className: "size-2.5 shrink-0",
+																style: { color: row.c }
+															}), directionText ?? labels.flagKey]
+														}) : /* @__PURE__ */ jsx("span", {
+															className: "text-muted-foreground",
+															children: labels.inRange
+														}) })
+													]
+												}, at);
+											}) })
+										]
+									})
+								})]
+							})]
+						}),
+						action
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: descriptionId,
+				className: "sr-only",
+				children: cardDescription
+			}),
+			/* @__PURE__ */ jsx("p", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				"data-part": "announcement",
+				children: announcement
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "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-start justify-between gap-2",
+								style: { minHeight: headlineMinHeight },
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex w-2/5 flex-col gap-1",
+									children: [/* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-full",
+										style: { height: sizes.valueLinePx }
+									}), /* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-3/4",
+										style: { height: sizes.captionLinePx }
+									})]
+								}), /* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "w-24 max-w-1/3",
+									style: { height: sizes.verdictLinePx }
+								})]
+							}),
+							/* @__PURE__ */ jsx(Skeleton, {
+								variant: "rounded",
+								className: "w-full",
+								style: { height: plotHeight }
+							}),
+							keys && /* @__PURE__ */ jsx("div", {
+								className: "flex flex-wrap gap-2",
+								children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "w-20",
+									style: { height: sizes.keyLinePx }
+								}, index))
+							}),
+							episodes && /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-1",
+								style: { minHeight: episodesMinHeight },
+								children: [/* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "w-24",
+									style: { height: sizes.captionLinePx }
+								}), Array.from({ length: episodeSlots }, (_, index) => /* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "w-full",
+									style: { height: sizes.episodeRowPx - 4 }
+								}, index))]
+							}),
+							reserveInsight && /* @__PURE__ */ jsxs("div", {
+								className: "flex items-start gap-2",
+								children: [/* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "size-4 shrink-0"
+								}), /* @__PURE__ */ jsx("div", {
+									className: "flex min-w-0 flex-1 flex-col justify-center gap-1",
+									children: Array.from({ length: INSIGHT_LINES }, (_, index) => /* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: index === 3 ? "w-2/3" : "w-full",
+										style: { height: 16 }
+									}, index))
+								})]
+							})
+						]
+					}),
+					state === "error" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "server-error",
+						scope: "inline",
+						title: labels.error,
+						description: false,
+						action: onRetry ? /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							onClick: onRetry,
+							children: labels.retry
+						}) : void 0,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					state === "empty" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "empty",
+						scope: "inline",
+						title: labels.noData,
+						description: false,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					state === "no-match" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "no-results",
+						scope: "inline",
+						title: labels.noMatch,
+						description: false,
+						action: onClearFilters ? /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: onClearFilters,
+							children: labels.clearFilters
+						}) : void 0,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					showContent && /* @__PURE__ */ jsxs("div", {
+						className: cn("flex min-w-0 flex-col", sizes.gap),
+						children: [
+							headline !== "none" && /* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 items-start justify-between gap-2",
+								style: { minHeight: headlineMinHeight },
+								"data-part": "headline",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex min-w-0 flex-col",
+									"data-part": "value",
+									children: [/* @__PURE__ */ jsxs("span", {
+										className: "flex min-w-0 flex-wrap items-baseline gap-x-1.5",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: cn(valueClasses, sizes.value, "min-w-0 wrap-break-word", headlineClasses),
+											children: headlineValue
+										}), headline === "latest" && unit != null && /* @__PURE__ */ jsx("span", {
+											className: cn("font-sans text-muted-foreground", sizes.unit),
+											children: unit
+										})]
+									}), headlineCaption && /* @__PURE__ */ jsx("span", {
+										className: cn(captionClasses, "mt-1 min-w-0 wrap-break-word"),
+										children: headlineCaption
+									})]
+								}), /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+									delay: 150,
+									render: /* @__PURE__ */ jsx("p", {
+										tabIndex: 0,
+										role: "group",
+										"aria-label": labels.standingGroup(name),
+										"aria-describedby": standingExplanation ? standingId : void 0,
+										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": "verdict"
+									}),
+									children: [standingExplanation && /* @__PURE__ */ jsx("span", {
+										id: standingId,
+										className: "sr-only",
+										children: standingText
+									}), /* @__PURE__ */ jsxs(Badge, {
+										variant: verdictBadgeVariant[standing.verdict],
+										appearance: "soft",
+										size: sizes.badge,
+										"data-verdict": standing.verdict,
+										children: [/* @__PURE__ */ jsx(VerdictGlyph, { verdict: standing.verdict }), labels.verdicts[standing.verdict]]
+									})]
+								}), standingExplanation && /* @__PURE__ */ jsx(TooltipPopup, {
+									arrow: false,
+									side: "bottom",
+									align: "end",
+									sideOffset: 8,
+									collisionPadding: 8,
+									container: popoverContainer,
+									className: "text-left",
+									"data-part": "verdict-tooltip",
+									children: /* @__PURE__ */ jsx(ArcTooltipRows, { rows: standingRows })
+								})] })]
+							}),
+							/* @__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
+							}),
+							keys && /* @__PURE__ */ jsx(HorizontalScroll, {
+								fade: true,
+								className: cn("min-w-0 font-sans text-muted-foreground", sizes.body),
+								style: { height: sizes.keyLinePx },
+								"data-part": "keys",
+								children: /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-x-3 whitespace-nowrap",
+									children: [
+										/* @__PURE__ */ jsx(AnomalyKey, {
+											variant: "series",
+											label: labels.seriesKey,
+											color: tokens?.emphasis
+										}),
+										showBand && /* @__PURE__ */ jsx(AnomalyKey, {
+											variant: "band",
+											label: labels.bandKey,
+											color: tokens?.context
+										}),
+										showExpected && /* @__PURE__ */ jsx(AnomalyKey, {
+											variant: "expected",
+											label: labels.expectedKey,
+											color: tokens?.context
+										}),
+										(summary?.flagged ?? 0) > 0 && /* @__PURE__ */ jsx(AnomalyKey, {
+											variant: "flag",
+											label: labels.flagKey,
+											color: (summary?.current ?? summary?.worst)?.color
+										})
+									]
+								})
+							}),
+							episodes && /* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-col gap-1",
+								style: { minHeight: episodesMinHeight },
+								"data-part": "episodes",
+								children: [/* @__PURE__ */ jsx("p", {
+									id: episodesId,
+									className: cn(captionClasses, "font-medium"),
+									children: labels.episodes
+								}), shownEpisodes.length > 0 ? /* @__PURE__ */ jsxs("div", {
+									role: "group",
+									"aria-labelledby": episodesId,
+									className: "flex min-w-0 flex-col",
+									children: [shownEpisodes.map(episodeRow), overflow > 0 && /* @__PURE__ */ jsx("p", {
+										className: cn("flex items-center px-1.5 font-sans text-muted-foreground", sizes.body),
+										style: { height: sizes.episodeRowPx },
+										"data-part": "episode-overflow",
+										children: labels.moreEpisodes(overflow)
+									})]
+								}) : /* @__PURE__ */ jsx("p", {
+									className: cn(captionClasses, "flex items-center px-1.5"),
+									style: { height: sizes.episodeRowPx },
+									children: labels.noEpisodes
+								})]
+							}),
+							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
+		]
+	});
+});
+AnomalyCard.displayName = "AnomalyCard";
+//#endregion
+export { AnomalyCard };