@galaxy-io/dls 1.3.6 → 1.4.1

package/dist/charts/ChartPrimitives.js

@@ -138,23 +138,6 @@ var ChartArcPath = /*#__PURE__*/ styled("path")({
 	propsAsIs: true
 });
 /**
-* Wraps the marks while the chart is loading.
-*
-* Only motion lives here — the slow pulse shared with `TextShimmer` and
-* `AvatarShimmer`, so a loading chart breathes in step with every other
-* skeleton on the page. Colour arrives through the series resolver like any
-* other mark colour, which is what lets bars and arcs ghost by `fill` and
-* lines by `stroke` without per-shape CSS here.
-*
-* Under reduced motion the pulse pins at its midpoint rather than sitting at
-* full strength, so the chart still reads as a placeholder and not as data.
-*/
-var ChartSkeletonGroup = /*#__PURE__*/ styled("g")({
-	name: "ChartSkeletonGroup",
-	class: "c1wvzvu4",
-	propsAsIs: true
-});
-/**
 * Per-category hit target, rendered above the marks.
 *
 * Hit testing the full column rather than the bars themselves means a two-pixel
@@ -167,7 +150,7 @@ var ChartSkeletonGroup = /*#__PURE__*/ styled("g")({
 */
 var ChartHitTarget = /*#__PURE__*/ styled("rect")({
 	name: "ChartHitTarget",
-	class: "c17guewt",
+	class: "c1wvzvu4",
 	propsAsIs: true
 });
 /**
@@ -180,7 +163,7 @@ var ChartHitTarget = /*#__PURE__*/ styled("rect")({
 */
 var ChartHitTargetPath = /*#__PURE__*/ styled("path")({
 	name: "ChartHitTargetPath",
-	class: "cblgiyf",
+	class: "c17guewt",
 	propsAsIs: true
 });
 /**
@@ -188,24 +171,24 @@ var ChartHitTargetPath = /*#__PURE__*/ styled("path")({
 * zero — the line under the bars is what makes them read as resting on a
 * baseline.
 */
-var _exp16 = () => ({ theme }) => theme.color.border.primary;
+var _exp15 = () => ({ theme }) => theme.color.border.primary;
 var ChartGridLine = withTheme(/*#__PURE__*/ styled("line")({
 	name: "ChartGridLine",
-	class: "c1lr03cc",
+	class: "cblgiyf",
 	propsAsIs: true,
-	vars: { "c1lr03cc-0": [_exp16()] }
+	vars: { "cblgiyf-0": [_exp15()] }
 }));
 /** Vertical rule marking the hovered category on a line chart. */
-var _exp17 = () => ({ theme }) => theme.color.border.secondary;
+var _exp16 = () => ({ theme }) => theme.color.border.secondary;
 var ChartCursorLine = withTheme(/*#__PURE__*/ styled("line")({
 	name: "ChartCursorLine",
-	class: "cizy1s8",
+	class: "c1lr03cc",
 	propsAsIs: true,
-	vars: { "cizy1s8-0": [_exp17()] }
+	vars: { "c1lr03cc-0": [_exp16()] }
 }));
 var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 	name: "ChartAxisLabelBox",
-	class: "c1ukq11d",
+	class: "cizy1s8",
 	propsAsIs: true
 });
 /**
@@ -215,24 +198,50 @@ var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 * than teleporting, and it stays mounted while hidden so the fade can actually
 * run — unmounting on hide is why a fade-out never appears.
 */
-var _exp18 = () => ({ $x }) => `${$x}px`;
-var _exp19 = () => ({ $y }) => `${$y}px`;
-var _exp22 = () => ({ theme }) => theme.color.border.primary;
-var _exp23 = () => ({ theme }) => theme.color.background.primary;
-var _exp24 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
+var _exp17 = () => ({ $x }) => `${$x}px`;
+var _exp18 = () => ({ $y }) => `${$y}px`;
+var _exp21 = () => ({ theme }) => theme.color.border.primary;
+var _exp22 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp23 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
 var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartTooltipPositioner",
-	class: "cwcko2m",
+	class: "c1ukq11d",
 	propsAsIs: false,
 	vars: {
-		"cwcko2m-0": [_exp18()],
-		"cwcko2m-1": [_exp19()],
-		"cwcko2m-2": [_exp22()],
-		"cwcko2m-3": [_exp23()],
-		"cwcko2m-4": [_exp24()]
+		"c1ukq11d-0": [_exp17()],
+		"c1ukq11d-1": [_exp18()],
+		"c1ukq11d-2": [_exp21()],
+		"c1ukq11d-3": [_exp22()],
+		"c1ukq11d-4": [_exp23()]
 	}
 }));
 /**
+* Two-column tooltip body: label column, one gutter, value column.
+*
+* A grid rather than per-row `space-between`, so every row shares the same
+* column boundary: the value column is sized by the widest value and every
+* value is guaranteed its full width, while the labels take the remainder and
+* all ellipsize against the same edge. Per-row flex made the label→value gap
+* drift with each label's length, which read as misalignment down the list.
+*/
+var ChartTooltipGrid = /*#__PURE__*/ styled("div")({
+	name: "ChartTooltipGrid",
+	class: "cwcko2m",
+	propsAsIs: false
+});
+/** Swatch + label. `min-width: 0` is what lets the label actually ellipsize. */
+var ChartTooltipLabelCell = /*#__PURE__*/ styled("div")({
+	name: "ChartTooltipLabelCell",
+	class: "cqwhvyz",
+	propsAsIs: false
+});
+/** Right-aligned and never wrapped — the value always shows in full. */
+var ChartTooltipValueCell = /*#__PURE__*/ styled("div")({
+	name: "ChartTooltipValueCell",
+	class: "c1iaray",
+	propsAsIs: false
+});
+/**
 * Content well inside a donut hole.
 *
 * Rendered as HTML positioned over the SVG rather than as `<text>`, so the
@@ -240,32 +249,32 @@ var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 * of the DLS. `pointer-events: none` keeps it from stealing hover from the arc
 * behind it.
 */
-var _exp28 = () => ({ $centerX }) => `${$centerX}px`;
-var _exp29 = () => ({ $centerY }) => `${$centerY}px`;
-var _exp31 = () => ({ $diameter }) => `${$diameter}px`;
+var _exp27 = () => ({ $centerX }) => `${$centerX}px`;
+var _exp28 = () => ({ $centerY }) => `${$centerY}px`;
+var _exp30 = () => ({ $diameter }) => `${$diameter}px`;
 var ChartCenterBox = /*#__PURE__*/ styled("div")({
 	name: "ChartCenterBox",
-	class: "cqwhvyz",
+	class: "cz6jod1",
 	propsAsIs: false,
 	vars: {
-		"cqwhvyz-0": [_exp28()],
-		"cqwhvyz-1": [_exp29()],
-		"cqwhvyz-2": [_exp31()]
+		"cz6jod1-0": [_exp27()],
+		"cz6jod1-1": [_exp28()],
+		"cz6jod1-2": [_exp30()]
 	}
 });
 /**
 * Sits slightly above centre, over where the bars would be, so the axes stay
 * legible underneath.
 */
-var _exp32 = () => ({ theme }) => theme.color.border.primary;
-var _exp33 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp31 = () => ({ theme }) => theme.color.border.primary;
+var _exp32 = () => ({ theme }) => theme.color.background.primary;
 var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartEmptyOverlay",
-	class: "c1iaray",
+	class: "c1de5mqk",
 	propsAsIs: false,
 	vars: {
-		"c1iaray-0": [_exp32()],
-		"c1iaray-1": [_exp33()]
+		"c1de5mqk-0": [_exp31()],
+		"c1de5mqk-1": [_exp32()]
 	}
 }));
 /**
@@ -277,23 +286,23 @@ var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 * the marks dim instantly while their legend entries sit through the full
 * {@link CHART_RESTORE_DELAY_MS}, and the two visibly fall out of step.
 */
-var _exp34 = () => ({ $vertical }) => $vertical ? "column" : "row";
-var _exp35 = () => ({ $vertical }) => $vertical ? "nowrap" : "wrap";
-var _exp36 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
-var _exp37 = () => ({ $vertical }) => $vertical ? "8px" : "8px 16px";
-var _exp38 = () => ({ $vertical }) => $vertical ? "0" : "10px";
-var _exp39 = () => ({ $inset }) => `${$inset}px`;
+var _exp33 = () => ({ $vertical }) => $vertical ? "column" : "row";
+var _exp34 = () => ({ $vertical }) => $vertical ? "nowrap" : "wrap";
+var _exp35 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
+var _exp36 = () => ({ $vertical }) => $vertical ? "8px" : "8px 16px";
+var _exp37 = () => ({ $vertical }) => $vertical ? "0" : "10px";
+var _exp38 = () => ({ $inset }) => `${$inset}px`;
 var ChartLegendRow = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendRow",
-	class: "cz6jod1",
+	class: "cjirv6a",
 	propsAsIs: false,
 	vars: {
-		"cz6jod1-0": [_exp34()],
-		"cz6jod1-1": [_exp35()],
-		"cz6jod1-2": [_exp36()],
-		"cz6jod1-3": [_exp37()],
-		"cz6jod1-4": [_exp38()],
-		"cz6jod1-5": [_exp39()]
+		"cjirv6a-0": [_exp33()],
+		"cjirv6a-1": [_exp34()],
+		"cjirv6a-2": [_exp35()],
+		"cjirv6a-3": [_exp36()],
+		"cjirv6a-4": [_exp37()],
+		"cjirv6a-5": [_exp38()]
 	}
 });
 /**
@@ -310,14 +319,14 @@ var ChartLegendRow = /*#__PURE__*/ styled("div")({
 */
 var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
 	name: "ChartLegendItemButton",
-	class: "c1de5mqk",
+	class: "c1armna5",
 	propsAsIs: false
 });
 /** The same row, when the legend is inert — no button semantics to announce. */
 var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendItemStatic",
-	class: "cjirv6a",
+	class: "cgd77rv",
 	propsAsIs: false
 });
 //#endregion
-export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSkeletonGroup, ChartSvg, ChartTooltipPositioner };
+export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };

package/dist/charts/ChartTooltip.js

@@ -1,10 +1,10 @@
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
 import FlexItem from "../containers/FlexItem.js";
-import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
+import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
 import Circle from "../shapes/Circle.js";
 import { useChartTooltipPosition } from "./useChartTooltipPosition.js";
-import { ChartTooltipPositioner } from "./ChartPrimitives.js";
-import { useState } from "react";
+import { ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell } from "./ChartPrimitives.js";
+import { Fragment, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartTooltip.tsx
 var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer }) => {
@@ -36,40 +36,22 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
 				variant: TextVariant.TERTIARY,
 				isEllipsis: true,
 				children: displayed.label
-			}), /* @__PURE__ */ jsx(FlexWrapper, {
-				direction: FlexDirection.COLUMN,
-				gap: 6,
-				fillWidth: true,
-				children: displayed.rows.map((row) => /* @__PURE__ */ jsxs(FlexWrapper, {
-					alignItems: AlignItems.CENTER,
-					justifyContent: JustifyContent.SPACE_BETWEEN,
-					gap: 16,
-					fillWidth: true,
-					children: [/* @__PURE__ */ jsxs(FlexWrapper, {
-						alignItems: AlignItems.CENTER,
-						gap: 6,
-						minWidth: 0,
-						children: [/* @__PURE__ */ jsx(FlexItem, {
-							shrink: 0,
-							children: /* @__PURE__ */ jsx(Circle, {
-								size: 8,
-								hex: row.color
-							})
-						}), /* @__PURE__ */ jsx(Text, {
-							size: TextSize.BODY_SM,
-							isEllipsis: true,
-							children: row.label
-						})]
-					}), /* @__PURE__ */ jsx(FlexItem, {
-						shrink: 0,
-						children: /* @__PURE__ */ jsx(Text, {
-							size: TextSize.BODY_SM,
-							weight: TextWeight.MEDIUM,
-							children: row.formattedValue
-						})
-					})]
-				}, row.key))
-			})]
+			}), /* @__PURE__ */ jsx(ChartTooltipGrid, { children: displayed.rows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ChartTooltipLabelCell, { children: [/* @__PURE__ */ jsx(FlexItem, {
+				shrink: 0,
+				children: /* @__PURE__ */ jsx(Circle, {
+					size: 8,
+					hex: row.color
+				})
+			}), /* @__PURE__ */ jsx(Text, {
+				size: TextSize.BODY_SM,
+				isEllipsis: true,
+				children: row.label
+			})] }), /* @__PURE__ */ jsx(ChartTooltipValueCell, { children: /* @__PURE__ */ jsx(Text, {
+				size: TextSize.BODY_SM,
+				weight: TextWeight.MEDIUM,
+				align: "right",
+				children: row.formattedValue
+			}) })] }, row.key)) })]
 		})
 	});
 };

package/dist/charts/LineChart.js

@@ -1,14 +1,14 @@
 import { ChartKind, ChartTargetShape, LineChartCurve } from "./types.js";
-import { LINE_AREA_OPACITY, LINE_POINT_RADIUS, SKELETON_LINE_SERIES } from "./constants.js";
+import { LINE_AREA_OPACITY, LINE_POINT_RADIUS } from "./constants.js";
 import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { useChartInteraction } from "./useChartInteraction.js";
 import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
 import { buildLineChartGeometry, getLineValueDomain } from "./lineChartGeometry.js";
-import { ChartAreaPath, ChartCursorLine, ChartLinePath, ChartPointCircle, ChartSkeletonGroup } from "./ChartPrimitives.js";
+import { ChartAreaPath, ChartCursorLine, ChartLinePath, ChartPointCircle } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
 import { useCallback, useMemo, useRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/LineChart.tsx
 /**
 * Line chart over a categorical x-axis.
@@ -21,27 +21,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve = LineChartCurve.SMOOTH, strokeWidth, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
-	/**
-	* The data actually rendered: the caller's, or ghost lines while loading.
-	*
-	* Loading replaces the chart wholesale with skeleton data pushed through the
-	* real geometry pipeline — offset lines drawn with their area fills, so the
-	* placeholder has the layered depth of a real multi-series chart. The cast is
-	* safe because nothing derived from it ever surfaces: labels are hidden,
-	* targets are off, the legend shows stubs, and the accessible name says
-	* "loading" instead of counting.
-	*/
-	const displayLines = useMemo(() => isLoading ? SKELETON_LINE_SERIES.map((values, lineIndex) => ({
-		metric: `skeleton-${lineIndex}`,
-		showArea: true,
-		points: values.map((value, index) => ({
-			x: `skeleton-${index}`,
-			y: value
-		}))
-	})) : lines, [isLoading, lines]);
 	const { dimensions, domain, valueTicks, formatValue, formatLabel } = useCartesianChartLayout({
 		containerRef,
-		rawDomain: useMemo(() => getLineValueDomain(displayLines), [displayLines]),
+		rawDomain: useMemo(() => getLineValueDomain(lines), [lines]),
 		valueDomain,
 		width,
 		height,
@@ -56,10 +38,10 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		categoryAxisTitle
 	});
 	const { plotWidth, plotHeight } = dimensions;
-	const resolveColor = useCallback(({ metric }) => isLoading ? colors.placeholder : colors.resolve(metric), [colors, isLoading]);
+	const resolveColor = useCallback(({ metric }) => colors.resolve(metric), [colors]);
 	const geometry = useMemo(() => buildLineChartGeometry({
-		lines: displayLines,
-		categories: isLoading ? void 0 : categories,
+		lines,
+		categories,
 		plotWidth,
 		plotHeight,
 		curve,
@@ -67,8 +49,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		strokeWidth,
 		resolveColor
 	}), [
-		displayLines,
-		isLoading,
+		lines,
 		categories,
 		plotWidth,
 		plotHeight,
@@ -77,7 +58,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		strokeWidth,
 		resolveColor
 	]);
-	const isEmpty = geometry.categories.length === 0 || displayLines.length === 0;
+	const isEmpty = geometry.categories.length === 0 || lines.length === 0;
 	const legendItems = useMemo(() => colors.keys.map((metric) => ({
 		key: metric,
 		label: series[metric].label,
@@ -87,7 +68,8 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 	const interaction = useChartInteraction({
 		categoryCount: geometry.columns.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty
+		disabled: noTooltip || isLoading || isEmpty,
+		isLoading
 	});
 	const activeColumn = interaction.activeIndex === null ? null : geometry.columns[interaction.activeIndex];
 	const buildCategoryTooltip = useCallback((index) => {
@@ -121,42 +103,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		width: column.bandWidth,
 		height: plotHeight
 	})), [geometry.columns, plotHeight]);
-	const marks = /* @__PURE__ */ jsxs(Fragment, { children: [
-		geometry.paths.map((linePath) => linePath.areaPath ? /* @__PURE__ */ jsx(ChartAreaPath, {
-			d: linePath.areaPath,
-			fill: linePath.color,
-			fillOpacity: LINE_AREA_OPACITY,
-			"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
-		}, `${linePath.id}:area`) : null),
-		showCursor && activeColumn && /* @__PURE__ */ jsx(ChartCursorLine, {
-			x1: activeColumn.x,
-			x2: activeColumn.x,
-			y1: 0,
-			y2: plotHeight
-		}),
-		geometry.paths.map((linePath) => /* @__PURE__ */ jsx(ChartLinePath, {
-			d: linePath.path,
-			stroke: linePath.color,
-			strokeWidth: linePath.strokeWidth,
-			strokeDasharray: linePath.dashArray,
-			"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
-		}, linePath.id)),
-		geometry.isolatedPoints.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
-			cx: point.x,
-			cy: point.y,
-			r: LINE_POINT_RADIUS,
-			fill: point.color,
-			"data-state": interaction.getMarkState({ seriesKey: point.metric })
-		}, `${point.id}:isolated`)),
-		activeColumn?.points.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
-			cx: point.x,
-			cy: point.y,
-			r: LINE_POINT_RADIUS,
-			fill: point.color,
-			"data-state": interaction.getMarkState({ seriesKey: point.metric })
-		}, point.id))
-	] });
-	return /* @__PURE__ */ jsx(ChartFrame, {
+	return /* @__PURE__ */ jsxs(ChartFrame, {
 		containerRef,
 		dimensions,
 		fillWidth,
@@ -166,7 +113,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		categoryCount: geometry.categories.length,
 		ariaLabel,
 		ariaDescription,
-		axes: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ChartValueAxis, {
+		axes: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChartValueAxis, {
 			ticks: valueTicks,
 			scale: geometry.valueScale,
 			plotWidth,
@@ -174,7 +121,6 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 			marginLeft: dimensions.margin.left,
 			formatter: formatValue,
 			showGrid,
-			showLabels: !isLoading,
 			title: valueAxisTitle
 		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
 			labels: geometry.categories,
@@ -184,7 +130,6 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 			plotHeight,
 			formatter: formatLabel,
 			mode: categoryLabelMode,
-			showLabels: !isLoading,
 			title: categoryAxisTitle
 		})] }),
 		noTooltip,
@@ -197,7 +142,41 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		contentWhenEmpty,
 		showLegend,
 		legendItems,
-		children: isLoading ? /* @__PURE__ */ jsx(ChartSkeletonGroup, { children: marks }) : marks
+		children: [
+			geometry.paths.map((linePath) => linePath.areaPath ? /* @__PURE__ */ jsx(ChartAreaPath, {
+				d: linePath.areaPath,
+				fill: linePath.color,
+				fillOpacity: LINE_AREA_OPACITY,
+				"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
+			}, `${linePath.id}:area`) : null),
+			showCursor && activeColumn && /* @__PURE__ */ jsx(ChartCursorLine, {
+				x1: activeColumn.x,
+				x2: activeColumn.x,
+				y1: 0,
+				y2: plotHeight
+			}),
+			geometry.paths.map((linePath) => /* @__PURE__ */ jsx(ChartLinePath, {
+				d: linePath.path,
+				stroke: linePath.color,
+				strokeWidth: linePath.strokeWidth,
+				strokeDasharray: linePath.dashArray,
+				"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
+			}, linePath.id)),
+			geometry.isolatedPoints.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
+				cx: point.x,
+				cy: point.y,
+				r: LINE_POINT_RADIUS,
+				fill: point.color,
+				"data-state": interaction.getMarkState({ seriesKey: point.metric })
+			}, `${point.id}:isolated`)),
+			activeColumn?.points.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
+				cx: point.x,
+				cy: point.y,
+				r: LINE_POINT_RADIUS,
+				fill: point.color,
+				"data-state": interaction.getMarkState({ seriesKey: point.metric })
+			}, point.id))
+		]
 	});
 };
 //#endregion

package/dist/charts/PieChart.js

@@ -1,13 +1,13 @@
 import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
 import { ChartKind, ChartLegendPlacement, ChartTargetShape } from "./types.js";
-import { PIE_CHART_MARGIN, PIE_MIN_SLICE_SHARE, SKELETON_PIE_VALUES } from "./constants.js";
+import { PIE_CHART_MARGIN, PIE_MIN_SLICE_SHARE } from "./constants.js";
 import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { ChartTooltipVerticalAlign } from "./useChartTooltipPosition.js";
 import { useChartInteraction } from "./useChartInteraction.js";
 import { useChartFormatters } from "./useChartFormatters.js";
 import { useChartDimensions } from "./useChartDimensions.js";
 import { buildPieChartGeometry } from "./pieChartGeometry.js";
-import { ChartArcPath, ChartCenterBox, ChartSkeletonGroup } from "./ChartPrimitives.js";
+import { ChartArcPath, ChartCenterBox } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { useCallback, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -40,23 +40,9 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 	});
 	const getSliceLabel = useCallback((sliceKey) => series[sliceKey]?.label ?? sliceKey, [series]);
 	const getSliceColor = useCallback((sliceKey) => series[sliceKey]?.color, [series]);
-	/**
-	* The slices actually rendered: the caller's, or three ghost arcs while
-	* loading, pushed through the real geometry so the skeleton donut gets the
-	* true pad angles and corner radii. The cast is safe because nothing derived
-	* from skeleton data ever surfaces: targets are off, the legend shows stubs,
-	* and the accessible name says "loading" instead of counting slices.
-	*/
-	const displaySlices = useMemo(() => isLoading ? SKELETON_PIE_VALUES.map((value, index) => ({
-		key: `skeleton-${index}`,
-		value
-	})) : slices, [isLoading, slices]);
-	const resolveColor = useCallback(({ sliceKey, explicit }) => {
-		if (isLoading) return colors.placeholder;
-		return sliceKey === null ? colors.neutral : colors.resolve(sliceKey, explicit);
-	}, [colors, isLoading]);
+	const resolveColor = useCallback(({ sliceKey, explicit }) => sliceKey === null ? colors.neutral : colors.resolve(sliceKey, explicit), [colors]);
 	const geometry = useMemo(() => buildPieChartGeometry({
-		slices: displaySlices,
+		slices,
 		plotWidth,
 		plotHeight,
 		innerRadiusRatio,
@@ -68,7 +54,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		getSliceColor,
 		getSliceLabel
 	}), [
-		displaySlices,
+		slices,
 		plotWidth,
 		plotHeight,
 		innerRadiusRatio,
@@ -90,7 +76,8 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 	const interaction = useChartInteraction({
 		categoryCount: geometry.arcs.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty
+		disabled: noTooltip || isLoading || isEmpty,
+		isLoading
 	});
 	const buildCategoryTooltip = useCallback((index) => {
 		const chartArc = geometry.arcs[index];
@@ -123,18 +110,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		shape: ChartTargetShape.PATH,
 		d: chartArc.path
 	})), [geometry.arcs]);
-	const showCenter = centerContent && !isLoading && (innerRadiusRatio ?? .62) > 0;
-	const marks = /* @__PURE__ */ jsx("g", {
-		transform: `translate(${geometry.centerX}, ${geometry.centerY})`,
-		children: geometry.arcs.map((chartArc, index) => /* @__PURE__ */ jsx(ChartArcPath, {
-			d: chartArc.path,
-			fill: chartArc.color,
-			"data-state": interaction.getMarkState({
-				categoryIndex: index,
-				seriesKey: chartArc.id
-			})
-		}, chartArc.id))
-	});
+	const showCenter = centerContent && (innerRadiusRatio ?? .62) > 0;
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		containerRef,
 		dimensions,
@@ -164,7 +140,17 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 			diameter: geometry.innerRadius * 2,
 			children: centerContent
 		}) : null,
-		children: isLoading ? /* @__PURE__ */ jsx(ChartSkeletonGroup, { children: marks }) : marks
+		children: /* @__PURE__ */ jsx("g", {
+			transform: `translate(${geometry.centerX}, ${geometry.centerY})`,
+			children: geometry.arcs.map((chartArc, index) => /* @__PURE__ */ jsx(ChartArcPath, {
+				d: chartArc.path,
+				fill: chartArc.color,
+				"data-state": interaction.getMarkState({
+					categoryIndex: index,
+					seriesKey: chartArc.id
+				})
+			}, chartArc.id))
+		})
 	});
 };
 /** Positions arbitrary content inside the donut hole. */

package/dist/charts/constants.d.ts

@@ -203,25 +203,6 @@ export declare const CHART_TOOLTIP_MIN_WIDTH = 168;
 export declare const CHART_TOOLTIP_MAX_WIDTH = 320;
 /** Gap in px between the plot box and a side-placed legend. */
 export declare const CHART_LEGEND_SIDE_GAP = 16;
-/**
- * Ghost bar heights, one inner array per group — three bars each, so the
- * skeleton reads as the grouped chart it usually stands in for rather than a
- * sparse row of lone bars.
- */
-export declare const SKELETON_BAR_GROUPS: number[][];
-/**
- * Ghost lines, one inner array per line, offset from each other and drawn with
- * their area fills so the skeleton has the layered depth of a real multi-series
- * chart instead of a single bare stroke.
- */
-export declare const SKELETON_LINE_SERIES: number[][];
-/** Ghost donut shares — three arcs, halving. */
-export declare const SKELETON_PIE_VALUES: number[];
-/**
- * Skeleton pulse period, matching the cadence of `TextShimmer` and
- * `AvatarShimmer` so charts load in step with everything else on the page.
- */
-export declare const CHART_SKELETON_PULSE_MS = 2500;
 /**
  * Approximate width of one CAPTION-size character.
  *