@underverse-ui/underverse 0.2.86 → 0.2.88

package/dist/index.cjs

@@ -7802,6 +7802,18 @@ function getZonedParts(date, timeZone) {
     second: get("second")
   };
 }
+function getIsoWeekInfo(date, timeZone) {
+  const p = getZonedParts(date, timeZone);
+  const target = new Date(Date.UTC(p.year, p.month - 1, p.day));
+  const dayNr = (target.getUTCDay() + 6) % 7;
+  target.setUTCDate(target.getUTCDate() - dayNr + 3);
+  const isoYear = target.getUTCFullYear();
+  const firstThursday = new Date(Date.UTC(isoYear, 0, 4));
+  const firstDayNr = (firstThursday.getUTCDay() + 6) % 7;
+  firstThursday.setUTCDate(firstThursday.getUTCDate() - firstDayNr + 3);
+  const week = 1 + Math.round((target.getTime() - firstThursday.getTime()) / (7 * 24 * 60 * 60 * 1e3));
+  return { year: isoYear, week };
+}
 function partsToUtcMs(p) {
   return Date.UTC(p.year, p.month - 1, p.day, p.hour, p.minute, p.second);
 }
@@ -7891,41 +7903,48 @@ function intervalPack(items) {
 // ../../components/ui/CalendarTimeline/hooks.ts
 var React27 = __toESM(require("react"), 1);
 function useHorizontalScrollSync(args) {
-  const { bodyRef, headerRef } = args;
+  const { bodyRef, headerRef, leftRef } = args;
   React27.useEffect(() => {
     const body = bodyRef.current;
     const header = headerRef.current;
+    const left = leftRef?.current ?? null;
     if (!body || !header) return;
     let raf = 0;
     let syncing = false;
-    const syncHeader = () => {
+    const syncFrom = (source) => {
       if (syncing) return;
       syncing = true;
-      header.scrollLeft = body.scrollLeft;
-      syncing = false;
-    };
-    const syncBody = () => {
-      if (syncing) return;
-      syncing = true;
-      body.scrollLeft = header.scrollLeft;
-      syncing = false;
-    };
-    const onBodyScroll = () => {
-      cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(syncHeader);
-    };
-    const onHeaderScroll = () => {
+      if (source === "header") {
+        const x = header.scrollLeft;
+        if (body.scrollLeft !== x) body.scrollLeft = x;
+      } else if (source === "left" && left) {
+        const y = left.scrollTop;
+        if (body.scrollTop !== y) body.scrollTop = y;
+      } else {
+        const x = body.scrollLeft;
+        const y = body.scrollTop;
+        if (header.scrollLeft !== x) header.scrollLeft = x;
+        if (left && left.scrollTop !== y) left.scrollTop = y;
+      }
       cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(syncBody);
+      raf = requestAnimationFrame(() => {
+        syncing = false;
+      });
     };
+    const onBodyScroll = () => syncFrom("body");
+    const onHeaderScroll = () => syncFrom("header");
+    const onLeftScroll = () => syncFrom("left");
+    syncFrom("body");
     body.addEventListener("scroll", onBodyScroll, { passive: true });
     header.addEventListener("scroll", onHeaderScroll, { passive: true });
+    left?.addEventListener("scroll", onLeftScroll, { passive: true });
     return () => {
       cancelAnimationFrame(raf);
       body.removeEventListener("scroll", onBodyScroll);
       header.removeEventListener("scroll", onHeaderScroll);
+      left?.removeEventListener("scroll", onLeftScroll);
     };
-  }, [bodyRef, headerRef]);
+  }, [bodyRef, headerRef, leftRef]);
 }
 function useVirtualRows(args) {
   const { enabled, overscan, rowHeight, itemCount, scrollRef } = args;
@@ -8239,12 +8258,34 @@ function CalendarTimeline({
     }
     return map;
   }, [normalizedEvents]);
+  const resourceById = React28.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const r of resources) map.set(r.id, r);
+    return map;
+  }, [resources]);
+  const leftRef = React28.useRef(null);
   const bodyRef = React28.useRef(null);
   const headerRef = React28.useRef(null);
-  useHorizontalScrollSync({ bodyRef, headerRef });
+  useHorizontalScrollSync({ bodyRef, headerRef, leftRef });
   const title = React28.useMemo(() => {
-    return formatters?.monthTitle?.(activeDate, { locale: resolvedLocale, timeZone: resolvedTimeZone }) ?? defaultMonthTitle(activeDate, resolvedLocale, resolvedTimeZone);
-  }, [activeDate, formatters, resolvedLocale, resolvedTimeZone]);
+    if (activeView === "month") {
+      return formatters?.monthTitle?.(activeDate, { locale: resolvedLocale, timeZone: resolvedTimeZone }) ?? defaultMonthTitle(activeDate, resolvedLocale, resolvedTimeZone);
+    }
+    if (activeView === "week") {
+      const { week } = getIsoWeekInfo(range.start, resolvedTimeZone);
+      const fmt2 = getDtf(resolvedLocale, resolvedTimeZone, { month: "short", day: "numeric" });
+      const fmtYear = getDtf(resolvedLocale, resolvedTimeZone, { year: "numeric" });
+      const endInclusive = new Date(range.end.getTime() - 1);
+      const a = fmt2.format(range.start);
+      const b = fmt2.format(endInclusive);
+      const ya = fmtYear.format(range.start);
+      const yb = fmtYear.format(endInclusive);
+      const rangeText = ya === yb ? `${a} \u2013 ${b}, ${ya}` : `${a}, ${ya} \u2013 ${b}, ${yb}`;
+      return `${l.week} ${week} \u2022 ${rangeText}`;
+    }
+    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;
@@ -8270,10 +8311,9 @@ function CalendarTimeline({
       const body = bodyRef.current;
       if (!body) return null;
       const el = document.elementFromPoint(clientX, clientY);
-      const timelineEl = el?.closest?.("[data-uv-ct-timeline]");
-      if (!timelineEl) return null;
-      const timelineRect = timelineEl.getBoundingClientRect();
-      const x = clientX - timelineRect.left + body.scrollLeft;
+      if (!el || !body.contains(el)) return null;
+      const bodyRect = body.getBoundingClientRect();
+      const x = clientX - bodyRect.left + body.scrollLeft;
       const slotIdx = clamp3(Math.floor(x / slotWidth), 0, Math.max(0, slots.length - 1));
       const rowEl = el?.closest?.("[data-uv-ct-row]");
       const rid = rowEl?.dataset?.uvCtRow ?? null;
@@ -8587,49 +8627,51 @@ function CalendarTimeline({
       ...rest,
       children: [
         Header,
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-          "div",
-          {
-            ref: bodyRef,
-            className: "relative overflow-auto scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent",
-            onPointerMove,
-            onPointerUp,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: topSpacer } }),
-              rows.slice(startRow, endRow).map((row, idx) => {
-                const rowIndex = startRow + idx;
-                if (row.kind === "group") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex", style: { height: effectiveRowHeight }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                      "div",
-                      {
-                        className: "shrink-0 sticky left-0 z-20",
-                        style: { width: effectiveResourceColumnWidth, minWidth: effectiveResourceColumnWidth },
-                        children: renderGroupRow(row.group)
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 border-b border-border/30 bg-linear-to-r from-muted/15 to-muted/5", style: { minWidth: gridWidth } })
-                  ] }, `g_${row.group.id}_${rowIndex}`);
-                }
-                const r = row.resource;
-                const layout = layoutsByResource.get(r.id) ?? { visible: [], hidden: [] };
-                const canMore = layout.hidden.length > 0 && !!onMoreClick;
-                return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-                  "div",
-                  {
-                    className: "flex group/row hover:bg-muted/5 transition-colors duration-150",
-                    style: { height: effectiveRowHeight },
-                    "data-uv-ct-row": r.id,
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                        "div",
-                        {
-                          className: "shrink-0 sticky left-0 z-20 border-r border-border/30",
-                          style: { width: effectiveResourceColumnWidth, minWidth: effectiveResourceColumnWidth },
-                          children: ResourceCell(r)
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative shrink-0", style: { width: gridWidth, minWidth: gridWidth }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex min-h-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+            "div",
+            {
+              ref: leftRef,
+              className: "shrink-0 overflow-y-auto overflow-x-hidden scrollbar-none",
+              style: { width: effectiveResourceColumnWidth, minWidth: effectiveResourceColumnWidth },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: topSpacer } }),
+                rows.slice(startRow, endRow).map((row, idx) => {
+                  const rowIndex = startRow + idx;
+                  if (row.kind === "group") {
+                    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: effectiveRowHeight }, children: renderGroupRow(row.group) }, `lg_${row.group.id}_${rowIndex}`);
+                  }
+                  const r = row.resource;
+                  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: effectiveRowHeight }, children: ResourceCell(r) }, `lr_${r.id}_${rowIndex}`);
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: bottomSpacer } })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+            "div",
+            {
+              ref: bodyRef,
+              className: "relative flex-1 overflow-auto scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent",
+              onPointerMove,
+              onPointerUp,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: topSpacer } }),
+                rows.slice(startRow, endRow).map((row, idx) => {
+                  const rowIndex = startRow + idx;
+                  if (row.kind === "group") {
+                    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex", style: { height: effectiveRowHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-b border-border/30 bg-linear-to-r from-muted/15 to-muted/5", style: { width: gridWidth, minWidth: gridWidth } }) }, `rg_${row.group.id}_${rowIndex}`);
+                  }
+                  const r = row.resource;
+                  const layout = layoutsByResource.get(r.id) ?? { visible: [], hidden: [] };
+                  const canMore = layout.hidden.length > 0 && !!onMoreClick;
+                  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    "div",
+                    {
+                      className: "group/row hover:bg-muted/5 transition-colors duration-150",
+                      style: { height: effectiveRowHeight },
+                      "data-uv-ct-row": r.id,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative shrink-0", style: { width: gridWidth, minWidth: gridWidth, height: "100%" }, children: [
                         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute inset-0", onPointerDown: onPointerDownCell, "data-uv-ct-timeline": true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute inset-0 flex", children: slots.map((s, i2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                           "div",
                           {
@@ -8659,7 +8701,14 @@ function CalendarTimeline({
                             ev.title ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "font-semibold text-[11px] truncate leading-tight", children: ev.title }) : null,
                             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-[10px] opacity-70 truncate ml-auto", children: timeText })
                           ] });
-                          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                          const resource = resourceById.get(ev.resourceId);
+                          const tooltipTitle = ev.title || ev.id;
+                          const tooltipContent = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "font-semibold", children: tooltipTitle }),
+                            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "text-xs opacity-80", children: timeText }),
+                            resource?.label ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "text-xs opacity-70", children: resource.label }) : null
+                          ] });
+                          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Tooltip, { content: tooltipContent, placement: "top", delay: { open: 250, close: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                             "div",
                             {
                               className: cn(
@@ -8704,9 +8753,8 @@ function CalendarTimeline({
                                 ] }) : null,
                                 node
                               ]
-                            },
-                            ev.id
-                          );
+                            }
+                          ) }, ev.id);
                         }),
                         preview && preview.resourceId === r.id && !preview.eventId ? (() => {
                           const startIdx = binarySearchLastLE(slotStarts, preview.start);
@@ -8741,15 +8789,15 @@ function CalendarTimeline({
                           }
                         ) : null
                       ] })
-                    ]
-                  },
-                  `r_${r.id}_${rowIndex}`
-                );
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: bottomSpacer } })
-            ]
-          }
-        )
+                    },
+                    `rr_${r.id}_${rowIndex}`
+                  );
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: bottomSpacer } })
+              ]
+            }
+          )
+        ] })
       ]
     }
   );