4f: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"] 50: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"] 51:T9c0b,'use client' // Title: Event Calendar Time Grid // Description: Shared week/day/N-days engine - hour gutter, minute-positioned events, all-day row, drag ghosts, now indicator, and configurable scrolling. import { useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react' import { useEventListener } from '@/hooks/use-event-listener' import { EventCalendarViewContext, useEventCalendar, useEventCalendarDay, useEventCalendarSelector, useEventCalendarSettings, useEventCalendarViewConfig, useEventCalendarViewContext, useEventCalendarViewSettings, } from '@/components/spaceui/event-calendar' import { useEventCalendarGestures, wasRecentChipPress, wasRecentDrag, } from '@/components/spaceui/event-calendar-dnd' import { EVENT_CALENDAR_GHOST, EventCalendarEvent, } from '@/components/spaceui/event-calendar-event' import { getDayKey, getDayTotalMinutes, getRangeKey, packTimedSegments, resolveOffDay, snapMinutes, toZoned, zonedStartOfDay, } from '@/components/spaceui/event-calendar-lib' import type { CalendarView, EventCalendarDateRange, EventCalendarDragState, EventCalendarSegment, EventCalendarSlotDraft, } from '@/components/spaceui/event-calendar-types' import { mergeProps } from '@base-ui/react/merge-props' import { useRender } from '@base-ui/react/use-render' import { addDays, addMinutes, differenceInMinutes, format } from 'date-fns' import { cn } from '@/lib/utils' import { ScrollArea } from '@/components/ui/scroll-area' /** Current time, refreshed on an interval and on tab focus. */ function useNow(intervalMs = 30_000): Date { const [now, setNow] = useState(() => new Date()) useEffect(() => { const tick = () => setNow(new Date()) const id = setInterval(tick, intervalMs) return () => clearInterval(id) }, [intervalMs]) useEventListener('visibilitychange', () => setNow(new Date()), typeof document !== 'undefined' ? document : null) useEventListener('focus', () => setNow(new Date())) return now } const EMPTY_ALL_DAY_SEGMENTS: EventCalendarSegment[] = [] interface EventCalendarTimeGridProps extends useRender.ComponentProps<'div'> { view: Extract dayStartHour?: number dayEndHour?: number showAllDay?: boolean /** Gutter/gridline interval in minutes; defaults to the interval view config. */ interval?: number } function EventCalendarTimeGrid({ view, className, render, dayStartHour, dayEndHour, showAllDay = true, interval: intervalProp, ...props }: EventCalendarTimeGridProps) { const instance = useEventCalendar() const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const visibleRange = useEventCalendarSelector((state) => state.visibleRange, { isEqual: (a, b) => getRangeKey(a) === getRangeKey(b), }) const startHour = dayStartHour ?? settings.dayStartHour const endHour = dayEndHour ?? settings.dayEndHour const interval = Math.min(Math.max(intervalProp ?? viewConfig.interval, 5), 240) const contained = viewConfig.scrollMode !== 'page' const { effective } = useEventCalendarViewSettings() 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) } if (effective.weekends || view === 'day') return result // Same weekend definition the month view filters on, so the toggle cannot // hide one set of days here and another one there. const filtered = result.filter((day) => !settings.weekendDays.includes(toZoned(day, settings.timeZone).getDay())) // A short N-days window landing entirely on the weekend would otherwise // filter to nothing and emit an invalid repeat(0, ...) track. return filtered.length ? filtered : result }, [visibleRange, settings.timeZone, settings.weekendDays, effective.weekends, view]) // Initial scroll to scrollToHour + api.scrollToTime registration (contained) const scrollRef = useRef(null) useEffect(() => { if (!contained) return const el = scrollRef.current if (!el) return const viewport = el.querySelector('[data-slot=scroll-area-viewport]') // Measure a rendered slot row - the CSS var is in rem, rects are in px. const slotRow = el.querySelector('[data-slot=event-calendar-time-gutter] > div') const slotPx = slotRow?.getBoundingClientRect().height || 64 const pxPerMinute = slotPx / interval const scrollTo = (minutes: number) => { // keep the hour label above the target line visible (it hangs -top-2) viewport?.scrollTo({ top: Math.max(0, (minutes - startHour * 60) * pxPerMinute - 12), }) } scrollTo(viewConfig.scrollToHour * 60) instance.internals.registerScrollHandler((time) => { const minutes = typeof time === 'number' ? time : toZoned(time, settings.timeZone).getHours() * 60 + toZoned(time, settings.timeZone).getMinutes() scrollTo(minutes) }) // Classic (width-consuming) scrollbars squeeze the scrolling track while // the header/all-day rows outside keep full width, drifting the column // borders. Mirror the measured gutter onto those rows via a CSS var - // 0px for overlay scrollbars and the custom ScrollArea, so both modes // lay out identically. const root = el.closest( '[data-slot=event-calendar-time-grid], [data-slot=event-calendar-resource-view]', ) const syncScrollbarGutter = () => { root?.style.setProperty('--ec-scrollbar-w', `${viewport ? viewport.offsetWidth - viewport.clientWidth : 0}px`) } syncScrollbarGutter() const gutterObserver = viewport ? new ResizeObserver(syncScrollbarGutter) : null if (viewport) gutterObserver?.observe(viewport) return () => { instance.internals.registerScrollHandler(null) gutterObserver?.disconnect() } }, [ contained, instance, settings.timeZone, startHour, interval, viewConfig.scrollToHour, // scrollbars custom<->native swaps the scroller DOM: re-bind the // viewport, the scroll wiring, and the measured --ec-scrollbar-w viewConfig.scrollbars, ]) // Gutter slots in minutes from the zoned day start const slots = useMemo(() => { const result: number[] = [] for (let m = startHour * 60; m < endHour * 60; m += interval) { result.push(m) } return result }, [startHour, endHour, interval]) // Section-level all-day segments for renderAllDaySection - reads the same // per-day index buckets the cells subscribe to; inert (stable empty array, // so the subscription never re-renders) while the override is unset. const allDaySegments = useEventCalendarSelector( () => { if (!viewConfig.renderAllDaySection) return EMPTY_ALL_DAY_SEGMENTS const byDay = instance.internals.getIndex().byDay const result = days.flatMap((day) => byDay.get(getDayKey(day, settings.timeZone))?.allDay ?? []) return result.length ? result : EMPTY_ALL_DAY_SEGMENTS }, { isEqual: (a, b) => a === b || (a.length === b.length && a.every((segment, i) => segment === b[i])), }, ) const gridTemplateColumns = `repeat(${days.length}, minmax(var(--ec-day-col-min,0px), 1fr))` const track = (

{days.map((day) => ( ))}

{effective.nowIndicator && }

) const defaultProps = { 'data-slot': 'event-calendar-time-grid', 'data-view': view, className: cn( 'flex flex-col border-t', contained && 'min-h-0 flex-1 overflow-hidden', viewConfig.classNames?.timeGrid, className, ), style: { '--ec-hour-height': '4rem' } as CSSProperties, children: ( <> {/* Day-header row (sticky below the nav in page scroll mode) */}

{days.map((day) => ( ))}

{/* All-day row */} {showAllDay && (

{viewConfig.renderAllDaySection?.({ days, segments: allDaySegments, }) ?? ( <>

{settings.i18n.labels.allDay}

)}

)} {/* Time track: internal scroll (contained) or document flow (page) */} {contained ? (

{viewConfig.scrollbars === 'native' ? (

{track}

) : ( {track} )}

) : ( track )} ), } return ( {useRender({ defaultTagName: 'div', render, props: mergeProps<'div'>(defaultProps, props), })} ) } function EventCalendarDayHeader({ day, view }: { day: Date; view: CalendarView }) { const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const { isToday } = useEventCalendarDay(day) return (

{viewConfig.renderDayHeader?.({ day, view, isToday }) ?? format(toZoned(day, settings.timeZone), settings.i18n.formats.timeGridDayHeader, { locale: settings.locale })}

) } /** * Continuous all-day bars for the week/N-days all-day row: consecutive-day * segments of one occurrence merge into a single bar spanning its columns * (same treatment as the month view), lane-packed. Returns CLONED segments - * the shared per-day segments must stay pristine (see packWeekRowLanes). */ function useEventCalendarAllDayBars(days: Date[]): { bars: EventCalendarSegment[] laneCount: number } { const instance = useEventCalendar() const settings = useEventCalendarSettings() return useEventCalendarSelector( () => { const byDay = instance.internals.getIndex().byDay type Bar = { seg: EventCalendarSegment colStart: number colEnd: number isStart: boolean isEnd: boolean lane: number } const merged = new Map() days.forEach((day, col) => { for (const seg of byDay.get(getDayKey(day, settings.timeZone))?.allDay ?? []) { const key = seg.occurrence.key const bar = merged.get(key) if (bar) { bar.colEnd = col bar.isEnd = seg.isEnd } else { merged.set(key, { seg, colStart: col, colEnd: col, isStart: seg.isStart, isEnd: seg.isEnd, lane: 0, }) } } }) const packed = Array.from(merged.values()).sort( (a, b) => a.colStart - b.colStart || b.colEnd - b.colStart - (a.colEnd - a.colStart) || a.seg.occurrence.key.localeCompare(b.seg.occurrence.key), ) const lanes: boolean[][] = [] for (const bar of packed) { let lane = 0 for (;;) { lanes[lane] ??= new Array(days.length).fill(false) let free = true for (let c = bar.colStart; c <= bar.colEnd; c++) { if (lanes[lane][c]) { free = false break } } if (free) break lane++ } for (let c = bar.colStart; c <= bar.colEnd; c++) lanes[lane][c] = true bar.lane = lane } return { bars: packed.map((bar) => ({ ...bar.seg, isStart: bar.isStart, isEnd: bar.isEnd, continuesBefore: !bar.isStart, continuesAfter: !bar.isEnd, colStart: bar.colStart, colSpan: bar.colEnd - bar.colStart + 1, lane: bar.lane, })), laneCount: lanes.length, } }, { calendar: instance, isEqual: (a, b) => a.laneCount === b.laneCount && a.bars.length === b.bars.length && a.bars.every((s, i) => { const o = b.bars[i] // Compare the OCCURRENCE by identity, not by key: the key encodes // id+start only, so a title/color/data edit compared equal and the // all-day row kept its stale bars. Occurrences come from the // memoized index (rebuilt exactly when events change), so identity // also subsumes the end-time check it replaces. The positional // fields stay because they are recomputed on every read. return ( s.occurrence === o.occurrence && s.colStart === o.colStart && s.colSpan === o.colSpan && s.lane === o.lane && s.isStart === o.isStart && s.isEnd === o.isEnd ) }), }, ) } /** * The all-day row body: drop-target cells underneath, one continuous bar per * occurrence in an overlay grid on top (month-view treatment), plus the * standardized day-granular drag ghost for moves/resizes in this lane. */ function EventCalendarAllDayBars({ days, gridTemplateColumns }: { days: Date[]; gridTemplateColumns: string }) { const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const { bars, laneCount } = useEventCalendarAllDayBars(days) const dragGhost = useEventCalendarSelector< unknown, | (Pick & { colStart: number colSpan: number isStart: boolean isEnd: boolean color?: string }) | null >( (state) => { const drag = state.drag if (!drag || !drag.proposedDayGranular) return null const tz = settings.timeZone const startMs = zonedStartOfDay(drag.proposedStart, tz).getTime() const lastMs = zonedStartOfDay(new Date(drag.proposedEnd.getTime() - 1), tz).getTime() let colStart = -1 let colEnd = -1 days.forEach((day, i) => { const t = zonedStartOfDay(day, tz).getTime() if (t >= startMs && t <= lastMs) { if (colStart === -1) colStart = i colEnd = i } }) if (colStart === -1) return null return { kind: drag.kind, valid: drag.valid, occurrence: drag.occurrence, proposedStart: drag.proposedStart, proposedEnd: drag.proposedEnd, colStart, colSpan: colEnd - colStart + 1, isStart: zonedStartOfDay(days[colStart], tz).getTime() <= startMs, isEnd: zonedStartOfDay(days[colEnd], tz).getTime() >= lastMs, color: drag.occurrence.event.color, } }, { isEqual: (a, b) => a === b || (a !== null && b !== null && a.colStart === b.colStart && a.colSpan === b.colSpan && a.valid === b.valid && a.kind === b.kind && a.proposedStart.getTime() === b.proposedStart.getTime() && a.proposedEnd.getTime() === b.proposedEnd.getTime()), }, ) const ghostLane = dragGhost ? (bars.find((s) => s.occurrence.key === dragGhost.occurrence.key)?.lane ?? laneCount) : 0 const effectiveLanes = Math.max(laneCount, dragGhost ? ghostLane + 1 : 0) return (

{days.map((day) => ( ))}

{(bars.length > 0 || dragGhost) && (

{bars.map((segment) => (

))} {dragGhost && (

{dragGhost.kind !== 'move' && ( )}

)}

) } function EventCalendarAllDayCell({ day }: { day: Date }) { const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const { view } = useEventCalendarViewContext() const { effective } = useEventCalendarViewSettings() const gestures = useEventCalendarGestures() const dayStart = zonedStartOfDay(day, settings.timeZone) const dayEnd = addDays(toZoned(dayStart, settings.timeZone), 1) const isOff = resolveOffDay( day, settings.timeZone, effective.offDays ? (typeof viewConfig.offDays === 'object' ? viewConfig.offDays : true) : false, settings.weekendDays, ) const offClassName = (typeof viewConfig.offDays === 'object' && viewConfig.offDays.className) || 'bg-muted/25' const isDropTarget = useEventCalendarSelector((state) => { const drag = state.drag if (!drag || !drag.proposedDayGranular) return null const covered = drag.proposedStart < dayEnd && drag.proposedEnd > dayStart if (!covered) return null return drag.valid ? 'valid' : 'invalid' }) const inDraft = useEventCalendarSelector( (state) => { const draft = state.slotDraft if (!draft || !draft.allDay) return null if (draft.start >= dayEnd || draft.end <= dayStart) return null return { isStart: draft.start >= dayStart, isEnd: draft.end <= dayEnd, } }, { isEqual: (a, b) => a === b || (a !== null && b !== null && a.isStart === b.isStart && a.isEnd === b.isEnd), }, ) return (

{ if (e.target === e.currentTarget) gestures.beginCreate(e, day, true) }} onClick={(e) => { if (e.target === e.currentTarget && !wasRecentDrag() && !wasRecentChipPress()) { settings.onSlotClick?.({ date: dayStart, allDay: true, view }, e) } }} >

) } function EventCalendarTimeGutter({ days, slots, startHour, interval, }: { days: Date[] slots: number[] startHour: number interval: number }) { const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const referenceDay = days[0] ?? new Date() const labelFormat = interval % 60 === 0 ? settings.i18n.formats.timeGutter : settings.i18n.formats.timeGutterMinute return (

{slots.map((minutes) => { const time = addMinutes(zonedStartOfDay(referenceDay, settings.timeZone), minutes) // Always consult renderTimeGutterSlot (a consumer may label the first // slot); only the DEFAULT label is suppressed at the day-start edge. const label = viewConfig.renderTimeGutterSlot?.({ time, hour: Math.floor(minutes / 60), minute: minutes % 60, }) ?? (minutes > startHour * 60 ? format(time, labelFormat, { locale: settings.locale }) : null) return (

{label != null && ( {label} )}

) })}

) } /** Absolute overlay block positioned by minutes (ghosts + drafts). */ function minuteBlockStyle(startMin: number, endMin: number, boundsStartMin: number): CSSProperties { const top = (startMin - boundsStartMin) / 60 const height = Math.max((endMin - startMin) / 60, 0.25) return { top: `calc(var(--ec-hour-height) * ${top})`, height: `calc(var(--ec-hour-height) * ${height})`, } } function EventCalendarDayColumn({ day, startHour, endHour, interval, }: { day: Date startHour: number endHour: number interval: number }) { const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const { effective } = useEventCalendarViewSettings() const { view } = useEventCalendarViewContext() const gestures = useEventCalendarGestures() const { segments, isToday } = useEventCalendarDay(day) const isOff = resolveOffDay( day, settings.timeZone, effective.offDays ? (typeof viewConfig.offDays === 'object' ? viewConfig.offDays : true) : false, settings.weekendDays, ) const offClassName = (typeof viewConfig.offDays === 'object' && viewConfig.offDays.className) || 'bg-muted/25' const timeZone = settings.timeZone const dayStart = zonedStartOfDay(day, timeZone) const dayEnd = addDays(toZoned(dayStart, timeZone), 1) const totalMinutes = getDayTotalMinutes(day, timeZone) const boundsStartMin = startHour * 60 const boundsEndMin = Math.min(endHour * 60, totalMinutes) const boundsMinutes = Math.max(60, boundsEndMin - boundsStartMin) // Minute window of a proposal intersecting THIS day, or null const windowFor = (start: Date, end: Date): [number, number] | null => { if (start >= dayEnd || end <= dayStart) return null const from = Math.max(differenceInMinutes(start > dayStart ? start : dayStart, dayStart), boundsStartMin) const to = Math.min(differenceInMinutes(end < dayEnd ? end : dayEnd, dayStart), boundsEndMin) return to > from ? [from, to] : null } const dragGhost = useEventCalendarSelector< unknown, | (Pick & { window: [number, number] color?: string title: string }) | null >( (state) => { const drag = state.drag if (!drag || drag.proposedDayGranular) return null const window = windowFor(drag.proposedStart, drag.proposedEnd) if (!window) return null return { valid: drag.valid, kind: drag.kind, occurrence: drag.occurrence, proposedStart: drag.proposedStart, proposedEnd: drag.proposedEnd, window, color: drag.occurrence.event.color, title: drag.occurrence.event.title, } }, { isEqual: (a, b) => a === b || (a !== null && b !== null && a.window[0] === b.window[0] && a.window[1] === b.window[1] && a.valid === b.valid && a.kind === b.kind && a.proposedStart.getTime() === b.proposedStart.getTime() && a.proposedEnd.getTime() === b.proposedEnd.getTime()), }, ) const draftWindow = useEventCalendarSelector( (state) => { const draft = state.slotDraft if (!draft || draft.allDay) return null return windowFor(draft.start, draft.end) }, { isEqual: (a, b) => a === b || (a !== null && b !== null && a[0] === b[0] && a[1] === b[1]), }, ) // Segments the day bounds clip away still occupy a column in the shared // index's packing, leaving a phantom empty half beside the first in-bounds // chip. Repack the visible subset; clones keep the index cache untouched. const packedTimed = useMemo(() => { const visible = segments.timed.filter((segment) => { const startMin = Math.max(segment.startMin ?? 0, boundsStartMin) const endMin = Math.min(segment.endMin ?? startMin, boundsEndMin) return endMin > boundsStartMin && startMin < boundsEndMin }) if (visible.length === segments.timed.length) return segments.timed const clones = visible.map((segment) => ({ ...segment }) as EventCalendarSegment) packTimedSegments(clones) return clones }, [segments.timed, boundsStartMin, boundsEndMin]) const slotFromPointer = (e: React.MouseEvent): { date: Date; end: Date } => { const rect = e.currentTarget.getBoundingClientRect() const pxPerMinute = rect.height / boundsMinutes const minutes = snapMinutes(boundsStartMin + (e.clientY - rect.top) / pxPerMinute, settings.snapDuration) const clamped = Math.min(Math.max(minutes, boundsStartMin), boundsEndMin - settings.slotDuration) return { date: addMinutes(dayStart, clamped), end: addMinutes(dayStart, clamped + settings.slotDuration), } } return (

{ if (e.target === e.currentTarget) gestures.beginCreate(e, day, false) }} onClick={(e) => { if (e.target !== e.currentTarget || wasRecentDrag() || wasRecentChipPress()) return const slot = slotFromPointer(e) settings.onSlotClick?.({ ...slot, allDay: false, view }, e) }} > {viewConfig.renderDayColumnBackground && (

{viewConfig.renderDayColumnBackground({ day, boundsStartMin, boundsEndMin, totalMinutes, })}

)} {packedTimed.map((segment) => { const startMin = Math.max(segment.startMin ?? 0, boundsStartMin) const endMin = Math.min(segment.endMin ?? startMin, boundsEndMin) if (endMin <= boundsStartMin || startMin >= boundsEndMin) return null const columnCount = segment.columnCount ?? 1 const column = segment.column ?? 0 const span = segment.columnSpan ?? 1 const zIndex = segment.occurrence.event.zIndex ?? 10 + column // Strict side-by-side columns - no cascade overlap (fade-truncate + // hover reveal carry the legibility); the ring separates neighbors. const colPct = 100 / columnCount return (

1 && 'ring-background ring-1', // short chips: single centered row, exact-fit line height so // the title never slices mid-glyph endMin - startMin < viewConfig.compactEventMinutes ? 'h-full gap-1 py-0 leading-4' : 'h-full flex-col items-start justify-start gap-0 py-1', viewConfig.classNames?.timedChip, )} />

) })} {/* Drag ghost, standardized (EVENT_CALENDAR_GHOST). Move: a faint dashed placeholder at the snapped slot - the cursor-attached carry clone owns the visual. Resize: the chip clone with a dashed boundary at the proposed extent. Invalid: destructive marking. */} {dragGhost && (

{dragGhost.kind !== 'move' && ( )}

)} {/* Drag-create draft */} {draftWindow && (

)}

) } function EventCalendarNowIndicator({ days, startHour, endHour, }: { days: Date[] startHour: number endHour: number }): ReactNode { const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const now = useNow(viewConfig.nowIndicatorInterval) const timeZone = settings.timeZone const todayKey = getDayKey(now, timeZone) const todayIndex = days.findIndex((day) => getDayKey(day, timeZone) === todayKey) if (todayIndex === -1) return null const dayStart = zonedStartOfDay(now, timeZone) const minutes = differenceInMinutes(now, dayStart) if (minutes < startHour * 60 || minutes > endHour * 60) return null const top = minutes / 60 - startHour if (viewConfig.renderNowIndicator) { return (

{viewConfig.renderNowIndicator({ time: now })}

) } const columnWidthPct = 100 / days.length return (

{/* hairline across the content columns only (clear of the time gutter) */}

{/* stronger segment + dot over today's column */}

{/* dot leads the line at today's column-start border: pulled 1px left of center (-start-1 = -4px vs the 6px/size-1.5 circle) so it reads as a distinct bullet instead of merging into the line to its right */}

) } type TimeGridViewProps = Omit function EventCalendarWeekView(props: TimeGridViewProps) { return } function EventCalendarDayView(props: TimeGridViewProps) { return } function EventCalendarDaysView(props: TimeGridViewProps) { return } export { EventCalendarDayView, EventCalendarDaysView, EventCalendarNowIndicator, EventCalendarTimeGrid, EventCalendarTimeGutter, EventCalendarWeekView, minuteBlockStyle, useNow, } export type { EventCalendarTimeGridProps } 4e:["$","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","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/components-spaceui-event-calendar.json","https://www.spaceui.one/r/components-spaceui-event-calendar-dnd.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/hooks-dom-use-event-listener.json","https://www.spaceui.one/r/lib-utils.json","https://www.spaceui.one/r/primitives-scroll-area.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/components/spaceui/event-calendar/event-calendar-time-grid/index.tsx","content":"$51","type":"registry:component","target":"components/spaceui/event-calendar-time-grid.tsx"}],"className":"h-[70svh] min-h-80"}]]}]