acttrader-charts 1.3.0-beta.14 → 1.3.0-beta.16

package/README.md

@@ -58,12 +58,15 @@ chart.on('durationChange', ({ duration, timeframe }) => {
 ```ts
 const chart = new ChartEngine({
     container,
-    dataLoader: async ({ start, end, interval }) => {
-        const res = await fetch(`/api/bars?from=${start.getTime()}&to=${end.getTime()}&tf=${interval}`);
+    dataLoader: async ({ start, end, interval, priceSource }) => {
+        // `priceSource` ('bid' | 'ask' | 'ltp') is the candle source the chart is showing —
+        // pass it to your history API so the bars match (dealing feeds: LTP vs BID candles).
+        const res = await fetch(`/api/bars?from=${start.getTime()}&to=${end.getTime()}&tf=${interval}&source=${priceSource}`);
         return res.json(); // OHLCVBar[]
     },
 });
-// No manual loadData() needed — the engine calls dataLoader on start and on timeframe/duration changes.
+// No manual loadData() needed — the engine calls dataLoader on start, on timeframe/duration
+// changes, and (unless `reloadOnPriceSourceChange: false`) whenever the price source changes.
 ```
 
 If the first fetch returns fewer than `minInitialBars` (default `10`), the engine automatically widens the lookback window and calls `dataLoader` again — up to the `maxLookbackMs` ceiling (default 365 days). This keeps the chart useful on weekends, holidays, or for instruments that just listed. If retries still yield zero bars, the engine shows a **"No data available"** overlay (customise the text via `labels.chart.noData`).
@@ -171,6 +174,8 @@ dealingChart.setTickClosePriceSource('bid');
 dealingChart.on('priceSourceChange', ({ source }) => saveTradeSetting(source));
 ```
 
+**History follows the source.** Switching the source (dropdown pick or `setTickClosePriceSource()`) does not just change how live ticks extend the last candle — the engine re-runs your `dataLoader` with `params.priceSource` set to the new value and replaces the loaded bars, keeping the visible time window. Forward `priceSource` to your charting API (e.g. as a query parameter) so it returns LTP-built or BID-built candles accordingly; without it the API keeps serving the old source and the chart cannot change. Set `reloadOnPriceSourceChange: false` to opt out of the re-fetch.
+
 ### Compare symbols
 
 Overlay one or more comparison instruments on the main chart, normalized to
@@ -348,6 +353,8 @@ const chart = new ChartEngine({
   container,
   features: { orderLineTimeDrag: true }, // host enables this only for the gated broker
   orderLineDragSnap: true,               // snap to nearest candle on release (default)
+  orderLineAnchorPersistence: true,      // remember dropped positions in localStorage (default)
+  orderLineDefaultAnchor: 'center',      // un-dragged badges start mid-chart (default: 'timestamp')
 });
 
 chart.setLevels(
@@ -365,6 +372,8 @@ chart.on('orderLineMoved', ({ label, fromTimestamp, toTimestamp, data }) => {
 - **Snap:** controlled by `orderLineDragSnap` (default `true`); set `false` to keep the exact released time.
 - **Escape / touch-cancel:** reverts the badge to its starting candle without emitting `orderLineMoved`.
 - **Stays put after release:** the chart holds the dropped position across `setLevels` refreshes until you echo the new `timestamp` back (auto-released on match).
+- **Survives reloads:** with `orderLineAnchorPersistence` (default `true`) the dropped candle time is saved in `localStorage` under `finchart.orderLineTimeAnchors`, keyed by the level's label. After a page reload the badge returns to that candle even if your `setLevels()` payload still carries the order's original `timestamp` — the persisted anchor wins until the badge is dragged again. Capped at the 500 most recently dragged labels; set `false` if you persist anchors server-side instead.
+- **New orders at the center:** with `orderLineDefaultAnchor: 'center'` a `timeDraggable` level that has never been dragged ignores its `timestamp` and renders mid-chart — so a freshly filled market order arrives in the middle of the chart rather than pinned to the latest candle at the right edge. Levels that are not `timeDraggable` still honor `timestamp`. Default `'timestamp'` keeps the previous behavior.
 - A level **without** `timestamp` renders exactly as before (badge centered), so existing consumers are unaffected.
 
 ---
@@ -405,7 +414,7 @@ chart.on('orderLineMoved', ({ label, fromTimestamp, toTimestamp, data }) => {
 | `momentumMaxVelocity` | | `6.0` | Max launch velocity (px/ms) — caps hard-flick speed |
 | `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 |
+| `dataLoader` | | — | `({ start, end, interval, priceSource }) => Promise<OHLCVBar[]>` auto-called on load, timeframe/duration change, and price-source change. `priceSource` is the candle source to fetch (`'bid'`, `'ask'` or `'ltp'`) |
 | `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` |
@@ -414,7 +423,8 @@ chart.on('orderLineMoved', ({ label, fromTimestamp, toTimestamp, data }) => {
 | `labels` | | `DEFAULT_LABELS` | Deep-partial string overrides for i18n/translation |
 | `tickClosePriceSource` | | `"bid"` | Which price drives live tick close/high/low: `"bid"`, `"ask"`, or `"ltp"` (build candles from the last traded price — exchange/dealing feeds; ticks without a valid LTP fall back to the bid) |
 | `showLtpPrice` | | unset | Show the LTP marker (dashed price line + axis tag). Unset: shown only in `"ltp"` mode. `true`: always shown when the feed supplies an LTP. `false`: hidden even in `"ltp"` mode (candles still build from the LTP). Toggle at runtime with `chart.setShowLtpPrice(show)` |
-| `priceSourceSelector` | | unset | Show a price-source dropdown in the chart header listing the given sources, e.g. `["ltp", "bid"]` (dealing feeds). A user pick switches the live candle source and emits `priceSourceChange`; sync it programmatically with `chart.setTickClosePriceSource(source)`. Hidden when unset/empty. Default header layout only |
+| `priceSourceSelector` | | unset | Show a price-source dropdown in the chart header listing the given sources, e.g. `["ltp", "bid"]` (dealing feeds). A user pick switches the candle source, re-fetches history via `dataLoader` (see `reloadOnPriceSourceChange`) and emits `priceSourceChange`; sync it programmatically with `chart.setTickClosePriceSource(source)`. Hidden when unset/empty. Default header layout only |
+| `reloadOnPriceSourceChange` | | `true` | Re-run `dataLoader` with the new `params.priceSource` whenever the candle price source changes, so historical candles are rebuilt from the selected price (LTP vs BID) and not only the live one. The visible time window is preserved. Set `false` to keep only live ticks following the new source |
 | `showBidAskLines` | | `false` | **Deprecated** — show both bid and ask as dashed lines during a live stream. Prefer the per-line checks `showAskLine` / `showBidLine`, which override it when set |
 | `showAskLine` | | unset | Show the Ask price line (dashed line + axis tag) independently. Unset: legacy `showBidAskLines` behavior. Toggle at runtime with `chart.setShowAskLine(show)` |
 | `showBidLine` | | unset | Show the Bid price line (dashed line + axis tag) independently. Unset: legacy `showBidAskLines` behavior. Toggle at runtime with `chart.setShowBidLine(show)` |
@@ -432,6 +442,8 @@ chart.on('orderLineMoved', ({ label, fromTimestamp, toTimestamp, data }) => {
 | `tfcEnabled` | | `true` | Enable the TFC toggle button in the top bar. When `false`, TFC is completely disabled — the toggle button is hidden and all trade levels, draft orders, and the floating trade button are suppressed |
 | `features.orderLineTimeDrag` | | `false` | Enable **horizontal (time-axis) order-line dragging**. A level with `timeDraggable: true` can have its info-box badge dragged left/right to re-anchor the order to a different candle — **price stays locked**. Emits `orderLineMoved` on release. Off by default; intended to be enabled per broker (e.g. Hankotrade) by the host app |
 | `orderLineDragSnap` | | `true` | When horizontal dragging is enabled, snap the badge to the nearest candle on release. Set `false` to keep the exact released time |
+| `orderLineAnchorPersistence` | | `true` | When horizontal dragging is enabled, remember where each badge was dropped in `localStorage` (key `finchart.orderLineTimeAnchors`, keyed by level label) so it comes back to the same candle after a reload. A persisted anchor overrides the level's `timestamp` until the badge is dragged again. Set `false` to persist anchors yourself |
+| `orderLineDefaultAnchor` | | `'timestamp'` | Where an un-dragged `timeDraggable` badge sits: `'timestamp'` = over the candle at the level's `timestamp`; `'center'` = the chart's horizontal center (ignores `timestamp`), so a new market order lands mid-chart. Non-draggable levels always honor `timestamp` |
 | `levelClusteringEnabled` | | `true` | Enable trade-level fan-out clustering; overlapping levels group into expandable badges |
 | `clusterThresholdDistance` | | `20` | Pixel proximity threshold for clustering (only when `levelClusteringEnabled` is `true`) |
 | `hideSymbolAndTick` | | `false` | Hide the symbol name and tick-activity (streaming) dot in the top-left overlay. Does **not** affect the OHLC(V) strip — use `hideOHLCV` for that |
@@ -1181,7 +1193,7 @@ chart.on('durationChange', ({ duration, timeframe }) => {});
 chart.on('seriesChange',   ({ series }) => {});
 chart.on('priceSourceChange', ({ source }) => {});   // header BID/ASK/LTP dropdown pick
 chart.on('streamStatus',   ({ status }) => {}); // 'connected' | 'reconnecting' | 'disconnected'
-chart.on('dataLoaded',     ({ timeframe, interval, start, end }) => {});
+chart.on('dataLoaded',     ({ timeframe, interval, start, end, priceSource }) => {});
 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 }) => {});
@@ -1212,8 +1224,8 @@ chart.on('tradeLevelBracketDrag', ({ label, bracketType, newPrice, data }) => {}
 chart.on('orderLineMoveStart', ({ label, fromTimestamp, fromBarIndex, isFullscreen }) => {});
 chart.on('orderLineMoving',    ({ label, toTimestamp, toBarIndex, isFullscreen }) => {}); // fires on every move
 chart.on('orderLineMoved',     ({ label, fromTimestamp, toTimestamp, fromBarIndex, toBarIndex, data, isFullscreen }) => {
-    // Persist the new time anchor for this order. Echo `timestamp: toTimestamp` back in your
-    // next setLevels() payload so the badge stays put across refreshes.
+    // The chart already remembers the drop in localStorage (orderLineAnchorPersistence, default on).
+    // Hook here only if you also want to persist the new time anchor server-side.
 });
 
 // Fires after addLevelBracket() auto-places a bracket, delivering the computed price back to the caller

package/dist/{MACD-C42nYzfa.d.cts → MACD-lXwCQ5We.d.cts}

@@ -603,6 +603,15 @@ interface DataLoaderParams {
     start: Date;
     end: Date;
     interval: string;
+    /**
+     * Which price the chart is currently building candles from
+     * (`tickClosePriceSource`: `'bid'`, `'ask'` or `'ltp'`). Forward it to your
+     * history API (e.g. as a query parameter) so the fetched bars match the
+     * source the user picked in the header dropdown — the engine re-runs the
+     * loader with the new value whenever the source changes. Always set by the
+     * engine; optional only so callers that build params by hand keep compiling.
+     */
+    priceSource?: 'bid' | 'ask' | 'ltp';
 }
 /**
  * Params passed to `compareDataLoader`. Mirrors `DataLoaderParams` but also
@@ -920,6 +929,14 @@ interface ChartConfig {
      * Rendered by the default header layout.
      */
     priceSourceSelector?: Array<'bid' | 'ask' | 'ltp'>;
+    /**
+     * Re-run `dataLoader` whenever the candle price source changes (a header
+     * dropdown pick or `setTickClosePriceSource()`), passing the new source as
+     * `params.priceSource`, so the historical candles are rebuilt from the
+     * selected price and not just the live one. Set `false` to keep the old
+     * behavior where only live ticks follow the new source. Default: `true`.
+     */
+    reloadOnPriceSourceChange?: boolean;
     /**
      * When the combined count of open positions and pending orders exceeds this
      * number, the position render style auto-defaults to `'dot'` (compact).
@@ -1295,6 +1312,26 @@ interface ChartConfig {
      * keeps the exact (interpolated) time it was released at. Default: `true`.
      */
     orderLineDragSnap?: boolean;
+    /**
+     * Remember where each horizontally-dragged order-line badge was dropped in
+     * `localStorage` (keyed by the level's label, i.e. your order/trade id) so it comes back
+     * to the same candle after a page reload — even when the next `setLevels()` payload
+     * carries the order's original `timestamp`. A persisted anchor takes precedence over
+     * the level's `timestamp` until the label is dragged again. Bounded to the 500 most
+     * recently dragged labels. Only relevant when `features.orderLineTimeDrag` is enabled.
+     * Default: `true`.
+     */
+    orderLineAnchorPersistence?: boolean;
+    /**
+     * Where a `timeDraggable` level's badge sits before the user has dragged it:
+     * - `'timestamp'` (default): over the candle at the level's `timestamp`, as before.
+     * - `'center'`: at the chart's horizontal center, ignoring the level's `timestamp`, so a
+     *   freshly placed market order arrives mid-chart instead of pinned to the latest candle.
+     *   Once the user drags the badge it is anchored to (and persisted at) the dropped candle.
+     * Levels that are not `timeDraggable` always honor their `timestamp`.
+     * Only relevant when `features.orderLineTimeDrag` is enabled.
+     */
+    orderLineDefaultAnchor?: 'timestamp' | 'center';
 }
 interface IndicatorResult {
     index: number;
@@ -1569,7 +1606,9 @@ type ChartEventMap = {
     };
     /** Emitted when the user picks a price source (BID / ASK / LTP) from the
      *  header dropdown (`priceSourceSelector`). Not emitted for programmatic
-     *  `setTickClosePriceSource()` calls. */
+     *  `setTickClosePriceSource()` calls. By the time this fires the engine has
+     *  already switched the live source and (unless `reloadOnPriceSourceChange`
+     *  is `false`) started re-fetching history via `dataLoader`. */
     priceSourceChange: {
         source: 'bid' | 'ask' | 'ltp';
     };
@@ -1583,6 +1622,8 @@ type ChartEventMap = {
         interval: string;
         start: Date;
         end: Date;
+        /** Candle price source the bars were requested with (see `DataLoaderParams.priceSource`). */
+        priceSource: 'bid' | 'ask' | 'ltp';
     };
     /** Emitted when the user clicks the × button on a trade, position, or bracket (SL/TP) level. */
     tradeLevelClose: {

package/dist/{MACD-C42nYzfa.d.ts → MACD-lXwCQ5We.d.ts}

@@ -603,6 +603,15 @@ interface DataLoaderParams {
     start: Date;
     end: Date;
     interval: string;
+    /**
+     * Which price the chart is currently building candles from
+     * (`tickClosePriceSource`: `'bid'`, `'ask'` or `'ltp'`). Forward it to your
+     * history API (e.g. as a query parameter) so the fetched bars match the
+     * source the user picked in the header dropdown — the engine re-runs the
+     * loader with the new value whenever the source changes. Always set by the
+     * engine; optional only so callers that build params by hand keep compiling.
+     */
+    priceSource?: 'bid' | 'ask' | 'ltp';
 }
 /**
  * Params passed to `compareDataLoader`. Mirrors `DataLoaderParams` but also
@@ -920,6 +929,14 @@ interface ChartConfig {
      * Rendered by the default header layout.
      */
     priceSourceSelector?: Array<'bid' | 'ask' | 'ltp'>;
+    /**
+     * Re-run `dataLoader` whenever the candle price source changes (a header
+     * dropdown pick or `setTickClosePriceSource()`), passing the new source as
+     * `params.priceSource`, so the historical candles are rebuilt from the
+     * selected price and not just the live one. Set `false` to keep the old
+     * behavior where only live ticks follow the new source. Default: `true`.
+     */
+    reloadOnPriceSourceChange?: boolean;
     /**
      * When the combined count of open positions and pending orders exceeds this
      * number, the position render style auto-defaults to `'dot'` (compact).
@@ -1295,6 +1312,26 @@ interface ChartConfig {
      * keeps the exact (interpolated) time it was released at. Default: `true`.
      */
     orderLineDragSnap?: boolean;
+    /**
+     * Remember where each horizontally-dragged order-line badge was dropped in
+     * `localStorage` (keyed by the level's label, i.e. your order/trade id) so it comes back
+     * to the same candle after a page reload — even when the next `setLevels()` payload
+     * carries the order's original `timestamp`. A persisted anchor takes precedence over
+     * the level's `timestamp` until the label is dragged again. Bounded to the 500 most
+     * recently dragged labels. Only relevant when `features.orderLineTimeDrag` is enabled.
+     * Default: `true`.
+     */
+    orderLineAnchorPersistence?: boolean;
+    /**
+     * Where a `timeDraggable` level's badge sits before the user has dragged it:
+     * - `'timestamp'` (default): over the candle at the level's `timestamp`, as before.
+     * - `'center'`: at the chart's horizontal center, ignoring the level's `timestamp`, so a
+     *   freshly placed market order arrives mid-chart instead of pinned to the latest candle.
+     *   Once the user drags the badge it is anchored to (and persisted at) the dropped candle.
+     * Levels that are not `timeDraggable` always honor their `timestamp`.
+     * Only relevant when `features.orderLineTimeDrag` is enabled.
+     */
+    orderLineDefaultAnchor?: 'timestamp' | 'center';
 }
 interface IndicatorResult {
     index: number;
@@ -1569,7 +1606,9 @@ type ChartEventMap = {
     };
     /** Emitted when the user picks a price source (BID / ASK / LTP) from the
      *  header dropdown (`priceSourceSelector`). Not emitted for programmatic
-     *  `setTickClosePriceSource()` calls. */
+     *  `setTickClosePriceSource()` calls. By the time this fires the engine has
+     *  already switched the live source and (unless `reloadOnPriceSourceChange`
+     *  is `false`) started re-fetching history via `dataLoader`. */
     priceSourceChange: {
         source: 'bid' | 'ask' | 'ltp';
     };
@@ -1583,6 +1622,8 @@ type ChartEventMap = {
         interval: string;
         start: Date;
         end: Date;
+        /** Candle price source the bars were requested with (see `DataLoaderParams.priceSource`). */
+        priceSource: 'bid' | 'ask' | 'ltp';
     };
     /** Emitted when the user clicks the × button on a trade, position, or bracket (SL/TP) level. */
     tradeLevelClose: {

package/dist/index.cjs

@@ -18425,6 +18425,7 @@ var DrawingStylePopover = class {
     input.value = current;
     input.title = "Level ratio \u2014 press Enter to apply";
     input.enterKeyHint = "go";
+    input.tabIndex = -1;
     Object.assign(input.style, {
       width: "58px",
       padding: "2px 4px",
@@ -18436,16 +18437,6 @@ var DrawingStylePopover = class {
       borderRadius: "3px",
       outline: "none"
     });
-    input.addEventListener("focus", () => {
-      input.style.borderColor = this.theme.ui.accent;
-    });
-    input.addEventListener("blur", () => {
-      input.style.borderColor = this.theme.axisBorder;
-    });
-    input.addEventListener("keydown", (e) => {
-      e.stopPropagation();
-      if (e.key === "Enter") input.blur();
-    });
     const commit = () => {
       const raw = Number(input.value);
       const next = Number.isFinite(raw) ? levelKey(raw) : null;
@@ -18461,6 +18452,17 @@ var DrawingStylePopover = class {
       input.value = next;
       onCommit(next);
     };
+    input.addEventListener("focus", () => {
+      input.style.borderColor = this.theme.ui.accent;
+    });
+    input.addEventListener("blur", () => {
+      input.style.borderColor = this.theme.axisBorder;
+      commit();
+    });
+    input.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      if (e.key === "Enter") input.blur();
+    });
     input.addEventListener("change", commit);
     return input;
   }
@@ -18503,6 +18505,10 @@ var DrawingStylePopover = class {
       cb.addEventListener("change", () => {
         this.emit({ levels: { [key]: { visible: cb.checked, color } } });
       });
+      cb.tabIndex = -1;
+      swatch.querySelectorAll("input").forEach((control) => {
+        control.tabIndex = -1;
+      });
       panel.append(cb, editable ? this.buildLevelRatioInput(
         k,
         taken,
@@ -19788,6 +19794,101 @@ var OrderLineTimeDragHandler = class _OrderLineTimeDragHandler {
   }
 };
 
+// src/interaction/OrderLineAnchorStore.ts
+var ORDER_LINE_ANCHORS_LS_KEY = "finchart.orderLineTimeAnchors";
+var ORDER_LINE_ANCHORS_MAX_ENTRIES = 500;
+var OrderLineAnchorStore = class {
+  constructor(_storage, _key = ORDER_LINE_ANCHORS_LS_KEY, _maxEntries = ORDER_LINE_ANCHORS_MAX_ENTRIES) {
+    this._storage = _storage;
+    this._key = _key;
+    this._maxEntries = _maxEntries;
+    this._entries = /* @__PURE__ */ new Map();
+    this._load();
+  }
+  /** The page's `localStorage`, or `null` when it is absent or access throws. */
+  static browserStorage() {
+    try {
+      if (typeof localStorage === "undefined") return null;
+      return localStorage;
+    } catch {
+      return null;
+    }
+  }
+  /** Persisted unix-ms anchor for `label`, or `undefined` when none was saved. */
+  get(label) {
+    return this._entries.get(label)?.ts;
+  }
+  has(label) {
+    return this._entries.has(label);
+  }
+  /** Number of persisted anchors. */
+  get size() {
+    return this._entries.size;
+  }
+  /**
+   * Records the candle time `label`'s badge was dropped on and writes it through to storage.
+   * Non-finite timestamps are ignored. `now` is the save time used for eviction ordering.
+   */
+  set(label, ts, now = Date.now()) {
+    if (!label || !Number.isFinite(ts)) return;
+    this._entries.set(label, { ts, at: now });
+    this._evict();
+    this._save();
+  }
+  /** Forgets `label`'s anchor. Returns whether one existed. */
+  delete(label) {
+    const had = this._entries.delete(label);
+    if (had) this._save();
+    return had;
+  }
+  /** Drops every persisted anchor (memory + storage). */
+  clear() {
+    this._entries.clear();
+    try {
+      this._storage?.removeItem(this._key);
+    } catch {
+    }
+  }
+  _evict() {
+    if (this._entries.size <= this._maxEntries) return;
+    const byAge = [...this._entries.entries()].sort((a, b) => a[1].at - b[1].at);
+    const excess = this._entries.size - this._maxEntries;
+    for (let i = 0; i < excess; i++) {
+      const victim = byAge[i];
+      if (victim) this._entries.delete(victim[0]);
+    }
+  }
+  _load() {
+    if (!this._storage) return;
+    try {
+      const raw = this._storage.getItem(this._key);
+      if (!raw) return;
+      const parsed = JSON.parse(raw);
+      if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return;
+      for (const [label, value] of Object.entries(parsed)) {
+        if (!value || typeof value !== "object") continue;
+        const { ts, at } = value;
+        if (typeof ts !== "number" || !Number.isFinite(ts)) continue;
+        const savedAt = typeof at === "number" && Number.isFinite(at) ? at : 0;
+        this._entries.set(label, { ts, at: savedAt });
+      }
+      this._evict();
+    } catch {
+    }
+  }
+  _save() {
+    if (!this._storage) return;
+    try {
+      if (this._entries.size === 0) {
+        this._storage.removeItem(this._key);
+        return;
+      }
+      this._storage.setItem(this._key, JSON.stringify(Object.fromEntries(this._entries)));
+    } catch {
+    }
+  }
+};
+
 // src/indicators/sourceField.ts
 function getSource(bar, source) {
   return bar[source];
@@ -23504,6 +23605,8 @@ var _ChartEngine = class _ChartEngine {
     /** Last traded price from the most recent tick that carried one ('ltp' source mode). */
     this.liveLtp = null;
     this.tickClosePriceSource = "bid";
+    /** Re-fetch history through `dataLoader` when the price source changes (`reloadOnPriceSourceChange`). */
+    this._reloadOnPriceSourceChange = true;
     /** True while an async data fetch is in-flight; suppresses tick processing to
      *  prevent stale ticks from corrupting newly-loaded bars. */
     this._suppressTicks = false;
@@ -23550,6 +23653,15 @@ var _ChartEngine = class _ChartEngine {
      * `timestamp` back via `setLevels` (auto-released on match). Survives PnL-only refreshes.
      */
     this._timeAnchorOverride = /* @__PURE__ */ new Map();
+    /**
+     * Time anchors persisted in localStorage (`orderLineAnchorPersistence`), keyed by level
+     * label — the candle each badge was last dropped on. Restored at construction so a
+     * horizontally-dragged order line comes back where the user left it after a reload.
+     * Null when persistence is disabled or time-drag is off.
+     */
+    this._orderLineAnchorStore = null;
+    /** Where an un-dragged `timeDraggable` badge sits (`orderLineDefaultAnchor`). */
+    this._orderLineDefaultAnchor = "timestamp";
     this.tradeDragNewPrice = null;
     /** Derived SL preview price during an entry drag in follow-brackets mode. */
     this.tradeDragNewSLPrice = null;
@@ -24786,6 +24898,7 @@ var _ChartEngine = class _ChartEngine {
     this._targetViewport = { ...this.viewport };
     this.maxSubPanes = config.maxSubPanes ?? 3;
     this.tickClosePriceSource = config.tickClosePriceSource ?? "bid";
+    this._reloadOnPriceSourceChange = config.reloadOnPriceSourceChange !== false;
     this.showLtpPrice = config.showLtpPrice;
     this.tradesThresholdForHorizontalLine = config.tradesThresholdForHorizontalLine ?? 2;
     if (config.positionRenderStyle === "line" || config.positionRenderStyle === "dot") {
@@ -24815,6 +24928,12 @@ var _ChartEngine = class _ChartEngine {
     this._features = config.features;
     this.drawingManager.setFreehandEnabled(config.features?.enableForecasting === true);
     this._orderLineDragSnap = config.orderLineDragSnap !== false;
+    this._orderLineDefaultAnchor = config.orderLineDefaultAnchor === "center" ? "center" : "timestamp";
+    if (this._orderTimeDragEnabled && config.orderLineAnchorPersistence !== false) {
+      this._orderLineAnchorStore = new OrderLineAnchorStore(
+        OrderLineAnchorStore.browserStorage()
+      );
+    }
     this.tradeLevelButtonScale = Math.min(Math.max(config.tradeLevelButtonScale ?? 1, 1), 3);
     this._bracketLabel = {
       mode: config.bracketLabelMode ?? "price",
@@ -24994,11 +25113,7 @@ var _ChartEngine = class _ChartEngine {
             showSnapshotBtn,
             config.priceSourceSelector ?? null,
             this.tickClosePriceSource,
-            (source) => {
-              this.tickClosePriceSource = source;
-              this.scheduleRender();
-              this.emitter.emit("priceSourceChange", { source });
-            }
+            (source) => this._applyPriceSource(source, true)
           );
           this.advancedToolbar.setIndicatorOptions(indicatorOptions);
           this.wrapper.appendChild(this.advancedToolbar.el);
@@ -25045,11 +25160,7 @@ var _ChartEngine = class _ChartEngine {
             resolvedOneClickTradeToggle ?? null,
             config.priceSourceSelector ?? null,
             this.tickClosePriceSource,
-            (source) => {
-              this.tickClosePriceSource = source;
-              this.scheduleRender();
-              this.emitter.emit("priceSourceChange", { source });
-            }
+            (source) => this._applyPriceSource(source, true)
           );
           this.topBar.setIndicatorOptions(indicatorOptions);
           this.wrapper.appendChild(this.topBar.el);
@@ -25870,7 +25981,7 @@ var _ChartEngine = class _ChartEngine {
     const minBars = this.minInitialBars;
     const cap = this.maxLookbackMs;
     const attempt = (i, start) => {
-      loader({ start, end, interval }).then((bars) => {
+      loader({ start, end, interval, priceSource: this.tickClosePriceSource }).then((bars) => {
         if (gen !== this._loadGeneration) return;
         const aggregated = this.maybeAggregate(bars);
         const reachedCap = end.getTime() - start.getTime() >= cap;
@@ -25882,7 +25993,8 @@ var _ChartEngine = class _ChartEngine {
             timeframe: this.timeframe,
             interval,
             start,
-            end
+            end,
+            priceSource: this.tickClosePriceSource
           });
           return;
         }
@@ -25917,7 +26029,7 @@ var _ChartEngine = class _ChartEngine {
     const minBars = this.minInitialBars;
     const cap = this.maxLookbackMs;
     const attempt = (i, start) => {
-      loader({ start, end, interval }).then((bars) => {
+      loader({ start, end, interval, priceSource: this.tickClosePriceSource }).then((bars) => {
         if (gen !== this._loadGeneration) return;
         const aggregated = this.maybeAggregate(bars);
         const reachedCap = end.getTime() - start.getTime() >= cap;
@@ -27096,17 +27208,44 @@ var _ChartEngine = class _ChartEngine {
     this.streamAdapter = null;
     return this;
   }
-  /** Switch which price drives live candle close/high/low at runtime
+  /** Switch which price drives candle close/high/low at runtime
    *  (`'bid'`, `'ask'` or `'ltp'`). Also syncs the header price-source
-   *  dropdown when `priceSourceSelector` is enabled. Programmatic calls do
-   *  not emit `priceSourceChange` — that event is reserved for user picks
-   *  from the dropdown. */
+   *  dropdown when `priceSourceSelector` is enabled, and — unless
+   *  `reloadOnPriceSourceChange` is `false` — re-runs `dataLoader` with the
+   *  new `params.priceSource` so the loaded history is rebuilt from that
+   *  price too. Programmatic calls do not emit `priceSourceChange` — that
+   *  event is reserved for user picks from the dropdown. */
   setTickClosePriceSource(source) {
+    this._applyPriceSource(source, false);
+    return this;
+  }
+  /**
+   * Applies a new candle price source. Shared by the header dropdown pick and
+   * `setTickClosePriceSource()`.
+   *
+   * Switching the field alone only changes how the NEXT live ticks extend the
+   * last candle; every bar already on screen was fetched with the previous
+   * source, so the chart kept showing e.g. bid history under an "LTP" label.
+   * When the source actually changes and a `dataLoader` is configured, the
+   * whole window is therefore re-fetched (`triggerLoad('priceSource')`) — the
+   * loader receives the source as `params.priceSource` to forward to its API.
+   * The visible time window is restored after the reload so the user does not
+   * lose their scroll/zoom position.
+   */
+  _applyPriceSource(source, fromUserPick) {
+    const changed = source !== this.tickClosePriceSource;
     this.tickClosePriceSource = source;
     this.topBar?.setPriceSource(source);
     this.advancedToolbar?.setPriceSource(source);
     this.scheduleRender();
-    return this;
+    if (changed && this._reloadOnPriceSourceChange && this.dataLoader && !this._isDestroyed) {
+      const viewport = this.getViewportTimestamps();
+      if (viewport) {
+        this._pendingViewportRestore = { ...this._pendingViewportRestore ?? {}, viewport };
+      }
+      this.triggerLoad("priceSource");
+    }
+    if (fromUserPick) this.emitter.emit("priceSourceChange", { source });
   }
   /** Show/hide the LTP (last traded price) marker — dashed line + axis tag.
    *  `true` always shows it when the feed supplies an LTP, `false` hides it
@@ -27271,7 +27410,7 @@ var _ChartEngine = class _ChartEngine {
         }
         const incomingTs = lvl.timestamp;
         const overrideTs = this._timeAnchorOverride.get(label);
-        if (incomingTs !== void 0 && overrideTs !== void 0 && Math.round(this.timestampToBarIndex(incomingTs)) === Math.round(this.timestampToBarIndex(overrideTs))) {
+        if (this._honorsLevelTimestamp(lvl) && incomingTs !== void 0 && overrideTs !== void 0 && Math.round(this.timestampToBarIndex(incomingTs)) === Math.round(this.timestampToBarIndex(overrideTs))) {
           this._timeAnchorOverride.delete(label);
         }
       }
@@ -28289,8 +28428,7 @@ var _ChartEngine = class _ChartEngine {
    * Resolves the horizontal badge center X (canvas px) for a level during render, or `null`
    * to keep the legacy chart-centered placement. Priority:
    *   1. the live drag bar index, for the level currently being time-dragged;
-   *   2. a staged drop override (set on the last drag release);
-   *   3. the level's own `timestamp`.
+   *   2. the resolved time anchor — see `_resolvedTimeAnchor`.
    * Returns `null` when time-drag is disabled or the level has no time anchor.
    */
   _orderLineAnchorX(level, chartW) {
@@ -28298,10 +28436,34 @@ var _ChartEngine = class _ChartEngine {
     if (this.orderTimeDragHandler?.active && this.orderTimeDragHandler.dragLabel === level.label && this.tradeDragNewBarIndex !== null) {
       return this.scaleManager.xToPixel(this.tradeDragNewBarIndex, this.viewport, chartW);
     }
-    const ts = this._timeAnchorOverride.get(level.label) ?? level.timestamp;
+    const ts = this._resolvedTimeAnchor(level);
     if (ts === void 0) return null;
     return this.scaleManager.xToPixel(this.timestampToBarIndex(ts), this.viewport, chartW);
   }
+  /**
+   * The unix-ms time anchor a level's badge should sit at (ignoring any live drag), or
+   * `undefined` for the legacy chart-centered placement. Priority:
+   *   1. a drop override staged this session (set on the last drag release);
+   *   2. the anchor persisted in localStorage from an earlier session
+   *      (`orderLineAnchorPersistence`);
+   *   3. the level's own `timestamp` — unless `orderLineDefaultAnchor: 'center'` and the
+   *      level is `timeDraggable`, in which case an un-dragged badge stays centered.
+   */
+  _resolvedTimeAnchor(level) {
+    const override = this._timeAnchorOverride.get(level.label);
+    if (override !== void 0) return override;
+    const persisted = this._orderLineAnchorStore?.get(level.label);
+    if (persisted !== void 0) return persisted;
+    return this._honorsLevelTimestamp(level) ? level.timestamp : void 0;
+  }
+  /**
+   * Whether a level's own `timestamp` positions its badge. False only for `timeDraggable`
+   * levels under `orderLineDefaultAnchor: 'center'`, whose un-dragged badge is centered
+   * regardless of `timestamp` (a dragged one is positioned by its override / persisted anchor).
+   */
+  _honorsLevelTimestamp(level) {
+    return !(this._orderLineDefaultAnchor === "center" && level.timeDraggable === true);
+  }
   /** Returns the effective entry price for a level, preferring any staged main drag. */
   _effectiveEntryPrice(label, fallback) {
     const changes = this.pendingLevelDrags.get(label);
@@ -28888,7 +29050,8 @@ var _ChartEngine = class _ChartEngine {
     const params = {
       start: new Date(allBars[0].time),
       end: new Date(allBars[allBars.length - 1].time),
-      interval: this.timeframe
+      interval: this.timeframe,
+      priceSource: this.tickClosePriceSource
     };
     if (this.compareManager.isActive()) {
       void this.compareManager.refetchAll(params).then(() => {
@@ -29850,7 +30013,7 @@ var _ChartEngine = class _ChartEngine {
       const rawAnchorX = this._orderLineAnchorX(level, chartW) ?? chartW / 2;
       const anchorX = Math.max(dragArea.x, Math.min(dragArea.x + dragArea.w, rawAnchorX));
       const startBarIndex = this.scaleManager.pixelToBarIndex(anchorX, this.viewport, chartW);
-      const startTimestamp = this._timeAnchorOverride.get(level.label) ?? level.timestamp ?? this.barIndexToTimestamp(startBarIndex) ?? 0;
+      const startTimestamp = this._resolvedTimeAnchor(level) ?? this.barIndexToTimestamp(startBarIndex) ?? 0;
       this.orderTimeDragHandler.start(level, hitX ?? anchorX, anchorX, startBarIndex, startTimestamp);
       this.drawCanvas.style.cursor = "grabbing";
       this.emitter.emit("orderLineMoveStart", {
@@ -29953,6 +30116,7 @@ var _ChartEngine = class _ChartEngine {
       const fromBarIndex = Math.round(res.startBarIndex);
       if (toTs !== void 0 && res.newBarIndex !== fromBarIndex) {
         this._timeAnchorOverride.set(res.label, toTs);
+        this._orderLineAnchorStore?.set(res.label, toTs);
         this.emitter.emit("orderLineMoved", {
           label: res.label,
           fromTimestamp: res.startTimestamp,
@@ -30076,7 +30240,12 @@ var _ChartEngine = class _ChartEngine {
     if (!this.dataLoader) return;
     if (this.isFetching) return;
     const interval = this.timeframeToInterval(this.getBaseInterval());
-    this.dataLoader({ start: new Date(fromTime), end: new Date(toTime), interval }).then((rawBars) => {
+    this.dataLoader({
+      start: new Date(fromTime),
+      end: new Date(toTime),
+      interval,
+      priceSource: this.tickClosePriceSource
+    }).then((rawBars) => {
       const bars = this.maybeAggregate(rawBars);
       if (bars.length === 0) return;
       this.backfillDrawingTimestamps();
@@ -30115,7 +30284,7 @@ var _ChartEngine = class _ChartEngine {
     const start = new Date(barTime);
     const end = new Date(barTime + intervalMs * 3);
     const interval = this.timeframeToInterval(this.getBaseInterval());
-    this.dataLoader({ start, end, interval }).then((rawBars) => {
+    this.dataLoader({ start, end, interval, priceSource: this.tickClosePriceSource }).then((rawBars) => {
       const bars = this.maybeAggregate(rawBars);
       if (bars.length === 0) return;
       const all = this.dataStore.all;