@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/TargetCard/TargetCard.js

@@ -0,0 +1,910 @@
+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 { TARGET_ACTUAL_DATASET, TARGET_BOUNDS_DATASET, TARGET_MARKERS_DATASET, TARGET_PROJECTION_DATASET, buildTargetBulletSpec } from "./TargetCard.chart.js";
+import { buildTargetChartDescription, buildTargetDescription, buildTargetDetailRows, buildTargetExplanation, createTargetFormatters, deriveDays, deriveElapsed, deriveTargetProgress, deriveTargetState, formatPeriod, formatValuePair, paceWord, resolvePeriod, resolveTargetLabels } from "./TargetCard.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/TargetCard/TargetCard.tsx
+const sizeStyles = {
+	sm: {
+		padding: "sm",
+		gap: "gap-2",
+		gapPx: 8,
+		label: "text-xs",
+		value: "text-2xl leading-8",
+		valueLinePx: 32,
+		subLinePx: 20,
+		unit: "text-xs",
+		body: "text-xs",
+		badge: "sm",
+		deltaLinePx: 20,
+		comparisonLinePx: 16,
+		barHeight: 8,
+		plotHeight: 20,
+		chip: "sm",
+		statusLinePx: 20
+	},
+	md: {
+		padding: "md",
+		gap: "gap-2",
+		gapPx: 8,
+		label: "text-sm",
+		value: "text-3xl leading-9",
+		valueLinePx: 36,
+		subLinePx: 20,
+		unit: "text-sm",
+		body: "text-sm",
+		badge: "md",
+		deltaLinePx: 24,
+		comparisonLinePx: 20,
+		barHeight: 10,
+		plotHeight: 24,
+		chip: "sm",
+		statusLinePx: 20
+	},
+	lg: {
+		padding: "lg",
+		gap: "gap-2",
+		gapPx: 8,
+		label: "text-sm",
+		value: "text-4xl leading-10",
+		valueLinePx: 40,
+		subLinePx: 24,
+		unit: "text-base",
+		body: "text-sm",
+		badge: "lg",
+		deltaLinePx: 28,
+		comparisonLinePx: 20,
+		barHeight: 12,
+		plotHeight: 28,
+		chip: "md",
+		statusLinePx: 24
+	}
+};
+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 captionClasses = "font-sans text-xs text-muted-foreground";
+const polarityBadgeVariant = {
+	positive: "success",
+	negative: "destructive",
+	neutral: "neutral"
+};
+const trackBadgeVariant = {
+	achieved: "success",
+	"on-track": "success",
+	"at-risk": "warning",
+	"off-track": "destructive",
+	missed: "destructive"
+};
+const changeTextClasses = {
+	positive: "text-chart-positive",
+	negative: "text-chart-negative",
+	neutral: "text-foreground"
+};
+const deltaStackClasses = "ms-auto flex min-w-0 max-w-1/2 shrink-0 flex-col items-end gap-1 rounded-md text-right font-sans focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+const 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 = "Target";
+function toneHue(tokens, tone) {
+	return tone === "positive" ? tokens.divergingPositive : tone === "negative" ? tokens.divergingNegative : tokens.emphasis;
+}
+/** Match the plot's mark shapes so their meaning never depends on colour alone: the bar, its projected extension, the pace tick and the target tick. */
+function TargetKey({ label, mark, color }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-2",
+		children: [/* @__PURE__ */ jsxs("svg", {
+			width: "24",
+			height: "12",
+			viewBox: "0 0 24 12",
+			fill: "none",
+			"aria-hidden": "true",
+			className: "shrink-0",
+			style: { color },
+			children: [
+				mark === "actual" && /* @__PURE__ */ jsx("rect", {
+					x: "1",
+					y: "2",
+					width: "22",
+					height: "8",
+					rx: "1",
+					fill: "currentColor"
+				}),
+				mark === "projection" && /* @__PURE__ */ jsx("rect", {
+					x: "1",
+					y: "2",
+					width: "22",
+					height: "8",
+					rx: "1",
+					fill: "currentColor",
+					opacity: "0.25"
+				}),
+				mark === "pace" && /* @__PURE__ */ jsx("line", {
+					x1: "12",
+					y1: "0",
+					x2: "12",
+					y2: "12",
+					stroke: "currentColor",
+					strokeWidth: 1.5
+				}),
+				mark === "target" && /* @__PURE__ */ jsx("line", {
+					x1: "12",
+					y1: "0",
+					x2: "12",
+					y2: "12",
+					stroke: "currentColor",
+					strokeWidth: 2.5
+				})
+			]
+		}), label]
+	});
+}
+function InfoIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9"
+		}), /* @__PURE__ */ jsx("path", { d: "M12 11v5M12 8h.01" })]
+	});
+}
+function DeltaGlyph({ direction, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			direction === "up" && /* @__PURE__ */ jsx("path", { d: "M7 17 17 7M7 7h10v10" }),
+			direction === "down" && /* @__PURE__ */ jsx("path", { d: "M7 7 17 17M7 17h10V7" }),
+			direction === "flat" && /* @__PURE__ */ jsx("path", { d: "M5 12h14M13 6l6 6-6 6" })
+		]
+	});
+}
+function TrackGlyph({ track, ...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: [
+			track === "achieved" && /* @__PURE__ */ jsx("path", { d: "m5 12 5 5L20 7" }),
+			track === "missed" && /* @__PURE__ */ jsx("path", { d: "m6 6 12 12M18 6 6 18" }),
+			track === "on-track" && /* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "5",
+				fill: "currentColor",
+				stroke: "none"
+			}),
+			track === "at-risk" && /* @__PURE__ */ jsx("path", { d: "M12 4 3 20h18L12 4Zm0 6v4m0 3h.01" }),
+			track === "off-track" && /* @__PURE__ */ jsx("path", { d: "M12 8v5m0 3h.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z" })
+		]
+	});
+}
+function useMergedRef(forwarded) {
+	const inner = useRef(null);
+	return [inner, useCallback((node) => {
+		inner.current = node;
+		if (typeof forwarded === "function") forwarded(node);
+		else if (forwarded) forwarded.current = node;
+	}, [forwarded])];
+}
+function usePlotWidth(ref, enabled) {
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		if (!enabled) return;
+		const el = ref.current;
+		if (!el) return;
+		let frame = 0;
+		const measure = () => {
+			const next = Math.round(el.getBoundingClientRect().width);
+			setWidth((prev) => prev === next ? prev : next);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(measure);
+		});
+		observer.observe(el);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [ref, enabled]);
+	return width;
+}
+/**
+* A goal-tracking tile for dashboard grids: how much of a target is reached,
+* whether the reading is ahead of or behind the plan at this point in the
+* period, where the run rate lands, and the verdict — on a Few-style bullet
+* graph (the reading as a bar from zero, a pace tick and a target tick, the
+* projection as a lighter extension) with every loading, empty, error and
+* stale state — layout-stable, with a generated text equivalent and a details
+* table in an info popover.
+*/
+const TargetCard = forwardRef(({ label, name: nameProp, hint, value, target, format = "compact", formatValue, unit, goodDirection = "up", headline = "attainment", period, expected, projected, tolerance = .05, deltaMode = "percent", markerLabels = true, 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(() => resolveTargetLabels(labelOverrides), [labelOverrides]);
+	const sizes = sizeStyles[size];
+	const plotHeight = sizes.plotHeight + (markerLabels ? 16 : 0);
+	const name = nameProp ?? (typeof label === "string" ? label : MISSING_NAME);
+	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 periodStart = period?.start;
+	const periodEnd = period?.end;
+	const periodLabel = period?.label;
+	const bounds = useMemo(() => periodStart != null && periodEnd != null ? resolvePeriod({
+		start: periodStart,
+		end: periodEnd,
+		label: periodLabel
+	}, timeZone) : null, [
+		periodStart,
+		periodEnd,
+		periodLabel,
+		timeZone
+	]);
+	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 elapsed = useMemo(() => deriveElapsed(bounds, asOfMs, locale), [
+		bounds,
+		asOfMs,
+		locale
+	]);
+	const days = useMemo(() => deriveDays(bounds, asOfMs, timeZone), [
+		bounds,
+		asOfMs,
+		timeZone
+	]);
+	const formatters = useMemo(() => createTargetFormatters({
+		format,
+		locale,
+		formatValue
+	}), [
+		format,
+		locale,
+		formatValue
+	]);
+	const hasValue = typeof value === "number" && Number.isFinite(value);
+	const state = deriveTargetState({
+		status,
+		hasValue,
+		hasData: hasValue || typeof target === "number" && Number.isFinite(target) && target !== 0,
+		filtered
+	});
+	const showContent = state === "ready" || state === "refreshing";
+	const progress = useMemo(() => deriveTargetProgress({
+		value,
+		target,
+		formatters,
+		tolerance,
+		elapsed,
+		expected,
+		projected,
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		percentagePoints: labels.percentagePoints
+	}), [
+		value,
+		target,
+		formatters,
+		tolerance,
+		elapsed,
+		expected,
+		projected,
+		deltaMode,
+		goodDirection,
+		format,
+		locale,
+		labels.percentagePoints
+	]);
+	const noTarget = showContent && hasValue && progress == null;
+	const periodText = useMemo(() => formatPeriod(bounds, {
+		locale,
+		timeZone,
+		labels
+	}), [
+		bounds,
+		locale,
+		timeZone,
+		labels
+	]);
+	const valueText = formatters.formatValue(hasValue ? value : null);
+	const delta = progress ? progress.pace ? progress.pace.delta : progress.targetDelta : null;
+	const comparisonText = progress ? progress.pace ? paceWord(progress.pace, goodDirection, labels) : labels.vsTarget : "";
+	const explanationRows = progress ? buildTargetExplanation(progress, goodDirection, labels) : [];
+	const explanation = explanationRows.map(([key, entry]) => `${key}: ${entry}`).join(". ");
+	const detailRows = useMemo(() => progress ? buildTargetDetailRows({
+		progress,
+		direction: goodDirection,
+		periodText: periodText ? periodText.labelled ? `${periodText.name} · ${periodText.range}` : periodText.range : null,
+		days,
+		labels
+	}) : [], [
+		progress,
+		goodDirection,
+		periodText,
+		days,
+		labels
+	]);
+	const cardDescription = description ?? buildTargetDescription({
+		name,
+		state,
+		valueText,
+		progress,
+		direction: goodDirection,
+		periodText: periodText && {
+			...periodText,
+			name: periodText.labelled ? periodText.name : periodText.range
+		},
+		asOfText,
+		labels
+	});
+	const tokens = useChartTokens(rootRef);
+	const plotWidth = usePlotWidth(plotRef, showContent && progress != null);
+	const barColor = tokens && progress ? toneHue(tokens, progress.tone) : void 0;
+	const tooltipContent = useCallback(({ item }) => {
+		if (!progress) return null;
+		const datum = item.datum;
+		if (!datum) return null;
+		const rows = [];
+		if (datum.role === "target") rows.push([/* @__PURE__ */ jsx(TargetKey, {
+			label: labels.target,
+			mark: "target",
+			color: tokens?.foreground
+		}, "k"), progress.targetText]);
+		else if (datum.role === "pace" && progress.pace) {
+			rows.push([/* @__PURE__ */ jsx(TargetKey, {
+				label: labels.expectedByNow,
+				mark: "pace",
+				color: tokens?.reference
+			}, "k"), progress.pace.expectedText], [labels.ofTarget, progress.pace.expectedPercentText]);
+			if (progress.elapsed) rows.push([labels.elapsedRow, progress.elapsed.percentText]);
+		} else if ("to" in datum && progress.projection) rows.push([/* @__PURE__ */ jsx(TargetKey, {
+			label: labels.projected,
+			mark: "projection",
+			color: barColor
+		}, "k"), progress.projection.text], [labels.ofTarget, progress.projection.percentText]);
+		else if ("zero" in datum) rows.push([/* @__PURE__ */ jsx(TargetKey, {
+			label: labels.reached,
+			mark: "actual",
+			color: barColor
+		}, "k"), progress.valueText], [labels.ofTarget, progress.percentText]);
+		else return null;
+		return /* @__PURE__ */ jsx(ArcTooltipRows, { rows });
+	}, [
+		progress,
+		labels,
+		tokens,
+		barColor
+	]);
+	const { handler: tooltipHandler, tooltip } = useArcTooltipHandler({ content: tooltipContent });
+	const embedOptions = useMemo(() => arcEmbedOptions({ tooltip: tooltipHandler }), [tooltipHandler]);
+	const spec = useMemo(() => {
+		if (!tokens) return null;
+		const built = buildTargetBulletSpec({
+			barHeight: sizes.barHeight,
+			height: plotHeight,
+			labels: markerLabels,
+			tooltip: true,
+			targetLabel: labels.markNames.target,
+			paceLabel: labels.markNames.pace,
+			valueFormat: locale ? `${format}@${locale}` : format,
+			valueTitle: labels.reached,
+			targetTitle: labels.target,
+			paceTitle: labels.expectedByNow,
+			projectionTitle: labels.projected,
+			locale
+		}, tokens);
+		return patchSpec ? patchSpec(built) : built;
+	}, [
+		tokens,
+		sizes.barHeight,
+		plotHeight,
+		markerLabels,
+		labels,
+		format,
+		locale,
+		patchSpec
+	]);
+	const datasets = useMemo(() => {
+		if (!progress) return void 0;
+		return {
+			[TARGET_ACTUAL_DATASET]: [{
+				value: progress.value,
+				zero: 0,
+				ratio: progress.ratio,
+				tone: progress.tone
+			}],
+			[TARGET_BOUNDS_DATASET]: [{
+				min: progress.bounds.min,
+				max: progress.bounds.max,
+				target: progress.target
+			}],
+			[TARGET_MARKERS_DATASET]: [{
+				value: progress.target,
+				ratio: 1,
+				role: "target"
+			}, ...progress.pace ? [{
+				value: progress.pace.expected,
+				ratio: progress.pace.expectedRatio,
+				role: "pace"
+			}] : []],
+			[TARGET_PROJECTION_DATASET]: progress.projection?.extends ? [{
+				from: progress.value,
+				to: progress.projection.value,
+				ratio: progress.projection.ratio,
+				tone: progress.tone
+			}] : []
+		};
+	}, [progress]);
+	const chartDescription = progress ? buildTargetChartDescription({
+		name,
+		progress,
+		labels
+	}) : void 0;
+	const hasPaceInputs = period !== void 0 || expected !== void 0 || projected !== void 0;
+	const reserveStatus = hasPaceInputs || progress != null;
+	const reserveInsight = insight != null && insight !== false;
+	const showTrack = progress?.track != null;
+	const reserveTrack = showTrack || state === "loading" && hasPaceInputs;
+	const headlineMinHeight = Math.max(sizes.valueLinePx + (reserveTrack ? HEADLINE_GAP_PX + sizes.subLinePx : 0), sizes.deltaLinePx + 4 + sizes.comparisonLinePx);
+	const bodyMinHeight = headlineMinHeight + (reserveTrack ? sizes.gapPx : 0) + plotHeight + (reserveStatus ? sizes.statusLinePx : 0) + (reserveInsight ? sizes.gapPx + sizes.comparisonLinePx : 0);
+	const HeadingTag = `h${titleLevel}`;
+	const busy = state === "loading" || state === "refreshing";
+	const directionWordFor = (direction) => direction === "up" ? labels.increase : direction === "down" ? labels.decrease : labels.unchanged;
+	const bigText = progress ? headline === "attainment" ? progress.percentText : progress.valueText : valueText;
+	const bigUnit = unit != null && (headline === "value" || !progress);
+	const subLine = progress ? headline === "attainment" ? formatValuePair(progress.valueText, progress.targetText, labels.pairSeparator) ?? labels.readingLine(progress.valueText, progress.targetText) : labels.attainmentLine(progress.percentText, progress.targetText) : null;
+	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-direction": goodDirection,
+		"data-period": periodText?.shape,
+		"data-track": showContent && progress?.track ? progress.track : void 0,
+		"data-pace": showContent && progress?.pace ? progress.pace.status : void 0,
+		"data-polarity": showContent && delta ? delta.polarity : void 0,
+		"data-empty": state === "empty" || state === "no-match" ? "" : void 0,
+		"data-stale": stale ? "" : void 0,
+		"data-insufficient": noTarget ? "" : void 0,
+		...rest,
+		className: cn("relative flex min-w-0 flex-col", sizes.gap, className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center gap-1",
+					children: [/* @__PURE__ */ jsx(HeadingTag, {
+						id: headingId,
+						className: cn(labelClasses, sizes.label, "line-clamp-2"),
+						children: label
+					}), hint && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+						render: /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							iconOnly: true,
+							circular: true,
+							"aria-label": labels.about(name),
+							"aria-describedby": hintId,
+							className: headerControlClasses
+						}),
+						children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-3.5" })
+					}), /* @__PURE__ */ jsx(TooltipPopup, { children: hint })] }), /* @__PURE__ */ jsx("span", {
+						id: hintId,
+						className: "sr-only",
+						children: hint
+					})] })]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1",
+					children: [
+						stale && /* @__PURE__ */ jsx(Badge, {
+							variant: "warning",
+							appearance: "soft",
+							size: "sm",
+							children: labels.stale
+						}),
+						showContent && progress && /* @__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__ */ jsxs("div", {
+										className: "mb-3 flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground",
+										"data-part": "chart-legend",
+										children: [
+											/* @__PURE__ */ jsx(TargetKey, {
+												label: labels.markNames.actual,
+												mark: "actual",
+												color: barColor
+											}),
+											progress.pace && /* @__PURE__ */ jsx(TargetKey, {
+												label: labels.markNames.pace,
+												mark: "pace",
+												color: tokens?.reference
+											}),
+											/* @__PURE__ */ jsx(TargetKey, {
+												label: labels.markNames.target,
+												mark: "target",
+												color: tokens?.foreground
+											}),
+											progress.projection?.extends && /* @__PURE__ */ jsx(TargetKey, {
+												label: labels.markNames.projection,
+												mark: "projection",
+												color: barColor
+											})
+										]
+									}),
+									/* @__PURE__ */ jsx(TableContainer, {
+										variant: "plain",
+										tabIndex: 0,
+										role: "region",
+										"aria-label": labels.tableCaption(name),
+										className: "max-h-[min(16rem,calc(var(--available-height)-4.5rem))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+										"data-part": "table",
+										children: /* @__PURE__ */ jsxs(Table, {
+											size: "sm",
+											stickyHeader: true,
+											hoverable: false,
+											children: [
+												/* @__PURE__ */ jsx(TableCaption, {
+													side: "top",
+													className: "sr-only",
+													children: labels.tableCaption(name)
+												}),
+												/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [/* @__PURE__ */ jsx(TableHead, { children: labels.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 && cn("font-medium", changeTextClasses[row.tone])),
+														children: row.value
+													})]
+												}, row.key)) })
+											]
+										})
+									})
+								]
+							})]
+						}),
+						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", reserveTrack && "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 }
+									}), reserveTrack && /* @__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",
+								children: [hasPaceInputs && /* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "w-3/5",
+									style: { height: sizes.statusLinePx }
+								}), /* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "w-full",
+									style: { height: plotHeight }
+								})]
+							}),
+							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 && /* @__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", showTrack && "mb-2"),
+								style: { minHeight: headlineMinHeight },
+								"data-part": "headline",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex min-w-0 flex-col items-start gap-1",
+									"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"),
+											children: bigText
+										}), bigUnit && /* @__PURE__ */ jsx("span", {
+											className: cn("font-sans text-muted-foreground", sizes.unit),
+											children: unit
+										})]
+									}), showTrack && progress?.track && /* @__PURE__ */ jsxs(Badge, {
+										variant: trackBadgeVariant[progress.track],
+										appearance: "soft",
+										size: sizes.chip,
+										role: "status",
+										"aria-label": `${labels.trackGroup(name)}: ${labels.trackNames[progress.track]}`,
+										"data-part": "track",
+										"data-track": progress.track,
+										children: [/* @__PURE__ */ jsx(TrackGlyph, { track: progress.track }), labels.trackNames[progress.track]]
+									})]
+								}), delta && progress && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+									delay: 150,
+									render: /* @__PURE__ */ jsx("p", {
+										tabIndex: 0,
+										role: "group",
+										"aria-label": labels.progressGroup(name),
+										"aria-describedby": explanationId,
+										className: cn(deltaStackClasses, sizes.body),
+										"data-part": "delta",
+										"data-kind": progress.pace ? "pace" : "target"
+									}),
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											id: explanationId,
+											className: "sr-only",
+											children: explanation
+										}),
+										/* @__PURE__ */ jsxs(Badge, {
+											variant: polarityBadgeVariant[delta.polarity],
+											appearance: "soft",
+											size: sizes.badge,
+											"data-direction": delta.direction,
+											children: [
+												/* @__PURE__ */ jsx(DeltaGlyph, { direction: delta.direction }),
+												/* @__PURE__ */ jsxs("span", {
+													className: "sr-only",
+													children: [directionWordFor(delta.direction), " "]
+												}),
+												delta.text
+											]
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "max-w-full text-muted-foreground wrap-break-word text-xs",
+											children: comparisonText
+										})
+									]
+								}), /* @__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",
+								children: [reserveStatus && /* @__PURE__ */ jsxs("div", {
+									className: cn("flex min-w-0 flex-wrap items-baseline justify-between gap-x-3 gap-y-1 font-sans", sizes.body),
+									style: { minHeight: sizes.statusLinePx },
+									"data-part": "status",
+									children: [subLine && /* @__PURE__ */ jsxs("span", {
+										className: "min-w-0 font-sans text-muted-foreground text-xs tabular-nums",
+										"data-part": "sub-line",
+										children: [subLine, unit != null && headline === "attainment" && /* @__PURE__ */ jsxs("span", { children: [" ", unit] })]
+									}), progress?.projection && /* @__PURE__ */ jsxs("span", {
+										className: "min-w-0 text-muted-foreground text-xs tabular-nums",
+										"data-part": "projection",
+										children: [
+											labels.projected,
+											" ",
+											/* @__PURE__ */ jsx("span", {
+												className: "font-medium text-foreground",
+												children: progress.projection.text
+											}),
+											" (",
+											progress.projection.percentText,
+											")"
+										]
+									})]
+								}), /* @__PURE__ */ jsx("div", {
+									ref: plotRef,
+									className: "relative w-full",
+									style: { height: plotHeight },
+									"data-part": "plot",
+									children: progress ? 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-target",
+										children: labels.noTarget
+									})
+								})]
+							}),
+							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
+		]
+	});
+});
+TargetCard.displayName = "TargetCard";
+//#endregion
+export { TargetCard };