@luxalgo/vela 0.6.13 → 0.6.15

package/dist/ui.js

@@ -1,3 +1,3 @@
-export { Drawer, KeymapManager, Tooltip, drawerController, tooltipController } from './chunk-G77Y7LK2.js';
-export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, ColorField, Dialog, FIELD_GAP_PX, GlyphSelect, Menu, NumberInput, Popover, Select, Switch, TextArea, TextField, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, calloutPanelRows, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, closesPanel, colorField, colorPickerController, combineColor, decorateSelectScroll, dialogController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, insetRect, intersectRects, isPopoverOpen, lineWidthGlyph, menuController, nextUid, normalizeProps, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, spreadProps, switchController, textAreaController, textFieldController, toggleSelectList, transparencyChecker, viewportRect, widthField, widthFieldOptions } from './chunk-MHY7MVXH.js';
-export { FIELD_FOCUS_CSS, FIELD_FOCUS_RING, iconEl, iconMarkup, injectStyles, overlayScrollbarCss, registerIcon, svg16, svg24, withAlpha } from './chunk-KG4YT3TI.js';
+export { Drawer, KeymapManager, Tooltip, drawerController, tooltipController } from './chunk-MWS4CUJL.js';
+export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, ColorField, Dialog, FIELD_GAP_PX, GlyphSelect, Menu, NumberInput, Popover, Select, Switch, TextArea, TextField, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, calloutPanelRows, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, closesPanel, colorField, colorPickerController, combineColor, decorateSelectScroll, dialogController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, insetRect, intersectRects, isPopoverOpen, lineWidthGlyph, menuController, nextUid, normalizeProps, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, spreadProps, switchController, textAreaController, textFieldController, toggleSelectList, transparencyChecker, viewportRect, widthField, widthFieldOptions } from './chunk-MWDNPGU3.js';
+export { FIELD_FOCUS_CSS, FIELD_FOCUS_RING, iconEl, iconMarkup, injectStyles, overlayScrollbarCss, registerIcon, svg16, svg24, withAlpha } from './chunk-6DPAYEGO.js';

package/dist/vela.global.js

@@ -276,6 +276,7 @@ var Vela = (function (exports) {
   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";
@@ -503,6 +504,10 @@ var Vela = (function (exports) {
     "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",
@@ -516,6 +521,8 @@ var Vela = (function (exports) {
   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"/>'));
@@ -7578,6 +7585,7 @@ var Vela = (function (exports) {
   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 {
@@ -7853,6 +7861,7 @@ var Vela = (function (exports) {
         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;
@@ -9270,6 +9279,15 @@ var Vela = (function (exports) {
       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
@@ -17139,6 +17157,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; }
 `;
@@ -22759,6 +22783,66 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       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 prev3 = merged[merged.length - 1];
+        const next2 = intervals[k];
+        if (Math.abs(yOf(prev3.hi) - yOf(next2.lo)) < 1) {
+          prev3.hi = next2.hi;
+          if (next2.headIdx < prev3.headIdx) {
+            prev3.headIdx = next2.headIdx;
+            prev3.headTime = next2.headTime;
+            prev3.open = next2.open;
+          }
+          if (next2.lastIdx > prev3.lastIdx) {
+            prev3.lastIdx = next2.lastIdx;
+            prev3.close = next2.close;
+          }
+        } else {
+          merged.push(next2);
+        }
+      }
+      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/core/chartConfig.ts
   var CHART_CONFIG_VERSION = 1;
@@ -22769,6 +22853,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
   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: {},
@@ -22777,7 +22862,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       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,
@@ -22800,7 +22885,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
         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"];
@@ -23029,7 +23114,8 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       },
       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,
@@ -24014,44 +24100,19 @@ void main() {
       }
     }
     /**
-     * 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") {
@@ -25349,13 +25410,15 @@ void main() {
       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) {
@@ -25894,50 +25957,23 @@ void main() {
       }
     }
     /**
-     * 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") {
@@ -26961,6 +26997,32 @@ void main() {
     }
   };
 
+  // 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 parts3 = dtf.formatToParts(new Date(ms));
+      const get = (t) => Number(parts3.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(min2, max2, target = 6) {
     if (!(max2 > min2) || !Number.isFinite(min2) || !Number.isFinite(max2)) return [];
@@ -27108,7 +27170,14 @@ void main() {
     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];
@@ -27150,32 +27219,6 @@ void main() {
     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 parts3 = dtf.formatToParts(new Date(ms));
-      const get = (t) => Number(parts3.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() {
@@ -27622,7 +27665,7 @@ void main() {
         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;
@@ -27670,7 +27713,7 @@ void main() {
           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
@@ -27703,11 +27746,6 @@ void main() {
     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/core/timezones.ts
   var TIMEZONES = [
@@ -34196,6 +34234,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     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;
@@ -34226,21 +34267,22 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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);
@@ -34499,6 +34541,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     });
     el.style.color = attributionMarkColor(background);
     el.innerHTML = html;
+    el.dataset.velaScreenshot = "1";
     return el;
   }
   function createAttributionMark(doc, background) {
@@ -34517,6 +34560,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       cursor: "pointer"
     });
     applyAttributionMarkTheme(a, background);
+    a.dataset.velaScreenshot = "1";
     const symbol = doc.createElement("span");
     symbol.className = "vela-attr-symbol";
     symbol.setAttribute("aria-hidden", "true");
@@ -35521,7 +35565,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           };
         })(),
         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 }
       };
     }
     /**
@@ -35603,7 +35647,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         width: next2.baseline.width,
         baselineLevel: next2.baseline.baselineLevel
       };
-      s.sessions = { premarketColor: next2.sessions.premarketColor, postmarketColor: next2.sessions.postmarketColor };
+      s.sessions = { premarketColor: next2.sessions.premarketColor, postmarketColor: next2.sessions.postmarketColor, extendedColor: next2.sessions.extendedColor };
       this.setPriceStyle(next2.series.style);
       this.scene.candleOverride = candleOverrideFor(this.scene.priceStyle, s.chartTypes);
       this.scene.baselineValue = next2.series.baseline;
@@ -35825,9 +35869,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
      * 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();
@@ -35855,7 +35900,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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
@@ -37250,7 +37298,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const pricePane = this.dataWindowPricePane();
       const ohlc = this.dataWindowOHLC(bar, pricePane);
       const parts3 = [];
-      if (bar) parts3.push(formatStamp2(bar.time, this.scene.timezone));
+      if (bar) parts3.push(formatStamp(bar.time, this.scene.timezone));
       if (ohlc) parts3.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) parts3.push(`${row.label} ${row.value}`);
@@ -38137,7 +38185,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       time: `${p(d.getUTCHours())}:${p(d.getUTCMinutes())}`
     };
   }
-  function formatStamp2(ms, timeZone) {
+  function formatStamp(ms, timeZone) {
     const { date, time } = formatStampParts(ms, timeZone);
     return `${date} ${time}`;
   }
@@ -38168,7 +38216,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       }
       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));
@@ -40076,6 +40124,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   exports.BarStore = BarStore;
   exports.BinanceProvider = BinanceProvider;
   exports.CATEGORICAL = CATEGORICAL;
+  exports.CHIP_PLATE = CHIP_PLATE;
   exports.CROSSHAIR = CROSSHAIR;
   exports.CachingDataFeed = CachingDataFeed;
   exports.CoinbaseProvider = CoinbaseProvider;