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:T372c,// Tour from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { createPortal } from 'react-dom'; import { cn } from '@/lib/utils'; import { Button } from '@/registry/hirael/bases/radix/ui/button'; export interface TourStep { target: string | React.RefObject; title: React.ReactNode; description?: React.ReactNode; side?: 'top' | 'bottom' | 'left' | 'right'; } export interface TourLabels { next?: React.ReactNode; back?: React.ReactNode; skip?: React.ReactNode; finish?: React.ReactNode; } interface TourContextValue { open: boolean; step: number; start: (at?: number) => void; stop: () => void; next: () => void; back: () => void; } const NEVER_CHANGES = () => () => {}; const TourContext = React.createContext(null); const useTour = () => { const ctx = React.useContext(TourContext); if (!ctx) { throw new Error('Tour compound parts must be used inside '); } return ctx; }; const resolveTarget = (target: TourStep['target'] | undefined): HTMLElement | null => { if (!target) return null; if (typeof target === 'string') { return document.querySelector(target); } return target.current; }; export interface TourProps { steps: TourStep[]; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; step?: number; defaultStep?: number; onStepChange?: (step: number) => void; onFinish?: () => void; scrollIntoView?: boolean; spotlightPadding?: number; labels?: TourLabels; children?: React.ReactNode; } const Tour = ({ steps, open: openProp, defaultOpen = false, onOpenChange, step: stepProp, defaultStep = 0, onStepChange, onFinish, scrollIntoView = true, spotlightPadding = 8, labels, children, }: TourProps) => { const [internalOpen, setInternalOpen] = React.useState(defaultOpen); const open = openProp ?? internalOpen; const setOpen = React.useCallback( (nextOpen: boolean) => { if (openProp === undefined) setInternalOpen(nextOpen); onOpenChange?.(nextOpen); }, [openProp, onOpenChange], ); const [internalStep, setInternalStep] = React.useState(defaultStep); const step = stepProp ?? internalStep; const setStep = React.useCallback( (nextStep: number) => { if (stepProp === undefined) setInternalStep(nextStep); onStepChange?.(nextStep); }, [stepProp, onStepChange], ); const findResolvable = React.useCallback( (from: number, dir: 1 | -1) => { for (let i = from; i >= 0 && i < steps.length; i += dir) { if (resolveTarget(steps[i]?.target)) return i; } return -1; }, [steps], ); const stop = React.useCallback(() => setOpen(false), [setOpen]); const finish = React.useCallback(() => { onFinish?.(); setOpen(false); }, [onFinish, setOpen]); const start = React.useCallback( (at?: number) => { setStep(at ?? 0); setOpen(true); }, [setStep, setOpen], ); const next = React.useCallback(() => { const idx = findResolvable(step + 1, 1); if (idx === -1) { finish(); } else { setStep(idx); } }, [findResolvable, step, finish, setStep]); const back = React.useCallback(() => { const idx = findResolvable(step - 1, -1); if (idx !== -1) setStep(idx); }, [findResolvable, step, setStep]); const restoreFocusRef = React.useRef(null); React.useEffect(() => { if (!open) return; restoreFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null; return () => restoreFocusRef.current?.focus(); }, [open]); React.useEffect(() => { if (!open) return; if (resolveTarget(steps[step]?.target)) return; const idx = findResolvable(step + 1, 1); if (idx === -1) { // eslint-disable-next-line react-hooks/set-state-in-effect setOpen(false); } else { setStep(idx); } }, [open, step, steps, findResolvable, setOpen, setStep]); const mounted = React.useSyncExternalStore( NEVER_CHANGES, () => true, () => false, ); const ctx = React.useMemo( () => ({ open, step, start, stop, next, back }), [open, step, start, stop, next, back], ); return ( {children} {mounted && open && createPortal( , document.body, )} ); }; interface Rect { top: number; left: number; width: number; height: number; } interface TourOverlayProps { steps: TourStep[]; step: number; stop: () => void; next: () => void; back: () => void; scrollIntoView: boolean; padding: number; labels?: TourLabels; } interface CardPosition { top: number; left: number; } const padRect = (rect: Rect, padding: number): Rect => ({ top: rect.top - padding, left: rect.left - padding, width: rect.width + padding * 2, height: rect.height + padding * 2, }); const TourOverlay = ({ steps, step, stop, next, back, scrollIntoView, padding, labels }: TourOverlayProps) => { const current = steps[step]; const side = current?.side ?? 'bottom'; const target = current?.target; const cardRef = React.useRef(null); const [rect, setRect] = React.useState(null); const [viewport, setViewport] = React.useState(() => ({ w: window.innerWidth, h: window.innerHeight })); const [pos, setPos] = React.useState(null); const titleId = React.useId(); const descriptionId = React.useId(); const measure = React.useCallback(() => { const el = resolveTarget(target); if (!el) { setRect(null); return; } const r = el.getBoundingClientRect(); setRect({ top: r.top, left: r.left, width: r.width, height: r.height }); setViewport({ w: window.innerWidth, h: window.innerHeight }); }, [target]); React.useLayoutEffect(() => { const el = resolveTarget(target); if (el && scrollIntoView) el.scrollIntoView({ block: 'center' }); // eslint-disable-next-line react-hooks/set-state-in-effect measure(); }, [target, scrollIntoView, measure]); React.useEffect(() => { let raf = 0; const schedule = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; measure(); }); }; window.addEventListener('resize', schedule, { passive: true }); window.addEventListener('scroll', schedule, { passive: true, capture: true }); const el = resolveTarget(target); const observer = el && typeof ResizeObserver !== 'undefined' ? new ResizeObserver(schedule) : null; if (el) observer?.observe(el); return () => { observer?.disconnect(); if (raf) cancelAnimationFrame(raf); window.removeEventListener('resize', schedule); window.removeEventListener('scroll', schedule, { capture: true }); }; }, [measure, target]); React.useLayoutEffect(() => { const card = cardRef.current; if (!card || !rect) return; const w = card.offsetWidth; const h = card.offsetHeight; const gap = 12; const edge = 16; const box = padRect(rect, padding); const midTop = box.top + box.height / 2 - h / 2; const midLeft = box.left + box.width / 2 - w / 2; const coords = (s: NonNullable) => ({ top: { top: box.top - gap - h, left: midLeft }, bottom: { top: box.top + box.height + gap, left: midLeft }, left: { top: midTop, left: box.left - gap - w }, right: { top: midTop, left: box.left + box.width + gap }, })[s]; const fits = (s: NonNullable) => { const c = coords(s); return c.top >= edge && c.left >= edge && c.top + h <= viewport.h - edge && c.left + w <= viewport.w - edge; }; const opposite = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' } as const; const placed = !fits(side) && fits(opposite[side]) ? opposite[side] : side; const c = coords(placed); setPos({ top: Math.min(Math.max(c.top, edge), Math.max(edge, viewport.h - h - edge)), left: Math.min(Math.max(c.left, edge), Math.max(edge, viewport.w - w - edge)), }); }, [rect, viewport, side, padding, step]); React.useEffect(() => { cardRef.current?.focus(); }, [step]); React.useEffect(() => { const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') { e.preventDefault(); stop(); return; } if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return; e.preventDefault(); const rtl = cardRef.current ? getComputedStyle(cardRef.current).direction === 'rtl' : false; if ((e.key === 'ArrowRight') !== rtl) next(); else back(); }; document.addEventListener('keydown', onKeyDown); return () => document.removeEventListener('keydown', onKeyDown); }, [stop, next, back]); const onCardKeyDown = (e: React.KeyboardEvent) => { if (e.key !== 'Tab') return; const card = cardRef.current; if (!card) return; const focusables = card.querySelectorAll( 'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', ); if (focusables.length === 0) { e.preventDefault(); return; } const first = focusables[0]; const last = focusables[focusables.length - 1]; const active = document.activeElement; const outside = active === null || !Array.from(focusables).includes(active as HTMLElement); if (e.shiftKey && (active === first || outside)) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && (active === last || outside)) { e.preventDefault(); first.focus(); } }; const spotlight = rect ? padRect(rect, padding) : null; const radius = spotlight ? Math.min(8, spotlight.width / 2, spotlight.height / 2) : 0; const scrimPath = spotlight ? `M0 0H${viewport.w}V${viewport.h}H0Z M${spotlight.left + radius} ${spotlight.top}h${spotlight.width - radius * 2}a${radius} ${radius} 0 0 1 ${radius} ${radius}v${spotlight.height - radius * 2}a${radius} ${radius} 0 0 1 ${-radius} ${radius}h${-(spotlight.width - radius * 2)}a${radius} ${radius} 0 0 1 ${-radius} ${-radius}v${-(spotlight.height - radius * 2)}a${radius} ${radius} 0 0 1 ${radius} ${-radius}Z` : `M0 0H${viewport.w}V${viewport.h}H0Z`; const available = steps.flatMap((s, i) => (resolveTarget(s.target) ? [i] : [])); const position = available.indexOf(step); const isLast = !available.some((i) => i > step); const isFirst = !available.some((i) => i < step); return (

{spotlight && (

)}

); }; export interface TourTriggerProps extends React.ComponentProps { /** Step index to start at, 0-based. */ at?: number; } const TourTrigger = ({ at, onClick, ...props }: TourTriggerProps) => { const { start } = useTour(); return (