50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 52:T1fbc,'use client' import { IconCalendarEvent } from '@tabler/icons-react' // Title: Event Calendar Agenda View // Description: Chronological agenda grouped by day - a day header row plus a clean time / dot / title table. import { useMemo } from 'react' import { EventCalendarViewContext, useEventCalendar, useEventCalendarSelector, useEventCalendarSettings, useEventCalendarViewConfig, } from '@/components/spaceui/event-calendar' import { EventCalendarEvent } from '@/components/spaceui/event-calendar-event' import { getDayKey, getRangeKey, toZoned, zonedStartOfDay, } from '@/components/spaceui/event-calendar-lib' import type { EventCalendarDateRange, EventCalendarSegment, } from '@/components/spaceui/event-calendar-types' import { IconStack } from '@/components/spaceui/icon-stack' import { mergeProps } from '@base-ui/react/merge-props' import { useRender } from '@base-ui/react/use-render' import { addDays, format } from 'date-fns' import { cn } from '@/lib/utils' import { ScrollArea } from '@/components/ui/scroll-area' // The agenda window length is the agendaDayCount SETTING (the store derives // visibleRange from it); a per-view prop here would silently disagree. type EventCalendarAgendaViewProps = useRender.ComponentProps<'div'> function EventCalendarAgendaView({ className, render, ...props }: EventCalendarAgendaViewProps) { const instance = useEventCalendar() const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const visibleRange = useEventCalendarSelector((state) => state.visibleRange, { isEqual: (a, b) => getRangeKey(a) === getRangeKey(b), }) // Subscribe to event changes via the day-bucket content of the whole range useEventCalendarSelector((state) => state.events) const days = useMemo(() => { const result: Date[] = [] let cursor = zonedStartOfDay(visibleRange.start, settings.timeZone) while (cursor < visibleRange.end) { result.push(cursor) cursor = zonedStartOfDay(addDays(toZoned(cursor, settings.timeZone), 1), settings.timeZone) } return result }, [visibleRange, settings.timeZone]) const index = instance.internals.getIndex() const groups = days .map((day) => ({ day, bucket: index.byDay.get(getDayKey(day, settings.timeZone)), })) .filter((group) => { const total = (group.bucket?.allDay.length ?? 0) + (group.bucket?.timed.length ?? 0) return total > 0 }) const isToday = (day: Date) => getDayKey(day, settings.timeZone) === getDayKey(new Date(), settings.timeZone) const native = viewConfig.scrollbars === 'native' const body = ( <> {groups.length === 0 ? (

{viewConfig.renderNoEvents?.() ?? ( <> {settings.i18n.labels.noEvents} )}

) : ( // Drop the very last row's bottom border so it does not double up with // the calendar container's own bottom border. Targets the last day // group's last child (its last agenda item); per-item `border-b` is // kept everywhere else, including each day's internal rows.

{groups.map(({ day, bucket }) => { const items = [...(bucket?.allDay ?? []), ...(bucket?.timed ?? [])] const zoned = toZoned(day, settings.timeZone) const weekday = format(zoned, 'EEEE', { locale: settings.locale }) const dayDate = format(zoned, 'MMMM d, yyyy', { locale: settings.locale, }) return (

{/* Group header: weekday (leading) + full date (trailing) */}

{weekday} {dayDate}

{items.map((segment) => ( ))}

) })}

)} ) const defaultProps = { 'data-slot': 'event-calendar-agenda-view', 'data-view': 'agenda', // Unlike the grid views the agenda has no row/column semantics to carry a // name, so label the region with the day range it covers - through // formatDayRange, so a consumer override reaches it. role: 'group', 'aria-label': settings.i18n.functions.formatDayRange(visibleRange, { locale: settings.locale, }), className: cn( 'flex min-h-0 flex-1 flex-col overflow-hidden border-t', viewConfig.classNames?.agendaView, className, ), children: native ? (

{body}

) : ( {body} ), } return ( {useRender({ defaultTagName: 'div', render, props: mergeProps<'div'>(defaultProps, props), })} ) } /** * One agenda row: a full-width, selectable table row - time column, color dot, * and title (all replaceable via renderAgendaEvent). Clicking selects the * event (drag/resize stay off in the agenda). */ function EventCalendarAgendaItem({ segment }: { segment: EventCalendarSegment }) { const viewConfig = useEventCalendarViewConfig() return ( ) } export { EventCalendarAgendaView } export type { EventCalendarAgendaViewProps } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tabler/icons-react"}]]}]}],["$","li","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns"}]]}]}]]}],["$","$L50",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/components-spaceui-event-calendar.json","https://www.spaceui.one/r/components-spaceui-event-calendar-event.json","https://www.spaceui.one/r/components-spaceui-event-calendar-lib.json","https://www.spaceui.one/r/components-spaceui-event-calendar-types.json","https://www.spaceui.one/r/components-spaceui-icon-stack.json","https://www.spaceui.one/r/lib-utils.json","https://www.spaceui.one/r/primitives-scroll-area.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/components/spaceui/event-calendar/event-calendar-agenda-view/index.tsx","content":"$52","type":"registry:component","target":"components/spaceui/event-calendar-agenda-view.tsx"}],"className":"h-[70svh] min-h-80"}]]}]