@funnest/charts-react 0.1.1 → 0.2.1

package/dist/viz/annotations.d.ts

@@ -4,21 +4,32 @@ export interface ReferenceLineProps {
     dataY?: number;
     /** Vertical line at this x index (event, earnings date). */
     dataX?: number;
+    /** For `dataY` with several y axes: which axis the value belongs to. */
+    yAxisId?: string;
     label?: string;
     /** Where the label sits along the line. Default 'right' (horizontal) / 'top' (vertical). */
     labelPosition?: 'left' | 'right' | 'center' | 'top' | 'bottom';
+    /** Horizontal lines: label above (default), below or centered on the line. */
+    labelAlign?: 'above' | 'below' | 'center';
+    /** 'text' (default) or 'pill': text on a filled badge in the line color. */
+    labelStyle?: 'text' | 'pill';
+    /** Nudge the label, px. */
+    labelDx?: number;
+    labelDy?: number;
     color?: string;
     /** Dash pattern; '' for a solid line. Default '4 4'. */
     dash?: string;
     strokeWidth?: number;
 }
-export declare function ReferenceLine({ dataY, dataX, label, labelPosition, color, dash, strokeWidth }: ReferenceLineProps): import("react").JSX.Element | null;
+export declare function ReferenceLine({ dataY, dataX, yAxisId, label, labelPosition, labelAlign, labelStyle, labelDx, labelDy, color, dash, strokeWidth, }: ReferenceLineProps): import("react").JSX.Element | null;
 export interface PointProps {
     /** X index. */
     dataX: number;
     /** Value. Omit with `seriesId` to sit on that series. */
     dataY?: number;
     seriesId?: string;
+    /** For `dataY` without `seriesId` and several y axes: the axis of the value. */
+    yAxisId?: string;
     color?: string;
     radius?: number;
     /** Text next to the point (e.g. "매수", "고점 12,400"). */
@@ -29,6 +40,6 @@ export interface PointProps {
     onClick?: () => void;
 }
 /** A marker at a data position: trades on a price line, highs/lows, the latest value. */
-export declare function Point({ dataX, dataY, seriesId, color, radius, label, labelPosition, pulse, onClick }: PointProps): import("react").JSX.Element | null;
+export declare function Point({ dataX, dataY, seriesId, yAxisId, color, radius, label, labelPosition, pulse, onClick }: PointProps): import("react").JSX.Element | null;
 /** Label for a value in the default number format (exported for custom annotations). */
 export declare const formatValue: typeof formatNumber;

package/dist/viz/axes.d.ts

@@ -23,6 +23,8 @@ export declare namespace XAxis {
 export interface YAxisProps {
     /** Right is the trading-chart convention. Default 'right'. */
     position?: 'left' | 'right';
+    /** Which y axis to draw when the chart has several (ids from the `yAxis` array). */
+    axisId?: string;
     /** Space reserved for labels. Default 48. */
     width?: number;
     /** Explicit tick values. Default: nice numbers, about one per 40px. */
@@ -34,7 +36,7 @@ export interface YAxisProps {
     /** Minimum pixels between ticks when picking automatically. Default 32. */
     minTickSpacing?: number;
 }
-export declare function YAxis({ position, width, ticks, tickLabelFormatter, showGrid, showLine, minTickSpacing, }: YAxisProps): import("react").JSX.Element;
+export declare function YAxis({ position, width, ticks, tickLabelFormatter, axisId, showGrid, showLine, minTickSpacing, }: YAxisProps): import("react").JSX.Element;
 export declare namespace YAxis {
     var axisSpace: (p: YAxisProps) => {
         side: "left" | "right";

package/dist/viz/bar.d.ts

@@ -3,8 +3,14 @@ export interface BarPlotProps {
     seriesIds?: readonly string[];
     /** Corner radius at the bar's far end. Default 3. */
     radius?: number;
+    /** Also round the baseline end (pill-shaped bars). Default false. */
+    roundBaseline?: boolean;
     /** Gap between grouped bars in one slot, px. Default 2. */
     groupGap?: number;
+    /** Gap between stacked segments, px. Default 0. */
+    stackGap?: number;
+    /** Smallest drawn bar length for non-zero values, px (tiny values stay visible). Default 0. */
+    minSize?: number;
     /** Per-bar color (e.g. up/down volume). Return undefined to use the series color. */
     getBarColor?: (value: number, index: number, seriesId: string) => string | undefined;
     /** Dim bars other than the scrubbed one. Default true. */
@@ -14,4 +20,4 @@ export interface BarPlotProps {
  * Bars for every series: side by side (grouped) or on top of each other when the chart
  * is `stacked`. Needs `xAxis.scaleType: 'band'` (BarChart sets it).
  */
-export declare function BarPlot({ seriesIds, radius, groupGap, getBarColor, highlightScrubbed }: BarPlotProps): import("react").JSX.Element | null;
+export declare function BarPlot({ seriesIds, radius, roundBaseline, groupGap, stackGap, minSize, getBarColor, highlightScrubbed, }: BarPlotProps): import("react").JSX.Element | null;

package/dist/viz/cartesian-chart.d.ts

@@ -1,6 +1,6 @@
 import { type CSSProperties, type ReactNode } from 'react';
 import { type ChartSeries } from './context';
-import { type LegendPosition } from './legend';
+import { type LegendPosition, type LegendShape } from './legend';
 export type Inset = number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>;
 export interface XAxisConfig {
     /** Labels or timestamps per x position (for axis labels, scrubber and legend). */
@@ -11,6 +11,8 @@ export interface XAxisConfig {
     bandPadding?: number;
 }
 export interface YAxisConfig {
+    /** Axis id for `series[].yAxisId` when `yAxis` is an array. */
+    id?: string;
     /** Fix either end of the value range; the other end follows the data. */
     domain?: {
         min?: number;
@@ -20,6 +22,15 @@ export interface YAxisConfig {
     includeZero?: boolean;
     /** Round the range outward to nice numbers. Default false (use the data range). */
     nice?: boolean;
+    /** 'log' for values spanning orders of magnitude (needs positive values). Default 'linear'. */
+    scaleType?: 'linear' | 'log';
+}
+export interface LegendConfig {
+    /** Default 'top'. */
+    position?: LegendPosition;
+    /** Hover an item to emphasize its series, click to hide/show it. Default false. */
+    interactive?: boolean;
+    shape?: LegendShape;
 }
 export interface CartesianChartProps {
     series: readonly ChartSeries[];
@@ -30,18 +41,29 @@ export interface CartesianChartProps {
     /** Space between the SVG edge and the plot (axes add their own space). Default 8. */
     inset?: Inset;
     xAxis?: XAxisConfig;
-    yAxis?: YAxisConfig;
-    /** Stack the series (areas / bars). */
+    /**
+     * Value axis options. Pass an array for several y axes (e.g. price on the right, volume
+     * on the left) and point series at them with `yAxisId`; render a <YAxis axisId> for each.
+     */
+    yAxis?: YAxisConfig | readonly YAxisConfig[];
+    /** Stack the series (areas / bars), per y axis. */
     stacked?: boolean;
-    /** Track the pointer and expose the hovered index to <Scrubber>, legends and headers. */
+    /**
+     * Track the pointer and expose the hovered index to <Scrubber>, legends and headers.
+     * Also makes the chart focusable: ← → (Shift for 10 steps), Home / End, Esc.
+     */
     enableScrubbing?: boolean;
     onScrubberPositionChange?: (index: number | null) => void;
+    /** Screen-reader text for the scrubbed position. Default: the x label and each series value. */
+    getScrubberAccessibilityLabel?: (index: number) => string;
     /** Draw-in animation on mount. Default true (off when the user prefers reduced motion). */
     animate?: boolean;
     /** Series legend outside the plot. */
-    legend?: boolean | LegendPosition;
+    legend?: boolean | LegendPosition | LegendConfig;
     /** Format legend values while scrubbing. */
     legendValueFormatter?: (value: number, seriesId: string) => string;
+    /** Shown instead of the plot when no series has a value. */
+    emptyState?: ReactNode;
     /** Override the categorical palette. */
     palette?: readonly string[];
     className?: string;
@@ -60,5 +82,5 @@ export interface AxisSpace {
  * themselves as SVG. Compose your own chart from those parts, or use LineChart / AreaChart /
  * BarChart for the common layouts.
  */
-export declare function CartesianChart({ series, width: fixedWidth, height, inset, xAxis, yAxis, stacked, enableScrubbing, onScrubberPositionChange, animate, legend, legendValueFormatter, palette, className, style, 'aria-label': ariaLabel, children, }: CartesianChartProps): import("react").JSX.Element;
+export declare function CartesianChart({ series, width: fixedWidth, height, inset, xAxis, yAxis, stacked, enableScrubbing, onScrubberPositionChange, getScrubberAccessibilityLabel, animate, legend, legendValueFormatter, emptyState, palette, className, style, 'aria-label': ariaLabel, children, }: CartesianChartProps): import("react").JSX.Element;
 export declare const DEFAULT_CHART_HEIGHT = 240;

package/dist/viz/charts.d.ts

@@ -3,7 +3,9 @@ import { type CSSProperties, type ReactNode } from 'react';
 import { type XAxisProps, type YAxisProps } from './axes';
 import { type BarPlotProps } from './bar';
 import { type CartesianChartProps } from './cartesian-chart';
-import { type AreaFill } from './line';
+import { type LineStyle } from './context';
+import { type LegendShape } from './legend';
+import { type AreaFill, type GradientStop, type LineProps, type SplitColors } from './line';
 import { type ScrubberProps } from './scrubber';
 type AxisToggle<P> = boolean | P;
 interface PresetProps extends Omit<CartesianChartProps, 'children'> {
@@ -17,42 +19,84 @@ interface PresetProps extends Omit<CartesianChartProps, 'children'> {
 export interface LineChartProps extends PresetProps {
     curve?: Curve;
     strokeWidth?: number;
+    /** 'solid' (default), 'dashed' or 'dotted' for every line (a series' `lineStyle` wins). */
+    lineStyle?: LineStyle;
     /** Fill under each line. Default 'none'. */
     area?: AreaFill;
     connectNulls?: boolean;
+    /** Dots on the points (see Line `points`). */
+    points?: LineProps['points'];
+    /** Split line and area colors at this value (e.g. the starting price). */
+    baseline?: number;
+    /** With `baseline`: colors above / below. Default red / blue (Korean up / down). */
+    splitColors?: SplitColors;
 }
 /**
  * Lines for every series. With no axes it is a sparkline:
  * `<LineChart series={[{ id: 'p', data }]} height={40} inset={2} />`.
  */
-export declare function LineChart({ showXAxis, showYAxis, scrubber, curve, strokeWidth, area, connectNulls, children, ...chart }: LineChartProps): import("react").JSX.Element;
+export declare function LineChart({ showXAxis, showYAxis, scrubber, curve, strokeWidth, lineStyle, area, connectNulls, points, baseline, splitColors, children, ...chart }: LineChartProps): import("react").JSX.Element;
 export interface AreaChartProps extends PresetProps {
     curve?: Curve;
+    /** 'gradient' (default), 'solid' or 'dotted'. A series' `areaStyle` wins. */
     fill?: Exclude<AreaFill, 'none'>;
     /** Draw the top edge line. Default true. */
     showLines?: boolean;
     strokeWidth?: number;
+    lineStyle?: LineStyle;
+    /** Fill toward this value instead of 0 (e.g. the starting price). */
+    baseline?: number;
+    /** With `baseline`: colors above / below. */
+    splitColors?: SplitColors;
+    /** Custom gradient stops (offset 0 = line, 1 = baseline). */
+    gradientStops?: readonly GradientStop[];
+    fillOpacity?: number;
 }
 /** Filled areas; set `stacked` for a composition over time (e.g. portfolio by asset). */
-export declare function AreaChart({ showXAxis, showYAxis, scrubber, curve, fill, showLines, strokeWidth, children, ...chart }: AreaChartProps): import("react").JSX.Element;
-export interface BarChartProps extends PresetProps, Pick<BarPlotProps, 'radius' | 'getBarColor' | 'groupGap'> {
+export declare function AreaChart({ showXAxis, showYAxis, scrubber, curve, fill, showLines, strokeWidth, lineStyle, baseline, splitColors, gradientStops, fillOpacity, children, ...chart }: AreaChartProps): import("react").JSX.Element;
+export interface BarChartProps extends PresetProps, Pick<BarPlotProps, 'radius' | 'getBarColor' | 'groupGap' | 'stackGap' | 'roundBaseline'> {
+    /** Smallest drawn bar length for non-zero values, px. */
+    barMinSize?: number;
+    /**
+     * 'vertical' (default) bars grow up from the x axis; 'horizontal' bars run left → right,
+     * one row per `xAxis.data` category (rankings, holdings, sector P&L).
+     */
+    layout?: 'vertical' | 'horizontal';
 }
 /** Grouped (or `stacked`) bars on a categorical x axis. Hover highlights a bar when `scrubber`. */
-export declare function BarChart({ showXAxis, showYAxis, scrubber, radius, getBarColor, groupGap, xAxis, children, ...chart }: BarChartProps): import("react").JSX.Element;
+export declare function BarChart({ showXAxis, showYAxis, scrubber, radius, getBarColor, groupGap, stackGap, roundBaseline, barMinSize, layout, xAxis, children, ...chart }: BarChartProps): import("react").JSX.Element;
 export interface PercentageBarItem {
     id: string;
     label: string;
     value: number;
     color?: string;
 }
-export interface PercentageBarChartProps {
+export interface PercentageBarRow {
+    id: string;
+    /** Shown beside the bar (e.g. account name, date). */
+    label?: string;
     data: readonly PercentageBarItem[];
-    /** Bar thickness. Default 10. */
+}
+export interface PercentageBarChartProps {
+    /** One bar. Use `rows` for several bars that share a legend. */
+    data?: readonly PercentageBarItem[];
+    /** Several bars compared row by row (items are matched by `id`, so colors stay consistent). */
+    rows?: readonly PercentageBarRow[];
+    /** 'horizontal' (default) or 'vertical' (columns that fill bottom → top). */
+    layout?: 'horizontal' | 'vertical';
+    /** Bar thickness. Default 10 (horizontal), 28 (vertical). */
     barHeight?: number;
+    /** Bar length for `layout: 'vertical'`, px. Default 160. */
+    barLength?: number;
     /** Gap between segments, px. Default 2. */
     gap?: number;
-    /** Labels with percentages under the bar. Default true. */
+    /** Corner radius of the bar ends. Default barHeight / 2 (fully round) horizontally, 6 vertically. */
+    radius?: number;
+    /** Labels with percentages. Default true. */
     showLabels?: boolean;
+    /** Where the labels go. Default 'bottom' ('right' for vertical). */
+    legendPosition?: 'top' | 'bottom' | 'right';
+    legendShape?: LegendShape;
     /** Format the label value. Default: "62.5%". */
     formatLabel?: (item: PercentageBarItem, fraction: number) => string;
     palette?: readonly string[];
@@ -61,8 +105,8 @@ export interface PercentageBarChartProps {
     'aria-label'?: string;
 }
 /**
- * One horizontal bar split into shares: portfolio weights, buy/sell pressure,
- * long/short ratio.
+ * A bar split into shares: portfolio weights, buy/sell pressure, long/short ratio.
+ * `rows` compares several (accounts, months) with one shared legend; `layout: 'vertical'` stands them up.
  */
-export declare function PercentageBarChart({ data, barHeight, gap, showLabels, formatLabel, palette, className, style, 'aria-label': ariaLabel, }: PercentageBarChartProps): import("react").JSX.Element;
+export declare function PercentageBarChart({ data, rows, layout, barHeight, barLength, gap, radius, showLabels, legendPosition, legendShape, formatLabel, palette, className, style, 'aria-label': ariaLabel, }: PercentageBarChartProps): import("react").JSX.Element;
 export {};

package/dist/viz/context.d.ts

@@ -1,16 +1,33 @@
-import type { BandScale, LinearScale, StackedSeries } from '@funnest/charts-viz';
+import type { BandScale, StackedSeries, ValueScale } from '@funnest/charts-viz';
+/** A low–high pair: confidence bands, high/low bars. */
+export type RangeValue = readonly [number, number];
 export interface ChartSeries {
     id: string;
-    /** Values per x position; null = gap. */
-    data: readonly (number | null)[];
+    /** Values per x position; null = gap; `[low, high]` for a range (band / floating bar). */
+    data: readonly (number | null | RangeValue)[];
+    /** Which y axis this series uses (see `yAxis` as an array). Default: the first axis. */
+    yAxisId?: string;
     label?: string;
     /** Any CSS color. Defaults to the palette. */
     color?: string;
+    /** Line style for this series (overrides the chart's). */
+    lineStyle?: LineStyle;
+    /** Area fill for this series in AreaChart / LineChart `area` (overrides the chart's). */
+    areaStyle?: 'gradient' | 'solid' | 'dotted' | 'none';
 }
-/** A series with its resolved color. */
-export interface ResolvedSeries extends ChartSeries {
+export type LineStyle = 'solid' | 'dashed' | 'dotted';
+/** A series ready to draw: resolved color, its value scale, ranges split into low/high. */
+export interface ResolvedSeries extends Omit<ChartSeries, 'data'> {
+    /** Values (the high end for ranges); null = gap. */
+    data: readonly (number | null)[];
+    /** Low ends when the series has ranges, else null. */
+    low: readonly (number | null)[] | null;
     color: string;
     index: number;
+    /** Another series is emphasized (legend hover): draw this one faded. */
+    dimmed: boolean;
+    /** The value scale of this series' y axis. */
+    scale: ValueScale;
 }
 export interface PlotRect {
     left: number;
@@ -34,16 +51,30 @@ export interface CartesianContextValue {
     x(i: number): number;
     /** Set when the x axis is categorical (bar charts). */
     band: BandScale | null;
-    y: LinearScale;
+    /** Value scale of the first (default) y axis. */
+    y: ValueScale;
+    /** Every y axis' scale by id. */
+    yScales: Readonly<Record<string, ValueScale>>;
     /** Stacked edges per series id when `stacked`. */
     stacked: Map<string, StackedSeries> | null;
     /** Label for x position `i` (from `xAxis.data`, else the index). */
     xLabel(i: number): string;
     xData: readonly (string | number)[] | undefined;
-    /** Index under the pointer, or null. */
+    /** Index under the pointer (or chosen with the arrow keys), or null. */
     scrubIndex: number | null;
+    /** The chart has keyboard focus (scrubbing with arrow keys). */
+    focused: boolean;
     animate: boolean;
+    /**
+     * `mask` value for series marks while a Scrubber dims the future (right of the pointer);
+     * undefined otherwise. Lines and areas apply it, so the fade works on any background.
+     */
+    futureMask: string | undefined;
+    /** Scrubber turns future dimming on/off. */
+    setDimFuture(on: boolean): void;
 }
+/** Hide labels the scrubber line would run through. */
+export declare const nearScrub: (ctx: CartesianContextValue, x: number, within?: number) => boolean;
 export declare const CartesianContext: import("react").Context<CartesianContextValue | null>;
 export declare function useCartesianChart(): CartesianContextValue;
 /**
@@ -58,8 +89,15 @@ export declare const VAR: {
     readonly line: 'var(--fnv-line, color-mix(in srgb, CanvasText 32%, transparent))';
     readonly bg: 'var(--fnv-bg, Canvas)';
     readonly font: 'var(--fnv-font, inherit)';
+    readonly accentRing: 'color-mix(in srgb, var(--fnv-accent, #6C4DFF) 55%, transparent)';
 };
+/** Opacity for series faded by legend emphasis. */
+export declare const DIM_OPACITY = 0.22;
+/** Stroke dash pattern for a line style (dotted uses round caps on zero-length dashes). */
+export declare const dashFor: (style: LineStyle | undefined, width: number) => string | undefined;
 /** Default number display: full digits up to 100k, compact (1.2M, 34만) beyond. */
 export declare const formatNumber: (v: number) => string;
 /** Pixel y of series `s` at index `i` (top edge when stacked), or null for a gap. */
 export declare function seriesY(ctx: CartesianContextValue, s: ResolvedSeries, i: number): number | null;
+/** Scale for an axis id (falls back to the first axis). */
+export declare const scaleFor: (ctx: CartesianContextValue, axisId?: string) => ValueScale;

package/dist/viz/horizontal-bar.d.ts

@@ -0,0 +1,37 @@
+import { type CSSProperties } from 'react';
+import { type ChartSeries } from './context';
+import { type LegendShape } from './legend';
+export interface HorizontalBarChartProps {
+    series: readonly ChartSeries[];
+    /** Category labels, one per row (top to bottom). */
+    categories?: readonly string[];
+    width?: number;
+    /** Default: 34px per row plus the axis. */
+    height?: number;
+    stacked?: boolean;
+    /** Corner radius at the bar's far end. Default 3. */
+    radius?: number;
+    /** Gap between grouped bars in one row, px. Default 2. */
+    groupGap?: number;
+    /** Gap between stacked segments, px. Default 0. */
+    stackGap?: number;
+    /** Band padding between rows, 0–0.95. Default 0.3. */
+    bandPadding?: number;
+    getBarColor?: (value: number, index: number, seriesId: string) => string | undefined;
+    /** Value axis along the bottom. Default true. */
+    showValueAxis?: boolean;
+    /** Category labels on the left. Default true. */
+    showCategoryAxis?: boolean;
+    valueFormatter?: (value: number) => string;
+    /** Highlight the hovered row and show its values. Default true. */
+    enableScrubbing?: boolean;
+    legend?: boolean | {
+        shape?: LegendShape;
+    };
+    palette?: readonly string[];
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+/** Bars running left → right, one row per category: rankings, holdings, sector P&L. */
+export declare function HorizontalBarChart({ series, categories, width: fixedWidth, height, stacked, radius, groupGap, stackGap, bandPadding, getBarColor, showValueAxis, showCategoryAxis, valueFormatter, enableScrubbing, legend, palette, className, style, 'aria-label': ariaLabel, }: HorizontalBarChartProps): import("react").JSX.Element;

package/dist/viz/index.d.ts

@@ -1,10 +1,11 @@
-export { CartesianChart, type CartesianChartProps, type XAxisConfig, type YAxisConfig, type Inset } from './cartesian-chart';
+export { CartesianChart, type CartesianChartProps, type XAxisConfig, type YAxisConfig, type LegendConfig, type Inset } from './cartesian-chart';
 export { XAxis, YAxis, type XAxisProps, type YAxisProps } from './axes';
-export { Line, Area, type LineProps, type AreaProps, type AreaFill } from './line';
+export { Line, Area, type LineProps, type AreaProps, type AreaFill, type LinePoint, type SplitColors, type GradientStop } from './line';
 export { BarPlot, type BarPlotProps } from './bar';
+export { HorizontalBarChart, type HorizontalBarChartProps } from './horizontal-bar';
 export { Scrubber, type ScrubberProps } from './scrubber';
 export { ReferenceLine, Point, type ReferenceLineProps, type PointProps } from './annotations';
-export { Legend, type LegendProps, type LegendItem, type LegendPosition } from './legend';
-export { PeriodSelector, DEFAULT_PERIODS, type PeriodSelectorProps, type Period } from './period-selector';
-export { LineChart, AreaChart, BarChart, PercentageBarChart, type LineChartProps, type AreaChartProps, type BarChartProps, type PercentageBarChartProps, type PercentageBarItem, } from './charts';
-export { useCartesianChart, formatNumber, type ChartSeries, type CartesianContextValue, type PlotRect } from './context';
+export { Legend, type LegendProps, type LegendItem, type LegendPosition, type LegendShape } from './legend';
+export { PeriodSelector, LiveTabLabel, DEFAULT_PERIODS, type PeriodSelectorProps, type Period } from './period-selector';
+export { LineChart, AreaChart, BarChart, PercentageBarChart, type LineChartProps, type AreaChartProps, type BarChartProps, type PercentageBarChartProps, type PercentageBarItem, type PercentageBarRow, } from './charts';
+export { useCartesianChart, formatNumber, type ChartSeries, type RangeValue, type LineStyle, type CartesianContextValue, type PlotRect } from './context';

package/dist/viz/legend.d.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties } from 'react';
-export type LegendPosition = 'top' | 'bottom';
+export type LegendPosition = 'top' | 'bottom' | 'left' | 'right';
+export type LegendShape = 'circle' | 'square' | 'squircle' | 'pill' | 'line';
 export interface LegendItem {
     id: string;
     label: string;
@@ -15,10 +16,14 @@ export interface LegendProps {
     onItemClick?: (id: string) => void;
     /** Pointer enters (id) or leaves (null) an item — e.g. to highlight that series. */
     onItemHover?: (id: string | null) => void;
-    /** 'circle' (default), 'square' or 'line' swatches. */
-    shape?: 'circle' | 'square' | 'line';
+    /** Swatch: 'circle' (default), 'square', 'squircle', 'pill' or 'line'. */
+    shape?: LegendShape;
+    /** 'row' wraps items across (default); 'column' stacks them (side legends). */
+    direction?: 'row' | 'column';
+    /** Alignment of the items. Default 'flex-start'. */
+    justify?: CSSProperties['justifyContent'];
     className?: string;
     style?: CSSProperties;
 }
 /** Series key, HTML (not SVG) so it wraps and stays readable at any width. */
-export declare function Legend({ items, onItemClick, onItemHover, shape, className, style }: LegendProps): import("react").JSX.Element;
+export declare function Legend({ items, onItemClick, onItemHover, shape, direction, justify, className, style }: LegendProps): import("react").JSX.Element;

package/dist/viz/line.d.ts

@@ -1,7 +1,21 @@
 import { type Curve, type XY } from '@funnest/charts-viz';
-import { type CartesianContextValue, type ResolvedSeries } from './context';
-export type AreaFill = 'gradient' | 'solid' | 'none';
-/** Pixel points of a series split at gaps (or joined across them with `connectNulls`). */
+import { type CartesianContextValue, type LineStyle, type ResolvedSeries } from './context';
+export type AreaFill = 'gradient' | 'solid' | 'dotted' | 'none';
+/** Colors above and below a `baseline` (e.g. red over the starting price, blue under it). */
+export interface SplitColors {
+    above: string;
+    below: string;
+}
+/** A gradient stop for areas: `offset` 0 at the line, 1 at the baseline. */
+export interface GradientStop {
+    offset: number;
+    opacity: number;
+    color?: string;
+}
+/**
+ * Pixel points of a series split at gaps (or joined across them with `connectNulls`).
+ * `lower` is the bottom edge for stacked series and for ranges ([low, high] bands).
+ */
 export declare function seriesRuns(ctx: CartesianContextValue, s: ResolvedSeries, connectNulls?: boolean): {
     upper: XY[];
     lower: {
@@ -12,18 +26,34 @@ export declare function seriesRuns(ctx: CartesianContextValue, s: ResolvedSeries
 export interface AreaProps {
     seriesId: string;
     curve?: Curve;
+    /** 'gradient' (default), 'solid' or 'dotted' (dot pattern). */
     fill?: Exclude<AreaFill, 'none'>;
-    /** Fill opacity at the line (gradient fades to 0). Default 0.24 (solid 0.16). */
+    /** Fill opacity at the line (gradient fades to 0). Default 0.24 (solid 0.16, dotted 0.5). */
     opacity?: number;
     connectNulls?: boolean;
+    /** Fill toward this value instead of 0 / the plot bottom (e.g. the starting price). */
+    baseline?: number;
+    /** With `baseline`: color the area above / below it differently. */
+    splitColors?: SplitColors;
+    /** Custom gradient stops (offset 0 = line, 1 = baseline). */
+    gradientStops?: readonly GradientStop[];
 }
 /** Filled area under a series (between stacked edges when the chart is stacked). */
-export declare function Area({ seriesId, curve, fill, opacity, connectNulls }: AreaProps): import("react").JSX.Element | null;
+export declare function Area({ seriesId, curve, fill, opacity, connectNulls, baseline, splitColors, gradientStops }: AreaProps): import("react").JSX.Element | null;
+/** What a single point looks like; return `false`/`null` from `points` to skip one. */
+export interface LinePoint {
+    radius?: number;
+    color?: string;
+    label?: string;
+    labelPosition?: 'top' | 'bottom';
+}
 export interface LineProps {
     seriesId: string;
     curve?: Curve;
     strokeWidth?: number;
-    /** Dashed line, e.g. "4 4". */
+    /** 'solid' (default), 'dashed' or 'dotted'. Falls back to the series' `lineStyle`. */
+    lineStyle?: LineStyle;
+    /** Custom dash pattern, e.g. "4 4" (overrides `lineStyle`). */
     dash?: string;
     /** Draw across null gaps instead of breaking. */
     connectNulls?: boolean;
@@ -31,5 +61,14 @@ export interface LineProps {
     area?: AreaFill;
     areaOpacity?: number;
     opacity?: number;
+    /**
+     * Dots on the data points: `true` for every point, or a function returning the look of
+     * point `index` (or false to skip it) — e.g. label only the high and the low.
+     */
+    points?: boolean | ((index: number, value: number) => LinePoint | boolean | null | undefined);
+    /** Split the line (and area) color at this value, e.g. the starting price. */
+    baseline?: number;
+    /** With `baseline`: colors above / below it. */
+    splitColors?: SplitColors;
 }
-export declare function Line({ seriesId, curve, strokeWidth, dash, connectNulls, area, areaOpacity, opacity, }: LineProps): import("react").JSX.Element | null;
+export declare function Line({ seriesId, curve, strokeWidth, lineStyle, dash, connectNulls, area, areaOpacity, opacity, points, baseline, splitColors, }: LineProps): import("react").JSX.Element | null;

package/dist/viz/period-selector.d.ts

@@ -2,7 +2,14 @@ import { type CSSProperties } from 'react';
 export interface Period {
     id: string;
     label: string;
+    /** A live tab: a pulsing dot next to the label, and the live color when selected. */
+    live?: boolean;
 }
+/** A label with a pulsing "live" dot (used by live periods; usable on its own too). */
+export declare function LiveTabLabel({ label, color }: {
+    label: string;
+    color?: string;
+}): import("react").JSX.Element;
 /** Common ranges for price charts. */
 export declare const DEFAULT_PERIODS: readonly Period[];
 export interface PeriodSelectorProps {
@@ -11,6 +18,8 @@ export interface PeriodSelectorProps {
     onChange: (id: string) => void;
     /** Active pill color. Default Funnest violet (set --fnv-accent to theme). */
     activeColor?: string;
+    /** Pill color while a live period is selected. Default red. */
+    liveColor?: string;
     /** Stretch the tabs across the full width (mobile). */
     fullWidth?: boolean;
     className?: string;
@@ -18,4 +27,4 @@ export interface PeriodSelectorProps {
     'aria-label'?: string;
 }
 /** Range tabs (1D 1W 1M …) with a sliding pill; arrow keys move between tabs. */
-export declare function PeriodSelector({ periods, value, onChange, activeColor, fullWidth, className, style, 'aria-label': ariaLabel, }: PeriodSelectorProps): import("react").JSX.Element;
+export declare function PeriodSelector({ periods, value, onChange, activeColor, liveColor, fullWidth, className, style, 'aria-label': ariaLabel, }: PeriodSelectorProps): import("react").JSX.Element;

package/dist/viz/scrubber.d.ts

@@ -5,6 +5,14 @@ export interface ScrubberProps {
     seriesIds?: readonly string[];
     /** Dim the part of each line right of the scrubber. Default true. */
     dimFuture?: boolean;
+    /** Same as `dimFuture={false}`. */
+    hideOverlay?: boolean;
+    /** While idle (not scrubbing), pulse a beacon on each series' latest point. */
+    idlePulse?: boolean;
+    /** Value labels beside each beacon (true, or a formatter). Default false. */
+    beaconLabels?: boolean | ((value: number, seriesId: string) => string);
+    /** Beacon color per value (e.g. up/down around a baseline). Default: the series color. */
+    beaconColor?: (value: number, seriesId: string) => string;
     /** Tooltip with each series' value at the scrubbed index. Default false. */
     showValues?: boolean;
     /** Format tooltip values. */
@@ -15,4 +23,4 @@ export interface ScrubberProps {
  * `enableScrubbing` on the chart. Read the index yourself with `onScrubberPositionChange`
  * to drive a header (price / change at that point).
  */
-export declare function Scrubber({ label, seriesIds, dimFuture, showValues, valueFormatter }: ScrubberProps): import("react").JSX.Element | null;
+export declare function Scrubber({ label, seriesIds, dimFuture, hideOverlay, idlePulse, beaconLabels, beaconColor, showValues, valueFormatter, }: ScrubberProps): import("react").JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-react",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "React bindings for Funnest Charts: the trading widget plus SVG line, area and bar charts",
   "keywords": [
     "react",
@@ -46,9 +46,9 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@funnest/charts": "0.1.1",
-    "@funnest/charts-ui": "0.1.1",
-    "@funnest/charts-viz": "0.1.1"
+    "@funnest/charts": "0.2.1",
+    "@funnest/charts-viz": "0.2.1",
+    "@funnest/charts-ui": "0.2.1"
   },
   "peerDependencies": {
     "react": ">=18",