zone5 1.0.1 → 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,10 +3,8 @@ 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> & {
-    clear?: boolean;
-    forceOverwrite?: boolean;
-};
+export type ProcessorConfig = z.infer<typeof ProcessorConfigSchema>;
+export declare const configHash: (config: ProcessorConfig) => string;

package/dist/processor/config.js

@@ -1,9 +1,16 @@
+import { createHash } from 'crypto';
 import sharp from 'sharp';
 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({});
+export const configHash = (config) => {
+    // Generate SHAKE256 hash with length 4 for config
+    const hash = createHash('shake256', { outputLength: 4 });
+    hash.update(JSON.stringify(config));
+    return hash.digest('hex');
+};

package/dist/processor/index.d.ts

@@ -1,6 +1,6 @@
 import type { BaseConfigType } from '../config.js';
 import { type DominantColor } from './color.js';
-import type { ProcessorConfig } from './config.js';
+import { type ProcessorConfig } from './config.js';
 import type { ExifItem } from './exif/exif.js';
 import type { GeojsonPoint } from './exif/types.js';
 export interface ItemFeature {

package/dist/processor/index.js

@@ -4,6 +4,7 @@ import { join, parse, relative } from 'path';
 import sharp from 'sharp';
 import { generateBlurhash } from './blurhash.js';
 import { getDominantColors } from './color.js';
+import { configHash } from './config.js';
 import exifFromFilePath from './exif/index.js';
 import { fileExists, sourceFileHash } from './file.js';
 import { generateImageVariants } from './variants.js';
@@ -11,14 +12,18 @@ const tracer = trace.getTracer('zone5-processor');
 const processor = async (options) => {
     return tracer.startActiveSpan('zone5.processor', async (span) => {
         try {
-            const { base, sourceFile, clear = false, forceOverwrite = false } = options;
+            const { base, processor: processorConfig, sourceFile, clear = false, forceOverwrite = false } = options;
             const { name: fileBasename } = parse(sourceFile);
             const sourceHash = sourceFileHash(base.root, sourceFile);
-            const featureFile = join(base.cache, `${fileBasename}-${sourceHash}`, 'index.json');
+            const procConfigHash = configHash(processorConfig);
+            const cacheDir = join(base.cache, `${procConfigHash}-${fileBasename}-${sourceHash}`);
+            const featureFile = join(cacheDir, 'index.json');
             span.setAttributes({
                 'zone5.sourceFile': sourceFile,
                 'zone5.fileBasename': fileBasename,
                 'zone5.sourceHash': sourceHash,
+                'zone5.configHash': procConfigHash,
+                'zone5.cacheDir': cacheDir,
                 'zone5.clear': clear,
                 'zone5.forceOverwrite': forceOverwrite,
             });
@@ -27,7 +32,7 @@ const processor = async (options) => {
                     exifFromFilePath(sourceFile),
                     generateBlurhash(sourceFile),
                     getDominantColors(sourceFile),
-                    generateImageVariants(options),
+                    generateImageVariants({ sourceFile, processor: processorConfig, cacheDir, clear, forceOverwrite }),
                     sharp(sourceFile).metadata(),
                 ]);
                 const feature = {

package/dist/processor/variants.d.ts

@@ -1,13 +1,12 @@
-import type { BaseConfigType } from '../config.js';
 import type { ProcessorConfig } from './config.js';
 export interface GeneratedVariant {
     width: number;
     path: string;
 }
 export declare function generateImageVariants(options: {
-    base: BaseConfigType;
     processor: ProcessorConfig;
     sourceFile: string;
+    cacheDir: string;
     clear?: boolean;
     forceOverwrite?: boolean;
 }): Promise<GeneratedVariant[]>;

package/dist/processor/variants.js

@@ -2,7 +2,7 @@ import { SpanStatusCode, trace } from '@opentelemetry/api';
 import { rm } from 'fs/promises';
 import { join, parse } from 'path';
 import sharp from 'sharp';
-import { ensureDirectoryExists, fileExists, sourceFileHash } from './file.js';
+import { ensureDirectoryExists, fileExists } from './file.js';
 const tracer = trace.getTracer('zone5-processor-variants');
 const addDebugText = async (img, width, height) => {
     const svg = `<svg height="100" width="300">
@@ -13,7 +13,7 @@ const addDebugText = async (img, width, height) => {
 export async function generateImageVariants(options) {
     return tracer.startActiveSpan('zone5.generateImageVariants', async (span) => {
         try {
-            const { base, processor, sourceFile, clear = false, forceOverwrite = false } = options;
+            const { processor, sourceFile, cacheDir, clear = false, forceOverwrite = false } = options;
             // Parse file path components
             const { name: fileBasename, ext: fileExtension } = parse(sourceFile);
             // Get source image metadata to check dimensions
@@ -25,26 +25,29 @@ export async function generateImageVariants(options) {
                 'zone5.sourceFile': sourceFile,
                 'zone5.sourceWidth': sourceWidth,
                 'zone5.validWidthsCount': validWidths.length,
+                'zone5.cacheDir': cacheDir,
                 'zone5.clear': clear,
                 'zone5.forceOverwrite': forceOverwrite,
             });
-            // Create cache subdirectory
-            const sourceHash = sourceFileHash(base.root, sourceFile);
-            const cacheSubDir = join(base.cache, `${fileBasename}-${sourceHash}`);
+            // Prepare cache directory
             if (clear) {
-                await rm(cacheSubDir, { recursive: true, force: true });
+                await rm(cacheDir, { recursive: true, force: true });
             }
-            await ensureDirectoryExists(cacheSubDir);
+            await ensureDirectoryExists(cacheDir);
             // Generate variants for each valid width
             const variants = [];
             let generatedCount = 0;
             for (const width of validWidths) {
                 const variantFilename = `${fileBasename}-${width}${fileExtension}`;
-                const variantPath = join(cacheSubDir, variantFilename);
+                const variantPath = join(cacheDir, variantFilename);
                 // 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.0.1",
+	"version": "1.2.0",
 	"repository": {
 		"url": "https://github.com/cwygoda/zone5"
 	},