@marianmeres/stuic 3.32.2 → 3.33.1

package/dist/components/Book/Book.svelte

@@ -310,10 +310,31 @@
 		});
 	});
 
-	// ---- Image preloading ----
+	// ---- Debounced "settled" spread — prevents mass image downloads during rapid slider drags ----
+
+	let settledSpread = $state(0);
+	let _settleTimer: ReturnType<typeof setTimeout> | undefined;
 
 	$effect(() => {
 		const current = activeSpread;
+		clearTimeout(_settleTimer);
+		// Small jump (±1): settle immediately (normal next/prev navigation)
+		if (Math.abs(current - settledSpread) <= 1) {
+			settledSpread = current;
+		} else {
+			// Large jump (slider drag): debounce to avoid intermediate downloads
+			_settleTimer = setTimeout(() => {
+				settledSpread = current;
+			}, 120);
+		}
+	});
+
+	$effect(() => () => clearTimeout(_settleTimer));
+
+	// ---- Image preloading ----
+
+	$effect(() => {
+		const current = settledSpread;
 		const toPreload: PreloadImgOptions[] = [];
 		for (
 			let i = Math.max(0, current - 1);
@@ -704,7 +725,7 @@
 
 {#if spreads.length}
 	<!-- Measurement wrapper: always 100% width for responsive detection -->
-	<div bind:clientWidth={containerWidth} style:width="100%" style:text-align="center">
+	<div bind:clientWidth={containerWidth} style:width="100%" style:display="flex" style:justify-content="center">
 		<!-- Visual book wrapper: owns background/shadow/radius -->
 		<div
 			bind:this={el}
@@ -741,7 +762,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}
+					{@const isNearby = Math.abs(sheet.id - settledSpread) <= 2}
 					<div
 						class={twMerge(!unstyled && "stuic-book-sheet")}
 						data-flipped={flipped ? "true" : undefined}

package/dist/components/Book/BookResponsive.svelte

@@ -51,16 +51,37 @@
 	// 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>;
+		let lastCW = 0;
+		let lastCH = 0;
 
 		const apply = () => {
-			const cw = containerEl!.clientWidth;
-			const ch = containerEl!.clientHeight;
+			// use getBoundingClientRect() for subpixel precision — clientWidth/clientHeight
+			// return integers which can round UP, causing the page to exceed available
+			// space by a fraction of a pixel (enough to trigger scrollbars in min-h-screen
+			// layouts). The later Math.floor() on page dimensions rounds DOWN from the
+			// precise float, guaranteeing the page never exceeds the container.
+			const rect = containerEl!.getBoundingClientRect();
+			const style = getComputedStyle(containerEl!);
+			const cw = rect.width
+				- parseFloat(style.paddingLeft)
+				- parseFloat(style.paddingRight)
+				- parseFloat(style.borderLeftWidth)
+				- parseFloat(style.borderRightWidth);
+			const ch = rect.height
+				- parseFloat(style.paddingTop)
+				- parseFloat(style.paddingBottom)
+				- parseFloat(style.borderTopWidth)
+				- parseFloat(style.borderBottomWidth);
 			if (!cw || !ch) return;
 
+			// skip if dimensions unchanged (prevents ResizeObserver oscillation)
+			if (cw === lastCW && ch === lastCH) return;
+			lastCW = cw;
+			lastCH = ch;
+
 			// suppress width/translate transitions during dimension changes,
 			// then restore so flip animations (stage translate) work normally
 			resizing = true;
@@ -94,7 +115,16 @@
 		// initial measurement
 		apply();
 
-		// subsequent resizes — debounced to avoid flickering during drag
+		// observe container resizes (layout-driven changes like sidebar toggle)
+		const ro = new ResizeObserver(() => {
+			clearTimeout(timer);
+			timer = setTimeout(apply, debounceMs);
+		});
+		ro.observe(containerEl!);
+
+		// also listen to window resize — ResizeObserver may not fire in
+		// min-h-screen layouts where viewport changes don't immediately
+		// propagate to the container's border box
 		const onResize = () => {
 			clearTimeout(timer);
 			timer = setTimeout(apply, debounceMs);
@@ -103,6 +133,7 @@
 
 		return () => {
 			clearTimeout(timer);
+			ro.disconnect();
 			window.removeEventListener("resize", onResize);
 		};
 	});
@@ -130,6 +161,7 @@
 <style>
 	.stuic-book-responsive {
 		flex: 1;
+		min-height: 0;
 		display: flex;
 		align-items: center;
 		justify-content: center;

package/package.json

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