@luxalgo/vela 0.6.13 → 0.6.15

package/dist/{chunk-JKGA36ZM.js → chunk-J5QIR2Z3.js}

@@ -1,6 +1,6 @@
-import { deserializeDrawing, chartTypes, rendererLayers, foldBaseModulation, registerChartType, rendererDefaults, getDrawingType, settingsRowVisible, normalizeSettingsRow, Magnifier, TextLabel, Callout, resetDrawingSettings, registerNativeIndicator, chartType, getNativeIndicator, nativeIndicatorDescriptors, drawingTypes, settingsRowValueKeys, formatDuration, RegressionChannel, FixedRangeVolumeProfile, SegmentDrawing, ArrowMark, GlyphStamp, RadialFib, FibSpiral, DedekindTessellation, MachFigure, GannSquare, FibRatios, MeasureBox, PositionTool, AnchoredVwap, PatternDrawing, Comment, PriceNote, Signpost, Note, PriceLabel, GANN_SQUARE_ARCS, magnifierTimeframeLabel, lineSegmentIntersection, DEFAULT_DRAWING_COLOR, MAGNIFIER_TIMEFRAME_OPTIONS, GLYPH_OPTIONS, STAMP_SIZE_OPTIONS, LINE_STYLE_OPTIONS, DEDEKIND_CURVATURE_OPTIONS, MACH_NUMBER_OPTIONS, MACH_WAVE_COUNT_OPTIONS, TEXT_SIZE_OPTIONS, createDrawing, inputVisible, tickerModifierIds, CalloutBase, DIRECTION_OPTIONS } from './chunk-F4M24ANM.js';
-import { themeTokens, Dialog, closeOpenPopovers, closeWidthPopover, fieldSection, buildFieldControl, fieldSeparator, fieldGrid, fieldRow, blendOver, splitColor, CalloutBubble, Menu, TextArea, Popover, NumberInput, buildColorPicker, isPopoverOpen, eventDismissedPopover, toggleSelectList, openPopoverTrigger, fieldGridColumns, FIELD_GAP_PX, STATIC_TOKENS } from './chunk-MHY7MVXH.js';
-import { icon, iconAt, withAlpha, WARNING, ACCENT, NEUTRAL, BEARISH, BULLISH, isDarkColor, SERIES_LINE, SLATE, CROSSHAIR, TRADE_EXIT, TRADE_SHORT, TRADE_LONG, overlayScrollbarCss, SLATE_DEEP, VALID, INVALID, FIELD_FOCUS_CSS, FIELD_FOCUS_RING, svg24, svg24Solid } from './chunk-KG4YT3TI.js';
+import { deserializeDrawing, chartTypes, rendererLayers, foldBaseModulation, registerChartType, rendererDefaults, getDrawingType, settingsRowVisible, normalizeSettingsRow, Magnifier, TextLabel, Callout, resetDrawingSettings, registerNativeIndicator, chartType, getNativeIndicator, nativeIndicatorDescriptors, drawingTypes, settingsRowValueKeys, formatDuration, RegressionChannel, FixedRangeVolumeProfile, SegmentDrawing, ArrowMark, GlyphStamp, RadialFib, FibSpiral, DedekindTessellation, MachFigure, GannSquare, FibRatios, MeasureBox, PositionTool, AnchoredVwap, PatternDrawing, Comment, PriceNote, Signpost, Note, PriceLabel, GANN_SQUARE_ARCS, magnifierTimeframeLabel, lineSegmentIntersection, DEFAULT_DRAWING_COLOR, MAGNIFIER_TIMEFRAME_OPTIONS, GLYPH_OPTIONS, STAMP_SIZE_OPTIONS, LINE_STYLE_OPTIONS, DEDEKIND_CURVATURE_OPTIONS, MACH_NUMBER_OPTIONS, MACH_WAVE_COUNT_OPTIONS, TEXT_SIZE_OPTIONS, createDrawing, inputVisible, tickerModifierIds, CalloutBase, DIRECTION_OPTIONS } from './chunk-32A7KHFM.js';
+import { themeTokens, Dialog, closeOpenPopovers, closeWidthPopover, fieldSection, buildFieldControl, fieldSeparator, fieldGrid, fieldRow, blendOver, splitColor, CalloutBubble, Menu, TextArea, Popover, NumberInput, buildColorPicker, isPopoverOpen, eventDismissedPopover, toggleSelectList, openPopoverTrigger, fieldGridColumns, FIELD_GAP_PX, STATIC_TOKENS } from './chunk-MWDNPGU3.js';
+import { icon, iconAt, withAlpha, WARNING, ACCENT, NEUTRAL, BEARISH, BULLISH, isDarkColor, SERIES_LINE, CHIP_PLATE, CROSSHAIR, TRADE_EXIT, TRADE_SHORT, TRADE_LONG, overlayScrollbarCss, SLATE_DEEP, VALID, INVALID, SLATE, FIELD_FOCUS_CSS, FIELD_FOCUS_RING, svg24, svg24Solid } from './chunk-6DPAYEGO.js';
 
 // src/core/events/EventBus.ts
 var TypedEventBus = class {
@@ -468,6 +468,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
@@ -5080,6 +5089,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 open = 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;
+        open = 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, lastIdx: i, close: b.close });
+  }
+  flush();
+  return out;
+}
 
 // src/renderers/native/core/chartConfig.ts
 var CHART_CONFIG_VERSION = 1;
@@ -5090,6 +5159,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: {},
@@ -5098,7 +5168,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,
@@ -5121,7 +5191,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"];
@@ -5350,7 +5420,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,
@@ -6335,44 +6406,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") {
@@ -7670,13 +7716,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) {
@@ -8215,50 +8263,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") {
@@ -9282,6 +9303,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 [];
@@ -9429,7 +9476,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];
@@ -9471,32 +9525,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() {
@@ -9943,7 +9971,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;
@@ -9991,7 +10019,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
@@ -10024,11 +10052,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) {
@@ -15807,6 +15830,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;
@@ -15837,21 +15863,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);
@@ -16084,6 +16111,7 @@ function createCustomMark(doc, html, background) {
   });
   el.style.color = attributionMarkColor(background);
   el.innerHTML = html;
+  el.dataset.velaScreenshot = "1";
   return el;
 }
 function createAttributionMark(doc, background) {
@@ -16102,6 +16130,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");
@@ -17106,7 +17135,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 }
     };
   }
   /**
@@ -17188,7 +17217,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;
@@ -17410,9 +17439,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();
@@ -17440,7 +17470,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
@@ -18835,7 +18868,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}`);
@@ -19722,7 +19755,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}`;
 }
@@ -19753,7 +19786,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));
@@ -20155,6 +20188,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 {
@@ -20430,6 +20464,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;

package/dist/{chunk-MHY7MVXH.js → chunk-MWDNPGU3.js}

@@ -1,4 +1,4 @@
-import { overlayScrollbarCss, injectStyles, isDarkColor, mix, HIGHLIGHT, ACCENT_BRIGHT, ACCENT, withAlpha, iconAt, iconEl, BULLISH, BEARISH, WARNING, NEUTRAL } from './chunk-KG4YT3TI.js';
+import { overlayScrollbarCss, injectStyles, isDarkColor, mix, HIGHLIGHT, ACCENT_BRIGHT, ACCENT, withAlpha, iconAt, iconEl, BULLISH, BEARISH, WARNING, NEUTRAL } from './chunk-6DPAYEGO.js';
 import { VanillaMachine, normalizeProps, spreadProps } from '@zag-js/vanilla';
 export { normalizeProps, spreadProps } from '@zag-js/vanilla';
 import * as menu from '@zag-js/menu';
@@ -472,6 +472,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; }
 `;

package/dist/{chunk-G77Y7LK2.js → chunk-MWS4CUJL.js}

@@ -1,5 +1,5 @@
-import { normalizeProps, nextUid, runMachine, spreadProps } from './chunk-MHY7MVXH.js';
-import { injectStyles } from './chunk-KG4YT3TI.js';
+import { normalizeProps, nextUid, runMachine, spreadProps } from './chunk-MWDNPGU3.js';
+import { injectStyles } from './chunk-6DPAYEGO.js';
 import * as tooltip from '@zag-js/tooltip';
 import * as dialog from '@zag-js/dialog';
 

package/dist/{contributions-37nni40G.d.ts → contributions-h5BzEiV2.d.ts}

@@ -1,5 +1,5 @@
-import { u as Millis, ai as InputSchema, ag as IndicatorMeta, P as PriceStyle, O as OHLCV, I as InputValue, l as IndicatorModel, k as MoveTarget, au as PaneAxis, aH as SeriesSpec, ae as Fill, B as Background, az as PriceLine, a1 as DrawingLine, Z as DrawingBox, a0 as DrawingLabel, a5 as DrawingPolyline, a2 as DrawingLinefill, aa as DrawingTable, h as IndicatorStatus, a as VisibleRange, c as VelaTheme, S as SerializedDrawing, w as DrawingTypeKey, v as SnapMode, a3 as DrawingMode, e as IChartRenderer, R as RendererCapabilities, o as LegendActionView, p as LegendCalloutView, U as Unsubscribe, C as CrosshairEvent, A as AxisLongPressEvent, s as DataWindowReadout, n as SymbolPickerFn, aW as PaneInfo, ad as DrawingsOption, a7 as DrawingSeriesGateway, D as Drawing, b as VelaOptions, y as AddIndicatorOptions, at as MarketSwitch, as as MarketSnapshot, V as VisibleRangePreset, T as ThemeName } from './options-CYS5Wmlx.js';
-import { S as SymbolInfo, B as BarRange, M as MarketDataFeed, D as DataProvider, P as ProviderInfo, a as SymbolDescriptor, b as ProviderCapabilities } from './DataProvider-DhzstpQb.js';
+import { u as Millis, ai as InputSchema, ag as IndicatorMeta, P as PriceStyle, O as OHLCV, I as InputValue, l as IndicatorModel, k as MoveTarget, au as PaneAxis, aH as SeriesSpec, ae as Fill, B as Background, az as PriceLine, a1 as DrawingLine, Z as DrawingBox, a0 as DrawingLabel, a5 as DrawingPolyline, a2 as DrawingLinefill, aa as DrawingTable, h as IndicatorStatus, a as VisibleRange, c as VelaTheme, S as SerializedDrawing, w as DrawingTypeKey, v as SnapMode, a3 as DrawingMode, e as IChartRenderer, R as RendererCapabilities, o as LegendActionView, p as LegendCalloutView, U as Unsubscribe, C as CrosshairEvent, A as AxisLongPressEvent, s as DataWindowReadout, n as SymbolPickerFn, aW as PaneInfo, ad as DrawingsOption, a7 as DrawingSeriesGateway, D as Drawing, b as VelaOptions, y as AddIndicatorOptions, at as MarketSwitch, as as MarketSnapshot, V as VisibleRangePreset, T as ThemeName } from './options-bdSAtp7y.js';
+import { S as SymbolInfo, B as BarRange, M as MarketDataFeed, D as DataProvider, P as ProviderInfo, a as SymbolDescriptor, b as ProviderCapabilities } from './DataProvider-XLdJB86x.js';
 
 /**
  * A strategy's broker state at ONE bar — the flat summary a host reads while a script
@@ -916,6 +916,12 @@ declare class RendererControl {
      * doesn't support it (warns). DOM overlays (tables, legend) are not included.
      */
     screenshot(): string | 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(): HTMLCanvasElement | null;
     /**
      * The active renderer's full cosmetic config as a serializable, versioned JSON
      * document — persist it (templates, saved settings) and feed it back to
@@ -1624,6 +1630,11 @@ interface SidePanelDescriptor {
     resizable?: boolean;
     minWidth?: number;
     maxWidth?: number;
+    /** Float over the chart's right edge instead of docking beside it: the chart keeps its
+     *  width and layout, and the panel covers its right-hand part (default false — a docked
+     *  column that shrinks the chart). For panels wide enough that a column would crush
+     *  the plot. The dock stays exclusive either way. */
+    overlay?: boolean;
     mount(ctx: WidgetContext, body: HTMLElement, header: SidePanelHeader): SidePanelHandle | void;
 }
 /** One panel toggle, as the shell's chrome consumes it (data, never DOM). */

package/dist/{contributions-lPojhTxI.d.cts → contributions-x7iamlnd.d.cts}

@@ -1,5 +1,5 @@
-import { u as Millis, ai as InputSchema, ag as IndicatorMeta, P as PriceStyle, O as OHLCV, I as InputValue, l as IndicatorModel, k as MoveTarget, au as PaneAxis, aH as SeriesSpec, ae as Fill, B as Background, az as PriceLine, a1 as DrawingLine, Z as DrawingBox, a0 as DrawingLabel, a5 as DrawingPolyline, a2 as DrawingLinefill, aa as DrawingTable, h as IndicatorStatus, a as VisibleRange, c as VelaTheme, S as SerializedDrawing, w as DrawingTypeKey, v as SnapMode, a3 as DrawingMode, e as IChartRenderer, R as RendererCapabilities, o as LegendActionView, p as LegendCalloutView, U as Unsubscribe, C as CrosshairEvent, A as AxisLongPressEvent, s as DataWindowReadout, n as SymbolPickerFn, aW as PaneInfo, ad as DrawingsOption, a7 as DrawingSeriesGateway, D as Drawing, b as VelaOptions, y as AddIndicatorOptions, at as MarketSwitch, as as MarketSnapshot, V as VisibleRangePreset, T as ThemeName } from './options-CYS5Wmlx.cjs';
-import { S as SymbolInfo, B as BarRange, M as MarketDataFeed, D as DataProvider, P as ProviderInfo, a as SymbolDescriptor, b as ProviderCapabilities } from './DataProvider-DlMtrwqM.cjs';
+import { u as Millis, ai as InputSchema, ag as IndicatorMeta, P as PriceStyle, O as OHLCV, I as InputValue, l as IndicatorModel, k as MoveTarget, au as PaneAxis, aH as SeriesSpec, ae as Fill, B as Background, az as PriceLine, a1 as DrawingLine, Z as DrawingBox, a0 as DrawingLabel, a5 as DrawingPolyline, a2 as DrawingLinefill, aa as DrawingTable, h as IndicatorStatus, a as VisibleRange, c as VelaTheme, S as SerializedDrawing, w as DrawingTypeKey, v as SnapMode, a3 as DrawingMode, e as IChartRenderer, R as RendererCapabilities, o as LegendActionView, p as LegendCalloutView, U as Unsubscribe, C as CrosshairEvent, A as AxisLongPressEvent, s as DataWindowReadout, n as SymbolPickerFn, aW as PaneInfo, ad as DrawingsOption, a7 as DrawingSeriesGateway, D as Drawing, b as VelaOptions, y as AddIndicatorOptions, at as MarketSwitch, as as MarketSnapshot, V as VisibleRangePreset, T as ThemeName } from './options-bdSAtp7y.cjs';
+import { S as SymbolInfo, B as BarRange, M as MarketDataFeed, D as DataProvider, P as ProviderInfo, a as SymbolDescriptor, b as ProviderCapabilities } from './DataProvider-xH2VBcFT.cjs';
 
 /**
  * A strategy's broker state at ONE bar — the flat summary a host reads while a script
@@ -916,6 +916,12 @@ declare class RendererControl {
      * doesn't support it (warns). DOM overlays (tables, legend) are not included.
      */
     screenshot(): string | 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(): HTMLCanvasElement | null;
     /**
      * The active renderer's full cosmetic config as a serializable, versioned JSON
      * document — persist it (templates, saved settings) and feed it back to
@@ -1624,6 +1630,11 @@ interface SidePanelDescriptor {
     resizable?: boolean;
     minWidth?: number;
     maxWidth?: number;
+    /** Float over the chart's right edge instead of docking beside it: the chart keeps its
+     *  width and layout, and the panel covers its right-hand part (default false — a docked
+     *  column that shrinks the chart). For panels wide enough that a column would crush
+     *  the plot. The dock stays exclusive either way. */
+    overlay?: boolean;
     mount(ctx: WidgetContext, body: HTMLElement, header: SidePanelHeader): SidePanelHandle | void;
 }
 /** One panel toggle, as the shell's chrome consumes it (data, never DOM). */