@marianmeres/stuic 3.26.2 → 3.28.0

package/dist/components/Book/Book.svelte

@@ -173,6 +173,9 @@
 	import { ItemCollection } from "@marianmeres/item-collection";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import { preloadImgs, type PreloadImgOptions } from "../../utils/preload-img.js";
+	import { createClog } from "@marianmeres/clog";
+
+	const clog = createClog("Book", { color: "auto" });
 
 	let {
 		pages,
@@ -291,7 +294,7 @@
 					toPreload.push({ src: page.src, srcset: page.srcset, sizes: page.sizes });
 			}
 		}
-		if (toPreload.length) preloadImgs(toPreload);
+		if (toPreload.length) preloadImgs(toPreload).catch(() => {});
 	});
 
 	// ---- Z-index: track currently transitioning sheet ----
@@ -457,6 +460,17 @@
 		}
 	}
 
+	export function goToPage(pageId: BookPage["id"]) {
+		const idx = spreads.findIndex(
+			(s) => s.leftPage?.id == pageId || s.rightPage?.id == pageId
+		);
+		if (idx < 0) {
+			clog.warn(`goToPage: page "${pageId}" not found`);
+			return;
+		}
+		goTo(idx);
+	}
+
 	export function getCollection() {
 		return coll;
 	}
@@ -637,6 +651,19 @@
 		const y = (e.clientY - rect.top) / rect.height;
 		onPageClick({ page, x, y });
 	}
+
+	// ---- Image error tracking ----
+
+	let erroredSrcs = $state(new Set<string>());
+
+	$effect(() => {
+		pages; // reset errors when pages change
+		erroredSrcs = new Set();
+	});
+
+	function handleImgError(src: string) {
+		erroredSrcs = new Set([...erroredSrcs, src]);
+	}
 </script>
 
 {#if spreads.length}
@@ -702,6 +729,10 @@
 												? "cover"
 												: "right",
 									})}
+								{:else if erroredSrcs.has(sheet.frontPage.src)}
+									<div class={!unstyled ? "stuic-book-page-error" : undefined}>
+										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/><line x1="2" y1="2" x2="22" y2="22"/></svg>
+									</div>
 								{:else}
 									<img
 										src={sheet.frontPage.src}
@@ -709,6 +740,7 @@
 										sizes={sheet.frontPage.sizes}
 										alt={sheet.frontPage.title ?? ""}
 										draggable="false"
+										onerror={() => handleImgError(sheet.frontPage!.src)}
 									/>
 								{/if}
 								{#if onAreaClick && Math.abs(sheet.id - activeSpread) <= 1 && sheet.frontPage.areas?.length && sheet.frontPage.width && sheet.frontPage.height}
@@ -752,6 +784,10 @@
 										page: sheet.backPage,
 										position: isSinglePageMode ? "right" : "left",
 									})}
+								{:else if erroredSrcs.has(sheet.backPage.src)}
+									<div class={!unstyled ? "stuic-book-page-error" : undefined}>
+										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/><line x1="2" y1="2" x2="22" y2="22"/></svg>
+									</div>
 								{:else}
 									<img
 										src={sheet.backPage.src}
@@ -759,6 +795,7 @@
 										sizes={sheet.backPage.sizes}
 										alt={sheet.backPage.title ?? ""}
 										draggable="false"
+										onerror={() => handleImgError(sheet.backPage!.src)}
 									/>
 								{/if}
 								{#if onAreaClick && Math.abs(sheet.id - activeSpread) <= 1 && sheet.backPage.areas?.length && sheet.backPage.width && sheet.backPage.height}

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

@@ -118,6 +118,7 @@ declare const Book: import("svelte").Component<Props, {
     next: () => void;
     previous: () => void;
     goTo: (spreadIndex: number) => void;
+    goToPage: (pageId: BookPage["id"]) => void;
     getCollection: () => BookCollection;
 }, "el" | "activeSpread">;
 type Book = ReturnType<typeof Book>;

package/dist/components/Book/index.css

@@ -8,7 +8,6 @@
 	--stuic-book-radius: var(--radius-sm, 2px);
 	--stuic-book-page-width: 300px;
 	--stuic-book-page-height: 400px;
-	--stuic-book-placeholder-bg: color-mix(in srgb, currentColor 5%, transparent);
 }
 
 @layer components {
@@ -117,7 +116,23 @@
 	/* Placeholder: empty page face with content on the other side */
 	.stuic-book-sheet-front[data-placeholder],
 	.stuic-book-sheet-back[data-placeholder] {
-		background: var(--stuic-book-placeholder-bg);
+		background: var(--stuic-color-muted);
+	}
+
+	/* Error placeholder: broken image */
+	.stuic-book-page-error {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--stuic-color-muted);
+		color: var(--stuic-color-muted-foreground);
+	}
+
+	.stuic-book-page-error svg {
+		width: 48px;
+		height: 48px;
 	}
 
 	/* Flipped state */

package/package.json

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