Stabilize WebGL book pagination restore

public/js/webgl-page-cache-module.js

@@ -84,11 +84,13 @@ class WebGLPageCacheModule extends BaseModule {
         return this.db.transaction([this.storeName], mode).objectStore(this.storeName);
     }
 
-    makePageKey({ pageIndex, width, height, cacheKey = window.MODULE_CACHE_BUSTER || 'dev' } = {}) {
+    makePageKey({ pageIndex, width, height, kind = 'content', section = 'body', cacheKey = window.MODULE_CACHE_BUSTER || 'dev' } = {}) {
         const safePage = Math.max(0, Math.round(Number(pageIndex || 0)));
         const safeWidth = Math.max(1, Math.round(Number(width || 0)));
         const safeHeight = Math.max(1, Math.round(Number(height || 0)));
-        return `${cacheKey}:page:${safePage}:${safeWidth}x${safeHeight}`;
+        const safeKind = String(kind || 'content').replace(/[^a-z0-9_-]/gi, '');
+        const safeSection = String(section || 'body').replace(/[^a-z0-9_-]/gi, '');
+        return `${cacheKey}:page:${safePage}:${safeKind}:${safeSection}:${safeWidth}x${safeHeight}`;
     }
 
     async cachePageCanvas(pageMeta = {}, canvas = null) {
@@ -99,6 +101,8 @@ class WebGLPageCacheModule extends BaseModule {
             pageIndex,
             width: canvas.width,
             height: canvas.height,
+            kind: pageMeta.kind,
+            section: pageMeta.section,
             cacheKey: pageMeta.cacheKey
         });
         try {
@@ -119,6 +123,8 @@ class WebGLPageCacheModule extends BaseModule {
                     height: canvas.height,
                     contentVersion: Math.max(0, Number(pageMeta.contentVersion || 0)),
                     completenessScore: Math.max(0, Number(pageMeta.completenessScore || 0)),
+                    kind: pageMeta.kind || 'content',
+                    section: pageMeta.section || 'body',
                     maxBlockId: Math.max(0, Number(pageMeta.maxBlockId || 0)),
                     lineCount: Math.max(0, Number(pageMeta.lineCount || 0)),
                     blob,
@@ -168,6 +174,8 @@ class WebGLPageCacheModule extends BaseModule {
             const canvas = await this.blobToCanvas(entry.blob, entry.width, entry.height);
             if (canvas) canvas.__webglPageCacheMeta = {
                 pageIndex: entry.pageIndex,
+                kind: entry.kind || pageMeta.kind || 'content',
+                section: entry.section || pageMeta.section || 'body',
                 contentVersion: entry.contentVersion,
                 completenessScore: entry.completenessScore,
                 maxBlockId: entry.maxBlockId,