zone5 1.1.0 → 1.2.0

package/dist/components/Zone5.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, untrack } from 'svelte';
 
 	import Img from './Zone5Img.svelte';
 	import { useImageRegistry } from './Zone5Provider.svelte';
@@ -29,9 +29,15 @@
 
 	// Register images with the global image registry
 	$effect(() => {
-		if (imageStore) {
-			imageStore.register(componentId, images);
-		}
+		// Track images to re-run when they change
+		const imagesToRegister = images;
+
+		// Use untrack to prevent the store update from creating a circular dependency
+		untrack(() => {
+			if (imageStore) {
+				imageStore.register(componentId, imagesToRegister);
+			}
+		});
 	});
 
 	// Cleanup on component unmount

package/dist/components/Zone5Img.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import type { Action } from 'svelte/action';
 
 	import type { ImageData } from './types';
@@ -26,13 +27,30 @@
 	});
 
 	let img: HTMLImageElement;
-	let loaded = $state(false);
+	let loaded = $state(true);
+
 	$effect(() => {
-		loaded = img.complete;
+		// Track `sizes` to rerun on change of `image` prop
+		void sizes;
+		// Track `img` element, in case effect runs before img is set
+		const imgEl = img;
+
+		if (!imgEl) return;
+		if (imgEl.complete) {
+			untrack(() => {
+				loaded = true;
+			});
+			return;
+		}
+
+		untrack(() => {
+			loaded = false;
+		});
 		const handleLoad = () => (loaded = true);
-		img.addEventListener('load', handleLoad);
+		imgEl.addEventListener('load', handleLoad);
+
 		return () => {
-			img.removeEventListener('load', handleLoad);
+			imgEl.removeEventListener('load', handleLoad);
 		};
 	});
 

package/dist/components/Zone5Provider.svelte

@@ -1,15 +1,17 @@
 <script lang="ts" module>
 	import { getContext, setContext } from 'svelte';
 
-	const key = Symbol('Zone5 provider');
+	const key = 'Zone5 provider';
 	export const useImageRegistry = () => getContext<Registry>(key);
 </script>
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { queryParameters } from 'sveltekit-search-params';
+	import { untrack } from 'svelte';
 
-	import { beforeNavigate } from '$app/navigation';
+	import { browser } from '$app/environment';
+	import { beforeNavigate, goto } from '$app/navigation';
+	import { page } from '$app/state';
 
 	import { type Registry, registry } from '../stores';
 	import Zone5Lightbox from './Zone5Lightbox.svelte';
@@ -18,39 +20,86 @@
 
 	setContext<Registry>(key, registry);
 
-	// URL state store
-	const params = queryParameters({
-		z5: true,
-	});
-	let optimisticForce = $state($params.z5 !== null);
+	const getZ5FromUrl = () => (browser ? page.url.searchParams.get('z5') : null);
+	const setZ5InUrl = (value: string | null) => {
+		if (!browser) return;
+		const url = new URL(page.url);
+		if (value) {
+			url.searchParams.set('z5', value);
+		} else {
+			url.searchParams.delete('z5');
+		}
+
+		// eslint-disable-next-line svelte/no-navigation-without-resolve -- staying on same page, just updating query params
+		goto(`${url.pathname}${url.search}`, { replaceState: true, noScroll: true, keepFocus: true });
+	};
+
+	let optimisticForce = $state(getZ5FromUrl() !== null);
+
+	let isUpdatingFromUrl = false;
+	let isUpdatingUrl = false;
+	let initialSyncComplete = false;
 
-	// clear registry when navigating away
 	beforeNavigate((navigation) => {
-		if (navigation.from?.route.id == navigation.to?.route.id) return;
+		if (navigation.from?.route.id === navigation.to?.route.id) return;
 		registry.clear();
 	});
 
-	// update URL state, once Svelte's router has settled
-	let routerSettled = false;
-	$effect(function updateZ5UrlState() {
-		const current = $registry.current?.id ?? null;
-		if (routerSettled || current) {
-			routerSettled = true;
-			if (current !== $params.z5) {
-				$params.z5 = current;
+	// registry → URL
+	$effect(() => {
+		const current = $registry.current;
+		const images = $registry.images;
+
+		if (isUpdatingFromUrl) return;
+
+		const currentZ5 = untrack(() => getZ5FromUrl());
+		const newZ5 = current?.id ?? null;
+
+		if (currentZ5 !== newZ5) {
+			// Don't clear the URL z5 param during initial load (waiting for all images to register)
+			if (newZ5 === null && currentZ5 !== null && !initialSyncComplete) {
+				const urlImageExists = images.some((img) => img.id === currentZ5);
+				if (urlImageExists) {
+					// Don't clear URL yet, let URL→registry sync handle it
+					return;
+				}
 			}
+
+			isUpdatingUrl = true;
+			setZ5InUrl(newZ5);
+			queueMicrotask(() => {
+				isUpdatingUrl = false;
+			});
 		}
 	});
 
-	// update from URL state
-	$effect(function updateZ5fromUrl() {
-		const z5 = $params.z5;
-		const current = $registry.current?.id ?? null;
-		if (z5 && z5 !== current) {
-			if (!registry.findCurrent(z5)) {
+	// URL → registry
+	$effect(() => {
+		const z5 = getZ5FromUrl();
+		const images = $registry.images;
+
+		if (isUpdatingUrl || images.length === 0) return;
+
+		if (z5) {
+			isUpdatingFromUrl = true;
+			const found = registry.findCurrent(z5);
+			if (found) {
 				optimisticForce = false;
-				$params.z5 = null;
 			}
+			initialSyncComplete = true;
+			queueMicrotask(() => {
+				isUpdatingFromUrl = false;
+			});
+		} else {
+			const currentId = untrack(() => $registry.current?.id);
+			if (currentId) {
+				isUpdatingFromUrl = true;
+				registry.clearCurrent();
+				queueMicrotask(() => {
+					isUpdatingFromUrl = false;
+				});
+			}
+			initialSyncComplete = true;
 		}
 	});
 </script>

package/dist/config.d.ts

@@ -15,7 +15,7 @@ declare const ConfigSchema: z.ZodObject<{
         resize_kernel: z.ZodDefault<z.ZodEnum<{
             [x: string]: any;
         }>>;
-        resize_gamma: z.ZodDefault<z.ZodNumber>;
+        resize_gamma: z.ZodOptional<z.ZodNumber>;
         variants: z.ZodDefault<z.ZodArray<z.ZodNumber>>;
     }, z.core.$strip>>>;
 }, z.core.$strip>;
@@ -29,8 +29,8 @@ export declare const load: (configDir?: string | undefined) => Promise<{
     };
     processor: {
         resize_kernel: any;
-        resize_gamma: number;
         variants: number[];
+        resize_gamma?: number | undefined;
     };
 } | {
     src: string;
@@ -41,8 +41,8 @@ export declare const load: (configDir?: string | undefined) => Promise<{
     };
     processor: {
         resize_kernel: any;
-        resize_gamma: number;
         variants: number[];
+        resize_gamma?: number | undefined;
     };
 }>;
 export declare const toToml: (config: ConfigType & {

package/dist/processor/config.d.ts

@@ -3,7 +3,7 @@ export declare const ProcessorConfigSchema: z.ZodPrefault<z.ZodObject<{
     resize_kernel: z.ZodDefault<z.ZodEnum<{
         [x: string]: any;
     }>>;
-    resize_gamma: z.ZodDefault<z.ZodNumber>;
+    resize_gamma: z.ZodOptional<z.ZodNumber>;
     variants: z.ZodDefault<z.ZodArray<z.ZodNumber>>;
 }, z.core.$strip>>;
 export type ProcessorConfig = z.infer<typeof ProcessorConfigSchema>;

package/dist/processor/config.js

@@ -4,7 +4,7 @@ import z from 'zod';
 export const ProcessorConfigSchema = z
     .object({
     resize_kernel: z.enum(Object.values(sharp.kernel)).default(sharp.kernel.mks2021),
-    resize_gamma: z.number().min(1.0).max(3.0).default(2.2),
+    resize_gamma: z.number().min(1.0).max(3.0).optional(),
     variants: z.array(z.number().int().min(1)).default([640, 768, 1280, 1920, 2560]),
 })
     .prefault({});

package/dist/processor/variants.js

@@ -43,7 +43,11 @@ export async function generateImageVariants(options) {
                 // Check if variant already exists and should be overwritten
                 const variantExists = await fileExists(variantPath);
                 if (!variantExists || forceOverwrite) {
-                    let img = sharp(sourceFile).gamma(processor.resize_gamma).resize(width, null, {
+                    let img = sharp(sourceFile);
+                    if (processor.resize_gamma) {
+                        img = img.gamma(processor.resize_gamma);
+                    }
+                    img = img.resize(width, null, {
                         fit: 'inside',
                         kernel: processor.resize_kernel,
                     });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "zone5",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"repository": {
 		"url": "https://github.com/cwygoda/zone5"
 	},