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/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"] 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/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"] 52:T3c66,/* eslint-disable react-refresh/only-export-components */ import * as React from 'react' import { createPortal } from 'react-dom' import { X } from 'lucide-react' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' export interface TourStep { target: string | HTMLElement | React.RefObject title: string description: string placement?: 'top' | 'right' | 'bottom' | 'left' | 'center' spotlightPadding?: number content?: React.ReactNode } export interface TourProps { steps: TourStep[] open?: boolean onOpenChange?: (open: boolean) => void onComplete?: () => void onSkip?: () => void showSkipButton?: boolean showProgress?: boolean } interface TourContextValue { currentStep: number totalSteps: number nextStep: () => void prevStep: () => void goToStep: (index: number) => void close: () => void skip: () => void } const TourContext = React.createContext(null) function useTour() { const context = React.useContext(TourContext) if (!context) { throw new Error('useTour must be used within a ') } return context } // Get element from target function getTargetElement( target: string | HTMLElement | React.RefObject ): HTMLElement | null { if (typeof target === 'string') { return document.querySelector(target) } if (target instanceof HTMLElement) { return target } return target.current } // Calculate popover position function calculatePosition( targetRect: DOMRect, popoverRect: DOMRect, placement: TourStep['placement'] = 'bottom', padding: number = 8 ): { top: number; left: number; actualPlacement: TourStep['placement'] } { const viewport = { width: window.innerWidth, height: window.innerHeight, } let top = 0 let left = 0 let actualPlacement = placement if (placement === 'center') { return { top: viewport.height / 2 - popoverRect.height / 2, left: viewport.width / 2 - popoverRect.width / 2, actualPlacement: 'center', } } // Calculate base positions switch (placement) { case 'top': top = targetRect.top - popoverRect.height - padding left = targetRect.left + targetRect.width / 2 - popoverRect.width / 2 break case 'bottom': top = targetRect.bottom + padding left = targetRect.left + targetRect.width / 2 - popoverRect.width / 2 break case 'left': top = targetRect.top + targetRect.height / 2 - popoverRect.height / 2 left = targetRect.left - popoverRect.width - padding break case 'right': top = targetRect.top + targetRect.height / 2 - popoverRect.height / 2 left = targetRect.right + padding break } // Check if popover fits, flip if necessary if (placement === 'top' && top < 0) { top = targetRect.bottom + padding actualPlacement = 'bottom' } else if (placement === 'bottom' && top + popoverRect.height > viewport.height) { top = targetRect.top - popoverRect.height - padding actualPlacement = 'top' } else if (placement === 'left' && left < 0) { left = targetRect.right + padding actualPlacement = 'right' } else if (placement === 'right' && left + popoverRect.width > viewport.width) { left = targetRect.left - popoverRect.width - padding actualPlacement = 'left' } // Keep within viewport bounds left = Math.max(padding, Math.min(left, viewport.width - popoverRect.width - padding)) top = Math.max(padding, Math.min(top, viewport.height - popoverRect.height - padding)) return { top, left, actualPlacement } } // Tour Overlay interface TourOverlayProps { targetRect: DOMRect | null spotlightPadding: number } function TourOverlay({ targetRect, spotlightPadding }: TourOverlayProps) { if (!targetRect) { // Center placement - full overlay return (

) } const spotlightRect = { top: targetRect.top - spotlightPadding, left: targetRect.left - spotlightPadding, width: targetRect.width + spotlightPadding * 2, height: targetRect.height + spotlightPadding * 2, } return (

) } // Tour Popover interface TourPopoverProps { step: TourStep targetRect: DOMRect | null showSkipButton: boolean showProgress: boolean } function TourPopover({ step, targetRect, showSkipButton, showProgress, }: TourPopoverProps) { const { currentStep, totalSteps, nextStep, prevStep, close, skip } = useTour() const popoverRef = React.useRef(null) const [position, setPosition] = React.useState({ top: 0, left: 0 }) const titleId = React.useId() const descriptionId = React.useId() const isFirst = currentStep === 0 const isLast = currentStep === totalSteps - 1 // The tour visually covers the page with an opaque scrim, so it has to // behave like the modal dialog it looks like: focus moves in, Tab stays in, // Escape closes, and focus returns where it came from. Previously focus // stayed on the obscured page behind the scrim and Escape did nothing // (WCAG 2.1.2 / 4.1.2). Every other overlay in the library gets this from // Radix; Tour hand-rolls its portal, so it has to do it itself. React.useEffect(() => { const previouslyFocused = document.activeElement as HTMLElement | null popoverRef.current?.focus() const focusableIn = (root: HTMLElement) => [ ...root.querySelectorAll( 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])' ), ].filter((el) => el.offsetParent !== null || el === document.activeElement) const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') { e.preventDefault() close() return } if (e.key !== 'Tab') return const root = popoverRef.current if (!root) return const focusable = focusableIn(root) if (!focusable.length) { e.preventDefault() root.focus() return } const first = focusable[0] const last = focusable[focusable.length - 1] const active = document.activeElement // `active === root` on open (the container holds initial focus but is // tabindex=-1, so it isn't in `focusable`) — without this the very first // Shift+Tab walked straight out of the dialog. if (!root.contains(active) || active === root) { e.preventDefault() ;(e.shiftKey ? last : first).focus() } else if (e.shiftKey && active === first) { e.preventDefault() last.focus() } else if (!e.shiftKey && active === last) { e.preventDefault() first.focus() } } document.addEventListener('keydown', onKeyDown, true) return () => { document.removeEventListener('keydown', onKeyDown, true) previouslyFocused?.focus?.() } }, [close]) // Calculate position React.useEffect(() => { if (!popoverRef.current) return const popoverRect = popoverRef.current.getBoundingClientRect() if (step.placement === 'center' || !targetRect) { setPosition({ top: window.innerHeight / 2 - popoverRect.height / 2, left: window.innerWidth / 2 - popoverRect.width / 2, }) } else { const pos = calculatePosition( targetRect, popoverRect, step.placement, 16 ) setPosition({ top: pos.top, left: pos.left }) } }, [step, targetRect]) return (