1} class:midscroll-active={midScrollActive} style={effectiveWidth != null ? `--effective-width:${effectiveWidth}px` : ""} role="presentation" tabindex="-1" onclick={handleTap} onauxclick={(e) => { if (e.button === 1 && style === "longstrip") e.preventDefault(); }} ondblclick={() => { if (tapToToggleBar) onToggleUi(); }} onmousedown={onInspectMouseDown} onpointerdown={pinchZoomEnabled ? onPointerDown : undefined} onwheel={(e) => { if (e.ctrlKey || style !== "longstrip") e.preventDefault(); }} style:cursor={midScrollActive ? "none" : style === "longstrip" ? (stripDragging ? "grabbing" : "grab") : undefined} onkeydown={(e) => { if (e.key === " " && style === "longstrip") { e.preventDefault(); store.settings.autoScroll = !store.settings.autoScroll; } }} > {#if midScrollActive}

{/if} {#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}