{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "tour", "title": "Tour", "type": "registry:ui", "files": [ { "path": "packages/registry-svelte/components/tour/Tour.svelte", "content": "\n\n\n\n{#if mounted && open && currentStep}\n
\n {#if showMask}\n \n {/if}\n \n
\n{/if}\n", "type": "registry:ui", "target": "~/src/lib/components/ui/tour/Tour.svelte" }, { "path": "packages/registry-svelte/components/tour/TourMask.svelte", "content": "\n\n\n\n\n\n \n \n \n {#if cutout}\n \n {/if}\n \n \n \n\n\n\n", "type": "registry:ui", "target": "~/src/lib/components/ui/tour/TourMask.svelte" }, { "path": "packages/registry-svelte/components/tour/TourCard.svelte", "content": "\n\n\n\n\n onskip?.()}\n >\n \n \n\n {#if cover}\n \"\"\n {/if}\n\n
\n
{title}
\n {#if description}\n
{description}
\n {/if}\n
\n\n
\n
\n {current + 1} / {total}\n
\n
\n {#if !isFirst}\n \n {/if}\n {#if !isLast}\n \n {:else}\n \n {/if}\n
\n
\n\n", "type": "registry:ui", "target": "~/src/lib/components/ui/tour/TourCard.svelte" }, { "path": "packages/registry-svelte/components/tour/tour-target.svelte.ts", "content": "import { onDestroy } from 'svelte'\n\nexport type TourTarget = string | (() => HTMLElement | null) | HTMLElement | null\n\nexport interface TargetRect {\n x: number\n y: number\n width: number\n height: number\n}\n\nexport function createTourTarget(getTarget: () => TourTarget | undefined) {\n let rect = $state(null)\n let element: HTMLElement | null = null\n\n let resizeObs: ResizeObserver | null = null\n let raf = 0\n\n function resolve(): HTMLElement | null {\n const t = getTarget()\n if (!t || typeof document === 'undefined') return null\n if (typeof t === 'string') return document.querySelector(t) as HTMLElement | null\n if (typeof t === 'function') return t()\n return t\n }\n\n function measure() {\n if (typeof requestAnimationFrame === 'undefined') return\n cancelAnimationFrame(raf)\n raf = requestAnimationFrame(() => {\n if (!element) {\n rect = null\n return\n }\n const r = element.getBoundingClientRect()\n rect = { x: r.left, y: r.top, width: r.width, height: r.height }\n })\n }\n\n function attach() {\n detach()\n element = resolve()\n if (!element) {\n rect = null\n return\n }\n measure()\n if (typeof ResizeObserver !== 'undefined' && typeof document !== 'undefined') {\n resizeObs = new ResizeObserver(measure)\n resizeObs.observe(element)\n resizeObs.observe(document.documentElement)\n }\n if (typeof window !== 'undefined') {\n window.addEventListener('scroll', measure, { passive: true, capture: true })\n window.addEventListener('resize', measure, { passive: true })\n }\n }\n\n function detach() {\n resizeObs?.disconnect()\n resizeObs = null\n if (typeof window !== 'undefined') {\n window.removeEventListener('scroll', measure, true)\n window.removeEventListener('resize', measure)\n }\n if (typeof cancelAnimationFrame !== 'undefined') cancelAnimationFrame(raf)\n }\n\n onDestroy(detach)\n\n return {\n get rect() {\n return rect\n },\n get element() {\n return element\n },\n attach,\n detach,\n measure,\n }\n}\n", "type": "registry:ui", "target": "~/src/lib/components/ui/tour/tour-target.svelte.ts" }, { "path": "packages/registry-svelte/components/tour/index.ts", "content": "export { default as Tour, type TourProps, type TourStep } from './Tour.svelte'\nexport type { TourTarget, TargetRect } from './tour-target.svelte'\n", "type": "registry:ui", "target": "~/src/lib/components/ui/tour/index.ts" } ], "dependencies": [ "@lucide/svelte" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/svelte/button.json" ], "description": "Multi-step guided overlay walkthrough. Highlights a target element with a dim mask cutout and shows a card next to it. Steps support targets by selector, ref, or function; centered (no-target) steps work as modal-style intros.", "categories": [ "overlay" ] }