@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/charts/ChartFrame.js

@@ -1,129 +1,263 @@
+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_SIDE_GAP } from "./constants.js";
+import EmptyState, { EmptyStateSize } from "../feedback/EmptyState.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";
 //#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. 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";
+var LiveRegion = /*#__PURE__*/ styled("div")({
+	name: "LiveRegion",
+	class: "gx-ChartFrame-LiveRegion-l1jrxj0u",
+	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 }) {
+	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,
-			children: [
-				isMeasured && /* @__PURE__ */ jsxs(ChartSvg, {
-					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: [
-							axes,
-							/* @__PURE__ */ jsx("g", { children }),
-							hasTargets && categoryTargets && /* @__PURE__ */ jsxs("g", {
-								transform: categoryTargetsTransform,
-								onMouseLeave: interaction.onCategoryLeave,
-								children: [/* @__PURE__ */ jsx(ChartCategoryTargets, {
-									targets: categoryTargets,
-									interaction,
-									onSelect: onCategorySelect
-								}), onMarkSelect && markTargets && markTargets.length > 0 && /* @__PURE__ */ jsx(ChartMarkTargets, {
-									targets: markTargets,
-									interaction,
-									onSelect: onMarkSelect
-								})]
-							})
-						]
-					})]
-				}),
-				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,
-					maxItems: tooltipMaxItems
-				}),
-				isMeasured && isEmpty && !isLoading && /* @__PURE__ */ jsx(ChartEmptyState, { content: contentWhenEmpty })
-			]
-		}), 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
-		})]
+	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);
+			}
+			return;
+		}
+		if (event.key === "Escape" && interaction.activeIndex !== null) {
+			event.preventDefault();
+			event.stopPropagation();
+			interaction.onKeyboardClear();
+			setAnnouncement("");
+		}
+	};
+	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 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 && !isSkeleton && /* @__PURE__ */ jsx(ChartSvg, {
+						"aria-hidden": "true",
+						width,
+						height,
+						children: /* @__PURE__ */ jsxs("g", {
+							transform: `translate(${insets.left}, ${insets.top})`,
+							children: [
+								axes,
+								/* @__PURE__ */ jsx("g", { children }),
+								hasTargets && /* @__PURE__ */ jsxs("g", {
+									transform: targetsTransform,
+									children: [/* @__PURE__ */ jsx(ChartCategoryTargets, {
+										targets: categoryTargets,
+										onEnter: interaction.onCategoryEnter,
+										onLeave: interaction.onCategoryLeave,
+										onSelect: onCategorySelect
+									}), onMarkSelect && markTargets && markTargets.length > 0 && /* @__PURE__ */ jsx(ChartMarkTargets, {
+										targets: markTargets,
+										onEnter: interaction.onCategoryEnter,
+										onLeave: interaction.onCategoryLeave,
+										onSelect: onMarkSelect
+									})]
+								})
+							]
+						})
+					}),
+					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 + insets.left,
+						verticalAlign,
+						renderTooltip,
+						swatch: tooltipSwatch
+					}),
+					/* @__PURE__ */ jsx(LiveRegion, {
+						"aria-live": "polite",
+						children: announcement
+					})
+				]
+			}),
+			hasLegend && !isSkeleton && legend,
+			hasLegend && !isSkeleton && legend === void 0 && /* @__PURE__ */ jsx(ChartLegend, {
+				items: legendItems,
+				placement: legendPlacement,
+				swatch: legendSwatch,
+				inset: legendPlacement === ChartLegendPlacement.RIGHT ? CHART_LEGEND_SIDE_GAP : insets.left,
+				extent: legendPlacement === ChartLegendPlacement.RIGHT ? height : 0,
+				hoveredKey: interaction.hoveredSeriesKey,
+				onItemEnter: interaction.onSeriesEnter,
+				onItemLeave: interaction.onSeriesLeave
+			})
+		]
 	});
-};
+}
 //#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 };

package/dist/charts/ChartLegend.d.ts

@@ -1,51 +1,30 @@
-import type { ChartLegendItem } from "./types";
-interface ChartLegendProps {
+import { type ReactNode } from "react";
+import { type ChartLegendItem, ChartLegendPlacement } from "./types.js";
+/** @internal Swatch shape: a dot for line series, a square for filled series. */
+export declare enum ChartLegendSwatch {
+    /** `Circle SMALL`: line series. */
+    CIRCLE = "CIRCLE",
+    /** `Square SMALL`: area, bar, arc and heatmap series. */
+    SQUARE = "SQUARE"
+}
+/** @internal Props of `ChartLegend`. */
+export interface ChartLegendProps {
+    /** Entries in series order. */
     items: ChartLegendItem[];
-    /** Left padding aligning the legend with the plot, not the axis gutter. */
+    /** Line (BOTTOM) or column (RIGHT). */
+    placement: ChartLegendPlacement;
+    /** Swatch shape. */
+    swatch: ChartLegendSwatch;
+    /** BOTTOM: left padding that aligns the legend with the plot. */
     inset: number;
-    /** Series key currently hovered anywhere in the chart. */
-    hoveredKey?: string | null;
-    /** Stack entries in a column — the side-placed layout. */
-    vertical?: boolean;
-    /**
-     * Plot box height in px — the vertical legend's fit extent. Height needs to
-     * arrive as a number because, unlike width, a percentage of the root's
-     * auto height is indefinite and computes to nothing. Absent (or 0, the
-     * unmeasured plot) there is no height constraint and every entry renders.
-     */
-    verticalExtent?: number;
-    /**
-     * Stricter cap on inline entries, on top of the automatic fit. The legend
-     * already collapses whatever won't fit inside the plot's extent — width for
-     * the horizontal layout, height for the side-placed one — behind the
-     * "+N more" trigger; this only lowers that number further.
-     */
-    maxItems?: number;
-    /**
-     * 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;
+    /** RIGHT: the plot height the column fits into (0 = unconstrained). */
+    extent?: number;
+    /** The series key being isolated. */
+    hoveredKey: string | null;
+    /** Pointer entered an entry. */
+    onItemEnter: (key: string) => void;
+    /** Pointer left an entry. */
+    onItemLeave: () => void;
 }
-/**
- * Legend for the chart components.
- *
- * Hovering or focusing an entry isolates its series; leaving releases it.
- *
- * The legend never outgrows the plot. A horizontal legend holds exactly one
- * line of the plot's width; a side-placed legend holds one column of the
- * plot's height. Entries that would not fit collapse behind a "+N more"
- * trigger whose tooltip lists them — still hoverable, so a collapsed series
- * isolates exactly like a visible one. The fit is measured, not guessed: a
- * hidden copy of every entry is laid out unconstrained, and the visible count
- * is however many real sizes fit beside the trigger.
- *
- * 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, vertical, verticalExtent, maxItems, onItemEnter, onItemLeave, }: ChartLegendProps) => import("react").JSX.Element | null;
-export default ChartLegend;
+/** @internal The chart legend. */
+export declare function ChartLegend({ items, placement, swatch, inset, extent, hoveredKey, onItemEnter, onItemLeave, }: ChartLegendProps): ReactNode;