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}
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}
{/if}
{#if style === "longstrip"}
{#each stripToRender as chunk}
{#each chunk.urls as url, i}
{#await resolveUrl(url, chunk.urls.length - i)}
![{chunk.chapterName} – Page {i + 1}]()
{:then src}
![{chunk.chapterName} – Page {i + 1}]()
{/await}
{/each}
{/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}