zone5 1.1.0 → 1.2.1

package/dist/components/Zone5.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, untrack } from 'svelte';
 
-	import Img from './Zone5Img.svelte';
 	import { useImageRegistry } from './Zone5Provider.svelte';
-	import {
-		DEFAULT_COLUMN_BREAKPOINTS,
-		SINGLE_IMAGE_HEIGHT_CLASS,
-		WALL_IMAGE_HEIGHT_CLASS,
-	} from './constants';
+	import Zone5Single from './Zone5Single.svelte';
+	import Zone5Wall from './Zone5Wall.svelte';
+	import Zone5Waterfall from './Zone5Waterfall.svelte';
+	import { DEFAULT_COLUMN_BREAKPOINTS } from './constants';
 	import type { ImageData } from './types';
 
 	interface Props {
@@ -29,9 +27,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
@@ -51,103 +55,20 @@
 			imageStore.setCurrent(componentId, index);
 		}
 	}
-
-	// WATERFALL MODE CALCULATIONS
-	let containerWidth = $state(0);
-
-	/**
-	 * Calculate number of columns based on container width and breakpoints
-	 */
-	let nColumns = $derived.by(() => {
-		if (mode !== 'waterfall') return 1;
-
-		let columns = 1;
-		const sortedBreakpoints = Object.entries(columnBreakpoints).sort(
-			([a], [b]) => Number(a) - Number(b),
-		);
-
-		for (const [breakpoint, cols] of sortedBreakpoints) {
-			if (containerWidth >= Number(breakpoint)) {
-				columns = cols;
-			}
-		}
-
-		return columns;
-	});
-
-	/**
-	 * Distribute images across columns in round-robin fashion
-	 */
-	let colPhotos = $derived.by(() => {
-		if (mode !== 'waterfall') return [];
-
-		const cols: { image: ImageData; idx: number }[][] = Array.from({ length: nColumns }, () => []);
-		images.forEach((image, idx) => {
-			cols[idx % nColumns].push({ image, idx });
-		});
-
-		return cols;
-	});
-
-	/**
-	 * Calculate filler heights to equalize column heights in waterfall mode
-	 */
-	let colFillers = $derived.by(() => {
-		if (mode !== 'waterfall') return [];
-
-		const totalHeights = colPhotos.map((col) =>
-			col.reduce((sum, img) => sum + 1 / img.image.properties.aspectRatio, 0),
-		);
-		const maxHeight = Math.max(...totalHeights);
-
-		return totalHeights.map((height) => maxHeight - height);
-	});
 </script>
 
 {#if mode === 'wall' && images.length === 1}
-	{@const image = images[0]}
-	<figure class="flex justify-center" aria-label={image.properties.title || 'Image'}>
-		<Img
-			{image}
-			class={SINGLE_IMAGE_HEIGHT_CLASS}
-			onclick={imageStore ? () => handleImageClick(0) : undefined}
-		/>
-		{#if image.properties.title && !nocaption}
-			<figcaption class="mt-2 text-sm text-gray-600">
-				{image.properties.title}
-			</figcaption>
-		{/if}
-	</figure>
+	<Zone5Single
+		image={images[0]}
+		{nocaption}
+		onclick={imageStore ? () => handleImageClick(0) : undefined}
+	/>
 {:else if mode === 'wall'}
-	<div class="flex gap-2 flex-col md:flex-row md:flex-wrap zone5-wall" role="list">
-		{#each images as image, idx (idx)}
-			<div class="grow {WALL_IMAGE_HEIGHT_CLASS} flex" role="listitem">
-				<Img
-					{image}
-					cover
-					class="grow"
-					onclick={imageStore ? () => handleImageClick(idx) : undefined}
-				/>
-			</div>
-		{/each}
-	</div>
+	<Zone5Wall {images} onImageClick={imageStore ? handleImageClick : undefined} />
 {:else if mode === 'waterfall'}
-	<div class="flex gap-2" bind:clientWidth={containerWidth} role="list">
-		{#each Array.from({ length: nColumns }, (_, i) => i) as columnId (columnId)}
-			<div class="flex flex-col gap-2" role="listitem">
-				{#each colPhotos[columnId] as { image, idx } (idx)}
-					<div>
-						<Img {image} onclick={imageStore ? () => handleImageClick(idx) : undefined} />
-					</div>
-				{/each}
-				{#if colFillers[columnId] > 0}
-					<div
-						class="bg-slate-200 rounded"
-						style:height={colFillers[columnId] * 100 + '%'}
-						aria-hidden="true"
-					></div>
-				{/if}
-			</div>
-		{/each}
-	</div>
+	<Zone5Waterfall
+		{columnBreakpoints}
+		{images}
+		onImageClick={imageStore ? handleImageClick : undefined}
+	/>
 {/if}

package/dist/components/Zone5Img.svelte

@@ -25,16 +25,37 @@
 		return breakpoints.join(', ');
 	});
 
-	let img: HTMLImageElement;
 	let loaded = $state(false);
-	$effect(() => {
-		loaded = img.complete;
-		const handleLoad = () => (loaded = true);
-		img.addEventListener('load', handleLoad);
-		return () => {
-			img.removeEventListener('load', handleLoad);
+
+	// Action to handle image load state - runs when element is mounted
+	const useImageLoad: Action<HTMLImageElement> = (node) => {
+		const handleLoad = () => {
+			loaded = true;
 		};
-	});
+
+		// Check if already loaded (e.g., from cache)
+		if (node.complete && node.naturalWidth > 0) {
+			loaded = true;
+			return;
+		}
+
+		// Not loaded yet - add listener first, then recheck to avoid race condition
+		loaded = false;
+		node.addEventListener('load', handleLoad);
+
+		// Recheck complete after adding listener in case image loaded during setup
+		if (node.complete && node.naturalWidth > 0) {
+			loaded = true;
+			node.removeEventListener('load', handleLoad);
+			return;
+		}
+
+		return {
+			destroy: () => {
+				node.removeEventListener('load', handleLoad);
+			}
+		};
+	};
 
 	const useOnclick: Action<HTMLDivElement, (() => void) | undefined> = (node, handler) => {
 		const setHandler = (handler?: () => void | undefined) => {
@@ -91,7 +112,7 @@
 					'opacity-100': loaded,
 				},
 			]}
-			bind:this={img}
+			use:useImageLoad
 		/>
 	</picture>
 </div>

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/components/Zone5Single.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import Img from './Zone5Img.svelte';
+	import { SINGLE_IMAGE_HEIGHT_CLASS } from './constants';
+	import type { ImageData } from './types';
+
+	interface Props {
+		image: ImageData;
+		nocaption?: boolean;
+		onclick?: () => void;
+	}
+
+	let { image, nocaption = false, onclick }: Props = $props();
+</script>
+
+<figure class="flex justify-center" aria-label={image.properties.title || 'Image'}>
+	<Img {image} class={SINGLE_IMAGE_HEIGHT_CLASS} {onclick} />
+	{#if image.properties.title && !nocaption}
+		<figcaption class="mt-2 text-sm text-gray-600">
+			{image.properties.title}
+		</figcaption>
+	{/if}
+</figure>

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

@@ -0,0 +1,9 @@
+import type { ImageData } from './types';
+interface Props {
+    image: ImageData;
+    nocaption?: boolean;
+    onclick?: () => void;
+}
+declare const Zone5Single: import("svelte").Component<Props, {}, "">;
+type Zone5Single = ReturnType<typeof Zone5Single>;
+export default Zone5Single;

package/dist/components/Zone5Wall.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Img from './Zone5Img.svelte';
+	import { WALL_IMAGE_HEIGHT_CLASS } from './constants';
+	import type { ImageData } from './types';
+
+	interface Props {
+		images: ImageData[];
+		onImageClick?: (index: number) => void;
+	}
+
+	let { images, onImageClick }: Props = $props();
+</script>
+
+<div class="flex gap-2 flex-col md:flex-row md:flex-wrap zone5-wall" role="list">
+	{#each images as image, idx (idx)}
+		<div class="grow {WALL_IMAGE_HEIGHT_CLASS} flex" role="listitem">
+			<Img
+				{image}
+				cover
+				class="grow"
+				onclick={onImageClick ? () => onImageClick(idx) : undefined}
+			/>
+		</div>
+	{/each}
+</div>

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

@@ -0,0 +1,8 @@
+import type { ImageData } from './types';
+interface Props {
+    images: ImageData[];
+    onImageClick?: (index: number) => void;
+}
+declare const Zone5Wall: import("svelte").Component<Props, {}, "">;
+type Zone5Wall = ReturnType<typeof Zone5Wall>;
+export default Zone5Wall;

package/dist/components/Zone5Waterfall.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import Img from './Zone5Img.svelte';
+	import { DEFAULT_COLUMN_BREAKPOINTS } from './constants';
+	import type { ImageData } from './types';
+
+	interface Props {
+		columnBreakpoints?: { [key: number]: number };
+		images: ImageData[];
+		onImageClick?: (index: number) => void;
+	}
+
+	let { columnBreakpoints = DEFAULT_COLUMN_BREAKPOINTS, images, onImageClick }: Props = $props();
+
+	let containerWidth = $state(0);
+
+	/**
+	 * Calculate number of columns based on container width and breakpoints
+	 */
+	let nColumns = $derived.by(() => {
+		let columns = 1;
+		const sortedBreakpoints = Object.entries(columnBreakpoints).sort(
+			([a], [b]) => Number(a) - Number(b),
+		);
+
+		for (const [breakpoint, cols] of sortedBreakpoints) {
+			if (containerWidth >= Number(breakpoint)) {
+				columns = cols;
+			}
+		}
+
+		return columns;
+	});
+
+	/**
+	 * Distribute images across columns in round-robin fashion
+	 */
+	let colPhotos = $derived.by(() => {
+		const cols: { image: ImageData; idx: number }[][] = Array.from({ length: nColumns }, () => []);
+		images.forEach((image, idx) => {
+			cols[idx % nColumns].push({ image, idx });
+		});
+
+		return cols;
+	});
+
+	/**
+	 * Calculate filler heights to equalize column heights in waterfall mode
+	 */
+	let colFillers = $derived.by(() => {
+		const totalHeights = colPhotos.map((col) =>
+			col.reduce((sum, img) => sum + 1 / img.image.properties.aspectRatio, 0),
+		);
+		const maxHeight = Math.max(...totalHeights);
+
+		return totalHeights.map((height) => maxHeight - height);
+	});
+</script>
+
+<div class="flex gap-2" bind:clientWidth={containerWidth} role="list">
+	{#each Array.from({ length: nColumns }, (_, i) => i) as columnId (columnId)}
+		<div class="flex flex-col gap-2" role="listitem">
+			{#each colPhotos[columnId] as { image, idx } (idx)}
+				<div>
+					<Img {image} onclick={onImageClick ? () => onImageClick(idx) : undefined} />
+				</div>
+			{/each}
+			{#if colFillers[columnId] > 0}
+				<div
+					class="bg-slate-200 rounded"
+					style:height={colFillers[columnId] * 100 + '%'}
+					aria-hidden="true"
+				></div>
+			{/if}
+		</div>
+	{/each}
+</div>

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

@@ -0,0 +1,11 @@
+import type { ImageData } from './types';
+interface Props {
+    columnBreakpoints?: {
+        [key: number]: number;
+    };
+    images: ImageData[];
+    onImageClick?: (index: number) => void;
+}
+declare const Zone5Waterfall: import("svelte").Component<Props, {}, "">;
+type Zone5Waterfall = ReturnType<typeof Zone5Waterfall>;
+export default Zone5Waterfall;

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/module.d.ts

@@ -1,4 +1,4 @@
-// Augment mdast types
+// Augment mdast types for remark plugin
 import type { SvelteComponent } from 'svast';
 
 declare module 'mdast' {
@@ -10,10 +10,3 @@ declare module 'mdast' {
 		svelteComponent: SvelteComponent;
 	}
 }
-
-declare module '*?z5' {
-	import type { ItemFeature } from './processor';
-
-	const data: ItemFeature;
-	export default data;
-}

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.1",
 	"repository": {
 		"url": "https://github.com/cwygoda/zone5"
 	},
@@ -13,6 +13,8 @@
 		"build:cli": "vite build --config vite.cli.config.ts",
 		"build:watch": "vite build --watch",
 		"build": "svelte-kit sync && svelte-package && pnpm build:cli && publint",
+		"build:site": "vite build",
+		"build:all": "pnpm build && pnpm build:site",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"dev": "vite dev",
@@ -29,6 +31,7 @@
 		"dagger:test:all": "dagger -m ./dagger call test-all --source=.",
 		"dagger:check": "dagger -m ./dagger call check --source=.",
 		"dagger:lint": "dagger -m ./dagger call lint --source=.",
+		"dagger:build:site": "dagger -m ./dagger call build-site --source=.",
 		"dagger:ci": "dagger -m ./dagger call ci --source=.",
 		"prepare": "husky"
 	},
@@ -85,6 +88,7 @@
 		"@dagger.io/dagger": "^0.19.6",
 		"@lucide/svelte": "0.553.0",
 		"@playwright/test": "^1.56.1",
+		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.48.4",
 		"@sveltejs/package": "^2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
@@ -126,6 +130,7 @@
 		"fast-average-color-node": "^3.1.0",
 		"fs-extra": "^11.2.0",
 		"globals": "^16.5.0",
+		"mdast-util-to-string": "^4.0.0",
 		"mime": "^4.1.0",
 		"ora": "^9.0.0",
 		"picocolors": "^1.1.1",