@galaxy-io/dls 1.3.4 → 1.3.6

package/dist/accordion/Accordion.d.ts

@@ -14,7 +14,6 @@ export interface AccordionProps {
     variant?: AccordionVariant;
     size?: AccordionSize;
     icon?: PhosphorIcon;
-    isTrailingIcon?: boolean;
     header: string;
     subheader?: string;
     metric?: React.ReactNode;
@@ -26,5 +25,5 @@ export interface AccordionProps {
     /** Controlled mode: callback when toggle is clicked */
     onToggle?: () => void;
 }
-declare const Accordion: ({ children, variant, size, icon, isTrailingIcon, header, subheader, metric, borderRadius, padding, isOpenInitial, isOpen: controlledIsOpen, onToggle: controlledOnToggle, }: PropsWithChildren<AccordionProps>) => React.JSX.Element;
+declare const Accordion: ({ children, variant, size, icon, header, subheader, metric, borderRadius, padding, isOpenInitial, isOpen: controlledIsOpen, onToggle: controlledOnToggle, }: PropsWithChildren<AccordionProps>) => React.JSX.Element;
 export default Accordion;

package/dist/accordion/Accordion.js

@@ -65,7 +65,7 @@ var AccordionContentInner = withTheme(/*#__PURE__*/ styled("div")({
 	class: "a1f5gwwu",
 	propsAsIs: false
 }));
-var Accordion = ({ children, variant = "PRIMARY", size = "MEDIUM", icon, isTrailingIcon = false, header, subheader, metric, borderRadius, padding = "12px", isOpenInitial = false, isOpen: controlledIsOpen, onToggle: controlledOnToggle }) => {
+var Accordion = ({ children, variant = "PRIMARY", size = "MEDIUM", icon, header, subheader, metric, borderRadius, padding = "12px", isOpenInitial = false, isOpen: controlledIsOpen, onToggle: controlledOnToggle }) => {
 	const [internalIsOpen, setInternalIsOpen] = useState(isOpenInitial);
 	const isControlled = controlledIsOpen !== void 0;
 	const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
@@ -87,31 +87,23 @@ var Accordion = ({ children, variant = "PRIMARY", size = "MEDIUM", icon, isTrail
 				children: [/* @__PURE__ */ jsxs(FlexWrapper, {
 					alignItems: AlignItems.CENTER,
 					gap: 8,
-					children: [
-						icon && !isTrailingIcon && /* @__PURE__ */ jsx(Icon, {
-							component: icon,
-							variant: isOpen ? IconVariant.PRIMARY : IconVariant.SECONDARY,
-							size: 16
-						}),
-						/* @__PURE__ */ jsxs(FlexWrapper, {
-							direction: FlexDirection.COLUMN,
-							gap: 2,
-							children: [/* @__PURE__ */ jsx(Text, {
-								variant: isOpen ? TextVariant.PRIMARY : TextVariant.SECONDARY,
-								weight: TextWeight.MEDIUM,
-								children: header
-							}), subheader && /* @__PURE__ */ jsx(Text, {
-								size: TextSize.BODY_SM,
-								variant: isOpen ? TextVariant.SECONDARY : TextVariant.TERTIARY,
-								children: subheader
-							})]
-						}),
-						icon && isTrailingIcon && /* @__PURE__ */ jsx(Icon, {
-							component: icon,
-							variant: isOpen ? IconVariant.PRIMARY : IconVariant.SECONDARY,
-							size: 16
-						})
-					]
+					children: [icon && /* @__PURE__ */ jsx(Icon, {
+						component: icon,
+						variant: isOpen ? IconVariant.PRIMARY : IconVariant.SECONDARY,
+						size: 16
+					}), /* @__PURE__ */ jsxs(FlexWrapper, {
+						direction: FlexDirection.COLUMN,
+						gap: 2,
+						children: [/* @__PURE__ */ jsx(Text, {
+							variant: isOpen ? TextVariant.PRIMARY : TextVariant.SECONDARY,
+							weight: TextWeight.MEDIUM,
+							children: header
+						}), subheader && /* @__PURE__ */ jsx(Text, {
+							size: TextSize.BODY_SM,
+							variant: isOpen ? TextVariant.SECONDARY : TextVariant.TERTIARY,
+							children: subheader
+						})]
+					})]
 				}), /* @__PURE__ */ jsxs(FlexWrapper, {
 					alignItems: AlignItems.CENTER,
 					gap: 8,

package/dist/charts/BarChart.d.ts

@@ -13,12 +13,6 @@ export type BarChartProps<TMetric extends string, TComponentKey extends string =
     groups: BarChartGroupDatum<NoInfer<TMetric>, NoInfer<TComponentKey>>[];
     /** @default BarChartNormalization.NONE */
     normalization?: BarChartNormalization;
-    /**
-     * Notified when a group is pinned or unpinned by a click.
-     *
-     * The index is a position in `groups`.
-     */
-    onPinnedChange?: (groupIndex: number | null) => void;
 };
 /**
  * Bar chart with a three-level data model.
@@ -27,5 +21,5 @@ export type BarChartProps<TMetric extends string, TComponentKey extends string =
  * `bars` in a group render side by side, several `components` in a bar stack,
  * and a chart doing both at once needs no extra configuration.
  */
-declare const BarChart: <TMetric extends string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
+declare const BarChart: <TMetric extends string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
 export default BarChart;

package/dist/charts/BarChart.js

@@ -1,10 +1,11 @@
 import { BarChartNormalization, ChartKind, ChartTargetShape } from "./types.js";
+import { SKELETON_BAR_GROUPS } from "./constants.js";
 import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { useChartInteraction } from "./useChartInteraction.js";
 import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
 import { getBarLegendItems } from "./barChartLegend.js";
 import { buildBarChartGeometry, getBarValueDomain, roundedRectPath } from "./barChartGeometry.js";
-import { ChartBarPath } from "./ChartPrimitives.js";
+import { ChartBarPath, ChartSkeletonGroup } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
 import { useCallback, useMemo, useRef } from "react";
@@ -17,7 +18,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * `bars` in a group render side by side, several `components` in a bar stack,
 * and a chart doing both at once needs no extra configuration.
 */
-var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange }) => {
+var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, 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);
 	/**
@@ -42,9 +43,29 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		valueFormatter,
 		valueUnit
 	]);
+	/**
+	* The data actually rendered: the caller's, or the skeleton's while loading.
+	*
+	* Loading replaces the chart wholesale with ghost bars pushed through the
+	* real geometry pipeline, so the skeleton gets the true radii and spacing.
+	* The cast is safe because nothing derived from skeleton data ever surfaces:
+	* labels are hidden, targets are off, the legend shows stubs, and the
+	* accessible name says "loading" instead of counting.
+	*/
+	const displayGroups = useMemo(() => isLoading ? SKELETON_BAR_GROUPS.map((values, groupIndex) => ({
+		label: `skeleton-${groupIndex}`,
+		bars: values.map((value, barIndex) => ({
+			metric: `skeleton-${barIndex}`,
+			components: [{
+				key: "skeleton",
+				label: "",
+				value
+			}]
+		}))
+	})) : groups, [isLoading, groups]);
 	const { dimensions, domain, valueTicks, formatValue, formatLabel, formatAxisValue } = useCartesianChartLayout({
 		containerRef,
-		rawDomain: useMemo(() => getBarValueDomain(groups, normalization), [groups, normalization]),
+		rawDomain: useMemo(() => getBarValueDomain(displayGroups, normalization), [displayGroups, normalization]),
 		valueDomain,
 		width,
 		height,
@@ -69,10 +90,10 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 	* takes its metric's colour. Applying the metric colour to a stack would
 	* paint every segment identically.
 	*/
-	const isStacked = useMemo(() => groups.some((group) => group.bars.some((bar) => bar.components.length > 1)), [groups]);
-	const resolveColor = useCallback(({ metric, componentIndex, isStacked: barIsStacked, explicit }) => barIsStacked ? colors.resolveByIndex(componentIndex, explicit) : colors.resolve(metric, explicit), [colors]);
+	const isStacked = useMemo(() => displayGroups.some((group) => group.bars.some((bar) => bar.components.length > 1)), [displayGroups]);
+	const resolveColor = useCallback(({ metric, componentIndex, isStacked: barIsStacked, explicit }) => isLoading ? colors.placeholder : barIsStacked ? colors.resolveByIndex(componentIndex, explicit) : colors.resolve(metric, explicit), [colors, isLoading]);
 	const geometry = useMemo(() => buildBarChartGeometry({
-		groups,
+		groups: displayGroups,
 		plotWidth,
 		plotHeight,
 		normalization,
@@ -80,7 +101,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		domain,
 		resolveColor
 	}), [
-		groups,
+		displayGroups,
 		plotWidth,
 		plotHeight,
 		normalization,
@@ -88,7 +109,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		domain,
 		resolveColor
 	]);
-	const isEmpty = groups.length === 0;
+	const isEmpty = displayGroups.length === 0;
 	const legendItems = useMemo(() => getBarLegendItems({
 		isStacked,
 		series,
@@ -104,9 +125,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 	const interaction = useChartInteraction({
 		categoryCount: geometry.bands.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty,
-		isLoading,
-		onPinnedChange
+		disabled: noTooltip || isLoading || isEmpty
 	});
 	const buildCategoryTooltip = useCallback((index) => {
 		const band = geometry.bands[index];
@@ -141,6 +160,14 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		width: band.width,
 		height: band.height
 	})), [geometry.bands]);
+	const marks = geometry.rects.map((rect) => /* @__PURE__ */ jsx(ChartBarPath, {
+		d: roundedRectPath(rect.x, rect.y, rect.width, rect.height, rect.radius, rect.corners),
+		fill: rect.color,
+		"data-state": interaction.getMarkState({
+			categoryIndex: rect.groupIndex,
+			seriesKey: isStacked ? rect.componentKey : rect.metric
+		})
+	}, rect.id));
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		containerRef,
 		dimensions,
@@ -159,15 +186,17 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 			marginLeft: dimensions.margin.left,
 			formatter: formatAxisValue,
 			showGrid,
+			showLabels: !isLoading,
 			title: valueAxisTitle
 		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
-			labels: groups.map((group) => group.label),
+			labels: displayGroups.map((group) => group.label),
 			positions: categoryPositions,
 			step: categoryStep,
 			plotWidth,
 			plotHeight,
 			formatter: formatLabel,
 			mode: categoryLabelMode,
+			showLabels: !isLoading,
 			title: categoryAxisTitle
 		})] }),
 		noTooltip,
@@ -180,14 +209,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		contentWhenEmpty,
 		showLegend,
 		legendItems,
-		children: geometry.rects.map((rect) => /* @__PURE__ */ jsx(ChartBarPath, {
-			d: roundedRectPath(rect.x, rect.y, rect.width, rect.height, rect.radius, rect.corners),
-			fill: rect.color,
-			"data-state": interaction.getMarkState({
-				categoryIndex: rect.groupIndex,
-				seriesKey: isStacked ? rect.componentKey : rect.metric
-			})
-		}, rect.id))
+		children: isLoading ? /* @__PURE__ */ jsx(ChartSkeletonGroup, { children: marks }) : marks
 	});
 };
 //#endregion

package/dist/charts/ChartAxis.d.ts

@@ -22,6 +22,13 @@ interface ChartValueAxisProps {
     plotHeight: number;
     formatter: ChartValueFormatter;
     showGrid?: boolean;
+    /**
+     * Render the tick labels and title.
+     *
+     * Off while the chart is loading: the grid keeps the plot's structure, but
+     * numbers derived from placeholder data would read as data.
+     */
+    showLabels?: boolean;
     /**
      * Rotated title in the left gutter.
      *
@@ -30,7 +37,7 @@ interface ChartValueAxisProps {
      */
     title?: string;
 }
-export declare const ChartValueAxis: ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid, title, }: ChartValueAxisProps) => import("react").JSX.Element;
+export declare const ChartValueAxis: ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid, showLabels, title, }: ChartValueAxisProps) => import("react").JSX.Element;
 interface ChartCategoryAxisProps {
     labels: string[];
     /** Left edge of each category's slot, in plot coordinates. */
@@ -42,6 +49,8 @@ interface ChartCategoryAxisProps {
     plotHeight: number;
     formatter: ChartLabelFormatter;
     mode?: ChartCategoryLabelMode;
+    /** Render the labels and title. Off while loading — see the value axis. */
+    showLabels?: boolean;
     /**
      * Title below the tick labels.
      *
@@ -49,5 +58,5 @@ interface ChartCategoryAxisProps {
      */
     title?: string;
 }
-export declare const ChartCategoryAxis: ({ labels, positions, step, plotWidth, plotHeight, formatter, mode, title, }: ChartCategoryAxisProps) => import("react").JSX.Element;
+export declare const ChartCategoryAxis: ({ labels, positions, step, plotWidth, plotHeight, formatter, mode, showLabels, title, }: ChartCategoryAxisProps) => import("react").JSX.Element | null;
 export {};

package/dist/charts/ChartAxis.js

@@ -6,7 +6,7 @@ import { getCategoryLabelStride } from "./chartScales.js";
 import { ChartAxisLabelBox, ChartGridLine } from "./ChartPrimitives.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartAxis.tsx
-var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid = true, title }) => {
+var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid = true, showLabels = true, title }) => {
 	const titleBand = title ? 26 : 0;
 	const labelWidth = Math.max(0, marginLeft - titleBand - 12);
 	return /* @__PURE__ */ jsxs("g", {
@@ -18,7 +18,7 @@ var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatt
 				x2: plotWidth + 12,
 				y1: 0,
 				y2: 0
-			}), labelWidth > 0 && /* @__PURE__ */ jsx(ChartAxisLabelBox, {
+			}), showLabels && labelWidth > 0 && /* @__PURE__ */ jsx(ChartAxisLabelBox, {
 				x: -marginLeft + titleBand,
 				y: -20 / 2,
 				width: labelWidth,
@@ -37,7 +37,7 @@ var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatt
 					})
 				})
 			})]
-		}, tick)), title && /* @__PURE__ */ jsx("g", {
+		}, tick)), showLabels && title && /* @__PURE__ */ jsx("g", {
 			transform: `translate(${-marginLeft + 18 / 2}, ${plotHeight / 2}) rotate(-90)`,
 			children: /* @__PURE__ */ jsx(ChartAxisLabelBox, {
 				x: -plotHeight / 2,
@@ -61,7 +61,8 @@ var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatt
 		})]
 	});
 };
-var ChartCategoryAxis = ({ labels, positions, step, plotWidth, plotHeight, formatter, mode = ChartCategoryLabelMode.AUTO, title }) => {
+var ChartCategoryAxis = ({ labels, positions, step, plotWidth, plotHeight, formatter, mode = ChartCategoryLabelMode.AUTO, showLabels = true, title }) => {
+	if (!showLabels) return null;
 	const formatted = labels.map(formatter);
 	const stride = mode === ChartCategoryLabelMode.AUTO ? getCategoryLabelStride(formatted, step) : 1;
 	const labelWidth = step * stride;

package/dist/charts/ChartCategoryTargets.d.ts

@@ -1,27 +1,27 @@
 import type { ChartCategoryTarget } from "./types";
 import type { ChartInteraction } from "./useChartInteraction";
 /**
- * The interactive layer: one focusable target per category, above the marks.
+ * The hover layer: one transparent 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.
+ * Shared by all three charts so hit testing is spelled once. Targets carry no
+ * roles and no tab stops — the plot is `role="img"` and its accessible story is
+ * the frame's label and description, while pointer users get the tooltip.
  *
- * **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.
+ * A category with nothing to show gets no target at all: hovering an all-zero
+ * bar group or an all-null line column must not open a tooltip with a heading
+ * and no rows, so the empty stretch of plot is simply not hoverable.
  */
 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;
+    /**
+     * Category indices whose tooltip would have no rows.
+     *
+     * Skipped entirely rather than rendered inert, so the pointer falls through
+     * to nothing. Indexing is unaffected: `targets.map` still passes the true
+     * category index for every target that does render.
+     */
+    inertIndices?: ReadonlySet<number>;
 }
-declare const ChartCategoryTargets: ({ targets, interaction, getAriaLabel, wrap, }: ChartCategoryTargetsProps) => import("react").JSX.Element;
+declare const ChartCategoryTargets: ({ targets, interaction, inertIndices, }: ChartCategoryTargetsProps) => import("react").JSX.Element;
 export default ChartCategoryTargets;

package/dist/charts/ChartCategoryTargets.js

@@ -1,75 +1,24 @@
 import { ChartTargetShape } from "./types.js";
-import { clamp } from "./chartScales.js";
-import { ChartCategoryTargetLayer, ChartHitTarget, ChartHitTargetPath } from "./ChartPrimitives.js";
+import { ChartHitTarget, ChartHitTargetPath } from "./ChartPrimitives.js";
 import { match } from "ts-pattern";
-import { useCallback, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, 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();
-	}) });
-};
+var ChartCategoryTargets = ({ targets, interaction, inertIndices }) => /* @__PURE__ */ jsx(Fragment, { children: targets.map((target, index) => {
+	if (inertIndices?.has(index)) return null;
+	const shared = {
+		onMouseEnter: () => interaction.onCategoryEnter(index),
+		onMouseLeave: () => interaction.onCategoryLeave()
+	};
+	return match(target).with({ shape: ChartTargetShape.RECT }, (rect) => /* @__PURE__ */ jsx(ChartHitTarget, {
+		x: rect.x,
+		y: rect.y,
+		width: rect.width,
+		height: rect.height,
+		...shared
+	}, rect.key)).with({ shape: ChartTargetShape.PATH }, (path) => /* @__PURE__ */ jsx(ChartHitTargetPath, {
+		d: path.d,
+		...shared
+	}, path.key)).exhaustive();
+}) });
 //#endregion
 export { ChartCategoryTargets as default };

package/dist/charts/ChartFrame.d.ts

@@ -1,13 +1,13 @@
 import type { ReactNode } from "react";
-import { ChartKind } from "./types";
+import { ChartKind, ChartLegendPlacement } 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.
+ * its margin translate, the plot group, the hover targets, 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
@@ -56,7 +56,7 @@ export interface ChartFrameProps {
      */
     axes?: ReactNode;
     /**
-     * Marks, drawn inside the plot group above the backdrop.
+     * Marks, drawn inside the plot group beneath the hover targets.
      *
      * 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,
@@ -72,8 +72,8 @@ export interface ChartFrameProps {
      *
      * 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.
+     * decide which categories are inert. Deriving both from the same builder is
+     * what makes "no tooltip rows" and "not hoverable" the same fact.
      *
      * Must be stable; memoize it at the call site.
      */
@@ -88,10 +88,6 @@ export interface ChartFrameProps {
     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. */
@@ -103,8 +99,14 @@ export interface ChartFrameProps {
     contentWhenEmpty?: ReactNode;
     showLegend?: boolean;
     legendItems: ChartLegendItem[];
-    /** Defaults to the left margin, aligning the legend with the plot, not the gutter. */
+    /** Where the legend sits. RIGHT stacks it beside the plot, vertically centred. */
+    legendPlacement?: ChartLegendPlacement;
+    /**
+     * BOTTOM: left padding, defaulting to the left margin so the legend aligns
+     * with the plot rather than the axis gutter. RIGHT: the gap between the plot
+     * box and the legend, defaulting to {@link CHART_LEGEND_SIDE_GAP}.
+     */
     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;
+declare const ChartFrame: ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip, buildCategoryTooltip, tooltipRenderer, categoryTargets, categoryTargetsTransform, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, contentWhenEmpty, showLegend, legendItems, legendPlacement, legendInset, }: ChartFrameProps) => import("react").JSX.Element;
 export default ChartFrame;