{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"event-calendar-agenda-view","type":"registry:ui","title":"Chronological agenda grouped by day - a day header row plus a clean time / dot / title table.","description":"Chronological agenda grouped by day - a day header row plus a clean time / dot / title table.","dependencies":["date-fns","radix-ui"],"registryDependencies":["@neui/event-calendar","@neui/event-calendar-event","@neui/event-calendar-lib","@neui/event-calendar-types","@neui/icon-stack","scroll-area"],"files":[{"path":"event-calendar-agenda-view.tsx","type":"registry:ui","content":"// Title: Event Calendar Agenda View\n// Description: Chronological agenda grouped by day - a day header row plus a clean time / dot / title table.\n\n\"use client\"\n\nimport { useMemo, type HTMLAttributes } from \"react\"\nimport {\n  EventCalendarViewContext,\n  useEventCalendar,\n  useEventCalendarSelector,\n  useEventCalendarSettings,\n  useEventCalendarViewConfig,\n} from \"@/components/neui/event-calendar/event-calendar\"\nimport { EventCalendarEvent } from \"@/components/neui/event-calendar/event-calendar-event\"\nimport {\n  getDayKey,\n  getRangeKey,\n  toZoned,\n  zonedStartOfDay,\n} from \"@/components/neui/event-calendar/event-calendar-lib\"\nimport type {\n  EventCalendarDateRange,\n  EventCalendarSegment,\n} from \"@/components/neui/event-calendar/event-calendar-types\"\nimport { IconStack } from \"@/components/neui/icon-stack\"\nimport { addDays, format } from \"date-fns\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// The agenda window length is the agendaDayCount SETTING (the store derives\n// visibleRange from it); a per-view prop here would silently disagree.\ninterface EventCalendarAgendaViewProps extends HTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\n\nfunction EventCalendarAgendaView({\n  className,\n  asChild = false,\n  ...props\n}: EventCalendarAgendaViewProps) {\n  const instance = useEventCalendar()\n  const settings = useEventCalendarSettings()\n  const viewConfig = useEventCalendarViewConfig()\n  const visibleRange = useEventCalendarSelector<\n    unknown,\n    EventCalendarDateRange\n  >((state) => state.visibleRange, {\n    isEqual: (a, b) => getRangeKey(a) === getRangeKey(b),\n  })\n  // Subscribe to event changes via the day-bucket content of the whole range\n  useEventCalendarSelector((state) => state.events)\n\n  const days = useMemo(() => {\n    const result: Date[] = []\n    let cursor = zonedStartOfDay(visibleRange.start, settings.timeZone)\n    while (cursor < visibleRange.end) {\n      result.push(cursor)\n      cursor = zonedStartOfDay(\n        addDays(toZoned(cursor, settings.timeZone), 1),\n        settings.timeZone\n      )\n    }\n    return result\n  }, [visibleRange, settings.timeZone])\n\n  const index = instance.internals.getIndex()\n  const groups = days\n    .map((day) => ({\n      day,\n      bucket: index.byDay.get(getDayKey(day, settings.timeZone)),\n    }))\n    .filter((group) => {\n      const total =\n        (group.bucket?.allDay.length ?? 0) + (group.bucket?.timed.length ?? 0)\n      return total > 0\n    })\n\n  const isToday = (day: Date) =>\n    getDayKey(day, settings.timeZone) ===\n    getDayKey(new Date(), settings.timeZone)\n\n  const native = viewConfig.scrollbars === \"native\"\n\n  const body = (\n    <>\n      {groups.length === 0 ? (\n        <div\n          data-slot=\"event-calendar-no-events\"\n          className={cn(\n            \"flex min-h-72 flex-col items-center justify-center gap-4 py-16\",\n            viewConfig.classNames?.noEvents\n          )}\n        >\n          {viewConfig.renderNoEvents?.() ?? (\n            <>\n              <IconStack>\n                <IconPlaceholder\n                  lucide=\"CalendarIcon\"\n                  tabler=\"IconCalendarEvent\"\n                  hugeicons=\"Calendar04Icon\"\n                  phosphor=\"CalendarBlankIcon\"\n                  remixicon=\"RiCalendarLine\"\n                  className=\"size-5\"\n                  aria-hidden=\"true\"\n                />\n              </IconStack>\n              <span className=\"text-muted-foreground text-sm\">\n                {settings.i18n.labels.noEvents}\n              </span>\n            </>\n          )}\n        </div>\n      ) : (\n        // Drop the very last row's bottom border so it does not double up with\n        // the calendar container's own bottom border. Targets the last day\n        // group's last child (its last agenda item); per-item `border-b` is\n        // kept everywhere else, including each day's internal rows.\n        <div className=\"flex flex-col [&>*:last-child>*:last-child]:border-b-0\">\n          {groups.map(({ day, bucket }) => {\n            const items = [...(bucket?.allDay ?? []), ...(bucket?.timed ?? [])]\n            const zoned = toZoned(day, settings.timeZone)\n            const weekday = format(zoned, \"EEEE\", { locale: settings.locale })\n            const dayDate = format(zoned, \"MMMM d, yyyy\", {\n              locale: settings.locale,\n            })\n            return (\n              <div\n                key={day.getTime()}\n                data-slot=\"event-calendar-agenda-day\"\n                data-today={isToday(day) || undefined}\n                // A named group per day so a screen reader can step day by day\n                // (and hear how full one is) instead of arrowing every row.\n                role=\"group\"\n                aria-label={`${weekday}, ${dayDate}, ${settings.i18n.labels.events(items.length)}`}\n              >\n                {/* Group header: weekday (leading) + full date (trailing) */}\n                <div\n                  data-slot=\"event-calendar-agenda-day-header\"\n                  // The day bar is the agenda's only structure, so give it a\n                  // heading level: the H key and the rotor can jump between\n                  // days, which is the whole point of a long agenda.\n                  role=\"heading\"\n                  aria-level={3}\n                  className={cn(\n                    \"bg-muted/60 sticky top-0 z-10 flex items-baseline justify-between gap-4 border-b px-4 py-2\",\n                    // The custom ScrollArea's overlay scrollbar (w-2.5 = 10px)\n                    // is painted UNDER this sticky, z-10, opaque header, so the\n                    // thumb vanishes behind the day bar at the top of the view.\n                    // Inset the header by the scrollbar lane so its background\n                    // stops before the scrollbar instead of covering it. Native\n                    // scrollbars already sit outside the content box, so this\n                    // only applies to the custom-scrollbar path.\n                    !native && \"me-2.5\",\n                    viewConfig.classNames?.agendaDayHeader\n                  )}\n                >\n                  <span\n                    className={cn(\n                      \"text-foreground font-semibold\",\n                      isToday(day) && \"text-primary\"\n                    )}\n                  >\n                    {weekday}\n                  </span>\n                  <span className=\"text-muted-foreground font-medium tabular-nums\">\n                    {dayDate}\n                  </span>\n                </div>\n                {items.map((segment) => (\n                  <EventCalendarAgendaItem\n                    key={segment.occurrence.key}\n                    segment={segment}\n                  />\n                ))}\n              </div>\n            )\n          })}\n        </div>\n      )}\n    </>\n  )\n\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <EventCalendarViewContext.Provider value={{ view: \"agenda\" }}>\n      <Comp\n        data-slot=\"event-calendar-agenda-view\"\n        data-view=\"agenda\"\n        // Unlike the grid views the agenda has no row/column semantics to carry\n        // a name, so label the region with the day range it covers - through\n        // formatDayRange, so a consumer override reaches it.\n        role=\"group\"\n        aria-label={settings.i18n.functions.formatDayRange(visibleRange, {\n          locale: settings.locale,\n        })}\n        className={cn(\n          \"flex min-h-0 flex-1 flex-col overflow-hidden border-t\",\n          viewConfig.classNames?.agendaView,\n          className\n        )}\n        {...props}\n      >\n        {native ? (\n          <div\n            data-slot=\"scroll-area-viewport\"\n            data-ec-native-scroll=\"\"\n            className=\"h-full overflow-y-auto\"\n          >\n            {body}\n          </div>\n        ) : (\n          <ScrollArea className=\"h-full\">{body}</ScrollArea>\n        )}\n      </Comp>\n    </EventCalendarViewContext.Provider>\n  )\n}\n\n/**\n * One agenda row: a full-width, selectable table row - time column, color dot,\n * and title (all replaceable via renderAgendaEvent). Clicking selects the\n * event (drag/resize stay off in the agenda).\n */\nfunction EventCalendarAgendaItem({\n  segment,\n}: {\n  segment: EventCalendarSegment\n}) {\n  const viewConfig = useEventCalendarViewConfig()\n  return (\n    <EventCalendarEvent\n      segment={segment}\n      className={cn(\n        // read-only list: hover only, no selected/focused styling on click\n        \"hover:bg-accent/40 gap-3 rounded-none border-b px-4 py-2.5 transition-colors\",\n        viewConfig.classNames?.agendaItem\n      )}\n    />\n  )\n}\n\nexport { EventCalendarAgendaView }\nexport type { EventCalendarAgendaViewProps }","target":"components/neui/event-calendar/event-calendar-agenda-view.tsx"}]}