@luxalgo/vela 0.6.11 → 0.6.13

package/dist/index.cjs

@@ -5424,6 +5424,111 @@ function roundFloat(n) {
   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) {
@@ -6083,6 +6188,22 @@ registerDrawingType({
   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",
@@ -6122,7 +6243,7 @@ var GEOMETRY_TYPES = ["dedekind", "sonic", "supersonic", "goldensonic", "goldens
 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"];
@@ -6486,7 +6607,7 @@ var DrawingHistory = class {
 
 // 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();
@@ -6512,6 +6633,7 @@ var DrawingController = class {
       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()));
     }
@@ -6617,7 +6739,7 @@ var DrawingController = class {
       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());
@@ -6692,10 +6814,14 @@ var DrawingController = class {
    *  (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. */
@@ -6840,7 +6966,7 @@ var DrawingController = class {
         const style = last ? { ...i.doc.style, ...last } : 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);
@@ -6938,6 +7064,180 @@ function timeframeToMs(timeframe) {
   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;
@@ -7302,7 +7602,6 @@ var RUN_EMIT_THROTTLE_MS = 1e3;
 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 {
@@ -7420,7 +7719,13 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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);
@@ -7572,7 +7877,6 @@ var EngineOrchestrator = class _EngineOrchestrator {
       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;
@@ -7591,10 +7895,14 @@ var EngineOrchestrator = class _EngineOrchestrator {
           }
         };
         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);
@@ -7681,7 +7989,14 @@ var EngineOrchestrator = class _EngineOrchestrator {
    *  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
@@ -7747,10 +8062,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
       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 {
@@ -8413,8 +8725,8 @@ var EngineOrchestrator = class _EngineOrchestrator {
         onModel: (model) => {
           const first = !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, first);
         },
@@ -8707,10 +9019,16 @@ var EngineOrchestrator = class _EngineOrchestrator {
    * 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 ?? {});
@@ -8720,7 +9038,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
       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;
@@ -8748,6 +9066,11 @@ var EngineOrchestrator = class _EngineOrchestrator {
     }
     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}`;
@@ -9450,6 +9773,7 @@ function intervalMs(timeframe) {
     "4h": 144e5,
     "1d": 864e5,
     "1w": 6048e5,
+    "1M": 2592e6,
     "1": 6e4,
     "5": 3e5,
     "15": 9e5,
@@ -9457,7 +9781,8 @@ function intervalMs(timeframe) {
     "60": 36e5,
     "240": 144e5,
     D: 864e5,
-    W: 6048e5
+    W: 6048e5,
+    M: 2592e6
   };
   return map[timeframe] ?? 36e5;
 }
@@ -18644,7 +18969,9 @@ var DrawingSceneRenderer = class {
     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 min = Infinity;
@@ -21208,6 +21535,17 @@ var DrawingPainter = class {
   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
@@ -21252,6 +21590,8 @@ var DrawingPainter = class {
     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;
   }
@@ -21385,6 +21725,10 @@ var DrawingPainter = class {
       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;
@@ -21877,6 +22221,216 @@ var DrawingPainter = class {
       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. */
@@ -23292,8 +23846,9 @@ function ensureStyles3() {
   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)
@@ -23318,6 +23873,14 @@ var DrawingSettingsPopup = class {
     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);
@@ -23360,7 +23923,20 @@ var DrawingSettingsPopup = class {
       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) {
@@ -23682,6 +24258,7 @@ var DrawingSettingsPopup = class {
           this.colorPop = null;
           this.colorOwner = null;
         }
+        opts.onClose?.();
       }
     });
     const el = pop.el;
@@ -23700,6 +24277,49 @@ var DrawingSettingsPopup = class {
     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: (menu2, 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";
+          menu2.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);
+          });
+          menu2.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, {
@@ -23810,10 +24430,13 @@ var DrawingSettingsPopup = class {
     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);
@@ -23855,10 +24478,13 @@ var DrawingSettingsPopup = class {
           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);
@@ -24842,6 +25468,9 @@ var UserDrawingController = class {
     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();
@@ -24869,7 +25498,7 @@ var UserDrawingController = class {
     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(),
@@ -24927,6 +25556,22 @@ var UserDrawingController = class {
     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;
@@ -25044,8 +25689,34 @@ var UserDrawingController = class {
   /** 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) {
@@ -25091,6 +25762,13 @@ var UserDrawingController = class {
       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, shift);
   }
   pointerMove(x, y, snap = "off", shift = false) {
@@ -25309,6 +25987,7 @@ var UserDrawingController = class {
   /** 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
@@ -25487,6 +26166,7 @@ var UserDrawingController = class {
       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 });
@@ -25514,6 +26194,7 @@ var UserDrawingController = class {
       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();
@@ -25521,6 +26202,10 @@ var UserDrawingController = class {
     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();
@@ -25532,6 +26217,9 @@ var UserDrawingController = class {
     this.closeTextEditor();
     this.popup.destroy();
     this.toolbar.destroy();
+    this.seriesGwUnsub?.();
+    this.seriesGwUnsub = null;
+    this.seriesGw = null;
     this.intentCb = null;
     this.drawings = [];
   }
@@ -25929,7 +26617,7 @@ function mergeSlices(indicator, user) {
 }
 
 // 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) => {
@@ -25950,6 +26638,7 @@ function createProjector(coords, paneOf, paneIdAtY, barsInRange) {
     },
     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
   };
@@ -27953,6 +28642,23 @@ var NativeRenderer = class {
       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: (pt, paneId, mode, cursorPx) => this.snapToCandle(pt, paneId, mode, cursorPx),
       setSnapMode: (mode) => this.setSnapMode(mode),
       setToolbarGutter: (px) => this.setToolbarGutter(px)
@@ -29346,7 +30052,8 @@ var NativeRenderer = class {
         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