@luxalgo/vela 0.5.0 → 0.5.2

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-OVQKKXLZ.js';
-export { decodeState, encodeState, sanitizeState } from './chunk-OVQKKXLZ.js';
-import { parseSymbol, Vela, normalizeTimezone, TypedEventBus, MultiProviderFeed, resolveTheme, createCustomMark, createAttributionMark, DrawingToolbar, defaultToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs } from './chunk-KCCZNKH7.js';
-import { resolveEngines, legendActionsProviderFor, rendererDefaults, widgetAttachments } from './chunk-7UFX5ZIG.js';
-import { applyPlotOverlayTokens, ensureUIHost, KeymapManager, Menu, isEditableTarget } from './chunk-RHIDOUFL.js';
-import './chunk-KM6LHB3Y.js';
-import { registerIcon, svg16, injectStyles } from './chunk-GYD2THPV.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
@@ -598,6 +622,49 @@ function registerBuiltinLayouts() {
   registerLayout({ id: "4", label: "4 grid", cols: [1, 1], rows: [1, 1], cells: slots(4) });
   registerLayout({ id: "8", label: "8 grid", cols: [1, 1, 1, 1], rows: [1, 1], cells: slots(8) });
 }
+var GRID_PICKER_MAX = 4;
+var GRID_BUILTIN_IDS = {
+  "1x1": "1",
+  "1x2": "2h",
+  "2x1": "2v",
+  "2x2": "4",
+  "2x4": "8"
+};
+var clampTrack = (n) => Math.max(1, Math.min(GRID_PICKER_MAX, Math.round(n)));
+function layoutForGrid(rows, cols) {
+  const r = clampTrack(rows);
+  const c = clampTrack(cols);
+  const builtin = GRID_BUILTIN_IDS[`${r}x${c}`];
+  const registered = builtin ? registry.get(builtin) : void 0;
+  if (registered) return registered;
+  return {
+    id: `g${r}x${c}`,
+    // Width-first label — matches the picker's caption ("3 × 2" = 3 wide, 2 tall).
+    label: `${c} \xD7 ${r} grid`,
+    cols: Array.from({ length: c }, () => 1),
+    rows: Array.from({ length: r }, () => 1),
+    cells: slots(r * c)
+  };
+}
+var GRID_ID_RE = /^g([1-4])x([1-4])$/;
+function ensureLayout(id) {
+  const registered = registry.get(id);
+  if (registered) return registered;
+  const g = GRID_ID_RE.exec(id);
+  if (g) return layoutForGrid(Number(g[1]), Number(g[2]));
+  return void 0;
+}
+function layoutShape(def) {
+  if (!def.areas && def.rows.length <= GRID_PICKER_MAX && def.cols.length <= GRID_PICKER_MAX && def.cells.length === def.rows.length * def.cols.length) {
+    return { rows: def.rows.length, cols: def.cols.length };
+  }
+  return null;
+}
+function occupancyGrid(def) {
+  if (def.areas) return def.areas.map((row) => row.trim().split(/\s+/));
+  const cols = def.cols.length;
+  return def.rows.map((_, r) => def.cols.map((_2, c) => def.cells[r * cols + c]?.id ?? `\xB7${r}x${c}`));
+}
 function gridStyles(def, trackSizes) {
   const cols = trackSizes?.cols?.length === def.cols.length ? trackSizes.cols : def.cols;
   const rows = trackSizes?.rows?.length === def.rows.length ? trackSizes.rows : def.rows;
@@ -617,6 +684,15 @@ function activeAfterLayout(current, cellIds) {
   if (current != null && cellIds.includes(current)) return current;
   return cellIds[0] ?? null;
 }
+function orderAfterLayout(order, slots2, active) {
+  const next = [...order];
+  if (active == null || slots2 <= 0) return next;
+  const idx = next.indexOf(active);
+  if (idx < 0 || idx < slots2) return next;
+  next.splice(idx, 1);
+  next.splice(slots2 - 1, 0, active);
+  return next;
+}
 
 // src/workspace/splitters.ts
 var MIN_TRACK_FRAC = 0.1;
@@ -649,6 +725,27 @@ function trackOffsets(weights, sizePx, gapPx) {
   }
   return out;
 }
+function seamSegments(grid, axis, index) {
+  const count = axis === "cols" ? grid.length : grid[0]?.length ?? 0;
+  const isSeam = (k) => axis === "cols" ? grid[k]?.[index] !== grid[k]?.[index + 1] : grid[index]?.[k] !== grid[index + 1]?.[k];
+  const out = [];
+  for (let k = 0; k < count; k += 1) {
+    if (!isSeam(k)) continue;
+    const last = out[out.length - 1];
+    if (last && last[1] === k - 1) last[1] = k;
+    else out.push([k, k]);
+  }
+  return out;
+}
+function segmentSpanPx(weights, sizePx, gapPx, from, to) {
+  const total = weights.reduce((s, w) => s + w, 0);
+  if (total <= 0) return { start: 0, end: 0 };
+  const content = sizePx - gapPx * (weights.length - 1);
+  const startOf = (k) => weights.slice(0, k).reduce((s, w) => s + w / total * content, 0) + gapPx * k;
+  const start = from === 0 ? 0 : startOf(from) - gapPx / 2;
+  const end = to === weights.length - 1 ? sizePx : startOf(to + 1) - gapPx / 2;
+  return { start, end };
+}
 var HIT_PX = 8;
 var SplitterLayer = class {
   constructor(container, deps) {
@@ -657,23 +754,36 @@ var SplitterLayer = class {
     this.strips = [];
     this.drag = null;
   }
-  /** Rebuild + reposition the strips for the current tracks/size. */
+  /** Rebuild + reposition the strips for the current tracks/size/occupancy. */
   layout() {
     const { cols, rows } = this.deps.tracks();
+    const grid = this.deps.grid();
     const rect = this.container.getBoundingClientRect();
     const gap = this.deps.gapPx();
-    const wanted = Math.max(0, cols.length - 1) + Math.max(0, rows.length - 1);
-    while (this.strips.length > wanted) this.strips.pop().remove();
-    while (this.strips.length < wanted) this.strips.push(this.makeStrip());
-    let k = 0;
+    const placements = [];
     for (const [i, x] of trackOffsets(cols, rect.width, gap).entries()) {
-      this.place(this.strips[k], "cols", i, `left:${Math.round(x - HIT_PX / 2)}px;top:0;width:${HIT_PX}px;height:100%;cursor:col-resize;`);
-      k += 1;
+      for (const [from, to] of seamSegments(grid, "cols", i)) {
+        const { start, end } = segmentSpanPx(rows, rect.height, gap, from, to);
+        placements.push({
+          axis: "cols",
+          index: i,
+          css: `left:${Math.round(x - HIT_PX / 2)}px;top:${Math.round(start)}px;width:${HIT_PX}px;height:${Math.round(end - start)}px;cursor:col-resize;`
+        });
+      }
     }
     for (const [i, y] of trackOffsets(rows, rect.height, gap).entries()) {
-      this.place(this.strips[k], "rows", i, `left:0;top:${Math.round(y - HIT_PX / 2)}px;width:100%;height:${HIT_PX}px;cursor:row-resize;`);
-      k += 1;
+      for (const [from, to] of seamSegments(grid, "rows", i)) {
+        const { start, end } = segmentSpanPx(cols, rect.width, gap, from, to);
+        placements.push({
+          axis: "rows",
+          index: i,
+          css: `left:${Math.round(start)}px;top:${Math.round(y - HIT_PX / 2)}px;width:${Math.round(end - start)}px;height:${HIT_PX}px;cursor:row-resize;`
+        });
+      }
     }
+    while (this.strips.length > placements.length) this.strips.pop().remove();
+    while (this.strips.length < placements.length) this.strips.push(this.makeStrip());
+    for (const [k, p] of placements.entries()) this.place(this.strips[k], p.axis, p.index, p.css);
   }
   destroy() {
     for (const s of this.strips.splice(0)) s.remove();
@@ -747,8 +857,10 @@ var CSS = `
 .vela-ws-grid { position: relative; flex: 1 1 auto; min-width: 0; display: grid; gap: ${GAP_PX}px; background: var(--vela-border-soft); }
 .vela-cell { background: var(--vela-bg); position: relative; }
 /* Active-cell highlight: an overlay ring ABOVE the chart's own canvas stack (a plain
-   outline on the cell is painted under them) \u2014 inert to the pointer. */
-.vela-cell[data-active='1']::after {
+   outline on the cell is painted under them) \u2014 inert to the pointer. Scoped to
+   multi-cell grids ([data-multi]): a single-cell layout always has an active cell,
+   and ringing the only chart would just be noise. */
+.vela-ws-grid[data-multi='1'] .vela-cell[data-active='1']::after {
     content: '';
     position: absolute;
     inset: 0;
@@ -756,7 +868,15 @@ var CSS = `
     pointer-events: none;
     z-index: 10;
 }
-.vela-ws-splitter:hover { background: var(--vela-accent); opacity: 0.35; }
+/* Splitter hover mirrors the in-chart pane separator hover (CrosshairRenderer):
+   a soft band over the whole grab target + a solid 2px line on the seam center. */
+.vela-ws-splitter:hover { background: var(--vela-separator-hover-band); }
+.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) {
@@ -807,6 +927,15 @@ var VelaWorkspace = class {
     /** Re-entrance guard around one propagation tick: followers' synchronous echoes
      *  (their setVisibleRange re-emits viewport:changed) must not re-propagate. */
     this.syncBusy = false;
+    /** Same guard for the drawings link: the propagated mutations' own `drawing:*`
+     *  events fire synchronously inside the propagation loop and must not fan out again. */
+    this.drawingSyncBusy = false;
+    /** LINKED drawings (the drawings sync): one map per synced set (cellId → that
+     *  cell's drawing id), reachable from every member under its `cellId\0drawingId`
+     *  key — any member finds its peers to push edits/removals onto. Survives a
+     *  toggle-off (propagation freezes while the setting is off; re-enabling resumes
+     *  edit/delete for these pairs). Cleared on reload / `applyState`. */
+    this.drawingLinks = /* @__PURE__ */ new Map();
     this.manifest = [];
     /** The shared manifest can no longer change instance sets — resolved, or no
      *  `indicators` option so nothing ever will. Gates the cells' ledger fallback. */
@@ -814,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;
@@ -848,10 +984,10 @@ var VelaWorkspace = class {
     this.timezone = boot?.timezone ?? opts.timezone ?? "Etc/UTC";
     if (boot?.favorites) this.favs = [...boot.favorites];
     const sync = boot?.sync ?? opts.sync;
-    for (const kind of ["viewport", "symbol", "timeframe", "crosshair"]) {
+    for (const kind of ["viewport", "symbol", "timeframe", "crosshair", "drawings"]) {
       this.applySyncSetting(kind, sync?.[kind]);
     }
-    this.def = this.resolveLayout(boot?.layout && layoutDefinition(boot.layout) ? boot.layout : opts.layout ?? "4");
+    this.def = this.resolveLayout(boot?.layout && ensureLayout(boot.layout) ? boot.layout : opts.layout ?? "4");
     if (boot?.trackSizes) for (const [id, ts] of Object.entries(boot.trackSizes)) this.trackSizes.set(id, ts);
     if (boot?.charts) for (const { id, ...cs } of boot.charts) this.pool.set(id, cs);
     this.order = boot?.charts ? boot.charts.map((c) => c.id) : declaredOrder(opts.cells);
@@ -874,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),
@@ -890,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(),
@@ -902,14 +1042,23 @@ var VelaWorkspace = class {
       onPriceStyle: (style) => this.active.setPriceStyle(style),
       layout: {
         current: this.def.id,
-        options: () => layouts().map((l) => ({ id: l.id, label: l.label })),
-        onSelect: (id) => this.setLayout(id),
-        // Workspace-wide view toggles live under the grid presets. The check
-        // reflects the simple all-cells form; flipping OVERRIDES a host-set
-        // group record with plain on/off (groups stay an API-only shape).
-        toggles: () => [{ id: "crosshair-sync", label: "Sync crosshair", checked: this.syncOpts.crosshair === true }],
-        onToggle: (id) => {
-          if (id === "crosshair-sync") this.sync.set("crosshair", this.syncOpts.crosshair ? false : true);
+        // The picker composes dynamic layouts on its grid canvas; registered
+        // presets the canvas cannot express (bespoke plugin areas) list as rows.
+        shape: () => layoutShape(this.def),
+        presets: () => layouts().filter((l) => layoutShape(l) === null).map((l) => ({ id: l.id, label: l.label })),
+        onSelectGrid: (rows, cols) => this.setLayout(layoutForGrid(rows, cols)),
+        onSelectPreset: (id) => this.setLayout(id),
+        // The SYNC switches reflect the simple all-cells form; flipping one
+        // OVERRIDES a host-set group record with plain on/off (groups stay an
+        // API-only shape).
+        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);
         }
       },
       getContext: () => this.context()
@@ -972,10 +1121,19 @@ var VelaWorkspace = class {
         this.active.chart.drawings.setStayMode(on);
         this.refocusActive();
       },
-      { dock: "static" }
+      {
+        dock: "static",
+        // Drawings sync is a WORKSPACE link (same model as the layout
+        // dropdown's switches) — the bar only hosts its toggle.
+        onDrawingsSync: (on) => {
+          this.sync.set("drawings", on);
+          this.refocusActive();
+        }
+      }
     ) : null;
     this.drawToolbar?.setDefinition(defaultToolbar());
     this.drawToolbar?.setVisible(true);
+    this.drawToolbar?.setDrawingsSyncMode(!!this.syncOpts.drawings);
     this.bottombar = opts.bottombar !== false ? new Bottombar(this.root, {
       timezone: this.timezone,
       onRange: (preset) => {
@@ -985,9 +1143,24 @@ 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),
       apply: (axis, weights) => this.applyTracks(axis, weights),
       reset: (axis) => this.applyTracks(axis, evenTracks(this.currentTracks()[axis].length)),
       gapPx: () => GAP_PX
@@ -1005,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) {
@@ -1087,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()));
   }
@@ -1135,7 +1310,7 @@ var VelaWorkspace = class {
     }
     if (st.favorites) this.favs = [...st.favorites];
     this.dock.applyState(st.panels);
-    for (const kind of ["viewport", "symbol", "timeframe", "crosshair"]) this.applySyncSetting(kind, st.sync?.[kind]);
+    for (const kind of ["viewport", "symbol", "timeframe", "crosshair", "drawings"]) this.applySyncSetting(kind, st.sync?.[kind]);
     this.trackSizes.clear();
     if (st.trackSizes) for (const [id, ts] of Object.entries(st.trackSizes)) this.trackSizes.set(id, ts);
     for (const [id, cell] of [...this.cellsById]) {
@@ -1144,13 +1319,15 @@ var VelaWorkspace = class {
       this.events.emit("cell:destroyed", { id });
     }
     this.pool.clear();
+    this.drawingLinks.clear();
     for (const { id, ...cs } of st.charts) this.pool.set(id, cs);
     this.order = st.charts.map((c) => c.id);
-    const def = layoutDefinition(st.layout);
+    const def = ensureLayout(st.layout);
     if (def) this.def = def;
     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();
@@ -1197,6 +1374,7 @@ var VelaWorkspace = class {
     const next = this.resolveLayout(layout);
     const nextBackend = this.backendFor(next);
     const rebuildAll = nextBackend !== this.cellBackend;
+    this.order = orderAfterLayout(this.order, next.cells.length, this.activeId);
     const keep = new Set(this.order.slice(0, next.cells.length));
     for (const [id, cell] of [...this.cellsById]) {
       if (!keep.has(id) || rebuildAll) {
@@ -1210,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();
@@ -1245,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();
@@ -1270,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);
@@ -1277,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);
@@ -1320,7 +1511,7 @@ var VelaWorkspace = class {
   // ── internals ───────────────────────────────────────────────
   resolveLayout(layout) {
     if (typeof layout !== "string") return layout;
-    const def = layoutDefinition(layout);
+    const def = ensureLayout(layout);
     if (!def) throw new Error(`[vela] unknown workspace layout "${layout}" \u2014 register it with registerLayout().`);
     return def;
   }
@@ -1348,6 +1539,8 @@ var VelaWorkspace = class {
    *  `order[i]` — the identity/position decoupling in one line. */
   applyGrid() {
     const { container, perCell } = gridStyles(this.def, this.trackSizes.get(this.def.id));
+    if (this.def.cells.length > 1) this.gridEl.dataset.multi = "1";
+    else delete this.gridEl.dataset.multi;
     this.gridEl.style.gridTemplateColumns = container.gridTemplateColumns ?? "";
     this.gridEl.style.gridTemplateRows = container.gridTemplateRows ?? "";
     this.gridEl.style.gridTemplateAreas = container.gridTemplateAreas ?? "";
@@ -1395,7 +1588,9 @@ var VelaWorkspace = class {
       });
       cell.host.style.gridArea = perCell[slot.id]?.gridArea ?? "";
       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 });
@@ -1425,10 +1620,20 @@ var VelaWorkspace = class {
       this.drawToolbar?.setFavorites(favorites);
       this.markStateDirty();
     });
-    chart.renderer.onCrosshairMove((e) => this.propagateCrosshair(cell.id, e.time));
-    chart.on("drawing:created", () => this.markStateDirty());
-    chart.on("drawing:edited", () => this.markStateDirty());
-    chart.on("drawing:removed", () => this.markStateDirty());
+    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();
+    });
+    chart.on("drawing:draft", ({ doc }) => this.propagateDraft(cell.id, doc));
+    chart.on("drawing:edited", ({ id }) => {
+      this.propagateDrawingEdit(cell.id, id);
+      this.markStateDirty();
+    });
+    chart.on("drawing:removed", ({ id }) => {
+      this.propagateDrawingRemoval(cell.id, id);
+      this.markStateDirty();
+    });
     chart.on("drawing:tool", ({ type }) => {
       if (cell.id !== this.activeId) return;
       this.globalTool = type;
@@ -1451,11 +1656,22 @@ 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) {
     if (setting == null || setting === false) delete this.syncOpts[kind];
     else this.syncOpts[kind] = setting;
+    if (kind === "drawings") {
+      for (const cell of this.cellsById.values()) cell.chart.drawings.setExternalGhost(null);
+      this.drawToolbar?.setDrawingsSyncMode(!!setting);
+      this.markStateDirty();
+      return;
+    }
     if (kind === "crosshair") {
       for (const cell of this.cellsById.values()) cell.chart.renderer.setExternalCrosshair(null);
       if (setting && ![...this.cellsById.values()].some((c) => c.chart.renderer.supportsExternalCrosshair)) {
@@ -1465,6 +1681,7 @@ var VelaWorkspace = class {
       this.markStateDirty();
       return;
     }
+    if (this.topbar && this.def) this.topbar.setLayout(this.def.id);
     this.markStateDirty();
     if (align && setting && this.activeId) {
       if (kind === "viewport") {
@@ -1477,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);
     }
   }
   /**
@@ -1516,6 +1740,101 @@ var VelaWorkspace = class {
       this.syncBusy = false;
     }
   }
+  /**
+   * Copy a freshly created drawing onto the origin's same-group followers (fresh ids
+   * through `drawings.add` — anchors are time+price, so the copy lands at the same
+   * spot whatever the follower shows) and register the whole set as LINKED: edits
+   * and removals of any member follow while the link is on ({@link drawingLinks}).
+   * The busy guard stops the copies' own `drawing:created` events from fanning out.
+   */
+  propagateDrawing(originId, drawingId) {
+    if (this.drawingSyncBusy || this.destroyed) return;
+    const setting = this.syncOpts.drawings;
+    if (!setting) return;
+    const doc = this.cellsById.get(originId)?.chart.drawings.all().find((d) => d.id === drawingId);
+    if (!doc) return;
+    this.drawingSyncBusy = true;
+    try {
+      const group = /* @__PURE__ */ new Map([[originId, drawingId]]);
+      for (const id of syncTargets(originId, setting, [...this.cellsById.keys()])) {
+        const copy = this.cellsById.get(id)?.chart.drawings.add(doc.type, {
+          paneId: doc.paneId,
+          anchors: doc.anchors,
+          style: doc.style,
+          text: doc.text,
+          props: doc.props
+        });
+        if (copy) group.set(id, copy.id);
+      }
+      if (group.size > 1) {
+        for (const [cellId, dId] of group) this.drawingLinks.set(`${cellId}\0${dId}`, group);
+      }
+    } finally {
+      this.drawingSyncBusy = false;
+    }
+  }
+  /** Mirror an in-progress placement (its current ghost, `null` = placement ended)
+   *  onto the origin's same-group followers — the live half of the drawings link;
+   *  the created copy replaces the ghosts when the placement completes. One-way by
+   *  contract (an external ghost never re-emits drafts), so no busy guard needed. */
+  propagateDraft(originId, doc) {
+    if (this.destroyed) return;
+    const setting = this.syncOpts.drawings;
+    if (!setting) return;
+    for (const id of syncTargets(originId, setting, [...this.cellsById.keys()])) {
+      this.cellsById.get(id)?.chart.drawings.setExternalGhost(doc);
+    }
+  }
+  /** Push a linked drawing's edited CONTENT (anchors, style, text, per-type props)
+   *  onto its same-group peers — any member propagates, not just the original. */
+  propagateDrawingEdit(originId, drawingId) {
+    if (this.drawingSyncBusy || this.destroyed) return;
+    const setting = this.syncOpts.drawings;
+    if (!setting) return;
+    const group = this.drawingLinks.get(`${originId}\0${drawingId}`);
+    if (!group) return;
+    const doc = this.cellsById.get(originId)?.chart.drawings.all().find((d) => d.id === drawingId);
+    if (!doc) return;
+    this.drawingSyncBusy = true;
+    try {
+      for (const id of syncTargets(originId, setting, [...this.cellsById.keys()])) {
+        const peerId = group.get(id);
+        if (peerId == null) continue;
+        this.cellsById.get(id)?.chart.drawings.update(peerId, {
+          anchors: doc.anchors,
+          style: doc.style,
+          text: doc.text,
+          props: doc.props
+        });
+      }
+    } finally {
+      this.drawingSyncBusy = false;
+    }
+  }
+  /** Remove a linked drawing's peers with it. The removed member always leaves its
+   *  link group (whatever the setting); peers are only deleted while the link is on.
+   *  A propagated peer removal re-enters here under the busy guard and just cleans
+   *  its own link key. */
+  propagateDrawingRemoval(originId, drawingId) {
+    if (this.destroyed) return;
+    const key = `${originId}\0${drawingId}`;
+    const group = this.drawingLinks.get(key);
+    if (!group) return;
+    this.drawingLinks.delete(key);
+    group.delete(originId);
+    if (this.drawingSyncBusy) return;
+    const setting = this.syncOpts.drawings;
+    if (!setting) return;
+    this.drawingSyncBusy = true;
+    try {
+      for (const id of syncTargets(originId, setting, [...this.cellsById.keys()])) {
+        const peerId = group.get(id);
+        if (peerId != null) this.cellsById.get(id)?.chart.drawings.remove(peerId);
+      }
+    } finally {
+      this.drawingSyncBusy = false;
+    }
+  }
   /**
    * Push an origin cell's symbol/timeframe onto its same-group followers (fired from
    * `market:changed`). Convergence comes from IDEMPOTENCE, not the guard: a follower's
@@ -1547,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. */
@@ -1556,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();
@@ -1634,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: "?",
@@ -1691,4 +2133,4 @@ var VelaWorkspace = class {
   }
 };
 
-export { ChartCell, VelaWorkspace, activeAfterLayout, evenTracks, gridStyles, layoutDefinition, layouts, memoryStorageAdapter, rangesWithin, registerBuiltinLayouts, registerLayout, resizeTracks, syncTargets, trackOffsets, unregisterLayout };
+export { ChartCell, GRID_PICKER_MAX, VelaWorkspace, activeAfterLayout, ensureLayout, evenTracks, gridStyles, layoutDefinition, layoutForGrid, layoutShape, layouts, memoryStorageAdapter, rangesWithin, registerBuiltinLayouts, registerLayout, resizeTracks, syncTargets, trackOffsets, unregisterLayout };