@kind-ui/charts 0.1.1 → 0.3.0

package/dist/sankey-legend.js

@@ -1,9 +1,24 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOptionalChartInteraction } from "./chart-interaction.js";
 /** Node identity legend; solid links inherit source color, gradient links use both endpoints. */
-export function SankeyLegend({ config, children, ...props }) {
-    return (_jsx("ul", { "aria-label": "Chart legend", ...props, "data-kind-ui": "chart-legend", children: Object.entries(config).map(([key, item]) => {
+export function SankeyLegend({ config, interactionBinding, children, ...props }) {
+    const interaction = useOptionalChartInteraction();
+    if (interactionBinding &&
+        (!interaction || interaction.kind !== "node" || interaction.mode !== "focus"))
+        throw new Error("SankeyLegend Root interaction binding requires node focus");
+    return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: Delegates clicks from native buttons, which already implement Enter and Space.
+    _jsx("ul", { "aria-label": "Chart legend", ...props, "data-kind-ui": "chart-legend", onClick: (event) => {
+            props.onClick?.(event);
+            const button = event.target.closest("button[data-node-key]");
+            if (interactionBinding &&
+                button?.dataset.nodeKey !== undefined &&
+                event.currentTarget.contains(button))
+                interaction?.activate({ kind: "node", key: button.dataset.nodeKey }, "legend", event);
+        }, children: Object.entries(config).map(([key, item]) => {
             const marker = (_jsx("span", { "aria-hidden": "true", "data-kind-ui": "chart-indicator", style: { "--kind-ui-chart-indicator-color": item.color } }));
-            return (_jsx("li", { "data-kind-ui": "chart-legend-item", "data-node": key, children: _jsx("span", { children: children ? (children({ key, label: item.label, color: item.color, marker })) : (_jsxs(_Fragment, { children: [marker, item.label] })) }) }, key));
+            const content = children ? (children({ key, label: item.label, color: item.color, marker })) : (_jsxs(_Fragment, { children: [marker, item.label] }));
+            return (_jsx("li", { "data-kind-ui": "chart-legend-item", "data-node": key, children: interactionBinding && interaction?.eligible.includes(key) ? (_jsx("button", { type: "button", "aria-pressed": interaction.selected === key, "data-node-key": key, children: content })) : (_jsx("span", { children: content })) }, key));
         }) }));
 }

package/dist/sankey-node-label.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithRef } from "react";
+import type { SankeyNodeConfig } from "./sankey-colors.js";
+import { type SankeyFlowData } from "./sankey-data.js";
+import type { SankeyNodeProps } from "./sankey-marks.js";
+export type SankeyNodeLabelProps = Omit<ComponentPropsWithRef<"text">, "position"> & {
+    /** Geometry from the native node callback; identity comes from payload.id, never index. */
+    node: Pick<SankeyNodeProps, "x" | "y" | "width" | "height" | "payload">;
+    data: SankeyFlowData;
+    /** Explicit metadata; icons are looked up by payload.id. Labels still use data names. */
+    nodeConfig?: SankeyNodeConfig;
+    /** Square SVG viewport size and gap in chart units; inside icons share the node clip. */
+    iconSize?: number;
+    iconGap?: number;
+    position?: "inside" | "outside";
+    /** Outside defaults to left for sinks and right otherwise. Reserve chart margins for text. */
+    side?: "left" | "right";
+    showValues?: boolean;
+    valueFormatter?: (value: number) => string;
+    offset?: number;
+};
+/** Explicit sibling of SankeyNode; preserves native renderer and consumer text ownership. */
+export declare function SankeyNodeLabel({ node, data, nodeConfig, iconSize, iconGap, position, side, showValues, valueFormatter, offset, children, ...textProps }: SankeyNodeLabelProps): import("react").JSX.Element;

package/dist/sankey-node-label.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { prepareSankeyData } from "./sankey-data.js";
+/** Explicit sibling of SankeyNode; preserves native renderer and consumer text ownership. */
+export function SankeyNodeLabel({ node, data, nodeConfig, iconSize = 16, iconGap = 4, position = "outside", side, showValues = false, valueFormatter = String, offset = 8, children, ...textProps }) {
+    const clipId = `sankey-label-${useId().replace(/:/g, "")}`;
+    const validated = prepareSankeyData(data);
+    const index = validated.nodes.findIndex((item) => item.id === node.payload.id);
+    const item = validated.nodes[index];
+    if (!item)
+        throw new Error(`SankeyNodeLabel requires node id "${node.payload.id}" in data`);
+    if (![node.x, node.y, node.width, node.height, offset, iconSize, iconGap].every(Number.isFinite) ||
+        node.width < 0 ||
+        node.height < 0 ||
+        offset < 0 ||
+        iconSize < 0 ||
+        iconGap < 0)
+        throw new Error("SankeyNodeLabel requires finite geometry and nonnegative dimensions/offset/icon size/gap");
+    const incoming = validated.links.reduce((sum, link) => sum + (link.target === index ? link.value : 0), 0);
+    const outgoing = validated.links.reduce((sum, link) => sum + (link.source === index ? link.value : 0), 0);
+    const value = Math.max(incoming, outgoing);
+    const label = showValues ? `${item.name}: ${valueFormatter(value)}` : item.name;
+    const left = (side ?? (validated.links.some((link) => link.source === index) ? "right" : "left")) === "left";
+    const inside = position === "inside";
+    const icon = nodeConfig && Object.hasOwn(nodeConfig, item.id) ? nodeConfig[item.id]?.icon : undefined;
+    const hasIcon = icon !== undefined && icon !== null && typeof icon !== "boolean" && iconSize > 0;
+    const iconSpace = hasIcon ? iconSize + iconGap : 0;
+    const edge = left ? node.x - offset : node.x + node.width + offset;
+    // Inside uses a centered icon above centered text; outside puts the icon nearest the node.
+    const iconX = inside ? node.x + (node.width - iconSize) / 2 : left ? edge - iconSize : edge;
+    const centerY = node.y + node.height / 2;
+    return (_jsxs("g", { "data-kind-ui": "sankey-node-label", "data-node-id": item.id, children: [_jsx("title", { children: label }), inside && (_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: node.x, y: node.y, width: node.width, height: node.height }) }) })), _jsxs("g", { clipPath: inside ? `url(#${clipId})` : undefined, children: [hasIcon && (_jsx("svg", { "data-kind-ui": "sankey-node-icon", x: iconX, y: inside ? centerY - iconSize - iconGap / 2 : centerY - iconSize / 2, width: iconSize, height: iconSize, viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", pointerEvents: "none", overflow: "hidden", children: icon })), _jsx("text", { x: inside ? node.x + node.width / 2 : left ? edge - iconSpace : edge + iconSpace, y: inside && hasIcon ? centerY + iconGap / 2 + 6 : centerY, textAnchor: inside ? "middle" : left ? "end" : "start", dominantBaseline: "middle", pointerEvents: "none", fontSize: 12, ...textProps, children: children === undefined ? label : children })] })] }));
+}

package/dist/scatter-chart.d.ts

@@ -1,10 +1,12 @@
 import { type MotionValue } from "motion/react";
 import { type ComponentProps } from "react";
 import { ScatterChart as EngineScatterChart } from "recharts";
-import { type LineAnimation } from "./animation.js";
-export type ScatterAnimation = LineAnimation;
+import { type BaseAnimation } from "./animation.js";
+export type ScatterAnimation = BaseAnimation;
 export type ScatterChartProps = ComponentProps<typeof EngineScatterChart> & {
     animate?: boolean | ScatterAnimation | undefined;
+    loading?: boolean | undefined;
+    loadingLabel?: string | undefined;
 };
 export declare const ScatterMotion: import("react").Context<{
     reveal: boolean;
@@ -13,4 +15,4 @@ export declare const ScatterMotion: import("react").Context<{
     progress: MotionValue<number> | null;
 }>;
 /** Native numeric geometry and item selection, with optional entrance fade and shared tooltip Motion. */
-export declare function ScatterChart({ animate, children, ...props }: ScatterChartProps): import("react").JSX.Element;
+export declare function ScatterChart({ animate, loading, loadingLabel, children, ...props }: ScatterChartProps): import("react").JSX.Element;

package/dist/scatter-chart.js

@@ -5,6 +5,7 @@ import { createContext, useCallback, useLayoutEffect, useRef, useState, useSyncE
 import { ScatterChart as EngineScatterChart } from "recharts";
 import { MotionContext } from "./animation.js";
 import { LineChartFrame } from "./line-chart.js";
+import { CartesianLoadingDesign } from "./loading-cartesian-designs.js";
 export const ScatterMotion = createContext({
     reveal: false,
     options: {},
@@ -21,11 +22,20 @@ const snapshot = () => window.matchMedia(query).matches;
 const serverSnapshot = () => true;
 const defaultHover = { type: "spring", stiffness: 210, damping: 28, mass: 0.8 };
 /** Native numeric geometry and item selection, with optional entrance fade and shared tooltip Motion. */
-export function ScatterChart({ animate = false, children, ...props }) {
+export function ScatterChart({ animate = false, loading, loadingLabel, children, ...props }) {
     const reduced = useSyncExternalStore(subscribe, snapshot, serverSnapshot);
     const [interacted, setInteracted] = useState(false);
-    const enabled = animate !== false && !reduced;
-    const interact = useCallback(() => setInteracted(true), []);
+    const enabled = animate !== false && !reduced && !loading;
+    const interact = useCallback(() => {
+        if (!loading)
+            setInteracted(true);
+    }, [loading]);
+    useLayoutEffect(() => {
+        if (loading) {
+            setInteracted(false);
+            started.current = false;
+        }
+    }, [loading]);
     const finish = useCallback(() => {
         if (enabled)
             setInteracted(true);
@@ -60,5 +70,5 @@ export function ScatterChart({ animate = false, children, ...props }) {
         });
         return () => controls.stop();
     }, [reveal, duration, easing, progress, interact]);
-    return (_jsx(MotionContext, { value: { enabled, transition: options.hoverTransition ?? defaultHover }, children: _jsx(ScatterMotion, { value: { reveal, options, finish, progress }, children: _jsx("div", { style: { display: "contents" }, onFocusCapture: interact, onPointerDownCapture: interact, onPointerMoveCapture: interact, onKeyDownCapture: interact, children: _jsx(LineChartFrame, { chartProps: props, engine: EngineScatterChart, motionEnabled: enabled, interrupt: finish, children: children }) }) }) }));
+    return (_jsx(MotionContext, { value: { enabled, transition: options.hoverTransition ?? defaultHover }, children: _jsx(ScatterMotion, { value: { reveal, options, finish, progress }, children: _jsx("div", { style: { display: "contents" }, onFocusCapture: interact, onPointerDownCapture: interact, onPointerMoveCapture: interact, onKeyDownCapture: interact, children: _jsx(LineChartFrame, { loading: loading, loadingLabel: loadingLabel, loadingSkeleton: "scatter", loadingDesign: (seed) => _jsx(CartesianLoadingDesign, { family: "scatter", seed: seed }), loadingAnimation: options, chartProps: props, engine: EngineScatterChart, motionEnabled: enabled, interrupt: finish, children: children }) }) }) }));
 }

package/dist/scatter-material.js

@@ -35,5 +35,5 @@ export function ScatterMaterialSymbol({ material, ...props }) {
     const soft = Math.min(2, span * 0.1);
     const halo = Math.min(1.8, span * 0.065);
     const extent = span * 3 + strokeExtent;
-    return (_jsxs(_Fragment, { children: [_jsxs("defs", { "data-kind-ui": "scatter-material", "data-material": material, pointerEvents: "none", children: [material === "glow" && (_jsxs(_Fragment, { children: [_jsx("clipPath", { id: `${id}-geometry`, clipPathUnits: "userSpaceOnUse", children: _jsx(Symbols, { cx: props.cx, cy: props.cy, size: props.size ?? 64, ...(props.type !== undefined ? { type: props.type } : {}), ...(props.sizeType !== undefined ? { sizeType: props.sizeType } : {}), fill: "#000", stroke: "#000", strokeWidth: props.strokeWidth ?? 0 }) }), _jsx("filter", { id: `${id}-guard`, x: -1, y: -1, width: 3, height: 3, filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse", children: _jsx("feMorphology", { in: "SourceGraphic", operator: "dilate", radius: guard }) }), _jsxs("mask", { id: `${id}-outside`, maskUnits: "userSpaceOnUse", x: (props.cx ?? 0) - extent, y: (props.cy ?? 0) - extent, width: extent * 2, height: extent * 2, children: [_jsx("rect", { x: (props.cx ?? 0) - extent, y: (props.cy ?? 0) - extent, width: extent * 2, height: extent * 2, fill: "#fff" }), _jsx("g", { filter: `url(#${id}-guard)`, children: _jsx("rect", { x: (props.cx ?? 0) - extent, y: (props.cy ?? 0) - extent, width: extent * 2, height: extent * 2, fill: "#000", clipPath: `url(#${id}-geometry)` }) })] }), _jsxs("filter", { id: `${id}-halo`, x: -1, y: -1, width: 3, height: 3, filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "painted", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), _jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: halo, result: "halo" }), _jsx("feFlood", { floodOpacity: "var(--kind-ui-scatter-glow-opacity, 0.65)", result: "strength" }), _jsx("feComposite", { in: "halo", in2: "strength", operator: "in", result: "softHalo" }), _jsx("feComposite", { in: "softHalo", in2: "painted", operator: "out" })] })] })), _jsxs("filter", { id: id, x: -1, y: -1, width: 3, height: 3, filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), material === "paper" ? (_jsxs(_Fragment, { children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65 0.3", numOctaves: 1, seed: 7, result: "fiber" }), _jsx("feFlood", { floodColor: "var(--kind-ui-scatter-paper-fiber, #fff)", floodOpacity: "var(--kind-ui-scatter-paper-grain, 0.13)" }), _jsx("feComposite", { in2: "fiber", operator: "in", result: "texture" }), _jsx("feComposite", { in: "texture", in2: "SourceGraphic", operator: "atop", result: "paper" }), _jsx("feMorphology", { in: "footprint", operator: "erode", radius: rim, result: "inside" }), _jsx("feComposite", { in: "footprint", in2: "inside", operator: "out", result: "edge" }), _jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.13 0.22", numOctaves: 1, seed: 11, result: "pencil" }), _jsx("feColorMatrix", { in: "pencil", type: "luminanceToAlpha", result: "pencilMask" }), _jsx("feComponentTransfer", { in: "pencilMask", result: "sketch", children: _jsx("feFuncA", { type: "linear", slope: 2, intercept: -0.2 }) }), _jsx("feComposite", { in: "edge", in2: "sketch", operator: "in", result: "sketchEdge" }), _jsx("feColorMatrix", { in: "SourceGraphic", type: "matrix", values: "0.25 0 0 0 0 0 0.25 0 0 0 0 0 0.25 0 0 0 0 0 1 0", result: "ink" }), _jsx("feComposite", { in: "ink", in2: "sketchEdge", operator: "in", result: "contour" }), _jsx("feComposite", { in: "contour", in2: "paper", operator: "atop" })] })) : material === "clay" ? (_jsxs(_Fragment, { children: [_jsx("feOffset", { in: "footprint", dx: relief, dy: relief, result: "lower" }), _jsx("feComposite", { in: "footprint", in2: "lower", operator: "out", result: "top" }), _jsx("feGaussianBlur", { in: "top", stdDeviation: soft, result: "softTop" }), _jsx("feFlood", { floodColor: "var(--kind-ui-scatter-clay-light, #fff)", floodOpacity: 0.62 }), _jsx("feComposite", { in2: "softTop", operator: "in", result: "light" }), _jsx("feOffset", { in: "footprint", dx: -relief, dy: -relief, result: "upper" }), _jsx("feComposite", { in: "footprint", in2: "upper", operator: "out", result: "bottom" }), _jsx("feGaussianBlur", { in: "bottom", stdDeviation: soft, result: "softBottom" }), _jsx("feFlood", { floodColor: "var(--kind-ui-scatter-clay-shade, #17212b)", floodOpacity: 0.38 }), _jsx("feComposite", { in2: "softBottom", operator: "in", result: "shade" }), _jsx("feComposite", { in: "shade", in2: "SourceGraphic", operator: "atop", result: "shaded" }), _jsx("feComposite", { in: "light", in2: "shaded", operator: "atop", result: "body" }), _jsx("feTurbulence", { type: "fractalNoise", baseFrequency: 0.7, numOctaves: 1, seed: 17, result: "grain" }), _jsx("feFlood", { floodColor: "#fff", floodOpacity: 0.035 }), _jsx("feComposite", { in2: "grain", operator: "in", result: "texture" }), _jsx("feComposite", { in: "texture", in2: "body", operator: "atop" })] })) : (_jsxs(_Fragment, { children: [_jsx("feMorphology", { in: "footprint", operator: "erode", radius: rim, result: "inside" }), _jsx("feComposite", { in: "footprint", in2: "inside", operator: "out", result: "edge" }), _jsx("feFlood", { floodColor: "var(--kind-ui-scatter-glow-light, #fff)", floodOpacity: 0.55 }), _jsx("feComposite", { in2: "edge", operator: "in", result: "light" }), _jsx("feComposite", { in: "light", in2: "SourceGraphic", operator: "atop", result: "body" }), _jsx("feFlood", { floodColor: "var(--kind-ui-scatter-glow-light, #fff)", floodOpacity: 0.12, result: "bloom" }), _jsx("feComposite", { in: "bloom", in2: "body", operator: "atop", result: "luminousBody" })] }))] })] }), material === "glow" ? (_jsxs(_Fragment, { children: [_jsx("use", { "data-kind-ui": "scatter-light", href: `#${id}-body`, filter: `url(#${id}-halo)`, mask: `url(#${id}-outside)`, pointerEvents: "none", "aria-hidden": "true", focusable: "false", tabIndex: -1 }), _jsx("g", { id: `${id}-body`, children: _jsx(Symbols, { ...props, filter: `url(#${id})` }) })] })) : (_jsx(Symbols, { ...props, filter: `url(#${id})` }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("defs", { "data-kind-ui": "scatter-material", "data-material": material, pointerEvents: "none", children: [material === "glow" && (_jsxs(_Fragment, { children: [_jsx("clipPath", { id: `${id}-geometry`, clipPathUnits: "userSpaceOnUse", children: _jsx(Symbols, { cx: props.cx, cy: props.cy, size: props.size ?? 64, ...(props.type !== undefined ? { type: props.type } : {}), ...(props.sizeType !== undefined ? { sizeType: props.sizeType } : {}), fill: "#000", stroke: "#000", strokeWidth: props.strokeWidth ?? 0 }) }), _jsx("filter", { id: `${id}-guard`, x: -1, y: -1, width: 3, height: 3, filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse", children: _jsx("feMorphology", { in: "SourceGraphic", operator: "dilate", radius: guard }) }), _jsxs("mask", { id: `${id}-outside`, maskUnits: "userSpaceOnUse", x: (props.cx ?? 0) - extent, y: (props.cy ?? 0) - extent, width: extent * 2, height: extent * 2, children: [_jsx("rect", { x: (props.cx ?? 0) - extent, y: (props.cy ?? 0) - extent, width: extent * 2, height: extent * 2, fill: "#fff" }), _jsx("g", { filter: `url(#${id}-guard)`, children: _jsx("rect", { x: (props.cx ?? 0) - extent, y: (props.cy ?? 0) - extent, width: extent * 2, height: extent * 2, fill: "#000", clipPath: `url(#${id}-geometry)` }) })] }), _jsxs("filter", { id: `${id}-halo`, x: -1, y: -1, width: 3, height: 3, filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "painted", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), _jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: halo, result: "halo" }), _jsx("feFlood", { floodOpacity: "var(--kind-ui-scatter-glow-opacity, 0.65)", result: "strength" }), _jsx("feComposite", { in: "halo", in2: "strength", operator: "in", result: "softHalo" }), _jsx("feComposite", { in: "softHalo", in2: "painted", operator: "out" })] })] })), _jsxs("filter", { id: id, x: -1, y: -1, width: 3, height: 3, filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), material === "clay" ? (_jsxs(_Fragment, { children: [_jsx("feOffset", { in: "footprint", dx: relief, dy: relief, result: "lower" }), _jsx("feComposite", { in: "footprint", in2: "lower", operator: "out", result: "top" }), _jsx("feGaussianBlur", { in: "top", stdDeviation: soft, result: "softTop" }), _jsx("feFlood", { floodColor: "var(--kind-ui-scatter-clay-light, #fff)", floodOpacity: 0.62 }), _jsx("feComposite", { in2: "softTop", operator: "in", result: "light" }), _jsx("feOffset", { in: "footprint", dx: -relief, dy: -relief, result: "upper" }), _jsx("feComposite", { in: "footprint", in2: "upper", operator: "out", result: "bottom" }), _jsx("feGaussianBlur", { in: "bottom", stdDeviation: soft, result: "softBottom" }), _jsx("feFlood", { floodColor: "var(--kind-ui-scatter-clay-shade, #17212b)", floodOpacity: 0.38 }), _jsx("feComposite", { in2: "softBottom", operator: "in", result: "shade" }), _jsx("feComposite", { in: "shade", in2: "SourceGraphic", operator: "atop", result: "shaded" }), _jsx("feComposite", { in: "light", in2: "shaded", operator: "atop", result: "body" }), _jsx("feTurbulence", { type: "fractalNoise", baseFrequency: 0.7, numOctaves: 1, seed: 17, result: "grain" }), _jsx("feFlood", { floodColor: "#fff", floodOpacity: 0.035 }), _jsx("feComposite", { in2: "grain", operator: "in", result: "texture" }), _jsx("feComposite", { in: "texture", in2: "body", operator: "atop" })] })) : (_jsxs(_Fragment, { children: [_jsx("feMorphology", { in: "footprint", operator: "erode", radius: rim, result: "inside" }), _jsx("feComposite", { in: "footprint", in2: "inside", operator: "out", result: "edge" }), _jsx("feFlood", { floodColor: "var(--kind-ui-scatter-glow-light, #fff)", floodOpacity: 0.55 }), _jsx("feComposite", { in2: "edge", operator: "in", result: "light" }), _jsx("feComposite", { in: "light", in2: "SourceGraphic", operator: "atop", result: "body" }), _jsx("feFlood", { floodColor: "var(--kind-ui-scatter-glow-light, #fff)", floodOpacity: 0.12, result: "bloom" }), _jsx("feComposite", { in: "bloom", in2: "body", operator: "atop", result: "luminousBody" })] }))] })] }), material === "glow" ? (_jsxs(_Fragment, { children: [_jsx("use", { "data-kind-ui": "scatter-light", href: `#${id}-body`, filter: `url(#${id}-halo)`, mask: `url(#${id}-outside)`, pointerEvents: "none", "aria-hidden": "true", focusable: "false", tabIndex: -1 }), _jsx("g", { id: `${id}-body`, children: _jsx(Symbols, { ...props, filter: `url(#${id})` }) })] })) : (_jsx(Symbols, { ...props, filter: `url(#${id})` }))] }));
 }

package/dist/scatter-series.js

@@ -7,6 +7,7 @@ import { useChart } from "./chart-context.js";
 import { useLineInteraction } from "./line-chart.js";
 import { ScatterMotion } from "./scatter-chart.js";
 import { ScatterMaterialSymbol } from "./scatter-material.js";
+import { SeriesInteractionLayer, useSeriesInteraction } from "./series-interaction.js";
 // Delay by native screen X, rather than sorting or changing quantitative data.
 function EntranceSymbol({ material, type, ...props }) {
     const { progress } = use(ScatterMotion);
@@ -20,7 +21,7 @@ function EntranceSymbol({ material, type, ...props }) {
 }
 /** Native Scatter owns marks, Cells, labels, handlers, axis mapping and point payloads. */
 export function ScatterSeries({ seriesKey, hide, fill, material = "plain", ...props }) {
-    const { config, visibleSeries } = useChart();
+    const { config, paints, visibleSeries } = useChart();
     const { registerSeries, invalidate } = useLineInteraction();
     const shapes = useMemo(() => {
         function finish(option) {
@@ -69,6 +70,7 @@ export function ScatterSeries({ seriesKey, hide, fill, material = "plain", ...pr
     }, [id, key, registerSeries]);
     if (key === undefined && visibleSeries !== undefined)
         throw new Error("ScatterSeries requires seriesKey for controlled non-string dataKey");
-    const color = fill ?? (key && Object.hasOwn(config, key) ? `var(--color-${key})` : undefined);
-    return (_jsx(ZIndexLayer, { zIndex: props.zIndex ?? DefaultZIndexes.scatter, children: _jsx("g", { "data-kind-ui": "scatter-fade", children: _jsx(Scatter, { ...props, ...(shapes.shape !== undefined ? { shape: shapes.shape } : {}), ...(shapes.activeShape !== undefined ? { activeShape: shapes.activeShape } : {}), id: id, hide: hidden, ...(color !== undefined ? { fill: color } : {}), zIndex: 0, isAnimationActive: false }) }) }));
+    const interaction = useSeriesInteraction(key, hidden, hide === true, props.data, props.onClick);
+    const color = fill ?? (key && Object.hasOwn(config, key) ? paints[key] : undefined);
+    return (_jsx(ZIndexLayer, { zIndex: props.zIndex ?? DefaultZIndexes.scatter, children: _jsx(SeriesInteractionLayer, { seriesKey: key, hidden: hidden, children: _jsx("g", { "data-kind-ui": "scatter-fade", children: _jsx(Scatter, { ...props, ...(interaction.onClick !== undefined ? { onClick: interaction.onClick } : {}), ...(shapes.shape !== undefined ? { shape: shapes.shape } : {}), ...(shapes.activeShape !== undefined ? { activeShape: shapes.activeShape } : {}), id: id, hide: hidden, ...(color !== undefined ? { fill: color } : {}), zIndex: 0, isAnimationActive: false }) }) }) }));
 }

package/dist/series-color.d.ts

@@ -0,0 +1,10 @@
+import type { SeriesColor } from "./types.js";
+export type ColorStops = {
+    offsets: number[];
+    colors: string[];
+};
+/** Preserve each theme's evenly spaced stops, even with unequal stop counts. */
+export declare function resolveSeriesColor(color: SeriesColor, key: string): ColorStops;
+export declare function colorResourceId(id: string, key: string): string;
+/** Disjoint from legacy --color-<key>, whose valid keys include numeric suffixes. */
+export declare function colorStopToken(key: string, index: number | "gradient"): string;

package/dist/series-color.js

@@ -0,0 +1,48 @@
+function stops(value, path) {
+    const values = typeof value === "string" ? [value] : value;
+    if (!Array.isArray(values) || values.length === 0)
+        throw new Error(`Series color ${path} requires a nonempty string or nonempty array of color strings`);
+    for (let index = 0; index < values.length; index++) {
+        if (typeof values[index] !== "string" || values[index].trim() === "")
+            throw new Error(`Series color ${path}${Array.isArray(value) ? `[${index}]` : ""} requires a nonempty color string`);
+    }
+    return values;
+}
+function at(colors, offset) {
+    if (colors.length === 1)
+        return colors[0];
+    const position = offset * (colors.length - 1);
+    const index = Math.floor(position);
+    const fraction = position - index;
+    if (fraction < 1e-10)
+        return colors[index];
+    return `color-mix(in srgb, ${colors[index]} ${(1 - fraction) * 100}%, ${colors[index + 1]} ${fraction * 100}%)`;
+}
+/** Preserve each theme's evenly spaced stops, even with unequal stop counts. */
+export function resolveSeriesColor(color, key) {
+    const path = `config[${JSON.stringify(key)}].color`;
+    const themed = color !== null && typeof color === "object" && !Array.isArray(color);
+    if (themed &&
+        (!Object.hasOwn(color, "light") ||
+            !Object.hasOwn(color, "dark") ||
+            Object.keys(color).some((key) => key !== "light" && key !== "dark")))
+        throw new Error(`Series color ${path} requires both light and dark definitions and no other fields`);
+    const variants = color;
+    const light = stops(themed ? variants.light : color, themed ? `${path}.light` : path);
+    const dark = stops(themed ? variants.dark : color, themed ? `${path}.dark` : path);
+    const offsets = [
+        ...new Set([light, dark].flatMap((values) => values.length === 1 ? [0] : values.map((_, index) => index / (values.length - 1)))),
+    ].sort((a, b) => a - b);
+    return {
+        offsets,
+        colors: offsets.map((offset) => themed ? `light-dark(${at(light, offset)}, ${at(dark, offset)})` : at(light, offset)),
+    };
+}
+export function colorResourceId(id, key) {
+    return `kind-ui-color-${Array.from(`${id}:${key}`, (char) => char.codePointAt(0)?.toString(16)).join("-")}`;
+}
+/** Disjoint from legacy --color-<key>, whose valid keys include numeric suffixes. */
+export function colorStopToken(key, index) {
+    const encoded = Array.from(key, (char) => char.codePointAt(0)?.toString(16)).join("-");
+    return `--kind-ui-series-${encoded}-${index}`;
+}

package/dist/series-interaction.d.ts

@@ -0,0 +1,12 @@
+import { type KeyboardEventHandler, type ReactNode } from "react";
+/** Native handlers retain their original data/index/event tuple and run first. */
+export declare function useSeriesInteraction<Args extends unknown[]>(key: string | undefined, hidden: boolean, nativeHidden: boolean | undefined, seriesData: readonly unknown[] | undefined, handler: ((...args: Args) => void) | undefined): {
+    onClick: ((...args: Args) => void) | undefined;
+};
+/** One keyboard target per logical series, within its native ZIndex portal. */
+export declare function SeriesInteractionLayer({ seriesKey, hidden, children, onKeyDown, }: {
+    seriesKey: string | undefined;
+    hidden: boolean;
+    onKeyDown?: KeyboardEventHandler<SVGElement> | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/series-interaction.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, } from "react";
+import { useChart } from "./chart-context.js";
+import { useChartInteraction, useInteractionAvailability, useInteractionRegistration, } from "./chart-interaction.js";
+import { useEmphasis } from "./emphasis.js";
+import { useChartKeyboard, useLineInteraction } from "./line-chart.js";
+/** Native handlers retain their original data/index/event tuple and run first. */
+export function useSeriesInteraction(key, hidden, nativeHidden = false, seriesData, handler) {
+    const interaction = useChartInteraction();
+    const { data } = useLineInteraction();
+    const { visibleSeries } = useChart();
+    const rootHidden = key !== undefined && visibleSeries !== undefined && !visibleSeries.includes(key);
+    // Some consumers mirror Root visibility into native hide. Their hidden IDs stay restorable.
+    useInteractionAvailability(interaction.kind === "series" ? key : undefined, nativeHidden && !rootHidden);
+    useInteractionRegistration(interaction.kind === "series" && key !== undefined && (seriesData ?? data)?.length ? [key] : []);
+    const interactive = key !== undefined &&
+        !hidden &&
+        interaction.kind === "series" &&
+        interaction.interactive &&
+        interaction.markActivation &&
+        interaction.eligible.includes(key);
+    const latest = useRef({ handler, interaction, interactive, key });
+    useLayoutEffect(() => {
+        latest.current = { handler, interaction, interactive, key };
+    });
+    const onClick = useCallback((...args) => {
+        latest.current.handler?.(...args);
+        const current = latest.current;
+        const event = args[args.length - 1];
+        if (current.interactive && current.key !== undefined && event?.button === 0)
+            current.interaction.activate({ kind: "series", key: current.key }, "mark", event);
+    }, []);
+    // Native animation IDs include handler identity even when native animation is disabled.
+    return { onClick: interactive ? onClick : handler };
+}
+/** One keyboard target per logical series, within its native ZIndex portal. */
+export function SeriesInteractionLayer({ seriesKey, hidden, children, onKeyDown, }) {
+    const interaction = useChartInteraction();
+    const { config } = useChart();
+    const enabled = seriesKey !== undefined && !hidden && interaction.kind === "series" && interaction.configured;
+    const emphasis = useEmphasis({ kind: "series", key: seriesKey ?? "", scope: "series", seriesKey }, enabled);
+    const keyboard = useChartKeyboard();
+    const interactive = enabled &&
+        interaction.interactive &&
+        interaction.markActivation &&
+        interaction.eligible.includes(seriesKey);
+    // Native axis inspection includes all series at this category, so keep their paint readable.
+    const nativeInspection = keyboard &&
+        typeof document !== "undefined" &&
+        document.activeElement?.getAttribute("role") === "application";
+    const factor = nativeInspection && emphasis.active === null ? 1 : emphasis.factor;
+    return (
+    // biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/useAriaPropsSupportedByRole: Role, pressed state and handlers are enabled together for opted-in SVG controls.
+    _jsx("g", { "data-kind-ui": "series-interaction", "data-series": seriesKey, role: interactive ? "button" : undefined, tabIndex: interactive ? 0 : undefined, "aria-label": interactive
+            ? `${interaction.mode === "focus" ? "Highlight" : "Toggle"} ${config[seriesKey]?.label ?? seriesKey}`
+            : undefined, "aria-pressed": interactive
+            ? interaction.mode === "focus"
+                ? interaction.selected === seriesKey
+                : (interaction.visible?.includes(seriesKey) ?? true)
+            : undefined, onPointerEnter: (event) => {
+            if (event.pointerType !== "touch")
+                emphasis.enter("pointer");
+        }, onPointerMove: (event) => {
+            if (event.pointerType !== "touch")
+                emphasis.enter("pointer");
+        }, onPointerLeave: () => emphasis.leave("pointer"), onPointerCancel: () => emphasis.leave("pointer"), onFocus: (event) => {
+            if (event.target.matches(":focus-visible"))
+                emphasis.enter("keyboard");
+        }, onBlur: () => emphasis.leave("keyboard"), onKeyDown: (event) => {
+            if (event.target === event.currentTarget)
+                onKeyDown?.(event);
+            if (interactive &&
+                event.target === event.currentTarget &&
+                !event.defaultPrevented &&
+                (event.key === "Enter" || event.key === " ")) {
+                if (!event.repeat)
+                    interaction.activate({ kind: "series", key: seriesKey }, "mark", event);
+                event.preventDefault();
+            }
+        }, children: _jsx("g", { "data-kind-ui": "series-interaction-paint", style: { opacity: factor }, children: children }) }));
+}

package/dist/series-label.d.ts

@@ -0,0 +1,7 @@
+import type { SeriesConfig } from "./types.js";
+/** Presentation only: never rewrite metadata identity, paint or consumer data. */
+export declare function resolveSeriesLabel(key: string, label?: string): string;
+export type ResolvedSeriesConfig = Readonly<Record<string, SeriesConfig[string] & {
+    label: string;
+}>>;
+export declare function resolveSeriesConfig(config: SeriesConfig): ResolvedSeriesConfig;

package/dist/series-label.js

@@ -0,0 +1,18 @@
+/** Presentation only: never rewrite metadata identity, paint or consumer data. */
+export function resolveSeriesLabel(key, label) {
+    if (label !== undefined)
+        return label;
+    const words = key
+        .replace(/([A-Z])([A-Z][a-z])/g, "$1 $2")
+        .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+        .replace(/[_-]+/g, " ")
+        .trim()
+        .toLowerCase();
+    return words.charAt(0).toUpperCase() + words.slice(1);
+}
+export function resolveSeriesConfig(config) {
+    return Object.fromEntries(Object.entries(config).map(([key, item]) => [
+        key,
+        { ...item, label: resolveSeriesLabel(key, item.label) },
+    ]));
+}

package/dist/series-paint.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+/** Each native SVG owns its viewport-relative resources; metadata stays Root-owned. */
+export declare function SeriesPaintBoundary({ children }: {
+    children: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+export declare function SeriesColorDefinitions({ viewport }: {
+    viewport?: boolean;
+}): import("react").JSX.Element | null;

package/dist/series-paint.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use, useId, useMemo } from "react";
+import { ChartContext } from "./chart-context.js";
+import { colorResourceId, colorStopToken } from "./series-color.js";
+/** Each native SVG owns its viewport-relative resources; metadata stays Root-owned. */
+export function SeriesPaintBoundary({ children }) {
+    const chart = use(ChartContext);
+    const colorId = useId();
+    const colorStops = chart?.colorStops;
+    const paints = useMemo(() => Object.fromEntries(Object.entries(colorStops ?? {}).map(([key, stops]) => [
+        key,
+        stops.colors.length > 1
+            ? `url(#${colorResourceId(colorId, key)})`
+            : `var(--color-${key})`,
+    ])), [colorStops, colorId]);
+    const value = useMemo(() => (chart ? { ...chart, colorId, paints } : null), [chart, colorId, paints]);
+    return value ? _jsx(ChartContext, { value: value, children: children }) : children;
+}
+export function SeriesColorDefinitions({ viewport = false }) {
+    const chart = use(ChartContext);
+    if (!chart)
+        return null;
+    return (_jsx("defs", { "data-kind-ui": "series-color-definitions", children: Object.entries(chart.colorStops)
+            .filter(([, stops]) => stops.colors.length > 1)
+            .map(([key, stops]) => (_jsx("linearGradient", { id: colorResourceId(chart.colorId, key), x1: "0", y1: "0", x2: viewport ? "100%" : "1", y2: "0", gradientUnits: viewport ? "userSpaceOnUse" : "objectBoundingBox", children: stops.offsets.map((offset, index) => (_jsx("stop", { offset: offset, stopColor: `var(${colorStopToken(key, index)})` }, offset))) }, key))) }));
+}

package/dist/styles.css

@@ -38,6 +38,7 @@
   }
 
   :where([data-kind-ui="chart"]) {
+    --kind-ui-styles-loaded: 1;
     width: 100%;
     min-width: 0;
   }
@@ -86,7 +87,10 @@
     flex-shrink: 0;
     width: 8px;
     height: 8px;
-    background: var(--kind-ui-chart-indicator-color, currentColor);
+    background: var(
+      --kind-ui-chart-indicator-background,
+      var(--kind-ui-chart-indicator-color, currentColor)
+    );
   }
 
   :where(
@@ -414,11 +418,6 @@
 /* Heatmap materials are background paint, confined to an 8% perimeter.
    The quantitative center and native geometry are untouched. */
 @layer kind-ui {
-  [data-kind-ui="heatmap-grid"] td[data-material="paper"] {
-    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22grain%22%20width%3D%226%22%20height%3D%227%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M1%201h1M4%204h1M2%206h1%22%20stroke%3D%22%23705c48%22%20stroke-opacity%3D%22.32%22%20stroke-width%3D%22.6%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%200H100V100H0Z%20M8%208V92H92V8Z%22%20fill%3D%22%23eadac0%22%20fill-opacity%3D%22.7%22%20fill-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22M0%200H100V100H0Z%20M8%208V92H92V8Z%22%20fill%3D%22url%28%23grain%29%22%20fill-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22M3%205L26%203L50%205L75%203L97%205L95%2030L97%2055L95%2078L97%2096L72%2095L48%2097L25%2095L3%2097L5%2074L3%2049L5%2024Z%22%20fill%3D%22none%22%20stroke%3D%22%235c4938%22%20stroke-opacity%3D%22.65%22%20stroke-width%3D%22.8%22%2F%3E%3Cpath%20d%3D%22M5%203L30%205L58%203L83%205L95%203M3%207L5%2035L3%2062L5%2090%22%20fill%3D%22none%22%20stroke%3D%22%23fffaf0%22%20stroke-opacity%3D%22.75%22%20stroke-width%3D%22.7%22%2F%3E%3C%2Fsvg%3E");
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-  }
   [data-kind-ui="heatmap-grid"] td[data-material="clay"] {
     background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22top%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22bottom%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23172033%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23172033%22%20stop-opacity%3D%22.4%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22left%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22right%22%3E%3Cstop%20stop-color%3D%22%23172033%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23172033%22%20stop-opacity%3D%22.3%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%200H100V8H0Z%22%20fill%3D%22url%28%23top%29%22%2F%3E%3Cpath%20d%3D%22M0%2092H100V100H0Z%22%20fill%3D%22url%28%23bottom%29%22%2F%3E%3Cpath%20d%3D%22M0%208H8V92H0Z%22%20fill%3D%22url%28%23left%29%22%2F%3E%3Cpath%20d%3D%22M92%208H100V92H92Z%22%20fill%3D%22url%28%23right%29%22%2F%3E%3C%2Fsvg%3E");
     background-size: 100% 100%;
@@ -441,3 +440,149 @@
     }
   }
 }
+
+@layer kind-ui {
+  :where([data-kind-ui="chart-indicator"][data-fill-pattern]) {
+    width: 16px;
+    height: 16px;
+    background: none;
+  }
+  :where([data-kind-ui="chart-legend-button"][aria-pressed="false"] [data-fill-pattern]) {
+    opacity: 0.5;
+    background: none;
+  }
+  @media (forced-colors: active) {
+    :where([data-kind-ui="fill-pattern"]) {
+      forced-color-adjust: none;
+    }
+    :where([data-kind-ui="fill-pattern"] > rect:first-child) {
+      fill: Canvas;
+    }
+    :where(
+        [data-kind-ui="fill-pattern"] > rect:not(:first-child),
+        [data-kind-ui="fill-pattern"] > circle
+      ) {
+      fill: CanvasText;
+    }
+    :where([data-kind-ui="fill-pattern"] > path) {
+      stroke: CanvasText;
+    }
+  }
+
+  [data-kind-ui="heatmap-scroll"][data-loading] {
+    position: relative;
+  }
+  [data-kind-ui="heatmap-scroll"][data-loading] > table {
+    visibility: hidden;
+  }
+  [data-kind-ui="heatmap-scroll"] > [data-kind-ui="chart-loading-skeleton"],
+  [data-kind-ui="sankey"] > [data-kind-ui="chart-loading-skeleton"] {
+    position: absolute;
+    inset: 0;
+  }
+  [data-kind-ui="sankey-content"][data-loading] > * {
+    visibility: hidden;
+  }
+  :where(.kind-ui-loading-chart-pending) .recharts-tooltip-wrapper {
+    display: none;
+  }
+  :where(.kind-ui-loading-chart-pending > *) {
+    visibility: hidden;
+  }
+  :where(.kind-ui-loading-chart-pending .recharts-layer) {
+    visibility: hidden;
+  }
+  :where([data-kind-ui="chart-loading-skeleton"]) {
+    visibility: visible;
+    color: var(--kind-ui-chart-loading-color, #8b969b);
+    pointer-events: none;
+  }
+  :where([data-kind-ui="chart-loading-skeleton"]) {
+    animation: kind-ui-loading-pulse var(--kind-ui-loading-cycle, 1770ms) linear infinite;
+  }
+  :where([data-kind-ui="chart-loading-skeleton"] svg) {
+    overflow: visible;
+  }
+  :where([data-kind-ui="chart-loading-status"]) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  @keyframes kind-ui-loading-pulse {
+    0%,
+    12%,
+    94%,
+    100% {
+      opacity: 0;
+    }
+    14%,
+    90% {
+      opacity: 1;
+    }
+  }
+  :where([data-kind-ui="chart-loading-skeleton"] [data-loading-motion="grow"]) {
+    mask: var(--kind-ui-loading-vertical);
+  }
+  :where(
+      [data-family="bar"],
+      [data-family="waterfall"],
+      [data-family="histogram"],
+      [data-family="box-plot"]
+    )
+    [data-loading-motion="grow"] {
+    mask: none;
+  }
+  :where([data-kind-ui="chart-loading-skeleton"] [data-loading-motion="reveal"]) {
+    mask: var(--kind-ui-loading-horizontal);
+  }
+  :where([data-kind-ui="chart-loading-skeleton"] [data-loading-motion="area-reveal"]) {
+    mask: var(--kind-ui-loading-area);
+  }
+  :where([data-family="combo"][data-loading-layout="vertical"] [data-loading-motion="grow"]) {
+    transform: matrix(0, 0.375, -2.6666667, 0, 640, 0);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-kind-ui="chart-loading-skeleton"]) {
+      animation: none;
+    }
+  }
+}
+
+/* Only the default stroke moves; dots and chart entrance clips are independent. */
+@layer kind-ui {
+  :where(.kind-ui-line-dash .recharts-line-curve) {
+    animation: kind-ui-line-dash var(--kind-ui-dash-duration) linear infinite;
+    animation-direction: var(--kind-ui-dash-direction);
+  }
+  :where([data-motion="off"] .kind-ui-line-dash .recharts-line-curve),
+  :where(.kind-ui-loading-chart-pending .kind-ui-line-dash .recharts-line-curve) {
+    animation: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where(.kind-ui-line-dash .recharts-line-curve) {
+      animation: none;
+    }
+  }
+  @keyframes kind-ui-line-dash {
+    from {
+      stroke-dashoffset: var(--kind-ui-dash-offset);
+    }
+    to {
+      stroke-dashoffset: calc(var(--kind-ui-dash-offset) - var(--kind-ui-dash-cycle));
+    }
+  }
+}
+
+@layer kind-ui {
+  [data-kind-ui="chart-background-pattern"],
+  [data-kind-ui="chart-background-pattern"] * {
+    /* biome-ignore lint/complexity/noImportantStyles: Decorative custom tiles must not intercept chart pointers. */
+    pointer-events: none !important;
+  }
+}

package/dist/stylesheet-warning.d.ts

@@ -0,0 +1,2 @@
+/** Runs only for development mounts; never changes chart styles or server markup. */
+export declare function StylesheetWarning(): null;