{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "timeline", "type": "registry:block", "title": "Timeline", "description": "A Gantt-chart style timeline with draggable time slots.", "dependencies": ["@radix-ui/react-slot", "@dnd-kit/core", "tunnel-rat"], "files": [ { "path": "registry/abui/ui/timeline.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState, useRef, useEffect, createContext, useContext, useMemo } from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n DndContext,\n DragOverlay,\n useSensor,\n useSensors,\n PointerSensor,\n closestCenter,\n useDraggable,\n useDroppable,\n} from \"@dnd-kit/core\"\nimport tunnel from \"tunnel-rat\"\nimport { cn } from \"@/lib/utils\"\n\n/* ============================================================================\n * TYPES & INTERFACES\n * ========================================================================== */\n\nexport interface TimelineSlotData {\n id: string\n rowId: string\n startTime: string // \"14:30\"\n duration: number // minutes\n [key: string]: any // Additional custom data\n}\n\nexport interface TimelineRowData {\n id: string\n label: string\n [key: string]: any // Additional custom data\n}\n\nexport interface TimelineConfig {\n startHour: number\n endHour: number\n snapIntervalMinutes?: number\n columnWidth?: number\n}\n\n/* ============================================================================\n * CONTEXT\n * ========================================================================== */\n\ntype TimelineContextValue = {\n // Configuration\n config: TimelineConfig\n pixelsPerMinute: number\n timelineWidth: number\n\n // Refs\n timelineRef: React.RefObject\n columnRef: React.RefObject\n\n // Tunnel for drag preview\n dragPreviewTunnel: ReturnType\n\n // Callbacks\n onSlotPositionChange?: (slotId: string, newTime: string, newRowId: string) => Promise\n onValidateDrop?: (slotId: string, newTime: string, newRowId: string) => boolean\n onSlotClick?: (slotId: string) => void\n}\n\nconst TimelineContext = createContext(null)\n\nfunction useTimeline() {\n const context = useContext(TimelineContext)\n if (!context) {\n throw new Error(\"Timeline components must be used within TimelineProvider\")\n }\n return context\n}\n\n/* ============================================================================\n * UTILITIES\n * ========================================================================== */\n\nexport const timeToMinutes = (time: string): number => {\n const [hours, minutes] = time.split(\":\").map(Number)\n return hours * 60 + minutes\n}\n\nexport const minutesToTime = (minutes: number): string => {\n const hours = Math.floor(minutes / 60)\n const mins = minutes % 60\n return `${hours.toString().padStart(2, \"0\")}:${mins.toString().padStart(2, \"0\")}`\n}\n\n/* ============================================================================\n * TIMELINE PROVIDER\n * ========================================================================== */\n\ninterface TimelineProviderProps {\n children: React.ReactNode\n config: TimelineConfig\n percentageInView?: number\n onSlotPositionChange?: (slotId: string, newTime: string, newRowId: string) => Promise\n onValidateDrop?: (slotId: string, newTime: string, newRowId: string) => boolean\n onSlotClick?: (slotId: string) => void\n style?: React.CSSProperties\n className?: string\n}\n\nexport function TimelineProvider({\n children,\n config,\n percentageInView = 100,\n onSlotPositionChange,\n onValidateDrop,\n onSlotClick,\n style,\n className,\n}: TimelineProviderProps) {\n const [viewportWidth, setViewportWidth] = useState(0)\n\n const timelineRef = useRef(null)\n const columnRef = useRef(null)\n\n // Create tunnel for drag preview (stable across renders)\n const dragPreviewTunnel = useMemo(() => tunnel(), [])\n\n const columnWidth = config.columnWidth || 112\n\n // Measure viewport\n useEffect(() => {\n const measure = () => {\n if (timelineRef.current) {\n setViewportWidth(timelineRef.current.clientWidth - columnWidth)\n }\n }\n\n measure()\n window.addEventListener(\"resize\", measure)\n const timeout = setTimeout(measure, 100)\n\n return () => {\n window.removeEventListener(\"resize\", measure)\n clearTimeout(timeout)\n }\n }, [columnWidth])\n\n // Calculate timeline dimensions\n const totalMinutes = (config.endHour - config.startHour) * 60\n const basePixelsPerMinute = viewportWidth > 0 ? viewportWidth / totalMinutes : 10\n const pixelsPerMinute = basePixelsPerMinute * (100 / percentageInView)\n const timelineWidth = totalMinutes * pixelsPerMinute\n\n const contextValue: TimelineContextValue = {\n config,\n pixelsPerMinute,\n timelineWidth,\n timelineRef,\n columnRef,\n dragPreviewTunnel,\n onSlotPositionChange,\n onValidateDrop,\n onSlotClick,\n }\n\n return (\n \n \n {children}\n \n \n )\n}\n\n/* ============================================================================\n * TIMELINE (Main Container with DnD)\n * ========================================================================== */\n\ninterface TimelineProps {\n slots: TimelineSlotData[]\n rows: TimelineRowData[]\n children: React.ReactNode\n className?: string\n}\n\nexport function Timeline({ slots, rows, children, className }: TimelineProps) {\n const { config, pixelsPerMinute, timelineRef, dragPreviewTunnel, onSlotPositionChange, onValidateDrop } =\n useTimeline()\n\n const [mousePosition, setMousePosition] = useState<{ x: number; y: number } | null>(null)\n\n const sensors = useSensors(\n useSensor(PointerSensor, {\n activationConstraint: { distance: 8 },\n }),\n )\n\n const snapInterval = config.snapIntervalMinutes || 15\n const columnWidth = config.columnWidth || 112\n\n // Snapping utilities\n const snapToInterval = (minutes: number): number => {\n return Math.round(minutes / snapInterval) * snapInterval\n }\n\n const getSnappedDelta = (deltaX: number): number => {\n const deltaMinutes = deltaX / pixelsPerMinute\n const snappedDeltaMinutes = Math.round(deltaMinutes / snapInterval) * snapInterval\n return snappedDeltaMinutes * pixelsPerMinute\n }\n\n const calculateNewTime = (originalTime: string, deltaX: number): string => {\n const originalMinutes = timeToMinutes(originalTime)\n const deltaMinutes = Math.round(deltaX / pixelsPerMinute)\n const newMinutes = originalMinutes + deltaMinutes\n const snappedMinutes = snapToInterval(newMinutes)\n const clampedMinutes = Math.max(config.startHour * 60, Math.min((config.endHour - 1) * 60, snappedMinutes))\n return minutesToTime(clampedMinutes)\n }\n\n // Mouse handlers\n const handleMouseMove = (e: React.MouseEvent) => {\n if (timelineRef.current) {\n const rect = timelineRef.current.getBoundingClientRect()\n setMousePosition({\n x: e.clientX - rect.left + timelineRef.current.scrollLeft,\n y: e.clientY - rect.top,\n })\n }\n }\n\n const handleMouseLeave = () => {\n setMousePosition(null)\n }\n\n // Calculate mouse time\n const mouseTime = mousePosition\n ? minutesToTime(Math.floor((mousePosition.x - columnWidth) / pixelsPerMinute) + config.startHour * 60)\n : null\n\n // Drag handlers\n const [localActiveSlot, setLocalActiveSlot] = useState(null)\n const [localOverRow, setLocalOverRow] = useState(null)\n const [localDraggedTime, setLocalDraggedTime] = useState(null)\n const [isValid, setIsValid] = useState(true)\n\n const handleDragStart = (event: any) => {\n setLocalActiveSlot(event.active.id)\n }\n\n const handleDragOver = (event: any) => {\n if (event.over) {\n setLocalOverRow(event.over.id)\n } else {\n setLocalOverRow(null)\n setLocalDraggedTime(null)\n }\n }\n\n const handleDragMove = (event: any) => {\n const { over, active, delta } = event\n\n if (over) {\n const slot = slots.find((s: TimelineSlotData) => s.id === active.id)\n if (slot) {\n const newTime = calculateNewTime(slot.startTime, delta.x)\n setLocalDraggedTime(newTime)\n\n // Validate with host\n const valid = onValidateDrop ? onValidateDrop(active.id, newTime, over.id) : true\n setIsValid(valid)\n }\n }\n }\n\n const handleDragCancel = () => {\n // Clean up all drag state when drag is cancelled (e.g., ESC key)\n setLocalActiveSlot(null)\n setLocalOverRow(null)\n setLocalDraggedTime(null)\n setIsValid(true)\n }\n\n const handleDragEnd = async (event: any) => {\n const { active, over, delta } = event\n\n setLocalActiveSlot(null)\n setLocalOverRow(null)\n setLocalDraggedTime(null)\n setIsValid(true)\n\n if (over) {\n const slot = slots.find((s: TimelineSlotData) => s.id === active.id)\n if (!slot) return\n\n const newTime = calculateNewTime(slot.startTime, delta.x)\n const newRowId = over.id\n\n // Validate\n if (onValidateDrop && !onValidateDrop(active.id, newTime, newRowId)) {\n return\n }\n\n // Check if anything changed\n if (slot.rowId === newRowId && slot.startTime === newTime) {\n return\n }\n\n // Call position change handler\n if (onSlotPositionChange) {\n await onSlotPositionChange(active.id, newTime, newRowId)\n }\n }\n }\n\n return (\n \n
\n {/* Mouse time indicator */}\n {mousePosition && mouseTime && !localActiveSlot && (\n \n )}\n\n \n {React.Children.map(children, child => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child as React.ReactElement, {\n slots,\n rows,\n activeSlotId: localActiveSlot,\n overRowId: localOverRow,\n draggedNewTime: localDraggedTime,\n isValidDrop: isValid,\n getSnappedDelta,\n _showDropRegion: !!(localActiveSlot && localDraggedTime),\n _dropRegionTime: localDraggedTime,\n })\n }\n return child\n })}\n
\n\n {/* Drag overlay - receives content from tunnel */}\n \n {localActiveSlot &&\n (() => {\n const activeSlot = slots.find((s: TimelineSlotData) => s.id === localActiveSlot)\n if (!activeSlot) return null\n\n console.log(\"📺 DragOverlay rendering for slot:\", activeSlot.id)\n\n return (\n \n {/* Receive tunneled content from the active slot */}\n \n \n )\n })()}\n \n \n \n )\n}\n\n/* ============================================================================\n * TIMELINE HEADER\n * ========================================================================== */\n\ninterface TimelineHeaderProps {\n className?: string\n columnLabel?: React.ReactNode\n}\n\nexport function TimelineHeader({ className, columnLabel = \"Row\" }: TimelineHeaderProps) {\n const { config, pixelsPerMinute, columnRef } = useTimeline()\n\n // Generate hour markers\n const hourMarkers = []\n for (let hour = config.startHour; hour < config.endHour; hour++) {\n hourMarkers.push({\n hour,\n label: `${hour}:00`,\n position: (hour - config.startHour) * 60 * pixelsPerMinute,\n })\n }\n\n return (\n
\n
\n \n {columnLabel}\n
\n
\n {hourMarkers.map(marker => (\n \n {marker.label}\n
\n ))}\n
\n \n \n )\n}\n\n/* ============================================================================\n * TIMELINE ROW\n * ========================================================================== */\n\ninterface TimelineRowProps {\n row: TimelineRowData\n slots: TimelineSlotData[]\n children: (slot: TimelineSlotData) => React.ReactNode\n renderRowHeader?: (row: TimelineRowData) => React.ReactNode\n renderDropGhost?: (slot: TimelineSlotData, newTime: string, isValid: boolean) => React.ReactNode\n className?: string\n asChild?: boolean\n}\n\nexport function TimelineRow({\n row,\n slots,\n children,\n renderRowHeader,\n className,\n asChild,\n ...props\n}: TimelineRowProps & any) {\n const { config, pixelsPerMinute, timelineWidth } = useTimeline()\n const Comp = asChild ? Slot : \"div\"\n\n const { setNodeRef, isOver } = useDroppable({\n id: row.id,\n })\n\n const rowSlots = slots.filter((s: TimelineSlotData) => s.rowId === row.id)\n\n // Check if this row has invalid drop (from props passed by Timeline)\n const isValidDrop = props.isValidDrop !== false\n const isHovered = isOver || props.overRowId === row.id // Try BOTH\n\n // Generate grid markers\n const hourMarkers = []\n for (let hour = config.startHour; hour <= config.endHour; hour++) {\n hourMarkers.push({\n hour,\n position: (hour - config.startHour) * 60 * pixelsPerMinute,\n })\n }\n\n const quarterHourMarkers = []\n const totalMinutes = (config.endHour - config.startHour) * 60\n for (let minutes = 15; minutes < totalMinutes; minutes += 15) {\n if (minutes % 60 !== 0) {\n quarterHourMarkers.push({\n position: minutes * pixelsPerMinute,\n })\n }\n }\n\n return (\n \n {/* Row label column */}\n \n {renderRowHeader ? renderRowHeader(row) : row.label}\n \n\n {/* Timeline grid */}\n
\n {/* Grid lines */}\n {quarterHourMarkers.map((marker, idx) => (\n \n ))}\n {hourMarkers.map(marker => (\n \n ))}\n\n {/* Slots */}\n {rowSlots.map((slot: TimelineSlotData) => {\n const slotElement = children(slot)\n // Clone the element to inject activeSlotId prop\n return (\n \n {React.isValidElement(slotElement)\n ? React.cloneElement(slotElement, { activeSlotId: props.activeSlotId } as any)\n : slotElement}\n \n )\n })}\n\n {/* Drop ghost - shows where slot will land if dropped in this row */}\n {isHovered && props.draggedNewTime && props.activeSlotId && (\n \n )}\n
\n \n )\n}\n\n/* ============================================================================\n * TIMELINE SLOT (Draggable)\n * ========================================================================== */\n\ninterface TimelineSlotProps {\n slot: TimelineSlotData\n children: React.ReactNode\n className?: string\n asChild?: boolean\n}\n\nexport function TimelineSlot({ slot, children, className, asChild, ...props }: TimelineSlotProps & any) {\n const timeline = useTimeline()\n const { config, pixelsPerMinute, onSlotClick, dragPreviewTunnel } = timeline\n const Comp = asChild ? Slot : \"div\"\n\n const { attributes, listeners, setNodeRef, isDragging, transform } = useDraggable({\n id: slot.id,\n })\n\n const startMinutes = timeToMinutes(slot.startTime)\n const left = (startMinutes - config.startHour * 60) * pixelsPerMinute\n const width = slot.duration * pixelsPerMinute\n\n // Get activeSlotId from Timeline component via props (passed through TimelineRow)\n const activeSlotIdFromTimeline = props.activeSlotId\n const isActiveSlot = activeSlotIdFromTimeline === slot.id\n\n // When dragging, show slot at its snapped target position (not at cursor)\n // The DragOverlay will show what you're dragging at cursor position\n const style =\n transform && props.getSnappedDelta\n ? {\n left: `${left}px`,\n width: `${Math.max(width, 60)}px`,\n top: 0,\n bottom: 0,\n transform: `translate3d(${props.getSnappedDelta(transform.x)}px, ${transform.y}px, 0)`,\n }\n : {\n left: `${left}px`,\n width: `${Math.max(width, 60)}px`,\n top: 0,\n bottom: 0,\n }\n\n const slotContent = (\n {\n if (onSlotClick && !isDragging) {\n e.stopPropagation()\n onSlotClick(slot.id)\n }\n }}\n style={\n {\n \"--slot-start-time\": slot.startTime,\n \"--slot-duration\": `${slot.duration}min`,\n } as React.CSSProperties\n }\n >\n {children}\n \n )\n\n return (\n
\n {/* Always render slot content normally */}\n {slotContent}\n\n {/* When active and dragging, ALSO send content through tunnel for DragOverlay */}\n {isActiveSlot && isDragging && (\n <>\n {console.log(\"🚇 Sending content through tunnel for slot:\", slot.id)}\n \n \n {children}\n \n \n \n )}\n
\n )\n}\n\n/* ============================================================================\n * TIMELINE SLOT PRIMITIVES (for content composition)\n * ========================================================================== */\n\ninterface TimelineSlotLabelProps extends React.ComponentProps<\"div\"> {\n asChild?: boolean\n}\n\nexport function TimelineSlotLabel({ asChild, className, ...props }: TimelineSlotLabelProps) {\n const Comp = asChild ? Slot : \"div\"\n return \n}\n\ninterface TimelineSlotContentProps extends React.ComponentProps<\"div\"> {\n asChild?: boolean\n}\n\nexport function TimelineSlotContent({ asChild, className, ...props }: TimelineSlotContentProps) {\n const Comp = asChild ? Slot : \"div\"\n return \n}\n\n/* ============================================================================\n * TIMELINE INDICATORS\n * ========================================================================== */\n\nfunction TimelineMouseIndicator({ mouseX, time }: { mouseX: number; time: string }) {\n return (\n \n
\n
\n {time}\n
\n
\n )\n}\n\ninterface TimelineDropRegionProps {\n startTime: string\n duration: number\n}\n\nexport function TimelineDropRegion({ startTime, duration }: TimelineDropRegionProps) {\n const { config, pixelsPerMinute } = useTimeline()\n const columnWidth = config.columnWidth || 112\n\n const startMinutes = timeToMinutes(startTime)\n const endMinutes = startMinutes + duration\n const endTime = minutesToTime(endMinutes)\n\n const startPosition = (startMinutes - config.startHour * 60) * pixelsPerMinute + columnWidth\n const endPosition = (endMinutes - config.startHour * 60) * pixelsPerMinute + columnWidth\n const width = endPosition - startPosition\n\n return (\n \n
\n {startTime} - {endTime}\n
\n
\n
\n
\n
\n )\n}\n\ninterface TimelineCurrentTimeProps {\n className?: string\n nowLabel?: string\n}\n\nexport function TimelineCurrentTime({ className, nowLabel = \"Now\" }: TimelineCurrentTimeProps) {\n const { config, pixelsPerMinute } = useTimeline()\n const columnWidth = config.columnWidth || 112\n\n const [now, setNow] = useState(new Date())\n\n useEffect(() => {\n const interval = setInterval(() => setNow(new Date()), 60000) // Update every minute\n return () => clearInterval(interval)\n }, [])\n\n const currentMinutes = now.getHours() * 60 + now.getMinutes()\n const position = (currentMinutes - config.startHour * 60) * pixelsPerMinute + columnWidth\n\n // Only show if within timeline range\n if (currentMinutes < config.startHour * 60 || currentMinutes > config.endHour * 60) {\n return null\n }\n\n return (\n \n
\n {nowLabel}: {minutesToTime(currentMinutes)}\n
\n
\n )\n}\n\n/* ============================================================================\n * TIMELINE GRID (for custom layouts)\n * ========================================================================== */\n\ninterface TimelineGridProps {\n children: React.ReactNode\n className?: string\n}\n\nexport function TimelineGrid({ children, className, ...props }: TimelineGridProps & any) {\n const { timelineWidth } = useTimeline()\n\n // Get active slot data for drop region and ghost preview\n const activeSlot =\n props._showDropRegion && props.slots ? props.slots.find((s: TimelineSlotData) => s.id === props.activeSlotId) : null\n\n return (\n \n {React.Children.map(children, child => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child as React.ReactElement, props)\n }\n return child\n })}\n\n {/* Drop region highlight */}\n {props._showDropRegion && props._dropRegionTime && activeSlot && (\n \n )}\n
\n )\n}\n\n/* ============================================================================\n * DROP GHOST (Shows where slot will land)\n * ========================================================================== */\n\nfunction TimelineDropGhost({\n activeSlotId,\n allSlots,\n newTime,\n isValid,\n config,\n pixelsPerMinute,\n}: {\n activeSlotId: string\n allSlots: TimelineSlotData[]\n newTime: string\n isValid: boolean\n config: TimelineConfig\n pixelsPerMinute: number\n}) {\n const slot = allSlots.find(s => s.id === activeSlotId)\n if (!slot) return null\n\n const startMinutes = timeToMinutes(newTime)\n const left = (startMinutes - config.startHour * 60) * pixelsPerMinute\n const width = slot.duration * pixelsPerMinute\n\n if (!isValid) return null\n\n return (\n \n )\n}\n\n/* ============================================================================\n * EXPORTS\n * ========================================================================== */\n\nexport { useTimeline, TimelineMouseIndicator }\n", "type": "registry:component" } ] }