@underverse-ui/underverse 0.2.101 → 0.2.103

package/dist/index.d.cts

@@ -1030,6 +1030,17 @@ interface CalendarTimelineVirtualization {
     enabled?: boolean;
     overscan?: number;
 }
+type CalendarTimelineAdaptiveSlotWidths = boolean | {
+    /**
+     * "shrink": empty slots get `emptySlotWidth`, event slots keep the fixed base width (default).
+     * "redistribute": keep the total grid width as in fixed mode, redistribute freed width to event slots (capped).
+     */
+    mode?: "shrink" | "redistribute";
+    /** Width (px) for empty slots (month/day only). Default: `slotMinWidth * 0.6` (bounded). */
+    emptySlotWidth?: number;
+    /** Cap (px) for event slot width when `mode="redistribute"`. Default: `baseSlotWidth * 2.5`. */
+    maxEventSlotWidth?: number;
+};
 interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange"> {
     resources: CalendarTimelineResource<TResourceMeta>[];
     events: CalendarTimelineEvent<TEventMeta>[];
@@ -1113,6 +1124,19 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
         row?: boolean;
     };
     slotMinWidth?: number;
+    /**
+     * Month/day only: make slots (columns) without any events smaller to free space for slots that have events.
+     * Week view is unaffected.
+     */
+    adaptiveSlotWidths?: CalendarTimelineAdaptiveSlotWidths;
+    /**
+     * Day view: visual style for events that span many time slots.
+     * - "span": event blocks span the full duration on the timeline (default)
+     * - "compact": event blocks keep a capped visual width (still positioned at correct start)
+     */
+    dayEventStyle?: "span" | "compact";
+    /** Day view only (when `dayEventStyle="compact"`): max visual width (px). */
+    dayEventMaxWidth?: number;
     dayTimeStepMinutes?: number;
     /**
      * Day view horizontal range:
@@ -1185,7 +1209,7 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
     virtualization?: CalendarTimelineVirtualization;
 }
 
-declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, enableEventSheet, eventSheetSize, renderEventSheet, selectedEventId, defaultSelectedEventId, onSelectedEventIdChange, eventSheetOpen, defaultEventSheetOpen, onEventSheetOpenChange, view, defaultView, onViewChange, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, resourceColumnWidth, defaultResourceColumnWidth, onResourceColumnWidthChange, minResourceColumnWidth, maxResourceColumnWidth, rowHeight, defaultRowHeight, onRowHeightChange, minRowHeight, maxRowHeight, rowHeights, defaultRowHeights, onRowHeightsChange, autoRowHeight, enableLayoutResize, slotMinWidth, dayTimeStepMinutes, dayRangeMode, workHours, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEventClick, onCreateEvent, onEventMove, onEventResize, onEventDelete, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
+declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, enableEventSheet, eventSheetSize, renderEventSheet, selectedEventId, defaultSelectedEventId, onSelectedEventIdChange, eventSheetOpen, defaultEventSheetOpen, onEventSheetOpenChange, view, defaultView, onViewChange, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, resourceColumnWidth, defaultResourceColumnWidth, onResourceColumnWidthChange, minResourceColumnWidth, maxResourceColumnWidth, rowHeight, defaultRowHeight, onRowHeightChange, minRowHeight, maxRowHeight, rowHeights, defaultRowHeights, onRowHeightsChange, autoRowHeight, enableLayoutResize, slotMinWidth, adaptiveSlotWidths, dayEventStyle, dayEventMaxWidth, dayTimeStepMinutes, dayRangeMode, workHours, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEventClick, onCreateEvent, onEventMove, onEventResize, onEventDelete, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
 
 type ComboboxOption = string | {
     label: string;

package/dist/index.d.ts

@@ -1030,6 +1030,17 @@ interface CalendarTimelineVirtualization {
     enabled?: boolean;
     overscan?: number;
 }
+type CalendarTimelineAdaptiveSlotWidths = boolean | {
+    /**
+     * "shrink": empty slots get `emptySlotWidth`, event slots keep the fixed base width (default).
+     * "redistribute": keep the total grid width as in fixed mode, redistribute freed width to event slots (capped).
+     */
+    mode?: "shrink" | "redistribute";
+    /** Width (px) for empty slots (month/day only). Default: `slotMinWidth * 0.6` (bounded). */
+    emptySlotWidth?: number;
+    /** Cap (px) for event slot width when `mode="redistribute"`. Default: `baseSlotWidth * 2.5`. */
+    maxEventSlotWidth?: number;
+};
 interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange"> {
     resources: CalendarTimelineResource<TResourceMeta>[];
     events: CalendarTimelineEvent<TEventMeta>[];
@@ -1113,6 +1124,19 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
         row?: boolean;
     };
     slotMinWidth?: number;
+    /**
+     * Month/day only: make slots (columns) without any events smaller to free space for slots that have events.
+     * Week view is unaffected.
+     */
+    adaptiveSlotWidths?: CalendarTimelineAdaptiveSlotWidths;
+    /**
+     * Day view: visual style for events that span many time slots.
+     * - "span": event blocks span the full duration on the timeline (default)
+     * - "compact": event blocks keep a capped visual width (still positioned at correct start)
+     */
+    dayEventStyle?: "span" | "compact";
+    /** Day view only (when `dayEventStyle="compact"`): max visual width (px). */
+    dayEventMaxWidth?: number;
     dayTimeStepMinutes?: number;
     /**
      * Day view horizontal range:
@@ -1185,7 +1209,7 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
     virtualization?: CalendarTimelineVirtualization;
 }
 
-declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, enableEventSheet, eventSheetSize, renderEventSheet, selectedEventId, defaultSelectedEventId, onSelectedEventIdChange, eventSheetOpen, defaultEventSheetOpen, onEventSheetOpenChange, view, defaultView, onViewChange, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, resourceColumnWidth, defaultResourceColumnWidth, onResourceColumnWidthChange, minResourceColumnWidth, maxResourceColumnWidth, rowHeight, defaultRowHeight, onRowHeightChange, minRowHeight, maxRowHeight, rowHeights, defaultRowHeights, onRowHeightsChange, autoRowHeight, enableLayoutResize, slotMinWidth, dayTimeStepMinutes, dayRangeMode, workHours, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEventClick, onCreateEvent, onEventMove, onEventResize, onEventDelete, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
+declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, enableEventSheet, eventSheetSize, renderEventSheet, selectedEventId, defaultSelectedEventId, onSelectedEventIdChange, eventSheetOpen, defaultEventSheetOpen, onEventSheetOpenChange, view, defaultView, onViewChange, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, resourceColumnWidth, defaultResourceColumnWidth, onResourceColumnWidthChange, minResourceColumnWidth, maxResourceColumnWidth, rowHeight, defaultRowHeight, onRowHeightChange, minRowHeight, maxRowHeight, rowHeights, defaultRowHeights, onRowHeightsChange, autoRowHeight, enableLayoutResize, slotMinWidth, adaptiveSlotWidths, dayEventStyle, dayEventMaxWidth, dayTimeStepMinutes, dayRangeMode, workHours, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEventClick, onCreateEvent, onEventMove, onEventResize, onEventDelete, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
 
 type ComboboxOption = string | {
     label: string;

package/dist/index.js

@@ -8587,6 +8587,9 @@ function CalendarTimeline({
   autoRowHeight,
   enableLayoutResize,
   slotMinWidth,
+  adaptiveSlotWidths,
+  dayEventStyle = "span",
+  dayEventMaxWidth,
   dayTimeStepMinutes = 60,
   dayRangeMode,
   workHours,
@@ -8775,17 +8778,135 @@ function CalendarTimeline({
   const headerRef = React28.useRef(null);
   const bodyClientWidth = useClientWidth(bodyRef);
   const slotStarts = React28.useMemo(() => slots.map((s) => s.start), [slots]);
-  const slotWidth = React28.useMemo(() => {
-    const baseSlotWidth = activeView === "month" ? effectiveSlotMinWidth * 3 : activeView === "day" ? effectiveSlotMinWidth * 3 : effectiveSlotMinWidth;
+  const fixedSlotWidth = React28.useMemo(() => {
+    const baseSlotWidth = activeView === "month" || activeView === "day" ? 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(() => {
     return normalizeEvents({ events, range, view: activeView, timeZone: resolvedTimeZone });
   }, [events, range, activeView, resolvedTimeZone]);
+  const dayHeaderMarks = React28.useMemo(() => {
+    if (activeView !== "day") return null;
+    const n = slots.length;
+    const showTime = new Array(n).fill(false);
+    const showEllipsis = new Array(n).fill(false);
+    for (const ev of normalizedEvents) {
+      const startIdx = binarySearchLastLE(slotStarts, ev._start);
+      const endIdxRaw = binarySearchFirstGE(slotStarts, ev._end);
+      const endIdx = clamp3(endIdxRaw, 0, n - 1);
+      if (startIdx >= 0 && startIdx < n) showTime[startIdx] = true;
+      if (endIdx >= 0 && endIdx < n) showTime[endIdx] = true;
+      const span = endIdx - startIdx;
+      if (span >= 3) {
+        const mid = clamp3(Math.floor((startIdx + endIdx) / 2), 0, n - 1);
+        if (!showTime[mid]) showEllipsis[mid] = true;
+      }
+    }
+    const anchor = showTime.map((v, i) => v || showEllipsis[i]);
+    return { showTime, showEllipsis, anchor };
+  }, [activeView, normalizedEvents, slotStarts, slots.length]);
+  const slotMetrics = React28.useMemo(() => {
+    const n = slots.length;
+    const widths = new Array(n).fill(fixedSlotWidth);
+    const isAdaptiveView = activeView === "month" || activeView === "day";
+    const adaptiveCfg = adaptiveSlotWidths;
+    const adaptiveEnabled = Boolean(adaptiveCfg) && isAdaptiveView;
+    if (!adaptiveEnabled || n === 0) {
+      const lefts2 = new Array(n + 1);
+      lefts2[0] = 0;
+      for (let i = 0; i < n; i++) lefts2[i + 1] = lefts2[i] + widths[i];
+      const gridWidth3 = lefts2[n] ?? 0;
+      const xToSlotIdx3 = (x) => clamp3(Math.floor(x / Math.max(1, fixedSlotWidth)), 0, Math.max(0, n - 1));
+      return { slotWidths: widths, slotLefts: lefts2, slotHasEvent: null, gridWidth: gridWidth3, xToSlotIdx: xToSlotIdx3 };
+    }
+    const cfg = typeof adaptiveCfg === "object" ? adaptiveCfg : {};
+    const mode = cfg.mode ?? "shrink";
+    const defaultEmptySlotWidth = Math.max(18, Math.round(effectiveSlotMinWidth * 0.6));
+    const minEmptySlotWidth = activeView === "month" ? Math.max(24, Math.round(effectiveSlotMinWidth * 0.45)) : 12;
+    const emptySlotWidth = Math.max(minEmptySlotWidth, Math.min(fixedSlotWidth, cfg.emptySlotWidth ?? defaultEmptySlotWidth));
+    const dayAnchorCompression = activeView === "day" && Boolean(dayHeaderMarks?.anchor);
+    if (dayAnchorCompression) {
+      const hasEvent2 = dayHeaderMarks.anchor.slice(0, n);
+      const compressedEmptySlotWidth = clamp3(emptySlotWidth, 12, 20);
+      for (let i = 0; i < n; i++) widths[i] = hasEvent2[i] ? fixedSlotWidth : compressedEmptySlotWidth;
+      const lefts2 = new Array(n + 1);
+      lefts2[0] = 0;
+      for (let i = 0; i < n; i++) lefts2[i + 1] = lefts2[i] + widths[i];
+      const gridWidth3 = lefts2[n] ?? 0;
+      const xToSlotIdx3 = (x) => {
+        const xc = clamp3(x, 0, Math.max(0, gridWidth3 - 1e-3));
+        let lo = 0;
+        let hi = n - 1;
+        while (lo <= hi) {
+          const mid = lo + hi >> 1;
+          const left = lefts2[mid] ?? 0;
+          const right = lefts2[mid + 1] ?? gridWidth3;
+          if (xc < left) hi = mid - 1;
+          else if (xc >= right) lo = mid + 1;
+          else return mid;
+        }
+        return clamp3(lo, 0, Math.max(0, n - 1));
+      };
+      return { slotWidths: widths, slotLefts: lefts2, slotHasEvent: hasEvent2, gridWidth: gridWidth3, xToSlotIdx: xToSlotIdx3 };
+    }
+    const diff = new Array(n + 1).fill(0);
+    for (const ev of normalizedEvents) {
+      const startIdx = binarySearchLastLE(slotStarts, ev._start);
+      const endIdx = clamp3(binarySearchFirstGE(slotStarts, ev._end), startIdx + 1, n);
+      diff[startIdx] = (diff[startIdx] ?? 0) + 1;
+      diff[endIdx] = (diff[endIdx] ?? 0) - 1;
+    }
+    const hasEvent = new Array(n);
+    let running = 0;
+    let eventCount = 0;
+    for (let i = 0; i < n; i++) {
+      running += diff[i] ?? 0;
+      const covered = running > 0;
+      hasEvent[i] = covered;
+      if (covered) eventCount++;
+    }
+    if (eventCount === 0 || eventCount === n) {
+      const lefts2 = new Array(n + 1);
+      lefts2[0] = 0;
+      for (let i = 0; i < n; i++) lefts2[i + 1] = lefts2[i] + widths[i];
+      const gridWidth3 = lefts2[n] ?? 0;
+      const xToSlotIdx3 = (x) => clamp3(Math.floor(x / Math.max(1, fixedSlotWidth)), 0, Math.max(0, n - 1));
+      return { slotWidths: widths, slotLefts: lefts2, slotHasEvent: null, gridWidth: gridWidth3, xToSlotIdx: xToSlotIdx3 };
+    }
+    const emptyCount = n - eventCount;
+    let eventSlotWidth = fixedSlotWidth;
+    if (mode === "redistribute") {
+      const targetTotal = n * fixedSlotWidth;
+      const remaining = Math.max(0, targetTotal - emptyCount * emptySlotWidth);
+      const raw = remaining / Math.max(1, eventCount);
+      const maxEventSlotWidth = cfg.maxEventSlotWidth ?? fixedSlotWidth * 2.5;
+      eventSlotWidth = clamp3(raw, fixedSlotWidth, Math.max(fixedSlotWidth, maxEventSlotWidth));
+    }
+    for (let i = 0; i < n; i++) widths[i] = hasEvent[i] ? eventSlotWidth : emptySlotWidth;
+    const lefts = new Array(n + 1);
+    lefts[0] = 0;
+    for (let i = 0; i < n; i++) lefts[i + 1] = lefts[i] + widths[i];
+    const gridWidth2 = lefts[n] ?? 0;
+    const xToSlotIdx2 = (x) => {
+      const xc = clamp3(x, 0, Math.max(0, gridWidth2 - 1e-3));
+      let lo = 0;
+      let hi = n - 1;
+      while (lo <= hi) {
+        const mid = lo + hi >> 1;
+        const left = lefts[mid] ?? 0;
+        const right = lefts[mid + 1] ?? gridWidth2;
+        if (xc < left) hi = mid - 1;
+        else if (xc >= right) lo = mid + 1;
+        else return mid;
+      }
+      return clamp3(lo, 0, Math.max(0, n - 1));
+    };
+    return { slotWidths: widths, slotLefts: lefts, slotHasEvent: hasEvent, gridWidth: gridWidth2, xToSlotIdx: xToSlotIdx2 };
+  }, [activeView, adaptiveSlotWidths, dayHeaderMarks, effectiveSlotMinWidth, fixedSlotWidth, normalizedEvents, slotStarts, slots.length]);
+  const { slotWidths, slotLefts, slotHasEvent, gridWidth, xToSlotIdx } = slotMetrics;
   const eventsByResource = React28.useMemo(() => {
     return eventsByResourceId(normalizedEvents);
   }, [normalizedEvents]);
@@ -9034,7 +9155,20 @@ function CalendarTimeline({
     setCreateStartIdx(startIdx);
     setCreateEndIdx(Math.min(slots.length, startIdx + 1));
     setCreateOpen(true);
-  }, [activeDate, activeEventSheetOpen, activeView, canCreate, range.end, range.start, resolvedNow, resolvedTimeZone, resources, setEventSheetOpen, slotStarts, slots.length]);
+  }, [
+    activeDate,
+    activeEventSheetOpen,
+    activeView,
+    canCreate,
+    range.end,
+    range.start,
+    resolvedNow,
+    resolvedTimeZone,
+    resources,
+    setEventSheetOpen,
+    slotStarts,
+    slots.length
+  ]);
   React28.useEffect(() => {
     setCreateEndIdx((prev) => Math.min(slots.length, Math.max(prev, createStartIdx + 1)));
   }, [createStartIdx, slots.length]);
@@ -9087,13 +9221,13 @@ function CalendarTimeline({
       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 slotIdx = xToSlotIdx(x - epsilon);
       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]
+    [xToSlotIdx]
   );
   const slotToDate = React28.useCallback(
     (slotIdx) => {
@@ -9110,7 +9244,11 @@ function CalendarTimeline({
     (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 });
+      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;
@@ -9360,16 +9498,24 @@ function CalendarTimeline({
         "div",
         {
           className: cn(
-            "shrink-0 border-l border-border/30 flex items-center justify-center transition-colors duration-150",
+            "shrink-0 border-l flex items-center justify-center transition-colors duration-150 overflow-hidden",
+            activeView === "day" && dayHeaderMarks?.anchor ? dayHeaderMarks.anchor[idx] ? "border-border/30" : "border-border/10" : "border-border/30",
             sizeConfig.slotHeaderClass,
-            s.isToday && "bg-primary/8 border-l-primary/40"
+            activeView !== "day" && s.isToday && "bg-primary/8 border-l-primary/40"
           ),
-          style: { width: slotWidth, minWidth: slotWidth },
+          style: { width: slotWidths[idx], minWidth: slotWidths[idx] },
           "aria-label": formatters?.ariaSlotLabel?.(s.start, { view: activeView, locale: resolvedLocale, timeZone: resolvedTimeZone }),
-          children: /* @__PURE__ */ jsxs31("div", { className: cn("flex flex-col items-center", s.isToday && "relative"), children: [
-            s.isToday && /* @__PURE__ */ jsx36(Dot, { className: "absolute -top-2.5 h-4 w-4 text-primary animate-pulse" }),
-            s.label
-          ] })
+          children: (() => {
+            const label = typeof s.label === "string" || typeof s.label === "number" ? /* @__PURE__ */ jsx36("span", { className: "truncate whitespace-nowrap", children: s.label }) : s.label;
+            if (activeView === "day" && dayHeaderMarks) {
+              if (dayHeaderMarks.showEllipsis[idx]) return /* @__PURE__ */ jsx36("span", { className: "text-xs text-muted-foreground/70 select-none", children: "\u2026" });
+              if (!dayHeaderMarks.showTime[idx]) return null;
+            }
+            return /* @__PURE__ */ jsxs31("div", { className: cn("flex flex-col items-center min-w-0 overflow-hidden", activeView !== "day" && s.isToday && "relative"), children: [
+              activeView !== "day" && s.isToday && /* @__PURE__ */ jsx36(Dot, { className: "absolute -top-2.5 h-4 w-4 text-primary animate-pulse" }),
+              label
+            ] });
+          })()
         },
         `${s.start.toISOString()}_${idx}`
       ))
@@ -9422,14 +9568,25 @@ function CalendarTimeline({
         visible: visible.map((p) => ({
           ev: p.ev,
           lane: p.lane,
-          left: p.startIdx * slotWidth,
-          width: Math.max(1, (p.endIdx - p.startIdx) * slotWidth)
+          left: slotLefts[p.startIdx] ?? 0,
+          width: Math.max(1, (slotLefts[p.endIdx] ?? 0) - (slotLefts[p.startIdx] ?? 0))
         })),
         hidden: hidden.map((h) => h.ev)
       });
     }
     return map;
-  }, [eventsByResource, getResourceRowHeight, laneGap, lanePaddingY, slotStarts, slots.length, slotWidth, effectiveMaxLanesPerRow, preview, eventHeight]);
+  }, [
+    eventsByResource,
+    eventHeight,
+    effectiveMaxLanesPerRow,
+    getResourceRowHeight,
+    laneGap,
+    lanePaddingY,
+    preview,
+    slotLefts,
+    slotStarts,
+    slots.length
+  ]);
   return /* @__PURE__ */ jsxs31(
     "div",
     {
@@ -9487,7 +9644,13 @@ function CalendarTimeline({
                   const rowIndex = startRow + idx;
                   const h = rowHeightsArray[rowIndex] ?? effectiveRowHeight;
                   if (row.kind === "group") {
-                    return /* @__PURE__ */ jsx36("div", { className: "flex", style: { height: h }, children: /* @__PURE__ */ jsx36("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}`);
+                    return /* @__PURE__ */ jsx36("div", { className: "flex", style: { height: h }, children: /* @__PURE__ */ jsx36(
+                      "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: [], baseTop: lanePaddingY, eventHeight };
@@ -9505,11 +9668,12 @@ function CalendarTimeline({
                           "div",
                           {
                             className: cn(
-                              "h-full border-l border-border/20 transition-colors duration-100",
-                              s.isToday && "bg-primary/5 border-l-primary/30",
+                              "h-full border-l transition-colors duration-100",
+                              activeView === "day" && dayHeaderMarks?.anchor ? !dayHeaderMarks.anchor[i2] ? "border-border/10" : "border-border/20" : "border-border/20",
+                              activeView !== "day" && s.isToday && "bg-primary/5 border-l-primary/30",
                               "hover:bg-muted/10"
                             ),
-                            style: { width: slotWidth, minWidth: slotWidth }
+                            style: { width: slotWidths[i2], minWidth: slotWidths[i2] }
                           },
                           `${r.id}_${i2}`
                         )) }) }),
@@ -9553,28 +9717,17 @@ function CalendarTimeline({
                             /* @__PURE__ */ jsx36("div", { className: "text-xs opacity-80", children: timeText }),
                             resource?.label ? /* @__PURE__ */ jsx36("div", { className: "text-xs opacity-70", children: resource.label }) : null
                           ] });
+                          const shouldCompact = activeView === "day" && dayEventStyle === "compact";
+                          const defaultMaxVisual = clamp3(Math.round(fixedSlotWidth * 1.2), 160, 360);
+                          const maxVisual = clamp3(Math.round(dayEventMaxWidth ?? defaultMaxVisual), 80, 1200);
+                          const visualWidth = shouldCompact ? Math.min(width, maxVisual) : width;
+                          const isClipped = shouldCompact && width > visualWidth + 1;
                           return /* @__PURE__ */ jsx36(Tooltip, { content: tooltipContent, placement: "top", delay: { open: 250, close: 0 }, children: /* @__PURE__ */ jsxs31(
                             "div",
                             {
-                              className: cn(
-                                "absolute rounded-lg border select-none cursor-pointer",
-                                "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"
-                              ),
+                              className: cn("absolute select-none cursor-pointer", isPreview && "z-10"),
                               "data-uv-ct-event": true,
-                              style: {
-                                left,
-                                top,
-                                width,
-                                height: layout.eventHeight,
-                                background: bg,
-                                borderColor: border,
-                                borderLeftWidth: 3
-                              },
+                              style: { left, top, width, height: layout.eventHeight },
                               role: "button",
                               tabIndex: 0,
                               "aria-label": aria,
@@ -9602,6 +9755,31 @@ function CalendarTimeline({
                               onDoubleClick: () => onEventDoubleClick?.(ev),
                               onPointerDown: (e) => onPointerDownEvent(e, ev, "move"),
                               children: [
+                                /* @__PURE__ */ jsxs31(
+                                  "div",
+                                  {
+                                    className: cn(
+                                      "relative h-full rounded-lg border overflow-hidden",
+                                      "shadow-sm hover:shadow-md hover:scale-[1.02]",
+                                      "transition-all duration-150 ease-out",
+                                      "backdrop-blur-sm",
+                                      ev.className,
+                                      isPreview && "ring-2 ring-primary/50 ring-offset-1 ring-offset-background scale-[1.02]"
+                                    ),
+                                    style: {
+                                      width: visualWidth,
+                                      maxWidth: "100%",
+                                      height: "100%",
+                                      background: bg,
+                                      borderColor: border,
+                                      borderLeftWidth: 3
+                                    },
+                                    children: [
+                                      node,
+                                      isClipped ? /* @__PURE__ */ jsx36("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-10 bg-linear-to-l from-background/50 to-transparent flex items-center justify-end pr-2", children: /* @__PURE__ */ jsx36("span", { className: "text-xs text-muted-foreground/80", children: "\u2026" }) }) : null
+                                    ]
+                                  }
+                                ),
                                 !isViewOnly && (interactions?.resizableEvents ?? true) && ev.resizable !== false ? /* @__PURE__ */ jsxs31(Fragment10, { children: [
                                   /* @__PURE__ */ jsx36(
                                     "div",
@@ -9617,8 +9795,7 @@ function CalendarTimeline({
                                       onPointerDown: (e) => onPointerDownEvent(e, ev, "resize-end")
                                     }
                                   )
-                                ] }) : null,
-                                node
+                                ] }) : null
                               ]
                             }
                           ) }, ev.id);
@@ -9626,8 +9803,8 @@ function CalendarTimeline({
                         preview && preview.resourceId === r.id && !preview.eventId ? (() => {
                           const startIdx = binarySearchLastLE(slotStarts, preview.start);
                           const endIdx = clamp3(binarySearchFirstGE(slotStarts, preview.end), startIdx + 1, slots.length);
-                          const left = startIdx * slotWidth;
-                          const width = Math.max(1, (endIdx - startIdx) * slotWidth);
+                          const left = slotLefts[startIdx] ?? 0;
+                          const width = Math.max(1, (slotLefts[endIdx] ?? 0) - (slotLefts[startIdx] ?? 0));
                           return /* @__PURE__ */ jsx36(
                             "div",
                             {
@@ -9647,7 +9824,7 @@ function CalendarTimeline({
                               "flex items-center justify-center"
                             ),
                             style: {
-                              left: hoverCell.slotIdx * slotWidth + slotWidth / 2 - 10,
+                              left: (slotLefts[hoverCell.slotIdx] ?? 0) + (slotWidths[hoverCell.slotIdx] ?? fixedSlotWidth) / 2 - 10,
                               top: clamp3(Math.round(hoverCell.y - 10), 6, Math.max(6, h - 26))
                             },
                             "aria-hidden": true,
@@ -9736,27 +9913,11 @@ function CalendarTimeline({
               /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-2 gap-3", children: [
                 /* @__PURE__ */ jsxs31("div", { className: "space-y-2", children: [
                   /* @__PURE__ */ jsx36("div", { className: "text-xs text-muted-foreground", children: l.start }),
-                  /* @__PURE__ */ jsx36(
-                    Combobox,
-                    {
-                      options: createStartOptions,
-                      value: createStartIdx,
-                      onChange: (v) => setCreateStartIdx(Number(v)),
-                      placeholder: l.start
-                    }
-                  )
+                  /* @__PURE__ */ jsx36(Combobox, { options: createStartOptions, value: createStartIdx, onChange: (v) => setCreateStartIdx(Number(v)), placeholder: l.start })
                 ] }),
                 /* @__PURE__ */ jsxs31("div", { className: "space-y-2", children: [
                   /* @__PURE__ */ jsx36("div", { className: "text-xs text-muted-foreground", children: l.end }),
-                  /* @__PURE__ */ jsx36(
-                    Combobox,
-                    {
-                      options: createEndOptions,
-                      value: createEndIdx,
-                      onChange: (v) => setCreateEndIdx(Number(v)),
-                      placeholder: l.end
-                    }
-                  )
+                  /* @__PURE__ */ jsx36(Combobox, { options: createEndOptions, value: createEndIdx, onChange: (v) => setCreateEndIdx(Number(v)), placeholder: l.end })
                 ] })
               ] }),
               /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-end gap-2 pt-2", children: [