@aladinbs/react-guided-tour 1.0.1

package/dist/index.esm.js

@@ -0,0 +1,2097 @@
+import require$$0, { useMemo, useState, useEffect, useCallback, createContext, useContext, useRef } from 'react';
+
+class TourStorage {
+    constructor(key) {
+        this.key = key;
+    }
+    saveState(state) {
+        try {
+            const stateToSave = {
+                currentStepIndex: state.currentStepIndex,
+                completedSteps: state.completedSteps,
+                skippedSteps: state.skippedSteps,
+                isCompleted: false,
+                isSkipped: false,
+            };
+            localStorage.setItem(this.key, JSON.stringify(stateToSave));
+        }
+        catch (error) {
+            console.warn('Failed to save tour state to localStorage:', error);
+        }
+    }
+    getState() {
+        try {
+            const saved = localStorage.getItem(this.key);
+            if (!saved)
+                return null;
+            return JSON.parse(saved);
+        }
+        catch (error) {
+            console.warn('Failed to load tour state from localStorage:', error);
+            return null;
+        }
+    }
+    clearState() {
+        try {
+            localStorage.removeItem(this.key);
+        }
+        catch (error) {
+            console.warn('Failed to clear tour state from localStorage:', error);
+        }
+    }
+    hasState() {
+        try {
+            return localStorage.getItem(this.key) !== null;
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    saveCompletion() {
+        try {
+            const existing = this.getState() || {};
+            const stateToSave = {
+                ...existing,
+                isCompleted: true,
+                completedAt: new Date().toISOString(),
+            };
+            localStorage.setItem(this.key, JSON.stringify(stateToSave));
+        }
+        catch (error) {
+            console.warn('Failed to save tour completion to localStorage:', error);
+        }
+    }
+    saveSkip() {
+        try {
+            const existing = this.getState() || {};
+            const stateToSave = {
+                ...existing,
+                isSkipped: true,
+                skippedAt: new Date().toISOString(),
+            };
+            localStorage.setItem(this.key, JSON.stringify(stateToSave));
+        }
+        catch (error) {
+            console.warn('Failed to save tour skip to localStorage:', error);
+        }
+    }
+    isCompleted() {
+        try {
+            const saved = this.getState();
+            return saved?.isCompleted === true;
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    isSkipped() {
+        try {
+            const saved = this.getState();
+            return saved?.isSkipped === true;
+        }
+        catch (error) {
+            return false;
+        }
+    }
+}
+
+class TourEngine {
+    constructor(config) {
+        this.listeners = new Map();
+        this.config = config;
+        this.storage = new TourStorage(config.storage?.key || `tour-${config.id}`);
+        this.state = this.initializeState();
+    }
+    initializeState() {
+        const savedState = this.config.storage?.remember ? this.storage.getState() : null;
+        return {
+            isRunning: false,
+            currentStepIndex: savedState?.currentStepIndex || 0,
+            currentStep: null,
+            totalSteps: this.config.steps.length,
+            isLoading: false,
+            error: null,
+            completedSteps: savedState?.completedSteps || [],
+            skippedSteps: savedState?.skippedSteps || [],
+            isCompleted: savedState?.isCompleted || false,
+            isSkipped: savedState?.isSkipped || false,
+            completedAt: savedState?.completedAt,
+            skippedAt: savedState?.skippedAt,
+        };
+    }
+    getState() {
+        return { ...this.state };
+    }
+    getConfig() {
+        return { ...this.config };
+    }
+    async start() {
+        try {
+            this.setState({
+                isRunning: true,
+                isLoading: true,
+                error: null
+            });
+            this.emit('tour-start', { tourId: this.config.id });
+            await this.goToStep(this.state.currentStepIndex);
+            // STOP HERE - don't auto-advance
+            return;
+        }
+        catch (error) {
+            console.error('Error in TourEngine.start():', error);
+            this.handleError(error);
+        }
+    }
+    async next() {
+        if (!this.state.isRunning) {
+            return;
+        }
+        try {
+            const currentStep = this.getCurrentStep();
+            if (!currentStep) {
+                return;
+            }
+            // Execute after step hook
+            if (currentStep.afterStep) {
+                await currentStep.afterStep();
+            }
+            // Mark step as completed
+            this.markStepCompleted(currentStep.id);
+            // Check if this is the last step
+            if (this.state.currentStepIndex >= this.state.totalSteps - 1) {
+                await this.complete();
+                return;
+            }
+            // Go to next step
+            const nextStepIndex = this.state.currentStepIndex + 1;
+            await this.goToStep(nextStepIndex);
+        }
+        catch (error) {
+            console.error('Error in TourEngine.next():', error);
+            this.handleError(error);
+        }
+    }
+    async previous() {
+        if (!this.state.isRunning || this.state.currentStepIndex <= 0)
+            return;
+        try {
+            await this.goToStep(this.state.currentStepIndex - 1);
+        }
+        catch (error) {
+            this.handleError(error);
+        }
+    }
+    async goToStep(index) {
+        if (index < 0 || index >= this.state.totalSteps)
+            return;
+        try {
+            this.setState({ isLoading: true });
+            const step = this.config.steps[index];
+            // Execute before step hook
+            if (step.beforeStep) {
+                await step.beforeStep();
+            }
+            // Wait for element if specified
+            if (step.waitForElement && step.target) {
+                await this.waitForElement(step.target, step.waitTimeout || 5000);
+            }
+            this.setState({
+                currentStepIndex: index,
+                currentStep: step,
+                isLoading: false,
+            });
+            // Save state if persistence is enabled
+            if (this.config.storage?.remember) {
+                this.storage.saveState(this.state);
+            }
+            // Emit step change event
+            this.emit('step-change', { step, index });
+            if (this.config.onStepChange) {
+                this.config.onStepChange(step, index);
+            }
+        }
+        catch (error) {
+            this.setState({ isLoading: false });
+            this.handleError(error);
+        }
+    }
+    async skip() {
+        if (!this.state.isRunning)
+            return;
+        try {
+            const currentStep = this.getCurrentStep();
+            if (currentStep) {
+                this.markStepSkipped(currentStep.id);
+            }
+            this.setState({ isSkipped: true });
+            this.emit('tour-skip', { tourId: this.config.id, stepIndex: this.state.currentStepIndex });
+            if (this.config.onSkip) {
+                this.config.onSkip();
+            }
+            // Save skip state to localStorage
+            if (this.config.storage?.remember) {
+                this.storage.saveSkip();
+            }
+            await this.stop();
+        }
+        catch (error) {
+            console.error('Error in TourEngine.skip():', error);
+            this.handleError(error);
+        }
+    }
+    async complete() {
+        try {
+            this.setState({ isRunning: false, isCompleted: true });
+            this.emit('tour-complete', { tourId: this.config.id });
+            if (this.config.onComplete) {
+                this.config.onComplete();
+            }
+            // Save completion state to localStorage
+            if (this.config.storage?.remember) {
+                this.storage.saveCompletion();
+            }
+        }
+        catch (error) {
+            console.error('Error in TourEngine.complete():', error);
+            this.handleError(error);
+        }
+    }
+    async stop() {
+        this.setState({
+            isRunning: false,
+            currentStep: null,
+        });
+    }
+    getCurrentStep() {
+        return this.state.currentStep;
+    }
+    isFirstStep() {
+        return this.state.currentStepIndex === 0;
+    }
+    isLastStep() {
+        return this.state.currentStepIndex === this.state.totalSteps - 1;
+    }
+    canGoNext() {
+        return this.state.isRunning && !this.isLastStep() && !this.state.isLoading;
+    }
+    canGoPrevious() {
+        return this.state.isRunning && !this.isFirstStep() && !this.state.isLoading;
+    }
+    shouldShowTour() {
+        if (!this.config.storage?.remember)
+            return true;
+        return !this.storage.isCompleted() && !this.storage.isSkipped();
+    }
+    resetTourState() {
+        if (this.config.storage?.remember) {
+            this.storage.clearState();
+        }
+        this.state = this.initializeState();
+    }
+    async waitForElement(selector, timeout) {
+        return new Promise((resolve, reject) => {
+            const element = document.querySelector(selector);
+            if (element) {
+                resolve(element);
+                return;
+            }
+            const observer = new MutationObserver(() => {
+                const element = document.querySelector(selector);
+                if (element) {
+                    observer.disconnect();
+                    clearTimeout(timeoutId);
+                    resolve(element);
+                }
+            });
+            const timeoutId = setTimeout(() => {
+                observer.disconnect();
+                reject(new Error(`Element not found: ${selector}`));
+            }, timeout);
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        });
+    }
+    markStepCompleted(stepId) {
+        if (!this.state.completedSteps.includes(stepId)) {
+            this.setState({
+                completedSteps: [...this.state.completedSteps, stepId],
+            });
+        }
+    }
+    markStepSkipped(stepId) {
+        if (!this.state.skippedSteps.includes(stepId)) {
+            this.setState({
+                skippedSteps: [...this.state.skippedSteps, stepId],
+            });
+        }
+    }
+    handleError(error) {
+        this.setState({
+            error: error.message,
+            isLoading: false,
+        });
+        this.emit('error', { error, step: this.getCurrentStep() || undefined });
+    }
+    setState(updates) {
+        this.state = { ...this.state, ...updates };
+        // Emit state change event to notify subscribers
+        this.emit('state-change', this.state);
+    }
+    // Event system
+    on(event, callback) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, new Set());
+        }
+        this.listeners.get(event).add(callback);
+    }
+    off(event, callback) {
+        const callbacks = this.listeners.get(event);
+        if (callbacks) {
+            callbacks.delete(callback);
+        }
+    }
+    emit(event, data) {
+        const callbacks = this.listeners.get(event);
+        if (callbacks) {
+            callbacks.forEach(callback => callback(data));
+        }
+    }
+    subscribe(callback) {
+        const handler = () => callback(this.getState());
+        // Listen to all events that might change state
+        this.on('step-change', handler);
+        this.on('tour-start', handler);
+        this.on('tour-complete', handler);
+        this.on('tour-skip', handler);
+        this.on('error', handler);
+        this.on('state-change', handler);
+        // Return unsubscribe function
+        return () => {
+            this.off('step-change', handler);
+            this.off('tour-start', handler);
+            this.off('tour-complete', handler);
+            this.off('tour-skip', handler);
+            this.off('error', handler);
+            this.off('state-change', handler);
+        };
+    }
+}
+
+class TourActions {
+    constructor() {
+        this.integrations = new Map();
+    }
+    registerIntegration(integration) {
+        this.integrations.set(integration.name, integration);
+    }
+    unregisterIntegration(name) {
+        this.integrations.delete(name);
+    }
+    async execute(action, element) {
+        // Find the appropriate integration for this action
+        const integration = this.findIntegration(action);
+        if (!integration) {
+            // Fallback to default action handling
+            await this.executeDefault(action, element);
+            return;
+        }
+        try {
+            await integration.execute(action, element);
+        }
+        catch (error) {
+            console.error(`Integration ${integration.name} failed to execute action:`, error);
+            // Fallback to default action handling
+            await this.executeDefault(action, element);
+        }
+    }
+    findIntegration(action) {
+        for (const integration of this.integrations.values()) {
+            if (integration.canHandle(action)) {
+                return integration;
+            }
+        }
+        return null;
+    }
+    async executeDefault(action, element) {
+        const delay = action.delay || 0;
+        if (delay > 0) {
+            await this.sleep(delay);
+        }
+        switch (action.type) {
+            case 'click':
+                await this.handleClick(action, element);
+                break;
+            case 'navigate':
+                await this.handleNavigate(action);
+                break;
+            case 'highlight':
+                // Highlighting is handled by the UI components
+                break;
+            case 'custom':
+                if (action.handler) {
+                    await action.handler();
+                }
+                break;
+            default:
+                console.warn(`Unknown action type: ${action.type}`);
+        }
+    }
+    async handleClick(action, element) {
+        let targetElement = element;
+        if (!targetElement && action.target) {
+            targetElement = document.querySelector(action.target);
+        }
+        if (!targetElement) {
+            throw new Error(`Click target not found: ${action.target}`);
+        }
+        // Ensure element is visible and clickable
+        targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        // Wait a bit for scroll to complete
+        await this.sleep(300);
+        // Dispatch click event
+        const clickEvent = new MouseEvent('click', {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+        });
+        targetElement.dispatchEvent(clickEvent);
+    }
+    async handleNavigate(action) {
+        if (!action.target) {
+            throw new Error('Navigate action requires a target URL');
+        }
+        // Check if it's a hash navigation (same page)
+        if (action.target.startsWith('#')) {
+            window.location.hash = action.target;
+            return;
+        }
+        // Check if it's a relative path
+        if (action.target.startsWith('/')) {
+            window.location.pathname = action.target;
+            return;
+        }
+        // Full URL navigation
+        window.location.href = action.target;
+    }
+    sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+    getRegisteredIntegrations() {
+        return Array.from(this.integrations.keys());
+    }
+    hasIntegration(name) {
+        return this.integrations.has(name);
+    }
+}
+
+var jsxRuntime = {exports: {}};
+
+var reactJsxRuntime_production = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_production;
+
+function requireReactJsxRuntime_production () {
+	if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
+	hasRequiredReactJsxRuntime_production = 1;
+	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+	function jsxProd(type, config, maybeKey) {
+	  var key = null;
+	  void 0 !== maybeKey && (key = "" + maybeKey);
+	  void 0 !== config.key && (key = "" + config.key);
+	  if ("key" in config) {
+	    maybeKey = {};
+	    for (var propName in config)
+	      "key" !== propName && (maybeKey[propName] = config[propName]);
+	  } else maybeKey = config;
+	  config = maybeKey.ref;
+	  return {
+	    $$typeof: REACT_ELEMENT_TYPE,
+	    type: type,
+	    key: key,
+	    ref: void 0 !== config ? config : null,
+	    props: maybeKey
+	  };
+	}
+	reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
+	reactJsxRuntime_production.jsx = jsxProd;
+	reactJsxRuntime_production.jsxs = jsxProd;
+	return reactJsxRuntime_production;
+}
+
+var reactJsxRuntime_development = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_development;
+
+function requireReactJsxRuntime_development () {
+	if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
+	hasRequiredReactJsxRuntime_development = 1;
+	"production" !== process.env.NODE_ENV &&
+	  (function () {
+	    function getComponentNameFromType(type) {
+	      if (null == type) return null;
+	      if ("function" === typeof type)
+	        return type.$$typeof === REACT_CLIENT_REFERENCE
+	          ? null
+	          : type.displayName || type.name || null;
+	      if ("string" === typeof type) return type;
+	      switch (type) {
+	        case REACT_FRAGMENT_TYPE:
+	          return "Fragment";
+	        case REACT_PROFILER_TYPE:
+	          return "Profiler";
+	        case REACT_STRICT_MODE_TYPE:
+	          return "StrictMode";
+	        case REACT_SUSPENSE_TYPE:
+	          return "Suspense";
+	        case REACT_SUSPENSE_LIST_TYPE:
+	          return "SuspenseList";
+	        case REACT_ACTIVITY_TYPE:
+	          return "Activity";
+	      }
+	      if ("object" === typeof type)
+	        switch (
+	          ("number" === typeof type.tag &&
+	            console.error(
+	              "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+	            ),
+	          type.$$typeof)
+	        ) {
+	          case REACT_PORTAL_TYPE:
+	            return "Portal";
+	          case REACT_CONTEXT_TYPE:
+	            return type.displayName || "Context";
+	          case REACT_CONSUMER_TYPE:
+	            return (type._context.displayName || "Context") + ".Consumer";
+	          case REACT_FORWARD_REF_TYPE:
+	            var innerType = type.render;
+	            type = type.displayName;
+	            type ||
+	              ((type = innerType.displayName || innerType.name || ""),
+	              (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
+	            return type;
+	          case REACT_MEMO_TYPE:
+	            return (
+	              (innerType = type.displayName || null),
+	              null !== innerType
+	                ? innerType
+	                : getComponentNameFromType(type.type) || "Memo"
+	            );
+	          case REACT_LAZY_TYPE:
+	            innerType = type._payload;
+	            type = type._init;
+	            try {
+	              return getComponentNameFromType(type(innerType));
+	            } catch (x) {}
+	        }
+	      return null;
+	    }
+	    function testStringCoercion(value) {
+	      return "" + value;
+	    }
+	    function checkKeyStringCoercion(value) {
+	      try {
+	        testStringCoercion(value);
+	        var JSCompiler_inline_result = !1;
+	      } catch (e) {
+	        JSCompiler_inline_result = true;
+	      }
+	      if (JSCompiler_inline_result) {
+	        JSCompiler_inline_result = console;
+	        var JSCompiler_temp_const = JSCompiler_inline_result.error;
+	        var JSCompiler_inline_result$jscomp$0 =
+	          ("function" === typeof Symbol &&
+	            Symbol.toStringTag &&
+	            value[Symbol.toStringTag]) ||
+	          value.constructor.name ||
+	          "Object";
+	        JSCompiler_temp_const.call(
+	          JSCompiler_inline_result,
+	          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+	          JSCompiler_inline_result$jscomp$0
+	        );
+	        return testStringCoercion(value);
+	      }
+	    }
+	    function getTaskName(type) {
+	      if (type === REACT_FRAGMENT_TYPE) return "<>";
+	      if (
+	        "object" === typeof type &&
+	        null !== type &&
+	        type.$$typeof === REACT_LAZY_TYPE
+	      )
+	        return "<...>";
+	      try {
+	        var name = getComponentNameFromType(type);
+	        return name ? "<" + name + ">" : "<...>";
+	      } catch (x) {
+	        return "<...>";
+	      }
+	    }
+	    function getOwner() {
+	      var dispatcher = ReactSharedInternals.A;
+	      return null === dispatcher ? null : dispatcher.getOwner();
+	    }
+	    function UnknownOwner() {
+	      return Error("react-stack-top-frame");
+	    }
+	    function hasValidKey(config) {
+	      if (hasOwnProperty.call(config, "key")) {
+	        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
+	        if (getter && getter.isReactWarning) return false;
+	      }
+	      return void 0 !== config.key;
+	    }
+	    function defineKeyPropWarningGetter(props, displayName) {
+	      function warnAboutAccessingKey() {
+	        specialPropKeyWarningShown ||
+	          ((specialPropKeyWarningShown = true),
+	          console.error(
+	            "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+	            displayName
+	          ));
+	      }
+	      warnAboutAccessingKey.isReactWarning = true;
+	      Object.defineProperty(props, "key", {
+	        get: warnAboutAccessingKey,
+	        configurable: true
+	      });
+	    }
+	    function elementRefGetterWithDeprecationWarning() {
+	      var componentName = getComponentNameFromType(this.type);
+	      didWarnAboutElementRef[componentName] ||
+	        ((didWarnAboutElementRef[componentName] = true),
+	        console.error(
+	          "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+	        ));
+	      componentName = this.props.ref;
+	      return void 0 !== componentName ? componentName : null;
+	    }
+	    function ReactElement(type, key, props, owner, debugStack, debugTask) {
+	      var refProp = props.ref;
+	      type = {
+	        $$typeof: REACT_ELEMENT_TYPE,
+	        type: type,
+	        key: key,
+	        props: props,
+	        _owner: owner
+	      };
+	      null !== (void 0 !== refProp ? refProp : null)
+	        ? Object.defineProperty(type, "ref", {
+	            enumerable: false,
+	            get: elementRefGetterWithDeprecationWarning
+	          })
+	        : Object.defineProperty(type, "ref", { enumerable: false, value: null });
+	      type._store = {};
+	      Object.defineProperty(type._store, "validated", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: 0
+	      });
+	      Object.defineProperty(type, "_debugInfo", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: null
+	      });
+	      Object.defineProperty(type, "_debugStack", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugStack
+	      });
+	      Object.defineProperty(type, "_debugTask", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugTask
+	      });
+	      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
+	      return type;
+	    }
+	    function jsxDEVImpl(
+	      type,
+	      config,
+	      maybeKey,
+	      isStaticChildren,
+	      debugStack,
+	      debugTask
+	    ) {
+	      var children = config.children;
+	      if (void 0 !== children)
+	        if (isStaticChildren)
+	          if (isArrayImpl(children)) {
+	            for (
+	              isStaticChildren = 0;
+	              isStaticChildren < children.length;
+	              isStaticChildren++
+	            )
+	              validateChildKeys(children[isStaticChildren]);
+	            Object.freeze && Object.freeze(children);
+	          } else
+	            console.error(
+	              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+	            );
+	        else validateChildKeys(children);
+	      if (hasOwnProperty.call(config, "key")) {
+	        children = getComponentNameFromType(type);
+	        var keys = Object.keys(config).filter(function (k) {
+	          return "key" !== k;
+	        });
+	        isStaticChildren =
+	          0 < keys.length
+	            ? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
+	            : "{key: someKey}";
+	        didWarnAboutKeySpread[children + isStaticChildren] ||
+	          ((keys =
+	            0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
+	          console.error(
+	            'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
+	            isStaticChildren,
+	            children,
+	            keys,
+	            children
+	          ),
+	          (didWarnAboutKeySpread[children + isStaticChildren] = true));
+	      }
+	      children = null;
+	      void 0 !== maybeKey &&
+	        (checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
+	      hasValidKey(config) &&
+	        (checkKeyStringCoercion(config.key), (children = "" + config.key));
+	      if ("key" in config) {
+	        maybeKey = {};
+	        for (var propName in config)
+	          "key" !== propName && (maybeKey[propName] = config[propName]);
+	      } else maybeKey = config;
+	      children &&
+	        defineKeyPropWarningGetter(
+	          maybeKey,
+	          "function" === typeof type
+	            ? type.displayName || type.name || "Unknown"
+	            : type
+	        );
+	      return ReactElement(
+	        type,
+	        children,
+	        maybeKey,
+	        getOwner(),
+	        debugStack,
+	        debugTask
+	      );
+	    }
+	    function validateChildKeys(node) {
+	      isValidElement(node)
+	        ? node._store && (node._store.validated = 1)
+	        : "object" === typeof node &&
+	          null !== node &&
+	          node.$$typeof === REACT_LAZY_TYPE &&
+	          ("fulfilled" === node._payload.status
+	            ? isValidElement(node._payload.value) &&
+	              node._payload.value._store &&
+	              (node._payload.value._store.validated = 1)
+	            : node._store && (node._store.validated = 1));
+	    }
+	    function isValidElement(object) {
+	      return (
+	        "object" === typeof object &&
+	        null !== object &&
+	        object.$$typeof === REACT_ELEMENT_TYPE
+	      );
+	    }
+	    var React = require$$0,
+	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
+	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
+	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
+	      REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
+	      REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
+	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
+	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
+	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
+	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
+	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
+	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
+	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
+	      ReactSharedInternals =
+	        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+	      hasOwnProperty = Object.prototype.hasOwnProperty,
+	      isArrayImpl = Array.isArray,
+	      createTask = console.createTask
+	        ? console.createTask
+	        : function () {
+	            return null;
+	          };
+	    React = {
+	      react_stack_bottom_frame: function (callStackForError) {
+	        return callStackForError();
+	      }
+	    };
+	    var specialPropKeyWarningShown;
+	    var didWarnAboutElementRef = {};
+	    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
+	      React,
+	      UnknownOwner
+	    )();
+	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
+	    var didWarnAboutKeySpread = {};
+	    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
+	    reactJsxRuntime_development.jsx = function (type, config, maybeKey) {
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        false,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
+	    };
+	    reactJsxRuntime_development.jsxs = function (type, config, maybeKey) {
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        true,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
+	    };
+	  })();
+	return reactJsxRuntime_development;
+}
+
+if (process.env.NODE_ENV === 'production') {
+  jsxRuntime.exports = requireReactJsxRuntime_production();
+} else {
+  jsxRuntime.exports = requireReactJsxRuntime_development();
+}
+
+var jsxRuntimeExports = jsxRuntime.exports;
+
+function useTourEngine(config) {
+    const actions = useMemo(() => new TourActions(), []);
+    const engine = useMemo(() => {
+        const tourEngine = new TourEngine(config);
+        return tourEngine;
+    }, [config]);
+    const [state, setState] = useState(engine.getState());
+    useEffect(() => {
+        const unsubscribe = engine.subscribe(setState);
+        return unsubscribe;
+    }, [engine]);
+    const start = useCallback(async () => {
+        try {
+            await engine.start();
+        }
+        catch (error) {
+            console.error('Error in useTourEngine.start():', error);
+        }
+    }, [engine]);
+    const stop = useCallback(async () => {
+        await engine.stop();
+    }, [engine]);
+    const next = useCallback(async () => {
+        const currentStep = engine.getCurrentStep();
+        if (currentStep?.action) {
+            // Execute the step action first
+            await actions.execute(currentStep.action);
+        }
+        await engine.next();
+    }, [engine, actions]);
+    const previous = useCallback(async () => {
+        await engine.previous();
+    }, [engine]);
+    const skip = useCallback(async () => {
+        await engine.skip();
+    }, [engine]);
+    const goToStep = useCallback(async (index) => {
+        await engine.goToStep(index);
+    }, [engine]);
+    return {
+        state,
+        start,
+        stop,
+        next,
+        previous,
+        skip,
+        goToStep,
+        isFirstStep: engine.isFirstStep(),
+        isLastStep: engine.isLastStep(),
+        canGoNext: engine.canGoNext(),
+        canGoPrevious: engine.canGoPrevious(),
+        currentStep: engine.getCurrentStep(),
+        engine,
+        actions,
+    };
+}
+
+const TourContext = createContext(null);
+const defaultTheme = {
+    primaryColor: '#3b82f6',
+    backgroundColor: '#ffffff',
+    textColor: '#1f2937',
+    borderRadius: '12px',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontSize: '14px',
+    zIndex: 9999,
+    overlay: {
+        backgroundColor: '#000000',
+        opacity: 0.5,
+    },
+    highlight: {
+        borderColor: '#3b82f6',
+        borderWidth: '4px',
+        glowColor: 'rgba(59, 130, 246, 0.3)',
+        animation: 'tour-highlight-pulse 2s infinite',
+    },
+    popover: {
+        backgroundColor: '#ffffff',
+        borderColor: '#e5e7eb',
+        shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+        maxWidth: '384px',
+    },
+};
+function TourProvider({ config, children }) {
+    const tourEngine = useTourEngine(config);
+    const theme = { ...defaultTheme, ...config.theme };
+    const contextValue = {
+        ...tourEngine,
+        config,
+        theme,
+    };
+    return (jsxRuntimeExports.jsx(TourContext.Provider, { value: contextValue, children: children }));
+}
+function useTour() {
+    const context = useContext(TourContext);
+    if (!context) {
+        throw new Error('useTour must be used within a TourProvider');
+    }
+    return context;
+}
+
+function getElementPosition(element) {
+    const rect = element.getBoundingClientRect();
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    return {
+        top: rect.top + scrollTop,
+        left: rect.left + scrollLeft,
+        width: rect.width,
+        height: rect.height,
+        right: rect.right + scrollLeft,
+        bottom: rect.bottom + scrollTop,
+    };
+}
+function calculatePopoverPosition(targetElement, popoverElement, preferredPlacement = 'top') {
+    const targetPos = getElementPosition(targetElement);
+    const popoverRect = popoverElement.getBoundingClientRect();
+    const viewport = {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        scrollTop: window.pageYOffset || document.documentElement.scrollTop,
+        scrollLeft: window.pageXOffset || document.documentElement.scrollLeft,
+    };
+    const spacing = 12; // Gap between target and popover
+    const positions = {
+        top: {
+            top: targetPos.top - popoverRect.height - spacing,
+            left: targetPos.left + (targetPos.width - popoverRect.width) / 2,
+            placement: 'top',
+        },
+        bottom: {
+            top: targetPos.bottom + spacing,
+            left: targetPos.left + (targetPos.width - popoverRect.width) / 2,
+            placement: 'bottom',
+        },
+        left: {
+            top: targetPos.top + (targetPos.height - popoverRect.height) / 2,
+            left: targetPos.left - popoverRect.width - spacing,
+            placement: 'left',
+        },
+        right: {
+            top: targetPos.top + (targetPos.height - popoverRect.height) / 2,
+            left: targetPos.right + spacing,
+            placement: 'right',
+        },
+        center: {
+            top: viewport.scrollTop + (viewport.height - popoverRect.height) / 2,
+            left: viewport.scrollLeft + (viewport.width - popoverRect.width) / 2,
+            placement: 'center',
+        },
+    };
+    // Check if preferred placement fits in viewport
+    const preferred = positions[preferredPlacement];
+    if (isPositionInViewport(preferred, popoverRect, viewport)) {
+        return preferred;
+    }
+    // Try other placements in order of preference
+    const fallbackOrder = ['bottom', 'top', 'right', 'left', 'center'];
+    for (const placement of fallbackOrder) {
+        if (placement === preferredPlacement)
+            continue;
+        const position = positions[placement];
+        if (isPositionInViewport(position, popoverRect, viewport)) {
+            return position;
+        }
+    }
+    // If nothing fits, use center as fallback
+    return positions.center;
+}
+function isPositionInViewport(position, popoverRect, viewport) {
+    const margin = 16; // Minimum margin from viewport edges
+    return (position.left >= viewport.scrollLeft + margin &&
+        position.left + popoverRect.width <= viewport.scrollLeft + viewport.width - margin &&
+        position.top >= viewport.scrollTop + margin &&
+        position.top + popoverRect.height <= viewport.scrollTop + viewport.height - margin);
+}
+function scrollToElement(element, behavior = 'smooth') {
+    element.scrollIntoView({
+        behavior,
+        block: 'center',
+        inline: 'center',
+    });
+}
+function isElementInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return (rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= window.innerHeight &&
+        rect.right <= window.innerWidth);
+}
+function getViewportCenter() {
+    return {
+        x: window.innerWidth / 2,
+        y: window.innerHeight / 2,
+    };
+}
+
+function useTourHighlight(step) {
+    const [targetElement, setTargetElement] = useState(null);
+    const [highlightStyle, setHighlightStyle] = useState({});
+    const [isVisible, setIsVisible] = useState(false);
+    const observerRef = useRef(null);
+    useEffect(() => {
+        if (!step?.target) {
+            setTargetElement(null);
+            setIsVisible(false);
+            return;
+        }
+        const findAndHighlightElement = () => {
+            const element = step.highlight?.element ||
+                document.querySelector(step.target);
+            if (element) {
+                setTargetElement(element);
+                updateHighlightStyle(element, step.highlight);
+                setIsVisible(true);
+                // Scroll to element if not in viewport
+                if (!isElementInViewport(element)) {
+                    scrollToElement(element);
+                }
+            }
+            else {
+                setTargetElement(null);
+                setIsVisible(false);
+            }
+        };
+        // Initial attempt to find element
+        findAndHighlightElement();
+        // Set up mutation observer to watch for DOM changes
+        if (!targetElement && step.waitForElement !== false) {
+            observerRef.current = new MutationObserver(() => {
+                findAndHighlightElement();
+            });
+            observerRef.current.observe(document.body, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['class', 'id', 'data-tour'],
+            });
+        }
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+                observerRef.current = null;
+            }
+        };
+    }, [step?.target, step?.highlight, step?.waitForElement, targetElement]);
+    // Update highlight position when element moves (e.g., during animations)
+    useEffect(() => {
+        if (!targetElement || !isVisible)
+            return;
+        const updatePosition = () => {
+            updateHighlightStyle(targetElement, step?.highlight);
+        };
+        const handleScroll = () => updatePosition();
+        const handleResize = () => updatePosition();
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        window.addEventListener('resize', handleResize, { passive: true });
+        // Use ResizeObserver to watch for element size changes
+        let resizeObserver = null;
+        if (window.ResizeObserver) {
+            resizeObserver = new ResizeObserver(updatePosition);
+            resizeObserver.observe(targetElement);
+        }
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            window.removeEventListener('resize', handleResize);
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, [targetElement, isVisible, step?.highlight]);
+    const updateHighlightStyle = (element, config) => {
+        const position = getElementPosition(element);
+        const padding = config?.padding || 4;
+        const borderRadius = config?.borderRadius || 8;
+        const borderWidth = config?.borderWidth || 4;
+        setHighlightStyle({
+            position: 'absolute',
+            top: position.top - padding,
+            left: position.left - padding,
+            width: position.width + (padding * 2),
+            height: position.height + (padding * 2),
+            border: `${borderWidth}px solid var(--tour-highlight-color, #3b82f6)`,
+            borderRadius: `${borderRadius}px`,
+            boxShadow: config?.animate !== false
+                ? '0 0 0 4px rgba(59, 130, 246, 0.2), 0 0 20px rgba(59, 130, 246, 0.3)'
+                : '0 0 0 4px rgba(59, 130, 246, 0.2)',
+            pointerEvents: 'none',
+            zIndex: 9998,
+            transition: config?.animate !== false
+                ? 'all 0.3s ease-in-out'
+                : 'none',
+            animation: config?.animate !== false
+                ? 'tour-highlight-pulse 2s infinite'
+                : 'none',
+        });
+    };
+    return {
+        targetElement,
+        highlightStyle,
+        isVisible,
+    };
+}
+
+function TourOverlay({ className }) {
+    const { state, theme, stop } = useTour();
+    const { targetElement, highlightStyle, isVisible } = useTourHighlight(state.currentStep);
+    if (!state.isRunning || !state.currentStep) {
+        return null;
+    }
+    const overlayStyle = {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        backgroundColor: theme.overlay?.backgroundColor || '#000000',
+        opacity: theme.overlay?.opacity || 0.5,
+        zIndex: (theme.zIndex || 9999) - 1,
+        pointerEvents: 'auto',
+    };
+    const handleOverlayClick = () => {
+        if (state.currentStep?.canSkip !== false) {
+            stop();
+        }
+    };
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { style: overlayStyle, onClick: handleOverlayClick, className: className, "data-tour-overlay": true }), isVisible && targetElement && (jsxRuntimeExports.jsx("div", { style: highlightStyle, "data-tour-highlight": true })), jsxRuntimeExports.jsx("style", { children: `
+        @keyframes tour-highlight-pulse {
+          0%, 100% {
+            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 0 20px rgba(59, 130, 246, 0.3);
+          }
+          50% {
+            box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.3), 0 0 30px rgba(59, 130, 246, 0.5);
+          }
+        }
+        
+        @keyframes tour-fade-in {
+          from {
+            opacity: 0;
+            transform: scale(0.95);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+        
+        [data-tour-overlay] {
+          animation: tour-fade-in 0.2s ease-out;
+        }
+        
+        [data-tour-highlight] {
+          animation: tour-fade-in 0.3s ease-out;
+        }
+      ` })] }));
+}
+
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+function TourPopover({ className }) {
+    const { state, theme, next, previous, skip, stop, isFirstStep, isLastStep, canGoNext, canGoPrevious } = useTour();
+    const { targetElement } = useTourHighlight(state.currentStep);
+    const popoverRef = useRef(null);
+    const [position, setPosition] = useState({ top: 0, left: 0, placement: 'top' });
+    useEffect(() => {
+        if (!popoverRef.current || !targetElement || !state.currentStep)
+            return;
+        const updatePosition = () => {
+            const newPosition = calculatePopoverPosition(targetElement, popoverRef.current, state.currentStep.placement || 'top');
+            setPosition(newPosition);
+        };
+        updatePosition();
+        const handleResize = () => updatePosition();
+        const handleScroll = () => updatePosition();
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, [targetElement, state.currentStep]);
+    if (!state.isRunning || !state.currentStep) {
+        return null;
+    }
+    const step = state.currentStep;
+    const popoverConfig = step.popover || {};
+    const popoverStyle = {
+        position: 'absolute',
+        top: position.top,
+        left: position.left,
+        maxWidth: theme.popover?.maxWidth || '384px',
+        backgroundColor: theme.popover?.backgroundColor || theme.backgroundColor || '#ffffff',
+        borderTopWidth: '1px',
+        borderRightWidth: '1px',
+        borderBottomWidth: '1px',
+        borderLeftWidth: '1px',
+        borderTopStyle: 'solid',
+        borderRightStyle: 'solid',
+        borderBottomStyle: 'solid',
+        borderLeftStyle: 'solid',
+        borderTopColor: theme.popover?.borderColor || '#e5e7eb',
+        borderRightColor: theme.popover?.borderColor || '#e5e7eb',
+        borderBottomColor: theme.popover?.borderColor || '#e5e7eb',
+        borderLeftColor: theme.popover?.borderColor || '#e5e7eb',
+        borderRadius: theme.borderRadius || '12px',
+        boxShadow: theme.popover?.shadow || '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+        fontFamily: theme.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        fontSize: theme.fontSize || '14px',
+        color: theme.textColor || '#1f2937',
+        zIndex: theme.zIndex || 9999,
+        animation: 'tour-fade-in 0.3s ease-out',
+    };
+    const handleNext = async () => {
+        if (canGoNext || isLastStep) {
+            await next();
+        }
+    };
+    const handlePrevious = async () => {
+        if (canGoPrevious) {
+            await previous();
+        }
+    };
+    const handleSkip = async () => {
+        await skip();
+    };
+    const handleClose = async () => {
+        await stop();
+    };
+    return (jsxRuntimeExports.jsxs("div", { ref: popoverRef, style: {
+            ...popoverStyle,
+            pointerEvents: 'auto',
+            userSelect: 'none',
+        }, className: clsx('tour-popover', className, popoverConfig.className), "data-tour-popover": true, "data-placement": position.placement, onClick: (e) => {
+            e.stopPropagation();
+        }, children: [jsxRuntimeExports.jsxs("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: '16px 20px 0 20px'
+                }, children: [jsxRuntimeExports.jsx("button", { onClick: handleClose, style: {
+                            background: 'none',
+                            borderTopWidth: '0',
+                            borderRightWidth: '0',
+                            borderBottomWidth: '0',
+                            borderLeftWidth: '0',
+                            fontSize: '18px',
+                            cursor: 'pointer',
+                            color: '#6b7280',
+                            padding: '4px',
+                            borderRadius: '4px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: '24px',
+                            height: '24px',
+                        }, "aria-label": "Close tour", children: "\u00D7" }), (popoverConfig.showProgress !== false && state.totalSteps > 1) && (jsxRuntimeExports.jsxs("div", { style: {
+                            backgroundColor: theme.primaryColor || '#3b82f6',
+                            color: 'white',
+                            padding: '4px 8px',
+                            borderRadius: '12px',
+                            fontSize: '12px',
+                            fontWeight: '500',
+                        }, children: [state.currentStepIndex + 1, " of ", state.totalSteps] }))] }), jsxRuntimeExports.jsxs("div", { style: { padding: '16px 20px' }, children: [(popoverConfig.title || step.title) && (jsxRuntimeExports.jsx("h3", { style: {
+                            margin: '0 0 8px 0',
+                            fontSize: '16px',
+                            fontWeight: '600',
+                            color: theme.textColor || '#1f2937',
+                        }, children: popoverConfig.title || step.title })), jsxRuntimeExports.jsx("div", { style: {
+                            margin: '0 0 16px 0',
+                            lineHeight: '1.5',
+                            color: theme.textColor || '#374151',
+                        }, children: popoverConfig.content || step.content })] }), jsxRuntimeExports.jsxs("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: '0 20px 20px 20px',
+                    gap: '12px',
+                }, children: [(popoverConfig.showSkip !== false && step.canSkip !== false) && (jsxRuntimeExports.jsx("button", { onClick: (_e) => {
+                            handleSkip();
+                        }, style: {
+                            background: 'none',
+                            borderTopWidth: '0',
+                            borderRightWidth: '0',
+                            borderBottomWidth: '0',
+                            borderLeftWidth: '0',
+                            color: '#6b7280',
+                            cursor: 'pointer',
+                            padding: '8px 16px',
+                            borderRadius: '8px',
+                            fontSize: '14px',
+                            fontWeight: '500',
+                            transition: 'all 0.2s ease',
+                            pointerEvents: 'auto',
+                            position: 'relative',
+                            zIndex: 99999,
+                        }, children: popoverConfig.skipLabel || 'Skip Tour' })), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: '8px', marginLeft: 'auto' }, children: [!isFirstStep && (jsxRuntimeExports.jsx("button", { onClick: handlePrevious, disabled: !canGoPrevious, style: {
+                                    backgroundColor: 'transparent',
+                                    borderTopWidth: '1px',
+                                    borderRightWidth: '1px',
+                                    borderBottomWidth: '1px',
+                                    borderLeftWidth: '1px',
+                                    borderTopStyle: 'solid',
+                                    borderRightStyle: 'solid',
+                                    borderBottomStyle: 'solid',
+                                    borderLeftStyle: 'solid',
+                                    borderTopColor: theme.primaryColor || '#3b82f6',
+                                    borderRightColor: theme.primaryColor || '#3b82f6',
+                                    borderBottomColor: theme.primaryColor || '#3b82f6',
+                                    borderLeftColor: theme.primaryColor || '#3b82f6',
+                                    color: theme.primaryColor || '#3b82f6',
+                                    cursor: canGoPrevious ? 'pointer' : 'not-allowed',
+                                    padding: '8px 16px',
+                                    borderRadius: '8px',
+                                    fontSize: '14px',
+                                    fontWeight: '500',
+                                    opacity: canGoPrevious ? 1 : 0.5,
+                                    transition: 'all 0.2s ease',
+                                }, children: "Previous" })), jsxRuntimeExports.jsx("button", { onClick: (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleNext();
+                                }, disabled: false, style: {
+                                    backgroundColor: theme.primaryColor || '#3b82f6',
+                                    borderTopWidth: '0',
+                                    borderRightWidth: '0',
+                                    borderBottomWidth: '0',
+                                    borderLeftWidth: '0',
+                                    color: 'white',
+                                    cursor: 'pointer',
+                                    padding: '8px 16px',
+                                    borderRadius: '8px',
+                                    fontSize: '14px',
+                                    fontWeight: '500',
+                                    opacity: 1,
+                                    transition: 'all 0.2s ease',
+                                    pointerEvents: 'auto',
+                                    position: 'relative',
+                                    zIndex: 99999,
+                                }, children: isLastStep
+                                    ? (popoverConfig.finishLabel || 'Finish')
+                                    : (popoverConfig.nextLabel || 'Next') })] })] }), position.placement !== 'center' && (jsxRuntimeExports.jsx("div", { style: {
+                    position: 'absolute',
+                    width: '12px',
+                    height: '12px',
+                    backgroundColor: theme.popover?.backgroundColor || theme.backgroundColor || '#ffffff',
+                    borderTopWidth: '1px',
+                    borderRightWidth: '1px',
+                    borderBottomWidth: '1px',
+                    borderLeftWidth: '1px',
+                    borderTopStyle: 'solid',
+                    borderRightStyle: 'solid',
+                    borderBottomStyle: 'solid',
+                    borderLeftStyle: 'solid',
+                    borderTopColor: theme.popover?.borderColor || '#e5e7eb',
+                    borderRightColor: theme.popover?.borderColor || '#e5e7eb',
+                    borderBottomColor: theme.popover?.borderColor || '#e5e7eb',
+                    borderLeftColor: theme.popover?.borderColor || '#e5e7eb',
+                    transform: 'rotate(45deg)',
+                    ...getArrowPosition(position.placement),
+                }, "data-tour-arrow": true }))] }));
+}
+function getArrowPosition(placement) {
+    switch (placement) {
+        case 'top':
+            return {
+                bottom: '-6px',
+                left: '50%',
+                marginLeft: '-6px',
+                borderTopWidth: '0',
+                borderLeftWidth: '0',
+            };
+        case 'bottom':
+            return {
+                top: '-6px',
+                left: '50%',
+                marginLeft: '-6px',
+                borderBottomWidth: '0',
+                borderRightWidth: '0',
+            };
+        case 'left':
+            return {
+                right: '-6px',
+                top: '50%',
+                marginTop: '-6px',
+                borderTopWidth: '0',
+                borderLeftWidth: '0',
+            };
+        case 'right':
+            return {
+                left: '-6px',
+                top: '50%',
+                marginTop: '-6px',
+                borderBottomWidth: '0',
+                borderRightWidth: '0',
+            };
+        default:
+            return {};
+    }
+}
+
+function TourRunner({ className }) {
+    const { state } = useTour();
+    if (!state.isRunning) {
+        return null;
+    }
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TourOverlay, { className: className }), jsxRuntimeExports.jsx(TourPopover, { className: className })] }));
+}
+
+class TabIntegration {
+    constructor() {
+        this.name = 'tab-integration';
+    }
+    canHandle(action) {
+        return action.type === 'tab-switch';
+    }
+    async execute(action, element) {
+        if (!action.target && !element) {
+            throw new Error('Tab integration requires either a target selector or element');
+        }
+        const targetElement = element || document.querySelector(action.target);
+        if (!targetElement) {
+            throw new Error(`Tab element not found: ${action.target}`);
+        }
+        // Handle different tab implementations
+        const tabValue = typeof action.value === 'string' ? action.value : undefined;
+        await this.handleTabClick(targetElement, tabValue);
+    }
+    async handleTabClick(tabElement, tabValue) {
+        // Check for common tab patterns
+        // 1. Radix UI Tabs
+        if (this.isRadixTab(tabElement)) {
+            await this.handleRadixTab(tabElement);
+            return;
+        }
+        // 2. Material UI Tabs
+        if (this.isMaterialUITab(tabElement)) {
+            await this.handleMaterialUITab(tabElement);
+            return;
+        }
+        // 3. React Router tabs (links)
+        if (this.isRouterTab(tabElement)) {
+            await this.handleRouterTab(tabElement);
+            return;
+        }
+        // 4. Custom tabs with data attributes
+        if (this.isCustomTab(tabElement)) {
+            await this.handleCustomTab(tabElement, tabValue);
+            return;
+        }
+        // 5. Generic button/clickable tab
+        await this.handleGenericTab(tabElement);
+    }
+    isRadixTab(element) {
+        return element.hasAttribute('data-radix-collection-item') ||
+            element.getAttribute('role') === 'tab' ||
+            element.closest('[data-radix-tabs-root]') !== null;
+    }
+    async handleRadixTab(element) {
+        // Radix tabs use standard click events
+        element.click();
+        await this.waitForTabChange();
+    }
+    isMaterialUITab(element) {
+        return element.classList.contains('MuiTab-root') ||
+            element.closest('.MuiTabs-root') !== null;
+    }
+    async handleMaterialUITab(element) {
+        // Material UI tabs use click events
+        element.click();
+        await this.waitForTabChange();
+    }
+    isRouterTab(element) {
+        return element.tagName === 'A' ||
+            element.hasAttribute('href') ||
+            element.closest('a[href]') !== null;
+    }
+    async handleRouterTab(element) {
+        const linkElement = element.tagName === 'A' ? element : element.closest('a');
+        if (linkElement) {
+            linkElement.click();
+            await this.waitForNavigation();
+        }
+    }
+    isCustomTab(element) {
+        return element.hasAttribute('data-tab') ||
+            element.hasAttribute('data-tab-id') ||
+            element.hasAttribute('data-value');
+    }
+    async handleCustomTab(element, tabValue) {
+        // Try to find and activate the correct tab
+        if (tabValue) {
+            const tabContainer = element.closest('[role="tablist"]') ||
+                element.closest('.tabs') ||
+                element.parentElement;
+            if (tabContainer) {
+                const targetTab = tabContainer.querySelector(`[data-tab="${tabValue}"], [data-tab-id="${tabValue}"], [data-value="${tabValue}"]`);
+                if (targetTab) {
+                    targetTab.click();
+                    await this.waitForTabChange();
+                    return;
+                }
+            }
+        }
+        // Fallback to clicking the provided element
+        element.click();
+        await this.waitForTabChange();
+    }
+    async handleGenericTab(element) {
+        // Generic click handling
+        element.click();
+        await this.waitForTabChange();
+    }
+    async waitForTabChange() {
+        // Wait for tab content to change
+        return new Promise(resolve => {
+            setTimeout(resolve, 300); // Allow time for tab transition
+        });
+    }
+    async waitForNavigation() {
+        // Wait for potential page navigation
+        return new Promise(resolve => {
+            setTimeout(resolve, 500); // Allow time for navigation
+        });
+    }
+}
+
+class WizardIntegration {
+    constructor() {
+        this.name = 'wizard-integration';
+    }
+    canHandle(action) {
+        return action.type === 'wizard-step';
+    }
+    async execute(action, element) {
+        if (!action.target && !element) {
+            throw new Error('Wizard integration requires either a target selector or element');
+        }
+        const targetElement = element || document.querySelector(action.target);
+        if (!targetElement) {
+            throw new Error(`Wizard element not found: ${action.target}`);
+        }
+        const stepValue = typeof action.value === 'string' || typeof action.value === 'number' ? action.value : undefined;
+        await this.handleWizardNavigation(targetElement, stepValue);
+    }
+    async handleWizardNavigation(element, stepValue) {
+        // Handle different wizard patterns
+        // 1. Multi-step form wizards
+        if (this.isFormWizard(element)) {
+            await this.handleFormWizard(element, stepValue);
+            return;
+        }
+        // 2. Stepper components (Material UI, Ant Design, etc.)
+        if (this.isStepper(element)) {
+            await this.handleStepper(element, stepValue);
+            return;
+        }
+        // 3. Custom wizard with data attributes
+        if (this.isCustomWizard(element)) {
+            await this.handleCustomWizard(element, stepValue);
+            return;
+        }
+        // 4. Generic next/previous buttons
+        await this.handleGenericWizard(element);
+    }
+    isFormWizard(element) {
+        return element.closest('form') !== null ||
+            element.closest('.wizard') !== null ||
+            element.closest('.multi-step') !== null;
+    }
+    async handleFormWizard(element, stepValue) {
+        if (typeof stepValue === 'number') {
+            // Navigate to specific step
+            await this.navigateToStep(element, stepValue);
+        }
+        else if (this.isNextButton(element)) {
+            // Click next button
+            element.click();
+            await this.waitForStepTransition();
+        }
+        else if (this.isPreviousButton(element)) {
+            // Click previous button
+            element.click();
+            await this.waitForStepTransition();
+        }
+        else {
+            // Generic click
+            element.click();
+            await this.waitForStepTransition();
+        }
+    }
+    isStepper(element) {
+        return element.classList.contains('MuiStepper-root') ||
+            element.classList.contains('ant-steps') ||
+            element.closest('.stepper') !== null ||
+            element.closest('[role="progressbar"]') !== null;
+    }
+    async handleStepper(element, stepValue) {
+        if (typeof stepValue === 'number') {
+            // Find and click specific step
+            const stepElement = this.findStepByIndex(element, stepValue);
+            if (stepElement) {
+                stepElement.click();
+                await this.waitForStepTransition();
+                return;
+            }
+        }
+        // Click the provided element
+        element.click();
+        await this.waitForStepTransition();
+    }
+    isCustomWizard(element) {
+        return element.hasAttribute('data-wizard-step') ||
+            element.hasAttribute('data-step') ||
+            element.closest('[data-wizard]') !== null;
+    }
+    async handleCustomWizard(element, stepValue) {
+        const wizard = element.closest('[data-wizard]');
+        if (stepValue && wizard) {
+            // Try to find specific step
+            const stepElement = wizard.querySelector(`[data-step="${stepValue}"], [data-wizard-step="${stepValue}"]`);
+            if (stepElement) {
+                stepElement.click();
+                await this.waitForStepTransition();
+                return;
+            }
+        }
+        // Click the provided element
+        element.click();
+        await this.waitForStepTransition();
+    }
+    async handleGenericWizard(element) {
+        element.click();
+        await this.waitForStepTransition();
+    }
+    isNextButton(element) {
+        const text = element.textContent?.toLowerCase() || '';
+        return text.includes('next') ||
+            text.includes('continue') ||
+            text.includes('proceed') ||
+            element.classList.contains('next') ||
+            element.hasAttribute('data-next');
+    }
+    isPreviousButton(element) {
+        const text = element.textContent?.toLowerCase() || '';
+        return text.includes('previous') ||
+            text.includes('back') ||
+            element.classList.contains('previous') ||
+            element.classList.contains('back') ||
+            element.hasAttribute('data-previous');
+    }
+    async navigateToStep(container, stepIndex) {
+        // Try different methods to navigate to a specific step
+        // Method 1: Find step by index in stepper
+        const stepElement = this.findStepByIndex(container, stepIndex);
+        if (stepElement) {
+            stepElement.click();
+            await this.waitForStepTransition();
+            return;
+        }
+        // Method 2: Use next/previous buttons to reach target step
+        const currentStep = this.getCurrentStepIndex(container);
+        if (currentStep !== null) {
+            const diff = stepIndex - currentStep;
+            if (diff > 0) {
+                // Go forward
+                for (let i = 0; i < diff; i++) {
+                    const nextButton = this.findNextButton(container);
+                    if (nextButton) {
+                        nextButton.click();
+                        await this.waitForStepTransition();
+                    }
+                }
+            }
+            else if (diff < 0) {
+                // Go backward
+                for (let i = 0; i < Math.abs(diff); i++) {
+                    const prevButton = this.findPreviousButton(container);
+                    if (prevButton) {
+                        prevButton.click();
+                        await this.waitForStepTransition();
+                    }
+                }
+            }
+        }
+    }
+    findStepByIndex(container, index) {
+        // Try different selectors for step elements
+        const selectors = [
+            `.step:nth-child(${index + 1})`,
+            `[data-step="${index}"]`,
+            `[data-wizard-step="${index}"]`,
+            `.MuiStep-root:nth-child(${index + 1})`,
+            `.ant-steps-item:nth-child(${index + 1})`,
+        ];
+        for (const selector of selectors) {
+            const element = container.querySelector(selector);
+            if (element)
+                return element;
+        }
+        return null;
+    }
+    getCurrentStepIndex(container) {
+        // Try to determine current step index
+        const activeStep = container.querySelector('.active, .current, .MuiStep-active, .ant-steps-item-active');
+        if (activeStep) {
+            const steps = container.querySelectorAll('.step, .MuiStep-root, .ant-steps-item');
+            return Array.from(steps).indexOf(activeStep);
+        }
+        return null;
+    }
+    findNextButton(container) {
+        const selectors = [
+            'button[data-next]',
+            '.next-button',
+            'button:contains("Next")',
+            'button:contains("Continue")',
+            '.wizard-next',
+        ];
+        for (const selector of selectors) {
+            const element = container.querySelector(selector);
+            if (element)
+                return element;
+        }
+        // Fallback: find button with "next" text
+        const buttons = container.querySelectorAll('button');
+        for (const button of buttons) {
+            const text = button.textContent?.toLowerCase() || '';
+            if (text.includes('next') || text.includes('continue')) {
+                return button;
+            }
+        }
+        return null;
+    }
+    findPreviousButton(container) {
+        const selectors = [
+            'button[data-previous]',
+            '.previous-button',
+            '.back-button',
+            'button:contains("Previous")',
+            'button:contains("Back")',
+            '.wizard-previous',
+        ];
+        for (const selector of selectors) {
+            const element = container.querySelector(selector);
+            if (element)
+                return element;
+        }
+        // Fallback: find button with "previous" or "back" text
+        const buttons = container.querySelectorAll('button');
+        for (const button of buttons) {
+            const text = button.textContent?.toLowerCase() || '';
+            if (text.includes('previous') || text.includes('back')) {
+                return button;
+            }
+        }
+        return null;
+    }
+    async waitForStepTransition() {
+        // Wait for step transition animation/content change
+        return new Promise(resolve => {
+            setTimeout(resolve, 400); // Allow time for transition
+        });
+    }
+}
+
+class NavigationIntegration {
+    constructor() {
+        this.name = 'navigation-integration';
+    }
+    canHandle(action) {
+        return action.type === 'navigate';
+    }
+    async execute(action, _element) {
+        if (!action.target) {
+            throw new Error('Navigation integration requires a target URL or path');
+        }
+        const options = typeof action.value === 'object' && action.value !== null ? action.value : undefined;
+        await this.handleNavigation(action.target, options);
+    }
+    async handleNavigation(target, options) {
+        // Handle different navigation patterns
+        // 1. Hash navigation (same page)
+        if (target.startsWith('#')) {
+            await this.handleHashNavigation(target);
+            return;
+        }
+        // 2. Relative path navigation
+        if (target.startsWith('/')) {
+            await this.handlePathNavigation(target, options);
+            return;
+        }
+        // 3. Query parameter navigation
+        if (target.includes('?') || target.includes('&')) {
+            await this.handleQueryNavigation(target, options);
+            return;
+        }
+        // 4. Full URL navigation
+        if (target.startsWith('http')) {
+            await this.handleUrlNavigation(target, options);
+            return;
+        }
+        // 5. Router navigation (for SPAs)
+        await this.handleRouterNavigation(target, options);
+    }
+    async handleHashNavigation(hash) {
+        // Update hash without page reload
+        window.location.hash = hash;
+        // Wait for potential scroll or content change
+        await this.waitForNavigation(200);
+        // Try to scroll to element if it exists
+        const targetElement = document.querySelector(hash);
+        if (targetElement) {
+            targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }
+    async handlePathNavigation(path, options) {
+        // Check if we're in a SPA with router
+        if (this.isSPA()) {
+            await this.handleSPANavigation(path, options);
+        }
+        else {
+            // Traditional navigation
+            if (options?.replace) {
+                window.location.replace(path);
+            }
+            else {
+                window.location.href = path;
+            }
+        }
+    }
+    async handleQueryNavigation(target, options) {
+        const url = new URL(window.location.href);
+        // Parse query parameters from target
+        if (target.startsWith('?')) {
+            // Replace entire query string
+            url.search = target;
+        }
+        else if (target.startsWith('&')) {
+            // Append to existing query string
+            url.search += target;
+        }
+        else {
+            // Parse key=value pairs
+            const params = new URLSearchParams(target);
+            params.forEach((value, key) => {
+                url.searchParams.set(key, value);
+            });
+        }
+        // Update URL
+        if (options?.replace) {
+            window.history.replaceState({}, '', url.toString());
+        }
+        else {
+            window.history.pushState({}, '', url.toString());
+        }
+        // Trigger popstate event for SPAs
+        window.dispatchEvent(new PopStateEvent('popstate'));
+        await this.waitForNavigation(300);
+    }
+    async handleUrlNavigation(url, options) {
+        if (options?.newTab) {
+            window.open(url, '_blank');
+        }
+        else if (options?.replace) {
+            window.location.replace(url);
+        }
+        else {
+            window.location.href = url;
+        }
+    }
+    async handleRouterNavigation(path, options) {
+        // Try different router patterns
+        // 1. React Router
+        if (this.hasReactRouter()) {
+            await this.handleReactRouter(path, options);
+            return;
+        }
+        // 2. Vue Router
+        if (this.hasVueRouter()) {
+            await this.handleVueRouter(path, options);
+            return;
+        }
+        // 3. Next.js Router
+        if (this.hasNextRouter()) {
+            await this.handleNextRouter(path, options);
+            return;
+        }
+        // 4. Generic SPA navigation
+        await this.handleSPANavigation(path, options);
+    }
+    async handleSPANavigation(path, options) {
+        // Generic SPA navigation using History API
+        const url = new URL(path, window.location.origin);
+        if (options?.replace) {
+            window.history.replaceState({}, '', url.toString());
+        }
+        else {
+            window.history.pushState({}, '', url.toString());
+        }
+        // Trigger popstate event
+        window.dispatchEvent(new PopStateEvent('popstate'));
+        await this.waitForNavigation(500);
+    }
+    isSPA() {
+        // Detect if we're in a Single Page Application
+        return !!(window.history &&
+            (this.hasReactRouter() || this.hasVueRouter() || this.hasNextRouter() || this.hasGenericSPA()));
+    }
+    hasReactRouter() {
+        // Check for React Router presence
+        return !!(window.__reactRouter ||
+            document.querySelector('[data-reactroot]') ||
+            document.querySelector('#root') ||
+            document.querySelector('#__next'));
+    }
+    hasVueRouter() {
+        // Check for Vue Router presence
+        return !!(window.Vue ||
+            document.querySelector('[data-v-]') ||
+            document.querySelector('#app'));
+    }
+    hasNextRouter() {
+        // Check for Next.js presence
+        return !!(window.__NEXT_DATA__ ||
+            document.querySelector('#__next'));
+    }
+    hasGenericSPA() {
+        // Check for generic SPA indicators
+        return !!(document.querySelector('[data-spa]') ||
+            document.querySelector('[data-router]') ||
+            window.location.pathname !== '/' && !window.location.pathname.includes('.'));
+    }
+    async detectAndCallRouter(path, options) {
+        const router = window.router || window.__ROUTER__ || null;
+        const method = options?.replace ? 'replace' : 'push';
+        if (router && typeof router === 'object' && router !== null && method in router && typeof router[method] === 'function') {
+            await router[method](path, options);
+            return true;
+        }
+        return false;
+    }
+    async handleReactRouter(path, options) {
+        // Try to use React Router's navigate function if available
+        const navigate = window.__reactRouterNavigate;
+        if (navigate) {
+            await navigate(path, options);
+        }
+        else {
+            // Fallback to history API
+            await this.handleSPANavigation(path, options);
+        }
+    }
+    async handleVueRouter(path, options) {
+        // Try to use Vue Router's push/replace methods
+        const vueRouter = window.router || window.__ROUTER__ || null;
+        if (vueRouter && typeof vueRouter === 'object' && vueRouter !== null) {
+            const router = vueRouter;
+            if (options?.replace && typeof router.replace === 'function') {
+                await router.replace(path);
+            }
+            else if (typeof router.push === 'function') {
+                await router.push(path);
+            }
+        }
+        else {
+            // Fallback to history API
+            await this.handleSPANavigation(path, options);
+        }
+    }
+    async handleNextRouter(path, options) {
+        // Try to use Next.js router
+        const nextRouter = window.__nextRouter;
+        if (nextRouter && typeof nextRouter === 'object' && nextRouter !== null) {
+            const router = nextRouter;
+            if (options?.replace && typeof router.replace === 'function') {
+                await router.replace(path);
+            }
+            else if (typeof router.push === 'function') {
+                await router.push(path);
+            }
+        }
+        else {
+            // Fallback to history API
+            await this.handleSPANavigation(path, options);
+        }
+    }
+    async waitForNavigation(delay = 300) {
+        return new Promise(resolve => {
+            setTimeout(resolve, delay);
+        });
+    }
+}
+
+export { NavigationIntegration, TabIntegration, TourActions, TourEngine, TourOverlay, TourPopover, TourProvider, TourRunner, TourStorage, WizardIntegration, calculatePopoverPosition, getElementPosition, getViewportCenter, isElementInViewport, scrollToElement, useTour, useTourEngine, useTourHighlight };
+//# sourceMappingURL=index.esm.js.map