@luxalgo/vela 0.6.14 → 0.6.16

package/dist/{chunk-64TF7JAJ.js → chunk-SEOO6YG7.js}

@@ -1,8 +1,8 @@
-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-N2Q5EEFH.js';
-import { chartType, resolveTopbarComposition, topbarActionOverride, TOPBAR_BUILTIN_IDS, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, symbolRanking, resolveEngines, legendActionsProviderFor, legendCalloutsProviderFor, statePersistenceHandlers, topbarHas, rendererDefaults, widgetAttachments, getDrawingType, inputDeltas } from './chunk-F4M24ANM.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, iconAt, SESSION_OFF, SESSION_POST, SESSION_PRE, icon, categoricalColor } from './chunk-KG4YT3TI.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-GIJYO4LO.js';
+import { chartType, resolveTopbarComposition, topbarActionOverride, TOPBAR_BUILTIN_IDS, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, symbolRanking, resolveEngines, legendActionsProviderFor, legendCalloutsProviderFor, statePersistenceHandlers, topbarHas, rendererDefaults, widgetAttachments, getDrawingType, inputDeltas } from './chunk-I77F2SVE.js';
+import { Tooltip, KeymapManager, isEditableTarget, Drawer } from './chunk-Q3TFJNJW.js';
+import { Menu, Dialog, CalloutBubble, applyPlotOverlayTokens, ensureUIHost } from './chunk-MGU3USTP.js';
+import { registerIcon, svg16, injectStyles, iconEl, iconMarkup, iconAt, SESSION_OFF, SESSION_POST, SESSION_PRE, icon, categoricalColor } from './chunk-6DPAYEGO.js';
 import { baseOf } from './chunk-W4EJWLEO.js';
 
 // src/widget/timeframe.ts
@@ -2784,6 +2784,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;
@@ -2806,7 +2808,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,
@@ -2854,7 +2857,8 @@ var PanelDock = class {
     const open = this.openId;
     if (open) out.open = open;
     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
@@ -2862,7 +2866,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;
@@ -2872,6 +2877,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;
   }
@@ -2885,6 +2892,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 = (open) => {
       if (open) {
         for (const other of this.entries) if (other !== entry) other.panel.toggle(false);
@@ -2898,6 +2906,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();
   }
@@ -2986,6 +2999,12 @@ function filterSymbols(list, query, limit = 100, top = TOP_TICKERS) {
 }
 var STYLE_ID6 = "vela-widget-symbolpicker";
 var CSS6 = `
+/* The dialog body is flush (a flex column): search + market tabs are a fixed head
+   and the result list is the ONLY scroller, in both layouts. A sticky head over a
+   scrolling padded body is not an option \u2014 browsers pin sticky boxes to the
+   scroller's content box, so the head lands one padding below the top and covers
+   the first row. */
+.vela-sp-head { flex: none; padding: var(--vela-space-4) var(--vela-space-4) 0; }
 .vela-sp-searchrow {
     display: flex;
     align-items: center;
@@ -3005,15 +3024,18 @@ var CSS6 = `
     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. */
+   overflowing the body, and the result list stops capping itself \u2014 it fills the
+   rest of the screen. The bottom inset (+ safe area) is the kit's: every mobile
+   dialog body carries it, flush or not, so the list adds none of its own. */
 [data-layout='mobile'] .vela-sp-tabs { overflow-x: auto; scrollbar-width: none; gap: 6px; }
 [data-layout='mobile'] .vela-sp-tabs::-webkit-scrollbar { display: none; }
 [data-layout='mobile'] .vela-sp-tab { flex: none; padding: 7px 10px; }
-[data-layout='mobile'] .vela-sp-list { max-height: none; }
+[data-layout='mobile'] .vela-sp-list { flex: 1 1 auto; max-height: none; margin-bottom: 0; }
 .vela-sp-tab {
     all: unset;
     padding: 3px 10px;
@@ -3025,7 +3047,12 @@ var CSS6 = `
 }
 .vela-sp-tab:hover { color: var(--vela-fg); }
 .vela-sp-tab[data-active] { background: var(--vela-selected-bg); color: var(--vela-selected-fg); }
-.vela-sp-list { margin-top: var(--vela-space-2); max-height: 46vh; overflow: auto; }
+.vela-sp-list {
+    min-height: 0;
+    margin: var(--vela-space-2) var(--vela-space-4) var(--vela-space-4);
+    max-height: 46vh;
+    overflow: auto;
+}
 .vela-sp-list::-webkit-scrollbar { width: 8px; }
 .vela-sp-list::-webkit-scrollbar-thumb {
     background: var(--vela-scroll);
@@ -3055,7 +3082,7 @@ var CSS6 = `
     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;
@@ -3118,6 +3145,8 @@ var SymbolPicker = class {
     searchRow.append(iconEl("search", doc), this.input);
     this.tabs = doc.createElement("div");
     this.tabs.className = "vela-sp-tabs";
+    const head = doc.createElement("div");
+    head.className = "vela-sp-head";
     for (const t of ["All", "Stocks", "ETFs", "Crypto", "Futures", "Forex", "Commodities"]) {
       const b = doc.createElement("button");
       b.className = "vela-sp-tab";
@@ -3131,6 +3160,7 @@ var SymbolPicker = class {
       });
       this.tabs.appendChild(b);
     }
+    head.append(searchRow, this.tabs);
     this.list = doc.createElement("div");
     this.list.className = "vela-sp-list";
     this.list.addEventListener("scroll", () => {
@@ -3143,21 +3173,33 @@ var SymbolPicker = class {
       title: "Symbol Search",
       host: opts.host,
       closeOnInteractOutside: true,
-      content: (body) => body.append(searchRow, this.tabs, this.list),
+      flush: true,
+      content: (body) => body.append(head, this.list),
       onOpenChange: (open) => {
         if (open) {
-          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?.(open);
       }
     });
-    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);
@@ -3889,7 +3931,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;
@@ -4151,6 +4197,7 @@ var MARKET_LABELS = {
   open: "Market Open",
   pre: "Pre-Market",
   post: "Post-Market",
+  extended: "Extended Hours",
   closed: "Market Closed",
   holiday: "Market Holiday"
 };
@@ -4158,6 +4205,7 @@ var MARKET_INKS = {
   open: "var(--vela-up)",
   pre: SESSION_PRE,
   post: SESSION_POST,
+  extended: SESSION_POST,
   closed: SESSION_OFF,
   holiday: SESSION_OFF
 };
@@ -4781,118 +4829,17 @@ var ChartContextMenu = class {
 // src/core/options.ts
 var normalizeSession = (v) => v === "regular" || v === "extended" ? v : void 0;
 
-// 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_MS = 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_MS);
-      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_MS = 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) {
@@ -4902,9 +4849,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) {
@@ -4940,27 +4891,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_MS; cursor < to + DAY_MS; cursor += DAY_MS) {
     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_MS;
 var SessionShadingTracker = class {
@@ -5015,7 +4987,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);
@@ -5029,6 +5001,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_MS = 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_MS);
+      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/glide.ts
 var MIN_SPAN_MS = 6e4;
 var FOLLOW = 0.25;
@@ -5394,7 +5472,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
@@ -5403,8 +5484,8 @@ var ChartCell = class {
     /** The volume auto-add rides the cell's first candles (`load:end`); until then the
      *  registry can't show it and the dehydrated ledger reports the INTENT instead. */
     this.volumeMayBePending = true;
-    /** Sync mirror of the chart's present native types — the removal handler diffs
-     *  against it to identify (and record) whichever type was just removed. */
+    /** Sync mirror of the chart's native instances (id + type) — the removal handler
+     *  looks the removed id up here to learn which type an undo must re-add. */
     this.presentNatives = [];
     this.rangeBars = 0;
     this.pendingRange = null;
@@ -5576,15 +5657,18 @@ var ChartCell = class {
           redo: () => this.dropInstance(snapshot)
         });
       } else {
-        const now = this.inner?.presentNativeIndicators() ?? [];
-        for (const type of this.presentNatives.filter((t) => !now.includes(t))) {
+        const gone = this.presentNatives.find((n) => n.id === id2);
+        if (gone) {
+          const { type } = gone;
+          let revived = null;
           this.history.push({
             undo: () => {
-              this.inner?.addNativeIndicator(type);
+              revived = this.inner?.addNativeIndicator(type) ?? null;
               this.refreshNativeCatalog();
             },
             redo: () => {
-              this.inner?.addNativeIndicator(type).remove();
+              revived?.remove();
+              revived = null;
               this.refreshNativeCatalog();
             }
           });
@@ -5647,8 +5731,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();
       }
@@ -5682,16 +5768,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",
@@ -5705,20 +5816,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 = {
@@ -5875,9 +5973,9 @@ var ChartCell = class {
     const live = this.inner?.renderer.get("priceStyle");
     return typeof live === "string" ? live : this.state.priceStyle ?? "candles";
   }
-  /** Manifest instances + present natives — the topbar indicator count. */
+  /** Manifest instances + native instances — the topbar indicator count. */
   get indicatorCount() {
-    return this.instances.length + this.nativeCatalog.filter((n) => n.present).length;
+    return this.instances.length + (this.inner ? this.nativeHandles().length : this.presentNatives.length);
   }
   /** 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
@@ -5962,6 +6060,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();
@@ -6005,13 +6107,15 @@ var ChartCell = class {
     if (!chart) return;
     this.volumeIntent = led.natives.includes("volume");
     this.history.silently(() => {
-      const present = chart.presentNativeIndicators();
-      for (const type of led.natives) {
-        if (!present.includes(type)) chart.addNativeIndicator(type);
-      }
-      for (const type of present) {
-        if (!led.natives.includes(type)) chart.addNativeIndicator(type).remove();
+      const owed = /* @__PURE__ */ new Map();
+      for (const type of led.natives) owed.set(type, (owed.get(type) ?? 0) + 1);
+      for (const h of this.nativeHandles()) {
+        const type = h.nativeType;
+        const n = owed.get(type) ?? 0;
+        if (n > 0) owed.set(type, n - 1);
+        else h.remove();
       }
+      for (const [type, n] of owed) for (let i = 0; i < n; i++) chart.addNativeIndicator(type);
       for (const it of [...this.instances]) this.dropInstance(it);
       if (this.manifest.length > 0) {
         for (const item of led.manifest) {
@@ -6029,34 +6133,42 @@ var ChartCell = class {
     this.syncPresentNatives();
     this.refreshNativeCatalog();
   }
-  /** The picker's library rows: supported natives first, then the manifest. */
+  /** The supported natives in picker order: A→Z by title — registration order follows
+   *  the catalog's families, which is meaningless to the reader. This is the library
+   *  index space the picker hands back, so `libraryRows` and `addFromLibrary` MUST both
+   *  read it — indexing the unsorted catalog on add would land on a different study. */
+  supportedNatives() {
+    return this.nativeCatalog.filter((n) => n.supported).sort((a, b) => a.title.localeCompare(b.title, "en", { sensitivity: "base" }));
+  }
+  /** The picker's library rows: supported natives first (see {@link supportedNatives}),
+   *  then the manifest in the host's own order. */
   libraryRows() {
     return [
-      ...this.nativeCatalog.filter((n) => n.supported).map((n) => ({ name: n.title, category: "Vela", native: true, nativeType: n.type, beta: n.beta })),
+      ...this.supportedNatives().map((n) => ({ name: n.title, category: "Vela", native: true, nativeType: n.type, beta: n.beta })),
       ...this.manifest.map((e) => ({ name: e.name, language: e.language, category: e.category }))
     ];
   }
-  /** The picker's on-chart rows: present natives first, then live instances. */
+  /** The picker's on-chart rows: native instances first, then live script instances. */
   onChartRows() {
     return [
-      ...this.nativeCatalog.filter((n) => n.present).map((n) => ({ name: n.title, native: true, nativeType: n.type })),
+      ...this.nativeHandles().map((h) => ({ name: h.title, native: true, nativeType: h.nativeType })),
       ...this.instances.map((it) => ({ name: it.entry.name, language: it.entry.language }))
     ];
   }
   /** Add by picker LIBRARY index (natives precede the manifest — mirrors libraryRows). */
   addFromLibrary(index) {
-    const natives = this.nativeCatalog.filter((n) => n.supported);
+    const natives = this.supportedNatives();
     if (index < natives.length) this.addNative(natives[index].type);
     else {
       const entry = this.manifest[index - natives.length];
       if (entry) this.addManifestInstance(entry);
     }
   }
-  /** Remove by picker ON-CHART index (present natives precede instances). */
+  /** Remove by picker ON-CHART index (native instances precede script instances — mirrors onChartRows). */
   removeFromChart(index) {
-    const present = this.nativeCatalog.filter((n) => n.present);
-    if (index < present.length) this.removeNative(present[index].type);
-    else this.removeInstance(index - present.length);
+    const natives = this.nativeHandles();
+    if (index < natives.length) this.removeNative(natives[index]);
+    else this.removeInstance(index - natives.length);
   }
   /**
    * Add a script indicator through the PUBLIC seam (`ctx.addIndicator`) — same undo/
@@ -6116,30 +6228,42 @@ var ChartCell = class {
     it.handle = null;
     this.deps.onIndicatorsChanged(this.id);
   }
-  /** Add a native indicator (single-instance per type — the core dedupes). */
+  /** Add a native indicator. A multi-instance type gets a fresh instance every time; a
+   *  single-instance type already on the chart hands back its existing one — nothing
+   *  changed, so nothing enters the undo timeline. */
   addNative(type) {
-    this.inner?.addNativeIndicator(type);
+    const chart = this.inner;
+    if (!chart) return;
+    const before = new Set(chart.indicators().map((h) => h.id));
+    let added = chart.addNativeIndicator(type);
     this.syncPresentNatives();
     this.refreshNativeCatalog();
+    if (before.has(added.id)) return;
     this.history.push({
       undo: () => {
-        this.inner?.addNativeIndicator(type).remove();
+        added?.remove();
+        added = null;
         this.refreshNativeCatalog();
       },
       redo: () => {
-        this.inner?.addNativeIndicator(type);
+        added = this.inner?.addNativeIndicator(type) ?? null;
         this.refreshNativeCatalog();
       }
     });
   }
-  removeNative(type) {
-    this.inner?.addNativeIndicator(type).remove();
+  removeNative(handle) {
+    handle.remove();
     this.refreshNativeCatalog();
   }
-  /** Sync mirror of the chart's present native types — the removal handler diffs
-   *  against it to identify (and record) whichever type was just removed. */
+  /** The chart's native instances, insertion order — the picker's on-chart rows and
+   *  the removal index space (script instances follow them). */
+  nativeHandles() {
+    return this.inner?.indicators().filter((h) => h.nativeType !== void 0) ?? [];
+  }
+  /** Sync mirror of the chart's native instances — the removal handler looks the
+   *  removed id up here (the registry has already forgotten it) to record its type. */
   syncPresentNatives() {
-    this.presentNatives = this.inner?.presentNativeIndicators() ?? [];
+    this.presentNatives = this.nativeHandles().map((h) => ({ id: h.id, type: h.nativeType }));
   }
   /** Refresh the native catalog (supported/present flags) for this cell's market. */
   refreshNativeCatalog() {
@@ -7819,6 +7943,54 @@ function buildContext(host) {
   };
 }
 
+// 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;
@@ -8049,7 +8221,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,
@@ -8108,6 +8280,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;
@@ -8119,6 +8292,7 @@ var VelaWorkspace = class {
         bottom: `calc(var(--vela-bottom-gutter, ${TIME_AXIS_H3}px) + 10px)`,
         zIndex: "11"
       });
+      mark.dataset.velaScreenshot = "1";
       this.gridEl.appendChild(mark);
       this.attributionMark = mark;
     }
@@ -8255,6 +8429,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 prev = this.activeId;
@@ -9301,7 +9525,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) })),
@@ -9402,9 +9626,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") });