@luxalgo/vela 0.7.0 → 0.7.1

package/dist/{chunk-IFJJPXSV.js → chunk-BFA32GOU.js}

@@ -1,6 +1,21 @@
 import { svg24, NEUTRAL, BEARISH, WARNING, BULLISH, INFO, ACCENT_BRIGHT, VALID, INVALID, MARKER, ACCENT, injectStyles, iconEl } from './chunk-CAFCLMPF.js';
 
+// src/core/model/series.ts
+function isLineLikeSeries(spec) {
+  return spec.kind !== "candle" && spec.kind !== "bar" && spec.kind !== "markers";
+}
+function seriesShownOn(spec, surface) {
+  if (spec.display) return spec.display[surface] !== false;
+  return spec.visible !== false;
+}
+function seriesInScale(spec) {
+  return seriesShownOn(spec, "pane") || seriesShownOn(spec, "priceScale");
+}
+
 // src/core/native-indicators/NativeIndicator.ts
+function nativeInstanceChannel(type, instanceId) {
+  return `${type}#${instanceId}`;
+}
 var REGISTRY = /* @__PURE__ */ new Map();
 function registerNativeIndicator(descriptor) {
   REGISTRY.set(descriptor.type, descriptor);
@@ -1837,16 +1852,18 @@ var Pitchfork = class extends SegmentDrawing {
   geometry(proj) {
     const a = this.anchors[0];
     const b = this.anchors[1];
-    const c = this.anchors[2];
-    if (!a || !b || !c) return null;
+    if (!a || !b) return null;
     const px = (p) => {
       const y = proj.yOf(p.price, this.paneId);
       return y == null ? null : [proj.xOf(p.time), y];
     };
     const P0 = px(a);
     const P1 = px(b);
+    if (!P0 || !P1) return null;
+    const c = this.anchors[2];
+    if (!c) return { segments: [[P0[0], P0[1], P1[0], P1[1]]], fill: null };
     const P2 = px(c);
-    if (!P0 || !P1 || !P2) return null;
+    if (!P2) return null;
     const mx = (P1[0] + P2[0]) / 2;
     const my = (P1[1] + P2[1]) / 2;
     const dx = mx - P0[0];
@@ -1893,16 +1910,19 @@ var PitchforkVariant = class extends SegmentDrawing {
   geometry(proj) {
     const a = this.anchors[0];
     const b = this.anchors[1];
-    const c = this.anchors[2];
-    if (!a || !b || !c) return null;
+    if (!a || !b) return null;
     const px = (p) => {
       const y = proj.yOf(p.price, this.paneId);
       return y == null ? null : [proj.xOf(p.time), y];
     };
-    const S = px(this.medianStart(a, b, c));
+    const P0 = px(a);
     const P1 = px(b);
+    if (!P0 || !P1) return null;
+    const c = this.anchors[2];
+    if (!c) return { segments: [[P0[0], P0[1], P1[0], P1[1]]], fill: null };
+    const S = px(this.medianStart(a, b, c));
     const P2 = px(c);
-    if (!S || !P1 || !P2) return null;
+    if (!S || !P2) return null;
     const mx = (P1[0] + P2[0]) / 2;
     const my = (P1[1] + P2[1]) / 2;
     const dx = mx - S[0];
@@ -1917,8 +1937,12 @@ var PitchforkVariant = class extends SegmentDrawing {
         // upper tine
         extendRay(P2[0], P2[1], P2[0] + dx, P2[1] + dy, "right", w, h),
         // lower tine
-        [P1[0], P1[1], P2[0], P2[1]]
+        [P1[0], P1[1], P2[0], P2[1]],
         // base line
+        // The median leaves from the shifted origin, not the pivot — without this construction
+        // line the pivot handle would float unattached to the shape it defines.
+        [P0[0], P0[1], P1[0], P1[1]]
+        // pivot → first tine anchor
       ],
       fill: null
     };
@@ -1975,17 +1999,19 @@ var InsidePitchfork = class extends SegmentDrawing {
   geometry(proj) {
     const a = this.anchors[0];
     const b = this.anchors[1];
-    const c = this.anchors[2];
-    if (!a || !b || !c) return null;
+    if (!a || !b) return null;
     const px = (p) => {
       const y = proj.yOf(p.price, this.paneId);
       return y == null ? null : [proj.xOf(p.time), y];
     };
-    const B = px({ time: (a.time + b.time) / 2, price: (a.price + b.price) / 2 });
     const P0 = px(a);
     const P1 = px(b);
+    if (!P0 || !P1) return null;
+    const c = this.anchors[2];
+    if (!c) return { segments: [[P0[0], P0[1], P1[0], P1[1]]], fill: null };
+    const B = px({ time: (a.time + b.time) / 2, price: (a.price + b.price) / 2 });
     const P2 = px(c);
-    if (!B || !P0 || !P1 || !P2) return null;
+    if (!B || !P2) return null;
     const mx = (P1[0] + P2[0]) / 2;
     const my = (P1[1] + P2[1]) / 2;
     const dx = P2[0] - B[0];
@@ -2156,16 +2182,18 @@ var Triangle = class extends SegmentDrawing {
   geometry(proj) {
     const a = this.anchors[0];
     const b = this.anchors[1];
-    const c = this.anchors[2];
-    if (!a || !b || !c) return null;
+    if (!a || !b) return null;
     const px = (p) => {
       const y = proj.yOf(p.price, this.paneId);
       return y == null ? null : [proj.xOf(p.time), y];
     };
     const A = px(a);
     const B = px(b);
+    if (!A || !B) return null;
+    const c = this.anchors[2];
+    if (!c) return { segments: [[A[0], A[1], B[0], B[1]]], fill: null };
     const C = px(c);
-    if (!A || !B || !C) return null;
+    if (!C) return null;
     return {
       segments: [
         [A[0], A[1], B[0], B[1]],
@@ -6365,4 +6393,4 @@ var SidePanel = class {
   }
 };
 
-export { AnchoredVwap, ArrowMark, Callout, CalloutBase, Comment, DEDEKIND_CURVATURE_OPTIONS, DEFAULT_DRAWING_COLOR, DEFAULT_PANEL_MAX_WIDTH, DEFAULT_PANEL_MIN_WIDTH, DEFAULT_PANEL_ORDER, DEFAULT_PANEL_WIDTH, DIRECTION_OPTIONS, DedekindTessellation, Drawing, FibRatios, FibSpiral, FixedRangeVolumeProfile, GANN_SQUARE_ARCS, GLYPH_OPTIONS, GannSquare, GlyphStamp, LINE_STYLE_OPTIONS, MACH_NUMBER_OPTIONS, MACH_WAVE_COUNT_OPTIONS, MAGNIFIER_TIMEFRAME_OPTIONS, MachFigure, Magnifier, MeasureBox, Note, OVERRIDABLE_TOPBAR_IDS, PatternDrawing, PositionTool, PriceLabel, PriceNote, RadialFib, RegressionChannel, STAMP_SIZE_OPTIONS, SegmentDrawing, SidePanel, Signpost, TEXT_SIZE_OPTIONS, TOPBAR_BUILTIN_IDS, TOPBAR_DEFAULT_LEFT, TOPBAR_DEFAULT_RIGHT, TextLabel, chartType, chartTypes, clampPanelWidth, createDrawing, deserializeDrawing, drawingTypes, foldBaseModulation, formatDuration, getDrawingType, getNativeIndicator, inputDeltas, inputVisible, legendActions, legendActionsProviderFor, legendCallouts, legendCalloutsProviderFor, lineSegmentIntersection, magnifierTimeframeLabel, nativeIndicatorDescriptors, nativeIndicatorTypes, normalizeSettingsRow, pinnedTopbarActionIds, registerChartType, registerDefaultEngine, registerDrawingType, registerLegendAction, registerLegendCallout, registerNativeIndicator, registerRendererDefaults, registerRendererLayer, registerSidePanel, registerStatePersistence, registerSymbolRanking, registerWidgetAction, registerWidgetAttachment, rendererDefaults, rendererLayers, resetDrawingSettings, resolveEngines, resolveTopbarComposition, settingsRowValueKeys, settingsRowVisible, sidePanels, stableSeriesId, statePersistenceHandlers, symbolRanking, tickerModifierIds, topbarActionOverride, topbarHas, unregisterChartType, unregisterDefaultEngine, unregisterLegendAction, unregisterLegendCallout, unregisterNativeIndicator, unregisterRendererDefaults, unregisterRendererLayer, unregisterSidePanel, unregisterStatePersistence, unregisterWidgetAction, unregisterWidgetAttachment, widgetActions, widgetAttachments };
+export { AnchoredVwap, ArrowMark, Callout, CalloutBase, Comment, DEDEKIND_CURVATURE_OPTIONS, DEFAULT_DRAWING_COLOR, DEFAULT_PANEL_MAX_WIDTH, DEFAULT_PANEL_MIN_WIDTH, DEFAULT_PANEL_ORDER, DEFAULT_PANEL_WIDTH, DIRECTION_OPTIONS, DedekindTessellation, Drawing, FibRatios, FibSpiral, FixedRangeVolumeProfile, GANN_SQUARE_ARCS, GLYPH_OPTIONS, GannSquare, GlyphStamp, LINE_STYLE_OPTIONS, MACH_NUMBER_OPTIONS, MACH_WAVE_COUNT_OPTIONS, MAGNIFIER_TIMEFRAME_OPTIONS, MachFigure, Magnifier, MeasureBox, Note, OVERRIDABLE_TOPBAR_IDS, PatternDrawing, PositionTool, PriceLabel, PriceNote, RadialFib, RegressionChannel, STAMP_SIZE_OPTIONS, SegmentDrawing, SidePanel, Signpost, TEXT_SIZE_OPTIONS, TOPBAR_BUILTIN_IDS, TOPBAR_DEFAULT_LEFT, TOPBAR_DEFAULT_RIGHT, TextLabel, chartType, chartTypes, clampPanelWidth, createDrawing, deserializeDrawing, drawingTypes, foldBaseModulation, formatDuration, getDrawingType, getNativeIndicator, inputDeltas, inputVisible, isLineLikeSeries, legendActions, legendActionsProviderFor, legendCallouts, legendCalloutsProviderFor, lineSegmentIntersection, magnifierTimeframeLabel, nativeIndicatorDescriptors, nativeIndicatorTypes, nativeInstanceChannel, normalizeSettingsRow, pinnedTopbarActionIds, registerChartType, registerDefaultEngine, registerDrawingType, registerLegendAction, registerLegendCallout, registerNativeIndicator, registerRendererDefaults, registerRendererLayer, registerSidePanel, registerStatePersistence, registerSymbolRanking, registerWidgetAction, registerWidgetAttachment, rendererDefaults, rendererLayers, resetDrawingSettings, resolveEngines, resolveTopbarComposition, seriesInScale, seriesShownOn, settingsRowValueKeys, settingsRowVisible, sidePanels, stableSeriesId, statePersistenceHandlers, symbolRanking, tickerModifierIds, topbarActionOverride, topbarHas, unregisterChartType, unregisterDefaultEngine, unregisterLegendAction, unregisterLegendCallout, unregisterNativeIndicator, unregisterRendererDefaults, unregisterRendererLayer, unregisterSidePanel, unregisterStatePersistence, unregisterWidgetAction, unregisterWidgetAttachment, widgetActions, widgetAttachments };

package/dist/{chunk-CZRNTHD6.js → chunk-BKHSQ4YM.js}

@@ -1,4 +1,4 @@
-import { overlayScrollbarCss, injectStyles, isDarkColor, mix, HIGHLIGHT, ACCENT_BRIGHT, ACCENT, withAlpha, iconAt, iconEl, BULLISH, BEARISH, WARNING, NEUTRAL } from './chunk-CAFCLMPF.js';
+import { overlayScrollbarCss, isDarkColor, mix, HIGHLIGHT, ACCENT_BRIGHT, ACCENT, withAlpha, injectStyles, iconAt, iconEl, BULLISH, BEARISH, WARNING, NEUTRAL } from './chunk-CAFCLMPF.js';
 import { VanillaMachine, normalizeProps, spreadProps } from '@zag-js/vanilla';
 export { normalizeProps, spreadProps } from '@zag-js/vanilla';
 import * as menu from '@zag-js/menu';
@@ -22,6 +22,129 @@ var uid = 0;
 function nextUid(prefix) {
   return `${prefix}-${++uid}`;
 }
+
+// src/core/tokens.ts
+var STATIC_TOKENS = {
+  "--vela-space-1": "4px",
+  "--vela-space-2": "8px",
+  "--vela-space-3": "12px",
+  "--vela-space-4": "16px",
+  "--vela-radius-sm": "4px",
+  "--vela-radius-md": "6px",
+  "--vela-radius-lg": "10px",
+  "--vela-z-tooltip": "60",
+  "--vela-z-menu": "50",
+  "--vela-z-dialog": "40",
+  // Form popovers portal to <body> (or a chart host) and must sit above a dialog
+  // whose own stacking context may be nested inside the chart container.
+  "--vela-z-popover": "6000",
+  "--vela-ease": "cubic-bezier(0.22, 1, 0.36, 1)",
+  "--vela-dur-fast": "90ms",
+  "--vela-dur-med": "160ms",
+  "--vela-font-size-sm": "11px",
+  "--vela-font-size-md": "12px",
+  "--vela-font-size-lg": "14px"
+};
+function themeTokens(t) {
+  const dark = isDarkColor(t.background);
+  const wash = (a) => dark ? `rgba(255,255,255,${a})` : withAlpha(t.textColor, a + 0.02);
+  const elevated = mix(t.background, dark ? "#ffffff" : t.textColor, dark ? 0.03 : 0.05);
+  return {
+    "--vela-font": t.fontFamily,
+    "--vela-bg": t.background,
+    // Chrome text is slightly brighter than the chart's own axis text, which is
+    // deliberately recessive; the chart keeps using `t.textColor` directly.
+    "--vela-fg": dark ? "#d1d4dc" : t.textColor,
+    "--vela-fg-muted": dark ? "#868a96" : withAlpha(t.textColor, 0.62),
+    "--vela-fg-faint": withAlpha(t.textColor, 0.35),
+    "--vela-fg-bright": dark ? "#f0f3fa" : "#000000",
+    "--vela-surface": t.background,
+    // Panels and menus float ABOVE the chart, so their surface is the wash flattened onto
+    // the chart background — opaque, or candles read through the panel.
+    "--vela-surface-elev": elevated,
+    "--vela-surface-overlay": elevated,
+    // Recessed fields (inputs, selects) read as cut INTO their panel, so they fall back
+    // to the chart surface and are separated from the panel by their border alone.
+    "--vela-surface-sunken": t.background,
+    "--vela-border": t.borderColor,
+    "--vela-border-strong": dark ? "#34353b" : withAlpha(t.textColor, 0.28),
+    "--vela-border-soft": t.borderColor,
+    // Barely-there rules INSIDE a panel (row separators), where a full border would
+    // chop the list into boxes.
+    "--vela-border-faint": withAlpha(t.textColor, 0.08),
+    "--vela-hover": wash(0.06),
+    "--vela-active": wash(0.1),
+    // A deliberately stronger hover for rows inside an already-tinted surface (menu
+    // items in an active flyout), where the normal wash would not separate from it.
+    "--vela-hover-strong": wash(0.16),
+    "--vela-focus": withAlpha(t.textColor, 0.5),
+    "--vela-focus-soft": withAlpha(t.textColor, 0.12),
+    // Separator hover — the SAME wash the chart's pane separators paint on hover
+    // (soft full-thickness band + solid 2px center line), so DOM-drawn dividers
+    // (the workspace grid) and canvas-drawn ones read as one family.
+    "--vela-separator-hover-band": withAlpha(t.textColor, 0.1),
+    "--vela-separator-hover-line": withAlpha(t.textColor, 0.55),
+    "--vela-scroll": withAlpha(t.textColor, 0.3),
+    "--vela-accent": ACCENT,
+    "--vela-accent-bright": ACCENT_BRIGHT,
+    "--vela-highlight": HIGHLIGHT,
+    // The inverse chip: a filled selected state (active tab, ticked checkbox). Its ink
+    // must contrast the fill, so the pair flips together with the theme.
+    "--vela-selected-bg": dark ? "#f0f3fa" : t.textColor,
+    "--vela-selected-fg": dark ? t.background : "#ffffff",
+    // Fixed ink for saturated fills (accent buttons, categorical avatars) — those fills
+    // are theme-independent, so their ink is too.
+    "--vela-fg-on-fill": "#ffffff",
+    "--vela-up": t.upColor,
+    "--vela-down": t.downColor,
+    "--vela-danger": t.downColor,
+    "--vela-shadow": "0 8px 30px rgba(0,0,0,0.5)",
+    "--vela-shadow-dialog": "0 20px 60px rgba(0,0,0,0.5)",
+    "--vela-backdrop": "rgba(0,0,0,0.45)"
+  };
+}
+
+// src/ui/tokens.ts
+var STATIC_ID = "vela-ui-tokens";
+var STATIC_DECLS = Object.entries(STATIC_TOKENS).map(([k, v]) => `    ${k}: ${v};`).join("\n");
+var STATIC_CSS = `
+.vela-ui, .vela-ui-layer {
+${STATIC_DECLS}
+    font-family: var(--vela-font, -apple-system, system-ui, sans-serif);
+    box-sizing: border-box;
+    /* Chrome text (titles, buttons, menus, readouts) is UI, not copy \u2014 never selectable. */
+    user-select: none;
+    -webkit-user-select: none;
+}
+.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; }
+`;
+function applyThemeTokens(el, t) {
+  const tokens = themeTokens(t);
+  for (const key in tokens) el.style.setProperty(key, tokens[key]);
+}
+function applyPlotOverlayTokens(host, base, config) {
+  const layout = config?.layout;
+  const t = layout?.background && layout.textColor ? { ...base, background: layout.background, textColor: layout.textColor } : base;
+  applyThemeTokens(host, t);
+}
+function floatingLayerHost(from, fallback) {
+  return from.closest(".vela-ui") ?? fallback ?? from;
+}
+function ensureUIHost(el, theme) {
+  injectStyles(STATIC_ID, STATIC_CSS, el.getRootNode());
+  el.classList.add("vela-ui");
+  if (theme) applyThemeTokens(el, theme);
+}
 function menuController(opts) {
   return {
     machine: menu.machine,
@@ -46,7 +169,7 @@ var MENU_CSS = `
     /* The list is a <ul>: without this, block rows (the separator) paint a ::marker dot. */
     list-style: none;
     margin: 0;
-    background: var(--vela-surface-elev);
+    background: var(--vela-surface);
     color: var(--vela-fg);
     border: 1px solid var(--vela-border-strong);
     border-radius: 6px;
@@ -337,7 +460,7 @@ var Menu = class {
     const anchor = opts.trigger ?? opts.host ?? document.body;
     const doc = anchor.ownerDocument;
     injectStyles(MENU_STYLE_ID, MENU_CSS, doc);
-    const host = opts.host ?? anchor.closest?.(".vela-ui") ?? doc.body;
+    const host = floatingLayerHost(opts.host ?? anchor, doc.body);
     this.root = new Surface(doc, {
       host,
       placement: opts.placement,
@@ -376,126 +499,6 @@ var Menu = class {
   }
 };
 
-// src/core/tokens.ts
-var STATIC_TOKENS = {
-  "--vela-space-1": "4px",
-  "--vela-space-2": "8px",
-  "--vela-space-3": "12px",
-  "--vela-space-4": "16px",
-  "--vela-radius-sm": "4px",
-  "--vela-radius-md": "6px",
-  "--vela-radius-lg": "10px",
-  "--vela-z-tooltip": "60",
-  "--vela-z-menu": "50",
-  "--vela-z-dialog": "40",
-  // Form popovers portal to <body> (or a chart host) and must sit above a dialog
-  // whose own stacking context may be nested inside the chart container.
-  "--vela-z-popover": "6000",
-  "--vela-ease": "cubic-bezier(0.22, 1, 0.36, 1)",
-  "--vela-dur-fast": "90ms",
-  "--vela-dur-med": "160ms",
-  "--vela-font-size-sm": "11px",
-  "--vela-font-size-md": "12px",
-  "--vela-font-size-lg": "14px"
-};
-function themeTokens(t) {
-  const dark = isDarkColor(t.background);
-  const wash = (a) => dark ? `rgba(255,255,255,${a})` : withAlpha(t.textColor, a + 0.02);
-  const elevated = mix(t.background, dark ? "#ffffff" : t.textColor, dark ? 0.03 : 0.05);
-  return {
-    "--vela-font": t.fontFamily,
-    "--vela-bg": t.background,
-    // Chrome text is slightly brighter than the chart's own axis text, which is
-    // deliberately recessive; the chart keeps using `t.textColor` directly.
-    "--vela-fg": dark ? "#d1d4dc" : t.textColor,
-    "--vela-fg-muted": dark ? "#868a96" : withAlpha(t.textColor, 0.62),
-    "--vela-fg-faint": withAlpha(t.textColor, 0.35),
-    "--vela-fg-bright": dark ? "#f0f3fa" : "#000000",
-    "--vela-surface": t.background,
-    // Panels and menus float ABOVE the chart, so their surface is the wash flattened onto
-    // the chart background — opaque, or candles read through the panel.
-    "--vela-surface-elev": elevated,
-    "--vela-surface-overlay": elevated,
-    // Recessed fields (inputs, selects) read as cut INTO their panel, so they fall back
-    // to the chart surface and are separated from the panel by their border alone.
-    "--vela-surface-sunken": t.background,
-    "--vela-border": t.borderColor,
-    "--vela-border-strong": dark ? "#34353b" : withAlpha(t.textColor, 0.28),
-    "--vela-border-soft": t.borderColor,
-    // Barely-there rules INSIDE a panel (row separators), where a full border would
-    // chop the list into boxes.
-    "--vela-border-faint": withAlpha(t.textColor, 0.08),
-    "--vela-hover": wash(0.06),
-    "--vela-active": wash(0.1),
-    // A deliberately stronger hover for rows inside an already-tinted surface (menu
-    // items in an active flyout), where the normal wash would not separate from it.
-    "--vela-hover-strong": wash(0.16),
-    "--vela-focus": withAlpha(t.textColor, 0.5),
-    "--vela-focus-soft": withAlpha(t.textColor, 0.12),
-    // Separator hover — the SAME wash the chart's pane separators paint on hover
-    // (soft full-thickness band + solid 2px center line), so DOM-drawn dividers
-    // (the workspace grid) and canvas-drawn ones read as one family.
-    "--vela-separator-hover-band": withAlpha(t.textColor, 0.1),
-    "--vela-separator-hover-line": withAlpha(t.textColor, 0.55),
-    "--vela-scroll": withAlpha(t.textColor, 0.3),
-    "--vela-accent": ACCENT,
-    "--vela-accent-bright": ACCENT_BRIGHT,
-    "--vela-highlight": HIGHLIGHT,
-    // The inverse chip: a filled selected state (active tab, ticked checkbox). Its ink
-    // must contrast the fill, so the pair flips together with the theme.
-    "--vela-selected-bg": dark ? "#f0f3fa" : t.textColor,
-    "--vela-selected-fg": dark ? t.background : "#ffffff",
-    // Fixed ink for saturated fills (accent buttons, categorical avatars) — those fills
-    // are theme-independent, so their ink is too.
-    "--vela-fg-on-fill": "#ffffff",
-    "--vela-up": t.upColor,
-    "--vela-down": t.downColor,
-    "--vela-danger": t.downColor,
-    "--vela-shadow": "0 8px 30px rgba(0,0,0,0.5)",
-    "--vela-shadow-dialog": "0 20px 60px rgba(0,0,0,0.5)",
-    "--vela-backdrop": "rgba(0,0,0,0.45)"
-  };
-}
-
-// src/ui/tokens.ts
-var STATIC_ID = "vela-ui-tokens";
-var STATIC_DECLS = Object.entries(STATIC_TOKENS).map(([k, v]) => `    ${k}: ${v};`).join("\n");
-var STATIC_CSS = `
-.vela-ui, .vela-ui-layer {
-${STATIC_DECLS}
-    font-family: var(--vela-font, -apple-system, system-ui, sans-serif);
-    box-sizing: border-box;
-    /* Chrome text (titles, buttons, menus, readouts) is UI, not copy \u2014 never selectable. */
-    user-select: none;
-    -webkit-user-select: none;
-}
-.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; }
-`;
-function applyThemeTokens(el, t) {
-  const tokens = themeTokens(t);
-  for (const key in tokens) el.style.setProperty(key, tokens[key]);
-}
-function applyPlotOverlayTokens(host, base, config) {
-  const layout = config?.layout;
-  const t = layout?.background && layout.textColor ? { ...base, background: layout.background, textColor: layout.textColor } : base;
-  applyThemeTokens(host, t);
-}
-function ensureUIHost(el, theme) {
-  injectStyles(STATIC_ID, STATIC_CSS, el.getRootNode());
-  el.classList.add("vela-ui");
-  if (theme) applyThemeTokens(el, theme);
-}
-
 // src/ui/components/popover/controller.ts
 function insetRect(r, inset) {
   return {
@@ -602,7 +605,8 @@ var Popover = class {
     const doc = opts.trigger.ownerDocument;
     injectStyles(POPOVER_STYLE_ID, POPOVER_CSS, doc);
     this.trigger = opts.trigger;
-    this.host = opts.host ?? doc.body;
+    this.host = opts.host ?? floatingLayerHost(opts.trigger, doc.body);
+    this.inheritsTokens = !opts.host && this.host !== doc.body;
     this.ctrl = popoverController(opts);
     this.boundary = opts.boundary ?? "viewport";
     this.theme = opts.theme;
@@ -634,7 +638,7 @@ var Popover = class {
       clearTimeout(this.leaveTimer);
       this.leaveTimer = null;
     }
-    ensureUIHost(this.el, this.theme);
+    ensureUIHost(this.el, this.inheritsTokens ? void 0 : this.theme);
     if (this.fadeMs > 0) {
       this.el.style.transition = `opacity ${this.fadeMs}ms ease`;
       this.el.style.opacity = "0";

package/dist/{chunk-A347YL2P.js → chunk-QGVSNAX7.js}

@@ -1,7 +1,7 @@
-import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, SecondClock, TIMEZONES, normalizeTimezone, tzMenuLabel, isGroupRow, defaultMemberOf, groupKeyOf, groupMembers, LEGEND_AT_TOP_ATTR, normalizeSession, Vela, TypedEventBus, MultiProviderFeed, registerBuiltinChartTypes, resolveTheme, buildToolbar, createCustomMark, createAttributionMark, DrawingToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs } from './chunk-A4G64KVF.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-IFJJPXSV.js';
-import { Tooltip, KeymapManager, isEditableTarget, Drawer } from './chunk-UHXG5J7C.js';
-import { Menu, Dialog, CalloutBubble, applyPlotOverlayTokens, ensureUIHost } from './chunk-CZRNTHD6.js';
+import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, SecondClock, TIMEZONES, normalizeTimezone, tzMenuLabel, isGroupRow, defaultMemberOf, groupKeyOf, groupMembers, LEGEND_AT_TOP_ATTR, normalizeSession, Vela, TypedEventBus, MultiProviderFeed, registerBuiltinChartTypes, resolveTheme, buildToolbar, createCustomMark, createAttributionMark, DrawingToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs } from './chunk-5RQGCZTX.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-BFA32GOU.js';
+import { Tooltip, KeymapManager, isEditableTarget, Drawer } from './chunk-ZADTVRUO.js';
+import { Menu, Dialog, CalloutBubble, applyPlotOverlayTokens, ensureUIHost } from './chunk-BKHSQ4YM.js';
 import { registerIcon, svg16, injectStyles, iconEl, iconMarkup, iconAt, SESSION_OFF, SESSION_POST, SESSION_PRE, icon, categoricalColor } from './chunk-CAFCLMPF.js';
 import { baseOf } from './chunk-W4EJWLEO.js';
 
@@ -6107,7 +6107,8 @@ var ChartCell = class {
     this.statusline?.setFitMode(on);
   }
   /** The workspace shell keeps the app theme; the cell host's tokens re-derive from
-   *  the LIVE plot surface (see {@link applyPlotOverlayTokens}). */
+   *  the LIVE plot surface for overlay ink (statusline, watermark). Menus portal to
+   *  `.vela-ui` and keep the app-theme surface (see {@link applyPlotOverlayTokens}). */
   syncPlotOverlayTokens() {
     applyPlotOverlayTokens(this.host, this.appTheme, this.inner?.renderer.getConfig() ?? null);
   }
@@ -8243,7 +8244,21 @@ var VelaWorkspace = class {
     /** Live sync configuration (mutable copy of the option). */
     this.syncOpts = {};
     this.stateTimer = null;
-    this.onUnload = () => this.persistNow();
+    /** Re-entrance guard for {@link flushPendingState}: a `state:changed` subscriber that
+     *  calls back into the workspace (`destroy()` on save is the obvious one) must not
+     *  re-enter the flush and recurse. */
+    this.emitting = false;
+    /** False until the constructor finishes. Boot is not an edit: seeding the sync
+     *  settings marks state dirty, so without this a workspace mounted and torn down
+     *  inside the debounce window would flush and tell the host the user had changed
+     *  something — a save of the default document over whatever was stored. */
+    this.booted = false;
+    /** A page unload gets the same flush as a teardown — the pending edit reaches the
+     *  host, the timer is cleared, and a `destroy()` that follows adds no second write. */
+    this.onUnload = () => {
+      this.flushPendingState();
+      this.persistNow();
+    };
     /** Re-entrance guard around one propagation tick: followers' synchronous echoes
      *  (their setVisibleRange re-emits viewport:changed) must not re-propagate. */
     this.syncBusy = false;
@@ -8557,6 +8572,7 @@ var VelaWorkspace = class {
     }
     this.mountAttachments();
     this.restoreGlobalExt();
+    this.booted = true;
   }
   // ── access ──────────────────────────────────────────────────
   /** The cell with identity `id` (its declared name, or `c<N>` when undeclared), or
@@ -8965,13 +8981,17 @@ var VelaWorkspace = class {
   }
   destroy() {
     if (this.destroyed) return;
-    this.persistNow();
+    this.flushPendingState();
     this.destroyed = true;
-    if (this.stateTimer != null) clearTimeout(this.stateTimer);
     if (this.persistKey !== null && typeof window !== "undefined") window.removeEventListener("beforeunload", this.onUnload);
     this.resizeObserver?.disconnect();
     this.splitters.destroy();
     for (const [id, cell] of [...this.cellsById]) {
+      try {
+        this.poolSet(id, cell.dehydrate());
+      } catch (err) {
+        console.warn(`[vela] could not snapshot cell "${id}" while destroying:`, err);
+      }
       cell.destroy();
       this.cellsById.delete(id);
     }
@@ -9057,7 +9077,7 @@ var VelaWorkspace = class {
   /** Debounced dirty mark: one `state:changed` (+ one storage write in persist mode)
    *  per burst of edits, flushed hard on unload/destroy. */
   markStateDirty() {
-    if (this.destroyed) return;
+    if (this.destroyed || !this.booted) return;
     if (this.stateTimer != null) clearTimeout(this.stateTimer);
     this.stateTimer = setTimeout(() => {
       this.stateTimer = null;
@@ -9065,6 +9085,44 @@ var VelaWorkspace = class {
       this.persistNow();
     }, 500);
   }
+  /**
+   * Push a pending debounced change out NOW, for a teardown or a page unload — the
+   * two moments the 500ms timer would otherwise never reach.
+   *
+   * Dropping it was a silent data loss: the timer carries BOTH halves of the dirty
+   * signal — the `state:changed` event and the storage write — so a host that saves
+   * from that event (a server-backed host, where `persistNow` is a no-op for want of
+   * a `persistKey`) simply never heard about the user's last edit.
+   *
+   * Idempotent and re-entrancy safe, which the ordering here buys:
+   *  - a no-op unless a timer is actually pending, so a teardown with nothing
+   *    outstanding stays silent and never invents an edit;
+   *  - the timer is cleared FIRST, so nothing survives this call and a second call
+   *    does nothing — `destroy()` after an unload flush adds no second write;
+   *  - the state is snapshotted BEFORE the handlers run, and that snapshot is what
+   *    gets persisted, so storage and the host are told the same thing even if a
+   *    handler mutates state while it runs;
+   *  - `emitting` is held across the emit, so a handler calling back in (a host that
+   *    tears down on save is the obvious one) cannot re-enter this and recurse.
+   */
+  flushPendingState() {
+    if (this.stateTimer == null || this.emitting) return;
+    clearTimeout(this.stateTimer);
+    this.stateTimer = null;
+    const snapshot = this.persistKey !== null ? encodeState(this.getState()) : null;
+    this.emitting = true;
+    try {
+      this.events.emit("state:changed", void 0);
+    } finally {
+      this.emitting = false;
+    }
+    if (snapshot !== null && this.persistKey !== null) {
+      try {
+        void this.storage.set(this.persistKey, snapshot);
+      } catch {
+      }
+    }
+  }
   /** Write the current state through the storage adapter now (fire-and-forget). */
   persistNow() {
     if (this.persistKey === null || this.destroyed) return;

package/dist/{chunk-UHXG5J7C.js → chunk-ZADTVRUO.js}

@@ -1,4 +1,4 @@
-import { normalizeProps, nextUid, runMachine, spreadProps } from './chunk-CZRNTHD6.js';
+import { normalizeProps, nextUid, runMachine, spreadProps } from './chunk-BKHSQ4YM.js';
 import { injectStyles } from './chunk-CAFCLMPF.js';
 import * as tooltip from '@zag-js/tooltip';
 import * as dialog from '@zag-js/dialog';

package/dist/{contributions-BjQ7hyIx.d.ts → contributions-BbhbZd3c.d.ts}

@@ -1,5 +1,5 @@
-import { x as Millis, an as InputSchema, al as IndicatorMeta, P as PriceStyle, O as OHLCV, I as InputValue, l as IndicatorModel, k as MoveTarget, aH as PaneAxis, aV as SeriesSpec, aj as Fill, G as Background, aM as PriceLine, a6 as DrawingLine, a2 as DrawingBox, a5 as DrawingLabel, aa as DrawingPolyline, a7 as DrawingLinefill, af as DrawingTable, h as IndicatorStatus, a as VisibleRange, c as VelaTheme, S as SerializedDrawing, z as DrawingTypeKey, y as SnapMode, a8 as DrawingMode, u as MarkClickEvent, e as IChartRenderer, R as RendererCapabilities, o as LegendActionView, p as LegendCalloutView, U as Unsubscribe, C as CrosshairEvent, A as AxisLongPressEvent, v as DataWindowReadout, n as SymbolPickerFn, W as WallClock, b8 as PaneInfo, ai as DrawingsOption, ac as DrawingSeriesGateway, D as Drawing, s as TimelineMark, t as MarkGroup, b as VelaOptions, E as AddIndicatorOptions, aG as MarketSwitch, aF as MarketSnapshot, V as VisibleRangePreset, T as ThemeName } from './options-ex2_gtKp.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-Bu9E5Zh5.js';
+import { x as Millis, an as InputSchema, al as IndicatorMeta, P as PriceStyle, O as OHLCV, I as InputValue, l as IndicatorModel, k as MoveTarget, aH as PaneAxis, aW as SeriesSpec, aj as Fill, G as Background, aM as PriceLine, a6 as DrawingLine, a2 as DrawingBox, a5 as DrawingLabel, aa as DrawingPolyline, a7 as DrawingLinefill, af as DrawingTable, h as IndicatorStatus, a as VisibleRange, c as VelaTheme, S as SerializedDrawing, z as DrawingTypeKey, y as SnapMode, a8 as DrawingMode, u as MarkClickEvent, e as IChartRenderer, R as RendererCapabilities, o as LegendActionView, p as LegendCalloutView, U as Unsubscribe, C as CrosshairEvent, A as AxisLongPressEvent, v as DataWindowReadout, n as SymbolPickerFn, W as WallClock, bc as PaneInfo, ai as DrawingsOption, ac as DrawingSeriesGateway, D as Drawing, s as TimelineMark, t as MarkGroup, b as VelaOptions, E as AddIndicatorOptions, aG as MarketSwitch, aF as MarketSnapshot, V as VisibleRangePreset, T as ThemeName } from './options-C7b_Qssu.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-BALR0qPq.js';
 
 /**
  * A strategy's broker state at ONE bar — the flat summary a host reads while a script
@@ -282,9 +282,10 @@ interface IndicatorEventMap extends Record<string, unknown> {
 interface IndicatorHandle {
     readonly id: string;
     readonly title: string;
-    /** The script source this indicator was added with. `undefined` for a NATIVE
-     *  (core-computed) indicator — there is no script to show. What a host editor
-     *  opens when a legend action asks for "the code behind this row". */
+    /** The script source this indicator currently runs (the one it was added with,
+     *  until {@link updateCode} replaces it). `undefined` for a NATIVE (core-computed)
+     *  indicator — there is no script to show. What a host editor opens when a legend
+     *  action asks for "the code behind this row". */
     readonly source?: string;
     /** The registered type of a NATIVE (core-computed) indicator — `undefined` for a
      *  script indicator. The two are exclusive: a handle has a `source` or a `nativeType`. */
@@ -309,6 +310,17 @@ interface IndicatorHandle {
     setProp(key: string, value: InputValue): void;
     /** Override several declaration props at once and re-run. */
     setProps(values: Record<string, InputValue>): void;
+    /**
+     * Replace the script and re-run it **in place** — same `id`, same legend row, same
+     * pane placement, same handle; the seam for a host editor's "run my edit" and for a
+     * library's "update to the new version". The new source is prepared first: only once
+     * it compiles is the running script stopped and the new one started, so a broken edit
+     * leaves the current indicator computing and painting and reports through `error`.
+     * Input and prop values survive where the new script still declares their key;
+     * anything else takes the new declaration default. No-op for a native indicator and
+     * for an unchanged source.
+     */
+    updateCode(source: string): void;
     /**
      * Hide or show the indicator. Hiding **suspends** it — its visuals are dropped (the legend
      * row stays, marked hidden) and its computation stops (the engine session is torn down), so a
@@ -439,6 +451,10 @@ interface NativeIndicatorOutput {
 }
 /** Services the host gives a running native indicator. */
 interface NativeIndicatorContext {
+    /** This instance's indicator id — the same id its `IndicatorHandle`, `inspect()` and
+     *  the pane listing report. Lets an instance name itself to host code (a picker, a
+     *  hit-test) and tell itself apart from siblings of a `multiInstance` type. */
+    readonly id: string;
     readonly symbol: string;
     readonly timeframe: string;
     readonly live: boolean;
@@ -475,11 +491,13 @@ interface NativeIndicator {
     onViewport(range: VisibleRange): void;
     /** Settings changed — recompute + emit. */
     setInputs(inputs: Record<string, InputValue>): void;
-    /** Hidden — stop timers/fetches (free resources); the instance + its state are kept for resume. */
+    /** Hidden — stop timers/fetches (free resources); the instance + its state are kept for resume.
+     *  Only ever called after `start` (an instance added hidden is not suspended — it is
+     *  started when first shown). */
     suspend(): void;
     /** Shown again — resume + re-emit. */
     resume(): void;
-    /** Removed — full teardown (clear caches, stop timers). */
+    /** Removed — full teardown (clear caches, stop timers). Only ever called after `start`. */
     stop(): void;
 }
 /**
@@ -515,8 +533,10 @@ interface NativeIndicatorDescriptor {
     /**
      * Allow several instances of this type on one chart — every add creates a new one (a study
      * like a moving average is typically stacked at different lengths). Absent ⇒ SINGLE instance
-     * per type: a second add returns the existing handle. A type that pushes a bespoke layer
-     * payload through `pushData` must stay single-instance (the layer is keyed by type).
+     * per type: a second add returns the existing handle. A type that paints through a renderer
+     * layer (`pushData`) gets ONE layer instance per indicator instance, each fed by that
+     * instance's own channel and painting on that instance's pane — so instances never
+     * overwrite each other (see `IndicatorModel.native.channel`).
      */
     readonly multiInstance?: boolean;
     inputsSchema(): InputSchema[];
@@ -574,6 +594,8 @@ type ScriptRunCause =
  | 'bar'
 /** An input was edited. */
  | 'inputs'
+/** The script's source was replaced in place (`handle.updateCode`). */
+ | 'code'
 /** The visible range moved (viewport-aware scripts only). */
  | 'viewport'
 /** The chart's market changed and the script re-executed over the new bars. */