@luxalgo/vela 0.7.0 → 0.7.2

package/dist/{DataProvider-Bu9E5Zh5.d.ts → DataProvider-BALR0qPq.d.ts}

@@ -1,4 +1,4 @@
-import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-ex2_gtKp.js';
+import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-C7b_Qssu.js';
 
 /**
  * Symbol metadata an engine may need (e.g. Pine `syminfo.*`). Free-form beyond

package/dist/{DataProvider-Ck2qyS_9.d.cts → DataProvider-D5uMiJYz.d.cts}

@@ -1,4 +1,4 @@
-import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-ex2_gtKp.cjs';
+import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-C7b_Qssu.cjs';
 
 /**
  * Symbol metadata an engine may need (e.g. Pine `syminfo.*`). Free-form beyond

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";