Tour

bun add @absolutejs/tour

useTourConditions().register("hasDeals", () => dealCount.value > 0);

{
	title: "Your pipeline",
	showIf: [{ condition: "hasDeals" }],           // all must hold, else skipped
	skipIf: [{ condition: "media", args: { query: "(max-width: 640px)" } }],
	waitFor: { selector: ".pipeline-board", timeoutMs: 5000 }, // hold until ready
}

import type { Tutorial } from "@absolutejs/tour";

const tour: Tutorial = {
  slug: "portal-intro",
  trigger: { firstVisitOnly: true, onRoutePrefix: "/portal" },
  steps: [
    {
      title: "Welcome",
      body: "A quick tour.",
      placement: "center",
      route: "/dashboard",
    },
    {
      title: "Your command center",
      body: "Your single best next step is always one click here.",
      route: "/dashboard",
      target: '[data-tour=\"hero\"]',
      placement: "bottom",
    },
    // …intake, matches, network — each navigates and spotlights a real element
  ],
};

// shared controller (singleton per storage key)
import { useTourController } from "@absolutejs/tour";
const tour = useTourController("myapp.tour");

// auto-play once on first visit, then stamp your own "seen" marker
if (!account.tourSeenAt) tour.start();

// replay from anywhere (does not re-stamp — pass replay=true)
tour.start(true);

import type { Tutorial } from '@absolutejs/tour';

const tour: Tutorial = {
	slug: 'portal-intro',
	steps: [
		{
			body: 'A quick tour.',
			placement: 'center',
			route: '/dashboard',
			title: 'Welcome'
		},
		{
			body: 'Your single best next step is always one click here.',
			placement: 'bottom',
			route: '/dashboard',
			target: "[data-tour='hero']",
			title: 'Your command center'
		}
	],
	trigger: { firstVisitOnly: true, onRoutePrefix: '/portal' }
};

import { useSpotlight, useTourController } from '@absolutejs/tour';
import { PORTAL_TOUR_STEPS } from './steps';

// Shared controller (singleton per storage key)
const controller = useTourController('myapp.tour');

// Render your overlay from the computed geometry and state
const t = useSpotlight({
	controller,
	onClose: () => emit('close'),
	onEvent: (event) => analytics.track(event),
	steps: () => PORTAL_TOUR_STEPS
});
// t.step, t.spotlightStyle, t.tooltipStyle, t.next, t.back, t.skip

// Auto-play once on first visit, then stamp your own "seen" marker
if (!account.tourSeenAt) {
	controller.start();
}

// Replay from anywhere (does not re-stamp)
controller.start(true);

import { useTourActions } from '@absolutejs/tour';

// The page that OWNS the surface registers its demo handler
const actions = useTourActions();
const unregister = actions.register('matches.demo-swipe', async (ctx) => {
	const direction = ctx.args.direction === 'left' ? 'left' : 'right';
	await swiper.value?.demoSwipe(direction); // ctx.signal aborts long demos
});
onBeforeUnmount(unregister);

// The step invokes it — plain JSON, safe to store in a DB
const step = {
	onEnter: [
		{ action: 'matches.demo-swipe', args: { direction: 'right' } },
		{ action: 'wait', args: { ms: 700 } },
		{ action: 'matches.demo-swipe', args: { direction: 'left' } }
	],
	route: '/portal/matches',
	target: "[data-tour='match-view']",
	title: 'Swipe or list'
};