@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/ProgressCard/ProgressCard.js

@@ -0,0 +1,908 @@
+import { ArcVegaChart } from "../../lib/vega/ArcVegaChart.js";
+import { arcEmbedOptions } from "../../lib/vega/embed.js";
+import { useChartTokens } from "../../lib/vega/tokens.js";
+import { ArcTooltipRows, useArcTooltipHandler } from "../../lib/vega/tooltip.js";
+import { PROGRESS_COMPLETED_DATASET, PROGRESS_FINISH_DATASET, PROGRESS_IDEAL_DATASET, PROGRESS_LATEST_DATASET, PROGRESS_PROJECTION_DATASET, PROGRESS_SCOPE_DATASET, buildProgressBurnUpSpec } from "./ProgressCard.chart.js";
+import { buildProgressChartDescription, buildProgressDescription, buildProgressExplanation, buildProgressHeadline, buildProgressReadingRows, buildProgressStageRows, buildStageBarLabel, createProgressFormatters, deriveProgressRun, deriveProgressState, resolveProgressLabels } from "./ProgressCard.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, progressIndicatorVariants, progressTrackVariants } from "@arcfusionz/arc-primitive-ui";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ProgressCard/ProgressCard.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",
+		subLinePx: 16,
+		chip: "sm",
+		chipLinePx: 20,
+		plotHeight: 88,
+		barSize: "sm",
+		barRowPx: 4,
+		legendLinePx: 18,
+		legendRows: 2,
+		legendText: "text-xs"
+	},
+	md: {
+		padding: "md",
+		gap: "gap-2",
+		gapPx: 8,
+		label: "text-sm",
+		value: "text-3xl leading-9",
+		valueLinePx: 36,
+		unit: "text-sm",
+		body: "text-sm",
+		subLinePx: 20,
+		chip: "sm",
+		chipLinePx: 20,
+		plotHeight: 116,
+		barSize: "md",
+		barRowPx: 8,
+		legendLinePx: 20,
+		legendRows: 1,
+		legendText: "text-xs"
+	},
+	lg: {
+		padding: "lg",
+		gap: "gap-2",
+		gapPx: 8,
+		label: "text-sm",
+		value: "text-4xl leading-10",
+		valueLinePx: 40,
+		unit: "text-base",
+		body: "text-sm",
+		subLinePx: 20,
+		chip: "md",
+		chipLinePx: 24,
+		plotHeight: 148,
+		barSize: "lg",
+		barRowPx: 12,
+		legendLinePx: 22,
+		legendRows: 1,
+		legendText: "text-sm"
+	}
+};
+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 headlineStackClasses = "flex min-w-0 flex-col items-start gap-1 rounded-md 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 = "Progress";
+const FOOTER_ROW_PX = 16;
+const HEADER_ROW_PX = 24;
+const verdictBadgeVariant = {
+	done: "success",
+	"on-time": "success",
+	"at-risk": "warning",
+	late: "destructive",
+	stalled: "destructive"
+};
+/**
+* The composed stage bar's fills, by what the stage means — the same four
+* token roles the plot uses, as Tailwind classes rather than resolved values,
+* because this bar is CSS and flips with the theme on its own. `remaining`
+* draws nothing: the muted Progress track already stands for work not
+* started, and gray is the colour of context.
+*/
+const stageFillClasses = {
+	complete: "bg-chart-emphasis",
+	active: "bg-chart-sequential-5",
+	blocked: "bg-chart-diverging-negative",
+	remaining: "bg-transparent"
+};
+/**
+* The plot's legend keys, drawn as the marks they name so their meaning never
+* depends on colour alone: a solid 2px line for what happened, a stepped gray
+* line for the scope, a dashed reference for the required pace, and a dashed
+* polarity line for the projection.
+*/
+function MarkKey({ kind, label, color }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex min-w-0 items-center gap-1",
+		children: [/* @__PURE__ */ jsxs("svg", {
+			width: "16",
+			height: "10",
+			viewBox: "0 0 18 10",
+			fill: "none",
+			"aria-hidden": "true",
+			className: "shrink-0",
+			style: { color },
+			children: [
+				kind === "completed" && /* @__PURE__ */ jsx("path", {
+					d: "M1 8 L6 5 L12 3 L17 2",
+					stroke: "currentColor",
+					strokeWidth: 2,
+					strokeLinecap: "round"
+				}),
+				kind === "scope" && /* @__PURE__ */ jsx("path", {
+					d: "M1 7 L9 7 L9 3 L17 3",
+					stroke: "currentColor",
+					strokeWidth: 1.5,
+					strokeLinecap: "round"
+				}),
+				kind === "ideal" && /* @__PURE__ */ jsx("path", {
+					d: "M1 8 L17 2",
+					stroke: "currentColor",
+					strokeWidth: 1.5,
+					strokeDasharray: "4 3",
+					strokeLinecap: "round"
+				}),
+				kind === "projection" && /* @__PURE__ */ jsx("path", {
+					d: "M1 8 L17 2",
+					stroke: "currentColor",
+					strokeWidth: 2,
+					strokeDasharray: "3 3",
+					strokeLinecap: "round"
+				})
+			]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate",
+			children: label
+		})]
+	});
+}
+function StageSwatch({ tone }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cn("mt-px size-2.5 shrink-0 rounded-xs", stageFillClasses[tone], tone === "remaining" && "border border-border bg-muted"),
+		"data-tone": tone
+	});
+}
+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" })]
+	});
+}
+/** A glyph per verdict — a check when it is done, a warning when at risk, a cross when late, a pause when stalled. */
+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 === "done" && /* @__PURE__ */ jsx("path", { d: "m5 12 5 5L20 7" }),
+			verdict === "on-time" && /* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "5",
+				fill: "currentColor",
+				stroke: "none"
+			}),
+			verdict === "at-risk" && /* @__PURE__ */ jsx("path", { d: "M12 4 3 20h18L12 4Zm0 6v4m0 3h.01" }),
+			verdict === "late" && /* @__PURE__ */ jsx("path", { d: "M12 8v5m0 3h.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z" }),
+			verdict === "stalled" && /* @__PURE__ */ jsx("path", { d: "M9 6v12M15 6v12" })
+		]
+	});
+}
+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 delivery tile for dashboard grids: how much of a finite body of work is
+* finished, the rate it is being finished at, when that rate lands it, and
+* whether that is before the deadline — on a burn-up chart (completion rising
+* from zero, the scope it is chasing, the pace the deadline requires, and a
+* dashed projection to the crossing) with every loading, empty, error and
+* stale state, a generated text equivalent and a reading-by-reading table.
+*/
+const ProgressCard = forwardRef(({ label, name: nameProp, hint, snapshots, total, due, projected, rateWindow, tolerance = 2, stages: stageInput, format = "integer", formatValue, percentDigits = 0, unit, headline = "percent", dateFormat = "day", axes = true, showIdeal = true, showProjection = true, showGap = true, legend = true, plotHeight: plotHeightProp, insight, status = "ready", filtered = false, stale = false, 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(() => resolveProgressLabels(labelOverrides), [labelOverrides]);
+	const sizes = sizeStyles[size];
+	const name = nameProp ?? (typeof label === "string" ? label : MISSING_NAME);
+	const plotHeight = plotHeightProp ?? sizes.plotHeight;
+	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 formatters = useMemo(() => createProgressFormatters({
+		format,
+		locale,
+		timeZone,
+		formatValue,
+		percentDigits,
+		...typeof dateFormat === "function" ? { formatDateValue: dateFormat } : { dateGranularity: dateFormat }
+	}), [
+		format,
+		locale,
+		timeZone,
+		formatValue,
+		percentDigits,
+		dateFormat
+	]);
+	const run = useMemo(() => deriveProgressRun({
+		snapshots,
+		total,
+		due,
+		rateWindow,
+		projected,
+		tolerance,
+		stages: stageInput,
+		formatters,
+		labels,
+		timeZone
+	}), [
+		snapshots,
+		total,
+		due,
+		rateWindow,
+		projected,
+		tolerance,
+		stageInput,
+		formatters,
+		labels,
+		timeZone
+	]);
+	const hasValues = snapshots.some((snapshot) => snapshot.completed != null && Number.isFinite(snapshot.completed) && snapshot.completed >= 0);
+	const state = deriveProgressState({
+		status,
+		hasValues,
+		hasData: run != null,
+		hasTrend: run != null && !run.insufficient,
+		filtered
+	});
+	const showContent = (state === "ready" || state === "refreshing" || state === "insufficient") && run != null;
+	const showPlot = showContent && run != null && !run.insufficient;
+	const cardDescription = description ?? buildProgressDescription({
+		name,
+		state,
+		run,
+		labels
+	});
+	const explanationRows = run ? buildProgressExplanation(run, labels) : [];
+	const explanation = explanationRows.map(([key, entry]) => `${key}: ${entry}`).join(". ");
+	const headlineText = run ? buildProgressHeadline(run, headline, labels) : null;
+	const readingRows = useMemo(() => run ? buildProgressReadingRows(run, formatters, labels) : [], [
+		run,
+		formatters,
+		labels
+	]);
+	const stageRows = useMemo(() => run ? buildProgressStageRows(run, labels) : [], [run, labels]);
+	const tokens = useChartTokens(rootRef);
+	const plotWidth = usePlotWidth(plotRef, showPlot);
+	const hasIdeal = showIdeal && run?.ideal != null;
+	const hasProjection = showProjection && run?.projection != null;
+	const hasDue = run?.due != null;
+	const tooltipContent = useCallback(({ item }) => {
+		if (!run) return null;
+		const datum = item.datum;
+		if (!datum || typeof datum.t !== "number") return null;
+		const completed = typeof datum.y === "number" ? datum.y : null;
+		const scope = typeof datum.total === "number" ? datum.total : run.scope;
+		const rows = [
+			[formatters.formatDay(datum.t), ""],
+			[/* @__PURE__ */ jsx(MarkKey, {
+				kind: "completed",
+				label: labels.markNames.completed,
+				color: tokens?.emphasis
+			}, "c"), completed == null ? formatters.formatValue(null) : `${formatters.formatValue(completed)} (${formatters.formatShare(scope > 0 ? completed / scope : 0)})`],
+			[/* @__PURE__ */ jsx(MarkKey, {
+				kind: "scope",
+				label: labels.markNames.scope,
+				color: tokens?.context
+			}, "s"), formatters.formatValue(scope)]
+		];
+		if (completed != null) rows.push([labels.remaining, formatters.formatValue(Math.max(0, scope - completed))]);
+		return /* @__PURE__ */ jsx(ArcTooltipRows, { rows });
+	}, [
+		run,
+		formatters,
+		labels,
+		tokens
+	]);
+	const { handler: tooltipHandler, tooltip } = useArcTooltipHandler({ content: tooltipContent });
+	const embedOptions = useMemo(() => arcEmbedOptions({ tooltip: tooltipHandler }), [tooltipHandler]);
+	const spec = useMemo(() => {
+		if (!tokens) return null;
+		const built = buildProgressBurnUpSpec({
+			height: plotHeight,
+			axes,
+			ideal: hasIdeal,
+			projection: hasProjection,
+			due: hasDue,
+			dueLabel: labels.markNames.due,
+			gap: showGap,
+			tooltip: true,
+			dateTitle: labels.tableDate,
+			completedTitle: labels.markNames.completed,
+			scopeTitle: labels.markNames.scope,
+			valueFormat: locale ? `${format}@${locale}` : format,
+			timeFormat: [
+				"day",
+				locale ?? "",
+				timeZone ?? ""
+			].join("@").replace(/@+$/, ""),
+			axisTimeFormat: [
+				"day-short",
+				locale ?? "",
+				timeZone ?? ""
+			].join("@").replace(/@+$/, ""),
+			locale
+		}, tokens);
+		return patchSpec ? patchSpec(built) : built;
+	}, [
+		tokens,
+		plotHeight,
+		axes,
+		hasIdeal,
+		hasProjection,
+		hasDue,
+		showGap,
+		labels,
+		format,
+		locale,
+		timeZone,
+		patchSpec
+	]);
+	const datasets = useMemo(() => {
+		if (!run) return void 0;
+		const tone = run.projection?.late ? "negative" : "positive";
+		return {
+			[PROGRESS_COMPLETED_DATASET]: run.points.map((point) => ({
+				t: point.t,
+				y: point.completed,
+				total: point.total,
+				aria: `${formatters.formatDay(point.t)}: ${formatters.formatValue(point.completed)}`
+			})),
+			[PROGRESS_SCOPE_DATASET]: [...run.points.map((point) => ({
+				t: point.t,
+				y: point.total,
+				aria: `${labels.markNames.scope} ${formatters.formatValue(point.total)}`
+			})), ...run.bounds.max > run.asOf ? [{
+				t: run.bounds.max,
+				y: run.scope,
+				aria: `${labels.markNames.scope} ${run.scopeText}`
+			}] : []],
+			["gap"]: run.points.filter((point) => point.completed != null).map((point) => ({
+				t: point.t,
+				y: point.completed,
+				y2: point.total
+			})),
+			[PROGRESS_IDEAL_DATASET]: run.ideal ? [run.ideal.from, run.ideal.to] : [],
+			[PROGRESS_PROJECTION_DATASET]: run.projection ? [{
+				t: run.asOf,
+				y: run.completed,
+				tone,
+				aria: labels.markNames.projection
+			}, {
+				t: run.projection.date,
+				y: run.scope,
+				tone,
+				aria: run.projection.text
+			}] : [],
+			["due"]: run.due != null ? [{ t: run.due }] : [],
+			[PROGRESS_LATEST_DATASET]: [{
+				t: run.asOf,
+				y: run.completed
+			}],
+			[PROGRESS_FINISH_DATASET]: run.projection ? [{
+				t: run.projection.date,
+				y: run.scope,
+				tone
+			}] : []
+		};
+	}, [
+		run,
+		formatters,
+		labels
+	]);
+	const chartDescription = run ? buildProgressChartDescription(name, run, labels) : void 0;
+	const reserveInsight = insight != null && insight !== false;
+	const hasStages = (run?.stages.length ?? 0) > 0;
+	const showVerdict = showContent && run?.verdict != null;
+	const verdictTextLines = due != null ? 2 : 1;
+	const headlineMinHeight = Math.max(sizes.valueLinePx + 4 + sizes.subLinePx, sizes.chipLinePx + 4 + sizes.subLinePx * verdictTextLines);
+	const legendReserve = legend ? sizes.gapPx + sizes.legendLinePx * sizes.legendRows : 0;
+	const bodyMinHeight = headlineMinHeight + sizes.gapPx + (hasStages ? sizes.barRowPx + sizes.gapPx : 0) + plotHeight + legendReserve + (reserveInsight ? sizes.gapPx + sizes.legendLinePx : 0);
+	const legendRow = legend ? /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-wrap items-center gap-x-2.5 gap-y-0.5 font-sans text-muted-foreground", sizes.legendText),
+		style: { minHeight: sizes.legendLinePx },
+		"data-part": "legend",
+		children: [
+			/* @__PURE__ */ jsx(MarkKey, {
+				kind: "completed",
+				label: labels.markNames.completed,
+				color: tokens?.emphasis
+			}),
+			/* @__PURE__ */ jsx(MarkKey, {
+				kind: "scope",
+				label: labels.markNames.scope,
+				color: tokens?.context
+			}),
+			showIdeal && due != null && /* @__PURE__ */ jsx(MarkKey, {
+				kind: "ideal",
+				label: labels.markNames.ideal,
+				color: tokens?.reference
+			}),
+			showProjection && /* @__PURE__ */ jsx(MarkKey, {
+				kind: "projection",
+				label: labels.markNames.projection,
+				color: run?.projection == null ? tokens?.mutedForeground : run.projection.late ? tokens?.divergingNegative : tokens?.divergingPositive
+			})
+		]
+	}) : null;
+	const HeadingTag = `h${titleLevel}`;
+	const busy = state === "loading" || state === "refreshing";
+	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-verdict": showContent && run?.verdict ? run.verdict : void 0,
+		"data-polarity": showContent && run ? run.polarity : void 0,
+		"data-stalled": showContent && run?.stalled ? "" : void 0,
+		"data-scope-changed": showContent && run?.scopeChanged ? "" : void 0,
+		"data-empty": state === "empty" || state === "no-match" ? "" : void 0,
+		"data-insufficient": state === "insufficient" ? "" : void 0,
+		"data-stale": stale ? "" : 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",
+				style: { minHeight: HEADER_ROW_PX },
+				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: "max-h-[min(18rem,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.tableDate }),
+												/* @__PURE__ */ jsx(TableHead, {
+													className: "text-right",
+													children: labels.tableCompleted
+												}),
+												/* @__PURE__ */ jsx(TableHead, {
+													className: "text-right",
+													children: labels.tableShare
+												})
+											] }) }),
+											/* @__PURE__ */ jsxs(TableBody, { children: [readingRows.map((row) => /* @__PURE__ */ jsxs(TableRow, {
+												"data-row": row.key,
+												"data-summary": row.summary ? "" : void 0,
+												children: [
+													/* @__PURE__ */ jsx(TableCell, {
+														className: cn(row.summary && "font-medium text-foreground"),
+														children: row.label
+													}),
+													/* @__PURE__ */ jsx(TableCell, {
+														className: cn("text-right tabular-nums", row.summary && "font-medium text-foreground"),
+														children: row.value
+													}),
+													/* @__PURE__ */ jsx(TableCell, {
+														className: cn("text-right tabular-nums", row.summary && "font-medium text-foreground"),
+														children: row.share
+													})
+												]
+											}, row.key)), stageRows.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TableRow, {
+												"data-row": "__stages__",
+												children: /* @__PURE__ */ jsx(TableCell, {
+													colSpan: 3,
+													className: "pt-3 font-medium text-foreground",
+													children: labels.tableItem
+												})
+											}), stageRows.map((row) => /* @__PURE__ */ jsxs(TableRow, {
+												"data-row": row.key,
+												"data-summary": row.summary ? "" : void 0,
+												children: [
+													/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("span", {
+														className: "flex min-w-0 items-start gap-2",
+														children: [row.stage && /* @__PURE__ */ jsx(StageSwatch, { tone: row.stage.tone }), /* @__PURE__ */ jsx("span", {
+															className: "min-w-0",
+															children: row.label
+														})]
+													}) }),
+													/* @__PURE__ */ jsx(TableCell, {
+														className: cn("text-right tabular-nums", row.summary && "font-medium text-foreground"),
+														children: row.value
+													}),
+													/* @__PURE__ */ jsx(TableCell, {
+														className: cn("text-right tabular-nums", row.summary && "font-medium text-foreground"),
+														children: row.share
+													})
+												]
+											}, 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: cn("flex flex-col", sizes.gap),
+						children: [
+							/* @__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.subLinePx }
+									})]
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "flex w-1/3 flex-col items-end gap-1",
+									children: [/* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-24 max-w-full",
+										style: { height: sizes.chipLinePx }
+									}), /* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "w-full",
+										style: { height: sizes.subLinePx }
+									})]
+								})]
+							}),
+							/* @__PURE__ */ jsx(Skeleton, {
+								variant: "rounded",
+								className: "w-full",
+								style: { height: plotHeight }
+							}),
+							legendRow,
+							reserveInsight && /* @__PURE__ */ jsxs("div", {
+								className: "flex items-start gap-2",
+								children: [/* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "size-4 shrink-0"
+								}), /* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "w-full",
+									style: { height: sizes.legendLinePx }
+								})]
+							})
+						]
+					}),
+					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 && run && headlineText && /* @__PURE__ */ jsxs("div", {
+						className: cn("flex min-w-0 flex-col", sizes.gap),
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 items-start justify-between gap-3",
+								style: { minHeight: headlineMinHeight },
+								"data-part": "headline",
+								children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+									delay: 150,
+									render: /* @__PURE__ */ jsx("div", {
+										tabIndex: 0,
+										role: "group",
+										"aria-label": labels.progressGroup(name),
+										"aria-describedby": explanationId,
+										className: cn(headlineStackClasses, sizes.body),
+										"data-part": "value"
+									}),
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											id: explanationId,
+											className: "sr-only",
+											children: explanation
+										}),
+										/* @__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: headlineText.big
+											}), unit != null && headline === "remaining" && /* @__PURE__ */ jsx("span", {
+												className: cn("font-sans text-muted-foreground", sizes.unit),
+												children: unit
+											})]
+										}),
+										/* @__PURE__ */ jsxs("span", {
+											className: "min-w-0 font-sans text-muted-foreground text-xs tabular-nums",
+											"data-part": "sub-line",
+											children: [headlineText.sub, unit != null && headline === "percent" && /* @__PURE__ */ jsxs("span", { children: [" ", unit] })]
+										})
+									]
+								}), /* @__PURE__ */ jsx(TooltipPopup, {
+									arrow: false,
+									side: "bottom",
+									align: "start",
+									sideOffset: 8,
+									collisionPadding: 8,
+									container: popoverContainer,
+									className: "text-left",
+									"data-part": "headline-tooltip",
+									children: /* @__PURE__ */ jsx(ArcTooltipRows, { rows: explanationRows })
+								})] }), /* @__PURE__ */ jsxs("div", {
+									className: "flex min-w-0 shrink-0 flex-col items-end gap-1 text-right",
+									"data-part": "verdict-stack",
+									children: [
+										showVerdict && run.verdict && /* @__PURE__ */ jsxs(Badge, {
+											variant: verdictBadgeVariant[run.verdict],
+											appearance: "soft",
+											size: sizes.chip,
+											role: "status",
+											"data-part": "verdict",
+											"data-verdict": run.verdict,
+											children: [/* @__PURE__ */ jsx(VerdictGlyph, { verdict: run.verdict }), labels.verdicts[run.verdict]]
+										}),
+										run.projection && !run.done && /* @__PURE__ */ jsx("span", {
+											className: "min-w-0 font-sans text-muted-foreground text-xs tabular-nums",
+											"data-part": "projection",
+											children: labels.finishes(run.projection.dateText)
+										}),
+										run.rate?.requiredText && !run.done && /* @__PURE__ */ jsxs("span", {
+											className: "min-w-0 font-sans text-muted-foreground text-xs tabular-nums",
+											"data-part": "rate",
+											children: [
+												labels.perDay(run.rate.text),
+												" · ",
+												labels.needsPerDay(run.rate.requiredText)
+											]
+										})
+									]
+								})]
+							}),
+							hasStages && /* @__PURE__ */ jsx("div", {
+								role: "img",
+								"aria-label": buildStageBarLabel(name, run, labels),
+								className: progressTrackVariants({ size: sizes.barSize }),
+								"data-part": "stage-bar",
+								children: /* @__PURE__ */ jsx("div", {
+									className: "flex h-full gap-px",
+									children: run.stages.map((stage) => /* @__PURE__ */ jsx("div", {
+										className: progressIndicatorVariants({ className: cn("rounded-none", stageFillClasses[stage.tone]) }),
+										style: { width: stage.width },
+										"data-tone": stage.tone
+									}, stage.key))
+								})
+							}),
+							/* @__PURE__ */ jsx("div", {
+								ref: plotRef,
+								className: "relative w-full",
+								style: { height: plotHeight },
+								"data-part": "plot",
+								children: showPlot ? 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": "needs-history",
+									children: labels.needsHistory
+								})
+							}),
+							legendRow,
+							reserveInsight && /* @__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 [&_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"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: cn(captionClasses, "mt-1 flex flex-wrap justify-between gap-x-3"),
+				style: { minHeight: FOOTER_ROW_PX },
+				"data-part": "footer",
+				children: [showContent && run?.scopeChanged ? /* @__PURE__ */ jsx("span", {
+					"data-part": "scope-note",
+					children: labels.scopeMoved(run.openingScopeText, run.scopeText)
+				}) : /* @__PURE__ */ jsx("span", {}), showContent && run && /* @__PURE__ */ jsxs("span", {
+					"data-part": "as-of",
+					children: [
+						labels.asOf,
+						" ",
+						/* @__PURE__ */ jsx("time", {
+							dateTime: new Date(run.asOf).toISOString(),
+							children: run.asOfText
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: setPopoverContainer,
+				className: "pointer-events-none absolute inset-0",
+				"data-part": "popover-host"
+			}),
+			tooltip
+		]
+	});
+});
+ProgressCard.displayName = "ProgressCard";
+//#endregion
+export { ProgressCard };