@xlabs-store/core 0.0.1

package/dist/cjs/x-tour-panel.cjs.entry.js

@@ -0,0 +1,89 @@
+'use strict';
+
+var index = require('./index-C7sKs9A2.js');
+
+const xTourPanelCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.x-tour-panel){position:relative;width:var(--x-tour-panel-width, 520px);max-width:90vw;background-color:var(--x-tour-panel-bg, var(--x-color-bg-elevated, #ffffff));border-radius:var(--x-tour-panel-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-tour-panel-box-shadow, var(--x-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08)));box-shadow:var(--x-tour-panel-box-shadow, var(--x-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08)));pointer-events:auto;font-family:var(--x-font-family);-webkit-animation:x-tour-panel-fade-in var(--x-tour-motion-duration, var(--x-motion-duration-slow, 0.3s)) ease;animation:x-tour-panel-fade-in var(--x-tour-motion-duration, var(--x-motion-duration-slow, 0.3s)) ease}.x-tour-content{position:relative;padding:var(--x-tour-panel-padding, var(--x-padding-md, 16px));display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.x-tour-close{position:absolute;top:12px;right:12px;padding:4px;background:transparent;border:none;border-radius:var(--x-border-radius-sm);cursor:pointer;color:var(--x-tour-close-color, var(--x-color-text-tertiary, rgba(0, 0, 0, 0.45)));-webkit-transition:all 0.2s;transition:all 0.2s;z-index:1}.x-tour-close:hover{background-color:var(--x-color-fill-secondary);color:var(--x-tour-close-hover-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-tour-close x-icon{font-size:14px}.x-tour-cover{margin-bottom:var(--x-margin-md);border-radius:var(--x-tour-panel-border-radius, var(--x-border-radius-lg, 8px)) var(--x-tour-panel-border-radius, var(--x-border-radius-lg, 8px)) 0 0;overflow:hidden;margin-top:calc(var(--x-tour-panel-padding, var(--x-padding-md, 16px)) * -1);margin-left:calc(var(--x-tour-panel-padding, var(--x-padding-md, 16px)) * -1);margin-right:calc(var(--x-tour-panel-padding, var(--x-padding-md, 16px)) * -1)}.x-tour-cover img{width:100%;height:auto;-o-object-fit:cover;object-fit:cover;display:block}.x-tour-header{margin-bottom:var(--x-margin-xs)}.x-tour-title{color:var(--x-tour-title-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:var(--x-tour-title-font-weight, var(--x-font-weight-semibold, 600));font-size:var(--x-tour-title-font-size, var(--x-font-size-lg, 16px));line-height:var(--x-line-height)}.x-tour-description{color:var(--x-tour-description-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.65)));font-size:var(--x-font-size);line-height:var(--x-line-height);margin-bottom:var(--x-margin-lg)}.x-tour-footer{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.x-tour-indicators{color:var(--x-tour-indicator-color, var(--x-color-text-tertiary, rgba(0, 0, 0, 0.45)));font-size:var(--x-font-size-sm)}.x-tour-buttons{display:-ms-flexbox;display:flex;gap:var(--x-spacing-xs)}.x-tour-arrow{position:absolute;width:8px;height:8px;background-color:var(--x-tour-panel-bg, var(--x-color-bg-elevated, #ffffff));-webkit-transform:rotate(45deg);transform:rotate(45deg);z-index:1}:host([placement^=top]) .x-tour-arrow{bottom:-4px;left:calc(50% - 4px);-webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.05);box-shadow:2px 2px 3px rgba(0, 0, 0, 0.05)}:host([placement^=bottom]) .x-tour-arrow{top:-4px;left:calc(50% - 4px);-webkit-box-shadow:-2px -2px 3px rgba(0, 0, 0, 0.05);box-shadow:-2px -2px 3px rgba(0, 0, 0, 0.05)}:host([placement^=left]) .x-tour-arrow{right:-4px;top:calc(50% - 4px);-webkit-box-shadow:2px -2px 3px rgba(0, 0, 0, 0.05);box-shadow:2px -2px 3px rgba(0, 0, 0, 0.05)}:host([placement^=right]) .x-tour-arrow{left:-4px;top:calc(50% - 4px);-webkit-box-shadow:-2px 2px 3px rgba(0, 0, 0, 0.05);box-shadow:-2px 2px 3px rgba(0, 0, 0, 0.05)}:host([placement=topLeft]) .x-tour-arrow,:host([placement=bottomLeft]) .x-tour-arrow{left:24px}:host([placement=topRight]) .x-tour-arrow,:host([placement=bottomRight]) .x-tour-arrow{left:auto;right:24px}:host([placement=leftTop]) .x-tour-arrow,:host([placement=rightTop]) .x-tour-arrow{top:24px}:host([placement=leftBottom]) .x-tour-arrow,:host([placement=rightBottom]) .x-tour-arrow{top:auto;bottom:24px}@-webkit-keyframes x-tour-panel-fade-in{from{opacity:0;-webkit-transform:scale(0.9);transform:scale(0.9)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes x-tour-panel-fade-in{from{opacity:0;-webkit-transform:scale(0.9);transform:scale(0.9)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}`;
+
+const XTourPanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.xNext = index.createEvent(this, "xNext", 7);
+        this.xPrev = index.createEvent(this, "xPrev", 7);
+        this.xClose = index.createEvent(this, "xClose", 7);
+    }
+    /**
+     * Step data
+     * @example
+     * <x-tour-panel step={{ title: 'Welcome', description: 'This is a tour' }} />
+     */
+    step;
+    /**
+     * Current step index
+     * @example
+     * <x-tour-panel current={0} />
+     */
+    current;
+    /**
+     * Total steps
+     * @example
+     * <x-tour-panel total={5} />
+     */
+    total;
+    /**
+     * Whether to show arrow
+     * @example
+     * <x-tour-panel arrow={true} />
+     */
+    arrow = true;
+    /**
+     * Current placement
+     * @example
+     * <x-tour-panel placement="bottom" />
+     */
+    placement = 'bottom';
+    /**
+     * Event emitted when next button is clicked
+     * @example
+     * <x-tour-panel onXNext={() => console.log('next')} />
+     */
+    xNext;
+    /**
+     * Event emitted when previous button is clicked
+     * @example
+     * <x-tour-panel onXPrev={() => console.log('prev')} />
+     */
+    xPrev;
+    /**
+     * Event emitted when close button is clicked
+     * @example
+     * <x-tour-panel onXClose={() => console.log('close')} />
+     */
+    xClose;
+    /**
+     * Renders the tour panel content.
+     *
+     * Flow:
+     * 1. Checks if step data is available; if not, returns null.
+     * 2. Destructures step properties (title, description, cover, buttons).
+     * 3. Renders the panel structure:
+     *    - Arrow element (if enabled).
+     *    - Close button (top-right).
+     *    - Cover image (if provided).
+     *    - Header (Title).
+     *    - Description (Body).
+     *    - Footer:
+     *      - Step indicators (e.g., "1 / 4").
+     *      - Navigation buttons (Previous/Next/Finish).
+     *
+     * @returns {JSX.Element | null} The rendered panel.
+     */
+    render() {
+        if (!this.step)
+            return null;
+        const { title, description, cover, nextButtonProps, prevButtonProps } = this.step;
+        return (index.h(index.Host, { class: "x-tour-panel" }, this.arrow && index.h("div", { class: "x-tour-arrow" }), index.h("div", { class: "x-tour-content" }, index.h("button", { class: "x-tour-close", onClick: () => this.xClose.emit() }, index.h("x-icon", { name: "close" })), cover && (index.h("div", { class: "x-tour-cover" }, typeof cover === 'string' ? index.h("img", { src: cover, alt: "cover" }) : cover)), index.h("div", { class: "x-tour-header" }, typeof title === 'string' ? index.h("div", { class: "x-tour-title" }, title) : title), index.h("div", { class: "x-tour-description" }, typeof description === 'string' ? index.h("div", null, description) : description), index.h("div", { class: "x-tour-footer" }, index.h("div", { class: "x-tour-indicators" }, this.current + 1, " / ", this.total), index.h("div", { class: "x-tour-buttons" }, this.current > 0 && (index.h("x-button", { size: "small", ...(prevButtonProps || {}), onClick: () => this.xPrev.emit() }, prevButtonProps?.children || 'Previous')), index.h("x-button", { type: "primary", size: "small", ...(nextButtonProps || {}), onClick: () => this.xNext.emit() }, nextButtonProps?.children || (this.current === this.total - 1 ? 'Finish' : 'Next')))))));
+    }
+};
+XTourPanel.style = xTourPanelCss();
+
+exports.x_tour_panel = XTourPanel;

package/dist/cjs/x-tour.cjs.entry.js

@@ -0,0 +1,344 @@
+'use strict';
+
+var index = require('./index-C7sKs9A2.js');
+var portalController = require('./portal-controller-CtYVbhXL.js');
+
+const xTourCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--x-tour-z-index, 1001)}.x-tour-mask{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--x-tour-mask-z-index, 1001)}.x-tour-svg{position:absolute;top:0;left:0;width:100%;height:100%}.x-tour-mask-path{fill:var(--x-tour-mask-bg, var(--x-color-bg-mask, rgba(0, 0, 0, 0.45)));-webkit-transition:d var(--x-tour-motion-duration, var(--x-motion-duration-slow, 0.3s)) ease;transition:d var(--x-tour-motion-duration, var(--x-motion-duration-slow, 0.3s)) ease;pointer-events:auto}`;
+
+const XTour = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.xChange = index.createEvent(this, "xChange", 7);
+        this.xClose = index.createEvent(this, "xClose", 7);
+        this.xFinish = index.createEvent(this, "xFinish", 7);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Whether the tour is open
+     * @example
+     * <x-tour open={true} />
+     */
+    open = false;
+    /**
+     * Current step index
+     * @example
+     * <x-tour current={0} />
+     */
+    current = 0;
+    /**
+     * Steps of the tour
+     * @example
+     * <x-tour steps={[{ title: 'Step 1', target: '#btn1' }]} />
+     */
+    steps = [];
+    /**
+     * Whether to show mask
+     * @example
+     * <x-tour mask={false} />
+     * <x-tour mask={{ style: { background: 'rgba(0,0,0,0.5)' } }} />
+     */
+    mask = true;
+    /**
+     * Z-index of the tour
+     * @example
+     * <x-tour zIndex={2000} />
+     */
+    zIndex = 1001;
+    /**
+     * Arrow of the tour panel
+     * @example
+     * <x-tour arrow={false} />
+     * <x-tour arrow={{ pointAtCenter: true }} />
+     */
+    arrow = true;
+    /**
+     * Callback when step changes
+     * @example
+     * <x-tour onXChange={(e) => console.log(e.detail)} />
+     */
+    xChange;
+    /**
+     * Callback when tour is closed
+     * @example
+     * <x-tour onXClose={() => console.log('closed')} />
+     */
+    xClose;
+    /**
+     * Callback when tour is finished
+     * @example
+     * <x-tour onXFinish={() => console.log('finished')} />
+     */
+    xFinish;
+    activeStep = null;
+    targetRect = null;
+    activePlacement = 'bottom';
+    portalInstance = null;
+    resizeObserver = null;
+    scrollHandler;
+    handleOpenChange() {
+        this.updateTour();
+    }
+    handleCurrentChange() {
+        this.updateTour();
+    }
+    componentWillLoad() {
+        if (this.open) {
+            this.updateTour();
+        }
+    }
+    componentDidLoad() {
+        this.scrollHandler = () => {
+            if (this.open) {
+                this.updateTargetRect();
+            }
+        };
+        window.addEventListener('scroll', this.scrollHandler, true);
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.open) {
+                this.updateTargetRect();
+            }
+        });
+        this.resizeObserver.observe(document.body);
+    }
+    disconnectedCallback() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+        }
+        window.removeEventListener('scroll', this.scrollHandler, true);
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    /**
+     * Retrieves the target DOM element for the current step.
+     * Handles string selectors, functions returning elements, or direct element references.
+     *
+     * @param target - The target definition from the step.
+     * @returns HTMLElement | null - The resolved element.
+     */
+    getTargetElement(target) {
+        if (!target)
+            return null;
+        if (typeof target === 'string') {
+            return document.querySelector(target);
+        }
+        if (typeof target === 'function') {
+            return target();
+        }
+        return target;
+    }
+    /**
+     * Updates the bounding rectangle of the target element.
+     * Used to position the tour panel and draw the mask cutout.
+     *
+     * Flow:
+     * 1. Checks if tour is open and steps exist.
+     * 2. Resolves the target element for the current step.
+     * 3. If target exists:
+     *    - Gets `getBoundingClientRect` to determine position and size.
+     *    - Updates the portal instance with the new target and placement preference.
+     * 4. If no target (center mode):
+     *    - Clears `targetRect`.
+     *    - Updates portal to center placement (fallback).
+     *
+     * @returns {void}
+     */
+    updateTargetRect() {
+        if (!this.open || !this.steps || !this.steps[this.current]) {
+            this.targetRect = null;
+            return;
+        }
+        const step = this.steps[this.current];
+        const targetEl = this.getTargetElement(step.target);
+        if (targetEl) {
+            this.targetRect = targetEl.getBoundingClientRect();
+            // Update portal position
+            if (this.portalInstance) {
+                this.portalInstance.update({
+                    target: targetEl,
+                    placement: step.placement || 'bottom',
+                });
+            }
+        }
+        else {
+            this.targetRect = null;
+            // If no target, center the panel
+            if (this.portalInstance) {
+                this.portalInstance.update({
+                    target: null,
+                    placement: 'bottom', // Fallback
+                });
+            }
+        }
+    }
+    /**
+     * Handles the "Next" button click.
+     * Advances to the next step or finishes the tour if at the end.
+     */
+    handleNext = () => {
+        if (this.current < this.steps.length - 1) {
+            this.current++;
+            this.xChange.emit(this.current);
+        }
+        else {
+            this.xFinish.emit();
+            this.handleClose();
+        }
+    };
+    /**
+     * Handles the "Previous" button click.
+     * Moves to the previous step.
+     */
+    handlePrev = () => {
+        if (this.current > 0) {
+            this.current--;
+            this.xChange.emit(this.current);
+        }
+    };
+    /**
+     * Handles the close action.
+     * Emits `xClose` event.
+     */
+    handleClose = () => {
+        this.xClose.emit();
+    };
+    /**
+     * Main update logic for the tour state.
+     * Manages the Portal instance and panel content.
+     *
+     * Flow:
+     * 1. If closed or no steps, destroys the portal to clean up.
+     * 2. Resolves target element for the current step.
+     * 3. Builds the tour panel element (`x-tour-panel`) with current props.
+     * 4. If no target, applies fixed positioning styles to center the panel on screen.
+     * 5. Creates or updates the `PortalController` instance with:
+     *    - Target element (or undefined for center).
+     *    - Placement preference from step.
+     *    - Z-index to ensure visibility.
+     *    - Panel content.
+     * 6. Calls `updateTargetRect` to ensure mask cutout is correct.
+     *
+     * @returns {void}
+     */
+    updateTour() {
+        if (!this.open || !this.steps.length) {
+            if (this.portalInstance) {
+                this.portalInstance.destroy();
+                this.portalInstance = null;
+            }
+            return;
+        }
+        const step = this.steps[this.current];
+        const targetEl = this.getTargetElement(step.target);
+        // Create or update panel content
+        const panel = this.buildTourPanel();
+        if (!targetEl) {
+            // Center the panel if no target
+            panel.style.position = 'fixed';
+            panel.style.top = '50%';
+            panel.style.left = '50%';
+            panel.style.transform = 'translate(-50%, -50%)';
+            panel.style.zIndex = this.zIndex + 1;
+        }
+        if (!this.portalInstance) {
+            this.portalInstance = portalController.PortalController.create({
+                open: true,
+                target: targetEl || undefined,
+                placement: step.placement || 'bottom',
+                zIndex: this.zIndex + 1,
+                content: panel,
+                offset: 12,
+                onPlacementChange: (p) => {
+                    this.activePlacement = p;
+                    panel.placement = p;
+                }
+            });
+        }
+        else {
+            this.portalInstance.update({
+                open: true,
+                target: targetEl || undefined,
+                placement: step.placement || 'bottom',
+                zIndex: this.zIndex + 1,
+                content: panel,
+                onPlacementChange: (p) => {
+                    this.activePlacement = p;
+                    panel.placement = p;
+                }
+            });
+        }
+        this.updateTargetRect();
+    }
+    /**
+     * Constructs the tour panel element.
+     * Assigns props and event listeners to the `x-tour-panel` component.
+     *
+     * @returns HTMLElement - The configured panel element.
+     */
+    buildTourPanel() {
+        const step = this.steps[this.current];
+        const panel = document.createElement('x-tour-panel');
+        panel.step = step;
+        panel.current = this.current;
+        panel.total = this.steps.length;
+        panel.arrow = this.arrow;
+        panel.placement = this.activePlacement;
+        panel.addEventListener('xNext', this.handleNext);
+        panel.addEventListener('xPrev', this.handlePrev);
+        panel.addEventListener('xClose', this.handleClose);
+        return panel;
+    }
+    /**
+     * Renders the Tour component (mainly the mask).
+     *
+     * Flow:
+     * 1. If not open, returns null (nothing rendered).
+     * 2. Calculates mask path:
+     *    - Starts with a full-screen rectangle covering the window.
+     *    - If a target exists, appends a path command to create a "hole" (cutout) around the target.
+     *    - Uses anti-clockwise winding rule to create the hole effect.
+     * 3. Renders the Host element with z-index.
+     * 4. Renders the SVG mask overlay if enabled.
+     *
+     * @returns {JSX.Element | null} The rendered component.
+     */
+    render() {
+        if (!this.open)
+            return null;
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        let maskPath = `M 0 0 h ${windowWidth} v ${windowHeight} h -${windowWidth} Z`;
+        if (this.targetRect) {
+            const { left, top, width, height } = this.targetRect;
+            const padding = 4;
+            const r = 2; // radius
+            const x = left - padding;
+            const y = top - padding;
+            const w = width + padding * 2;
+            const h = height + padding * 2;
+            // Anti-clockwise to create a hole
+            maskPath += ` M ${x + r} ${y} 
+                    h ${w - r * 2} 
+                    a ${r} ${r} 0 0 1 ${r} ${r} 
+                    v ${h - r * 2} 
+                    a ${r} ${r} 0 0 1 -${r} ${r} 
+                    h -${w - r * 2} 
+                    a ${r} ${r} 0 0 1 -${r} -${r} 
+                    v -${h - r * 2} 
+                    a ${r} ${r} 0 0 1 ${r} -${r} 
+                    Z`;
+        }
+        return (index.h(index.Host, { style: { zIndex: `${this.zIndex}` } }, this.mask && (index.h("div", { class: "x-tour-mask" }, index.h("svg", { class: "x-tour-svg", width: "100%", height: "100%", viewBox: `0 0 ${windowWidth} ${windowHeight}` }, index.h("path", { class: "x-tour-mask-path", d: maskPath, "fill-rule": "evenodd" }))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }],
+        "current": [{
+                "handleCurrentChange": 0
+            }]
+    }; }
+};
+XTour.style = xTourCss();
+
+exports.x_tour = XTour;