@underverse-ui/underverse 1.0.35 → 1.0.37

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "sourceEntry": "src/index.ts",
   "totalExports": 211,
   "exports": [

package/dist/index.cjs

@@ -9964,25 +9964,94 @@ function binarySearchLastLE(arr, target) {
 }
 function intervalPack(items) {
   const sorted = [...items].sort((a, b) => a.startIdx - b.startIdx || a.endIdx - b.endIdx);
-  const lanes = [];
   const out = [];
-  for (const it of sorted) {
-    let lane = -1;
-    for (let i = 0; i < lanes.length; i++) {
-      if (lanes[i].endIdx <= it.startIdx) {
-        lane = i;
-        break;
+  const active = [];
+  const freeLanes = [];
+  let nextLane = 0;
+  const pushActive = (item) => {
+    active.push(item);
+    let i = active.length - 1;
+    while (i > 0) {
+      const p = i - 1 >> 1;
+      const a = active[i];
+      const b = active[p];
+      if (a.endIdx > b.endIdx || a.endIdx === b.endIdx && a.lane >= b.lane) break;
+      active[i] = b;
+      active[p] = a;
+      i = p;
+    }
+  };
+  const popActive = () => {
+    const top = active[0];
+    const last = active.pop();
+    if (active.length > 0) {
+      active[0] = last;
+      let i = 0;
+      while (true) {
+        const l = i * 2 + 1;
+        const r = l + 1;
+        let m = i;
+        if (l < active.length) {
+          const al = active[l];
+          const am = active[m];
+          if (al.endIdx < am.endIdx || al.endIdx === am.endIdx && al.lane < am.lane) m = l;
+        }
+        if (r < active.length) {
+          const ar = active[r];
+          const am = active[m];
+          if (ar.endIdx < am.endIdx || ar.endIdx === am.endIdx && ar.lane < am.lane) m = r;
+        }
+        if (m === i) break;
+        const cur = active[i];
+        active[i] = active[m];
+        active[m] = cur;
+        i = m;
       }
     }
-    if (lane === -1) {
-      lane = lanes.length;
-      lanes.push({ endIdx: it.endIdx });
-    } else {
-      lanes[lane].endIdx = it.endIdx;
+    return top;
+  };
+  const pushFreeLane = (lane) => {
+    freeLanes.push(lane);
+    let i = freeLanes.length - 1;
+    while (i > 0) {
+      const p = i - 1 >> 1;
+      if (freeLanes[p] <= freeLanes[i]) break;
+      const tmp = freeLanes[p];
+      freeLanes[p] = freeLanes[i];
+      freeLanes[i] = tmp;
+      i = p;
     }
+  };
+  const popFreeLane = () => {
+    const top = freeLanes[0];
+    const last = freeLanes.pop();
+    if (freeLanes.length > 0) {
+      freeLanes[0] = last;
+      let i = 0;
+      while (true) {
+        const l = i * 2 + 1;
+        const r = l + 1;
+        let m = i;
+        if (l < freeLanes.length && freeLanes[l] < freeLanes[m]) m = l;
+        if (r < freeLanes.length && freeLanes[r] < freeLanes[m]) m = r;
+        if (m === i) break;
+        const tmp = freeLanes[i];
+        freeLanes[i] = freeLanes[m];
+        freeLanes[m] = tmp;
+        i = m;
+      }
+    }
+    return top;
+  };
+  for (const it of sorted) {
+    while (active.length > 0 && active[0].endIdx <= it.startIdx) {
+      pushFreeLane(popActive().lane);
+    }
+    const lane = freeLanes.length > 0 ? popFreeLane() : nextLane++;
+    pushActive({ endIdx: it.endIdx, lane });
     out.push({ ...it, lane });
   }
-  return { packed: out, laneCount: lanes.length };
+  return { packed: out, laneCount: nextLane };
 }
 
 // ../../components/ui/CalendarTimeline/hooks.ts
@@ -9995,10 +10064,12 @@ function useHorizontalScrollSync(args) {
     const left = leftRef?.current ?? null;
     if (!body || !header) return;
     let raf = 0;
-    let syncing = false;
-    const syncFrom = (source) => {
-      if (syncing) return;
-      syncing = true;
+    let pendingSource = null;
+    const flush = () => {
+      raf = 0;
+      const source = pendingSource;
+      pendingSource = null;
+      if (!source) return;
       if (source === "header") {
         const x = header.scrollLeft;
         if (body.scrollLeft !== x) body.scrollLeft = x;
@@ -10011,15 +10082,16 @@ function useHorizontalScrollSync(args) {
         if (header.scrollLeft !== x) header.scrollLeft = x;
         if (left && left.scrollTop !== y) left.scrollTop = y;
       }
-      cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(() => {
-        syncing = false;
-      });
     };
-    const onBodyScroll = () => syncFrom("body");
-    const onHeaderScroll = () => syncFrom("header");
-    const onLeftScroll = () => syncFrom("left");
-    syncFrom("body");
+    const scheduleSync = (source) => {
+      pendingSource = source;
+      if (raf) return;
+      raf = requestAnimationFrame(flush);
+    };
+    const onBodyScroll = () => scheduleSync("body");
+    const onHeaderScroll = () => scheduleSync("header");
+    const onLeftScroll = () => scheduleSync("left");
+    scheduleSync("body");
     body.addEventListener("scroll", onBodyScroll, { passive: true });
     header.addEventListener("scroll", onHeaderScroll, { passive: true });
     left?.addEventListener("scroll", onLeftScroll, { passive: true });
@@ -10047,6 +10119,10 @@ function useVirtualVariableRows(args) {
   const [viewportHeight, setViewportHeight] = React30.useState(0);
   const [scrollTop, setScrollTop] = React30.useState(0);
   React30.useEffect(() => {
+    if (!enabled) {
+      setViewportHeight(0);
+      return;
+    }
     const el = scrollRef.current;
     if (!el) return;
     const update = () => setViewportHeight(el.clientHeight);
@@ -10054,14 +10130,32 @@ function useVirtualVariableRows(args) {
     const ro = new ResizeObserver(update);
     ro.observe(el);
     return () => ro.disconnect();
-  }, [scrollRef]);
+  }, [enabled, scrollRef]);
   React30.useEffect(() => {
+    if (!enabled) {
+      setScrollTop(0);
+      return;
+    }
     const el = scrollRef.current;
     if (!el) return;
-    const onScroll = () => setScrollTop(el.scrollTop);
+    let raf = 0;
+    let nextTop = el.scrollTop;
+    const commit = () => {
+      raf = 0;
+      setScrollTop(nextTop);
+    };
+    const onScroll = () => {
+      nextTop = el.scrollTop;
+      if (raf) return;
+      raf = requestAnimationFrame(commit);
+    };
+    setScrollTop(nextTop);
     el.addEventListener("scroll", onScroll, { passive: true });
-    return () => el.removeEventListener("scroll", onScroll);
-  }, [scrollRef]);
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+      el.removeEventListener("scroll", onScroll);
+    };
+  }, [enabled, scrollRef]);
   const prefix = React30.useMemo(() => {
     const out = new Array(itemCount + 1);
     out[0] = 0;
@@ -10582,7 +10676,7 @@ function CalendarTimelineHeader(props) {
           ]
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ref: headerRef, className: "flex-1 min-w-0 overflow-x-auto overflow-y-hidden", children: slotHeaderNodes })
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ref: headerRef, className: "flex-1 min-w-0 overflow-hidden ", children: slotHeaderNodes })
     ] })
   ] });
 }
@@ -11100,9 +11194,21 @@ function useVisibleSlotRange(args) {
     updateWidth();
     const ro = new ResizeObserver(updateWidth);
     ro.observe(el);
-    const onScroll = () => setScrollLeft(el.scrollLeft);
+    let raf = 0;
+    let nextLeft = el.scrollLeft;
+    const commit = () => {
+      raf = 0;
+      setScrollLeft(nextLeft);
+    };
+    const onScroll = () => {
+      nextLeft = el.scrollLeft;
+      if (raf) return;
+      raf = requestAnimationFrame(commit);
+    };
+    setScrollLeft(nextLeft);
     el.addEventListener("scroll", onScroll, { passive: true });
     return () => {
+      if (raf) cancelAnimationFrame(raf);
       ro.disconnect();
       el.removeEventListener("scroll", onScroll);
     };
@@ -11457,7 +11563,7 @@ function CalendarTimeline({
     }
   }, [activeEventSheetOpen, activeSelectedEventId, effectiveEnableEventSheet, selectedEvent, setEventSheetOpen]);
   useHorizontalScrollSync({ bodyRef, headerRef, leftRef: showResourceColumn ? leftRef : void 0 });
-  const virt = virtualization?.enabled;
+  const virt = virtualization == null ? rows.length > 60 : Boolean(virtualization.enabled);
   const overscan = virtualization?.overscan ?? 8;
   const isControlledRowHeights = rowHeights !== void 0;
   const [internalRowHeights, setInternalRowHeights] = React35.useState(() => defaultRowHeights ?? {});
@@ -11767,9 +11873,19 @@ function CalendarTimeline({
     setCreateOpen(false);
   }, [createEndIdx, createResourceId, createStartIdx, onCreateEvent, range.end, slotStarts]);
   const dragRef = React35.useRef(null);
-  const [preview, setPreview] = React35.useState(null);
+  const [preview, setPreviewState] = React35.useState(null);
+  const previewRef = React35.useRef(null);
+  const setPreview = React35.useCallback((next) => {
+    previewRef.current = next;
+    setPreviewState(next);
+  }, []);
   const suppressNextEventClickRef = React35.useRef(false);
-  const [hoverCell, setHoverCell] = React35.useState(null);
+  const [hoverCell, setHoverCellState] = React35.useState(null);
+  const hoverCellRef = React35.useRef(null);
+  const setHoverCell = React35.useCallback((next) => {
+    hoverCellRef.current = next;
+    setHoverCellState(next);
+  }, []);
   const autoScrollStateRef = React35.useRef({
     dir: 0,
     speed: 0,
@@ -11777,6 +11893,10 @@ function CalendarTimeline({
     lastClientY: 0
   });
   const autoScrollRafRef = React35.useRef(null);
+  const dragPreviewRafRef = React35.useRef(null);
+  const dragPreviewPointRef = React35.useRef(null);
+  const hoverCellRafRef = React35.useRef(null);
+  const hoverCellPendingRef = React35.useRef(null);
   const stopAutoScroll = React35.useCallback(() => {
     if (autoScrollRafRef.current != null) cancelAnimationFrame(autoScrollRafRef.current);
     autoScrollRafRef.current = null;
@@ -11859,6 +11979,41 @@ function CalendarTimeline({
     },
     [getPointerContext, range.end, range.start, slotToDate, slots.length]
   );
+  const flushDragPreview = React35.useCallback(() => {
+    dragPreviewRafRef.current = null;
+    const point = dragPreviewPointRef.current;
+    if (!point) return;
+    updateDragPreview(point.x, point.y);
+  }, [updateDragPreview]);
+  const scheduleDragPreview = React35.useCallback(
+    (clientX, clientY) => {
+      dragPreviewPointRef.current = { x: clientX, y: clientY };
+      if (dragPreviewRafRef.current != null) return;
+      dragPreviewRafRef.current = requestAnimationFrame(flushDragPreview);
+    },
+    [flushDragPreview]
+  );
+  const applyHoverCell = React35.useCallback(
+    (next) => {
+      const prev = hoverCellRef.current;
+      const same = prev == null && next == null || prev != null && next != null && prev.resourceId === next.resourceId && prev.slotIdx === next.slotIdx && Math.abs(prev.y - next.y) <= 0.5;
+      if (same) return;
+      setHoverCell(next);
+    },
+    [setHoverCell]
+  );
+  const flushHoverCell = React35.useCallback(() => {
+    hoverCellRafRef.current = null;
+    applyHoverCell(hoverCellPendingRef.current);
+  }, [applyHoverCell]);
+  const scheduleHoverCell = React35.useCallback(
+    (next) => {
+      hoverCellPendingRef.current = next;
+      if (hoverCellRafRef.current != null) return;
+      hoverCellRafRef.current = requestAnimationFrame(flushHoverCell);
+    },
+    [flushHoverCell]
+  );
   const autoScrollTick = React35.useCallback(() => {
     const drag = dragRef.current;
     const body = bodyRef.current;
@@ -11910,6 +12065,12 @@ function CalendarTimeline({
     [autoScrollTick, stopAutoScroll]
   );
   React35.useEffect(() => stopAutoScroll, [stopAutoScroll]);
+  React35.useEffect(() => {
+    return () => {
+      if (dragPreviewRafRef.current != null) cancelAnimationFrame(dragPreviewRafRef.current);
+      if (hoverCellRafRef.current != null) cancelAnimationFrame(hoverCellRafRef.current);
+    };
+  }, []);
   const onPointerDownEvent = (e, ev, mode) => {
     if (e.button !== 0 || e.ctrlKey) return;
     if (isViewOnly) return;
@@ -11991,57 +12152,74 @@ function CalendarTimeline({
       if (!(interactions?.creatable ?? false)) return;
       const target = e.target;
       if (target?.closest?.("[data-uv-ct-event]")) {
-        if (hoverCell) setHoverCell(null);
+        scheduleHoverCell(null);
         return;
       }
       const ctx = getPointerContext(e.clientX, e.clientY);
       if (!ctx) {
-        if (hoverCell) setHoverCell(null);
+        scheduleHoverCell(null);
         return;
       }
       const rowEl = target?.closest?.("[data-uv-ct-row]");
       if (!rowEl) {
-        if (hoverCell) setHoverCell(null);
+        scheduleHoverCell(null);
         return;
       }
       const rect = rowEl.getBoundingClientRect();
       const y = clamp5(e.clientY - rect.top, 0, rect.height);
-      if (!hoverCell || hoverCell.resourceId !== ctx.resourceId || hoverCell.slotIdx !== ctx.slotIdx || Math.abs(hoverCell.y - y) > 0.5) {
-        setHoverCell({ resourceId: ctx.resourceId, slotIdx: ctx.slotIdx, y });
-      }
+      scheduleHoverCell({ resourceId: ctx.resourceId, slotIdx: ctx.slotIdx, y });
       return;
     }
     if (drag.pointerId !== e.pointerId) return;
     updateAutoScrollFromPointer(e.clientX, e.clientY);
-    updateDragPreview(e.clientX, e.clientY);
+    scheduleDragPreview(e.clientX, e.clientY);
   };
   const onPointerUp = (e) => {
     const drag = dragRef.current;
     if (!drag || drag.pointerId !== e.pointerId) return;
+    if (dragPreviewRafRef.current != null) {
+      cancelAnimationFrame(dragPreviewRafRef.current);
+      dragPreviewRafRef.current = null;
+    }
+    updateDragPreview(e.clientX, e.clientY);
+    const committedPreview = previewRef.current;
     dragRef.current = null;
     stopAutoScroll();
+    hoverCellPendingRef.current = null;
+    if (hoverCellRafRef.current != null) {
+      cancelAnimationFrame(hoverCellRafRef.current);
+      hoverCellRafRef.current = null;
+    }
     setHoverCell(null);
-    if (!preview) {
+    if (!committedPreview) {
       setPreview(null);
       return;
     }
     if (drag.mode === "create" && onCreateEvent) {
-      onCreateEvent({ resourceId: preview.resourceId, start: preview.start, end: preview.end });
+      onCreateEvent({ resourceId: committedPreview.resourceId, start: committedPreview.start, end: committedPreview.end });
       setPreview(null);
       return;
     }
-    if (drag.mode === "move" && preview.eventId && onEventMove) {
-      onEventMove({ eventId: preview.eventId, resourceId: preview.resourceId, start: preview.start, end: preview.end });
+    if (drag.mode === "move" && committedPreview.eventId && onEventMove) {
+      onEventMove({ eventId: committedPreview.eventId, resourceId: committedPreview.resourceId, start: committedPreview.start, end: committedPreview.end });
       setPreview(null);
       return;
     }
-    if ((drag.mode === "resize-start" || drag.mode === "resize-end") && preview.eventId && onEventResize) {
-      onEventResize({ eventId: preview.eventId, start: preview.start, end: preview.end });
+    if ((drag.mode === "resize-start" || drag.mode === "resize-end") && committedPreview.eventId && onEventResize) {
+      onEventResize({ eventId: committedPreview.eventId, start: committedPreview.start, end: committedPreview.end });
       setPreview(null);
       return;
     }
     setPreview(null);
   };
+  const onBodyPointerLeave = React35.useCallback(() => {
+    hoverCellPendingRef.current = null;
+    if (hoverCellRafRef.current != null) {
+      cancelAnimationFrame(hoverCellRafRef.current);
+      hoverCellRafRef.current = null;
+    }
+    setHoverCell(null);
+  }, [setHoverCell]);
   const renderGroupRow = (g) => {
     const isCollapsed = !!collapsed[g.id];
     const toggle = () => setCollapsed({ ...collapsed, [g.id]: !isCollapsed });
@@ -12206,7 +12384,7 @@ function CalendarTimeline({
               className: "relative flex-1 overflow-auto",
               onPointerMove,
               onPointerUp,
-              onPointerLeave: () => setHoverCell(null),
+              onPointerLeave: onBodyPointerLeave,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { height: topSpacer } }),
                 gridWidth > 0 && renderedRowsHeight > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "pointer-events-none absolute left-0 z-0", style: { top: topSpacer, width: gridWidth, height: renderedRowsHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(