Basic tour

<script lang="ts">
  import { SpotlightTour, useSpotlight, type SpotlightStep } from 'svelte-tourlight';

  const steps: SpotlightStep[] = [
    { id: 'welcome', title: 'Welcome', content: 'No target: a centered step.' },
    { id: 'search', target: '[data-tour="search"]', title: 'Search', content: 'Find anything.' },
    { id: 'new', target: '[data-tour="new"]', title: 'Create', content: 'Start something new.' },
    { id: 'profile', target: '[data-tour="profile"]', title: 'You', content: 'Settings live here.' }
  ];

  const tour = useSpotlight();
</script>

<SpotlightTour id="basic" {steps} />

<button onclick={() => tour.start('basic')}>Start tour</button>
<button onclick={() => tour.start('basic', { stepIndex: 2 })}>Start at step 3</button>