@underverse-ui/underverse 1.0.4 → 1.0.5

package/dist/index.cjs

@@ -733,6 +733,8 @@ var defaultTranslations = {
       month: "Month",
       week: "Week",
       day: "Day",
+      sprint: "Sprint",
+      sprints: "{n} sprints",
       resourcesHeader: "Resources",
       expandGroup: "Expand group",
       collapseGroup: "Collapse group",
@@ -809,6 +811,8 @@ var defaultTranslations = {
       month: "Th\xE1ng",
       week: "Tu\u1EA7n",
       day: "Ng\xE0y",
+      sprint: "Sprint",
+      sprints: "{n} sprint",
       resourcesHeader: "T\xE0i nguy\xEAn",
       expandGroup: "M\u1EDF nh\xF3m",
       collapseGroup: "Thu g\u1ECDn nh\xF3m",
@@ -885,6 +889,8 @@ var defaultTranslations = {
       month: "\uC6D4",
       week: "\uC8FC",
       day: "\uC77C",
+      sprint: "\uC2A4\uD504\uB9B0\uD2B8",
+      sprints: "{n} \uC2A4\uD504\uB9B0\uD2B8",
       resourcesHeader: "\uB9AC\uC18C\uC2A4",
       expandGroup: "\uADF8\uB8F9 \uD3BC\uCE58\uAE30",
       collapseGroup: "\uADF8\uB8F9 \uC811\uAE30",
@@ -961,6 +967,8 @@ var defaultTranslations = {
       month: "\u6708",
       week: "\u9031",
       day: "\u65E5",
+      sprint: "\u30B9\u30D7\u30EA\u30F3\u30C8",
+      sprints: "{n} \u30B9\u30D7\u30EA\u30F3\u30C8",
       resourcesHeader: "\u30EA\u30BD\u30FC\u30B9",
       expandGroup: "\u30B0\u30EB\u30FC\u30D7\u3092\u5C55\u958B",
       collapseGroup: "\u30B0\u30EB\u30FC\u30D7\u3092\u6298\u308A\u305F\u305F\u3080",
@@ -8571,6 +8579,10 @@ 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));
 }
+function startOfZonedYear(date, timeZone) {
+  const p = getZonedParts(date, timeZone);
+  return new Date(zonedTimeToUtcMs({ year: p.year, month: 1, day: 1, hour: 0, minute: 0, second: 0 }, timeZone));
+}
 function addZonedDays(date, days, timeZone) {
   const p = getZonedParts(date, timeZone);
   return new Date(zonedTimeToUtcMs({ ...p, day: p.day + days }, timeZone));
@@ -8583,6 +8595,9 @@ function addZonedMonths(date, months, timeZone) {
   const clampedDay = Math.min(p.day, daysInTargetMonth);
   return new Date(zonedTimeToUtcMs({ year: next.year, month: next.month, day: clampedDay, hour: p.hour, minute: p.minute, second: p.second }, timeZone));
 }
+function addZonedYears(date, years, timeZone) {
+  return addZonedMonths(date, years * 12, timeZone);
+}
 function startOfZonedWeek(date, weekStartsOn, timeZone) {
   const p = getZonedParts(date, timeZone);
   const weekday = new Date(Date.UTC(p.year, p.month - 1, p.day)).getUTCDay();
@@ -8821,6 +8836,13 @@ function defaultSlotHeader(slotStart, view, locale, timeZone) {
   if (view === "day") {
     return getDtf(locale, timeZone, { hour: "2-digit", minute: "2-digit", hourCycle: "h23" }).format(slotStart);
   }
+  if (view === "sprint") {
+    const { week } = getIsoWeekInfo(slotStart, timeZone);
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "inline-flex flex-col items-center leading-tight", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70", children: "S" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-sm font-semibold text-foreground", children: String(week).padStart(2, "0") })
+    ] });
+  }
   const weekday = getDtf(locale, timeZone, { weekday: "short" }).format(slotStart);
   const day = getDtf(locale, timeZone, { day: "numeric" }).format(slotStart);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "inline-flex flex-col items-center leading-tight", children: [
@@ -8881,7 +8903,10 @@ function getGroupResourceCounts(resources) {
 function computeSlotStarts(args) {
   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;
+  const start = view === "month" ? startOfZonedMonth(date, timeZone) : view === "week" ? startOfZonedWeek(date, weekStartsOn, timeZone) : view === "sprint" ? (() => {
+    const yearStart = startOfZonedYear(date, timeZone);
+    return startOfZonedWeek(yearStart, weekStartsOn, timeZone);
+  })() : baseDayStart;
   if (view === "day") {
     const step = Math.max(5, Math.min(240, Math.trunc(dayTimeStepMinutes)));
     const stepMs = step * 6e4;
@@ -8898,6 +8923,21 @@ function computeSlotStarts(args) {
     }
     return { start: start2, end: end3, slotStarts: slotStarts2 };
   }
+  if (view === "sprint") {
+    const yearStart = startOfZonedYear(date, timeZone);
+    const nextYearStart = startOfZonedYear(addZonedMonths(yearStart, 12, timeZone), timeZone);
+    const lastDayOfYear = addZonedDays(nextYearStart, -1, timeZone);
+    const lastSlotStart = startOfZonedWeek(lastDayOfYear, weekStartsOn, timeZone);
+    const end2 = addZonedDays(lastSlotStart, 7, timeZone);
+    const slotStarts2 = [];
+    let cur2 = start;
+    let guard2 = 0;
+    while (cur2.getTime() < end2.getTime() && guard2++ < 60) {
+      slotStarts2.push(cur2);
+      cur2 = addZonedDays(cur2, 7, timeZone);
+    }
+    return { start, end: end2, slotStarts: slotStarts2 };
+  }
   const end = view === "month" ? startOfZonedMonth(addZonedMonths(start, 1, timeZone), timeZone) : addZonedDays(start, 7, timeZone);
   const slotStarts = [];
   let cur = start;
@@ -8946,7 +8986,8 @@ var import_jsx_runtime34 = require("react/jsx-runtime");
 var VIEW_ICONS = {
   month: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.CalendarRange, { className: "h-4 w-4" }),
   week: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.CalendarDays, { className: "h-4 w-4" }),
-  day: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Calendar, { className: "h-4 w-4" })
+  day: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Calendar, { className: "h-4 w-4" }),
+  sprint: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.CalendarDays, { className: "h-4 w-4" })
 };
 function CalendarTimelineHeader(props) {
   const {
@@ -8971,7 +9012,7 @@ function CalendarTimelineHeader(props) {
     slotHeaderNodes
   } = props;
   const resolvedAvailableViews = React28.useMemo(
-    () => availableViews?.length ? availableViews : ["month", "week", "day"],
+    () => availableViews?.length ? availableViews : ["month", "week", "day", "sprint"],
     [availableViews]
   );
   const showViewSwitcher = resolvedAvailableViews.length > 1;
@@ -9034,7 +9075,7 @@ function CalendarTimelineHeader(props) {
     onApplyDateTime(tempDate);
     setTodayOpen(false);
   }, [onApplyDateTime, tempDate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "sticky top-0 z-30 bg-linear-to-b from-background via-background to-background/95 border-b border-border/40 backdrop-blur-xl", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "sticky top-0 z-30 bg-linear-to-b from-card via-card to-card/95 border-b border-border/40 backdrop-blur-xl", children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("flex items-center justify-between gap-4", sizeConfig.headerPaddingClass), children: [
       /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0", children: [
         /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center bg-muted/40 rounded-full p-1 gap-0.5", children: [
@@ -9045,7 +9086,7 @@ function CalendarTimelineHeader(props) {
               size: "icon",
               onClick: () => navigate(-1),
               "aria-label": labels.prev,
-              className: cn(sizeConfig.controlButtonIconClass, "rounded-full hover:bg-background/80 transition-all duration-200"),
+              className: cn(sizeConfig.controlButtonIconClass, "rounded-full hover:bg-card/80 transition-all duration-200"),
               children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.ChevronLeft, { className: "h-4 w-4" })
             }
           ),
@@ -9060,7 +9101,7 @@ function CalendarTimelineHeader(props) {
                 {
                   variant: "ghost",
                   size: "sm",
-                  className: cn(sizeConfig.controlButtonTextClass, "rounded-full hover:bg-background/80 font-medium transition-all duration-200"),
+                  className: cn(sizeConfig.controlButtonTextClass, "rounded-full hover:bg-card/80 font-medium transition-all duration-200"),
                   children: labels.today
                 }
               ),
@@ -9140,7 +9181,7 @@ function CalendarTimelineHeader(props) {
               size: "icon",
               onClick: () => navigate(1),
               "aria-label": labels.next,
-              className: cn(sizeConfig.controlButtonIconClass, "rounded-full hover:bg-background/80 transition-all duration-200"),
+              className: cn(sizeConfig.controlButtonIconClass, "rounded-full hover:bg-card/80 transition-all duration-200"),
               children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.ChevronRight, { className: "h-4 w-4" })
             }
           )
@@ -9169,7 +9210,7 @@ function CalendarTimelineHeader(props) {
             className: cn(
               sizeConfig.controlButtonTextClass,
               "rounded-full font-medium transition-all duration-200 gap-1.5",
-              activeView === v ? "bg-primary text-primary-foreground shadow-sm shadow-primary/25" : "hover:bg-background/80 text-muted-foreground hover:text-foreground"
+              activeView === v ? "bg-primary text-primary-foreground shadow-sm shadow-primary/25" : "hover:bg-card/80 text-muted-foreground hover:text-foreground"
             ),
             children: [
               VIEW_ICONS[v],
@@ -9184,7 +9225,7 @@ function CalendarTimelineHeader(props) {
       showLeftColumn ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "div",
         {
-          className: "shrink-0 border-r border-border/30 bg-muted/20 flex items-center justify-center relative group/uv-ct-top-left",
+          className: "shrink-0 border-r border-border/30 bg-card/60 flex items-center justify-center relative group/uv-ct-top-left",
           style: { width: effectiveResourceColumnWidth, minWidth: effectiveResourceColumnWidth },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-xs font-medium text-muted-foreground/70 uppercase tracking-wider", children: resourcesHeaderLabel }),
@@ -9239,7 +9280,7 @@ function DefaultGroupRow(props) {
           "span",
           {
             className: cn(
-              "inline-flex items-center justify-center w-5 h-5 rounded-md bg-background/60 transition-transform duration-200",
+              "inline-flex items-center justify-center w-5 h-5 rounded-md bg-card/60 transition-transform duration-200",
               collapsed ? "" : "rotate-180"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
@@ -9260,7 +9301,7 @@ function ResourceRowCell(props) {
     "div",
     {
       className: cn(
-        "h-full w-full flex items-center border-b border-border/30 bg-linear-to-r from-background to-background/95 relative",
+        "h-full w-full flex items-center border-b border-border/30 bg-linear-to-r from-card to-card/95 relative",
         sizeConfig.resourceRowClass,
         "hover:from-muted/30 hover:to-muted/10 transition-all duration-200 group/uv-ct-row-header"
       ),
@@ -9320,7 +9361,7 @@ var CalendarTimelineGridOverlay = React29.memo(function CalendarTimelineGridOver
       if (showToday && idx === todaySlotIdx) return null;
       const left = slotLefts[idx] ?? 0;
       const width = slotWidths[idx] ?? 0;
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute top-0 h-full bg-destructive/5", style: { left, width }, "aria-hidden": true }, `we_${idx}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute top-0 h-full bg-muted/20", style: { left, width }, "aria-hidden": true }, `we_${idx}`);
     }) : null,
     showToday ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "div",
@@ -9383,7 +9424,8 @@ function useTimelineSlots(args) {
     dayRangeMode,
     workHours,
     resolvedNow,
-    formatters
+    formatters,
+    dueDateSprint
   } = args;
   const { slots, range } = React31.useMemo(() => {
     const { start, end, slotStarts: slotStarts2 } = computeSlotStarts({
@@ -9396,17 +9438,89 @@ function useTimelineSlots(args) {
       workHours
     });
     const todayStart = startOfZonedDay(resolvedNow, resolvedTimeZone).getTime();
-    const slotItems = slotStarts2.map((s) => ({
+    const nowMs = resolvedNow.getTime();
+    const sprintDefs = (() => {
+      if (activeView !== "sprint") return [];
+      if (!dueDateSprint) return [];
+      const out = [];
+      for (const v of Object.values(dueDateSprint)) {
+        const startInput = v.range_date?.start;
+        const endInput = v.range_date?.end;
+        if (startInput == null || endInput == null) continue;
+        const startRaw = toDate2(startInput);
+        const endRaw = toDate2(endInput);
+        if (Number.isNaN(startRaw.getTime()) || Number.isNaN(endRaw.getTime())) continue;
+        const startMs = startOfZonedDay(startRaw, resolvedTimeZone).getTime();
+        const endMs = startOfZonedDay(endRaw, resolvedTimeZone).getTime();
+        if (!Number.isFinite(startMs) || !Number.isFinite(endMs)) continue;
+        if (endMs <= startMs) continue;
+        out.push({ startMs, endMs, title: v.title });
+      }
+      out.sort((a, b) => a.startMs - b.startMs);
+      return out;
+    })();
+    const sprintRangeText = (() => {
+      if (activeView !== "sprint") return null;
+      const df = getDtf(resolvedLocale, resolvedTimeZone, { month: "short", day: "numeric" });
+      return (startMs, endMs) => {
+        const a = df.format(new Date(startMs));
+        const b = df.format(new Date(endMs - 1));
+        return a === b ? a : `${a}\u2013${b}`;
+      };
+    })();
+    const matchSprintDef = (slotStart, idx) => {
+      if (activeView !== "sprint") return null;
+      if (sprintDefs.length === 0) return null;
+      const sMs = startOfZonedDay(slotStart, resolvedTimeZone).getTime();
+      const byRange = sprintDefs.find((d) => sMs >= d.startMs && sMs < d.endMs) ?? null;
+      return byRange ?? sprintDefs[idx] ?? null;
+    };
+    const slotItems = slotStarts2.map((s, idx) => ({
       start: s,
-      label: formatters?.slotHeader?.(s, { view: activeView, locale: resolvedLocale, timeZone: resolvedTimeZone }) ?? defaultSlotHeader(s, activeView, resolvedLocale, resolvedTimeZone),
-      isToday: startOfZonedDay(s, resolvedTimeZone).getTime() === todayStart,
-      isWeekend: activeView === "day" ? false : (() => {
+      label: formatters?.slotHeader?.(s, { view: activeView, locale: resolvedLocale, timeZone: resolvedTimeZone }) ?? (() => {
+        if (activeView !== "sprint") return defaultSlotHeader(s, activeView, resolvedLocale, resolvedTimeZone);
+        const match = matchSprintDef(s, idx);
+        if (match && sprintRangeText) {
+          const rangeText = sprintRangeText(match.startMs, match.endMs);
+          return React31.createElement(
+            "span",
+            { className: "inline-flex flex-col items-center leading-tight" },
+            React31.createElement("span", { className: "text-[11px] font-semibold text-foreground truncate max-w-[8rem]" }, match.title),
+            React31.createElement("span", { className: "text-[10px] font-medium text-muted-foreground/70" }, rangeText)
+          );
+        }
+        return React31.createElement(
+          "span",
+          { className: "inline-flex flex-col items-center leading-tight" },
+          React31.createElement("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70" }, "S"),
+          React31.createElement("span", { className: "text-sm font-semibold text-foreground" }, String(idx + 1).padStart(2, "0"))
+        );
+      })(),
+      isToday: (() => {
+        if (activeView !== "sprint") return startOfZonedDay(s, resolvedTimeZone).getTime() === todayStart;
+        const match = matchSprintDef(s, idx);
+        const sprintEndMs = match ? match.endMs : addZonedDays(s, 7, resolvedTimeZone).getTime();
+        return nowMs >= s.getTime() && nowMs < sprintEndMs;
+      })(),
+      isWeekend: activeView === "day" || activeView === "sprint" ? false : (() => {
         const wd = getZonedWeekday(s, resolvedTimeZone);
         return wd === 0 || wd === 6;
       })()
     }));
     return { slots: slotItems, range: { start, end } };
-  }, [activeView, activeDate, dayRangeMode, dayTimeStepMinutes, formatters, resolvedLocale, resolvedNow, resolvedTimeZone, weekStartsOn, workHours]);
+  }, [
+    activeView,
+    activeDate,
+    dayRangeMode,
+    dayTimeStepMinutes,
+    dueDateSprint,
+    formatters,
+    resolvedLocale,
+    resolvedNow,
+    resolvedTimeZone,
+    weekStartsOn,
+    workHours
+  ]);
   const slotStarts = React31.useMemo(() => slots.map((s) => s.start), [slots]);
   const todaySlotIdx = React31.useMemo(() => slots.findIndex((s) => s.isToday), [slots]);
   const weekendSlotIdxs = React31.useMemo(() => {
@@ -9697,6 +9811,7 @@ function CalendarTimeline({
   view,
   defaultView = "month",
   onViewChange,
+  dueDateSprint,
   date,
   defaultDate,
   onDateChange,
@@ -9729,6 +9844,8 @@ function CalendarTimeline({
   adaptiveSlotWidths,
   dayEventStyle = "span",
   dayEventMaxWidth,
+  monthEventStyle = "span",
+  monthEventMaxWidth,
   dayTimeStepMinutes = 60,
   enableEventTooltips = true,
   dayHeaderMode = "full",
@@ -9823,18 +9940,29 @@ function CalendarTimeline({
     setInternalRowHeight(defaultRowHeight);
   }, [defaultRowHeight, isControlledRowHeight]);
   const effectiveRowHeight = isControlledRowHeight ? rowHeight : internalRowHeight;
-  const effectiveSlotMinWidth = slotMinWidth ?? sizeConfig.slotMinWidth;
+  const baseSlotMinWidth = slotMinWidth ?? sizeConfig.slotMinWidth;
   const colMin = minResourceColumnWidth ?? 160;
   const colMax = maxResourceColumnWidth ?? 520;
   const rowMin = minRowHeight ?? 36;
   const rowMax = maxRowHeight ?? 120;
   const availableViews = React32.useMemo(
-    () => onlyView ? [onlyView] : ["month", "week", "day"],
+    () => onlyView ? [onlyView] : ["month", "week", "day", "sprint"],
     [onlyView]
   );
   const isControlledView = view !== void 0;
   const [internalView, setInternalView] = React32.useState(() => onlyView ?? defaultView);
   const activeView = onlyView ? onlyView : isControlledView ? view : internalView;
+  const effectiveSlotMinWidth = React32.useMemo(() => {
+    if (slotMinWidth == null) {
+      if (activeView === "month" && monthEventStyle === "compact") {
+        return clamp4(Math.round(sizeConfig.slotMinWidth * 0.55), 32, sizeConfig.slotMinWidth);
+      }
+      if (activeView === "sprint") {
+        return clamp4(Math.round(sizeConfig.slotMinWidth * 0.4), 18, 48);
+      }
+    }
+    return baseSlotMinWidth;
+  }, [activeView, baseSlotMinWidth, monthEventStyle, sizeConfig.slotMinWidth, slotMinWidth]);
   const isControlledDate = date !== void 0;
   const [internalDate, setInternalDate] = React32.useState(() => defaultDate ?? /* @__PURE__ */ new Date());
   const activeDate = isControlledDate ? date : internalDate;
@@ -9847,6 +9975,7 @@ function CalendarTimeline({
       month: labels?.month ?? t("month"),
       week: labels?.week ?? t("week"),
       day: labels?.day ?? t("day"),
+      sprint: labels?.sprint ?? t("sprint"),
       newEvent: labels?.newEvent ?? t("newEvent"),
       createEventTitle: labels?.createEventTitle ?? t("createEventTitle"),
       create: labels?.create ?? t("create"),
@@ -9887,6 +10016,10 @@ function CalendarTimeline({
         setDate(addZonedDays(base, dir * 7, resolvedTimeZone));
         return;
       }
+      if (activeView === "sprint") {
+        setDate(addZonedYears(base, dir, resolvedTimeZone));
+        return;
+      }
       setDate(addZonedDays(base, dir, resolvedTimeZone));
     },
     [activeDate, activeView, resolvedTimeZone, setDate]
@@ -9912,7 +10045,8 @@ function CalendarTimeline({
     dayRangeMode,
     workHours,
     resolvedNow,
-    formatters
+    formatters,
+    dueDateSprint
   });
   React32.useEffect(() => {
     onRangeChange?.(range);
@@ -10158,9 +10292,15 @@ function CalendarTimeline({
       const rangeText = ya === yb ? `${a} \u2013 ${b}, ${ya}` : `${a}, ${ya} \u2013 ${b}, ${yb}`;
       return `${l.week} ${week} \u2022 ${rangeText}`;
     }
+    if (activeView === "sprint") {
+      const fmtYear = getDtf(resolvedLocale, resolvedTimeZone, { year: "numeric" });
+      const yearText = fmtYear.format(activeDate);
+      const count = Math.max(0, slots.length);
+      return `${l.sprint} \u2022 ${yearText} \u2022 ${t("sprints", { n: count })}`;
+    }
     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]);
+  }, [activeDate, activeView, formatters, l.sprint, l.week, range.end, range.start, resolvedLocale, resolvedTimeZone, slots.length, t]);
   const createMode = interactions?.createMode ?? "drag";
   const canCreate = !isViewOnly && (interactions?.creatable ?? false) && !!onCreateEvent;
   const [createOpen, setCreateOpen] = React32.useState(false);
@@ -10175,11 +10315,54 @@ function CalendarTimeline({
       disabled: r.disabled ?? false
     }));
   }, [resources]);
-  const slotPickerLabel = React32.useMemo(() => {
+  const formatCreateBoundaryLabel = React32.useMemo(() => {
     const timeFmt = getDtf(resolvedLocale, resolvedTimeZone, { hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
     const dayFmt = getDtf(resolvedLocale, resolvedTimeZone, { weekday: "short", month: "short", day: "numeric" });
-    return (d) => activeView === "day" ? timeFmt.format(d) : dayFmt.format(d);
-  }, [activeView, resolvedLocale, resolvedTimeZone]);
+    const yearFmt = getDtf(resolvedLocale, resolvedTimeZone, { year: "numeric" });
+    const sprintDefs = (() => {
+      if (!dueDateSprint) return [];
+      const out = [];
+      for (const v of Object.values(dueDateSprint)) {
+        const startInput = v.range_date?.start;
+        const endInput = v.range_date?.end;
+        if (startInput == null || endInput == null) continue;
+        const startRaw = toDate2(startInput);
+        const endRaw = toDate2(endInput);
+        if (Number.isNaN(startRaw.getTime()) || Number.isNaN(endRaw.getTime())) continue;
+        const startMs = startOfZonedDay(startRaw, resolvedTimeZone).getTime();
+        const endMs = startOfZonedDay(endRaw, resolvedTimeZone).getTime();
+        if (endMs <= startMs) continue;
+        out.push({ startMs, endMs, title: v.title });
+      }
+      out.sort((a, b) => a.startMs - b.startMs);
+      return out;
+    })();
+    const sprintTitleForStart = (slotStart, idx) => {
+      if (activeView !== "sprint") return null;
+      if (sprintDefs.length === 0) return null;
+      const sMs = startOfZonedDay(slotStart, resolvedTimeZone).getTime();
+      const match = sprintDefs.find((d) => sMs >= d.startMs && sMs < d.endMs) ?? sprintDefs[idx] ?? null;
+      if (!match) return null;
+      return typeof match.title === "string" || typeof match.title === "number" ? String(match.title) : null;
+    };
+    return (d, opts) => {
+      if (activeView === "day") return timeFmt.format(d);
+      if (activeView === "sprint") {
+        const y = yearFmt.format(d);
+        const idx = opts?.boundaryIdx;
+        if (typeof idx === "number") {
+          const slotStart = slotStarts[clamp4(idx, 0, Math.max(0, slotStarts.length - 1))] ?? d;
+          const dynamicTitle = sprintTitleForStart(slotStart, idx);
+          if (dynamicTitle) return `${dynamicTitle} \u2022 ${dayFmt.format(d)}, ${y}`;
+          const sprintNumber = opts?.kind === "start" ? idx + 1 : Math.min(idx + 1, Math.max(1, slotStarts.length));
+          const sprintText = `${l.sprint} ${String(sprintNumber).padStart(2, "0")}`;
+          const dateText = dayFmt.format(d);
+          return `${sprintText} \u2022 ${dateText}, ${y}`;
+        }
+      }
+      return dayFmt.format(d);
+    };
+  }, [activeView, dueDateSprint, l.sprint, resolvedLocale, resolvedTimeZone, slotStarts, slotStarts.length]);
   const openCreate = React32.useCallback(() => {
     if (!canCreate) return;
     if (activeEventSheetOpen) setEventSheetOpen(false);
@@ -10216,16 +10399,16 @@ function CalendarTimeline({
     setCreateEndIdx((prev) => Math.min(slots.length, Math.max(prev, createStartIdx + 1)));
   }, [createStartIdx, slots.length]);
   const createStartOptions = React32.useMemo(() => {
-    return slotStarts.map((d, idx) => ({ label: slotPickerLabel(d), value: idx }));
-  }, [slotStarts, slotPickerLabel]);
+    return slotStarts.map((d, idx) => ({ label: formatCreateBoundaryLabel(d, { kind: "start", boundaryIdx: idx }), value: idx }));
+  }, [formatCreateBoundaryLabel, slotStarts]);
   const createEndOptions = React32.useMemo(() => {
     const out = [];
     for (let idx = createStartIdx + 1; idx <= slotStarts.length; idx++) {
       const boundary = idx >= slotStarts.length ? range.end : slotStarts[idx];
-      out.push({ label: slotPickerLabel(boundary), value: idx });
+      out.push({ label: formatCreateBoundaryLabel(boundary, { kind: "end", boundaryIdx: idx }), value: idx });
     }
     return out;
-  }, [createStartIdx, range.end, slotPickerLabel, slotStarts]);
+  }, [createStartIdx, formatCreateBoundaryLabel, range.end, slotStarts]);
   const commitCreate = React32.useCallback(() => {
     if (!onCreateEvent) return;
     if (!createResourceId) return;
@@ -10279,6 +10462,9 @@ function CalendarTimeline({
         const stepMs = Math.trunc(Math.max(5, Math.min(240, Math.trunc(dayTimeStepMinutes))) * 6e4);
         return { start, end: new Date(start.getTime() + stepMs) };
       }
+      if (activeView === "sprint") {
+        return { start, end: addZonedDays(start, 7, resolvedTimeZone) };
+      }
       return { start, end: addZonedDays(start, 1, resolvedTimeZone) };
     },
     [activeView, dayTimeStepMinutes, resolvedTimeZone, slotStarts]
@@ -10561,7 +10747,7 @@ function CalendarTimeline({
                 className: cn(
                   sizeConfig.slotHeaderClass,
                   activeView !== "day" && s.isToday && "bg-primary/8 border-l-primary/40",
-                  activeView !== "day" && !s.isToday && s.isWeekend && "bg-destructive/8 text-destructive-foreground"
+                  activeView !== "day" && !s.isToday && s.isWeekend && "bg-muted/25"
                 ),
                 dayHeaderMarks
               },
@@ -10592,7 +10778,7 @@ function CalendarTimeline({
     {
       title,
       resourcesHeaderLabel: t("resourcesHeader"),
-      labels: { today: l.today, prev: l.prev, next: l.next, month: l.month, week: l.week, day: l.day },
+      labels: { today: l.today, prev: l.prev, next: l.next, month: l.month, week: l.week, day: l.day, sprint: l.sprint },
       newEventLabel: l.newEvent,
       newEventDisabled: isViewOnly || !canCreate || resources.length === 0,
       onNewEventClick: isViewOnly ? void 0 : openCreate,
@@ -10627,8 +10813,9 @@ function CalendarTimeline({
     "div",
     {
       className: cn(
-        "border border-border/40 rounded-2xl md:rounded-3xl overflow-hidden bg-background/95 backdrop-blur-sm",
-        "shadow-sm hover:shadow-md transition-shadow duration-300",
+        "rounded-2xl md:rounded-3xl overflow-hidden bg-card text-card-foreground backdrop-blur-sm",
+        "border border-border shadow-sm md:hover:shadow-md",
+        "transition-[transform,box-shadow,border-color,background-color] duration-300 ease-soft",
         densityClass,
         className
       ),
@@ -10761,12 +10948,19 @@ function CalendarTimeline({
                           })();
                           const resource = resourceById.get(ev.resourceId);
                           const tooltipTitle = ev.title || ev.id;
-                          const shouldCompact = activeView === "day" && dayEventStyle === "compact";
+                          const shouldCompact = activeView === "day" && dayEventStyle === "compact" || activeView === "month" && monthEventStyle === "compact";
                           const eventInsetX = 2;
                           const leftInset = left + eventInsetX;
                           const widthInset = Math.max(1, width - eventInsetX * 2);
-                          const defaultMaxVisual = clamp4(Math.round(fixedSlotWidth * 1.2), 160, 360);
-                          const maxVisual = clamp4(Math.round(dayEventMaxWidth ?? defaultMaxVisual), 80, 1200);
+                          const defaultMaxVisual = (() => {
+                            if (activeView === "month") return clamp4(Math.round(fixedSlotWidth * 2.5), 72, 360);
+                            return clamp4(Math.round(fixedSlotWidth * 1.2), 160, 360);
+                          })();
+                          const maxVisual = clamp4(
+                            Math.round(activeView === "month" ? monthEventMaxWidth ?? defaultMaxVisual : dayEventMaxWidth ?? defaultMaxVisual),
+                            48,
+                            1200
+                          );
                           const visualWidth = shouldCompact ? Math.min(widthInset, maxVisual) : widthInset;
                           const isClipped = shouldCompact && widthInset > visualWidth + 1;
                           const block = /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
@@ -10811,7 +11005,7 @@ function CalendarTimeline({
                                       "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]"
+                                      isPreview && "ring-2 ring-primary/50 ring-offset-1 ring-offset-card scale-[1.02]"
                                     ),
                                     style: {
                                       width: visualWidth,
@@ -10823,7 +11017,7 @@ function CalendarTimeline({
                                     },
                                     children: [
                                       node,
-                                      isClipped ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("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__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-xs text-muted-foreground/80", children: "\u2026" }) }) : null
+                                      isClipped ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-10 bg-linear-to-l from-card/50 to-transparent flex items-center justify-end pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-xs text-muted-foreground/80", children: "\u2026" }) }) : null
                                     ]
                                   }
                                 ),
@@ -10879,7 +11073,7 @@ function CalendarTimeline({
                             className: cn(
                               "pointer-events-none absolute z-20",
                               "h-5 w-5 rounded-full",
-                              "bg-background/80 backdrop-blur-sm",
+                              "bg-card/80 backdrop-blur-sm",
                               "border border-border/60 shadow-xs",
                               "flex items-center justify-center"
                             ),