@dayflow/core 3.4.3 → 3.5.1

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import * as preact from 'preact';
 import { ComponentChildren, AnyComponent, RefObject, JSX } from 'preact';
 import { Temporal } from 'temporal-polyfill';
-import * as preact_compat from 'preact/compat';
-export { createPortal } from 'preact/compat';
+export { ContextMenu, ContextMenuColorPicker, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator } from '@dayflow/ui-context-menu';
 import { BlossomColorPickerOptions } from '@dayflow/blossom-color-picker';
+export { RangePicker as DayflowRangePicker, RangePickerProps, ZonedRange } from '@dayflow/ui-range-picker';
+export { createPortal } from 'preact/compat';
 
 type ViewSwitcherMode = 'buttons' | 'select';
 
@@ -219,8 +220,16 @@ interface Event {
     allDay?: boolean;
     icon?: boolean | ComponentChildren;
     calendarId?: string;
+    /** Multi-calendar support: list of calendar IDs this event belongs to.
+     *  When present, takes precedence over calendarId for visibility and color rendering.
+     *  The event is visible as long as at least one listed calendar is visible. */
+    calendarIds?: string[];
     meta?: Record<string, unknown>;
     day?: number;
+    /** Original start hour (used for stable cross-day layout) */
+    _originalStartHour?: number;
+    /** Original end hour (used for stable cross-day layout) */
+    _originalEndHour?: number;
 }
 
 /**
@@ -522,19 +531,21 @@ interface CalendarCallbacks {
     onEventDelete?: (eventId: string) => void | Promise<void>;
     onDateChange?: (date: Date) => void | Promise<void>;
     onRender?: () => void | Promise<void>;
-    /**
-     * @deprecated This method is retained for backward compatibility and will be removed in future releases. Use ``onVisibleRangeChange`` instead.
-     */
-    onVisibleMonthChange?: (date: Date) => void | Promise<void>;
     onVisibleRangeChange?: (start: Date, end: Date, reason: RangeChangeReason) => void | Promise<void>;
     onCalendarUpdate?: (calendar: CalendarType) => void | Promise<void>;
     onCalendarCreate?: (calendar: CalendarType) => void | Promise<void>;
     onCalendarDelete?: (calendarId: string) => void | Promise<void>;
     onCalendarMerge?: (sourceId: string, targetId: string) => void | Promise<void>;
+    onCalendarReorder?: (fromIndex: number, toIndex: number) => void | Promise<void>;
     onEventClick?: (event: Event) => void | Promise<void>;
     onEventDoubleClick?: (event: Event, e: MouseEvent) => boolean | undefined | Promise<boolean | undefined>;
     onMoreEventsClick?: (date: Date) => void | Promise<void>;
     onDismissUI?: () => void | Promise<void>;
+    /**
+     * Toggle event detail panel or dialog.
+     * If eventId is null, closes the detail UI.
+     */
+    onEventDetailToggle?: (eventId: string | null) => void;
 }
 interface CalendarHeaderProps {
     calendar: ICalendarApp;
@@ -591,6 +602,7 @@ interface CalendarAppConfig {
     defaultCalendar?: string;
     theme?: ThemeConfig;
     useEventDetailDialog?: boolean;
+    useEventDetailPanel?: boolean;
     useCalendarHeader?: boolean;
     customMobileEventRenderer?: MobileEventRenderer;
     locale?: string | Locale;
@@ -669,6 +681,7 @@ interface ICalendarApp {
     onEventClick: (event: Event) => void;
     onEventDoubleClick: (event: Event, e: MouseEvent) => boolean | undefined | Promise<boolean | undefined>;
     onMoreEventsClick: (date: Date) => void;
+    onEventDetailToggle: (eventId: string | null) => void;
     highlightEvent: (eventId: string | null) => void;
     selectEvent: (eventId: string | null) => void;
     getCalendars: () => CalendarType[];
@@ -689,6 +702,7 @@ interface ICalendarApp {
     triggerRender: () => void;
     getCalendarRegistry: () => CalendarRegistry;
     getUseEventDetailDialog: () => boolean;
+    getUseEventDetailPanel: () => boolean;
     getCustomMobileEventRenderer: () => MobileEventRenderer | undefined;
     updateConfig: (config: Partial<CalendarAppConfig>) => void;
     /** The resolved global display/edit timezone (IANA string). */
@@ -836,6 +850,7 @@ interface DragRef {
     lastClientY: number;
     allDay: boolean;
     eventDate?: Date;
+    calendarIds?: string[];
 }
 /**
  * Event detail position interface
@@ -859,6 +874,12 @@ interface DragIndicatorProps {
     getDynamicPadding: (drag: DragRef) => string;
     locale?: string;
     isMobile?: boolean;
+    /** True when the indicator container has a light background (e.g. diagonal multi-calendar pattern).
+     *  Renderers should use dark text instead of white when this is set. */
+    isLightBackground?: boolean;
+    /** Pre-computed line colors for all calendars on this event.
+     *  Single-element array for single-calendar; multi-element for multi-calendar gradient bar. */
+    calendarLineColors?: string[];
 }
 interface DragIndicatorRenderer {
     renderAllDayContent: (props: DragIndicatorProps) => ComponentChildren;
@@ -895,6 +916,7 @@ interface UnifiedDragRef extends DragRef {
     initialIndicatorHeight?: number;
     indicatorContainer?: HTMLElement | null;
     calendarId?: string;
+    calendarIds?: string[];
     title?: string;
 }
 interface useDragProps extends Partial<DragConfig> {
@@ -1112,7 +1134,7 @@ interface EventDetailPanelProps {
     /** Whether the event is all-day */
     isAllDay: boolean;
     /** Event visibility state */
-    eventVisibility: 'visible' | 'sticky-top' | 'sticky-bottom' | 'sticky-left' | 'sticky-right';
+    eventVisibility: 'standard' | 'sticky-top' | 'sticky-bottom' | 'sticky-left' | 'sticky-right';
     /** Calendar container reference */
     calendarRef: RefObject<HTMLDivElement>;
     /** Selected event element reference */
@@ -1192,6 +1214,7 @@ interface BaseViewProps<TConfig = unknown> {
     onDetailPanelToggle?: (eventId: string | null) => void;
     customDetailPanelContent?: EventDetailContentRenderer;
     customEventDetailDialog?: EventDetailDialogRenderer;
+    useEventDetailPanel?: boolean;
     calendarRef: RefObject<HTMLDivElement>;
     switcherMode?: ViewSwitcherMode;
     meta?: Record<string, unknown>;
@@ -1540,6 +1563,51 @@ interface MobileEventProps {
     timeFormat?: '12h' | '24h';
 }
 
+type CalendarSearchEvent = Event & {
+    color?: string;
+    [key: string]: unknown;
+};
+interface CalendarSearchProps {
+    /**
+     * Debounce delay in ms
+     * @default 300
+     */
+    debounceDelay?: number;
+    /**
+     * Async search method
+     */
+    onSearch?: (keyword: string) => Promise<CalendarSearchEvent[]>;
+    /**
+     * Custom search logic (takes over completely)
+     */
+    customSearch?: (params: {
+        keyword: string;
+        events: CalendarSearchEvent[];
+    }) => CalendarSearchEvent[];
+    /**
+     * Search state callback
+     */
+    onSearchStateChange?: (state: {
+        keyword: string;
+        loading: boolean;
+        results: CalendarSearchEvent[];
+    }) => void;
+    /**
+     * Empty result text
+     */
+    emptyText?: string | Record<string, string>;
+    /**
+     * Custom handler for search result clicks
+     */
+    onResultClick?: (params: {
+        event: CalendarSearchEvent;
+        app: ICalendarApp;
+        source: 'desktop' | 'mobile';
+        defaultAction: () => void;
+        closeSearch: () => void;
+    }) => void | Promise<void>;
+}
+
 declare class CalendarApp implements ICalendarApp {
     state: CalendarAppState;
     private callbacks;
@@ -1550,6 +1618,7 @@ declare class CalendarApp implements ICalendarApp {
     private navigation;
     private pluginManager;
     private useEventDetailDialog;
+    private useEventDetailPanel;
     private useCalendarHeader;
     private customMobileEventRenderer?;
     constructor(config: CalendarAppConfig);
@@ -1587,6 +1656,7 @@ declare class CalendarApp implements ICalendarApp {
     onEventClick: (event: Event) => void;
     onEventDoubleClick: (event: Event, e: MouseEvent) => boolean | undefined | Promise<boolean | undefined>;
     onMoreEventsClick: (date: Date) => void;
+    onEventDetailToggle: (eventId: string | null) => void;
     highlightEvent: (eventId: string | null) => void;
     selectEvent: (eventId: string | null) => void;
     dismissUI: () => void;
@@ -1611,6 +1681,7 @@ declare class CalendarApp implements ICalendarApp {
     getViewConfig: (viewType: CalendarViewType) => Record<string, unknown>;
     getCalendarRegistry: () => CalendarRegistry;
     getUseEventDetailDialog: () => boolean;
+    getUseEventDetailPanel: () => boolean;
     getCustomMobileEventRenderer: () => MobileEventRenderer | undefined;
     getCalendarHeaderConfig: () => boolean;
     get timeZone(): string;
@@ -1770,6 +1841,48 @@ declare const getSelectedBgColor: (calendarIdOrColor: string, registry?: Calenda
  * Now uses the calendar registry for color resolution
  */
 declare const getLineColor: (calendarIdOrColor: string, registry?: CalendarRegistry) => string;
+/**
+ * Resolve the primary calendar ID for an event.
+ * Uses calendarIds[0] when available, otherwise falls back to calendarId.
+ */
+declare const getPrimaryCalendarId: (event: {
+    calendarId?: string;
+    calendarIds?: string[];
+}) => string;
+/**
+ * Resolve all line colors for an event's calendar(s).
+ * Returns an array with one entry per calendar ID.
+ */
+declare const getCalendarLineColors: (event: {
+    calendarId?: string;
+    calendarIds?: string[];
+}, registry?: CalendarRegistry) => string[];
+/**
+ * Build a CSS gradient string for the multi-calendar color bar.
+ * For a single color it returns the plain color value (no gradient).
+ * For multiple colors it builds an equal-segment `linear-gradient(to bottom, ...)`.
+ */
+declare const buildColorBarGradient: (colors: string[]) => string;
+/**
+ * Build a 45° repeating stripe for narrow multi-calendar color bars.
+ * Uses the same angle and stripe width as the event background pattern, but
+ * accepts line colors so the left bar remains stronger than the event fill.
+ */
+declare const buildDiagonalColorBarGradient: (colors: string[], stripeWidth?: number) => string;
+/**
+ * Resolve all eventColor values for an event's calendar(s).
+ * Used to build the diagonal stripe background.
+ */
+declare const getCalendarEventBgColors: (event: {
+    calendarId?: string;
+    calendarIds?: string[];
+}, registry?: CalendarRegistry) => string[];
+/**
+ * Build a 45° repeating diagonal stripe CSS background for multi-calendar events.
+ * For a single color returns the plain color value (no pattern).
+ * Each stripe is `stripeWidth` px wide (default 6px).
+ */
+declare const buildDiagonalPatternBackground: (colors: string[], stripeWidth?: number) => string;
 
 /**
  * Time Utilities
@@ -2286,14 +2399,6 @@ declare function now(timeZone?: string): Temporal.ZonedDateTime;
  */
 declare function today(timeZone?: string): Temporal.PlainDate;
 
-declare const pad: (input: number) => string;
-declare const mergeFormatTemplate: (dateFormat: string, timeFormat: string) => string;
-declare const buildParseRegExp: (template: string) => RegExp;
-declare const parseTemporalString: (input: string, regExp: RegExp, reference: Temporal.ZonedDateTime, zoneId: string) => Temporal.ZonedDateTime | null;
-declare const getZoneId: (value: Temporal.ZonedDateTime) => string;
-declare const normalizeToZoned: (input: Temporal.PlainDate | Temporal.PlainDateTime | Temporal.ZonedDateTime, fallbackZone?: string, fallbackTemporal?: Temporal.ZonedDateTime) => Temporal.ZonedDateTime;
-declare const formatTemporal: (value: Temporal.ZonedDateTime, format: string, timeFormat: string) => string;
-
 /**
  * Style Utility Functions
  *
@@ -2330,97 +2435,8 @@ declare function normalizeCssWidth(width?: number | string, defaultWidth?: strin
  */
 declare function scrollbarTakesSpace(): boolean;
 
-/**
- * Theme Utility Functions
- *
- * This module provides utility functions for working with theme-aware class names.
- */
-/**
- * Combine class names with theme-specific variants
- *
- * @param base - Base class names (applied in both themes)
- * @param light - Light mode specific class names
- * @param dark - Dark mode specific class names (will be prefixed with 'dark:')
- * @returns Combined class name string
- *
- * @example
- * ```ts
- * themeCn('p-4 rounded', 'bg-white text-black', 'bg-gray-900 text-white')
- * // Returns: 'p-4 rounded bg-white text-black dark:bg-gray-900 dark:text-white'
- * ```
- */
-declare const themeCn: (base: string, light: string, dark: string) => string;
-/**
- * Common theme class combinations
- *
- * Pre-defined class combinations for common UI elements.
- * Use these for consistency across the application.
- */
-declare const themeClasses: {
-    container: string;
-    card: string;
-    sidebar: string;
-    text: string;
-    textMuted: string;
-    textSubtle: string;
-    textEmphasis: string;
-    border: string;
-    borderLight: string;
-    borderStrong: string;
-    bgPrimary: string;
-    bgSecondary: string;
-    bgTertiary: string;
-    bgMuted: string;
-    hover: string;
-    hoverSubtle: string;
-    active: string;
-    focus: string;
-    input: string;
-    inputFocus: string;
-    buttonPrimary: string;
-    buttonSecondary: string;
-    buttonDanger: string;
-    buttonSuccess: string;
-    shadow: string;
-    shadowMd: string;
-    shadowLg: string;
-    divider: string;
-};
-/**
- * Conditional theme class
- *
- * Returns different class names based on a condition.
- *
- * @param condition - Condition to evaluate
- * @param whenTrue - Class names when condition is true
- * @param whenFalse - Class names when condition is false
- * @returns Class name string based on condition
- *
- * @example
- * ```ts
- * conditionalTheme(isActive, 'bg-blue-500 dark:bg-blue-600', 'bg-gray-200 dark:bg-gray-700')
- * ```
- */
-declare const conditionalTheme: (condition: boolean, whenTrue: string, whenFalse: string) => string;
-/**
- * Merge multiple class names, filtering out falsy values
- *
- * @param classes - Array of class names or falsy values
- * @returns Merged class name string
- *
- * @example
- * ```ts
- * mergeClasses('p-4', isActive && 'bg-blue-500', 'rounded')
- * // Returns: 'p-4 bg-blue-500 rounded' (if isActive is true)
- * ```
- */
-declare const mergeClasses: (...classes: (string | undefined | null | false)[]) => string;
 /**
  * Resolve the currently applied theme on the document.
- *
- * This inspects common override hooks (like `data-dayflow-theme-override` or
- * manual `dark`/`light` classes) so host applications can force a theme even
- * when DayFlow is configured in `auto` mode.
  */
 declare const resolveAppliedTheme: (effectiveTheme: "light" | "dark") => "light" | "dark";
 
@@ -2548,29 +2564,6 @@ declare function createAllDayEvent(id: string, title: string, date: Date, option
  * Quick create timed event
  */
 declare function createTimedEvent(id: string, title: string, start: Date, end: Date, options?: Omit<CreateEventParams, 'id' | 'title' | 'start' | 'end'>): Event;
-/**
- * Convert legacy Date-based event to Temporal-based event
- * @deprecated Use createEvent() directly with Date objects instead
- */
-declare function convertDateEvent(id: string, title: string, startDate: Date, endDate: Date, allDay?: boolean, options?: {
-    description?: string;
-    calendarId?: string;
-    meta?: Record<string, unknown>;
-}): Event;
-/**
- * Convert legacy Date-based event to timezone-aware event
- * @deprecated Use createTimezoneEvent() directly with Date objects instead
- */
-declare function convertDateEventWithTimeZone(id: string, title: string, startDate: Date, endDate: Date, timeZone: string, options?: {
-    description?: string;
-    calendarId?: string;
-    meta?: Record<string, unknown>;
-}): Event;
-
-type CalendarSearchEvent = Event & {
-    color?: string;
-    [key: string]: unknown;
-};
 
 /**
  * Helper to get date object from event start
@@ -2585,16 +2578,16 @@ declare const getDateObj: (dateInput: unknown) => Date;
  */
 declare const normalizeDate: (date: Date) => Date;
 /**
- * Helper to get header text and color for a date group in search results
+ * Helper to get header text and semantic tone for a date group in search results
  * @param groupDate The date of the group
  * @param today Reference today date (normalized)
  * @param locale Locale string
  * @param t Translation function
- * @returns Object with title and colorClass
+ * @returns Object with title and tone
  */
 declare const getSearchHeaderInfo: (groupDate: Date, today: Date, locale: string, t: (key: TranslationKey) => string) => {
     title: string;
-    colorClass: string;
+    tone: "default" | "today" | "upcoming";
 };
 /**
  * Helper to group search results by date
@@ -2832,7 +2825,7 @@ declare const restoreTimedDragFromAllDayTransition: ({ wasOriginallyAllDay, mous
 
 declare function normalizeTimeZoneValue(timeZone?: TimeZoneValue): string | undefined;
 
-type SyncableCalendarAppConfig = Pick<CalendarAppConfig, 'allDaySortComparator' | 'calendars' | 'customMobileEventRenderer' | 'locale' | 'readOnly' | 'switcherMode' | 'theme' | 'timeZone' | 'useCalendarHeader' | 'useEventDetailDialog' | 'views'>;
+type SyncableCalendarAppConfig = Pick<CalendarAppConfig, 'allDaySortComparator' | 'calendars' | 'customMobileEventRenderer' | 'locale' | 'readOnly' | 'switcherMode' | 'theme' | 'timeZone' | 'useCalendarHeader' | 'useEventDetailDialog' | 'useEventDetailPanel' | 'views'>;
 type CalendarAppConfigSyncSnapshot = {
     callbacks: CalendarAppConfig['callbacks'];
     syncableConfig: SyncableCalendarAppConfig;
@@ -2972,33 +2965,6 @@ type SidebarBridgeFn = (app: ICalendarApp) => SidebarBridgeReturn;
 declare function registerSidebarImplementation(fn: SidebarBridgeFn): void;
 declare function useSidebarBridge(app: ICalendarApp): SidebarBridgeReturn;
 
-interface ContextMenuProps {
-    x: number;
-    y: number;
-    onClose: () => void;
-    children: ComponentChildren;
-    className?: string;
-}
-declare const ContextMenu: preact.FunctionalComponent<preact_compat.PropsWithoutRef<ContextMenuProps> & {
-    ref?: preact.Ref<HTMLDivElement> | undefined;
-}>;
-declare const ContextMenuItem: ({ onClick, children, icon, danger, disabled, }: {
-    onClick: () => void;
-    children: ComponentChildren;
-    icon?: ComponentChildren;
-    danger?: boolean;
-    disabled?: boolean;
-}) => preact.JSX.Element;
-declare const ContextMenuSeparator: () => preact.JSX.Element;
-declare const ContextMenuLabel: ({ children, }: {
-    children: ComponentChildren;
-}) => preact.JSX.Element;
-declare const ContextMenuColorPicker: ({ selectedColor, onSelect, onCustomColor, }: {
-    selectedColor?: string;
-    onSelect: (color: string) => void;
-    onCustomColor?: () => void;
-}) => preact.JSX.Element;
-
 interface GridContextMenuProps {
     x: number;
     y: number;
@@ -3047,30 +3013,6 @@ interface DefaultColorPickerProps {
 }
 declare const DefaultColorPicker: ({ color, onChange, onClose, }: DefaultColorPickerProps) => preact.JSX.Element;
 
-type ZonedRange = [Temporal.ZonedDateTime, Temporal.ZonedDateTime];
-interface RangePickerProps {
-    value: [
-        Temporal.PlainDate | Temporal.PlainDateTime | Temporal.ZonedDateTime,
-        Temporal.PlainDate | Temporal.PlainDateTime | Temporal.ZonedDateTime
-    ];
-    format?: string;
-    showTimeFormat?: string;
-    showTime?: boolean | {
-        format?: string;
-    };
-    onChange?: (value: ZonedRange, dateString: [string, string]) => void;
-    onOk?: (value: ZonedRange, dateString: [string, string]) => void;
-    timeZone?: string;
-    disabled?: boolean;
-    placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
-    autoAdjustOverflow?: boolean;
-    getPopupContainer?: () => HTMLElement;
-    matchTriggerWidth?: boolean;
-    locale?: string | Locale;
-}
-
-declare const RangePicker: ({ value, format, showTimeFormat, showTime, onChange, onOk, timeZone, disabled, placement, autoAdjustOverflow, getPopupContainer, matchTriggerWidth, locale, }: RangePickerProps) => JSX.Element;
-
 interface MiniCalendarProps {
     visibleMonth: Date;
     currentDate: Date;
@@ -3100,7 +3042,6 @@ interface DefaultEventDetailDialogProps extends EventDetailDialogProps {
 }
 /**
  * Default event detail dialog component (Dialog mode)
- * Content is consistent with DefaultEventDetailPanel, but displayed using Dialog/Modal
  */
 declare const DefaultEventDetailDialog: ({ event, isOpen, onEventUpdate, onEventDelete, onClose, app, }: DefaultEventDetailDialogProps) => preact.VNode<any> | null;
 
@@ -3172,6 +3113,8 @@ interface CalendarEventProps {
     customDetailPanelContent?: EventDetailContentRenderer;
     /** Custom event detail dialog component (Dialog mode) */
     customEventDetailDialog?: EventDetailDialogRenderer;
+    /** When false, suppresses the floating event detail panel entirely */
+    useEventDetailPanel?: boolean;
     /** Multi-day regular event segment information */
     multiDaySegmentInfo?: {
         startHour: number;
@@ -3209,7 +3152,21 @@ interface CalendarEventProps {
     appTimeZone?: string;
 }
 
-declare const CalendarEvent: ({ event, layout, isAllDay, allDayHeight, calendarRef, isBeingDragged, isBeingResized, viewType, isMultiDay, segment, yearSegment, columnsPerRow, segmentIndex, hourHeight, firstHour, selectedEventId, detailPanelEventId, onMoveStart, onResizeStart, onEventUpdate, onEventDelete, newlyCreatedEventId, onDetailPanelOpen, onEventSelect, onEventLongPress, onDetailPanelToggle, customDetailPanelContent, customEventDetailDialog, multiDaySegmentInfo, app, isMobile, isSlidingView, enableTouch, hideTime, timeFormat, styleOverride, className, disableDefaultStyle, renderVisualContent, resizeHandleOrientation, appTimeZone, }: CalendarEventProps) => preact.JSX.Element;
+declare const CalendarEvent: ({ event, layout, isAllDay, allDayHeight, calendarRef, isBeingDragged, isBeingResized, viewType, isMultiDay, segment, yearSegment, columnsPerRow, segmentIndex, hourHeight, firstHour, selectedEventId, detailPanelEventId, onMoveStart, onResizeStart, onEventUpdate, onEventDelete, newlyCreatedEventId, onDetailPanelOpen, onEventSelect, onEventLongPress, onDetailPanelToggle, customDetailPanelContent, customEventDetailDialog, useEventDetailPanel, multiDaySegmentInfo, app, isMobile, isSlidingView, enableTouch, hideTime, timeFormat, styleOverride, className, disableDefaultStyle, renderVisualContent, resizeHandleOrientation, appTimeZone, }: CalendarEventProps) => preact.JSX.Element;
+
+interface LayoutCalculationParams {
+    containerWidth?: number;
+    viewType?: 'week' | 'day';
+}
+
+declare const EventLayoutCalculator: {
+    /**
+     * Calculate layout for all events in a day
+     * @param dayEvents Array of events for the day
+     * @param params Layout calculation parameters
+     */
+    calculateDayEventLayouts(dayEvents: Event[], params?: LayoutCalculationParams): Map<string, EventLayout>;
+};
 
 interface IconProps {
     className?: string;
@@ -3231,27 +3188,27 @@ declare const AlertCircle: ({ className, width, height, }: IconProps) => preact.
 /**
  * Cancel button
  */
-declare const cancelButton = "rounded-md bg-background border border-border px-3 py-2 text-xs font-medium text-gray-700 dark:text-gray-300 hover:bg-(--hover)";
+declare const cancelButton = "df-btn-sm df-btn-sm-ghost";
 /**
  * Calendar picker dropdown (for selecting calendar for an event)
  */
-declare const calendarPickerDropdown = "df-portal bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden transition-all duration-200 origin-top-right df-animate-in df-fade-in df-zoom-in-95";
+declare const calendarPickerDropdown = "df-portal df-calendar-picker-dropdown df-animate-in df-fade-in df-zoom-in-95";
 /**
  * Sidebar container
  */
-declare const sidebarContainer = "df-sidebar flex h-full flex-col border-r";
+declare const sidebarContainer = "df-sidebar";
 /**
  * Sidebar header
  */
-declare const sidebarHeader = "df-sidebar-header flex items-center px-2 py-1";
+declare const sidebarHeader = "df-sidebar-header";
 /**
  * Sidebar header toggle button
  */
-declare const sidebarHeaderToggle = "df-sidebar-header-toggle flex h-8 w-8 items-center justify-center rounded hover:bg-gray-100 dark:hover:bg-slate-800";
+declare const sidebarHeaderToggle = "df-sidebar-toggle";
 /**
  * Sidebar header title
  */
-declare const sidebarHeaderTitle = "df-sidebar-header-title text-sm font-semibold text-gray-700 dark:text-gray-200";
+declare const sidebarHeaderTitle = "df-sidebar-header-title";
 
-export { AlertCircle, AudioLines, BlossomColorPicker, CalendarApp, CalendarEvent, CalendarRegistry, CalendarRenderer, Check, ChevronDown, ChevronRight, ChevronsUpDown, ContentSlot, ContextMenu, ContextMenuColorPicker, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, CreateCalendarDialog, CustomRenderingStore, RangePicker as DayflowRangePicker, DefaultColorPicker, DefaultEventDetailDialog, DefaultEventDetailPanel, EventContextMenu, GridContextMenu, LAYOUT_CONFIG, LOCALES, Loader2, LoadingButton, LocaleContext, LocaleProvider, MiniCalendar, PanelRightClose, PanelRightOpen, Plus, TIME_STEP, TimeZone, VIRTUAL_MONTH_SCROLL_CONFIG, ViewType, WeekDataCache, addDays, buildParseRegExp, calculateDayIndex, calendarPickerDropdown, cancelButton, capitalize, clipboardStore, compareAllDayDisplayPriority, compareViews, conditionalTheme, convertDateEvent, convertDateEventWithTimeZone, convertToDayFlowEvent, createAllDayDisplayComparator, createAllDayEvent, createConfigSyncSnapshot, createDateWithHour, createDayView, createEvent, createEventWithDate, createEventWithPlainDateTime, createEventWithRealDate, createEventWithZonedDateTime, createEvents, createEventsPlugin, createMonthView, createNormalizedCalendarAppConfigGetter, createStandardViews, createTemporalWithHour, createTimedEvent, createTimezoneEvent, createTimezoneEvents, createWeekView, createYearView, dateToPlainDate, dateToPlainDateTime, dateToZonedDateTime, daysBetween, daysDifference, downloadICS, en, escapeICSValue, extractHourFromDate, extractHourFromTemporal, extractVEvents, foldLine, formatDate, formatDateConsistent, formatDateToICSTimestamp, formatEventTimeRange, formatICSDate, formatMonthYear, formatProperty, formatTemporal, formatTime, generateDayData, generateICS, generateSecondaryTimeSlots, generateUniKey, generateVEvent, generateWeekData, generateWeekRange, generateWeeksData, getAllDayEventsForDay, getAllDayRangeMetrics, getCalendarColorsForHex, getCallbackConfigUpdate, getCurrentWeekDates, getDateByDayIndex, getDateObj, getDayIndexByDate, getEndOfDay, getEndOfTemporal, getEventBgColor, getEventEndHour, getEventTextColor, getEventsForDay, getEventsForWeek, getIntlLabel, getLineColor, getMonthLabels, getMonthYearOfWeek, getNextHourRangeInTimeZone, getNowInTimeZone, getPlainDate, getSearchHeaderInfo, getSelectedBgColor, getStartOfDay, getStartOfTemporal, getSyncConfigUpdates, getTestEvents, getTimezoneDisplayLabel, getTodayInTimeZone, getWeekDaysLabels, getWeekNumber, getWeekRange, getZoneId, groupSearchResults, hasEventChanged, importICSFile, isDate, isDeepEqual, isEventDeepEqual, isEventInWeek, isMultiDayEvent, isMultiDayTemporalEvent, isPlainDate, isPlainDateTime, isSameDay, isSamePlainDate, isSameTemporal, isValidLocale, isZonedDateTime, mergeClasses, mergeFormatTemplate, monthNames, normalizeCssWidth, normalizeDate, normalizeLocale, normalizeTimeZoneValue, normalizeToZoned, now, pad, pad2, parseICS, parseICSDate, parseTemporalString, parseVEventLines, pickSyncableConfig, plainDateTimeToDate, plainDateToDate, recalculateEventDays, registerDragImplementation, registerLocale, registerSidebarImplementation, resolveAppliedTheme, restoreTimedDragFromAllDayTransition, restoreVisualEventToCanonical, restoreVisualTimedTemporalToCanonical, roundToTimeStep, scrollbarTakesSpace, setHourInTemporal, shortMonthNames, sidebarContainer, sidebarHeader, sidebarHeaderTitle, sidebarHeaderToggle, sortAllDayByTitle, subscribeCalendar, syncCalendarAppConfig, t, temporalToDate, temporalToVisualDate, temporalToVisualTemporal, themeClasses, themeCn, today, unescapeICSValue, updateEventDateAndDay, updateEventWithRealDate, useDragForView, useLocale, useSidebarBridge, weekDays, weekDaysFullName, zonedDateTimeToDate };
-export type { AllDaySortComparator, BalanceStrategy, BaseViewProps, CalendarAppConfig, CalendarAppConfigSyncSnapshot, CalendarAppState, CalendarCallbacks, CalendarColors, CalendarConfig, CalendarEventProps, CalendarHeaderProps, CalendarPlugin, CalendarType, CalendarView, CalendarViewType, CalendarsConfig, ColorPickerProps, CreateCalendarDialogColorPickerProps, CreateCalendarDialogProps, CreateEventParams, CreateTimezoneEventParams, CustomRendering, DayData, DayViewConfig, DayViewProps, DragConfig, DragHookOptions, DragHookReturn, DragIndicatorProps, DragIndicatorRenderer, DragIntegrationProps, DragPluginConfig, DragRef, DragService, Event, EventChange, EventContentSlotArgs, EventContextMenuSlotArgs, EventDetailContentProps, EventDetailContentRenderer, EventDetailDialogProps, EventDetailDialogRenderer, EventDetailPanelProps, EventDetailPanelRenderer, EventDetailPosition, EventGroup, EventLayout, EventRelations, EventsPluginConfig, EventsService, GridContextMenuSlotArgs, ICSDateParams, ICSExportOptions, ICSImportOptions, ICSImportResult, ICSParseError, ICSVEvent, ICalendarApp, Locale, LocaleCode, LocaleContextValue, LocaleDict, LocaleMessages, LocaleProviderProps, MobileEventProps, MobileEventRenderer, Mode, MonthDragState, MonthEventDragState, MonthScrollConfig, MonthViewConfig, MonthViewProps, NestedLayer, RangeChangeReason, RangePickerProps, ReadOnlyConfig, SidebarBridgeReturn, SidebarHeaderSlotArgs, SpecialLayoutRule, SubscribeResult, SubtreeAnalysis, SupportedLang, SyncableCalendarAppConfig, TComponent, TNode, ThemeColors, ThemeConfig, ThemeMode, TimeZoneValue, TitleBarSlotProps, TransferOperation, TranslationKey, UnifiedDragRef, UseCalendarAppReturn, UseCalendarReturn, UseDragCommonReturn, UseDragHandlersParams, UseDragHandlersReturn, UseDragManagerReturn, UseDragStateReturn, UseMonthDragParams, UseMonthDragReturn, UseVirtualMonthScrollProps, UseVirtualMonthScrollReturn, UseVirtualScrollProps, UseVirtualScrollReturn, UseWeekDayDragParams, UseWeekDayDragReturn, ViewAdapterProps, ViewConfigComparison, ViewFactory, ViewFactoryConfig, VirtualItem, VirtualScrollIntegrationProps, VirtualWeekItem, WeekDayDragState, WeekViewConfig, WeekViewProps, WeeksData, YearViewConfig, YearViewProps, ZonedRange, useDragProps, useDragReturn };
+export { AlertCircle, AudioLines, BlossomColorPicker, CalendarApp, CalendarEvent, CalendarRegistry, CalendarRenderer, Check, ChevronDown, ChevronRight, ChevronsUpDown, ContentSlot, CreateCalendarDialog, CustomRenderingStore, DefaultColorPicker, DefaultEventDetailDialog, DefaultEventDetailPanel, EventContextMenu, EventLayoutCalculator, GridContextMenu, LAYOUT_CONFIG, LOCALES, Loader2, LoadingButton, LocaleContext, LocaleProvider, MiniCalendar, PanelRightClose, PanelRightOpen, Plus, TIME_STEP, TimeZone, VIRTUAL_MONTH_SCROLL_CONFIG, ViewType, WeekDataCache, addDays, buildColorBarGradient, buildDiagonalColorBarGradient, buildDiagonalPatternBackground, calculateDayIndex, calendarPickerDropdown, cancelButton, capitalize, clipboardStore, compareAllDayDisplayPriority, compareViews, convertToDayFlowEvent, createAllDayDisplayComparator, createAllDayEvent, createConfigSyncSnapshot, createDateWithHour, createDayView, createEvent, createEventWithDate, createEventWithPlainDateTime, createEventWithRealDate, createEventWithZonedDateTime, createEvents, createEventsPlugin, createMonthView, createNormalizedCalendarAppConfigGetter, createStandardViews, createTemporalWithHour, createTimedEvent, createTimezoneEvent, createTimezoneEvents, createWeekView, createYearView, dateToPlainDate, dateToPlainDateTime, dateToZonedDateTime, daysBetween, daysDifference, downloadICS, en, escapeICSValue, extractHourFromDate, extractHourFromTemporal, extractVEvents, foldLine, formatDate, formatDateConsistent, formatDateToICSTimestamp, formatEventTimeRange, formatICSDate, formatMonthYear, formatProperty, formatTime, generateDayData, generateICS, generateSecondaryTimeSlots, generateUniKey, generateVEvent, generateWeekData, generateWeekRange, generateWeeksData, getAllDayEventsForDay, getAllDayRangeMetrics, getCalendarColorsForHex, getCalendarEventBgColors, getCalendarLineColors, getCallbackConfigUpdate, getCurrentWeekDates, getDateByDayIndex, getDateObj, getDayIndexByDate, getEndOfDay, getEndOfTemporal, getEventBgColor, getEventEndHour, getEventTextColor, getEventsForDay, getEventsForWeek, getIntlLabel, getLineColor, getMonthLabels, getMonthYearOfWeek, getNextHourRangeInTimeZone, getNowInTimeZone, getPlainDate, getPrimaryCalendarId, getSearchHeaderInfo, getSelectedBgColor, getStartOfDay, getStartOfTemporal, getSyncConfigUpdates, getTestEvents, getTimezoneDisplayLabel, getTodayInTimeZone, getWeekDaysLabels, getWeekNumber, getWeekRange, groupSearchResults, hasEventChanged, importICSFile, isDate, isDeepEqual, isEventDeepEqual, isEventInWeek, isMultiDayEvent, isMultiDayTemporalEvent, isPlainDate, isPlainDateTime, isSameDay, isSamePlainDate, isSameTemporal, isValidLocale, isZonedDateTime, monthNames, normalizeCssWidth, normalizeDate, normalizeLocale, normalizeTimeZoneValue, now, pad2, parseICS, parseICSDate, parseVEventLines, pickSyncableConfig, plainDateTimeToDate, plainDateToDate, recalculateEventDays, registerDragImplementation, registerLocale, registerSidebarImplementation, resolveAppliedTheme, restoreTimedDragFromAllDayTransition, restoreVisualEventToCanonical, restoreVisualTimedTemporalToCanonical, roundToTimeStep, scrollbarTakesSpace, setHourInTemporal, shortMonthNames, sidebarContainer, sidebarHeader, sidebarHeaderTitle, sidebarHeaderToggle, sortAllDayByTitle, subscribeCalendar, syncCalendarAppConfig, t, temporalToDate, temporalToVisualDate, temporalToVisualTemporal, today, unescapeICSValue, updateEventDateAndDay, updateEventWithRealDate, useDragForView, useLocale, useSidebarBridge, weekDays, weekDaysFullName, zonedDateTimeToDate };
+export type { AllDaySortComparator, BalanceStrategy, BaseViewProps, CalendarAppConfig, CalendarAppConfigSyncSnapshot, CalendarAppState, CalendarCallbacks, CalendarColors, CalendarConfig, CalendarEventProps, CalendarHeaderProps, CalendarPlugin, CalendarSearchEvent, CalendarSearchProps, CalendarType, CalendarView, CalendarViewType, CalendarsConfig, ColorPickerProps, CreateCalendarDialogColorPickerProps, CreateCalendarDialogProps, CreateEventParams, CreateTimezoneEventParams, CustomRendering, DayData, DayViewConfig, DayViewProps, DragConfig, DragHookOptions, DragHookReturn, DragIndicatorProps, DragIndicatorRenderer, DragIntegrationProps, DragPluginConfig, DragRef, DragService, Event, EventChange, EventContentSlotArgs, EventContextMenuSlotArgs, EventDetailContentProps, EventDetailContentRenderer, EventDetailDialogProps, EventDetailDialogRenderer, EventDetailPanelProps, EventDetailPanelRenderer, EventDetailPosition, EventGroup, EventLayout, EventRelations, EventsPluginConfig, EventsService, GridContextMenuSlotArgs, ICSDateParams, ICSExportOptions, ICSImportOptions, ICSImportResult, ICSParseError, ICSVEvent, ICalendarApp, Locale, LocaleCode, LocaleContextValue, LocaleDict, LocaleMessages, LocaleProviderProps, MobileEventProps, MobileEventRenderer, Mode, MonthDragState, MonthEventDragState, MonthScrollConfig, MonthViewConfig, MonthViewProps, NestedLayer, RangeChangeReason, ReadOnlyConfig, SidebarBridgeReturn, SidebarHeaderSlotArgs, SpecialLayoutRule, SubscribeResult, SubtreeAnalysis, SupportedLang, SyncableCalendarAppConfig, TComponent, TNode, ThemeColors, ThemeConfig, ThemeMode, TimeZoneValue, TitleBarSlotProps, TransferOperation, TranslationKey, UnifiedDragRef, UseCalendarAppReturn, UseCalendarReturn, UseDragCommonReturn, UseDragHandlersParams, UseDragHandlersReturn, UseDragManagerReturn, UseDragStateReturn, UseMonthDragParams, UseMonthDragReturn, UseVirtualMonthScrollProps, UseVirtualMonthScrollReturn, UseVirtualScrollProps, UseVirtualScrollReturn, UseWeekDayDragParams, UseWeekDayDragReturn, ViewAdapterProps, ViewConfigComparison, ViewFactory, ViewFactoryConfig, VirtualItem, VirtualScrollIntegrationProps, VirtualWeekItem, WeekDayDragState, WeekViewConfig, WeekViewProps, WeeksData, YearViewConfig, YearViewProps, useDragProps, useDragReturn };