@zeyos/zx 4.2.0 → 4.3.0

package/dist/zx.global.js

@@ -10527,6 +10527,15 @@ var zx = (() => {
     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";
@@ -10536,13 +10545,17 @@ var zx = (() => {
       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.
      */
@@ -10555,14 +10568,7 @@ var zx = (() => {
         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;
@@ -10578,7 +10584,7 @@ var zx = (() => {
      * @returns {Element}
      */
     mountTarget() {
-      return document.body;
+      return overlayHost(this.options.scope);
     }
     /**
      * Puts the dialog on screen. Overridden by subclasses that open non-modally.
@@ -10587,17 +10593,78 @@ var zx = (() => {
     _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;
     }
     /**
@@ -10622,10 +10689,12 @@ var zx = (() => {
      */
     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;
@@ -10641,9 +10710,14 @@ var zx = (() => {
      */
     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;
     }
     /**
@@ -10660,7 +10734,7 @@ var zx = (() => {
      * @returns {boolean}
      */
     isOpen() {
-      return this.el.open;
+      return this._isShown();
     }
     /**
      * Closes and removes the owned dialog. Safe to call repeatedly.
@@ -10669,7 +10743,7 @@ var zx = (() => {
     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} */
@@ -10734,7 +10808,7 @@ var zx = (() => {
     /** @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.
      */
@@ -15631,7 +15705,8 @@ var zx = (() => {
       offset: 4,
       matchWidth: false,
       openOn: "click",
-      closeOnSelect: false
+      closeOnSelect: false,
+      scope: null
     };
     /** @type {Element} */
     #anchor;
@@ -15650,6 +15725,7 @@ var zx = (() => {
       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");
@@ -15672,7 +15748,6 @@ var zx = (() => {
         popover: "manual"
       });
       panel.dataset.state = "closed";
-      document.body.append(panel);
       return panel;
     }
     /**
@@ -15682,6 +15757,8 @@ var zx = (() => {
      */
     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),
@@ -20341,7 +20418,8 @@ var zx = (() => {
       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.
@@ -20432,7 +20510,7 @@ var zx = (() => {
         )
       );
       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;
@@ -20483,6 +20561,10 @@ var zx = (() => {
     /** 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");
@@ -21361,6 +21443,7 @@ var zx = (() => {
       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");
@@ -21421,7 +21504,6 @@ var zx = (() => {
         popover: "manual"
       });
       panel.dataset.state = "closed";
-      document.body.append(panel);
       return panel;
     }
     /**
@@ -21433,6 +21515,8 @@ var zx = (() => {
     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);
@@ -22879,8 +22963,8 @@ var zx = (() => {
       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;
@@ -22959,15 +23043,16 @@ var zx = (() => {
      * @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() {
@@ -23145,19 +23230,22 @@ var zx = (() => {
       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) {
@@ -23245,7 +23333,6 @@ var zx = (() => {
     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);
@@ -23420,7 +23507,7 @@ var zx = (() => {
      * @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.
@@ -23446,35 +23533,23 @@ var zx = (() => {
     /**
      * 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}
@@ -23555,10 +23630,38 @@ var zx = (() => {
      */
     _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.
@@ -23883,7 +23986,11 @@ var zx = (() => {
       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");
@@ -24737,7 +24844,11 @@ var zx = (() => {
         }).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",
@@ -24747,11 +24858,13 @@ var zx = (() => {
             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;
@@ -25021,6 +25134,7 @@ var zx = (() => {
         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
@@ -25287,7 +25401,9 @@ var zx = (() => {
         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,
@@ -25297,6 +25413,8 @@ var zx = (() => {
           event: cloneCalendarEvent(item),
           action,
           control,
+          timeOffsetMinutes: offset?.minutes ?? 0,
+          dayOffset: offset?.days ?? 0,
           moved: false
         };
         return;
@@ -25305,7 +25423,8 @@ var zx = (() => {
       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,
@@ -25338,7 +25457,13 @@ var zx = (() => {
       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(
@@ -25353,6 +25478,7 @@ var zx = (() => {
       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();
@@ -25370,6 +25496,7 @@ var zx = (() => {
     _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");
@@ -25377,13 +25504,14 @@ var zx = (() => {
     }
     /** @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);
@@ -25392,33 +25520,36 @@ var zx = (() => {
       }
       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();
@@ -25428,8 +25559,72 @@ var zx = (() => {
           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());