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:T635a,'use client' // Title: Event Calendar Resource View // Description: Resource-columns day grid for booking scenarios - one time axis, one column per resource, full drag, resize, and drag-create. import { useEffect, useMemo, useRef, useState, type CSSProperties } from 'react' import { EventCalendarViewContext, useEventCalendar, useEventCalendarDay, useEventCalendarSelector, useEventCalendarSettings, useEventCalendarViewConfig, 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 { flattenResources, getDayKey, getDayTotalMinutes, packTimedSegments, resolveOffDay, snapMinutes, toZoned, zonedStartOfDay, } from '@/components/spaceui/event-calendar-lib' import { EventCalendarNowIndicator, EventCalendarTimeGutter, minuteBlockStyle, } from '@/components/spaceui/event-calendar-time-grid' import type { EventCalendarResource, EventCalendarSegment, } 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 } from 'date-fns' import { cn } from '@/lib/utils' import { ScrollArea } from '@/components/ui/scroll-area' const EMPTY_ALL_DAY_SEGMENTS: EventCalendarSegment[] = [] interface EventCalendarResourceViewProps extends useRender.ComponentProps<'div'> { dayStartHour?: number dayEndHour?: number showAllDay?: boolean /** Gutter/gridline interval in minutes; defaults to the interval view config. */ interval?: number } /** Leaf resources become booking columns for the anchor day. */ function EventCalendarResourceView({ className, render, dayStartHour, dayEndHour, showAllDay = true, interval: intervalProp, ...props }: EventCalendarResourceViewProps) { const instance = useEventCalendar() const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const { effective } = useEventCalendarViewSettings() const anchorDate = useEventCalendarSelector((state) => state.date, { isEqual: (a, b) => a.getTime() === b.getTime(), }) 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 day = zonedStartOfDay(anchorDate, settings.timeZone) const resources = useMemo( () => flattenResources(settings.resources) .filter(({ resource }) => !resource.children?.length) .map(({ resource }) => resource), [settings.resources], ) // Initial scroll + api.scrollToTime (same contract as the time grid) const scrollRef = useRef(null) useEffect(() => { if (!contained) return const el = scrollRef.current if (!el) return const viewport = el.querySelector('[data-slot=scroll-area-viewport]') 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, ]) const slots = useMemo(() => { const result: number[] = [] for (let m = startHour * 60; m < endHour * 60; m += interval) { result.push(m) } return result }, [startHour, endHour, interval]) // All-day segments for renderAllDaySection - the same index bucket the // cells read; inert (stable empty array, so the subscription never // re-renders) while the override is unset. const allDaySegments = useEventCalendarSelector( () => viewConfig.renderAllDaySection ? (instance.internals.getIndex().byDay.get(getDayKey(day, settings.timeZone))?.allDay ?? EMPTY_ALL_DAY_SEGMENTS) : EMPTY_ALL_DAY_SEGMENTS, { isEqual: (a, b) => a === b || (a.length === b.length && a.every((segment, i) => segment === b[i])), }, ) const gridTemplateColumns = `repeat(${resources.length || 1}, minmax(var(--ec-resource-col-min,8rem), 1fr))` const track = (

{/* shared gutter component, so renderTimeGutterSlot and classNames.timeGutter customizations apply here too */}

{resources.map((resource) => ( ))}

{effective.nowIndicator && }

) const defaultProps = { 'data-slot': 'event-calendar-resource-view', 'data-view': 'resource', 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: ( <> {/* Resource header row */}

{resources.map((resource) => (

{viewConfig.renderResourceHeader?.({ resource }) ?? resource.title}

))}

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

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

{settings.i18n.labels.allDay}

{resources.map((resource) => ( ))}

)}

)} {contained ? (

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

{track}

) : ( {track} )}

) : ( track )} ), } return ( {useRender({ defaultTagName: 'div', render, props: mergeProps<'div'>(defaultProps, props), })} ) } function EventCalendarResourceAllDayCell({ resource, day }: { resource: EventCalendarResource; day: Date }) { const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const { effective } = useEventCalendarViewSettings() const gestures = useEventCalendarGestures() const { segments } = useEventCalendarDay(day) const mine = segments.allDay.filter((segment) => segment.occurrence.event.resourceId === resource.id) 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' }) // Slot-draft highlight, mirroring the time-grid all-day cell. The dnd // layer's all-day create branch does not plumb resourceId into the draft, // so every resource cell covering the day highlights together. const inDraft = useEventCalendarSelector((state) => { const draft = state.slotDraft if (!draft || !draft.allDay) return false return draft.start < dayEnd && draft.end > dayStart }) 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: 'resource', resourceId: resource.id, }, e, ) } }} > {mine.map((segment) => ( ))} {isDropTarget && ( )}

) } function EventCalendarResourceColumn({ resource, day, startHour, endHour, interval, }: { resource: EventCalendarResource day: Date startHour: number endHour: number interval: number }) { const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const { effective } = useEventCalendarViewSettings() 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 totalMinutes = getDayTotalMinutes(day, timeZone) const boundsStartMin = startHour * 60 const boundsEndMin = Math.min(endHour * 60, totalMinutes) const boundsMinutes = Math.max(60, boundsEndMin - boundsStartMin) // Filter this resource's timed segments and repack per column. // Clones keep the shared index cache untouched. Segments the day bounds clip // away are dropped here too, otherwise they hold a column nobody can see and // leave a phantom empty half beside the first in-bounds chip. const packed = useMemo(() => { const mine = segments.timed .filter((segment) => { if (segment.occurrence.event.resourceId !== resource.id) return false const startMin = Math.max(segment.startMin ?? 0, boundsStartMin) const endMin = Math.min(segment.endMin ?? startMin, boundsEndMin) return endMin > boundsStartMin && startMin < boundsEndMin }) .map((segment) => ({ ...segment }) as EventCalendarSegment) packTimedSegments(mine) return mine }, [segments.timed, resource.id, boundsStartMin, boundsEndMin]) const dragGhost = useEventCalendarSelector< unknown, { window: [number, number] valid: boolean kind: string color?: string title: string occurrence: EventCalendarSegment['occurrence'] proposedStart: Date proposedEnd: Date } | null >( (state) => { const drag = state.drag if (!drag || drag.proposedDayGranular) return null // Moves carry a proposedResourceId (they can cross columns); resizes stay // in place and leave it undefined, so fall back to the event's own // resource - otherwise the resize ghost is filtered out of every column. const targetResourceId = drag.proposedResourceId ?? drag.occurrence.event.resourceId if (targetResourceId !== resource.id) return null const from = Math.max((drag.proposedStart.getTime() - dayStart.getTime()) / 60000, boundsStartMin) const to = Math.min((drag.proposedEnd.getTime() - dayStart.getTime()) / 60000, boundsEndMin) if (to <= from) return null return { window: [from, to] as [number, number], valid: drag.valid, kind: drag.kind, color: drag.occurrence.event.color, title: drag.occurrence.event.title, occurrence: drag.occurrence, proposedStart: drag.proposedStart, proposedEnd: drag.proposedEnd, } }, { 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.proposedStart.getTime() === b.proposedStart.getTime() && a.proposedEnd.getTime() === b.proposedEnd.getTime()), }, ) const draftWindow = useEventCalendarSelector( (state) => { const draft = state.slotDraft if (!draft || draft.allDay || draft.resourceId !== resource.id) { return null } const from = Math.max((draft.start.getTime() - dayStart.getTime()) / 60000, boundsStartMin) const to = Math.min((draft.end.getTime() - dayStart.getTime()) / 60000, boundsEndMin) return to > from ? [from, to] : null }, { isEqual: (a, b) => a === b || (a !== null && b !== null && a[0] === b[0] && a[1] === b[1]), }, ) return (

{ if (e.target === e.currentTarget) gestures.beginCreate(e, day, false) }} onClick={(e) => { if (e.target !== e.currentTarget || wasRecentDrag() || wasRecentChipPress()) return 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) settings.onSlotClick?.( { date: addMinutes(dayStart, clamped), end: addMinutes(dayStart, clamped + settings.slotDuration), allDay: false, view: 'resource', resourceId: resource.id, }, e, ) }} > {packed.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, )} />

) })} {/* Standardized ghost (EVENT_CALENDAR_GHOST): faint drop placeholder for moves (the cursor-attached carry clone owns the visual), dashed clone for resizes, destructive marking when invalid. */} {dragGhost && (

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

)} {draftWindow && (

)}

) } export { EventCalendarResourceView } export type { EventCalendarResourceViewProps } 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","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-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-time-grid.json","https://www.spaceui.one/r/components-spaceui-event-calendar-types.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-resource-view/index.tsx","content":"$52","type":"registry:component","target":"components/spaceui/event-calendar-resource-view.tsx"}],"className":"h-[70svh] min-h-80"}]]}]