@astryx-vue/lab 0.3.1 → 0.5.0

package/dist/index.js

@@ -1,6 +1,7 @@
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, h, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onScopeDispose, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useId, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, h, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useAttrs, useId, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/circular-progress.css";
-import { AlertDialog, BottomSheet, Button, CheckboxIndicator, ComplexSelector, EmptyState, Field, FieldStatus, Icon, IconButton, Item, List, SyntaxTheme, Text, TextInput, Token, Tooltip, VisuallyHidden, tokenize, useAnnounce, useScrollableArea, useTranslator } from "@astryx-vue/core";
+import { AlertDialog, BottomSheet, Button, CheckboxIndicator, ComplexSelector, EmptyState, Field, FieldStatus, HStack, Heading, Icon, IconButton, Item, List, Popover, SYNC_TOKENIZE_THRESHOLD, SyntaxTheme, Text, TextInput, Token, Tooltip, VStack, VisuallyHidden, applyHighlightRangesFlat, tokenize, tokenizeAsync, useAnnounce, useScrollableArea, useTranslator } from "@astryx-vue/core";
+import "../styles/code-editor.css";
 import "../styles/diff-viewer.css";
 import "../styles/info-tip.css";
 import "../styles/list-input.css";
@@ -8,6 +9,7 @@ import "../styles/log-stream.css";
 import "../styles/mobile-tokenizer.css";
 import "../styles/stat.css";
 import "../styles/svg-icon.css";
+import "../styles/tour.css";
 import "../styles/transfer-list.css";
 import "../styles/transfer-list-selector.css";
 //#region src/CircularProgress/types.ts
@@ -32,9 +34,9 @@ function defaultFormatValueLabel(value, max) {
 }
 //#endregion
 //#region src/CircularProgress/CircularProgress.vue
-const _hoisted_1$13 = ["data-size", "data-variant"];
-const _hoisted_2$12 = { class: "astryx-circular-progress__ring" };
-const _hoisted_3$11 = [
+const _hoisted_1$16 = ["data-size", "data-variant"];
+const _hoisted_2$14 = { class: "astryx-circular-progress__ring" };
+const _hoisted_3$12 = [
 	"aria-valuenow",
 	"aria-valuemin",
 	"aria-valuemax",
@@ -43,14 +45,14 @@ const _hoisted_3$11 = [
 	"height",
 	"viewBox"
 ];
-const _hoisted_4$10 = [
+const _hoisted_4$11 = [
 	"data-variant",
 	"cx",
 	"cy",
 	"r",
 	"stroke-width"
 ];
-const _hoisted_5$9 = [
+const _hoisted_5$10 = [
 	"data-variant",
 	"cx",
 	"cy",
@@ -138,7 +140,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"astryx-circular-progress__visually-hidden": !showLabel.value,
 					"astryx-circular-progress__label--disabled": showLabel.value && __props.isDisabled
 				}])
-			}, toDisplayString(__props.label), 3), createElementVNode("div", _hoisted_2$12, [(openBlock(), createElementBlock("svg", {
+			}, toDisplayString(__props.label), 3), createElementVNode("div", _hoisted_2$14, [(openBlock(), createElementBlock("svg", {
 				class: normalizeClass(["astryx-circular-progress__svg", { "astryx-circular-progress__svg--indeterminate": __props.isIndeterminate }]),
 				role: "progressbar",
 				"aria-labelledby": labelId,
@@ -156,7 +158,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				cy: geometry.value.center,
 				r: geometry.value.radius,
 				"stroke-width": geometry.value.strokeWidth
-			}, null, 8, _hoisted_4$10), __props.isIndeterminate ? (openBlock(), createElementBlock("circle", {
+			}, null, 8, _hoisted_4$11), __props.isIndeterminate ? (openBlock(), createElementBlock("circle", {
 				key: 0,
 				class: "astryx-circular-progress__fill astryx-circular-progress__fill--indeterminate",
 				"data-variant": fillVariant.value,
@@ -164,7 +166,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				cy: geometry.value.center,
 				r: geometry.value.radius,
 				"stroke-width": geometry.value.strokeWidth
-			}, null, 8, _hoisted_5$9)) : (openBlock(), createElementBlock("circle", {
+			}, null, 8, _hoisted_5$10)) : (openBlock(), createElementBlock("circle", {
 				key: 1,
 				class: "astryx-circular-progress__fill",
 				"data-variant": fillVariant.value,
@@ -174,10 +176,278 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"stroke-width": geometry.value.strokeWidth,
 				"stroke-dasharray": geometry.value.circumference,
 				"stroke-dashoffset": dashoffset.value
-			}, null, 8, _hoisted_6$8))], 10, _hoisted_3$11)), _ctx.$slots.default || hasCenterContent.value ? (openBlock(), createElementBlock("div", _hoisted_7$6, [renderSlot(_ctx.$slots, "default", {}, () => [hasCenterContent.value ? (openBlock(), createElementBlock("span", {
+			}, null, 8, _hoisted_6$8))], 10, _hoisted_3$12)), _ctx.$slots.default || hasCenterContent.value ? (openBlock(), createElementBlock("div", _hoisted_7$6, [renderSlot(_ctx.$slots, "default", {}, () => [hasCenterContent.value ? (openBlock(), createElementBlock("span", {
 				key: 0,
 				class: normalizeClass(["astryx-circular-progress__value", { "astryx-circular-progress__value--disabled": __props.isDisabled }])
-			}, toDisplayString(valueText.value), 3)) : createCommentVNode("v-if", true)])])) : createCommentVNode("v-if", true)])], 16, _hoisted_1$13);
+			}, toDisplayString(valueText.value), 3)) : createCommentVNode("v-if", true)])])) : createCommentVNode("v-if", true)])], 16, _hoisted_1$16);
+		};
+	}
+});
+//#endregion
+//#region src/CodeEditor/keyboard.ts
+/** 把 caret 放到元素文本的字符偏移处。 */
+function setCaretAtTextOffset(element, offset) {
+	const selection = element.ownerDocument.defaultView?.getSelection();
+	if (!selection) return;
+	const range = element.ownerDocument.createRange();
+	const walker = element.ownerDocument.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+	let node = walker.nextNode();
+	let remaining = Math.max(0, offset);
+	while (node) {
+		const length = node.textContent?.length ?? 0;
+		if (remaining <= length) {
+			range.setStart(node, remaining);
+			range.collapse(true);
+			selection.removeAllRanges();
+			selection.addRange(range);
+			return;
+		}
+		remaining -= length;
+		node = walker.nextNode();
+	}
+	range.selectNodeContents(element);
+	range.collapse(false);
+	selection.removeAllRanges();
+	selection.addRange(range);
+}
+/** 当前 caret 在元素纯文本里的偏移。 */
+function caretTextOffset(element) {
+	const selection = element.ownerDocument.defaultView?.getSelection();
+	if (!selection || selection.rangeCount === 0) return null;
+	const range = selection.getRangeAt(0);
+	const before = range.cloneRange();
+	before.selectNodeContents(element);
+	before.setEnd(range.startContainer, range.startOffset);
+	return before.toString().length;
+}
+/** 用一段文本替换当前选区，并把 caret 放在新文本后面。 */
+function insertAtCaret(element, text) {
+	const selection = element.ownerDocument.defaultView?.getSelection();
+	if (!selection || selection.rangeCount === 0) return;
+	const range = selection.getRangeAt(0);
+	range.deleteContents();
+	const node = element.ownerDocument.createTextNode(text);
+	range.insertNode(node);
+	range.setStartAfter(node);
+	range.setEndAfter(node);
+	selection.removeAllRanges();
+	selection.addRange(range);
+}
+/** 去掉当前行开头最多两个空格，返回新文本和 caret 应到的位置。 */
+function outdentCurrentLine(element) {
+	const offset = caretTextOffset(element);
+	if (offset == null) return null;
+	const value = element.textContent ?? "";
+	const lineStart = value.lastIndexOf("\n", offset - 1) + 1;
+	const line = value.slice(lineStart);
+	const removeCount = line.startsWith("  ") ? 2 : line.startsWith(" ") ? 1 : 0;
+	if (removeCount === 0) return null;
+	return {
+		value: `${value.slice(0, lineStart)}${value.slice(lineStart + removeCount)}`,
+		caret: offset - Math.min(removeCount, Math.max(0, offset - lineStart))
+	};
+}
+//#endregion
+//#region src/CodeEditor/CodeEditor.vue
+const _hoisted_1$15 = ["data-size", "data-language"];
+const _hoisted_2$13 = {
+	key: 0,
+	class: "astryx-code-editor__gutter",
+	"aria-hidden": "true"
+};
+const _hoisted_3$11 = { class: "astryx-code-editor__body" };
+const _hoisted_4$10 = {
+	key: 0,
+	class: "astryx-code-editor__placeholder",
+	"aria-hidden": "true"
+};
+const _hoisted_5$9 = [
+	"contenteditable",
+	"aria-label",
+	"aria-readonly",
+	"aria-describedby"
+];
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxCodeEditor",
+	__name: "CodeEditor",
+	props: {
+		value: {},
+		language: { default: "plaintext" },
+		label: {},
+		hasLineNumbers: { type: Boolean },
+		isReadOnly: { type: Boolean },
+		placeholder: {},
+		maxHeight: {},
+		size: { default: "md" },
+		tokenizer: {},
+		escapeHint: { default: "Press Escape then Tab to move focus out of the editor." }
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const editor = useTemplateRef("editor");
+		const focused = ref(false);
+		const composing = ref(false);
+		const tabMovesFocus = ref(false);
+		const hintId = `astryx-code-editor-${useId()}-escape`;
+		const lines = computed(() => props.value.split("\n"));
+		const showPlaceholder = computed(() => props.value === "" && Boolean(props.placeholder));
+		const containerStyle = computed(() => props.maxHeight == null ? void 0 : { maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight });
+		const AUTO_CLOSE_PAIRS = {
+			"(": ")",
+			"[": "]",
+			"{": "}",
+			"\"": "\"",
+			"'": "'",
+			"`": "`"
+		};
+		const MODE_NEUTRAL_KEYS = /* @__PURE__ */ new Set([
+			"Shift",
+			"Control",
+			"Alt",
+			"Meta",
+			"CapsLock"
+		]);
+		let highlightCleanup;
+		let highlightAbort;
+		function hasHighlightAPI() {
+			return typeof CSS !== "undefined" && "highlights" in CSS && typeof Highlight !== "undefined";
+		}
+		function paint(tokens, element) {
+			highlightCleanup?.();
+			highlightCleanup = tokens.length === 0 ? void 0 : applyHighlightRangesFlat(element, tokens);
+		}
+		function paintCurrent() {
+			const element = editor.value;
+			if (!element || !hasHighlightAPI()) return;
+			highlightAbort?.abort();
+			highlightCleanup?.();
+			highlightCleanup = void 0;
+			const custom = props.tokenizer;
+			if (props.value.length >= SYNC_TOKENIZE_THRESHOLD && custom == null) {
+				const controller = new AbortController();
+				highlightAbort = controller;
+				tokenizeAsync(props.value, props.language, controller.signal).then((tokens) => {
+					if (!controller.signal.aborted && editor.value === element) paint(tokens, element);
+				});
+				return;
+			}
+			paint((custom ?? tokenize)(props.value, props.language), element);
+		}
+		watch([
+			() => props.value,
+			() => props.language,
+			() => props.tokenizer
+		], () => {
+			nextTick(paintCurrent);
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		watch(() => props.value, (value) => {
+			const element = editor.value;
+			if (element && element.textContent !== value) element.textContent = value;
+		}, { flush: "post" });
+		onBeforeUnmount(() => {
+			highlightAbort?.abort();
+			highlightCleanup?.();
+		});
+		function commit() {
+			emit("change", editor.value?.textContent ?? "");
+		}
+		function onInput() {
+			if (!composing.value) commit();
+		}
+		function onKeydown(event) {
+			if (props.isReadOnly) return;
+			if (event.key === "Escape") {
+				if (!event.defaultPrevented) tabMovesFocus.value = true;
+				return;
+			}
+			const element = editor.value;
+			if (!element) return;
+			if (event.key === "Tab") {
+				if (tabMovesFocus.value) {
+					tabMovesFocus.value = false;
+					return;
+				}
+				event.preventDefault();
+				if (event.shiftKey) {
+					const result = outdentCurrentLine(element);
+					if (result == null) return;
+					element.textContent = result.value;
+					setCaretAtTextOffset(element, result.caret);
+				} else insertAtCaret(element, "  ");
+				commit();
+				return;
+			}
+			if (!MODE_NEUTRAL_KEYS.has(event.key)) tabMovesFocus.value = false;
+			if (event.key === "Enter") {
+				event.preventDefault();
+				const offset = caretTextOffset(element);
+				if (offset == null) return;
+				const before = (element.textContent ?? "").slice(0, offset);
+				insertAtCaret(element, `\n${before.slice(before.lastIndexOf("\n") + 1).match(/^\s*/)?.[0] ?? ""}`);
+				commit();
+				return;
+			}
+			const close = AUTO_CLOSE_PAIRS[event.key];
+			if (close) {
+				const selection = element.ownerDocument.defaultView?.getSelection();
+				if (!selection || selection.rangeCount === 0 || !selection.getRangeAt(0).collapsed) return;
+				event.preventDefault();
+				insertAtCaret(element, `${event.key}${close}`);
+				const offset = caretTextOffset(element);
+				if (offset != null) setCaretAtTextOffset(element, offset - close.length);
+				commit();
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["astryx-code-editor", { "is-focused": focused.value }]),
+				"data-size": __props.size,
+				"data-language": __props.language
+			}, [createElementVNode("div", {
+				class: "astryx-code-editor__container",
+				style: normalizeStyle(containerStyle.value)
+			}, [__props.hasLineNumbers ? (openBlock(), createElementBlock("div", _hoisted_2$13, [(openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (_, index) => {
+				return openBlock(), createElementBlock("div", { key: index }, toDisplayString(index + 1), 1);
+			}), 128))])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3$11, [
+				showPlaceholder.value ? (openBlock(), createElementBlock("div", _hoisted_4$10, toDisplayString(__props.placeholder), 1)) : createCommentVNode("v-if", true),
+				createElementVNode("code", {
+					ref_key: "editor",
+					ref: editor,
+					class: "astryx-code-editor__input",
+					contenteditable: __props.isReadOnly ? "false" : "plaintext-only",
+					tabindex: "0",
+					role: "textbox",
+					"aria-multiline": "true",
+					"aria-label": __props.label,
+					"aria-readonly": __props.isReadOnly || void 0,
+					"aria-describedby": __props.isReadOnly ? void 0 : hintId,
+					spellcheck: "false",
+					onInput,
+					onKeydown,
+					onFocus: _cache[0] || (_cache[0] = ($event) => focused.value = true),
+					onBlur: _cache[1] || (_cache[1] = ($event) => {
+						focused.value = false;
+						tabMovesFocus.value = false;
+					}),
+					onCompositionstart: _cache[2] || (_cache[2] = ($event) => composing.value = true),
+					onCompositionend: _cache[3] || (_cache[3] = ($event) => {
+						composing.value = false;
+						onInput();
+					})
+				}, toDisplayString(__props.value), 41, _hoisted_5$9),
+				!__props.isReadOnly ? (openBlock(), createBlock(unref(VisuallyHidden), {
+					key: 1,
+					id: hintId
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.escapeHint), 1)]),
+					_: 1
+				})) : createCommentVNode("v-if", true)
+			])], 4)], 10, _hoisted_1$15);
 		};
 	}
 });
@@ -409,13 +679,13 @@ var RenderVNode_default = defineComponent({
 });
 //#endregion
 //#region src/DiffViewer/DiffViewerTable.vue
-const _hoisted_1$12 = [
+const _hoisted_1$14 = [
 	"data-view-mode",
 	"data-has-line-numbers",
 	"data-change-indicator",
 	"data-change-background"
 ];
-const _hoisted_2$11 = {
+const _hoisted_2$12 = {
 	key: 0,
 	scope: "col",
 	class: "astryx-diff-viewer__column-header"
@@ -530,7 +800,7 @@ const _hoisted_47 = {
 	key: 0,
 	class: "astryx-diff-viewer__annotation-content"
 };
-const _sfc_main$13 = /*@__PURE__*/ defineComponent({
+const _sfc_main$17 = /*@__PURE__*/ defineComponent({
 	name: "AstryxDiffViewerTable",
 	__name: "DiffViewerTable",
 	props: {
@@ -610,7 +880,7 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 					_cache[3] || (_cache[3] = createElementVNode("col", null, null, -1))
 				]),
 				createElementVNode("thead", null, [createElementVNode("tr", null, [
-					__props.hasLineNumbers ? (openBlock(), createElementBlock("th", _hoisted_2$11, [createVNode(unref(VisuallyHidden), null, {
+					__props.hasLineNumbers ? (openBlock(), createElementBlock("th", _hoisted_2$12, [createVNode(unref(VisuallyHidden), null, {
 						default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("Original line number", -1)])]),
 						_: 1
 					})])) : createCommentVNode("v-if", true),
@@ -687,7 +957,7 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 						class: "astryx-diff-viewer__annotation"
 					}, [createElementVNode("div", _hoisted_18, [createVNode(unref(RenderVNode_default), { content: row.cell.note }, null, 8, ["content"])])], 8, _hoisted_17)])) : createCommentVNode("v-if", true)], 64))], 64);
 				}), 128))])
-			], 14, _hoisted_1$12)) : (openBlock(), createElementBlock("table", {
+			], 14, _hoisted_1$14)) : (openBlock(), createElementBlock("table", {
 				key: 1,
 				ref_key: "splitTable",
 				ref: splitTable,
@@ -1228,8 +1498,8 @@ function buildSplitRows(file, cells) {
 }
 //#endregion
 //#region src/DiffViewer/DiffViewer.vue
-const _hoisted_1$11 = ["data-view-mode"];
-const _hoisted_2$10 = ["aria-expanded"];
+const _hoisted_1$13 = ["data-view-mode"];
+const _hoisted_2$11 = ["aria-expanded"];
 const _hoisted_3$9 = { class: "astryx-diff-viewer__path" };
 const _hoisted_4$8 = {
 	key: 1,
@@ -1261,7 +1531,7 @@ const _hoisted_11$1 = {
 	class: "astryx-diff-viewer__message"
 };
 const _hoisted_12 = ["aria-label"];
-const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 	name: "AstryxDiffViewer",
 	inheritAttrs: false,
 	__name: "DiffViewer",
@@ -1421,7 +1691,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						icon: "chevronRight",
 						size: "xsm",
 						color: "inherit"
-					})], 2), createElementVNode("span", _hoisted_3$9, toDisplayString(displayPath.value), 1)], 8, _hoisted_2$10)) : displayPath.value != null ? (openBlock(), createElementBlock("span", _hoisted_4$8, toDisplayString(displayPath.value), 1)) : createCommentVNode("v-if", true),
+					})], 2), createElementVNode("span", _hoisted_3$9, toDisplayString(displayPath.value), 1)], 8, _hoisted_2$11)) : displayPath.value != null ? (openBlock(), createElementBlock("span", _hoisted_4$8, toDisplayString(displayPath.value), 1)) : createCommentVNode("v-if", true),
 					statusColor.value != null && statusLabel.value != null ? (openBlock(), createBlock(unref(Token), {
 						key: 2,
 						size: "sm",
@@ -1450,7 +1720,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				}), [createElementVNode("div", {
 					ref: unref(scroll).content,
 					class: "astryx-diff-viewer__content"
-				}, [createVNode(_sfc_main$13, {
+				}, [createVNode(_sfc_main$17, {
 					"view-mode": __props.viewMode,
 					"unified-rows": unifiedRows.value,
 					"split-rows": splitRows.value,
@@ -1473,7 +1743,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					"digits"
 				])], 512)], 16, _hoisted_12))], 64)) : createCommentVNode("v-if", true)], 8, _hoisted_9$3)]),
 				_: 3
-			}, 16))], 16, _hoisted_1$11);
+			}, 16))], 16, _hoisted_1$13);
 		};
 	}
 });
@@ -1771,8 +2041,8 @@ function parseUnifiedDiff(patch) {
 }
 //#endregion
 //#region src/InfoTip/InfoTip.vue
-const _hoisted_1$10 = ["aria-label"];
-const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+const _hoisted_1$12 = ["aria-label"];
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 	name: "AstryxInfoTip",
 	__name: "InfoTip",
 	props: {
@@ -1793,7 +2063,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 				}, [createVNode(unref(Icon), {
 					icon: "info",
 					size: __props.size
-				}, null, 8, ["size"])], 8, _hoisted_1$10)]),
+				}, null, 8, ["size"])], 8, _hoisted_1$12)]),
 				_: 2
 			}, [_ctx.$slots.content ? {
 				name: "content",
@@ -1882,7 +2152,7 @@ var ListInputCell_default = defineComponent({
 });
 //#endregion
 //#region src/ListInput/ListInputRow.vue
-const _hoisted_1$9 = [
+const _hoisted_1$11 = [
 	"data-list-input-motion-key",
 	"data-list-input-drop-target",
 	"aria-describedby",
@@ -1890,7 +2160,7 @@ const _hoisted_1$9 = [
 	"aria-posinset",
 	"aria-setsize"
 ];
-const _hoisted_2$9 = ["data-list-input-reorder-source", "data-list-input-row"];
+const _hoisted_2$10 = ["data-list-input-reorder-source", "data-list-input-row"];
 const _hoisted_3$8 = ["data-list-input-cell"];
 const _hoisted_4$7 = ["data-list-input-column-label", "data-list-input-repeated"];
 const _hoisted_5$6 = { class: "astryx-list-input__cell-content" };
@@ -1899,7 +2169,7 @@ const _hoisted_7$3 = {
 	key: 0,
 	class: "astryx-list-input__control-cell astryx-list-input__control-cell--reorder"
 };
-const _sfc_main$12 = /*@__PURE__*/ defineComponent({
+const _sfc_main$16 = /*@__PURE__*/ defineComponent({
 	name: "AstryxListInputRow",
 	__name: "ListInputRow",
 	props: {
@@ -2033,7 +2303,7 @@ const _sfc_main$12 = /*@__PURE__*/ defineComponent({
 					"type",
 					"message"
 				])) : createCommentVNode("v-if", true)
-			], 10, _hoisted_2$9)], 8, _hoisted_1$9);
+			], 10, _hoisted_2$10)], 8, _hoisted_1$11);
 		};
 	}
 });
@@ -2323,14 +2593,14 @@ function useListReorder(options) {
 }
 //#endregion
 //#region src/ListInput/ListInput.vue
-const _hoisted_1$8 = [
+const _hoisted_1$10 = [
 	"aria-describedby",
 	"aria-disabled",
 	"aria-busy",
 	"data-reorderable",
 	"data-state"
 ];
-const _hoisted_2$8 = ["aria-describedby"];
+const _hoisted_2$9 = ["aria-describedby"];
 const _hoisted_3$7 = {
 	key: 0,
 	"data-list-input-motion-key": "state:empty",
@@ -2345,7 +2615,7 @@ const _hoisted_5$5 = {
 	class: "astryx-list-input__action-content"
 };
 const focusableFieldSelector = "[data-list-input-cell] input, [data-list-input-cell] select, [data-list-input-cell] textarea, [data-list-input-cell] button, [data-list-input-cell] [tabindex]:not([tabindex=\"-1\"])";
-const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 	name: "AstryxListInput",
 	inheritAttrs: false,
 	__name: "ListInput",
@@ -2623,7 +2893,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 						description: unref(t)("@astryx.listInput.emptyDescription", { itemName: __props.itemName }),
 						"is-compact": ""
 					}, null, 8, ["title", "description"])])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(reorder).displayValue.value, (item, index) => {
-						return openBlock(), createBlock(_sfc_main$12, {
+						return openBlock(), createBlock(_sfc_main$16, {
 							key: itemKeyOf(item),
 							item,
 							index,
@@ -2665,7 +2935,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 							"item-status-id",
 							"handlers"
 						]);
-					}), 128))], 8, _hoisted_2$8),
+					}), 128))], 8, _hoisted_2$9),
 					createElementVNode("div", _hoisted_4$6, [createElementVNode("div", _hoisted_5$5, [createVNode(unref(Button), {
 						ref_key: "addButtonRef",
 						ref: addButtonRef,
@@ -2689,7 +2959,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 						default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("@astryx.listInput.reorderInstructions")), 1)]),
 						_: 1
 					})) : createCommentVNode("v-if", true)
-				], 8, _hoisted_1$8), (openBlock(), createBlock(Teleport, { to: "body" }, [unref(reorder).previewStyle.value != null ? (openBlock(), createElementBlock("div", {
+				], 8, _hoisted_1$10), (openBlock(), createBlock(Teleport, { to: "body" }, [unref(reorder).previewStyle.value != null ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					ref_key: "previewHost",
 					ref: previewHost,
@@ -2714,8 +2984,8 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 });
 //#endregion
 //#region src/LogStream/LogStreamRow.vue
-const _hoisted_1$7 = ["data-level", "data-cols"];
-const _hoisted_2$7 = {
+const _hoisted_1$9 = ["data-level", "data-cols"];
+const _hoisted_2$8 = {
 	key: 0,
 	class: "astryx-log-stream__time"
 };
@@ -2738,7 +3008,7 @@ const _hoisted_11 = {
 	key: 0,
 	class: "astryx-log-stream__detail"
 };
-const _sfc_main$11 = /*@__PURE__*/ defineComponent({
+const _sfc_main$15 = /*@__PURE__*/ defineComponent({
 	name: "AstryxLogStreamRow",
 	__name: "LogStreamRow",
 	props: {
@@ -2764,7 +3034,7 @@ const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 				"data-level": __props.entry.level,
 				"data-cols": cols.value
 			}, [
-				__props.hasTimestamps ? (openBlock(), createElementBlock("span", _hoisted_2$7, toDisplayString(__props.entry.timestamp), 1)) : createCommentVNode("v-if", true),
+				__props.hasTimestamps ? (openBlock(), createElementBlock("span", _hoisted_2$8, toDisplayString(__props.entry.timestamp), 1)) : createCommentVNode("v-if", true),
 				createElementVNode("span", _hoisted_3$6, toDisplayString(__props.entry.level), 1),
 				__props.hasSource ? (openBlock(), createElementBlock("span", {
 					key: 1,
@@ -2772,7 +3042,7 @@ const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 					title: __props.entry.source
 				}, toDisplayString(__props.entry.source), 9, _hoisted_4$5)) : createCommentVNode("v-if", true),
 				createElementVNode("span", _hoisted_5$4, toDisplayString(__props.entry.message), 1)
-			], 8, _hoisted_1$7)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("button", {
+			], 8, _hoisted_1$9)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("button", {
 				type: "button",
 				class: "astryx-log-stream__row astryx-log-stream__row--button",
 				"data-level": __props.entry.level,
@@ -2840,9 +3110,9 @@ function useLogFollow(options) {
 }
 //#endregion
 //#region src/LogStream/LogStream.vue
-const _hoisted_1$6 = ["data-variant"];
-const _hoisted_2$6 = ["aria-label", "aria-live"];
-const _sfc_main$4 = /*@__PURE__*/ defineComponent({
+const _hoisted_1$8 = ["data-variant"];
+const _hoisted_2$7 = ["aria-label", "aria-live"];
+const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 	name: "AstryxLogStream",
 	inheritAttrs: false,
 	__name: "LogStream",
@@ -2908,7 +3178,7 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 					style: normalizeStyle(scrollerStyle.value),
 					onScrollPassive: _cache[0] || (_cache[0] = (...args) => unref(handleScroll) && unref(handleScroll)(...args))
 				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.entries, (entry) => {
-					return renderSlot(_ctx.$slots, "entry", { entry }, () => [createVNode(_sfc_main$11, {
+					return renderSlot(_ctx.$slots, "entry", { entry }, () => [createVNode(_sfc_main$15, {
 						entry,
 						"has-timestamps": __props.hasTimestamps,
 						"has-source": hasSource.value,
@@ -2925,14 +3195,14 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 						"is-expanded",
 						"onToggle"
 					])], void 0, entry.id);
-				}), 128))], 44, _hoisted_2$6),
+				}), 128))], 44, _hoisted_2$7),
 				!following.value && !unref(isAtBottom) && __props.entries.length > 0 ? (openBlock(), createElementBlock("button", {
 					key: 0,
 					type: "button",
 					class: "astryx-log-stream__jump",
 					onClick: _cache[1] || (_cache[1] = (...args) => unref(jumpToLatest) && unref(jumpToLatest)(...args))
 				}, " Jump to latest ↓ ")) : createCommentVNode("v-if", true)
-			], 16, _hoisted_1$6);
+			], 16, _hoisted_1$8);
 		};
 	}
 });
@@ -3040,12 +3310,12 @@ function useSheetSearch(options) {
 }
 //#endregion
 //#region src/MobileTokenizer/MobileTokenizer.vue
-const _hoisted_1$5 = [
+const _hoisted_1$7 = [
 	"aria-expanded",
 	"aria-label",
 	"aria-disabled"
 ];
-const _hoisted_2$5 = {
+const _hoisted_2$6 = {
 	key: 1,
 	class: "astryx-mobile-tokenizer__trigger-placeholder"
 };
@@ -3074,7 +3344,7 @@ const _hoisted_10$1 = {
 	class: "astryx-mobile-tokenizer__footer"
 };
 const CREATABLE_ID_PREFIX = "__xds_create__";
-const _sfc_main$5 = /*@__PURE__*/ defineComponent({
+const _sfc_main$6 = /*@__PURE__*/ defineComponent({
 	name: "AstryxMobileTokenizer",
 	inheritAttrs: false,
 	__name: "MobileTokenizer",
@@ -3240,7 +3510,7 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 						label: item.label,
 						disabled: __props.isDisabled
 					}, null, 8, ["label", "disabled"]);
-				}), 128)) : (openBlock(), createElementBlock("span", _hoisted_2$5, toDisplayString(__props.placeholder ?? ""), 1))], 8, _hoisted_1$5), !__props.isDisabled ? (openBlock(), createBlock(unref(BottomSheet), {
+				}), 128)) : (openBlock(), createElementBlock("span", _hoisted_2$6, toDisplayString(__props.placeholder ?? ""), 1))], 8, _hoisted_1$7), !__props.isDisabled ? (openBlock(), createBlock(unref(BottomSheet), {
 					key: 0,
 					"is-open": isOpen.value,
 					label: __props.label,
@@ -3370,8 +3640,8 @@ const DELTA_GLYPH_PATHS = {
 };
 //#endregion
 //#region src/Stat/Stat.vue
-const _hoisted_1$4 = ["data-size"];
-const _hoisted_2$4 = { class: "astryx-stat__label" };
+const _hoisted_1$6 = ["data-size"];
+const _hoisted_2$5 = { class: "astryx-stat__label" };
 const _hoisted_3$4 = { class: "astryx-stat__value-row" };
 const _hoisted_4$3 = { class: "astryx-stat__value" };
 const _hoisted_5$2 = ["data-sentiment"];
@@ -3397,7 +3667,7 @@ const _hoisted_10 = {
 	key: 1,
 	class: "astryx-stat__media"
 };
-const _sfc_main$7 = /*@__PURE__*/ defineComponent({
+const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 	name: "AstryxStat",
 	inheritAttrs: false,
 	__name: "Stat",
@@ -3420,7 +3690,7 @@ const _sfc_main$7 = /*@__PURE__*/ defineComponent({
 				class: ["astryx-stat", unref(attrs).class],
 				"data-size": __props.size
 			}), [
-				createElementVNode("span", _hoisted_2$4, toDisplayString(__props.label), 1),
+				createElementVNode("span", _hoisted_2$5, toDisplayString(__props.label), 1),
 				createElementVNode("span", _hoisted_3$4, [createElementVNode("span", _hoisted_4$3, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.value), 1)])]), __props.delta != null && sentiment.value != null ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					class: "astryx-stat__delta",
@@ -3432,7 +3702,7 @@ const _sfc_main$7 = /*@__PURE__*/ defineComponent({
 				], 8, _hoisted_5$2)) : createCommentVNode("v-if", true)]),
 				__props.description != null ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(__props.description), 1)) : createCommentVNode("v-if", true),
 				_ctx.$slots.media ? (openBlock(), createElementBlock("div", _hoisted_10, [renderSlot(_ctx.$slots, "media")])) : createCommentVNode("v-if", true)
-			], 16, _hoisted_1$4);
+			], 16, _hoisted_1$6);
 		};
 	}
 });
@@ -4234,13 +4504,13 @@ function applyPersonality(d, personality) {
 }
 //#endregion
 //#region src/SVGIcon/SVGIcon.vue
-const _hoisted_1$3 = [
+const _hoisted_1$5 = [
 	"viewBox",
 	"data-variation",
 	"data-size",
 	"data-color"
 ];
-const _hoisted_2$3 = { key: 0 };
+const _hoisted_2$4 = { key: 0 };
 const _hoisted_3$3 = ["mask"];
 const _hoisted_4$2 = {
 	key: 2,
@@ -4254,7 +4524,7 @@ const _hoisted_6$1 = {
 	key: 1,
 	class: "astryx-svg-icon__layer astryx-svg-icon__layer--secondary-stroke"
 };
-const _sfc_main$6 = /*@__PURE__*/ defineComponent({
+const _sfc_main$7 = /*@__PURE__*/ defineComponent({
 	name: "AstryxSvgIcon",
 	inheritAttrs: false,
 	__name: "SVGIcon",
@@ -4318,7 +4588,7 @@ const _sfc_main$6 = /*@__PURE__*/ defineComponent({
 				"data-color": __props.color
 			}, mergedAttrs.value, { style: svgStyle.value }), [
 				createCommentVNode(" 遮罩：把次层的填充形状从主层里挖出带间隙的洞。 "),
-				useMask.value ? (openBlock(), createElementBlock("defs", _hoisted_2$3, [createElementVNode("mask", { id: maskId }, [_cache[0] || (_cache[0] = createElementVNode("rect", {
+				useMask.value ? (openBlock(), createElementBlock("defs", _hoisted_2$4, [createElementVNode("mask", { id: maskId }, [_cache[0] || (_cache[0] = createElementVNode("rect", {
 					width: "24",
 					height: "24",
 					fill: "white"
@@ -4348,7 +4618,7 @@ const _sfc_main$6 = /*@__PURE__*/ defineComponent({
 				}), 128))])) : createCommentVNode("v-if", true), secondary.value.stroke.length > 0 ? (openBlock(), createElementBlock("g", _hoisted_6$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(secondary.value.stroke, (shape, index) => {
 					return openBlock(), createBlock(resolveDynamicComponent(shape.type), mergeProps({ key: `secondary-stroke-${index}` }, { ref_for: true }, shape.attrs), null, 16);
 				}), 128))])) : createCommentVNode("v-if", true)], 64)) : createCommentVNode("v-if", true)
-			], 16, _hoisted_1$3);
+			], 16, _hoisted_1$5);
 		};
 	}
 });
@@ -4486,6 +4756,280 @@ const xifExamples = [
 	xifBellOverride
 ];
 //#endregion
+//#region src/Tour/context.ts
+const TOUR_CONTEXT_KEY = Symbol("AstryxTour");
+//#endregion
+//#region src/Tour/Tour.vue
+const _sfc_main$9 = /*@__PURE__*/ defineComponent({
+	name: "AstryxTour",
+	__name: "Tour",
+	props: {
+		isActive: { type: Boolean },
+		hasBackdrop: {
+			type: Boolean,
+			default: false
+		},
+		isStepCountShown: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["dismiss"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const stepIds = ref([]);
+		const activeStepIndex = ref(0);
+		const stepCount = computed(() => stepIds.value.length);
+		const activeStepId = computed(() => props.isActive ? stepIds.value[activeStepIndex.value] ?? null : null);
+		function registerStep(id) {
+			if (!stepIds.value.includes(id)) stepIds.value.push(id);
+			return () => {
+				const index = stepIds.value.indexOf(id);
+				if (index >= 0) stepIds.value.splice(index, 1);
+			};
+		}
+		function next() {
+			if (activeStepIndex.value < stepCount.value - 1) activeStepIndex.value += 1;
+			else emit("dismiss", "complete");
+		}
+		function previous() {
+			if (activeStepIndex.value > 0) activeStepIndex.value -= 1;
+		}
+		function dismiss(source) {
+			emit("dismiss", source);
+		}
+		watch(() => props.isActive, (active) => {
+			if (!active) activeStepIndex.value = 0;
+		}, { flush: "sync" });
+		watch(stepCount, (count) => {
+			if (activeStepIndex.value >= count) activeStepIndex.value = Math.max(0, count - 1);
+		});
+		provide(TOUR_CONTEXT_KEY, {
+			registerStep,
+			activeStepId,
+			activeStepIndex: computed(() => activeStepIndex.value),
+			stepCount,
+			isStepCountShown: computed(() => props.isStepCountShown),
+			hasBackdrop: computed(() => props.hasBackdrop),
+			onNext: next,
+			onPrevious: previous,
+			onDismiss: dismiss
+		});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+//#endregion
+//#region src/Tour/TourHighlight.vue
+const _hoisted_1$4 = ["data-testid"];
+const _sfc_main$14 = /*@__PURE__*/ defineComponent({
+	__name: "TourHighlight",
+	props: {
+		rect: {},
+		hasBackdrop: { type: Boolean }
+	},
+	emits: ["backdropClick"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		function onBackdropPointerDown(event) {
+			if (!props.hasBackdrop) return;
+			event.preventDefault();
+			event.stopPropagation();
+			emit("backdropClick");
+		}
+		const highlightStyle = computed(() => props.rect == null ? void 0 : {
+			top: `${props.rect.top - 4}px`,
+			left: `${props.rect.left - 4}px`,
+			width: `${props.rect.width + 8}px`,
+			height: `${props.rect.height + 8}px`,
+			borderRadius: props.rect.radius
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["astryx-tour-highlight-root", { "is-interactive": __props.hasBackdrop }]),
+				"data-testid": __props.hasBackdrop ? "tour-backdrop" : void 0,
+				"aria-hidden": "true",
+				onPointerdown: onBackdropPointerDown
+			}, [createElementVNode("div", {
+				class: normalizeClass(["astryx-tour-highlight", {
+					"has-backdrop": __props.hasBackdrop,
+					"is-hidden": __props.rect == null
+				}]),
+				style: normalizeStyle(highlightStyle.value),
+				"data-testid": "tour-highlight"
+			}, null, 6)], 42, _hoisted_1$4);
+		};
+	}
+});
+//#endregion
+//#region src/Tour/TourStep.vue
+const _hoisted_1$3 = ["data-testid"];
+const _hoisted_2$3 = { key: 1 };
+const _sfc_main$10 = /*@__PURE__*/ defineComponent({
+	name: "AstryxTourStep",
+	__name: "TourStep",
+	props: {
+		targetRef: {},
+		heading: {},
+		placement: { default: "below" },
+		alignment: { default: "start" },
+		"data-testid": {}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const tour = inject(TOUR_CONTEXT_KEY, null);
+		const id = `astryx-tour-step-${useId()}`;
+		const isActiveStep = computed(() => tour?.activeStepId.value === id);
+		const activeStepIndex = computed(() => tour?.activeStepIndex.value ?? 0);
+		const stepCount = computed(() => tour?.stepCount.value ?? 0);
+		const isFirstStep = computed(() => activeStepIndex.value <= 0);
+		const isLastStep = computed(() => stepCount.value > 0 && activeStepIndex.value === stepCount.value - 1);
+		const target = computed(() => toValue(props.targetRef));
+		const rect = shallowRef(null);
+		let unregister;
+		function measure() {
+			const element = target.value;
+			if (element == null || !isActiveStep.value) {
+				rect.value = null;
+				return;
+			}
+			const box = element.getBoundingClientRect();
+			rect.value = {
+				top: box.top,
+				left: box.left,
+				width: box.width,
+				height: box.height,
+				radius: getComputedStyle(element).borderRadius || "0px"
+			};
+		}
+		function stopMeasuring() {
+			window.removeEventListener("scroll", measure, true);
+			window.removeEventListener("resize", measure);
+		}
+		watch([isActiveStep, target], async ([active]) => {
+			stopMeasuring();
+			if (!active || tour == null) {
+				rect.value = null;
+				return;
+			}
+			await nextTick();
+			measure();
+			window.addEventListener("scroll", measure, true);
+			window.addEventListener("resize", measure);
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		onMounted(() => {
+			unregister = tour?.registerStep(id);
+		});
+		onBeforeUnmount(() => {
+			stopMeasuring();
+			unregister?.();
+		});
+		function onOpenChange(open) {
+			if (!open) tour?.onDismiss("close");
+		}
+		return (_ctx, _cache) => {
+			return unref(tour) && isActiveStep.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(_sfc_main$14, {
+				rect: rect.value,
+				"has-backdrop": unref(tour).hasBackdrop.value,
+				onBackdropClick: _cache[0] || (_cache[0] = ($event) => unref(tour).onDismiss("backdrop"))
+			}, null, 8, ["rect", "has-backdrop"]), createVNode(unref(Popover), {
+				anchor: target.value,
+				"is-open": "",
+				placement: __props.placement,
+				alignment: __props.alignment,
+				width: "fit-content",
+				label: __props.heading,
+				"has-light-dismiss": !unref(tour).hasBackdrop.value,
+				"close-button-label": "Close tour",
+				onOpenChange
+			}, {
+				content: withCtx(() => [createElementVNode("div", {
+					class: "astryx-tour-step",
+					"data-testid": props["data-testid"]
+				}, [createVNode(unref(VStack), { gap: 1 }, {
+					default: withCtx(() => [createVNode(unref(Heading), { level: 4 }, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.heading), 1)]),
+						_: 1
+					}), unref(slots).default ? (openBlock(), createBlock(unref(Text), {
+						key: 0,
+						type: "body"
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+						_: 3
+					})) : createCommentVNode("v-if", true)]),
+					_: 3
+				}), createVNode(unref(HStack), {
+					class: "astryx-tour-step__footer",
+					gap: 2,
+					"h-align": "between"
+				}, {
+					default: withCtx(() => [unref(tour).isStepCountShown.value && stepCount.value > 0 ? (openBlock(), createBlock(unref(Text), {
+						key: 0,
+						type: "supporting",
+						color: "secondary"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(activeStepIndex.value + 1) + " of " + toDisplayString(stepCount.value), 1)]),
+						_: 1
+					})) : (openBlock(), createElementBlock("span", _hoisted_2$3)), createVNode(unref(HStack), { gap: 2 }, {
+						default: withCtx(() => [!isFirstStep.value ? (openBlock(), createBlock(unref(Button), {
+							key: 0,
+							variant: "ghost",
+							size: "sm",
+							label: "Back",
+							onClick: unref(tour).onPrevious
+						}, null, 8, ["onClick"])) : createCommentVNode("v-if", true), createVNode(unref(Button), {
+							variant: "primary",
+							size: "sm",
+							label: isLastStep.value ? "Done" : "Next",
+							onClick: unref(tour).onNext
+						}, null, 8, ["label", "onClick"])]),
+						_: 1
+					})]),
+					_: 1
+				})], 8, _hoisted_1$3)]),
+				_: 3
+			}, 8, [
+				"anchor",
+				"placement",
+				"alignment",
+				"label",
+				"has-light-dismiss"
+			])], 64)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region src/Tour/useTour.ts
+/** 读取最近的 Tour。没有控制器时返回 null，由调用方决定是否跳过自定义 UI。 */
+function useTour() {
+	const tour = inject(TOUR_CONTEXT_KEY, null);
+	if (tour == null) return null;
+	return {
+		get activeStepIndex() {
+			return tour.activeStepIndex.value;
+		},
+		get stepCount() {
+			return tour.stepCount.value;
+		},
+		get isFirstStep() {
+			return tour.activeStepIndex.value <= 0;
+		},
+		get isLastStep() {
+			return tour.stepCount.value > 0 && tour.activeStepIndex.value === tour.stepCount.value - 1;
+		},
+		next: tour.onNext,
+		previous: tour.onPrevious,
+		dismiss: tour.onDismiss
+	};
+}
+//#endregion
 //#region src/TransferList/transferItems.ts
 /** 把 `fromIndex` 那一项挪到 `toIndex`，返回新数组。 */
 function moveItem(value, fromIndex, toIndex) {
@@ -4558,7 +5102,7 @@ const _hoisted_5 = {
 	class: "astryx-transfer-list-panel__group-heading"
 };
 const _hoisted_6 = ["data-transfer-list-empty"];
-const _sfc_main$10 = /*@__PURE__*/ defineComponent({
+const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTransferListPanel",
 	__name: "TransferListPanel",
 	props: {
@@ -5030,7 +5574,7 @@ const _hoisted_3$1 = {
 	class: "astryx-transfer-list__controls"
 };
 const _hoisted_4 = { class: "astryx-transfer-list-collection" };
-const _sfc_main$8 = /*@__PURE__*/ defineComponent({
+const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTransferList",
 	inheritAttrs: false,
 	__name: "TransferList",
@@ -5304,7 +5848,7 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 					default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("@astryx.transferList.reorderInstructions")), 1)]),
 					_: 1
 				}),
-				createElementVNode("div", _hoisted_4, [createVNode(_sfc_main$10, {
+				createElementVNode("div", _hoisted_4, [createVNode(_sfc_main$13, {
 					side: "selected",
 					"heading-id": selectedHeadingId,
 					label: selectedLabel.value,
@@ -5340,7 +5884,7 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 					"dragging-value",
 					"grabbed-value",
 					"drop-target"
-				]), createVNode(_sfc_main$10, {
+				]), createVNode(_sfc_main$13, {
 					side: "available",
 					"heading-id": availableHeadingId,
 					label: availableLabel.value,
@@ -5395,7 +5939,7 @@ const _hoisted_3 = {
 	class: "astryx-transfer-list-selector__footer"
 };
 const DEFAULT_SELECTOR_WIDTH = "min(41rem, calc(100vw - 32px))";
-const _sfc_main$9 = /*@__PURE__*/ defineComponent({
+const _sfc_main$12 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTransferListSelector",
 	__name: "TransferListSelector",
 	props: {
@@ -5532,7 +6076,7 @@ const _sfc_main$9 = /*@__PURE__*/ defineComponent({
 				}, [createElementVNode("fieldset", {
 					class: "astryx-transfer-list-selector__fieldset",
 					disabled: __props.isDisabled
-				}, [createVNode(_sfc_main$8, {
+				}, [createVNode(_sfc_main$11, {
 					label: __props.label,
 					"is-label-hidden": "",
 					options: __props.options,
@@ -5611,4 +6155,4 @@ const _sfc_main$9 = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
-export { _sfc_main as CircularProgress, _sfc_main$1 as DiffViewer, _sfc_main$2 as InfoTip, _sfc_main$3 as ListInput, _sfc_main$4 as LogStream, _sfc_main$5 as MobileTokenizer, _sfc_main$6 as SVGIcon, _sfc_main$7 as Stat, _sfc_main$8 as TransferList, _sfc_main$9 as TransferListSelector, addCurvature, adjustTension, applyPersonality, bellIcon, calendarIcon, checkIcon, createDiffFile, eyeIcon, folderIcon, heartIcon, homeIcon, lockIcon, mailIcon, menuIcon, parseUnifiedDiff, roundCorners, searchIcon, settingsIcon, shieldIcon, starIcon, starterIcons, xIcon, xifBell, xifBellOverride, xifCheck, xifExamples, xifFile, xifHome, xifShield, xifStar };
+export { _sfc_main as CircularProgress, _sfc_main$1 as CodeEditor, _sfc_main$2 as DiffViewer, _sfc_main$3 as InfoTip, _sfc_main$4 as ListInput, _sfc_main$5 as LogStream, _sfc_main$6 as MobileTokenizer, _sfc_main$7 as SVGIcon, _sfc_main$8 as Stat, _sfc_main$9 as Tour, _sfc_main$10 as TourStep, _sfc_main$11 as TransferList, _sfc_main$12 as TransferListSelector, addCurvature, adjustTension, applyPersonality, bellIcon, calendarIcon, checkIcon, createDiffFile, eyeIcon, folderIcon, heartIcon, homeIcon, lockIcon, mailIcon, menuIcon, parseUnifiedDiff, roundCorners, searchIcon, settingsIcon, shieldIcon, starIcon, starterIcons, useTour, xIcon, xifBell, xifBellOverride, xifCheck, xifExamples, xifFile, xifHome, xifShield, xifStar };