@luxalgo/vela 0.8.1 → 0.8.2

package/dist/vela.global.js

@@ -214,7 +214,7 @@ var Vela = (function (exports) {
       this.controller.applyProps(this.id, values);
     }
     updateCode(source) {
-      this.controller.updateCode(this.id, source);
+      return this.controller.updateCode(this.id, source);
     }
     setVisible(visible) {
       this.controller.setVisible(this.id, visible);
@@ -617,6 +617,7 @@ var Vela = (function (exports) {
   registerIcon("plus", S('<path d="M8 2.8v10.4M2.8 8h10.4"/>'));
   registerIcon("minus", S('<path d="M2.8 8h10.4"/>'));
   registerIcon("maximize", S('<path d="M2.5 6V3a.5.5 0 0 1 .5-.5h3M10 2.5h3a.5.5 0 0 1 .5.5v3M13.5 10v3a.5.5 0 0 1-.5.5h-3M6 13.5H3a.5.5 0 0 1-.5-.5v-3"/>'));
+  registerIcon("restore", S('<path d="M6 2.5v3a.5.5 0 0 1-.5.5h-3M13.5 6h-3a.5.5 0 0 1-.5-.5v-3M10 13.5v-3a.5.5 0 0 1 .5-.5h3M2.5 10h3a.5.5 0 0 1 .5.5v3"/>'));
   registerIcon("restore", S('<path d="M6.2 2.5v3.7H2.5M9.8 13.5V9.8h3.7M13.5 6.2H9.8V2.5M2.5 9.8h3.7v3.7"/>'));
   registerIcon("star", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l-3.5 1.85.65-3.9-2.8-2.75 3.9-.55z"/>'));
   registerIcon("star-filled", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l-3.5 1.85.65-3.9-2.8-2.75 3.9-.55z"/>', 'fill="currentColor"'));
@@ -3275,6 +3276,10 @@ var Vela = (function (exports) {
 
   // src/core/drawings/types/FibLevels.ts
   var FibLevels = class extends FibRatios {
+    /** Price of a level for the two anchor prices; subclasses override to change which anchor ratio 0 sits on. */
+    levelPrice(ratio, p1, p2) {
+      return p1 + ratio * (p2 - p1);
+    }
     /** Per-level pixel line + price for the ENABLED levels, spanning the anchors' time range. */
     levelLines(proj) {
       const a = this.anchors[0];
@@ -3284,11 +3289,10 @@ var Vela = (function (exports) {
       const xb = proj.xOf(b.time);
       const x1 = Math.min(xa, xb);
       const x2 = Math.max(xa, xb);
-      const delta = b.price - a.price;
       const out = [];
       for (const lv of this.levels) {
         if (!lv.enabled) continue;
-        const price = a.price + lv.ratio * delta;
+        const price = this.levelPrice(lv.ratio, a.price, b.price);
         const y = proj.yOf(price, this.paneId);
         if (y == null) continue;
         out.push({ ratio: lv.ratio, color: lv.color, label: lv.label, price, x1, x2, y });
@@ -3328,8 +3332,7 @@ var Vela = (function (exports) {
       const a = this.anchors[0];
       const b = this.anchors[1];
       if (!a || !b) return null;
-      const delta = b.price - a.price;
-      const prices = this.levels.filter((l) => l.enabled).map((l) => a.price + l.ratio * delta);
+      const prices = this.levels.filter((l) => l.enabled).map((l) => this.levelPrice(l.ratio, a.price, b.price));
       if (prices.length === 0) return null;
       return { min: Math.min(...prices), max: Math.max(...prices) };
     }
@@ -3415,13 +3418,24 @@ var Vela = (function (exports) {
   // src/core/drawings/types/FibRetracement.ts
   var LEVELS = fibLevels([0, 0.236, 0.382, 0.5, 0.618, 0.786, 1]);
   var FibRetracement = class extends FibLevels {
-    constructor() {
-      super(...arguments);
+    constructor(init) {
+      super(init);
       this.type = "fibretracement";
+      if (this.reverse === void 0) this.reverse = false;
     }
     defaultLevels() {
       return LEVELS;
     }
+    levelPrice(ratio, p1, p2) {
+      return this.reverse ? p1 + ratio * (p2 - p1) : p2 + ratio * (p1 - p2);
+    }
+    writeProps() {
+      return { ...super.writeProps(), reverse: this.reverse };
+    }
+    readProps(props) {
+      super.readProps(props);
+      this.reverse = typeof props.reverse === "boolean" ? props.reverse : true;
+    }
   };
 
   // src/core/drawings/types/FibExtension.ts
@@ -9234,20 +9248,26 @@ var Vela = (function (exports) {
     /**
      * 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.
+     * computing until the new source has compiled; then the new code runs on TRIAL until
+     * its first model lands, and a failure before that puts the previous code back.
+     * 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 || !handle) return Promise.resolve({ ok: false, error: new Error(`[vela] updateCode("${id}") \u2014 the indicator is no longer on the chart.`) });
       if (record.native) {
         console.warn(`[vela] updateCode("${id}") \u2014 a native indicator has no script to update.`);
-        return;
+        return Promise.resolve({ ok: false, error: new Error(`[vela] updateCode("${id}") \u2014 a native indicator has no script to update.`) });
       }
-      if (source === record.source && record.pendingSource === void 0) return;
-      record.pendingSource = source;
-      void this.swapSource(id, source, handle);
+      const busy = record.pendingSource !== void 0 || record.codeTrial !== void 0;
+      if (!busy && source === record.source) return Promise.resolve({ ok: true, error: null });
+      return new Promise((resolve) => {
+        (record.codeWaiters ?? (record.codeWaiters = [])).push(resolve);
+        if (record.pendingSource === source || record.pendingSource === void 0 && record.codeTrial && record.source === source) 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);
@@ -9258,26 +9278,41 @@ var Vela = (function (exports) {
         const record2 = this.registry.get(id);
         if (record2?.pendingSource === source) {
           record2.pendingSource = void 0;
-          this.fail(id, handle, err);
+          this.rejectCode(id, record2, handle, err);
         }
         return;
       }
       const record = this.registry.get(id);
       if (!record || record.pendingSource !== source) return;
       record.pendingSource = void 0;
+      const previous = record.codeTrial?.previous ?? {
+        source: record.source,
+        engine: record.engine,
+        prepared: record.prepared,
+        inputValues: record.inputValues,
+        propValues: record.propValues,
+        inputs: [...handle.inputs],
+        props: [...handle.props]
+      };
+      record.inputValues = valuesOnSchema(prepared.inputs, record.inputValues, record.prepared?.inputs);
+      record.propValues = valuesOnSchema(prepared.props ?? [], record.propValues, record.prepared?.props);
       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.hidden) {
+        record.codeTrial = void 0;
+        if (record.renderHandle) this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues, record.propValues);
+        this.settleCode(record, { ok: true, error: null });
+        return;
+      }
+      record.codeTrial = { previous };
       if (record.renderHandle) {
         this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues, record.propValues);
         this.setLoading(record, true);
@@ -9285,6 +9320,46 @@ var Vela = (function (exports) {
         this.mountLoadingPlaceholder(id, record);
       }
       this.executeIndicator(id, handle);
+      if (this.bars.length === 0 && record.codeTrial) {
+        record.codeTrial = void 0;
+        this.settleCode(record, { ok: true, error: null });
+      }
+    }
+    /** Resolve every `updateCode` caller waiting on this record's chain of edits. */
+    settleCode(record, result) {
+      const waiters = record.codeWaiters;
+      record.codeWaiters = void 0;
+      if (waiters) for (const resolve of waiters) resolve(result);
+    }
+    /**
+     * An update failed — at prepare, or on trial before its first model. A trial puts the
+     * previous code back (source, engine, prepared script, values, schema) and restarts it;
+     * its visuals were never dropped, so the chart keeps painting throughout. Then the
+     * failure reports the usual way and every waiting caller learns it.
+     */
+    rejectCode(id, record, handle, err) {
+      const trial = record.codeTrial;
+      record.codeTrial = void 0;
+      this.fail(id, handle, err);
+      if (trial) {
+        const p = trial.previous;
+        record.session?.stop();
+        record.session = void 0;
+        record.source = p.source;
+        record.engine = p.engine;
+        record.prepared = p.prepared;
+        record.inputValues = p.inputValues;
+        record.propValues = p.propValues;
+        handle.setSource(p.source);
+        handle.setSchema(p.inputs);
+        handle.setPropsSchema(p.props);
+        record.pendingStructural = true;
+        record.pendingCause = void 0;
+        if (record.renderHandle) this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues, record.propValues);
+        if (!record.hidden) this.executeIndicator(id, handle);
+      }
+      const error = err instanceof Error ? err : new Error(String(err));
+      this.settleCode(record, { ok: false, error });
     }
     /** IndicatorController: tear down an indicator and (if now empty) its pane. */
     /** Live handles of every indicator on the chart (script + native), insertion order. */
@@ -9299,6 +9374,7 @@ var Vela = (function (exports) {
     removeIndicator(id) {
       const record = this.registry.remove(id);
       if (record?.native?.type === "volume") this.volumeOptedOut = true;
+      if (record) this.settleCode(record, { ok: false, error: new Error(`[vela] updateCode("${id}") \u2014 the indicator was removed.`) });
       record?.session?.stop();
       if (record?.native?.started) record.native.instance.stop();
       this.handles.delete(id);
@@ -9326,6 +9402,10 @@ var Vela = (function (exports) {
       if (!visible) {
         record.session?.stop();
         record.session = void 0;
+        if (record.codeTrial) {
+          record.codeTrial = void 0;
+          this.settleCode(record, { ok: true, error: null });
+        }
         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);
@@ -9413,6 +9493,7 @@ var Vela = (function (exports) {
       this.viewportUnsub?.();
       this.paneActionUnsub?.();
       for (const record of this.registry.all()) {
+        this.settleCode(record, { ok: false, error: new Error("[vela] updateCode \u2014 the chart was destroyed.") });
         record.session?.stop();
         if (record.native?.started) record.native.instance.stop();
       }
@@ -9481,7 +9562,8 @@ var Vela = (function (exports) {
       const record = this.registry.get(id);
       if (!record || !record.engine || !record.prepared || record.hidden) return;
       const mode = this.config.live && !record.prepared.reactsToViewport && record.engine.capabilities.streaming ? "live" : "static";
-      record.session = record.engine.execute(
+      const prepared = record.prepared;
+      const session = record.engine.execute(
         {
           prepared: record.prepared,
           market: this.market(),
@@ -9502,6 +9584,10 @@ var Vela = (function (exports) {
             const cause = record.pendingCause ?? "history";
             if (!this.applyModel(id, model)) return;
             record.pendingCause = void 0;
+            if (record.codeTrial) {
+              record.codeTrial = void 0;
+              this.settleCode(record, { ok: true, error: null });
+            }
             this.emitContextChanged(id);
             this.emitScriptRun(id, cause, first2);
           },
@@ -9512,9 +9598,17 @@ var Vela = (function (exports) {
             handle.emit("alert", { id: a.id, message: a.message, title: a.title, time: a.time });
           },
           onWarning: (w) => this.events.emit("warning", w),
-          onError: (err) => this.fail(id, handle, err)
+          onError: (err) => {
+            if (record.codeTrial) this.rejectCode(id, record, handle, err);
+            else this.fail(id, handle, err);
+          }
         }
       );
+      if (record.prepared !== prepared) {
+        session.stop();
+        return;
+      }
+      record.session = session;
       this.emitContextChanged(id);
     }
     /**
@@ -10015,7 +10109,7 @@ var Vela = (function (exports) {
     }
     return new Promise((resolve) => setTimeout(resolve, 0));
   }
-  function valuesOnSchema(schema, previous) {
+  function valuesOnSchema(schema, previous, oldSchema = []) {
     const out = {};
     const declared = /* @__PURE__ */ new Set();
     for (const s of schema) {
@@ -10023,9 +10117,22 @@ var Vela = (function (exports) {
       declared.add(s.key);
       declared.add(s.title);
     }
-    for (const [k, v] of Object.entries(previous)) if (declared.has(k)) out[k] = v;
+    const oldDefaults = /* @__PURE__ */ new Map();
+    for (const s of oldSchema) {
+      oldDefaults.set(s.key, s.defval);
+      if (!oldDefaults.has(s.title)) oldDefaults.set(s.title, s.defval);
+    }
+    for (const [k, v] of Object.entries(previous)) {
+      if (!declared.has(k)) continue;
+      if (oldDefaults.has(k) && sameInputValue(oldDefaults.get(k), v)) continue;
+      out[k] = v;
+    }
     return out;
   }
+  function sameInputValue(a, b) {
+    if (a === b) return true;
+    return typeof a === "object" && a !== null && typeof b === "object" && b !== null && JSON.stringify(a) === JSON.stringify(b);
+  }
   function blankedModel(model) {
     return {
       ...model,
@@ -13587,6 +13694,17 @@ ${STATIC_DECLS}
     return span;
   }
 
+  // src/ui/surface-events.ts
+  var SURFACE_OPEN_EVENT = "vela:surface-open";
+  var SURFACE_CLOSE_EVENT = "vela:surface-close";
+  function announceSurface(el, open2, kind, trigger = null) {
+    const View = el.ownerDocument.defaultView;
+    if (!View) return;
+    el.dispatchEvent(
+      new View.CustomEvent(open2 ? SURFACE_OPEN_EVENT : SURFACE_CLOSE_EVENT, { bubbles: true, composed: true, detail: { kind, trigger } })
+    );
+  }
+
   // node_modules/@zag-js/anatomy/dist/create-anatomy.mjs
   var createAnatomy = (name, parts3 = []) => ({
     parts: (...values) => {
@@ -18065,6 +18183,8 @@ ${STATIC_DECLS}
       /** Trigger rect captured when this level opened — the list stays put if the
        *  trigger then moves (favorite chips shifting the caret). */
       this.pinnedAnchor = null;
+      /** The open state last announced — see {@link announce}. */
+      this.shown = false;
       this.doc = doc;
       this.host = opts.host;
       this.onSelect = opts.onSelect;
@@ -18078,6 +18198,7 @@ ${STATIC_DECLS}
       this.positioner.appendChild(this.list);
       this.host.appendChild(this.positioner);
       const trigger = opts.trigger;
+      this.opener = trigger ?? opts.opener ?? null;
       this.ctrl = menuController({
         items: [],
         id: opts.id,
@@ -18099,15 +18220,21 @@ ${STATIC_DECLS}
       if (opts.triggerId && trigger) trigger.id = opts.triggerId;
       this.handle = runMachine(this.ctrl.machine, this.ctrl.props, (service) => {
         const api = this.ctrl.connect(service);
+        if (this.shown && !api.open) this.announce(false);
         if (trigger) spreadProps(trigger, api.getTriggerProps(), this.mid);
         spreadProps(this.positioner, api.getPositionerProps(), this.mid);
         spreadProps(this.list, api.getContentProps(), this.mid);
         this.project(api);
+        if (api.open && !this.shown) this.announce(true);
       });
     }
     get api() {
       return this.ctrl.connect(this.handle.service);
     }
+    announce(open2) {
+      this.shown = open2;
+      announceSurface(this.list, open2, "menu", this.opener);
+    }
     setItems(items) {
       this.items = items;
       for (const sub2 of this.subs.values()) sub2.destroy();
@@ -18125,6 +18252,7 @@ ${STATIC_DECLS}
       for (const sub2 of this.subs.values()) sub2.destroy();
       this.subs.clear();
       this.handle.stop();
+      if (this.shown) this.announce(false);
       this.positioner.remove();
     }
     byId(id) {
@@ -18218,6 +18346,7 @@ ${STATIC_DECLS}
           const sub2 = new _Surface(doc, {
             host: this.host,
             placement: "right-start",
+            opener: li,
             onSelect: this.onSelect,
             onFavorite: this.onFavorite,
             checkmarks: this.checkmarks,
@@ -18437,16 +18566,21 @@ ${STATIC_DECLS}
         this.hide();
       };
       const onReflow = () => this.place();
-      setTimeout(() => document.addEventListener("pointerdown", onOutside, true), 0);
+      setTimeout(() => {
+        if (this.onOutside === onOutside) document.addEventListener("pointerdown", onOutside, true);
+      }, 0);
       document.addEventListener("keydown", onKey, true);
       window.addEventListener("resize", onReflow, true);
       document.addEventListener("scroll", onReflow, true);
       this.onOutside = onOutside;
       this.onKey = onKey;
       this.onReflow = onReflow;
+      announceSurface(this.el, true, "popover", this.trigger);
     }
     hide() {
       if (!this.shown) return;
+      this.shown = false;
+      announceSurface(this.el, false, "popover", this.trigger);
       if (this.onOutside) document.removeEventListener("pointerdown", this.onOutside, true);
       if (this.onKey) document.removeEventListener("keydown", this.onKey, true);
       if (this.onReflow) {
@@ -18466,7 +18600,6 @@ ${STATIC_DECLS}
       } else {
         this.el.remove();
       }
-      this.shown = false;
       if (open === this) open = null;
       this.ctrl.onClose?.();
     }
@@ -20356,6 +20489,8 @@ ${overlayScrollbarCss(".vela-dialog *")}
   // src/ui/components/dialog/view.ts
   var Dialog = class {
     constructor(opts = {}) {
+      this.opener = null;
+      this.wasOpen = false;
       const doc = (opts.host ?? document.body).ownerDocument;
       injectStyles(DIALOG_STYLE_ID, DIALOG_CSS, doc);
       const host = opts.host ?? doc.body;
@@ -20452,6 +20587,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
       const mid = String(this.ctrl.props.id);
       this.handle = runMachine(this.ctrl.machine, this.ctrl.props, (service) => {
         const api = this.ctrl.connect(service);
+        if (this.wasOpen && !api.open) this.announce(false);
         spreadProps(this.backdrop, api.getBackdropProps(), mid);
         spreadProps(this.positioner, api.getPositionerProps(), mid);
         spreadProps(this.panel, api.getContentProps(), mid);
@@ -20459,12 +20595,27 @@ ${overlayScrollbarCss(".vela-dialog *")}
         spreadProps(close, api.getCloseTriggerProps(), mid);
         this.backdrop.style.display = api.open ? "" : "none";
         this.positioner.style.display = api.open ? "" : "none";
+        if (api.open && !this.wasOpen) this.announce(true);
+        if (this.wasOpen && !api.open) this.restoreOpener();
+        this.wasOpen = api.open;
       });
     }
+    /** Closing hands focus back to whatever opened it (Escape, the ✕, hide(), or a
+     *  teardown that outruns the machine's close notification). */
+    restoreOpener() {
+      const opener = this.opener;
+      this.opener = null;
+      if (opener?.isConnected) opener.focus({ preventScroll: true });
+    }
+    announce(open2) {
+      const opener = this.opener === this.panel.ownerDocument.body ? null : this.opener;
+      announceSurface(this.panel, open2, "dialog", opener);
+    }
     get open() {
       return this.ctrl.connect(this.handle.service).open;
     }
     show() {
+      this.opener = this.panel.ownerDocument.activeElement;
       this.ctrl.connect(this.handle.service).setOpen(true);
     }
     hide() {
@@ -20479,6 +20630,11 @@ ${overlayScrollbarCss(".vela-dialog *")}
     destroy() {
       if (this.open) this.hide();
       this.handle.stop();
+      if (this.wasOpen) {
+        this.wasOpen = false;
+        this.announce(false);
+      }
+      this.restoreOpener();
       this.backdrop.remove();
       this.positioner.remove();
     }
@@ -24648,15 +24804,23 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       this.seg(x + w, y + h, x, y + h, lineWidth, c);
       this.seg(x, y + h, x, y, lineWidth, c);
     }
-    /** Filled circle (triangle fan). */
+    /**
+     * Filled circle (triangle fan), feathered like a line: the rim is padded by {@link AA_PAD} and
+     * edgeDist runs from 0 at the center to the padded radius at the rim, with edgeHalf = r. The
+     * distance grows linearly along each spoke, so the shader's line feather gives a round soft edge.
+     */
     circle(cx, cy, r, c, segments = 16) {
-      let px = cx + r;
+      const ext = r + AA_PAD;
+      let px = cx + ext;
       let py = cy;
+      this.ensure(segments * 3);
       for (let i = 1; i <= segments; i += 1) {
         const a = i / segments * Math.PI * 2;
-        const nx = cx + Math.cos(a) * r;
-        const ny = cy + Math.sin(a) * r;
-        this.tri(cx, cy, c, px, py, c, nx, ny, c);
+        const nx = cx + Math.cos(a) * ext;
+        const ny = cy + Math.sin(a) * ext;
+        this.v(cx, cy, c, 0, r);
+        this.v(px, py, c, ext, r);
+        this.v(nx, ny, c, ext, r);
         px = nx;
         py = ny;
       }
@@ -24837,7 +25001,7 @@ void main() {
     }
     mount(canvas) {
       this.canvas = canvas;
-      this.gl = canvas.getContext("webgl2", { alpha: true, antialias: true, depth: false, stencil: false, premultipliedAlpha: true });
+      this.gl = canvas.getContext("webgl2", { alpha: true, antialias: false, depth: false, stencil: false, premultipliedAlpha: true });
       if (!this.gl) return;
       if (!this.initGL()) {
         this.gl = null;
@@ -26289,7 +26453,7 @@ void main() {
           this.deps.drawingsPointerUp?.(x, y, this.snapMode(e));
         } else if (tapRelease && this.region === "data") {
           this.deps.onClick(x, y);
-        } else if (this.dragging && this.region === "data") {
+        } else if (this.dragging && this.region === "data" && wasTouch) {
           const stale = e.timeStamp - this.lastT > FLING_STALE_MS;
           if (!stale && Math.abs(this.vx) > FLING_MIN_SPEED) {
             const pitch = this.deps.getCoords().pxPerBar();
@@ -32745,6 +32909,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     activeDragId() {
       return this.state.kind === "pressed" && this.state.moved ? this.state.id : null;
     }
+    /** The store drawings a live drag is moving — the pressed one and its riders — or none
+     *  before the drag passes the slop. A Ctrl-drag moves copies, so its sources stay put. */
+    movingIds() {
+      if (this.state.kind !== "pressed" || !this.state.moved || this.state.clones) return /* @__PURE__ */ new Set();
+      return /* @__PURE__ */ new Set([this.state.id, ...this.state.riders.map((r) => r.id)]);
+    }
     /** The drawing under a press that has not been released yet (drag or click undecided), or null. */
     pressedId() {
       return this.state.kind === "pressed" ? this.state.id : null;
@@ -33403,6 +33573,17 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           }
         }));
       }
+      if (drawing instanceof FibRetracement) {
+        const fib = drawing;
+        grid.appendChild(fieldRow({
+          label: "Reverse",
+          bool: true,
+          toggle: {
+            checked: fib.reverse,
+            onChange: (v) => actions.patch({ reverse: v })
+          }
+        }));
+      }
       levels.forEach((lv, i) => {
         const row = document.createElement("div");
         row.className = "vela-field-span";
@@ -34770,6 +34951,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           );
         }
       }
+      announceSurface(fly, true, "menu", cell);
     }
     openMagnetFlyout() {
       const cell = this.magnetCell;
@@ -34793,6 +34975,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           })
         );
       }
+      announceSurface(fly, true, "menu", cell);
     }
     flyoutHeader(text) {
       const t = this.theme;
@@ -34861,9 +35044,11 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     }
     closeFlyout() {
       this.starEls.clear();
-      if (this.flyout) {
-        this.flyout.remove();
+      const fly = this.flyout;
+      if (fly) {
         this.flyout = null;
+        announceSurface(fly, false, "menu", this.flyoutCell);
+        fly.remove();
         this.flyoutCell?.classList.remove("vela-open");
         this.flyoutCell = null;
         this.flyoutOwnerId = null;
@@ -35188,6 +35373,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.drawings = [];
       /** Ids painted on an interleave layer this frame — the top canvas paints only their handles. */
       this.sliced = /* @__PURE__ */ new Set();
+      /** Interleaved drawings mid-drag: painted on the top canvas, left out of their slice. */
+      this.lifted = /* @__PURE__ */ new Set();
       /** Cached slice canvases, keyed `paneId|beforeZ`, reused across frames to avoid churn. */
       this.sliceCache = /* @__PURE__ */ new Map();
       /** Series boundaries per pane as of the last `prepareSlices` — lets a repaint between data
@@ -35275,7 +35462,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         selectedIds: () => this.selectedIds,
         emit: (i) => this.emit(i),
         changed: () => {
-          this.invalidateSlices();
+          this.syncLift();
           this.render();
         },
         openSettings: (id, x, y) => this.openSettingsById(id, x, y),
@@ -35901,6 +36088,20 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     /** A drawing that paints inside the series stack changed (content, not hover): its pixels
      *  live in the backend composite, so this layer alone can't show the change — ask for a
      *  data frame, which re-runs `prepareSlices` before the backend composites. */
+    /** A drawing being dragged leaves its interleave slice for the top canvas, so each pointer
+     *  move repaints one 2D layer instead of re-rasterizing and re-uploading a plot-sized slice
+     *  texture through the data frame. The slices rebuild once as the drag starts and once as it
+     *  ends (release, cancel), when the lifted set changes. */
+    syncLift() {
+      const moving = this.interaction.movingIds();
+      let same = moving.size === this.lifted.size;
+      if (same) {
+        for (const id of moving) if (!this.lifted.has(id)) same = false;
+      }
+      if (same) return;
+      this.lifted = new Set(moving);
+      this.invalidateSlices();
+    }
     invalidateSlices() {
       if (this.sliced.size > 0 || this.drawings.some((d) => this.isInterleaved(d))) this.deps.requestDataPaint();
     }
@@ -35919,7 +36120,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const theme = this.deps.theme();
       const buckets = /* @__PURE__ */ new Map();
       for (const d of this.drawings) {
-        if (!d.visible) continue;
+        if (!d.visible || this.lifted.has(d.id)) continue;
         const beforeZ = sliceKeyFor(d.zIndex, this.lastBounds.get(d.paneId) ?? []);
         if (beforeZ === null) continue;
         const key = `${d.paneId}|${beforeZ}`;
@@ -35971,8 +36172,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         mutedLabel: edited instanceof TextLabel ? edited.id : null
       };
       this.painter.seriesLook = this.deps.seriesLook();
-      this.painter.paintAll(ctx, this.drawings.filter((d) => !this.isInterleaved(d)), proj, this.deps.theme(), targets);
-      this.painter.paintHighlights(ctx, this.drawings.filter((d) => this.isInterleaved(d)), proj, handleIdsFor(targets));
+      const onTop = (d) => !this.isInterleaved(d) || this.lifted.has(d.id);
+      this.painter.paintAll(ctx, this.drawings.filter(onTop), proj, this.deps.theme(), targets);
+      this.painter.paintHighlights(ctx, this.drawings.filter((d) => !onTop(d)), proj, handleIdsFor(targets));
       const clones = this.interaction.dragClones();
       if (clones) this.painter.paintAll(ctx, clones, proj, this.deps.theme(), { selected: new Set(clones.map((c) => c.id)) });
       this.layoutTextEditor();