@marianmeres/stuic 3.31.1 → 3.32.1

package/dist/components/Book/Book.svelte

@@ -741,6 +741,7 @@
 				<!-- Sheets (3D flippable elements) — no static pages needed -->
 				{#each sheets as sheet (sheet.id)}
 					{@const flipped = sheet.id < activeSpread}
+					{@const isNearby = Math.abs(sheet.id - activeSpread) <= 2}
 					<div
 						class={twMerge(!unstyled && "stuic-book-sheet")}
 						data-flipped={flipped ? "true" : undefined}
@@ -755,7 +756,7 @@
 							data-placeholder={!sheet.frontPage && sheet.backPage ? "" : undefined}
 							onclick={(e) => handlePageClick(e, sheet.frontPage)}
 						>
-							{#if sheet.frontPage}
+							{#if isNearby && sheet.frontPage}
 								{#if renderPage}
 									{@render renderPage({
 										page: sheet.frontPage,
@@ -844,7 +845,7 @@
 							data-placeholder={!sheet.backPage && sheet.frontPage ? "" : undefined}
 							onclick={(e) => handlePageClick(e, sheet.backPage)}
 						>
-							{#if sheet.backPage}
+							{#if isNearby && sheet.backPage}
 								{#if renderPage}
 									{@render renderPage({
 										page: sheet.backPage,

package/dist/components/Book/BookResponsive.svelte

@@ -0,0 +1,138 @@
+<script lang="ts" module>
+	import type { Props as BookProps } from "./Book.svelte";
+
+	export interface Props extends Omit<BookProps, "responsive" | "singlePage"> {
+		/** Minimum page width (px) before switching to single-page mode (default: 150) */
+		minPageWidth?: number;
+		/** Resize debounce delay in ms (default: 150) */
+		debounce?: number;
+	}
+</script>
+
+<script lang="ts">
+	import Book, { computeBookPageSize, type BookPage } from "./Book.svelte";
+	import { waitForTwoRepaints } from "../../utils/paint.js";
+
+	let bookRef: ReturnType<typeof Book> | undefined = $state();
+
+	let {
+		pages,
+		minPageWidth = 150,
+		debounce: debounceMs = 150,
+		activeSpread = $bindable(0),
+		...rest
+	}: Props = $props();
+
+	// derive aspect ratio from actual page dimensions
+	const ratio = $derived.by(() => {
+		const size = computeBookPageSize(pages);
+		return size.width / size.height;
+	});
+
+	let containerEl: HTMLDivElement | undefined = $state();
+	let pageWidth = $state(0);
+	let pageHeight = $state(0);
+	let forceSingle = $state(false);
+	let resizing = $state(false);
+	let measured = $state(false);
+
+	// ---- Proxy API (safe no-ops during remount) ----
+
+	export function next() { bookRef?.next(); }
+	export function previous() { bookRef?.previous(); }
+	export function goTo(spreadIndex: number) { bookRef?.goTo(spreadIndex); }
+	export function goToPage(pageId: BookPage["id"]) { bookRef?.goToPage(pageId); }
+	export function zoomIn() { bookRef?.zoomIn(); }
+	export function zoomOut() { bookRef?.zoomOut(); }
+	export function resetZoom() { bookRef?.resetZoom(); }
+	export function getCollection() { return bookRef?.getCollection(); }
+
+	// Dynamically size the book to fill available container space.
+	// We own the single/dual page decision (responsive={false}) to avoid feedback loops —
+	// the Book's internal responsive detection uses bind:clientWidth which conflicts with
+	// our external sizing and can oscillate during flip animations.
+	// Uses window resize event instead of ResizeObserver for the same reason.
+	$effect(() => {
+		if (!containerEl) return;
+		let timer: ReturnType<typeof setTimeout>;
+
+		const apply = () => {
+			const cw = containerEl!.clientWidth;
+			const ch = containerEl!.clientHeight;
+			if (!cw || !ch) return;
+
+			// suppress width/translate transitions during dimension changes,
+			// then restore so flip animations (stage translate) work normally
+			resizing = true;
+
+			// try dual-page first: 2 pages side by side
+			const dualHeight = Math.floor(Math.min(ch, cw / 2 / ratio));
+			const dualWidth = Math.floor(dualHeight * ratio);
+
+			if (dualWidth >= minPageWidth) {
+				// dual-page mode — pages are large enough
+				pageWidth = dualWidth;
+				pageHeight = dualHeight;
+				forceSingle = false;
+			} else {
+				// single-page mode — container too narrow for readable dual pages
+				const singleHeight = Math.floor(Math.min(ch, cw / ratio));
+				pageWidth = Math.floor(singleHeight * ratio);
+				pageHeight = singleHeight;
+				forceSingle = true;
+			}
+
+			// force-remount Book so 3D context reinitializes with new dimensions
+			// (overflow:hidden flattens preserve-3d when dimensions change mid-life)
+			measured = false;
+			waitForTwoRepaints().then(() => {
+				resizing = false;
+				measured = true;
+			});
+		};
+
+		// initial measurement
+		apply();
+
+		// subsequent resizes — debounced to avoid flickering during drag
+		const onResize = () => {
+			clearTimeout(timer);
+			timer = setTimeout(apply, debounceMs);
+		};
+		window.addEventListener("resize", onResize);
+
+		return () => {
+			clearTimeout(timer);
+			window.removeEventListener("resize", onResize);
+		};
+	});
+</script>
+
+<div
+	bind:this={containerEl}
+	class="stuic-book-responsive"
+	style="--stuic-book-page-width: {pageWidth}px; --stuic-book-page-height: {pageHeight}px;{resizing
+		? ' --stuic-book-duration: 0ms;'
+		: ''}"
+>
+	{#if measured}
+		<Book
+			bind:this={bookRef}
+			{pages}
+			responsive={false}
+			singlePage={forceSingle}
+			bind:activeSpread
+			{...rest}
+		/>
+	{/if}
+</div>
+
+<style>
+	.stuic-book-responsive {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+	}
+</style>

package/dist/components/Book/BookResponsive.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Props as BookProps } from "./Book.svelte";
+export interface Props extends Omit<BookProps, "responsive" | "singlePage"> {
+    /** Minimum page width (px) before switching to single-page mode (default: 150) */
+    minPageWidth?: number;
+    /** Resize debounce delay in ms (default: 150) */
+    debounce?: number;
+}
+import { type BookPage } from "./Book.svelte";
+declare const BookResponsive: import("svelte").Component<Props, {
+    next: () => void;
+    previous: () => void;
+    goTo: (spreadIndex: number) => void;
+    goToPage: (pageId: BookPage["id"]) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    getCollection: () => import("./Book.svelte").BookCollection | undefined;
+}, "activeSpread">;
+type BookResponsive = ReturnType<typeof BookResponsive>;
+export default BookResponsive;

package/dist/components/Book/index.d.ts

@@ -1 +1,2 @@
 export { default as Book, type Props as BookProps, type BookPage, type BookPageArea, type BookSpread, type BookSheet, type BookCollection, buildSpreads, buildSinglePageSpreads, buildSheets, computeBookPageSize, } from "./Book.svelte";
+export { default as BookResponsive, type Props as BookResponsiveProps, } from "./BookResponsive.svelte";

package/dist/components/Book/index.js

@@ -1 +1,2 @@
 export { default as Book, buildSpreads, buildSinglePageSpreads, buildSheets, computeBookPageSize, } from "./Book.svelte";
+export { default as BookResponsive, } from "./BookResponsive.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.31.1",
+  "version": "3.32.1",
   "files": [
     "dist",
     "!dist/**/*.test.*",