@app-studio/web 0.9.36 → 0.9.37

package/dist/components/Calendar/Calendar/Calendar.props.d.ts

@@ -5,6 +5,8 @@ export interface CalendarEvent {
     id: string;
     /** Event title/label */
     title: string;
+    /** Event description */
+    description?: string;
     /** Start date in ISO format (YYYY-MM-DD) or datetime (YYYY-MM-DDTHH:MM) */
     start: string;
     /** End date in ISO format (YYYY-MM-DD) or datetime (YYYY-MM-DDTHH:MM) */
@@ -63,6 +65,12 @@ export interface CalendarProps {
     onViewChange?: (view: CalendarView) => void;
     /** Callback when double-clicking to add new event */
     onEventAdd?: (start: string, end: string) => void;
+    /** Callback when an event's title changes */
+    onEventTitleChange?: (event: CalendarEvent, newTitle: string) => void;
+    /** Callback when an event's description changes */
+    onEventDescriptionChange?: (event: CalendarEvent, newDescription: string) => void;
+    /** Callback when an event is deleted */
+    onEventDelete?: (event: CalendarEvent) => void;
     /** Style overrides for various parts of the component */
     views?: CalendarViews;
     /** Width of the calendar (default: '100%') */

package/dist/components/KanbanBoard/KanbanBoard/KanbanBoard.props.d.ts

@@ -19,6 +19,11 @@ export interface KanbanBoardColumn {
 export interface KanbanBoardProps {
     columns: KanbanBoardColumn[];
     onChange?: (columns: KanbanBoardColumn[]) => void;
+    onCardMove?: (card: KanbanBoardCard, fromColumn: KanbanBoardColumn, toColumn: KanbanBoardColumn) => void;
+    onCardCreate?: (card: KanbanBoardCard, column: KanbanBoardColumn) => void;
+    onCardDelete?: (card: KanbanBoardCard, column: KanbanBoardColumn) => void;
+    onCardTitleChange?: (card: KanbanBoardCard, column: KanbanBoardColumn, newTitle: string) => void;
+    onCardDescriptionChange?: (card: KanbanBoardCard, column: KanbanBoardColumn, newDescription: string) => void;
     renderCard?: (card: KanbanBoardCard, column: KanbanBoardColumn) => React.ReactNode;
     renderColumnHeader?: (column: KanbanBoardColumn) => React.ReactNode;
     renderEmptyState?: (column: KanbanBoardColumn) => React.ReactNode;

package/dist/components/KanbanBoard/KanbanBoard/KanbanBoard.state.d.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
-import { KanbanBoardProps } from './KanbanBoard.props';
-export declare const useKanbanBoardState: ({ columns: initialColumns, onChange, }: KanbanBoardProps) => {
-    columns: import("./KanbanBoard.props").KanbanBoardColumn[];
+import { KanbanBoardCard, KanbanBoardColumn, KanbanBoardProps } from './KanbanBoard.props';
+export declare const useKanbanBoardState: ({ columns: initialColumns, onChange, onCardMove, onCardCreate: onCardCreateProp, onCardDelete: onCardDeleteProp, onCardTitleChange: onCardTitleChangeProp, onCardDescriptionChange: onCardDescriptionChangeProp, }: KanbanBoardProps) => {
+    columns: KanbanBoardColumn[];
     draggedCardId: string | null;
     hoveredColumnId: string | null;
     onCardDragStart: (columnId: string, cardId: string, event: React.DragEvent<HTMLDivElement>) => void;
@@ -10,4 +10,8 @@ export declare const useKanbanBoardState: ({ columns: initialColumns, onChange,
     onCardDragOver: (columnId: string, cardId: string | null, event: React.DragEvent<HTMLDivElement>) => void;
     onColumnDrop: (columnId: string, event: React.DragEvent<HTMLDivElement>) => void;
     onCardDrop: (columnId: string, cardId: string | null, event: React.DragEvent<HTMLDivElement>) => void;
+    onCardCreate: (card: KanbanBoardCard, column: KanbanBoardColumn) => void;
+    onCardDelete: (card: KanbanBoardCard, column: KanbanBoardColumn) => void;
+    onCardTitleChange: (card: KanbanBoardCard, column: KanbanBoardColumn, newTitle: string) => void;
+    onCardDescriptionChange: (card: KanbanBoardCard, column: KanbanBoardColumn, newDescription: string) => void;
 };

package/dist/web.cjs.development.js

@@ -7611,7 +7611,12 @@ var cloneColumns = inputColumns => inputColumns.map(column => Object.assign({},
 var useKanbanBoardState = _ref => {
   var {
     columns: initialColumns,
-    onChange
+    onChange,
+    onCardMove,
+    onCardCreate: onCardCreateProp,
+    onCardDelete: onCardDeleteProp,
+    onCardTitleChange: onCardTitleChangeProp,
+    onCardDescriptionChange: onCardDescriptionChangeProp
   } = _ref;
   var [columns, setColumns] = React.useState(initialColumns);
   var [draggedCardId, setDraggedCardId] = React.useState(null);
@@ -7688,11 +7693,16 @@ var useKanbanBoardState = _ref => {
         cardId
       };
       if (options != null && options.shouldCommit) {
+        var originalSourceColumn = prevColumns.find(c => c.id === sourceColumnId);
+        var originalTargetColumn = prevColumns.find(c => c.id === targetColumnId);
+        if (card && originalSourceColumn && originalTargetColumn) {
+          onCardMove == null || onCardMove(card, originalSourceColumn, originalTargetColumn);
+        }
         onChange == null || onChange(updatedColumns);
       }
       return updatedColumns;
     });
-  }, [onChange]);
+  }, [onChange, onCardMove]);
   var handleCardDragStart = React.useCallback((columnId, cardId, event) => {
     dragStateRef.current = {
       columnId,
@@ -7751,6 +7761,62 @@ var useKanbanBoardState = _ref => {
       shouldCommit: true
     });
   }, [applyMove, getRelativeDropPosition]);
+  var handleCardCreate = React.useCallback((card, column) => {
+    if (onCardCreateProp) {
+      onCardCreateProp(card, column);
+      return;
+    }
+    setColumns(prevColumns => {
+      var updatedColumns = prevColumns.map(col => col.id === column.id ? Object.assign({}, col, {
+        cards: [...col.cards, card]
+      }) : col);
+      onChange == null || onChange(updatedColumns);
+      return updatedColumns;
+    });
+  }, [onChange, onCardCreateProp]);
+  var handleCardDelete = React.useCallback((card, column) => {
+    if (onCardDeleteProp) {
+      onCardDeleteProp(card, column);
+      return;
+    }
+    setColumns(prevColumns => {
+      var updatedColumns = prevColumns.map(col => col.id === column.id ? Object.assign({}, col, {
+        cards: col.cards.filter(c => c.id !== card.id)
+      }) : col);
+      onChange == null || onChange(updatedColumns);
+      return updatedColumns;
+    });
+  }, [onChange, onCardDeleteProp]);
+  var handleCardTitleChange = React.useCallback((card, column, newTitle) => {
+    if (onCardTitleChangeProp) {
+      onCardTitleChangeProp(card, column, newTitle);
+      return;
+    }
+    setColumns(prevColumns => {
+      var updatedColumns = prevColumns.map(col => col.id === column.id ? Object.assign({}, col, {
+        cards: col.cards.map(c => c.id === card.id ? Object.assign({}, c, {
+          title: newTitle
+        }) : c)
+      }) : col);
+      onChange == null || onChange(updatedColumns);
+      return updatedColumns;
+    });
+  }, [onChange, onCardTitleChangeProp]);
+  var handleCardDescriptionChange = React.useCallback((card, column, newDescription) => {
+    if (onCardDescriptionChangeProp) {
+      onCardDescriptionChangeProp(card, column, newDescription);
+      return;
+    }
+    setColumns(prevColumns => {
+      var updatedColumns = prevColumns.map(col => col.id === column.id ? Object.assign({}, col, {
+        cards: col.cards.map(c => c.id === card.id ? Object.assign({}, c, {
+          description: newDescription
+        }) : c)
+      }) : col);
+      onChange == null || onChange(updatedColumns);
+      return updatedColumns;
+    });
+  }, [onChange, onCardDescriptionChangeProp]);
   return {
     columns,
     draggedCardId,
@@ -7760,7 +7826,11 @@ var useKanbanBoardState = _ref => {
     onColumnDragOver: handleColumnDragOver,
     onCardDragOver: handleCardDragOver,
     onColumnDrop: handleColumnDrop,
-    onCardDrop: handleCardDrop
+    onCardDrop: handleCardDrop,
+    onCardCreate: handleCardCreate,
+    onCardDelete: handleCardDelete,
+    onCardTitleChange: handleCardTitleChange,
+    onCardDescriptionChange: handleCardDescriptionChange
   };
 };
 
@@ -7778,18 +7848,94 @@ var KanbanBoardView = _ref => {
     onColumnDragOver,
     onCardDragOver,
     onColumnDrop,
-    onCardDrop
+    onCardDrop,
+    onCardCreate,
+    onCardDelete,
+    onCardTitleChange,
+    onCardDescriptionChange
   } = _ref;
-  var renderDefaultCard = React__default.useCallback(card => (/*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+  var [editingCardId, setEditingCardId] = React__default.useState(null);
+  var [editingDescriptionCardId, setEditingDescriptionCardId] = React__default.useState(null);
+  var [editedTitle, setEditedTitle] = React__default.useState('');
+  var [editedDescription, setEditedDescription] = React__default.useState('');
+  var handleTitleClick = React__default.useCallback(card => {
+    setEditingCardId(card.id);
+    setEditedTitle(card.title);
+  }, []);
+  var handleDescriptionClick = React__default.useCallback(card => {
+    setEditingDescriptionCardId(card.id);
+    setEditedDescription(card.description || '');
+  }, []);
+  var handleTitleChange = React__default.useCallback(event => {
+    setEditedTitle(event.target.value);
+  }, []);
+  var handleDescriptionChange = React__default.useCallback(event => {
+    setEditedDescription(event.target.value);
+  }, []);
+  var handleTitleBlur = React__default.useCallback((card, column) => {
+    if (editingCardId === card.id) {
+      onCardTitleChange == null || onCardTitleChange(card, column, editedTitle);
+      setEditingCardId(null);
+    }
+  }, [editingCardId, editedTitle, onCardTitleChange]);
+  var handleDescriptionBlur = React__default.useCallback((card, column) => {
+    if (editingDescriptionCardId === card.id) {
+      onCardDescriptionChange == null || onCardDescriptionChange(card, column, editedDescription);
+      setEditingDescriptionCardId(null);
+    }
+  }, [editingDescriptionCardId, editedDescription, onCardDescriptionChange]);
+  var handleTitleKeyDown = React__default.useCallback((event, card, column) => {
+    if (event.key === 'Enter') {
+      handleTitleBlur(card, column);
+    }
+  }, [handleTitleBlur]);
+  var handleDescriptionKeyDown = React__default.useCallback((event, card, column) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleDescriptionBlur(card, column);
+    }
+  }, [handleDescriptionBlur]);
+  var renderDefaultCard = React__default.useCallback((card, column) => (/*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
     gap: 4,
     alignItems: "flex-start"
-  }, views == null ? void 0 : views.cardContent), /*#__PURE__*/React__default.createElement(Text, {
+  }, views == null ? void 0 : views.cardContent), editingCardId === card.id ? (/*#__PURE__*/React__default.createElement("input", {
+    type: "text",
+    value: editedTitle,
+    onChange: handleTitleChange,
+    onBlur: () => handleTitleBlur(card, column),
+    onKeyDown: event => handleTitleKeyDown(event, card, column),
+    autoFocus: true,
+    style: {
+      border: '1px solid #d0d5dd',
+      borderRadius: '4px',
+      padding: '4px 8px',
+      fontSize: '14px',
+      fontWeight: '600',
+      width: '100%'
+    }
+  })) : (/*#__PURE__*/React__default.createElement(Text, {
     weight: "semiBold",
-    size: "sm"
-  }, card.title), card.description && (/*#__PURE__*/React__default.createElement(Text, {
     size: "sm",
-    color: "#475467"
-  }, card.description)))), [views == null ? void 0 : views.cardContent]);
+    onClick: () => handleTitleClick(card)
+  }, card.title)), card.description && (editingDescriptionCardId === card.id ? (/*#__PURE__*/React__default.createElement("textarea", {
+    value: editedDescription,
+    onChange: handleDescriptionChange,
+    onBlur: () => handleDescriptionBlur(card, column),
+    onKeyDown: event => handleDescriptionKeyDown(event, card, column),
+    autoFocus: true,
+    style: {
+      border: '1px solid #d0d5dd',
+      borderRadius: '4px',
+      padding: '4px 8px',
+      fontSize: '14px',
+      width: '100%',
+      minHeight: '60px'
+    }
+  })) : (/*#__PURE__*/React__default.createElement(Text, {
+    size: "sm",
+    color: "#475467",
+    onClick: () => handleDescriptionClick(card)
+  }, card.description))))), [views == null ? void 0 : views.cardContent, editingCardId, editedTitle, editingDescriptionCardId, editedDescription, handleTitleBlur, handleTitleChange, handleTitleClick, handleTitleKeyDown, handleDescriptionBlur, handleDescriptionChange, handleDescriptionClick, handleDescriptionKeyDown]);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     display: "flex",
     alignItems: "flex-start",
@@ -7813,27 +7959,21 @@ var KanbanBoardView = _ref => {
   }, views == null ? void 0 : views.columnHeader), renderColumnHeader ? renderColumnHeader(column) : (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     weight: "semiBold",
     size: "md"
-  }, views == null ? void 0 : views.columnTitle), column.title))), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+  }, views == null ? void 0 : views.columnTitle), column.title)), /*#__PURE__*/React__default.createElement(appStudio.View, {
+    onClick: () => onCardCreate == null ? void 0 : onCardCreate({
+      id: "new-card-" + Date.now(),
+      title: 'Nouvelle carte'
+    }, column)
+  }, /*#__PURE__*/React__default.createElement(PlusIcon, {
+    widthHeight: 16
+  }))), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
     gap: 12,
     minHeight: 40,
     onDragOver: event => onColumnDragOver(column.id, event),
     onDrop: event => onColumnDrop(column.id, event),
     opacity: draggedCardId && hoveredColumnId === column.id ? 0.9 : undefined,
     transition: "all 0.15s ease-in-out"
-  }, views == null ? void 0 : views.columnBody), column.cards.length === 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    padding: 12,
-    borderWidth: "1px",
-    borderStyle: "dashed",
-    borderColor: "#d0d5dd",
-    borderRadius: 8,
-    backgroundColor: "rgba(255, 255, 255, 0.6)",
-    textAlign: "center",
-    color: "#667085",
-    fontSize: "14px"
-  }, views == null ? void 0 : views.emptyState), renderEmptyState ? renderEmptyState(column) : (/*#__PURE__*/React__default.createElement(Text, {
-    size: "sm",
-    color: "#667085"
-  }, "Drop cards here")))), column.cards.map(card => (/*#__PURE__*/React__default.createElement(appStudio.View, {
+  }, views == null ? void 0 : views.columnBody), column.cards.map(card => (/*#__PURE__*/React__default.createElement(appStudio.View, {
     key: card.id,
     position: "relative"
   }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
@@ -7853,7 +7993,35 @@ var KanbanBoardView = _ref => {
       event.stopPropagation();
       onCardDrop(column.id, card.id, event);
     }
-  }, views == null ? void 0 : views.card), renderCard ? renderCard(card, column) : renderDefaultCard(card)))))), column.footer && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.columnFooter), column.footer))))));
+  }, views == null ? void 0 : views.card), /*#__PURE__*/React__default.createElement(appStudio.View, {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+    flexGrow: 1
+  }, renderCard ? renderCard(card, column) : renderDefaultCard(card, column)), /*#__PURE__*/React__default.createElement(appStudio.View, {
+    onClick: () => onCardDelete == null ? void 0 : onCardDelete(card, column)
+  }, /*#__PURE__*/React__default.createElement(TrashIcon, {
+    widthHeight: 16
+  }))))))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    padding: 12,
+    borderWidth: "1px",
+    borderStyle: "dashed",
+    borderColor: "#d0d5dd",
+    borderRadius: 8,
+    backgroundColor: "rgba(255, 255, 255, 0.6)",
+    textAlign: "center",
+    color: "#667085",
+    fontSize: "14px"
+  }, views == null ? void 0 : views.emptyState, {
+    onClick: () => onCardCreate == null ? void 0 : onCardCreate({
+      id: "new-card-" + Date.now(),
+      title: 'Nouvelle carte'
+    }, column)
+  }), renderEmptyState ? renderEmptyState(column) : (/*#__PURE__*/React__default.createElement(Text, {
+    size: "sm",
+    color: "#667085"
+  }, "Create a new card")))), column.footer && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.columnFooter), column.footer))))));
 };
 
 var KanbanBoardComponent = props => {
@@ -8280,11 +8448,111 @@ var iconButtonStyles = {
   border: 'none'
 };
 
-var ResizeHandle = _ref => {
+var EventContent = _ref => {
+  var {
+    event,
+    onTitleChange,
+    onDescriptionChange,
+    onEventDelete
+  } = _ref;
+  var [isEditingTitle, setIsEditingTitle] = React.useState(false);
+  var [editedTitle, setEditedTitle] = React.useState(event.title);
+  var [isEditingDescription, setIsEditingDescription] = React.useState(false);
+  var [editedDescription, setEditedDescription] = React.useState(event.description || '');
+  var handleTitleClick = React.useCallback(() => {
+    setIsEditingTitle(true);
+    setEditedTitle(event.title);
+  }, [event.title]);
+  var handleDescriptionClick = React.useCallback(() => {
+    setIsEditingDescription(true);
+    setEditedDescription(event.description || '');
+  }, [event.description]);
+  var handleTitleChange = React.useCallback(e => {
+    setEditedTitle(e.target.value);
+  }, []);
+  var handleDescriptionChange = React.useCallback(e => {
+    setEditedDescription(e.target.value);
+  }, []);
+  var handleTitleBlur = React.useCallback(() => {
+    if (isEditingTitle) {
+      onTitleChange(event, editedTitle);
+      setIsEditingTitle(false);
+    }
+  }, [isEditingTitle, onTitleChange, event, editedTitle]);
+  var handleDescriptionBlur = React.useCallback(() => {
+    if (isEditingDescription) {
+      onDescriptionChange(event, editedDescription);
+      setIsEditingDescription(false);
+    }
+  }, [isEditingDescription, onDescriptionChange, event, editedDescription]);
+  var handleTitleKeyDown = React.useCallback(e => {
+    if (e.key === 'Enter') {
+      handleTitleBlur();
+    }
+  }, [handleTitleBlur]);
+  var handleDescriptionKeyDown = React.useCallback(e => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleDescriptionBlur();
+    }
+  }, [handleDescriptionBlur]);
+  return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    width: "100%",
+    justifyContent: "space-between"
+  }, isEditingTitle ? (/*#__PURE__*/React__default.createElement("input", {
+    type: "text",
+    value: editedTitle,
+    onChange: handleTitleChange,
+    onBlur: handleTitleBlur,
+    onKeyDown: handleTitleKeyDown,
+    autoFocus: true,
+    style: {
+      border: '1px solid #d0d5dd',
+      borderRadius: '4px',
+      padding: '2px 4px',
+      fontSize: '11px',
+      fontWeight: '500',
+      width: '100%'
+    }
+  })) : (/*#__PURE__*/React__default.createElement(appStudio.Text, {
+    fontSize: 11,
+    fontWeight: 500,
+    onClick: handleTitleClick
+  }, event.title)), event.description && (isEditingDescription ? (/*#__PURE__*/React__default.createElement("textarea", {
+    value: editedDescription,
+    onChange: handleDescriptionChange,
+    onBlur: handleDescriptionBlur,
+    onKeyDown: handleDescriptionKeyDown,
+    autoFocus: true,
+    style: {
+      border: '1px solid #d0d5dd',
+      borderRadius: '4px',
+      padding: '2px 4px',
+      fontSize: '11px',
+      width: '100%',
+      minHeight: '40px',
+      marginTop: '4px'
+    }
+  })) : (/*#__PURE__*/React__default.createElement(appStudio.Text, {
+    fontSize: 11,
+    color: "color.gray.600",
+    onClick: handleDescriptionClick
+  }, event.description))), /*#__PURE__*/React__default.createElement(appStudio.Center, {
+    onClick: () => onEventDelete(event),
+    cursor: "pointer",
+    marginLeft: 4
+  }, /*#__PURE__*/React__default.createElement(TrashIcon, {
+    widthHeight: 12
+  })));
+};
+var ResizeHandle = _ref2 => {
   var {
     direction,
     onMouseDown
-  } = _ref;
+  } = _ref2;
   var [isHovered, setIsHovered] = React.useState(false);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     position: "absolute",
@@ -8309,7 +8577,7 @@ var ResizeHandle = _ref => {
 var MONTH_EVENT_ROW_HEIGHT = 22;
 var MONTH_EVENT_ROW_GAP = 4;
 var MONTH_EVENT_TOP_OFFSET = 32;
-var Calendar = _ref2 => {
+var Calendar = _ref3 => {
   var {
     initialDate = new Date(),
     initialView = 'month',
@@ -8321,11 +8589,14 @@ var Calendar = _ref2 => {
     onDateChange,
     onViewChange,
     onEventAdd,
+    onEventTitleChange,
+    onEventDescriptionChange,
+    onEventDelete,
     views = {},
     width = '100%',
     maxWidth = 1200,
     weekStartsOn = 0
-  } = _ref2;
+  } = _ref3;
   var {
     getColor
   } = appStudio.useTheme();
@@ -8352,6 +8623,31 @@ var Calendar = _ref2 => {
   React__default.useEffect(() => {
     setLocalEvents(events);
   }, [events]);
+  var handleEventTitleChange = React.useCallback((event, newTitle) => {
+    if (onEventTitleChange) {
+      onEventTitleChange(event, newTitle);
+      return;
+    }
+    setLocalEvents(prevEvents => prevEvents.map(ev => ev.id === event.id ? Object.assign({}, ev, {
+      title: newTitle
+    }) : ev));
+  }, [onEventTitleChange]);
+  var handleEventDescriptionChange = React.useCallback((event, newDescription) => {
+    if (onEventDescriptionChange) {
+      onEventDescriptionChange(event, newDescription);
+      return;
+    }
+    setLocalEvents(prevEvents => prevEvents.map(ev => ev.id === event.id ? Object.assign({}, ev, {
+      description: newDescription
+    }) : ev));
+  }, [onEventDescriptionChange]);
+  var handleEventDelete = React.useCallback(event => {
+    if (onEventDelete) {
+      onEventDelete(event);
+      return;
+    }
+    setLocalEvents(prevEvents => prevEvents.filter(ev => ev.id !== event.id));
+  }, [onEventDelete]);
   // Get the month start for current date
   var currentMonth = React.useMemo(() => getFirstDayOfMonth(currentDate), [currentDate]);
   // Generate calendar dates based on view
@@ -8712,12 +9008,12 @@ var Calendar = _ref2 => {
         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), showLeftHandle && (/*#__PURE__*/React__default.createElement(ResizeHandle, {
+      }, views.event), /*#__PURE__*/React__default.createElement(EventContent, {
+        event: event,
+        onTitleChange: handleEventTitleChange,
+        onDescriptionChange: handleEventDescriptionChange,
+        onEventDelete: handleEventDelete
+      }), showLeftHandle && (/*#__PURE__*/React__default.createElement(ResizeHandle, {
         direction: "left",
         onMouseDown: e => handleResizeStart(e, event, 'left')
       })), showRightHandle && (/*#__PURE__*/React__default.createElement(ResizeHandle, {
@@ -8778,12 +9074,12 @@ var Calendar = _ref2 => {
         userSelect: "none",
         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), /*#__PURE__*/React__default.createElement(ResizeHandle, {
+      }, views.event), /*#__PURE__*/React__default.createElement(EventContent, {
+        event: event,
+        onTitleChange: handleEventTitleChange,
+        onDescriptionChange: handleEventDescriptionChange,
+        onEventDelete: handleEventDelete
+      }), /*#__PURE__*/React__default.createElement(ResizeHandle, {
         direction: "left",
         onMouseDown: e => handleResizeStart(e, event, 'left')
       }), /*#__PURE__*/React__default.createElement(ResizeHandle, {
@@ -8830,7 +9126,7 @@ var Calendar = _ref2 => {
       }, views.timeSlot), dayEvents.filter(event => {
         // Simple check if event starts in this hour
         if (event.start.includes('T')) {
-          var eventHour = parseInt(event.start.split('T')[1].split(':')[0]);
+          var eventHour = parseInt(event.start.split('T').split(':'));
           return eventHour === hour;
         }
         return false;
@@ -8843,7 +9139,12 @@ var Calendar = _ref2 => {
           borderLeftColor: colorConfig.border,
           color: colorConfig.text,
           marginBottom: 4
-        }, views.event), event.title);
+        }, views.event), /*#__PURE__*/React__default.createElement(EventContent, {
+          event: event,
+          onTitleChange: handleEventTitleChange,
+          onDescriptionChange: handleEventDescriptionChange,
+          onEventDelete: handleEventDelete
+        }));
       })));
     }));
   };