@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/StatusCard/StatusCard.js

@@ -0,0 +1,989 @@
+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 { STATUS_CELL_GAP_RATIO, STATUS_TABLE_DATASET, STATUS_WINDOW_DATASET, buildStatusTimelineSpec } from "./StatusCard.chart.js";
+import { STATUS_LEVELS, buildStatusChartDescription, buildStatusDescription, buildStatusDetailRows, buildStatusExplanation, buildStatusIncidentRows, buildStatusStrip, createStatusFormatters, deriveStatusRun, deriveStatusState, describeResolution, formatStripCell, resolveStatusHold, resolveStatusLabels, statusLevelBreakdown, statusStepKey } from "./StatusCard.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, Tooltip, TooltipPopup, TooltipTrigger, cn } from "@arcfusionz/arc-primitive-ui";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/StatusCard/StatusCard.tsx
+const sizeStyles = {
+	sm: {
+		padding: "sm",
+		gap: "gap-2",
+		gapPx: 8,
+		label: "text-xs",
+		value: "text-xl leading-7",
+		valueLinePx: 28,
+		subLinePx: 20,
+		glyph: "size-4",
+		body: "text-xs",
+		badge: "sm",
+		deltaLinePx: 20,
+		comparisonLinePx: 16,
+		chip: "sm",
+		stripHeight: 16,
+		captionLinePx: 16,
+		keyLinePx: 16
+	},
+	md: {
+		padding: "md",
+		gap: "gap-2",
+		gapPx: 8,
+		label: "text-sm",
+		value: "text-2xl leading-8",
+		valueLinePx: 32,
+		subLinePx: 20,
+		glyph: "size-5",
+		body: "text-sm",
+		badge: "md",
+		deltaLinePx: 24,
+		comparisonLinePx: 20,
+		chip: "sm",
+		stripHeight: 22,
+		captionLinePx: 18,
+		keyLinePx: 18
+	},
+	lg: {
+		padding: "lg",
+		gap: "gap-2",
+		gapPx: 8,
+		label: "text-sm",
+		value: "text-3xl leading-9",
+		valueLinePx: 36,
+		subLinePx: 24,
+		glyph: "size-6",
+		body: "text-sm",
+		badge: "lg",
+		deltaLinePx: 28,
+		comparisonLinePx: 20,
+		chip: "md",
+		stripHeight: 28,
+		captionLinePx: 20,
+		keyLinePx: 18
+	}
+};
+const labelClasses = "min-w-0 font-sans font-medium text-muted-foreground";
+const valueClasses = "font-heading font-semibold tracking-tight text-foreground";
+const HEADLINE_GAP_PX = 4;
+const STRIP_CAPTION_GAP_PX = 4;
+const KEY_LINES = 2;
+const captionClasses = "font-sans text-xs text-muted-foreground";
+/**
+* The headline state word wears its level's TEXT step — the same 700 steps
+* `text-success-700` / `text-error-700` resolve to, which clear 4.5:1 as body
+* text and far more at headline size. It is the one place a status hue reaches
+* type, and it is allowed because the word IS the status: an operator scanning
+* a wall must find the broken tile without reading it. Shape carries the same
+* information beside it (`LevelGlyph`), so the colour is never load-bearing.
+*/
+const levelTextClasses = {
+	operational: "text-success-700",
+	degraded: "text-warning-700",
+	down: "text-error-700",
+	maintenance: "text-primary-700",
+	unknown: "text-muted-foreground"
+};
+const levelBadgeVariant = {
+	operational: "success",
+	degraded: "warning",
+	down: "destructive",
+	maintenance: "primary",
+	unknown: "neutral"
+};
+const polarityBadgeVariant = {
+	positive: "success",
+	negative: "destructive",
+	neutral: "neutral"
+};
+const toneTextClasses = {
+	positive: "text-chart-positive",
+	negative: "text-chart-negative",
+	neutral: "text-foreground"
+};
+const deltaStackClasses = "ms-auto flex min-w-0 max-w-[56%] shrink-0 flex-col items-end gap-1 rounded-md text-right font-sans focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+const headlineValueClasses = "flex min-w-0 flex-1 flex-col items-start gap-1";
+const headerControlClasses = "size-6 min-w-0 text-muted-foreground hover:text-foreground";
+const tileStateClasses = "w-full max-w-none gap-1.5 px-2 py-1 [--artwork-box:2rem]";
+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 level's own shape, beside its word wherever the word appears. Five
+* distinct silhouettes, so a reader who cannot separate the hues still reads
+* five different states (WCAG 1.4.1).
+*/
+function LevelGlyph({ level, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.25,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			level === "operational" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "9"
+			}), /* @__PURE__ */ jsx("path", { d: "m8 12 2.5 2.5L16 9.5" })] }),
+			level === "degraded" && /* @__PURE__ */ jsx("path", { d: "M12 3.5 2.5 20.5h19L12 3.5ZM12 10v4.5m0 3h.01" }),
+			level === "down" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", { d: "M8.4 2.5h7.2l5.9 5.9v7.2l-5.9 5.9H8.4L2.5 15.6V8.4L8.4 2.5Z" }), /* @__PURE__ */ jsx("path", { d: "m9 9 6 6m0-6-6 6" })] }),
+			level === "maintenance" && /* @__PURE__ */ jsx("path", { d: "M14.5 6.5a3.5 3.5 0 1 0 4.6 4.6l2.4 2.4a6 6 0 0 1-8.4 8.4L4.5 13.4a6 6 0 0 1 8.4-8.4l1.6 1.5Z" }),
+			level === "unknown" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "9"
+			}), /* @__PURE__ */ jsx("path", { d: "M9.5 9.5a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.8-.9 1.5v.4m0 3h.01" })] })
+		]
+	});
+}
+/**
+* The level's key mark — a compact shape in the level's own chart hue, used in
+* the key line, the tooltip chip and the incident table, so a cell's colour is
+* always tied to a shape and a word somewhere the reader can reach.
+*/
+function StatusKey({ level, label, color, className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex items-center gap-1.5", className),
+		children: [/* @__PURE__ */ jsxs("svg", {
+			width: "10",
+			height: "10",
+			viewBox: "0 0 10 10",
+			"aria-hidden": "true",
+			className: "shrink-0",
+			style: { color },
+			children: [
+				level === "operational" && /* @__PURE__ */ jsx("circle", {
+					cx: "5",
+					cy: "5",
+					r: "4.5",
+					fill: "currentColor"
+				}),
+				level === "degraded" && /* @__PURE__ */ jsx("path", {
+					d: "M5 0.5 9.7 9.2H0.3z",
+					fill: "currentColor"
+				}),
+				level === "down" && /* @__PURE__ */ jsx("rect", {
+					x: "0.5",
+					y: "0.5",
+					width: "9",
+					height: "9",
+					rx: "1.5",
+					fill: "currentColor"
+				}),
+				level === "maintenance" && /* @__PURE__ */ jsx("path", {
+					d: "M5 0.2 9.8 5 5 9.8 0.2 5z",
+					fill: "currentColor"
+				}),
+				level === "unknown" && /* @__PURE__ */ jsx("rect", {
+					x: "1.2",
+					y: "1.2",
+					width: "7.6",
+					height: "7.6",
+					rx: "1.5",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.8"
+				})
+			]
+		}), label]
+	});
+}
+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 operational status tile for dashboard grids and status pages: the state
+* right now as a word, how long it has held, availability over the window
+* against its target, the incidents behind that number, and the error budget
+* they leave — on a state timeline (each cell painted the worst level inside
+* it, so no outage can vanish) with every loading, empty, error and stale
+* state, layout-stable, with a generated text equivalent and both a details
+* table and an incident list in an info popover.
+*/
+const StatusCard = forwardRef(({ label, name: nameProp, hint, level, since, history, window: windowProp, uptimeTarget, uptimeMode = "monitored", uptimeFormat = "percent:2", formatUptime, headline = "level", resolution = "auto", axis = false, legend = false, insight, status = "ready", filtered = false, stale = false, updatedAt, updatedAtFormat = "datetime", 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(() => resolveStatusLabels(labelOverrides), [labelOverrides]);
+	const sizes = sizeStyles[size];
+	const plotHeight = sizes.stripHeight + (axis ? 18 : 0);
+	const name = nameProp ?? (typeof label === "string" ? label : "");
+	const id = useId();
+	const headingId = `${id}-label`;
+	const descriptionId = `${id}-description`;
+	const hintId = `${id}-hint`;
+	const tableId = `${id}-table`;
+	const explanationId = `${id}-explanation`;
+	const [rootRef, setRootRef] = useMergedRef(forwardedRef);
+	const plotRef = useRef(null);
+	const [tableOpen, setTableOpen] = useState(defaultTableOpen);
+	const [popoverContainer, setPopoverContainer] = useState(null);
+	const asOfDate = updatedAt == null ? null : updatedAt instanceof Date ? updatedAt : new Date(updatedAt);
+	const asOfValid = asOfDate != null && !Number.isNaN(asOfDate.getTime());
+	const asOfMs = asOfValid ? asOfDate.getTime() : null;
+	const asOfText = asOfValid ? typeof updatedAtFormat === "function" ? updatedAtFormat(asOfDate) : formatDate(asOfDate, {
+		granularity: updatedAtFormat,
+		locale,
+		timeZone
+	}) : void 0;
+	const formatters = useMemo(() => createStatusFormatters({
+		uptimeFormat,
+		formatUptimeValue: formatUptime,
+		units: labels.durationUnits,
+		zeroDuration: labels.zeroDuration,
+		locale,
+		timeZone
+	}), [
+		uptimeFormat,
+		formatUptime,
+		labels.durationUnits,
+		labels.zeroDuration,
+		locale,
+		timeZone
+	]);
+	const windowStart = windowProp?.start;
+	const windowEnd = windowProp?.end;
+	const run = useMemo(() => deriveStatusRun({
+		level,
+		since,
+		history,
+		window: windowStart != null && windowEnd != null ? {
+			start: windowStart,
+			end: windowEnd
+		} : void 0,
+		asOf: asOfMs,
+		uptimeTarget,
+		mode: uptimeMode,
+		timeZone
+	}), [
+		level,
+		since,
+		history,
+		windowStart,
+		windowEnd,
+		asOfMs,
+		uptimeTarget,
+		uptimeMode,
+		timeZone
+	]);
+	const reported = run?.segments.some((segment) => !segment.gap) ?? false;
+	const currentLevel = level ?? (reported ? run?.level ?? null : null);
+	const hold = useMemo(() => resolveStatusHold({
+		run,
+		since,
+		asOf: asOfMs,
+		timeZone
+	}), [
+		run,
+		since,
+		asOfMs,
+		timeZone
+	]);
+	const hasLevel = currentLevel != null;
+	const state = deriveStatusState({
+		status,
+		hasLevel,
+		hasHistory: run != null && reported,
+		hasData: hasLevel,
+		filtered
+	});
+	const showContent = state === "ready" || state === "refreshing" || state === "insufficient";
+	const noHistory = showContent && run == null;
+	const explanationRows = useMemo(() => run ? buildStatusExplanation({
+		run,
+		formatters,
+		labels
+	}) : [], [
+		run,
+		formatters,
+		labels
+	]);
+	const explanation = explanationRows.map(([key, entry]) => `${key}: ${entry}`).join(". ");
+	const incidentRows = useMemo(() => run ? buildStatusIncidentRows({
+		run,
+		formatters,
+		labels
+	}) : [], [
+		run,
+		formatters,
+		labels
+	]);
+	const tokens = useChartTokens(rootRef);
+	const plotWidth = usePlotWidth(plotRef, run != null);
+	const strip = useMemo(() => run && tokens ? buildStatusStrip({
+		run,
+		resolution,
+		tokens,
+		plotWidth,
+		minCellPx: 6,
+		gapRatio: STATUS_CELL_GAP_RATIO,
+		gapMinPx: 1,
+		gapMaxPx: 4,
+		timeZone
+	}) : null, [
+		run,
+		resolution,
+		tokens,
+		plotWidth,
+		timeZone
+	]);
+	const detailRows = useMemo(() => run ? buildStatusDetailRows({
+		run,
+		strip,
+		formatters,
+		labels
+	}) : [], [
+		run,
+		strip,
+		formatters,
+		labels
+	]);
+	const resolutionText = strip ? describeResolution(strip, formatters, labels) : null;
+	const breakdown = useMemo(() => run ? statusLevelBreakdown(run, formatters, labels) : [], [
+		run,
+		formatters,
+		labels
+	]);
+	const cardDescription = description ?? buildStatusDescription({
+		name,
+		state,
+		run,
+		level: currentLevel,
+		hold,
+		formatters,
+		labels,
+		asOfText
+	});
+	const tooltipContent = useCallback(({ item }) => {
+		const datum = item.datum;
+		if (!datum || datum.level == null || !strip) return null;
+		const present = STATUS_LEVELS.filter((entry) => (datum.durations?.[entry] ?? 0) > 0);
+		const rows = (present.length > 0 ? present : [datum.level]).map((entry) => [/* @__PURE__ */ jsx(StatusKey, {
+			level: entry,
+			label: labels.levelNames[entry],
+			color: tokens?.status[entry]
+		}, entry), formatters.formatDuration(datum.durations?.[entry] ?? datum.to - datum.from)]);
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: formatStripCell(datum, strip, formatters)
+				}),
+				/* @__PURE__ */ jsx(ArcTooltipRows, { rows }),
+				datum.label && /* @__PURE__ */ jsx("span", {
+					className: "max-w-56 whitespace-normal text-background/70",
+					children: datum.label
+				})
+			]
+		});
+	}, [
+		strip,
+		labels,
+		formatters,
+		tokens
+	]);
+	const { handler: tooltipHandler, tooltip } = useArcTooltipHandler({ content: tooltipContent });
+	const embedOptions = useMemo(() => arcEmbedOptions({ tooltip: tooltipHandler }), [tooltipHandler]);
+	const axisTimeFormat = strip ? [
+		strip.axisGranularity,
+		locale ?? "",
+		timeZone ?? ""
+	].join("@").replace(/@+$/, "") : "day-short";
+	const spec = useMemo(() => {
+		if (!tokens) return null;
+		const built = buildStatusTimelineSpec({
+			height: plotHeight,
+			axis,
+			tooltip: true,
+			axisTimeFormat,
+			locale,
+			timeZone
+		}, tokens);
+		return patchSpec ? patchSpec(built) : built;
+	}, [
+		tokens,
+		plotHeight,
+		axis,
+		axisTimeFormat,
+		locale,
+		timeZone,
+		patchSpec
+	]);
+	const datasets = useMemo(() => {
+		if (!run || !strip) return void 0;
+		return {
+			[STATUS_TABLE_DATASET]: strip.rows,
+			[STATUS_WINDOW_DATASET]: [{
+				start: run.window.start,
+				end: run.window.end
+			}]
+		};
+	}, [run, strip]);
+	const chartDescription = run && strip ? buildStatusChartDescription({
+		name,
+		run,
+		strip,
+		formatters,
+		labels
+	}) : void 0;
+	const verdict = run?.sla?.verdict ?? null;
+	const showChip = headline === "uptime" ? currentLevel != null : hold != null;
+	const hasBadge = headline === "uptime" ? verdict != null : run != null;
+	const reserveInsight = insight != null && insight !== false;
+	const reserveKey = legend;
+	const headlineMinHeight = Math.max(sizes.valueLinePx + (HEADLINE_GAP_PX + sizes.subLinePx), sizes.deltaLinePx + 4 + sizes.comparisonLinePx);
+	const bodyMinHeight = headlineMinHeight + sizes.gapPx + plotHeight + STRIP_CAPTION_GAP_PX + sizes.captionLinePx + (reserveKey ? STRIP_CAPTION_GAP_PX + sizes.keyLinePx * KEY_LINES : 0) + (reserveInsight ? sizes.gapPx + sizes.comparisonLinePx : 0);
+	const HeadingTag = `h${titleLevel}`;
+	const busy = state === "loading" || state === "refreshing";
+	const uptimeText = formatters.formatUptime(run?.uptime);
+	const bigIsLevel = headline === "level";
+	const holdText = hold ? hold.atLeast ? labels.heldAtLeast(formatters.formatDuration(hold.duration)) : labels.heldFor(formatters.formatDuration(hold.duration)) : null;
+	const overBudget = run?.sla != null && run.sla.remaining <= 0 && run.sla.used > run.sla.allowed;
+	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-headline": headline,
+		"data-mode": uptimeMode,
+		"data-level": showContent && currentLevel ? currentLevel : void 0,
+		"data-worst": showContent && run ? run.worst : void 0,
+		"data-verdict": showContent && verdict ? verdict : void 0,
+		"data-polarity": showContent && run?.sla ? run.polarity : void 0,
+		"data-resolution": showContent && strip ? statusStepKey(strip.step) : void 0,
+		"data-empty": state === "empty" || state === "no-match" ? "" : void 0,
+		"data-stale": stale ? "" : void 0,
+		"data-insufficient": noHistory ? "" : 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
+						}),
+						showContent && run && /* @__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-80",
+								"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: "mb-3 max-h-[min(14rem,calc(var(--available-height)-12rem))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+										"data-part": "table",
+										children: /* @__PURE__ */ jsxs(Table, {
+											size: "sm",
+											stickyHeader: true,
+											hoverable: false,
+											children: [
+												/* @__PURE__ */ jsx(TableCaption, {
+													side: "top",
+													className: "sr-only",
+													children: labels.tableCaption(name)
+												}),
+												/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [/* @__PURE__ */ jsx(TableHead, { children: labels.tableItem }), /* @__PURE__ */ jsx(TableHead, {
+													className: "text-right",
+													children: labels.tableValue
+												})] }) }),
+												/* @__PURE__ */ jsx(TableBody, { children: detailRows.map((row) => /* @__PURE__ */ jsxs(TableRow, {
+													"data-row": row.key,
+													children: [/* @__PURE__ */ jsx(TableCell, { children: row.label }), /* @__PURE__ */ jsx(TableCell, {
+														className: cn("text-right tabular-nums", row.tone && row.tone !== "neutral" && cn("font-medium", toneTextClasses[row.tone])),
+														children: row.value
+													})]
+												}, row.key)) })
+											]
+										})
+									}),
+									incidentRows.length > 0 ? /* @__PURE__ */ jsx(TableContainer, {
+										variant: "plain",
+										tabIndex: 0,
+										role: "region",
+										"aria-label": labels.incidentTableCaption(name),
+										className: "max-h-[min(12rem,calc(var(--available-height)-16rem))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+										"data-part": "incident-table",
+										children: /* @__PURE__ */ jsxs(Table, {
+											size: "sm",
+											stickyHeader: true,
+											hoverable: false,
+											children: [
+												/* @__PURE__ */ jsx(TableCaption, {
+													side: "top",
+													className: "sr-only",
+													children: labels.incidentTableCaption(name)
+												}),
+												/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+													/* @__PURE__ */ jsx(TableHead, { children: labels.incidentTableWhen }),
+													/* @__PURE__ */ jsx(TableHead, { children: labels.incidentTableLevel }),
+													/* @__PURE__ */ jsx(TableHead, {
+														className: "text-right",
+														children: labels.incidentTableFor
+													})
+												] }) }),
+												/* @__PURE__ */ jsx(TableBody, { children: incidentRows.map((row) => /* @__PURE__ */ jsxs(TableRow, {
+													"data-row": row.key,
+													"data-level": row.level,
+													children: [
+														/* @__PURE__ */ jsxs(TableCell, { children: [/* @__PURE__ */ jsx("span", {
+															className: "tabular-nums",
+															children: row.when
+														}), row.label && /* @__PURE__ */ jsx("span", {
+															className: "block text-muted-foreground text-xs",
+															children: row.label
+														})] }),
+														/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(StatusKey, {
+															level: row.level,
+															label: row.levelName,
+															color: tokens?.status[row.level],
+															className: "whitespace-nowrap"
+														}) }),
+														/* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums",
+															children: row.duration
+														})
+													]
+												}, row.key)) })
+											]
+										})
+									}) : /* @__PURE__ */ jsx("p", {
+										className: captionClasses,
+										children: labels.noIncidents
+									})
+								]
+							})]
+						}),
+						action
+					]
+				})]
+			}),
+			/* @__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: [
+					state === "loading" && /* @__PURE__ */ jsxs(SkeletonGroup, {
+						className: "flex flex-col",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: cn("flex min-w-0 items-start justify-between gap-2", "mb-2"),
+								style: { minHeight: headlineMinHeight },
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex w-3/5 flex-col gap-1",
+									children: [/* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-2/3",
+										style: { height: sizes.valueLinePx }
+									}), /* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-24 max-w-full",
+										style: { height: sizes.subLinePx }
+									})]
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "flex w-2/5 flex-col items-end gap-1",
+									children: [/* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-20 max-w-full",
+										style: { height: sizes.deltaLinePx }
+									}), /* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-full",
+										style: { height: sizes.comparisonLinePx }
+									})]
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-1",
+								children: [
+									/* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-full",
+										style: { height: plotHeight }
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center justify-between",
+										style: { minHeight: sizes.captionLinePx },
+										children: [
+											/* @__PURE__ */ jsx(Skeleton, {
+												variant: "rounded",
+												className: "w-12",
+												style: { height: sizes.captionLinePx - 4 }
+											}),
+											/* @__PURE__ */ jsx(Skeleton, {
+												variant: "rounded",
+												className: "w-20",
+												style: { height: sizes.captionLinePx - 4 }
+											}),
+											/* @__PURE__ */ jsx(Skeleton, {
+												variant: "rounded",
+												className: "w-12",
+												style: { height: sizes.captionLinePx - 4 }
+											})
+										]
+									}),
+									legend && /* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-2/3",
+										style: { height: sizes.keyLinePx * KEY_LINES }
+									})
+								]
+							}),
+							reserveInsight && /* @__PURE__ */ jsxs("div", {
+								className: "mt-2 flex items-start gap-2",
+								children: [/* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "size-4 shrink-0"
+								}), /* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "w-full",
+									style: { height: sizes.comparisonLinePx }
+								})]
+							})
+						]
+					}),
+					state === "error" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "server-error",
+						scope: "inline",
+						title: labels.error,
+						description: false,
+						action: onRetry ? /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							onClick: onRetry,
+							children: labels.retry
+						}) : void 0,
+						className: cn(tileStateClasses, "my-auto")
+					}),
+					state === "empty" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "empty",
+						scope: "inline",
+						title: labels.noData,
+						description: false,
+						className: cn(tileStateClasses, "my-auto")
+					}),
+					state === "no-match" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "no-results",
+						scope: "inline",
+						title: labels.noMatch,
+						description: false,
+						action: onClearFilters ? /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: onClearFilters,
+							children: labels.clearFilters
+						}) : void 0,
+						className: cn(tileStateClasses, "my-auto")
+					}),
+					showContent && currentLevel && /* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-col",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: cn("flex min-w-0 items-start justify-between gap-2", showChip && "mb-2"),
+								style: { minHeight: headlineMinHeight },
+								"data-part": "headline",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: headlineValueClasses,
+									"data-part": "value",
+									children: [bigIsLevel ? /* @__PURE__ */ jsxs("span", {
+										className: "flex min-w-0 items-center gap-2",
+										role: "status",
+										"aria-label": `${labels.levelGroup(name)}: ${labels.levelNames[currentLevel]}`,
+										"data-part": "level",
+										"data-level": currentLevel,
+										children: [/* @__PURE__ */ jsx(LevelGlyph, {
+											level: currentLevel,
+											className: cn("shrink-0", sizes.glyph, levelTextClasses[currentLevel])
+										}), /* @__PURE__ */ jsx("span", {
+											className: cn(valueClasses, sizes.value, levelTextClasses[currentLevel], "min-w-0 wrap-break-word"),
+											children: labels.levelNames[currentLevel]
+										})]
+									}) : /* @__PURE__ */ jsx("span", {
+										className: cn(valueClasses, sizes.value, "min-w-0 tabular-nums wrap-break-word"),
+										"data-part": "uptime",
+										children: uptimeText
+									}), showChip && (bigIsLevel ? /* @__PURE__ */ jsx("span", {
+										className: "min-w-0 max-w-full truncate text-muted-foreground text-xs tabular-nums",
+										"data-part": "hold",
+										children: holdText
+									}) : /* @__PURE__ */ jsxs(Badge, {
+										variant: levelBadgeVariant[currentLevel],
+										appearance: "soft",
+										size: sizes.chip,
+										role: "status",
+										"aria-label": `${labels.levelGroup(name)}: ${labels.levelNames[currentLevel]}`,
+										"data-part": "level",
+										"data-level": currentLevel,
+										children: [/* @__PURE__ */ jsx(LevelGlyph, { level: currentLevel }), labels.levelNames[currentLevel]]
+									}))]
+								}), hasBadge && run && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+									delay: 150,
+									render: /* @__PURE__ */ jsx("p", {
+										tabIndex: 0,
+										role: "group",
+										"aria-label": labels.uptimeGroup(name),
+										"aria-describedby": explanationId,
+										className: cn(deltaStackClasses, sizes.body),
+										"data-part": "delta",
+										"data-kind": bigIsLevel ? "uptime" : "verdict"
+									}),
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											id: explanationId,
+											className: "sr-only",
+											children: explanation
+										}),
+										/* @__PURE__ */ jsx(Badge, {
+											variant: polarityBadgeVariant[run.sla ? run.polarity : "neutral"],
+											appearance: "soft",
+											size: sizes.badge,
+											className: "tabular-nums",
+											children: bigIsLevel ? uptimeText : verdict ? labels.verdictNames[verdict] : uptimeText
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "max-w-full truncate text-muted-foreground text-xs",
+											...verdict ? {
+												role: "status",
+												"aria-label": `${labels.uptimeGroup(name)}: ${labels.verdictNames[verdict]}`,
+												"data-part": "verdict",
+												"data-verdict": verdict
+											} : {},
+											children: run.sla ? labels.vsTarget(formatters.formatUptime(run.sla.target), run.sla.verdict === "met") : labels.uptimeOver(formatters.formatDuration(run.window.span))
+										})
+									]
+								}), /* @__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: explanationRows })
+								})] })]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-col gap-1",
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										ref: plotRef,
+										className: "relative w-full",
+										style: { height: plotHeight },
+										"data-part": "plot",
+										children: run ? plotWidth > 0 && spec && datasets ? /* @__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"),
+											"data-part": "no-history",
+											children: labels.noHistory
+										})
+									}),
+									run && /* @__PURE__ */ jsxs("div", {
+										className: "flex min-w-0 items-baseline justify-between gap-2 text-muted-foreground text-xs tabular-nums",
+										style: { minHeight: sizes.captionLinePx },
+										"data-part": "caption",
+										children: [
+											/* @__PURE__ */ jsx("span", {
+												className: "shrink-0",
+												"data-part": "window-start",
+												children: formatters.formatInstant(run.window.start, strip?.axisGranularity ?? "day-short")
+											}),
+											/* @__PURE__ */ jsx("span", {
+												className: cn("min-w-0 truncate text-center", overBudget && "font-medium text-chart-negative"),
+												"data-part": "summary",
+												children: run.incidents.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+													"data-part": "incidents",
+													children: labels.incidents(String(run.incidents.length), run.incidents.length)
+												}), size !== "sm" && run.downtime > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [" · ", /* @__PURE__ */ jsx("span", {
+													"data-part": "downtime",
+													children: labels.downFor(formatters.formatDuration(run.downtime))
+												})] })] }) : labels.noIncidents
+											}),
+											/* @__PURE__ */ jsx("span", {
+												className: "shrink-0",
+												"data-part": "window-end",
+												children: formatters.formatInstant(run.window.end, strip?.axisGranularity ?? "day-short")
+											})
+										]
+									}),
+									reserveKey && /* @__PURE__ */ jsxs("div", {
+										className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-0.5 text-muted-foreground text-xs",
+										style: { minHeight: sizes.keyLinePx * KEY_LINES },
+										"data-part": "chart-legend",
+										children: [breakdown.map((entry) => /* @__PURE__ */ jsx(StatusKey, {
+											level: entry.level,
+											color: tokens?.status[entry.level],
+											label: entry.name
+										}, entry.level)), resolutionText && /* @__PURE__ */ jsx("span", {
+											"data-part": "resolution",
+											children: resolutionText
+										})]
+									})
+								]
+							}),
+							reserveInsight && /* @__PURE__ */ jsxs("div", {
+								className: cn("mt-2 flex items-start gap-2 font-sans text-foreground", sizes.body),
+								"data-part": "insight",
+								children: [/* @__PURE__ */ jsx(AILoader, {
+									size: "sm",
+									state: "default",
+									label: labels.insightMark,
+									className: cn("shrink-0", size === "sm" ? "" : "mt-0.5")
+								}), /* @__PURE__ */ jsx("p", {
+									className: "min-w-0 flex-1 [&_strong]:font-semibold [&_strong]:text-foreground text-xs leading-[1.8]",
+									children: insight
+								})]
+							})
+						]
+					}),
+					state === "refreshing" && /* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						className: "absolute -inset-1 rounded-md bg-veil"
+					})
+				]
+			}),
+			asOfValid && asOfDate && /* @__PURE__ */ jsx("p", {
+				className: cn(captionClasses, "mt-1 text-right"),
+				"data-part": "footer",
+				children: /* @__PURE__ */ jsx("span", {
+					"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
+		]
+	});
+});
+StatusCard.displayName = "StatusCard";
+//#endregion
+export { StatusCard };