4e: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"] 4f: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"] 50:T5338,'use client' import { IconRepeat } from '@tabler/icons-react' // Title: Event Calendar Event // Description: The reusable event chip/bar/block - selection, clicks, drag + resize wiring, and the consumer render slot. import { createContext, useContext, useMemo, type CSSProperties, type ReactNode } from 'react' import { useEventCalendar, useEventCalendarSelector, useEventCalendarViewConfig, useEventCalendarViewContext, } from '@/components/spaceui/event-calendar' import { markChipPress, useEventCalendarGestures, wasRecentDrag, } from '@/components/spaceui/event-calendar-dnd' import { spansMultipleDays, toZoned, zonedStartOfDay, } from '@/components/spaceui/event-calendar-lib' import type { EventCalendarOccurrence, 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, format } from 'date-fns' import { cn } from '@/lib/utils' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip' /** * Effective Tailwind palette presets for event colors; every entry works on * light and dark surfaces through the chip's alpha background + accent border. */ const EVENT_CALENDAR_COLORS: Array<{ name: string; value: string }> = [ { name: 'Blue', value: 'var(--color-blue-500)' }, { name: 'Emerald', value: 'var(--color-emerald-500)' }, { name: 'Violet', value: 'var(--color-violet-500)' }, { name: 'Rose', value: 'var(--color-rose-500)' }, { name: 'Amber', value: 'var(--color-amber-500)' }, { name: 'Cyan', value: 'var(--color-cyan-500)' }, { name: 'Orange', value: 'var(--color-orange-500)' }, { name: 'Pink', value: 'var(--color-pink-500)' }, { name: 'Teal', value: 'var(--color-teal-500)' }, { name: 'Indigo', value: 'var(--color-indigo-500)' }, ] /** * Standardized drag-ghost surface treatment, shared verbatim by every view * (month, week/day/N-days, resource). One visual language for interactions: * - move: the event is CARRIED FREELY - a cursor-attached full clone (built * by the dnd engine, data-slot=event-calendar-drag-carry) travels with the * pointer; the in-grid ghost is only this faint dashed placeholder marking * the snapped drop slot. The source stays dimmed in place. * - resize: the event is STRETCHED - the chip itself at the proposed extent * with a dashed boundary instead of solid (slight indicator, no elevation). * - invalid: destructive tint on the placeholder / dashed clone; the engine * adds the not-allowed cursor, a destructive ring on the carry clone, and * a cursor-following validation hint. */ const EVENT_CALENDAR_GHOST = { move: 'rounded-sm border border-dashed border-(--ec-event-color)/50 bg-(--ec-event-color)/8', resize: 'rounded-sm border border-dashed border-(--ec-event-color)/70 overflow-hidden', invalid: 'border-destructive/70 bg-destructive/10', invalidResize: 'border-destructive/70', /** Applied to the clone inside an invalid resize ghost. */ invalidContent: 'opacity-60', } as const /** * Fade-out truncation for stacked timed blocks: squeezed cascade columns * hard-clip titles into a mash of adjacent glyphs; a right-edge mask fade * reads cleaner than an ellipsis at those tiny widths. The mask applies ONLY * below a 10rem container width - mask-image forces text off subpixel * antialiasing onto a grayscale raster layer, so masking every wide chip * makes the whole grid read bolder/blurry and shimmer while the window * resizes. Wide chips keep a plain ellipsis. Consumer renderEvent content * can import and reuse it. */ const EVENT_CALENDAR_FADE_TRUNCATE = 'w-full truncate @max-[10rem]:text-clip @max-[10rem]:[mask-image:linear-gradient(to_right,#000_calc(100%-0.75rem),transparent)] @max-[10rem]:rtl:[mask-image:linear-gradient(to_left,#000_calc(100%-0.75rem),transparent)]' interface EventCalendarChipContextValue { occurrence: EventCalendarOccurrence segment: EventCalendarSegment isDragging: boolean isSelected: boolean } const EventCalendarChipContext = // eslint-disable-next-line @typescript-eslint/no-explicit-any createContext | null>(null) /** The chip's subject; usable inside renderEvent content and chip children. */ function useEventCalendarEventChip(): EventCalendarChipContextValue { const ctx = useContext(EventCalendarChipContext) if (!ctx) { throw new Error('useEventCalendarEventChip must be used within ') } return ctx as EventCalendarChipContextValue } interface EventCalendarEventProps extends Omit, 'children'> { segment: EventCalendarSegment /** Replaces the default chip CONTENT; the wrapper stays calendar-owned. */ children?: ReactNode /** * Static drag clone: renders the chip exactly as-is but inert - no gestures, * resize handles, selection/drag state, focus, or pointer events. Used for * the full-fidelity ghost that tracks the proposed slot during a move. */ preview?: boolean } /** * The one interactive event element used by every view. The wrapper owns * positioning hooks, a11y, selection, drag/resize listeners, and data * attributes; content comes from children, the root renderEvent override, * or the built-in default. */ function EventCalendarEvent({ segment, className, render, children, preview = false, ...props }: EventCalendarEventProps) { const instance = useEventCalendar() const viewConfig = useEventCalendarViewConfig() const { view } = useEventCalendarViewContext() const gestures = useEventCalendarGestures() const { settings } = instance const occurrence = segment.occurrence const event = occurrence.event const isSelectedRaw = useEventCalendarSelector( (state) => state.selection.eventKeys.includes(occurrence.key), { calendar: instance }, ) const isDraggingRaw = useEventCalendarSelector( (state) => state.drag?.occurrence.key === occurrence.key, { calendar: instance }, ) // reactive, unlike gestures.canResize: api.setInteractions({ resize }) // must add/remove the handles without waiting for an unrelated re-render const resizeOn = useEventCalendarSelector((state) => state.interactions.resize, { calendar: instance, }) // A preview clone must never inherit the source's selected/dragging state // (the drag key matches, which would dim the clone itself). const isSelected = preview ? false : isSelectedRaw const isDragging = preview ? false : isDraggingRaw const isBar = occurrence.allDay || spansMultipleDays(occurrence, settings.timeZone) const inTimeGrid = view === 'week' || view === 'day' || view === 'days' || view === 'resource' const interactive = view !== 'agenda' && !preview const timedBlock = inTimeGrid && !isBar const horizontalBar = isBar && !inTimeGrid // >= compactEventMinutes renders the stacked (title over time) layout; // squeezed cascade columns there fade-truncate instead of hard-clipping // into neighbors const stackedBlock = timedBlock && (segment.endMin ?? 0) - (segment.startMin ?? 0) >= viewConfig.compactEventMinutes const defaultContent = ( <> {/* leading color dot for single-row chips (month cells, all-day bars); time-grid blocks read their color from the tinted surface instead - in the stacked layout a dot would sit alone on the first line */} {!timedBlock && ( )} {occurrence.isRecurring && } {event.title} {/* month cells are narrow: a compact never-shrinking start time keeps the title readable; grid views show the full range */} {!occurrence.allDay && segment.isStart && (view === 'month' ? ( {format(toZoned(occurrence.start, settings.timeZone), settings.i18n.formats.eventTime, { locale: settings.locale, })} ) : ( ))} ) // Agenda time text is per-day for multi-day events: the first day reads // "From 9:00 AM", middle days "All day", the last day "Until 5:00 PM". // Boundaries derive from the occurrence vs segment.day (never the packing // flags - lane merging rewrites those on shared segment objects). const agendaTimeText = (() => { if (view !== 'agenda') return '' if (occurrence.allDay) return settings.i18n.labels.allDay const dayStart = zonedStartOfDay(segment.day, settings.timeZone) const dayEnd = addDays(toZoned(dayStart, settings.timeZone), 1) const startsBefore = occurrence.start < dayStart const endsAfter = occurrence.end > dayEnd if (startsBefore && endsAfter) return settings.i18n.labels.allDay if (endsAfter) { return settings.i18n.labels.timeFrom( format(toZoned(occurrence.start, settings.timeZone), settings.i18n.formats.eventTime, { locale: settings.locale, }), ) } if (startsBefore) { return settings.i18n.labels.timeUntil( format(toZoned(occurrence.end, settings.timeZone), settings.i18n.formats.eventTime, { locale: settings.locale, }), ) } return settings.i18n.functions.formatEventTime( toZoned(occurrence.start, settings.timeZone), toZoned(occurrence.end, settings.timeZone), false, { locale: settings.locale }, ) })() // Agenda default row: time column, color-dot badge, plain title const agendaDefaultContent = ( <> {agendaTimeText} {event.title} {occurrence.isRecurring && } ) // Custom chip content is memoized so a drag - which re-renders the lane on // every pointer move - never re-invokes the consumer's renderEvent per frame. // The element stays referentially stable across those re-renders, so React // skips the custom subtree and it doesn't flicker; on drop only the moved // chip's inputs change and recompute. Deps are exactly renderProps' inputs // plus the render fns (all stable during an internal drag). const customContent = useMemo(() => { const renderProps = { occurrence, segment, view, isDragging, isSelected } return view === 'agenda' ? viewConfig.renderAgendaEvent?.(renderProps) : viewConfig.renderEvent?.(renderProps) }, [occurrence, segment, view, isDragging, isSelected, viewConfig.renderAgendaEvent, viewConfig.renderEvent]) const content = children ?? customContent ?? (view === 'agenda' ? agendaDefaultContent : defaultContent) const timeLabel = settings.i18n.functions.formatEventTime( toZoned(occurrence.start, settings.timeZone), toZoned(occurrence.end, settings.timeZone), occurrence.allDay, { locale: settings.locale }, ) // native hover tooltip text; a consumer formatter returning undefined // drops the title attribute entirely (e.g. when it renders its own tooltip) const label = settings.i18n.functions.formatEventLabel ? settings.i18n.functions.formatEventLabel(event.title, timeLabel) : `${event.title}, ${timeLabel}` // Optional styled tooltip on hover / keyboard focus (viewConfig.eventTooltip, // default off). When on, the native title is dropped so the two never stack; // a preview clone never gets one. Content defaults to the label and can be // overridden with renderEventTooltip - a falsy result (null/undefined, or // the `false`/"" that `cond && ` yields) falls back to the label, and // an empty label (i18n opt-out) leaves no content so the tooltip is skipped. const tooltipOpts = typeof viewConfig.eventTooltip === 'object' ? viewConfig.eventTooltip : null const tooltipContent = !preview && viewConfig.eventTooltip ? viewConfig.renderEventTooltip?.({ occurrence, segment, view, label, }) || label : null const tooltipOn = Boolean(tooltipContent) const showResize = interactive && resizeOn && !event.readOnly && event.resizable !== false // Hover grip pill (mirrors the gantt bars): a tiny bar inside each resize // handle signals the direction. Shown on every resizable chip - compact // sub-compactEventMinutes timed blocks included - because the chip // min-height (1.5rem) leaves room at the very top/bottom edges without // colliding with the vertically-centered title. const grip = ( ) const resizeHandles = showResize && ( <> {timedBlock && segment.isStart && ( gestures.beginResize(e, segment, 'start')} > {grip} )} {timedBlock && segment.isEnd && ( gestures.beginResize(e, segment, 'end')} > {grip} )} {(horizontalBar || (isBar && inTimeGrid)) && segment.isStart && ( gestures.beginResize(e, segment, 'start')} > {grip} )} {(horizontalBar || (isBar && inTimeGrid)) && segment.isEnd && ( gestures.beginResize(e, segment, 'end')} > {grip} )} ) const defaultProps = { type: 'button' as const, 'data-slot': 'event-calendar-event', 'data-view': view, 'data-all-day': occurrence.allDay || undefined, 'data-recurring': occurrence.isRecurring || undefined, 'data-selected': isSelected || undefined, 'data-dragging': isDragging || undefined, 'data-preview': preview || undefined, 'data-past': occurrence.end.getTime() < Date.now() || undefined, // native hover reveal for squeezed/faded chips: full title + time (dropped // when the styled eventTooltip is on so the two never stack) title: preview || tooltipOn ? undefined : label, 'aria-label': settings.i18n.functions.formatEventAriaLabel?.( event.title, timeLabel, segment.continuesBefore || segment.continuesAfter, ) ?? `${event.title}, ${timeLabel}${ segment.continuesBefore || segment.continuesAfter ? `, ${settings.i18n.labels.continues}` : '' }`, // Selection is otherwise conveyed by a background tint alone; the chip is a // real toggle in every interactive view, so a screen reader hears the state // (agenda rows never select, previews are inert - both stay unpressed). 'aria-pressed': interactive ? isSelected : undefined, 'aria-hidden': preview || undefined, tabIndex: preview ? -1 : undefined, style: { '--ec-event-color': event.color ?? 'var(--color-primary)', } as CSSProperties, onPointerDown: (e: React.PointerEvent) => { e.stopPropagation() // suppress the trailing slot-create click if this press does not turn // into a drag (e.g. a locked chip) - see markChipPress markChipPress() if (interactive) gestures.beginMove(e, segment) }, onClick: (e: React.MouseEvent) => { e.stopPropagation() if (wasRecentDrag()) return // consumer first: e.preventDefault() opts out of built-in selection // (e.g. click = open dialog only, no selected tint) settings.onEventClick?.(occurrence, e) // the agenda is a read-only list: a click never selects/focuses a row if (e.defaultPrevented || view === 'agenda') return instance.api.selectEvent(occurrence.key) }, onDoubleClick: (e: React.MouseEvent) => { e.stopPropagation() settings.onEventDoubleClick?.(occurrence, e) }, className: cn( 'group/ec-event text-foreground relative flex w-full min-w-0 cursor-pointer touch-none items-center overflow-hidden text-start select-none', 'focus-visible:ring-ring/50 outline-none focus-visible:ring-2', preview && 'pointer-events-none', view === 'agenda' ? // plain list row: color lives in the dot badge, not a tinted pill; // hover AND selection surfaces are owned by the agenda row wrapper 'gap-3 rounded-md text-sm' : cn( // @container removes intrinsic sizing; only grid chips are containers // py-1: room above/below inline badges (attendee pill etc.) '@container gap-1.5 rounded-sm px-1.5 py-1 leading-normal', // soft tint + hairline inset ring: color reads from the surface // itself (no accent border), stays legible in light and dark 'bg-(--ec-event-color)/15 hover:bg-(--ec-event-color)/25', // a flat tint reads darker over a dark surface, so lift it a little // in dark mode to keep a lighter, softer chip tone 'dark:bg-(--ec-event-color)/20 dark:hover:bg-(--ec-event-color)/30', 'inset-ring inset-ring-(--ec-event-color)/15', 'transition-[background-color,box-shadow] duration-150', 'data-dragging:opacity-40', 'data-selected:bg-(--ec-event-color)/30 data-selected:inset-ring-(--ec-event-color)/40', segment.continuesBefore && 'rounded-s-none', segment.continuesAfter && 'rounded-e-none', ), viewConfig.classNames?.event, className, ), children: ( <> {content} {resizeHandles} ), } const chip = useRender({ defaultTagName: 'button', render, props: mergeProps<'button'>(defaultProps, props), }) return ( {tooltipOn ? ( {tooltipContent} ) : ( chip )} ) } export { EVENT_CALENDAR_COLORS, EVENT_CALENDAR_FADE_TRUNCATE, EVENT_CALENDAR_GHOST, EventCalendarEvent, useEventCalendarEventChip, } export type { EventCalendarChipContextValue, EventCalendarEventProps } 4d:["$","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"}]]}]}]]}],["$","$L4e",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-lib.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-tooltip.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/components/spaceui/event-calendar/event-calendar-event/index.tsx","content":"$50","type":"registry:component","target":"components/spaceui/event-calendar-event.tsx"}],"className":"h-[70svh] min-h-80"}]]}]