Stage WebGL scene loading

public/js/book-pagination-module.js

@@ -36,6 +36,7 @@ class BookPaginationModule extends BaseModule {
             'getSpread',
             'getCurrentSpread',
             'setCurrentSpread',
+            'handlePageCountChanged',
             'publish'
         ]);
     }
@@ -44,9 +45,10 @@ class BookPaginationModule extends BaseModule {
         this.pageFormat = this.getModule('book-page-format');
         this.paragraphLayout = this.getModule('paragraph-layout');
         this.storyHistory = this.getModule('story-history');
-        this.metrics = this.pageFormat.getTextureMetrics(1280);
+        this.metrics = this.pageFormat.getTextureMetrics(this.pageFormat.getTextureWidth?.());
 
         this.reportProgress(35, 'Preparing book pagination metrics');
+        this.addEventListener(document, 'webgl-book:page-count-changed', this.handlePageCountChanged);
         this.addEventListener(document, 'story:history-updated', this.refreshFromHistory);
         this.addEventListener(document, 'book-pagination:set-spread', (event) => {
             this.setCurrentSpread(event.detail?.spreadIndex);
@@ -55,6 +57,12 @@ class BookPaginationModule extends BaseModule {
         return true;
     }
 
+    handlePageCountChanged(event) {
+        this.pageFormat?.setPageCount?.(event.detail?.pageCount);
+        this.metrics = this.pageFormat.getTextureMetrics(this.pageFormat.getTextureWidth?.());
+        this.refreshFromHistory();
+    }
+
     async refreshFromHistory(event = null) {
         const token = ++this.refreshToken;
         const detail = event?.detail || {};