64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:I[544296,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 66:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 67:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 68: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 69:T3682,"use client"; import { useCallback, useEffect, useId, useRef, type KeyboardEvent as ReactKeyboardEvent } from "react"; // --------------------------------------------------------------------------- // LeadingLight — an onboarding tour rendered as a lighthouse. The current // target gets a light ring (1px --foreground ring + soft halo); everything // else drops to penumbra via a single full-viewport SVG mask: one rect // (the dim scrim) minus a feathered rounded-rect hole over the target — not // per-element opacity, so nothing in the underlying page needs to know the // tour exists. Advancing morphs the hole (SVG x/y/width/height, which are // CSS-transitionable geometry properties) to the new target's rect while a // separate feathered wedge div sweeps along the straight line between the // old and new target centers, drawn via a scaleX(0->1) transform-origin // animation so it reads as a beam traveling the path, then fades. All of // this is one-shot direct-DOM ref writes per step change (CSS handles the // interpolation) — there's no continuous per-frame loop, so nothing here // touches React state on a hot path. // --------------------------------------------------------------------------- export interface LeadingLightStep { /** CSS selector for the element this step highlights. */ target: string; title: string; body: string; } export interface LeadingLightProps { /** the tour steps, in order */ steps: LeadingLightStep[]; /** current step index, 0-based */ active: number; /** called to advance to the next step */ onNext: () => void; /** called to return to the previous step */ onBack: () => void; /** Esc or Skip — caller unmounts / restores whatever it wants */ onExit: () => void; /** extra classes merged onto the rendered root element */ className?: string; } interface Rect { left: number; top: number; width: number; height: number; } const RING_PAD = 5; const HOLE_PAD = 9; const HOLE_RADIUS = 10; const MORPH_MS = 480; const BEAM_SWEEP_MS = 340; const BEAM_FADE_MS = 180; const BEAM_THICKNESS = 34; const CARD_MARGIN = 14; const CARD_GAP = 14; const EASE = "cubic-bezier(0.16, 1, 0.3, 1)"; function measure(selector: string): Rect | null { const el = document.querySelector(selector); if (!el) return null; const r = el.getBoundingClientRect(); return { left: r.left, top: r.top, width: r.width, height: r.height }; } function center(r: Rect) { return { x: r.left + r.width / 2, y: r.top + r.height / 2 }; } function moveRing(el: HTMLDivElement | null, r: Rect, reduced: boolean) { if (!el) return; el.style.transition = reduced ? "none" : `left ${MORPH_MS}ms ${EASE}, top ${MORPH_MS}ms ${EASE}, width ${MORPH_MS}ms ${EASE}, height ${MORPH_MS}ms ${EASE}`; el.style.left = `${r.left - RING_PAD}px`; el.style.top = `${r.top - RING_PAD}px`; el.style.width = `${r.width + RING_PAD * 2}px`; el.style.height = `${r.height + RING_PAD * 2}px`; } function morphHole(el: SVGRectElement | null, r: Rect, reduced: boolean) { if (!el) return; const x = r.left - HOLE_PAD; const y = r.top - HOLE_PAD; const w = r.width + HOLE_PAD * 2; const h = r.height + HOLE_PAD * 2; el.style.transition = reduced ? "none" : `x ${MORPH_MS}ms ${EASE}, y ${MORPH_MS}ms ${EASE}, width ${MORPH_MS}ms ${EASE}, height ${MORPH_MS}ms ${EASE}`; // x/y/width/height are CSS-animatable geometry properties for SVG shapes, // but aren't part of TS's CSSStyleDeclaration typing — set the attributes // directly instead; a transitioned CSS property still picks up attribute // changes since presentation attributes participate in the cascade. el.setAttribute("x", String(x)); el.setAttribute("y", String(y)); el.setAttribute("width", String(w)); el.setAttribute("height", String(h)); } function sweepBeam( el: HTMLDivElement | null, from: Rect, to: Rect, reduced: boolean, flicker: boolean ) { if (!el) return; if (reduced) { el.style.opacity = "0"; return; } const a = center(from); const b = center(to); const dx = b.x - a.x; const dy = b.y - a.y; const len = Math.max(1, Math.hypot(dx, dy)); const angle = (Math.atan2(dy, dx) * 180) / Math.PI; el.style.transition = "none"; el.style.left = `${a.x}px`; el.style.top = `${a.y}px`; el.style.width = `${len}px`; el.style.opacity = flicker ? "0.55" : "1"; el.style.transform = `translateY(-50%) rotate(${angle}deg) scaleX(0)`; // eslint-disable-next-line @typescript-eslint/no-unused-expressions el.offsetHeight; // force reflow so the collapsed start state commits el.style.transition = `transform ${BEAM_SWEEP_MS}ms ${EASE}`; el.style.transform = `translateY(-50%) rotate(${angle}deg) scaleX(1)`; window.setTimeout(() => { el.style.transition = `opacity ${BEAM_FADE_MS}ms linear`; el.style.opacity = "0"; }, BEAM_SWEEP_MS); } function clampCardPosition(target: Rect, cardW: number, cardH: number) { const vw = window.innerWidth; const vh = window.innerHeight; let top = target.top + target.height + CARD_GAP; if (top + cardH > vh - CARD_MARGIN) { const above = target.top - CARD_GAP - cardH; top = above > CARD_MARGIN ? above : Math.max(CARD_MARGIN, vh - cardH - CARD_MARGIN); } let left = target.left + target.width / 2 - cardW / 2; left = Math.min(Math.max(left, CARD_MARGIN), Math.max(CARD_MARGIN, vw - cardW - CARD_MARGIN)); return { left, top: Math.max(CARD_MARGIN, top) }; } export function LeadingLight({ steps, active, onNext, onBack, onExit, className = "" }: LeadingLightProps) { const autoId = useId(); const titleId = `ll-title-${autoId.replace(/:/g, "")}`; const bodyId = `ll-body-${autoId.replace(/:/g, "")}`; const holeRef = useRef(null); const ringRef = useRef(null); const beamRef = useRef(null); const cardRef = useRef(null); const nextBtnRef = useRef(null); const reducedRef = useRef(false); const prevActiveRef = useRef(active); const prevRectRef = useRef(null); const returnFocusRef = useRef(null); const flickerRef = useRef(false); const step = steps[active]; useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); reducedRef.current = mq.matches; const onChange = () => { reducedRef.current = mq.matches; }; mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); // remember what had focus before the tour started, restore it on exit useEffect(() => { returnFocusRef.current = document.activeElement as HTMLElement | null; return () => { returnFocusRef.current?.focus?.(); }; }, []); const reposition = useCallback(() => { if (!step) return; const rect = measure(step.target); if (!rect) return; moveRing(ringRef.current, rect, reducedRef.current); morphHole(holeRef.current, rect, reducedRef.current); const card = cardRef.current; if (card) { const { left, top } = clampCardPosition(rect, card.offsetWidth || 280, card.offsetHeight || 140); card.style.left = `${left}px`; card.style.top = `${top}px`; } prevRectRef.current = rect; }, [step]); // step change: sweep the beam from the old rect to the new one, morph the // hole/ring, and reposition the card — then focus the card for keyboard use useEffect(() => { if (!step) return; const rect = measure(step.target); if (!rect) return; const prevRect = prevRectRef.current; const isAdvance = prevActiveRef.current !== active; prevActiveRef.current = active; if (isAdvance && prevRect) { sweepBeam(beamRef.current, prevRect, rect, reducedRef.current, flickerRef.current); flickerRef.current = false; } moveRing(ringRef.current, rect, reducedRef.current); morphHole(holeRef.current, rect, reducedRef.current); const card = cardRef.current; if (card) { const { left, top } = clampCardPosition(rect, card.offsetWidth || 280, card.offsetHeight || 140); card.style.left = `${left}px`; card.style.top = `${top}px`; } prevRectRef.current = rect; const focusTarget = nextBtnRef.current ?? cardRef.current; focusTarget?.focus({ preventScroll: true }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [active, step?.target]); useEffect(() => { window.addEventListener("resize", reposition); window.addEventListener("scroll", reposition, true); return () => { window.removeEventListener("resize", reposition); window.removeEventListener("scroll", reposition, true); }; }, [reposition]); const onCardKeyDown = (e: ReactKeyboardEvent) => { if (e.key === "Escape") { e.preventDefault(); onExit(); return; } if (e.key === "ArrowRight" || e.key === "ArrowDown") { e.preventDefault(); onNext(); return; } if (e.key === "ArrowLeft" || e.key === "ArrowUp") { e.preventDefault(); if (active > 0) onBack(); return; } if (e.key === "Tab") { const card = cardRef.current; if (!card) return; const focusables = Array.from( card.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' ) ).filter((el) => !el.hasAttribute("disabled")); if (focusables.length === 0) return; const first = focusables[0]!; const last = focusables[focusables.length - 1]!; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } } }; if (!step) return null; return (

Step {active + 1} of {steps.length}: {step.title}

{active + 1} of {steps.length}

{step.title}

{step.body}

); } 63:["$","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":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/tour-spotlight/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/tour-spotlight.tsx"}],"className":"h-[70svh] min-h-80"}]]}]