1} style={effectiveWidth != null ? `--effective-width:${effectiveWidth}px` : ""} role="presentation" tabindex="-1" onclick={handleTap} ondblclick={(e) => { if (tapToToggleBar) { const x = e.clientX / window.innerWidth; if (x >= 0.3 && x <= 0.7) onToggleUi(); } }} onmousedown={onInspectMouseDown} onpointerdown={pinchZoomEnabled ? onPointerDown : undefined} onwheel={(e) => { if (e.ctrlKey || style !== "longstrip") e.preventDefault(); }} style:cursor={style === "longstrip" ? (stripDragging ? "grabbing" : "grab") : undefined} onkeydown={(e) => { if (e.key === " " && style === "longstrip") { e.preventDefault(); containerEl?.scrollBy({ top: containerEl.clientHeight * 0.85, behavior: "smooth" }); } }} > {#if loading}

{/if} {#if error}

{error}

{/if} {#key chapterEpoch} {#if style === "longstrip"} {#each flatPages as page, gi} {@const src = resolvedSrc[gi]} {@const isLoaded = loadedSet.has(gi)}

{#if isLoaded} {page.chapterName} – Page {page.localIndex + 1}

{ const img = e.currentTarget as HTMLImageElement; const slot = img.closest(".strip-slot"); if (slot && img.naturalWidth > 0) { slot.style.setProperty("--aspect", String(img.naturalWidth / img.naturalHeight)); } }} /> {:else}

{/if}

{/each}

{:else if style === "fade" && pageReady}

{#await resolveUrl(store.pageUrls[store.pageNumber - 1], 999)} Page {store.pageNumber}

{:then src} Page {store.pageNumber}

{/await}

{:else if style === "double" && pageReady}

{#if pageGroups.length}

{#each currentGroup as pg, i} {#await resolveUrl(store.pageUrls[pg - 1], 999)} Page {pg}

{:then src} Page {pg}

{/await} {/each}

{:else}

{/if}

{:else if pageReady}

{#await resolveUrl(store.pageUrls[store.pageNumber - 1], 999)} Page {store.pageNumber}

{:then src} Page {store.pageNumber}

{/await}

{/if} {/key}