@mmflow/charts 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,1617 @@
+import REGL from 'regl';
+
+type EngineEvent = {
+    type: "viewport:changed";
+} | {
+    type: "data:updated";
+    series: string;
+} | {
+    type: "crosshair:hover";
+    timeIdx: number | null;
+    px: number;
+    py: number;
+} | {
+    type: "crosshair:leave";
+} | {
+    type: "theme:changed";
+};
+type Listener = (e: EngineEvent) => void;
+declare class EventBus {
+    private readonly listeners;
+    on(fn: Listener): () => void;
+    emit(e: EngineEvent): void;
+    clear(): void;
+}
+
+interface OhlcvBuffer {
+    time: Float64Array;
+    open: Float64Array;
+    high: Float64Array;
+    low: Float64Array;
+    close: Float64Array;
+    volume: Float64Array;
+    length: number;
+    capacity: number;
+}
+interface OhlcvColumns {
+    time: ArrayLike<number>;
+    open: ArrayLike<number>;
+    high: ArrayLike<number>;
+    low: ArrayLike<number>;
+    close: ArrayLike<number>;
+    volume: ArrayLike<number>;
+    /** Valid row count. Defaults to the shortest supplied column length. */
+    length?: number;
+}
+declare class DataStore {
+    private readonly bus;
+    private candles_;
+    private ready_;
+    constructor(bus: EventBus);
+    get candles(): OhlcvBuffer;
+    get ready(): boolean;
+    setCandles(rows: ReadonlyArray<{
+        t: number;
+        o: number;
+        h: number;
+        l: number;
+        c: number;
+        v: number;
+    }> | OhlcvColumns): void;
+    setCandleColumns(columns: OhlcvColumns): void;
+    applyTrade(bucketStart: number, price: number, size: number): boolean;
+    clear(): void;
+    priceExtent(tStart: number, tEnd: number): [number, number] | null;
+    barIndexContaining(t: number): number;
+    barTimeContaining(t: number): number | null;
+    firstIndexAtOrAfter(t: number): number;
+    requestRange(coin: string, interval: string, startTime: number, endTime: number, signal?: AbortSignal, fetcher?: RangeFetcher): Promise<boolean>;
+}
+interface RawCandleRow {
+    t: number;
+    o: string | number;
+    h: string | number;
+    l: string | number;
+    c: string | number;
+    v: string | number;
+}
+interface RangeFetchRequest {
+    coin: string;
+    interval: string;
+    startTime: number;
+    endTime: number;
+    signal?: AbortSignal;
+}
+type RangeFetcher = (req: RangeFetchRequest) => Promise<ReadonlyArray<RawCandleRow>>;
+
+interface RendererGLOptions {
+    canvas: HTMLCanvasElement;
+    onContextLost?: () => void;
+    onContextRestored?: () => void;
+}
+declare class RendererGL {
+    readonly regl: REGL.Regl;
+    private readonly canvas;
+    private readonly handleLost;
+    private readonly handleRestored;
+    private disposed;
+    constructor(opts: RendererGLOptions);
+    resize(cssW: number, cssH: number, dpr: number): void;
+    clear(color: [number, number, number, number]): void;
+    dispose(): void;
+}
+
+interface Padding {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+declare class Viewport {
+    private readonly bus;
+    width: number;
+    height: number;
+    dpr: number;
+    padding: Padding;
+    private t0;
+    private t1;
+    private p0;
+    private p1;
+    static readonly MIN_TIME_SPAN_MS = 100;
+    static readonly MIN_PRICE_SPAN_FRACTION = 1e-9;
+    priceAutoFit: boolean;
+    constructor(bus: EventBus);
+    setSize(cssWidth: number, cssHeight: number, dpr: number): void;
+    get plot(): {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    setTimeRange(t0: number, t1: number): void;
+    setPriceRange(p0: number, p1: number, userInitiated?: boolean): void;
+    get timeRange(): [number, number];
+    get priceRange(): [number, number];
+    timeToX(t: number): number;
+    xToTime(x: number): number;
+    priceToY(p: number): number;
+    yToPrice(y: number): number;
+    timeToClipX(t: number): number;
+    priceToClipY(p: number): number;
+    pxXToClipX(cssX: number): number;
+    pxYToClipY(cssY: number): number;
+    pxWidthToClip(cssW: number): number;
+    pxHeightToClip(cssH: number): number;
+    get plotCss(): {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    panPixels(dxCss: number, dyCss: number): void;
+    zoomTimeAt(cssX: number, factor: number): void;
+    zoomPriceAt(cssY: number, factor: number): void;
+    resetPriceAutoFit(): void;
+}
+
+interface ChartTheme {
+    background: [number, number, number, number];
+    text: [number, number, number, number];
+    textDim: [number, number, number, number];
+    grid: [number, number, number, number];
+    gridVert: [number, number, number, number];
+    border: [number, number, number, number];
+    candleUp: [number, number, number, number];
+    candleDown: [number, number, number, number];
+    volUp: [number, number, number, number];
+    volDown: [number, number, number, number];
+    crosshair: [number, number, number, number];
+    crosshairLabelBg: [number, number, number, number];
+    crosshairLabelText: [number, number, number, number];
+    fontFamily: string;
+}
+type RGBA = [number, number, number, number];
+type RGB$1 = [number, number, number];
+type CandleColorThemeKey = "mmflow" | "percept" | "classic" | "sourgum" | "carbon";
+interface CandleColorThemeOption {
+    key: CandleColorThemeKey;
+    label: string;
+    upHex: string;
+    downHex: string;
+}
+declare const DEFAULT_CANDLE_COLOR_THEME: CandleColorThemeKey;
+declare const CANDLE_COLOR_THEMES: CandleColorThemeOption[];
+declare const isCandleColorThemeKey: (value: string | null | undefined) => value is CandleColorThemeKey;
+declare const darkTheme: (candleColorTheme?: CandleColorThemeKey) => ChartTheme;
+declare const CHART_COLORS: {
+    sma: RGBA;
+    ema: RGBA;
+    vwap: RGBA;
+    rsi: RGBA;
+    rsiThreshold: RGBA;
+    openInterest: RGBA;
+    whaleBuy: RGBA;
+    whaleSell: RGBA;
+    liqLong: RGBA;
+    liqShort: RGBA;
+    vpPoc: RGBA;
+    vpValueArea: RGBA;
+    volumeBars: RGBA;
+    volumeProfile: RGBA;
+    footprint: RGBA;
+    obh: RGBA;
+    keyLevels: RGBA;
+    liqLevels: RGBA;
+    gex: RGBA;
+};
+type ChartColorKey = keyof typeof CHART_COLORS;
+declare const swatchOf: (key: ChartColorKey) => RGB$1;
+
+interface GlyphInfo {
+    u0: number;
+    v0: number;
+    u1: number;
+    v1: number;
+    width: number;
+    height: number;
+    advance: number;
+}
+interface GlyphAtlasOptions {
+    fontSize: number;
+    fontFamily?: string;
+    lineHeight?: number;
+    chars?: string;
+}
+declare class GlyphAtlas {
+    readonly fontSize: number;
+    readonly fontFamily: string;
+    readonly lineHeight: number;
+    readonly chars: string;
+    private readonly glyphs;
+    texture: REGL.Texture2D | null;
+    atlasWidth: number;
+    atlasHeight: number;
+    private builtAtPixelRatio;
+    constructor(opts: GlyphAtlasOptions);
+    glyph(ch: string): GlyphInfo | undefined;
+    build(regl: REGL.Regl, pixelRatio?: number): void;
+    measure(s: string): number;
+    get pixelRatio(): number;
+    dispose(): void;
+    private destroyTexture;
+}
+
+interface LayerStats {
+    /** Median paint time in milliseconds. */
+    p50: number;
+    /** 95th-percentile paint time in milliseconds. */
+    p95: number;
+    /** Number of samples held in the ring buffer. */
+    count: number;
+}
+declare class PerfReporter {
+    private readonly windowSize;
+    private readonly samples;
+    constructor(windowSize?: number);
+    /**
+     * Record one paint-time sample for a layer. Called from
+     * Pane.paint / Scene.paint inside the per-layer try block;
+     * no-op if the layer is hidden because paint never ran.
+     */
+    record(layerId: string, paintMs: number): void;
+    /**
+     * Snapshot of the current per-layer stats. The returned Map's
+     * iteration order is the insertion order — typically matches
+     * the layer paint order (BackgroundLayer → CandleLayer → …)
+     * which is what the overlay wants to display.
+     */
+    getAllStats(): Map<string, LayerStats>;
+    /**
+     * Clear all samples — handy if the dev overlay is being
+     * re-armed mid-session and the user wants a fresh baseline.
+     */
+    reset(): void;
+}
+
+interface RenderContext {
+    regl: REGL.Regl;
+    viewport: Viewport;
+    theme: ChartTheme;
+    glyphAtlas: GlyphAtlas;
+    /**
+     * Optional dev-only sampler. When present, Pane.paint and
+     * Scene.paint wrap each layer's paint call with
+     * `performance.now()` bookends and feed the delta to the
+     * reporter. The `?perf=1` URL param activates it in dev
+     * builds; production renders never construct one.
+     */
+    perfReporter?: PerfReporter;
+}
+interface Layer {
+    readonly id: string;
+    dirty: boolean;
+    /**
+     * When `false`, Pane.paint and Scene.paint skip this layer — its
+     * `dirty` flag still clears so a later visibility toggle paints a
+     * single frame instead of replaying every queued dirty since the
+     * layer went dark. `undefined` is treated as visible (default-on)
+     * so existing layers don't need to set this field.
+     *
+     * The flag is mutated by the host (ChartEngine) in response to
+     * IndicatorPicker toggles, with a `scene.markAllDirty()` so the
+     * next rAF paints the new visibility state.
+     */
+    visible?: boolean;
+    paint(ctx: RenderContext): void;
+    onContextLost?(): void;
+    dispose?(): void;
+}
+
+interface PaneBounds {
+    yStartFraction: number;
+    yEndFraction: number;
+}
+interface PanePadding {
+    top: number;
+    bottom: number;
+}
+declare class Pane {
+    readonly id: string;
+    readonly viewport: Viewport;
+    readonly layers: Layer[];
+    bounds: PaneBounds;
+    paddingInternal: PanePadding;
+    priceInteractive: boolean;
+    /**
+     * Whether the pane participates in painting. Defaults true.
+     *
+     * When set to `false`, `Scene.paint` skips the pane entirely —
+     * no scissor region is allocated, none of its layers run paint,
+     * and the slice it would have occupied is unavailable to layers
+     * in other panes (the host re-distributes bounds across the
+     * remaining visible panes via Scene.relayout).
+     *
+     * Unlike `Layer.visible`, this is NOT consulted by paint loops
+     * inside the pane itself — Scene gates entry. Toggling this
+     * field requires the host to also recompute bounds + call
+     * `Scene.relayout()` so the remaining panes claim the freed
+     * space, otherwise the hidden pane leaves a blank stripe.
+     */
+    visible: boolean;
+    constructor(id: string, bus: EventBus, bounds: PaneBounds, paddingInternal?: PanePadding);
+    addLayer(layer: Layer): void;
+    removeLayer(id: string): void;
+    layout(cssWidth: number, cssHeight: number, dpr: number, globalPadding: {
+        top: number;
+        bottom: number;
+    }): void;
+    markAllDirty(): void;
+    notifyContextLost(): void;
+    paint(buildCtx: (viewport: Viewport) => RenderContext): void;
+    get hasDirtyLayer(): boolean;
+    dispose(): void;
+}
+
+interface ScenePadding {
+    top: number;
+    bottom: number;
+}
+declare class Scene {
+    private readonly renderer;
+    private readonly theme;
+    private readonly bus;
+    private readonly glyphAtlas;
+    private readonly panes;
+    private readonly globalLayers;
+    private raf;
+    private viewportDirty;
+    private detachBus;
+    private running;
+    private frameErrors;
+    private cssWidth;
+    private cssHeight;
+    private dpr;
+    private perfReporter;
+    globalPadding: ScenePadding;
+    constructor(renderer: RendererGL, theme: () => ChartTheme, bus: EventBus, glyphAtlas: GlyphAtlas);
+    addPane(pane: Pane): void;
+    addGlobalLayer(layer: Layer): void;
+    removePane(id: string): void;
+    getPane(id: string): Pane | undefined;
+    primary(): Pane | undefined;
+    bottom(): Pane | undefined;
+    setSize(cssWidth: number, cssHeight: number, dpr: number): void;
+    panTimePixels(dxCss: number): void;
+    zoomTimeAt(cssX: number, factor: number): void;
+    setTimeRange(t0: number, t1: number): void;
+    paneAt(cssY: number): Pane | undefined;
+    markAllDirty(): void;
+    /**
+     * Re-run the per-pane layout pass using the Scene's current size +
+     * DPR. The host calls this after mutating any pane's `bounds`
+     * (e.g. when redistributing space across remaining visible panes
+     * after a sub-pane toggle) so the viewport padding picks up the
+     * new slice. Doesn't call `markAllDirty()` itself — the host can
+     * batch a single dirty pass after multiple bound mutations.
+     *
+     * No-op when the Scene hasn't been sized yet (pre-first-frame);
+     * the next `setSize` call will pick up the new bounds naturally.
+     */
+    relayout(): void;
+    /**
+     * Attach a dev-only paint-time sampler. Pass `null` to detach.
+     * The reporter is threaded through the RenderContext built for
+     * each pane + global layer, where Pane.paint and Scene.paint
+     * wrap individual layer paints with `performance.now()` bookends
+     * when present. Cost when null: a single `?? undefined` per
+     * frame in the buildCtx call.
+     */
+    setPerfReporter(reporter: PerfReporter | null): void;
+    notifyContextLost(): void;
+    start(): void;
+    stop(): void;
+    private frame;
+    dispose(): void;
+}
+
+type Anchor = "left" | "center" | "right";
+declare class TextBatch {
+    private readonly atlas;
+    private cmd;
+    private cornerBuf;
+    private rectBuf;
+    private uvBuf;
+    private colorBuf;
+    private rect;
+    private uv;
+    private color;
+    private count;
+    constructor(atlas: GlyphAtlas);
+    reset(): void;
+    addLabel(s: string, cssX: number, cssY: number, color: [number, number, number, number], viewport: Viewport, anchor?: Anchor, scale?: number): void;
+    flush(regl: REGL.Regl): void;
+    onContextLost(): void;
+    dispose(): void;
+    private ensureCapacity;
+    private compile;
+}
+
+declare const RGB: {
+    readonly surface: "15,17,23";
+    readonly line: "35,39,51";
+    readonly dim: "138,143,156";
+    readonly value: "205,210,220";
+    readonly black: "0,0,0";
+    readonly up: "30,199,122";
+};
+declare const alpha: (rgb: string, a: number) => string;
+declare const UI: {
+    /** Translucent panel background — floating palettes / triggers. */
+    readonly overlayBg: string;
+    /** Slightly more opaque panel background — perf / info overlays. */
+    readonly panelBg: string;
+    /** Solid drawer surface — one step lighter than the chart bg so a
+     *  portalled menu (the indicator picker) reads as raised. */
+    readonly drawerBg: "#13161f";
+    /** Hairline border on floating chrome. */
+    readonly border: string;
+    /** Primary readout text (legend values, perf "good" rows). */
+    readonly value: "#cdd2dc";
+    /** Up / down — match darkTheme candleUp / candleDown. */
+    readonly up: "#1ec77a";
+    readonly down: "#f6465d";
+    /** Status accents — perf overlay warn / danger thresholds. */
+    readonly warn: "#f5d94d";
+    readonly danger: "#ffa699";
+};
+
+declare function niceStep(rough: number): number;
+declare function formatPrice(p: number, step: number): string;
+declare function formatHoverPrice(p: number, step: number): string;
+declare function formatVolume(v: number): string;
+declare function paneLegendValue(value: number, format: (v: number) => string): string;
+declare function stepForRange(p0: number, p1: number, targetTicks?: number): number;
+
+declare const PLOT_GUTTER: {
+    readonly top: 8;
+    readonly right: 92;
+    readonly bottom: 32;
+    readonly left: 8;
+};
+declare const AXIS_LABEL_SCALE = 0.85;
+
+type ChartTypeFamily = "Candle" | "Bars" | "Line" | "Area" | "Pro";
+type ChartTypeKey = "candle" | "hollow-candle" | "heikin-ashi" | "bars" | "volume-bars" | "columns" | "high-low" | "line" | "line-markers" | "step-line" | "hlc-area" | "area" | "baseline" | "volume-footprint" | "tpo";
+type ChartTypeAvailability = "available" | "partial" | "source_required";
+interface ChartTypeOption {
+    key: ChartTypeKey;
+    family: ChartTypeFamily;
+    label: string;
+    short: string;
+    availability: ChartTypeAvailability;
+}
+declare const CHART_TYPE_FAMILIES: readonly ChartTypeFamily[];
+declare const CHART_TYPE_OPTIONS: readonly ChartTypeOption[];
+declare const DEFAULT_CHART_TYPE: ChartTypeKey;
+declare const CHART_TYPE_BY_KEY: Record<ChartTypeKey, ChartTypeOption>;
+declare function isChartTypeKey(value: string): value is ChartTypeKey;
+declare function isChartTypeSelectable(option: ChartTypeOption): boolean;
+declare function chartTypeAvailabilityLabel(availability: ChartTypeAvailability): "Live" | "Partial" | "Source";
+
+/**
+ * Every toggleable indicator key understood by the picker. The
+ * literal-union shape (rather than an enum) lets `Record<IndicatorKey,
+ * X>` types in callers fail at compile time if a new key is added
+ * without an entry — the same exhaustiveness pattern used for
+ * DrawingTool / DrawnShape kind.
+ */
+type IndicatorKey = "sma20" | "ema50" | "vwap" | "rsi" | "openInterest" | "obh" | "volumeBars" | "volumeProfile" | "vpLines" | "footprint" | "keyLevels" | "liqLevels" | "gex" | "liqEvents" | "whales";
+/**
+ * Categories shown in the picker. Order is the display order; the
+ * picker renders one section per category in this order.
+ *
+ * Categories mirror the kiyotaka grouping in the P8 plan brief:
+ * Overlays (price-line indicators), Volume (anything reading volume
+ * across price levels), Order Flow (positioning / tape signals),
+ * Key Levels (static reference levels).
+ */
+type IndicatorCategory = "Overlays" | "Oscillators" | "Volume" | "Order Flow" | "Funding & OI" | "Key Levels";
+declare const INDICATOR_CATEGORIES: readonly IndicatorCategory[];
+interface IndicatorEntry {
+    key: IndicatorKey;
+    /** Display label shown in the picker. */
+    label: string;
+    /** Short blurb shown as a hover tooltip on the picker row. */
+    description: string;
+    category: IndicatorCategory;
+    /** Display-only swatch RGB (0–1). Picker renders a tiny colored dot. */
+    swatch: [number, number, number];
+}
+declare const INDICATOR_CATALOG: readonly IndicatorEntry[];
+declare const INDICATOR_BY_KEY: Record<IndicatorKey, IndicatorEntry>;
+/**
+ * Default-on set. Keep the first paint chart-native: candles, volume,
+ * VWAP, visible-range volume profile, and the order-book heatmap.
+ * Heavier footprint/OI/liquidation overlays remain explicit opt-ins.
+ */
+declare const DEFAULT_VISIBLE_INDICATORS: ReadonlySet<IndicatorKey>;
+/**
+ * Map every IndicatorKey to the list of chart-layer ids it gates.
+ * Most are 1:1; the side-grouped ones (whales = buy+sell, liqEvents
+ * = long+short marker layers) are 1:N. Kept as a separate map (not
+ * embedded in INDICATOR_CATALOG) so the engine-side wiring concern
+ * stays out of the picker UI concerns — the picker doesn't need to
+ * know how many GL layers a checkbox controls.
+ *
+ * Layer ids match the `id` passed to each `new XxxLayer({id, ...})`
+ * in ChartEngine — when adding a new indicator, the engine-side
+ * lookup is by id, so the id strings here MUST match.
+ */
+declare const CHART_LAYERS_BY_INDICATOR: Record<IndicatorKey, readonly string[]>;
+/**
+ * Map every IndicatorKey to the list of sub-pane ids it gates.
+ * Most catalog keys are main-pane layers and have an empty list
+ * here; only sub-pane toggles (rsi → "rsi" pane, openInterest →
+ * "oi" pane) populate this map.
+ *
+ * Why a separate map from CHART_LAYERS_BY_INDICATOR: layers and
+ * panes are different rendering units. A layer hidden via
+ * Layer.visible just stops painting; a pane hidden via Pane.visible
+ * also needs its allocated slice redistributed via Scene.relayout —
+ * the engine treats these branches differently so the maps stay
+ * structurally separate too.
+ */
+declare const CHART_PANES_BY_INDICATOR: Record<IndicatorKey, readonly string[]>;
+
+type IndicatorLibraryGroup = "Aggregate Flow" | "Profiles" | "Order Flow" | "Exchange Data" | "Options & Macro" | "Sector" | "Technical";
+type IndicatorAvailability = "available" | "partial" | "source_required";
+interface IndicatorLibraryEntry {
+    id: string;
+    title: string;
+    short: string;
+    description: string;
+    group: IndicatorLibraryGroup;
+    key?: IndicatorKey;
+    availability?: IndicatorAvailability;
+    source?: string;
+}
+declare const INDICATOR_LIBRARY_GROUPS: readonly IndicatorLibraryGroup[];
+declare const INDICATOR_LIBRARY: readonly IndicatorLibraryEntry[];
+declare function indicatorAvailability(entry: IndicatorLibraryEntry): IndicatorAvailability;
+declare function indicatorAvailabilityLabel(entry: IndicatorLibraryEntry): "LIVE" | "PARTIAL" | "SOURCE";
+declare function indicatorCanToggle(entry: IndicatorLibraryEntry): boolean;
+
+interface DrawnHLine {
+    id: string;
+    kind: "hline";
+    /** Price in instrument units. */
+    price: number;
+    /** Color RGBA in 0..1, premultiplied-safe (alpha applied at blend). */
+    color: [number, number, number, number];
+}
+/**
+ * Vertical line — single time anchor, spans the full main pane
+ * height. Typical use: marking news events, daily/weekly opens,
+ * earnings releases, anything where the chart needs a "this
+ * moment" reference. Single-click commit (mirrors hline; no
+ * preview phase).
+ */
+interface DrawnVLine {
+    id: string;
+    kind: "vline";
+    /** Time in ms since epoch. */
+    t: number;
+    color: [number, number, number, number];
+}
+/**
+ * Trend line — segment between two (time, price) anchors. Anchored in
+ * data space (not pixel space) so the segment follows the data when
+ * the user pans or zooms. `t1`/`t2` are ms-since-epoch; `price1`/
+ * `price2` are in instrument units.
+ */
+interface DrawnTrend {
+    id: string;
+    kind: "trend";
+    t1: number;
+    price1: number;
+    t2: number;
+    price2: number;
+    color: [number, number, number, number];
+}
+/**
+ * Rectangle outline between two (time, price) anchors — same anchor
+ * shape as DrawnTrend, but the renderer emits four edge segments to
+ * form a box. Outline-only (no fill) keeps the candles underneath
+ * legible. Hit-test treats any of the four edges as the click
+ * target; the interior is non-interactive.
+ */
+interface DrawnRect {
+    id: string;
+    kind: "rect";
+    t1: number;
+    price1: number;
+    t2: number;
+    price2: number;
+    color: [number, number, number, number];
+}
+/**
+ * Fibonacci retracement — same two (time, price) anchors as trend/
+ * rect, renders as N horizontal levels at the standard retracement
+ * ratios between price1 and price2. Lines span x(t1)→x(t2) so the
+ * fib stays local to the user's selected range (matches the
+ * TradingView default; differs from "full-width hlines" which
+ * would lose the local-range signal). Hit-test treats any of the
+ * levels as the click target — deleting the fib removes the whole
+ * set, not a single level.
+ */
+interface DrawnFib {
+    id: string;
+    kind: "fib";
+    t1: number;
+    price1: number;
+    t2: number;
+    price2: number;
+    color: [number, number, number, number];
+}
+/**
+ * Parallel channel — a base trend segment (t1,price1)→(t2,price2)
+ * plus a second line parallel to it, offset vertically in price by
+ * `priceOffset`. The parallel line runs
+ * (t1, price1+priceOffset)→(t2, price2+priceOffset), so both lines
+ * share the base slope (price2-price1)/(t2-t1) in data space and
+ * stay parallel through any pan/zoom.
+ *
+ * The offset is stored as a single vertical price delta rather than
+ * a third (t,price) anchor: the parallel constraint makes the shift
+ * one degree of freedom (a vertical price gap), so the third click's
+ * time coordinate is redundant for rendering. Storing the delta
+ * keeps the shape compact and the render math a straight reuse of
+ * the trend-line projection. A future "drag the parallel handle"
+ * edit slice recomputes `priceOffset` from the dragged point the
+ * same way the commit does.
+ *
+ * Three-click authoring (two for the base line, one for the offset)
+ * is the only multi-anchor-phase tool in the set; see the
+ * ChartEngine pending-draw state machine.
+ */
+interface DrawnChannel {
+    id: string;
+    kind: "channel";
+    t1: number;
+    price1: number;
+    t2: number;
+    price2: number;
+    /** Vertical price offset of the parallel line from the base line. */
+    priceOffset: number;
+    color: [number, number, number, number];
+}
+type DrawnShape = DrawnHLine | DrawnTrend | DrawnRect | DrawnFib | DrawnVLine | DrawnChannel;
+/**
+ * Standard fibonacci retracement ratios. 0.0 is the price1 anchor
+ * end; 1.0 is the price2 anchor end. The 0.618 "golden ratio" and
+ * 0.5 midpoint are the most-traded levels; 0.236 / 0.382 / 0.786
+ * are common secondary levels.
+ *
+ * Exported so a future fib label / hover-info slice can reuse the
+ * exact set the layer renders without redeclaring.
+ */
+declare const FIB_RATIOS: readonly number[];
+declare const DEFAULT_HLINE_COLOR: [number, number, number, number];
+declare const DEFAULT_TREND_COLOR: [number, number, number, number];
+declare const DEFAULT_RECT_COLOR: [number, number, number, number];
+declare const DEFAULT_FIB_COLOR: [number, number, number, number];
+declare const DEFAULT_VLINE_COLOR: [number, number, number, number];
+declare const DEFAULT_CHANNEL_COLOR: [number, number, number, number];
+declare const DEFAULT_COLOR_BY_KIND: Record<DrawnShape["kind"], [
+    number,
+    number,
+    number,
+    number
+]>;
+declare const PREVIEW_SHAPE_ID = "__preview__";
+/**
+ * Generate a stable shape id. Uses crypto.randomUUID when present,
+ * falls back to a Math.random base36 token for old browsers / SSR.
+ * IDs are opaque — code never parses them.
+ */
+declare function makeShapeId(): string;
+/**
+ * Load drawings for a coin. Returns [] if storage is unavailable,
+ * the entry is missing, or the payload fails the shape guard. Bad
+ * payloads are NOT auto-cleared — a transient parse failure during
+ * a multi-tab race shouldn't nuke the user's work.
+ *
+ * Multi-tab note: load is called on coin change and on mount. Two
+ * tabs editing the same coin will diverge until one of them
+ * triggers a reload; cross-tab sync via `storage` events is an
+ * explicit non-goal for the first slice (most users edit one chart
+ * at a time and multi-tab divergence is acceptable for v1).
+ */
+declare function loadDrawings(coin: string): DrawnShape[];
+/**
+ * Save drawings for a coin. No-op if storage is unavailable.
+ * Empty array deletes the storage entry so we don't accumulate
+ * keys for coins the user briefly browsed but never drew on.
+ */
+declare function saveDrawings(coin: string, shapes: DrawnShape[]): void;
+
+declare class BackgroundLayer implements Layer {
+    readonly id = "background";
+    dirty: boolean;
+    private cmd;
+    private horizontalBuffer;
+    private verticalBuffer;
+    private disposed;
+    private horizontalScratch;
+    private verticalScratch;
+    paint(ctx: RenderContext): void;
+    onContextLost(): void;
+    private compile;
+    dispose(): void;
+}
+
+declare class CandleLayer implements Layer {
+    private readonly store;
+    readonly id = "candles";
+    dirty: boolean;
+    private bodyCmd;
+    private wickCmd;
+    private lineCmd;
+    private fillCmd;
+    private cornerBuf;
+    private xCenterBuf;
+    private halfWidthBuf;
+    private openYBuf;
+    private closeYBuf;
+    private isUpBuf;
+    private wickPosBuf;
+    private wickIsUpBuf;
+    private lineBuf;
+    private fillBuf;
+    private xCenter;
+    private halfWidth;
+    private openY;
+    private closeY;
+    private isUp;
+    private wickPos;
+    private wickIsUp;
+    private lineScratch;
+    private fillScratch;
+    private haOpen;
+    private haHigh;
+    private haLow;
+    private haClose;
+    private disposed;
+    private liveAnim;
+    private chartType;
+    constructor(store: DataStore);
+    setChartType(next: ChartTypeKey): void;
+    paint(ctx: RenderContext): void;
+    onContextLost(): void;
+    dispose(): void;
+    private effectiveType;
+    private paintCandleBodies;
+    private paintMarkers;
+    private paintCloseLine;
+    private paintCloseArea;
+    private paintHlcArea;
+    private paintOhlcBars;
+    private paintColumns;
+    private paintBodyOutlines;
+    private uploadBodies;
+    private computeHeikinAshi;
+    private estimateInterval;
+    private liveCandle;
+    private sampleLiveCandle;
+    private ensureCapacity;
+    private ensureLineCapacity;
+    private ensureFillCapacity;
+    private compile;
+}
+
+type TimeSnap = (timeMs: number) => number | null;
+interface SmoothCrosshairAxisResult {
+    value: number;
+    settled: boolean;
+}
+declare function smoothCrosshairAxis(current: number | null | undefined, target: number, factor?: number, epsilonPx?: number): SmoothCrosshairAxisResult;
+declare class CrosshairLayer implements Layer {
+    readonly id = "crosshair";
+    dirty: boolean;
+    private cmd;
+    private buffer;
+    private fillCmd;
+    private fillBuffer;
+    private fillScratch;
+    private batch;
+    private scratch;
+    private detachBus;
+    private disposed;
+    private cssX;
+    private cssY;
+    private drawCssX;
+    private drawCssY;
+    private lastDpr;
+    private snap;
+    constructor(bus: EventBus, snap?: TimeSnap);
+    setSnap(snap: TimeSnap | null): void;
+    paint(ctx: RenderContext): void;
+    private pushRect;
+    onContextLost(): void;
+    dispose(): void;
+    private compile;
+}
+
+declare class DrawingsLayer implements Layer {
+    readonly id: string;
+    dirty: boolean;
+    private cmd;
+    private buffer;
+    private scratch;
+    private shapes;
+    private hlineGroups;
+    private trendGroups;
+    private rectGroups;
+    private fibGroups;
+    private vlineGroups;
+    private channelGroups;
+    private preview;
+    private disposed;
+    constructor(id: string);
+    setShapes(shapes: DrawnShape[]): void;
+    /**
+     * Set or clear the in-progress shape from a multi-click drawing
+     * tool. Pass `null` to clear (e.g. on commit or cancel). The
+     * preview always renders on top of committed shapes since it's
+     * fed last into the per-color emit loop.
+     */
+    setPreview(shape: DrawnShape | null): void;
+    clear(): void;
+    /**
+     * Generic per-color group builder. Filters by `kind`, applies the
+     * caller's `validate` predicate (per-shape finiteness), and
+     * groups by joined color string. Returned `items` are typed via
+     * the `Extract<DrawnShape, {kind: K}>` discriminator so the
+     * paint loops can read kind-specific fields without a runtime
+     * narrowing check.
+     *
+     * Three near-identical builders (one per shape kind) collapsed
+     * into this generic at the fib slice — the audit explicitly
+     * called the fourth tool as the right moment to take the
+     * refactor since the rule-of-three was met.
+     */
+    private static buildGroupsBy;
+    /**
+     * Hit-test the user's committed shapes for right-click delete.
+     * Walks the shape array newest-first so a hit on the topmost
+     * shape wins. Preview shapes are not hit-tested.
+     *
+     * `thresholdPx` defaults to 6 — wider than the rendered 1-px line
+     * so click targets stay forgiving on hi-DPR displays.
+     */
+    hitTest(viewport: Viewport, cssX: number, cssY: number, thresholdPx?: number): DrawnShape | null;
+    paint(ctx: RenderContext): void;
+    private emitPreview;
+    onContextLost(): void;
+    dispose(): void;
+    private compile;
+}
+
+declare class ExtremaAnnotationLayer implements Layer {
+    private readonly store;
+    readonly id = "extrema-annotations";
+    dirty: boolean;
+    private lineCmd;
+    private fillCmd;
+    private lineBuffer;
+    private fillBuffer;
+    private batch;
+    private lineScratch;
+    private fillScratch;
+    private disposed;
+    constructor(store: DataStore);
+    paint(ctx: RenderContext): void;
+    onContextLost(): void;
+    dispose(): void;
+    private makeCallout;
+    private pushRect;
+    private compile;
+}
+
+interface HLineSpec {
+    value: number;
+    color: [number, number, number, number];
+}
+declare class HorizontalLineLayer implements Layer {
+    readonly id: string;
+    dirty: boolean;
+    private cmd;
+    private buffer;
+    private scratch;
+    private disposed;
+    private groups;
+    private lines;
+    constructor(id: string, lines: HLineSpec[]);
+    setLines(lines: HLineSpec[]): void;
+    private static buildGroups;
+    paint(ctx: RenderContext): void;
+    onContextLost(): void;
+    dispose(): void;
+    private compile;
+}
+
+interface IndicatorOptions {
+    id: string;
+    compute: (closes: number[], b: OhlcvBuffer) => number[];
+    color: [number, number, number, number];
+}
+declare class IndicatorLayer implements Layer {
+    private readonly store;
+    private readonly opts;
+    readonly id: string;
+    dirty: boolean;
+    private cmd;
+    private buffer;
+    private scratch;
+    private disposed;
+    private closes;
+    private closesLength;
+    private lastValues;
+    constructor(store: DataStore, opts: IndicatorOptions);
+    paint(ctx: RenderContext): void;
+    valueAt(i: number): number;
+    onContextLost(): void;
+    dispose(): void;
+    private ensureCapacity;
+    private compile;
+}
+
+interface MarkerSpec {
+    t: number;
+    price: number;
+    /** USD notional; drives marker size via log scale. */
+    sizeUsd: number;
+}
+declare class MarkerLayer implements Layer {
+    private readonly opts;
+    readonly id: string;
+    dirty: boolean;
+    private markers;
+    private cmd;
+    private cornerBuf;
+    private xCenterBuf;
+    private yCenterBuf;
+    private halfWidthBuf;
+    private halfHeightBuf;
+    private xCenter;
+    private yCenter;
+    private halfWidth;
+    private halfHeight;
+    private disposed;
+    private readonly logMin;
+    private readonly logMax;
+    constructor(opts: {
+        id: string;
+        sideSign: 1 | -1;
+        color: [number, number, number, number];
+        /** Override the log10(USD) lower anchor for marker sizing. */
+        logMinUsd?: number;
+        /** Override the log10(USD) upper anchor for marker sizing. */
+        logMaxUsd?: number;
+    });
+    setMarkers(markers: MarkerSpec[]): void;
+    clear(): void;
+    paint(ctx: RenderContext): void;
+    onContextLost(): void;
+    dispose(): void;
+    private ensureCapacity;
+    private compile;
+}
+
+interface OiHistoryPoint {
+    t: number;
+    v: number;
+}
+declare class OiHistoryLayer implements Layer {
+    private readonly opts;
+    readonly id: string;
+    dirty: boolean;
+    private points;
+    private cmd;
+    private buffer;
+    private scratch;
+    private disposed;
+    constructor(opts: {
+        id: string;
+        color: [number, number, number, number];
+    });
+    setPoints(points: OiHistoryPoint[]): void;
+    clear(): void;
+    valueAt(t: number): number;
+    paint(ctx: RenderContext): void;
+    onContextLost(): void;
+    dispose(): void;
+    private ensureCapacity;
+    private compile;
+}
+
+interface OrderBookHeatmapLevel {
+    px: number;
+    sz: number;
+}
+interface OrderBookHeatmapSnapshot {
+    time: number;
+    bids: OrderBookHeatmapLevel[];
+    asks: OrderBookHeatmapLevel[];
+}
+interface OrderBookHeatmapHover {
+    time: number;
+    price: number;
+    bucketLow: number;
+    bucketHigh: number;
+    bidUsd: number;
+    askUsd: number;
+    totalUsd: number;
+    side: "bid" | "ask" | "both";
+    snapshotAgeMs: number;
+}
+interface OrderBookHeatmapSummary {
+    snapshotCount: number;
+    oldestTime: number;
+    newestTime: number;
+    newestBidUsd: number;
+    newestAskUsd: number;
+    newestTotalUsd: number;
+    maxBucketUsd: number;
+    visibleBucketCount: number;
+}
+declare class OrderBookHeatmapLayer implements Layer {
+    private readonly opts;
+    readonly id = "obh";
+    dirty: boolean;
+    private snapshots;
+    private bins;
+    private texture;
+    private cmd;
+    private cornerBuf;
+    private disposed;
+    private lastSnapshotGen;
+    private snapshotGen;
+    private lastP0;
+    private lastP1;
+    constructor(opts?: {
+        alpha?: number;
+    });
+    addSnapshot(snap: OrderBookHeatmapSnapshot): void;
+    clear(): void;
+    hoverAt(time: number, price: number, priceRange: readonly [number, number]): OrderBookHeatmapHover | null;
+    summary(priceRange: readonly [number, number]): OrderBookHeatmapSummary | null;
+    paint(ctx: RenderContext): void;
+    onContextLost(): void;
+    dispose(): void;
+    private rebin;
+    private binSide;
+    private compile;
+}
+
+declare class PaneLegendLayer implements Layer {
+    private readonly opts;
+    readonly id: string;
+    dirty: boolean;
+    private value;
+    private batch;
+    private disposed;
+    constructor(opts: {
+        id: string;
+        label: string;
+        labelColor: [number, number, number, number];
+    });
+    setValue(value: string): void;
+    paint(ctx: RenderContext): void;
+    onContextLost(): void;
+    dispose(): void;
+}
+
+declare class PriceAxisLayer implements Layer {
+    readonly id = "price-axis";
+    dirty: boolean;
+    private batch;
+    private disposed;
+    paint(ctx: RenderContext): void;
+    onContextLost(): void;
+    dispose(): void;
+}
+
+declare class TimeAxisLayer implements Layer {
+    readonly id = "time-axis";
+    dirty: boolean;
+    private batch;
+    private disposed;
+    paint(ctx: RenderContext): void;
+    onContextLost(): void;
+    dispose(): void;
+}
+
+interface FootprintLevel {
+    price: number;
+    buyVol: number;
+    sellVol: number;
+}
+interface FootprintBar {
+    t: number;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+    levels: FootprintLevel[];
+}
+declare class VolumeFootprintLayer implements Layer {
+    private readonly opts;
+    readonly id = "footprint";
+    dirty: boolean;
+    private bars;
+    private intervalMs;
+    private cmd;
+    private cornerBuf;
+    private xCenterBuf;
+    private halfWidthBuf;
+    private bottomYBuf;
+    private topYBuf;
+    private intensityBuf;
+    private xCenter;
+    private halfWidth;
+    private bottomY;
+    private topY;
+    private intensity;
+    private disposed;
+    constructor(opts?: {
+        alpha?: number;
+    });
+    setBars(bars: FootprintBar[], intervalMs: number): void;
+    clear(): void;
+    paint(ctx: RenderContext): void;
+    onContextLost(): void;
+    dispose(): void;
+    private ensureCapacity;
+    private compile;
+}
+
+declare class VolumeLayer implements Layer {
+    private readonly store;
+    readonly id = "volume";
+    dirty: boolean;
+    private cmd;
+    private cornerBuf;
+    private xCenterBuf;
+    private halfWidthBuf;
+    private openYBuf;
+    private closeYBuf;
+    private isUpBuf;
+    private xCenter;
+    private halfWidth;
+    private openY;
+    private closeY;
+    private isUp;
+    private disposed;
+    private liveAnim;
+    constructor(store: DataStore);
+    paint(ctx: RenderContext): void;
+    onContextLost(): void;
+    dispose(): void;
+    private estimateInterval;
+    private liveVolume;
+    private sampleLiveVolume;
+    private ensureCapacity;
+    private compile;
+}
+
+interface VolumeProfileBin {
+    px: number;
+    totalUsd: number;
+}
+interface VolumeProfileSnapshot {
+    bins: VolumeProfileBin[];
+    /** Bin width in price units — both edges of each bin sit ± binWidth/2. */
+    binWidth: number;
+    /** Inclusive value-area bounds. Bins in [val, vah] render at full
+     *  intensity; bins outside fade. */
+    val: number;
+    vah: number;
+}
+declare class VolumeProfileLayer implements Layer {
+    readonly id = "volume-profile";
+    dirty: boolean;
+    private snapshot;
+    private cmd;
+    private cornerBuf;
+    private xCenterBuf;
+    private halfWidthBuf;
+    private bottomYBuf;
+    private topYBuf;
+    private intensityBuf;
+    private xCenter;
+    private halfWidth;
+    private bottomY;
+    private topY;
+    private intensity;
+    private disposed;
+    private readonly widthFraction;
+    constructor(opts?: {
+        alpha?: number;
+        widthFraction?: number;
+    });
+    private alpha;
+    setProfile(snapshot: VolumeProfileSnapshot): void;
+    clear(): void;
+    paint(ctx: RenderContext): void;
+    onContextLost(): void;
+    dispose(): void;
+    private ensureCapacity;
+    private compile;
+}
+
+interface Candle {
+    time: number;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+    volume: number;
+}
+interface CandleRange {
+    symbol: string;
+    resolution: string;
+    from: number;
+    to: number;
+}
+interface FeedUpdate {
+    symbol: string;
+    price: number;
+    size: number;
+    time: number;
+    side?: "buy" | "sell";
+}
+type Unsubscribe = () => void;
+interface DataFeed {
+    fetchCandles(range: CandleRange): Promise<Candle[]>;
+    fetchCandlesColumns?(range: CandleRange): Promise<OhlcvColumns>;
+    subscribe(symbol: string, resolution: string, onUpdate: (u: FeedUpdate) => void): Unsubscribe;
+    subscribeOrderBook?(symbol: string, onBook: (b: OrderBookHeatmapSnapshot) => void): Unsubscribe;
+    fetchFootprint?(symbol: string, opts: {
+        resolution: string;
+        from: number;
+        to: number;
+        intervalMs: number;
+    }): Promise<FootprintBar[]>;
+    fetchVolumeProfile?(symbol: string, opts: {
+        resolution: string;
+        from: number;
+        to: number;
+        intervalMs: number;
+    }): Promise<VolumeProfileSnapshot>;
+    subscribeMarkers?(symbol: string, onMarkers: (m: MarkerSpec[] | {
+        buys?: MarkerSpec[];
+        sells?: MarkerSpec[];
+    }) => void): Unsubscribe;
+}
+declare function createDataFeed(impl: DataFeed): DataFeed;
+declare function composeFeeds(parts: {
+    candles?: DataFeed;
+    orderbook?: DataFeed;
+    footprint?: DataFeed;
+    volumeProfile?: DataFeed;
+    markers?: DataFeed;
+}): DataFeed;
+
+type ParamSpec = {
+    type: "number";
+    label: string;
+    default: number;
+    min?: number;
+    max?: number;
+    step?: number;
+} | {
+    type: "int";
+    label: string;
+    default: number;
+    min?: number;
+    max?: number;
+} | {
+    type: "bool";
+    label: string;
+    default: boolean;
+} | {
+    type: "color";
+    label: string;
+    default: string;
+} | {
+    type: "select";
+    label: string;
+    default: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+};
+type ParamValues<P extends Record<string, ParamSpec>> = {
+    [K in keyof P]: P[K] extends {
+        type: "bool";
+    } ? boolean : P[K] extends {
+        type: "color" | "select";
+    } ? string : number;
+};
+interface PlotLine {
+    id: string;
+    data: number[];
+    color?: string;
+    lineWidth?: number;
+}
+interface IndicatorResult {
+    lines: PlotLine[];
+    histogram?: number[];
+    bands?: [number, number][];
+}
+interface CandleView {
+    readonly time: Float64Array | number[];
+    readonly open: Float64Array | number[];
+    readonly high: Float64Array | number[];
+    readonly low: Float64Array | number[];
+    readonly close: Float64Array | number[];
+    readonly volume: Float64Array | number[];
+    readonly length: number;
+}
+interface IndicatorDefinition<P extends Record<string, ParamSpec>> {
+    name: string;
+    overlay: boolean;
+    params: P;
+    compute(candles: CandleView, params: ParamValues<P>): IndicatorResult;
+}
+interface IndicatorInstance {
+    name: string;
+    overlay: boolean;
+    params: Record<string, ParamSpec>;
+    values: Record<string, unknown>;
+    compute(candles: CandleView): IndicatorResult;
+}
+interface ControlDescriptor {
+    key: string;
+    kind: string;
+    label: string;
+    value: unknown;
+    min?: number;
+    max?: number;
+    step?: number;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+}
+declare function defineIndicator<P extends Record<string, ParamSpec>>(def: IndicatorDefinition<P>): (overrides?: Partial<ParamValues<P>>) => IndicatorInstance;
+declare function getControls(inst: IndicatorInstance): ControlDescriptor[];
+
+interface ThemeTokens {
+    background?: string;
+    text?: string;
+    grid?: string;
+    border?: string;
+    candleUp?: string;
+    candleDown?: string;
+    volumeUp?: string;
+    volumeDown?: string;
+    crosshair?: string;
+    fontFamily?: string;
+    palette?: Record<string, string>;
+}
+declare function resolveTheme(tokens: ThemeTokens, base?: "dark" | "light"): ChartTheme;
+declare function defineTheme(tokens: ThemeTokens): ChartTheme;
+declare const presets: {
+    dark: ChartTheme;
+    light: ChartTheme;
+};
+
+declare const smaStudy: (overrides?: Partial<ParamValues<{
+    period: {
+        type: "int";
+        label: string;
+        default: number;
+        min: number;
+        max: number;
+    };
+}>> | undefined) => IndicatorInstance;
+declare const emaStudy: (overrides?: Partial<ParamValues<{
+    period: {
+        type: "int";
+        label: string;
+        default: number;
+        min: number;
+        max: number;
+    };
+}>> | undefined) => IndicatorInstance;
+declare const vwapStudy: (overrides?: Partial<ParamValues<{}>> | undefined) => IndicatorInstance;
+declare const rsiStudy: (overrides?: Partial<ParamValues<{
+    period: {
+        type: "int";
+        label: string;
+        default: number;
+        min: number;
+        max: number;
+    };
+}>> | undefined) => IndicatorInstance;
+declare const macdStudy: (overrides?: Partial<ParamValues<{
+    fast: {
+        type: "int";
+        label: string;
+        default: number;
+        min: number;
+        max: number;
+    };
+    slow: {
+        type: "int";
+        label: string;
+        default: number;
+        min: number;
+        max: number;
+    };
+    signal: {
+        type: "int";
+        label: string;
+        default: number;
+        min: number;
+        max: number;
+    };
+}>> | undefined) => IndicatorInstance;
+/** Registry of the built-in study factories, keyed by short name. */
+declare const builtinStudies: {
+    readonly sma: (overrides?: Partial<ParamValues<{
+        period: {
+            type: "int";
+            label: string;
+            default: number;
+            min: number;
+            max: number;
+        };
+    }>> | undefined) => IndicatorInstance;
+    readonly ema: (overrides?: Partial<ParamValues<{
+        period: {
+            type: "int";
+            label: string;
+            default: number;
+            min: number;
+            max: number;
+        };
+    }>> | undefined) => IndicatorInstance;
+    readonly vwap: (overrides?: Partial<ParamValues<{}>> | undefined) => IndicatorInstance;
+    readonly rsi: (overrides?: Partial<ParamValues<{
+        period: {
+            type: "int";
+            label: string;
+            default: number;
+            min: number;
+            max: number;
+        };
+    }>> | undefined) => IndicatorInstance;
+    readonly macd: (overrides?: Partial<ParamValues<{
+        fast: {
+            type: "int";
+            label: string;
+            default: number;
+            min: number;
+            max: number;
+        };
+        slow: {
+            type: "int";
+            label: string;
+            default: number;
+            min: number;
+            max: number;
+        };
+        signal: {
+            type: "int";
+            label: string;
+            default: number;
+            min: number;
+            max: number;
+        };
+    }>> | undefined) => IndicatorInstance;
+};
+
+interface ChartOptions {
+    container: HTMLElement;
+    theme?: ThemeTokens;
+    autosize?: boolean;
+    devicePixelRatio?: number;
+    perf?: boolean;
+}
+interface IChartApi {
+    addCandleSeries(): CandleLayer;
+    addVolumeSeries(): VolumeLayer;
+    addFootprintSeries(opts?: FootprintSeriesOptions): FootprintSeriesApi;
+    addVolumeProfile(opts?: VolumeProfileOptions): VolumeProfileApi;
+    addOrderBookHeatmap(opts?: OrderBookHeatmapOptions): OrderBookHeatmapApi;
+    addMarkers(opts?: MarkerSeriesOptions): MarkerSeriesApi;
+    addIndicator(inst: IndicatorInstance): {
+        remove(): void;
+        setParams(v: Record<string, unknown>): void;
+    };
+    addPane(opts?: PaneOptions): PaneApi;
+    setData(feed: DataFeed, opts?: {
+        symbol?: string;
+        resolution?: string;
+    }): void;
+    applyTheme(theme: ThemeTokens): void;
+    resize(w: number, h: number): void;
+    takeScreenshot(): HTMLCanvasElement;
+    subscribeCrosshairMove(cb: (p: unknown) => void): Unsubscribe;
+    on(ev: "contextlost" | "contextrestored", cb: () => void): Unsubscribe;
+    dispose(): void;
+}
+interface FootprintSeriesOptions {
+    bars?: FootprintBar[];
+    intervalMs?: number;
+    alpha?: number;
+}
+interface FootprintSeriesApi {
+    layer: VolumeFootprintLayer;
+    setBars(bars: FootprintBar[], intervalMs?: number): void;
+    clear(): void;
+    remove(): void;
+}
+interface VolumeProfileOptions {
+    profile?: VolumeProfileSnapshot;
+    alpha?: number;
+    widthFraction?: number;
+}
+interface VolumeProfileApi {
+    layer: VolumeProfileLayer;
+    setProfile(profile: VolumeProfileSnapshot): void;
+    clear(): void;
+    remove(): void;
+}
+interface OrderBookHeatmapOptions {
+    snapshots?: OrderBookHeatmapSnapshot[];
+    alpha?: number;
+}
+interface OrderBookHeatmapApi {
+    layer: OrderBookHeatmapLayer;
+    addSnapshot(snapshot: OrderBookHeatmapSnapshot): void;
+    setSnapshots(snapshots: OrderBookHeatmapSnapshot[]): void;
+    clear(): void;
+    remove(): void;
+}
+interface MarkerSeriesOptions {
+    id?: string;
+    markers?: MarkerSpec[];
+    buys?: MarkerSpec[];
+    sells?: MarkerSpec[];
+    sideSign?: 1 | -1;
+    color?: RGBA;
+    buyColor?: RGBA;
+    sellColor?: RGBA;
+    logMinUsd?: number;
+    logMaxUsd?: number;
+}
+interface MarkerSeriesApi {
+    layers: MarkerLayer[];
+    setMarkers(markers: MarkerSpec[] | {
+        buys?: MarkerSpec[];
+        sells?: MarkerSpec[];
+    }): void;
+    clear(): void;
+    remove(): void;
+}
+interface PaneOptions {
+    id?: string;
+    interactive?: boolean;
+    padding?: {
+        top?: number;
+        bottom?: number;
+    };
+    priceRange?: [number, number];
+}
+interface PaneApi {
+    pane: Pane;
+    remove(): void;
+}
+declare function createChart(options: ChartOptions): IChartApi;
+
+export { AXIS_LABEL_SCALE, BackgroundLayer, CANDLE_COLOR_THEMES, CHART_COLORS, CHART_LAYERS_BY_INDICATOR, CHART_PANES_BY_INDICATOR, CHART_TYPE_BY_KEY, CHART_TYPE_FAMILIES, CHART_TYPE_OPTIONS, type Candle, type CandleColorThemeKey, type CandleColorThemeOption, CandleLayer, type CandleRange, type CandleView, type ChartColorKey, type ChartOptions, type ChartTheme, type ChartTypeAvailability, type ChartTypeFamily, type ChartTypeKey, type ChartTypeOption, type ControlDescriptor, CrosshairLayer, DEFAULT_CANDLE_COLOR_THEME, DEFAULT_CHANNEL_COLOR, DEFAULT_CHART_TYPE, DEFAULT_COLOR_BY_KIND, DEFAULT_FIB_COLOR, DEFAULT_HLINE_COLOR, DEFAULT_RECT_COLOR, DEFAULT_TREND_COLOR, DEFAULT_VISIBLE_INDICATORS, DEFAULT_VLINE_COLOR, type DataFeed, DataStore, DrawingsLayer, type DrawnChannel, type DrawnFib, type DrawnHLine, type DrawnRect, type DrawnShape, type DrawnTrend, type DrawnVLine, type EngineEvent, EventBus, ExtremaAnnotationLayer, FIB_RATIOS, type FeedUpdate, type FootprintBar, type FootprintLevel, type FootprintSeriesApi, type FootprintSeriesOptions, GlyphAtlas, type GlyphAtlasOptions, type HLineSpec, HorizontalLineLayer, type IChartApi, INDICATOR_BY_KEY, INDICATOR_CATALOG, INDICATOR_CATEGORIES, INDICATOR_LIBRARY, INDICATOR_LIBRARY_GROUPS, type IndicatorAvailability, type IndicatorCategory, type IndicatorDefinition, type IndicatorEntry, type IndicatorInstance, type IndicatorKey, IndicatorLayer, type IndicatorLibraryEntry, type IndicatorLibraryGroup, type IndicatorOptions, type IndicatorResult, type Layer, type LayerStats, MarkerLayer, type MarkerSeriesApi, type MarkerSeriesOptions, type MarkerSpec, type OhlcvBuffer, type OhlcvColumns, OiHistoryLayer, type OiHistoryPoint, type OrderBookHeatmapApi, type OrderBookHeatmapHover, OrderBookHeatmapLayer, type OrderBookHeatmapLevel, type OrderBookHeatmapOptions, type OrderBookHeatmapSnapshot, type OrderBookHeatmapSummary, PLOT_GUTTER, PREVIEW_SHAPE_ID, type Padding, Pane, type PaneApi, type PaneBounds, PaneLegendLayer, type PaneOptions, type PanePadding, type ParamSpec, type ParamValues, PerfReporter, type PlotLine, PriceAxisLayer, RGB, type RGBA, type RangeFetchRequest, type RangeFetcher, type RawCandleRow, type RenderContext, RendererGL, type RendererGLOptions, Scene, type SmoothCrosshairAxisResult, TextBatch, type ThemeTokens, TimeAxisLayer, type TimeSnap, UI, type Unsubscribe, Viewport, VolumeFootprintLayer, VolumeLayer, type VolumeProfileApi, type VolumeProfileBin, VolumeProfileLayer, type VolumeProfileOptions, type VolumeProfileSnapshot, alpha, builtinStudies, chartTypeAvailabilityLabel, composeFeeds, createChart, createDataFeed, darkTheme, defineIndicator, defineTheme, emaStudy, formatHoverPrice, formatPrice, formatVolume, getControls, indicatorAvailability, indicatorAvailabilityLabel, indicatorCanToggle, isCandleColorThemeKey, isChartTypeKey, isChartTypeSelectable, loadDrawings, macdStudy, makeShapeId, niceStep, paneLegendValue, presets, resolveTheme, rsiStudy, saveDrawings, smaStudy, smoothCrosshairAxis, stepForRange, swatchOf, vwapStudy };