@inappstory/react-sdk 1.9.4 → 1.9.6

package/dist/index.esm.mjs

@@ -9,7 +9,6 @@ import * as __WEBPACK_EXTERNAL_MODULE_deepmerge__ from "deepmerge";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_debounce_js_35379ba8__ from "lodash/debounce.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inappstory_slide_api_2e636188__ from "@inappstory/slide-api";
 import * as __WEBPACK_EXTERNAL_MODULE_async_mutex_052338b1__ from "async-mutex";
-import * as __WEBPACK_EXTERNAL_MODULE_lodash_isEmpty_js_f1e1789b__ from "lodash/isEmpty.js";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_isObject_js_84bb7d23__ from "lodash/isObject.js";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_isNumber_js_09f2ee09__ from "lodash/isNumber.js";
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/jsx-runtime";
@@ -21,8 +20,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_mobx_react_lite_9dacf130__ from "mobx-reac
 import * as __WEBPACK_EXTERNAL_MODULE_react_dom_7dac9eee__ from "react-dom";
 import * as __WEBPACK_EXTERNAL_MODULE_lit__ from "lit";
 import * as __WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__ from "lit/decorators.js";
-import * as __WEBPACK_EXTERNAL_MODULE_lit_static_html_js_21a342d6__ from "lit/static-html.js";
 import * as __WEBPACK_EXTERNAL_MODULE_lit_directives_style_map_js_4fbc7c29__ from "lit/directives/style-map.js";
+import * as __WEBPACK_EXTERNAL_MODULE_lit_static_html_js_21a342d6__ from "lit/static-html.js";
 import * as __WEBPACK_EXTERNAL_MODULE_lit_directives_class_map_js_2f88e643__ from "lit/directives/class-map.js";
 import * as __WEBPACK_EXTERNAL_MODULE_lit_directives_unsafe_html_js_56553e3e__ from "lit/directives/unsafe-html.js";
 /******/ var __webpack_modules__ = ({
@@ -904,7 +903,7 @@ ___CSS_LOADER_EXPORT___.locals = {
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".loader--O0iuj{position:absolute;z-index:1;top:0;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;background:var(--loader-background, black)}.loader--O0iuj .loader__refresh-btn--RtExV{color:#fff;cursor:pointer;position:absolute;left:50%;top:50%;transform:translate3d(-50%, -50%, 0);pointer-events:auto;padding:20px;width:32px;height:32px;box-sizing:content-box}.loader--O0iuj .loader__spinner--cKqH0{-ms-flex-negative:0;flex-shrink:0;display:inline-block;width:32px;height:32px;border-radius:50%;border:solid 2px var(--loaderBackgroundColor, white);border-color:var(--loaderBackgroundAccentColor, transparent) var(--loaderBackgroundColor, white) var(--loaderBackgroundColor, white) var(--loaderBackgroundColor, white);-webkit-animation:loading-spinner--7I4aU .6s infinite linear;animation:loading-spinner--7I4aU .6s infinite linear}@keyframes loading-spinner--7I4aU{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}", "",{"version":3,"sources":["webpack://./src/UI/Loader/loader.module.scss"],"names":[],"mappings":"AAAA,eACI,iBAAA,CACA,SAAA,CACA,KAAA,CACA,QAAA,CACA,MAAA,CACA,OAAA,CACA,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,0CAAA,CAEA,2CACI,UAAA,CACA,cAAA,CACA,iBAAA,CACA,QAAA,CACA,OAAA,CACA,oCAAA,CACA,mBAAA,CACA,YAAA,CACA,UAAA,CACA,WAAA,CACA,sBAAA,CAGJ,uCACI,mBAAA,CACA,aAAA,CACA,oBAAA,CACA,UAAA,CACA,WAAA,CACA,iBAAA,CACA,oDAAA,CACA,wKAAA,CACA,4DAAA,CACA,oDAAA,CAIR,kCACI,KACI,8BAAA,CACA,sBAAA,CAGJ,GACI,gCAAA,CACA,wBAAA,CAAA","sourcesContent":[".loader {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: var(--loader-background, black);\n\n    .loader__refresh-btn {\n        color: white;\n        cursor: pointer;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate3d(-50%, -50%, 0);\n        pointer-events: auto;\n        padding: 20px;\n        width: 32px;\n        height: 32px;\n        box-sizing: content-box;\n    }\n\n    .loader__spinner {\n        -ms-flex-negative: 0;\n        flex-shrink: 0;\n        display: inline-block;\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        border: solid 2px var(--loaderBackgroundColor, white);\n        border-color: var(--loaderBackgroundAccentColor, transparent) var(--loaderBackgroundColor, white) var(--loaderBackgroundColor, white) var(--loaderBackgroundColor, white);\n        -webkit-animation: loading-spinner .6s infinite linear;\n        animation: loading-spinner .6s infinite linear;\n    }\n}\n\n@keyframes loading-spinner {\n    from {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg);\n    }\n\n    to {\n        -webkit-transform: rotate(359deg);\n        transform: rotate(359deg);\n    }\n}"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, ".loader--O0iuj{position:absolute;z-index:10001;top:0;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;background:var(--loader-background, black)}.loader--O0iuj .loader__refresh-btn--RtExV{color:#fff;cursor:pointer;position:absolute;left:50%;top:50%;transform:translate3d(-50%, -50%, 0);pointer-events:auto;padding:20px;width:32px;height:32px;box-sizing:content-box}.loader--O0iuj .loader__spinner--cKqH0{-ms-flex-negative:0;flex-shrink:0;display:inline-block;width:32px;height:32px;border-radius:50%;border:solid 2px var(--loaderBackgroundColor, white);border-color:var(--loaderBackgroundAccentColor, transparent) var(--loaderBackgroundColor, white) var(--loaderBackgroundColor, white) var(--loaderBackgroundColor, white);-webkit-animation:loading-spinner--7I4aU .6s infinite linear;animation:loading-spinner--7I4aU .6s infinite linear}@keyframes loading-spinner--7I4aU{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}", "",{"version":3,"sources":["webpack://./src/UI/Loader/loader.module.scss"],"names":[],"mappings":"AAAA,eACI,iBAAA,CACA,aAAA,CACA,KAAA,CACA,QAAA,CACA,MAAA,CACA,OAAA,CACA,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,0CAAA,CAEA,2CACI,UAAA,CACA,cAAA,CACA,iBAAA,CACA,QAAA,CACA,OAAA,CACA,oCAAA,CACA,mBAAA,CACA,YAAA,CACA,UAAA,CACA,WAAA,CACA,sBAAA,CAGJ,uCACI,mBAAA,CACA,aAAA,CACA,oBAAA,CACA,UAAA,CACA,WAAA,CACA,iBAAA,CACA,oDAAA,CACA,wKAAA,CACA,4DAAA,CACA,oDAAA,CAIR,kCACI,KACI,8BAAA,CACA,sBAAA,CAGJ,GACI,gCAAA,CACA,wBAAA,CAAA","sourcesContent":[".loader {\n    position: absolute;\n    z-index: 10001;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: var(--loader-background, black);\n\n    .loader__refresh-btn {\n        color: white;\n        cursor: pointer;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate3d(-50%, -50%, 0);\n        pointer-events: auto;\n        padding: 20px;\n        width: 32px;\n        height: 32px;\n        box-sizing: content-box;\n    }\n\n    .loader__spinner {\n        -ms-flex-negative: 0;\n        flex-shrink: 0;\n        display: inline-block;\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        border: solid 2px var(--loaderBackgroundColor, white);\n        border-color: var(--loaderBackgroundAccentColor, transparent) var(--loaderBackgroundColor, white) var(--loaderBackgroundColor, white) var(--loaderBackgroundColor, white);\n        -webkit-animation: loading-spinner .6s infinite linear;\n        animation: loading-spinner .6s infinite linear;\n    }\n}\n\n@keyframes loading-spinner {\n    from {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg);\n    }\n\n    to {\n        -webkit-transform: rotate(359deg);\n        transform: rotate(359deg);\n    }\n}"],"sourceRoot":""}]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"loader": "loader--O0iuj",
@@ -3689,6 +3688,12 @@ class IamAppearanceCommonOptions {
             writable: true,
             value: {}
         });
+        Object.defineProperty(this, "zIndex", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.background = this.mapBackgroundDtoToModel(optionsDto.background);
         this.cardAppearance = (_a = optionsDto.card_appearance) !== null && _a !== void 0 ? _a : {};
     }
@@ -5706,26 +5711,6 @@ let Story = (() => {
             get wasShown() {
                 return this._wasShown;
             }
-            getImagesPerSlide(index) {
-                var _b, _c;
-                this.parseHtmlSlidesForMainImage();
-                return (_c = (_b = this._parsedSlideImage) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : null;
-            }
-            parseHtmlSlidesForMainImage() {
-                if (this._parsedSlideImage || !this.slidesLoaded)
-                    return;
-                this._parsedSlideImage = this._slides.map((slide) => this.parseSlideNarrativeImageSrc(slide.html) ||
-                    this.parseSlideNarrativeVideoPosterSrc(slide.html) ||
-                    null);
-            }
-            parseSlideNarrativeImageSrc(slideHtml) {
-                const results = slideHtml.match(/<[^<]*narrative-element-image.*<img[^<]*src="([^"]*)"[^<]*>/i);
-                return results === null || results === void 0 ? void 0 : results[1];
-            }
-            parseSlideNarrativeVideoPosterSrc(slideHtml) {
-                const results = slideHtml.match(/<[^<]*narrative-element-video.*<video[^<]*poster\-remote\-src="([^"]*)"[^<]*>/i);
-                return results === null || results === void 0 ? void 0 : results[1];
-            }
             get videoCover() {
                 return this._videoCover;
             }
@@ -7962,12 +7947,6 @@ let SharePanelViewModel = (() => {
 ;// CONCATENATED MODULE: ../core/src/readers/storyReader/sharePanelViewModel/index.ts
 
 
-;// CONCATENATED MODULE: external "async-mutex"
-var external_async_mutex_x = (y) => {
-	var x = {}; __webpack_require__.d(x, y); return x
-} 
-var external_async_mutex_y = (x) => (() => (x))
-const external_async_mutex_namespaceObject = external_async_mutex_x({ ["Mutex"]: () => (__WEBPACK_EXTERNAL_MODULE_async_mutex_052338b1__.Mutex), ["Semaphore"]: () => (__WEBPACK_EXTERNAL_MODULE_async_mutex_052338b1__.Semaphore) });
 ;// CONCATENATED MODULE: ../core/src/readers/storyReader/storySlideViewModel/storySlideViewModel.ts
 var storySlideViewModel_runInitializers = (undefined && undefined.__runInitializers) || function (thisArg, initializers, value) {
     var useValue = arguments.length > 2;
@@ -8017,21 +7996,35 @@ var storySlideViewModel_classPrivateFieldSet = (undefined && undefined.__classPr
 
 
 
-
 const SWIPE_UP_THRESHOLD = 10;
 const SLIDE_CLICK_THRESHOLD = 0.3;
 const SHOW_SLIDE_TIMEOUT = 500;
 const STORY_LOADER_TIMEOUT = 500;
+var StorySlideEmodji;
+(function (StorySlideEmodji) {
+    StorySlideEmodji["Init"] = "\uD83D\uDD27";
+    StorySlideEmodji["Start"] = "\uD83D\uDE80";
+    StorySlideEmodji["Pause"] = "\u23F8\uFE0F";
+    StorySlideEmodji["Resume"] = "\u21A9\uFE0F";
+    StorySlideEmodji["Stop"] = "\uD83D\uDED1";
+    StorySlideEmodji["Destroy"] = "\uD83D\uDDD1\uFE0F";
+    StorySlideEmodji["Restart"] = "\uD83D\uDD04";
+})(StorySlideEmodji || (StorySlideEmodji = {}));
 let StorySlideViewModel = (() => {
-    var _a, _StorySlideViewModel__disabledNextClick_accessor_storage;
+    var _a, _StorySlideViewModel__disabledNextClick_accessor_storage, _StorySlideViewModel__cover_accessor_storage;
     let _instanceExtraInitializers = [];
     let __disabledNextClick_decorators;
     let __disabledNextClick_initializers = [];
     let __disabledNextClick_extraInitializers = [];
-    let _start_decorators;
+    let __cover_decorators;
+    let __cover_initializers = [];
+    let __cover_extraInitializers = [];
+    let _commit_decorators;
     return _a = class StorySlideViewModel {
             get _disabledNextClick() { return storySlideViewModel_classPrivateFieldGet(this, _StorySlideViewModel__disabledNextClick_accessor_storage, "f"); }
             set _disabledNextClick(value) { storySlideViewModel_classPrivateFieldSet(this, _StorySlideViewModel__disabledNextClick_accessor_storage, value, "f"); }
+            get _cover() { return storySlideViewModel_classPrivateFieldGet(this, _StorySlideViewModel__cover_accessor_storage, "f"); }
+            set _cover(value) { storySlideViewModel_classPrivateFieldSet(this, _StorySlideViewModel__cover_accessor_storage, value, "f"); }
             constructor(_story, _index, slideApi, slide, cacheManager) {
                 Object.defineProperty(this, "_story", {
                     enumerable: true,
@@ -8064,35 +8057,28 @@ let StorySlideViewModel = (() => {
                     value: cacheManager
                 });
                 _StorySlideViewModel__disabledNextClick_accessor_storage.set(this, storySlideViewModel_runInitializers(this, __disabledNextClick_initializers, false));
-                Object.defineProperty(this, "mutex", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: (storySlideViewModel_runInitializers(this, __disabledNextClick_extraInitializers), new external_async_mutex_namespaceObject.Mutex())
-                });
-                Object.defineProperty(this, "isInited", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: false
-                });
-                Object.defineProperty(this, "isStarted", {
+                _StorySlideViewModel__cover_accessor_storage.set(this, (storySlideViewModel_runInitializers(this, __disabledNextClick_extraInitializers), storySlideViewModel_runInitializers(this, __cover_initializers, null)));
+                Object.defineProperty(this, "preloaded", {
                     enumerable: true,
                     configurable: true,
                     writable: true,
-                    value: false
+                    value: (storySlideViewModel_runInitializers(this, __cover_extraInitializers), false)
                 });
-                Object.defineProperty(this, "preloaded", {
+                Object.defineProperty(this, "isPreloading", {
                     enumerable: true,
                     configurable: true,
                     writable: true,
                     value: false
                 });
-                Object.defineProperty(this, "isPreloading", {
+                Object.defineProperty(this, "state", {
                     enumerable: true,
                     configurable: true,
                     writable: true,
-                    value: false
+                    value: external_mobx_namespaceObject.observable.object({
+                        inited: false,
+                        started: false,
+                        paused: false
+                    })
                 });
                 Object.defineProperty(this, "handleTouchEnd", {
                     enumerable: true,
@@ -8133,6 +8119,9 @@ let StorySlideViewModel = (() => {
             get disabledNextClick() {
                 return this._disabledNextClick;
             }
+            get cover() {
+                return this._cover;
+            }
             mute() {
                 this.slideApi.disableAudio();
             }
@@ -8152,8 +8141,7 @@ let StorySlideViewModel = (() => {
                 this.slideApi.setWidgetGoodsComplete(elementId);
             }
             async init() {
-                const release = await this.mutex.acquire();
-                if (this.isInited)
+                if (this.state.inited)
                     return;
                 let loaderShown = this.story.needShowLoaderScreen;
                 let startTime = Date.now();
@@ -8162,12 +8150,12 @@ let StorySlideViewModel = (() => {
                     loaderShown = true;
                     startTime = Date.now();
                 }, SHOW_SLIDE_TIMEOUT);
+                let result = false;
                 try {
-                    debug(`[SLIDE][INIT]:${this.story.id}:${this.slide.index}`);
-                    const { result, reason } = await this.slideApi.showSlide(this.html);
-                    if (!result)
-                        throw new Error(reason);
-                    this.isInited = true;
+                    const data = await this.slideApi.showSlide(this.html);
+                    result = data.result;
+                    if (!data.result)
+                        throw new Error(data.reason);
                 }
                 catch (error) {
                     this.handleSlideError(error);
@@ -8175,124 +8163,112 @@ let StorySlideViewModel = (() => {
                 finally {
                     clearTimeout(loaderTimeout);
                     await this.cleanupLoaderIfNeeded(Date.now() - startTime, loaderShown);
-                    release();
+                    if (result)
+                        this._cover = this.getCoverByLayer();
                 }
+                this.commit({ inited: true });
+                this.debug(`${StorySlideEmodji.Init} [Slide Lifecycle] inited: `);
             }
             async start() {
-                const release = await this.mutex.acquire();
+                if (!this.state.inited || this.state.started)
+                    return;
                 try {
-                    if (!this.isInited || this.isStarted)
-                        return;
-                    debug(`[SLIDE][START]:${this.story.id}:${this.slide.index}`);
                     await this.slideApi.slideStart({ muted: this._story.muted });
                     this.story.touchController.on(TouchControllerEvent.TouchEnd, this.handleTouchEnd);
-                    this.isStarted = true;
                 }
                 catch (error) {
                     this.handleSlideError(error);
                 }
-                finally {
-                    release();
-                }
+                this.commit({ started: true });
+                this.debug(`${StorySlideEmodji.Start} [Slide Lifecycle] started: `);
             }
             async restart() {
-                const release = await this.mutex.acquire();
                 try {
                     this.story.hideErrorScreen();
                     this.story.showLoaderScreen();
                     await this.slideApi.slideRestart({ muted: this._story.muted });
-                    this.isInited = true;
-                    this.isStarted = true;
+                    this.commit({ inited: true, started: true, paused: false });
                 }
                 catch (error) {
                     this.handleSlideError(error);
                 }
                 finally {
                     this.story.hideLoaderScreen();
-                    release();
                 }
+                this.debug(`${StorySlideEmodji.Restart} [Slide Lifecycle] restarted: `);
             }
             async resumeByApp() {
-                const release = await this.mutex.acquire();
+                if (!this.state.paused)
+                    return;
                 try {
-                    if (!this.isStarted)
-                        return;
-                    debug(`[SLIDE][RESUME-BY-APP]:${this.story.id}:${this.slide.index}`);
                     await this.slideApi.slideAppResume();
                 }
                 catch (error) {
                     this.handleSlideError(error);
                 }
-                finally {
-                    release();
-                }
+                this.commit({ paused: false });
+                this.debug(`${StorySlideEmodji.Resume} [Slide Lifecycle] resume by app: `);
             }
             async pauseByApp() {
-                const release = await this.mutex.acquire();
+                if (this.state.paused)
+                    return;
                 try {
-                    if (!this.isStarted)
-                        return;
-                    debug(`[SLIDE][PAUSE-BY-APP]:${this.story.id}:${this.slide.index}`);
                     await this.slideApi.slideAppPause();
                 }
                 catch (error) {
                     this.handleSlideError(error);
                 }
-                finally {
-                    release();
-                }
+                this.debug(`${StorySlideEmodji.Pause} [Slide Lifecycle] pause by app: `);
+                this.commit({ paused: true });
             }
             async resumeByUser() {
-                const release = await this.mutex.acquire();
+                if (!this.state.paused)
+                    return;
                 try {
-                    if (!this.isStarted)
-                        return;
-                    debug(`[SLIDE][RESUME-BY-USER]:${this.story.id}:${this.slide.index}`);
                     await this.slideApi.slideUserResume();
                 }
                 catch (error) {
                     this.handleSlideError(error);
                 }
-                finally {
-                    release();
-                }
+                this.commit({ paused: false });
+                this.debug(`${StorySlideEmodji.Resume} [Slide Lifecycle] resume by user: `);
             }
             async pauseByUser() {
-                const release = await this.mutex.acquire();
+                if (this.state.paused)
+                    return;
                 try {
-                    if (!this.isStarted)
-                        return;
-                    debug(`[SLIDE][PAUSE-BY-USER]:${this.story.id}:${this.slide.index}`);
                     await this.slideApi.slideUserPause();
                 }
                 catch (error) {
                     this.handleSlideError(error);
                 }
-                finally {
-                    release();
-                }
+                this.commit({ paused: true });
+                this.debug(`${StorySlideEmodji.Pause} [Slide Lifecycle] pause by user: `);
             }
             async stop(params) {
-                const release = await this.mutex.acquire();
+                if (!this.state.started)
+                    return;
+                await this.stopAndCleanup(params);
+                if (params.prepareForRestart === 1 /* ON_SLIDE_STOP_PREPARE_FOR_RESTART.PREPARE */) {
+                    this.commit({ started: false, paused: false });
+                }
+                else {
+                    this.commit({ started: false, inited: false, paused: false });
+                }
+                this.debug(`${StorySlideEmodji.Stop} [Slide Lifecycle] stopped: `);
+            }
+            async stopAndCleanup(params) {
                 try {
-                    if (!this.isInited || !this.isStarted)
-                        return;
-                    debug(`[SLIDE][STOP]:${this.story.id}:${this.slide.index}`);
+                    this.story.touchController.off(TouchControllerEvent.TouchEnd, this.handleTouchEnd);
                     await this.slideApi.slideStop(params);
                 }
                 catch (error) {
                     this.handleSlideError(error);
                 }
-                finally {
-                    this.isStarted = false;
-                    if (params.prepareForRestart === 2 /* ON_SLIDE_STOP_PREPARE_FOR_RESTART.NOT_PREPARE */)
-                        this.isInited = false;
-                    this.story.touchController.off(TouchControllerEvent.TouchEnd, this.handleTouchEnd);
-                    release();
-                }
             }
             showLayerByIndex(index) {
                 this.slideApi.showLayer(index);
+                this._cover = this.getCoverByLayer();
             }
             canGoNext() {
                 const { canClickNext } = this.slideApi.slideClickHandler(null, "forward");
@@ -8335,20 +8311,17 @@ let StorySlideViewModel = (() => {
                 }
             }
             async destroy() {
-                const release = await this.mutex.acquire();
                 try {
-                    this.isStarted = false;
-                    this.isInited = false;
-                    this.story.touchController.off(TouchControllerEvent.TouchEnd, this.handleTouchEnd);
                     if (this.cacheManager)
                         this.slide.restoreOriginalResourceUrls();
+                    this.story.touchController.off(TouchControllerEvent.TouchEnd, this.handleTouchEnd);
+                    this.commit({ inited: false, started: false, paused: false });
+                    this.debug(`${StorySlideEmodji.Destroy} [Slide Lifecycle] destroyed: `);
+                    await this.slideApi.slideStop({ prepareForRestart: 2 /* ON_SLIDE_STOP_PREPARE_FOR_RESTART.NOT_PREPARE */ });
                 }
                 catch (error) {
                     console.error(error);
                 }
-                finally {
-                    release();
-                }
             }
             getNavigationDirection(event, currentTarget) {
                 const xPercent = this.getClickPosition(event, currentTarget);
@@ -8392,14 +8365,37 @@ let StorySlideViewModel = (() => {
                     this.story.hideLoaderScreen();
                 }
             }
+            getCoverByLayer() {
+                var _b, _c;
+                const activeLayer = this.slideApi.activeLayer.nodeRef;
+                const imageSrc = (_b = activeLayer.querySelector(".narrative-element-image img")) === null || _b === void 0 ? void 0 : _b.src;
+                const videoPosterSrc = (_c = activeLayer.querySelector(".narrative-element-video video")) === null || _c === void 0 ? void 0 : _c.getAttribute("poster-remote-src");
+                return imageSrc || videoPosterSrc || null;
+            }
+            commit(partial) {
+                Object.assign(this.state, partial);
+                if (!this.state.inited) {
+                    this.state.started = false;
+                    this.state.paused = false;
+                }
+                if (!this.state.started) {
+                    this.state.paused = false;
+                }
+            }
+            debug(message) {
+                debug(message, { cardId: this.story.id, slideIndex: this.index });
+            }
         },
         _StorySlideViewModel__disabledNextClick_accessor_storage = new WeakMap(),
+        _StorySlideViewModel__cover_accessor_storage = new WeakMap(),
         (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
             __disabledNextClick_decorators = [external_mobx_namespaceObject.observable];
-            _start_decorators = [noConcurrent];
+            __cover_decorators = [external_mobx_namespaceObject.observable];
+            _commit_decorators = [external_mobx_namespaceObject.action];
             storySlideViewModel_esDecorate(_a, null, __disabledNextClick_decorators, { kind: "accessor", name: "_disabledNextClick", static: false, private: false, access: { has: obj => "_disabledNextClick" in obj, get: obj => obj._disabledNextClick, set: (obj, value) => { obj._disabledNextClick = value; } }, metadata: _metadata }, __disabledNextClick_initializers, __disabledNextClick_extraInitializers);
-            storySlideViewModel_esDecorate(_a, null, _start_decorators, { kind: "method", name: "start", static: false, private: false, access: { has: obj => "start" in obj, get: obj => obj.start }, metadata: _metadata }, null, _instanceExtraInitializers);
+            storySlideViewModel_esDecorate(_a, null, __cover_decorators, { kind: "accessor", name: "_cover", static: false, private: false, access: { has: obj => "_cover" in obj, get: obj => obj._cover, set: (obj, value) => { obj._cover = value; } }, metadata: _metadata }, __cover_initializers, __cover_extraInitializers);
+            storySlideViewModel_esDecorate(_a, null, _commit_decorators, { kind: "method", name: "commit", static: false, private: false, access: { has: obj => "commit" in obj, get: obj => obj.commit }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         })(),
         _a;
@@ -9637,6 +9633,12 @@ let TextInputViewModel = (() => {
 const SLIDE_RATIO = 310 / 480;
 const MOBILE_ASPECT_RATIO = 428 / 805;
 
+;// CONCATENATED MODULE: external "async-mutex"
+var external_async_mutex_x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var external_async_mutex_y = (x) => (() => (x))
+const external_async_mutex_namespaceObject = external_async_mutex_x({ ["Mutex"]: () => (__WEBPACK_EXTERNAL_MODULE_async_mutex_052338b1__.Mutex), ["Semaphore"]: () => (__WEBPACK_EXTERNAL_MODULE_async_mutex_052338b1__.Semaphore) });
 ;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyViewModel/storyViewModel.ts
 var storyViewModel_runInitializers = (undefined && undefined.__runInitializers) || function (thisArg, initializers, value) {
     var useValue = arguments.length > 2;
@@ -9700,11 +9702,22 @@ var storyViewModel_classPrivateFieldSet = (undefined && undefined.__classPrivate
 
 var StoryEvent;
 (function (StoryEvent) {
-    StoryEvent["ShowToast"] = "showToast";
+    StoryEvent["Started"] = "started";
 })(StoryEvent || (StoryEvent = {}));
+var StoryEmodji;
+(function (StoryEmodji) {
+    StoryEmodji["Prefetch"] = "\uD83D\uDD04";
+    StoryEmodji["Init"] = "\uD83D\uDD27";
+    StoryEmodji["Start"] = "\uD83D\uDFE2";
+    StoryEmodji["Stop"] = "\uD83D\uDED1";
+    StoryEmodji["Attach"] = "\uD83D\uDD17";
+    StoryEmodji["Detach"] = "\uD83D\uDDD1\uFE0F";
+})(StoryEmodji || (StoryEmodji = {}));
 const ACTIVE_SLIDE_PRELOAD_PRIORITY = 1000;
+const ACTIVE_STORY_PRELOAD_PRIORITY = 1000;
+const NON_ACTIVE_STORY_PRELOAD_PRIORITY = 0;
 let StoryViewModel = (() => {
-    var _a, _StoryViewModel__activeSlideIndex_accessor_storage, _StoryViewModel__slides_accessor_storage, _StoryViewModel__needShowErrorScreen_accessor_storage, _StoryViewModel__needShowLoaderScreen_accessor_storage, _StoryViewModel__$root_accessor_storage, _StoryViewModel_isInited_accessor_storage;
+    var _a, _StoryViewModel__activeSlideIndex_accessor_storage, _StoryViewModel__slides_accessor_storage, _StoryViewModel__needShowErrorScreen_accessor_storage, _StoryViewModel__needShowLoaderScreen_accessor_storage, _StoryViewModel__$root_accessor_storage;
     var _b;
     let _classSuper = ViewModel;
     let _instanceExtraInitializers = [];
@@ -9723,13 +9736,9 @@ let StoryViewModel = (() => {
     let __$root_decorators;
     let __$root_initializers = [];
     let __$root_extraInitializers = [];
-    let _isInited_decorators;
-    let _isInited_initializers = [];
-    let _isInited_extraInitializers = [];
     let _get_needShowErrorScreen_decorators;
     let _get_needShowLoaderScreen_decorators;
     let _get_activeSlide_decorators;
-    let _get_displayedSlideImage_decorators;
     let _get_reachEnd_decorators;
     let _get_reachStart_decorators;
     let _get_pauseState_decorators;
@@ -9742,6 +9751,7 @@ let StoryViewModel = (() => {
     let _showSlide_decorators;
     let _markAsOpened_decorators;
     let _markWasShown_decorators;
+    let _commit_decorators;
     return _a = class StoryViewModel extends _classSuper {
             get _activeSlideIndex() { return storyViewModel_classPrivateFieldGet(this, _StoryViewModel__activeSlideIndex_accessor_storage, "f"); }
             set _activeSlideIndex(value) { storyViewModel_classPrivateFieldSet(this, _StoryViewModel__activeSlideIndex_accessor_storage, value, "f"); }
@@ -9753,9 +9763,7 @@ let StoryViewModel = (() => {
             set _needShowLoaderScreen(value) { storyViewModel_classPrivateFieldSet(this, _StoryViewModel__needShowLoaderScreen_accessor_storage, value, "f"); }
             get _$root() { return storyViewModel_classPrivateFieldGet(this, _StoryViewModel__$root_accessor_storage, "f"); }
             set _$root(value) { storyViewModel_classPrivateFieldSet(this, _StoryViewModel__$root_accessor_storage, value, "f"); }
-            get isInited() { return storyViewModel_classPrivateFieldGet(this, _StoryViewModel_isInited_accessor_storage, "f"); }
-            set isInited(value) { storyViewModel_classPrivateFieldSet(this, _StoryViewModel_isInited_accessor_storage, value, "f"); }
-            constructor(storyManager, storyReader, story, storySlideApiHandlersFactory, storyReaderStatisticV1Service, storyReaderStatisticV2Service, cacheManager) {
+            constructor(storyManager, storyReader, story, storySlideApiHandlersFactory, statisticV1Service, statisticV2Service, cacheManager) {
                 super();
                 Object.defineProperty(this, "storyManager", {
                     enumerable: true,
@@ -9781,17 +9789,17 @@ let StoryViewModel = (() => {
                     writable: true,
                     value: storySlideApiHandlersFactory
                 });
-                Object.defineProperty(this, "storyReaderStatisticV1Service", {
+                Object.defineProperty(this, "statisticV1Service", {
                     enumerable: true,
                     configurable: true,
                     writable: true,
-                    value: storyReaderStatisticV1Service
+                    value: statisticV1Service
                 });
-                Object.defineProperty(this, "storyReaderStatisticV2Service", {
+                Object.defineProperty(this, "statisticV2Service", {
                     enumerable: true,
                     configurable: true,
                     writable: true,
-                    value: storyReaderStatisticV2Service
+                    value: statisticV2Service
                 });
                 Object.defineProperty(this, "cacheManager", {
                     enumerable: true,
@@ -9804,24 +9812,11 @@ let StoryViewModel = (() => {
                 _StoryViewModel__needShowErrorScreen_accessor_storage.set(this, (storyViewModel_runInitializers(this, __slides_extraInitializers), storyViewModel_runInitializers(this, __needShowErrorScreen_initializers, false)));
                 _StoryViewModel__needShowLoaderScreen_accessor_storage.set(this, (storyViewModel_runInitializers(this, __needShowErrorScreen_extraInitializers), storyViewModel_runInitializers(this, __needShowLoaderScreen_initializers, false)));
                 _StoryViewModel__$root_accessor_storage.set(this, (storyViewModel_runInitializers(this, __needShowLoaderScreen_extraInitializers), storyViewModel_runInitializers(this, __$root_initializers, null)));
-                _StoryViewModel_isInited_accessor_storage.set(this, (storyViewModel_runInitializers(this, __$root_extraInitializers), storyViewModel_runInitializers(this, _isInited_initializers, false)));
-                Object.defineProperty(this, "isStarted", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: (storyViewModel_runInitializers(this, _isInited_extraInitializers), false)
-                });
                 Object.defineProperty(this, "_activeSlideStartTime", {
                     enumerable: true,
                     configurable: true,
                     writable: true,
-                    value: 0
-                });
-                Object.defineProperty(this, "mutex", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: new external_async_mutex_namespaceObject.Mutex()
+                    value: (storyViewModel_runInitializers(this, __$root_extraInitializers), 0)
                 });
                 // internal services
                 Object.defineProperty(this, "slideApi", {
@@ -9836,12 +9831,6 @@ let StoryViewModel = (() => {
                     writable: true,
                     value: void 0
                 });
-                Object.defineProperty(this, "storySlidesReactionDisposer", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: void 0
-                });
                 // UI
                 Object.defineProperty(this, "timeline", {
                     enumerable: true,
@@ -9885,23 +9874,37 @@ let StoryViewModel = (() => {
                     writable: true,
                     value: void 0
                 });
+                Object.defineProperty(this, "mutex", {
+                    enumerable: true,
+                    configurable: true,
+                    writable: true,
+                    value: new external_async_mutex_namespaceObject.Mutex()
+                });
                 Object.defineProperty(this, "toast", {
                     enumerable: true,
                     configurable: true,
                     writable: true,
                     value: null
                 });
-                Object.defineProperty(this, "attachRoot", {
+                Object.defineProperty(this, "state", {
                     enumerable: true,
                     configurable: true,
                     writable: true,
-                    value: async (el) => {
-                        this._$root = el;
-                        // Reaction to `layout` (modern or classic) change
-                        // TODO: add test with example
-                        await this.reinit();
-                        await this.restart();
-                    }
+                    value: external_mobx_namespaceObject.observable.object({
+                        attached: false,
+                        inited: false,
+                        started: false,
+                        prefetched: false
+                    })
+                });
+                /**
+                 * The story content are loaded at the time the instance is created (e.g. when the story reader is reopened)
+                 */
+                Object.defineProperty(this, "isLoaded", {
+                    enumerable: true,
+                    configurable: true,
+                    writable: true,
+                    value: false
                 });
                 Object.defineProperty(this, "handleKeydown", {
                     enumerable: true,
@@ -9926,18 +9929,20 @@ let StoryViewModel = (() => {
                 this.pauseManager = new StoryPauseManager(this);
                 this.touchController = this.storyReader.touchController;
                 this.slideApiHandlers = this.storySlideApiHandlersFactory.create(this);
-                this.goodsWidget = new StoryGoodsWidgetViewModel(this.storyManager, this, this.storyReaderStatisticV2Service);
-                this.textInput = new TextInputViewModel(this, this.storyReaderStatisticV2Service);
+                this.goodsWidget = new StoryGoodsWidgetViewModel(this.storyManager, this, this.statisticV2Service);
+                this.textInput = new TextInputViewModel(this, this.statisticV2Service);
                 this.timeline = new StoryTimelineViewModel(this);
                 this.sharePanel = new SharePanelViewModel(this.storyManager, this, this.storyReader.touchController);
-                this.actionPanel = new StoryActionPanelViewModel(this.storyManager, this, this.sharePanel, this.storyReaderStatisticV2Service);
-                this.storySlidesReactionDisposer = this.observeStorySlides();
+                this.actionPanel = new StoryActionPanelViewModel(this.storyManager, this, this.sharePanel, this.statisticV2Service);
+                this.isLoaded = this.story.canBeShown && Boolean(this.story.slides.length > 0);
             }
             get needShowErrorScreen() {
                 return this._needShowErrorScreen || Boolean(this.error);
             }
             get needShowLoaderScreen() {
-                return !this.story.canBeShown || this._needShowLoaderScreen;
+                if (this.isLoaded)
+                    return !this.slides.length || this._needShowLoaderScreen;
+                return !this.slides.length || !this.state.inited || this._needShowLoaderScreen;
             }
             get id() {
                 return this.story.id;
@@ -9960,9 +9965,6 @@ let StoryViewModel = (() => {
             get displayStrategy() {
                 return this.storyReader.displayStrategy;
             }
-            get canBeShown() {
-                return this.story.canBeShown && this.slides.length > 0 && Boolean(this._$root);
-            }
             get context() {
                 return this.story.context;
             }
@@ -9987,9 +9989,6 @@ let StoryViewModel = (() => {
             get slidesCount() {
                 return this.story.slidesCount;
             }
-            get displayedSlideImage() {
-                return this.story.getImagesPerSlide(this.activeSlideIndex);
-            }
             get reachEnd() {
                 return this.slides.length === 0 || this.activeSlideIndex === this.slides.length - 1;
             }
@@ -10019,7 +10018,10 @@ let StoryViewModel = (() => {
                 return this.storyReader.dir;
             }
             get isSlideRendered() {
-                return this.isInited;
+                return this.state.inited;
+            }
+            get cover() {
+                return this.activeSlide.cover;
             }
             get isNextDisabled() {
                 return ((this.storyReader.reachEnd && this.reachEnd) ||
@@ -10076,6 +10078,8 @@ let StoryViewModel = (() => {
             }
             setError(error) {
                 this.story.setError(error);
+                if (error)
+                    this.handleStoryError(error);
             }
             async reset() {
                 this.textInput.close();
@@ -10092,7 +10096,7 @@ let StoryViewModel = (() => {
             }
             async prevSlideOrStory() {
                 if (this.reachStart && this.storyReader.reachStart) {
-                    if (!this.isStarted)
+                    if (!this.state.started)
                         return;
                     await this.activeSlide.restart();
                     return;
@@ -10110,6 +10114,17 @@ let StoryViewModel = (() => {
                 this.storyReader.unmute();
                 this.activeSlide.unmute();
             }
+            showLayer(index) {
+                var _b;
+                this.statisticV2Service.sendSlideLayout({
+                    layoutIndex: index,
+                    storyId: this.id,
+                    activeSlideIndex: this.activeSlideIndex,
+                    feedSlug: (_b = this.feed) === null || _b === void 0 ? void 0 : _b.slug
+                });
+                this.resumeUser();
+                this.activeSlide.showLayerByIndex(index);
+            }
             pauseUser() {
                 if (this.timeline.paused)
                     return;
@@ -10140,22 +10155,56 @@ let StoryViewModel = (() => {
             async updateNarrativeData(data) {
                 await this.storyManager.rootStore.storyStore.updateNarrativeData(this.id, data);
             }
-            detachRoot() {
-                var _b;
+            async detach(ui) {
+                var _b, _c;
+                if (ui.container || !this.state.attached)
+                    return;
                 this._$root = null;
-                const isInited = this.isInited;
-                const isStarted = this.isStarted;
-                this.stop();
-                (_b = this.slideApi) === null || _b === void 0 ? void 0 : _b.destroy();
+                (_b = this.toast) === null || _b === void 0 ? void 0 : _b.destroy();
+                this.slideApiHandlers.clearNarrativeSessionDataCache();
+                this.resumeAll();
+                document.removeEventListener("visibilitychange", this.handleVisibilityChange);
+                document.removeEventListener("keydown", this.handleKeydown);
+                (_c = this.slideApi) === null || _c === void 0 ? void 0 : _c.destroy();
                 for (const slide of this._slides)
-                    slide.destroy();
-                this.isInited = isInited;
-                this.isStarted = isStarted;
+                    await slide.destroy();
+                this.debug(`${StoryEmodji.Detach} [Story Lifecycle] detached: `);
+                this.commit({ attached: false, inited: false, started: false });
+            }
+            async attach(ui) {
+                if (!ui.container || this.state.attached)
+                    return;
+                this._$root = ui.container;
+                await (0,external_mobx_namespaceObject.when)(() => this.story.canBeShown && Boolean(this.story.slides.length));
+                this.slideApi = this.createSlideApi(ui.container);
+                this.createSlidesViewModels(this.story.slides, this.slideApi);
+                this.debug(`${StoryEmodji.Attach} [Story Lifecycle] attached: `);
+                this.commit({ attached: true });
+            }
+            async prefetch(ui) {
+                if (!ui.canBeInited || this.state.prefetched)
+                    return;
+                if (this === ui.activeStory) {
+                    await this.preload(ACTIVE_STORY_PRELOAD_PRIORITY);
+                }
+                else {
+                    await this.preload(NON_ACTIVE_STORY_PRELOAD_PRIORITY, 2);
+                }
+                this.debug(`${StoryEmodji.Prefetch} [Story Lifecycle] prefetched: `);
+                this.commit({ prefetched: true });
+            }
+            async preload(priority = 1000, count = this.slidesCount) {
+                const cacheConfig = this.storyManager.config.cache;
+                if (!cacheConfig)
+                    return;
+                if (cacheConfig.prefetch) {
+                    await this.preloadSlides(0, count, priority);
+                }
+                else {
+                    await this.preloadActiveSlide(priority);
+                }
             }
             async preloadSlides(start, end, priority) {
-                if (!this.story.canBeShown)
-                    this.showLoaderScreen();
-                await (0,external_mobx_namespaceObject.when)(() => this.story.canBeShown);
                 end = end !== null && end !== void 0 ? end : this._slides.length;
                 priority = priority !== null && priority !== void 0 ? priority : 0;
                 await Promise.all(this._slides.slice(start, end).map((slide, index) => slide.preload(end - index + priority)));
@@ -10163,41 +10212,36 @@ let StoryViewModel = (() => {
             async preloadActiveSlide(priority) {
                 this.preloadSlides(this._activeSlideIndex, this._activeSlideIndex + 1, priority);
             }
-            async init() {
-                await this.mutex.runExclusive(async () => {
-                    if (this.isInited)
-                        return;
-                    if (!this.story.canBeShown)
-                        this.showLoaderScreen();
-                    await (0,external_mobx_namespaceObject.when)(() => this.canBeShown);
-                    await this.activeSlide.init();
-                    this.isInited = true;
-                });
+            async init(ui) {
+                if (!ui.canBeInited || !this.state.attached || this.state.inited)
+                    return;
+                await this.activeSlide.init();
+                this.debug(`${StoryEmodji.Init} [Story Lifecycle] inited: `);
+                this.commit({ inited: true });
             }
-            async start() {
-                await this.mutex.runExclusive(async () => {
-                    if (this.isStarted || !this.isInited)
-                        return;
-                    await this.activeSlide.start();
-                    document.addEventListener("visibilitychange", this.handleVisibilityChange);
-                    document.addEventListener("keydown", this.handleKeydown);
-                    this.isStarted = true;
-                    this._activeSlideStartTime = Date.now();
-                });
+            async start(ui) {
+                if (!ui.canBeStarted || !this.state.inited || this.state.started)
+                    return;
+                this.emit(StoryEvent.Started);
+                await this.activeSlide.start();
+                document.addEventListener("visibilitychange", this.handleVisibilityChange);
+                document.addEventListener("keydown", this.handleKeydown);
+                this._activeSlideStartTime = Date.now();
+                this.debug(`${StoryEmodji.Start} [Story Lifecycle] started: `);
+                this.commit({ started: true });
             }
-            async stop() {
-                await this.mutex.runExclusive(async () => {
-                    var _b;
-                    if (!this.isStarted || !this.isInited)
-                        return;
-                    (_b = this.toast) === null || _b === void 0 ? void 0 : _b.destroy();
-                    this.isStarted = false;
-                    this.slideApiHandlers.clearNarrativeSessionDataCache();
-                    this.resumeAll();
-                    document.removeEventListener("visibilitychange", this.handleVisibilityChange);
-                    document.removeEventListener("keydown", this.handleKeydown);
-                    await this.activeSlide.stop({ prepareForRestart: 1 /* ON_SLIDE_STOP_PREPARE_FOR_RESTART.PREPARE */ });
-                });
+            async stop(ui) {
+                var _b;
+                if (ui.canBeStarted || !this.state.started)
+                    return;
+                (_b = this.toast) === null || _b === void 0 ? void 0 : _b.destroy();
+                this.slideApiHandlers.clearNarrativeSessionDataCache();
+                this.resumeAll();
+                document.removeEventListener("visibilitychange", this.handleVisibilityChange);
+                document.removeEventListener("keydown", this.handleKeydown);
+                await this.activeSlide.stop({ prepareForRestart: 1 /* ON_SLIDE_STOP_PREPARE_FOR_RESTART.PREPARE */ });
+                this.debug(`${StoryEmodji.Stop} [Story Lifecycle] stopped: `);
+                this.commit({ started: false });
             }
             canGoNext() {
                 return this.activeSlide.canGoNext();
@@ -10213,23 +10257,15 @@ let StoryViewModel = (() => {
             }
             async destroy() {
                 var _b, _c;
-                this._$root = null;
                 document.removeEventListener("visibilitychange", this.handleVisibilityChange);
                 document.removeEventListener("keydown", this.handleKeydown);
-                this.storySlidesReactionDisposer();
                 this.sharePanel.close();
                 this.textInput.close();
                 this.timeline.destroy();
                 this.goodsWidget.close();
-                const activeSlide = this.getSlideByIndex(this._activeSlideIndex);
                 this.slideApiHandlers.clearNarrativeSessionDataCache();
-                if (this.isStarted)
-                    await activeSlide.stop({ prepareForRestart: 2 /* ON_SLIDE_STOP_PREPARE_FOR_RESTART.NOT_PREPARE */ });
-                await activeSlide.destroy();
                 (_b = this.slideApi) === null || _b === void 0 ? void 0 : _b.destroy();
                 (_c = this.toast) === null || _c === void 0 ? void 0 : _c.destroy();
-                this.isInited = false;
-                this.isStarted = false;
             }
             notifyPauseStateChange() {
                 if (this.pauseManager.isUserPaused)
@@ -10243,7 +10279,7 @@ let StoryViewModel = (() => {
             }
             emitSlideV2Stat(index, durationMs) {
                 var _b;
-                this.storyReaderStatisticV2Service.sendSlideEvent({
+                this.statisticV2Service.sendSlideEvent({
                     durationMs,
                     storyId: this.id,
                     activeSlideIndex: index,
@@ -10253,21 +10289,11 @@ let StoryViewModel = (() => {
             emitSlideV1Stat(index) {
                 const event = new ShowSlideEvent(this);
                 this.storyManager.emit(event.name, event.toJSON());
-                this.storyReaderStatisticV1Service.sendOpenStoryEvent({
+                this.statisticV1Service.sendOpenStoryEvent({
                     storyId: this.id,
                     slideIndex: index
                 });
             }
-            observeStorySlides() {
-                return (0,external_mobx_namespaceObject.reaction)(() => ({ storySlides: this.story.slides, canBeShown: this.story.canBeShown && Boolean(this._$root) }), ({ storySlides, canBeShown }) => {
-                    if (!this._$root || !canBeShown || !storySlides.length)
-                        return [];
-                    this.slideApi = this.createSlideApi(this._$root);
-                    return this.createSlidesViewModels(storySlides, this.slideApi);
-                }, {
-                    fireImmediately: true
-                });
-            }
             createSlideApi(root) {
                 const slideApi = new slide_api_namespaceObject.SlideApi(this.slideApiHandlers, {
                     root,
@@ -10321,17 +10347,39 @@ let StoryViewModel = (() => {
                     console.error(error);
                 }
             }
-            async reinit() {
-                if (this.isInited) {
-                    this.isInited = false;
-                    await this.init();
-                }
+            handleStoryError(error) {
+                const event = new ShowStoryFailed({
+                    id: this.id,
+                    title: this.title,
+                    name: error.name,
+                    message: error.message
+                });
+                this.storyManager.emit(event.name, event.toJSON());
             }
-            async restart() {
-                if (this.isStarted) {
-                    this.isStarted = false;
-                    await this.start();
+            async update(uiState) {
+                await this.mutex.runExclusive(async () => {
+                    await this.detach(uiState);
+                    await this.attach(uiState);
+                    await this.prefetch(uiState);
+                    await this.init(uiState);
+                    await this.stop(uiState);
+                    await this.start(uiState);
+                });
+            }
+            commit(partial) {
+                Object.assign(this.state, partial);
+                if (!this.state.attached) {
+                    this.state.inited = false;
+                    this.state.started = false;
+                    this.state.prefetched = false;
                 }
+                if (!this.state.inited) {
+                    this.state.started = false;
+                    this.state.prefetched = false;
+                }
+            }
+            debug(message) {
+                //debug(message, { storyId: this.id });
             }
         },
         _StoryViewModel__activeSlideIndex_accessor_storage = new WeakMap(),
@@ -10339,7 +10387,6 @@ let StoryViewModel = (() => {
         _StoryViewModel__needShowErrorScreen_accessor_storage = new WeakMap(),
         _StoryViewModel__needShowLoaderScreen_accessor_storage = new WeakMap(),
         _StoryViewModel__$root_accessor_storage = new WeakMap(),
-        _StoryViewModel_isInited_accessor_storage = new WeakMap(),
         (() => {
             var _b;
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create((_b = _classSuper[Symbol.metadata]) !== null && _b !== void 0 ? _b : null) : void 0;
@@ -10348,11 +10395,9 @@ let StoryViewModel = (() => {
             __needShowErrorScreen_decorators = [external_mobx_namespaceObject.observable];
             __needShowLoaderScreen_decorators = [external_mobx_namespaceObject.observable];
             __$root_decorators = [external_mobx_namespaceObject.observable];
-            _isInited_decorators = [external_mobx_namespaceObject.observable];
             _get_needShowErrorScreen_decorators = [external_mobx_namespaceObject.computed];
             _get_needShowLoaderScreen_decorators = [external_mobx_namespaceObject.computed];
             _get_activeSlide_decorators = [external_mobx_namespaceObject.computed];
-            _get_displayedSlideImage_decorators = [external_mobx_namespaceObject.computed];
             _get_reachEnd_decorators = [external_mobx_namespaceObject.computed];
             _get_reachStart_decorators = [external_mobx_namespaceObject.computed];
             _get_pauseState_decorators = [(_b = external_mobx_namespaceObject.computed).struct.bind(_b)];
@@ -10365,16 +10410,15 @@ let StoryViewModel = (() => {
             _showSlide_decorators = [external_mobx_namespaceObject.action];
             _markAsOpened_decorators = [external_mobx_namespaceObject.action];
             _markWasShown_decorators = [external_mobx_namespaceObject.action];
+            _commit_decorators = [external_mobx_namespaceObject.action];
             storyViewModel_esDecorate(_a, null, __activeSlideIndex_decorators, { kind: "accessor", name: "_activeSlideIndex", static: false, private: false, access: { has: obj => "_activeSlideIndex" in obj, get: obj => obj._activeSlideIndex, set: (obj, value) => { obj._activeSlideIndex = value; } }, metadata: _metadata }, __activeSlideIndex_initializers, __activeSlideIndex_extraInitializers);
             storyViewModel_esDecorate(_a, null, __slides_decorators, { kind: "accessor", name: "_slides", static: false, private: false, access: { has: obj => "_slides" in obj, get: obj => obj._slides, set: (obj, value) => { obj._slides = value; } }, metadata: _metadata }, __slides_initializers, __slides_extraInitializers);
             storyViewModel_esDecorate(_a, null, __needShowErrorScreen_decorators, { kind: "accessor", name: "_needShowErrorScreen", static: false, private: false, access: { has: obj => "_needShowErrorScreen" in obj, get: obj => obj._needShowErrorScreen, set: (obj, value) => { obj._needShowErrorScreen = value; } }, metadata: _metadata }, __needShowErrorScreen_initializers, __needShowErrorScreen_extraInitializers);
             storyViewModel_esDecorate(_a, null, __needShowLoaderScreen_decorators, { kind: "accessor", name: "_needShowLoaderScreen", static: false, private: false, access: { has: obj => "_needShowLoaderScreen" in obj, get: obj => obj._needShowLoaderScreen, set: (obj, value) => { obj._needShowLoaderScreen = value; } }, metadata: _metadata }, __needShowLoaderScreen_initializers, __needShowLoaderScreen_extraInitializers);
             storyViewModel_esDecorate(_a, null, __$root_decorators, { kind: "accessor", name: "_$root", static: false, private: false, access: { has: obj => "_$root" in obj, get: obj => obj._$root, set: (obj, value) => { obj._$root = value; } }, metadata: _metadata }, __$root_initializers, __$root_extraInitializers);
-            storyViewModel_esDecorate(_a, null, _isInited_decorators, { kind: "accessor", name: "isInited", static: false, private: false, access: { has: obj => "isInited" in obj, get: obj => obj.isInited, set: (obj, value) => { obj.isInited = value; } }, metadata: _metadata }, _isInited_initializers, _isInited_extraInitializers);
             storyViewModel_esDecorate(_a, null, _get_needShowErrorScreen_decorators, { kind: "getter", name: "needShowErrorScreen", static: false, private: false, access: { has: obj => "needShowErrorScreen" in obj, get: obj => obj.needShowErrorScreen }, metadata: _metadata }, null, _instanceExtraInitializers);
             storyViewModel_esDecorate(_a, null, _get_needShowLoaderScreen_decorators, { kind: "getter", name: "needShowLoaderScreen", static: false, private: false, access: { has: obj => "needShowLoaderScreen" in obj, get: obj => obj.needShowLoaderScreen }, metadata: _metadata }, null, _instanceExtraInitializers);
             storyViewModel_esDecorate(_a, null, _get_activeSlide_decorators, { kind: "getter", name: "activeSlide", static: false, private: false, access: { has: obj => "activeSlide" in obj, get: obj => obj.activeSlide }, metadata: _metadata }, null, _instanceExtraInitializers);
-            storyViewModel_esDecorate(_a, null, _get_displayedSlideImage_decorators, { kind: "getter", name: "displayedSlideImage", static: false, private: false, access: { has: obj => "displayedSlideImage" in obj, get: obj => obj.displayedSlideImage }, metadata: _metadata }, null, _instanceExtraInitializers);
             storyViewModel_esDecorate(_a, null, _get_reachEnd_decorators, { kind: "getter", name: "reachEnd", static: false, private: false, access: { has: obj => "reachEnd" in obj, get: obj => obj.reachEnd }, metadata: _metadata }, null, _instanceExtraInitializers);
             storyViewModel_esDecorate(_a, null, _get_reachStart_decorators, { kind: "getter", name: "reachStart", static: false, private: false, access: { has: obj => "reachStart" in obj, get: obj => obj.reachStart }, metadata: _metadata }, null, _instanceExtraInitializers);
             storyViewModel_esDecorate(_a, null, _get_pauseState_decorators, { kind: "getter", name: "pauseState", static: false, private: false, access: { has: obj => "pauseState" in obj, get: obj => obj.pauseState }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -10387,18 +10431,13 @@ let StoryViewModel = (() => {
             storyViewModel_esDecorate(_a, null, _showSlide_decorators, { kind: "method", name: "showSlide", static: false, private: false, access: { has: obj => "showSlide" in obj, get: obj => obj.showSlide }, metadata: _metadata }, null, _instanceExtraInitializers);
             storyViewModel_esDecorate(_a, null, _markAsOpened_decorators, { kind: "method", name: "markAsOpened", static: false, private: false, access: { has: obj => "markAsOpened" in obj, get: obj => obj.markAsOpened }, metadata: _metadata }, null, _instanceExtraInitializers);
             storyViewModel_esDecorate(_a, null, _markWasShown_decorators, { kind: "method", name: "markWasShown", static: false, private: false, access: { has: obj => "markWasShown" in obj, get: obj => obj.markWasShown }, metadata: _metadata }, null, _instanceExtraInitializers);
+            storyViewModel_esDecorate(_a, null, _commit_decorators, { kind: "method", name: "commit", static: false, private: false, access: { has: obj => "commit" in obj, get: obj => obj.commit }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         })(),
         _a;
 })();
 
 
-;// CONCATENATED MODULE: external "lodash/isEmpty.js"
-var isEmpty_js_x = (y) => {
-	var x = {}; __webpack_require__.d(x, y); return x
-} 
-var isEmpty_js_y = (x) => (() => (x))
-const isEmpty_js_namespaceObject = isEmpty_js_x({ ["default"]: () => (__WEBPACK_EXTERNAL_MODULE_lodash_isEmpty_js_f1e1789b__["default"]) });
 ;// CONCATENATED MODULE: external "lodash/isObject.js"
 var isObject_js_x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
@@ -10510,7 +10549,7 @@ class GameClientConfig {
             value: void 0
         });
         const storyManagerConfig = this.storyManager.config;
-        const sdkVersion = "1.9.4";
+        const sdkVersion = "1.9.6";
         const placeholders = this.storyManager.rootStore.placeholderStore.placeholders;
         const session = this.storyManager.rootStore.sessionStore.session;
         this.sessionId = session.id;
@@ -10967,8 +11006,10 @@ class GameSession extends events.EventEmitter {
         if (event.origin !== this.origin)
             return;
         try {
-            if (!Array.isArray(event.data))
-                throw new Error(`[IAS]: Invalid MessageEvent data format ${event.data}`);
+            if (!Array.isArray(event.data)) {
+                console.warn(`[IAS]: Invalid game MessageEvent data format ${event.data}`);
+                return;
+            }
             const [gameEvent, ...restData] = event.data;
             this.emit(gameEvent, ...restData);
         }
@@ -11471,7 +11512,6 @@ var gameReaderViewModel_classPrivateFieldSet = (undefined && undefined.__classPr
 
 
 
-
 var GameReaderEvent;
 (function (GameReaderEvent) {
     GameReaderEvent["Close"] = "close";
@@ -11730,7 +11770,7 @@ let GameReaderViewModel = (() => {
                 if (this._isGameInited)
                     (_b = this.gameSession) === null || _b === void 0 ? void 0 : _b.closeGameReader();
                 else
-                    this.finishGame({ result: {} });
+                    this.finishGame();
                 return true;
             }
             async reloadGame() {
@@ -11753,7 +11793,7 @@ let GameReaderViewModel = (() => {
             }
             subscribeToGameSession(session) {
                 session.on("gameComplete" /* GameSessionEvent.GameComplete */, (result, arg1, arg2, openStory, gameInstance) => {
-                    this.finishGame({ result, openStory, gameInstance });
+                    this.finishGame({ openStory, gameInstance });
                 });
                 session.on("reloadGameReader" /* GameSessionEvent.ReloadGameReader */, () => {
                     this.restartGame();
@@ -11807,17 +11847,14 @@ let GameReaderViewModel = (() => {
                 this.resetFlags();
                 this.resetGameData();
             }
-            finishGame({ result, openStory, gameInstance }) {
-                var _b;
-                const gameId = (_b = this.game) === null || _b === void 0 ? void 0 : _b.id;
+            finishGame(params = {}) {
                 this.resetScrollbar();
                 this.closeSession();
                 this.resetFlags();
                 this.resetGameData();
                 this.resetCounters();
-                if (gameId)
-                    this.emitGameCompletion(gameId, result);
-                this.navigateAfterGame({ gameInstance, openStory });
+                this.storyManager.emit("closeGame");
+                this.navigateAfterGame(params);
             }
             resetScrollbar() {
                 this.scrollbarHelper.disable();
@@ -11839,11 +11876,6 @@ let GameReaderViewModel = (() => {
             resetCounters() {
                 this.retryAttempts = 0;
             }
-            emitGameCompletion(gameId, result) {
-                const event = (0,isEmpty_js_namespaceObject["default"])(result) ? "closeGame" : "finishGame";
-                const payload = (0,isEmpty_js_namespaceObject["default"])(result) ? { id: gameId } : { id: gameId, result };
-                this.storyManager.emit(event, payload);
-            }
             navigateAfterGame(params) {
                 var _b, _c;
                 if ((_b = params.gameInstance) === null || _b === void 0 ? void 0 : _b.id) {
@@ -12530,15 +12562,7 @@ class StorySlideApiHandlers {
         });
     }
     showLayer(index) {
-        var _a;
-        this.statisticV2Service.sendSlideLayout({
-            layoutIndex: index,
-            storyId: this.story.id,
-            activeSlideIndex: this.story.activeSlideIndex,
-            feedSlug: (_a = this.storyReader.feed) === null || _a === void 0 ? void 0 : _a.slug
-        });
-        this.story.resumeUser();
-        this.story.activeSlide.showLayerByIndex(index);
+        this.story.showLayer(index);
     }
     showCardSlide(slideIndex) {
         this.story.showSlide(slideIndex);
@@ -12889,592 +12913,40 @@ class SafeAreaFrameCalculator {
 
 
 
-;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/baseStoryReaderEvent.ts
-
+;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/storyDisplayStrategies/showOnboardingStoriesStrategy.ts
 
-class BaseStoryReaderEvent {
-    constructor(story, payload = {}) {
-        var _a, _b, _c, _d;
-        Object.defineProperty(this, "story", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: story
-        });
-        Object.defineProperty(this, "payload", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: payload
-        });
-        Object.defineProperty(this, "title", {
+class ShowOnboardingStoriesStrategy {
+    constructor(showMultipleStoriesStrategy, storyManager) {
+        Object.defineProperty(this, "showMultipleStoriesStrategy", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: null
+            value: showMultipleStoriesStrategy
         });
-        Object.defineProperty(this, "tags", {
+        Object.defineProperty(this, "storyManager", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: []
+            value: storyManager
         });
-        Object.defineProperty(this, "slidesCount", {
+        Object.defineProperty(this, "_feed", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
-        Object.defineProperty(this, "feedSlug", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        Object.defineProperty(this, "filter", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        Object.defineProperty(this, "actionSource", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: StoryActionSource.list
-        });
-        Object.defineProperty(this, "ugcPayload", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        Object.defineProperty(this, "slideEventPayload", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        const feed = (_a = this.story.displayStrategy) === null || _a === void 0 ? void 0 : _a.feed;
-        const feedType = feed === null || feed === void 0 ? void 0 : feed.type;
-        const feedSlug = (_b = feed === null || feed === void 0 ? void 0 : feed.slug) !== null && _b !== void 0 ? _b : null;
-        const filter = feed instanceof UgcStoryFeed ? feed.filter : null;
-        this.title = this.story.statTitle;
-        this.slidesCount = this.story.slidesCount;
-        this.ugcPayload = feedType === StoryFeedType.UGC ? this.story.ugcPayload : null;
-        this.feedSlug = feedType === StoryFeedType.DEFAULT ? feedSlug : null;
-        this.filter = filter;
-        this.actionSource = feedType != null ? this.getStorySourceByFeedType(feedType) : StoryActionSource.direct;
-        this.slideEventPayload = (_d = (_c = story.activeSlide.eventPayload) === null || _c === void 0 ? void 0 : _c.payload) !== null && _d !== void 0 ? _d : null;
-    }
-    toJSON() {
-        return Object.assign({ id: this.story.id, index: this.story.activeSlideIndex, title: this.title, tags: this.tags, slidesCount: this.slidesCount, feed: this.feedSlug, filter: this.filter, source: this.actionSource, ugcPayload: this.ugcPayload, payload: this.slideEventPayload }, this.payload);
-    }
-    getStorySourceByFeedType(feedType) {
-        switch (feedType) {
-            case StoryFeedType.DEFAULT:
-                return StoryActionSource.list;
-            case StoryFeedType.UGC:
-                return StoryActionSource.list;
-            case StoryFeedType.FAVORITE:
-                return StoryActionSource.favorite;
-            case StoryFeedType.ONBOARDING:
-                return StoryActionSource.onboarding;
-            default:
-                return StoryActionSource.list;
-        }
-    }
-}
-
-;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/closeStoryEvent.ts
-
-class CloseStoryEvent extends BaseStoryReaderEvent {
-    get name() {
-        return "closeStory";
-    }
-    toJSON() {
-        return Object.assign(Object.assign({}, super.toJSON()), { action: this.payload.action });
-    }
-}
-
-;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/closeStoryReaderEvent.ts
-
-class CloseStoryReaderEvent extends BaseStoryReaderEvent {
-    get name() {
-        return "closeStoryReader";
-    }
-    toJSON() {
-        return Object.assign(Object.assign({}, super.toJSON()), { action: this.payload.action });
-    }
-}
-
-;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/dislikeStoryEvent.ts
-
-class DislikeStoryEvent extends BaseStoryReaderEvent {
-    get name() {
-        return "dislikeStory";
-    }
-    toJSON() {
-        return Object.assign(Object.assign({}, super.toJSON()), { value: this.payload.value });
-    }
-}
-
-;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/favoriteStoryEvent.ts
-
-class FavoriteStoryEvent extends BaseStoryReaderEvent {
-    get name() {
-        return "favoriteStory";
-    }
-    toJSON() {
-        return Object.assign(Object.assign({}, super.toJSON()), { value: this.payload.value });
-    }
-}
-
-;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/likeStoryEvent.ts
-
-class LikeStoryEvent extends BaseStoryReaderEvent {
-    get name() {
-        return "likeStory";
-    }
-    toJSON() {
-        return Object.assign(Object.assign({}, super.toJSON()), { value: this.payload.value });
-    }
-}
-
-;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/shareStoryEvent.ts
-
-class ShareStoryEvent extends BaseStoryReaderEvent {
-    get name() {
-        return "shareStory";
-    }
-}
-
-;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/shareStoryWithPathEvent.ts
-
-class ShareStoryWithPathEvent extends BaseStoryReaderEvent {
-    get name() {
-        return "shareStoryWithPath";
-    }
-    toJSON() {
-        return Object.assign(Object.assign({}, super.toJSON()), { value: this.payload.url });
-    }
-}
-
-;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/showSlideEvent.ts
-
-class ShowSlideEvent extends BaseStoryReaderEvent {
-    get name() {
-        return "showSlide";
-    }
-}
-
-;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/showStoryEvent.ts
-
-class ShowStoryEvent extends BaseStoryReaderEvent {
-    get name() {
-        return "showStory";
-    }
-    toJSON() {
-        const data = super.toJSON();
-        data.payload = null;
-        return data;
-    }
-}
-
-;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/showStoryFailed.ts
-class ShowStoryFailed {
-    constructor(payload) {
-        Object.defineProperty(this, "payload", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: payload
-        });
-    }
-    get name() {
-        return "showStoryFailed";
-    }
-    toJSON() {
-        return {
-            id: this.payload.id,
-            title: this.payload.title,
-            name: this.payload.name,
-            message: this.payload.message
-        };
-    }
-}
-
-;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/index.ts
-
-
-
-
-
-
-
-
-
-
-
-
-;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/storyReaderNavigationController.ts
-var storyReaderNavigationController_runInitializers = (undefined && undefined.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
-var storyReaderNavigationController_esDecorate = (undefined && undefined.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-};
-var storyReaderNavigationController_classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var storyReaderNavigationController_classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-
-
-
-const STORY_INIT_RANGE = 1;
-const ACTIVE_STORY_PRELOAD_PRIORITY = 1000;
-const NON_ACTIVE_STORY_PRELOAD_PRIORITY = 0;
-let StoryReaderNavigationController = (() => {
-    var _a, _StoryReaderNavigationController__activeStory_accessor_storage, _StoryReaderNavigationController__currentIndex_accessor_storage, _StoryReaderNavigationController__targetTransitionIndex_accessor_storage;
-    let _instanceExtraInitializers = [];
-    let __activeStory_decorators;
-    let __activeStory_initializers = [];
-    let __activeStory_extraInitializers = [];
-    let __currentIndex_decorators;
-    let __currentIndex_initializers = [];
-    let __currentIndex_extraInitializers = [];
-    let __targetTransitionIndex_decorators;
-    let __targetTransitionIndex_initializers = [];
-    let __targetTransitionIndex_extraInitializers = [];
-    let _get_reachStart_decorators;
-    let _get_reachEnd_decorators;
-    let _get_targetTransitionStory_decorators;
-    let _nextStory_decorators;
-    let _prevStory_decorators;
-    let _nextStoryWithAnimation_decorators;
-    let _prevStoryWithAnimation_decorators;
-    let _navigateStoryWithAnimation_decorators;
-    let _handleTransitionEnd_decorators;
-    return _a = class StoryReaderNavigationController {
-            get _activeStory() { return storyReaderNavigationController_classPrivateFieldGet(this, _StoryReaderNavigationController__activeStory_accessor_storage, "f"); }
-            set _activeStory(value) { storyReaderNavigationController_classPrivateFieldSet(this, _StoryReaderNavigationController__activeStory_accessor_storage, value, "f"); }
-            get _currentIndex() { return storyReaderNavigationController_classPrivateFieldGet(this, _StoryReaderNavigationController__currentIndex_accessor_storage, "f"); }
-            set _currentIndex(value) { storyReaderNavigationController_classPrivateFieldSet(this, _StoryReaderNavigationController__currentIndex_accessor_storage, value, "f"); }
-            get _targetTransitionIndex() { return storyReaderNavigationController_classPrivateFieldGet(this, _StoryReaderNavigationController__targetTransitionIndex_accessor_storage, "f"); }
-            set _targetTransitionIndex(value) { storyReaderNavigationController_classPrivateFieldSet(this, _StoryReaderNavigationController__targetTransitionIndex_accessor_storage, value, "f"); }
-            constructor(storyManager, storyReader, statistics) {
-                Object.defineProperty(this, "storyManager", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: (storyReaderNavigationController_runInitializers(this, _instanceExtraInitializers), storyManager)
-                });
-                Object.defineProperty(this, "storyReader", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: storyReader
-                });
-                Object.defineProperty(this, "statistics", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: statistics
-                });
-                _StoryReaderNavigationController__activeStory_accessor_storage.set(this, storyReaderNavigationController_runInitializers(this, __activeStory_initializers, null));
-                _StoryReaderNavigationController__currentIndex_accessor_storage.set(this, (storyReaderNavigationController_runInitializers(this, __activeStory_extraInitializers), storyReaderNavigationController_runInitializers(this, __currentIndex_initializers, 0)));
-                _StoryReaderNavigationController__targetTransitionIndex_accessor_storage.set(this, (storyReaderNavigationController_runInitializers(this, __currentIndex_extraInitializers), storyReaderNavigationController_runInitializers(this, __targetTransitionIndex_initializers, -1)));
-                Object.defineProperty(this, "animatedNavigationController", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: (storyReaderNavigationController_runInitializers(this, __targetTransitionIndex_extraInitializers), null)
-                });
-                Object.defineProperty(this, "currentStoryDisplayStrategy", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: null
-                });
-                Object.defineProperty(this, "_activeStoryStartTime", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: 0
-                });
-            }
-            get reachStart() {
-                return this._currentIndex === 0;
-            }
-            get reachEnd() {
-                return this._currentIndex === this.storyReader.stories.length - 1;
-            }
-            get targetTransitionStory() {
-                return this.storyReader.stories[this._targetTransitionIndex];
-            }
-            get targetTransitionIndex() {
-                return this._targetTransitionIndex;
-            }
-            get activeStory() {
-                return this._activeStory;
-            }
-            get currentIndex() {
-                return this._currentIndex;
-            }
-            get activeStoryDuration() {
-                return Date.now() - this._activeStoryStartTime;
-            }
-            setAnimatedNavigationController(animatedNavigationController) {
-                this.animatedNavigationController = animatedNavigationController;
-            }
-            setCurrentStoryDisplayStrategy(currentStoryDisplayStrategy) {
-                this.currentStoryDisplayStrategy = currentStoryDisplayStrategy;
-            }
-            nextStory() {
-                if (this.reachEnd)
-                    return;
-                this.setActiveStoryByIndex(this._currentIndex + 1);
-            }
-            prevStory() {
-                if (this.reachStart)
-                    return;
-                this.setActiveStoryByIndex(this._currentIndex - 1);
-            }
-            nextStoryWithAnimation(action) {
-                if (this.storyReader.reachEnd)
-                    this.handleStoryReaderReachEnd(action);
-                else
-                    this.navigateStoryWithAnimation(this._currentIndex + 1, action);
-            }
-            prevStoryWithAnimation(action) {
-                if (!this.reachStart)
-                    this.navigateStoryWithAnimation(this.currentIndex - 1, action);
-            }
-            destroy() {
-                this._activeStory = null;
-            }
-            setActiveStoryById(storyId) {
-                const stories = this.storyReader.stories;
-                const index = stories.findIndex(story => story.id === storyId);
-                if (index === -1)
-                    throw new Error(`[IAS]: No story found with ID ${storyId}`);
-                this.initStoriesWithinRange(index);
-                return this.setActiveStoryByIndex(index);
-            }
-            async navigateStoryWithAnimation(index, action = "lastSlideClick") {
-                if (!this.animatedNavigationController ||
-                    this.animatedNavigationController.animating ||
-                    this._targetTransitionIndex !== -1)
-                    return;
-                index = this.limitIndex(index);
-                this._targetTransitionIndex = index;
-                this.currentStoryDisplayStrategy.handleNextStoryByIndex(index);
-                this.initStoriesWithinRange(index);
-                await this.animatedNavigationController.transitionByIndex(index, this.currentIndex);
-                await this.handleTransitionEnd(index, action);
-            }
-            handleStoryReaderReachEnd(action) {
-                var _b;
-                if (action !== CloseStoryReaderAction.CloseByTimer) {
-                    this.storyReader.close(CloseStoryReaderAction.CloseByLastSlideClick);
-                }
-                else if ((_b = this.animatedNavigationController) === null || _b === void 0 ? void 0 : _b.options.closeOnLastSlideByTimer) {
-                    this.storyReader.close(CloseStoryReaderAction.CloseByTimer);
-                }
-            }
-            async handleTransitionEnd(index, navigationAction) {
-                if (this.activeStory) {
-                    const event = new CloseStoryEvent(this.activeStory, {
-                        action: navigationAction
-                    });
-                    this.storyManager.emit(event.name, event.toJSON());
-                }
-                await this.setActiveStoryByIndex(index);
-                this._targetTransitionIndex = -1;
-            }
-            async setActiveStoryByIndex(index) {
-                const prevIndex = this._currentIndex;
-                const prevStory = this._activeStory;
-                const newActiveStory = this.storyReader.stories[index];
-                if (!newActiveStory)
-                    return;
-                await this.updateActiveStory(index, prevStory, newActiveStory);
-                this.statistics.emitTransitionEvents(prevIndex, index, prevStory, newActiveStory, this.activeStoryDuration);
-                this.handleActiveStoryError(this._activeStory);
-                newActiveStory.markAsOpened();
-                return newActiveStory;
-            }
-            async updateActiveStory(index, prevStory, activeStory) {
-                this._currentIndex = index;
-                this.runNextStory(prevStory, activeStory);
-                this._activeStoryStartTime = Date.now();
-                this._activeStory = activeStory;
-                return activeStory;
-            }
-            async runNextStory(prevStory, story) {
-                try {
-                    await (prevStory === null || prevStory === void 0 ? void 0 : prevStory.stop());
-                    await this.preloadActiveStory(story);
-                    await story.init();
-                    await story.start();
-                }
-                catch (error) {
-                    console.error(error);
-                }
-            }
-            async initStoriesWithinRange(currentIndex) {
-                const stories = this.storyReader.stories;
-                const start = Math.max(currentIndex - STORY_INIT_RANGE, 0);
-                const end = Math.min(currentIndex + STORY_INIT_RANGE, stories.length - 1);
-                const storiesToInit = [];
-                for (let i = start; i <= end; i++) {
-                    if (i !== currentIndex)
-                        storiesToInit.push(stories[i]);
-                }
-                await this.preloadSiblingStories(storiesToInit);
-                return Promise.allSettled(storiesToInit.map(story => story.init()));
-            }
-            handleActiveStoryError(story) {
-                if (!(story === null || story === void 0 ? void 0 : story.error))
-                    return;
-                const event = new ShowStoryFailed({
-                    id: story.id,
-                    title: story.title,
-                    name: story.error.name,
-                    message: story.error.message
-                });
-                this.storyManager.emit(event.name, event.toJSON());
-            }
-            limitIndex(index) {
-                return Math.max(0, Math.min(this.storyReader.stories.length - 1, index));
-            }
-            async preloadActiveStory(story) {
-                const cacheConfig = this.storyManager.config.cache;
-                if (!cacheConfig)
-                    return;
-                if (cacheConfig.prefetch) {
-                    await story.preloadSlides(0, story.slidesCount, ACTIVE_STORY_PRELOAD_PRIORITY);
-                }
-                else {
-                    await story.preloadActiveSlide(ACTIVE_STORY_PRELOAD_PRIORITY);
-                }
-            }
-            async preloadSiblingStories(stories) {
-                const cacheConfig = this.storyManager.config.cache;
-                if (!cacheConfig)
-                    return;
-                if (cacheConfig.prefetch) {
-                    await Promise.all(stories.map(story => story.preloadSlides(0, 2, NON_ACTIVE_STORY_PRELOAD_PRIORITY)));
-                }
-                else {
-                    await Promise.all(stories.map(story => story.preloadActiveSlide(NON_ACTIVE_STORY_PRELOAD_PRIORITY)));
-                }
-            }
-        },
-        _StoryReaderNavigationController__activeStory_accessor_storage = new WeakMap(),
-        _StoryReaderNavigationController__currentIndex_accessor_storage = new WeakMap(),
-        _StoryReaderNavigationController__targetTransitionIndex_accessor_storage = new WeakMap(),
-        (() => {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            __activeStory_decorators = [external_mobx_namespaceObject.observable];
-            __currentIndex_decorators = [external_mobx_namespaceObject.observable];
-            __targetTransitionIndex_decorators = [external_mobx_namespaceObject.observable];
-            _get_reachStart_decorators = [external_mobx_namespaceObject.computed];
-            _get_reachEnd_decorators = [external_mobx_namespaceObject.computed];
-            _get_targetTransitionStory_decorators = [external_mobx_namespaceObject.computed];
-            _nextStory_decorators = [external_mobx_namespaceObject.action];
-            _prevStory_decorators = [external_mobx_namespaceObject.action];
-            _nextStoryWithAnimation_decorators = [external_mobx_namespaceObject.action];
-            _prevStoryWithAnimation_decorators = [external_mobx_namespaceObject.action];
-            _navigateStoryWithAnimation_decorators = [external_mobx_namespaceObject.action];
-            _handleTransitionEnd_decorators = [external_mobx_namespaceObject.action];
-            storyReaderNavigationController_esDecorate(_a, null, __activeStory_decorators, { kind: "accessor", name: "_activeStory", static: false, private: false, access: { has: obj => "_activeStory" in obj, get: obj => obj._activeStory, set: (obj, value) => { obj._activeStory = value; } }, metadata: _metadata }, __activeStory_initializers, __activeStory_extraInitializers);
-            storyReaderNavigationController_esDecorate(_a, null, __currentIndex_decorators, { kind: "accessor", name: "_currentIndex", static: false, private: false, access: { has: obj => "_currentIndex" in obj, get: obj => obj._currentIndex, set: (obj, value) => { obj._currentIndex = value; } }, metadata: _metadata }, __currentIndex_initializers, __currentIndex_extraInitializers);
-            storyReaderNavigationController_esDecorate(_a, null, __targetTransitionIndex_decorators, { kind: "accessor", name: "_targetTransitionIndex", static: false, private: false, access: { has: obj => "_targetTransitionIndex" in obj, get: obj => obj._targetTransitionIndex, set: (obj, value) => { obj._targetTransitionIndex = value; } }, metadata: _metadata }, __targetTransitionIndex_initializers, __targetTransitionIndex_extraInitializers);
-            storyReaderNavigationController_esDecorate(_a, null, _get_reachStart_decorators, { kind: "getter", name: "reachStart", static: false, private: false, access: { has: obj => "reachStart" in obj, get: obj => obj.reachStart }, metadata: _metadata }, null, _instanceExtraInitializers);
-            storyReaderNavigationController_esDecorate(_a, null, _get_reachEnd_decorators, { kind: "getter", name: "reachEnd", static: false, private: false, access: { has: obj => "reachEnd" in obj, get: obj => obj.reachEnd }, metadata: _metadata }, null, _instanceExtraInitializers);
-            storyReaderNavigationController_esDecorate(_a, null, _get_targetTransitionStory_decorators, { kind: "getter", name: "targetTransitionStory", static: false, private: false, access: { has: obj => "targetTransitionStory" in obj, get: obj => obj.targetTransitionStory }, metadata: _metadata }, null, _instanceExtraInitializers);
-            storyReaderNavigationController_esDecorate(_a, null, _nextStory_decorators, { kind: "method", name: "nextStory", static: false, private: false, access: { has: obj => "nextStory" in obj, get: obj => obj.nextStory }, metadata: _metadata }, null, _instanceExtraInitializers);
-            storyReaderNavigationController_esDecorate(_a, null, _prevStory_decorators, { kind: "method", name: "prevStory", static: false, private: false, access: { has: obj => "prevStory" in obj, get: obj => obj.prevStory }, metadata: _metadata }, null, _instanceExtraInitializers);
-            storyReaderNavigationController_esDecorate(_a, null, _nextStoryWithAnimation_decorators, { kind: "method", name: "nextStoryWithAnimation", static: false, private: false, access: { has: obj => "nextStoryWithAnimation" in obj, get: obj => obj.nextStoryWithAnimation }, metadata: _metadata }, null, _instanceExtraInitializers);
-            storyReaderNavigationController_esDecorate(_a, null, _prevStoryWithAnimation_decorators, { kind: "method", name: "prevStoryWithAnimation", static: false, private: false, access: { has: obj => "prevStoryWithAnimation" in obj, get: obj => obj.prevStoryWithAnimation }, metadata: _metadata }, null, _instanceExtraInitializers);
-            storyReaderNavigationController_esDecorate(_a, null, _navigateStoryWithAnimation_decorators, { kind: "method", name: "navigateStoryWithAnimation", static: false, private: false, access: { has: obj => "navigateStoryWithAnimation" in obj, get: obj => obj.navigateStoryWithAnimation }, metadata: _metadata }, null, _instanceExtraInitializers);
-            storyReaderNavigationController_esDecorate(_a, null, _handleTransitionEnd_decorators, { kind: "method", name: "handleTransitionEnd", static: false, private: false, access: { has: obj => "handleTransitionEnd" in obj, get: obj => obj.handleTransitionEnd }, metadata: _metadata }, null, _instanceExtraInitializers);
-            if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        })(),
-        _a;
-})();
-
-
-;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/storyDisplayStrategies/showOnboardingStoriesStrategy.ts
-
-class ShowOnboardingStoriesStrategy {
-    constructor(showMultipleStoriesStrategy, storyManager) {
-        Object.defineProperty(this, "showMultipleStoriesStrategy", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: showMultipleStoriesStrategy
-        });
-        Object.defineProperty(this, "storyManager", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: storyManager
-        });
-        Object.defineProperty(this, "_feed", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-    }
-    get feed() {
-        return this._feed;
-    }
-    async show(payload) {
-        var _a, _b;
-        const storyFeedStore = this.storyManager.rootStore.onboardingFeedStore;
-        this.throwIfAborted(payload.signal);
-        const onboardingFeed = await storyFeedStore.fetchOnboardingFeed({
-            feedSlug: payload.feedSlug,
-            tags: (_a = payload.customTags) !== null && _a !== void 0 ? _a : [],
-            limit: (_b = payload.limit) !== null && _b !== void 0 ? _b : undefined
+    }
+    get feed() {
+        return this._feed;
+    }
+    async show(payload) {
+        var _a, _b;
+        const storyFeedStore = this.storyManager.rootStore.onboardingFeedStore;
+        this.throwIfAborted(payload.signal);
+        const onboardingFeed = await storyFeedStore.fetchOnboardingFeed({
+            feedSlug: payload.feedSlug,
+            tags: (_a = payload.customTags) !== null && _a !== void 0 ? _a : [],
+            limit: (_b = payload.limit) !== null && _b !== void 0 ? _b : undefined
         });
         this.throwIfAborted(payload.signal);
         this._feed = onboardingFeed;
@@ -13753,27 +13225,255 @@ class StoryDisplayStrategyFactory {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: storyReaderViewModel
+            value: storyReaderViewModel
+        });
+    }
+    createShowStory() {
+        return new ShowStoryStrategy(this.storyManager, this.storyReaderViewModel);
+    }
+    createShowStoryOnce() {
+        return new ShowStoryOnceStrategy(this.storyManager, this.storyReaderViewModel);
+    }
+    createShowStoryFromSharePage() {
+        return new ShowStoryFromSharePageStrategy(new ShowStoryStrategy(this.storyManager, this.storyReaderViewModel));
+    }
+    createShowOnboardingStories() {
+        return new ShowOnboardingStoriesStrategy(new ShowMultipleStoriesStrategy(this.storyManager, this.storyReaderViewModel), this.storyManager);
+    }
+    createShowMultipleStories() {
+        return new ShowMultipleStoriesStrategy(this.storyManager, this.storyReaderViewModel);
+    }
+}
+
+;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/storyDisplayStrategies/index.ts
+
+
+
+
+
+
+
+
+;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/baseStoryReaderEvent.ts
+
+
+class BaseStoryReaderEvent {
+    constructor(story, payload = {}) {
+        var _a, _b, _c, _d;
+        Object.defineProperty(this, "story", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: story
+        });
+        Object.defineProperty(this, "payload", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: payload
+        });
+        Object.defineProperty(this, "title", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "tags", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "slidesCount", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "feedSlug", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "filter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "actionSource", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: StoryActionSource.list
+        });
+        Object.defineProperty(this, "ugcPayload", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "slideEventPayload", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        const feed = (_a = this.story.displayStrategy) === null || _a === void 0 ? void 0 : _a.feed;
+        const feedType = feed === null || feed === void 0 ? void 0 : feed.type;
+        const feedSlug = (_b = feed === null || feed === void 0 ? void 0 : feed.slug) !== null && _b !== void 0 ? _b : null;
+        const filter = feed instanceof UgcStoryFeed ? feed.filter : null;
+        this.title = this.story.statTitle;
+        this.slidesCount = this.story.slidesCount;
+        this.ugcPayload = feedType === StoryFeedType.UGC ? this.story.ugcPayload : null;
+        this.feedSlug = feedType === StoryFeedType.DEFAULT ? feedSlug : null;
+        this.filter = filter;
+        this.actionSource = feedType != null ? this.getStorySourceByFeedType(feedType) : StoryActionSource.direct;
+        this.slideEventPayload = (_d = (_c = story.activeSlide.eventPayload) === null || _c === void 0 ? void 0 : _c.payload) !== null && _d !== void 0 ? _d : null;
+    }
+    toJSON() {
+        return Object.assign({ id: this.story.id, index: this.story.activeSlideIndex, title: this.title, tags: this.tags, slidesCount: this.slidesCount, feed: this.feedSlug, filter: this.filter, source: this.actionSource, ugcPayload: this.ugcPayload, payload: this.slideEventPayload }, this.payload);
+    }
+    getStorySourceByFeedType(feedType) {
+        switch (feedType) {
+            case StoryFeedType.DEFAULT:
+                return StoryActionSource.list;
+            case StoryFeedType.UGC:
+                return StoryActionSource.list;
+            case StoryFeedType.FAVORITE:
+                return StoryActionSource.favorite;
+            case StoryFeedType.ONBOARDING:
+                return StoryActionSource.onboarding;
+            default:
+                return StoryActionSource.list;
+        }
+    }
+}
+
+;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/closeStoryEvent.ts
+
+class CloseStoryEvent extends BaseStoryReaderEvent {
+    get name() {
+        return "closeStory";
+    }
+    toJSON() {
+        return Object.assign(Object.assign({}, super.toJSON()), { action: this.payload.action });
+    }
+}
+
+;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/closeStoryReaderEvent.ts
+
+class CloseStoryReaderEvent extends BaseStoryReaderEvent {
+    get name() {
+        return "closeStoryReader";
+    }
+    toJSON() {
+        return Object.assign(Object.assign({}, super.toJSON()), { action: this.payload.action });
+    }
+}
+
+;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/dislikeStoryEvent.ts
+
+class DislikeStoryEvent extends BaseStoryReaderEvent {
+    get name() {
+        return "dislikeStory";
+    }
+    toJSON() {
+        return Object.assign(Object.assign({}, super.toJSON()), { value: this.payload.value });
+    }
+}
+
+;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/favoriteStoryEvent.ts
+
+class FavoriteStoryEvent extends BaseStoryReaderEvent {
+    get name() {
+        return "favoriteStory";
+    }
+    toJSON() {
+        return Object.assign(Object.assign({}, super.toJSON()), { value: this.payload.value });
+    }
+}
+
+;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/likeStoryEvent.ts
+
+class LikeStoryEvent extends BaseStoryReaderEvent {
+    get name() {
+        return "likeStory";
+    }
+    toJSON() {
+        return Object.assign(Object.assign({}, super.toJSON()), { value: this.payload.value });
+    }
+}
+
+;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/shareStoryEvent.ts
+
+class ShareStoryEvent extends BaseStoryReaderEvent {
+    get name() {
+        return "shareStory";
+    }
+}
+
+;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/shareStoryWithPathEvent.ts
+
+class ShareStoryWithPathEvent extends BaseStoryReaderEvent {
+    get name() {
+        return "shareStoryWithPath";
+    }
+    toJSON() {
+        return Object.assign(Object.assign({}, super.toJSON()), { value: this.payload.url });
+    }
+}
+
+;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/showSlideEvent.ts
+
+class ShowSlideEvent extends BaseStoryReaderEvent {
+    get name() {
+        return "showSlide";
+    }
+}
+
+;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/showStoryEvent.ts
+
+class ShowStoryEvent extends BaseStoryReaderEvent {
+    get name() {
+        return "showStory";
+    }
+    toJSON() {
+        const data = super.toJSON();
+        data.payload = null;
+        return data;
+    }
+}
+
+;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/showStoryFailed.ts
+class ShowStoryFailed {
+    constructor(payload) {
+        Object.defineProperty(this, "payload", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: payload
         });
     }
-    createShowStory() {
-        return new ShowStoryStrategy(this.storyManager, this.storyReaderViewModel);
-    }
-    createShowStoryOnce() {
-        return new ShowStoryOnceStrategy(this.storyManager, this.storyReaderViewModel);
-    }
-    createShowStoryFromSharePage() {
-        return new ShowStoryFromSharePageStrategy(new ShowStoryStrategy(this.storyManager, this.storyReaderViewModel));
-    }
-    createShowOnboardingStories() {
-        return new ShowOnboardingStoriesStrategy(new ShowMultipleStoriesStrategy(this.storyManager, this.storyReaderViewModel), this.storyManager);
+    get name() {
+        return "showStoryFailed";
     }
-    createShowMultipleStories() {
-        return new ShowMultipleStoriesStrategy(this.storyManager, this.storyReaderViewModel);
+    toJSON() {
+        return {
+            id: this.payload.id,
+            title: this.payload.title,
+            name: this.payload.name,
+            message: this.payload.message
+        };
     }
 }
 
-;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/storyDisplayStrategies/index.ts
+;// CONCATENATED MODULE: ../core/src/readers/storyReader/storyReaderViewModel/events/index.ts
+
+
+
+
 
 
 
@@ -14452,7 +14152,6 @@ var storyReaderViewModel_classPrivateFieldSet = (undefined && undefined.__classP
 
 
 
-
 var StoryReaderEvent;
 (function (StoryReaderEvent) {
     StoryReaderEvent["Close"] = "closeStoryReader";
@@ -14468,7 +14167,7 @@ var CloseStoryReaderAction;
     CloseStoryReaderAction["AppClose"] = "app-close";
 })(CloseStoryReaderAction || (CloseStoryReaderAction = {}));
 let StoryReaderViewModel = (() => {
-    var _a, _StoryReaderViewModel__muted_accessor_storage, _StoryReaderViewModel__closeGestureInAction_accessor_storage, _StoryReaderViewModel__stories_accessor_storage;
+    var _a, _StoryReaderViewModel__muted_accessor_storage, _StoryReaderViewModel__closeGestureInAction_accessor_storage, _StoryReaderViewModel__stories_accessor_storage, _StoryReaderViewModel__activeStory_accessor_storage, _StoryReaderViewModel__activeStoryIndex_accessor_storage, _StoryReaderViewModel__targetTransitionIndex_accessor_storage;
     let _classSuper = ViewModel;
     let _instanceExtraInitializers = [];
     let __muted_decorators;
@@ -14480,6 +14179,16 @@ let StoryReaderViewModel = (() => {
     let __stories_decorators;
     let __stories_initializers = [];
     let __stories_extraInitializers = [];
+    let __activeStory_decorators;
+    let __activeStory_initializers = [];
+    let __activeStory_extraInitializers = [];
+    let __activeStoryIndex_decorators;
+    let __activeStoryIndex_initializers = [];
+    let __activeStoryIndex_extraInitializers = [];
+    let __targetTransitionIndex_decorators;
+    let __targetTransitionIndex_initializers = [];
+    let __targetTransitionIndex_extraInitializers = [];
+    let _get_targetTransitionStory_decorators;
     let _get_isOpened_decorators;
     let _get_reachStart_decorators;
     let _get_reachEnd_decorators;
@@ -14501,6 +14210,8 @@ let StoryReaderViewModel = (() => {
     let _unmute_decorators;
     let _enableCloseGesture_decorators;
     let _disableCloseGesture_decorators;
+    let _navigateStoryWithAnimation_decorators;
+    let _handleTransitionEnd_decorators;
     return _a = class StoryReaderViewModel extends _classSuper {
             get _muted() { return storyReaderViewModel_classPrivateFieldGet(this, _StoryReaderViewModel__muted_accessor_storage, "f"); }
             set _muted(value) { storyReaderViewModel_classPrivateFieldSet(this, _StoryReaderViewModel__muted_accessor_storage, value, "f"); }
@@ -14508,6 +14219,12 @@ let StoryReaderViewModel = (() => {
             set _closeGestureInAction(value) { storyReaderViewModel_classPrivateFieldSet(this, _StoryReaderViewModel__closeGestureInAction_accessor_storage, value, "f"); }
             get _stories() { return storyReaderViewModel_classPrivateFieldGet(this, _StoryReaderViewModel__stories_accessor_storage, "f"); }
             set _stories(value) { storyReaderViewModel_classPrivateFieldSet(this, _StoryReaderViewModel__stories_accessor_storage, value, "f"); }
+            get _activeStory() { return storyReaderViewModel_classPrivateFieldGet(this, _StoryReaderViewModel__activeStory_accessor_storage, "f"); }
+            set _activeStory(value) { storyReaderViewModel_classPrivateFieldSet(this, _StoryReaderViewModel__activeStory_accessor_storage, value, "f"); }
+            get _activeStoryIndex() { return storyReaderViewModel_classPrivateFieldGet(this, _StoryReaderViewModel__activeStoryIndex_accessor_storage, "f"); }
+            set _activeStoryIndex(value) { storyReaderViewModel_classPrivateFieldSet(this, _StoryReaderViewModel__activeStoryIndex_accessor_storage, value, "f"); }
+            get _targetTransitionIndex() { return storyReaderViewModel_classPrivateFieldGet(this, _StoryReaderViewModel__targetTransitionIndex_accessor_storage, "f"); }
+            set _targetTransitionIndex(value) { storyReaderViewModel_classPrivateFieldSet(this, _StoryReaderViewModel__targetTransitionIndex_accessor_storage, value, "f"); }
             constructor(storyManager, storyReaderStatisticV1Service, storyReaderStatisticV2Service, storyFeedStatisticV1Service) {
                 super();
                 Object.defineProperty(this, "storyManager", {
@@ -14567,11 +14284,20 @@ let StoryReaderViewModel = (() => {
                     writable: true,
                     value: new TouchController({ touchStartTimeout: 200 })
                 });
-                Object.defineProperty(this, "navigationController", {
+                _StoryReaderViewModel__activeStory_accessor_storage.set(this, storyReaderViewModel_runInitializers(this, __activeStory_initializers, null));
+                _StoryReaderViewModel__activeStoryIndex_accessor_storage.set(this, (storyReaderViewModel_runInitializers(this, __activeStory_extraInitializers), storyReaderViewModel_runInitializers(this, __activeStoryIndex_initializers, 0)));
+                _StoryReaderViewModel__targetTransitionIndex_accessor_storage.set(this, (storyReaderViewModel_runInitializers(this, __activeStoryIndex_extraInitializers), storyReaderViewModel_runInitializers(this, __targetTransitionIndex_initializers, -1)));
+                Object.defineProperty(this, "animatedNavigationController", {
                     enumerable: true,
                     configurable: true,
                     writable: true,
-                    value: void 0
+                    value: (storyReaderViewModel_runInitializers(this, __targetTransitionIndex_extraInitializers), null)
+                });
+                Object.defineProperty(this, "_activeStoryStartTime", {
+                    enumerable: true,
+                    configurable: true,
+                    writable: true,
+                    value: 0
                 });
                 Object.defineProperty(this, "useModernLayout", {
                     enumerable: true,
@@ -14585,17 +14311,23 @@ let StoryReaderViewModel = (() => {
                     writable: true,
                     value: null
                 });
+                Object.defineProperty(this, "statisticsController", {
+                    enumerable: true,
+                    configurable: true,
+                    writable: true,
+                    value: void 0
+                });
                 this.handleWindowUnload = this.handleWindowUnload.bind(this);
                 this.handleKeydown = this.handleKeydown.bind(this);
                 window.addEventListener("beforeunload", this.handleWindowUnload);
                 this.storyDisplayStrategyFactory = new StoryDisplayStrategyFactory(storyManager, this);
-                this.navigationController = new StoryReaderNavigationController(this.storyManager, this, new StoryReaderStatisticsController(this, this.storyManager, this.storyReaderStatisticV1Service, this.storyFeedStatisticV1Service, this.storyReaderStatisticV2Service));
-            }
-            get targetTransitionIndex() {
-                return this.navigationController.targetTransitionIndex;
+                this.statisticsController = new StoryReaderStatisticsController(this, this.storyManager, this.storyReaderStatisticV1Service, this.storyFeedStatisticV1Service, this.storyReaderStatisticV2Service);
             }
             get targetTransitionStory() {
-                return this.navigationController.targetTransitionStory;
+                return this.stories[this._targetTransitionIndex];
+            }
+            get targetTransitionIndex() {
+                return this._targetTransitionIndex;
             }
             get touchController() {
                 return this._touchController;
@@ -14617,22 +14349,26 @@ let StoryReaderViewModel = (() => {
                 return this._stories;
             }
             get activeStory() {
-                return this.navigationController.activeStory;
+                return this._activeStory;
+            }
+            get activeStoryDuration() {
+                return Date.now() - this._activeStoryStartTime;
             }
             get dir() {
                 return this.storyManager.config.dir;
             }
             get isOpened() {
-                return Boolean(this.navigationController.activeStory);
+                return Boolean(this.activeStory);
             }
             get activeStoryIndex() {
-                return this.navigationController.currentIndex;
+                return this._activeStoryIndex;
             }
             get reachStart() {
-                return this.navigationController.reachStart || this._stories[0] === this.targetTransitionStory;
+                return this._activeStoryIndex === 0 || this._stories[0] === this.targetTransitionStory;
             }
             get reachEnd() {
-                return (this.navigationController.reachEnd || this._stories[this._stories.length - 1] === this.targetTransitionStory);
+                return (this._activeStoryIndex === this.stories.length - 1 ||
+                    this._stories[this._stories.length - 1] === this.targetTransitionStory);
             }
             open(payload) {
                 var _b, _c;
@@ -14642,8 +14378,7 @@ let StoryReaderViewModel = (() => {
                     this.cacheManager = new CacheManager(this.storyManager.config.cache);
                 this.windowReferer = payload.windowReferer;
                 this.setStories(payload.stories);
-                const activeStory = this.navigationController.setActiveStoryById(payload.id);
-                this.navigationController.setCurrentStoryDisplayStrategy(this._currentStoryDisplayStrategy);
+                this.setActiveStoryById(payload.id);
                 this.storyReaderStatisticV1Service.init({ feedSlug: (_c = (_b = this._currentStoryDisplayStrategy) === null || _b === void 0 ? void 0 : _b.feed) === null || _c === void 0 ? void 0 : _c.slug });
                 this._touchController.init(document.body);
                 this.setScrollBar(payload.windowReferer);
@@ -14670,7 +14405,7 @@ let StoryReaderViewModel = (() => {
                 this.storyReaderStatisticV2Service.sendCloseReaderEvent({
                     action,
                     totalSlides: activeStory.slidesCount,
-                    durationMs: this.navigationController.activeStoryDuration,
+                    durationMs: this.activeStoryDuration,
                     storyId: activeStory.id,
                     activeSlideIndex: activeStory.activeSlideIndex,
                     feedSlug: (_b = this.feed) === null || _b === void 0 ? void 0 : _b.slug
@@ -14691,7 +14426,7 @@ let StoryReaderViewModel = (() => {
                 this.clearStoryViewModels();
                 this._touchController.destroy();
                 document.removeEventListener("keydown", this.handleKeydown);
-                this.navigationController.destroy();
+                this._activeStory = null;
                 (_b = this.cacheManager) === null || _b === void 0 ? void 0 : _b.destroy();
             }
             canBeClosed() {
@@ -14739,24 +14474,32 @@ let StoryReaderViewModel = (() => {
                 });
             }
             nextStory() {
-                return this.navigationController.nextStory();
+                if (this.reachEnd)
+                    return;
+                this.setActiveStoryByIndex(this._activeStoryIndex + 1);
             }
             prevStory() {
-                return this.navigationController.prevStory();
+                if (this.reachStart)
+                    return;
+                this.setActiveStoryByIndex(this._activeStoryIndex - 1);
             }
             nextStoryWithAnimation(action) {
-                return this.navigationController.nextStoryWithAnimation(action);
+                if (this.reachEnd)
+                    this.handleStoryReaderReachEnd(action);
+                else
+                    this.navigateStoryWithAnimation(this._activeStoryIndex + 1, action);
             }
             prevStoryWithAnimation(action) {
-                return this.navigationController.prevStoryWithAnimation(action);
+                if (!this.reachStart)
+                    this.navigateStoryWithAnimation(this._activeStoryIndex - 1, action);
             }
             toStoryWithAnimationByIndex(index) {
                 if (this.activeStoryIndex === index)
                     return;
-                return this.navigationController.navigateStoryWithAnimation(index, "");
+                return this.navigateStoryWithAnimation(index, "");
             }
             navigateStoryWithAnimationByIndex(index, action) {
-                this.navigationController.navigateStoryWithAnimation(index, action);
+                this.navigateStoryWithAnimation(index, action);
             }
             destroy() {
                 var _b;
@@ -14773,7 +14516,7 @@ let StoryReaderViewModel = (() => {
                 (_b = this.activeStory) === null || _b === void 0 ? void 0 : _b.goodsWidget.close();
             }
             setAnimatedNavigationController(animatedNavigationController) {
-                this.navigationController.setAnimatedNavigationController(animatedNavigationController);
+                this.animatedNavigationController = animatedNavigationController;
             }
             mute() {
                 this._muted = true;
@@ -14877,16 +14620,82 @@ let StoryReaderViewModel = (() => {
                 });
                 this.storyReaderStatisticV1Service.sendData();
             }
+            setActiveStoryById(storyId) {
+                const stories = this.stories;
+                const index = stories.findIndex(story => story.id === storyId);
+                if (index === -1)
+                    throw new Error(`[IAS]: No story found with ID ${storyId}`);
+                return this.setActiveStoryByIndex(index);
+            }
+            setActiveStoryByIndex(index) {
+                const prevIndex = this._activeStoryIndex;
+                const prevStory = this._activeStory;
+                const newActiveStory = this.stories[index];
+                if (!newActiveStory)
+                    return;
+                this.updateActiveStory(index, prevStory, newActiveStory);
+                newActiveStory.once(StoryEvent.Started, () => {
+                    this.statisticsController.emitTransitionEvents(prevIndex, index, prevStory, newActiveStory, this.activeStoryDuration);
+                    this._activeStoryStartTime = Date.now();
+                });
+                newActiveStory.markAsOpened();
+                return newActiveStory;
+            }
+            updateActiveStory(index, prevStory, activeStory) {
+                this._activeStoryIndex = index;
+                this._activeStory = activeStory;
+                return activeStory;
+            }
+            handleStoryReaderReachEnd(action) {
+                var _b;
+                if (action !== CloseStoryReaderAction.CloseByTimer) {
+                    this.close(CloseStoryReaderAction.CloseByLastSlideClick);
+                }
+                else if ((_b = this.animatedNavigationController) === null || _b === void 0 ? void 0 : _b.options.closeOnLastSlideByTimer) {
+                    this.close(CloseStoryReaderAction.CloseByTimer);
+                }
+            }
+            async navigateStoryWithAnimation(index, action = "lastSlideClick") {
+                if (!this.animatedNavigationController ||
+                    this.animatedNavigationController.animating ||
+                    this._targetTransitionIndex !== -1)
+                    return;
+                index = this.limitIndex(index);
+                this._targetTransitionIndex = index;
+                this._currentStoryDisplayStrategy.handleNextStoryByIndex(index);
+                await this.animatedNavigationController.transitionByIndex(index, this._activeStoryIndex);
+                await this.handleTransitionEnd(index, action);
+            }
+            limitIndex(index) {
+                return Math.max(0, Math.min(this.stories.length - 1, index));
+            }
+            async handleTransitionEnd(index, navigationAction) {
+                if (this.activeStory) {
+                    const event = new CloseStoryEvent(this.activeStory, {
+                        action: navigationAction
+                    });
+                    this.storyManager.emit(event.name, event.toJSON());
+                }
+                await this.setActiveStoryByIndex(index);
+                this._targetTransitionIndex = -1;
+            }
         },
         _StoryReaderViewModel__muted_accessor_storage = new WeakMap(),
         _StoryReaderViewModel__closeGestureInAction_accessor_storage = new WeakMap(),
         _StoryReaderViewModel__stories_accessor_storage = new WeakMap(),
+        _StoryReaderViewModel__activeStory_accessor_storage = new WeakMap(),
+        _StoryReaderViewModel__activeStoryIndex_accessor_storage = new WeakMap(),
+        _StoryReaderViewModel__targetTransitionIndex_accessor_storage = new WeakMap(),
         (() => {
             var _b;
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create((_b = _classSuper[Symbol.metadata]) !== null && _b !== void 0 ? _b : null) : void 0;
             __muted_decorators = [external_mobx_namespaceObject.observable];
             __closeGestureInAction_decorators = [external_mobx_namespaceObject.observable];
             __stories_decorators = [external_mobx_namespaceObject.observable];
+            __activeStory_decorators = [external_mobx_namespaceObject.observable];
+            __activeStoryIndex_decorators = [external_mobx_namespaceObject.observable];
+            __targetTransitionIndex_decorators = [external_mobx_namespaceObject.observable];
+            _get_targetTransitionStory_decorators = [external_mobx_namespaceObject.computed];
             _get_isOpened_decorators = [external_mobx_namespaceObject.computed];
             _get_reachStart_decorators = [external_mobx_namespaceObject.computed];
             _get_reachEnd_decorators = [external_mobx_namespaceObject.computed];
@@ -14908,9 +14717,15 @@ let StoryReaderViewModel = (() => {
             _unmute_decorators = [external_mobx_namespaceObject.action];
             _enableCloseGesture_decorators = [external_mobx_namespaceObject.action];
             _disableCloseGesture_decorators = [external_mobx_namespaceObject.action];
+            _navigateStoryWithAnimation_decorators = [external_mobx_namespaceObject.action];
+            _handleTransitionEnd_decorators = [external_mobx_namespaceObject.action];
             storyReaderViewModel_esDecorate(_a, null, __muted_decorators, { kind: "accessor", name: "_muted", static: false, private: false, access: { has: obj => "_muted" in obj, get: obj => obj._muted, set: (obj, value) => { obj._muted = value; } }, metadata: _metadata }, __muted_initializers, __muted_extraInitializers);
             storyReaderViewModel_esDecorate(_a, null, __closeGestureInAction_decorators, { kind: "accessor", name: "_closeGestureInAction", static: false, private: false, access: { has: obj => "_closeGestureInAction" in obj, get: obj => obj._closeGestureInAction, set: (obj, value) => { obj._closeGestureInAction = value; } }, metadata: _metadata }, __closeGestureInAction_initializers, __closeGestureInAction_extraInitializers);
             storyReaderViewModel_esDecorate(_a, null, __stories_decorators, { kind: "accessor", name: "_stories", static: false, private: false, access: { has: obj => "_stories" in obj, get: obj => obj._stories, set: (obj, value) => { obj._stories = value; } }, metadata: _metadata }, __stories_initializers, __stories_extraInitializers);
+            storyReaderViewModel_esDecorate(_a, null, __activeStory_decorators, { kind: "accessor", name: "_activeStory", static: false, private: false, access: { has: obj => "_activeStory" in obj, get: obj => obj._activeStory, set: (obj, value) => { obj._activeStory = value; } }, metadata: _metadata }, __activeStory_initializers, __activeStory_extraInitializers);
+            storyReaderViewModel_esDecorate(_a, null, __activeStoryIndex_decorators, { kind: "accessor", name: "_activeStoryIndex", static: false, private: false, access: { has: obj => "_activeStoryIndex" in obj, get: obj => obj._activeStoryIndex, set: (obj, value) => { obj._activeStoryIndex = value; } }, metadata: _metadata }, __activeStoryIndex_initializers, __activeStoryIndex_extraInitializers);
+            storyReaderViewModel_esDecorate(_a, null, __targetTransitionIndex_decorators, { kind: "accessor", name: "_targetTransitionIndex", static: false, private: false, access: { has: obj => "_targetTransitionIndex" in obj, get: obj => obj._targetTransitionIndex, set: (obj, value) => { obj._targetTransitionIndex = value; } }, metadata: _metadata }, __targetTransitionIndex_initializers, __targetTransitionIndex_extraInitializers);
+            storyReaderViewModel_esDecorate(_a, null, _get_targetTransitionStory_decorators, { kind: "getter", name: "targetTransitionStory", static: false, private: false, access: { has: obj => "targetTransitionStory" in obj, get: obj => obj.targetTransitionStory }, metadata: _metadata }, null, _instanceExtraInitializers);
             storyReaderViewModel_esDecorate(_a, null, _get_isOpened_decorators, { kind: "getter", name: "isOpened", static: false, private: false, access: { has: obj => "isOpened" in obj, get: obj => obj.isOpened }, metadata: _metadata }, null, _instanceExtraInitializers);
             storyReaderViewModel_esDecorate(_a, null, _get_reachStart_decorators, { kind: "getter", name: "reachStart", static: false, private: false, access: { has: obj => "reachStart" in obj, get: obj => obj.reachStart }, metadata: _metadata }, null, _instanceExtraInitializers);
             storyReaderViewModel_esDecorate(_a, null, _get_reachEnd_decorators, { kind: "getter", name: "reachEnd", static: false, private: false, access: { has: obj => "reachEnd" in obj, get: obj => obj.reachEnd }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -14932,14 +14747,10 @@ let StoryReaderViewModel = (() => {
             storyReaderViewModel_esDecorate(_a, null, _unmute_decorators, { kind: "method", name: "unmute", static: false, private: false, access: { has: obj => "unmute" in obj, get: obj => obj.unmute }, metadata: _metadata }, null, _instanceExtraInitializers);
             storyReaderViewModel_esDecorate(_a, null, _enableCloseGesture_decorators, { kind: "method", name: "enableCloseGesture", static: false, private: false, access: { has: obj => "enableCloseGesture" in obj, get: obj => obj.enableCloseGesture }, metadata: _metadata }, null, _instanceExtraInitializers);
             storyReaderViewModel_esDecorate(_a, null, _disableCloseGesture_decorators, { kind: "method", name: "disableCloseGesture", static: false, private: false, access: { has: obj => "disableCloseGesture" in obj, get: obj => obj.disableCloseGesture }, metadata: _metadata }, null, _instanceExtraInitializers);
+            storyReaderViewModel_esDecorate(_a, null, _navigateStoryWithAnimation_decorators, { kind: "method", name: "navigateStoryWithAnimation", static: false, private: false, access: { has: obj => "navigateStoryWithAnimation" in obj, get: obj => obj.navigateStoryWithAnimation }, metadata: _metadata }, null, _instanceExtraInitializers);
+            storyReaderViewModel_esDecorate(_a, null, _handleTransitionEnd_decorators, { kind: "method", name: "handleTransitionEnd", static: false, private: false, access: { has: obj => "handleTransitionEnd" in obj, get: obj => obj.handleTransitionEnd }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         })(),
-        Object.defineProperty(_a, "id", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: "StoryReaderViewModel"
-        }),
         _a;
 })();
 
@@ -14971,7 +14782,6 @@ class StoryReaderViewModelFactory {
 
 
 
-
 ;// CONCATENATED MODULE: ../core/src/readers/storyReader/index.ts
 
 
@@ -17363,7 +17173,7 @@ let IamReaderViewModel = (() => {
                 this.throwIfAborted(options.signal);
                 const message = await this.iamDisplayService.getMessageById(messageId, options);
                 this.throwIfAborted(options.signal);
-                await this.open(message);
+                await this.open(message, options.appearance);
                 return message;
             }
             async showMessageByEvent(eventName, options = {}) {
@@ -17373,7 +17183,7 @@ let IamReaderViewModel = (() => {
                 this.throwIfAborted(options.signal);
                 const message = await this.iamDisplayService.getMessageByEvent(eventName, options);
                 this.throwIfAborted(options.signal);
-                await this.open(message);
+                await this.open(message, options.appearance);
                 return message;
             }
             async forceClose() {
@@ -17391,8 +17201,11 @@ let IamReaderViewModel = (() => {
                     return;
                 this.forceClose();
             }
-            async open(message) {
+            async open(message, appearance) {
                 message.updatePlaceholders(this.storyManager.rootStore.placeholderStore.placeholders);
+                if ((appearance === null || appearance === void 0 ? void 0 : appearance.zIndex) !== undefined) {
+                    message.appearanceOptions.zIndex = appearance.zIndex;
+                }
                 this.touchController.init(document.body);
                 this.setActiveMessage(message);
                 this.visibilityObserver.subscribe();
@@ -21091,7 +20904,7 @@ class UgcEditorStore {
         const session = await this.storyManager.rootStore.sessionStore.open();
         const ugcEditorConfigDto = await this.ugcEditorApi.fetchUgcEditorConfig();
         const storyManagerConfig = this.storyManager.config;
-        const sdkVersion = "1.9.4";
+        const sdkVersion = "1.9.6";
         this._config = {
             sessionId: session.id,
             apiKey: storyManagerConfig.apiKey,
@@ -21562,11 +21375,11 @@ class StoryManager extends TypedEventEmitter {
         return deviceDescriptor.deviceId;
     }
     get sdkVersionName() {
-        const sdkVersionName = "1.9.4";
+        const sdkVersionName = "1.9.6";
         return sdkVersionName || "0.0.0";
     }
     get sdkVersionCode() {
-        const sdkVersionCode = 10904;
+        const sdkVersionCode = 10906;
         return sdkVersionCode ? parseInt(sdkVersionCode) : 0;
     }
     get lang() {
@@ -21630,7 +21443,7 @@ class StoryManager extends TypedEventEmitter {
         this.rootStore.storyManagerConfigStore.setConfig(configDto);
     }
     setUserAgent(userAgent) {
-        const sdkVersionCode = 10904;
+        const sdkVersionCode = 10906;
         const buildVersion = sdkVersionCode ? parseInt(sdkVersionCode) : 0;
         // According to RFC5987, HTTP header values can legitimately be supplied using the ISO-8859-1 encoding.
         this._userAgent = `${userAgent} ${convertStrToLatin1(navigator.userAgent)}`;
@@ -23657,11 +23470,11 @@ const StoryReaderRoot = (0,external_mobx_react_lite_namespaceObject.observer)((p
     const getSlideBackdropStyle = () => {
         var _a, _b, _c;
         const imageOptions = [];
-        const displayedSlideImage = (_a = props.storyReader.activeStory) === null || _a === void 0 ? void 0 : _a.displayedSlideImage;
+        const cover = (_a = props.storyReader.activeStory) === null || _a === void 0 ? void 0 : _a.cover;
         if (options.slideBackdrop != null && Array.isArray(options.slideBackdrop.linearGradientOverlay))
             imageOptions.push(`linear-gradient(${options.slideBackdrop.linearGradientOverlay.join(", ")})`);
-        if (displayedSlideImage != null)
-            imageOptions.push(`url(${displayedSlideImage})`);
+        if (cover != null)
+            imageOptions.push(`url(${cover})`);
         return {
             backgroundImage: imageOptions.join(", "),
             opacity: ((_b = options.slideBackdrop) === null || _b === void 0 ? void 0 : _b.opacity) || 0,
@@ -25696,13 +25509,7 @@ class StorySlidesContainer extends HTMLElement {
             writable: true,
             value: null
         });
-        Object.defineProperty(this, "story", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        Object.defineProperty(this, "mountPoint", {
+        Object.defineProperty(this, "_mountPoint", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -25719,22 +25526,22 @@ class StorySlidesContainer extends HTMLElement {
             configurable: true,
             writable: true,
             value: (event) => {
-                var _a;
                 if (!this.shadowRoot)
                     return;
-                const isActiveStory = this.getAttribute("is-active-story") === "true";
-                if (!isActiveStory)
-                    return;
-                (_a = this.story) === null || _a === void 0 ? void 0 : _a.activeSlide.onClick({
-                    event,
-                    currentTarget: this.mountPoint,
-                    preventNavigation: this.getAttribute("prevent-navigation") === "true"
-                });
+                this.dispatchEvent(new CustomEvent("click", {
+                    detail: {
+                        event,
+                        currentTarget: this._mountPoint
+                    }
+                }));
             }
         });
     }
+    getMountPoint() {
+        return this._mountPoint;
+    }
     setStyle(cssString) {
-        if (!this.mountPoint)
+        if (!this._mountPoint)
             return;
         if (this.styleElement && this.styleElement.parentNode)
             this.styleElement.parentNode.removeChild(this.styleElement);
@@ -25742,30 +25549,20 @@ class StorySlidesContainer extends HTMLElement {
         style.textContent = cssString;
         style.setAttribute("nonce", getNonce());
         this.styleElement = style;
-        this.mountPoint.prepend(style);
-    }
-    attach(story) {
-        /** React uses its own virtual DOM and can reuse or move nodes without actually removing them from the DOM. So connectedCallback and disconnectedCallback are not always called.React uses its own virtual DOM and can reuse or move nodes without actually removing them from the DOM. So connectedCallback and disconnectedCallback are not always called. */
-        if (!this.mountPoint)
-            throw new Error("[IAS]: Mount point was undefined");
-        this.story = story;
-        this.story.attachRoot(this.mountPoint);
-        this.mountPoint.addEventListener("click", this.handleClick);
-    }
-    detach() {
-        var _a, _b;
-        /** React uses its own virtual DOM and can reuse or move nodes without actually removing them from the DOM. So connectedCallback and disconnectedCallback are not always called. */
-        (_a = this.story) === null || _a === void 0 ? void 0 : _a.detachRoot();
-        (_b = this.mountPoint) === null || _b === void 0 ? void 0 : _b.removeEventListener("click", this.handleClick);
+        this._mountPoint.prepend(style);
     }
     connectedCallback() {
         const shadowRoot = this.attachShadow({ mode: "open" });
-        this.mountPoint = document.createElement("div");
-        this.mountPoint.style.height = "100%";
-        this.mountPoint.style.width = "100%";
-        shadowRoot.appendChild(this.mountPoint);
+        this._mountPoint = document.createElement("div");
+        this._mountPoint.style.height = "100%";
+        this._mountPoint.style.width = "100%";
+        this._mountPoint.addEventListener("click", this.handleClick);
+        shadowRoot.appendChild(this._mountPoint);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this._mountPoint) === null || _a === void 0 ? void 0 : _a.removeEventListener("click", this.handleClick);
     }
-    disconnectedCallback() { }
 }
 customElements.get("story-slides-container") || customElements.define("story-slides-container", StorySlidesContainer);
 
@@ -25786,7 +25583,7 @@ var StorySlidesRenderer_rest = (undefined && undefined.__rest) || function (s, e
 
 
 const StorySlidesRenderer = (0,external_mobx_react_lite_namespaceObject.observer)((0,external_react_namespaceObject.forwardRef)((_a, ref) => {
-    var { className, story, preventNavigation, isActiveStory } = _a, props = StorySlidesRenderer_rest(_a, ["className", "story", "preventNavigation", "isActiveStory"]);
+    var { className, story } = _a, props = StorySlidesRenderer_rest(_a, ["className", "story"]);
     const storySlidesRef = (0,external_react_namespaceObject.useRef)(null);
     (0,external_react_namespaceObject.useImperativeHandle)(ref, () => {
         return {
@@ -25794,23 +25591,85 @@ const StorySlidesRenderer = (0,external_mobx_react_lite_namespaceObject.observer
                 var _a;
                 (_a = storySlidesRef.current) === null || _a === void 0 ? void 0 : _a.setStyle(style);
             },
-            attach: (story) => {
-                var _a;
-                (_a = storySlidesRef.current) === null || _a === void 0 ? void 0 : _a.attach(story);
-            },
-            detach: () => {
-                var _a;
-                (_a = storySlidesRef.current) === null || _a === void 0 ? void 0 : _a.detach();
+            getMountPoint: () => {
+                var _a, _b;
+                return (_b = (_a = storySlidesRef.current) === null || _a === void 0 ? void 0 : _a.getMountPoint()) !== null && _b !== void 0 ? _b : null;
             }
         };
     }, [ref, storySlidesRef]);
+    (0,external_react_namespaceObject.useEffect)(() => {
+        if (!storySlidesRef.current)
+            return;
+        const storySlides = storySlidesRef.current;
+        const handleClickEvent = (event) => {
+            props.onClick(event.detail);
+        };
+        storySlides.addEventListener("click", handleClickEvent);
+        return () => {
+            storySlides.removeEventListener("click", handleClickEvent);
+        };
+    }, [props.onClick]);
     const bottomOffset = !props.isDesktopGeometry ? `${story.actionPanel.height}px` : "0px";
     // Bug with attributes in React 19. Explicit cast to string required
     return ((0,jsx_runtime_namespaceObject.jsx)("story-slides-container", { ref: storySlidesRef, style: {
             bottom: bottomOffset
-        }, class: className, dir: story.dir, "prevent-navigation": preventNavigation.toString(), "is-active-story": isActiveStory.toString() }));
+        }, class: className, dir: story.dir }));
 }));
 
+;// CONCATENATED MODULE: ./src/StoryReader/Story/hooks/useStoryLifecycle.ts
+
+const useStoryLifecycle = (args) => {
+    (0,external_react_namespaceObject.useEffect)(() => {
+        if (!args.slideRef.current)
+            return;
+        args.story.update({
+            container: args.slideRef.current.getMountPoint(),
+            canBeInited: args.canBeInited,
+            canBeStarted: args.canBeStarted,
+            activeStory: args.activeStory
+        });
+    }, [args.canBeInited, args.canBeStarted, args.slideRef, args.story]);
+    (0,external_react_namespaceObject.useEffect)(() => {
+        return () => {
+            args.story.update({
+                container: null,
+                canBeInited: false,
+                canBeStarted: false,
+                activeStory: null
+            });
+        };
+    }, []);
+};
+
+;// CONCATENATED MODULE: ./src/StoryReader/Story/hooks/useStoryActionPanel.ts
+
+
+
+const useStoryActionPanel = ({ geometry, story }) => {
+    const { storyReaderOptions, commonOptions } = useIASContainer();
+    const isDesktopGeometry = geometry instanceof DesktopStoryGeometry;
+    (0,external_react_namespaceObject.useLayoutEffect)(() => {
+        const bottomOffset = parseFloat(String(storyReaderOptions.actionPanelBottomOffset));
+        story.actionPanel.setOptions(commonOptions);
+        story.actionPanel.setActionPanelHeight(bottomOffset);
+    }, [story, commonOptions, storyReaderOptions.actionPanelBottomOffset, isDesktopGeometry]);
+};
+
+;// CONCATENATED MODULE: ./src/StoryReader/Story/hooks/useStorySlideStyle.ts
+
+const useStorySlideStyle = ({ story, slideRef }) => {
+    (0,external_react_namespaceObject.useLayoutEffect)(() => {
+        if (!slideRef.current)
+            return;
+        slideRef.current.setStyle(story.context.style);
+    }, [story.context.style, slideRef]);
+};
+
+;// CONCATENATED MODULE: ./src/StoryReader/Story/hooks/index.ts
+
+
+
+
 ;// CONCATENATED MODULE: ./src/StoryReader/Story/Story.tsx
 var Story_rest = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -25837,37 +25696,21 @@ var Story_rest = (undefined && undefined.__rest) || function (s, e) {
 
 
 
+
 const Story_Story = (0,external_mobx_react_lite_namespaceObject.observer)((_a) => {
     var { story, geometry, className } = _a, props = Story_rest(_a, ["story", "geometry", "className"]);
-    const { storyReaderOptions, commonOptions, goodsWidgetOptions } = useIASContainer();
     const storyRef = (0,external_react_namespaceObject.useRef)(null);
     const slideRef = (0,external_react_namespaceObject.useRef)(null);
-    const isActiveStory = story === props.activeStory;
-    const isDesktopGeometry = geometry instanceof DesktopStoryGeometry;
-    const useModernLayout = storyReaderOptions.layout === StoryReaderLayout.Modern;
-    const shouldHideHeader = isDesktopGeometry && useModernLayout
-        ? !isActiveStory || story.pauseState.isUIPaused
-        : story.pauseState.isUIPaused;
-    const shouldHideActionPanel = isDesktopGeometry && ((useModernLayout && !isActiveStory) || story.textInput.isOpened);
-    (0,external_react_namespaceObject.useLayoutEffect)(() => {
-        const bottomOffset = parseFloat(String(storyReaderOptions.actionPanelBottomOffset));
-        story.actionPanel.setOptions(commonOptions);
-        story.actionPanel.setActionPanelHeight(bottomOffset);
-    }, [story, commonOptions, storyReaderOptions.actionPanelBottomOffset, isDesktopGeometry]);
-    (0,external_react_namespaceObject.useLayoutEffect)(() => {
-        if (!slideRef.current)
-            return;
-        slideRef.current.setStyle(story.context.style);
-    }, [story.context.style]);
-    (0,external_react_namespaceObject.useLayoutEffect)(() => {
-        if (!slideRef.current)
-            return;
-        const storySlides = slideRef.current;
-        storySlides.attach(story);
-        return () => {
-            storySlides.detach();
-        };
-    }, [story]);
+    const { storyReaderOptions, commonOptions, goodsWidgetOptions } = useIASContainer();
+    useStoryActionPanel({ geometry, story });
+    useStorySlideStyle({ story, slideRef });
+    useStoryLifecycle({
+        story,
+        canBeInited: props.canBeInited,
+        canBeStarted: props.canBeStarted,
+        activeStory: props.activeStory,
+        slideRef
+    });
     const handleReloadStory = async () => {
         const storyError = Boolean(story.error);
         try {
@@ -25880,13 +25723,28 @@ const Story_Story = (0,external_mobx_react_lite_namespaceObject.observer)((_a) =
             console.error(error);
         }
     };
+    const isDesktopGeometry = geometry instanceof DesktopStoryGeometry;
+    const isActiveStory = story === props.activeStory;
+    const useModernLayout = storyReaderOptions.layout === StoryReaderLayout.Modern;
+    const shouldHideHeader = isDesktopGeometry && useModernLayout
+        ? !isActiveStory || story.pauseState.isUIPaused
+        : story.pauseState.isUIPaused;
+    const shouldHideActionPanel = isDesktopGeometry && ((useModernLayout && !isActiveStory) || story.textInput.isOpened);
     return ((0,jsx_runtime_namespaceObject.jsxs)("div", { ref: storyRef, className: (0,external_classnames_namespaceObject["default"])(Story_story_module["story"], className, {
             [Story_story_module["story_mobile"]]: !isDesktopGeometry
         }), onMouseDown: () => {
             story.sharePanel.completeNativeSharing({ result: false });
         }, onTouchStart: () => {
             story.sharePanel.completeNativeSharing({ result: false });
-        }, "data-testid": "story", children: [isDesktopGeometry && useModernLayout && story.isSlideRendered && (0,jsx_runtime_namespaceObject.jsx)(StoryBackdrop, { hidden: isActiveStory }), story.canBeShown && story.isSlideRendered && ((0,jsx_runtime_namespaceObject.jsx)(StoryHeader, { hidden: shouldHideHeader, story: story, onClose: props.onClose, isDesktopGeometry: isDesktopGeometry })), (0,jsx_runtime_namespaceObject.jsx)(StorySlidesRenderer, { className: Story_story_module["story-slides"], story: story, ref: slideRef, preventNavigation: useModernLayout && isDesktopGeometry, isActiveStory: isActiveStory, isDesktopGeometry: isDesktopGeometry }), story.actionPanel.needShown && story.isSlideRendered && ((0,jsx_runtime_namespaceObject.jsx)(StoryActionPanel, { dir: story.dir, isDesktopGeometry: isDesktopGeometry, hidden: shouldHideActionPanel, actionPanel: story.actionPanel, commonOptions: commonOptions, storyReaderOptions: storyReaderOptions })), props.activeStory === story && ((0,jsx_runtime_namespaceObject.jsx)(GoodsWidgetViewer, { story: story, goodsWidgetOptions: goodsWidgetOptions })), props.activeStory === story && ((0,jsx_runtime_namespaceObject.jsx)(TextInputModal, { story: story, storyRef: storyRef, storyGeometry: geometry })), story.sharePanel.isOpened && ((0,jsx_runtime_namespaceObject.jsx)(SharePanel, { dir: story.dir, className: Story_story_module["share-panel-wrapper"], shareText: story.sharePanel.params.text, shareType: story.sharePanel.params.type, shareLink: story.sharePanel.params.link, onShareCompelete: (result) => story.sharePanel.handleShareComplete(story.sharePanel.params.id, result), sharePanelOptions: storyReaderOptions.sharePanel })), (0,jsx_runtime_namespaceObject.jsx)(Loader, { needShowErrorScreen: story.needShowErrorScreen, needShowLoaderScreen: story.needShowLoaderScreen, onReload: handleReloadStory })] }));
+        }, "data-testid": "story", children: [isDesktopGeometry && useModernLayout && story.isSlideRendered && (0,jsx_runtime_namespaceObject.jsx)(StoryBackdrop, { hidden: isActiveStory }), story.isSlideRendered && ((0,jsx_runtime_namespaceObject.jsx)(StoryHeader, { hidden: shouldHideHeader, story: story, onClose: props.onClose, isDesktopGeometry: isDesktopGeometry })), (0,jsx_runtime_namespaceObject.jsx)(StorySlidesRenderer, { className: Story_story_module["story-slides"], story: story, ref: slideRef, isDesktopGeometry: isDesktopGeometry, onClick: ({ event, currentTarget }) => {
+                    if (!isActiveStory)
+                        return;
+                    story.activeSlide.onClick({
+                        event: event,
+                        currentTarget,
+                        preventNavigation: useModernLayout && isDesktopGeometry
+                    });
+                } }), story.actionPanel.needShown && story.isSlideRendered && ((0,jsx_runtime_namespaceObject.jsx)(StoryActionPanel, { dir: story.dir, isDesktopGeometry: isDesktopGeometry, hidden: shouldHideActionPanel, actionPanel: story.actionPanel, commonOptions: commonOptions, storyReaderOptions: storyReaderOptions })), props.activeStory === story && ((0,jsx_runtime_namespaceObject.jsx)(GoodsWidgetViewer, { story: story, goodsWidgetOptions: goodsWidgetOptions })), props.activeStory === story && ((0,jsx_runtime_namespaceObject.jsx)(TextInputModal, { story: story, storyRef: storyRef, storyGeometry: geometry })), story.sharePanel.isOpened && ((0,jsx_runtime_namespaceObject.jsx)(SharePanel, { dir: story.dir, className: Story_story_module["share-panel-wrapper"], shareText: story.sharePanel.params.text, shareType: story.sharePanel.params.type, shareLink: story.sharePanel.params.link, onShareCompelete: (result) => story.sharePanel.handleShareComplete(story.sharePanel.params.id, result), sharePanelOptions: storyReaderOptions.sharePanel })), (0,jsx_runtime_namespaceObject.jsx)(Loader, { needShowErrorScreen: story.needShowErrorScreen, needShowLoaderScreen: story.needShowLoaderScreen, onReload: handleReloadStory })] }));
 });
 
 ;// CONCATENATED MODULE: ./src/StoryReader/Story/index.ts
@@ -26218,6 +26076,15 @@ const ModernStoryList = (0,external_mobx_react_lite_namespaceObject.observer)((p
     const borderRadius = parseFloat(String(storyReaderOptions.borderRadius));
     const maxWidth = parseFloat(props.storyGeometry.getWidth()) * STORIES_PER_VIEWPORT;
     const uiDisabled = activeStory.pauseState.isUIPaused || slider.animating;
+    const canBeInited = (index, range = 2) => {
+        const activeIndex = props.storyReader.targetTransitionIndex === -1 ? props.storyReader.activeStoryIndex : props.storyReader.targetTransitionIndex;
+        const start = Math.max(activeIndex - range, 0);
+        const end = Math.min(activeIndex + range, props.storyReader.stories.length - 1);
+        return index >= start && index <= end;
+    };
+    const canBeStarted = (index) => {
+        return props.storyReader.activeStoryIndex === index;
+    };
     return ((0,jsx_runtime_namespaceObject.jsx)("div", { className: (0,external_classnames_namespaceObject["default"])(ModernStoryList_modernStoryList_module["stories-list-container"]), style: {
             "--slide-border-radius": `${borderRadius}px`,
             maxWidth
@@ -26233,7 +26100,8 @@ const ModernStoryList = (0,external_mobx_react_lite_namespaceObject.observer)((p
                         if (uiDisabled)
                             return;
                         props.storyReader.toStoryWithAnimationByIndex(index);
-                    }, children: [(0,jsx_runtime_namespaceObject.jsx)(Story_Story, { index: index, story: story, slideClickDisabled: uiDisabled, activeStory: activeStory, geometry: props.storyGeometry, onClose: props.onCloseStory }), (props.storyReader.stories.length > 1 || story.slidesCount > 1) && activeStory.isSlideRendered && ((0,jsx_runtime_namespaceObject.jsx)(ModernStoryListControls, { dir: props.storyReader.dir, display: isActiveStory && activeStory.canBeShown, disabled: uiDisabled, isNextDisabled: isNextDisabled, isPrevDisabled: isPrevDisabled, navigationOptions: storyReaderOptions.navigation, onNext: () => {
+                    }, children: [(0,jsx_runtime_namespaceObject.jsx)(Story_Story, { index: index, story: story, slideClickDisabled: uiDisabled, activeStory: activeStory, geometry: props.storyGeometry, onClose: props.onCloseStory, canBeInited: canBeInited(index), canBeStarted: canBeStarted(index) }), (props.storyReader.stories.length > 1 || story.slidesCount > 1) &&
+                            activeStory.isSlideRendered && ((0,jsx_runtime_namespaceObject.jsx)(ModernStoryListControls, { dir: props.storyReader.dir, display: isActiveStory && activeStory.isSlideRendered, disabled: uiDisabled, isNextDisabled: isNextDisabled, isPrevDisabled: isPrevDisabled, navigationOptions: storyReaderOptions.navigation, onNext: () => {
                                 props.storyReader.goNext();
                             }, onPrev: () => {
                                 props.storyReader.goPrev();
@@ -27058,13 +26926,22 @@ const MobileStoryList = (0,external_mobx_react_lite_namespaceObject.observer)((p
         : 0;
     const uiPaused = activeStory.pauseState.isUIPaused || slider.api.animating;
     const useModernLayout = storyReaderOptions.layout === StoryReaderLayout.Modern;
+    const canBeInited = (index, range = 2) => {
+        const activeIndex = props.storyReader.targetTransitionIndex === -1 ? props.storyReader.activeStoryIndex : props.storyReader.targetTransitionIndex;
+        const start = Math.max(activeIndex - range, 0);
+        const end = Math.min(activeIndex + range, props.storyReader.stories.length - 1);
+        return index >= start && index <= end;
+    };
+    const canBeStarted = (index) => {
+        return props.storyReader.activeStoryIndex === index;
+    };
     return ((0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, { children: [(0,jsx_runtime_namespaceObject.jsx)("div", { className: (0,external_classnames_namespaceObject["default"])(StoryReader_MobileStoryList_storyList_module["stories-list-container"], {
                     [StoryReader_MobileStoryList_storyList_module["stories-list-container_swipe-up"]]: props.storyReader.closeGestureInAction,
                     [StoryReader_MobileStoryList_storyList_module["stories-list-container_desktop"]]: props.isDesktopGeometry
                 }), style: Object.assign({ WebkitPerspective: `${slider.perspective}px`, perspective: `${slider.perspective}px`, width: props.storyGeometry.getWidth(), backgroundColor: !props.isDesktopGeometry &&
                         props.safeAreaFrameCalculator.shouldBeShownSafeAreaInsets &&
                         "#000", "--slide-border-radius": `${borderRadius}px` }, props.correctionPaddingStyle), children: (0,jsx_runtime_namespaceObject.jsx)("div", { className: StoryReader_MobileStoryList_storyList_module["stories-list"], style: { transform: `translateZ(-${slider.depth}px)` }, children: (0,jsx_runtime_namespaceObject.jsxs)("div", { className: (0,external_classnames_namespaceObject["default"])(StoryReader_MobileStoryList_storyList_module["stories-list__effect-viewer"]), ref: slider.ref, children: [(0,jsx_runtime_namespaceObject.jsx)("div", { className: (0,external_classnames_namespaceObject["default"])(StoryReader_MobileStoryList_storyList_module["stories-list__item"]), children: (0,jsx_runtime_namespaceObject.jsx)(StoryBlank, {}) }), stories.map((story, index) => {
-                                return ((0,jsx_runtime_namespaceObject.jsx)("div", { className: (0,external_classnames_namespaceObject["default"])(StoryReader_MobileStoryList_storyList_module["stories-list__item"]), children: (0,jsx_runtime_namespaceObject.jsx)(Story_Story, { slideClickDisabled: uiPaused, index: index, story: story, activeStory: activeStory, geometry: props.storyGeometry, onClose: props.onCloseStory }) }, story.id));
+                                return ((0,jsx_runtime_namespaceObject.jsx)("div", { className: (0,external_classnames_namespaceObject["default"])(StoryReader_MobileStoryList_storyList_module["stories-list__item"]), children: (0,jsx_runtime_namespaceObject.jsx)(Story_Story, { slideClickDisabled: uiPaused, index: index, story: story, activeStory: activeStory, geometry: props.storyGeometry, onClose: props.onCloseStory, canBeInited: canBeInited(index), canBeStarted: canBeStarted(index) }) }, story.id));
                             }), (0,jsx_runtime_namespaceObject.jsx)("div", { className: (0,external_classnames_namespaceObject["default"])(StoryReader_MobileStoryList_storyList_module["stories-list__item"]), children: (0,jsx_runtime_namespaceObject.jsx)(StoryBlank, {}) })] }) }) }), !useModernLayout && ((0,jsx_runtime_namespaceObject.jsx)(MobileStoryListControls, { dir: props.storyReader.dir, disabledByUI: activeStory.pauseState.isUIPaused, disabled: uiPaused, reachEnd: props.storyReader.reachEnd, reachStart: props.storyReader.reachStart, navigationOptions: storyReaderOptions.navigation, width: props.storyGeometry.calculateWidth(), onNext: () => props.storyReader.goNext(), onPrev: () => props.storyReader.goPrev() }))] }));
 });
 
@@ -27125,6 +27002,12 @@ var decorators_js_x = (y) => {
 } 
 var decorators_js_y = (x) => (() => (x))
 const decorators_js_namespaceObject = decorators_js_x({ ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property), ["query"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.query), ["state"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.state) });
+;// CONCATENATED MODULE: external "lit/directives/style-map.js"
+var style_map_js_x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var style_map_js_y = (x) => (() => (x))
+const style_map_js_namespaceObject = style_map_js_x({ ["styleMap"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_directives_style_map_js_4fbc7c29__.styleMap) });
 ;// CONCATENATED MODULE: ./src/InAppMessaging/controllers/viewportController.ts
 class ViewportController {
     constructor(host) {
@@ -27188,12 +27071,6 @@ const messageViewsByType = {
 
 const bottomSheetStyles = (0,external_lit_namespaceObject.css) `.bottom-sheet{position:fixed;inset:0;left:0;bottom:0;right:0;z-index:999}.bottom-sheet__backdrop{position:fixed;inset:0;left:0;bottom:0;right:0;z-index:-1;background-color:rgba(0,0,0,var(--backdrop-opacity,.5));opacity:0;transition:opacity 225ms cubic-bezier(.4,0,.2,1);pointer-events:none}.bottom-sheet__backdrop--visible{animation:fade-in .3s forwards}.bottom-sheet__backdrop--hidden{animation:fade-out .3s forwards}.bottom-sheet__box{position:absolute;left:0;right:0;bottom:0;will-change:transform;border-top-left-radius:var(--slide-border-top-left-radius,0);border-top-right-radius:var(--slide-border-top-right-radius,0);background-color:transparent;transition:opacity .3s ease,transform .3s ease;transform:translate3d(0,120%,0);pointer-events:all;overflow:hidden}.bottom-sheet__box-wrapper{position:absolute;inset:0;pointer-events:none}.bottom-sheet__box-wrapper.bottom-sheet__box-wrapper--desktop-mode{position:absolute;bottom:0;left:50%;transform:translate3d(-50%,0,0)}.bottom-sheet__box.bottom-sheet__box--open{opacity:1;transform:translate3d(0,0,0)}.bottom-sheet__backdrop.bottom-sheet__backdrop--open{opacity:1;pointer-events:all}.bottom-sheet__header .grab-handler-area{position:absolute;left:50%;transform:translate3d(-50%,0,0);padding:0 32px 16px;z-index:10000;cursor:grab;user-select:none}.bottom-sheet__header .grab-handler{margin-top:8px;width:32px;height:4px;background-color:#00000080;border-radius:var(--grab-handler-border-radius)}`;
 
-;// CONCATENATED MODULE: external "lit/directives/style-map.js"
-var style_map_js_x = (y) => {
-	var x = {}; __webpack_require__.d(x, y); return x
-} 
-var style_map_js_y = (x) => (() => (x))
-const style_map_js_namespaceObject = style_map_js_x({ ["styleMap"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_directives_style_map_js_4fbc7c29__.styleMap) });
 ;// CONCATENATED MODULE: external "lit/directives/class-map.js"
 var class_map_js_x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
@@ -27470,6 +27347,7 @@ let BottomSheet = (() => {
             }, 50);
         }
         render() {
+            var _a;
             if (this.isClosed)
                 return external_lit_namespaceObject.nothing;
             const bottomSheetBoxStyle = {
@@ -27489,7 +27367,10 @@ let BottomSheet = (() => {
                 height: `${this.appearanceOptions.closeButton.height}px`,
                 marginTop: `${this.appearanceOptions.closeButton.marginTop}px`
             };
-            return (0,external_lit_namespaceObject.html) `<div id="bottom-sheet" class="bottom-sheet"><div id="bottom-sheet__backdrop" style="${(0,style_map_js_namespaceObject.styleMap)({
+            const bottomSheetStyle = {
+                zIndex: (_a = this.appearanceOptions.zIndex) !== null && _a !== void 0 ? _a : 999
+            };
+            return (0,external_lit_namespaceObject.html) `<div id="bottom-sheet" class="bottom-sheet" style="${(0,style_map_js_namespaceObject.styleMap)(bottomSheetStyle)}"><div id="bottom-sheet__backdrop" style="${(0,style_map_js_namespaceObject.styleMap)({
                 "--backdrop-opacity": this.appearanceOptions.backdrop.opacity
             })}" @click="${this.close}" class="bottom-sheet__backdrop ${(0,class_map_js_namespaceObject.classMap)({
                 "bottom-sheet__backdrop--open": this.isVisible
@@ -27871,6 +27752,7 @@ let Modal_Modal = (() => {
             return "fadeOut";
         }
         render() {
+            var _a;
             const borderRadius = this.fullscreen ? 0 : this.appearanceOptions.borderRadius;
             const modalBoxContentStyle = {
                 background: this.appearanceOptions.background,
@@ -27886,7 +27768,10 @@ let Modal_Modal = (() => {
                 ? this.getEnterModalAnimationCSSClass(animationType)
                 : this.getOutModalAnimationCSSClass(animationType);
             const backdropAnimationClass = this.getBackdropAnimationCSSClass(this.isVisible);
-            return (0,external_lit_namespaceObject.html) `<div class="modal"><div id="modal__backdrop" style="${(0,style_map_js_namespaceObject.styleMap)({
+            const modalStyle = {
+                zIndex: (_a = this.appearanceOptions.zIndex) !== null && _a !== void 0 ? _a : 1000
+            };
+            return (0,external_lit_namespaceObject.html) `<div class="modal" style="${(0,style_map_js_namespaceObject.styleMap)(modalStyle)}"><div id="modal__backdrop" style="${(0,style_map_js_namespaceObject.styleMap)({
                 "--backdrop-opacity": this.appearanceOptions instanceof IamModalAppearanceOptions
                     ? this.appearanceOptions.backdrop.opacity
                     : undefined
@@ -28717,6 +28602,7 @@ var InAppMessagingReader_classPrivateFieldSet = (undefined && undefined.__classP
 
 
 
+
 let InAppMessagingReader = (() => {
     var _InAppMessagingReader_options_accessor_storage, _InAppMessagingReader_desktopMode_accessor_storage, _InAppMessagingReader_dir_accessor_storage, _InAppMessagingReader_viewModel_accessor_storage, _InAppMessagingReader_open_accessor_storage;
     let _classDecorators = [safeCustomElement("iam-reader"), mobxObserver];
@@ -28827,7 +28713,7 @@ let InAppMessagingReader = (() => {
             }
         }
         render() {
-            var _a, _b;
+            var _a, _b, _c;
             const message = (_a = this.viewModel) === null || _a === void 0 ? void 0 : _a.activeMessage;
             const touchController = (_b = this.viewModel) === null || _b === void 0 ? void 0 : _b.touchController;
             if (!(message === null || message === void 0 ? void 0 : message.context))
@@ -28835,7 +28721,10 @@ let InAppMessagingReader = (() => {
             const type = message.type;
             const messageGeometry = this.createMessageGeometry(type, message.appearanceOptions);
             const slideGeometry = this.createSlideGeometry(messageGeometry);
-            return (0,external_lit_namespaceObject.html) `<message-view-factory type="${type}" @closed="${this.handleClosed}" .disableClose="${message.disableClose}" .appearanceOptions="${message.appearanceOptions}" .geometry="${messageGeometry}" .open="${this.open}" .dir="${this.dir}" .desktopMode="${this.desktopMode}" .touchController="${touchController}"><message-slide .message="${message}" .styleContext="${message.context.style}" .geometry="${slideGeometry}"></message-slide><iam-loader .background="${"transparent"}" .needShowErrorScreen="${message.needShowErrorScreen}" .needShowLoaderScreen="${message.needShowLoaderScreen}" @reload="${this.handleReloadMessage}"></iam-loader></message-view-factory>`;
+            const containerStyle = {
+                zIndex: (_c = message.appearanceOptions.zIndex) !== null && _c !== void 0 ? _c : 1000
+            };
+            return (0,external_lit_namespaceObject.html) `<div class="iam-container" style="${(0,style_map_js_namespaceObject.styleMap)(containerStyle)}"><message-view-factory type="${type}" @closed="${this.handleClosed}" .disableClose="${message.disableClose}" .appearanceOptions="${message.appearanceOptions}" .geometry="${messageGeometry}" .open="${this.open}" .dir="${this.dir}" .desktopMode="${this.desktopMode}" .touchController="${touchController}"><message-slide .message="${message}" .styleContext="${message.context.style}" .geometry="${slideGeometry}"></message-slide><iam-loader .background="${"transparent"}" .needShowErrorScreen="${message.needShowErrorScreen}" .needShowLoaderScreen="${message.needShowLoaderScreen}" @reload="${this.handleReloadMessage}"></iam-loader></message-view-factory></div>`;
         }
     };
     _InAppMessagingReader_options_accessor_storage = new WeakMap();
@@ -28980,7 +28869,7 @@ const useStoryManagerConfig = (config) => {
 ;// CONCATENATED MODULE: ./src/IASContainer/hooks/useStoryManagerEvents.ts
 
 
-const useStoryManagerEvents = ({ onClickOnStory, onClickOnButton, onShowStory, onCloseStory, onShowSlide, onLikeStory, onDislikeStory, onFavoriteStory, onShareStory, onShareStoryWithPath, onFeedImpression, onVisibleAreaUpdated, onWidgetEvent, onStartGame, onCloseGame, onFinishGame, onEventGame, onCloseStoryReader, onProductCartUpdated, onProductCartClicked }) => {
+const useStoryManagerEvents = ({ onClickOnStory, onClickOnButton, onShowStory, onCloseStory, onShowSlide, onLikeStory, onDislikeStory, onFavoriteStory, onShareStory, onShareStoryWithPath, onFeedImpression, onVisibleAreaUpdated, onWidgetEvent, onStartGame, onCloseGame, onEventGame, onCloseStoryReader, onProductCartUpdated, onProductCartClicked }) => {
     (0,external_react_namespaceObject.useEffect)(() => {
         const handlers = [
             { event: "clickOnStory", handler: onClickOnStory },
@@ -28997,7 +28886,6 @@ const useStoryManagerEvents = ({ onClickOnStory, onClickOnButton, onShowStory, o
             { event: "widgetEvent", handler: onWidgetEvent },
             { event: "startGame", handler: onStartGame },
             { event: "closeGame", handler: onCloseGame },
-            { event: "finishGame", handler: onFinishGame },
             { event: "eventGame", handler: onEventGame },
             { event: "clickOnButton", handler: onClickOnButton },
             { event: "closeStoryReader", handler: onCloseStoryReader },
@@ -29022,7 +28910,6 @@ const useStoryManagerEvents = ({ onClickOnStory, onClickOnButton, onShowStory, o
         onShowSlide,
         onStartGame,
         onCloseGame,
-        onFinishGame,
         onEventGame,
         onLikeStory,
         onDislikeStory,