@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/tour/index.js

@@ -0,0 +1,1115 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { S as getWindow, k as isHTMLElement, p as contains, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { t as getComputedStyle$1 } from "../../computed-style-B1MKlCoo.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { r as waitForPromise, t as waitForElement } from "../../wait-for-CI5Ye-Lo.js";
+import { _ as prevIndex, m as nextIndex } from "../../array-C4KbHsha.js";
+import { t as isEqual } from "../../equal-DtrP8DPh.js";
+import { F as toPx, it as isString, n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { i as warn } from "../../warning-CrzBpWT1.js";
+import { m as mergeProps, n as createGuards, r as createMachine } from "../../core-CJ0MZr3D.js";
+import { t as trackInteractOutside } from "../../interact-outside-BjqIunFx.js";
+import { t as trackDismissableBranch } from "../../dismissable-KM1jPtNQ.js";
+import { t as trapFocus } from "../../focus-trap-89E5I9nm.js";
+import { n as getPlacement, r as getPlacementSide, t as getPlacementStyles } from "../../popper-DzBZzAe4.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/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/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) => {
+	const effectiveSteps = getEffectiveSteps(steps);
+	return findStepIndex(effectiveSteps, 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/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 placementSide = isTooltipPlacement(placement) ? getPlacementSide(placement) : void 0;
+	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) {
+			const next = steps.concat(step);
+			send({
+				type: "STEPS.SET",
+				value: next,
+				src: "addStep"
+			});
+		},
+		removeStep(id) {
+			const next = steps.filter((step) => step.id !== id);
+			send({
+				type: "STEPS.SET",
+				value: next,
+				src: "removeStep"
+			});
+		},
+		updateStep(id, stepOverrides) {
+			const next = steps.map((step) => step.id === id ? mergeProps(step, stepOverrides) : step);
+			send({
+				type: "STEPS.SET",
+				value: next,
+				src: "updateStep"
+			});
+		},
+		setSteps(steps) {
+			send({
+				type: "STEPS.SET",
+				value: steps,
+				src: "setSteps"
+			});
+		},
+		setStep(id) {
+			send({
+				type: "STEP.SET",
+				value: id
+			});
+		},
+		start(id) {
+			send({
+				type: "START",
+				value: id
+			});
+		},
+		isValidStep(id) {
+			return steps.some((step) => step.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: isDialogStep(step) ? "fixed" : "absolute",
+					inset: "0",
+					willChange: isTooltipStep(step) ? "clip-path" : void 0
+				}
+			});
+		},
+		getSpotlightProps() {
+			return normalize.element({
+				...parts.spotlight.attrs,
+				hidden: !open || !step?.target?.(),
+				style: {
+					"--tour-layer": 1,
+					position: "absolute",
+					width: toPx(targetRect.width),
+					height: toPx(targetRect.height),
+					left: toPx(targetRect.x),
+					top: toPx(targetRect.y),
+					borderRadius: toPx(prop("spotlightRadius")),
+					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,
+				"data-side": placementSide,
+				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-side": placementSide,
+				"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",
+				"data-side": hasTarget ? placementSide : void 0
+			});
+		},
+		getDescriptionProps() {
+			return normalize.element({
+				...parts.description.attrs,
+				id: getDescriptionId(scope),
+				"data-placement": hasTarget ? placement : "center",
+				"data-side": hasTarget ? placementSide : void 0
+			});
+		},
+		getCloseTriggerProps() {
+			return normalize.element({
+				...parts.closeTrigger.attrs,
+				"data-type": step?.type,
+				"aria-label": prop("translations").close,
+				onClick: actionMap.dismiss
+			});
+		},
+		getActionTriggerProps(props) {
+			const { action, attrs } = props.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/machine.ts
+const { and } = createGuards();
+const machine = createMachine({
+	props({ props }) {
+		return {
+			preventInteraction: false,
+			closeOnInteractOutside: true,
+			closeOnEscape: true,
+			keyboardNavigation: true,
+			spotlightOffset: {
+				x: 10,
+				y: 10
+			},
+			spotlightRadius: 4,
+			...props,
+			translations: {
+				nextStep: "next step",
+				prevStep: "previous step",
+				close: "close tour",
+				progressText: ({ current, total }) => `${current + 1} of ${total}`,
+				skip: "skip tour",
+				...props.translations
+			}
+		};
+	},
+	initialState() {
+		return "tourInactive";
+	},
+	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, refs, send }) {
+		track([() => context.get("stepId")], () => {
+			if (refs.get("_internalChange")) {
+				refs.set("_internalChange", false);
+				return;
+			}
+			const step = findStep(context.get("steps"), context.get("stepId"));
+			context.set("resolvedTarget", step?.target?.() ?? null);
+			syncTargetAttrsFromContext({
+				context,
+				refs
+			});
+			queueMicrotask(() => {
+				send({ type: "STEP.CHANGED" });
+			});
+		});
+	},
+	effects: ["trackBoundarySize"],
+	exit: ["cleanupAll"],
+	on: {
+		"STEPS.SET": { actions: ["setSteps", "validateSteps"] },
+		"STEP.CHANGED": [
+			{
+				guard: and("isValidStep", "hasResolvedTarget"),
+				target: "running.scrolling",
+				reenter: true,
+				actions: ["cleanupStepEffect"]
+			},
+			{
+				guard: and("isValidStep", "hasTarget"),
+				target: "running.resolving",
+				reenter: true,
+				actions: ["cleanupStepEffect"]
+			},
+			{
+				guard: and("isValidStep", "isWaitingStep"),
+				target: "running.waiting",
+				reenter: true,
+				actions: ["cleanupStepEffect"]
+			},
+			{
+				guard: "isValidStep",
+				target: "running.active",
+				reenter: true,
+				actions: ["cleanupStepEffect"]
+			}
+		],
+		"STEP.ROUTE": [
+			{
+				guard: and("isValidStep", "hasResolvedTarget"),
+				target: "running.scrolling",
+				reenter: true
+			},
+			{
+				guard: and("isValidStep", "hasTarget"),
+				target: "running.resolving",
+				reenter: true
+			},
+			{
+				guard: and("isValidStep", "isWaitingStep"),
+				target: "running.waiting",
+				reenter: true
+			},
+			{
+				guard: "isValidStep",
+				target: "running.active",
+				reenter: true
+			}
+		]
+	},
+	states: {
+		tourInactive: {
+			tags: ["closed"],
+			entry: ["validateSteps"],
+			on: { START: { actions: ["setInitialStep", "invokeOnStart"] } }
+		},
+		running: {
+			initial: "resolving",
+			on: {
+				"STEP.SET": { actions: ["setStep"] },
+				"STEP.NEXT": { actions: ["setNextStep"] },
+				"STEP.PREV": { actions: ["setPrevStep"] },
+				DISMISS: [{
+					guard: "isLastStep",
+					target: "tourInactive",
+					actions: [
+						"cleanupAll",
+						"invokeOnDismiss",
+						"invokeOnComplete",
+						"clearStep"
+					]
+				}, {
+					target: "tourInactive",
+					actions: [
+						"cleanupAll",
+						"invokeOnDismiss",
+						"clearStep"
+					]
+				}],
+				SKIP: {
+					target: "tourInactive",
+					actions: [
+						"cleanupAll",
+						"invokeOnSkip",
+						"clearStep"
+					]
+				}
+			},
+			states: {
+				resolving: {
+					tags: ["closed"],
+					effects: ["waitForTarget", "waitForTargetTimeout"],
+					on: {
+						"TARGET.NOT_FOUND": {
+							target: "tourInactive",
+							actions: ["invokeOnNotFound", "clearStep"]
+						},
+						"TARGET.RESOLVED": {
+							target: "scrolling",
+							actions: ["setResolvedTarget"]
+						}
+					}
+				},
+				scrolling: {
+					tags: ["open"],
+					entry: ["scrollToTarget"],
+					effects: [
+						"waitForScrollEnd",
+						"trapFocus",
+						"trackPlacement",
+						"trackDismissableBranch",
+						"trackInteractOutside",
+						"trackEscapeKeydown"
+					],
+					on: { "SCROLL.END": { target: "active" } }
+				},
+				waiting: { tags: ["closed"] },
+				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: "nearest",
+					inline: "nearest"
+				});
+			},
+			setSteps(params) {
+				const { event, context } = params;
+				context.set("steps", event.value);
+			},
+			setStep(params) {
+				const { event } = params;
+				if (event.value == null) return;
+				const steps = params.context.get("steps");
+				performStepTransition(params, isString(event.value) ? findStepIndex(steps, event.value) : event.value);
+			},
+			clearStep({ context, refs }) {
+				refs.get("_targetCleanup")?.();
+				refs.set("_targetCleanup", void 0);
+				context.set("targetRect", {
+					width: 0,
+					height: 0,
+					x: 0,
+					y: 0
+				});
+				context.set("resolvedTarget", null);
+				refs.set("_internalChange", true);
+				context.set("stepId", null);
+			},
+			setInitialStep(params) {
+				const { context, event } = params;
+				const steps = context.get("steps");
+				if (steps.length === 0) return;
+				performStepTransition(params, isString(event.value) ? findStepIndex(steps, event.value) : event.value ?? 0);
+			},
+			setNextStep(params) {
+				performStepTransition(params, nextIndex(params.context.get("steps"), params.computed("stepIndex")));
+			},
+			setPrevStep(params) {
+				performStepTransition(params, prevIndex(params.context.get("steps"), params.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")
+				});
+			},
+			setResolvedTarget({ context, event, computed }) {
+				const node = event.node ?? computed("step")?.target?.();
+				context.set("resolvedTarget", node ?? null);
+			},
+			cleanupAll({ refs }) {
+				refs.get("_targetCleanup")?.();
+				refs.set("_targetCleanup", void 0);
+				refs.set("_prevTarget", void 0);
+				refs.get("_effectCleanup")?.();
+				refs.set("_effectCleanup", void 0);
+			},
+			cleanupStepEffect({ refs }) {
+				refs.get("_effectCleanup")?.();
+				refs.set("_effectCleanup", void 0);
+			},
+			validateSteps({ context }) {
+				const ids = /* @__PURE__ */ new Set();
+				context.get("steps").forEach((step) => {
+					if (ids.has(step.id)) throw new Error(`[wirekyt/tour] Duplicate step id: ${step.id}`);
+					if (step.target == null && step.type == null) throw new Error(`[wirekyt/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, context }) {
+				if (computed("step") == null) return;
+				const contentEl = () => getContentEl(scope);
+				const targetEl = () => context.get("resolvedTarget");
+				return trapFocus([contentEl, targetEl], {
+					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,
+					restoreStyles: true,
+					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);
+					}
+				});
+			}
+		}
+	}
+});
+/**
+* Shared logic for syncing target element attributes.
+* Used by both actions and the watch callback.
+*/
+function syncTargetAttrsFromContext(params) {
+	const { context, refs, prop } = params;
+	const targetEl = context.get("resolvedTarget");
+	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);
+}
+function performStepTransition(params, idx) {
+	const { context, refs, send } = params;
+	const step = context.get("steps")[idx];
+	if (!step) {
+		refs.set("_internalChange", true);
+		context.set("stepId", null);
+		return;
+	}
+	if (isEqual(context.get("stepId"), step.id)) return;
+	refs.get("_effectCleanup")?.();
+	refs.set("_effectCleanup", void 0);
+	refs.get("_targetCleanup")?.();
+	refs.set("_targetCleanup", void 0);
+	if (step.effect) {
+		executeStepEffect(params, step, idx);
+		return;
+	}
+	const resolvedTarget = step.target?.() ?? null;
+	context.set("resolvedTarget", resolvedTarget);
+	refs.set("_internalChange", true);
+	context.set("stepId", step.id);
+	syncTargetAttrsFromContext(params);
+	send({ type: "STEP.ROUTE" });
+}
+function createEffectUtilities(params, step, idx) {
+	const { context, computed, refs, send, prop } = params;
+	const steps = context.get("steps");
+	return {
+		show: () => {
+			const resolvedTarget = step.target?.() ?? null;
+			context.set("resolvedTarget", resolvedTarget);
+			refs.set("_internalChange", true);
+			context.set("stepId", step.id);
+			syncTargetAttrsFromContext(params);
+			send({ type: "STEP.ROUTE" });
+		},
+		update: (data) => {
+			context.set("steps", (prev) => prev.map((s, i) => i === idx ? {
+				...s,
+				...data
+			} : s));
+		},
+		next: () => {
+			performStepTransition(params, nextIndex(steps, computed("stepIndex")));
+		},
+		goto: (id) => {
+			const targetIdx = findStepIndex(steps, id);
+			if (targetIdx === -1) {
+				warn(`[wirekyt/tour] Step with id "${id}" not found`);
+				return;
+			}
+			performStepTransition(params, targetIdx);
+		},
+		dismiss: () => {
+			refs.set("_internalChange", true);
+			context.set("stepId", null);
+			prop("onStatusChange")?.({
+				status: "dismissed",
+				stepId: null,
+				stepIndex: -1
+			});
+		},
+		target: step.target
+	};
+}
+function executeStepEffect(params, step, idx) {
+	const { refs } = params;
+	const utilities = createEffectUtilities(params, step, idx);
+	let cleanup;
+	try {
+		cleanup = step.effect(utilities);
+	} catch (error) {
+		console.error(error);
+		return;
+	}
+	refs.set("_effectCleanup", cleanup);
+	if (isWaitStep(step)) utilities.show();
+}
+//#endregion
+//#region src/machines/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 };