@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/TableCard/TableCard.js

@@ -0,0 +1,811 @@
+import { ArcVegaChart } from "../../lib/vega/ArcVegaChart.js";
+import { arcEmbedOptions } from "../../lib/vega/embed.js";
+import { formatDate, formatNumber } from "../../lib/vega/formatters.js";
+import { useChartTokens } from "../../lib/vega/tokens.js";
+import { ArcTooltipRows, useArcTooltipHandler } from "../../lib/vega/tooltip.js";
+import { TABLE_TREND_DATASET, TABLE_TREND_LATEST_DATASET, buildTableTrendSpec } from "./TableCard.chart.js";
+import { buildTableDescription, buildTableInsight, columnId, columnValueFormat, deriveTableState, nextSort, normalizeTable, resolveTableLabels, trendTimeFormat } from "./TableCard.model.js";
+import { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Badge, Box, Button, Skeleton, SkeletonGroup, SystemState, Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRow, Tooltip, TooltipPopup, TooltipTrigger, cn, meterIndicatorVariants, meterTrackVariants } from "@arcfusionz/arc-primitive-ui";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TableCard/TableCard.tsx
+const sizeStyles = {
+	sm: {
+		padding: "sm",
+		gap: "gap-2",
+		gapPx: 8,
+		label: "text-xs",
+		body: "text-xs",
+		table: "sm",
+		trend: 18,
+		meter: "sm",
+		badge: "sm",
+		rowPx: 36,
+		headerPx: 36
+	},
+	md: {
+		padding: "md",
+		gap: "gap-3",
+		gapPx: 12,
+		label: "text-sm",
+		body: "text-sm",
+		table: "sm",
+		trend: 22,
+		meter: "sm",
+		badge: "sm",
+		rowPx: 40,
+		headerPx: 36
+	},
+	lg: {
+		padding: "lg",
+		gap: "gap-3",
+		gapPx: 12,
+		label: "text-base",
+		body: "text-sm",
+		table: "md",
+		trend: 26,
+		meter: "md",
+		badge: "md",
+		rowPx: 52,
+		headerPx: 44
+	}
+};
+const labelClasses = "min-w-0 font-heading font-semibold tracking-tight text-foreground";
+const captionClasses = "font-sans text-xs text-muted-foreground";
+const insightClasses = "font-sans text-xs text-muted-foreground";
+const headerControlClasses = "size-6 min-w-0 text-muted-foreground hover:text-foreground";
+const panelStateClasses = "w-full max-w-none gap-3 px-3 py-6 [--artwork-box:4rem]";
+const cellButtonClasses = "h-auto min-w-0 rounded border-0 shadow-none text-inherit [font:inherit]";
+const sortButtonClasses = `${cellButtonClasses} -mx-2 w-full justify-start gap-1 px-2 py-1 hover:bg-muted`;
+const deltaTextClasses = {
+	positive: "text-chart-positive",
+	negative: "text-chart-negative",
+	neutral: "text-foreground"
+};
+const toneBadgeVariant = {
+	neutral: "neutral",
+	positive: "success",
+	negative: "destructive",
+	warning: "warning",
+	info: "primary"
+};
+const MISSING_NAME = "Table";
+const EMPTY_ROWS = [];
+const EMPTY_POINTS = [];
+function InfoIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "8",
+				r: "6.25"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M8 7.25v4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M8 4.9v.1",
+				strokeLinecap: "round"
+			})
+		]
+	});
+}
+function SortIcon({ direction, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		"aria-hidden": "true",
+		...props,
+		children: direction === "asc" ? /* @__PURE__ */ jsx("path", {
+			d: "M4.5 9.75 8 6.25l3.5 3.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}) : direction === "desc" ? /* @__PURE__ */ jsx("path", {
+			d: "M4.5 6.25 8 9.75l3.5-3.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", {
+			d: "M5.5 7 8 4.5 10.5 7",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			opacity: "0.5"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M5.5 9 8 11.5 10.5 9",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			opacity: "0.5"
+		})] })
+	});
+}
+function DeltaGlyph({ direction, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		...props,
+		children: direction === "up" ? /* @__PURE__ */ jsx("path", { d: "M6 2.5 10 8H2z" }) : direction === "down" ? /* @__PURE__ */ jsx("path", { d: "M6 9.5 2 4h8z" }) : /* @__PURE__ */ jsx("rect", {
+			x: "2",
+			y: "5.25",
+			width: "8",
+			height: "1.5",
+			rx: "0.75"
+		})
+	});
+}
+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])];
+}
+/**
+* The card's own width, so columns drop at their `hideBelow` and the table
+* decides when to scroll — container-driven, never viewport-driven, because a
+* dashboard puts the same card in a full-width row and in a third of one.
+* `0` until the first measurement, which happens before paint.
+*/
+function useContainerWidth(ref) {
+	const [width, setWidth] = useState(0);
+	useLayoutEffect(() => {
+		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(() => {
+			measure();
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(measure);
+		});
+		observer.observe(el);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [ref]);
+	return width;
+}
+/**
+* One row's sparkline. Its own element, its own `ResizeObserver` and its own
+* View — the spec and the embed options are the column's, shared by identity
+* across every row, so a re-render of the table never re-embeds a cell.
+*
+* `aria-hidden`: the reading is text in this cell and its neighbours, and the
+* series' shape is spelled out in the cell's own sentence. There is nothing
+* focusable inside, so hiding the subtree hides nothing reachable.
+*/
+function TrendCell({ cell, spec, options, height, latest, onEmbed }) {
+	const ref = useRef(null);
+	const width = useContainerWidth(ref);
+	const datasets = useMemo(() => {
+		const points = cell.points ?? EMPTY_POINTS;
+		const withValue = points.filter((point) => point.y != null);
+		return {
+			[TABLE_TREND_DATASET]: points,
+			[TABLE_TREND_LATEST_DATASET]: latest && withValue.length > 0 ? [withValue[withValue.length - 1]] : []
+		};
+	}, [cell.points, latest]);
+	const drawable = (cell.trend?.count ?? 0) > 1;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"aria-hidden": "true",
+		style: { height },
+		className: "min-w-0 flex-1",
+		children: drawable && width > 0 && /* @__PURE__ */ jsx(ArcVegaChart, {
+			spec,
+			options,
+			datasets,
+			width,
+			height,
+			onEmbed,
+			"data-part": "sparkline",
+			fallback: /* @__PURE__ */ jsx(Skeleton, {
+				variant: "rounded",
+				className: "w-full",
+				style: { height }
+			})
+		})
+	});
+}
+function BarCell({ cell, size, showValue }) {
+	const sizes = sizeStyles[size];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 items-center justify-end gap-2",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: meterTrackVariants({
+					size: sizes.meter,
+					className: "min-w-8 flex-1"
+				}),
+				children: cell.share != null && /* @__PURE__ */ jsx("div", {
+					className: meterIndicatorVariants({ className: "bg-chart-emphasis" }),
+					style: { width: `${cell.share * 100}%` }
+				})
+			}),
+			showValue ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 tabular-nums",
+				children: cell.text
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: cell.text
+			}),
+			cell.detail && /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: cell.detail
+			})
+		]
+	});
+}
+function DeltaCell({ cell, labels }) {
+	if (cell.delta == null) return /* @__PURE__ */ jsx("span", {
+		className: "tabular-nums text-muted-foreground",
+		children: "—"
+	});
+	const { direction, polarity } = cell.delta;
+	const word = direction === "up" ? labels.increase : direction === "down" ? labels.decrease : labels.unchanged;
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex items-center gap-1 font-medium", deltaTextClasses[polarity]),
+		children: [
+			/* @__PURE__ */ jsx(DeltaGlyph, {
+				direction,
+				className: "size-2.5 shrink-0"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "tabular-nums",
+				children: cell.delta.text
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: word
+			})
+		]
+	});
+}
+/**
+* An analytical table for dashboard grids and analysis pages: many entities
+* down the page, several measures across it, each column encoding what its
+* kind calls for — exact numbers, magnitude bars on the column's own
+* zero-based scale, signed deltas, categories, and a sparkline per row — with
+* sortable headings, a rank, an honest cap, opt-in footer totals, every
+* loading, empty, no-match, error and stale state, and a generated
+* description and insight sentence.
+*
+* It is the family's form for the question a plot cannot take: more measures
+* per entity than a chart can encode, exact values, and long names. Only the
+* trend column is a chart; every other cell is an Arc primitive.
+*/
+const TableCard = forwardRef(({ label, name: nameProp, hint, columns, rows = EMPTY_ROWS, rowKey, status = "ready", expectedRows = 5, filtered = false, onClearFilters, onRetry, sort: sortProp, defaultSort, onSortChange, sortable = true, showRank = false, maxRows = 10, totalRows, onShowAll, selectedRow: selectedRowProp, defaultSelectedRow, onRowSelect, size = "md", maxHeight, stickyColumn = true, zebra = false, trendMark = "line", trendLatest = true, insight, description, caption, updatedAt, updatedAtFormat = "day", stale = false, locale, timeZone, labels: labelsProp, action, titleLevel = 4, theme, patchSpec, onEmbed, className, render, ...rest }, forwardedRef) => {
+	const [rootRef, setRootRef] = useMergedRef(forwardedRef);
+	const headingId = useId();
+	const descriptionId = useId();
+	const hintId = useId();
+	const captionId = useId();
+	const labels = resolveTableLabels(labelsProp);
+	const name = nameProp ?? (typeof label === "string" ? label : MISSING_NAME);
+	const sizes = sizeStyles[size];
+	const tokens = useChartTokens(rootRef, theme);
+	const cardWidth = useContainerWidth(rootRef);
+	const isSortControlled = sortProp !== void 0;
+	const [sortState, setSortState] = useState(defaultSort ?? null);
+	const sort = isSortControlled ? sortProp ?? null : sortState;
+	const sortInteractive = sortable && (!isSortControlled || onSortChange != null);
+	const [announcement, setAnnouncement] = useState("");
+	const applySort = useCallback((column) => {
+		const next = nextSort(sort, column);
+		if (!isSortControlled) setSortState(next);
+		onSortChange?.(next);
+		setAnnouncement(labels.sortedBy(column.header, next.direction));
+	}, [
+		sort,
+		isSortControlled,
+		onSortChange,
+		labels
+	]);
+	const isSelectionControlled = selectedRowProp !== void 0;
+	const [selectionState, setSelectionState] = useState(defaultSelectedRow ?? null);
+	const selectedRow = isSelectionControlled ? selectedRowProp ?? null : selectionState;
+	const selectRow = useCallback((key) => {
+		if (!isSelectionControlled) setSelectionState(key);
+		onRowSelect?.(key);
+	}, [isSelectionControlled, onRowSelect]);
+	const state = deriveTableState({
+		status,
+		rowCount: rows.length,
+		filtered
+	});
+	const showContent = state === "ready" || state === "refreshing";
+	const summary = useMemo(() => normalizeTable({
+		columns,
+		rows,
+		rowKey,
+		sort,
+		maxRows,
+		totalRows,
+		showRank,
+		locale,
+		timeZone,
+		labels
+	}), [
+		columns,
+		rows,
+		rowKey,
+		sort,
+		maxRows,
+		totalRows,
+		showRank,
+		locale,
+		timeZone,
+		labels
+	]);
+	const visibleColumns = useMemo(() => summary.columns.filter((column) => {
+		const below = column.column.hideBelow;
+		return below == null || cardWidth === 0 || cardWidth >= below;
+	}), [summary.columns, cardWidth]);
+	const rankVisible = showRank && sort != null && summary.sortColumn != null;
+	const hasTotals = visibleColumns.some((column) => column.totalText != null);
+	const trendColumns = visibleColumns.filter((column) => column.kind === "trend");
+	const hasTrend = trendColumns.length > 0;
+	const rowHeaderId = visibleColumns.find((column) => column.kind === "text")?.id;
+	const cardDescription = description ?? buildTableDescription({
+		name,
+		summary,
+		labels,
+		sort,
+		updatedAt,
+		updatedAtFormat,
+		locale,
+		timeZone
+	});
+	const generatedInsight = useMemo(() => insight === void 0 ? buildTableInsight({
+		summary,
+		labels,
+		locale
+	}) : null, [
+		insight,
+		summary,
+		labels,
+		locale
+	]);
+	const insightNode = insight === false ? null : insight === void 0 ? generatedInsight : insight;
+	const trendColumn = trendColumns[0]?.column;
+	const trendId = trendColumn ? columnId(trendColumn) : "";
+	const xType = useMemo(() => {
+		const sample = summary.rows.find((row) => (row.byField[trendId]?.points?.length ?? 0) > 0)?.byField[trendId]?.points?.[0];
+		if (sample == null) return "quantitative";
+		if (typeof sample.x === "number") return "quantitative";
+		return trendColumn?.granularity != null ? "temporal" : "ordinal";
+	}, [
+		summary.rows,
+		trendColumn,
+		trendId
+	]);
+	const tooltipFormat = trendColumn != null ? columnValueFormat(trendColumn, locale) : "compact";
+	const tooltip = useArcTooltipHandler({ content: ({ item }) => {
+		const datum = item.datum?.datum ?? item.datum;
+		if (datum == null || datum.y == null) return null;
+		const xText = xType === "temporal" ? formatDate(datum.x, {
+			granularity: trendColumn?.granularity ?? "day",
+			locale,
+			timeZone
+		}) : String(datum.x);
+		return /* @__PURE__ */ jsx(ArcTooltipRows, { rows: [[trendColumn?.header ?? "", formatNumber(datum.y, tooltipFormat, locale)], ["", xText]] });
+	} });
+	const embedOptions = useMemo(() => arcEmbedOptions({ tooltip: tooltip.handler }), [tooltip.handler]);
+	const trendSpec = useMemo(() => {
+		if (tokens == null || trendColumn == null) return null;
+		const spec = buildTableTrendSpec({
+			mark: trendColumn.mark ?? trendMark,
+			height: sizes.trend,
+			latest: trendLatest,
+			tooltip: true,
+			xType,
+			xTitle: trendColumn.header,
+			yTitle: trendColumn.header,
+			valueFormat: tooltipFormat,
+			timeFormat: trendTimeFormat(trendColumn.granularity, locale, timeZone),
+			locale,
+			timeZone
+		}, tokens);
+		return patchSpec ? patchSpec(spec) : spec;
+	}, [
+		tokens,
+		trendColumn,
+		trendMark,
+		sizes.trend,
+		trendLatest,
+		xType,
+		tooltipFormat,
+		locale,
+		timeZone,
+		patchSpec
+	]);
+	const bodyRows = showContent ? summary.count : Math.max(1, expectedRows);
+	const bodyMinHeight = sizes.headerPx + bodyRows * sizes.rowPx + (hasTotals ? sizes.rowPx : 0);
+	const busy = state === "loading" || state === "refreshing";
+	const HeadingTag = `h${titleLevel}`;
+	const columnCount = visibleColumns.length;
+	useEffect(() => {
+		if (announcement === "") return;
+		const timer = setTimeout(() => setAnnouncement(""), 1e3);
+		return () => clearTimeout(timer);
+	}, [announcement]);
+	const isRowHeaderColumn = (column) => column.id === rowHeaderId;
+	const renderCell = (cell, column, row) => {
+		switch (column.kind) {
+			case "text": {
+				const drillable = onRowSelect != null;
+				const ordinal = rankVisible && isRowHeaderColumn(column) && row.rank != null ? row.rank : null;
+				const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+					className: "block truncate",
+					children: [ordinal != null && /* @__PURE__ */ jsxs("span", {
+						className: "mr-1.5 font-normal tabular-nums text-muted-foreground",
+						"data-part": "rank",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "sr-only",
+							children: [labels.rank(ordinal), ", "]
+						}), /* @__PURE__ */ jsxs("span", {
+							"aria-hidden": "true",
+							children: [ordinal, "."]
+						})]
+					}), cell.text]
+				}), cell.caption && /* @__PURE__ */ jsx("span", {
+					className: "block truncate text-xs font-normal text-muted-foreground",
+					children: cell.caption
+				})] });
+				if (!drillable) return /* @__PURE__ */ jsx("span", {
+					className: "block min-w-0",
+					children: body
+				});
+				return /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: () => selectRow(row.key),
+					"aria-label": labels.openRow(row.label),
+					className: cn(cellButtonClasses, "-mx-2 w-full justify-start px-2 py-1 text-left hover:underline"),
+					children: body
+				});
+			}
+			case "number": return /* @__PURE__ */ jsx("span", {
+				className: "tabular-nums",
+				children: cell.text
+			});
+			case "bar": return /* @__PURE__ */ jsx(BarCell, {
+				cell,
+				size,
+				showValue: column.column.showValue ?? true
+			});
+			case "delta": return /* @__PURE__ */ jsx(DeltaCell, {
+				cell,
+				labels
+			});
+			case "badge": return cell.sortValue == null ? /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: "—"
+			}) : /* @__PURE__ */ jsx(Badge, {
+				variant: toneBadgeVariant[cell.tone ?? "neutral"],
+				appearance: "soft",
+				size: sizes.badge,
+				className: "max-w-full",
+				title: cell.text,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: cell.text
+				})
+			});
+			case "trend": return /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [trendSpec != null ? /* @__PURE__ */ jsx(TrendCell, {
+					cell,
+					spec: trendSpec,
+					options: embedOptions,
+					height: sizes.trend,
+					latest: trendLatest,
+					onEmbed
+				}) : /* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					style: { height: sizes.trend },
+					className: "min-w-0 flex-1"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: cell.detail
+				})]
+			});
+		}
+	};
+	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-sort": sort ? `${sort.field}:${sort.direction}` : void 0,
+		"data-rows": showContent ? summary.count : void 0,
+		"data-truncated": showContent && summary.truncated > 0 ? summary.truncated : void 0,
+		"data-selected": showContent ? selectedRow ?? void 0 : void 0,
+		"data-empty": state === "empty" || state === "no-match" ? "" : void 0,
+		"data-stale": stale ? "" : void 0,
+		"data-insufficient": showContent && summary.insufficient ? "" : void 0,
+		"data-trend": hasTrend ? "" : 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
+					}), action]
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: descriptionId,
+				className: "sr-only",
+				children: cardDescription
+			}),
+			/* @__PURE__ */ jsx("p", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				"data-part": "announcement",
+				children: announcement
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative flex min-w-0 flex-col",
+				style: { minHeight: bodyMinHeight },
+				children: [
+					state === "loading" && /* @__PURE__ */ jsxs(SkeletonGroup, {
+						className: "flex flex-col gap-2",
+						"data-part": "rows-skeleton",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "flex items-center gap-3",
+							style: { height: sizes.headerPx },
+							children: Array.from({ length: Math.max(2, columnCount) }, (_, index) => /* @__PURE__ */ jsx(Skeleton, {
+								variant: "rounded",
+								className: cn("h-3", index === 0 ? "flex-[2]" : "flex-1")
+							}, index))
+						}), Array.from({ length: Math.max(1, expectedRows) }, (_, row) => /* @__PURE__ */ jsx("div", {
+							className: "flex items-center gap-3",
+							style: { height: sizes.rowPx },
+							children: Array.from({ length: Math.max(2, columnCount) }, (_, index) => /* @__PURE__ */ jsx(Skeleton, {
+								variant: "rounded",
+								className: cn("h-3", index === 0 ? "flex-[2]" : "flex-1")
+							}, index))
+						}, row))]
+					}),
+					state === "error" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "server-error",
+						scope: "inline",
+						title: labels.error,
+						description: false,
+						action: onRetry ? /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							onClick: onRetry,
+							children: labels.retry
+						}) : void 0,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					state === "empty" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "empty",
+						scope: "inline",
+						title: labels.noData,
+						description: false,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					state === "no-match" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "no-results",
+						scope: "inline",
+						title: labels.noMatch,
+						description: false,
+						action: onClearFilters ? /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: onClearFilters,
+							children: labels.clearFilters
+						}) : void 0,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					showContent && /* @__PURE__ */ jsxs("div", {
+						className: cn("flex min-w-0 flex-col", sizes.gap),
+						children: [
+							/* @__PURE__ */ jsx(TableContainer, {
+								variant: "plain",
+								style: maxHeight != null ? { maxHeight } : void 0,
+								className: "min-w-0",
+								children: /* @__PURE__ */ jsxs(Table, {
+									size: sizes.table,
+									layout: "fixed",
+									stickyHeader: maxHeight != null,
+									stickyFirstColumn: stickyColumn,
+									striped: zebra,
+									hoverable: true,
+									className: cn("w-full", sizes.body),
+									"data-part": "table",
+									children: [
+										/* @__PURE__ */ jsx(TableCaption, {
+											side: "bottom",
+											id: captionId,
+											className: "sr-only",
+											children: caption ?? labels.caption(name)
+										}),
+										/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: visibleColumns.map((column) => {
+											const active = sort?.field === column.id;
+											const direction = active ? sort?.direction ?? null : null;
+											const canSort = sortInteractive && column.sortable;
+											const heading = /* @__PURE__ */ jsxs("span", {
+												className: "flex min-w-0 flex-col items-start",
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "truncate",
+													children: column.header
+												}), column.column.unit && /* @__PURE__ */ jsx("span", {
+													className: "truncate text-xs font-normal text-muted-foreground",
+													children: column.column.unit
+												})]
+											});
+											return /* @__PURE__ */ jsx(TableHead, {
+												scope: "col",
+												"aria-sort": active ? direction === "asc" ? "ascending" : "descending" : canSort ? "none" : void 0,
+												"data-column": column.id,
+												"data-field": column.field,
+												"data-kind": column.kind,
+												style: column.column.width != null ? { width: column.column.width } : void 0,
+												className: cn("min-w-0", column.align === "end" && "text-right"),
+												children: /* @__PURE__ */ jsxs("span", {
+													className: cn("flex min-w-0 items-center gap-1", column.align === "end" && "justify-end"),
+													children: [canSort ? /* @__PURE__ */ jsxs(Button, {
+														variant: "ghost",
+														size: "sm",
+														onClick: () => applySort(column),
+														"aria-label": active ? direction === "asc" ? labels.sortDescending(column.header) : labels.sortAscending(column.header) : labels.sortBy(column.header),
+														className: cn(sortButtonClasses, column.align === "end" && "justify-end"),
+														children: [heading, /* @__PURE__ */ jsx(SortIcon, {
+															direction,
+															className: cn("size-3 shrink-0", active ? "text-foreground" : "text-muted-foreground")
+														})]
+													}) : heading, column.column.hint && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+														render: /* @__PURE__ */ jsx(Button, {
+															variant: "ghost",
+															size: "sm",
+															iconOnly: true,
+															circular: true,
+															"aria-label": labels.about(column.header),
+															className: cn(headerControlClasses, "size-5 shrink-0")
+														}),
+														children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-3" })
+													}), /* @__PURE__ */ jsx(TooltipPopup, { children: column.column.hint })] })]
+												})
+											}, column.id);
+										}) }) }),
+										/* @__PURE__ */ jsx(TableBody, { children: summary.rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
+											selected: selectedRow === row.key,
+											"data-row": row.key,
+											style: { height: sizes.rowPx },
+											children: visibleColumns.map((column) => {
+												const cell = row.byField[column.id];
+												const isRowHeader = isRowHeaderColumn(column);
+												const content = cell != null ? renderCell(cell, column, row) : /* @__PURE__ */ jsx("span", {
+													className: "text-muted-foreground",
+													children: "—"
+												});
+												return /* @__PURE__ */ jsx(TableCell, {
+													render: isRowHeader ? /* @__PURE__ */ jsx("th", { scope: "row" }) : void 0,
+													"data-column": column.id,
+													"data-field": column.field,
+													className: cn("min-w-0", column.align === "end" && "text-right", isRowHeader && "font-medium text-foreground"),
+													children: content
+												}, column.id);
+											})
+										}, row.key)) }),
+										hasTotals && /* @__PURE__ */ jsx(TableFooter, { children: /* @__PURE__ */ jsx(TableRow, {
+											style: { height: sizes.rowPx },
+											children: visibleColumns.map((column, index) => {
+												const first = index === 0;
+												return /* @__PURE__ */ jsx(TableCell, {
+													render: first ? /* @__PURE__ */ jsx("th", { scope: "row" }) : void 0,
+													"data-column": column.id,
+													"data-field": column.field,
+													className: cn("min-w-0 font-medium", column.align === "end" && "text-right", column.totalText != null && "tabular-nums"),
+													children: first ? labels.total : column.totalText ?? null
+												}, column.id);
+											})
+										}) })
+									]
+								})
+							}),
+							insightNode && /* @__PURE__ */ jsx("p", {
+								className: insightClasses,
+								"data-part": "insight",
+								children: insightNode
+							}),
+							(summary.truncated > 0 || summary.insufficient || updatedAt != null) && /* @__PURE__ */ jsxs("div", {
+								className: cn("flex flex-wrap items-center gap-x-3 gap-y-1", captionClasses),
+								children: [
+									summary.truncated > 0 && /* @__PURE__ */ jsxs("span", {
+										"data-part": "truncation",
+										children: [labels.showingTopOf(summary.count, summary.total), onShowAll && /* @__PURE__ */ jsx(Button, {
+											variant: "ghost",
+											size: "sm",
+											onClick: onShowAll,
+											className: "ml-1 h-auto px-1 py-0 text-xs underline",
+											children: labels.showAll
+										})]
+									}),
+									summary.insufficient && /* @__PURE__ */ jsx("span", {
+										"data-part": "insufficient",
+										children: labels.insufficient
+									}),
+									updatedAt != null && /* @__PURE__ */ jsxs("span", {
+										"data-part": "as-of",
+										children: [
+											labels.asOf,
+											" ",
+											formatDate(updatedAt, {
+												granularity: updatedAtFormat,
+												locale,
+												timeZone
+											})
+										]
+									})
+								]
+							})
+						]
+					}),
+					state === "refreshing" && /* @__PURE__ */ jsx("div", {
+						className: "absolute inset-0 z-10 rounded-md bg-veil",
+						"aria-hidden": "true",
+						"data-part": "veil"
+					})
+				]
+			}),
+			tooltip.tooltip
+		]
+	});
+});
+TableCard.displayName = "TableCard";
+//#endregion
+export { TableCard };