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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T9d35,import * as React from "react" import { closestCenter, DndContext, DragOverlay, PointerSensor, pointerWithin, useDraggable, useDroppable, useSensor, useSensors, type CollisionDetection, type DragEndEvent, type DragMoveEvent, type DragOverEvent, type DragStartEvent, } from "@dnd-kit/core" import { Slot } from "@radix-ui/react-slot" import { createPortal } from "react-dom" import tunnel from "tunnel-rat" import { motion, useReducedMotion } from "motion/react" import { Button } from "@/components/ui/button" import { Field, FieldGroup, FieldLabel } from "@/components/ui/field" import { Input } from "@/components/ui/input" import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from "@/components/ui/popover" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { cn } from "@/lib/utils" export interface TimelineSlotData { id: string rowId: string startTime: string duration: number [key: string]: unknown } export interface TimelineRowData { id: string label: string [key: string]: unknown } export interface TimelineConfig { startHour: number endHour: number snapIntervalMinutes?: number columnWidth?: number } type DragPreviewTunnel = ReturnType type TimelineContextValue = { config: TimelineConfig pixelsPerMinute: number timelineWidth: number timelineRef: React.RefObject columnRef: React.RefObject dragPreviewTunnel: DragPreviewTunnel onSlotPositionChange?: ( slotId: string, newTime: string, newRowId: string ) => Promise | boolean onSlotResize?: ( slotId: string, newTime: string, newDuration: number, isComplete?: boolean ) => Promise | boolean | void onValidateDrop?: ( slotId: string, newTime: string, newRowId: string ) => boolean onSlotClick?: (slotId: string) => void } const TimelineContext = React.createContext(null) const TIMELINE_AGENDA_BREAKPOINT = 700 export function useTimeline() { const context = React.useContext(TimelineContext) if (!context) { throw new Error("Timeline components must be used within TimelineProvider") } return context } export function timeToMinutes(time: string): number { const [hours, minutes] = time.split(":").map(Number) return hours * 60 + minutes } export function minutesToTime(minutes: number): string { const hours = Math.floor(minutes / 60) const remainingMinutes = minutes % 60 return `${hours.toString().padStart(2, "0")}:${remainingMinutes .toString() .padStart(2, "0")}` } export interface TimelineProviderProps { children: React.ReactNode config: TimelineConfig percentageInView?: number onSlotPositionChange?: ( slotId: string, newTime: string, newRowId: string ) => Promise | boolean onSlotResize?: ( slotId: string, newTime: string, newDuration: number, isComplete?: boolean ) => Promise | boolean | void onValidateDrop?: ( slotId: string, newTime: string, newRowId: string ) => boolean onSlotClick?: (slotId: string) => void style?: React.CSSProperties className?: string } export function TimelineProvider({ children, config, percentageInView = 100, onSlotPositionChange, onSlotResize, onValidateDrop, onSlotClick, style, className, }: TimelineProviderProps) { const [viewportWidth, setViewportWidth] = React.useState(0) const timelineRef = React.useRef(null) const columnRef = React.useRef(null) const dragPreviewTunnel = React.useMemo(() => tunnel(), []) const columnWidth = config.columnWidth ?? 112 React.useEffect(() => { function measure() { if (timelineRef.current) { setViewportWidth(timelineRef.current.clientWidth - columnWidth) } } measure() window.addEventListener("resize", measure) const timeout = window.setTimeout(measure, 100) return () => { window.removeEventListener("resize", measure) window.clearTimeout(timeout) } }, [columnWidth]) const totalMinutes = (config.endHour - config.startHour) * 60 const basePixelsPerMinute = viewportWidth > 0 ? viewportWidth / totalMinutes : 10 const pixelsPerMinute = basePixelsPerMinute * (100 / percentageInView) const timelineWidth = totalMinutes * pixelsPerMinute const contextValue = React.useMemo( () => ({ config, pixelsPerMinute, timelineWidth, timelineRef, columnRef, dragPreviewTunnel, onSlotPositionChange, onSlotResize, onValidateDrop, onSlotClick, }), [ config, dragPreviewTunnel, onSlotClick, onSlotPositionChange, onSlotResize, onValidateDrop, pixelsPerMinute, timelineWidth, ] ) return (

{children}

) } type TimelineInjectedProps = { slots?: TimelineSlotData[] rows?: TimelineRowData[] activeSlotId?: string | null overRowId?: string | null draggedNewTime?: string | null isValidDrop?: boolean getSnappedDelta?: (deltaX: number) => number _showDropRegion?: boolean _dropRegionTime?: string | null } export interface TimelineProps { slots: TimelineSlotData[] rows: TimelineRowData[] children: React.ReactNode mobileMode?: "auto" | "agenda" | "scroll" afterGrid?: React.ReactNode onSlotCreate?: (slot: TimelineSlotData) => void onExternalDrop?: ( activeId: string, overId: string | null ) => Promise | void className?: string } export function Timeline({ slots, rows, children, mobileMode = "auto", afterGrid, onSlotCreate, onExternalDrop, className, }: TimelineProps) { const { config, pixelsPerMinute, timelineRef, dragPreviewTunnel, onSlotClick, onSlotPositionChange, onValidateDrop, } = useTimeline() const [mousePosition, setMousePosition] = React.useState<{ x: number y: number } | null>(null) const [localActiveSlot, setLocalActiveSlot] = React.useState( null ) const [localOverRow, setLocalOverRow] = React.useState(null) const [localDraggedTime, setLocalDraggedTime] = React.useState( null ) const [isValid, setIsValid] = React.useState(true) const DragPreviewOut = dragPreviewTunnel.Out const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 8 }, }) ) const reduceMotion = useReducedMotion() const snapInterval = config.snapIntervalMinutes ?? 15 const columnWidth = config.columnWidth ?? 112 const rowIds = React.useMemo( () => new Set(rows.map((row) => String(row.id))), [rows] ) const containerRef = React.useRef(null) const [containerWidth, setContainerWidth] = React.useState(0) React.useEffect(() => { const element = containerRef.current if (!element) return const measure = () => setContainerWidth(element.clientWidth) const observer = new ResizeObserver(measure) measure() observer.observe(element) return () => observer.disconnect() }, []) function snapToInterval(minutes: number): number { return Math.round(minutes / snapInterval) * snapInterval } function getSnappedDelta(deltaX: number): number { const deltaMinutes = deltaX / pixelsPerMinute const snappedDeltaMinutes = Math.round(deltaMinutes / snapInterval) * snapInterval return snappedDeltaMinutes * pixelsPerMinute } function calculateNewTime(originalTime: string, deltaX: number): string { const originalMinutes = timeToMinutes(originalTime) const deltaMinutes = Math.round(deltaX / pixelsPerMinute) const newMinutes = originalMinutes + deltaMinutes const snappedMinutes = snapToInterval(newMinutes) const clampedMinutes = Math.max( config.startHour * 60, Math.min((config.endHour - 1) * 60, snappedMinutes) ) return minutesToTime(clampedMinutes) } function handleMouseMove(event: React.MouseEvent) { if (!timelineRef.current) return const rect = timelineRef.current.getBoundingClientRect() setMousePosition({ x: event.clientX - rect.left + timelineRef.current.scrollLeft, y: event.clientY - rect.top, }) } function handleMouseLeave() { setMousePosition(null) } const mouseTime = mousePosition ? minutesToTime( Math.floor((mousePosition.x - columnWidth) / pixelsPerMinute) + config.startHour * 60 ) : null function handleDragStart(event: DragStartEvent) { const activeId = String(event.active.id) const isSlotDrag = slots.some((slot) => slot.id === activeId) setLocalActiveSlot(isSlotDrag ? activeId : null) } function handleDragOver(event: DragOverEvent) { if (localActiveSlot && event.over && rowIds.has(String(event.over.id))) { setLocalOverRow(String(event.over.id)) } else { setLocalOverRow(null) setLocalDraggedTime(null) } } function handleDragMove(event: DragMoveEvent) { const { over, active, delta } = event if (localActiveSlot && over && rowIds.has(String(over.id))) { const slot = slots.find((item) => item.id === active.id) if (slot) { const newTime = calculateNewTime(slot.startTime, delta.x) const overId = String(over.id) setLocalDraggedTime(newTime) setIsValid( onValidateDrop ? onValidateDrop(slot.id, newTime, overId) : true ) } } else if (localActiveSlot) { setLocalDraggedTime(null) setIsValid(true) } } const collisionDetection: CollisionDetection = (args) => { const pointerCollisions = pointerWithin(args) if (pointerCollisions.length > 0) { const externalCollision = pointerCollisions.find( (collision) => !rowIds.has(String(collision.id)) ) if (externalCollision) { return [externalCollision] } return pointerCollisions } return closestCenter(args) } function handleDragCancel() { setLocalActiveSlot(null) setLocalOverRow(null) setLocalDraggedTime(null) setIsValid(true) } async function handleDragEnd(event: DragEndEvent) { const { active, over, delta } = event setLocalActiveSlot(null) setLocalOverRow(null) setLocalDraggedTime(null) setIsValid(true) const activeId = String(active.id) if (over) { const overId = String(over.id) const isRowTarget = rows.some((row) => row.id === overId) const slot = slots.find((item) => item.id === active.id) if (!slot || !isRowTarget) { await onExternalDrop?.(activeId, overId) return } const newTime = calculateNewTime(slot.startTime, delta.x) const newRowId = overId if (onValidateDrop && !onValidateDrop(slot.id, newTime, newRowId)) { return } if (slot.rowId === newRowId && slot.startTime === newTime) { return } await onSlotPositionChange?.(activeId, newTime, newRowId) } else if (onExternalDrop && !slots.some((slot) => slot.id === activeId)) { await onExternalDrop(activeId, null) } } const activeSlot = localActiveSlot ? slots.find((slot) => slot.id === localActiveSlot) : null const showAgenda = mobileMode === "agenda" || (mobileMode === "auto" && containerWidth > 0 && containerWidth < TIMELINE_AGENDA_BREAKPOINT) const showGrid = mobileMode === "scroll" || !showAgenda return (

{showAgenda ? ( ) : null} {showGrid && mousePosition && mouseTime && !localActiveSlot ? ( ) : null} {showGrid ? (

{React.Children.map(children, (child) => { if (!React.isValidElement(child)) return child return React.cloneElement(child, { slots, rows, activeSlotId: localActiveSlot, overRowId: localOverRow, draggedNewTime: localDraggedTime, isValidDrop: isValid, getSnappedDelta, _showDropRegion: Boolean(localActiveSlot && localDraggedTime), _dropRegionTime: localDraggedTime, }) })}

) : null} {afterGrid} {typeof document !== "undefined" ? createPortal( {localActiveSlot && activeSlot ? (

) : null} , document.body ) : null}

) } function TimelineAgenda({ slots, rows, onSlotClick, onSlotCreate, reduceMotion, }: { slots: TimelineSlotData[] rows: TimelineRowData[] onSlotClick?: (slotId: string) => void onSlotCreate?: (slot: TimelineSlotData) => void reduceMotion: boolean | null }) { const rowMap = React.useMemo( () => new Map(rows.map((row) => [row.id, row])), [rows] ) const sortedSlots = React.useMemo( () => slots .slice() .sort( (left, right) => timeToMinutes(left.startTime) - timeToMinutes(right.startTime) ), [slots] ) return (

Agenda

{sortedSlots.length} scheduled items

{rows.length} lanes

{sortedSlots.map((slot, index) => { const row = rowMap.get(slot.rowId) const nextSlot = sortedSlots[index + 1] return ( onSlotClick?.(slot.id)} className="grid grid-cols-[4.5rem_1fr] gap-3 rounded-md border bg-card p-3 text-left shadow-xs transition-colors hover:bg-muted/35 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50" initial={{ opacity: 0, y: reduceMotion ? 0 : 6 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: reduceMotion ? 0 : 0.16, delay: reduceMotion ? 0 : index * 0.02, }} >

{slot.startTime}

{formatTimelineDuration(slot.duration)}

{String(slot.title ?? slot.label ?? "Timeline item")}

{row?.label ?? slot.rowId}

{slot.owner ? (

{String(slot.owner)}

) : null}

{onSlotCreate ? ( ) : null} ) })} {sortedSlots.length === 0 && onSlotCreate ? ( ) : null}

) } function TimelineAgendaCreateSlot({ rows, afterSlot, beforeSlot, onSlotCreate, }: { rows: TimelineRowData[] afterSlot?: TimelineSlotData beforeSlot?: TimelineSlotData onSlotCreate: (slot: TimelineSlotData) => void }) { const startMinutes = afterSlot ? timeToMinutes(afterSlot.startTime) + afterSlot.duration : 9 * 60 const nextStartMinutes = beforeSlot ? timeToMinutes(beforeSlot.startTime) : null const defaultStart = minutesToTime(startMinutes) const defaultEnd = minutesToTime( nextStartMinutes && nextStartMinutes > startMinutes ? Math.min(nextStartMinutes, startMinutes + 60) : startMinutes + 60 ) const [open, setOpen] = React.useState(false) const [title, setTitle] = React.useState("New slot") const [startTime, setStartTime] = React.useState(defaultStart) const [endTime, setEndTime] = React.useState(defaultEnd) const [rowId, setRowId] = React.useState( afterSlot?.rowId ?? rows[0]?.id ?? "default" ) React.useEffect(() => { if (!open) return setStartTime(defaultStart) setEndTime(defaultEnd) setRowId(afterSlot?.rowId ?? rows[0]?.id ?? "default") }, [afterSlot?.rowId, defaultEnd, defaultStart, open, rows]) function createSlot(event: React.FormEvent) { event.preventDefault() const start = timeToMinutes(startTime) const end = timeToMinutes(endTime) const duration = Math.max(15, end > start ? end - start : 60) onSlotCreate({ id: `slot-${Date.now()}`, rowId, startTime, duration, title: title.trim() || "New slot", }) setTitle("New slot") setOpen(false) } return (

Add slot Create a scheduled item in the agenda.

Title setTitle(event.target.value)} />

From setStartTime(event.target.value)} /> To setEndTime(event.target.value)} />

Lane

) } function formatTimelineDuration(duration: number) { if (duration < 60) return `${duration}m` const hours = Math.floor(duration / 60) const minutes = duration % 60 return minutes === 0 ? `${hours}h` : `${hours}h ${minutes}m` } export interface TimelineHeaderProps { className?: string columnLabel?: React.ReactNode } export function TimelineHeader({ className, columnLabel = "Row", }: TimelineHeaderProps) { const { config, pixelsPerMinute, columnRef } = useTimeline() const hourMarkers = [] for (let hour = config.startHour; hour < config.endHour; hour += 1) { hourMarkers.push({ hour, label: `${hour}:00`, position: (hour - config.startHour) * 60 * pixelsPerMinute, }) } return (

{columnLabel}

{hourMarkers.map((marker) => (

{marker.label}

))}

) } export interface TimelineRowProps extends TimelineInjectedProps { row: TimelineRowData slots: TimelineSlotData[] children: (slot: TimelineSlotData) => React.ReactNode renderRowHeader?: (row: TimelineRowData) => React.ReactNode renderRowExtras?: (row: TimelineRowData) => React.ReactNode className?: string asChild?: boolean } export function TimelineRow({ row, slots, children, renderRowHeader, renderRowExtras, className, asChild, ...props }: TimelineRowProps) { const { config, pixelsPerMinute, timelineWidth } = useTimeline() const Comp = asChild ? Slot : "div" const { setNodeRef, isOver } = useDroppable({ id: row.id, }) const rowSlots = slots.filter((slot) => slot.rowId === row.id) const isValidDrop = props.isValidDrop !== false const isHovered = isOver || props.overRowId === row.id const hourMarkers = [] for (let hour = config.startHour; hour <= config.endHour; hour += 1) { hourMarkers.push({ hour, position: (hour - config.startHour) * 60 * pixelsPerMinute, }) } const quarterHourMarkers = [] const totalMinutes = (config.endHour - config.startHour) * 60 for (let minutes = 15; minutes < totalMinutes; minutes += 15) { if (minutes % 60 !== 0) { quarterHourMarkers.push({ position: minutes * pixelsPerMinute, }) } } return (

{renderRowHeader ? ( renderRowHeader(row) ) : ( {row.label} )}

{quarterHourMarkers.map((marker, index) => (

))} {hourMarkers.map((marker) => (

))} {renderRowExtras ? renderRowExtras(row) : null} {rowSlots.map((slot) => { const slotElement = children(slot) return ( {React.isValidElement(slotElement) ? React.cloneElement(slotElement, { activeSlotId: props.activeSlotId, getSnappedDelta: props.getSnappedDelta, }) : slotElement} ) })} {isHovered && props.draggedNewTime && props.activeSlotId ? ( ) : null}

) } type TimelineSlotInjectedProps = { activeSlotId?: string | null getSnappedDelta?: (deltaX: number) => number } export interface TimelineSlotProps extends TimelineSlotInjectedProps { slot: TimelineSlotData children: React.ReactNode className?: string asChild?: boolean } export function TimelineSlot({ slot, children, className, asChild, ...props }: TimelineSlotProps) { const { config, pixelsPerMinute, onSlotClick, onSlotResize, dragPreviewTunnel, } = useTimeline() const Comp = asChild ? Slot : "div" const DragPreviewIn = dragPreviewTunnel.In const { attributes, listeners, setNodeRef, isDragging, transform } = useDraggable({ id: slot.id, }) const startMinutes = timeToMinutes(slot.startTime) const endMinutes = startMinutes + slot.duration const left = (startMinutes - config.startHour * 60) * pixelsPerMinute const width = slot.duration * pixelsPerMinute const isActiveSlot = props.activeSlotId === slot.id const snapInterval = config.snapIntervalMinutes ?? 15 function handleResizeStart( event: React.PointerEvent, edge: "left" | "right" ) { if (!onSlotResize) return event.stopPropagation() event.preventDefault() const target = event.currentTarget as HTMLElement target.setPointerCapture(event.pointerId) const initialX = event.clientX const initialStart = startMinutes const initialEnd = endMinutes const timelineStart = config.startHour * 60 const timelineEnd = config.endHour * 60 const minDuration = snapInterval function getDeltaMinutes(clientX: number) { const rawDeltaMinutes = (clientX - initialX) / pixelsPerMinute return Math.round(rawDeltaMinutes / snapInterval) * snapInterval } function getNextSize(clientX: number) { const deltaMinutes = getDeltaMinutes(clientX) if (edge === "left") { const newStart = Math.max( timelineStart, Math.min(initialStart + deltaMinutes, initialEnd - minDuration) ) return { start: newStart, duration: initialEnd - newStart, } } const newEnd = Math.max( initialStart + minDuration, Math.min(initialEnd + deltaMinutes, timelineEnd) ) return { start: initialStart, duration: newEnd - initialStart, } } function handlePointerMove(moveEvent: PointerEvent) { const next = getNextSize(moveEvent.clientX) void onSlotResize?.( slot.id, minutesToTime(next.start), next.duration, false ) } function handlePointerUp(upEvent: PointerEvent) { const next = getNextSize(upEvent.clientX) void onSlotResize?.( slot.id, minutesToTime(next.start), next.duration, true ) target.releasePointerCapture(upEvent.pointerId) window.removeEventListener("pointermove", handlePointerMove) window.removeEventListener("pointerup", handlePointerUp) } window.addEventListener("pointermove", handlePointerMove) window.addEventListener("pointerup", handlePointerUp) } const style = transform && props.getSnappedDelta ? { left: `${left}px`, width: `${Math.max(width, 60)}px`, top: 0, bottom: 0, transform: `translate3d(${props.getSnappedDelta(transform.x)}px, 0px, 0)`, } : { left: `${left}px`, width: `${Math.max(width, 60)}px`, top: 0, bottom: 0, } const slotContent = ( { if (onSlotClick && !isDragging) { event.stopPropagation() onSlotClick(slot.id) } }} style={ { "--slot-start-time": slot.startTime, "--slot-duration": `${slot.duration}min`, } as React.CSSProperties } > {children} {onSlotResize ? ( <>

handleResizeStart(event, "left")} />

handleResizeStart(event, "right")} />

) : null} ) return (

{slotContent} {isActiveSlot && isDragging ? ( {children} ) : null}

) } export interface TimelineSlotLabelProps extends React.ComponentProps<"div"> { asChild?: boolean } export function TimelineSlotLabel({ asChild, className, ...props }: TimelineSlotLabelProps) { const Comp = asChild ? Slot : "div" return ( ) } export interface TimelineSlotContentProps extends React.ComponentProps<"div"> { asChild?: boolean } export function TimelineSlotContent({ asChild, className, ...props }: TimelineSlotContentProps) { const Comp = asChild ? Slot : "div" return ( ) } export function TimelineMouseIndicator({ mouseX, time, }: { mouseX: number time: string }) { return (

{time}

) } export interface TimelineDropRegionProps { startTime: string duration: number } export function TimelineDropRegion({ startTime, duration, }: TimelineDropRegionProps) { const { config, pixelsPerMinute } = useTimeline() const columnWidth = config.columnWidth ?? 112 const startMinutes = timeToMinutes(startTime) const endMinutes = startMinutes + duration const endTime = minutesToTime(endMinutes) const startPosition = (startMinutes - config.startHour * 60) * pixelsPerMinute + columnWidth const endPosition = (endMinutes - config.startHour * 60) * pixelsPerMinute + columnWidth const width = endPosition - startPosition return (

{startTime} - {endTime}

) } export interface TimelineCurrentTimeProps { className?: string nowLabel?: string } export function TimelineCurrentTime({ className, nowLabel = "Now", }: TimelineCurrentTimeProps) { const { config, pixelsPerMinute } = useTimeline() const columnWidth = config.columnWidth ?? 112 const [now, setNow] = React.useState(new Date()) React.useEffect(() => { const interval = window.setInterval(() => setNow(new Date()), 60000) return () => window.clearInterval(interval) }, []) const currentMinutes = now.getHours() * 60 + now.getMinutes() const position = (currentMinutes - config.startHour * 60) * pixelsPerMinute + columnWidth if ( currentMinutes < config.startHour * 60 || currentMinutes > config.endHour * 60 ) { return null } return (

{nowLabel}: {minutesToTime(currentMinutes)}

) } export interface TimelineGridProps extends TimelineInjectedProps { children: React.ReactNode className?: string } export function TimelineGrid({ children, className, ...props }: TimelineGridProps) { const { timelineWidth } = useTimeline() const activeSlot = props._showDropRegion && props.slots ? props.slots.find((slot) => slot.id === props.activeSlotId) : null return (

{React.Children.map(children, (child) => { if (!React.isValidElement(child)) return child return React.cloneElement(child, props) })} {props._showDropRegion && props._dropRegionTime && activeSlot ? ( ) : null}

) } function TimelineDropGhost({ activeSlotId, allSlots, newTime, isValid, config, pixelsPerMinute, }: { activeSlotId: string allSlots: TimelineSlotData[] newTime: string isValid: boolean config: TimelineConfig pixelsPerMinute: number }) { const slot = allSlots.find((item) => item.id === activeSlotId) if (!slot || !isValid) return null const startMinutes = timeToMinutes(newTime) const left = (startMinutes - config.startHour * 60) * pixelsPerMinute const width = slot.duration * pixelsPerMinute return (

) } 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","@dnd-kit/core",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fcore","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":"@dnd-kit/core"}]]}]}],["$","li","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","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":"@radix-ui/react-slot"}]]}]}],["$","li","tunnel-rat",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tunnel-rat","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":"tunnel-rat"}]]}]}]]}],["$","$L4e",null,{"namespace":"@corr","registryDependencies":["button","field","input","popover","select"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/corr/components/timeline.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]