@luxalgo/vela 0.6.15 → 0.6.17

package/README.md

@@ -32,6 +32,10 @@ touching the rest.
 
 ## What's in the box
 
+<p align="center">
+  <img src=".github/vela-layout.png" alt="Vela package layout" width="100%">
+</p>
+
 - **`@luxalgo/vela`**: the headless chart. Data model, engines, drawings, providers,
   native renderer.
 - **`@luxalgo/vela/workspace`**: the full chart app. One chart or a grid of them under
@@ -95,7 +99,14 @@ providers, to `window.Vela`.
 
 ## Indicators
 
-Vela™ runs indicator scripts through pluggable engines and **ships none**. Install the
+Vela™ ships **70+** built-in studies — moving averages, bands and channels, momentum
+oscillators, trend and volatility measures, volume studies, and price-anchored
+overlays such as VWAP, SuperTrend, and Pivot Points. They compute from the chart's
+own bars (no scripting engine), and each one gets a legend row, a settings dialog,
+and persistence across reloads. Volume and the visible-range volume profile sit
+alongside them.
+
+Custom scripts still run through pluggable engines. Vela™ **ships none**: install the
 addon for the language you want, or write one against the public `ScriptingEngine` port.
 Pine Script lives in [`@luxalgo/vela-pinets`](https://github.com/LuxAlgo/Vela-pinets)
 (`npm i @luxalgo/vela-pinets pinets`), which is **AGPL-3.0** because the PineTS runtime it

package/dist/{DataProvider-XLdJB86x.d.ts → DataProvider-B-Jz59Rf.d.ts}

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

package/dist/{DataProvider-xH2VBcFT.d.cts → DataProvider-OfR3fXg9.d.cts}

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

package/dist/{chunk-6DPAYEGO.js → chunk-CAFCLMPF.js}

@@ -151,6 +151,7 @@ registerIcon("star-filled", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L
 registerIcon("grip", S('<circle cx="6" cy="3.5" r="1"/><circle cx="10" cy="3.5" r="1"/><circle cx="6" cy="8" r="1"/><circle cx="10" cy="8" r="1"/><circle cx="6" cy="12.5" r="1"/><circle cx="10" cy="12.5" r="1"/>', 'fill="currentColor" stroke="none"'));
 registerIcon("kebab", S('<circle cx="8" cy="3.2" r="1.2"/><circle cx="8" cy="8" r="1.2"/><circle cx="8" cy="12.8" r="1.2"/>', 'fill="currentColor" stroke="none"'));
 registerIcon("burger", S('<path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/>'));
+registerIcon("info", S('<path d="M8 7.4v4.4"/><circle cx="8" cy="4.6" r="0.9" fill="currentColor" stroke="none"/>'));
 registerIcon("reset", S('<path d="M2 8a6 6 0 1 0 6-6 6.5 6.5 0 0 0-4.5 1.83L2 5.33"/><path d="M2 2v3.33h3.33"/>'));
 registerIcon("pane-collapse", S('<path d="M2.6 9.4h4v4M13.4 6.6h-4v-4"/><path d="m9.4 6.6 4.2-4.2M2.4 13.6l4.2-4.2"/>'));
 registerIcon("pane-expand", S('<path d="M9.8 2.4h3.8v3.8M6.2 13.6H2.4V9.8"/><path d="m13.6 2.4-4.4 4.4M2.4 13.6l4.4-4.4"/>'));

package/dist/chunk-FE6V2YAQ.js

@@ -0,0 +1 @@
+

package/dist/{chunk-32A7KHFM.js → chunk-IFJJPXSV.js}

@@ -1,4 +1,4 @@
-import { svg24, NEUTRAL, BEARISH, WARNING, BULLISH, INFO, ACCENT_BRIGHT, VALID, INVALID, MARKER, ACCENT, injectStyles, iconEl } from './chunk-6DPAYEGO.js';
+import { svg24, NEUTRAL, BEARISH, WARNING, BULLISH, INFO, ACCENT_BRIGHT, VALID, INVALID, MARKER, ACCENT, injectStyles, iconEl } from './chunk-CAFCLMPF.js';
 
 // src/core/native-indicators/NativeIndicator.ts
 var REGISTRY = /* @__PURE__ */ new Map();
@@ -5890,6 +5890,12 @@ function rendererLayers() {
   return [...registry2.values()];
 }
 
+// src/core/model/identity.ts
+function stableSeriesId(parts) {
+  const normTitle = parts.title.trim().toLowerCase().replace(/\s+/g, "-");
+  return `${parts.instanceId}:${parts.kind}:${normTitle}#${parts.ordinal}`;
+}
+
 // src/widget/topbar-composition.ts
 var TOPBAR_BUILTIN_IDS = ["symbol", "timeframes", "style", "layout", "indicators", "actions", "undo-redo", "alerts", "panels", "screenshot"];
 var TOPBAR_DEFAULT_LEFT = ["symbol", "timeframes", "style", "layout", "indicators", "actions", "undo-redo"];
@@ -6359,4 +6365,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, 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, 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 };

package/dist/{chunk-7C7NWEXH.js → chunk-OSZDSH7F.js}

@@ -1,8 +1,8 @@
-import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel, isGroupRow, defaultMemberOf, groupKeyOf, groupMembers, LEGEND_AT_TOP_ATTR, Vela, TypedEventBus, MultiProviderFeed, registerBuiltinChartTypes, resolveTheme, buildToolbar, createCustomMark, createAttributionMark, DrawingToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs } from './chunk-J5QIR2Z3.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-32A7KHFM.js';
-import { Tooltip, KeymapManager, isEditableTarget, Drawer } from './chunk-MWS4CUJL.js';
-import { Menu, Dialog, CalloutBubble, applyPlotOverlayTokens, ensureUIHost } from './chunk-MWDNPGU3.js';
-import { registerIcon, svg16, injectStyles, iconEl, iconMarkup, iconAt, SESSION_OFF, SESSION_POST, SESSION_PRE, icon, categoricalColor } from './chunk-6DPAYEGO.js';
+import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, 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-YCD72KGK.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-XCBJU674.js';
+import { Menu, Dialog, CalloutBubble, applyPlotOverlayTokens, ensureUIHost } from './chunk-T5Z5YUCF.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';
 
 // src/widget/timeframe.ts
@@ -2999,17 +2999,12 @@ function filterSymbols(list, query, limit = 100, top = TOP_TICKERS) {
 }
 var STYLE_ID6 = "vela-widget-symbolpicker";
 var CSS6 = `
-/* Search + market tabs stay pinned while the result list scrolls underneath
-   (mobile fullscreen: the dialog body is the scroller). Negative margin eats
-   the body's padding so scrolled rows cannot peek around the island. */
-.vela-sp-sticky {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    background: var(--vela-surface);
-    margin: calc(-1 * var(--vela-space-4)) calc(-1 * var(--vela-space-4)) 0;
-    padding: var(--vela-space-4) var(--vela-space-4) 0;
-}
+/* The dialog body is flush (a flex column): search + market tabs are a fixed head
+   and the result list is the ONLY scroller, in both layouts. A sticky head over a
+   scrolling padded body is not an option \u2014 browsers pin sticky boxes to the
+   scroller's content box, so the head lands one padding below the top and covers
+   the first row. */
+.vela-sp-head { flex: none; padding: var(--vela-space-4) var(--vela-space-4) 0; }
 .vela-sp-searchrow {
     display: flex;
     align-items: center;
@@ -3034,12 +3029,13 @@ var CSS6 = `
 .vela-sp-input::placeholder { text-transform: none; }
 .vela-sp-tabs { display: flex; gap: 14px; margin: 12px 2px 0; border-bottom: 1px solid var(--vela-border); padding-bottom: 8px; }
 /* Mobile (fullscreen dialog): the asset-class strip scrolls sideways instead of
-   overflowing the body, and the result list stops capping itself \u2014 the body owns
-   the scrolling in the fullscreen presentation. */
+   overflowing the body, and the result list stops capping itself \u2014 it fills the
+   rest of the screen. The bottom inset (+ safe area) is the kit's: every mobile
+   dialog body carries it, flush or not, so the list adds none of its own. */
 [data-layout='mobile'] .vela-sp-tabs { overflow-x: auto; scrollbar-width: none; gap: 6px; }
 [data-layout='mobile'] .vela-sp-tabs::-webkit-scrollbar { display: none; }
 [data-layout='mobile'] .vela-sp-tab { flex: none; padding: 7px 10px; }
-[data-layout='mobile'] .vela-sp-list { max-height: none; }
+[data-layout='mobile'] .vela-sp-list { flex: 1 1 auto; max-height: none; margin-bottom: 0; }
 .vela-sp-tab {
     all: unset;
     padding: 3px 10px;
@@ -3051,7 +3047,12 @@ var CSS6 = `
 }
 .vela-sp-tab:hover { color: var(--vela-fg); }
 .vela-sp-tab[data-active] { background: var(--vela-selected-bg); color: var(--vela-selected-fg); }
-.vela-sp-list { margin-top: var(--vela-space-2); max-height: 46vh; overflow: auto; }
+.vela-sp-list {
+    min-height: 0;
+    margin: var(--vela-space-2) var(--vela-space-4) var(--vela-space-4);
+    max-height: 46vh;
+    overflow: auto;
+}
 .vela-sp-list::-webkit-scrollbar { width: 8px; }
 .vela-sp-list::-webkit-scrollbar-thumb {
     background: var(--vela-scroll);
@@ -3144,8 +3145,8 @@ var SymbolPicker = class {
     searchRow.append(iconEl("search", doc), this.input);
     this.tabs = doc.createElement("div");
     this.tabs.className = "vela-sp-tabs";
-    const sticky = doc.createElement("div");
-    sticky.className = "vela-sp-sticky";
+    const head = doc.createElement("div");
+    head.className = "vela-sp-head";
     for (const t of ["All", "Stocks", "ETFs", "Crypto", "Futures", "Forex", "Commodities"]) {
       const b = doc.createElement("button");
       b.className = "vela-sp-tab";
@@ -3159,7 +3160,7 @@ var SymbolPicker = class {
       });
       this.tabs.appendChild(b);
     }
-    sticky.append(searchRow, this.tabs);
+    head.append(searchRow, this.tabs);
     this.list = doc.createElement("div");
     this.list.className = "vela-sp-list";
     this.list.addEventListener("scroll", () => {
@@ -3172,7 +3173,8 @@ var SymbolPicker = class {
       title: "Symbol Search",
       host: opts.host,
       closeOnInteractOutside: true,
-      content: (body) => body.append(sticky, this.list),
+      flush: true,
+      content: (body) => body.append(head, this.list),
       onOpenChange: (open) => {
         if (open) {
           this.input.value = this.seed.toUpperCase();
@@ -4824,9 +4826,6 @@ var ChartContextMenu = class {
   }
 };
 
-// src/core/options.ts
-var normalizeSession = (v) => v === "regular" || v === "extended" ? v : void 0;
-
 // src/widget/session-shading.ts
 var DAY_MS = 864e5;
 var MINUTE_MS = 6e4;
@@ -5482,8 +5481,8 @@ var ChartCell = class {
     /** The volume auto-add rides the cell's first candles (`load:end`); until then the
      *  registry can't show it and the dehydrated ledger reports the INTENT instead. */
     this.volumeMayBePending = true;
-    /** Sync mirror of the chart's present native types — the removal handler diffs
-     *  against it to identify (and record) whichever type was just removed. */
+    /** Sync mirror of the chart's native instances (id + type) — the removal handler
+     *  looks the removed id up here to learn which type an undo must re-add. */
     this.presentNatives = [];
     this.rangeBars = 0;
     this.pendingRange = null;
@@ -5655,15 +5654,18 @@ var ChartCell = class {
           redo: () => this.dropInstance(snapshot)
         });
       } else {
-        const now = this.inner?.presentNativeIndicators() ?? [];
-        for (const type of this.presentNatives.filter((t) => !now.includes(t))) {
+        const gone = this.presentNatives.find((n) => n.id === id2);
+        if (gone) {
+          const { type } = gone;
+          let revived = null;
           this.history.push({
             undo: () => {
-              this.inner?.addNativeIndicator(type);
+              revived = this.inner?.addNativeIndicator(type) ?? null;
               this.refreshNativeCatalog();
             },
             redo: () => {
-              this.inner?.addNativeIndicator(type).remove();
+              revived?.remove();
+              revived = null;
               this.refreshNativeCatalog();
             }
           });
@@ -5968,9 +5970,9 @@ var ChartCell = class {
     const live = this.inner?.renderer.get("priceStyle");
     return typeof live === "string" ? live : this.state.priceStyle ?? "candles";
   }
-  /** Manifest instances + present natives — the topbar indicator count. */
+  /** Manifest instances + native instances — the topbar indicator count. */
   get indicatorCount() {
-    return this.instances.length + this.nativeCatalog.filter((n) => n.present).length;
+    return this.instances.length + (this.inner ? this.nativeHandles().length : this.presentNatives.length);
   }
   /** Switch this cell's market in place (the chart instance survives). The projection
    *  is OPTIMISTIC — labels and chrome show the pick before the bars load; it follows
@@ -6102,13 +6104,15 @@ var ChartCell = class {
     if (!chart) return;
     this.volumeIntent = led.natives.includes("volume");
     this.history.silently(() => {
-      const present = chart.presentNativeIndicators();
-      for (const type of led.natives) {
-        if (!present.includes(type)) chart.addNativeIndicator(type);
-      }
-      for (const type of present) {
-        if (!led.natives.includes(type)) chart.addNativeIndicator(type).remove();
+      const owed = /* @__PURE__ */ new Map();
+      for (const type of led.natives) owed.set(type, (owed.get(type) ?? 0) + 1);
+      for (const h of this.nativeHandles()) {
+        const type = h.nativeType;
+        const n = owed.get(type) ?? 0;
+        if (n > 0) owed.set(type, n - 1);
+        else h.remove();
       }
+      for (const [type, n] of owed) for (let i = 0; i < n; i++) chart.addNativeIndicator(type);
       for (const it of [...this.instances]) this.dropInstance(it);
       if (this.manifest.length > 0) {
         for (const item of led.manifest) {
@@ -6126,34 +6130,42 @@ var ChartCell = class {
     this.syncPresentNatives();
     this.refreshNativeCatalog();
   }
-  /** The picker's library rows: supported natives first, then the manifest. */
+  /** The supported natives in picker order: A→Z by title — registration order follows
+   *  the catalog's families, which is meaningless to the reader. This is the library
+   *  index space the picker hands back, so `libraryRows` and `addFromLibrary` MUST both
+   *  read it — indexing the unsorted catalog on add would land on a different study. */
+  supportedNatives() {
+    return this.nativeCatalog.filter((n) => n.supported).sort((a, b) => a.title.localeCompare(b.title, "en", { sensitivity: "base" }));
+  }
+  /** The picker's library rows: supported natives first (see {@link supportedNatives}),
+   *  then the manifest in the host's own order. */
   libraryRows() {
     return [
-      ...this.nativeCatalog.filter((n) => n.supported).map((n) => ({ name: n.title, category: "Vela", native: true, nativeType: n.type, beta: n.beta })),
+      ...this.supportedNatives().map((n) => ({ name: n.title, category: "Vela", native: true, nativeType: n.type, beta: n.beta })),
       ...this.manifest.map((e) => ({ name: e.name, language: e.language, category: e.category }))
     ];
   }
-  /** The picker's on-chart rows: present natives first, then live instances. */
+  /** The picker's on-chart rows: native instances first, then live script instances. */
   onChartRows() {
     return [
-      ...this.nativeCatalog.filter((n) => n.present).map((n) => ({ name: n.title, native: true, nativeType: n.type })),
+      ...this.nativeHandles().map((h) => ({ name: h.title, native: true, nativeType: h.nativeType })),
       ...this.instances.map((it) => ({ name: it.entry.name, language: it.entry.language }))
     ];
   }
   /** Add by picker LIBRARY index (natives precede the manifest — mirrors libraryRows). */
   addFromLibrary(index) {
-    const natives = this.nativeCatalog.filter((n) => n.supported);
+    const natives = this.supportedNatives();
     if (index < natives.length) this.addNative(natives[index].type);
     else {
       const entry = this.manifest[index - natives.length];
       if (entry) this.addManifestInstance(entry);
     }
   }
-  /** Remove by picker ON-CHART index (present natives precede instances). */
+  /** Remove by picker ON-CHART index (native instances precede script instances — mirrors onChartRows). */
   removeFromChart(index) {
-    const present = this.nativeCatalog.filter((n) => n.present);
-    if (index < present.length) this.removeNative(present[index].type);
-    else this.removeInstance(index - present.length);
+    const natives = this.nativeHandles();
+    if (index < natives.length) this.removeNative(natives[index]);
+    else this.removeInstance(index - natives.length);
   }
   /**
    * Add a script indicator through the PUBLIC seam (`ctx.addIndicator`) — same undo/
@@ -6213,30 +6225,42 @@ var ChartCell = class {
     it.handle = null;
     this.deps.onIndicatorsChanged(this.id);
   }
-  /** Add a native indicator (single-instance per type — the core dedupes). */
+  /** Add a native indicator. A multi-instance type gets a fresh instance every time; a
+   *  single-instance type already on the chart hands back its existing one — nothing
+   *  changed, so nothing enters the undo timeline. */
   addNative(type) {
-    this.inner?.addNativeIndicator(type);
+    const chart = this.inner;
+    if (!chart) return;
+    const before = new Set(chart.indicators().map((h) => h.id));
+    let added = chart.addNativeIndicator(type);
     this.syncPresentNatives();
     this.refreshNativeCatalog();
+    if (before.has(added.id)) return;
     this.history.push({
       undo: () => {
-        this.inner?.addNativeIndicator(type).remove();
+        added?.remove();
+        added = null;
         this.refreshNativeCatalog();
       },
       redo: () => {
-        this.inner?.addNativeIndicator(type);
+        added = this.inner?.addNativeIndicator(type) ?? null;
         this.refreshNativeCatalog();
       }
     });
   }
-  removeNative(type) {
-    this.inner?.addNativeIndicator(type).remove();
+  removeNative(handle) {
+    handle.remove();
     this.refreshNativeCatalog();
   }
-  /** Sync mirror of the chart's present native types — the removal handler diffs
-   *  against it to identify (and record) whichever type was just removed. */
+  /** The chart's native instances, insertion order — the picker's on-chart rows and
+   *  the removal index space (script instances follow them). */
+  nativeHandles() {
+    return this.inner?.indicators().filter((h) => h.nativeType !== void 0) ?? [];
+  }
+  /** Sync mirror of the chart's native instances — the removal handler looks the
+   *  removed id up here (the registry has already forgotten it) to record its type. */
   syncPresentNatives() {
-    this.presentNatives = this.inner?.presentNativeIndicators() ?? [];
+    this.presentNatives = this.nativeHandles().map((h) => ({ id: h.id, type: h.nativeType }));
   }
   /** Refresh the native catalog (supported/present flags) for this cell's market. */
   refreshNativeCatalog() {

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

@@ -1,4 +1,4 @@
-import { overlayScrollbarCss, injectStyles, isDarkColor, mix, HIGHLIGHT, ACCENT_BRIGHT, ACCENT, withAlpha, iconAt, iconEl, BULLISH, BEARISH, WARNING, NEUTRAL } from './chunk-6DPAYEGO.js';
+import { overlayScrollbarCss, injectStyles, isDarkColor, mix, HIGHLIGHT, ACCENT_BRIGHT, ACCENT, withAlpha, 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';
@@ -2185,8 +2185,21 @@ function buildColorPicker(color, theme, onChange) {
   };
   const recentRow = document.createElement("div");
   recentRow.style.cssText = "display:flex;align-items:center;gap:5px;flex-wrap:wrap;border-top:1px solid var(--vela-border);padding-top:9px;";
+  const recentSwatches = document.createElement("div");
+  recentSwatches.style.cssText = "display:contents;";
+  const add = document.createElement("label");
+  add.style.cssText = `width:17px;height:17px;border-radius:var(--vela-radius-sm);border:1px dashed var(--vela-border-strong);cursor:pointer;display:flex;align-items:center;justify-content:center;color:${theme.textColor};font:14px ${theme.fontFamily};position:relative;`;
+  add.textContent = "+";
+  const customInput = document.createElement("input");
+  customInput.type = "color";
+  customInput.value = curHex;
+  customInput.style.cssText = "position:absolute;inset:0;opacity:0;cursor:pointer;";
+  customInput.addEventListener("input", () => previewHex(customInput.value));
+  customInput.addEventListener("change", () => pickHex(customInput.value, true));
+  add.appendChild(customInput);
+  recentRow.append(recentSwatches, add);
   const renderRecents = () => {
-    recentRow.replaceChildren();
+    recentSwatches.replaceChildren();
     for (const c of recents) {
       const sw = document.createElement("button");
       sw.type = "button";
@@ -2195,18 +2208,8 @@ function buildColorPicker(color, theme, onChange) {
         e.stopPropagation();
         pickHex(c);
       });
-      recentRow.appendChild(sw);
+      recentSwatches.appendChild(sw);
     }
-    const add = document.createElement("label");
-    add.style.cssText = `width:17px;height:17px;border-radius:var(--vela-radius-sm);border:1px dashed var(--vela-border-strong);cursor:pointer;display:flex;align-items:center;justify-content:center;color:${theme.textColor};font:14px ${theme.fontFamily};position:relative;`;
-    add.textContent = "+";
-    const input = document.createElement("input");
-    input.type = "color";
-    input.value = curHex;
-    input.style.cssText = "position:absolute;inset:0;opacity:0;cursor:pointer;";
-    input.addEventListener("input", () => pickHex(input.value, true));
-    add.appendChild(input);
-    recentRow.appendChild(add);
   };
   const opLabel = document.createElement("div");
   opLabel.textContent = "Opacity";
@@ -2246,14 +2249,18 @@ function buildColorPicker(color, theme, onChange) {
   function emit() {
     onChange(combineColor(curHex, curAlpha));
   }
-  function pickHex(hex, custom = false) {
+  function previewHex(hex) {
     curHex = splitColor(hex).hex6;
-    addRecent(curHex);
     paintSelection();
     paintOpacity();
-    if (custom) renderRecents();
     emit();
   }
+  function pickHex(hex, custom = false) {
+    previewHex(hex);
+    addRecent(curHex);
+    customInput.value = curHex;
+    if (custom) renderRecents();
+  }
   renderRecents();
   paintSelection();
   paintOpacity();

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

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