@galaxy-io/dls 1.2.7 → 1.3.1

package/dist/charts/ChartAxis.js

@@ -1,18 +1,49 @@
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import FlexWrapper, { AlignItems, JustifyContent } from "../containers/FlexWrapper.js";
+import { ChartCategoryLabelMode } from "./types.js";
 import "./constants.js";
-import { defaultLabelFormatter, defaultValueFormatter } from "./utils.js";
+import { getCategoryLabelStride } from "./chartScales.js";
+import { ChartAxisLabelBox, ChartGridLine } from "./ChartPrimitives.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartAxis.tsx
-var XAxis = ({ scale, transform, formatter = defaultLabelFormatter }) => {
-	return /* @__PURE__ */ jsx("g", {
-		transform,
-		children: scale.domain().map((label) => {
-			return /* @__PURE__ */ jsx("foreignObject", {
-				x: (scale(label) ?? 0) + scale.bandwidth() / 2 - scale.bandwidth() / 2,
-				y: 8,
-				width: scale.bandwidth(),
-				height: 24,
+var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid = true, title }) => {
+	const titleBand = title ? 26 : 0;
+	const labelWidth = Math.max(0, marginLeft - titleBand - 12);
+	return /* @__PURE__ */ jsxs("g", {
+		"aria-hidden": true,
+		children: [ticks.map((tick) => /* @__PURE__ */ jsxs("g", {
+			transform: `translate(0, ${scale(tick)})`,
+			children: [showGrid && /* @__PURE__ */ jsx(ChartGridLine, {
+				x1: -12,
+				x2: plotWidth + 12,
+				y1: 0,
+				y2: 0
+			}), labelWidth > 0 && /* @__PURE__ */ jsx(ChartAxisLabelBox, {
+				x: -marginLeft + titleBand,
+				y: -20 / 2,
+				width: labelWidth,
+				height: 20,
+				children: /* @__PURE__ */ jsx(FlexWrapper, {
+					justifyContent: JustifyContent.END,
+					alignItems: AlignItems.CENTER,
+					fillWidth: true,
+					fillHeight: true,
+					children: /* @__PURE__ */ jsx(Text, {
+						size: TextSize.CAPTION,
+						variant: TextVariant.TERTIARY,
+						align: "right",
+						isEllipsis: true,
+						children: formatter(tick)
+					})
+				})
+			})]
+		}, tick)), title && /* @__PURE__ */ jsx("g", {
+			transform: `translate(${-marginLeft + 18 / 2}, ${plotHeight / 2}) rotate(-90)`,
+			children: /* @__PURE__ */ jsx(ChartAxisLabelBox, {
+				x: -plotHeight / 2,
+				y: -18 / 2,
+				width: plotHeight,
+				height: 18,
 				children: /* @__PURE__ */ jsx(FlexWrapper, {
 					justifyContent: JustifyContent.CENTER,
 					alignItems: AlignItems.CENTER,
@@ -22,22 +53,28 @@ var XAxis = ({ scale, transform, formatter = defaultLabelFormatter }) => {
 						size: TextSize.CAPTION,
 						variant: TextVariant.TERTIARY,
 						align: "center",
-						children: formatter(label)
+						isEllipsis: true,
+						children: title
 					})
 				})
-			}, label);
-		})
+			})
+		})]
 	});
 };
-var XAxisPoint = ({ scale, transform, formatter = defaultLabelFormatter }) => {
-	const step = scale.step();
-	return /* @__PURE__ */ jsx("g", {
-		transform,
-		children: scale.domain().map((label) => {
-			return /* @__PURE__ */ jsx("foreignObject", {
-				x: (scale(label) ?? 0) - step / 2,
+var ChartCategoryAxis = ({ labels, positions, step, plotWidth, plotHeight, formatter, mode = ChartCategoryLabelMode.AUTO, title }) => {
+	const formatted = labels.map(formatter);
+	const stride = mode === ChartCategoryLabelMode.AUTO ? getCategoryLabelStride(formatted, step) : 1;
+	const labelWidth = step * stride;
+	const labelInset = (labelWidth - step) / 2;
+	return /* @__PURE__ */ jsxs("g", {
+		transform: `translate(0, ${plotHeight})`,
+		"aria-hidden": true,
+		children: [formatted.map((label, index) => {
+			if (index % stride !== 0) return null;
+			return /* @__PURE__ */ jsx(ChartAxisLabelBox, {
+				x: positions[index] - labelInset,
 				y: 8,
-				width: step,
+				width: labelWidth,
 				height: 24,
 				children: /* @__PURE__ */ jsx(FlexWrapper, {
 					justifyContent: JustifyContent.CENTER,
@@ -48,47 +85,31 @@ var XAxisPoint = ({ scale, transform, formatter = defaultLabelFormatter }) => {
 						size: TextSize.CAPTION,
 						variant: TextVariant.TERTIARY,
 						align: "center",
-						children: formatter(label)
+						isEllipsis: mode !== ChartCategoryLabelMode.ALL,
+						children: label
 					})
 				})
-			}, label);
-		})
-	});
-};
-var YAxis = ({ scale, transform, plotWidth, tickCount = 5, formatter = defaultValueFormatter, showGrid = true, theme }) => {
-	return /* @__PURE__ */ jsx("g", {
-		transform,
-		children: scale.ticks(tickCount).map((tick) => {
-			return /* @__PURE__ */ jsxs("g", {
-				transform: `translate(0, ${scale(tick)})`,
-				children: [/* @__PURE__ */ jsx("foreignObject", {
-					x: -48,
-					y: -10,
-					width: 36,
-					height: 20,
-					children: /* @__PURE__ */ jsx(FlexWrapper, {
-						justifyContent: JustifyContent.END,
-						alignItems: AlignItems.CENTER,
-						fillWidth: true,
-						fillHeight: true,
-						children: /* @__PURE__ */ jsx(Text, {
-							size: TextSize.CAPTION,
-							variant: TextVariant.TERTIARY,
-							children: formatter(tick)
-						})
-					})
-				}), showGrid && /* @__PURE__ */ jsx("line", {
-					x1: 0,
-					x2: plotWidth,
-					y1: 0,
-					y2: 0,
-					stroke: theme.color.border.primary,
-					strokeOpacity: .5,
-					strokeDasharray: "2,2"
-				})]
-			}, tick);
-		})
+			}, `${index}:${label}`);
+		}), title && /* @__PURE__ */ jsx(ChartAxisLabelBox, {
+			x: 0,
+			y: 32,
+			width: plotWidth,
+			height: 18,
+			children: /* @__PURE__ */ jsx(FlexWrapper, {
+				justifyContent: JustifyContent.CENTER,
+				alignItems: AlignItems.CENTER,
+				fillWidth: true,
+				fillHeight: true,
+				children: /* @__PURE__ */ jsx(Text, {
+					size: TextSize.CAPTION,
+					variant: TextVariant.TERTIARY,
+					align: "center",
+					isEllipsis: true,
+					children: title
+				})
+			})
+		})]
 	});
 };
 //#endregion
-export { XAxis, XAxisPoint, YAxis };
+export { ChartCategoryAxis, ChartValueAxis };

package/dist/charts/ChartCategoryTargets.d.ts

@@ -0,0 +1,27 @@
+import type { ChartCategoryTarget } from "./types";
+import type { ChartInteraction } from "./useChartInteraction";
+/**
+ * The interactive layer: one focusable target per category, above the marks.
+ *
+ * Shared by all three charts so pointer and keyboard behave identically. Before
+ * this existed each chart spelled hit testing its own way — two rendered targets
+ * conditionally, the pie attached handlers permanently and computed
+ * `data-interactive` instead — and none of them was reachable by keyboard at
+ * all.
+ *
+ * **Focus rides the existing hover channel.** `onFocus` calls
+ * `onCategoryEnter` and `onBlur` calls `onCategoryLeave`, so the tooltip, the
+ * cursor line, the legend dimming and every `getMarkState` light up for a
+ * keyboard reader exactly as they do for a pointer — without
+ * `useChartInteraction` growing a third state axis to keep in sync.
+ */
+interface ChartCategoryTargetsProps {
+    targets: ChartCategoryTarget[];
+    interaction: ChartInteraction;
+    /** Accessible name for one category. Derived from the tooltip, so they agree. */
+    getAriaLabel: (index: number) => string;
+    /** Arrow keys wrap at the ends. True for radial charts — a circle has no ends. */
+    wrap?: boolean;
+}
+declare const ChartCategoryTargets: ({ targets, interaction, getAriaLabel, wrap, }: ChartCategoryTargetsProps) => import("react").JSX.Element;
+export default ChartCategoryTargets;

package/dist/charts/ChartCategoryTargets.js

@@ -0,0 +1,75 @@
+import { ChartTargetShape } from "./types.js";
+import { clamp } from "./chartScales.js";
+import { ChartCategoryTargetLayer, ChartHitTarget, ChartHitTargetPath } from "./ChartPrimitives.js";
+import { match } from "ts-pattern";
+import { useCallback, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/charts/ChartCategoryTargets.tsx
+var ChartCategoryTargets = ({ targets, interaction, getAriaLabel, wrap = false }) => {
+	const [focusIndex, setFocusIndex] = useState(0);
+	const nodeRefs = useRef([]);
+	/**
+	* Roving tabindex, preferring whatever is pinned.
+	*
+	* Tabbing away and back returns to the category the reader was holding rather
+	* than to the start, which is the difference between the pin being a place
+	* you are and a thing that merely happened.
+	*/
+	const rovingIndex = clamp(interaction.pinnedIndex ?? focusIndex, 0, targets.length - 1);
+	const moveTo = useCallback((next) => {
+		const last = targets.length - 1;
+		const bounded = wrap ? (next % targets.length + targets.length) % targets.length : clamp(next, 0, last);
+		setFocusIndex(bounded);
+		nodeRefs.current[bounded]?.focus();
+	}, [targets.length, wrap]);
+	const onKeyDown = useCallback((event, index) => {
+		if (match(event.key).with("ArrowRight", "ArrowDown", () => moveTo(index + 1)).with("ArrowLeft", "ArrowUp", () => moveTo(index - 1)).with("Home", () => moveTo(0)).with("End", () => moveTo(targets.length - 1)).with("Enter", " ", () => interaction.onCategoryClick(index)).with("Escape", () => interaction.onBackdropClick()).otherwise(() => void 0) !== void 0 || [
+			"ArrowRight",
+			"ArrowDown",
+			"ArrowLeft",
+			"ArrowUp",
+			"Home",
+			"End",
+			"Enter",
+			" ",
+			"Escape"
+		].includes(event.key)) event.preventDefault();
+	}, [
+		moveTo,
+		interaction,
+		targets.length
+	]);
+	return /* @__PURE__ */ jsx(ChartCategoryTargetLayer, { children: targets.map((target, index) => {
+		const shared = {
+			tabIndex: index === rovingIndex ? 0 : -1,
+			role: "button",
+			"aria-label": getAriaLabel(index),
+			"aria-pressed": interaction.pinnedIndex === index,
+			"data-interactive": "true",
+			onFocus: () => interaction.onCategoryEnter(index),
+			onBlur: () => interaction.onCategoryLeave(),
+			onMouseEnter: () => interaction.onCategoryEnter(index),
+			onMouseLeave: () => interaction.onCategoryLeave(),
+			onClick: () => interaction.onCategoryClick(index),
+			onKeyDown: (event) => onKeyDown(event, index)
+		};
+		return match(target).with({ shape: ChartTargetShape.RECT }, (rect) => /* @__PURE__ */ jsx(ChartHitTarget, {
+			ref: (node) => {
+				nodeRefs.current[index] = node;
+			},
+			x: rect.x,
+			y: rect.y,
+			width: rect.width,
+			height: rect.height,
+			...shared
+		}, rect.key)).with({ shape: ChartTargetShape.PATH }, (path) => /* @__PURE__ */ jsx(ChartHitTargetPath, {
+			ref: (node) => {
+				nodeRefs.current[index] = node;
+			},
+			d: path.d,
+			...shared
+		}, path.key)).exhaustive();
+	}) });
+};
+//#endregion
+export { ChartCategoryTargets as default };

package/dist/charts/ChartEmptyState.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+interface ChartEmptyStateProps {
+    /** Caller-supplied content. Falls back to a centred "No data". */
+    content?: ReactNode;
+}
+/**
+ * Overlay shown when a chart has nothing to plot.
+ *
+ * Rendered over the reserved plot box rather than in place of it, so the axes
+ * stay at full size and the chart does not resize when data arrives.
+ *
+ * What counts as empty is each chart's own call and deliberately inconsistent:
+ * a bar chart of all zeros is a flat chart with real data, while a pie of all
+ * zeros has no whole to apportion.
+ */
+declare const ChartEmptyState: ({ content }: ChartEmptyStateProps) => import("react").JSX.Element;
+export default ChartEmptyState;

package/dist/charts/ChartEmptyState.js

@@ -0,0 +1,29 @@
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import FlexWrapper, { AlignItems, JustifyContent } from "../containers/FlexWrapper.js";
+import { ChartEmptyOverlay } from "./ChartPrimitives.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/charts/ChartEmptyState.tsx
+/**
+* Overlay shown when a chart has nothing to plot.
+*
+* Rendered over the reserved plot box rather than in place of it, so the axes
+* stay at full size and the chart does not resize when data arrives.
+*
+* What counts as empty is each chart's own call and deliberately inconsistent:
+* a bar chart of all zeros is a flat chart with real data, while a pie of all
+* zeros has no whole to apportion.
+*/
+var ChartEmptyState = ({ content }) => /* @__PURE__ */ jsx(ChartEmptyOverlay, {
+	role: "status",
+	children: content ?? /* @__PURE__ */ jsx(FlexWrapper, {
+		justifyContent: JustifyContent.CENTER,
+		alignItems: AlignItems.CENTER,
+		children: /* @__PURE__ */ jsx(Text, {
+			size: TextSize.CAPTION,
+			variant: TextVariant.TERTIARY,
+			children: "No data"
+		})
+	})
+});
+//#endregion
+export { ChartEmptyState as default };

package/dist/charts/ChartFrame.d.ts

@@ -0,0 +1,110 @@
+import type { ReactNode } from "react";
+import { ChartKind } from "./types";
+import type { ChartCategoryTarget, ChartLegendItem, ChartPlotTooltipModel, ChartTooltipRenderer } from "./types";
+import type { ChartDimensions } from "./useChartDimensions";
+import type { ChartInteraction } from "./useChartInteraction";
+import type { ChartTooltipVerticalAlign } from "./useChartTooltipPosition";
+/**
+ * The shell every chart renders into: measured root, reserved plot box, SVG and
+ * its margin translate, the interactive plot group, the backdrop, the tooltip,
+ * the empty state and the legend.
+ *
+ * **The frame owns the plot translate.** Marks are drawn inside a
+ * `translate(margin.left, margin.top)` group, and every coordinate handed to
+ * this component — including the tooltip anchor and `placeAwayFromX` — is in
+ * that same plot space. Charts never add the margin themselves; three
+ * hand-written copies of `+ margin.left` is precisely what drifts silently.
+ *
+ * Knows nothing about scales, marks or geometry — all of that arrives through
+ * `axes` and `children`.
+ *
+ * @internal Published as a subpath only because this package has no barrel
+ * files, not because charts are meant to be composed out of it.
+ */
+export interface ChartFrameProps {
+    /**
+     * The element `useChartDimensions` measures — the *plot box*, not the root.
+     *
+     * Measuring the plot box is what keeps `fillHeight` honest: the legend is a
+     * sibling in the root's flex column, so the box's height is already the space
+     * left over for the plot and no one has to subtract a wrapped legend. Width is
+     * unaffected, the box being `width: 100%` of the root either way.
+     *
+     * Created by the chart, not here: the chart needs the resulting dimensions
+     * during its own render — to size the geometry and to feed
+     * `useChartInteraction` — so the ref has to exist before this component does.
+     * A named prop rather than `ref` because ref-as-a-prop needs React 19 and this
+     * package still supports 18.
+     */
+    containerRef: React.RefObject<HTMLDivElement>;
+    dimensions: ChartDimensions;
+    fillWidth?: boolean;
+    fillHeight?: boolean;
+    interaction: ChartInteraction;
+    /** Which chart this is. Only used to phrase the default accessible name. */
+    kind: ChartKind;
+    /** Categories on the axis, or slices for a pie. Names the plot, so it counts
+     * what is *rendered* rather than what was supplied. */
+    categoryCount: number;
+    /** Overrides the name derived from {@link kind} and the counts. */
+    ariaLabel?: string;
+    /** Long description, associated with the SVG via `aria-describedby`. */
+    ariaDescription?: string;
+    /**
+     * Axes, drawn inside the plot translate group *before* {@link children}, so
+     * grid lines paint under the marks. Radial charts pass nothing.
+     */
+    axes?: ReactNode;
+    /**
+     * Marks, drawn inside the plot group above the backdrop.
+     *
+     * Rendered only once measured, so no caller writes that guard. Note it is
+     * still *evaluated* on the unmeasured pass — as is the geometry it maps over,
+     * which each chart's `useMemo` already runs at a 0×0 plot. Geometry builders
+     * must stay total at zero; they already are.
+     */
+    children?: ReactNode;
+    /** HTML painted over the plot and under the tooltip — the donut centre. */
+    plotOverlay?: ReactNode;
+    noTooltip?: boolean;
+    /**
+     * Builds one category's tooltip, in plot coordinates.
+     *
+     * Taken as a function rather than a finished model because the frame needs it
+     * twice: once for the category under the pointer, and once per category to
+     * name it for a screen reader. Deriving both from the same builder is what
+     * makes the accessible name incapable of disagreeing with the tooltip.
+     *
+     * Must be stable; memoize it at the call site.
+     */
+    buildCategoryTooltip: (index: number) => ChartPlotTooltipModel | null;
+    tooltipRenderer?: ChartTooltipRenderer;
+    /**
+     * One target per category, in plot coordinates and in category order.
+     *
+     * Empty disables interaction entirely, which is what a chart with nothing to
+     * plot passes.
+     */
+    categoryTargets?: ChartCategoryTarget[];
+    /** Applied to the target layer. Radial charts pass their centre translate. */
+    categoryTargetsTransform?: string;
+    /** Arrow keys wrap at the ends. True for radial charts. */
+    wrapCategoryNavigation?: boolean;
+    /** Overrides the accessible name of a category, which defaults to its tooltip. */
+    describeCategory?: (index: number) => string;
+    /** Half a category's width, so the tooltip sits beside the marks. */
+    anchorHalfWidth?: number;
+    /** Radial charts pass their centre, in plot coordinates. */
+    placeAwayFromX?: number;
+    verticalAlign?: ChartTooltipVerticalAlign;
+    /** Each chart defines "empty" for itself; the frame only renders the result. */
+    isEmpty: boolean;
+    isLoading?: boolean;
+    contentWhenEmpty?: ReactNode;
+    showLegend?: boolean;
+    legendItems: ChartLegendItem[];
+    /** Defaults to the left margin, aligning the legend with the plot, not the gutter. */
+    legendInset?: number;
+}
+declare const ChartFrame: ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip, buildCategoryTooltip, tooltipRenderer, categoryTargets, categoryTargetsTransform, wrapCategoryNavigation, describeCategory, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, contentWhenEmpty, showLegend, legendItems, legendInset, }: ChartFrameProps) => import("react").JSX.Element;
+export default ChartFrame;

package/dist/charts/ChartFrame.js

@@ -0,0 +1,143 @@
+import { ChartKind } from "./types.js";
+import { describeTooltipModel } from "./chartFormat.js";
+import { ChartBackdrop, ChartPlotBox, ChartPlotGroup, ChartRoot, ChartSvg } from "./ChartPrimitives.js";
+import ChartCategoryTargets from "./ChartCategoryTargets.js";
+import ChartEmptyState from "./ChartEmptyState.js";
+import ChartLegend from "./ChartLegend.js";
+import ChartTooltip from "./ChartTooltip.js";
+import { match } from "ts-pattern";
+import { useCallback, useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/charts/ChartFrame.tsx
+var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip = false, buildCategoryTooltip, tooltipRenderer, categoryTargets, categoryTargetsTransform, wrapCategoryNavigation, describeCategory, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading = false, contentWhenEmpty, showLegend = false, legendItems, legendInset }) => {
+	const { width, height, plotWidth, plotHeight, margin, isMeasured, reservedHeight, reservedAspectRatio } = dimensions;
+	const generatedId = useId();
+	const descriptionId = ariaDescription ? `${generatedId}-desc` : void 0;
+	/**
+	* Default accessible name, phrased here so the three charts cannot drift.
+	*
+	* Both counts describe what is *on screen*: `legendItems` rather than the
+	* `series` record, because a stacked bar's legend names its components, not
+	* its metrics — counting the record would announce "1 series" for a chart
+	* showing three. The two charts previously counted different things for the
+	* same situation, which is the drift this removes.
+	*/
+	const resolvedAriaLabel = ariaLabel ?? match(kind).with(ChartKind.PIE, () => `Pie chart with ${categoryCount} slices`).with(ChartKind.BAR, () => `Bar chart with ${categoryCount} categories and ${legendItems.length} series`).with(ChartKind.LINE, () => `Line chart with ${categoryCount} categories and ${legendItems.length} series`).exhaustive();
+	const tooltipModel = useMemo(() => noTooltip || interaction.activeIndex === null ? null : buildCategoryTooltip(interaction.activeIndex), [
+		noTooltip,
+		buildCategoryTooltip,
+		interaction.activeIndex
+	]);
+	/**
+	* Plot space → container space, applied once, here.
+	*
+	* Memoized for correctness, not arithmetic cost. `ChartTooltip` retains the
+	* last model by *identity* so it can keep its content while fading out, and
+	* adjusts that state during render when the identity changes. A fresh object
+	* on every parent render would therefore trigger an extra render pass on
+	* every render — including every pointer move — without ever looping or
+	* visibly breaking.
+	*/
+	const positionedTooltip = useMemo(() => tooltipModel === null ? null : {
+		...tooltipModel,
+		anchorX: tooltipModel.anchorX + margin.left,
+		anchorY: tooltipModel.anchorY + margin.top
+	}, [
+		tooltipModel,
+		margin.left,
+		margin.top
+	]);
+	/**
+	* Name each category from its own tooltip, unless the chart says otherwise.
+	*
+	* Same builder as the visible tooltip, so the two cannot describe the chart
+	* differently.
+	*/
+	const nameCategory = useCallback((index) => {
+		if (describeCategory) return describeCategory(index);
+		const model = buildCategoryTooltip(index);
+		return model ? describeTooltipModel(model) : "";
+	}, [describeCategory, buildCategoryTooltip]);
+	/**
+	* Whether the marks are reachable at all.
+	*
+	* Drives the SVG's role, which is the real cost of keyboard access:
+	* `role="img"` prunes the whole subtree from the accessibility tree, so
+	* nothing inside it can ever be focused *and* announced. A chart with live
+	* targets therefore has to be a `group` — and everything that is not a target
+	* has to be explicitly hidden, since under `group` it would otherwise become
+	* traversable. When there is nothing to reach, `img` stays: it announces one
+	* summary rather than an empty group.
+	*/
+	const hasFocusableTargets = isMeasured && !noTooltip && !isLoading && !isEmpty && (categoryTargets?.length ?? 0) > 0;
+	return /* @__PURE__ */ jsxs(ChartRoot, {
+		$fillWidth: fillWidth,
+		$fillHeight: fillHeight,
+		children: [/* @__PURE__ */ jsxs(ChartPlotBox, {
+			ref: containerRef,
+			$reservedHeight: reservedHeight,
+			$reservedAspectRatio: reservedAspectRatio,
+			$fillHeight: fillHeight,
+			children: [
+				isMeasured && /* @__PURE__ */ jsxs(ChartSvg, {
+					width,
+					height,
+					role: hasFocusableTargets ? "group" : "img",
+					"aria-label": resolvedAriaLabel,
+					"aria-describedby": descriptionId,
+					children: [ariaDescription && /* @__PURE__ */ jsx("desc", {
+						id: descriptionId,
+						children: ariaDescription
+					}), /* @__PURE__ */ jsxs("g", {
+						transform: `translate(${margin.left}, ${margin.top})`,
+						children: [
+							axes,
+							/* @__PURE__ */ jsx("g", {
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsxs(ChartPlotGroup, {
+									"data-active": interaction.isEngaged ? "true" : "false",
+									children: [/* @__PURE__ */ jsx(ChartBackdrop, {
+										width: plotWidth,
+										height: plotHeight,
+										"data-interactive": interaction.pinnedIndex !== null ? "true" : "false",
+										onClick: interaction.onBackdropClick
+									}), children]
+								})
+							}),
+							hasFocusableTargets && categoryTargets && /* @__PURE__ */ jsx("g", {
+								transform: categoryTargetsTransform,
+								children: /* @__PURE__ */ jsx(ChartCategoryTargets, {
+									targets: categoryTargets,
+									interaction,
+									getAriaLabel: nameCategory,
+									wrap: wrapCategoryNavigation
+								})
+							})
+						]
+					})]
+				}),
+				isMeasured && plotOverlay,
+				isMeasured && !noTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
+					model: positionedTooltip,
+					containerWidth: width,
+					containerHeight: height,
+					anchorHalfWidth,
+					placeAwayFromX: placeAwayFromX === void 0 ? void 0 : placeAwayFromX + margin.left,
+					verticalAlign,
+					renderer: tooltipRenderer
+				}),
+				isMeasured && isEmpty && !isLoading && /* @__PURE__ */ jsx(ChartEmptyState, { content: contentWhenEmpty })
+			]
+		}), showLegend && /* @__PURE__ */ jsx(ChartLegend, {
+			items: legendItems,
+			inset: legendInset ?? margin.left,
+			hoveredKey: interaction.hoveredSeriesKey,
+			pinnedKey: interaction.pinnedSeriesKey,
+			onItemEnter: interaction.onSeriesEnter,
+			onItemLeave: interaction.onSeriesLeave,
+			onItemClick: interaction.onSeriesClick
+		})]
+	});
+};
+//#endregion
+export { ChartFrame as default };

package/dist/charts/ChartLegend.d.ts

@@ -1,7 +1,30 @@
-import type { ChartSeriesConfig } from "./types";
+import type { ChartLegendItem } from "./types";
 interface ChartLegendProps {
-    series: ChartSeriesConfig[];
-    palette: string[];
+    items: ChartLegendItem[];
+    /** Left padding aligning the legend with the plot, not the axis gutter. */
+    inset: number;
+    /** Series key currently hovered anywhere in the chart. */
+    hoveredKey?: string | null;
+    /** Series key currently pinned. Drives `aria-pressed`. */
+    pinnedKey?: string | null;
+    /**
+     * Supplying these makes the legend interactive. Omit them and it renders as
+     * inert text, with no button semantics for a screen reader to announce.
+     */
+    onItemEnter?: (key: string) => void;
+    onItemLeave?: () => void;
+    onItemClick?: (key: string) => void;
 }
-declare const ChartLegend: ({ series, palette }: ChartLegendProps) => import("react").JSX.Element;
+/**
+ * Legend for the chart components.
+ *
+ * Hovering an entry isolates its series and clicking pins that isolation.
+ *
+ * Deliberately *not* a visibility toggle: hiding a series would have to rescale
+ * the value axis to stay honest — otherwise the remaining bars sit mysteriously
+ * short — and that belongs with the geometry layer rather than bolted on here.
+ * Isolation only changes opacity, so the domain is untouched and the numbers
+ * keep meaning what they did.
+ */
+declare const ChartLegend: ({ items, inset, hoveredKey, pinnedKey, onItemEnter, onItemLeave, onItemClick, }: ChartLegendProps) => import("react").JSX.Element | null;
 export default ChartLegend;