@lilt-ui/charts 0.1.0 → 0.3.0

package/dist/chart-context.d.ts

@@ -20,6 +20,13 @@ export interface PlotArrangement {
         series: readonly string[];
         mode: StackMode;
     } | null;
+    /**
+     * Series drawn by column marks such as candles or range bars: each observation takes a
+     * bar-like slot, so the plot insets its edges like a bar chart.
+     */
+    columns?: readonly string[];
+    /** Slot every observation like a bar even when nothing is drawn as one. */
+    slots?: boolean;
 }
 export declare const LINE_ARRANGEMENT: PlotArrangement;
 export interface ChartSnapshot<T> {
@@ -39,6 +46,12 @@ export interface ChartSnapshot<T> {
     yTicks: readonly number[];
     xToPixel: (value: number) => number;
     yToPixel: (value: number) => number;
+    /** Maps a value in a series' own unit, following `scale: 'secondary'`. */
+    yToPixelFor: (seriesId: string) => (value: number) => number;
+    /** Width of one observation's column in pixels, for bars and column marks. */
+    columnWidth: number;
+    /** Series drawn by column marks. */
+    columns: readonly string[];
     geometry: PlotGeometry | null;
     plot: PlotBox;
     formatX: (value: number) => string;
@@ -96,6 +109,11 @@ export declare function makeAxisTicks(snapshot: ChartSnapshot<unknown>, previous
     x: AxisTick[];
     y: AxisTick[];
 };
+/**
+ * Log ticks on 1, 2 and 5 times powers of ten when the domain spans decades; within a narrow
+ * range, evenly spaced round values read better, so those come from a linear scale.
+ */
+export declare function logTicks(domain: readonly [number, number], count: number): number[];
 export declare function buildSnapshot<T>(data: NormalizedData<T>, series: readonly ChartSeries<T>[], xConfig: ChartXConfig<T>, yConfig: ChartYConfig, margins: ChartMargins, width: number, height: number, yDomainOverride?: readonly [number, number] | null, xDomainOverride?: readonly [number, number] | null, geometrySeries?: readonly ChartSeries<T>[], arrangement?: PlotArrangement, stackWeights?: Readonly<Record<string, number>>, barLayout?: ChartBarLayout, 
 /** Keeps line and area observations off the plot edges so labels can center on them. */
 edgeInset?: number): ChartSnapshot<T>;

package/dist/chart-data-CCwLQeXa.js

@@ -0,0 +1,44 @@
+//#region src/data/chart-data.ts
+function e(e, t) {
+	let n = t.range;
+	if (n && (!Number.isFinite(n.startX) || !Number.isFinite(n.endX))) throw Error("Range bounds must be finite.");
+	let r = n ? Math.min(n.startX, n.endX) : -Infinity, i = n ? Math.max(n.startX, n.endX) : Infinity, a = 0, o = 0, s = 0, c = Infinity, l = -Infinity, u = Infinity, d = -Infinity, f = null, p = null, m = /* @__PURE__ */ new Set();
+	for (let n of e) {
+		let e = Number(t.x(n));
+		if (!Number.isFinite(e)) throw Error("Summary positions must be finite numbers or valid dates.");
+		if (e < r || e > i) continue;
+		if (m.has(e)) throw Error("Summary positions must be unique.");
+		m.add(e);
+		let h = t.value(n);
+		if (h !== null && (typeof h != "number" || !Number.isFinite(h))) throw Error("Summary values must be finite numbers or null.");
+		if (e < u && (u = e, f = h), e > d && (d = e, p = h), h === null) {
+			o++;
+			continue;
+		}
+		a++, s += h, c = Math.min(c, h), l = Math.max(l, h);
+	}
+	if (!Number.isFinite(s)) throw Error("Summary total exceeds the finite numeric range.");
+	return {
+		count: a,
+		missing: o,
+		total: a ? s : null,
+		mean: a ? s / a : null,
+		min: a ? c : null,
+		max: a ? l : null,
+		first: f,
+		last: p,
+		change: f === null || p === null ? null : p - f
+	};
+}
+function t(e, t) {
+	if (!t.length) throw Error("CSV needs at least one column.");
+	let n = (e) => {
+		if (typeof e == "number" && !Number.isFinite(e)) throw Error("CSV numbers must be finite.");
+		if (e instanceof Date && !Number.isFinite(e.getTime())) throw Error("CSV dates must be valid.");
+		let t = e === null ? "" : e instanceof Date ? e.toISOString() : String(e);
+		return typeof e == "string" && /^[\s]*[=+\-@]|^[\t\r\n]/.test(t) && (t = "'" + t), /[",\r\n]/.test(t) ? `"${t.replaceAll("\"", "\"\"")}"` : t;
+	};
+	return [t.map((e) => n(e.header)).join(","), ...e.map((e) => t.map((t) => n(t.value(e))).join(","))].join("\r\n") + "\r\n";
+}
+//#endregion
+export { t as n, e as t };

package/dist/chart.d.ts

@@ -1,10 +1,12 @@
 import { ReactElement, ReactNode } from 'react';
 import { PlotArrangement } from './chart-context';
+import { PlotMark } from './marks/contract';
 import { ChartBarLayout, ChartPlotProps, ChartProps } from './types';
 import { ToolkitStore } from './runtime/chart-runtime';
 import { CartesianChartModel } from './model/cartesian-model';
 type ChartPlotRendererProps<T> = Omit<ChartProps<T>, 'className' | 'style'> & Omit<ChartPlotProps, 'bars' | 'stack' | 'tooltip'> & {
     arrangement?: PlotArrangement;
+    marks?: readonly PlotMark[];
     barLayout?: ChartBarLayout;
     selectedCategoryId?: string | null;
     onSelectedCategoryIdChange?: (id: string | null) => void;
@@ -13,5 +15,5 @@ type ChartPlotRendererProps<T> = Omit<ChartProps<T>, 'className' | 'style'> & Om
     controllerLinked?: boolean;
     tooltipNode?: ReactNode;
 };
-export declare function ChartPlotRenderer<T>({ data, x, y, series, height, compactHeight, margins: marginProps, arrangement, barLayout: barsProps, compact, tooltipNode, inspectionSeries: plotInspectionSeries, className, style, 'aria-label': ariaLabel, children, status, interactive, error, renderRetry, motion: motionPreference, animateIn, resetKey, onSelectionChange, controller, linkedSelection, selectedCategoryId, onSelectedCategoryIdChange, compare, focus, live, brush, visibleSeries, onVisibleSeriesChange, toolkit, model, controllerLinked, axis: axisStyle, pill, pillSeries, pillValue, pillPosition, axisInset, runoff, labelOverhang, }: ChartPlotRendererProps<T>): ReactElement;
+export declare function ChartPlotRenderer<T>({ data, x, y, series, height, compactHeight, margins: marginProps, arrangement, marks, barLayout: barsProps, compact, tooltipNode, inspectionSeries: plotInspectionSeries, className, style, 'aria-label': ariaLabel, children, status, interactive, error, renderRetry, motion: motionPreference, animateIn, resetKey, onSelectionChange, controller, linkedSelection, selectedCategoryId, onSelectedCategoryIdChange, compare, focus, live, brush, visibleSeries, onVisibleSeriesChange, toolkit, model, controllerLinked, axis: axisProp, pill, pillSeries, pillValue, pillPosition, axisInset, runoff, labelOverhang, }: ChartPlotRendererProps<T>): ReactElement;
 export {};

package/dist/data.js

@@ -1,2 +1,3 @@
-import { o as e, s as t, t as n } from "./analysis-BLLWEKBw.js";
-export { n as summarizeFunnelStages, e as summarizeRange, t as toChartCsv };
+import { n as e, t } from "./chart-data-CCwLQeXa.js";
+import { t as n } from "./analysis-BJRmXHOB.js";
+export { n as summarizeFunnelStages, t as summarizeRange, e as toChartCsv };

package/dist/engine/box.d.ts

@@ -0,0 +1,18 @@
+export interface BoxSummary {
+    /** Lowest sample within 1.5 × IQR below the first quartile: the lower whisker. */
+    min: number;
+    q1: number;
+    median: number;
+    q3: number;
+    /** Highest sample within 1.5 × IQR above the third quartile: the upper whisker. */
+    max: number;
+    /** Samples beyond the whiskers, ascending. */
+    outliers: number[];
+    count: number;
+}
+/**
+ * Quartiles with Tukey whiskers: each whisker reaches the furthest sample within 1.5 times the
+ * interquartile range, and anything beyond is an outlier. Non-finite samples are ignored;
+ * returns null when none remain.
+ */
+export declare function summarizeBox(samples: readonly number[]): BoxSummary | null;

package/dist/engine/domains.d.ts

@@ -1,5 +1,7 @@
 import { ChartSeries, ChartYConfig } from '../types';
 import { NormalizedData } from './normalize';
+/** A row's finite companion values for one series; fields share the series' unit. */
+export declare function fieldValues(fields: Readonly<Record<string, number | null>> | undefined): number[];
 export declare function computeYDomain<T>(data: NormalizedData<T>, series: readonly ChartSeries<T>[], config?: ChartYConfig): readonly [number, number];
 export declare function interpolateDomain(from: readonly [number, number], to: readonly [number, number], progress: number): readonly [number, number];
 /** The smallest of 1, 2, 2.5, 5 × 10ⁿ at or above `value`. */

package/dist/engine/geometry.d.ts

@@ -37,7 +37,6 @@ export interface SeriesGeometry {
 export interface PlotGeometry {
     series: Readonly<Record<string, SeriesGeometry>>;
     bars: Readonly<Record<string, readonly BarGeometry[]>>;
-    bands: Readonly<Record<string, readonly string[]>>;
     baselineY: number;
 }
 /** Series that stack, in chart series order, and how their layers are drawn. */
@@ -68,6 +67,8 @@ export interface GeometryBuildOptions<T> {
     stack?: GeometryStack;
     /** Series plotted against their own value scale, e.g. a rate line over revenue bars. */
     yDomainBySeries?: Readonly<Record<string, readonly [number, number]>>;
+    /** Map values on a logarithmic scale; every plotted value is positive. */
+    yLog?: boolean;
 }
 export declare function buildGeometry<T>(data: NormalizedData<T>, options: GeometryBuildOptions<T>): PlotGeometry;
 export declare function pointAtX(geometry: SeriesGeometry, x: number): ScreenPoint | null;

package/dist/engine/normalize.d.ts

@@ -6,10 +6,8 @@ export interface NormalizedRow<T> {
     categoryId?: string;
     values: Readonly<Record<string, number | null>>;
     statuses: Readonly<Record<string, ChartObservationStatus>>;
-    intervals: Readonly<Record<string, {
-        lower: number;
-        upper: number;
-    } | null>>;
+    /** Companion field values by series ID, then field ID. Series without fields map to {}. */
+    fields: Readonly<Record<string, Readonly<Record<string, number | null>>>>;
 }
 export interface NormalizedData<T> {
     rows: readonly NormalizedRow<T>[];

package/dist/engine/ranges.d.ts

@@ -0,0 +1,59 @@
+import { NormalizedRow } from './normalize';
+/** Pixel mappings a range mark draws with. */
+export interface RangeScales {
+    x: (value: number) => number;
+    y: (value: number) => number;
+    xDomain: readonly [number, number];
+    /** Width of one observation's column in pixels. */
+    columnWidth: number;
+}
+/**
+ * Throws when a present row breaks the order a mark relies on, e.g. low ≤ high. Rows missing
+ * any listed value are gaps and skip the check.
+ */
+export declare function assertOrdered<T>(mark: string, rows: readonly NormalizedRow<T>[], series: string, ids: readonly (string | {
+    value: true;
+})[]): void;
+/** Closed band paths between two fields, split wherever a row lacks either edge. */
+export declare function bandPaths<T>(rows: readonly NormalizedRow<T>[], series: string, lower: string, upper: string, scales: RangeScales): string[];
+/** A rounded rectangle as path data; the radius shrinks to fit. */
+export declare function roundedRect(x: number, y: number, width: number, height: number, radius: number): string;
+/** A dot as path data, so many dots share one path element. */
+export declare function dotPath(x: number, y: number, radius: number): string;
+/** Path data grouped by color, so a mark draws one element per color. */
+export declare class ColorBatches {
+    private readonly batches;
+    add(color: string, path: string): void;
+    entries(): {
+        color: string;
+        d: string;
+    }[];
+}
+/** Column geometry shared by candles and range marks: center and body width per row. */
+export declare function columnFrame(scales: RangeScales): {
+    width: number;
+    half: number;
+};
+export interface RangeColumn<T> {
+    row: NormalizedRow<T>;
+    cx: number;
+}
+/** Rows in view with their pixel centers. */
+export declare function columnsInView<T>(rows: readonly NormalizedRow<T>[], scales: RangeScales): RangeColumn<T>[];
+/** One floating bar from low to high. */
+export declare function rangeBarPath(cx: number, low: number, high: number, scales: RangeScales): string;
+/** A whisker from low to high with caps a little narrower than the column. */
+export declare function whiskerPath(cx: number, low: number, high: number, scales: RangeScales): string;
+export interface BoxShape {
+    box: string;
+    median: string;
+    whiskers: string;
+}
+/** A box from q1 to q3 with a median line and capped whiskers to min and max. */
+export declare function boxShape(cx: number, values: {
+    min: number;
+    q1: number;
+    median: number;
+    q3: number;
+    max: number;
+}, scales: RangeScales): BoxShape;

package/dist/finance/candle-geometry.d.ts

@@ -0,0 +1,55 @@
+import { NormalizedRow } from '../engine/normalize';
+import { RangeScales } from '../engine/ranges';
+/**
+ * How a candle is drawn: a filled `candle`, a `hollow` candle whose rising bodies are outlined
+ * so direction reads without color, or `ohlc` bars with an open tick left and a close tick right.
+ */
+export type CandleDisplay = 'candle' | 'hollow' | 'ohlc';
+export declare const CANDLE_UP = "var(--lilt-candle-up)";
+export declare const CANDLE_DOWN = "var(--lilt-candle-down)";
+export interface CandleFields {
+    open: string;
+    high: string;
+    low: string;
+}
+export interface Candle {
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+    /** Close at or above open; a flat candle counts as rising. */
+    up: boolean;
+}
+export interface CandlePaths {
+    /** Filled bodies, one path per color. */
+    bodies: {
+        color: string;
+        d: string;
+    }[];
+    /** Outlined bodies of hollow rising candles, one path per color. */
+    hollow: {
+        color: string;
+        d: string;
+    }[];
+    /** Wicks, and for OHLC bars the whole bar, stroked, one path per color. */
+    strokes: {
+        color: string;
+        d: string;
+    }[];
+}
+export declare function candleAt(row: NormalizedRow<unknown>, series: string, fields: CandleFields): Candle | null;
+/** Throws on a candle whose high or low does not contain its open and close. */
+export declare function assertCandles(rows: readonly NormalizedRow<unknown>[], series: string, fields: CandleFields): void;
+interface CandleShape {
+    body: string | null;
+    hollow: string | null;
+    stroke: string;
+}
+/** One candle's geometry. Wicks stop at the body, so a hollow body stays empty. */
+export declare function candleShape(cx: number, candle: Candle, scales: RangeScales, display: CandleDisplay): CandleShape;
+/**
+ * Every candle in view batched into a handful of paths: bodies, hollow bodies and strokes,
+ * each grouped by color. Thousands of candles stay a few DOM nodes.
+ */
+export declare function candlePaths(rows: readonly NormalizedRow<unknown>[], series: string, fields: CandleFields, scales: RangeScales, display: CandleDisplay, colorOf: (row: NormalizedRow<unknown>, candle: Candle) => string): CandlePaths;
+export {};

package/dist/finance/candles.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { CandleDisplay } from './candle-geometry';
+export interface CandlesProps {
+    /** The series whose value is each candle's close. */
+    series: string;
+    /** Field IDs of each candle's open, high and low. */
+    open: string;
+    high: string;
+    low: string;
+    /** `candle` (default), `hollow` rising bodies, or `ohlc` bars. */
+    display?: CandleDisplay;
+    className?: string;
+}
+/**
+ * Open-high-low-close candles. The series value is the close; `open`, `high` and `low` name its
+ * fields. Every candle in view draws into a few batched paths, so long histories stay fast.
+ */
+export declare const Candles: (props: CandlesProps) => ReactElement;

package/dist/finance/cards/candlestick-chart-card.d.ts

@@ -0,0 +1,41 @@
+import { ReactElement } from 'react';
+import { CartesianCardProps } from '../../cards/cartesian-card';
+import { NumericKey } from '../../cards/keys';
+import { ChartTooltipContext } from '../../types';
+import { CandleDisplay } from '../candle-geometry';
+type SharedProps<Row, Key extends NumericKey<Row>> = Omit<CartesianCardProps<Row, Key>, 'series' | 'headlineSeries' | 'pillSeries' | 'aggregate' | 'target' | 'forecast' | 'bleed' | 'tiles'>;
+export interface CandlestickChartCardProps<Row, Key extends NumericKey<Row>> extends SharedProps<Row, Key> {
+    /** Fields holding each period's open, high, low and close. */
+    open: Key;
+    high: Key;
+    low: Key;
+    close: Key;
+    /** Field holding traded volume, drawn as a linked pane under the price. */
+    volume?: Key;
+    /**
+     * `candle` (default), `hollow` rising bodies, `ohlc` bars, or `area` for the close alone,
+     * colored by the period's direction.
+     */
+    display?: CandleDisplay | 'area';
+    /** `log` spaces prices by ratio, for long histories. Defaults to `linear`. */
+    scale?: 'linear' | 'log';
+    /** Names the price series in hover. Defaults to "Price". */
+    label?: string;
+    /** Follow the newest candle as rows arrive, with a control to return to it. */
+    live?: boolean;
+    /** Plot height in pixels. Defaults to 240. */
+    height?: number;
+    /** Volume pane height in pixels. Defaults to 64. */
+    volumeHeight?: number;
+}
+/** Change from the first open to the last close. */
+export declare function periodChange<Row>(data: readonly Row[], open: string, close: string): number | undefined;
+/** A hovered candle's open, high and low, formatted for the headline caption. */
+export declare function describeCandle(format: (value: number) => string): (inspection: ChartTooltipContext) => string | null;
+/**
+ * A market chart card: open-high-low-close candles (or an area of the close) with an optional
+ * linked volume pane, a headline that follows the hovered candle, and its open, high and low
+ * beside the date.
+ */
+export declare function CandlestickChartCard<Row, const Key extends NumericKey<Row>>({ open, high, low, close, volume, display, scale, label, live, data, ranges, delta, valueFormat, locale, volumeHeight, ...props }: CandlestickChartCardProps<Row, Key>): ReactElement;
+export {};

package/dist/finance/cards/depth-chart-card.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties, ReactElement } from 'react';
+import { ChartAxis, ChartBackground, ChartHoverStyle, ChartMotion, ChartStyle, ChartSurface } from '../../types';
+import { AnimatedNumberVariant } from '../../motion/animated-number';
+import { BookLevel } from '../indicators';
+export interface DepthChartCardProps {
+    title: string;
+    /** Resting buy orders: a price and the size at it. Order does not matter. */
+    bids: readonly BookLevel[];
+    /** Resting sell orders. */
+    asks: readonly BookLevel[];
+    /** Price format for the mid, spread and axis, e.g. `{ style: 'currency', currency: 'USD' }`. */
+    valueFormat?: Intl.NumberFormatOptions;
+    /** Size format for depth. Defaults to compact numbers. */
+    sizeFormat?: Intl.NumberFormatOptions;
+    locale?: string;
+    /** Plot height in pixels. Defaults to 220. */
+    height?: number;
+    axis?: ChartAxis;
+    background?: ChartBackground;
+    hoverStyle?: ChartHoverStyle;
+    surface?: ChartSurface;
+    numberStyle?: AnimatedNumberVariant;
+    loading?: boolean;
+    motion?: ChartMotion;
+    className?: string;
+    style?: CSSProperties | ChartStyle;
+}
+/**
+ * Order book depth: how much could trade at each price, buying and selling, as stepped areas, with
+ * the mid, spread and total depth in the header. Hover reads the size resting at each price.
+ */
+export declare function DepthChartCard({ title, bids, asks, valueFormat, sizeFormat, locale, height, axis, background, hoverStyle, surface, numberStyle, loading, motion, className, style, }: DepthChartCardProps): ReactElement;

package/dist/finance/cards/indicator-chart-card.d.ts

@@ -0,0 +1,52 @@
+import { ReactElement } from 'react';
+import { CartesianCardProps } from '../../cards/cartesian-card';
+import { NumericKey } from '../../cards/keys';
+import { CandleDisplay } from '../candle-geometry';
+/** A line over the price: a simple or exponential average, or Bollinger bands. */
+export type IndicatorOverlay = 'sma' | 'ema' | 'bollinger' | {
+    kind: 'sma' | 'ema';
+    period: number;
+} | {
+    kind: 'bollinger';
+    period?: number;
+    deviations?: number;
+};
+/** A linked pane under the price. */
+export type IndicatorPane = 'rsi' | 'macd' | 'volume' | {
+    kind: 'rsi';
+    period: number;
+} | {
+    kind: 'macd';
+    fast?: number;
+    slow?: number;
+    signal?: number;
+};
+type SharedProps<Row, Key extends NumericKey<Row>> = Omit<CartesianCardProps<Row, Key>, 'series' | 'headlineSeries' | 'pillSeries' | 'aggregate' | 'target' | 'forecast' | 'bleed' | 'tiles'>;
+export interface IndicatorChartCardProps<Row, Key extends NumericKey<Row>> extends SharedProps<Row, Key> {
+    /** Field holding each period's close; every indicator derives from it. */
+    close: Key;
+    /** Fields for candles. With all three, the price draws as candles; otherwise as a line. */
+    open?: Key;
+    high?: Key;
+    low?: Key;
+    /** Field holding traded volume, for a `volume` pane. */
+    volume?: Key;
+    /** `candle`, `hollow`, `ohlc`, or `line`. Defaults to candles when open, high and low are set. */
+    display?: CandleDisplay | 'line';
+    /** Lines drawn over the price. Defaults to none. */
+    overlays?: readonly IndicatorOverlay[];
+    /** Linked panes under the price, top to bottom. Defaults to RSI then MACD. */
+    panes?: readonly IndicatorPane[];
+    /** Names the price series in hover. Defaults to "Price". */
+    label?: string;
+    scale?: 'linear' | 'log';
+    live?: boolean;
+    /** Height of each indicator pane in pixels. Defaults to 72. */
+    paneHeight?: number;
+}
+/**
+ * Price with technical indicators: moving averages or Bollinger bands over candles or a line, and
+ * RSI, MACD or volume panes below that move together as you hover.
+ */
+export declare function IndicatorChartCard<Row, const Key extends NumericKey<Row>>({ close, open, high, low, volume, display: suppliedDisplay, overlays, panes, label, scale, live, data, ranges, delta, valueFormat, locale, paneHeight, ...props }: IndicatorChartCardProps<Row, Key>): ReactElement;
+export {};

package/dist/finance/cards/pane.d.ts

@@ -0,0 +1,24 @@
+import { ReactElement, ReactNode } from 'react';
+import { CardPaneContext } from '../../cards/cartesian-card';
+import { ChartBars, ChartSeries, ChartYConfig } from '../../types';
+export interface PaneProps<Row> {
+    context: CardPaneContext<Row>;
+    /** Names the pane for screen readers and in its corner label. */
+    label: string;
+    /** Short text in the pane's top-left corner, e.g. "RSI 14". */
+    caption?: ReactNode;
+    /** Values beside the caption for the hovered row, or the latest row at rest. */
+    readout?: (row: Row) => ReactNode;
+    series: readonly ChartSeries<Row>[];
+    height: number;
+    y?: ChartYConfig;
+    bars?: ChartBars;
+    /** Label the x axis under this pane; only the lowest pane should. */
+    xAxis?: boolean;
+    children: ReactNode;
+}
+/**
+ * A plot under a card's main plot, sharing its data, x, margins, and crosshair, so hover in any
+ * pane reads the same observation in all of them.
+ */
+export declare function Pane<Row>({ context, label, caption, readout, series, height, y, bars, xAxis, children, }: PaneProps<Row>): ReactElement;

package/dist/finance/cards/portfolio-chart-card.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+import { CartesianCardProps } from '../../cards/cartesian-card';
+import { NumericKey } from '../../cards/keys';
+type SharedProps<Row, Key extends NumericKey<Row>> = Omit<CartesianCardProps<Row, Key>, 'series' | 'headlineSeries' | 'pillSeries' | 'aggregate' | 'target' | 'forecast' | 'tiles'>;
+export interface PortfolioChartCardProps<Row, Key extends NumericKey<Row>> extends SharedProps<Row, Key> {
+    /** Field holding the account's value. */
+    value: Key;
+    /** Field holding the cost basis: what went in. Drawn as a stepped dashed line. */
+    basis?: Key;
+    /** Names the value series. Defaults to "Value". */
+    label?: string;
+    /** Shade how far the value sits below its best in a linked pane. Defaults to true. */
+    drawdown?: boolean;
+    /** Drawdown pane height in pixels. Defaults to 64. */
+    drawdownHeight?: number;
+}
+/**
+ * Account value next to its cost basis, with how far it sits below its best shaded in a
+ * linked pane. The delta is the gain over basis; the pane reads the current and worst drawdown.
+ */
+export declare function PortfolioChartCard<Row, const Key extends NumericKey<Row>>({ value, basis, label, drawdown: showDrawdown, drawdownHeight, data, ranges, delta, locale, ...props }: PortfolioChartCardProps<Row, Key>): ReactElement;
+export {};

package/dist/finance/cards/price-chart-card.d.ts

@@ -0,0 +1,27 @@
+import { ReactElement, ReactNode } from 'react';
+import { CardSeries, CartesianCardProps } from '../../cards/cartesian-card';
+import { NumericKey } from '../../cards/keys';
+type SharedProps<Row, Key extends NumericKey<Row>> = Omit<CartesianCardProps<Row, Key>, 'series' | 'headlineSeries' | 'pillSeries' | 'aggregate' | 'target' | 'forecast' | 'tiles'>;
+export interface PriceChartCardProps<Row, Key extends NumericKey<Row>> extends SharedProps<Row, Key> {
+    /** Field holding the price, or any level such as protocol TVL. */
+    price: Key;
+    /** Ticker shown in the heading, e.g. "SOL". */
+    symbol?: string;
+    /** Full name beside the ticker, e.g. "Solana". */
+    name?: string;
+    /** A logo or glyph before the ticker. */
+    icon?: ReactNode;
+    /** `area` (default) or `line`. */
+    display?: 'area' | 'line';
+    /**
+     * Other instruments to compare. Every series is then rebased to its change since the first
+     * row, so different price levels share one axis.
+     */
+    versus?: readonly CardSeries<Key>[];
+}
+/**
+ * A ticker card: symbol and name, the latest price, and its signed change over the period, over
+ * an area colored by direction. With `versus`, every instrument is rebased to percent change.
+ */
+export declare function PriceChartCard<Row, const Key extends NumericKey<Row>>({ price, symbol, name, icon, display, versus, data, ranges, delta, valueFormat, locale, title, ...props }: PriceChartCardProps<Row, Key>): ReactElement;
+export {};

package/dist/finance/index.d.ts

@@ -0,0 +1,17 @@
+export { Candles } from './candles';
+export type { CandlesProps } from './candles';
+export type { CandleDisplay } from './candle-geometry';
+export { CandlestickChartCard } from './cards/candlestick-chart-card';
+export type { CandlestickChartCardProps } from './cards/candlestick-chart-card';
+export { IndicatorChartCard } from './cards/indicator-chart-card';
+export type { IndicatorChartCardProps, IndicatorOverlay, IndicatorPane, } from './cards/indicator-chart-card';
+export { DepthChartCard } from './cards/depth-chart-card';
+export type { DepthChartCardProps } from './cards/depth-chart-card';
+export { PortfolioChartCard } from './cards/portfolio-chart-card';
+export type { PortfolioChartCardProps } from './cards/portfolio-chart-card';
+export { PriceChartCard } from './cards/price-chart-card';
+export type { PriceChartCardProps } from './cards/price-chart-card';
+export { OrderBook } from './order-book';
+export type { OrderBookProps } from './order-book';
+export { bollinger, depthLevels, drawdown, ema, macd, rebase, rsi, sma } from './indicators';
+export type { BollingerResult, BookLevel, DepthLevel, DepthSummary, MacdResult, } from './indicators';

package/dist/finance/indicators.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Pure finance helpers. Each takes values in time order and returns an array of the same length,
+ * with `null` wherever the input is missing or the window has not filled yet, so results line up
+ * with the rows they came from.
+ */
+export type Series = readonly (number | null | undefined)[];
+/** Simple moving average over the last `period` values; a gap in the window yields null. */
+export declare function sma(values: Series, period: number): (number | null)[];
+/**
+ * Exponential moving average, seeded with the simple average of the first `period` values.
+ * A missing value reads null and leaves the average where it was.
+ */
+export declare function ema(values: Series, period: number): (number | null)[];
+/**
+ * Relative strength index with Wilder's smoothing, from 0 to 100. The first reading needs
+ * `period` changes, so it lands on index `period`.
+ */
+export declare function rsi(values: Series, period?: number): (number | null)[];
+export interface MacdResult {
+    macd: (number | null)[];
+    signal: (number | null)[];
+    histogram: (number | null)[];
+}
+/** Moving average convergence divergence: fast EMA minus slow EMA, its signal EMA, and the gap. */
+export declare function macd(values: Series, fast?: number, slow?: number, signal?: number): MacdResult;
+export interface BollingerResult {
+    middle: (number | null)[];
+    upper: (number | null)[];
+    lower: (number | null)[];
+}
+/** Bollinger bands: a simple average with bands `deviations` population deviations either side. */
+export declare function bollinger(values: Series, period?: number, deviations?: number): BollingerResult;
+/** How far each value sits below the highest so far: 0 at a new high, −0.05 five percent below. */
+export declare function drawdown(values: Series): (number | null)[];
+/** Change from the first present value as a fraction, so series of different sizes compare. */
+export declare function rebase(values: Series): (number | null)[];
+export interface BookLevel {
+    price: number;
+    size: number;
+}
+export interface DepthLevel {
+    price: number;
+    /** Cumulative bid size from the best bid down to this price; null on the ask side. */
+    bid: number | null;
+    /** Cumulative ask size from the best ask up to this price; null on the bid side. */
+    ask: number | null;
+    /** Size resting at exactly this price. */
+    size: number;
+    side: 'bid' | 'ask';
+}
+export interface DepthSummary {
+    /** Every level in ascending price, bids then asks. */
+    levels: DepthLevel[];
+    bestBid: number | null;
+    bestAsk: number | null;
+    mid: number | null;
+    spread: number | null;
+    bidDepth: number;
+    askDepth: number;
+}
+/**
+ * Cumulative depth on each side of the book. Bids accumulate from the best (highest) bid down,
+ * asks from the best (lowest) ask up. Prices at one level merge.
+ */
+export declare function depthLevels(bids: readonly BookLevel[], asks: readonly BookLevel[]): DepthSummary;

package/dist/finance/order-book.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties, ReactElement } from 'react';
+import { ChartMotion, ChartStyle, ChartSurface } from '../types';
+import { BookLevel } from './indicators';
+export interface OrderBookProps {
+    title: string;
+    bids: readonly BookLevel[];
+    asks: readonly BookLevel[];
+    /** Price levels shown on each side of the spread. Defaults to 8. */
+    depth?: number;
+    /** Price format, e.g. `{ style: 'currency', currency: 'USD' }`. */
+    valueFormat?: Intl.NumberFormatOptions;
+    /** Size format. Defaults to compact numbers. */
+    sizeFormat?: Intl.NumberFormatOptions;
+    locale?: string;
+    /** Briefly highlight levels whose size changed. Defaults to true; reduced motion turns it off. */
+    flash?: boolean;
+    surface?: ChartSurface;
+    motion?: ChartMotion;
+    className?: string;
+    style?: CSSProperties | ChartStyle;
+}
+/**
+ * A price ladder: asks above, bids below, a spread row between, and a depth bar behind each
+ * level sized by its running total. It is a real table, so screen readers read it row by row.
+ */
+export declare function OrderBook({ title, bids, asks, depth, valueFormat, sizeFormat, locale, flash, surface, motion, className, style, }: OrderBookProps): ReactElement;

package/dist/finance.d.ts

@@ -0,0 +1,2 @@
+export * from './finance/index'
+export {}