@luxalgo/vela 0.5.1 → 0.5.2

package/dist/widget.js

@@ -1,12 +1,12 @@
-import { Glider, WidgetHistory, localStorageAdapter, decodeState, prefixedSymbol, SymbolPicker, IndicatorPicker, TimeframeQuick, Topbar, PanelDock, ObjectTree, DataWindow, ChartContextMenu, Toast, Watermark, Statusline, Bottombar, ZOOM_IN, ZOOM_OUT, PAN_FAST, ShortcutsHelp, indicatorLedger, sanitizeState, legacyWidgetState, parsePersisted, statuslineInkOf, toolShortcutHints, resolveIndicators, encodeState } from './chunk-5SE4PL3H.js';
-export { Bottombar, ChartContextMenu, DataWindow, IndicatorPicker, ObjectTree, PanelDock, RANGE_PRESETS, ShortcutsHelp, Statusline, SymbolPicker, TimeframeQuick, Topbar, Watermark, dataWindowSections, decimalsFor, decodeState, encodeState, filterSymbols, fmtChange, fmtPrice, legacyWidgetState, loadPersisted, localStorageAdapter, parsePersisted, parseTimeframe, priceStyleLabel, resolveIndicators, sanitizeState, savePersisted, timeframeLabel, timeframeMs } from './chunk-5SE4PL3H.js';
-import { registerBuiltinChartTypes, resolveTheme, parseSymbol, Vela, normalizeTimezone } from './chunk-FNOMKHEZ.js';
-export { TIMEZONES, normalizeTimezone, tzButtonLabel, tzMenuLabel, tzOffset } from './chunk-FNOMKHEZ.js';
-import { widgetAttachments, legendActionsProviderFor, resolveEngines } from './chunk-S6F6SQ2L.js';
-export { DEFAULT_PANEL_MAX_WIDTH, DEFAULT_PANEL_MIN_WIDTH, DEFAULT_PANEL_ORDER, DEFAULT_PANEL_WIDTH, SidePanel, clampPanelWidth, registerSidePanel, registerWidgetAction, registerWidgetAttachment, sidePanels, unregisterSidePanel, unregisterWidgetAction, unregisterWidgetAttachment, widgetActions, widgetAttachments } from './chunk-S6F6SQ2L.js';
-import { ensureUIHost, KeymapManager, Menu, applyPlotOverlayTokens, isEditableTarget } from './chunk-AIW3EJUE.js';
-import './chunk-ULIX6AE2.js';
-import { injectStyles } from './chunk-EP6NDJYK.js';
+import { Glider, WidgetHistory, localStorageAdapter, decodeState, prefixedSymbol, SymbolPicker, IndicatorPicker, TimeframeQuick, Topbar, PanelDock, ObjectTree, DataWindow, ChartContextMenu, Toast, Watermark, Statusline, Bottombar, MobileBar, DrawingPill, LayoutModeController, ZOOM_IN, ZOOM_OUT, PAN_FAST, ShortcutsHelp, TimeframeDrawer, RANGE_PRESETS, DrawingsDrawer, MoreDrawer, priceStyleIcon, priceStyleLabel, TimezoneDrawer, PriceScaleDrawer, indicatorLedger, sanitizeState, legacyWidgetState, parsePersisted, statuslineInkOf, toolShortcutHints, resolveIndicators, encodeState } from './chunk-Y7TK4ZWK.js';
+export { Bottombar, ChartContextMenu, DataWindow, IndicatorPicker, ObjectTree, PanelDock, RANGE_PRESETS, ShortcutsHelp, Statusline, SymbolPicker, TimeframeQuick, Topbar, Watermark, dataWindowSections, decimalsFor, decodeState, encodeState, filterSymbols, fmtChange, fmtPrice, legacyWidgetState, loadPersisted, localStorageAdapter, parsePersisted, parseTimeframe, priceStyleLabel, resolveIndicators, sanitizeState, savePersisted, timeframeLabel, timeframeMs } from './chunk-Y7TK4ZWK.js';
+import { registerBuiltinChartTypes, resolveTheme, parseSymbol, buildToolbar, priceStyleIds, Vela, normalizeTimezone } from './chunk-RRFGWZNJ.js';
+export { TIMEZONES, normalizeTimezone, tzButtonLabel, tzMenuLabel, tzOffset } from './chunk-RRFGWZNJ.js';
+import { widgetActions, widgetAttachments, legendActionsProviderFor, resolveEngines } from './chunk-B5TIKQJ5.js';
+export { DEFAULT_PANEL_MAX_WIDTH, DEFAULT_PANEL_MIN_WIDTH, DEFAULT_PANEL_ORDER, DEFAULT_PANEL_WIDTH, SidePanel, clampPanelWidth, registerSidePanel, registerWidgetAction, registerWidgetAttachment, sidePanels, unregisterSidePanel, unregisterWidgetAction, unregisterWidgetAttachment, widgetActions, widgetAttachments } from './chunk-B5TIKQJ5.js';
+import { ensureUIHost, KeymapManager, Menu, applyPlotOverlayTokens, isEditableTarget } from './chunk-P556H6EA.js';
+import './chunk-ATPU5CI6.js';
+import { injectStyles } from './chunk-LJLZR44Y.js';
 
 // src/widget/url-state.ts
 var PARAMS = [
@@ -47,8 +47,8 @@ function writeUrlState(state) {
 var DEFAULT_TIMEFRAMES = ["1", "5", "15", "60", "240", "D", "W"];
 var WIDGET_STYLE_ID = "vela-widget";
 var WIDGET_CSS = `
-.vela-widget { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--vela-bg); }
-.vela-widget-main { display: flex; flex-direction: row; flex: 1 1 auto; min-height: 0; }
+.vela-widget { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--vela-bg); }
+.vela-widget-main { position: relative; display: flex; flex-direction: row; flex: 1 1 auto; min-height: 0; }
 .vela-widget-chart { position: relative; flex: 1 1 auto; min-width: 0; }
 `;
 var VelaWidget = class {
@@ -67,6 +67,8 @@ var VelaWidget = class {
     this.onRootKeydown = (ev) => this.routeTyping(ev);
     /** Indicator titles (the in-chart legend rows) shown — reapplied across rebuilds. */
     this.indicatorTitlesOn = true;
+    /** Plot values beside the legend titles shown — reapplied across rebuilds. */
+    this.indicatorValuesOn = true;
     this.pendingRange = null;
     /** Symbol already reported as unservable (the core re-reports on every index settle). */
     this.unresolvedToasted = null;
@@ -110,6 +112,15 @@ var VelaWidget = class {
     this.indicatorsPromise = null;
     this.destroyed = false;
     this.buildSeq = 0;
+    this.tfDrawer = null;
+    this.drawingsDrawer = null;
+    this.moreDrawer = null;
+    this.timezoneDrawer = null;
+    this.priceScaleDrawer = null;
+    /** Plot-local y of the last price-axis long-press (targets the pane under the finger). */
+    this.priceScalePressY = 0;
+    /** The active range chip id (both bottom bars + the timeframe drawer mirror it). */
+    this.activeRangeId = null;
     const hostEl = typeof container === "string" ? document.querySelector(container) : container;
     if (!hostEl) throw new Error(`VelaWidget: container not found: ${String(container)}`);
     registerBuiltinChartTypes();
@@ -135,6 +146,7 @@ var VelaWidget = class {
     this.bars = Number(fromUrl.bars ?? bootCell?.bars ?? opts.bars ?? 1e3);
     this.watermarkOn = bootCell?.watermark !== void 0 ? bootCell.watermark : opts.watermark !== false;
     this.indicatorTitlesOn = bootCell?.indicatorTitles ?? true;
+    this.indicatorValuesOn = bootCell?.indicatorValues ?? true;
     this.favs = boot?.favorites ? [...boot.favorites] : [];
     this.savedConfig = bootCell?.rendererConfig ?? null;
     this.savedDrawings = bootCell?.drawings ?? null;
@@ -154,7 +166,7 @@ var VelaWidget = class {
         this.trackDialog(open);
       }
     });
-    this.indicatorPicker = new IndicatorPicker({
+    this.indicatorPicker = opts.indicatorPicker !== false ? new IndicatorPicker({
       host: this.root,
       library: () => [
         ...this.nativeCatalog.filter((n) => n.supported).map((n) => ({ name: n.title, category: "Vela", native: true, nativeType: n.type, beta: n.beta })),
@@ -174,17 +186,21 @@ var VelaWidget = class {
         if (i < present.length) this.removeNative(present[i].type);
         else this.removeInstance(i - present.length);
       },
-      onOpenChange: (open) => this.trackDialog(open)
-    });
+      onOpenChange: (open) => {
+        if (open) this.inner?.renderer.closeDialogs();
+        this.trackDialog(open);
+      }
+    }) : null;
     this.tfQuick = new TimeframeQuick({
       host: this.root,
       onApply: (tf) => this.setTimeframe(tf),
       onOpenChange: (open) => this.trackDialog(open)
     });
+    const picker = this.indicatorPicker;
     this.topbar = new Topbar(this.root, {
       symbol: this.symbol,
       onSymbolClick: () => this.symbolPicker.open(),
-      onIndicatorsClick: () => this.indicatorPicker.open(),
+      ...picker ? { onIndicatorsClick: () => picker.open() } : {},
       onUndoClick: () => this.history.undo(),
       onRedoClick: () => this.history.redo(),
       onScreenshotClick: () => this.downloadScreenshot(),
@@ -233,7 +249,21 @@ var VelaWidget = class {
       onTimezone: (zone) => this.setTimezone(zone),
       onSettingsClick: () => this.inner?.renderer.openSettings()
     }) : null;
+    this.mobileBar = opts.bottombar !== false ? new MobileBar(this.root, {
+      symbol: this.symbol,
+      timeframe: this.timeframe,
+      onSymbolClick: () => this.symbolPicker.open(),
+      onTimeframeClick: () => this.openTimeframeDrawer(),
+      ...picker ? { onIndicatorsClick: () => picker.open() } : {},
+      getContext: () => this.context(),
+      onDrawingsClick: () => this.openDrawingsDrawer(),
+      onMoreClick: () => this.openMoreDrawer(),
+      onSettingsClick: () => this.inner?.renderer.openSettings()
+    }) : null;
+    this.drawingPill = new DrawingPill(this.chartHost);
     hostEl.appendChild(this.root);
+    this.layoutCtl = new LayoutModeController(this.root, opts.layoutMode ?? "auto");
+    this.layoutCtl.onChange((mode) => this.onLayoutModeChange(mode));
     this.keymap = new KeymapManager();
     this.keymap.attach(this.root);
     this.keymap.register({
@@ -282,7 +312,7 @@ var VelaWidget = class {
     this.keymap.register({ id: "view.zoom-out", keys: "mod+arrowdown", label: "Zoom out", category: "Chart", run: () => this.glider.zoom(ZOOM_OUT) });
     this.keymap.register({ id: "view.pan-left", keys: "mod+arrowleft", label: "Pan toward history", category: "Chart", run: () => this.inner?.panBy(-PAN_FAST) });
     this.keymap.register({ id: "view.pan-right", keys: "mod+arrowright", label: "Pan toward now", category: "Chart", run: () => this.inner?.panBy(PAN_FAST) });
-    this.keymap.register({ id: "indicators.open", keys: "/", label: "Open the indicator picker", category: "Indicators", run: () => this.indicatorPicker.open() });
+    if (picker) this.keymap.register({ id: "indicators.open", keys: "/", label: "Open the indicator picker", category: "Indicators", run: () => picker.open() });
     this.keymap.register({
       id: "help.shortcuts",
       keys: "?",
@@ -299,6 +329,86 @@ var VelaWidget = class {
     this.mountAttachments();
     if (opts.autofocus) this.inner?.renderer.focus();
   }
+  /** The mode flipped (container resized across the breakpoint, or a coarse-pointer
+   *  change). Close the open surfaces — a desktop card must not linger over the
+   *  mobile chrome (and vice versa) — and re-present the renderer's own chrome. */
+  onLayoutModeChange(mode) {
+    this.symbolPicker.close();
+    this.indicatorPicker?.close();
+    this.tfDrawer?.close();
+    this.drawingsDrawer?.close();
+    this.moreDrawer?.close();
+    this.timezoneDrawer?.close();
+    this.priceScaleDrawer?.close();
+    this.inner?.renderer.closeDialogs();
+    this.inner?.renderer.setLayoutMode(mode);
+  }
+  // ── mobile drawers (built on first open; every list is read live at open time) ──
+  openTimeframeDrawer() {
+    this.tfDrawer ?? (this.tfDrawer = new TimeframeDrawer({
+      host: this.root,
+      timeframes: this.opts.timeframes ?? DEFAULT_TIMEFRAMES,
+      ranges: RANGE_PRESETS,
+      currentTimeframe: () => this.timeframe,
+      activeRange: () => this.activeRangeId,
+      onTimeframe: (tf) => this.setTimeframe(tf),
+      onRange: (preset) => this.applyRange(preset),
+      onOpenChange: (open) => this.trackDialog(open)
+    }));
+    this.tfDrawer.open();
+  }
+  openDrawingsDrawer() {
+    this.drawingsDrawer ?? (this.drawingsDrawer = new DrawingsDrawer({
+      host: this.root,
+      toolbar: () => buildToolbar(this.opts.drawings).definition,
+      currentTool: () => this.inner?.drawings.getTool() ?? null,
+      isFavorite: (type) => this.inner?.drawings.isFavorite(type) ?? false,
+      onFavorite: (type, on) => this.inner?.drawings.setFavorite(type, on),
+      onSelect: (type) => this.inner?.drawings.setTool(type),
+      onOpenChange: (open) => this.trackDialog(open)
+    }));
+    this.drawingsDrawer.open();
+  }
+  openMoreDrawer() {
+    this.moreDrawer ?? (this.moreDrawer = new MoreDrawer({
+      host: this.root,
+      onUndo: () => this.history.undo(),
+      onRedo: () => this.history.redo(),
+      onScreenshot: () => this.downloadScreenshot(),
+      canUndo: () => this.history.canUndo,
+      canRedo: () => this.history.canRedo,
+      priceStyles: () => priceStyleIds().map((id) => ({ id, label: priceStyleLabel(id), icon: priceStyleIcon(id) })),
+      priceStyle: () => this.priceStyle,
+      onPriceStyle: (id) => this.setPriceStyle(id),
+      panels: () => [...this.dock.list()],
+      onTogglePanel: (id) => this.dock.toggle(id),
+      alerts: () => this.alerts,
+      // Left-aligned actions have their own bottom-bar stop — only the rest
+      // lands in the drawer, or every left action would appear twice.
+      actions: () => widgetActions("topbar", this.context()).filter((a) => a.align !== "left").map((a) => ({ label: a.label, icon: a.icon, run: () => a.run(this.context()) })),
+      onOpenChange: (open) => this.trackDialog(open)
+    }));
+    this.moreDrawer.open();
+  }
+  openTimezoneDrawer() {
+    this.timezoneDrawer ?? (this.timezoneDrawer = new TimezoneDrawer({
+      host: this.root,
+      timezone: () => this.timezone,
+      onTimezone: (zone) => this.setTimezone(zone),
+      onOpenChange: (open) => this.trackDialog(open)
+    }));
+    this.timezoneDrawer.open();
+  }
+  openPriceScaleDrawer(y) {
+    this.priceScalePressY = y;
+    this.priceScaleDrawer ?? (this.priceScaleDrawer = new PriceScaleDrawer({
+      host: this.root,
+      chart: () => this.inner,
+      pressY: () => this.priceScalePressY,
+      onOpenChange: (open) => this.trackDialog(open)
+    }));
+    this.priceScaleDrawer.open();
+  }
   /** Mount registered attachments not yet mounted on this widget (idempotent per id). */
   mountAttachments() {
     for (const att of widgetAttachments()) {
@@ -345,6 +455,7 @@ var VelaWidget = class {
   refreshActions() {
     this.mountAttachments();
     this.topbar.renderActions();
+    this.mobileBar?.renderActions();
     this.dock.refresh();
     if (this.inner) this.inner.renderer.setLegendActions(legendActionsProviderFor(this.inner, () => this.context()));
   }
@@ -360,6 +471,7 @@ var VelaWidget = class {
   syncTimeframeChrome(tf) {
     this.timeframe = tf;
     this.topbar.setTimeframe(tf);
+    this.mobileBar?.setTimeframe(tf);
     this.watermark?.update(this.symbol, tf);
     this.statusline?.setMeta(tf, this.providerLabel());
   }
@@ -374,6 +486,7 @@ var VelaWidget = class {
   }
   setTimeframe(tf) {
     if (tf === this.timeframe || this.destroyed) return;
+    this.activeRangeId = null;
     this.bottombar?.setActiveRange(null);
     this.rangeBars = 0;
     this.syncTimeframeChrome(tf);
@@ -391,6 +504,7 @@ var VelaWidget = class {
     this.unresolvedToasted = null;
     this.symbol = symbol;
     this.topbar.setSymbol(symbol);
+    this.mobileBar?.setSymbol(symbol);
     this.statusline?.setSymbol(symbol);
     this.objectTree.setSymbol(symbol);
     this.watermark?.update(symbol, this.timeframe);
@@ -419,6 +533,7 @@ var VelaWidget = class {
     if (this.bars > 0) cell.bars = this.bars;
     cell.watermark = this.watermarkOn;
     cell.indicatorTitles = this.indicatorTitlesOn;
+    cell.indicatorValues = this.indicatorValuesOn;
     if (this.inner) {
       cell.rendererConfig = this.inner.renderer.getConfig();
       cell.drawings = this.inner.drawings.toJSON();
@@ -464,6 +579,7 @@ var VelaWidget = class {
       if (style && style !== this.priceStyle) this.setPriceStyle(style);
       if (cell.watermark !== void 0 && cell.watermark !== this.watermarkOn) this.setWatermarkVisible(cell.watermark);
       if (cell.indicatorTitles !== void 0 && cell.indicatorTitles !== this.indicatorTitlesOn) this.setIndicatorTitlesVisible(cell.indicatorTitles);
+      if (cell.indicatorValues !== void 0 && cell.indicatorValues !== this.indicatorValuesOn) this.setIndicatorValuesVisible(cell.indicatorValues);
       if (cell.rendererConfig != null) {
         this.savedConfig = cell.rendererConfig;
         this.inner?.renderer.applyConfig(cell.rendererConfig);
@@ -566,6 +682,12 @@ var VelaWidget = class {
     this.inner?.renderer.set("indicatorTitles", visible);
     this.markStateDirty();
   }
+  /** Show/hide the plot values beside every indicator's legend title (persisted). */
+  setIndicatorValuesVisible(visible) {
+    this.indicatorValuesOn = visible;
+    this.inner?.renderer.set("indicatorValues", visible);
+    this.markStateDirty();
+  }
   /** Applied LIVE (renderer feature) — no rebuild; persists across rebuilds. */
   setPriceStyle(style) {
     this.priceStyle = style;
@@ -612,6 +734,8 @@ var VelaWidget = class {
    */
   applyRange(preset) {
     if (this.destroyed) return;
+    this.activeRangeId = preset.id;
+    this.bottombar?.setActiveRange(preset.id);
     this.pendingRange = preset;
     const tfChanged = preset.tf !== this.timeframe;
     const deeper = preset.bars > Math.max(this.bars, this.rangeBars);
@@ -650,16 +774,24 @@ var VelaWidget = class {
     this.shortcutsHelp?.destroy();
     this.contextMenu.destroy();
     this.symbolPicker.destroy();
-    this.indicatorPicker.destroy();
+    this.indicatorPicker?.destroy();
     this.tfQuick.destroy();
     this.statusline?.destroy();
     this.watermark?.destroy();
     this.bottombar?.destroy();
+    this.mobileBar?.destroy();
+    this.drawingPill.destroy();
+    this.tfDrawer?.destroy();
+    this.drawingsDrawer?.destroy();
+    this.moreDrawer?.destroy();
+    this.timezoneDrawer?.destroy();
+    this.priceScaleDrawer?.destroy();
     this.toast?.destroy();
     this.alertsMenu?.destroy();
     this.glider.stop();
     this.history.destroy();
     this.keymap.destroy();
+    this.layoutCtl.destroy();
     this.root.remove();
   }
   /** Destroy + recreate the inner chart with the current symbol/timeframe, then
@@ -681,6 +813,7 @@ var VelaWidget = class {
       statusline: _statusline,
       watermark: _watermark,
       bottombar: _bottombar,
+      layoutMode: _layoutMode,
       ...chartOpts
     } = this.opts;
     const chart = new Vela(this.chartHost, {
@@ -696,11 +829,17 @@ var VelaWidget = class {
     for (const [language, make] of Object.entries(resolveEngines(engines))) chart.registerEngine(language, make());
     this.inner = chart;
     this.symbolPicker.setSource(() => chart.data.symbols());
+    if (this.layoutCtl !== void 0) chart.renderer.setLayoutMode(this.layoutCtl.current);
     this.objectTree.setSymbol(this.symbol);
     chart.renderer.setLegendActions(legendActionsProviderFor(chart, () => this.context()));
     if (chart.renderer.supports("historyChords")) chart.renderer.set("historyChords", false);
     this.dock.onChart(chart);
     this.contextMenu.onChart(chart);
+    chart.renderer.onAxisLongPress((e) => {
+      if (this.layoutCtl.current !== "mobile") return;
+      if (e.axis === "time") this.openTimezoneDrawer();
+      else this.openPriceScaleDrawer(e.y);
+    });
     this.refreshNativeCatalog();
     chart.on("indicator:added", () => {
       this.syncPresentNatives();
@@ -748,6 +887,8 @@ var VelaWidget = class {
     chart.on("load:end", () => {
       this.volumeMayBePending = false;
     });
+    chart.on("load:start", () => this.watermark?.setLoading(true));
+    chart.on("load:end", () => this.watermark?.setLoading(false));
     chart.on("theme:changed", (t) => {
       this.opts.theme = t;
       ensureUIHost(this.root, t);
@@ -759,6 +900,7 @@ var VelaWidget = class {
       if (symbol !== this.symbol) {
         this.symbol = symbol;
         this.topbar.setSymbol(symbol);
+        this.mobileBar?.setSymbol(symbol);
         this.statusline?.setSymbol(symbol);
         this.objectTree.setSymbol(symbol);
         this.watermark?.update(symbol, this.timeframe);
@@ -793,11 +935,13 @@ var VelaWidget = class {
       this.lastCrossTime = e.time;
     });
     this.topbar.renderActions();
+    this.mobileBar?.renderActions();
     if (this.savedConfig != null) chart.renderer.applyConfig(this.savedConfig);
     if (this.savedDrawings != null) chart.drawings.fromJSON(this.savedDrawings);
     if (this.priceStyle !== "candles") chart.renderer.set("priceStyle", this.priceStyle);
     if (this.timezone !== "Etc/UTC") chart.renderer.set("timezone", this.timezone);
     if (!this.indicatorTitlesOn) chart.renderer.set("indicatorTitles", false);
+    if (!this.indicatorValuesOn) chart.renderer.set("indicatorValues", false);
     chart.renderer.onConfigChanged(() => {
       const zone = chart.renderer.get("timezone");
       if (typeof zone === "string" && normalizeTimezone(zone) !== normalizeTimezone(this.timezone)) {
@@ -808,6 +952,7 @@ var VelaWidget = class {
     });
     this.syncPlotOverlayTokens();
     this.statusline?.onChart(chart);
+    this.drawingPill.onChart(chart);
     this.syncStatuslineColors();
     const advanced = {
       title: "Advanced",
@@ -855,6 +1000,12 @@ var VelaWidget = class {
               label: "Titles",
               get: () => this.indicatorTitlesOn,
               set: (v) => this.setIndicatorTitlesVisible(v)
+            },
+            {
+              kind: "toggle",
+              label: "Values",
+              get: () => this.indicatorValuesOn,
+              set: (v) => this.setIndicatorValuesVisible(v)
             }
           ]
         },
@@ -901,7 +1052,7 @@ var VelaWidget = class {
       if (this.inner !== chart || this.destroyed) return;
       this.nativeCatalog = list.map((n) => ({ type: n.type, title: n.title, supported: n.supported, present: n.present, beta: n.beta }));
       this.syncIndicatorCount();
-      this.indicatorPicker.sync();
+      this.indicatorPicker?.sync();
     });
   }
   /** Add a native indicator (single-instance per type — the core dedupes). */