@destyler/tour 0.0.7-beta.5 → 0.0.7-beta.9

package/dist/index.js

@@ -0,0 +1,978 @@
+import { createAnatomy } from "@destyler/anatomy";
+import { contains, createScope, dataAttr, getComputedStyle as getComputedStyle$1, getDocument, getWindow, isHTMLElement, raf } from "@destyler/dom";
+import { getPlacement, getPlacementStyles } from "@destyler/popper";
+import { createMachine, guards, mergeProps, ref } from "@destyler/xstate";
+import { trackDismissableBranch } from "@destyler/dismissable";
+import { trapFocus } from "@destyler/focus-trap";
+import { trackInteractOutside } from "@destyler/interact-outside";
+import { compact, createSplitProps, isEqual, isString, nextIndex, prevIndex } from "@destyler/utils";
+import { createProps } from "@destyler/types";
+
+//#region src/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/dom.ts
+const dom = createScope({
+	getPositionerId: (ctx) => ctx.ids?.positioner ?? `tour-positioner-${ctx.id}`,
+	getContentId: (ctx) => ctx.ids?.content ?? `tour-content-${ctx.id}`,
+	getTitleId: (ctx) => ctx.ids?.title ?? `tour-title-${ctx.id}`,
+	getDescriptionId: (ctx) => ctx.ids?.description ?? `tour-desc-${ctx.id}`,
+	getArrowId: (ctx) => ctx.ids?.arrow ?? `tour-arrow-${ctx.id}`,
+	getBackdropId: (ctx) => ctx.ids?.backdrop ?? `tour-backdrop-${ctx.id}`,
+	getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+	getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
+	getBackdropEl: (ctx) => dom.getById(ctx, dom.getBackdropId(ctx))
+});
+
+//#endregion
+//#region src/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/utils/step.ts
+function isTooltipStep(step) {
+	return step?.type === "tooltip";
+}
+function isDialogStep(step) {
+	return step?.type === "dialog";
+}
+function isTooltipPlacement(placement) {
+	return placement != null && placement !== "center";
+}
+function 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;
+}
+function findStep(steps, id) {
+	const res = id != null ? steps.find((step) => step.id === id) : null;
+	return res ? normalizeStep(res) : null;
+}
+function findStepIndex(steps, id) {
+	return id != null ? steps.findIndex((step) => step.id === id) : -1;
+}
+
+//#endregion
+//#region src/connect.ts
+function connect(state, send, normalize) {
+	const open = state.hasTag("open");
+	const steps = Array.from(state.context.steps);
+	const stepIndex = state.context.stepIndex;
+	const step = state.context.step;
+	const hasTarget = typeof step?.target?.() !== "undefined";
+	const hasNextStep = state.context.hasNextStep;
+	const hasPrevStep = state.context.hasPrevStep;
+	const firstStep = state.context.isFirstStep;
+	const lastStep = state.context.isLastStep;
+	const placement = state.context.currentPlacement;
+	const targetRect = state.context.targetRect;
+	const popperStyles = getPlacementStyles({
+		strategy: "absolute",
+		placement: isTooltipPlacement(placement) ? placement : void 0
+	});
+	const clipPath = getClipPath({
+		enabled: isTooltipStep(step),
+		rect: targetRect,
+		rootSize: state.context.boundarySize,
+		radius: state.context.spotlightRadius
+	});
+	const actionMap = {
+		next() {
+			send({
+				type: "STEP.NEXT",
+				src: "actionTrigger"
+			});
+		},
+		prev() {
+			send({
+				type: "STEP.PREV",
+				src: "actionTrigger"
+			});
+		},
+		dismiss() {
+			send({
+				type: "DISMISS",
+				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) {
+			const next = steps.concat(step$1);
+			send({
+				type: "STEPS.SET",
+				value: next,
+				src: "addStep"
+			});
+		},
+		removeStep(id) {
+			const next = steps.filter((step$1) => step$1.id !== id);
+			send({
+				type: "STEPS.SET",
+				value: next,
+				src: "removeStep"
+			});
+		},
+		updateStep(id, stepOverrides) {
+			const next = steps.map((step$1) => step$1.id === id ? mergeProps(step$1, stepOverrides) : step$1);
+			send({
+				type: "STEPS.SET",
+				value: next,
+				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",
+				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() {
+			return stepIndex / steps.length * 100;
+		},
+		getProgressText() {
+			const effectiveSteps = steps.filter((step$1) => step$1.type !== "wait");
+			const index = findStepIndex(effectiveSteps, step?.id);
+			const details = {
+				current: index,
+				total: effectiveSteps.length
+			};
+			return state.context.translations.progressText?.(details) ?? "";
+		},
+		getBackdropProps() {
+			return normalize.element({
+				...parts.backdrop.attrs,
+				"id": dom.getBackdropId(state.context),
+				"dir": state.context.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": `${state.context.spotlightRadius}px`,
+					"pointerEvents": "none"
+				}
+			});
+		},
+		getProgressTextProps() {
+			return normalize.element({ ...parts.progressText.attrs });
+		},
+		getPositionerProps() {
+			return normalize.element({
+				...parts.positioner.attrs,
+				"dir": state.context.dir,
+				"id": dom.getPositionerId(state.context),
+				"data-type": step?.type,
+				"data-placement": state.context.currentPlacement,
+				"style": {
+					"--tour-layer": 2,
+					...step?.type === "tooltip" && popperStyles.floating
+				}
+			});
+		},
+		getArrowProps() {
+			return normalize.element({
+				id: dom.getArrowId(state.context),
+				...parts.arrow.attrs,
+				dir: state.context.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: state.context.dir,
+				style: popperStyles.arrowTip
+			});
+		},
+		getContentProps() {
+			return normalize.element({
+				...parts.content.attrs,
+				"id": dom.getContentId(state.context),
+				"dir": state.context.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": state.context.currentPlacement,
+				"data-step": step?.id,
+				"aria-labelledby": dom.getTitleId(state.context),
+				"aria-describedby": dom.getDescriptionId(state.context),
+				"tabIndex": -1,
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!state.context.keyboardNavigation) return;
+					const isRtl = state.context.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": dom.getTitleId(state.context),
+				"data-placement": hasTarget ? state.context.currentPlacement : "center"
+			});
+		},
+		getDescriptionProps() {
+			return normalize.element({
+				...parts.description.attrs,
+				"id": dom.getDescriptionId(state.context),
+				"data-placement": hasTarget ? state.context.currentPlacement : "center"
+			});
+		},
+		getCloseTriggerProps() {
+			return normalize.element({
+				...parts.closeTrigger.attrs,
+				"data-type": step?.type,
+				"aria-label": state.context.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": state.context.translations.nextStep,
+						"onClick": actionMap.next
+					};
+					break;
+				case "prev":
+					actionProps = {
+						"data-type": "prev",
+						"disabled": !hasPrevStep,
+						"data-disabled": dataAttr(!hasPrevStep),
+						"aria-label": state.context.translations.prevStep,
+						"onClick": actionMap.prev
+					};
+					break;
+				case "dismiss":
+					actionProps = {
+						"data-type": "close",
+						"aria-label": state.context.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/utils/rect.ts
+function getFrameElement(win) {
+	return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
+function 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 + Number.parseFloat(css.paddingLeft));
+		const top = iframeRect.top + (frame.clientTop + Number.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/machine.ts
+const { and } = guards;
+function syncZIndex(ctx) {
+	return raf(() => {
+		const contentEl = dom.getContentEl(ctx);
+		if (!contentEl) return;
+		const styles = getComputedStyle$1(contentEl);
+		const positionerEl = dom.getPositionerEl(ctx);
+		const backdropEl = dom.getBackdropEl(ctx);
+		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);
+	});
+}
+const invoke = {
+	stepChange(ctx) {
+		const effectiveLength = ctx.steps.filter((step) => step.type !== "wait").length;
+		const progress = (ctx.stepIndex + 1) / effectiveLength;
+		ctx.onStepChange?.({
+			complete: ctx.isLastStep,
+			stepId: ctx.stepId,
+			totalSteps: ctx.steps.length,
+			stepIndex: ctx.stepIndex,
+			progress
+		});
+		ctx._effectCleanup?.();
+		ctx._effectCleanup = void 0;
+	},
+	statusChange(ctx, status) {
+		ctx.onStatusChange?.({
+			status,
+			stepId: ctx.stepId,
+			stepIndex: ctx.stepIndex
+		});
+	}
+};
+const set = { step(ctx, idx) {
+	const step = ctx.steps[idx];
+	if (!step) {
+		ctx.stepId = null;
+		invoke.stepChange(ctx);
+		return;
+	}
+	if (isEqual(ctx.stepId, step.id)) return;
+	const update = (data) => {
+		ctx.steps[idx] = {
+			...step,
+			...data
+		};
+	};
+	const next = () => {
+		const idx$1 = nextIndex(ctx.steps, ctx.stepIndex);
+		ctx.stepId = ctx.steps[idx$1].id;
+		invoke.stepChange(ctx);
+	};
+	const goto = (id) => {
+		const idx$1 = ctx.steps.findIndex((s) => s.id === id);
+		ctx.stepId = ctx.steps[idx$1].id;
+		invoke.stepChange(ctx);
+	};
+	const dismiss = () => {
+		ctx.stepId = null;
+		invoke.stepChange(ctx);
+		invoke.statusChange(ctx, "dismissed");
+	};
+	const show = () => {
+		ctx.stepId = step.id;
+		invoke.stepChange(ctx);
+	};
+	if (!step.effect) {
+		show();
+		return;
+	}
+	ctx._effectCleanup = step.effect({
+		show,
+		next,
+		update,
+		target: step.target,
+		dismiss,
+		goto
+	});
+} };
+function machine(userContext) {
+	const ctx = compact(userContext);
+	return createMachine({
+		id: "tour",
+		initial: "tour.inactive",
+		context: {
+			stepId: null,
+			steps: [],
+			preventInteraction: false,
+			closeOnInteractOutside: true,
+			closeOnEscape: true,
+			keyboardNavigation: true,
+			spotlightOffset: {
+				x: 10,
+				y: 10
+			},
+			spotlightRadius: 4,
+			translations: {
+				nextStep: "next step",
+				prevStep: "previous step",
+				close: "close tour",
+				progressText: ({ current, total }) => `${current + 1} of ${total}`,
+				skip: "skip tour",
+				...ctx.translations
+			},
+			...ctx,
+			resolvedTarget: ref({ value: null }),
+			targetRect: ref({
+				width: 0,
+				height: 0,
+				x: 0,
+				y: 0
+			}),
+			boundarySize: ref({
+				width: 0,
+				height: 0
+			})
+		},
+		computed: {
+			stepIndex: (ctx$1) => findStepIndex(ctx$1.steps, ctx$1.stepId),
+			step: (ctx$1) => findStep(ctx$1.steps, ctx$1.stepId),
+			hasNextStep: (ctx$1) => ctx$1.stepIndex < ctx$1.steps.length - 1,
+			hasPrevStep: (ctx$1) => ctx$1.stepIndex > 0,
+			isFirstStep: (ctx$1) => ctx$1.stepIndex === 0,
+			isLastStep: (ctx$1) => ctx$1.stepIndex === ctx$1.steps.length - 1
+		},
+		created: ["validateSteps"],
+		watch: { stepId: [
+			"setResolvedTarget",
+			"raiseStepChange",
+			"syncTargetAttrs"
+		] },
+		activities: ["trackBoundarySize"],
+		exit: ["clearStep", "cleanupFns"],
+		on: {
+			"STEPS.SET": { actions: ["setSteps"] },
+			"STEP.SET": { actions: ["setStep"] },
+			"STEP.NEXT": { actions: ["setNextStep"] },
+			"STEP.PREV": { actions: ["setPrevStep"] },
+			"STEP.CHANGED": [
+				{
+					guard: and("isValidStep", "hasResolvedTarget"),
+					target: "target.scrolling"
+				},
+				{
+					guard: and("isValidStep", "hasTarget"),
+					target: "target.resolving"
+				},
+				{
+					guard: and("isValidStep", "isWaitingStep"),
+					target: "step.waiting"
+				},
+				{
+					guard: "isValidStep",
+					target: "tour.active"
+				}
+			],
+			"DISMISS": [{
+				guard: "isLastStep",
+				target: "tour.inactive",
+				actions: [
+					"invokeOnDismiss",
+					"invokeOnComplete",
+					"clearStep"
+				]
+			}, {
+				target: "tour.inactive",
+				actions: ["invokeOnDismiss", "clearStep"]
+			}]
+		},
+		states: {
+			"tour.inactive": {
+				tags: ["closed"],
+				on: { START: { actions: ["setInitialStep", "invokeOnStart"] } }
+			},
+			"target.resolving": {
+				tags: ["closed"],
+				activities: ["waitForTarget"],
+				after: { MISSING_TARGET_TIMEOUT: {
+					target: "tour.inactive",
+					actions: ["invokeOnNotFound", "clearStep"]
+				} },
+				on: { "TARGET.RESOLVED": {
+					target: "target.scrolling",
+					actions: ["setResolvedTarget"]
+				} }
+			},
+			"target.scrolling": {
+				tags: ["open"],
+				entry: ["scrollToTarget"],
+				activities: [
+					"trapFocus",
+					"trackPlacement",
+					"trackDismissableBranch",
+					"trackInteractOutside",
+					"trackEscapeKeydown"
+				],
+				after: { 100: "tour.active" }
+			},
+			"step.waiting": { tags: ["closed"] },
+			"tour.active": {
+				tags: ["open"],
+				activities: [
+					"trapFocus",
+					"trackPlacement",
+					"trackDismissableBranch",
+					"trackInteractOutside",
+					"trackEscapeKeydown"
+				]
+			}
+		}
+	}, {
+		delays: { MISSING_TARGET_TIMEOUT: 3e3 },
+		guards: {
+			isLastStep: (ctx$1) => ctx$1.isLastStep,
+			isValidStep: (ctx$1) => ctx$1.stepId != null,
+			hasTarget: (ctx$1) => ctx$1.step?.target != null,
+			hasResolvedTarget: (ctx$1) => ctx$1.resolvedTarget.value != null,
+			isWaitingStep: (ctx$1) => ctx$1.step?.type === "wait"
+		},
+		actions: {
+			scrollToTarget(ctx$1, _evt) {
+				const node = ctx$1.resolvedTarget.value;
+				node?.scrollIntoView({
+					behavior: "instant",
+					block: "center",
+					inline: "center"
+				});
+			},
+			setStep(ctx$1, evt) {
+				set.step(ctx$1, evt.value);
+			},
+			clearStep(ctx$1) {
+				ctx$1.targetRect = ref({
+					width: 0,
+					height: 0,
+					x: 0,
+					y: 0
+				});
+				set.step(ctx$1, -1);
+			},
+			setInitialStep(ctx$1, evt) {
+				if (ctx$1.steps.length === 0) return;
+				if (isString(evt.id)) {
+					const idx = findStepIndex(ctx$1.steps, evt.id);
+					set.step(ctx$1, idx);
+					return;
+				}
+				set.step(ctx$1, 0);
+			},
+			setNextStep(ctx$1) {
+				const idx = nextIndex(ctx$1.steps, ctx$1.stepIndex);
+				set.step(ctx$1, idx);
+			},
+			setPrevStep(ctx$1) {
+				const idx = prevIndex(ctx$1.steps, ctx$1.stepIndex);
+				set.step(ctx$1, idx);
+			},
+			invokeOnStart(ctx$1) {
+				invoke.statusChange(ctx$1, "started");
+			},
+			invokeOnDismiss(ctx$1) {
+				invoke.statusChange(ctx$1, "dismissed");
+			},
+			invokeOnComplete(ctx$1) {
+				invoke.statusChange(ctx$1, "completed");
+			},
+			invokeOnSkip(ctx$1) {
+				invoke.statusChange(ctx$1, "skipped");
+			},
+			invokeOnNotFound(ctx$1) {
+				invoke.statusChange(ctx$1, "not-found");
+			},
+			raiseStepChange(_ctx, _evt, { send }) {
+				send({ type: "STEP.CHANGED" });
+			},
+			setResolvedTarget(ctx$1, evt) {
+				const node = evt.node ?? ctx$1.step?.target?.();
+				ctx$1.resolvedTarget.value = node ?? null;
+			},
+			syncTargetAttrs(ctx$1) {
+				ctx$1._targetCleanup?.();
+				ctx$1._targetCleanup = void 0;
+				const targetEl = ctx$1.resolvedTarget.value;
+				if (!targetEl) return;
+				if (ctx$1.preventInteraction) targetEl.inert = true;
+				targetEl.setAttribute("data-tour-highlighted", "");
+				ctx$1._targetCleanup = () => {
+					if (ctx$1.preventInteraction) targetEl.inert = false;
+					targetEl.removeAttribute("data-tour-highlighted");
+				};
+			},
+			cleanupFns(ctx$1) {
+				ctx$1._targetCleanup?.();
+				ctx$1._targetCleanup = void 0;
+				ctx$1._effectCleanup?.();
+				ctx$1._effectCleanup = void 0;
+			},
+			validateSteps(ctx$1) {
+				const ids = /* @__PURE__ */ new Set();
+				ctx$1.steps.forEach((step) => {
+					if (ids.has(step.id)) throw new Error(`[destyler/tour] Duplicate step id: ${step.id}`);
+					if (step.target == null && step.type == null) throw new Error(`[destyler/tour] Step ${step.id} has no target or type. At least one of those is required.`);
+					ids.add(step.id);
+				});
+			}
+		},
+		activities: {
+			waitForTarget(ctx$1, _evt, { send }) {
+				const targetEl = ctx$1.step?.target;
+				const win = dom.getWin(ctx$1);
+				const rootNode = dom.getRootNode(ctx$1);
+				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(ctx$1) {
+				const win = dom.getWin(ctx$1);
+				const doc = dom.getDoc(ctx$1);
+				const onResize = () => {
+					const width = visualViewport?.width ?? win.innerWidth;
+					const height = doc.documentElement.scrollHeight;
+					ctx$1.boundarySize = {
+						width,
+						height
+					};
+				};
+				onResize();
+				const viewport = win.visualViewport ?? win;
+				viewport.addEventListener("resize", onResize);
+				return () => viewport.removeEventListener("resize", onResize);
+			},
+			trackEscapeKeydown(ctx$1, _evt, { send }) {
+				if (!ctx$1.closeOnEscape) return;
+				const doc = dom.getDoc(ctx$1);
+				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(ctx$1, _evt, { send }) {
+				if (ctx$1.step == null) return;
+				const contentEl = () => dom.getContentEl(ctx$1);
+				return trackInteractOutside(contentEl, {
+					defer: true,
+					exclude(target) {
+						return contains(ctx$1.step?.target?.(), target);
+					},
+					onFocusOutside(event) {
+						ctx$1.onFocusOutside?.(event);
+						if (!ctx$1.closeOnInteractOutside) event.preventDefault();
+					},
+					onPointerDownOutside(event) {
+						ctx$1.onPointerDownOutside?.(event);
+						const isWithin = isEventInRect(ctx$1.targetRect, event.detail.originalEvent);
+						if (isWithin) {
+							event.preventDefault();
+							return;
+						}
+						if (!ctx$1.closeOnInteractOutside) event.preventDefault();
+					},
+					onInteractOutside(event) {
+						ctx$1.onInteractOutside?.(event);
+						if (event.defaultPrevented) return;
+						send({
+							type: "DISMISS",
+							src: "interact-outside"
+						});
+					}
+				});
+			},
+			trackDismissableBranch(ctx$1) {
+				if (ctx$1.step == null) return;
+				const contentEl = () => dom.getContentEl(ctx$1);
+				return trackDismissableBranch(contentEl, { defer: !contentEl() });
+			},
+			trapFocus(ctx$1) {
+				const contentEl = () => dom.getContentEl(ctx$1);
+				return trapFocus(contentEl, {
+					escapeDeactivates: false,
+					allowOutsideClick: true,
+					preventScroll: true,
+					returnFocusOnDeactivate: false
+				});
+			},
+			trackPlacement(ctx$1) {
+				if (ctx$1.step == null) return;
+				ctx$1.currentPlacement = ctx$1.step.placement ?? "bottom";
+				if (isDialogStep(ctx$1.step)) return syncZIndex(ctx$1);
+				if (!isTooltipStep(ctx$1.step)) return;
+				const positionerEl = () => dom.getPositionerEl(ctx$1);
+				return getPlacement(ctx$1.resolvedTarget.value, positionerEl, {
+					defer: true,
+					placement: ctx$1.step.placement ?? "bottom",
+					strategy: "absolute",
+					gutter: 10,
+					offset: ctx$1.step.offset,
+					getAnchorRect(el) {
+						if (!isHTMLElement(el)) return null;
+						const rect = el.getBoundingClientRect();
+						return offset(rect, ctx$1.spotlightOffset);
+					},
+					onComplete(data) {
+						const { rects } = data.middlewareData;
+						ctx$1.currentPlacement = data.placement;
+						ctx$1.targetRect = rects.reference;
+					}
+				});
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/props.ts
+const props = createProps()([
+	"closeOnEscape",
+	"closeOnInteractOutside",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"keyboardNavigation",
+	"onFocusOutside",
+	"onInteractOutside",
+	"onPointerDownOutside",
+	"onStatusChange",
+	"onStepChange",
+	"preventInteraction",
+	"spotlightOffset",
+	"spotlightRadius",
+	"stepId",
+	"steps",
+	"translations"
+]);
+const splitProps = createSplitProps(props);
+
+//#endregion
+//#region src/utils/wait.ts
+function waitForPromise(promise, controller, timeout) {
+	const { signal } = controller;
+	const wrappedPromise = new Promise((resolve, reject) => {
+		const timeoutId = setTimeout(() => {
+			reject(/* @__PURE__ */ new Error(`Timeout of ${timeout}ms exceeded`));
+		}, timeout);
+		signal.addEventListener("abort", () => {
+			clearTimeout(timeoutId);
+			reject(/* @__PURE__ */ new Error("Promise aborted"));
+		});
+		promise.then((result) => {
+			if (!signal.aborted) {
+				clearTimeout(timeoutId);
+				resolve(result);
+			}
+		}).catch((error) => {
+			if (!signal.aborted) {
+				clearTimeout(timeoutId);
+				reject(error);
+			}
+		});
+	});
+	const abort = () => controller.abort();
+	return [wrappedPromise, abort];
+}
+function waitForElement(target, options) {
+	const { timeout, rootNode } = options;
+	const win = getWindow(rootNode);
+	const doc = getDocument(rootNode);
+	const controller = new win.AbortController();
+	return waitForPromise(new Promise((resolve) => {
+		const el = target();
+		if (el) {
+			resolve(el);
+			return;
+		}
+		const observer = new win.MutationObserver(() => {
+			const el$1 = target();
+			if (el$1) {
+				observer.disconnect();
+				resolve(el$1);
+			}
+		});
+		observer.observe(doc.body, {
+			childList: true,
+			subtree: true
+		});
+	}), controller, timeout);
+}
+function waitForElementValue(target, value, options) {
+	const { timeout, rootNode } = options;
+	const win = getWindow(rootNode);
+	const controller = new win.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 };