@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/ProfileCard/ProfileCard.js

@@ -0,0 +1,735 @@
+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 { PROFILE_AXES_DATASET, PROFILE_CELLS_DATASET, PROFILE_RINGS_DATASET, buildProfilePlotSpec } from "./ProfileCard.chart.js";
+import { buildProfileChartDescription, buildProfileDescription, createProfileFormatters, deriveProfileHighlights, deriveProfileState, normalizeProfile, resolveProfileLabels } from "./ProfileCard.model.js";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { AILoader, Badge, Box, Button, HorizontalScroll, Popover, PopoverPopup, PopoverTitle, PopoverTrigger, Skeleton, SkeletonGroup, SystemState, Table, TableBody, TableCaption, TableCell, TableContainer, TableHead, TableHeader, TableRow, Toggle, Tooltip, TooltipPopup, TooltipTrigger, cn } from "@arcfusionz/arc-primitive-ui";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ProfileCard/ProfileCard.tsx
+const sizeStyles = {
+	sm: {
+		padding: "sm",
+		gap: "gap-2",
+		gapPx: 8,
+		label: "text-xs",
+		body: "text-xs",
+		plot: 180,
+		groupedRow: 34,
+		legendPx: 24
+	},
+	md: {
+		padding: "md",
+		gap: "gap-3",
+		gapPx: 12,
+		label: "text-sm",
+		body: "text-sm",
+		plot: 240,
+		groupedRow: 40,
+		legendPx: 28
+	},
+	lg: {
+		padding: "lg",
+		gap: "gap-3",
+		gapPx: 12,
+		label: "text-sm",
+		body: "text-sm",
+		plot: 300,
+		groupedRow: 46,
+		legendPx: 32
+	}
+};
+const RING_LEVELS = [
+	.25,
+	.5,
+	.75,
+	1
+];
+const labelClasses = "min-w-0 font-sans font-medium text-muted-foreground";
+const captionClasses = "font-sans text-xs text-muted-foreground";
+const headerControlClasses = "size-6 min-w-0 text-muted-foreground hover:text-foreground";
+const tileStateClasses = "w-full max-w-none gap-2 px-2 py-2 [--artwork-box:3rem]";
+const MISSING_NAME = "Profile";
+const EMPTY_KEYS = [];
+const EMPTY_PALETTE = [];
+const EMPTY_SERIES = [];
+/** The series key beside its name — the mark's own shape, so identity never rests on colour alone. */
+function ProfileSeriesKey({ label, color, mark }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex min-w-0 items-center gap-2",
+		children: [/* @__PURE__ */ jsx("svg", {
+			width: "18",
+			height: "12",
+			viewBox: "0 0 18 12",
+			fill: "none",
+			"aria-hidden": "true",
+			className: "shrink-0",
+			style: { color },
+			children: mark === "grouped" ? /* @__PURE__ */ jsx("rect", {
+				x: "1",
+				y: "2",
+				width: "16",
+				height: "8",
+				rx: "1",
+				fill: "currentColor"
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("line", {
+				x1: "1",
+				y1: "6",
+				x2: "17",
+				y2: "6",
+				stroke: "currentColor",
+				strokeWidth: 2,
+				strokeLinecap: "round"
+			}), /* @__PURE__ */ jsx("circle", {
+				cx: "9",
+				cy: "6",
+				r: "3",
+				fill: "currentColor"
+			})] })
+		}), 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 useMergedRef(forwarded) {
+	const inner = useRef(null);
+	return [inner, useCallback((node) => {
+		inner.current = node;
+		if (typeof forwarded === "function") forwarded(node);
+		else if (forwarded) forwarded.current = node;
+	}, [forwarded])];
+}
+function usePlotWidth(ref, enabled) {
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		if (!enabled) return;
+		const node = ref.current;
+		if (!node) return;
+		let frame = 0;
+		const measure = () => setWidth((previous) => {
+			const next = Math.round(node.getBoundingClientRect().width);
+			return previous === next ? previous : next;
+		});
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(measure);
+		});
+		observer.observe(node);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [ref, enabled]);
+	return width;
+}
+/**
+* A profile panel — the ninth member of the analytics card family, and the
+* only one that compares **several items across several measures at once**.
+* MetricCard compares one metric with its own past; ComparisonCard compares
+* one metric across items; TrendCard asks what shape a metric is in over
+* time. ProfileCard answers the question none of them can: *what shape is
+* each of these things across the same set of measures, and where does one
+* lead or lag?*
+*
+* `mark="radar"` (default) draws the profile as a polygon per item — with the
+* axis order fixed, the fill off and the scaling announced, which is what
+* makes a radar honest. `mark="grouped"` is the accurate alternative for
+* comparing values, and `mark="parallel"` carries more items than a radar
+* can. Every reading is also in the popover table, the legend is real
+* toggles, and every loading, empty, error and stale state is layout-stable
+* inside one `Box` frame.
+*/
+const ProfileCard = forwardRef(({ label, name: nameProp, hint, metrics, items, mark = "radar", normalize = "shared", fill = false, vertices = true, axisLabels = true, focus, defaultFocus, onFocusChange, visibleSeries, defaultVisibleSeries, onVisibleSeriesChange, showLegend = true, format = "compact", formatValue, expectedMetrics = 5, expectedItems = 2, 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(() => resolveProfileLabels(labelOverrides), [labelOverrides]);
+	const sizes = sizeStyles[size];
+	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 [rootRef, setRootRef] = useMergedRef(forwardedRef);
+	const plotRef = useRef(null);
+	const legendRef = useRef(null);
+	const [popoverContainer, setPopoverContainer] = useState(null);
+	const tokens = useChartTokens(rootRef);
+	const [focusState, setFocusState] = useState(defaultFocus);
+	const focusKey = focus !== void 0 ? focus : focusState;
+	const selectFocus = useCallback((key) => {
+		if (focus === void 0) setFocusState(key);
+		onFocusChange?.(key);
+	}, [focus, onFocusChange]);
+	const [visibleState, setVisibleState] = useState(defaultVisibleSeries);
+	const resolvedVisible = visibleSeries !== void 0 ? visibleSeries : visibleState;
+	const hidden = useMemo(() => {
+		if (!resolvedVisible) return EMPTY_KEYS;
+		const shown = new Set(resolvedVisible);
+		return (items ?? []).map((item, index) => item.key ?? item.label ?? String(index)).filter((key) => !shown.has(key));
+	}, [resolvedVisible, items]);
+	const palette = tokens?.category ?? EMPTY_PALETTE;
+	const emphasis = tokens?.emphasis ?? "";
+	const summary = useMemo(() => normalizeProfile(metrics, items, {
+		focus: focusKey,
+		normalize,
+		hidden,
+		palette,
+		emphasis
+	}), [
+		metrics,
+		items,
+		focusKey,
+		normalize,
+		hidden,
+		palette,
+		emphasis
+	]);
+	const formatters = useMemo(() => createProfileFormatters({
+		format,
+		locale,
+		formatValue
+	}), [
+		format,
+		locale,
+		formatValue
+	]);
+	const hasData = (metrics?.length ?? 0) > 0 && (items?.length ?? 0) > 0;
+	const hasValue = (summary?.count ?? 0) > 0;
+	const state = deriveProfileState({
+		status,
+		hasValue,
+		hasData,
+		filtered
+	});
+	const showContent = state === "ready" || state === "refreshing";
+	const hasPlot = showContent && summary != null && summary.count > 0;
+	const asOfText = useMemo(() => {
+		if (updatedAt == null) return null;
+		return typeof updatedAtFormat === "function" ? updatedAtFormat(new Date(updatedAt)) : formatDate(updatedAt, {
+			granularity: updatedAtFormat,
+			locale,
+			timeZone
+		});
+	}, [
+		updatedAt,
+		updatedAtFormat,
+		locale,
+		timeZone
+	]);
+	const cardDescription = description ?? buildProfileDescription({
+		name,
+		state,
+		summary,
+		formatters,
+		normalize,
+		asOfText,
+		labels
+	});
+	const axisCount = summary?.metrics.length ?? 0;
+	const angleOf = useCallback((index) => axisCount > 0 ? index / axisCount * 2 * Math.PI : 0, [axisCount]);
+	const cellRows = useMemo(() => summary ? summary.cells.map((cell) => ({
+		...cell,
+		a: angleOf(cell.i)
+	})) : [], [summary, angleOf]);
+	const axisRows = useMemo(() => summary ? summary.metrics.map((metric) => ({
+		i: metric.index,
+		a: angleOf(metric.index),
+		m: metric.key,
+		ml: metric.label
+	})) : [], [summary, angleOf]);
+	const ringRows = useMemo(() => mark === "radar" && summary ? RING_LEVELS.flatMap((r) => summary.metrics.map((metric) => ({
+		i: metric.index,
+		a: angleOf(metric.index),
+		r
+	}))) : [], [
+		mark,
+		summary,
+		angleOf
+	]);
+	const datasets = useMemo(() => ({
+		[PROFILE_CELLS_DATASET]: cellRows,
+		[PROFILE_AXES_DATASET]: axisRows,
+		[PROFILE_RINGS_DATASET]: ringRows
+	}), [
+		cellRows,
+		axisRows,
+		ringRows
+	]);
+	const plotHeight = mark === "grouped" ? Math.max(sizes.plot, Math.max(axisCount, expectedMetrics) * sizes.groupedRow) : sizes.plot;
+	const plotWidth = usePlotWidth(plotRef, hasPlot);
+	const chartWidth = mark === "radar" ? Math.min(plotWidth, plotHeight) : plotWidth;
+	const chartHeight = mark === "radar" ? Math.min(plotWidth, plotHeight) : plotHeight;
+	const emphasize = summary?.focus != null && (summary?.series.length ?? 0) > 1;
+	const itemTitle = labels.tableMetric;
+	const spec = useMemo(() => {
+		if (!tokens) return null;
+		const built = buildProfilePlotSpec({
+			mark,
+			height: 240,
+			valueField: mark === "grouped" && normalize === "shared" ? "raw" : "n",
+			rings: mark === "radar",
+			fill,
+			vertices,
+			tooltip: true,
+			emphasize,
+			axisLabels,
+			itemTitle: name,
+			metricTitle: itemTitle,
+			valueTitle: name,
+			valueFormat: locale ? `${format}@${locale}` : format,
+			locale
+		}, tokens);
+		return patchSpec ? patchSpec(built) : built;
+	}, [
+		tokens,
+		mark,
+		normalize,
+		fill,
+		vertices,
+		emphasize,
+		axisLabels,
+		name,
+		itemTitle,
+		format,
+		locale,
+		patchSpec
+	]);
+	const chartDescription = summary && hasPlot ? buildProfileChartDescription({
+		mark,
+		name,
+		summary,
+		normalize,
+		labels
+	}) : void 0;
+	const metricByKey = useMemo(() => new Map((summary?.metrics ?? []).map((metric) => [metric.key, metric])), [summary]);
+	const tooltipContent = useCallback(({ item }) => {
+		const datum = item.datum;
+		if (!datum || datum.sl == null) return null;
+		return /* @__PURE__ */ jsx(ArcTooltipRows, { rows: [[/* @__PURE__ */ jsx(ProfileSeriesKey, {
+			mark,
+			label: datum.sl,
+			color: datum.c
+		}, "series"), ""], [datum.ml ?? "—", formatters.formatValue(datum.raw, datum.m ? metricByKey.get(datum.m) : void 0)]] });
+	}, [
+		mark,
+		formatters,
+		metricByKey
+	]);
+	const { handler: tooltipHandler, tooltip } = useArcTooltipHandler({ content: tooltipContent });
+	const embedOptions = useMemo(() => arcEmbedOptions({ tooltip: tooltipHandler }), [tooltipHandler]);
+	const shownSeries = summary?.series ?? EMPTY_SERIES;
+	const allKeys = useMemo(() => (items ?? []).map((item, index) => item.key ?? item.label ?? String(index)), [items]);
+	const toggleSeries = useCallback((key, next) => {
+		const current = resolvedVisible ?? allKeys;
+		const nextKeys = next ? allKeys.filter((k) => current.includes(k) || k === key) : current.filter((k) => k !== key);
+		if (visibleSeries === void 0) setVisibleState(nextKeys);
+		onVisibleSeriesChange?.(nextKeys);
+	}, [
+		resolvedVisible,
+		allKeys,
+		visibleSeries,
+		onVisibleSeriesChange
+	]);
+	const onLegendKeyDown = useCallback((event) => {
+		if (![
+			"ArrowRight",
+			"ArrowDown",
+			"ArrowLeft",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key) || shownSeries.length === 0) return;
+		event.preventDefault();
+		const current = shownSeries.findIndex((series) => series.role === "focus");
+		const last = shownSeries.length - 1;
+		const next = event.key === "Home" ? 0 : event.key === "End" ? last : event.key === "ArrowRight" || event.key === "ArrowDown" ? Math.min(last, current + 1) : Math.max(0, current - 1);
+		const target = shownSeries[next];
+		if (!target || target.role === "focus") return;
+		selectFocus(target.key);
+		requestAnimationFrame(() => {
+			legendRef.current?.querySelectorAll("[data-part=\"legend-chip\"]")[next]?.focus();
+		});
+	}, [shownSeries, selectFocus]);
+	const legendMode = onFocusChange || focus === void 0 ? "focus" : onVisibleSeriesChange || visibleSeries === void 0 ? "toggle" : "static";
+	const showInsight = insight != null && insight !== false;
+	const legendRows = Math.max(1, Math.ceil(Math.max(shownSeries.length, expectedItems) / 3));
+	const bodyMinHeight = plotHeight + (showLegend ? sizes.gapPx + legendRows * sizes.legendPx : 0) + (showInsight ? sizes.gapPx + 20 : 0);
+	const HeadingTag = `h${titleLevel}`;
+	const busy = state === "loading" || state === "refreshing";
+	const highlights = deriveProfileHighlights(summary, formatters);
+	const overCap = mark === "radar" && (summary?.overCap ?? false);
+	const underCap = mark === "radar" && (summary?.underCap ?? false) && hasPlot;
+	return /* @__PURE__ */ jsxs(Box, {
+		ref: setRootRef,
+		render: render ?? /* @__PURE__ */ jsx("figure", {}),
+		padding: sizes.padding,
+		"aria-labelledby": headingId,
+		"aria-describedby": descriptionId,
+		"aria-busy": busy || void 0,
+		"data-status": status,
+		"data-state": state,
+		"data-size": size,
+		"data-mark": mark,
+		"data-normalize": normalize,
+		"data-stale": stale ? "" : void 0,
+		"data-empty": state === "empty" || state === "no-match" ? "" : void 0,
+		"data-focus": summary?.focus?.key,
+		"data-over-cap": overCap ? "" : void 0,
+		"data-under-cap": underCap ? "" : void 0,
+		className: cn("relative flex min-w-0 flex-col", sizes.gap, className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: setPopoverContainer,
+				className: "contents"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-start justify-between gap-2",
+				children: [/* @__PURE__ */ jsx(HeadingTag, {
+					id: headingId,
+					className: cn(labelClasses, sizes.label, "truncate"),
+					"data-part": "label",
+					children: label
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1",
+					children: [
+						stale && /* @__PURE__ */ jsx(Badge, {
+							variant: "warning",
+							appearance: "soft",
+							size: "sm",
+							"data-part": "stale",
+							children: labels.stale
+						}),
+						hint && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+							delay: 150,
+							render: /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								iconOnly: true,
+								"aria-label": labels.about(name),
+								"aria-describedby": hintId,
+								className: headerControlClasses
+							}),
+							children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" })
+						}), /* @__PURE__ */ jsx(TooltipPopup, {
+							side: "top",
+							sideOffset: 6,
+							container: popoverContainer,
+							children: /* @__PURE__ */ jsx("span", {
+								id: hintId,
+								children: hint
+							})
+						})] }),
+						!hideTableToggle && hasPlot && summary && /* @__PURE__ */ jsxs(Popover, {
+							defaultOpen: defaultTableOpen,
+							children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+								render: /* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "sm",
+									iconOnly: true,
+									"aria-label": labels.showTable(name),
+									className: headerControlClasses
+								}),
+								children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" })
+							}), /* @__PURE__ */ jsxs(PopoverPopup, {
+								side: "bottom",
+								align: "end",
+								sideOffset: 8,
+								collisionPadding: 8,
+								container: popoverContainer,
+								className: "w-[min(32rem,var(--available-width))]",
+								"data-part": "popover",
+								children: [
+									/* @__PURE__ */ jsx(PopoverTitle, {
+										className: "sr-only",
+										children: labels.tableCaption(name)
+									}),
+									/* @__PURE__ */ jsx("p", {
+										className: cn(captionClasses, "mb-2"),
+										"data-part": "normalize-note",
+										children: labels.normalizeNote[normalize]
+									}),
+									/* @__PURE__ */ jsx(TableContainer, {
+										variant: "plain",
+										tabIndex: 0,
+										role: "region",
+										"aria-label": labels.tableCaption(name),
+										className: "max-h-[min(18rem,calc(var(--available-height)-5rem))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+										"data-part": "table",
+										children: /* @__PURE__ */ jsxs(Table, {
+											size: "sm",
+											stickyHeader: true,
+											hoverable: false,
+											children: [
+												/* @__PURE__ */ jsx(TableCaption, {
+													side: "top",
+													className: "sr-only",
+													children: labels.tableCaption(name)
+												}),
+												/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+													/* @__PURE__ */ jsx(TableHead, { children: labels.tableMetric }),
+													summary.series.map((series) => /* @__PURE__ */ jsxs(TableHead, {
+														className: "text-right",
+														"data-role": series.role,
+														children: [series.label, series.role === "focus" && /* @__PURE__ */ jsxs("span", {
+															className: "sr-only",
+															children: [
+																" (",
+																labels.highlighted,
+																")"
+															]
+														})]
+													}, series.key)),
+													/* @__PURE__ */ jsx(TableHead, {
+														className: "text-right",
+														children: labels.tableLeader
+													})
+												] }) }),
+												/* @__PURE__ */ jsx(TableBody, { children: summary.metrics.map((metric) => /* @__PURE__ */ jsxs(TableRow, { children: [
+													/* @__PURE__ */ jsx(TableCell, { children: metric.label }),
+													summary.series.map((series) => /* @__PURE__ */ jsx(TableCell, {
+														className: cn("text-right tabular-nums", metric.leader === series.key && "font-semibold text-foreground"),
+														children: formatters.formatValue(series.values[metric.index], metric)
+													}, series.key)),
+													/* @__PURE__ */ jsx(TableCell, {
+														className: "text-right text-muted-foreground",
+														children: metric.leader ? summary.series.find((series) => series.key === metric.leader)?.label ?? "—" : "—"
+													})
+												] }, metric.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__ */ jsx(Skeleton, {
+							variant: "rounded",
+							className: "w-full",
+							style: { height: plotHeight }
+						}), showLegend && /* @__PURE__ */ jsx("div", {
+							className: "flex flex-wrap gap-2",
+							children: Array.from({ length: Math.max(1, expectedItems) }, (_, index) => /* @__PURE__ */ jsx(Skeleton, {
+								variant: "rounded",
+								className: "w-20",
+								style: { height: sizes.legendPx - 6 }
+							}, index))
+						})]
+					}),
+					state === "error" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "server-error",
+						scope: "inline",
+						title: labels.error,
+						description: false,
+						action: onRetry ? /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							onClick: onRetry,
+							children: labels.retry
+						}) : void 0,
+						className: cn(tileStateClasses, "my-auto")
+					}),
+					state === "empty" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "empty",
+						scope: "inline",
+						title: labels.noData,
+						description: false,
+						className: cn(tileStateClasses, "my-auto")
+					}),
+					state === "no-match" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "no-results",
+						scope: "inline",
+						title: labels.noMatch,
+						description: false,
+						action: onClearFilters ? /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							variant: "secondary",
+							onClick: onClearFilters,
+							children: labels.clearFilters
+						}) : void 0,
+						className: cn(tileStateClasses, "my-auto")
+					}),
+					showContent && /* @__PURE__ */ jsxs("div", {
+						className: cn("flex min-w-0 flex-col", sizes.gap, state === "refreshing" && "bg-veil"),
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								ref: plotRef,
+								className: "relative w-full",
+								style: { height: plotHeight },
+								"data-part": "plot-block",
+								children: hasPlot && chartWidth > 0 && spec && /* @__PURE__ */ jsx(ArcVegaChart, {
+									spec,
+									options: embedOptions,
+									datasets,
+									description: chartDescription,
+									width: chartWidth,
+									height: chartHeight,
+									onEmbed,
+									className: "absolute top-0 left-1/2 -translate-x-1/2 [&_svg]:block [&_.vega-bindings:empty]:hidden",
+									style: {
+										width: chartWidth,
+										height: chartHeight
+									},
+									"data-part": "plot",
+									fallback: /* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "absolute inset-0"
+									})
+								})
+							}),
+							showLegend && summary && summary.series.length > 0 && /* @__PURE__ */ jsx(HorizontalScroll, {
+								fade: true,
+								className: "min-w-0",
+								"data-part": "legend-scroll",
+								children: /* @__PURE__ */ jsxs("div", {
+									ref: legendRef,
+									role: legendMode === "focus" ? "radiogroup" : "group",
+									"aria-label": labels.seriesGroup(name),
+									onKeyDown: legendMode === "focus" ? onLegendKeyDown : void 0,
+									className: cn("flex min-w-0 flex-wrap items-center gap-x-1 gap-y-1 font-sans", sizes.body),
+									"data-part": "legend",
+									children: [summary.series.map((series, index) => {
+										const chipLabel = /* @__PURE__ */ jsx("span", {
+											className: "min-w-0 truncate",
+											children: series.label
+										});
+										const key = /* @__PURE__ */ jsx(ProfileSeriesKey, {
+											mark,
+											color: series.color,
+											label: chipLabel
+										});
+										if (legendMode === "focus") {
+											const isFocus = series.role === "focus";
+											return /* @__PURE__ */ jsxs("button", {
+												type: "button",
+												role: "radio",
+												"aria-checked": isFocus,
+												tabIndex: isFocus || index === 0 && !summary.focus ? 0 : -1,
+												onClick: () => selectFocus(series.key),
+												className: cn("inline-flex max-w-full cursor-pointer items-center rounded-md px-1.5 py-1 text-left transition-colors", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", isFocus ? "bg-primary-50 font-medium text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"),
+												"data-part": "legend-chip",
+												"data-focused": isFocus ? "" : void 0,
+												children: [key, isFocus && /* @__PURE__ */ jsxs("span", {
+													className: "sr-only",
+													children: [
+														" (",
+														labels.highlighted,
+														")"
+													]
+												})]
+											}, series.key);
+										}
+										if (legendMode === "static") return /* @__PURE__ */ jsx("span", {
+											className: "inline-flex max-w-full items-center px-1.5 py-1 text-muted-foreground",
+											"data-part": "legend-chip",
+											children: key
+										}, series.key);
+										return /* @__PURE__ */ jsx(Toggle, {
+											variant: "ghost",
+											size: "sm",
+											pressed: true,
+											onPressedChange: (next) => toggleSeries(series.key, next),
+											disabled: summary.series.length <= 1,
+											"aria-label": labels.hideSeries(series.label),
+											className: "h-auto max-w-full px-1.5 py-1",
+											"data-part": "legend-chip",
+											children: key
+										}, series.key);
+									}), (items ?? []).map((item, index) => {
+										const key = allKeys[index];
+										if (summary.series.some((series) => series.key === key)) return null;
+										return /* @__PURE__ */ jsx(Toggle, {
+											variant: "ghost",
+											size: "sm",
+											pressed: false,
+											onPressedChange: () => toggleSeries(key, true),
+											"aria-label": labels.showSeries(item.label),
+											className: "h-auto max-w-full px-1.5 py-1 opacity-60",
+											"data-part": "legend-chip",
+											"data-hidden": "",
+											children: /* @__PURE__ */ jsx(ProfileSeriesKey, {
+												mark,
+												color: tokens?.mutedForeground,
+												label: /* @__PURE__ */ jsx("span", {
+													className: "min-w-0 truncate",
+													children: item.label
+												})
+											})
+										}, key);
+									})]
+								})
+							}),
+							showInsight && /* @__PURE__ */ jsxs("div", {
+								className: cn("flex items-start gap-2 font-sans text-foreground", sizes.body),
+								"data-part": "insight",
+								children: [/* @__PURE__ */ jsx(AILoader, {
+									size: "sm",
+									state: "default",
+									label: labels.insightMark,
+									className: cn("shrink-0", size === "sm" ? "" : "mt-0.5")
+								}), /* @__PURE__ */ jsx("p", {
+									className: "min-w-0 flex-1 text-xs leading-[1.8] [&_strong]:font-semibold [&_strong]:text-foreground",
+									children: insight
+								})]
+							}),
+							!showInsight && highlights && summary?.focus && /* @__PURE__ */ jsx("p", {
+								className: cn(captionClasses, "min-w-0"),
+								"data-part": "highlights",
+								children: labels.profileSentence({
+									name: summary.focus.label,
+									strongest: highlights.strongest.label,
+									strongestValue: highlights.strongestValue,
+									weakest: highlights.weakest.label,
+									weakestValue: highlights.weakestValue
+								})
+							})
+						]
+					})
+				]
+			}),
+			asOfText && /* @__PURE__ */ jsxs("figcaption", {
+				className: cn(captionClasses, "text-right"),
+				"data-part": "as-of",
+				children: [
+					labels.asOf,
+					" ",
+					asOfText
+				]
+			}),
+			tooltip
+		]
+	});
+});
+ProfileCard.displayName = "ProfileCard";
+//#endregion
+export { ProfileCard };