@app-studio/web 0.9.34 → 0.9.35

package/dist/web.esm.js

@@ -31,9 +31,8 @@ import contrast from 'contrast';
 import 'core-js/modules/es.promise.js';
 import 'core-js/modules/es.array.reduce.js';
 import 'core-js/modules/es.number.to-fixed.js';
-import 'core-js/modules/es.string.pad-start.js';
 import 'core-js/modules/es.array.sort.js';
-import { dayDateStyles as dayDateStyles$1 } from 'src/components/CalendarWeek/CalendarWeek/CalendarWeek.style';
+import 'core-js/modules/es.string.pad-start.js';
 import format from 'date-fns/format';
 import 'core-js/modules/es.regexp.constructor.js';
 import { useFormikContext, getIn } from 'formik';
@@ -7837,7 +7836,6 @@ var KanbanBoardView = _ref => {
     borderRadius: 10,
     padding: "12px",
     boxShadow: "0 1px 2px 0 rgba(16, 24, 40, 0.08)",
-    opacity: draggedCardId === card.id ? 0.6 : 1,
     onDragStart: event => onCardDragStart(column.id, card.id, event),
     onDragEnd: onCardDragEnd,
     onDragOver: event => {
@@ -8110,8 +8108,8 @@ var monthTitleStyles = {
  * Month grid styles (7 columns for days)
  */
 var monthGridStyles = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(7, 1fr)',
+  display: 'flex',
+  flexDirection: 'column',
   backgroundColor: 'color.white'
 };
 /**
@@ -8141,15 +8139,32 @@ var weekdayLabelStyles = {
  */
 var dayCellStyles = {
   border: '1px solid',
-  borderColor: 'color.gray.200',
-  minHeight: 100,
-  padding: 8,
-  paddingTop: 4,
+  borderColor: 'color.gray.100',
+  minHeight: 120,
+  padding: 4,
+  paddingTop: 2,
   backgroundColor: 'color.white',
   position: 'relative',
   display: 'flex',
   flexDirection: 'column'
 };
+/**
+ * Day date styles (the circular number)
+ */
+var dayDateStyles = {
+  width: 36,
+  height: 36,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%',
+  fontSize: 13,
+  fontWeight: 400,
+  color: 'color.gray.900',
+  cursor: 'pointer',
+  transition: 'all 0.2s',
+  border: '2px solid transparent'
+};
 /**
  * Day cell from different month
  */
@@ -8284,6 +8299,9 @@ var ResizeHandle = _ref => {
     onMouseLeave: () => setIsHovered(false)
   }));
 };
+var MONTH_EVENT_ROW_HEIGHT = 22;
+var MONTH_EVENT_ROW_GAP = 4;
+var MONTH_EVENT_TOP_OFFSET = 32;
 var Calendar = _ref2 => {
   var {
     initialDate = new Date(),
@@ -8347,10 +8365,64 @@ var Calendar = _ref2 => {
       return [currentDate];
     }
   }, [currentDate, currentView, currentMonth, weekStartsOn]);
+  var monthWeeks = useMemo(() => {
+    var chunks = [];
+    for (var i = 0; i < calendarDates.length; i += 7) {
+      chunks.push(calendarDates.slice(i, i + 7));
+    }
+    return chunks;
+  }, [calendarDates]);
   // Layout events
   var {
     items: positionedEvents
   } = useMemo(() => layoutEvents(localEvents, calendarDates), [localEvents, calendarDates]);
+  var monthWeeksWithEvents = useMemo(() => {
+    return monthWeeks.map((dates, weekIndex) => {
+      var weekStartIdx = weekIndex * 7;
+      var weekEndIdx = weekStartIdx + dates.length - 1;
+      var segments = positionedEvents.filter(event => !(event.startDay > weekEndIdx || event.endDay < weekStartIdx)).map(event => {
+        var segmentStart = Math.max(event.startDay, weekStartIdx);
+        var segmentEnd = Math.min(event.endDay, weekEndIdx);
+        return Object.assign({}, event, {
+          weekIndex,
+          segmentStartDay: segmentStart - weekStartIdx,
+          segmentEndDay: segmentEnd - weekStartIdx,
+          segmentDuration: segmentEnd - segmentStart + 1,
+          segmentRow: 0
+        });
+      });
+      segments.sort((a, b) => {
+        if (a.segmentStartDay !== b.segmentStartDay) {
+          return a.segmentStartDay - b.segmentStartDay;
+        }
+        return b.segmentDuration - a.segmentDuration;
+      });
+      var rows = [];
+      segments.forEach(segment => {
+        var placed = false;
+        for (var rowIdx = 0; rowIdx < rows.length; rowIdx++) {
+          var row = rows[rowIdx];
+          var conflict = row.some(existing => !(segment.segmentStartDay > existing.segmentEndDay || segment.segmentEndDay < existing.segmentStartDay));
+          if (!conflict) {
+            segment.segmentRow = rowIdx;
+            row.push(segment);
+            placed = true;
+            break;
+          }
+        }
+        if (!placed) {
+          segment.segmentRow = rows.length;
+          rows.push([segment]);
+        }
+      });
+      return {
+        weekIndex,
+        dates,
+        segments,
+        rowCount: rows.length
+      };
+    });
+  }, [monthWeeks, positionedEvents]);
   // Get day names
   var dayNames = useMemo(() => getDayNames(weekStartsOn), [weekStartsOn]);
   // Handle navigation
@@ -8410,10 +8482,9 @@ var Calendar = _ref2 => {
       onEventAdd(start, end);
     }
   }, [onEventAdd]);
-  // Handle event drag start
-  var handleEventDragStart = useCallback((e, event) => {
-    e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setData('eventId', event.id);
+  // Handle mouse down on event (start dragging)
+  var handleEventMouseDown = useCallback((e, event) => {
+    e.preventDefault();
     dragStateRef.current = {
       isDragging: true,
       isResizing: false,
@@ -8426,52 +8497,7 @@ var Calendar = _ref2 => {
       originalEnd: event.end
     };
   }, []);
-  // Handle drag over day cell
-  var handleDragOver = useCallback((e, dayIndex) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'move';
-    setDropTargetDays([dayIndex]);
-  }, []);
-  // Handle drag leave
-  var handleDragLeave = useCallback(() => {
-    setDropTargetDays([]);
-  }, []);
-  // Handle drop on day cell
-  var handleDrop = useCallback((e, dayIndex) => {
-    e.preventDefault();
-    setDropTargetDays([]);
-    var dragState = dragStateRef.current;
-    if (!dragState.event || !dragState.originalStart || !dragState.originalEnd) return;
-    // Calculate date difference
-    var targetDate = calendarDates[dayIndex];
-    if (!targetDate) return;
-    var daysDiff = daysBetweenUTC(targetDate, dragState.originalStart.slice(0, 10));
-    // Update event dates
-    var newStart = addDateDays(dragState.originalStart.slice(0, 10), daysDiff);
-    var newEnd = addDateDays(dragState.originalEnd.slice(0, 10), daysDiff);
-    var updatedEvent = Object.assign({}, dragState.event, {
-      start: newStart,
-      end: newEnd
-    });
-    // Update local events
-    var updatedEvents = localEvents.map(ev => ev.id === dragState.event.id ? updatedEvent : ev);
-    setLocalEvents(updatedEvents);
-    // Call callback
-    onEventDrop == null || onEventDrop(updatedEvent);
-    // Reset drag state
-    dragStateRef.current = {
-      isDragging: false,
-      isResizing: false,
-      resizeDirection: null,
-      event: null,
-      startX: 0,
-      startDay: 0,
-      startDuration: 0,
-      originalStart: null,
-      originalEnd: null
-    };
-  }, [localEvents, calendarDates, onEventDrop]);
-  // Handle resize start (FIXED - using pixel-based approach like CalendarWeek)
+  // Handle resize start
   var handleResizeStart = useCallback((e, event, direction) => {
     e.preventDefault();
     e.stopPropagation();
@@ -8487,7 +8513,7 @@ var Calendar = _ref2 => {
       originalEnd: event.end
     };
   }, []);
-  // Handle mouse move during resize (FIXED - using pixel-based calculation)
+  // Handle mouse move during resize or drag
   var handleMouseMove = useCallback(e => {
     var dragState = dragStateRef.current;
     if (!dragState.event || !dragState.isDragging && !dragState.isResizing) return;
@@ -8609,54 +8635,89 @@ var Calendar = _ref2 => {
     key: index
   }, weekdayLabelStyles, views.weekdayLabel), dayName)))), /*#__PURE__*/React.createElement(View, Object.assign({
     ref: gridRef
-  }, monthGridStyles, views.monthGrid), calendarDates.map((dateISO, index) => {
-    var dateNum = getDateNumber(dateISO);
-    var isToday = dateISO === today;
-    var isSelected = dateISO === selectedDate;
-    var isCurrentMonth = isInMonth(dateISO, currentMonth);
-    var isDropTarget = dropTargetDays.includes(index);
-    var dayEvents = eventsByDate[dateISO] || [];
-    return /*#__PURE__*/React.createElement(View, Object.assign({
-      key: dateISO,
-      "data-date": dateISO
-    }, dayCellStyles, !isCurrentMonth && otherMonthDayCellStyles, isDropTarget && dropTargetStyles, {
-      onClick: () => handleDateClick(dateISO),
-      onDoubleClick: () => handleDateDoubleClick(dateISO),
-      onDragOver: e => handleDragOver(e, index),
-      onDragLeave: handleDragLeave,
-      onDrop: e => handleDrop(e, index)
-    }, views.dayCell), /*#__PURE__*/React.createElement(View, Object.assign({}, dayNumberStyles, isToday && todayDayNumberStyles, isSelected && !isToday && selectedDayNumberStyles, {
-      style: {
-        cursor: 'pointer'
-      }
-    }, views.dayNumber), dateNum), /*#__PURE__*/React.createElement(View, Object.assign({}, eventsAreaStyles, views.eventsArea), dayEvents.map(event => {
+  }, monthGridStyles, views.monthGrid), monthWeeksWithEvents.map(week => {
+    var weekStartIdx = week.weekIndex * 7;
+    var weekEndIdx = weekStartIdx + week.dates.length - 1;
+    return /*#__PURE__*/React.createElement(View, {
+      key: "week-" + week.weekIndex,
+      position: "relative"
+    }, /*#__PURE__*/React.createElement(View, {
+      display: "grid",
+      gridTemplateColumns: "repeat(7, 1fr)"
+    }, week.dates.map((dateISO, dayOffset) => {
+      var dateNum = getDateNumber(dateISO);
+      var isToday = dateISO === today;
+      var isSelected = dateISO === selectedDate;
+      var isCurrentMonth = isInMonth(dateISO, currentMonth);
+      var dayIndex = weekStartIdx + dayOffset;
+      var isDropTarget = dropTargetDays.includes(dayIndex);
+      return /*#__PURE__*/React.createElement(View, Object.assign({
+        key: dateISO,
+        "data-date": dateISO
+      }, dayCellStyles, !isCurrentMonth && otherMonthDayCellStyles, isDropTarget && dropTargetStyles, {
+        onClick: () => handleDateClick(dateISO),
+        onDoubleClick: () => handleDateDoubleClick(dateISO)
+      }, views.dayCell), /*#__PURE__*/React.createElement(View, Object.assign({}, dayNumberStyles, isToday && todayDayNumberStyles, isSelected && !isToday && selectedDayNumberStyles, {
+        style: {
+          cursor: 'pointer'
+        }
+      }, views.dayNumber), dateNum));
+    })), week.segments.length > 0 && (/*#__PURE__*/React.createElement(View, {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      top: MONTH_EVENT_TOP_OFFSET,
+      pointerEvents: "none"
+    }, week.segments.map(event => {
+      var _dragStateRef$current, _dragStateRef$current2;
       var colorConfig = EVENT_COLORS[event.color || 'blue'];
-      var isMultiDay = event.duration > 1;
-      var isFirstDay = event.isFirstDay !== false;
-      if (!isFirstDay) return null;
+      var dayWidth = 100 / week.dates.length;
+      var left = event.segmentStartDay * dayWidth;
+      var width = event.segmentDuration * dayWidth;
+      var isDragging = dragStateRef.current.isDragging && ((_dragStateRef$current = dragStateRef.current.event) == null ? void 0 : _dragStateRef$current.id) === event.id;
+      var isResizing = dragStateRef.current.isResizing && ((_dragStateRef$current2 = dragStateRef.current.event) == null ? void 0 : _dragStateRef$current2.id) === event.id;
+      var showLeftHandle = event.startDay >= weekStartIdx && event.startDay <= weekEndIdx && event.segmentStartDay === event.startDay - weekStartIdx;
+      var showRightHandle = event.endDay >= weekStartIdx && event.endDay <= weekEndIdx && event.segmentEndDay === event.endDay - weekStartIdx;
       return /*#__PURE__*/React.createElement(View, Object.assign({
-        key: event.id,
-        position: "relative"
-      }, eventStyles, {
+        key: event.id + "-" + event.weekIndex + "-" + event.segmentStartDay,
+        position: "absolute",
+        height: MONTH_EVENT_ROW_HEIGHT,
+        display: "flex",
+        alignItems: "center",
+        paddingLeft: 8,
+        paddingRight: 8,
+        borderRadius: 4,
         backgroundColor: colorConfig.background,
+        borderLeft: "3px solid",
         borderLeftColor: colorConfig.border,
         color: colorConfig.text,
-        draggable: true,
-        onDragStart: e => handleEventDragStart(e, event),
-        title: isMultiDay ? event.title + " (" + event.duration + " days)" : event.title
+        fontSize: 11,
+        fontWeight: 500,
+        overflow: "hidden",
+        cursor: isDragging ? 'grabbing' : 'grab',
+        opacity: isDragging || isResizing ? 0.7 : 1,
+        boxShadow: isDragging || isResizing ? '0 4px 12px rgba(0,0,0,0.3)' : '0 1px 2px rgba(0,0,0,0.1)',
+        transition: isDragging || isResizing ? 'none' : 'box-shadow 0.2s',
+        pointerEvents: "auto",
+        userSelect: "none",
+        left: "calc(" + left + "% + 4px)",
+        width: "calc(" + width + "% - 8px)",
+        top: event.segmentRow * (MONTH_EVENT_ROW_HEIGHT + MONTH_EVENT_ROW_GAP) + "px",
+        onMouseDown: e => handleEventMouseDown(e, event),
+        title: event.title
       }, views.event), /*#__PURE__*/React.createElement(View, {
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
         width: "100%"
-      }, event.title, isMultiDay && " (" + event.duration + "d)"), /*#__PURE__*/React.createElement(ResizeHandle, {
+      }, event.title), showLeftHandle && (/*#__PURE__*/React.createElement(ResizeHandle, {
         direction: "left",
         onMouseDown: e => handleResizeStart(e, event, 'left')
-      }), /*#__PURE__*/React.createElement(ResizeHandle, {
+      })), showRightHandle && (/*#__PURE__*/React.createElement(ResizeHandle, {
         direction: "right",
         onMouseDown: e => handleResizeStart(e, event, 'right')
-      }));
-    })));
+      })));
+    }))));
   }))));
   // Render week view
   var renderWeekView = () => (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, Object.assign({}, weekdayHeaderStyles, views.weekdayHeader), calendarDates.map((dateISO, index) => {
@@ -8670,7 +8731,7 @@ var Calendar = _ref2 => {
       alignItems: "center",
       padding: 8,
       gap: 4
-    }, views.weekdayLabel), /*#__PURE__*/React.createElement(View, Object.assign({}, weekdayLabelStyles), DAY_NAMES[dayOfWeek]), /*#__PURE__*/React.createElement(View, Object.assign({}, dayDateStyles$1, isToday && todayDayNumberStyles, {
+    }, views.weekdayLabel), /*#__PURE__*/React.createElement(View, Object.assign({}, weekdayLabelStyles), DAY_NAMES[dayOfWeek]), /*#__PURE__*/React.createElement(View, Object.assign({}, dayDateStyles, isToday && todayDayNumberStyles, {
       fontSize: 16,
       fontWeight: isToday ? 500 : 400
     }), dateNum));
@@ -8688,14 +8749,14 @@ var Calendar = _ref2 => {
     }, dayCellStyles, isDropTarget && dropTargetStyles, {
       minHeight: 400,
       onClick: () => handleDateClick(dateISO),
-      onDoubleClick: () => handleDateDoubleClick(dateISO),
-      onDragOver: e => handleDragOver(e, index),
-      onDragLeave: handleDragLeave,
-      onDrop: e => handleDrop(e, index)
+      onDoubleClick: () => handleDateDoubleClick(dateISO)
     }), /*#__PURE__*/React.createElement(View, Object.assign({}, eventsAreaStyles, views.eventsArea), dayEvents.map(event => {
+      var _dragStateRef$current3, _dragStateRef$current4;
       var colorConfig = EVENT_COLORS[event.color || 'blue'];
       var isFirstDay = event.isFirstDay !== false;
       if (!isFirstDay) return null;
+      var isDragging = dragStateRef.current.isDragging && ((_dragStateRef$current3 = dragStateRef.current.event) == null ? void 0 : _dragStateRef$current3.id) === event.id;
+      var isResizing = dragStateRef.current.isResizing && ((_dragStateRef$current4 = dragStateRef.current.event) == null ? void 0 : _dragStateRef$current4.id) === event.id;
       return /*#__PURE__*/React.createElement(View, Object.assign({
         key: event.id,
         position: "relative"
@@ -8703,8 +8764,12 @@ var Calendar = _ref2 => {
         backgroundColor: colorConfig.background,
         borderLeftColor: colorConfig.border,
         color: colorConfig.text,
-        draggable: true,
-        onDragStart: e => handleEventDragStart(e, event),
+        cursor: isDragging ? 'grabbing' : 'grab',
+        opacity: isDragging || isResizing ? 0.7 : 1,
+        boxShadow: isDragging || isResizing ? '0 4px 12px rgba(0,0,0,0.3)' : '0 1px 2px rgba(0,0,0,0.1)',
+        transition: isDragging || isResizing ? 'none' : 'box-shadow 0.2s',
+        userSelect: "none",
+        onMouseDown: e => handleEventMouseDown(e, event),
         title: event.title
       }, views.event), /*#__PURE__*/React.createElement(View, {
         overflow: "hidden",
@@ -8823,509 +8888,6 @@ var Calendar = _ref2 => {
   }, views.navButton), "\u203A")))), currentView === 'month' && renderMonthView(), currentView === 'week' && renderWeekView(), currentView === 'day' && renderDayView());
 };
 
-/**
- * Convert an ISO date string to a UTC Date object
- */
-var dateUTC$1 = iso => {
-  return new Date(iso + (iso.includes('T') ? '' : 'T00:00:00Z'));
-};
-/**
- * Calculate the number of days between two ISO date strings
- */
-var daysBetweenUTC$1 = (a, b) => {
-  return Math.floor((dateUTC$1(a).getTime() - dateUTC$1(b).getTime()) / 86400000);
-};
-/**
- * Add a number of days to an ISO date string
- */
-var addDateDays$1 = (dateISO, days) => {
-  var d = new Date(dateISO + 'T00:00:00Z');
-  d.setUTCDate(d.getUTCDate() + days);
-  return d.toISOString().slice(0, 10);
-};
-/**
- * Get the day of the week (0-6) from an ISO date string
- */
-var getDayOfWeek$1 = dateISO => {
-  return dateUTC$1(dateISO).getUTCDay();
-};
-/**
- * Get the date number (1-31) from an ISO date string
- */
-var getDateNumber$1 = dateISO => {
-  return dateUTC$1(dateISO).getUTCDate();
-};
-/**
- * Layout events with proper positioning to avoid overlaps
- * Returns positioned events and the total number of rows needed
- */
-var layoutEvents$1 = (events, weekStart) => {
-  // Convert events to positioned items with day indices
-  var items = events.map(ev => {
-    var startIdx = daysBetweenUTC$1(ev.start, weekStart);
-    var endIdx = daysBetweenUTC$1(ev.end, weekStart);
-    // Clamp to week boundaries
-    var clampedStart = Math.max(0, Math.min(6, startIdx));
-    var clampedEnd = Math.max(0, Math.min(6, endIdx));
-    // Skip if completely outside week
-    if (endIdx < 0 || startIdx > 6) return null;
-    var duration = clampedEnd - clampedStart + 1;
-    return Object.assign({}, ev, {
-      startDay: clampedStart,
-      endDay: clampedEnd,
-      duration: duration,
-      row: 0
-    });
-  }).filter(item => item !== null);
-  // Sort by start day, then by duration (longer first)
-  items.sort((a, b) => {
-    if (a.startDay !== b.startDay) return a.startDay - b.startDay;
-    return b.duration - a.duration;
-  });
-  // Assign rows using greedy algorithm to prevent overlaps
-  var rows = [];
-  items.forEach(item => {
-    var placed = false;
-    for (var i = 0; i < rows.length; i++) {
-      var row = rows[i];
-      var hasConflict = row.some(existing => !(item.startDay > existing.endDay || item.endDay < existing.startDay));
-      if (!hasConflict) {
-        row.push(item);
-        item.row = i;
-        placed = true;
-        break;
-      }
-    }
-    if (!placed) {
-      item.row = rows.length;
-      rows.push([item]);
-    }
-  });
-  return {
-    items,
-    rowCount: rows.length
-  };
-};
-/**
- * Day names array (Sunday to Saturday)
- */
-var DAY_NAMES$1 = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-/**
- * Get the date ISO string for a specific day in the week
- */
-var getDateForDay = (weekStart, dayIndex) => {
-  return addDateDays$1(weekStart, dayIndex);
-};
-
-/**
- * Event color configurations
- */
-var EVENT_COLORS$1 = {
-  blue: {
-    background: 'color.blue.50',
-    border: 'color.blue.500',
-    text: 'color.blue.700'
-  },
-  red: {
-    background: 'color.red.50',
-    border: 'color.red.500',
-    text: 'color.red.700'
-  },
-  green: {
-    background: 'color.green.50',
-    border: 'color.green.500',
-    text: 'color.green.700'
-  },
-  purple: {
-    background: 'color.purple.50',
-    border: 'color.purple.500',
-    text: 'color.purple.700'
-  },
-  orange: {
-    background: 'color.orange.50',
-    border: 'color.orange.500',
-    text: 'color.orange.700'
-  }
-};
-/**
- * Base styles for the calendar container
- */
-var containerStyles$1 = {
-  width: '100%',
-  maxWidth: 1200,
-  border: '1px solid',
-  borderColor: 'color.gray.200',
-  borderRadius: 8,
-  overflow: 'hidden',
-  backgroundColor: 'color.white'
-};
-/**
- * Individual day column styles
- */
-var dayColumnStyles = {
-  borderRight: '1px solid',
-  borderColor: 'color.gray.200',
-  display: 'flex',
-  flexDirection: 'column',
-  minHeight: 160,
-  backgroundColor: 'color.white',
-  position: 'relative'
-};
-/**
- * Day header styles
- */
-var dayHeaderStyles = {
-  padding: 8,
-  borderBottom: '1px solid',
-  borderColor: 'color.gray.200',
-  backgroundColor: 'color.gray.50',
-  minHeight: 60,
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: 4
-};
-/**
- * Day name styles (e.g., "Mon", "Tue")
- */
-var dayNameStyles = {
-  fontSize: 11,
-  fontWeight: 500,
-  color: 'color.gray.700',
-  textTransform: 'uppercase',
-  letterSpacing: 0.5
-};
-/**
- * Day date styles (the circular number)
- */
-var dayDateStyles = {
-  width: 36,
-  height: 36,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '50%',
-  fontSize: 13,
-  fontWeight: 400,
-  color: 'color.gray.900',
-  cursor: 'pointer',
-  transition: 'all 0.2s',
-  border: '2px solid transparent'
-};
-/**
- * Today date styles
- */
-var todayDateStyles = {
-  backgroundColor: 'color.blue.500',
-  color: 'color.white',
-  fontWeight: 500
-};
-/**
- * Selected date styles
- */
-var selectedDateStyles = {
-  borderColor: 'color.blue.500'
-};
-/**
- * Events area styles
- */
-var eventsAreaStyles$1 = {
-  padding: 8,
-  paddingLeft: 6,
-  paddingRight: 6,
-  flex: 1,
-  position: 'relative'
-};
-/**
- * Drop target indicator styles
- */
-var dropTargetStyles$1 = {
-  backgroundColor: 'rgba(26, 115, 232, 0.05)'
-};
-/**
- * Calculate event position styles
- */
-var getEventPositionStyles = (startDay, duration, row) => {
-  var dayWidth = 100 / 7;
-  var left = startDay * dayWidth;
-  var width = duration * dayWidth;
-  return {
-    left: "calc(" + left + "% + 6px)",
-    width: "calc(" + width + "% - 12px)",
-    top: 8 + row * 26 + "px"
-  };
-};
-
-var ResizeHandle$1 = _ref => {
-  var {
-    direction,
-    onMouseDown
-  } = _ref;
-  var [isHovered, setIsHovered] = useState(false);
-  return /*#__PURE__*/React.createElement(View, Object.assign({
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    width: 8,
-    opacity: isHovered ? 1 : 0,
-    transition: "opacity 0.2s",
-    cursor: direction === 'left' ? 'w-resize' : 'e-resize',
-    zIndex: 10,
-    backgroundColor: isHovered ? 'rgba(0,0,0,0.1)' : 'transparent'
-  }, direction === 'left' ? {
-    left: 0
-  } : {
-    right: 0
-  }, {
-    onMouseDown: onMouseDown,
-    onMouseEnter: () => setIsHovered(true),
-    onMouseLeave: () => setIsHovered(false)
-  }));
-};
-var CalendarWeek = _ref2 => {
-  var {
-    startDate,
-    events = [],
-    today = new Date().toISOString().slice(0, 10),
-    onEventDrop,
-    onEventResize,
-    onDateClick,
-    views = {},
-    width = '100%',
-    maxWidth = 1200
-  } = _ref2;
-  var {
-    getColor
-  } = useTheme();
-  var weekGridRef = useRef(null);
-  var [selectedDate, setSelectedDate] = useState(null);
-  var [localEvents, setLocalEvents] = useState(events);
-  var [dropTargetDays, setDropTargetDays] = useState([]);
-  var dragStateRef = useRef({
-    isDragging: false,
-    isResizing: false,
-    resizeDirection: null,
-    event: null,
-    startX: 0,
-    startDay: 0,
-    startDuration: 0,
-    originalStart: null,
-    originalEnd: null
-  });
-  // Update local events when props change
-  React.useEffect(() => {
-    setLocalEvents(events);
-  }, [events]);
-  // Layout events
-  var {
-    items: positionedEvents
-  } = useMemo(() => layoutEvents$1(localEvents, startDate), [localEvents, startDate]);
-  // Get day index from mouse X position
-  var getDayFromMouseX = useCallback(clientX => {
-    if (!weekGridRef.current) return 0;
-    var rect = weekGridRef.current.getBoundingClientRect();
-    var relativeX = clientX - rect.left;
-    var dayWidth = rect.width / 7;
-    return Math.max(0, Math.min(6, Math.floor(relativeX / dayWidth)));
-  }, []);
-  // Handle date click
-  var handleDateClick = useCallback(dateISO => {
-    setSelectedDate(dateISO);
-    onDateClick == null || onDateClick(dateISO);
-  }, [onDateClick]);
-  // Handle mouse down on event (start dragging)
-  var handleEventMouseDown = useCallback((e, event) => {
-    e.preventDefault();
-    dragStateRef.current = {
-      isDragging: true,
-      isResizing: false,
-      resizeDirection: null,
-      event,
-      startX: e.clientX,
-      startDay: event.startDay,
-      startDuration: event.duration,
-      originalStart: event.start,
-      originalEnd: event.end
-    };
-  }, []);
-  // Handle mouse down on resize handle
-  var handleResizeMouseDown = useCallback((e, event, direction) => {
-    e.preventDefault();
-    e.stopPropagation();
-    dragStateRef.current = {
-      isDragging: false,
-      isResizing: true,
-      resizeDirection: direction,
-      event,
-      startX: e.clientX,
-      startDay: event.startDay,
-      startDuration: event.duration,
-      originalStart: event.start,
-      originalEnd: event.end
-    };
-  }, []);
-  // Handle mouse move (dragging or resizing)
-  var handleMouseMove = useCallback(e => {
-    var dragState = dragStateRef.current;
-    if (!dragState.event || !dragState.isDragging && !dragState.isResizing) return;
-    if (!weekGridRef.current) return;
-    var rect = weekGridRef.current.getBoundingClientRect();
-    var dayWidth = rect.width / 7;
-    var deltaX = e.clientX - dragState.startX;
-    var daysDelta = Math.round(deltaX / dayWidth);
-    if (dragState.isDragging) {
-      // Calculate new position
-      var newStartDay = Math.max(0, Math.min(6, dragState.startDay + daysDelta));
-      var duration = dragState.event.duration;
-      var newEndDay = Math.min(6, newStartDay + duration - 1);
-      // Update drop target indicators
-      var targetDays = [];
-      for (var i = newStartDay; i <= newEndDay; i++) {
-        targetDays.push(i);
-      }
-      setDropTargetDays(targetDays);
-      // Update event position immediately for smooth dragging
-      var updatedEvents = localEvents.map(ev => ev.id === dragState.event.id ? Object.assign({}, ev, {
-        start: addDateDays$1(dragState.originalStart, newStartDay - dragState.startDay),
-        end: addDateDays$1(dragState.originalEnd, newStartDay - dragState.startDay)
-      }) : ev);
-      setLocalEvents(updatedEvents);
-    } else if (dragState.isResizing) {
-      // Handle resizing
-      if (dragState.resizeDirection === 'right') {
-        var newDuration = Math.max(1, dragState.startDuration + daysDelta);
-        var _newEndDay = Math.min(6, dragState.startDay + newDuration - 1);
-        var actualDuration = _newEndDay - dragState.startDay + 1;
-        var _updatedEvents = localEvents.map(ev => ev.id === dragState.event.id ? Object.assign({}, ev, {
-          end: addDateDays$1(dragState.originalStart, actualDuration - 1)
-        }) : ev);
-        setLocalEvents(_updatedEvents);
-      } else if (dragState.resizeDirection === 'left') {
-        var _newStartDay = Math.max(0, Math.min(dragState.startDay + dragState.startDuration - 1, dragState.startDay + daysDelta));
-        var _updatedEvents2 = localEvents.map(ev => ev.id === dragState.event.id ? Object.assign({}, ev, {
-          start: addDateDays$1(dragState.originalStart, _newStartDay - dragState.startDay)
-        }) : ev);
-        setLocalEvents(_updatedEvents2);
-      }
-    }
-  }, [localEvents]);
-  // Handle mouse up (finish dragging or resizing)
-  var handleMouseUp = useCallback(e => {
-    var dragState = dragStateRef.current;
-    if (!dragState.event || !dragState.isDragging && !dragState.isResizing) return;
-    setDropTargetDays([]);
-    // Find the updated event
-    var updatedEvent = localEvents.find(ev => ev.id === dragState.event.id);
-    if (!updatedEvent) return;
-    // Call appropriate callback
-    if (dragState.isDragging) {
-      onEventDrop == null || onEventDrop(updatedEvent);
-    } else if (dragState.isResizing) {
-      onEventResize == null || onEventResize(updatedEvent);
-    }
-    // Reset drag state
-    dragStateRef.current = {
-      isDragging: false,
-      isResizing: false,
-      resizeDirection: null,
-      event: null,
-      startX: 0,
-      startDay: 0,
-      startDuration: 0,
-      originalStart: null,
-      originalEnd: null
-    };
-  }, [localEvents, onEventDrop, onEventResize]);
-  // Set up global mouse event listeners
-  React.useEffect(() => {
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [handleMouseMove, handleMouseUp]);
-  return /*#__PURE__*/React.createElement(View, Object.assign({}, containerStyles$1, {
-    width: width,
-    maxWidth: maxWidth
-  }, views.container), /*#__PURE__*/React.createElement(View, Object.assign({
-    ref: weekGridRef,
-    display: "grid",
-    gridTemplateColumns: "repeat(7, 1fr)",
-    position: "relative",
-    width: "100%"
-  }, views.weekGrid), Array.from({
-    length: 7
-  }).map((_, dayIdx) => {
-    var dateISO = getDateForDay(startDate, dayIdx);
-    var dayOfWeek = getDayOfWeek$1(dateISO);
-    var dateNum = getDateNumber$1(dateISO);
-    var isToday = dateISO === today;
-    var isSelected = dateISO === selectedDate;
-    var isDropTarget = dropTargetDays.includes(dayIdx);
-    return /*#__PURE__*/React.createElement(View, Object.assign({
-      key: dayIdx
-    }, dayColumnStyles, isDropTarget && dropTargetStyles$1, {
-      borderRight: dayIdx === 6 ? 'none' : '1px solid'
-    }, views.dayColumn), /*#__PURE__*/React.createElement(View, Object.assign({}, dayHeaderStyles, views.dayHeader), /*#__PURE__*/React.createElement(View, Object.assign({}, dayNameStyles, views.dayName), DAY_NAMES$1[dayOfWeek]), /*#__PURE__*/React.createElement(View, Object.assign({}, dayDateStyles, isToday && todayDateStyles, isSelected && !isToday && selectedDateStyles, {
-      onClick: () => handleDateClick(dateISO)
-    }, views.dayDate), dateNum)), /*#__PURE__*/React.createElement(View, Object.assign({}, eventsAreaStyles$1, views.eventsArea)));
-  }), /*#__PURE__*/React.createElement(View, {
-    position: "absolute",
-    top: 60,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    pointerEvents: "none"
-  }, positionedEvents.map(event => {
-    var _dragStateRef$current, _dragStateRef$current2;
-    var colorConfig = EVENT_COLORS$1[event.color || 'blue'];
-    var positionStyles = getEventPositionStyles(event.startDay, event.duration, event.row);
-    var isDragging = dragStateRef.current.isDragging && ((_dragStateRef$current = dragStateRef.current.event) == null ? void 0 : _dragStateRef$current.id) === event.id;
-    var isResizing = dragStateRef.current.isResizing && ((_dragStateRef$current2 = dragStateRef.current.event) == null ? void 0 : _dragStateRef$current2.id) === event.id;
-    return /*#__PURE__*/React.createElement(View, Object.assign({
-      key: event.id,
-      position: "absolute",
-      height: 22,
-      display: "flex",
-      alignItems: "center",
-      padding: 8,
-      paddingLeft: 8,
-      paddingRight: 8,
-      borderRadius: 4,
-      backgroundColor: colorConfig.background,
-      borderLeft: "3px solid",
-      borderLeftColor: colorConfig.border,
-      color: colorConfig.text,
-      fontSize: 12,
-      fontWeight: 500,
-      overflow: "hidden",
-      cursor: isDragging ? 'grabbing' : 'grab',
-      opacity: isDragging || isResizing ? 0.7 : 1,
-      boxShadow: isDragging || isResizing ? '0 4px 12px rgba(0,0,0,0.3)' : '0 1px 2px rgba(0,0,0,0.1)',
-      transition: isDragging || isResizing ? 'none' : 'box-shadow 0.2s',
-      pointerEvents: "auto",
-      userSelect: "none",
-      left: positionStyles.left,
-      width: positionStyles.width,
-      top: positionStyles.top,
-      onMouseDown: e => handleEventMouseDown(e, event)
-    }, views.event), /*#__PURE__*/React.createElement(View, {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap",
-      width: "100%"
-    }, event.title), /*#__PURE__*/React.createElement(ResizeHandle$1, {
-      direction: "left",
-      onMouseDown: e => handleResizeMouseDown(e, event, 'left')
-    }), /*#__PURE__*/React.createElement(ResizeHandle$1, {
-      direction: "right",
-      onMouseDown: e => handleResizeMouseDown(e, event, 'right')
-    }));
-  }))));
-};
-
 /**
  * Custom hook to manage cookie consent state
  * @param cookieExpiration Number of days until the cookie expires
@@ -37631,5 +37193,5 @@ var AgentEval = props => {
   return /*#__PURE__*/React.createElement(AgentEvalView, Object.assign({}, props, evalState));
 };
 
-export { Accordion, AgentChat, AgentEval, AgentSession, AgentTrace, Alert, ArrowIcon, AspectRatio, AttachmentIcon, AttachmentPreview, AudioIcon, AudioInput, AudioWaveform, Avatar, Background, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, Calendar, CalendarIcon, CalendarWeek, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ColorInput, ColorPicker, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, DropdownMenu, DustBinIcon, EditIcon, EmojiPicker, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, Flow, FolderIcon, FormikChatInput, FormikCheckbox, FormikColorInput, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSlider, FormikSwitch, FormikTagInput, FormikTextArea, FormikTextField, FormikUploader, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, KanbanBoard, LikeIcon, Link, LinkedinIcon, Loader, LoadingSpinnerIcon, LocationIcon, LockIcon, LogoutIcon, MagicWandIcon, MediaPreview, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, ProgressBar, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareButton, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SpinnerIcon, StarIcon, StatusIndicator, StopIcon, SuccessIcon, Switch, Table, Tabs, TagInput, Text, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, Tree, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
+export { Accordion, AgentChat, AgentEval, AgentSession, AgentTrace, Alert, ArrowIcon, AspectRatio, AttachmentIcon, AttachmentPreview, AudioIcon, AudioInput, AudioWaveform, Avatar, Background, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, Calendar, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ColorInput, ColorPicker, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, DropdownMenu, DustBinIcon, EditIcon, EmojiPicker, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, Flow, FolderIcon, FormikChatInput, FormikCheckbox, FormikColorInput, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSlider, FormikSwitch, FormikTagInput, FormikTextArea, FormikTextField, FormikUploader, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, KanbanBoard, LikeIcon, Link, LinkedinIcon, Loader, LoadingSpinnerIcon, LocationIcon, LockIcon, LogoutIcon, MagicWandIcon, MediaPreview, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, ProgressBar, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareButton, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SpinnerIcon, StarIcon, StatusIndicator, StopIcon, SuccessIcon, Switch, Table, Tabs, TagInput, Text, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, Tree, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
 //# sourceMappingURL=web.esm.js.map