@luxalgo/vela 0.6.11 → 0.6.13

package/dist/vela.global.js

@@ -5400,6 +5400,111 @@ var Vela = (function (exports) {
     return Math.round(n * 1e8) / 1e8;
   }
 
+  // src/core/drawings/types/Magnifier.ts
+  var MAGNIFIER_TIMEFRAME_OPTIONS = [
+    { value: "auto", label: "Auto", ms: 0 },
+    { value: "1", label: "1m", ms: 6e4 },
+    { value: "5", label: "5m", ms: 3e5 },
+    { value: "15", label: "15m", ms: 9e5 },
+    { value: "30", label: "30m", ms: 18e5 },
+    { value: "60", label: "1h", ms: 36e5 },
+    { value: "240", label: "4h", ms: 144e5 },
+    { value: "D", label: "1D", ms: 864e5 }
+  ];
+  function magnifierTimeframeLabel(value) {
+    const opt = MAGNIFIER_TIMEFRAME_OPTIONS.find((o) => o.value === value);
+    if (opt) return opt.label;
+    const n = Number(value);
+    if (Number.isFinite(n) && n > 0) {
+      if (n % 1440 === 0) return `${n / 1440}D`;
+      if (n % 60 === 0) return `${n / 60}h`;
+      return `${n}m`;
+    }
+    return value;
+  }
+  function defaultMagnifierStyle() {
+    return { timeframe: "auto", upColor: "", downColor: "" };
+  }
+  var Magnifier = class extends Drawing {
+    constructor(init) {
+      super(init);
+      this.type = "magnifier";
+      /** Pixel rect of the timeframe chip as painted last frame, caret included — the chip is
+       *  an interactive dropdown trigger, so the interaction layer needs the exact rect the
+       *  painter measured. Renderer-transient: never serialized, null while unpainted. */
+      this.chipRect = null;
+      if (!this.magnifier) this.magnifier = defaultMagnifierStyle();
+    }
+    anchorSchema() {
+      return { min: 2, max: 2, slots: [{ role: "c1", free: "both" }, { role: "c2", free: "both" }] };
+    }
+    placementMode() {
+      return "drag";
+    }
+    /** The pixel rectangle between the two corner anchors (painter + hit-test share it). */
+    rect(proj) {
+      const a = this.anchors[0];
+      const b = this.anchors[1];
+      if (!a || !b) return null;
+      const ya = proj.yOf(a.price, this.paneId);
+      const yb = proj.yOf(b.price, this.paneId);
+      if (ya == null || yb == null) return null;
+      return { x1: proj.xOf(a.time), y1: ya, x2: proj.xOf(b.time), y2: yb };
+    }
+    hitTest(px, py, proj, tol) {
+      const r = this.rect(proj);
+      if (!r) return false;
+      if (pointInBox(px, py, r.x1, r.y1, r.x2, r.y2)) return true;
+      const edges = [
+        [r.x1, r.y1, r.x2, r.y1],
+        [r.x2, r.y1, r.x2, r.y2],
+        [r.x2, r.y2, r.x1, r.y2],
+        [r.x1, r.y2, r.x1, r.y1]
+      ];
+      return edges.some((e) => distToSegment(px, py, e[0], e[1], e[2], e[3]) <= tol);
+    }
+    handlePoints(proj) {
+      const r = this.rect(proj);
+      return r ? [[r.x1, r.y1], [r.x2, r.y2]] : [];
+    }
+    hitHandle(px, py, proj, tol) {
+      return handleAt(px, py, this.handlePoints(proj), tol + 3);
+    }
+    bounds(proj) {
+      const r = this.rect(proj);
+      if (!r) return null;
+      return { x: Math.min(r.x1, r.x2), y: Math.min(r.y1, r.y2), w: Math.abs(r.x2 - r.x1), h: Math.abs(r.y2 - r.y1) };
+    }
+    priceRange() {
+      const a = this.anchors[0];
+      const b = this.anchors[1];
+      if (!a || !b) return null;
+      return { min: Math.min(a.price, b.price), max: Math.max(a.price, b.price) };
+    }
+    schema() {
+      return {
+        fields: [
+          {
+            path: "magnifier.timeframe",
+            label: "Timeframe",
+            kind: "select",
+            options: MAGNIFIER_TIMEFRAME_OPTIONS,
+            group: "behavior"
+          },
+          ...LINE_FIELDS.map((f) => ({ ...f, label: f.label.replace("Line", "Border") })),
+          { path: "magnifier.upColor", label: "Up candles", kind: "color", group: "fill" },
+          { path: "magnifier.downColor", label: "Down candles", kind: "color", group: "fill" }
+        ]
+      };
+    }
+    writeProps() {
+      return { ...this.magnifier };
+    }
+    readProps(props) {
+      this.magnifier = { ...defaultMagnifierStyle(), ...props };
+    }
+  };
+
   // src/core/drawings/registry.ts
   var REGISTRY2 = /* @__PURE__ */ new Map();
   function registerDrawingType(meta) {
@@ -6059,6 +6164,22 @@ var Vela = (function (exports) {
     defaultStyle: { lineColor: DEFAULT_DRAWING_COLOR, lineWidth: 1, lineStyle: "solid" },
     create: (init) => new PositionTool(init)
   });
+  var MAGNIFIER_ICON = svg24(
+    '<circle cx="10.5" cy="10.5" r="6.5"/><path d="m15.3 15.3 5.2 5.2"/><path d="M8 12.5v-3M10.5 13.5v-5.5M13 12v-2"/>'
+  );
+  registerDrawingType({
+    type: "magnifier",
+    group: "measure",
+    label: "Magnifier",
+    icon: MAGNIFIER_ICON,
+    // An empty border color means the THEME's contrast ink (white on dark, black on
+    // light), resolved at paint time so it follows theme switches; a user pick wins.
+    defaultStyle: { lineColor: "", lineWidth: 1, lineStyle: "solid" },
+    coversSeries: true,
+    // the inset's backdrop must sit over the base candles it replaces
+    placementHint: "Drag an area on the chart to view it at a lower timeframe",
+    create: (init) => new Magnifier(init)
+  });
   var VWAP_ICON = svg24('<line x1="5" y1="3" x2="5" y2="21"/><path d="M5 16c4 0 5-9 8-9s3 5 8 3"/>');
   registerDrawingType({
     type: "anchoredvwap",
@@ -6098,7 +6219,7 @@ var Vela = (function (exports) {
   var PATTERN_TYPES = ["xabcd", "abcd", "headshoulders"];
   var ELLIOTT_TYPES = ["elliottimpulse", "elliottcorrection"];
   var HARMONIC_TYPES = ["gartley", "bat", "butterfly", "crab", "shark", "cypher"];
-  var MEASUREMENT_TYPES = ["position", "datepricerange"];
+  var MEASUREMENT_TYPES = ["position", "datepricerange", "magnifier"];
   var VOLUME_TYPES = ["anchoredvwap", "fixedrangevp"];
   var BRUSH_TYPES = ["freehand", "highlighter"];
   var ARROW_TYPES = ["arrow", "arrowmarkup", "arrowmarkdown"];
@@ -6462,7 +6583,7 @@ var Vela = (function (exports) {
 
   // src/core/drawings/DrawingController.ts
   var DrawingController = class {
-    constructor(renderer, events, option) {
+    constructor(renderer, events, option, seriesGateway) {
       this.events = events;
       this.store = new DrawingStore();
       this.history = new DrawingHistory();
@@ -6488,6 +6609,7 @@ var Vela = (function (exports) {
         const { definition, visible } = buildToolbar(option);
         this.port.setToolbar(definition);
         this.port.showToolbar(visible);
+        if (seriesGateway) this.port.setSeriesGateway?.(seriesGateway);
         this.subs.push(this.port.onDrawingIntent((i) => this.onIntent(i)));
         this.subs.push(this.store.onChange(() => this.sync()));
       }
@@ -6593,7 +6715,7 @@ var Vela = (function (exports) {
         style,
         text: init.text,
         props: init.props,
-        zIndex: init.zIndex ?? this.startZ(init.paneId ?? "price")
+        zIndex: init.zIndex ?? this.startZ(type, init.paneId ?? "price")
       });
       if (!d) return null;
       this.history.record(this.store.serialize());
@@ -6668,10 +6790,14 @@ var Vela = (function (exports) {
      *  (falling back to just under the pane's top series where there is no price — a study
      *  pane). Half a key down never ties a series; drawings tying each other paint in insertion
      *  order, so consecutive new drawings still stack newest-in-front. Undefined without a
-     *  shared z space — the store then places it over the other drawings, its own layer's top. */
-    startZ(paneId) {
+     *  shared z space — the store then places it over the other drawings, its own layer's top.
+     *  A type that COVERS the series (an opaque inset, `coversSeries`) instead starts just
+     *  above the whole stack — under the candles its content would be buried. */
+    startZ(type, paneId) {
       const range = this.port?.stackRange?.(paneId);
-      return range ? (range.price ?? range.front) - 0.5 : void 0;
+      if (!range) return void 0;
+      if (getDrawingType(type)?.coversSeries) return range.front + 0.5;
+      return (range.price ?? range.front) - 0.5;
     }
     /** Programmatically select drawings (host UI → chart): shows the on-chart handles + toolbar.
      *  `additive` toggles membership (matching shift-click) instead of replacing. */
@@ -6816,7 +6942,7 @@ var Vela = (function (exports) {
           const style = last2 ? { ...i.doc.style, ...last2 } : i.doc.style;
           const d = deserializeDrawing({ ...i.doc, id: this.store.nextId(), style });
           if (!d) return;
-          if (!d.zIndex) d.zIndex = this.startZ(d.paneId) ?? 0;
+          if (!d.zIndex) d.zIndex = this.startZ(d.type, d.paneId) ?? 0;
           this.history.record(before);
           this.store.add(d);
           this.captureStyle(d.id);
@@ -6914,6 +7040,180 @@ var Vela = (function (exports) {
     return 36e5;
   }
 
+  // src/core/engine/DrawingSeriesService.ts
+  var MAX_BARS = 5e3;
+  var PAD_FRAC = 0.25;
+  var MAX_ENTRIES = 16;
+  var RETRY_MS = 15e3;
+  var AUTO_STEPS = ["240", "60", "30", "15", "5", "1"];
+  var DrawingSeriesService = class {
+    constructor(deps) {
+      this.deps = deps;
+      /** Cached windows per `market|timeframe` key, newest-used last (LRU across keys). */
+      this.cache = /* @__PURE__ */ new Map();
+      this.listeners = /* @__PURE__ */ new Set();
+    }
+    seriesInRange(timeframe, from, to) {
+      if (!this.deps.canFetch()) return { state: "unavailable", reason: "no-source" };
+      const resolved = this.resolveTimeframe(timeframe);
+      if (typeof resolved !== "string") return { state: "unavailable", reason: resolved.reason };
+      const barMs = timeframeToMs(resolved);
+      const lo = Math.min(from, to);
+      const hi = Math.max(from, to);
+      if (!(hi > lo) || !(barMs > 0)) return { state: "unavailable", reason: "not-lower" };
+      if ((hi - lo) / barMs > MAX_BARS) return { state: "unavailable", reason: "too-wide" };
+      const key = `${this.deps.marketKey()}|${resolved}`;
+      const entries = this.cache.get(key) ?? [];
+      const covering = entries.find((e) => e.from <= lo && e.to >= hi);
+      if (covering) {
+        if (covering.pending) return this.loading(entries, resolved, barMs, lo, hi);
+        if (covering.failedAt > 0) {
+          if (Date.now() - covering.failedAt < RETRY_MS) return this.loading(entries, resolved, barMs, lo, hi);
+          entries.splice(entries.indexOf(covering), 1);
+        } else {
+          this.maybeRefresh(key, covering, resolved, barMs, hi);
+          return { state: "ready", bars: this.slice(covering.bars, lo, hi), timeframe: resolved, barMs };
+        }
+      }
+      this.fetchWindow(key, entries, resolved, lo, hi);
+      return this.loading(entries, resolved, barMs, lo, hi);
+    }
+    onUpdate(listener) {
+      this.listeners.add(listener);
+      return () => this.listeners.delete(listener);
+    }
+    // ── internals ──
+    /** `'auto'` → the largest standard step at least 4× finer than the chart (else the finest
+     *  step still below it); an explicit timeframe passes only when strictly finer. Failures
+     *  distinguish "this pick isn't lower" from "NOTHING lower exists" (the chart is already
+     *  at the finest offered step) so the consumer can word its notice honestly. */
+    resolveTimeframe(timeframe) {
+      const chartMs = timeframeToMs(this.deps.chartTimeframe());
+      const finest = AUTO_STEPS[AUTO_STEPS.length - 1];
+      if (timeframeToMs(finest) >= chartMs) return { reason: "none-lower" };
+      const tf = timeframe.trim() || "auto";
+      if (tf === "auto") {
+        for (const step of AUTO_STEPS) {
+          if (timeframeToMs(step) <= chartMs / 4) return step;
+        }
+        return finest;
+      }
+      return timeframeToMs(tf) < chartMs ? tf : { reason: "not-lower" };
+    }
+    /** The `loading` answer, carrying best-effort PARTIAL bars from settled overlapping
+     *  windows — a widened window keeps painting what it already has while it fetches. */
+    loading(entries, timeframe, barMs, lo, hi) {
+      const partial = /* @__PURE__ */ new Map();
+      for (const e of entries) {
+        if (e.pending || e.failedAt > 0) continue;
+        if (e.to < lo || e.from > hi) continue;
+        for (const b of this.slice(e.bars, lo, hi)) partial.set(b.time, b);
+      }
+      if (partial.size === 0) return { state: "loading", timeframe, barMs };
+      const bars = [...partial.values()].sort((a, b) => a.time - b.time);
+      return { state: "loading", timeframe, barMs, bars };
+    }
+    /** Kick ONE background fetch for the padded window. Any OVERLAPPING in-flight fetch
+     *  defers this one (a corner drag repaints per pointer move — kicking a window per
+     *  frame would spam the provider); when it lands, the next paint re-evaluates. */
+    fetchWindow(key, entries, timeframe, lo, hi) {
+      if (entries.some((e) => e.pending && e.to >= lo && e.from <= hi)) return;
+      const pad = (hi - lo) * PAD_FRAC;
+      const entry = { from: lo - pad, to: hi + pad, bars: [], fetchedAt: 0, pending: true, failedAt: 0 };
+      entries.push(entry);
+      this.cache.set(key, entries);
+      this.evict();
+      void this.deps.fetchBars(timeframe, { from: entry.from, to: entry.to }).then((bars) => {
+        entry.bars = bars;
+        entry.fetchedAt = Date.now();
+        entry.pending = false;
+        this.absorbOverlaps(key, entry);
+        this.fire();
+      }).catch(() => {
+        entry.pending = false;
+        entry.failedAt = Date.now();
+        this.fire();
+      });
+    }
+    /** A window whose right edge reaches the newest fetched bar refreshes at most once per
+     *  bar interval — new closed bars ride the feed's cache, only the live tail re-fetches. */
+    maybeRefresh(key, entry, timeframe, barMs, hi) {
+      if (entry.pending) return;
+      const lastBar = entry.bars.length > 0 ? entry.bars[entry.bars.length - 1].time : entry.from;
+      if (hi < lastBar) return;
+      if (Date.now() - entry.fetchedAt < barMs) return;
+      entry.pending = true;
+      void this.deps.fetchBars(timeframe, { from: entry.from, to: entry.to }).then((bars) => {
+        entry.bars = bars;
+        entry.fetchedAt = Date.now();
+        entry.pending = false;
+        this.fire();
+      }).catch(() => {
+        entry.pending = false;
+        entry.fetchedAt = Date.now();
+      });
+    }
+    /** Merge windows that overlap `entry` into it (dedupe by bar time) so a key's list
+     *  converges instead of accumulating slivers. */
+    absorbOverlaps(key, entry) {
+      const entries = this.cache.get(key);
+      if (!entries) return;
+      for (let i = entries.length - 1; i >= 0; i -= 1) {
+        const other = entries[i];
+        if (other === entry || other.pending || other.failedAt > 0) continue;
+        if (other.to < entry.from || other.from > entry.to) continue;
+        const byTime = /* @__PURE__ */ new Map();
+        for (const b of other.bars) byTime.set(b.time, b);
+        for (const b of entry.bars) byTime.set(b.time, b);
+        entry.bars = [...byTime.values()].sort((a, b) => a.time - b.time);
+        entry.from = Math.min(entry.from, other.from);
+        entry.to = Math.max(entry.to, other.to);
+        entry.fetchedAt = Math.min(entry.fetchedAt, other.fetchedAt || entry.fetchedAt);
+        entries.splice(i, 1);
+      }
+    }
+    /** Drop the oldest settled windows once the global count passes {@link MAX_ENTRIES}. */
+    evict() {
+      let total = 0;
+      for (const entries of this.cache.values()) total += entries.length;
+      while (total > MAX_ENTRIES) {
+        let oldestKey = null;
+        let oldestIdx = -1;
+        let oldestAt = Infinity;
+        for (const [key, entries2] of this.cache) {
+          for (let i = 0; i < entries2.length; i += 1) {
+            const e = entries2[i];
+            if (e.pending) continue;
+            const at = e.fetchedAt || e.failedAt;
+            if (at < oldestAt) {
+              oldestKey = key;
+              oldestIdx = i;
+              oldestAt = at;
+            }
+          }
+        }
+        if (oldestKey == null) return;
+        const entries = this.cache.get(oldestKey);
+        entries.splice(oldestIdx, 1);
+        if (entries.length === 0) this.cache.delete(oldestKey);
+        total -= 1;
+      }
+    }
+    /** Bars whose open time falls within `[lo, hi]` (ascending input → linear scan is fine). */
+    slice(bars, lo, hi) {
+      const out = [];
+      for (const b of bars) {
+        if (b.time < lo) continue;
+        if (b.time > hi) break;
+        out.push(b);
+      }
+      return out;
+    }
+    fire() {
+      for (const l of [...this.listeners]) l();
+    }
+  };
+
   // src/data/symbol-groups.ts
   function isGroupRow(d) {
     return d.group != null && d.ticker === d.group;
@@ -7278,7 +7578,6 @@ var Vela = (function (exports) {
   var PREVIEW_BARS = 300;
   var SINGLE_LOAD_BARS = 5e3;
   var CHUNK_BARS = 1e4;
-  var FIRST_PAINT_BARS = 100;
   var GAP_FACTOR = 1.5;
   var HEAL_COOLDOWN_MS = 5e3;
   var EngineOrchestrator = class _EngineOrchestrator {
@@ -7396,7 +7695,13 @@ var Vela = (function (exports) {
       const initialStyle = this.renderer.readFeature("priceStyle");
       if (typeof initialStyle === "string") this.priceStyle = initialStyle;
       this.barTransform = barTransformFor(initialStyle);
-      this.drawings = new DrawingController(this.renderer, this.events, config.drawings);
+      const drawingSeries = new DrawingSeriesService({
+        fetchBars: (tf, range) => this.fetchSeries(this.config.market.symbol ?? "", tf, range),
+        canFetch: () => !!this.feed.loadRange && !this.config.market.data?.length && !!this.config.market.symbol,
+        chartTimeframe: () => this.config.market.timeframe ?? "60",
+        marketKey: () => `${this.config.market.symbol ?? ""}|${this.config.market.session ?? ""}`
+      });
+      this.drawings = new DrawingController(this.renderer, this.events, config.drawings, drawingSeries);
       this.unresolvedUnsub = this.feed.onUnresolved?.((info) => {
         this.endLoad();
         this.events.emit("data:unresolved", info);
@@ -7548,7 +7853,6 @@ var Vela = (function (exports) {
         let painted = false;
         const paint = (bars, final) => {
           if (this.generation !== gen || !final && bars.length === 0) return;
-          if (!painted && !final && bars.length < Math.min(requested, FIRST_PAINT_BARS)) return;
           this.setBarSeries(bars, painted ? { preserveView: true } : void 0);
           if (!painted && bars.length > 0) {
             painted = true;
@@ -7567,10 +7871,14 @@ var Vela = (function (exports) {
             }
           };
           abort.signal.addEventListener("abort", () => signal(true), { once: true });
-          this.feed.loadProgressive(market, (bars) => {
-            paint(bars, false);
-            if (painted) signal(true);
-          }, { signal: abort.signal }).then((full) => {
+          this.feed.loadProgressive(
+            market,
+            (bars) => {
+              paint(bars, false);
+              if (painted) signal(true);
+            },
+            { signal: abort.signal }
+          ).then((full) => {
             if (this.progressiveAbort === abort) this.progressiveAbort = null;
             if (full == null) return signal(false);
             if (this.generation !== gen) return signal(true);
@@ -7657,7 +7965,14 @@ var Vela = (function (exports) {
      *  an in-flight `setMarket` immediately (the config mutates before the load). */
     marketSnapshot() {
       const m = this.config.market;
-      return { symbol: m.symbol, provider: parseSymbol(m.symbol ?? "").provider ?? void 0, timeframe: m.timeframe, bars: m.bars, session: m.session, offline: m.data !== void 0 };
+      return {
+        symbol: m.symbol,
+        provider: parseSymbol(m.symbol ?? "").provider ?? void 0,
+        timeframe: m.timeframe,
+        bars: m.bars,
+        session: m.session,
+        offline: m.data !== void 0
+      };
     }
     /**
      * Switch the chart's market IN PLACE — no destroy/recreate. The renderer stays
@@ -7723,10 +8038,7 @@ var Vela = (function (exports) {
         if (depthOnly) {
           this.extendDepth(gen, m.bars ?? 500);
         } else {
-          await Promise.race([
-            this.loadMarket(gen, { firstLoad: false }),
-            new Promise((resolve) => this.supersedeWaiters.push(resolve))
-          ]);
+          await Promise.race([this.loadMarket(gen, { firstLoad: false }), new Promise((resolve) => this.supersedeWaiters.push(resolve))]);
         }
         if (this.generation !== gen) return;
       } finally {
@@ -8389,8 +8701,8 @@ var Vela = (function (exports) {
           onModel: (model) => {
             const first2 = !record.announced;
             const cause = record.pendingCause ?? "history";
+            if (!this.applyModel(id, model)) return;
             record.pendingCause = void 0;
-            this.applyModel(id, model);
             this.emitContextChanged(id);
             this.emitScriptRun(id, cause, first2);
           },
@@ -8683,10 +8995,16 @@ var Vela = (function (exports) {
      * Apply an emitted model. First emission mounts (and routes the pane); a pending
      * structural change (after an input edit) remounts idempotently; everything else
      * (live tick / viewport re-run) value-patches.
+     *
+     * Returns false when the model was DEFERRED — an output-free model arriving while
+     * the record is still loading and the chart has no bars (see below); every other
+     * outcome, including the hidden drop, returns true so the caller's event semantics
+     * stay unchanged.
      */
     applyModel(id, model) {
       const record = this.registry.get(id);
-      if (!record || record.hidden) return;
+      if (!record || record.hidden) return true;
+      if (record.loading && this.bars.length === 0 && !_EngineOrchestrator.modelHasOutput(model)) return false;
       const handle = this.handles.get(id);
       if (!record.renderHandle) {
         const paneId2 = this.routePane(id, model, record.options ?? {});
@@ -8696,7 +9014,7 @@ var Vela = (function (exports) {
         record.renderHandle = this.renderer.mountIndicator(model);
         record.pendingStructural = false;
         this.announce(record, handle);
-        return;
+        return true;
       }
       let paneId = record.model?.paneId ?? "price";
       const prevOwnScale = record.model?.ownScale === true;
@@ -8724,6 +9042,11 @@ var Vela = (function (exports) {
       }
       if (record.loading) this.setLoading(record, false);
       this.announce(record, handle);
+      return true;
+    }
+    /** True when the model carries ANY executed output — series, drawings, bar colors, or trades. */
+    static modelHasOutput(model) {
+      return model.series.length > 0 || model.fills.length > 0 || model.backgrounds.length > 0 || model.priceLines.length > 0 || (model.lines?.length ?? 0) > 0 || (model.boxes?.length ?? 0) > 0 || (model.labels?.length ?? 0) > 0 || (model.polylines?.length ?? 0) > 0 || (model.linefills?.length ?? 0) > 0 || (model.tables?.length ?? 0) > 0 || (model.barColors?.length ?? 0) > 0 || (model.trades?.length ?? 0) > 0;
     }
     routePane(id, model, options) {
       if (options.pane === "new") return `pane-${id}`;
@@ -9426,6 +9749,7 @@ var Vela = (function (exports) {
       "4h": 144e5,
       "1d": 864e5,
       "1w": 6048e5,
+      "1M": 2592e6,
       "1": 6e4,
       "5": 3e5,
       "15": 9e5,
@@ -9433,7 +9757,8 @@ var Vela = (function (exports) {
       "60": 36e5,
       "240": 144e5,
       D: 864e5,
-      W: 6048e5
+      W: 6048e5,
+      M: 2592e6
     };
     return map[timeframe] ?? 36e5;
   }
@@ -26060,7 +26385,9 @@ void main() {
       const lo = Math.min(from, to);
       const hi = Math.max(from, to);
       const visible = (a, b, extend) => {
-        if (extend !== "none") return true;
+        if (extend === "both") return true;
+        if (extend === "left") return Math.max(a, b) >= lo;
+        if (extend === "right") return Math.min(a, b) <= hi;
         return Math.max(a, b) >= lo && Math.min(a, b) <= hi;
       };
       let min2 = Infinity;
@@ -28624,6 +28951,17 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     constructor() {
       /** The current `paintAll` call's interaction state, visible to the per-type painters. */
       this.targets = {};
+      /** The chart's active series LOOK — style + resolved series colors — pushed by the
+       *  controller before each paint. The magnifier's inset mirrors both: candles/bars/line/
+       *  area restyle the paint (bar-transform styles like Heikin Ashi transform the fetched
+       *  bars; unknown/custom styles fall back to candles), and the colors default to the main
+       *  series' own so the inset reads as a finer copy of the chart. */
+      this.seriesLook = {
+        style: "candles",
+        upColor: BULLISH,
+        downColor: BEARISH,
+        lineColor: BULLISH
+      };
     }
     /** Paint every visible drawing, then selection handles for the targeted ones.
      *  Each drawing is clipped to its own pane's rect (and skipped entirely while that pane
@@ -28668,6 +29006,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       ctx.globalAlpha = GHOST_ALPHA;
       if (ghost instanceof RegressionChannel || ghost instanceof FixedRangeVolumeProfile) {
         this.paintTimeSpanGhost(ctx, ghost, proj);
+      } else if (ghost instanceof Magnifier) {
+        this.paintMagnifierGhost(ctx, ghost, proj, theme);
       } else this.paintOne(ctx, ghost, proj, theme);
       ctx.globalAlpha = 1;
     }
@@ -28801,6 +29141,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         this.paintLabel(ctx, d, proj, theme);
         return;
       }
+      if (d instanceof Magnifier) {
+        this.paintMagnifier(ctx, d, proj, theme);
+        return;
+      }
       if (d instanceof PatternDrawing) {
         this.paintPattern(ctx, d, proj, theme);
         return;
@@ -29293,6 +29637,216 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         ctx.textBaseline = "alphabetic";
       }
     }
+    /** Placement preview for the magnifier: a dashed rectangle outline only — no backdrop and
+     *  no series read, so dragging the area open never kicks a fetch per cursor move. */
+    paintMagnifierGhost(ctx, d, proj, theme) {
+      const r = d.rect(proj);
+      if (!r) return;
+      ctx.save();
+      ctx.strokeStyle = d.style.lineColor || contrastColor(theme.background);
+      ctx.lineWidth = 1;
+      ctx.setLineDash([4, 4]);
+      ctx.strokeRect(Math.min(r.x1, r.x2), Math.min(r.y1, r.y2), Math.abs(r.x2 - r.x1), Math.abs(r.y2 - r.y1));
+      ctx.restore();
+    }
+    /** Paint a magnifier: an opaque theme-background inset whose interior shows the chart's
+     *  market at a finer timeframe — candles at their true time/price positions, clipped to
+     *  the rectangle. Bars come through `Projector.seriesInRange` (cache read; `loading` and
+     *  `unavailable` states paint a short notice instead). The lower-timeframe candles shift
+     *  half a chart bar LEFT of their raw time pixel so each chart candle's visual cell —
+     *  centered on its open time — subdivides in place. */
+    paintMagnifier(ctx, d, proj, theme) {
+      const r = d.rect(proj);
+      const a = d.anchors[0];
+      const b = d.anchors[1];
+      if (!r || !a || !b) return;
+      const x0 = Math.min(r.x1, r.x2);
+      const x1 = Math.max(r.x1, r.x2);
+      const y0 = Math.min(r.y1, r.y2);
+      const y1 = Math.max(r.y1, r.y2);
+      const w = x1 - x0;
+      const h = y1 - y0;
+      ctx.save();
+      ctx.globalAlpha = 1;
+      ctx.fillStyle = theme.background;
+      ctx.fillRect(x0, y0, w, h);
+      ctx.restore();
+      const from = Math.min(a.time, b.time);
+      const to = Math.max(a.time, b.time);
+      const chartBars = proj.barsBetween ? proj.barsBetween(from, to) : 0;
+      const chartMs = chartBars > 0 ? (to - from) / chartBars : 0;
+      const res = proj.seriesInRange && chartMs > 0 && w > 1 && h > 1 ? proj.seriesInRange(d.magnifier.timeframe, from, to + chartMs) : void 0;
+      let seriesBars = res?.state === "ready" || res?.state === "loading" ? res.bars ?? [] : [];
+      if (res && (res.state === "ready" || res.state === "loading") && seriesBars.length > 0) {
+        const look = this.seriesLook;
+        const transform = look.style !== "candles" ? barTransformFor(look.style) : null;
+        if (transform) seriesBars = transform.full(seriesBars);
+        const mode = look.style === "bars" ? "bars" : look.style === "line" || look.style === "baseline" ? "line" : look.style === "area" ? "area" : "candles";
+        const halfPitch = (proj.xOf(from + chartMs) - proj.xOf(from)) / 2;
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(x0, y0, w, h);
+        ctx.clip();
+        if (mode === "line" || mode === "area") {
+          this.paintMagnifierLine(ctx, d, proj, seriesBars, res.barMs, halfPitch, y1, mode === "area", d.magnifier.upColor || look.lineColor);
+        } else {
+          this.paintMagnifierBars(ctx, d, proj, seriesBars, res.barMs, halfPitch, x0, x1, mode, d.magnifier.upColor || look.upColor, d.magnifier.downColor || look.downColor);
+        }
+        ctx.restore();
+      } else if (res) {
+        const notice = res.state === "loading" ? "Loading\u2026" : res.state === "ready" ? "No lower-timeframe data" : res.reason === "too-wide" ? "Area too wide for this timeframe" : res.reason === "none-lower" ? "No lower timeframe available" : res.reason === "not-lower" ? "Pick a timeframe below the chart" : "No data source";
+        this.paintMagnifierNotice(ctx, notice, x0, y0, w, h, theme);
+      }
+      ctx.save();
+      ctx.strokeStyle = d.style.lineColor || contrastColor(theme.background);
+      ctx.lineWidth = d.style.lineWidth || 1;
+      ctx.setLineDash(dashPattern(d.style.lineStyle, d.style.lineWidth || 1));
+      ctx.strokeRect(x0, y0, w, h);
+      ctx.restore();
+      if (w > 44) {
+        const label = magnifierTimeframeLabel(res?.state === "ready" || res?.state === "loading" ? res.timeframe : d.magnifier.timeframe);
+        const chipH = 17;
+        const gap = 4;
+        const pane = proj.paneRect?.(d.paneId);
+        const paneBottom = pane ? pane.top + pane.height : proj.height;
+        const below = y1 + gap + chipH <= paneBottom;
+        const chipY = below ? y1 + gap : y1 - gap - chipH;
+        ctx.save();
+        ctx.font = `10px ${theme.fontFamily}`;
+        const tw = ctx.measureText(label).width;
+        const caretW = 11;
+        const chipW = tw + 12 + caretW;
+        roundRect(ctx, x0, chipY, chipW, chipH, 3);
+        ctx.fillStyle = theme.background;
+        ctx.fill();
+        ctx.strokeStyle = withAlpha(theme.textColor, 0.28);
+        ctx.lineWidth = 1;
+        ctx.setLineDash([]);
+        ctx.stroke();
+        ctx.fillStyle = theme.textColor;
+        ctx.textAlign = "left";
+        ctx.textBaseline = "middle";
+        ctx.fillText(label, x0 + 6, chipY + chipH / 2 + 0.5);
+        const cxr = x0 + 6 + tw + 5;
+        const cyr = chipY + chipH / 2;
+        ctx.strokeStyle = withAlpha(theme.textColor, 0.7);
+        ctx.lineWidth = 1.2;
+        ctx.beginPath();
+        ctx.moveTo(cxr, cyr - 1.5);
+        ctx.lineTo(cxr + 2.5, cyr + 1.5);
+        ctx.lineTo(cxr + 5, cyr - 1.5);
+        ctx.stroke();
+        ctx.restore();
+        d.chipRect = { x: x0, y: chipY, w: chipW, h: chipH };
+      } else {
+        d.chipRect = null;
+      }
+    }
+    /** The magnifier's candle/bar loop: each bar's cell spans its open→close time (shifted left
+     *  by half a chart bar). Candles: wick always, body once the cell is wide enough to carry
+     *  one. OHLC bars: the high–low spine with open/close ticks once the cell has the room. */
+    paintMagnifierBars(ctx, d, proj, bars, barMs, halfPitch, x0, x1, mode, upColor, downColor) {
+      ctx.setLineDash([]);
+      ctx.lineWidth = 1;
+      for (const bar of bars) {
+        const cx0 = proj.xOf(bar.time) - halfPitch;
+        const cx1 = proj.xOf(bar.time + barMs) - halfPitch;
+        if (cx1 < x0 || cx0 > x1) continue;
+        const yHigh = proj.yOf(bar.high, d.paneId);
+        const yLow = proj.yOf(bar.low, d.paneId);
+        const yOpen = proj.yOf(bar.open, d.paneId);
+        const yClose = proj.yOf(bar.close, d.paneId);
+        if (yHigh == null || yLow == null || yOpen == null || yClose == null) continue;
+        const color = bar.close >= bar.open ? upColor : downColor;
+        const cellW = cx1 - cx0;
+        const cx = (cx0 + cx1) / 2;
+        ctx.strokeStyle = color;
+        ctx.beginPath();
+        ctx.moveTo(cx, yHigh);
+        ctx.lineTo(cx, yLow);
+        ctx.stroke();
+        if (cellW < 3) continue;
+        if (mode === "bars") {
+          const tick = Math.max(1, cellW * 0.35);
+          ctx.beginPath();
+          ctx.moveTo(cx - tick, yOpen);
+          ctx.lineTo(cx, yOpen);
+          ctx.moveTo(cx, yClose);
+          ctx.lineTo(cx + tick, yClose);
+          ctx.stroke();
+        } else {
+          const bw = Math.max(1, cellW * 0.7);
+          ctx.fillStyle = color;
+          ctx.fillRect(cx - bw / 2, Math.min(yOpen, yClose), bw, Math.max(1, Math.abs(yClose - yOpen)));
+        }
+      }
+    }
+    /** The magnifier's line/area rendering: a close polyline through each cell's center (same
+     *  half-chart-bar shift as the candles), with an optional translucent fill down to the
+     *  rectangle's bottom edge for the area style. Colored like the chart's own line series. */
+    paintMagnifierLine(ctx, d, proj, bars, barMs, halfPitch, yBottom, area, color) {
+      const pts = [];
+      for (const bar of bars) {
+        const y = proj.yOf(bar.close, d.paneId);
+        if (y == null) continue;
+        pts.push([proj.xOf(bar.time + barMs / 2) - halfPitch, y]);
+      }
+      if (pts.length < 2) return;
+      if (area) {
+        ctx.beginPath();
+        ctx.moveTo(pts[0][0], yBottom);
+        for (const [px, py] of pts) ctx.lineTo(px, py);
+        ctx.lineTo(pts[pts.length - 1][0], yBottom);
+        ctx.closePath();
+        ctx.fillStyle = withAlpha(color, 0.15);
+        ctx.fill();
+      }
+      ctx.setLineDash([]);
+      ctx.lineWidth = 1.5;
+      ctx.strokeStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(pts[0][0], pts[0][1]);
+      for (let i = 1; i < pts.length; i += 1) ctx.lineTo(pts[i][0], pts[i][1]);
+      ctx.stroke();
+    }
+    /** Centered muted notice inside the magnifier rect (loading / unavailable states). */
+    paintMagnifierNotice(ctx, text, x0, y0, w, h, theme) {
+      if (w < 60 || h < 20) return;
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(x0, y0, w, h);
+      ctx.clip();
+      ctx.font = `11px ${theme.fontFamily}`;
+      ctx.fillStyle = withAlpha(theme.textColor, 0.55);
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(text, x0 + w / 2, y0 + h / 2);
+      ctx.restore();
+    }
+    /** A bottom-center pill prompting the armed tool's placement gesture (e.g. the magnifier's
+     *  "drag an area"). Painted by the drawings layer while the tool is armed and no placement
+     *  is in progress; chart-background fill so it reads as chrome over any content. */
+    paintPlacementHint(ctx, text, theme, width, height) {
+      ctx.save();
+      ctx.font = `11px ${theme.fontFamily}`;
+      const tw = ctx.measureText(text).width;
+      const pillW = tw + 24;
+      const pillH = 24;
+      const x = (width - pillW) / 2;
+      const y = height - pillH - 14;
+      roundRect(ctx, x, y, pillW, pillH, pillH / 2);
+      ctx.fillStyle = theme.background;
+      ctx.fill();
+      ctx.strokeStyle = withAlpha(theme.textColor, 0.28);
+      ctx.lineWidth = 1;
+      ctx.setLineDash([]);
+      ctx.stroke();
+      ctx.fillStyle = theme.textColor;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(text, width / 2, y + pillH / 2 + 0.5);
+      ctx.restore();
+    }
     /** Paint a fixed-range volume profile: horizontal histogram rows (up/down split) anchored to
      *  the left or right of the time span, optional VAH / VAL / POC levels across the range, and
      *  optional developing POC / VA polylines. Recomputes from the two anchors on every paint. */
@@ -30708,8 +31262,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     if (!existing) document.head.appendChild(s);
   }
   var DrawingSettingsPopup = class {
-    constructor(host, theme) {
+    constructor(host, theme, chartBarMs = () => 0) {
       this.host = host;
+      this.chartBarMs = chartBarMs;
       this.el = null;
       this.tipEl = null;
       // floating hover-label (above/below the toolbar)
@@ -30734,6 +31289,14 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.theme = theme;
       this.settingsDialog = new DrawingSettingsDialog(host, theme);
     }
+    /** The magnifier timeframe choices strictly below the chart's own bar duration
+     *  (`auto` rides along while at least one concrete lower step exists). */
+    lowerTimeframeOptions() {
+      const chartMs = this.chartBarMs();
+      if (!(chartMs > 0)) return [...MAGNIFIER_TIMEFRAME_OPTIONS];
+      const lower = MAGNIFIER_TIMEFRAME_OPTIONS.filter((o) => o.ms > 0 && o.ms < chartMs);
+      return lower.length > 0 ? [MAGNIFIER_TIMEFRAME_OPTIONS[0], ...lower] : [];
+    }
     setTheme(theme) {
       this.theme = theme;
       this.settingsDialog.setTheme(theme);
@@ -30776,7 +31339,20 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         const sz = drawing.size ?? "normal";
         bar.appendChild(this.dropdown("Icon size", STAMP_SIZE_OPTIONS, sz, (s) => stampSizeIcon(s), (v) => actions.patch({ size: v }), { label: sizeLabel }));
       }
-      if (paths.has("style.lineColor")) bar.appendChild(this.colorButton("Line color", BRUSH_ICON, drawing.style.lineColor || DEFAULT_DRAWING_COLOR, (v) => actions.patch({ "style.lineColor": v })));
+      if (paths.has("magnifier.timeframe") && drawing instanceof Magnifier) {
+        const options = this.lowerTimeframeOptions();
+        if (options.length > 0) {
+          bar.appendChild(
+            this.dropdown("Lower timeframe", options.map((o) => o.value), drawing.magnifier.timeframe, () => "", (v) => actions.patch({ "magnifier.timeframe": v }), {
+              label: (v) => magnifierTimeframeLabel(String(v)),
+              labelInTrigger: true
+            })
+          );
+        }
+        bar.appendChild(this.colorButton("Up candles", BUCKET_ICON, drawing.magnifier.upColor || t.upColor, (v) => actions.patch({ "magnifier.upColor": v })));
+        bar.appendChild(this.colorButton("Down candles", BUCKET_ICON, drawing.magnifier.downColor || t.downColor, (v) => actions.patch({ "magnifier.downColor": v })));
+      }
+      if (paths.has("style.lineColor")) bar.appendChild(this.colorButton("Line color", BRUSH_ICON, drawing.style.lineColor || (drawing instanceof Magnifier ? contrastColor(this.theme.background) : DEFAULT_DRAWING_COLOR), (v) => actions.patch({ "style.lineColor": v })));
       if (paths.has("style.lineWidth")) {
         const wf = schema.fields.find((f) => f.path === "style.lineWidth");
         if (wf?.kind === "number" && (wf.min ?? 1) > 1) {
@@ -31098,6 +31674,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
             this.colorPop = null;
             this.colorOwner = null;
           }
+          opts.onClose?.();
         }
       });
       const el = pop.el;
@@ -31116,6 +31693,49 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       pop.show();
       return pop;
     }
+    /**
+     * A standalone timeframe menu for the magnifier's ON-CHART chip. The chip lives on
+     * canvas, so a transient invisible anchor is dropped at its pixel rect for the popover
+     * to position against, and removed again when the menu closes. Independent of the
+     * quick toolbar — the chip works without selecting the drawing first.
+     */
+    openMagnifierTimeframeMenu(rect, current, onPick) {
+      ensureStyles3();
+      closeOpenPopovers();
+      const options = this.lowerTimeframeOptions();
+      const anchor = document.createElement("div");
+      anchor.style.cssText = `position:absolute;left:${rect.x}px;top:${rect.y}px;width:${rect.w}px;height:${rect.h}px;pointer-events:none;`;
+      this.host.appendChild(anchor);
+      this.menuPop = this.hostFloat(anchor, {
+        zIndex: 26,
+        padding: "4px",
+        onClose: () => anchor.remove(),
+        fill: (menu, pop) => {
+          if (options.length === 0) {
+            const note = document.createElement("div");
+            note.style.cssText = "padding:6px 10px;opacity:0.65;white-space:nowrap;";
+            note.textContent = "No lower timeframe available";
+            menu.appendChild(note);
+            return;
+          }
+          for (const o of options) {
+            const item = document.createElement("button");
+            item.type = "button";
+            item.className = "vela-dpop-item";
+            item.dataset.active = o.value === current ? "1" : "0";
+            item.style.cssText = "display:flex;align-items:center;min-width:88px;padding:5px 10px;border:none;border-radius:5px;color:inherit;cursor:pointer;text-align:left;font:inherit;font-variant-numeric:tabular-nums;";
+            item.textContent = o.label;
+            item.addEventListener("click", (e) => {
+              e.stopPropagation();
+              pop.hide();
+              onPick(o.value);
+            });
+            menu.appendChild(item);
+          }
+        }
+      });
+      this.menuOwner = anchor;
+    }
     /** A floating list of one-shot actions (icon + label rows) opened by the kebab. */
     openActionMenu(anchor, rows) {
       this.menuPop = this.hostFloat(anchor, {
@@ -31226,10 +31846,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       let cur = current;
       const paint = (v) => {
         b.replaceChildren();
-        const ic = document.createElement("span");
-        ic.style.cssText = "display:flex;";
-        ic.innerHTML = sized(render(v));
-        b.appendChild(ic);
+        const glyph = render(v);
+        if (glyph) {
+          const ic = document.createElement("span");
+          ic.style.cssText = "display:flex;";
+          ic.innerHTML = sized(glyph);
+          b.appendChild(ic);
+        }
         if (opts.label && opts.labelInTrigger) {
           const tx = document.createElement("span");
           tx.textContent = opts.label(v);
@@ -31271,10 +31894,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
             item.className = "vela-dpop-item";
             item.dataset.active = active ? "1" : "0";
             item.style.cssText = `display:flex;align-items:center;gap:8px;${label ? "min-width:118px;" : ""}padding:5px 8px;border:none;border-radius:5px;color:inherit;cursor:pointer;text-align:left;font:inherit;`;
-            const ic = document.createElement("span");
-            ic.style.cssText = "display:flex;flex:none;width:22px;justify-content:center;";
-            ic.innerHTML = sized(render(v), 18);
-            item.appendChild(ic);
+            const glyph = render(v);
+            if (glyph) {
+              const ic = document.createElement("span");
+              ic.style.cssText = "display:flex;flex:none;width:22px;justify-content:center;";
+              ic.innerHTML = sized(glyph, 18);
+              item.appendChild(ic);
+            }
             if (label) {
               const tx = document.createElement("span");
               tx.textContent = label(v);
@@ -32258,6 +32884,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.intentCb = null;
       /** Another chart's in-progress placement, mirrored here as a ghost (drawings sync). */
       this.externalGhost = null;
+      /** Core-pushed series gateway (finer-timeframe bars for data-driven drawings). */
+      this.seriesGw = null;
+      this.seriesGwUnsub = null;
       /** Last draft fingerprint reported upstream — gates the per-render emission to actual changes. */
       this.lastDraftKey = null;
       this.measure = new MeasureOverlay();
@@ -32285,7 +32914,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.textEditor = null;
       this.painter = new DrawingPainter();
       this.ctx = canvas.getContext("2d");
-      this.popup = new DrawingSettingsPopup(overlayHost, deps.theme());
+      this.popup = new DrawingSettingsPopup(overlayHost, deps.theme(), () => deps.chartBarMs());
       this.toolbar = new DrawingToolbar(
         toolbarHost,
         deps.theme(),
@@ -32343,6 +32972,22 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const shown = this.toolbarVisible && !this.mobileLayout;
       this.deps.setToolbarGutter(shown ? this.toolbarCollapsed ? TOOLBAR_COLLAPSED_WIDTH : TOOLBAR_WIDTH : 0);
     }
+    /** Core push: the series gateway data-driven drawings read finer-timeframe bars
+     *  through (surfaced to them as `Projector.seriesInRange`). A landed background
+     *  fetch repaints both this layer and the interleave slices under the series. */
+    setSeriesGateway(gateway) {
+      this.seriesGwUnsub?.();
+      this.seriesGw = gateway;
+      this.seriesGwUnsub = gateway.onUpdate(() => {
+        this.invalidateSlices();
+        this.render();
+        this.deps.requestDataPaint();
+      });
+    }
+    /** The pushed series gateway, or null before the core provides one. */
+    get seriesGateway() {
+      return this.seriesGw;
+    }
     /** Core push: mirror (or clear) another chart's in-progress placement as a ghost. */
     setExternalGhost(doc) {
       this.externalGhost = doc ? deserializeDrawing(doc) : null;
@@ -32460,8 +33105,34 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     /** Should the drawing layer win this press (vs pan)? */
     claim(x, y) {
       if (this.measureMode || this.eraserMode) return true;
+      if (this.magnifierChipAt(x, y)) return true;
       return this.interaction.claim(x, y);
     }
+    /** The topmost visible (unlocked) magnifier whose timeframe chip contains (x, y) —
+     *  the chip's rect is what the painter measured last frame. */
+    magnifierChipAt(x, y) {
+      for (let i = this.drawings.length - 1; i >= 0; i -= 1) {
+        const d = this.drawings[i];
+        if (!(d instanceof Magnifier) || !d.visible || d.locked) continue;
+        const r = d.chipRect;
+        if (r && x >= r.x && x <= r.x + r.w && y >= r.y && y <= r.y + r.h) return d;
+      }
+      return null;
+    }
+    /** Open the on-chart chip's timeframe menu; the pick patches the drawing like a
+     *  settings-popup edit (same intent, same undo step). */
+    openMagnifierChipMenu(drawing) {
+      const rect = drawing.chipRect;
+      if (!rect) return;
+      const id = drawing.id;
+      this.popup.openMagnifierTimeframeMenu(rect, drawing.magnifier.timeframe, (value) => {
+        const d = this.drawings.find((x) => x.id === id);
+        if (!(d instanceof Magnifier)) return;
+        d.applySettings({ "magnifier.timeframe": value });
+        this.render();
+        this.emit({ kind: "edit", doc: d.serialize() });
+      });
+    }
     /** Delete the (unlocked) drawing under the cursor. True when one was removed.
      *  Shared by the eraser (click + drag) and the middle-click shortcut. */
     deleteAt(x, y) {
@@ -32507,6 +33178,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         this.render();
         return;
       }
+      if (this.activeTool == null) {
+        const chipOwner = this.magnifierChipAt(x, y);
+        if (chipOwner) {
+          this.openMagnifierChipMenu(chipOwner);
+          return;
+        }
+      }
       this.interaction.down(x, y, snap, shift3);
     }
     pointerMove(x, y, snap = "off", shift3 = false) {
@@ -32725,6 +33403,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     /** Cursor hint while hovering — `'pointer'` over a drawing/handle, else null. */
     cursorAt(x, y) {
       if (this.eraserMode) return "pointer";
+      if (this.activeTool == null && this.magnifierChipAt(x, y)) return "pointer";
       return this.interaction.cursorAt(x, y);
     }
     /** Right-click: an explicit escape back to the pointer. Cancels an in-progress
@@ -32903,6 +33582,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         if (!sctx) continue;
         sctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         sctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
+        this.painter.seriesLook = this.deps.seriesLook();
         this.painter.paintAll(sctx, drawings, proj, theme, EMPTY_TARGETS);
         const slices = out.get(paneId) ?? [];
         slices.push({ beforeZ, canvas });
@@ -32930,6 +33610,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         dragged: this.interaction.activeDragId(),
         mutedLabel: edited instanceof TextLabel ? edited.id : null
       };
+      this.painter.seriesLook = this.deps.seriesLook();
       this.painter.paintAll(ctx, this.drawings.filter((d) => !this.isInterleaved(d)), proj, this.deps.theme(), targets);
       this.painter.paintHighlights(ctx, this.drawings.filter((d) => this.isInterleaved(d)), proj, handleIdsFor(targets));
       this.layoutTextEditor();
@@ -32937,6 +33618,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       if (ghost) this.painter.paintGhost(ctx, ghost, proj, this.deps.theme());
       if (this.externalGhost) this.painter.paintGhost(ctx, this.externalGhost, proj, this.deps.theme());
       this.emitDraft(ghost);
+      if (this.activeTool && !ghost) {
+        const hint = getDrawingType(this.activeTool)?.placementHint;
+        if (hint) this.painter.paintPlacementHint(ctx, hint, this.deps.theme(), proj.width, proj.height);
+      }
       const markers = this.interaction.placingMarkers(proj);
       if (markers) this.painter.paintHandles(ctx, markers);
       const m = this.interaction.snapMarker();
@@ -32948,6 +33633,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.closeTextEditor();
       this.popup.destroy();
       this.toolbar.destroy();
+      this.seriesGwUnsub?.();
+      this.seriesGwUnsub = null;
+      this.seriesGw = null;
       this.intentCb = null;
       this.drawings = [];
     }
@@ -33345,7 +34033,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   }
 
   // src/renderers/native/drawings/Projector.ts
-  function createProjector(coords, paneOf, paneIdAtY, barsInRange) {
+  function createProjector(coords, paneOf, paneIdAtY, barsInRange, seriesInRange) {
     return {
       xOf: (time) => coords.timeToX(time),
       yOf: (price, paneId) => {
@@ -33366,6 +34054,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       },
       barsBetween: (t1, t2) => Math.abs(coords.timeToLogical(t2) - coords.timeToLogical(t1)),
       barsInRange: barsInRange ? (from, to) => barsInRange(from, to) : void 0,
+      seriesInRange,
       width: coords.width,
       height: coords.height
     };
@@ -35369,6 +36058,23 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         seriesBoundaries: (paneId) => this.scene.seriesBoundaries(paneId),
         priceZ: (paneId) => paneId === PRICE_PANE_ID ? this.scene.candleZ : null,
         requestDataPaint: () => this.scheduler.invalidate(3 /* Light */),
+        // The look the price series ACTUALLY paints with: candle colors resolved through
+        // the per-style override, line/area colors through their configured styles — so
+        // series-mirroring content (the magnifier inset) matches the chart exactly.
+        seriesLook: () => {
+          const st = this.scene.style;
+          const paint = effectiveCandlePaint(st.candle, this.scene.candleOverride, this.theme.upColor, this.theme.downColor);
+          const barsUp = st.bars.upColor ?? this.theme.upColor;
+          const barsDown = st.bars.downColor ?? this.theme.downColor;
+          const style = this.scene.priceStyle;
+          return {
+            style,
+            upColor: style === "bars" ? barsUp : paint.up,
+            downColor: style === "bars" ? barsDown : paint.down,
+            lineColor: style === "area" ? st.area.lineColor ?? this.theme.upColor : st.line.color ?? this.theme.upColor
+          };
+        },
+        chartBarMs: () => this.coords.barInterval,
         snap: (pt2, paneId, mode, cursorPx) => this.snapToCandle(pt2, paneId, mode, cursorPx),
         setSnapMode: (mode) => this.setSnapMode(mode),
         setToolbarGutter: (px) => this.setToolbarGutter(px)
@@ -36762,7 +37468,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           return p ? { scale: p.scale, bounds: p.bounds, collapsed: p.collapsed } : null;
         },
         (y) => this.paneNodeAtY(y)?.id ?? null,
-        (from, to) => this.barsInTimeRange(from, to)
+        (from, to) => this.barsInTimeRange(from, to),
+        this.userDrawings?.seriesGateway ? (tf, from, to) => this.userDrawings.seriesGateway.seriesInRange(tf, from, to) : void 0
       );
     }
     /** OHLC bars whose open-time falls within `[from, to]` (inclusive) — the data a regression