@luxalgo/vela 0.6.13 → 0.6.15

package/dist/widget.cjs

@@ -46,6 +46,7 @@ var SERIES_LINE = "#3b82f6";
 var CROSSHAIR = "#9aa0ad";
 var SLATE_DEEP = "#1e293b";
 var SLATE = "#475569";
+var CHIP_PLATE = "#595959";
 var TRADE_LONG = ACCENT;
 var TRADE_SHORT = BEARISH;
 var TRADE_EXIT = "#d500f9";
@@ -1086,6 +1087,12 @@ ${STATIC_DECLS}
 .vela-ui *, .vela-ui-layer * { box-sizing: border-box; }
 /* Text ENTRY is the one exception: selection is part of editing. */
 .vela-ui :is(input, textarea), .vela-ui-layer :is(input, textarea) { user-select: text; -webkit-user-select: text; }
+/* iOS Safari zooms the page when a focused field is under 16px, and often
+   keeps that zoom after the field blurs or a dialog closes. The shell's
+   mobile size class is the honest gate \u2014 not a media query \u2014 so an embedded
+   chart on a wide desktop still gets the rule when it is in the phone layout.
+   Scoped to the kit root so a host page's own [data-layout] is never touched. */
+.vela-ui[data-layout='mobile'] :is(input, textarea, select) { font-size: 16px; }
 .vela-icon { display: inline-flex; align-items: center; flex: none; }
 .vela-icon svg { display: block; }
 `;
@@ -1181,6 +1188,10 @@ registerIcon(
   "market-post",
   svg24('<path d="M12 10V2"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m16 14-4 4-4-4"/><path d="M16 6a4 4 0 0 0-8 0"/>')
 );
+registerIcon(
+  "market-extended",
+  svg24('<path d="M22 22H2"/><path d="M12 3a5 5 0 0 0 7.5 7.5A7.5 7.5 0 1 1 12 3Z"/>')
+);
 registerIcon("market-closed", svg24('<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>'));
 registerIcon(
   "market-holiday",
@@ -1194,6 +1205,8 @@ registerIcon("chevrons-right", S('<path d="m4 3.5 4.5 4.5L4 12.5"/><path d="m8.5
 registerIcon("chevrons-left", S('<path d="M12 3.5 7.5 8l4.5 4.5"/><path d="M7.5 3.5 3 8l4.5 4.5"/>'));
 registerIcon("check", S('<path d="m2.8 8.4 3.4 3.4 7-7.6"/>'));
 registerIcon("close", S('<path d="m3.8 3.8 8.4 8.4M12.2 3.8l-8.4 8.4"/>'));
+registerIcon("pin", S('<path d="M5.6 2.5h4.8M6.4 2.5v3.6L4.4 8.4v.9h7.2v-.9L9.6 6.1V2.5M8 9.3v4.2"/>'));
+registerIcon("pin-filled", S('<path d="M5.6 2.5h4.8M6.4 2.5v3.6L4.4 8.4v.9h7.2v-.9L9.6 6.1V2.5M8 9.3v4.2"/><path d="M6.4 2.5h3.2v3.6l2 2.3v.9H4.4v-.9l2-2.3z" fill="currentColor" stroke="none"/>'));
 registerIcon("eye", S('<path d="M1.5 8s2.5-5.4 6.5-5.4S14.5 8 14.5 8 12 13.4 8 13.4 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="1.8"/>'));
 registerIcon("eye-off", S('<path d="M1.5 8s2.5-5.4 6.5-5.4S14.5 8 14.5 8 12 13.4 8 13.4 1.5 8 1.5 8z" opacity="0.45"/><path d="m3 13 10-10"/>'));
 registerIcon("lock", S('<rect x="3.2" y="7" width="9.6" height="6.6" rx="1.2"/><path d="M5.6 7V5.2a2.4 2.4 0 0 1 4.8 0V7"/>'));
@@ -5022,6 +5035,7 @@ var BASELINE_FILL_ALPHA_FAR = 0.05;
 var BASELINE_LEVEL_DEFAULT = 50;
 var PREMARKET_SHADE = withAlpha(WARNING, 0.08);
 var POSTMARKET_SHADE = withAlpha(ACCENT, 0.08);
+var EXTENDED_SHADE = POSTMARKET_SHADE;
 function defaultChartStyle() {
   return {
     chartTypes: {},
@@ -5030,7 +5044,7 @@ function defaultChartStyle() {
     gridHorz: { visible: true, color: null },
     borderColor: null,
     separatorColor: null,
-    crosshair: { color: CROSSHAIR, width: 1, style: "dashed", opacity: 0.4, labelBackground: SLATE },
+    crosshair: { color: CROSSHAIR, width: 1, style: "dashed", opacity: 0.4, labelBackground: CHIP_PLATE },
     candle: {
       bodyVisible: true,
       borderVisible: false,
@@ -5053,7 +5067,7 @@ function defaultChartStyle() {
       width: 2,
       baselineLevel: BASELINE_LEVEL_DEFAULT
     },
-    sessions: { premarketColor: PREMARKET_SHADE, postmarketColor: POSTMARKET_SHADE }
+    sessions: { premarketColor: PREMARKET_SHADE, postmarketColor: POSTMARKET_SHADE, extendedColor: EXTENDED_SHADE }
   };
 }
 var LINE_STYLES = ["solid", "dashed", "dotted"];
@@ -5282,7 +5296,8 @@ function mergeConfig(base, patch) {
     },
     sessions: {
       premarketColor: isColor(sessions.premarketColor) ? sessions.premarketColor : base.sessions.premarketColor,
-      postmarketColor: isColor(sessions.postmarketColor) ? sessions.postmarketColor : base.sessions.postmarketColor
+      postmarketColor: isColor(sessions.postmarketColor) ? sessions.postmarketColor : base.sessions.postmarketColor,
+      extendedColor: isColor(sessions.extendedColor) ? sessions.extendedColor : base.sessions.extendedColor
     },
     stacking: {
       candles: isNum(stacking.candles) ? stacking.candles : base.stacking.candles,
@@ -12278,6 +12293,22 @@ var CSS5 = `
 }
 .vela-panel-close .vela-icon { width: 16px; height: 16px; }
 .vela-panel-close:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
+/* The pin: same footprint as the close button it sits beside; filled + bright once pinned. */
+.vela-panel-pin {
+    all: unset;
+    cursor: pointer;
+    width: 26px;
+    height: 26px;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    color: var(--vela-fg-muted);
+}
+.vela-panel-pin .vela-icon { width: 15px; height: 15px; }
+.vela-panel-pin:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
+.vela-panel-pin[data-on='1'] { color: var(--vela-fg-bright); }
 .vela-panel-body { flex: 1; overflow: auto; padding: 8px; }
 .vela-panel-body::-webkit-scrollbar { width: 8px; }
 .vela-panel-body::-webkit-scrollbar-thumb { background: var(--vela-scroll); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
@@ -12302,8 +12333,23 @@ var CSS5 = `
     width: 1px;
     background: transparent;
 }
+/* The same hover ink as the workspace grid splitters and the canvas pane separators, so
+   every draggable seam in the shell reads as one family. */
 .vela-panel-resizer:hover::after,
-.vela-panel-resizer[data-dragging]::after { background: var(--vela-accent); }
+.vela-panel-resizer[data-dragging]::after { background: var(--vela-separator-hover-line); }
+/* An OVERLAY panel floats over the chart's right edge instead of taking a column: the
+   chart keeps its width and layout (the dock host is position:relative \u2014 the anchoring the
+   mobile rule below relies on too). Same z-order as that mobile overlay, above the chart's
+   own DOM overlays; the shadow separates it from the plot it covers. */
+.vela-panel[data-overlay] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    max-width: 100%;
+    z-index: 25;
+    box-shadow: var(--vela-shadow);
+}
 /* Mobile: a 280px column would crush a phone-width chart \u2014 the panel overlays the
    chart area instead (its flex parent is position:relative), full-bleed, closed by
    the same header \u2715. Width dragging is a pointer affordance; off on mobile. */
@@ -12334,6 +12380,10 @@ var SidePanel = class {
     /** Notified when the USER settles a new width (drag release, or double-click reset) — never on
      *  a programmatic {@link setWidth}, so restoring a persisted width raises no change. */
     this.onWidthChange = null;
+    /** Notified when the USER pins or unpins a floating panel (`overlay` is the NEW placement) —
+     *  never on a programmatic {@link setOverlay}, for the same reason as widths. */
+    this.onPlacementChange = null;
+    this.pin = null;
     const doc = host.ownerDocument;
     injectStyles(STYLE_ID4, CSS5, doc);
     this.minWidth = opts.resizable ? opts.minWidth ?? DEFAULT_PANEL_MIN_WIDTH : 1;
@@ -12343,6 +12393,9 @@ var SidePanel = class {
     this.el = doc.createElement("div");
     this.el.className = `vela-panel ${modifier}`;
     this.el.hidden = true;
+    this.floatable = opts.overlay === true;
+    this.overlayOn = this.floatable;
+    if (this.overlayOn) this.el.dataset.overlay = "1";
     this.el.style.setProperty("--vela-panel-w", `${this.widthPx}px`);
     const header = doc.createElement("div");
     header.className = "vela-panel-header";
@@ -12356,7 +12409,16 @@ var SidePanel = class {
     close.appendChild(iconEl("close", doc));
     close.title = "Close";
     close.addEventListener("click", () => this.toggle(false));
-    header.append(this.heading, this.slot, close);
+    if (this.floatable) {
+      this.pin = doc.createElement("button");
+      this.pin.className = "vela-panel-pin";
+      this.pin.addEventListener("click", () => {
+        this.setOverlay(!this.overlayOn);
+        this.onPlacementChange?.(this.overlayOn);
+      });
+      this.refreshPin();
+    }
+    header.append(this.heading, this.slot, ...this.pin ? [this.pin] : [], close);
     this.body = doc.createElement("div");
     this.body.className = "vela-panel-body";
     this.el.append(header, this.body);
@@ -12398,6 +12460,29 @@ var SidePanel = class {
     this.widthPx = next;
     this.el.style.setProperty("--vela-panel-w", `${next}px`);
   }
+  /** Whether the panel floats over the chart right now (false for every docked panel). */
+  get overlay() {
+    return this.overlayOn;
+  }
+  /** Float or dock the panel. Only a panel declared `overlay` can float — on any other this is
+   *  a no-op. Silent — {@link onPlacementChange} reports the user's pin clicks only. */
+  setOverlay(overlay) {
+    if (!this.floatable || overlay === this.overlayOn) return;
+    this.overlayOn = overlay;
+    if (overlay) this.el.dataset.overlay = "1";
+    else delete this.el.dataset.overlay;
+    this.refreshPin();
+  }
+  refreshPin() {
+    if (!this.pin) return;
+    const pinned = !this.overlayOn;
+    const doc = this.pin.ownerDocument;
+    this.pin.replaceChildren(iconEl(pinned ? "pin-filled" : "pin", doc));
+    this.pin.dataset.on = pinned ? "1" : "0";
+    this.pin.title = pinned ? "Unpin \u2014 float over the chart" : "Pin beside the chart";
+    this.pin.setAttribute("aria-label", this.pin.title);
+    this.pin.setAttribute("aria-pressed", pinned ? "true" : "false");
+  }
   destroy() {
     this.el.remove();
   }
@@ -13798,6 +13883,8 @@ var PanelDock = class {
     this.entries = [];
     /** Widths the USER settled, by panel id — the only ones worth persisting. */
     this.widths = /* @__PURE__ */ new Map();
+    /** Floating panels the USER pinned as columns, by id — remembered for late registrations too. */
+    this.pinned = /* @__PURE__ */ new Set();
     /** A restored `open` naming a panel that has not registered yet: honored when it docks. */
     this.pendingOpen = null;
     this.chart = null;
@@ -13820,7 +13907,8 @@ var PanelDock = class {
         width: desc.width,
         resizable: desc.resizable,
         minWidth: desc.minWidth,
-        maxWidth: desc.maxWidth
+        maxWidth: desc.maxWidth,
+        overlay: desc.overlay
       });
       const entry = {
         id: desc.id,
@@ -13868,7 +13956,8 @@ var PanelDock = class {
     const open2 = this.openId;
     if (open2) out.open = open2;
     if (this.widths.size > 0) out.widths = Object.fromEntries(this.widths);
-    return out.open || out.widths ? out : null;
+    if (this.pinned.size > 0) out.pinned = [...this.pinned];
+    return out.open || out.widths || out.pinned ? out : null;
   }
   /**
    * Restore a persisted dock state. Widths apply to any panel present, and are remembered for
@@ -13876,7 +13965,8 @@ var PanelDock = class {
    * a document that predates the dock has no `panels` field at all, so the shell never calls
    * this and the default (everything closed) stands. An `open` naming a panel that has not
    * registered yet is held until it docks (a plugin loaded after the restore), unless the user
-   * opens something in the meantime.
+   * opens something in the meantime. `pinned` is the whole list of floating panels the user
+   * docked — its absence means none is, so every floatable panel floats again.
    */
   applyState(state) {
     if (!state) return;
@@ -13886,6 +13976,8 @@ var PanelDock = class {
         this.entries.find((e) => e.id === id)?.panel.setWidth(px);
       }
     }
+    this.pinned = new Set(state.pinned ?? []);
+    for (const entry of this.entries) entry.panel.setOverlay(!this.pinned.has(entry.id));
     for (const entry of this.entries) entry.panel.toggle(entry.id === state.open);
     this.pendingOpen = state.open && !this.entries.some((e) => e.id === state.open) ? state.open : null;
   }
@@ -13899,6 +13991,7 @@ var PanelDock = class {
     this.entries.sort((a, b) => a.order - b.order);
     const stored = this.widths.get(entry.id);
     if (stored !== void 0) entry.panel.setWidth(stored);
+    if (this.pinned.has(entry.id)) entry.panel.setOverlay(false);
     entry.panel.onOpenChange = (open2) => {
       if (open2) {
         for (const other of this.entries) if (other !== entry) other.panel.toggle(false);
@@ -13912,6 +14005,11 @@ var PanelDock = class {
       this.widths.set(entry.id, px);
       this.deps.changed?.();
     };
+    entry.panel.onPlacementChange = (overlay) => {
+      if (overlay) this.pinned.delete(entry.id);
+      else this.pinned.add(entry.id);
+      this.deps.changed?.();
+    };
     if (this.pendingOpen === entry.id) entry.panel.toggle(true);
     if (!entry.contributed) this.publish();
   }
@@ -14000,6 +14098,17 @@ function filterSymbols(list, query, limit = 100, top = TOP_TICKERS) {
 }
 var STYLE_ID7 = "vela-widget-symbolpicker";
 var CSS8 = `
+/* Search + market tabs stay pinned while the result list scrolls underneath
+   (mobile fullscreen: the dialog body is the scroller). Negative margin eats
+   the body's padding so scrolled rows cannot peek around the island. */
+.vela-sp-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--vela-surface);
+    margin: calc(-1 * var(--vela-space-4)) calc(-1 * var(--vela-space-4)) 0;
+    padding: var(--vela-space-4) var(--vela-space-4) 0;
+}
 .vela-sp-searchrow {
     display: flex;
     align-items: center;
@@ -14019,8 +14128,10 @@ var CSS8 = `
     border: none;
     font-size: 14px;
     outline: none;
+    text-transform: uppercase;
 }
-.vela-sp-tabs { display: flex; gap: 14px; margin: 12px 2px 6px; border-bottom: 1px solid var(--vela-border); padding-bottom: 8px; }
+.vela-sp-input::placeholder { text-transform: none; }
+.vela-sp-tabs { display: flex; gap: 14px; margin: 12px 2px 0; border-bottom: 1px solid var(--vela-border); padding-bottom: 8px; }
 /* Mobile (fullscreen dialog): the asset-class strip scrolls sideways instead of
    overflowing the body, and the result list stops capping itself \u2014 the body owns
    the scrolling in the fullscreen presentation. */
@@ -14069,7 +14180,7 @@ var CSS8 = `
     font-weight: 700;
 }
 .vela-sp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
-.vela-sp-ticker { font-weight: 700; color: var(--vela-fg-bright); font-size: 14px; }
+.vela-sp-ticker { font-weight: 700; color: var(--vela-fg-bright); font-size: 14px; text-transform: uppercase; }
 .vela-sp-desc { color: var(--vela-fg-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .vela-sp-badge {
     flex: none;
@@ -14132,6 +14243,8 @@ var SymbolPicker = class {
     searchRow.append(iconEl("search", doc), this.input);
     this.tabs = doc.createElement("div");
     this.tabs.className = "vela-sp-tabs";
+    const sticky = doc.createElement("div");
+    sticky.className = "vela-sp-sticky";
     for (const t of ["All", "Stocks", "ETFs", "Crypto", "Futures", "Forex", "Commodities"]) {
       const b = doc.createElement("button");
       b.className = "vela-sp-tab";
@@ -14145,6 +14258,7 @@ var SymbolPicker = class {
       });
       this.tabs.appendChild(b);
     }
+    sticky.append(searchRow, this.tabs);
     this.list = doc.createElement("div");
     this.list.className = "vela-sp-list";
     this.list.addEventListener("scroll", () => {
@@ -14157,21 +14271,32 @@ var SymbolPicker = class {
       title: "Symbol Search",
       host: opts.host,
       closeOnInteractOutside: true,
-      content: (body) => body.append(searchRow, this.tabs, this.list),
+      content: (body) => body.append(sticky, this.list),
       onOpenChange: (open2) => {
         if (open2) {
-          this.input.value = this.seed;
+          this.input.value = this.seed.toUpperCase();
           this.seed = "";
           this.refresh();
           setTimeout(() => {
             this.input.focus();
             this.input.setSelectionRange(this.input.value.length, this.input.value.length);
           }, 0);
+        } else {
+          this.input.blur();
         }
         opts.onOpenChange?.(open2);
       }
     });
-    this.input.addEventListener("input", () => this.refresh());
+    this.input.addEventListener("input", () => {
+      const next = this.input.value.toUpperCase();
+      if (this.input.value !== next) {
+        const start = this.input.selectionStart;
+        const end = this.input.selectionEnd;
+        this.input.value = next;
+        if (start != null && end != null) this.input.setSelectionRange(start, end);
+      }
+      this.refresh();
+    });
     this.input.addEventListener("keydown", (e) => {
       if (e.key === "ArrowDown") this.moveHighlight(1);
       else if (e.key === "ArrowUp") this.moveHighlight(-1);
@@ -17806,6 +17931,7 @@ function createCustomMark(doc, html, background) {
   });
   el.style.color = attributionMarkColor(background);
   el.innerHTML = html;
+  el.dataset.velaScreenshot = "1";
   return el;
 }
 function createAttributionMark(doc, background) {
@@ -17824,6 +17950,7 @@ function createAttributionMark(doc, background) {
     cursor: "pointer"
   });
   applyAttributionMarkTheme(a, background);
+  a.dataset.velaScreenshot = "1";
   const symbol = doc.createElement("span");
   symbol.className = "vela-attr-symbol";
   symbol.setAttribute("aria-hidden", "true");
@@ -17992,7 +18119,11 @@ function sanitizePanels(raw) {
     }
     if (Object.keys(widths).length > 0) out.widths = widths;
   }
-  return out.open || out.widths ? out : null;
+  if (Array.isArray(p.pinned)) {
+    const pinned = p.pinned.filter((id) => typeof id === "string" && id !== "");
+    if (pinned.length > 0) out.pinned = [...new Set(pinned)];
+  }
+  return out.open || out.widths || out.pinned ? out : null;
 }
 function sanitizeTrackSizes(raw) {
   if (raw == null || typeof raw !== "object") return null;
@@ -18461,6 +18592,7 @@ var RUN_EMIT_THROTTLE_MS = 1e3;
 var PREVIEW_BARS = 300;
 var SINGLE_LOAD_BARS = 5e3;
 var CHUNK_BARS = 1e4;
+var FIRST_PAINT_BARS = 20;
 var GAP_FACTOR = 1.5;
 var HEAL_COOLDOWN_MS = 5e3;
 var EngineOrchestrator = class _EngineOrchestrator {
@@ -18736,6 +18868,7 @@ 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;
@@ -20153,6 +20286,15 @@ var RendererControl = class {
     console.warn(`[vela] renderer "${this.renderer.name}" does not support screenshot().`);
     return null;
   }
+  /**
+   * Raster of the current chart onto a canvas (same pixels as {@link screenshot}),
+   * or null if the renderer has no canvas export. Silent — a host compositing
+   * several charts skips a renderer that cannot contribute.
+   */
+  screenshotCanvas() {
+    if (typeof this.renderer.screenshotCanvas === "function") return this.renderer.screenshotCanvas();
+    return null;
+  }
   /**
    * The active renderer's full cosmetic config as a serializable, versioned JSON
    * document — persist it (templates, saved settings) and feed it back to
@@ -22721,6 +22863,66 @@ function candleGeometry(xCss, spacing, dpr, bodyScale = 1) {
     center: (wickLeftDev + wickDev / 2) / dpr
   };
 }
+function aggregateCandleColumns(bars, i0, i1, xOf, yOf) {
+  const out = [];
+  let col = NaN;
+  let intervals = [];
+  const flush = () => {
+    if (intervals.length === 0) return;
+    const merged = [intervals[0]];
+    for (let k = 1; k < intervals.length; k += 1) {
+      const prev2 = merged[merged.length - 1];
+      const next = intervals[k];
+      if (Math.abs(yOf(prev2.hi) - yOf(next.lo)) < 1) {
+        prev2.hi = next.hi;
+        if (next.headIdx < prev2.headIdx) {
+          prev2.headIdx = next.headIdx;
+          prev2.headTime = next.headTime;
+          prev2.open = next.open;
+        }
+        if (next.lastIdx > prev2.lastIdx) {
+          prev2.lastIdx = next.lastIdx;
+          prev2.close = next.close;
+        }
+      } else {
+        merged.push(next);
+      }
+    }
+    for (const iv of merged) out.push({ x: col, hi: iv.hi, lo: iv.lo, headTime: iv.headTime, open: iv.open, close: iv.close });
+    intervals = [];
+  };
+  for (let i = i0; i <= i1; i += 1) {
+    const b = bars[i];
+    if (!b || b.high <= b.low) continue;
+    const x = Math.round(xOf(i));
+    if (x !== col) {
+      flush();
+      col = x;
+    }
+    let lo = b.low;
+    let hi = b.high;
+    let headIdx = i;
+    let headTime = b.time;
+    let open2 = b.open;
+    for (let k = intervals.length - 1; k >= 0; k -= 1) {
+      const iv = intervals[k];
+      if (iv.lo > hi || iv.hi < lo) continue;
+      if (iv.lo < lo) lo = iv.lo;
+      if (iv.hi > hi) hi = iv.hi;
+      if (iv.headIdx < headIdx) {
+        headIdx = iv.headIdx;
+        headTime = iv.headTime;
+        open2 = iv.open;
+      }
+      intervals.splice(k, 1);
+    }
+    let insertAt = 0;
+    while (insertAt < intervals.length && intervals[insertAt].lo < lo) insertAt += 1;
+    intervals.splice(insertAt, 0, { lo, hi, headIdx, headTime, open: open2, lastIdx: i, close: b.close });
+  }
+  flush();
+  return out;
+}
 
 // src/renderers/native/backend/gl/Batch.ts
 var FLOATS_PER_VERT = 8;
@@ -23693,44 +23895,19 @@ var WebGL2Backend = class {
     }
   }
   /**
-   * Sub-pixel LOD (mirrors Canvas2dBackend.drawCandlesAggregated): bucket bars
-   * sharing a rounded pixel column into one high-low stick → draw cost bounded by
-   * screen width, not bar count. Bucket color follows first-open→last-close.
+   * Sub-pixel LOD (mirrors Canvas2dBackend.drawCandlesAggregated): bars sharing a
+   * rounded pixel column collapse into high-low sticks — one per contiguous
+   * coverage run (see {@link aggregateCandleColumns}), so a price gap inside the
+   * column stays a void. Draw cost stays bounded by screen width, not bar count;
+   * stick color follows its own first-open→last-close.
    */
   emitCandlesAggregated(b, bars, i0, i1, coords, pane, up, down, barColors) {
-    let px = NaN;
-    let lo = Infinity;
-    let hi = -Infinity;
-    let openV = 0;
-    let closeV = 0;
-    let headTime = 0;
-    let active = false;
-    const flush = () => {
-      if (!active) return;
-      const c = parseColor(barColors.get(headTime) ?? (closeV >= openV ? up : down));
-      const hY = coords.priceToY(hi, pane.scale, pane.bounds);
-      const lY = coords.priceToY(lo, pane.scale, pane.bounds);
-      b.rect(px - 0.5, hY, 1, lY - hY, c);
-    };
-    for (let i = i0; i <= i1; i += 1) {
-      const bar = bars[i];
-      if (!bar || bar.high <= bar.low) continue;
-      const x = Math.round(coords.logicalToX(i));
-      if (!active || x !== px) {
-        flush();
-        px = x;
-        lo = bar.low;
-        hi = bar.high;
-        openV = bar.open;
-        headTime = bar.time;
-        active = true;
-      } else {
-        if (bar.low < lo) lo = bar.low;
-        if (bar.high > hi) hi = bar.high;
-      }
-      closeV = bar.close;
+    const yOf = (price) => coords.priceToY(price, pane.scale, pane.bounds);
+    for (const s of aggregateCandleColumns(bars, i0, i1, (i) => coords.logicalToX(i), yOf)) {
+      const c = parseColor(barColors.get(s.headTime) ?? (s.close >= s.open ? up : down));
+      const hY = yOf(s.hi);
+      b.rect(s.x - 0.5, hY, 1, yOf(s.lo) - hY, c);
     }
-    flush();
   }
   emitSeries(b, spec, pane, coords, i0, i1, theme, off = 0) {
     if (spec.kind === "candle" || spec.kind === "bar") {
@@ -25028,13 +25205,15 @@ var SceneGraph = class {
     if (!this.orderedCache) this.orderedCache = [...this.panes.values()].sort((a, b) => a.order - b.order);
     return this.orderedCache;
   }
-  /** The session zones resolved into colored bands (pre/post-market washes from the
-   *  config's session colors) — consumed by the same painting path as {@link highlights}. */
+  /** The session zones resolved into colored bands (pre/post-market or extended-hours
+   *  washes from the config's session colors) — consumed by the same painting path as
+   *  {@link highlights}. */
   sessionHighlightBands() {
     if (!this.sessionZones) return [];
     const out = [];
     for (const [from, to] of this.sessionZones.pre) out.push({ from, to, color: this.style.sessions.premarketColor });
     for (const [from, to] of this.sessionZones.post) out.push({ from, to, color: this.style.sessions.postmarketColor });
+    for (const [from, to] of this.sessionZones.extended) out.push({ from, to, color: this.style.sessions.extendedColor });
     return out;
   }
   indicatorsForPane(paneId) {
@@ -25573,50 +25752,23 @@ var Canvas2dBackend = class {
     }
   }
   /**
-   * Sub-pixel LOD: bucket every bar sharing a rounded pixel column into ONE
-   * high-low stick, so draw cost is bounded by screen width (not bar count) when
-   * zoomed far out. The bucket's color follows its first-open→last-close
-   * direction (a barcolor() on the head bar still wins).
+   * Sub-pixel LOD: bars sharing a rounded pixel column collapse into high-low
+   * sticks (one per contiguous coverage run — see {@link aggregateCandleColumns}),
+   * so draw cost is bounded by screen width (not bar count) when zoomed far out
+   * and a price gap inside the column stays a void. Each stick's color follows
+   * its first-open→last-close direction (a barcolor() on the head bar still wins).
    */
   drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, up, down, barColors) {
-    let px = NaN;
-    let lo = Infinity;
-    let hi = -Infinity;
-    let openV = 0;
-    let closeV = 0;
-    let headTime = 0;
-    let active = false;
-    const flush = () => {
-      if (!active) return;
-      const color = barColors.get(headTime) ?? (closeV >= openV ? up : down);
-      const hY = coords.priceToY(hi, pane.scale, pane.bounds);
-      const lY = coords.priceToY(lo, pane.scale, pane.bounds);
-      ctx.strokeStyle = color;
-      ctx.lineWidth = 1;
+    const yOf = (price) => coords.priceToY(price, pane.scale, pane.bounds);
+    ctx.lineWidth = 1;
+    for (const s of aggregateCandleColumns(bars, i0, i1, (i) => coords.logicalToX(i), yOf)) {
+      const x = s.x + 0.5;
+      ctx.strokeStyle = barColors.get(s.headTime) ?? (s.close >= s.open ? up : down);
       ctx.beginPath();
-      ctx.moveTo(px, hY);
-      ctx.lineTo(px, lY);
+      ctx.moveTo(x, yOf(s.hi));
+      ctx.lineTo(x, yOf(s.lo));
       ctx.stroke();
-    };
-    for (let i = i0; i <= i1; i += 1) {
-      const b = bars[i];
-      if (!b || b.high <= b.low) continue;
-      const x = Math.round(coords.logicalToX(i)) + 0.5;
-      if (!active || x !== px) {
-        flush();
-        px = x;
-        lo = b.low;
-        hi = b.high;
-        openV = b.open;
-        headTime = b.time;
-        active = true;
-      } else {
-        if (b.low < lo) lo = b.low;
-        if (b.high > hi) hi = b.high;
-      }
-      closeV = b.close;
     }
-    flush();
   }
   drawSeries(ctx, spec, pane, coords, i0, i1, theme, off = 0) {
     if (spec.kind === "candle" || spec.kind === "bar") {
@@ -26640,6 +26792,32 @@ var DrawingSceneRenderer = class {
   }
 };
 
+// src/renderers/native/chrome/tz.ts
+function tzOffsetMs(ms, timeZone) {
+  if (!timeZone || timeZone === "UTC") return 0;
+  try {
+    const dtf = new Intl.DateTimeFormat("en-US", {
+      timeZone,
+      hourCycle: "h23",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+    const parts = dtf.formatToParts(new Date(ms));
+    const get = (t) => Number(parts.find((p) => p.type === t)?.value);
+    const asUTC = Date.UTC(get("year"), get("month") - 1, get("day"), get("hour") % 24, get("minute"), get("second"));
+    return asUTC - ms;
+  } catch {
+    return 0;
+  }
+}
+function zonedDate(ms, timeZone) {
+  return new Date(ms + tzOffsetMs(ms, timeZone));
+}
+
 // src/renderers/native/chrome/ticks.ts
 function priceTicks(min, max, target = 6) {
   if (!(max > min) || !Number.isFinite(min) || !Number.isFinite(max)) return [];
@@ -26787,7 +26965,14 @@ var STEP_LADDER = [
   YEAR
 ];
 var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var pad2 = (n) => n < 10 ? `0${n}` : String(n);
+function formatTimeStamp(ms, timeZone, barIntervalMs) {
+  const d = zonedDate(ms, timeZone);
+  const date = `${WEEKDAYS[d.getUTCDay()]} ${d.getUTCDate()} ${MONTHS[d.getUTCMonth()]} '${pad2(d.getUTCFullYear() % 100)}`;
+  if (barIntervalMs >= DAY) return date;
+  return `${date} ${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())}`;
+}
 function pickStep(targetMs) {
   for (const step of STEP_LADDER) if (step >= targetMs) return step;
   return STEP_LADDER[STEP_LADDER.length - 1];
@@ -26829,32 +27014,6 @@ function timeTicks(fromMs, toMs, target = 8, offsetMs = 0) {
   return out;
 }
 
-// src/renderers/native/chrome/tz.ts
-function tzOffsetMs(ms, timeZone) {
-  if (!timeZone || timeZone === "UTC") return 0;
-  try {
-    const dtf = new Intl.DateTimeFormat("en-US", {
-      timeZone,
-      hourCycle: "h23",
-      year: "numeric",
-      month: "2-digit",
-      day: "2-digit",
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit"
-    });
-    const parts = dtf.formatToParts(new Date(ms));
-    const get = (t) => Number(parts.find((p) => p.type === t)?.value);
-    const asUTC = Date.UTC(get("year"), get("month") - 1, get("day"), get("hour") % 24, get("minute"), get("second"));
-    return asUTC - ms;
-  } catch {
-    return 0;
-  }
-}
-function zonedDate(ms, timeZone) {
-  return new Date(ms + tzOffsetMs(ms, timeZone));
-}
-
 // src/renderers/native/chrome/ChromeRenderer.ts
 var ChromeRenderer = class {
   constructor() {
@@ -27301,7 +27460,7 @@ var CrosshairRenderer = class {
       const price = coords.yToPrice(ch.y, pane.scale, pane.bounds);
       this.chip(ctx, dataW + 1, ch.y, formatAxisValue(pane.scale, pane.bounds.height, price, percentScaleFor(scene, pane), scene.priceMintick, pane.axisFormat), chipBg, "left", false, theme.background);
     }
-    this.chip(ctx, x, dataH + 1, formatStamp(coords.logicalToTime(logical), scene.timezone), chipBg, "center", true, theme.background);
+    this.chip(ctx, x, dataH + 1, formatTimeStamp(coords.logicalToTime(logical), scene.timezone, coords.barInterval), chipBg, "center", true, theme.background);
   }
   destroy() {
     this.canvas = null;
@@ -27349,7 +27508,7 @@ var CrosshairRenderer = class {
         this.chip(ctx, dataW + 1, ext.y, formatAxisValue(pane.scale, pane.bounds.height, ext.price, percentScaleFor(scene, pane), scene.priceMintick, pane.axisFormat), chipBg, "left", false, theme.background);
       }
     }
-    this.chip(ctx, x, dataH + 1, formatStamp(ext.time, scene.timezone), chipBg, "center", true, theme.background);
+    this.chip(ctx, x, dataH + 1, formatTimeStamp(ext.time, scene.timezone, coords.barInterval), chipBg, "center", true, theme.background);
     ctx.globalAlpha = 1;
   }
   /** A soft band + a brighter crisp center line over the hovered separator, so it reads as
@@ -27382,11 +27541,6 @@ function setDash3(ctx, style) {
   else if (style === "dotted") ctx.setLineDash([2, 3]);
   else ctx.setLineDash([]);
 }
-function formatStamp(ms, timeZone) {
-  const d = zonedDate(ms, timeZone);
-  const pad = (n) => n < 10 ? `0${n}` : String(n);
-  return `${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())} ${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`;
-}
 
 // src/renderers/native/chrome/settings-visibility.ts
 function settingsIdSlug(label) {
@@ -33153,6 +33307,9 @@ function clipHighlightRect(x1, x2, left, right) {
   const end = Math.min(right, x2);
   return end > x ? { x, width: end - x } : null;
 }
+function bandEdgeSlot(logical) {
+  return Math.ceil(logical) - 0.5;
+}
 var BackdropRenderer = class {
   constructor() {
     this.canvas = null;
@@ -33183,21 +33340,22 @@ var BackdropRenderer = class {
     this.drawGrid(ctx, scene, coords, theme, coords.width, gridAlpha);
   }
   /** Renderer-owned session highlight bands: full-height (all panes), behind the grid.
-   *  Session-zone washes (pre/post-market) paint first, host highlights on top. */
+   *  Session-zone washes paint first (edges snapped to bar-slot boundaries so a band
+   *  never cuts a candle in two), host highlights on top (continuous time mapping —
+   *  hosts may paint sub-bar spans). */
   drawHighlights(ctx, scene, coords) {
     const sessions = scene.sessionHighlightBands();
     if (sessions.length > 0) {
       const left = Math.max(0, coords.logicalToX(-0.5));
       const right = Math.min(coords.width, coords.logicalToX(coords.barCount - 0.5));
-      this.drawHighlightSet(ctx, sessions, coords, left, right);
+      this.drawHighlightSet(ctx, sessions, coords, left, right, true);
     }
-    this.drawHighlightSet(ctx, scene.highlights, coords, 0, coords.width);
+    this.drawHighlightSet(ctx, scene.highlights, coords, 0, coords.width, false);
   }
-  drawHighlightSet(ctx, bands, coords, left, right) {
+  drawHighlightSet(ctx, bands, coords, left, right, snapToSlots) {
+    const edgeX = (ms) => snapToSlots ? coords.logicalToX(bandEdgeSlot(coords.timeToLogical(ms))) : coords.timeToX(ms);
     for (const band of bands) {
-      const x1 = coords.timeToX(band.from);
-      const x2 = coords.timeToX(band.to);
-      const rect = clipHighlightRect(x1, x2, left, right);
+      const rect = clipHighlightRect(edgeX(band.from), edgeX(band.to), left, right);
       if (!rect) continue;
       ctx.fillStyle = band.color;
       ctx.fillRect(rect.x, 0, rect.width, coords.height);
@@ -34344,7 +34502,7 @@ var NativeRenderer = class {
         };
       })(),
       series: { style: this.scene.priceStyle, baseline: this.scene.baselineValue, spacing: this.coords.spacingScale },
-      sessions: { premarketColor: s.sessions.premarketColor, postmarketColor: s.sessions.postmarketColor }
+      sessions: { premarketColor: s.sessions.premarketColor, postmarketColor: s.sessions.postmarketColor, extendedColor: s.sessions.extendedColor }
     };
   }
   /**
@@ -34426,7 +34584,7 @@ var NativeRenderer = class {
       width: next.baseline.width,
       baselineLevel: next.baseline.baselineLevel
     };
-    s.sessions = { premarketColor: next.sessions.premarketColor, postmarketColor: next.sessions.postmarketColor };
+    s.sessions = { premarketColor: next.sessions.premarketColor, postmarketColor: next.sessions.postmarketColor, extendedColor: next.sessions.extendedColor };
     this.setPriceStyle(next.series.style);
     this.scene.candleOverride = candleOverrideFor(this.scene.priceStyle, s.chartTypes);
     this.scene.baselineValue = next.series.baseline;
@@ -34648,9 +34806,10 @@ var NativeRenderer = class {
    * opts in with a `data-vela-screenshot` attribute on the mount container's
    * subtree (the widget marks its status line, and its symbol watermark with
    * `"under"` — drawn beneath the canvases, where it sits on screen). Only the
-   * crosshair (L2) is intentionally excluded.
+   * crosshair (L2) is intentionally excluded. {@link screenshot} is this canvas
+   * as a PNG data URL.
    */
-  screenshot() {
+  screenshotCanvas() {
     if (!this.dataCanvas) return null;
     this.computeScales();
     this.paintData();
@@ -34678,7 +34837,10 @@ var NativeRenderer = class {
         if (el.getAttribute("data-vela-screenshot") !== "under") rasterizeOverlay(ctx, el, frame);
       }
     }
-    return out.toDataURL("image/png");
+    return out;
+  }
+  screenshot() {
+    return this.screenshotCanvas()?.toDataURL("image/png") ?? null;
   }
   /**
    * The candles-first-appear reveal — animates the **candles themselves** (no extra
@@ -36073,7 +36235,7 @@ var NativeRenderer = class {
     const pricePane = this.dataWindowPricePane();
     const ohlc = this.dataWindowOHLC(bar, pricePane);
     const parts = [];
-    if (bar) parts.push(formatStamp2(bar.time, this.scene.timezone));
+    if (bar) parts.push(formatStamp(bar.time, this.scene.timezone));
     if (ohlc) parts.push(`Open ${ohlc.o}, High ${ohlc.h}, Low ${ohlc.l}, Close ${ohlc.c}`);
     for (const group of this.dataWindowGroups(idx, pricePane)) {
       for (const row of group.rows) parts.push(`${row.label} ${row.value}`);
@@ -36960,7 +37122,7 @@ function formatStampParts(ms, timeZone) {
     time: `${p(d.getUTCHours())}:${p(d.getUTCMinutes())}`
   };
 }
-function formatStamp2(ms, timeZone) {
+function formatStamp(ms, timeZone) {
   const { date, time } = formatStampParts(ms, timeZone);
   return `${date} ${time}`;
 }
@@ -36991,7 +37153,7 @@ function sanitizeSessionZones(value) {
     }
     return out.sort((a, b) => a[0] - b[0]);
   };
-  return { pre: windows(v.pre), post: windows(v.post) };
+  return { pre: windows(v.pre), post: windows(v.post), extended: windows(v.extended) };
 }
 function clamp012(v) {
   return Math.max(0, Math.min(1, v));
@@ -37680,6 +37842,7 @@ var MARKET_LABELS = {
   open: "Market Open",
   pre: "Pre-Market",
   post: "Post-Market",
+  extended: "Extended Hours",
   closed: "Market Closed",
   holiday: "Market Holiday"
 };
@@ -37687,6 +37850,7 @@ var MARKET_INKS = {
   open: "var(--vela-up)",
   pre: SESSION_PRE,
   post: SESSION_POST,
+  extended: SESSION_POST,
   closed: SESSION_OFF,
   holiday: SESSION_OFF
 };
@@ -38000,118 +38164,17 @@ var Statusline = class {
   }
 };
 
-// src/widget/market-status.ts
-function civilDate(ms, tz) {
-  try {
-    return new Intl.DateTimeFormat("en-CA", { timeZone: tz }).format(ms);
-  } catch {
-    return "";
-  }
-}
-function isWeekday(ms, tz) {
-  try {
-    const wd = new Intl.DateTimeFormat("en-US", { timeZone: tz, weekday: "short" }).format(ms);
-    return wd !== "Sat" && wd !== "Sun";
-  } catch {
-    return false;
-  }
-}
-function deriveMarketStatus(now, w, tz) {
-  const within = (ws) => ws.find(([s, e]) => now >= s && now < e);
-  if (within(w.regular)) return "open";
-  const ext = within(w.extended);
-  if (ext) return w.regular.some(([s]) => s >= now && s < ext[1]) ? "pre" : "post";
-  if (isWeekday(now, tz)) {
-    const today = civilDate(now, tz);
-    if (today !== "" && !w.extended.some(([s]) => civilDate(s, tz) === today)) return "holiday";
-  }
-  return "closed";
-}
-function nextStatusBoundary(now, w) {
-  let next = null;
-  for (const ws of [w.regular, w.extended]) {
-    for (const [s, e] of ws) {
-      for (const t of [s, e]) {
-        if (t > now && (next == null || t < next)) next = t;
-      }
-    }
-  }
-  return next;
-}
-var FETCH_BACK_MS = 4 * 864e5;
-var FETCH_AHEAD_MS = 10 * 864e5;
-var MIN_TIMER_MS = 15e3;
-var MAX_TIMER_MS = 36e5;
-var RETRY_MS2 = 6e4;
-var MarketStatusTracker = class {
-  constructor(onStatus) {
-    this.onStatus = onStatus;
-    /** Invalidates detached async work — bumped by every track()/stop(). */
-    this.epoch = 0;
-    this.timer = null;
-  }
-  /** (Re)bind to a chart's data surface + symbol and start evaluating. */
-  track(data, symbol) {
-    const my = ++this.epoch;
-    this.clearTimer();
-    void this.evaluate(my, data, symbol);
-  }
-  stop() {
-    this.epoch += 1;
-    this.clearTimer();
-  }
-  async evaluate(my, data, symbol) {
-    const resolved = data.resolve(symbol);
-    const provider = resolved ? data.providerInstance(resolved.provider) : void 0;
-    const si = await data.symbolInfo(symbol).catch(() => void 0);
-    if (my !== this.epoch) return;
-    const hasSessions = typeof si?.session === "string" && si.session !== "" && si.session !== "24x7";
-    if (!provider?.getCalendar || !hasSessions || !resolved) {
-      this.onStatus("open");
-      return;
-    }
-    const tz = typeof si?.timezone === "string" && si.timezone !== "" ? si.timezone : "Etc/UTC";
-    const now = Date.now();
-    const range = { from: now - FETCH_BACK_MS, to: now + FETCH_AHEAD_MS };
-    const [regular, extended] = await Promise.all([
-      provider.getCalendar(resolved.ticker, { ...range, session: "regular" }).catch(() => null),
-      provider.getCalendar(resolved.ticker, { ...range, session: "extended" }).catch(() => null)
-    ]);
-    if (my !== this.epoch) return;
-    if (!regular || !extended) {
-      this.arm(my, data, symbol, RETRY_MS2);
-      return;
-    }
-    const w = { regular, extended };
-    this.onStatus(deriveMarketStatus(now, w, tz));
-    const boundary = nextStatusBoundary(now, w);
-    const delay = Math.min(boundary != null ? boundary - now : MAX_TIMER_MS, MAX_TIMER_MS);
-    this.arm(my, data, symbol, Math.max(delay, MIN_TIMER_MS));
-  }
-  arm(my, data, symbol, delay) {
-    this.clearTimer();
-    this.timer = setTimeout(() => {
-      this.timer = null;
-      if (my !== this.epoch) return;
-      void this.evaluate(my, data, symbol);
-    }, delay);
-  }
-  clearTimer() {
-    if (this.timer != null) clearTimeout(this.timer);
-    this.timer = null;
-  }
-};
-
 // src/widget/session-shading.ts
 var DAY_MS2 = 864e5;
 var MINUTE_MS = 6e4;
-function parseWindow(text) {
+function parseWindow(text, allowOvernight = false) {
   if (typeof text !== "string") return null;
   const m = /^(\d{2})(\d{2})-(\d{2})(\d{2})$/.exec(text);
   if (!m) return null;
   const start = Number(m[1]) * 60 + Number(m[2]);
   const end = Number(m[3]) * 60 + Number(m[4]);
-  if (start >= end || end > 1440) return null;
+  if (end > 1440 || start >= 1440) return null;
+  if (start >= end && !allowOvernight) return null;
   return { start, end };
 }
 function parseSessionSpec(si) {
@@ -38121,9 +38184,13 @@ function parseSessionSpec(si) {
   if (!regular) return null;
   const tz = si?.["timezone"];
   const timezone = typeof tz === "string" && tz !== "" ? tz : "Etc/UTC";
-  const ext = parseWindow(si?.["session_extended"]);
+  const ext = parseWindow(si?.["session_extended"], true);
+  if (ext && ext.start >= ext.end) {
+    if (ext.start >= regular.end && ext.end >= regular.end) return { regular, extended: ext, overnight: true, timezone };
+    return { regular, extended: { start: 0, end: 1440 }, overnight: false, timezone };
+  }
   const extended = ext && ext.start <= regular.start && ext.end >= regular.end ? ext : { start: 0, end: 1440 };
-  return { regular, extended, timezone };
+  return { regular, extended, overnight: false, timezone };
 }
 var dtfCache = /* @__PURE__ */ new Map();
 function civilFormatter(tz) {
@@ -38159,27 +38226,48 @@ function civilParts(dtf, ms) {
     minute: Number(get("minute"))
   };
 }
+function mergeAbutting(bands) {
+  const sorted = [...bands].sort((a, b) => a[0] - b[0]);
+  const out = [];
+  for (const [s, e] of sorted) {
+    if (e <= s) continue;
+    const last = out[out.length - 1];
+    if (last && s <= last[1]) last[1] = Math.max(last[1], e);
+    else out.push([s, e]);
+  }
+  return out;
+}
 function expandSessionZones(spec, from, to) {
   const pre = [];
   const post = [];
+  const extended = [];
   const dtf = civilFormatter(spec.timezone);
-  if (!dtf || !Number.isFinite(from) || !Number.isFinite(to)) return { pre, post };
+  if (!dtf || !Number.isFinite(from) || !Number.isFinite(to)) return { pre, post, extended };
   const seen = /* @__PURE__ */ new Set();
   for (let cursor = from - DAY_MS2; cursor < to + DAY_MS2; cursor += DAY_MS2) {
     const civil = civilParts(dtf, cursor);
     const key = civil.year * 1e4 + civil.month * 100 + civil.day;
     if (!Number.isFinite(key) || seen.has(key)) continue;
     seen.add(key);
-    if (civil.weekday === "Sat" || civil.weekday === "Sun") continue;
+    const sunday = civil.weekday === "Sun";
+    if (civil.weekday === "Sat" || sunday && !spec.overnight) continue;
     const naive = Date.UTC(civil.year, civil.month - 1, civil.day);
     const noonGuess = naive + 720 * MINUTE_MS;
     const atNoon = civilParts(dtf, noonGuess);
     const offset = Date.UTC(atNoon.year, atNoon.month - 1, atNoon.day, atNoon.hour, atNoon.minute) - noonGuess;
     const at = (minutes) => naive + minutes * MINUTE_MS - offset;
+    if (spec.overnight) {
+      if (!sunday) {
+        extended.push([at(0), at(spec.regular.start)]);
+        if (spec.regular.end < spec.extended.end) extended.push([at(spec.regular.end), at(spec.extended.end)]);
+      }
+      if (civil.weekday !== "Fri") extended.push([at(spec.extended.start), at(1440)]);
+      continue;
+    }
     if (spec.extended.start < spec.regular.start) pre.push([at(spec.extended.start), at(spec.regular.start)]);
     if (spec.regular.end < spec.extended.end) post.push([at(spec.regular.end), at(spec.extended.end)]);
   }
-  return { pre, post };
+  return { pre, post, extended: mergeAbutting(extended) };
 }
 var COVER_PAD_MIN_MS = 2 * DAY_MS2;
 var SessionShadingTracker = class {
@@ -38234,7 +38322,7 @@ var SessionShadingTracker = class {
       return;
     }
     if (this.session !== "extended" || !this.intraday) {
-      if (force) this.onZones({ pre: [], post: [] });
+      if (force) this.onZones({ pre: [], post: [], extended: [] });
       return;
     }
     const from = Math.min(range.from, range.to);
@@ -38248,6 +38336,112 @@ var SessionShadingTracker = class {
   }
 };
 
+// src/widget/market-status.ts
+function civilDate(ms, tz) {
+  try {
+    return new Intl.DateTimeFormat("en-CA", { timeZone: tz }).format(ms);
+  } catch {
+    return "";
+  }
+}
+function isWeekday(ms, tz) {
+  try {
+    const wd = new Intl.DateTimeFormat("en-US", { timeZone: tz, weekday: "short" }).format(ms);
+    return wd !== "Sat" && wd !== "Sun";
+  } catch {
+    return false;
+  }
+}
+function deriveMarketStatus(now, w, tz, overnight = false) {
+  const within = (ws) => ws.find(([s, e]) => now >= s && now < e);
+  if (within(w.regular)) return "open";
+  const ext = within(w.extended);
+  if (ext) {
+    if (overnight) return "extended";
+    return w.regular.some(([s]) => s >= now && s < ext[1]) ? "pre" : "post";
+  }
+  if (isWeekday(now, tz)) {
+    const today = civilDate(now, tz);
+    if (today !== "" && !w.extended.some(([s]) => civilDate(s, tz) === today)) return "holiday";
+  }
+  return "closed";
+}
+function nextStatusBoundary(now, w) {
+  let next = null;
+  for (const ws of [w.regular, w.extended]) {
+    for (const [s, e] of ws) {
+      for (const t of [s, e]) {
+        if (t > now && (next == null || t < next)) next = t;
+      }
+    }
+  }
+  return next;
+}
+var FETCH_BACK_MS = 4 * 864e5;
+var FETCH_AHEAD_MS = 10 * 864e5;
+var MIN_TIMER_MS = 15e3;
+var MAX_TIMER_MS = 36e5;
+var RETRY_MS2 = 6e4;
+var MarketStatusTracker = class {
+  constructor(onStatus) {
+    this.onStatus = onStatus;
+    /** Invalidates detached async work — bumped by every track()/stop(). */
+    this.epoch = 0;
+    this.timer = null;
+  }
+  /** (Re)bind to a chart's data surface + symbol and start evaluating. */
+  track(data, symbol) {
+    const my = ++this.epoch;
+    this.clearTimer();
+    void this.evaluate(my, data, symbol);
+  }
+  stop() {
+    this.epoch += 1;
+    this.clearTimer();
+  }
+  async evaluate(my, data, symbol) {
+    const resolved = data.resolve(symbol);
+    const provider = resolved ? data.providerInstance(resolved.provider) : void 0;
+    const si = await data.symbolInfo(symbol).catch(() => void 0);
+    if (my !== this.epoch) return;
+    const hasSessions = typeof si?.session === "string" && si.session !== "" && si.session !== "24x7";
+    if (!provider?.getCalendar || !hasSessions || !resolved) {
+      this.onStatus("open");
+      return;
+    }
+    const tz = typeof si?.timezone === "string" && si.timezone !== "" ? si.timezone : "Etc/UTC";
+    const now = Date.now();
+    const range = { from: now - FETCH_BACK_MS, to: now + FETCH_AHEAD_MS };
+    const [regular, extended] = await Promise.all([
+      provider.getCalendar(resolved.ticker, { ...range, session: "regular" }).catch(() => null),
+      provider.getCalendar(resolved.ticker, { ...range, session: "extended" }).catch(() => null)
+    ]);
+    if (my !== this.epoch) return;
+    if (!regular || !extended) {
+      this.arm(my, data, symbol, RETRY_MS2);
+      return;
+    }
+    const w = { regular, extended };
+    const overnight = parseSessionSpec(si)?.overnight === true;
+    this.onStatus(deriveMarketStatus(now, w, tz, overnight));
+    const boundary = nextStatusBoundary(now, w);
+    const delay = Math.min(boundary != null ? boundary - now : MAX_TIMER_MS, MAX_TIMER_MS);
+    this.arm(my, data, symbol, Math.max(delay, MIN_TIMER_MS));
+  }
+  arm(my, data, symbol, delay) {
+    this.clearTimer();
+    this.timer = setTimeout(() => {
+      this.timer = null;
+      if (my !== this.epoch) return;
+      void this.evaluate(my, data, symbol);
+    }, delay);
+  }
+  clearTimer() {
+    if (this.timer != null) clearTimeout(this.timer);
+    this.timer = null;
+  }
+};
+
 // src/widget/watermark.ts
 var MAX_FONT_PX = 36;
 var MIN_FONT_PX = 12;
@@ -38761,7 +38955,10 @@ var ChartCell = class {
     this.activeRangeId = null;
     /** Latched verdict of {@link sessionAvailable} (async metadata, sticky per symbol). */
     this.sessionAvailableFlag = false;
-    /** Keeps the pre/post-market shading on the symbol's real calendar (see {@link SessionShadingTracker}). */
+    /** Latched: the symbol's extended tape wraps midnight (an overnight roll market) —
+     *  one extended-hours shading phase instead of the pre/post split. */
+    this.sessionOvernightFlag = false;
+    /** Keeps the session shading on the symbol's real calendar (see {@link SessionShadingTracker}). */
     this.sessionShading = new SessionShadingTracker((zones) => this.inner?.renderer.set("sessionZones", zones));
     this.manifest = [];
     /** A restored ledger's manifest entry NAMES, waiting for the manifest to resolve
@@ -39014,8 +39211,10 @@ var ChartCell = class {
     void chart.data.symbolInfo(symbol).then((si) => {
       if (this.inner !== chart) return;
       const available = typeof si?.session === "string" && si.session !== "" && si.session !== "24x7";
-      if (available !== this.sessionAvailableFlag) {
+      const overnight = parseSessionSpec(si)?.overnight === true;
+      if (available !== this.sessionAvailableFlag || overnight !== this.sessionOvernightFlag) {
         this.sessionAvailableFlag = available;
+        this.sessionOvernightFlag = overnight;
         this.deps.onMarketChanged(this.id);
         this.pushSettingsSections();
       }
@@ -39049,16 +39248,41 @@ var ChartCell = class {
   /**
    * (Re)contribute this cell's settings-dialog sections: status line parts, the
    * per-cell fetch depth, the watermark toggle, and — only while the cell's symbol
-   * HAS sessions — the Trading session group (RTH/ETH switch + the pre/post-market
-   * shading colors) inside the Symbol tab. Bars/watermark/titles are persistable
-   * cell state; a depth-only reload is silent, so mark dirty here. Re-run whenever
-   * a gate changes (the dialog reads the sections on open).
+   * HAS sessions — the Trading session group (RTH/ETH switch + the session shading
+   * colors: pre/post-market on day-split tapes, one extended-hours swatch on
+   * overnight roll markets) inside the Symbol tab. Bars/watermark/titles are
+   * persistable cell state; a depth-only reload is silent, so mark dirty here.
+   * Re-run whenever a gate changes (the dialog reads the sections on open).
    */
   pushSettingsSections() {
     const chart = this.inner;
     if (!chart) return;
     const rth = "Regular hours (RTH)";
     const eth = "Extended hours (ETH)";
+    const shadeRows = this.sessionOvernightFlag ? [
+      {
+        kind: "color",
+        label: "Extended hours",
+        id: "extended-color",
+        get: () => this.sessionShadeColor("extendedColor"),
+        set: (v) => this.setSessionShadeColor("extendedColor", v)
+      }
+    ] : [
+      {
+        kind: "color",
+        label: "Pre-market",
+        id: "premarket-color",
+        get: () => this.sessionShadeColor("premarketColor"),
+        set: (v) => this.setSessionShadeColor("premarketColor", v)
+      },
+      {
+        kind: "color",
+        label: "Post-market",
+        id: "postmarket-color",
+        get: () => this.sessionShadeColor("postmarketColor"),
+        set: (v) => this.setSessionShadeColor("postmarketColor", v)
+      }
+    ];
     const sessionSection = {
       title: "Trading session",
       id: "trading-session",
@@ -39072,20 +39296,7 @@ var ChartCell = class {
           get: () => this.session === "extended" ? eth : rth,
           set: (v) => this.setSession(v === eth ? "extended" : "regular")
         },
-        {
-          kind: "color",
-          label: "Pre-market",
-          id: "premarket-color",
-          get: () => this.sessionShadeColor("premarketColor"),
-          set: (v) => this.setSessionShadeColor("premarketColor", v)
-        },
-        {
-          kind: "color",
-          label: "Post-market",
-          id: "postmarket-color",
-          get: () => this.sessionShadeColor("postmarketColor"),
-          set: (v) => this.setSessionShadeColor("postmarketColor", v)
-        }
+        ...shadeRows
       ]
     };
     const advanced = {
@@ -39329,6 +39540,10 @@ var ChartCell = class {
     this.deps.activate(this.id);
     this.inner?.renderer.focus();
   }
+  /** Raster of this cell's chart (same pixels as the PNG download), or null. */
+  screenshotCanvas() {
+    return this.inner?.renderer.screenshotCanvas() ?? null;
+  }
   /** Download this cell's chart as a PNG (named after its market). */
   downloadScreenshot() {
     const url = this.inner?.renderer.screenshot();
@@ -39941,6 +40156,54 @@ var SplitterLayer = class {
   }
 };
 
+// src/workspace/screenshot.ts
+function destRect(tile, dpr) {
+  const dx = Math.round(tile.x * dpr);
+  const dy = Math.round(tile.y * dpr);
+  return {
+    dx,
+    dy,
+    dw: Math.round((tile.x + tile.width) * dpr) - dx,
+    dh: Math.round((tile.y + tile.height) * dpr) - dy
+  };
+}
+function tilesFromCellRects(grid, cells) {
+  if (grid.width <= 0 || grid.height <= 0) return [];
+  const tiles = [];
+  for (const c of cells) {
+    if (c.hidden || c.width <= 0 || c.height <= 0) continue;
+    tiles.push({ x: c.left - grid.left, y: c.top - grid.top, width: c.width, height: c.height });
+  }
+  return tiles;
+}
+function compositeLayoutScreenshot(doc, frame, tiles) {
+  if (frame.width <= 0 || frame.height <= 0 || tiles.length === 0) return null;
+  const dpr = frame.dpr > 0 ? frame.dpr : 1;
+  const out = doc.createElement("canvas");
+  out.width = Math.max(1, Math.round(frame.width * dpr));
+  out.height = Math.max(1, Math.round(frame.height * dpr));
+  const ctx = out.getContext("2d");
+  if (!ctx) return null;
+  ctx.fillStyle = frame.gapColor;
+  ctx.fillRect(0, 0, out.width, out.height);
+  let painted = 0;
+  for (const tile of tiles) {
+    if (tile.width <= 0 || tile.height <= 0) continue;
+    const { dx, dy, dw, dh } = destRect(tile, dpr);
+    if (dw <= 0 || dh <= 0) continue;
+    ctx.drawImage(tile.source, dx, dy, dw, dh);
+    painted += 1;
+  }
+  if (painted === 0) return null;
+  return out.toDataURL("image/png");
+}
+function triggerPngDownload(doc, url, filename) {
+  const a = doc.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+}
+
 // src/workspace/VelaWorkspace.ts
 var DEFAULT_TIMEFRAMES = ["1", "5", "15", "30", "60", "240", "D", "W", "M"];
 var GAP_PX = 2;
@@ -40171,7 +40434,7 @@ var VelaWorkspace = class {
       ...picker ? { onIndicatorsClick: () => picker.open() } : {},
       onUndoClick: () => this.active.history.undo(),
       onRedoClick: () => this.active.history.redo(),
-      onScreenshotClick: () => this.active.downloadScreenshot(),
+      onScreenshotClick: () => this.downloadScreenshot(),
       onAlertsClick: (anchor) => this.openAlertsMenu(anchor),
       timeframe: "60",
       timeframes: opts.timeframes ?? DEFAULT_TIMEFRAMES,
@@ -40230,6 +40493,7 @@ var VelaWorkspace = class {
     this.dock.addBuiltIn({ id: "dataWindow", title: "Data window", icon: "datawindow", order: 10, panel: this.dataWindow, onChart: (c) => this.dataWindow.onChart(c) });
     this.dock.addBuiltIn({ id: "objects", title: "Object tree", icon: "objects", order: 20, panel: this.objectTree, onChart: (c) => this.objectTree.onChart(c) });
     this.dock.refresh();
+    if (boot?.panels) this.dock.applyState(boot.panels);
     this.root.appendChild(main);
     this.toastHost = new Toast(this.gridEl);
     const attribution = rendererDefaults().attribution;
@@ -40241,6 +40505,7 @@ var VelaWorkspace = class {
         bottom: `calc(var(--vela-bottom-gutter, ${TIME_AXIS_H4}px) + 10px)`,
         zIndex: "11"
       });
+      mark.dataset.velaScreenshot = "1";
       this.gridEl.appendChild(mark);
       this.attributionMark = mark;
     }
@@ -40377,6 +40642,56 @@ var VelaWorkspace = class {
   get chart() {
     return this.active.chart;
   }
+  /**
+   * PNG data URL of the visible layout: every live cell in its grid slot, or the
+   * maximized cell alone. Same pixels the screenshot button downloads. A single
+   * visible cell returns that cell's own chart export (the one-chart case).
+   */
+  screenshot() {
+    const cells = this.shotCells();
+    if (cells.length === 0) return null;
+    if (cells.length === 1) return cells[0].chart.renderer.screenshot();
+    return this.compositeLayoutShot(cells);
+  }
+  /** Download {@link screenshot} as a PNG. A multi-cell layout is named
+   *  `vela-layout.png`; one visible cell keeps `${symbol}-${timeframe}.png`. */
+  downloadScreenshot() {
+    const cells = this.shotCells();
+    if (cells.length <= 1) {
+      (cells[0] ?? this.active).downloadScreenshot();
+      return;
+    }
+    const url = this.compositeLayoutShot(cells);
+    if (!url) return;
+    triggerPngDownload(this.root.ownerDocument, url, "vela-layout.png");
+  }
+  /** Live cells the screenshot should include — maximized siblings are `hidden`. */
+  shotCells() {
+    return this.cells().filter((c) => c.host.style.visibility !== "hidden");
+  }
+  /** Place every cell's raster onto one canvas the size of the grid. */
+  compositeLayoutShot(cells) {
+    const gridEl = this.gridEl;
+    const grid = gridEl.getBoundingClientRect();
+    const win = gridEl.ownerDocument.defaultView;
+    const dpr = win?.devicePixelRatio ?? 1;
+    const gapColor = win ? win.getComputedStyle(gridEl).backgroundColor : "";
+    const tiles = [];
+    for (const cell of cells) {
+      const source = cell.screenshotCanvas();
+      if (!source) continue;
+      const r = cell.host.getBoundingClientRect();
+      const place = tilesFromCellRects(grid, [{ left: r.left, top: r.top, width: r.width, height: r.height }])[0];
+      if (!place) continue;
+      tiles.push({ source, ...place });
+    }
+    return compositeLayoutScreenshot(gridEl.ownerDocument, {
+      width: grid.width,
+      height: grid.height,
+      dpr,
+      gapColor: gapColor || "#000000"
+    }, tiles);
+  }
   setActiveCell(id) {
     if (id === this.activeId || this.destroyed) return;
     const prev2 = this.activeId;
@@ -41423,7 +41738,7 @@ var VelaWorkspace = class {
     this.moreDrawer ?? (this.moreDrawer = new MoreDrawer({
       host: this.root,
       ...has("undo-redo") ? { onUndo: () => this.active.history.undo(), onRedo: () => this.active.history.redo() } : {},
-      ...has("screenshot") ? { onScreenshot: this.screenshotOverride ? () => this.runOverride(this.screenshotOverride) : () => this.active.downloadScreenshot() } : {},
+      ...has("screenshot") ? { onScreenshot: this.screenshotOverride ? () => this.runOverride(this.screenshotOverride) : () => this.downloadScreenshot() } : {},
       canUndo: () => this.active.history.canUndo,
       canRedo: () => this.active.history.canRedo,
       priceStyles: () => priceStyleIds().map((id) => ({ id, label: priceStyleLabel(id), icon: priceStyleIcon(id) })),
@@ -41524,9 +41839,9 @@ var VelaWorkspace = class {
       this.keymap.register({
         id: "chart.screenshot",
         keys: "mod+alt+s",
-        label: ov ? ov.label : "Download a chart screenshot",
+        label: ov ? ov.label : "Download a screenshot of the layout",
         category: "Chart",
-        run: ov ? () => this.runOverride(ov) : () => this.active.downloadScreenshot()
+        run: ov ? () => this.runOverride(ov) : () => this.downloadScreenshot()
       });
     }
     this.keymap.register({ id: "chart.reset-view", keys: "alt+r", label: "Reset view (all history)", category: "Chart", run: () => this.active.chart.setVisibleRangePreset("ALL") });