@flowsterix/react 0.4.2 → 0.5.0

package/dist/components/TourPopoverPortal.d.ts

@@ -51,7 +51,12 @@ export interface TourPopoverPortalProps {
     containerComponent?: MotionElementComponent;
     contentComponent?: MotionElementComponent;
     transitionsOverride?: Partial<AnimationAdapterTransitions>;
+    /**
+     * When true, the popover is hidden during the grace period while waiting for target.
+     * The backdrop will show but the popover content remains invisible.
+     */
+    isInGracePeriod?: boolean;
 }
-export declare const TourPopoverPortal: ({ target, children, offset, width, maxWidth, zIndex, placement, role, ariaLabel, ariaDescribedBy, ariaModal, descriptionId, descriptionText, onContainerChange, layoutId, containerComponent, contentComponent, transitionsOverride, }: TourPopoverPortalProps) => import("react").ReactPortal | null;
+export declare const TourPopoverPortal: ({ target, children, offset, width, maxWidth, zIndex, placement, role, ariaLabel, ariaDescribedBy, ariaModal, descriptionId, descriptionText, onContainerChange, layoutId, containerComponent, contentComponent, transitionsOverride, isInGracePeriod, }: TourPopoverPortalProps) => import("react").ReactPortal | null;
 export {};
 //# sourceMappingURL=TourPopoverPortal.d.ts.map

package/dist/components/TourPopoverPortal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TourPopoverPortal.d.ts","sourceRoot":"","sources":["../../src/components/TourPopoverPortal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,SAAS,EACT,WAAW,EACZ,MAAM,OAAO,CAAA;AAYd,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAc,MAAM,cAAc,CAAA;AAExE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAA;AAuB7E,KAAK,kBAAkB,GAAG,WAAW,GACnC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC3C,KAAK,CAAC,EAAE,aAAa,GAAG,WAAW,CAAA;CACpC,CAAA;AAEH,KAAK,sBAAsB,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAA;AAoB/D,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE/E,MAAM,WAAW,4BAA4B;IAC3C,SAAS,EAAE,sBAAsB,CAAA;IACjC,OAAO,EAAE,sBAAsB,CAAA;IAC/B,cAAc,EAAE,kBAAkB,GAChC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;QACxB,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;QAC7B,KAAK,EAAE,aAAa,CAAA;KACrB,CAAA;IACH,YAAY,EAAE,kBAAkB,GAC9B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAA;IACnD,UAAU,EAAE,qBAAqB,CAAA;IACjC,UAAU,EAAE,OAAO,CAAA;IACnB,cAAc,EAAE,OAAO,CAAA;IACvB,eAAe,EAAE;QACf,IAAI,EAAE,QAAQ,CAAA;QACd,YAAY,EAAE,MAAM,CAAA;QACpB,KAAK,EAAE,aAAa,CAAA;QACpB,aAAa,EAAE,mBAAmB,CAAC,iBAAiB,CAAC,CAAA;KACtD,CAAA;IACD,gBAAgB,EAAE;QAChB,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;CACF;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,4BAA4B,KAAK,SAAS,CAAA;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAA;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,sBAAsB,CAAA;IAC3C,gBAAgB,CAAC,EAAE,sBAAsB,CAAA;IACzC,mBAAmB,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAA;CAC3D;AAED,eAAO,MAAM,iBAAiB,GAAI,wOAmB/B,sBAAsB,uCAmsBxB,CAAA"}
+{"version":3,"file":"TourPopoverPortal.d.ts","sourceRoot":"","sources":["../../src/components/TourPopoverPortal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,SAAS,EACT,WAAW,EACZ,MAAM,OAAO,CAAA;AAYd,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAc,MAAM,cAAc,CAAA;AAExE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAA;AAuB7E,KAAK,kBAAkB,GAAG,WAAW,GACnC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC3C,KAAK,CAAC,EAAE,aAAa,GAAG,WAAW,CAAA;CACpC,CAAA;AAEH,KAAK,sBAAsB,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAA;AAoB/D,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE/E,MAAM,WAAW,4BAA4B;IAC3C,SAAS,EAAE,sBAAsB,CAAA;IACjC,OAAO,EAAE,sBAAsB,CAAA;IAC/B,cAAc,EAAE,kBAAkB,GAChC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;QACxB,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;QAC7B,KAAK,EAAE,aAAa,CAAA;KACrB,CAAA;IACH,YAAY,EAAE,kBAAkB,GAC9B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAA;IACnD,UAAU,EAAE,qBAAqB,CAAA;IACjC,UAAU,EAAE,OAAO,CAAA;IACnB,cAAc,EAAE,OAAO,CAAA;IACvB,eAAe,EAAE;QACf,IAAI,EAAE,QAAQ,CAAA;QACd,YAAY,EAAE,MAAM,CAAA;QACpB,KAAK,EAAE,aAAa,CAAA;QACpB,aAAa,EAAE,mBAAmB,CAAC,iBAAiB,CAAC,CAAA;KACtD,CAAA;IACD,gBAAgB,EAAE;QAChB,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;CACF;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,4BAA4B,KAAK,SAAS,CAAA;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAA;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,sBAAsB,CAAA;IAC3C,gBAAgB,CAAC,EAAE,sBAAsB,CAAA;IACzC,mBAAmB,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAA;IAC1D;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,eAAO,MAAM,iBAAiB,GAAI,yPAoB/B,sBAAsB,uCAysBxB,CAAA"}

package/dist/hooks/useHiddenTargetFallback.d.ts

@@ -11,6 +11,11 @@ export interface UseHiddenTargetFallbackConfig {
 export interface UseHiddenTargetFallbackResult {
     target: TourTargetInfo;
     usingScreenFallback: boolean;
+    /**
+     * True during the initial grace period while waiting for target to resolve.
+     * During this time, backdrop should show but popover should be hidden.
+     */
+    isInGracePeriod: boolean;
 }
 export declare const useHiddenTargetFallback: ({ step, target, viewportRect, onSkip, }: UseHiddenTargetFallbackConfig) => UseHiddenTargetFallbackResult;
 //# sourceMappingURL=useHiddenTargetFallback.d.ts.map

package/dist/hooks/useHiddenTargetFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHiddenTargetFallback.d.ts","sourceRoot":"","sources":["../../src/hooks/useHiddenTargetFallback.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAMrD,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,CAAA;IAC5B,MAAM,EAAE,cAAc,CAAA;IACtB,YAAY,EAAE,cAAc,CAAA;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB;AAED,MAAM,WAAW,6BAA6B;IAC5C,MAAM,EAAE,cAAc,CAAA;IACtB,mBAAmB,EAAE,OAAO,CAAA;CAC7B;AAED,eAAO,MAAM,uBAAuB,GAAI,yCAKrC,6BAA6B,KAAG,6BAkGlC,CAAA"}
+{"version":3,"file":"useHiddenTargetFallback.d.ts","sourceRoot":"","sources":["../../src/hooks/useHiddenTargetFallback.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAOrD,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,CAAA;IAC5B,MAAM,EAAE,cAAc,CAAA;IACtB,YAAY,EAAE,cAAc,CAAA;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB;AAED,MAAM,WAAW,6BAA6B;IAC5C,MAAM,EAAE,cAAc,CAAA;IACtB,mBAAmB,EAAE,OAAO,CAAA;IAC5B;;;OAGG;IACH,eAAe,EAAE,OAAO,CAAA;CACzB;AAED,eAAO,MAAM,uBAAuB,GAAI,yCAKrC,6BAA6B,KAAG,6BA+HlC,CAAA"}

package/dist/hooks/useHudState.d.ts

@@ -22,6 +22,11 @@ export interface UseHudStateResult {
     hudRenderMode: FlowHudRenderMode;
     matchesFlowFilter: boolean;
     activeFlowId: string | null;
+    /**
+     * True during grace period while waiting for target to resolve.
+     * Backdrop should show but popover should be hidden.
+     */
+    isInGracePeriod: boolean;
 }
 export declare const useHudState: (options?: UseHudStateOptions) => UseHudStateResult;
 //# sourceMappingURL=useHudState.d.ts.map

package/dist/hooks/useHudState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHudState.d.ts","sourceRoot":"","sources":["../../src/hooks/useHudState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,IAAI,EACL,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAIrD,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAA;CAChC;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAA;IACvB,YAAY,EAAE,SAAS,GAAG,IAAI,CAAA;IAC9B,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,CAAA;IACnC,YAAY,EAAE,OAAO,CAAA;IACrB,aAAa,EAAE,OAAO,CAAA;IACtB,eAAe,EAAE,OAAO,CAAA;IACxB,MAAM,EAAE,cAAc,CAAA;IACtB,SAAS,EAAE,cAAc,CAAA;IACzB,cAAc,EAAE,cAAc,GAAG,IAAI,CAAA;IACrC,aAAa,EAAE,iBAAiB,CAAA;IAChC,iBAAiB,EAAE,OAAO,CAAA;IAC1B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B;AASD,eAAO,MAAM,WAAW,GACtB,UAAS,kBAAuB,KAC/B,iBAsFF,CAAA"}
+{"version":3,"file":"useHudState.d.ts","sourceRoot":"","sources":["../../src/hooks/useHudState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,IAAI,EACL,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAIrD,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAA;CAChC;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAA;IACvB,YAAY,EAAE,SAAS,GAAG,IAAI,CAAA;IAC9B,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,CAAA;IACnC,YAAY,EAAE,OAAO,CAAA;IACrB,aAAa,EAAE,OAAO,CAAA;IACtB,eAAe,EAAE,OAAO,CAAA;IACxB,MAAM,EAAE,cAAc,CAAA;IACtB,SAAS,EAAE,cAAc,CAAA;IACzB,cAAc,EAAE,cAAc,GAAG,IAAI,CAAA;IACrC,aAAa,EAAE,iBAAiB,CAAA;IAChC,iBAAiB,EAAE,OAAO,CAAA;IAC1B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B;;;OAGG;IACH,eAAe,EAAE,OAAO,CAAA;CACzB;AASD,eAAO,MAAM,WAAW,GACtB,UAAS,kBAAuB,KAC/B,iBAuFF,CAAA"}

package/dist/hooks/useHudTargetIssue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHudTargetIssue.d.ts","sourceRoot":"","sources":["../../src/hooks/useHudTargetIssue.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAA;AAElE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,kBAAkB,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,wBAAwB;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,cAAc,GAAG,IAAI,CAAA;IAC5B,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAA;CAChC;AAiCD,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,cAAc,EACtB,UAAU,wBAAwB,KACjC,uBA6BF,CAAA"}
+{"version":3,"file":"useHudTargetIssue.d.ts","sourceRoot":"","sources":["../../src/hooks/useHudTargetIssue.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAA;AAElE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,kBAAkB,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,wBAAwB;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,cAAc,GAAG,IAAI,CAAA;IAC5B,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAA;CAChC;AA4BD,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,cAAc,EACtB,UAAU,wBAAwB,KACjC,uBA6BF,CAAA"}

package/dist/hooks/useTourOverlay.d.ts

@@ -21,6 +21,11 @@ export interface UseTourOverlayOptions {
     radius?: number;
     edgeBuffer?: number;
     interactionMode?: BackdropInteractionMode;
+    /**
+     * When true, the overlay is in a grace period waiting for the target to resolve.
+     * The backdrop will show but without a highlight cutout.
+     */
+    isInGracePeriod?: boolean;
 }
 export interface UseTourOverlayResult {
     /**

package/dist/hooks/useTourOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTourOverlay.d.ts","sourceRoot":"","sources":["../../src/hooks/useTourOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAG/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAOlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,cAAc,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,eAAe,CAAC,EAAE,uBAAuB,CAAA;CAC1C;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,SAAS,EAAE;QACT,IAAI,EAAE,eAAe,GAAG,IAAI,CAAA;QAC5B,OAAO,EAAE,MAAM,CAAA;QACf,OAAO,EAAE,MAAM,CAAA;QACf,MAAM,EAAE,cAAc,GAAG,IAAI,CAAA;QAC7B,QAAQ,EAAE,OAAO,CAAA;KAClB,CAAA;IACD;;OAEG;IACH,UAAU,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,gBAAgB,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAA;IAClD;;OAEG;IACH,eAAe,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAA;IACjD;;OAEG;IACH,eAAe,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,QAAQ,EAAE,cAAc,CAAA;CACzB;AAMD,eAAO,MAAM,cAAc,GACzB,SAAS,qBAAqB,KAC7B,oBAyPF,CAAA"}
+{"version":3,"file":"useTourOverlay.d.ts","sourceRoot":"","sources":["../../src/hooks/useTourOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAG/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAOlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,cAAc,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,eAAe,CAAC,EAAE,uBAAuB,CAAA;IACzC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,SAAS,EAAE;QACT,IAAI,EAAE,eAAe,GAAG,IAAI,CAAA;QAC5B,OAAO,EAAE,MAAM,CAAA;QACf,OAAO,EAAE,MAAM,CAAA;QACf,MAAM,EAAE,cAAc,GAAG,IAAI,CAAA;QAC7B,QAAQ,EAAE,OAAO,CAAA;KAClB,CAAA;IACD;;OAEG;IACH,UAAU,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,gBAAgB,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAA;IAClD;;OAEG;IACH,eAAe,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAA;IACjD;;OAEG;IACH,eAAe,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,QAAQ,EAAE,cAAc,CAAA;CACzB;AAMD,eAAO,MAAM,cAAc,GACzB,SAAS,qBAAqB,KAC7B,oBA2PF,CAAA"}

package/dist/index.cjs

@@ -1878,6 +1878,7 @@ var useAdvanceRules = (target) => {
 // src/hooks/useHiddenTargetFallback.ts
 var import_react7 = require("react");
 var DEFAULT_DELAY_MS = 900;
+var DEFAULT_GRACE_PERIOD_MS = 400;
 var useHiddenTargetFallback = ({
   step,
   target,
@@ -1885,7 +1886,9 @@ var useHiddenTargetFallback = ({
   onSkip
 }) => {
   const [usingScreenFallback, setUsingScreenFallback] = (0, import_react7.useState)(false);
+  const [isInGracePeriod, setIsInGracePeriod] = (0, import_react7.useState)(false);
   const timeoutRef = (0, import_react7.useRef)(null);
+  const graceTimeoutRef = (0, import_react7.useRef)(null);
   const skipTriggeredRef = (0, import_react7.useRef)(false);
   const hiddenMode = step?.targetBehavior?.hidden ?? "screen";
   const hiddenDelayMs = Math.max(
@@ -1898,26 +1901,43 @@ var useHiddenTargetFallback = ({
       timeoutRef.current = null;
     }
   };
+  const clearGraceTimeout = () => {
+    if (graceTimeoutRef.current !== null) {
+      globalThis.clearTimeout(graceTimeoutRef.current);
+      graceTimeoutRef.current = null;
+    }
+  };
   (0, import_react7.useEffect)(() => {
     skipTriggeredRef.current = false;
     setUsingScreenFallback(false);
+    setIsInGracePeriod(false);
     clearPendingTimeout();
-    return clearPendingTimeout;
+    clearGraceTimeout();
+    return () => {
+      clearPendingTimeout();
+      clearGraceTimeout();
+    };
   }, [step?.id]);
   (0, import_react7.useEffect)(() => {
     if (!isBrowser) return void 0;
     if (!step) return void 0;
     clearPendingTimeout();
+    clearGraceTimeout();
     const isHiddenOrDetached = (target.visibility === "hidden" || target.visibility === "detached") && target.status === "ready";
     const isMissingWithNoRect = target.visibility === "missing" && target.status === "resolving" && target.rect === null && target.lastResolvedRect === null;
     const shouldHandleHiddenTarget = !target.isScreen && (isHiddenOrDetached || isMissingWithNoRect);
     if (!shouldHandleHiddenTarget) {
       setUsingScreenFallback(false);
+      setIsInGracePeriod(false);
       return void 0;
     }
+    setIsInGracePeriod(true);
     if (hiddenMode !== "screen") {
       setUsingScreenFallback(false);
     }
+    graceTimeoutRef.current = globalThis.setTimeout(() => {
+      setIsInGracePeriod(false);
+    }, DEFAULT_GRACE_PERIOD_MS);
     timeoutRef.current = globalThis.setTimeout(() => {
       if (hiddenMode === "screen") {
         setUsingScreenFallback(true);
@@ -1928,7 +1948,10 @@ var useHiddenTargetFallback = ({
         onSkip();
       }
     }, hiddenDelayMs);
-    return clearPendingTimeout;
+    return () => {
+      clearPendingTimeout();
+      clearGraceTimeout();
+    };
   }, [
     step,
     target.visibility,
@@ -1956,7 +1979,8 @@ var useHiddenTargetFallback = ({
   }, [target, usingScreenFallback, viewportRect]);
   return {
     target: resolvedTarget,
-    usingScreenFallback
+    usingScreenFallback,
+    isInGracePeriod
   };
 };
 
@@ -2053,7 +2077,7 @@ var useHudState = (options = {}) => {
       next();
     }
   }, [activeFlowId, complete, flows, next, runningState]);
-  const { target: hudTarget } = useHiddenTargetFallback({
+  const { target: hudTarget, isInGracePeriod } = useHiddenTargetFallback({
     step: runningStep,
     target,
     viewportRect,
@@ -2075,7 +2099,8 @@ var useHudState = (options = {}) => {
     flowHudOptions,
     hudRenderMode,
     matchesFlowFilter,
-    activeFlowId
+    activeFlowId,
+    isInGracePeriod
   };
 };
 
@@ -2338,17 +2363,12 @@ var deriveTargetIssue = (target) => {
   if (target.status === "idle") return null;
   switch (target.visibility) {
     case "missing":
-      return {
-        type: "missing",
-        title: "Looking for the target",
-        body: "Flowsterix is still trying to find this element. Make sure the UI piece is mounted or adjust the selector.",
-        hint: target.rectSource === "stored" ? "Showing the last known position until the element returns." : void 0
-      };
     case "hidden":
       return {
-        type: "hidden",
-        title: "Target is hidden",
-        body: "The element exists but is currently hidden, collapsed, or zero-sized. Expand it so the highlight can lock on."
+        type: target.visibility,
+        title: "Target not visible",
+        body: "The target element is not currently visible. Make sure the UI piece is mounted and displayed.",
+        hint: target.rectSource === "stored" ? "Showing the last known position until the element returns." : void 0
       };
     case "detached":
       return {
@@ -2483,7 +2503,8 @@ var useTourOverlay = (options) => {
     padding = DEFAULT_PADDING,
     radius = DEFAULT_RADIUS,
     edgeBuffer = DEFAULT_EDGE_BUFFER,
-    interactionMode = "passthrough"
+    interactionMode = "passthrough",
+    isInGracePeriod = false
   } = options;
   const hasShownRef = (0, import_react16.useRef)(false);
   const lastReadyTargetRef = (0, import_react16.useRef)(null);
@@ -2538,7 +2559,7 @@ var useTourOverlay = (options) => {
     radius: highlightRadius
   } : null;
   const maskCapable = (0, import_react16.useMemo)(() => supportsMasking(), []);
-  const isActive = target.status === "ready" || target.status === "resolving" && cachedTarget !== null;
+  const isActive = target.status === "ready" || target.status === "resolving" && cachedTarget !== null || isInGracePeriod;
   const shouldMask = maskCapable && isActive;
   const maskId = (0, import_react16.useMemo)(
     () => `tour-overlay-mask-${Math.random().toString(36).slice(2, 10)}`,
@@ -3179,7 +3200,8 @@ var TourPopoverPortal = ({
   layoutId,
   containerComponent,
   contentComponent,
-  transitionsOverride
+  transitionsOverride,
+  isInGracePeriod = false
 }) => {
   if (!isBrowser) return null;
   const host = portalHost();
@@ -3210,6 +3232,7 @@ var TourPopoverPortal = ({
   const cachedTarget = lastReadyTargetRef.current;
   const resolvedRect = target.rect ?? target.lastResolvedRect ?? cachedTarget?.rect ?? null;
   const resolvedIsScreen = target.status === "ready" ? target.isScreen : cachedTarget?.isScreen ?? target.isScreen;
+  const shouldHideForGracePeriod = isInGracePeriod && !resolvedRect;
   const fallbackRect = resolvedRect ?? viewport;
   const fallbackIsScreen = resolvedIsScreen;
   const [floatingSize, setFloatingSize] = (0, import_react20.useState)(null);
@@ -3715,6 +3738,7 @@ var TourPopoverPortal = ({
     dragHandleProps,
     descriptionProps
   };
+  if (shouldHideForGracePeriod) return null;
   return (0, import_react_dom2.createPortal)(children(context), host);
 };
 

package/dist/index.mjs

@@ -1619,6 +1619,7 @@ var useAdvanceRules = (target) => {
 // src/hooks/useHiddenTargetFallback.ts
 import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
 var DEFAULT_DELAY_MS = 900;
+var DEFAULT_GRACE_PERIOD_MS = 400;
 var useHiddenTargetFallback = ({
   step,
   target,
@@ -1626,7 +1627,9 @@ var useHiddenTargetFallback = ({
   onSkip
 }) => {
   const [usingScreenFallback, setUsingScreenFallback] = useState4(false);
+  const [isInGracePeriod, setIsInGracePeriod] = useState4(false);
   const timeoutRef = useRef3(null);
+  const graceTimeoutRef = useRef3(null);
   const skipTriggeredRef = useRef3(false);
   const hiddenMode = step?.targetBehavior?.hidden ?? "screen";
   const hiddenDelayMs = Math.max(
@@ -1639,26 +1642,43 @@ var useHiddenTargetFallback = ({
       timeoutRef.current = null;
     }
   };
+  const clearGraceTimeout = () => {
+    if (graceTimeoutRef.current !== null) {
+      globalThis.clearTimeout(graceTimeoutRef.current);
+      graceTimeoutRef.current = null;
+    }
+  };
   useEffect5(() => {
     skipTriggeredRef.current = false;
     setUsingScreenFallback(false);
+    setIsInGracePeriod(false);
     clearPendingTimeout();
-    return clearPendingTimeout;
+    clearGraceTimeout();
+    return () => {
+      clearPendingTimeout();
+      clearGraceTimeout();
+    };
   }, [step?.id]);
   useEffect5(() => {
     if (!isBrowser) return void 0;
     if (!step) return void 0;
     clearPendingTimeout();
+    clearGraceTimeout();
     const isHiddenOrDetached = (target.visibility === "hidden" || target.visibility === "detached") && target.status === "ready";
     const isMissingWithNoRect = target.visibility === "missing" && target.status === "resolving" && target.rect === null && target.lastResolvedRect === null;
     const shouldHandleHiddenTarget = !target.isScreen && (isHiddenOrDetached || isMissingWithNoRect);
     if (!shouldHandleHiddenTarget) {
       setUsingScreenFallback(false);
+      setIsInGracePeriod(false);
       return void 0;
     }
+    setIsInGracePeriod(true);
     if (hiddenMode !== "screen") {
       setUsingScreenFallback(false);
     }
+    graceTimeoutRef.current = globalThis.setTimeout(() => {
+      setIsInGracePeriod(false);
+    }, DEFAULT_GRACE_PERIOD_MS);
     timeoutRef.current = globalThis.setTimeout(() => {
       if (hiddenMode === "screen") {
         setUsingScreenFallback(true);
@@ -1669,7 +1689,10 @@ var useHiddenTargetFallback = ({
         onSkip();
       }
     }, hiddenDelayMs);
-    return clearPendingTimeout;
+    return () => {
+      clearPendingTimeout();
+      clearGraceTimeout();
+    };
   }, [
     step,
     target.visibility,
@@ -1697,7 +1720,8 @@ var useHiddenTargetFallback = ({
   }, [target, usingScreenFallback, viewportRect]);
   return {
     target: resolvedTarget,
-    usingScreenFallback
+    usingScreenFallback,
+    isInGracePeriod
   };
 };
 
@@ -1794,7 +1818,7 @@ var useHudState = (options = {}) => {
       next();
     }
   }, [activeFlowId, complete, flows, next, runningState]);
-  const { target: hudTarget } = useHiddenTargetFallback({
+  const { target: hudTarget, isInGracePeriod } = useHiddenTargetFallback({
     step: runningStep,
     target,
     viewportRect,
@@ -1816,7 +1840,8 @@ var useHudState = (options = {}) => {
     flowHudOptions,
     hudRenderMode,
     matchesFlowFilter,
-    activeFlowId
+    activeFlowId,
+    isInGracePeriod
   };
 };
 
@@ -2079,17 +2104,12 @@ var deriveTargetIssue = (target) => {
   if (target.status === "idle") return null;
   switch (target.visibility) {
     case "missing":
-      return {
-        type: "missing",
-        title: "Looking for the target",
-        body: "Flowsterix is still trying to find this element. Make sure the UI piece is mounted or adjust the selector.",
-        hint: target.rectSource === "stored" ? "Showing the last known position until the element returns." : void 0
-      };
     case "hidden":
       return {
-        type: "hidden",
-        title: "Target is hidden",
-        body: "The element exists but is currently hidden, collapsed, or zero-sized. Expand it so the highlight can lock on."
+        type: target.visibility,
+        title: "Target not visible",
+        body: "The target element is not currently visible. Make sure the UI piece is mounted and displayed.",
+        hint: target.rectSource === "stored" ? "Showing the last known position until the element returns." : void 0
       };
     case "detached":
       return {
@@ -2224,7 +2244,8 @@ var useTourOverlay = (options) => {
     padding = DEFAULT_PADDING,
     radius = DEFAULT_RADIUS,
     edgeBuffer = DEFAULT_EDGE_BUFFER,
-    interactionMode = "passthrough"
+    interactionMode = "passthrough",
+    isInGracePeriod = false
   } = options;
   const hasShownRef = useRef5(false);
   const lastReadyTargetRef = useRef5(null);
@@ -2279,7 +2300,7 @@ var useTourOverlay = (options) => {
     radius: highlightRadius
   } : null;
   const maskCapable = useMemo9(() => supportsMasking(), []);
-  const isActive = target.status === "ready" || target.status === "resolving" && cachedTarget !== null;
+  const isActive = target.status === "ready" || target.status === "resolving" && cachedTarget !== null || isInGracePeriod;
   const shouldMask = maskCapable && isActive;
   const maskId = useMemo9(
     () => `tour-overlay-mask-${Math.random().toString(36).slice(2, 10)}`,
@@ -2926,7 +2947,8 @@ var TourPopoverPortal = ({
   layoutId,
   containerComponent,
   contentComponent,
-  transitionsOverride
+  transitionsOverride,
+  isInGracePeriod = false
 }) => {
   if (!isBrowser) return null;
   const host = portalHost();
@@ -2957,6 +2979,7 @@ var TourPopoverPortal = ({
   const cachedTarget = lastReadyTargetRef.current;
   const resolvedRect = target.rect ?? target.lastResolvedRect ?? cachedTarget?.rect ?? null;
   const resolvedIsScreen = target.status === "ready" ? target.isScreen : cachedTarget?.isScreen ?? target.isScreen;
+  const shouldHideForGracePeriod = isInGracePeriod && !resolvedRect;
   const fallbackRect = resolvedRect ?? viewport;
   const fallbackIsScreen = resolvedIsScreen;
   const [floatingSize, setFloatingSize] = useState10(null);
@@ -3462,6 +3485,7 @@ var TourPopoverPortal = ({
     dragHandleProps,
     descriptionProps
   };
+  if (shouldHideForGracePeriod) return null;
   return createPortal2(children(context), host);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowsterix/react",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "React bindings for Flowsterix - guided tours and onboarding flows",
   "license": "MIT",
   "repository": {
@@ -75,7 +75,9 @@
     "react-router-dom": ">=6"
   },
   "devDependencies": {
-    "motion": "^12.29.0"
+    "motion": "^12.29.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "peerDependenciesMeta": {
     "motion": {
@@ -94,6 +96,7 @@
   "scripts": {
     "build": "tsup --config tsup.config.ts --format esm,cjs --clean && tsc --build tsconfig.json --force",
     "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
     "test": "vitest run"
   }
 }