@dayflow/plugin-sidebar 1.2.4 → 1.2.6

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ICalendarApp, CalendarType, TNode, SidebarHeaderSlotArgs, CreateCalendarDialogProps, CalendarPlugin } from '@dayflow/core';
+import { ICalendarApp, CalendarType, TNode, SidebarHeaderSlotArgs, CreateCalendarDialogProps, Event, CalendarPlugin } from '@dayflow/core';
 export { SidebarHeaderSlotArgs } from '@dayflow/core';
 
 interface CalendarSidebarRenderProps {
@@ -15,6 +15,8 @@ interface CalendarSidebarRenderProps {
     editingCalendarId?: string | null;
     setEditingCalendarId?: (id: string | null) => void;
     onCreateCalendar?: () => void;
+    onSubscribeCalendar?: (calendar: CalendarType, events: Event[]) => Promise<void>;
+    onLoadSubscription?: (calendar: CalendarType) => Promise<void>;
 }
 interface SidebarPluginConfig {
     width?: number | string;
@@ -25,6 +27,8 @@ interface SidebarPluginConfig {
     renderCalendarContextMenu?: (calendar: CalendarType, onClose: () => void) => TNode;
     renderSidebarHeader?: (args: SidebarHeaderSlotArgs) => TNode;
     renderCreateCalendarDialog?: (props: CreateCalendarDialogProps) => TNode;
+    onSubscribeCalendar?: (calendar: CalendarType, events: Event[]) => Promise<void>;
+    onLoadSubscription?: (calendar: CalendarType) => Promise<void>;
     [key: string]: unknown;
 }
 declare function createSidebarPlugin(config?: SidebarPluginConfig): CalendarPlugin;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { ChevronDown, AudioLines, useLocale, createPortal, cancelButton, ChevronsUpDown, Check, ChevronRight, sidebarHeader, sidebarHeaderToggle, PanelRightClose, PanelRightOpen, sidebarHeaderTitle, getCalendarColorsForHex, generateUniKey, downloadICS, ContentSlot, MiniCalendar, ContextMenu, ContextMenuLabel, ContextMenuItem, ContextMenuSeparator, ContextMenuColorPicker, DefaultColorPicker, BlossomColorPicker, importICSFile, parseICS, sidebarContainer, normalizeCssWidth, registerSidebarImplementation, CreateCalendarDialog } from '@dayflow/core';
+import { ChevronDown, AudioLines, AlertCircle, useLocale, createPortal, cancelButton, LoadingButton, ChevronsUpDown, Check, ChevronRight, sidebarHeader, sidebarHeaderToggle, PanelRightClose, PanelRightOpen, sidebarHeaderTitle, getCalendarColorsForHex, generateUniKey, downloadICS, ContentSlot, MiniCalendar, ContextMenu, ContextMenuLabel, ContextMenuItem, ContextMenuSeparator, ContextMenuColorPicker, DefaultColorPicker, BlossomColorPicker, importICSFile, subscribeCalendar, sidebarContainer, normalizeCssWidth, registerSidebarImplementation, CreateCalendarDialog } from '@dayflow/core';
 import { options, Fragment, h } from 'preact';
 import { useState, useRef, useCallback, useEffect, useMemo } from 'preact/hooks';
 import { hexToHsl, lightnessToSliderValue } from '@dayflow/blossom-color-picker';
@@ -45,7 +45,7 @@ const getCalendarInitials = (calendar) => {
     return name.charAt(0).toUpperCase();
 };
 const CalendarItem = ({ calendar, isDraggable, isEditable: _isEditable, editingId, editingName, setEditingName, editInputRef, draggedCalendarId, dropTarget, activeContextMenuCalendarId, onDragStart, onDragEnd, onDragOver, onDragLeave, onDrop, onContextMenu, onToggleVisibility, onRenameStart, onRenameSave, onRenameKeyDown, }) => {
-    var _a;
+    var _a, _b;
     const isVisible = calendar.isVisible !== false;
     const calendarColor = ((_a = calendar.colors) === null || _a === void 0 ? void 0 : _a.lineColor) || '#3b82f6';
     const showIcon = Boolean(calendar.icon);
@@ -53,7 +53,9 @@ const CalendarItem = ({ calendar, isDraggable, isEditable: _isEditable, editingI
     const isActive = activeContextMenuCalendarId === calendar.id || editingId === calendar.id;
     return (u("li", { className: 'df-calendar-list-item relative', onDragOver: e => onDragOver(e, calendar.id), onDragLeave: onDragLeave, onDrop: () => onDrop(calendar), onContextMenu: e => onContextMenu(e, calendar.id), children: [isDropTarget && dropTarget.position === 'top' && (u("div", { className: 'pointer-events-none absolute top-0 right-0 left-0 z-10 h-0.5 bg-[var(--df-color-primary)]' })), u("div", { draggable: isDraggable && !editingId, onDragStart: e => onDragStart(calendar, e), onDragEnd: onDragEnd, 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: 'df-calendar-checkbox shrink-0 cursor-pointer', style: {
                                 '--checkbox-color': calendarColor,
-                            }, 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: onRenameSave, onKeyDown: onRenameKeyDown, className: 'ml-2 h-5 min-w-0 flex-1 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(Fragment, { children: [u("span", { className: 'ml-2 flex-1 truncate pl-1 text-sm text-gray-700 group-hover:text-gray-900 dark:text-gray-200 dark:group-hover:text-white', onDblClick: () => onRenameStart(calendar), children: calendar.name || calendar.id }), calendar.subscribed && (u(AudioLines, { width: 13, height: 13, className: 'ml-1 shrink-0 text-gray-400 dark:text-gray-500' }))] }))] }) }), isDropTarget && dropTarget.position === 'bottom' && (u("div", { className: 'pointer-events-none absolute right-0 bottom-0 left-0 z-10 h-0.5 bg-[var(--df-color-primary)]' }))] }, 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: onRenameSave, onKeyDown: onRenameKeyDown, className: 'ml-2 h-5 min-w-0 flex-1 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(Fragment, { children: [u("span", { className: 'ml-2 flex-1 truncate pl-1 text-sm text-gray-700 group-hover:text-gray-900 dark:text-gray-200 dark:group-hover:text-white', onDblClick: () => onRenameStart(calendar), children: calendar.name || calendar.id }), ((_b = calendar.subscription) === null || _b === void 0 ? void 0 : _b.status) === 'error' && (u(AlertCircle, { width: 13, height: 13, className: 'ml-1 shrink-0 text-red-500', title: 'Failed to load subscription' })), calendar.subscribed &&
+                                    (!calendar.subscription ||
+                                        calendar.subscription.status === 'ready') && (u(AudioLines, { width: 13, height: 13, className: 'ml-1 shrink-0 text-gray-400 dark:text-gray-500' }))] }))] }) }), isDropTarget && dropTarget.position === 'bottom' && (u("div", { className: 'pointer-events-none absolute right-0 bottom-0 left-0 z-10 h-0.5 bg-[var(--df-color-primary)]' }))] }, calendar.id));
 };
 const CalendarList = ({ calendars, onToggleVisibility, onReorder, onRename, onContextMenu, editingId, setEditingId, activeContextMenuCalendarId, isDraggable = true, isEditable = true, }) => {
     var _a;
@@ -245,16 +247,39 @@ function renderWithChip(template, name, color) {
 const DeleteCalendarDialog = ({ calendarId, calendarName, calendars, step, onStepChange, onConfirmDelete, onCancel, onMergeSelect, }) => {
     var _a, _b;
     const [showMergeDropdown, setShowMergeDropdown] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
     const { t } = useLocale();
     const calendarColor = (_b = (_a = calendars.find(c => c.id === calendarId)) === null || _a === void 0 ? void 0 : _a.colors.lineColor) !== null && _b !== void 0 ? _b : '#6b7280';
-    return createPortal(u("div", { className: 'df-portal fixed inset-0 z-[9999] 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-gray-800', children: step === 'initial' ? (u(Fragment, { children: [u("h2", { className: 'text-lg font-semibold text-gray-900 dark:text-white', children: t('deleteCalendar', { calendarName }) }), u("p", { className: 'mt-3 flex flex-wrap items-center gap-y-0.5 text-sm text-gray-600 dark:text-gray-300', children: renderWithChip(t('deleteCalendarMessage', { calendarName: CAL_SENTINEL }), calendarName, calendarColor) }), u("div", { className: 'mt-6 flex items-center justify-between', 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 top-full left-0 z-10 mt-1 max-h-60 w-max min-w-full overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg dark:border-slate-700 dark:bg-gray-800', children: calendars
+    const handleMergeSelect = (id) => __awaiter(void 0, void 0, void 0, function* () {
+        if (isLoading)
+            return;
+        setIsLoading(true);
+        try {
+            yield onMergeSelect(id);
+            setShowMergeDropdown(false);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    const handleConfirmDelete = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (isLoading)
+            return;
+        setIsLoading(true);
+        try {
+            yield onConfirmDelete();
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    return createPortal(u("div", { className: 'df-portal fixed inset-0 z-[9999] 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-gray-800', children: step === 'initial' ? (u(Fragment, { children: [u("h2", { className: 'text-lg font-semibold text-gray-900 dark:text-white', children: t('deleteCalendar', { calendarName }) }), u("p", { className: 'mt-3 flex flex-wrap items-center gap-y-0.5 text-sm text-gray-600 dark:text-gray-300', children: renderWithChip(t('deleteCalendarMessage', { calendarName: CAL_SENTINEL }), calendarName, calendarColor) }), u("div", { className: 'mt-6 flex items-center justify-between', children: [u("div", { className: 'relative', children: [u("button", { type: 'button', disabled: isLoading, 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 disabled:opacity-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-slate-700', children: t('merge') }), showMergeDropdown && (u("div", { className: 'absolute top-full left-0 z-10 mt-1 max-h-60 w-max min-w-full overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg dark:border-slate-700 dark:bg-gray-800', children: calendars
                                             .filter(c => c.id !== calendarId)
                                             .map(calendar => (u("div", { className: 'flex cursor-pointer items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-slate-700', onClick: () => {
-                                                onMergeSelect(calendar.id);
-                                                setShowMergeDropdown(false);
+                                                handleMergeSelect(calendar.id);
                                             }, children: [u("div", { className: 'mr-2 h-3 w-3 shrink-0 rounded-sm', 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: 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(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 border border-border bg-background 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);
+                                                    } }), 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, disabled: isLoading, className: `${cancelButton} disabled:opacity-50`, children: t('cancel') }), u("button", { type: 'button', onClick: () => onStepChange('confirm_delete'), disabled: isLoading, className: 'df-fill-destructive df-hover-destructive rounded-md px-4 py-2 text-xs font-medium disabled:opacity-50', children: t('delete') })] })] })] })) : (u(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, disabled: isLoading, className: 'rounded-md border border-border bg-background px-3 py-2 text-xs font-medium text-gray-700 hover:bg-gray-100 disabled:opacity-50 dark:text-gray-300 dark:hover:bg-slate-700', children: t('cancel') }), u(LoadingButton, { type: 'button', onClick: handleConfirmDelete, loading: isLoading, className: 'df-fill-destructive df-hover-destructive rounded-md px-3 py-2 text-xs font-medium', children: t('delete') })] })] })) }) }), document.body);
 };
 
 const NEW_CALENDAR_ID = 'new-calendar';
@@ -264,6 +289,7 @@ const ImportCalendarDialog = ({ calendars, filename, onConfirm, onCancel, }) =>
     const [selectedCalendarId, setSelectedCalendarId] = useState(((_a = calendars[0]) === null || _a === void 0 ? void 0 : _a.id) || NEW_CALENDAR_ID);
     const [isOpen, setIsOpen] = useState(false);
     const [shouldRender, setShouldRender] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
     const dropdownRef = useRef(null);
     const triggerRef = useRef(null);
     useEffect(() => {
@@ -293,6 +319,17 @@ const ImportCalendarDialog = ({ calendars, filename, onConfirm, onCancel, }) =>
         setSelectedCalendarId(id);
         setIsOpen(false);
     };
+    const handleConfirm = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (isLoading)
+            return;
+        setIsLoading(true);
+        try {
+            yield onConfirm(selectedCalendarId);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
     const renderDropdown = () => {
         var _a;
         if (!shouldRender)
@@ -300,17 +337,17 @@ const ImportCalendarDialog = ({ calendars, filename, onConfirm, onCancel, }) =>
         const rect = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
         if (!rect)
             return null;
-        return createPortal(u("div", { ref: dropdownRef, className: `fixed z-110 mt-1 max-h-60 origin-top overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg transition-all duration-200 dark:border-slate-700 dark:bg-slate-800 ${isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}`, style: {
+        return createPortal(u("div", { ref: dropdownRef, className: `df-portal fixed z-110 mt-1 max-h-60 origin-top overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg transition-all duration-200 dark:border-slate-700 dark:bg-slate-800 ${isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}`, style: {
                 top: rect.bottom,
                 left: rect.left,
                 width: rect.width,
                 overscrollBehavior: 'none',
-            }, children: u("div", { className: 'py-1', children: [calendars.map(calendar => (u("div", { className: `flex cursor-pointer items-center px-3 py-2 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 truncate text-sm ${selectedCalendarId === calendar.id ? 'font-medium text-primary' : 'text-gray-700 dark:text-gray-200'}`, children: calendar.name || calendar.id }), selectedCalendarId === calendar.id && (u(Check, { className: 'ml-2 h-4 w-4 shrink-0 text-primary' }))] }, calendar.id))), u("div", { className: 'my-1 border-t border-gray-100 dark:border-slate-700' }), u("div", { className: `flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100 dark:hover:bg-slate-700 ${isNewSelected ? 'bg-primary/10' : ''}`, onClick: () => handleSelect(NEW_CALENDAR_ID), children: [u("span", { className: `flex-1 truncate text-sm ${isNewSelected ? 'font-medium text-primary' : 'pl-6 text-gray-700 dark:text-gray-200'}`, children: [t('newCalendar') || 'New Calendar', ": ", filename] }), isNewSelected && (u(Check, { className: 'ml-2 h-4 w-4 shrink-0 text-primary' }))] })] }) }), document.body);
+            }, children: u("div", { className: 'py-1', children: [calendars.map(calendar => (u("div", { className: `flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100 dark:hover:bg-slate-700 ${selectedCalendarId === calendar.id ? 'df-tint-primary' : ''}`, 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 truncate text-sm ${selectedCalendarId === calendar.id ? 'df-text-primary font-medium' : 'text-gray-700 dark:text-gray-200'}`, children: calendar.name || calendar.id }), selectedCalendarId === calendar.id && (u(Check, { className: 'df-text-primary ml-2 h-4 w-4 shrink-0' }))] }, calendar.id))), u("div", { className: 'my-1 border-t border-gray-100 dark:border-slate-700' }), u("div", { className: `flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100 dark:hover:bg-slate-700 ${isNewSelected ? 'df-tint-primary' : ''}`, onClick: () => handleSelect(NEW_CALENDAR_ID), children: [u("span", { className: `flex-1 truncate text-sm ${isNewSelected ? 'df-text-primary font-medium' : 'pl-6 text-gray-700 dark:text-gray-200'}`, children: [t('newCalendar') || 'New Calendar', ": ", filename] }), isNewSelected && (u(Check, { className: 'df-text-primary ml-2 h-4 w-4 shrink-0' }))] })] }) }), document.body);
     };
     return (u("div", { className: 'df-portal 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-gray-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 w-full items-center rounded-md border border-gray-300 px-3 py-2 shadow-sm transition-colors hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-800', 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: `flex-1 truncate text-left text-sm font-medium text-gray-700 dark:text-gray-200 ${isNewSelected ? 'pl-0' : ''}`, children: isNewSelected
+                        'This calendar contains new events. Please select a target calendar.' }), u("div", { className: 'relative', children: [u("button", { ref: triggerRef, type: 'button', disabled: isLoading, className: 'flex w-full items-center rounded-md border border-gray-300 px-3 py-2 shadow-sm transition-colors hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:hover:bg-gray-800', 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: `flex-1 truncate text-left text-sm font-medium text-gray-700 dark:text-gray-200 ${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(ChevronsUpDown, { className: 'ml-2 h-4 w-4 shrink-0 text-gray-400' })] }), renderDropdown()] }), u("div", { className: 'mt-8 flex justify-end gap-3', children: [u("button", { type: 'button', onClick: onCancel, className: 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 shadow-sm transition-colors hover:bg-primary/90', children: t('ok') || 'OK' })] })] }) }));
+                                        : (selectedCalendar === null || selectedCalendar === void 0 ? void 0 : selectedCalendar.name) || (selectedCalendar === null || selectedCalendar === void 0 ? void 0 : selectedCalendar.id) }), u(ChevronsUpDown, { className: 'ml-2 h-4 w-4 shrink-0 text-gray-400' })] }), renderDropdown()] }), u("div", { className: 'mt-8 flex justify-end gap-3', children: [u("button", { type: 'button', onClick: onCancel, disabled: isLoading, className: `${cancelButton} disabled:opacity-50`, children: t('cancel') || 'Cancel' }), u(LoadingButton, { type: 'button', onClick: handleConfirm, loading: isLoading, className: 'df-fill-primary df-hover-primary-solid rounded-md px-6 py-2 text-sm font-medium shadow-sm transition-colors', children: t('ok') || 'OK' })] })] }) }));
 };
 
 const SOURCE_SENTINEL = '\u0001S\u0001';
@@ -328,6 +365,7 @@ function renderLine(line, source, target) {
 }
 const MergeCalendarDialog = ({ sourceName, sourceColor, targetName, targetColor, onConfirm, onCancel, }) => {
     const { t } = useLocale();
+    const [isLoading, setIsLoading] = useState(false);
     const source = { name: sourceName, color: sourceColor };
     const target = { name: targetName, color: targetColor };
     const messageTemplate = t('mergeConfirmMessage', {
@@ -335,7 +373,18 @@ const MergeCalendarDialog = ({ sourceName, sourceColor, targetName, targetColor,
         targetName: TARGET_SENTINEL,
     });
     const messageLines = messageTemplate.split('\n');
-    return (u("div", { className: 'df-portal fixed inset-0 z-[9999] flex items-center justify-center bg-black/50', children: u("div", { className: 'rounded-lg bg-white p-6 shadow-xl dark:bg-gray-800', children: [u("h2", { className: 'text-lg font-semibold text-gray-900 dark:text-white', children: t('mergeConfirmTitle', { sourceName, targetName }) }), u("div", { className: 'mt-3 space-y-1 text-sm text-gray-600 dark:text-gray-300', children: messageLines.map((line, i) => (u("p", { className: 'flex flex-wrap items-center gap-y-0.5', children: renderLine(line, source, target) }, i))) }), u("div", { className: 'mt-6 flex justify-end gap-3', children: [u("button", { type: 'button', onClick: onCancel, className: 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 handleConfirm = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (isLoading)
+            return;
+        setIsLoading(true);
+        try {
+            yield onConfirm();
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    return (u("div", { className: 'df-portal fixed inset-0 z-[9999] flex items-center justify-center bg-black/50', children: u("div", { className: 'rounded-lg bg-white p-6 shadow-xl dark:bg-gray-800', children: [u("h2", { className: 'text-lg font-semibold text-gray-900 dark:text-white', children: t('mergeConfirmTitle', { sourceName, targetName }) }), u("div", { className: 'mt-3 space-y-1 text-sm text-gray-600 dark:text-gray-300', children: messageLines.map((line, i) => (u("p", { className: 'flex flex-wrap items-center gap-y-0.5', children: renderLine(line, source, target) }, i))) }), u("div", { className: 'mt-6 flex justify-end gap-3', children: [u("button", { type: 'button', onClick: onCancel, disabled: isLoading, className: `${cancelButton} disabled:opacity-50`, children: t('cancel') }), u(LoadingButton, { type: 'button', onClick: handleConfirm, loading: isLoading, className: 'df-fill-destructive df-hover-destructive rounded-md px-3 py-2 text-xs font-medium', children: t('merge') })] })] }) }));
 };
 
 const stopPropagation = (e) => e.stopPropagation();
@@ -398,8 +447,13 @@ const SubscribeCalendarDialog = ({ onSubscribe, onCancel, }) => {
         try {
             yield onSubscribe(trimmed);
         }
-        catch (_a) {
-            setError(t('subscribeError'));
+        catch (err) {
+            if (err.message === 'DUPLICATE_URL') {
+                setError(t('calendarAlreadySubscribed') || 'This URL is already subscribed');
+            }
+            else {
+                setError(t('subscribeError') || 'Failed to subscribe to calendar');
+            }
         }
         finally {
             setLoading(false);
@@ -411,10 +465,10 @@ const SubscribeCalendarDialog = ({ onSubscribe, onCancel, }) => {
         if (e.key === 'Escape')
             onCancel();
     };
-    return (u("div", { className: 'df-portal fixed inset-0 z-[9999] flex items-center justify-center bg-black/50', children: u("div", { className: 'w-full max-w-xl rounded-lg bg-white p-6 shadow-xl dark:bg-gray-800', children: [u("h2", { className: 'text-lg font-semibold text-gray-900 dark:text-white', children: t('subscribeCalendarTitle') }), u("div", { className: 'mt-4', children: [u("div", { className: 'flex items-center gap-3', children: [u("label", { className: 'shrink-0 text-sm font-medium text-gray-700 dark:text-gray-300', children: t('calendarUrl') }), u("input", { type: 'url', value: url, onInput: e => setUrl(e.target.value), onKeyDown: handleKeyDown, placeholder: t('calendarUrlPlaceholder'), disabled: loading, autoFocus: true, className: 'flex-1 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400' })] }), error && (u("p", { className: 'mt-2 text-xs text-red-500 dark:text-red-400', children: error }))] }), u("div", { className: 'mt-6 flex justify-end gap-3', children: [u("button", { type: 'button', onClick: onCancel, disabled: loading, className: cancelButton, children: t('cancel') }), u("button", { type: 'button', onClick: handleSubmit, disabled: loading || !url.trim(), className: 'rounded-md bg-primary px-4 py-2 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50', children: loading ? t('fetchingCalendar') : t('subscribe') })] })] }) }));
+    return (u("div", { className: 'df-portal fixed inset-0 z-[9999] flex items-center justify-center bg-black/50', children: u("div", { className: 'w-full max-w-xl rounded-lg bg-white p-6 shadow-xl dark:bg-gray-800', children: [u("h2", { className: 'text-lg font-semibold text-gray-900 dark:text-white', children: t('subscribeCalendarTitle') }), u("div", { className: 'mt-4', children: [u("div", { className: 'flex items-center gap-3', children: [u("label", { className: 'shrink-0 text-sm font-medium text-gray-700 dark:text-gray-300', children: t('calendarUrl') }), u("input", { type: 'url', value: url, onInput: e => setUrl(e.target.value), onKeyDown: handleKeyDown, placeholder: t('calendarUrlPlaceholder'), disabled: loading, autoFocus: true, className: 'df-focus-ring flex-1 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:ring-1 focus:outline-none disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400' })] }), error && (u("p", { className: 'mt-2 text-xs text-red-500 dark:text-red-400', children: error }))] }), u("div", { className: 'mt-6 flex justify-end gap-3', children: [u("button", { type: 'button', onClick: onCancel, disabled: loading, className: cancelButton, children: t('cancel') }), u("button", { type: 'button', onClick: handleSubmit, disabled: loading || !url.trim(), className: 'df-fill-primary df-hover-primary-solid rounded-md px-4 py-2 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50', children: loading ? t('fetchingCalendar') : t('subscribe') })] })] }) }));
 };
 
-const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCollapsed, setCollapsed, renderCalendarContextMenu, renderSidebarHeader, editingCalendarId: propEditingCalendarId, setEditingCalendarId: propSetEditingCalendarId, onCreateCalendar, }) => {
+const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCollapsed, setCollapsed, renderCalendarContextMenu, renderSidebarHeader, editingCalendarId: propEditingCalendarId, setEditingCalendarId: propSetEditingCalendarId, onCreateCalendar, onSubscribeCalendar, onLoadSubscription, }) => {
     var _a, _b;
     const { t } = useLocale();
     // Detect if custom color picker slot is provided
@@ -427,6 +481,33 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
     // File input ref for import
     const fileInputRef = useRef(null);
     const contextMenuRef = useRef(null);
+    // Track loaded subscription URLs to avoid redundant fetching
+    const loadedSubscriptionsRef = useRef(new Set());
+    // Auto-load subscriptions on mount or when calendars change
+    useEffect(() => {
+        calendars.forEach((calendar) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            if (((_a = calendar.subscription) === null || _a === void 0 ? void 0 : _a.url) &&
+                !loadedSubscriptionsRef.current.has(calendar.subscription.url)) {
+                loadedSubscriptionsRef.current.add(calendar.subscription.url);
+                try {
+                    if (onLoadSubscription) {
+                        yield onLoadSubscription(calendar);
+                    }
+                    else {
+                        const { events } = yield subscribeCalendar(calendar.subscription.url);
+                        app.addExternalEvents(calendar.id, events);
+                    }
+                }
+                catch (err) {
+                    console.error(`Failed to auto-load calendar ${calendar.name}:`, err);
+                    app.updateCalendar(calendar.id, {
+                        subscription: Object.assign(Object.assign({}, calendar.subscription), { status: 'error' }),
+                    });
+                }
+            }
+        }));
+    }, [app, calendars, onLoadSubscription]);
     const handleMonthChange = useCallback((offset) => {
         const current = app.getVisibleMonth();
         const next = new Date(current.getFullYear(), current.getMonth() + offset, 1);
@@ -531,19 +612,19 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
             handleCloseContextMenu();
         }
     }, [contextMenu, handleCloseContextMenu]);
-    const handleMergeConfirm = useCallback(() => {
+    const handleMergeConfirm = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (mergeState) {
             const { sourceId, targetId } = mergeState;
-            app.mergeCalendars(sourceId, targetId);
+            yield app.mergeCalendars(sourceId, targetId);
             setMergeState(null);
         }
-    }, [app, mergeState]);
-    const handleConfirmDelete = useCallback(() => {
+    }), [app, mergeState]);
+    const handleConfirmDelete = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (deleteState) {
-            app.deleteCalendar(deleteState.calendarId);
+            yield app.deleteCalendar(deleteState.calendarId);
             setDeleteState(null);
         }
-    }, [app, deleteState]);
+    }), [app, deleteState]);
     const handleDeleteMergeSelect = useCallback((targetId) => {
         if (deleteState) {
             setMergeState({
@@ -565,45 +646,31 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
         handleCloseSidebarContextMenu();
     }, [handleCloseSidebarContextMenu]);
     const handleSubscribeConfirm = useCallback((url) => __awaiter(void 0, void 0, void 0, function* () {
-        const response = yield fetch(url);
-        if (!response.ok)
-            throw new Error(`HTTP ${response.status}`);
-        const icsContent = yield response.text();
-        const result = parseICS(icsContent);
-        // Extract calendar name from X-WR-CALNAME if present
-        const nameMatch = icsContent.match(/X-WR-CALNAME[^:]*:([^\r\n]+)/);
-        const calendarName = nameMatch
-            ? nameMatch[1].trim()
-            : new URL(url).hostname;
-        const presetColors = [
-            '#3b82f6',
-            '#10b981',
-            '#8b5cf6',
-            '#f59e0b',
-            '#ef4444',
-            '#f97316',
-            '#ec4899',
-            '#14b8a6',
-            '#6366f1',
-            '#6b7280',
-        ];
-        const randomColor = presetColors[Math.floor(Math.random() * presetColors.length)];
-        const { colors: calendarColors, darkColors } = getCalendarColorsForHex(randomColor);
-        const calendarId = generateUniKey();
-        app.createCalendar({
-            id: calendarId,
-            name: calendarName,
-            isDefault: false,
-            colors: calendarColors,
-            darkColors,
-            isVisible: true,
-            subscribed: true,
-        });
-        result.events.forEach(event => {
-            app.addEvent(Object.assign(Object.assign({}, event), { calendarId }));
-        });
+        var _a;
+        // 1. Check for duplicates
+        const isDuplicate = calendars.some(c => { var _a; return ((_a = c.subscription) === null || _a === void 0 ? void 0 : _a.url) === url; });
+        if (isDuplicate) {
+            throw new Error('DUPLICATE_URL');
+        }
+        // 2. Load the subscription (fetch + parse) using the new utility
+        const { calendar, events } = yield subscribeCalendar(url);
+        // 3. Mark as loaded to avoid the useEffect triggering another fetch
+        if ((_a = calendar.subscription) === null || _a === void 0 ? void 0 : _a.url) {
+            loadedSubscriptionsRef.current.add(calendar.subscription.url);
+        }
+        // 4. Delegate to user if callback exists, otherwise use default behavior
+        if (onSubscribeCalendar) {
+            yield onSubscribeCalendar(calendar, events);
+        }
+        else {
+            // Default behavior: create calendar in the app
+            app.createCalendar(calendar);
+        }
+        // 4. Always add events to the internal external store for IMMEDIATE display
+        app.addExternalEvents(calendar.id, events);
+        // 5. Close dialog
         setSubscribeDialogOpen(false);
-    }), [app]);
+    }), [app, onSubscribeCalendar, calendars]);
     const handleFileChange = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
         const file = (_a = e.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
@@ -687,8 +754,20 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
         ? ((_a = calendars.find(c => c.id === deleteState.calendarId)) === null || _a === void 0 ? void 0 : _a.name) || 'Unknown'
         : '';
     const readOnlyConfig = app.getReadOnlyConfig();
-    const isEditable = !app.state.readOnly;
+    const isEditable = app.canMutateFromUI();
     const isDraggable = readOnlyConfig.draggable !== false;
+    useEffect(() => {
+        if (isEditable)
+            return;
+        setContextMenu(null);
+        setSidebarContextMenu(null);
+        setCustomColorPicker(null);
+        setMergeState(null);
+        setDeleteState(null);
+        setImportState(null);
+        setSubscribeDialogOpen(false);
+        setEditingCalendarId(null);
+    }, [isEditable, setEditingCalendarId]);
     return (u("div", { className: sidebarContainer, onContextMenu: isEditable ? handleSidebarContextMenu : undefined, children: [u(ContentSlot, { generatorName: 'sidebarHeader', generatorArgs: {
                     isCollapsed,
                     onCollapseToggle: () => setCollapsed(!isCollapsed),
@@ -719,21 +798,27 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
                             ? handleContextMenu
                             : () => {
                                 /* noop */
-                            }, 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) }) })] })), contextMenu && (u(ContextMenu, { ref: contextMenuRef, x: contextMenu.x, y: contextMenu.y, onClose: handleCloseContextMenu, className: 'w-64 p-2', children: u(ContentSlot, { generatorName: 'calendarContextMenu', generatorArgs: {
+                            }, 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) }) })] })), 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: (_b = calendars.find(c => c.id === contextMenu.calendarId)) === null || _b === void 0 ? void 0 : _b.colors.lineColor, onSelect: handleColorSelect, onCustomColor: handleCustomColor })] })) }) })), sidebarContextMenu &&
+                    }, 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: (_b = calendars.find(c => c.id === contextMenu.calendarId)) === null || _b === void 0 ? void 0 : _b.colors.lineColor, onSelect: handleColorSelect, onCustomColor: handleCustomColor })] })) }) })), isEditable &&
+                sidebarContextMenu &&
                 createPortal(u(ContextMenu, { x: sidebarContextMenu.x, y: sidebarContextMenu.y, onClose: handleCloseSidebarContextMenu, className: 'w-max p-2', children: [u(ContextMenuItem, { onClick: () => {
                                 onCreateCalendar === null || onCreateCalendar === void 0 ? void 0 : onCreateCalendar();
                                 handleCloseSidebarContextMenu();
                             }, children: t('newCalendar') || 'New Calendar' }), u(ContextMenuItem, { onClick: handleImportClick, children: t('importCalendar') || 'Import Calendar' }), u(ContextMenuItem, { onClick: handleSubscribeClick, children: t('subscribeCalendar') || 'Subscribe to Calendar' }), u(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 &&
-                createPortal(u(ImportCalendarDialog, { calendars: calendars, filename: importState.filename, onConfirm: handleImportConfirm, onCancel: () => setImportState(null) }), document.body), subscribeDialogOpen &&
-                createPortal(u(SubscribeCalendarDialog, { onSubscribe: handleSubscribeConfirm, onCancel: () => setSubscribeDialogOpen(false) }), document.body), mergeState &&
-                createPortal(u(MergeCalendarDialog, { sourceName: sourceCalendarName, sourceColor: sourceCalendarColor, targetName: targetCalendarName, targetColor: targetCalendarColor, onConfirm: handleMergeConfirm, onCancel: () => setMergeState(null) }), document.body), deleteState &&
-                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 &&
+                            }, children: t('refreshAll') || 'Refresh All' })] }), document.body), u("input", { ref: fileInputRef, type: 'file', accept: '.ics', style: { display: 'none' }, onChange: handleFileChange }), isEditable &&
+                importState &&
+                createPortal(u(ImportCalendarDialog, { calendars: calendars, filename: importState.filename, onConfirm: handleImportConfirm, onCancel: () => setImportState(null) }), document.body), isEditable &&
+                subscribeDialogOpen &&
+                createPortal(u(SubscribeCalendarDialog, { onSubscribe: handleSubscribeConfirm, onCancel: () => setSubscribeDialogOpen(false) }), document.body), isEditable &&
+                mergeState &&
+                createPortal(u(MergeCalendarDialog, { sourceName: sourceCalendarName, sourceColor: sourceCalendarColor, targetName: targetCalendarName, targetColor: targetCalendarColor, onConfirm: handleMergeConfirm, onCancel: () => setMergeState(null) }), document.body), isEditable &&
+                deleteState &&
+                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), isEditable &&
+                customColorPicker &&
                 createPortal(u("div", { className: 'fixed inset-0 z-50', onMouseDown: () => {
                         app.updateCalendar(customColorPicker.calendarId, {});
                         setCustomColorPicker(null);
@@ -804,6 +889,7 @@ function createSidebarPlugin(config = {}) {
                 const [sidebarVersion, setSidebarVersion] = useState(0);
                 const [editingCalendarId, setEditingCalendarId] = useState(null);
                 const [showCreateDialog, setShowCreateDialog] = useState(false);
+                const isEditable = app.canMutateFromUI();
                 const refreshSidebar = useCallback(() => {
                     setSidebarVersion(prev => prev + 1);
                 }, []);
@@ -820,6 +906,8 @@ function createSidebarPlugin(config = {}) {
                     refreshSidebar();
                 }, [app, refreshSidebar]);
                 const handleCreateCalendar = useCallback(() => {
+                    if (!isEditable)
+                        return;
                     const createMode = config.createCalendarMode || 'inline';
                     if (createMode === 'modal') {
                         setShowCreateDialog(true);
@@ -839,7 +927,13 @@ function createSidebarPlugin(config = {}) {
                     app.createCalendar(newCalendar);
                     setEditingCalendarId(newId);
                     refreshSidebar();
-                }, [app, t, refreshSidebar]);
+                }, [app, isEditable, t, refreshSidebar]);
+                useEffect(() => {
+                    if (isEditable)
+                        return;
+                    setShowCreateDialog(false);
+                    setEditingCalendarId(null);
+                }, [isEditable]);
                 const sidebarProps = useMemo(() => ({
                     app,
                     calendars,
@@ -854,6 +948,8 @@ function createSidebarPlugin(config = {}) {
                     editingCalendarId,
                     setEditingCalendarId,
                     onCreateCalendar: handleCreateCalendar,
+                    onSubscribeCalendar: config.onSubscribeCalendar,
+                    onLoadSubscription: config.onLoadSubscription,
                 }), [
                     app,
                     calendars,
@@ -874,14 +970,14 @@ function createSidebarPlugin(config = {}) {
                     return h(DefaultCalendarSidebar, Object.assign({}, sidebarProps));
                 };
                 const renderExtraContent = () => {
-                    if (!showCreateDialog)
+                    if (!isEditable || !showCreateDialog)
                         return null;
                     const onClose = () => setShowCreateDialog(false);
-                    const onCreate = (newCalendar) => {
-                        app.createCalendar(newCalendar);
+                    const onCreate = (newCalendar) => __awaiter(this, void 0, void 0, function* () {
+                        yield app.createCalendar(newCalendar);
                         setShowCreateDialog(false);
                         refreshSidebar();
-                    };
+                    });
                     const generatorArgs = {
                         onClose,
                         onCreate,

package/dist/index.js

@@ -47,7 +47,7 @@ const getCalendarInitials = (calendar) => {
     return name.charAt(0).toUpperCase();
 };
 const CalendarItem = ({ calendar, isDraggable, isEditable: _isEditable, editingId, editingName, setEditingName, editInputRef, draggedCalendarId, dropTarget, activeContextMenuCalendarId, onDragStart, onDragEnd, onDragOver, onDragLeave, onDrop, onContextMenu, onToggleVisibility, onRenameStart, onRenameSave, onRenameKeyDown, }) => {
-    var _a;
+    var _a, _b;
     const isVisible = calendar.isVisible !== false;
     const calendarColor = ((_a = calendar.colors) === null || _a === void 0 ? void 0 : _a.lineColor) || '#3b82f6';
     const showIcon = Boolean(calendar.icon);
@@ -55,7 +55,9 @@ const CalendarItem = ({ calendar, isDraggable, isEditable: _isEditable, editingI
     const isActive = activeContextMenuCalendarId === calendar.id || editingId === calendar.id;
     return (u("li", { className: 'df-calendar-list-item relative', onDragOver: e => onDragOver(e, calendar.id), onDragLeave: onDragLeave, onDrop: () => onDrop(calendar), onContextMenu: e => onContextMenu(e, calendar.id), children: [isDropTarget && dropTarget.position === 'top' && (u("div", { className: 'pointer-events-none absolute top-0 right-0 left-0 z-10 h-0.5 bg-[var(--df-color-primary)]' })), u("div", { draggable: isDraggable && !editingId, onDragStart: e => onDragStart(calendar, e), onDragEnd: onDragEnd, 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: 'df-calendar-checkbox shrink-0 cursor-pointer', style: {
                                 '--checkbox-color': calendarColor,
-                            }, 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: onRenameSave, onKeyDown: onRenameKeyDown, className: 'ml-2 h-5 min-w-0 flex-1 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(preact.Fragment, { children: [u("span", { className: 'ml-2 flex-1 truncate pl-1 text-sm text-gray-700 group-hover:text-gray-900 dark:text-gray-200 dark:group-hover:text-white', onDblClick: () => onRenameStart(calendar), children: calendar.name || calendar.id }), calendar.subscribed && (u(core.AudioLines, { width: 13, height: 13, className: 'ml-1 shrink-0 text-gray-400 dark:text-gray-500' }))] }))] }) }), isDropTarget && dropTarget.position === 'bottom' && (u("div", { className: 'pointer-events-none absolute right-0 bottom-0 left-0 z-10 h-0.5 bg-[var(--df-color-primary)]' }))] }, 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: onRenameSave, onKeyDown: onRenameKeyDown, className: 'ml-2 h-5 min-w-0 flex-1 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(preact.Fragment, { children: [u("span", { className: 'ml-2 flex-1 truncate pl-1 text-sm text-gray-700 group-hover:text-gray-900 dark:text-gray-200 dark:group-hover:text-white', onDblClick: () => onRenameStart(calendar), children: calendar.name || calendar.id }), ((_b = calendar.subscription) === null || _b === void 0 ? void 0 : _b.status) === 'error' && (u(core.AlertCircle, { width: 13, height: 13, className: 'ml-1 shrink-0 text-red-500', title: 'Failed to load subscription' })), calendar.subscribed &&
+                                    (!calendar.subscription ||
+                                        calendar.subscription.status === 'ready') && (u(core.AudioLines, { width: 13, height: 13, className: 'ml-1 shrink-0 text-gray-400 dark:text-gray-500' }))] }))] }) }), isDropTarget && dropTarget.position === 'bottom' && (u("div", { className: 'pointer-events-none absolute right-0 bottom-0 left-0 z-10 h-0.5 bg-[var(--df-color-primary)]' }))] }, calendar.id));
 };
 const CalendarList = ({ calendars, onToggleVisibility, onReorder, onRename, onContextMenu, editingId, setEditingId, activeContextMenuCalendarId, isDraggable = true, isEditable = true, }) => {
     var _a;
@@ -247,16 +249,39 @@ function renderWithChip(template, name, color) {
 const DeleteCalendarDialog = ({ calendarId, calendarName, calendars, step, onStepChange, onConfirmDelete, onCancel, onMergeSelect, }) => {
     var _a, _b;
     const [showMergeDropdown, setShowMergeDropdown] = hooks.useState(false);
+    const [isLoading, setIsLoading] = hooks.useState(false);
     const { t } = core.useLocale();
     const calendarColor = (_b = (_a = calendars.find(c => c.id === calendarId)) === null || _a === void 0 ? void 0 : _a.colors.lineColor) !== null && _b !== void 0 ? _b : '#6b7280';
-    return core.createPortal(u("div", { className: 'df-portal fixed inset-0 z-[9999] 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-gray-800', 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 flex flex-wrap items-center gap-y-0.5 text-sm text-gray-600 dark:text-gray-300', children: renderWithChip(t('deleteCalendarMessage', { calendarName: CAL_SENTINEL }), calendarName, calendarColor) }), u("div", { className: 'mt-6 flex items-center justify-between', 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 top-full left-0 z-10 mt-1 max-h-60 w-max min-w-full overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg dark:border-slate-700 dark:bg-gray-800', children: calendars
+    const handleMergeSelect = (id) => __awaiter(void 0, void 0, void 0, function* () {
+        if (isLoading)
+            return;
+        setIsLoading(true);
+        try {
+            yield onMergeSelect(id);
+            setShowMergeDropdown(false);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    const handleConfirmDelete = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (isLoading)
+            return;
+        setIsLoading(true);
+        try {
+            yield onConfirmDelete();
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    return core.createPortal(u("div", { className: 'df-portal fixed inset-0 z-[9999] 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-gray-800', 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 flex flex-wrap items-center gap-y-0.5 text-sm text-gray-600 dark:text-gray-300', children: renderWithChip(t('deleteCalendarMessage', { calendarName: CAL_SENTINEL }), calendarName, calendarColor) }), u("div", { className: 'mt-6 flex items-center justify-between', children: [u("div", { className: 'relative', children: [u("button", { type: 'button', disabled: isLoading, 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 disabled:opacity-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-slate-700', children: t('merge') }), showMergeDropdown && (u("div", { className: 'absolute top-full left-0 z-10 mt-1 max-h-60 w-max min-w-full overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg dark:border-slate-700 dark:bg-gray-800', children: calendars
                                             .filter(c => c.id !== calendarId)
                                             .map(calendar => (u("div", { className: 'flex cursor-pointer items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-slate-700', onClick: () => {
-                                                onMergeSelect(calendar.id);
-                                                setShowMergeDropdown(false);
+                                                handleMergeSelect(calendar.id);
                                             }, children: [u("div", { className: 'mr-2 h-3 w-3 shrink-0 rounded-sm', 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 border border-border bg-background 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);
+                                                    } }), 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, disabled: isLoading, className: `${core.cancelButton} disabled:opacity-50`, children: t('cancel') }), u("button", { type: 'button', onClick: () => onStepChange('confirm_delete'), disabled: isLoading, className: 'df-fill-destructive df-hover-destructive rounded-md px-4 py-2 text-xs font-medium disabled:opacity-50', 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, disabled: isLoading, className: 'rounded-md border border-border bg-background px-3 py-2 text-xs font-medium text-gray-700 hover:bg-gray-100 disabled:opacity-50 dark:text-gray-300 dark:hover:bg-slate-700', children: t('cancel') }), u(core.LoadingButton, { type: 'button', onClick: handleConfirmDelete, loading: isLoading, className: 'df-fill-destructive df-hover-destructive rounded-md px-3 py-2 text-xs font-medium', children: t('delete') })] })] })) }) }), document.body);
 };
 
 const NEW_CALENDAR_ID = 'new-calendar';
@@ -266,6 +291,7 @@ const ImportCalendarDialog = ({ calendars, filename, onConfirm, onCancel, }) =>
     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 [isLoading, setIsLoading] = hooks.useState(false);
     const dropdownRef = hooks.useRef(null);
     const triggerRef = hooks.useRef(null);
     hooks.useEffect(() => {
@@ -295,6 +321,17 @@ const ImportCalendarDialog = ({ calendars, filename, onConfirm, onCancel, }) =>
         setSelectedCalendarId(id);
         setIsOpen(false);
     };
+    const handleConfirm = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (isLoading)
+            return;
+        setIsLoading(true);
+        try {
+            yield onConfirm(selectedCalendarId);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
     const renderDropdown = () => {
         var _a;
         if (!shouldRender)
@@ -302,17 +339,17 @@ const ImportCalendarDialog = ({ calendars, filename, onConfirm, onCancel, }) =>
         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 origin-top overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg transition-all duration-200 dark:border-slate-700 dark:bg-slate-800 ${isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}`, style: {
+        return core.createPortal(u("div", { ref: dropdownRef, className: `df-portal fixed z-110 mt-1 max-h-60 origin-top overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg transition-all duration-200 dark:border-slate-700 dark:bg-slate-800 ${isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}`, style: {
                 top: rect.bottom,
                 left: rect.left,
                 width: rect.width,
                 overscrollBehavior: 'none',
-            }, children: u("div", { className: 'py-1', children: [calendars.map(calendar => (u("div", { className: `flex cursor-pointer items-center px-3 py-2 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 truncate text-sm ${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 h-4 w-4 shrink-0 text-primary' }))] }, calendar.id))), u("div", { className: 'my-1 border-t border-gray-100 dark:border-slate-700' }), u("div", { className: `flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100 dark:hover:bg-slate-700 ${isNewSelected ? 'bg-primary/10' : ''}`, onClick: () => handleSelect(NEW_CALENDAR_ID), children: [u("span", { className: `flex-1 truncate text-sm ${isNewSelected ? 'font-medium text-primary' : 'pl-6 text-gray-700 dark:text-gray-200'}`, children: [t('newCalendar') || 'New Calendar', ": ", filename] }), isNewSelected && (u(core.Check, { className: 'ml-2 h-4 w-4 shrink-0 text-primary' }))] })] }) }), document.body);
+            }, children: u("div", { className: 'py-1', children: [calendars.map(calendar => (u("div", { className: `flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100 dark:hover:bg-slate-700 ${selectedCalendarId === calendar.id ? 'df-tint-primary' : ''}`, 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 truncate text-sm ${selectedCalendarId === calendar.id ? 'df-text-primary font-medium' : 'text-gray-700 dark:text-gray-200'}`, children: calendar.name || calendar.id }), selectedCalendarId === calendar.id && (u(core.Check, { className: 'df-text-primary ml-2 h-4 w-4 shrink-0' }))] }, calendar.id))), u("div", { className: 'my-1 border-t border-gray-100 dark:border-slate-700' }), u("div", { className: `flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100 dark:hover:bg-slate-700 ${isNewSelected ? 'df-tint-primary' : ''}`, onClick: () => handleSelect(NEW_CALENDAR_ID), children: [u("span", { className: `flex-1 truncate text-sm ${isNewSelected ? 'df-text-primary font-medium' : 'pl-6 text-gray-700 dark:text-gray-200'}`, children: [t('newCalendar') || 'New Calendar', ": ", filename] }), isNewSelected && (u(core.Check, { className: 'df-text-primary ml-2 h-4 w-4 shrink-0' }))] })] }) }), document.body);
     };
     return (u("div", { className: 'df-portal 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-gray-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 w-full items-center rounded-md border border-gray-300 px-3 py-2 shadow-sm transition-colors hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-800', 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: `flex-1 truncate text-left text-sm font-medium text-gray-700 dark:text-gray-200 ${isNewSelected ? 'pl-0' : ''}`, children: isNewSelected
+                        'This calendar contains new events. Please select a target calendar.' }), u("div", { className: 'relative', children: [u("button", { ref: triggerRef, type: 'button', disabled: isLoading, className: 'flex w-full items-center rounded-md border border-gray-300 px-3 py-2 shadow-sm transition-colors hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:hover:bg-gray-800', 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: `flex-1 truncate text-left text-sm font-medium text-gray-700 dark:text-gray-200 ${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: 'ml-2 h-4 w-4 shrink-0 text-gray-400' })] }), 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 shadow-sm transition-colors hover:bg-primary/90', children: t('ok') || 'OK' })] })] }) }));
+                                        : (selectedCalendar === null || selectedCalendar === void 0 ? void 0 : selectedCalendar.name) || (selectedCalendar === null || selectedCalendar === void 0 ? void 0 : selectedCalendar.id) }), u(core.ChevronsUpDown, { className: 'ml-2 h-4 w-4 shrink-0 text-gray-400' })] }), renderDropdown()] }), u("div", { className: 'mt-8 flex justify-end gap-3', children: [u("button", { type: 'button', onClick: onCancel, disabled: isLoading, className: `${core.cancelButton} disabled:opacity-50`, children: t('cancel') || 'Cancel' }), u(core.LoadingButton, { type: 'button', onClick: handleConfirm, loading: isLoading, className: 'df-fill-primary df-hover-primary-solid rounded-md px-6 py-2 text-sm font-medium shadow-sm transition-colors', children: t('ok') || 'OK' })] })] }) }));
 };
 
 const SOURCE_SENTINEL = '\u0001S\u0001';
@@ -330,6 +367,7 @@ function renderLine(line, source, target) {
 }
 const MergeCalendarDialog = ({ sourceName, sourceColor, targetName, targetColor, onConfirm, onCancel, }) => {
     const { t } = core.useLocale();
+    const [isLoading, setIsLoading] = hooks.useState(false);
     const source = { name: sourceName, color: sourceColor };
     const target = { name: targetName, color: targetColor };
     const messageTemplate = t('mergeConfirmMessage', {
@@ -337,7 +375,18 @@ const MergeCalendarDialog = ({ sourceName, sourceColor, targetName, targetColor,
         targetName: TARGET_SENTINEL,
     });
     const messageLines = messageTemplate.split('\n');
-    return (u("div", { className: 'df-portal fixed inset-0 z-[9999] flex items-center justify-center bg-black/50', children: u("div", { className: 'rounded-lg bg-white p-6 shadow-xl dark:bg-gray-800', children: [u("h2", { className: 'text-lg font-semibold text-gray-900 dark:text-white', children: t('mergeConfirmTitle', { sourceName, targetName }) }), u("div", { className: 'mt-3 space-y-1 text-sm text-gray-600 dark:text-gray-300', children: messageLines.map((line, i) => (u("p", { className: 'flex flex-wrap items-center gap-y-0.5', children: renderLine(line, source, target) }, i))) }), 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 handleConfirm = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (isLoading)
+            return;
+        setIsLoading(true);
+        try {
+            yield onConfirm();
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    return (u("div", { className: 'df-portal fixed inset-0 z-[9999] flex items-center justify-center bg-black/50', children: u("div", { className: 'rounded-lg bg-white p-6 shadow-xl dark:bg-gray-800', children: [u("h2", { className: 'text-lg font-semibold text-gray-900 dark:text-white', children: t('mergeConfirmTitle', { sourceName, targetName }) }), u("div", { className: 'mt-3 space-y-1 text-sm text-gray-600 dark:text-gray-300', children: messageLines.map((line, i) => (u("p", { className: 'flex flex-wrap items-center gap-y-0.5', children: renderLine(line, source, target) }, i))) }), u("div", { className: 'mt-6 flex justify-end gap-3', children: [u("button", { type: 'button', onClick: onCancel, disabled: isLoading, className: `${core.cancelButton} disabled:opacity-50`, children: t('cancel') }), u(core.LoadingButton, { type: 'button', onClick: handleConfirm, loading: isLoading, className: 'df-fill-destructive df-hover-destructive rounded-md px-3 py-2 text-xs font-medium', children: t('merge') })] })] }) }));
 };
 
 const stopPropagation = (e) => e.stopPropagation();
@@ -400,8 +449,13 @@ const SubscribeCalendarDialog = ({ onSubscribe, onCancel, }) => {
         try {
             yield onSubscribe(trimmed);
         }
-        catch (_a) {
-            setError(t('subscribeError'));
+        catch (err) {
+            if (err.message === 'DUPLICATE_URL') {
+                setError(t('calendarAlreadySubscribed') || 'This URL is already subscribed');
+            }
+            else {
+                setError(t('subscribeError') || 'Failed to subscribe to calendar');
+            }
         }
         finally {
             setLoading(false);
@@ -413,10 +467,10 @@ const SubscribeCalendarDialog = ({ onSubscribe, onCancel, }) => {
         if (e.key === 'Escape')
             onCancel();
     };
-    return (u("div", { className: 'df-portal fixed inset-0 z-[9999] flex items-center justify-center bg-black/50', children: u("div", { className: 'w-full max-w-xl rounded-lg bg-white p-6 shadow-xl dark:bg-gray-800', children: [u("h2", { className: 'text-lg font-semibold text-gray-900 dark:text-white', children: t('subscribeCalendarTitle') }), u("div", { className: 'mt-4', children: [u("div", { className: 'flex items-center gap-3', children: [u("label", { className: 'shrink-0 text-sm font-medium text-gray-700 dark:text-gray-300', children: t('calendarUrl') }), u("input", { type: 'url', value: url, onInput: e => setUrl(e.target.value), onKeyDown: handleKeyDown, placeholder: t('calendarUrlPlaceholder'), disabled: loading, autoFocus: true, className: 'flex-1 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400' })] }), error && (u("p", { className: 'mt-2 text-xs text-red-500 dark:text-red-400', children: error }))] }), u("div", { className: 'mt-6 flex justify-end gap-3', children: [u("button", { type: 'button', onClick: onCancel, disabled: loading, className: core.cancelButton, children: t('cancel') }), u("button", { type: 'button', onClick: handleSubmit, disabled: loading || !url.trim(), className: 'rounded-md bg-primary px-4 py-2 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50', children: loading ? t('fetchingCalendar') : t('subscribe') })] })] }) }));
+    return (u("div", { className: 'df-portal fixed inset-0 z-[9999] flex items-center justify-center bg-black/50', children: u("div", { className: 'w-full max-w-xl rounded-lg bg-white p-6 shadow-xl dark:bg-gray-800', children: [u("h2", { className: 'text-lg font-semibold text-gray-900 dark:text-white', children: t('subscribeCalendarTitle') }), u("div", { className: 'mt-4', children: [u("div", { className: 'flex items-center gap-3', children: [u("label", { className: 'shrink-0 text-sm font-medium text-gray-700 dark:text-gray-300', children: t('calendarUrl') }), u("input", { type: 'url', value: url, onInput: e => setUrl(e.target.value), onKeyDown: handleKeyDown, placeholder: t('calendarUrlPlaceholder'), disabled: loading, autoFocus: true, className: 'df-focus-ring flex-1 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:ring-1 focus:outline-none disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400' })] }), error && (u("p", { className: 'mt-2 text-xs text-red-500 dark:text-red-400', children: error }))] }), u("div", { className: 'mt-6 flex justify-end gap-3', children: [u("button", { type: 'button', onClick: onCancel, disabled: loading, className: core.cancelButton, children: t('cancel') }), u("button", { type: 'button', onClick: handleSubmit, disabled: loading || !url.trim(), className: 'df-fill-primary df-hover-primary-solid rounded-md px-4 py-2 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50', children: loading ? t('fetchingCalendar') : t('subscribe') })] })] }) }));
 };
 
-const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCollapsed, setCollapsed, renderCalendarContextMenu, renderSidebarHeader, editingCalendarId: propEditingCalendarId, setEditingCalendarId: propSetEditingCalendarId, onCreateCalendar, }) => {
+const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCollapsed, setCollapsed, renderCalendarContextMenu, renderSidebarHeader, editingCalendarId: propEditingCalendarId, setEditingCalendarId: propSetEditingCalendarId, onCreateCalendar, onSubscribeCalendar, onLoadSubscription, }) => {
     var _a, _b;
     const { t } = core.useLocale();
     // Detect if custom color picker slot is provided
@@ -429,6 +483,33 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
     // File input ref for import
     const fileInputRef = hooks.useRef(null);
     const contextMenuRef = hooks.useRef(null);
+    // Track loaded subscription URLs to avoid redundant fetching
+    const loadedSubscriptionsRef = hooks.useRef(new Set());
+    // Auto-load subscriptions on mount or when calendars change
+    hooks.useEffect(() => {
+        calendars.forEach((calendar) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            if (((_a = calendar.subscription) === null || _a === void 0 ? void 0 : _a.url) &&
+                !loadedSubscriptionsRef.current.has(calendar.subscription.url)) {
+                loadedSubscriptionsRef.current.add(calendar.subscription.url);
+                try {
+                    if (onLoadSubscription) {
+                        yield onLoadSubscription(calendar);
+                    }
+                    else {
+                        const { events } = yield core.subscribeCalendar(calendar.subscription.url);
+                        app.addExternalEvents(calendar.id, events);
+                    }
+                }
+                catch (err) {
+                    console.error(`Failed to auto-load calendar ${calendar.name}:`, err);
+                    app.updateCalendar(calendar.id, {
+                        subscription: Object.assign(Object.assign({}, calendar.subscription), { status: 'error' }),
+                    });
+                }
+            }
+        }));
+    }, [app, calendars, onLoadSubscription]);
     const handleMonthChange = hooks.useCallback((offset) => {
         const current = app.getVisibleMonth();
         const next = new Date(current.getFullYear(), current.getMonth() + offset, 1);
@@ -533,19 +614,19 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
             handleCloseContextMenu();
         }
     }, [contextMenu, handleCloseContextMenu]);
-    const handleMergeConfirm = hooks.useCallback(() => {
+    const handleMergeConfirm = hooks.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (mergeState) {
             const { sourceId, targetId } = mergeState;
-            app.mergeCalendars(sourceId, targetId);
+            yield app.mergeCalendars(sourceId, targetId);
             setMergeState(null);
         }
-    }, [app, mergeState]);
-    const handleConfirmDelete = hooks.useCallback(() => {
+    }), [app, mergeState]);
+    const handleConfirmDelete = hooks.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (deleteState) {
-            app.deleteCalendar(deleteState.calendarId);
+            yield app.deleteCalendar(deleteState.calendarId);
             setDeleteState(null);
         }
-    }, [app, deleteState]);
+    }), [app, deleteState]);
     const handleDeleteMergeSelect = hooks.useCallback((targetId) => {
         if (deleteState) {
             setMergeState({
@@ -567,45 +648,31 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
         handleCloseSidebarContextMenu();
     }, [handleCloseSidebarContextMenu]);
     const handleSubscribeConfirm = hooks.useCallback((url) => __awaiter(void 0, void 0, void 0, function* () {
-        const response = yield fetch(url);
-        if (!response.ok)
-            throw new Error(`HTTP ${response.status}`);
-        const icsContent = yield response.text();
-        const result = core.parseICS(icsContent);
-        // Extract calendar name from X-WR-CALNAME if present
-        const nameMatch = icsContent.match(/X-WR-CALNAME[^:]*:([^\r\n]+)/);
-        const calendarName = nameMatch
-            ? nameMatch[1].trim()
-            : new URL(url).hostname;
-        const presetColors = [
-            '#3b82f6',
-            '#10b981',
-            '#8b5cf6',
-            '#f59e0b',
-            '#ef4444',
-            '#f97316',
-            '#ec4899',
-            '#14b8a6',
-            '#6366f1',
-            '#6b7280',
-        ];
-        const randomColor = presetColors[Math.floor(Math.random() * presetColors.length)];
-        const { colors: calendarColors, darkColors } = core.getCalendarColorsForHex(randomColor);
-        const calendarId = core.generateUniKey();
-        app.createCalendar({
-            id: calendarId,
-            name: calendarName,
-            isDefault: false,
-            colors: calendarColors,
-            darkColors,
-            isVisible: true,
-            subscribed: true,
-        });
-        result.events.forEach(event => {
-            app.addEvent(Object.assign(Object.assign({}, event), { calendarId }));
-        });
+        var _a;
+        // 1. Check for duplicates
+        const isDuplicate = calendars.some(c => { var _a; return ((_a = c.subscription) === null || _a === void 0 ? void 0 : _a.url) === url; });
+        if (isDuplicate) {
+            throw new Error('DUPLICATE_URL');
+        }
+        // 2. Load the subscription (fetch + parse) using the new utility
+        const { calendar, events } = yield core.subscribeCalendar(url);
+        // 3. Mark as loaded to avoid the useEffect triggering another fetch
+        if ((_a = calendar.subscription) === null || _a === void 0 ? void 0 : _a.url) {
+            loadedSubscriptionsRef.current.add(calendar.subscription.url);
+        }
+        // 4. Delegate to user if callback exists, otherwise use default behavior
+        if (onSubscribeCalendar) {
+            yield onSubscribeCalendar(calendar, events);
+        }
+        else {
+            // Default behavior: create calendar in the app
+            app.createCalendar(calendar);
+        }
+        // 4. Always add events to the internal external store for IMMEDIATE display
+        app.addExternalEvents(calendar.id, events);
+        // 5. Close dialog
         setSubscribeDialogOpen(false);
-    }), [app]);
+    }), [app, onSubscribeCalendar, calendars]);
     const handleFileChange = hooks.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
         const file = (_a = e.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
@@ -689,8 +756,20 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
         ? ((_a = calendars.find(c => c.id === deleteState.calendarId)) === null || _a === void 0 ? void 0 : _a.name) || 'Unknown'
         : '';
     const readOnlyConfig = app.getReadOnlyConfig();
-    const isEditable = !app.state.readOnly;
+    const isEditable = app.canMutateFromUI();
     const isDraggable = readOnlyConfig.draggable !== false;
+    hooks.useEffect(() => {
+        if (isEditable)
+            return;
+        setContextMenu(null);
+        setSidebarContextMenu(null);
+        setCustomColorPicker(null);
+        setMergeState(null);
+        setDeleteState(null);
+        setImportState(null);
+        setSubscribeDialogOpen(false);
+        setEditingCalendarId(null);
+    }, [isEditable, setEditingCalendarId]);
     return (u("div", { className: core.sidebarContainer, onContextMenu: isEditable ? handleSidebarContextMenu : undefined, children: [u(core.ContentSlot, { generatorName: 'sidebarHeader', generatorArgs: {
                     isCollapsed,
                     onCollapseToggle: () => setCollapsed(!isCollapsed),
@@ -721,21 +800,27 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
                             ? handleContextMenu
                             : () => {
                                 /* noop */
-                            }, 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) }) })] })), 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: {
+                            }, 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) }) })] })), 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: (_b = calendars.find(c => c.id === contextMenu.calendarId)) === null || _b === void 0 ? void 0 : _b.colors.lineColor, onSelect: handleColorSelect, onCustomColor: handleCustomColor })] })) }) })), sidebarContextMenu &&
+                    }, 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: (_b = calendars.find(c => c.id === contextMenu.calendarId)) === null || _b === void 0 ? void 0 : _b.colors.lineColor, onSelect: handleColorSelect, onCustomColor: handleCustomColor })] })) }) })), isEditable &&
+                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: handleSubscribeClick, children: t('subscribeCalendar') || 'Subscribe to 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), subscribeDialogOpen &&
-                core.createPortal(u(SubscribeCalendarDialog, { onSubscribe: handleSubscribeConfirm, onCancel: () => setSubscribeDialogOpen(false) }), document.body), mergeState &&
-                core.createPortal(u(MergeCalendarDialog, { sourceName: sourceCalendarName, sourceColor: sourceCalendarColor, targetName: targetCalendarName, targetColor: targetCalendarColor, 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 &&
+                            }, children: t('refreshAll') || 'Refresh All' })] }), document.body), u("input", { ref: fileInputRef, type: 'file', accept: '.ics', style: { display: 'none' }, onChange: handleFileChange }), isEditable &&
+                importState &&
+                core.createPortal(u(ImportCalendarDialog, { calendars: calendars, filename: importState.filename, onConfirm: handleImportConfirm, onCancel: () => setImportState(null) }), document.body), isEditable &&
+                subscribeDialogOpen &&
+                core.createPortal(u(SubscribeCalendarDialog, { onSubscribe: handleSubscribeConfirm, onCancel: () => setSubscribeDialogOpen(false) }), document.body), isEditable &&
+                mergeState &&
+                core.createPortal(u(MergeCalendarDialog, { sourceName: sourceCalendarName, sourceColor: sourceCalendarColor, targetName: targetCalendarName, targetColor: targetCalendarColor, onConfirm: handleMergeConfirm, onCancel: () => setMergeState(null) }), document.body), isEditable &&
+                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), isEditable &&
+                customColorPicker &&
                 core.createPortal(u("div", { className: 'fixed inset-0 z-50', onMouseDown: () => {
                         app.updateCalendar(customColorPicker.calendarId, {});
                         setCustomColorPicker(null);
@@ -806,6 +891,7 @@ function createSidebarPlugin(config = {}) {
                 const [sidebarVersion, setSidebarVersion] = hooks.useState(0);
                 const [editingCalendarId, setEditingCalendarId] = hooks.useState(null);
                 const [showCreateDialog, setShowCreateDialog] = hooks.useState(false);
+                const isEditable = app.canMutateFromUI();
                 const refreshSidebar = hooks.useCallback(() => {
                     setSidebarVersion(prev => prev + 1);
                 }, []);
@@ -822,6 +908,8 @@ function createSidebarPlugin(config = {}) {
                     refreshSidebar();
                 }, [app, refreshSidebar]);
                 const handleCreateCalendar = hooks.useCallback(() => {
+                    if (!isEditable)
+                        return;
                     const createMode = config.createCalendarMode || 'inline';
                     if (createMode === 'modal') {
                         setShowCreateDialog(true);
@@ -841,7 +929,13 @@ function createSidebarPlugin(config = {}) {
                     app.createCalendar(newCalendar);
                     setEditingCalendarId(newId);
                     refreshSidebar();
-                }, [app, t, refreshSidebar]);
+                }, [app, isEditable, t, refreshSidebar]);
+                hooks.useEffect(() => {
+                    if (isEditable)
+                        return;
+                    setShowCreateDialog(false);
+                    setEditingCalendarId(null);
+                }, [isEditable]);
                 const sidebarProps = hooks.useMemo(() => ({
                     app,
                     calendars,
@@ -856,6 +950,8 @@ function createSidebarPlugin(config = {}) {
                     editingCalendarId,
                     setEditingCalendarId,
                     onCreateCalendar: handleCreateCalendar,
+                    onSubscribeCalendar: config.onSubscribeCalendar,
+                    onLoadSubscription: config.onLoadSubscription,
                 }), [
                     app,
                     calendars,
@@ -876,14 +972,14 @@ function createSidebarPlugin(config = {}) {
                     return preact.h(DefaultCalendarSidebar, Object.assign({}, sidebarProps));
                 };
                 const renderExtraContent = () => {
-                    if (!showCreateDialog)
+                    if (!isEditable || !showCreateDialog)
                         return null;
                     const onClose = () => setShowCreateDialog(false);
-                    const onCreate = (newCalendar) => {
-                        app.createCalendar(newCalendar);
+                    const onCreate = (newCalendar) => __awaiter(this, void 0, void 0, function* () {
+                        yield app.createCalendar(newCalendar);
                         setShowCreateDialog(false);
                         refreshSidebar();
-                    };
+                    });
                     const generatorArgs = {
                         onClose,
                         onCreate,

package/dist/types/DefaultCalendarSidebar.d.ts

@@ -1,4 +1,4 @@
 import { JSX } from 'preact';
 import type { CalendarSidebarRenderProps } from './plugin';
-declare const DefaultCalendarSidebar: ({ app, calendars, toggleCalendarVisibility, isCollapsed, setCollapsed, renderCalendarContextMenu, renderSidebarHeader, editingCalendarId: propEditingCalendarId, setEditingCalendarId: propSetEditingCalendarId, onCreateCalendar, }: CalendarSidebarRenderProps) => JSX.Element;
+declare const DefaultCalendarSidebar: ({ app, calendars, toggleCalendarVisibility, isCollapsed, setCollapsed, renderCalendarContextMenu, renderSidebarHeader, editingCalendarId: propEditingCalendarId, setEditingCalendarId: propSetEditingCalendarId, onCreateCalendar, onSubscribeCalendar, onLoadSubscription, }: CalendarSidebarRenderProps) => JSX.Element;
 export default DefaultCalendarSidebar;

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

@@ -5,9 +5,9 @@ interface DeleteCalendarDialogProps {
     calendars: CalendarType[];
     step: 'initial' | 'confirm_delete';
     onStepChange: (step: 'initial' | 'confirm_delete') => void;
-    onConfirmDelete: () => void;
+    onConfirmDelete: () => void | Promise<void>;
     onCancel: () => void;
-    onMergeSelect: (targetId: string) => void;
+    onMergeSelect: (targetId: string) => void | Promise<void>;
 }
 export declare const DeleteCalendarDialog: ({ calendarId, calendarName, calendars, step, onStepChange, onConfirmDelete, onCancel, onMergeSelect, }: DeleteCalendarDialogProps) => import("preact").VNode<any>;
 export {};

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

@@ -2,7 +2,7 @@ import { CalendarType } from '@dayflow/core';
 interface ImportCalendarDialogProps {
     calendars: CalendarType[];
     filename: string;
-    onConfirm: (targetCalendarId: string) => void;
+    onConfirm: (targetCalendarId: string) => void | Promise<void>;
     onCancel: () => void;
 }
 export declare const NEW_CALENDAR_ID = "new-calendar";

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

@@ -3,7 +3,7 @@ interface MergeCalendarDialogProps {
     sourceColor: string;
     targetName: string;
     targetColor: string;
-    onConfirm: () => void;
+    onConfirm: () => void | Promise<void>;
     onCancel: () => void;
 }
 export declare const MergeCalendarDialog: ({ sourceName, sourceColor, targetName, targetColor, onConfirm, onCancel, }: MergeCalendarDialogProps) => import("preact").JSX.Element;

package/dist/types/plugin.d.ts

@@ -1,4 +1,4 @@
-import { CalendarPlugin, ICalendarApp, CalendarType, TNode, CreateCalendarDialogProps, SidebarHeaderSlotArgs } from '@dayflow/core';
+import { CalendarPlugin, ICalendarApp, CalendarType, Event, TNode, CreateCalendarDialogProps, SidebarHeaderSlotArgs } from '@dayflow/core';
 export type { SidebarHeaderSlotArgs };
 export interface CalendarSidebarRenderProps {
     app: ICalendarApp;
@@ -14,6 +14,8 @@ export interface CalendarSidebarRenderProps {
     editingCalendarId?: string | null;
     setEditingCalendarId?: (id: string | null) => void;
     onCreateCalendar?: () => void;
+    onSubscribeCalendar?: (calendar: CalendarType, events: Event[]) => Promise<void>;
+    onLoadSubscription?: (calendar: CalendarType) => Promise<void>;
 }
 export interface SidebarPluginConfig {
     width?: number | string;
@@ -24,6 +26,8 @@ export interface SidebarPluginConfig {
     renderCalendarContextMenu?: (calendar: CalendarType, onClose: () => void) => TNode;
     renderSidebarHeader?: (args: SidebarHeaderSlotArgs) => TNode;
     renderCreateCalendarDialog?: (props: CreateCalendarDialogProps) => TNode;
+    onSubscribeCalendar?: (calendar: CalendarType, events: Event[]) => Promise<void>;
+    onLoadSubscription?: (calendar: CalendarType) => Promise<void>;
     [key: string]: unknown;
 }
 export declare function createSidebarPlugin(config?: SidebarPluginConfig): CalendarPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dayflow/plugin-sidebar",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "Sidebar plugin for DayFlow calendar",
   "keywords": [
     "calendar",
@@ -37,10 +37,10 @@
     "rollup-plugin-dts": "^6.3.0",
     "temporal-polyfill": "^0.3.0",
     "typescript": "^5.9.3",
-    "@dayflow/core": "3.3.4"
+    "@dayflow/core": "3.3.6"
   },
   "peerDependencies": {
-    "@dayflow/core": "3.3.4"
+    "@dayflow/core": "3.3.6"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && rollup -c",