@sprawlify/primitives 0.0.1

package/dist/machines/tour/index.mjs

@@ -0,0 +1,1101 @@
+import { t as createAnatomy } from "../../create-anatomy-BbDZbHpC.mjs";
+import { U as raf, Xt as contains, Yt as getComputedStyle$1, ln as isHTMLElement, n as waitForPromise, rn as getWindow, t as waitForElement, vn as dataAttr } from "../../dom-query-DFCRhyj1.mjs";
+import { Ot as prevIndex, Tt as nextIndex, dt as isEqual, i as warn, u as createSplitProps, ut as isString } from "../../utils-BZyrxWWR.mjs";
+import { a as createMachine, c as mergeProps, i as createGuards } from "../../core-DCFNMTZF.mjs";
+import { t as trackInteractOutside } from "../../interact-outside-BplxR9cR.mjs";
+import { t as trackDismissableBranch } from "../../dismissable-DDrx0xnH.mjs";
+import { t as trapFocus } from "../../focus-trap-D-bypQEJ.mjs";
+import { n as getPlacement, t as getPlacementStyles } from "../../popper-BPJeAtcA.mjs";
+import { t as createProps } from "../../create-props-BnF_vl-E.mjs";
+
+//#region src/machines/tour/tour.anatomy.ts
+const anatomy = createAnatomy("tour").parts("content", "actionTrigger", "closeTrigger", "progressText", "title", "description", "positioner", "arrow", "arrowTip", "backdrop", "spotlight");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/tour/tour.dom.ts
+const getPositionerId = (ctx) => ctx.ids?.positioner ?? `tour:${ctx.id}:positioner`;
+const getContentId = (ctx) => ctx.ids?.content ?? `tour:${ctx.id}:content`;
+const getTitleId = (ctx) => ctx.ids?.title ?? `tour:${ctx.id}:title`;
+const getDescriptionId = (ctx) => ctx.ids?.description ?? `tour:${ctx.id}:description`;
+const getArrowId = (ctx) => ctx.ids?.arrow ?? `tour:${ctx.id}:arrow`;
+const getBackdropId = (ctx) => ctx.ids?.backdrop ?? `tour:${ctx.id}:backdrop`;
+const getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+const getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
+const getBackdropEl = (ctx) => ctx.getById(getBackdropId(ctx));
+function syncZIndex(scope) {
+	return raf(() => {
+		const contentEl = getContentEl(scope);
+		if (!contentEl) return;
+		const styles = getComputedStyle$1(contentEl);
+		const positionerEl = getPositionerEl(scope);
+		const backdropEl = getBackdropEl(scope);
+		if (positionerEl) {
+			positionerEl.style.setProperty("--z-index", styles.zIndex);
+			positionerEl.style.setProperty("z-index", "var(--z-index)");
+		}
+		if (backdropEl) backdropEl.style.setProperty("--z-index", styles.zIndex);
+	});
+}
+
+//#endregion
+//#region src/machines/tour/utils/clip-path.ts
+function getClipPath(options) {
+	const { radius = 0, rootSize: { width: w, height: h }, rect: { width, height, x, y }, enabled = true } = options;
+	if (!enabled) return "";
+	const { topLeft = 0, topRight = 0, bottomRight = 0, bottomLeft = 0 } = typeof radius === "number" ? {
+		topLeft: radius,
+		topRight: radius,
+		bottomRight: radius,
+		bottomLeft: radius
+	} : radius;
+	return `M${w},${h}\
+  H0\
+  V0\
+  H${w}\
+  V${h}\
+  Z\
+  M${x + topLeft},${y}\
+  a${topLeft},${topLeft},0,0,0-${topLeft},${topLeft}\
+  V${height + y - bottomLeft}\
+  a${bottomLeft},${bottomLeft},0,0,0,${bottomLeft},${bottomLeft}\
+  H${width + x - bottomRight}\
+  a${bottomRight},${bottomRight},0,0,0,${bottomRight}-${bottomRight}\
+  V${y + topRight}\
+  a${topRight},${topRight},0,0,0-${topRight}-${topRight}\
+  Z`;
+}
+
+//#endregion
+//#region src/machines/tour/utils/step.ts
+const isTooltipStep = (step) => {
+	return step?.type === "tooltip";
+};
+const isDialogStep = (step) => {
+	return step?.type === "dialog";
+};
+const isWaitStep = (step) => {
+	return step?.type === "wait";
+};
+const getEffectiveSteps = (steps) => {
+	return steps.filter((step) => step.type !== "wait");
+};
+const getProgress = (steps, stepIndex) => {
+	const effectiveLength = getEffectiveSteps(steps).length;
+	return (stepIndex + 1) / effectiveLength;
+};
+const getEffectiveStepIndex = (steps, stepId) => {
+	return findStepIndex(getEffectiveSteps(steps), stepId);
+};
+const isTooltipPlacement = (placement) => {
+	return placement != null && placement != "center";
+};
+const normalizeStep = (step) => {
+	if (step.type === "floating") return {
+		backdrop: false,
+		arrow: false,
+		placement: "bottom-end",
+		...step
+	};
+	if (step.target == null || step.type === "dialog") return {
+		type: "dialog",
+		placement: "center",
+		backdrop: true,
+		...step
+	};
+	if (!step.type || step.type === "tooltip") return {
+		type: "tooltip",
+		arrow: true,
+		backdrop: true,
+		...step
+	};
+	return step;
+};
+const findStep = (steps, id) => {
+	const res = id != null ? steps.find((step) => step.id === id) : null;
+	return res ? normalizeStep(res) : null;
+};
+const findStepIndex = (steps, id) => {
+	return id != null ? steps.findIndex((step) => step.id === id) : -1;
+};
+
+//#endregion
+//#region src/machines/tour/tour.connect.ts
+function connect(service, normalize) {
+	const { state, context, computed, send, prop, scope } = service;
+	const open = state.hasTag("open");
+	const steps = Array.from(context.get("steps"));
+	const stepIndex = computed("stepIndex");
+	const step = computed("step");
+	const hasTarget = typeof step?.target?.() !== "undefined";
+	const hasNextStep = computed("hasNextStep");
+	const hasPrevStep = computed("hasPrevStep");
+	const firstStep = computed("isFirstStep");
+	const lastStep = computed("isLastStep");
+	const placement = context.get("currentPlacement");
+	const targetRect = context.get("targetRect");
+	const popperStyles = getPlacementStyles({
+		strategy: "absolute",
+		placement: isTooltipPlacement(placement) ? placement : void 0
+	});
+	const clipPath = getClipPath({
+		enabled: isTooltipStep(step),
+		rect: targetRect,
+		rootSize: context.get("boundarySize"),
+		radius: prop("spotlightRadius")
+	});
+	const actionMap = {
+		next() {
+			send({
+				type: "STEP.NEXT",
+				src: "actionTrigger"
+			});
+		},
+		prev() {
+			send({
+				type: "STEP.PREV",
+				src: "actionTrigger"
+			});
+		},
+		dismiss() {
+			send({
+				type: "DISMISS",
+				src: "actionTrigger"
+			});
+		},
+		skip() {
+			send({
+				type: "SKIP",
+				src: "actionTrigger"
+			});
+		},
+		goto(id) {
+			send({
+				type: "STEP.SET",
+				value: id,
+				src: "actionTrigger"
+			});
+		}
+	};
+	return {
+		open,
+		totalSteps: steps.length,
+		stepIndex,
+		step,
+		hasNextStep,
+		hasPrevStep,
+		firstStep,
+		lastStep,
+		addStep(step$1) {
+			send({
+				type: "STEPS.SET",
+				value: steps.concat(step$1),
+				src: "addStep"
+			});
+		},
+		removeStep(id) {
+			send({
+				type: "STEPS.SET",
+				value: steps.filter((step$1) => step$1.id !== id),
+				src: "removeStep"
+			});
+		},
+		updateStep(id, stepOverrides) {
+			send({
+				type: "STEPS.SET",
+				value: steps.map((step$1) => step$1.id === id ? mergeProps(step$1, stepOverrides) : step$1),
+				src: "updateStep"
+			});
+		},
+		setSteps(steps$1) {
+			send({
+				type: "STEPS.SET",
+				value: steps$1,
+				src: "setSteps"
+			});
+		},
+		setStep(id) {
+			send({
+				type: "STEP.SET",
+				value: id
+			});
+		},
+		start(id) {
+			send({
+				type: "START",
+				value: id
+			});
+		},
+		isValidStep(id) {
+			return steps.some((step$1) => step$1.id === id);
+		},
+		isCurrentStep(id) {
+			return Boolean(step?.id === id);
+		},
+		next() {
+			send({ type: "STEP.NEXT" });
+		},
+		prev() {
+			send({ type: "STEP.PREV" });
+		},
+		getProgressPercent() {
+			const index = getEffectiveStepIndex(steps, step?.id);
+			const total = getEffectiveSteps(steps).length;
+			return (index + 1) / total * 100;
+		},
+		getProgressText() {
+			const details = {
+				current: getEffectiveStepIndex(steps, step?.id),
+				total: getEffectiveSteps(steps).length
+			};
+			return prop("translations").progressText?.(details) ?? "";
+		},
+		getBackdropProps() {
+			return normalize.element({
+				...parts.backdrop.attrs,
+				id: getBackdropId(scope),
+				dir: prop("dir"),
+				hidden: !open,
+				"data-state": open ? "open" : "closed",
+				"data-type": step?.type,
+				style: {
+					"--tour-layer": 0,
+					clipPath: isTooltipStep(step) ? `path("${clipPath}")` : void 0,
+					position: "absolute",
+					inset: "0",
+					willChange: "clip-path"
+				}
+			});
+		},
+		getSpotlightProps() {
+			return normalize.element({
+				...parts.spotlight.attrs,
+				hidden: !open || !step?.target?.(),
+				style: {
+					"--tour-layer": 1,
+					position: "absolute",
+					width: `${targetRect.width}px`,
+					height: `${targetRect.height}px`,
+					left: `${targetRect.x}px`,
+					top: `${targetRect.y}px`,
+					borderRadius: `${prop("spotlightRadius")}px`,
+					pointerEvents: "none"
+				}
+			});
+		},
+		getProgressTextProps() {
+			return normalize.element({ ...parts.progressText.attrs });
+		},
+		getPositionerProps() {
+			return normalize.element({
+				...parts.positioner.attrs,
+				dir: prop("dir"),
+				id: getPositionerId(scope),
+				"data-type": step?.type,
+				"data-placement": placement,
+				style: {
+					"--tour-layer": 2,
+					...step?.type === "tooltip" && popperStyles.floating
+				}
+			});
+		},
+		getArrowProps() {
+			return normalize.element({
+				id: getArrowId(scope),
+				...parts.arrow.attrs,
+				dir: prop("dir"),
+				hidden: step?.type !== "tooltip",
+				style: step?.type === "tooltip" ? popperStyles.arrow : void 0,
+				opacity: hasTarget ? void 0 : 0
+			});
+		},
+		getArrowTipProps() {
+			return normalize.element({
+				...parts.arrowTip.attrs,
+				dir: prop("dir"),
+				style: popperStyles.arrowTip
+			});
+		},
+		getContentProps() {
+			return normalize.element({
+				...parts.content.attrs,
+				id: getContentId(scope),
+				dir: prop("dir"),
+				role: "alertdialog",
+				"aria-modal": "true",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				hidden: !open,
+				"data-state": open ? "open" : "closed",
+				"data-type": step?.type,
+				"data-placement": placement,
+				"data-step": step?.id,
+				"aria-labelledby": getTitleId(scope),
+				"aria-describedby": getDescriptionId(scope),
+				tabIndex: -1,
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!prop("keyboardNavigation")) return;
+					const isRtl = prop("dir") === "rtl";
+					switch (event.key) {
+						case "ArrowRight":
+							if (!hasNextStep) return;
+							send({
+								type: isRtl ? "STEP.PREV" : "STEP.NEXT",
+								src: "keydown"
+							});
+							break;
+						case "ArrowLeft":
+							if (!hasPrevStep) return;
+							send({
+								type: isRtl ? "STEP.NEXT" : "STEP.PREV",
+								src: "keydown"
+							});
+							break;
+						default: break;
+					}
+				}
+			});
+		},
+		getTitleProps() {
+			return normalize.element({
+				...parts.title.attrs,
+				id: getTitleId(scope),
+				"data-placement": hasTarget ? placement : "center"
+			});
+		},
+		getDescriptionProps() {
+			return normalize.element({
+				...parts.description.attrs,
+				id: getDescriptionId(scope),
+				"data-placement": hasTarget ? placement : "center"
+			});
+		},
+		getCloseTriggerProps() {
+			return normalize.element({
+				...parts.closeTrigger.attrs,
+				"data-type": step?.type,
+				"aria-label": prop("translations").close,
+				onClick: actionMap.dismiss
+			});
+		},
+		getActionTriggerProps(props$1) {
+			const { action, attrs } = props$1.action;
+			let actionProps = {};
+			switch (action) {
+				case "next":
+					actionProps = {
+						"data-type": "next",
+						disabled: !hasNextStep,
+						"data-disabled": dataAttr(!hasNextStep),
+						"aria-label": prop("translations").nextStep,
+						onClick: actionMap.next
+					};
+					break;
+				case "prev":
+					actionProps = {
+						"data-type": "prev",
+						disabled: !hasPrevStep,
+						"data-disabled": dataAttr(!hasPrevStep),
+						"aria-label": prop("translations").prevStep,
+						onClick: actionMap.prev
+					};
+					break;
+				case "dismiss":
+					actionProps = {
+						"data-type": "close",
+						"aria-label": prop("translations").close,
+						onClick: actionMap.dismiss
+					};
+					break;
+				default:
+					actionProps = {
+						"data-type": "custom",
+						onClick() {
+							if (typeof action === "function") action(actionMap);
+						}
+					};
+					break;
+			}
+			return normalize.button({
+				...parts.actionTrigger.attrs,
+				type: "button",
+				...attrs,
+				...actionProps
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/tour/utils/rect.ts
+function getFrameElement(win) {
+	return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
+const normalizeEventPoint = (event) => {
+	let clientX = event.clientX;
+	let clientY = event.clientY;
+	let win = event.view || window;
+	let frame = getFrameElement(win);
+	while (frame) {
+		const iframeRect = frame.getBoundingClientRect();
+		const css = getComputedStyle(frame);
+		const left = iframeRect.left + (frame.clientLeft + parseFloat(css.paddingLeft));
+		const top = iframeRect.top + (frame.clientTop + parseFloat(css.paddingTop));
+		clientX += left;
+		clientY += top;
+		win = getWindow(frame);
+		frame = getFrameElement(win);
+	}
+	return {
+		clientX,
+		clientY
+	};
+};
+function isEventInRect(rect, event) {
+	const { clientX, clientY } = normalizeEventPoint(event);
+	return rect.y <= clientY && clientY <= rect.y + rect.height && rect.x <= clientX && clientX <= rect.x + rect.width;
+}
+function offset(r, i) {
+	const dx = i.x || 0;
+	const dy = i.y || 0;
+	return {
+		x: r.x - dx,
+		y: r.y - dy,
+		width: r.width + dx + dx,
+		height: r.height + dy + dy
+	};
+}
+
+//#endregion
+//#region src/machines/tour/tour.machine.ts
+const { and } = createGuards();
+const machine = createMachine({
+	props({ props: props$1 }) {
+		return {
+			preventInteraction: false,
+			closeOnInteractOutside: true,
+			closeOnEscape: true,
+			keyboardNavigation: true,
+			spotlightOffset: {
+				x: 10,
+				y: 10
+			},
+			spotlightRadius: 4,
+			...props$1,
+			translations: {
+				nextStep: "next step",
+				prevStep: "previous step",
+				close: "close tour",
+				progressText: ({ current, total }) => `${current + 1} of ${total}`,
+				skip: "skip tour",
+				...props$1.translations
+			}
+		};
+	},
+	initialState() {
+		return "tour.inactive";
+	},
+	context({ prop, bindable, getContext }) {
+		return {
+			steps: bindable(() => ({
+				defaultValue: prop("steps") ?? [],
+				onChange(value) {
+					prop("onStepsChange")?.({ steps: value });
+				}
+			})),
+			stepId: bindable(() => ({
+				defaultValue: prop("stepId"),
+				sync: true,
+				onChange(value) {
+					const steps = getContext().get("steps");
+					const stepIndex = findStepIndex(steps, value);
+					const progress = getProgress(steps, stepIndex);
+					const complete = stepIndex == steps.length - 1;
+					prop("onStepChange")?.({
+						stepId: value,
+						stepIndex,
+						totalSteps: steps.length,
+						complete,
+						progress
+					});
+				}
+			})),
+			resolvedTarget: bindable(() => ({
+				sync: true,
+				defaultValue: null
+			})),
+			targetRect: bindable(() => ({ defaultValue: {
+				width: 0,
+				height: 0,
+				x: 0,
+				y: 0
+			} })),
+			boundarySize: bindable(() => ({ defaultValue: {
+				width: 0,
+				height: 0
+			} })),
+			currentPlacement: bindable(() => ({ defaultValue: void 0 }))
+		};
+	},
+	computed: {
+		stepIndex: ({ context }) => findStepIndex(context.get("steps"), context.get("stepId")),
+		step: ({ context }) => findStep(context.get("steps"), context.get("stepId")),
+		hasNextStep: ({ context, computed }) => computed("stepIndex") < context.get("steps").length - 1,
+		hasPrevStep: ({ computed }) => computed("stepIndex") > 0,
+		isFirstStep: ({ computed }) => computed("stepIndex") === 0,
+		isLastStep: ({ context, computed }) => computed("stepIndex") === context.get("steps").length - 1,
+		progress: ({ context, computed }) => {
+			const effectiveLength = getEffectiveSteps(context.get("steps")).length;
+			return (computed("stepIndex") + 1) / effectiveLength;
+		}
+	},
+	watch({ track, context, action }) {
+		track([() => context.get("stepId")], () => {
+			queueMicrotask(() => {
+				action([
+					"setResolvedTarget",
+					"raiseStepChange",
+					"syncTargetAttrs"
+				]);
+			});
+		});
+	},
+	effects: ["trackBoundarySize"],
+	exit: ["cleanupAll"],
+	on: {
+		"STEPS.SET": { actions: ["setSteps", "validateSteps"] },
+		"STEP.SET": { actions: ["setStep"] },
+		"STEP.NEXT": { actions: ["setNextStep"] },
+		"STEP.PREV": { actions: ["setPrevStep"] },
+		"STEP.CHANGED": [
+			{
+				guard: and("isValidStep", "hasResolvedTarget"),
+				target: "target.scrolling",
+				actions: ["cleanupStepEffect"]
+			},
+			{
+				guard: and("isValidStep", "hasTarget"),
+				target: "target.resolving",
+				actions: ["cleanupStepEffect"]
+			},
+			{
+				guard: and("isValidStep", "isWaitingStep"),
+				target: "step.waiting",
+				actions: ["cleanupStepEffect"]
+			},
+			{
+				guard: "isValidStep",
+				target: "tour.active",
+				actions: ["cleanupStepEffect"]
+			}
+		],
+		DISMISS: [{
+			guard: "isLastStep",
+			target: "tour.inactive",
+			actions: [
+				"cleanupAll",
+				"invokeOnDismiss",
+				"invokeOnComplete",
+				"clearStep"
+			]
+		}, {
+			target: "tour.inactive",
+			actions: [
+				"cleanupAll",
+				"invokeOnDismiss",
+				"clearStep"
+			]
+		}],
+		SKIP: {
+			target: "tour.inactive",
+			actions: [
+				"cleanupAll",
+				"invokeOnSkip",
+				"clearStep"
+			]
+		}
+	},
+	states: {
+		"tour.inactive": {
+			tags: ["closed"],
+			entry: ["validateSteps"],
+			on: { START: { actions: ["setInitialStep", "invokeOnStart"] } }
+		},
+		"target.resolving": {
+			tags: ["closed"],
+			effects: ["waitForTarget", "waitForTargetTimeout"],
+			on: {
+				"TARGET.NOT_FOUND": {
+					target: "tour.inactive",
+					actions: ["invokeOnNotFound", "clearStep"]
+				},
+				"TARGET.RESOLVED": {
+					target: "target.scrolling",
+					actions: ["setResolvedTarget"]
+				}
+			}
+		},
+		"target.scrolling": {
+			tags: ["open"],
+			entry: ["scrollToTarget"],
+			effects: [
+				"waitForScrollEnd",
+				"trapFocus",
+				"trackPlacement",
+				"trackDismissableBranch",
+				"trackInteractOutside",
+				"trackEscapeKeydown"
+			],
+			on: { "SCROLL.END": { target: "tour.active" } }
+		},
+		"step.waiting": { tags: ["closed"] },
+		"tour.active": {
+			tags: ["open"],
+			effects: [
+				"trapFocus",
+				"trackPlacement",
+				"trackDismissableBranch",
+				"trackInteractOutside",
+				"trackEscapeKeydown"
+			]
+		}
+	},
+	implementations: {
+		guards: {
+			isLastStep: ({ computed, context }) => computed("stepIndex") === context.get("steps").length - 1,
+			isValidStep: ({ context }) => context.get("stepId") != null,
+			hasTarget: ({ computed }) => computed("step")?.target != null,
+			hasResolvedTarget: ({ context }) => context.get("resolvedTarget") != null,
+			isWaitingStep: ({ computed }) => computed("step")?.type === "wait"
+		},
+		actions: {
+			scrollToTarget({ context }) {
+				context.get("resolvedTarget")?.scrollIntoView({
+					behavior: "instant",
+					block: "center",
+					inline: "center"
+				});
+			},
+			setSteps(params) {
+				const { event, context } = params;
+				context.set("steps", event.value);
+			},
+			setStep(params) {
+				const { event } = params;
+				const step = event.value;
+				if (step == null) return;
+				new StepManager(params).transitionToStep(step);
+			},
+			clearStep(params) {
+				new StepManager(params).clear();
+			},
+			setInitialStep(params) {
+				const { context, event } = params;
+				if (context.get("steps").length === 0) return;
+				new StepManager(params).transitionToStep(event.value ?? 0);
+			},
+			setNextStep(params) {
+				const { computed } = params;
+				new StepManager(params).next(computed("stepIndex"));
+			},
+			setPrevStep(params) {
+				const { computed } = params;
+				new StepManager(params).prev(computed("stepIndex"));
+			},
+			invokeOnStart({ prop, context, computed }) {
+				prop("onStatusChange")?.({
+					status: "started",
+					stepId: context.get("stepId"),
+					stepIndex: computed("stepIndex")
+				});
+			},
+			invokeOnDismiss({ prop, context, computed }) {
+				prop("onStatusChange")?.({
+					status: "dismissed",
+					stepId: context.get("stepId"),
+					stepIndex: computed("stepIndex")
+				});
+			},
+			invokeOnComplete({ prop, context, computed }) {
+				prop("onStatusChange")?.({
+					status: "completed",
+					stepId: context.get("stepId"),
+					stepIndex: computed("stepIndex")
+				});
+			},
+			invokeOnSkip({ prop, context, computed }) {
+				prop("onStatusChange")?.({
+					status: "skipped",
+					stepId: context.get("stepId"),
+					stepIndex: computed("stepIndex")
+				});
+			},
+			invokeOnNotFound({ prop, context, computed }) {
+				prop("onStatusChange")?.({
+					status: "not-found",
+					stepId: context.get("stepId"),
+					stepIndex: computed("stepIndex")
+				});
+			},
+			raiseStepChange({ send }) {
+				send({ type: "STEP.CHANGED" });
+			},
+			setResolvedTarget({ context, event, computed }) {
+				const node = event.node ?? computed("step")?.target?.();
+				context.set("resolvedTarget", node ?? null);
+			},
+			syncTargetAttrs(params) {
+				const { context } = params;
+				const targetEl = context.get("resolvedTarget");
+				new StepManager(params).syncTarget(targetEl);
+			},
+			cleanupAll(params) {
+				new StepManager(params).cleanupAll();
+			},
+			cleanupStepEffect(params) {
+				new StepManager(params).cleanupStepEffect();
+			},
+			validateSteps({ context }) {
+				const ids = /* @__PURE__ */ new Set();
+				context.get("steps").forEach((step) => {
+					if (ids.has(step.id)) throw new Error(`[sprawlify-js/tour] Duplicate step id: ${step.id}`);
+					if (step.target == null && step.type == null) throw new Error(`[sprawlify-js/tour] Step ${step.id} has no target or type. At least one of those is required.`);
+					ids.add(step.id);
+				});
+			}
+		},
+		effects: {
+			waitForScrollEnd({ send }) {
+				const id = setTimeout(() => {
+					send({ type: "SCROLL.END" });
+				}, 100);
+				return () => clearTimeout(id);
+			},
+			waitForTargetTimeout({ send }) {
+				const id = setTimeout(() => {
+					send({ type: "TARGET.NOT_FOUND" });
+				}, 3e3);
+				return () => clearTimeout(id);
+			},
+			waitForTarget({ scope, computed, send }) {
+				const step = computed("step");
+				if (!step) return;
+				const targetEl = step.target;
+				const win = scope.getWin();
+				const rootNode = scope.getRootNode();
+				const observer = new win.MutationObserver(() => {
+					const node = targetEl?.();
+					if (node) {
+						send({
+							type: "TARGET.RESOLVED",
+							node
+						});
+						observer.disconnect();
+					}
+				});
+				observer.observe(rootNode, {
+					childList: true,
+					subtree: true,
+					characterData: true
+				});
+				return () => {
+					observer.disconnect();
+				};
+			},
+			trackBoundarySize({ context, scope }) {
+				const win = scope.getWin();
+				const doc = scope.getDoc();
+				const onResize = () => {
+					const width = visualViewport?.width ?? win.innerWidth;
+					const height = doc.documentElement.scrollHeight;
+					context.set("boundarySize", {
+						width,
+						height
+					});
+				};
+				onResize();
+				const viewport = win.visualViewport ?? win;
+				viewport.addEventListener("resize", onResize);
+				return () => viewport.removeEventListener("resize", onResize);
+			},
+			trackEscapeKeydown({ scope, send, prop }) {
+				if (!prop("closeOnEscape")) return;
+				const doc = scope.getDoc();
+				const onKeyDown = (event) => {
+					if (event.key === "Escape") {
+						event.preventDefault();
+						event.stopPropagation();
+						send({
+							type: "DISMISS",
+							src: "esc"
+						});
+					}
+				};
+				doc.addEventListener("keydown", onKeyDown, true);
+				return () => {
+					doc.removeEventListener("keydown", onKeyDown, true);
+				};
+			},
+			trackInteractOutside({ context, computed, scope, send, prop }) {
+				const step = computed("step");
+				if (step == null) return;
+				const contentEl = () => getContentEl(scope);
+				return trackInteractOutside(contentEl, {
+					defer: true,
+					exclude(target) {
+						return contains(step.target?.(), target);
+					},
+					onFocusOutside(event) {
+						prop("onFocusOutside")?.(event);
+						if (!prop("closeOnInteractOutside")) event.preventDefault();
+					},
+					onPointerDownOutside(event) {
+						prop("onPointerDownOutside")?.(event);
+						if (isEventInRect(context.get("targetRect"), event.detail.originalEvent)) {
+							event.preventDefault();
+							return;
+						}
+						if (!prop("closeOnInteractOutside")) event.preventDefault();
+					},
+					onInteractOutside(event) {
+						prop("onInteractOutside")?.(event);
+						if (event.defaultPrevented) return;
+						send({
+							type: "DISMISS",
+							src: "interact-outside"
+						});
+					}
+				});
+			},
+			trackDismissableBranch({ computed, scope }) {
+				if (computed("step") == null) return;
+				const contentEl = () => getContentEl(scope);
+				return trackDismissableBranch(contentEl, { defer: true });
+			},
+			trapFocus({ computed, scope }) {
+				if (computed("step") == null) return;
+				const contentEl = () => getContentEl(scope);
+				return trapFocus(contentEl, {
+					escapeDeactivates: false,
+					allowOutsideClick: true,
+					preventScroll: true,
+					returnFocusOnDeactivate: false,
+					getShadowRoot: true
+				});
+			},
+			trackPlacement({ context, computed, scope, prop }) {
+				const step = computed("step");
+				if (step == null) return;
+				context.set("currentPlacement", step.placement ?? "bottom");
+				if (isDialogStep(step)) return syncZIndex(scope);
+				if (!isTooltipStep(step)) return;
+				const positionerEl = () => getPositionerEl(scope);
+				return getPlacement(context.get("resolvedTarget"), positionerEl, {
+					defer: true,
+					placement: step.placement ?? "bottom",
+					strategy: "absolute",
+					gutter: 10,
+					offset: step.offset,
+					getAnchorRect(el) {
+						if (!isHTMLElement(el)) return null;
+						return offset(el.getBoundingClientRect(), prop("spotlightOffset"));
+					},
+					onComplete(data) {
+						const { rects } = data.middlewareData;
+						context.set("currentPlacement", data.placement);
+						context.set("targetRect", rects.reference);
+					}
+				});
+			}
+		}
+	}
+});
+var StepManager = class {
+	constructor(params) {
+		this.params = params;
+	}
+	transitionToStep(step) {
+		const steps = this.params.context.get("steps");
+		const idx = isString(step) ? findStepIndex(steps, step) : step;
+		this.transitionTo(idx);
+	}
+	next(currentIndex) {
+		const idx = nextIndex(this.params.context.get("steps"), currentIndex);
+		this.transitionTo(idx);
+	}
+	prev(currentIndex) {
+		const idx = prevIndex(this.params.context.get("steps"), currentIndex);
+		this.transitionTo(idx);
+	}
+	clear() {
+		const { context } = this.params;
+		context.set("targetRect", {
+			width: 0,
+			height: 0,
+			x: 0,
+			y: 0
+		});
+		context.set("resolvedTarget", null);
+		this.transitionTo(-1);
+	}
+	cleanupAll() {
+		const { refs } = this.params;
+		refs.get("_targetCleanup")?.();
+		refs.set("_targetCleanup", void 0);
+		refs.set("_prevTarget", void 0);
+		refs.get("_effectCleanup")?.();
+		refs.set("_effectCleanup", void 0);
+	}
+	cleanupStepEffect() {
+		const { refs } = this.params;
+		if (refs.get("_runningEffect")) return;
+		refs.get("_effectCleanup")?.();
+		refs.set("_effectCleanup", void 0);
+	}
+	syncTarget(targetEl) {
+		const { refs, prop } = this.params;
+		const prevTarget = refs.get("_prevTarget");
+		if (targetEl !== prevTarget) {
+			refs.get("_targetCleanup")?.();
+			refs.set("_targetCleanup", void 0);
+		}
+		if (!targetEl) {
+			refs.set("_prevTarget", null);
+			return;
+		}
+		if (targetEl === prevTarget) return;
+		if (prop("preventInteraction")) targetEl.inert = true;
+		targetEl.setAttribute("data-tour-highlighted", "");
+		refs.set("_targetCleanup", () => {
+			if (prop("preventInteraction")) targetEl.inert = false;
+			targetEl.removeAttribute("data-tour-highlighted");
+		});
+		refs.set("_prevTarget", targetEl);
+	}
+	transitionTo(idx) {
+		const { context, refs } = this.params;
+		const step = context.get("steps")[idx];
+		if (!step) {
+			context.set("stepId", null);
+			return;
+		}
+		if (isEqual(context.get("stepId"), step.id)) {
+			refs.set("_runningEffect", false);
+			return;
+		}
+		this.cleanup();
+		const utilities = this.createUtilities(step, idx);
+		if (step.effect) this.executeEffect(step, utilities);
+		else utilities.show();
+	}
+	cleanup() {
+		const { refs } = this.params;
+		refs.get("_effectCleanup")?.();
+		refs.set("_effectCleanup", void 0);
+		refs.get("_targetCleanup")?.();
+		refs.set("_targetCleanup", void 0);
+	}
+	createUtilities(step, idx) {
+		const { context, computed, prop } = this.params;
+		const steps = context.get("steps");
+		return {
+			show: () => {
+				context.set("stepId", step.id);
+			},
+			update: (data) => {
+				context.set("steps", (prev) => prev.map((s, i) => i === idx ? {
+					...s,
+					...data
+				} : s));
+			},
+			next: () => {
+				const nextIdx = nextIndex(steps, computed("stepIndex"));
+				this.transitionTo(nextIdx);
+			},
+			goto: (id) => {
+				const targetIdx = findStepIndex(steps, id);
+				if (targetIdx === -1) {
+					warn(`[sprawlify-js/tour] Step with id "${id}" not found`);
+					return;
+				}
+				this.transitionTo(targetIdx);
+			},
+			dismiss: () => {
+				context.set("stepId", null);
+				prop("onStatusChange")?.({
+					status: "dismissed",
+					stepId: null,
+					stepIndex: -1
+				});
+			},
+			target: step.target
+		};
+	}
+	executeEffect(step, utilities) {
+		const { refs } = this.params;
+		refs.set("_runningEffect", true);
+		let cleanup;
+		try {
+			cleanup = step.effect(utilities);
+		} catch (error) {
+			refs.set("_runningEffect", false);
+			console.error(error);
+			return;
+		}
+		refs.set("_effectCleanup", cleanup);
+		if (isWaitStep(step)) utilities.show();
+		queueMicrotask(() => {
+			queueMicrotask(() => {
+				refs.set("_runningEffect", false);
+			});
+		});
+	}
+};
+
+//#endregion
+//#region src/machines/tour/tour.props.ts
+const props = createProps()([
+	"closeOnEscape",
+	"closeOnInteractOutside",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"keyboardNavigation",
+	"onFocusOutside",
+	"onInteractOutside",
+	"onPointerDownOutside",
+	"onStatusChange",
+	"onStepChange",
+	"onStepsChange",
+	"preventInteraction",
+	"spotlightOffset",
+	"spotlightRadius",
+	"stepId",
+	"steps",
+	"translations"
+]);
+const splitProps = createSplitProps(props);
+
+//#endregion
+//#region src/machines/tour/utils/wait.ts
+function waitForElementValue(target, value, options) {
+	const { timeout, rootNode } = options;
+	const controller = new (getWindow(rootNode)).AbortController();
+	return waitForPromise(new Promise((resolve) => {
+		const el = target();
+		if (!el) return;
+		const checkValue = () => {
+			if (el.value === value) {
+				resolve();
+				el.removeEventListener("input", checkValue);
+			}
+		};
+		checkValue();
+		el.addEventListener("input", checkValue, { signal: controller.signal });
+	}), controller, timeout);
+}
+
+//#endregion
+export { anatomy, connect, machine, props, splitProps, waitForElement, waitForElementValue, waitForPromise };