@dayflow/plugin-sidebar 1.0.0

package/dist/index.js

@@ -0,0 +1,749 @@
+'use strict';
+
+var preact = require('preact');
+var hooks = require('preact/hooks');
+var core = require('@dayflow/core');
+var blossomColorPicker = require('@dayflow/blossom-color-picker');
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var f=0;function u(e,t,n,o,i,u){t||(t={});var a,c,p=t;if("ref"in p)for(c in p={},t)"ref"==c?a=t[c]:p[c]=t[c];var l={type:e,props:p,key:n,ref:a,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--f,__i:-1,__u:0,__source:i,__self:u};if("function"==typeof e&&(a=e.defaultProps))for(c in a) void 0===p[c]&&(p[c]=a[c]);return preact.options.vnode&&preact.options.vnode(l),l}
+
+const SidebarHeader = ({ isCollapsed, onCollapseToggle, }) => {
+    const { t } = core.useLocale();
+    return (u("div", { className: core.sidebarHeader, children: [u("button", { type: "button", "aria-label": isCollapsed ? t('expandSidebar') : t('collapseSidebar'), className: core.sidebarHeaderToggle, onClick: onCollapseToggle, children: isCollapsed ? (u(core.PanelRightClose, { className: "h-4 w-4 text-gray-500 dark:text-gray-400" })) : (u(core.PanelRightOpen, { className: "h-4 w-4 text-gray-500 dark:text-gray-400" })) }), !isCollapsed && (u("div", { className: "flex flex-1 justify-between items-center ml-3", children: u("span", { className: core.sidebarHeaderTitle, children: t('calendars') }) }))] }));
+};
+
+const getCalendarInitials = (calendar) => {
+    if (calendar.icon) {
+        return calendar.icon;
+    }
+    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 [editingName, setEditingName] = hooks.useState('');
+    const editInputRef = hooks.useRef(null);
+    const isProcessedRef = hooks.useRef(false);
+    // Drag state
+    const [draggedCalendarId, setDraggedCalendarId] = hooks.useState(null);
+    const [dropTarget, setDropTarget] = hooks.useState(null);
+    const handleDragStart = hooks.useCallback((calendar, e) => {
+        // Prevent dragging when editing or not draggable
+        if (editingId || !isDraggable) {
+            e.preventDefault();
+            return;
+        }
+        setDraggedCalendarId(calendar.id);
+        // Store calendar data for drop handling
+        const dragData = {
+            calendarId: calendar.id,
+            calendarName: calendar.name,
+            calendarColors: calendar.colors,
+            calendarIcon: calendar.icon,
+        };
+        e.dataTransfer.setData('application/x-dayflow-calendar', JSON.stringify(dragData));
+        e.dataTransfer.effectAllowed = 'copy';
+    }, [editingId]);
+    const handleDragEnd = hooks.useCallback(() => {
+        setDraggedCalendarId(null);
+        setDropTarget(null);
+    }, []);
+    const handleDragOver = hooks.useCallback((e, targetId) => {
+        e.preventDefault();
+        if (draggedCalendarId === targetId) {
+            setDropTarget(null);
+            return;
+        }
+        const targetIndex = calendars.findIndex(c => c.id === targetId);
+        const isLast = targetIndex === calendars.length - 1;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const isTopHalf = e.clientY < rect.top + rect.height / 2;
+        if (isLast) {
+            setDropTarget({
+                id: targetId,
+                position: isTopHalf ? 'top' : 'bottom',
+            });
+        }
+        else {
+            setDropTarget({
+                id: targetId,
+                position: 'top',
+            });
+        }
+    }, [draggedCalendarId, calendars]);
+    const handleDragLeave = hooks.useCallback(() => {
+        setDropTarget(null);
+    }, []);
+    const handleDrop = hooks.useCallback((targetCalendar) => {
+        if (!draggedCalendarId || !dropTarget)
+            return;
+        if (draggedCalendarId === targetCalendar.id)
+            return;
+        const fromIndex = calendars.findIndex(c => c.id === draggedCalendarId);
+        let toIndex = calendars.findIndex(c => c.id === targetCalendar.id);
+        // Adjust target index based on position
+        if (dropTarget.position === 'bottom') {
+            toIndex += 1;
+        }
+        // Adjust for removal of the item
+        if (toIndex > fromIndex) {
+            toIndex -= 1;
+        }
+        if (fromIndex !== -1 && toIndex !== -1) {
+            onReorder(fromIndex, toIndex);
+        }
+        setDropTarget(null);
+    }, [draggedCalendarId, dropTarget, calendars, onReorder]);
+    const handleRenameStart = hooks.useCallback((calendar) => {
+        if (!isEditable)
+            return;
+        isProcessedRef.current = false;
+        setEditingId(calendar.id);
+        setEditingName(calendar.name);
+    }, [setEditingId, isEditable]);
+    const handleRenameSave = hooks.useCallback(() => {
+        if (isProcessedRef.current)
+            return;
+        isProcessedRef.current = true;
+        if (editingId && editingName.trim()) {
+            const calendar = calendars.find(c => c.id === editingId);
+            if (calendar && calendar.name !== editingName.trim()) {
+                onRename(editingId, editingName.trim());
+            }
+        }
+        setEditingId(null);
+        setEditingName('');
+    }, [editingId, editingName, calendars, onRename, setEditingId]);
+    const handleRenameCancel = hooks.useCallback(() => {
+        if (isProcessedRef.current)
+            return;
+        isProcessedRef.current = true;
+        setEditingId(null);
+        setEditingName('');
+    }, [setEditingId]);
+    const handleRenameKeyDown = hooks.useCallback((e) => {
+        if (e.key === 'Enter') {
+            handleRenameSave();
+        }
+        else if (e.key === 'Escape') {
+            handleRenameCancel();
+        }
+    }, [handleRenameSave, handleRenameCancel]);
+    hooks.useEffect(() => {
+        if (editingId && editInputRef.current) {
+            editInputRef.current.focus();
+            editInputRef.current.select();
+        }
+    }, [editingId]);
+    hooks.useEffect(() => {
+        if (editingId) {
+            const calendar = calendars.find(c => c.id === editingId);
+            if (calendar) {
+                setEditingName(calendar.name);
+            }
+        }
+    }, [editingId, calendars]);
+    return (u("div", { className: "df-calendar-list flex-1 overflow-y-auto px-2 pb-3", children: u("ul", { className: "space-y-1 relative", children: calendars.map(calendar => {
+                var _a;
+                const isVisible = calendar.isVisible !== false;
+                const calendarColor = ((_a = calendar.colors) === null || _a === void 0 ? void 0 : _a.lineColor) || '#3b82f6';
+                const showIcon = Boolean(calendar.icon);
+                const isDropTarget = (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.id) === calendar.id;
+                const isActive = activeContextMenuCalendarId === calendar.id ||
+                    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));
+            }) }) }));
+};
+
+const MergeMenuItem = ({ calendars, currentCalendarId, onMergeSelect, }) => {
+    const { t } = core.useLocale();
+    const [isHovered, setIsHovered] = hooks.useState(false);
+    const itemRef = hooks.useRef(null);
+    const submenuRef = hooks.useRef(null);
+    const [position, setPosition] = hooks.useState({ x: 0, y: 0 });
+    const timeoutRef = hooks.useRef();
+    const handleMouseEnter = () => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        if (itemRef.current) {
+            const rect = itemRef.current.getBoundingClientRect();
+            setPosition({ x: rect.right, y: rect.top });
+        }
+        setIsHovered(true);
+    };
+    const handleMouseLeave = () => {
+        timeoutRef.current = setTimeout(() => {
+            setIsHovered(false);
+        }, 100);
+    };
+    hooks.useEffect(() => {
+        const el = submenuRef.current;
+        if (el) {
+            const stopPropagation = (e) => e.stopPropagation();
+            el.addEventListener('mousedown', stopPropagation);
+            return () => {
+                el.removeEventListener('mousedown', stopPropagation);
+            };
+        }
+    }, [isHovered]);
+    const availableCalendars = calendars.filter(c => c.id !== currentCalendarId);
+    if (availableCalendars.length === 0)
+        return null;
+    return (u(preact.Fragment, { children: [u("div", { ref: itemRef, className: "relative flex cursor-default select-none items-center justify-between rounded-sm px-3 py-0.5 text-[12px] outline-none hover:bg-primary hover:text-white dark:text-slate-200 dark:hover:bg-primary dark:hover:text-white transition-colors", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [u("span", { children: t('merge') }), u(core.ChevronRight, { className: "h-4 w-4" })] }), isHovered &&
+                core.createPortal(u("div", { ref: submenuRef, "data-submenu-content": "true", className: "fixed z-60 min-w-48 overflow-hidden rounded-md border border-slate-200 bg-white p-1 shadow-md dark:border-slate-800 dark:bg-slate-950 animate-in fade-in-0 zoom-in-95 duration-100", style: { top: position.y, left: position.x }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseDown: e => e.stopPropagation(), children: availableCalendars.map(calendar => (u("div", { className: "flex items-center cursor-pointer rounded-sm px-3 py-1 text-[12px] text-slate-900 hover:bg-primary hover:text-white dark:text-slate-50 dark:hover:bg-primary dark:hover:text-white transition-colors", onClick: e => {
+                            e.stopPropagation();
+                            onMergeSelect(calendar.id);
+                        }, children: [u("div", { className: "mr-2 h-3 w-3 rounded-sm shrink-0", style: { backgroundColor: calendar.colors.lineColor } }), u("span", { className: "truncate", children: calendar.name || calendar.id })] }, calendar.id))) }), document.body)] }));
+};
+
+const MergeCalendarDialog = ({ sourceName, targetName, onConfirm, onCancel, }) => {
+    const { t } = core.useLocale();
+    return (u("div", { className: "fixed inset-0 z-100 flex items-center justify-center bg-black/50", children: u("div", { className: "w-full max-w-md rounded-lg p-6 shadow-xl bg-background", children: [u("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: t('mergeConfirmTitle', { sourceName, targetName }) }), u("p", { className: "mt-3 text-sm text-gray-600 dark:text-gray-300", children: t('mergeConfirmMessage', { sourceName, targetName }) }), u("div", { className: "mt-6 flex justify-end gap-3", children: [u("button", { type: "button", onClick: onCancel, className: core.cancelButton, children: t('cancel') }), u("button", { type: "button", onClick: onConfirm, className: "rounded-md bg-destructive px-3 py-2 text-xs font-medium text-destructive-foreground hover:bg-destructive/90", children: t('merge') })] })] }) }));
+};
+
+const DeleteCalendarDialog = ({ calendarId, calendarName, calendars, step, onStepChange, onConfirmDelete, onCancel, onMergeSelect, }) => {
+    const [showMergeDropdown, setShowMergeDropdown] = hooks.useState(false);
+    const { t } = core.useLocale();
+    return core.createPortal(u("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: u("div", { className: "w-full max-w-md rounded-lg p-6 shadow-xl bg-background", children: step === 'initial' ? (u(preact.Fragment, { children: [u("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: t('deleteCalendar', { calendarName }) }), u("p", { className: "mt-3 text-sm text-gray-600 dark:text-gray-300", children: t('deleteCalendarMessage', { calendarName }) }), u("div", { className: "mt-6 flex justify-between items-center", children: [u("div", { className: "relative", children: [u("button", { type: "button", onClick: () => setShowMergeDropdown(!showMergeDropdown), className: "flex items-center gap-1 rounded-md border border-gray-300 px-4 py-2 text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-slate-700", children: t('merge') }), showMergeDropdown && (u("div", { className: "absolute left-0 top-full mt-1 min-w-full w-max rounded-md border border-gray-200 bg-background shadow-lg dark:border-slate-700 z-10 max-h-60 overflow-y-auto", children: calendars
+                                            .filter(c => c.id !== calendarId)
+                                            .map(calendar => (u("div", { className: "flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-slate-700 cursor-pointer", onClick: () => {
+                                                onMergeSelect(calendar.id);
+                                                setShowMergeDropdown(false);
+                                            }, children: [u("div", { className: "mr-2 h-3 w-3 rounded-sm shrink-0", style: {
+                                                        backgroundColor: calendar.colors.lineColor,
+                                                    } }), u("span", { className: "whitespace-nowrap", children: calendar.name || calendar.id })] }, calendar.id))) }))] }), u("div", { className: "flex gap-3", children: [u("button", { type: "button", onClick: onCancel, className: core.cancelButton, children: t('cancel') }), u("button", { type: "button", onClick: () => onStepChange('confirm_delete'), className: "rounded-md bg-destructive px-4 py-2 text-xs font-medium text-destructive-foreground hover:bg-destructive/90", children: t('delete') })] })] })] })) : (u(preact.Fragment, { children: [u("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: t('confirmDeleteTitle', { calendarName }) }), u("p", { className: "mt-3 text-sm text-gray-600 dark:text-gray-300", children: t('confirmDeleteMessage') }), u("div", { className: "mt-6 flex justify-end gap-3", children: [u("button", { type: "button", onClick: onCancel, className: "rounded-md bg-background border border-border px-3 py-2 text-xs font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-slate-700", children: t('cancel') }), u("button", { type: "button", onClick: onConfirmDelete, className: "rounded-md bg-destructive px-3 py-2 text-xs font-medium text-destructive-foreground hover:bg-destructive/90", children: t('delete') })] })] })) }) }), document.body);
+};
+
+const NEW_CALENDAR_ID = 'new-calendar';
+const ImportCalendarDialog = ({ calendars, filename, onConfirm, onCancel, }) => {
+    var _a;
+    const { t } = core.useLocale();
+    const [selectedCalendarId, setSelectedCalendarId] = hooks.useState(((_a = calendars[0]) === null || _a === void 0 ? void 0 : _a.id) || NEW_CALENDAR_ID);
+    const [isOpen, setIsOpen] = hooks.useState(false);
+    const [shouldRender, setShouldRender] = hooks.useState(false);
+    const dropdownRef = hooks.useRef(null);
+    const triggerRef = hooks.useRef(null);
+    hooks.useEffect(() => {
+        if (isOpen) {
+            setShouldRender(true);
+        }
+        else {
+            const timer = setTimeout(() => setShouldRender(false), 200);
+            return () => clearTimeout(timer);
+        }
+    }, [isOpen]);
+    hooks.useEffect(() => {
+        const handleClickOutside = (event) => {
+            var _a;
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target) &&
+                !((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const selectedCalendar = calendars.find(c => c.id === selectedCalendarId);
+    const isNewSelected = selectedCalendarId === NEW_CALENDAR_ID;
+    const handleSelect = (id) => {
+        setSelectedCalendarId(id);
+        setIsOpen(false);
+    };
+    const renderDropdown = () => {
+        var _a;
+        if (!shouldRender)
+            return null;
+        const rect = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect)
+            return null;
+        return core.createPortal(u("div", { ref: dropdownRef, className: `fixed z-110 mt-1 max-h-60 overflow-y-auto rounded-md bg-white shadow-lg border border-gray-200 dark:border-slate-700 dark:bg-slate-800 transition-all duration-200 origin-top ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`, style: {
+                top: rect.bottom,
+                left: rect.left,
+                width: rect.width,
+            }, children: u("div", { className: "py-1", children: [calendars.map(calendar => (u("div", { className: `flex items-center px-3 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700 ${selectedCalendarId === calendar.id ? 'bg-primary/10' : ''}`, onClick: () => handleSelect(calendar.id), children: [u("div", { className: "mr-3 h-3 w-3 shrink-0 rounded-sm", style: { backgroundColor: calendar.colors.lineColor } }), u("span", { className: `flex-1 text-sm truncate ${selectedCalendarId === calendar.id ? 'font-medium text-primary' : 'text-gray-700 dark:text-gray-200'}`, children: calendar.name || calendar.id }), selectedCalendarId === calendar.id && (u(core.Check, { className: "ml-2 w-4 h-4 text-primary shrink-0" }))] }, calendar.id))), u("div", { className: "border-t border-gray-100 dark:border-slate-700 my-1" }), u("div", { className: `flex items-center px-3 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700 ${isNewSelected ? 'bg-primary/10' : ''}`, onClick: () => handleSelect(NEW_CALENDAR_ID), children: [u("span", { className: `flex-1 text-sm truncate ${isNewSelected ? 'font-medium text-primary' : 'text-gray-700 dark:text-gray-200 pl-6'}`, children: [t('newCalendar') || 'New Calendar', ": ", filename] }), isNewSelected && (u(core.Check, { className: "ml-2 w-4 h-4 text-primary shrink-0" }))] })] }) }), document.body);
+    };
+    return (u("div", { className: "fixed inset-0 z-100 flex items-center justify-center bg-black/50", children: u("div", { className: "w-full max-w-md rounded-lg bg-white p-6 shadow-xl dark:bg-slate-900", children: [u("h2", { className: "mb-4 text-lg font-semibold text-gray-900 dark:text-white", children: t('addSchedule') || 'Add Schedule' }), u("p", { className: "mb-4 text-sm text-gray-600 dark:text-gray-300", children: t('importCalendarMessage') ||
+                        'This calendar contains new events. Please select a target calendar.' }), u("div", { className: "relative", children: [u("button", { ref: triggerRef, type: "button", className: "flex items-center w-full border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shadow-sm", onClick: () => setIsOpen(!isOpen), children: [!isNewSelected && selectedCalendar && (u("div", { className: "mr-3 h-3 w-3 shrink-0 rounded-sm", style: { backgroundColor: selectedCalendar.colors.lineColor } })), u("span", { className: `text-sm font-medium text-gray-700 dark:text-gray-200 flex-1 text-left truncate ${isNewSelected ? 'pl-0' : ''}`, children: isNewSelected
+                                        ? `${t('newCalendar')}: ${filename}`
+                                        : (selectedCalendar === null || selectedCalendar === void 0 ? void 0 : selectedCalendar.name) || (selectedCalendar === null || selectedCalendar === void 0 ? void 0 : selectedCalendar.id) }), u(core.ChevronsUpDown, { className: "w-4 h-4 text-gray-400 shrink-0 ml-2" })] }), renderDropdown()] }), u("div", { className: "mt-8 flex justify-end gap-3", children: [u("button", { type: "button", onClick: onCancel, className: core.cancelButton, children: t('cancel') || 'Cancel' }), u("button", { type: "button", onClick: () => onConfirm(selectedCalendarId), className: "rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors shadow-sm", children: t('ok') || 'OK' })] })] }) }));
+};
+
+const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCollapsed, setCollapsed, renderCalendarContextMenu, editingCalendarId: propEditingCalendarId, setEditingCalendarId: propSetEditingCalendarId, onCreateCalendar, colorPickerMode = 'default', }) => {
+    var _a, _b, _c, _d;
+    const { t } = core.useLocale();
+    const [localEditingCalendarId, setLocalEditingCalendarId] = hooks.useState(null);
+    const editingCalendarId = propEditingCalendarId !== undefined
+        ? propEditingCalendarId
+        : localEditingCalendarId;
+    const setEditingCalendarId = propSetEditingCalendarId || setLocalEditingCalendarId;
+    // File input ref for import
+    const fileInputRef = hooks.useRef(null);
+    const contextMenuRef = hooks.useRef(null);
+    const handleMonthChange = hooks.useCallback((offset) => {
+        const current = app.getVisibleMonth();
+        const next = new Date(current.getFullYear(), current.getMonth() + offset, 1);
+        app.setVisibleMonth(next);
+    }, [app]);
+    // Context Menu State
+    const [contextMenu, setContextMenu] = hooks.useState(null);
+    // Sidebar Context Menu State (Background)
+    const [sidebarContextMenu, setSidebarContextMenu] = hooks.useState(null);
+    const [customColorPicker, setCustomColorPicker] = hooks.useState(null);
+    // Merge Calendar State
+    const [mergeState, setMergeState] = hooks.useState(null);
+    // Delete Calendar State
+    const [deleteState, setDeleteState] = hooks.useState(null);
+    // Import Calendar State
+    const [importState, setImportState] = hooks.useState(null);
+    const handleContextMenu = hooks.useCallback((e, calendarId) => {
+        e.preventDefault();
+        e.stopPropagation(); // Stop propagation to prevent sidebar context menu
+        setContextMenu({
+            x: e.clientX,
+            y: e.clientY,
+            calendarId,
+            rowRect: e.currentTarget.getBoundingClientRect(),
+        });
+        setSidebarContextMenu(null);
+    }, []);
+    const handleSidebarContextMenu = hooks.useCallback((e) => {
+        e.preventDefault();
+        setSidebarContextMenu({
+            x: e.clientX,
+            y: e.clientY,
+        });
+        setContextMenu(null);
+    }, []);
+    const handleCloseContextMenu = hooks.useCallback(() => {
+        setContextMenu(null);
+    }, []);
+    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' });
+            handleCloseContextMenu();
+        }
+    }, [contextMenu, handleCloseContextMenu]);
+    const handleColorSelect = hooks.useCallback((color) => {
+        if (contextMenu) {
+            const { colors, darkColors } = core.getCalendarColorsForHex(color);
+            app.updateCalendar(contextMenu.calendarId, {
+                colors,
+                darkColors,
+            });
+            handleCloseContextMenu();
+        }
+    }, [app, contextMenu, handleCloseContextMenu]);
+    const handleCustomColor = hooks.useCallback(() => {
+        if (contextMenu) {
+            const calendar = calendars.find(c => c.id === contextMenu.calendarId);
+            if (calendar) {
+                const { l, h } = blossomColorPicker.hexToHsl(calendar.colors.lineColor);
+                // Calculate slider position from lightness
+                const sliderValue = blossomColorPicker.lightnessToSliderValue(l);
+                let x = contextMenu.x;
+                let y = contextMenu.y;
+                if (contextMenu.rowRect) {
+                    // Position it on the row (roughly where the checkbox is)
+                    x = contextMenu.rowRect.left + 24;
+                    y = contextMenu.rowRect.top + contextMenu.rowRect.height / 2;
+                }
+                else if (contextMenuRef.current) {
+                    const rect = contextMenuRef.current.getBoundingClientRect();
+                    x = rect.left + rect.width / 2;
+                    y = rect.top + rect.height / 2;
+                }
+                setCustomColorPicker({
+                    x,
+                    y,
+                    calendarId: contextMenu.calendarId,
+                    initialColor: {
+                        hue: h,
+                        saturation: sliderValue,
+                        lightness: l,
+                        alpha: 100,
+                        layer: 'outer',
+                    },
+                    currentColor: calendar.colors.lineColor,
+                });
+            }
+            handleCloseContextMenu();
+        }
+    }, [contextMenu, calendars, handleCloseContextMenu]);
+    const handleMergeSelect = hooks.useCallback((targetId) => {
+        if (contextMenu) {
+            setMergeState({
+                sourceId: contextMenu.calendarId,
+                targetId,
+            });
+            handleCloseContextMenu();
+        }
+    }, [contextMenu, handleCloseContextMenu]);
+    const handleMergeConfirm = hooks.useCallback(() => {
+        if (mergeState) {
+            const { sourceId, targetId } = mergeState;
+            app.mergeCalendars(sourceId, targetId);
+            setMergeState(null);
+        }
+    }, [app, mergeState]);
+    const handleConfirmDelete = hooks.useCallback(() => {
+        if (deleteState) {
+            app.deleteCalendar(deleteState.calendarId);
+            setDeleteState(null);
+        }
+    }, [app, deleteState]);
+    const handleDeleteMergeSelect = hooks.useCallback((targetId) => {
+        if (deleteState) {
+            setMergeState({
+                sourceId: deleteState.calendarId,
+                targetId,
+            });
+            setDeleteState(null);
+        }
+    }, [deleteState]);
+    // Import Calendar handler
+    const handleImportClick = hooks.useCallback(() => {
+        var _a;
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        handleCloseSidebarContextMenu();
+    }, [handleCloseSidebarContextMenu]);
+    const handleFileChange = hooks.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file)
+            return;
+        const result = yield core.importICSFile(file);
+        // Show dialog if found at least one valid event, even if there were some parsing errors
+        if (result.events.length > 0) {
+            setImportState({
+                events: result.events,
+                filename: file.name.replace(/\.[^/.]+$/, ''), // Remove extension
+            });
+        }
+        // Reset file input
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    }), []);
+    const handleImportConfirm = hooks.useCallback((targetCalendarId) => {
+        if (importState) {
+            let finalCalendarId = targetCalendarId;
+            if (targetCalendarId === NEW_CALENDAR_ID) {
+                // Create new calendar
+                const colors = [
+                    '#3b82f6',
+                    '#10b981',
+                    '#8b5cf6',
+                    '#f59e0b',
+                    '#ef4444',
+                    '#f97316',
+                    '#ec4899',
+                    '#14b8a6',
+                    '#6366f1',
+                    '#6b7280',
+                ];
+                const randomColor = colors[Math.floor(Math.random() * colors.length)];
+                const { colors: calendarColors, darkColors } = core.getCalendarColorsForHex(randomColor);
+                finalCalendarId = core.generateUniKey();
+                app.createCalendar({
+                    id: finalCalendarId,
+                    name: importState.filename,
+                    isDefault: false,
+                    colors: calendarColors,
+                    darkColors: darkColors,
+                    isVisible: true,
+                });
+            }
+            importState.events.forEach(event => {
+                app.addEvent(Object.assign(Object.assign({}, event), { calendarId: finalCalendarId }));
+            });
+            setImportState(null);
+        }
+    }, [app, importState]);
+    // Export Calendar handler
+    const handleExportCalendar = hooks.useCallback(() => {
+        if (contextMenu) {
+            const calendar = calendars.find(c => c.id === contextMenu.calendarId);
+            if (calendar) {
+                const events = app
+                    .getEvents()
+                    .filter(e => e.calendarId === calendar.id);
+                core.downloadICS(events, {
+                    calendarName: calendar.name,
+                    filename: calendar.name || 'calendar',
+                });
+            }
+            handleCloseContextMenu();
+        }
+    }, [contextMenu, calendars, app, handleCloseContextMenu]);
+    const sourceCalendarName = mergeState
+        ? ((_a = calendars.find(c => c.id === mergeState.sourceId)) === null || _a === void 0 ? void 0 : _a.name) || 'Unknown'
+        : '';
+    const targetCalendarName = mergeState
+        ? ((_b = calendars.find(c => c.id === mergeState.targetId)) === null || _b === void 0 ? void 0 : _b.name) || 'Unknown'
+        : '';
+    const deleteCalendarName = deleteState
+        ? ((_c = calendars.find(c => c.id === deleteState.calendarId)) === null || _c === void 0 ? void 0 : _c.name) || 'Unknown'
+        : '';
+    const readOnlyConfig = app.getReadOnlyConfig();
+    const isEditable = !app.state.readOnly;
+    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
+                    ? (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: {
+                        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 &&
+                core.createPortal(u(core.ContextMenu, { x: sidebarContextMenu.x, y: sidebarContextMenu.y, onClose: handleCloseSidebarContextMenu, className: "w-max p-2", children: [u(core.ContextMenuItem, { onClick: () => {
+                                onCreateCalendar === null || onCreateCalendar === void 0 ? void 0 : onCreateCalendar();
+                                handleCloseSidebarContextMenu();
+                            }, children: t('newCalendar') || 'New Calendar' }), u(core.ContextMenuItem, { onClick: handleImportClick, children: t('importCalendar') || 'Import Calendar' }), u(core.ContextMenuItem, { onClick: () => {
+                                app.triggerRender();
+                                handleCloseSidebarContextMenu();
+                            }, children: t('refreshAll') || 'Refresh All' })] }), document.body), u("input", { ref: fileInputRef, type: "file", accept: ".ics", style: { display: 'none' }, onChange: handleFileChange }), importState &&
+                core.createPortal(u(ImportCalendarDialog, { calendars: calendars, filename: importState.filename, onConfirm: handleImportConfirm, onCancel: () => setImportState(null) }), document.body), mergeState &&
+                core.createPortal(u(MergeCalendarDialog, { sourceName: sourceCalendarName, targetName: targetCalendarName, onConfirm: handleMergeConfirm, onCancel: () => setMergeState(null) }), document.body), deleteState &&
+                core.createPortal(u(DeleteCalendarDialog, { calendarId: deleteState.calendarId, calendarName: deleteCalendarName, calendars: calendars, step: deleteState.step, onStepChange: step => setDeleteState(prev => (prev ? Object.assign(Object.assign({}, prev), { step }) : null)), onConfirmDelete: handleConfirmDelete, onCancel: () => setDeleteState(null), onMergeSelect: handleDeleteMergeSelect }), document.body), customColorPicker &&
+                core.createPortal(u("div", { className: "fixed inset-0 z-50", onMouseDown: () => {
+                        app.updateCalendar(customColorPicker.calendarId, {});
+                        setCustomColorPicker(null);
+                    }, children: u("div", { className: "absolute flex items-center justify-center", style: {
+                            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 => {
+                                const { colors, darkColors } = core.getCalendarColorsForHex(color.hex);
+                                app.updateCalendar(customColorPicker.calendarId, {
+                                    colors,
+                                    darkColors,
+                                }, true);
+                            }, onCollapse: () => {
+                                app.updateCalendar(customColorPicker.calendarId, {});
+                                setCustomColorPicker(null);
+                            } })) : (u(core.ContentSlot, { generatorName: "colorPicker", generatorArgs: {
+                                variant: 'sketch',
+                                color: customColorPicker.currentColor,
+                                onChange: (color) => {
+                                    setCustomColorPicker(prev => prev ? Object.assign(Object.assign({}, prev), { currentColor: color.hex }) : null);
+                                    const { colors, darkColors } = core.getCalendarColorsForHex(color.hex);
+                                    app.updateCalendar(customColorPicker.calendarId, {
+                                        colors,
+                                        darkColors,
+                                    }, true);
+                                },
+                                onChangeComplete: (color) => {
+                                    const { colors, darkColors } = core.getCalendarColorsForHex(color.hex);
+                                    app.updateCalendar(customColorPicker.calendarId, {
+                                        colors,
+                                        darkColors,
+                                    });
+                                },
+                            }, defaultContent: u(core.DefaultColorPicker, { color: customColorPicker.currentColor, onChange: (color, isPending) => {
+                                    setCustomColorPicker(prev => prev ? Object.assign(Object.assign({}, prev), { currentColor: color.hex }) : null);
+                                    const { colors, darkColors } = core.getCalendarColorsForHex(color.hex);
+                                    app.updateCalendar(customColorPicker.calendarId, {
+                                        colors,
+                                        darkColors,
+                                    }, isPending);
+                                }, onClose: () => {
+                                    app.updateCalendar(customColorPicker.calendarId, {});
+                                    setCustomColorPicker(null);
+                                } }) })) }) }), document.body)] }));
+};
+
+const DEFAULT_SIDEBAR_WIDTH = '240px';
+const COLORS = [
+    '#ea426b',
+    '#f19a38',
+    '#f7cf46',
+    '#83d754',
+    '#51aaf2',
+    '#b672d0',
+    '#957e5e',
+];
+function createSidebarPlugin(config = {}) {
+    return {
+        name: 'sidebar',
+        config,
+        install(_app) {
+            const sidebarWidth = core.normalizeCssWidth(config.width, DEFAULT_SIDEBAR_WIDTH);
+            core.registerSidebarImplementation((app) => {
+                var _a, _b;
+                const { t } = core.useLocale();
+                const [isCollapsed, setIsCollapsed] = hooks.useState((_a = config.initialCollapsed) !== null && _a !== void 0 ? _a : false);
+                const [sidebarVersion, setSidebarVersion] = hooks.useState(0);
+                const [editingCalendarId, setEditingCalendarId] = hooks.useState(null);
+                const [showCreateDialog, setShowCreateDialog] = hooks.useState(false);
+                const refreshSidebar = hooks.useCallback(() => {
+                    setSidebarVersion(prev => prev + 1);
+                }, []);
+                const calendars = hooks.useMemo(() => app.getCalendars(), [app, sidebarVersion]);
+                const handleToggleCalendarVisibility = hooks.useCallback((calendarId, visible) => {
+                    app.setCalendarVisibility(calendarId, visible);
+                    refreshSidebar();
+                }, [app, refreshSidebar]);
+                const handleToggleAllCalendars = hooks.useCallback((visible) => {
+                    app.setAllCalendarsVisibility(visible);
+                    refreshSidebar();
+                }, [app, refreshSidebar]);
+                const handleCreateCalendar = hooks.useCallback(() => {
+                    const createMode = config.createCalendarMode || 'inline';
+                    if (createMode === 'modal') {
+                        setShowCreateDialog(true);
+                        return;
+                    }
+                    const randomColor = COLORS[Math.floor(Math.random() * COLORS.length)];
+                    const { colors, darkColors } = core.getCalendarColorsForHex(randomColor);
+                    const newId = core.generateUniKey();
+                    const newCalendar = {
+                        id: newId,
+                        name: t('untitled'),
+                        colors,
+                        darkColors,
+                        isVisible: true,
+                        isDefault: false,
+                    };
+                    app.createCalendar(newCalendar);
+                    setEditingCalendarId(newId);
+                    refreshSidebar();
+                }, [app, t, refreshSidebar]);
+                const sidebarProps = hooks.useMemo(() => ({
+                    app,
+                    calendars,
+                    toggleCalendarVisibility: handleToggleCalendarVisibility,
+                    toggleAll: handleToggleAllCalendars,
+                    isCollapsed,
+                    setCollapsed: setIsCollapsed,
+                    renderCalendarContextMenu: config.renderCalendarContextMenu,
+                    createCalendarMode: config.createCalendarMode,
+                    renderCreateCalendarDialog: config.renderCreateCalendarDialog,
+                    editingCalendarId,
+                    setEditingCalendarId,
+                    onCreateCalendar: handleCreateCalendar,
+                    colorPickerMode: config.colorPickerMode,
+                }), [
+                    app,
+                    calendars,
+                    handleToggleCalendarVisibility,
+                    handleToggleAllCalendars,
+                    isCollapsed,
+                    handleCreateCalendar,
+                    editingCalendarId,
+                    config,
+                ]);
+                const renderContent = () => {
+                    var _a;
+                    if (config.render) {
+                        return preact.h(core.ContentSlot, {
+                            generatorName: 'sidebar',
+                            generatorArgs: sidebarProps,
+                        });
+                    }
+                    return preact.h(DefaultCalendarSidebar, Object.assign(Object.assign({}, sidebarProps), { colorPickerMode: (_a = config.colorPickerMode) !== null && _a !== void 0 ? _a : sidebarProps.colorPickerMode }));
+                };
+                const renderExtraContent = () => {
+                    if (!showCreateDialog)
+                        return null;
+                    const onClose = () => setShowCreateDialog(false);
+                    const onCreate = (newCalendar) => {
+                        app.createCalendar(newCalendar);
+                        setShowCreateDialog(false);
+                        refreshSidebar();
+                    };
+                    const generatorArgs = {
+                        onClose,
+                        onCreate,
+                        colorPickerMode: config.colorPickerMode,
+                    };
+                    return preact.h(core.ContentSlot, {
+                        generatorName: 'createCalendarDialog',
+                        generatorArgs,
+                        defaultContent: preact.h(core.CreateCalendarDialog, {
+                            onClose,
+                            onCreate,
+                            colorPickerMode: config.colorPickerMode,
+                        }),
+                    });
+                };
+                return {
+                    enabled: true,
+                    width: sidebarWidth,
+                    isCollapsed,
+                    toggleCollapsed: () => setIsCollapsed(prev => !prev),
+                    miniWidth: (_b = config.miniWidth) !== null && _b !== void 0 ? _b : '50px',
+                    content: renderContent(),
+                    extraContent: renderExtraContent(),
+                    safeAreaLeft: 0,
+                };
+            });
+        },
+    };
+}
+
+exports.createSidebarPlugin = createSidebarPlugin;