@papyrus-sdk/ui-react-native 0.2.20 → 0.2.21

package/dist/index.mjs

@@ -20395,9 +20395,121 @@ https://github.com/nodeca/pako/blob/main/LICENSE
         ]).default;
       });
     </script>
+    <!-- @papyrus-comic-runtime:start -->
+    <script>
+(function (root, factory) {
+  if (typeof module === "object" && module.exports) {
+    module.exports = factory();
+  } else {
+    root.PapyrusComicRuntime = Object.assign(
+      factory(),
+      root.PapyrusComicRuntime || {}
+    );
+  }
+})(typeof self === "object" ? self : this, function () {
+  var IMAGE_EXTENSIONS = /\\.(?:gif|jpe?g|png|svg|webp)$/i;
+
+  function isComicImageName(name) {
+    return typeof name === "string" && IMAGE_EXTENSIONS.test(name);
+  }
+
+  function naturalCompare(left, right) {
+    var leftParts = String(left).split(/(\\d+)/);
+    var rightParts = String(right).split(/(\\d+)/);
+    var length = Math.max(leftParts.length, rightParts.length);
+
+    for (var index = 0; index < length; index += 1) {
+      var leftPart = leftParts[index] || "";
+      var rightPart = rightParts[index] || "";
+      if (leftPart === rightPart) continue;
+
+      var leftNumber = /^\\d+$/.test(leftPart) ? Number(leftPart) : null;
+      var rightNumber = /^\\d+$/.test(rightPart) ? Number(rightPart) : null;
+      if (leftNumber !== null && rightNumber !== null) {
+        return leftNumber - rightNumber;
+      }
+      return leftPart.localeCompare(rightPart, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      });
+    }
+
+    return 0;
+  }
+
+  function sortComicPageNames(names) {
+    return names.slice().sort(naturalCompare);
+  }
+
+  function patchCbrWorkerSource(workerSource, wasmUrl) {
+    return workerSource.replace(
+      /new URL\\("libarchive\\.wasm",import\\.meta\\.url\\)\\.href/g,
+      JSON.stringify(wasmUrl)
+    );
+  }
+
+  function getComicPreviewSize(width, height, maxWidth, maxHeight) {
+    var safeWidth = Math.max(1, Number(width) || 1);
+    var safeHeight = Math.max(1, Number(height) || 1);
+    var widthLimit = maxWidth || 240;
+    var heightLimit = maxHeight || 360;
+    var scale = Math.min(1, widthLimit / safeWidth, heightLimit / safeHeight);
+    return {
+      width: Math.max(1, Math.round(safeWidth * scale)),
+      height: Math.max(1, Math.round(safeHeight * scale)),
+    };
+  }
+
+  function getComicPageAspectRatio(width, height) {
+    var safeWidth = Math.max(1, Number(width) || 1);
+    var safeHeight = Math.max(1, Number(height) || 1);
+    return safeWidth + " / " + safeHeight;
+  }
+
+  function getProtectedComicPageIndexes(
+    currentPage,
+    visiblePageIndexes,
+    loadingPageIndexes
+  ) {
+    var protectedIndexes = new Set([
+      currentPage - 1,
+      currentPage,
+      currentPage - 2,
+    ]);
+    (visiblePageIndexes || []).forEach(function (pageIndex) {
+      protectedIndexes.add(pageIndex);
+    });
+    (loadingPageIndexes || []).forEach(function (pageIndex) {
+      protectedIndexes.add(pageIndex);
+    });
+    return protectedIndexes;
+  }
+
+  function isCurrentComicPageLoad(
+    loadGeneration,
+    currentGeneration,
+    entry,
+    currentEntry
+  ) {
+    return loadGeneration === currentGeneration && entry === currentEntry;
+  }
+
+  return {
+    isComicImageName: isComicImageName,
+    sortComicPageNames: sortComicPageNames,
+    patchCbrWorkerSource: patchCbrWorkerSource,
+    getComicPreviewSize: getComicPreviewSize,
+    getComicPageAspectRatio: getComicPageAspectRatio,
+    getProtectedComicPageIndexes: getProtectedComicPageIndexes,
+    isCurrentComicPageLoad: isCurrentComicPageLoad,
+  };
+});
+
+    </script>
+<!-- @papyrus-comic-runtime:end -->
     <script>
       (function () {
-        const viewer = document.getElementById("viewer");
+        const viewer = document.getElementById('viewer');
         const DEFAULT_FONT_SIZE = 16;
         const TEXT_PAGE_CHUNK = 1600;
 
@@ -20410,27 +20522,116 @@ https://github.com/nodeca/pako/blob/main/LICENSE
         let currentPage = 1;
         let pageCount = 0;
         let zoom = 1.0;
+        let rotation = 0;
+        let comicArchive = null;
+        let comicEntries = [];
+        let comicContainer = null;
+        let comicPages = [];
+        let comicObserver = null;
+        let comicScrollFrame = null;
+        const comicObjectUrls = new Map();
+        const comicLoading = new Map();
+        const comicDimensions = new Map();
+        const comicPreviewCache = new Map();
+        const comicPreviewLoading = new Map();
+        const COMIC_CACHE_LIMIT = 16;
+        const COMIC_PREVIEW_CACHE_LIMIT = 8;
+        const comicHelpers = window.PapyrusComicRuntime || {};
+        const runtimeConfig = window.__PAPYRUS_RUNTIME_CONFIG__ || {};
+        let comicDispose = null;
+        let comicGeneration = 0;
 
         const sendMessage = (payload) => {
-          if (
-            window.ReactNativeWebView &&
-            window.ReactNativeWebView.postMessage
-          ) {
+          if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
             window.ReactNativeWebView.postMessage(JSON.stringify(payload));
             return;
           }
           if (window.parent && window.parent !== window) {
-            window.parent.postMessage(payload, "*");
+            window.parent.postMessage(payload, '*');
           }
         };
 
         const sendResponse = (id, ok, data, error) => {
-          sendMessage({ type: "response", id, ok, data, error });
+          sendMessage({ type: 'response', id, ok, data, error });
+        };
+
+        const runtimeAssetRequests = new Map();
+        const fileChunkRequests = new Map();
+
+        const requestRuntimeAsset = (url, encoding) =>
+          new Promise((resolve, reject) => {
+            const id = \`runtime-asset-\${Date.now()}-\${Math.random()}\`;
+            const timeout = setTimeout(() => {
+              runtimeAssetRequests.delete(id);
+              reject(new Error(\`Tempo esgotado ao carregar asset CBR: \${url}\`));
+            }, 15000);
+            runtimeAssetRequests.set(id, {resolve, reject, timeout});
+            sendMessage({type: 'asset-request', id, url, encoding});
+          });
+
+        const encodeArrayBufferAsDataUrl = async (buffer) => {
+          const bytes = new Uint8Array(buffer);
+          let binary = '';
+          const chunkSize = 0x8000;
+          for (let offset = 0; offset < bytes.length; offset += chunkSize) {
+            binary += String.fromCharCode(
+              ...bytes.subarray(offset, Math.min(offset + chunkSize, bytes.length)),
+            );
+          }
+          return \`data:application/wasm;base64,\${btoa(binary)}\`;
+        };
+
+        const fetchRuntimeAsset = async (url, encoding) => {
+          try {
+            const response = await fetch(url);
+            if (!response.ok) throw new Error(\`status \${response.status}\`);
+            if (encoding === 'text') return await response.text();
+            return await encodeArrayBufferAsDataUrl(await response.arrayBuffer());
+          } catch {
+            return await requestRuntimeAsset(url, encoding);
+          }
+        };
+
+        const requestLocalFileChunk = (uri, offset, length) =>
+          new Promise((resolve, reject) => {
+            const id = \`file-chunk-\${Date.now()}-\${Math.random()}\`;
+            const timeout = setTimeout(() => {
+              fileChunkRequests.delete(id);
+              reject(new Error(\`Tempo esgotado ao ler arquivo local: \${uri}\`));
+            }, 30000);
+            fileChunkRequests.set(id, {resolve, reject, timeout});
+            sendMessage({type: 'file-chunk-request', id, uri, offset, length});
+          });
+
+        const readLocalFile = async (uri) => {
+          const chunkSize = 1024 * 1024;
+          const chunks = [];
+          let offset = 0;
+          let totalLength = 0;
+          while (true) {
+            const result = await requestLocalFileChunk(uri, offset, chunkSize);
+            const bytes = decodeBase64(result.data || '');
+            if (bytes.length === 0 && !result.done) {
+              throw new Error('Leitura nativa retornou um chunk vazio.');
+            }
+            chunks.push(bytes);
+            totalLength += bytes.length;
+            offset += bytes.length;
+            if (result.done) break;
+          }
+
+          const output = new Uint8Array(totalLength);
+          let outputOffset = 0;
+          chunks.forEach((chunk) => {
+            output.set(chunk, outputOffset);
+            outputOffset += chunk.length;
+          });
+          return output.buffer;
         };
 
         const sendState = (extra) => {
           sendMessage({
-            type: "state",
+            type: 'state',
             payload: {
               pageCount,
               currentPage,
@@ -20441,70 +20642,66 @@ https://github.com/nodeca/pako/blob/main/LICENSE
         };
 
         const sendEvent = (name, payload) => {
-          sendMessage({ type: "event", name, payload });
-        };
-
-        const log = (...args) => {
-          sendEvent("RUNTIME_LOG", {
-            message: args.map((value) => String(value)).join(" "),
-          });
+          sendMessage({ type: 'event', name, payload });
         };
 
         const reportError = (error, context) => {
-          const message =
-            error && error.message ? error.message : String(error);
+          const message = error && error.message ? error.message : String(error);
           const stack = error && error.stack ? error.stack : null;
-          sendEvent("RUNTIME_ERROR", { message, context, stack });
-        };
-
-        const EPUB_OPEN_TIMEOUT_MS = 180000;
-        const EPUB_READY_TIMEOUT_MS = 180000;
-        const EPUB_DISPLAY_TIMEOUT_MS = 30000;
-
-        const withTimeout = async (promise, ms, label) => {
-          let timer = null;
-          try {
-            return await Promise.race([
-              promise,
-              new Promise((_, reject) => {
-                timer = setTimeout(
-                  () => reject(new Error(\`Timeout: \${label}\`)),
-                  ms
-                );
-              }),
-            ]);
-          } finally {
-            if (timer) {
-              clearTimeout(timer);
-            }
-          }
+          sendEvent('RUNTIME_ERROR', { message, context, stack });
         };
 
         const shouldIgnoreError = (error) => {
-          const message =
-            error && error.message ? error.message : String(error || "");
-          return message.includes("ResizeObserver loop");
+          const message = error && error.message ? error.message : String(error || '');
+          return message.includes('ResizeObserver loop');
         };
 
-        window.addEventListener("error", (event) => {
+        window.addEventListener('error', (event) => {
           const error = event.error || event.message;
           if (shouldIgnoreError(error)) return;
-          reportError(error, "window.error");
+          reportError(error, 'window.error');
         });
 
-        window.addEventListener("unhandledrejection", (event) => {
+        window.addEventListener('unhandledrejection', (event) => {
           if (shouldIgnoreError(event.reason)) return;
-          reportError(event.reason, "unhandledrejection");
+          reportError(event.reason, 'unhandledrejection');
         });
 
+        const clearComicState = () => {
+          comicGeneration += 1;
+          if (comicObserver) {
+            comicObserver.disconnect();
+            comicObserver = null;
+          }
+          if (comicScrollFrame !== null) {
+            cancelAnimationFrame(comicScrollFrame);
+            comicScrollFrame = null;
+          }
+          comicObjectUrls.forEach((url) => URL.revokeObjectURL(url));
+          comicObjectUrls.clear();
+          comicLoading.clear();
+          comicDimensions.clear();
+          comicPreviewCache.clear();
+          comicPreviewLoading.clear();
+          if (comicDispose) {
+            void comicDispose();
+            comicDispose = null;
+          }
+          comicArchive = null;
+          comicEntries = [];
+          comicContainer = null;
+          comicPages = [];
+        };
+
         const clearViewer = () => {
+          clearComicState();
           while (viewer.firstChild) {
             viewer.removeChild(viewer.firstChild);
           }
         };
 
         const decodeBase64 = (value) => {
-          const clean = value.replace(/\\s/g, "");
+          const clean = value.replace(/\\s/g, '');
           const binary = atob(clean);
           const len = binary.length;
           const bytes = new Uint8Array(len);
@@ -20516,41 +20713,438 @@ https://github.com/nodeca/pako/blob/main/LICENSE
 
         const decodeBase64ToText = (value) => {
           const bytes = decodeBase64(value);
-          return new TextDecoder("utf-8").decode(bytes);
+          return new TextDecoder('utf-8').decode(bytes);
+        };
+
+        const sourceToArrayBuffer = async (source) => {
+          if (source.kind === 'uri') {
+            if (/^(?:file|content):\\/\\//i.test(source.uri)) {
+              return readLocalFile(source.uri);
+            }
+            const response = await fetch(source.uri);
+            if (!response.ok && response.status !== 0) {
+              throw new Error(\`Falha ao carregar quadrinho (\${response.status})\`);
+            }
+            return response.arrayBuffer();
+          }
+          if (source.kind === 'base64') {
+            return decodeBase64(source.data).buffer;
+          }
+          throw new Error('Fonte de quadrinho inv\xE1lida.');
+        };
+
+        const comicMimeType = (name) => {
+          const extension = name.split('.').pop()?.toLowerCase();
+          if (extension === 'png') return 'image/png';
+          if (extension === 'gif') return 'image/gif';
+          if (extension === 'svg') return 'image/svg+xml';
+          if (extension === 'webp') return 'image/webp';
+          return 'image/jpeg';
         };
 
-        const fetchUriAsArrayBuffer = async (uri) => {
-          const response = await fetch(uri);
-          const ok = response.ok || response.status === 0;
-          if (!ok) {
-            throw new Error(
-              "Failed to fetch epub uri (" + response.status + ")"
+        const updateComicCurrentPage = () => {
+          if (!comicContainer || comicPages.length === 0) return;
+          const viewportTop = comicContainer.scrollTop;
+          let closestIndex = currentPage - 1;
+          let closestDistance = Number.POSITIVE_INFINITY;
+          comicPages.forEach((page, index) => {
+            const distance = Math.abs(page.offsetTop - viewportTop);
+            if (distance < closestDistance) {
+              closestDistance = distance;
+              closestIndex = index;
+            }
+          });
+          const nextPage = Math.max(1, Math.min(pageCount, closestIndex + 1));
+          if (nextPage !== currentPage) {
+            currentPage = nextPage;
+            sendState();
+          }
+        };
+
+        const scheduleComicCurrentPage = () => {
+          if (comicScrollFrame !== null) return;
+          comicScrollFrame = requestAnimationFrame(() => {
+            comicScrollFrame = null;
+            updateComicCurrentPage();
+          });
+        };
+
+        const evictComicUrls = () => {
+          if (comicObjectUrls.size <= COMIC_CACHE_LIMIT) return;
+          const protectedIndexes = new Set([
+            currentPage - 1,
+            currentPage,
+            currentPage - 2,
+          ]);
+          for (const [index, url] of comicObjectUrls) {
+            if (comicObjectUrls.size <= COMIC_CACHE_LIMIT) break;
+            if (protectedIndexes.has(index)) continue;
+            URL.revokeObjectURL(url);
+            comicObjectUrls.delete(index);
+            const image = comicPages[index]?.querySelector('img');
+            const page = comicPages[index];
+            const dimensions = comicDimensions.get(index);
+            const width = dimensions?.width || image?.naturalWidth || 0;
+            const height = dimensions?.height || image?.naturalHeight || 0;
+            if (page && width > 0 && height > 0) {
+              page.style.aspectRatio = comicHelpers.getComicPageAspectRatio(
+                width,
+                height
+              );
+            }
+            if (image) image.removeAttribute('src');
+          }
+        };
+
+        const ensureComicPage = async (pageIndex) => {
+          if (comicObjectUrls.has(pageIndex)) {
+            const image = comicPages[pageIndex]?.querySelector('img');
+            if (image && !image.src) image.src = comicObjectUrls.get(pageIndex);
+            return comicObjectUrls.get(pageIndex);
+          }
+          if (comicLoading.has(pageIndex)) return comicLoading.get(pageIndex);
+
+          const entry = comicEntries[pageIndex];
+          if (!entry) throw new Error(\`P\xE1gina de quadrinho inv\xE1lida: \${pageIndex}\`);
+          const loadGeneration = comicGeneration;
+          const pending = entry.async('blob').then((blob) => {
+            if (
+              !comicHelpers.isCurrentComicPageLoad(
+                loadGeneration,
+                comicGeneration,
+                entry,
+                comicEntries[pageIndex]
+              )
+            ) {
+              return null;
+            }
+            const url = URL.createObjectURL(
+              new Blob([blob], { type: comicMimeType(entry.name) })
             );
+            comicObjectUrls.set(pageIndex, url);
+            const image = comicPages[pageIndex]?.querySelector('img');
+            if (image) image.src = url;
+            evictComicUrls();
+            return url;
+          });
+          comicLoading.set(pageIndex, pending);
+          try {
+            return await pending;
+          } finally {
+            if (comicLoading.get(pageIndex) === pending) {
+              comicLoading.delete(pageIndex);
+            }
           }
-          if (typeof response.arrayBuffer === "function") {
-            return response.arrayBuffer();
+        };
+
+        const renderComicPage = (pageIndex) => {
+          const image = comicPages[pageIndex]?.querySelector('img');
+          if (!image) return;
+          image.style.width = \`\${Math.max(40, Math.round(100 * zoom))}%\`;
+          image.style.transform = \`rotate(\${rotation}deg)\`;
+        };
+
+        const applyComicLayout = () => {
+          comicPages.forEach((_, pageIndex) => renderComicPage(pageIndex));
+        };
+
+        const loadComic = async (source, format) => {
+          clearViewer();
+          let entries;
+          if (format === 'cbr') {
+            const clientUrl = runtimeConfig.cbrClientUrl;
+            const workerUrl = runtimeConfig.cbrWorkerUrl;
+            const wasmUrl = runtimeConfig.cbrWasmUrl;
+            if (!clientUrl || !workerUrl || !wasmUrl) {
+              throw new Error(
+                'CBR no mobile exige o pacote opcional de runtime libarchive.'
+              );
+            }
+
+            const [clientSource, workerSource, wasmSource] = await Promise.all([
+              fetchRuntimeAsset(clientUrl, 'text'),
+              fetchRuntimeAsset(workerUrl, 'text'),
+              runtimeConfig.cbrWasmDataUrl ||
+                fetchRuntimeAsset(wasmUrl, 'base64'),
+            ]);
+            const patchedWorkerSource = comicHelpers.patchCbrWorkerSource(
+              workerSource,
+              wasmSource
+            );
+            const workerObjectUrl = URL.createObjectURL(
+              new Blob([patchedWorkerSource], {type: 'text/javascript'})
+            );
+            const clientObjectUrl = URL.createObjectURL(
+              new Blob([clientSource], { type: 'text/javascript' })
+            );
+            try {
+              const archiveModule = await import(clientObjectUrl);
+              const createCbrWorker = () => {
+                const worker = new Worker(workerObjectUrl, {type: 'module'});
+                worker.addEventListener('error', (event) => {
+                  sendEvent('RUNTIME_ERROR', {
+                    message: \`CBR worker: \${event?.message || 'falha ao executar o worker'}\`,
+                    context: 'comic.worker',
+                  });
+                });
+                worker.addEventListener('messageerror', () => {
+                  sendEvent('RUNTIME_ERROR', {
+                    message: 'CBR worker: falha ao transferir mensagem',
+                    context: 'comic.worker',
+                  });
+                });
+                return worker;
+              };
+              archiveModule.Archive.init({getWorker: createCbrWorker});
+              const bytes = await sourceToArrayBuffer(source);
+              const file = new Blob([bytes], {
+                type: 'application/vnd.comicbook-rar',
+              });
+              const archive = await archiveModule.Archive.open(file);
+              const files = await archive.getFilesArray();
+              entries = files
+                .filter(
+                  (item) => {
+                    const name = \`\${item?.path || ''}\${item?.file?.name || ''}\`;
+                    return item?.file && comicHelpers.isComicImageName(name);
+                  }
+                )
+                .map((item) => {
+                  const name = \`\${item.path || ''}\${item.file.name}\`;
+                  return {
+                    name,
+                    async: async () => item.file.extract(),
+                  };
+                });
+              comicDispose = async () => {
+                await archive.close();
+                URL.revokeObjectURL(workerObjectUrl);
+                URL.revokeObjectURL(clientObjectUrl);
+              };
+            } catch (error) {
+              URL.revokeObjectURL(workerObjectUrl);
+              URL.revokeObjectURL(clientObjectUrl);
+              throw error;
+            }
+          } else {
+            if (!window.JSZip) {
+              throw new Error('O runtime ZIP do leitor mobile n\xE3o foi carregado.');
+            }
+
+            const bytes = await sourceToArrayBuffer(source);
+            comicArchive = await window.JSZip.loadAsync(bytes);
+            entries = Object.keys(comicArchive.files)
+              .filter((name) => {
+                const entry = comicArchive.files[name];
+                return !entry.dir && comicHelpers.isComicImageName(name);
+              })
+              .map((name) => comicArchive.files[name]);
           }
-          const blob = await response.blob();
-          return new Promise((resolve, reject) => {
+
+          const names = comicHelpers.sortComicPageNames(
+            entries.map((entry) => entry.name)
+          );
+          const entriesByName = new Map(entries.map((entry) => [entry.name, entry]));
+          comicEntries = names.map((name) => entriesByName.get(name));
+          if (comicEntries.length === 0) {
+            if (comicDispose) {
+              await comicDispose();
+              comicDispose = null;
+            }
+            throw new Error('O arquivo n\xE3o cont\xE9m p\xE1ginas de imagem.');
+          }
+
+          comicContainer = document.createElement('div');
+          comicContainer.style.width = '100%';
+          comicContainer.style.height = '100%';
+          comicContainer.style.overflow = 'auto';
+          comicContainer.style.padding = '16px 0 120px';
+          comicContainer.style.boxSizing = 'border-box';
+          comicContainer.style.background = '#ffffff';
+          comicContainer.addEventListener('scroll', scheduleComicCurrentPage, {
+            passive: true,
+          });
+          viewer.style.overflow = 'hidden';
+          viewer.appendChild(comicContainer);
+
+          comicPages = comicEntries.map((entry, pageIndex) => {
+            const page = document.createElement('div');
+            page.dataset.pageIndex = String(pageIndex);
+            page.style.width = '100%';
+            page.style.minHeight = '80px';
+            page.style.display = 'flex';
+            page.style.justifyContent = 'center';
+            page.style.alignItems = 'flex-start';
+            page.style.padding = '0 12px 20px';
+            page.style.boxSizing = 'border-box';
+
+            const image = document.createElement('img');
+            image.alt = \`P\xE1gina \${pageIndex + 1}\`;
+            image.draggable = false;
+            image.decoding = 'async';
+            image.loading = 'lazy';
+            image.style.display = 'block';
+            image.style.maxWidth = 'none';
+            image.style.height = 'auto';
+            image.style.userSelect = 'none';
+            image.addEventListener('load', () => {
+              if (image.naturalWidth > 0 && image.naturalHeight > 0) {
+                comicDimensions.set(pageIndex, {
+                  width: image.naturalWidth,
+                  height: image.naturalHeight,
+                });
+                page.style.aspectRatio = comicHelpers.getComicPageAspectRatio(
+                  image.naturalWidth,
+                  image.naturalHeight
+                );
+              }
+            });
+            page.appendChild(image);
+            comicContainer.appendChild(page);
+            return page;
+          });
+
+          if (typeof IntersectionObserver === 'function') {
+            comicObserver = new IntersectionObserver(
+              (observations) => {
+                observations.forEach((observation) => {
+                  if (!observation.isIntersecting) return;
+                  const pageIndex = Number(observation.target.dataset.pageIndex);
+                  void ensureComicPage(pageIndex).catch((error) =>
+                    sendEvent('RUNTIME_ERROR', {
+                      message: error?.message || String(error),
+                      context: 'comic.page',
+                    })
+                  );
+                });
+                scheduleComicCurrentPage();
+              },
+              { root: comicContainer, rootMargin: '600px 0px' }
+            );
+            comicPages.forEach((page) => comicObserver.observe(page));
+          } else {
+            for (let pageIndex = 0; pageIndex < Math.min(3, comicPages.length); pageIndex += 1) {
+              void ensureComicPage(pageIndex);
+            }
+          }
+          pageCount = comicPages.length;
+          currentPage = 1;
+          await ensureComicPage(0);
+          applyComicLayout();
+          return { pageCount };
+        };
+
+        const readComicBlobAsDataUrl = (blob, mimeType) =>
+          new Promise((resolve, reject) => {
             const reader = new FileReader();
-            reader.onerror = () =>
-              reject(new Error("Failed to read epub blob"));
+            reader.onerror = () => reject(new Error('Falha ao gerar preview.'));
             reader.onload = () => resolve(reader.result);
-            reader.readAsArrayBuffer(blob);
+            reader.readAsDataURL(new Blob([blob], { type: mimeType }));
           });
+
+        const createComicPagePreview = async (pageIndex) => {
+          const entry = comicEntries[pageIndex];
+          if (!entry) return null;
+          const mimeType = comicMimeType(entry.name);
+          const sourceUrl = await ensureComicPage(pageIndex);
+          if (!sourceUrl) return null;
+          try {
+            const image = new Image();
+            image.decoding = 'async';
+            await new Promise((resolve, reject) => {
+              image.onload = resolve;
+              image.onerror = () => reject(new Error('Falha ao decodificar preview.'));
+              image.src = sourceUrl;
+            });
+            const size = comicHelpers.getComicPreviewSize(
+              image.naturalWidth || image.width,
+              image.naturalHeight || image.height
+            );
+            const canvas = document.createElement('canvas');
+            canvas.width = size.width;
+            canvas.height = size.height;
+            const context = canvas.getContext('2d');
+            if (!context) throw new Error('Canvas indispon\xEDvel para preview.');
+            context.fillStyle = '#ffffff';
+            context.fillRect(0, 0, size.width, size.height);
+            context.drawImage(image, 0, 0, size.width, size.height);
+            return canvas.toDataURL('image/jpeg', 0.78);
+          } catch {
+            try {
+              const response = await fetch(sourceUrl);
+              const blob = await response.blob();
+              return await readComicBlobAsDataUrl(blob, mimeType);
+            } catch {
+              return null;
+            }
+          }
+        };
+
+        const getComicPagePreview = async (pageIndex) => {
+          const entry = comicEntries[pageIndex];
+          if (!entry) return null;
+          if (comicPreviewCache.has(pageIndex)) {
+            return comicPreviewCache.get(pageIndex);
+          }
+          if (comicPreviewLoading.has(pageIndex)) {
+            return comicPreviewLoading.get(pageIndex);
+          }
+          const loadGeneration = comicGeneration;
+          const pending = createComicPagePreview(pageIndex).then((preview) => {
+            if (
+              !comicHelpers.isCurrentComicPageLoad(
+                loadGeneration,
+                comicGeneration,
+                entry,
+                comicEntries[pageIndex]
+              )
+            ) {
+              return null;
+            }
+            comicPreviewCache.set(pageIndex, preview);
+            while (comicPreviewCache.size > COMIC_PREVIEW_CACHE_LIMIT) {
+              comicPreviewCache.delete(comicPreviewCache.keys().next().value);
+            }
+            return preview;
+          });
+          comicPreviewLoading.set(pageIndex, pending);
+          try {
+            return await pending;
+          } finally {
+            if (comicPreviewLoading.get(pageIndex) === pending) {
+              comicPreviewLoading.delete(pageIndex);
+            }
+          }
+        };
+
+        const getComicPageDimensions = async (pageIndex) => {
+          const known = comicDimensions.get(pageIndex);
+          if (known) return known;
+          await ensureComicPage(pageIndex);
+          const image = comicPages[pageIndex]?.querySelector('img');
+          if (image && !image.complete) {
+            await new Promise((resolve) => {
+              image.addEventListener('load', resolve, { once: true });
+              image.addEventListener('error', resolve, { once: true });
+            });
+          }
+          return (
+            comicDimensions.get(pageIndex) || {
+              width: image?.naturalWidth || 0,
+              height: image?.naturalHeight || 0,
+            }
+          );
         };
 
         const normalizeHref = (href) => {
-          if (!href) return "";
-          return href.split("#")[0];
+          if (!href) return '';
+          return href.split('#')[0];
         };
 
         const getSpineIndexByHref = (href) => {
           const normalized = normalizeHref(href);
           if (!normalized) return -1;
-          return spineItems.findIndex(
-            (item) => normalizeHref(item.href) === normalized
-          );
+          return spineItems.findIndex((item) => normalizeHref(item.href) === normalized);
         };
 
         const buildOutline = async () => {
@@ -20559,11 +21153,9 @@ https://github.com/nodeca/pako/blob/main/LICENSE
           const toc = nav && nav.toc ? nav.toc : [];
 
           const mapItem = (item) => {
-            const title = item.label || item.title || "";
-            const pageIndex = getSpineIndexByHref(item.href || "");
-            const children = Array.isArray(item.subitems)
-              ? item.subitems.map(mapItem)
-              : [];
+            const title = item.label || item.title || '';
+            const pageIndex = getSpineIndexByHref(item.href || '');
+            const children = Array.isArray(item.subitems) ? item.subitems.map(mapItem) : [];
             const outlineItem = { title, pageIndex };
             if (children.length > 0) outlineItem.children = children;
             return outlineItem;
@@ -20575,10 +21167,10 @@ https://github.com/nodeca/pako/blob/main/LICENSE
         const applyEpubZoom = () => {
           if (!rendition || !rendition.themes) return;
           const fontSize = \`\${Math.round(zoom * 100)}%\`;
-          if (typeof rendition.themes.fontSize === "function") {
+          if (typeof rendition.themes.fontSize === 'function') {
             rendition.themes.fontSize(fontSize);
-          } else if (typeof rendition.themes.override === "function") {
-            rendition.themes.override("font-size", fontSize);
+          } else if (typeof rendition.themes.override === 'function') {
+            rendition.themes.override('font-size', fontSize);
           }
         };
 
@@ -20589,14 +21181,13 @@ https://github.com/nodeca/pako/blob/main/LICENSE
         };
 
         const renderTextPage = (pageIndex) => {
-          const text = textPages[pageIndex] || "";
+          const text = textPages[pageIndex] || '';
           if (!textContainer) {
-            textContainer = document.createElement("div");
-            textContainer.style.padding = "24px";
-            textContainer.style.lineHeight = "1.6";
-            textContainer.style.whiteSpace = "pre-wrap";
-            textContainer.style.fontFamily =
-              'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
+            textContainer = document.createElement('div');
+            textContainer.style.padding = '24px';
+            textContainer.style.lineHeight = '1.6';
+            textContainer.style.whiteSpace = 'pre-wrap';
+            textContainer.style.fontFamily = 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
             viewer.appendChild(textContainer);
           }
           textContainer.textContent = text;
@@ -20608,18 +21199,18 @@ https://github.com/nodeca/pako/blob/main/LICENSE
           for (let i = 0; i < text.length; i += TEXT_PAGE_CHUNK) {
             pages.push(text.slice(i, i + TEXT_PAGE_CHUNK));
           }
-          return pages.length > 0 ? pages : [""];
+          return pages.length > 0 ? pages : [''];
         };
 
         const loadText = async (source) => {
-          let text = "";
-          if (source.kind === "uri") {
+          let text = '';
+          if (source.kind === 'uri') {
             const res = await fetch(source.uri);
             text = await res.text();
-          } else if (source.kind === "base64") {
+          } else if (source.kind === 'base64') {
             text = decodeBase64ToText(source.data);
-          } else if (source.kind === "text") {
-            text = source.text || "";
+          } else if (source.kind === 'text') {
+            text = source.text || '';
           }
 
           clearViewer();
@@ -20632,44 +21223,25 @@ https://github.com/nodeca/pako/blob/main/LICENSE
         };
 
         const loadEpub = async (source) => {
-          log("epub.load:start", source.kind);
-          if (rendition && typeof rendition.destroy === "function") {
+          if (rendition && typeof rendition.destroy === 'function') {
             rendition.destroy();
           }
-          if (book && typeof book.destroy === "function") {
+          if (book && typeof book.destroy === 'function') {
             book.destroy();
           }
 
-          if (source.kind === "base64") {
-            book = ePub();
-            await withTimeout(
-              book.open(source.data, "base64"),
-              EPUB_OPEN_TIMEOUT_MS,
-              "epub.open"
-            );
-          } else if (source.kind === "uri") {
-            log("epub.load:fetch-uri");
-            const data = await withTimeout(
-              fetchUriAsArrayBuffer(source.uri),
-              EPUB_OPEN_TIMEOUT_MS,
-              "epub.fetch"
-            );
-            const input = data instanceof Uint8Array ? data.buffer : data;
-            book = ePub(input, { openAs: "epub" });
-          } else {
-            let data = null;
-            if (source.kind === "text") {
-              const encoder = new TextEncoder();
-              data = encoder.encode(source.text || "").buffer;
-            }
-            const input = data instanceof Uint8Array ? data.buffer : data;
-            book = ePub(input, { openAs: "epub" });
-          }
-          if (book && book.opened) {
-            await withTimeout(book.opened, EPUB_OPEN_TIMEOUT_MS, "epub.opened");
+          let data = null;
+          if (source.kind === 'uri') {
+            data = source.uri;
+          } else if (source.kind === 'base64') {
+            data = decodeBase64(source.data);
+          } else if (source.kind === 'text') {
+            const encoder = new TextEncoder();
+            data = encoder.encode(source.text || '').buffer;
           }
-          await withTimeout(book.ready, EPUB_READY_TIMEOUT_MS, "epub.ready");
-          log("epub.load:ready");
+
+          book = ePub(data);
+          await book.ready;
 
           spineItems = book.spine && book.spine.items ? book.spine.items : [];
           pageCount = spineItems.length;
@@ -20677,64 +21249,38 @@ https://github.com/nodeca/pako/blob/main/LICENSE
 
           clearViewer();
           rendition = book.renderTo(viewer, {
-            width: "100%",
-            height: "100%",
-            flow: "paginated",
-            spread: "none",
+            width: '100%',
+            height: '100%',
+            flow: 'paginated',
+            spread: 'none',
           });
 
           if (rendition && rendition.hooks && rendition.hooks.content) {
             rendition.hooks.content.register((contents) => {
-              const frame =
-                contents && contents.document
-                  ? contents.document.defaultView.frameElement
-                  : null;
+              const frame = contents && contents.document ? contents.document.defaultView.frameElement : null;
               if (frame) {
-                frame.setAttribute(
-                  "sandbox",
-                  "allow-scripts allow-same-origin"
-                );
+                frame.setAttribute('sandbox', 'allow-scripts allow-same-origin');
               }
             });
           }
 
-          if (rendition && typeof rendition.on === "function") {
-            rendition.on("selected", (cfiRange, contents) => {
-              const selection =
-                contents && contents.window
-                  ? contents.window.getSelection()
-                  : null;
-              const text = selection ? selection.toString().trim() : "";
+          if (rendition && typeof rendition.on === 'function') {
+            rendition.on('selected', (cfiRange, contents) => {
+              const selection = contents && contents.window ? contents.window.getSelection() : null;
+              const text = selection ? selection.toString().trim() : '';
               if (text) {
-                sendEvent("TEXT_SELECTED", {
-                  text,
-                  pageIndex: Math.max(0, currentPage - 1),
-                });
+                sendEvent('TEXT_SELECTED', { text, pageIndex: Math.max(0, currentPage - 1) });
               }
-              if (
-                rendition &&
-                rendition.annotations &&
-                typeof rendition.annotations.remove === "function"
-              ) {
-                rendition.annotations.remove(cfiRange, "highlight");
+              if (rendition && rendition.annotations && typeof rendition.annotations.remove === 'function') {
+                rendition.annotations.remove(cfiRange, 'highlight');
               }
             });
           }
 
-          try {
-            await withTimeout(
-              displayEpubPage(0),
-              EPUB_DISPLAY_TIMEOUT_MS,
-              "epub.display"
-            );
-            log("epub.load:displayed");
-          } catch (err) {
-            reportError(err, "epub.display");
-          }
+          await displayEpubPage(0);
           applyEpubZoom();
 
           const outline = await buildOutline();
-          log("epub.load:outline", outline.length);
           return { pageCount, outline };
         };
 
@@ -20749,41 +21295,34 @@ https://github.com/nodeca/pako/blob/main/LICENSE
         };
 
         const getTextContent = async (pageIndex) => {
-          if (currentType === "text") {
-            const text = textPages[pageIndex] || "";
-            return [
-              {
-                str: text,
-                dir: "ltr",
-                width: 0,
-                height: 0,
-                transform: [1, 0, 0, 1, 0, 0],
-                fontName: "default",
-              },
-            ];
+          if (currentType === 'text') {
+            const text = textPages[pageIndex] || '';
+            return [{
+              str: text,
+              dir: 'ltr',
+              width: 0,
+              height: 0,
+              transform: [1, 0, 0, 1, 0, 0],
+              fontName: 'default',
+            }];
           }
 
-          if (currentType === "epub") {
+          if (currentType === 'epub') {
             if (!book) return [];
             const item = spineItems[pageIndex];
             if (!item) return [];
             try {
               const section = book.spine.get(item.idref || item.href);
-              const text =
-                section && typeof section.text === "function"
-                  ? await section.text()
-                  : "";
+              const text = section && typeof section.text === 'function' ? await section.text() : '';
               if (!text) return [];
-              return [
-                {
-                  str: text,
-                  dir: "ltr",
-                  width: 0,
-                  height: 0,
-                  transform: [1, 0, 0, 1, 0, 0],
-                  fontName: "default",
-                },
-              ];
+              return [{
+                str: text,
+                dir: 'ltr',
+                width: 0,
+                height: 0,
+                transform: [1, 0, 0, 1, 0, 0],
+                fontName: 'default',
+              }];
             } catch (err) {
               return [];
             }
@@ -20794,7 +21333,7 @@ https://github.com/nodeca/pako/blob/main/LICENSE
 
         const getPageText = async (pageIndex) => {
           const items = await getTextContent(pageIndex);
-          return items.map((item) => item.str).join(" ");
+          return items.map((item) => item.str).join(' ');
         };
 
         const searchText = async (query) => {
@@ -20810,11 +21349,7 @@ https://github.com/nodeca/pako/blob/main/LICENSE
             while (pos !== -1) {
               const start = Math.max(0, pos - 20);
               const end = Math.min(text.length, pos + query.length + 20);
-              results.push({
-                pageIndex: i,
-                text: text.substring(start, end),
-                matchIndex,
-              });
+              results.push({ pageIndex: i, text: text.substring(start, end), matchIndex });
               matchIndex += 1;
               pos = lower.indexOf(normalized, pos + 1);
             }
@@ -20830,11 +21365,11 @@ https://github.com/nodeca/pako/blob/main/LICENSE
 
         const getPageIndex = (dest) => {
           if (!dest) return null;
-          if (typeof dest === "string") return getSpineIndexByHref(dest);
-          if (typeof dest !== "object") return null;
-          if (dest.kind === "href") return getSpineIndexByHref(dest.value);
-          if (dest.kind === "pageIndex") return dest.value;
-          if (dest.kind === "pageNumber") return Math.max(0, dest.value - 1);
+          if (typeof dest === 'string') return getSpineIndexByHref(dest);
+          if (typeof dest !== 'object') return null;
+          if (dest.kind === 'href') return getSpineIndexByHref(dest.value);
+          if (dest.kind === 'pageIndex') return dest.value;
+          if (dest.kind === 'pageNumber') return Math.max(0, dest.value - 1);
           return null;
         };
 
@@ -20848,53 +21383,70 @@ https://github.com/nodeca/pako/blob/main/LICENSE
         };
 
         const applyZoom = () => {
-          if (currentType === "text") {
+          if (currentType === 'text') {
             applyTextZoom();
-          } else if (currentType === "epub") {
+          } else if (currentType === 'epub') {
             applyEpubZoom();
+          } else if (currentType === 'comic') {
+            applyComicLayout();
           }
         };
 
         const handleCommand = async (message) => {
           const { id, kind, payload } = message;
-          log("command", kind);
 
           try {
-            if (kind === "load") {
+            if (kind === 'load') {
               currentType = payload.type;
               zoom = 1.0;
 
-              if (currentType === "text") {
+              if (currentType === 'text') {
                 const result = await loadText(payload.source);
                 sendState();
                 sendResponse(id, true, result);
                 return;
               }
 
-              if (currentType === "epub") {
+              if (currentType === 'epub') {
                 const result = await loadEpub(payload.source);
                 sendState({ outline: result.outline || [] });
                 sendResponse(id, true, result);
                 return;
               }
 
-              throw new Error("Unsupported document type");
+              if (currentType === 'comic') {
+                const result = await loadComic(payload.source, payload.format || 'cbz');
+                sendState();
+                sendResponse(id, true, result);
+                return;
+              }
+
+              throw new Error('Unsupported document type');
             }
 
-            if (kind === "go-to-page") {
+            if (kind === 'go-to-page') {
               const page = Math.max(1, payload.page || 1);
-              if (currentType === "text") {
+              if (currentType === 'text') {
                 currentPage = page;
                 renderTextPage(page - 1);
                 sendState();
-              } else if (currentType === "epub") {
+              } else if (currentType === 'epub') {
                 await displayEpubPage(page - 1);
+              } else if (currentType === 'comic') {
+                currentPage = page;
+                const target = comicPages[page - 1];
+                if (target) {
+                  await ensureComicPage(page - 1);
+                  target.scrollIntoView({ block: 'start' });
+                  renderComicPage(page - 1);
+                  sendState();
+                }
               }
               sendResponse(id, true, { currentPage });
               return;
             }
 
-            if (kind === "set-zoom") {
+            if (kind === 'set-zoom') {
               zoom = Math.max(0.5, Math.min(4.0, payload.zoom || 1.0));
               applyZoom();
               sendState();
@@ -20902,103 +21454,132 @@ https://github.com/nodeca/pako/blob/main/LICENSE
               return;
             }
 
-            if (kind === "set-rotation") {
+            if (kind === 'set-rotation') {
+              rotation = ((payload.rotation || 0) % 360 + 360) % 360;
+              if (currentType === 'comic') applyComicLayout();
               sendResponse(id, true, {});
               return;
             }
 
-            if (kind === "get-text-content") {
+            if (kind === 'get-text-content') {
               const items = await getTextContent(payload.pageIndex || 0);
               sendResponse(id, true, items);
               return;
             }
 
-            if (kind === "get-page-dimensions") {
-              sendResponse(id, true, getPageDimensions());
+            if (kind === 'get-page-dimensions') {
+              if (currentType === 'comic') {
+                sendResponse(
+                  id,
+                  true,
+                  await getComicPageDimensions(payload.pageIndex || 0)
+                );
+              } else {
+                sendResponse(id, true, getPageDimensions());
+              }
               return;
             }
 
-            if (kind === "search-text") {
-              const results = await searchText(payload.query || "");
+            if (kind === 'get-page-preview') {
+              if (currentType !== 'comic') {
+                sendResponse(id, true, null);
+                return;
+              }
+              sendResponse(
+                id,
+                true,
+                await getComicPagePreview(payload.pageIndex || 0)
+              );
+              return;
+            }
+
+            if (kind === 'search-text') {
+              const results = await searchText(payload.query || '');
               sendResponse(id, true, results);
               return;
             }
 
-            if (kind === "select-text") {
+            if (kind === 'select-text') {
               const selection = await selectText(payload.pageIndex || 0);
               sendResponse(id, true, selection);
               return;
             }
 
-            if (kind === "get-outline") {
+            if (kind === 'get-outline') {
               const outline = await buildOutline();
               sendResponse(id, true, outline);
               return;
             }
 
-            if (kind === "get-page-index") {
+            if (kind === 'get-page-index') {
               const index = getPageIndex(payload.dest);
               sendResponse(id, true, index);
               return;
             }
 
-            if (kind === "destroy") {
+            if (kind === 'destroy') {
               clearViewer();
               sendResponse(id, true, {});
               return;
             }
 
-            sendResponse(id, false, null, "Unknown command");
+            sendResponse(id, false, null, 'Unknown command');
           } catch (err) {
-            sendResponse(
-              id,
-              false,
-              null,
-              err && err.message ? err.message : String(err)
-            );
+            sendResponse(id, false, null, err && err.message ? err.message : String(err));
           }
         };
 
         const onMessage = (event) => {
           let message = null;
-          const raw = event && typeof event === "object" ? event.data : null;
+          const raw = event && typeof event === 'object' ? event.data : null;
 
-          if (raw && typeof raw === "object" && raw.kind && raw.id) {
+          if (raw && typeof raw === 'object' && (raw.kind || raw.type) && raw.id) {
             message = raw;
-          } else if (typeof raw === "string") {
-            if (raw.startsWith("setImmediate$")) {
-              return;
-            }
+          } else if (typeof raw === 'string') {
+            if (raw.startsWith('setImmediate$')) return;
             const trimmed = raw.trim();
-            if (
-              !trimmed ||
-              (!trimmed.startsWith("{") && !trimmed.startsWith("["))
-            ) {
+            if (!trimmed || (!trimmed.startsWith('{') && !trimmed.startsWith('['))) {
               return;
             }
             try {
               message = JSON.parse(trimmed);
             } catch (err) {
-              sendEvent("RUNTIME_ERROR", {
-                message: "Failed to parse message",
-                context: "runtime.onMessage",
-                stack: err && err.stack ? err.stack : null,
-                preview: trimmed.slice(0, 200),
-              });
               return;
             }
           } else {
             return;
           }
 
-          if (!message || !message.kind || message.id == null) return;
-          handleCommand(message);
+        if (!message || message.id == null) return;
+
+        if (message.type === 'asset-response') {
+          const pending = runtimeAssetRequests.get(message.id);
+          if (!pending) return;
+          runtimeAssetRequests.delete(message.id);
+          clearTimeout(pending.timeout);
+          if (message.ok) pending.resolve(message.data);
+          else pending.reject(new Error(message.error || 'Falha ao carregar asset CBR.'));
+          return;
+        }
+
+        if (message.type === 'file-chunk-response') {
+          const pending = fileChunkRequests.get(message.id);
+          if (!pending) return;
+          fileChunkRequests.delete(message.id);
+          clearTimeout(pending.timeout);
+          if (message.ok) pending.resolve(message);
+          else pending.reject(new Error(message.error || 'Falha ao ler arquivo local.'));
+          return;
+        }
+
+        if (!message.kind) return;
+        handleCommand(message);
         };
 
-        window.addEventListener("message", onMessage);
-        document.addEventListener("message", onMessage);
+        window.addEventListener('message', onMessage);
+        document.addEventListener('message', onMessage);
 
-        sendMessage({ type: "ready" });
+        sendMessage({ type: 'ready' });
       })();
     </script>
   </body>
@@ -21013,7 +21594,7 @@ import {
   useRef as useRef4,
   useEffect as useEffect4,
   useCallback as useCallback3,
-  useState as useState3
+  useState as useState4
 } from "react";
 import {
   FlatList,
@@ -23004,33 +23585,104 @@ var arePageRendererPropsEqual = (previous, next) => previous.engine === next.eng
 var PageRenderer_default = memo(PageRenderer, arePageRendererPropsEqual);
 
 // components/WebViewViewer.tsx
-import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 import { Image, StyleSheet as StyleSheet2, View as View2 } from "react-native";
 import WebView from "react-native-webview";
 import { useViewerStore as useViewerStore2 } from "@papyrus-sdk/core";
+
+// components/webViewState.ts
+var parseWebViewState = (raw) => {
+  try {
+    const message = JSON.parse(raw);
+    if (!message || typeof message !== "object") return null;
+    const typedMessage = message;
+    if (typedMessage.type !== "state") return null;
+    if (!typedMessage.payload || typeof typedMessage.payload !== "object") {
+      return null;
+    }
+    const payload = typedMessage.payload;
+    const update = {};
+    if (typeof payload.currentPage === "number" && Number.isInteger(payload.currentPage) && payload.currentPage >= 1) {
+      update.currentPage = payload.currentPage;
+    }
+    if (typeof payload.pageCount === "number" && Number.isInteger(payload.pageCount) && payload.pageCount >= 0) {
+      update.pageCount = payload.pageCount;
+    }
+    return Object.keys(update).length > 0 ? update : null;
+  } catch {
+    return null;
+  }
+};
+
+// components/WebViewViewer.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var runtimeAsset = require_runtime();
-var runtimeSource = (() => {
-  if (typeof runtimeAsset === "string") {
-    return { html: runtimeAsset };
+var resolveRuntimeSource = (asset) => {
+  if (typeof asset === "string") {
+    return { html: asset };
   }
-  if (typeof runtimeAsset === "number") {
-    const resolved = Image.resolveAssetSource(runtimeAsset);
+  if (typeof asset === "number") {
+    const resolved = Image.resolveAssetSource(asset);
     if (resolved?.uri) {
       return { uri: resolved.uri };
     }
   }
-  if (runtimeAsset && typeof runtimeAsset === "object" && "uri" in runtimeAsset) {
-    const uri = runtimeAsset.uri;
+  if (asset && typeof asset === "object" && "uri" in asset) {
+    const uri = asset.uri;
     if (uri) return { uri };
   }
   return { html: "" };
-})();
+};
 var WebViewViewer = ({ engine }) => {
   const webViewRef = useRef2(null);
   const { pageTheme } = useViewerStore2();
+  const bridgeEngine = engine;
+  const runtimeSource = useMemo2(
+    () => resolveRuntimeSource(
+      bridgeEngine.getWebViewRuntimeSource?.() ?? runtimeAsset
+    ),
+    [bridgeEngine]
+  );
+  const [runtimeHtml, setRuntimeHtml] = useState2(null);
+  useEffect2(() => {
+    let active = true;
+    if ("html" in runtimeSource) {
+      setRuntimeHtml(runtimeSource.html);
+      return () => {
+        active = false;
+      };
+    }
+    setRuntimeHtml(null);
+    void fetch(runtimeSource.uri).then((response) => {
+      if (!response.ok) throw new Error(`status ${response.status}`);
+      return response.text();
+    }).then((html) => {
+      if (active) setRuntimeHtml(html);
+    }).catch(() => {
+      if (active) setRuntimeHtml(null);
+    });
+    return () => {
+      active = false;
+    };
+  }, [runtimeSource]);
+  const webViewSource = useMemo2(() => {
+    if (runtimeHtml !== null) {
+      return {
+        html: runtimeHtml,
+        baseUrl: "http://localhost:3005/"
+      };
+    }
+    if ("uri" in runtimeSource) return { html: "" };
+    return runtimeSource;
+  }, [runtimeHtml, runtimeSource]);
+  const runtimeConfig = bridgeEngine.getWebViewRuntimeConfig?.();
+  const runtimeConfigScript = useMemo2(() => {
+    if (!runtimeConfig) return void 0;
+    return `window.__PAPYRUS_RUNTIME_CONFIG__=${JSON.stringify(
+      runtimeConfig
+    )};true;`;
+  }, [runtimeConfig]);
   useEffect2(() => {
-    const bridgeEngine = engine;
     bridgeEngine.attachWebView?.({
       postMessage: (message) => {
         if (__DEV__) {
@@ -23040,9 +23692,22 @@ var WebViewViewer = ({ engine }) => {
         webViewRef.current?.postMessage(message);
       }
     });
-  }, [engine]);
+  }, [bridgeEngine]);
   const handleMessage = (event) => {
-    const bridgeEngine = engine;
+    const state = parseWebViewState(event.nativeEvent.data);
+    if (state) {
+      const viewerState = useViewerStore2.getState();
+      const nextState = {};
+      if (state.currentPage !== void 0 && state.currentPage !== viewerState.currentPage) {
+        nextState.currentPage = state.currentPage;
+      }
+      if (state.pageCount !== void 0 && state.pageCount !== viewerState.pageCount) {
+        nextState.pageCount = state.pageCount;
+      }
+      if (Object.keys(nextState).length > 0) {
+        viewerState.setDocumentState(nextState);
+      }
+    }
     if (__DEV__) {
       console.log("[Papyrus WebView] message", event.nativeEvent.data);
     }
@@ -23082,11 +23747,12 @@ var WebViewViewer = ({ engine }) => {
       WebView,
       {
         ref: webViewRef,
-        source: runtimeSource,
+        source: webViewSource,
         originWhitelist: ["*"],
         onMessage: handleMessage,
         onLoadEnd: handleLoadEnd,
         onError: handleError,
+        injectedJavaScriptBeforeContentLoaded: runtimeConfigScript,
         javaScriptEnabled: true,
         domStorageEnabled: true,
         scalesPageToFit: true,
@@ -23136,7 +23802,7 @@ var styles2 = StyleSheet2.create({
 var WebViewViewer_default = WebViewViewer;
 
 // components/DedicatedAndroidPdfViewer.tsx
-import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 import { Pressable as Pressable2, StyleSheet as StyleSheet3, View as View3 } from "react-native";
 import { useViewerStore as useViewerStore3 } from "@papyrus-sdk/core";
 import { PapyrusPdfDocumentView } from "@papyrus-sdk/engine-native";
@@ -23782,7 +24448,7 @@ function DedicatedAndroidPdfViewer({
   const addAnnotation = useViewerStore3((state) => state.addAnnotation);
   const setSelectedAnnotation = useViewerStore3((state) => state.setSelectedAnnotation);
   const engineId = getDedicatedAndroidPdfEngineId(engine);
-  const [selection, setSelection] = useState2(null);
+  const [selection, setSelection] = useState3(null);
   const selectionRef = useRef3(null);
   const lastVisiblePagesKeyRef = useRef3("");
   const lastScrollOffsetYRef = useRef3(0);
@@ -24135,13 +24801,13 @@ var Viewer = ({
   const lastScrollOffsetYRef = useRef4(0);
   const scrollDownAccumRef = useRef4(0);
   const scrollUpAccumRef = useRef4(0);
-  const [layoutRevision, setLayoutRevision] = useState3(0);
-  const [selectionDragActive, setSelectionDragActive] = useState3(false);
+  const [layoutRevision, setLayoutRevision] = useState4(0);
+  const [selectionDragActive, setSelectionDragActive] = useState4(false);
   const selectionDragActiveRef = useRef4(false);
-  const [gestureScrollLockActive, setGestureScrollLockActive] = useState3(false);
+  const [gestureScrollLockActive, setGestureScrollLockActive] = useState4(false);
   const gestureScrollLockActiveRef = useRef4(false);
-  const [pinchPreviewScale, setPinchPreviewScale] = useState3(1);
-  const [lastPinchEndedAt, setLastPinchEndedAt] = useState3(null);
+  const [pinchPreviewScale, setPinchPreviewScale] = useState4(1);
+  const [lastPinchEndedAt, setLastPinchEndedAt] = useState4(null);
   const pinchGestureActiveRef = useRef4(false);
   const pinchStartZoomRef = useRef4(1);
   const pinchPreviewZoomRef = useRef4(1);
@@ -25474,7 +26140,7 @@ var styles4 = StyleSheet4.create({
 var Viewer_default = Viewer;
 
 // components/Topbar.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { View as View6, Text as Text2, Pressable as Pressable4, StyleSheet as StyleSheet6, useWindowDimensions as useWindowDimensions3 } from "react-native";
 import { useViewerStore as useViewerStore5 } from "@papyrus-sdk/core";
 
@@ -25497,7 +26163,7 @@ var MOBILE_CHROME_METRICS = {
 };
 
 // components/PageJumpModal.tsx
-import { useEffect as useEffect5, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 import { Modal, Pressable as Pressable3, StyleSheet as StyleSheet5, Text, TextInput, View as View5 } from "react-native";
 
 // components/pageJumpModel.ts
@@ -25519,7 +26185,7 @@ function PageJumpModal({
   onClose,
   onConfirm
 }) {
-  const [value, setValue] = useState4(`${currentPage}`);
+  const [value, setValue] = useState5(`${currentPage}`);
   useEffect5(() => {
     if (visible) setValue(`${currentPage}`);
   }, [currentPage, visible]);
@@ -25680,7 +26346,7 @@ var Topbar = ({
     accentColor,
     mobileChromeVisible
   } = useViewerStore5();
-  const [jumpModalOpen, setJumpModalOpen] = useState5(false);
+  const [jumpModalOpen, setJumpModalOpen] = useState6(false);
   const isDark = uiTheme === "dark";
   const navIconColor = isDark ? "#e5e7eb" : "#111827";
   const { width, height } = useWindowDimensions3();
@@ -25983,7 +26649,7 @@ var styles6 = StyleSheet6.create({
 var Topbar_default = Topbar;
 
 // components/ToolDock.tsx
-import React7, { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
+import React7, { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef5, useState as useState7 } from "react";
 import {
   View as View7,
   Text as Text3,
@@ -26221,8 +26887,8 @@ var OpacitySlider = React7.memo(function OpacitySlider2({
   isDark,
   onCommit
 }) {
-  const [trackWidth, setTrackWidth] = useState6(0);
-  const [draftValue, setDraftValue] = useState6(value);
+  const [trackWidth, setTrackWidth] = useState7(0);
+  const [draftValue, setDraftValue] = useState7(value);
   const dragValueRef = useRef5(draftValue);
   const isDraggingRef = useRef5(false);
   const frameRef = useRef5(null);
@@ -26331,8 +26997,8 @@ var ToolDock = () => {
     undoAnnotations,
     redoAnnotations
   } = useViewerStore6();
-  const [paletteExpanded, setPaletteExpanded] = useState6(false);
-  const [extrasExpanded, setExtrasExpanded] = useState6(false);
+  const [paletteExpanded, setPaletteExpanded] = useState7(false);
+  const [extrasExpanded, setExtrasExpanded] = useState7(false);
   const isDark = uiTheme === "dark";
   const { width: windowWidth } = useWindowDimensions4();
   const t = getStrings(locale);
@@ -27055,9 +27721,10 @@ var withInkAlpha = (hex, alpha) => {
 var ToolDock_default = ToolDock;
 
 // components/RightSheet.tsx
-import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef6, useState as useState7 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef6, useState as useState8 } from "react";
 import {
   Dimensions,
+  Image as Image2,
   Platform as Platform3,
   Pressable as Pressable7,
   StyleSheet as StyleSheet9,
@@ -27248,11 +27915,13 @@ var PageThumbnail = ({
   frameHeight,
   accentColor,
   useNativePreview,
+  useImagePreview,
   shouldRenderPreview,
   onPress
 }) => {
   const viewRef = useRef6(null);
-  const [layoutReady, setLayoutReady] = useState7(false);
+  const [layoutReady, setLayoutReady] = useState8(false);
+  const [previewUri, setPreviewUri] = useState8(null);
   useEffect7(() => {
     if (!layoutReady || !useNativePreview || !shouldRenderPreview) return;
     const viewTag = findNodeHandle2(viewRef.current);
@@ -27268,6 +27937,24 @@ var PageThumbnail = ({
     useNativePreview,
     zoom
   ]);
+  useEffect7(() => {
+    if (!useImagePreview || !shouldRenderPreview) {
+      setPreviewUri(null);
+      return;
+    }
+    let active = true;
+    const previewEngine = engine;
+    const request = previewEngine.getPagePreview?.(pageIndex);
+    if (!request) return;
+    void request.then((uri) => {
+      if (active) setPreviewUri(uri);
+    }).catch(() => {
+      if (active) setPreviewUri(null);
+    });
+    return () => {
+      active = false;
+    };
+  }, [engine, pageIndex, shouldRenderPreview, useImagePreview]);
   const handleLayout = (event) => {
     if (event.nativeEvent.layout.width && event.nativeEvent.layout.height) {
       setLayoutReady(true);
@@ -27290,7 +27977,14 @@ var PageThumbnail = ({
           {
             onLayout: handleLayout,
             style: [styles9.thumbFrame, { width: frameWidth, height: frameHeight }],
-            children: useNativePreview && shouldRenderPreview ? /* @__PURE__ */ jsx10(PapyrusPageView2, { ref: viewRef, style: styles9.thumbView }) : /* @__PURE__ */ jsx10(View9, { style: [styles9.thumbFallback, isDark && styles9.thumbFallbackDark], children: /* @__PURE__ */ jsx10(
+            children: useNativePreview && shouldRenderPreview ? /* @__PURE__ */ jsx10(PapyrusPageView2, { ref: viewRef, style: styles9.thumbView }) : useImagePreview && shouldRenderPreview && previewUri ? /* @__PURE__ */ jsx10(
+              Image2,
+              {
+                source: { uri: previewUri },
+                resizeMode: "contain",
+                style: styles9.thumbImage
+              }
+            ) : /* @__PURE__ */ jsx10(View9, { style: [styles9.thumbFallback, isDark && styles9.thumbFallbackDark], children: /* @__PURE__ */ jsx10(
               Text5,
               {
                 style: [
@@ -27367,9 +28061,14 @@ var RightSheet = ({
     locale,
     accentColor
   } = useViewerStore7();
-  const [pagesMode, setPagesMode] = useState7(
-    documentType === "pdf" ? "thumbnails" : "summary"
+  const [pagesMode, setPagesMode] = useState8(
+    documentType === "pdf" || documentType === "comic" ? "thumbnails" : "summary"
   );
+  useEffect7(() => {
+    setPagesMode(
+      documentType === "pdf" || documentType === "comic" ? "thumbnails" : "summary"
+    );
+  }, [documentType]);
   const isDark = uiTheme === "dark";
   const t = getStrings(locale);
   const showingNotes = sidebarRightTab === "annotations";
@@ -27387,11 +28086,12 @@ var RightSheet = ({
     UIManager.getViewManagerConfig?.("PapyrusPageView")
   );
   const useNativePreview = renderTarget !== "webview" && hasNativePageView;
+  const useImagePreview = documentType === "comic" && renderTarget === "webview" && typeof engine.getPagePreview === "function";
   const thumbnailDimensionsCacheRef = useRef6(/* @__PURE__ */ new Map());
   const thumbnailDimensionsPendingRef = useRef6(/* @__PURE__ */ new Set());
   const thumbnailRefreshTimeoutRef = useRef6(null);
-  const [thumbnailLayoutRevision, setThumbnailLayoutRevision] = useState7(0);
-  const [visibleThumbnailPages, setVisibleThumbnailPages] = useState7(
+  const [thumbnailLayoutRevision, setThumbnailLayoutRevision] = useState8(0);
+  const [visibleThumbnailPages, setVisibleThumbnailPages] = useState8(
     () => /* @__PURE__ */ new Set()
   );
   const resolvedThumbsInitialCount = useMemo5(
@@ -27543,7 +28243,7 @@ var RightSheet = ({
   );
   const renderThumbnailItem = useCallback4(
     ({ item }) => {
-      const shouldRenderPreview = useNativePreview && (visibleThumbnailPages.has(item) || item < resolvedThumbsPrewarmCount || Math.abs(item + 1 - currentPage) <= 1);
+      const shouldRenderPreview = (useNativePreview || useImagePreview) && (visibleThumbnailPages.has(item) || item < resolvedThumbsPrewarmCount || Math.abs(item + 1 - currentPage) <= 1);
       return /* @__PURE__ */ jsx10(
         PageThumbnail,
         {
@@ -27557,6 +28257,7 @@ var RightSheet = ({
           frameHeight: getThumbnailFrameHeight(item),
           accentColor,
           useNativePreview,
+          useImagePreview,
           shouldRenderPreview,
           onPress: () => jumpToPage(item)
         }
@@ -27573,6 +28274,7 @@ var RightSheet = ({
       jumpToPage,
       resolvedThumbsPrewarmCount,
       useNativePreview,
+      useImagePreview,
       visibleThumbnailPages,
       zoom
     ]
@@ -27904,6 +28606,10 @@ var styles9 = StyleSheet9.create({
     width: "100%",
     height: "100%"
   },
+  thumbImage: {
+    width: "100%",
+    height: "100%"
+  },
   thumbFallback: {
     flex: 1,
     alignItems: "center",
@@ -28044,7 +28750,7 @@ var styles9 = StyleSheet9.create({
 var RightSheet_default = RightSheet;
 
 // components/AnnotationEditor.tsx
-import { useEffect as useEffect8, useState as useState8 } from "react";
+import { useEffect as useEffect8, useState as useState9 } from "react";
 import {
   Modal as Modal3,
   View as View10,
@@ -28067,7 +28773,7 @@ var AnnotationEditor = () => {
   } = useViewerStore8();
   const annotation = annotations.find((ann) => ann.id === selectedAnnotationId);
   const isEditable = annotation && (annotation.type === "text" || annotation.type === "comment");
-  const [draft, setDraft] = useState8("");
+  const [draft, setDraft] = useState9("");
   const isDark = uiTheme === "dark";
   const t = getStrings(locale);
   useEffect8(() => {
@@ -29050,7 +29756,7 @@ var styles12 = StyleSheet12.create({
 var SettingsSheet_default = SettingsSheet;
 
 // components/CoverPreview.tsx
-import { useEffect as useEffect9, useMemo as useMemo6, useRef as useRef7, useState as useState9 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo6, useRef as useRef7, useState as useState10 } from "react";
 import {
   ActivityIndicator,
   StyleSheet as StyleSheet13,
@@ -29108,11 +29814,11 @@ var CoverPreview = ({
   onLoadEnd,
   onError
 }) => {
-  const [engine, setEngine] = useState9(null);
-  const [layoutReady, setLayoutReady] = useState9(false);
-  const [loaded, setLoaded] = useState9(false);
-  const [loading, setLoading] = useState9(false);
-  const [error, setError] = useState9(null);
+  const [engine, setEngine] = useState10(null);
+  const [layoutReady, setLayoutReady] = useState10(false);
+  const [loaded, setLoaded] = useState10(false);
+  const [loading, setLoading] = useState10(false);
+  const [error, setError] = useState10(null);
   const viewRef = useRef7(null);
   const resolvedType = useMemo6(() => inferDocumentType(source, type), [source, type]);
   const isPdf = resolvedType === "pdf";
@@ -29232,7 +29938,7 @@ var styles13 = StyleSheet13.create({
 var CoverPreview_default = CoverPreview;
 
 // components/ReadingShell.tsx
-import React13, { useState as useState11 } from "react";
+import React13, { useState as useState12 } from "react";
 import { Keyboard as Keyboard2, View as View20, StyleSheet as StyleSheet20 } from "react-native";
 import { useViewerStore as useViewerStore17 } from "@papyrus-sdk/core";
 
@@ -29857,7 +30563,7 @@ var styles17 = StyleSheet17.create({
 });
 
 // components/SearchOverlay.tsx
-import { useEffect as useEffect10, useMemo as useMemo8, useState as useState10 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo8, useState as useState11 } from "react";
 import {
   Keyboard,
   Pressable as Pressable15,
@@ -29886,8 +30592,8 @@ function SearchOverlay({
     uiTheme,
     accentColor
   } = useViewerStore15();
-  const [draft, setDraft] = useState10(searchQuery);
-  const [isSearching, setIsSearching] = useState10(false);
+  const [draft, setDraft] = useState11(searchQuery);
+  const [isSearching, setIsSearching] = useState11(false);
   const isDark = uiTheme === "dark";
   const t = getStrings(locale);
   const searchService = useMemo8(() => new SearchService(engine), [engine]);
@@ -30378,12 +31084,12 @@ function ReadingShell({
     uiTheme,
     accentColor
   } = useViewerStore17();
-  const [overflowOpen, setOverflowOpen] = useState11(false);
-  const [infoOpen, setInfoOpen] = useState11(false);
-  const [actionsOpen, setActionsOpen] = useState11(false);
-  const [settingsOpen, setSettingsOpen] = useState11(false);
-  const [searchResultsOpen, setSearchResultsOpen] = useState11(false);
-  const [pageJumpOpen, setPageJumpOpen] = useState11(false);
+  const [overflowOpen, setOverflowOpen] = useState12(false);
+  const [infoOpen, setInfoOpen] = useState12(false);
+  const [actionsOpen, setActionsOpen] = useState12(false);
+  const [settingsOpen, setSettingsOpen] = useState12(false);
+  const [searchResultsOpen, setSearchResultsOpen] = useState12(false);
+  const [pageJumpOpen, setPageJumpOpen] = useState12(false);
   const isDark = uiTheme === "dark";
   React13.useEffect(() => {
     const showSubscription = Keyboard2.addListener("keyboardDidShow", () => {