zone5 0.0.0 → 1.0.1

package/dist/components/constants.js

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

package/dist/components/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Zone5 } from './Zone5.svelte';
+export { default as Zone5Provider, useImageRegistry } from './Zone5Provider.svelte';
+export { default as Zone5Img } from './Zone5Img.svelte';
+export { default as Zone5Lightbox } from './Zone5Lightbox.svelte';
+export type * from './types.js';
+export * from './portal.js';

package/dist/components/index.js

@@ -0,0 +1,7 @@
+// Component exports
+export { default as Zone5 } from './Zone5.svelte';
+export { default as Zone5Provider, useImageRegistry } from './Zone5Provider.svelte';
+export { default as Zone5Img } from './Zone5Img.svelte';
+export { default as Zone5Lightbox } from './Zone5Lightbox.svelte';
+// Export portal utilities
+export * from './portal.js';

package/dist/components/portal.d.ts

@@ -0,0 +1,4 @@
+import type { Action } from 'svelte/action';
+type targetSelector = HTMLElement | string | undefined;
+declare const portal: Action<HTMLElement, targetSelector>;
+export default portal;

package/dist/components/portal.js

@@ -0,0 +1,26 @@
+const resolveTarget = (target = 'body') => {
+    if (typeof target === 'string') {
+        const element = document.querySelector(target);
+        if (element === null) {
+            throw new Error(`portal: no element found matching css selector: "${target}"`);
+        }
+        return element;
+    }
+    return target;
+};
+const moveToTarget = (node, target) => {
+    resolveTarget(target).appendChild(node);
+};
+const removeFromParent = (node) => {
+    if (node.parentNode) {
+        node.parentNode.removeChild(node);
+    }
+};
+const portal = (node, target) => {
+    moveToTarget(node, resolveTarget(target));
+    return {
+        update: (target) => moveToTarget(node, resolveTarget(target)),
+        destroy: () => removeFromParent(node),
+    };
+};
+export default portal;

package/dist/components/types.d.ts

@@ -0,0 +1,7 @@
+import type { ItemFeature } from '../processor';
+export interface ImageData extends ItemFeature {
+    properties: ItemFeature['properties'] & {
+        alt: string;
+        title?: string;
+    };
+}

package/dist/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/config.d.ts

@@ -0,0 +1,51 @@
+import { z } from 'zod';
+declare const BaseConfigSchema: z.ZodObject<{
+    root: z.ZodDefault<z.ZodString>;
+    cache: z.ZodDefault<z.ZodString>;
+    namespace: z.ZodDefault<z.ZodString>;
+}, z.core.$strip>;
+export type BaseConfigType = z.infer<typeof BaseConfigSchema>;
+declare const ConfigSchema: z.ZodObject<{
+    base: z.ZodPrefault<z.ZodObject<{
+        root: z.ZodDefault<z.ZodString>;
+        cache: z.ZodDefault<z.ZodString>;
+        namespace: z.ZodDefault<z.ZodString>;
+    }, z.core.$strip>>;
+    processor: z.ZodPrefault<z.ZodPrefault<z.ZodObject<{
+        resize_kernel: z.ZodDefault<z.ZodEnum<{
+            [x: string]: any;
+        }>>;
+        resize_gamma: z.ZodDefault<z.ZodNumber>;
+        variants: z.ZodDefault<z.ZodArray<z.ZodNumber>>;
+    }, z.core.$strip>>>;
+}, z.core.$strip>;
+export type ConfigType = z.infer<typeof ConfigSchema>;
+export declare const walkUntilFound: (path: string) => Promise<string | undefined>;
+export declare const load: (configDir?: string | undefined) => Promise<{
+    base: {
+        root: string;
+        cache: string;
+        namespace: string;
+    };
+    processor: {
+        resize_kernel: any;
+        resize_gamma: number;
+        variants: number[];
+    };
+} | {
+    src: string;
+    base: {
+        root: string;
+        cache: string;
+        namespace: string;
+    };
+    processor: {
+        resize_kernel: any;
+        resize_gamma: number;
+        variants: number[];
+    };
+}>;
+export declare const toToml: (config: ConfigType & {
+    src?: string;
+}) => string;
+export {};

package/dist/config.js

@@ -0,0 +1,56 @@
+import { access } from 'node:fs/promises';
+import { join, parse, relative, resolve } from 'node:path';
+import { cwd } from 'node:process';
+import { stringify } from 'smol-toml';
+import { z } from 'zod';
+import { loadConfig } from 'zod-config';
+import { tomlAdapter } from 'zod-config/toml-adapter';
+import { ProcessorConfigSchema } from './processor/config.js';
+const BaseConfigSchema = z.object({
+    root: z.string().default(cwd()),
+    cache: z.string().default(join(cwd(), '.zone5')),
+    namespace: z.string().default('@zone5'),
+});
+const ConfigSchema = z.object({
+    base: BaseConfigSchema.prefault({}),
+    processor: ProcessorConfigSchema.prefault({}),
+});
+export const walkUntilFound = async (path) => {
+    try {
+        await access(path);
+        return path;
+    }
+    catch {
+        const parsed = parse(path);
+        if (parsed.dir != '/') {
+            const next = join(parsed.dir, '..', parsed.base);
+            return await walkUntilFound(next);
+        }
+    }
+    return undefined;
+};
+export const load = async (configDir = undefined) => {
+    const tomlFile = await walkUntilFound(resolve(configDir || cwd(), '.zone5.toml'));
+    if (tomlFile) {
+        const config = await loadConfig({
+            schema: ConfigSchema,
+            adapters: tomlAdapter({ path: tomlFile }),
+        });
+        // TODO: Define z.Path type which the adapter resolves?
+        const tomlFileDir = parse(tomlFile).dir;
+        config.base.root = resolve(tomlFileDir, config.base.root);
+        config.base.cache = resolve(tomlFileDir, config.base.cache);
+        return { ...config, src: tomlFile };
+    }
+    return ConfigSchema.parse({});
+};
+export const toToml = (config) => {
+    const data = ConfigSchema.parse(config);
+    // output relative paths
+    if (config.src) {
+        const srcDir = parse(config.src).dir;
+        data.base.root = relative(srcDir, data.base.root);
+        data.base.cache = relative(srcDir, data.base.cache);
+    }
+    return stringify(data);
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { load } from './config.js';
+export type { BaseConfigType, ConfigType } from './config.js';
+export { default, default as processor } from './processor/index.js';
+export type * from './processor/index.js';
+export type * from './components/types.js';
+export type * from './module.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+// Main exports
+export { load } from './config.js';
+// Re-export processor
+export { default, default as processor } from './processor/index.js';

package/dist/module.d.ts

@@ -0,0 +1,19 @@
+// Augment mdast types
+import type { SvelteComponent } from 'svast';
+
+declare module 'mdast' {
+	interface RootContentMap {
+		raw: {
+			type: 'raw';
+			value: string;
+		};
+		svelteComponent: SvelteComponent;
+	}
+}
+
+declare module '*?z5' {
+	import type { ItemFeature } from './processor';
+
+	const data: ItemFeature;
+	export default data;
+}

package/dist/processor/blurhash.d.ts

@@ -0,0 +1,7 @@
+export interface BlurhashOptions {
+    componentX?: number;
+    componentY?: number;
+    width?: number;
+    height?: number;
+}
+export declare function generateBlurhash(imagePath: string, options?: BlurhashOptions): Promise<string>;

package/dist/processor/blurhash.js

@@ -0,0 +1,37 @@
+import { SpanStatusCode, trace } from '@opentelemetry/api';
+import { encode } from 'blurhash';
+import sharp from 'sharp';
+const tracer = trace.getTracer('zone5-processor-blurhash');
+export async function generateBlurhash(imagePath, options = {}) {
+    return tracer.startActiveSpan('zone5.generateBlurhash', async (span) => {
+        try {
+            const { componentX = 4, componentY = 4, width = 100, height = 100 } = options;
+            span.setAttributes({
+                'zone5.imagePath': imagePath,
+                'zone5.componentX': componentX,
+                'zone5.componentY': componentY,
+                'zone5.width': width,
+                'zone5.height': height,
+            });
+            const { data, info } = await sharp(imagePath)
+                .resize(width, height, { fit: 'inside' })
+                .ensureAlpha()
+                .raw()
+                .toBuffer({ resolveWithObject: true });
+            const blurhash = encode(new Uint8ClampedArray(data), info.width, info.height, componentX, componentY);
+            span.setStatus({ code: SpanStatusCode.OK });
+            return blurhash;
+        }
+        catch (error) {
+            span.setStatus({
+                code: SpanStatusCode.ERROR,
+                message: error instanceof Error ? error.message : String(error),
+            });
+            span.recordException(error instanceof Error ? error : new Error(String(error)));
+            throw new Error(`Failed to generate blurhash for ${imagePath}: ${error}`);
+        }
+        finally {
+            span.end();
+        }
+    });
+}

package/dist/processor/color.d.ts

@@ -0,0 +1,5 @@
+export interface DominantColor {
+    hex: string;
+    isDark: boolean;
+}
+export declare function getDominantColors(imagePath: string): Promise<DominantColor>;

package/dist/processor/color.js

@@ -0,0 +1,32 @@
+import { SpanStatusCode, trace } from '@opentelemetry/api';
+import { getAverageColor } from 'fast-average-color-node';
+const tracer = trace.getTracer('zone5-processor-color');
+export async function getDominantColors(imagePath) {
+    return tracer.startActiveSpan('zone5.getDominantColors', async (span) => {
+        try {
+            span.setAttribute('zone5.imagePath', imagePath);
+            const result = await getAverageColor(imagePath, {});
+            const color = {
+                hex: result.hex,
+                isDark: result.isDark,
+            };
+            span.setAttributes({
+                'zone5.color.hex': color.hex,
+                'zone5.color.isDark': color.isDark,
+            });
+            span.setStatus({ code: SpanStatusCode.OK });
+            return color;
+        }
+        catch (error) {
+            span.setStatus({
+                code: SpanStatusCode.ERROR,
+                message: error instanceof Error ? error.message : String(error),
+            });
+            span.recordException(error instanceof Error ? error : new Error(String(error)));
+            throw new Error(`Failed to extract dominant colors from ${imagePath}: ${error}`);
+        }
+        finally {
+            span.end();
+        }
+    });
+}

package/dist/processor/config.d.ts

@@ -0,0 +1,12 @@
+import z from 'zod';
+export declare const ProcessorConfigSchema: z.ZodPrefault<z.ZodObject<{
+    resize_kernel: z.ZodDefault<z.ZodEnum<{
+        [x: string]: any;
+    }>>;
+    resize_gamma: z.ZodDefault<z.ZodNumber>;
+    variants: z.ZodDefault<z.ZodArray<z.ZodNumber>>;
+}, z.core.$strip>>;
+export type ProcessorConfig = z.infer<typeof ProcessorConfigSchema> & {
+    clear?: boolean;
+    forceOverwrite?: boolean;
+};

package/dist/processor/config.js

@@ -0,0 +1,9 @@
+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),
+    variants: z.array(z.number().int().min(1)).default([640, 768, 1280, 1920, 2560]),
+})
+    .prefault({});

package/dist/processor/exif/converters.d.ts

@@ -0,0 +1,7 @@
+import { type Dayjs } from 'dayjs';
+import type { GeojsonPoint } from './types.js';
+export declare const makeDate: (value: Date, offset?: string) => Dayjs | undefined;
+export declare const makeRational: (value: unknown, round?: number) => [number, number] | undefined;
+export declare const gpsToGeoJson: (exifData: {
+    [key: string]: unknown;
+}) => GeojsonPoint | null;

package/dist/processor/exif/converters.js

@@ -0,0 +1,38 @@
+import dayjs, {} from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+dayjs.extend(customParseFormat);
+dayjs.extend(utc);
+export const makeDate = (value, offset) => {
+    if (value instanceof Date && !isNaN(value.valueOf())) {
+        const date = dayjs(value);
+        if (offset) {
+            const [offset_hours_string, offset_minutes_string] = offset.split(':');
+            const offset_minutes = parseInt(offset_hours_string) * 60 + parseInt(offset_minutes_string);
+            return date.utcOffset(offset_minutes, true);
+        }
+        return date;
+    }
+};
+export const makeRational = (value, round) => {
+    if (typeof value === 'number') {
+        if (value < 1) {
+            return [1, 1 / value];
+        }
+        return [round === undefined ? value : +value.toFixed(round), 1];
+    }
+};
+export const gpsToGeoJson = (exifData) => {
+    const latitude = exifData.latitude, longitude = exifData.longitude, altitude = exifData.GPSAltitude;
+    if (typeof longitude === 'number' && typeof latitude === 'number') {
+        let coordinates = [longitude, latitude];
+        if (typeof altitude === 'number') {
+            coordinates = [...coordinates, altitude];
+        }
+        return {
+            type: 'Point',
+            coordinates,
+        };
+    }
+    return null;
+};

package/dist/processor/exif/defaults.d.ts

@@ -0,0 +1,17 @@
+export declare const DEFAULT_MAP_MAKE: {
+    Apple: string;
+    Canon: string;
+    'NIKON CORPORATION': string;
+    'RICOH IMAGING COMPANY, LTD.': string;
+};
+export declare const DEFAULT_MAP_MODEL: {
+    'Canon EOS M6 Mark II': string;
+    'NIKON Z6_3': string;
+    'iPhone 15 Pro Max': string;
+    'RICOH GR IIIx': string;
+};
+export declare const DEFAULT_LENS_MAP: {
+    'EF-M22mm f/2 STM': string;
+    'iPhone 15 Pro Max back camera 6.765mm f/1.78': string;
+    'NIKKOR Z 40mm f/2': string;
+};

package/dist/processor/exif/defaults.js

@@ -0,0 +1,17 @@
+export const DEFAULT_MAP_MAKE = {
+    Apple: 'Apple',
+    Canon: 'Canon',
+    'NIKON CORPORATION': 'Nikon',
+    'RICOH IMAGING COMPANY, LTD.': 'Ricoh',
+};
+export const DEFAULT_MAP_MODEL = {
+    'Canon EOS M6 Mark II': 'Canon EOS M6 MkII',
+    'NIKON Z6_3': 'Nikon Z6 III',
+    'iPhone 15 Pro Max': 'Apple iPhone 15 Pro Max',
+    'RICOH GR IIIx': 'Ricoh GR IIIx',
+};
+export const DEFAULT_LENS_MAP = {
+    'EF-M22mm f/2 STM': 'Canon EF-M 22mm f/2 STM',
+    'iPhone 15 Pro Max back camera 6.765mm f/1.78': 'iPhone 15 Pro Max 6.765mm f/1.78',
+    'NIKKOR Z 40mm f/2': 'Nikkor Z 40mm f/2',
+};

package/dist/processor/exif/exif.d.ts

@@ -0,0 +1,34 @@
+import type { GeojsonPoint } from './types.js';
+type Rational = [number, number];
+export interface ExifItem {
+    type: 'Feature';
+    geometry: GeojsonPoint | null;
+    properties: {
+        make?: string;
+        model?: string;
+        dateTime?: string;
+        artist?: string;
+        copyright?: string;
+        exposureTime?: Rational;
+        fNumber?: Rational;
+        iso?: number;
+        focalLength?: Rational;
+        lens?: string;
+    };
+}
+interface Options {
+    make_map?: {
+        [key: string]: string;
+    };
+    model_map?: {
+        [key: string]: string;
+    };
+    lens_map?: {
+        [key: string]: string;
+    };
+    warn_on_unknown_make?: boolean;
+    warn_on_unknown_model?: boolean;
+    warn_on_unknown_lens?: boolean;
+}
+export declare function exifFromFilePath(filePath: string, options?: Options): Promise<ExifItem>;
+export {};

package/dist/processor/exif/exif.js

@@ -0,0 +1,43 @@
+import exifr from 'exifr';
+import { gpsToGeoJson, makeDate, makeRational } from './converters.js';
+import { DEFAULT_LENS_MAP, DEFAULT_MAP_MAKE, DEFAULT_MAP_MODEL } from './defaults.js';
+const findInMap = (value, map, warn = true) => {
+    if (value === undefined)
+        return undefined;
+    const result = map[value];
+    if (!result) {
+        if (warn) {
+            console.warn(`Zone5: item not in map: ${value}`);
+        }
+        return value;
+    }
+    return result;
+};
+export async function exifFromFilePath(filePath, options = {}) {
+    const { make_map = DEFAULT_MAP_MAKE, model_map = DEFAULT_MAP_MODEL, lens_map = DEFAULT_LENS_MAP, warn_on_unknown_make = true, warn_on_unknown_model = true, warn_on_unknown_lens = true, } = options;
+    const exifData = await exifr.parse(filePath, {});
+    if (!exifData || Object.keys(exifData).length === 0) {
+        return {
+            type: 'Feature',
+            geometry: null,
+            properties: {},
+        };
+    }
+    const mappedData = {
+        type: 'Feature',
+        geometry: gpsToGeoJson(exifData) || null,
+        properties: {
+            make: findInMap(exifData.Make || exifData['271'], make_map || {}, warn_on_unknown_make),
+            model: findInMap(exifData.Model || exifData['272'], model_map || {}, warn_on_unknown_model),
+            dateTime: makeDate(exifData.DateTimeOriginal, exifData.OffsetTimeOriginal)?.format(),
+            artist: exifData.Artist,
+            copyright: exifData.Copyright,
+            exposureTime: makeRational(exifData.ExposureTime),
+            fNumber: makeRational(exifData.FNumber, 1),
+            iso: exifData.ISO,
+            focalLength: makeRational(exifData.FocalLength, 1),
+            lens: findInMap(exifData.LensModel, lens_map || {}, warn_on_unknown_lens),
+        },
+    };
+    return mappedData;
+}

package/dist/processor/exif/index.d.ts

@@ -0,0 +1 @@
+export { exifFromFilePath as default } from './exif.js';

package/dist/processor/exif/index.js

@@ -0,0 +1 @@
+export { exifFromFilePath as default } from './exif.js';

package/dist/processor/exif/types.d.ts

@@ -0,0 +1,4 @@
+export interface GeojsonPoint {
+    type: 'Point';
+    coordinates: [number, number] | [number, number, number];
+}

package/dist/processor/exif/types.js

@@ -0,0 +1 @@
+export {};

package/dist/processor/file.d.ts

@@ -0,0 +1,3 @@
+export declare const sourceFileHash: (sourceBaseDir: string, sourceFile: string) => string;
+export declare const ensureDirectoryExists: (dirPath: string) => Promise<void>;
+export declare const fileExists: (filePath: string) => Promise<boolean>;

package/dist/processor/file.js

@@ -0,0 +1,28 @@
+import { createHash } from 'crypto';
+import { access, mkdir } from 'fs/promises';
+import { relative } from 'path';
+export const sourceFileHash = (sourceBaseDir, sourceFile) => {
+    // Calculate relative path from source base dir
+    const relativePath = relative(sourceBaseDir, sourceFile);
+    // Generate SHAKE256 hash with length 8
+    const hash = createHash('shake256', { outputLength: 8 });
+    hash.update(relativePath);
+    return hash.digest('hex');
+};
+export const ensureDirectoryExists = async (dirPath) => {
+    try {
+        await access(dirPath);
+    }
+    catch {
+        await mkdir(dirPath, { recursive: true });
+    }
+};
+export const fileExists = async (filePath) => {
+    try {
+        await access(filePath);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};

package/dist/processor/index.d.ts

@@ -0,0 +1,27 @@
+import type { BaseConfigType } from '../config.js';
+import { type DominantColor } from './color.js';
+import type { ProcessorConfig } from './config.js';
+import type { ExifItem } from './exif/exif.js';
+import type { GeojsonPoint } from './exif/types.js';
+export interface ItemFeature {
+    type: 'Feature';
+    id: string;
+    geometry: GeojsonPoint | null;
+    properties: ExifItem['properties'] & {
+        aspectRatio: number;
+        blurhash: string;
+        averageColor: DominantColor;
+    };
+    assets: {
+        href: string;
+        width: number;
+    }[];
+}
+declare const processor: (options: {
+    base: BaseConfigType;
+    processor: ProcessorConfig;
+    sourceFile: string;
+    clear?: boolean;
+    forceOverwrite?: boolean;
+}) => Promise<string>;
+export default processor;

package/dist/processor/index.js

@@ -0,0 +1,70 @@
+import { SpanStatusCode, trace } from '@opentelemetry/api';
+import { writeFile } from 'fs/promises';
+import { join, parse, relative } from 'path';
+import sharp from 'sharp';
+import { generateBlurhash } from './blurhash.js';
+import { getDominantColors } from './color.js';
+import exifFromFilePath from './exif/index.js';
+import { fileExists, sourceFileHash } from './file.js';
+import { generateImageVariants } from './variants.js';
+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 { name: fileBasename } = parse(sourceFile);
+            const sourceHash = sourceFileHash(base.root, sourceFile);
+            const featureFile = join(base.cache, `${fileBasename}-${sourceHash}`, 'index.json');
+            span.setAttributes({
+                'zone5.sourceFile': sourceFile,
+                'zone5.fileBasename': fileBasename,
+                'zone5.sourceHash': sourceHash,
+                'zone5.clear': clear,
+                'zone5.forceOverwrite': forceOverwrite,
+            });
+            if (!(await fileExists(featureFile)) || clear || forceOverwrite) {
+                const [exifFeature, blurhash, averageColor, variants, metadata] = await Promise.all([
+                    exifFromFilePath(sourceFile),
+                    generateBlurhash(sourceFile),
+                    getDominantColors(sourceFile),
+                    generateImageVariants(options),
+                    sharp(sourceFile).metadata(),
+                ]);
+                const feature = {
+                    type: 'Feature',
+                    geometry: exifFeature.geometry,
+                    id: sourceHash,
+                    properties: {
+                        ...exifFeature.properties,
+                        aspectRatio: metadata.width / metadata.height,
+                        blurhash,
+                        averageColor,
+                    },
+                    assets: variants.map((variant) => ({
+                        href: relative(base.cache, variant.path),
+                        width: variant.width,
+                    })),
+                };
+                await writeFile(featureFile, JSON.stringify(feature));
+                span.setAttribute('zone5.variantsCount', variants.length);
+            }
+            else {
+                span.setAttribute('zone5.cached', true);
+            }
+            span.setStatus({ code: SpanStatusCode.OK });
+            return featureFile;
+        }
+        catch (error) {
+            span.setStatus({
+                code: SpanStatusCode.ERROR,
+                message: error instanceof Error ? error.message : String(error),
+            });
+            span.recordException(error instanceof Error ? error : new Error(String(error)));
+            throw error;
+        }
+        finally {
+            span.end();
+        }
+    });
+};
+export default processor;

package/dist/processor/variants.d.ts

@@ -0,0 +1,13 @@
+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;
+    clear?: boolean;
+    forceOverwrite?: boolean;
+}): Promise<GeneratedVariant[]>;