@marianmeres/stuic 3.39.0 → 3.40.0

package/dist/components/AssetsPreview/AssetsPreview.svelte

@@ -57,6 +57,8 @@
 		prevNextBottom?: boolean;
 		/** Callback when a clickable area on an image is clicked */
 		onAreaClick?: (data: { area: AssetArea; asset: AssetPreviewNormalized }) => void;
+		/** Max number of images to preload in each direction from current (0 = all). Default 3. */
+		preloadWindow?: number;
 	}
 </script>
 
@@ -82,6 +84,7 @@
 		noDots = false,
 		noCurrentOfTotal = false,
 		prevNextBottom = false,
+		preloadWindow = 3,
 	}: Props = $props();
 
 	let assets: AssetPreviewNormalized[] = $derived(
@@ -96,17 +99,26 @@
 		const visible = modal?.visibility().visible;
 		if (visible) {
 			// Use the index from open(index) if provided, otherwise reset to 0
-			previewIdx = _openIdx ?? 0;
+			const idx = _openIdx ?? 0;
+			previewIdx = idx;
 			_openIdx = undefined;
 
-			// perhaps we should have some upper limit here...
-			const toPreload: PreloadImgOptions[] = (assets ?? [])
-				.filter((asset) => asset.isImage)
-				.map((asset) => ({
-					src: resolveUrl(String(asset.url.full), baseUrl),
-					srcset: resolveSrcset(asset.srcset ?? "", baseUrl) || undefined,
-					sizes: asset.sizes,
-				}));
+			const toPreload: PreloadImgOptions[] = [];
+			const len = assets.length;
+			const pw = preloadWindow > 0 ? preloadWindow : len;
+
+			for (let offset = -pw; offset <= pw; offset++) {
+				const i = idx + offset;
+				if (i < 0 || i >= len) continue;
+				const asset = assets[i];
+				if (asset?.isImage) {
+					toPreload.push({
+						src: resolveUrl(String(asset.url.full), baseUrl),
+						srcset: resolveSrcset(asset.srcset ?? "", baseUrl) || undefined,
+						sizes: asset.sizes,
+					});
+				}
+			}
 
 			clog.debug("going to (maybe) preload", toPreload);
 			if (toPreload.length) preloadImgs(toPreload);
@@ -156,6 +168,7 @@
 {#if assets.length}
 	<ModalDialog
 		bind:this={modal}
+		noAutoFocus
 		classDialog={modalClassDialog}
 		class={twMerge(
 			"max-w-full max-h-full h-full rounded-lg",

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

@@ -39,6 +39,8 @@ export interface Props {
         area: AssetArea;
         asset: AssetPreviewNormalized;
     }) => void;
+    /** Max number of images to preload in each direction from current (0 = all). Default 3. */
+    preloadWindow?: number;
 }
 declare const AssetsPreview: import("svelte").Component<Props, {
     open: (index?: number) => void;

package/dist/components/ModalDialog/ModalDialog.svelte

@@ -19,6 +19,8 @@
 		ariaDescribedby?: string;
 		/** Disable body scroll lock when dialog is open */
 		noScrollLock?: boolean;
+		/** Do not auto-focus the first focusable element when dialog opens */
+		noAutoFocus?: boolean;
 	}
 </script>
 
@@ -46,6 +48,7 @@
 		ariaLabelledby,
 		ariaDescribedby,
 		noScrollLock,
+		noAutoFocus,
 	}: Props = $props();
 
 	// important to start as undefined (because of scroll save/restore)
@@ -155,7 +158,7 @@
 {#if visible}
 	<dialog
 		bind:this={dialog}
-		use:focusTrap
+		use:focusTrap={{ autoFocusFirst: !noAutoFocus }}
 		data-type={type}
 		aria-labelledby={ariaLabelledby}
 		aria-describedby={ariaDescribedby}

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

@@ -17,6 +17,8 @@ export interface Props {
     ariaDescribedby?: string;
     /** Disable body scroll lock when dialog is open */
     noScrollLock?: boolean;
+    /** Do not auto-focus the first focusable element when dialog opens */
+    noAutoFocus?: boolean;
 }
 declare const ModalDialog: import("svelte").Component<Props, {
     open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;

package/dist/components/X/X.svelte

@@ -16,7 +16,7 @@
 	// const auto = $derived(dp.isCoarse ? 3 : 2);
 
 	// if sw not provided use thicker on mobile
-	const _strokeWidth = $derived(strokeWidth ?? 2);
+	const _strokeWidth = $derived(strokeWidth ?? 1.5);
 
 	const _strokeLinecap = $derived(linecapRound ? "round" : "square");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.39.0",
+  "version": "3.40.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -39,43 +39,43 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
-    "@marianmeres/icons-fns": "^5.0.0",
+    "@eslint/js": "^9.39.3",
     "@marianmeres/random-human-readable": "^1.6.1",
     "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/kit": "^2.52.0",
+    "@sveltejs/kit": "^2.53.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "@tailwindcss/cli": "^4.1.18",
+    "@tailwindcss/cli": "^4.2.1",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^25.2.3",
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/node": "^25.3.0",
     "dotenv": "^16.6.1",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.3",
     "globals": "^16.5.0",
     "prettier": "^3.8.1",
-    "prettier-plugin-svelte": "^3.4.1",
+    "prettier-plugin-svelte": "^3.5.0",
     "publint": "^0.3.17",
-    "svelte": "^5.51.2",
-    "svelte-check": "^4.4.0",
-    "tailwindcss": "^4.1.18",
+    "svelte": "^5.53.3",
+    "svelte-check": "^4.4.3",
+    "tailwindcss": "^4.2.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.55.0",
+    "typescript-eslint": "^8.56.1",
     "vite": "^7.3.1",
     "vitest": "^3.2.4"
   },
   "dependencies": {
     "@marianmeres/clog": "^3.15.2",
+    "@marianmeres/icons-fns": "^5.0.0",
     "@marianmeres/item-collection": "^1.3.5",
     "@marianmeres/paging-store": "^2.0.2",
     "@marianmeres/parse-boolean": "^2.0.5",
     "@marianmeres/ticker": "^1.16.5",
     "esm-env": "^1.2.2",
-    "libphonenumber-js": "^1.12.36",
+    "libphonenumber-js": "^1.12.37",
     "runed": "^0.23.4",
-    "tailwind-merge": "^3.4.1"
+    "tailwind-merge": "^3.5.0"
   },
   "scripts": {
     "dev": "vite dev",