@underverse-ui/underverse 0.2.98 → 0.2.100

package/dist/index.cjs

@@ -8121,6 +8121,22 @@ function startOfZonedDay(date, timeZone) {
   const p = getZonedParts(date, timeZone);
   return new Date(zonedTimeToUtcMs({ ...p, hour: 0, minute: 0, second: 0 }, timeZone));
 }
+function zonedDateAtTime(date, timeZone, time) {
+  const p = getZonedParts(date, timeZone);
+  return new Date(
+    zonedTimeToUtcMs(
+      {
+        year: p.year,
+        month: p.month,
+        day: p.day,
+        hour: time.hour,
+        minute: time.minute ?? 0,
+        second: time.second ?? 0
+      },
+      timeZone
+    )
+  );
+}
 function startOfZonedMonth(date, timeZone) {
   const p = getZonedParts(date, timeZone);
   return new Date(zonedTimeToUtcMs({ year: p.year, month: p.month, day: 1, hour: 0, minute: 0, second: 0 }, timeZone));
@@ -8429,17 +8445,24 @@ function getGroupResourceCounts(resources) {
   return counts;
 }
 function computeSlotStarts(args) {
-  const { view, date, timeZone, weekStartsOn, dayTimeStepMinutes } = args;
-  const start = view === "month" ? startOfZonedMonth(date, timeZone) : view === "week" ? startOfZonedWeek(date, weekStartsOn, timeZone) : startOfZonedDay(date, timeZone);
+  const { view, date, timeZone, weekStartsOn, dayTimeStepMinutes, dayRangeMode, workHours } = args;
+  const baseDayStart = startOfZonedDay(date, timeZone);
+  const start = view === "month" ? startOfZonedMonth(date, timeZone) : view === "week" ? startOfZonedWeek(date, weekStartsOn, timeZone) : baseDayStart;
   if (view === "day") {
     const step = Math.max(5, Math.min(240, Math.trunc(dayTimeStepMinutes)));
     const stepMs = step * 6e4;
-    const end2 = addZonedDays(start, 1, timeZone);
+    const hours = workHours ?? { startHour: 8, endHour: 17 };
+    const boundedStartHour = clamp3(Math.trunc(hours.startHour), 0, 23);
+    const boundedEndHour = clamp3(Math.trunc(hours.endHour), 1, 24);
+    const isWork = dayRangeMode === "work";
+    const start2 = isWork ? zonedDateAtTime(baseDayStart, timeZone, { hour: boundedStartHour }) : start;
+    const end2 = isWork ? boundedEndHour === 24 ? addZonedDays(baseDayStart, 1, timeZone) : zonedDateAtTime(baseDayStart, timeZone, { hour: clamp3(boundedEndHour, 0, 23) }) : addZonedDays(start, 1, timeZone);
+    const end3 = end2.getTime() > start2.getTime() ? end2 : addZonedDays(start2, 1, timeZone);
     const slotStarts2 = [];
-    for (let cur2 = start.getTime(), guard2 = 0; cur2 < end2.getTime() && guard2++ < 2e3; cur2 += stepMs) {
+    for (let cur2 = start2.getTime(), guard2 = 0; cur2 < end3.getTime() && guard2++ < 2e3; cur2 += stepMs) {
       slotStarts2.push(new Date(cur2));
     }
-    return { start, end: end2, slotStarts: slotStarts2 };
+    return { start: start2, end: end3, slotStarts: slotStarts2 };
   }
   const end = view === "month" ? startOfZonedMonth(addZonedMonths(start, 1, timeZone), timeZone) : addZonedDays(start, 7, timeZone);
   const slotStarts = [];
@@ -8736,9 +8759,12 @@ function CalendarTimeline({
   rowHeights,
   defaultRowHeights,
   onRowHeightsChange,
+  autoRowHeight,
   enableLayoutResize,
   slotMinWidth,
   dayTimeStepMinutes = 60,
+  dayRangeMode,
+  workHours,
   maxLanesPerRow = 3,
   now,
   renderResource,
@@ -8786,6 +8812,10 @@ function CalendarTimeline({
     [isControlledEventSheetOpen, onEventSheetOpenChange, setSelectedEventId]
   );
   const sizeConfig = React28.useMemo(() => getSizeConfig(size), [size]);
+  const densityClass = sizeConfig.densityClass;
+  const eventHeight = sizeConfig.eventHeight;
+  const laneGap = sizeConfig.laneGap;
+  const lanePaddingY = sizeConfig.lanePaddingY;
   const canResizeColumn = React28.useMemo(() => {
     const cfg = enableLayoutResize;
     if (!cfg) return false;
@@ -8900,7 +8930,9 @@ function CalendarTimeline({
       date: activeDate,
       timeZone: resolvedTimeZone,
       weekStartsOn,
-      dayTimeStepMinutes
+      dayTimeStepMinutes,
+      dayRangeMode,
+      workHours
     });
     const todayStart = startOfZonedDay(resolvedNow, resolvedTimeZone).getTime();
     const slotItems = slotStarts2.map((s) => ({
@@ -8909,7 +8941,7 @@ function CalendarTimeline({
       isToday: startOfZonedDay(s, resolvedTimeZone).getTime() === todayStart
     }));
     return { slots: slotItems, range: { start, end } };
-  }, [activeView, activeDate, resolvedTimeZone, resolvedLocale, weekStartsOn, dayTimeStepMinutes, resolvedNow, formatters]);
+  }, [activeView, activeDate, resolvedTimeZone, resolvedLocale, weekStartsOn, dayTimeStepMinutes, dayRangeMode, workHours, resolvedNow, formatters]);
   React28.useEffect(() => {
     onRangeChange?.(range);
   }, [range.start, range.end, onRangeChange]);
@@ -8919,7 +8951,7 @@ function CalendarTimeline({
   const bodyClientWidth = useClientWidth(bodyRef);
   const slotStarts = React28.useMemo(() => slots.map((s) => s.start), [slots]);
   const slotWidth = React28.useMemo(() => {
-    const baseSlotWidth = activeView === "month" ? effectiveSlotMinWidth * 3 : effectiveSlotMinWidth;
+    const baseSlotWidth = activeView === "month" ? effectiveSlotMinWidth * 3 : activeView === "day" ? effectiveSlotMinWidth * 3 : effectiveSlotMinWidth;
     if (activeView !== "week") return baseSlotWidth;
     if (bodyClientWidth <= 0) return baseSlotWidth;
     if (slots.length <= 0) return baseSlotWidth;
@@ -8971,13 +9003,43 @@ function CalendarTimeline({
     setInternalRowHeights(defaultRowHeights);
   }, [defaultRowHeights, isControlledRowHeights]);
   const activeRowHeights = isControlledRowHeights ? rowHeights : internalRowHeights;
+  const autoRowHeightCfg = React28.useMemo(() => {
+    if (!autoRowHeight) return null;
+    return autoRowHeight === true ? {} : autoRowHeight;
+  }, [autoRowHeight]);
+  const effectiveMaxLanesPerRow = React28.useMemo(() => {
+    if (!autoRowHeightCfg) return maxLanesPerRow;
+    const maxLanes = autoRowHeightCfg.maxLanesPerRow;
+    if (typeof maxLanes === "number" && Number.isFinite(maxLanes) && maxLanes > 0) return Math.floor(maxLanes);
+    return Number.POSITIVE_INFINITY;
+  }, [autoRowHeightCfg, maxLanesPerRow]);
+  const autoRowHeightsByResource = React28.useMemo(() => {
+    if (!autoRowHeightCfg) return null;
+    const maxRowHeight2 = autoRowHeightCfg.maxRowHeight;
+    const out = /* @__PURE__ */ new Map();
+    for (const [resourceId, list] of eventsByResource.entries()) {
+      const mapped = list.map((ev) => {
+        const startIdx = binarySearchLastLE(slotStarts, ev._start);
+        const endIdx = clamp3(binarySearchFirstGE(slotStarts, ev._end), startIdx + 1, slots.length);
+        return { startIdx, endIdx };
+      });
+      const { laneCount } = intervalPack(mapped);
+      const lanesToFit = Number.isFinite(effectiveMaxLanesPerRow) ? Math.max(1, Math.min(laneCount, effectiveMaxLanesPerRow)) : Math.max(1, laneCount);
+      const needed = lanePaddingY * 2 + lanesToFit * eventHeight + laneGap * Math.max(0, lanesToFit - 1);
+      const next = typeof maxRowHeight2 === "number" && Number.isFinite(maxRowHeight2) && maxRowHeight2 > 0 ? Math.min(needed, maxRowHeight2) : needed;
+      out.set(resourceId, next);
+    }
+    return out;
+  }, [autoRowHeightCfg, eventHeight, eventsByResource, laneGap, lanePaddingY, slotStarts, slots.length, effectiveMaxLanesPerRow]);
   const getResourceRowHeight = React28.useCallback(
     (resourceId) => {
       const h = activeRowHeights[resourceId];
-      if (typeof h === "number" && Number.isFinite(h) && h > 0) return h;
-      return effectiveRowHeight;
+      const base = typeof h === "number" && Number.isFinite(h) && h > 0 ? h : effectiveRowHeight;
+      const auto = autoRowHeightsByResource?.get(resourceId);
+      if (typeof auto === "number" && Number.isFinite(auto) && auto > 0) return Math.max(base, auto);
+      return base;
     },
-    [activeRowHeights, effectiveRowHeight]
+    [activeRowHeights, autoRowHeightsByResource, effectiveRowHeight]
   );
   const setRowHeightForResource = React28.useCallback(
     (resourceId, height) => {
@@ -9110,10 +9172,6 @@ function CalendarTimeline({
     const fmt = getDtf(resolvedLocale, resolvedTimeZone, { weekday: "long", year: "numeric", month: "long", day: "numeric" });
     return fmt.format(range.start);
   }, [activeDate, activeView, formatters, l.week, range.end, range.start, resolvedLocale, resolvedTimeZone]);
-  const densityClass = sizeConfig.densityClass;
-  const eventHeight = sizeConfig.eventHeight;
-  const laneGap = sizeConfig.laneGap;
-  const lanePaddingY = sizeConfig.lanePaddingY;
   const createMode = interactions?.createMode ?? "drag";
   const canCreate = !isViewOnly && (interactions?.creatable ?? false) && !!onCreateEvent;
   const [createOpen, setCreateOpen] = React28.useState(false);
@@ -9180,18 +9238,33 @@ function CalendarTimeline({
   const dragRef = React28.useRef(null);
   const [preview, setPreview] = React28.useState(null);
   const suppressNextEventClickRef = React28.useRef(false);
+  const autoScrollStateRef = React28.useRef({
+    dir: 0,
+    speed: 0,
+    lastClientX: 0,
+    lastClientY: 0
+  });
+  const autoScrollRafRef = React28.useRef(null);
+  const stopAutoScroll = React28.useCallback(() => {
+    if (autoScrollRafRef.current != null) cancelAnimationFrame(autoScrollRafRef.current);
+    autoScrollRafRef.current = null;
+    autoScrollStateRef.current.dir = 0;
+    autoScrollStateRef.current.speed = 0;
+  }, []);
   const getPointerContext = React28.useCallback(
     (clientX, clientY, opts) => {
       const body = bodyRef.current;
       if (!body) return null;
-      const el = document.elementFromPoint(clientX, clientY);
-      if (!el || !body.contains(el)) return null;
       const bodyRect = body.getBoundingClientRect();
-      const x = clientX - bodyRect.left + body.scrollLeft;
+      const probeX = clamp3(clientX, bodyRect.left + 1, bodyRect.right - 1);
+      const probeY = clamp3(clientY, bodyRect.top + 1, bodyRect.bottom - 1);
+      const el = document.elementFromPoint(probeX, probeY);
+      const x = probeX - bodyRect.left + body.scrollLeft;
       const epsilon = opts?.biasLeft ? 0.01 : 0;
       const slotIdx = clamp3(Math.floor((x - epsilon) / slotWidth), 0, Math.max(0, slots.length - 1));
-      const rowEl = el?.closest?.("[data-uv-ct-row]");
-      const rid = rowEl?.dataset?.uvCtRow ?? null;
+      const rowEl = el && body.contains(el) ? el.closest?.("[data-uv-ct-row]") ?? null : null;
+      const rid = rowEl?.dataset?.uvCtRow ?? opts?.fallbackResourceId ?? null;
+      if (!rid) return null;
       return { slotIdx, resourceId: rid, x };
     },
     [slotWidth, slots.length]
@@ -9207,6 +9280,97 @@ function CalendarTimeline({
     },
     [activeView, dayTimeStepMinutes, resolvedTimeZone, slotStarts]
   );
+  const updateDragPreview = React28.useCallback(
+    (clientX, clientY) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      const ctx = getPointerContext(clientX, clientY, drag.mode === "create" ? { biasLeft: true, fallbackResourceId: drag.resourceId } : { fallbackResourceId: drag.resourceId });
+      if (!ctx) return;
+      const { slotIdx } = ctx;
+      const movedEnough = Math.abs(clientX - drag.startClientX) > 3 || Math.abs(clientY - drag.startClientY) > 3 || slotIdx !== drag.startSlotIdx || ctx.resourceId !== drag.startRowResourceId;
+      if (movedEnough) suppressNextEventClickRef.current = true;
+      if (drag.mode === "create") {
+        const a = Math.min(drag.startSlotIdx, slotIdx);
+        const b = Math.max(drag.startSlotIdx, slotIdx) + 1;
+        const s = slotToDate(a).start;
+        const e2 = b >= slots.length ? range.end : slotToDate(b).start;
+        setPreview({ resourceId: drag.resourceId, start: s, end: e2 });
+        return;
+      }
+      const targetSlotStart = slotToDate(slotIdx).start;
+      const originSlotStart = slotToDate(drag.startSlotIdx).start;
+      const deltaMs = targetSlotStart.getTime() - originSlotStart.getTime();
+      if (drag.mode === "move") {
+        const nextStart = new Date(drag.originStart.getTime() + deltaMs);
+        const nextEnd = new Date(drag.originEnd.getTime() + deltaMs);
+        setPreview({ eventId: drag.eventId, resourceId: ctx.resourceId, start: nextStart, end: nextEnd });
+        drag.resourceId = ctx.resourceId;
+        return;
+      }
+      if (drag.mode === "resize-start") {
+        const nextStart = new Date(clamp3(targetSlotStart.getTime(), range.start.getTime(), drag.originEnd.getTime() - 6e4));
+        setPreview({ eventId: drag.eventId, resourceId: drag.resourceId, start: nextStart, end: drag.originEnd });
+        return;
+      }
+      if (drag.mode === "resize-end") {
+        const nextEnd = new Date(clamp3(targetSlotStart.getTime(), drag.originStart.getTime() + 6e4, range.end.getTime()));
+        setPreview({ eventId: drag.eventId, resourceId: drag.resourceId, start: drag.originStart, end: nextEnd });
+        return;
+      }
+    },
+    [getPointerContext, range.end, range.start, slotToDate, slots.length]
+  );
+  const autoScrollTick = React28.useCallback(() => {
+    const drag = dragRef.current;
+    const body = bodyRef.current;
+    const st = autoScrollStateRef.current;
+    if (!drag || !body || st.dir === 0) {
+      stopAutoScroll();
+      return;
+    }
+    const maxScrollLeft = Math.max(0, body.scrollWidth - body.clientWidth);
+    const prevLeft = body.scrollLeft;
+    const nextLeft = clamp3(prevLeft + st.dir * st.speed, 0, maxScrollLeft);
+    if (nextLeft === prevLeft) {
+      stopAutoScroll();
+      return;
+    }
+    body.scrollLeft = nextLeft;
+    updateDragPreview(st.lastClientX, st.lastClientY);
+    autoScrollRafRef.current = requestAnimationFrame(autoScrollTick);
+  }, [stopAutoScroll, updateDragPreview]);
+  const updateAutoScrollFromPointer = React28.useCallback(
+    (clientX, clientY) => {
+      const body = bodyRef.current;
+      if (!body) return;
+      const rect = body.getBoundingClientRect();
+      const edge = 56;
+      let dir = 0;
+      let speed = 0;
+      if (clientX < rect.left + edge) {
+        dir = -1;
+        const dist = clientX - rect.left;
+        const t2 = clamp3(1 - dist / edge, 0, 1);
+        speed = 8 + t2 * 28;
+      } else if (clientX > rect.right - edge) {
+        dir = 1;
+        const dist = rect.right - clientX;
+        const t2 = clamp3(1 - dist / edge, 0, 1);
+        speed = 8 + t2 * 28;
+      }
+      autoScrollStateRef.current.lastClientX = clientX;
+      autoScrollStateRef.current.lastClientY = clientY;
+      autoScrollStateRef.current.dir = dir;
+      autoScrollStateRef.current.speed = speed;
+      if (dir === 0) {
+        stopAutoScroll();
+        return;
+      }
+      if (autoScrollRafRef.current == null) autoScrollRafRef.current = requestAnimationFrame(autoScrollTick);
+    },
+    [autoScrollTick, stopAutoScroll]
+  );
+  React28.useEffect(() => stopAutoScroll, [stopAutoScroll]);
   const onPointerDownEvent = (e, ev, mode) => {
     if (e.button !== 0 || e.ctrlKey) return;
     if (isViewOnly) return;
@@ -9218,6 +9382,8 @@ function CalendarTimeline({
     suppressNextEventClickRef.current = false;
     const startIdx = binarySearchLastLE(slotStarts, ev._start);
     const endIdx = binarySearchFirstGE(slotStarts, ev._end);
+    const pointerCtx = getPointerContext(e.clientX, e.clientY, { fallbackResourceId: ev.resourceId });
+    const grabSlotIdx = pointerCtx?.slotIdx ?? startIdx;
     dragRef.current = {
       mode,
       eventId: ev.id,
@@ -9226,7 +9392,7 @@ function CalendarTimeline({
       originEnd: ev._end,
       durationMs: ev._end.getTime() - ev._start.getTime(),
       pointerId: e.pointerId,
-      startSlotIdx: startIdx,
+      startSlotIdx: grabSlotIdx,
       startRowResourceId: ev.resourceId,
       startClientX: e.clientX,
       startClientY: e.clientY
@@ -9282,44 +9448,14 @@ function CalendarTimeline({
   const onPointerMove = (e) => {
     const drag = dragRef.current;
     if (!drag || drag.pointerId !== e.pointerId) return;
-    const ctx = getPointerContext(e.clientX, e.clientY, drag.mode === "create" ? { biasLeft: true } : void 0);
-    if (!ctx || !ctx.resourceId) return;
-    const { slotIdx } = ctx;
-    const movedEnough = Math.abs(e.clientX - drag.startClientX) > 3 || Math.abs(e.clientY - drag.startClientY) > 3 || slotIdx !== drag.startSlotIdx || ctx.resourceId !== drag.startRowResourceId;
-    if (movedEnough) suppressNextEventClickRef.current = true;
-    if (drag.mode === "create") {
-      const a = Math.min(drag.startSlotIdx, slotIdx);
-      const b = Math.max(drag.startSlotIdx, slotIdx) + 1;
-      const s = slotToDate(a).start;
-      const e2 = b >= slots.length ? range.end : slotToDate(b).start;
-      setPreview({ resourceId: drag.resourceId, start: s, end: e2 });
-      return;
-    }
-    const targetSlotStart = slotToDate(slotIdx).start;
-    const originSlotStart = slotToDate(drag.startSlotIdx).start;
-    const deltaMs = targetSlotStart.getTime() - originSlotStart.getTime();
-    if (drag.mode === "move") {
-      const nextStart = new Date(drag.originStart.getTime() + deltaMs);
-      const nextEnd = new Date(drag.originEnd.getTime() + deltaMs);
-      setPreview({ eventId: drag.eventId, resourceId: ctx.resourceId, start: nextStart, end: nextEnd });
-      drag.resourceId = ctx.resourceId;
-      return;
-    }
-    if (drag.mode === "resize-start") {
-      const nextStart = new Date(clamp3(targetSlotStart.getTime(), range.start.getTime(), drag.originEnd.getTime() - 6e4));
-      setPreview({ eventId: drag.eventId, resourceId: drag.resourceId, start: nextStart, end: drag.originEnd });
-      return;
-    }
-    if (drag.mode === "resize-end") {
-      const nextEnd = new Date(clamp3(targetSlotStart.getTime(), drag.originStart.getTime() + 6e4, range.end.getTime()));
-      setPreview({ eventId: drag.eventId, resourceId: drag.resourceId, start: drag.originStart, end: nextEnd });
-      return;
-    }
+    updateAutoScrollFromPointer(e.clientX, e.clientY);
+    updateDragPreview(e.clientX, e.clientY);
   };
   const onPointerUp = (e) => {
     const drag = dragRef.current;
     if (!drag || drag.pointerId !== e.pointerId) return;
     dragRef.current = null;
+    stopAutoScroll();
     if (!preview) {
       setPreview(null);
       return;
@@ -9420,10 +9556,10 @@ function CalendarTimeline({
         return { ev: { ...ev, _start: s, _end: e }, startIdx, endIdx };
       });
       const { packed, laneCount } = intervalPack(mapped);
-      const visible = packed.filter((p) => p.lane < maxLanesPerRow);
-      const hidden = packed.filter((p) => p.lane >= maxLanesPerRow);
+      const visible = packed.filter((p) => p.lane < effectiveMaxLanesPerRow);
+      const hidden = packed.filter((p) => p.lane >= effectiveMaxLanesPerRow);
       const rowHeightPx = getResourceRowHeight(resourceId);
-      const visibleLaneCount = Math.max(1, Math.min(laneCount, maxLanesPerRow));
+      const visibleLaneCount = Math.max(1, Math.min(laneCount, effectiveMaxLanesPerRow));
       const available = Math.max(0, rowHeightPx - lanePaddingY * 2 - laneGap * Math.max(0, visibleLaneCount - 1));
       const fitPerLane = visibleLaneCount > 0 ? Math.floor(available / visibleLaneCount) : eventHeight;
       const perLaneHeight = Math.max(9, Math.min(eventHeight, fitPerLane || eventHeight));
@@ -9441,7 +9577,7 @@ function CalendarTimeline({
       });
     }
     return map;
-  }, [eventsByResource, getResourceRowHeight, laneGap, lanePaddingY, slotStarts, slots.length, slotWidth, maxLanesPerRow, preview, eventHeight]);
+  }, [eventsByResource, getResourceRowHeight, laneGap, lanePaddingY, slotStarts, slots.length, slotWidth, effectiveMaxLanesPerRow, preview, eventHeight]);
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {