@christtrade/depth 0.17.0 → 0.19.0

package/types/core/DepthChart.d.ts

@@ -10,7 +10,7 @@ import { ExecutionEngine } from './ExecutionEngine';
 import type { FillSearchOptions } from '../lib/matchingEngine';
 import { LiveTransformer } from '../interfaces/ICoordinateTransformer';
 import { BottomBarItem, ChartPlugin, InstalledPlugin, PluginType, ToolbarItem } from './PluginRegistry';
-import { RenderEngine } from './RenderEngine';
+import { RenderEngine, type DrawHook, type DrawPhase } from './RenderEngine';
 import { ChartEvents, TypedEventBus } from './TypedEventBus';
 import { ChartState } from './ChartState';
 import type { SyncInLayout } from '../lib/types/layout-sync';
@@ -18,6 +18,8 @@ import { ChartModel, type ChartPaneState } from './ChartModel';
 import { DrawingStore } from './DrawingStore';
 import { ChartPane, Indicator } from '../lib/types/indicator-types';
 import { AccountManager, LedgerAdjustment, LedgerFill, LedgerOrder, LedgerPosition, type AccountSaveState } from './AccountManager';
+import type { ThemeDef } from '../interfaces/plugins/IChartPlugin';
+import type { StyleField } from '../components/drawings/drawing-settings-dialog';
 import { PlaybackMode, type PrefetchOptions } from '../hooks/usePlaybackEngine';
 import { type ChartPreferences } from '../lib/storage';
 import { type PluginCatalogEntry, type PluginStartupEntry, type PluginStartupRecord } from './plugin-startup';
@@ -101,6 +103,8 @@ export interface ChartOptions {
      */
     restore?: ChartSaveState;
     toolbar?: (chart: DepthChart) => React.ReactNode[];
+    /** Theme id to start on. Register custom ones with `chart.registerTheme()` first. */
+    theme?: string;
 }
 /** Bump when the save document shape changes incompatibly; handled in migrate(). */
 export declare const SAVE_VERSION = 1;
@@ -175,12 +179,15 @@ export declare class DepthChart {
     private readonly options;
     readonly id: string;
     readonly eventBus: TypedEventBus;
+    private readonly _themes;
+    private readonly _themeStyle;
     readonly executionEngine: ExecutionEngine;
     private readonly dataEngine;
     readonly transformer: LiveTransformer;
     private features;
     private readonly pluginRegistry;
-    private _renderEngine;
+    private readonly _engines;
+    private _pluginRenderEngine;
     private _panelRegistry;
     private _toolbarRegistry;
     private _bottomBarRegistry;
@@ -192,9 +199,11 @@ export declare class DepthChart {
     private registeredPlugins;
     private _pluginStateListeners;
     private _pluginCatalog;
+    private _panesRestored;
     private playbackController;
     private readonly playbackStateRegistry;
     private readonly pluginSchedules;
+    private readonly extensionParams;
     readonly state: ChartState;
     private readonly _panes;
     readonly drawingStore: DrawingStore;
@@ -225,7 +234,7 @@ export declare class DepthChart {
     openBar(): OhlcvBar | null;
     /** What the chart holds for the active symbol - the same snapshot a plugin's `ctx.getData()` returns. */
     getData(): ChartDataSnapshot;
-    /** The paint loop, once a pane has mounted one. */
+    /** The focused cell's paint loop, once a cell has mounted one. Every cell's: `getRenderEngines()`. */
     get renderEngine(): RenderEngine | null;
     getMaxLookbackBars(): number;
     horizon(): number;
@@ -402,6 +411,7 @@ export declare class DepthChart {
      * document decide again.
      */
     setPluginStartup(id: string, entry: Partial<PluginStartupEntry> | null): this;
+    private _deactivateRemoved;
     /**
      * Install what this session should open with: every plugin a restored pane
      * references, plus every plugin marked autostart. Idempotent - already-loaded
@@ -438,6 +448,18 @@ export declare class DepthChart {
      * set of ids actually changes - pane models notify on unrelated churn (axis
      * drags rewrite settings every frame) that callers shouldn't re-render on.
      */
+    /**
+     * The settings a loaded extension declared with `params`, and their current
+     * values. Null when it declared none. A script holding several extensions
+     * gets one combined set.
+     */
+    getExtensionParams(id: string): {
+        schema: StyleField[];
+        defaults: Record<string, unknown>;
+        values: Record<string, unknown>;
+    } | null;
+    /** Save some of an extension's params, and hand the new values to the extension. */
+    setExtensionParams(id: string, patch: Record<string, unknown>): void;
     onPluginStateChange(cb: (state: {
         installed: Set<string>;
         active: Set<string>;
@@ -454,11 +476,33 @@ export declare class DepthChart {
         visible: boolean;
     }>;
     getToolbarRegistry(): ReadonlyMap<string, ToolbarItem>;
+    /** The theme the chart is on. */
+    getTheme(): ThemeDef;
+    /** Every theme it can switch to, built-in and registered. */
+    getThemes(): ThemeDef[];
+    /**
+     * Switch theme. Emits `theme:change`. False for an id that isn't registered,
+     * and the chart stays where it was.
+     */
+    setTheme(id: string): boolean;
+    /**
+     * Add a theme, or replace one with the same id. Returns the unregister - if
+     * the chart is on that theme, it falls back to the default.
+     */
+    registerTheme(theme: ThemeDef): () => void;
     getBottomBarRegistry(): ReadonlyMap<string, BottomBarItem>;
     attachRenderEngine(engine: RenderEngine): void;
+    /** Every cell's paint loop, by cell id. */
+    getRenderEngines(): ReadonlyMap<number, RenderEngine>;
+    /**
+     * Draw on every cell, including cells that mount later - a layout switch
+     * keeps the overlay on all of them. Returns the remove.
+     */
+    addOverlay(phase: DrawPhase, hook: DrawHook): () => void;
+    private get pluginRenderEngine();
     /**
-     * Snapshot of the chart with every layer composited (base, drawings, UI).
-     * Returns null until the render engine has attached.
+     * Snapshot of the focused cell with every layer composited (base, drawings, UI).
+     * Returns null until a render engine has attached.
      */
     screenshot(): HTMLCanvasElement | null;
     private _focusedCellId;

package/types/core/PluginSchedule.d.ts

@@ -2,14 +2,25 @@ export interface PluginSchedule {
     interval(ms: number, fn: () => void): () => void;
     timeout(ms: number, fn: () => void): () => void;
     raf(fn: () => void): () => void;
+    frames(fps: number, fn: (time: number, dt: number) => void): () => void;
 }
 export declare class PluginScheduleImpl implements PluginSchedule {
+    private readonly getElements;
     private readonly intervals;
     private readonly timeouts;
     private readonly rafIds;
+    private readonly frameLoops;
     private destroyed;
+    private observer;
+    private readonly observed;
+    private readonly visible;
+    /** `getElements` - every cell the plugin draws on. Frames run while any is on screen */
+    constructor(getElements?: () => readonly Element[]);
+    private get onScreen();
     interval(ms: number, fn: () => void): () => void;
     timeout(ms: number, fn: () => void): () => void;
     raf(fn: () => void): () => void;
+    frames(fps: number, fn: (time: number, dt: number) => void): () => void;
+    private watchVisibility;
     destroy(): void;
 }

package/types/core/RenderEngine.d.ts

@@ -3,7 +3,7 @@ import type { ChartPane, Rect } from '../lib/types/indicator-types';
 import type { Indicator } from '../lib/types/indicator-types';
 import type { TradePoint, PriceHistory, ViewBounds } from '../lib/types';
 import type { FootprintBar } from '../lib/types/footprint';
-import type { ChartSettings } from '../lib/types/chart-settings';
+import { type ChartColors, type ChartSettings } from '../lib/types/chart-settings';
 import type { Crosshair } from '../lib/renderers/renderer';
 import type { Drawing, DraftDrawing, DrawingAnchorId, ActiveDrawingTool } from '../lib/types/drawing-types';
 import type { TradeLine } from '../lib/types';
@@ -12,7 +12,26 @@ import { ChartTypePlugin } from './PluginRegistry';
 import { SessionMapper } from './SessionMapper';
 import { AccountSnapshot, DataLevel, SymbolInfo } from '.';
 import type { CrosshairSync } from '../lib/types/layout-sync';
-export type DrawHook = (ctx: CanvasRenderingContext2D, view: ViewBounds, transformer: LiveTransformer) => void;
+/** Layout of the frame a draw hook runs in. Everything in css px */
+export interface DrawInfo {
+    width: number;
+    height: number;
+    dpr: number;
+    /** The main plot - the canvas minus the price and time axis */
+    plot: Rect;
+    /** Every panes box by id, `main` included */
+    panes: Readonly<Record<string, Rect>>;
+    /** The resolved background color */
+    background: string;
+    /** `performance.now()` at the start of the frame */
+    time: number;
+    /** The layout cell being painted - a hook runs once per cell */
+    cell: number;
+    /** Whether that cell is the focused one */
+    focused: boolean;
+}
+export type DrawHook = (ctx: CanvasRenderingContext2D, view: ViewBounds, transformer: LiveTransformer, info: DrawInfo) => void;
+export type DrawPhase = 'before-base' | 'after-background' | 'after-base' | 'after-ui';
 export interface DrawParams {
     panes: ChartPane[];
     layouts: Record<string, Rect>;
@@ -95,11 +114,17 @@ export interface DrawParams {
     syncCrosshair: CrosshairSync | null;
 }
 export declare class RenderEngine {
+    private readonly backgroundCanvas;
     private readonly baseCanvas;
     private readonly drawingsCanvas;
     private readonly uiCanvas;
     private readonly eventBus;
     private readonly chartId;
+    /** The layout cell this engine paints */
+    get cellId(): number;
+    private focused;
+    /** Set by the chart. Repaints if there are hooks, they might draw differently on the focused cell */
+    setFocused(focused: boolean): void;
     private rafId;
     /** The element the canvases sit in, for overlays that want to draw over the chart without touching it */
     get container(): HTMLElement | null;
@@ -115,10 +140,14 @@ export declare class RenderEngine {
         maxMs: number;
     };
     private dirty;
+    private paintedBackgroundColor;
     private beforeBaseDraw;
+    private afterBackgroundDraw;
     private afterBaseDraw;
     private afterUIDraw;
     private drawParams;
+    private rawDrawParams;
+    private themeColors;
     private view;
     private readonly priceTransition;
     private resizeObserver;
@@ -129,11 +158,18 @@ export declare class RenderEngine {
     private readonly onDprChange;
     private watchDpr;
     private startLoop;
-    markDirty(layer: 'base' | 'drawings' | 'ui'): void;
+    markDirty(layer: 'background' | 'base' | 'drawings' | 'ui'): void;
     markAllDirty(): void;
     setDrawParams(params: DrawParams): void;
+    /** Set by the chart. Colors the user didn't pick come from here. */
+    setThemeColors(colors: Partial<ChartColors> | undefined): void;
     setView(v: ViewBounds): void;
     getView(): ViewBounds | null;
+    /** The transformer this cell paints with, once it has drawn */
+    get transformer(): LiveTransformer | null;
+    private doBackgroundRedraw;
+    private readonly failedHooks;
+    private runHooks;
     private doBaseRedraw;
     /**
      * Draws the ChristTrade banner into the base layer, in the same pass that
@@ -146,15 +182,16 @@ export declare class RenderEngine {
     private drawAttribution;
     private doDrawingsRedraw;
     private doUIRedraw;
-    addDrawHook(phase: 'before-base' | 'after-base' | 'after-ui', hook: DrawHook): () => void;
+    addDrawHook(phase: DrawPhase, hook: DrawHook): () => void;
     private handleResize;
     private flushSync;
     toDataURL(type?: string): string;
     /**
-     * All three layers flattened onto a fresh canvas, in paint order. Use this
+     * Every layer flattened onto a fresh canvas, in paint order. Use this
      * rather than `toDataURL` when the snapshot should include the drawings and
      * the crosshair/UI layer.
      */
     captureComposite(): HTMLCanvasElement;
+    private flatten;
     destroy(): void;
 }

package/types/core/ThemeRegistry.d.ts

@@ -0,0 +1,18 @@
+import type { ThemeDef } from '../interfaces/plugins/IChartPlugin';
+import type { TypedEventBus } from './TypedEventBus';
+import { BASE_DARK_VARS, BUILTIN_THEMES } from './builtin-themes';
+export { BASE_DARK_VARS, BUILTIN_THEMES };
+export declare const DEFAULT_THEME_ID = "dark";
+export declare class ThemeRegistry {
+    private readonly bus;
+    private readonly themes;
+    private currentId;
+    constructor(bus: TypedEventBus, builtins?: readonly ThemeDef[], initial?: string);
+    get current(): ThemeDef;
+    get(id: string): ThemeDef | undefined;
+    list(): ThemeDef[];
+    /** Same id replaces, so a hot-reloaded theme updates in place. Returns the unregister. */
+    register(theme: ThemeDef): () => void;
+    /** False for an unknown id. Setting the current theme again does nothing. */
+    set(id: string): boolean;
+}

package/types/core/TypedEventBus.d.ts

@@ -8,6 +8,8 @@ import { IExecutionAdapter } from '../interfaces/IExecutionAdapter';
 import { ActiveDrawingTool, Anchor, Drawing } from '../lib/types/drawing-types';
 import { TradeLineHitMap } from '../lib/renderers/drawTradeLines';
 import type { TradeLine } from '../lib/types';
+import type { StyleField } from '../components/drawings/drawing-settings-dialog';
+import type { ThemeDef } from '../interfaces/plugins/IChartPlugin';
 import { FootprintBar } from '../lib/types/footprint';
 import { ChartPane, Indicator } from '../lib/types/indicator-types';
 import { SerialTrade } from '../lib/types';
@@ -69,7 +71,8 @@ export interface ChartEvents {
         old: string;
         new: string;
     };
-    'theme:change': 'light' | 'dark';
+    'theme:change': ThemeDef;
+    'theme:list': ThemeDef[];
     'chart:focused': {
         id: number;
     };
@@ -373,6 +376,9 @@ export interface ChartEvents {
     'render-engine:ready': {
         engine: RenderEngine;
     };
+    'render-engine:destroyed': {
+        engine: RenderEngine;
+    };
     /**
      * A cell handing over its forming-bar getter. The bar mutates in place, so
      * this is a getter and not a value - read it, dont keep it. `get: null`
@@ -594,6 +600,16 @@ export interface ChartEvents {
         id: string;
         params: Record<string, unknown>;
     };
+    'plugin:extension-params': {
+        id: string;
+        entry: string;
+        schema: StyleField[] | null;
+        defaults: Record<string, unknown>;
+    };
+    'plugin:extension-params-change': {
+        id: string;
+        values: Record<string, unknown>;
+    };
     /** @console command */
     'plugin:strategy-range': {
         id: string;

package/types/core/builtin-themes.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeDef } from '../interfaces/plugins/IChartPlugin';
+/**
+ * What every built-in dark theme starts from. Spread it and override what's
+ * different: `vars: { ...BASE_DARK_VARS, primary: '207 82% 66%' }`.
+ */
+export declare const BASE_DARK_VARS: Readonly<Record<string, string>>;
+export declare const BUILTIN_THEMES: readonly ThemeDef[];

package/types/core/index.d.ts

@@ -18,7 +18,7 @@ export type { DrawParams } from './RenderEngine';
 export type { IDataAdapter, DataLevel, TickEvent, OhlcvBar, L2Snapshot, MboEvent, } from '../interfaces/IDataAdapter';
 export type { IExecutionAdapter } from '../interfaces/IExecutionAdapter';
 export { LiveTransformer } from '../interfaces/ICoordinateTransformer';
-export type { ICoordinateTransformer, PriceScaleMode, TransformedDrawHook, } from '../interfaces/ICoordinateTransformer';
+export type { ICoordinateTransformer, PriceScaleMode, } from '../interfaces/ICoordinateTransformer';
 export { PluginRegistry } from './PluginRegistry';
 export type { PluginIcon, InstalledPlugin } from './PluginRegistry';
 export type { PluginCatalogEntry, PluginStartupEntry, PluginStartupRecord, } from './plugin-startup';
@@ -53,8 +53,8 @@ export type { TradePoint, PriceHistory, ViewBounds, OhlcvBarMs } from '../lib/ty
 export type { Timeframe } from '../lib/timeframes';
 export type { DrawingTool } from '../lib/types/drawing-types';
 export type { FootprintBar, FootprintOptions } from '../lib/types/footprint';
-export type { ChartSettings } from '../lib/types/chart-settings';
-export { DEFAULT_CHART_SETTINGS } from '../lib/types/chart-settings';
+export type { ChartColorKey, ChartColors, ChartSettings } from '../lib/types/chart-settings';
+export { CHART_COLOR_KEYS, DEFAULT_CHART_SETTINGS, themedSettings } from '../lib/types/chart-settings';
 export type { PlaceOrderRequest, L3EngineOptions, FeeSchedule, BookDepth, BookLevel } from '../lib/matchingEngine';
 export { createL3MatchingEngine, feeScheduleFor, MICRO_FEE_SCHEDULE, NQ_FEE_SCHEDULE, ZERO_FEE_SCHEDULE, } from '../lib/matchingEngine';
 export { SimulatedMarketAdapter, createSimulatedAdapter } from '../lib/createSimulatedAdapter';
@@ -93,6 +93,7 @@ export type { FootprintLevel, FootprintMode, PriceRange } from '../lib/types/foo
 export type { BarPreviewResponse, BarResponse, DataAdapterErrorCode, FetchRequest, PreProcessedPayload, SupplementalBarSet, SymbolIconSpec, TimeRange, } from '../interfaces/IDataAdapter';
 export { SymbolIcon } from '../components/chart/symbol-icon';
 export type { BottomBarHandle, BottomBarItem, ContextMenuItem, FloatingPanelOpts, NotifyLevel, NotifyOptions, PaneOptions, PluginExecutionSurface, PluginLifecycle, PluginServices, PluginStorage, ServiceApi, ServiceObserver, SettingSchema, SettingSchemaType, ThemeDef, ToolbarItem, } from '../interfaces/plugins/IChartPlugin';
+export { BASE_DARK_VARS, BUILTIN_THEMES, DEFAULT_THEME_ID } from './ThemeRegistry';
 export type { ChartTypeActiveContext, ChartTypeKeyEvent, ChartTypePointerEvent, } from '../interfaces/plugins/IChartTypePlugin';
 export type { AnchorConfig, Point } from '../interfaces/plugins/IDrawingPlugin';
 export type { IndicatorCrosshair } from '../interfaces/plugins/IIndicatorPlugin';
@@ -111,6 +112,6 @@ export type { ChartPane, Indicator, Rect } from '../lib/types/indicator-types';
 export type { CrosshairSync, TimeRangeSync } from '../lib/types/layout-sync';
 export type { TradeLineHitMap } from '../lib/renderers/drawTradeLines';
 export type { PlaybackMode } from '../hooks/usePlaybackEngine';
-export type { DrawHook } from './RenderEngine';
+export type { DrawHook, DrawInfo, DrawPhase } from './RenderEngine';
 export type { InterceptableEvent, Interceptor } from './TypedEventBus';
 export { ChartState } from './ChartState';

package/types/core/plugin-startup.d.ts

@@ -23,11 +23,13 @@ export interface PluginCatalogEntry {
 export interface PluginStartupEntry {
     /** Install the plugin when the chart opens. */
     autostart: boolean;
-    /** Indicators only: also put an instance on a pane. */
+    /**
+     * Indicators only: also put an instance on a pane. Ignored when the chart was
+     * restored with pane state - the save decides what's on its panes.
+     */
     activate?: boolean;
 }
 export type PluginStartupRecord = Record<string, PluginStartupEntry>;
-export declare function ptrace(...args: unknown[]): void;
 export declare function readPluginStartup(): PluginStartupRecord;
 /** Merge a patch into one plugin's entry. `null` forgets the plugin entirely. */
 export declare function writePluginStartup(id: string, patch: Partial<PluginStartupEntry> | null): PluginStartupRecord;

package/types/core/theme-style.d.ts

@@ -0,0 +1,9 @@
+import type { ThemeDef } from '../interfaces/plugins/IChartPlugin';
+export declare function themeCss(theme: ThemeDef): string | null;
+export declare class ThemeStyle {
+    private readonly id;
+    private el;
+    constructor(id: string);
+    apply(theme: ThemeDef): void;
+    remove(): void;
+}

package/types/hooks/useChartData.d.ts

@@ -52,7 +52,6 @@ export interface UseChartDataParams {
     updateSettingsBarPosRef: MutableRefObject<(id: string | null) => void>;
     resetViewRef: MutableRefObject<() => void>;
     syncPixelLayoutsRef: MutableRefObject<(panes?: ChartPane[]) => void>;
-    doBaseRedrawRef: MutableRefObject<() => void>;
     setIndicators: (inds: Indicator[]) => void;
     setPanes: (updater: ((prev: ChartPane[]) => ChartPane[]) | ChartPane[]) => void;
     getPanel: () => DomPanelHandle | null;

package/types/hooks/useChartInteraction.d.ts

@@ -158,6 +158,7 @@ export interface UseChartInteractionParams {
     hideTimeScale: boolean;
     activeTool: ActiveDrawingTool;
     touchPlusRef: RefObject<HTMLButtonElement>;
+    lastInputTouchRef: MutableRefObject<boolean>;
 }
 export declare function useChartInteraction(p: UseChartInteractionParams): void;
 export {};

package/types/hooks/useChartSubscriptions.d.ts

@@ -54,6 +54,7 @@ export interface UseChartSubscriptionsParams {
     autofitIndicatorPanes: () => void;
     handleAddIndicator: (id: string) => void;
     handleRemoveIndicator: (id: string) => void;
+    userRemoveIndicator: (id: string) => void;
     onSymbolChange: (symbol: string) => void;
     /** This layout's live sync switches (a ref: the handlers outlive a render). */
     syncInLayoutRef: MutableRefObject<SyncInLayout>;

package/types/hooks/useRenderEngine.d.ts

@@ -1,24 +1,7 @@
 import { type MutableRefObject, type RefObject } from 'react';
 import { RenderEngine } from '../core/RenderEngine';
 import { type TypedEventBus } from '../core/TypedEventBus';
-import { type ViewBounds, type TradePoint, type PriceHistory, type OhlcvBarMs } from '../lib/types';
-import { type ChartPane, type Indicator, type Rect } from '../lib/types/indicator-types';
-import { type FootprintBar } from '../lib/types/footprint';
-import { type ChartSettings } from '../lib/types/chart-settings';
-import { type DataLevel } from '../interfaces/IDataAdapter';
-import { type LiveTransformer } from '../interfaces/ICoordinateTransformer';
-type HeatmapBitmapOffsets = {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-};
-type CacheBounds = {
-    tMin: bigint;
-    tMax: bigint;
-    pMin: number;
-    pMax: number;
-};
+import { type ViewBounds } from '../lib/types';
 export interface UseRenderEngineParams {
     renderEngineRef: MutableRefObject<RenderEngine | null>;
     baseCanvasRef: RefObject<HTMLCanvasElement>;
@@ -29,36 +12,5 @@ export interface UseRenderEngineParams {
      *  other cells can tell our repaints from theirs. */
     chartId: number;
     viewRef: MutableRefObject<ViewBounds | null>;
-    /** Auto-computed right price-axis width (css px). */
-    priceScaleWidthRef: MutableRefObject<number>;
-    tradesRef: MutableRefObject<TradePoint[]>;
-    getLayouts: () => Record<string, Rect>;
-    heatmapBitmapRef: MutableRefObject<ImageBitmap | null>;
-    cacheBoundsRef: MutableRefObject<CacheBounds | null>;
-    heatmapBitmapOffsetsRef: MutableRefObject<HeatmapBitmapOffsets>;
-    panesRef: MutableRefObject<ChartPane[]>;
-    indicatorsRef: MutableRefObject<Indicator[]>;
-    priceHistoryRef: MutableRefObject<PriceHistory[]>;
-    footprintBarsRef: MutableRefObject<FootprintBar[]>;
-    activeTimeframeRef: MutableRefObject<{
-        barNs: bigint;
-    }>;
-    chartSettingsRef: MutableRefObject<ChartSettings>;
-    horizonRef: MutableRefObject<bigint>;
-    candleCacheRef: MutableRefObject<Map<bigint, any> | null>;
-    openBarRef: MutableRefObject<FootprintBar | null>;
-    dataLevelRef: MutableRefObject<DataLevel | null>;
-    ohlcvBarsRef: MutableRefObject<{
-        barNs: bigint;
-        bars: OhlcvBarMs[];
-        display: OhlcvBarMs[];
-    }>;
-    previewBarsRef: MutableRefObject<OhlcvBarMs[]>;
-    transformer: LiveTransformer;
-    hideTimeScale: boolean;
 }
-export interface UseRenderEngineResult {
-    doBaseRedraw: () => void;
-}
-export declare function useRenderEngine(p: UseRenderEngineParams): UseRenderEngineResult;
-export {};
+export declare function useRenderEngine(p: UseRenderEngineParams): void;

package/types/hooks/useTradeLines.d.ts

@@ -44,6 +44,7 @@ interface UseTradeLines {
      * price   - final price (snapped to tickSize)
      */
     onGhostMove?: (lineId: string, kind: 'tp' | 'sl', index: number, price: number) => void;
+    isTouchRef?: React.MutableRefObject<boolean>;
 }
 interface UseTradeLinesReturn {
     hoveredLineId: string | null;
@@ -68,6 +69,7 @@ interface UseTradeLinesReturn {
      * always up-to-date without needing React state.
      */
     getGhostState: () => GhostInteractionState;
+    getArmedLineId: () => string | null;
     onMouseMove: (e: React.MouseEvent<HTMLCanvasElement>) => void;
     onMouseDown: (e: React.MouseEvent<HTMLCanvasElement>) => void;
     onMouseUp: (e: React.MouseEvent<HTMLCanvasElement>) => void;
@@ -76,5 +78,5 @@ interface UseTradeLinesReturn {
     onDoubleClick: (e: React.MouseEvent<HTMLCanvasElement>) => void;
     onClick: (e: React.MouseEvent<HTMLCanvasElement>) => void;
 }
-export declare function useTradeLines({ tradeLines, onLinesChange, onSyncLines, onLineDelete, hitMapRef, chartWRef, chartHRef, chartOYRef, getLayouts, boundsRef, chartSettingsRef, redraw, symbolInfoRef, onGhostMove, linesRef, resolveLine, draggingLineIdRef, transformer, }: UseTradeLines): UseTradeLinesReturn;
+export declare function useTradeLines({ tradeLines, onLinesChange, onSyncLines, onLineDelete, hitMapRef, chartWRef, chartHRef, chartOYRef, getLayouts, boundsRef, chartSettingsRef, redraw, symbolInfoRef, onGhostMove, linesRef, resolveLine, draggingLineIdRef, transformer, isTouchRef, }: UseTradeLines): UseTradeLinesReturn;
 export {};

package/types/interfaces/ICoordinateTransformer.d.ts

@@ -102,4 +102,3 @@ export declare class LiveTransformer {
     private _pctPriceToY;
     private _pctYToPrice;
 }
-export type TransformedDrawHook = (ctx: CanvasRenderingContext2D, transformer: LiveTransformer) => void;

package/types/interfaces/plugins/IChartPlugin.d.ts

@@ -4,10 +4,11 @@
  * ChartPlugin and is installed through PluginContext.
  */
 import type { TypedEventBus, InterceptableEvent, Interceptor } from '../../core/TypedEventBus';
-import type { RenderEngine, DrawHook } from '../../core/RenderEngine';
+import type { RenderEngine, DrawHook, DrawPhase } from '../../core/RenderEngine';
 import type { ExecutionEngine } from '../../core/ExecutionEngine';
 import type { GlobalChartBus } from '../../core/GlobalChartBus';
 import type { LiveTransformer } from '../ICoordinateTransformer';
+import type { ChartColors } from '../../lib/types/chart-settings';
 import type { DataLevel, OhlcvBar, SymbolInfo, TickEvent } from '../IDataAdapter';
 import type { SerialTrade, PriceHistory } from '../../lib/types';
 import type { FootprintBar } from '../../lib/types/footprint';
@@ -54,8 +55,16 @@ export interface ContextMenuItem {
 export interface ThemeDef {
     id: string;
     name: string;
+    /** Dark surfaces or light ones - what `onThemeChange` reports. Defaults to dark. */
+    dark?: boolean;
     /** CSS variables to inject - keys are var names without the leading '--'. */
     vars: Record<string, string>;
+    /**
+     * Canvas colors: candles, grid, background, crosshair and the rest. Each one
+     * only applies where the user hasn't picked their own; leave a key out to keep
+     * the default.
+     */
+    chart?: Partial<ChartColors>;
 }
 export type SettingSchemaType = 'number' | 'string' | 'boolean' | 'color' | 'select';
 export interface SettingSchema {
@@ -94,6 +103,13 @@ export interface PluginSchedule {
     timeout(ms: number, fn: () => void): () => void;
     /** Managed animation-frame callback - auto-cancelled on plugin teardown. */
     raf(fn: () => void): () => void;
+    /**
+     * Repeating animation loop, at most `fps` a second, 0 = every frame. Skips frames
+     * while the chart is off screen; the first frame back gets one interval as `dt`.
+     * `time` is the raf timestamp, `dt` the ms since the last call. Auto-cancelled on
+     * plugin teardown.
+     */
+    frames(fps: number, fn: (time: number, dt: number) => void): () => void;
 }
 export type NotifyLevel = 'info' | 'success' | 'warn' | 'error';
 export interface NotifyOptions {
@@ -124,7 +140,7 @@ export interface PluginExecutionSurface {
 export interface PluginLifecycle {
     onSymbolChange(cb: (symbol: string) => void): () => void;
     onTimeframeChange(cb: (tf: string) => void): () => void;
-    onThemeChange(cb: (theme: 'light' | 'dark') => void): () => void;
+    onThemeChange(cb: (mode: 'light' | 'dark', theme: ThemeDef) => void): () => void;
     onFocus(cb: (id: number) => void): () => void;
     onBlur(cb: () => void): () => void;
 }
@@ -193,7 +209,7 @@ export interface PluginContext {
     registerPanel(id: string, element: React.ReactNode, title?: string, visible?: boolean): () => void;
     getSettings<T>(defaults: T): T;
     saveSettings<T>(patch: Partial<T>): void;
-    addOverlay(phase: 'before-base' | 'after-base' | 'after-ui', hook: DrawHook): () => void;
+    addOverlay(phase: DrawPhase, hook: DrawHook): () => void;
     registerToolbarItem(item: ToolbarItem): () => void;
     registerBottomBarItem(id: string, render: () => React.ReactNode): BottomBarHandle;
     registerContextMenuItem(item: ContextMenuItem): () => void;

package/types/lib/renderers/renderer.d.ts

@@ -22,17 +22,6 @@ export type Crosshair = {
 export declare const Y_AXIS_WIDTH = 65;
 export declare const X_AXIS_HEIGHT = 30;
 export declare const TRADE_SNAP_RADIUS = 12;
-export declare const COLORS: {
-    background: string;
-    buyLine: string;
-    sellLine: string;
-    grid: string;
-    label: string;
-    axisBg: string;
-    crosshair: string;
-    crosshairBg: string;
-    crosshairText: string;
-};
 export declare function computeRightScaleWidth(bounds: ViewBounds, symbolInfo: SymbolInfo | undefined, chartSettings: ChartSettings, hidePriceScale?: boolean, ctx?: CanvasRenderingContext2D | null): number;
 export declare function drawBaseLayer(canvas: HTMLCanvasElement, panes: ChartPane[], layouts: Record<string, Rect>, indicators: Indicator[], trades: TradePoint[], priceHistory: PriceHistory[], snapshots: BookSnapshot[], bounds: ViewBounds, footprintBars: FootprintBar[], heatmapBitmap: ImageBitmap | null, bitmapOffsetX: number, bitmapOffsetY: number, bitmapOffsetW: number, bitmapOffsetH: number, barNs: bigint, chartSettings: ChartSettings, horizon: bigint, candleCache: CandleCache | null, 
 /** Live incrementally-built open bar - overrides the cache for the current bucket. */
@@ -76,6 +65,7 @@ export declare function drawHeatmap(ctx: CanvasRenderingContext2D, snapshots: Bo
 export declare function nearestIndex(priceHistory: PriceHistory[], target: bigint): number;
 export declare function nearestTradeIndex(trades: TradePoint[], target: bigint): number;
 export declare function findNearestTrade(clickX: number, clickY: number, trades: TradePoint[], bounds: ViewBounds, chartW: number, chartH: number, chartSettings: ChartSettings, horizon: bigint, transformer: LiveTransformer): TradePoint | null;
+export declare function drawBackground(ctx: CanvasRenderingContext2D, cssW: number, cssH: number, chartSettings: ChartSettings): void;
 export declare const snapTs: (ts: bigint, tf: bigint, sessionMapper?: SessionMapper | null) => bigint;
 export declare const snapPrice: (snappedTs: bigint, rawPrice: number, chartSettings: ChartSettings, footprintBars: FootprintBar[], priceHistory: PriceHistory[], ohlcvBars: {
     time: number;

package/types/lib/types/chart-settings.d.ts

@@ -42,6 +42,9 @@ export type ChartSettings = {
     gridVerticalColor: string;
     crosshairMode: 'normal' | 'magnet' | 'hidden';
     crosshairColor: string;
+    /** The time and price boxes on the crosshair. */
+    crosshairLabelColor: string;
+    crosshairLabelTextColor: string;
     crosshairWidth: number;
     crosshairDash: number[];
     showBreaks: boolean;
@@ -56,8 +59,16 @@ export type ChartSettings = {
     statusLineFontSize: number;
     backgroundColor: string;
     axisBackgroundColor: string;
+    /** Tick labels on the price and time axis. */
+    axisTextColor: string;
+    /** The line between the plot and the axes. */
+    axisBorderColor: string;
+    /** Text on the colored price pills on the price axis. */
+    priceLabelTextColor: string;
     showBidLine: boolean;
     showAskLine: boolean;
+    bidLineColor: string;
+    askLineColor: string;
     showMidLine: boolean;
     showLastTradeLine: boolean;
     showFills: boolean;
@@ -74,6 +85,7 @@ export type ChartSettings = {
     sessionHighlightColor: string;
     horizonScrollEasing: 'none' | 'linear' | 'easeOut' | 'easeInOut';
     horizonScrollDuration: number;
+    touchMomentum: boolean;
     timezone: string;
     use24HourClock: boolean;
     showTimezoneLabel: boolean;
@@ -88,3 +100,8 @@ export declare const DEFAULT_CHART_SETTINGS: ChartSettings;
 export declare function diffChartSettings(settings: ChartSettings): Partial<ChartSettings>;
 /** Re-expand a settings diff back onto the current defaults. */
 export declare function mergeChartSettings(diff?: Partial<ChartSettings>): ChartSettings;
+/** The settings a theme can color. */
+export declare const CHART_COLOR_KEYS: readonly ["upBodyColor", "downBodyColor", "upWickColor", "downWickColor", "upBorderColor", "downBorderColor", "gridHorizontalColor", "gridVerticalColor", "crosshairColor", "crosshairLabelColor", "crosshairLabelTextColor", "breaksColor", "backgroundColor", "axisBackgroundColor", "axisTextColor", "axisBorderColor", "priceLabelTextColor", "bidLineColor", "askLineColor", "heatmapColorBid", "heatmapColorAsk", "priceLineColor", "sessionHighlightColor"];
+export type ChartColorKey = (typeof CHART_COLOR_KEYS)[number];
+export type ChartColors = Pick<ChartSettings, ChartColorKey>;
+export declare function themedSettings(settings: ChartSettings, colors?: Partial<ChartColors>): ChartSettings;