posthog-js 1.303.1 → 1.305.0

package/dist/src/extensions/product-tours/components/ProductTourTooltip.d.ts

@@ -5,7 +5,7 @@ export interface ProductTourTooltipProps {
     step: ProductTourStep;
     stepIndex: number;
     totalSteps: number;
-    targetElement: HTMLElement;
+    targetElement: HTMLElement | null;
     onNext: () => void;
     onPrevious: () => void;
     onDismiss: (reason: ProductTourDismissReason) => void;

package/dist/src/extensions/product-tours/product-tours.d.ts

@@ -1,5 +1,5 @@
 import { PostHog } from '../../posthog-core';
-import { ProductTour, ProductTourDismissReason, ProductTourRenderReason } from '../../posthog-product-tours-types';
+import { ProductTour, ProductTourCallback, ProductTourDismissReason, ProductTourRenderReason } from '../../posthog-product-tours-types';
 export declare class ProductTourManager {
     private _instance;
     private _activeTour;
@@ -7,6 +7,7 @@ export declare class ProductTourManager {
     private _renderReason;
     private _checkInterval;
     private _triggerSelectorListeners;
+    private _surveyEventUnsubscribe;
     constructor(instance: PostHog);
     start(): void;
     stop(): void;
@@ -21,9 +22,14 @@ export declare class ProductTourManager {
     private _completeTour;
     private _renderCurrentStep;
     private _renderTooltipWithPreact;
+    private _renderSurveyStep;
+    private _cleanupSurveyListener;
     private _cleanup;
     private _manageTriggerSelectorListener;
     private _removeTriggerSelectorListener;
     private _removeAllTriggerListeners;
     private _captureEvent;
+    getActiveProductTours(callback: ProductTourCallback): void;
+    resetTour(tourId: string): void;
+    resetAllTours(): void;
 }

package/dist/src/posthog-product-tours-types.d.ts

@@ -8,10 +8,27 @@ export interface JSONContent {
     }[];
     text?: string;
 }
+export type ProductTourSurveyQuestionType = 'open' | 'rating';
+export interface ProductTourSurveyQuestion {
+    type: ProductTourSurveyQuestionType;
+    questionText: string;
+    /** Rating display type - emoji or number */
+    display?: 'emoji' | 'number';
+    /** Rating scale - 3 or 5 for emoji, 5 or 10 for number */
+    scale?: 3 | 5 | 10;
+    /** Label for low end of rating scale (e.g., "Not likely") */
+    lowerBoundLabel?: string;
+    /** Label for high end of rating scale (e.g., "Very likely") */
+    upperBoundLabel?: string;
+}
 export interface ProductTourStep {
     id: string;
-    selector: string;
+    selector?: string;
     content: JSONContent | null;
+    /** Inline survey question config - if present, this is a survey step */
+    survey?: ProductTourSurveyQuestion;
+    /** ID of the auto-created survey for this step (set by backend) */
+    linkedSurveyId?: string;
 }
 export interface ProductTourConditions {
     url?: string;
@@ -32,6 +49,7 @@ export interface ProductTour {
     name: string;
     description?: string;
     type: 'product_tour';
+    auto_launch?: boolean;
     start_date: string | null;
     end_date: string | null;
     current_iteration?: number;

package/dist/surveys-preview.d.ts

@@ -2944,10 +2944,27 @@ interface JSONContent {
     }[];
     text?: string;
 }
+type ProductTourSurveyQuestionType = 'open' | 'rating';
+interface ProductTourSurveyQuestion {
+    type: ProductTourSurveyQuestionType;
+    questionText: string;
+    /** Rating display type - emoji or number */
+    display?: 'emoji' | 'number';
+    /** Rating scale - 3 or 5 for emoji, 5 or 10 for number */
+    scale?: 3 | 5 | 10;
+    /** Label for low end of rating scale (e.g., "Not likely") */
+    lowerBoundLabel?: string;
+    /** Label for high end of rating scale (e.g., "Very likely") */
+    upperBoundLabel?: string;
+}
 interface ProductTourStep {
     id: string;
-    selector: string;
+    selector?: string;
     content: JSONContent | null;
+    /** Inline survey question config - if present, this is a survey step */
+    survey?: ProductTourSurveyQuestion;
+    /** ID of the auto-created survey for this step (set by backend) */
+    linkedSurveyId?: string;
 }
 interface ProductTourConditions {
     url?: string;
@@ -2968,6 +2985,7 @@ interface ProductTour {
     name: string;
     description?: string;
     type: 'product_tour';
+    auto_launch?: boolean;
     start_date: string | null;
     end_date: string | null;
     current_iteration?: number;

package/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "posthog-js",
-    "version": "1.303.1",
+    "version": "1.305.0",
     "description": "Posthog-js allows you to automatically capture usage and send events to PostHog.",
     "repository": "https://github.com/PostHog/posthog-js",
     "author": "hey@posthog.com",

package/lib/src/extensions/product-tours/components/ProductTourTooltip.d.ts

@@ -5,7 +5,7 @@ export interface ProductTourTooltipProps {
     step: ProductTourStep;
     stepIndex: number;
     totalSteps: number;
-    targetElement: HTMLElement;
+    targetElement: HTMLElement | null;
     onNext: () => void;
     onPrevious: () => void;
     onDismiss: (reason: ProductTourDismissReason) => void;

package/lib/src/extensions/product-tours/components/ProductTourTooltip.js

@@ -88,11 +88,15 @@ function ProductTourTooltip(_a) {
     var previousStepRef = (0, hooks_1.useRef)(stepIndex);
     var isTransitioningRef = (0, hooks_1.useRef)(false);
     var isFirstRender = (0, hooks_1.useRef)(true);
+    var isModalStep = !targetElement;
     var updatePosition = (0, hooks_1.useCallback)(function () {
+        if (isModalStep) {
+            return;
+        }
         var rect = targetElement.getBoundingClientRect();
         setPosition((0, product_tours_utils_1.calculateTooltipPosition)(rect));
         setSpotlightStyle((0, product_tours_utils_1.getSpotlightStyle)(rect));
-    }, [targetElement]);
+    }, [targetElement, isModalStep]);
     (0, hooks_1.useEffect)(function () {
         var isStepChange = previousStepRef.current !== stepIndex;
         var currentStepIndex = stepIndex;
@@ -100,6 +104,12 @@ function ProductTourTooltip(_a) {
             isFirstRender.current = false;
             previousStepRef.current = stepIndex;
             isTransitioningRef.current = true;
+            if (isModalStep) {
+                // Modal steps are just centered on screen - no positioning needed
+                setTransitionState('visible');
+                isTransitioningRef.current = false;
+                return;
+            }
             scrollToElement(targetElement, function () {
                 if (previousStepRef.current !== currentStepIndex) {
                     return;
@@ -123,6 +133,17 @@ function ProductTourTooltip(_a) {
                 setDisplayedStep(step);
                 setDisplayedStepIndex(stepIndex);
                 setTransitionState('entering');
+                if (isModalStep) {
+                    // Modal steps don't need scrolling or position calculation
+                    setTimeout(function () {
+                        if (previousStepRef.current !== currentStepIndex) {
+                            return;
+                        }
+                        setTransitionState('visible');
+                        isTransitioningRef.current = false;
+                    }, 50);
+                    return;
+                }
                 scrollToElement(targetElement, function () {
                     if (previousStepRef.current !== currentStepIndex) {
                         return;
@@ -138,9 +159,9 @@ function ProductTourTooltip(_a) {
                 });
             }, 150);
         }
-    }, [targetElement, stepIndex, step, updatePosition]);
+    }, [targetElement, stepIndex, step, updatePosition, isModalStep]);
     (0, hooks_1.useEffect)(function () {
-        if (transitionState !== 'visible') {
+        if (transitionState !== 'visible' || isModalStep) {
             return;
         }
         var handleUpdate = function () {
@@ -154,7 +175,7 @@ function ProductTourTooltip(_a) {
             window === null || window === void 0 ? void 0 : window.removeEventListener('scroll', handleUpdate, true);
             window === null || window === void 0 ? void 0 : window.removeEventListener('resize', handleUpdate);
         };
-    }, [updatePosition, transitionState]);
+    }, [updatePosition, transitionState, isModalStep]);
     (0, hooks_1.useEffect)(function () {
         var handleKeyDown = function (e) {
             if (e.key === 'Escape') {
@@ -183,12 +204,16 @@ function ProductTourTooltip(_a) {
         '--ph-tour-border-radius': "".concat(appearance.borderRadius, "px"),
         '--ph-tour-border-color': appearance.borderColor,
     };
-    var isReady = transitionState !== 'initializing' && position && spotlightStyle;
+    var isReady = isModalStep || (transitionState !== 'initializing' && position && spotlightStyle);
     var isVisible = transitionState === 'visible';
     if (!isReady) {
         return ((0, jsx_runtime_1.jsxs)("div", { class: "ph-tour-container", style: containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { class: "ph-tour-click-overlay", onClick: handleOverlayClick }), (0, jsx_runtime_1.jsx)("div", { class: "ph-tour-spotlight", style: { top: '50%', left: '50%', width: '0px', height: '0px' } })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { class: "ph-tour-container", style: containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { class: "ph-tour-click-overlay", onClick: handleOverlayClick }), (0, jsx_runtime_1.jsx)("div", { class: "ph-tour-spotlight", style: isVisible
+    // Modal step: centered on screen with overlay dimming, no spotlight/arrow
+    if (isModalStep) {
+        return ((0, jsx_runtime_1.jsxs)("div", { class: "ph-tour-container", style: containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { class: "ph-tour-click-overlay", onClick: handleOverlayClick }), (0, jsx_runtime_1.jsx)("div", { class: "ph-tour-modal-overlay" }), (0, jsx_runtime_1.jsxs)("div", { class: "ph-tour-tooltip ph-tour-tooltip--modal", onClick: handleTooltipClick, children: [(0, jsx_runtime_1.jsx)("button", { class: "ph-tour-dismiss", onClick: function () { return onDismiss('user_clicked_skip'); }, "aria-label": "Close tour", children: icons_1.cancelSVG }), (0, jsx_runtime_1.jsx)("div", { class: "ph-tour-content", dangerouslySetInnerHTML: { __html: (0, product_tours_utils_1.renderTipTapContent)(displayedStep.content) } }), (0, jsx_runtime_1.jsxs)("div", { class: "ph-tour-footer", children: [(0, jsx_runtime_1.jsxs)("span", { class: "ph-tour-progress", children: [displayedStepIndex + 1, " of ", totalSteps] }), (0, jsx_runtime_1.jsxs)("div", { class: "ph-tour-buttons", children: [!isFirstStep && ((0, jsx_runtime_1.jsx)("button", { class: "ph-tour-button ph-tour-button--secondary", onClick: onPrevious, children: "Back" })), (0, jsx_runtime_1.jsx)("button", { class: "ph-tour-button ph-tour-button--primary", onClick: onNext, children: isLastStep ? 'Done' : 'Next' })] })] }), !appearance.whiteLabel && ((0, jsx_runtime_1.jsxs)("a", { href: "https://posthog.com/product-tours", target: "_blank", rel: "noopener noreferrer", class: "ph-tour-branding", children: ["Tour by ", icons_1.IconPosthogLogo] }))] })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { class: "ph-tour-container", style: containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { class: "ph-tour-click-overlay", onClick: handleOverlayClick }), (0, jsx_runtime_1.jsx)("div", { class: "ph-tour-spotlight", style: isVisible && spotlightStyle
                     ? spotlightStyle
                     : {
                         top: '50%',

package/lib/src/extensions/product-tours/components/ProductTourTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductTourTooltip.js","sourceRoot":"","sources":["../../../../../src/extensions/product-tours/components/ProductTourTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from 'preact'\nimport { useEffect, useState, useCallback, useRef } from 'preact/hooks'\nimport { ProductTour, ProductTourStep, ProductTourDismissReason } from '../../../posthog-product-tours-types'\nimport {\n    calculateTooltipPosition,\n    getSpotlightStyle,\n    mergeAppearance,\n    renderTipTapContent,\n    TooltipPosition,\n} from '../product-tours-utils'\nimport { addEventListener } from '../../../utils'\nimport { window as _window } from '../../../utils/globals'\nimport { IconPosthogLogo, cancelSVG } from '../../surveys/icons'\n\nconst window = _window as Window & typeof globalThis\n\ntype TransitionState = 'initializing' | 'entering' | 'visible' | 'exiting'\n\nexport interface ProductTourTooltipProps {\n    tour: ProductTour\n    step: ProductTourStep\n    stepIndex: number\n    totalSteps: number\n    targetElement: HTMLElement\n    onNext: () => void\n    onPrevious: () => void\n    onDismiss: (reason: ProductTourDismissReason) => void\n}\n\nfunction getOppositePosition(position: TooltipPosition): TooltipPosition {\n    const opposites: Record<TooltipPosition, TooltipPosition> = {\n        top: 'bottom',\n        bottom: 'top',\n        left: 'right',\n        right: 'left',\n    }\n    return opposites[position]\n}\n\nfunction scrollToElement(element: HTMLElement, resolve: () => void): void {\n    const initialRect = element.getBoundingClientRect()\n    const viewportHeight = window.innerHeight\n    const viewportWidth = window.innerWidth\n\n    const safeMarginY = viewportHeight / 6\n    const safeMarginX = viewportWidth / 6\n\n    const isInSafeZone =\n        initialRect.top >= safeMarginY &&\n        initialRect.bottom <= viewportHeight - safeMarginY &&\n        initialRect.left >= safeMarginX &&\n        initialRect.right <= viewportWidth - safeMarginX\n\n    if (isInSafeZone) {\n        resolve()\n        return\n    }\n\n    element.scrollIntoView({ behavior: 'smooth', block: 'center' })\n\n    let lastTop = initialRect.top\n    let stableCount = 0\n    let resolved = false\n\n    const checkStability = () => {\n        if (resolved) return\n\n        const currentRect = element.getBoundingClientRect()\n        if (Math.abs(currentRect.top - lastTop) < 1) {\n            stableCount++\n            if (stableCount >= 3) {\n                resolved = true\n                resolve()\n                return\n            }\n        } else {\n            stableCount = 0\n        }\n        lastTop = currentRect.top\n        setTimeout(checkStability, 50)\n    }\n\n    setTimeout(checkStability, 30)\n\n    setTimeout(() => {\n        if (!resolved) {\n            resolved = true\n            resolve()\n        }\n    }, 500)\n}\n\nexport function ProductTourTooltip({\n    tour,\n    step,\n    stepIndex,\n    totalSteps,\n    targetElement,\n    onNext,\n    onPrevious,\n    onDismiss,\n}: ProductTourTooltipProps): h.JSX.Element {\n    const appearance = mergeAppearance(tour.appearance)\n    const [transitionState, setTransitionState] = useState<TransitionState>('initializing')\n    const [position, setPosition] = useState<ReturnType<typeof calculateTooltipPosition> | null>(null)\n    const [spotlightStyle, setSpotlightStyle] = useState<ReturnType<typeof getSpotlightStyle> | null>(null)\n\n    const [displayedStep, setDisplayedStep] = useState(step)\n    const [displayedStepIndex, setDisplayedStepIndex] = useState(stepIndex)\n\n    const previousStepRef = useRef(stepIndex)\n    const isTransitioningRef = useRef(false)\n    const isFirstRender = useRef(true)\n\n    const updatePosition = useCallback(() => {\n        const rect = targetElement.getBoundingClientRect()\n        setPosition(calculateTooltipPosition(rect))\n        setSpotlightStyle(getSpotlightStyle(rect))\n    }, [targetElement])\n\n    useEffect(() => {\n        const isStepChange = previousStepRef.current !== stepIndex\n\n        const currentStepIndex = stepIndex\n\n        if (isFirstRender.current) {\n            isFirstRender.current = false\n            previousStepRef.current = stepIndex\n            isTransitioningRef.current = true\n\n            scrollToElement(targetElement, () => {\n                if (previousStepRef.current !== currentStepIndex) {\n                    return\n                }\n\n                const rect = targetElement.getBoundingClientRect()\n                setPosition(calculateTooltipPosition(rect))\n                setSpotlightStyle(getSpotlightStyle(rect))\n                setTransitionState('visible')\n                isTransitioningRef.current = false\n            })\n            return\n        }\n\n        if (isStepChange) {\n            previousStepRef.current = stepIndex\n            isTransitioningRef.current = true\n\n            setTransitionState('exiting')\n\n            setTimeout(() => {\n                if (previousStepRef.current !== currentStepIndex) {\n                    return\n                }\n\n                setDisplayedStep(step)\n                setDisplayedStepIndex(stepIndex)\n                setTransitionState('entering')\n\n                scrollToElement(targetElement, () => {\n                    if (previousStepRef.current !== currentStepIndex) {\n                        return\n                    }\n\n                    updatePosition()\n                    setTimeout(() => {\n                        if (previousStepRef.current !== currentStepIndex) {\n                            return\n                        }\n                        setTransitionState('visible')\n                        isTransitioningRef.current = false\n                    }, 50)\n                })\n            }, 150)\n        }\n    }, [targetElement, stepIndex, step, updatePosition])\n\n    useEffect(() => {\n        if (transitionState !== 'visible') {\n            return\n        }\n\n        const handleUpdate = () => {\n            if (!isTransitioningRef.current) {\n                updatePosition()\n            }\n        }\n\n        addEventListener(window, 'scroll', handleUpdate as EventListener, { capture: true })\n        addEventListener(window, 'resize', handleUpdate as EventListener)\n\n        return () => {\n            window?.removeEventListener('scroll', handleUpdate, true)\n            window?.removeEventListener('resize', handleUpdate)\n        }\n    }, [updatePosition, transitionState])\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (e.key === 'Escape') {\n                onDismiss('escape_key')\n            }\n        }\n        addEventListener(window, 'keydown', handleKeyDown as EventListener)\n        return () => {\n            window?.removeEventListener('keydown', handleKeyDown)\n        }\n    }, [onDismiss])\n\n    const handleOverlayClick = (e: MouseEvent) => {\n        e.stopPropagation()\n        onDismiss('user_clicked_outside')\n    }\n\n    const handleTooltipClick = (e: MouseEvent) => {\n        e.stopPropagation()\n    }\n\n    const isLastStep = displayedStepIndex >= totalSteps - 1\n    const isFirstStep = displayedStepIndex === 0\n\n    const containerStyle = {\n        '--ph-tour-background-color': appearance.backgroundColor,\n        '--ph-tour-text-color': appearance.textColor,\n        '--ph-tour-button-color': appearance.buttonColor,\n        '--ph-tour-button-text-color': appearance.buttonTextColor,\n        '--ph-tour-border-radius': `${appearance.borderRadius}px`,\n        '--ph-tour-border-color': appearance.borderColor,\n    } as h.JSX.CSSProperties\n\n    const isReady = transitionState !== 'initializing' && position && spotlightStyle\n    const isVisible = transitionState === 'visible'\n\n    if (!isReady) {\n        return (\n            <div class=\"ph-tour-container\" style={containerStyle}>\n                <div class=\"ph-tour-click-overlay\" onClick={handleOverlayClick} />\n                <div class=\"ph-tour-spotlight\" style={{ top: '50%', left: '50%', width: '0px', height: '0px' }} />\n            </div>\n        )\n    }\n\n    return (\n        <div class=\"ph-tour-container\" style={containerStyle}>\n            <div class=\"ph-tour-click-overlay\" onClick={handleOverlayClick} />\n\n            <div\n                class=\"ph-tour-spotlight\"\n                style={\n                    isVisible\n                        ? spotlightStyle\n                        : {\n                              top: '50%',\n                              left: '50%',\n                              width: '0px',\n                              height: '0px',\n                          }\n                }\n            />\n\n            <div\n                class={`ph-tour-tooltip ${isVisible ? 'ph-tour-tooltip--visible' : 'ph-tour-tooltip--hidden'}`}\n                style={{\n                    top: `${position.top}px`,\n                    left: `${position.left}px`,\n                    opacity: isVisible ? 1 : 0,\n                    transform: isVisible ? 'translateY(0)' : 'translateY(10px)',\n                    transition: 'opacity 0.15s ease-out, transform 0.15s ease-out',\n                }}\n                onClick={handleTooltipClick}\n            >\n                <div class={`ph-tour-arrow ph-tour-arrow--${getOppositePosition(position.position)}`} />\n\n                <button class=\"ph-tour-dismiss\" onClick={() => onDismiss('user_clicked_skip')} aria-label=\"Close tour\">\n                    {cancelSVG}\n                </button>\n\n                <div\n                    class=\"ph-tour-content\"\n                    dangerouslySetInnerHTML={{ __html: renderTipTapContent(displayedStep.content) }}\n                />\n\n                <div class=\"ph-tour-footer\">\n                    <span class=\"ph-tour-progress\">\n                        {displayedStepIndex + 1} of {totalSteps}\n                    </span>\n\n                    <div class=\"ph-tour-buttons\">\n                        {!isFirstStep && (\n                            <button class=\"ph-tour-button ph-tour-button--secondary\" onClick={onPrevious}>\n                                Back\n                            </button>\n                        )}\n                        <button class=\"ph-tour-button ph-tour-button--primary\" onClick={onNext}>\n                            {isLastStep ? 'Done' : 'Next'}\n                        </button>\n                    </div>\n                </div>\n\n                {!appearance.whiteLabel && (\n                    <a\n                        href=\"https://posthog.com/product-tours\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        class=\"ph-tour-branding\"\n                    >\n                        Tour by {IconPosthogLogo}\n                    </a>\n                )}\n            </div>\n        </div>\n    )\n}\n"]}
+{"version":3,"file":"ProductTourTooltip.js","sourceRoot":"","sources":["../../../../../src/extensions/product-tours/components/ProductTourTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from 'preact'\nimport { useEffect, useState, useCallback, useRef } from 'preact/hooks'\nimport { ProductTour, ProductTourStep, ProductTourDismissReason } from '../../../posthog-product-tours-types'\nimport {\n    calculateTooltipPosition,\n    getSpotlightStyle,\n    mergeAppearance,\n    renderTipTapContent,\n    TooltipPosition,\n} from '../product-tours-utils'\nimport { addEventListener } from '../../../utils'\nimport { window as _window } from '../../../utils/globals'\nimport { IconPosthogLogo, cancelSVG } from '../../surveys/icons'\n\nconst window = _window as Window & typeof globalThis\n\ntype TransitionState = 'initializing' | 'entering' | 'visible' | 'exiting'\n\nexport interface ProductTourTooltipProps {\n    tour: ProductTour\n    step: ProductTourStep\n    stepIndex: number\n    totalSteps: number\n    targetElement: HTMLElement | null\n    onNext: () => void\n    onPrevious: () => void\n    onDismiss: (reason: ProductTourDismissReason) => void\n}\n\nfunction getOppositePosition(position: TooltipPosition): TooltipPosition {\n    const opposites: Record<TooltipPosition, TooltipPosition> = {\n        top: 'bottom',\n        bottom: 'top',\n        left: 'right',\n        right: 'left',\n    }\n    return opposites[position]\n}\n\nfunction scrollToElement(element: HTMLElement, resolve: () => void): void {\n    const initialRect = element.getBoundingClientRect()\n    const viewportHeight = window.innerHeight\n    const viewportWidth = window.innerWidth\n\n    const safeMarginY = viewportHeight / 6\n    const safeMarginX = viewportWidth / 6\n\n    const isInSafeZone =\n        initialRect.top >= safeMarginY &&\n        initialRect.bottom <= viewportHeight - safeMarginY &&\n        initialRect.left >= safeMarginX &&\n        initialRect.right <= viewportWidth - safeMarginX\n\n    if (isInSafeZone) {\n        resolve()\n        return\n    }\n\n    element.scrollIntoView({ behavior: 'smooth', block: 'center' })\n\n    let lastTop = initialRect.top\n    let stableCount = 0\n    let resolved = false\n\n    const checkStability = () => {\n        if (resolved) return\n\n        const currentRect = element.getBoundingClientRect()\n        if (Math.abs(currentRect.top - lastTop) < 1) {\n            stableCount++\n            if (stableCount >= 3) {\n                resolved = true\n                resolve()\n                return\n            }\n        } else {\n            stableCount = 0\n        }\n        lastTop = currentRect.top\n        setTimeout(checkStability, 50)\n    }\n\n    setTimeout(checkStability, 30)\n\n    setTimeout(() => {\n        if (!resolved) {\n            resolved = true\n            resolve()\n        }\n    }, 500)\n}\n\nexport function ProductTourTooltip({\n    tour,\n    step,\n    stepIndex,\n    totalSteps,\n    targetElement,\n    onNext,\n    onPrevious,\n    onDismiss,\n}: ProductTourTooltipProps): h.JSX.Element {\n    const appearance = mergeAppearance(tour.appearance)\n    const [transitionState, setTransitionState] = useState<TransitionState>('initializing')\n    const [position, setPosition] = useState<ReturnType<typeof calculateTooltipPosition> | null>(null)\n    const [spotlightStyle, setSpotlightStyle] = useState<ReturnType<typeof getSpotlightStyle> | null>(null)\n\n    const [displayedStep, setDisplayedStep] = useState(step)\n    const [displayedStepIndex, setDisplayedStepIndex] = useState(stepIndex)\n\n    const previousStepRef = useRef(stepIndex)\n    const isTransitioningRef = useRef(false)\n    const isFirstRender = useRef(true)\n\n    const isModalStep = !targetElement\n\n    const updatePosition = useCallback(() => {\n        if (isModalStep) {\n            return\n        }\n        const rect = targetElement.getBoundingClientRect()\n        setPosition(calculateTooltipPosition(rect))\n        setSpotlightStyle(getSpotlightStyle(rect))\n    }, [targetElement, isModalStep])\n\n    useEffect(() => {\n        const isStepChange = previousStepRef.current !== stepIndex\n\n        const currentStepIndex = stepIndex\n\n        if (isFirstRender.current) {\n            isFirstRender.current = false\n            previousStepRef.current = stepIndex\n            isTransitioningRef.current = true\n\n            if (isModalStep) {\n                // Modal steps are just centered on screen - no positioning needed\n                setTransitionState('visible')\n                isTransitioningRef.current = false\n                return\n            }\n\n            scrollToElement(targetElement, () => {\n                if (previousStepRef.current !== currentStepIndex) {\n                    return\n                }\n\n                const rect = targetElement.getBoundingClientRect()\n                setPosition(calculateTooltipPosition(rect))\n                setSpotlightStyle(getSpotlightStyle(rect))\n                setTransitionState('visible')\n                isTransitioningRef.current = false\n            })\n            return\n        }\n\n        if (isStepChange) {\n            previousStepRef.current = stepIndex\n            isTransitioningRef.current = true\n\n            setTransitionState('exiting')\n\n            setTimeout(() => {\n                if (previousStepRef.current !== currentStepIndex) {\n                    return\n                }\n\n                setDisplayedStep(step)\n                setDisplayedStepIndex(stepIndex)\n                setTransitionState('entering')\n\n                if (isModalStep) {\n                    // Modal steps don't need scrolling or position calculation\n                    setTimeout(() => {\n                        if (previousStepRef.current !== currentStepIndex) {\n                            return\n                        }\n                        setTransitionState('visible')\n                        isTransitioningRef.current = false\n                    }, 50)\n                    return\n                }\n\n                scrollToElement(targetElement, () => {\n                    if (previousStepRef.current !== currentStepIndex) {\n                        return\n                    }\n\n                    updatePosition()\n                    setTimeout(() => {\n                        if (previousStepRef.current !== currentStepIndex) {\n                            return\n                        }\n                        setTransitionState('visible')\n                        isTransitioningRef.current = false\n                    }, 50)\n                })\n            }, 150)\n        }\n    }, [targetElement, stepIndex, step, updatePosition, isModalStep])\n\n    useEffect(() => {\n        if (transitionState !== 'visible' || isModalStep) {\n            return\n        }\n\n        const handleUpdate = () => {\n            if (!isTransitioningRef.current) {\n                updatePosition()\n            }\n        }\n\n        addEventListener(window, 'scroll', handleUpdate as EventListener, { capture: true })\n        addEventListener(window, 'resize', handleUpdate as EventListener)\n\n        return () => {\n            window?.removeEventListener('scroll', handleUpdate, true)\n            window?.removeEventListener('resize', handleUpdate)\n        }\n    }, [updatePosition, transitionState, isModalStep])\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (e.key === 'Escape') {\n                onDismiss('escape_key')\n            }\n        }\n        addEventListener(window, 'keydown', handleKeyDown as EventListener)\n        return () => {\n            window?.removeEventListener('keydown', handleKeyDown)\n        }\n    }, [onDismiss])\n\n    const handleOverlayClick = (e: MouseEvent) => {\n        e.stopPropagation()\n        onDismiss('user_clicked_outside')\n    }\n\n    const handleTooltipClick = (e: MouseEvent) => {\n        e.stopPropagation()\n    }\n\n    const isLastStep = displayedStepIndex >= totalSteps - 1\n    const isFirstStep = displayedStepIndex === 0\n\n    const containerStyle = {\n        '--ph-tour-background-color': appearance.backgroundColor,\n        '--ph-tour-text-color': appearance.textColor,\n        '--ph-tour-button-color': appearance.buttonColor,\n        '--ph-tour-button-text-color': appearance.buttonTextColor,\n        '--ph-tour-border-radius': `${appearance.borderRadius}px`,\n        '--ph-tour-border-color': appearance.borderColor,\n    } as h.JSX.CSSProperties\n\n    const isReady = isModalStep || (transitionState !== 'initializing' && position && spotlightStyle)\n    const isVisible = transitionState === 'visible'\n\n    if (!isReady) {\n        return (\n            <div class=\"ph-tour-container\" style={containerStyle}>\n                <div class=\"ph-tour-click-overlay\" onClick={handleOverlayClick} />\n                <div class=\"ph-tour-spotlight\" style={{ top: '50%', left: '50%', width: '0px', height: '0px' }} />\n            </div>\n        )\n    }\n\n    // Modal step: centered on screen with overlay dimming, no spotlight/arrow\n    if (isModalStep) {\n        return (\n            <div class=\"ph-tour-container\" style={containerStyle}>\n                <div class=\"ph-tour-click-overlay\" onClick={handleOverlayClick} />\n                <div class=\"ph-tour-modal-overlay\" />\n                <div class=\"ph-tour-tooltip ph-tour-tooltip--modal\" onClick={handleTooltipClick}>\n                    <button\n                        class=\"ph-tour-dismiss\"\n                        onClick={() => onDismiss('user_clicked_skip')}\n                        aria-label=\"Close tour\"\n                    >\n                        {cancelSVG}\n                    </button>\n\n                    <div\n                        class=\"ph-tour-content\"\n                        dangerouslySetInnerHTML={{ __html: renderTipTapContent(displayedStep.content) }}\n                    />\n\n                    <div class=\"ph-tour-footer\">\n                        <span class=\"ph-tour-progress\">\n                            {displayedStepIndex + 1} of {totalSteps}\n                        </span>\n\n                        <div class=\"ph-tour-buttons\">\n                            {!isFirstStep && (\n                                <button class=\"ph-tour-button ph-tour-button--secondary\" onClick={onPrevious}>\n                                    Back\n                                </button>\n                            )}\n                            <button class=\"ph-tour-button ph-tour-button--primary\" onClick={onNext}>\n                                {isLastStep ? 'Done' : 'Next'}\n                            </button>\n                        </div>\n                    </div>\n\n                    {!appearance.whiteLabel && (\n                        <a\n                            href=\"https://posthog.com/product-tours\"\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            class=\"ph-tour-branding\"\n                        >\n                            Tour by {IconPosthogLogo}\n                        </a>\n                    )}\n                </div>\n            </div>\n        )\n    }\n\n    return (\n        <div class=\"ph-tour-container\" style={containerStyle}>\n            <div class=\"ph-tour-click-overlay\" onClick={handleOverlayClick} />\n\n            <div\n                class=\"ph-tour-spotlight\"\n                style={\n                    isVisible && spotlightStyle\n                        ? spotlightStyle\n                        : {\n                              top: '50%',\n                              left: '50%',\n                              width: '0px',\n                              height: '0px',\n                          }\n                }\n            />\n\n            <div\n                class={`ph-tour-tooltip ${isVisible ? 'ph-tour-tooltip--visible' : 'ph-tour-tooltip--hidden'}`}\n                style={{\n                    top: `${position!.top}px`,\n                    left: `${position!.left}px`,\n                    opacity: isVisible ? 1 : 0,\n                    transform: isVisible ? 'translateY(0)' : 'translateY(10px)',\n                    transition: 'opacity 0.15s ease-out, transform 0.15s ease-out',\n                }}\n                onClick={handleTooltipClick}\n            >\n                <div class={`ph-tour-arrow ph-tour-arrow--${getOppositePosition(position!.position)}`} />\n\n                <button class=\"ph-tour-dismiss\" onClick={() => onDismiss('user_clicked_skip')} aria-label=\"Close tour\">\n                    {cancelSVG}\n                </button>\n\n                <div\n                    class=\"ph-tour-content\"\n                    dangerouslySetInnerHTML={{ __html: renderTipTapContent(displayedStep.content) }}\n                />\n\n                <div class=\"ph-tour-footer\">\n                    <span class=\"ph-tour-progress\">\n                        {displayedStepIndex + 1} of {totalSteps}\n                    </span>\n\n                    <div class=\"ph-tour-buttons\">\n                        {!isFirstStep && (\n                            <button class=\"ph-tour-button ph-tour-button--secondary\" onClick={onPrevious}>\n                                Back\n                            </button>\n                        )}\n                        <button class=\"ph-tour-button ph-tour-button--primary\" onClick={onNext}>\n                            {isLastStep ? 'Done' : 'Next'}\n                        </button>\n                    </div>\n                </div>\n\n                {!appearance.whiteLabel && (\n                    <a\n                        href=\"https://posthog.com/product-tours\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        class=\"ph-tour-branding\"\n                    >\n                        Tour by {IconPosthogLogo}\n                    </a>\n                )}\n            </div>\n        </div>\n    )\n}\n"]}

package/lib/src/extensions/product-tours/product-tours.d.ts

@@ -1,5 +1,5 @@
 import { PostHog } from '../../posthog-core';
-import { ProductTour, ProductTourDismissReason, ProductTourRenderReason } from '../../posthog-product-tours-types';
+import { ProductTour, ProductTourCallback, ProductTourDismissReason, ProductTourRenderReason } from '../../posthog-product-tours-types';
 export declare class ProductTourManager {
     private _instance;
     private _activeTour;
@@ -7,6 +7,7 @@ export declare class ProductTourManager {
     private _renderReason;
     private _checkInterval;
     private _triggerSelectorListeners;
+    private _surveyEventUnsubscribe;
     constructor(instance: PostHog);
     start(): void;
     stop(): void;
@@ -21,9 +22,14 @@ export declare class ProductTourManager {
     private _completeTour;
     private _renderCurrentStep;
     private _renderTooltipWithPreact;
+    private _renderSurveyStep;
+    private _cleanupSurveyListener;
     private _cleanup;
     private _manageTriggerSelectorListener;
     private _removeTriggerSelectorListener;
     private _removeAllTriggerListeners;
     private _captureEvent;
+    getActiveProductTours(callback: ProductTourCallback): void;
+    resetTour(tourId: string): void;
+    resetAllTours(): void;
 }

package/lib/src/extensions/product-tours/product-tours.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __values = (this && this.__values) || function(o) {
     var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
     if (m) return m.call(o);
@@ -14,15 +25,74 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductTourManager = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 var preact_1 = require("preact");
-var product_tour_utils_1 = require("../../utils/product-tour-utils");
+var posthog_surveys_types_1 = require("../../posthog-surveys-types");
 var product_tours_utils_1 = require("./product-tours-utils");
 var ProductTourTooltip_1 = require("./components/ProductTourTooltip");
 var logger_1 = require("../../utils/logger");
 var globals_1 = require("../../utils/globals");
 var storage_1 = require("../../storage");
 var utils_1 = require("../../utils");
+var core_1 = require("@posthog/core");
 var logger = (0, logger_1.createLogger)('[Product Tours]');
 var document = globals_1.document;
+var window = globals_1.window;
+// Tour condition checking utilities (moved from utils/product-tour-utils.ts)
+function doesTourUrlMatch(tour) {
+    var conditions = tour.conditions;
+    if (!(conditions === null || conditions === void 0 ? void 0 : conditions.url)) {
+        return true;
+    }
+    var currentUrl = window.location.href;
+    var targetUrl = conditions.url;
+    var matchType = conditions.urlMatchType || 'contains';
+    switch (matchType) {
+        case 'exact':
+            return currentUrl === targetUrl;
+        case 'contains':
+            return currentUrl.includes(targetUrl);
+        case 'regex':
+            try {
+                var regex = new RegExp(targetUrl);
+                return regex.test(currentUrl);
+            }
+            catch (_a) {
+                return false;
+            }
+        default:
+            return false;
+    }
+}
+function doesTourSelectorMatch(tour) {
+    var conditions = tour.conditions;
+    if (!(conditions === null || conditions === void 0 ? void 0 : conditions.selector)) {
+        return true;
+    }
+    try {
+        return !(0, core_1.isNull)(document.querySelector(conditions.selector));
+    }
+    catch (_a) {
+        return false;
+    }
+}
+function isTourInDateRange(tour) {
+    var now = new Date();
+    if (tour.start_date) {
+        var startDate = new Date(tour.start_date);
+        if (now < startDate) {
+            return false;
+        }
+    }
+    if (tour.end_date) {
+        var endDate = new Date(tour.end_date);
+        if (now > endDate) {
+            return false;
+        }
+    }
+    return true;
+}
+function checkTourConditions(tour) {
+    return isTourInDateRange(tour) && doesTourUrlMatch(tour) && doesTourSelectorMatch(tour);
+}
 var CONTAINER_CLASS = 'ph-product-tour-container';
 var TRIGGER_LISTENER_ATTRIBUTE = 'data-ph-tour-trigger';
 var CHECK_INTERVAL_MS = 1000;
@@ -64,6 +134,7 @@ var ProductTourManager = /** @class */ (function () {
         this._renderReason = 'auto';
         this._checkInterval = null;
         this._triggerSelectorListeners = new Map();
+        this._surveyEventUnsubscribe = null;
         this._handleVisibilityChange = function () {
             if (document.hidden && _this._checkInterval) {
                 clearInterval(_this._checkInterval);
@@ -145,6 +216,7 @@ var ProductTourManager = /** @class */ (function () {
         // should work even if completed/dismissed
         (_a = this._instance.productTours) === null || _a === void 0 ? void 0 : _a.getProductTours(function (tours) {
             var e_1, _a;
+            var _b;
             if (tours.length === 0) {
                 _this._removeAllTriggerListeners();
                 return;
@@ -153,15 +225,17 @@ var ProductTourManager = /** @class */ (function () {
             try {
                 for (var tours_1 = __values(tours), tours_1_1 = tours_1.next(); !tours_1_1.done; tours_1_1 = tours_1.next()) {
                     var tour = tours_1_1.value;
-                    // Tours with trigger_selector: always attach listener, skip eligibility
+                    // Determine the trigger selector - explicit trigger_selector takes precedence,
+                    // otherwise use conditions.selector for click-only tours (auto_launch=false)
+                    var triggerSelector = tour.trigger_selector || (!tour.auto_launch ? (_b = tour.conditions) === null || _b === void 0 ? void 0 : _b.selector : null);
+                    // Tours with a trigger selector: always attach listener
                     // These are "on-demand" tours that show when clicked
-                    if (tour.trigger_selector) {
+                    if (triggerSelector) {
                         activeTriggerTourIds.add(tour.id);
-                        _this._manageTriggerSelectorListener(tour);
-                        continue;
+                        _this._manageTriggerSelectorListener(__assign(__assign({}, tour), { trigger_selector: triggerSelector }));
                     }
-                    // Tours without trigger_selector: check eligibility for auto-show
-                    if (!_this._activeTour && _this._isTourEligible(tour)) {
+                    // Only auto-show if auto_launch is enabled
+                    if (tour.auto_launch && !_this._activeTour && _this._isTourEligible(tour)) {
                         _this.showTour(tour);
                     }
                 }
@@ -183,7 +257,7 @@ var ProductTourManager = /** @class */ (function () {
     };
     ProductTourManager.prototype._isTourEligible = function (tour) {
         var _a;
-        if (!(0, product_tour_utils_1.checkTourConditions)(tour)) {
+        if (!checkTourConditions(tour)) {
             logger.info("Tour ".concat(tour.id, " failed conditions check"));
             return false;
         }
@@ -206,9 +280,14 @@ var ProductTourManager = /** @class */ (function () {
         var e_2, _a;
         if (reason === void 0) { reason = 'auto'; }
         // Validate all step selectors before showing the tour
+        // Steps without selectors are modal steps and don't need validation
         var selectorFailures = [];
         for (var i = 0; i < tour.steps.length; i++) {
             var step = tour.steps[i];
+            // Skip validation for modal steps (no selector)
+            if (!step.selector) {
+                continue;
+            }
             var result = (0, product_tours_utils_1.findElementBySelector)(step.selector);
             if (result.error === 'not_found' || result.error === 'not_visible') {
                 selectorFailures.push({
@@ -295,6 +374,22 @@ var ProductTourManager = /** @class */ (function () {
             return;
         }
         var step = this._activeTour.steps[this._currentStepIndex];
+        // Survey step - display the linked survey and listen for completion
+        if (step.linkedSurveyId) {
+            this._renderSurveyStep(step.linkedSurveyId);
+            return;
+        }
+        // Modal step (no selector) - render without a target element
+        if (!step.selector) {
+            this._captureEvent('product tour step shown', {
+                $product_tour_id: this._activeTour.id,
+                $product_tour_step_id: step.id,
+                $product_tour_step_order: this._currentStepIndex,
+                $product_tour_step_type: 'modal',
+            });
+            this._renderTooltipWithPreact(null);
+            return;
+        }
         var result = (0, product_tours_utils_1.findElementBySelector)(step.selector);
         if (result.error === 'not_found' || result.error === 'not_visible') {
             this._captureEvent('product tour step selector failed', {
@@ -348,10 +443,59 @@ var ProductTourManager = /** @class */ (function () {
         var shadow = retrieveTourShadow(this._activeTour.id).shadow;
         (0, preact_1.render)((0, jsx_runtime_1.jsx)(ProductTourTooltip_1.ProductTourTooltip, { tour: this._activeTour, step: step, stepIndex: this._currentStepIndex, totalSteps: this._activeTour.steps.length, targetElement: element, onNext: this.nextStep, onPrevious: this.previousStep, onDismiss: this.dismissTour }), shadow);
     };
+    ProductTourManager.prototype._renderSurveyStep = function (surveyId) {
+        var _this = this;
+        var _a;
+        if (!this._activeTour) {
+            return;
+        }
+        var step = this._activeTour.steps[this._currentStepIndex];
+        // Emit tour step shown event
+        this._captureEvent('product tour step shown', {
+            $product_tour_id: this._activeTour.id,
+            $product_tour_step_id: step.id,
+            $product_tour_step_order: this._currentStepIndex,
+            $product_tour_step_type: 'survey',
+            $product_tour_linked_survey_id: surveyId,
+        });
+        // Clean up any existing survey event listener
+        this._cleanupSurveyListener();
+        // Set up listener for survey events
+        this._surveyEventUnsubscribe = this._instance.on('eventCaptured', function (data) {
+            var _a;
+            var eventSurveyId = (_a = data.properties) === null || _a === void 0 ? void 0 : _a[posthog_surveys_types_1.SurveyEventProperties.SURVEY_ID];
+            if (eventSurveyId !== surveyId) {
+                return;
+            }
+            if (data.event === posthog_surveys_types_1.SurveyEventName.SENT) {
+                logger.info("Survey ".concat(surveyId, " completed, advancing tour"));
+                _this._cleanupSurveyListener();
+                _this.nextStep();
+            }
+            else if (data.event === posthog_surveys_types_1.SurveyEventName.DISMISSED) {
+                logger.info("Survey ".concat(surveyId, " dismissed, dismissing tour"));
+                _this._cleanupSurveyListener();
+                _this.dismissTour('user_clicked_skip');
+            }
+        });
+        // Display the survey
+        (_a = this._instance.surveys) === null || _a === void 0 ? void 0 : _a.displaySurvey(surveyId, {
+            ignoreConditions: true,
+            ignoreDelay: true,
+            displayType: posthog_surveys_types_1.DisplaySurveyType.Popover,
+        });
+        logger.info("Displayed survey ".concat(surveyId, " for tour step ").concat(this._currentStepIndex));
+    };
+    ProductTourManager.prototype._cleanupSurveyListener = function () {
+        var _a;
+        (_a = this._surveyEventUnsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+        this._surveyEventUnsubscribe = null;
+    };
     ProductTourManager.prototype._cleanup = function () {
         if (this._activeTour) {
             removeTourFromDom(this._activeTour.id);
         }
+        this._cleanupSurveyListener();
         this._activeTour = null;
         this._currentStepIndex = 0;
         this._renderReason = 'auto';
@@ -412,6 +556,37 @@ var ProductTourManager = /** @class */ (function () {
     ProductTourManager.prototype._captureEvent = function (eventName, properties) {
         this._instance.capture(eventName, properties);
     };
+    // Public API methods delegated from PostHogProductTours
+    ProductTourManager.prototype.getActiveProductTours = function (callback) {
+        var _this = this;
+        var _a;
+        (_a = this._instance.productTours) === null || _a === void 0 ? void 0 : _a.getProductTours(function (tours, context) {
+            if (!(context === null || context === void 0 ? void 0 : context.isLoaded)) {
+                callback([], context);
+                return;
+            }
+            var activeTours = tours.filter(function (tour) { return _this._isTourEligible(tour); });
+            callback(activeTours, context);
+        });
+    };
+    ProductTourManager.prototype.resetTour = function (tourId) {
+        storage_1.localStore._remove("ph_product_tour_completed_".concat(tourId));
+        storage_1.localStore._remove("ph_product_tour_dismissed_".concat(tourId));
+    };
+    ProductTourManager.prototype.resetAllTours = function () {
+        var storage = window === null || window === void 0 ? void 0 : window.localStorage;
+        if (!storage) {
+            return;
+        }
+        var keysToRemove = [];
+        for (var i = 0; i < storage.length; i++) {
+            var key = storage.key(i);
+            if ((key === null || key === void 0 ? void 0 : key.startsWith('ph_product_tour_completed_')) || (key === null || key === void 0 ? void 0 : key.startsWith('ph_product_tour_dismissed_'))) {
+                keysToRemove.push(key);
+            }
+        }
+        keysToRemove.forEach(function (key) { return storage_1.localStore._remove(key); });
+    };
     return ProductTourManager;
 }());
 exports.ProductTourManager = ProductTourManager;