@galaxy-io/dls 1.4.10 → 1.4.12

package/dist/charts/ChartFrame.js

@@ -1,6 +1,6 @@
 import { ChartKind, ChartLegendPlacement } from "./types.js";
 import "./constants.js";
-import { ChartPlotBox, ChartPlotGroup, ChartRoot, ChartSvg } from "./ChartPrimitives.js";
+import { ChartPlotBox, ChartRoot, ChartSvg } from "./ChartPrimitives.js";
 import ChartCategoryTargets from "./ChartCategoryTargets.js";
 import ChartEmptyState from "./ChartEmptyState.js";
 import ChartLegend from "./ChartLegend.js";
@@ -23,10 +23,15 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 	* 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), [
+	const tooltipModel = useMemo(() => {
+		if (noTooltip || !interaction.showTooltip || interaction.activeIndex === null) return null;
+		const model = buildCategoryTooltip(interaction.activeIndex);
+		return model === null || model.rows.length === 0 ? null : model;
+	}, [
 		noTooltip,
 		buildCategoryTooltip,
-		interaction.activeIndex
+		interaction.activeIndex,
+		interaction.showTooltip
 	]);
 	/**
 	* Plot space → container space, applied once, here.
@@ -47,22 +52,6 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 		margin.left,
 		margin.top
 	]);
-	/**
-	* Categories whose tooltip would have no rows.
-	*
-	* Decided here — from the same builder that feeds the visible tooltip — so
-	* "no data at this X" means exactly one thing in every chart: an all-zero
-	* bar group and an all-null line column both produce a rowless model, and
-	* neither should be hoverable. Their targets are simply not rendered.
-	*/
-	const inertIndices = useMemo(() => {
-		const inert = /* @__PURE__ */ new Set();
-		(categoryTargets ?? []).forEach((_, index) => {
-			const model = buildCategoryTooltip(index);
-			if (!model || model.rows.length === 0) inert.add(index);
-		});
-		return inert;
-	}, [categoryTargets, buildCategoryTooltip]);
 	const hasTargets = isMeasured && !noTooltip && !isLoading && !isEmpty && (categoryTargets?.length ?? 0) > 0;
 	const legendRight = legendPlacement === ChartLegendPlacement.RIGHT;
 	return /* @__PURE__ */ jsxs(ChartRoot, {
@@ -90,16 +79,12 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 						transform: `translate(${margin.left}, ${margin.top})`,
 						children: [
 							axes,
-							/* @__PURE__ */ jsx(ChartPlotGroup, {
-								"data-active": interaction.isEngaged ? "true" : "false",
-								children
-							}),
+							/* @__PURE__ */ jsx("g", { children }),
 							hasTargets && categoryTargets && /* @__PURE__ */ jsx("g", {
 								transform: categoryTargetsTransform,
 								children: /* @__PURE__ */ jsx(ChartCategoryTargets, {
 									targets: categoryTargets,
-									interaction,
-									inertIndices
+									interaction
 								})
 							})
 						]

package/dist/charts/ChartLegend.js

@@ -2,7 +2,6 @@ import Text, { TextSize, TextVariant } from "../text/Text.js";
 import Tooltip, { TooltipPosition, TooltipVariant } from "../tooltip/Tooltip.js";
 import Circle from "../shapes/Circle.js";
 import { ChartMarkState } from "./types.js";
-import "./constants.js";
 import { ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendOverflowList, ChartLegendRow } from "./ChartPrimitives.js";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -38,14 +37,13 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
 		const rendered = Array.from(measure.children);
 		const trigger = rendered.pop();
 		if (!trigger) return;
-		const gap = vertical ? 8 : 16;
 		const available = vertical ? verticalExtent || Number.POSITIVE_INFINITY : row.clientWidth - inset;
 		const sizeOf = (el) => {
 			const rect = el.getBoundingClientRect();
 			return Math.ceil(vertical ? rect.height : rect.width);
 		};
 		const sizes = rendered.map(sizeOf);
-		if (sizes.reduce((sum, size, i) => sum + size + (i > 0 ? gap : 0), 0) <= available) {
+		if (sizes.reduce((sum, size) => sum + size, 0) <= available) {
 			setFitCount(sizes.length);
 			return;
 		}
@@ -53,8 +51,8 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
 		let used = 0;
 		let count = 0;
 		for (const [i, size] of sizes.entries()) {
-			used += size + (i > 0 ? gap : 0);
-			if (used + gap + triggerSize > available) break;
+			used += size;
+			if (used + triggerSize > available) break;
 			count = i + 1;
 		}
 		setFitCount(Math.max(1, count));
@@ -80,7 +78,7 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
 	if (items.length === 0) return null;
 	const isInteractive = Boolean(onItemEnter);
 	const activeKey = hoveredKey;
-	const renderItem = (item) => {
+	const renderItem = (item, verticalPadding) => {
 		const state = activeKey === null || item.key === activeKey ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
 		const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Circle, {
 			size: 8,
@@ -90,11 +88,13 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
 			children: item.label
 		})] });
 		if (!isInteractive) return /* @__PURE__ */ jsx(ChartLegendItemStatic, {
+			$vertical: verticalPadding,
 			"data-state": state,
 			children: content
 		}, item.key);
 		return /* @__PURE__ */ jsx(ChartLegendItemButton, {
 			type: "button",
+			$vertical: verticalPadding,
 			"data-state": state,
 			onMouseEnter: () => onItemEnter?.(item.key),
 			onMouseLeave: () => onItemLeave?.(),
@@ -119,35 +119,38 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
 		$inset: inset,
 		$vertical: vertical,
 		$extent: verticalExtent,
-		"data-active": activeKey !== null ? "true" : "false",
 		children: [
 			/* @__PURE__ */ jsxs(ChartLegendMeasure, {
 				ref: measureRef,
 				$vertical: vertical,
 				"aria-hidden": "true",
-				children: [items.map((item) => /* @__PURE__ */ jsxs(ChartLegendItemStatic, { children: [/* @__PURE__ */ jsx(Circle, {
-					size: 8,
-					hex: item.color
-				}), /* @__PURE__ */ jsx(Text, {
-					size: TextSize.BODY_SM,
-					children: item.label
-				})] }, item.key)), /* @__PURE__ */ jsx(ChartLegendItemStatic, { children: /* @__PURE__ */ jsx(Text, {
-					size: TextSize.BODY_SM,
-					variant: TextVariant.SECONDARY,
-					children: `+${items.length - 1} more`
-				}) })]
+				children: [items.map((item) => /* @__PURE__ */ jsxs(ChartLegendItemStatic, {
+					$vertical: vertical,
+					children: [/* @__PURE__ */ jsx(Circle, {
+						size: 8,
+						hex: item.color
+					}), /* @__PURE__ */ jsx(Text, {
+						size: TextSize.BODY_SM,
+						children: item.label
+					})]
+				}, item.key)), /* @__PURE__ */ jsx(ChartLegendItemStatic, {
+					$vertical: vertical,
+					children: /* @__PURE__ */ jsx(Text, {
+						size: TextSize.BODY_SM,
+						variant: TextVariant.SECONDARY,
+						children: `+${items.length - 1} more`
+					})
+				})]
 			}),
-			inlineItems.map(renderItem),
+			inlineItems.map((item) => renderItem(item, vertical)),
 			overflowItems.length > 0 && /* @__PURE__ */ jsx(Tooltip, {
 				isInteractive: true,
 				position: vertical ? TooltipPosition.RIGHT : TooltipPosition.TOP,
 				variant: TooltipVariant.TERTIARY,
-				body: /* @__PURE__ */ jsx(ChartLegendOverflowList, {
-					"data-active": activeKey !== null ? "true" : "false",
-					children: overflowItems.map(renderItem)
-				}),
+				body: /* @__PURE__ */ jsx(ChartLegendOverflowList, { children: overflowItems.map((item) => renderItem(item, true)) }),
 				children: /* @__PURE__ */ jsx(ChartLegendItemButton, {
 					type: "button",
+					$vertical: vertical,
 					"data-state": triggerState,
 					children: /* @__PURE__ */ jsx(Text, {
 						size: TextSize.BODY_SM,

package/dist/charts/ChartPrimitives.d.ts

@@ -45,11 +45,6 @@ export declare const ChartPlotBox: import("@linaria/react").StyledComponent<impo
  * the plot rather than being clipped by the root SVG.
  */
 export declare const ChartSvg: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGSVGElement> & Record<never, unknown>>;
-/**
- * Cancels the restore delay for every mark beneath it while a category is
- * engaged. See {@link markState}.
- */
-export declare const ChartPlotGroup: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGGElement> & Record<never, unknown>>;
 export declare const ChartBarPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
 export declare const ChartLinePath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
 export declare const ChartAreaPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
@@ -116,6 +111,29 @@ export declare const ChartCursorLine: import("react").ComponentType<Pick<import(
 } & {
     as?: React.ElementType;
 }>, {}>;
+/**
+ * Full-height tint over the hovered category's band on a bar chart — the bar
+ * counterpart to {@link ChartCursorLine}. A rule reads oddly threaded through
+ * wide filled marks; a quiet band behind them marks the same position without
+ * touching them. 8% of the foreground, so it survives both themes.
+ */
+export declare const ChartCursorBand: import("react").ComponentType<Pick<import("react").SVGProps<SVGRectElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, "as" | keyof import("react").SVGProps<SVGRectElement>> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").SVGProps<SVGRectElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").SVGProps<SVGRectElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
 export declare const ChartAxisLabelBox: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGForeignObjectElement> & Record<never, unknown>>;
 /**
  * Positioned from coordinates already clamped to the chart box.
@@ -203,12 +221,6 @@ export declare const ChartEmptyOverlay: import("react").ComponentType<Pick<impor
 }>, {}>;
 /**
  * Aligns the legend under the plot rather than the value-axis gutter.
- *
- * Also cancels the restore delay for its entries while the legend is dimming,
- * exactly as {@link ChartPlotGroup} does for the marks. The legend renders
- * *outside* the SVG, so the plot group's selector cannot reach it — without this
- * the marks dim instantly while their legend entries sit through the full
- * {@link CHART_RESTORE_DELAY_MS}, and the two visibly fall out of step.
  */
 export declare const ChartLegendRow: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     $inset: number;
@@ -232,9 +244,7 @@ export declare const ChartLegendMeasure: import("@linaria/react").StyledComponen
  * the body of an interactive tooltip.
  *
  * Scrolls past {@link CHART_LEGEND_OVERFLOW_MAX_HEIGHT} so a fifty-series chart
- * gets a bounded popover rather than one taller than the plot. Carries its own
- * `data-active` delay-cancel rule: the tooltip content mounts outside
- * {@link ChartLegendRow}, where the row's selector cannot reach it.
+ * gets a bounded popover rather than one taller than the plot.
  */
 export declare const ChartLegendOverflowList: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 /**
@@ -248,7 +258,18 @@ export declare const ChartLegendOverflowList: import("@linaria/react").StyledCom
  *
  * Shares the mark opacity ramp via `data-state`, so an entry recedes in step
  * with the series it names.
+ *
+ * The trailing padding is the inter-entry spacing — deliberately padding on
+ * the entry rather than a gap on the container, so the hover surfaces of
+ * adjacent entries touch and a sweep hands the isolation directly from one
+ * series to the next. Trailing only, so the first entry stays flush with the
+ * plot's left edge (or the column's top).
  */
-export declare const ChartLegendItemButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
-/** The same row, when the legend is inert — no button semantics to announce. */
-export declare const ChartLegendItemStatic: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ChartLegendItemButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    $vertical?: boolean;
+}>;
+/** The same row, when the legend is inert — no button semantics to announce.
+ * Carries the same trailing padding; see {@link ChartLegendItemButton}. */
+export declare const ChartLegendItemStatic: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $vertical?: boolean;
+}>;

package/dist/charts/ChartPrimitives.js

@@ -22,12 +22,10 @@ import { styled } from "@linaria/react";
 * HOC's return type erases the element type, so a mismatched ref would compile.
 */
 /**
-* Shared emphasis ramp.
+* Shared emphasis states.
 *
-* The delay asymmetry is deliberate and load-bearing: highlighting is instant,
-* but restoring waits, so sweeping the pointer across categories reads as one
-* gesture instead of a strobe. The plot sets `data-active` while any category is
-* engaged, which cancels the delay for the whole subtree.
+* Deliberately no transition: emphasis is feedback, and feedback that eases in
+* reads as lag. The states snap.
 */
 /**
 * Outer container. Receives the measurement ref.
@@ -104,38 +102,29 @@ var ChartSvg = /*#__PURE__*/ styled("svg")({
 	class: "c10uj5yt",
 	propsAsIs: false
 });
-/**
-* Cancels the restore delay for every mark beneath it while a category is
-* engaged. See {@link markState}.
-*/
-var ChartPlotGroup = /*#__PURE__*/ styled("g")({
-	name: "ChartPlotGroup",
-	class: "cyuty3o",
-	propsAsIs: true
-});
 var ChartBarPath = /*#__PURE__*/ styled("path")({
 	name: "ChartBarPath",
-	class: "c1ob2op2",
+	class: "cyuty3o",
 	propsAsIs: true
 });
 var ChartLinePath = /*#__PURE__*/ styled("path")({
 	name: "ChartLinePath",
-	class: "c8c506o",
+	class: "c1ob2op2",
 	propsAsIs: true
 });
 var ChartAreaPath = /*#__PURE__*/ styled("path")({
 	name: "ChartAreaPath",
-	class: "ceqlpek",
+	class: "c8c506o",
 	propsAsIs: true
 });
 var ChartPointCircle = /*#__PURE__*/ styled("circle")({
 	name: "ChartPointCircle",
-	class: "c1fcbddl",
+	class: "ceqlpek",
 	propsAsIs: true
 });
 var ChartArcPath = /*#__PURE__*/ styled("path")({
 	name: "ChartArcPath",
-	class: "cpcxr59",
+	class: "c1fcbddl",
 	propsAsIs: true
 });
 /**
@@ -151,7 +140,7 @@ var ChartArcPath = /*#__PURE__*/ styled("path")({
 */
 var ChartHitTarget = /*#__PURE__*/ styled("rect")({
 	name: "ChartHitTarget",
-	class: "c1wvzvu4",
+	class: "cpcxr59",
 	propsAsIs: true
 });
 /**
@@ -164,7 +153,7 @@ var ChartHitTarget = /*#__PURE__*/ styled("rect")({
 */
 var ChartHitTargetPath = /*#__PURE__*/ styled("path")({
 	name: "ChartHitTargetPath",
-	class: "c17guewt",
+	class: "c1wvzvu4",
 	propsAsIs: true
 });
 /**
@@ -175,17 +164,30 @@ var ChartHitTargetPath = /*#__PURE__*/ styled("path")({
 var _exp15 = () => ({ theme }) => theme.color.border.primary;
 var ChartGridLine = withTheme(/*#__PURE__*/ styled("line")({
 	name: "ChartGridLine",
-	class: "cblgiyf",
+	class: "c17guewt",
 	propsAsIs: true,
-	vars: { "cblgiyf-0": [_exp15()] }
+	vars: { "c17guewt-0": [_exp15()] }
 }));
 /** Vertical rule marking the hovered category on a line chart. */
 var _exp16 = () => ({ theme }) => theme.color.border.secondary;
 var ChartCursorLine = withTheme(/*#__PURE__*/ styled("line")({
 	name: "ChartCursorLine",
+	class: "cblgiyf",
+	propsAsIs: true,
+	vars: { "cblgiyf-0": [_exp16()] }
+}));
+/**
+* Full-height tint over the hovered category's band on a bar chart — the bar
+* counterpart to {@link ChartCursorLine}. A rule reads oddly threaded through
+* wide filled marks; a quiet band behind them marks the same position without
+* touching them. 8% of the foreground, so it survives both themes.
+*/
+var _exp17 = () => ({ theme }) => theme.color.opacity.bw8Alt;
+var ChartCursorBand = withTheme(/*#__PURE__*/ styled("rect")({
+	name: "ChartCursorBand",
 	class: "c1lr03cc",
 	propsAsIs: true,
-	vars: { "c1lr03cc-0": [_exp16()] }
+	vars: { "c1lr03cc-0": [_exp17()] }
 }));
 var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 	name: "ChartAxisLabelBox",
@@ -199,21 +201,21 @@ var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 * than teleporting, and it stays mounted while hidden so the fade can actually
 * run — unmounting on hide is why a fade-out never appears.
 */
-var _exp17 = () => ({ $x }) => `${$x}px`;
-var _exp18 = () => ({ $y }) => `${$y}px`;
-var _exp21 = () => ({ theme }) => theme.color.border.primary;
-var _exp22 = () => ({ theme }) => theme.color.background.tertiary;
-var _exp23 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
+var _exp18 = () => ({ $x }) => `${$x}px`;
+var _exp19 = () => ({ $y }) => `${$y}px`;
+var _exp22 = () => ({ theme }) => theme.color.border.primary;
+var _exp23 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp24 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
 var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartTooltipPositioner",
 	class: "c1ukq11d",
 	propsAsIs: false,
 	vars: {
-		"c1ukq11d-0": [_exp17()],
-		"c1ukq11d-1": [_exp18()],
-		"c1ukq11d-2": [_exp21()],
-		"c1ukq11d-3": [_exp22()],
-		"c1ukq11d-4": [_exp23()]
+		"c1ukq11d-0": [_exp18()],
+		"c1ukq11d-1": [_exp19()],
+		"c1ukq11d-2": [_exp22()],
+		"c1ukq11d-3": [_exp23()],
+		"c1ukq11d-4": [_exp24()]
 	}
 }));
 /**
@@ -250,47 +252,40 @@ var ChartTooltipValueCell = /*#__PURE__*/ styled("div")({
 * of the DLS. `pointer-events: none` keeps it from stealing hover from the arc
 * behind it.
 */
-var _exp27 = () => ({ $centerX }) => `${$centerX}px`;
-var _exp28 = () => ({ $centerY }) => `${$centerY}px`;
-var _exp30 = () => ({ $diameter }) => `${$diameter}px`;
+var _exp28 = () => ({ $centerX }) => `${$centerX}px`;
+var _exp29 = () => ({ $centerY }) => `${$centerY}px`;
+var _exp31 = () => ({ $diameter }) => `${$diameter}px`;
 var ChartCenterBox = /*#__PURE__*/ styled("div")({
 	name: "ChartCenterBox",
 	class: "cz6jod1",
 	propsAsIs: false,
 	vars: {
-		"cz6jod1-0": [_exp27()],
-		"cz6jod1-1": [_exp28()],
-		"cz6jod1-2": [_exp30()]
+		"cz6jod1-0": [_exp28()],
+		"cz6jod1-1": [_exp29()],
+		"cz6jod1-2": [_exp31()]
 	}
 });
 /**
 * Sits slightly above centre, over where the bars would be, so the axes stay
 * legible underneath.
 */
-var _exp31 = () => ({ theme }) => theme.color.border.primary;
-var _exp32 = () => ({ theme }) => theme.color.background.primary;
+var _exp32 = () => ({ theme }) => theme.color.border.primary;
+var _exp33 = () => ({ theme }) => theme.color.background.primary;
 var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartEmptyOverlay",
 	class: "c1de5mqk",
 	propsAsIs: false,
 	vars: {
-		"c1de5mqk-0": [_exp31()],
-		"c1de5mqk-1": [_exp32()]
+		"c1de5mqk-0": [_exp32()],
+		"c1de5mqk-1": [_exp33()]
 	}
 }));
 /**
 * Aligns the legend under the plot rather than the value-axis gutter.
-*
-* Also cancels the restore delay for its entries while the legend is dimming,
-* exactly as {@link ChartPlotGroup} does for the marks. The legend renders
-* *outside* the SVG, so the plot group's selector cannot reach it — without this
-* the marks dim instantly while their legend entries sit through the full
-* {@link CHART_RESTORE_DELAY_MS}, and the two visibly fall out of step.
 */
-var _exp33 = () => ({ $vertical }) => $vertical ? "column" : "row";
-var _exp34 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
-var _exp35 = () => ({ $vertical }) => $vertical ? "center" : "flex-start";
-var _exp36 = () => ({ $vertical }) => $vertical ? `8px` : `16px`;
+var _exp34 = () => ({ $vertical }) => $vertical ? "column" : "row";
+var _exp35 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
+var _exp36 = () => ({ $vertical }) => $vertical ? "center" : "flex-start";
 var _exp37 = () => ({ $vertical }) => $vertical ? "auto" : "0";
 var _exp38 = () => ({ $vertical }) => $vertical ? "0" : "100%";
 var _exp39 = () => ({ $vertical, $extent }) => $vertical && $extent ? `${$extent}px` : "auto";
@@ -301,15 +296,14 @@ var ChartLegendRow = /*#__PURE__*/ styled("div")({
 	class: "cjirv6a",
 	propsAsIs: false,
 	vars: {
-		"cjirv6a-0": [_exp33()],
-		"cjirv6a-1": [_exp34()],
-		"cjirv6a-2": [_exp35()],
-		"cjirv6a-3": [_exp36()],
-		"cjirv6a-4": [_exp37()],
-		"cjirv6a-5": [_exp38()],
-		"cjirv6a-6": [_exp39()],
-		"cjirv6a-7": [_exp40()],
-		"cjirv6a-8": [_exp41()]
+		"cjirv6a-0": [_exp34()],
+		"cjirv6a-1": [_exp35()],
+		"cjirv6a-2": [_exp36()],
+		"cjirv6a-3": [_exp37()],
+		"cjirv6a-4": [_exp38()],
+		"cjirv6a-5": [_exp39()],
+		"cjirv6a-6": [_exp40()],
+		"cjirv6a-7": [_exp41()]
 	}
 });
 /**
@@ -322,15 +316,13 @@ var ChartLegendRow = /*#__PURE__*/ styled("div")({
 */
 var _exp42 = () => ({ $vertical }) => $vertical ? "column" : "row";
 var _exp43 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
-var _exp44 = () => ({ $vertical }) => $vertical ? `8px` : `16px`;
 var ChartLegendMeasure = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendMeasure",
 	class: "c1armna5",
 	propsAsIs: false,
 	vars: {
 		"c1armna5-0": [_exp42()],
-		"c1armna5-1": [_exp43()],
-		"c1armna5-2": [_exp44()]
+		"c1armna5-1": [_exp43()]
 	}
 });
 /**
@@ -338,9 +330,7 @@ var ChartLegendMeasure = /*#__PURE__*/ styled("div")({
 * the body of an interactive tooltip.
 *
 * Scrolls past {@link CHART_LEGEND_OVERFLOW_MAX_HEIGHT} so a fifty-series chart
-* gets a bounded popover rather than one taller than the plot. Carries its own
-* `data-active` delay-cancel rule: the tooltip content mounts outside
-* {@link ChartLegendRow}, where the row's selector cannot reach it.
+* gets a bounded popover rather than one taller than the plot.
 */
 var ChartLegendOverflowList = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendOverflowList",
@@ -358,17 +348,28 @@ var ChartLegendOverflowList = /*#__PURE__*/ styled("div")({
 *
 * Shares the mark opacity ramp via `data-state`, so an entry recedes in step
 * with the series it names.
+*
+* The trailing padding is the inter-entry spacing — deliberately padding on
+* the entry rather than a gap on the container, so the hover surfaces of
+* adjacent entries touch and a sweep hands the isolation directly from one
+* series to the next. Trailing only, so the first entry stays flush with the
+* plot's left edge (or the column's top).
 */
+var _exp45 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
 var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
 	name: "ChartLegendItemButton",
 	class: "cutidpi",
-	propsAsIs: false
+	propsAsIs: false,
+	vars: { "cutidpi-0": [_exp45()] }
 });
-/** The same row, when the legend is inert — no button semantics to announce. */
+/** The same row, when the legend is inert — no button semantics to announce.
+* Carries the same trailing padding; see {@link ChartLegendItemButton}. */
+var _exp47 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
 var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendItemStatic",
 	class: "ccpczg",
-	propsAsIs: false
+	propsAsIs: false,
+	vars: { "ccpczg-0": [_exp47()] }
 });
 //#endregion
-export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendOverflowList, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };
+export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorBand, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendOverflowList, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };

package/dist/charts/DashboardProvider.d.ts

@@ -0,0 +1,57 @@
+import { type PropsWithChildren } from "react";
+/**
+ * The category one chart's pointer is currently over, broadcast to its
+ * siblings.
+ */
+export interface DashboardSyncEntry {
+    /** `useId` of the chart whose pointer 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.
+     */
+    categoryKey: string;
+}
+export interface DashboardContextValue {
+    activeEntry: DashboardSyncEntry | null;
+    setActive: (entry: DashboardSyncEntry) => void;
+    /** Clears only if the current entry belongs to `sourceId`. */
+    clearActive: (sourceId: string) => void;
+    /** Followers open their own tooltip at the synced category. */
+    sharedTooltip: boolean;
+}
+export declare const DashboardContext: import("react").Context<DashboardContextValue | 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 DashboardProviderProps {
+    /** Every synced chart opens its own tooltip at the shared category. @default false */
+    sharedTooltip?: boolean;
+}
+export declare const DashboardProvider: ({ sharedTooltip, children, }: PropsWithChildren<DashboardProviderProps>) => import("react").JSX.Element;
+export default DashboardProvider;

package/dist/charts/DashboardProvider.js

@@ -0,0 +1,30 @@
+import { createContext, useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/charts/DashboardProvider.tsx
+var DashboardContext = createContext(null);
+var DashboardProvider = ({ sharedTooltip = 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);
+	}, []);
+	const clearActive = useCallback((sourceId) => {
+		setActiveEntry((prev) => prev !== null && prev.sourceId === sourceId ? null : prev);
+	}, []);
+	const contextValue = useMemo(() => ({
+		activeEntry,
+		setActive,
+		clearActive,
+		sharedTooltip
+	}), [
+		activeEntry,
+		setActive,
+		clearActive,
+		sharedTooltip
+	]);
+	return /* @__PURE__ */ jsx(DashboardContext.Provider, {
+		value: contextValue,
+		children
+	});
+};
+//#endregion
+export { DashboardContext, DashboardProvider, DashboardProvider as default };

package/dist/charts/LineChart.js

@@ -68,7 +68,8 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 	const interaction = useChartInteraction({
 		categoryCount: geometry.columns.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty,
+		categoryKeys: geometry.categories,
+		isDisabled: noTooltip || isLoading || isEmpty,
 		isLoading
 	});
 	const activeColumn = interaction.activeIndex === null ? null : geometry.columns[interaction.activeIndex];