uplot-plus 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yeonsoo Park
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,341 @@
+# uPlot+
+
+High-performance React charting library ripped off from uPlot. Might perform occasionally better than original uPlot in React context (or worse). Definitely easier to use in React context.
+
+**[Live Demo (85+ examples)](https://yeonsoo-p.github.io/Uplot-Plus/)**
+
+## Features
+
+- **Canvas 2D rendering** — no SVG or DOM elements for data visualization
+- **Native React components** — declarative `<Chart>`, `<Series>`, `<Scale>`, `<Axis>` API
+- **Multi-x-axis support** — multiple data groups with independent x-ranges on one chart
+- **TypeScript-first** — strict types, full type exports, no `any`
+- **7 path builders** — linear, stepped, bars, monotone cubic, Catmull-Rom, points, candlestick
+- **Interactive** — wheel/touch zoom, drag-to-zoom, cursor snapping, series focus
+- **Cursor sync** — linked crosshairs and tooltips across multiple charts
+- **Compact bundle** — ~111KB (~30KB gzip), React 18+ peer dependency
+- **Dual output** — ES module + CommonJS
+
+## Installation
+
+```sh
+npm install uplot-plus
+```
+
+Peer dependencies:
+
+```sh
+npm install react react-dom
+```
+
+## Quick Start
+
+```tsx
+import { Chart, Scale, Series, Axis } from 'uplot-plus';
+
+const data = [
+  {
+    x: [1, 2, 3, 4, 5],
+    series: [
+      [10, 25, 13, 30, 18],
+      [5, 15, 20, 12, 28],
+    ],
+  },
+];
+
+function App() {
+  return (
+    <Chart width={800} height={400} data={data}>
+      <Scale id="x" />
+      <Scale id="y" />
+      <Axis scale="x" label="X-Axis" />
+      <Axis scale="y" label="Y-Axis" />
+      <Series group={0} index={0} yScale="y" stroke="#e74c3c" width={2} label="Series A" />
+      <Series group={0} index={1} yScale="y" stroke="#3498db" width={2} label="Series B" />
+    </Chart>
+  );
+}
+```
+
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| `<Chart>` | Root container — creates the canvas, manages the chart store |
+| `<Scale>` | Registers a scale (linear, log, asinh, ordinal) |
+| `<Series>` | Registers a data series with stroke, fill, path builder |
+| `<Axis>` | Renders an axis with ticks, labels, grid lines |
+| `<Band>` | Fills a region between two series |
+| `<Legend>` | Interactive legend with live cursor values, click-to-toggle |
+| `<Tooltip>` | Floating tooltip at cursor position, auto-flips at edges |
+| `<ZoomRanger>` | Overview mini-chart with draggable selection for zoom control |
+| `<Timeline>` | Horizontal lanes of colored event spans |
+| `<Sparkline>` | Compact inline chart for tables and dashboards (no axes, no interaction) |
+| `<ResponsiveChart>` | Auto-sizes to container via ResizeObserver |
+| `<HLine>` | Declarative horizontal line annotation |
+| `<VLine>` | Declarative vertical line annotation |
+| `<Region>` | Declarative shaded region annotation |
+| `<AnnotationLabel>` | Declarative text label at data coordinates |
+
+> Full props reference, usage examples, and demo links: [docs/COMPONENTS.md](docs/COMPONENTS.md)
+
+## Data Model
+
+Data is organized as groups, each with its own x-values:
+
+```ts
+import type { ChartData, XGroup } from 'uplot-plus';
+
+// Single x-axis (most common)
+const data: ChartData = [
+  {
+    x: [1, 2, 3, 4, 5],
+    series: [
+      [10, 20, 30, 40, 50],   // series 0
+      [5, 15, 25, 35, 45],    // series 1
+    ],
+  },
+];
+
+// Multi x-axis — two groups with independent x-ranges
+const multiData: ChartData = [
+  { x: [0, 1, 2, 3], series: [[10, 20, 15, 25]] },
+  { x: [0, 0.5, 1.5, 2.5, 3], series: [[8, 18, 22, 12, 30]] },
+];
+```
+
+Each series is referenced by a `(group, index)` tuple — `group` is the index into the `ChartData` array, `index` is the index into that group's `series` array.
+
+Null values in series arrays create gaps in the chart. Use `spanGaps` on `<Series>` to bridge them.
+
+## Path Builders
+
+| Builder | Import | Use case |
+|---------|--------|----------|
+| `linear()` | `linear` | Line/area charts (default). Pixel-level decimation for large datasets |
+| `stepped()` | `stepped` | Step charts — step-after, step-before, or mid-step |
+| `bars()` | `bars` | Bar/column charts with configurable width, gaps, grouped bars |
+| `monotoneCubic()` | `monotoneCubic` | Smooth curves that preserve monotonicity (no overshoot) |
+| `catmullRom()` | `catmullRom` | Centripetal Catmull-Rom splines |
+| `points()` | `points` | Scatter plots — points only, no connecting lines |
+| `drawCandlesticks()` | `drawCandlesticks` | OHLC financial candlestick charts |
+
+```tsx
+import { Series, bars } from 'uplot-plus';
+
+<Series group={0} index={0} yScale="y" paths={bars()} stroke="#3498db" fill="#3498db80" />
+```
+
+## Event Callbacks
+
+React-idiomatic event handling — all callbacks receive resolved chart data (nearest point, data values, coordinates).
+
+```tsx
+import { Chart, Scale, Series, Axis } from 'uplot-plus';
+
+<Chart
+  data={data} width={800} height={400}
+  onClick={(info) => {
+    if (info.point) {
+      console.log(`Clicked series ${info.point.seriesIdx} at y=${info.point.yVal}`);
+    }
+  }}
+  onContextMenu={(info) => {
+    // Right-click with resolved nearest point
+    showContextMenu(info.srcEvent, info.point);
+  }}
+  onDblClick={(info) => {
+    // Return false to prevent default zoom reset
+    return false;
+  }}
+  onSelect={(sel) => {
+    // Intercept drag selection — fetch detail data instead of zooming
+    fetchData(sel.ranges['x'].min, sel.ranges['x'].max);
+    return false; // prevent zoom
+  }}
+  onScaleChange={(scaleId, min, max) => {
+    console.log(`Scale ${scaleId} changed: [${min}, ${max}]`);
+  }}
+  onCursorMove={(info) => { /* fires on every mouse move */ }}
+  onCursorLeave={() => { /* cursor left the plot */ }}
+>
+  <Scale id="x" />
+  <Scale id="y" />
+  <Axis scale="x" />
+  <Axis scale="y" />
+  <Series group={0} index={0} yScale="y" stroke="#e74c3c" width={2} label="Series A" />
+</Chart>
+```
+
+### Controlled Scales
+
+Control zoom and pan declaratively through React state — no imperative refs needed:
+
+```tsx
+import { useState, useCallback } from 'react';
+import { Chart, Scale, Series, Axis } from 'uplot-plus';
+
+function ZoomableChart({ data }) {
+  const [xRange, setXRange] = useState<[number, number] | null>(null);
+
+  const onScaleChange = useCallback((id: string, min: number, max: number) => {
+    if (id === 'x') setXRange([min, max]);
+  }, []);
+
+  return (
+    <>
+      <button onClick={() => setXRange(null)}>Reset Zoom</button>
+      <Chart data={data} width={800} height={400} onScaleChange={onScaleChange}>
+        <Scale id="x"
+          auto={xRange == null} min={xRange?.[0]} max={xRange?.[1]} />
+        <Scale id="y" />
+        {/* ... axes, series */}
+      </Chart>
+    </>
+  );
+}
+```
+
+## Hooks
+
+### `useChart()`
+
+Access the chart store from a child component of `<Chart>`. This is an advanced API for building custom chart sub-components that need direct store access — for most use cases, prefer event callbacks and controlled Scale props.
+
+```tsx
+import { useChart } from 'uplot-plus';
+
+function CustomControl() {
+  const store = useChart();
+  return <button onClick={() => store.toggleSeries(0, 0)}>Toggle</button>;
+}
+```
+
+### `useDrawHook()` / `useCursorDrawHook()`
+
+Register custom Canvas 2D draw callbacks from child components. For most cases, prefer the `onDraw` / `onCursorDraw` props on `<Chart>` — these hooks are useful when building reusable chart sub-components.
+
+```tsx
+import { useDrawHook } from 'uplot-plus';
+import type { DrawCallback } from 'uplot-plus';
+
+const onDraw: DrawCallback = (dc) => {
+  dc.ctx.fillStyle = 'rgba(255,0,0,0.2)';
+  dc.ctx.fillRect(dc.plotBox.left, dc.plotBox.top, dc.plotBox.width, dc.plotBox.height);
+};
+```
+
+### `useStreamingData()`
+
+Sliding-window data management for real-time charts:
+
+```tsx
+import { useStreamingData } from 'uplot-plus';
+
+const { data, push, start, stop, fps } = useStreamingData(initialData, {
+  window: 1000,   // keep last 1000 points
+  batchSize: 10,  // push 10 points per tick
+});
+
+// In your tick callback:
+push([newX], [newY1], [newY2]);
+```
+
+## Axis Value Formatters
+
+Pre-built formatters for common axis label patterns:
+
+```tsx
+import { fmtCompact, fmtSuffix, fmtHourMin, fmtMonthName, fmtLabels } from 'uplot-plus';
+
+<Axis scale="y" values={fmtCompact()} />           // 1.2K, 3.5M
+<Axis scale="y" values={fmtSuffix('%')} />         // 42%
+<Axis scale="y" values={fmtSuffix('°C', 1)} />    // 23.5°C
+<Axis scale="x" values={fmtHourMin({ utc: true })} /> // 14:30
+<Axis scale="x" values={fmtMonthName()} />         // Jan, Feb, ...
+<Axis scale="x" values={fmtLabels(['Q1','Q2','Q3','Q4'])} />
+```
+
+## Color Utilities
+
+```tsx
+import { fadeGradient, withAlpha, palette } from 'uplot-plus';
+
+// Gradient that fades from color to transparent (for area fills)
+<Series fill={fadeGradient('#3498db')} />
+<Series fill={fadeGradient('#e74c3c', 1.0, 0.2)} />
+
+// Match fill to stroke with lower opacity
+<Series stroke="#2980b9" fill={withAlpha('#2980b9', 0.1)} />
+
+// Generate N distinct colors
+const colors = palette(5); // 5 visually distinct HSL colors
+```
+
+## Data Utilities
+
+### `stackGroup`
+
+Computes stacked series values and generates band configs:
+
+```tsx
+import { stackGroup, Band } from 'uplot-plus';
+
+const raw = { x: [1, 2, 3], series: [[10, 20, 30], [5, 10, 15]] };
+const { group, bands } = stackGroup(raw);
+
+<Chart data={[group]}>
+  {bands.map((b, i) => <Band key={i} {...b} />)}
+</Chart>
+```
+
+### `alignData`
+
+Aligns data across multiple x-axes for multi-group charts.
+
+## Annotations
+
+Declarative annotation components — place inside `<Chart>`:
+
+```tsx
+import { HLine, VLine, Region, AnnotationLabel } from 'uplot-plus';
+
+<Chart data={data}>
+  {/* ... scales, axes, series */}
+  <HLine value={65} yScale="y" stroke="#e74c3c" dash={[6, 4]} label="Threshold" />
+  <VLine value={100} xScale="x" stroke="#8e44ad" dash={[4, 4]} />
+  <Region yMin={40} yMax={60} yScale="y" fill="rgba(46,204,113,0.12)" />
+  <AnnotationLabel x={50} y={65} text="Alert zone" fill="#e74c3c" />
+</Chart>
+```
+
+Imperative helpers are available for advanced draw hooks that need programmatic control:
+
+```tsx
+import { drawHLine, drawVLine, drawLabel, drawRegion } from 'uplot-plus';
+```
+
+## Scale Utilities
+
+For advanced draw hooks that need pixel conversions:
+
+```tsx
+import { valToPos, posToVal } from 'uplot-plus';
+
+const px = valToPos(dataValue, scale, dimension, offset);
+const val = posToVal(pixelPos, scale, dimension, offset);
+```
+
+## Development
+
+```sh
+npm run dev         # Start demo dev server (85+ examples)
+npm run build       # Build library (ES + CJS to dist/)
+npm run typecheck   # TypeScript strict check
+npm run lint        # ESLint
+npm run test        # Vitest test suite
+```
+
+## License
+
+MIT

package/dist/annotations.d.ts

@@ -0,0 +1,22 @@
+import type { DrawContext } from './types/hooks';
+import type { ScaleState } from './types';
+export interface AnnotationStyle {
+    stroke?: string;
+    width?: number;
+    dash?: number[];
+    fill?: string;
+    font?: string;
+}
+/** Draw a horizontal line at a y-value.
+ *  Assumes ctx is already pxRatio-scaled (handled by the library). */
+export declare function drawHLine(dc: DrawContext, yScale: ScaleState, value: number, style?: AnnotationStyle): void;
+/** Draw a vertical line at an x-value.
+ *  Assumes ctx is already pxRatio-scaled (handled by the library). */
+export declare function drawVLine(dc: DrawContext, xScale: ScaleState, value: number, style?: AnnotationStyle): void;
+/** Draw a text label at data coordinates.
+ *  Assumes ctx is already pxRatio-scaled (handled by the library). */
+export declare function drawLabel(dc: DrawContext, xScale: ScaleState, yScale: ScaleState, xVal: number, yVal: number, text: string, style?: AnnotationStyle): void;
+/** Draw a shaded region between two y-values.
+ *  Assumes ctx is already pxRatio-scaled (handled by the library). */
+export declare function drawRegion(dc: DrawContext, yScale: ScaleState, yMin: number, yMax: number, style?: AnnotationStyle): void;
+//# sourceMappingURL=annotations.d.ts.map

package/dist/annotations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotations.d.ts","sourceRoot":"","sources":["../src/annotations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;sEACsE;AACtE,wBAAgB,SAAS,CACvB,EAAE,EAAE,WAAW,EACf,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,MAAM,EACb,KAAK,GAAE,eAAoB,GAC1B,IAAI,CAYN;AAED;sEACsE;AACtE,wBAAgB,SAAS,CACvB,EAAE,EAAE,WAAW,EACf,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,MAAM,EACb,KAAK,GAAE,eAAoB,GAC1B,IAAI,CAYN;AAED;sEACsE;AACtE,wBAAgB,SAAS,CACvB,EAAE,EAAE,WAAW,EACf,MAAM,EAAE,UAAU,EAClB,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,KAAK,GAAE,eAAoB,GAC1B,IAAI,CASN;AAED;sEACsE;AACtE,wBAAgB,UAAU,CACxB,EAAE,EAAE,WAAW,EACf,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,KAAK,GAAE,eAAoB,GAC1B,IAAI,CAcN"}

package/dist/axes/layout.d.ts

@@ -0,0 +1,30 @@
+import type { ScaleState, BBox } from '../types';
+import type { AxisState } from '../types/axes';
+/**
+ * Run one cycle of axis calculation.
+ * For each visible axis, compute tick positions, labels, and size.
+ * Returns true if all axis sizes have converged.
+ *
+ * Ported from uPlot uPlot.js axesCalc.
+ */
+export declare function axesCalc(axisStates: AxisState[], getScale: (id: string) => ScaleState | undefined, plotWidCss: number, plotHgtCss: number, cycleNum: number): boolean;
+/**
+ * Compute the plot area bounding box by subtracting axis sizes from the chart dimensions.
+ *
+ * Ported from uPlot uPlot.js calcPlotRect (lines 818-870).
+ */
+export declare function calcPlotRect(chartWidth: number, chartHeight: number, axisStates: AxisState[]): BBox;
+/**
+ * Compute axis positions (_pos and _lpos) using cumulative offsets from plot edges.
+ *
+ * Ported from uPlot uPlot.js calcAxesRects (lines 872-899).
+ */
+export declare function calcAxesRects(axisStates: AxisState[], plotBox: BBox): void;
+/**
+ * Run the convergence loop: repeatedly calculate axes and plot rect
+ * until axis sizes stabilize (or max 3 cycles).
+ *
+ * Ported from uPlot uPlot.js convergeSize.
+ */
+export declare function convergeSize(chartWidth: number, chartHeight: number, axisStates: AxisState[], getScale: (id: string) => ScaleState | undefined): BBox;
+//# sourceMappingURL=layout.d.ts.map

package/dist/axes/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/axes/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAiB/C;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACtB,UAAU,EAAE,SAAS,EAAE,EACvB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,UAAU,GAAG,SAAS,EAChD,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GACf,OAAO,CAoFT;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,SAAS,EAAE,GACtB,IAAI,CAsCN;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,UAAU,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,GAAG,IAAI,CA8B1E;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,SAAS,EAAE,EACvB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,UAAU,GAAG,SAAS,GAC/C,IAAI,CAqCN"}

package/dist/axes/ticks.d.ts

@@ -0,0 +1,47 @@
+import type { AxisConfig, AxisState } from '../types/axes';
+/**
+ * Generate tick split positions for a numeric (linear) axis.
+ * Ported from uPlot opts.js numAxisSplits.
+ */
+export declare function numAxisSplits(scaleMin: number, scaleMax: number, foundIncr: number, _foundSpace: number, forceMin: boolean): number[];
+/**
+ * Format tick values as strings for a numeric axis.
+ * Ported from uPlot opts.js numAxisVals.
+ */
+export declare function numAxisVals(splits: number[]): string[];
+/**
+ * Generate tick split positions for a log-scale axis.
+ * Ported from uPlot opts.js logAxisSplits.
+ */
+export declare function logAxisSplits(scaleMin: number, scaleMax: number, logBase: number): number[];
+/**
+ * Generate tick split positions for an asinh (symmetric log) axis.
+ * Produces linear ticks near zero and logarithmic ticks at larger magnitudes.
+ *
+ * @param scaleMin - minimum value on the scale
+ * @param scaleMax - maximum value on the scale
+ * @param linthresh - linear threshold (values within [-linthresh, linthresh] are linear)
+ */
+export declare function asinhAxisSplits(scaleMin: number, scaleMax: number, linthresh?: number): number[];
+/**
+ * Filter log axis split values to reduce label density.
+ * Keeps only values that are exact powers of the log base.
+ * This prevents crowded labels at intermediate ticks (2, 3, 4... between 1 and 10).
+ */
+export declare function logAxisValFilter(splits: number[], logBase: number): boolean[];
+/**
+ * Determine optimal tick increment and spacing for an axis.
+ * Ported from uPlot uPlot.js getIncrSpace.
+ */
+export declare function getIncrSpace(axis: AxisConfig, min: number, max: number, fullDim: number): [number, number];
+/**
+ * Compute the size of an axis in CSS pixels.
+ * For vertical axes, estimates width from the longest tick label.
+ * For horizontal axes, uses a fixed height based on font size.
+ */
+export declare function computeAxisSize(axis: AxisConfig, _values: string[] | null, _cycleNum: number): number;
+/**
+ * Create an initial AxisState from an AxisConfig.
+ */
+export declare function createAxisState(config: AxisConfig): AxisState;
+//# sourceMappingURL=ticks.d.ts.map

package/dist/axes/ticks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ticks.d.ts","sourceRoot":"","sources":["../../src/axes/ticks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAiB3D;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,OAAO,GAChB,MAAM,EAAE,CAaV;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAEtD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,GACd,MAAM,EAAE,CA0CV;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,SAAS,SAAI,GACZ,MAAM,EAAE,CA8CV;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,MAAM,EAAE,EAChB,OAAO,EAAE,MAAM,GACd,OAAO,EAAE,CAUX;AAYD;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,UAAU,EAChB,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,MAAM,GACd,CAAC,MAAM,EAAE,MAAM,CAAC,CAWlB;AAKD;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EACxB,SAAS,EAAE,MAAM,GAChB,MAAM,CAsBR;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,UAAU,GAAG,SAAS,CAa7D"}

package/dist/colors.d.ts

@@ -0,0 +1,32 @@
+import type { GradientConfig } from './types';
+/**
+ * Create a vertical linear gradient that fades a color from one opacity to another.
+ * Useful for area charts: `fill={fadeGradient('#3498db')}`.
+ *
+ * Supports hex (#rgb, #rrggbb) and rgb()/rgba() color strings.
+ *
+ * @param color - CSS color string (hex or rgb/rgba)
+ * @param fromAlpha - opacity at the top (default 0.8)
+ * @param toAlpha - opacity at the bottom (default 0.0)
+ */
+export declare function fadeGradient(color: string, fromAlpha?: number, toAlpha?: number): GradientConfig;
+/**
+ * Return a CSS color string with a new alpha value.
+ * Useful for matching fill to stroke: `fill={withAlpha(stroke, 0.1)}`.
+ *
+ * Supports hex (#rgb, #rrggbb) and rgb()/rgba() color strings.
+ *
+ * @param color - CSS color string (hex or rgb/rgba)
+ * @param alpha - opacity 0–1
+ */
+export declare function withAlpha(color: string, alpha: number): string;
+/**
+ * Generate a palette of N visually distinct colors using HSL rotation.
+ * Uses the golden angle (~137.5°) for maximum separation between adjacent colors.
+ *
+ * @param n - number of colors to generate
+ * @param saturation - HSL saturation percentage (default 65)
+ * @param lightness - HSL lightness percentage (default 50)
+ */
+export declare function palette(n: number, saturation?: number, lightness?: number): string[];
+//# sourceMappingURL=colors.d.ts.map

package/dist/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAqC9C;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,SAAS,SAAM,EACf,OAAO,SAAM,GACZ,cAAc,CAchB;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAK9D;AAED;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,UAAU,SAAK,EAAE,SAAS,SAAK,GAAG,MAAM,EAAE,CAQ5E"}

package/dist/components/Axis.d.ts

@@ -0,0 +1,14 @@
+import type { AxisConfig } from '../types';
+import { Side } from '../types';
+export type AxisProps = Omit<AxisConfig, 'side'> & {
+    side?: Side;
+};
+/**
+ * Renderless component that registers an axis config with the chart store.
+ * Must be a child of <Chart>.
+ *
+ * Mount effect registers/unregisters based on identity keys (scale, side).
+ * Sync effect updates config when any prop changes (shallow-equality bail-out).
+ */
+export declare function Axis(props: AxisProps): null;
+//# sourceMappingURL=Axis.d.ts.map

package/dist/components/Axis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../src/components/Axis.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAIhC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAMnE;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAuC3C"}

package/dist/components/Band.d.ts

@@ -0,0 +1,10 @@
+import type { BandConfig } from '../types/bands';
+/**
+ * Renderless component that registers a band config with the chart store.
+ * A band fills the area between two series.
+ *
+ * Uses a mount/update split: registers once on mount, replaces config immutably on prop changes.
+ * Destructures series tuple to primitives for stable dependency comparison.
+ */
+export declare function Band({ series, group, fill, dir }: BandConfig): null;
+//# sourceMappingURL=Band.d.ts.map

package/dist/components/Band.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Band.d.ts","sourceRoot":"","sources":["../../src/components/Band.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,UAAU,GAAG,IAAI,CA6BnE"}

package/dist/components/Chart.d.ts

@@ -0,0 +1,8 @@
+import type { ChartProps } from '../types';
+/**
+ * Root chart component.
+ * Creates a canvas element, manages the chart store, and provides context to children.
+ * Canvas drawing is completely decoupled from React's reconciliation cycle.
+ */
+export declare function Chart({ width, height, data, children, className, pxRatio: pxRatioOverride, onDraw, onCursorDraw, syncKey, cursor, onClick, onContextMenu, onDblClick, onCursorMove, onCursorLeave, onScaleChange, onSelect, }: ChartProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Chart.d.ts.map

package/dist/components/Chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/components/Chart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAO3C;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAClE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EACrC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAC/D,aAAa,EAAE,QAAQ,GACxB,EAAE,UAAU,2CAsJZ"}

package/dist/components/Legend.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { LegendConfig } from '../types/legend';
+interface LegendProps extends LegendConfig {
+    className?: string;
+}
+/**
+ * Legend component that shows series labels with color swatches.
+ * Updates live as the cursor moves. Click to toggle series visibility.
+ */
+export declare function Legend({ show, position, className }: LegendProps): React.ReactElement | null;
+export {};
+//# sourceMappingURL=Legend.d.ts.map

package/dist/components/Legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/components/Legend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,UAAU,WAAY,SAAQ,YAAY;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwDD;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EAAE,IAAW,EAAE,QAAmB,EAAE,SAAS,EAAE,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAiE9G"}

package/dist/components/ResponsiveChart.d.ts

@@ -0,0 +1,18 @@
+import type { ChartProps } from '../types/chart';
+export interface ResponsiveChartProps extends Omit<ChartProps, 'width' | 'height'> {
+    /** Minimum width in CSS pixels (default: 100) */
+    minWidth?: number;
+    /** Minimum height in CSS pixels (default: 100) */
+    minHeight?: number;
+    /** If set, height = width / aspectRatio */
+    aspectRatio?: number;
+    /** Initial height when container height is auto (default: 300) */
+    initialHeight?: number;
+}
+/**
+ * Chart wrapper that auto-sizes to its container via ResizeObserver.
+ * The container div takes 100% width; height is either derived from
+ * container, aspectRatio, or initialHeight.
+ */
+export declare function ResponsiveChart({ minWidth, minHeight, aspectRatio, initialHeight, ...chartProps }: ResponsiveChartProps): React.JSX.Element;
+//# sourceMappingURL=ResponsiveChart.d.ts.map

package/dist/components/ResponsiveChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveChart.d.ts","sourceRoot":"","sources":["../../src/components/ResponsiveChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,QAAQ,CAAC;IAChF,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAc,EACd,SAAe,EACf,WAAW,EACX,aAAmB,EACnB,GAAG,UAAU,EACd,EAAE,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmD1C"}

package/dist/components/Scale.d.ts

@@ -0,0 +1,11 @@
+import type { ScaleConfig } from '../types';
+export type ScaleProps = ScaleConfig;
+/**
+ * Renderless component that registers a scale config with the chart store.
+ * Must be a child of <Chart>.
+ *
+ * Mount effect registers/unregisters based on identity key (id).
+ * Sync effect updates config when any prop changes (shallow-equality bail-out).
+ */
+export declare function Scale(props: ScaleProps): null;
+//# sourceMappingURL=Scale.d.ts.map

package/dist/components/Scale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scale.d.ts","sourceRoot":"","sources":["../../src/components/Scale.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAI5C,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC;AAErC;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAgC7C"}

package/dist/components/Series.d.ts

@@ -0,0 +1,11 @@
+import type { SeriesConfig } from '../types';
+export type SeriesProps = SeriesConfig;
+/**
+ * Renderless component that registers a series config with the chart store.
+ * Must be a child of <Chart>.
+ *
+ * Mount effect registers/unregisters based on identity keys (group, index).
+ * Sync effect updates config when any prop changes (shallow-equality bail-out).
+ */
+export declare function Series(props: SeriesProps): null;
+//# sourceMappingURL=Series.d.ts.map

package/dist/components/Series.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Series.d.ts","sourceRoot":"","sources":["../../src/components/Series.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC;AAEvC;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAoC/C"}