@underverse-ui/underverse 0.2.96 → 0.2.98

package/dist/index.cjs

@@ -8308,9 +8308,10 @@ function useClientWidth(ref) {
 var SIZE_CONFIG_BY_SIZE = {
   sm: {
     resourceColumnWidth: 200,
-    rowHeight: 44,
+    rowHeight: 84,
+    groupRowHeight: 36,
     slotMinWidth: 52,
-    eventHeight: 20,
+    eventHeight: 46,
     laneGap: 3,
     lanePaddingY: 5,
     densityClass: "text-xs",
@@ -8324,9 +8325,10 @@ var SIZE_CONFIG_BY_SIZE = {
   },
   md: {
     resourceColumnWidth: 240,
-    rowHeight: 52,
+    rowHeight: 96,
+    groupRowHeight: 40,
     slotMinWidth: 64,
-    eventHeight: 24,
+    eventHeight: 54,
     laneGap: 4,
     lanePaddingY: 6,
     densityClass: "text-sm",
@@ -8340,9 +8342,10 @@ var SIZE_CONFIG_BY_SIZE = {
   },
   xl: {
     resourceColumnWidth: 280,
-    rowHeight: 60,
+    rowHeight: 112,
+    groupRowHeight: 44,
     slotMinWidth: 76,
-    eventHeight: 28,
+    eventHeight: 62,
     laneGap: 5,
     lanePaddingY: 8,
     densityClass: "text-base",
@@ -8546,18 +8549,18 @@ function CalendarTimelineHeader(props) {
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h2", { className: cn("ml-3 font-semibold tracking-tight truncate text-foreground", sizeConfig.titleClass), children: title })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        onNewEventClick ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Button_default,
           {
             variant: "default",
             size: "sm",
             icon: import_lucide_react18.Plus,
-            disabled: newEventDisabled || !onNewEventClick,
+            disabled: newEventDisabled,
             onClick: onNewEventClick,
             className: cn(sizeConfig.controlButtonTextClass, "rounded-lg font-medium transition-all duration-200 gap-1.5"),
             children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "hidden sm:inline", children: newEventLabel })
           }
-        ),
+        ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center bg-muted/40 rounded-xl p-1 gap-0.5", children: ["month", "week", "day"].map((v) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           Button_default,
           {
@@ -8760,6 +8763,7 @@ function CalendarTimeline({
   const resolvedLocale = React28.useMemo(() => localeToBCP47(locale ?? detectedLocale), [locale, detectedLocale]);
   const resolvedTimeZone = React28.useMemo(() => timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? "UTC", [timeZone]);
   const effectiveEnableEventSheet = enableEventSheet ?? Boolean(renderEventSheet);
+  const isViewOnly = interactions?.mode === "view";
   const isControlledSelectedEventId = selectedEventId !== void 0;
   const [internalSelectedEventId, setInternalSelectedEventId] = React28.useState(defaultSelectedEventId ?? null);
   const activeSelectedEventId = isControlledSelectedEventId ? selectedEventId : internalSelectedEventId;
@@ -8785,15 +8789,17 @@ function CalendarTimeline({
   const canResizeColumn = React28.useMemo(() => {
     const cfg = enableLayoutResize;
     if (!cfg) return false;
+    if (isViewOnly) return false;
     if (cfg === true) return true;
     return cfg.column !== false;
-  }, [enableLayoutResize]);
+  }, [enableLayoutResize, isViewOnly]);
   const canResizeRow = React28.useMemo(() => {
     const cfg = enableLayoutResize;
     if (!cfg) return false;
+    if (isViewOnly) return false;
     if (cfg === true) return true;
     return cfg.row !== false;
-  }, [enableLayoutResize]);
+  }, [enableLayoutResize, isViewOnly]);
   const isControlledResourceColumnWidth = resourceColumnWidth !== void 0;
   const [internalResourceColumnWidth, setInternalResourceColumnWidth] = React28.useState(() => {
     const init = defaultResourceColumnWidth ?? sizeConfig.resourceColumnWidth;
@@ -8913,10 +8919,11 @@ function CalendarTimeline({
   const bodyClientWidth = useClientWidth(bodyRef);
   const slotStarts = React28.useMemo(() => slots.map((s) => s.start), [slots]);
   const slotWidth = React28.useMemo(() => {
-    if (activeView !== "week") return effectiveSlotMinWidth;
-    if (bodyClientWidth <= 0) return effectiveSlotMinWidth;
-    if (slots.length <= 0) return effectiveSlotMinWidth;
-    return Math.max(effectiveSlotMinWidth, bodyClientWidth / slots.length);
+    const baseSlotWidth = activeView === "month" ? effectiveSlotMinWidth * 3 : effectiveSlotMinWidth;
+    if (activeView !== "week") return baseSlotWidth;
+    if (bodyClientWidth <= 0) return baseSlotWidth;
+    if (slots.length <= 0) return baseSlotWidth;
+    return Math.max(baseSlotWidth, bodyClientWidth / slots.length);
   }, [activeView, bodyClientWidth, effectiveSlotMinWidth, slots.length]);
   const gridWidth = slots.length * slotWidth;
   const normalizedEvents = React28.useMemo(() => {
@@ -8992,9 +8999,9 @@ function CalendarTimeline({
   const rowHeightsArray = React28.useMemo(() => {
     return rows.map((r) => {
       if (r.kind === "resource") return getResourceRowHeight(r.resource.id);
-      return effectiveRowHeight;
+      return sizeConfig.groupRowHeight;
     });
-  }, [effectiveRowHeight, getResourceRowHeight, rows]);
+  }, [getResourceRowHeight, rows, sizeConfig.groupRowHeight]);
   const virtualResult = useVirtualVariableRows({
     enabled: virt,
     overscan,
@@ -9108,7 +9115,7 @@ function CalendarTimeline({
   const laneGap = sizeConfig.laneGap;
   const lanePaddingY = sizeConfig.lanePaddingY;
   const createMode = interactions?.createMode ?? "drag";
-  const canCreate = (interactions?.creatable ?? false) && !!onCreateEvent;
+  const canCreate = !isViewOnly && (interactions?.creatable ?? false) && !!onCreateEvent;
   const [createOpen, setCreateOpen] = React28.useState(false);
   const [createResourceId, setCreateResourceId] = React28.useState(null);
   const [createStartIdx, setCreateStartIdx] = React28.useState(0);
@@ -9202,6 +9209,7 @@ function CalendarTimeline({
   );
   const onPointerDownEvent = (e, ev, mode) => {
     if (e.button !== 0 || e.ctrlKey) return;
+    if (isViewOnly) return;
     if (ev.resourceId == null) return;
     const allowDrag = interactions?.draggableEvents ?? true;
     const allowResize = interactions?.resizableEvents ?? true;
@@ -9229,6 +9237,7 @@ function CalendarTimeline({
   };
   const onPointerDownCell = (e) => {
     if (e.button !== 0 || e.ctrlKey) return;
+    if (isViewOnly) return;
     if (!(interactions?.creatable ?? false) || !onCreateEvent) return;
     if (createMode === "click") return;
     const ctx = getPointerContext(e.clientX, e.clientY, { biasLeft: true });
@@ -9253,6 +9262,7 @@ function CalendarTimeline({
   };
   const onClickCell = (e) => {
     if (e.button !== 0 || e.ctrlKey) return;
+    if (isViewOnly) return;
     if (!(interactions?.creatable ?? false)) return;
     if (createMode !== "click") return;
     if (!onCreateEventClick) return;
@@ -9384,8 +9394,8 @@ function CalendarTimeline({
       resourcesHeaderLabel: t("resourcesHeader"),
       labels: { today: l.today, prev: l.prev, next: l.next, month: l.month, week: l.week, day: l.day },
       newEventLabel: l.newEvent,
-      newEventDisabled: !canCreate || resources.length === 0,
-      onNewEventClick: openCreate,
+      newEventDisabled: isViewOnly || !canCreate || resources.length === 0,
+      onNewEventClick: isViewOnly ? void 0 : openCreate,
       activeView,
       sizeConfig,
       navigate,
@@ -9526,10 +9536,26 @@ function CalendarTimeline({
                             timeZone: resolvedTimeZone,
                             view: activeView
                           }) ?? defaultEventTime({ start: ev._start, end: ev._end, locale: resolvedLocale, timeZone: resolvedTimeZone, view: activeView });
-                          const node = renderEvent?.(ev, { left, width, lane }) ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "h-full px-2.5 truncate flex items-center gap-1.5", children: [
-                            ev.title ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "font-semibold text-xs truncate leading-none", children: ev.title }) : null,
-                            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-[11px] opacity-70 truncate ml-auto leading-none", children: timeText })
-                          ] });
+                          const node = renderEvent?.(ev, { left, width, lane, height: layout.eventHeight, timeText }) ?? (() => {
+                            const showTime = layout.eventHeight >= 24;
+                            const titleMaxLines = showTime ? layout.eventHeight >= 34 ? 2 : 1 : 1;
+                            const isPlainTitle = typeof ev.title === "string" || typeof ev.title === "number";
+                            return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-full px-2.5 flex items-center min-w-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "w-full grid grid-cols-[1fr_auto] gap-x-2 items-start min-w-0 overflow-hidden", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                                "div",
+                                {
+                                  className: cn("text-xs font-semibold leading-snug min-w-0 overflow-hidden", isPlainTitle ? "break-words" : ""),
+                                  style: isPlainTitle ? {
+                                    display: "-webkit-box",
+                                    WebkitBoxOrient: "vertical",
+                                    WebkitLineClamp: titleMaxLines
+                                  } : void 0,
+                                  children: ev.title ?? null
+                                }
+                              ),
+                              showTime ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "text-[11px] opacity-70 leading-snug whitespace-nowrap", children: timeText }) : null
+                            ] }) });
+                          })();
                           const resource = resourceById.get(ev.resourceId);
                           const tooltipTitle = ev.title || ev.id;
                           const tooltipContent = /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
@@ -9545,6 +9571,7 @@ function CalendarTimeline({
                                 "shadow-sm hover:shadow-md hover:scale-[1.02] hover:z-10",
                                 "transition-all duration-150 ease-out",
                                 "backdrop-blur-sm",
+                                "overflow-hidden",
                                 ev.className,
                                 isPreview && "ring-2 ring-primary/50 ring-offset-1 ring-offset-background scale-[1.02] z-10"
                               ),
@@ -9561,6 +9588,7 @@ function CalendarTimeline({
                               tabIndex: 0,
                               "aria-label": aria,
                               onContextMenu: (e) => {
+                                if (isViewOnly) return;
                                 if (!onEventDelete) return;
                                 if (interactions?.deletableEvents === false) return;
                                 e.preventDefault();
@@ -9583,7 +9611,7 @@ function CalendarTimeline({
                               onDoubleClick: () => onEventDoubleClick?.(ev),
                               onPointerDown: (e) => onPointerDownEvent(e, ev, "move"),
                               children: [
-                                (interactions?.resizableEvents ?? true) && ev.resizable !== false ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+                                !isViewOnly && (interactions?.resizableEvents ?? true) && ev.resizable !== false ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
                                   /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                     "div",
                                     {