@stfrigerio/sito-template 0.1.51 → 0.1.53

package/dist/index.js

@@ -2975,7 +2975,7 @@ const LiquidButton = ({ actions, icon: Icon = lucideReact.Plus, className = '',
                                 }, onClick: () => handleAction(action), children: [jsxRuntime.jsx(action.icon, { size: 18, color: action.color }), jsxRuntime.jsx("span", { className: styles$a.actionLabel, children: action.label })] }, action.key))) })) }), jsxRuntime.jsx(framerMotion.motion.button, { type: "button", className: styles$a.button, onClick: handleToggle, animate: { rotate: expanded ? 45 : 0 }, transition: { duration: 0.2 }, "aria-label": expanded ? 'Close actions' : 'Open actions', children: jsxRuntime.jsx(Icon, { size: 24, strokeWidth: 2.5 }) })] })] }));
 };
 
-var styles$9 = {"calendar":"Calendar-module_calendar__3mIJS","loading":"Calendar-module_loading__59Z9-","loadingSpinner":"Calendar-module_loadingSpinner__7MXqV","header":"Calendar-module_header__cZHNA","navigation":"Calendar-module_navigation__PGkpY","navButton":"Calendar-module_navButton__kOe-w","title":"Calendar-module_title__oJZ7m","controls":"Calendar-module_controls__i1Z38","todayButton":"Calendar-module_todayButton__Ac9zc","viewToggle":"Calendar-module_viewToggle__Fhg2t","viewButton":"Calendar-module_viewButton__J2WY6","active":"Calendar-module_active__lIqH-","weekDays":"Calendar-module_weekDays__4J-8f","weekNumberHeader":"Calendar-module_weekNumberHeader__xhKbB","weekDay":"Calendar-module_weekDay__cg8Gr","daysGrid":"Calendar-module_daysGrid__ER0GM","weekView":"Calendar-module_weekView__bdtGs","dayCell":"Calendar-module_dayCell__TV-HR","dayNumber":"Calendar-module_dayNumber__ICH-X","today":"Calendar-module_today__eGuUU","events":"Calendar-module_events__qdbs7","event":"Calendar-module_event__Q1Zq3","eventTitle":"Calendar-module_eventTitle__XU7Wd","eventTime":"Calendar-module_eventTime__pMGEB","otherMonth":"Calendar-module_otherMonth__r6VJK","selected":"Calendar-module_selected__5e6h0","compact":"Calendar-module_compact__i0SF3","dots":"Calendar-module_dots__1Q7QR","dot":"Calendar-module_dot__tsCR1","dotMore":"Calendar-module_dotMore__emasD","weekNumber":"Calendar-module_weekNumber__nlo50","completed":"Calendar-module_completed__B-SHI","completedIcon":"Calendar-module_completedIcon__-oDZ9","moreEvents":"Calendar-module_moreEvents__TIKaT","emptyState":"Calendar-module_emptyState__2fcj7","dayView":"Calendar-module_dayView__PCIos","dayViewHeader":"Calendar-module_dayViewHeader__Gvxx2","timeColumnHeader":"Calendar-module_timeColumnHeader__B0btR","dayColumnHeader":"Calendar-module_dayColumnHeader__Rjqwg","dayViewScrollContainer":"Calendar-module_dayViewScrollContainer__84Byq","dayViewContent":"Calendar-module_dayViewContent__VU9JI","timeColumn":"Calendar-module_timeColumn__Sce-X","dayColumn":"Calendar-module_dayColumn__-j2oT","timeSlot":"Calendar-module_timeSlot__jldHq","timeLabel":"Calendar-module_timeLabel__9xLiK","hourSlot":"Calendar-module_hourSlot__z-80Q","hourLine":"Calendar-module_hourLine__fofdD","dayEvent":"Calendar-module_dayEvent__tSPFa","dayEventTitle":"Calendar-module_dayEventTitle__er03k","dayEventTime":"Calendar-module_dayEventTime__TlkeQ","currentTimeIndicator":"Calendar-module_currentTimeIndicator__GntOZ"};
+var styles$9 = {"calendar":"Calendar-module_calendar__3mIJS","loading":"Calendar-module_loading__59Z9-","loadingSpinner":"Calendar-module_loadingSpinner__7MXqV","header":"Calendar-module_header__cZHNA","navigation":"Calendar-module_navigation__PGkpY","navButton":"Calendar-module_navButton__kOe-w","title":"Calendar-module_title__oJZ7m","controls":"Calendar-module_controls__i1Z38","todayButton":"Calendar-module_todayButton__Ac9zc","viewToggle":"Calendar-module_viewToggle__Fhg2t","viewButton":"Calendar-module_viewButton__J2WY6","active":"Calendar-module_active__lIqH-","weekDays":"Calendar-module_weekDays__4J-8f","weekNumberHeader":"Calendar-module_weekNumberHeader__xhKbB","weekDay":"Calendar-module_weekDay__cg8Gr","daysGrid":"Calendar-module_daysGrid__ER0GM","weekView":"Calendar-module_weekView__bdtGs","dayCell":"Calendar-module_dayCell__TV-HR","dayNumber":"Calendar-module_dayNumber__ICH-X","today":"Calendar-module_today__eGuUU","events":"Calendar-module_events__qdbs7","event":"Calendar-module_event__Q1Zq3","eventTitle":"Calendar-module_eventTitle__XU7Wd","eventTime":"Calendar-module_eventTime__pMGEB","otherMonth":"Calendar-module_otherMonth__r6VJK","selected":"Calendar-module_selected__5e6h0","compact":"Calendar-module_compact__i0SF3","dots":"Calendar-module_dots__1Q7QR","dot":"Calendar-module_dot__tsCR1","dotMore":"Calendar-module_dotMore__emasD","weekNumber":"Calendar-module_weekNumber__nlo50","completed":"Calendar-module_completed__B-SHI","completedIcon":"Calendar-module_completedIcon__-oDZ9","moreEvents":"Calendar-module_moreEvents__TIKaT","emptyState":"Calendar-module_emptyState__2fcj7","dayView":"Calendar-module_dayView__PCIos","dayViewHeader":"Calendar-module_dayViewHeader__Gvxx2","timeColumnHeader":"Calendar-module_timeColumnHeader__B0btR","dayColumnHeader":"Calendar-module_dayColumnHeader__Rjqwg","allDayStrip":"Calendar-module_allDayStrip__VOqbV","allDayLabel":"Calendar-module_allDayLabel__2AmyT","allDayList":"Calendar-module_allDayList__6hFSb","allDayEvent":"Calendar-module_allDayEvent__SYkCs","dayViewScrollContainer":"Calendar-module_dayViewScrollContainer__84Byq","dayTimelineGrid":"Calendar-module_dayTimelineGrid__r1BNI","hourRow":"Calendar-module_hourRow__U-YN-","hourLabel":"Calendar-module_hourLabel__im84k","hourSlots":"Calendar-module_hourSlots__vbtYy","halfHourSlot":"Calendar-module_halfHourSlot__UWIri","halfHourSlotBottom":"Calendar-module_halfHourSlotBottom__aE5Mo","dayEvent":"Calendar-module_dayEvent__tSPFa","dayEventTitle":"Calendar-module_dayEventTitle__er03k","dayEventTime":"Calendar-module_dayEventTime__TlkeQ","currentTimeIndicator":"Calendar-module_currentTimeIndicator__GntOZ"};
 
 /**
  * Calendar component - A flexible, reusable calendar for displaying events
@@ -3006,30 +3006,25 @@ var styles$9 = {"calendar":"Calendar-module_calendar__3mIJS","loading":"Calendar
  *   onEventClick={handleEventClick}
  * />
  */
-function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDateClickByView, onTimeSlotClick, viewMode = 'month', initialDate = new Date(), config = {}, className = '', style = {}, loading = false, emptyState, hideHeader = false, compact = false, selectedDate }) {
+function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDateClickByView, onTimeSlotClick, onEventDrop, viewMode = 'month', initialDate = new Date(), config = {}, className = '', style = {}, loading = false, emptyState, hideHeader = false, compact = false, selectedDate }) {
     const [currentDate, setCurrentDate] = React.useState(initialDate);
     const [currentViewMode, setCurrentViewMode] = React.useState(viewMode);
     const dayViewScrollRef = React.useRef(null);
-    const { eventColors = {}, iconRenderer, maxEventsPerDay = 3, mondayStart = false, showWeekNumbers = false, dateFormat = { month: 'long', year: 'numeric' }, locale = 'en-US', dayLabels, monthNames } = config;
+    const { eventColors = {}, iconRenderer, maxEventsPerDay = 3, mondayStart = false, showWeekNumbers = false, dateFormat = { month: 'long', year: 'numeric' }, locale = 'en-US', dayLabels, monthNames, startHour = 0, endHour = 24, hourHeight = 60, halfHourSlots = false } = config;
     const defaultDayLabels = mondayStart
         ? ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
         : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
     const finalDayLabels = dayLabels || defaultDayLabels;
-    // Auto-scroll to current time in day view
+    // Auto-scroll to current time in day view (respects startHour/hourHeight config)
+    const dayViewHourHeight = config?.hourHeight ?? 60;
+    const dayViewStartHour = config?.startHour ?? 0;
     React.useEffect(() => {
         if (currentViewMode === 'day' && dayViewScrollRef.current) {
-            // Check if viewing today
             const now = new Date();
             const isToday = currentDate.toDateString() === now.toDateString();
             if (isToday) {
-                // Calculate scroll position based on current time
-                const currentHour = now.getHours();
-                const currentMinute = now.getMinutes();
-                const minutesSinceMidnight = currentHour * 60 + currentMinute;
-                // Each hour is 60px, so calculate pixel position
-                // Scroll to put current time in the upper third of the view
-                const scrollPosition = (minutesSinceMidnight / 60) * 60 - 100; // Subtract 100 to show some context above
-                // Use setTimeout to ensure DOM is ready
+                const minutesFromStart = (now.getHours() - dayViewStartHour) * 60 + now.getMinutes();
+                const scrollPosition = (minutesFromStart / 60) * dayViewHourHeight - 100;
                 setTimeout(() => {
                     if (dayViewScrollRef.current) {
                         dayViewScrollRef.current.scrollTop = Math.max(0, scrollPosition);
@@ -3037,7 +3032,7 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
                 }, 0);
             }
         }
-    }, [currentViewMode, currentDate]);
+    }, [currentViewMode, currentDate, dayViewStartHour, dayViewHourHeight]);
     const calendarData = React.useMemo(() => {
         const year = currentDate.getFullYear();
         const month = currentDate.getMonth();
@@ -3199,16 +3194,6 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
             onDateClick(date);
         }
     };
-    const handleTimeSlotClick = (hour) => {
-        if (onTimeSlotClick) {
-            // Create a date object with the current date and the clicked hour
-            const slotDate = new Date(currentDate);
-            slotDate.setHours(hour, 0, 0, 0);
-            // Format time as HH:00
-            const timeString = `${hour.toString().padStart(2, '0')}:00`;
-            onTimeSlotClick(slotDate, hour, timeString);
-        }
-    };
     const isToday = (date) => {
         const today = new Date();
         return date.toDateString() === today.toDateString();
@@ -3226,49 +3211,75 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
         return (jsxRuntime.jsx("div", { className: `${styles$9.calendar} ${styles$9.loading} ${className}`, style: style, children: jsxRuntime.jsx("div", { className: styles$9.loadingSpinner, children: "Loading..." }) }));
     }
     return (jsxRuntime.jsxs("div", { className: `${styles$9.calendar} ${compact ? styles$9.compact : ''} ${className}`, style: style, children: [!hideHeader && (jsxRuntime.jsxs("div", { className: styles$9.header, children: [jsxRuntime.jsxs("div", { className: styles$9.navigation, children: [jsxRuntime.jsx("button", { onClick: handlePrevious, className: styles$9.navButton, "aria-label": "Previous", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "15,18 9,12 15,6" }) }) }), jsxRuntime.jsx("h3", { className: styles$9.title, children: calendarData.displayTitle }), jsxRuntime.jsx("button", { onClick: handleNext, className: styles$9.navButton, "aria-label": "Next", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "9,6 15,12 9,18" }) }) })] }), jsxRuntime.jsxs("div", { className: styles$9.controls, children: [jsxRuntime.jsx("button", { onClick: handleToday, className: styles$9.todayButton, children: "Today" }), jsxRuntime.jsxs("div", { className: styles$9.viewToggle, children: [jsxRuntime.jsx("button", { className: `${styles$9.viewButton} ${currentViewMode === 'month' ? styles$9.active : ''}`, onClick: () => setCurrentViewMode('month'), children: "Month" }), jsxRuntime.jsx("button", { className: `${styles$9.viewButton} ${currentViewMode === 'week' ? styles$9.active : ''}`, onClick: () => setCurrentViewMode('week'), children: "Week" }), jsxRuntime.jsx("button", { className: `${styles$9.viewButton} ${currentViewMode === 'day' ? styles$9.active : ''}`, onClick: () => setCurrentViewMode('day'), children: "Day" })] })] })] })), currentViewMode !== 'day' && (jsxRuntime.jsxs("div", { className: styles$9.weekDays, children: [showWeekNumbers && jsxRuntime.jsx("div", { className: styles$9.weekNumberHeader, children: "Week" }), finalDayLabels.map((day) => (jsxRuntime.jsx("div", { className: styles$9.weekDay, children: day }, day)))] })), currentViewMode === 'day' ? (
-            // Day view layout
-            jsxRuntime.jsxs("div", { className: styles$9.dayView, children: [jsxRuntime.jsxs("div", { className: styles$9.dayViewHeader, children: [jsxRuntime.jsx("div", { className: styles$9.timeColumnHeader }), jsxRuntime.jsx("div", { className: styles$9.dayColumnHeader, children: currentDate.toLocaleDateString(locale, { weekday: 'short', day: 'numeric' }) })] }), jsxRuntime.jsx("div", { className: styles$9.dayViewScrollContainer, ref: dayViewScrollRef, children: jsxRuntime.jsxs("div", { className: styles$9.dayViewContent, children: [(() => {
-                                    const now = new Date();
-                                    const currentHour = now.getHours();
-                                    const currentMinute = now.getMinutes();
-                                    const minutesSinceMidnight = currentHour * 60 + currentMinute;
-                                    const topPosition = (minutesSinceMidnight / 1440) * (24 * 60); // 24 hours * 60px per hour
-                                    // Only show if viewing today
-                                    const isToday = currentDate.toDateString() === now.toDateString();
-                                    return isToday ? (jsxRuntime.jsx("div", { className: styles$9.currentTimeIndicator, style: { top: `${topPosition}px` } })) : null;
-                                })(), jsxRuntime.jsx("div", { className: styles$9.timeColumn, children: Array.from({ length: 24 }, (_, hour) => (jsxRuntime.jsx("div", { className: styles$9.timeSlot, children: jsxRuntime.jsxs("span", { className: styles$9.timeLabel, children: [hour.toString().padStart(2, '0'), ":00"] }) }, hour))) }), jsxRuntime.jsx("div", { className: styles$9.dayColumn, children: Array.from({ length: 24 }, (_, hour) => {
-                                        const hourEvents = getDayEvents(currentDate).filter(event => {
-                                            if (!event.time)
-                                                return false;
-                                            const eventHour = parseInt(event.time.split(':')[0]);
-                                            return eventHour === hour;
-                                        });
-                                        return (jsxRuntime.jsxs("div", { className: styles$9.hourSlot, onClick: (e) => {
-                                                // Only trigger if clicking on the slot itself, not on an event
-                                                if (e.target === e.currentTarget ||
-                                                    e.target.classList.contains(styles$9.hourLine)) {
-                                                    handleTimeSlotClick(hour);
-                                                }
-                                            }, style: { cursor: 'pointer' }, children: [jsxRuntime.jsx("div", { className: styles$9.hourLine }), hourEvents.map((event, eventIndex) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$9.dayEvent} ${event.status === 'completed' ? styles$9.completed : ''}`, style: {
-                                                        backgroundColor: getEventColor(event),
-                                                        color: getEventTextColor(event),
-                                                        opacity: event.status === 'completed' ? 0.7 : 1
-                                                    }, onClick: (e) => {
-                                                        e.stopPropagation();
-                                                        handleEventClick(event);
-                                                    }, initial: { opacity: 0, x: -10 }, animate: { opacity: 1, x: 0 }, transition: {
-                                                        duration: 0.2,
-                                                        delay: eventIndex * 0.05,
-                                                        ease: "easeOut"
-                                                    }, whileHover: {
-                                                        scale: 1.02,
-                                                        y: -1,
-                                                        transition: { duration: 0.1 }
-                                                    }, whileTap: {
-                                                        scale: 0.98,
-                                                        transition: { duration: 0.1 }
-                                                    }, children: [iconRenderer && iconRenderer(event), jsxRuntime.jsxs("span", { className: styles$9.dayEventTitle, children: [jsxRuntime.jsx("span", { className: styles$9.dayEventTime, children: event.time }), event.title] }), event.status === 'completed' && (jsxRuntime.jsx("svg", { className: styles$9.completedIcon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "20,6 9,17 4,12" }) }))] }, event.id)))] }, hour));
-                                    }) })] }) })] })) : (jsxRuntime.jsx("div", { className: `${styles$9.daysGrid} ${currentViewMode === 'week' ? styles$9.weekView : ''}`, children: calendarData.days.map((day, index) => {
+            // Day view layout — positioned events with duration, all-day strip, now-line
+            (() => {
+                const dayEvents = getDayEvents(currentDate);
+                const scheduled = dayEvents.filter(e => !e.allDay && e.time);
+                const allDayEvents = dayEvents.filter(e => e.allDay || !e.time);
+                const hours = Array.from({ length: endHour - startHour }, (_, i) => startHour + i);
+                const timelineHeight = hours.length * hourHeight;
+                const now = new Date();
+                const dayIsToday = currentDate.toDateString() === now.toDateString();
+                const nowMinutesFromStart = (now.getHours() - startHour) * 60 + now.getMinutes();
+                const nowOffset = (nowMinutesFromStart / 60) * hourHeight;
+                const showNow = dayIsToday && nowOffset >= 0 && nowOffset <= timelineHeight;
+                const eventMinutes = (time) => {
+                    const [h, m] = time.split(':').map(Number);
+                    return h * 60 + m;
+                };
+                const eventDuration = (event) => {
+                    if (!event.time || !event.endTime)
+                        return 30;
+                    const d = eventMinutes(event.endTime) - eventMinutes(event.time);
+                    return d > 0 ? d : 30;
+                };
+                const handleSlotClick = (hour, minute) => {
+                    if (onTimeSlotClick) {
+                        const slotDate = new Date(currentDate);
+                        slotDate.setHours(hour, minute, 0, 0);
+                        const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+                        onTimeSlotClick(slotDate, hour, timeString);
+                    }
+                };
+                const handleEventDragEnd = (event, info) => {
+                    if (!onEventDrop)
+                        return;
+                    const gridEl = dayViewScrollRef.current?.querySelector(`.${styles$9.dayTimelineGrid}`);
+                    if (!gridEl)
+                        return;
+                    const rect = gridEl.getBoundingClientRect();
+                    const relativeY = info.point.y - rect.top;
+                    const slotSize = halfHourSlots ? hourHeight / 2 : hourHeight;
+                    const slotIndex = Math.max(0, Math.floor(relativeY / slotSize));
+                    const totalSlots = halfHourSlots ? hours.length * 2 : hours.length;
+                    const clamped = Math.min(totalSlots - 1, slotIndex);
+                    const newHour = startHour + Math.floor(halfHourSlots ? clamped / 2 : clamped);
+                    const newMinute = halfHourSlots && clamped % 2 === 1 ? 30 : 0;
+                    const newDate = new Date(currentDate);
+                    newDate.setHours(newHour, newMinute, 0, 0);
+                    onEventDrop(event, newDate);
+                };
+                return (jsxRuntime.jsxs("div", { className: styles$9.dayView, children: [jsxRuntime.jsxs("div", { className: styles$9.dayViewHeader, children: [jsxRuntime.jsx("div", { className: styles$9.timeColumnHeader }), jsxRuntime.jsx("div", { className: styles$9.dayColumnHeader, children: currentDate.toLocaleDateString(locale, { weekday: 'short', day: 'numeric' }) })] }), allDayEvents.length > 0 && (jsxRuntime.jsxs("div", { className: styles$9.allDayStrip, children: [jsxRuntime.jsx("span", { className: styles$9.allDayLabel, children: "All day" }), jsxRuntime.jsx("div", { className: styles$9.allDayList, children: allDayEvents.map(event => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$9.allDayEvent} ${event.status === 'completed' ? styles$9.completed : ''}`, style: {
+                                            backgroundColor: getEventColor(event),
+                                            color: getEventTextColor(event),
+                                            opacity: event.status === 'completed' ? 0.7 : 1
+                                        }, onClick: () => handleEventClick(event), whileHover: { scale: 1.02 }, whileTap: { scale: 0.98 }, children: [iconRenderer && iconRenderer(event), jsxRuntime.jsx("span", { children: event.title })] }, event.id))) })] })), jsxRuntime.jsx("div", { className: styles$9.dayViewScrollContainer, ref: dayViewScrollRef, children: jsxRuntime.jsxs("div", { className: styles$9.dayTimelineGrid, style: { height: timelineHeight }, children: [hours.map(hour => (jsxRuntime.jsxs("div", { className: styles$9.hourRow, style: { height: hourHeight }, children: [jsxRuntime.jsxs("span", { className: styles$9.hourLabel, children: [hour.toString().padStart(2, '0'), ":00"] }), jsxRuntime.jsx("div", { className: styles$9.hourSlots, children: halfHourSlots ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$9.halfHourSlot, onClick: () => handleSlotClick(hour, 0) }), jsxRuntime.jsx("div", { className: `${styles$9.halfHourSlot} ${styles$9.halfHourSlotBottom}`, onClick: () => handleSlotClick(hour, 30) })] })) : (jsxRuntime.jsx("div", { className: styles$9.halfHourSlot, onClick: () => handleSlotClick(hour, 0) })) })] }, hour))), scheduled.map((event, eventIndex) => {
+                                        const [h, m] = event.time.split(':').map(Number);
+                                        const top = (h - startHour) * hourHeight + (m / 60) * hourHeight;
+                                        const duration = eventDuration(event);
+                                        const height = Math.max(24, (duration / 60) * hourHeight - 2);
+                                        return (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$9.dayEvent} ${event.status === 'completed' ? styles$9.completed : ''}`, style: {
+                                                top,
+                                                height,
+                                                backgroundColor: getEventColor(event),
+                                                color: getEventTextColor(event),
+                                                opacity: event.status === 'completed' ? 0.7 : 1
+                                            }, onClick: (e) => {
+                                                e.stopPropagation();
+                                                handleEventClick(event);
+                                            }, initial: { opacity: 0, x: -10 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.2, delay: eventIndex * 0.03, ease: 'easeOut' }, whileHover: { scale: 1.01, transition: { duration: 0.1 } }, whileTap: { scale: 0.98, transition: { duration: 0.1 } }, drag: onEventDrop ? 'y' : false, dragMomentum: false, onDragEnd: (_, info) => handleEventDragEnd(event, info), children: [iconRenderer && iconRenderer(event), jsxRuntime.jsxs("span", { className: styles$9.dayEventTitle, children: [jsxRuntime.jsx("span", { className: styles$9.dayEventTime, children: event.time }), event.title] }), event.status === 'completed' && (jsxRuntime.jsx("svg", { className: styles$9.completedIcon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "20,6 9,17 4,12" }) }))] }, event.id));
+                                    }), showNow && (jsxRuntime.jsx("div", { className: styles$9.currentTimeIndicator, style: { top: `${nowOffset}px` } }))] }) })] }));
+            })()) : (jsxRuntime.jsx("div", { className: `${styles$9.daysGrid} ${currentViewMode === 'week' ? styles$9.weekView : ''}`, children: calendarData.days.map((day, index) => {
                     const dayEvents = getDayEvents(day);
                     const dayIsToday = isToday(day);
                     const isInCurrentMonth = currentViewMode === 'week' || isCurrentMonth(day);