@astryx-vue/lab 0.3.1 → 0.4.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { VNodeChild } from "vue";
-import { FieldStatusInput, IconSize, PopoverPlacement, SyntaxThemeDefinition } from "@astryx-vue/core";
+import { MaybeRef, VNodeChild } from "vue";
+import { FieldStatusInput, IconSize, PopoverAlignment, PopoverPlacement, SyntaxThemeDefinition } from "@astryx-vue/core";
 //#region src/CircularProgress/types.d.ts
 /** Variants a theme can extend through declaration merging in TypeScript. */
 interface CircularProgressVariantMap {
@@ -63,10 +63,10 @@ interface CircularProgressProps {
 //#endregion
 //#region src/CircularProgress/CircularProgress.vue.d.ts
 declare var __VLS_1$1: {};
-type __VLS_Slots$4 = {} & {
+type __VLS_Slots$6 = {} & {
   default?: (props: typeof __VLS_1$1) => any;
 };
-declare const __VLS_base$4: import("vue").DefineComponent<CircularProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CircularProgressProps> & Readonly<{}>, {
+declare const __VLS_base$6: import("vue").DefineComponent<CircularProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CircularProgressProps> & Readonly<{}>, {
   value: number;
   size: CircularProgressSize;
   max: number;
@@ -77,9 +77,9 @@ declare const __VLS_base$4: import("vue").DefineComponent<CircularProgressProps,
   isIndeterminate: boolean;
   isDisabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export$9: __VLS_WithSlots$4<typeof __VLS_base$4, __VLS_Slots$4>;
-declare const _default: typeof __VLS_export$9;
-type __VLS_WithSlots$4<T, S> = T & {
+declare const __VLS_export$11: __VLS_WithSlots$6<typeof __VLS_base$6, __VLS_Slots$6>;
+declare const _default: typeof __VLS_export$11;
+type __VLS_WithSlots$6<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -288,8 +288,8 @@ interface DiffViewerSlots {
 }
 //#endregion
 //#region src/DiffViewer/DiffViewer.vue.d.ts
-type __VLS_Slots$3 = DiffViewerSlots;
-declare const __VLS_base$3: import("vue").DefineComponent<DiffViewerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_Slots$5 = DiffViewerSlots;
+declare const __VLS_base$5: import("vue").DefineComponent<DiffViewerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
   collapsedChange: (isCollapsed: boolean) => any;
   "update:isCollapsed": (isCollapsed: boolean) => any;
   lineNumberClick: (ref: DiffViewerLineRef, event: MouseEvent) => any;
@@ -313,9 +313,9 @@ declare const __VLS_base$3: import("vue").DefineComponent<DiffViewerProps, {}, {
   syntaxTheme: import("@astryx-vue/core").SyntaxThemeDefinition;
   renderLineAnnotation: (ref: DiffViewerLineRef) => import("vue").VNodeChild;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export$8: __VLS_WithSlots$3<typeof __VLS_base$3, __VLS_Slots$3>;
-declare const _default$1: typeof __VLS_export$8;
-type __VLS_WithSlots$3<T, S> = T & {
+declare const __VLS_export$10: __VLS_WithSlots$5<typeof __VLS_base$5, __VLS_Slots$5>;
+declare const _default$1: typeof __VLS_export$10;
+type __VLS_WithSlots$5<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -390,17 +390,17 @@ interface InfoTipProps {
 //#endregion
 //#region src/InfoTip/InfoTip.vue.d.ts
 declare var __VLS_13$1: {};
-type __VLS_Slots$2 = {} & {
+type __VLS_Slots$4 = {} & {
   content?: (props: typeof __VLS_13$1) => any;
 };
-declare const __VLS_base$2: import("vue").DefineComponent<InfoTipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InfoTipProps> & Readonly<{}>, {
+declare const __VLS_base$4: import("vue").DefineComponent<InfoTipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InfoTipProps> & Readonly<{}>, {
   label: string;
   size: import("@astryx-vue/core").IconSize;
   content: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export$7: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
-declare const _default$2: typeof __VLS_export$7;
-type __VLS_WithSlots$2<T, S> = T & {
+declare const __VLS_export$9: __VLS_WithSlots$4<typeof __VLS_base$4, __VLS_Slots$4>;
+declare const _default$2: typeof __VLS_export$9;
+type __VLS_WithSlots$4<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -515,7 +515,7 @@ interface ListInputEmits<T> {
 }
 //#endregion
 //#region src/ListInput/ListInput.vue.d.ts
-declare const __VLS_export$6: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$3<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const __VLS_export$8: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$3<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: import("vue").PublicProps & __VLS_PrettifyLocal$3<ListInputProps<T> & {
     "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
     onChange?: ((value: T[], change: ListInputChange<T>) => any) | undefined;
@@ -529,7 +529,7 @@ declare const __VLS_export$6: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_
 }>) => import("vue").VNode & {
   __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const _default$3: typeof __VLS_export$6;
+declare const _default$3: typeof __VLS_export$8;
 type __VLS_PrettifyLocal$3<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
 //#endregion
 //#region src/LogStream/types.d.ts
@@ -597,12 +597,12 @@ declare var __VLS_2: {
 }, __VLS_13: {
   entry: LogEntry;
 };
-type __VLS_Slots$1 = {} & {
+type __VLS_Slots$3 = {} & {
   entry?: (props: typeof __VLS_2) => any;
 } & {
   detail?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base$1: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base$3: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
   "update:isFollowing": (value: boolean) => any;
   followChange: (following: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
@@ -614,9 +614,9 @@ declare const __VLS_base$1: import("vue").DefineComponent<__VLS_PublicProps, {},
   maxHeight: string | number;
   hasTimestamps: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export$5: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
-declare const _default$4: typeof __VLS_export$5;
-type __VLS_WithSlots$1<T, S> = T & {
+declare const __VLS_export$7: __VLS_WithSlots$3<typeof __VLS_base$3, __VLS_Slots$3>;
+declare const _default$4: typeof __VLS_export$7;
+type __VLS_WithSlots$3<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -689,7 +689,7 @@ interface MobileTokenizerEmits<T extends SearchableItem = SearchableItem> {
 }
 //#endregion
 //#region src/MobileTokenizer/MobileTokenizer.vue.d.ts
-declare const __VLS_export$4: <T extends SearchableItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$2<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const __VLS_export$6: <T extends SearchableItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$2<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: import("vue").PublicProps & __VLS_PrettifyLocal$2<MobileTokenizerProps<T> & {
     "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
     onChange?: ((value: T[], change: MobileTokenizerChange<T>) => any) | undefined;
@@ -706,7 +706,7 @@ declare const __VLS_export$4: <T extends SearchableItem>(__VLS_props: NonNullabl
 }>) => import("vue").VNode & {
   __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const _default$5: typeof __VLS_export$4;
+declare const _default$5: typeof __VLS_export$6;
 type __VLS_PrettifyLocal$2<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
 //#endregion
 //#region src/Stat/types.d.ts
@@ -746,20 +746,20 @@ interface StatProps {
 //#endregion
 //#region src/Stat/Stat.vue.d.ts
 declare var __VLS_1: {}, __VLS_3: {};
-type __VLS_Slots = {} & {
+type __VLS_Slots$2 = {} & {
   default?: (props: typeof __VLS_1) => any;
 } & {
   media?: (props: typeof __VLS_3) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<StatProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StatProps> & Readonly<{}>, {
+declare const __VLS_base$2: import("vue").DefineComponent<StatProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StatProps> & Readonly<{}>, {
   value: string;
   delta: StatDelta;
   description: string;
   size: StatSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export$3: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default$7: typeof __VLS_export$3;
-type __VLS_WithSlots<T, S> = T & {
+declare const __VLS_export$5: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
+declare const _default$7: typeof __VLS_export$5;
+type __VLS_WithSlots$2<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -900,13 +900,13 @@ interface PathPersonality {
 export declare function applyPersonality(d: string, personality: PathPersonality): string;
 //#endregion
 //#region src/SVGIcon/SVGIcon.vue.d.ts
-declare const __VLS_export$2: import("vue").DefineComponent<SVGIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SVGIconProps> & Readonly<{}>, {
+declare const __VLS_export$4: import("vue").DefineComponent<SVGIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SVGIconProps> & Readonly<{}>, {
   size: SVGIconSize;
   strokeWidth: number;
   variation: SVGIconVariation;
   color: SVGIconColor;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default$6: typeof __VLS_export$2;
+declare const _default$6: typeof __VLS_export$4;
 //#endregion
 //#region src/SVGIcon/types-xif.d.ts
 /**
@@ -1048,6 +1048,79 @@ export declare const xifStar: XIFIcon;
 export declare const xifBellOverride: XIFIcon;
 export declare const xifExamples: XIFIcon[];
 //#endregion
+//#region src/Tour/context.d.ts
+type TourDismissSource = 'backdrop' | 'escape' | 'close' | 'skip' | 'complete';
+//#endregion
+//#region src/Tour/types.d.ts
+interface TourProps {
+  /** 是否运行。关闭后步骤重置；调用方负责在 dismiss 后把它设为 false。 */
+  isActive: boolean;
+  /** 在目标周围压暗页面，保留目标亮区。 */
+  hasBackdrop?: boolean;
+  /** 显示“第几步 / 总步数”。 */
+  isStepCountShown?: boolean;
+}
+interface TourEmits {
+  dismiss: [source: TourDismissSource];
+}
+interface TourSlots {
+  default?: () => unknown;
+}
+interface TourStepProps {
+  /** 指向步骤目标元素的模板 ref。 */
+  'targetRef': MaybeRef<HTMLElement | null>;
+  /** 步骤标题，同时作为弹层名称。 */
+  'heading': string;
+  'placement'?: PopoverPlacement;
+  'alignment'?: PopoverAlignment;
+  'data-testid'?: string;
+}
+interface TourStepSlots {
+  default?: () => unknown;
+}
+//#endregion
+//#region src/Tour/Tour.vue.d.ts
+type __VLS_Slots$1 = TourSlots;
+declare const __VLS_base$1: import("vue").DefineComponent<TourProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  dismiss: (source: TourDismissSource) => any;
+}, string, import("vue").PublicProps, Readonly<TourProps> & Readonly<{
+  onDismiss?: ((source: TourDismissSource) => any) | undefined;
+}>, {
+  hasBackdrop: boolean;
+  isStepCountShown: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$3: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
+declare const _default$8: typeof __VLS_export$3;
+type __VLS_WithSlots$1<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/Tour/TourStep.vue.d.ts
+type __VLS_Slots = TourStepSlots;
+declare const __VLS_base: any;
+declare const __VLS_export$2: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default$9: typeof __VLS_export$2;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/Tour/useTour.d.ts
+interface UseTourReturn {
+  readonly activeStepIndex: number;
+  readonly stepCount: number;
+  readonly isFirstStep: boolean;
+  readonly isLastStep: boolean;
+  next: () => void;
+  previous: () => void;
+  dismiss: (source: TourDismissSource) => void;
+}
+/** 读取最近的 Tour。没有控制器时返回 null，由调用方决定是否跳过自定义 UI。 */
+export declare function useTour(): UseTourReturn | null;
+//#endregion
 //#region src/TransferList/types.d.ts
 /** 一个可搬运的选项。`value` 唯一，`label` 是可见文字，也是操作名的来源。 */
 interface TransferListOption<T extends string = string> {
@@ -1130,7 +1203,7 @@ declare const __VLS_export$1: <T extends string>(__VLS_props: NonNullable<Awaite
 }>) => import("vue").VNode & {
   __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const _default$8: typeof __VLS_export$1;
+declare const _default$10: typeof __VLS_export$1;
 type __VLS_PrettifyLocal$1<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
 //#endregion
 //#region src/TransferList/TransferListSelector.vue.d.ts
@@ -1186,7 +1259,7 @@ declare const __VLS_export: <T extends string>(__VLS_props: NonNullable<Awaited<
 }>) => import("vue").VNode & {
   __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const _default$9: typeof __VLS_export;
+declare const _default$11: typeof __VLS_export;
 type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
 //#endregion
-export { _default as CircularProgress, type CircularProgressProps, type CircularProgressSize, type CircularProgressVariant, type CircularProgressVariantMap, type CreateDiffFileOptions, _default$1 as DiffViewer, type DiffViewerChangeIndicator, type DiffViewerEmits, type DiffViewerFile, type DiffViewerFileStatus, type DiffViewerHunk, type DiffViewerInlineHighlight, type DiffViewerLine, type DiffViewerLineKind, type DiffViewerLineRef, type DiffViewerProps, type DiffViewerSide, type DiffViewerSlots, type DiffViewerViewMode, type IconShape, type IconShapeRole, _default$2 as InfoTip, type InfoTipProps, type InfoTipSize, type InlineDiffGranularity, type InlineDiffResult, type InlineRange, _default$3 as ListInput, type ListInputChange, type ListInputColumn, type ListInputColumnWidth, type ListInputEmits, type ListInputProps, type ListInputRenderContext, type ListInputValueContext, type LogEntry, _default$4 as LogStream, type LogStreamEmits, type LogStreamLevel, type LogStreamProps, _default$5 as MobileTokenizer, type MobileTokenizerChange, type MobileTokenizerEmits, type MobileTokenizerProps, type PanelGroup, type PanelRow, type PathPersonality, _default$6 as SVGIcon, type SVGIconColor, type SVGIconDef, type SVGIconProps, type SVGIconSize, type SVGIconVariation, type SearchSource, type SearchableItem, _default$7 as Stat, type StatDelta, type StatDeltaDirection, type StatDeltaSentiment, type StatProps, type StatSize, _default$8 as TransferList, type TransferListEmits, type TransferListOption, type TransferListProps, _default$9 as TransferListSelector, type TransferListSlots, type XIFAnimate, type XIFIcon, type XIFPath, type XIFPersonality, type XIFSlot };
+export { _default as CircularProgress, type CircularProgressProps, type CircularProgressSize, type CircularProgressVariant, type CircularProgressVariantMap, type CreateDiffFileOptions, _default$1 as DiffViewer, type DiffViewerChangeIndicator, type DiffViewerEmits, type DiffViewerFile, type DiffViewerFileStatus, type DiffViewerHunk, type DiffViewerInlineHighlight, type DiffViewerLine, type DiffViewerLineKind, type DiffViewerLineRef, type DiffViewerProps, type DiffViewerSide, type DiffViewerSlots, type DiffViewerViewMode, type IconShape, type IconShapeRole, _default$2 as InfoTip, type InfoTipProps, type InfoTipSize, type InlineDiffGranularity, type InlineDiffResult, type InlineRange, _default$3 as ListInput, type ListInputChange, type ListInputColumn, type ListInputColumnWidth, type ListInputEmits, type ListInputProps, type ListInputRenderContext, type ListInputValueContext, type LogEntry, _default$4 as LogStream, type LogStreamEmits, type LogStreamLevel, type LogStreamProps, _default$5 as MobileTokenizer, type MobileTokenizerChange, type MobileTokenizerEmits, type MobileTokenizerProps, type PanelGroup, type PanelRow, type PathPersonality, _default$6 as SVGIcon, type SVGIconColor, type SVGIconDef, type SVGIconProps, type SVGIconSize, type SVGIconVariation, type SearchSource, type SearchableItem, _default$7 as Stat, type StatDelta, type StatDeltaDirection, type StatDeltaSentiment, type StatProps, type StatSize, _default$8 as Tour, type TourDismissSource, type TourEmits, type TourProps, type TourSlots, _default$9 as TourStep, type TourStepProps, type TourStepSlots, _default$10 as TransferList, type TransferListEmits, type TransferListOption, type TransferListProps, _default$11 as TransferListSelector, type TransferListSlots, type UseTourReturn, type XIFAnimate, type XIFIcon, type XIFPath, type XIFPersonality, type XIFSlot };

package/dist/index.js

@@ -1,6 +1,6 @@
-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, SyntaxTheme, Text, TextInput, Token, Tooltip, VStack, VisuallyHidden, tokenize, useAnnounce, useScrollableArea, useTranslator } from "@astryx-vue/core";
 import "../styles/diff-viewer.css";
 import "../styles/info-tip.css";
 import "../styles/list-input.css";
@@ -8,6 +8,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,8 +33,8 @@ 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_1$15 = ["data-size", "data-variant"];
+const _hoisted_2$13 = { class: "astryx-circular-progress__ring" };
 const _hoisted_3$11 = [
 	"aria-valuenow",
 	"aria-valuemin",
@@ -138,7 +139,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$13, [(openBlock(), createElementBlock("svg", {
 				class: normalizeClass(["astryx-circular-progress__svg", { "astryx-circular-progress__svg--indeterminate": __props.isIndeterminate }]),
 				role: "progressbar",
 				"aria-labelledby": labelId,
@@ -177,7 +178,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			}, 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", {
 				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$15);
 		};
 	}
 });
@@ -409,13 +410,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 +531,7 @@ const _hoisted_47 = {
 	key: 0,
 	class: "astryx-diff-viewer__annotation-content"
 };
-const _sfc_main$13 = /*@__PURE__*/ defineComponent({
+const _sfc_main$16 = /*@__PURE__*/ defineComponent({
 	name: "AstryxDiffViewerTable",
 	__name: "DiffViewerTable",
 	props: {
@@ -610,7 +611,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 +688,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 +1229,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,
@@ -1421,7 +1422,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 +1451,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$16, {
 					"view-mode": __props.viewMode,
 					"unified-rows": unifiedRows.value,
 					"split-rows": splitRows.value,
@@ -1473,7 +1474,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,7 +1772,7 @@ function parseUnifiedDiff(patch) {
 }
 //#endregion
 //#region src/InfoTip/InfoTip.vue
-const _hoisted_1$10 = ["aria-label"];
+const _hoisted_1$12 = ["aria-label"];
 const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 	name: "AstryxInfoTip",
 	__name: "InfoTip",
@@ -1793,7 +1794,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 +1883,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 +1891,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 +1900,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$15 = /*@__PURE__*/ defineComponent({
 	name: "AstryxListInputRow",
 	__name: "ListInputRow",
 	props: {
@@ -2033,7 +2034,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 +2324,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",
@@ -2623,7 +2624,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$15, {
 							key: itemKeyOf(item),
 							item,
 							index,
@@ -2665,7 +2666,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 +2690,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 +2715,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 +2739,7 @@ const _hoisted_11 = {
 	key: 0,
 	class: "astryx-log-stream__detail"
 };
-const _sfc_main$11 = /*@__PURE__*/ defineComponent({
+const _sfc_main$14 = /*@__PURE__*/ defineComponent({
 	name: "AstryxLogStreamRow",
 	__name: "LogStreamRow",
 	props: {
@@ -2764,7 +2765,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 +2773,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,8 +2841,8 @@ function useLogFollow(options) {
 }
 //#endregion
 //#region src/LogStream/LogStream.vue
-const _hoisted_1$6 = ["data-variant"];
-const _hoisted_2$6 = ["aria-label", "aria-live"];
+const _hoisted_1$8 = ["data-variant"];
+const _hoisted_2$7 = ["aria-label", "aria-live"];
 const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 	name: "AstryxLogStream",
 	inheritAttrs: false,
@@ -2908,7 +2909,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$14, {
 						entry,
 						"has-timestamps": __props.hasTimestamps,
 						"has-source": hasSource.value,
@@ -2925,14 +2926,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 +3041,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"
 };
@@ -3240,7 +3241,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 +3371,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"];
@@ -3420,7 +3421,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 +3433,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 +4235,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,
@@ -4318,7 +4319,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 +4349,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 +4487,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$8 = /*@__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$13 = /*@__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$9 = /*@__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$13, {
+				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 +4833,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$12 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTransferListPanel",
 	__name: "TransferListPanel",
 	props: {
@@ -5030,7 +5305,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$10 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTransferList",
 	inheritAttrs: false,
 	__name: "TransferList",
@@ -5304,7 +5579,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$12, {
 					side: "selected",
 					"heading-id": selectedHeadingId,
 					label: selectedLabel.value,
@@ -5340,7 +5615,7 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 					"dragging-value",
 					"grabbed-value",
 					"drop-target"
-				]), createVNode(_sfc_main$10, {
+				]), createVNode(_sfc_main$12, {
 					side: "available",
 					"heading-id": availableHeadingId,
 					label: availableLabel.value,
@@ -5395,7 +5670,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$11 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTransferListSelector",
 	__name: "TransferListSelector",
 	props: {
@@ -5532,7 +5807,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$10, {
 					label: __props.label,
 					"is-label-hidden": "",
 					options: __props.options,
@@ -5611,4 +5886,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 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 Tour, _sfc_main$9 as TourStep, _sfc_main$10 as TransferList, _sfc_main$11 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 };

package/lab.css

@@ -9,3 +9,4 @@
 @import './styles/transfer-list-selector.css';
 @import './styles/list-input.css';
 @import './styles/diff-viewer.css';
+@import './styles/tour.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/lab",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Astryx lab components for Vue 3 — experimental components that may change. Ships only under the canary dist-tag.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -53,7 +53,7 @@
   ],
   "peerDependencies": {
     "vue": "^3.5.0",
-    "@astryx-vue/core": "^0.7.11"
+    "@astryx-vue/core": "^0.7.12"
   },
   "devDependencies": {
     "@types/node": "26.6.4",
@@ -64,7 +64,7 @@
     "unplugin-vue": "8.0.0",
     "vue": "3.5.43",
     "vue-tsc": "3.3.12",
-    "@astryx-vue/core": "^0.7.11"
+    "@astryx-vue/core": "^0.7.12"
   },
   "scripts": {
     "build": "tsdown",

package/styles/tour.css

@@ -0,0 +1,65 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-tour-step {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-3, 12px);
+    max-width: 320px;
+  }
+
+  .astryx-tour-step__footer {
+    align-items: center;
+  }
+
+  .astryx-tour-highlight-root {
+    position: fixed;
+    z-index: calc(var(--astryx-popover-z-index, 1000) - 1);
+    inset: 0;
+    box-sizing: border-box;
+    width: 100vw;
+    max-width: none;
+    height: 100vh;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .astryx-tour-highlight-root.is-interactive {
+    pointer-events: auto;
+  }
+
+  .astryx-tour-highlight {
+    position: absolute;
+    pointer-events: none;
+    box-shadow:
+      0 0 0 2px var(--astryx-color-background-surface, #fff),
+      0 0 0 4px var(--astryx-color-accent, #0064e0);
+    transition:
+      top var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, ease),
+      left var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, ease),
+      width var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, ease),
+      height var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, ease);
+  }
+
+  .astryx-tour-highlight.has-backdrop {
+    box-shadow:
+      0 0 0 2px var(--astryx-color-background-surface, #fff),
+      0 0 0 4px var(--astryx-color-accent, #0064e0),
+      0 0 0 9999px var(--astryx-color-overlay, rgb(0 0 0 / 50%));
+  }
+
+  .astryx-tour-highlight.is-hidden {
+    opacity: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-tour-highlight {
+      transition: none;
+    }
+  }
+}