50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T8515,"use client"; import * as React from "react"; import { createPortal } from "react-dom"; import { cn } from "@/lib/utils"; import { useIsPast } from "@/hooks/use-now"; import { Popover, PopoverAnchor, PopoverTrigger, } from "@/components/ui/popover"; import { EventDetailPopover } from "./event-detail-popover"; import { useCalendarPopoverBoundary } from "./calendar-popover-context"; import { EventContentSlot, useCalendarConfig } from "./calendar-provider"; import { formatTime, formatTimeRange, getEventLabel } from "@/lib/event-utils"; import type { CalendarEvent, CalendarEventItemProps, EventColor, EventContentProps, EventItemPopoverProps, } from "./week-view-types"; import { EventContextMenu } from "./event-context-menu"; export const eventColorStyles: Record< EventColor, { bg: string; bgHover: string; border: string; borderLine: string; text: string; } > = { red: { bg: "bg-event-red-bg", bgHover: "hover:bg-event-red-bg/70", border: "bg-event-red-border", borderLine: "border-event-red-border", text: "text-event-red", }, orange: { bg: "bg-event-orange-bg", bgHover: "hover:bg-event-orange-bg/70", border: "bg-event-orange-border", borderLine: "border-event-orange-border", text: "text-event-orange", }, yellow: { bg: "bg-event-yellow-bg", bgHover: "hover:bg-event-yellow-bg/70", border: "bg-event-yellow-border", borderLine: "border-event-yellow-border", text: "text-event-yellow", }, green: { bg: "bg-event-green-bg", bgHover: "hover:bg-event-green-bg/70", border: "bg-event-green-border", borderLine: "border-event-green-border", text: "text-event-green", }, blue: { bg: "bg-event-blue-bg", bgHover: "hover:bg-event-blue-bg/70", border: "bg-event-blue-border", borderLine: "border-event-blue-border", text: "text-event-blue", }, purple: { bg: "bg-event-purple-bg", bgHover: "hover:bg-event-purple-bg/70", border: "bg-event-purple-border", borderLine: "border-event-purple-border", text: "text-event-purple", }, gray: { bg: "bg-event-gray-bg", bgHover: "hover:bg-event-gray-bg/70", border: "bg-event-gray-border", borderLine: "border-event-gray-border", text: "text-event-gray", }, }; /** * Positions a block from explicit start/end times (drag and resize * previews), clipped to the visible hours and measured from the grid's top * edge (`dayStartHour`) */ function computeOverrideStyle( positionedEvent: CalendarEventItemProps["positionedEvent"], hourHeight: number, overrideStart: Date, overrideEnd: Date, dayStartHour: number, dayEndHour: number, ) { const startMinutes = overrideStart.getHours() * 60 + overrideStart.getMinutes(); let endMinutes = overrideEnd.getHours() * 60 + overrideEnd.getMinutes(); // If end is midnight and on a different day than start, treat as 1440 (end of day) if (endMinutes === 0 && overrideEnd.getDate() !== overrideStart.getDate()) { endMinutes = 1440; } const visibleStart = dayStartHour * 60; const visibleEnd = dayEndHour * 60; const topMinutes = Math.min(Math.max(startMinutes, visibleStart), visibleEnd) - visibleStart; const bottomMinutes = Math.min(Math.max(endMinutes, visibleStart), visibleEnd) - visibleStart; const topPx = (topMinutes / 60) * hourHeight; const heightPx = ((bottomMinutes - topMinutes) / 60) * hourHeight; return { top: `${topPx}px`, height: `${heightPx}px`, left: `${positionedEvent.left}%`, width: `${positionedEvent.width}%`, minHeight: "20px", }; } const RESIZE_HOTZONE_PX = 8; /** * Keyboard focus ring for events: a border on an `::after` overlay, painted * above the event's absolutely positioned background layers (which cover an * outline) and inside its box (so clipping and neighbors don't hide it). * Shown only for keyboard focus (`focus-visible`), never on click. The * event must be positioned. */ export const EVENT_FOCUS_RING_CLASS = "focus-visible:after:pointer-events-none focus-visible:after:absolute focus-visible:after:inset-0 focus-visible:after:rounded-[inherit] focus-visible:after:border-2 focus-visible:after:border-ring"; /** * Box for custom `renderEventContent` output in a time-grid block: above the * background layers, filling the block, inset like the default text */ const TIME_GRID_SLOT_CLASS = "relative h-full min-w-0 overflow-hidden pl-1"; export function CalendarEventItem({ positionedEvent, hourHeight, isPast: isPastProp, isSelected, onClick, dragVariant = "default", isResizing = false, overrideStart, overrideEnd, onDragPointerDown, onResizePointerDown, onEventChange, cursorY, cursorX, fixedWidth, fixedHeight, onContextMenuOpenChange, showEventPopover, onEventPopoverExpand, onEventPopoverClose, onPrevWeek, onNextWeek, className, }: CalendarEventItemProps) { const { event, segmentPosition = "full" } = positionedEvent; const color = event.color ?? "blue"; const styles = eventColorStyles[color]; // `false` on the server and during hydration, so the markup matches const endIsPast = useIsPast(event.end); const eventIsPast = isPastProp ?? endIsPast; const { view, boundaryRight, headerBottom } = useCalendarPopoverBoundary(); const { dayStartHour, dayEndHour, hourCycle, locale } = useCalendarConfig(); const isDayView = view === "day"; /** Ref to the event button element, used to measure its viewport rect. */ const eventRef = React.useRef(null); /** * Viewport-relative top & height of the event element. * Used to vertically align the day-view PopoverAnchor with the event * so the popover appears beside the event rather than at a fixed position. */ const [anchorRect, setAnchorRect] = React.useState<{ top: number; height: number; } | null>(null); const showPopover = isSelected && showEventPopover; // Measure the event element's viewport position when the popover opens in // day view. useLayoutEffect ensures the measurement happens before paint so // the PopoverAnchor is positioned correctly on first frame. React.useLayoutEffect(() => { if (!showPopover || !isDayView || !eventRef.current) { setAnchorRect(null); return; } const rect = eventRef.current.getBoundingClientRect(); setAnchorRect({ top: rect.top, height: rect.height }); }, [showPopover, isDayView]); const hasTopRounding = segmentPosition === "start" || segmentPosition === "full"; const hasBottomRounding = segmentPosition === "end" || segmentPosition === "full"; const showTopResize = segmentPosition === "start" || segmentPosition === "full"; const showBottomResize = segmentPosition === "end" || segmentPosition === "full"; const [contextMenu, setContextMenu] = React.useState<{ x: number; y: number; } | null>(null); const closeContextMenu = React.useCallback(() => { setContextMenu(null); onContextMenuOpenChange?.(false); }, [onContextMenuOpenChange]); const displayStart = overrideStart ?? event.start; const displayEnd = overrideEnd ?? event.end; const displayEvent: CalendarEvent = overrideStart && overrideEnd ? { ...event, start: displayStart, end: displayEnd } : event; const defaultStyle = { top: `${positionedEvent.top}%`, height: `${positionedEvent.height}%`, left: `${positionedEvent.left}%`, width: `${positionedEvent.width}%`, minHeight: "20px", zIndex: isSelected ? 20 : positionedEvent.column, }; const posStyle = overrideStart && overrideEnd ? computeOverrideStyle( positionedEvent, hourHeight, overrideStart, overrideEnd, dayStartHour, dayEndHour, ) : defaultStyle; const heightInPixels = overrideStart && overrideEnd ? Number.parseFloat(String(posStyle.height)) : (positionedEvent.height / 100) * (dayEndHour - dayStartHour) * hourHeight; const isCompact = heightInPixels < 40; /** * A resize preview drawn next to the real event (its anchor or another * day's segment), not an event the user can focus */ const isPreview = isResizing || Boolean(overrideStart && overrideEnd); const timeRangeLabel = formatTimeRange( displayEvent.start, displayEvent.end, hourCycle, locale, ); const contentProps: EventContentProps = { event: displayEvent, view, placement: "time-grid", isSelected: isSelected ?? false, isPast: eventIsPast, isDragging: dragVariant === "dragging", isResizing, isCompact, timeLabel: timeRangeLabel, }; if (dragVariant === "ghost") { return (

{event.title} {!isCompact && ( {formatTimeRange(event.start, event.end, hourCycle, locale)} )}

} />

); } if (dragVariant === "placeholder") { return (

); } const isDraggingCopy = dragVariant === "dragging"; if (isDraggingCopy) { const durationMinutes = (displayEnd.getTime() - displayStart.getTime()) / 60000; const heightPx = fixedHeight ?? (durationMinutes / 60) * hourHeight; const useFixed = cursorX != null && cursorY != null; const draggingStyle: React.CSSProperties = useFixed ? { position: "fixed", top: `${cursorY}px`, left: `${cursorX}px`, height: `${heightPx}px`, width: fixedWidth != null ? `${fixedWidth}px` : "200px", minHeight: "20px", zIndex: 30, } : { top: posStyle.top, height: `${heightPx}px`, left: `${positionedEvent.left}%`, width: `${positionedEvent.width}%`, minHeight: "20px", zIndex: 30, }; return (

{event.title} {heightPx >= 40 && ( {timeRangeLabel} )}

} />

); } function handleMouseMove(e: React.MouseEvent) { const target = e.currentTarget as HTMLElement; const rect = target.getBoundingClientRect(); const offsetY = e.clientY - rect.top; const height = rect.height; if (showTopResize && showBottomResize && height < RESIZE_HOTZONE_PX * 2) { target.style.setProperty("--cursor", "row-resize"); return; } if (showTopResize && offsetY <= RESIZE_HOTZONE_PX) { target.style.setProperty("--cursor", "row-resize"); return; } if (showBottomResize && offsetY >= height - RESIZE_HOTZONE_PX) { target.style.setProperty("--cursor", "row-resize"); return; } target.style.removeProperty("--cursor"); } function handlePointerDown(e: React.PointerEvent) { e.stopPropagation(); const rect = e.currentTarget.getBoundingClientRect(); const offsetY = e.clientY - rect.top; const height = rect.height; if (showTopResize && showBottomResize && height < RESIZE_HOTZONE_PX * 2) { const edge = offsetY < height / 2 ? "top" : "bottom"; onResizePointerDown?.(e, event, edge); return; } if (showTopResize && offsetY <= RESIZE_HOTZONE_PX) { onResizePointerDown?.(e, event, "top"); return; } if (showBottomResize && offsetY >= height - RESIZE_HOTZONE_PX) { onResizePointerDown?.(e, event, "bottom"); return; } onDragPointerDown?.(e, event); } function handleClick(e: React.MouseEvent) { e.stopPropagation(); if (!onClick) return; onClick(event); } function handleKeyDown(e: React.KeyboardEvent) { if (e.key !== "Enter" && e.key !== " ") return; e.preventDefault(); onClick?.(event); } function handleContextMenu(e: React.MouseEvent) { e.preventDefault(); e.stopPropagation(); setContextMenu({ x: e.clientX, y: e.clientY }); onContextMenuOpenChange?.(true); } const eventElement = (

{/* Solid background layer to prevent transparency bleed-through */}

{/* Colored background layer - uses border color when selected */}

{/* Left border - hidden when selected (merges with bg) */} {!isSelected && (

)} {event.title} {!isCompact && ( {timeRangeLabel} )}

} />

); if (showPopover) { return ( <> { if (!open) onEventPopoverClose?.(event.id); }} > {eventElement} {/* * In day view the event spans the full grid width, so Radix can't * fit the popover beside the trigger. Place a zero-width anchor at * the RIGHT edge of the calendar boundary and use side="left" so * the popover extends leftward \u2014 matching Notion Calendar. * * The anchor is portaled to document.body to escape scroll * containers that apply CSS transforms (which break position:fixed * by creating a new containing block). */} {isDayView && createPortal( , document.body, )} onEventPopoverClose?.(event.id)} onExpand={onEventPopoverExpand} onPrevWeek={onPrevWeek} onNextWeek={onNextWeek} side={isDayView ? "left" : "right"} collisionPaddingTop={isDayView ? headerBottom : undefined} /> {contextMenu && ( )} ); } return ( <> {eventElement} {contextMenu && ( )} ); } /** Drag visual variant for all-day events */ export type AllDayDragVariant = "ghost" | "placeholder" | "dragging"; export interface AllDayEventItemProps extends EventItemPopoverProps { event: CalendarEvent; /** Overrides whether the event renders as past (defaults to `useIsPast`) */ isPast?: boolean; isSelected?: boolean; onClick?: (event: CalendarEvent) => void; className?: string; /** For multi-day events: position info */ spanStart?: boolean; spanEnd?: boolean; /** Pointerdown handler to initiate horizontal resize or drag */ onResizePointerDown?: ( e: React.PointerEvent, event: CalendarEvent, edge: "left" | "right" | "move", ) => void; /** Callback when an event is changed (e.g. color change from context menu) */ onEventChange?: (event: CalendarEvent) => void; /** Callback when context menu open state changes */ onContextMenuOpenChange?: (open: boolean) => void; /** * Percentage of the event's width that is hidden off-screen to the left. * Used in day view to offset the title into the visible area so multi-day * events always show their title \u2014 \u201csticky title\u201d effect. */ titleOffsetPercent?: number; /** Visual variant during drag operations */ dragVariant?: AllDayDragVariant; /** Whether the event's edges are being dragged (passed to `renderEventContent`) */ isResizing?: boolean; } const ALL_DAY_RESIZE_HOTZONE_PX = 6; /** * Box for custom `renderEventContent` output in an all-day bar: above the * background layers, filling the bar (`pl-1` is added beside the left accent) */ const ALL_DAY_SLOT_CLASS = "relative flex h-full min-w-0 flex-1 items-center overflow-hidden"; export function AllDayEventItem({ event, isPast: isPastProp, isSelected, onClick, className, spanStart = true, spanEnd = true, onResizePointerDown, onEventChange, onContextMenuOpenChange, showEventPopover, onEventPopoverExpand, onEventPopoverClose, onPrevWeek, onNextWeek, titleOffsetPercent = 0, dragVariant, isResizing = false, }: AllDayEventItemProps) { const color = event.color ?? "blue"; const styles = eventColorStyles[color]; const { view, boundaryRight, headerBottom } = useCalendarPopoverBoundary(); const { hourCycle, locale } = useCalendarConfig(); const isDayView = view === "day"; // `false` on the server and during hydration, so the markup matches const endIsPast = useIsPast(event.end); const eventIsPast = isPastProp ?? endIsPast; const [contextMenu, setContextMenu] = React.useState<{ x: number; y: number; } | null>(null); const closeContextMenu = React.useCallback(() => { setContextMenu(null); onContextMenuOpenChange?.(false); }, [onContextMenuOpenChange]); // Check if event has a specific start time (not midnight) const hasStartTime = event.start.getHours() !== 0 || event.start.getMinutes() !== 0; // "8:45 AM" / "4 PM", or "08:45" / "16:00" on a 24-hour clock const startTimeLabel = hasStartTime ? formatTime(event.start, hourCycle, locale) : ""; const contentProps: EventContentProps = { event, view, placement: "all-day", isSelected: isSelected ?? false, isPast: eventIsPast, isDragging: dragVariant === "dragging", isResizing, isCompact: true, timeLabel: startTimeLabel, }; const slotClassName = cn(ALL_DAY_SLOT_CLASS, spanStart && "pl-1"); // Ghost: faded version at original position during move if (dragVariant === "ghost") { return (

{spanStart && (

)} {event.title} } />

); } // Placeholder: border-only outline at target position if (dragVariant === "placeholder") { return (

); } // Dragging copy: floating replica following cursor if (dragVariant === "dragging") { return (

{event.title} } />

); } function handleClick(e: React.MouseEvent) { e.stopPropagation(); if (!onClick) { return; } onClick(event); } function handleKeyDown(e: React.KeyboardEvent) { if (e.key !== "Enter" && e.key !== " ") { return; } e.preventDefault(); onClick?.(event); } function handleAllDayMouseMove(e: React.MouseEvent) { const target = e.currentTarget as HTMLElement; const rect = target.getBoundingClientRect(); const offsetX = e.clientX - rect.left; const width = rect.width; if (spanStart && offsetX <= ALL_DAY_RESIZE_HOTZONE_PX) { target.style.setProperty("--cursor", "col-resize"); return; } if (spanEnd && offsetX >= width - ALL_DAY_RESIZE_HOTZONE_PX) { target.style.setProperty("--cursor", "col-resize"); return; } target.style.removeProperty("--cursor"); } function handleAllDayPointerDown(e: React.PointerEvent) { if (!onResizePointerDown) return; const rect = e.currentTarget.getBoundingClientRect(); const offsetX = e.clientX - rect.left; const width = rect.width; if (spanStart && offsetX <= ALL_DAY_RESIZE_HOTZONE_PX) { e.stopPropagation(); onResizePointerDown(e, event, "left"); return; } if (spanEnd && offsetX >= width - ALL_DAY_RESIZE_HOTZONE_PX) { e.stopPropagation(); onResizePointerDown(e, event, "right"); return; } // Middle area: initiate drag (move) e.stopPropagation(); onResizePointerDown(e, event, "move"); } function handleContextMenu(e: React.MouseEvent) { e.preventDefault(); e.stopPropagation(); setContextMenu({ x: e.clientX, y: e.clientY }); onContextMenuOpenChange?.(true); } const showPopover = isSelected && showEventPopover; const eventElement = (

0 ? { paddingLeft: `${titleOffsetPercent}%` } : undefined } > {/* Solid background layer to prevent transparency bleed-through */}

{/* Colored background layer - uses border color when selected */}

{/* Left border - hidden when selected (merges with bg) */} {spanStart && !isSelected && (

)} {event.title} {hasStartTime && ( {startTimeLabel} )} } />

); if (showPopover) { return ( <> { if (!open) onEventPopoverClose?.(event.id); }} > {eventElement} {/* * In day view, all-day events span the full width. Portal the * anchor to document.body (escaping transformed scroll containers) * and position it at the calendar boundary's right edge so the * popover always appears at the visible right edge \u2014 even when the * event wrapper extends into off-screen buffer days. */} {isDayView && createPortal( , document.body, )} onEventPopoverClose?.(event.id)} onExpand={onEventPopoverExpand} onPrevWeek={onPrevWeek} onNextWeek={onNextWeek} side={isDayView ? "left" : "right"} align="start" collisionPaddingTop={isDayView ? headerBottom : undefined} /> {contextMenu && ( )} ); } return ( <> {eventElement} {contextMenu && ( )} ); } 53:T9982,"use client"; import * as React from "react"; import * as ReactDOM from "react-dom"; import { addDays, differenceInCalendarDays, differenceInMinutes, format, parse, } from "date-fns"; import type { Locale } from "date-fns"; import { Bell, Check, ChevronDown, CircleHelp, ChevronLeft, ChevronRight, Clock, Copy, Globe, MapPin, MoreHorizontal, NotepadText, RefreshCcw, SquareDashed, TabletSmartphone, Trash2, User, Video, } from "lucide-react"; import { cn } from "@/lib/utils"; import { useTimeZoneDisplayName } from "@/hooks/use-timezone-label"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Switch } from "@/components/ui/switch"; import { useCalendarConfig } from "./calendar-provider"; import { formatTime } from "@/lib/event-utils"; import type { DetailedCalendarEvent, EventColor } from "./week-view-types"; /** * Props for EventDetailPanel. `TEvent` is the app's event type; detail fields * it doesn't set show placeholders, and edits keep its other fields. */ interface EventDetailPanelProps< TEvent extends DetailedCalendarEvent = DetailedCalendarEvent, > { event: TEvent; onEventChange?: (event: TEvent) => void; onPrevWeek?: () => void; onNextWeek?: () => void; /** Extra action buttons rendered in the header row (after the "..." menu). */ headerActions?: React.ReactNode; /** When true, focuses and selects the title input once (e.g. for a just-created event). */ autoFocusTitle?: boolean; /** Called after the title input was auto-focused, so the request is not repeated. */ onTitleAutoFocused?: () => void; } const colorDotClass: Record = { red: "bg-event-red-border", orange: "bg-event-orange-border", yellow: "bg-event-yellow-border", green: "bg-event-green-border", blue: "bg-event-blue-border", purple: "bg-event-purple-border", gray: "bg-event-gray-border", }; function formatDuration(start: Date, end: Date): string { const totalMinutes = differenceInMinutes(end, start); if (totalMinutes < 60) { return `${totalMinutes}min`; } const hours = Math.floor(totalMinutes / 60); const minutes = totalMinutes % 60; if (minutes === 0) { return `${hours}h`; } return `${hours}h ${minutes}min`; } interface ParsedTime { hours: number; minutes: number; } /** * Parses a user-typed time string into hours and minutes. * Accepts formats: "3 PM", "3:30 PM", "15:00", "3pm", "330pm", "3:30pm". * Returns null if the input cannot be parsed. */ function parseTimeInput(input: string): ParsedTime | null { const trimmed = input.trim().toLowerCase(); if (trimmed.length === 0) { return null; } const isPM = /pm$/.test(trimmed); const isAM = /am$/.test(trimmed); const stripped = trimmed.replace(/\s*(am|pm)\s*$/, "").trim(); if (stripped.length === 0) { return null; } let hours: number; let minutes: number; if (stripped.includes(":")) { const parts = stripped.split(":"); if (parts.length !== 2) { return null; } hours = Number.parseInt(parts[0], 10); minutes = Number.parseInt(parts[1], 10); } else { const num = Number.parseInt(stripped, 10); if (Number.isNaN(num)) { return null; } if (stripped.length > 2 && num > 99) { // e.g., "330" → 3:30, "1230" → 12:30 minutes = num % 100; hours = Math.floor(num / 100); } else { hours = num; minutes = 0; } } if (Number.isNaN(hours) || Number.isNaN(minutes)) { return null; } // Apply AM/PM conversion if (isPM && hours < 12) { hours += 12; } if (isAM && hours === 12) { hours = 0; } if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) { return null; } return { hours, minutes }; } /** * Returns a new Date with the same year/month/day as `base` * but with hours and minutes replaced. */ function applyTimeToDate(base: Date, hours: number, minutes: number): Date { const result = new Date(base); result.setHours(hours, minutes, 0, 0); return result; } function formatDateDisplay(date: Date, locale: Locale): string { return format(date, "EEE MMM d", { locale }); } /** * Parses a user-typed date string into a Date. * Strips any leading weekday name and parses "MMM d" (e.g., "Mar 11") in * the calendar's locale. Uses the reference date's year. Returns null if * unparseable. */ function parseDateInput( input: string, referenceDate: Date, locale: Locale, ): Date | null { const trimmed = input.trim(); if (trimmed.length === 0) { return null; } // Strip an optional leading weekday ("Tue ", "sáb ") when a month name follows const withoutWeekday = trimmed.replace(/^[^\s\d]+\s+(?=[^\s\d])/, ""); const parsed = parse(withoutWeekday, "MMM d", referenceDate, { locale }); if (Number.isNaN(parsed.getTime())) { return null; } return parsed; } function formatVisibility( visibility?: "default" | "public" | "private", ): string { if (visibility === "public") { return "Public"; } if (visibility === "private") { return "Private"; } return "Default visibility"; } function FieldRow({ icon: Icon, label, value, }: { icon: React.ComponentType<{ className?: string }>; label: string; value?: string; }) { return (

{label} {value && {value}}

); } function TimezoneDisplay({ timezone }: { timezone: string }) { const spaceIdx = timezone.indexOf(" "); if (spaceIdx === -1) { return ( {timezone} ); } const code = timezone.substring(0, spaceIdx); const city = timezone.substring(spaceIdx + 1); return ( {code} {city} ); } function RecurrenceDisplay({ recurrence }: { recurrence: string }) { const onIdx = recurrence.indexOf(" on "); if (onIdx === -1) { return {recurrence}; } const main = recurrence.substring(0, onIdx); const suffix = recurrence.substring(onIdx); return ( {main} {suffix} ); } const EVENT_TYPES = [ "Event", "Focus time", "Out of office", "Birthday", ] as const; type EventType = (typeof EVENT_TYPES)[number]; const EVENT_TYPE_TOOLTIPS: Partial> = { "Focus time": "Create a focus time event with the option to automatically decline meetings during this time. Available for work and school accounts.", "Out of office": "Create an out of office (OOO) event with the option to automatically decline meetings during this time. Available for work and school accounts.", Birthday: "Create a birthday event to keep track of a person's upcoming birthdays. Birthdays from your Google Contacts may appear on a separate Birthday calendar.", }; function EventTypeHelpIcon({ tooltip }: { tooltip?: string }) { const [tooltipPos, setTooltipPos] = React.useState<{ top: number; left: number; } | null>(null); if (!tooltip) { return null; } function handleMouseEnter(e: React.MouseEvent) { const rect = e.currentTarget.getBoundingClientRect(); setTooltipPos({ top: rect.top + rect.height / 2, left: rect.left }); } function handleMouseLeave() { setTooltipPos(null); } return ( e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > {tooltipPos && ReactDOM.createPortal(

{tooltip}

, document.body, )} ); } export function EventDetailPanel< TEvent extends DetailedCalendarEvent = DetailedCalendarEvent, >({ event, onEventChange, onPrevWeek, onNextWeek, headerActions, autoFocusTitle, onTitleAutoFocused, }: EventDetailPanelProps) { const color = event.color ?? "blue"; const [eventType, setEventType] = React.useState("Event"); const [eventDropdownOpen, setEventDropdownOpen] = React.useState(false); const [hoveredOther, setHoveredOther] = React.useState(false); /** Whether the compact "All-day / Time zone / Repeat" row is expanded into individual rows. */ const [optionsExpanded, setOptionsExpanded] = React.useState(false); const [titleValue, setTitleValue] = React.useState(event.title); const titleRef = React.useRef(null); const escapePressedRef = React.useRef(false); /** Stores the title when the input gains focus, used to restore on Escape. */ const titleOnFocusRef = React.useRef(event.title); const { hourCycle, locale } = useCalendarConfig(); // Empty on the server and during hydration, the viewer's zone afterwards const timeZoneDisplayName = useTimeZoneDisplayName(); /** "3 PM" / "3:30 PM", or "15:00" / "15:30" on a 24-hour clock */ const formatTimeValue = React.useCallback( (date: Date) => formatTime(date, hourCycle, locale), [hourCycle, locale], ); /** "Tue Mar 11" in the calendar's locale */ const formatDateValue = React.useCallback( (date: Date) => formatDateDisplay(date, locale), [locale], ); React.useEffect(() => { setTitleValue(event.title); }, [event.title]); // Reset expanded options when switching to a different event React.useEffect(() => { setOptionsExpanded(false); }, [event.id]); // Focus + select the title on request so a new event can be named right away. // Deferred a frame so a popover host has been positioned before focusing. React.useEffect(() => { if (!autoFocusTitle) return; const frame = requestAnimationFrame(() => { titleRef.current?.focus({ preventScroll: true }); titleRef.current?.select(); onTitleAutoFocused?.(); }); return () => cancelAnimationFrame(frame); }, [autoFocusTitle, onTitleAutoFocused]); const handleTitleChange = React.useCallback( (e: React.ChangeEvent) => { const next = e.target.value; setTitleValue(next); onEventChange?.({ ...event, title: next }); }, [event, onEventChange], ); const handleTitleFocus = React.useCallback(() => { titleOnFocusRef.current = event.title; }, [event.title]); const commitTitle = React.useCallback(() => { if (escapePressedRef.current) { escapePressedRef.current = false; return; } const trimmed = titleValue.trim(); if (trimmed === titleValue) { return; } onEventChange?.({ ...event, title: trimmed }); }, [titleValue, event, onEventChange]); const handleTitleKeyDown = React.useCallback( (e: React.KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); titleRef.current?.blur(); return; } if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); escapePressedRef.current = true; const original = titleOnFocusRef.current; setTitleValue(original); onEventChange?.({ ...event, title: original }); titleRef.current?.blur(); } }, [event, onEventChange], ); // --- Start time input state & handlers --- const [startTimeValue, setStartTimeValue] = React.useState(() => formatTimeValue(event.start), ); const startTimeRef = React.useRef(null); const startTimeEscapePressedRef = React.useRef(false); const startTimeOnFocusRef = React.useRef(formatTimeValue(event.start)); React.useEffect(() => { setStartTimeValue(formatTimeValue(event.start)); }, [event.start, formatTimeValue]); const handleStartTimeChange = React.useCallback( (e: React.ChangeEvent) => { setStartTimeValue(e.target.value); }, [], ); const handleStartTimeFocus = React.useCallback(() => { startTimeOnFocusRef.current = formatTimeValue(event.start); requestAnimationFrame(() => { startTimeRef.current?.select(); }); }, [event.start, formatTimeValue]); const commitStartTime = React.useCallback(() => { if (startTimeEscapePressedRef.current) { startTimeEscapePressedRef.current = false; return; } const parsed = parseTimeInput(startTimeValue); if (!parsed) { setStartTimeValue(startTimeOnFocusRef.current); return; } const newStart = applyTimeToDate(event.start, parsed.hours, parsed.minutes); if (newStart.getTime() >= event.end.getTime()) { setStartTimeValue(startTimeOnFocusRef.current); return; } setStartTimeValue(formatTimeValue(newStart)); onEventChange?.({ ...event, start: newStart }); }, [startTimeValue, event, onEventChange, formatTimeValue]); const handleStartTimeKeyDown = React.useCallback( (e: React.KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); startTimeRef.current?.blur(); return; } if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); startTimeEscapePressedRef.current = true; setStartTimeValue(startTimeOnFocusRef.current); startTimeRef.current?.blur(); } }, [], ); // --- End time input state & handlers --- const [endTimeValue, setEndTimeValue] = React.useState(() => formatTimeValue(event.end), ); const endTimeRef = React.useRef(null); const endTimeEscapePressedRef = React.useRef(false); const endTimeOnFocusRef = React.useRef(formatTimeValue(event.end)); React.useEffect(() => { setEndTimeValue(formatTimeValue(event.end)); }, [event.end, formatTimeValue]); const handleEndTimeChange = React.useCallback( (e: React.ChangeEvent) => { setEndTimeValue(e.target.value); }, [], ); const handleEndTimeFocus = React.useCallback(() => { endTimeOnFocusRef.current = formatTimeValue(event.end); requestAnimationFrame(() => { endTimeRef.current?.select(); }); }, [event.end, formatTimeValue]); const commitEndTime = React.useCallback(() => { if (endTimeEscapePressedRef.current) { endTimeEscapePressedRef.current = false; return; } const parsed = parseTimeInput(endTimeValue); if (!parsed) { setEndTimeValue(endTimeOnFocusRef.current); return; } const newEnd = applyTimeToDate(event.end, parsed.hours, parsed.minutes); if (newEnd.getTime() <= event.start.getTime()) { setEndTimeValue(endTimeOnFocusRef.current); return; } setEndTimeValue(formatTimeValue(newEnd)); onEventChange?.({ ...event, end: newEnd }); }, [endTimeValue, event, onEventChange, formatTimeValue]); const handleEndTimeKeyDown = React.useCallback( (e: React.KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); endTimeRef.current?.blur(); return; } if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); endTimeEscapePressedRef.current = true; setEndTimeValue(endTimeOnFocusRef.current); endTimeRef.current?.blur(); } }, [], ); // --- Date input state & handlers --- const [dateValue, setDateValue] = React.useState(() => formatDateValue(event.start), ); const dateRef = React.useRef(null); const dateEscapePressedRef = React.useRef(false); const dateOnFocusRef = React.useRef(formatDateValue(event.start)); React.useEffect(() => { setDateValue(formatDateValue(event.start)); }, [event.start, formatDateValue]); const handleDateChange = React.useCallback( (e: React.ChangeEvent) => { setDateValue(e.target.value); }, [], ); const handleDateFocus = React.useCallback(() => { dateOnFocusRef.current = formatDateValue(event.start); requestAnimationFrame(() => { dateRef.current?.select(); }); }, [event.start, formatDateValue]); const commitDate = React.useCallback(() => { if (dateEscapePressedRef.current) { dateEscapePressedRef.current = false; return; } const parsed = parseDateInput(dateValue, event.start, locale); if (!parsed) { setDateValue(dateOnFocusRef.current); return; } const dayDiff = differenceInCalendarDays(parsed, event.start); if (dayDiff === 0) { setDateValue(formatDateValue(event.start)); return; } const newStart = addDays(event.start, dayDiff); const newEnd = addDays(event.end, dayDiff); setDateValue(formatDateValue(newStart)); onEventChange?.({ ...event, start: newStart, end: newEnd }); }, [dateValue, event, onEventChange, formatDateValue, locale]); const handleDateKeyDown = React.useCallback( (e: React.KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); dateRef.current?.blur(); return; } if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); dateEscapePressedRef.current = true; setDateValue(dateOnFocusRef.current); dateRef.current?.blur(); } }, [], ); // --- End date input state & handlers (shown only for all-day events) --- const [endDateValue, setEndDateValue] = React.useState(() => formatDateValue(event.end), ); const endDateRef = React.useRef(null); const endDateEscapePressedRef = React.useRef(false); const endDateOnFocusRef = React.useRef(formatDateValue(event.end)); React.useEffect(() => { setEndDateValue(formatDateValue(event.end)); }, [event.end, formatDateValue]); const handleEndDateChange = React.useCallback( (e: React.ChangeEvent) => { setEndDateValue(e.target.value); }, [], ); const handleEndDateFocus = React.useCallback(() => { endDateOnFocusRef.current = formatDateValue(event.end); requestAnimationFrame(() => { endDateRef.current?.select(); }); }, [event.end, formatDateValue]); const commitEndDate = React.useCallback(() => { if (endDateEscapePressedRef.current) { endDateEscapePressedRef.current = false; return; } const parsed = parseDateInput(endDateValue, event.end, locale); if (!parsed) { setEndDateValue(endDateOnFocusRef.current); return; } const dayDiff = differenceInCalendarDays(parsed, event.end); if (dayDiff === 0) { setEndDateValue(formatDateValue(event.end)); return; } const newEnd = addDays(event.end, dayDiff); if (newEnd.getTime() < event.start.getTime()) { setEndDateValue(endDateOnFocusRef.current); return; } setEndDateValue(formatDateValue(newEnd)); onEventChange?.({ ...event, end: newEnd }); }, [endDateValue, event, onEventChange, formatDateValue, locale]); const handleEndDateKeyDown = React.useCallback( (e: React.KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); endDateRef.current?.blur(); return; } if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); endDateEscapePressedRef.current = true; setEndDateValue(endDateOnFocusRef.current); endDateRef.current?.blur(); } }, [], ); // --- All-day toggle handler --- /** * Stores the original hours/minutes before toggling to all-day. * When toggling off, these are applied to the current (possibly resized) dates. */ const savedTimeOfDayRef = React.useRef<{ startHours: number; startMinutes: number; endHours: number; endMinutes: number; } | null>(null); const handleAllDayToggle = React.useCallback( (checked: boolean) => { if (checked) { savedTimeOfDayRef.current = { startHours: event.start.getHours(), startMinutes: event.start.getMinutes(), endHours: event.end.getHours(), endMinutes: event.end.getMinutes(), }; onEventChange?.({ ...event, isAllDay: true }); return; } if (savedTimeOfDayRef.current) { const { startHours, startMinutes, endHours, endMinutes } = savedTimeOfDayRef.current; onEventChange?.({ ...event, isAllDay: false, start: applyTimeToDate(event.start, startHours, startMinutes), end: applyTimeToDate(event.end, endHours, endMinutes), }); savedTimeOfDayRef.current = null; return; } /** Default 9 AM – 10 AM when no saved times (e.g., existing all-day event). */ const DEFAULT_START_HOUR = 9; const DEFAULT_END_HOUR = 10; onEventChange?.({ ...event, isAllDay: false, start: applyTimeToDate(event.start, DEFAULT_START_HOUR, 0), end: applyTimeToDate(event.end, DEFAULT_END_HOUR, 0), }); }, [event, onEventChange], ); const otherTypes = EVENT_TYPES.filter((t) => t !== eventType); return (

{/* Header */}

{ setEventDropdownOpen(open); if (open) setHoveredOther(false); }} > setHoveredOther(false)} > setEventType(eventType)} onMouseEnter={() => setHoveredOther(false)} > {eventType} {otherTypes.map((type) => ( setEventType(type)} onMouseEnter={() => setHoveredOther(true)} > {type} ))}

Cut ⌘X Copy ⌘C Duplicate ⌘D Delete delete {headerActions}

{/* Title */} {/* Divider */}

{/* Time — muted and non-interactive for all-day events */} {(event.start.getHours() !== 0 || event.start.getMinutes() !== 0 || event.end.getHours() !== 0 || event.end.getMinutes() !== 0) && (

{/* Start time group — Clock icon + input in one bordered container */}

startTimeRef.current?.focus() } >

{/* End time group — arrow + input + duration in one bordered container */}

endTimeRef.current?.focus() } > → {formatDuration(event.start, event.end)}

)} {/* Date — editable inline input(s), indented to align with time text */}

{/* Start date */}

dateRef.current?.focus()} >

{/* End date — only visible for all-day events */} {event.isAllDay && (

endDateRef.current?.focus()} >

)}

{optionsExpanded || event.isAllDay ? ( <> {/* All-day toggle row — clicking label or row triggers toggle */}

handleAllDayToggle(!(event.isAllDay ?? false))} > e.stopPropagation()} className="data-[state=unchecked]:!bg-[#C7C5C1] dark:data-[state=unchecked]:!bg-[#595959] data-[state=checked]:!bg-[#3A85D3]" /> All-day

{/* Timezone row — hidden when all-day */} {!event.isAllDay && (

)} {/* Recurrence row — active display for recurring, placeholder for non-recurring */} {event.recurrence ? (

) : (

Repeat

)} ) : (

setOptionsExpanded(true)} > All-day Time zone Repeat

)} {/* Divider */}

{/* Field sections */}

{/* Divider */}

{/* Description */}

Description {event.description && ( {event.description} )}

{/* Divider */}

{/* Calendar */}

{event.calendarEmail ?? event.calendarId ?? "Calendar"}

{/* Status */}

{event.status ?? "Busy"} {formatVisibility(event.visibility)}

{/* Reminders */}

Reminders

{event.reminders && event.reminders.length > 0 && event.reminders.map((reminder) => ( {reminder.amount} {reminder.unit.replace(/s$/, "")} {" "} before ))}

); } 54:T145a,"use client"; import * as React from "react"; import { PanelRightIcon, X } from "lucide-react"; import { focusEventElement } from "@/hooks/use-event-keyboard"; import { Button } from "@/components/ui/button"; import { PopoverContent } from "@/components/ui/popover"; import { EventDetailPanel } from "./event-detail-panel"; import { useCalendarPopoverBoundary } from "./calendar-popover-context"; import { useCalendarRenderSlots } from "./calendar-provider"; import { useEventTitleFocus } from "./event-title-focus-context"; import type { CalendarEvent } from "./week-view-types"; interface EventDetailPopoverProps { event: CalendarEvent; onEventChange?: (event: CalendarEvent) => void; onClose: () => void; /** Callback for the expand button (e.g. dock to a side panel). Hidden when absent. */ onExpand?: () => void; onPrevWeek?: () => void; onNextWeek?: () => void; /** Which side to prefer for the popover. Defaults to "right". */ side?: "right" | "bottom" | "left" | "top"; /** Alignment along the side axis. Defaults to "center". */ align?: "start" | "center" | "end"; /** * Override the top collision padding. When omitted the header height is * used so the popover never overlaps the weekday header. All-day events * live *inside* the header, so they pass a small value to avoid being * pushed off-screen. */ collisionPaddingTop?: number; } export function EventDetailPopover({ event, onEventChange, onClose, onExpand, onPrevWeek, onNextWeek, side = "right", align = "center", collisionPaddingTop, }: EventDetailPopoverProps) { const { boundary, headerHeight, view } = useCalendarPopoverBoundary(); const { pendingEventId, clearPending } = useEventTitleFocus(); const { renderEventDetails } = useCalendarRenderSlots(); /** Just created by click-to-create: its title should be focused */ const isNew = pendingEventId === event.id; /** * Escape closes the popover before the keydown reaches the event, and the * event's element is re-created without it. If focus was on the event or * in the details, put it back on the event once that has happened. */ const handleEscapeKeyDown = React.useCallback(() => { const active = document.activeElement; if (!(active instanceof HTMLElement)) return; const hadFocus = active.dataset.eventId === event.id || active.closest("[data-radix-popper-content-wrapper]") !== null; if (!hadFocus) return; requestAnimationFrame(() => { if (document.activeElement && document.activeElement !== document.body) { return; } focusEventElement(boundary, event.id); }); }, [boundary, event.id]); // Custom details get `isNew` for one render; the default panel clears the // request itself once it has focused the title React.useEffect(() => { if (!renderEventDetails || !isNew) return; clearPending(); }, [renderEventDetails, isNew, clearPending]); /** * In day view the event trigger spans the full grid width, leaving no room * for a 320px popover on either side within the calendar container. * Skip the collision boundary so Radix uses the viewport instead. */ const isDayView = view === "day"; const effectiveBoundary = isDayView ? undefined : boundary ? [boundary] : undefined; const popoverHeaderActions = ( <> {onExpand && ( )} ); return ( e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()} onEscapeKeyDown={handleEscapeKeyDown} onInteractOutside={(e) => { const target = e.target as HTMLElement; if (target.closest("[data-radix-popper-content-wrapper]")) { e.preventDefault(); } }} > {renderEventDetails ? ( renderEventDetails({ event, close: onClose, isNew }) ) : ( )} ); } 55:T21f4,"use client"; import * as React from "react"; import { createPortal } from "react-dom"; import { Check, Copy, Monitor, SquareDashed, TabletSmartphone, Trash2, } from "lucide-react"; import { cn } from "@/lib/utils"; import { EVENT_COLORS } from "@/lib/event-utils"; import { useCalendarConfig } from "./calendar-provider"; import type { CalendarInfo, DetailedCalendarEvent, EventColor, } from "./week-view-types"; const colorSwatchClass: Record = { red: "bg-event-red-border", orange: "bg-event-orange-border", yellow: "bg-event-yellow-border", green: "bg-event-green-border", blue: "bg-event-blue-border", purple: "bg-event-purple-border", gray: "bg-event-gray-border", }; /** Calendars that share an account, listed under its email */ interface CalendarGroup { /** Account email shown above the group; absent for calendars without one */ email?: string; calendars: CalendarInfo[]; } /** Groups calendars by account email, keeping the order they were given in */ function groupCalendarsByEmail(calendars: CalendarInfo[]): CalendarGroup[] { const groups: CalendarGroup[] = []; for (const calendar of calendars) { const group = groups.find((g) => g.email === calendar.email); if (group) { group.calendars.push(calendar); continue; } groups.push({ email: calendar.email, calendars: [calendar] }); } return groups; } interface EventContextMenuProps { /** The right-clicked event; "Block on calendar" sets its `calendarId` */ event: DetailedCalendarEvent; position: { x: number; y: number }; onClose: () => void; onEventChange?: (event: DetailedCalendarEvent) => void; } function MenuItem({ className, children, onSelect, }: { className?: string; children: React.ReactNode; onSelect?: () => void; }) { return ( ); } function Shortcut({ children }: { children: React.ReactNode }) { return {children}; } function Separator() { return

; } function SubMenu({ trigger, children, }: { trigger: React.ReactNode; children: React.ReactNode; }) { const [open, setOpen] = React.useState(false); const timeoutRef = React.useRef>(null); function handleMouseEnter() { if (timeoutRef.current) clearTimeout(timeoutRef.current); setOpen(true); } function handleMouseLeave() { timeoutRef.current = setTimeout(() => setOpen(false), 150); } return (

{open && (

{children}

)}

); } export function EventContextMenu({ event, position, onClose, onEventChange, }: EventContextMenuProps) { const menuRef = React.useRef(null); const [adjustedPos, setAdjustedPos] = React.useState(position); const [ready, setReady] = React.useState(false); const { calendars } = useCalendarConfig(); const currentColor = event.color ?? "blue"; const calendarGroups = React.useMemo( () => groupCalendarsByEmail(calendars), [calendars], ); React.useLayoutEffect(() => { const menu = menuRef.current; if (!menu) return; const menuHeight = menu.offsetHeight; const menuWidth = menu.offsetWidth; let y = position.y; let x = position.x; if (position.y + menuHeight > window.innerHeight) { y = position.y - menuHeight; } if (position.x + menuWidth > window.innerWidth) { x = position.x - menuWidth; } setAdjustedPos({ x, y }); setReady(true); }, [position]); React.useEffect(() => { function handleClickOutside(e: MouseEvent) { if (!menuRef.current) return; if (menuRef.current.contains(e.target as Node)) return; onClose(); } function handleEscape(e: KeyboardEvent) { if (e.key !== "Escape") return; onClose(); } // Use capture to close before other handlers fire document.addEventListener("mousedown", handleClickOutside, true); document.addEventListener("keydown", handleEscape); return () => { document.removeEventListener("mousedown", handleClickOutside, true); document.removeEventListener("keydown", handleEscape); }; }, [onClose]); function handleColorSelect(color: EventColor) { onEventChange?.({ ...event, color }); onClose(); } function handleCalendarSelect(calendarId: string) { onEventChange?.({ ...event, calendarId }); onClose(); } return createPortal(

{/* Color selector row */}

{EVENT_COLORS.map((color) => ( ))}

{/* Block on calendar (only when the provider lists calendars) */} {calendarGroups.length > 0 && ( <> Block on calendar } > {calendarGroups.map((group) => ( {group.email && (

{group.email}

)} {group.calendars.map((cal) => ( handleCalendarSelect(cal.id)} >

{cal.name} ))} ))} )} {/* Cut / Copy / Duplicate */} Cut ⌘X Copy ⌘C Duplicate ⌘D {/* Delete */} Delete delete

, document.body, ); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@calendarcn","registryDependencies":["@calendarcn/calendar-core","button","dropdown-menu","popover","switch"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/calendar-event-item.tsx","content":"$52","type":"registry:component"},{"path":"src/components/event-detail-panel.tsx","content":"$53","type":"registry:component"},{"path":"src/components/event-detail-popover.tsx","content":"$54","type":"registry:component"},{"path":"src/components/event-context-menu.tsx","content":"$55","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]