zone5 0.0.0 → 1.0.1

package/dist/components/Zone5.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { onMount } 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 type { ImageData } from './types';
+
+	interface Props {
+		columnBreakpoints?: { [key: number]: number };
+		images: ImageData[];
+		mode?: 'wall' | 'waterfall';
+		nocaption?: boolean;
+	}
+
+	let {
+		columnBreakpoints = DEFAULT_COLUMN_BREAKPOINTS,
+		images,
+		mode = 'wall',
+		nocaption = false,
+	}: Props = $props();
+
+	const imageStore = useImageRegistry();
+	const componentId: symbol = Symbol('Zone5Component');
+
+	// Register images with the global image registry
+	$effect(() => {
+		if (imageStore) {
+			imageStore.register(componentId, images);
+		}
+	});
+
+	// Cleanup on component unmount
+	onMount(() => {
+		return () => {
+			if (imageStore) {
+				imageStore.remove(componentId);
+			}
+		};
+	});
+
+	/**
+	 * Opens the lightbox for the image at the specified index
+	 */
+	function handleImageClick(index: number): void {
+		if (imageStore) {
+			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>
+{: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>
+{: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>
+{/if}

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

@@ -0,0 +1,12 @@
+import type { ImageData } from './types';
+interface Props {
+    columnBreakpoints?: {
+        [key: number]: number;
+    };
+    images: ImageData[];
+    mode?: 'wall' | 'waterfall';
+    nocaption?: boolean;
+}
+declare const Zone5: import("svelte").Component<Props, {}, "">;
+type Zone5 = ReturnType<typeof Zone5>;
+export default Zone5;

package/dist/components/Zone5Img.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import type { Action } from 'svelte/action';
+
+	import type { ImageData } from './types';
+
+	interface Props {
+		image: ImageData;
+		class?: string;
+		cover?: boolean;
+		onclick?: () => void;
+	}
+
+	let { image, class: _class, cover, onclick }: Props = $props();
+
+	const sizes = $derived.by(() => {
+		const widths = image.assets.map((a) => a.width).sort((a, b) => a - b);
+		const maxWidth = Math.max(...widths);
+
+		// Generate breakpoints based on actual asset widths
+		const breakpoints = [];
+		if (maxWidth >= 1200) breakpoints.push('(min-width: 1200px) 1200px');
+		if (maxWidth >= 768) breakpoints.push('(min-width: 768px) 768px');
+		breakpoints.push(`${Math.min(maxWidth, 640)}px`);
+
+		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);
+		};
+	});
+
+	const useOnclick: Action<HTMLDivElement, (() => void) | undefined> = (node, handler) => {
+		const setHandler = (handler?: () => void | undefined) => {
+			const keyHandler = (event: KeyboardEvent) => {
+				if (!handler) return;
+				if (event.key === ' ' || event.key === 'Enter') {
+					event.preventDefault();
+					handler();
+				}
+			};
+			if (handler) {
+				node.onclick = handler;
+				node.onkeydown = keyHandler;
+				node.role = 'button';
+				node.tabIndex = 0;
+				node.classList.add('cursor-pointer');
+			} else {
+				node.onclick = null;
+				node.onkeydown = null;
+				node.role = null;
+				node.tabIndex = -1;
+				node.classList.remove('cursor-pointer');
+			}
+		};
+		setHandler(handler);
+		return {
+			update: (handler) => setHandler(handler),
+			destroy: () => setHandler(),
+		};
+	};
+</script>
+
+<div
+	use:useOnclick={onclick}
+	style="background-color:{image.properties.averageColor.hex}; --aspect-ratio: {image.properties
+		.aspectRatio}"
+	class={['aspect-ratio', 'relative', _class]}
+	data-zone5-img="true"
+>
+	<picture class="w-full h-full flex justify-center relative mb-0 mt-0">
+		<img
+			src={image.assets[0].href}
+			alt={image.properties.alt}
+			title={image.properties.title}
+			srcset={image.assets.map((asset) => `${asset.href} ${asset.width}w`).join(', ')}
+			{sizes}
+			loading="lazy"
+			decoding="async"
+			class={[
+				'transition-opacity duration-100',
+				{
+					'object-cover h-full w-full': cover,
+					'opacity-0': !loaded,
+					'opacity-100': loaded,
+				},
+			]}
+			bind:this={img}
+		/>
+	</picture>
+</div>
+
+<style>
+	.aspect-ratio {
+		aspect-ratio: var(--aspect-ratio) auto;
+	}
+</style>

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

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

package/dist/components/Zone5Lightbox.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+
+	import Img from './Zone5Img.svelte';
+	import CloseButton from './atoms/CloseButton.svelte';
+	import NextButton from './atoms/NextButton.svelte';
+	import PrevButton from './atoms/PrevButton.svelte';
+	import portal from './portal';
+	import type { ImageData } from './types';
+
+	interface Props {
+		force?: boolean;
+		image?: ImageData;
+		onclose: () => void;
+		onnext?: () => void;
+		onprevious?: () => void;
+		transitionDuration?: number;
+	}
+
+	let { force, image, onclose, onnext, onprevious, transitionDuration = 300 }: Props = $props();
+
+	let transitioning = $state(false);
+	let visible = $derived(image && !transitioning);
+	let onFigureOutroEnd: (() => void) | undefined = undefined;
+	const nextHandler = () => {
+		transitioning = true;
+		onFigureOutroEnd = onnext;
+	};
+	const prevHandler = () => {
+		transitioning = true;
+		onFigureOutroEnd = onprevious;
+	};
+
+	const keyHandler = (evt: KeyboardEvent) => {
+		if (!image) return;
+		switch (evt.key) {
+			case 'Escape':
+				evt.preventDefault();
+				onclose();
+				break;
+			case ' ':
+				// Only prevent default for spacebar when dialog is active
+				evt.preventDefault();
+				if (visible) {
+					nextHandler();
+				}
+				break;
+			case 'ArrowRight':
+				if (visible) {
+					evt.preventDefault();
+					nextHandler();
+				}
+				break;
+			case 'ArrowLeft':
+				if (visible) {
+					evt.preventDefault();
+					prevHandler();
+				}
+				break;
+		}
+	};
+</script>
+
+<svelte:window onkeydown={keyHandler} />
+{#if image || force}
+	<section
+		use:portal
+		role="dialog"
+		transition:fade={{ duration: force ? 0 : transitionDuration }}
+		class="fixed z-50 inset-0 bg-zinc-50 text-zinc-950"
+		data-zone5-lightbox="true"
+	>
+		<nav>
+			<CloseButton
+				class={[
+					'absolute right-0 top-0 z-30 cursor-pointer p-4',
+					'transition delay-150 duration-300 hover:bg-zinc-100/10',
+				]}
+				{onclose}
+				data-zone5-close
+			/>
+			{#if onprevious}
+				<PrevButton
+					class={[
+						'absolute left-0 top-1/2 z-30 -translate-y-1/2 cursor-pointer p-2',
+						'transition delay-150 duration-300 hover:bg-zinc-100/10',
+					]}
+					disabled={!visible}
+					onprevious={prevHandler}
+					data-zone5-prev
+				/>
+			{/if}
+			{#if onnext}
+				<NextButton
+					class={[
+						'absolute right-0 top-1/2 z-30 -translate-y-1/2 cursor-pointer p-2',
+						'transition delay-150 duration-300 hover:bg-zinc-100/10',
+					]}
+					disabled={!visible}
+					onnext={nextHandler}
+					data-zone5-next
+				/>
+			{/if}
+		</nav>
+		{#if image && visible}
+			<figure
+				transition:fade={{ duration: transitionDuration }}
+				onoutroend={() => {
+					onFigureOutroEnd?.();
+					transitioning = false;
+				}}
+				class="h-full w-full flex flex-col justify-between items-center p-8"
+			>
+				<div class="flex-1 flex items-center justify-center min-h-0">
+					<Img {image} class="min-h-0 max-h-full" />
+				</div>
+				{#if image.properties.title}
+					<figcaption class="pt-2 text-center">
+						{image.properties.title}
+					</figcaption>
+				{/if}
+			</figure>
+		{/if}
+	</section>
+{/if}
+
+<style>
+	:global(html:has([role='dialog'])) {
+		overflow: hidden;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { ImageData } from './types';
+interface Props {
+    force?: boolean;
+    image?: ImageData;
+    onclose: () => void;
+    onnext?: () => void;
+    onprevious?: () => void;
+    transitionDuration?: number;
+}
+declare const Zone5Lightbox: import("svelte").Component<Props, {}, "">;
+type Zone5Lightbox = ReturnType<typeof Zone5Lightbox>;
+export default Zone5Lightbox;

package/dist/components/Zone5Provider.svelte

@@ -0,0 +1,68 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+
+	const key = Symbol('Zone5 provider');
+	export const useImageRegistry = () => getContext<Registry>(key);
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { queryParameters } from 'sveltekit-search-params';
+
+	import { beforeNavigate } from '$app/navigation';
+
+	import { type Registry, registry } from '../stores';
+	import Zone5Lightbox from './Zone5Lightbox.svelte';
+
+	let { children }: { children: Snippet } = $props();
+
+	setContext<Registry>(key, registry);
+
+	// URL state store
+	const params = queryParameters({
+		z5: true,
+	});
+	let optimisticForce = $state($params.z5 !== null);
+
+	// clear registry when navigating away
+	beforeNavigate((navigation) => {
+		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;
+			}
+		}
+	});
+
+	// 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)) {
+				optimisticForce = false;
+				$params.z5 = null;
+			}
+		}
+	});
+</script>
+
+<Zone5Lightbox
+	force={optimisticForce}
+	image={$registry.current ?? undefined}
+	onclose={() => {
+		optimisticForce = false;
+		registry.clearCurrent();
+	}}
+	onprevious={registry.prev}
+	onnext={registry.next}
+/>
+{@render children()}

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

@@ -0,0 +1,9 @@
+export declare const useImageRegistry: () => Registry;
+import type { Snippet } from 'svelte';
+import { type Registry } from '../stores';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const Zone5Provider: import("svelte").Component<$$ComponentProps, {}, "">;
+type Zone5Provider = ReturnType<typeof Zone5Provider>;
+export default Zone5Provider;

package/dist/components/atoms/Button.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		'aria-label'?: string;
+		children: Snippet;
+		disabled?: boolean;
+		class?: string | string[];
+		onaction: () => void;
+		tabindex?: number;
+		[key: string]: unknown;
+	}
+
+	let {
+		'aria-label': aria_label,
+		children,
+		class: class_,
+		disabled = false,
+		onaction,
+		tabindex = 0,
+		...rest
+	}: Props = $props();
+</script>
+
+<button
+	class={class_}
+	{disabled}
+	onclick={onaction}
+	onkeydown={(evt) => {
+		if (evt.key == ' ' || evt.key == 'Enter') {
+			evt.preventDefault();
+			onaction();
+		}
+	}}
+	{tabindex}
+	aria-label={aria_label}
+	{...rest}
+>
+	{@render children()}
+</button>

package/dist/components/atoms/Button.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    'aria-label'?: string;
+    children: Snippet;
+    disabled?: boolean;
+    class?: string | string[];
+    onaction: () => void;
+    tabindex?: number;
+    [key: string]: unknown;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/atoms/CloseButton.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { X } from '@lucide/svelte';
+
+	import Button from './Button.svelte';
+
+	interface Props {
+		class?: string | string[];
+		onclose: () => void;
+		tabindex?: number;
+		[key: string]: unknown;
+	}
+
+	let { class: class_, onclose, tabindex = 0, ...rest }: Props = $props();
+</script>
+
+<Button class={class_} onaction={onclose} {tabindex} aria-label="close" {...rest}>
+	<X />
+</Button>

package/dist/components/atoms/CloseButton.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    class?: string | string[];
+    onclose: () => void;
+    tabindex?: number;
+    [key: string]: unknown;
+}
+declare const CloseButton: import("svelte").Component<Props, {}, "">;
+type CloseButton = ReturnType<typeof CloseButton>;
+export default CloseButton;

package/dist/components/atoms/NextButton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { ChevronRight } from '@lucide/svelte';
+
+	import Button from './Button.svelte';
+
+	interface Props {
+		class?: string | string[];
+		disabled?: boolean;
+		onnext: () => void;
+		tabindex?: number;
+		[key: string]: unknown;
+	}
+
+	let { class: class_, disabled, onnext, tabindex = 0, ...rest }: Props = $props();
+</script>
+
+<Button class={class_} {disabled} onaction={onnext} {tabindex} aria-label="next" {...rest}>
+	<ChevronRight />
+</Button>

package/dist/components/atoms/NextButton.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    class?: string | string[];
+    disabled?: boolean;
+    onnext: () => void;
+    tabindex?: number;
+    [key: string]: unknown;
+}
+declare const NextButton: import("svelte").Component<Props, {}, "">;
+type NextButton = ReturnType<typeof NextButton>;
+export default NextButton;

package/dist/components/atoms/PrevButton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { ChevronLeft } from '@lucide/svelte';
+
+	import Button from './Button.svelte';
+
+	interface Props {
+		class?: string | string[];
+		disabled?: boolean;
+		onprevious: () => void;
+		tabindex?: number;
+		[key: string]: unknown;
+	}
+
+	let { class: class_, disabled, onprevious, tabindex = 0, ...rest }: Props = $props();
+</script>
+
+<Button class={class_} {disabled} onaction={onprevious} {tabindex} aria-label="previous" {...rest}>
+	<ChevronLeft />
+</Button>

package/dist/components/atoms/PrevButton.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    class?: string | string[];
+    disabled?: boolean;
+    onprevious: () => void;
+    tabindex?: number;
+    [key: string]: unknown;
+}
+declare const PrevButton: import("svelte").Component<Props, {}, "">;
+type PrevButton = ReturnType<typeof PrevButton>;
+export default PrevButton;

package/dist/components/atoms/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Button } from './Button.svelte';
+export { default as CloseButton } from './CloseButton.svelte';
+export { default as NextButton } from './NextButton.svelte';
+export { default as PrevButton } from './PrevButton.svelte';

package/dist/components/atoms/index.js

@@ -0,0 +1,5 @@
+// Component exports
+export { default as Button } from './Button.svelte';
+export { default as CloseButton } from './CloseButton.svelte';
+export { default as NextButton } from './NextButton.svelte';
+export { default as PrevButton } from './PrevButton.svelte';

package/dist/components/constants.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Default column breakpoints for waterfall mode.
+ * Maps viewport width (in pixels) to number of columns.
+ */
+export declare const DEFAULT_COLUMN_BREAKPOINTS: {
+    readonly 640: 2;
+    readonly 768: 3;
+    readonly 1024: 4;
+};
+/**
+ * Height for single image in wall mode (Tailwind class)
+ */
+export declare const SINGLE_IMAGE_HEIGHT_CLASS = "h-96";
+/**
+ * Height for multiple images in wall mode (Tailwind class)
+ */
+export declare const WALL_IMAGE_HEIGHT_CLASS = "h-96";