@luxalgo/vela 0.6.8 → 0.6.10

package/dist/{chunk-N7LGMKCE.js → chunk-NMTQXNT4.js}

@@ -1,8 +1,8 @@
-import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel, Vela, TypedEventBus, MultiProviderFeed, registerBuiltinChartTypes, resolveTheme, buildToolbar, createCustomMark, createAttributionMark, DrawingToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs } from './chunk-SQETIBFU.js';
-import { chartType, resolveTopbarComposition, topbarActionOverride, TOPBAR_BUILTIN_IDS, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, symbolRanking, resolveEngines, legendActionsProviderFor, statePersistenceHandlers, topbarHas, rendererDefaults, widgetAttachments, getDrawingType } from './chunk-L3I2CCYO.js';
-import { Tooltip, KeymapManager, isEditableTarget, Drawer } from './chunk-2R7BANEM.js';
-import { Menu, Dialog, applyPlotOverlayTokens, ensureUIHost } from './chunk-OICPLNU7.js';
-import { registerIcon, svg16, injectStyles, iconEl, iconMarkup, SESSION_PRE, SESSION_POST, SESSION_OFF, icon, categoricalColor } from './chunk-PN5KWFZ4.js';
+import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel, isGroupRow, defaultMemberOf, groupKeyOf, groupMembers, LEGEND_AT_TOP_ATTR, Vela, TypedEventBus, MultiProviderFeed, registerBuiltinChartTypes, resolveTheme, buildToolbar, createCustomMark, createAttributionMark, DrawingToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs } from './chunk-FFOP37FQ.js';
+import { chartType, resolveTopbarComposition, topbarActionOverride, TOPBAR_BUILTIN_IDS, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, symbolRanking, resolveEngines, legendActionsProviderFor, legendCalloutsProviderFor, statePersistenceHandlers, topbarHas, rendererDefaults, widgetAttachments, getDrawingType } from './chunk-4KZVZ7QQ.js';
+import { Tooltip, KeymapManager, isEditableTarget, Drawer } from './chunk-G77Y7LK2.js';
+import { Menu, Dialog, CalloutBubble, applyPlotOverlayTokens, ensureUIHost } from './chunk-MHY7MVXH.js';
+import { registerIcon, svg16, injectStyles, iconEl, iconMarkup, SESSION_OFF, SESSION_POST, SESSION_PRE, icon, categoricalColor } from './chunk-KG4YT3TI.js';
 import { baseOf } from './chunk-W4EJWLEO.js';
 
 // src/widget/timeframe.ts
@@ -2931,6 +2931,17 @@ function dedupeSymbols(list) {
   }
   return out;
 }
+function foldGroups(list) {
+  const groupsAbove = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const s of list) {
+    if (isGroupRow(s)) {
+      groupsAbove.add(groupKeyOf(s));
+      out.push(s);
+    } else if (s.group == null || !groupsAbove.has(groupKeyOf(s))) out.push(s);
+  }
+  return out;
+}
 var TOP_TICKERS = ["BTCUSDT", "ETHUSDT", "SOLUSDT", "BNBUSDT", "XRPUSDT", "DOGEUSDT", "ADAUSDT", "LINKUSDT"];
 function parseQuery(raw, venues) {
   const m = raw.match(/^\s*([^\s:]+)\s*[:\s]\s*(.*)$/);
@@ -3062,6 +3073,21 @@ var CSS6 = `
 .vela-sp-badge[data-p='binance'] { color: #f0b90b; } /* palette-exempt: venue brand mark */
 .vela-sp-badge[data-p='hyperliquid'] { color: #50d2c1; } /* palette-exempt: venue brand mark */
 .vela-sp-empty { padding: var(--vela-space-3); color: var(--vela-fg-muted); text-align: center; }
+/* Grouped listings (futures roots): the chevron unfolds members inline, indented. */
+.vela-sp-expander {
+    all: unset;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 5px;
+    cursor: pointer;
+    color: var(--vela-fg-muted);
+}
+.vela-sp-expander:hover { background: var(--vela-surface-elev); color: var(--vela-fg); }
+.vela-sp-row[data-member] { padding-left: 34px; }
 `;
 var PAGE = 100;
 var SymbolPicker = class {
@@ -3073,6 +3099,11 @@ var SymbolPicker = class {
     this.seed = "";
     this.activeTab = "All";
     this.visible = PAGE;
+    /** The last filter pass returned fewer raw rows than asked — the pool is drained
+     *  (checked BEFORE folding: folding shortens pages without meaning exhaustion). */
+    this.exhausted = false;
+    /** Group rows currently expanded (venue-scoped keys) — members shown inline. */
+    this.expanded = /* @__PURE__ */ new Set();
     /** The ranked pool cache — `key` fingerprints the raw pool the ranking ran on. */
     this.ranked = null;
     this.ranking = false;
@@ -3087,7 +3118,7 @@ var SymbolPicker = class {
     searchRow.append(iconEl("search", doc), this.input);
     this.tabs = doc.createElement("div");
     this.tabs.className = "vela-sp-tabs";
-    for (const t of ["All", "Stocks", "ETFs", "Crypto", "Forex", "Commodities"]) {
+    for (const t of ["All", "Stocks", "ETFs", "Crypto", "Futures", "Forex", "Commodities"]) {
       const b = doc.createElement("button");
       b.className = "vela-sp-tab";
       b.textContent = t;
@@ -3103,7 +3134,7 @@ var SymbolPicker = class {
     this.list = doc.createElement("div");
     this.list.className = "vela-sp-list";
     this.list.addEventListener("scroll", () => {
-      if (this.rows.length < this.visible) return;
+      if (this.exhausted) return;
       if (this.list.scrollTop + this.list.clientHeight < this.list.scrollHeight - 200) return;
       this.visible += PAGE;
       this.grow();
@@ -3132,14 +3163,19 @@ var SymbolPicker = class {
       else if (e.key === "ArrowUp") this.moveHighlight(-1);
       else if (e.key === "Enter") {
         const pick = this.rows[this.highlighted];
-        if (pick) this.select(pick.ticker, pick.prefix ?? pick.provider, opts.onSelect);
+        if (pick) this.pick(pick);
         return;
       } else return;
       e.preventDefault();
     });
     this.list.addEventListener("click", (e) => {
-      const row = e.target.closest(".vela-sp-row");
-      if (row?.dataset.ticker) this.select(row.dataset.ticker, row.dataset.venue, opts.onSelect);
+      const target = e.target;
+      const row = target.closest(".vela-sp-row");
+      if (!row) return;
+      const s = this.rows[Number(row.dataset.i)];
+      if (!s) return;
+      if (target.closest(".vela-sp-expander")) this.toggleExpand(s);
+      else this.pick(s);
     });
   }
   /** Wire where symbols come from (re-called on every widget rebuild). */
@@ -3156,6 +3192,27 @@ var SymbolPicker = class {
   destroy() {
     this.dialog.destroy();
   }
+  /** Route a row activation: a GROUP row loads its default member (the root itself is
+   *  listed, never loadable), any other row loads itself. */
+  pick(s) {
+    const target = isGroupRow(s) ? defaultMemberOf(this.pool(), s) ?? s : s;
+    this.select(target.ticker, target.prefix ?? target.provider, this.opts.onSelect);
+  }
+  /** Expand/collapse a group row IN PLACE — same query, same page, same scroll; only
+   *  the member rows under the group appear or go. */
+  toggleExpand(s) {
+    const key = groupKeyOf(s);
+    if (!this.expanded.delete(key)) this.expanded.add(key);
+    const scrollTop = this.list.scrollTop;
+    const focus = this.rows[this.highlighted];
+    this.rows = this.computeRows();
+    this.list.replaceChildren();
+    this.rows.forEach((r, i) => this.list.appendChild(this.rowEl(r, i)));
+    const at = focus ? this.rows.indexOf(focus) : -1;
+    this.highlighted = at >= 0 ? at : Math.min(this.highlighted, Math.max(0, this.rows.length - 1));
+    this.renderHighlight();
+    this.list.scrollTop = scrollTop;
+  }
   select(ticker, venue, onSelect) {
     this.close();
     onSelect(venue ? `${venue}:${ticker}` : ticker);
@@ -3197,10 +3254,26 @@ var SymbolPicker = class {
     return this.ranked?.result ?? raw;
   }
   computeRows() {
-    const TAB_TYPES = { Crypto: ["crypto"], Stocks: ["stock"], ETFs: ["etf"], Forex: ["forex"], Commodities: ["commodity"] };
+    const TAB_TYPES = { Crypto: ["crypto"], Stocks: ["stock"], ETFs: ["etf"], Futures: ["futures", "root"], Forex: ["forex"], Commodities: ["commodity"] };
     const all = this.pool();
     const pool = this.activeTab === "All" ? all : all.filter((s) => TAB_TYPES[this.activeTab]?.includes((s.type ?? "").toLowerCase()) || this.activeTab === "Crypto" && (s.type ?? "").toLowerCase() === "futures");
-    return filterSymbols(pool, this.input.value, this.visible, symbolRanking() ? false : TOP_TICKERS);
+    const filtered = filterSymbols(pool, this.input.value, this.visible, symbolRanking() ? false : TOP_TICKERS);
+    this.exhausted = filtered.length < this.visible;
+    const folded = foldGroups(filtered);
+    if (!this.expanded.size) return folded;
+    const keyOf = (s) => `${(s.prefix ?? s.provider ?? "").toLowerCase()}:${s.ticker.toUpperCase()}`;
+    const present = new Set(folded.map(keyOf));
+    const out = [];
+    for (const s of folded) {
+      out.push(s);
+      if (!isGroupRow(s) || !this.expanded.has(groupKeyOf(s))) continue;
+      for (const m of groupMembers(all, s)) {
+        if (present.has(keyOf(m))) continue;
+        present.add(keyOf(m));
+        out.push(m);
+      }
+    }
+    return out;
   }
   refresh() {
     const doc = this.list.ownerDocument;
@@ -3215,19 +3288,20 @@ var SymbolPicker = class {
       this.list.appendChild(empty);
       return;
     }
-    for (const s of this.rows) this.list.appendChild(this.rowEl(s));
+    this.rows.forEach((s, i) => this.list.appendChild(this.rowEl(s, i)));
     this.renderHighlight();
   }
   /** Append the page the grown `visible` just uncovered — rows already on screen stay put. */
   grow() {
     const already = this.rows.length;
     this.rows = this.computeRows();
-    for (const s of this.rows.slice(already)) this.list.appendChild(this.rowEl(s));
+    this.rows.slice(already).forEach((s, j) => this.list.appendChild(this.rowEl(s, already + j)));
   }
-  rowEl(s) {
+  rowEl(s, i) {
     const doc = this.list.ownerDocument;
     const row = doc.createElement("div");
     row.className = "vela-sp-row";
+    row.dataset.i = String(i);
     row.dataset.ticker = s.ticker;
     const venue = s.prefix ?? s.provider;
     if (venue) row.dataset.venue = venue;
@@ -3242,6 +3316,14 @@ var SymbolPicker = class {
     d.textContent = s.description ?? (s.type ?? "");
     main.append(t, d);
     row.append(av, main);
+    if (isGroupRow(s)) {
+      row.dataset.group = "1";
+      const expander = doc.createElement("button");
+      expander.className = "vela-sp-expander";
+      expander.setAttribute("aria-label", "Show contracts");
+      expander.appendChild(iconEl(this.expanded.has(groupKeyOf(s)) ? "chevron-down" : "chevron-right", doc));
+      row.appendChild(expander);
+    } else if (s.group != null && this.expanded.has(groupKeyOf(s))) row.dataset.member = "1";
     if (venue) {
       const badge = doc.createElement("span");
       badge.className = "vela-sp-badge";
@@ -3940,45 +4022,24 @@ var CSS10 = `
 }
 .vela-statusline .vela-sl-symbol { font-weight: 600; font-size: var(--vela-font-size-lg); }
 .vela-statusline .vela-sl-meta { color: var(--vela-fg-muted); font-size: var(--vela-font-size-md); font-weight: 600; }
-/* Market status badge \u2014 icon-only 16px circle, label on hover (kit tooltip). */
-.vela-statusline .vela-sl-market {
-    display: inline-grid;
-    place-items: center;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    flex: none;
-    align-self: center;
-    line-height: 0;
-    cursor: default;
-}
-.vela-statusline .vela-sl-market svg {
-    width: 12px;
-    height: 12px;
-    display: block;
-}
-/* Open wears the theme's up color; the other sessions are meaning constants from the
- * palette (amber pre, sky post, gray closed/holiday). Same ink at 20% for the circle. */
-.vela-statusline .vela-sl-market[data-status='open'] {
-    background: color-mix(in srgb, var(--vela-up) 20%, transparent);
-    color: var(--vela-up);
-}
-.vela-statusline .vela-sl-market[data-status='pre'] { background: color-mix(in srgb, ${SESSION_PRE} 20%, transparent); color: ${SESSION_PRE}; }
-.vela-statusline .vela-sl-market[data-status='post'] { background: color-mix(in srgb, ${SESSION_POST} 20%, transparent); color: ${SESSION_POST}; }
-.vela-statusline .vela-sl-market[data-status='closed'],
-.vela-statusline .vela-sl-market[data-status='holiday'] { background: color-mix(in srgb, ${SESSION_OFF} 20%, transparent); color: ${SESSION_OFF}; }
+/* Market status badge \u2014 a kit callout bubble (icon-only 16px circle, label on hover
+ * via the kit tooltip); the session tint is applied per status in setMarketStatus. */
+.vela-statusline .vela-sl-market { align-self: center; }
 .vela-statusline .vela-sl-ohlc { display: flex; gap: var(--vela-space-1); color: var(--vela-fg-muted); }
 .vela-statusline .vela-sl-ohlc b { color: var(--vela-fg); font-weight: 500; }
 /* The change value wears the SAME ink as the OHLC values (set inline per render) \u2014
  * 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); }
-/* Stack the renderer's PRICE-pane legend below the status line (study panes stay put).
- * The renderer sets the legend's inline top \u2014 shift with a transform, don't fight it.
- * Scoped to hosts that actually CARRY a status line (the marker class set by the
- * Statusline constructor) \u2014 the stylesheet is document-global, so a bare container
- * class here would shift every chart on the page, including statusline-less ones. */
-.vela-has-statusline [data-vela-pane='price'] { transform: translateY(26px); }
+/* 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
+ * with the status line whichever pane owns the top. The renderer sets the legend's
+ * inline top \u2014 shift with a transform, don't fight it. Scoped to hosts that actually
+ * CARRY a status line (the marker class set by the Statusline constructor) \u2014 the
+ * stylesheet is document-global, so a bare attribute selector here would shift every
+ * chart on the page, including statusline-less ones. */
+.vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(26px); }
 /* Mobile: two-line chip \u2014 logo / symbol / meta / market status on one aligned row, the
  * bar change on the next. Full O/H/L/C stays hidden (too dense on a phone-width plot).
  * GRID, not a wrapping flexbox: an absolutely positioned wrapping flex container sizes
@@ -4014,7 +4075,7 @@ var CSS10 = `
     font-size: var(--vela-font-size-sm);
     line-height: 1.2;
 }
-[data-layout='mobile'] .vela-has-statusline [data-vela-pane='price'] { transform: translateY(40px); }
+[data-layout='mobile'] .vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(40px); }
 /* FIT mode (multi-chart cells \u2014 see setFitMode): the line never wraps; segments that
  * don't fit are HIDDEN by fit() (change first, then meta, then the market badge), so
  * overflow:hidden only guards the transient between a resize and the next measure.
@@ -4031,7 +4092,7 @@ var CSS10 = `
     padding-left: 0;
 }
 /* One row again \u2014 the mobile two-line shift doesn't apply in fit mode. */
-[data-layout='mobile'] .vela-sl-fit-host.vela-has-statusline [data-vela-pane='price'] { transform: translateY(26px); }
+[data-layout='mobile'] .vela-sl-fit-host.vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(26px); }
 `;
 function baseOfTicker(ticker) {
   return ticker.replace(/[-_/]?(USDT|USDC|USD1|USDS|BUSD|USD|EUR|PERP)$/i, "") || ticker;
@@ -4043,6 +4104,13 @@ var MARKET_LABELS = {
   closed: "Market Closed",
   holiday: "Market Holiday"
 };
+var MARKET_INKS = {
+  open: "var(--vela-up)",
+  pre: SESSION_PRE,
+  post: SESSION_POST,
+  closed: SESSION_OFF,
+  holiday: SESSION_OFF
+};
 function statuslineInkOf(renderer, priceStyle) {
   const cfg = renderer.getConfig();
   const c = (v) => typeof v === "string" ? v : null;
@@ -4101,8 +4169,15 @@ var Statusline = class {
     this.symbolEl.textContent = ticker;
     this.metaEl = doc.createElement("span");
     this.metaEl.className = "vela-sl-meta";
-    this.marketEl = doc.createElement("span");
-    this.marketEl.className = "vela-sl-market";
+    this.marketBubble = new CalloutBubble({
+      icon: "market-open",
+      background: `color-mix(in srgb, ${MARKET_INKS.open} 20%, transparent)`,
+      color: MARKET_INKS.open,
+      label: MARKET_LABELS.open,
+      host
+    });
+    this.marketEl = this.marketBubble.el;
+    this.marketEl.classList.add("vela-sl-market");
     this.ohlcEl = doc.createElement("span");
     this.ohlcEl.className = "vela-sl-ohlc";
     this.changeEl = doc.createElement("span");
@@ -4190,8 +4265,13 @@ var Statusline = class {
    *  hover label. Callers with no session model leave the constructor's 'open'. */
   setMarketStatus(status) {
     this.marketEl.dataset.status = status;
-    this.marketEl.innerHTML = icon(`market-${status}`);
-    this.marketEl.setAttribute("aria-label", MARKET_LABELS[status]);
+    const ink = MARKET_INKS[status];
+    this.marketBubble.set({
+      icon: `market-${status}`,
+      background: `color-mix(in srgb, ${ink} 20%, transparent)`,
+      color: ink,
+      label: MARKET_LABELS[status]
+    });
     this.marketTip.setContent(MARKET_LABELS[status]);
   }
   setPartVisible(part, visible) {
@@ -4224,6 +4304,7 @@ var Statusline = class {
     this.fitRO?.disconnect();
     this.fitRO = null;
     this.marketTip.destroy();
+    this.marketBubble.destroy();
     this.host.classList.remove("vela-has-statusline", "vela-sl-fit-host");
     this.el.remove();
   }
@@ -4760,6 +4841,8 @@ var SessionShadingTracker = class {
     this.spec = null;
     this.ready = false;
     this.session = "regular";
+    /** Whether one bar is shorter than a civil day — only then do pre/post bars exist. */
+    this.intraday = false;
     this.covered = null;
     /** The newest range seen — viewport moves during metadata resolution (a load's fit
      *  animation) must not be lost, so the resolution always expands the LATEST range. */
@@ -4772,6 +4855,8 @@ var SessionShadingTracker = class {
     this.spec = null;
     this.covered = null;
     this.session = opts.session;
+    const tfMs = timeframeMs(opts.timeframe);
+    this.intraday = Number.isFinite(tfMs) && tfMs < DAY_MS;
     this.lastRange = opts.range;
     void data.symbolInfo(symbol).catch(() => void 0).then((si) => {
       if (my !== this.epoch) return;
@@ -4799,7 +4884,7 @@ var SessionShadingTracker = class {
       if (force) this.onZones(null);
       return;
     }
-    if (this.session !== "extended") {
+    if (this.session !== "extended" || !this.intraday) {
       if (force) this.onZones({ pre: [], post: [] });
       return;
     }
@@ -4814,6 +4899,229 @@ var SessionShadingTracker = class {
   }
 };
 
+// src/widget/glide.ts
+var MIN_SPAN_MS = 6e4;
+var FOLLOW = 0.25;
+var ZOOM_IN = 0.8;
+var ZOOM_OUT = 1.25;
+var PAN_FAST = 0.2;
+function zoomTarget(base, factor) {
+  const newSpan = Math.max(MIN_SPAN_MS, (base.to - base.from) * factor);
+  return { from: base.to - newSpan, to: base.to };
+}
+function followStep(cur, target, follow = FOLLOW, epsFrac = 15e-4) {
+  const eps = Math.max(MIN_SPAN_MS, (target.to - target.from) * epsFrac);
+  const nf = cur.from + (target.from - cur.from) * follow;
+  const nt = cur.to + (target.to - cur.to) * follow;
+  const done = Math.abs(target.from - nf) <= eps && Math.abs(target.to - nt) <= eps;
+  return { cur: done ? { ...target } : { from: nf, to: nt }, done };
+}
+var Glider = class {
+  constructor(chart) {
+    this.chart = chart;
+    // The glide eases ITS OWN range, never the chart's read-back: getVisibleRange()
+    // is data-bounded (whole bars, `to` capped at the newest bar) and the renderer
+    // clamps what gets applied — chasing that read-back can never converge on a
+    // clamped step, leaving the rAF loop re-applying a stale target forever (and
+    // grinding the span down when panning past the newest bar). The internal range
+    // converges geometrically, so the glide always terminates; the renderer is free
+    // to clamp each applied frame.
+    this.cur = null;
+    this.target = null;
+    this.raf = 0;
+  }
+  zoom(factor) {
+    this.to((base) => zoomTarget(base, factor));
+  }
+  stop() {
+    if (this.raf) cancelAnimationFrame(this.raf);
+    this.raf = 0;
+    this.cur = null;
+    this.target = null;
+  }
+  to(make) {
+    const chart = this.chart();
+    const base = this.target ?? chart?.getVisibleRange();
+    if (!chart || !base) return;
+    this.cur ?? (this.cur = { ...base });
+    this.target = make(base);
+    if (!this.raf) this.tick();
+  }
+  tick() {
+    this.raf = requestAnimationFrame(() => {
+      const chart = this.chart();
+      if (!chart || !this.cur || !this.target) {
+        this.stop();
+        return;
+      }
+      const { cur: next, done } = followStep(this.cur, this.target);
+      this.cur = next;
+      chart.setVisibleRange(next);
+      if (done) this.stop();
+      else this.tick();
+    });
+  }
+};
+
+// src/widget/cell-controls.ts
+var CELL_CONTROLS_PROXIMITY_PX = 120;
+var TIME_AXIS_H2 = 22;
+var CONTROLS_BOTTOM_PX = TIME_AXIS_H2 + 12;
+var CLUSTER_H = 24;
+var CLUSTER_PILL = "rgba(0,0,0,0.65)";
+var STYLE_ID12 = "vela-cell-controls";
+var CSS12 = `
+.vela-cc-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--vela-radius-sm);background:transparent;line-height:0;font-size:12px;color:var(--vela-fg-muted);cursor:pointer;}
+.vela-cc-btn svg{display:block;}
+.vela-cc-btn:hover{background:var(--vela-active);color:var(--vela-fg-bright);}
+.vela-cc-on,.vela-cc-on:hover{background:var(--vela-selected-bg);color:var(--vela-selected-fg);}
+.vela-cc-grip{cursor:grab;touch-action:none;}
+.vela-cc-grip:active{cursor:grabbing;}
+`;
+function nearBottomCenter(x, y, width, height, proximityPx = CELL_CONTROLS_PROXIMITY_PX) {
+  const cx = width / 2;
+  const cy = height - CONTROLS_BOTTOM_PX - CLUSTER_H / 2;
+  return Math.hypot(x - cx, y - cy) <= proximityPx;
+}
+var CellControls = class {
+  constructor(host, deps) {
+    this.host = host;
+    this.deps = deps;
+    this.near = false;
+    /** A grip drag is underway — the proximity reveal must not hide the cluster
+     *  while captured pointer moves sweep across the whole grid. */
+    this.dragging = false;
+    /** Mobile: the proximity reveal is meaningless without a cursor — the mobile
+     *  bar's maximize stop replaces the cluster. */
+    this.suspended = false;
+    this.onHostMove = (e) => {
+      if (this.suspended) return;
+      if (this.dragging) return;
+      const rect = this.host.getBoundingClientRect();
+      this.setNear(nearBottomCenter(e.clientX - rect.left, e.clientY - rect.top, rect.width, rect.height));
+    };
+    this.onHostLeave = () => {
+      if (this.dragging) return;
+      this.setNear(false);
+    };
+    injectStyles(STYLE_ID12, CSS12, host.ownerDocument);
+    this.glider = new Glider(deps.chart);
+    this.root = host.ownerDocument.createElement("div");
+    Object.assign(this.root.style, {
+      position: "absolute",
+      left: "50%",
+      bottom: `${CONTROLS_BOTTOM_PX}px`,
+      transform: "translateX(-50%)",
+      zIndex: "6",
+      display: "none",
+      // revealed by cursor proximity (onHostMove)
+      gap: "2px",
+      padding: "2px",
+      borderRadius: "var(--vela-radius-md)",
+      background: CLUSTER_PILL,
+      pointerEvents: "auto"
+    });
+    this.host.addEventListener("pointermove", this.onHostMove);
+    this.host.addEventListener("pointerleave", this.onHostLeave);
+    this.host.appendChild(this.root);
+    this.refresh();
+  }
+  /** Rebuild the buttons (the multi-cell gate or the maximized state changed). */
+  refresh() {
+    this.root.textContent = "";
+    const multi = this.deps.multiCell();
+    const maximized = multi && this.deps.isMaximized();
+    if (multi && !maximized) this.root.appendChild(this.makeGrip());
+    this.root.appendChild(this.button("minus", "Zoom out", () => this.glider.zoom(ZOOM_OUT)));
+    this.root.appendChild(this.button("plus", "Zoom in", () => this.glider.zoom(ZOOM_IN)));
+    if (multi) {
+      this.root.appendChild(
+        this.button(maximized ? "restore" : "maximize", maximized ? "Restore layout" : "Maximize chart", () => this.deps.toggleMaximize(), {
+          // The maximized state reads as an inverse chip (white-on-dark, dark-on-light),
+          // the same active-state affordance as a collapsed pane's expand button.
+          selected: maximized
+        })
+      );
+    }
+    this.root.appendChild(
+      this.button("reset", "Reset chart", () => {
+        this.glider.stop();
+        this.deps.reset();
+      })
+    );
+  }
+  button(iconId, title, onClick, opts = {}) {
+    const b = this.host.ownerDocument.createElement("button");
+    b.type = "button";
+    b.title = title;
+    b.setAttribute("aria-label", title);
+    b.className = opts.selected === true ? "vela-cc-btn vela-cc-on" : "vela-cc-btn";
+    b.innerHTML = icon(iconId);
+    b.addEventListener("click", (e) => {
+      e.stopPropagation();
+      onClick();
+    });
+    return b;
+  }
+  /** The drag handle (2×3 dot grip): press and drag onto another cell to trade
+   *  slots with it. The preview highlight follows the pointer; releasing outside
+   *  any other cell cancels. */
+  makeGrip() {
+    const b = this.host.ownerDocument.createElement("button");
+    b.type = "button";
+    b.title = "Drag to move chart";
+    b.setAttribute("aria-label", "Drag to move chart");
+    b.className = "vela-cc-btn vela-cc-grip";
+    b.innerHTML = icon("grip");
+    b.addEventListener("pointerdown", (e) => this.onGripDown(b, e));
+    return b;
+  }
+  onGripDown(btn, e) {
+    if (e.button !== 0 && e.pointerType === "mouse") return;
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      btn.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    this.dragging = true;
+    let target = null;
+    const move = (ev) => {
+      target = this.deps.dragTargetAt(ev.clientX, ev.clientY);
+      this.deps.previewDrop(target);
+    };
+    const finish = (commit) => () => {
+      this.dragging = false;
+      this.deps.previewDrop(null);
+      btn.removeEventListener("pointermove", move);
+      btn.removeEventListener("pointerup", onUp);
+      btn.removeEventListener("pointercancel", onCancel);
+      if (commit && target != null) this.deps.dropOn(target);
+    };
+    const onUp = finish(true);
+    const onCancel = finish(false);
+    btn.addEventListener("pointermove", move);
+    btn.addEventListener("pointerup", onUp);
+    btn.addEventListener("pointercancel", onCancel);
+  }
+  /** Mobile flips the cluster off entirely (and hides it if currently revealed). */
+  setSuspended(on) {
+    this.suspended = on;
+    if (on) this.setNear(false);
+  }
+  setNear(near) {
+    if (near === this.near) return;
+    this.near = near;
+    this.root.style.display = near ? "flex" : "none";
+  }
+  destroy() {
+    this.glider.stop();
+    this.host.removeEventListener("pointermove", this.onHostMove);
+    this.host.removeEventListener("pointerleave", this.onHostLeave);
+    this.root.remove();
+  }
+};
+
 // src/widget/history.ts
 var WidgetHistory = class {
   /** `getChart` late-resolves the CURRENT chart: drawing steps recorded before a chart
@@ -5002,6 +5310,7 @@ var ChartCell = class {
     this.inner.renderer.set("attribution", false);
     this.inner.renderer.set("dialogHost", deps.dialogHost);
     this.inner.renderer.setLegendActions(legendActionsProviderFor(this.inner, () => deps.context()));
+    this.inner.renderer.setLegendCallouts(legendCalloutsProviderFor(this.inner, () => deps.context()));
     if (this.inner.renderer.supports("historyChords")) this.inner.renderer.set("historyChords", false);
     this.history.onChart(this.inner);
     this.inner.renderer.onConfigChanged(() => {
@@ -5062,11 +5371,18 @@ var ChartCell = class {
       if (this.inner && this.state.symbol) this.marketStatus?.track(this.inner.data, this.state.symbol);
     });
     this.syncStatuslineColors();
+    this.cellControls = new CellControls(this.host, {
+      chart: () => this.inner,
+      reset: () => this.resetView(),
+      multiCell: () => deps.multiCell(),
+      isMaximized: () => deps.isMaximized(id),
+      toggleMaximize: () => deps.toggleMaximize(id),
+      dragTargetAt: (x, y) => deps.cellDragTarget(id, x, y),
+      previewDrop: (target) => deps.previewDropTarget(target),
+      dropOn: (target) => deps.dropCell(id, target)
+    });
     this.contextMenu = new ChartContextMenu(this.host, {
-      resetView: () => {
-        this.inner?.renderer.set("autoScale", true);
-        this.inner?.setVisibleRangePreset("ALL");
-      },
+      resetView: () => this.resetView(),
       timezone: () => this.deps.timezone(),
       setTimezone: (zone) => this.deps.setTimezone(zone),
       // Right-clicking activates the cell first (capture-phase pointerdown), so the
@@ -5118,20 +5434,30 @@ var ChartCell = class {
     this.refreshNativeCatalog();
     this.pushSettingsSections();
     this.offMarket = this.inner.on("market:changed", ({ symbol: symbol2, timeframe }) => {
-      this.state.symbol = symbol2;
-      this.state.provider = parseSymbol(symbol2).provider ?? void 0;
-      this.state.timeframe = timeframe;
-      this.state.session = normalizeSession(this.inner?.market.session);
-      this.watermark?.update(symbol2, timeframe);
-      this.statusline?.setSymbol(symbol2);
-      this.statusline?.setMeta(timeframe, this.inner?.data.displayPrefix(symbol2) ?? this.state.provider ?? "");
-      if (this.inner) this.statusline?.onChart(this.inner);
+      this.projectMarket(symbol2, timeframe);
       this.refreshNativeCatalog();
       this.refreshSessionAvailable();
       if (this.inner) this.marketStatus?.track(this.inner.data, symbol2);
       this.deps.onMarketChanged(this.id);
     });
   }
+  /**
+   * Project a market identity into the cell state and its display overlays (watermark,
+   * statusline), WITHOUT the data-dependent bookkeeping. Runs twice per user pick: once
+   * optimistically from the cell setters — the labels reflect the pick immediately, not
+   * after the bars load — and again from `market:changed` (the committed pass, and the
+   * only pass for host `chart.setMarket` calls). Idempotent, so the double run converges.
+   */
+  projectMarket(symbol, timeframe) {
+    this.state.symbol = symbol;
+    this.state.provider = parseSymbol(symbol).provider ?? void 0;
+    this.state.timeframe = timeframe;
+    this.state.session = normalizeSession(this.inner?.market.session);
+    this.watermark?.update(symbol, timeframe);
+    this.statusline?.setSymbol(symbol);
+    this.statusline?.setMeta(timeframe, this.inner?.data.displayPrefix(symbol) ?? this.state.provider ?? "");
+    if (this.inner) this.statusline?.onChart(this.inner);
+  }
   /**
    * Does this cell's market HAVE sessions (RTH/ETH meaningful)? Derived from the
    * symbol's own metadata (`syminfo.session !== '24x7'`), asynchronously — the
@@ -5177,7 +5503,7 @@ var ChartCell = class {
     const requestedSpan = Math.max(this.state.bars ?? 1e3, this.rangeBars) * timeframeMs(this.state.timeframe ?? "60");
     const fallbackSpan = Number.isFinite(requestedSpan) ? Math.max(3 * 864e5, requestedSpan) : 3 * 864e5;
     const range = chart.getVisibleRange() ?? { from: now - fallbackSpan, to: now };
-    this.sessionShading.track(chart.data, symbol, { session: this.session, range });
+    this.sessionShading.track(chart.data, symbol, { session: this.session, timeframe: this.timeframe, range });
   }
   /** The session-shade colors live in the renderer CONFIG (persisted with it, edited
    *  live by the dialog swatch) — the cell only proxies them into its settings rows. */
@@ -5366,17 +5692,23 @@ var ChartCell = class {
   get indicatorCount() {
     return this.instances.length + this.nativeCatalog.filter((n) => n.present).length;
   }
-  /** Switch this cell's market in place (the chart instance survives). */
+  /** Switch this cell's market in place (the chart instance survives). The projection
+   *  is OPTIMISTIC — labels and chrome show the pick before the bars load; it follows
+   *  the setMarket call so the statusline reads the already-blanked chart. */
   setSymbol(symbol) {
     if (!this.inner || symbol === this.symbol) return;
     this.unresolvedToasted = null;
     void this.inner.setMarket({ symbol });
+    this.projectMarket(symbol, this.timeframe);
+    this.deps.onMarketChanged(this.id);
   }
   setTimeframe(timeframe) {
     if (!this.inner || timeframe === this.timeframe) return;
     this.activeRangeId = null;
     this.rangeBars = 0;
     void this.inner.setMarket({ timeframe, bars: this.state.bars });
+    this.projectMarket(this.symbol, timeframe);
+    this.deps.onMarketChanged(this.id);
   }
   /** Applied live (renderer feature) — no reload. */
   setPriceStyle(style) {
@@ -5424,6 +5756,20 @@ var ChartCell = class {
       this.inner.setVisibleRangePreset(preset.preset);
     }
   }
+  /** Reset this cell's view: re-enable auto scale and frame the full history —
+   *  the same action the chart context menu offers. */
+  resetView() {
+    this.inner?.renderer.set("autoScale", true);
+    this.inner?.setVisibleRangePreset("ALL");
+  }
+  /** Rebuild the view-controls cluster (the maximize gate or state changed). */
+  refreshControls() {
+    this.cellControls.refresh();
+  }
+  /** Mobile flips the per-cell cluster off (the shell's mobile bar replaces it). */
+  setControlsSuspended(on) {
+    this.cellControls.setSuspended(on);
+  }
   /** Make this cell the active one and put keyboard focus on its chart surface. */
   focus() {
     this.deps.activate(this.id);
@@ -5737,6 +6083,7 @@ var ChartCell = class {
   destroy() {
     this.destroyed = true;
     this.offMarket();
+    this.cellControls.destroy();
     this.contextMenu.destroy();
     this.history.destroy();
     this.marketStatus?.stop();
@@ -5995,8 +6342,8 @@ var SplitterLayer = class {
 };
 
 // src/widget/toast.ts
-var STYLE_ID12 = "vela-widget-toast";
-var CSS12 = `
+var STYLE_ID13 = "vela-widget-toast";
+var CSS13 = `
 .vela-toast {
     position: absolute;
     left: 50%;
@@ -6026,7 +6373,7 @@ var CSS12 = `
 var Toast = class {
   constructor(host) {
     this.timer = null;
-    injectStyles(STYLE_ID12, CSS12, host.ownerDocument);
+    injectStyles(STYLE_ID13, CSS13, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-toast";
     host.appendChild(this.el);
@@ -6050,70 +6397,6 @@ var Toast = class {
   }
 };
 
-// src/widget/glide.ts
-var MIN_SPAN_MS = 6e4;
-var FOLLOW = 0.25;
-var ZOOM_IN = 0.8;
-var ZOOM_OUT = 1.25;
-var PAN_FAST = 0.2;
-function zoomTarget(base, factor) {
-  const newSpan = Math.max(MIN_SPAN_MS, (base.to - base.from) * factor);
-  return { from: base.to - newSpan, to: base.to };
-}
-function followStep(cur, target, follow = FOLLOW, epsFrac = 15e-4) {
-  const eps = Math.max(MIN_SPAN_MS, (target.to - target.from) * epsFrac);
-  const nf = cur.from + (target.from - cur.from) * follow;
-  const nt = cur.to + (target.to - cur.to) * follow;
-  const done = Math.abs(target.from - nf) <= eps && Math.abs(target.to - nt) <= eps;
-  return { cur: done ? { ...target } : { from: nf, to: nt }, done };
-}
-var Glider = class {
-  constructor(chart) {
-    this.chart = chart;
-    // The glide eases ITS OWN range, never the chart's read-back: getVisibleRange()
-    // is data-bounded (whole bars, `to` capped at the newest bar) and the renderer
-    // clamps what gets applied — chasing that read-back can never converge on a
-    // clamped step, leaving the rAF loop re-applying a stale target forever (and
-    // grinding the span down when panning past the newest bar). The internal range
-    // converges geometrically, so the glide always terminates; the renderer is free
-    // to clamp each applied frame.
-    this.cur = null;
-    this.target = null;
-    this.raf = 0;
-  }
-  zoom(factor) {
-    this.to((base) => zoomTarget(base, factor));
-  }
-  stop() {
-    if (this.raf) cancelAnimationFrame(this.raf);
-    this.raf = 0;
-    this.cur = null;
-    this.target = null;
-  }
-  to(make) {
-    const chart = this.chart();
-    const base = this.target ?? chart?.getVisibleRange();
-    if (!chart || !base) return;
-    this.cur ?? (this.cur = { ...base });
-    this.target = make(base);
-    if (!this.raf) this.tick();
-  }
-  tick() {
-    this.raf = requestAnimationFrame(() => {
-      const chart = this.chart();
-      if (!chart || !this.cur || !this.target) {
-        this.stop();
-        return;
-      }
-      const { cur: next, done } = followStep(this.cur, this.target);
-      this.cur = next;
-      chart.setVisibleRange(next);
-      if (done) this.stop();
-      else this.tick();
-    });
-  }
-};
-
 // src/widget/tool-shortcuts.ts
 var TOOL_BINDINGS = [
   ["trendline", "drawings.trendline"],
@@ -6185,8 +6468,8 @@ var LayoutModeController = class {
 };
 
 // src/widget/mobile-bar.ts
-var STYLE_ID13 = "vela-widget-mobilebar";
-var CSS13 = `
+var STYLE_ID14 = "vela-widget-mobilebar";
+var CSS14 = `
 .vela-mobilebar {
     display: none;
     align-items: stretch;
@@ -6217,6 +6500,9 @@ var CSS13 = `
 }
 .vela-mb-item:active { background: var(--vela-hover); }
 .vela-mb-item .vela-icon { font-size: 18px; width: 18px; height: 18px; }
+/* A lit stop (the maximize toggle while something is isolated): the inverse
+   "selected" chip \u2014 white on the dark theme, dark on the light one. */
+.vela-mb-item.vela-mb-on, .vela-mb-item.vela-mb-on:active { background: var(--vela-selected-bg); color: var(--vela-selected-fg); }
 /* Left-aligned contributed actions get their own stops (the built-in indicators
    slot) \u2014 the wrapper is layout-transparent so each stop flexes like a sibling. */
 .vela-mb-actions { display: contents; }
@@ -6236,7 +6522,7 @@ var MobileBar = class {
   constructor(host, opts) {
     this.opts = opts;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID13, CSS13, doc);
+    injectStyles(STYLE_ID14, CSS14, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-mobilebar";
     const item = (cls, label, onClick, icon2) => {
@@ -6257,9 +6543,11 @@ var MobileBar = class {
     this.actionsHost.className = "vela-mb-actions";
     const onDrawings = opts.onDrawingsClick;
     const drawings = onDrawings ? item("vela-mb-drawings", "Drawings", onDrawings, "pen") : null;
+    const onMaximize = opts.onMaximizeClick;
+    this.maxEl = onMaximize ? item("vela-mb-maximize", "Maximize chart", onMaximize, "maximize") : null;
     const more = item("vela-mb-more", "More", opts.onMoreClick, "kebab");
     const settings = item("vela-mb-settings", "Chart settings", opts.onSettingsClick, "gear");
-    this.el.append(this.symbolEl, this.tfEl, ...indicators ? [indicators] : [], this.actionsHost, ...drawings ? [drawings] : [], more, settings);
+    this.el.append(this.symbolEl, this.tfEl, ...indicators ? [indicators] : [], this.actionsHost, ...drawings ? [drawings] : [], ...this.maxEl ? [this.maxEl] : [], more, settings);
     host.appendChild(this.el);
     this.renderActions();
   }
@@ -6291,14 +6579,22 @@ var MobileBar = class {
   setTimeframe(tf) {
     this.tfEl.textContent = timeframeLabel(tf);
   }
+  /** Light the maximize stop while something is isolated (a chart over the grid,
+   *  or a maximized pane inside the active chart) — inverse chip + restore glyph. */
+  setMaximizeActive(on) {
+    if (!this.maxEl) return;
+    this.maxEl.classList.toggle("vela-mb-on", on);
+    this.maxEl.setAttribute("aria-label", on ? "Restore layout" : "Maximize chart");
+    this.maxEl.replaceChildren(iconEl(on ? "restore" : "maximize", this.el.ownerDocument));
+  }
   destroy() {
     this.el.remove();
   }
 };
 
 // src/widget/timeframe-drawer.ts
-var STYLE_ID14 = "vela-widget-tf-drawer";
-var CSS14 = `
+var STYLE_ID15 = "vela-widget-tf-drawer";
+var CSS15 = `
 .vela-tfd-heading {
     padding: 4px 2px 8px;
     font-size: 12px;
@@ -6354,7 +6650,7 @@ var TimeframeDrawer = class {
     this.rangeChips = /* @__PURE__ */ new Map();
     this.tfChips = /* @__PURE__ */ new Map();
     const doc = opts.host.ownerDocument;
-    injectStyles(STYLE_ID14, CSS14, doc);
+    injectStyles(STYLE_ID15, CSS15, doc);
     this.drawer = new Drawer({ host: opts.host, onOpenChange: opts.onOpenChange });
     const rangeHeading = doc.createElement("div");
     rangeHeading.className = "vela-tfd-heading";
@@ -6412,8 +6708,8 @@ var TimeframeDrawer = class {
 };
 
 // src/widget/drawings-drawer.ts
-var STYLE_ID15 = "vela-widget-drawings-drawer";
-var CSS15 = `
+var STYLE_ID16 = "vela-widget-drawings-drawer";
+var CSS16 = `
 /* Search + tabs stay pinned while the tool list scrolls underneath. */
 .vela-dd-sticky {
     position: sticky;
@@ -6515,7 +6811,7 @@ var DrawingsDrawer = class {
     this.definition = { groups: [] };
     this.activeGroup = "";
     const doc = opts.host.ownerDocument;
-    injectStyles(STYLE_ID15, CSS15, doc);
+    injectStyles(STYLE_ID16, CSS16, doc);
     this.drawer = new Drawer({
       host: opts.host,
       title: "Drawings",
@@ -6657,8 +6953,8 @@ var DrawingsDrawer = class {
 };
 
 // src/widget/more-drawer.ts
-var STYLE_ID16 = "vela-widget-more-drawer";
-var CSS16 = `
+var STYLE_ID17 = "vela-widget-more-drawer";
+var CSS17 = `
 .vela-md-actions {
     display: flex;
     gap: 6px;
@@ -6733,7 +7029,7 @@ var MoreDrawer = class {
   constructor(opts) {
     this.opts = opts;
     this.view = "main";
-    injectStyles(STYLE_ID16, CSS16, opts.host.ownerDocument);
+    injectStyles(STYLE_ID17, CSS17, opts.host.ownerDocument);
     this.drawer = new Drawer({ host: opts.host, onOpenChange: opts.onOpenChange });
   }
   open() {
@@ -6927,8 +7223,8 @@ var MoreDrawer = class {
 };
 
 // src/widget/timezone-drawer.ts
-var STYLE_ID17 = "vela-widget-timezone-drawer";
-var CSS17 = `
+var STYLE_ID18 = "vela-widget-timezone-drawer";
+var CSS18 = `
 .vela-tzd-list { padding: 2px 0 4px; }
 .vela-tzd-row {
     display: flex;
@@ -6947,7 +7243,7 @@ var CSS17 = `
 var TimezoneDrawer = class {
   constructor(opts) {
     this.opts = opts;
-    injectStyles(STYLE_ID17, CSS17, opts.host.ownerDocument);
+    injectStyles(STYLE_ID18, CSS18, opts.host.ownerDocument);
     this.drawer = new Drawer({ host: opts.host, title: "Time zone", onOpenChange: opts.onOpenChange });
   }
   open() {
@@ -6985,8 +7281,8 @@ var TimezoneDrawer = class {
 };
 
 // src/widget/price-scale-drawer.ts
-var STYLE_ID18 = "vela-widget-price-scale-drawer";
-var CSS18 = `
+var STYLE_ID19 = "vela-widget-price-scale-drawer";
+var CSS19 = `
 .vela-psd-list { padding: 2px 0 4px; }
 .vela-psd-row {
     display: flex;
@@ -7015,7 +7311,7 @@ var PriceScaleDrawer = class {
   constructor(opts) {
     this.opts = opts;
     this.pane = null;
-    injectStyles(STYLE_ID18, CSS18, opts.host.ownerDocument);
+    injectStyles(STYLE_ID19, CSS19, opts.host.ownerDocument);
     this.drawer = new Drawer({ host: opts.host, title: "Price scale", onOpenChange: opts.onOpenChange });
   }
   open() {
@@ -7151,8 +7447,8 @@ var PriceScaleDrawer = class {
 };
 
 // src/widget/drawing-pill.ts
-var STYLE_ID19 = "vela-widget-drawing-pill";
-var CSS19 = `
+var STYLE_ID20 = "vela-widget-drawing-pill";
+var CSS20 = `
 .vela-drawpill { display: none; }
 [data-layout='mobile'] .vela-drawpill {
     position: absolute;
@@ -7212,7 +7508,7 @@ var DrawingPill = class {
     this.chart = null;
     this.chartSubs = [];
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID19, CSS19, doc);
+    injectStyles(STYLE_ID20, CSS20, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-drawpill";
     this.el.hidden = true;
@@ -7325,10 +7621,10 @@ function buildContext(host) {
 var DEFAULT_TIMEFRAMES = ["1", "5", "15", "60", "240", "D", "W"];
 var GAP_PX = 2;
 var POOL_CAP = 16;
-var TIME_AXIS_H2 = 22;
+var TIME_AXIS_H3 = 22;
 var ALERT_CAP = 50;
-var STYLE_ID20 = "vela-workspace";
-var CSS20 = `
+var STYLE_ID21 = "vela-workspace";
+var CSS21 = `
 .vela-workspace { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--vela-bg); }
 .vela-ws-main { position: relative; display: flex; flex-direction: row; flex: 1 1 auto; min-height: 0; }
 .vela-ws-toolbar { position: relative; flex: none; }
@@ -7355,6 +7651,21 @@ var CSS20 = `
 /* Mobile: the docked drawing-toolbar column would eat a phone-width grid \u2014 the shell's
    drawings drawer + on-chart pill replace it (same policy as the widget's in-chart bar). */
 [data-layout='mobile'] .vela-ws-toolbar { display: none; }
+/* A maximized cell owns the whole grid: the splitter strips have no seams to grab and
+   the active ring would just outline the only visible chart \u2014 both are noise here. */
+.vela-ws-grid[data-maximized='1'] .vela-ws-splitter { display: none; }
+.vela-ws-grid[data-maximized='1'] .vela-cell[data-active='1']::after { display: none; }
+/* Drop-target preview while a cell's drag handle is held: a dashed ring + the same
+   soft wash the splitter hover uses, over the chart, inert to the pointer. */
+.vela-cell[data-drop-target='1']::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: 2px dashed var(--vela-fg-bright);
+    background: var(--vela-separator-hover-band);
+    pointer-events: none;
+    z-index: 11;
+}
 `;
 registerIcon("layout", svg16('<rect x="1.5" y="1.5" width="13" height="13" rx="1.5"/><path d="M8 1.5v13M1.5 8h13"/>'));
 function declaredOrder(cells) {
@@ -7384,6 +7695,9 @@ var VelaWorkspace = class {
      *  slots beyond the list get auto identities. Grows, never reorders. */
     this.order = [];
     this.activeId = null;
+    /** The cell maximized over the whole grid (null = normal grid). TRANSIENT view
+     *  state — never persisted; any structural change (layout, applyState) restores. */
+    this.maximizedId = null;
     this.cellBackend = "auto";
     this.destroyed = false;
     this.shortcutsHelp = null;
@@ -7488,7 +7802,7 @@ var VelaWorkspace = class {
     this.order = boot?.charts ? boot.charts.map((c) => c.id) : declaredOrder(opts.cells);
     const bootActive = boot?.activeCellId ?? null;
     const doc = hostEl.ownerDocument;
-    injectStyles(STYLE_ID20, CSS20, doc);
+    injectStyles(STYLE_ID21, CSS21, doc);
     this.root = doc.createElement("div");
     this.root.className = "vela-workspace";
     ensureUIHost(this.root, resolveTheme(opts.theme));
@@ -7598,7 +7912,11 @@ var VelaWorkspace = class {
     if (attribution !== false) {
       const background = resolveTheme(opts.theme).background;
       const mark = typeof attribution === "string" && attribution.trim() ? createCustomMark(doc, attribution, background) : createAttributionMark(doc, background);
-      Object.assign(mark.style, { left: "12px", bottom: `${TIME_AXIS_H2 + 10}px`, zIndex: "11" });
+      Object.assign(mark.style, {
+        left: "calc(var(--vela-toolbar-gutter, 0px) + 12px)",
+        bottom: `calc(var(--vela-bottom-gutter, ${TIME_AXIS_H3}px) + 10px)`,
+        zIndex: "11"
+      });
       this.gridEl.appendChild(mark);
       this.attributionMark = mark;
     }
@@ -7664,6 +7982,9 @@ var VelaWorkspace = class {
       ...topbarHas(this.topbarComp, "indicators") && (picker || this.indicatorsOverride) ? { onIndicatorsClick: this.indicatorsOverride ? () => this.runOverride(this.indicatorsOverride) : () => picker.open() } : {},
       getContext: () => this.context(),
       ...this.drawingsEnabled ? { onDrawingsClick: () => this.openDrawingsDrawer() } : {},
+      // Multi-chart only: the stop that isolates the ACTIVE chart (the
+      // per-cell hover cluster has no cursor to reveal it on mobile).
+      ...this.monoLayout ? {} : { onMaximizeClick: () => this.toggleMobileMaximize() },
       onMoreClick: () => this.openMoreDrawer(),
       onSettingsClick: () => this.active.chart.renderer.openSettings()
     }) : null;
@@ -7778,7 +8099,10 @@ var VelaWorkspace = class {
     this.topbar.renderActions();
     this.mobileBar?.renderActions();
     this.dock.refresh();
-    for (const cell of this.cells()) cell.chart.renderer.setLegendActions(legendActionsProviderFor(cell.chart, () => this.context()));
+    for (const cell of this.cells()) {
+      cell.chart.renderer.setLegendActions(legendActionsProviderFor(cell.chart, () => this.context()));
+      cell.chart.renderer.setLegendCallouts(legendCalloutsProviderFor(cell.chart, () => this.context()));
+    }
   }
   // ── state surface (the SDK's read/restore of the whole grid's config + content) ──
   /**
@@ -7867,7 +8191,9 @@ var VelaWorkspace = class {
       this.pool.clear();
       for (const { id, ...cs } of st.charts.slice(liveCount)) this.pool.set(id, cs);
       this.order = st.charts.map((c) => c.id);
+      this.clearMaximized();
       this.applyGrid();
+      this.refreshCellControls();
       const nextActive2 = st.activeCellId && this.cellsById.has(st.activeCellId) ? st.activeCellId : this.order[0] ?? null;
       if (nextActive2 === this.activeId) this.projectActiveCell();
       else this.setActiveCell(nextActive2);
@@ -7893,6 +8219,7 @@ var VelaWorkspace = class {
     const def = this.monoLayout ? null : ensureLayout(st.layout);
     if (def) this.def = def;
     this.cellBackend = this.backendFor(this.def);
+    this.clearMaximized();
     this.applyGrid();
     this.buildCells();
     this.syncCellPresentation();
@@ -7956,6 +8283,7 @@ var VelaWorkspace = class {
   setLayout(layout) {
     if (this.destroyed) return;
     if (this.monoLayout) return;
+    this.clearMaximized();
     const next = this.resolveLayout(layout);
     const nextBackend = this.backendFor(next);
     const rebuildAll = nextBackend !== this.cellBackend;
@@ -7976,6 +8304,7 @@ var VelaWorkspace = class {
     this.buildCells();
     this.alignNewCellStyles(preexisting);
     this.syncCellPresentation();
+    this.refreshCellControls();
     this.topbar.setLayout(next.id);
     const nextActive = activeAfterLayout(this.activeId, this.order.slice(0, next.cells.length));
     if (nextActive === this.activeId) this.projectActiveCell();
@@ -7984,6 +8313,67 @@ var VelaWorkspace = class {
     this.events.emit("layout:changed", { layout: next.id });
     this.markStateDirty();
   }
+  /** The identity of the cell maximized over the whole grid, or null. */
+  get maximizedCell() {
+    return this.maximizedId;
+  }
+  /**
+   * Maximize one cell over the whole grid, or restore the layout with `null`. Pure
+   * presentation: the other cells stay alive underneath — charts, subscriptions and
+   * state untouched — so restoring is instant. The maximized cell becomes the active
+   * one. Transient view state (also reachable from each cell's bottom-center view
+   * cluster): switching layouts or applying a state document restores the grid.
+   */
+  maximizeCell(id) {
+    if (this.destroyed) return;
+    if (id != null && (!this.cellsById.has(id) || this.def.cells.length <= 1)) return;
+    if (id === this.maximizedId) return;
+    this.maximizedId = id;
+    if (id) this.setActiveCell(id);
+    this.applyGrid();
+    this.refreshCellControls();
+    this.syncMobileMaximize();
+    this.events.emit("cell:maximized", { id });
+  }
+  /** The mobile bar's maximize stop: one press isolates the ACTIVE chart over the
+   *  grid; while something is already isolated — the chart, or a pane inside it
+   *  (mobile's double-tap) — the press restores that instead. Every branch re-syncs
+   *  the stop on its own (`maximizeCell` directly, `panes.maximize` via its
+   *  synchronous `pane:changed`). */
+  toggleMobileMaximize() {
+    const cell = this.activeId ? this.cellsById.get(this.activeId) : void 0;
+    if (!cell) return;
+    if (this.maximizedId) this.maximizeCell(null);
+    else if (cell.chart.panes.list().some((p) => p.maximized)) cell.chart.panes.maximize(null);
+    else this.maximizeCell(cell.id);
+  }
+  /** Keep the mobile bar's maximize stop truthful: lit (inverse chip, restore
+   *  glyph) while the active chart covers the grid OR one of its panes is
+   *  maximized — the state a double-tap toggles is otherwise invisible on mobile. */
+  syncMobileMaximize() {
+    if (!this.mobileBar) return;
+    const cell = this.activeId ? this.cellsById.get(this.activeId) : void 0;
+    const paneMax = cell ? cell.chart.panes.list().some((p) => p.maximized) : false;
+    this.mobileBar.setMaximizeActive(this.maximizedId != null || paneMax);
+  }
+  /**
+   * Trade the SLOTS of two live cells — the grid arrangement changes, the cells
+   * themselves (charts, indicators, drawings, the active flag) stay untouched.
+   * What each cell's drag handle commits; also callable directly by hosts.
+   */
+  swapCells(a, b) {
+    if (this.destroyed || a === b) return;
+    const i = this.order.indexOf(a);
+    const j = this.order.indexOf(b);
+    if (i < 0 || j < 0 || !this.cellsById.has(a) || !this.cellsById.has(b)) return;
+    [this.order[i], this.order[j]] = [this.order[j], this.order[i]];
+    for (const [k] of this.def.cells.entries()) {
+      const host = this.cellsById.get(this.order[k] ?? "")?.host;
+      if (host) this.gridEl.appendChild(host);
+    }
+    this.applyGrid();
+    this.markStateDirty();
+  }
   resize() {
     this.splitters.layout();
   }
@@ -8053,6 +8443,7 @@ var VelaWorkspace = class {
     this.mobileBar?.renderActions();
     this.mobileBar?.setSymbol(cell.symbol);
     this.mobileBar?.setTimeframe(cell.timeframe);
+    this.syncMobileMaximize();
     this.drawingPill?.onChart(cell.chart);
     const pushHistory = () => this.topbar.setHistoryState(cell.history.canUndo, cell.history.canRedo);
     this.historyUnsub?.();
@@ -8142,8 +8533,78 @@ var VelaWorkspace = class {
       const host = this.cellsById.get(this.order[i] ?? "")?.host;
       if (host) host.style.gridArea = perCell[slot.id]?.gridArea ?? "";
     }
+    this.applyMaximizePresentation();
+    this.mountAttributionMark();
     this.splitters.layout();
   }
+  /** Overlay the maximize presentation on the freshly applied grid: EVERY cell spans
+   *  the full track grid — the maximized one on top, the siblings invisible beneath
+   *  it (their charts stay alive — restoring is instant). The siblings must span too:
+   *  left in their slots they would auto-flow into implicit zero-height rows, whose
+   *  gaps steal height from the maximized cell and collapse their renderers to 0.
+   *  The splitter strips and the active ring hide via the `data-maximized` rules. */
+  applyMaximizePresentation() {
+    const maxId = this.maximizedId;
+    if (maxId) this.gridEl.dataset.maximized = "1";
+    else delete this.gridEl.dataset.maximized;
+    for (const [id, cell] of this.cellsById) {
+      const style = cell.host.style;
+      if (maxId) style.gridArea = "1 / 1 / -1 / -1";
+      style.zIndex = maxId && id === maxId ? "5" : "";
+      style.visibility = maxId && id !== maxId ? "hidden" : "";
+    }
+  }
+  /** Rebuild every cell's view cluster (the maximize gate or state changed). */
+  refreshCellControls() {
+    for (const cell of this.cellsById.values()) cell.refreshControls();
+  }
+  /** Drop the transient maximize on a structural change (layout switch, state
+   *  document) — WITH the event, so hosts tracking `cell:maximized` never drift
+   *  from `maximizedCell`. The caller's own grid re-apply paints the restore. */
+  clearMaximized() {
+    if (this.maximizedId == null) return;
+    this.maximizedId = null;
+    this.events.emit("cell:maximized", { id: null });
+  }
+  /** The live cell under a viewport point, excluding `excludeId` and any host a
+   *  maximize has hidden — the drag handle's hit-test. */
+  cellAtPoint(x, y, excludeId) {
+    for (const [id, cell] of this.cellsById) {
+      if (id === excludeId || cell.host.style.visibility === "hidden") continue;
+      const r = cell.host.getBoundingClientRect();
+      if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) return id;
+    }
+    return null;
+  }
+  /** Mark one cell as the live drop target of a grip drag (null clears all) —
+   *  the `data-drop-target` stylesheet rule paints the dashed preview ring. */
+  setDropTarget(id) {
+    for (const [cid, cell] of this.cellsById) {
+      if (cid === id) cell.host.dataset.dropTarget = "1";
+      else delete cell.host.dataset.dropTarget;
+    }
+  }
+  /** The cell whose bottom-left corner the grid's attribution mark floats in — the
+   *  maximized cell while one covers the grid, else the bottom-left slot's cell. */
+  bottomLeftCell() {
+    if (this.maximizedId) return this.cellsById.get(this.maximizedId);
+    const grid = occupancyGrid(this.def);
+    const slot = grid[grid.length - 1]?.[0];
+    const idx = this.def.cells.findIndex((c) => (c.area ?? c.id) === slot);
+    return this.cellsById.get(this.order[idx >= 0 ? idx : 0] ?? "");
+  }
+  /** Keep the shared attribution mark inside the BOTTOM-LEFT visible cell: its
+   *  offsets ride that cell's renderer-published `--vela-bottom-gutter` /
+   *  `--vela-toolbar-gutter`, so collapsed pane strips push the mark up without any
+   *  bookkeeping here. Re-run after anything that changes which host that is
+   *  (layout switch, maximize, cell rebuild); a destroyed host drops the mark from
+   *  the DOM, and this re-mount brings it back. */
+  mountAttributionMark() {
+    const mark = this.attributionMark;
+    if (!mark) return;
+    const host = this.bottomLeftCell()?.host ?? this.gridEl;
+    if (mark.parentElement !== host) host.appendChild(mark);
+  }
   /** Create the cells the current layout wants but don't exist yet (pool-first).
    *  A slot's CELL IDENTITY is `order[i]` (declaration order — never the slot's own
    *  positional id); slots past the declared list mint an auto identity once. */
@@ -8175,6 +8636,12 @@ var VelaWorkspace = class {
         setTimezone: (zone) => this.setTimezone(zone),
         context: () => this.context(),
         activate: (id2) => this.setActiveCell(id2),
+        multiCell: () => !this.monoLayout && this.def.cells.length > 1,
+        isMaximized: (id2) => this.maximizedId === id2,
+        toggleMaximize: (id2) => this.maximizeCell(this.maximizedId === id2 ? null : id2),
+        cellDragTarget: (id2, x, y) => this.cellAtPoint(x, y, id2),
+        previewDropTarget: (target) => this.setDropTarget(target),
+        dropCell: (id2, target) => this.swapCells(id2, target),
         onMarketChanged: (id2) => this.onCellMarketChanged(id2),
         onPriceStyleChanged: (id2) => this.onCellPriceStyleChanged(id2),
         onIndicatorsChanged: (id2) => this.onCellIndicatorsChanged(id2),
@@ -8188,6 +8655,7 @@ var VelaWorkspace = class {
       if (id === this.activeId) cell.host.dataset.active = "1";
       this.wireCell(cell);
       cell.chart.renderer.setLayoutMode(this.layoutCtl.current);
+      cell.setControlsSuspended(this.layoutCtl.current === "mobile");
       if (this.favs.length > 0) cell.chart.drawings.setFavorites(this.favs);
       cell.setManifest(this.manifest, pooled?.indicators == null);
       cell.restorePersistedExt();
@@ -8197,6 +8665,7 @@ var VelaWorkspace = class {
       const host = this.cellsById.get(this.order[i] ?? "")?.host;
       if (host) this.gridEl.appendChild(host);
     }
+    this.mountAttributionMark();
   }
   /** Per-cell chart subscriptions (trigger ② — the chart instance is stable for the
    *  cell's whole life, so these live and die with the cell). */
@@ -8256,6 +8725,9 @@ var VelaWorkspace = class {
     chart.on("viewport:changed", (range) => this.propagateViewport(cell.id, range));
     chart.renderer.onConfigChanged(() => this.propagateStylePrefs(cell.id));
     chart.on("theme:changed", (t) => this.setTheme(t));
+    chart.on("pane:changed", () => {
+      if (cell.id === this.activeId) this.syncMobileMaximize();
+    });
     chart.renderer.onAxisLongPress((e) => {
       if (this.layoutCtl.current !== "mobile") return;
       if (e.axis === "time") this.openTimezoneDrawer();
@@ -8576,6 +9048,7 @@ var VelaWorkspace = class {
     for (const cell of this.cellsById.values()) {
       cell.chart.renderer.closeDialogs();
       cell.chart.renderer.setLayoutMode(mode);
+      cell.setControlsSuspended(mode === "mobile");
     }
     this.syncCellPresentation();
   }