@antdv-next/mobile 0.0.0-stage → 0.1.0

package/dist/tour/index.d.ts

@@ -0,0 +1,101 @@
+export type * from './interface';
+declare const Tour: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").TourProps> & Readonly<{
+        onChange?: ((current: number) => any) | undefined;
+        onClose?: ((current: number) => any) | undefined;
+        "onUpdate:open"?: ((open: boolean) => any) | undefined;
+        onFinish?: (() => any) | undefined;
+        "onUpdate:current"?: ((current: number) => any) | undefined;
+    }>, import("./interface").TourExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (current: number) => any;
+        close: (current: number) => any;
+        "update:open": (open: boolean) => any;
+        finish: () => any;
+        "update:current": (current: number) => any;
+    }, import("vue").PublicProps, {
+        mask: boolean | import("./interface").TourMaskConfig;
+        type: import("./interface").TourType;
+        open: boolean;
+        lockScroll: boolean;
+        closable: boolean | import("./interface").TourClosableConfig;
+        closeIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+        keyboard: boolean;
+        getPopupContainer: false | ((node: HTMLElement) => HTMLElement);
+        defaultOpen: boolean;
+        arrow: boolean | import("./interface").TourArrowConfig;
+        current: number;
+        defaultCurrent: number;
+        steps: import("./interface").TourStepProps[];
+        disabledInteraction: boolean;
+        scrollIntoViewOptions: boolean | import("./interface").TourScrollIntoViewOptions;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").TourProps> & Readonly<{
+        onChange?: ((current: number) => any) | undefined;
+        onClose?: ((current: number) => any) | undefined;
+        "onUpdate:open"?: ((open: boolean) => any) | undefined;
+        onFinish?: (() => any) | undefined;
+        "onUpdate:current"?: ((current: number) => any) | undefined;
+    }>, import("./interface").TourExpose, {}, {}, {}, {
+        mask: boolean | import("./interface").TourMaskConfig;
+        type: import("./interface").TourType;
+        open: boolean;
+        lockScroll: boolean;
+        closable: boolean | import("./interface").TourClosableConfig;
+        closeIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+        keyboard: boolean;
+        getPopupContainer: false | ((node: HTMLElement) => HTMLElement);
+        defaultOpen: boolean;
+        arrow: boolean | import("./interface").TourArrowConfig;
+        current: number;
+        defaultCurrent: number;
+        steps: import("./interface").TourStepProps[];
+        disabledInteraction: boolean;
+        scrollIntoViewOptions: boolean | import("./interface").TourScrollIntoViewOptions;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").TourProps> & Readonly<{
+    onChange?: ((current: number) => any) | undefined;
+    onClose?: ((current: number) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    onFinish?: (() => any) | undefined;
+    "onUpdate:current"?: ((current: number) => any) | undefined;
+}>, import("./interface").TourExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (current: number) => any;
+    close: (current: number) => any;
+    "update:open": (open: boolean) => any;
+    finish: () => any;
+    "update:current": (current: number) => any;
+}, string, {
+    mask: boolean | import("./interface").TourMaskConfig;
+    type: import("./interface").TourType;
+    open: boolean;
+    lockScroll: boolean;
+    closable: boolean | import("./interface").TourClosableConfig;
+    closeIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    keyboard: boolean;
+    getPopupContainer: false | ((node: HTMLElement) => HTMLElement);
+    defaultOpen: boolean;
+    arrow: boolean | import("./interface").TourArrowConfig;
+    current: number;
+    defaultCurrent: number;
+    steps: import("./interface").TourStepProps[];
+    disabledInteraction: boolean;
+    scrollIntoViewOptions: boolean | import("./interface").TourScrollIntoViewOptions;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./interface").TourSlots;
+}), object>;
+export default Tour;

package/dist/tour/index.js

@@ -0,0 +1,5 @@
+import { withInstall } from "../_util/withInstall.js";
+import Tour_default from "./Tour.js";
+// src/tour/index.ts
+var Tour = withInstall(Tour_default, "AmTour");
+export { Tour as default };

package/dist/tour/interface.d.ts

@@ -0,0 +1,169 @@
+import type { CSSProperties, Ref, StyleValue, VNode, VNodeChild } from 'vue';
+import type { VueNode } from '../_util/type';
+export type TourPlacement = 'center' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
+export type TourType = 'default' | 'primary';
+export interface TourMaskConfig {
+    style?: CSSProperties;
+    /** Fill color of the mask */
+    color?: string;
+}
+export interface TourArrowConfig {
+    pointAtCenter: boolean;
+}
+export interface TourGap {
+    /** Space between the target and the edge of the highlighted area, `[horizontal, vertical]` */
+    offset?: number | [number, number];
+    /** Corner radius of the highlighted area */
+    radius?: number;
+}
+export interface TourScrollIntoViewOptions {
+    behavior?: 'auto' | 'instant' | 'smooth';
+    block?: 'start' | 'center' | 'end' | 'nearest';
+    inline?: 'start' | 'center' | 'end' | 'nearest';
+}
+export interface TourClosableConfig {
+    closeIcon?: VueNode;
+}
+/** An element, or a component instance (its root element is used) */
+export type TourTargetElement = HTMLElement | {
+    $el: any;
+} | null | undefined;
+export type TourTarget = TourTargetElement | Ref<TourTargetElement> | (() => TourTargetElement);
+export interface TourButtonProps {
+    /** Button text */
+    children?: VueNode;
+    onClick?: (event: MouseEvent) => void;
+    class?: string;
+    style?: StyleValue;
+}
+export interface TourSemanticClassNames {
+    root?: string;
+    cover?: string;
+    mask?: string;
+    section?: string;
+    footer?: string;
+    actions?: string;
+    indicator?: string;
+    indicators?: string;
+    header?: string;
+    title?: string;
+    description?: string;
+    close?: string;
+}
+export interface TourSemanticStyles {
+    root?: CSSProperties;
+    cover?: CSSProperties;
+    mask?: CSSProperties;
+    section?: CSSProperties;
+    footer?: CSSProperties;
+    actions?: CSSProperties;
+    indicator?: CSSProperties;
+    indicators?: CSSProperties;
+    header?: CSSProperties;
+    title?: CSSProperties;
+    description?: CSSProperties;
+    close?: CSSProperties;
+}
+export interface TourStepProps {
+    /** Element the panel points at. Empty: the panel is centered on the screen. */
+    target?: TourTarget;
+    title?: VueNode;
+    description?: VueNode;
+    /** Picture or video above the title */
+    cover?: VueNode;
+    placement?: TourPlacement;
+    arrow?: boolean | TourArrowConfig;
+    mask?: boolean | TourMaskConfig;
+    type?: TourType;
+    nextButtonProps?: TourButtonProps;
+    prevButtonProps?: TourButtonProps;
+    scrollIntoViewOptions?: boolean | TourScrollIntoViewOptions;
+    closable?: boolean | TourClosableConfig;
+    closeIcon?: VueNode;
+    /** Class of the panel of this step */
+    class?: string;
+    /** Style of the panel of this step */
+    style?: CSSProperties;
+    classes?: TourSemanticClassNames;
+    styles?: TourSemanticStyles;
+}
+/** Same name as antdv-next */
+export type TourStepItem = TourStepProps;
+export interface TourStepInfo {
+    step: TourStepProps;
+    index: number;
+}
+export interface TourActionsInfo {
+    current: number;
+    total: number;
+}
+export interface TourButtonInfo {
+    current: number;
+    isFirst: boolean;
+    isLast: boolean;
+}
+export interface TourProps {
+    /** Whether the tour is visible. Supports `v-model:open`. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    /** Index of the current step. Supports `v-model:current`. */
+    current?: number;
+    defaultCurrent?: number;
+    steps?: TourStepProps[];
+    /** Affects the background and the text color of the panel */
+    type?: TourType;
+    /** Show the mask, or configure its style / fill color */
+    mask?: boolean | TourMaskConfig;
+    arrow?: boolean | TourArrowConfig;
+    /** Position of the panel relative to the target. Default `bottom` (`center` without a target). */
+    placement?: TourPlacement;
+    /** Space and corner radius of the highlighted area */
+    gap?: TourGap;
+    /** Block taps on the highlighted target */
+    disabledInteraction?: boolean;
+    /** Scroll the target into view first; pass `false` to disable or the options of `scrollIntoView` */
+    scrollIntoViewOptions?: boolean | TourScrollIntoViewOptions;
+    indicatorsRender?: (current: number, total: number) => VNodeChild;
+    /** `originNode` is the default prev / next buttons */
+    actionsRender?: (originNode: VNode, info: TourActionsInfo) => VNodeChild;
+    closable?: boolean | TourClosableConfig;
+    closeIcon?: VueNode;
+    /** Close on ESC, switch steps with the left / right arrow keys (external keyboards) */
+    keyboard?: boolean;
+    /** Lock page scroll while the mask is shown */
+    lockScroll?: boolean;
+    zIndex?: number;
+    /** Mount node of the tour layer. Default `document.body`; `false` renders in place. */
+    getPopupContainer?: ((node: HTMLElement) => HTMLElement) | false;
+    rootClass?: string;
+    classes?: TourSemanticClassNames;
+    styles?: TourSemanticStyles;
+}
+export interface TourEmits {
+    'update:open': [open: boolean];
+    'update:current': [current: number];
+    /** The step changed */
+    'change': [current: number];
+    /** The tour was closed (close icon, ESC or finish) */
+    'close': [current: number];
+    /** The last step was confirmed */
+    'finish': [];
+}
+export interface TourSlots {
+    indicatorsRender?: (props: TourActionsInfo) => any;
+    actionsRender?: (props: {
+        originNode: VNode;
+        current: number;
+        total: number;
+    }) => any;
+    nextButton?: (props: TourButtonInfo) => any;
+    prevButton?: (props: TourButtonInfo) => any;
+    coverRender?: (props: TourStepInfo) => any;
+    titleRender?: (props: TourStepInfo) => any;
+    descriptionRender?: (props: TourStepInfo) => any;
+    closeIcon?: (props: TourStepInfo) => any;
+}
+export interface TourExpose {
+    /** Re-measure the target and re-position the panel (e.g. after the layout changed) */
+    updatePosition: () => void;
+}

package/dist/tour/position.d.ts

@@ -0,0 +1,42 @@
+import type { TourPlacement } from './interface';
+export interface TourRect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export interface TourPositionOptions {
+    placement?: TourPlacement;
+    /** distance between the highlighted area and the panel */
+    gap?: number;
+    /** minimal distance of the panel to the screen edges */
+    padding?: number;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** safe-area insets the panel must not enter */
+    safeTop?: number;
+    safeBottom?: number;
+}
+export interface TourPosition {
+    left: number;
+    top: number;
+    /** placement after flipping / falling back */
+    placement: TourPlacement;
+    /** arrow center, measured from the panel start along the edge it sits on */
+    arrowOffset: number;
+    /** `false` when the panel is centered or had to overlap the target */
+    arrow: boolean;
+}
+/**
+ * Where to put the tour panel next to the highlighted area (both relative to the tour layer).
+ * Built on the Popover placement helper (flip + shift), plus what a phone needs:
+ * `left` / `right` fall back to `top` / `bottom` when the panel does not fit beside the target,
+ * and the panel is always clamped into the screen (minus the safe areas).
+ */
+export declare function computeTourPosition(target: TourRect | null, panel: {
+    width: number;
+    height: number;
+}, options: TourPositionOptions): TourPosition;
+export declare function isInViewport(el: HTMLElement): boolean;

package/dist/tour/position.js

@@ -0,0 +1,66 @@
+import { computePosition, parsePlacement } from "../popover/position.js";
+// src/tour/position.ts
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), Math.max(min, max));
+}
+/**
+* Where to put the tour panel next to the highlighted area (both relative to the tour layer).
+* Built on the Popover placement helper (flip + shift), plus what a phone needs:
+* `left` / `right` fall back to `top` / `bottom` when the panel does not fit beside the target,
+* and the panel is always clamped into the screen (minus the safe areas).
+*/
+function computeTourPosition(target, panel, options) {
+	const { viewport, gap = 12, padding = 16, safeTop = 0, safeBottom = 0 } = options;
+	const minTop = padding + safeTop;
+	const maxTop = viewport.height - safeBottom - panel.height - padding;
+	const maxLeft = viewport.width - panel.width - padding;
+	if (!target || options.placement === "center") return {
+		left: Math.round(clamp((viewport.width - panel.width) / 2, padding, maxLeft)),
+		top: Math.round(clamp((viewport.height - panel.height) / 2, minTop, maxTop)),
+		placement: "center",
+		arrowOffset: 0,
+		arrow: false
+	};
+	let placement = options.placement ?? "bottom";
+	const { side } = parsePlacement(placement);
+	if (side === "left" || side === "right") {
+		const spaceLeft = target.left - padding;
+		const spaceRight = viewport.width - (target.left + target.width) - padding;
+		if (Math.max(spaceLeft, spaceRight) < panel.width + gap) {
+			const spaceTop = target.top - minTop;
+			placement = viewport.height - safeBottom - (target.top + target.height) - padding >= spaceTop ? "bottom" : "top";
+		}
+	}
+	const next = computePosition({
+		...target,
+		top: target.top - safeTop
+	}, panel, {
+		placement,
+		gap,
+		padding,
+		viewport: {
+			width: viewport.width,
+			height: viewport.height - safeTop - safeBottom
+		},
+		autoAdjust: true,
+		arrowInset: 16
+	});
+	const rawTop = next.top + safeTop;
+	const top = clamp(rawTop, minTop, maxTop);
+	const left = clamp(next.left, padding, maxLeft);
+	const overlap = parsePlacement(next.placement).side === "top" || parsePlacement(next.placement).side === "bottom" ? Math.abs(top - rawTop) > .5 : Math.abs(left - next.left) > .5;
+	return {
+		left: Math.round(left),
+		top: Math.round(top),
+		placement: next.placement,
+		arrowOffset: Math.round(next.arrowOffset),
+		arrow: !overlap
+	};
+}
+function isInViewport(el) {
+	const width = window.innerWidth || document.documentElement.clientWidth;
+	const height = window.innerHeight || document.documentElement.clientHeight;
+	const { top, right, bottom, left } = el.getBoundingClientRect();
+	return top >= 0 && left >= 0 && right <= width && bottom <= height;
+}
+export { computeTourPosition, isInViewport };

package/dist/tour/style/index.css

@@ -0,0 +1,293 @@
+.am-tour {
+  /* component tokens */
+  --am-tour-z-index: calc(var(--am-z-index-popup-base) + 1);
+  --am-tour-width: min(300px, calc(100vw - 32px));
+  --am-tour-bg: var(--am-color-bg-elevated);
+  --am-tour-color: var(--am-color-text);
+  --am-tour-title-color: var(--am-color-text-heading);
+  --am-tour-font-size: var(--am-font-size);
+  --am-tour-title-font-size: var(--am-font-size-lg);
+  --am-tour-padding: var(--am-padding);
+  --am-tour-border-radius: var(--am-border-radius-lg);
+  --am-tour-shadow: var(--am-box-shadow);
+  --am-tour-mask-color: var(--am-color-bg-mask);
+  --am-tour-arrow-size: 10px;
+  --am-tour-arrow-offset: 50%;
+  --am-tour-indicator-size: 6px;
+  --am-tour-indicator-color: var(--am-color-fill);
+  --am-tour-indicator-active-color: var(--am-color-primary);
+  --am-tour-close-size: 24px;
+  --am-tour-close-color: var(--am-color-icon);
+  --am-tour-close-active-bg: var(--am-color-bg-text-active);
+  --am-tour-motion-duration: var(--am-motion-duration-slow);
+
+  position: fixed;
+  inset: 0;
+  z-index: var(--am-tour-z-index);
+  box-sizing: border-box;
+  /* never visible (children are absolutely positioned): lets the script read the safe areas */
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  overflow: hidden;
+  color: var(--am-tour-color);
+  font-size: var(--am-tour-font-size);
+  font-family: var(--am-font-family);
+  line-height: var(--am-line-height);
+  pointer-events: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* ---------- mask ---------- */
+.am-tour-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.am-tour-mask-fill {
+  fill: var(--am-tour-mask-color);
+}
+
+.am-tour-mask-cover {
+  pointer-events: auto;
+  fill: transparent;
+}
+
+.am-tour-target-placeholder {
+  position: absolute;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.am-tour-target-disabled {
+  pointer-events: auto;
+}
+
+/* ---------- panel ---------- */
+.am-tour-panel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: var(--am-tour-width);
+  max-width: calc(100% - 32px);
+  pointer-events: auto;
+}
+
+.am-tour-primary {
+  --am-tour-bg: var(--am-color-primary);
+  --am-tour-color: var(--am-color-text-light-solid);
+  --am-tour-title-color: var(--am-color-text-light-solid);
+  --am-tour-indicator-color: color-mix(in srgb, var(--am-color-text-light-solid) 35%, transparent);
+  --am-tour-indicator-active-color: var(--am-color-text-light-solid);
+  --am-tour-close-color: var(--am-color-text-light-solid);
+  --am-tour-close-active-bg: color-mix(in srgb, var(--am-color-text-light-solid) 20%, transparent);
+
+  color: var(--am-tour-color);
+}
+
+.am-tour-arrow {
+  position: absolute;
+  width: var(--am-tour-arrow-size);
+  height: var(--am-tour-arrow-size);
+  background: var(--am-tour-bg);
+  border-radius: 2px;
+  transform: rotate(45deg);
+  pointer-events: none;
+}
+
+.am-tour-side-top .am-tour-arrow {
+  bottom: calc(var(--am-tour-arrow-size) / -2);
+  left: calc(var(--am-tour-arrow-offset) - var(--am-tour-arrow-size) / 2);
+}
+
+.am-tour-side-bottom .am-tour-arrow {
+  top: calc(var(--am-tour-arrow-size) / -2);
+  left: calc(var(--am-tour-arrow-offset) - var(--am-tour-arrow-size) / 2);
+}
+
+.am-tour-side-left .am-tour-arrow {
+  top: calc(var(--am-tour-arrow-offset) - var(--am-tour-arrow-size) / 2);
+  right: calc(var(--am-tour-arrow-size) / -2);
+}
+
+.am-tour-side-right .am-tour-arrow {
+  top: calc(var(--am-tour-arrow-offset) - var(--am-tour-arrow-size) / 2);
+  left: calc(var(--am-tour-arrow-size) / -2);
+}
+
+.am-tour-section {
+  position: relative;
+  box-sizing: border-box;
+  max-height: calc(100vh - 32px);
+  overflow-y: auto;
+  text-align: start;
+  background: var(--am-tour-bg);
+  border-radius: var(--am-tour-border-radius);
+  box-shadow: var(--am-tour-shadow);
+  -webkit-overflow-scrolling: touch;
+}
+
+.am-tour-close {
+  position: absolute;
+  top: var(--am-tour-padding);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--am-tour-close-size);
+  height: var(--am-tour-close-size);
+  margin: 0;
+  padding: 0;
+  color: var(--am-tour-close-color);
+  font-size: var(--am-font-size);
+  line-height: 1;
+  background: none;
+  border: 0;
+  border-radius: var(--am-border-radius-sm);
+  outline: none;
+  cursor: pointer;
+  transition: background-color var(--am-motion-duration-mid);
+  appearance: none;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  inset-inline-end: var(--am-tour-padding);
+}
+
+/* touch target of at least 40px */
+.am-tour-close::after {
+  position: absolute;
+  inset: calc((var(--am-tour-close-size) - 40px) / 2);
+  content: '';
+}
+
+.am-tour-close:active {
+  background: var(--am-tour-close-active-bg);
+}
+
+.am-tour-cover {
+  padding: calc(var(--am-tour-padding) + var(--am-tour-close-size) + var(--am-padding-xs)) var(--am-tour-padding) 0;
+  text-align: center;
+}
+
+.am-tour-cover img,
+.am-tour-cover video {
+  display: block;
+  width: 100%;
+  border-radius: var(--am-border-radius-sm);
+}
+
+.am-tour-header {
+  box-sizing: border-box;
+  padding: var(--am-tour-padding) var(--am-tour-padding) var(--am-padding-xs);
+  word-break: break-word;
+  padding-inline-end: calc(var(--am-tour-padding) + var(--am-tour-close-size) + var(--am-padding-xs));
+}
+
+.am-tour-cover + .am-tour-header {
+  padding-top: var(--am-padding-sm);
+  padding-inline-end: var(--am-tour-padding);
+}
+
+.am-tour-title {
+  color: var(--am-tour-title-color);
+  font-weight: var(--am-font-weight-strong);
+  font-size: var(--am-tour-title-font-size);
+  line-height: var(--am-line-height-lg);
+}
+
+.am-tour-description {
+  padding: 0 var(--am-tour-padding);
+  overflow-wrap: break-word;
+}
+
+/* no title: the description starts the panel and keeps clear of the close icon */
+.am-tour-description:first-child,
+.am-tour-close + .am-tour-description {
+  padding-top: var(--am-tour-padding);
+  padding-inline-end: calc(var(--am-tour-padding) + var(--am-tour-close-size) + var(--am-padding-xs));
+}
+
+.am-tour-cover + .am-tour-description {
+  padding-top: var(--am-padding-sm);
+}
+
+.am-tour-footer {
+  display: flex;
+  gap: var(--am-padding-xs);
+  align-items: center;
+  padding: var(--am-padding-sm) var(--am-tour-padding) var(--am-tour-padding);
+}
+
+.am-tour-indicators {
+  display: inline-flex;
+  flex: none;
+  gap: var(--am-tour-indicator-size);
+  align-items: center;
+}
+
+.am-tour-indicator {
+  display: inline-block;
+  width: var(--am-tour-indicator-size);
+  height: var(--am-tour-indicator-size);
+  background: var(--am-tour-indicator-color);
+  border-radius: 50%;
+  transition: background-color var(--am-motion-duration-mid);
+}
+
+.am-tour-indicator-active {
+  background: var(--am-tour-indicator-active-color);
+}
+
+.am-tour-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--am-margin-xs);
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 0;
+  margin-inline-start: auto;
+}
+
+/* small buttons, touch target of at least 40px */
+.am-tour-actions .am-button::after {
+  position: absolute;
+  inset: -6px 0;
+  content: '';
+}
+
+/* primary type: the next button is inverted (white background, primary text) */
+.am-tour-primary .am-tour-next-btn {
+  --am-button-c: var(--am-color-text-light-solid);
+  --am-button-c-active: color-mix(in srgb, var(--am-color-text-light-solid) 85%, var(--am-color-primary));
+  --am-button-solid-text: var(--am-color-primary);
+}
+
+/* ---------- motion: follow the step, not the scroll ---------- */
+.am-tour-animated .am-tour-mask-hole {
+  transition:
+    x var(--am-tour-motion-duration) var(--am-motion-ease-out),
+    y var(--am-tour-motion-duration) var(--am-motion-ease-out),
+    width var(--am-tour-motion-duration) var(--am-motion-ease-out),
+    height var(--am-tour-motion-duration) var(--am-motion-ease-out);
+}
+
+.am-tour-animated .am-tour-panel {
+  transition:
+    left var(--am-tour-motion-duration) var(--am-motion-ease-out),
+    top var(--am-tour-motion-duration) var(--am-motion-ease-out);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .am-tour-animated .am-tour-mask-hole,
+  .am-tour-animated .am-tour-panel {
+    transition: none;
+  }
+}

package/dist/tree/Tree.js

@@ -0,0 +1,4 @@
+import Tree_vue_vue_type_script_setup_true_lang_default from "./Tree.vue_vue_type_script_setup_true_lang.js";
+// src/tree/Tree.vue
+var Tree_default = Tree_vue_vue_type_script_setup_true_lang_default;
+export { Tree_default as default };