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:T3616,"use client"; import { useEffect, useId, useRef, useState, useSyncExternalStore, } from "react"; import { createPortal } from "react-dom"; import { motion, useReducedMotion } from "motion/react"; import { X } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; export type TourPlacement = "top" | "bottom" | "left" | "right"; export type TourStep = { /** CSS selector of the element to highlight. If nothing matches, the card is centered. */ target: string; title: React.ReactNode; description?: React.ReactNode; placement?: TourPlacement; }; export type TourLabels = { next: string; previous: string; finish: string; close: string; stepOf?: (current: number, total: number) => string; }; export type TourProps = Omit< React.ComponentProps<"div">, "title" | "children" > & { steps: TourStep[]; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; step?: number; defaultStep?: number; onStepChange?: (step: number) => void; /** Called when the last step's finish button is pressed. */ onFinish?: () => void; labels?: Partial; }; const defaultLabels: Required = { next: "Next", previous: "Back", finish: "Finish", close: "Close tour", stepOf: (current, total) => `${current} of ${total}`, }; type Box = { top: number; left: number; width: number; height: number }; type Measurement = { target: Box | null; card: { width: number; height: number } | null; viewport: { width: number; height: number }; /** True when the update came from scrolling/resizing and should not animate. */ instant: boolean; }; const GAP = 12; const MARGIN = 12; const SPOTLIGHT_PADDING = 6; // New step text fades in while the card glides. Opacity only, so reduced motion keeps it. const STEP_FADE = { duration: 0.15, ease: [0.23, 1, 0.32, 1] } as const; const OPPOSITE: Record = { top: "bottom", bottom: "top", left: "right", right: "left", }; const subscribeNoop = () => () => {}; const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), Math.max(min, max)); function getCardPosition( target: Box | null, card: { width: number; height: number }, viewport: { width: number; height: number }, preferred: TourPlacement, ) { if (!target) { return { x: (viewport.width - card.width) / 2, y: (viewport.height - card.height) / 2, }; } const fits: Record = { top: target.top - GAP - card.height >= MARGIN, bottom: target.top + target.height + GAP + card.height <= viewport.height - MARGIN, left: target.left - GAP - card.width >= MARGIN, right: target.left + target.width + GAP + card.width <= viewport.width - MARGIN, }; const placement = fits[preferred] || !fits[OPPOSITE[preferred]] ? preferred : OPPOSITE[preferred]; let x: number; let y: number; if (placement === "top" || placement === "bottom") { x = target.left + target.width / 2 - card.width / 2; y = placement === "top" ? target.top - GAP - card.height : target.top + target.height + GAP; } else { y = target.top + target.height / 2 - card.height / 2; x = placement === "left" ? target.left - GAP - card.width : target.left + target.width + GAP; } return { x: clamp(x, MARGIN, viewport.width - card.width - MARGIN), y: clamp(y, MARGIN, viewport.height - card.height - MARGIN), }; } function getFocusable(container: HTMLElement) { return Array.from( container.querySelectorAll( 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', ), ); } export function Tour({ steps, open, defaultOpen = false, onOpenChange, step, defaultStep = 0, onStepChange, onFinish, labels: labelsProp, className, onKeyDown, ...props }: TourProps) { const labels = { ...defaultLabels, ...labelsProp }; const titleId = useId(); const descriptionId = useId(); const reduceMotion = useReducedMotion(); const isClient = useSyncExternalStore( subscribeNoop, () => true, () => false, ); const cardRef = useRef(null); const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen); const isOpen = open ?? uncontrolledOpen; const setOpen = (next: boolean) => { if (open === undefined) setUncontrolledOpen(next); onOpenChange?.(next); }; const [uncontrolledStep, setUncontrolledStep] = useState(defaultStep); // Restart from the default step every time the tour opens. const [wasOpen, setWasOpen] = useState(isOpen); const [measurement, setMeasurement] = useState(null); if (wasOpen !== isOpen) { setWasOpen(isOpen); if (isOpen) setUncontrolledStep(defaultStep); else setMeasurement(null); } const stepIndex = clamp(step ?? uncontrolledStep, 0, steps.length - 1); const setStep = (next: number) => { if (step === undefined) setUncontrolledStep(next); onStepChange?.(next); }; const current = steps[stepIndex]; const isFirst = stepIndex === 0; const isLast = stepIndex === steps.length - 1; const visible = isOpen && isClient && !!current; // Measure target, card and viewport in a rAF so scroll/resize bursts cause one update per frame. const targetSelector = current?.target; useEffect(() => { if (!visible || !targetSelector) return; let frame = 0; let instant = false; const target = document.querySelector(targetSelector); const measure = () => { frame = 0; const rect = target?.getBoundingClientRect(); const card = cardRef.current; setMeasurement((previous) => ({ target: rect ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height, } : null, card: card ? { width: card.offsetWidth, height: card.offsetHeight } : null, viewport: { width: window.innerWidth, height: window.innerHeight }, // The first placement after opening snaps into place instead of flying in. instant: instant || !previous?.card, })); }; const scheduleInstant = () => { instant = true; if (!frame) frame = requestAnimationFrame(measure); }; if (target) { const rect = target.getBoundingClientRect(); if (rect.top < 0 || rect.bottom > window.innerHeight) { target.scrollIntoView({ block: "center", behavior: reduceMotion ? "auto" : "smooth", }); } } frame = requestAnimationFrame(measure); const observer = new ResizeObserver(scheduleInstant); if (target) observer.observe(target); if (cardRef.current) observer.observe(cardRef.current); window.addEventListener("resize", scheduleInstant); window.addEventListener("scroll", scheduleInstant, { capture: true, passive: true, }); return () => { cancelAnimationFrame(frame); observer.disconnect(); window.removeEventListener("resize", scheduleInstant); window.removeEventListener("scroll", scheduleInstant, { capture: true }); }; }, [visible, targetSelector, stepIndex, reduceMotion]); // Move focus into the card while open and give it back when the tour closes. useEffect(() => { if (!visible) return; const previouslyFocused = document.activeElement as HTMLElement | null; cardRef.current?.focus(); return () => previouslyFocused?.focus?.(); }, [visible]); // Keep focus inside the card when the focused button disappears or becomes disabled. useEffect(() => { const card = cardRef.current; if (visible && card && !card.contains(document.activeElement)) card.focus(); }, [visible, stepIndex]); if (!visible) return null; const goTo = (next: number) => { if (next >= 0 && next < steps.length) setStep(next); }; const finish = () => { onFinish?.(); setOpen(false); }; const handleKeyDown = (event: React.KeyboardEvent) => { onKeyDown?.(event); if (event.defaultPrevented) return; if (event.key === "Escape") { event.preventDefault(); setOpen(false); } else if (event.key === "ArrowRight") { event.preventDefault(); goTo(stepIndex + 1); } else if (event.key === "ArrowLeft") { event.preventDefault(); goTo(stepIndex - 1); } else if (event.key === "Tab") { const focusable = getFocusable(event.currentTarget); if (focusable.length === 0) return; const first = focusable[0]; const last = focusable[focusable.length - 1]; const active = document.activeElement; if ( event.shiftKey && (active === first || active === event.currentTarget) ) { event.preventDefault(); last.focus(); } else if (!event.shiftKey && active === last) { event.preventDefault(); first.focus(); } } }; const target = measurement?.target ?? null; const cardSize = measurement?.card; const cardPosition = measurement && cardSize ? getCardPosition( target, cardSize, measurement.viewport, current.placement ?? "bottom", ) : null; const transition = reduceMotion || measurement?.instant ? { duration: 0 } : { type: "spring" as const, bounce: 0.1, duration: 0.4 }; return createPortal( // Fades the whole tour in on open instead of cutting to it. Opacity only, so it stays under reduced motion. // While fading it forms a stacking context, so it carries the tour's z-index itself. {/* Blocks interaction with the page; keeps focus in the card on click. */}

event.preventDefault()} /> {target && ( )} , document.body, ); } 4f:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-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":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@devsloka","registryDependencies":["button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/ui/tour.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]