@luxalgo/vela 0.8.2 → 0.8.4

package/dist/{chunk-27UTYE7T.js → chunk-AUOB7A5Y.js}

@@ -1,5 +1,5 @@
-import { normalizeProps, nextUid, runMachine, spreadProps } from './chunk-NLDTVFOI.js';
-import { injectStyles, announceSurface } from './chunk-HKNO24GD.js';
+import { normalizeProps, nextUid, runMachine, spreadProps } from './chunk-WY5H4S4I.js';
+import { injectStyles, holdForExit, announceSurface } from './chunk-I2U4NZD2.js';
 import * as tooltip from '@zag-js/tooltip';
 import * as dialog from '@zag-js/dialog';
 
@@ -345,6 +345,9 @@ var Drawer = class {
   constructor(opts = {}) {
     this.opener = null;
     this.wasOpen = false;
+    /** The sheet and scrim's exit animation after a close; a reopen cancels it. */
+    this.exit = null;
+    this.destroyed = false;
     const doc = (opts.host ?? document.body).ownerDocument;
     injectStyles(DRAWER_STYLE_ID, DRAWER_CSS, doc);
     const host = opts.host ?? doc.body;
@@ -372,13 +375,21 @@ var Drawer = class {
     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);
+      const closing = this.wasOpen && !api.open;
+      if (closing) this.announce(false);
       spreadProps(this.backdrop, api.getBackdropProps(), mid);
       spreadProps(this.positioner, api.getPositionerProps(), mid);
       spreadProps(this.panel, api.getContentProps(), mid);
       spreadProps(this.titleEl, api.getTitleProps(), mid);
-      this.backdrop.style.display = api.open ? "" : "none";
-      this.positioner.style.display = api.open ? "" : "none";
+      if (api.open) {
+        this.exit?.cancel();
+        this.exit = null;
+        this.setShown(true);
+      } else if (closing) {
+        this.holdExit();
+      } else if (!this.exit) {
+        this.setShown(false);
+      }
       if (api.open && !this.wasOpen) this.announce(true);
       if (this.wasOpen && !api.open) this.restoreOpener();
       this.wasOpen = api.open;
@@ -490,6 +501,36 @@ var Drawer = class {
   setTitle(title) {
     this.titleEl.textContent = title;
   }
+  setShown(shown) {
+    this.backdrop.style.display = shown ? "" : "none";
+    this.positioner.style.display = shown ? "" : "none";
+  }
+  /** Keep the just-closed sheet up through its exit animation, then hide it — or
+   *  remove it, when it was destroyed meanwhile. `spreadProps` re-applies the close
+   *  props' `hidden` only when its value changes, so lifting it keeps the sheet and
+   *  scrim up until the exit ends. The positioner spans the host: inert, it lets
+   *  clicks through to the page while the sheet animates out. */
+  holdExit() {
+    const held = [this.panel, this.backdrop];
+    for (const el of held) el.hidden = false;
+    this.exit = holdForExit(
+      held,
+      () => {
+        this.exit = null;
+        if (this.destroyed) {
+          this.detach();
+        } else if (!this.open) {
+          for (const el of held) el.hidden = true;
+          this.setShown(false);
+        }
+      },
+      { inert: [this.positioner] }
+    );
+  }
+  detach() {
+    this.backdrop.remove();
+    this.positioner.remove();
+  }
   /** Closing hands focus back to whatever opened it (Escape, the ✕, hide(), or a
    *  teardown that outruns the machine's close notification). */
   restoreOpener() {
@@ -512,14 +553,15 @@ var Drawer = class {
     this.ctrl.connect(this.handle.service).setOpen(false);
   }
   destroy() {
+    if (this.wasOpen && !this.open) this.handle.flush();
     this.handle.stop();
+    this.destroyed = true;
     if (this.wasOpen) {
       this.wasOpen = false;
       this.announce(false);
     }
     this.restoreOpener();
-    this.backdrop.remove();
-    this.positioner.remove();
+    if (!this.exit) this.detach();
   }
 };
 

package/dist/{chunk-HKNO24GD.js → chunk-I2U4NZD2.js}

@@ -239,6 +239,12 @@ function mix(base, top, alpha) {
   const c = (x, y) => Math.round(x + (y - x) * alpha);
   return `rgb(${c(b.r, t.r)},${c(b.g, t.g)},${c(b.b, t.b)})`;
 }
+function toHex6(color, fallback = "#888888") {
+  const c = parseRgb(color);
+  if (!c) return fallback;
+  const h = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+  return `#${h(c.r)}${h(c.g)}${h(c.b)}`;
+}
 function isDarkColor(color) {
   const c = parseRgb(color);
   if (!c) return true;
@@ -282,4 +288,53 @@ function announceSurface(el, open, kind, trigger = null) {
   );
 }
 
-export { ACCENT, ACCENT_BRIGHT, BEARISH, BULLISH, CATEGORICAL, CHIP_PLATE, CROSSHAIR, FIELD_FOCUS_CSS, FIELD_FOCUS_RING, HIGHLIGHT, INFO, INVALID, MARKER, NEUTRAL, SERIES_LINE, SESSION_OFF, SESSION_POST, SESSION_PRE, SLATE, SLATE_DEEP, SURFACE_CLOSE_EVENT, SURFACE_OPEN_EVENT, TRADE_EXIT, TRADE_LONG, TRADE_SHORT, VALID, WARNING, announceSurface, categoricalColor, icon, iconAt, iconEl, iconMarkup, injectStyles, isDarkColor, mix, overlayScrollbarCss, registerIcon, svg16, svg24, svg24Solid, withAlpha };
+// src/ui/surface-exit.ts
+var CLOSING_ATTR = "data-closing";
+var SURFACE_EXIT_CAP_MS = 1e3;
+function animationsOf(els) {
+  return els.flatMap((el) => el.getAnimations({ subtree: true }));
+}
+function ends(a) {
+  return Number.isFinite(a.effect?.getComputedTiming().endTime ?? Number.POSITIVE_INFINITY);
+}
+function holdForExit(els, done, opts = {}) {
+  const list = Array.isArray(els) ? els : [els];
+  if (list.length === 0 || !list.every((el) => typeof el.getAnimations === "function")) {
+    done();
+    return null;
+  }
+  const before = new Set(animationsOf(list));
+  for (const el of list) el.setAttribute(CLOSING_ATTR, "");
+  const exit = animationsOf(list).filter((a) => !before.has(a) && ends(a));
+  if (exit.length === 0) {
+    for (const el of list) el.removeAttribute(CLOSING_ATTR);
+    done();
+    return null;
+  }
+  const frozen = [...list, ...opts.inert ?? []];
+  const wasInert = frozen.map((el) => el.inert);
+  for (const el of frozen) el.inert = true;
+  let settled = false;
+  const settle = (complete) => {
+    if (settled) return;
+    settled = true;
+    clearTimeout(cap);
+    for (const el of list) el.removeAttribute(CLOSING_ATTR);
+    frozen.forEach((el, i) => {
+      el.inert = wasInert[i];
+    });
+    if (complete) done();
+  };
+  const cap = setTimeout(() => settle(true), SURFACE_EXIT_CAP_MS);
+  let pending = exit.length;
+  const one = () => {
+    if (--pending === 0) settle(true);
+  };
+  for (const a of exit) a.finished.then(one, one);
+  return {
+    cancel: () => settle(false),
+    finish: () => settle(true)
+  };
+}
+
+export { ACCENT, ACCENT_BRIGHT, BEARISH, BULLISH, CATEGORICAL, CHIP_PLATE, CROSSHAIR, FIELD_FOCUS_CSS, FIELD_FOCUS_RING, HIGHLIGHT, INFO, INVALID, MARKER, NEUTRAL, SERIES_LINE, SESSION_OFF, SESSION_POST, SESSION_PRE, SLATE, SLATE_DEEP, SURFACE_CLOSE_EVENT, SURFACE_OPEN_EVENT, TRADE_EXIT, TRADE_LONG, TRADE_SHORT, VALID, WARNING, announceSurface, categoricalColor, holdForExit, icon, iconAt, iconEl, iconMarkup, injectStyles, isDarkColor, mix, overlayScrollbarCss, registerIcon, svg16, svg24, svg24Solid, toHex6, withAlpha };