love-ui 1.2.12 → 1.2.14

package/public/r/comp-542.json

@@ -0,0 +1,124 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-542",
+  "type": "registry:component",
+  "dependencies": [
+    "date-fns",
+    "@dnd-kit/core",
+    "@dnd-kit/modifiers",
+    "@dnd-kit/utilities",
+    "@remixicon/react"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/calendar.json",
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json",
+    "https://loveui.dev/building-blocks/r/dialog.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/textarea.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/popover.json",
+    "https://loveui.dev/building-blocks/r/radio-group.json",
+    "https://loveui.dev/building-blocks/r/select.json",
+    "https://loveui.dev/building-blocks/r/sonner.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-542.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { addDays, setHours, setMinutes, subDays } from \"date-fns\"\n\nimport {\n  EventCalendar,\n  type CalendarEvent,\n} from \"@/registry/building-blocks/default/components/event-calendar\"\n\n// Sample events data with hardcoded times\nconst sampleEvents: CalendarEvent[] = [\n  {\n    id: \"1\",\n    title: \"Annual Planning\",\n    description: \"Strategic planning for next year\",\n    start: subDays(new Date(), 24), // 24 days before today\n    end: subDays(new Date(), 23), // 23 days before today\n    allDay: true,\n    color: \"sky\",\n    location: \"Main Conference Hall\",\n  },\n  {\n    id: \"2\",\n    title: \"Project Deadline\",\n    description: \"Submit final deliverables\",\n    start: setMinutes(setHours(subDays(new Date(), 9), 13), 0), // 1:00 PM, 9 days before\n    end: setMinutes(setHours(subDays(new Date(), 9), 15), 30), // 3:30 PM, 9 days before\n    color: \"amber\",\n    location: \"Office\",\n  },\n  {\n    id: \"3\",\n    title: \"Quarterly Budget Review\",\n    description: \"Strategic planning for next year\",\n    start: subDays(new Date(), 13), // 13 days before today\n    end: subDays(new Date(), 13), // 13 days before today\n    allDay: true,\n    color: \"orange\",\n    location: \"Main Conference Hall\",\n  },\n  {\n    id: \"4\",\n    title: \"Team Meeting\",\n    description: \"Weekly team sync\",\n    start: setMinutes(setHours(new Date(), 10), 0), // 10:00 AM today\n    end: setMinutes(setHours(new Date(), 11), 0), // 11:00 AM today\n    color: \"sky\",\n    location: \"Conference Room A\",\n  },\n  {\n    id: \"5\",\n    title: \"Lunch with Client\",\n    description: \"Discuss new project requirements\",\n    start: setMinutes(setHours(addDays(new Date(), 1), 12), 0), // 12:00 PM, 1 day from now\n    end: setMinutes(setHours(addDays(new Date(), 1), 13), 15), // 1:15 PM, 1 day from now\n    color: \"emerald\",\n    location: \"Downtown Cafe\",\n  },\n  {\n    id: \"6\",\n    title: \"Product Launch\",\n    description: \"New product release\",\n    start: addDays(new Date(), 3), // 3 days from now\n    end: addDays(new Date(), 6), // 6 days from now\n    allDay: true,\n    color: \"violet\",\n  },\n  {\n    id: \"7\",\n    title: \"Sales Conference\",\n    description: \"Discuss about new clients\",\n    start: setMinutes(setHours(addDays(new Date(), 4), 14), 30), // 2:30 PM, 4 days from now\n    end: setMinutes(setHours(addDays(new Date(), 5), 14), 45), // 2:45 PM, 5 days from now\n    color: \"rose\",\n    location: \"Downtown Cafe\",\n  },\n  {\n    id: \"8\",\n    title: \"Team Meeting\",\n    description: \"Weekly team sync\",\n    start: setMinutes(setHours(addDays(new Date(), 5), 9), 0), // 9:00 AM, 5 days from now\n    end: setMinutes(setHours(addDays(new Date(), 5), 10), 30), // 10:30 AM, 5 days from now\n    color: \"orange\",\n    location: \"Conference Room A\",\n  },\n  {\n    id: \"9\",\n    title: \"Review contracts\",\n    description: \"Weekly team sync\",\n    start: setMinutes(setHours(addDays(new Date(), 5), 14), 0), // 2:00 PM, 5 days from now\n    end: setMinutes(setHours(addDays(new Date(), 5), 15), 30), // 3:30 PM, 5 days from now\n    color: \"sky\",\n    location: \"Conference Room A\",\n  },\n  {\n    id: \"10\",\n    title: \"Team Meeting\",\n    description: \"Weekly team sync\",\n    start: setMinutes(setHours(addDays(new Date(), 5), 9), 45), // 9:45 AM, 5 days from now\n    end: setMinutes(setHours(addDays(new Date(), 5), 11), 0), // 11:00 AM, 5 days from now\n    color: \"amber\",\n    location: \"Conference Room A\",\n  },\n  {\n    id: \"11\",\n    title: \"Marketing Strategy Session\",\n    description: \"Quarterly marketing planning\",\n    start: setMinutes(setHours(addDays(new Date(), 9), 10), 0), // 10:00 AM, 9 days from now\n    end: setMinutes(setHours(addDays(new Date(), 9), 15), 30), // 3:30 PM, 9 days from now\n    color: \"emerald\",\n    location: \"Marketing Department\",\n  },\n  {\n    id: \"12\",\n    title: \"Annual Shareholders Meeting\",\n    description: \"Presentation of yearly results\",\n    start: addDays(new Date(), 17), // 17 days from now\n    end: addDays(new Date(), 17), // 17 days from now\n    allDay: true,\n    color: \"sky\",\n    location: \"Grand Conference Center\",\n  },\n  {\n    id: \"13\",\n    title: \"Product Development Workshop\",\n    description: \"Brainstorming for new features\",\n    start: setMinutes(setHours(addDays(new Date(), 26), 9), 0), // 9:00 AM, 26 days from now\n    end: setMinutes(setHours(addDays(new Date(), 27), 17), 0), // 5:00 PM, 27 days from now\n    color: \"rose\",\n    location: \"Innovation Lab\",\n  },\n]\n\nexport default function Component() {\n  const [events, setEvents] = useState<CalendarEvent[]>(sampleEvents)\n\n  const handleEventAdd = (event: CalendarEvent) => {\n    setEvents([...events, event])\n  }\n\n  const handleEventUpdate = (updatedEvent: CalendarEvent) => {\n    setEvents(\n      events.map((event) =>\n        event.id === updatedEvent.id ? updatedEvent : event\n      )\n    )\n  }\n\n  const handleEventDelete = (eventId: string) => {\n    setEvents(events.filter((event) => event.id !== eventId))\n  }\n\n  return (\n    <EventCalendar\n      events={events}\n      onEventAdd={handleEventAdd}\n      onEventUpdate={handleEventUpdate}\n      onEventDelete={handleEventDelete}\n    />\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/agenda-view.tsx",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { RiCalendarEventLine } from \"@remixicon/react\"\nimport { addDays, format, isToday } from \"date-fns\"\n\nimport {\n  AgendaDaysToShow,\n  CalendarEvent,\n  EventItem,\n  getAgendaEventsForDay,\n} from \"@/registry/building-blocks/default/components/event-calendar\"\n\ninterface AgendaViewProps {\n  currentDate: Date\n  events: CalendarEvent[]\n  onEventSelect: (event: CalendarEvent) => void\n}\n\nexport function AgendaView({\n  currentDate,\n  events,\n  onEventSelect,\n}: AgendaViewProps) {\n  // Show events for the next days based on constant\n  const days = useMemo(() => {\n    console.log(\"Agenda view updating with date:\", currentDate.toISOString())\n    return Array.from({ length: AgendaDaysToShow }, (_, i) =>\n      addDays(new Date(currentDate), i)\n    )\n  }, [currentDate])\n\n  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {\n    e.stopPropagation()\n    console.log(\"Agenda view event clicked:\", event)\n    onEventSelect(event)\n  }\n\n  // Check if there are any days with events\n  const hasEvents = days.some(\n    (day) => getAgendaEventsForDay(events, day).length > 0\n  )\n\n  return (\n    <div className=\"border-t border-border/70 px-4\">\n      {!hasEvents ? (\n        <div className=\"flex min-h-[70svh] flex-col items-center justify-center py-16 text-center\">\n          <RiCalendarEventLine\n            size={32}\n            className=\"mb-2 text-muted-foreground/50\"\n          />\n          <h3 className=\"text-lg font-medium\">No events found</h3>\n          <p className=\"text-muted-foreground\">\n            There are no events scheduled for this time period.\n          </p>\n        </div>\n      ) : (\n        days.map((day) => {\n          const dayEvents = getAgendaEventsForDay(events, day)\n\n          if (dayEvents.length === 0) return null\n\n          return (\n            <div\n              key={day.toString()}\n              className=\"relative my-12 border-t border-border/70\"\n            >\n              <span\n                className=\"absolute -top-3 left-0 flex h-6 items-center bg-background pe-4 text-[10px] uppercase data-today:font-medium sm:pe-4 sm:text-xs\"\n                data-today={isToday(day) || undefined}\n              >\n                {format(day, \"d MMM, EEEE\")}\n              </span>\n              <div className=\"mt-6 space-y-2\">\n                {dayEvents.map((event) => (\n                  <EventItem\n                    key={event.id}\n                    event={event}\n                    view=\"agenda\"\n                    onClick={(e) => handleEventClick(event, e)}\n                  />\n                ))}\n              </div>\n            </div>\n          )\n        })\n      )}\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/calendar-dnd-context.tsx",
+      "content": "\"use client\"\n\nimport {\n  createContext,\n  useContext,\n  useId,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\"\nimport {\n  DndContext,\n  DragOverlay,\n  MouseSensor,\n  PointerSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragOverEvent,\n  type DragStartEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { addMinutes, differenceInMinutes } from \"date-fns\"\n\nimport {\n  EventItem,\n  type CalendarEvent,\n} from \"@/registry/building-blocks/default/components/event-calendar\"\n\n// Define the context type\ntype CalendarDndContextType = {\n  activeEvent: CalendarEvent | null\n  activeId: UniqueIdentifier | null\n  activeView: \"month\" | \"week\" | \"day\" | null\n  currentTime: Date | null\n  eventHeight: number | null\n  isMultiDay: boolean\n  multiDayWidth: number | null\n  dragHandlePosition: {\n    x?: number\n    y?: number\n    data?: {\n      isFirstDay?: boolean\n      isLastDay?: boolean\n    }\n  } | null\n}\n\n// Create the context\nconst CalendarDndContext = createContext<CalendarDndContextType>({\n  activeEvent: null,\n  activeId: null,\n  activeView: null,\n  currentTime: null,\n  eventHeight: null,\n  isMultiDay: false,\n  multiDayWidth: null,\n  dragHandlePosition: null,\n})\n\n// Hook to use the context\nexport const useCalendarDnd = () => useContext(CalendarDndContext)\n\n// Props for the provider\ninterface CalendarDndProviderProps {\n  children: ReactNode\n  onEventUpdate: (event: CalendarEvent) => void\n}\n\nexport function CalendarDndProvider({\n  children,\n  onEventUpdate,\n}: CalendarDndProviderProps) {\n  const [activeEvent, setActiveEvent] = useState<CalendarEvent | null>(null)\n  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null)\n  const [activeView, setActiveView] = useState<\"month\" | \"week\" | \"day\" | null>(\n    null\n  )\n  const [currentTime, setCurrentTime] = useState<Date | null>(null)\n  const [eventHeight, setEventHeight] = useState<number | null>(null)\n  const [isMultiDay, setIsMultiDay] = useState(false)\n  const [multiDayWidth, setMultiDayWidth] = useState<number | null>(null)\n  const [dragHandlePosition, setDragHandlePosition] = useState<{\n    x?: number\n    y?: number\n    data?: {\n      isFirstDay?: boolean\n      isLastDay?: boolean\n    }\n  } | null>(null)\n\n  // Store original event dimensions\n  const eventDimensions = useRef<{ height: number }>({ height: 0 })\n\n  // Configure sensors for better drag detection\n  const sensors = useSensors(\n    useSensor(MouseSensor, {\n      // Require the mouse to move by 5px before activating\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(TouchSensor, {\n      // Press delay of 250ms, with tolerance of 5px of movement\n      activationConstraint: {\n        delay: 250,\n        tolerance: 5,\n      },\n    }),\n    useSensor(PointerSensor, {\n      // Require the pointer to move by 5px before activating\n      activationConstraint: {\n        distance: 5,\n      },\n    })\n  )\n\n  // Generate a stable ID for the DndContext\n  const dndContextId = useId()\n\n  const handleDragStart = (event: DragStartEvent) => {\n    const { active } = event\n\n    // Add safety check for data.current\n    if (!active.data.current) {\n      console.error(\"Missing data in drag start event\", event)\n      return\n    }\n\n    const {\n      event: calendarEvent,\n      view,\n      height,\n      isMultiDay: eventIsMultiDay,\n      multiDayWidth: eventMultiDayWidth,\n      dragHandlePosition: eventDragHandlePosition,\n    } = active.data.current as {\n      event: CalendarEvent\n      view: \"month\" | \"week\" | \"day\"\n      height?: number\n      isMultiDay?: boolean\n      multiDayWidth?: number\n      dragHandlePosition?: {\n        x?: number\n        y?: number\n        data?: {\n          isFirstDay?: boolean\n          isLastDay?: boolean\n        }\n      }\n    }\n\n    setActiveEvent(calendarEvent)\n    setActiveId(active.id)\n    setActiveView(view)\n    setCurrentTime(new Date(calendarEvent.start))\n    setIsMultiDay(eventIsMultiDay || false)\n    setMultiDayWidth(eventMultiDayWidth || null)\n    setDragHandlePosition(eventDragHandlePosition || null)\n\n    // Store event height if provided\n    if (height) {\n      eventDimensions.current.height = height\n      setEventHeight(height)\n    }\n  }\n\n  const handleDragOver = (event: DragOverEvent) => {\n    const { over } = event\n\n    if (over && activeEvent && over.data.current) {\n      const { date, time } = over.data.current as { date: Date; time?: number }\n\n      // Update time for week/day views\n      if (time !== undefined && activeView !== \"month\") {\n        const newTime = new Date(date)\n\n        // Calculate hours and minutes with 15-minute precision\n        const hours = Math.floor(time)\n        const fractionalHour = time - hours\n\n        // Map to nearest 15 minute interval (0, 0.25, 0.5, 0.75)\n        let minutes = 0\n        if (fractionalHour < 0.125) minutes = 0\n        else if (fractionalHour < 0.375) minutes = 15\n        else if (fractionalHour < 0.625) minutes = 30\n        else minutes = 45\n\n        newTime.setHours(hours, minutes, 0, 0)\n\n        // Only update if time has changed\n        if (\n          !currentTime ||\n          newTime.getHours() !== currentTime.getHours() ||\n          newTime.getMinutes() !== currentTime.getMinutes() ||\n          newTime.getDate() !== currentTime.getDate() ||\n          newTime.getMonth() !== currentTime.getMonth() ||\n          newTime.getFullYear() !== currentTime.getFullYear()\n        ) {\n          setCurrentTime(newTime)\n        }\n      } else if (activeView === \"month\") {\n        // For month view, just update the date but preserve time\n        const newTime = new Date(date)\n        if (currentTime) {\n          newTime.setHours(\n            currentTime.getHours(),\n            currentTime.getMinutes(),\n            currentTime.getSeconds(),\n            currentTime.getMilliseconds()\n          )\n        }\n\n        // Only update if date has changed\n        if (\n          !currentTime ||\n          newTime.getDate() !== currentTime.getDate() ||\n          newTime.getMonth() !== currentTime.getMonth() ||\n          newTime.getFullYear() !== currentTime.getFullYear()\n        ) {\n          setCurrentTime(newTime)\n        }\n      }\n    }\n  }\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n\n    // Add robust error checking\n    if (!over || !activeEvent || !currentTime) {\n      // Reset state and exit early\n      setActiveEvent(null)\n      setActiveId(null)\n      setActiveView(null)\n      setCurrentTime(null)\n      setEventHeight(null)\n      setIsMultiDay(false)\n      setMultiDayWidth(null)\n      setDragHandlePosition(null)\n      return\n    }\n\n    try {\n      // Safely access data with checks\n      if (!active.data.current || !over.data.current) {\n        throw new Error(\"Missing data in drag event\")\n      }\n\n      const activeData = active.data.current as {\n        event?: CalendarEvent\n        view?: string\n      }\n      const overData = over.data.current as { date?: Date; time?: number }\n\n      // Verify we have all required data\n      if (!activeData.event || !overData.date) {\n        throw new Error(\"Missing required event data\")\n      }\n\n      const calendarEvent = activeData.event\n      const date = overData.date\n      const time = overData.time\n\n      // Calculate new start time\n      const newStart = new Date(date)\n\n      // If time is provided (for week/day views), set the hours and minutes\n      if (time !== undefined) {\n        const hours = Math.floor(time)\n        const fractionalHour = time - hours\n\n        // Map to nearest 15 minute interval (0, 0.25, 0.5, 0.75)\n        let minutes = 0\n        if (fractionalHour < 0.125) minutes = 0\n        else if (fractionalHour < 0.375) minutes = 15\n        else if (fractionalHour < 0.625) minutes = 30\n        else minutes = 45\n\n        newStart.setHours(hours, minutes, 0, 0)\n      } else {\n        // For month view, preserve the original time from currentTime\n        newStart.setHours(\n          currentTime.getHours(),\n          currentTime.getMinutes(),\n          currentTime.getSeconds(),\n          currentTime.getMilliseconds()\n        )\n      }\n\n      // Calculate new end time based on the original duration\n      const originalStart = new Date(calendarEvent.start)\n      const originalEnd = new Date(calendarEvent.end)\n      const durationMinutes = differenceInMinutes(originalEnd, originalStart)\n      const newEnd = addMinutes(newStart, durationMinutes)\n\n      // Only update if the start time has actually changed\n      const hasStartTimeChanged =\n        originalStart.getFullYear() !== newStart.getFullYear() ||\n        originalStart.getMonth() !== newStart.getMonth() ||\n        originalStart.getDate() !== newStart.getDate() ||\n        originalStart.getHours() !== newStart.getHours() ||\n        originalStart.getMinutes() !== newStart.getMinutes()\n\n      if (hasStartTimeChanged) {\n        // Update the event only if the time has changed\n        onEventUpdate({\n          ...calendarEvent,\n          start: newStart,\n          end: newEnd,\n        })\n      }\n    } catch (error) {\n      console.error(\"Error in drag end handler:\", error)\n    } finally {\n      // Always reset state\n      setActiveEvent(null)\n      setActiveId(null)\n      setActiveView(null)\n      setCurrentTime(null)\n      setEventHeight(null)\n      setIsMultiDay(false)\n      setMultiDayWidth(null)\n      setDragHandlePosition(null)\n    }\n  }\n\n  return (\n    <DndContext\n      id={dndContextId}\n      sensors={sensors}\n      onDragStart={handleDragStart}\n      onDragOver={handleDragOver}\n      onDragEnd={handleDragEnd}\n    >\n      <CalendarDndContext.Provider\n        value={{\n          activeEvent,\n          activeId,\n          activeView,\n          currentTime,\n          eventHeight,\n          isMultiDay,\n          multiDayWidth,\n          dragHandlePosition,\n        }}\n      >\n        {children}\n\n        <DragOverlay adjustScale={false} dropAnimation={null}>\n          {activeEvent && activeView && (\n            <div\n              style={{\n                height: eventHeight ? `${eventHeight}px` : \"auto\",\n                width:\n                  isMultiDay && multiDayWidth ? `${multiDayWidth}%` : \"100%\",\n                // Remove the transform that was causing the shift\n              }}\n            >\n              <EventItem\n                event={activeEvent}\n                view={activeView}\n                isDragging={true}\n                showTime={activeView !== \"month\"}\n                currentTime={currentTime || undefined}\n                isFirstDay={dragHandlePosition?.data?.isFirstDay !== false}\n                isLastDay={dragHandlePosition?.data?.isLastDay !== false}\n              />\n            </div>\n          )}\n        </DragOverlay>\n      </CalendarDndContext.Provider>\n    </DndContext>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/constants.ts",
+      "content": "// Height of calendar events in pixels - used in month, week and day views\nexport const EventHeight = 24\n\n// Vertical gap between events in pixels - controls spacing in month view\nexport const EventGap = 4\n\n// Height of hour cells in week and day views - controls the scale of time display\nexport const WeekCellsHeight = 64\n\n// Number of days to show in the agenda view\nexport const AgendaDaysToShow = 30\n\n// Start and end hours for the week and day views\nexport const StartHour = 0\nexport const EndHour = 24\n\n// Default start and end times\nexport const DefaultStartHour = 9 // 9 AM\nexport const DefaultEndHour = 10 // 10 AM\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/day-view.tsx",
+      "content": "\"use client\"\n\nimport React, { useMemo } from \"react\"\nimport {\n  addHours,\n  areIntervalsOverlapping,\n  differenceInMinutes,\n  eachHourOfInterval,\n  format,\n  getHours,\n  getMinutes,\n  isSameDay,\n  startOfDay,\n} from \"date-fns\"\n\nimport {\n  DraggableEvent,\n  DroppableCell,\n  EventItem,\n  isMultiDayEvent,\n  useCurrentTimeIndicator,\n  WeekCellsHeight,\n  type CalendarEvent,\n} from \"@/registry/building-blocks/default/components/event-calendar\"\nimport {\n  EndHour,\n  StartHour,\n} from \"@/registry/building-blocks/default/components/event-calendar/constants\"\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\n\ninterface DayViewProps {\n  currentDate: Date\n  events: CalendarEvent[]\n  onEventSelect: (event: CalendarEvent) => void\n  onEventCreate: (startTime: Date) => void\n}\n\ninterface PositionedEvent {\n  event: CalendarEvent\n  top: number\n  height: number\n  left: number\n  width: number\n  zIndex: number\n}\n\nexport function DayView({\n  currentDate,\n  events,\n  onEventSelect,\n  onEventCreate,\n}: DayViewProps) {\n  const hours = useMemo(() => {\n    const dayStart = startOfDay(currentDate)\n    return eachHourOfInterval({\n      start: addHours(dayStart, StartHour),\n      end: addHours(dayStart, EndHour - 1),\n    })\n  }, [currentDate])\n\n  const dayEvents = useMemo(() => {\n    return events\n      .filter((event) => {\n        const eventStart = new Date(event.start)\n        const eventEnd = new Date(event.end)\n        return (\n          isSameDay(currentDate, eventStart) ||\n          isSameDay(currentDate, eventEnd) ||\n          (currentDate > eventStart && currentDate < eventEnd)\n        )\n      })\n      .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime())\n  }, [currentDate, events])\n\n  // Filter all-day events\n  const allDayEvents = useMemo(() => {\n    return dayEvents.filter((event) => {\n      // Include explicitly marked all-day events or multi-day events\n      return event.allDay || isMultiDayEvent(event)\n    })\n  }, [dayEvents])\n\n  // Get only single-day time-based events\n  const timeEvents = useMemo(() => {\n    return dayEvents.filter((event) => {\n      // Exclude all-day events and multi-day events\n      return !event.allDay && !isMultiDayEvent(event)\n    })\n  }, [dayEvents])\n\n  // Process events to calculate positions\n  const positionedEvents = useMemo(() => {\n    const result: PositionedEvent[] = []\n    const dayStart = startOfDay(currentDate)\n\n    // Sort events by start time and duration\n    const sortedEvents = [...timeEvents].sort((a, b) => {\n      const aStart = new Date(a.start)\n      const bStart = new Date(b.start)\n      const aEnd = new Date(a.end)\n      const bEnd = new Date(b.end)\n\n      // First sort by start time\n      if (aStart < bStart) return -1\n      if (aStart > bStart) return 1\n\n      // If start times are equal, sort by duration (longer events first)\n      const aDuration = differenceInMinutes(aEnd, aStart)\n      const bDuration = differenceInMinutes(bEnd, bStart)\n      return bDuration - aDuration\n    })\n\n    // Track columns for overlapping events\n    const columns: { event: CalendarEvent; end: Date }[][] = []\n\n    sortedEvents.forEach((event) => {\n      const eventStart = new Date(event.start)\n      const eventEnd = new Date(event.end)\n\n      // Adjust start and end times if they're outside this day\n      const adjustedStart = isSameDay(currentDate, eventStart)\n        ? eventStart\n        : dayStart\n      const adjustedEnd = isSameDay(currentDate, eventEnd)\n        ? eventEnd\n        : addHours(dayStart, 24)\n\n      // Calculate top position and height\n      const startHour = getHours(adjustedStart) + getMinutes(adjustedStart) / 60\n      const endHour = getHours(adjustedEnd) + getMinutes(adjustedEnd) / 60\n      const top = (startHour - StartHour) * WeekCellsHeight\n      const height = (endHour - startHour) * WeekCellsHeight\n\n      // Find a column for this event\n      let columnIndex = 0\n      let placed = false\n\n      while (!placed) {\n        const col = columns[columnIndex] || []\n        if (col.length === 0) {\n          columns[columnIndex] = col\n          placed = true\n        } else {\n          const overlaps = col.some((c) =>\n            areIntervalsOverlapping(\n              { start: adjustedStart, end: adjustedEnd },\n              { start: new Date(c.event.start), end: new Date(c.event.end) }\n            )\n          )\n          if (!overlaps) {\n            placed = true\n          } else {\n            columnIndex++\n          }\n        }\n      }\n\n      // Ensure column is initialized before pushing\n      const currentColumn = columns[columnIndex] || []\n      columns[columnIndex] = currentColumn\n      currentColumn.push({ event, end: adjustedEnd })\n\n      // First column takes full width, others are indented by 10% and take 90% width\n      const width = columnIndex === 0 ? 1 : 0.9\n      const left = columnIndex === 0 ? 0 : columnIndex * 0.1\n\n      result.push({\n        event,\n        top,\n        height,\n        left,\n        width,\n        zIndex: 10 + columnIndex, // Higher columns get higher z-index\n      })\n    })\n\n    return result\n  }, [currentDate, timeEvents])\n\n  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {\n    e.stopPropagation()\n    onEventSelect(event)\n  }\n\n  const showAllDaySection = allDayEvents.length > 0\n  const { currentTimePosition, currentTimeVisible } = useCurrentTimeIndicator(\n    currentDate,\n    \"day\"\n  )\n\n  return (\n    <div data-slot=\"day-view\" className=\"contents\">\n      {showAllDaySection && (\n        <div className=\"border-t border-border/70 bg-muted/50\">\n          <div className=\"grid grid-cols-[3rem_1fr] sm:grid-cols-[4rem_1fr]\">\n            <div className=\"relative\">\n              <span className=\"absolute bottom-0 left-0 h-6 w-16 max-w-full pe-2 text-right text-[10px] text-muted-foreground/70 sm:pe-4 sm:text-xs\">\n                All day\n              </span>\n            </div>\n            <div className=\"relative border-r border-border/70 p-1 last:border-r-0\">\n              {allDayEvents.map((event) => {\n                const eventStart = new Date(event.start)\n                const eventEnd = new Date(event.end)\n                const isFirstDay = isSameDay(currentDate, eventStart)\n                const isLastDay = isSameDay(currentDate, eventEnd)\n\n                return (\n                  <EventItem\n                    key={`spanning-${event.id}`}\n                    onClick={(e) => handleEventClick(event, e)}\n                    event={event}\n                    view=\"month\"\n                    isFirstDay={isFirstDay}\n                    isLastDay={isLastDay}\n                  >\n                    {/* Always show the title in day view for better usability */}\n                    <div>{event.title}</div>\n                  </EventItem>\n                )\n              })}\n            </div>\n          </div>\n        </div>\n      )}\n\n      <div className=\"grid flex-1 grid-cols-[3rem_1fr] overflow-hidden border-t border-border/70 sm:grid-cols-[4rem_1fr]\">\n        <div>\n          {hours.map((hour, index) => (\n            <div\n              key={hour.toString()}\n              className=\"relative h-[var(--week-cells-height)] border-b border-border/70 last:border-b-0\"\n            >\n              {index > 0 && (\n                <span className=\"absolute -top-3 left-0 flex h-6 w-16 max-w-full items-center justify-end bg-background pe-2 text-[10px] text-muted-foreground/70 sm:pe-4 sm:text-xs\">\n                  {format(hour, \"h a\")}\n                </span>\n              )}\n            </div>\n          ))}\n        </div>\n\n        <div className=\"relative\">\n          {/* Positioned events */}\n          {positionedEvents.map((positionedEvent) => (\n            <div\n              key={positionedEvent.event.id}\n              className=\"absolute z-10 px-0.5\"\n              style={{\n                top: `${positionedEvent.top}px`,\n                height: `${positionedEvent.height}px`,\n                left: `${positionedEvent.left * 100}%`,\n                width: `${positionedEvent.width * 100}%`,\n                zIndex: positionedEvent.zIndex,\n              }}\n            >\n              <div className=\"size-full\">\n                <DraggableEvent\n                  event={positionedEvent.event}\n                  view=\"day\"\n                  onClick={(e) => handleEventClick(positionedEvent.event, e)}\n                  showTime\n                  height={positionedEvent.height}\n                />\n              </div>\n            </div>\n          ))}\n\n          {/* Current time indicator */}\n          {currentTimeVisible && (\n            <div\n              className=\"pointer-events-none absolute right-0 left-0 z-20\"\n              style={{ top: `${currentTimePosition}%` }}\n            >\n              <div className=\"relative flex items-center\">\n                <div className=\"absolute -left-1 h-2 w-2 rounded-full bg-primary\"></div>\n                <div className=\"h-[2px] w-full bg-primary\"></div>\n              </div>\n            </div>\n          )}\n\n          {/* Time grid */}\n          {hours.map((hour) => {\n            const hourValue = getHours(hour)\n            return (\n              <div\n                key={hour.toString()}\n                className=\"relative h-[var(--week-cells-height)] border-b border-border/70 last:border-b-0\"\n              >\n                {/* Quarter-hour intervals */}\n                {[0, 1, 2, 3].map((quarter) => {\n                  const quarterHourTime = hourValue + quarter * 0.25\n                  return (\n                    <DroppableCell\n                      key={`${hour.toString()}-${quarter}`}\n                      id={`day-cell-${currentDate.toISOString()}-${quarterHourTime}`}\n                      date={currentDate}\n                      time={quarterHourTime}\n                      className={cn(\n                        \"absolute h-[calc(var(--week-cells-height)/4)] w-full\",\n                        quarter === 0 && \"top-0\",\n                        quarter === 1 &&\n                          \"top-[calc(var(--week-cells-height)/4)]\",\n                        quarter === 2 &&\n                          \"top-[calc(var(--week-cells-height)/4*2)]\",\n                        quarter === 3 &&\n                          \"top-[calc(var(--week-cells-height)/4*3)]\"\n                      )}\n                      onClick={() => {\n                        const startTime = new Date(currentDate)\n                        startTime.setHours(hourValue)\n                        startTime.setMinutes(quarter * 15)\n                        onEventCreate(startTime)\n                      }}\n                    />\n                  )\n                })}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/draggable-event.tsx",
+      "content": "\"use client\"\n\nimport { useRef, useState } from \"react\"\nimport { useDraggable } from \"@dnd-kit/core\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport { differenceInDays } from \"date-fns\"\n\nimport {\n  CalendarEvent,\n  EventItem,\n  useCalendarDnd,\n} from \"@/registry/building-blocks/default/components/event-calendar\"\n\ninterface DraggableEventProps {\n  event: CalendarEvent\n  view: \"month\" | \"week\" | \"day\"\n  showTime?: boolean\n  onClick?: (e: React.MouseEvent) => void\n  height?: number\n  isMultiDay?: boolean\n  multiDayWidth?: number\n  isFirstDay?: boolean\n  isLastDay?: boolean\n  \"aria-hidden\"?: boolean | \"true\" | \"false\"\n}\n\nexport function DraggableEvent({\n  event,\n  view,\n  showTime,\n  onClick,\n  height,\n  isMultiDay,\n  multiDayWidth,\n  isFirstDay = true,\n  isLastDay = true,\n  \"aria-hidden\": ariaHidden,\n}: DraggableEventProps) {\n  const { activeId } = useCalendarDnd()\n  const elementRef = useRef<HTMLDivElement>(null)\n  const [dragHandlePosition, setDragHandlePosition] = useState<{\n    x: number\n    y: number\n  } | null>(null)\n\n  // Check if this is a multi-day event\n  const eventStart = new Date(event.start)\n  const eventEnd = new Date(event.end)\n  const isMultiDayEvent =\n    isMultiDay || event.allDay || differenceInDays(eventEnd, eventStart) >= 1\n\n  const { attributes, listeners, setNodeRef, transform, isDragging } =\n    useDraggable({\n      id: `${event.id}-${view}`,\n      data: {\n        event,\n        view,\n        height: height || elementRef.current?.offsetHeight || null,\n        isMultiDay: isMultiDayEvent,\n        multiDayWidth: multiDayWidth,\n        dragHandlePosition,\n        isFirstDay,\n        isLastDay,\n      },\n    })\n\n  // Handle mouse down to track where on the event the user clicked\n  const handleMouseDown = (e: React.MouseEvent) => {\n    if (elementRef.current) {\n      const rect = elementRef.current.getBoundingClientRect()\n      setDragHandlePosition({\n        x: e.clientX - rect.left,\n        y: e.clientY - rect.top,\n      })\n    }\n  }\n\n  // Don't render if this event is being dragged\n  if (isDragging || activeId === `${event.id}-${view}`) {\n    return (\n      <div\n        ref={setNodeRef}\n        className=\"opacity-0\"\n        style={{ height: height || \"auto\" }}\n      />\n    )\n  }\n\n  const style = transform\n    ? {\n        transform: CSS.Translate.toString(transform),\n        height: height || \"auto\",\n        width:\n          isMultiDayEvent && multiDayWidth ? `${multiDayWidth}%` : undefined,\n      }\n    : {\n        height: height || \"auto\",\n        width:\n          isMultiDayEvent && multiDayWidth ? `${multiDayWidth}%` : undefined,\n      }\n\n  // Handle touch start to track where on the event the user touched\n  const handleTouchStart = (e: React.TouchEvent) => {\n    if (elementRef.current) {\n      const rect = elementRef.current.getBoundingClientRect()\n      const touch = e.touches[0]\n      if (touch) {\n        setDragHandlePosition({\n          x: touch.clientX - rect.left,\n          y: touch.clientY - rect.top,\n        })\n      }\n    }\n  }\n\n  return (\n    <div\n      ref={(node) => {\n        setNodeRef(node)\n        if (elementRef) elementRef.current = node\n      }}\n      style={style}\n      className=\"touch-none\"\n    >\n      <EventItem\n        event={event}\n        view={view}\n        showTime={showTime}\n        isFirstDay={isFirstDay}\n        isLastDay={isLastDay}\n        isDragging={isDragging}\n        onClick={onClick}\n        onMouseDown={handleMouseDown}\n        onTouchStart={handleTouchStart}\n        dndListeners={listeners}\n        dndAttributes={attributes}\n        aria-hidden={ariaHidden}\n      />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/droppable-cell.tsx",
+      "content": "\"use client\"\n\nimport { useDroppable } from \"@dnd-kit/core\"\n\nimport { useCalendarDnd } from \"@/registry/building-blocks/default/components/event-calendar\"\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\n\ninterface DroppableCellProps {\n  id: string\n  date: Date\n  time?: number // For week/day views, represents hours (e.g., 9.25 for 9:15)\n  children?: React.ReactNode\n  className?: string\n  onClick?: () => void\n}\n\nexport function DroppableCell({\n  id,\n  date,\n  time,\n  children,\n  className,\n  onClick,\n}: DroppableCellProps) {\n  const { activeEvent } = useCalendarDnd()\n\n  const { setNodeRef, isOver } = useDroppable({\n    id,\n    data: {\n      date,\n      time,\n    },\n  })\n\n  // Format time for display in tooltip (only for debugging)\n  const formattedTime =\n    time !== undefined\n      ? `${Math.floor(time)}:${Math.round((time - Math.floor(time)) * 60)\n          .toString()\n          .padStart(2, \"0\")}`\n      : null\n\n  return (\n    <div\n      ref={setNodeRef}\n      onClick={onClick}\n      className={cn(\n        \"flex h-full flex-col overflow-hidden px-0.5 py-1 data-dragging:bg-accent sm:px-1\",\n        className\n      )}\n      title={formattedTime ? `${formattedTime}` : undefined}\n      data-dragging={isOver && activeEvent ? true : undefined}\n    >\n      {children}\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/event-dialog.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useMemo, useState } from \"react\"\nimport { RiCalendarLine, RiDeleteBinLine } from \"@remixicon/react\"\nimport { format, isBefore } from \"date-fns\"\n\nimport type {\n  CalendarEvent,\n  EventColor,\n} from \"@/registry/building-blocks/default/components/event-calendar\"\nimport {\n  DefaultEndHour,\n  DefaultStartHour,\n  EndHour,\n  StartHour,\n} from \"@/registry/building-blocks/default/components/event-calendar/constants\"\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/building-blocks/default/ui/dialog\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/building-blocks/default/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\nimport { Textarea } from \"@/registry/building-blocks/default/ui/textarea\"\n\ninterface EventDialogProps {\n  event: CalendarEvent | null\n  isOpen: boolean\n  onClose: () => void\n  onSave: (event: CalendarEvent) => void\n  onDelete: (eventId: string) => void\n}\n\nexport function EventDialog({\n  event,\n  isOpen,\n  onClose,\n  onSave,\n  onDelete,\n}: EventDialogProps) {\n  const [title, setTitle] = useState(\"\")\n  const [description, setDescription] = useState(\"\")\n  const [startDate, setStartDate] = useState<Date>(new Date())\n  const [endDate, setEndDate] = useState<Date>(new Date())\n  const [startTime, setStartTime] = useState(`${DefaultStartHour}:00`)\n  const [endTime, setEndTime] = useState(`${DefaultEndHour}:00`)\n  const [allDay, setAllDay] = useState(false)\n  const [location, setLocation] = useState(\"\")\n  const [color, setColor] = useState<EventColor>(\"sky\")\n  const [error, setError] = useState<string | null>(null)\n  const [startDateOpen, setStartDateOpen] = useState(false)\n  const [endDateOpen, setEndDateOpen] = useState(false)\n\n  // Debug log to check what event is being passed\n  useEffect(() => {\n    console.log(\"EventDialog received event:\", event)\n  }, [event])\n\n  useEffect(() => {\n    if (event) {\n      setTitle(event.title || \"\")\n      setDescription(event.description || \"\")\n\n      const start = new Date(event.start)\n      const end = new Date(event.end)\n\n      setStartDate(start)\n      setEndDate(end)\n      setStartTime(formatTimeForInput(start))\n      setEndTime(formatTimeForInput(end))\n      setAllDay(event.allDay || false)\n      setLocation(event.location || \"\")\n      setColor((event.color as EventColor) || \"sky\")\n      setError(null) // Reset error when opening dialog\n    } else {\n      resetForm()\n    }\n  }, [event])\n\n  const resetForm = () => {\n    setTitle(\"\")\n    setDescription(\"\")\n    setStartDate(new Date())\n    setEndDate(new Date())\n    setStartTime(`${DefaultStartHour}:00`)\n    setEndTime(`${DefaultEndHour}:00`)\n    setAllDay(false)\n    setLocation(\"\")\n    setColor(\"sky\")\n    setError(null)\n  }\n\n  const formatTimeForInput = (date: Date) => {\n    const hours = date.getHours().toString().padStart(2, \"0\")\n    const minutes = Math.floor(date.getMinutes() / 15) * 15\n    return `${hours}:${minutes.toString().padStart(2, \"0\")}`\n  }\n\n  // Memoize time options so they're only calculated once\n  const timeOptions = useMemo(() => {\n    const options = []\n    for (let hour = StartHour; hour <= EndHour; hour++) {\n      for (let minute = 0; minute < 60; minute += 15) {\n        const formattedHour = hour.toString().padStart(2, \"0\")\n        const formattedMinute = minute.toString().padStart(2, \"0\")\n        const value = `${formattedHour}:${formattedMinute}`\n        // Use a fixed date to avoid unnecessary date object creations\n        const date = new Date(2000, 0, 1, hour, minute)\n        const label = format(date, \"h:mm a\")\n        options.push({ value, label })\n      }\n    }\n    return options\n  }, []) // Empty dependency array ensures this only runs once\n\n  const handleSave = () => {\n    const start = new Date(startDate)\n    const end = new Date(endDate)\n\n    if (!allDay) {\n      const [startHours = 0, startMinutes = 0] = startTime\n        .split(\":\")\n        .map(Number)\n      const [endHours = 0, endMinutes = 0] = endTime.split(\":\").map(Number)\n\n      if (\n        startHours < StartHour ||\n        startHours > EndHour ||\n        endHours < StartHour ||\n        endHours > EndHour\n      ) {\n        setError(\n          `Selected time must be between ${StartHour}:00 and ${EndHour}:00`\n        )\n        return\n      }\n\n      start.setHours(startHours, startMinutes, 0)\n      end.setHours(endHours, endMinutes, 0)\n    } else {\n      start.setHours(0, 0, 0, 0)\n      end.setHours(23, 59, 59, 999)\n    }\n\n    // Validate that end date is not before start date\n    if (isBefore(end, start)) {\n      setError(\"End date cannot be before start date\")\n      return\n    }\n\n    // Use generic title if empty\n    const eventTitle = title.trim() ? title : \"(no title)\"\n\n    onSave({\n      id: event?.id || \"\",\n      title: eventTitle,\n      description,\n      start,\n      end,\n      allDay,\n      location,\n      color,\n    })\n  }\n\n  const handleDelete = () => {\n    if (event?.id) {\n      onDelete(event.id)\n    }\n  }\n\n  // Updated color options to match types.ts\n  const colorOptions: Array<{\n    value: EventColor\n    label: string\n    bgClass: string\n    borderClass: string\n  }> = [\n    {\n      value: \"sky\",\n      label: \"Sky\",\n      bgClass: \"bg-sky-400 data-[state=checked]:bg-sky-400\",\n      borderClass: \"border-sky-400 data-[state=checked]:border-sky-400\",\n    },\n    {\n      value: \"amber\",\n      label: \"Amber\",\n      bgClass: \"bg-amber-400 data-[state=checked]:bg-amber-400\",\n      borderClass: \"border-amber-400 data-[state=checked]:border-amber-400\",\n    },\n    {\n      value: \"violet\",\n      label: \"Violet\",\n      bgClass: \"bg-violet-400 data-[state=checked]:bg-violet-400\",\n      borderClass: \"border-violet-400 data-[state=checked]:border-violet-400\",\n    },\n    {\n      value: \"rose\",\n      label: \"Rose\",\n      bgClass: \"bg-rose-400 data-[state=checked]:bg-rose-400\",\n      borderClass: \"border-rose-400 data-[state=checked]:border-rose-400\",\n    },\n    {\n      value: \"emerald\",\n      label: \"Emerald\",\n      bgClass: \"bg-emerald-400 data-[state=checked]:bg-emerald-400\",\n      borderClass: \"border-emerald-400 data-[state=checked]:border-emerald-400\",\n    },\n    {\n      value: \"orange\",\n      label: \"Orange\",\n      bgClass: \"bg-orange-400 data-[state=checked]:bg-orange-400\",\n      borderClass: \"border-orange-400 data-[state=checked]:border-orange-400\",\n    },\n  ]\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>{event?.id ? \"Edit Event\" : \"Create Event\"}</DialogTitle>\n          <DialogDescription className=\"sr-only\">\n            {event?.id\n              ? \"Edit the details of this event\"\n              : \"Add a new event to your calendar\"}\n          </DialogDescription>\n        </DialogHeader>\n        {error && (\n          <div className=\"rounded-md bg-destructive/15 px-3 py-2 text-sm text-destructive\">\n            {error}\n          </div>\n        )}\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"*:not-first:mt-1.5\">\n            <Label htmlFor=\"title\">Title</Label>\n            <Input\n              id=\"title\"\n              value={title}\n              onChange={(e) => setTitle(e.target.value)}\n            />\n          </div>\n\n          <div className=\"*:not-first:mt-1.5\">\n            <Label htmlFor=\"description\">Description</Label>\n            <Textarea\n              id=\"description\"\n              value={description}\n              onChange={(e) => setDescription(e.target.value)}\n              rows={3}\n            />\n          </div>\n\n          <div className=\"flex gap-4\">\n            <div className=\"flex-1 *:not-first:mt-1.5\">\n              <Label htmlFor=\"start-date\">Start Date</Label>\n              <Popover open={startDateOpen} onOpenChange={setStartDateOpen}>\n                <PopoverTrigger asChild>\n                  <Button\n                    id=\"start-date\"\n                    variant={\"outline\"}\n                    className={cn(\n                      \"group w-full justify-between border-input bg-background px-3 font-normal outline-offset-0 outline-none hover:bg-background focus-visible:outline-[3px]\",\n                      !startDate && \"text-muted-foreground\"\n                    )}\n                  >\n                    <span\n                      className={cn(\n                        \"truncate\",\n                        !startDate && \"text-muted-foreground\"\n                      )}\n                    >\n                      {startDate ? format(startDate, \"PPP\") : \"Pick a date\"}\n                    </span>\n                    <RiCalendarLine\n                      size={16}\n                      className=\"shrink-0 text-muted-foreground/80\"\n                      aria-hidden=\"true\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-2\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={startDate}\n                    defaultMonth={startDate}\n                    onSelect={(date) => {\n                      if (date) {\n                        setStartDate(date)\n                        // If end date is before the new start date, update it to match the start date\n                        if (isBefore(endDate, date)) {\n                          setEndDate(date)\n                        }\n                        setError(null)\n                        setStartDateOpen(false)\n                      }\n                    }}\n                  />\n                </PopoverContent>\n              </Popover>\n            </div>\n\n            {!allDay && (\n              <div className=\"min-w-28 *:not-first:mt-1.5\">\n                <Label htmlFor=\"start-time\">Start Time</Label>\n                <Select value={startTime} onValueChange={setStartTime}>\n                  <SelectTrigger id=\"start-time\">\n                    <SelectValue placeholder=\"Select time\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {timeOptions.map((option) => (\n                      <SelectItem key={option.value} value={option.value}>\n                        {option.label}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n            )}\n          </div>\n\n          <div className=\"flex gap-4\">\n            <div className=\"flex-1 *:not-first:mt-1.5\">\n              <Label htmlFor=\"end-date\">End Date</Label>\n              <Popover open={endDateOpen} onOpenChange={setEndDateOpen}>\n                <PopoverTrigger asChild>\n                  <Button\n                    id=\"end-date\"\n                    variant={\"outline\"}\n                    className={cn(\n                      \"group w-full justify-between border-input bg-background px-3 font-normal outline-offset-0 outline-none hover:bg-background focus-visible:outline-[3px]\",\n                      !endDate && \"text-muted-foreground\"\n                    )}\n                  >\n                    <span\n                      className={cn(\n                        \"truncate\",\n                        !endDate && \"text-muted-foreground\"\n                      )}\n                    >\n                      {endDate ? format(endDate, \"PPP\") : \"Pick a date\"}\n                    </span>\n                    <RiCalendarLine\n                      size={16}\n                      className=\"shrink-0 text-muted-foreground/80\"\n                      aria-hidden=\"true\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-2\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={endDate}\n                    defaultMonth={endDate}\n                    disabled={{ before: startDate }}\n                    onSelect={(date) => {\n                      if (date) {\n                        setEndDate(date)\n                        setError(null)\n                        setEndDateOpen(false)\n                      }\n                    }}\n                  />\n                </PopoverContent>\n              </Popover>\n            </div>\n\n            {!allDay && (\n              <div className=\"min-w-28 *:not-first:mt-1.5\">\n                <Label htmlFor=\"end-time\">End Time</Label>\n                <Select value={endTime} onValueChange={setEndTime}>\n                  <SelectTrigger id=\"end-time\">\n                    <SelectValue placeholder=\"Select time\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {timeOptions.map((option) => (\n                      <SelectItem key={option.value} value={option.value}>\n                        {option.label}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <Checkbox\n              id=\"all-day\"\n              checked={allDay}\n              onCheckedChange={(checked) => setAllDay(checked === true)}\n            />\n            <Label htmlFor=\"all-day\">All day</Label>\n          </div>\n\n          <div className=\"*:not-first:mt-1.5\">\n            <Label htmlFor=\"location\">Location</Label>\n            <Input\n              id=\"location\"\n              value={location}\n              onChange={(e) => setLocation(e.target.value)}\n            />\n          </div>\n          <fieldset className=\"space-y-4\">\n            <legend className=\"text-sm leading-none font-medium text-foreground\">\n              Etiquette\n            </legend>\n            <RadioGroup\n              className=\"flex gap-1.5\"\n              defaultValue={colorOptions[0]?.value}\n              value={color}\n              onValueChange={(value: EventColor) => setColor(value)}\n            >\n              {colorOptions.map((colorOption) => (\n                <RadioGroupItem\n                  key={colorOption.value}\n                  id={`color-${colorOption.value}`}\n                  value={colorOption.value}\n                  aria-label={colorOption.label}\n                  className={cn(\n                    \"size-6 shadow-none\",\n                    colorOption.bgClass,\n                    colorOption.borderClass\n                  )}\n                />\n              ))}\n            </RadioGroup>\n          </fieldset>\n        </div>\n        <DialogFooter className=\"flex-row sm:justify-between\">\n          {event?.id && (\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              onClick={handleDelete}\n              aria-label=\"Delete event\"\n            >\n              <RiDeleteBinLine size={16} aria-hidden=\"true\" />\n            </Button>\n          )}\n          <div className=\"flex flex-1 justify-end gap-2\">\n            <Button variant=\"outline\" onClick={onClose}>\n              Cancel\n            </Button>\n            <Button onClick={handleSave}>Save</Button>\n          </div>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/event-item.tsx",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport type { DraggableAttributes } from \"@dnd-kit/core\"\nimport type { SyntheticListenerMap } from \"@dnd-kit/core/dist/hooks/utilities\"\nimport { differenceInMinutes, format, getMinutes, isPast } from \"date-fns\"\n\nimport {\n  getBorderRadiusClasses,\n  getEventColorClasses,\n  type CalendarEvent,\n} from \"@/registry/building-blocks/default/components/event-calendar\"\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\n\n// Using date-fns format with custom formatting:\n// 'h' - hours (1-12)\n// 'a' - am/pm\n// ':mm' - minutes with leading zero (only if the token 'mm' is present)\nconst formatTimeWithOptionalMinutes = (date: Date) => {\n  return format(date, getMinutes(date) === 0 ? \"ha\" : \"h:mma\").toLowerCase()\n}\n\ninterface EventWrapperProps {\n  event: CalendarEvent\n  isFirstDay?: boolean\n  isLastDay?: boolean\n  isDragging?: boolean\n  onClick?: (e: React.MouseEvent) => void\n  className?: string\n  children: React.ReactNode\n  currentTime?: Date\n  dndListeners?: SyntheticListenerMap\n  dndAttributes?: DraggableAttributes\n  onMouseDown?: (e: React.MouseEvent) => void\n  onTouchStart?: (e: React.TouchEvent) => void\n}\n\n// Shared wrapper component for event styling\nfunction EventWrapper({\n  event,\n  isFirstDay = true,\n  isLastDay = true,\n  isDragging,\n  onClick,\n  className,\n  children,\n  currentTime,\n  dndListeners,\n  dndAttributes,\n  onMouseDown,\n  onTouchStart,\n}: EventWrapperProps) {\n  // Always use the currentTime (if provided) to determine if the event is in the past\n  const displayEnd = currentTime\n    ? new Date(\n        new Date(currentTime).getTime() +\n          (new Date(event.end).getTime() - new Date(event.start).getTime())\n      )\n    : new Date(event.end)\n\n  const isEventInPast = isPast(displayEnd)\n\n  return (\n    <button\n      className={cn(\n        \"flex size-full overflow-hidden px-1 text-left font-medium backdrop-blur-md transition outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-dragging:cursor-grabbing data-dragging:shadow-lg data-past-event:line-through sm:px-2\",\n        getEventColorClasses(event.color),\n        getBorderRadiusClasses(isFirstDay, isLastDay),\n        className\n      )}\n      data-dragging={isDragging || undefined}\n      data-past-event={isEventInPast || undefined}\n      onClick={onClick}\n      onMouseDown={onMouseDown}\n      onTouchStart={onTouchStart}\n      {...dndListeners}\n      {...dndAttributes}\n    >\n      {children}\n    </button>\n  )\n}\n\ninterface EventItemProps {\n  event: CalendarEvent\n  view: \"month\" | \"week\" | \"day\" | \"agenda\"\n  isDragging?: boolean\n  onClick?: (e: React.MouseEvent) => void\n  showTime?: boolean\n  currentTime?: Date // For updating time during drag\n  isFirstDay?: boolean\n  isLastDay?: boolean\n  children?: React.ReactNode\n  className?: string\n  dndListeners?: SyntheticListenerMap\n  dndAttributes?: DraggableAttributes\n  onMouseDown?: (e: React.MouseEvent) => void\n  onTouchStart?: (e: React.TouchEvent) => void\n}\n\nexport function EventItem({\n  event,\n  view,\n  isDragging,\n  onClick,\n  showTime,\n  currentTime,\n  isFirstDay = true,\n  isLastDay = true,\n  children,\n  className,\n  dndListeners,\n  dndAttributes,\n  onMouseDown,\n  onTouchStart,\n}: EventItemProps) {\n  const eventColor = event.color\n\n  // Use the provided currentTime (for dragging) or the event's actual time\n  const displayStart = useMemo(() => {\n    return currentTime || new Date(event.start)\n  }, [currentTime, event.start])\n\n  const displayEnd = useMemo(() => {\n    return currentTime\n      ? new Date(\n          new Date(currentTime).getTime() +\n            (new Date(event.end).getTime() - new Date(event.start).getTime())\n        )\n      : new Date(event.end)\n  }, [currentTime, event.start, event.end])\n\n  // Calculate event duration in minutes\n  const durationMinutes = useMemo(() => {\n    return differenceInMinutes(displayEnd, displayStart)\n  }, [displayStart, displayEnd])\n\n  const getEventTime = () => {\n    if (event.allDay) return \"All day\"\n\n    // For short events (less than 45 minutes), only show start time\n    if (durationMinutes < 45) {\n      return formatTimeWithOptionalMinutes(displayStart)\n    }\n\n    // For longer events, show both start and end time\n    return `${formatTimeWithOptionalMinutes(displayStart)} - ${formatTimeWithOptionalMinutes(displayEnd)}`\n  }\n\n  if (view === \"month\") {\n    return (\n      <EventWrapper\n        event={event}\n        isFirstDay={isFirstDay}\n        isLastDay={isLastDay}\n        isDragging={isDragging}\n        onClick={onClick}\n        className={cn(\n          \"mt-[var(--event-gap)] h-[var(--event-height)] items-center text-[10px] sm:text-xs\",\n          className\n        )}\n        currentTime={currentTime}\n        dndListeners={dndListeners}\n        dndAttributes={dndAttributes}\n        onMouseDown={onMouseDown}\n        onTouchStart={onTouchStart}\n      >\n        {children || (\n          <span className=\"truncate\">\n            {!event.allDay && (\n              <span className=\"truncate font-normal opacity-70 sm:text-[11px]\">\n                {formatTimeWithOptionalMinutes(displayStart)}{\" \"}\n              </span>\n            )}\n            {event.title}\n          </span>\n        )}\n      </EventWrapper>\n    )\n  }\n\n  if (view === \"week\" || view === \"day\") {\n    return (\n      <EventWrapper\n        event={event}\n        isFirstDay={isFirstDay}\n        isLastDay={isLastDay}\n        isDragging={isDragging}\n        onClick={onClick}\n        className={cn(\n          \"py-1\",\n          durationMinutes < 45 ? \"items-center\" : \"flex-col\",\n          view === \"week\" ? \"text-[10px] sm:text-xs\" : \"text-xs\",\n          className\n        )}\n        currentTime={currentTime}\n        dndListeners={dndListeners}\n        dndAttributes={dndAttributes}\n        onMouseDown={onMouseDown}\n        onTouchStart={onTouchStart}\n      >\n        {durationMinutes < 45 ? (\n          <div className=\"truncate\">\n            {event.title}{\" \"}\n            {showTime && (\n              <span className=\"opacity-70\">\n                {formatTimeWithOptionalMinutes(displayStart)}\n              </span>\n            )}\n          </div>\n        ) : (\n          <>\n            <div className=\"truncate font-medium\">{event.title}</div>\n            {showTime && (\n              <div className=\"truncate font-normal opacity-70 sm:text-[11px]\">\n                {getEventTime()}\n              </div>\n            )}\n          </>\n        )}\n      </EventWrapper>\n    )\n  }\n\n  // Agenda view - kept separate since it's significantly different\n  return (\n    <button\n      className={cn(\n        \"flex w-full flex-col gap-1 rounded p-2 text-left transition outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-past-event:line-through data-past-event:opacity-90\",\n        getEventColorClasses(eventColor),\n        className\n      )}\n      data-past-event={isPast(new Date(event.end)) || undefined}\n      onClick={onClick}\n      onMouseDown={onMouseDown}\n      onTouchStart={onTouchStart}\n      {...dndListeners}\n      {...dndAttributes}\n    >\n      <div className=\"text-sm font-medium\">{event.title}</div>\n      <div className=\"text-xs opacity-70\">\n        {event.allDay ? (\n          <span>All day</span>\n        ) : (\n          <span className=\"uppercase\">\n            {formatTimeWithOptionalMinutes(displayStart)} -{\" \"}\n            {formatTimeWithOptionalMinutes(displayEnd)}\n          </span>\n        )}\n        {event.location && (\n          <>\n            <span className=\"px-1 opacity-35\"> · </span>\n            <span>{event.location}</span>\n          </>\n        )}\n      </div>\n      {event.description && (\n        <div className=\"my-1 text-xs opacity-90\">{event.description}</div>\n      )}\n    </button>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/events-popup.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useMemo, useRef } from \"react\"\nimport { format, isSameDay } from \"date-fns\"\nimport { XIcon } from \"lucide-react\"\n\nimport {\n  EventItem,\n  type CalendarEvent,\n} from \"@/registry/building-blocks/default/components/event-calendar\"\n\ninterface EventsPopupProps {\n  date: Date\n  events: CalendarEvent[]\n  position: { top: number; left: number }\n  onClose: () => void\n  onEventSelect: (event: CalendarEvent) => void\n}\n\nexport function EventsPopup({\n  date,\n  events,\n  position,\n  onClose,\n  onEventSelect,\n}: EventsPopupProps) {\n  const popupRef = useRef<HTMLDivElement>(null)\n\n  // Handle click outside to close popup\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        popupRef.current &&\n        !popupRef.current.contains(event.target as Node)\n      ) {\n        onClose()\n      }\n    }\n\n    document.addEventListener(\"mousedown\", handleClickOutside)\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside)\n    }\n  }, [onClose])\n\n  // Handle escape key to close popup\n  useEffect(() => {\n    const handleEscKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onClose()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleEscKey)\n    return () => {\n      document.removeEventListener(\"keydown\", handleEscKey)\n    }\n  }, [onClose])\n\n  const handleEventClick = (event: CalendarEvent) => {\n    onEventSelect(event)\n    onClose()\n  }\n\n  // Adjust position to ensure popup stays within viewport\n  const adjustedPosition = useMemo(() => {\n    const positionCopy = { ...position }\n\n    // Check if we need to adjust the position to fit in the viewport\n    if (popupRef.current) {\n      const rect = popupRef.current.getBoundingClientRect()\n      const viewportWidth = window.innerWidth\n      const viewportHeight = window.innerHeight\n\n      // Adjust horizontally if needed\n      if (positionCopy.left + rect.width > viewportWidth) {\n        positionCopy.left = Math.max(0, viewportWidth - rect.width)\n      }\n\n      // Adjust vertically if needed\n      if (positionCopy.top + rect.height > viewportHeight) {\n        positionCopy.top = Math.max(0, viewportHeight - rect.height)\n      }\n    }\n\n    return positionCopy\n  }, [position])\n\n  return (\n    <div\n      ref={popupRef}\n      className=\"absolute z-50 max-h-96 w-80 overflow-auto rounded-md border bg-background shadow-lg\"\n      style={{\n        top: `${adjustedPosition.top}px`,\n        left: `${adjustedPosition.left}px`,\n      }}\n    >\n      <div className=\"sticky top-0 flex items-center justify-between border-b bg-background p-3\">\n        <h3 className=\"font-medium\">{format(date, \"d MMMM yyyy\")}</h3>\n        <button\n          onClick={onClose}\n          className=\"rounded-full p-1 hover:bg-muted\"\n          aria-label=\"Close\"\n        >\n          <XIcon className=\"h-4 w-4\" />\n        </button>\n      </div>\n\n      <div className=\"space-y-2 p-3\">\n        {events.length === 0 ? (\n          <div className=\"py-2 text-sm text-muted-foreground\">No events</div>\n        ) : (\n          events.map((event) => {\n            const eventStart = new Date(event.start)\n            const eventEnd = new Date(event.end)\n            const isFirstDay = isSameDay(date, eventStart)\n            const isLastDay = isSameDay(date, eventEnd)\n\n            return (\n              <div\n                key={event.id}\n                className=\"cursor-pointer\"\n                onClick={() => handleEventClick(event)}\n              >\n                <EventItem\n                  event={event}\n                  view=\"agenda\"\n                  isFirstDay={isFirstDay}\n                  isLastDay={isLastDay}\n                />\n              </div>\n            )\n          })\n        )}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/event-calendar.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useMemo, useState } from \"react\"\nimport { RiCalendarCheckLine } from \"@remixicon/react\"\nimport {\n  addDays,\n  addMonths,\n  addWeeks,\n  endOfWeek,\n  format,\n  isSameMonth,\n  startOfWeek,\n  subMonths,\n  subWeeks,\n} from \"date-fns\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  PlusIcon,\n} from \"lucide-react\"\nimport { toast } from \"sonner\"\n\nimport {\n  addHoursToDate,\n  AgendaDaysToShow,\n  AgendaView,\n  CalendarDndProvider,\n  CalendarEvent,\n  CalendarView,\n  DayView,\n  EventDialog,\n  EventGap,\n  EventHeight,\n  MonthView,\n  WeekCellsHeight,\n  WeekView,\n} from \"@/registry/building-blocks/default/components/event-calendar\"\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport interface EventCalendarProps {\n  events?: CalendarEvent[]\n  onEventAdd?: (event: CalendarEvent) => void\n  onEventUpdate?: (event: CalendarEvent) => void\n  onEventDelete?: (eventId: string) => void\n  className?: string\n  initialView?: CalendarView\n}\n\nexport function EventCalendar({\n  events = [],\n  onEventAdd,\n  onEventUpdate,\n  onEventDelete,\n  className,\n  initialView = \"month\",\n}: EventCalendarProps) {\n  const [currentDate, setCurrentDate] = useState(new Date())\n  const [view, setView] = useState<CalendarView>(initialView)\n  const [isEventDialogOpen, setIsEventDialogOpen] = useState(false)\n  const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null)\n\n  // Add keyboard shortcuts for view switching\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      // Skip if user is typing in an input, textarea or contentEditable element\n      // or if the event dialog is open\n      if (\n        isEventDialogOpen ||\n        e.target instanceof HTMLInputElement ||\n        e.target instanceof HTMLTextAreaElement ||\n        (e.target instanceof HTMLElement && e.target.isContentEditable)\n      ) {\n        return\n      }\n\n      switch (e.key.toLowerCase()) {\n        case \"m\":\n          setView(\"month\")\n          break\n        case \"w\":\n          setView(\"week\")\n          break\n        case \"d\":\n          setView(\"day\")\n          break\n        case \"a\":\n          setView(\"agenda\")\n          break\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown)\n    }\n  }, [isEventDialogOpen])\n\n  const handlePrevious = () => {\n    if (view === \"month\") {\n      setCurrentDate(subMonths(currentDate, 1))\n    } else if (view === \"week\") {\n      setCurrentDate(subWeeks(currentDate, 1))\n    } else if (view === \"day\") {\n      setCurrentDate(addDays(currentDate, -1))\n    } else if (view === \"agenda\") {\n      // For agenda view, go back 30 days (a full month)\n      setCurrentDate(addDays(currentDate, -AgendaDaysToShow))\n    }\n  }\n\n  const handleNext = () => {\n    if (view === \"month\") {\n      setCurrentDate(addMonths(currentDate, 1))\n    } else if (view === \"week\") {\n      setCurrentDate(addWeeks(currentDate, 1))\n    } else if (view === \"day\") {\n      setCurrentDate(addDays(currentDate, 1))\n    } else if (view === \"agenda\") {\n      // For agenda view, go forward 30 days (a full month)\n      setCurrentDate(addDays(currentDate, AgendaDaysToShow))\n    }\n  }\n\n  const handleToday = () => {\n    setCurrentDate(new Date())\n  }\n\n  const handleEventSelect = (event: CalendarEvent) => {\n    console.log(\"Event selected:\", event) // Debug log\n    setSelectedEvent(event)\n    setIsEventDialogOpen(true)\n  }\n\n  const handleEventCreate = (startTime: Date) => {\n    console.log(\"Creating new event at:\", startTime) // Debug log\n\n    // Snap to 15-minute intervals\n    const minutes = startTime.getMinutes()\n    const remainder = minutes % 15\n    if (remainder !== 0) {\n      if (remainder < 7.5) {\n        // Round down to nearest 15 min\n        startTime.setMinutes(minutes - remainder)\n      } else {\n        // Round up to nearest 15 min\n        startTime.setMinutes(minutes + (15 - remainder))\n      }\n      startTime.setSeconds(0)\n      startTime.setMilliseconds(0)\n    }\n\n    const newEvent: CalendarEvent = {\n      id: \"\",\n      title: \"\",\n      start: startTime,\n      end: addHoursToDate(startTime, 1),\n      allDay: false,\n    }\n    setSelectedEvent(newEvent)\n    setIsEventDialogOpen(true)\n  }\n\n  const handleEventSave = (event: CalendarEvent) => {\n    if (event.id) {\n      onEventUpdate?.(event)\n      // Show toast notification when an event is updated\n      toast(`Event \"${event.title}\" updated`, {\n        description: format(new Date(event.start), \"MMM d, yyyy\"),\n        position: \"bottom-left\",\n      })\n    } else {\n      onEventAdd?.({\n        ...event,\n        id: Math.random().toString(36).substring(2, 11),\n      })\n      // Show toast notification when an event is added\n      toast(`Event \"${event.title}\" added`, {\n        description: format(new Date(event.start), \"MMM d, yyyy\"),\n        position: \"bottom-left\",\n      })\n    }\n    setIsEventDialogOpen(false)\n    setSelectedEvent(null)\n  }\n\n  const handleEventDelete = (eventId: string) => {\n    const deletedEvent = events.find((e) => e.id === eventId)\n    onEventDelete?.(eventId)\n    setIsEventDialogOpen(false)\n    setSelectedEvent(null)\n\n    // Show toast notification when an event is deleted\n    if (deletedEvent) {\n      toast(`Event \"${deletedEvent.title}\" deleted`, {\n        description: format(new Date(deletedEvent.start), \"MMM d, yyyy\"),\n        position: \"bottom-left\",\n      })\n    }\n  }\n\n  const handleEventUpdate = (updatedEvent: CalendarEvent) => {\n    onEventUpdate?.(updatedEvent)\n\n    // Show toast notification when an event is updated via drag and drop\n    toast(`Event \"${updatedEvent.title}\" moved`, {\n      description: format(new Date(updatedEvent.start), \"MMM d, yyyy\"),\n      position: \"bottom-left\",\n    })\n  }\n\n  const viewTitle = useMemo(() => {\n    if (view === \"month\") {\n      return format(currentDate, \"MMMM yyyy\")\n    } else if (view === \"week\") {\n      const start = startOfWeek(currentDate, { weekStartsOn: 0 })\n      const end = endOfWeek(currentDate, { weekStartsOn: 0 })\n      if (isSameMonth(start, end)) {\n        return format(start, \"MMMM yyyy\")\n      } else {\n        return `${format(start, \"MMM\")} - ${format(end, \"MMM yyyy\")}`\n      }\n    } else if (view === \"day\") {\n      return (\n        <>\n          <span className=\"min-[480px]:hidden\" aria-hidden=\"true\">\n            {format(currentDate, \"MMM d, yyyy\")}\n          </span>\n          <span className=\"max-[479px]:hidden min-md:hidden\" aria-hidden=\"true\">\n            {format(currentDate, \"MMMM d, yyyy\")}\n          </span>\n          <span className=\"max-md:hidden\">\n            {format(currentDate, \"EEE MMMM d, yyyy\")}\n          </span>\n        </>\n      )\n    } else if (view === \"agenda\") {\n      // Show the month range for agenda view\n      const start = currentDate\n      const end = addDays(currentDate, AgendaDaysToShow - 1)\n\n      if (isSameMonth(start, end)) {\n        return format(start, \"MMMM yyyy\")\n      } else {\n        return `${format(start, \"MMM\")} - ${format(end, \"MMM yyyy\")}`\n      }\n    } else {\n      return format(currentDate, \"MMMM yyyy\")\n    }\n  }, [currentDate, view])\n\n  return (\n    <div\n      className=\"flex flex-col rounded-lg border has-data-[slot=month-view]:flex-1\"\n      style={\n        {\n          \"--event-height\": `${EventHeight}px`,\n          \"--event-gap\": `${EventGap}px`,\n          \"--week-cells-height\": `${WeekCellsHeight}px`,\n        } as React.CSSProperties\n      }\n    >\n      <CalendarDndProvider onEventUpdate={handleEventUpdate}>\n        <div\n          className={cn(\n            \"flex items-center justify-between p-2 sm:p-4\",\n            className\n          )}\n        >\n          <div className=\"flex items-center gap-1 sm:gap-4\">\n            <Button\n              variant=\"outline\"\n              className=\"max-[479px]:aspect-square max-[479px]:p-0!\"\n              onClick={handleToday}\n            >\n              <RiCalendarCheckLine\n                className=\"min-[480px]:hidden\"\n                size={16}\n                aria-hidden=\"true\"\n              />\n              <span className=\"max-[479px]:sr-only\">Today</span>\n            </Button>\n            <div className=\"flex items-center sm:gap-2\">\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                onClick={handlePrevious}\n                aria-label=\"Previous\"\n              >\n                <ChevronLeftIcon size={16} aria-hidden=\"true\" />\n              </Button>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                onClick={handleNext}\n                aria-label=\"Next\"\n              >\n                <ChevronRightIcon size={16} aria-hidden=\"true\" />\n              </Button>\n            </div>\n            <h2 className=\"text-sm font-semibold sm:text-lg md:text-xl\">\n              {viewTitle}\n            </h2>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"outline\" className=\"gap-1.5 max-[479px]:h-8\">\n                  <span>\n                    <span className=\"min-[480px]:hidden\" aria-hidden=\"true\">\n                      {view.charAt(0).toUpperCase()}\n                    </span>\n                    <span className=\"max-[479px]:sr-only\">\n                      {view.charAt(0).toUpperCase() + view.slice(1)}\n                    </span>\n                  </span>\n                  <ChevronDownIcon\n                    className=\"-me-1 opacity-60\"\n                    size={16}\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"min-w-32\">\n                <DropdownMenuItem onClick={() => setView(\"month\")}>\n                  Month <DropdownMenuShortcut>M</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={() => setView(\"week\")}>\n                  Week <DropdownMenuShortcut>W</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={() => setView(\"day\")}>\n                  Day <DropdownMenuShortcut>D</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={() => setView(\"agenda\")}>\n                  Agenda <DropdownMenuShortcut>A</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Button\n              className=\"max-[479px]:aspect-square max-[479px]:p-0!\"\n              size=\"sm\"\n              onClick={() => {\n                setSelectedEvent(null) // Ensure we're creating a new event\n                setIsEventDialogOpen(true)\n              }}\n            >\n              <PlusIcon\n                className=\"opacity-60 sm:-ms-1\"\n                size={16}\n                aria-hidden=\"true\"\n              />\n              <span className=\"max-sm:sr-only\">New event</span>\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"flex flex-1 flex-col\">\n          {view === \"month\" && (\n            <MonthView\n              currentDate={currentDate}\n              events={events}\n              onEventSelect={handleEventSelect}\n              onEventCreate={handleEventCreate}\n            />\n          )}\n          {view === \"week\" && (\n            <WeekView\n              currentDate={currentDate}\n              events={events}\n              onEventSelect={handleEventSelect}\n              onEventCreate={handleEventCreate}\n            />\n          )}\n          {view === \"day\" && (\n            <DayView\n              currentDate={currentDate}\n              events={events}\n              onEventSelect={handleEventSelect}\n              onEventCreate={handleEventCreate}\n            />\n          )}\n          {view === \"agenda\" && (\n            <AgendaView\n              currentDate={currentDate}\n              events={events}\n              onEventSelect={handleEventSelect}\n            />\n          )}\n        </div>\n\n        <EventDialog\n          event={selectedEvent}\n          isOpen={isEventDialogOpen}\n          onClose={() => {\n            setIsEventDialogOpen(false)\n            setSelectedEvent(null)\n          }}\n          onSave={handleEventSave}\n          onDelete={handleEventDelete}\n        />\n      </CalendarDndProvider>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/index.ts",
+      "content": "\"use client\"\n\n// Component exports\nexport { AgendaView } from \"./agenda-view\"\nexport { DayView } from \"./day-view\"\nexport { DraggableEvent } from \"./draggable-event\"\nexport { DroppableCell } from \"./droppable-cell\"\nexport { EventDialog } from \"./event-dialog\"\nexport { EventItem } from \"./event-item\"\nexport { EventsPopup } from \"./events-popup\"\nexport { EventCalendar } from \"./event-calendar\"\nexport { MonthView } from \"./month-view\"\nexport { WeekView } from \"./week-view\"\nexport { CalendarDndProvider, useCalendarDnd } from \"./calendar-dnd-context\"\n\n// Constants and utility exports\nexport * from \"./constants\"\nexport * from \"./utils\"\n\n// Hook exports\nexport * from \"./hooks/use-current-time-indicator\"\nexport * from \"./hooks/use-event-visibility\"\n\n// Type exports\nexport type { CalendarEvent, CalendarView, EventColor } from \"./types\"\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/month-view.tsx",
+      "content": "\"use client\"\n\nimport React, { useEffect, useMemo, useState } from \"react\"\nimport {\n  addDays,\n  eachDayOfInterval,\n  endOfMonth,\n  endOfWeek,\n  format,\n  isSameDay,\n  isSameMonth,\n  isToday,\n  startOfMonth,\n  startOfWeek,\n} from \"date-fns\"\n\nimport {\n  DraggableEvent,\n  DroppableCell,\n  EventGap,\n  EventHeight,\n  EventItem,\n  getAllEventsForDay,\n  getEventsForDay,\n  getSpanningEventsForDay,\n  sortEvents,\n  useEventVisibility,\n  type CalendarEvent,\n} from \"@/registry/building-blocks/default/components/event-calendar\"\nimport { DefaultStartHour } from \"@/registry/building-blocks/default/components/event-calendar/constants\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\ninterface MonthViewProps {\n  currentDate: Date\n  events: CalendarEvent[]\n  onEventSelect: (event: CalendarEvent) => void\n  onEventCreate: (startTime: Date) => void\n}\n\nexport function MonthView({\n  currentDate,\n  events,\n  onEventSelect,\n  onEventCreate,\n}: MonthViewProps) {\n  const days = useMemo(() => {\n    const monthStart = startOfMonth(currentDate)\n    const monthEnd = endOfMonth(monthStart)\n    const calendarStart = startOfWeek(monthStart, { weekStartsOn: 0 })\n    const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 0 })\n\n    return eachDayOfInterval({ start: calendarStart, end: calendarEnd })\n  }, [currentDate])\n\n  const weekdays = useMemo(() => {\n    return Array.from({ length: 7 }).map((_, i) => {\n      const date = addDays(startOfWeek(new Date()), i)\n      return format(date, \"EEE\")\n    })\n  }, [])\n\n  const weeks = useMemo(() => {\n    const result = []\n    let week = []\n\n    for (let i = 0; i < days.length; i++) {\n      week.push(days[i])\n      if (week.length === 7 || i === days.length - 1) {\n        result.push(week)\n        week = []\n      }\n    }\n\n    return result\n  }, [days])\n\n  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {\n    e.stopPropagation()\n    onEventSelect(event)\n  }\n\n  const [isMounted, setIsMounted] = useState(false)\n  const { contentRef, getVisibleEventCount } = useEventVisibility({\n    eventHeight: EventHeight,\n    eventGap: EventGap,\n  })\n\n  useEffect(() => {\n    setIsMounted(true)\n  }, [])\n\n  return (\n    <div data-slot=\"month-view\" className=\"contents\">\n      <div className=\"grid grid-cols-7 border-b border-border/70\">\n        {weekdays.map((day) => (\n          <div\n            key={day}\n            className=\"py-2 text-center text-sm text-muted-foreground/70\"\n          >\n            {day}\n          </div>\n        ))}\n      </div>\n      <div className=\"grid flex-1 auto-rows-fr\">\n        {weeks.map((week, weekIndex) => (\n          <div\n            key={`week-${weekIndex}`}\n            className=\"grid grid-cols-7 [&:last-child>*]:border-b-0\"\n          >\n            {week.map((day, dayIndex) => {\n              if (!day) return null // Skip if day is undefined\n\n              const dayEvents = getEventsForDay(events, day)\n              const spanningEvents = getSpanningEventsForDay(events, day)\n              const isCurrentMonth = isSameMonth(day, currentDate)\n              const cellId = `month-cell-${day.toISOString()}`\n              const allDayEvents = [...spanningEvents, ...dayEvents]\n              const allEvents = getAllEventsForDay(events, day)\n\n              const isReferenceCell = weekIndex === 0 && dayIndex === 0\n              const visibleCount = isMounted\n                ? getVisibleEventCount(allDayEvents.length)\n                : undefined\n              const hasMore =\n                visibleCount !== undefined && allDayEvents.length > visibleCount\n              const remainingCount = hasMore\n                ? allDayEvents.length - visibleCount\n                : 0\n\n              return (\n                <div\n                  key={day.toString()}\n                  className=\"group border-r border-b border-border/70 last:border-r-0 data-outside-cell:bg-muted/25 data-outside-cell:text-muted-foreground/70\"\n                  data-today={isToday(day) || undefined}\n                  data-outside-cell={!isCurrentMonth || undefined}\n                >\n                  <DroppableCell\n                    id={cellId}\n                    date={day}\n                    onClick={() => {\n                      const startTime = new Date(day)\n                      startTime.setHours(DefaultStartHour, 0, 0)\n                      onEventCreate(startTime)\n                    }}\n                  >\n                    <div className=\"mt-1 inline-flex size-6 items-center justify-center rounded-full text-sm group-data-today:bg-primary group-data-today:text-primary-foreground\">\n                      {format(day, \"d\")}\n                    </div>\n                    <div\n                      ref={isReferenceCell ? contentRef : null}\n                      className=\"min-h-[calc((var(--event-height)+var(--event-gap))*2)] sm:min-h-[calc((var(--event-height)+var(--event-gap))*3)] lg:min-h-[calc((var(--event-height)+var(--event-gap))*4)]\"\n                    >\n                      {sortEvents(allDayEvents).map((event, index) => {\n                        const eventStart = new Date(event.start)\n                        const eventEnd = new Date(event.end)\n                        const isFirstDay = isSameDay(day, eventStart)\n                        const isLastDay = isSameDay(day, eventEnd)\n\n                        const isHidden =\n                          isMounted && visibleCount && index >= visibleCount\n\n                        if (!visibleCount) return null\n\n                        if (!isFirstDay) {\n                          return (\n                            <div\n                              key={`spanning-${event.id}-${day.toISOString().slice(0, 10)}`}\n                              className=\"aria-hidden:hidden\"\n                              aria-hidden={isHidden ? \"true\" : undefined}\n                            >\n                              <EventItem\n                                onClick={(e) => handleEventClick(event, e)}\n                                event={event}\n                                view=\"month\"\n                                isFirstDay={isFirstDay}\n                                isLastDay={isLastDay}\n                              >\n                                <div className=\"invisible\" aria-hidden={true}>\n                                  {!event.allDay && (\n                                    <span>\n                                      {format(\n                                        new Date(event.start),\n                                        \"h:mm\"\n                                      )}{\" \"}\n                                    </span>\n                                  )}\n                                  {event.title}\n                                </div>\n                              </EventItem>\n                            </div>\n                          )\n                        }\n\n                        return (\n                          <div\n                            key={event.id}\n                            className=\"aria-hidden:hidden\"\n                            aria-hidden={isHidden ? \"true\" : undefined}\n                          >\n                            <DraggableEvent\n                              event={event}\n                              view=\"month\"\n                              onClick={(e) => handleEventClick(event, e)}\n                              isFirstDay={isFirstDay}\n                              isLastDay={isLastDay}\n                            />\n                          </div>\n                        )\n                      })}\n\n                      {hasMore && (\n                        <Popover modal>\n                          <PopoverTrigger asChild>\n                            <button\n                              className=\"mt-[var(--event-gap)] flex h-[var(--event-height)] w-full items-center overflow-hidden px-1 text-left text-[10px] text-muted-foreground backdrop-blur-md transition outline-none select-none hover:bg-muted/50 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 sm:px-2 sm:text-xs\"\n                              onClick={(e) => e.stopPropagation()}\n                            >\n                              <span>\n                                + {remainingCount}{\" \"}\n                                <span className=\"max-sm:sr-only\">more</span>\n                              </span>\n                            </button>\n                          </PopoverTrigger>\n                          <PopoverContent\n                            align=\"center\"\n                            className=\"max-w-52 p-3\"\n                            style={\n                              {\n                                \"--event-height\": `${EventHeight}px`,\n                              } as React.CSSProperties\n                            }\n                          >\n                            <div className=\"space-y-2\">\n                              <div className=\"text-sm font-medium\">\n                                {format(day, \"EEE d\")}\n                              </div>\n                              <div className=\"space-y-1\">\n                                {sortEvents(allEvents).map((event) => {\n                                  const eventStart = new Date(event.start)\n                                  const eventEnd = new Date(event.end)\n                                  const isFirstDay = isSameDay(day, eventStart)\n                                  const isLastDay = isSameDay(day, eventEnd)\n\n                                  return (\n                                    <EventItem\n                                      key={event.id}\n                                      onClick={(e) =>\n                                        handleEventClick(event, e)\n                                      }\n                                      event={event}\n                                      view=\"month\"\n                                      isFirstDay={isFirstDay}\n                                      isLastDay={isLastDay}\n                                    />\n                                  )\n                                })}\n                              </div>\n                            </div>\n                          </PopoverContent>\n                        </Popover>\n                      )}\n                    </div>\n                  </DroppableCell>\n                </div>\n              )\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/types.ts",
+      "content": "export type CalendarView = \"month\" | \"week\" | \"day\" | \"agenda\"\n\nexport interface CalendarEvent {\n  id: string\n  title: string\n  description?: string\n  start: Date\n  end: Date\n  allDay?: boolean\n  color?: EventColor\n  location?: string\n}\n\nexport type EventColor =\n  | \"sky\"\n  | \"amber\"\n  | \"violet\"\n  | \"rose\"\n  | \"emerald\"\n  | \"orange\"\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/utils.ts",
+      "content": "import { isSameDay } from \"date-fns\"\n\nimport type {\n  CalendarEvent,\n  EventColor,\n} from \"@/registry/default/components/event-calendar\"\n\n/**\n * Get CSS classes for event colors\n */\nexport function getEventColorClasses(color?: EventColor | string): string {\n  const eventColor = color || \"sky\"\n\n  switch (eventColor) {\n    case \"sky\":\n      return \"bg-sky-200/50 hover:bg-sky-200/40 text-sky-950/80 dark:bg-sky-400/25 dark:hover:bg-sky-400/20 dark:text-sky-200 shadow-sky-700/8\"\n    case \"amber\":\n      return \"bg-amber-200/50 hover:bg-amber-200/40 text-amber-950/80 dark:bg-amber-400/25 dark:hover:bg-amber-400/20 dark:text-amber-200 shadow-amber-700/8\"\n    case \"violet\":\n      return \"bg-violet-200/50 hover:bg-violet-200/40 text-violet-950/80 dark:bg-violet-400/25 dark:hover:bg-violet-400/20 dark:text-violet-200 shadow-violet-700/8\"\n    case \"rose\":\n      return \"bg-rose-200/50 hover:bg-rose-200/40 text-rose-950/80 dark:bg-rose-400/25 dark:hover:bg-rose-400/20 dark:text-rose-200 shadow-rose-700/8\"\n    case \"emerald\":\n      return \"bg-emerald-200/50 hover:bg-emerald-200/40 text-emerald-950/80 dark:bg-emerald-400/25 dark:hover:bg-emerald-400/20 dark:text-emerald-200 shadow-emerald-700/8\"\n    case \"orange\":\n      return \"bg-orange-200/50 hover:bg-orange-200/40 text-orange-950/80 dark:bg-orange-400/25 dark:hover:bg-orange-400/20 dark:text-orange-200 shadow-orange-700/8\"\n    default:\n      return \"bg-sky-200/50 hover:bg-sky-200/40 text-sky-950/80 dark:bg-sky-400/25 dark:hover:bg-sky-400/20 dark:text-sky-200 shadow-sky-700/8\"\n  }\n}\n\n/**\n * Get CSS classes for border radius based on event position in multi-day events\n */\nexport function getBorderRadiusClasses(\n  isFirstDay: boolean,\n  isLastDay: boolean\n): string {\n  if (isFirstDay && isLastDay) {\n    return \"rounded\" // Both ends rounded\n  } else if (isFirstDay) {\n    return \"rounded-l rounded-r-none\" // Only left end rounded\n  } else if (isLastDay) {\n    return \"rounded-r rounded-l-none\" // Only right end rounded\n  } else {\n    return \"rounded-none\" // No rounded corners\n  }\n}\n\n/**\n * Check if an event is a multi-day event\n */\nexport function isMultiDayEvent(event: CalendarEvent): boolean {\n  const eventStart = new Date(event.start)\n  const eventEnd = new Date(event.end)\n  return event.allDay || eventStart.getDate() !== eventEnd.getDate()\n}\n\n/**\n * Filter events for a specific day\n */\nexport function getEventsForDay(\n  events: CalendarEvent[],\n  day: Date\n): CalendarEvent[] {\n  return events\n    .filter((event) => {\n      const eventStart = new Date(event.start)\n      return isSameDay(day, eventStart)\n    })\n    .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime())\n}\n\n/**\n * Sort events with multi-day events first, then by start time\n */\nexport function sortEvents(events: CalendarEvent[]): CalendarEvent[] {\n  return [...events].sort((a, b) => {\n    const aIsMultiDay = isMultiDayEvent(a)\n    const bIsMultiDay = isMultiDayEvent(b)\n\n    if (aIsMultiDay && !bIsMultiDay) return -1\n    if (!aIsMultiDay && bIsMultiDay) return 1\n\n    return new Date(a.start).getTime() - new Date(b.start).getTime()\n  })\n}\n\n/**\n * Get multi-day events that span across a specific day (but don't start on that day)\n */\nexport function getSpanningEventsForDay(\n  events: CalendarEvent[],\n  day: Date\n): CalendarEvent[] {\n  return events.filter((event) => {\n    if (!isMultiDayEvent(event)) return false\n\n    const eventStart = new Date(event.start)\n    const eventEnd = new Date(event.end)\n\n    // Only include if it's not the start day but is either the end day or a middle day\n    return (\n      !isSameDay(day, eventStart) &&\n      (isSameDay(day, eventEnd) || (day > eventStart && day < eventEnd))\n    )\n  })\n}\n\n/**\n * Get all events visible on a specific day (starting, ending, or spanning)\n */\nexport function getAllEventsForDay(\n  events: CalendarEvent[],\n  day: Date\n): CalendarEvent[] {\n  return events.filter((event) => {\n    const eventStart = new Date(event.start)\n    const eventEnd = new Date(event.end)\n    return (\n      isSameDay(day, eventStart) ||\n      isSameDay(day, eventEnd) ||\n      (day > eventStart && day < eventEnd)\n    )\n  })\n}\n\n/**\n * Get all events for a day (for agenda view)\n */\nexport function getAgendaEventsForDay(\n  events: CalendarEvent[],\n  day: Date\n): CalendarEvent[] {\n  return events\n    .filter((event) => {\n      const eventStart = new Date(event.start)\n      const eventEnd = new Date(event.end)\n      return (\n        isSameDay(day, eventStart) ||\n        isSameDay(day, eventEnd) ||\n        (day > eventStart && day < eventEnd)\n      )\n    })\n    .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime())\n}\n\n/**\n * Add hours to a date\n */\nexport function addHoursToDate(date: Date, hours: number): Date {\n  const result = new Date(date)\n  result.setHours(result.getHours() + hours)\n  return result\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/week-view.tsx",
+      "content": "\"use client\"\n\nimport React, { useMemo } from \"react\"\nimport {\n  addHours,\n  areIntervalsOverlapping,\n  differenceInMinutes,\n  eachDayOfInterval,\n  eachHourOfInterval,\n  endOfWeek,\n  format,\n  getHours,\n  getMinutes,\n  isBefore,\n  isSameDay,\n  isToday,\n  startOfDay,\n  startOfWeek,\n} from \"date-fns\"\n\nimport {\n  DraggableEvent,\n  DroppableCell,\n  EventItem,\n  isMultiDayEvent,\n  useCurrentTimeIndicator,\n  WeekCellsHeight,\n  type CalendarEvent,\n} from \"@/registry/building-blocks/default/components/event-calendar\"\nimport {\n  EndHour,\n  StartHour,\n} from \"@/registry/building-blocks/default/components/event-calendar/constants\"\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\n\ninterface WeekViewProps {\n  currentDate: Date\n  events: CalendarEvent[]\n  onEventSelect: (event: CalendarEvent) => void\n  onEventCreate: (startTime: Date) => void\n}\n\ninterface PositionedEvent {\n  event: CalendarEvent\n  top: number\n  height: number\n  left: number\n  width: number\n  zIndex: number\n}\n\nexport function WeekView({\n  currentDate,\n  events,\n  onEventSelect,\n  onEventCreate,\n}: WeekViewProps) {\n  const days = useMemo(() => {\n    const weekStart = startOfWeek(currentDate, { weekStartsOn: 0 })\n    const weekEnd = endOfWeek(currentDate, { weekStartsOn: 0 })\n    return eachDayOfInterval({ start: weekStart, end: weekEnd })\n  }, [currentDate])\n\n  const weekStart = useMemo(\n    () => startOfWeek(currentDate, { weekStartsOn: 0 }),\n    [currentDate]\n  )\n\n  const hours = useMemo(() => {\n    const dayStart = startOfDay(currentDate)\n    return eachHourOfInterval({\n      start: addHours(dayStart, StartHour),\n      end: addHours(dayStart, EndHour - 1),\n    })\n  }, [currentDate])\n\n  // Get all-day events and multi-day events for the week\n  const allDayEvents = useMemo(() => {\n    return events\n      .filter((event) => {\n        // Include explicitly marked all-day events or multi-day events\n        return event.allDay || isMultiDayEvent(event)\n      })\n      .filter((event) => {\n        const eventStart = new Date(event.start)\n        const eventEnd = new Date(event.end)\n        return days.some(\n          (day) =>\n            isSameDay(day, eventStart) ||\n            isSameDay(day, eventEnd) ||\n            (day > eventStart && day < eventEnd)\n        )\n      })\n  }, [events, days])\n\n  // Process events for each day to calculate positions\n  const processedDayEvents = useMemo(() => {\n    const result = days.map((day) => {\n      // Get events for this day that are not all-day events or multi-day events\n      const dayEvents = events.filter((event) => {\n        // Skip all-day events and multi-day events\n        if (event.allDay || isMultiDayEvent(event)) return false\n\n        const eventStart = new Date(event.start)\n        const eventEnd = new Date(event.end)\n\n        // Check if event is on this day\n        return (\n          isSameDay(day, eventStart) ||\n          isSameDay(day, eventEnd) ||\n          (eventStart < day && eventEnd > day)\n        )\n      })\n\n      // Sort events by start time and duration\n      const sortedEvents = [...dayEvents].sort((a, b) => {\n        const aStart = new Date(a.start)\n        const bStart = new Date(b.start)\n        const aEnd = new Date(a.end)\n        const bEnd = new Date(b.end)\n\n        // First sort by start time\n        if (aStart < bStart) return -1\n        if (aStart > bStart) return 1\n\n        // If start times are equal, sort by duration (longer events first)\n        const aDuration = differenceInMinutes(aEnd, aStart)\n        const bDuration = differenceInMinutes(bEnd, bStart)\n        return bDuration - aDuration\n      })\n\n      // Calculate positions for each event\n      const positionedEvents: PositionedEvent[] = []\n      const dayStart = startOfDay(day)\n\n      // Track columns for overlapping events\n      const columns: { event: CalendarEvent; end: Date }[][] = []\n\n      sortedEvents.forEach((event) => {\n        const eventStart = new Date(event.start)\n        const eventEnd = new Date(event.end)\n\n        // Adjust start and end times if they're outside this day\n        const adjustedStart = isSameDay(day, eventStart) ? eventStart : dayStart\n        const adjustedEnd = isSameDay(day, eventEnd)\n          ? eventEnd\n          : addHours(dayStart, 24)\n\n        // Calculate top position and height\n        const startHour =\n          getHours(adjustedStart) + getMinutes(adjustedStart) / 60\n        const endHour = getHours(adjustedEnd) + getMinutes(adjustedEnd) / 60\n\n        // Adjust the top calculation to account for the new start time\n        const top = (startHour - StartHour) * WeekCellsHeight\n        const height = (endHour - startHour) * WeekCellsHeight\n\n        // Find a column for this event\n        let columnIndex = 0\n        let placed = false\n\n        while (!placed) {\n          const col = columns[columnIndex] || []\n          if (col.length === 0) {\n            columns[columnIndex] = col\n            placed = true\n          } else {\n            const overlaps = col.some((c) =>\n              areIntervalsOverlapping(\n                { start: adjustedStart, end: adjustedEnd },\n                {\n                  start: new Date(c.event.start),\n                  end: new Date(c.event.end),\n                }\n              )\n            )\n            if (!overlaps) {\n              placed = true\n            } else {\n              columnIndex++\n            }\n          }\n        }\n\n        // Ensure column is initialized before pushing\n        const currentColumn = columns[columnIndex] || []\n        columns[columnIndex] = currentColumn\n        currentColumn.push({ event, end: adjustedEnd })\n\n        // Calculate width and left position based on number of columns\n        const width = columnIndex === 0 ? 1 : 0.9\n        const left = columnIndex === 0 ? 0 : columnIndex * 0.1\n\n        positionedEvents.push({\n          event,\n          top,\n          height,\n          left,\n          width,\n          zIndex: 10 + columnIndex, // Higher columns get higher z-index\n        })\n      })\n\n      return positionedEvents\n    })\n\n    return result\n  }, [days, events])\n\n  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {\n    e.stopPropagation()\n    onEventSelect(event)\n  }\n\n  const showAllDaySection = allDayEvents.length > 0\n  const { currentTimePosition, currentTimeVisible } = useCurrentTimeIndicator(\n    currentDate,\n    \"week\"\n  )\n\n  return (\n    <div data-slot=\"week-view\" className=\"flex h-full flex-col\">\n      <div className=\"sticky top-0 z-30 grid grid-cols-8 border-b border-border/70 bg-background/80 backdrop-blur-md\">\n        <div className=\"py-2 text-center text-sm text-muted-foreground/70\">\n          <span className=\"max-[479px]:sr-only\">{format(new Date(), \"O\")}</span>\n        </div>\n        {days.map((day) => (\n          <div\n            key={day.toString()}\n            className=\"py-2 text-center text-sm text-muted-foreground/70 data-today:font-medium data-today:text-foreground\"\n            data-today={isToday(day) || undefined}\n          >\n            <span className=\"sm:hidden\" aria-hidden=\"true\">\n              {format(day, \"E\")[0]} {format(day, \"d\")}\n            </span>\n            <span className=\"max-sm:hidden\">{format(day, \"EEE dd\")}</span>\n          </div>\n        ))}\n      </div>\n\n      {showAllDaySection && (\n        <div className=\"border-b border-border/70 bg-muted/50\">\n          <div className=\"grid grid-cols-8\">\n            <div className=\"relative border-r border-border/70\">\n              <span className=\"absolute bottom-0 left-0 h-6 w-16 max-w-full pe-2 text-right text-[10px] text-muted-foreground/70 sm:pe-4 sm:text-xs\">\n                All day\n              </span>\n            </div>\n            {days.map((day, dayIndex) => {\n              const dayAllDayEvents = allDayEvents.filter((event) => {\n                const eventStart = new Date(event.start)\n                const eventEnd = new Date(event.end)\n                return (\n                  isSameDay(day, eventStart) ||\n                  (day > eventStart && day < eventEnd) ||\n                  isSameDay(day, eventEnd)\n                )\n              })\n\n              return (\n                <div\n                  key={day.toString()}\n                  className=\"relative border-r border-border/70 p-1 last:border-r-0\"\n                  data-today={isToday(day) || undefined}\n                >\n                  {dayAllDayEvents.map((event) => {\n                    const eventStart = new Date(event.start)\n                    const eventEnd = new Date(event.end)\n                    const isFirstDay = isSameDay(day, eventStart)\n                    const isLastDay = isSameDay(day, eventEnd)\n\n                    // Check if this is the first day in the current week view\n                    const isFirstVisibleDay =\n                      dayIndex === 0 && isBefore(eventStart, weekStart)\n                    const shouldShowTitle = isFirstDay || isFirstVisibleDay\n\n                    return (\n                      <EventItem\n                        key={`spanning-${event.id}`}\n                        onClick={(e) => handleEventClick(event, e)}\n                        event={event}\n                        view=\"month\"\n                        isFirstDay={isFirstDay}\n                        isLastDay={isLastDay}\n                      >\n                        {/* Show title if it's the first day of the event or the first visible day in the week */}\n                        <div\n                          className={cn(\n                            \"truncate\",\n                            !shouldShowTitle && \"invisible\"\n                          )}\n                          aria-hidden={!shouldShowTitle}\n                        >\n                          {event.title}\n                        </div>\n                      </EventItem>\n                    )\n                  })}\n                </div>\n              )\n            })}\n          </div>\n        </div>\n      )}\n\n      <div className=\"grid flex-1 grid-cols-8 overflow-hidden\">\n        <div className=\"grid auto-cols-fr border-r border-border/70\">\n          {hours.map((hour, index) => (\n            <div\n              key={hour.toString()}\n              className=\"relative min-h-[var(--week-cells-height)] border-b border-border/70 last:border-b-0\"\n            >\n              {index > 0 && (\n                <span className=\"absolute -top-3 left-0 flex h-6 w-16 max-w-full items-center justify-end bg-background pe-2 text-[10px] text-muted-foreground/70 sm:pe-4 sm:text-xs\">\n                  {format(hour, \"h a\")}\n                </span>\n              )}\n            </div>\n          ))}\n        </div>\n\n        {days.map((day, dayIndex) => (\n          <div\n            key={day.toString()}\n            className=\"relative grid auto-cols-fr border-r border-border/70 last:border-r-0\"\n            data-today={isToday(day) || undefined}\n          >\n            {/* Positioned events */}\n            {(processedDayEvents[dayIndex] ?? []).map((positionedEvent) => (\n              <div\n                key={positionedEvent.event.id}\n                className=\"absolute z-10 px-0.5\"\n                style={{\n                  top: `${positionedEvent.top}px`,\n                  height: `${positionedEvent.height}px`,\n                  left: `${positionedEvent.left * 100}%`,\n                  width: `${positionedEvent.width * 100}%`,\n                  zIndex: positionedEvent.zIndex,\n                }}\n                onClick={(e) => e.stopPropagation()}\n              >\n                <div className=\"size-full\">\n                  <DraggableEvent\n                    event={positionedEvent.event}\n                    view=\"week\"\n                    onClick={(e) => handleEventClick(positionedEvent.event, e)}\n                    showTime\n                    height={positionedEvent.height}\n                  />\n                </div>\n              </div>\n            ))}\n\n            {/* Current time indicator - only show for today's column */}\n            {currentTimeVisible && isToday(day) && (\n              <div\n                className=\"pointer-events-none absolute right-0 left-0 z-20\"\n                style={{ top: `${currentTimePosition}%` }}\n              >\n                <div className=\"relative flex items-center\">\n                  <div className=\"absolute -left-1 h-2 w-2 rounded-full bg-primary\"></div>\n                  <div className=\"h-[2px] w-full bg-primary\"></div>\n                </div>\n              </div>\n            )}\n            {hours.map((hour) => {\n              const hourValue = getHours(hour)\n              return (\n                <div\n                  key={hour.toString()}\n                  className=\"relative min-h-[var(--week-cells-height)] border-b border-border/70 last:border-b-0\"\n                >\n                  {/* Quarter-hour intervals */}\n                  {[0, 1, 2, 3].map((quarter) => {\n                    const quarterHourTime = hourValue + quarter * 0.25\n                    return (\n                      <DroppableCell\n                        key={`${hour.toString()}-${quarter}`}\n                        id={`week-cell-${day.toISOString()}-${quarterHourTime}`}\n                        date={day}\n                        time={quarterHourTime}\n                        className={cn(\n                          \"absolute h-[calc(var(--week-cells-height)/4)] w-full\",\n                          quarter === 0 && \"top-0\",\n                          quarter === 1 &&\n                            \"top-[calc(var(--week-cells-height)/4)]\",\n                          quarter === 2 &&\n                            \"top-[calc(var(--week-cells-height)/4*2)]\",\n                          quarter === 3 &&\n                            \"top-[calc(var(--week-cells-height)/4*3)]\"\n                        )}\n                        onClick={() => {\n                          const startTime = new Date(day)\n                          startTime.setHours(hourValue)\n                          startTime.setMinutes(quarter * 15)\n                          onEventCreate(startTime)\n                        }}\n                      />\n                    )\n                  })}\n                </div>\n              )\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/hooks/use-current-time-indicator.ts",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { endOfWeek, isSameDay, isWithinInterval, startOfWeek } from \"date-fns\"\n\nimport {\n  EndHour,\n  StartHour,\n} from \"@/registry/default/components/event-calendar/constants\"\n\nexport function useCurrentTimeIndicator(\n  currentDate: Date,\n  view: \"day\" | \"week\"\n) {\n  const [currentTimePosition, setCurrentTimePosition] = useState<number>(0)\n  const [currentTimeVisible, setCurrentTimeVisible] = useState<boolean>(false)\n\n  useEffect(() => {\n    const calculateTimePosition = () => {\n      const now = new Date()\n      const hours = now.getHours()\n      const minutes = now.getMinutes()\n      const totalMinutes = (hours - StartHour) * 60 + minutes\n      const dayStartMinutes = 0 // 12am\n      const dayEndMinutes = (EndHour - StartHour) * 60 // 12am next day\n\n      // Calculate position as percentage of day\n      const position =\n        ((totalMinutes - dayStartMinutes) / (dayEndMinutes - dayStartMinutes)) *\n        100\n\n      // Check if current day is in view based on the calendar view\n      let isCurrentTimeVisible = false\n\n      if (view === \"day\") {\n        isCurrentTimeVisible = isSameDay(now, currentDate)\n      } else if (view === \"week\") {\n        const startOfWeekDate = startOfWeek(currentDate, { weekStartsOn: 0 })\n        const endOfWeekDate = endOfWeek(currentDate, { weekStartsOn: 0 })\n        isCurrentTimeVisible = isWithinInterval(now, {\n          start: startOfWeekDate,\n          end: endOfWeekDate,\n        })\n      }\n\n      setCurrentTimePosition(position)\n      setCurrentTimeVisible(isCurrentTimeVisible)\n    }\n\n    // Calculate immediately\n    calculateTimePosition()\n\n    // Update every minute\n    const interval = setInterval(calculateTimePosition, 60000)\n\n    return () => clearInterval(interval)\n  }, [currentDate, view])\n\n  return { currentTimePosition, currentTimeVisible }\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/event-calendar/hooks/use-event-visibility.ts",
+      "content": "\"use client\"\n\nimport { useLayoutEffect, useMemo, useRef, useState } from \"react\"\n\ninterface EventVisibilityOptions {\n  eventHeight: number\n  eventGap: number\n}\n\ninterface EventVisibilityResult {\n  contentRef: React.RefObject<HTMLDivElement>\n  contentHeight: number | null\n  getVisibleEventCount: (totalEvents: number) => number\n}\n\n/**\n * Hook for calculating event visibility based on container height\n * Uses ResizeObserver for efficient updates\n */\nexport function useEventVisibility({\n  eventHeight,\n  eventGap,\n}: EventVisibilityOptions): EventVisibilityResult {\n  // Use the standard pattern for React refs\n  const contentRef = useRef<HTMLDivElement>(null)\n  const observerRef = useRef<ResizeObserver | null>(null)\n  const [contentHeight, setContentHeight] = useState<number | null>(null)\n\n  // Use layout effect for synchronous measurement before paint\n  useLayoutEffect(() => {\n    if (!contentRef.current) return\n\n    // Function to update the content height\n    const updateHeight = () => {\n      if (contentRef.current) {\n        setContentHeight(contentRef.current.clientHeight)\n      }\n    }\n\n    // Initial measurement (synchronous)\n    updateHeight()\n\n    // Create observer only once and reuse it\n    if (!observerRef.current) {\n      observerRef.current = new ResizeObserver(() => {\n        // Just call updateHeight when resize is detected\n        updateHeight()\n      })\n    }\n\n    // Start observing the content container\n    observerRef.current.observe(contentRef.current)\n\n    // Clean up function\n    return () => {\n      if (observerRef.current) {\n        observerRef.current.disconnect()\n      }\n    }\n  }, [])\n\n  // Function to calculate visible events for a cell\n  const getVisibleEventCount = useMemo(() => {\n    return (totalEvents: number): number => {\n      if (!contentHeight) return totalEvents\n\n      // Calculate how many events can fit in the container\n      const maxEvents = Math.floor(contentHeight / (eventHeight + eventGap))\n\n      // If all events fit, show them all\n      if (totalEvents <= maxEvents) {\n        return totalEvents\n      } else {\n        // Otherwise, reserve space for \"more\" button by showing one less\n        return maxEvents > 0 ? maxEvents - 1 : 0\n      }\n    }\n  }, [contentHeight, eventHeight, eventGap])\n\n  // Use type assertion to satisfy TypeScript\n  return {\n    contentRef,\n    contentHeight,\n    getVisibleEventCount,\n  } as EventVisibilityResult\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-543.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-543",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-543.tsx",
+      "content": "\"use client\"\n\nimport { CircleUserRoundIcon, XIcon } from \"lucide-react\"\n\nimport { useFileUpload } from \"@/registry/building-blocks/default/hooks/use-file-upload\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [\n    { files, isDragging },\n    {\n      removeFile,\n      openFileDialog,\n      getInputProps,\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n    },\n  ] = useFileUpload({\n    accept: \"image/*\",\n  })\n\n  const previewUrl = files[0]?.preview || null\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"relative inline-flex\">\n        {/* Drop area */}\n        <button\n          className=\"relative flex size-16 items-center justify-center overflow-hidden rounded-full border border-dashed border-input transition-colors outline-none hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-disabled:pointer-events-none has-disabled:opacity-50 has-[img]:border-none data-[dragging=true]:bg-accent/50\"\n          onClick={openFileDialog}\n          onDragEnter={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDragOver={handleDragOver}\n          onDrop={handleDrop}\n          data-dragging={isDragging || undefined}\n          aria-label={previewUrl ? \"Change image\" : \"Upload image\"}\n        >\n          {previewUrl ? (\n            <img\n              className=\"size-full object-cover\"\n              src={previewUrl}\n              alt={files[0]?.file?.name || \"Uploaded image\"}\n              width={64}\n              height={64}\n              style={{ objectFit: \"cover\" }}\n            />\n          ) : (\n            <div aria-hidden=\"true\">\n              <CircleUserRoundIcon className=\"size-4 opacity-60\" />\n            </div>\n          )}\n        </button>\n        {previewUrl && (\n          <Button\n            onClick={() => removeFile(files[0]?.id)}\n            size=\"icon\"\n            className=\"absolute -top-1 -right-1 size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background\"\n            aria-label=\"Remove image\"\n          >\n            <XIcon className=\"size-3.5\" />\n          </Button>\n        )}\n        <input\n          {...getInputProps()}\n          className=\"sr-only\"\n          aria-label=\"Upload image file\"\n          tabIndex={-1}\n        />\n      </div>\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Avatar uploader with droppable area ∙{\" \"}\n        <a\n          href=\"https://github.com/loveui/blob/main/apps/origin/docs/use-file-upload.md\"\n          className=\"underline hover:text-foreground\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-file-upload.ts",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type DragEvent,\n  type InputHTMLAttributes,\n} from \"react\"\n\nexport type FileMetadata = {\n  name: string\n  size: number\n  type: string\n  url: string\n  id: string\n}\n\nexport type FileWithPreview = {\n  file: File | FileMetadata\n  id: string\n  preview?: string\n}\n\nexport type FileUploadOptions = {\n  maxFiles?: number // Only used when multiple is true, defaults to Infinity\n  maxSize?: number // in bytes\n  accept?: string\n  multiple?: boolean // Defaults to false\n  initialFiles?: FileMetadata[]\n  onFilesChange?: (files: FileWithPreview[]) => void // Callback when files change\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void // Callback when new files are added\n}\n\nexport type FileUploadState = {\n  files: FileWithPreview[]\n  isDragging: boolean\n  errors: string[]\n}\n\nexport type FileUploadActions = {\n  addFiles: (files: FileList | File[]) => void\n  removeFile: (id: string) => void\n  clearFiles: () => void\n  clearErrors: () => void\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void\n  handleDragOver: (e: DragEvent<HTMLElement>) => void\n  handleDrop: (e: DragEvent<HTMLElement>) => void\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void\n  openFileDialog: () => void\n  getInputProps: (\n    props?: InputHTMLAttributes<HTMLInputElement>\n  ) => InputHTMLAttributes<HTMLInputElement> & {\n    // Use `any` here to avoid cross-React ref type conflicts across packages\n    ref: any\n  }\n}\n\nexport const useFileUpload = (\n  options: FileUploadOptions = {}\n): [FileUploadState, FileUploadActions] => {\n  const {\n    maxFiles = Infinity,\n    maxSize = Infinity,\n    accept = \"*\",\n    multiple = false,\n    initialFiles = [],\n    onFilesChange,\n    onFilesAdded,\n  } = options\n\n  const [state, setState] = useState<FileUploadState>({\n    files: initialFiles.map((file) => ({\n      file,\n      id: file.id,\n      preview: file.url,\n    })),\n    isDragging: false,\n    errors: [],\n  })\n\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const validateFile = useCallback(\n    (file: File | FileMetadata): string | null => {\n      if (file instanceof File) {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      } else {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      }\n\n      if (accept !== \"*\") {\n        const acceptedTypes = accept.split(\",\").map((type) => type.trim())\n        const fileType = file instanceof File ? file.type || \"\" : file.type\n        const fileExtension = `.${file instanceof File ? file.name.split(\".\").pop() : file.name.split(\".\").pop()}`\n\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.startsWith(\".\")) {\n            return fileExtension.toLowerCase() === type.toLowerCase()\n          }\n          if (type.endsWith(\"/*\")) {\n            const baseType = type.split(\"/\")[0]\n            return fileType.startsWith(`${baseType}/`)\n          }\n          return fileType === type\n        })\n\n        if (!isAccepted) {\n          return `File \"${file instanceof File ? file.name : file.name}\" is not an accepted file type.`\n        }\n      }\n\n      return null\n    },\n    [accept, maxSize]\n  )\n\n  const createPreview = useCallback(\n    (file: File | FileMetadata): string | undefined => {\n      if (file instanceof File) {\n        return URL.createObjectURL(file)\n      }\n      return file.url\n    },\n    []\n  )\n\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\n    if (file instanceof File) {\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`\n    }\n    return file.id\n  }, [])\n\n  const clearFiles = useCallback(() => {\n    setState((prev) => {\n      // Clean up object URLs\n      prev.files.forEach((file) => {\n        if (\n          file.preview &&\n          file.file instanceof File &&\n          file.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n\n      const newState = {\n        ...prev,\n        files: [],\n        errors: [],\n      }\n\n      onFilesChange?.(newState.files)\n      return newState\n    })\n  }, [onFilesChange])\n\n  const addFiles = useCallback(\n    (newFiles: FileList | File[]) => {\n      if (!newFiles || newFiles.length === 0) return\n\n      const newFilesArray = Array.from(newFiles)\n      const errors: string[] = []\n\n      // Clear existing errors when new files are uploaded\n      setState((prev) => ({ ...prev, errors: [] }))\n\n      // In single file mode, clear existing files first\n      if (!multiple) {\n        clearFiles()\n      }\n\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\n      if (\n        multiple &&\n        maxFiles !== Infinity &&\n        state.files.length + newFilesArray.length > maxFiles\n      ) {\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`)\n        setState((prev) => ({ ...prev, errors }))\n        return\n      }\n\n      const validFiles: FileWithPreview[] = []\n\n      newFilesArray.forEach((file) => {\n        // Only check for duplicates if multiple files are allowed\n        if (multiple) {\n          const isDuplicate = state.files.some(\n            (existingFile) =>\n              existingFile.file.name === file.name &&\n              existingFile.file.size === file.size\n          )\n\n          // Skip duplicate files silently\n          if (isDuplicate) {\n            return\n          }\n        }\n\n        // Check file size\n        if (file.size > maxSize) {\n          errors.push(\n            multiple\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`\n          )\n          return\n        }\n\n        const error = validateFile(file)\n        if (error) {\n          errors.push(error)\n        } else {\n          validFiles.push({\n            file,\n            id: generateUniqueId(file),\n            preview: createPreview(file),\n          })\n        }\n      })\n\n      // Only update state if we have valid files to add\n      if (validFiles.length > 0) {\n        // Call the onFilesAdded callback with the newly added valid files\n        onFilesAdded?.(validFiles)\n\n        setState((prev) => {\n          const newFiles = !multiple\n            ? validFiles\n            : [...prev.files, ...validFiles]\n          onFilesChange?.(newFiles)\n          return {\n            ...prev,\n            files: newFiles,\n            errors,\n          }\n        })\n      } else if (errors.length > 0) {\n        setState((prev) => ({\n          ...prev,\n          errors,\n        }))\n      }\n\n      // Reset input value after handling files\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n    },\n    [\n      state.files,\n      maxFiles,\n      multiple,\n      maxSize,\n      validateFile,\n      createPreview,\n      generateUniqueId,\n      clearFiles,\n      onFilesChange,\n      onFilesAdded,\n    ]\n  )\n\n  const removeFile = useCallback(\n    (id: string) => {\n      setState((prev) => {\n        const fileToRemove = prev.files.find((file) => file.id === id)\n        if (\n          fileToRemove &&\n          fileToRemove.preview &&\n          fileToRemove.file instanceof File &&\n          fileToRemove.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(fileToRemove.preview)\n        }\n\n        const newFiles = prev.files.filter((file) => file.id !== id)\n        onFilesChange?.(newFiles)\n\n        return {\n          ...prev,\n          files: newFiles,\n          errors: [],\n        }\n      })\n    },\n    [onFilesChange]\n  )\n\n  const clearErrors = useCallback(() => {\n    setState((prev) => ({\n      ...prev,\n      errors: [],\n    }))\n  }, [])\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setState((prev) => ({ ...prev, isDragging: true }))\n  }, [])\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\n      return\n    }\n\n    setState((prev) => ({ ...prev, isDragging: false }))\n  }, [])\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLElement>) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setState((prev) => ({ ...prev, isDragging: false }))\n\n      // Don't process files if the input is disabled\n      if (inputRef.current?.disabled) {\n        return\n      }\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        // In single file mode, only use the first file\n        if (!multiple) {\n          const file = e.dataTransfer.files[0]\n          addFiles([file])\n        } else {\n          addFiles(e.dataTransfer.files)\n        }\n      }\n    },\n    [addFiles, multiple]\n  )\n\n  const handleFileChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        addFiles(e.target.files)\n      }\n    },\n    [addFiles]\n  )\n\n  const openFileDialog = useCallback(() => {\n    if (inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [])\n\n  const getInputProps = useCallback(\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\n      return {\n        ...props,\n        type: \"file\" as const,\n        onChange: handleFileChange,\n        accept: props.accept || accept,\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\n        ref: inputRef as any,\n      }\n    },\n    [accept, multiple, handleFileChange]\n  )\n\n  return [\n    state,\n    {\n      addFiles,\n      removeFile,\n      clearFiles,\n      clearErrors,\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      handleFileChange,\n      openFileDialog,\n      getInputProps,\n    },\n  ]\n}\n\n// Helper function to format bytes to human-readable format\nexport const formatBytes = (bytes: number, decimals = 2): string => {\n  if (bytes === 0) return \"0 Bytes\"\n\n  const k = 1024\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"]\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k))\n\n  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i]\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "upload",
+      "file",
+      "image",
+      "drag and drop",
+      "avatar"
+    ]
+  }
+}

package/public/r/comp-544.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-544",
+  "type": "registry:component",
+  "files": [
+    {
+      "path": "registry/default/components/comp-544.tsx",
+      "content": "\"use client\"\n\nimport { AlertCircleIcon, ImageUpIcon, XIcon } from \"lucide-react\"\n\nimport { useFileUpload } from \"@/registry/building-blocks/default/hooks/use-file-upload\"\n\nexport default function Component() {\n  const maxSizeMB = 5\n  const maxSize = maxSizeMB * 1024 * 1024 // 5MB default\n\n  const [\n    { files, isDragging, errors },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    accept: \"image/*\",\n    maxSize,\n  })\n\n  const previewUrl = files[0]?.preview || null\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"relative\">\n        {/* Drop area */}\n        <div\n          role=\"button\"\n          onClick={openFileDialog}\n          onDragEnter={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDragOver={handleDragOver}\n          onDrop={handleDrop}\n          data-dragging={isDragging || undefined}\n          className=\"relative flex min-h-52 flex-col items-center justify-center overflow-hidden rounded-xl border border-dashed border-input p-4 transition-colors hover:bg-accent/50 has-disabled:pointer-events-none has-disabled:opacity-50 has-[img]:border-none has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\"\n        >\n          <input\n            {...getInputProps()}\n            className=\"sr-only\"\n            aria-label=\"Upload file\"\n          />\n          {previewUrl ? (\n            <div className=\"absolute inset-0\">\n              <img\n                src={previewUrl}\n                alt={files[0]?.file?.name || \"Uploaded image\"}\n                className=\"size-full object-cover\"\n              />\n            </div>\n          ) : (\n            <div className=\"flex flex-col items-center justify-center px-4 py-3 text-center\">\n              <div\n                className=\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\"\n                aria-hidden=\"true\"\n              >\n                <ImageUpIcon className=\"size-4 opacity-60\" />\n              </div>\n              <p className=\"mb-1.5 text-sm font-medium\">\n                Drop your image here or click to browse\n              </p>\n              <p className=\"text-xs text-muted-foreground\">\n                Max size: {maxSizeMB}MB\n              </p>\n            </div>\n          )}\n        </div>\n        {previewUrl && (\n          <div className=\"absolute top-4 right-4\">\n            <button\n              type=\"button\"\n              className=\"z-50 flex size-8 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white transition-[color,box-shadow] outline-none hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n              onClick={() => removeFile(files[0]?.id)}\n              aria-label=\"Remove image\"\n            >\n              <XIcon className=\"size-4\" aria-hidden=\"true\" />\n            </button>\n          </div>\n        )}\n      </div>\n\n      {errors.length > 0 && (\n        <div\n          className=\"flex items-center gap-1 text-xs text-destructive\"\n          role=\"alert\"\n        >\n          <AlertCircleIcon className=\"size-3 shrink-0\" />\n          <span>{errors[0]}</span>\n        </div>\n      )}\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-center text-xs text-muted-foreground\"\n      >\n        Single image uploader w/ max size ∙{\" \"}\n        <a\n          href=\"https://github.com/loveui/blob/main/apps/origin/docs/use-file-upload.md\"\n          className=\"underline hover:text-foreground\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-file-upload.ts",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type DragEvent,\n  type InputHTMLAttributes,\n} from \"react\"\n\nexport type FileMetadata = {\n  name: string\n  size: number\n  type: string\n  url: string\n  id: string\n}\n\nexport type FileWithPreview = {\n  file: File | FileMetadata\n  id: string\n  preview?: string\n}\n\nexport type FileUploadOptions = {\n  maxFiles?: number // Only used when multiple is true, defaults to Infinity\n  maxSize?: number // in bytes\n  accept?: string\n  multiple?: boolean // Defaults to false\n  initialFiles?: FileMetadata[]\n  onFilesChange?: (files: FileWithPreview[]) => void // Callback when files change\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void // Callback when new files are added\n}\n\nexport type FileUploadState = {\n  files: FileWithPreview[]\n  isDragging: boolean\n  errors: string[]\n}\n\nexport type FileUploadActions = {\n  addFiles: (files: FileList | File[]) => void\n  removeFile: (id: string) => void\n  clearFiles: () => void\n  clearErrors: () => void\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void\n  handleDragOver: (e: DragEvent<HTMLElement>) => void\n  handleDrop: (e: DragEvent<HTMLElement>) => void\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void\n  openFileDialog: () => void\n  getInputProps: (\n    props?: InputHTMLAttributes<HTMLInputElement>\n  ) => InputHTMLAttributes<HTMLInputElement> & {\n    // Use `any` here to avoid cross-React ref type conflicts across packages\n    ref: any\n  }\n}\n\nexport const useFileUpload = (\n  options: FileUploadOptions = {}\n): [FileUploadState, FileUploadActions] => {\n  const {\n    maxFiles = Infinity,\n    maxSize = Infinity,\n    accept = \"*\",\n    multiple = false,\n    initialFiles = [],\n    onFilesChange,\n    onFilesAdded,\n  } = options\n\n  const [state, setState] = useState<FileUploadState>({\n    files: initialFiles.map((file) => ({\n      file,\n      id: file.id,\n      preview: file.url,\n    })),\n    isDragging: false,\n    errors: [],\n  })\n\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const validateFile = useCallback(\n    (file: File | FileMetadata): string | null => {\n      if (file instanceof File) {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      } else {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      }\n\n      if (accept !== \"*\") {\n        const acceptedTypes = accept.split(\",\").map((type) => type.trim())\n        const fileType = file instanceof File ? file.type || \"\" : file.type\n        const fileExtension = `.${file instanceof File ? file.name.split(\".\").pop() : file.name.split(\".\").pop()}`\n\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.startsWith(\".\")) {\n            return fileExtension.toLowerCase() === type.toLowerCase()\n          }\n          if (type.endsWith(\"/*\")) {\n            const baseType = type.split(\"/\")[0]\n            return fileType.startsWith(`${baseType}/`)\n          }\n          return fileType === type\n        })\n\n        if (!isAccepted) {\n          return `File \"${file instanceof File ? file.name : file.name}\" is not an accepted file type.`\n        }\n      }\n\n      return null\n    },\n    [accept, maxSize]\n  )\n\n  const createPreview = useCallback(\n    (file: File | FileMetadata): string | undefined => {\n      if (file instanceof File) {\n        return URL.createObjectURL(file)\n      }\n      return file.url\n    },\n    []\n  )\n\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\n    if (file instanceof File) {\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`\n    }\n    return file.id\n  }, [])\n\n  const clearFiles = useCallback(() => {\n    setState((prev) => {\n      // Clean up object URLs\n      prev.files.forEach((file) => {\n        if (\n          file.preview &&\n          file.file instanceof File &&\n          file.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n\n      const newState = {\n        ...prev,\n        files: [],\n        errors: [],\n      }\n\n      onFilesChange?.(newState.files)\n      return newState\n    })\n  }, [onFilesChange])\n\n  const addFiles = useCallback(\n    (newFiles: FileList | File[]) => {\n      if (!newFiles || newFiles.length === 0) return\n\n      const newFilesArray = Array.from(newFiles)\n      const errors: string[] = []\n\n      // Clear existing errors when new files are uploaded\n      setState((prev) => ({ ...prev, errors: [] }))\n\n      // In single file mode, clear existing files first\n      if (!multiple) {\n        clearFiles()\n      }\n\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\n      if (\n        multiple &&\n        maxFiles !== Infinity &&\n        state.files.length + newFilesArray.length > maxFiles\n      ) {\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`)\n        setState((prev) => ({ ...prev, errors }))\n        return\n      }\n\n      const validFiles: FileWithPreview[] = []\n\n      newFilesArray.forEach((file) => {\n        // Only check for duplicates if multiple files are allowed\n        if (multiple) {\n          const isDuplicate = state.files.some(\n            (existingFile) =>\n              existingFile.file.name === file.name &&\n              existingFile.file.size === file.size\n          )\n\n          // Skip duplicate files silently\n          if (isDuplicate) {\n            return\n          }\n        }\n\n        // Check file size\n        if (file.size > maxSize) {\n          errors.push(\n            multiple\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`\n          )\n          return\n        }\n\n        const error = validateFile(file)\n        if (error) {\n          errors.push(error)\n        } else {\n          validFiles.push({\n            file,\n            id: generateUniqueId(file),\n            preview: createPreview(file),\n          })\n        }\n      })\n\n      // Only update state if we have valid files to add\n      if (validFiles.length > 0) {\n        // Call the onFilesAdded callback with the newly added valid files\n        onFilesAdded?.(validFiles)\n\n        setState((prev) => {\n          const newFiles = !multiple\n            ? validFiles\n            : [...prev.files, ...validFiles]\n          onFilesChange?.(newFiles)\n          return {\n            ...prev,\n            files: newFiles,\n            errors,\n          }\n        })\n      } else if (errors.length > 0) {\n        setState((prev) => ({\n          ...prev,\n          errors,\n        }))\n      }\n\n      // Reset input value after handling files\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n    },\n    [\n      state.files,\n      maxFiles,\n      multiple,\n      maxSize,\n      validateFile,\n      createPreview,\n      generateUniqueId,\n      clearFiles,\n      onFilesChange,\n      onFilesAdded,\n    ]\n  )\n\n  const removeFile = useCallback(\n    (id: string) => {\n      setState((prev) => {\n        const fileToRemove = prev.files.find((file) => file.id === id)\n        if (\n          fileToRemove &&\n          fileToRemove.preview &&\n          fileToRemove.file instanceof File &&\n          fileToRemove.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(fileToRemove.preview)\n        }\n\n        const newFiles = prev.files.filter((file) => file.id !== id)\n        onFilesChange?.(newFiles)\n\n        return {\n          ...prev,\n          files: newFiles,\n          errors: [],\n        }\n      })\n    },\n    [onFilesChange]\n  )\n\n  const clearErrors = useCallback(() => {\n    setState((prev) => ({\n      ...prev,\n      errors: [],\n    }))\n  }, [])\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setState((prev) => ({ ...prev, isDragging: true }))\n  }, [])\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\n      return\n    }\n\n    setState((prev) => ({ ...prev, isDragging: false }))\n  }, [])\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLElement>) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setState((prev) => ({ ...prev, isDragging: false }))\n\n      // Don't process files if the input is disabled\n      if (inputRef.current?.disabled) {\n        return\n      }\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        // In single file mode, only use the first file\n        if (!multiple) {\n          const file = e.dataTransfer.files[0]\n          addFiles([file])\n        } else {\n          addFiles(e.dataTransfer.files)\n        }\n      }\n    },\n    [addFiles, multiple]\n  )\n\n  const handleFileChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        addFiles(e.target.files)\n      }\n    },\n    [addFiles]\n  )\n\n  const openFileDialog = useCallback(() => {\n    if (inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [])\n\n  const getInputProps = useCallback(\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\n      return {\n        ...props,\n        type: \"file\" as const,\n        onChange: handleFileChange,\n        accept: props.accept || accept,\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\n        ref: inputRef as any,\n      }\n    },\n    [accept, multiple, handleFileChange]\n  )\n\n  return [\n    state,\n    {\n      addFiles,\n      removeFile,\n      clearFiles,\n      clearErrors,\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      handleFileChange,\n      openFileDialog,\n      getInputProps,\n    },\n  ]\n}\n\n// Helper function to format bytes to human-readable format\nexport const formatBytes = (bytes: number, decimals = 2): string => {\n  if (bytes === 0) return \"0 Bytes\"\n\n  const k = 1024\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"]\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k))\n\n  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i]\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "upload",
+      "file",
+      "image",
+      "drag and drop"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-545.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-545",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-545.tsx",
+      "content": "\"use client\"\n\nimport { AlertCircleIcon, ImageIcon, UploadIcon, XIcon } from \"lucide-react\"\n\nimport { useFileUpload } from \"@/registry/building-blocks/default/hooks/use-file-upload\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const maxSizeMB = 2\n  const maxSize = maxSizeMB * 1024 * 1024 // 2MB default\n\n  const [\n    { files, isDragging, errors },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    accept: \"image/svg+xml,image/png,image/jpeg,image/jpg,image/gif\",\n    maxSize,\n  })\n  const previewUrl = files[0]?.preview || null\n  const fileName = files[0]?.file.name || null\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"relative\">\n        {/* Drop area */}\n        <div\n          onDragEnter={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDragOver={handleDragOver}\n          onDrop={handleDrop}\n          data-dragging={isDragging || undefined}\n          className=\"relative flex min-h-52 flex-col items-center justify-center overflow-hidden rounded-xl border border-dashed border-input p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\"\n        >\n          <input\n            {...getInputProps()}\n            className=\"sr-only\"\n            aria-label=\"Upload image file\"\n          />\n          {previewUrl ? (\n            <div className=\"absolute inset-0 flex items-center justify-center p-4\">\n              <img\n                src={previewUrl}\n                alt={files[0]?.file?.name || \"Uploaded image\"}\n                className=\"mx-auto max-h-full rounded object-contain\"\n              />\n            </div>\n          ) : (\n            <div className=\"flex flex-col items-center justify-center px-4 py-3 text-center\">\n              <div\n                className=\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\"\n                aria-hidden=\"true\"\n              >\n                <ImageIcon className=\"size-4 opacity-60\" />\n              </div>\n              <p className=\"mb-1.5 text-sm font-medium\">Drop your image here</p>\n              <p className=\"text-xs text-muted-foreground\">\n                SVG, PNG, JPG or GIF (max. {maxSizeMB}MB)\n              </p>\n              <Button\n                variant=\"outline\"\n                className=\"mt-4\"\n                onClick={openFileDialog}\n              >\n                <UploadIcon\n                  className=\"-ms-1 size-4 opacity-60\"\n                  aria-hidden=\"true\"\n                />\n                Select image\n              </Button>\n            </div>\n          )}\n        </div>\n\n        {previewUrl && (\n          <div className=\"absolute top-4 right-4\">\n            <button\n              type=\"button\"\n              className=\"z-50 flex size-8 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white transition-[color,box-shadow] outline-none hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n              onClick={() => removeFile(files[0]?.id)}\n              aria-label=\"Remove image\"\n            >\n              <XIcon className=\"size-4\" aria-hidden=\"true\" />\n            </button>\n          </div>\n        )}\n      </div>\n\n      {errors.length > 0 && (\n        <div\n          className=\"flex items-center gap-1 text-xs text-destructive\"\n          role=\"alert\"\n        >\n          <AlertCircleIcon className=\"size-3 shrink-0\" />\n          <span>{errors[0]}</span>\n        </div>\n      )}\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-center text-xs text-muted-foreground\"\n      >\n        Single image uploader w/ max size (drop area + button) ∙{\" \"}\n        <a\n          href=\"https://github.com/loveui/blob/main/apps/origin/docs/use-file-upload.md\"\n          className=\"underline hover:text-foreground\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-file-upload.ts",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type DragEvent,\n  type InputHTMLAttributes,\n} from \"react\"\n\nexport type FileMetadata = {\n  name: string\n  size: number\n  type: string\n  url: string\n  id: string\n}\n\nexport type FileWithPreview = {\n  file: File | FileMetadata\n  id: string\n  preview?: string\n}\n\nexport type FileUploadOptions = {\n  maxFiles?: number // Only used when multiple is true, defaults to Infinity\n  maxSize?: number // in bytes\n  accept?: string\n  multiple?: boolean // Defaults to false\n  initialFiles?: FileMetadata[]\n  onFilesChange?: (files: FileWithPreview[]) => void // Callback when files change\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void // Callback when new files are added\n}\n\nexport type FileUploadState = {\n  files: FileWithPreview[]\n  isDragging: boolean\n  errors: string[]\n}\n\nexport type FileUploadActions = {\n  addFiles: (files: FileList | File[]) => void\n  removeFile: (id: string) => void\n  clearFiles: () => void\n  clearErrors: () => void\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void\n  handleDragOver: (e: DragEvent<HTMLElement>) => void\n  handleDrop: (e: DragEvent<HTMLElement>) => void\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void\n  openFileDialog: () => void\n  getInputProps: (\n    props?: InputHTMLAttributes<HTMLInputElement>\n  ) => InputHTMLAttributes<HTMLInputElement> & {\n    // Use `any` here to avoid cross-React ref type conflicts across packages\n    ref: any\n  }\n}\n\nexport const useFileUpload = (\n  options: FileUploadOptions = {}\n): [FileUploadState, FileUploadActions] => {\n  const {\n    maxFiles = Infinity,\n    maxSize = Infinity,\n    accept = \"*\",\n    multiple = false,\n    initialFiles = [],\n    onFilesChange,\n    onFilesAdded,\n  } = options\n\n  const [state, setState] = useState<FileUploadState>({\n    files: initialFiles.map((file) => ({\n      file,\n      id: file.id,\n      preview: file.url,\n    })),\n    isDragging: false,\n    errors: [],\n  })\n\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const validateFile = useCallback(\n    (file: File | FileMetadata): string | null => {\n      if (file instanceof File) {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      } else {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      }\n\n      if (accept !== \"*\") {\n        const acceptedTypes = accept.split(\",\").map((type) => type.trim())\n        const fileType = file instanceof File ? file.type || \"\" : file.type\n        const fileExtension = `.${file instanceof File ? file.name.split(\".\").pop() : file.name.split(\".\").pop()}`\n\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.startsWith(\".\")) {\n            return fileExtension.toLowerCase() === type.toLowerCase()\n          }\n          if (type.endsWith(\"/*\")) {\n            const baseType = type.split(\"/\")[0]\n            return fileType.startsWith(`${baseType}/`)\n          }\n          return fileType === type\n        })\n\n        if (!isAccepted) {\n          return `File \"${file instanceof File ? file.name : file.name}\" is not an accepted file type.`\n        }\n      }\n\n      return null\n    },\n    [accept, maxSize]\n  )\n\n  const createPreview = useCallback(\n    (file: File | FileMetadata): string | undefined => {\n      if (file instanceof File) {\n        return URL.createObjectURL(file)\n      }\n      return file.url\n    },\n    []\n  )\n\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\n    if (file instanceof File) {\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`\n    }\n    return file.id\n  }, [])\n\n  const clearFiles = useCallback(() => {\n    setState((prev) => {\n      // Clean up object URLs\n      prev.files.forEach((file) => {\n        if (\n          file.preview &&\n          file.file instanceof File &&\n          file.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n\n      const newState = {\n        ...prev,\n        files: [],\n        errors: [],\n      }\n\n      onFilesChange?.(newState.files)\n      return newState\n    })\n  }, [onFilesChange])\n\n  const addFiles = useCallback(\n    (newFiles: FileList | File[]) => {\n      if (!newFiles || newFiles.length === 0) return\n\n      const newFilesArray = Array.from(newFiles)\n      const errors: string[] = []\n\n      // Clear existing errors when new files are uploaded\n      setState((prev) => ({ ...prev, errors: [] }))\n\n      // In single file mode, clear existing files first\n      if (!multiple) {\n        clearFiles()\n      }\n\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\n      if (\n        multiple &&\n        maxFiles !== Infinity &&\n        state.files.length + newFilesArray.length > maxFiles\n      ) {\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`)\n        setState((prev) => ({ ...prev, errors }))\n        return\n      }\n\n      const validFiles: FileWithPreview[] = []\n\n      newFilesArray.forEach((file) => {\n        // Only check for duplicates if multiple files are allowed\n        if (multiple) {\n          const isDuplicate = state.files.some(\n            (existingFile) =>\n              existingFile.file.name === file.name &&\n              existingFile.file.size === file.size\n          )\n\n          // Skip duplicate files silently\n          if (isDuplicate) {\n            return\n          }\n        }\n\n        // Check file size\n        if (file.size > maxSize) {\n          errors.push(\n            multiple\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`\n          )\n          return\n        }\n\n        const error = validateFile(file)\n        if (error) {\n          errors.push(error)\n        } else {\n          validFiles.push({\n            file,\n            id: generateUniqueId(file),\n            preview: createPreview(file),\n          })\n        }\n      })\n\n      // Only update state if we have valid files to add\n      if (validFiles.length > 0) {\n        // Call the onFilesAdded callback with the newly added valid files\n        onFilesAdded?.(validFiles)\n\n        setState((prev) => {\n          const newFiles = !multiple\n            ? validFiles\n            : [...prev.files, ...validFiles]\n          onFilesChange?.(newFiles)\n          return {\n            ...prev,\n            files: newFiles,\n            errors,\n          }\n        })\n      } else if (errors.length > 0) {\n        setState((prev) => ({\n          ...prev,\n          errors,\n        }))\n      }\n\n      // Reset input value after handling files\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n    },\n    [\n      state.files,\n      maxFiles,\n      multiple,\n      maxSize,\n      validateFile,\n      createPreview,\n      generateUniqueId,\n      clearFiles,\n      onFilesChange,\n      onFilesAdded,\n    ]\n  )\n\n  const removeFile = useCallback(\n    (id: string) => {\n      setState((prev) => {\n        const fileToRemove = prev.files.find((file) => file.id === id)\n        if (\n          fileToRemove &&\n          fileToRemove.preview &&\n          fileToRemove.file instanceof File &&\n          fileToRemove.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(fileToRemove.preview)\n        }\n\n        const newFiles = prev.files.filter((file) => file.id !== id)\n        onFilesChange?.(newFiles)\n\n        return {\n          ...prev,\n          files: newFiles,\n          errors: [],\n        }\n      })\n    },\n    [onFilesChange]\n  )\n\n  const clearErrors = useCallback(() => {\n    setState((prev) => ({\n      ...prev,\n      errors: [],\n    }))\n  }, [])\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setState((prev) => ({ ...prev, isDragging: true }))\n  }, [])\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\n      return\n    }\n\n    setState((prev) => ({ ...prev, isDragging: false }))\n  }, [])\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLElement>) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setState((prev) => ({ ...prev, isDragging: false }))\n\n      // Don't process files if the input is disabled\n      if (inputRef.current?.disabled) {\n        return\n      }\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        // In single file mode, only use the first file\n        if (!multiple) {\n          const file = e.dataTransfer.files[0]\n          addFiles([file])\n        } else {\n          addFiles(e.dataTransfer.files)\n        }\n      }\n    },\n    [addFiles, multiple]\n  )\n\n  const handleFileChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        addFiles(e.target.files)\n      }\n    },\n    [addFiles]\n  )\n\n  const openFileDialog = useCallback(() => {\n    if (inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [])\n\n  const getInputProps = useCallback(\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\n      return {\n        ...props,\n        type: \"file\" as const,\n        onChange: handleFileChange,\n        accept: props.accept || accept,\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\n        ref: inputRef as any,\n      }\n    },\n    [accept, multiple, handleFileChange]\n  )\n\n  return [\n    state,\n    {\n      addFiles,\n      removeFile,\n      clearFiles,\n      clearErrors,\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      handleFileChange,\n      openFileDialog,\n      getInputProps,\n    },\n  ]\n}\n\n// Helper function to format bytes to human-readable format\nexport const formatBytes = (bytes: number, decimals = 2): string => {\n  if (bytes === 0) return \"0 Bytes\"\n\n  const k = 1024\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"]\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k))\n\n  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i]\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "upload",
+      "file",
+      "image",
+      "drag and drop"
+    ],
+    "colSpan": 2
+  }
+}