@galaxy-io/dls 1.4.10 → 1.4.12

package/dist/charts/PieChart.js

@@ -76,7 +76,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 	const interaction = useChartInteraction({
 		categoryCount: geometry.arcs.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty,
+		isDisabled: noTooltip || isLoading || isEmpty,
 		isLoading
 	});
 	const buildCategoryTooltip = useCallback((index) => {

package/dist/charts/ProgressBar.d.ts

@@ -1,3 +1,4 @@
+/** Fill color. Signals what the progress *means* — neutral, healthy, at risk. */
 export declare enum ProgressBarVariant {
     PRIMARY = "PRIMARY",
     SECONDARY = "SECONDARY",
@@ -6,12 +7,23 @@ export declare enum ProgressBarVariant {
     WARNING = "WARNING",
     ERROR = "ERROR"
 }
-interface ProgressBarProps {
+export interface ProgressBarProps {
+    /** Fill, 0–100. Values outside that range render empty rather than clamping. */
     percentage: number;
+    /** @default ProgressBarVariant.PRIMARY */
     variant?: ProgressBarVariant;
+    /** Bar thickness in px. @default 4 */
     height?: number;
+    /** Render 0% as truly empty instead of the default hairline sliver. */
     noSliverOnZero?: boolean;
+    /** Drop the pulse on the fill. */
     noAnimation?: boolean;
 }
+/**
+ * A horizontal completion bar.
+ *
+ * At 0% it leaves a 0.5px sliver so the track still reads as a bar rather than
+ * an empty box — set `noSliverOnZero` when exact emptiness matters.
+ */
 declare const ProgressBar: ({ percentage, variant, height, noSliverOnZero, noAnimation, }: ProgressBarProps) => import("react").JSX.Element;
 export default ProgressBar;

package/dist/charts/ProgressBar.js

@@ -5,6 +5,7 @@ import { match } from "ts-pattern";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/charts/ProgressBar.tsx
+/** Fill color. Signals what the progress *means* — neutral, healthy, at risk. */
 var ProgressBarVariant = /* @__PURE__ */ function(ProgressBarVariant) {
 	ProgressBarVariant["PRIMARY"] = "PRIMARY";
 	ProgressBarVariant["SECONDARY"] = "SECONDARY";
@@ -40,6 +41,12 @@ var ProgressBarFill = withTheme(/*#__PURE__*/ styled("div")({
 		"p1sc05jm-2": [_exp6()]
 	}
 }));
+/**
+* A horizontal completion bar.
+*
+* At 0% it leaves a 0.5px sliver so the track still reads as a bar rather than
+* an empty box — set `noSliverOnZero` when exact emptiness matters.
+*/
 var ProgressBar = ({ percentage, variant = "PRIMARY", height = 4, noSliverOnZero = false, noAnimation = false }) => {
 	return /* @__PURE__ */ jsx(StyledProgressBar, {
 		$height: height,

package/dist/charts/StatChart.d.ts

@@ -1,15 +1,24 @@
 import type { ReactNode } from "react";
+/** Surface treatment of the stat tile. */
 export declare enum StatChartVariant {
     BASE = "BASE",
     PRIMARY = "PRIMARY",
     SECONDARY = "SECONDARY",
     TERTIARY = "TERTIARY"
 }
-interface StatChartProps {
+export interface StatChartProps {
+    /** What the number means. Rendered small and secondary above the value. */
     label: string;
+    /** The headline figure. A node, so it can carry a unit or a trend indicator. */
     value: ReactNode;
+    /** @default StatChartVariant.PRIMARY */
     variant?: StatChartVariant;
+    /** Drop the hairline border — for tiles inside an already-bordered container. */
     noBorder?: boolean;
 }
+/**
+ * A single-number stat tile — the KPI card. Fixed 140px minimum width so a row
+ * of them lines up without you setting widths.
+ */
 declare const StatChart: ({ label, value, variant, noBorder, }: StatChartProps) => import("react").JSX.Element;
 export default StatChart;

package/dist/charts/StatChart.js

@@ -6,6 +6,7 @@ import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/StatChart.tsx
+/** Surface treatment of the stat tile. */
 var StatChartVariant = /* @__PURE__ */ function(StatChartVariant) {
 	StatChartVariant["BASE"] = "BASE";
 	StatChartVariant["PRIMARY"] = "PRIMARY";
@@ -24,6 +25,10 @@ var StatChartWrapper = withTheme(/*#__PURE__*/ styled("div")({
 		"slaxlp8-1": [_exp2()]
 	}
 }));
+/**
+* A single-number stat tile — the KPI card. Fixed 140px minimum width so a row
+* of them lines up without you setting widths.
+*/
 var StatChart = ({ label, value, variant = "PRIMARY", noBorder }) => {
 	return /* @__PURE__ */ jsx(StatChartWrapper, {
 		$variant: variant,

package/dist/charts/constants.d.ts

@@ -159,27 +159,13 @@ export declare const AGGREGATED_SLICE_KEY = "__other__";
 /** Margin around a pie, which needs no axis gutters. */
 export declare const PIE_CHART_MARGIN: ChartMargin;
 /**
- * Duration in ms for hover, dim and tooltip transitions.
+ * Duration in ms for the tooltip's fade and glide.
  *
- * Sits inside the 75–150ms band the DLS uses everywhere else. Hover feedback is
- * a response, not an animation — anything long enough to *watch* reads as the
- * chart being slow rather than the chart being smooth.
+ * Sits inside the 75–150ms band the DLS uses everywhere else. Only the tooltip
+ * transitions — mark and legend emphasis snaps, because emphasis is feedback
+ * and feedback that eases in reads as lag.
  */
 export declare const CHART_TRANSITION_MS = 100;
-/**
- * Delay in ms before marks return to full strength after the pointer leaves.
- *
- * Restoring immediately makes the whole chart flash while the pointer sweeps
- * across categories. Highlighting stays instant (no delay) — only the
- * *un*-highlight waits, so a sweep reads as one continuous gesture.
- *
- * Kept short because it does less work than it looks: while the pointer is
- * anywhere in the plot the chart is still engaged, so `ChartPlotGroup` and
- * `ChartLegendRow` zero this out and category-to-category sweeping is already
- * instant. All this actually covers is the moment the pointer leaves entirely,
- * where a long delay just feels like lag.
- */
-export declare const CHART_RESTORE_DELAY_MS = 200;
 /**
  * Opacity ramp for the mark states.
  *
@@ -195,6 +181,14 @@ export declare const CHART_RESTORE_DELAY_MS = 200;
  */
 export declare const CHART_MARK_OPACITY_ACTIVE = 1;
 export declare const CHART_MARK_OPACITY_MUTED = 0.1;
+/**
+ * The whisper tier, for `ChartMarkState.DIMMED`.
+ *
+ * Deliberately far gentler than MUTED: it is used where another affordance —
+ * BarChart's cursor band — already marks the hovered category, so the
+ * off-category marks only need to step back, not disappear.
+ */
+export declare const CHART_MARK_OPACITY_DIMMED = 0.4;
 /** Distance in px between the tooltip and its anchor. */
 export declare const CHART_TOOLTIP_OFFSET = 10;
 /** Minimum width of the tooltip, in px. */
@@ -204,15 +198,17 @@ export declare const CHART_TOOLTIP_MAX_WIDTH = 320;
 /** Gap in px between the plot box and a side-placed legend. */
 export declare const CHART_LEGEND_SIDE_GAP = 16;
 /**
- * Gap in px between entries in a horizontal legend.
+ * Spacing in px between entries in a horizontal legend.
  *
- * Also the number the fit computation adds between measured entries, so the
- * CSS and the arithmetic cannot disagree — which is what makes the collapse
- * exact rather than "usually right".
+ * Applied as each entry's *trailing padding*, not a flex gap on the row: a gap
+ * is dead space between hover targets, and sweeping across it drops the series
+ * isolation between every pair of entries. Because the padding lives inside
+ * the entries, measured entry sizes already include the spacing and the fit
+ * computation needs no separate gap term.
  */
 export declare const CHART_LEGEND_COLUMN_GAP = 16;
-/** Gap in px between entries in a vertical legend. Same contract as
- * {@link CHART_LEGEND_COLUMN_GAP}: shared by the CSS and the fit arithmetic. */
+/** Spacing in px between entries in a vertical legend. Same contract as
+ * {@link CHART_LEGEND_COLUMN_GAP}: trailing padding on the entry, no flex gap. */
 export declare const CHART_LEGEND_VERTICAL_GAP = 8;
 /**
  * Ceiling on the collapsed-legend popover's height, in px.

package/dist/charts/constants.js

@@ -169,28 +169,14 @@ var PIE_CHART_MARGIN = {
 	left: 8
 };
 /**
-* Duration in ms for hover, dim and tooltip transitions.
+* Duration in ms for the tooltip's fade and glide.
 *
-* Sits inside the 75–150ms band the DLS uses everywhere else. Hover feedback is
-* a response, not an animation — anything long enough to *watch* reads as the
-* chart being slow rather than the chart being smooth.
+* Sits inside the 75–150ms band the DLS uses everywhere else. Only the tooltip
+* transitions — mark and legend emphasis snaps, because emphasis is feedback
+* and feedback that eases in reads as lag.
 */
 var CHART_TRANSITION_MS = 100;
 /**
-* Delay in ms before marks return to full strength after the pointer leaves.
-*
-* Restoring immediately makes the whole chart flash while the pointer sweeps
-* across categories. Highlighting stays instant (no delay) — only the
-* *un*-highlight waits, so a sweep reads as one continuous gesture.
-*
-* Kept short because it does less work than it looks: while the pointer is
-* anywhere in the plot the chart is still engaged, so `ChartPlotGroup` and
-* `ChartLegendRow` zero this out and category-to-category sweeping is already
-* instant. All this actually covers is the moment the pointer leaves entirely,
-* where a long delay just feels like lag.
-*/
-var CHART_RESTORE_DELAY_MS = 200;
-/**
 * Opacity ramp for the mark states.
 *
 * The grammar is inherited from the reference charts and is the opposite of the
@@ -205,6 +191,14 @@ var CHART_RESTORE_DELAY_MS = 200;
 */
 var CHART_MARK_OPACITY_ACTIVE = 1;
 var CHART_MARK_OPACITY_MUTED = .1;
+/**
+* The whisper tier, for `ChartMarkState.DIMMED`.
+*
+* Deliberately far gentler than MUTED: it is used where another affordance —
+* BarChart's cursor band — already marks the hovered category, so the
+* off-category marks only need to step back, not disappear.
+*/
+var CHART_MARK_OPACITY_DIMMED = .4;
 /** Distance in px between the tooltip and its anchor. */
 var CHART_TOOLTIP_OFFSET = 10;
 /** Minimum width of the tooltip, in px. */
@@ -214,15 +208,17 @@ var CHART_TOOLTIP_MAX_WIDTH = 320;
 /** Gap in px between the plot box and a side-placed legend. */
 var CHART_LEGEND_SIDE_GAP = 16;
 /**
-* Gap in px between entries in a horizontal legend.
+* Spacing in px between entries in a horizontal legend.
 *
-* Also the number the fit computation adds between measured entries, so the
-* CSS and the arithmetic cannot disagree — which is what makes the collapse
-* exact rather than "usually right".
+* Applied as each entry's *trailing padding*, not a flex gap on the row: a gap
+* is dead space between hover targets, and sweeping across it drops the series
+* isolation between every pair of entries. Because the padding lives inside
+* the entries, measured entry sizes already include the spacing and the fit
+* computation needs no separate gap term.
 */
 var CHART_LEGEND_COLUMN_GAP = 16;
-/** Gap in px between entries in a vertical legend. Same contract as
-* {@link CHART_LEGEND_COLUMN_GAP}: shared by the CSS and the fit arithmetic. */
+/** Spacing in px between entries in a vertical legend. Same contract as
+* {@link CHART_LEGEND_COLUMN_GAP}: trailing padding on the entry, no flex gap. */
 var CHART_LEGEND_VERTICAL_GAP = 8;
 /**
 * Ceiling on the collapsed-legend popover's height, in px.
@@ -280,4 +276,4 @@ var CHART_PALETTE_ORDER = [
 	ChartPalette.RED
 ];
 //#endregion
-export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_COLUMN_GAP, CHART_LEGEND_OVERFLOW_MAX_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_LEGEND_VERTICAL_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_RESTORE_DELAY_MS, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };
+export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_COLUMN_GAP, CHART_LEGEND_OVERFLOW_MAX_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_LEGEND_VERTICAL_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_DIMMED, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };

package/dist/charts/types.d.ts

@@ -153,8 +153,16 @@ export declare enum ChartCategoryLabelMode {
 export declare enum ChartMarkState {
     /** Full strength — the default, and the hovered category. */
     ACTIVE = "active",
-    /** Softened, for categories other than the hovered one. */
-    MUTED = "muted"
+    /** Softened, for marks outside the engaged series or category. */
+    MUTED = "muted",
+    /**
+     * Barely softened — a whisper of {@link MUTED}.
+     *
+     * Used where another affordance already carries the emphasis and strong
+     * muting would be a second, louder voice: BarChart's category axis dims
+     * like this because the cursor band is the highlight.
+     */
+    DIMMED = "dimmed"
 }
 /** Which pair of a rectangle's corners carries the radius. */
 export declare enum BarCorners {

package/dist/charts/types.js

@@ -115,8 +115,16 @@ var ChartCategoryLabelMode = /* @__PURE__ */ function(ChartCategoryLabelMode) {
 var ChartMarkState = /* @__PURE__ */ function(ChartMarkState) {
 	/** Full strength — the default, and the hovered category. */
 	ChartMarkState["ACTIVE"] = "active";
-	/** Softened, for categories other than the hovered one. */
+	/** Softened, for marks outside the engaged series or category. */
 	ChartMarkState["MUTED"] = "muted";
+	/**
+	* Barely softened — a whisper of {@link MUTED}.
+	*
+	* Used where another affordance already carries the emphasis and strong
+	* muting would be a second, louder voice: BarChart's category axis dims
+	* like this because the cursor band is the highlight.
+	*/
+	ChartMarkState["DIMMED"] = "dimmed";
 	return ChartMarkState;
 }({});
 /** Which pair of a rectangle's corners carries the radius. */

package/dist/charts/useChartInteraction.d.ts

@@ -9,10 +9,14 @@ import { ChartMarkState } from "./types";
  * - **Series** — a legend key. Hovering (or focusing) a legend entry isolates
  *   that series.
  *
- * Both live here rather than one of them in the charts, so there is a single
- * `isEngaged` boolean. That matters more than it looks: `ChartPlotGroup` uses it
- * to cancel the mark restore delay, and a second hover source that didn't feed
- * it would sit through that delay before muting anything and feel broken.
+ * Plus one read-only source: inside a `DashboardProvider`, a chart that
+ * supplies {@link UseChartInteractionOptions.categoryKeys} follows the category
+ * hovered in a sibling chart, matched by raw label. Following emphasizes; it
+ * opens the tooltip only when the provider opts in via `sharedTooltip`, which
+ * is what {@link ChartInteraction.showTooltip} folds together. The series axis
+ * deliberately does not sync: series keys are chart-local vocabulary, and
+ * isolating "Delivered" in a chart that happens to share the name would
+ * correlate nothing.
  *
  * Deliberately no click layer. Clicking used to pin the hover so it survived
  * the pointer leaving, and it read as the chart getting stuck — the emphasis
@@ -23,12 +27,28 @@ interface UseChartInteractionOptions {
     categoryCount: number;
     /** Legend keys currently rendered. A key that disappears clears stale hover. */
     seriesKeys?: string[];
+    /**
+     * Raw category labels, index-aligned with {@link categoryCount}. Supplying
+     * them opts the chart into `DashboardProvider` crosshair sync; omit (as
+     * PieChart does) to stay out. Raw labels, never `labelFormatter` output —
+     * two charts formatting the same label differently must still match.
+     */
+    categoryKeys?: string[];
+    /**
+     * How marks outside the active category recede. Defaults to
+     * {@link ChartMarkState.MUTED}; BarChart passes
+     * {@link ChartMarkState.DIMMED} because its cursor band already carries the
+     * category highlight and strong muting on top of it would shout. Only the
+     * category axis softens — series (legend) isolation always mutes fully,
+     * since there the muting *is* the affordance.
+     */
+    categoryMuteState?: ChartMarkState;
     /** Suppress all interaction — used while loading and when the tooltip is off. */
-    disabled?: boolean;
+    isDisabled?: boolean;
     /**
      * Render every mark muted, whatever the two axes say.
      *
-     * Distinct from {@link disabled}, which suppresses *input*. Loading suppresses
+     * Distinct from {@link isDisabled}, which suppresses *input*. Loading suppresses
      * *emphasis*: there is nothing yet worth drawing attention to. Folded in here
      * rather than left to each mark, because the alternative is the same
      * `isLoading ? MUTED : getMarkState(…)` ternary hand-copied at every mark —
@@ -43,11 +63,18 @@ interface MarkStateArgs {
     seriesKey?: string;
 }
 export interface ChartInteraction {
-    /** The hovered category — what the tooltip follows. */
+    /**
+     * The active category — this chart's own hover, or failing that the category
+     * a `DashboardProvider` sibling is hovering, resolved to a local index.
+     */
     activeIndex: number | null;
+    /**
+     * True when this chart should present its tooltip for {@link activeIndex}:
+     * its own pointer hover always, a synced sibling's only when the
+     * `DashboardProvider` opts in via `sharedTooltip`.
+     */
+    showTooltip: boolean;
     hoveredSeriesKey: string | null;
-    /** True while *either* axis is engaged; cancels the mark restore delay. */
-    isEngaged: boolean;
     /**
      * Emphasis for one mark, composed from both axes.
      *
@@ -65,5 +92,5 @@ export interface ChartInteraction {
     onSeriesEnter: (seriesKey: string) => void;
     onSeriesLeave: () => void;
 }
-export declare function useChartInteraction({ categoryCount, seriesKeys, disabled, isLoading, }: UseChartInteractionOptions): ChartInteraction;
+export declare function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, categoryMuteState, isDisabled, isLoading, }: UseChartInteractionOptions): ChartInteraction;
 export {};

package/dist/charts/useChartInteraction.js

@@ -1,19 +1,74 @@
 import { ChartMarkState } from "./types.js";
-import { useCallback, useMemo, useState } from "react";
+import { DashboardContext } from "./DashboardProvider.js";
+import { useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
 //#region src/charts/useChartInteraction.ts
-function useChartInteraction({ categoryCount, seriesKeys, disabled = false, isLoading = false }) {
+function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, categoryMuteState = ChartMarkState.MUTED, isDisabled = false, isLoading = false }) {
 	const [hoveredIndex, setHoveredIndex] = useState(null);
 	const [hoveredSeriesKey, setHoveredSeriesKey] = useState(null);
+	const sync = useContext(DashboardContext);
+	const syncId = useId();
+	const canSync = sync !== null && categoryKeys !== void 0;
+	const setActive = sync?.setActive;
+	const clearActive = sync?.clearActive;
 	const safeHovered = hoveredIndex !== null && hoveredIndex < categoryCount ? hoveredIndex : null;
 	const safeHoveredSeries = hoveredSeriesKey !== null && (seriesKeys === void 0 || seriesKeys.includes(hoveredSeriesKey)) ? hoveredSeriesKey : null;
+	/**
+	* Publish this chart's hover to the sync group.
+	*
+	* An effect over the derived label rather than calls inside the pointer
+	* handlers, so three edge cases collapse into one place: data shrinking
+	* under a resting pointer (the `safeHovered` guard nulls the key → clears),
+	* the label at the resting index changing (republishes what is now under
+	* the pointer), and unmount while source (the cleanup effect below).
+	* Source-only writes still hold — `localKey` derives from `safeHovered`,
+	* which only this chart's own pointer sets.
+	*/
+	const localKey = canSync && safeHovered !== null ? categoryKeys[safeHovered] ?? null : null;
+	useEffect(() => {
+		if (!setActive || !clearActive) return;
+		if (localKey !== null) setActive({
+			sourceId: syncId,
+			categoryKey: localKey
+		});
+		else clearActive(syncId);
+	}, [
+		setActive,
+		clearActive,
+		syncId,
+		localKey
+	]);
+	useEffect(() => () => clearActive?.(syncId), [clearActive, syncId]);
+	/**
+	* The category a sibling is hovering, resolved to this chart's own index.
+	*
+	* `isLoading` blocks following — the marks are force-muted anyway, but
+	* without the guard LineChart would still draw its cursor and dots through
+	* a loading plot. An unmatched label resolves to no crosshair at all, which
+	* is how charts with partially overlapping categories degrade.
+	*/
+	const followedIndex = useMemo(() => {
+		if (!canSync || isLoading) return null;
+		const entry = sync.activeEntry;
+		if (entry === null || entry.sourceId === syncId) return null;
+		const index = categoryKeys.indexOf(entry.categoryKey);
+		return index === -1 ? null : index;
+	}, [
+		canSync,
+		isLoading,
+		sync?.activeEntry,
+		syncId,
+		categoryKeys
+	]);
+	const effectiveIndex = safeHovered ?? followedIndex;
+	const showTooltip = safeHovered !== null || followedIndex !== null && (sync?.sharedTooltip ?? false);
 	const onCategoryEnter = useCallback((categoryIndex) => {
-		if (disabled) return;
+		if (isDisabled) return;
 		setHoveredIndex(categoryIndex);
-	}, [disabled]);
+	}, [isDisabled]);
 	const onCategoryLeave = useCallback(() => {
-		if (disabled) return;
+		if (isDisabled) return;
 		setHoveredIndex(null);
-	}, [disabled]);
+	}, [isDisabled]);
 	const onSeriesEnter = useCallback((seriesKey) => {
 		setHoveredSeriesKey(seriesKey);
 	}, []);
@@ -22,23 +77,28 @@ function useChartInteraction({ categoryCount, seriesKeys, disabled = false, isLo
 	}, []);
 	const getMarkState = useCallback(({ categoryIndex, seriesKey }) => {
 		if (isLoading) return ChartMarkState.MUTED;
-		return categoryIndex !== void 0 && safeHovered !== null && categoryIndex !== safeHovered || seriesKey !== void 0 && safeHoveredSeries !== null && seriesKey !== safeHoveredSeries ? ChartMarkState.MUTED : ChartMarkState.ACTIVE;
+		const categoryMuted = categoryIndex !== void 0 && effectiveIndex !== null && categoryIndex !== effectiveIndex;
+		if (seriesKey !== void 0 && safeHoveredSeries !== null && seriesKey !== safeHoveredSeries) return ChartMarkState.MUTED;
+		if (categoryMuted) return categoryMuteState;
+		return ChartMarkState.ACTIVE;
 	}, [
 		isLoading,
-		safeHovered,
-		safeHoveredSeries
+		effectiveIndex,
+		safeHoveredSeries,
+		categoryMuteState
 	]);
 	return useMemo(() => ({
-		activeIndex: safeHovered,
+		activeIndex: effectiveIndex,
+		showTooltip,
 		hoveredSeriesKey: safeHoveredSeries,
-		isEngaged: safeHovered !== null || safeHoveredSeries !== null,
 		getMarkState,
 		onCategoryEnter,
 		onCategoryLeave,
 		onSeriesEnter,
 		onSeriesLeave
 	}), [
-		safeHovered,
+		effectiveIndex,
+		showTooltip,
 		safeHoveredSeries,
 		getMarkState,
 		onCategoryEnter,

package/dist/chips/Chip.d.ts

@@ -1,4 +1,5 @@
 import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+/** Chip color. Tints the background, border and label together. */
 export declare enum ChipVariant {
     PRIMARY = "PRIMARY",
     PRIMARY_ALT = "PRIMARY_ALT",
@@ -15,25 +16,43 @@ export declare enum ChipVariant {
     PURPLE = "PURPLE",
     TEAL = "TEAL"
 }
+/** Chip height. Also drives label and icon size. */
 export declare enum ChipSize {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
 export interface ChipProps {
+    /** Chip text. Required unless `icon` is set — with neither, nothing renders. */
     label?: string | number;
+    /** @default ChipVariant.SECONDARY */
     variant?: ChipVariant;
+    /** @default ChipSize.MEDIUM */
     size?: ChipSize;
+    /** Custom leading graphic. Takes precedence over `icon`. */
     svg?: React.ReactNode;
+    /** Phosphor icon *component* — pass `TagIcon`, not `<TagIcon />`. */
     icon?: PhosphorIcon;
+    /** Adds a trailing × button. Omit and the chip isn't dismissible. */
     onDismiss?: () => void;
+    /** Also flips the cursor to `pointer`. */
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** Fully rounded ends instead of the default small radius. */
     isPill?: boolean;
+    /** Drop the fill and keep only the border. */
     noBackground?: boolean;
+    /** Swap the label for a shimmer placeholder. */
     isLoading?: boolean;
+    /** Truncate a long label with an ellipsis. Needs a width-bounded parent. */
     isEllipsis?: boolean;
-    /** When true, shows active/selected styling with variant-colored border */
+    /** Selected styling — border picks up the variant color. */
     isActive?: boolean;
 }
+/**
+ * A compact tag for a value, filter, or status.
+ *
+ * Renders `null` when neither `label` nor `icon` is set. Adding `onDismiss`
+ * appends a × button; adding `onClick` makes the whole chip clickable.
+ */
 declare const Chip: ({ label, variant, size, svg, icon, onDismiss, onClick, isPill, noBackground, isLoading, isEllipsis, isActive, }: ChipProps) => import("react").JSX.Element | null;
 export default Chip;

package/dist/chips/Chip.js

@@ -12,6 +12,7 @@ import { match } from "ts-pattern";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@phosphor-icons/react";
 //#region src/chips/Chip.tsx
+/** Chip color. Tints the background, border and label together. */
 var ChipVariant = /* @__PURE__ */ function(ChipVariant) {
 	ChipVariant["PRIMARY"] = "PRIMARY";
 	ChipVariant["PRIMARY_ALT"] = "PRIMARY_ALT";
@@ -29,6 +30,7 @@ var ChipVariant = /* @__PURE__ */ function(ChipVariant) {
 	ChipVariant["TEAL"] = "TEAL";
 	return ChipVariant;
 }({});
+/** Chip height. Also drives label and icon size. */
 var ChipSize = /* @__PURE__ */ function(ChipSize) {
 	ChipSize["SMALL"] = "SMALL";
 	ChipSize["MEDIUM"] = "MEDIUM";
@@ -40,7 +42,7 @@ var _exp2 = () => ({ $size }) => {
 	return match($size).with("SMALL", () => "18px").with("MEDIUM", () => "20px").with("LARGE", () => "24px").exhaustive();
 };
 var _exp3 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "0 4px").with("MEDIUM", () => "0 6px").with("LARGE", () => "0 8px").exhaustive();
+	return match($size).with("SMALL", () => "0 5px").with("MEDIUM", () => "0 6px").with("LARGE", () => "0 8px").exhaustive();
 };
 var _exp4 = () => ({ theme, $variant, $noBackground }) => {
 	if ($noBackground) return "transparent";
@@ -111,6 +113,12 @@ var CHIP_SIZE_TO_TEXT_SIZE = {
 	["MEDIUM"]: TextSize.BODY_MD,
 	["LARGE"]: TextSize.BODY_LG
 };
+/**
+* A compact tag for a value, filter, or status.
+*
+* Renders `null` when neither `label` nor `icon` is set. Adding `onDismiss`
+* appends a × button; adding `onClick` makes the whole chip clickable.
+*/
 var Chip = ({ label, variant = "SECONDARY", size = "MEDIUM", svg, icon, onDismiss, onClick, isPill, noBackground, isLoading, isEllipsis, isActive }) => {
 	if (!label && !icon) return null;
 	if (isLoading) return /* @__PURE__ */ jsxs(StyledChip, {

package/dist/containers/FlexItem.d.ts

@@ -1,27 +1,24 @@
 import { type CSSProperties } from "react";
 import { AlignItems, JustifyContent } from "./FlexWrapper";
-interface FlexItemProps {
+export interface FlexItemProps {
+    /** @default "static" */
     position?: CSSProperties["position"];
-    /**
-     * flex-grow of this item within its parent flex container.
-     * Defaults to 0 (content-sized), matching the CSS default.
-     */
+    /** flex-grow within the parent flex container. @default 0 */
     grow?: number;
-    /**
-     * flex-shrink of this item within its parent flex container.
-     * Defaults to 1, matching the CSS default.
-     */
+    /** flex-shrink within the parent flex container. @default 1 */
     shrink?: number;
-    /**
-     * flex-basis of this item. Defaults to auto.
-     */
+    /** flex-basis. A number is px. @default "auto" */
     basis?: number | string;
     overflow?: CSSProperties["overflow"];
     whiteSpace?: CSSProperties["whiteSpace"];
     textOverflow?: CSSProperties["textOverflow"];
+    /** A number is px. */
     width?: number | string;
+    /** A number is px. */
     height?: number | string;
+    /** `width: 100%`. Takes precedence over `width`. */
     fillWidth?: boolean;
+    /** `height: 100%`. Takes precedence over `height`. */
     fillHeight?: boolean;
     /**
      * Defaults to "flex" (not "block"): a FlexItem is itself a flex container,
@@ -40,8 +37,13 @@ interface FlexItemProps {
     maxWidth?: number | string;
     maxHeight?: number | string;
     padding?: CSSProperties["padding"];
+    /** Also flips the cursor to `pointer`. */
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
+/**
+ * A single child of a `FlexWrapper`, for when one item needs its own grow,
+ * shrink, or sizing rules. Reach for it only when the wrapper can't express it.
+ */
 declare const FlexItem: import("react").ForwardRefExoticComponent<FlexItemProps & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/containers/FlexItem.js

@@ -55,6 +55,10 @@ var StyledFlexItem = /*#__PURE__*/ styled("div")({
 		"s1he36jx-17": [_exp16()]
 	}
 });
+/**
+* A single child of a `FlexWrapper`, for when one item needs its own grow,
+* shrink, or sizing rules. Reach for it only when the wrapper can't express it.
+*/
 var FlexItem = forwardRef(({ children, position, grow, shrink, basis, overflow, whiteSpace, textOverflow, width, height, fillWidth, fillHeight, display, alignItems, justifyContent, minWidth, minHeight, maxWidth, maxHeight, padding, onClick }, ref) => {
 	return /* @__PURE__ */ jsx(StyledFlexItem, {
 		ref,