@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/charts/ChartFrame.js

@@ -1,129 +1,338 @@
+import Skeleton, { SkeletonVariant } from "../feedback/Skeleton.js";
 import { ChartKind, ChartLegendPlacement } from "./types.js";
-import "./constants.js";
-import { ChartPlotBox, ChartRoot, ChartSvg } from "./ChartPrimitives.js";
-import ChartCategoryTargets from "./ChartCategoryTargets.js";
-import ChartEmptyState from "./ChartEmptyState.js";
-import ChartLegend from "./ChartLegend.js";
-import ChartMarkTargets from "./ChartMarkTargets.js";
-import ChartTooltip from "./ChartTooltip.js";
-import { match } from "ts-pattern";
-import { useId, useMemo } from "react";
+import { CHART_LEGEND_FILTER_EXTENT, CHART_LEGEND_SIDE_GAP } from "./constants.js";
+import Chip, { ChipSize } from "../chips/Chip.js";
+import EmptyState, { EmptyStateSize } from "../feedback/EmptyState.js";
+import { isAdditiveEvent } from "./chartSelection.js";
+import { ChartCategoryTargets } from "./ChartCategoryTargets.js";
+import { ChartLegend } from "./ChartLegend.js";
+import { ChartMarkTargets } from "./ChartMarkTargets.js";
+import { ChartTooltip } from "./ChartTooltip.js";
+/* empty css                     */
+import { styled } from "@linaria/react";
+import { useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { FunnelSimpleIcon } from "@phosphor-icons/react";
 //#region src/charts/ChartFrame.tsx
-var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip = false, buildCategoryTooltip, tooltipRenderer, tooltipMaxItems, categoryTargets, markTargets, categoryTargetsTransform, onCategorySelect, onMarkSelect, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading = false, contentWhenEmpty, showLegend = false, legendItems, legendMaxItems, legendPlacement = ChartLegendPlacement.BOTTOM, legendInset }) => {
-	const { width, height, 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();
+/**
+* @internal The shell every chart renders into: the root (sizing, legend placement, passthrough),
+* the measured plot box (one tab stop when interactive), the SVG and its inset translate, axes,
+* marks, hit targets, the in-chart tooltip, the empty and loading overlays, the live region and
+* the legend. On a filterable chart dismissible filter chips follow the legend entries while
+* something is pinned. One pin shows a chip per part ("06:00" and "Failed" for one segment): a
+* chip's × drops that part and keeps the other. Several pins collapse into one "3 filters" chip
+* (the list in its tooltip) whose × clears them all. It knows nothing about scales or geometry: axes and marks arrive as nodes, and every
+* coordinate handed to it is in plot space (the frame adds the insets once).
+*
+* Sizing: the root fills its parent (`width` / `height: 100%`); against a parent of indefinite
+* height the percentage computes to `auto` and `aspect-ratio: var(--gx-chart-aspect-ratio)`
+* applies, so a chart never needs a size prop and never collapses to 0×0.
+*/
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-ChartFrame-rd05unv",
+	propsAsIs: false
+});
+/** @internal Legend placement → root layout. */
+var CHART_LEGEND_PLACEMENT_TO_CSS_MAP = {
+	[ChartLegendPlacement.BOTTOM]: "gx-ChartFrame-ChartLegendPlacement_BOTTOM-c1m9ui7b",
+	[ChartLegendPlacement.RIGHT]: "gx-ChartFrame-ChartLegendPlacement_RIGHT-cq532vv"
+};
+/** The measured element; anchors the SVG, overlays and tooltip. */
+var PlotBox = /*#__PURE__*/ styled("div")({
+	name: "PlotBox",
+	class: "gx-ChartFrame-PlotBox-pl7aabu",
+	propsAsIs: false
+});
+/** The plot box as one tab stop: the focus ring draws around the plot, not the whole chart. */
+var PLOT_INTERACTIVE_CSS = "gx-ChartFrame-PLOT_INTERACTIVE_CSS-p27fgao";
+var ChartSvg = /*#__PURE__*/ styled("svg")({
+	name: "ChartSvg",
+	class: "gx-ChartFrame-ChartSvg-c1n7y3iq",
+	propsAsIs: false
+});
+/** The empty-state overlay: over the plot box only, so the axes keep their size. */
+var Overlay = /*#__PURE__*/ styled("div")({
+	name: "Overlay",
+	class: "gx-ChartFrame-Overlay-o1itt7vl",
+	propsAsIs: false
+});
+/** A standalone `Skeleton RECT` that takes the whole plot box. */
+var LOADING_SKELETON_CSS = "gx-ChartFrame-LOADING_SKELETON_CSS-l1oi7u1q";
+/**
+* A chart's own legend (Heatmap's steps) with the filter chip after it. Both carry the legend's 8px
+* top padding and center on each other, so the chip centers on the legend's text line.
+*/
+var CustomLegendBar = /*#__PURE__*/ styled("div")({
+	name: "CustomLegendBar",
+	class: "gx-ChartFrame-CustomLegendBar-c1jrxj0u",
+	propsAsIs: false
+});
+/**
+* The chips after a chart's own legend. Its height (the 8px top padding and a 20px chip) is kept
+* while nothing is pinned, so the plot above never moves when a chip appears.
+*/
+var CustomFilterSlot = /*#__PURE__*/ styled("div")({
+	name: "CustomFilterSlot",
+	class: "gx-ChartFrame-CustomFilterSlot-celuo85",
+	propsAsIs: false
+});
+var LiveRegion = /*#__PURE__*/ styled("div")({
+	name: "LiveRegion",
+	class: "gx-ChartFrame-LiveRegion-lvgwxyl",
+	propsAsIs: false
+});
+/** The default accessible name, phrased once so the charts cannot drift. */
+function deriveAriaLabel(kind, categories, series) {
+	switch (kind) {
+		case ChartKind.LINE: return `Line chart, ${categories} categories, ${series} series`;
+		case ChartKind.AREA: return `Area chart, ${categories} categories, ${series} series`;
+		case ChartKind.BAR: return `Bar chart, ${categories} categories, ${series} series`;
+		case ChartKind.PIE: return `Pie chart, ${categories} slices`;
+		case ChartKind.HEATMAP: return `Heatmap, ${categories} cells`;
+	}
+}
+/** The live-region sentence for a category: "Q2. Revenue 1,200. Cost 800." */
+function describeTooltip(model) {
+	if (model === null) return "";
+	if (model.rows.length === 0) return `${model.label}. No data.`;
+	const rows = model.rows.map((row) => `${row.label} ${row.value === null ? "no data" : row.formattedValue}.`);
+	return `${model.label}. ${rows.join(" ")}`;
+}
+var NAVIGATION_KEYS = new Set([
+	"ArrowRight",
+	"ArrowLeft",
+	"ArrowUp",
+	"ArrowDown",
+	"Home",
+	"End"
+]);
+/** @internal The chart shell. */
+function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions, interaction, kind, categoryCount, ariaLabel, aspectRatio, axes, children, plotOverlay, plotClassName, describeCategory, hasTooltip, buildCategoryTooltip, renderTooltip, categoryTargets, markTargets, targetsTransform, onCategorySelect, onMarkSelect, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, placeholder, hasLegend, legendItems, legendPlacement, legendSwatch, tooltipSwatch, legend, formatCategoryKey }) {
+	const { width, height, insets, isMeasured } = dimensions;
+	const [announcement, setAnnouncement] = useState("");
+	const { rootPassthrough, plotAria } = useMemo(() => {
+		const root = {};
+		const aria = {};
+		for (const [key, value] of Object.entries(rest)) if (key.startsWith("aria-")) aria[key] = value;
+		else root[key] = value;
+		return {
+			rootPassthrough: root,
+			plotAria: aria
+		};
+	}, [rest]);
+	const { "aria-label": passedAriaLabel, ...plotAriaRest } = plotAria;
+	const resolvedAriaLabel = ariaLabel ?? (typeof passedAriaLabel === "string" ? passedAriaLabel : void 0) ?? deriveAriaLabel(kind, categoryCount, legendItems.length);
+	const isInteractive = (hasTooltip || onCategorySelect !== void 0) && !isLoading && !isEmpty;
 	const tooltipModel = useMemo(() => {
-		if (noTooltip || !interaction.showTooltip || interaction.activeIndex === null) return null;
+		if (!hasTooltip || isLoading || !interaction.showTooltip || interaction.activeIndex === null) return null;
 		const model = buildCategoryTooltip(interaction.activeIndex);
-		if (model === null) return null;
-		if (model.rows.length === 0 && tooltipRenderer !== void 0) return null;
-		return model;
+		if (model === null || model.rows.length === 0 && renderTooltip !== void 0) return null;
+		return {
+			...model,
+			anchorX: model.anchorX + insets.left,
+			anchorY: model.anchorY + insets.top
+		};
 	}, [
-		noTooltip,
-		buildCategoryTooltip,
-		interaction.activeIndex,
+		hasTooltip,
+		isLoading,
 		interaction.showTooltip,
-		tooltipRenderer
-	]);
-	/**
-	* 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
+		interaction.activeIndex,
+		buildCategoryTooltip,
+		renderTooltip,
+		insets.left,
+		insets.top
 	]);
-	const hasTargets = isMeasured && !noTooltip && !isLoading && !isEmpty && (categoryTargets?.length ?? 0) > 0;
-	const legendRight = legendPlacement === ChartLegendPlacement.RIGHT;
-	return /* @__PURE__ */ jsxs(ChartRoot, {
-		$fillWidth: fillWidth,
-		$fillHeight: fillHeight,
-		$legendRight: legendRight,
-		children: [/* @__PURE__ */ jsxs(ChartPlotBox, {
-			ref: containerRef,
-			$reservedHeight: reservedHeight,
-			$reservedAspectRatio: reservedAspectRatio,
-			$fillHeight: fillHeight,
-			$legendRight: legendRight,
-			$squareFromHeight: legendRight && fillWidth && reservedAspectRatio === void 0,
+	const announce = useCallback((index) => {
+		if (index === null) setAnnouncement("");
+		else if (describeCategory) setAnnouncement(describeCategory(index));
+		else setAnnouncement(describeTooltip(buildCategoryTooltip(index)));
+	}, [buildCategoryTooltip, describeCategory]);
+	const handleKeyDown = (event) => {
+		if (event.target !== event.currentTarget) return;
+		if (NAVIGATION_KEYS.has(event.key)) {
+			const next = interaction.onKeyboardMove(event.key);
+			if (next === null) return;
+			event.preventDefault();
+			announce(next);
+			return;
+		}
+		if (event.key === "Enter" || event.key === " ") {
+			if (event.key === " ") event.preventDefault();
+			if (onCategorySelect && interaction.activeIndex !== null) {
+				event.preventDefault();
+				onCategorySelect(interaction.activeIndex, isAdditiveEvent(event));
+			}
+			return;
+		}
+		if (event.key !== "Escape") return;
+		if (interaction.activeIndex !== null) {
+			event.preventDefault();
+			event.stopPropagation();
+			interaction.onKeyboardClear();
+			setAnnouncement("");
+		} else if (interaction.isFilterable && interaction.hasSelection) {
+			event.preventDefault();
+			event.stopPropagation();
+			interaction.clearSelection();
+			setAnnouncement("Filter cleared.");
+		}
+	};
+	const handleLegendClick = (seriesKey, isAdditive) => interaction.toggleSelection({ seriesKey }, isAdditive);
+	const handleFilterDismiss = (rest) => {
+		if (rest === null) interaction.clearSelection();
+		else interaction.setSelection([rest]);
+		if (isInteractive) plotRef.current?.focus();
+	};
+	const handleFocus = (event) => {
+		if (event.target !== event.currentTarget) return;
+		let isKeyboardFocus = true;
+		try {
+			isKeyboardFocus = event.currentTarget.matches(":focus-visible");
+		} catch {}
+		if (isKeyboardFocus) announce(interaction.onKeyboardFocus());
+	};
+	const handleBlur = (event) => {
+		if (event.target !== event.currentTarget) return;
+		interaction.onKeyboardBlur();
+	};
+	const plotA11yProps = isInteractive ? {
+		tabIndex: 0,
+		role: "group",
+		"aria-roledescription": "chart",
+		"aria-label": resolvedAriaLabel,
+		onKeyDown: handleKeyDown,
+		onFocus: handleFocus,
+		onBlur: handleBlur
+	} : {
+		role: "img",
+		"aria-label": resolvedAriaLabel
+	};
+	const isSkeleton = isLoading && isEmpty;
+	const isSideLegend = legendPlacement === ChartLegendPlacement.RIGHT;
+	const categoryLabel = (key) => formatCategoryKey?.(key) ?? key;
+	const seriesLabel = (key) => legendItems.find((item) => item.key === key)?.label ?? key;
+	const describePin = (pin) => [pin.categoryKey === void 0 ? void 0 : categoryLabel(pin.categoryKey), pin.seriesKey === void 0 ? void 0 : seriesLabel(pin.seriesKey)].filter((part) => part !== void 0).join(" · ");
+	/** One chip per part of a single pin; one "N filters" chip for several. */
+	const filterChipParts = (() => {
+		const pins = interaction.selection;
+		const [pin] = pins;
+		if (!interaction.isFilterable || pin === void 0) return [];
+		if (pins.length > 1) return [{
+			key: "all",
+			label: `${pins.length} filters`,
+			rest: null
+		}];
+		const parts = [];
+		if (pin.categoryKey !== void 0) parts.push({
+			key: "category",
+			label: categoryLabel(pin.categoryKey),
+			rest: pin.seriesKey === void 0 ? null : { seriesKey: pin.seriesKey }
+		});
+		if (pin.seriesKey !== void 0) parts.push({
+			key: "series",
+			label: seriesLabel(pin.seriesKey),
+			rest: pin.categoryKey === void 0 ? null : { categoryKey: pin.categoryKey }
+		});
+		return parts;
+	})();
+	const filterChip = filterChipParts.length === 0 ? null : filterChipParts.map((part, index) => /* @__PURE__ */ jsx(Chip, {
+		size: ChipSize.SMALL,
+		...index === 0 && { icon: FunnelSimpleIcon },
+		label: part.label,
+		tooltip: part.key === "all" ? interaction.selection.map(describePin).join(", ") : "",
+		onDismiss: () => handleFilterDismiss(part.rest)
+	}, part.key));
+	const legendNode = !hasLegend || isSkeleton ? null : legend ?? /* @__PURE__ */ jsx(ChartLegend, {
+		items: legendItems,
+		placement: legendPlacement,
+		swatch: legendSwatch,
+		inset: isSideLegend ? CHART_LEGEND_SIDE_GAP : insets.left,
+		extent: isSideLegend ? Math.max(0, height - (interaction.isFilterable ? CHART_LEGEND_FILTER_EXTENT : 0)) : 0,
+		isFixedExtent: !interaction.isFilterable,
+		hasFilterSlot: interaction.isFilterable,
+		filter: filterChip,
+		getEntryState: interaction.getSeriesState,
+		isEntryPinned: interaction.isSeriesPinned,
+		onItemClick: interaction.isFilterable ? handleLegendClick : void 0,
+		onItemEnter: interaction.onSeriesEnter,
+		onItemLeave: interaction.onSeriesLeave
+	});
+	const hasTargets = isMeasured && isInteractive && categoryTargets.length > 0;
+	const rootStyle = {
+		"--gx-chart-aspect-ratio": aspectRatio,
+		...style
+	};
+	return /* @__PURE__ */ jsxs(Root, {
+		...rootPassthrough,
+		ref: rootRef,
+		id,
+		"aria-busy": isLoading || void 0,
+		className: cx(CHART_LEGEND_PLACEMENT_TO_CSS_MAP[legendPlacement], className),
+		style: rootStyle,
+		children: [/* @__PURE__ */ jsxs(PlotBox, {
+			...plotAriaRest,
+			...plotA11yProps,
+			ref: plotRef,
+			className: cx(isInteractive && PLOT_INTERACTIVE_CSS, plotClassName),
 			children: [
-				isMeasured && /* @__PURE__ */ jsxs(ChartSvg, {
+				isMeasured && !isSkeleton && /* @__PURE__ */ jsx(ChartSvg, {
+					"aria-hidden": "true",
 					width,
 					height,
-					role: "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: /* @__PURE__ */ jsxs("g", {
+						transform: `translate(${insets.left}, ${insets.top})`,
 						children: [
 							axes,
 							/* @__PURE__ */ jsx("g", { children }),
-							hasTargets && categoryTargets && /* @__PURE__ */ jsxs("g", {
-								transform: categoryTargetsTransform,
-								onMouseLeave: interaction.onCategoryLeave,
+							hasTargets && /* @__PURE__ */ jsxs("g", {
+								transform: targetsTransform,
 								children: [/* @__PURE__ */ jsx(ChartCategoryTargets, {
 									targets: categoryTargets,
-									interaction,
+									onEnter: interaction.onCategoryEnter,
+									onLeave: interaction.onCategoryLeave,
 									onSelect: onCategorySelect
 								}), onMarkSelect && markTargets && markTargets.length > 0 && /* @__PURE__ */ jsx(ChartMarkTargets, {
 									targets: markTargets,
-									interaction,
+									onEnter: interaction.onCategoryEnter,
+									onLeave: interaction.onCategoryLeave,
 									onSelect: onMarkSelect
 								})]
 							})
 						]
-					})]
+					})
 				}),
-				isMeasured && plotOverlay,
-				isMeasured && !noTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
-					model: positionedTooltip,
+				isMeasured && !isSkeleton && plotOverlay,
+				isMeasured && isEmpty && !isLoading && /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx(EmptyState, {
+					size: EmptyStateSize.SMALL,
+					header: placeholder,
+					role: "status"
+				}) }),
+				isSkeleton && /* @__PURE__ */ jsx(Skeleton, {
+					variant: SkeletonVariant.RECT,
+					className: LOADING_SKELETON_CSS
+				}),
+				isMeasured && hasTooltip && !isSkeleton && /* @__PURE__ */ jsx(ChartTooltip, {
+					model: tooltipModel,
 					containerWidth: width,
 					containerHeight: height,
 					anchorHalfWidth,
-					placeAwayFromX: placeAwayFromX === void 0 ? void 0 : placeAwayFromX + margin.left,
+					placeAwayFromX: placeAwayFromX === void 0 ? void 0 : placeAwayFromX + insets.left,
 					verticalAlign,
-					renderer: tooltipRenderer,
-					maxItems: tooltipMaxItems
+					renderTooltip,
+					swatch: tooltipSwatch
 				}),
-				isMeasured && isEmpty && !isLoading && /* @__PURE__ */ jsx(ChartEmptyState, { content: contentWhenEmpty })
+				/* @__PURE__ */ jsx(LiveRegion, {
+					"aria-live": "polite",
+					children: announcement
+				})
 			]
-		}), showLegend && /* @__PURE__ */ jsx(ChartLegend, {
-			items: legendItems,
-			inset: legendInset ?? (legendRight ? 16 : margin.left),
-			vertical: legendRight,
-			verticalExtent: legendRight ? height : void 0,
-			maxItems: legendMaxItems,
-			hoveredKey: interaction.hoveredSeriesKey,
-			onItemEnter: interaction.onSeriesEnter,
-			onItemLeave: interaction.onSeriesLeave
-		})]
+		}), legendNode !== null && (interaction.isFilterable && legend !== void 0 ? /* @__PURE__ */ jsxs(CustomLegendBar, { children: [legendNode, /* @__PURE__ */ jsx(CustomFilterSlot, {
+			"aria-hidden": filterChip === null || void 0,
+			children: filterChip
+		})] }) : legendNode)]
 	});
-};
+}
 //#endregion
-export { ChartFrame as default };
+export { ChartFrame };

package/dist/charts/ChartGroupProvider.d.ts

@@ -1,57 +1,46 @@
-import { type PropsWithChildren } from "react";
 /**
- * The category one chart's pointer is currently over, broadcast to its
- * siblings.
+ * ChartGroupProvider links the cartesian charts inside it: hovering or arrowing to a category in
+ * one chart shows the same category in every sibling, matched by raw category label. It renders
+ * no DOM. Only `LineChart`, `AreaChart` and `BarChart` join; each syncs with its nearest provider,
+ * so a nested provider isolates a subset. Series (legend) hover stays local, and `PieChart` never
+ * syncs (it has no category axis).
+ *
+ * Plain context state is the right transport: entries change once per category crossed, not per
+ * pointer move, so a sweep across a chart re-renders the group a handful of times.
  */
+import { type ReactNode } from "react";
+/** @internal The category one chart is engaging (hover or keyboard), broadcast to its siblings. */
 export interface ChartGroupSyncEntry {
-    /** `useId` of the chart whose pointer produced this entry. */
+    /** `useId` of the chart that produced this entry. */
     sourceId: string;
-    /**
-     * The raw category label under the pointer — never `labelFormatter` output,
-     * so two charts formatting the same label differently still match.
-     */
+    /** The raw category label, never `labelFormatter` output, so differently formatted charts still match. */
     categoryKey: string;
 }
+/** @internal What the provider shares with its charts. */
 export interface ChartGroupContextValue {
+    /** The engaged category, or `null`. */
     activeEntry: ChartGroupSyncEntry | null;
+    /** Publishes an entry (deduplicated by value). */
     setActive: (entry: ChartGroupSyncEntry) => void;
-    /** Clears only if the current entry belongs to `sourceId`. */
+    /** Clears the entry only if it belongs to `sourceId`. */
     clearActive: (sourceId: string) => void;
     /** Followers open their own tooltip at the synced category. */
-    sharedTooltip: boolean;
+    shouldShareTooltip: boolean;
 }
+/** @internal Read by the chart modules; apps never read it. */
 export declare const ChartGroupContext: import("react").Context<ChartGroupContextValue | null>;
-/**
- * Shares the hovered category between the cartesian charts inside it.
- *
- * Hovering a category in one chart shows the same category emphasized in every
- * sibling — matched by raw category label, so charts whose category sets only
- * partially overlap simply show nothing for the labels they lack. By default
- * the tooltip stays local to the chart under the pointer; siblings get the
- * quiet emphasis only (LineChart its cursor line and dots, BarChart its band
- * tint and gentle dim). `sharedTooltip` opts every synced chart into opening its
- * own tooltip at the shared category — the tooltip anchors to the category's
- * geometry, not the pointer, so a follower's opens exactly where a local
- * hover's would.
- *
- * Scope, deliberately narrow:
- * - Only the category axis syncs. Legend (series) hover stays local.
- * - PieChart never participates — it has no category axis.
- * - There is no per-chart opt-out prop. The opt-out is rendering the chart
- *   outside the provider, and nesting a second provider isolates a subset —
- *   charts sync with their nearest ancestor.
- *
- * Renders no DOM and holds no layout opinion — unlike `OverlayProvider` it is
- * not a page-root singleton, and several can coexist on a page.
- *
- * Plain context state is the right transport here: entries change at category
- * granularity (once per hit band crossed, not per mousemove), so a sweep
- * across a chart re-renders the group a handful of times. No subscription or
- * selector machinery is warranted.
- */
 export interface ChartGroupProviderProps {
-    /** Every synced chart opens its own tooltip at the shared category. @default false */
-    sharedTooltip?: boolean;
+    /**
+     * Every synced chart opens its own tooltip at the shared category. Off: siblings show only the quiet emphasis (cursor, band).
+     * @default false
+     */
+    shouldShareTooltip?: boolean;
+    /** The charts (and any layout around them). Only `LineChart`, `AreaChart` and `BarChart` join the sync; they sync with their nearest provider. */
+    children?: ReactNode;
+}
+/** Syncs the hovered or focused category across the cartesian charts inside it. */
+declare function ChartGroupProvider({ shouldShareTooltip, children }: ChartGroupProviderProps): import("react").JSX.Element;
+declare namespace ChartGroupProvider {
+    var displayName: string;
 }
-export declare const ChartGroupProvider: ({ sharedTooltip, children, }: PropsWithChildren<ChartGroupProviderProps>) => import("react").JSX.Element;
 export default ChartGroupProvider;

package/dist/charts/ChartGroupProvider.js

@@ -1,8 +1,20 @@
 import { createContext, useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/charts/ChartGroupProvider.tsx
+/**
+* ChartGroupProvider links the cartesian charts inside it: hovering or arrowing to a category in
+* one chart shows the same category in every sibling, matched by raw category label. It renders
+* no DOM. Only `LineChart`, `AreaChart` and `BarChart` join; each syncs with its nearest provider,
+* so a nested provider isolates a subset. Series (legend) hover stays local, and `PieChart` never
+* syncs (it has no category axis).
+*
+* Plain context state is the right transport: entries change once per category crossed, not per
+* pointer move, so a sweep across a chart re-renders the group a handful of times.
+*/
+/** @internal Read by the chart modules; apps never read it. */
 var ChartGroupContext = createContext(null);
-var ChartGroupProvider = ({ sharedTooltip = false, children }) => {
+/** Syncs the hovered or focused category across the cartesian charts inside it. */
+function ChartGroupProvider({ shouldShareTooltip = false, children }) {
 	const [activeEntry, setActiveEntry] = useState(null);
 	const setActive = useCallback((entry) => {
 		setActiveEntry((prev) => prev !== null && prev.sourceId === entry.sourceId && prev.categoryKey === entry.categoryKey ? prev : entry);
@@ -10,21 +22,22 @@ var ChartGroupProvider = ({ sharedTooltip = false, children }) => {
 	const clearActive = useCallback((sourceId) => {
 		setActiveEntry((prev) => prev !== null && prev.sourceId === sourceId ? null : prev);
 	}, []);
-	const contextValue = useMemo(() => ({
+	const value = useMemo(() => ({
 		activeEntry,
 		setActive,
 		clearActive,
-		sharedTooltip
+		shouldShareTooltip
 	}), [
 		activeEntry,
 		setActive,
 		clearActive,
-		sharedTooltip
+		shouldShareTooltip
 	]);
 	return /* @__PURE__ */ jsx(ChartGroupContext.Provider, {
-		value: contextValue,
+		value,
 		children
 	});
-};
+}
+ChartGroupProvider.displayName = "ChartGroupProvider";
 //#endregion
-export { ChartGroupContext, ChartGroupProvider, ChartGroupProvider as default };
+export { ChartGroupContext, ChartGroupProvider as default };