@zeyos/zx 4.2.0 → 4.3.0

package/dist/zx.esm.js

@@ -10286,6 +10286,15 @@ function restore2(element, state) {
   element.replaceChildren(...state.children);
 }
 
+// src/core/overlay-host.js
+var SCOPE_SELECTOR = ".zx-scope, [data-zx-theme], [data-zx-density], [data-zx-preset]";
+function overlayHost(source = null) {
+  const context = source == null ? document.activeElement instanceof Element ? document.activeElement : null : resolveElement(source);
+  const scope2 = context?.closest?.(SCOPE_SELECTOR) ?? null;
+  if (!scope2 || scope2 === document.documentElement || scope2 === document.body) return document.body;
+  return scope2;
+}
+
 // src/components/modal/modal.js
 var Modal = class extends Component {
   static cssName = "modal";
@@ -10295,13 +10304,17 @@ var Modal = class extends Component {
     width: "auto",
     closable: true,
     lightDismiss: false,
-    destroyOnClose: false
+    destroyOnClose: false,
+    scope: null
   };
-  #pendingResult;
-  #hasPendingResult = false;
+  /** @type {Map<number, {result: unknown}>} */
+  #pendingResults = /* @__PURE__ */ new Map();
   #destroying = false;
+  #presentation = 0;
+  /** @type {number[]} */
+  #nativeClosingPresentations = [];
   /**
-   * Creates a modal appended to `document.body`.
+   * Creates a modal in the configured theme scope, or at document level when none is present.
    * @param {Element|string|null} [_target=null] Ignored; Modal always owns its root dialog.
    * @param {ModalOptions} [options={}] Modal options.
    */
@@ -10314,14 +10327,7 @@ var Modal = class extends Component {
       if (!this.options.closable || cancelEvent.defaultPrevented) event.preventDefault();
     });
     this.listen(this.el, "close", () => {
-      if (!this._isRealClose()) return;
-      this.el.dataset.state = "closed";
-      delete this.el.dataset.zxOverlayOrder;
-      const result = this.#hasPendingResult ? this.#pendingResult : this.el.returnValue || void 0;
-      this.#pendingResult = void 0;
-      this.#hasPendingResult = false;
-      this.emit("close", { result });
-      if (this.options.destroyOnClose && !this.#destroying) this.destroy();
+      this._settleClose(this.#nativeClosingPresentations.shift());
     });
     this.listen(this.el, "click", (event) => {
       if (!this.options.lightDismiss || event.target !== this.el || !isBackdropClick(this.el, event)) return;
@@ -10337,7 +10343,7 @@ var Modal = class extends Component {
    * @returns {Element}
    */
   mountTarget() {
-    return document.body;
+    return overlayHost(this.options.scope);
   }
   /**
    * Puts the dialog on screen. Overridden by subclasses that open non-modally.
@@ -10346,17 +10352,78 @@ var Modal = class extends Component {
   _show() {
     this.el.showModal();
   }
+  /**
+   * Removes the dialog from its current presentation layer.
+   * Subclasses may replace native dialog presentation while preserving Modal lifecycle events.
+   * @param {string} [result=''] Native string return value.
+   * @param {number} [presentation=this.#presentation] Presentation generation being hidden.
+   * @returns {void}
+   */
+  _hide(result = "", presentation = this.#presentation) {
+    this.#nativeClosingPresentations.push(presentation);
+    try {
+      this.el.close(result);
+    } catch (error2) {
+      this.#nativeClosingPresentations.pop();
+      throw error2;
+    }
+  }
+  /**
+   * Shows a new presentation and gives it a generation of its own. Close events are queued by the
+   * platform, so the generation lets an event from an earlier presentation expire harmlessly if
+   * the same overlay has already reopened.
+   * @returns {void}
+   */
+  _present() {
+    this._show();
+    this.#presentation += 1;
+  }
+  /**
+   * Hides the current presentation and records which generation its queued close event belongs to.
+   * @param {string} [result=''] Native string return value.
+   * @returns {void}
+   */
+  _dismiss(result = "") {
+    this._hide(result, this.#presentation);
+  }
+  /**
+   * Reports whether the current presentation layer is visible.
+   * @returns {boolean}
+   */
+  _isShown() {
+    return this.el.open;
+  }
   /**
    * Whether an incoming `close` event is a real dismissal.
    *
-   * A dialog cannot move between the top layer and the page flow while it is open, so a subclass
-   * that re-hosts itself has to close and immediately reopen. `close` is dispatched in a queued
-   * task, not synchronously, so that stale event arrives once the dialog is already open again —
-   * late enough to clobber `data-state`, fire a `close` nobody asked for, and trip
-   * `destroyOnClose`. Returning false from an override drops it at the source instead.
+   * `close` is dispatched in a queued task, not synchronously. By the time it arrives the overlay
+   * may have reopened or crossed presentation layers, so only the event for the current hidden
+   * generation may settle state, emit lifecycle events, or trigger `destroyOnClose`.
+   * @param {number|undefined} closingPresentation Presentation that produced the event, if known.
    * @returns {boolean}
    */
-  _isRealClose() {
+  _isRealClose(closingPresentation) {
+    if (closingPresentation !== void 0 && closingPresentation !== this.#presentation) return false;
+    return !this._isShown();
+  }
+  /**
+   * Settles one presentation's close without allowing a queued event to invalidate a newer one.
+   * Popover-based subclasses call this directly; native dialog events arrive through the listener.
+   * @param {number|undefined} closingPresentation Presentation that was hidden, if known.
+   * @returns {boolean} Whether this event closed the current presentation.
+   */
+  _settleClose(closingPresentation) {
+    if (!this._isRealClose(closingPresentation)) {
+      if (closingPresentation !== void 0) this.#pendingResults.delete(closingPresentation);
+      return false;
+    }
+    this.el.dataset.state = "closed";
+    delete this.el.dataset.zxOverlayOrder;
+    const pending = closingPresentation === void 0 ? void 0 : this.#pendingResults.get(closingPresentation);
+    if (closingPresentation !== void 0) this.#pendingResults.delete(closingPresentation);
+    const result = pending ? pending.result : this.el.returnValue || void 0;
+    this.emit("close", { result });
+    if (this.options.destroyOnClose && !this.#destroying) this.destroy();
     return true;
   }
   /**
@@ -10381,10 +10448,12 @@ var Modal = class extends Component {
    */
   open() {
     if (this.isOpen()) return this;
+    const host = this.mountTarget();
+    if (this.el.parentElement !== host) host.append(this.el);
     this.el.dataset.zxOverlayOrder = String(nextOverlayOrder());
     this.el.returnValue = "";
     try {
-      this._show();
+      this._present();
     } catch (error2) {
       delete this.el.dataset.zxOverlayOrder;
       throw error2;
@@ -10400,9 +10469,14 @@ var Modal = class extends Component {
    */
   close(result) {
     if (!this.isOpen()) return this;
-    this.#pendingResult = result;
-    this.#hasPendingResult = true;
-    this.el.close(typeof result === "string" ? result : "");
+    const presentation = this.#presentation;
+    this.#pendingResults.set(presentation, { result });
+    try {
+      this._dismiss(typeof result === "string" ? result : "");
+    } catch (error2) {
+      this.#pendingResults.delete(presentation);
+      throw error2;
+    }
     return this;
   }
   /**
@@ -10419,7 +10493,7 @@ var Modal = class extends Component {
    * @returns {boolean}
    */
   isOpen() {
-    return this.el.open;
+    return this._isShown();
   }
   /**
    * Closes and removes the owned dialog. Safe to call repeatedly.
@@ -10428,7 +10502,7 @@ var Modal = class extends Component {
   destroy() {
     if (this.#destroying) return;
     this.#destroying = true;
-    if (this.isOpen()) this.el.close();
+    if (this.isOpen()) this._dismiss();
     super.destroy();
   }
   /** @param {string|number} width @returns {void} */
@@ -10493,7 +10567,7 @@ var Dialog = class _Dialog extends Modal {
   /** @type {Element|null} */
   #opener = null;
   /**
-   * Creates a structured dialog appended to `document.body`.
+   * Creates a structured dialog in the configured theme scope, or at document level when unscoped.
    * @param {Element|string|null} [_target=null] Ignored; Dialog always owns its root.
    * @param {DialogOptions} [options={}] Dialog options.
    */
@@ -15390,7 +15464,8 @@ var Dropdown = class extends Component {
     offset: 4,
     matchWidth: false,
     openOn: "click",
-    closeOnSelect: false
+    closeOnSelect: false,
+    scope: null
   };
   /** @type {Element} */
   #anchor;
@@ -15409,6 +15484,7 @@ var Dropdown = class extends Component {
     if (!resolved) throw new TypeError("Dropdown anchor could not be resolved");
     super(null, options);
     this.#anchor = resolved;
+    overlayHost(this.options.scope ?? resolved).append(this.el);
     this.#rememberAnchorAttribute("aria-expanded");
     this.#rememberAnchorAttribute("aria-controls");
     this.#anchor.setAttribute("aria-expanded", "false");
@@ -15431,7 +15507,6 @@ var Dropdown = class extends Component {
       popover: "manual"
     });
     panel.dataset.state = "closed";
-    document.body.append(panel);
     return panel;
   }
   /**
@@ -15441,6 +15516,8 @@ var Dropdown = class extends Component {
    */
   open() {
     if (this.isOpen() || this.#destroyed) return this;
+    const host = overlayHost(this.options.scope ?? this.#anchor);
+    if (this.el.parentElement !== host) host.append(this.el);
     this.#position = position(this.#anchor, this.el, {
       placement: this.options.placement,
       offset: Number(this.options.offset),
@@ -20100,7 +20177,8 @@ var Launcher = class extends Component {
     emptyText: "No results",
     loadingText: "Searching\u2026",
     shortcut: "mod+k",
-    hints: { move: "Move", open: "Open", close: "Close" }
+    hints: { move: "Move", open: "Open", close: "Close" },
+    scope: null
   };
   /**
    * Creates an owned launcher dialog or enhances an existing `<dialog>` target.
@@ -20191,7 +20269,7 @@ var Launcher = class extends Component {
       )
     );
     dialog.dataset.state = "closed";
-    if (this._createdRoot) document.body.append(dialog);
+    if (this._createdRoot) overlayHost(this.options.scope).append(dialog);
     this.listen(input, "input", () => {
       this._query = /** @type {HTMLInputElement} */
       input.value;
@@ -20242,6 +20320,10 @@ var Launcher = class extends Component {
   /** Opens the launcher and focuses/selects its query. @returns {this} @fires Launcher#open */
   open() {
     if (this.isOpen() || this._destroyed) return this;
+    if (this._createdRoot) {
+      const host = overlayHost(this.options.scope);
+      if (this.el.parentElement !== host) host.append(this.el);
+    }
     this.el.showModal();
     this.el.dataset.state = "open";
     this.refs.input.setAttribute("aria-expanded", "true");
@@ -21120,6 +21202,7 @@ var Tooltip = class extends Component {
     if (!resolved) throw new TypeError("Tooltip anchor could not be resolved");
     super(null, options);
     this.#anchor = resolved;
+    overlayHost(resolved).append(this.el);
     this.#content = this.options.content;
     this.#disabled = Boolean(this.options.disabled);
     this.#describedBy = resolved.getAttribute("aria-describedby");
@@ -21180,7 +21263,6 @@ var Tooltip = class extends Component {
       popover: "manual"
     });
     panel.dataset.state = "closed";
-    document.body.append(panel);
     return panel;
   }
   /**
@@ -21192,6 +21274,8 @@ var Tooltip = class extends Component {
   show() {
     if (this.#destroyed || this.#disabled || this.isOpen()) return this;
     this.#cancelTimers();
+    const host = overlayHost(this.#anchor);
+    if (this.el.parentElement !== host) host.append(this.el);
     const node = resolveContent(this.#content);
     if (node === null) return this;
     this.el.replaceChildren(node);
@@ -22638,8 +22722,8 @@ var Message = class _Message extends Component {
     closable: true,
     maxVisible: 5
   };
-  /** @type {Message|null} */
-  static #floating = null;
+  /** @type {WeakMap<Element, Message>} */
+  static #floating = /* @__PURE__ */ new WeakMap();
   /** @returns {HTMLElement} */
   render() {
     const created = !this.el;
@@ -22718,15 +22802,16 @@ var Message = class _Message extends Component {
    * @returns {MessageHandle}
    */
   static show(msg, options = {}) {
-    return this.#floatingRegion().show(msg, options);
+    return this.#floatingRegion(options.scope).show(msg, options);
   }
   /**
    * Shows a floating progress status.
    * @param {string} text Initial status text.
+   * @param {{scope?: Element|string|null}} [options={}] Floating-region scope.
    * @returns {ProgressHandle}
    */
-  static progress(text4) {
-    return this.#floatingRegion()._progress(text4);
+  static progress(text4, options = {}) {
+    return this.#floatingRegion(options.scope)._progress(text4);
   }
   /** @returns {void} */
   destroy() {
@@ -22904,19 +22989,22 @@ var Message = class _Message extends Component {
     this._entries.delete(entry);
     this._queue.remove(entry);
   }
-  /** @returns {Message} */
-  static #floatingRegion() {
-    if (this.#floating) return this.#floating;
+  /** @param {Element|string|null|undefined} scope @returns {Message} */
+  static #floatingRegion(scope2) {
+    const host = overlayHost(scope2 ?? null);
+    const existing = this.#floating.get(host);
+    if (existing) return existing;
     const region = h("div", {
       class: "zx-message-region",
       popover: "manual",
       role: "status",
       ariaLive: "polite"
     });
-    document.body.append(region);
-    this.#floating = new _Message(region);
+    host.append(region);
+    const floating = new _Message(region);
+    this.#floating.set(host, floating);
     if (typeof region.showPopover === "function") region.showPopover();
-    return this.#floating;
+    return floating;
   }
 };
 function normalizeKind3(value) {
@@ -23004,7 +23092,6 @@ var Sheet = class extends Dialog {
   constructor(_target = null, options = {}) {
     super(null, options);
     this._dock = null;
-    this._handoff = false;
     this.setSide(this.options.side);
     this.el.dataset.backdrop = BACKDROPS.has(this.options.backdrop) ? this.options.backdrop : "dim";
     this.el.dataset.modality = modality(this.options.modal);
@@ -23179,7 +23266,7 @@ var Sheet = class extends Dialog {
    * @returns {Element}
    */
   mountTarget() {
-    return this._dock?.el ?? document.body;
+    return this._dock?.el ?? super.mountTarget();
   }
   /**
    * Reports whether a dock currently owns this sheet's positioning.
@@ -23205,35 +23292,23 @@ var Sheet = class extends Dialog {
   /**
    * Moves the dialog to its current mount and, when it was open, reopens it there.
    *
-   * The close is unavoidable — a dialog cannot cross between the top layer and the flow while
-   * open — but it is invisible: `_isRealClose()` drops the stale event, and reopening bypasses
-   * `open()` so no lifecycle event is emitted for what is only a change of address.
+   * The close is unavoidable — a dialog cannot cross between presentation layers while open —
+   * but it is invisible: Modal's presentation generation drops the stale event, and reopening
+   * bypasses `open()` so no lifecycle event is emitted for what is only a change of address.
    * @returns {void}
    */
   _rehost() {
     const wasOpen = this.isOpen();
-    if (wasOpen) {
-      this._handoff = true;
-      this.el.close();
-    }
+    if (wasOpen) this._dismiss();
     this.mountTarget().append(this.el);
     if (!wasOpen) return;
     this.el.returnValue = "";
-    this._show();
+    this._present();
     this.el.dataset.state = "open";
     if (this._dock) delete /** @type {HTMLElement} */
     this.el.dataset.zxOverlayOrder;
     else this.el.dataset.zxOverlayOrder = String(nextOverlayOrder3());
   }
-  /**
-   * Drops the stale `close` a re-hosting handoff leaves behind.
-   * @returns {boolean}
-   */
-  _isRealClose() {
-    if (!this._handoff) return true;
-    this._handoff = false;
-    return false;
-  }
   /**
    * Opens the sheet, trapping focus first where the modality asks for it.
    * @returns {this}
@@ -23314,10 +23389,38 @@ var Sheet = class extends Dialog {
    */
   _show() {
     if (this.options.modal === true && !this._dock) {
+      this.el.removeAttribute("popover");
+      this.el.removeAttribute("aria-modal");
       super._show();
       return;
     }
-    this.el.show();
+    this.el.setAttribute("aria-modal", "false");
+    if (this._dock) {
+      this.el.removeAttribute("popover");
+      this.el.show();
+      return;
+    }
+    this.el.setAttribute("popover", "manual");
+    this.el.showPopover();
+  }
+  /**
+   * Hides a native dialog or a non-modal Sheet promoted through the popover top layer.
+   * @param {string} [result=''] Native string return value.
+   * @param {number} [presentation] Presentation generation being hidden.
+   * @returns {void}
+   */
+  _hide(result = "", presentation) {
+    if (!this.el.matches(":popover-open")) {
+      super._hide(result, presentation);
+      return;
+    }
+    this.el.returnValue = result;
+    this.el.hidePopover();
+    queueMicrotask(() => this._settleClose(presentation));
+  }
+  /** @returns {boolean} */
+  _isShown() {
+    return this.el.matches(":popover-open") || super._isShown();
   }
   /**
    * Releases the focus trap and the owned dialog.
@@ -23642,7 +23745,11 @@ var ContextMenu = class extends Component {
     super(null, options);
     this.#target = resolved;
     document.body.append(this.el);
-    this.#dropdown = new Dropdown(this.el, { openOn: "manual", placement: "bottom-start" });
+    this.#dropdown = new Dropdown(this.el, {
+      openOn: "manual",
+      placement: "bottom-start",
+      scope: resolved
+    });
     this.#panel = this.#dropdown.getPanel();
     this.#panel.classList.add("zx-context-menu");
     this.#panel.setAttribute("role", "menu");
@@ -24496,7 +24603,11 @@ var Calendar = class extends Component {
       }).sort(compareEvents);
       const row2 = h(
         "section",
-        { class: "zx-calendar__agenda-day", role: "row" },
+        {
+          class: "zx-calendar__agenda-day",
+          role: "row",
+          dataset: { date: calendarDayKey(day) }
+        },
         h("button", {
           type: "button",
           class: "zx-calendar__agenda-heading",
@@ -24506,11 +24617,13 @@ var Calendar = class extends Component {
           disabled: this.options.disabled
         }, this._format(day, { weekday: "long", day: "numeric", month: "long" }))
       );
+      const entries = h("div", { class: "zx-calendar__agenda-events", role: "gridcell" });
       if (!events.length) {
-        row2.append(h("p", { class: "zx-calendar__agenda-empty", role: "gridcell" }, this.msg("noEvents")));
+        entries.append(h("p", { class: "zx-calendar__agenda-empty" }, this.msg("noEvents")));
       } else {
-        for (const event of events) row2.append(this._eventElement(event, { variant: "agenda", day }));
+        for (const event of events) entries.append(this._eventElement(event, { variant: "agenda", day }));
       }
+      row2.append(entries);
       grid2.append(row2);
     }
     return grid2;
@@ -24780,6 +24893,7 @@ var Calendar = class extends Component {
       dataset: {
         eventId: key,
         variant: context.variant,
+        allDay: event.allDay ? "true" : null,
         draggable: this._canMove(event) ? "true" : null
       },
       style: event.color ? { "--zx-calendar-event-color": event.color } : null
@@ -25046,7 +25160,9 @@ var Calendar = class extends Component {
       const item = this._eventById(control.dataset.eventId);
       const action = control.dataset.eventAction === "resize" ? "resize" : "move";
       if (!item || (action === "move" ? !this._canMove(item) : !this._canResize(item))) return;
-      control.setPointerCapture?.(event.pointerId);
+      event.preventDefault();
+      this._capturePointer(event.pointerId);
+      const offset = action === "move" ? this._dragOffsetForEvent(item, event.clientX, event.clientY) : null;
       this._pointer = {
         type: "event",
         pointerId: event.pointerId,
@@ -25056,6 +25172,8 @@ var Calendar = class extends Component {
         event: cloneCalendarEvent(item),
         action,
         control,
+        timeOffsetMinutes: offset?.minutes ?? 0,
+        dayOffset: offset?.days ?? 0,
         moved: false
       };
       return;
@@ -25064,7 +25182,8 @@ var Calendar = class extends Component {
     if (!slot || !this.options.selectable) return;
     const date = this._dateFromTarget(slot);
     if (!date) return;
-    slot.setPointerCapture?.(event.pointerId);
+    event.preventDefault();
+    this._capturePointer(event.pointerId);
     this._pointer = {
       type: "selection",
       pointerId: event.pointerId,
@@ -25097,7 +25216,13 @@ var Calendar = class extends Component {
     const wrapper = pointer.control.closest(".zx-calendar__event");
     if (wrapper) {
       wrapper.dataset.state = "dragging";
-      wrapper.style.transform = `translate(${event.clientX - pointer.startX}px, ${event.clientY - pointer.startY}px)`;
+      if (pointer.action === "resize") {
+        wrapper.style.transform = "";
+        const height = this._timedPreviewHeight(proposed);
+        if (height) wrapper.style.blockSize = height;
+      } else {
+        wrapper.style.transform = `translate(${event.clientX - pointer.startX}px, ${event.clientY - pointer.startY}px)`;
+      }
       wrapper.dataset.preview = this._eventTime(proposed, proposed.start);
     }
     this._announce(this.msg(
@@ -25112,6 +25237,7 @@ var Calendar = class extends Component {
     const pointer = this._pointer;
     if (!pointer || pointer.pointerId !== event.pointerId) return;
     this._pointer = null;
+    this._releasePointerCapture(pointer.pointerId);
     this._clearSelectionPreview();
     if (!pointer.moved) return;
     event.preventDefault();
@@ -25129,6 +25255,7 @@ var Calendar = class extends Component {
   _cancelPointer(event) {
     if (!this._pointer || this._pointer.pointerId !== event.pointerId) return;
     const control = this._pointer.control;
+    this._releasePointerCapture(this._pointer.pointerId);
     this._pointer = null;
     this._clearSelectionPreview();
     control.closest?.(".zx-calendar__event")?.removeAttribute("data-state");
@@ -25136,13 +25263,14 @@ var Calendar = class extends Component {
   }
   /** @param {CalendarEvent} event @param {'move'|'resize'} action @param {number} x @param {number} y @returns {CalendarEvent|null} */
   _proposalAtPoint(event, action, x, y) {
-    const timed = this._timeAtPoint(x, y);
+    const resizeTimed = action === "resize" && !calendarEventSpansDays(event);
+    const timed = this._timeAtPoint(x, y, resizeTimed ? event.start : null);
     if (timed && !calendarEventSpansDays(event)) {
       if (action === "move") {
         const duration = event.end.getTime() - event.start.getTime();
         const next3 = cloneCalendarEvent(event);
-        next3.start = timed;
-        next3.end = new Date(timed.getTime() + duration);
+        next3.start = addMinutes(timed, -Number(this._pointer?.timeOffsetMinutes ?? 0));
+        next3.end = new Date(next3.start.getTime() + duration);
         return next3;
       }
       const next2 = cloneCalendarEvent(event);
@@ -25151,33 +25279,36 @@ var Calendar = class extends Component {
     }
     const day = this._dayAtPoint(x, y);
     if (!day) return null;
-    const difference = calendarDayDifference(startOfCalendarDay(event.start), day);
+    const targetDay = addCalendarDays(day, -Number(this._pointer?.dayOffset ?? 0));
+    const difference = calendarDayDifference(startOfCalendarDay(event.start), targetDay);
     if (action === "move") return shiftCalendarEvent(event, { days: difference, minutes: 0 });
     const next = cloneCalendarEvent(event);
     const endDay = addCalendarDays(day, 1);
     next.end = new Date(endDay.getTime());
     return next.end > next.start ? next : null;
   }
-  /** @param {number} x @param {number} y @returns {Date|null} */
-  _timeAtPoint(x, y) {
+  /** @param {number} x @param {number} y @param {Date|null} [fixedDay=null] @returns {Date|null} */
+  _timeAtPoint(x, y, fixedDay = null) {
     const slots = this.refs.body.querySelector(".zx-calendar__slots");
     if (!slots) return null;
     const rect = slots.getBoundingClientRect();
-    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom || rect.width <= 0 || rect.height <= 0) return null;
+    const scroller = slots.closest(".zx-calendar__time-scroller");
+    const viewport = scroller?.getBoundingClientRect();
+    const left = viewport ? Math.max(rect.left, viewport.left) : rect.left;
+    const right = viewport ? Math.min(rect.right, viewport.right) : rect.right;
+    const top = viewport ? Math.max(rect.top, viewport.top) : rect.top;
+    const bottom = viewport ? Math.min(rect.bottom, viewport.bottom) : rect.bottom;
+    if (x < left || x > right || y < top || y > bottom || rect.width <= 0 || rect.height <= 0) return null;
     const columns = Number(slots.closest('[role="grid"]')?.getAttribute("aria-colcount")) || 1;
     const rows = Number(slots.closest('[role="grid"]')?.getAttribute("aria-rowcount")) || 1;
-    const column = Math.max(0, Math.min(columns - 1, Math.floor((x - rect.left) / rect.width * columns)));
+    const fixedColumn = fixedDay ? this._timeGridDayIndex(fixedDay) : -1;
+    const column = fixedColumn >= 0 ? fixedColumn : Math.max(0, Math.min(columns - 1, Math.floor((x - rect.left) / rect.width * columns)));
     const row2 = Math.max(0, Math.min(rows - 1, Math.floor((y - rect.top) / rect.height * rows)));
     const target = slots.querySelector(`[data-row-index="${row2}"][data-day-index="${column}"]`);
     return target ? this._dateFromTarget(target) : null;
   }
   /** @param {number} x @param {number} y @returns {Date|null} */
   _dayAtPoint(x, y) {
-    const elements = typeof document.elementsFromPoint === "function" ? document.elementsFromPoint(x, y) : [];
-    for (const element of elements) {
-      const date = element instanceof HTMLElement ? element.dataset.date : null;
-      if (date) return parseDayKey(date);
-    }
     const allDay = this.refs.body.querySelector(".zx-calendar__all-day-grid");
     if (allDay) {
       const rect = allDay.getBoundingClientRect();
@@ -25187,8 +25318,72 @@ var Calendar = class extends Component {
         return parseDayKey(cells[index]?.dataset.date);
       }
     }
+    for (const monthEvents of this.refs.body.querySelectorAll(".zx-calendar__month-events")) {
+      const rect = monthEvents.getBoundingClientRect();
+      if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom || rect.width <= 0) continue;
+      const start = parseDayKey(monthEvents.closest(".zx-calendar__month-week")?.dataset.weekStart);
+      if (!start) continue;
+      const index = Math.max(0, Math.min(6, Math.floor((x - rect.left) / rect.width * 7)));
+      return addCalendarDays(start, index);
+    }
+    for (const agendaDay of this.refs.body.querySelectorAll(".zx-calendar__agenda-day")) {
+      const rect = agendaDay.getBoundingClientRect();
+      if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) continue;
+      return parseDayKey(agendaDay.dataset.date);
+    }
+    const elements = typeof document.elementsFromPoint === "function" ? document.elementsFromPoint(x, y) : [];
+    for (const element of elements) {
+      const dateTarget = element instanceof HTMLElement ? element.closest("[data-date]") : null;
+      const date = dateTarget instanceof HTMLElement ? dateTarget.dataset.date : null;
+      if (date) return parseDayKey(date);
+    }
     return null;
   }
+  /** @param {CalendarEvent} event @param {number} x @param {number} y @returns {{minutes: number, days: number}} */
+  _dragOffsetForEvent(event, x, y) {
+    if (!calendarEventSpansDays(event)) {
+      const timed = this._timeAtPoint(x, y);
+      if (timed) {
+        const slot = normalizeSlot(this.options.slotDuration);
+        const duration = Math.max(0, Math.round((event.end.getTime() - event.start.getTime()) / 6e4));
+        const maxOffset = Math.max(0, duration - slot);
+        const minutes = Math.round((timed.getTime() - event.start.getTime()) / 6e4);
+        return { minutes: Math.max(0, Math.min(maxOffset, minutes)), days: 0 };
+      }
+    }
+    const day = this._dayAtPoint(x, y);
+    const days = day ? calendarDayDifference(startOfCalendarDay(event.start), day) : 0;
+    return { minutes: 0, days: Math.max(0, days) };
+  }
+  /** @param {Date} day @returns {number} */
+  _timeGridDayIndex(day) {
+    const key = calendarDayKey(day);
+    const headings = [...this.refs.body.querySelectorAll(".zx-calendar__day-heading")];
+    return headings.findIndex((heading) => heading.dataset.date === key);
+  }
+  /** @param {CalendarEvent} event @returns {string|null} */
+  _timedPreviewHeight(event) {
+    const grid2 = this.refs.body.querySelector(".zx-calendar__time-grid");
+    if (!grid2 || calendarEventSpansDays(event)) return null;
+    const min = normalizeMinute(this.options.slotMinTime, 0);
+    const max = normalizeMinute(this.options.slotMaxTime, 1440, true);
+    const slot = normalizeSlot(this.options.slotDuration);
+    const start = event.start.getHours() * 60 + event.start.getMinutes();
+    const end = event.end.getHours() * 60 + event.end.getMinutes();
+    const minutes = Math.max(slot, Math.min(max, end) - Math.max(min, start));
+    return `${minutes / (max - min) * 100}%`;
+  }
+  /** @param {number} pointerId @returns {void} */
+  _capturePointer(pointerId) {
+    try {
+      this.el.setPointerCapture?.(pointerId);
+    } catch {
+    }
+  }
+  /** @param {number} pointerId @returns {void} */
+  _releasePointerCapture(pointerId) {
+    if (this.el.hasPointerCapture?.(pointerId)) this.el.releasePointerCapture?.(pointerId);
+  }
   /** @param {Date} start @param {Date} end @returns {void} */
   _previewSelection(start, end) {
     const low = Math.min(start.getTime(), end.getTime());