acttrader-charts 1.4.0-beta.2 → 1.4.0-beta.3

package/README.md

@@ -983,6 +983,7 @@ chart.setVolume(show: boolean): this
 
 ```ts
 chart.addIndicator(indicator: IIndicator, initialParams?: IndicatorParams): this
+chart.addIndicatorByName(shortName: string, params?: IndicatorParams): void // params from a host are normalised to the study's schema first: "20" → 20 (clamped to min/max), "Close" → 'close', TradingView's `length` → `period` — so a native settings sheet draws the same line as the web
 chart.addIndicatorByName(shortName: string, params?: IndicatorParams): void
 chart.removeIndicator(idOrShortName: string): this
 ```
@@ -1202,7 +1203,7 @@ Sub-pane heights are user-resizable by dragging the separator between panes.
 | `horizontalLine` | Horizontal Line | Single click |
 | `verticalLine` | Vertical Line | Single click |
 | `trendLine` | Trend Line | 2 clicks |
-| `trendAngle` | Trend Angle | 2 clicks (shows angle) |
+| `trendAngle` | Trend Angle | 2 clicks. The angle is the drawing's own property: measured when a point is placed or dragged, kept while zooming, and saved as `angle` on the serialized drawing — so a synced drawing shows the same degrees on web, Android and iOS. |
 | `crossLine` | Cross Line | Single click (H+V) |
 | `parallelChannel` | Parallel Channel | 3 clicks |
 | `flatChannel` | Flat Channel | 2 clicks |
@@ -2280,6 +2281,13 @@ It flips to the other side of the touch rather than running off an edge, never
 takes pointer events (the drag is still in progress), and omits volume rather
 than printing a zero when the feed carries none. Default `false`.
 
+The long press itself (500 ms, finger still within 6 px) arms the crosshair on
+every touch platform. The chart claims that touch with `preventDefault()` so a
+WebView's own long-press gesture — WebKit's text-selection / callout recogniser
+on iOS, which used to cancel the touch at the same moment and left iPhones with
+no crosshair at all — cannot take it over; a cancel that still arrives after
+300 ms of holding counts as the long press.
+
 ### Native wrapper parity
 
 The four line tools are new `DrawingToolType` strings, so `setDrawingTool('ray')`

package/dist/{MACD-qgMFBxWV.d.cts → MACD-CUfZXApv.d.cts}

@@ -2492,6 +2492,12 @@ interface IDrawing {
     visible?: boolean;
     locked?: boolean;
     text?: string;
+    /**
+     * Trend Angle only: the line's angle in degrees from the horizontal — the
+     * drawing's defining property, kept through zooms and carried across
+     * platforms so the label reads the same everywhere. Other tools leave it unset.
+     */
+    angle?: number;
     /** Optional per-instance style override; falls back to theme defaults when absent. */
     style?: AnyDrawingStyle;
     render(ctx: CanvasRenderingContext2D, scale: ScaleManager, viewport: Viewport, priceRange: PriceRange, chartW: number, chartH: number, isSelected: boolean, pricePrecision?: number, theme?: ChartTheme, context?: DrawingRenderContext): void;
@@ -2511,6 +2517,14 @@ interface IDrawing {
      * a third time.
      */
     onPlaced?(): void;
+    /**
+     * Called after the user moved this drawing's points — while placing it,
+     * dragging the whole drawing, or dragging a handle. Not called when the
+     * engine re-anchors points to new data (reload, scroll-back, timeframe
+     * change), so a tool that derives a property from where the user put the
+     * points — Trend Angle's angle — can tell the two apart.
+     */
+    onPointsEdited?(): void;
     /** Returns the handle under (x, y), or null if none */
     getHandle(x: number, y: number, scale: ScaleManager, viewport: Viewport, priceRange: PriceRange, chartW: number, chartH: number): DrawingHandle | null;
     /**
@@ -2564,6 +2578,8 @@ interface SerializedDrawing {
     visible?: boolean;
     text?: string;
     locked?: boolean;
+    /** Trend Angle: degrees from the horizontal. Present once the angle has been measured; see `IDrawing.angle`. */
+    angle?: number;
     /** Optional per-instance style override; absent for drawings using theme defaults. */
     style?: AnyDrawingStyle;
 }

package/dist/{MACD-qgMFBxWV.d.ts → MACD-CUfZXApv.d.ts}

@@ -2492,6 +2492,12 @@ interface IDrawing {
     visible?: boolean;
     locked?: boolean;
     text?: string;
+    /**
+     * Trend Angle only: the line's angle in degrees from the horizontal — the
+     * drawing's defining property, kept through zooms and carried across
+     * platforms so the label reads the same everywhere. Other tools leave it unset.
+     */
+    angle?: number;
     /** Optional per-instance style override; falls back to theme defaults when absent. */
     style?: AnyDrawingStyle;
     render(ctx: CanvasRenderingContext2D, scale: ScaleManager, viewport: Viewport, priceRange: PriceRange, chartW: number, chartH: number, isSelected: boolean, pricePrecision?: number, theme?: ChartTheme, context?: DrawingRenderContext): void;
@@ -2511,6 +2517,14 @@ interface IDrawing {
      * a third time.
      */
     onPlaced?(): void;
+    /**
+     * Called after the user moved this drawing's points — while placing it,
+     * dragging the whole drawing, or dragging a handle. Not called when the
+     * engine re-anchors points to new data (reload, scroll-back, timeframe
+     * change), so a tool that derives a property from where the user put the
+     * points — Trend Angle's angle — can tell the two apart.
+     */
+    onPointsEdited?(): void;
     /** Returns the handle under (x, y), or null if none */
     getHandle(x: number, y: number, scale: ScaleManager, viewport: Viewport, priceRange: PriceRange, chartW: number, chartH: number): DrawingHandle | null;
     /**
@@ -2564,6 +2578,8 @@ interface SerializedDrawing {
     visible?: boolean;
     text?: string;
     locked?: boolean;
+    /** Trend Angle: degrees from the horizontal. Present once the angle has been measured; see `IDrawing.angle`. */
+    angle?: number;
     /** Optional per-instance style override; absent for drawings using theme defaults. */
     style?: AnyDrawingStyle;
 }

package/dist/index.cjs

@@ -2632,7 +2632,7 @@ function isPriceDraggableLevel(level) {
 function passiveBracketsVisible(alwaysShowBrackets, activeLabel) {
   return alwaysShowBrackets && activeLabel === null;
 }
-function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH, precision, hoveredLabel = null, draggingLabel = null, dragNewPrice = null, selectedLabel = null, pendingLabels = /* @__PURE__ */ new Set(), positionStyle = "line", hideConfirmCancel = false, draftOrderLabel = null, draftBracketPnl = {}, expandedClusters = /* @__PURE__ */ new Set(), clusterThresholdPx = 0, showQuantityField = false, dragNewSLPrice = null, dragNewTPPrice = null, buttonScale = 1, alwaysShowBrackets = false, anchorXResolver = null, timeDragEnabled = false, bracketLabel = DEFAULT_BRACKET_LABEL, badgeScale = 1, badgeAnchor = "auto") {
+function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH, precision, hoveredLabel = null, draggingLabel = null, dragNewPrice = null, selectedLabel = null, pendingLabels = /* @__PURE__ */ new Set(), positionStyle = "line", hideConfirmCancel = false, draftOrderLabel = null, draftBracketPnl = {}, expandedClusters = /* @__PURE__ */ new Set(), clusterThresholdPx = 0, showQuantityField = false, dragNewSLPrice = null, dragNewTPPrice = null, buttonScale = 1, alwaysShowBrackets = false, anchorXResolver = null, timeDragEnabled = false, bracketLabel = DEFAULT_BRACKET_LABEL, badgeScale = 1, badgeAnchor = "auto", topInset = 0) {
   if (levels.length === 0)
     return {
       hitAreas: [],
@@ -2710,6 +2710,7 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
   measured.sort((a, b) => a.y - b.y);
   const placed = [];
   const layouts = /* @__PURE__ */ new Map();
+  const legendDisplaced = /* @__PURE__ */ new Set();
   for (const m2 of measured) {
     if (collapsedLabels.has(m2.level.label)) continue;
     const ec = labelToExpandedCluster.get(m2.level.label);
@@ -2723,11 +2724,17 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
       }
     }
     let boxY = m2.y - m2.boxH / 2;
+    const underLegend = m2.boxH > 0 && boxY < topInset;
+    if (underLegend) {
+      boxY = topInset;
+      legendDisplaced.add(m2.level.label);
+    }
+    const step = underLegend ? m2.boxH + 2 : -(m2.boxH + 2);
     let attempts = 0;
     while (attempts < placed.length + 1) {
       const overlaps = placed.some((p) => rectsOverlapY(boxY, m2.boxH, p.boxY, p.boxH));
       if (!overlaps) break;
-      boxY -= m2.boxH + 2;
+      boxY += step;
       attempts++;
     }
     placed.push({ label: m2.level.label, boxY, boxH: m2.boxH });
@@ -2862,6 +2869,11 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
     const ec = labelToExpandedCluster.get(level.label);
     if (ec && layout.boxY !== layout.y - boxH / 2) {
       drawFanConnector(ctx, layout.boxY + boxH / 2, layout.y, chartW, theme);
+    } else if (legendDisplaced.has(level.label) && layout.boxY > layout.y) {
+      const w = layout.boxW;
+      const anchorX = timeDragEnabled && anchorXResolver ? anchorXResolver(level) : null;
+      const centreX = anchorX !== null ? Math.max(0, Math.min(chartW - w, Math.round(anchorX - w / 2))) + w / 2 : badgeAnchor === "left" ? m.leftMargin + w / 2 : chartW / 2;
+      drawFanConnector(ctx, layout.boxY, layout.y, chartW, theme, centreX);
     }
   }
   if (selectedLabel !== null && !layouts.has(selectedLabel)) {
@@ -3049,7 +3061,7 @@ function drawClusterBadge(ctx, cluster, chartW, theme, clusterBadgeAreas) {
     h: BADGE_H
   });
 }
-function drawFanConnector(ctx, fanCenterY, realY, chartW, theme) {
+function drawFanConnector(ctx, fanCenterY, realY, chartW, theme, x = chartW - 8) {
   if (Math.abs(fanCenterY - realY) < 2) return;
   const mono = monoColor(theme);
   ctx.save();
@@ -3057,7 +3069,7 @@ function drawFanConnector(ctx, fanCenterY, realY, chartW, theme) {
   ctx.globalAlpha = 0.25;
   ctx.lineWidth = 1;
   ctx.setLineDash([2, 3]);
-  const connectorX = chartW - 8;
+  const connectorX = x;
   ctx.beginPath();
   ctx.moveTo(connectorX, fanCenterY);
   ctx.lineTo(connectorX, realY);
@@ -15698,19 +15710,61 @@ function pointToSegmentDist3(px, py, x1, y1, x22, y22) {
 var TrendAngle = class {
   constructor(first) {
     this.type = "trendAngle";
+    /**
+     * Set by the manager when the user moves a point, cleared once the angle
+     * has been re-measured. Coordinates alone cannot tell a drag from the
+     * engine re-anchoring points to freshly loaded bars — which happens on
+     * every reload and used to re-measure the angle on the new device's
+     * geometry, the very thing storing it was meant to stop.
+     */
+    this.pendingMeasure = false;
     this.id = `ta_${Date.now()}_${Math.random().toString(36).slice(2)}`;
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
-    if (this.points.length < 2) return;
+  onPointsEdited() {
+    this.pendingMeasure = true;
+  }
+  /**
+   * Applies the angle rule and returns the pixel geometry to draw.
+   *
+   * - no stored angle, the drawing is still being placed, or the user has
+   *   just moved a point: measure the angle from the current pixels;
+   * - otherwise the points only moved because the scale or the data did:
+   *   keep the angle and move the second point onto the line, so
+   *   hit-testing, handles and persistence agree with what is drawn. Its
+   *   length is whatever the stored point projects to on this screen.
+   */
+  resolve(scale, viewport, priceRange, chartW, chartH) {
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
-    const x22 = scale.xToPixel(p2.barIndex, viewport, chartW);
-    const y22 = scale.yToPixel(p2.price, priceRange, chartH);
-    const angleDeg = Math.atan2(-(y22 - y1), x22 - x1) * 180 / Math.PI;
-    const angleRad = Math.atan2(-(y22 - y1), x22 - x1);
+    const px2 = scale.xToPixel(p2.barIndex, viewport, chartW);
+    const py2 = scale.yToPixel(p2.price, priceRange, chartH);
+    const measured = Math.atan2(-(py2 - y1), px2 - x1) * 180 / Math.PI;
+    if (this.angle === void 0 || this.pendingMeasure || !this.complete) {
+      if (Number.isFinite(measured) && chartW > 0 && chartH > 0) {
+        this.angle = measured;
+        this.pendingMeasure = false;
+      }
+      return { x1, y1, x2: px2, y2: py2, angleDeg: this.angle ?? measured };
+    }
+    const len = Math.hypot(px2 - x1, py2 - y1);
+    const rad = this.angle * Math.PI / 180;
+    const x22 = x1 + len * Math.cos(rad);
+    const y22 = y1 - len * Math.sin(rad);
+    if (Number.isFinite(x22) && Number.isFinite(y22) && (Math.abs(x22 - px2) > 0.01 || Math.abs(y22 - py2) > 0.01)) {
+      this.points[1] = {
+        barIndex: scale.pixelToBarIndex(x22, viewport, chartW),
+        price: scale.pixelToPrice(y22, priceRange, chartH)
+      };
+    }
+    return { x1, y1, x2: x22, y2: y22, angleDeg: this.angle };
+  }
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
+    if (this.points.length < 2) return;
+    const { x1, y1, x2: x22, y2: y22, angleDeg } = this.resolve(scale, viewport, priceRange, chartW, chartH);
+    const angleRad = angleDeg * Math.PI / 180;
     const s = resolveStyle("trendAngle", this.style, theme);
     ctx.save();
     ctx.strokeStyle = s.strokeColor;
@@ -15733,10 +15787,11 @@ var TrendAngle = class {
     ctx.stroke();
     ctx.setLineDash([]);
     ctx.globalAlpha = 1;
+    const shown = Math.abs(angleDeg) < 0.05 ? 0 : angleDeg;
     const labelX = x1 + arcRadius + 6;
     const labelY = y1 - (angleRad >= 0 ? 6 : -14);
     ctx.font = "bold 11px 'Inter', system-ui, sans-serif";
-    ctx.fillText(`${angleDeg.toFixed(1)}\xB0`, labelX, labelY);
+    ctx.fillText(`${shown.toFixed(1)}\xB0`, labelX, labelY);
     if (isSelected) {
       for (const [ax, ay] of [[x1, y1], [x22, y22]]) {
         ctx.beginPath();
@@ -22194,6 +22249,7 @@ var DrawingManager = class {
       const required = this.activeDrawing.requiredPoints ?? 2;
       const current = this.activeDrawing.points.length;
       this.activeDrawing.points[current - 1] = { ...point };
+      this.activeDrawing.onPointsEdited?.();
       if (current < required) {
         this.activeDrawing.points.push({ ...point });
         return true;
@@ -22233,6 +22289,7 @@ var DrawingManager = class {
         const last = this.activeDrawing.points.length - 1;
         this.activeDrawing.points[last] = point;
       }
+      this.activeDrawing.onPointsEdited?.();
     }
     if (this.dragDrawing && this.dragStartMouse && this.dragStartPoints) {
       const dBar = point.barIndex - this.dragStartMouse.barIndex;
@@ -22245,6 +22302,7 @@ var DrawingManager = class {
           price: start.price + dPrice
         };
       }
+      this.dragDrawing.onPointsEdited?.();
       this.onPointsMutated?.(this.dragDrawing);
     }
     if (this.resizeDrawing && this.resizePointIndex >= 0) {
@@ -22265,6 +22323,7 @@ var DrawingManager = class {
       } else {
         this.resizeDrawing.points[this.resizePointIndex] = { ...point };
       }
+      this.resizeDrawing.onPointsEdited?.();
       this.onPointsMutated?.(this.resizeDrawing);
     }
   }
@@ -22592,6 +22651,7 @@ var DrawingManager = class {
       ...d.visible !== void 0 && { visible: d.visible },
       ...d.locked !== void 0 && { locked: d.locked },
       ...d.text !== void 0 && { text: d.text },
+      ...d.angle !== void 0 && { angle: d.angle },
       ...d.style !== void 0 && { style: { ...d.style } }
     }));
   }
@@ -22614,6 +22674,7 @@ var DrawingManager = class {
     if (drawing.visible !== void 0) created.visible = drawing.visible;
     if (drawing.locked !== void 0) created.locked = drawing.locked;
     if (drawing.text !== void 0) created.text = drawing.text;
+    if (drawing.angle !== void 0) created.angle = drawing.angle;
     if (drawing.style !== void 0) created.style = { ...drawing.style };
     this.drawings.push(created);
     this.notifyChange();
@@ -22629,6 +22690,7 @@ var DrawingManager = class {
       if (sd.visible !== void 0) drawing.visible = sd.visible;
       if (sd.locked !== void 0) drawing.locked = sd.locked;
       if (sd.text !== void 0) drawing.text = sd.text;
+      if (sd.angle !== void 0) drawing.angle = sd.angle;
       if (sd.style !== void 0) drawing.style = { ...sd.style };
       return drawing;
     });
@@ -36045,6 +36107,46 @@ function isPriceTransformSeries(series) {
   return PRICE_TRANSFORM_SERIES.includes(series);
 }
 
+// src/core/indicatorParamCoercion.ts
+var ALIASES = { length: "period" };
+function coerceIndicatorParams(fields, params) {
+  if (!params) return {};
+  const out = { ...params };
+  const byKey = new Map(fields.map((f) => [f.key, f]));
+  for (const [alias, key] of Object.entries(ALIASES)) {
+    if (alias in out && !(key in out) && byKey.has(key)) {
+      out[key] = out[alias];
+      delete out[alias];
+    }
+  }
+  for (const field of fields) {
+    if (!(field.key in out)) continue;
+    const raw = out[field.key];
+    switch (field.kind) {
+      case "number": {
+        const n = typeof raw === "number" ? raw : typeof raw === "string" && raw.trim() !== "" ? Number(raw) : NaN;
+        if (!Number.isFinite(n)) {
+          out[field.key] = field.default;
+          break;
+        }
+        let v = n;
+        if (typeof field.min === "number") v = Math.max(field.min, v);
+        if (typeof field.max === "number") v = Math.min(field.max, v);
+        out[field.key] = v;
+        break;
+      }
+      case "select": {
+        if (!field.options) break;
+        const s = String(raw);
+        const match = field.options.find((o) => o === s) ?? field.options.find((o) => o.toLowerCase() === s.toLowerCase());
+        out[field.key] = match ?? field.default;
+        break;
+      }
+    }
+  }
+  return out;
+}
+
 // src/ui/ValueTooltip.ts
 var SUB_DAILY3 = [
   "1m",
@@ -36941,6 +37043,7 @@ function initialVisibleBars(mobileBarDivisor = 2, forceApply = false, defaultBar
   return Math.max(10, Math.round(defaultBars / mobileBarDivisor));
 }
 var LOOKAHEAD = 4;
+var LONG_PRESS_CANCEL_ARM_MS = 300;
 function lastIndexAtOrBefore(bars, time) {
   let lo = 0, hi = bars.length - 1, ans = -1;
   while (lo <= hi) {
@@ -37246,6 +37349,16 @@ var _ChartEngine = class _ChartEngine {
     /** Per-instance sub-pane Y-scale factors, keyed by ActiveIndicatorState.instanceId. */
     this.subPaneScaleFactors = /* @__PURE__ */ new Map();
     this._mobileCrosshairActive = false;
+    /**
+     * When the pending long press began. WebKit runs its own long-press
+     * recognizer on the page and, when it wins, ends our touch with
+     * `touchcancel` at about the same moment our 500 ms timer would fire — on
+     * iPhones the crosshair simply never appeared, while Android WebViews, which
+     * have no such gesture on a canvas, were fine. The touchstart below now
+     * claims the gesture with `preventDefault()`, and should a cancel still
+     * arrive after `LONG_PRESS_CANCEL_ARM_MS` the hold counts as a long press.
+     */
+    this._longPressStartedAt = 0;
     this._mobileTapStartXY = null;
     this._longPressTimer = null;
     this._longPressPoint = null;
@@ -37500,6 +37613,17 @@ var _ChartEngine = class _ChartEngine {
     };
     // ── State persistence ─────────────────────────────────────────────────────
     this.isRestoringState = false;
+    /**
+     * Height of the top-left legend block — symbol / OHLC strip plus indicator
+     * pills — in canvas CSS pixels, with a small gap. `renderTradeLevels` keeps
+     * info boxes below it: a position priced near the top of the visible range
+     * used to print its box straight over the symbol name, on web and in the
+     * Android / iOS WebViews alike, worst on phones where the strip wraps to two
+     * lines. Measured by ResizeObserver where available, else per render.
+     */
+    this._legendInset = 0;
+    this._legendObserver = null;
+    this._legendObserverTried = false;
     this.onPointerEnter = () => {
       this._cachedWrapRect = null;
       this._cachedDrawRect = null;
@@ -38052,8 +38176,10 @@ var _ChartEngine = class _ChartEngine {
           }
           this._mobileTapStartXY = { x, y };
         } else {
+          if (e.cancelable) e.preventDefault();
           if (this._longPressTimer !== null) clearTimeout(this._longPressTimer);
           this._longPressPoint = { x, y };
+          this._longPressStartedAt = performance.now();
           this._longPressTimer = setTimeout(() => {
             this._longPressTimer = null;
             if (this._longPressPoint) {
@@ -38250,7 +38376,10 @@ var _ChartEngine = class _ChartEngine {
       if (this._longPressTimer !== null) {
         clearTimeout(this._longPressTimer);
         this._longPressTimer = null;
+        const held = performance.now() - this._longPressStartedAt;
+        const at = this._longPressPoint;
         this._longPressPoint = null;
+        if (at && held >= LONG_PRESS_CANCEL_ARM_MS) this._activateMobileCrosshair(at.x, at.y);
       }
       let dirty = false;
       this._pendingTradeDrag = null;
@@ -38665,6 +38794,7 @@ var _ChartEngine = class _ChartEngine {
       const last = all[all.length - 1];
       const intervalMs = this.timeframeToMs(this.timeframe);
       const tickPrice = this.tickClosePriceSource === "ltp" ? this.liveLtp ?? tick.bid : this.tickClosePriceSource === "ask" ? tick.ask : tick.bid;
+      const before = this.dataStore.length;
       if (tick.time < last.time + intervalMs) {
         const updated = {
           ...last,
@@ -38675,6 +38805,7 @@ var _ChartEngine = class _ChartEngine {
         };
         all[all.length - 1] = updated;
         this.dataStore.invalidate();
+        this.followLiveEdge(before);
       } else {
         const completedBar = last;
         const newBarTime = Math.floor(tick.time / intervalMs) * intervalMs;
@@ -38693,13 +38824,7 @@ var _ChartEngine = class _ChartEngine {
           );
         }
         const openingBar = all[all.length - 1];
-        if (this._targetViewport.endIndex >= all.length) {
-          this._targetViewport = {
-            ...this._targetViewport,
-            startIndex: this._targetViewport.startIndex + 1,
-            endIndex: this._targetViewport.endIndex + 1
-          };
-        }
+        this.followLiveEdge(before);
         this.emitter.emit("newBar", { completedBar, openingBar, intervalMs });
         this.correctCompletedBar(completedBar.time, intervalMs);
         if (newBarTime > completedBar.time + intervalMs) {
@@ -40020,10 +40145,11 @@ var _ChartEngine = class _ChartEngine {
       this.targetCandleWidth
     );
     this._defaultVisibleBars = loadVisibleBars;
+    const total = this.dataStore.length;
     this.viewport = {
       ...this.viewport,
-      startIndex: fitAll ? 0 : Math.max(0, bars.length - loadVisibleBars + LOOKAHEAD),
-      endIndex: bars.length + LOOKAHEAD
+      startIndex: fitAll ? 0 : Math.max(0, total - loadVisibleBars + LOOKAHEAD),
+      endIndex: total + LOOKAHEAD
     };
     this._targetViewport = { ...this.viewport };
     const hasVol = this.dataStore.hasVolumeData;
@@ -40770,7 +40896,7 @@ var _ChartEngine = class _ChartEngine {
         ).length;
         resolved["color"] = cycleIndicatorColor(INDICATOR_COLOR_PALETTE, count);
       }
-      if (params) Object.assign(resolved, params);
+      if (params) Object.assign(resolved, coerceIndicatorParams(schema.fields, params));
       const factoryParams = { ...resolved };
       delete factoryParams["timeframe"];
       this.addIndicator(schema.factory(factoryParams), resolved);
@@ -40893,6 +41019,7 @@ var _ChartEngine = class _ChartEngine {
     if (!prevState) return;
     const schema = INDICATOR_PARAM_SCHEMAS.find((s) => s.shortName === prevState.shortName);
     if (!schema) return;
+    newParams = coerceIndicatorParams(schema.fields, newParams);
     const { timeframe: tf, ...factoryParams } = newParams;
     const newIndicator = schema.factory(factoryParams);
     prevState.indicator = newIndicator;
@@ -41725,12 +41852,13 @@ var _ChartEngine = class _ChartEngine {
     for (const entry of entries) {
       const schema = INDICATOR_PARAM_SCHEMAS.find((s) => s.shortName === entry.shortName);
       if (!schema) continue;
-      const factoryParams = { ...entry.params };
+      const params = coerceIndicatorParams(schema.fields, entry.params);
+      const factoryParams = { ...params };
       delete factoryParams["timeframe"];
-      this.addIndicator(schema.factory(factoryParams), entry.params);
+      this.addIndicator(schema.factory(factoryParams), params);
       const st = this.activeIndicators[this.activeIndicators.length - 1];
       if (!st) continue;
-      st.currentParams = { ...entry.params };
+      st.currentParams = { ...params };
       const overlay = this.subPaneOverlays.get(st.instanceId) ?? this.indicatorOverlay;
       if (entry.visible === false) {
         st.visible = false;
@@ -43709,6 +43837,7 @@ var _ChartEngine = class _ChartEngine {
     this.panHandler.destroy();
     this.zoomHandler.destroy();
     this.resizeObserver.disconnect();
+    this._legendObserver?.disconnect();
     this.disposeVvListener();
     this.indicatorOverlay?.destroy();
     for (const overlay of this.subPaneOverlays.values()) overlay.destroy();
@@ -44153,6 +44282,32 @@ var _ChartEngine = class _ChartEngine {
   recomputeRenderStyle() {
     this.positionRenderStyle = this.pnlPillExpanded ? "line" : this.baseRenderStyle();
   }
+  measureLegendInset() {
+    let bottom = 0;
+    for (const el of [this.siEl, this.indicatorOverlay?.el]) {
+      if (!el || el.style.display === "none" || el.offsetHeight === 0) continue;
+      bottom = Math.max(bottom, el.offsetTop + el.offsetHeight);
+    }
+    this._legendInset = bottom > 0 ? bottom + 4 : 0;
+  }
+  legendInset() {
+    if (!this._legendObserverTried) {
+      this._legendObserverTried = true;
+      if (typeof ResizeObserver !== "undefined") {
+        this._legendObserver = new ResizeObserver(() => {
+          this.measureLegendInset();
+          this.scheduleRender();
+        });
+        for (const el of [this.siEl, this.indicatorOverlay?.el]) {
+          if (el) this._legendObserver.observe(el);
+        }
+      }
+      this.measureLegendInset();
+    } else if (!this._legendObserver) {
+      this.measureLegendInset();
+    }
+    return this._legendInset;
+  }
   renderTradeLayer() {
     if (this._isDestroyed) return;
     const dpr = window.devicePixelRatio || 1;
@@ -44257,7 +44412,8 @@ var _ChartEngine = class _ChartEngine {
       this._orderTimeDragEnabled,
       this._bracketLabel,
       this.tradeLevelBadgeScale,
-      this.tradeLevelBadgeAnchor
+      this.tradeLevelBadgeAnchor,
+      this.legendInset()
     );
     ctx.restore();
     const offVpResult = renderOffViewportIndicators(
@@ -46438,6 +46594,22 @@ var _ChartEngine = class _ChartEngine {
         this.siStreamDot.style.background = this.theme.ui.stream[this.streamStatus];
     }, this.tickActivityMs);
   }
+  /**
+   * Shifts the target viewport by however many displayed elements the last
+   * raw-bar mutation added, when the view was sitting at the live edge.
+   * `before` is `dataStore.length` captured before the mutation. Without a
+   * transform this is the old "+1 on a new bar" rule; with one it is the
+   * number of bricks / columns the tick completed.
+   */
+  followLiveEdge(before) {
+    const grew = this.dataStore.length - before;
+    if (grew <= 0 || this._targetViewport.endIndex < before) return;
+    this._targetViewport = {
+      ...this._targetViewport,
+      startIndex: this._targetViewport.startIndex + grew,
+      endIndex: this._targetViewport.endIndex + grew
+    };
+  }
   /** Fetch bars that fall in a gap between the last historical bar and the first live bar.
    *  This happens when the system clock was behind feed time during the initial data load. */
   fillTickGap(fromTime, toTime) {
@@ -46455,6 +46627,7 @@ var _ChartEngine = class _ChartEngine {
       this.backfillDrawingTimestamps();
       const all = this.dataStore.raw;
       const liveBar = all[all.length - 1];
+      const before = this.dataStore.length;
       let insertCount = 0;
       for (const bar of bars) {
         if (bar.time >= liveBar.time) continue;
@@ -46469,11 +46642,12 @@ var _ChartEngine = class _ChartEngine {
           insertCount++;
         }
       }
-      if (insertCount > 0) {
+      const grew = this.dataStore.length - before;
+      if (insertCount > 0 && grew > 0) {
         this.viewport = {
           ...this.viewport,
-          startIndex: this.viewport.startIndex + insertCount,
-          endIndex: this.viewport.endIndex + insertCount
+          startIndex: this.viewport.startIndex + grew,
+          endIndex: this.viewport.endIndex + grew
         };
         this.reanchorDrawingsByTimestamp();
         this.recomputeIndicators();