@app-studio/web 0.9.34 → 0.9.35

package/dist/web.umd.development.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.trim-end.js'), require('core-js/modules/es.parse-int.js'), require('core-js/modules/es.regexp.exec.js'), require('core-js/modules/es.string.replace.js'), require('core-js/modules/es.string.starts-with.js'), require('core-js/modules/es.string.trim.js'), require('core-js/modules/es.array-buffer.constructor.js'), require('core-js/modules/es.array-buffer.slice.js'), require('core-js/modules/es.typed-array.uint8-array.js'), require('core-js/modules/es.typed-array.fill.js'), require('core-js/modules/es.typed-array.set.js'), require('core-js/modules/es.typed-array.sort.js'), require('core-js/modules/es.typed-array.to-locale-string.js'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('react-router-dom'), require('core-js/modules/es.string.ends-with.js'), require('contrast'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.string.pad-start.js'), require('core-js/modules/es.array.sort.js'), require('src/components/CalendarWeek/CalendarWeek/CalendarWeek.style'), require('date-fns/format'), require('core-js/modules/es.regexp.constructor.js'), require('formik'), require('src/services/api'), require('core-js/modules/es.promise.finally.js'), require('core-js/modules/es.string.match.js'), require('core-js/modules/es.string.search.js'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.trim-end.js', 'core-js/modules/es.parse-int.js', 'core-js/modules/es.regexp.exec.js', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.string.starts-with.js', 'core-js/modules/es.string.trim.js', 'core-js/modules/es.array-buffer.constructor.js', 'core-js/modules/es.array-buffer.slice.js', 'core-js/modules/es.typed-array.uint8-array.js', 'core-js/modules/es.typed-array.fill.js', 'core-js/modules/es.typed-array.set.js', 'core-js/modules/es.typed-array.sort.js', 'core-js/modules/es.typed-array.to-locale-string.js', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'react-router-dom', 'core-js/modules/es.string.ends-with.js', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.string.pad-start.js', 'core-js/modules/es.array.sort.js', 'src/components/CalendarWeek/CalendarWeek/CalendarWeek.style', 'date-fns/format', 'core-js/modules/es.regexp.constructor.js', 'formik', 'src/services/api', 'core-js/modules/es.promise.finally.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js'], factory) :
-  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, global.zustand, global.reactRouterDom, null, global.contrast, null, null, null, null, null, global.CalendarWeek_style, global.format, null, global.formik, global.api));
-}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_parseFloat_js, es_string_trimEnd_js, es_parseInt_js, es_regexp_exec_js, es_string_replace_js, es_string_startsWith_js, es_string_trim_js, es_arrayBuffer_constructor_js, es_arrayBuffer_slice_js, es_typedArray_uint8Array_js, es_typedArray_fill_js, es_typedArray_set_js, es_typedArray_sort_js, es_typedArray_toLocaleString_js, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, reactRouterDom, es_string_endsWith_js, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, es_string_padStart_js, es_array_sort_js, CalendarWeek_style, format, es_regexp_constructor_js, formik, api) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.trim-end.js'), require('core-js/modules/es.parse-int.js'), require('core-js/modules/es.regexp.exec.js'), require('core-js/modules/es.string.replace.js'), require('core-js/modules/es.string.starts-with.js'), require('core-js/modules/es.string.trim.js'), require('core-js/modules/es.array-buffer.constructor.js'), require('core-js/modules/es.array-buffer.slice.js'), require('core-js/modules/es.typed-array.uint8-array.js'), require('core-js/modules/es.typed-array.fill.js'), require('core-js/modules/es.typed-array.set.js'), require('core-js/modules/es.typed-array.sort.js'), require('core-js/modules/es.typed-array.to-locale-string.js'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('react-router-dom'), require('core-js/modules/es.string.ends-with.js'), require('contrast'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.array.sort.js'), require('core-js/modules/es.string.pad-start.js'), require('date-fns/format'), require('core-js/modules/es.regexp.constructor.js'), require('formik'), require('src/services/api'), require('core-js/modules/es.promise.finally.js'), require('core-js/modules/es.string.match.js'), require('core-js/modules/es.string.search.js'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.trim-end.js', 'core-js/modules/es.parse-int.js', 'core-js/modules/es.regexp.exec.js', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.string.starts-with.js', 'core-js/modules/es.string.trim.js', 'core-js/modules/es.array-buffer.constructor.js', 'core-js/modules/es.array-buffer.slice.js', 'core-js/modules/es.typed-array.uint8-array.js', 'core-js/modules/es.typed-array.fill.js', 'core-js/modules/es.typed-array.set.js', 'core-js/modules/es.typed-array.sort.js', 'core-js/modules/es.typed-array.to-locale-string.js', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'react-router-dom', 'core-js/modules/es.string.ends-with.js', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.array.sort.js', 'core-js/modules/es.string.pad-start.js', 'date-fns/format', 'core-js/modules/es.regexp.constructor.js', 'formik', 'src/services/api', 'core-js/modules/es.promise.finally.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js'], factory) :
+  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, global.zustand, global.reactRouterDom, null, global.contrast, null, null, null, null, null, global.format, null, global.formik, global.api));
+}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_parseFloat_js, es_string_trimEnd_js, es_parseInt_js, es_regexp_exec_js, es_string_replace_js, es_string_startsWith_js, es_string_trim_js, es_arrayBuffer_constructor_js, es_arrayBuffer_slice_js, es_typedArray_uint8Array_js, es_typedArray_fill_js, es_typedArray_set_js, es_typedArray_sort_js, es_typedArray_toLocaleString_js, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, reactRouterDom, es_string_endsWith_js, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, es_array_sort_js, es_string_padStart_js, format, es_regexp_constructor_js, formik, api) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   contrast = contrast && Object.prototype.hasOwnProperty.call(contrast, 'default') ? contrast['default'] : contrast;
@@ -7801,7 +7801,6 @@
       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 => {
@@ -8074,8 +8073,8 @@
    * Month grid styles (7 columns for days)
    */
   var monthGridStyles = {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(7, 1fr)',
+    display: 'flex',
+    flexDirection: 'column',
     backgroundColor: 'color.white'
   };
   /**
@@ -8105,15 +8104,32 @@
    */
   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
    */
@@ -8248,6 +8264,9 @@
       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(),
@@ -8311,10 +8330,64 @@
         return [currentDate];
       }
     }, [currentDate, currentView, currentMonth, weekStartsOn]);
+    var monthWeeks = React.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
     } = React.useMemo(() => layoutEvents(localEvents, calendarDates), [localEvents, calendarDates]);
+    var monthWeeksWithEvents = React.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 = React.useMemo(() => getDayNames(weekStartsOn), [weekStartsOn]);
     // Handle navigation
@@ -8374,10 +8447,9 @@
         onEventAdd(start, end);
       }
     }, [onEventAdd]);
-    // Handle event drag start
-    var handleEventDragStart = React.useCallback((e, event) => {
-      e.dataTransfer.effectAllowed = 'move';
-      e.dataTransfer.setData('eventId', event.id);
+    // Handle mouse down on event (start dragging)
+    var handleEventMouseDown = React.useCallback((e, event) => {
+      e.preventDefault();
       dragStateRef.current = {
         isDragging: true,
         isResizing: false,
@@ -8390,52 +8462,7 @@
         originalEnd: event.end
       };
     }, []);
-    // Handle drag over day cell
-    var handleDragOver = React.useCallback((e, dayIndex) => {
-      e.preventDefault();
-      e.dataTransfer.dropEffect = 'move';
-      setDropTargetDays([dayIndex]);
-    }, []);
-    // Handle drag leave
-    var handleDragLeave = React.useCallback(() => {
-      setDropTargetDays([]);
-    }, []);
-    // Handle drop on day cell
-    var handleDrop = React.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 = React.useCallback((e, event, direction) => {
       e.preventDefault();
       e.stopPropagation();
@@ -8451,7 +8478,7 @@
         originalEnd: event.end
       };
     }, []);
-    // Handle mouse move during resize (FIXED - using pixel-based calculation)
+    // Handle mouse move during resize or drag
     var handleMouseMove = React.useCallback(e => {
       var dragState = dragStateRef.current;
       if (!dragState.event || !dragState.isDragging && !dragState.isResizing) return;
@@ -8573,54 +8600,89 @@
       key: index
     }, weekdayLabelStyles, views.weekdayLabel), dayName)))), /*#__PURE__*/React__default.createElement(appStudio.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__default.createElement(appStudio.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__default.createElement(appStudio.View, Object.assign({}, dayNumberStyles, isToday && todayDayNumberStyles, isSelected && !isToday && selectedDayNumberStyles, {
-        style: {
-          cursor: 'pointer'
-        }
-      }, views.dayNumber), dateNum), /*#__PURE__*/React__default.createElement(appStudio.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__default.createElement(appStudio.View, {
+        key: "week-" + week.weekIndex,
+        position: "relative"
+      }, /*#__PURE__*/React__default.createElement(appStudio.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__default.createElement(appStudio.View, Object.assign({
+          key: dateISO,
+          "data-date": dateISO
+        }, dayCellStyles, !isCurrentMonth && otherMonthDayCellStyles, isDropTarget && dropTargetStyles, {
+          onClick: () => handleDateClick(dateISO),
+          onDoubleClick: () => handleDateDoubleClick(dateISO)
+        }, views.dayCell), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, dayNumberStyles, isToday && todayDayNumberStyles, isSelected && !isToday && selectedDayNumberStyles, {
+          style: {
+            cursor: 'pointer'
+          }
+        }, views.dayNumber), dateNum));
+      })), week.segments.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.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__default.createElement(appStudio.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__default.createElement(appStudio.View, {
           overflow: "hidden",
           textOverflow: "ellipsis",
           whiteSpace: "nowrap",
           width: "100%"
-        }, event.title, isMultiDay && " (" + event.duration + "d)"), /*#__PURE__*/React__default.createElement(ResizeHandle, {
+        }, event.title), showLeftHandle && (/*#__PURE__*/React__default.createElement(ResizeHandle, {
           direction: "left",
           onMouseDown: e => handleResizeStart(e, event, 'left')
-        }), /*#__PURE__*/React__default.createElement(ResizeHandle, {
+        })), showRightHandle && (/*#__PURE__*/React__default.createElement(ResizeHandle, {
           direction: "right",
           onMouseDown: e => handleResizeStart(e, event, 'right')
-        }));
-      })));
+        })));
+      }))));
     }))));
     // Render week view
     var renderWeekView = () => (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, weekdayHeaderStyles, views.weekdayHeader), calendarDates.map((dateISO, index) => {
@@ -8634,7 +8696,7 @@
         alignItems: "center",
         padding: 8,
         gap: 4
-      }, views.weekdayLabel), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, weekdayLabelStyles), DAY_NAMES[dayOfWeek]), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CalendarWeek_style.dayDateStyles, isToday && todayDayNumberStyles, {
+      }, views.weekdayLabel), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, weekdayLabelStyles), DAY_NAMES[dayOfWeek]), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, dayDateStyles, isToday && todayDayNumberStyles, {
         fontSize: 16,
         fontWeight: isToday ? 500 : 400
       }), dateNum));
@@ -8652,14 +8714,14 @@
       }, 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__default.createElement(appStudio.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__default.createElement(appStudio.View, Object.assign({
           key: event.id,
           position: "relative"
@@ -8667,8 +8729,12 @@
           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__default.createElement(appStudio.View, {
           overflow: "hidden",
@@ -8787,509 +8853,6 @@
     }, 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] = React.useState(false);
-    return /*#__PURE__*/React__default.createElement(appStudio.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
-    } = appStudio.useTheme();
-    var weekGridRef = React.useRef(null);
-    var [selectedDate, setSelectedDate] = React.useState(null);
-    var [localEvents, setLocalEvents] = React.useState(events);
-    var [dropTargetDays, setDropTargetDays] = React.useState([]);
-    var dragStateRef = React.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__default.useEffect(() => {
-      setLocalEvents(events);
-    }, [events]);
-    // Layout events
-    var {
-      items: positionedEvents
-    } = React.useMemo(() => layoutEvents$1(localEvents, startDate), [localEvents, startDate]);
-    // Get day index from mouse X position
-    var getDayFromMouseX = React.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 = React.useCallback(dateISO => {
-      setSelectedDate(dateISO);
-      onDateClick == null || onDateClick(dateISO);
-    }, [onDateClick]);
-    // Handle mouse down on event (start dragging)
-    var handleEventMouseDown = React.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 = React.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 = React.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 = React.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__default.useEffect(() => {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-      return () => {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
-      };
-    }, [handleMouseMove, handleMouseUp]);
-    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, containerStyles$1, {
-      width: width,
-      maxWidth: maxWidth
-    }, views.container), /*#__PURE__*/React__default.createElement(appStudio.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__default.createElement(appStudio.View, Object.assign({
-        key: dayIdx
-      }, dayColumnStyles, isDropTarget && dropTargetStyles$1, {
-        borderRight: dayIdx === 6 ? 'none' : '1px solid'
-      }, views.dayColumn), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, dayHeaderStyles, views.dayHeader), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, dayNameStyles, views.dayName), DAY_NAMES$1[dayOfWeek]), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, dayDateStyles, isToday && todayDateStyles, isSelected && !isToday && selectedDateStyles, {
-        onClick: () => handleDateClick(dateISO)
-      }, views.dayDate), dateNum)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, eventsAreaStyles$1, views.eventsArea)));
-    }), /*#__PURE__*/React__default.createElement(appStudio.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__default.createElement(appStudio.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__default.createElement(appStudio.View, {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        width: "100%"
-      }, event.title), /*#__PURE__*/React__default.createElement(ResizeHandle$1, {
-        direction: "left",
-        onMouseDown: e => handleResizeMouseDown(e, event, 'left')
-      }), /*#__PURE__*/React__default.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
@@ -37618,7 +37181,6 @@
   exports.Button = Button;
   exports.Calendar = Calendar;
   exports.CalendarIcon = CalendarIcon;
-  exports.CalendarWeek = CalendarWeek;
   exports.CameraIcon = CameraIcon;
   exports.Card = Card;
   exports.Carousel = Carousel;