zone5 1.2.0 → 1.3.0

package/dist/components/Zone5.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
 	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 {
@@ -57,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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { untrack } from 'svelte';
 	import type { Action } from 'svelte/action';
 
 	import type { ImageData } from './types';
@@ -26,33 +25,37 @@
 		return breakpoints.join(', ');
 	});
 
-	let img: HTMLImageElement;
-	let loaded = $state(true);
+	let loaded = $state(false);
 
-	$effect(() => {
-		// 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;
+	// Action to handle image load state - runs when element is mounted
+	const useImageLoad: Action<HTMLImageElement> = (node) => {
+		const handleLoad = () => {
+			loaded = true;
+		};
 
-		if (!imgEl) return;
-		if (imgEl.complete) {
-			untrack(() => {
-				loaded = true;
-			});
+		// Check if already loaded (e.g., from cache)
+		if (node.complete && node.naturalWidth > 0) {
+			loaded = true;
 			return;
 		}
 
-		untrack(() => {
-			loaded = false;
-		});
-		const handleLoad = () => (loaded = true);
-		imgEl.addEventListener('load', handleLoad);
+		// 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 () => {
-			imgEl.removeEventListener('load', handleLoad);
+		return {
+			destroy: () => {
+				node.removeEventListener('load', handleLoad);
+			}
 		};
-	});
+	};
 
 	const useOnclick: Action<HTMLDivElement, (() => void) | undefined> = (node, handler) => {
 		const setHandler = (handler?: () => void | undefined) => {
@@ -109,7 +112,7 @@
 					'opacity-100': loaded,
 				},
 			]}
-			bind:this={img}
+			use:useImageLoad
 		/>
 	</picture>
 </div>

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

@@ -1,2 +1,6 @@
 import type { Plugin } from 'vite';
-export declare function zone5(cwd?: string): Plugin;
+export interface Zone5PluginOptions {
+    cwd?: string;
+    basePath?: string;
+}
+export declare function zone5(options?: Zone5PluginOptions): Plugin;

package/dist/vite.js

@@ -38,7 +38,7 @@ const serve = (basePath, cacheDir) => async (req, res, next) => {
     }
     next();
 };
-export function zone5(cwd) {
+export function zone5(options = {}) {
     let viteConfig;
     let basePath;
     let zone5Config;
@@ -47,8 +47,11 @@ export function zone5(cwd) {
         enforce: 'pre',
         async configResolved(cfg) {
             viteConfig = cfg;
-            zone5Config = await load(cwd);
-            basePath = createBasePath(zone5Config.base.namespace, viteConfig.base);
+            zone5Config = await load(options.cwd);
+            const base = options.basePath
+                ? `${options.basePath.replace(/\/$/, '')}/${viteConfig.base.replace(/^\//, '')}`
+                : viteConfig.base;
+            basePath = createBasePath(zone5Config.base.namespace, base);
         },
         async resolveId(id, importer) {
             const srcURL = parseURL(id);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "zone5",
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"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",