@dayflow/plugin-sidebar 1.2.1 → 1.2.3

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { 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, 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 { options, Fragment, h } from 'preact';
 import { useState, useRef, useCallback, useEffect, useMemo } from 'preact/hooks';
 import { hexToHsl, lightnessToSliderValue } from '@dayflow/blossom-color-picker';
@@ -44,21 +44,33 @@ const getCalendarInitials = (calendar) => {
     const name = calendar.name || calendar.id;
     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;
+    const isVisible = calendar.isVisible !== false;
+    const calendarColor = ((_a = calendar.colors) === null || _a === void 0 ? void 0 : _a.lineColor) || '#3b82f6';
+    const showIcon = Boolean(calendar.icon);
+    const isDropTarget = (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.id) === calendar.id;
+    const isActive = activeContextMenuCalendarId === calendar.id || editingId === calendar.id;
+    return (u("li", { className: 'df-calendar-list-item relative', onDragOver: e => 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));
+};
 const CalendarList = ({ calendars, onToggleVisibility, onReorder, onRename, onContextMenu, editingId, setEditingId, activeContextMenuCalendarId, isDraggable = true, isEditable = true, }) => {
+    var _a;
     const [editingName, setEditingName] = useState('');
     const editInputRef = useRef(null);
     const isProcessedRef = useRef(false);
     // Drag state
     const [draggedCalendarId, setDraggedCalendarId] = useState(null);
     const [dropTarget, setDropTarget] = useState(null);
+    // Collapsed sources state
+    const [collapsedSources, setCollapsedSources] = useState({});
     const handleDragStart = useCallback((calendar, e) => {
-        // Prevent dragging when editing or not draggable
         if (editingId || !isDraggable) {
             e.preventDefault();
             return;
         }
         setDraggedCalendarId(calendar.id);
-        // Store calendar data for drop handling
         const dragData = {
             calendarId: calendar.id,
             calendarName: calendar.name,
@@ -107,11 +119,9 @@ const CalendarList = ({ calendars, onToggleVisibility, onReorder, onRename, onCo
             return;
         const fromIndex = calendars.findIndex(c => c.id === draggedCalendarId);
         let toIndex = calendars.findIndex(c => c.id === targetCalendar.id);
-        // Adjust target index based on position
         if (dropTarget.position === 'bottom') {
             toIndex += 1;
         }
-        // Adjust for removal of the item
         if (toIndex > fromIndex) {
             toIndex -= 1;
         }
@@ -169,24 +179,75 @@ const CalendarList = ({ calendars, onToggleVisibility, onReorder, onRename, onCo
             }
         }
     }, [editingId, calendars]);
-    return (u("div", { className: 'df-calendar-list flex-1 overflow-y-auto px-2 pb-3', children: u("ul", { className: 'relative space-y-1', children: calendars.map(calendar => {
-                var _a;
-                const isVisible = calendar.isVisible !== false;
-                const calendarColor = ((_a = calendar.colors) === null || _a === void 0 ? void 0 : _a.lineColor) || '#3b82f6';
-                const showIcon = Boolean(calendar.icon);
-                const isDropTarget = (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.id) === calendar.id;
-                const isActive = activeContextMenuCalendarId === calendar.id ||
-                    editingId === calendar.id;
-                return (u("li", { className: 'df-calendar-list-item relative', onDragOver: e => handleDragOver(e, calendar.id), onDragLeave: handleDragLeave, onDrop: () => handleDrop(calendar), onContextMenu: e => onContextMenu(e, calendar.id), children: [isDropTarget && dropTarget.position === 'top' && (u("div", { className: '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 => handleDragStart(calendar, e), onDragEnd: handleDragEnd, className: `rounded transition ${draggedCalendarId === calendar.id ? 'opacity-50' : ''} ${isDraggable ? 'cursor-grab' : 'cursor-default'}`, children: u("div", { className: `group flex items-center rounded px-2 py-2 transition hover:bg-gray-100 dark:hover:bg-slate-800 ${isActive ? 'bg-gray-100 dark:bg-slate-800' : ''}`, title: calendar.name, children: [u("input", { type: 'checkbox', className: '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: handleRenameSave, onKeyDown: handleRenameKeyDown, 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: () => handleRenameStart(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));
-            }) }) }));
+    const toggleSource = useCallback((source) => {
+        setCollapsedSources(prev => (Object.assign(Object.assign({}, prev), { [source]: !prev[source] })));
+    }, []);
+    // Shared item props (excludes per-item fields)
+    const sharedItemProps = {
+        isDraggable,
+        isEditable,
+        editingId,
+        editingName,
+        setEditingName,
+        editInputRef,
+        isProcessedRef,
+        draggedCalendarId,
+        dropTarget,
+        activeContextMenuCalendarId,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        onContextMenu,
+        onToggleVisibility,
+        onRenameStart: handleRenameStart,
+        onRenameSave: handleRenameSave,
+        onRenameKeyDown: handleRenameKeyDown,
+        setEditingId,
+    };
+    // Check if any calendar has a source
+    const hasSources = calendars.some(c => c.source);
+    if (!hasSources) {
+        // Flat list (original behaviour)
+        return (u("div", { className: 'df-calendar-list flex-1 overflow-y-auto px-2 pb-3', children: u("ul", { className: 'relative space-y-1', children: calendars.map(calendar => (u(CalendarItem, Object.assign({ calendar: calendar }, sharedItemProps), calendar.id))) }) }));
+    }
+    // Group calendars by source; calendars without a source go into a null group
+    const groups = new Map();
+    for (const calendar of calendars) {
+        const key = (_a = calendar.source) !== null && _a !== void 0 ? _a : null;
+        if (!groups.has(key))
+            groups.set(key, []);
+        groups.get(key).push(calendar);
+    }
+    return (u("div", { className: 'df-calendar-list flex-1 overflow-y-auto px-2 pb-3', children: [groups.has(null) && (u("ul", { className: 'relative space-y-1', children: groups.get(null).map(calendar => (u(CalendarItem, Object.assign({ calendar: calendar }, sharedItemProps), calendar.id))) })), Array.from(groups.entries())
+                .filter(([source]) => source !== null)
+                .map(([source, groupCalendars]) => {
+                const isCollapsed = collapsedSources[source];
+                return (u("div", { className: 'mt-1', children: [u("button", { type: 'button', className: 'flex w-full items-center justify-between rounded px-2 py-1.5 text-xs font-medium text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-slate-800', onClick: () => toggleSource(source), children: [u("span", { className: 'truncate', children: source }), u(ChevronDown, { width: 13, height: 13, className: `ml-1 shrink-0 transition-transform duration-200 ${isCollapsed ? '-rotate-90' : ''}` })] }), u("div", { style: {
+                                display: 'grid',
+                                gridTemplateRows: isCollapsed ? '0fr' : '1fr',
+                                transition: 'grid-template-rows 200ms ease',
+                            }, children: u("div", { style: { overflow: 'hidden' }, children: u("ul", { className: 'relative space-y-1', children: groupCalendars.map(calendar => (u(CalendarItem, Object.assign({ calendar: calendar }, sharedItemProps), calendar.id))) }) }) })] }, source));
+            })] }));
 };
 
+const CalendarChip = ({ name, color }) => (u("span", { className: 'mx-0.5 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium', style: { backgroundColor: `${color}26`, color }, children: name }));
+
+const CAL_SENTINEL = '\u0001C\u0001';
+function renderWithChip(template, name, color) {
+    return template
+        .split(CAL_SENTINEL)
+        .flatMap((part, i) => i === 0
+        ? [part]
+        : [u(CalendarChip, { name: name, color: color }, i), part]);
+}
 const DeleteCalendarDialog = ({ calendarId, calendarName, calendars, step, onStepChange, onConfirmDelete, onCancel, onMergeSelect, }) => {
+    var _a, _b;
     const [showMergeDropdown, setShowMergeDropdown] = useState(false);
     const { t } = useLocale();
-    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 text-sm text-gray-600 dark:text-gray-300', children: t('deleteCalendarMessage', { calendarName }) }), 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 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
                                             .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);
@@ -252,9 +313,29 @@ const ImportCalendarDialog = ({ calendars, filename, onConfirm, onCancel, }) =>
                                         : (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' })] })] }) }));
 };
 
-const MergeCalendarDialog = ({ sourceName, targetName, onConfirm, onCancel, }) => {
+const SOURCE_SENTINEL = '\u0001S\u0001';
+const TARGET_SENTINEL = '\u0001T\u0001';
+function renderLine(line, source, target) {
+    return line
+        .split(new RegExp(`(${SOURCE_SENTINEL}|${TARGET_SENTINEL})`))
+        .map((part, i) => {
+        if (part === SOURCE_SENTINEL)
+            return u(CalendarChip, { name: source.name, color: source.color }, i);
+        if (part === TARGET_SENTINEL)
+            return u(CalendarChip, { name: target.name, color: target.color }, i);
+        return part;
+    });
+}
+const MergeCalendarDialog = ({ sourceName, sourceColor, targetName, targetColor, onConfirm, onCancel, }) => {
     const { t } = useLocale();
-    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-md 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("p", { className: 'mt-3 text-sm text-gray-600 dark:text-gray-300', children: t('mergeConfirmMessage', { sourceName, targetName }) }), u("div", { className: 'mt-6 flex justify-end gap-3', children: [u("button", { type: 'button', onClick: onCancel, className: 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 source = { name: sourceName, color: sourceColor };
+    const target = { name: targetName, color: targetColor };
+    const messageTemplate = t('mergeConfirmMessage', {
+        sourceName: SOURCE_SENTINEL,
+        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 stopPropagation = (e) => e.stopPropagation();
@@ -334,7 +415,7 @@ const SubscribeCalendarDialog = ({ onSubscribe, onCancel, }) => {
 };
 
 const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCollapsed, setCollapsed, renderCalendarContextMenu, renderSidebarHeader, editingCalendarId: propEditingCalendarId, setEditingCalendarId: propSetEditingCalendarId, onCreateCalendar, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     const { t } = useLocale();
     // Detect if custom color picker slot is provided
     const hasCustomPicker = app.state.overrides.includes('colorPicker');
@@ -592,14 +673,18 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
             handleCloseContextMenu();
         }
     }, [contextMenu, calendars, app, handleCloseContextMenu]);
-    const sourceCalendarName = mergeState
-        ? ((_a = calendars.find(c => c.id === mergeState.sourceId)) === null || _a === void 0 ? void 0 : _a.name) || 'Unknown'
-        : '';
-    const targetCalendarName = mergeState
-        ? ((_b = calendars.find(c => c.id === mergeState.targetId)) === null || _b === void 0 ? void 0 : _b.name) || 'Unknown'
-        : '';
+    const sourceCalendar = mergeState
+        ? calendars.find(c => c.id === mergeState.sourceId)
+        : null;
+    const targetCalendar = mergeState
+        ? calendars.find(c => c.id === mergeState.targetId)
+        : null;
+    const sourceCalendarName = (sourceCalendar === null || sourceCalendar === void 0 ? void 0 : sourceCalendar.name) || 'Unknown';
+    const targetCalendarName = (targetCalendar === null || targetCalendar === void 0 ? void 0 : targetCalendar.name) || 'Unknown';
+    const sourceCalendarColor = (sourceCalendar === null || sourceCalendar === void 0 ? void 0 : sourceCalendar.colors.lineColor) || '#6b7280';
+    const targetCalendarColor = (targetCalendar === null || targetCalendar === void 0 ? void 0 : targetCalendar.colors.lineColor) || '#6b7280';
     const deleteCalendarName = deleteState
-        ? ((_c = calendars.find(c => c.id === deleteState.calendarId)) === null || _c === void 0 ? void 0 : _c.name) || 'Unknown'
+        ? ((_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;
@@ -637,7 +722,7 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
                             }, 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: {
                         calendar: calendars.find(c => c.id === contextMenu.calendarId),
                         onClose: handleCloseContextMenu,
-                    }, defaultContent: renderCalendarContextMenu ? (renderCalendarContextMenu(calendars.find(c => c.id === contextMenu.calendarId), handleCloseContextMenu)) : (u(Fragment, { children: [u(ContextMenuLabel, { children: t('calendarOptions') }), u(MergeMenuItem, { calendars: calendars, currentCalendarId: contextMenu.calendarId, onMergeSelect: handleMergeSelect }), u(ContextMenuItem, { onClick: handleDeleteCalendar, children: t('delete') }), u(ContextMenuItem, { onClick: handleExportCalendar, children: t('exportCalendar') || 'Export Calendar' }), u(ContextMenuSeparator, {}), u(ContextMenuColorPicker, { selectedColor: (_d = calendars.find(c => c.id === contextMenu.calendarId)) === null || _d === void 0 ? void 0 : _d.colors.lineColor, onSelect: handleColorSelect, onCustomColor: handleCustomColor })] })) }) })), sidebarContextMenu &&
+                    }, 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 &&
                 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();
@@ -647,7 +732,7 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
                             }, 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, targetName: targetCalendarName, onConfirm: handleMergeConfirm, onCancel: () => setMergeState(null) }), document.body), deleteState &&
+                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 &&
                 createPortal(u("div", { className: 'fixed inset-0 z-50', onMouseDown: () => {
                         app.updateCalendar(customColorPicker.calendarId, {});

package/dist/index.js

@@ -46,21 +46,33 @@ const getCalendarInitials = (calendar) => {
     const name = calendar.name || calendar.id;
     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;
+    const isVisible = calendar.isVisible !== false;
+    const calendarColor = ((_a = calendar.colors) === null || _a === void 0 ? void 0 : _a.lineColor) || '#3b82f6';
+    const showIcon = Boolean(calendar.icon);
+    const isDropTarget = (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.id) === calendar.id;
+    const isActive = activeContextMenuCalendarId === calendar.id || editingId === calendar.id;
+    return (u("li", { className: 'df-calendar-list-item relative', onDragOver: e => 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));
+};
 const CalendarList = ({ calendars, onToggleVisibility, onReorder, onRename, onContextMenu, editingId, setEditingId, activeContextMenuCalendarId, isDraggable = true, isEditable = true, }) => {
+    var _a;
     const [editingName, setEditingName] = hooks.useState('');
     const editInputRef = hooks.useRef(null);
     const isProcessedRef = hooks.useRef(false);
     // Drag state
     const [draggedCalendarId, setDraggedCalendarId] = hooks.useState(null);
     const [dropTarget, setDropTarget] = hooks.useState(null);
+    // Collapsed sources state
+    const [collapsedSources, setCollapsedSources] = hooks.useState({});
     const handleDragStart = hooks.useCallback((calendar, e) => {
-        // Prevent dragging when editing or not draggable
         if (editingId || !isDraggable) {
             e.preventDefault();
             return;
         }
         setDraggedCalendarId(calendar.id);
-        // Store calendar data for drop handling
         const dragData = {
             calendarId: calendar.id,
             calendarName: calendar.name,
@@ -109,11 +121,9 @@ const CalendarList = ({ calendars, onToggleVisibility, onReorder, onRename, onCo
             return;
         const fromIndex = calendars.findIndex(c => c.id === draggedCalendarId);
         let toIndex = calendars.findIndex(c => c.id === targetCalendar.id);
-        // Adjust target index based on position
         if (dropTarget.position === 'bottom') {
             toIndex += 1;
         }
-        // Adjust for removal of the item
         if (toIndex > fromIndex) {
             toIndex -= 1;
         }
@@ -171,24 +181,75 @@ const CalendarList = ({ calendars, onToggleVisibility, onReorder, onRename, onCo
             }
         }
     }, [editingId, calendars]);
-    return (u("div", { className: 'df-calendar-list flex-1 overflow-y-auto px-2 pb-3', children: u("ul", { className: 'relative space-y-1', children: calendars.map(calendar => {
-                var _a;
-                const isVisible = calendar.isVisible !== false;
-                const calendarColor = ((_a = calendar.colors) === null || _a === void 0 ? void 0 : _a.lineColor) || '#3b82f6';
-                const showIcon = Boolean(calendar.icon);
-                const isDropTarget = (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.id) === calendar.id;
-                const isActive = activeContextMenuCalendarId === calendar.id ||
-                    editingId === calendar.id;
-                return (u("li", { className: 'df-calendar-list-item relative', onDragOver: e => handleDragOver(e, calendar.id), onDragLeave: handleDragLeave, onDrop: () => handleDrop(calendar), onContextMenu: e => onContextMenu(e, calendar.id), children: [isDropTarget && dropTarget.position === 'top' && (u("div", { className: '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 => handleDragStart(calendar, e), onDragEnd: handleDragEnd, className: `rounded transition ${draggedCalendarId === calendar.id ? 'opacity-50' : ''} ${isDraggable ? 'cursor-grab' : 'cursor-default'}`, children: u("div", { className: `group flex items-center rounded px-2 py-2 transition hover:bg-gray-100 dark:hover:bg-slate-800 ${isActive ? 'bg-gray-100 dark:bg-slate-800' : ''}`, title: calendar.name, children: [u("input", { type: 'checkbox', className: '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: handleRenameSave, onKeyDown: handleRenameKeyDown, 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: () => handleRenameStart(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));
-            }) }) }));
+    const toggleSource = hooks.useCallback((source) => {
+        setCollapsedSources(prev => (Object.assign(Object.assign({}, prev), { [source]: !prev[source] })));
+    }, []);
+    // Shared item props (excludes per-item fields)
+    const sharedItemProps = {
+        isDraggable,
+        isEditable,
+        editingId,
+        editingName,
+        setEditingName,
+        editInputRef,
+        isProcessedRef,
+        draggedCalendarId,
+        dropTarget,
+        activeContextMenuCalendarId,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        onContextMenu,
+        onToggleVisibility,
+        onRenameStart: handleRenameStart,
+        onRenameSave: handleRenameSave,
+        onRenameKeyDown: handleRenameKeyDown,
+        setEditingId,
+    };
+    // Check if any calendar has a source
+    const hasSources = calendars.some(c => c.source);
+    if (!hasSources) {
+        // Flat list (original behaviour)
+        return (u("div", { className: 'df-calendar-list flex-1 overflow-y-auto px-2 pb-3', children: u("ul", { className: 'relative space-y-1', children: calendars.map(calendar => (u(CalendarItem, Object.assign({ calendar: calendar }, sharedItemProps), calendar.id))) }) }));
+    }
+    // Group calendars by source; calendars without a source go into a null group
+    const groups = new Map();
+    for (const calendar of calendars) {
+        const key = (_a = calendar.source) !== null && _a !== void 0 ? _a : null;
+        if (!groups.has(key))
+            groups.set(key, []);
+        groups.get(key).push(calendar);
+    }
+    return (u("div", { className: 'df-calendar-list flex-1 overflow-y-auto px-2 pb-3', children: [groups.has(null) && (u("ul", { className: 'relative space-y-1', children: groups.get(null).map(calendar => (u(CalendarItem, Object.assign({ calendar: calendar }, sharedItemProps), calendar.id))) })), Array.from(groups.entries())
+                .filter(([source]) => source !== null)
+                .map(([source, groupCalendars]) => {
+                const isCollapsed = collapsedSources[source];
+                return (u("div", { className: 'mt-1', children: [u("button", { type: 'button', className: 'flex w-full items-center justify-between rounded px-2 py-1.5 text-xs font-medium text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-slate-800', onClick: () => toggleSource(source), children: [u("span", { className: 'truncate', children: source }), u(core.ChevronDown, { width: 13, height: 13, className: `ml-1 shrink-0 transition-transform duration-200 ${isCollapsed ? '-rotate-90' : ''}` })] }), u("div", { style: {
+                                display: 'grid',
+                                gridTemplateRows: isCollapsed ? '0fr' : '1fr',
+                                transition: 'grid-template-rows 200ms ease',
+                            }, children: u("div", { style: { overflow: 'hidden' }, children: u("ul", { className: 'relative space-y-1', children: groupCalendars.map(calendar => (u(CalendarItem, Object.assign({ calendar: calendar }, sharedItemProps), calendar.id))) }) }) })] }, source));
+            })] }));
 };
 
+const CalendarChip = ({ name, color }) => (u("span", { className: 'mx-0.5 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium', style: { backgroundColor: `${color}26`, color }, children: name }));
+
+const CAL_SENTINEL = '\u0001C\u0001';
+function renderWithChip(template, name, color) {
+    return template
+        .split(CAL_SENTINEL)
+        .flatMap((part, i) => i === 0
+        ? [part]
+        : [u(CalendarChip, { name: name, color: color }, i), part]);
+}
 const DeleteCalendarDialog = ({ calendarId, calendarName, calendars, step, onStepChange, onConfirmDelete, onCancel, onMergeSelect, }) => {
+    var _a, _b;
     const [showMergeDropdown, setShowMergeDropdown] = hooks.useState(false);
     const { t } = core.useLocale();
-    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 text-sm text-gray-600 dark:text-gray-300', children: t('deleteCalendarMessage', { calendarName }) }), 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 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
                                             .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);
@@ -254,9 +315,29 @@ const ImportCalendarDialog = ({ calendars, filename, onConfirm, onCancel, }) =>
                                         : (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' })] })] }) }));
 };
 
-const MergeCalendarDialog = ({ sourceName, targetName, onConfirm, onCancel, }) => {
+const SOURCE_SENTINEL = '\u0001S\u0001';
+const TARGET_SENTINEL = '\u0001T\u0001';
+function renderLine(line, source, target) {
+    return line
+        .split(new RegExp(`(${SOURCE_SENTINEL}|${TARGET_SENTINEL})`))
+        .map((part, i) => {
+        if (part === SOURCE_SENTINEL)
+            return u(CalendarChip, { name: source.name, color: source.color }, i);
+        if (part === TARGET_SENTINEL)
+            return u(CalendarChip, { name: target.name, color: target.color }, i);
+        return part;
+    });
+}
+const MergeCalendarDialog = ({ sourceName, sourceColor, targetName, targetColor, onConfirm, onCancel, }) => {
     const { t } = core.useLocale();
-    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-md 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("p", { className: 'mt-3 text-sm text-gray-600 dark:text-gray-300', children: t('mergeConfirmMessage', { sourceName, targetName }) }), u("div", { className: 'mt-6 flex justify-end gap-3', children: [u("button", { type: 'button', onClick: onCancel, className: core.cancelButton, children: t('cancel') }), u("button", { type: 'button', onClick: onConfirm, className: 'rounded-md bg-destructive px-3 py-2 text-xs font-medium text-destructive-foreground hover:bg-destructive/90', children: t('merge') })] })] }) }));
+    const source = { name: sourceName, color: sourceColor };
+    const target = { name: targetName, color: targetColor };
+    const messageTemplate = t('mergeConfirmMessage', {
+        sourceName: SOURCE_SENTINEL,
+        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 stopPropagation = (e) => e.stopPropagation();
@@ -336,7 +417,7 @@ const SubscribeCalendarDialog = ({ onSubscribe, onCancel, }) => {
 };
 
 const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCollapsed, setCollapsed, renderCalendarContextMenu, renderSidebarHeader, editingCalendarId: propEditingCalendarId, setEditingCalendarId: propSetEditingCalendarId, onCreateCalendar, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     const { t } = core.useLocale();
     // Detect if custom color picker slot is provided
     const hasCustomPicker = app.state.overrides.includes('colorPicker');
@@ -594,14 +675,18 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
             handleCloseContextMenu();
         }
     }, [contextMenu, calendars, app, handleCloseContextMenu]);
-    const sourceCalendarName = mergeState
-        ? ((_a = calendars.find(c => c.id === mergeState.sourceId)) === null || _a === void 0 ? void 0 : _a.name) || 'Unknown'
-        : '';
-    const targetCalendarName = mergeState
-        ? ((_b = calendars.find(c => c.id === mergeState.targetId)) === null || _b === void 0 ? void 0 : _b.name) || 'Unknown'
-        : '';
+    const sourceCalendar = mergeState
+        ? calendars.find(c => c.id === mergeState.sourceId)
+        : null;
+    const targetCalendar = mergeState
+        ? calendars.find(c => c.id === mergeState.targetId)
+        : null;
+    const sourceCalendarName = (sourceCalendar === null || sourceCalendar === void 0 ? void 0 : sourceCalendar.name) || 'Unknown';
+    const targetCalendarName = (targetCalendar === null || targetCalendar === void 0 ? void 0 : targetCalendar.name) || 'Unknown';
+    const sourceCalendarColor = (sourceCalendar === null || sourceCalendar === void 0 ? void 0 : sourceCalendar.colors.lineColor) || '#6b7280';
+    const targetCalendarColor = (targetCalendar === null || targetCalendar === void 0 ? void 0 : targetCalendar.colors.lineColor) || '#6b7280';
     const deleteCalendarName = deleteState
-        ? ((_c = calendars.find(c => c.id === deleteState.calendarId)) === null || _c === void 0 ? void 0 : _c.name) || 'Unknown'
+        ? ((_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;
@@ -639,7 +724,7 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
                             }, 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: {
                         calendar: calendars.find(c => c.id === contextMenu.calendarId),
                         onClose: handleCloseContextMenu,
-                    }, defaultContent: renderCalendarContextMenu ? (renderCalendarContextMenu(calendars.find(c => c.id === contextMenu.calendarId), handleCloseContextMenu)) : (u(preact.Fragment, { children: [u(core.ContextMenuLabel, { children: t('calendarOptions') }), u(MergeMenuItem, { calendars: calendars, currentCalendarId: contextMenu.calendarId, onMergeSelect: handleMergeSelect }), u(core.ContextMenuItem, { onClick: handleDeleteCalendar, children: t('delete') }), u(core.ContextMenuItem, { onClick: handleExportCalendar, children: t('exportCalendar') || 'Export Calendar' }), u(core.ContextMenuSeparator, {}), u(core.ContextMenuColorPicker, { selectedColor: (_d = calendars.find(c => c.id === contextMenu.calendarId)) === null || _d === void 0 ? void 0 : _d.colors.lineColor, onSelect: handleColorSelect, onCustomColor: handleCustomColor })] })) }) })), sidebarContextMenu &&
+                    }, 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 &&
                 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();
@@ -649,7 +734,7 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
                             }, 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, targetName: targetCalendarName, onConfirm: handleMergeConfirm, onCancel: () => setMergeState(null) }), document.body), deleteState &&
+                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 &&
                 core.createPortal(u("div", { className: 'fixed inset-0 z-50', onMouseDown: () => {
                         app.updateCalendar(customColorPicker.calendarId, {});

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

@@ -0,0 +1,6 @@
+export interface CalendarChipProps {
+    name: string;
+    /** lineColor hex, e.g. "#3b82f6" */
+    color: string;
+}
+export declare const CalendarChip: ({ name, color }: CalendarChipProps) => import("preact").JSX.Element;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dayflow/plugin-sidebar",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "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.1"
+    "@dayflow/core": "3.3.3"
   },
   "peerDependencies": {
-    "@dayflow/core": "3.3.1"
+    "@dayflow/core": "3.3.3"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && rollup -c",