@dayflow/plugin-sidebar 1.0.0 → 1.0.2

package/README.md

@@ -16,17 +16,17 @@ views, and plugin architecture.
 
 | Monthly                                 | Weekly                                 |
 | --------------------------------------- | -------------------------------------- |
-| ![image](./assets/images/MonthView.png) | ![image](./assets/images/WeekView.png) |
+| ![image](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/MonthView.png) | ![image](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/WeekView.png) |
 
 | Daily                                 | Event Stack Level                        |
 | ------------------------------------- | ---------------------------------------- |
-| ![image](./assets/images/DayView.png) | ![image](./assets/images/stackLevel.png) |
+| ![image](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/DayView.png) | ![image](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/stackLevel.png) |
 
 ### Default Panel (with multiple Event Detail Panel options available)
 
 | Detail Popup                        | Detail Dialog                        |
 | ----------------------------------- | ------------------------------------ |
-| ![image](./assets/images/popup.png) | ![image](./assets/images/dialog.png) |
+| ![image](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/popup.png) | ![image](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/dialog.png) |
 
 ### Easy to resize and drag
 

package/dist/index.d.ts

@@ -13,14 +13,14 @@ interface CalendarSidebarRenderProps {
     editingCalendarId?: string | null;
     setEditingCalendarId?: (id: string | null) => void;
     onCreateCalendar?: () => void;
-    colorPickerMode?: 'blossom' | 'default';
+    colorPickerMode?: 'default' | 'custom';
 }
 interface SidebarPluginConfig {
     width?: number | string;
     miniWidth?: string;
     initialCollapsed?: boolean;
     createCalendarMode?: 'inline' | 'modal';
-    colorPickerMode?: 'blossom' | 'default';
+    colorPickerMode?: 'default' | 'custom';
     render?: (props: CalendarSidebarRenderProps) => TNode;
     renderCalendarContextMenu?: (calendar: CalendarType, onClose: () => void) => TNode;
     renderCreateCalendarDialog?: (props: CreateCalendarDialogProps) => TNode;

package/dist/index.esm.js

@@ -49,7 +49,7 @@ const getCalendarInitials = (calendar) => {
     const name = calendar.name || calendar.id;
     return name.charAt(0).toUpperCase();
 };
-const CalendarList = ({ calendars, onToggleVisibility, onReorder, onRename, onContextMenu, onColorClick, editingId, setEditingId, activeContextMenuCalendarId, isDraggable = true, isEditable = true, }) => {
+const CalendarList = ({ calendars, onToggleVisibility, onReorder, onRename, onContextMenu, editingId, setEditingId, activeContextMenuCalendarId, isDraggable = true, isEditable = true, }) => {
     const [editingName, setEditingName] = useState('');
     const editInputRef = useRef(null);
     const isProcessedRef = useRef(false);
@@ -182,12 +182,7 @@ const CalendarList = ({ calendars, onToggleVisibility, onReorder, onRename, onCo
                     editingId === calendar.id;
                 return (u("li", { className: "df-calendar-list-item relative", onDragOver: e => handleDragOver(e, calendar.id), onDragLeave: handleDragLeave, onDrop: () => handleDrop(calendar), onContextMenu: e => onContextMenu(e, calendar.id), children: [isDropTarget && dropTarget.position === 'top' && (u("div", { className: "absolute top-0 left-0 right-0 h-0.5 bg-primary z-10 pointer-events-none" })), u("div", { draggable: isDraggable && !editingId, onDragStart: e => handleDragStart(calendar, e), onDragEnd: handleDragEnd, className: `rounded transition ${draggedCalendarId === calendar.id ? 'opacity-50' : ''} ${isDraggable ? 'cursor-grab' : 'cursor-default'}`, children: u("div", { className: `group flex items-center rounded px-2 py-2 transition hover:bg-gray-100 dark:hover:bg-slate-800 ${isActive ? 'bg-gray-100 dark:bg-slate-800' : ''}`, title: calendar.name, children: [u("input", { type: "checkbox", className: "calendar-checkbox cursor-pointer shrink-0", style: {
                                             '--checkbox-color': calendarColor,
-                                        }, checked: isVisible, onChange: event => onToggleVisibility(calendar.id, event.target.checked), onClick: e => {
-                                            if (onColorClick && isVisible) {
-                                                e.preventDefault();
-                                                onColorClick(e, calendar.id);
-                                            }
-                                        } }), showIcon && (u("span", { className: "ml-2 flex h-5 w-5 shrink-0 items-center justify-center text-xs font-semibold text-white", "aria-hidden": "true", children: getCalendarInitials(calendar) })), editingId === calendar.id ? (u("input", { ref: editInputRef, type: "text", value: editingName, onChange: e => setEditingName(e.target.value), onBlur: handleRenameSave, onKeyDown: handleRenameKeyDown, className: "ml-2 flex-1 min-w-0 h-5 rounded bg-white px-0 py-0 text-sm text-gray-900 focus:outline-none dark:bg-slate-700 dark:text-gray-100", onClick: e => e.stopPropagation() })) : (u("span", { className: "flex-1 pl-1 truncate text-sm text-gray-700 group-hover:text-gray-900 dark:text-gray-200 dark:group-hover:text-white ml-2", onDblClick: () => handleRenameStart(calendar), children: calendar.name || calendar.id }))] }) }), isDropTarget && dropTarget.position === 'bottom' && (u("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary z-10 pointer-events-none" }))] }, calendar.id));
+                                        }, checked: isVisible, onChange: event => onToggleVisibility(calendar.id, event.target.checked) }), showIcon && (u("span", { className: "ml-2 flex h-5 w-5 shrink-0 items-center justify-center text-xs font-semibold text-white", "aria-hidden": "true", children: getCalendarInitials(calendar) })), editingId === calendar.id ? (u("input", { ref: editInputRef, type: "text", value: editingName, onChange: e => setEditingName(e.target.value), onBlur: handleRenameSave, onKeyDown: handleRenameKeyDown, className: "ml-2 flex-1 min-w-0 h-5 rounded bg-white px-0 py-0 text-sm text-gray-900 focus:outline-none dark:bg-slate-700 dark:text-gray-100", onClick: e => e.stopPropagation() })) : (u("span", { className: "flex-1 pl-1 truncate text-sm text-gray-700 group-hover:text-gray-900 dark:text-gray-200 dark:group-hover:text-white ml-2", onDblClick: () => handleRenameStart(calendar), children: calendar.name || calendar.id }))] }) }), isDropTarget && dropTarget.position === 'bottom' && (u("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary z-10 pointer-events-none" }))] }, calendar.id));
             }) }) }));
 };
 
@@ -357,29 +352,6 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
     const handleCloseSidebarContextMenu = useCallback(() => {
         setSidebarContextMenu(null);
     }, []);
-    const handleColorClick = useCallback((e, calendarId) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const calendar = calendars.find(c => c.id === calendarId);
-        if (calendar) {
-            const { l, h } = hexToHsl(calendar.colors.lineColor);
-            const sliderValue = lightnessToSliderValue(l);
-            const rect = e.currentTarget.getBoundingClientRect();
-            setCustomColorPicker({
-                x: rect.left + rect.width / 2,
-                y: rect.top + rect.height / 2,
-                calendarId: calendarId,
-                initialColor: {
-                    hue: h,
-                    saturation: sliderValue,
-                    lightness: l,
-                    alpha: 100,
-                    layer: 'outer',
-                },
-                currentColor: calendar.colors.lineColor,
-            });
-        }
-    }, [calendars]);
     const handleDeleteCalendar = useCallback(() => {
         if (contextMenu) {
             setDeleteState({ calendarId: contextMenu.calendarId, step: 'initial' });
@@ -552,9 +524,9 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
     const isDraggable = readOnlyConfig.draggable !== false;
     return (u("div", { className: sidebarContainer, onContextMenu: isEditable ? handleSidebarContextMenu : undefined, children: [u(SidebarHeader, { isCollapsed: isCollapsed, onCollapseToggle: () => setCollapsed(!isCollapsed) }), !isCollapsed ? (u(Fragment, { children: [u(CalendarList, { calendars: calendars, onToggleVisibility: toggleCalendarVisibility, onReorder: isDraggable ? app.reorderCalendars : () => { }, onRename: isEditable
                             ? (id, newName) => app.updateCalendar(id, { name: newName })
-                            : () => { }, onContextMenu: isEditable ? handleContextMenu : () => { }, onColorClick: isEditable ? handleColorClick : undefined, editingId: editingCalendarId, setEditingId: setEditingCalendarId, activeContextMenuCalendarId: contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.calendarId, isDraggable: isDraggable, isEditable: isEditable }), u("div", { className: "border-t border-gray-200 dark:border-slate-800", children: u(MiniCalendar, { visibleMonth: app.getVisibleMonth(), currentDate: app.getCurrentDate(), showHeader: true, onMonthChange: handleMonthChange, onDateSelect: date => app.setCurrentDate(date) }) })] })) : (u(CalendarList, { calendars: calendars, onToggleVisibility: toggleCalendarVisibility, onReorder: isDraggable ? app.reorderCalendars : () => { }, onRename: isEditable
+                            : () => { }, onContextMenu: isEditable ? handleContextMenu : () => { }, editingId: editingCalendarId, setEditingId: setEditingCalendarId, activeContextMenuCalendarId: contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.calendarId, isDraggable: isDraggable, isEditable: isEditable }), u("div", { className: "border-t border-gray-200 dark:border-slate-800", children: u(MiniCalendar, { visibleMonth: app.getVisibleMonth(), currentDate: app.getCurrentDate(), showHeader: true, onMonthChange: handleMonthChange, onDateSelect: date => app.setCurrentDate(date) }) })] })) : (u(CalendarList, { calendars: calendars, onToggleVisibility: toggleCalendarVisibility, onReorder: isDraggable ? app.reorderCalendars : () => { }, onRename: isEditable
                     ? (id, newName) => app.updateCalendar(id, { name: newName })
-                    : () => { }, onContextMenu: isEditable ? handleContextMenu : () => { }, onColorClick: isEditable ? handleColorClick : undefined, editingId: editingCalendarId, setEditingId: setEditingCalendarId, activeContextMenuCalendarId: contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.calendarId, isDraggable: isDraggable, isEditable: isEditable })), contextMenu && (u(ContextMenu, { ref: contextMenuRef, x: contextMenu.x, y: contextMenu.y, onClose: handleCloseContextMenu, className: "w-64 p-2", children: u(ContentSlot, { generatorName: "calendarContextMenu", generatorArgs: {
+                    : () => { }, onContextMenu: isEditable ? handleContextMenu : () => { }, editingId: editingCalendarId, setEditingId: setEditingCalendarId, activeContextMenuCalendarId: contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.calendarId, isDraggable: isDraggable, isEditable: isEditable })), contextMenu && (u(ContextMenu, { ref: contextMenuRef, x: contextMenu.x, y: contextMenu.y, onClose: handleCloseContextMenu, className: "w-64 p-2", children: u(ContentSlot, { generatorName: "calendarContextMenu", generatorArgs: {
                         calendar: calendars.find(c => c.id === contextMenu.calendarId),
                         onClose: handleCloseContextMenu,
                     }, defaultContent: renderCalendarContextMenu ? (renderCalendarContextMenu(calendars.find(c => c.id === contextMenu.calendarId), handleCloseContextMenu)) : (u(Fragment, { children: [u(ContextMenuLabel, { children: t('calendarOptions') }), u(MergeMenuItem, { calendars: calendars, currentCalendarId: contextMenu.calendarId, onMergeSelect: handleMergeSelect }), u(ContextMenuItem, { onClick: handleDeleteCalendar, children: t('delete') }), u(ContextMenuItem, { onClick: handleExportCalendar, children: t('exportCalendar') || 'Export Calendar' }), u(ContextMenuSeparator, {}), u(ContextMenuColorPicker, { selectedColor: (_d = calendars.find(c => c.id === contextMenu.calendarId)) === null || _d === void 0 ? void 0 : _d.colors.lineColor, onSelect: handleColorSelect, onCustomColor: handleCustomColor })] })) }) })), sidebarContextMenu &&
@@ -575,7 +547,7 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
                             top: customColorPicker.y,
                             left: customColorPicker.x,
                             transform: 'translate(280%, -50%)',
-                        }, onMouseDown: e => e.stopPropagation(), children: colorPickerMode === 'blossom' ? (u(BlossomColorPicker, { defaultValue: customColorPicker.initialColor, coreSize: 28, petalSize: 28, initialExpanded: true, adaptivePositioning: true, openOnHover: false, onChange: color => {
+                        }, onMouseDown: e => e.stopPropagation(), children: colorPickerMode === 'custom' ? (u(BlossomColorPicker, { defaultValue: customColorPicker.initialColor, coreSize: 28, petalSize: 28, initialExpanded: true, adaptivePositioning: true, openOnHover: false, onChange: color => {
                                 const { colors, darkColors } = getCalendarColorsForHex(color.hex);
                                 app.updateCalendar(customColorPicker.calendarId, {
                                     colors,
@@ -585,7 +557,7 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
                                 app.updateCalendar(customColorPicker.calendarId, {});
                                 setCustomColorPicker(null);
                             } })) : (u(ContentSlot, { generatorName: "colorPicker", generatorArgs: {
-                                variant: 'sketch',
+                                variant: 'sketch', // TODO: change name
                                 color: customColorPicker.currentColor,
                                 onChange: (color) => {
                                     setCustomColorPicker(prev => prev ? Object.assign(Object.assign({}, prev), { currentColor: color.hex }) : null);
@@ -641,6 +613,11 @@ function createSidebarPlugin(config = {}) {
                 const refreshSidebar = useCallback(() => {
                     setSidebarVersion(prev => prev + 1);
                 }, []);
+                useEffect(() => {
+                    return app.subscribe(() => {
+                        refreshSidebar();
+                    });
+                }, [app, refreshSidebar]);
                 const calendars = useMemo(() => app.getCalendars(), [app, sidebarVersion]);
                 const handleToggleCalendarVisibility = useCallback((calendarId, visible) => {
                     app.setCalendarVisibility(calendarId, visible);

package/dist/index.js

@@ -51,7 +51,7 @@ const getCalendarInitials = (calendar) => {
     const name = calendar.name || calendar.id;
     return name.charAt(0).toUpperCase();
 };
-const CalendarList = ({ calendars, onToggleVisibility, onReorder, onRename, onContextMenu, onColorClick, editingId, setEditingId, activeContextMenuCalendarId, isDraggable = true, isEditable = true, }) => {
+const CalendarList = ({ calendars, onToggleVisibility, onReorder, onRename, onContextMenu, editingId, setEditingId, activeContextMenuCalendarId, isDraggable = true, isEditable = true, }) => {
     const [editingName, setEditingName] = hooks.useState('');
     const editInputRef = hooks.useRef(null);
     const isProcessedRef = hooks.useRef(false);
@@ -184,12 +184,7 @@ const CalendarList = ({ calendars, onToggleVisibility, onReorder, onRename, onCo
                     editingId === calendar.id;
                 return (u("li", { className: "df-calendar-list-item relative", onDragOver: e => handleDragOver(e, calendar.id), onDragLeave: handleDragLeave, onDrop: () => handleDrop(calendar), onContextMenu: e => onContextMenu(e, calendar.id), children: [isDropTarget && dropTarget.position === 'top' && (u("div", { className: "absolute top-0 left-0 right-0 h-0.5 bg-primary z-10 pointer-events-none" })), u("div", { draggable: isDraggable && !editingId, onDragStart: e => handleDragStart(calendar, e), onDragEnd: handleDragEnd, className: `rounded transition ${draggedCalendarId === calendar.id ? 'opacity-50' : ''} ${isDraggable ? 'cursor-grab' : 'cursor-default'}`, children: u("div", { className: `group flex items-center rounded px-2 py-2 transition hover:bg-gray-100 dark:hover:bg-slate-800 ${isActive ? 'bg-gray-100 dark:bg-slate-800' : ''}`, title: calendar.name, children: [u("input", { type: "checkbox", className: "calendar-checkbox cursor-pointer shrink-0", style: {
                                             '--checkbox-color': calendarColor,
-                                        }, checked: isVisible, onChange: event => onToggleVisibility(calendar.id, event.target.checked), onClick: e => {
-                                            if (onColorClick && isVisible) {
-                                                e.preventDefault();
-                                                onColorClick(e, calendar.id);
-                                            }
-                                        } }), showIcon && (u("span", { className: "ml-2 flex h-5 w-5 shrink-0 items-center justify-center text-xs font-semibold text-white", "aria-hidden": "true", children: getCalendarInitials(calendar) })), editingId === calendar.id ? (u("input", { ref: editInputRef, type: "text", value: editingName, onChange: e => setEditingName(e.target.value), onBlur: handleRenameSave, onKeyDown: handleRenameKeyDown, className: "ml-2 flex-1 min-w-0 h-5 rounded bg-white px-0 py-0 text-sm text-gray-900 focus:outline-none dark:bg-slate-700 dark:text-gray-100", onClick: e => e.stopPropagation() })) : (u("span", { className: "flex-1 pl-1 truncate text-sm text-gray-700 group-hover:text-gray-900 dark:text-gray-200 dark:group-hover:text-white ml-2", onDblClick: () => handleRenameStart(calendar), children: calendar.name || calendar.id }))] }) }), isDropTarget && dropTarget.position === 'bottom' && (u("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary z-10 pointer-events-none" }))] }, calendar.id));
+                                        }, checked: isVisible, onChange: event => onToggleVisibility(calendar.id, event.target.checked) }), showIcon && (u("span", { className: "ml-2 flex h-5 w-5 shrink-0 items-center justify-center text-xs font-semibold text-white", "aria-hidden": "true", children: getCalendarInitials(calendar) })), editingId === calendar.id ? (u("input", { ref: editInputRef, type: "text", value: editingName, onChange: e => setEditingName(e.target.value), onBlur: handleRenameSave, onKeyDown: handleRenameKeyDown, className: "ml-2 flex-1 min-w-0 h-5 rounded bg-white px-0 py-0 text-sm text-gray-900 focus:outline-none dark:bg-slate-700 dark:text-gray-100", onClick: e => e.stopPropagation() })) : (u("span", { className: "flex-1 pl-1 truncate text-sm text-gray-700 group-hover:text-gray-900 dark:text-gray-200 dark:group-hover:text-white ml-2", onDblClick: () => handleRenameStart(calendar), children: calendar.name || calendar.id }))] }) }), isDropTarget && dropTarget.position === 'bottom' && (u("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary z-10 pointer-events-none" }))] }, calendar.id));
             }) }) }));
 };
 
@@ -359,29 +354,6 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
     const handleCloseSidebarContextMenu = hooks.useCallback(() => {
         setSidebarContextMenu(null);
     }, []);
-    const handleColorClick = hooks.useCallback((e, calendarId) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const calendar = calendars.find(c => c.id === calendarId);
-        if (calendar) {
-            const { l, h } = blossomColorPicker.hexToHsl(calendar.colors.lineColor);
-            const sliderValue = blossomColorPicker.lightnessToSliderValue(l);
-            const rect = e.currentTarget.getBoundingClientRect();
-            setCustomColorPicker({
-                x: rect.left + rect.width / 2,
-                y: rect.top + rect.height / 2,
-                calendarId: calendarId,
-                initialColor: {
-                    hue: h,
-                    saturation: sliderValue,
-                    lightness: l,
-                    alpha: 100,
-                    layer: 'outer',
-                },
-                currentColor: calendar.colors.lineColor,
-            });
-        }
-    }, [calendars]);
     const handleDeleteCalendar = hooks.useCallback(() => {
         if (contextMenu) {
             setDeleteState({ calendarId: contextMenu.calendarId, step: 'initial' });
@@ -554,9 +526,9 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
     const isDraggable = readOnlyConfig.draggable !== false;
     return (u("div", { className: core.sidebarContainer, onContextMenu: isEditable ? handleSidebarContextMenu : undefined, children: [u(SidebarHeader, { isCollapsed: isCollapsed, onCollapseToggle: () => setCollapsed(!isCollapsed) }), !isCollapsed ? (u(preact.Fragment, { children: [u(CalendarList, { calendars: calendars, onToggleVisibility: toggleCalendarVisibility, onReorder: isDraggable ? app.reorderCalendars : () => { }, onRename: isEditable
                             ? (id, newName) => app.updateCalendar(id, { name: newName })
-                            : () => { }, onContextMenu: isEditable ? handleContextMenu : () => { }, onColorClick: isEditable ? handleColorClick : undefined, editingId: editingCalendarId, setEditingId: setEditingCalendarId, activeContextMenuCalendarId: contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.calendarId, isDraggable: isDraggable, isEditable: isEditable }), u("div", { className: "border-t border-gray-200 dark:border-slate-800", children: u(core.MiniCalendar, { visibleMonth: app.getVisibleMonth(), currentDate: app.getCurrentDate(), showHeader: true, onMonthChange: handleMonthChange, onDateSelect: date => app.setCurrentDate(date) }) })] })) : (u(CalendarList, { calendars: calendars, onToggleVisibility: toggleCalendarVisibility, onReorder: isDraggable ? app.reorderCalendars : () => { }, onRename: isEditable
+                            : () => { }, onContextMenu: isEditable ? handleContextMenu : () => { }, editingId: editingCalendarId, setEditingId: setEditingCalendarId, activeContextMenuCalendarId: contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.calendarId, isDraggable: isDraggable, isEditable: isEditable }), u("div", { className: "border-t border-gray-200 dark:border-slate-800", children: u(core.MiniCalendar, { visibleMonth: app.getVisibleMonth(), currentDate: app.getCurrentDate(), showHeader: true, onMonthChange: handleMonthChange, onDateSelect: date => app.setCurrentDate(date) }) })] })) : (u(CalendarList, { calendars: calendars, onToggleVisibility: toggleCalendarVisibility, onReorder: isDraggable ? app.reorderCalendars : () => { }, onRename: isEditable
                     ? (id, newName) => app.updateCalendar(id, { name: newName })
-                    : () => { }, onContextMenu: isEditable ? handleContextMenu : () => { }, onColorClick: isEditable ? handleColorClick : undefined, editingId: editingCalendarId, setEditingId: setEditingCalendarId, activeContextMenuCalendarId: contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.calendarId, isDraggable: isDraggable, isEditable: isEditable })), contextMenu && (u(core.ContextMenu, { ref: contextMenuRef, x: contextMenu.x, y: contextMenu.y, onClose: handleCloseContextMenu, className: "w-64 p-2", children: u(core.ContentSlot, { generatorName: "calendarContextMenu", generatorArgs: {
+                    : () => { }, onContextMenu: isEditable ? handleContextMenu : () => { }, editingId: editingCalendarId, setEditingId: setEditingCalendarId, activeContextMenuCalendarId: contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.calendarId, isDraggable: isDraggable, isEditable: isEditable })), contextMenu && (u(core.ContextMenu, { ref: contextMenuRef, x: contextMenu.x, y: contextMenu.y, onClose: handleCloseContextMenu, className: "w-64 p-2", children: u(core.ContentSlot, { generatorName: "calendarContextMenu", generatorArgs: {
                         calendar: calendars.find(c => c.id === contextMenu.calendarId),
                         onClose: handleCloseContextMenu,
                     }, defaultContent: renderCalendarContextMenu ? (renderCalendarContextMenu(calendars.find(c => c.id === contextMenu.calendarId), handleCloseContextMenu)) : (u(preact.Fragment, { children: [u(core.ContextMenuLabel, { children: t('calendarOptions') }), u(MergeMenuItem, { calendars: calendars, currentCalendarId: contextMenu.calendarId, onMergeSelect: handleMergeSelect }), u(core.ContextMenuItem, { onClick: handleDeleteCalendar, children: t('delete') }), u(core.ContextMenuItem, { onClick: handleExportCalendar, children: t('exportCalendar') || 'Export Calendar' }), u(core.ContextMenuSeparator, {}), u(core.ContextMenuColorPicker, { selectedColor: (_d = calendars.find(c => c.id === contextMenu.calendarId)) === null || _d === void 0 ? void 0 : _d.colors.lineColor, onSelect: handleColorSelect, onCustomColor: handleCustomColor })] })) }) })), sidebarContextMenu &&
@@ -577,7 +549,7 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
                             top: customColorPicker.y,
                             left: customColorPicker.x,
                             transform: 'translate(280%, -50%)',
-                        }, onMouseDown: e => e.stopPropagation(), children: colorPickerMode === 'blossom' ? (u(core.BlossomColorPicker, { defaultValue: customColorPicker.initialColor, coreSize: 28, petalSize: 28, initialExpanded: true, adaptivePositioning: true, openOnHover: false, onChange: color => {
+                        }, onMouseDown: e => e.stopPropagation(), children: colorPickerMode === 'custom' ? (u(core.BlossomColorPicker, { defaultValue: customColorPicker.initialColor, coreSize: 28, petalSize: 28, initialExpanded: true, adaptivePositioning: true, openOnHover: false, onChange: color => {
                                 const { colors, darkColors } = core.getCalendarColorsForHex(color.hex);
                                 app.updateCalendar(customColorPicker.calendarId, {
                                     colors,
@@ -587,7 +559,7 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
                                 app.updateCalendar(customColorPicker.calendarId, {});
                                 setCustomColorPicker(null);
                             } })) : (u(core.ContentSlot, { generatorName: "colorPicker", generatorArgs: {
-                                variant: 'sketch',
+                                variant: 'sketch', // TODO: change name
                                 color: customColorPicker.currentColor,
                                 onChange: (color) => {
                                     setCustomColorPicker(prev => prev ? Object.assign(Object.assign({}, prev), { currentColor: color.hex }) : null);
@@ -643,6 +615,11 @@ function createSidebarPlugin(config = {}) {
                 const refreshSidebar = hooks.useCallback(() => {
                     setSidebarVersion(prev => prev + 1);
                 }, []);
+                hooks.useEffect(() => {
+                    return app.subscribe(() => {
+                        refreshSidebar();
+                    });
+                }, [app, refreshSidebar]);
                 const calendars = hooks.useMemo(() => app.getCalendars(), [app, sidebarVersion]);
                 const handleToggleCalendarVisibility = hooks.useCallback((calendarId, visible) => {
                     app.setCalendarVisibility(calendarId, visible);

package/dist/types/components/CalendarList.d.ts

@@ -5,12 +5,11 @@ interface CalendarListProps {
     onReorder: (fromIndex: number, toIndex: number) => void;
     onRename: (id: string, newName: string) => void;
     onContextMenu: (e: any, id: string) => void;
-    onColorClick?: (e: any, id: string) => void;
     editingId: string | null;
     setEditingId: (id: string | null) => void;
     activeContextMenuCalendarId?: string | null;
     isDraggable?: boolean;
     isEditable?: boolean;
 }
-export declare const CalendarList: ({ calendars, onToggleVisibility, onReorder, onRename, onContextMenu, onColorClick, editingId, setEditingId, activeContextMenuCalendarId, isDraggable, isEditable, }: CalendarListProps) => import("preact").JSX.Element;
+export declare const CalendarList: ({ calendars, onToggleVisibility, onReorder, onRename, onContextMenu, editingId, setEditingId, activeContextMenuCalendarId, isDraggable, isEditable, }: CalendarListProps) => import("preact").JSX.Element;
 export {};

package/dist/types/plugin.d.ts

@@ -12,14 +12,14 @@ export interface CalendarSidebarRenderProps {
     editingCalendarId?: string | null;
     setEditingCalendarId?: (id: string | null) => void;
     onCreateCalendar?: () => void;
-    colorPickerMode?: 'blossom' | 'default';
+    colorPickerMode?: 'default' | 'custom';
 }
 export interface SidebarPluginConfig {
     width?: number | string;
     miniWidth?: string;
     initialCollapsed?: boolean;
     createCalendarMode?: 'inline' | 'modal';
-    colorPickerMode?: 'blossom' | 'default';
+    colorPickerMode?: 'default' | 'custom';
     render?: (props: CalendarSidebarRenderProps) => TNode;
     renderCalendarContextMenu?: (calendar: CalendarType, onClose: () => void) => TNode;
     renderCreateCalendarDialog?: (props: CreateCalendarDialogProps) => TNode;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@dayflow/plugin-sidebar",
-  "version": "1.0.0",
+  "version": "1.0.2",
+  "type": "module",
   "description": "Sidebar plugin for DayFlow calendar",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -26,7 +27,7 @@
   "author": "Jayce Li",
   "license": "MIT",
   "peerDependencies": {
-    "@dayflow/core": "3.1.0"
+    "@dayflow/core": "3.1.2"
   },
   "devDependencies": {
     "@dayflow/blossom-color-picker": "^2.0.1",
@@ -38,7 +39,7 @@
     "preact": "^10.25.4",
     "temporal-polyfill": "^0.3.0",
     "typescript": "^5.7.2",
-    "@dayflow/core": "3.1.0"
+    "@dayflow/core": "3.1.2"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && rollup -c",