@luxalgo/vela 0.7.0 → 0.7.1

package/dist/widget.cjs

@@ -1105,6 +1105,9 @@ function applyPlotOverlayTokens(host, base, config) {
   const t = layout?.background && layout.textColor ? { ...base, background: layout.background, textColor: layout.textColor } : base;
   applyThemeTokens(host, t);
 }
+function floatingLayerHost(from, fallback) {
+  return from.closest(".vela-ui") ?? fallback ?? from;
+}
 function ensureUIHost(el, theme) {
   injectStyles(STATIC_ID, STATIC_CSS, el.getRootNode());
   el.classList.add("vela-ui");
@@ -1549,7 +1552,7 @@ var MENU_CSS = `
     /* The list is a <ul>: without this, block rows (the separator) paint a ::marker dot. */
     list-style: none;
     margin: 0;
-    background: var(--vela-surface-elev);
+    background: var(--vela-surface);
     color: var(--vela-fg);
     border: 1px solid var(--vela-border-strong);
     border-radius: 6px;
@@ -1840,7 +1843,7 @@ var Menu = class {
     const anchor = opts.trigger ?? opts.host ?? document.body;
     const doc = anchor.ownerDocument;
     injectStyles(MENU_STYLE_ID, MENU_CSS, doc);
-    const host = opts.host ?? anchor.closest?.(".vela-ui") ?? doc.body;
+    const host = floatingLayerHost(opts.host ?? anchor, doc.body);
     this.root = new Surface(doc, {
       host,
       placement: opts.placement,
@@ -1985,7 +1988,8 @@ var Popover = class {
     const doc = opts.trigger.ownerDocument;
     injectStyles(POPOVER_STYLE_ID, POPOVER_CSS, doc);
     this.trigger = opts.trigger;
-    this.host = opts.host ?? doc.body;
+    this.host = opts.host ?? floatingLayerHost(opts.trigger, doc.body);
+    this.inheritsTokens = !opts.host && this.host !== doc.body;
     this.ctrl = popoverController(opts);
     this.boundary = opts.boundary ?? "viewport";
     this.theme = opts.theme;
@@ -2017,7 +2021,7 @@ var Popover = class {
       clearTimeout(this.leaveTimer);
       this.leaveTimer = null;
     }
-    ensureUIHost(this.el, this.theme);
+    ensureUIHost(this.el, this.inheritsTokens ? void 0 : this.theme);
     if (this.fadeMs > 0) {
       this.el.style.transition = `opacity ${this.fadeMs}ms ease`;
       this.el.style.opacity = "0";
@@ -8208,16 +8212,18 @@ var Pitchfork = class extends SegmentDrawing {
   geometry(proj) {
     const a = this.anchors[0];
     const b = this.anchors[1];
-    const c = this.anchors[2];
-    if (!a || !b || !c) return null;
+    if (!a || !b) return null;
     const px = (p) => {
       const y = proj.yOf(p.price, this.paneId);
       return y == null ? null : [proj.xOf(p.time), y];
     };
     const P0 = px(a);
     const P1 = px(b);
+    if (!P0 || !P1) return null;
+    const c = this.anchors[2];
+    if (!c) return { segments: [[P0[0], P0[1], P1[0], P1[1]]], fill: null };
     const P2 = px(c);
-    if (!P0 || !P1 || !P2) return null;
+    if (!P2) return null;
     const mx = (P1[0] + P2[0]) / 2;
     const my = (P1[1] + P2[1]) / 2;
     const dx = mx - P0[0];
@@ -8264,16 +8270,19 @@ var PitchforkVariant = class extends SegmentDrawing {
   geometry(proj) {
     const a = this.anchors[0];
     const b = this.anchors[1];
-    const c = this.anchors[2];
-    if (!a || !b || !c) return null;
+    if (!a || !b) return null;
     const px = (p) => {
       const y = proj.yOf(p.price, this.paneId);
       return y == null ? null : [proj.xOf(p.time), y];
     };
-    const S2 = px(this.medianStart(a, b, c));
+    const P0 = px(a);
     const P1 = px(b);
+    if (!P0 || !P1) return null;
+    const c = this.anchors[2];
+    if (!c) return { segments: [[P0[0], P0[1], P1[0], P1[1]]], fill: null };
+    const S2 = px(this.medianStart(a, b, c));
     const P2 = px(c);
-    if (!S2 || !P1 || !P2) return null;
+    if (!S2 || !P2) return null;
     const mx = (P1[0] + P2[0]) / 2;
     const my = (P1[1] + P2[1]) / 2;
     const dx = mx - S2[0];
@@ -8288,8 +8297,12 @@ var PitchforkVariant = class extends SegmentDrawing {
         // upper tine
         extendRay(P2[0], P2[1], P2[0] + dx, P2[1] + dy, "right", w, h),
         // lower tine
-        [P1[0], P1[1], P2[0], P2[1]]
+        [P1[0], P1[1], P2[0], P2[1]],
         // base line
+        // The median leaves from the shifted origin, not the pivot — without this construction
+        // line the pivot handle would float unattached to the shape it defines.
+        [P0[0], P0[1], P1[0], P1[1]]
+        // pivot → first tine anchor
       ],
       fill: null
     };
@@ -8346,17 +8359,19 @@ var InsidePitchfork = class extends SegmentDrawing {
   geometry(proj) {
     const a = this.anchors[0];
     const b = this.anchors[1];
-    const c = this.anchors[2];
-    if (!a || !b || !c) return null;
+    if (!a || !b) return null;
     const px = (p) => {
       const y = proj.yOf(p.price, this.paneId);
       return y == null ? null : [proj.xOf(p.time), y];
     };
-    const B = px({ time: (a.time + b.time) / 2, price: (a.price + b.price) / 2 });
     const P0 = px(a);
     const P1 = px(b);
+    if (!P0 || !P1) return null;
+    const c = this.anchors[2];
+    if (!c) return { segments: [[P0[0], P0[1], P1[0], P1[1]]], fill: null };
+    const B = px({ time: (a.time + b.time) / 2, price: (a.price + b.price) / 2 });
     const P2 = px(c);
-    if (!B || !P0 || !P1 || !P2) return null;
+    if (!B || !P2) return null;
     const mx = (P1[0] + P2[0]) / 2;
     const my = (P1[1] + P2[1]) / 2;
     const dx = P2[0] - B[0];
@@ -8527,16 +8542,18 @@ var Triangle = class extends SegmentDrawing {
   geometry(proj) {
     const a = this.anchors[0];
     const b = this.anchors[1];
-    const c = this.anchors[2];
-    if (!a || !b || !c) return null;
+    if (!a || !b) return null;
     const px = (p) => {
       const y = proj.yOf(p.price, this.paneId);
       return y == null ? null : [proj.xOf(p.time), y];
     };
     const A = px(a);
     const B = px(b);
+    if (!A || !B) return null;
+    const c = this.anchors[2];
+    if (!c) return { segments: [[A[0], A[1], B[0], B[1]]], fill: null };
     const C = px(c);
-    if (!A || !B || !C) return null;
+    if (!C) return null;
     return {
       segments: [
         [A[0], A[1], B[0], B[1]],
@@ -18412,6 +18429,13 @@ function resolveAnimations(animations) {
 function isLineLikeSeries(spec) {
   return spec.kind !== "candle" && spec.kind !== "bar" && spec.kind !== "markers";
 }
+function seriesShownOn(spec, surface) {
+  if (spec.display) return spec.display[surface] !== false;
+  return spec.visible !== false;
+}
+function seriesInScale(spec) {
+  return seriesShownOn(spec, "pane") || seriesShownOn(spec, "priceScale");
+}
 
 // src/core/engine/IndicatorRegistry.ts
 var IndicatorRegistry = class {
@@ -18441,6 +18465,9 @@ var IndicatorRegistry = class {
 };
 
 // src/core/native-indicators/NativeIndicator.ts
+function nativeInstanceChannel(type, instanceId) {
+  return `${type}#${instanceId}`;
+}
 var REGISTRY2 = /* @__PURE__ */ new Map();
 function registerNativeIndicator(descriptor) {
   REGISTRY2.set(descriptor.type, descriptor);
@@ -18510,6 +18537,9 @@ var IndicatorHandleImpl = class {
   setProps(values) {
     this.controller.applyProps(this.id, values);
   }
+  updateCode(source) {
+    this.controller.updateCode(this.id, source);
+  }
   setVisible(visible) {
     this.controller.setVisible(this.id, visible);
   }
@@ -18532,6 +18562,10 @@ var IndicatorHandleImpl = class {
   setPropsSchema(schema) {
     this.propsSchema = schema;
   }
+  /** Sync the public `source` once a code update has been prepared and taken over. */
+  setSource(source) {
+    this.source = source;
+  }
   /** Sync the public `visible` getter when the orchestrator changes visibility (API or legend eye). */
   setVisibleState(visible) {
     this.visibleState = visible;
@@ -19352,6 +19386,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
       if (identityChanged) {
         this.beginLoad(false);
         this.setBarSeries([], { clearing: true });
+        this.blankIndicatorVisuals();
         if (this.activeEngineStyle) {
           this.typeEngines.get(this.activeEngineStyle)?.suspend();
           this.renderer.setNativeData?.(this.activeEngineStyle, void 0);
@@ -19394,7 +19429,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
   restartNativeIndicators() {
     for (const record of this.registry.all()) {
       if (!record.native) continue;
-      record.native.instance.stop();
+      if (record.native.started) record.native.instance.stop();
       record.native.instance = record.native.descriptor.create();
       record.native.started = false;
       record.pendingStructural = true;
@@ -19602,6 +19637,23 @@ var EngineOrchestrator = class _EngineOrchestrator {
     this.renderer.setBars(this.bars, { preserveView: true });
     this.reexecuteIndicators();
   }
+  /**
+   * Blank every mounted indicator's painted output — series data, fills, backgrounds,
+   * price lines, drawings, bar colors, trades — while keeping the mount (legend row,
+   * pane, settings) intact, via the same idempotent-by-id remount an input edit uses.
+   * Called on a market identity switch: the fresh models arrive only after the new
+   * bars load, so nothing blanked here is ever restored — each consumer's re-run
+   * remounts a full model over it.
+   */
+  blankIndicatorVisuals() {
+    for (const record of this.registry.all()) {
+      if (record.hidden || !record.renderHandle || !record.model) continue;
+      record.model = blankedModel(record.model);
+      record.renderHandle = this.renderer.mountIndicator(record.model);
+      record.pendingStructural = true;
+      this.setLoading(record, true);
+    }
+  }
   /** Stop + re-run every visible Pine indicator (its input bars changed wholesale). */
   reexecuteIndicators() {
     for (const record of this.registry.all()) {
@@ -19846,6 +19898,61 @@ var EngineOrchestrator = class _EngineOrchestrator {
     record.session.update(record.inputValues, record.propValues);
     this.events.emit("indicator:inputs", { id });
   }
+  /**
+   * IndicatorController: replace a SCRIPT indicator's source in place (see
+   * {@link IndicatorHandle.updateCode}). Prepare-first: the running session keeps
+   * computing until the new source has compiled, so a broken edit costs the user
+   * nothing but an `error` event. Natives have no script — warn and leave them alone.
+   */
+  updateCode(id, source) {
+    const record = this.registry.get(id);
+    const handle = this.handles.get(id);
+    if (!record || !handle) return;
+    if (record.native) {
+      console.warn(`[vela] updateCode("${id}") \u2014 a native indicator has no script to update.`);
+      return;
+    }
+    if (source === record.source && record.pendingSource === void 0) return;
+    record.pendingSource = source;
+    void this.swapSource(id, source, handle);
+  }
+  async swapSource(id, source, handle) {
+    const engine = this.registry.get(id)?.engine ?? this.engineFor(this.registry.get(id)?.options?.language);
+    let prepared;
+    try {
+      prepared = await engine.prepare(source, id);
+    } catch (err) {
+      const record2 = this.registry.get(id);
+      if (record2?.pendingSource === source) {
+        record2.pendingSource = void 0;
+        this.fail(id, handle, err);
+      }
+      return;
+    }
+    const record = this.registry.get(id);
+    if (!record || record.pendingSource !== source) return;
+    record.pendingSource = void 0;
+    record.source = source;
+    record.engine = engine;
+    record.prepared = prepared;
+    handle.setSource(source);
+    record.inputValues = valuesOnSchema(prepared.inputs, record.inputValues);
+    record.propValues = valuesOnSchema(prepared.props ?? [], record.propValues);
+    handle.setSchema(prepared.inputs);
+    handle.setPropsSchema(prepared.props ?? []);
+    record.session?.stop();
+    record.session = void 0;
+    record.pendingStructural = true;
+    record.pendingCause = "code";
+    if (record.hidden) return;
+    if (record.renderHandle) {
+      this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues, record.propValues);
+      this.setLoading(record, true);
+    } else {
+      this.mountLoadingPlaceholder(id, record);
+    }
+    this.executeIndicator(id, handle);
+  }
   /** IndicatorController: tear down an indicator and (if now empty) its pane. */
   /** Live handles of every indicator on the chart (script + native), insertion order. */
   listIndicators() {
@@ -19860,7 +19967,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     const record = this.registry.remove(id);
     if (record?.native?.type === "volume") this.volumeOptedOut = true;
     record?.session?.stop();
-    record?.native?.instance.stop();
+    if (record?.native?.started) record.native.instance.stop();
     this.handles.delete(id);
     if (record?.renderHandle) this.renderer.removeIndicator(record.renderHandle);
     const paneId = record?.model?.paneId;
@@ -19886,7 +19993,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     if (!visible) {
       record.session?.stop();
       record.session = void 0;
-      record.native?.instance.suspend();
+      if (record.native?.started) record.native.instance.suspend();
       if (record.renderHandle) this.renderer.setIndicatorVisible?.(record.renderHandle, false);
       else if (record.native) this.mountHiddenNativeRow(id, record);
     } else {
@@ -19967,7 +20074,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     this.paneActionUnsub?.();
     for (const record of this.registry.all()) {
       record.session?.stop();
-      record.native?.instance.stop();
+      if (record.native?.started) record.native.instance.stop();
     }
     for (const engine of this.typeEngines.values()) engine.stop();
     this.typeEngines.clear();
@@ -19991,6 +20098,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
       const engine = this.engineFor(options.language);
       record.engine = engine;
       const prepared = await engine.prepare(source, id);
+      if (record.source !== source) return;
       record.prepared = prepared;
       const defaults2 = {};
       for (const input of prepared.inputs) defaults2[input.key] = input.defval;
@@ -20061,7 +20169,9 @@ var EngineOrchestrator = class _EngineOrchestrator {
       await this.readyPromise;
       const record = this.registry.get(id);
       if (!record?.native || record.hidden) return;
+      const channel = this.nativeChannel(record);
       const ctx = {
+        id,
         symbol: this.config.market.symbol ?? "TEST",
         timeframe: this.config.market.timeframe ?? "60",
         live: this.config.live,
@@ -20069,7 +20179,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
         bars: () => this.bars,
         data: this.dataControl,
         emit: (out) => this.applyModel(id, this.buildNativeModel(record, out)),
-        pushData: (data) => this.renderer.setNativeData?.(record.native.type, data),
+        pushData: (data) => this.renderer.setNativeData?.(channel, data),
         setStatus: (status) => {
           if (record.renderHandle && !record.hidden) this.renderer.setIndicatorStatus?.(record.renderHandle, status);
         }
@@ -20080,16 +20190,26 @@ var EngineOrchestrator = class _EngineOrchestrator {
       this.fail(id, handle, err);
     }
   }
+  /** The renderer-layer channel a native instance's `pushData` lands on: the type itself
+   *  for a single-instance type (the layer id doubles as the channel), a per-instance
+   *  channel for a `multiInstance` type — otherwise every instance would overwrite the
+   *  one layer. Stamped on the model so the renderer mounts a dedicated layer for it. */
+  nativeChannel(record) {
+    const { type, descriptor } = record.native;
+    return descriptor.multiInstance ? nativeInstanceChannel(type, record.id) : type;
+  }
   /** Wrap a native indicator's emitted visuals into a full IndicatorModel, tagged `native`. */
   buildNativeModel(record, out) {
     const d = record.native.descriptor;
+    const type = record.native.type;
+    const channel = this.nativeChannel(record);
     return {
       id: record.id,
       title: record.title,
       ...d.shortTitle ? { shorttitle: d.shortTitle } : {},
       overlay: d.overlay,
       paneHint: d.paneHint,
-      native: { type: record.native.type },
+      native: { type, ...channel !== type ? { channel } : {} },
       ...d.legend === false ? { legend: false } : {},
       ...out.paneAxis != null ? { paneAxis: out.paneAxis } : {},
       series: out.series ?? [],
@@ -20379,6 +20499,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
   applyModel(id, model) {
     const record = this.registry.get(id);
     if (!record || record.hidden) return true;
+    if (this.switchingMarket) return false;
     if (record.loading && this.bars.length === 0 && !_EngineOrchestrator.modelHasOutput(model)) return false;
     const handle = this.handles.get(id);
     if (!record.renderHandle) {
@@ -20396,7 +20517,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     if (record.loading && !record.paneLocked) {
       const routed = this.routePane(id, model, record.options ?? {});
       if (routed !== paneId) {
-        if (paneId !== "price") {
+        if (paneId !== "price" && !this.registry.all().some((r) => r.id !== id && r.model?.paneId === paneId)) {
           this.renderer.removePane(paneId);
           this.forgetPane(paneId);
         }
@@ -20525,6 +20646,34 @@ function yieldToPaint() {
   }
   return new Promise((resolve) => setTimeout(resolve, 0));
 }
+function valuesOnSchema(schema, previous) {
+  const out = {};
+  const declared = /* @__PURE__ */ new Set();
+  for (const s of schema) {
+    out[s.key] = s.defval;
+    declared.add(s.key);
+    declared.add(s.title);
+  }
+  for (const [k, v] of Object.entries(previous)) if (declared.has(k)) out[k] = v;
+  return out;
+}
+function blankedModel(model) {
+  return {
+    ...model,
+    series: model.series.map((s) => s.kind === "candle" || s.kind === "bar" ? { ...s, bars: [] } : s.kind === "markers" ? { ...s, markers: [] } : { ...s, points: [] }),
+    fills: [],
+    backgrounds: [],
+    priceLines: [],
+    lines: [],
+    boxes: [],
+    labels: [],
+    polylines: [],
+    linefills: [],
+    tables: [],
+    barColors: [],
+    trades: []
+  };
+}
 function modelToValuePatch(model) {
   const series = [];
   let from = Number.POSITIVE_INFINITY;
@@ -23284,33 +23433,32 @@ function candleGeometry(xCss, spacing, dpr, bodyScale = 1) {
     center: (wickLeftDev + wickDev / 2) / dpr
   };
 }
-function aggregateCandleColumns(bars, i0, i1, xOf, yOf) {
+function aggregateCandleColumns(bars, i0, i1, xOf, yOf, colorOf2) {
   const out = [];
   let col = NaN;
-  let intervals = [];
+  let runs = [];
   const flush = () => {
-    if (intervals.length === 0) return;
-    const merged = [intervals[0]];
-    for (let k = 1; k < intervals.length; k += 1) {
-      const prev2 = merged[merged.length - 1];
-      const next = intervals[k];
-      if (Math.abs(yOf(prev2.hi) - yOf(next.lo)) < 1) {
-        prev2.hi = next.hi;
-        if (next.headIdx < prev2.headIdx) {
-          prev2.headIdx = next.headIdx;
-          prev2.headTime = next.headTime;
-          prev2.open = next.open;
-        }
-        if (next.lastIdx > prev2.lastIdx) {
-          prev2.lastIdx = next.lastIdx;
-          prev2.close = next.close;
+    if (runs.length === 0) return;
+    runs.sort((a, b) => a.lo - b.lo);
+    const merged = [];
+    for (const next of runs) {
+      let prev2;
+      for (let k = merged.length - 1; k >= 0; k -= 1) {
+        if (merged[k].color === next.color) {
+          prev2 = merged[k];
+          break;
         }
+      }
+      if (prev2 && Math.abs(yOf(prev2.hi) - yOf(next.lo)) < 1) {
+        prev2.hi = next.hi;
+        if (next.lastIdx > prev2.lastIdx) prev2.lastIdx = next.lastIdx;
       } else {
         merged.push(next);
       }
     }
-    for (const iv of merged) out.push({ x: col, hi: iv.hi, lo: iv.lo, headTime: iv.headTime, open: iv.open, close: iv.close });
-    intervals = [];
+    merged.sort((a, b) => a.lastIdx - b.lastIdx);
+    for (const r of merged) out.push({ x: col, hi: r.hi, lo: r.lo, color: r.color });
+    runs = [];
   };
   for (let i = i0; i <= i1; i += 1) {
     const b = bars[i];
@@ -23320,26 +23468,17 @@ function aggregateCandleColumns(bars, i0, i1, xOf, yOf) {
       flush();
       col = x;
     }
+    const color = colorOf2(b);
     let lo = b.low;
     let hi = b.high;
-    let headIdx = i;
-    let headTime = b.time;
-    let open2 = b.open;
-    for (let k = intervals.length - 1; k >= 0; k -= 1) {
-      const iv = intervals[k];
-      if (iv.lo > hi || iv.hi < lo) continue;
-      if (iv.lo < lo) lo = iv.lo;
-      if (iv.hi > hi) hi = iv.hi;
-      if (iv.headIdx < headIdx) {
-        headIdx = iv.headIdx;
-        headTime = iv.headTime;
-        open2 = iv.open;
-      }
-      intervals.splice(k, 1);
-    }
-    let insertAt = 0;
-    while (insertAt < intervals.length && intervals[insertAt].lo < lo) insertAt += 1;
-    intervals.splice(insertAt, 0, { lo, hi, headIdx, headTime, open: open2, lastIdx: i, close: b.close });
+    for (let k = runs.length - 1; k >= 0; k -= 1) {
+      const r = runs[k];
+      if (r.color !== color || r.lo > hi || r.hi < lo) continue;
+      if (r.lo < lo) lo = r.lo;
+      if (r.hi > hi) hi = r.hi;
+      runs.splice(k, 1);
+    }
+    runs.push({ lo, hi, color, lastIdx: i });
   }
   flush();
   return out;
@@ -24010,7 +24149,7 @@ var WebGL2Backend = class {
    *  Routing mirrors the main pass: own series per pane, force_overlay series on the price pane. */
   emitGlowSources(b, scene, pane, coords, i0, i1) {
     const emitOne = (s, off) => {
-      if (!isLineLikeSeries(s) || s.visible === false) return;
+      if (!isLineLikeSeries(s) || !seriesShownOn(s, "pane")) return;
       if (s.kind === "histogram" || s.kind === "columns") return;
       if (s.kind === "circles" || s.kind === "cross") this.emitPointMarkers(b, s, pane, coords, i0, i1, off);
       else this.emitPolyline(b, s, pane, coords, i0, i1, s.kind === "step", off);
@@ -24121,7 +24260,7 @@ var WebGL2Backend = class {
     const spacing = coords.bodySpacing();
     const tier = candleTier(spacing);
     if (tier === "aggregate") {
-      this.emitCandlesAggregated(b, bars, i0, i1, coords, pane, up, down, barColors);
+      this.emitCandlesAggregated(b, bars, i0, i1, coords, pane, (bar) => barColors.get(bar.time) ?? (bar.close >= bar.open ? up : down));
       return;
     }
     const tickW = Math.max(1, Math.round(spacing * 0.35));
@@ -24262,14 +24401,17 @@ var WebGL2Backend = class {
     const spacing = coords.bodySpacing();
     const tier = candleTier(spacing);
     const paint = effectiveCandlePaint(scene.style.candle, scene.candleOverride, theme.upColor, theme.downColor);
+    const up = paint.up;
+    const down = paint.down;
+    const cs = paint.candle;
     if (tier === "aggregate") {
-      this.emitCandlesAggregated(b, bars, i0, i1, coords, pane, paint.up, paint.down, barColors);
+      this.emitCandlesAggregated(b, bars, i0, i1, coords, pane, (bar) => {
+        const isUp = bar.close >= bar.open;
+        return (isUp ? cs.wickUpColor : cs.wickDownColor) ?? barColors.get(bar.time) ?? (isUp ? up : down);
+      });
       return;
     }
     const drawBody = tier === "full";
-    const up = paint.up;
-    const down = paint.down;
-    const cs = paint.candle;
     const fading = this.candleStructureAlpha > this.candleBodyAlpha + 1e-3;
     for (let i = i0; i <= i1; i += 1) {
       const bar = bars[i];
@@ -24318,24 +24460,26 @@ var WebGL2Backend = class {
   /**
    * Sub-pixel LOD (mirrors Canvas2dBackend.drawCandlesAggregated): bars sharing a
    * rounded pixel column collapse into high-low sticks — one per contiguous
-   * coverage run (see {@link aggregateCandleColumns}), so a price gap inside the
-   * column stays a void. Draw cost stays bounded by screen width, not bar count;
-   * stick color follows its own first-open→last-close.
+   * SAME-COLOR coverage run (see {@link aggregateCandleColumns}), so a price gap
+   * inside the column stays a void and every bar's extent keeps its own color. Draw
+   * cost stays bounded by screen width, not bar count. `colorOf` is the calling
+   * style's per-bar paint rule (candles and OHLC bars resolve theirs differently).
    */
-  emitCandlesAggregated(b, bars, i0, i1, coords, pane, up, down, barColors) {
+  emitCandlesAggregated(b, bars, i0, i1, coords, pane, colorOf2) {
     const yOf = (price) => coords.priceToY(price, pane.scale, pane.bounds);
-    for (const s of aggregateCandleColumns(bars, i0, i1, (i) => coords.logicalToX(i), yOf)) {
-      const c = parseColor(barColors.get(s.headTime) ?? (s.close >= s.open ? up : down));
+    for (const s of aggregateCandleColumns(bars, i0, i1, (i) => coords.logicalToX(i), yOf, colorOf2)) {
+      const c = parseColor(s.color);
       const hY = yOf(s.hi);
       b.rect(s.x - 0.5, hY, 1, yOf(s.lo) - hY, c);
     }
   }
   emitSeries(b, spec, pane, coords, i0, i1, theme, off = 0) {
+    if (!seriesShownOn(spec, "pane")) return;
     if (spec.kind === "candle" || spec.kind === "bar") {
       this.emitPlotCandles(b, spec, pane, coords, i0, i1, theme, off);
       return;
     }
-    if (!isLineLikeSeries(spec) || spec.visible === false) return;
+    if (!isLineLikeSeries(spec)) return;
     switch (spec.kind) {
       case "histogram":
       case "columns":
@@ -25999,7 +26143,7 @@ var Canvas2dBackend = class {
     const spacing = coords.bodySpacing();
     const tier = candleTier(spacing);
     if (tier === "aggregate") {
-      this.drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, up, down, barColors);
+      this.drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, (b) => barColors.get(b.time) ?? (b.close >= b.open ? up : down));
       return;
     }
     const tickW = Math.max(1, Math.round(spacing * 0.35));
@@ -26175,12 +26319,15 @@ var Canvas2dBackend = class {
     const spacing = coords.bodySpacing();
     const tier = candleTier(spacing);
     const paint = effectiveCandlePaint(scene.style.candle, scene.candleOverride, theme.upColor, theme.downColor);
+    const cs = paint.candle;
     if (tier === "aggregate") {
-      this.drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, paint.up, paint.down, barColors);
+      this.drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, (b) => {
+        const up = b.close >= b.open;
+        return (up ? cs.wickUpColor : cs.wickDownColor) ?? barColors.get(b.time) ?? (up ? paint.up : paint.down);
+      });
       return;
     }
     const drawBody = tier === "full";
-    const cs = paint.candle;
     const fading = this.candleStructureAlpha > this.candleBodyAlpha + 1e-3;
     for (let i = i0; i <= i1; i += 1) {
       const b = bars[i];
@@ -26237,17 +26384,18 @@ var Canvas2dBackend = class {
   }
   /**
    * Sub-pixel LOD: bars sharing a rounded pixel column collapse into high-low
-   * sticks (one per contiguous coverage run — see {@link aggregateCandleColumns}),
-   * so draw cost is bounded by screen width (not bar count) when zoomed far out
-   * and a price gap inside the column stays a void. Each stick's color follows
-   * its first-open→last-close direction (a barcolor() on the head bar still wins).
+   * sticks (one per contiguous SAME-COLOR coverage run — see
+   * {@link aggregateCandleColumns}), so draw cost is bounded by screen width (not
+   * bar count) when zoomed far out, a price gap inside the column stays a void, and
+   * every bar's extent keeps its own color. `colorOf` is the calling style's per-bar
+   * paint rule (candles and OHLC bars resolve theirs differently).
    */
-  drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, up, down, barColors) {
+  drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, colorOf2) {
     const yOf = (price) => coords.priceToY(price, pane.scale, pane.bounds);
     ctx.lineWidth = 1;
-    for (const s of aggregateCandleColumns(bars, i0, i1, (i) => coords.logicalToX(i), yOf)) {
+    for (const s of aggregateCandleColumns(bars, i0, i1, (i) => coords.logicalToX(i), yOf, colorOf2)) {
       const x = s.x + 0.5;
-      ctx.strokeStyle = barColors.get(s.headTime) ?? (s.close >= s.open ? up : down);
+      ctx.strokeStyle = s.color;
       ctx.beginPath();
       ctx.moveTo(x, yOf(s.hi));
       ctx.lineTo(x, yOf(s.lo));
@@ -26255,11 +26403,12 @@ var Canvas2dBackend = class {
     }
   }
   drawSeries(ctx, spec, pane, coords, i0, i1, theme, off = 0) {
+    if (!seriesShownOn(spec, "pane")) return;
     if (spec.kind === "candle" || spec.kind === "bar") {
       this.drawPlotCandles(ctx, spec, pane, coords, i0, i1, theme, off);
       return;
     }
-    if (!isLineLikeSeries(spec) || spec.visible === false) return;
+    if (!isLineLikeSeries(spec)) return;
     switch (spec.kind) {
       case "histogram":
       case "columns":
@@ -34485,6 +34634,7 @@ function computePaneScale(models, bars, includeCandles, i0, i1, drawings, log =
   return { min: min - span * MARGIN_BOTTOM, max: max + span * MARGIN_TOP };
 }
 function considerSeries(s, i0, i1, off, consider) {
+  if (!seriesInScale(s)) return;
   if (s.kind === "candle" || s.kind === "bar") {
     for (let i = i0; i <= i1; i += 1) {
       const b = s.bars[i - off];
@@ -34704,6 +34854,22 @@ var MarkPopover = class {
     this.openKey = null;
     /** Bumped per open/close — a lazy content resolving after its popup went away is dropped. */
     this.generation = 0;
+    /**
+     * The cluster whose popup was open when the current pointer press began. The anchor is
+     * hit-transparent (the glyph is canvas pixels), so the shell's outside-dismiss closes the
+     * popup on pointerdown; the click the renderer derives from the same pointerup must then
+     * read as "close", not reopen that cluster. Captured on the document ahead of the shell's
+     * (deferred) listener, cleared once the release has dispatched.
+     */
+    this.pressKey = null;
+    this.onPress = () => {
+      if (this.openKey === null) return;
+      this.pressKey = this.openKey;
+      const doc = this.deps.plot.ownerDocument;
+      const clear = () => void setTimeout(() => this.pressKey = null, 0);
+      doc.addEventListener("pointerup", clear, { capture: true, once: true });
+      doc.addEventListener("pointercancel", clear, { capture: true, once: true });
+    };
     const doc = deps.plot.ownerDocument;
     injectStyles(CALLOUT_STYLE_ID, CALLOUT_CSS, doc);
     injectStyles(MARKS_STYLE_ID, MARKS_CSS, doc);
@@ -34711,12 +34877,14 @@ var MarkPopover = class {
     this.anchor.className = "vela-marks-anchor";
     Object.assign(this.anchor.style, { position: "absolute", pointerEvents: "none", left: "0", top: "0", width: "0", height: "0" });
     deps.plot.appendChild(this.anchor);
+    doc.addEventListener("pointerdown", this.onPress, true);
   }
   /** The cluster key the open popup belongs to, or null. */
   get key() {
     return this.openKey;
   }
   open(cluster, rect) {
+    if (this.pressKey === cluster.key) return;
     this.close();
     this.place(rect);
     const gen = ++this.generation;
@@ -34764,6 +34932,7 @@ var MarkPopover = class {
   }
   destroy() {
     this.close();
+    this.deps.plot.ownerDocument.removeEventListener("pointerdown", this.onPress, true);
     this.anchor.remove();
   }
   place(rect) {
@@ -35524,6 +35693,13 @@ var NativeRenderer = class {
     this.backdropRenderer = new BackdropRenderer();
     this.volumeRenderer = new VolumeRenderer();
     /** SDK renderer layers instantiated at mount ({@link registerRendererLayer}). */
+    /**
+     * The mounted SDK layers. One BASE entry per registered definition (channel = the layer
+     * id, no owner of its own), plus one DEDICATED entry per mounted native indicator whose
+     * model names its own channel (`native.channel` — an instance of a multi-instance type):
+     * same definition, its own canvas, reading that instance's channel and following that
+     * instance's pane and z key. `channel` is unique across the array.
+     */
     this.extLayers = [];
     /** Last applied layer-canvas order (ids below + above the data canvas) — re-slotted only on change. */
     this.layerOrderSig = "";
@@ -36669,11 +36845,7 @@ var NativeRenderer = class {
     Object.assign(this.overlayRoot.style, { position: "absolute", inset: "0", pointerEvents: "none" });
     this.plot = document.createElement("div");
     Object.assign(this.plot.style, { position: "absolute", top: "0", right: "0", bottom: "0", left: "0" });
-    this.extLayers = rendererLayers().map((def) => {
-      const canvas = document.createElement("canvas");
-      Object.assign(canvas.style, { position: "absolute", inset: "0", width: "100%", height: "100%", pointerEvents: "none" });
-      return { def, instance: def.create(), canvas };
-    });
+    this.extLayers = rendererLayers().map((def) => ({ def, instance: def.create(), canvas: this.createLayerCanvas(), channel: def.id, owner: null }));
     const below = this.extLayers.filter((l) => l.def.placement === "below-data").map((l) => l.canvas);
     const above = this.extLayers.filter((l) => l.def.placement !== "below-data").map((l) => l.canvas);
     this.plot.append(this.backdropCanvas, ...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas, this.cursorCanvas, this.overlayRoot);
@@ -36690,6 +36862,7 @@ var NativeRenderer = class {
     this.volumeRenderer.mount(this.volumeCanvas);
     this.vpvrRenderer.mount(this.vpvrCanvas);
     for (const l of this.extLayers) l.instance.mount(l.canvas);
+    for (const m of this.scene.indicators.values()) this.ensureInstanceLayer(m);
     this.chrome.mount(this.chromeCanvas);
     this.crosshairLayer.mount(this.cursorCanvas);
     this.coords.setViewport(defaultViewport());
@@ -37282,6 +37455,7 @@ var NativeRenderer = class {
     this.refreshAnchorOffset(model);
     if (model.native && this.extLayers.some((l) => l.def.id === model.native.type)) this.scene.assignIndicatorZTop(model.id);
     else this.scene.assignIndicatorZ(model.id);
+    this.ensureInstanceLayer(model);
     if (model.legend !== false) {
       this.inputsUI.upsert(model.id, model.shorttitle ?? model.title, model.inputs, model.inputValues, model.paneId, {
         native: !!model.native,
@@ -37325,6 +37499,7 @@ var NativeRenderer = class {
       this.scene.vpvrLayer = null;
     }
     this.scene.indicators.delete(handle.id);
+    this.dropInstanceLayer(handle.id);
     this.scene.forgetIndicatorZ(handle.id);
     this.scene.forgetAnchorOffset(handle.id);
     this.scene.dropIndicatorScale(handle.id);
@@ -38118,29 +38293,31 @@ var NativeRenderer = class {
       up: bar.close >= bar.open
     };
   }
-  /** One group per indicator (name = indicator title), each with a row per drawable plot. */
+  /** One group per indicator (name = indicator title), each with a row per plot shown in the data window. */
   dataWindowGroups(idx, pricePane) {
     const groups = [];
     for (const model of this.scene.indicators.values()) {
-      const rows = this.dataWindowRowsFor(model, idx, pricePane);
+      const rows = this.readoutRowsFor(model, idx, pricePane, "dataWindow");
       if (rows.length) groups.push({ name: model.title, rows });
     }
     return groups;
   }
-  /** One indicator's readout at bar `idx`: a row per drawable plot, formatted on its pane's scale. */
-  dataWindowRowsFor(model, idx, pricePane) {
+  /** One indicator's readout at bar `idx` for one value surface (the legend or the data window):
+   *  a row per plot shown on that surface, formatted on its pane's scale. A plot's `display`
+   *  decides per surface — a data-window-only plot has a row here and none in the legend. */
+  readoutRowsFor(model, idx, pricePane, surface) {
     if (model.native?.type === "volume") return this.volumeReadoutRows(model, idx);
     const pane = (model.paneId ? this.scene.panes.get(model.paneId) : null) ?? pricePane;
     const off = this.scene.offsetOf(model.id);
     const rows = [];
     for (const s of model.series) {
+      if (!seriesShownOn(s, surface)) continue;
       let value;
       let color;
       if (s.kind === "candle" || s.kind === "bar") {
         value = s.bars[idx - off]?.close;
         color = s.style?.up ?? this.theme.upColor;
       } else if (isLineLikeSeries(s)) {
-        if (s.visible === false) continue;
         value = s.points[idx - off]?.value;
         color = s.points[idx - off]?.color ?? s.style.color;
       } else {
@@ -38163,9 +38340,10 @@ var NativeRenderer = class {
     const color = bar.close >= bar.open ? cfg?.upColor ?? this.theme.upColor : cfg?.downColor ?? this.theme.downColor;
     return [{ label: model.title, value: formatVolume(vol), color }];
   }
-  /** Refresh the plot values beside every legend title — the same readout the data window
-   *  shows (crosshair bar, else the latest bar), pushed per paint. A hidden indicator has
-   *  no scene model, so its row is absent from the map and its readout clears. */
+  /** Refresh the plot values beside every legend title — the same bar the data window reads
+   *  (crosshair bar, else the latest bar), pushed per paint, filtered to the plots whose
+   *  `display` includes the legend. A hidden indicator has no scene model, so its row is
+   *  absent from the map and its readout clears. */
   updateLegendValues() {
     if (!this.inputsUI) return;
     const n = this.bars.length;
@@ -38174,7 +38352,7 @@ var NativeRenderer = class {
       const idx = this.hoverLogical != null ? this.hoverLogical : n - 1;
       const pricePane = this.dataWindowPricePane();
       for (const model of this.scene.indicators.values()) {
-        values.set(model.id, this.dataWindowRowsFor(model, idx, pricePane).map((r) => ({ value: r.value, color: r.color })));
+        values.set(model.id, this.readoutRowsFor(model, idx, pricePane, "legend").map((r) => ({ value: r.value, color: r.color })));
       }
     }
     this.inputsUI.setPlotValues(values);
@@ -38200,9 +38378,9 @@ var NativeRenderer = class {
     const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
     for (const l of this.extLayers) {
       if (!l.def.repaintOnCursor) continue;
-      const lp = this.layerPane(l.def.id) ?? pane;
+      const lp = this.layerPane(l) ?? pane;
       if (lp.collapsed) continue;
-      l.instance.render(this.extLayerArgs(l.def.id, lp.scale, lp.bounds, nowMs));
+      l.instance.render(this.extLayerArgs(l, lp.scale, lp.bounds, nowMs));
       if (this.animZoom.on && l.instance.animating?.()) this.animator.start();
     }
   }
@@ -38211,13 +38389,15 @@ var NativeRenderer = class {
     if (canvas.width === 0 || canvas.height === 0) return;
     canvas.getContext("2d")?.clearRect(0, 0, canvas.width, canvas.height);
   }
-  /** One frame's args for an SDK renderer layer (shared by the data + cursor paint paths). */
-  extLayerArgs(id, scale, bounds, nowMs) {
+  /** One frame's args for an SDK renderer layer (shared by the data + cursor paint paths).
+   *  Data + pending come from the entry's channel (per instance for a dedicated entry);
+   *  the settings bag is the TYPE's — a chart type's dialog values, one bag per type. */
+  extLayerArgs(l, scale, bounds, nowMs) {
     return {
       bars: this.scene.bars,
-      data: this.scene.nativeData.get(id),
-      settings: this.scene.nativeData.get(`${id}-settings`) ?? {},
-      pending: this.scene.nativePending.get(id) ?? [],
+      data: this.scene.nativeData.get(l.channel),
+      settings: this.scene.nativeData.get(`${l.def.id}-settings`) ?? {},
+      pending: this.scene.nativePending.get(l.channel) ?? [],
       coords: this.coords,
       scale,
       bounds,
@@ -38260,12 +38440,12 @@ var NativeRenderer = class {
       const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
       let folded = null;
       for (const l of this.extLayers) {
-        const lp = this.layerPane(l.def.id) ?? pane;
+        const lp = this.layerPane(l) ?? pane;
         if (lp.collapsed) {
           this.clearLayerCanvas(l.canvas);
           continue;
         }
-        const args = this.extLayerArgs(l.def.id, lp.scale, lp.bounds, nowMs);
+        const args = this.extLayerArgs(l, lp.scale, lp.bounds, nowMs);
         l.instance.render(args);
         if (lp === pane) folded = foldBaseModulation(folded, l.instance.modulateBase?.(args) ?? null);
         if (this.animZoom.on && l.instance.animating?.()) this.animator.start();
@@ -38548,19 +38728,60 @@ var NativeRenderer = class {
     }
     return null;
   }
-  /** The mounted native indicator that OWNS an SDK layer — the one whose type equals the
-   *  layer id (the id doubles as the data channel, so the pairing is the SDK's own
-   *  contract). Null for chart-type channels and while the owner is hidden (a hidden
-   *  indicator leaves the scene; its cleared data channel paints nothing anyway). */
-  layerOwner(layerId) {
+  /** One transparent, pointer-transparent SDK layer canvas covering the plot. */
+  createLayerCanvas() {
+    const canvas = document.createElement("canvas");
+    Object.assign(canvas.style, { position: "absolute", inset: "0", width: "100%", height: "100%", pointerEvents: "none" });
+    return canvas;
+  }
+  /**
+   * Mount the DEDICATED layer of a native indicator that names its own channel (an
+   * instance of a multi-instance type painting through a registered layer): a fresh
+   * instance of the layer's definition on its own canvas, reading that channel. Idempotent
+   * — a show after hide re-mounts the model, and the layer (kept across the hide, like the
+   * z key) is simply reused. Skipped while the renderer itself is unmounted (`mount()`
+   * catches up from the scene).
+   */
+  ensureInstanceLayer(model) {
+    const channel = model.native?.channel;
+    if (!channel || !this.plot) return;
+    if (this.extLayers.some((l) => l.owner === model.id)) return;
+    const base = this.extLayers.find((l) => l.owner === null && l.def.id === model.native.type);
+    if (!base) return;
+    const canvas = this.createLayerCanvas();
+    canvas.width = this.dataCanvas.width;
+    canvas.height = this.dataCanvas.height;
+    canvas.style.width = this.dataCanvas.style.width || "100%";
+    canvas.style.height = this.dataCanvas.style.height || "100%";
+    const entry = { def: base.def, instance: base.def.create(), canvas, channel, owner: model.id };
+    this.extLayers.push(entry);
+    this.plot.insertBefore(canvas, this.chromeCanvas);
+    entry.instance.mount(canvas);
+  }
+  /** Tear down the dedicated layer of a removed indicator (a hide keeps it). */
+  dropInstanceLayer(indicatorId) {
+    const i = this.extLayers.findIndex((l2) => l2.owner === indicatorId);
+    if (i < 0) return;
+    const [l] = this.extLayers.splice(i, 1);
+    l.instance.destroy?.();
+    l.canvas.remove();
+  }
+  /** The mounted native indicator that OWNS an SDK layer entry. A dedicated entry is
+   *  owned by the instance it was mounted for; the base entry by the mounted indicator
+   *  whose type equals the layer id and that has no channel of its own (the id doubles
+   *  as the data channel, so the pairing is the SDK's own contract). Null for chart-type
+   *  channels and while the owner is hidden (a hidden indicator leaves the scene; its
+   *  cleared data channel paints nothing anyway). */
+  layerOwner(l) {
+    if (l.owner !== null) return this.scene.indicators.get(l.owner) ?? null;
     for (const m of this.scene.indicators.values()) {
-      if (m.native?.type === layerId) return m;
+      if (m.native?.type === l.def.id && !m.native.channel) return m;
     }
     return null;
   }
   /** The pane an SDK layer paints on: its owner's pane, else the price pane. */
-  layerPane(layerId) {
-    const owner = this.layerOwner(layerId);
+  layerPane(l) {
+    const owner = this.layerOwner(l);
     const paneId = owner ? owner.paneId ?? PRICE_PANE_ID2 : PRICE_PANE_ID2;
     return this.scene.panes.get(paneId) ?? null;
   }
@@ -38568,12 +38789,12 @@ var NativeRenderer = class {
    *  owned layers by their owner's z key against the candles' (an indicator restacked
    *  below the candles takes its layer canvas along), unowned by declared placement. */
   orderedLayerCanvases() {
-    const byId = new Map(this.extLayers.map((l) => [l.def.id, l.canvas]));
+    const byId = new Map(this.extLayers.map((l) => [l.channel, l.canvas]));
     const { below, above } = stackLayers(
       this.extLayers.map((l) => {
-        const owner = this.layerOwner(l.def.id);
+        const owner = this.layerOwner(l);
         return {
-          id: l.def.id,
+          id: l.channel,
           placement: l.def.placement === "below-data" ? "below-data" : "above-data",
           ownerZ: owner ? this.scene.zOf(owner.id) : null
         };
@@ -38595,7 +38816,7 @@ var NativeRenderer = class {
   syncLayerCanvasOrder() {
     if (this.extLayers.length === 0 || !this.plot) return;
     const { below, above } = this.orderedLayerCanvases();
-    const sig = [...below.map((c) => this.extLayers.find((l) => l.canvas === c).def.id), "|", ...above.map((c) => this.extLayers.find((l) => l.canvas === c).def.id)].join(",");
+    const sig = [...below.map((c) => this.extLayers.find((l) => l.canvas === c).channel), "|", ...above.map((c) => this.extLayers.find((l) => l.canvas === c).channel)].join(",");
     if (sig === this.layerOrderSig) return;
     this.layerOrderSig = sig;
     for (const c of below) this.plot.insertBefore(c, this.dataCanvas);
@@ -43759,7 +43980,8 @@ var ChartCell = class {
     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}). */
+   *  the LIVE plot surface for overlay ink (statusline, watermark). Menus portal to
+   *  `.vela-ui` and keep the app-theme surface (see {@link applyPlotOverlayTokens}). */
   syncPlotOverlayTokens() {
     applyPlotOverlayTokens(this.host, this.appTheme, this.inner?.renderer.getConfig() ?? null);
   }
@@ -44643,7 +44865,21 @@ var VelaWorkspace = class {
     /** Live sync configuration (mutable copy of the option). */
     this.syncOpts = {};
     this.stateTimer = null;
-    this.onUnload = () => this.persistNow();
+    /** Re-entrance guard for {@link flushPendingState}: a `state:changed` subscriber that
+     *  calls back into the workspace (`destroy()` on save is the obvious one) must not
+     *  re-enter the flush and recurse. */
+    this.emitting = false;
+    /** False until the constructor finishes. Boot is not an edit: seeding the sync
+     *  settings marks state dirty, so without this a workspace mounted and torn down
+     *  inside the debounce window would flush and tell the host the user had changed
+     *  something — a save of the default document over whatever was stored. */
+    this.booted = false;
+    /** A page unload gets the same flush as a teardown — the pending edit reaches the
+     *  host, the timer is cleared, and a `destroy()` that follows adds no second write. */
+    this.onUnload = () => {
+      this.flushPendingState();
+      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;
@@ -44957,6 +45193,7 @@ var VelaWorkspace = class {
     }
     this.mountAttachments();
     this.restoreGlobalExt();
+    this.booted = true;
   }
   // ── access ──────────────────────────────────────────────────
   /** The cell with identity `id` (its declared name, or `c<N>` when undeclared), or
@@ -45365,13 +45602,17 @@ var VelaWorkspace = class {
   }
   destroy() {
     if (this.destroyed) return;
-    this.persistNow();
+    this.flushPendingState();
     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]) {
+      try {
+        this.poolSet(id, cell.dehydrate());
+      } catch (err) {
+        console.warn(`[vela] could not snapshot cell "${id}" while destroying:`, err);
+      }
       cell.destroy();
       this.cellsById.delete(id);
     }
@@ -45457,7 +45698,7 @@ var VelaWorkspace = class {
   /** 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.destroyed || !this.booted) return;
     if (this.stateTimer != null) clearTimeout(this.stateTimer);
     this.stateTimer = setTimeout(() => {
       this.stateTimer = null;
@@ -45465,6 +45706,44 @@ var VelaWorkspace = class {
       this.persistNow();
     }, 500);
   }
+  /**
+   * Push a pending debounced change out NOW, for a teardown or a page unload — the
+   * two moments the 500ms timer would otherwise never reach.
+   *
+   * Dropping it was a silent data loss: the timer carries BOTH halves of the dirty
+   * signal — the `state:changed` event and the storage write — so a host that saves
+   * from that event (a server-backed host, where `persistNow` is a no-op for want of
+   * a `persistKey`) simply never heard about the user's last edit.
+   *
+   * Idempotent and re-entrancy safe, which the ordering here buys:
+   *  - a no-op unless a timer is actually pending, so a teardown with nothing
+   *    outstanding stays silent and never invents an edit;
+   *  - the timer is cleared FIRST, so nothing survives this call and a second call
+   *    does nothing — `destroy()` after an unload flush adds no second write;
+   *  - the state is snapshotted BEFORE the handlers run, and that snapshot is what
+   *    gets persisted, so storage and the host are told the same thing even if a
+   *    handler mutates state while it runs;
+   *  - `emitting` is held across the emit, so a handler calling back in (a host that
+   *    tears down on save is the obvious one) cannot re-enter this and recurse.
+   */
+  flushPendingState() {
+    if (this.stateTimer == null || this.emitting) return;
+    clearTimeout(this.stateTimer);
+    this.stateTimer = null;
+    const snapshot = this.persistKey !== null ? encodeState(this.getState()) : null;
+    this.emitting = true;
+    try {
+      this.events.emit("state:changed", void 0);
+    } finally {
+      this.emitting = false;
+    }
+    if (snapshot !== null && this.persistKey !== null) {
+      try {
+        void this.storage.set(this.persistKey, snapshot);
+      } catch {
+      }
+    }
+  }
   /** Write the current state through the storage adapter now (fire-and-forget). */
   persistNow() {
     if (this.persistKey === null || this.destroyed) return;