@luxalgo/vela 0.5.1 → 0.5.2

package/dist/workspace.d.cts

@@ -1,9 +1,9 @@
-import { O as OHLCV, V as VisibleRangePreset, a as VisibleRange, b as VelaOptions, c as VelaTheme, N as NativeBackend } from './options-DbQholFV.cjs';
-import { S as SyncSetting, V as VelaStorage, C as CellState, W as WidgetHistory, R as ResolvedIndicator, a as RangePreset, T as TrackSizes, b as VelaShellOptions, c as SyncOptions, d as SyncKind, e as WorkspaceState } from './history-DX3Zne3a.cjs';
-export { f as ChartState, P as PanelsState, g as decodeState, h as encodeState, s as sanitizeState } from './history-DX3Zne3a.cjs';
+import { O as OHLCV, V as VisibleRangePreset, a as VisibleRange, b as VelaOptions, c as VelaTheme, N as NativeBackend } from './options-XTBpbx0s.cjs';
+import { S as SyncSetting, V as VelaStorage, C as CellState, W as WidgetHistory, R as ResolvedIndicator, a as RangePreset, T as TrackSizes, b as VelaShellOptions, c as SyncOptions, d as SyncKind, e as WorkspaceState } from './history-Cf1lVsap.cjs';
+export { f as ChartState, P as PanelsState, g as decodeState, h as encodeState, s as sanitizeState } from './history-Cf1lVsap.cjs';
 import { K as KeymapManager } from './keymap-CGOz5F5f.cjs';
-import { I as IndicatorHandle, S as ScriptingEngine, W as WidgetContext, V as Vela, a as ScriptRun } from './contributions-BlV3kb0O.cjs';
-import { M as MarketDataFeed } from './DataProvider-BBQ3Hr21.cjs';
+import { I as IndicatorHandle, S as ScriptingEngine, W as WidgetContext, V as Vela, a as ScriptRun } from './contributions-Ci_i3IN2.cjs';
+import { M as MarketDataFeed } from './DataProvider-gnzv-dgc.cjs';
 
 /** The cells that follow `originId` under `setting` — PURE (never includes the origin). */
 declare function syncTargets(originId: string, setting: SyncSetting | undefined, cellIds: readonly string[]): string[];
@@ -146,12 +146,16 @@ declare class ChartCell {
     private watermarkOn;
     /** Indicator titles (this cell's in-chart legend rows) shown. */
     private indicatorTitlesOn;
+    /** Plot values beside this cell's legend titles shown. */
+    private indicatorValuesOn;
     private destroyed;
     constructor(id: string, gridHost: HTMLElement, seed: CellBoot, deps: CellDeps);
     /** Show/hide this cell's symbol watermark (persisted per cell). */
     setWatermarkVisible(visible: boolean): void;
     /** Show/hide this cell's indicator titles — the in-chart legend rows (persisted per cell). */
     setIndicatorTitlesVisible(visible: boolean): void;
+    /** Show/hide the plot values beside this cell's legend titles (persisted per cell). */
+    setIndicatorValuesVisible(visible: boolean): void;
     /** The LIVE chart of this cell — never cache it across a layout change (the cell's
      *  identity is what endures; the chart dies with the cell). */
     get chart(): Vela;
@@ -169,6 +173,9 @@ declare class ChartCell {
      *  colors and direction rule (candle bodies by close-vs-open, baseline by position
      *  against the live baseline price, …) instead of the fixed theme tokens. */
     private syncStatuslineColors;
+    /** Multi-cell grids keep the status line on one row and hide what doesn't fit —
+     *  the workspace flips this with the layout (see Statusline.setFitMode). */
+    setStatuslineFit(on: boolean): void;
     /** The workspace shell keeps the app theme; the cell host's tokens re-derive from
      *  the LIVE plot surface (see {@link applyPlotOverlayTokens}). */
     private syncPlotOverlayTokens;
@@ -411,6 +418,7 @@ declare class VelaWorkspace {
     /** The side-panel column, shared by the whole grid. */
     private readonly dock;
     private readonly symbolPicker;
+    /** Null when the host disabled it (`indicatorPicker: false`). */
     private readonly indicatorPicker;
     private readonly tfQuick;
     private shortcutsHelp;
@@ -453,6 +461,17 @@ declare class VelaWorkspace {
     private openDialogs;
     private alerts;
     private alertsMenu;
+    /** Writes `data-layout` on the root and pushes mode flips into every cell's renderer. */
+    private layoutCtl;
+    private readonly mobileBar;
+    private readonly drawingPill;
+    private tfDrawer;
+    private drawingsDrawer;
+    private moreDrawer;
+    private timezoneDrawer;
+    private priceScaleDrawer;
+    /** Plot-local y of the last price-axis long-press (targets the pane under the finger). */
+    private priceScalePressY;
     private readonly attachmentDisposers;
     /** The single grid-wide attribution mark — re-inked on a live theme swap. */
     private attributionMark;
@@ -551,10 +570,13 @@ declare class VelaWorkspace {
     private applySyncSetting;
     /**
      * Mirror an origin cell's pointer time onto its same-group followers as GHOST
-     * crosshairs (`renderer.setExternalCrosshair`). Leaving the origin propagates
-     * `null` (the event already carries it) and clears every ghost. No busy guard
-     * needed: an external crosshair never re-emits `onCrosshairMove` — the flow is
-     * one-way by port contract, so no echo loop can exist.
+     * crosshairs (`renderer.setExternalCrosshair`). The horizontal price level rides
+     * along ONLY to followers showing the same ticker — price scales are comparable
+     * there, while an origin's price painted on another market's pane would be noise.
+     * Leaving the origin propagates `null` (the event already carries it) and clears
+     * every ghost. No busy guard needed: an external crosshair never re-emits
+     * `onCrosshairMove` — the flow is one-way by port contract, so no echo loop can
+     * exist.
      */
     private propagateCrosshair;
     /**
@@ -599,6 +621,20 @@ declare class VelaWorkspace {
     private onCellIndicatorsChanged;
     /** Timeframe changes routed from the topbar menu / quick entry (chip state follows). */
     private setActiveTimeframe;
+    /** 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 every cell's own chrome. */
+    private onLayoutModeChange;
+    /** Push the layout-shape-dependent chrome onto every cell: multi-cell grids keep
+     *  the status line on one row (segments that don't fit hide), and on MOBILE their
+     *  legends' fold chip routes to the object tree instead of unfolding in place —
+     *  per-indicator controls live there (the legend rows have no room in a grid cell). */
+    private syncCellPresentation;
+    private openTimeframeDrawer;
+    private openDrawingsDrawer;
+    private openMoreDrawer;
+    private openTimezoneDrawer;
+    private openPriceScaleDrawer;
     /** The aggregated alerts bell — entries carry their cell; selecting one activates it. */
     private openAlertsMenu;
     /** Mount registered attachments not yet mounted on this workspace (idempotent per id). */

package/dist/workspace.d.ts

@@ -1,9 +1,9 @@
-import { O as OHLCV, V as VisibleRangePreset, a as VisibleRange, b as VelaOptions, c as VelaTheme, N as NativeBackend } from './options-DbQholFV.js';
-import { S as SyncSetting, V as VelaStorage, C as CellState, W as WidgetHistory, R as ResolvedIndicator, a as RangePreset, T as TrackSizes, b as VelaShellOptions, c as SyncOptions, d as SyncKind, e as WorkspaceState } from './history-BTd52YMA.js';
-export { f as ChartState, P as PanelsState, g as decodeState, h as encodeState, s as sanitizeState } from './history-BTd52YMA.js';
+import { O as OHLCV, V as VisibleRangePreset, a as VisibleRange, b as VelaOptions, c as VelaTheme, N as NativeBackend } from './options-XTBpbx0s.js';
+import { S as SyncSetting, V as VelaStorage, C as CellState, W as WidgetHistory, R as ResolvedIndicator, a as RangePreset, T as TrackSizes, b as VelaShellOptions, c as SyncOptions, d as SyncKind, e as WorkspaceState } from './history-Ci3M0xLV.js';
+export { f as ChartState, P as PanelsState, g as decodeState, h as encodeState, s as sanitizeState } from './history-Ci3M0xLV.js';
 import { K as KeymapManager } from './keymap-CGOz5F5f.js';
-import { I as IndicatorHandle, S as ScriptingEngine, W as WidgetContext, V as Vela, a as ScriptRun } from './contributions-6N0rbrPC.js';
-import { M as MarketDataFeed } from './DataProvider-DGesjOJT.js';
+import { I as IndicatorHandle, S as ScriptingEngine, W as WidgetContext, V as Vela, a as ScriptRun } from './contributions-b6AVrqqG.js';
+import { M as MarketDataFeed } from './DataProvider-DTOEXKTI.js';
 
 /** The cells that follow `originId` under `setting` — PURE (never includes the origin). */
 declare function syncTargets(originId: string, setting: SyncSetting | undefined, cellIds: readonly string[]): string[];
@@ -146,12 +146,16 @@ declare class ChartCell {
     private watermarkOn;
     /** Indicator titles (this cell's in-chart legend rows) shown. */
     private indicatorTitlesOn;
+    /** Plot values beside this cell's legend titles shown. */
+    private indicatorValuesOn;
     private destroyed;
     constructor(id: string, gridHost: HTMLElement, seed: CellBoot, deps: CellDeps);
     /** Show/hide this cell's symbol watermark (persisted per cell). */
     setWatermarkVisible(visible: boolean): void;
     /** Show/hide this cell's indicator titles — the in-chart legend rows (persisted per cell). */
     setIndicatorTitlesVisible(visible: boolean): void;
+    /** Show/hide the plot values beside this cell's legend titles (persisted per cell). */
+    setIndicatorValuesVisible(visible: boolean): void;
     /** The LIVE chart of this cell — never cache it across a layout change (the cell's
      *  identity is what endures; the chart dies with the cell). */
     get chart(): Vela;
@@ -169,6 +173,9 @@ declare class ChartCell {
      *  colors and direction rule (candle bodies by close-vs-open, baseline by position
      *  against the live baseline price, …) instead of the fixed theme tokens. */
     private syncStatuslineColors;
+    /** Multi-cell grids keep the status line on one row and hide what doesn't fit —
+     *  the workspace flips this with the layout (see Statusline.setFitMode). */
+    setStatuslineFit(on: boolean): void;
     /** The workspace shell keeps the app theme; the cell host's tokens re-derive from
      *  the LIVE plot surface (see {@link applyPlotOverlayTokens}). */
     private syncPlotOverlayTokens;
@@ -411,6 +418,7 @@ declare class VelaWorkspace {
     /** The side-panel column, shared by the whole grid. */
     private readonly dock;
     private readonly symbolPicker;
+    /** Null when the host disabled it (`indicatorPicker: false`). */
     private readonly indicatorPicker;
     private readonly tfQuick;
     private shortcutsHelp;
@@ -453,6 +461,17 @@ declare class VelaWorkspace {
     private openDialogs;
     private alerts;
     private alertsMenu;
+    /** Writes `data-layout` on the root and pushes mode flips into every cell's renderer. */
+    private layoutCtl;
+    private readonly mobileBar;
+    private readonly drawingPill;
+    private tfDrawer;
+    private drawingsDrawer;
+    private moreDrawer;
+    private timezoneDrawer;
+    private priceScaleDrawer;
+    /** Plot-local y of the last price-axis long-press (targets the pane under the finger). */
+    private priceScalePressY;
     private readonly attachmentDisposers;
     /** The single grid-wide attribution mark — re-inked on a live theme swap. */
     private attributionMark;
@@ -551,10 +570,13 @@ declare class VelaWorkspace {
     private applySyncSetting;
     /**
      * Mirror an origin cell's pointer time onto its same-group followers as GHOST
-     * crosshairs (`renderer.setExternalCrosshair`). Leaving the origin propagates
-     * `null` (the event already carries it) and clears every ghost. No busy guard
-     * needed: an external crosshair never re-emits `onCrosshairMove` — the flow is
-     * one-way by port contract, so no echo loop can exist.
+     * crosshairs (`renderer.setExternalCrosshair`). The horizontal price level rides
+     * along ONLY to followers showing the same ticker — price scales are comparable
+     * there, while an origin's price painted on another market's pane would be noise.
+     * Leaving the origin propagates `null` (the event already carries it) and clears
+     * every ghost. No busy guard needed: an external crosshair never re-emits
+     * `onCrosshairMove` — the flow is one-way by port contract, so no echo loop can
+     * exist.
      */
     private propagateCrosshair;
     /**
@@ -599,6 +621,20 @@ declare class VelaWorkspace {
     private onCellIndicatorsChanged;
     /** Timeframe changes routed from the topbar menu / quick entry (chip state follows). */
     private setActiveTimeframe;
+    /** 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 every cell's own chrome. */
+    private onLayoutModeChange;
+    /** Push the layout-shape-dependent chrome onto every cell: multi-cell grids keep
+     *  the status line on one row (segments that don't fit hide), and on MOBILE their
+     *  legends' fold chip routes to the object tree instead of unfolding in place —
+     *  per-indicator controls live there (the legend rows have no room in a grid cell). */
+    private syncCellPresentation;
+    private openTimeframeDrawer;
+    private openDrawingsDrawer;
+    private openMoreDrawer;
+    private openTimezoneDrawer;
+    private openPriceScaleDrawer;
     /** The aggregated alerts bell — entries carry their cell; selecting one activates it. */
     private openAlertsMenu;
     /** Mount registered attachments not yet mounted on this workspace (idempotent per id). */

package/dist/workspace.js

@@ -1,10 +1,10 @@
-import { WidgetHistory, prefixedSymbol, Watermark, Statusline, ChartContextMenu, statuslineInkOf, indicatorLedger, Glider, localStorageAdapter, decodeState, SymbolPicker, IndicatorPicker, TimeframeQuick, Topbar, PanelDock, ObjectTree, DataWindow, Toast, Bottombar, toolShortcutHints, resolveIndicators, sanitizeState, encodeState, ZOOM_IN, ZOOM_OUT, PAN_FAST, ShortcutsHelp } from './chunk-5SE4PL3H.js';
-export { decodeState, encodeState, sanitizeState } from './chunk-5SE4PL3H.js';
-import { parseSymbol, Vela, normalizeTimezone, TypedEventBus, MultiProviderFeed, resolveTheme, createCustomMark, createAttributionMark, DrawingToolbar, defaultToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs } from './chunk-FNOMKHEZ.js';
-import { resolveEngines, legendActionsProviderFor, rendererDefaults, widgetAttachments } from './chunk-S6F6SQ2L.js';
-import { applyPlotOverlayTokens, ensureUIHost, KeymapManager, Menu, isEditableTarget } from './chunk-AIW3EJUE.js';
-import './chunk-ULIX6AE2.js';
-import { registerIcon, svg16, injectStyles } from './chunk-EP6NDJYK.js';
+import { WidgetHistory, prefixedSymbol, Watermark, Statusline, ChartContextMenu, statuslineInkOf, indicatorLedger, Glider, localStorageAdapter, decodeState, SymbolPicker, IndicatorPicker, TimeframeQuick, Topbar, PanelDock, ObjectTree, DataWindow, Toast, Bottombar, MobileBar, DrawingPill, LayoutModeController, toolShortcutHints, resolveIndicators, sanitizeState, encodeState, TimeframeDrawer, RANGE_PRESETS, DrawingsDrawer, MoreDrawer, priceStyleIcon, priceStyleLabel, TimezoneDrawer, PriceScaleDrawer, ZOOM_IN, ZOOM_OUT, PAN_FAST, ShortcutsHelp } from './chunk-Y7TK4ZWK.js';
+export { decodeState, encodeState, sanitizeState } from './chunk-Y7TK4ZWK.js';
+import { parseSymbol, Vela, normalizeTimezone, TypedEventBus, MultiProviderFeed, resolveTheme, createCustomMark, createAttributionMark, DrawingToolbar, defaultToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs, priceStyleIds } from './chunk-RRFGWZNJ.js';
+import { resolveEngines, legendActionsProviderFor, rendererDefaults, widgetActions, widgetAttachments } from './chunk-B5TIKQJ5.js';
+import { applyPlotOverlayTokens, ensureUIHost, KeymapManager, Menu, isEditableTarget } from './chunk-P556H6EA.js';
+import './chunk-ATPU5CI6.js';
+import { registerIcon, svg16, injectStyles } from './chunk-LJLZR44Y.js';
 
 // src/workspace/sync.ts
 function syncTargets(originId, setting, cellIds) {
@@ -81,6 +81,8 @@ var ChartCell = class {
     this.pendingRange = null;
     /** Indicator titles (this cell's in-chart legend rows) shown. */
     this.indicatorTitlesOn = true;
+    /** Plot values beside this cell's legend titles shown. */
+    this.indicatorValuesOn = true;
     this.destroyed = false;
     this.appTheme = deps.theme;
     const symbol = prefixedSymbol(seed);
@@ -145,10 +147,14 @@ var ChartCell = class {
     this.inner.on("load:end", () => {
       this.volumeMayBePending = false;
     });
+    this.inner.on("load:start", () => this.watermark?.setLoading(true));
+    this.inner.on("load:end", () => this.watermark?.setLoading(false));
     const tz = deps.timezone();
     if (tz !== "Etc/UTC") this.inner.renderer.set("timezone", tz);
     this.indicatorTitlesOn = seed.indicatorTitles ?? true;
     if (!this.indicatorTitlesOn) this.inner.renderer.set("indicatorTitles", false);
+    this.indicatorValuesOn = seed.indicatorValues ?? true;
+    if (!this.indicatorValuesOn) this.inner.renderer.set("indicatorValues", false);
     this.watermarkOn = seed.watermark ?? deps.watermark;
     this.watermark = deps.watermark ? new Watermark(this.host, symbol ?? "", seed.timeframe ?? "60") : null;
     if (!this.watermarkOn) this.watermark?.setVisible(false);
@@ -256,6 +262,12 @@ var ChartCell = class {
               label: "Titles",
               get: () => this.indicatorTitlesOn,
               set: (v) => this.setIndicatorTitlesVisible(v)
+            },
+            {
+              kind: "toggle",
+              label: "Values",
+              get: () => this.indicatorValuesOn,
+              set: (v) => this.setIndicatorValuesVisible(v)
             }
           ]
         },
@@ -289,6 +301,12 @@ var ChartCell = class {
     this.inner?.renderer.set("indicatorTitles", visible);
     this.deps.onStateDirty();
   }
+  /** Show/hide the plot values beside this cell's legend titles (persisted per cell). */
+  setIndicatorValuesVisible(visible) {
+    this.indicatorValuesOn = visible;
+    this.inner?.renderer.set("indicatorValues", visible);
+    this.deps.onStateDirty();
+  }
   /** The LIVE chart of this cell — never cache it across a layout change (the cell's
    *  identity is what endures; the chart dies with the cell). */
   get chart() {
@@ -333,6 +351,11 @@ var ChartCell = class {
     if (!this.statusline || !this.inner) return;
     this.statusline.setDirectionColors(...statuslineInkOf(this.inner.renderer, this.priceStyle));
   }
+  /** Multi-cell grids keep the status line on one row and hide what doesn't fit —
+   *  the workspace flips this with the layout (see Statusline.setFitMode). */
+  setStatuslineFit(on) {
+    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}). */
   syncPlotOverlayTokens() {
@@ -521,6 +544,7 @@ var ChartCell = class {
       priceStyle: this.priceStyle,
       watermark: this.watermarkOn,
       indicatorTitles: this.indicatorTitlesOn,
+      indicatorValues: this.indicatorValuesOn,
       rendererConfig: this.inner?.renderer.getConfig() ?? void 0,
       drawings: this.inner ? this.inner.drawings.toJSON() : void 0,
       // Natives from the chart's SYNC registry read — an async catalog mirror here
@@ -850,6 +874,9 @@ var CSS = `
 .vela-ws-splitter:hover::after { content: ''; position: absolute; background: var(--vela-separator-hover-line); }
 .vela-ws-splitter[data-axis='cols']:hover::after { left: calc(50% - 1px); top: 0; width: 2px; height: 100%; }
 .vela-ws-splitter[data-axis='rows']:hover::after { top: calc(50% - 1px); left: 0; height: 2px; width: 100%; }
+/* Mobile: the docked drawing-toolbar column would eat a phone-width grid \u2014 the shell's
+   drawings drawer + on-chart pill replace it (same policy as the widget's in-chart bar). */
+[data-layout='mobile'] .vela-ws-toolbar { display: none; }
 `;
 registerIcon("layout", svg16('<rect x="1.5" y="1.5" width="13" height="13" rx="1.5"/><path d="M8 1.5v13M1.5 8h13"/>'));
 function declaredOrder(cells) {
@@ -916,6 +943,13 @@ var VelaWorkspace = class {
     this.openDialogs = 0;
     this.alerts = [];
     this.alertsMenu = null;
+    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;
     this.attachmentDisposers = /* @__PURE__ */ new Map();
     /** The single grid-wide attribution mark — re-inked on a live theme swap. */
     this.attributionMark = null;
@@ -976,14 +1010,18 @@ var VelaWorkspace = class {
       }
     });
     this.symbolPicker.setSource(() => this.feed.symbols());
-    this.indicatorPicker = new IndicatorPicker({
+    this.indicatorPicker = opts.indicatorPicker !== false ? new IndicatorPicker({
       host: this.root,
       library: () => this.active.libraryRows(),
       onChart: () => this.active.onChartRows(),
       onAdd: (i) => this.active.addFromLibrary(i),
       onRemove: (i) => this.active.removeFromChart(i),
-      onOpenChange: (open) => this.trackDialog(open)
-    });
+      onOpenChange: (open) => {
+        if (open) for (const cell of this.cells()) cell.chart.renderer.closeDialogs();
+        this.trackDialog(open);
+      }
+    }) : null;
+    const picker = this.indicatorPicker;
     this.tfQuick = new TimeframeQuick({
       host: this.root,
       onApply: (tf) => this.setActiveTimeframe(tf),
@@ -992,7 +1030,7 @@ var VelaWorkspace = class {
     this.topbar = new Topbar(this.root, {
       symbol: "",
       onSymbolClick: () => this.symbolPicker.open(),
-      onIndicatorsClick: () => this.indicatorPicker.open(),
+      ...picker ? { onIndicatorsClick: () => picker.open() } : {},
       onUndoClick: () => this.active.history.undo(),
       onRedoClick: () => this.active.history.redo(),
       onScreenshotClick: () => this.active.downloadScreenshot(),
@@ -1105,7 +1143,21 @@ var VelaWorkspace = class {
       onTimezone: (zone) => this.setTimezone(zone),
       onSettingsClick: () => this.active.chart.renderer.openSettings()
     }) : null;
+    this.mobileBar = opts.bottombar !== false ? new MobileBar(this.root, {
+      symbol: "",
+      timeframe: "60",
+      onSymbolClick: () => this.symbolPicker.open(),
+      onTimeframeClick: () => this.openTimeframeDrawer(),
+      ...picker ? { onIndicatorsClick: () => picker.open() } : {},
+      getContext: () => this.context(),
+      onDrawingsClick: () => this.openDrawingsDrawer(),
+      onMoreClick: () => this.openMoreDrawer(),
+      onSettingsClick: () => this.active.chart.renderer.openSettings()
+    }) : null;
+    this.drawingPill = new DrawingPill(this.gridEl);
     hostEl.appendChild(this.root);
+    this.layoutCtl = new LayoutModeController(this.root, opts.layoutMode ?? "auto");
+    this.layoutCtl.onChange((mode) => this.onLayoutModeChange(mode));
     this.splitters = new SplitterLayer(this.gridEl, {
       tracks: () => this.currentTracks(),
       grid: () => occupancyGrid(this.def),
@@ -1126,6 +1178,7 @@ var VelaWorkspace = class {
     this.cellBackend = this.backendFor(this.def);
     this.applyGrid();
     this.buildCells();
+    this.syncCellPresentation();
     this.setActiveCell(bootActive != null && this.cellsById.has(bootActive) ? bootActive : this.order[0] ?? null);
     if (opts.autofocus) this.refocusActive();
     if (opts.indicators !== void 0) {
@@ -1208,6 +1261,7 @@ var VelaWorkspace = class {
   refreshActions() {
     this.mountAttachments();
     this.topbar.renderActions();
+    this.mobileBar?.renderActions();
     this.dock.refresh();
     for (const cell of this.cells()) cell.chart.renderer.setLegendActions(legendActionsProviderFor(cell.chart, () => this.context()));
   }
@@ -1273,6 +1327,7 @@ var VelaWorkspace = class {
     this.cellBackend = this.backendFor(this.def);
     this.applyGrid();
     this.buildCells();
+    this.syncCellPresentation();
     this.topbar.setLayout(this.def.id);
     const nextActive = st.activeCellId && this.cellsById.has(st.activeCellId) ? st.activeCellId : this.order[0] ?? null;
     if (nextActive === this.activeId) this.projectActiveCell();
@@ -1333,6 +1388,7 @@ var VelaWorkspace = class {
     this.cellBackend = nextBackend;
     this.applyGrid();
     this.buildCells();
+    this.syncCellPresentation();
     this.topbar.setLayout(next.id);
     const nextActive = activeAfterLayout(this.activeId, this.order.slice(0, next.cells.length));
     if (nextActive === this.activeId) this.projectActiveCell();
@@ -1368,11 +1424,19 @@ var VelaWorkspace = class {
     this.drawToolbar?.destroy();
     this.topbar.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.layoutCtl.destroy();
     this.dock.destroy();
     this.objectTree.destroy();
     this.dataWindow.destroy();
     this.symbolPicker.destroy();
-    this.indicatorPicker.destroy();
+    this.indicatorPicker?.destroy();
     this.tfQuick.destroy();
     this.shortcutsHelp?.destroy();
     this.toast.destroy();
@@ -1393,6 +1457,10 @@ var VelaWorkspace = class {
     this.topbar.setPriceStyle(cell.priceStyle);
     this.topbar.setIndicatorCount(cell.indicatorCount);
     this.topbar.renderActions();
+    this.mobileBar?.renderActions();
+    this.mobileBar?.setSymbol(cell.symbol);
+    this.mobileBar?.setTimeframe(cell.timeframe);
+    this.drawingPill.onChart(cell.chart);
     const pushHistory = () => this.topbar.setHistoryState(cell.history.canUndo, cell.history.canRedo);
     this.historyUnsub?.();
     this.historyUnsub = cell.history.onChange(pushHistory);
@@ -1400,7 +1468,7 @@ var VelaWorkspace = class {
     this.objectTree.setSymbol(cell.symbol);
     this.dock.onChart(cell.chart);
     this.bottombar?.setActiveRange(cell.activeRangeId);
-    this.indicatorPicker.sync();
+    this.indicatorPicker?.sync();
     this.glider.stop();
     const d = cell.chart.drawings;
     if (d.getTool() !== this.globalTool) d.setTool(this.globalTool);
@@ -1522,6 +1590,7 @@ var VelaWorkspace = class {
       this.cellsById.set(id, cell);
       if (id === this.activeId) cell.host.dataset.active = "1";
       this.wireCell(cell);
+      cell.chart.renderer.setLayoutMode(this.layoutCtl.current);
       if (this.favs.length > 0) cell.chart.drawings.setFavorites(this.favs);
       cell.setManifest(this.manifest, pooled?.indicators == null);
       this.events.emit("cell:created", { id });
@@ -1551,7 +1620,7 @@ var VelaWorkspace = class {
       this.drawToolbar?.setFavorites(favorites);
       this.markStateDirty();
     });
-    chart.renderer.onCrosshairMove((e) => this.propagateCrosshair(cell.id, e.time));
+    chart.renderer.onCrosshairMove((e) => this.propagateCrosshair(cell.id, e.time, e.paneKind === "price" ? e.price : null));
     chart.on("drawing:created", ({ id }) => {
       this.propagateDrawing(cell.id, id);
       this.markStateDirty();
@@ -1587,6 +1656,11 @@ var VelaWorkspace = class {
     });
     chart.on("viewport:changed", (range) => this.propagateViewport(cell.id, range));
     chart.on("theme:changed", (t) => this.setTheme(t));
+    chart.renderer.onAxisLongPress((e) => {
+      if (this.layoutCtl.current !== "mobile") return;
+      if (e.axis === "time") this.openTimezoneDrawer();
+      else this.openPriceScaleDrawer(e.y);
+    });
   }
   // ── sync links ──────────────────────────────────────────────
   applySyncSetting(kind, setting, align = false) {
@@ -1620,17 +1694,24 @@ var VelaWorkspace = class {
   }
   /**
    * Mirror an origin cell's pointer time onto its same-group followers as GHOST
-   * crosshairs (`renderer.setExternalCrosshair`). Leaving the origin propagates
-   * `null` (the event already carries it) and clears every ghost. No busy guard
-   * needed: an external crosshair never re-emits `onCrosshairMove` — the flow is
-   * one-way by port contract, so no echo loop can exist.
+   * crosshairs (`renderer.setExternalCrosshair`). The horizontal price level rides
+   * along ONLY to followers showing the same ticker — price scales are comparable
+   * there, while an origin's price painted on another market's pane would be noise.
+   * Leaving the origin propagates `null` (the event already carries it) and clears
+   * every ghost. No busy guard needed: an external crosshair never re-emits
+   * `onCrosshairMove` — the flow is one-way by port contract, so no echo loop can
+   * exist.
    */
-  propagateCrosshair(originId, time) {
+  propagateCrosshair(originId, time, price = null) {
     if (this.destroyed) return;
     const setting = this.syncOpts.crosshair;
     if (!setting) return;
+    const originTicker = parseSymbol(this.cellsById.get(originId)?.symbol ?? "").ticker;
     for (const id of syncTargets(originId, setting, [...this.cellsById.keys()])) {
-      this.cellsById.get(id)?.chart.renderer.setExternalCrosshair(time);
+      const follower = this.cellsById.get(id);
+      if (!follower) continue;
+      const comparable = originTicker !== "" && parseSymbol(follower.symbol).ticker === originTicker;
+      follower.chart.renderer.setExternalCrosshair(time, comparable ? price : null);
     }
   }
   /**
@@ -1785,6 +1866,8 @@ var VelaWorkspace = class {
     if (!cell) return;
     this.topbar.setSymbol(cell.symbol);
     this.topbar.setTimeframe(cell.timeframe);
+    this.mobileBar?.setSymbol(cell.symbol);
+    this.mobileBar?.setTimeframe(cell.timeframe);
     this.objectTree.setSymbol(cell.symbol);
   }
   /** Trigger ② — a cell's indicator ledger changed: count + picker only if active. */
@@ -1794,13 +1877,132 @@ var VelaWorkspace = class {
     const cell = this.cellsById.get(id);
     if (!cell) return;
     this.topbar.setIndicatorCount(cell.indicatorCount);
-    this.indicatorPicker.sync();
+    this.indicatorPicker?.sync();
   }
   /** Timeframe changes routed from the topbar menu / quick entry (chip state follows). */
   setActiveTimeframe(tf) {
     this.bottombar?.setActiveRange(null);
     this.active.setTimeframe(tf);
   }
+  /** 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 every cell'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.alertsMenu?.destroy();
+    this.alertsMenu = null;
+    for (const cell of this.cellsById.values()) {
+      cell.chart.renderer.closeDialogs();
+      cell.chart.renderer.setLayoutMode(mode);
+    }
+    this.syncCellPresentation();
+  }
+  /** Push the layout-shape-dependent chrome onto every cell: multi-cell grids keep
+   *  the status line on one row (segments that don't fit hide), and on MOBILE their
+   *  legends' fold chip routes to the object tree instead of unfolding in place —
+   *  per-indicator controls live there (the legend rows have no room in a grid cell). */
+  syncCellPresentation() {
+    const multi = this.def.cells.length > 1;
+    const overview = multi && this.layoutCtl.current === "mobile" ? () => this.dock.toggle("objects", true) : null;
+    for (const cell of this.cellsById.values()) {
+      cell.setStatuslineFit(multi);
+      cell.chart.renderer.setLegendOverviewAction(overview);
+    }
+  }
+  // ── mobile drawers (built on first open; every read is live and hits the ACTIVE cell) ──
+  openTimeframeDrawer() {
+    this.tfDrawer ?? (this.tfDrawer = new TimeframeDrawer({
+      host: this.root,
+      timeframes: this.opts.timeframes ?? DEFAULT_TIMEFRAMES,
+      ranges: RANGE_PRESETS,
+      currentTimeframe: () => this.active.timeframe,
+      activeRange: () => this.active.activeRangeId,
+      onTimeframe: (tf) => this.setActiveTimeframe(tf),
+      onRange: (preset) => {
+        this.active.applyRange(preset);
+        this.bottombar?.setActiveRange(preset.id);
+      },
+      onOpenChange: (open) => this.trackDialog(open)
+    }));
+    this.tfDrawer.open();
+  }
+  openDrawingsDrawer() {
+    this.drawingsDrawer ?? (this.drawingsDrawer = new DrawingsDrawer({
+      host: this.root,
+      toolbar: () => defaultToolbar(),
+      // the shared static toolbar's definition (see constructor)
+      currentTool: () => this.active.chart.drawings.getTool(),
+      isFavorite: (type) => this.active.chart.drawings.isFavorite(type),
+      onFavorite: (type, on) => this.active.chart.drawings.setFavorite(type, on),
+      onSelect: (type) => this.active.chart.drawings.setTool(type),
+      onOpenChange: (open) => this.trackDialog(open)
+    }));
+    this.drawingsDrawer.open();
+  }
+  openMoreDrawer() {
+    this.moreDrawer ?? (this.moreDrawer = new MoreDrawer({
+      host: this.root,
+      onUndo: () => this.active.history.undo(),
+      onRedo: () => this.active.history.redo(),
+      onScreenshot: () => this.active.downloadScreenshot(),
+      canUndo: () => this.active.history.canUndo,
+      canRedo: () => this.active.history.canRedo,
+      priceStyles: () => priceStyleIds().map((id) => ({ id, label: priceStyleLabel(id), icon: priceStyleIcon(id) })),
+      priceStyle: () => this.active.priceStyle,
+      onPriceStyle: (id) => this.active.setPriceStyle(id),
+      panels: () => [...this.dock.list()],
+      onTogglePanel: (id) => this.dock.toggle(id),
+      alerts: () => this.alerts.map((a) => ({ title: `[${a.cellId} \xB7 ${a.symbol}] ${a.title}`, message: a.message, time: a.time })),
+      // 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()) })),
+      // The desktop layout dropdown's whole surface — the grid canvas, the
+      // non-canvas presets and the sync switches — relocated into the kebab
+      // drawer (the topbar is hidden on mobile). Same reads as the topbar block.
+      layout: {
+        shape: () => layoutShape(this.def),
+        presets: () => layouts().filter((l) => layoutShape(l) === null).map((l) => ({ id: l.id, label: l.label, checked: l.id === this.def.id })),
+        onSelectGrid: (rows, cols) => this.setLayout(layoutForGrid(rows, cols)),
+        onSelectPreset: (id) => this.setLayout(id),
+        syncs: () => [
+          { id: "symbol", label: "Symbol", checked: this.syncOpts.symbol === true },
+          { id: "timeframe", label: "Interval", checked: this.syncOpts.timeframe === true },
+          { id: "crosshair", label: "Crosshair", checked: this.syncOpts.crosshair === true }
+        ],
+        onToggleSync: (id) => {
+          const kind = id;
+          this.sync.set(kind, this.syncOpts[kind] ? false : true);
+        }
+      },
+      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.activeId ? this.cellsById.get(this.activeId)?.chart ?? null : null,
+      pressY: () => this.priceScalePressY,
+      onOpenChange: (open) => this.trackDialog(open)
+    }));
+    this.priceScaleDrawer.open();
+  }
   /** The aggregated alerts bell — entries carry their cell; selecting one activates it. */
   openAlertsMenu(anchor) {
     this.alertsMenu?.destroy();
@@ -1872,7 +2074,9 @@ var VelaWorkspace = 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.active.chart.panBy(-PAN_FAST) });
     this.keymap.register({ id: "view.pan-right", keys: "mod+arrowright", label: "Pan toward now", category: "Chart", run: () => this.active.chart.panBy(PAN_FAST) });
-    this.keymap.register({ id: "indicators.open", keys: "/", label: "Open the indicator picker", category: "Indicators", run: () => this.indicatorPicker.open() });
+    if (this.indicatorPicker) {
+      this.keymap.register({ id: "indicators.open", keys: "/", label: "Open the indicator picker", category: "Indicators", run: () => this.indicatorPicker?.open() });
+    }
     this.keymap.register({
       id: "help.shortcuts",
       keys: "?",