@kind-ui/charts 0.1.1 → 0.2.0

package/dist/emphasis.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { useChartInteraction } from "./chart-interaction.js";
 const Context = createContext(null);
 const Actions = createContext(null);
 const identity = (target) => JSON.stringify([target.kind, target.scope, target.key]);
@@ -59,6 +60,9 @@ export function EmphasisProvider({ enabled, children, }) {
     const actions = useMemo(() => ({ enabled, register, set, clear, reset, clearScope }), [enabled, register, set, clear, reset, clearScope]);
     return (_jsx(Actions, { value: actions, children: _jsx(Context, { value: active, children: children }) }));
 }
+export function useOptionalEmphasisActions() {
+    return use(Actions);
+}
 export function useEmphasisActions() {
     const value = use(Actions);
     if (!value)
@@ -71,7 +75,8 @@ function useEmphasisState() {
     return { ...actions, active };
 }
 /** Explicit contract for custom and portaled marks; apply factor to an extra paint wrapper. */
-export function useEmphasis(target, enabled = true) {
+export function useEmphasis(target, enabled = true, persistent = true) {
+    const interaction = useChartInteraction();
     const state = useEmphasisState();
     const owner = useId();
     const { kind, key, scope, seriesKey } = target;
@@ -84,7 +89,16 @@ export function useEmphasis(target, enabled = true) {
     const related = active === null ||
         (active.kind === "series" ? active.key === seriesKey : identity(active) === identity(target));
     const applicable = active?.kind === "series" ? seriesKey !== undefined : active?.scope === scope;
-    const dimmed = enabled && state.enabled && applicable && !related;
+    const persistentKey = interaction.kind === "series"
+        ? seriesKey
+        : target.kind === "sector" || target.kind === "category"
+            ? key
+            : undefined;
+    const persistentDimmed = persistent &&
+        persistentKey !== undefined &&
+        interaction.selected !== null &&
+        persistentKey !== interaction.selected;
+    const dimmed = enabled && (active !== null ? state.enabled && applicable && !related : persistentDimmed);
     const enter = useCallback((channel) => {
         if (enabled && state.enabled) {
             if (channel === "keyboard")
@@ -96,8 +110,8 @@ export function useEmphasis(target, enabled = true) {
     return { active, dimmed: Boolean(dimmed), factor: dimmed ? 0.28 : 1, enter, leave };
 }
 /** Multiplicative paint layer; native geometry, consumer opacity and hit testing stay intact. */
-export function EmphasisMark({ target, enabled = true, keyboardActive = false, children, ...props }) {
-    const emphasis = useEmphasis(target, enabled);
+export function EmphasisMark({ target, enabled = true, persistent = true, keyboardActive = false, children, ...props }) {
+    const emphasis = useEmphasis(target, enabled, persistent);
     // Only depend on identity and the engine's inspection edge, not the changing paint state.
     useLayoutEffect(() => {
         if (keyboardActive)

package/dist/fill-pattern.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentPropsWithRef } from "react";
+/** Static paint encoding, independent of material and chart geometry. */
+export type FillPattern = {
+    kind: "hatch" | "stripe" | "duotone" | "dots" | "lines";
+    /** Second ink; defaults to CanvasText and follows the host's color scheme. */
+    color?: string;
+    /** Positive tile size in SVG user units (default 8). */
+    size?: number;
+    /** Positive stroke/stripe width or dot diameter, <= size (default 1; stripe 2). */
+    width?: number;
+    /** Rotation in degrees (default 45 for hatch, 0 otherwise). */
+    angle?: number;
+};
+export declare function patternResourceId(id: string): string;
+export declare function FillPatternDefinition({ id, pattern, baseColor, }: {
+    id: string;
+    pattern: FillPattern;
+    baseColor: string;
+}): import("react").JSX.Element;
+export type FillPatternSwatchProps = Omit<ComponentPropsWithRef<"svg">, "children" | "color"> & {
+    pattern: FillPattern;
+    color: string;
+};
+/** Decorative marker for explicit series/consumer legends; native svg props remain available. */
+export declare function FillPatternSwatch({ pattern, color, ...props }: FillPatternSwatchProps): import("react").JSX.Element;

package/dist/fill-pattern.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+export function patternResourceId(id) {
+    return `kind-ui-pattern-${Array.from(id, (char) => char.codePointAt(0)?.toString(16)).join("-")}`;
+}
+export function FillPatternDefinition({ id, pattern, baseColor, }) {
+    const { kind, size = 8, width = kind === "stripe" ? 2 : 1, angle = kind === "hatch" ? 45 : 0, } = pattern;
+    if (!["hatch", "stripe", "duotone", "dots", "lines"].includes(kind) ||
+        !Number.isFinite(size) ||
+        size <= 0 ||
+        !Number.isFinite(width) ||
+        width <= 0 ||
+        width > size ||
+        !Number.isFinite(angle))
+        throw new Error("FillPattern requires a known kind, positive size/width (width <= size), and finite angle");
+    return (_jsxs("pattern", { id: id, "data-kind-ui": "fill-pattern", "data-pattern": kind, width: size, height: size, patternUnits: "userSpaceOnUse", patternTransform: `rotate(${angle})`, children: [_jsx("rect", { width: size, height: size, fill: baseColor }), kind === "dots" ? (_jsx("circle", { cx: size / 2, cy: size / 2, r: width / 2, fill: pattern.color ?? "CanvasText" })) : kind === "hatch" || kind === "lines" ? (_jsx("path", { d: `M0 0V${size} M${size} 0V${size}`, stroke: pattern.color ?? "CanvasText", strokeWidth: width })) : (_jsx("rect", { width: kind === "duotone" ? size / 2 : width, height: size, fill: pattern.color ?? "CanvasText" }))] }));
+}
+/** Decorative marker for explicit series/consumer legends; native svg props remain available. */
+export function FillPatternSwatch({ pattern, color, ...props }) {
+    const id = patternResourceId(useId());
+    return (_jsxs("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 16 16", ...props, "data-kind-ui": "chart-indicator", "data-fill-pattern": "", children: [_jsx("defs", { children: _jsx(FillPatternDefinition, { id: id, pattern: pattern, baseColor: color }) }), _jsx("rect", { width: 16, height: 16, fill: `url(#${id})` })] }));
+}

package/dist/heatmap.d.ts

@@ -7,9 +7,11 @@ export type HeatmapChartProps = ComponentPropsWithRef<"div"> & HeatmapModelOptio
     missingLabel?: string;
     /** Diagonal cell entrance; quantitative colors and table geometry are unchanged. */
     animate?: boolean;
+    loading?: boolean | undefined;
+    loadingLabel?: string | undefined;
 };
 /** Native table layout owns categorical geometry. No numeric scatter approximation or SVG overlay. */
-export declare function HeatmapChart({ rows, columns, data, duplicates, scale, formatValue, missingLabel, animate, children, onPointerLeave, ...props }: HeatmapChartProps): import("react").JSX.Element;
+export declare function HeatmapChart({ rows, columns, data, duplicates, scale, formatValue, missingLabel, animate, loading, loadingLabel, children, onPointerLeave, ...props }: HeatmapChartProps): import("react").JSX.Element;
 export type HeatmapCellContentProps = {
     cell: HeatmapCell;
     fill: string;

package/dist/heatmap.js

@@ -4,6 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { animateMini, animate as animateValue } from "motion/react";
 import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
 import { createHeatmapModel, } from "./heatmap-model.js";
+import { LoadingSkeletonSurface, LoadingStatus, useLoadingSeed } from "./loading-skeleton.js";
+import { StandaloneLoadingDesign } from "./loading-standalone-designs.js";
 import { TooltipNumber } from "./tooltip-number.js";
 const HeatmapContext = createContext(null);
 function useHeatmap() {
@@ -35,16 +37,19 @@ const samePointer = (a, b) => a !== null &&
     a.clientY === b.clientY;
 const labelOf = (cell, context) => `${cell.row}, ${cell.column}: ${cell.value === null ? context.missingLabel : context.formatValue(cell.value)}`;
 /** Native table layout owns categorical geometry. No numeric scatter approximation or SVG overlay. */
-export function HeatmapChart({ rows, columns, data, duplicates, scale, formatValue = number, missingLabel = "Missing", animate = false, children, onPointerLeave, ...props }) {
+export function HeatmapChart({ rows, columns, data, duplicates, scale, formatValue = number, missingLabel = "Missing", animate = false, loading, loadingLabel, children, onPointerLeave, ...props }) {
+    const loadingSeed = useLoadingSeed(loading);
     const model = useMemo(() => createHeatmapModel({ rows, columns, data, ...(duplicates ? { duplicates } : {}) }), [rows, columns, data, duplicates]);
     const [active, updateActive] = useState(null);
     const pointer = useRef(null);
     const dismissed = useRef(false);
     const setActive = useCallback((key) => {
+        if (loading)
+            return;
         if (key)
             dismissed.current = false;
         updateActive(key);
-    }, []);
+    }, [loading]);
     const dismiss = useCallback(() => {
         dismissed.current = true;
         updateActive(null);
@@ -60,8 +65,20 @@ export function HeatmapChart({ rows, columns, data, duplicates, scale, formatVal
     const [tooltipMounted, setTooltipMounted] = useState(false);
     const reduced = useSyncExternalStore(subscribeReduced, reducedSnapshot, reducedServerSnapshot);
     const [finished, setFinished] = useState(false);
-    const interrupt = useCallback(() => setFinished(true), []);
-    const enabled = animate && !reduced;
+    const previousLoading = useRef(loading);
+    const completing = previousLoading.current === true && loading !== true;
+    const interrupt = useCallback(() => {
+        if (!loading)
+            setFinished(true);
+    }, [loading]);
+    const enabled = animate && !reduced && !loading;
+    useLayoutEffect(() => {
+        if (loading) {
+            setFinished(false);
+            updateActive(null);
+            pointer.current = null;
+        }
+    }, [loading]);
     const entrance = enabled && !finished;
     const root = useRef(null);
     useEffect(() => {
@@ -113,11 +130,14 @@ export function HeatmapChart({ rows, columns, data, duplicates, scale, formatVal
     const previousEnabled = useRef(enabled);
     useLayoutEffect(() => {
         const inputs = [model, scale, children];
-        if (inputs.some((value, index) => value !== previous.current[index]) ||
-            (previousEnabled.current && !enabled))
+        if (!loading &&
+            !completing &&
+            (inputs.some((value, index) => value !== previous.current[index]) ||
+                (previousEnabled.current && !enabled)))
             interrupt();
         previous.current = inputs;
         previousEnabled.current = enabled;
+        previousLoading.current = loading;
     });
     useLayoutEffect(() => {
         if (!entrance)
@@ -136,19 +156,21 @@ export function HeatmapChart({ rows, columns, data, duplicates, scale, formatVal
         return () => document.removeEventListener("keydown", keydown);
     }, [active, tooltipMounted, dismiss]);
     return (_jsx(HeatmapContext, { value: {
+            loading,
+            loadingSeed,
             model,
             entrance,
             scale,
             formatValue,
             missingLabel,
-            active,
+            active: loading ? null : active,
             setActive,
             dismiss,
             inspectPointer,
             tooltipId,
             tooltipMounted,
             setTooltipMounted,
-        }, children: _jsx("div", { ...props, ref: ref, "data-kind-ui": "heatmap", onFocusCapture: (event) => {
+        }, children: _jsxs("div", { ...props, ref: ref, "data-kind-ui": "heatmap", "aria-busy": props["aria-busy"], onFocusCapture: (event) => {
                 props.onFocusCapture?.(event);
                 interrupt();
             }, onPointerMoveCapture: (event) => {
@@ -169,7 +191,7 @@ export function HeatmapChart({ rows, columns, data, duplicates, scale, formatVal
                     ? model.cells.flat().find((item) => keyOf(item) === focused?.dataset.cellKey)
                     : undefined;
                 setActive(cell ? [cell.row, cell.column] : null);
-            }, children: _jsx("div", { "data-kind-ui": "heatmap-entrance", children: children }) }) }));
+            }, children: [_jsx("div", { "data-kind-ui": "heatmap-entrance", children: children }), _jsx(LoadingStatus, { loading: loading, label: loadingLabel })] }) }));
 }
 // A native cell keeps its styles, ref and handlers. Motion temporarily multiplies its opacity.
 function EntranceCell({ diagonal, ...props }) {
@@ -293,7 +315,7 @@ export function HeatmapGrid({ caption, material = "plain", layout, Cell = Heatma
             }
         }
     }
-    return (_jsxs("div", { "data-kind-ui": "heatmap-scroll", children: [_jsxs("table", { ...props, ref: (node) => {
+    return (_jsxs("div", { "data-kind-ui": "heatmap-scroll", "data-loading": context.loading || undefined, children: [_jsxs("table", { ...props, ref: (node) => {
                     table.current = node;
                     if (typeof props.ref === "function")
                         return props.ref(node);
@@ -301,7 +323,7 @@ export function HeatmapGrid({ caption, material = "plain", layout, Cell = Heatma
                         props.ref.current = node;
                 }, 
                 // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: WAI-ARIA APG data grid uses a native table with roving cell focus.
-                role: "grid", "aria-label": caption, "data-kind-ui": "heatmap-grid", "data-cell-sizing": layout?.cellSize === undefined ? undefined : "fixed", "data-row-labels": layout?.rowLabels, "data-column-labels": layout?.columnLabels, style: {
+                role: "grid", "aria-label": caption, "aria-busy": context.loading, "aria-hidden": context.loading || undefined, inert: context.loading || undefined, "data-kind-ui": "heatmap-grid", "data-cell-sizing": layout?.cellSize === undefined ? undefined : "fixed", "data-row-labels": layout?.rowLabels, "data-column-labels": layout?.columnLabels, style: {
                     "--heatmap-columns": model.columns.length,
                     ...(layout?.cellSize === undefined
                         ? {}
@@ -333,7 +355,7 @@ export function HeatmapGrid({ caption, material = "plain", layout, Cell = Heatma
                                             context.inspectPointer(event, [cell.row, cell.column]);
                                         } },
                                         _jsx(Cell, { cell: cell, fill: fill, formattedValue: formattedValue })));
-                                })] }, row))) })] }), model.rows.length === 0 || model.columns.length === 0 ? (_jsx("p", { "data-kind-ui": "heatmap-empty", children: "No cells in the selected domains." })) : null] }));
+                                })] }, row))) })] }), context.loading && (_jsx(LoadingSkeletonSurface, { family: "heatmap", design: (seed) => _jsx(StandaloneLoadingDesign, { family: "heatmap", seed: seed }), width: "100%", height: "100%", seed: context.loadingSeed })), !context.loading && (model.rows.length === 0 || model.columns.length === 0) ? (_jsx("p", { "data-kind-ui": "heatmap-empty", children: "No cells in the selected domains." })) : null] }));
 }
 /** In-flow tooltip stays within narrow containers and remains available for hover, focus and touch. */
 export function HeatmapTooltip({ Content, valueAnimation, ...props }) {

package/dist/histogram-chart.js

@@ -1,8 +1,8 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useMemo } from "react";
 import { XAxis, YAxis } from "recharts";
-import { BarChart } from "./bar-chart.js";
+import { BarChartImplementation } from "./bar-chart.js";
 import { validateHistogram } from "./histogram-data.js";
 export const HistogramContext = createContext(null);
 /** Bounded vertical histogram; quantitative axes are owned here, native children compose. */
@@ -23,5 +23,12 @@ export function HistogramChart({ bins, measure, xAxisProps, yAxisProps, children
     const domain = bins.length ? [bins[0]?.lower ?? 0, bins[bins.length - 1]?.upper ?? 1] : [0, 1];
     if (!Number.isFinite((domain[1] ?? 1) - (domain[0] ?? 0)))
         throw new Error("Histogram domain must have a finite span");
-    return (_jsx(HistogramContext, { value: measure, children: _jsxs(BarChart, { ...props, data: data, layout: "horizontal", barCategoryGap: 0, barGap: 0, children: [_jsx(XAxis, { ...xAxisProps, xAxisId: 0, dataKey: "midpoint", type: "number", scale: "linear", domain: domain, allowDataOverflow: true, reversed: false }), _jsx(YAxis, { ...yAxisProps, yAxisId: 0, type: "number", scale: "linear", domain: [0, "dataMax"], reversed: false }), children] }) }));
+    return (_jsx(HistogramContext, { value: measure, children: _jsx(BarChartImplementation, { family: "histogram", chartProps: {
+                ...props,
+                data,
+                layout: "horizontal",
+                barCategoryGap: 0,
+                barGap: 0,
+                children: (_jsxs(_Fragment, { children: [_jsx(XAxis, { ...xAxisProps, xAxisId: 0, dataKey: "midpoint", type: "number", scale: "linear", domain: domain, allowDataOverflow: true, reversed: false }), _jsx(YAxis, { ...yAxisProps, yAxisId: 0, type: "number", scale: "linear", domain: [0, "dataMax"], reversed: false }), children] })),
+            } }) }));
 }

package/dist/index.d.ts

@@ -4,29 +4,36 @@ export { type LineAnimation, LineSeries, type LineSeriesProps, Tooltip, type Too
 export { type AreaAnimation, AreaChart, type AreaChartProps } from "./area-chart.js";
 export type { AreaMaterial } from "./area-material.js";
 export { AreaSeries, type AreaSeriesProps } from "./area-series.js";
-export { type BarAnimation, BarChart, BarChart as WaterfallChart, type BarChartProps, type BarChartProps as WaterfallChartProps, } from "./bar-chart.js";
+export { type BarAnimation, BarChart, type BarChartProps, } from "./bar-chart.js";
 export type { BarMaterial } from "./bar-material.js";
-export { BarSeries, type BarSeriesProps } from "./bar-series.js";
+export { type BarProjection, BarSeries, type BarSeriesProps } from "./bar-series.js";
 export type { BoxPlotMaterial } from "./box-material.js";
 export { BoxPlotChart, type BoxPlotChartProps, BoxPlotMark, type BoxPlotMarkProps, BoxPlotSeries, type BoxPlotSeriesProps, type BoxPlotShapeProps, type BoxPlotSummary, boxPlotExtent, validateBoxPlotSummary, } from "./box-plot.js";
+export { ChartBackgroundPattern, type ChartBackgroundPatternDefinition, type ChartBackgroundPatternProps, type ChartBackgroundPatternRenderProps, defineChartBackgroundPattern, } from "./chart-background-pattern.js";
+export { type ChartIdentity, type ChartInteractionConfig, type ChartInteractionEvent, type ChartInteractionRequest, useChartInteraction, } from "./chart-interaction.js";
 export { type ComboAnimation, ComboChart, type ComboChartProps } from "./combo-chart.js";
 export { type ConfiguredLineChartProps, type ConfiguredLineSeries, LineChart, type LineChartProps, } from "./configured-line-chart.js";
 export { EmphasisMark, type EmphasisMarkProps, type EmphasisTarget, useEmphasis, } from "./emphasis.js";
+export { type FillPattern, FillPatternSwatch, type FillPatternSwatchProps, } from "./fill-pattern.js";
 export { HeatmapCellContent, type HeatmapCellContentProps, HeatmapChart, type HeatmapChartProps, HeatmapDataTable, type HeatmapDataTableProps, HeatmapGrid, type HeatmapGridProps, HeatmapLegend, type HeatmapLegendProps, type HeatmapMaterial, HeatmapTooltip, type HeatmapTooltipProps, } from "./heatmap.js";
 export { createHeatmapModel, createHeatmapScale, type HeatmapCell, type HeatmapDatum, type HeatmapDuplicatePolicy, type HeatmapModel, type HeatmapModelOptions, type HeatmapScale, type HeatmapScaleOptions, } from "./heatmap-model.js";
 export { HistogramChart, type HistogramChartProps } from "./histogram-chart.js";
 export { binHistogram, type HistogramBin, type HistogramBinningResult, type HistogramMeasure, } from "./histogram-data.js";
 export { HistogramSeries, type HistogramSeriesProps, type HistogramShapeProps, } from "./histogram-series.js";
 export { Legend, type LegendProps } from "./legend.js";
+export type { LineDashAnimation } from "./line-dash.js";
 export type { LineMaterial } from "./line-material.js";
+export { createPercentStack, formatPercent, type NormalizedValue, type PercentStackOptions, } from "./percent-stack.js";
 export { type PieAnimation, PieChart, type PieChartProps } from "./pie-chart.js";
 export type { PieMaterial } from "./pie-material.js";
 export { PieSeries, type PieSeriesProps } from "./pie-series.js";
+export { PointMarker, type PointMarkerProps, type PointStyle } from "./point-marker.js";
 export { type RadarAnimation, RadarChart, type RadarChartProps, type RadialBarAnimation, RadialBarChart, type RadialBarChartProps, } from "./polar-chart.js";
 export type { PolarMaterial } from "./polar-material.js";
 export { RadarSeries, type RadarSeriesProps, RadialBarSeries, type RadialBarSeriesProps, } from "./polar-series.js";
 export type { RadarSelectionProps } from "./radar-interaction.js";
 export { RadialBarLabel, type RadialBarLabelProps } from "./radial-bar-label.js";
+export type { RevealDirection } from "./reveal-clip.js";
 export { Root, type RootProps } from "./root.js";
 export { type SankeyAnimation, SankeyChart, type SankeyChartProps } from "./sankey-chart.js";
 export type { SankeyNodeConfig } from "./sankey-colors.js";
@@ -34,12 +41,14 @@ export { prepareSankeyData, type SankeyFlowData, type SankeyFlowLink, type Sanke
 export type { SankeyFinish } from "./sankey-finish.js";
 export { SankeyLegend, type SankeyLegendProps } from "./sankey-legend.js";
 export { SankeyLink, type SankeyLinkProps, type SankeyMaterial, SankeyNode, type SankeyNodeProps, } from "./sankey-marks.js";
+export { SankeyNodeLabel, type SankeyNodeLabelProps } from "./sankey-node-label.js";
 export { SankeyTable, type SankeyTableProps } from "./sankey-table.js";
 export { type ScatterAnimation, ScatterChart, type ScatterChartProps } from "./scatter-chart.js";
 export type { ScatterMaterial } from "./scatter-material.js";
 export { ScatterSeries, type ScatterSeriesProps } from "./scatter-series.js";
 export { type ScatterSizeDimension, ScatterTooltip, ScatterTooltipContent, type ScatterTooltipContentProps, type ScatterTooltipProps, } from "./scatter-tooltip.js";
 export { TooltipContent, type TooltipContentProps } from "./tooltip-content.js";
-export type { SeriesConfig } from "./types.js";
+export type { SeriesColor, SeriesConfig } from "./types.js";
+export { WaterfallChart, type WaterfallChartProps } from "./waterfall-chart.js";
 export { computeWaterfallData, type WaterfallDatum, type WaterfallEntry, } from "./waterfall-data.js";
 export { WaterfallConnectors, type WaterfallConnectorsProps, WaterfallSeries, type WaterfallSeriesProps, } from "./waterfall-series.js";

package/dist/index.js

@@ -5,20 +5,25 @@ export { ActivityRings, } from "./activity-rings.js";
 export { LineSeries, Tooltip, } from "./animation.js";
 export { AreaChart } from "./area-chart.js";
 export { AreaSeries } from "./area-series.js";
-export { BarChart, BarChart as WaterfallChart, } from "./bar-chart.js";
+export { BarChart, } from "./bar-chart.js";
 export { BarSeries } from "./bar-series.js";
 export { BoxPlotChart, BoxPlotMark, BoxPlotSeries, boxPlotExtent, validateBoxPlotSummary, } from "./box-plot.js";
+export { ChartBackgroundPattern, defineChartBackgroundPattern, } from "./chart-background-pattern.js";
+export { useChartInteraction, } from "./chart-interaction.js";
 export { ComboChart } from "./combo-chart.js";
 export { LineChart, } from "./configured-line-chart.js";
 export { EmphasisMark, useEmphasis, } from "./emphasis.js";
+export { FillPatternSwatch, } from "./fill-pattern.js";
 export { HeatmapCellContent, HeatmapChart, HeatmapDataTable, HeatmapGrid, HeatmapLegend, HeatmapTooltip, } from "./heatmap.js";
 export { createHeatmapModel, createHeatmapScale, } from "./heatmap-model.js";
 export { HistogramChart } from "./histogram-chart.js";
 export { binHistogram, } from "./histogram-data.js";
 export { HistogramSeries, } from "./histogram-series.js";
 export { Legend } from "./legend.js";
+export { createPercentStack, formatPercent, } from "./percent-stack.js";
 export { PieChart } from "./pie-chart.js";
 export { PieSeries } from "./pie-series.js";
+export { PointMarker } from "./point-marker.js";
 export { RadarChart, RadialBarChart, } from "./polar-chart.js";
 export { RadarSeries, RadialBarSeries, } from "./polar-series.js";
 export { RadialBarLabel } from "./radial-bar-label.js";
@@ -27,10 +32,12 @@ export { SankeyChart } from "./sankey-chart.js";
 export { prepareSankeyData, } from "./sankey-data.js";
 export { SankeyLegend } from "./sankey-legend.js";
 export { SankeyLink, SankeyNode, } from "./sankey-marks.js";
+export { SankeyNodeLabel } from "./sankey-node-label.js";
 export { SankeyTable } from "./sankey-table.js";
 export { ScatterChart } from "./scatter-chart.js";
 export { ScatterSeries } from "./scatter-series.js";
 export { ScatterTooltip, ScatterTooltipContent, } from "./scatter-tooltip.js";
 export { TooltipContent } from "./tooltip-content.js";
+export { WaterfallChart } from "./waterfall-chart.js";
 export { computeWaterfallData, } from "./waterfall-data.js";
 export { WaterfallConnectors, WaterfallSeries, } from "./waterfall-series.js";

package/dist/legend.d.ts

@@ -9,6 +9,8 @@ export type LegendProps = Omit<ComponentPropsWithRef<"ul">, "children"> & {
         key: string;
         label: string;
         visible: boolean;
+        selected: boolean;
+        mode: "visibility" | "focus";
         marker: ReactNode;
     }) => ReactNode;
 };

package/dist/legend.js

@@ -2,17 +2,38 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Symbols } from "recharts";
 import { useChart } from "./chart-context.js";
+import { useChartInteraction } from "./chart-interaction.js";
 import { useEmphasis } from "./emphasis.js";
+import { FillPatternSwatch } from "./fill-pattern.js";
+import { colorStopToken } from "./series-color.js";
 /** Displays configured series; becomes interactive only when a controlled change callback exists. */
 export function Legend({ hideIcon = false, emphasis = "none", children, ...props }) {
-    const { config, visibleSeries, onVisibleSeriesChange } = useChart();
-    return (_jsx("ul", { "aria-label": "Chart legend", ...props, "data-kind-ui": "chart-legend", children: Object.entries(config).map(([key, item]) => {
+    const { config, paints, visibleSeries } = useChart();
+    const interaction = useChartInteraction();
+    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-legend-key]");
+            if (button?.dataset.legendKey !== undefined && event.currentTarget.contains(button))
+                interaction.activate({ kind: interaction.kind, key: button.dataset.legendKey }, "legend", event);
+        }, children: Object.entries(config).map(([key, item]) => {
             const visible = visibleSeries?.includes(key) ?? true;
-            const marker = item.icon && !hideIcon ? (_jsx("span", { "aria-hidden": "true", "data-kind-ui": "chart-icon", children: _jsx(item.icon, {}) })) : item.legendShape && !hideIcon ? (_jsx("svg", { "aria-hidden": "true", focusable: "false", "data-kind-ui": "chart-indicator", "data-legend-shape": item.legendShape, viewBox: "-8 -8 16 16", style: { "--kind-ui-chart-indicator-color": `var(--color-${key})` }, children: _jsx(Symbols, { type: item.legendShape, cx: 0, cy: 0, size: 64 }) })) : (_jsx("span", { "aria-hidden": "true", "data-kind-ui": "chart-indicator", style: { "--kind-ui-chart-indicator-color": `var(--color-${key})` } }));
-            const content = children ? (children({ key, label: item.label, visible, marker })) : (_jsxs(_Fragment, { children: [marker, item.label] }));
-            return (_jsx(LegendItem, { seriesKey: key, enabled: emphasis === "series" && visible, interactive: Boolean(onVisibleSeriesChange && visibleSeries), children: onVisibleSeriesChange && visibleSeries ? (_jsx("button", { type: "button", "aria-pressed": visible, "data-kind-ui": "chart-legend-button", onClick: () => onVisibleSeriesChange(visible
-                        ? visibleSeries.filter((value) => value !== key)
-                        : [...visibleSeries, key]), children: content })) : (_jsxs("span", { children: [content, visible ? null : " (hidden)"] })) }, key));
+            const marker = item.icon && !hideIcon ? (_jsx("span", { "aria-hidden": "true", "data-kind-ui": "chart-icon", children: _jsx(item.icon, {}) })) : item.legendShape && !hideIcon ? (_jsx("svg", { "aria-hidden": "true", focusable: "false", "data-kind-ui": "chart-indicator", "data-legend-shape": item.legendShape, viewBox: "-8 -8 16 16", style: {
+                    "--kind-ui-chart-indicator-color": paints[key],
+                }, children: _jsx(Symbols, { type: item.legendShape, cx: 0, cy: 0, size: 64 }) })) : item.pattern && !hideIcon ? (_jsx(FillPatternSwatch, { pattern: item.pattern, color: `var(--color-${key})` })) : (_jsx("span", { "aria-hidden": "true", "data-kind-ui": "chart-indicator", style: {
+                    "--kind-ui-chart-indicator-color": `var(--color-${key})`,
+                    "--kind-ui-chart-indicator-background": `var(${colorStopToken(key, "gradient")})`,
+                } }));
+            const content = children ? (children({
+                key,
+                label: item.label,
+                visible,
+                marker,
+                selected: interaction.selected === key,
+                mode: interaction.mode,
+            })) : (_jsxs(_Fragment, { children: [marker, item.label] }));
+            return (_jsx(LegendItem, { seriesKey: key, enabled: emphasis === "series" && visible, interactive: interaction.interactive && interaction.eligible.includes(key), children: interaction.interactive && interaction.eligible.includes(key) ? (_jsx("button", { type: "button", "aria-pressed": interaction.mode === "focus" ? interaction.selected === key : visible, "data-kind-ui": "chart-legend-button", "data-legend-key": key, children: content })) : (_jsxs("span", { children: [content, visible ? null : " (hidden)"] })) }, key));
         }) }));
 }
 function LegendItem({ seriesKey, enabled, interactive, children, }) {

package/dist/line-chart.d.ts

@@ -1,6 +1,11 @@
 import { type Attributes, type ComponentProps, type ComponentType } from "react";
 import { LineChart as EngineLineChart, type RadarChart as EngineRadarChart } from "recharts";
-export type LineChartProps = ComponentProps<typeof EngineLineChart>;
+import type { LoadingAnimation } from "./loading-motion.js";
+import { type LoadingDesign, type LoadingFamily } from "./loading-skeleton.js";
+export type LineChartProps = ComponentProps<typeof EngineLineChart> & {
+    loading?: boolean | undefined;
+    loadingLabel?: string | undefined;
+};
 type Point = {
     x: number;
     y: number;
@@ -27,7 +32,7 @@ declare function createKeyboardModality(): {
 export declare function useChartKeyboard(): boolean;
 /** Internal boundary shared by the static and optional Motion entry points. */
 type NativeChartProps = LineChartProps | ComponentProps<typeof EngineRadarChart>;
-export declare function LineChartFrame<Props extends NativeChartProps & Attributes = LineChartProps>({ engine: EngineChart, interrupt, clip, motionEnabled, categoryEmphasis, chartProps: props, children, }: {
+export declare function LineChartFrame<Props extends NativeChartProps & Attributes = LineChartProps>({ engine: EngineChart, interrupt, clip, motionEnabled, categoryEmphasis, loading, loadingLabel, loadingSkeleton, loadingAnimation, loadingDesign, chartProps: props, children, }: {
     chartProps: Props;
     engine: ComponentType<Props>;
     children?: Props["children"];
@@ -35,7 +40,12 @@ export declare function LineChartFrame<Props extends NativeChartProps & Attribut
     clip?: string;
     motionEnabled?: boolean;
     categoryEmphasis?: boolean;
+    loading?: boolean | undefined;
+    loadingLabel?: string | undefined;
+    loadingSkeleton?: LoadingFamily;
+    loadingAnimation?: LoadingAnimation | undefined;
+    loadingDesign?: LoadingDesign | undefined;
 }): import("react").JSX.Element;
 /** Recharts owns geometry and keyboard selection; Kind shares pointer/keyboard modality. */
-export declare function LineChart(props: LineChartProps): import("react").JSX.Element;
+export declare function LineChart({ loading, loadingLabel, ...props }: LineChartProps): import("react").JSX.Element;
 export {};

package/dist/line-chart.js

@@ -4,6 +4,8 @@ import { createContext, use, useCallback, useId, useLayoutEffect, useRef, useSta
 import { LineChart as EngineLineChart, getRelativeCoordinate, useChartHeight, useChartWidth, } from "recharts";
 import { useChart } from "./chart-context.js";
 import { useEmphasisActions } from "./emphasis.js";
+import { ChartLoadingSkeleton, useLoadingSeed, } from "./loading-skeleton.js";
+import { SeriesColorDefinitions, SeriesPaintBoundary } from "./series-paint.js";
 export const LineInteraction = createContext(null);
 export function useLineInteraction() {
     const value = use(LineInteraction);
@@ -53,7 +55,8 @@ function Lifecycle({ data, invalidate }) {
     }, [width, height, data, visibleSeries, invalidate]);
     return null;
 }
-export function LineChartFrame({ engine: EngineChart, interrupt = () => { }, clip, motionEnabled, categoryEmphasis = false, chartProps: props, children = props.children, }) {
+export function LineChartFrame({ engine: EngineChart, interrupt = () => { }, clip, motionEnabled, categoryEmphasis = false, loading, loadingLabel, loadingSkeleton, loadingAnimation, loadingDesign, chartProps: props, children = props.children, }) {
+    const loadingSeed = useLoadingSeed(loading);
     const { onMouseMove, onMouseLeave } = props;
     const emphasis = useEmphasisActions();
     const frame = useRef(null);
@@ -105,12 +108,36 @@ export function LineChartFrame({ engine: EngineChart, interrupt = () => { }, cli
             return next;
         });
     }, []);
+    const previousLoading = useRef(loading);
+    const completing = previousLoading.current === true && loading !== true;
+    useLayoutEffect(() => {
+        previousLoading.current = loading;
+    });
     const invalidate = useCallback(() => {
         setPointer(null);
         setMotionReady(false);
-        interrupt();
-    }, [interrupt]);
-    return (_jsx(LineInteraction, { value: {
+        if (!completing)
+            interrupt();
+    }, [interrupt, completing]);
+    const chart = (_jsx(SeriesPaintBoundary, { children: _jsxs(EngineChart, { ...props, className: [
+                "kind-ui-line-chart",
+                loading !== undefined && "kind-ui-loading-chart",
+                loading && "kind-ui-loading-chart-pending",
+                props.className,
+            ]
+                .filter(Boolean)
+                .join(" "), style: { ...props.style, "--kind-ui-line-clip": clip ?? "none" }, onMouseMove: (state, event) => {
+                const { relativeX, relativeY } = getRelativeCoordinate(event);
+                setKeyboard(false);
+                setMotionReady(true);
+                setPointer({ x: relativeX, y: relativeY });
+                interrupt();
+                onMouseMove?.(state, event);
+            }, onMouseLeave: (state, event) => {
+                setPointer(null);
+                onMouseLeave?.(state, event);
+            }, children: [_jsx(SeriesColorDefinitions, { viewport: true }), _jsx(Lifecycle, { data: props.data, invalidate: invalidate }), children, loading && loadingSkeleton && (_jsx(ChartLoadingSkeleton, { family: loadingSkeleton, seed: loadingSeed, animation: loadingAnimation, design: loadingDesign }))] }) }));
+    return (_jsxs(LineInteraction, { value: {
             pointer,
             keyboard,
             emphasisScope,
@@ -121,40 +148,33 @@ export function LineChartFrame({ engine: EngineChart, interrupt = () => { }, cli
             invalidate,
             seriesKeys,
             registerSeries,
-        }, children: _jsx("div", { ref: frame, "data-kind-ui": "line-frame", "data-motion": motionEnabled === undefined ? undefined : motionEnabled ? "on" : "off", style: { display: "contents" }, onFocusCapture: (event) => {
-                interrupt();
-                if (event.target.matches(":focus-visible"))
-                    setKeyboard(true);
-            }, onPointerDownCapture: () => {
-                setKeyboard(false);
-                interrupt();
-            }, onPointerLeave: () => emphasis.clearScope(emphasisScope), onPointerCancel: () => emphasis.clearScope(emphasisScope), onPointerOverCapture: () => setKeyboard(false), onPointerMoveCapture: () => {
-                setKeyboard(false);
-                interrupt();
-            }, onKeyDownCapture: (event) => {
-                setKeyboard(event.key !== "Escape");
-                interrupt();
-                setMotionReady(true);
-                setPointer(null);
-            }, onBlurCapture: (event) => {
-                if (!event.currentTarget.contains(event.relatedTarget)) {
-                    setPointer(null);
+        }, children: [_jsx("div", { ref: frame, "aria-busy": loading, "aria-hidden": loading || undefined, inert: loading || undefined, "data-kind-ui": "line-frame", "data-motion": motionEnabled === undefined ? undefined : motionEnabled ? "on" : "off", style: { display: "contents" }, onFocusCapture: (event) => {
+                    interrupt();
+                    if (event.target.matches(":focus-visible"))
+                        setKeyboard(true);
+                }, onPointerDownCapture: () => {
                     setKeyboard(false);
-                    emphasis.clear("keyboard");
-                }
-            }, children: _jsxs(EngineChart, { ...props, className: ["kind-ui-line-chart", props.className].filter(Boolean).join(" "), style: { ...props.style, "--kind-ui-line-clip": clip ?? "none" }, onMouseMove: (state, event) => {
-                    const { relativeX, relativeY } = getRelativeCoordinate(event);
+                    interrupt();
+                }, onPointerLeave: () => emphasis.clearScope(emphasisScope), onPointerCancel: () => emphasis.clearScope(emphasisScope), onPointerOverCapture: () => setKeyboard(false), onPointerMoveCapture: () => {
                     setKeyboard(false);
-                    setMotionReady(true);
-                    setPointer({ x: relativeX, y: relativeY });
                     interrupt();
-                    onMouseMove?.(state, event);
-                }, onMouseLeave: (state, event) => {
+                }, onKeyDownCapture: (event) => {
+                    if ((event.key === "Enter" || event.key === " " || event.key === "Escape") &&
+                        event.target.closest('[data-kind-ui="emphasis-mark"][role="button"], [data-kind-ui="series-interaction"][role="button"]'))
+                        return;
+                    setKeyboard(event.key !== "Escape");
+                    interrupt();
+                    setMotionReady(true);
                     setPointer(null);
-                    onMouseLeave?.(state, event);
-                }, children: [_jsx(Lifecycle, { data: props.data, invalidate: invalidate }), children] }) }) }));
+                }, onBlurCapture: (event) => {
+                    if (!event.currentTarget.contains(event.relatedTarget)) {
+                        setPointer(null);
+                        setKeyboard(false);
+                        emphasis.clear("keyboard");
+                    }
+                }, children: chart }), loading !== undefined && (_jsx("span", { "data-kind-ui": "chart-loading-status", role: "status", "aria-atomic": "true", children: loading ? (loadingLabel ?? "Loading chart") : "" }))] }));
 }
 /** Recharts owns geometry and keyboard selection; Kind shares pointer/keyboard modality. */
-export function LineChart(props) {
-    return _jsx(LineChartFrame, { chartProps: props, engine: EngineLineChart });
+export function LineChart({ loading, loadingLabel, ...props }) {
+    return (_jsx(LineChartFrame, { chartProps: props, engine: EngineLineChart, loading: loading, loadingLabel: loadingLabel, loadingSkeleton: "line" }));
 }

package/dist/line-dash.d.ts

@@ -0,0 +1,8 @@
+/** Timing for one complete numeric dash-pattern cycle. */
+export type LineDashAnimation = {
+    durationMs?: number;
+    direction?: "forward" | "reverse";
+};
+/** Unitless SVG lengths only: native CSS/percentage patterns remain consumer-owned. */
+export declare function dashCycle(pattern: string | number | undefined): number | undefined;
+export declare function dashDuration(options: LineDashAnimation): number | undefined;

package/dist/line-dash.js

@@ -0,0 +1,18 @@
+/** Unitless SVG lengths only: native CSS/percentage patterns remain consumer-owned. */
+export function dashCycle(pattern) {
+    if (pattern === undefined)
+        return undefined;
+    const tokens = String(pattern)
+        .trim()
+        .split(/[\s,]+/);
+    if (!tokens.length || tokens.some((token) => !/^(?:\d+\.?\d*|\.\d+)$/.test(token)))
+        return undefined;
+    const values = tokens.map(Number);
+    const sum = values.reduce((total, value) => total + value, 0);
+    const cycle = sum * (values.length % 2 ? 2 : 1);
+    return Number.isFinite(cycle) && cycle > 0 ? cycle : undefined;
+}
+export function dashDuration(options) {
+    const duration = options.durationMs ?? 1000;
+    return Number.isFinite(duration) && duration > 0 ? duration : undefined;
+}