acttrader-charts 1.3.0-beta.19 → 1.3.0-beta.20

package/README.md

@@ -346,7 +346,7 @@ When `enableTrading` is on and live BID/ASK data is streaming, hovering / activa
 
 ### Horizontal (time-axis) order-line dragging
 
-Opt-in via `features.orderLineTimeDrag` (off by default; enable it per broker from the host app — e.g. only for Hankotrade users). When enabled, any level flagged `timeDraggable: true` can have its **info-box badge** dragged left/right to re-anchor the order to a different candle. The **price line stays locked** — only the time anchor moves. Grab the badge for horizontal drag (`grab` / `grabbing` cursor); the price line itself still drags vertically as before.
+Opt-in via `features.orderLineTimeDrag` (off by default; enable it per broker from the host app — e.g. only for Hankotrade users). When enabled, any level flagged `timeDraggable: true` — open positions **and pending orders** alike — can have its **info-box badge** dragged left/right to re-anchor the order to a different candle. During a horizontal drag the **price line stays locked** — only the time anchor moves. A fixed-price position's badge grabs horizontally at once (`grab` / `grabbing` cursor). A pending order (or entry-editable position) keeps its price drag: its badge shows a `move` cursor and the **first movement decides the axis** — sideways moves the time anchor, up/down moves the entry price exactly as before, and the full-width line still drags vertically.
 
 ```ts
 const chart = new ChartEngine({
@@ -369,6 +369,7 @@ chart.on('orderLineMoved', ({ label, fromTimestamp, toTimestamp, data }) => {
 ```
 
 - **Bounds:** the badge is clamped to the visible viewport — it can't be dragged past the left/right edge.
+- **Pending orders:** flag them `timeDraggable: true` too. The pill follows the drag direction — a sideways pull re-anchors the order in time (price locked, `orderLineMoved` on release), a vertical pull moves the entry price and its SL/TP brackets as usual (`tradeLevelDrag` / `tradeLevelEdit`). The axis is fixed after about 6px of movement and does not change mid-drag. Touch follows the same rule, and a tap that never moves still opens the edit form.
 - **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).
@@ -530,9 +531,10 @@ use `{symbol}` and `{count}`. The maths behind the pill is exported as
 | `tradeLevelBadgeAnchor` | | `"auto"` | `"left"` homes the tag at the plot's left edge like an axis label, whatever the open price or time anchor, so it never covers candles until the trader drags it. With `features.orderLineTimeDrag` the tag stays draggable along the time axis and the drop is remembered as before |
 | `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 |
 | `crosshairEnabled` | | `true` | Draw the mouse crosshair. `false` hides it **and** the floating "place order at this price" button that rides on its horizontal line, ignores mirrored `setCrosshair()` calls and keeps the mobile long-press crosshair from arming. Trade levels, drawings and TFC are unaffected. Runtime: `chart.setCrosshairEnabled(enabled)` |
-| `enableCrosshairToggle` | | `false` | Crosshair on/off switch in the header (advanced toolbar and default top bar): the reference 24px `rounded-sm` button, tinted while on. Clicking it calls `setCrosshairEnabled()` and emits `crosshairToggle` so the host can persist the choice |
+| `enableCrossHairHeader` | | `false` | Crosshair on/off switch in the header (advanced toolbar, default top bar and the compact per-pane strip): the reference `rounded-sm` button. The crosshair is on by default, so the icon starts tinted; a click hides the crosshair (and the trade button riding on it) and drops the icon to its plain state, the next click brings both back. Calls `setCrosshairEnabled()` and emits `crosshairToggle` so the host can persist the choice — see [Header crosshair switch](#header-crosshair-switch--enablecrosshairheader) |
+| `enableCrosshairToggle` | | `false` | **Deprecated** — alias of `enableCrossHairHeader`; either flag renders the switch |
 | `headerOverflowMenu` | | `false` | Advanced header only: the reference Hanko header. A 32px bar with six lowercase timeframe pills (`1m 5m 15m 1h 4h 1d`) and a ⌄ for the rest, then crosshair · P/L · Layout (grid icon) · ⋯ · fullscreen at 24px. Draw, Chart type, Indicators, Compare, Snapshot and Chart settings fold into the ⋯ menu; each keeps its behaviour |
-| `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 |
+| `features.orderLineTimeDrag` | | `false` | Enable **horizontal (time-axis) order-line dragging**. A level with `timeDraggable: true` (position or pending order) can have its info-box badge dragged left/right to re-anchor the order to a different candle — **price stays locked** while dragging sideways. Pending orders keep their vertical price drag: the badge's first movement picks the axis. 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` |
@@ -617,7 +619,7 @@ const chart = new ChartEngine({
 | Flag | Default | What it changes |
 |---|---|---|
 | `enableForecasting` | `false` | The reworked drawing tools, as one switch — see below |
-| `orderLineTimeDrag` | `false` | Horizontal (time-axis) order-line dragging — see [Horizontal order-line dragging](#horizontal-time-axis-order-line-dragging) |
+| `orderLineTimeDrag` | `false` | Horizontal (time-axis) order-line dragging for positions and pending orders — see [Horizontal order-line dragging](#horizontal-time-axis-order-line-dragging) |
 | `pnlPill` | `false` | Floating on-chart P/L pill — count and summed P/L of the positions on the chart — see [On-chart P/L pill](#on-chart-pl-pill--featurespnlpill) |
 | `tradeActionBar` | `false` | The trade button opens a segmented `Alert · Pending · SL · TP · TSL · ×` bar at the clicked price instead of the two-row Buy/Sell popup — see [Trade action bar](#trade-action-bar--featurestradeactionbar) |
 
@@ -778,7 +780,7 @@ new ChartEngine({
 | `topBar.series` | `area` | `'Area'` | |
 | `topBar` | `indicatorsBtn` | `'Indicators'` | Indicators button (no active) |
 | `topBar` | `indicatorsBtnActive` | `'Indicators ({count})'` | `{count}` replaced at runtime |
-| `topBar` | `disableCrosshairTitle` | `'Disable crosshair'` | Header crosshair switch tooltip while on (`enableCrosshairToggle`) |
+| `topBar` | `disableCrosshairTitle` | `'Disable crosshair'` | Header crosshair switch tooltip while on (`enableCrossHairHeader`) |
 | `topBar` | `enableCrosshairTitle` | `'Enable crosshair'` | Header crosshair switch tooltip while off |
 | `topBar` | `pnlPillBtn` | `'P/L'` | Header P/L pill switch label (`features.pnlPill`) |
 | `topBar` | `hidePnlPillTitle` | `'Hide P/L pill for {symbol}'` | P/L switch tooltip while the pill is shown |
@@ -984,6 +986,25 @@ crosshair is (`crosshairEnabled`, default `true`). Hosts with a crosshair on/off
 should call `setCrosshairEnabled()` rather than painting the crosshair transparent — the
 latter leaves the button riding an invisible line.
 
+### Header crosshair switch — `enableCrossHairHeader`
+
+```ts
+const chart = new ChartEngine({
+  container,
+  enableCrossHairHeader: true, // crosshair icon in the header; the crosshair itself starts on
+});
+chart.on('crosshairToggle', ({ enabled }) => saveUserPref('crosshair', enabled));
+```
+
+With the flag on, a crosshair icon sits in the header's right cluster (advanced toolbar and
+default top bar) or at the end of the compact per-pane strip (`headerLayout: 'compact'`). The chart crosshair is shown as usual on load and the icon is tinted. Clicking
+the icon hides the crosshair — and the floating trade button that rides on it — and the icon
+drops to its plain state; clicking again brings both back. Each click goes through
+`setCrosshairEnabled()` and emits `crosshairToggle`, so a host can persist the choice and seed
+it on the next load with `crosshairEnabled: false`. `enableCrosshairToggle` is the deprecated
+name of the same flag and still works. Native wrappers get the same switch via their
+`enableCrossHairHeader` init option, the `onCrosshairToggle` callback and `setCrosshairEnabled()`.
+
 ### Viewport
 
 ```ts
@@ -1332,7 +1353,7 @@ chart.on('tradeLevelEditCancelled', ({ label, type, isFullscreen }) => {}); // E
 chart.on('draftInitiated',     ({ side, price, orderType, isFullscreen }) => {}); // new draft order shown — open buy/sell form
 chart.on('draftCancelled',     ({ label, isFullscreen }) => {}); // draft order dismissed without confirming
 chart.on('tfcToggle',         ({ enabled }) => {}); // TFC toggled on or off via top bar button or setTfcActive()
-chart.on('crosshairToggle',   ({ enabled }) => {}); // crosshair switched on or off — header switch (enableCrosshairToggle) or setCrosshairEnabled(); persist it here
+chart.on('crosshairToggle',   ({ enabled }) => {}); // crosshair switched on or off — header switch (enableCrossHairHeader) or setCrosshairEnabled(); persist it here
 chart.on('pnlPillCloseAll',   ({ count, pnl, labels, data, isFullscreen }) => {}); // the on-chart P/L pill's ✕ — close these positions (features.pnlPill)
 chart.on('pnlPillToggle',     ({ visible }) => {}); // the header's P/L switch showed or hid the pill — persist it here (features.pnlPill)
 chart.on('bulkLevelsRequested', ({ kind, price, source, isFullscreen }) => {}); // action-bar chip (price) or the P/L pill's ◎ (price null) — open your Bulk Levels dialog for `kind`

package/dist/{MACD-DDqzsv_V.d.cts → MACD-BM9VDMeg.d.cts}

@@ -1289,11 +1289,18 @@ interface ChartConfig {
      */
     enableSnapshot?: boolean;
     /**
-     * Put a crosshair on/off switch in the header (advanced toolbar and default
-     * top bar). Clicking it calls `setCrosshairEnabled()`, so the crosshair and
-     * the floating "place order at this price" button go together, and emits
-     * `crosshairToggle` for the host to persist the choice. Starts from
-     * `crosshairEnabled`. Default: false.
+     * Put a crosshair on/off switch in the header (advanced toolbar, default top
+     * bar and the compact per-pane strip). The crosshair itself stays on by default (`crosshairEnabled`), so
+     * the icon starts tinted; clicking it calls `setCrosshairEnabled(false)` — the
+     * icon drops to its plain state and the crosshair (with the floating "place
+     * order at this price" button that rides on it) disappears until the icon is
+     * clicked again. Emits `crosshairToggle` for the host to persist the choice.
+     * Default: false.
+     */
+    enableCrossHairHeader?: boolean;
+    /**
+     * @deprecated Use `enableCrossHairHeader`. Kept as an alias so existing
+     * consumers keep their header switch — either flag being `true` renders it.
      */
     enableCrosshairToggle?: boolean;
     /**
@@ -1328,6 +1335,9 @@ interface ChartConfig {
          * Enable horizontal (time-axis) order-line dragging: a level whose `timeDraggable`
          * is true can have its info-box badge dragged left/right to re-anchor the order to
          * a different candle (price stays locked), emitting `orderLineMoved` on release.
+         * Levels that can also be price-dragged (pending orders, entry-editable positions)
+         * keep that: the first movement of a badge grab decides the axis — sideways moves
+         * the time anchor, up/down moves the price as before.
          * This is the broker-gating seam — hosts (e.g. the Hankotrade app) enable it only
          * for their flagged users. When `false` / omitted, behavior is unchanged.
          * Default: false.
@@ -1881,7 +1891,7 @@ type ChartEventMap = {
     tfcToggle: {
         enabled: boolean;
     };
-    /** Crosshair switched on or off — via the header switch (`enableCrosshairToggle`) or `setCrosshairEnabled()`. */
+    /** Crosshair switched on or off — via the header switch (`enableCrossHairHeader`) or `setCrosshairEnabled()`. */
     crosshairToggle: {
         enabled: boolean;
     };
@@ -2152,7 +2162,9 @@ interface PositionLevel {
     /**
      * When true (and `ChartConfig.features.orderLineTimeDrag` is enabled), the badge can be
      * dragged horizontally to re-anchor the order to a different candle (price stays locked).
-     * Emits `orderLineMoved` on release. Default: false.
+     * Emits `orderLineMoved` on release. An `entryPriceEditable` position keeps its vertical
+     * price drag too: the badge follows the drag direction (sideways = time, up/down = price).
+     * Default: false.
      */
     timeDraggable?: boolean;
     /**
@@ -2208,8 +2220,10 @@ interface PendingOrderLevel {
     timestamp?: number;
     /**
      * When true (and `ChartConfig.features.orderLineTimeDrag` is enabled), the badge can be
-     * dragged horizontally to re-anchor the order to a different candle (price stays locked).
-     * Emits `orderLineMoved` on release. Default: false.
+     * dragged horizontally to re-anchor the order to a different candle, emitting
+     * `orderLineMoved` on release. The order stays price-draggable: the badge follows the
+     * drag direction — sideways moves the time anchor (price locked), up/down moves the
+     * entry price exactly as without this flag. Default: false.
      */
     timeDraggable?: boolean;
     /** Your original order object. Returned as-is in events. The library never inspects this. */

package/dist/{MACD-DDqzsv_V.d.ts → MACD-BM9VDMeg.d.ts}

@@ -1289,11 +1289,18 @@ interface ChartConfig {
      */
     enableSnapshot?: boolean;
     /**
-     * Put a crosshair on/off switch in the header (advanced toolbar and default
-     * top bar). Clicking it calls `setCrosshairEnabled()`, so the crosshair and
-     * the floating "place order at this price" button go together, and emits
-     * `crosshairToggle` for the host to persist the choice. Starts from
-     * `crosshairEnabled`. Default: false.
+     * Put a crosshair on/off switch in the header (advanced toolbar, default top
+     * bar and the compact per-pane strip). The crosshair itself stays on by default (`crosshairEnabled`), so
+     * the icon starts tinted; clicking it calls `setCrosshairEnabled(false)` — the
+     * icon drops to its plain state and the crosshair (with the floating "place
+     * order at this price" button that rides on it) disappears until the icon is
+     * clicked again. Emits `crosshairToggle` for the host to persist the choice.
+     * Default: false.
+     */
+    enableCrossHairHeader?: boolean;
+    /**
+     * @deprecated Use `enableCrossHairHeader`. Kept as an alias so existing
+     * consumers keep their header switch — either flag being `true` renders it.
      */
     enableCrosshairToggle?: boolean;
     /**
@@ -1328,6 +1335,9 @@ interface ChartConfig {
          * Enable horizontal (time-axis) order-line dragging: a level whose `timeDraggable`
          * is true can have its info-box badge dragged left/right to re-anchor the order to
          * a different candle (price stays locked), emitting `orderLineMoved` on release.
+         * Levels that can also be price-dragged (pending orders, entry-editable positions)
+         * keep that: the first movement of a badge grab decides the axis — sideways moves
+         * the time anchor, up/down moves the price as before.
          * This is the broker-gating seam — hosts (e.g. the Hankotrade app) enable it only
          * for their flagged users. When `false` / omitted, behavior is unchanged.
          * Default: false.
@@ -1881,7 +1891,7 @@ type ChartEventMap = {
     tfcToggle: {
         enabled: boolean;
     };
-    /** Crosshair switched on or off — via the header switch (`enableCrosshairToggle`) or `setCrosshairEnabled()`. */
+    /** Crosshair switched on or off — via the header switch (`enableCrossHairHeader`) or `setCrosshairEnabled()`. */
     crosshairToggle: {
         enabled: boolean;
     };
@@ -2152,7 +2162,9 @@ interface PositionLevel {
     /**
      * When true (and `ChartConfig.features.orderLineTimeDrag` is enabled), the badge can be
      * dragged horizontally to re-anchor the order to a different candle (price stays locked).
-     * Emits `orderLineMoved` on release. Default: false.
+     * Emits `orderLineMoved` on release. An `entryPriceEditable` position keeps its vertical
+     * price drag too: the badge follows the drag direction (sideways = time, up/down = price).
+     * Default: false.
      */
     timeDraggable?: boolean;
     /**
@@ -2208,8 +2220,10 @@ interface PendingOrderLevel {
     timestamp?: number;
     /**
      * When true (and `ChartConfig.features.orderLineTimeDrag` is enabled), the badge can be
-     * dragged horizontally to re-anchor the order to a different candle (price stays locked).
-     * Emits `orderLineMoved` on release. Default: false.
+     * dragged horizontally to re-anchor the order to a different candle, emitting
+     * `orderLineMoved` on release. The order stays price-draggable: the badge follows the
+     * drag direction — sideways moves the time anchor (price locked), up/down moves the
+     * entry price exactly as without this flag. Default: false.
      */
     timeDraggable?: boolean;
     /** Your original order object. Returned as-is in events. The library never inspects this. */

package/dist/index.cjs

@@ -2201,7 +2201,7 @@ function levelColor(level, colors, theme) {
   }
   return colors.tradeLine;
 }
-function isDraggable(level) {
+function isPriceDraggableLevel(level) {
   if (level.type === "pending") return true;
   if (level.type === "position")
     return !!level.entryPriceEditable;
@@ -2761,7 +2761,7 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
   const pnl = level.type === "position" ? level.pnl : void 0;
   const isPending = level.type === "pending";
   const isMarketDraft = isPending && level.orderType === "market" && level.data?._isDraft === true;
-  const draggable = isDraggable(level);
+  const draggable = isPriceDraggableLevel(level);
   const groupW = (draggable ? metrics.gripW + 2 : 0) + boxW;
   const pinnedLeft = badgeAnchor === "left";
   const groupX = anchorX !== null ? Math.max(0, Math.min(chartW - groupW, Math.round(anchorX - groupW / 2))) : pinnedLeft ? metrics.leftMargin : Math.round((chartW - groupW) / 2);
@@ -6569,9 +6569,13 @@ function injectFlyoutScrollbarStyles3() {
   document.head.appendChild(style);
 }
 var CompactToolbar = class {
-  constructor(onSeriesChange, onTimeframeChange, onAddIndicator, initialSeries, initialTf, theme) {
+  constructor(onSeriesChange, onTimeframeChange, onAddIndicator, initialSeries, initialTf, theme, showCrosshairBtn = false, initialCrosshairEnabled = true, onCrosshairToggle = null) {
     this.onSeriesChange = onSeriesChange;
     this.onAddIndicator = onAddIndicator;
+    this.onCrosshairToggle = onCrosshairToggle;
+    /** Crosshair on/off switch (`enableCrossHairHeader`) — null when not requested. */
+    this.crosshairBtn = null;
+    this.crosshairEnabled = true;
     this.tfBtns = /* @__PURE__ */ new Map();
     this.indicatorOptions = [];
     this.activeIndicators = /* @__PURE__ */ new Set();
@@ -6614,6 +6618,26 @@ var CompactToolbar = class {
       this.toggleFlyout("indicators", this.indBtn);
     });
     this.el.appendChild(this.indBtn);
+    if (showCrosshairBtn) {
+      this.crosshairEnabled = initialCrosshairEnabled;
+      this.crosshairBtn = document.createElement("button");
+      this.crosshairBtn.type = "button";
+      this.crosshairBtn.dataset.testid = "chart-crosshair-toggle";
+      this.crosshairBtn.innerHTML = ICON_CROSSHAIR;
+      this.applyCrosshairBtnStyles(this.crosshairBtn, theme, this.crosshairEnabled);
+      this.crosshairBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.setCrosshairActive(!this.crosshairEnabled);
+        this.onCrosshairToggle?.(this.crosshairEnabled);
+      });
+      this.crosshairBtn.addEventListener("mouseenter", () => {
+        if (this.crosshairBtn && !this.crosshairEnabled) this.crosshairBtn.style.background = this.theme.ui.accentBg;
+      });
+      this.crosshairBtn.addEventListener("mouseleave", () => {
+        if (this.crosshairBtn && !this.crosshairEnabled) this.crosshairBtn.style.background = "transparent";
+      });
+      this.el.appendChild(this.crosshairBtn);
+    }
     this.docClickHandler = () => this.closeDropdown();
     document.addEventListener("click", this.docClickHandler);
   }
@@ -6641,6 +6665,12 @@ var CompactToolbar = class {
   setVolumeControl(_show, hasVol) {
     this.volHasData = hasVol;
   }
+  /** Reflect the crosshair on/off state in the header switch. No-op when the button is not rendered. */
+  setCrosshairActive(enabled) {
+    this.crosshairEnabled = enabled;
+    if (!this.crosshairBtn) return;
+    this.applyCrosshairBtnStyles(this.crosshairBtn, this.theme, enabled);
+  }
   setTheme(theme) {
     this.theme = theme;
     this.applyBarStyles(theme);
@@ -6648,6 +6678,7 @@ var CompactToolbar = class {
     for (const [tf, btn] of this.tfBtns) this.applyTfPillStyles(btn, theme, tf === this.currentTf);
     this.applyIconBtnStyles(this.seriesBtn, theme);
     this.applyIconBtnStyles(this.indBtn, theme);
+    if (this.crosshairBtn) this.applyCrosshairBtnStyles(this.crosshairBtn, theme, this.crosshairEnabled);
     this.flyout.style.setProperty("--act-compact-row-hover", theme.ui.accentBg);
   }
   closeDropdown() {
@@ -6858,6 +6889,31 @@ var CompactToolbar = class {
     this.addHover(btn, theme);
     return btn;
   }
+  /* The reference `rounded-sm` switch — tinted `bg-primary/10 text-primary border-primary/30`
+   * while on — at this strip's 20px icon-button size. */
+  applyCrosshairBtnStyles(btn, theme, active) {
+    btn.dataset.active = String(active);
+    const title = active ? "Disable crosshair" : "Enable crosshair";
+    btn.title = title;
+    btn.setAttribute("aria-label", title);
+    btn.setAttribute("aria-pressed", String(active));
+    Object.assign(btn.style, {
+      height: "20px",
+      width: "20px",
+      boxSizing: "border-box",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "2px",
+      border: `1px solid ${active ? withAlpha4(theme.ui.accent, 0.3) : "transparent"}`,
+      background: active ? withAlpha4(theme.ui.accent, 0.1) : "transparent",
+      color: active ? theme.ui.accent : theme.topBar.btnColor,
+      cursor: "pointer",
+      padding: "0",
+      flexShrink: "0",
+      transition: "color 0.15s, background-color 0.15s, border-color 0.15s"
+    });
+  }
   applyIconBtnStyles(btn, theme) {
     Object.assign(btn.style, {
       height: "20px",
@@ -21086,6 +21142,17 @@ var OrderLineTimeDragHandler = class _OrderLineTimeDragHandler {
      */
     this._pixelOffset = 0;
   }
+  /**
+   * Decides which axis a badge grab commits to once the pointer has moved past `threshold`
+   * pixels (Euclidean) from where it went down: `'time'` when the movement is mostly
+   * sideways, `'price'` when mostly vertical, `null` while still within the threshold.
+   * Pure — shared by the mouse and touch paths in ChartEngine so a `timeDraggable` pending
+   * order can be dragged either way from the same pill.
+   */
+  static resolveDragAxis(dx, dy, threshold) {
+    if (Math.sqrt(dx * dx + dy * dy) <= threshold) return null;
+    return Math.abs(dx) >= Math.abs(dy) ? "time" : "price";
+  }
   /**
    * Starts a horizontal drag.
    * @param level          The level being dragged.
@@ -25211,16 +25278,8 @@ var _ChartEngine = class _ChartEngine {
         return;
       }
       if (this._pendingTradeDrag) {
-        const dx = x - this._pendingTradeDrag.startX;
-        const dy = y - this._pendingTradeDrag.startY;
-        if (Math.sqrt(dx * dx + dy * dy) > _ChartEngine.TRADE_DRAG_PIXEL_THRESHOLD) {
-          const { dragHit, level, hitY, startX } = this._pendingTradeDrag;
-          this._pendingTradeDrag = null;
-          this._startTradeDragFromHit(dragHit, level, hitY, startX);
-          this.drawCanvas.style.cursor = this.orderTimeDragHandler?.active ? "grabbing" : "ns-resize";
-        } else {
-          return;
-        }
+        if (!this._upgradePendingTradeDrag(x, y)) return;
+        this.drawCanvas.style.cursor = this.orderTimeDragHandler?.active ? "grabbing" : "ns-resize";
       }
       if (this.orderTimeDragHandler?.active) {
         const idx = this.orderTimeDragHandler.onMove(x, this.scaleManager, this.viewport, chartW);
@@ -25278,7 +25337,8 @@ var _ChartEngine = class _ChartEngine {
         }
         const dragHover = hitTestTradeLevelDrag(x, y, this.tradeLevelDragAreas);
         if (dragHover) {
-          this.drawCanvas.style.cursor = this._orderTimeDragEnabled && dragHover.timeDrag === true ? "grab" : "ns-resize";
+          const hoverLevel = this.levels.find((l) => l.label === dragHover.label);
+          this.drawCanvas.style.cursor = this._orderTimeDragEnabled && dragHover.timeDrag === true ? hoverLevel && this._needsDragAxisLock(dragHover, hoverLevel) ? "move" : "grab" : "ns-resize";
           if (dragHover.label !== this.hoveredTradeLabel) {
             this.hoveredTradeLabel = dragHover.label;
             this.renderTradeLayer();
@@ -25586,6 +25646,17 @@ var _ChartEngine = class _ChartEngine {
               this._openTradeLevelEditForm(level);
               return;
             }
+            if (this._needsDragAxisLock(dragHit, level)) {
+              this._pendingTradeDrag = {
+                dragHit,
+                level,
+                hitY: y,
+                startX: x,
+                startY: y,
+                axisLock: true
+              };
+              return;
+            }
             this._startTradeDragFromHit(dragHit, level, y, x);
             this.scheduleRender();
             return;
@@ -25700,6 +25771,16 @@ var _ChartEngine = class _ChartEngine {
         this.scheduleRender();
         return;
       }
+      if (this._pendingTradeDrag) {
+        e.preventDefault();
+        const touch = e.touches[0];
+        const rect = this._cachedDrawRect ?? this.drawCanvas.getBoundingClientRect();
+        const started = this._upgradePendingTradeDrag(
+          touch.clientX - rect.left,
+          touch.clientY - rect.top
+        );
+        if (!started) return;
+      }
       if (this.orderTimeDragHandler?.active) {
         e.preventDefault();
         const touch = e.touches[0];
@@ -25822,6 +25903,7 @@ var _ChartEngine = class _ChartEngine {
         this._longPressPoint = null;
       }
       let dirty = false;
+      this._pendingTradeDrag = null;
       if (this.orderTimeDragHandler?.active) {
         this.orderTimeDragHandler.cancel();
         this.tradeDragNewBarIndex = null;
@@ -25845,6 +25927,17 @@ var _ChartEngine = class _ChartEngine {
         this._longPressTimer = null;
         this._longPressPoint = null;
       }
+      if (this._pendingTradeDrag) {
+        const { level } = this._pendingTradeDrag;
+        this._pendingTradeDrag = null;
+        const hasPending = this.pendingLevelDrags.has(level.label);
+        if (this.selectedTradeLabel === level.label && !hasPending) {
+          this._cancelEditAndDeselect(level.label);
+          return;
+        }
+        this._openTradeLevelEditForm(level);
+        return;
+      }
       if (this._endOrderTimeDrag()) return;
       if (this.tradeDragHandler?.active) {
         const result = this.tradeDragHandler.endDrag();
@@ -25980,7 +26073,14 @@ var _ChartEngine = class _ChartEngine {
           const level = this.levels.find((l) => l.label === dragHit.label);
           if (level) {
             if (!(this.hideLevelConfirmCancel && !dragHit.isBracket)) {
-              this._pendingTradeDrag = { dragHit, level, hitY: y, startX: x, startY: y };
+              this._pendingTradeDrag = {
+                dragHit,
+                level,
+                hitY: y,
+                startX: x,
+                startY: y,
+                axisLock: this._needsDragAxisLock(dragHit, level)
+              };
               return;
             }
           }
@@ -26402,6 +26502,7 @@ var _ChartEngine = class _ChartEngine {
     const hideHeader = config.hideHeader === true;
     const enableMultipleLayouts = config.enableMultipleLayouts === true;
     const enableSnapshot = config.enableSnapshot === true;
+    const showCrosshairHeaderBtn = config.enableCrossHairHeader === true || config.enableCrosshairToggle === true;
     if (config.layoutSync) {
       this.currentSync = { ...DEFAULT_LAYOUT_SYNC, ...config.layoutSync };
     }
@@ -26486,7 +26587,12 @@ var _ChartEngine = class _ChartEngine {
             (name) => this.addIndicatorByName(name),
             this.series,
             this.timeframe,
-            this.theme
+            this.theme,
+            showCrosshairHeaderBtn,
+            this.crosshairEnabled,
+            (enabled) => {
+              this.setCrosshairEnabled(enabled);
+            }
           );
           this.compactToolbar.setIndicatorOptions(indicatorOptions);
           this.wrapper.appendChild(this.compactToolbar.el);
@@ -26516,7 +26622,7 @@ var _ChartEngine = class _ChartEngine {
             config.priceSourceSelector ?? null,
             this.tickClosePriceSource,
             (source) => this._applyPriceSource(source, true),
-            config.enableCrosshairToggle === true,
+            showCrosshairHeaderBtn,
             this.crosshairEnabled,
             (enabled) => {
               this.setCrosshairEnabled(enabled);
@@ -26575,7 +26681,7 @@ var _ChartEngine = class _ChartEngine {
             config.priceSourceSelector ?? null,
             this.tickClosePriceSource,
             (source) => this._applyPriceSource(source, true),
-            config.enableCrosshairToggle === true,
+            showCrosshairHeaderBtn,
             this.crosshairEnabled,
             (enabled) => {
               this.setCrosshairEnabled(enabled);
@@ -27079,7 +27185,7 @@ var _ChartEngine = class _ChartEngine {
       },
       () => this.dataStore.length,
       () => this.scheduleRender(),
-      () => this.drawingManager.getActiveTool() !== null || this.drawingManager.isDraggingDrawing() || this.drawingManager.isResizingDrawing() || this.separatorDrag !== null || this.axisDrag !== null || (this.tradeDragHandler?.active ?? false) || (this.orderTimeDragHandler?.active ?? false) || this._mobileCrosshairActive,
+      () => this.drawingManager.getActiveTool() !== null || this.drawingManager.isDraggingDrawing() || this.drawingManager.isResizingDrawing() || this.separatorDrag !== null || this.axisDrag !== null || (this.tradeDragHandler?.active ?? false) || (this.orderTimeDragHandler?.active ?? false) || this._pendingTradeDrag !== null || this._mobileCrosshairActive,
       (deltaY) => {
         if (this.priceScaleFactor === 1) return;
         const { priceH } = this.getChartLayout();
@@ -28145,6 +28251,7 @@ var _ChartEngine = class _ChartEngine {
     this.crosshairEnabled = enabled;
     this.advancedToolbar?.setCrosshairActive(enabled);
     this.topBar?.setCrosshairActive(enabled);
+    this.compactToolbar?.setCrosshairActive(enabled);
     if (!enabled) {
       if (this.crosshair !== null) {
         this.crosshair = null;
@@ -31605,11 +31712,42 @@ var _ChartEngine = class _ChartEngine {
       isFullscreen: this.isFullscreen
     });
   }
+  /**
+   * Whether grabbing `dragHit` must wait for the drag direction before choosing an axis:
+   * the badge of a `timeDraggable` level that can ALSO be price-dragged (pending orders,
+   * entry-editable positions). Fixed-price positions keep the immediate horizontal drag.
+   */
+  _needsDragAxisLock(dragHit, level) {
+    return this._orderTimeDragEnabled && !dragHit.isBracket && dragHit.timeDrag === true && isPriceDraggableLevel(level);
+  }
+  /**
+   * Upgrades an armed `_pendingTradeDrag` to a real drag once the pointer has moved far
+   * enough from where it went down. A dual-axis badge (`axisLock`) commits to the dominant
+   * direction: sideways → horizontal time-drag (price locked), up/down → the default
+   * vertical price-drag, started from the same hit with its `timeDrag` flag cleared.
+   * Returns true when a drag started, false while still waiting for movement.
+   */
+  _upgradePendingTradeDrag(x, y) {
+    const pending = this._pendingTradeDrag;
+    if (!pending) return false;
+    const axis = OrderLineTimeDragHandler.resolveDragAxis(
+      x - pending.startX,
+      y - pending.startY,
+      pending.axisLock ? _ChartEngine.AXIS_LOCK_PIXEL_THRESHOLD : _ChartEngine.TRADE_DRAG_PIXEL_THRESHOLD
+    );
+    if (axis === null) return false;
+    this._pendingTradeDrag = null;
+    const dragHit = pending.axisLock && axis === "price" ? { ...pending.dragHit, timeDrag: false } : pending.dragHit;
+    this._startTradeDragFromHit(dragHit, pending.level, pending.hitY, pending.startX);
+    return true;
+  }
   /**
    * Shared helper: initiate a trade level drag from a hit area.
    * Starts a HORIZONTAL (time-axis) drag when the hit area is the badge of a `timeDraggable`
    * level and `features.orderLineTimeDrag` is on; otherwise starts the default vertical
    * price drag. `hitX` is required for the horizontal path (defaults to the badge anchor).
+   * Dual-axis badges never reach this directly — `_upgradePendingTradeDrag` resolves the
+   * axis first and clears `timeDrag` on the hit when the drag is vertical.
    */
   _startTradeDragFromHit(dragHit, level, hitY, hitX) {
     if (!this.tradeDragHandler) return;
@@ -32112,6 +32250,9 @@ _ChartEngine.DRAW_GESTURE_THRESHOLD = 4;
  */
 _ChartEngine.TOUCH_HANDLE_SLOP_PX = 18;
 _ChartEngine.TRADE_DRAG_PIXEL_THRESHOLD = 3;
+// px
+/** Movement a dual-axis badge grab needs before it commits to time vs price. */
+_ChartEngine.AXIS_LOCK_PIXEL_THRESHOLD = 6;
 var ChartEngine = _ChartEngine;
 
 // src/core/ChartGroup.ts