@luxalgo/vela 0.5.0

package/dist/workspace.js

@@ -0,0 +1,1694 @@
+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';
+
+// src/workspace/sync.ts
+function syncTargets(originId, setting, cellIds) {
+  if (setting == null || setting === false) return [];
+  if (setting === true) return cellIds.filter((id) => id !== originId);
+  const group = setting[originId];
+  if (group == null) return [];
+  return cellIds.filter((id) => id !== originId && setting[id] === group);
+}
+function rangesWithin(a, b, epsMs) {
+  return Math.abs(a.from - b.from) <= epsMs && Math.abs(a.to - b.to) <= epsMs;
+}
+
+// src/workspace/persist.ts
+var memoryStore = /* @__PURE__ */ new Map();
+function memoryStorageAdapter() {
+  return {
+    get: (key) => memoryStore.get(key) ?? null,
+    set: (key, value) => {
+      memoryStore.set(key, value);
+    },
+    remove: (key) => {
+      memoryStore.delete(key);
+    }
+  };
+}
+
+// src/workspace/ChartCell.ts
+function seedDefaults(opts) {
+  return {
+    symbol: opts.symbol,
+    timeframe: opts.timeframe,
+    bars: opts.bars,
+    priceStyle: opts.priceStyle,
+    data: opts.data,
+    visibleRange: opts.visibleRange
+  };
+}
+function cellChartDefaults(opts) {
+  const { renderer, defaultLanguage, currentPriceLine, logScale, animations, glow, upColor, downColor, drawings } = opts;
+  return { renderer, defaultLanguage, currentPriceLine, logScale, animations, glow, upColor, downColor, drawings };
+}
+function cellDrawings(opt) {
+  if (opt === false) return false;
+  if (opt === true || opt == null) return { toolbar: false };
+  return { ...opt, toolbar: false };
+}
+var ChartCell = class {
+  constructor(id, gridHost, seed, deps) {
+    this.id = id;
+    this.deps = deps;
+    /** This cell's unified app+drawings undo timeline (the shared Ctrl+Z routes here). */
+    this.history = new WidgetHistory(() => this.inner);
+    /** Live manifest-indicator instances on this cell (the SAME entry may repeat). */
+    this.instances = [];
+    /** The native-indicator catalog with this cell's live supported/present flags. */
+    this.nativeCatalog = [];
+    /** Last crosshair position in this cell (the alt+H/alt+V shortcuts anchor here). */
+    this.lastCrossTime = null;
+    this.lastCrossPrice = null;
+    /** The bottombar range chip this cell is framed on (null = none). */
+    this.activeRangeId = null;
+    this.manifest = [];
+    /** A restored ledger's manifest entry NAMES, waiting for the manifest to resolve
+     *  (a pool/persisted cell can be built before the shared manifest has loaded). */
+    this.pendingManifestNames = null;
+    /** The volume auto-add rides the cell's first candles (`load:end`); until then the
+     *  registry can't show it and the dehydrated ledger reports the INTENT instead. */
+    this.volumeMayBePending = true;
+    /** Sync mirror of the chart's present native types — the removal handler diffs
+     *  against it to identify (and record) whichever type was just removed. */
+    this.presentNatives = [];
+    this.rangeBars = 0;
+    this.pendingRange = null;
+    /** Indicator titles (this cell's in-chart legend rows) shown. */
+    this.indicatorTitlesOn = true;
+    this.destroyed = false;
+    this.appTheme = deps.theme;
+    const symbol = prefixedSymbol(seed);
+    this.state = { symbol, provider: parseSymbol(symbol ?? "").provider ?? void 0, timeframe: seed.timeframe, priceStyle: seed.priceStyle, bars: seed.bars };
+    const doc = gridHost.ownerDocument;
+    this.host = doc.createElement("div");
+    this.host.className = "vela-cell";
+    this.host.dataset.cellId = id;
+    this.host.style.cssText = "position:relative;overflow:hidden;";
+    this.host.addEventListener("pointerdown", () => this.deps.activate(id), true);
+    this.host.addEventListener("focusin", () => this.deps.activate(id));
+    gridHost.appendChild(this.host);
+    this.inner = new Vela(
+      this.host,
+      {
+        ...deps.chartDefaults,
+        symbol,
+        timeframe: seed.timeframe,
+        bars: seed.bars,
+        priceStyle: seed.priceStyle,
+        data: seed.data,
+        visibleRange: seed.visibleRange,
+        theme: deps.theme,
+        live: deps.live,
+        // A RESTORED ledger is authoritative for the auto-added volume too: a
+        // slot persisted without it must come back without it (fresh slots
+        // keep the workspace default).
+        volume: seed.indicators ? seed.indicators.natives.includes("volume") : deps.volume,
+        nativeBackend: deps.nativeBackend,
+        // The user's drawings option minus its toolbar: one SHARED bar serves
+        // the whole workspace (per-cell bars would cost a 44px gutter each).
+        drawings: cellDrawings(deps.chartDefaults.drawings)
+      },
+      { dataFeed: deps.feed }
+    );
+    for (const [language, make] of Object.entries(resolveEngines(deps.engines))) this.inner.registerEngine(language, make());
+    this.inner.renderer.set("attribution", false);
+    this.inner.renderer.set("dialogHost", deps.dialogHost);
+    this.inner.renderer.setLegendActions(legendActionsProviderFor(this.inner, () => deps.context()));
+    if (this.inner.renderer.supports("historyChords")) this.inner.renderer.set("historyChords", false);
+    this.history.onChart(this.inner);
+    this.inner.renderer.onConfigChanged(() => {
+      const zone = this.inner?.renderer.get("timezone");
+      if (typeof zone === "string" && normalizeTimezone(zone) !== normalizeTimezone(this.deps.timezone())) {
+        this.deps.setTimezone(normalizeTimezone(zone));
+      }
+      this.syncStatuslineColors();
+      this.syncPlotOverlayTokens();
+    });
+    this.inner.on("theme:changed", (t) => {
+      this.appTheme = t;
+      this.syncPlotOverlayTokens();
+    });
+    this.syncPlotOverlayTokens();
+    if (seed.rendererConfig != null) this.inner.renderer.applyConfig(seed.rendererConfig);
+    if (seed.drawings != null) this.inner.drawings.fromJSON(seed.drawings);
+    if (seed.indicators) {
+      for (const type of seed.indicators.natives) this.inner.addNativeIndicator(type);
+      this.pendingManifestNames = [...seed.indicators.manifest];
+    }
+    this.volumeIntent = seed.indicators ? seed.indicators.natives.includes("volume") : deps.volume;
+    this.inner.on("load:end", () => {
+      this.volumeMayBePending = 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.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);
+    this.statusline = deps.statusline ? new Statusline(this.host, symbol ?? "") : null;
+    this.statusline?.setMeta(seed.timeframe ?? "60", this.state.provider ?? "");
+    this.statusline?.onChart(this.inner);
+    this.syncStatuslineColors();
+    this.contextMenu = new ChartContextMenu(this.host, {
+      resetView: () => {
+        this.inner?.renderer.set("autoScale", true);
+        this.inner?.setVisibleRangePreset("ALL");
+      },
+      timezone: () => this.deps.timezone(),
+      setTimezone: (zone) => this.deps.setTimezone(zone),
+      // Right-clicking activates the cell first (capture-phase pointerdown), so the
+      // context the actions receive is this cell's — the active one.
+      getContext: () => this.deps.context()
+    });
+    this.contextMenu.onChart(this.inner);
+    this.inner.renderer.onCrosshairMove((e) => {
+      this.lastCrossTime = e.time;
+      this.lastCrossPrice = e.price;
+    });
+    this.inner.on("indicator:added", () => {
+      this.syncPresentNatives();
+      this.refreshNativeCatalog();
+    });
+    this.inner.on("indicator:removed", ({ id: id2 }) => {
+      if (this.destroyed) return;
+      const idx = this.instances.findIndex((it) => it.handle?.id === id2);
+      if (idx >= 0) {
+        const snapshot = this.instances[idx];
+        this.instances.splice(idx, 1);
+        this.history.push({
+          undo: () => {
+            snapshot.handle = this.addToChart(snapshot.entry);
+            this.instances.push(snapshot);
+            this.deps.onIndicatorsChanged(this.id);
+          },
+          redo: () => this.dropInstance(snapshot)
+        });
+      } else {
+        const now = this.inner?.presentNativeIndicators() ?? [];
+        for (const type of this.presentNatives.filter((t) => !now.includes(t))) {
+          this.history.push({
+            undo: () => {
+              this.inner?.addNativeIndicator(type);
+              this.refreshNativeCatalog();
+            },
+            redo: () => {
+              this.inner?.addNativeIndicator(type).remove();
+              this.refreshNativeCatalog();
+            }
+          });
+        }
+      }
+      this.syncPresentNatives();
+      this.refreshNativeCatalog();
+    });
+    this.syncPresentNatives();
+    this.refreshNativeCatalog();
+    const advanced = {
+      title: "Advanced",
+      placement: "end",
+      rows: [
+        {
+          kind: "select",
+          label: "Bars to fetch",
+          options: ["500", "1000", "2000", "5000", "10000", "20000"],
+          get: () => String(this.state.bars ?? 1e3),
+          set: (v) => {
+            this.state.bars = Number(v);
+            this.deps.onStateDirty();
+            void this.inner?.setMarket({ bars: Math.max(this.state.bars, this.rangeBars) });
+          }
+        }
+      ]
+    };
+    const watermarkSection = {
+      title: "Watermark",
+      placement: "symbol",
+      rows: [
+        {
+          kind: "toggle",
+          label: "Symbol watermark",
+          get: () => this.watermarkOn,
+          set: (v) => this.setWatermarkVisible(v)
+        }
+      ]
+    };
+    if (this.statusline) {
+      const sl = this.statusline;
+      this.inner.renderer.setSettingsSections([
+        {
+          title: "Status line",
+          rows: [
+            { kind: "heading", label: "Status line" },
+            { kind: "toggle", label: "Symbol name", get: () => sl.partVisible("name"), set: (v) => sl.setPartVisible("name", v) },
+            { kind: "toggle", label: "Market status", get: () => sl.partVisible("market"), set: (v) => sl.setPartVisible("market", v) },
+            { kind: "toggle", label: "OHLC values", get: () => sl.partVisible("ohlc"), set: (v) => sl.setPartVisible("ohlc", v) },
+            { kind: "toggle", label: "Bar change values", get: () => sl.partVisible("change"), set: (v) => sl.setPartVisible("change", v) },
+            { kind: "heading", label: "Indicators" },
+            {
+              kind: "toggle",
+              label: "Titles",
+              get: () => this.indicatorTitlesOn,
+              set: (v) => this.setIndicatorTitlesVisible(v)
+            }
+          ]
+        },
+        advanced,
+        watermarkSection
+      ]);
+    } else {
+      this.inner.renderer.setSettingsSections([advanced, watermarkSection]);
+    }
+    this.offMarket = this.inner.on("market:changed", ({ symbol: symbol2, timeframe }) => {
+      this.state.symbol = symbol2;
+      this.state.provider = parseSymbol(symbol2).provider ?? void 0;
+      this.state.timeframe = timeframe;
+      this.watermark?.update(symbol2, timeframe);
+      this.statusline?.setSymbol(symbol2);
+      this.statusline?.setMeta(timeframe, this.inner?.data.resolve(symbol2)?.provider ?? this.state.provider ?? "");
+      if (this.inner) this.statusline?.onChart(this.inner);
+      this.refreshNativeCatalog();
+      this.deps.onMarketChanged(this.id);
+    });
+  }
+  /** Show/hide this cell's symbol watermark (persisted per cell). */
+  setWatermarkVisible(visible) {
+    this.watermarkOn = visible;
+    this.watermark?.setVisible(visible);
+    this.deps.onStateDirty();
+  }
+  /** Show/hide this cell's indicator titles — the in-chart legend rows (persisted per cell). */
+  setIndicatorTitlesVisible(visible) {
+    this.indicatorTitlesOn = visible;
+    this.inner?.renderer.set("indicatorTitles", 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() {
+    if (!this.inner) throw new Error(`[vela] cell "${this.id}" is destroyed`);
+    return this.inner;
+  }
+  get symbol() {
+    return this.state.symbol ?? "";
+  }
+  get timeframe() {
+    return this.state.timeframe ?? "60";
+  }
+  get priceStyle() {
+    const live = this.inner?.renderer.get("priceStyle");
+    return typeof live === "string" ? live : this.state.priceStyle ?? "candles";
+  }
+  /** Manifest instances + present natives — the topbar indicator count. */
+  get indicatorCount() {
+    return this.instances.length + this.nativeCatalog.filter((n) => n.present).length;
+  }
+  /** Switch this cell's market in place (the chart instance survives). */
+  setSymbol(symbol) {
+    if (!this.inner || symbol === this.symbol) return;
+    void this.inner.setMarket({ symbol });
+  }
+  setTimeframe(timeframe) {
+    if (!this.inner || timeframe === this.timeframe) return;
+    this.activeRangeId = null;
+    this.rangeBars = 0;
+    void this.inner.setMarket({ timeframe, bars: this.state.bars });
+  }
+  /** Applied live (renderer feature) — no reload. */
+  setPriceStyle(style) {
+    this.state.priceStyle = style;
+    this.inner?.renderer.set("priceStyle", style);
+    this.syncStatuslineColors();
+  }
+  /** OHLC/change ink in the status line follows the ACTIVE price style's configured
+   *  colors and direction rule (candle bodies by close-vs-open, baseline by position
+   *  against the live baseline price, …) instead of the fixed theme tokens. */
+  syncStatuslineColors() {
+    if (!this.statusline || !this.inner) return;
+    this.statusline.setDirectionColors(...statuslineInkOf(this.inner.renderer, this.priceStyle));
+  }
+  /** The workspace shell keeps the app theme; the cell host's tokens re-derive from
+   *  the LIVE plot surface (see {@link applyPlotOverlayTokens}). */
+  syncPlotOverlayTokens() {
+    applyPlotOverlayTokens(this.host, this.appTheme, this.inner?.renderer.getConfig() ?? null);
+  }
+  /**
+   * Frame a bottombar range chip: switch to its timeframe, fetch the depth its window
+   * needs, and keep it framed (re-asserted once the deeper history is painted).
+   */
+  applyRange(preset) {
+    if (!this.inner || this.destroyed) return;
+    this.activeRangeId = preset.id;
+    const tfChanged = preset.tf !== this.timeframe;
+    const deeper = preset.bars > Math.max(this.state.bars ?? 500, this.rangeBars);
+    this.rangeBars = preset.bars;
+    if (tfChanged || deeper) {
+      this.pendingRange = preset;
+      void this.inner.setMarket({ timeframe: preset.tf, bars: Math.max(this.state.bars ?? 500, this.rangeBars), visibleRange: preset.preset }).then(() => {
+        if (!this.destroyed && this.pendingRange === preset) {
+          this.inner?.setVisibleRangePreset(preset.preset);
+          this.pendingRange = null;
+        }
+      });
+    } else {
+      this.inner.setVisibleRangePreset(preset.preset);
+    }
+  }
+  /** Make this cell the active one and put keyboard focus on its chart surface. */
+  focus() {
+    this.deps.activate(this.id);
+    this.inner?.renderer.focus();
+  }
+  /** Download this cell's chart as a PNG (named after its market). */
+  downloadScreenshot() {
+    const url = this.inner?.renderer.screenshot();
+    if (!url) return;
+    const a = this.host.ownerDocument.createElement("a");
+    a.href = url;
+    a.download = `${this.symbol || "chart"}-${this.timeframe}.png`;
+    a.click();
+  }
+  // ── indicator ledger (shared manifest, per-cell instances) ──
+  /**
+   * Hand the cell the workspace's resolved manifest. A RESTORED ledger (pool or
+   * persisted state) re-adds its recorded entries by name — held until the manifest
+   * actually carries them. Otherwise `seedEnabled` auto-adds the manifest's `enabled`
+   * entries (fresh cells only).
+   */
+  setManifest(list, seedEnabled) {
+    this.manifest = list;
+    if (this.pendingManifestNames) {
+      if (list.length === 0) return;
+      for (const name of this.pendingManifestNames) {
+        const entry = list.find((e) => e.name === name);
+        if (entry) this.addManifestInstance(entry, { record: false });
+      }
+      this.pendingManifestNames = null;
+      return;
+    }
+    if (seedEnabled) {
+      for (const entry of list) if (entry.enabled) this.addManifestInstance(entry, { record: false });
+    }
+  }
+  /** The picker's library rows: supported natives first, then the manifest. */
+  libraryRows() {
+    return [
+      ...this.nativeCatalog.filter((n) => n.supported).map((n) => ({ name: n.title, category: "Vela", native: true, nativeType: n.type, beta: n.beta })),
+      ...this.manifest.map((e) => ({ name: e.name, language: e.language, category: e.category }))
+    ];
+  }
+  /** The picker's on-chart rows: present natives first, then live instances. */
+  onChartRows() {
+    return [
+      ...this.nativeCatalog.filter((n) => n.present).map((n) => ({ name: n.title, native: true, nativeType: n.type })),
+      ...this.instances.map((it) => ({ name: it.entry.name, language: it.entry.language }))
+    ];
+  }
+  /** Add by picker LIBRARY index (natives precede the manifest — mirrors libraryRows). */
+  addFromLibrary(index) {
+    const natives = this.nativeCatalog.filter((n) => n.supported);
+    if (index < natives.length) this.addNative(natives[index].type);
+    else {
+      const entry = this.manifest[index - natives.length];
+      if (entry) this.addManifestInstance(entry);
+    }
+  }
+  /** Remove by picker ON-CHART index (present natives precede instances). */
+  removeFromChart(index) {
+    const present = this.nativeCatalog.filter((n) => n.present);
+    if (index < present.length) this.removeNative(present[index].type);
+    else this.removeInstance(index - present.length);
+  }
+  /** Add ONE instance of a manifest entry (repeatable — duplicates are legitimate). */
+  addManifestInstance(entry, opts = {}) {
+    if (this.destroyed) return;
+    const it = { entry, handle: this.addToChart(entry) };
+    this.instances.push(it);
+    this.deps.onIndicatorsChanged(this.id);
+    if (opts.record === false) return;
+    const snapshot = it;
+    this.history.push({
+      undo: () => this.dropInstance(snapshot),
+      redo: () => {
+        snapshot.handle = this.addToChart(snapshot.entry);
+        this.instances.push(snapshot);
+        this.deps.onIndicatorsChanged(this.id);
+      }
+    });
+  }
+  removeInstance(index) {
+    const it = this.instances[index];
+    if (!it || this.destroyed) return;
+    this.dropInstance(it);
+    const snapshot = it;
+    this.history.push({
+      undo: () => {
+        snapshot.handle = this.addToChart(snapshot.entry);
+        this.instances.push(snapshot);
+        this.deps.onIndicatorsChanged(this.id);
+      },
+      redo: () => this.dropInstance(snapshot)
+    });
+  }
+  dropInstance(it) {
+    const idx = this.instances.indexOf(it);
+    if (idx >= 0) this.instances.splice(idx, 1);
+    try {
+      it.handle?.remove();
+    } catch {
+    }
+    it.handle = null;
+    this.deps.onIndicatorsChanged(this.id);
+  }
+  /** Add a native indicator (single-instance per type — the core dedupes). */
+  addNative(type) {
+    this.inner?.addNativeIndicator(type);
+    this.syncPresentNatives();
+    this.refreshNativeCatalog();
+    this.history.push({
+      undo: () => {
+        this.inner?.addNativeIndicator(type).remove();
+        this.refreshNativeCatalog();
+      },
+      redo: () => {
+        this.inner?.addNativeIndicator(type);
+        this.refreshNativeCatalog();
+      }
+    });
+  }
+  removeNative(type) {
+    this.inner?.addNativeIndicator(type).remove();
+    this.refreshNativeCatalog();
+  }
+  /** Sync mirror of the chart's present native types — the removal handler diffs
+   *  against it to identify (and record) whichever type was just removed. */
+  syncPresentNatives() {
+    this.presentNatives = this.inner?.presentNativeIndicators() ?? [];
+  }
+  /** Refresh the native catalog (supported/present flags) for this cell's market. */
+  refreshNativeCatalog() {
+    const chart = this.inner;
+    if (!chart) return;
+    void chart.availableNativeIndicators().then((list) => {
+      if (this.destroyed || this.inner !== chart) return;
+      this.nativeCatalog = list.map((n) => ({ type: n.type, title: n.title, supported: n.supported, present: n.present, beta: n.beta }));
+      this.deps.onIndicatorsChanged(this.id);
+    });
+  }
+  addToChart(entry) {
+    try {
+      return this.inner?.addIndicator(entry.script, entry.language !== void 0 ? { language: entry.language } : void 0) ?? null;
+    } catch (err) {
+      console.warn(`[vela] indicator "${entry.name}" failed to add:`, err);
+      return null;
+    }
+  }
+  // ── lifecycle ──
+  /** Snapshot everything the pool needs to restore this slot later. The market fields
+   *  come from the LIVE config (`chart.market`) — the requested identity — so a switch
+   *  still loading when the snapshot is taken (persist-on-close) is not lost. */
+  dehydrate() {
+    const live = this.inner?.market;
+    return {
+      ...this.state,
+      ...live ? { symbol: live.symbol, provider: live.provider, timeframe: live.timeframe } : {},
+      priceStyle: this.priceStyle,
+      watermark: this.watermarkOn,
+      indicatorTitles: this.indicatorTitlesOn,
+      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
+      // lost unload-time saves, and the old empty-set fallbacks resurrected removed
+      // indicators. Manifest names fall back to the restored ledger only until the
+      // shared manifest settles. See {@link indicatorLedger}.
+      indicators: indicatorLedger({
+        present: this.inner ? this.inner.presentNativeIndicators() : [],
+        instanceNames: this.instances.map((it) => it.entry.name),
+        pendingManifest: this.pendingManifestNames,
+        manifestSettled: this.deps.manifestSettled(),
+        volumePending: this.volumeMayBePending && this.volumeIntent
+      })
+    };
+  }
+  destroy() {
+    this.destroyed = true;
+    this.offMarket();
+    this.contextMenu.destroy();
+    this.history.destroy();
+    this.statusline?.destroy();
+    this.watermark?.destroy();
+    this.inner?.destroy();
+    this.inner = null;
+    this.host.remove();
+  }
+};
+
+// src/workspace/context.ts
+function buildContext(host) {
+  const active = host.active();
+  return {
+    get chart() {
+      const cell = host.active();
+      if (!cell) throw new Error("VelaWorkspace has no active cell yet");
+      return cell.chart;
+    },
+    symbol: active?.symbol ?? "",
+    timeframe: active?.timeframe ?? "60",
+    priceStyle: active?.priceStyle ?? "candles",
+    setSymbol: (symbol) => host.active()?.setSymbol(symbol),
+    setTimeframe: (tf) => host.active()?.setTimeframe(tf),
+    setPriceStyle: (style) => host.active()?.setPriceStyle(style),
+    openSymbolSearch: (query) => host.openSymbolSearch(query),
+    togglePanel: (id, open) => host.togglePanel(id, open),
+    host: host.root,
+    toast: (message, kind) => host.toast(message, kind),
+    cells: host.cells().map((c) => ({ id: c.id, chart: c.chart, symbol: c.symbol, timeframe: c.timeframe })),
+    activeCellId: active?.id ?? "",
+    setActiveCell: (id) => host.setActiveCell(id)
+  };
+}
+
+// src/workspace/layouts.ts
+var registry = /* @__PURE__ */ new Map();
+function registerLayout(def) {
+  registry.set(def.id, def);
+}
+function unregisterLayout(id) {
+  registry.delete(id);
+}
+function layoutDefinition(id) {
+  return registry.get(id);
+}
+function layouts() {
+  return [...registry.values()];
+}
+function slots(n) {
+  return Array.from({ length: n }, (_, i) => ({ id: `c${i + 1}` }));
+}
+function registerBuiltinLayouts() {
+  registerLayout({ id: "1", label: "Single", cols: [1], rows: [1], cells: slots(1) });
+  registerLayout({ id: "2h", label: "2 side by side", cols: [1, 1], rows: [1], cells: slots(2) });
+  registerLayout({ id: "2v", label: "2 stacked", cols: [1], rows: [1, 1], cells: slots(2) });
+  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) });
+}
+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;
+  const container = {
+    display: "grid",
+    gridTemplateColumns: cols.map((w) => `${w}fr`).join(" "),
+    gridTemplateRows: rows.map((w) => `${w}fr`).join(" ")
+  };
+  if (def.areas) container.gridTemplateAreas = def.areas.map((r) => `"${r}"`).join(" ");
+  const perCell = {};
+  for (const cell of def.cells) {
+    perCell[cell.id] = cell.area ? { gridArea: cell.area } : {};
+  }
+  return { container, perCell };
+}
+function activeAfterLayout(current, cellIds) {
+  if (current != null && cellIds.includes(current)) return current;
+  return cellIds[0] ?? null;
+}
+
+// src/workspace/splitters.ts
+var MIN_TRACK_FRAC = 0.1;
+function evenTracks(n) {
+  return Array.from({ length: n }, () => 1);
+}
+function resizeTracks(weights, index, deltaPx, sizePx) {
+  const out = [...weights];
+  const a = out[index];
+  const b = out[index + 1];
+  if (a === void 0 || b === void 0 || sizePx <= 0) return out;
+  const total = out.reduce((s, w) => s + w, 0);
+  const min = total * MIN_TRACK_FRAC;
+  let deltaFr = deltaPx / sizePx * total;
+  deltaFr = Math.max(deltaFr, min - a);
+  deltaFr = Math.min(deltaFr, b - min);
+  out[index] = a + deltaFr;
+  out[index + 1] = b - deltaFr;
+  return out;
+}
+function trackOffsets(weights, sizePx, gapPx) {
+  const total = weights.reduce((s, w) => s + w, 0);
+  if (total <= 0) return [];
+  const content = sizePx - gapPx * (weights.length - 1);
+  const out = [];
+  let acc = 0;
+  for (let i = 0; i < weights.length - 1; i += 1) {
+    acc += weights[i] / total * content;
+    out.push(acc + gapPx * i + gapPx / 2);
+  }
+  return out;
+}
+var HIT_PX = 8;
+var SplitterLayer = class {
+  constructor(container, deps) {
+    this.container = container;
+    this.deps = deps;
+    this.strips = [];
+    this.drag = null;
+  }
+  /** Rebuild + reposition the strips for the current tracks/size. */
+  layout() {
+    const { cols, rows } = this.deps.tracks();
+    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;
+    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 [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;
+    }
+  }
+  destroy() {
+    for (const s of this.strips.splice(0)) s.remove();
+    this.drag = null;
+  }
+  makeStrip() {
+    const el = document.createElement("div");
+    el.className = "vela-ws-splitter";
+    el.style.cssText = "position:absolute;z-index:30;";
+    el.addEventListener("pointerdown", (e) => this.onDown(el, e));
+    el.addEventListener("dblclick", () => {
+      const axis = el.dataset.axis;
+      if (axis) this.deps.reset(axis);
+    });
+    this.container.appendChild(el);
+    return el;
+  }
+  place(el, axis, index, css) {
+    el.dataset.axis = axis;
+    el.dataset.index = String(index);
+    el.style.cssText = `position:absolute;z-index:30;${css}`;
+  }
+  onDown(el, e) {
+    const axis = el.dataset.axis;
+    const index = Number(el.dataset.index);
+    if (!axis || Number.isNaN(index)) return;
+    e.preventDefault();
+    const rect = this.container.getBoundingClientRect();
+    const gap = this.deps.gapPx();
+    const tracks = this.deps.tracks()[axis];
+    this.drag = {
+      axis,
+      index,
+      startPx: axis === "cols" ? e.clientX : e.clientY,
+      startWeights: [...tracks],
+      sizePx: (axis === "cols" ? rect.width : rect.height) - gap * (tracks.length - 1)
+    };
+    try {
+      el.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    const move = (ev) => {
+      const d = this.drag;
+      if (!d) return;
+      const delta = (d.axis === "cols" ? ev.clientX : ev.clientY) - d.startPx;
+      this.deps.apply(d.axis, resizeTracks(d.startWeights, d.index, delta, d.sizePx));
+    };
+    const up = () => {
+      this.drag = null;
+      el.removeEventListener("pointermove", move);
+      el.removeEventListener("pointerup", up);
+      el.removeEventListener("pointercancel", up);
+    };
+    el.addEventListener("pointermove", move);
+    el.addEventListener("pointerup", up);
+    el.addEventListener("pointercancel", up);
+  }
+};
+
+// src/workspace/VelaWorkspace.ts
+var DEFAULT_TIMEFRAMES = ["1", "5", "15", "60", "240", "D", "W"];
+var GAP_PX = 2;
+var POOL_CAP = 16;
+var TIME_AXIS_H = 22;
+var ALERT_CAP = 50;
+var STYLE_ID = "vela-workspace";
+var CSS = `
+.vela-workspace { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--vela-bg); }
+.vela-ws-main { position: relative; display: flex; flex-direction: row; flex: 1 1 auto; min-height: 0; }
+.vela-ws-toolbar { position: relative; flex: none; }
+.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 {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: 2px solid var(--vela-fg-bright);
+    pointer-events: none;
+    z-index: 10;
+}
+.vela-ws-splitter:hover { background: var(--vela-accent); opacity: 0.35; }
+`;
+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) {
+  const names = Object.keys(cells ?? {});
+  for (const n of names) {
+    if (/^\d+$/.test(n)) {
+      console.warn(`[vela] workspace cell "${n}" ignored \u2014 a purely-numeric name cannot keep its declaration order (JS object key semantics); use e.g. "cell${n}"`);
+    }
+  }
+  return names.filter((n) => !/^\d+$/.test(n));
+}
+function nextAutoCellId(taken) {
+  for (let i = 1; ; i += 1) {
+    if (!taken.has(`c${i}`)) return `c${i}`;
+  }
+}
+var VelaWorkspace = class {
+  constructor(container, opts = {}) {
+    this.events = new TypedEventBus();
+    this.feed = new MultiProviderFeed();
+    this.cellsById = /* @__PURE__ */ new Map();
+    this.pool = /* @__PURE__ */ new Map();
+    this.trackSizes = /* @__PURE__ */ new Map();
+    this.resizeObserver = null;
+    /** Cell identities by SLOT POSITION — `order[i]` lives in the layout's i-th slot.
+     *  Names come from the `cells` declaration order (then the persisted document);
+     *  slots beyond the list get auto identities. Grows, never reorders. */
+    this.order = [];
+    this.activeId = null;
+    this.cellBackend = "auto";
+    this.destroyed = false;
+    this.shortcutsHelp = null;
+    this.glider = new Glider(() => this.activeId ? this.cellsById.get(this.activeId)?.chart ?? null : null);
+    /** The GLOBAL armed tool/magnet/stay (workspace policy) — re-applied to whichever cell
+     *  takes the focus; only the ACTIVE cell ever holds a non-null tool. Measure/eraser
+     *  stay transient and per-cell: they exit when the focus leaves. */
+    this.globalTool = null;
+    this.globalSnap = "off";
+    this.globalStay = false;
+    /** Live subscription to the ACTIVE cell's unified history (rebound on every projection). */
+    this.historyUnsub = null;
+    /** Favorite drawing tools — a WORKSPACE preference (one star set, every cell). */
+    this.favs = [];
+    /** Live sync configuration (mutable copy of the option). */
+    this.syncOpts = {};
+    this.stateTimer = null;
+    this.onUnload = () => this.persistNow();
+    /** Re-entrance guard around one propagation tick: followers' synchronous echoes
+     *  (their setVisibleRange re-emits viewport:changed) must not re-propagate. */
+    this.syncBusy = false;
+    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. */
+    this.manifestSettled = false;
+    this.openDialogs = 0;
+    this.alerts = [];
+    this.alertsMenu = null;
+    this.attachmentDisposers = /* @__PURE__ */ new Map();
+    /** The single grid-wide attribution mark — re-inked on a live theme swap. */
+    this.attributionMark = null;
+    this.onRootKeydown = (ev) => this.routeTyping(ev);
+    /** The sync-link control surface: `set(kind, true | {cellId: group} | false)`,
+     *  `get(kind)`, `state()`. Enabling a market/viewport link aligns the followers to
+     *  the ACTIVE cell once, so the grid starts coherent; `crosshair` mirrors the
+     *  pointer time as ghost crosshairs on the followers (also a toggle in the layout
+     *  dropdown). */
+    this.sync = {
+      set: (kind, setting) => this.applySyncSetting(kind, setting === false ? void 0 : setting, true),
+      get: (kind) => this.syncOpts[kind],
+      state: () => ({ ...this.syncOpts })
+    };
+    registerBuiltinLayouts();
+    const hostEl = typeof container === "string" ? document.querySelector(container) : container;
+    if (!hostEl) throw new Error(`VelaWorkspace: container not found: ${String(container)}`);
+    this.opts = opts;
+    this.persistKey = opts.persist === void 0 || opts.persist === false ? null : opts.persist === true ? "vela-workspace" : opts.persist;
+    this.storage = opts.storage ?? localStorageAdapter();
+    let boot = null;
+    if (this.persistKey !== null) {
+      const raw = this.storage.get(this.persistKey);
+      if (typeof raw === "string") boot = decodeState(raw);
+      else if (raw != null && typeof raw === "object") {
+        void raw.then((r) => {
+          if (!this.destroyed && r) this.applyState(decodeState(r));
+        });
+      }
+      if (typeof window !== "undefined") window.addEventListener("beforeunload", this.onUnload);
+    }
+    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"]) {
+      this.applySyncSetting(kind, sync?.[kind]);
+    }
+    this.def = this.resolveLayout(boot?.layout && layoutDefinition(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);
+    const bootActive = boot?.activeCellId ?? null;
+    const doc = hostEl.ownerDocument;
+    injectStyles(STYLE_ID, CSS, doc);
+    this.root = doc.createElement("div");
+    this.root.className = "vela-workspace";
+    ensureUIHost(this.root, resolveTheme(opts.theme));
+    for (const [name, make] of Object.entries(opts.providers ?? {})) void this.feed.registerProvider(name, make());
+    void this.feed.ready().then(() => {
+      if (!this.destroyed) this.refreshRetention();
+    });
+    this.symbolPicker = new SymbolPicker({
+      host: this.root,
+      onSelect: (ticker) => this.active.setSymbol(ticker),
+      onOpenChange: (open) => {
+        if (open) for (const cell of this.cells()) cell.chart.renderer.closeDialogs();
+        this.trackDialog(open);
+      }
+    });
+    this.symbolPicker.setSource(() => this.feed.symbols());
+    this.indicatorPicker = 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)
+    });
+    this.tfQuick = new TimeframeQuick({
+      host: this.root,
+      onApply: (tf) => this.setActiveTimeframe(tf),
+      onOpenChange: (open) => this.trackDialog(open)
+    });
+    this.topbar = new Topbar(this.root, {
+      symbol: "",
+      onSymbolClick: () => this.symbolPicker.open(),
+      onIndicatorsClick: () => this.indicatorPicker.open(),
+      onUndoClick: () => this.active.history.undo(),
+      onRedoClick: () => this.active.history.redo(),
+      onScreenshotClick: () => this.active.downloadScreenshot(),
+      onAlertsClick: (anchor) => this.openAlertsMenu(anchor),
+      timeframe: "60",
+      timeframes: opts.timeframes ?? DEFAULT_TIMEFRAMES,
+      priceStyle: "candles",
+      onTimeframe: (tf) => this.setActiveTimeframe(tf),
+      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);
+        }
+      },
+      getContext: () => this.context()
+    });
+    const main = doc.createElement("div");
+    main.className = "vela-ws-main";
+    let toolbarHost = null;
+    if (opts.drawingToolbar !== false) {
+      toolbarHost = doc.createElement("div");
+      toolbarHost.className = "vela-ws-toolbar";
+      main.appendChild(toolbarHost);
+    }
+    this.gridEl = doc.createElement("div");
+    this.gridEl.className = "vela-ws-grid";
+    main.appendChild(this.gridEl);
+    this.dock = new PanelDock(main, {
+      chrome: this.topbar,
+      context: () => this.context(),
+      changed: () => this.markStateDirty()
+    });
+    this.objectTree = new ObjectTree(main);
+    this.dataWindow = new DataWindow(main);
+    this.dock.addBuiltIn({ id: "dataWindow", title: "Data window", icon: "datawindow", order: 10, panel: this.dataWindow, onChart: (c) => this.dataWindow.onChart(c) });
+    this.dock.addBuiltIn({ id: "objects", title: "Object tree", icon: "objects", order: 20, panel: this.objectTree, onChart: (c) => this.objectTree.onChart(c) });
+    this.dock.refresh();
+    this.root.appendChild(main);
+    this.toast = new Toast(this.gridEl);
+    const attribution = rendererDefaults().attribution;
+    if (attribution !== false) {
+      const background = resolveTheme(opts.theme).background;
+      const mark = typeof attribution === "string" && attribution.trim() ? createCustomMark(doc, attribution, background) : createAttributionMark(doc, background);
+      Object.assign(mark.style, { left: "12px", bottom: `${TIME_AXIS_H + 10}px`, zIndex: "11" });
+      this.gridEl.appendChild(mark);
+      this.attributionMark = mark;
+    }
+    this.drawToolbar = toolbarHost ? new DrawingToolbar(
+      toolbarHost,
+      resolveTheme(opts.theme),
+      (type) => {
+        this.active.chart.drawings.setTool(type);
+        this.refocusActive();
+      },
+      (mode) => {
+        this.active.chart.drawings.setSnapMode(mode);
+        this.refocusActive();
+      },
+      () => {
+        const d = this.active.chart.drawings;
+        d.setMode(d.getMode() === "measure" ? null : "measure");
+        this.refocusActive();
+      },
+      () => {
+        const d = this.active.chart.drawings;
+        d.setMode(d.getMode() === "eraser" ? null : "eraser");
+        this.refocusActive();
+      },
+      // No refocus on a star: the flyout stays open for more browsing.
+      (type, on) => this.active.chart.drawings.setFavorite(type, on),
+      (on) => {
+        this.active.chart.drawings.setStayMode(on);
+        this.refocusActive();
+      },
+      { dock: "static" }
+    ) : null;
+    this.drawToolbar?.setDefinition(defaultToolbar());
+    this.drawToolbar?.setVisible(true);
+    this.bottombar = opts.bottombar !== false ? new Bottombar(this.root, {
+      timezone: this.timezone,
+      onRange: (preset) => {
+        this.active.applyRange(preset);
+        this.bottombar?.setActiveRange(preset.id);
+      },
+      onTimezone: (zone) => this.setTimezone(zone),
+      onSettingsClick: () => this.active.chart.renderer.openSettings()
+    }) : null;
+    hostEl.appendChild(this.root);
+    this.splitters = new SplitterLayer(this.gridEl, {
+      tracks: () => this.currentTracks(),
+      apply: (axis, weights) => this.applyTracks(axis, weights),
+      reset: (axis) => this.applyTracks(axis, evenTracks(this.currentTracks()[axis].length)),
+      gapPx: () => GAP_PX
+    });
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(() => this.splitters.layout());
+      this.resizeObserver.observe(this.gridEl);
+    }
+    this.keymap = new KeymapManager();
+    this.keymap.attach(this.root);
+    this.registerDefaultKeys();
+    this.drawToolbar?.setShortcuts(toolShortcutHints(this.keymap));
+    this.root.addEventListener("keydown", this.onRootKeydown);
+    this.root.tabIndex = -1;
+    this.cellBackend = this.backendFor(this.def);
+    this.applyGrid();
+    this.buildCells();
+    this.setActiveCell(bootActive != null && this.cellsById.has(bootActive) ? bootActive : this.order[0] ?? null);
+    if (opts.autofocus) this.refocusActive();
+    if (opts.indicators !== void 0) {
+      void resolveIndicators(opts.indicators).then((list) => {
+        if (this.destroyed) return;
+        this.manifest = list;
+        this.manifestSettled = true;
+        for (const cell of this.cellsById.values()) cell.setManifest(list, true);
+        this.projectActiveCell();
+      });
+    } else {
+      this.manifestSettled = true;
+    }
+    this.mountAttachments();
+  }
+  // ── access ──────────────────────────────────────────────────
+  /** The cell with identity `id` (its declared name, or `c<N>` when undeclared), or
+   *  undefined when no live cell holds it. */
+  cell(id) {
+    return this.cellsById.get(id);
+  }
+  /** Every live cell, in slot order. Enumerated over `order` — the IDENTITY space —
+   *  never the layout's positional slot ids, which only coincide with it for a
+   *  workspace whose cells are undeclared. Identities past the current layout size are
+   *  pooled, not live, so they drop out here. */
+  cells() {
+    return this.order.map((id) => this.cellsById.get(id)).filter((c) => c != null);
+  }
+  /** The ACTIVE cell — the one the shared chrome reflects and acts on. */
+  get active() {
+    const cell = this.activeId ? this.cellsById.get(this.activeId) : void 0;
+    if (!cell) throw new Error("VelaWorkspace has no active cell (destroyed?)");
+    return cell;
+  }
+  /** Shortcut for `active.chart` — the same habit as `widget.chart`. LIVE: read it at
+   *  the point of use; the durable identity to hold is the cell (or its id). */
+  get chart() {
+    return this.active.chart;
+  }
+  setActiveCell(id) {
+    if (id === this.activeId || this.destroyed) return;
+    const prev = this.activeId;
+    if (prev) {
+      const el = this.cellsById.get(prev)?.host;
+      if (el) delete el.dataset.active;
+    }
+    this.activeId = id;
+    const prevCell = prev ? this.cellsById.get(prev) : void 0;
+    if (prevCell) {
+      prevCell.chart.drawings.setTool(null);
+      prevCell.chart.drawings.setMode(null);
+    }
+    if (id) {
+      const el = this.cellsById.get(id)?.host;
+      if (el) el.dataset.active = "1";
+    }
+    if (id) {
+      this.projectActiveCell();
+      this.events.emit("cell:active", { id, prev });
+      this.markStateDirty();
+    }
+  }
+  on(event, handler) {
+    return this.events.on(event, handler);
+  }
+  /** The context handed to contributed actions/attachments (rebuilt per invocation). */
+  context() {
+    return buildContext({
+      // Null during early construction (the topbar projects actions before cells exist).
+      active: () => this.activeId ? this.cellsById.get(this.activeId) ?? null : null,
+      cells: () => this.cells(),
+      setActiveCell: (id) => this.setActiveCell(id),
+      openSymbolSearch: (query) => this.symbolPicker.open(query ?? ""),
+      togglePanel: (id, open) => this.dock.toggle(id, open),
+      root: this.root,
+      toast: (message, kind) => this.toast.show(message, kind)
+    });
+  }
+  /** Re-project contributed topbar actions + side panels, and mount late-registered attachments. */
+  refreshActions() {
+    this.mountAttachments();
+    this.topbar.renderActions();
+    this.dock.refresh();
+    for (const cell of this.cells()) cell.chart.renderer.setLegendActions(legendActionsProviderFor(cell.chart, () => this.context()));
+  }
+  // ── state surface (the SDK's read/restore of the whole grid's config + content) ──
+  /**
+   * Snapshot the COMPLETE workspace state as a versioned, serializable document:
+   * layout + splitter sizes, active cell, sync links, timezone, and — per slot, live
+   * AND dormant — the market, the renderer's cosmetic config, the user-drawings
+   * document, and the indicator ledger. This is what `persist` writes; hosts build
+   * custom flows on it (server snapshots, share links, templates).
+   */
+  getState() {
+    const byId = /* @__PURE__ */ new Map();
+    for (const [id, cs] of this.pool) byId.set(id, cs);
+    for (const [id, cell] of this.cellsById) byId.set(id, cell.dehydrate());
+    const charts = [];
+    for (const id of this.order) {
+      const cs = byId.get(id);
+      if (cs) {
+        charts.push({ id, ...cs });
+        byId.delete(id);
+      }
+    }
+    for (const [id, cs] of byId) charts.push({ id, ...cs });
+    const state = { version: 1, layout: this.def.id, timezone: this.timezone, sync: { ...this.syncOpts }, charts };
+    if (this.activeId) state.activeCellId = this.activeId;
+    if (this.favs.length > 0) state.favorites = [...this.favs];
+    if (this.trackSizes.size > 0) state.trackSizes = Object.fromEntries([...this.trackSizes].map(([k, v]) => [k, { ...v }]));
+    const panels = this.dock.getState();
+    if (panels) state.panels = panels;
+    return state;
+  }
+  /**
+   * Restore a state document produced by {@link getState} (untrusted-safe: malformed
+   * fields are dropped). Replaces the WHOLE workspace state: prefs, sync links,
+   * layout, and every slot — current cells are rebuilt from the document. A layout id
+   * that is not registered keeps the current grid (register custom layouts first).
+   */
+  applyState(state) {
+    if (this.destroyed) return;
+    const st = sanitizeState(state);
+    if (!st) return;
+    if (st.timezone) {
+      this.timezone = st.timezone;
+      this.bottombar?.setTimezone(st.timezone);
+    }
+    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]);
+    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]) {
+      cell.destroy();
+      this.cellsById.delete(id);
+      this.events.emit("cell:destroyed", { id });
+    }
+    this.pool.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);
+    if (def) this.def = def;
+    this.cellBackend = this.backendFor(this.def);
+    this.applyGrid();
+    this.buildCells();
+    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();
+    else this.setActiveCell(nextActive);
+    this.refreshRetention();
+    this.events.emit("layout:changed", { layout: this.def.id });
+    this.markStateDirty();
+  }
+  /** Set the workspace-global display timezone — applied to EVERY cell. */
+  setTimezone(zone) {
+    this.timezone = zone;
+    this.bottombar?.setTimezone(zone);
+    for (const cell of this.cellsById.values()) cell.chart.renderer.set("timezone", zone);
+    this.markStateDirty();
+  }
+  /**
+   * Swap the workspace theme at runtime — `'dark'`, `'light'`, or a full custom theme,
+   * applied to the shared chrome (topbar, panels, drawing toolbar) and EVERY cell.
+   * Also reached from any cell's chart settings → Canvas → Theme. The choice sticks:
+   * cells rebuilt by later layout switches reconstruct with it.
+   */
+  setTheme(theme) {
+    if (this.destroyed) return;
+    const t = resolveTheme(theme);
+    this.opts.theme = theme;
+    ensureUIHost(this.root, t);
+    this.drawToolbar?.setTheme(t);
+    if (this.attributionMark) applyAttributionMarkTheme(this.attributionMark, t.background);
+    for (const cell of this.cellsById.values()) cell.chart.setTheme(t);
+  }
+  // ── layout ──────────────────────────────────────────────────
+  get layout() {
+    return this.def;
+  }
+  /**
+   * Switch the grid. Cells are diffed BY IDENTITY (`order` head of the next size):
+   * surviving cells keep their live charts untouched; cells past the new size
+   * dehydrate into the pool; (re)appearing positions hydrate their identity from
+   * the pool (or its seed). Crossing the WebGL budget rebuilds every cell through
+   * the pool so the backend stays uniform.
+   */
+  setLayout(layout) {
+    if (this.destroyed) return;
+    const next = this.resolveLayout(layout);
+    const nextBackend = this.backendFor(next);
+    const rebuildAll = nextBackend !== this.cellBackend;
+    const keep = new Set(this.order.slice(0, next.cells.length));
+    for (const [id, cell] of [...this.cellsById]) {
+      if (!keep.has(id) || rebuildAll) {
+        this.poolSet(id, cell.dehydrate());
+        cell.destroy();
+        this.cellsById.delete(id);
+        this.events.emit("cell:destroyed", { id });
+      }
+    }
+    this.def = next;
+    this.cellBackend = nextBackend;
+    this.applyGrid();
+    this.buildCells();
+    this.topbar.setLayout(next.id);
+    const nextActive = activeAfterLayout(this.activeId, this.order.slice(0, next.cells.length));
+    if (nextActive === this.activeId) this.projectActiveCell();
+    else this.setActiveCell(nextActive);
+    this.refreshRetention();
+    this.events.emit("layout:changed", { layout: next.id });
+    this.markStateDirty();
+  }
+  resize() {
+    this.splitters.layout();
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.persistNow();
+    this.destroyed = true;
+    if (this.stateTimer != null) clearTimeout(this.stateTimer);
+    if (this.persistKey !== null && typeof window !== "undefined") window.removeEventListener("beforeunload", this.onUnload);
+    this.resizeObserver?.disconnect();
+    this.splitters.destroy();
+    for (const [id, cell] of [...this.cellsById]) {
+      cell.destroy();
+      this.cellsById.delete(id);
+    }
+    for (const dispose of this.attachmentDisposers.values()) {
+      try {
+        dispose();
+      } catch {
+      }
+    }
+    this.attachmentDisposers.clear();
+    this.root.removeEventListener("keydown", this.onRootKeydown);
+    this.keymap.destroy();
+    this.drawToolbar?.destroy();
+    this.topbar.destroy();
+    this.bottombar?.destroy();
+    this.dock.destroy();
+    this.objectTree.destroy();
+    this.dataWindow.destroy();
+    this.symbolPicker.destroy();
+    this.indicatorPicker.destroy();
+    this.tfQuick.destroy();
+    this.shortcutsHelp?.destroy();
+    this.toast.destroy();
+    this.alertsMenu?.destroy();
+    this.glider.stop();
+    sharedBarStore.retain(/* @__PURE__ */ new Set());
+    this.root.remove();
+    this.events.clear();
+  }
+  // ── the projection rule (trigger ① — full rebind on activation) ──
+  /** Re-project the shared chrome from the ACTIVE cell. The chrome holds no state of
+   *  its own — this is a pure read of the cell, safe to call redundantly. */
+  projectActiveCell() {
+    const cell = this.activeId ? this.cellsById.get(this.activeId) : void 0;
+    if (!cell) return;
+    this.topbar.setSymbol(cell.symbol);
+    this.topbar.setTimeframe(cell.timeframe);
+    this.topbar.setPriceStyle(cell.priceStyle);
+    this.topbar.setIndicatorCount(cell.indicatorCount);
+    this.topbar.renderActions();
+    const pushHistory = () => this.topbar.setHistoryState(cell.history.canUndo, cell.history.canRedo);
+    this.historyUnsub?.();
+    this.historyUnsub = cell.history.onChange(pushHistory);
+    pushHistory();
+    this.objectTree.setSymbol(cell.symbol);
+    this.dock.onChart(cell.chart);
+    this.bottombar?.setActiveRange(cell.activeRangeId);
+    this.indicatorPicker.sync();
+    this.glider.stop();
+    const d = cell.chart.drawings;
+    if (d.getTool() !== this.globalTool) d.setTool(this.globalTool);
+    if (d.getSnapMode() !== this.globalSnap) d.setSnapMode(this.globalSnap);
+    if (d.getStayMode() !== this.globalStay) d.setStayMode(this.globalStay);
+    if (this.drawToolbar) {
+      this.drawToolbar.setActiveTool(this.globalTool);
+      this.drawToolbar.setMagnetMode(this.globalSnap);
+      this.drawToolbar.setStayMode(this.globalStay);
+      const mode = d.getMode();
+      this.drawToolbar.setMeasureActive(mode === "measure");
+      this.drawToolbar.setEraserActive(mode === "eraser");
+      this.drawToolbar.setFavorites(d.favorites());
+    }
+  }
+  /** Put keyboard focus back on the active cell's chart surface (after a toolbar press
+   *  stole it) so chart/drawing shortcuts keep working. */
+  refocusActive() {
+    if (this.activeId) this.cellsById.get(this.activeId)?.chart.renderer.focus();
+  }
+  /** Debounced dirty mark: one `state:changed` (+ one storage write in persist mode)
+   *  per burst of edits, flushed hard on unload/destroy. */
+  markStateDirty() {
+    if (this.destroyed) return;
+    if (this.stateTimer != null) clearTimeout(this.stateTimer);
+    this.stateTimer = setTimeout(() => {
+      this.stateTimer = null;
+      this.events.emit("state:changed", void 0);
+      this.persistNow();
+    }, 500);
+  }
+  /** Write the current state through the storage adapter now (fire-and-forget). */
+  persistNow() {
+    if (this.persistKey === null || this.destroyed) return;
+    try {
+      void this.storage.set(this.persistKey, encodeState(this.getState()));
+    } catch {
+    }
+  }
+  // ── internals ───────────────────────────────────────────────
+  resolveLayout(layout) {
+    if (typeof layout !== "string") return layout;
+    const def = layoutDefinition(layout);
+    if (!def) throw new Error(`[vela] unknown workspace layout "${layout}" \u2014 register it with registerLayout().`);
+    return def;
+  }
+  backendFor(def) {
+    const explicit = this.opts.nativeBackend;
+    if (explicit && explicit !== "auto") return explicit;
+    return def.cells.length > (this.opts.maxWebglCells ?? 8) ? "canvas2d" : "auto";
+  }
+  currentTracks() {
+    const sizes = this.trackSizes.get(this.def.id);
+    return {
+      cols: sizes?.cols?.length === this.def.cols.length ? [...sizes.cols] : [...this.def.cols],
+      rows: sizes?.rows?.length === this.def.rows.length ? [...sizes.rows] : [...this.def.rows]
+    };
+  }
+  applyTracks(axis, weights) {
+    const sizes = this.trackSizes.get(this.def.id) ?? {};
+    sizes[axis] = weights;
+    this.trackSizes.set(this.def.id, sizes);
+    this.applyGrid();
+    this.markStateDirty();
+  }
+  /** Apply the grid template (+ per-cell areas) and reposition the splitter strips.
+   *  Geometry is keyed by SLOT (`perCell[slot.id]`); the cell living there is
+   *  `order[i]` — the identity/position decoupling in one line. */
+  applyGrid() {
+    const { container, perCell } = gridStyles(this.def, this.trackSizes.get(this.def.id));
+    this.gridEl.style.gridTemplateColumns = container.gridTemplateColumns ?? "";
+    this.gridEl.style.gridTemplateRows = container.gridTemplateRows ?? "";
+    this.gridEl.style.gridTemplateAreas = container.gridTemplateAreas ?? "";
+    for (const [i, slot] of this.def.cells.entries()) {
+      const host = this.cellsById.get(this.order[i] ?? "")?.host;
+      if (host) host.style.gridArea = perCell[slot.id]?.gridArea ?? "";
+    }
+    this.splitters.layout();
+  }
+  /** Create the cells the current layout wants but don't exist yet (pool-first).
+   *  A slot's CELL IDENTITY is `order[i]` (declaration order — never the slot's own
+   *  positional id); slots past the declared list mint an auto identity once. */
+  buildCells() {
+    const theme = resolveTheme(this.opts.theme);
+    const { perCell } = gridStyles(this.def, this.trackSizes.get(this.def.id));
+    for (const [i, slot] of this.def.cells.entries()) {
+      let id = this.order[i];
+      if (!id) {
+        id = nextAutoCellId(/* @__PURE__ */ new Set([...this.order, ...this.pool.keys(), ...this.cellsById.keys()]));
+        this.order[i] = id;
+      }
+      if (this.cellsById.has(id)) continue;
+      const pooled = this.pool.get(id);
+      const seed = pooled ?? { ...seedDefaults(this.opts), ...this.opts.cells?.[id] ?? {} };
+      this.pool.delete(id);
+      const cell = new ChartCell(id, this.gridEl, seed, {
+        feed: this.feed,
+        engines: this.opts.engines ?? {},
+        chartDefaults: cellChartDefaults(this.opts),
+        theme,
+        live: this.opts.live ?? false,
+        volume: this.opts.volume ?? true,
+        statusline: this.opts.statusline !== false,
+        watermark: this.opts.watermark !== false,
+        nativeBackend: this.cellBackend,
+        dialogHost: this.root,
+        timezone: () => this.timezone,
+        setTimezone: (zone) => this.setTimezone(zone),
+        context: () => this.context(),
+        activate: (id2) => this.setActiveCell(id2),
+        onMarketChanged: (id2) => this.onCellMarketChanged(id2),
+        onIndicatorsChanged: (id2) => this.onCellIndicatorsChanged(id2),
+        onStateDirty: () => this.markStateDirty(),
+        manifestSettled: () => this.manifestSettled
+      });
+      cell.host.style.gridArea = perCell[slot.id]?.gridArea ?? "";
+      this.cellsById.set(id, cell);
+      this.wireCell(cell);
+      if (this.favs.length > 0) cell.chart.drawings.setFavorites(this.favs);
+      cell.setManifest(this.manifest, pooled?.indicators == null);
+      this.events.emit("cell:created", { id });
+    }
+    for (const [i] of this.def.cells.entries()) {
+      const host = this.cellsById.get(this.order[i] ?? "")?.host;
+      if (host) this.gridEl.appendChild(host);
+    }
+  }
+  /** Per-cell chart subscriptions (trigger ② — the chart instance is stable for the
+   *  cell's whole life, so these live and die with the cell). */
+  wireCell(cell) {
+    const chart = cell.chart;
+    chart.on("indicator:error", ({ error }) => this.toast.show(`[${cell.id}] ${error.message}`, "error", 5e3));
+    chart.on("script:run", (run) => this.events.emit("script:run", { ...run, cell: cell.id }));
+    chart.on("alert", (alert) => {
+      this.alerts.unshift({ cellId: cell.id, symbol: cell.symbol, title: alert.title ?? "Alert", message: alert.message, time: alert.time });
+      if (this.alerts.length > ALERT_CAP) this.alerts.pop();
+      this.toast.show(`[${cell.id} \xB7 ${cell.symbol}] ${alert.title ? alert.title + " \u2014 " : ""}${alert.message}`, "info", 4e3);
+      this.topbar.setAlertCount(this.alerts.length);
+    });
+    chart.on("drawing:favorites", ({ favorites }) => {
+      this.favs = favorites;
+      for (const other of this.cellsById.values()) {
+        if (other !== cell) other.chart.drawings.setFavorites(favorites);
+      }
+      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.on("drawing:tool", ({ type }) => {
+      if (cell.id !== this.activeId) return;
+      this.globalTool = type;
+      this.drawToolbar?.setActiveTool(type);
+    });
+    chart.on("drawing:snap", ({ mode }) => {
+      if (cell.id !== this.activeId) return;
+      this.globalSnap = mode;
+      this.drawToolbar?.setMagnetMode(mode);
+    });
+    chart.on("drawing:stay", ({ on }) => {
+      if (cell.id !== this.activeId) return;
+      this.globalStay = on;
+      this.drawToolbar?.setStayMode(on);
+    });
+    chart.on("drawing:mode", ({ mode }) => {
+      if (cell.id !== this.activeId) return;
+      this.drawToolbar?.setMeasureActive(mode === "measure");
+      this.drawToolbar?.setEraserActive(mode === "eraser");
+    });
+    chart.on("viewport:changed", (range) => this.propagateViewport(cell.id, range));
+    chart.on("theme:changed", (t) => this.setTheme(t));
+  }
+  // ── sync links ──────────────────────────────────────────────
+  applySyncSetting(kind, setting, align = false) {
+    if (setting == null || setting === false) delete this.syncOpts[kind];
+    else this.syncOpts[kind] = setting;
+    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)) {
+        console.warn("[vela] crosshair sync: no cell renderer supports an external crosshair \u2014 nothing will show.");
+      }
+      if (this.topbar && this.def) this.topbar.setLayout(this.def.id);
+      this.markStateDirty();
+      return;
+    }
+    this.markStateDirty();
+    if (align && setting && this.activeId) {
+      if (kind === "viewport") {
+        const range = this.cellsById.get(this.activeId)?.chart.getVisibleRange();
+        if (range) this.propagateViewport(this.activeId, range);
+      } else {
+        this.propagateMarket(this.activeId);
+      }
+    }
+  }
+  /**
+   * 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.
+   */
+  propagateCrosshair(originId, time) {
+    if (this.destroyed) return;
+    const setting = this.syncOpts.crosshair;
+    if (!setting) return;
+    for (const id of syncTargets(originId, setting, [...this.cellsById.keys()])) {
+      this.cellsById.get(id)?.chart.renderer.setExternalCrosshair(time);
+    }
+  }
+  /**
+   * Push an origin cell's visible range onto its same-group followers. Loop-safe two
+   * ways: the busy guard eats the followers' SYNCHRONOUS echoes (their setVisibleRange
+   * re-emits `viewport:changed` in the same tick), and the half-bar epsilon
+   * short-circuits any async residue — a follower already within half of ITS OWN bar
+   * interval is left alone, so cross-timeframe groups settle instead of oscillating.
+   */
+  propagateViewport(originId, range) {
+    if (this.syncBusy || this.destroyed) return;
+    const targets = syncTargets(originId, this.syncOpts.viewport, [...this.cellsById.keys()]);
+    if (targets.length === 0) return;
+    this.syncBusy = true;
+    try {
+      for (const id of targets) {
+        const cell = this.cellsById.get(id);
+        if (!cell) continue;
+        const current = cell.chart.getVisibleRange();
+        const tfMs = timeframeToMs(cell.timeframe);
+        const eps = Number.isFinite(tfMs) ? tfMs / 2 : 0;
+        if (current && rangesWithin(current, range, eps)) continue;
+        cell.chart.setVisibleRange(range);
+      }
+    } finally {
+      this.syncBusy = 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
+   * own (async) `market:changed` propagates back, but every peer already carries the
+   * value, so the cell setters no-op and the wave dies.
+   */
+  propagateMarket(originId) {
+    if (this.syncBusy || this.destroyed) return;
+    const origin = this.cellsById.get(originId);
+    if (!origin) return;
+    const ids = [...this.cellsById.keys()];
+    this.syncBusy = true;
+    try {
+      if (origin.symbol) {
+        for (const id of syncTargets(originId, this.syncOpts.symbol, ids)) this.cellsById.get(id)?.setSymbol(origin.symbol);
+      }
+      for (const id of syncTargets(originId, this.syncOpts.timeframe, ids)) this.cellsById.get(id)?.setTimeframe(origin.timeframe);
+    } finally {
+      this.syncBusy = false;
+    }
+  }
+  /** Trigger ② — a cell's market changed: retention + sync always; chrome only if active. */
+  onCellMarketChanged(id) {
+    this.refreshRetention();
+    this.propagateMarket(id);
+    this.markStateDirty();
+    if (id !== this.activeId) return;
+    const cell = this.cellsById.get(id);
+    if (!cell) return;
+    this.topbar.setSymbol(cell.symbol);
+    this.topbar.setTimeframe(cell.timeframe);
+    this.objectTree.setSymbol(cell.symbol);
+  }
+  /** Trigger ② — a cell's indicator ledger changed: count + picker only if active. */
+  onCellIndicatorsChanged(id) {
+    this.markStateDirty();
+    if (id !== this.activeId) return;
+    const cell = this.cellsById.get(id);
+    if (!cell) return;
+    this.topbar.setIndicatorCount(cell.indicatorCount);
+    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 aggregated alerts bell — entries carry their cell; selecting one activates it. */
+  openAlertsMenu(anchor) {
+    this.alertsMenu?.destroy();
+    const items = this.alerts.length ? this.alerts.map((a, i) => ({
+      id: String(i),
+      label: `[${a.cellId} \xB7 ${a.symbol}] ${new Date(a.time).toLocaleTimeString()} \xB7 ${a.title}: ${a.message}`.slice(0, 80)
+    })) : [{ id: "none", label: "No alerts yet", disabled: true }];
+    this.alertsMenu = new Menu({
+      host: this.root,
+      items,
+      onSelect: (id) => {
+        const alert = this.alerts[Number(id)];
+        if (alert && this.cellsById.has(alert.cellId)) this.setActiveCell(alert.cellId);
+      }
+    });
+    const r = anchor.getBoundingClientRect();
+    this.alertsMenu.openAt(r.left, r.bottom + 4);
+  }
+  /** Mount registered attachments not yet mounted on this workspace (idempotent per id). */
+  mountAttachments() {
+    for (const att of widgetAttachments()) {
+      if (this.attachmentDisposers.has(att.id)) continue;
+      try {
+        this.attachmentDisposers.set(att.id, att.mount(this.context()));
+      } catch (err) {
+        console.warn(`[vela] workspace attachment "${att.id}" failed to mount:`, err);
+      }
+    }
+  }
+  /** The default shortcut set — every binding acts on the ACTIVE cell. */
+  registerDefaultKeys() {
+    this.keymap.register({ id: "chart.screenshot", keys: "mod+alt+s", label: "Download a chart screenshot", category: "Chart", run: () => this.active.downloadScreenshot() });
+    this.keymap.register({ id: "chart.reset-view", keys: "alt+r", label: "Reset view (all history)", category: "Chart", run: () => this.active.chart.setVisibleRangePreset("ALL") });
+    this.keymap.register({ id: "chart.toggle-log", keys: "alt+l", label: "Toggle logarithmic scale", category: "Chart", run: () => this.active.chart.renderer.set("logScale", !this.active.chart.renderer.get("logScale")) });
+    this.keymap.register({
+      id: "chart.toggle-percent",
+      keys: "alt+p",
+      label: "Toggle percent scale",
+      category: "Chart",
+      run: () => {
+        const mode = this.active.chart.renderer.get("scaleMode");
+        this.active.chart.renderer.set("scaleMode", mode === "percent" ? "price" : "percent");
+      }
+    });
+    this.keymap.register({ id: "drawings.trendline", keys: "alt+t", label: "Arm the trend line tool", category: "Drawings", run: () => this.active.chart.drawings.setTool("trendline") });
+    this.keymap.register({
+      id: "drawings.hline-cursor",
+      keys: "alt+h",
+      label: "Horizontal line at the cursor price",
+      category: "Drawings",
+      run: () => {
+        const c = this.active;
+        if (c.lastCrossTime != null && c.lastCrossPrice != null) c.chart.drawings.add("hline", { anchors: [{ time: c.lastCrossTime, price: c.lastCrossPrice }] });
+      }
+    });
+    this.keymap.register({
+      id: "drawings.vline-cursor",
+      keys: "alt+v",
+      label: "Vertical line at the cursor time",
+      category: "Drawings",
+      run: () => {
+        const c = this.active;
+        if (c.lastCrossTime != null && c.lastCrossPrice != null) c.chart.drawings.add("vline", { anchors: [{ time: c.lastCrossTime, price: c.lastCrossPrice }] });
+      }
+    });
+    this.keymap.register({ id: "history.undo", keys: ["mod+z"], label: "Undo (active chart)", category: "Edit", run: () => this.active.history.undo() });
+    this.keymap.register({ id: "history.redo", keys: ["mod+y", "mod+shift+z"], label: "Redo (active chart)", category: "Edit", run: () => this.active.history.redo() });
+    this.keymap.register({ id: "view.zoom-in", keys: "mod+arrowup", label: "Zoom in", category: "Chart", run: () => this.glider.zoom(ZOOM_IN) });
+    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() });
+    this.keymap.register({
+      id: "help.shortcuts",
+      keys: "?",
+      label: "Show this shortcuts panel",
+      category: "Help",
+      run: () => {
+        this.shortcutsHelp ?? (this.shortcutsHelp = new ShortcutsHelp(this.keymap, this.root, (open) => this.trackDialog(open)));
+        this.shortcutsHelp.open();
+      }
+    });
+  }
+  /** Bare-typing router: letters → symbol search (seeded), digits → timeframe entry. */
+  routeTyping(ev) {
+    if (this.destroyed || this.openDialogs > 0) return;
+    if (ev.ctrlKey || ev.metaKey || ev.altKey) return;
+    if (isEditableTarget(ev)) return;
+    const key = ev.key;
+    if (/^[a-zA-Z]$/.test(key)) {
+      ev.preventDefault();
+      this.symbolPicker.open(key.toUpperCase());
+    } else if (/^[0-9]$/.test(key)) {
+      ev.preventDefault();
+      this.tfQuick.open(key);
+    }
+  }
+  trackDialog(open) {
+    this.openDialogs = Math.max(0, this.openDialogs + (open ? 1 : -1));
+    if (open) this.keymap.pushScope("dialog");
+    else this.keymap.popScope("dialog");
+  }
+  /** Pool a dehydrated slot state (bounded — oldest entries drop past the cap). */
+  poolSet(id, state) {
+    this.pool.delete(id);
+    this.pool.set(id, state);
+    if (this.pool.size > POOL_CAP) {
+      const oldest = this.pool.keys().next().value;
+      if (oldest != null) this.pool.delete(oldest);
+    }
+  }
+  /**
+   * Declare every live cell's symbol to the shared bar cache so one cell's load never
+   * evicts the others' history (multi-symbol retention). Keys are CANONICAL tickers —
+   * resolved through the registry when its indexes are ready, raw until then (refreshed
+   * again on `feed.ready()`).
+   */
+  refreshRetention() {
+    const symbols = /* @__PURE__ */ new Set();
+    for (const cell of this.cellsById.values()) {
+      const raw = cell.symbol;
+      if (!raw) continue;
+      symbols.add(this.feed.resolveSymbol(raw)?.ticker ?? raw);
+    }
+    sharedBarStore.retain(symbols);
+  }
+};
+
+export { ChartCell, VelaWorkspace, activeAfterLayout, evenTracks, gridStyles, layoutDefinition, layouts, memoryStorageAdapter, rangesWithin, registerBuiltinLayouts, registerLayout, resizeTracks, syncTargets, trackOffsets, unregisterLayout };