acttrader-charts 1.1.2 → 1.2.0-beta.2

package/README.md

@@ -1,4 +1,4 @@
-# acttrader-charts
+# ActCharts
 
 A performant, zero-dependency stock charting library built on Canvas 2D.
 Dual ESM/CJS output, TypeScript-first.
@@ -84,6 +84,35 @@ chart.removeIndicator('SMA');
 
 Indicator pills appear inline above the chart (up to 2 visible; beyond that collapses into a dropdown).
 
+#### Multiple instances of the same study
+
+Parameterized studies support **multiple simultaneous instances** — e.g. EMA-20, EMA-50 and
+EMA-200, or RSI-14 alongside RSI-7. Each instance gets an auto-cycled color so they're visually
+distinct, and oscillators (RSI, MACD, …) each render in their own stacked sub-pane.
+
+```ts
+chart.addIndicatorByName('EMA');                 // EMA-20 (default)
+chart.addIndicatorByName('EMA');                 // a 2nd EMA, different color
+// or build instances directly with different params:
+chart.addIndicator(new EMA(50, '#22c55e'));
+chart.addIndicator(new EMA(200, '#ef4444'));
+```
+
+Selecting an already-active study in the Studies dropdown **adds another instance**. Remove a
+specific instance via its pill **×** or the settings dialog's Remove button.
+
+Each instance has a unique `instanceId` (e.g. `"EMA#3"`). Listen for it via the `indicatorAdded`
+event and pass it to `removeIndicator` to target one instance:
+
+```ts
+chart.on('indicatorAdded', ({ instanceId, shortName, params }) => { /* track it */ });
+chart.removeIndicator('EMA#3');   // remove that one instance
+chart.removeIndicator('EMA');     // (back-compat) remove ALL EMA instances
+```
+
+A handful of studies remain **single-instance** (re-selecting toggles them off): `VOL`, `OBV`,
+`A/D`, `AO`, `VWAP`, `Ichimoku`, `PSAR`, `Pivot`, and Heikin-Ashi.
+
 ### Drawing Tools
 
 ```ts
@@ -115,6 +144,50 @@ To push ticks directly without an adapter (e.g. from your own WebSocket handler)
 chart.pushTick({ time: Date.now(), bid: 1.2055, ask: 1.2057, volume: 120 });
 ```
 
+### Compare symbols
+
+Overlay one or more comparison instruments on the main chart, normalized to
+percent change from the leftmost visible bar — TradingView-style. Compares are
+historical-only (no live streaming) and persist across primary symbol /
+timeframe switches; the library refetches them automatically against the new
+primary range whenever the chart's range changes.
+
+```ts
+const chart = new ChartEngine({
+    container: document.getElementById('chart')!,
+    symbol: 'AAPL',
+    isins: ['AAPL', 'MSFT', 'GOOG', 'SPY', 'NVDA'],
+    headerLayout: 'advanced',          // Compare button lives in this toolbar
+    initialCompares: ['SPY'],          // optional — added on first dataLoaded
+    maxCompares: 8,                    // optional — default 8
+    compareDataLoader: async ({ symbol, start, end, interval }) => {
+        const res = await fetch(
+            `/api/bars?symbol=${symbol}&interval=${interval}` +
+            `&start=${start.toISOString()}&end=${end.toISOString()}`
+        );
+        return res.json();             // OHLCVBar[]
+    },
+    dataLoader: async (params) => fetchBars('AAPL', params),
+});
+
+// Programmatic API
+await chart.addCompare('MSFT');
+chart.removeCompare('MSFT');
+chart.clearCompares();
+chart.getCompares(); // [{ symbol, color, status }]
+
+// Events
+chart.on('compareAdded',   ({ symbol, color }) => console.log('+', symbol));
+chart.on('compareRemoved', ({ symbol })        => console.log('-', symbol));
+chart.on('compareError',   ({ symbol, message }) => console.warn(symbol, message));
+```
+
+When any compare is active the Y-axis switches to percent (`+12.34%` /
+`-5.67%`); removing every compare returns it to absolute-price labels.
+The Compare button in the advanced toolbar opens an in-chart picker filtered
+by `isins` (with the primary symbol and active compares hidden). To keep the
+old consumer-owned flow, omit `compareDataLoader` and wire `onCompareClick`.
+
 ### Trade From Chart (TFC) — `setLevels`
 
 TFC renders draggable price levels for open positions and pending orders.
@@ -252,6 +325,7 @@ When `enableTrading` is on and live BID/ASK data is streaming, hovering / activa
 | `series` | | `"candlestick"` | Initial chart type |
 | `showVolume` | | `true` | Show volume overlay |
 | `showUI` | | `true` | Render top / bottom / left bars. When `false`, the loading overlay is also suppressed (mobile wrappers provide their own) |
+| `hideHeader` | | `false` | Hide only the chart header (TopBar / AdvancedToolbar / CompactToolbar, per `headerLayout`). Bottom bar, left drawing tools, and on-canvas overlays remain on their own flags. Drive the chart from your own UI via `setTimeframe(tf)`, `setSeries(type)`, `addIndicatorByName(name)`, `removeIndicator(name)` |
 | `showDrawingTools` | | `true` | Show drawing toolbar and pencil button |
 | `showFullscreenButton` | | `true` | Show the fullscreen toggle button in the top bar. Set to `false` to hide it entirely. Mobile wrappers (Android / iOS) default this to `false` |
 | `timeframe` | | `"1D"` | Initial timeframe |
@@ -274,6 +348,9 @@ When `enableTrading` is on and live BID/ASK data is streaming, hovering / activa
 | `targetCandleWidth` | | `10` | Target px width per candle for auto-calculating initial bar count |
 | `durationTimeframeMap` | | *(see below)* | Override duration → timeframe pairings |
 | `dataLoader` | | — | `(params) => Promise<OHLCVBar[]>` auto-called on load / change |
+| `compareDataLoader` | | — | `({ symbol, start, end, interval }) => Promise<OHLCVBar[]>` — fetches bars for a compare symbol. Set this to enable the library-owned Compare flow. |
+| `initialCompares` | | — | Symbols to auto-add as compares once the initial primary range is loaded |
+| `maxCompares` | | `8` | Maximum concurrent compare symbols. Adding beyond emits `compareError` |
 | `themeOverrides` | | — | Deep-partial color overrides applied on top of the built-in dark/light themes |
 | `uiConfig` | | `DEFAULT_UI_CONFIG` | Deep-partial size / font overrides per component |
 | `labels` | | `DEFAULT_LABELS` | Deep-partial string overrides for i18n/translation |
@@ -555,10 +632,16 @@ chart.setVolume(show: boolean): this
 ### Indicators
 
 ```ts
-chart.addIndicator(indicator: IIndicator): this
-chart.removeIndicator(name: string): this
+chart.addIndicator(indicator: IIndicator, initialParams?: IndicatorParams): this
+chart.addIndicatorByName(shortName: string, params?: IndicatorParams): void
+chart.removeIndicator(idOrShortName: string): this
 ```
 
+- `addIndicator` / `addIndicatorByName` — add a study. Multi-instance studies add a new instance
+  per call (auto-cycled color); single-instance studies toggle. `params` overrides period/color/source.
+- `removeIndicator` — pass an `instanceId` (e.g. `"EMA#3"`, from the `indicatorAdded` event) to remove
+  that one instance, or a `shortName` (e.g. `"EMA"`) to remove **all** instances of that type.
+
 ### Drawing Tools
 
 ```ts
@@ -786,6 +869,8 @@ chart.on('seriesChange',   ({ series }) => {});
 chart.on('streamStatus',   ({ status }) => {}); // 'connected' | 'reconnecting' | 'disconnected'
 chart.on('dataLoaded',     ({ timeframe, interval, start, end }) => {});
 chart.on('newBar',         ({ completedBar, openingBar, intervalMs }) => {});
+chart.on('indicatorAdded',   ({ instanceId, shortName, params }) => {}); // a study instance was added — keep instanceId to remove it later
+chart.on('indicatorRemoved', ({ instanceId, shortName }) => {});
 chart.on('stateChange',    ({ symbol, state }) => {
     // Fires after every user-driven config change (timeframe, series, theme,
     // indicators, drawings, volume). `state` is a full serializable snapshot.
@@ -817,6 +902,113 @@ chart.on('tradeLevelBracketActivated', ({ label, bracketType, price, isFullscree
 
 ---
 
+## Multi-Pane Layouts
+
+The library ships everything you need to put multiple synchronised `ChartEngine`s on one screen — preset definitions, a layout-picker popover, cross-pane sync, and a composite snapshot helper. The library *emits intent*; the host renders the grid.
+
+### Enabling the layout & snapshot UI
+
+Pass two flags to `ChartConfig` (and optionally pick a header variant):
+
+```ts
+const chart = new ChartEngine({
+    container,
+    headerLayout:          'advanced',  // 'simple' (default) | 'advanced' | 'compact'
+    enableMultipleLayouts: true,        // shows Layout button + 26 preset picker
+    enableSnapshot:        true,        // shows Snapshot button + Download/Copy popover
+});
+
+chart.on('layoutChange', ({ presetId, preset, sync }) => {
+    // Mount / teardown panes to match preset.count
+    // Apply sync flags to your ChartGroup
+});
+
+chart.on('snapshot', ({ dataUrl, action }) => {
+    // Native wrappers can intercept here to save via platform APIs
+});
+```
+
+### `ChartGroup` — cross-pane sync
+
+`ChartGroup` listens to events on the *active* engine and mirrors them to the others:
+
+| Sync flag    | Source event       | Action on other panes
+| ------------ | ------------------ | ----------------------------------------
+| `interval`   | `timeframeChange`  | `setTimeframe` (skip if equal)
+| `crosshair`  | `crosshair`        | `timeToBarIndex` → `setCrosshair`
+| `time`       | `pan`              | `setViewport({ startIndex, endIndex })`
+| `dateRange`  | `zoom`             | `setViewport({ startIndex, endIndex })`
+| `symbol`     | push (`broadcastSymbol`) | `setSymbol` (host still fetches data)
+
+```ts
+import { ChartGroup, DEFAULT_LAYOUT_SYNC } from 'acttrader-charts';
+
+const group = new ChartGroup({ sync: DEFAULT_LAYOUT_SYNC });
+group.add('p1', engineA);
+group.add('p2', engineB);
+group.setActive('p1');
+
+// react to user picking a preset
+chart.on('layoutChange', ({ sync }) => group.setSync(sync));
+
+// user picked a new symbol on the active pane
+group.broadcastSymbol('AAPL', 'p1');
+```
+
+`ChartEngine.setViewport` / `setCrosshair` deliberately do **not** re-emit `pan` / `zoom` / `crosshair`, so the mirror is safe from feedback loops.
+
+### Custom layout presets
+
+Register an extra preset alongside the 26 built-ins; it appears in the picker automatically:
+
+```ts
+import { registerCustomPreset } from 'acttrader-charts';
+
+registerCustomPreset({
+    id:    'my-3-wide-left',
+    count: 3,
+    cols:  '2fr 1fr',
+    rows:  '1fr 1fr',
+    areas: '"a b" "a c"',
+    areaOrder: ['a', 'b', 'c'],
+    icon:  '<svg>…</svg>',
+});
+```
+
+Persistence is the host's job — serialise the preset to your store, call `registerCustomPreset` again on app boot.
+
+### Composite snapshot of a multi-pane grid
+
+`SnapshotPopover` captures the single active chart. For a whole-grid PNG, hand the cell rectangles to the group:
+
+```ts
+const containerRect = gridEl.getBoundingClientRect();
+const rects = paneIds.map(id => {
+    const cell = cellEls.get(id)!.getBoundingClientRect();
+    return {
+        paneId: id,
+        x: cell.left - containerRect.left,
+        y: cell.top  - containerRect.top,
+        w: cell.width,
+        h: cell.height,
+    };
+});
+
+const dataUrl = group.toCompositeDataUrl({
+    width:  containerRect.width,
+    height: containerRect.height,
+    rects,
+});
+```
+
+The composite excludes trade levels (positions, SL/TP) — same rule as `chart.toDataUrl()`.
+
+### Native wrapper parity
+
+`enableMultipleLayouts`, `enableSnapshot`, `headerLayout`, the `layoutChange` event, and the `snapshot` event are all exposed by [charts-android](../charts-android) and [charts-ios](../charts-ios) — see their READMEs for native usage.
+
+---
+
 ## Custom Indicator
 
 Implement `IIndicator` and pass it to `addIndicator()`:

package/dist/{MACD-Dqi682ei.d.cts → MACD-BBW1QO3M.d.cts}

@@ -1,3 +1,50 @@
+/**
+ * Definition of a multi-chart layout preset (grid template).
+ * Used by the chart-owned LayoutPopover and emitted via the `layoutChange` event.
+ * The host project is responsible for actually mounting N panes per `count`.
+ */
+interface LayoutPreset {
+    id: string;
+    count: number;
+    cols: string;
+    rows: string;
+    areas?: string;
+    areaOrder?: string[];
+    icon: string;
+}
+/** Cross-pane sync toggles emitted alongside layoutChange. */
+interface LayoutSyncState {
+    symbol: boolean;
+    interval: boolean;
+    crosshair: boolean;
+    time: boolean;
+    dateRange: boolean;
+}
+declare const LAYOUT_PRESETS: LayoutPreset[];
+declare const PRESETS_BY_COUNT: Record<number, LayoutPreset[]>;
+declare const PRESET_COUNTS: number[];
+/**
+ * Register a preset that appears alongside the built-ins in `getAllPresets()`
+ * and the chart-owned `LayoutPopover`. Re-registering the same id overwrites.
+ * Throws when the id collides with a built-in preset.
+ */
+declare function registerCustomPreset(preset: LayoutPreset): void;
+/** Remove a previously registered custom preset. No-op for unknown ids. */
+declare function unregisterCustomPreset(id: string): void;
+/** All registered custom presets, in insertion order. */
+declare function getCustomPresets(): LayoutPreset[];
+/** Built-ins followed by registered custom presets. */
+declare function getAllPresets(): LayoutPreset[];
+/**
+ * Resolve a preset by id, checking custom presets first, then built-ins. Falls
+ * back to the single-pane preset when nothing matches.
+ */
+declare function getPreset(id: string): LayoutPreset;
+/** Human-readable label for each preset, useful in status bars / tooltips. */
+declare const PRESET_LABEL: Record<string, string>;
+/** Default sync state — matches the host's current defaults in useChartLayout.ts. */
+declare const DEFAULT_LAYOUT_SYNC: LayoutSyncState;
+
 declare class ScaleManager {
     private static readonly VERTICAL_PADDING_PX;
     xToPixel(index: number, viewport: Viewport, chartWidth: number): number;
@@ -37,6 +84,11 @@ interface DrawingToolbarUiConfig {
     btnGap: number;
     /** Container width (px) below which LeftBar switches to mobile layout */
     mobileBreakpoint: number;
+    /**
+     * Use Lucide-style modern SVG icons for the drawing toolbar categories.
+     * Default: `false` (original icons, unchanged for all existing consumers).
+     */
+    modernIcons?: boolean;
 }
 interface TopBarUiConfig {
     /** Height of the top bar strip */
@@ -354,6 +406,11 @@ interface ChartThemeUi {
         reconnecting: string;
         disconnected: string;
     };
+    /**
+     * Background color of the scroll-to-latest (➕) button.
+     * When omitted the button uses the chart background + axisBorder border (neutral style).
+     */
+    scrollToEndBtnBg?: string;
 }
 /** Colors specific to the drawing toolbar (LeftBar). */
 interface DrawingToolbarColors {
@@ -546,6 +603,13 @@ interface DataLoaderParams {
     end: Date;
     interval: string;
 }
+/**
+ * Params passed to `compareDataLoader`. Mirrors `DataLoaderParams` but also
+ * carries the compare symbol so a single loader can serve multiple compares.
+ */
+interface CompareDataLoaderParams extends DataLoaderParams {
+    symbol: string;
+}
 /**
  * Per-theme deep-partial color overrides applied on top of the built-in
  * dark / light themes.  Only the keys you supply are replaced.
@@ -935,6 +999,125 @@ interface ChartConfig {
      * Default: `false` (bar is hidden).
      */
     showBottomBar?: boolean;
+    /**
+     * Text-decoration for the clickable symbol name in the top-left OHLCV strip.
+     * Default: `'underline'` (existing behaviour).
+     * - `'underline'` → persistent underline whenever the symbol is clickable
+     * - `'none'`      → never underline; click handler still attached
+     * - `'hover'`     → no resting underline, but `:hover` / `:focus-visible` reveal one
+     *                   (preferred for branded designs that still want a link affordance)
+     */
+    symbolNameDecoration?: 'underline' | 'none' | 'hover';
+    /** Called when the user clicks "Add alert" in the trade popover. Omit to hide the alert row. */
+    onAddAlert?: (price: number) => void;
+    /**
+     * Header layout variant. Default `'simple'`.
+     * - `'simple'`   — original top-bar with dropdowns + duration buttons
+     * - `'advanced'` — compact toolbar with timeframe pills + Compare/1-Click
+     * - `'compact'`  — slim per-pane toolbar (timeframe + series + indicators only),
+     *                  sized for multi-pane grid cells. Symbol is changed via the
+     *                  on-canvas OHLC strip label (no symbol button in this variant).
+     *
+     * If both `headerLayout` and the deprecated `features.advancedToolbar` are set,
+     * `headerLayout` wins.
+     */
+    headerLayout?: 'simple' | 'advanced' | 'compact';
+    /**
+     * Hide the chart header entirely (simple TopBar / AdvancedToolbar /
+     * CompactToolbar — whichever `headerLayout` would have rendered).
+     *
+     * Use when the host UI provides its own controls and drives the chart via
+     * `setTimeframe`, `setSeries`, `addIndicatorByName`, `removeIndicator`.
+     *
+     * Independent of `showUI` (which hides ALL UI) and `showBottomBar` /
+     * drawing-tools / OHLC strip flags. Default: `false` (header visible).
+     */
+    hideHeader?: boolean;
+    /**
+     * Show the Layout button and built-in multi-chart layout preset popover.
+     * Default `false`. Works in both `'simple'` and `'advanced'` header layouts.
+     *
+     * The chart owns ONLY the picker UI. Selecting a preset emits a `layoutChange`
+     * event with `{ presetId, preset, sync }`; the host project is responsible for
+     * mounting the actual N-pane grid of ChartEngine instances and applying sync.
+     *
+     * Suppresses the deprecated `onLayoutClick` callback if also provided
+     * (a one-time `console.warn` is logged at init).
+     */
+    enableMultipleLayouts?: boolean;
+    /**
+     * Show the Snapshot button and built-in Download/Copy popover.
+     * Default `false`. Works in both `'simple'` and `'advanced'` header layouts.
+     *
+     * The chart emits a `snapshot` event with `{ dataUrl, action }` BEFORE
+     * attempting the native browser action — mobile wrappers (Android/iOS)
+     * can intercept via the JS bridge to use native APIs (Photos library,
+     * UIPasteboard, ClipboardManager) where browser permissions are restricted.
+     *
+     * Suppresses the deprecated `onScreenshotClick` callback if also provided
+     * (a one-time `console.warn` is logged at init).
+     */
+    enableSnapshot?: boolean;
+    /**
+     * Opt-in feature flags.  All flags default to `false` / disabled so existing
+     * consumers are completely unaffected when this field is omitted.
+     */
+    features?: {
+        /**
+         * @deprecated Use top-level `headerLayout: 'advanced'` instead. Will be
+         * removed in a future major version. Currently treated as an alias.
+         */
+        advancedToolbar?: boolean;
+    };
+    /**
+     * Fetches historical OHLC bars for a compare symbol. When provided, the
+     * library owns the Compare flow end-to-end: clicking the Compare button
+     * opens an in-chart picker (reusing `isins`), and this loader is invoked
+     * to populate each chosen compare. It is also re-invoked whenever the
+     * primary symbol's range changes (timeframe switch, primary-symbol switch,
+     * history pan-back, `resetData`) so compares stay aligned.
+     *
+     * No streaming — compares are historical-only in v1.
+     */
+    compareDataLoader?: (params: CompareDataLoaderParams) => Promise<OHLCVBar[]>;
+    /**
+     * Compare symbols to add automatically on chart init. Each one triggers a
+     * `compareDataLoader` call against the initial primary range.
+     */
+    initialCompares?: string[];
+    /**
+     * Maximum number of concurrent compare symbols. Attempting to add beyond
+     * this emits a `compareError` event instead of fetching. Default: `8`.
+     */
+    maxCompares?: number;
+    /**
+     * @deprecated With `enableMultipleLayouts: true`, the chart owns the popover
+     * and emits a `layoutChange` event. Listen to that event instead.
+     * Still honored when `enableMultipleLayouts` is omitted/false.
+     */
+    onLayoutClick?: () => void;
+    /**
+     * Called when the user toggles the 1-Click Trade button. Receives the new
+     * active state as a boolean. The button is rendered in whichever toolbar is
+     * active (default `TopBar` or `AdvancedToolbar`).
+     *
+     * **When omitted, the 1-Click Trade button is hidden** — callback presence
+     * gates the button's visibility, matching the pattern used by
+     * `onLayoutClick` / `onScreenshotClick`.
+     */
+    onOneClickTradeToggle?: (active: boolean) => void;
+    /**
+     * @deprecated Renamed to `onOneClickTradeToggle` for clarity. Will be
+     * removed in a future major version. If both are provided,
+     * `onOneClickTradeToggle` wins and a console warning is emitted.
+     */
+    onOneClickToggle?: (active: boolean) => void;
+    /**
+     * @deprecated With `enableSnapshot: true`, the chart owns the popover and
+     * emits a `snapshot` event. Listen to that event instead.
+     * Still honored when `enableSnapshot` is omitted/false.
+     */
+    onScreenshotClick?: () => void;
     /**
      * @deprecated DraftOrderQtyInput has been removed. This option is a no-op.
      * Accepted for backward compatibility only.
@@ -1045,6 +1228,13 @@ interface IWebSocketAdapter {
 }
 type IndicatorParams = Record<string, number | string>;
 interface ActiveIndicatorState {
+    /**
+     * Unique per-instance identifier (e.g. "EMA#3"). Distinguishes multiple
+     * active instances of the same indicator type. All per-instance state and
+     * UI (results cache, sub-pane overlays, scale factors, pills) is keyed by
+     * this, not by `shortName` — so e.g. EMA-20, EMA-50 and EMA-200 can coexist.
+     */
+    instanceId: string;
     indicator: IIndicator;
     shortName: string;
     currentParams: IndicatorParams;
@@ -1067,6 +1257,12 @@ interface IndicatorStateEntry {
     shortName: string;
     params: IndicatorParams;
     visible?: boolean;
+    /**
+     * Per-instance id captured at serialization time. Optional for backward
+     * compatibility — configs saved before multi-instance support omit it, and
+     * `setState` mints a fresh id when it's absent.
+     */
+    instanceId?: string;
 }
 /** Color overrides for the chart canvas elements (background, grid, candles, etc.). */
 interface CanvasColorSettings {
@@ -1126,6 +1322,11 @@ interface ChartState {
         factor: number;
         panOffset: number;
     };
+    /**
+     * Active compare symbols at snapshot time. The library will re-add each
+     * one (in order) via `compareDataLoader` when this state is restored.
+     */
+    compares?: string[];
 }
 interface CrosshairPosition {
     x: number;
@@ -1135,7 +1336,12 @@ interface CrosshairPosition {
     bar: OHLCVBar | null;
 }
 type ChartEventMap = {
-    crosshair: CrosshairPosition;
+    /**
+     * Crosshair position changed. Payload is `null` when the crosshair leaves
+     * the chart area or is otherwise cleared — listeners that mirror crosshair
+     * across multiple panes use `null` to clear the mirrored crosshair.
+     */
+    crosshair: CrosshairPosition | null;
     click: CrosshairPosition;
     zoom: {
         viewport: Viewport;
@@ -1327,6 +1533,60 @@ type ChartEventMap = {
             bracketOrderLabel?: string;
         }>;
     };
+    /**
+     * Emitted when the user picks a preset in the multi-layout popover or toggles
+     * a sync option. Fires only when `enableMultipleLayouts: true`. The host
+     * project listens to this event to mount/teardown N panes accordingly.
+     */
+    layoutChange: {
+        presetId: string;
+        preset: LayoutPreset;
+        sync: LayoutSyncState;
+    };
+    /**
+     * Emitted when the user picks Download or Copy from the snapshot popover.
+     * Fires only when `enableSnapshot: true`. The chart attempts the native
+     * browser action immediately after emitting; mobile wrappers can intercept
+     * via the JS bridge to short-circuit and use platform APIs.
+     */
+    snapshot: {
+        /** Full PNG data URL of the composited chart canvas. */
+        dataUrl: string;
+        action: 'download' | 'copy';
+    };
+    /** Emitted after a compare symbol has been added and its bars resolved. */
+    compareAdded: {
+        symbol: string;
+        color: string;
+    };
+    /** Emitted when a compare symbol is removed (×, `removeCompare`, or `clearCompares`). */
+    compareRemoved: {
+        symbol: string;
+    };
+    /**
+     * Emitted when adding a compare or fetching its bars fails — e.g. no
+     * `compareDataLoader` configured, loader rejected, or `maxCompares` reached.
+     */
+    compareError: {
+        symbol: string;
+        message: string;
+    };
+    /**
+     * Emitted after an indicator instance is added. `instanceId` uniquely
+     * identifies the instance (e.g. "EMA#3") so callers can later remove that
+     * specific instance via `removeIndicator(instanceId)` — important now that
+     * multiple instances of the same `shortName` can coexist.
+     */
+    indicatorAdded: {
+        instanceId: string;
+        shortName: string;
+        params: IndicatorParams;
+    };
+    /** Emitted after an indicator instance is removed (pill ×, settings dialog, or `removeIndicator`). */
+    indicatorRemoved: {
+        instanceId: string;
+        shortName: string;
+    };
 };
 /** Distinguishes level types: historical trade, open position, or pending order. */
 type TradeLevelType = 'trade' | 'position' | 'pending';
@@ -1518,4 +1778,4 @@ declare class MACD implements IIndicator {
     render(ctx: CanvasRenderingContext2D, results: IndicatorResult[], scale: ScaleManager, viewport: Viewport, paneHeight: number, rangeOverride?: PriceRange): void;
 }
 
-export { type IndicatorOverlayColors as $, type AnyDrawingStyle as A, BollingerBands as B, type ChartConfig as C, type DrawingToolType as D, DEFAULT_DRAWING_TOOLBAR_CONFIG as E, DEFAULT_INDICATOR_OVERLAY_CONFIG as F, DEFAULT_LABELS as G, DEFAULT_PRICE_AXIS_CONFIG as H, type IIndicator as I, DEFAULT_TIME_AXIS_CONFIG as J, DEFAULT_TOP_BAR_CONFIG as K, DEFAULT_TRADE_BUTTON_CONFIG as L, DEFAULT_UI_CONFIG as M, type DataLoaderParams as N, type OHLCVBar as O, type PriceRange as P, type DeepPartial$1 as Q, type DeepPartialChartTheme as R, type SeriesType as S, type Timeframe as T, type DialogLabels as U, type Viewport as V, type DrawingToolbarColors as W, type DrawingToolbarLabels as X, type DrawingToolbarUiConfig as Y, type Duration as Z, EMA as _, type ChartEventMap as a, type IndicatorOverlayUiConfig as a0, type IndicatorParams as a1, type IndicatorResult as a2, type IndicatorStateEntry as a3, LIGHT_THEME as a4, MACD as a5, type OhlcLabels as a6, type OrderSubmit as a7, type Padding as a8, type PendingOrderLevel as a9, type PositionLevel as aa, type PositionRenderStyle as ab, type PriceAxisUiConfig as ac, RSI as ad, SMA as ae, type Theme as af, type ThemeOverrides as ag, type TimeAxisUiConfig as ah, type TopBarColors as ai, type TopBarLabels as aj, type TopBarUiConfig as ak, type TradeButtonUiConfig as al, type TradeDisplayFilter as am, type TradeLabels as an, type TradeLevel as ao, type TradeLevelColors as ap, type TradePanelColors as aq, type UiConfig as ar, deepMergeTheme as as, resolveCssVarsInTheme as at, resolveLabels as au, resolveUiConfig as av, type PriceSource as aw, type ChartState as b, type IDrawing as c, type IWebSocketAdapter as d, type TradeLevelType as e, type AnyLevel as f, type DrawingPoint as g, ScaleManager as h, type DrawingHandle as i, type ChartTheme as j, type SerializedDrawing as k, type Tick as l, type StreamStatus as m, type ActiveIndicatorState as n, type BottomBarColors as o, type BottomBarLabels as p, type BottomBarUiConfig as q, type CanvasColorSettings as r, type ChartLabels as s, type ChartMiscLabels as t, type ChartThemeUi as u, type CrosshairPosition as v, type CrosshairUiConfig as w, DARK_THEME as x, DEFAULT_BOTTOM_BAR_CONFIG as y, DEFAULT_CROSSHAIR_CONFIG as z };
+export { type DrawingToolbarUiConfig as $, type AnyDrawingStyle as A, BollingerBands as B, type ChartConfig as C, type DrawingToolType as D, DEFAULT_CROSSHAIR_CONFIG as E, DEFAULT_DRAWING_TOOLBAR_CONFIG as F, DEFAULT_INDICATOR_OVERLAY_CONFIG as G, DEFAULT_LABELS as H, type IIndicator as I, DEFAULT_LAYOUT_SYNC as J, DEFAULT_PRICE_AXIS_CONFIG as K, type LayoutSyncState as L, DEFAULT_TIME_AXIS_CONFIG as M, DEFAULT_TOP_BAR_CONFIG as N, type OHLCVBar as O, type PriceRange as P, DEFAULT_TRADE_BUTTON_CONFIG as Q, DEFAULT_UI_CONFIG as R, type SeriesType as S, type Timeframe as T, type DataLoaderParams as U, type Viewport as V, type DeepPartial$1 as W, type DeepPartialChartTheme as X, type DialogLabels as Y, type DrawingToolbarColors as Z, type DrawingToolbarLabels as _, type IndicatorParams as a, type Duration as a0, EMA as a1, type IndicatorOverlayColors as a2, type IndicatorOverlayUiConfig as a3, type IndicatorResult as a4, type IndicatorStateEntry as a5, LAYOUT_PRESETS as a6, LIGHT_THEME as a7, type LayoutPreset as a8, MACD as a9, getAllPresets as aA, getCustomPresets as aB, getPreset as aC, registerCustomPreset as aD, resolveCssVarsInTheme as aE, resolveLabels as aF, resolveUiConfig as aG, unregisterCustomPreset as aH, type PriceSource as aI, type OhlcLabels as aa, type OrderSubmit as ab, PRESETS_BY_COUNT as ac, PRESET_COUNTS as ad, PRESET_LABEL as ae, type Padding as af, type PendingOrderLevel as ag, type PositionLevel as ah, type PositionRenderStyle as ai, type PriceAxisUiConfig as aj, RSI as ak, SMA as al, type Theme as am, type ThemeOverrides as an, type TimeAxisUiConfig as ao, type TopBarColors as ap, type TopBarLabels as aq, type TopBarUiConfig as ar, type TradeButtonUiConfig as as, type TradeDisplayFilter as at, type TradeLabels as au, type TradeLevel as av, type TradeLevelColors as aw, type TradePanelColors as ax, type UiConfig as ay, deepMergeTheme as az, type ChartEventMap as b, type ChartState as c, type IDrawing as d, type IWebSocketAdapter as e, type TradeLevelType as f, type ChartTheme as g, type AnyLevel as h, type DrawingPoint as i, ScaleManager as j, type DrawingHandle as k, type SerializedDrawing as l, type Tick as m, type StreamStatus as n, type ActiveIndicatorState as o, type BottomBarColors as p, type BottomBarLabels as q, type BottomBarUiConfig as r, type CanvasColorSettings as s, type ChartLabels as t, type ChartMiscLabels as u, type ChartThemeUi as v, type CrosshairPosition as w, type CrosshairUiConfig as x, DARK_THEME as y, DEFAULT_BOTTOM_BAR_CONFIG as z };