@hina-ui/vue 1.7.13 → 1.7.14

package/dist/index.js

@@ -5,9 +5,10 @@ import { Comment, Fragment, Teleport, Text, Transition, camelize, cloneVNode, co
 import { createEventHook, createSharedComposable, defaultDocument, isClient, onKeyStroke, reactiveOmit, refAutoReset, syncRef, tryOnBeforeUnmount, tryOnScopeDispose, unrefElement, useActiveElement, useDebounceFn, useDocumentVisibility, useElementBounding, useEventListener, useFocusWithin, useIntersectionObserver, useIntervalFn, useMediaQuery, useMounted, useMutationObserver, usePreferredReducedMotion, useRafFn, useResizeObserver, useTimeout, useTimeoutFn, useVModel, useWindowSize } from "@vueuse/core";
 import { arrow, autoUpdate, flip, hide, limitShift, offset, shift, size } from "@floating-ui/dom";
 import { autoUpdate as autoUpdate$1, useFloating } from "@floating-ui/vue";
-import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, CalendarClock, CalendarDays, CalendarRange, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, CircleAlert, CircleCheck, CircleX, Copy, Download, Eye, EyeOff, File, GripVertical, Inbox, Info, LayoutGrid, Lightbulb, List, Megaphone, Minus, MoreHorizontal, PanelLeft, Pause, Pencil, Play, QrCode, RefreshCw, RotateCw, Scan, Search, Shrink, Star, TrendingDown, TrendingUp, TriangleAlert, Upload, User, X, ZoomIn, ZoomOut } from "@lucide/vue";
 import { hideOthers } from "aria-hidden";
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, CalendarClock, CalendarDays, CalendarRange, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, CircleAlert, CircleCheck, CircleX, Copy, Download, Eye, EyeOff, File, GripVertical, Inbox, Info, LayoutGrid, Lightbulb, List, Megaphone, Minus, MoreHorizontal, PanelLeft, Pause, Pencil, Play, QrCode, RefreshCw, RotateCcw, RotateCw, Scan, Search, Shrink, Star, TrendingDown, TrendingUp, TriangleAlert, Upload, User, X, ZoomIn, ZoomOut } from "@lucide/vue";
 import { Motion, animate, useMotionValue, useTransform } from "motion-v";
+import { thumbHashToDataURL } from "thumbhash";
 import { defaultRangeExtractor, measureElement, observeElementRect, useVirtualizer } from "@tanstack/vue-virtual";
 import { NumberFormatter, NumberParser } from "@internationalized/number";
 import { CalendarDate, CalendarDateTime, DateFormatter, Time, ZonedDateTime, createCalendar, endOfMonth, endOfYear, getDayOfWeek, getLocalTimeZone, isEqualDay, isEqualMonth, isSameDay, isSameMonth, isToday, parseDate, parseDateTime, parseTime, startOfMonth, startOfYear, toCalendar, toCalendarDateTime, today } from "@internationalized/date";
@@ -175,6 +176,7 @@ var zhCN = {
 		next: "下一步",
 		finish: "完成",
 		skip: "跳过引导",
+		replay: "重新演示",
 		progress: (step, total) => `${step} / ${total}`,
 		beacon: (step, title) => title ? `查看第 ${step} 步：${title}` : `查看第 ${step} 步`
 	},
@@ -388,6 +390,7 @@ var enUS = {
 		next: "Next",
 		finish: "Done",
 		skip: "Skip tour",
+		replay: "Replay",
 		progress: (step, total) => `${step} / ${total}`,
 		beacon: (step, title) => title ? `Open step ${step}: ${title}` : `Open step ${step}`
 	},
@@ -601,6 +604,7 @@ var jaJP = {
 		next: "次へ",
 		finish: "完了",
 		skip: "ガイドをスキップ",
+		replay: "もう一度再生",
 		progress: (step, total) => `${step} / ${total}`,
 		beacon: (step, title) => title ? `ステップ ${step} を開く：${title}` : `ステップ ${step} を開く`
 	},
@@ -1166,7 +1170,7 @@ var spinner = tv({
 });
 //#endregion
 //#region src/components/spinner/Spinner.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$133 = ["aria-label"];
+var _hoisted_1$132 = ["aria-label"];
 //#endregion
 //#region src/components/spinner/Spinner.vue
 var Spinner_default = /* @__PURE__ */ defineComponent({
@@ -1186,13 +1190,13 @@ var Spinner_default = /* @__PURE__ */ defineComponent({
 				"aria-label": props.label ?? unref(t).common.loading,
 				class: unref(cn)(unref(spinner)({ size: props.size })),
 				style: { animation: "hn-spin var(--hn-spin-duration) var(--hn-ease-linear) infinite" }
-			}), null, 16, _hoisted_1$133);
+			}), null, 16, _hoisted_1$132);
 		};
 	}
 });
 //#endregion
 //#region src/components/button/IconSlot.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$132 = {
+var _hoisted_1$131 = {
 	key: 0,
 	"aria-hidden": "true",
 	class: "absolute inset-0 inline-flex items-center justify-center"
@@ -1216,7 +1220,7 @@ var IconSlot_default$1 = /* @__PURE__ */ defineComponent({
 				"leave-active-class": "hn-transition",
 				"leave-to-class": "scale-90 opacity-0"
 			}, {
-				default: withCtx(() => [props.swapped ? (openBlock(), createElementBlock("span", _hoisted_1$132, [createVNode(Spinner_default, { size: props.spinnerSize }, null, 8, ["size"])])) : createCommentVNode("", true)]),
+				default: withCtx(() => [props.swapped ? (openBlock(), createElementBlock("span", _hoisted_1$131, [createVNode(Spinner_default, { size: props.spinnerSize }, null, 8, ["size"])])) : createCommentVNode("", true)]),
 				_: 1
 			})], 2);
 		};
@@ -1440,7 +1444,7 @@ function useRipple(container, surface, isDisabled) {
 }
 //#endregion
 //#region src/components/ripple/Ripple.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$131 = ["data-pressed"];
+var _hoisted_1$130 = ["data-pressed"];
 //#endregion
 //#region src/components/ripple/Ripple.vue
 var Ripple_default = /* @__PURE__ */ defineComponent({
@@ -1463,7 +1467,7 @@ var Ripple_default = /* @__PURE__ */ defineComponent({
 				ref: surface,
 				class: "hn-ripple-surface",
 				"data-pressed": unref(pressed) ? "" : void 0
-			}, null, 8, _hoisted_1$131)], 512);
+			}, null, 8, _hoisted_1$130)], 512);
 		};
 	}
 });
@@ -1526,7 +1530,7 @@ var Primitive = defineComponent({
 });
 //#endregion
 //#region src/components/button/Button.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$130 = {
+var _hoisted_1$129 = {
 	key: 0,
 	"aria-hidden": "true",
 	class: "absolute inset-0 flex items-center justify-center"
@@ -1616,7 +1620,7 @@ var Button_default = /* @__PURE__ */ defineComponent({
 					])) : createCommentVNode("", true),
 					unref(slots).default ? (openBlock(), createElementBlock("span", {
 						key: 2,
-						class: normalizeClass(["hn-transition inline-flex items-center gap-[var(--hn-control-gap)]", props.loading && spinnerAt.value === "center" ? "opacity-0" : "opacity-100"])
+						class: normalizeClass(["hn-transition inline-flex min-w-0 items-center gap-[var(--hn-control-gap)]", props.loading && spinnerAt.value === "center" ? "opacity-0" : "opacity-100"])
 					}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true),
 					unref(slots).trailing ? (openBlock(), createBlock(IconSlot_default$1, {
 						key: 3,
@@ -1637,7 +1641,7 @@ var Button_default = /* @__PURE__ */ defineComponent({
 						"leave-active-class": "hn-transition",
 						"leave-to-class": "opacity-0"
 					}, {
-						default: withCtx(() => [props.loading && spinnerAt.value === "center" ? (openBlock(), createElementBlock("span", _hoisted_1$130, [createVNode(Spinner_default, { size: spinnerSize.value }, null, 8, ["size"])])) : createCommentVNode("", true)]),
+						default: withCtx(() => [props.loading && spinnerAt.value === "center" ? (openBlock(), createElementBlock("span", _hoisted_1$129, [createVNode(Spinner_default, { size: spinnerSize.value }, null, 8, ["size"])])) : createCommentVNode("", true)]),
 						_: 1
 					})
 				], 64))]),
@@ -2542,11 +2546,28 @@ function addLayer(element) {
 		if (layers.delete(element)) changed();
 	};
 }
+var branchInline = /* @__PURE__ */ new Map();
+function syncBranchPointerEvents() {
+	const list = [...branches];
+	for (const branch of list) branch.style.pointerEvents = branchInline.get(branch) ?? "";
+	if (blocking.size === 0 || list.length === 0) return;
+	const body = list[0].ownerDocument.body;
+	const blocked = body.style.pointerEvents;
+	body.style.pointerEvents = originalBodyPointerEvents ?? "";
+	const natural = list.map((branch) => getComputedStyle(branch).pointerEvents);
+	body.style.pointerEvents = blocked;
+	list.forEach((branch, index) => branch.style.pointerEvents = natural[index]);
+}
 function addBranch(element) {
+	if (!branches.has(element)) branchInline.set(element, element.style.pointerEvents);
 	branches.add(element);
+	syncBranchPointerEvents();
 	changed();
 	return () => {
-		if (branches.delete(element)) changed();
+		if (!branches.delete(element)) return;
+		element.style.pointerEvents = branchInline.get(element) ?? "";
+		branchInline.delete(element);
+		changed();
 	};
 }
 function blockOutsidePointerEvents(element) {
@@ -2556,16 +2577,19 @@ function blockOutsidePointerEvents(element) {
 		body.style.pointerEvents = "none";
 	}
 	blocking.add(element);
+	syncBranchPointerEvents();
 	changed();
 	return () => {
 		if (!blocking.delete(element)) return;
 		if (blocking.size === 0 && originalBodyPointerEvents != null) body.style.pointerEvents = originalBodyPointerEvents;
+		syncBranchPointerEvents();
 		changed();
 	};
 }
 function releaseLayer(element) {
 	const removed = layers.delete(element);
 	const unblocked = blocking.delete(element);
+	if (unblocked) syncBranchPointerEvents();
 	if (removed || unblocked) changed();
 }
 function blockingLayerCount() {
@@ -2581,12 +2605,34 @@ function bodyPointerEventsDisabled() {
 	return blocking.size > 0;
 }
 function pointerEventsEnabled(element) {
+	if (inBranch(element ?? null)) return true;
 	const highest = [...blocking].at(-1);
 	return layerIndex(element) >= (highest ? [...layers].indexOf(highest) : -1);
 }
 function inBranch(target) {
 	return [...branches].some((branch) => branch.contains(target));
 }
+function hideOutsideLayers(targets) {
+	const connected = () => [...branches].filter((branch) => branch.isConnected);
+	let kept = connected();
+	const hide = () => {
+		const visible = [...targets.filter((target) => target.isConnected), ...kept];
+		return visible.length ? hideOthers(visible) : () => {};
+	};
+	let undo = hide();
+	const stop = subscribeLayers(() => {
+		const next = connected();
+		if (next.length === kept.length && next.every((branch, index) => branch === kept[index])) return;
+		kept = next;
+		const previous = undo;
+		undo = hide();
+		previous();
+	});
+	return () => {
+		stop();
+		undo();
+	};
+}
 function isLayerExist(layer, target) {
 	if (!(target instanceof Element)) return false;
 	const targetLayer = target.closest("[data-dismissable-layer]");
@@ -2882,19 +2928,19 @@ function trapFocus(container, scope) {
 		if (scope.paused) return;
 		const target = event.target;
 		if (container.contains(target)) lastFocused = target;
-		else focus(lastFocused, { select: true });
+		else if (!inBranch(target)) focus(lastFocused, { select: true });
 	};
 	const handleFocusOut = (event) => {
 		if (scope.paused) return;
 		const related = event.relatedTarget;
 		if (related === null) return;
-		if (!container.contains(related)) focus(lastFocused, { select: true });
+		if (!container.contains(related) && !inBranch(related)) focus(lastFocused, { select: true });
 	};
 	const handleMutations = (mutations) => {
 		if (lastFocused === null) return;
 		if (!mutations.some((mutation) => mutation.removedNodes.length > 0)) return;
 		const active = getActiveElement$1();
-		if (active && container.contains(active)) return;
+		if (active && (container.contains(active) || inBranch(active))) return;
 		if (!container.contains(lastFocused)) focus(container);
 	};
 	document.addEventListener("focusin", handleFocusIn);
@@ -4349,7 +4395,7 @@ function useCopy(text, onCopied, resetAfter = () => COPIED_RESET_MS) {
 }
 //#endregion
 //#region src/components/copy-button/CopyButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$129 = { class: "relative inline-flex size-[1em]" };
+var _hoisted_1$128 = { class: "relative inline-flex size-[1em]" };
 //#endregion
 //#region src/components/copy-button/CopyButton.vue
 var CopyButton_default = /* @__PURE__ */ defineComponent({
@@ -4381,7 +4427,7 @@ var CopyButton_default = /* @__PURE__ */ defineComponent({
 				class: props.class,
 				onClick: unref(copy)
 			}), {
-				default: withCtx(() => [createElementVNode("span", _hoisted_1$129, [createVNode(Transition, {
+				default: withCtx(() => [createElementVNode("span", _hoisted_1$128, [createVNode(Transition, {
 					"enter-active-class": "hn-transition-base",
 					"enter-from-class": "scale-90 opacity-0",
 					"leave-active-class": "hn-transition",
@@ -4456,7 +4502,7 @@ var buttonGroup = tv({
 });
 //#endregion
 //#region src/components/button-group/ButtonGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$128 = ["aria-label", "aria-orientation"];
+var _hoisted_1$127 = ["aria-label", "aria-orientation"];
 //#endregion
 //#region src/components/button-group/ButtonGroup.vue
 var ButtonGroup_default = /* @__PURE__ */ defineComponent({
@@ -4487,7 +4533,7 @@ var ButtonGroup_default = /* @__PURE__ */ defineComponent({
 					block: props.block,
 					divider: props.divider
 				}), props.class))
-			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1$128);
+			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1$127);
 		};
 	}
 });
@@ -4714,7 +4760,7 @@ function floatButtonOffset(offset) {
 }
 //#endregion
 //#region src/components/float-button/FloatButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$127 = {
+var _hoisted_1$126 = {
 	key: 0,
 	class: "min-w-0 truncate"
 };
@@ -4818,7 +4864,7 @@ var FloatButton_default = /* @__PURE__ */ defineComponent({
 					}), props.class),
 					style: [offset.value, props.style]
 				}), createSlots({
-					default: withCtx(() => [props.extended ? (openBlock(), createElementBlock("span", _hoisted_1$127, toDisplayString(props.label), 1)) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)]),
+					default: withCtx(() => [props.extended ? (openBlock(), createElementBlock("span", _hoisted_1$126, toDisplayString(props.label), 1)) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)]),
 					_: 2
 				}, [props.extended ? {
 					name: "icon",
@@ -6321,7 +6367,7 @@ function hideOutside(element) {
 	try {
 		insideClosedPopover = !!element.closest("[popover]:not(:popover-open)");
 	} catch {}
-	return insideClosedPopover ? void 0 : hideOthers(element);
+	return insideClosedPopover ? void 0 : hideOutsideLayers([element]);
 }
 function createNonModalOutsideTracker() {
 	let interacted = false;
@@ -7192,7 +7238,7 @@ var splitButton = tv({
 var splitButtonAction = tv({ base: "min-w-0 flex-1 shrink [&>span]:min-w-0" });
 //#endregion
 //#region src/components/split-button/SplitButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$126 = { class: "min-w-0 truncate" };
+var _hoisted_1$125 = { class: "min-w-0 truncate" };
 //#endregion
 //#region src/components/split-button/SplitButton.vue
 var SplitButton_default = /* @__PURE__ */ defineComponent({
@@ -7317,7 +7363,7 @@ var SplitButton_default = /* @__PURE__ */ defineComponent({
 					onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event)),
 					onKeydown
 				}), createSlots({
-					default: withCtx(() => [createElementVNode("span", _hoisted_1$126, [renderSlot(_ctx.$slots, "default")])]),
+					default: withCtx(() => [createElementVNode("span", _hoisted_1$125, [renderSlot(_ctx.$slots, "default")])]),
 					_: 2
 				}, [_ctx.$slots.icon ? {
 					name: "icon",
@@ -7631,7 +7677,7 @@ var chipRemove = tv({
 });
 //#endregion
 //#region src/components/chip/IconSlot.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$125 = { class: "hn-collapse-body" };
+var _hoisted_1$124 = { class: "hn-collapse-body" };
 var _hoisted_2$73 = {
 	key: 0,
 	"aria-hidden": "true",
@@ -7653,7 +7699,7 @@ var IconSlot_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("span", {
 				"data-hn-icon": "",
 				class: normalizeClass(["hn-collapse-x", props.icon || props.checked ? "hn-collapse-open" : "hn-collapse-closed"])
-			}, [createElementVNode("span", _hoisted_1$125, [createElementVNode("span", { class: normalizeClass(unref(chipIcon)({ size: props.size })) }, [props.icon ? (openBlock(), createElementBlock("span", {
+			}, [createElementVNode("span", _hoisted_1$124, [createElementVNode("span", { class: normalizeClass(unref(chipIcon)({ size: props.size })) }, [props.icon ? (openBlock(), createElementBlock("span", {
 				key: 0,
 				class: normalizeClass(["hn-transition inline-flex items-center justify-center", props.checked ? "scale-90 opacity-0" : "scale-100 opacity-100"])
 			}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true), createVNode(Transition, {
@@ -8383,7 +8429,7 @@ var VisuallyHidden_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/lightbox/LightboxStrip.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$124 = [
+var _hoisted_1$123 = [
 	"src",
 	"alt",
 	"onLoad"
@@ -8450,7 +8496,7 @@ var LightboxStrip_default = /* @__PURE__ */ defineComponent({
 							draggable: "false",
 							class: "block size-full object-contain",
 							onLoad: ($event) => emit("learn", slide.item.id, $event.target)
-						}, null, 40, _hoisted_1$124), createVNode(Transition, {
+						}, null, 40, _hoisted_1$123), createVNode(Transition, {
 							"enter-active-class": "hn-transition-base",
 							"enter-from-class": "opacity-0",
 							"leave-active-class": "hn-transition",
@@ -11195,7 +11241,7 @@ function useScrollFocus(host, viewport, options) {
 }
 //#endregion
 //#region src/components/scroll-area/ScrollArea.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$123 = ["dir"];
+var _hoisted_1$122 = ["dir"];
 var _hoisted_2$71 = ["data-visible"];
 var _hoisted_3$39 = ["data-visible"];
 var _hoisted_4$32 = ["data-visible"];
@@ -11309,7 +11355,7 @@ var ScrollArea_default = /* @__PURE__ */ defineComponent({
 					"data-visible": unref(showYEnd) ? "" : void 0,
 					"aria-hidden": "true"
 				}, null, 8, _hoisted_5$25)) : createCommentVNode("", true)
-			], 64)) : createCommentVNode("", true)], 10, _hoisted_1$123);
+			], 64)) : createCommentVNode("", true)], 10, _hoisted_1$122);
 		};
 	}
 });
@@ -11367,7 +11413,7 @@ var Highlight_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/lightbox/LightboxThumbs.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$122 = {
+var _hoisted_1$121 = {
 	"data-hn-thumbs": "",
 	class: "relative isolate flex w-max gap-2 px-4 py-3"
 };
@@ -11412,7 +11458,7 @@ var LightboxThumbs_default = /* @__PURE__ */ defineComponent({
 				scrollbar: false,
 				class: "max-w-full"
 			}, {
-				default: withCtx(() => [createElementVNode("div", _hoisted_1$122, [(openBlock(true), createElementBlock(Fragment, null, renderList(props.items, (item, at) => {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1$121, [(openBlock(true), createElementBlock(Fragment, null, renderList(props.items, (item, at) => {
 					return openBlock(), createElementBlock("button", {
 						key: item.id,
 						ref_for: true,
@@ -11445,7 +11491,7 @@ var LightboxThumbs_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/lightbox/LightboxToolbar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$121 = { class: "flex flex-col items-center gap-1 pb-[max(--spacing(3),env(safe-area-inset-bottom))]" };
+var _hoisted_1$120 = { class: "flex flex-col items-center gap-1 pb-[max(--spacing(3),env(safe-area-inset-bottom))]" };
 var _hoisted_2$69 = { class: "flex items-center gap-1" };
 //#endregion
 //#region src/components/lightbox/LightboxToolbar.vue
@@ -11473,7 +11519,7 @@ var LightboxToolbar_default = /* @__PURE__ */ defineComponent({
 		const emit = __emit;
 		const t = useUiLocale();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$121, [props.items.length > 1 ? (openBlock(), createBlock(LightboxThumbs_default, {
+			return openBlock(), createElementBlock("div", _hoisted_1$120, [props.items.length > 1 ? (openBlock(), createBlock(LightboxThumbs_default, {
 				key: 0,
 				items: props.items,
 				index: props.index,
@@ -13087,7 +13133,7 @@ async function saveImage(url) {
 }
 //#endregion
 //#region src/components/lightbox/Lightbox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$120 = ["data-hn-phase"];
+var _hoisted_1$119 = ["data-hn-phase"];
 var _hoisted_2$68 = {
 	"aria-hidden": "true",
 	class: "pointer-events-none absolute inset-0 isolate"
@@ -13326,7 +13372,7 @@ var Lightbox_default = /* @__PURE__ */ defineComponent({
 								"hint",
 								"presence"
 							])
-						], 42, _hoisted_1$120)]),
+						], 42, _hoisted_1$119)]),
 						_: 1
 					})]),
 					_: 1
@@ -13346,6 +13392,7 @@ var image = tv({
 	base: "relative z-10 block size-full",
 	variants: {
 		lazy: { true: "transition-opacity duration-(--hn-duration-base) ease-enter motion-reduce:transition-none" },
+		placeholder: { true: "" },
 		fit: {
 			cover: "object-cover",
 			contain: "object-contain",
@@ -13354,6 +13401,23 @@ var image = tv({
 			"scale-down": "object-scale-down"
 		}
 	},
+	compoundVariants: [{
+		lazy: true,
+		placeholder: true,
+		class: "duration-(--hn-duration-slow) ease-move"
+	}],
+	defaultVariants: { fit: "cover" }
+});
+var imageFrame = tv({ base: "relative isolate block size-full" });
+var imagePlaceholder = tv({
+	base: "bg-center bg-no-repeat",
+	variants: { fit: {
+		cover: "bg-cover",
+		contain: "bg-contain",
+		fill: "bg-size-[100%_100%]",
+		none: "bg-cover",
+		"scale-down": "bg-contain"
+	} },
 	defaultVariants: { fit: "cover" }
 });
 //#endregion
@@ -13365,6 +13429,18 @@ function cssTimeToMs(value) {
 	return text.endsWith("s") && !text.endsWith("ms") ? amount * 1e3 : amount;
 }
 //#endregion
+//#region ../shared/src/lib/thumbhash.ts
+function thumbhashToDataUrl(hash) {
+	let binary;
+	try {
+		binary = atob(hash.trim().replace(/-/g, "+").replace(/_/g, "/"));
+	} catch {
+		return null;
+	}
+	if (binary.length < 5) return null;
+	return thumbHashToDataURL(Uint8Array.from(binary, (char) => char.charCodeAt(0)));
+}
+//#endregion
 //#region src/components/image/resolver.ts
 var KEY$2 = Symbol("hn-image-resolver");
 function provideImageResolver(resolver) {
@@ -13405,9 +13481,10 @@ function useImage(props, emit) {
 	const primary = computed(() => props.src ? resolve(props.src, "image") : "");
 	const fallback = computed(() => props.fallback ? resolve(props.fallback, "image") : "");
 	const resolved = computed(() => usingFallback.value ? fallback.value : primary.value);
+	const placeholder = computed(() => props.thumbhash ? thumbhashToDataUrl(props.thumbhash) : null);
 	const src = computed(() => entered.value ? resolved.value || void 0 : void 0);
 	const showImage = computed(() => Boolean(resolved.value) && !failed.value);
-	const showSkeleton = computed(() => props.skeleton && showImage.value && skeletonMounted.value);
+	const showSkeleton = computed(() => (props.skeleton || !!placeholder.value) && showImage.value && skeletonMounted.value);
 	watch(primary, () => {
 		usingFallback.value = false;
 	});
@@ -13418,12 +13495,12 @@ function useImage(props, emit) {
 		skeletonMounted.value = true;
 		failed.value = false;
 	});
-	function play(el, frames) {
+	function play(el, duration, easing) {
 		const style = getComputedStyle(el);
 		try {
-			return el.animate(frames, {
-				duration: cssTimeToMs(style.getPropertyValue("--hn-duration-fast")),
-				easing: style.getPropertyValue("--hn-ease-enter").trim() || "linear",
+			return el.animate([{ opacity: 1 }, { opacity: 0 }], {
+				duration: cssTimeToMs(style.getPropertyValue(duration)),
+				easing: style.getPropertyValue(easing).trim() || "linear",
 				fill: "forwards"
 			});
 		} catch {
@@ -13433,10 +13510,23 @@ function useImage(props, emit) {
 	function afterPaint() {
 		return new Promise((res) => requestAnimationFrame(() => requestAnimationFrame(() => res())));
 	}
+	function dropLayer() {
+		const layer = skeletonEl.value;
+		const anim = layer && (placeholder.value ? play(layer, "--hn-duration-slow", "--hn-ease-move") : play(layer, "--hn-duration-fast", "--hn-ease-enter"));
+		if (!anim) {
+			skeletonMounted.value = false;
+			return;
+		}
+		fade = anim;
+		anim.finished.then(() => {
+			if (fade === anim) skeletonMounted.value = false;
+		}, () => {});
+	}
 	async function reveal() {
 		if (!props.lazy) {
 			revealed.value = true;
-			skeletonMounted.value = false;
+			if (placeholder.value) dropLayer();
+			else skeletonMounted.value = false;
 			return;
 		}
 		const img = imageEl.value;
@@ -13445,16 +13535,7 @@ function useImage(props, emit) {
 		await afterPaint();
 		if (imageEl.value !== img || src.value !== at) return;
 		revealed.value = true;
-		const layer = skeletonEl.value;
-		const anim = layer && play(layer, [{ opacity: 1 }, { opacity: 0 }]);
-		if (!anim) {
-			skeletonMounted.value = false;
-			return;
-		}
-		fade = anim;
-		anim.finished.then(() => {
-			if (fade === anim) skeletonMounted.value = false;
-		}, () => {});
+		dropLayer();
 	}
 	function fail() {
 		if (!usingFallback.value && fallback.value) {
@@ -13489,6 +13570,7 @@ function useImage(props, emit) {
 		imageEl,
 		skeletonEl,
 		src,
+		placeholder,
 		revealed,
 		failed,
 		showImage,
@@ -13505,15 +13587,6 @@ function useImageGroup() {
 	return inject(KEY$1, null);
 }
 //#endregion
-//#region src/components/image/Image.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$119 = [
-	"src",
-	"alt",
-	"decoding",
-	"fetchpriority",
-	"draggable"
-];
-//#endregion
 //#region src/components/image/Image.vue
 var Image_default = /* @__PURE__ */ defineComponent({
 	name: "HnImage",
@@ -13523,6 +13596,7 @@ var Image_default = /* @__PURE__ */ defineComponent({
 		src: {},
 		alt: { default: "" },
 		fallback: {},
+		thumbhash: {},
 		fit: { default: "cover" },
 		ratio: {},
 		lazy: {
@@ -13564,7 +13638,21 @@ var Image_default = /* @__PURE__ */ defineComponent({
 	emits: ["load", "error"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
-		const { rootEl, imageEl, skeletonEl, src, revealed, failed, showImage, showSkeleton } = useImage(props, __emit);
+		const { rootEl, imageEl, skeletonEl, src, placeholder, revealed, failed, showImage, showSkeleton } = useImage(props, __emit);
+		const framed = computed(() => !!placeholder.value && showImage.value);
+		const imageProps = computed(() => ({
+			style: props.imageStyle,
+			src: src.value,
+			alt: props.alt,
+			decoding: props.eager ? "sync" : "async",
+			fetchpriority: props.eager ? "high" : void 0,
+			draggable: props.draggable,
+			class: cn(image({
+				fit: props.fit,
+				lazy: props.lazy,
+				placeholder: !!placeholder.value
+			}), props.lazy && !revealed.value && "opacity-0", props.lazy && revealed.value && placeholder.value && showSkeleton.value && "mix-blend-plus-lighter", props.imageClass)
+		}));
 		const resolve = useImageResolver();
 		const previewOpen = shallowRef(false);
 		const previewId = useId();
@@ -13601,31 +13689,39 @@ var Image_default = /* @__PURE__ */ defineComponent({
 				onClick: openPreview
 			}, {
 				default: withCtx(() => [
-					unref(showImage) ? (openBlock(), createElementBlock("img", mergeProps({
+					framed.value ? (openBlock(), createElementBlock("span", {
 						key: 0,
+						class: normalizeClass(unref(imageFrame)())
+					}, [createElementVNode("img", mergeProps({
 						ref_key: "imageEl",
 						ref: imageEl
-					}, _ctx.$attrs, {
-						style: props.imageStyle,
-						src: unref(src),
-						alt: props.alt,
-						decoding: props.eager ? "sync" : "async",
-						fetchpriority: props.eager ? "high" : void 0,
-						draggable: props.draggable,
-						class: unref(cn)(unref(image)({
-							fit: props.fit,
-							lazy: props.lazy
-						}), props.lazy && !unref(revealed) && "opacity-0", props.imageClass)
-					}), null, 16, _hoisted_1$119)) : unref(failed) ? renderSlot(_ctx.$slots, "error", {}, void 0, void 0, 1) : renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 2),
-					unref(showSkeleton) ? (openBlock(), createElementBlock("span", {
-						key: 3,
+					}, {
+						..._ctx.$attrs,
+						...imageProps.value
+					}), null, 16), unref(showSkeleton) ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						ref_key: "skeletonEl",
+						ref: skeletonEl,
+						"aria-hidden": "true",
+						class: normalizeClass(unref(cn)("pointer-events-none absolute inset-0", unref(imagePlaceholder)({ fit: props.fit }), unref(revealed) && "will-change-transform")),
+						style: normalizeStyle({ backgroundImage: `url("${unref(placeholder)}")` })
+					}, null, 6)) : createCommentVNode("", true)], 2)) : unref(showImage) ? (openBlock(), createElementBlock("img", mergeProps({
+						key: 1,
+						ref_key: "imageEl",
+						ref: imageEl
+					}, {
+						..._ctx.$attrs,
+						...imageProps.value
+					}), null, 16)) : unref(failed) ? renderSlot(_ctx.$slots, "error", {}, void 0, void 0, 2) : renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 3),
+					unref(showSkeleton) && !framed.value ? (openBlock(), createElementBlock("span", {
+						key: 4,
 						ref_key: "skeletonEl",
 						ref: skeletonEl,
 						"aria-hidden": "true",
 						class: "pointer-events-none absolute inset-0"
 					}, [renderSlot(_ctx.$slots, "skeleton", {}, () => [createVNode(Skeleton_default, { class: "size-full rounded-none" })])], 512)) : createCommentVNode("", true),
 					props.preview && !unref(group) ? (openBlock(), createBlock(Lightbox_default, {
-						key: 4,
+						key: 5,
 						open: previewOpen.value,
 						"onUpdate:open": _cache[0] || (_cache[0] = ($event) => previewOpen.value = $event),
 						items: [previewItem.value]
@@ -18739,7 +18835,7 @@ var _hoisted_7$11 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
-var _hoisted_8$7 = { class: "flex size-4 shrink-0 items-center justify-center" };
+var _hoisted_8$8 = { class: "flex size-4 shrink-0 items-center justify-center" };
 var _hoisted_9$6 = { class: "min-w-0 flex-1" };
 var _hoisted_10$4 = { class: "block truncate" };
 var _hoisted_11$2 = {
@@ -18831,7 +18927,7 @@ var SelectList_default = /* @__PURE__ */ defineComponent({
 											default: withCtx(() => [createVNode(unref(SelectItemText), { "as-child": "" }, {
 												default: withCtx(() => [createElementVNode("span", _hoisted_5$22, [renderSlot(_ctx.$slots, "option", { option }, () => [createElementVNode("span", _hoisted_6$15, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_7$11, toDisplayString(option.description), 1)) : createCommentVNode("", true)])])]),
 												_: 2
-											}, 1024), createElementVNode("span", _hoisted_8$7, [createVNode(unref(SelectItemIndicator), null, {
+											}, 1024), createElementVNode("span", _hoisted_8$8, [createVNode(unref(SelectItemIndicator), null, {
 												default: withCtx(() => [createVNode(unref(Check))]),
 												_: 1
 											})])]),
@@ -21869,7 +21965,7 @@ var _hoisted_7$10 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
-var _hoisted_8$6 = { class: "flex size-4 shrink-0 items-center justify-center" };
+var _hoisted_8$7 = { class: "flex size-4 shrink-0 items-center justify-center" };
 var _hoisted_9$5 = { class: "min-w-0 flex-1" };
 var _hoisted_10$3 = { class: "block truncate" };
 var _hoisted_11$1 = {
@@ -21955,7 +22051,7 @@ var ComboboxList_default = /* @__PURE__ */ defineComponent({
 											disabled: option.disabled,
 											class: normalizeClass(unref(selectItem)())
 										}, {
-											default: withCtx(() => [createElementVNode("span", _hoisted_5$20, [renderSlot(_ctx.$slots, "option", { option }, () => [createElementVNode("span", _hoisted_6$14, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_7$10, toDisplayString(option.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_8$6, [createVNode(unref(ComboboxItemIndicator), null, {
+											default: withCtx(() => [createElementVNode("span", _hoisted_5$20, [renderSlot(_ctx.$slots, "option", { option }, () => [createElementVNode("span", _hoisted_6$14, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_7$10, toDisplayString(option.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_8$7, [createVNode(unref(ComboboxItemIndicator), null, {
 												default: withCtx(() => [createVNode(unref(Check))]),
 												_: 1
 											})])]),
@@ -25022,7 +25118,7 @@ var _hoisted_7$8 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
-var _hoisted_8$5 = { class: "flex size-4 shrink-0 items-center justify-center" };
+var _hoisted_8$6 = { class: "flex size-4 shrink-0 items-center justify-center" };
 var _hoisted_9$4 = { role: "status" };
 //#endregion
 //#region src/components/tree-select/TreeSelect.vue
@@ -25175,7 +25271,7 @@ var TreeSelect_default = /* @__PURE__ */ defineComponent({
 												open: isExpanded
 											}, null, 8, ["open"])], 10, _hoisted_3$27)) : (openBlock(), createElementBlock("span", _hoisted_4$21)),
 											createElementVNode("span", _hoisted_5$16, [renderSlot(_ctx.$slots, "node", { node: item.value }, () => [createElementVNode("span", _hoisted_6$11, toDisplayString(item.value.label), 1), item.value.description ? (openBlock(), createElementBlock("span", _hoisted_7$8, toDisplayString(item.value.description), 1)) : createCommentVNode("", true)])]),
-											createElementVNode("span", _hoisted_8$5, [isSelected ? (openBlock(), createBlock(unref(Check), { key: 0 })) : createCommentVNode("", true)])
+											createElementVNode("span", _hoisted_8$6, [isSelected ? (openBlock(), createBlock(unref(Check), { key: 0 })) : createCommentVNode("", true)])
 										]),
 										_: 2
 									}, 1040, [
@@ -28133,13 +28229,11 @@ var DismissableLayerBranch = defineComponent({
 	},
 	setup(props, { slots }) {
 		const { forwardRef, currentElement } = useForwardExpose();
-		let release;
-		onMounted(() => {
-			if (currentElement.value) release = addBranch(currentElement.value);
-		});
-		onUnmounted(() => {
-			release?.();
-			release = void 0;
+		watch(currentElement, (element, _, onCleanup) => {
+			if (isClient && element instanceof HTMLElement) onCleanup(addBranch(element));
+		}, {
+			immediate: true,
+			flush: "post"
 		});
 		return () => h(Primitive, mergeProps({ ref: forwardRef }, props), { default: withCtx(() => [renderSlot(slots, "default")]) });
 	}
@@ -38687,11 +38781,99 @@ function tourBeaconOnArrival(step, beacon, navigated) {
 function tourTargetBlocked(step, blockTarget) {
 	return step.blockTarget ?? blockTarget;
 }
+function tourPageBlocked(step, blockPage) {
+	return step.blockPage ?? blockPage;
+}
+function toRect(rect) {
+	return {
+		x: rect.left ?? rect.x ?? 0,
+		y: rect.top ?? rect.y ?? 0,
+		width: rect.width,
+		height: rect.height
+	};
+}
+function unionRect(rects) {
+	const left = Math.min(...rects.map((rect) => rect.x));
+	const top = Math.min(...rects.map((rect) => rect.y));
+	const right = Math.max(...rects.map((rect) => rect.x + rect.width));
+	const bottom = Math.max(...rects.map((rect) => rect.y + rect.height));
+	return {
+		x: left,
+		y: top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+function readItem(item) {
+	if (typeof item === "string") {
+		if (typeof document === "undefined") return null;
+		const element = document.querySelector(item);
+		return element ? {
+			element,
+			read: () => toRect(element.getBoundingClientRect())
+		} : null;
+	}
+	if (typeof Element !== "undefined" && item instanceof Element) return {
+		element: item,
+		read: () => toRect(item.getBoundingClientRect())
+	};
+	if (typeof item.getBoundingClientRect === "function") {
+		const virtual = item;
+		return {
+			element: null,
+			read: () => toRect(virtual.getBoundingClientRect())
+		};
+	}
+	const rect = toRect(item);
+	return {
+		element: null,
+		read: () => rect
+	};
+}
 function resolveTourTarget(target) {
 	if (!target) return null;
-	if (typeof target === "string") return typeof document === "undefined" ? null : document.querySelector(target);
-	if (typeof target === "function") return target() ?? null;
-	return target;
+	const value = typeof target === "function" ? target() : target;
+	if (!value) return null;
+	const items = Array.isArray(value) ? value : [value];
+	if (!items.length) return null;
+	const readers = [];
+	for (const item of items) {
+		const reader = item ? readItem(item) : null;
+		if (!reader) return null;
+		readers.push(reader);
+	}
+	return {
+		elements: readers.flatMap((reader) => reader.element ? [reader.element] : []),
+		virtual: readers.some((reader) => !reader.element),
+		rect: () => unionRect(readers.map((reader) => reader.read()))
+	};
+}
+function waitForTourTarget(target, timeout, signal) {
+	const found = resolveTourTarget(target);
+	if (found || timeout <= 0 || signal?.aborted) return Promise.resolve(found);
+	return new Promise((resolve) => {
+		const check = () => {
+			const resolved = resolveTourTarget(target);
+			if (resolved) finish(resolved);
+		};
+		const observer = new MutationObserver(check);
+		const interval = window.setInterval(check, 100);
+		const timer = window.setTimeout(() => finish(null), timeout);
+		const abort = () => finish(null);
+		function finish(value) {
+			observer.disconnect();
+			window.clearInterval(interval);
+			window.clearTimeout(timer);
+			signal?.removeEventListener("abort", abort);
+			resolve(value);
+		}
+		observer.observe(document.documentElement, {
+			childList: true,
+			subtree: true,
+			attributes: true
+		});
+		signal?.addEventListener("abort", abort);
+	});
 }
 function clampTourStep(step, count) {
 	if (count <= 0) return 1;
@@ -38772,11 +38954,19 @@ async function runTourChange(beforeChange, step, previousStep, setBusy) {
 		setBusy(false);
 	}
 }
-function tourReference(element, padding = 8) {
+function tourCardGap(element) {
+	return cssTimeToMs(getComputedStyle(element ?? document.documentElement).getPropertyValue("--hn-duration-exit"));
+}
+function tourReference(read, contextElement) {
 	return {
-		contextElement: element,
+		contextElement: contextElement ?? void 0,
 		getBoundingClientRect() {
-			const rect = spotlightRect(element.getBoundingClientRect(), padding);
+			const rect = read() ?? {
+				x: 0,
+				y: 0,
+				width: 0,
+				height: 0
+			};
 			return {
 				...rect,
 				left: rect.x,
@@ -38787,16 +38977,20 @@ function tourReference(element, padding = 8) {
 		}
 	};
 }
-function watchTourTarget(element, onChange) {
+function watchTourTarget(resolved, onChange) {
 	onChange();
-	return autoUpdate(element, document.documentElement, onChange);
+	const stops = resolved.elements.map((element) => autoUpdate(element, document.documentElement, onChange));
+	if (resolved.virtual) stops.push(autoUpdate({ getBoundingClientRect: () => DOMRect.fromRect(resolved.rect()) }, document.documentElement, onChange, { animationFrame: true }));
+	return () => {
+		for (const stop of stops) stop();
+	};
 }
-function isFullyVisible(element) {
-	const rect = element.getBoundingClientRect();
-	return rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth;
+function isFullyVisible(rect) {
+	return rect.y >= 0 && rect.x >= 0 && rect.y + rect.height <= window.innerHeight && rect.x + rect.width <= window.innerWidth;
 }
-function revealTourTarget(element) {
-	if (isFullyVisible(element)) return;
+function revealTourTarget(resolved) {
+	const [element] = resolved.elements;
+	if (!element || isFullyVisible(resolved.rect())) return;
 	const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
 	element.scrollIntoView({
 		block: "center",
@@ -38806,11 +39000,13 @@ function revealTourTarget(element) {
 }
 function hideOutsideTour(elements) {
 	const present = elements.filter((element) => !!element?.isConnected);
-	return present.length ? hideOthers(present) : () => {};
+	return present.length ? hideOutsideLayers(present) : () => {};
 }
-function trapTourFocus(getContainers, getLayer) {
+function tourOwnsInput(layer, scripted) {
+	return scripted || isHighestLayer(layer);
+}
+function trapTourFocus(getContainers, enabled) {
 	const containers = () => getContainers().filter((node) => !!node);
-	const enabled = () => isHighestLayer(getLayer());
 	const inside = (node) => !!node && containers().some((c) => c.contains(node));
 	function candidates() {
 		return containers().flatMap((container) => [...container.tabIndex >= 0 ? [container] : [], ...getTabbableCandidates$1(container)]);
@@ -38838,26 +39034,672 @@ function trapTourFocus(getContainers, getLayer) {
 		document.removeEventListener("keydown", onKeyDown, true);
 	};
 }
+function listenTourKeys(onKeyDown) {
+	window.addEventListener("keydown", onKeyDown, true);
+	return () => window.removeEventListener("keydown", onKeyDown, true);
+}
+//#endregion
+//#region ../shared/src/lib/tour-engine.ts
+var INITIAL = {
+	status: "idle",
+	settled: false,
+	hole: null,
+	targetRect: null,
+	radius: 8,
+	elements: [],
+	playing: false,
+	viewport: {
+		width: 0,
+		height: 0
+	}
+};
+var TOUR_SPRING = {
+	stiffness: 260,
+	damping: 30
+};
+var KEYS = [
+	"x",
+	"y",
+	"width",
+	"height"
+];
+function stepSpring(position, velocity, goal, seconds, { stiffness, damping } = TOUR_SPRING) {
+	const step = 1 / 240;
+	let left = seconds;
+	while (left > 0) {
+		const dt = Math.min(step, left);
+		for (const key of KEYS) {
+			const force = -stiffness * (position[key] - goal[key]) - damping * velocity[key];
+			velocity[key] += force * dt;
+			position[key] += velocity[key] * dt;
+		}
+		left -= dt;
+	}
+	return KEYS.every((key) => Math.abs(position[key] - goal[key]) < .25 && Math.abs(velocity[key]) < 2);
+}
+function bezierEasing([x1, y1, x2, y2]) {
+	const curve = (a, b, t) => 3 * a * t * (1 - t) ** 2 + 3 * b * t * t * (1 - t) + t ** 3;
+	const slope = (a, b, t) => 3 * a * (1 - t) ** 2 + 6 * (b - a) * t * (1 - t) + 3 * (1 - b) * t * t;
+	return (progress) => {
+		if (progress <= 0) return 0;
+		if (progress >= 1) return 1;
+		let t = progress;
+		for (let i = 0; i < 8; i++) {
+			const error = curve(x1, x2, t) - progress;
+			const derivative = slope(x1, x2, t);
+			if (Math.abs(error) < 1e-5 || derivative === 0) break;
+			t -= error / derivative;
+		}
+		return curve(y1, y2, Math.min(Math.max(t, 0), 1));
+	};
+}
+var easeMove = bezierEasing(EASE.move);
+function reducedMotion() {
+	return typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function abortError() {
+	return new DOMException("The tour step was left", "AbortError");
+}
+function isAbortError(error) {
+	return error instanceof DOMException && error.name === "AbortError";
+}
+function guard(signal) {
+	if (signal.aborted) throw abortError();
+}
+function tourSleep(ms, signal) {
+	return new Promise((resolve, reject) => {
+		if (signal.aborted) return reject(abortError());
+		const timer = window.setTimeout(done, ms);
+		const abort = () => {
+			window.clearTimeout(timer);
+			reject(abortError());
+		};
+		function done() {
+			signal.removeEventListener("abort", abort);
+			resolve();
+		}
+		signal.addEventListener("abort", abort, { once: true });
+	});
+}
+function tween(duration, onFrame, signal, easing = easeMove) {
+	return new Promise((resolve, reject) => {
+		if (signal.aborted) return reject(abortError());
+		if (duration <= 0 || reducedMotion()) {
+			onFrame(1);
+			return resolve();
+		}
+		const start = performance.now();
+		let frame = 0;
+		const abort = () => {
+			cancelAnimationFrame(frame);
+			reject(abortError());
+		};
+		const tick = (now) => {
+			const progress = Math.min((now - start) / duration, 1);
+			onFrame(easing(progress));
+			if (progress < 1) frame = requestAnimationFrame(tick);
+			else {
+				signal.removeEventListener("abort", abort);
+				resolve();
+			}
+		};
+		signal.addEventListener("abort", abort, { once: true });
+		frame = requestAnimationFrame(tick);
+	});
+}
+var nextFrame = () => new Promise((resolve) => requestAnimationFrame(() => resolve()));
+var delay = (ms) => new Promise((resolve) => window.setTimeout(resolve, ms));
+function finiteAnimations(affects = () => true) {
+	if (typeof document.getAnimations !== "function") return [];
+	return document.getAnimations().filter((animation) => {
+		if (animation.playState !== "running" || animation.timeline !== document.timeline) return false;
+		const end = animation.effect?.getComputedTiming().endTime;
+		if (typeof end !== "number" || !Number.isFinite(end)) return false;
+		const node = animation.effect?.target;
+		return !!node && affects(node);
+	});
+}
+function settle(animations, until) {
+	if (!animations.length) return Promise.resolve();
+	return Promise.race([Promise.allSettled(animations.map((animation) => animation.finished)), delay(Math.max(until - performance.now(), 0))]);
+}
+async function waitForStillTarget(target, limit = 1e3) {
+	const until = performance.now() + limit;
+	await nextFrame();
+	await settle(finiteAnimations((node) => target.elements.some((element) => node === element || node.contains(element))), until);
+	let previous = target.rect();
+	let still = 0;
+	while (still < 2 && performance.now() < until) {
+		await nextFrame();
+		const rect = target.rect();
+		const moved = KEYS.some((key) => Math.abs(rect[key] - previous[key]) > .5);
+		previous = rect;
+		still = moved ? 0 : still + 1;
+	}
+}
+async function waitForFiniteAnimations(limit = 1e3) {
+	const until = performance.now() + limit;
+	await nextFrame();
+	await nextFrame();
+	await settle(finiteAnimations(), until);
+}
+function isPoint(value) {
+	return !!value && typeof value === "object" && typeof value.x === "number" && typeof value.y === "number" && !("width" in value);
+}
+function tourPointerPoint(target) {
+	if (isPoint(target)) return {
+		x: target.x,
+		y: target.y
+	};
+	const resolved = resolveTourTarget(target);
+	if (!resolved) return null;
+	const rect = resolved.rect();
+	return {
+		x: rect.x + rect.width / 2,
+		y: rect.y + rect.height / 2
+	};
+}
+function createPointer(element, keyBadge, signal, memory, ready) {
+	const place = (point) => {
+		memory.point = point;
+		const node = element();
+		if (node) node.style.transform = `translate3d(${point.x}px, ${point.y}px, 0)`;
+	};
+	const setState = (name, value) => {
+		const node = element();
+		if (!node) return;
+		if (value === null) node.removeAttribute(name);
+		else node.setAttribute(name, value);
+	};
+	const ripple = () => {
+		const node = element()?.querySelector("[data-hn-tour-pointer-ripples]");
+		if (!node) return;
+		const span = document.createElement("span");
+		span.setAttribute("data-hn-tour-ripple", "");
+		span.addEventListener("animationend", () => span.remove(), { once: true });
+		window.setTimeout(() => span.remove(), 1e3);
+		node.appendChild(span);
+	};
+	const resolvePoint = (target) => {
+		const point = tourPointerPoint(target);
+		if (!point) throw new Error("[Hina UI] Tour: the pointer target was not found");
+		return point;
+	};
+	const travel = async (target, duration, onMove) => {
+		guard(signal);
+		let to = resolvePoint(target);
+		const from = element()?.getAttribute("data-state") !== "shown" || !memory.point ? {
+			x: to.x + 40,
+			y: to.y + 40
+		} : memory.point;
+		place(from);
+		setState("data-state", "shown");
+		await tween(duration, (progress) => {
+			to = tourPointerPoint(target) ?? to;
+			const point = {
+				x: from.x + (to.x - from.x) * progress,
+				y: from.y + (to.y - from.y) * progress
+			};
+			place(point);
+			onMove?.(point);
+		}, signal);
+	};
+	return {
+		async move(target, duration = 600) {
+			await ready();
+			await travel(target, duration);
+		},
+		async tap() {
+			await ready();
+			setState("data-pressed", "");
+			ripple();
+			await tourSleep(120, signal);
+			setState("data-pressed", null);
+			await tourSleep(180, signal);
+		},
+		async press(duration = 800) {
+			await ready();
+			element()?.style.setProperty("--hn-tour-press", `${duration}ms`);
+			setState("data-pressed", "long");
+			try {
+				await tourSleep(duration, signal);
+			} finally {
+				setState("data-pressed", null);
+			}
+		},
+		async drag(target, duration = 800, onMove) {
+			await ready();
+			setState("data-pressed", "");
+			try {
+				await tourSleep(80, signal);
+				if (memory.point) onMove?.(memory.point);
+				await travel(target, duration, onMove);
+				await tourSleep(80, signal);
+			} finally {
+				setState("data-pressed", null);
+			}
+		},
+		async key(key, duration = 700) {
+			await ready();
+			const badge = keyBadge();
+			if (!badge) return;
+			const label = badge.querySelector("[data-hn-tour-key-label]") ?? badge;
+			label.textContent = key;
+			const near = element()?.getAttribute("data-state") === "shown" && memory.point;
+			const x = near ? memory.point.x + 20 : window.innerWidth / 2;
+			const y = near ? memory.point.y + 28 : window.innerHeight - 72;
+			badge.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+			badge.setAttribute("data-placement", near ? "pointer" : "screen");
+			badge.setAttribute("data-state", "shown");
+			try {
+				await tourSleep(duration, signal);
+			} finally {
+				badge.setAttribute("data-state", "hidden");
+			}
+		},
+		async hide() {
+			setState("data-state", "hidden");
+		}
+	};
+}
+function createTourEngine(options) {
+	let state = INITIAL;
+	const listeners = /* @__PURE__ */ new Set();
+	const set = (patch) => {
+		state = {
+			...state,
+			...patch
+		};
+		for (const listener of [...listeners]) listener();
+	};
+	let step = {};
+	let stepNumber = 0;
+	let padding = 8;
+	let resolved = null;
+	let stopTracking = () => {};
+	let token = 0;
+	let epoch = 0;
+	let revealAt = 0;
+	let entering = false;
+	let entry = Promise.resolve();
+	let markEntered = () => {};
+	let waiting = null;
+	let position = null;
+	let velocity = {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+	let frame = 0;
+	let last = 0;
+	let settleWaiters = [];
+	let run = null;
+	const pointerMemory = { point: null };
+	const viewport = () => ({
+		width: window.innerWidth,
+		height: window.innerHeight
+	});
+	const attached = (found) => found.elements.every((element) => element.isConnected);
+	const goal = () => {
+		if (!resolved) return null;
+		if (!attached(resolved)) return position ? { ...position } : null;
+		return spotlightRect(toBox(resolved.rect()), padding);
+	};
+	const toBox = (rect) => ({
+		left: rect.x,
+		top: rect.y,
+		width: rect.width,
+		height: rect.height
+	});
+	function flushSettled() {
+		const waiters = settleWaiters;
+		settleWaiters = [];
+		for (const resolve of waiters) resolve();
+	}
+	function stopSpring() {
+		if (frame) cancelAnimationFrame(frame);
+		frame = 0;
+		flushSettled();
+	}
+	function snap() {
+		if (resolved && !attached(resolved)) {
+			set({ viewport: viewport() });
+			return;
+		}
+		const target = goal();
+		position = target ? { ...target } : null;
+		velocity = {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		};
+		set({
+			hole: position ? { ...position } : null,
+			targetRect: resolved ? resolved.rect() : null,
+			viewport: viewport()
+		});
+	}
+	function tick(now) {
+		const target = goal();
+		if (!target || !position) {
+			frame = 0;
+			snap();
+			flushSettled();
+			return;
+		}
+		const seconds = Math.min((now - last) / 1e3, 1 / 20);
+		last = now;
+		if (stepSpring(position, velocity, target, seconds)) {
+			frame = 0;
+			snap();
+			flushSettled();
+			return;
+		}
+		set({
+			hole: { ...position },
+			...attached(resolved) ? { targetRect: resolved.rect() } : {},
+			viewport: viewport()
+		});
+		frame = requestAnimationFrame(tick);
+	}
+	function springTo(animate) {
+		if (!animate || !position || reducedMotion()) {
+			stopSpring();
+			snap();
+			return Promise.resolve();
+		}
+		const settled = new Promise((resolve) => settleWaiters.push(resolve));
+		if (!frame) {
+			last = performance.now();
+			frame = requestAnimationFrame(tick);
+		}
+		return settled;
+	}
+	function track() {
+		if (frame) return;
+		snap();
+	}
+	function follow(target, found) {
+		let stopWatch = watchTourTarget(found, track);
+		const observer = new MutationObserver(() => {
+			if (!resolved || attached(resolved)) return;
+			const again = resolveTourTarget(target);
+			if (!again || !attached(again)) return;
+			resolved = again;
+			stopWatch();
+			set({ elements: again.elements });
+			springTo(!!position);
+			stopWatch = watchTourTarget(again, track);
+		});
+		observer.observe(document.body, {
+			childList: true,
+			subtree: true
+		});
+		return () => {
+			observer.disconnect();
+			stopWatch();
+		};
+	}
+	function onResize() {
+		if (frame) return;
+		if (resolved) snap();
+		else set({ viewport: viewport() });
+	}
+	async function reveal(current) {
+		if (revealAt > performance.now()) {
+			await delay(revealAt - performance.now());
+			if (current !== token) return false;
+		}
+		entering = false;
+		set({ settled: true });
+		markEntered();
+		return true;
+	}
+	function untilEntered(signal) {
+		return new Promise((resolve, reject) => {
+			if (signal.aborted) return reject(abortError());
+			const abort = () => reject(abortError());
+			signal.addEventListener("abort", abort, { once: true });
+			entry.then(() => {
+				signal.removeEventListener("abort", abort);
+				if (signal.aborted) reject(abortError());
+				else resolve();
+			});
+		});
+	}
+	async function aim(target, { wait = 0, scroll = true, padding: nextPadding, radius }) {
+		const current = ++token;
+		waiting?.abort();
+		const controller = new AbortController();
+		waiting = controller;
+		let found = resolveTourTarget(target);
+		if (!found && target && wait > 0) {
+			found = await waitForTourTarget(target, wait, controller.signal);
+			if (current !== token) return "stale";
+		}
+		if (!found) {
+			stopTracking();
+			stopTracking = () => {};
+			resolved = null;
+			stopSpring();
+			position = null;
+			set({
+				status: "missing",
+				settled: !entering,
+				hole: null,
+				targetRect: null,
+				elements: [],
+				viewport: viewport()
+			});
+			if (entering && !await reveal(current)) return "stale";
+			return target ? "missing" : "empty";
+		}
+		stopTracking();
+		stopTracking = () => {};
+		const animate = !!position;
+		if (scroll) revealTourTarget(found);
+		if (animate && !reducedMotion()) {
+			stopSpring();
+			for (let attempt = 0; attempt < 3; attempt++) {
+				await waitForStillTarget(found);
+				if (current !== token) return "stale";
+				if (attached(found)) break;
+				const again = resolveTourTarget(target);
+				if (!again) break;
+				found = again;
+			}
+		}
+		resolved = found;
+		padding = nextPadding ?? step.padding ?? 8;
+		set({
+			status: "ready",
+			elements: found.elements,
+			radius: radius ?? step.radius ?? 8,
+			...entering ? { settled: false } : {}
+		});
+		const settled = springTo(animate);
+		stopTracking = follow(target, found);
+		await settled;
+		if (current !== token) return "stale";
+		if (entering && !await reveal(current)) return "stale";
+		return "ready";
+	}
+	function abortRun() {
+		const current = run;
+		if (!current) return;
+		run = null;
+		current.controller.abort();
+		for (const cleanup of current.cleanups.reverse()) try {
+			cleanup();
+		} catch (error) {
+			console.error(error);
+		}
+		options.pointer()?.setAttribute("data-state", "hidden");
+		options.pointer()?.removeAttribute("data-pressed");
+		options.keyBadge()?.setAttribute("data-state", "hidden");
+		set({ playing: false });
+	}
+	function play() {
+		abortRun();
+		epoch += 1;
+		const script = step.play;
+		if (!script) return;
+		const controller = new AbortController();
+		const cleanups = [];
+		const current = {
+			controller,
+			cleanups
+		};
+		run = current;
+		const { signal } = controller;
+		const context = {
+			step: stepNumber,
+			signal,
+			defer(cleanup) {
+				if (signal.aborted) cleanup();
+				else cleanups.push(cleanup);
+			},
+			pointer: createPointer(options.pointer, options.keyBadge, signal, pointerMemory, () => untilEntered(signal)),
+			async spotlight(target, spotlightOptions = {}) {
+				guard(signal);
+				await aim(target === void 0 ? step.target : target, {
+					...spotlightOptions,
+					scroll: false
+				});
+				guard(signal);
+			},
+			async waitFor(target, timeout = 5e3) {
+				guard(signal);
+				const found = await waitForTourTarget(target, timeout, signal);
+				guard(signal);
+				return !!found;
+			},
+			sleep: (ms) => tourSleep(ms, signal)
+		};
+		set({ playing: true });
+		Promise.resolve().then(() => script(context)).catch((error) => {
+			if (!isAbortError(error)) console.error(error);
+		}).finally(() => {
+			if (run === current) set({ playing: false });
+		});
+	}
+	return {
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		getState: () => state,
+		pointerKind: options.pointerKind,
+		enter(next, number) {
+			abortRun();
+			epoch += 1;
+			const fresh = state.status === "idle";
+			if (fresh) {
+				stopSpring();
+				position = null;
+				pointerMemory.point = null;
+				window.addEventListener("resize", onResize);
+			}
+			revealAt = fresh ? 0 : performance.now() + (options.cardGap?.() ?? 0);
+			markEntered();
+			entering = true;
+			entry = new Promise((resolve) => markEntered = resolve);
+			step = next;
+			stepNumber = number;
+			set({
+				status: "waiting",
+				settled: false,
+				viewport: viewport(),
+				...fresh ? {
+					hole: null,
+					targetRect: null,
+					elements: []
+				} : {}
+			});
+			return aim(next.target, {
+				wait: next.wait ?? 0,
+				scroll: next.scroll !== false
+			});
+		},
+		play,
+		replay() {
+			if (!step.play) return;
+			abortRun();
+			const current = ++epoch;
+			stopTracking();
+			stopTracking = () => {};
+			stopSpring();
+			waitForFiniteAnimations().then(() => {
+				if (current !== epoch) return;
+				aim(step.target, {
+					wait: step.wait ?? 0,
+					scroll: false
+				});
+				play();
+			});
+		},
+		leave() {
+			abortRun();
+			epoch += 1;
+			token += 1;
+			waiting?.abort();
+			waiting = null;
+		},
+		close() {
+			abortRun();
+			epoch += 1;
+			token += 1;
+			waiting?.abort();
+			waiting = null;
+			stopTracking();
+			stopTracking = () => {};
+			stopSpring();
+			window.removeEventListener("resize", onResize);
+			entering = false;
+			markEntered();
+			set({
+				status: "idle",
+				settled: false,
+				playing: false
+			});
+		}
+	};
+}
 //#endregion
 //#region ../shared/src/variants/tour.ts
+var layer = "z-[calc(var(--hn-z-overlay)+1)]";
 var tourMask = tv({ base: "hn-scrim hn-tour-mask" });
-var tourBlocker = tv({ base: "fixed z-(--hn-z-overlay)" });
-var tourCard = tv({ base: "relative z-(--hn-z-overlay) flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-3 overflow-visible p-4 shadow-lg outline-none" });
-var tourCentered = tv({ base: "pointer-events-none fixed inset-0 z-(--hn-z-overlay) grid place-items-center p-4 [&>*]:pointer-events-auto" });
-var tourBeacon = tv({ base: "hn-focus-ring fixed z-(--hn-z-overlay) size-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full" });
+var tourBlocker = tv({ base: `fixed ${layer}` });
+var tourCard = tv({ base: `relative ${layer} flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-3 overflow-visible p-4 shadow-lg outline-none` });
+var tourCentered = tv({ base: `pointer-events-none fixed inset-0 ${layer} grid place-items-center p-4 [&>*]:pointer-events-auto` });
+var tourBeacon = tv({ base: `hn-focus-ring fixed ${layer} size-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full` });
 var tourBeaconPulse = tv({ base: "hn-ping bg-accent pointer-events-none absolute inset-0 rounded-full" });
 var tourBeaconDot = tv({ base: "bg-accent ring-surface pointer-events-none relative block size-full rounded-full ring-2" });
 var tourHeader = tv({ base: "flex items-start gap-2" });
 var tourFooter = tv({ base: "flex items-center gap-2" });
+var tourPointer = tv({ base: "hn-tour-pointer" });
+var tourPointerArrow = tv({ base: "fill-fg stroke-surface absolute top-0 size-6 -translate-x-1 -translate-y-0.5 drop-shadow-md" });
+var tourPointerTouch = tv({ base: "bg-fg/30 ring-surface absolute top-0 block size-9 -translate-x-1/2 -translate-y-1/2 rounded-full shadow-md ring-2" });
+var tourKey = tv({ base: "hn-tour-key" });
+var tourKeyCap = tv({ base: "border-line bg-surface text-fg block min-w-8 -translate-x-1/2 rounded-md border px-2 py-1 text-center text-sm font-medium whitespace-nowrap shadow-md" });
 //#endregion
 //#region src/components/tour/Tour.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$68 = ["hidden"];
-var _hoisted_2$43 = ["data-state", "data-hn-tour-hole"];
-var _hoisted_3$24 = ["aria-label"];
-var _hoisted_4$20 = ["id"];
-var _hoisted_5$15 = ["d"];
+var _hoisted_2$43 = ["data-kind"];
+var _hoisted_3$24 = [
+	"data-state",
+	"data-mask",
+	"data-hn-tour-hole"
+];
+var _hoisted_4$20 = ["aria-label"];
+var _hoisted_5$15 = ["id"];
 var _hoisted_6$10 = ["d"];
-var _hoisted_7$7 = { class: "ms-auto flex gap-2" };
+var _hoisted_7$7 = ["d"];
+var _hoisted_8$5 = { class: "ms-auto flex gap-2" };
 //#endregion
 //#region src/components/tour/Tour.vue
 var Tour_default = /* @__PURE__ */ defineComponent({
@@ -38866,7 +39708,7 @@ var Tour_default = /* @__PURE__ */ defineComponent({
 	props: /*@__PURE__*/ mergeModels({
 		steps: {},
 		mask: {
-			type: Boolean,
+			type: [Boolean, String],
 			default: true
 		},
 		locked: { type: Boolean },
@@ -38875,10 +39717,16 @@ var Tour_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		blockPage: {
+			type: Boolean,
+			default: false
+		},
+		pointer: { default: "auto" },
 		nextText: {},
 		prevText: {},
 		finishText: {},
 		skipText: {},
+		replayText: {},
 		beforeChange: {},
 		dir: {},
 		class: {}
@@ -38891,7 +39739,13 @@ var Tour_default = /* @__PURE__ */ defineComponent({
 		"step": { default: 1 },
 		"stepModifiers": {}
 	}),
-	emits: /*@__PURE__*/ mergeModels(["finish", "skip"], ["update:open", "update:step"]),
+	emits: /*@__PURE__*/ mergeModels([
+		"finish",
+		"skip",
+		"close",
+		"stepEnter",
+		"stepLeave"
+	], ["update:open", "update:step"]),
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -38907,126 +39761,172 @@ var Tour_default = /* @__PURE__ */ defineComponent({
 		const isLast = computed(() => current.value >= total.value);
 		const busy = ref(false);
 		const beaconPending = ref(false);
-		const resolvedFor = ref(null);
-		const target = shallowRef(null);
-		const hole = ref(null);
-		const targetRect = ref(null);
-		const viewport = ref({
-			width: 0,
-			height: 0
-		});
-		const padding = computed(() => currentStep.value.padding ?? 8);
+		const entered = ref(null);
+		const coarse = ref(false);
+		const pointerKind = computed(() => props.pointer === "auto" ? coarse.value ? "touch" : "mouse" : props.pointer);
+		const card = shallowRef(null);
+		const layer = shallowRef(null);
+		const beaconButton = shallowRef(null);
+		const maskElement = shallowRef(null);
+		const blockerElement = shallowRef(null);
+		const pointerElement = shallowRef(null);
+		const keyElement = shallowRef(null);
+		const engine = createTourEngine({
+			pointer: () => pointerElement.value,
+			keyBadge: () => keyElement.value,
+			pointerKind: () => pointerKind.value,
+			cardGap: () => tourCardGap(card.value?.$el)
+		});
+		const tour = shallowRef(engine.getState());
+		const unsubscribe = engine.subscribe(() => tour.value = engine.getState());
 		const active = computed(() => open.value && total.value > 0);
-		const resolved = computed(() => active.value && resolvedFor.value !== null);
-		const beaconVisible = computed(() => resolved.value && !!target.value && beaconPending.value);
-		const cardVisible = computed(() => resolved.value && !beaconVisible.value);
-		const maskVisible = computed(() => cardVisible.value && props.mask);
-		const modal = computed(() => props.mask);
+		const engaged = computed(() => active.value && entered.value !== null);
+		const live = computed(() => engaged.value && entered.value === current.value);
+		const status = computed(() => engaged.value ? tour.value.status : "idle");
+		const beaconVisible = computed(() => live.value && status.value === "ready" && !!tour.value.hole && beaconPending.value);
+		const cardVisible = computed(() => live.value && (status.value === "ready" || status.value === "missing") && tour.value.settled && !beaconVisible.value);
+		let anchoredWhenShown = false;
+		const anchored = computed(() => {
+			if (!cardVisible.value) return anchoredWhenShown;
+			anchoredWhenShown = status.value === "ready" && !!tour.value.hole;
+			return anchoredWhenShown;
+		});
+		let stepWhenShown = current.value;
+		const shown = computed(() => {
+			if (cardVisible.value) stepWhenShown = current.value;
+			return clampTourStep(stepWhenShown, total.value);
+		});
+		const shownStep = computed(() => props.steps[shown.value - 1] ?? {});
+		const maskVisible = computed(() => !!props.mask && status.value !== "idle" && !beaconVisible.value && !(beaconPending.value && status.value === "waiting"));
+		const modal = computed(() => !!props.mask);
+		const scripted = computed(() => !!currentStep.value.play);
 		const blocked = computed(() => tourTargetBlocked(currentStep.value, props.blockTarget));
-		const blocking = computed(() => cardVisible.value && !!hole.value && blocked.value);
-		const spotlight = computed(() => hole.value ? spotlightShape(viewport.value, hole.value, currentStep.value.radius ?? 8) : null);
+		const pageBlocked = computed(() => engaged.value && tourPageBlocked(currentStep.value, props.blockPage));
+		const blocking = computed(() => cardVisible.value && !!tour.value.hole && blocked.value);
+		const targetElements = computed(() => tour.value.elements);
+		const spotlight = computed(() => tour.value.hole ? spotlightShape(tour.value.viewport, tour.value.hole, tour.value.radius) : null);
 		const lastSpotlight = shallowRef(null);
 		const spotlightState = computed(() => spotlightMask(spotlight.value, lastSpotlight.value));
-		const holeStyle = computed(() => hole.value ? {
-			left: `${hole.value.x}px`,
-			top: `${hole.value.y}px`,
-			width: `${hole.value.width}px`,
-			height: `${hole.value.height}px`
-		} : void 0);
+		const blockerStyle = computed(() => {
+			if (pageBlocked.value) return {
+				left: "0px",
+				top: "0px",
+				width: "100%",
+				height: "100%"
+			};
+			const hole = tour.value.hole;
+			if (!blocking.value || !hole) return void 0;
+			return {
+				left: `${hole.x}px`,
+				top: `${hole.y}px`,
+				width: `${hole.width}px`,
+				height: `${hole.height}px`
+			};
+		});
 		const beaconStyle = computed(() => {
-			if (!targetRect.value) return void 0;
-			const point = beaconPoint(targetRect.value, direction.value);
+			if (!tour.value.targetRect) return void 0;
+			const point = beaconPoint(tour.value.targetRect, direction.value);
 			return {
 				left: `${point.x}px`,
 				top: `${point.y}px`
 			};
 		});
-		const reference = computed(() => target.value ? tourReference(target.value, padding.value) : void 0);
-		const card = shallowRef(null);
-		const layer = shallowRef(null);
-		const beaconButton = shallowRef(null);
+		let holeWhenShown = null;
+		const reference = tourReference(() => {
+			if (cardVisible.value) holeWhenShown = engine.getState().hole;
+			return holeWhenShown;
+		});
 		let returnFocus = null;
-		const mounted = ref(false);
+		let closeReason = null;
 		let navigated = false;
-		function resolveTarget() {
-			if (!mounted.value || !active.value) return;
-			const definition = currentStep.value.target;
-			const element = resolveTourTarget(definition);
-			if (definition && !element) `${current.value}`;
-			target.value = element;
-			root.value = element ?? document.documentElement;
-			resolvedFor.value = current.value;
-			if (element && currentStep.value.scroll !== false) revealTourTarget(element);
-		}
-		watch([
-			active,
-			current,
-			() => props.steps
-		], resolveTarget, { flush: "post" });
+		let refocusBeacon = false;
+		const mounted = ref(false);
+		function enterStep() {
+			if (!mounted.value) return;
+			if (!active.value) {
+				if (entered.value !== null) exitTour();
+				return;
+			}
+			if (entered.value === current.value) return;
+			const previous = entered.value;
+			refocusBeacon = !!card.value?.$el.contains(document.activeElement);
+			if (previous !== null) {
+				engine.leave();
+				emit("stepLeave", previous);
+			} else {
+				returnFocus = document.activeElement;
+				closeReason = null;
+			}
+			beaconPending.value = tourBeaconOnArrival(currentStep.value, !!props.beacon, previous !== null && navigated);
+			navigated = false;
+			const number = current.value;
+			entered.value = number;
+			emit("stepEnter", number);
+			engine.enter(currentStep.value, number).then((result) => {
+				if (result === "missing" && entered.value === number) `${number}`;
+			});
+			if (!beaconPending.value) engine.play();
+		}
+		function exitTour() {
+			const previous = entered.value;
+			entered.value = null;
+			engine.close();
+			lastSpotlight.value = null;
+			if (previous !== null) emit("stepLeave", previous);
+			emit("close", closeReason ?? "close");
+			closeReason = null;
+			nextTick(restoreFocus);
+		}
+		watch([active, current], enterStep, { flush: "post" });
 		onMounted(() => {
 			mounted.value = true;
-			beaconPending.value = tourBeaconOnArrival(currentStep.value, !!props.beacon, false);
-			resolveTarget();
-			if (!active.value) return;
-			returnFocus = document.activeElement;
-			nextTick(() => {
-				if (cardVisible.value) card.value?.$el.focus({ preventScroll: true });
-			});
+			coarse.value = !!window.matchMedia?.("(pointer: coarse)").matches;
+			enterStep();
 		});
-		watch([active, current], ([isActive], [wasActive]) => {
-			const focusInCard = !!card.value?.$el.contains(document.activeElement);
-			beaconPending.value = tourBeaconOnArrival(currentStep.value, !!props.beacon, !!isActive && !!wasActive && navigated);
-			navigated = false;
-			if (!isActive) {
-				resolvedFor.value = null;
-				lastSpotlight.value = null;
-			}
-			if (isActive && !wasActive) returnFocus = document.activeElement;
-			if (!isActive && wasActive) nextTick(restoreFocus);
-			if (isActive && wasActive && focusInCard) nextTick(() => {
-				if (beaconVisible.value) beaconButton.value?.focus();
-			});
+		onBeforeUnmount(() => {
+			unsubscribe();
+			engine.close();
 		});
 		watch([spotlight, maskVisible], ([value, visible]) => {
 			if (value && visible) lastSpotlight.value = value;
 		});
+		watch(targetElements, (elements) => {
+			root.value = elements[0] ?? document.documentElement;
+		});
 		watch(cardVisible, (visible) => {
 			if (visible) nextTick(() => card.value?.$el.focus({ preventScroll: true }));
 		});
-		watchEffect((onCleanup) => {
-			const element = target.value;
-			if (!mounted.value || !active.value) return;
-			const update = () => {
-				viewport.value = {
-					width: window.innerWidth,
-					height: window.innerHeight
-				};
-				if (!element) {
-					hole.value = null;
-					targetRect.value = null;
-					return;
-				}
-				const rect = element.getBoundingClientRect();
-				targetRect.value = spotlightRect(rect, 0);
-				hole.value = spotlightRect(rect, padding.value);
-			};
-			if (!element) {
-				update();
-				window.addEventListener("resize", update);
-				onCleanup(() => window.removeEventListener("resize", update));
-				return;
-			}
-			onCleanup(watchTourTarget(element, update));
+		watch(beaconVisible, (visible) => {
+			if (!visible || !refocusBeacon) return;
+			refocusBeacon = false;
+			nextTick(() => beaconButton.value?.focus());
 		});
+		function useBranch(element) {
+			watch(element, (node, _, onCleanup) => {
+				if (node) onCleanup(addBranch(node));
+			}, {
+				immediate: true,
+				flush: "post"
+			});
+		}
+		useBranch(() => layer.value?.$el);
+		useBranch(() => maskElement.value);
+		useBranch(() => blockerElement.value);
+		useBranch(() => beaconButton.value);
+		const owns = () => tourOwnsInput(layer.value?.$el, scripted.value || pageBlocked.value);
 		watchEffect((onCleanup) => {
 			if (!cardVisible.value || !modal.value) return;
 			const layerElement = layer.value?.$el;
 			if (!layerElement?.isConnected) return;
-			const reachable = !blocked.value;
-			const element = target.value;
-			onCleanup(hideOutsideTour([layerElement, element]));
-			onCleanup(trapTourFocus(() => [card.value?.$el, reachable ? element : null], () => layer.value?.$el));
+			const reachable = !blocked.value && !pageBlocked.value;
+			const elements = targetElements.value;
+			onCleanup(hideOutsideTour([layerElement, ...elements]));
+			onCleanup(trapTourFocus(() => [card.value?.$el, ...reachable ? elements : []], owns));
 		}, { flush: "post" });
+		watchEffect((onCleanup) => {
+			if (!engaged.value || beaconVisible.value) return;
+			onCleanup(listenTourKeys(onKeydown));
+		});
 		function restoreFocus() {
 			const focus = returnFocus;
 			returnFocus = null;
@@ -39055,23 +39955,37 @@ var Tour_default = /* @__PURE__ */ defineComponent({
 		}
 		function finish() {
 			emit("finish");
+			closeReason = "finish";
 			open.value = false;
 		}
-		function skip() {
+		function skip(reason = "skip") {
 			if (busy.value) return;
 			emit("skip");
+			closeReason = reason;
 			open.value = false;
 		}
 		function close() {
+			closeReason = "close";
 			open.value = false;
 		}
-		function onEscape(event) {
-			if (props.locked || busy.value) event.preventDefault();
+		function replay() {
+			if (live.value && !beaconPending.value) engine.replay();
+		}
+		function openBeacon() {
+			beaconPending.value = false;
+			engine.play();
 		}
 		function preventDismiss(event) {
 			event.preventDefault();
 		}
 		function onKeydown(event) {
+			if (event.defaultPrevented || !owns()) return;
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				if (!props.locked) skip("escape");
+				return;
+			}
 			const action = tourKeyAction(event, direction.value);
 			if (!action) return;
 			event.preventDefault();
@@ -39080,22 +39994,27 @@ var Tour_default = /* @__PURE__ */ defineComponent({
 			} else if (current.value > 1) prev();
 		}
 		const slotProps = computed(() => ({
-			step: currentStep.value,
-			current: current.value,
+			step: shownStep.value,
+			current: shown.value,
 			total: total.value,
 			busy: busy.value,
+			playing: tour.value.playing,
 			next: () => void next(),
 			prev: () => void prev(),
-			skip
+			skip: () => skip(),
+			replay
 		}));
-		const popperProps = computed(() => target.value ? {
+		const popperProps = computed(() => anchored.value ? {
 			asChild: true,
-			reference: reference.value,
-			side: currentStep.value.side ?? "bottom",
-			align: currentStep.value.align ?? "center",
+			reference,
+			side: shownStep.value.side ?? "bottom",
+			align: shownStep.value.align ?? "center",
 			sideOffset: 12,
 			collisionPadding: 16,
-			arrowPadding: 12
+			arrowPadding: 12,
+			prioritizePosition: true,
+			sticky: "always",
+			updatePositionStrategy: "always"
 		} : {
 			class: cn(tourCentered(), "hn-anim-pop"),
 			"data-state": cardVisible.value ? "open" : "closed"
@@ -39104,27 +40023,68 @@ var Tour_default = /* @__PURE__ */ defineComponent({
 			next,
 			prev,
 			goTo,
-			close
+			close,
+			replay
 		});
 		return (_ctx, _cache) => {
 			return total.value > 0 ? (openBlock(), createBlock(unref(Teleport$1), { key: 0 }, {
 				default: withCtx(() => [
 					createElementVNode("div", {
+						ref_key: "blockerElement",
+						ref: blockerElement,
 						"data-hn-tour-blocker": "",
 						"aria-hidden": "true",
-						hidden: !blocking.value,
+						hidden: !blockerStyle.value,
 						class: normalizeClass(unref(tourBlocker)()),
-						style: normalizeStyle(blocking.value ? holeStyle.value : void 0)
+						style: normalizeStyle(blockerStyle.value)
 					}, null, 14, _hoisted_1$68),
+					createElementVNode("div", {
+						ref_key: "pointerElement",
+						ref: pointerElement,
+						"data-hn-tour-pointer": "",
+						"data-kind": pointerKind.value,
+						"data-state": "hidden",
+						"aria-hidden": "true",
+						class: normalizeClass(unref(tourPointer)())
+					}, [
+						_cache[2] || (_cache[2] = createElementVNode("span", { "data-hn-tour-pointer-ring": "" }, null, -1)),
+						_cache[3] || (_cache[3] = createElementVNode("span", { "data-hn-tour-pointer-ripples": "" }, null, -1)),
+						pointerKind.value === "mouse" ? (openBlock(), createElementBlock("svg", {
+							key: 0,
+							"data-hn-tour-pointer-glyph": "",
+							viewBox: "0 0 24 24",
+							"stroke-width": "1.5",
+							"stroke-linejoin": "round",
+							class: normalizeClass(unref(tourPointerArrow)())
+						}, [..._cache[1] || (_cache[1] = [createElementVNode("path", { d: "M4 2.5v16.2l4.1-3.9 2.8 6.6 2.9-1.2-2.8-6.5h5.8z" }, null, -1)])], 2)) : (openBlock(), createElementBlock("span", {
+							key: 1,
+							"data-hn-tour-pointer-glyph": "",
+							class: normalizeClass(unref(tourPointerTouch)())
+						}, null, 2))
+					], 10, _hoisted_2$43),
+					createElementVNode("div", {
+						ref_key: "keyElement",
+						ref: keyElement,
+						"data-hn-tour-key": "",
+						"data-state": "hidden",
+						"aria-hidden": "true",
+						class: normalizeClass(unref(tourKey)())
+					}, [createElementVNode("kbd", {
+						"data-hn-tour-key-label": "",
+						class: normalizeClass(unref(tourKeyCap)())
+					}, null, 2)], 2),
 					createVNode(unref(Presence), { present: maskVisible.value }, {
 						default: withCtx(() => [createElementVNode("div", {
+							ref_key: "maskElement",
+							ref: maskElement,
 							"data-hn-tour-mask": "",
 							"aria-hidden": "true",
 							"data-state": maskVisible.value ? "open" : "closed",
+							"data-mask": props.mask === "dim" ? "dim" : void 0,
 							"data-hn-tour-hole": spotlightState.value.hole,
 							class: normalizeClass(unref(tourMask)()),
 							style: normalizeStyle(spotlightState.value.style)
-						}, null, 14, _hoisted_2$43)]),
+						}, null, 14, _hoisted_3$24)]),
 						_: 1
 					}, 8, ["present"]),
 					beaconVisible.value ? (openBlock(), createElementBlock("button", {
@@ -39136,48 +40096,46 @@ var Tour_default = /* @__PURE__ */ defineComponent({
 						"aria-label": unref(t).tour.beacon(current.value, currentStep.value.title ?? ""),
 						class: normalizeClass(unref(tourBeacon)()),
 						style: normalizeStyle(beaconStyle.value),
-						onClick: _cache[0] || (_cache[0] = ($event) => beaconPending.value = false)
-					}, [createElementVNode("span", { class: normalizeClass(unref(tourBeaconPulse)()) }, null, 2), createElementVNode("span", { class: normalizeClass(unref(tourBeaconDot)()) }, null, 2)], 14, _hoisted_3$24)) : createCommentVNode("", true),
+						onClick: openBeacon
+					}, [createElementVNode("span", { class: normalizeClass(unref(tourBeaconPulse)()) }, null, 2), createElementVNode("span", { class: normalizeClass(unref(tourBeaconDot)()) }, null, 2)], 14, _hoisted_4$20)) : createCommentVNode("", true),
 					createVNode(unref(PopperRoot), null, {
 						default: withCtx(() => [createVNode(unref(Presence), { present: cardVisible.value }, {
 							default: withCtx(() => [createVNode(unref(DismissableLayer), {
 								ref_key: "layer",
 								ref: layer,
 								"as-child": "",
-								onEscapeKeyDown: onEscape,
+								onEscapeKeyDown: preventDismiss,
 								onPointerDownOutside: preventDismiss,
-								onFocusOutside: preventDismiss,
-								onDismiss: skip
+								onFocusOutside: preventDismiss
 							}, {
-								default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(target.value ? unref(PopperContent) : "div"), normalizeProps(guardReactiveProps(popperProps.value)), {
+								default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(anchored.value ? unref(PopperContent) : "div"), normalizeProps(guardReactiveProps(popperProps.value)), {
 									default: withCtx(() => [createVNode(Card_default, {
 										ref_key: "card",
 										ref: card,
 										"data-hn-tour": "",
-										"data-step": current.value,
+										"data-step": shown.value,
 										"data-state": cardVisible.value ? "open" : "closed",
 										padded: false,
 										role: "dialog",
 										tabindex: "-1",
 										dir: unref(direction),
 										"aria-modal": modal.value ? "true" : void 0,
-										"aria-labelledby": currentStep.value.title ? unref(titleId) : void 0,
-										"aria-describedby": currentStep.value.description || _ctx.$slots.content ? unref(descriptionId) : void 0,
+										"aria-labelledby": shownStep.value.title ? unref(titleId) : void 0,
+										"aria-describedby": shownStep.value.description || _ctx.$slots.content ? unref(descriptionId) : void 0,
 										"aria-busy": busy.value || void 0,
-										class: normalizeClass(unref(cn)(unref(tourCard)(), target.value && "hn-anim-pop", props.class)),
-										onKeydown
+										class: normalizeClass(unref(cn)(unref(tourCard)(), anchored.value && "hn-anim-pop", props.class))
 									}, {
 										default: withCtx(() => [
-											currentStep.value.title || !props.locked ? (openBlock(), createElementBlock("div", {
+											shownStep.value.title || !props.locked ? (openBlock(), createElementBlock("div", {
 												key: 0,
 												class: normalizeClass(unref(tourHeader)())
-											}, [currentStep.value.title ? (openBlock(), createBlock(Text_default, {
+											}, [shownStep.value.title ? (openBlock(), createBlock(Text_default, {
 												key: 0,
 												id: unref(titleId),
 												weight: "medium",
 												class: "min-w-0 flex-1"
 											}, {
-												default: withCtx(() => [createTextVNode(toDisplayString(currentStep.value.title), 1)]),
+												default: withCtx(() => [createTextVNode(toDisplayString(shownStep.value.title), 1)]),
 												_: 1
 											}, 8, ["id"])) : createCommentVNode("", true), !props.locked ? (openBlock(), createBlock(CloseButton_default, {
 												key: 1,
@@ -39185,19 +40143,19 @@ var Tour_default = /* @__PURE__ */ defineComponent({
 												class: "ms-auto -me-1.5 -mt-1.5",
 												label: props.skipText ?? unref(t).tour.skip,
 												disabled: busy.value,
-												onClick: skip
+												onClick: _cache[0] || (_cache[0] = ($event) => skip())
 											}, null, 8, ["label", "disabled"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
-											currentStep.value.description || _ctx.$slots.content ? (openBlock(), createElementBlock("div", {
+											shownStep.value.description || _ctx.$slots.content ? (openBlock(), createElementBlock("div", {
 												key: 1,
 												id: unref(descriptionId)
 											}, [renderSlot(_ctx.$slots, "content", normalizeProps(guardReactiveProps(slotProps.value)), () => [createVNode(Text_default, {
 												tone: "muted",
 												size: "sm"
 											}, {
-												default: withCtx(() => [createTextVNode(toDisplayString(currentStep.value.description), 1)]),
+												default: withCtx(() => [createTextVNode(toDisplayString(shownStep.value.description), 1)]),
 												_: 1
-											})])], 8, _hoisted_4$20)) : createCommentVNode("", true),
-											target.value ? (openBlock(), createBlock(unref(PopperArrow), {
+											})])], 8, _hoisted_5$15)) : createCommentVNode("", true),
+											anchored.value ? (openBlock(), createBlock(unref(PopperArrow), {
 												key: 2,
 												"data-hn-tour-arrow": "",
 												width: unref(16),
@@ -39207,42 +40165,59 @@ var Tour_default = /* @__PURE__ */ defineComponent({
 												default: withCtx(() => [createElementVNode("path", {
 													d: `${unref(TOUR_ARROW_PATH)}Z`,
 													class: "fill-surface"
-												}, null, 8, _hoisted_5$15), createElementVNode("path", {
+												}, null, 8, _hoisted_6$10), createElementVNode("path", {
 													d: unref(TOUR_ARROW_PATH),
 													fill: "none",
 													class: "stroke-line",
 													"vector-effect": "non-scaling-stroke"
-												}, null, 8, _hoisted_6$10)]),
+												}, null, 8, _hoisted_7$7)]),
 												_: 1
 											}, 8, ["width", "height"])) : createCommentVNode("", true),
-											renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps(slotProps.value)), () => [createElementVNode("div", { class: normalizeClass(unref(tourFooter)()) }, [createVNode(Text_default, {
-												as: "span",
-												tone: "muted",
-												size: "sm",
-												class: "tabular-nums"
-											}, {
-												default: withCtx(() => [createTextVNode(toDisplayString(unref(t).tour.progress(current.value, total.value)), 1)]),
-												_: 1
-											}), createElementVNode("div", _hoisted_7$7, [current.value > 1 ? (openBlock(), createBlock(Button_default, {
-												key: 0,
-												"data-hn-tour-prev": "",
-												size: "sm",
-												variant: "soft",
-												tone: "neutral",
-												disabled: busy.value,
-												onClick: prev
-											}, {
-												default: withCtx(() => [createTextVNode(toDisplayString(props.prevText ?? unref(t).tour.prev), 1)]),
-												_: 1
-											}, 8, ["disabled"])) : createCommentVNode("", true), createVNode(Button_default, {
-												"data-hn-tour-next": "",
-												size: "sm",
-												loading: busy.value,
-												onClick: next
-											}, {
-												default: withCtx(() => [createTextVNode(toDisplayString(isLast.value ? props.finishText ?? unref(t).tour.finish : props.nextText ?? unref(t).tour.next), 1)]),
-												_: 1
-											}, 8, ["loading"])])], 2)])
+											renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps(slotProps.value)), () => [createElementVNode("div", { class: normalizeClass(unref(tourFooter)()) }, [
+												createVNode(Text_default, {
+													as: "span",
+													tone: "muted",
+													size: "sm",
+													class: "tabular-nums"
+												}, {
+													default: withCtx(() => [createTextVNode(toDisplayString(unref(t).tour.progress(shown.value, total.value)), 1)]),
+													_: 1
+												}),
+												!!shownStep.value.play ? (openBlock(), createBlock(IconButton_default, {
+													key: 0,
+													"data-hn-tour-replay": "",
+													label: props.replayText ?? unref(t).tour.replay,
+													tooltip: false,
+													size: "sm",
+													variant: "ghost",
+													tone: "neutral",
+													pill: "",
+													onClick: replay
+												}, {
+													default: withCtx(() => [createVNode(unref(RotateCcw))]),
+													_: 1
+												}, 8, ["label"])) : createCommentVNode("", true),
+												createElementVNode("div", _hoisted_8$5, [shown.value > 1 ? (openBlock(), createBlock(Button_default, {
+													key: 0,
+													"data-hn-tour-prev": "",
+													size: "sm",
+													variant: "soft",
+													tone: "neutral",
+													disabled: busy.value,
+													onClick: prev
+												}, {
+													default: withCtx(() => [createTextVNode(toDisplayString(props.prevText ?? unref(t).tour.prev), 1)]),
+													_: 1
+												}, 8, ["disabled"])) : createCommentVNode("", true), createVNode(Button_default, {
+													"data-hn-tour-next": "",
+													size: "sm",
+													loading: busy.value,
+													onClick: next
+												}, {
+													default: withCtx(() => [createTextVNode(toDisplayString(shown.value >= total.value ? props.finishText ?? unref(t).tour.finish : props.nextText ?? unref(t).tour.next), 1)]),
+													_: 1
+												}, 8, ["loading"])])
+											], 2)])
 										]),
 										_: 3
 									}, 8, [
@@ -40702,8 +41677,8 @@ var Sheet_default = /* @__PURE__ */ defineComponent({
 		"open": { type: Boolean },
 		"openModifiers": {}
 	}),
-	emits: ["update:open"],
-	setup(__props, { expose: __expose }) {
+	emits: /*@__PURE__*/ mergeModels(["interactOutside"], ["update:open"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const submitting = provideFormScope();
 		const locked = computed(() => props.locked || submitting.value);
@@ -40724,6 +41699,11 @@ var Sheet_default = /* @__PURE__ */ defineComponent({
 		function guard(event) {
 			if (locked.value) event.preventDefault();
 		}
+		const emit = __emit;
+		function onInteractOutside(event) {
+			emit("interactOutside", event);
+			guard(event);
+		}
 		function close() {
 			open.value = false;
 		}
@@ -40742,7 +41722,7 @@ var Sheet_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [createVNode(unref(DialogOverlay), { class: "hn-scrim" }), createVNode(unref(DialogContent), {
 						"as-child": "",
 						onEscapeKeyDown: guard,
-						onInteractOutside: guard
+						onInteractOutside
 					}, {
 						default: withCtx(() => [createVNode(Card_default, mergeProps({
 							ref_key: "panel",
@@ -47909,8 +48889,8 @@ var Drawer_default = /* @__PURE__ */ defineComponent({
 		"open": { type: Boolean },
 		"openModifiers": {}
 	}),
-	emits: ["update:open"],
-	setup(__props, { expose: __expose }) {
+	emits: /*@__PURE__*/ mergeModels(["interactOutside"], ["update:open"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const slots = useSlots();
 		const submitting = provideFormScope();
@@ -47918,6 +48898,11 @@ var Drawer_default = /* @__PURE__ */ defineComponent({
 		function guard(e) {
 			if (locked.value) e.preventDefault();
 		}
+		const emit = __emit;
+		function onInteractOutside(event) {
+			emit("interactOutside", event);
+			guard(event);
+		}
 		const { scrollArea, viewport } = useScrollViewport();
 		__expose({ viewport });
 		const open = useModel(__props, "open");
@@ -47940,7 +48925,7 @@ var Drawer_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [createVNode(unref(DialogOverlay), { class: "hn-scrim" }), createVNode(unref(DialogContent), {
 						"as-child": "",
 						onEscapeKeyDown: guard,
-						onInteractOutside: guard
+						onInteractOutside
 					}, {
 						default: withCtx(() => [createVNode(Card_default, mergeProps({
 							ref_key: "content",
@@ -49338,8 +50323,8 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 		"open": { type: Boolean },
 		"openModifiers": {}
 	}),
-	emits: ["update:open"],
-	setup(__props, { expose: __expose }) {
+	emits: /*@__PURE__*/ mergeModels(["interactOutside"], ["update:open"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const slots = useSlots();
 		const submitting = provideFormScope();
@@ -49347,6 +50332,11 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 		function guard(e) {
 			if (locked.value) e.preventDefault();
 		}
+		const emit = __emit;
+		function onInteractOutside(event) {
+			emit("interactOutside", event);
+			guard(event);
+		}
 		const { scrollArea, viewport } = useScrollViewport();
 		__expose({ viewport });
 		const open = useModel(__props, "open");
@@ -49369,7 +50359,7 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [createVNode(unref(DialogOverlay), { class: "hn-scrim" }), createElementVNode("div", { class: normalizeClass(unref(dialogWrapper)({ placement: props.placement ?? "auto" })) }, [createVNode(ModalContent_default, {
 						"as-child": "",
 						onEscapeKeyDown: guard,
-						onInteractOutside: guard
+						onInteractOutside
 					}, {
 						default: withCtx(() => [createVNode(Card_default, mergeProps({
 							ref_key: "content",
@@ -49460,6 +50450,28 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/overlay-branch/OverlayBranch.vue
+var OverlayBranch_default = /* @__PURE__ */ defineComponent({
+	name: "HnOverlayBranch",
+	__name: "OverlayBranch",
+	props: {
+		asChild: { type: Boolean },
+		as: { default: "div" }
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DismissableLayerBranch), {
+				as: props.as,
+				"as-child": props.asChild
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["as", "as-child"]);
+		};
+	}
+});
+//#endregion
 //#region src/components/sidebar/SidebarTrigger.vue
 var SidebarTrigger_default = /* @__PURE__ */ defineComponent({
 	name: "HnSidebarTrigger",
@@ -58454,6 +59466,6 @@ var Masonry_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { Accordion_default as Accordion, AccordionContent_default as AccordionContent, AccordionItem_default as AccordionItem, AccordionTrigger_default as AccordionTrigger, Affix_default as Affix, Alert_default as Alert, AlertDialog_default as AlertDialog, Anchor_default as Anchor, AppShell_default as AppShell, AspectRatio_default as AspectRatio, Autocomplete_default as Autocomplete, Avatar_default as Avatar, AvatarGroup_default as AvatarGroup, Badge_default as Badge, Banner_default as Banner, Blockquote_default as Blockquote, Breadcrumb_default as Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, BreadcrumbSeparator_default as BreadcrumbSeparator, Button_default as Button, ButtonGroup_default as ButtonGroup, Calendar_default as Calendar, Callout_default as Callout, Card_default as Card, Carousel_default as Carousel, Center_default as Center, Checkbox_default as Checkbox, CheckboxGroup_default as CheckboxGroup, Chip_default as Chip, CloseButton_default as CloseButton, Code_default as Code, CodeBlock_default as CodeBlock, Collapsible_default as Collapsible, CollapsibleContent_default as CollapsibleContent, CollapsibleTrigger_default as CollapsibleTrigger, Combobox_default as Combobox, CommandPalette_default as CommandPalette, CommandPaletteInput_default as CommandPaletteInput, ConfigProvider_default as ConfigProvider, Container_default as Container, ContextMenu_default as ContextMenu, ContextMenuCheckboxItem_default as ContextMenuCheckboxItem, ContextMenuGroup_default as ContextMenuGroup, ContextMenuItem_default as ContextMenuItem, ContextMenuLabel_default as ContextMenuLabel, ContextMenuRadioGroup_default as ContextMenuRadioGroup, ContextMenuRadioItem_default as ContextMenuRadioItem, ContextMenuSeparator_default as ContextMenuSeparator, ContextMenuSub_default as ContextMenuSub, CopyButton_default as CopyButton, DURATION, DataList_default as DataList, DataTable_default as DataTable, DateField_default as DateField, DatePicker_default as DatePicker, DateRangeField_default as DateRangeField, DateRangePicker_default as DateRangePicker, DateTimePicker_default as DateTimePicker, DescriptionDetails_default as DescriptionDetails, DescriptionList_default as DescriptionList, DescriptionTerm_default as DescriptionTerm, Dialog_default as Dialog, DisclosureIcon_default as DisclosureIcon, Divider_default as Divider, Drawer_default as Drawer, DropdownMenu_default as DropdownMenu, DropdownMenuCheckboxItem_default as DropdownMenuCheckboxItem, DropdownMenuGroup_default as DropdownMenuGroup, DropdownMenuItem_default as DropdownMenuItem, DropdownMenuLabel_default as DropdownMenuLabel, DropdownMenuRadioGroup_default as DropdownMenuRadioGroup, DropdownMenuRadioItem_default as DropdownMenuRadioItem, DropdownMenuSeparator_default as DropdownMenuSeparator, DropdownMenuSub_default as DropdownMenuSub, EASE, Editable_default as Editable, Empty_default as Empty, FileUpload_default as FileUpload, Flex_default as Flex, FloatButton_default as FloatButton, Form_default as Form, FormField_default as FormField, FormLayout_default as FormLayout, Grid_default as Grid, Heading_default as Heading, Highlight_default as Highlight, HoverCard_default as HoverCard, IconButton_default as IconButton, Image_default as Image, ImageGroup_default as ImageGroup, Indicator_default as Indicator, Inline_default as Inline, Input_default as Input, InputGroup_default as InputGroup, InputGroupAddon_default as InputGroupAddon, Kbd_default as Kbd, Lightbox_default as Lightbox, LineClamp_default as LineClamp, Link_default as Link, List_default as List, ListItem_default as ListItem, Listbox_default as Listbox, LoadingOverlay_default as LoadingOverlay, Mark_default as Mark, Masonry_default as Masonry, Menubar_default as Menubar, MenubarCheckboxItem_default as MenubarCheckboxItem, MenubarGroup_default as MenubarGroup, MenubarItem_default as MenubarItem, MenubarLabel_default as MenubarLabel, MenubarMenu_default as MenubarMenu, MenubarRadioGroup_default as MenubarRadioGroup, MenubarRadioItem_default as MenubarRadioItem, MenubarSeparator_default as MenubarSeparator, MenubarSub_default as MenubarSub, MeterGroup_default as MeterGroup, MonthGrid_default as MonthGrid, MultiCombobox_default as MultiCombobox, MultiSelect_default as MultiSelect, NavLink_default as NavLink, NavigationMenu_default as NavigationMenu, NavigationMenuContent_default as NavigationMenuContent, NavigationMenuItem_default as NavigationMenuItem, NavigationMenuLink_default as NavigationMenuLink, NavigationMenuTrigger_default as NavigationMenuTrigger, NumberFormat_default as NumberFormat, NumberInput_default as NumberInput, Page_default as Page, PageAside_default as PageAside, PageBody_default as PageBody, PageHeader_default as PageHeader, Pagination_default as Pagination, PaginationContent_default as PaginationContent, PaginationInfo_default as PaginationInfo, PaginationJump_default as PaginationJump, PaginationSize_default as PaginationSize, Panel_default as Panel, PasswordInput_default as PasswordInput, PinInput_default as PinInput, Popconfirm_default as Popconfirm, Popover_default as Popover, PrevNext_default as PrevNext, PrevNextLink_default as PrevNextLink, Progress_default as Progress, Prose_default as Prose, QRCode_default as QRCode, REQUIRED_SINGLETONS, RESTORE_DEADLINE_MS, RadioGroup_default as RadioGroup, RangeCalendar_default as RangeCalendar, RangeSlider_default as RangeSlider, Rating_default as Rating, Result_default as Result, RingProgress_default as RingProgress, Ripple_default as Ripple, SAVE_THROTTLE_MS, SCROLL_ATOP_ATTR, SCROLL_ATOP_HIDE_PX, SCROLL_AT_ATTR, SCROLL_RESTORE_ATTR, SCROLL_STATE_FIELD, STAGGER, ScrollArea_default as ScrollArea, ScrollTop_default as ScrollTop, SearchInput_default as SearchInput, Section_default as Section, SegmentedControl_default as SegmentedControl, Select_default as Select, Sheet_default as Sheet, Sidebar_default as Sidebar, SidebarGroup_default as SidebarGroup, SidebarLabel_default as SidebarLabel, SidebarTrigger_default as SidebarTrigger, SimpleGrid_default as SimpleGrid, Skeleton_default as Skeleton, Slider_default as Slider, Space_default as Space, Spinner_default as Spinner, SplitButton_default as SplitButton, Splitter_default as Splitter, SplitterHandle_default as SplitterHandle, SplitterPanel_default as SplitterPanel, Spoiler_default as Spoiler, Stack_default as Stack, Statistic_default as Statistic, Stepper_default as Stepper, Switch_default as Switch, TRANSITION, TRAVEL, Table_default as Table, TableBody_default as TableBody, TableCell_default as TableCell, TableHead_default as TableHead, TableHeader_default as TableHeader, TableRow_default as TableRow, Tabs_default as Tabs, TabsContent_default as TabsContent, TabsList_default as TabsList, TabsTrigger_default as TabsTrigger, Tag_default as Tag, TagsInput_default as TagsInput, Text_default as Text, Textarea_default as Textarea, Time_default as Time, TimeField_default as TimeField, Timeline_default as Timeline, Toaster_default as Toaster, Toggle_default as Toggle, Toolbar_default as Toolbar, ToolbarButton_default as ToolbarButton, ToolbarLink_default as ToolbarLink, ToolbarSeparator_default as ToolbarSeparator, ToolbarToggleGroup_default as ToolbarToggleGroup, ToolbarToggleItem_default as ToolbarToggleItem, Tooltip_default as Tooltip, TooltipProvider_default as TooltipProvider, Tour_default as Tour, Tree_default as Tree, TreeSelect_default as TreeSelect, VirtualList_default as VirtualList, VisuallyHidden_default as VisuallyHidden, atopOff, cn, createScrollRestoreSession, createScrollRestorer, cssEase, enUS, firstPaintRestoreScript, jaJP, keepScrollPosition, provideImageResolver, provideUiLocale, readScrollRecord, scrollRestoreScript, toast, tokenize, tokensToHtml, tv, useAvatarGroup, useConfig, useImageResolver, useUiLocale, vTooltip, writeScrollRecord, zhCN };
+export { Accordion_default as Accordion, AccordionContent_default as AccordionContent, AccordionItem_default as AccordionItem, AccordionTrigger_default as AccordionTrigger, Affix_default as Affix, Alert_default as Alert, AlertDialog_default as AlertDialog, Anchor_default as Anchor, AppShell_default as AppShell, AspectRatio_default as AspectRatio, Autocomplete_default as Autocomplete, Avatar_default as Avatar, AvatarGroup_default as AvatarGroup, Badge_default as Badge, Banner_default as Banner, Blockquote_default as Blockquote, Breadcrumb_default as Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, BreadcrumbSeparator_default as BreadcrumbSeparator, Button_default as Button, ButtonGroup_default as ButtonGroup, Calendar_default as Calendar, Callout_default as Callout, Card_default as Card, Carousel_default as Carousel, Center_default as Center, Checkbox_default as Checkbox, CheckboxGroup_default as CheckboxGroup, Chip_default as Chip, CloseButton_default as CloseButton, Code_default as Code, CodeBlock_default as CodeBlock, Collapsible_default as Collapsible, CollapsibleContent_default as CollapsibleContent, CollapsibleTrigger_default as CollapsibleTrigger, Combobox_default as Combobox, CommandPalette_default as CommandPalette, CommandPaletteInput_default as CommandPaletteInput, ConfigProvider_default as ConfigProvider, Container_default as Container, ContextMenu_default as ContextMenu, ContextMenuCheckboxItem_default as ContextMenuCheckboxItem, ContextMenuGroup_default as ContextMenuGroup, ContextMenuItem_default as ContextMenuItem, ContextMenuLabel_default as ContextMenuLabel, ContextMenuRadioGroup_default as ContextMenuRadioGroup, ContextMenuRadioItem_default as ContextMenuRadioItem, ContextMenuSeparator_default as ContextMenuSeparator, ContextMenuSub_default as ContextMenuSub, CopyButton_default as CopyButton, DURATION, DataList_default as DataList, DataTable_default as DataTable, DateField_default as DateField, DatePicker_default as DatePicker, DateRangeField_default as DateRangeField, DateRangePicker_default as DateRangePicker, DateTimePicker_default as DateTimePicker, DescriptionDetails_default as DescriptionDetails, DescriptionList_default as DescriptionList, DescriptionTerm_default as DescriptionTerm, Dialog_default as Dialog, DisclosureIcon_default as DisclosureIcon, Divider_default as Divider, Drawer_default as Drawer, DropdownMenu_default as DropdownMenu, DropdownMenuCheckboxItem_default as DropdownMenuCheckboxItem, DropdownMenuGroup_default as DropdownMenuGroup, DropdownMenuItem_default as DropdownMenuItem, DropdownMenuLabel_default as DropdownMenuLabel, DropdownMenuRadioGroup_default as DropdownMenuRadioGroup, DropdownMenuRadioItem_default as DropdownMenuRadioItem, DropdownMenuSeparator_default as DropdownMenuSeparator, DropdownMenuSub_default as DropdownMenuSub, EASE, Editable_default as Editable, Empty_default as Empty, FileUpload_default as FileUpload, Flex_default as Flex, FloatButton_default as FloatButton, Form_default as Form, FormField_default as FormField, FormLayout_default as FormLayout, Grid_default as Grid, Heading_default as Heading, Highlight_default as Highlight, HoverCard_default as HoverCard, IconButton_default as IconButton, Image_default as Image, ImageGroup_default as ImageGroup, Indicator_default as Indicator, Inline_default as Inline, Input_default as Input, InputGroup_default as InputGroup, InputGroupAddon_default as InputGroupAddon, Kbd_default as Kbd, Lightbox_default as Lightbox, LineClamp_default as LineClamp, Link_default as Link, List_default as List, ListItem_default as ListItem, Listbox_default as Listbox, LoadingOverlay_default as LoadingOverlay, Mark_default as Mark, Masonry_default as Masonry, Menubar_default as Menubar, MenubarCheckboxItem_default as MenubarCheckboxItem, MenubarGroup_default as MenubarGroup, MenubarItem_default as MenubarItem, MenubarLabel_default as MenubarLabel, MenubarMenu_default as MenubarMenu, MenubarRadioGroup_default as MenubarRadioGroup, MenubarRadioItem_default as MenubarRadioItem, MenubarSeparator_default as MenubarSeparator, MenubarSub_default as MenubarSub, MeterGroup_default as MeterGroup, MonthGrid_default as MonthGrid, MultiCombobox_default as MultiCombobox, MultiSelect_default as MultiSelect, NavLink_default as NavLink, NavigationMenu_default as NavigationMenu, NavigationMenuContent_default as NavigationMenuContent, NavigationMenuItem_default as NavigationMenuItem, NavigationMenuLink_default as NavigationMenuLink, NavigationMenuTrigger_default as NavigationMenuTrigger, NumberFormat_default as NumberFormat, NumberInput_default as NumberInput, OverlayBranch_default as OverlayBranch, Page_default as Page, PageAside_default as PageAside, PageBody_default as PageBody, PageHeader_default as PageHeader, Pagination_default as Pagination, PaginationContent_default as PaginationContent, PaginationInfo_default as PaginationInfo, PaginationJump_default as PaginationJump, PaginationSize_default as PaginationSize, Panel_default as Panel, PasswordInput_default as PasswordInput, PinInput_default as PinInput, Popconfirm_default as Popconfirm, Popover_default as Popover, PrevNext_default as PrevNext, PrevNextLink_default as PrevNextLink, Progress_default as Progress, Prose_default as Prose, QRCode_default as QRCode, REQUIRED_SINGLETONS, RESTORE_DEADLINE_MS, RadioGroup_default as RadioGroup, RangeCalendar_default as RangeCalendar, RangeSlider_default as RangeSlider, Rating_default as Rating, Result_default as Result, RingProgress_default as RingProgress, Ripple_default as Ripple, SAVE_THROTTLE_MS, SCROLL_ATOP_ATTR, SCROLL_ATOP_HIDE_PX, SCROLL_AT_ATTR, SCROLL_RESTORE_ATTR, SCROLL_STATE_FIELD, STAGGER, ScrollArea_default as ScrollArea, ScrollTop_default as ScrollTop, SearchInput_default as SearchInput, Section_default as Section, SegmentedControl_default as SegmentedControl, Select_default as Select, Sheet_default as Sheet, Sidebar_default as Sidebar, SidebarGroup_default as SidebarGroup, SidebarLabel_default as SidebarLabel, SidebarTrigger_default as SidebarTrigger, SimpleGrid_default as SimpleGrid, Skeleton_default as Skeleton, Slider_default as Slider, Space_default as Space, Spinner_default as Spinner, SplitButton_default as SplitButton, Splitter_default as Splitter, SplitterHandle_default as SplitterHandle, SplitterPanel_default as SplitterPanel, Spoiler_default as Spoiler, Stack_default as Stack, Statistic_default as Statistic, Stepper_default as Stepper, Switch_default as Switch, TRANSITION, TRAVEL, Table_default as Table, TableBody_default as TableBody, TableCell_default as TableCell, TableHead_default as TableHead, TableHeader_default as TableHeader, TableRow_default as TableRow, Tabs_default as Tabs, TabsContent_default as TabsContent, TabsList_default as TabsList, TabsTrigger_default as TabsTrigger, Tag_default as Tag, TagsInput_default as TagsInput, Text_default as Text, Textarea_default as Textarea, Time_default as Time, TimeField_default as TimeField, Timeline_default as Timeline, Toaster_default as Toaster, Toggle_default as Toggle, Toolbar_default as Toolbar, ToolbarButton_default as ToolbarButton, ToolbarLink_default as ToolbarLink, ToolbarSeparator_default as ToolbarSeparator, ToolbarToggleGroup_default as ToolbarToggleGroup, ToolbarToggleItem_default as ToolbarToggleItem, Tooltip_default as Tooltip, TooltipProvider_default as TooltipProvider, Tour_default as Tour, Tree_default as Tree, TreeSelect_default as TreeSelect, VirtualList_default as VirtualList, VisuallyHidden_default as VisuallyHidden, atopOff, cn, createScrollRestoreSession, createScrollRestorer, cssEase, enUS, firstPaintRestoreScript, jaJP, keepScrollPosition, provideImageResolver, provideUiLocale, readScrollRecord, scrollRestoreScript, toast, tokenize, tokensToHtml, tv, useAvatarGroup, useConfig, useImageResolver, useUiLocale, vTooltip, writeScrollRecord, zhCN };
 
 //# sourceMappingURL=index.js.map