@luxalgo/vela 0.6.11 → 0.6.13

package/dist/workspace.cjs

@@ -677,6 +677,7 @@ function intervalMs(timeframe) {
     "4h": 144e5,
     "1d": 864e5,
     "1w": 6048e5,
+    "1M": 2592e6,
     "1": 6e4,
     "5": 3e5,
     "15": 9e5,
@@ -684,7 +685,8 @@ function intervalMs(timeframe) {
     "60": 36e5,
     "240": 144e5,
     D: 864e5,
-    W: 6048e5
+    W: 6048e5,
+    M: 2592e6
   };
   return map[timeframe] ?? 36e5;
 }
@@ -11187,6 +11189,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 REGISTRY = /* @__PURE__ */ new Map();
 function registerDrawingType(meta) {
@@ -11846,6 +11953,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",
@@ -16051,7 +16174,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"];
@@ -16187,7 +16310,7 @@ function buildToolbar(option) {
 
 // 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();
@@ -16213,6 +16336,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()));
     }
@@ -16318,7 +16442,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());
@@ -16393,10 +16517,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. */
@@ -16541,7 +16669,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);
@@ -18073,6 +18201,180 @@ function presetToRange(preset, bars) {
   return { from: Math.max(first, from), to: last };
 }
 
+// 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/core/price-styles/BarTransform.ts
 function barTransformFor(style) {
   return chartType(style)?.barTransform ?? null;
@@ -18091,7 +18393,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 {
@@ -18209,7 +18510,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);
@@ -18361,7 +18668,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;
@@ -18380,10 +18686,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);
@@ -18470,7 +18780,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
@@ -18536,10 +18853,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 {
@@ -19202,8 +19516,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);
         },
@@ -19496,10 +19810,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 ?? {});
@@ -19509,7 +19829,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;
@@ -19537,6 +19857,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}`;
@@ -25671,7 +25996,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;
@@ -28145,6 +28472,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
@@ -28189,6 +28527,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;
   }
@@ -28322,6 +28662,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;
@@ -28814,6 +29158,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. */
@@ -30229,8 +30783,9 @@ function ensureStyles5() {
   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)
@@ -30255,6 +30810,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);
@@ -30297,7 +30860,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) {
@@ -30619,6 +31195,7 @@ var DrawingSettingsPopup = class {
           this.colorPop = null;
           this.colorOwner = null;
         }
+        opts.onClose?.();
       }
     });
     const el = pop.el;
@@ -30637,6 +31214,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) {
+    ensureStyles5();
+    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, {
@@ -30747,10 +31367,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);
@@ -30792,10 +31415,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);
@@ -31147,6 +31773,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();
@@ -31174,7 +31803,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(),
@@ -31232,6 +31861,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;
@@ -31349,8 +31994,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) {
@@ -31396,6 +32067,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) {
@@ -31614,6 +32292,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
@@ -31792,6 +32471,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 });
@@ -31819,6 +32499,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();
@@ -31826,6 +32507,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();
@@ -31837,6 +32522,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 = [];
   }
@@ -32234,7 +32922,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) => {
@@ -32255,6 +32943,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
   };
@@ -34124,6 +34813,23 @@ var NativeRenderer = class {
       seriesBoundaries: (paneId) => this.scene.seriesBoundaries(paneId),
       priceZ: (paneId) => paneId === PRICE_PANE_ID2 ? 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)
@@ -35517,7 +36223,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
@@ -36724,6 +37431,21 @@ function resolveElement(container) {
 // src/core/options.ts
 var normalizeSession = (v) => v === "regular" || v === "extended" ? v : void 0;
 
+// src/widget/statusline-model.ts
+function segmentVisibility(parts, chartHidden = false) {
+  return { avatar: parts.logo, symbol: parts.name, meta: parts.name, market: parts.market, ohlc: parts.ohlc && !chartHidden, change: parts.change && !chartHidden, eye: chartHidden };
+}
+function statuslineMenuItems(parts, chartVisible) {
+  return [
+    { id: "part:logo", label: "Symbol logo", checked: parts.logo },
+    { id: "part:name", label: "Symbol name", checked: parts.name },
+    { id: "part:market", label: "Market status", checked: parts.market },
+    { id: "part:ohlc", label: "OHLC values", checked: parts.ohlc },
+    { id: "part:change", label: "Bar change values", checked: parts.change },
+    { id: "chart", label: chartVisible ? "Hide chart" : "Show chart", separatorBefore: true }
+  ];
+}
+
 // src/widget/format.ts
 function decimalsFor(ref) {
   const a = Math.abs(ref);
@@ -36771,7 +37493,13 @@ var CSS21 = `
     padding: 2px 7px;
     margin-left: -7px;
 }
-.vela-statusline:hover { background: var(--vela-bg); }
+/* Hovering opens the chip the same way a legend row opens: solid chart background
+ * plus the same inset neutral outline the indicator rows wear (InputsUI's
+ * setRowHighlighted) \u2014 the two columns read as one family. */
+.vela-statusline:hover { background: var(--vela-bg); box-shadow: inset 0 0 0 1px var(--vela-border); }
+/* Chart hidden (the price series' eye \u2014 renderer 'candleVisible'): the line dims to
+ * the same 0.5 wash a hidden indicator's legend row wears. */
+.vela-statusline.vela-sl-chart-hidden { opacity: 0.5; }
 .vela-statusline .vela-sl-avatar {
     width: 18px;
     height: 18px;
@@ -36796,6 +37524,24 @@ var CSS21 = `
  * these are the pre-ink fallbacks only. */
 .vela-statusline .vela-sl-change[data-dir='up'] { color: var(--vela-up); }
 .vela-statusline .vela-sl-change[data-dir='down'] { color: var(--vela-down); }
+/* The show-chart eye \u2014 out only while the chart is hidden (syncParts drives display),
+ * replacing the value readout it took away. Same footprint as a legend action button. */
+.vela-statusline .vela-sl-eye {
+    align-self: center;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    border: none;
+    border-radius: 3px;
+    background: none;
+    color: var(--vela-fg-muted);
+    cursor: pointer;
+    line-height: 0;
+    flex: none;
+}
+.vela-statusline .vela-sl-eye:hover { color: var(--vela-fg); background: color-mix(in srgb, var(--vela-fg) 12%, transparent); }
 /* Stack the TOP pane's legend below the status line (lower study panes stay put).
  * The renderer marks whichever legend sits at the plot's top edge \u2014 the price pane
  * normally, or a maximized study pane filling the plot \u2014 so the legend never merges
@@ -36905,7 +37651,12 @@ var Statusline = class {
   constructor(host, symbol, iconFor) {
     this.host = host;
     this.iconFor = iconFor;
-    this.parts = { name: true, market: true, ohlc: true, change: true };
+    this.parts = { logo: true, name: true, market: true, ohlc: true, change: true };
+    /** The right-click action menu — present once a host wires it via {@link attachMenu}. */
+    this.menu = null;
+    this.menuHooks = null;
+    /** Mirror of the renderer's `candleVisible` — see {@link setChartHidden}. */
+    this.chartHidden = false;
     this.lastBar = null;
     this.hoverBar = null;
     this.unsubs = [];
@@ -36921,6 +37672,15 @@ var Statusline = class {
     /** Fit mode (multi-chart cells): one row, overflowing segments hidden — see {@link setFitMode}. */
     this.fitMode = false;
     this.fitRO = null;
+    this.onContextMenu = (e) => {
+      if (!this.menu || !this.menuHooks) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const chartVisible = this.menuHooks.chartVisible();
+      this.setChartHidden(!chartVisible);
+      this.menu.setItems(statuslineMenuItems(this.parts, chartVisible));
+      this.menu.openAt(e.clientX, e.clientY);
+    };
     const doc = host.ownerDocument;
     injectStyles(STYLE_ID24, CSS21, doc);
     host.classList.add("vela-has-statusline");
@@ -36947,9 +37707,21 @@ var Statusline = class {
     this.ohlcEl.className = "vela-sl-ohlc";
     this.changeEl = doc.createElement("span");
     this.changeEl.className = "vela-sl-change";
-    this.el.append(this.avatarEl, this.symbolEl, this.metaEl, this.marketEl, this.ohlcEl, this.changeEl);
+    this.eyeEl = doc.createElement("button");
+    this.eyeEl.type = "button";
+    this.eyeEl.className = "vela-sl-eye";
+    this.eyeEl.innerHTML = iconAt("eye-off", 14);
+    this.eyeEl.setAttribute("aria-label", "Show chart");
+    this.eyeEl.style.display = "none";
+    this.eyeEl.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.menuHooks?.setChartVisible(true);
+      this.setChartHidden(false);
+    });
+    this.el.append(this.avatarEl, this.symbolEl, this.metaEl, this.marketEl, this.ohlcEl, this.changeEl, this.eyeEl);
     host.appendChild(this.el);
     this.marketTip = new Tooltip(this.marketEl, { content: MARKET_LABELS.open, placement: "bottom" });
+    this.eyeTip = new Tooltip(this.eyeEl, { content: "Show chart", placement: "bottom" });
     this.setMarketStatus("open");
     this.render();
   }
@@ -36959,6 +37731,7 @@ var Statusline = class {
     const fresh = tickerIconEl(this.el.ownerDocument, baseOfTicker(ticker), ticker, "vela-sl-avatar", this.iconFor?.(symbol));
     this.avatarEl.replaceWith(fresh);
     this.avatarEl = fresh;
+    this.syncParts();
     this.fit();
   }
   /**
@@ -36986,20 +37759,25 @@ var Statusline = class {
   }
   /** Project the parts config onto the segments (the baseline fit() prunes from). */
   syncParts() {
-    this.symbolEl.style.display = this.parts.name ? "" : "none";
-    this.marketEl.style.display = this.parts.market ? "" : "none";
-    this.ohlcEl.style.display = this.parts.ohlc ? "" : "none";
-    this.changeEl.style.display = this.parts.change ? "" : "none";
+    const seg = segmentVisibility(this.parts, this.chartHidden);
+    this.avatarEl.style.display = seg.avatar ? "" : "none";
+    this.symbolEl.style.display = seg.symbol ? "" : "none";
+    this.metaEl.style.display = seg.meta ? "" : "none";
+    this.marketEl.style.display = seg.market ? "" : "none";
+    this.ohlcEl.style.display = seg.ohlc ? "" : "none";
+    this.changeEl.style.display = seg.change ? "" : "none";
+    this.eyeEl.style.display = seg.eye ? "inline-flex" : "none";
   }
   /** Hide overflowing segments until the row fits its max-width (fit mode only). */
   fit() {
     if (!this.fitMode) return;
     this.syncParts();
+    const seg = segmentVisibility(this.parts, this.chartHidden);
     const order = [
-      [this.ohlcEl, this.parts.ohlc],
-      [this.changeEl, this.parts.change],
-      [this.metaEl, true],
-      [this.marketEl, this.parts.market]
+      [this.ohlcEl, seg.ohlc],
+      [this.changeEl, seg.change],
+      [this.metaEl, seg.meta],
+      [this.marketEl, seg.market]
     ];
     for (const [el, shown] of order) {
       if (this.el.scrollWidth <= this.el.clientWidth) break;
@@ -37020,7 +37798,6 @@ var Statusline = class {
     this.readout = readout;
     this.render();
   }
-  /** Show/hide one part (the settings dialog's Status line tab drives these). */
   /** The "· BINANCE · 1h" segment after the symbol — venue first, then resolution. */
   setMeta(timeframe, provider) {
     this.metaEl.textContent = `${provider ? `\xB7 ${provider.toUpperCase()} ` : ""}\xB7 ${timeframeLabel(timeframe)}`;
@@ -37039,6 +37816,9 @@ var Statusline = class {
     });
     this.marketTip.setContent(MARKET_LABELS[status]);
   }
+  /** Show/hide one part — the settings dialog's Status line tab and the right-click
+   *  menu both drive these. 'name' owns the venue/timeframe meta too (see
+   *  {@link segmentVisibility}). */
   setPartVisible(part, visible) {
     this.parts[part] = visible;
     this.syncParts();
@@ -37047,6 +37827,47 @@ var Statusline = class {
   partVisible(part) {
     return this.parts[part];
   }
+  /** Mirror the chart's (price series') visibility: dim the whole line like a hidden
+   *  indicator's legend row, drop the value readout (OHLC + bar change — values of a
+   *  series that isn't painted), and put the show-chart eye out in its place. The
+   *  parts config is untouched, so showing the chart restores the readout exactly as
+   *  configured. Idempotent; {@link render} re-syncs it from the live renderer, so
+   *  toggles made elsewhere (the object tree's eye) converge too. */
+  setChartHidden(hidden) {
+    if (hidden === this.chartHidden) return;
+    this.chartHidden = hidden;
+    this.el.classList.toggle("vela-sl-chart-hidden", hidden);
+    this.syncParts();
+    this.fit();
+  }
+  /** Wire the right-click action menu: one checkable toggle per part plus hide/show
+   *  for the chart itself. The menu is built once; later calls just swap the hooks. */
+  attachMenu(hooks) {
+    this.menuHooks = hooks;
+    if (this.menu) return;
+    this.menu = new Menu({
+      host: this.host,
+      items: [],
+      placement: "bottom-start",
+      // Pointer-anchored action menu — checked state reads as a leading ✓ (the
+      // same shape as the chart's own context menu).
+      checkmarks: true,
+      onSelect: (id) => this.runMenuItem(id)
+    });
+    this.el.addEventListener("contextmenu", this.onContextMenu);
+  }
+  runMenuItem(id) {
+    const hooks = this.menuHooks;
+    if (!hooks) return;
+    if (id.startsWith("part:")) {
+      const part = id.slice("part:".length);
+      hooks.setPart(part, !this.parts[part]);
+    } else if (id === "chart") {
+      const next = !hooks.chartVisible();
+      hooks.setChartVisible(next);
+      this.setChartHidden(!next);
+    }
+  }
   /** (Re)bind to a chart instance — called after every widget rebuild. */
   onChart(chart) {
     this.detach();
@@ -37068,7 +37889,11 @@ var Statusline = class {
     this.detach();
     this.fitRO?.disconnect();
     this.fitRO = null;
+    this.el.removeEventListener("contextmenu", this.onContextMenu);
+    this.menu?.destroy();
+    this.menu = null;
     this.marketTip.destroy();
+    this.eyeTip.destroy();
     this.marketBubble.destroy();
     this.host.classList.remove("vela-has-statusline", "vela-sl-fit-host");
     this.el.remove();
@@ -37078,6 +37903,7 @@ var Statusline = class {
     this.unsubs = [];
   }
   render() {
+    if (this.menuHooks) this.setChartHidden(!this.menuHooks.chartVisible());
     const bar = this.hoverBar ?? this.lastBar;
     if (!bar) {
       this.ohlcEl.replaceChildren();
@@ -37148,7 +37974,7 @@ var FETCH_BACK_MS = 4 * 864e5;
 var FETCH_AHEAD_MS = 10 * 864e5;
 var MIN_TIMER_MS = 15e3;
 var MAX_TIMER_MS = 36e5;
-var RETRY_MS = 6e4;
+var RETRY_MS2 = 6e4;
 var MarketStatusTracker = class {
   constructor(onStatus) {
     this.onStatus = onStatus;
@@ -37185,7 +38011,7 @@ var MarketStatusTracker = class {
     ]);
     if (my !== this.epoch) return;
     if (!regular || !extended) {
-      this.arm(my, data, symbol, RETRY_MS);
+      this.arm(my, data, symbol, RETRY_MS2);
       return;
     }
     const w = { regular, extended };
@@ -37896,7 +38722,14 @@ var ChartCell = class {
     this.destroyed = false;
     this.appTheme = deps.theme;
     const symbol = prefixedSymbol(seed);
-    this.state = { symbol, provider: parseSymbol(symbol ?? "").provider ?? void 0, timeframe: seed.timeframe, priceStyle: seed.priceStyle, bars: seed.bars, session: normalizeSession(seed.session) };
+    this.state = {
+      symbol,
+      provider: parseSymbol(symbol ?? "").provider ?? void 0,
+      timeframe: seed.timeframe,
+      priceStyle: seed.priceStyle,
+      bars: seed.bars,
+      session: normalizeSession(seed.session)
+    };
     const doc = gridHost.ownerDocument;
     this.host = doc.createElement("div");
     this.host.className = "vela-cell";
@@ -37984,6 +38817,11 @@ var ChartCell = class {
     this.statusline = deps.statusline ? new Statusline(this.host, symbol ?? "", (sym) => this.inner?.data.symbolIcon(sym)) : null;
     this.statusline?.setMeta(seed.timeframe ?? "60", this.state.provider ?? "");
     this.statusline?.onChart(this.inner);
+    this.statusline?.attachMenu({
+      setPart: (part, visible) => this.setStatuslinePart(part, visible),
+      chartVisible: () => this.inner?.renderer.get("candleVisible") !== false,
+      setChartVisible: (visible) => this.inner?.renderer.set("candleVisible", visible)
+    });
     this.marketStatus = this.statusline ? new MarketStatusTracker((s) => this.statusline?.setMarketStatus(s)) : null;
     void this.inner.data.ready().then(() => {
       if (this.inner && this.state.symbol) {
@@ -38191,7 +39029,7 @@ var ChartCell = class {
           kind: "select",
           label: "Bars to fetch",
           id: "bars",
-          options: ["500", "1000", "2000", "5000", "10000", "20000"],
+          options: ["500", "1000", "2000", "5000", "10000", "20000", "50000", "60000", "80000", "100000"],
           get: () => String(this.state.bars ?? 1e3),
           set: (v) => {
             this.state.bars = Number(v);
@@ -38223,10 +39061,34 @@ var ChartCell = class {
         id: "status-line",
         rows: [
           { kind: "heading", label: "Status line", id: "parts" },
-          { kind: "toggle", label: "Symbol name", id: "name", get: () => sl.partVisible("name"), set: (v) => this.setStatuslinePart("name", v) },
-          { kind: "toggle", label: "Market status", id: "market", get: () => sl.partVisible("market"), set: (v) => this.setStatuslinePart("market", v) },
-          { kind: "toggle", label: "OHLC values", id: "ohlc", get: () => sl.partVisible("ohlc"), set: (v) => this.setStatuslinePart("ohlc", v) },
-          { kind: "toggle", label: "Bar change values", id: "change", get: () => sl.partVisible("change"), set: (v) => this.setStatuslinePart("change", v) },
+          {
+            kind: "toggle",
+            label: "Symbol name",
+            id: "name",
+            get: () => sl.partVisible("name"),
+            set: (v) => this.setStatuslinePart("name", v)
+          },
+          {
+            kind: "toggle",
+            label: "Market status",
+            id: "market",
+            get: () => sl.partVisible("market"),
+            set: (v) => this.setStatuslinePart("market", v)
+          },
+          {
+            kind: "toggle",
+            label: "OHLC values",
+            id: "ohlc",
+            get: () => sl.partVisible("ohlc"),
+            set: (v) => this.setStatuslinePart("ohlc", v)
+          },
+          {
+            kind: "toggle",
+            label: "Bar change values",
+            id: "change",
+            get: () => sl.partVisible("change"),
+            set: (v) => this.setStatuslinePart("change", v)
+          },
           { kind: "heading", label: "Indicators", id: "indicators" },
           {
             kind: "toggle",
@@ -38279,7 +39141,7 @@ var ChartCell = class {
   statusPrefs() {
     const sl = this.statusline;
     return {
-      parts: sl ? { name: sl.partVisible("name"), market: sl.partVisible("market"), ohlc: sl.partVisible("ohlc"), change: sl.partVisible("change") } : null,
+      parts: sl ? { logo: sl.partVisible("logo"), name: sl.partVisible("name"), market: sl.partVisible("market"), ohlc: sl.partVisible("ohlc"), change: sl.partVisible("change") } : null,
       indicatorTitles: this.indicatorTitlesOn,
       indicatorValues: this.indicatorValuesOn
     };
@@ -38453,7 +39315,8 @@ var ChartCell = class {
       if (this.manifest.length > 0) {
         for (const item of led.manifest) {
           const entry = this.manifest.find((e) => e.name === ledgerEntryName(item));
-          if (entry) this.addManifestInstance(entry, { record: false, ...typeof item === "object" ? { inputs: item.inputs, props: item.props } : {} });
+          if (entry)
+            this.addManifestInstance(entry, { record: false, ...typeof item === "object" ? { inputs: item.inputs, props: item.props } : {} });
         }
         this.pendingManifestNames = null;
       } else if (!this.deps.manifestSettled()) {
@@ -38502,7 +39365,10 @@ var ChartCell = class {
    * a persistence handler's `restore` runs silently, a user-driven call records.
    */
   addExternalIndicator(entry) {
-    this.addManifestInstance({ ...entry, enabled: true }, { external: true, ...entry.inputs ? { inputs: entry.inputs } : {}, ...entry.props ? { props: entry.props } : {} });
+    this.addManifestInstance(
+      { ...entry, enabled: true },
+      { external: true, ...entry.inputs ? { inputs: entry.inputs } : {}, ...entry.props ? { props: entry.props } : {} }
+    );
   }
   /** Add ONE instance of a manifest entry (repeatable — duplicates are legitimate). */
   addManifestInstance(entry, opts = {}) {
@@ -39014,7 +39880,7 @@ var SplitterLayer = class {
 };
 
 // src/workspace/VelaWorkspace.ts
-var DEFAULT_TIMEFRAMES = ["1", "5", "15", "60", "240", "D", "W"];
+var DEFAULT_TIMEFRAMES = ["1", "5", "15", "30", "60", "240", "D", "W", "M"];
 var GAP_PX = 2;
 var POOL_CAP = 16;
 var TIME_AXIS_H4 = 22;