@hkdigital/lib-sveltekit 0.0.90 → 0.0.92

package/dist/classes/svelte/audio/AudioScene.svelte.js

@@ -1,4 +1,4 @@
-import * as expect from '@hkdigital/lib-sveltekit/util/expect/index.js';
+import * as expect from '../../../util/expect/index.js';
 
 import {
 	LoadingStateMachine,

package/dist/classes/svelte/audio/mocks.js

@@ -1,6 +1,6 @@
-import { CONTENT_TYPE, CONTENT_LENGTH } from '@hkdigital/lib-sveltekit/constants/http/index.js';
+import { CONTENT_TYPE, CONTENT_LENGTH } from '../../../constants/http/index.js';
 
-import { AUDIO_WAV } from '@hkdigital/lib-sveltekit/constants/mime/audio.js';
+import { AUDIO_WAV } from '../../../constants/mime/audio.js';
 
 // import MockWav from './tiny-silence.wav?raw';
 

package/dist/classes/svelte/image/ImageLoader.svelte.d.ts

@@ -4,5 +4,16 @@
  * - The loading process can be monitored
  */
 export default class ImageLoader extends NetworkLoader {
+    /**
+     * @param {object} _
+     * @param {ImageMeta|ImageMeta[]} _.imageMeta
+     */
+    constructor({ imageMeta }: {
+        imageMeta: ImageMeta | ImageMeta[];
+    });
+    get imageMeta(): import("./typedef.js").ImageMeta;
+    get url(): string;
+    #private;
 }
+export type ImageMeta = import("./typedef.js").ImageMeta;
 import { NetworkLoader } from '../network-loader/index.js';

package/dist/classes/svelte/image/ImageLoader.svelte.js

@@ -1,3 +1,7 @@
+/** @typedef {import('./typedef.js').ImageMeta} ImageMeta */
+
+import { toSingleImageMeta } from '../../../util/image/index.js';
+
 import {
   NetworkLoader
   // ERROR_NOT_LOADED,
@@ -10,20 +14,34 @@ import {
  * - The loading process can be monitored
  */
 export default class ImageLoader extends NetworkLoader {
-  //
-  // /**
-  //  * Construct ImageLoader
-  //  *
-  //  * @param {object} _
-  //  * @param {string} _.url
-  //  */
-  // constructor( { url } ) {}
-  //
+  /** @type {ImageMeta} */
+  #imageMeta;
+
+  /**
+   * @param {object} _
+   * @param {ImageMeta|ImageMeta[]} _.imageMeta
+   */
+  constructor({ imageMeta }) {
+    imageMeta = toSingleImageMeta(imageMeta);
+
+    super({ url: imageMeta.src });
+
+    this.#imageMeta = imageMeta;
+  }
+
+  get imageMeta() {
+    return this.#imageMeta;
+  }
+
+  get url() {
+    return this._url;
+  }
+
   // /**
   //  * Get object URL that can be used as src parameter of an HTML image
   //  *
   //  * @note the objectURL should be revoked when no longer used
   //  */
-  // getObjectUrl() {}
+  // getObjectURL() {}
   //
 } // end class

package/dist/classes/svelte/image/ImageScene.svelte.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @typedef {object} SourceConfig
+ * // property ...
+ */
+/**
+ * @typedef {object} ImageSource
+ * @property {string} label
+ * @property {ImageLoader} imageLoader
+ * @property {ImageMeta} [imageMeta]
+ */
+export default class ImageScene {
+    state: string;
+    loaded: boolean;
+    destroy(): void;
+    /**
+     * Add image source
+     * - Uses an ImageLoader instance to load image data from network
+     *
+     * @param {object} _
+     * @param {string} _.label
+     * @param {ImageMeta|ImageMeta[]} _.imageMeta
+     */
+    defineImage({ label, imageMeta }: {
+        label: string;
+        imageMeta: ImageMeta | ImageMeta[];
+    }): void;
+    /**
+     * Start loading all image sources
+     */
+    load(): void;
+    /**
+     * Get image scene loading progress
+     */
+    get progress(): {
+        totalBytesLoaded: number;
+        totalSize: number;
+        sourcesLoaded: number;
+        numberOfSources: number;
+    };
+    /**
+     * Get an image loader
+     *
+     * @param {string} label
+     *
+     * @returns {ImageLoader}
+     */
+    getImageLoader(label: string): ImageLoader;
+    /**
+     * Get object URL that can be used as src parameter of an HTML image
+     *
+     * @param {string} label
+     *
+     * @returns {ImageMeta}
+     */
+    getImageMeta(label: string): ImageMeta;
+    /**
+     * Get object URL that can be used as src parameter of an HTML image
+     *
+     * @param {string} label
+     *
+     * @note the objectURL should be revoked when no longer used
+     *
+     * @returns {string}
+     */
+    getObjectURL(label: string): string;
+    #private;
+}
+export type ImageMeta = import("./typedef.js").ImageMeta;
+/**
+ * // property ...
+ */
+export type SourceConfig = object;
+export type ImageSource = {
+    label: string;
+    imageLoader: ImageLoader;
+    imageMeta?: ImageMeta;
+};
+import ImageLoader from './ImageLoader.svelte.js';

package/dist/classes/svelte/image/ImageScene.svelte.js

@@ -0,0 +1,256 @@
+/** @typedef {import('./typedef.js').ImageMeta} ImageMeta */
+
+import * as expect from '../../../util/expect/index.js';
+
+import {
+  LoadingStateMachine,
+  STATE_INITIAL,
+  STATE_LOADING,
+  STATE_UNLOADING,
+  STATE_LOADED,
+  STATE_CANCELLED,
+  STATE_ERROR,
+  LOAD,
+  // CANCEL,
+  ERROR,
+  LOADED,
+  UNLOAD,
+  INITIAL
+} from '../loading-state-machine/index.js';
+
+import ImageLoader from './ImageLoader.svelte.js';
+
+/**
+ * @typedef {object} SourceConfig
+ * // property ...
+ */
+
+/**
+ * @typedef {object} ImageSource
+ * @property {string} label
+ * @property {ImageLoader} imageLoader
+ * @property {ImageMeta} [imageMeta]
+ */
+
+export default class ImageScene {
+  #state = new LoadingStateMachine();
+
+  // @note this exported state is set by $effect's
+  state = $state(STATE_INITIAL);
+
+  // @note this exported state is set by $effect's
+  loaded = $derived.by(() => {
+    return this.state === STATE_LOADED;
+  });
+
+  /** @type {ImageSource[]} */
+  #imageSources = $state([]);
+
+  #progress = $derived.by(() => {
+    // console.log('update progress');
+
+    let totalSize = 0;
+    let totalBytesLoaded = 0;
+    let sourcesLoaded = 0;
+
+    const sources = this.#imageSources;
+    const numberOfSources = sources.length;
+
+    for (let j = 0; j < numberOfSources; j++) {
+      const source = sources[j];
+      const { imageLoader } = source;
+
+      const { bytesLoaded, size, loaded } = imageLoader.progress;
+
+      totalSize += size;
+      totalBytesLoaded += bytesLoaded;
+
+      if (loaded) {
+        sourcesLoaded++;
+      }
+    } // end for
+
+    return {
+      totalBytesLoaded,
+      totalSize,
+      sourcesLoaded,
+      numberOfSources
+    };
+  });
+
+  /**
+   * Construct AudioScene
+   *
+   * @param {object} _
+   * @param {AudioContext} _.audioContext
+   */
+  constructor() {
+    const state = this.#state;
+
+    $effect(() => {
+      if (state.current === STATE_LOADING) {
+        // console.log(
+        //   'progress',
+        //   JSON.stringify($state.snapshot(this.#progress))
+        // );
+
+        const { sourcesLoaded, numberOfSources } = this.#progress;
+
+        if (sourcesLoaded === numberOfSources) {
+          // console.log(`All [${numberOfSources}] sources loaded`);
+          this.#state.send(LOADED);
+        }
+      }
+    });
+
+    $effect(() => {
+      switch (state.current) {
+        case STATE_LOADING:
+          {
+            // console.log('ImageScene:loading');
+            this.#startLoading();
+          }
+          break;
+
+        case STATE_UNLOADING:
+          {
+            // console.log('ImageScene:unloading');
+            // this.#startUnLoading();
+          }
+          break;
+
+        case STATE_LOADED:
+          {
+            // console.log('ImageScene:loaded');
+            // TODO
+            // this.#abortLoading = null;
+          }
+          break;
+
+        case STATE_CANCELLED:
+          {
+            // console.log('ImageScene:cancelled');
+            // TODO
+          }
+          break;
+
+        case STATE_ERROR:
+          {
+            console.log('ImageScene:error', state.error);
+          }
+          break;
+      } // end switch
+
+      this.state = state.current;
+    });
+  }
+
+  destroy() {
+    // TODO: disconnect all image sources?
+    // TODO: Unload ImageLoaders?
+  }
+
+  /**
+   * Add image source
+   * - Uses an ImageLoader instance to load image data from network
+   *
+   * @param {object} _
+   * @param {string} _.label
+   * @param {ImageMeta|ImageMeta[]} _.imageMeta
+   */
+  defineImage({ label, imageMeta }) {
+    expect.notEmptyString(label);
+
+    // expect.notEmptyString(url);
+
+    const imageLoader = new ImageLoader({ imageMeta });
+
+    this.#imageSources.push({ label, imageLoader, imageMeta });
+  }
+
+  /**
+   * Start loading all image sources
+   */
+  load() {
+    this.#state.send(LOAD);
+
+    // FIXME: in unit test when moved to startloading it hangs!
+
+    for (const { imageLoader } of this.#imageSources) {
+      imageLoader.load();
+    }
+  }
+
+  async #startLoading() {
+    // console.log('#startLoading');
+    // FIXME: in unit test when moved to startloading it hangs!
+    // for (const { audioLoader } of this.#memorySources) {
+    //   audioLoader.load();
+    // }
+  }
+
+  /**
+   * Get Image source
+   *
+   * @param {string} label
+   *
+   * @returns {ImageSource}
+   */
+  #getImageSource(label) {
+    for (const source of this.#imageSources) {
+      if (label === source.label) {
+        return source;
+      }
+    }
+
+    throw new Error(`Source [${label}] has not been defined`);
+  }
+
+  /**
+   * Get image scene loading progress
+   */
+  get progress() {
+    return this.#progress;
+  }
+
+  /**
+   * Get an image loader
+   *
+   * @param {string} label
+   *
+   * @returns {ImageLoader}
+   */
+  getImageLoader(label) {
+    const source = this.#getImageSource(label);
+
+    return source.imageLoader;
+  }
+
+  /**
+   * Get object URL that can be used as src parameter of an HTML image
+   *
+   * @param {string} label
+   *
+   * @returns {ImageMeta}
+   */
+  getImageMeta(label) {
+    const source = this.#getImageSource(label);
+
+    return source.imageMeta;
+  }
+
+  /**
+   * Get object URL that can be used as src parameter of an HTML image
+   *
+   * @param {string} label
+   *
+   * @note the objectURL should be revoked when no longer used
+   *
+   * @returns {string}
+   */
+  getObjectURL(label) {
+    const source = this.#getImageSource(label);
+
+    return source.imageLoader.getObjectURL();
+  }
+}

package/dist/classes/svelte/image/ImageVariantsLoader.svelte.d.ts

@@ -20,12 +20,8 @@ export default class ImageVariantsLoader {
      *
      * @returns {string|null}
      */
-    getObjectUrl(): string | null;
-    get progress(): {
-        bytesLoaded: number;
-        size: number;
-        loaded: boolean;
-    };
+    getObjectURL(): string | null;
+    get progress(): import("../network-loader/typedef.js").LoadingProgress;
     /**
      * Get optimal image variant
      *

package/dist/classes/svelte/image/ImageVariantsLoader.svelte.js

@@ -1,6 +1,6 @@
 /** @typedef {import('./typedef.js').ImageMeta} ImageMeta */
 
-// import * as expect from '@hkdigital/lib-sveltekit/util/expect/index.js';
+// import * as expect from '../../../util/expect/index.js';
 
 import { untrack } from 'svelte';
 
@@ -90,13 +90,13 @@ export default class ImageVariantsLoader {
    *
    * @returns {string|null}
    */
-  getObjectUrl() {
+  getObjectURL() {
     // Example usage:
     //
     // $effect(() => {
     //   if (variantsLoader.loaded) {
     //     // @ts-ignore
-    //     imageUrl = variantsLoader.getObjectUrl();
+    //     imageUrl = variantsLoader.getObjectURL();
     //   }
 
     //   return () => {

package/dist/classes/svelte/image/mocks.js

@@ -1,9 +1,6 @@
-import {
-  CONTENT_TYPE,
-  CONTENT_LENGTH
-} from '@hkdigital/lib-sveltekit/constants/http/index.js';
+import { CONTENT_TYPE, CONTENT_LENGTH } from '../../../constants/http/index.js';
 
-import { IMAGE_PNG } from '@hkdigital/lib-sveltekit/constants/mime/image.js';
+import { IMAGE_PNG } from '../../../constants/mime/image.js';
 
 /**
  * A minimal 1x1 black PNG encoded as base64

package/dist/classes/svelte/image/typedef.js

@@ -1,5 +1,3 @@
-// /** @typedef {import('@hkdigital/lib-sveltekit/types/imagetools.js').ImageMeta} ImageMeta */
-
 /**
  * @typedef {Object} ImageMeta
  * @property {string} src - URL of the image

package/dist/classes/svelte/loading-state-machine/LoadingStateMachine.svelte.js

@@ -47,6 +47,7 @@ export default class LoadingStateMachine extends FiniteStateMachine {
       },
       [STATE_LOADING]: {
         _enter: () => {
+          // console.log('LoadingStateMachine: enter LOADING');
           this.onenter?.(STATE_LOADING);
         },
         [CANCEL]: STATE_CANCELLED,
@@ -55,6 +56,7 @@ export default class LoadingStateMachine extends FiniteStateMachine {
       },
       [STATE_LOADED]: {
         _enter: () => {
+          // console.log('LoadingStateMachine: enter LOADED');
           this.onenter?.(STATE_LOADED);
         },
         [LOAD]: STATE_LOADING,

package/dist/classes/svelte/network-loader/NetworkLoader.svelte.d.ts

@@ -14,7 +14,7 @@ export default class NetworkLoader {
         url: string;
     });
     _state: LoadingStateMachine;
-    state: string;
+    state: any;
     initial: boolean;
     loaded: boolean;
     /** @type {string|null} */
@@ -30,11 +30,8 @@ export default class NetworkLoader {
     _headers: Headers | null;
     /** @type {ArrayBuffer|null} */
     _buffer: ArrayBuffer | null;
-    progress: {
-        bytesLoaded: number;
-        size: number;
-        loaded: boolean;
-    };
+    /** @type {import('./typedef.js').LoadingProgress} */
+    progress: import("./typedef.js").LoadingProgress;
     /** @type {null|(()=>void)} */
     _abortLoading: null | (() => void);
     /**
@@ -86,9 +83,9 @@ export default class NetworkLoader {
      *
      * @note the objectURL should be revoked when no longer used
      *
-     * @returns {string|null}
+     * @returns {string}
      */
-    getObjectUrl(): string | null;
+    getObjectURL(): string;
     #private;
 }
 import { LoadingStateMachine } from '../loading-state-machine/index.js';

package/dist/classes/svelte/network-loader/NetworkLoader.svelte.js

@@ -1,4 +1,4 @@
-import { CONTENT_TYPE } from '@hkdigital/lib-sveltekit/constants/http/index.js';
+import { CONTENT_TYPE } from '../../../constants/http/index.js';
 
 import {
   LoadingStateMachine,
@@ -16,9 +16,9 @@ import {
   INITIAL
 } from '../loading-state-machine/index.js';
 
-import * as expect from '@hkdigital/lib-sveltekit/util/expect/index.js';
+import * as expect from '../../../util/expect/index.js';
 
-import { httpGet, loadResponseBuffer } from '@hkdigital/lib-sveltekit/util/http/index.js';
+import { httpGet, loadResponseBuffer } from '../../../util/http/index.js';
 
 import { ERROR_NOT_LOADED, ERROR_TRANSFERRED } from './constants.js';
 
@@ -28,17 +28,19 @@ import { ERROR_NOT_LOADED, ERROR_TRANSFERRED } from './constants.js';
  * - Loaded data can be transferred to an AudioBufferSourceNode
  */
 export default class NetworkLoader {
+  // _state = $state(new LoadingStateMachine());
   _state = new LoadingStateMachine();
 
-  // @note this exported state is set by $effect's
-  state = $state(STATE_INITIAL);
+  state = $derived.by(() => {
+    return this._state.current;
+  });
 
   initial = $derived.by(() => {
-    return this.state === STATE_INITIAL;
+    return this._state.current === STATE_INITIAL;
   });
 
   loaded = $derived.by(() => {
-    return this.state === STATE_LOADED;
+    return this._state.current === STATE_LOADED;
   });
 
   /** @type {string|null} */
@@ -60,6 +62,8 @@ export default class NetworkLoader {
   _buffer = null;
 
   // Export state property as readonly
+
+  /** @type {import('./typedef.js').LoadingProgress} */
   progress = $derived.by(() => {
     return {
       bytesLoaded: this._bytesLoaded,
@@ -84,11 +88,15 @@ export default class NetworkLoader {
 
     const state = this._state;
 
-    $effect(() => {
+    //
+    // ISSUE: $effect is not triggered by  this._state changes,
+    //        using onenter instead
+    //
+    this._state.onenter = () => {
       switch (state.current) {
         case STATE_LOADING:
           {
-            // console.log('NetworkLoader:loading');
+            // console.log('**** NetworkLoader:loading');
             this.#load();
           }
           break;
@@ -125,15 +133,14 @@ export default class NetworkLoader {
           }
           break;
       } // end switch
-
-      this.state = state.current;
-    });
+    };
   }
 
   /**
    * Start loading all network data
    */
   load() {
+    // console.log('NetworkLoader: load() called');
     this._state.send(LOAD);
   }
 
@@ -220,16 +227,16 @@ export default class NetworkLoader {
    *
    * @note the objectURL should be revoked when no longer used
    *
-   * @returns {string|null}
+   * @returns {string}
    */
-  getObjectUrl() {
+  getObjectURL() {
     //
     // Example usage:
     //
     // $effect(() => {
     //   if (loader.loaded) {
     //     // @ts-ignore
-    //     objectUrl = loader.getObjectUrl();
+    //     objectUrl = loader.getObjectURL();
     //   }
     //
     //   return () => {
@@ -240,9 +247,7 @@ export default class NetworkLoader {
     //   };
     // });
 
-    const blob = this.getBlob();
-
-    return blob ? URL.createObjectURL(blob) : null;
+    return URL.createObjectURL(this.getBlob());
   }
 
   /**
@@ -251,7 +256,7 @@ export default class NetworkLoader {
    */
   async #load() {
     try {
-      // console.log('#load', this._url);
+      // console.log('>>>> NetworkLoader:#load', this._url);
 
       if (this._abortLoading) {
         // console.log('Abort loading');

package/dist/classes/svelte/network-loader/mocks.js

@@ -1,6 +1,6 @@
-import { CONTENT_TYPE, CONTENT_LENGTH } from '@hkdigital/lib-sveltekit/constants/http/index.js';
+import { CONTENT_TYPE, CONTENT_LENGTH } from '../../../constants/http/index.js';
 
-import { OCTET_STREAM } from '@hkdigital/lib-sveltekit/constants/mime/application.js';
+import { OCTET_STREAM } from '../../../constants/mime/application.js';
 
 const BASE64_DATA =
   'UklGRnwAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';

package/dist/classes/svelte/network-loader/typedef.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {};
+export default _default;
+export type LoadingProgress = {
+    bytesLoaded: number;
+    size: number;
+    loaded: boolean;
+};

package/dist/classes/svelte/network-loader/typedef.js

@@ -0,0 +1,8 @@
+/**
+ * @typedef {Object} LoadingProgress
+ * @property {number} bytesLoaded
+ * @property {number} size
+ * @property {boolean} loaded
+ */
+
+export default {};

package/dist/components/image/ImageBox.svelte

@@ -0,0 +1,242 @@
+<script>
+	import { onMount } from 'svelte';
+
+	import { ImageLoader } from '../../classes/svelte/image/index.js';
+
+	import { toSingleImageMeta } from '../../util/image/index.js';
+
+	/**
+	 * @example
+	 * import { ImageBox } from '/path/to/ImageBox/index.js';
+	 *
+	 * // @note 'as=metadata' is set by the preset
+	 * import NeonLightsOff from '../../img/NeonLightsOff.jpg?preset=gradient';
+	 *
+   * <!-- Example that fits in an outer-box -->
+   *
+   * <div class="outer-box">
+   *   <ImageBox image={ArmyGreen} fit="contain" position="center center" />
+   * </div>
+   *
+   * <!-- Examples that has have width, height or aspect set -->
+   *
+   * <ImageBox
+   *   image={ArmyGreen}
+   *   fit="contain"
+   *   position="center center"
+   *   width="w-[200px]"
+   *   height="h-[200px]"
+   *   classes="border-8 border-green-500"
+   * />
+   *
+   * <ImageBox
+   *   image={ArmyGreen}
+   *   fit="contain"
+   *   position="center center"
+   *   width="w-[200px]"
+   *   aspect="aspect-square"
+   *   classes="border-8 border-green-500"
+   * />
+   *
+   * <ImageBox
+   *   image={ArmyGreen}
+   *   fit="contain"
+   *   position="center center"
+   *   height="h-[200px]"
+   *   aspect="aspect-square"
+   *   classes="border-8 border-green-500"
+   * />
+   *
+   * <!-- Or hack it using !important -->
+   *
+   * <ImageBox
+   *   image={ArmyGreen}
+   *   fit="contain"
+   *   position="center center"
+   *   classes="!w-[200px] !h-[200px] border-8 border-green-500"
+   * />
+	 */
+
+	/**
+   * @typedef {import('./typedef.js').ObjectFit} ObjectFit
+   * @typedef {import('./typedef.js').ObjectPosition} ObjectPosition
+   *
+   * @typedef {import('../../classes/svelte/network-loader/typedef.js').LoadingProgress} LoadingProgress
+   *
+   * @typedef {import('../../config/typedef.js').ImageMeta} ImageMeta
+   *
+   * @typedef {Object} Props
+   * @property {string} [base] - Base styling class
+   * @property {string} [bg] - Background styling class
+   * @property {string} [classes] - Additional CSS classes
+   * @property {string} [width] - Width of the image container
+   * @property {string} [height] - Height of the image container
+   * @property {string} [aspect] - Aspect ratio of the image container
+   * @property {string} [overflow] - Overflow behavior
+   * @property {ObjectFit} [fit] - Object-fit property
+   * @property {ObjectPosition} [position] - Object-position property
+   *
+   * @property {ImageMeta|ImageMeta[]} [imageMeta]
+   *   Image metadata, TODO: array of image metadata for responsive image
+   *
+   * @property {ImageLoader} [imageLoader]
+   *   Image loader
+   *
+   * @property {string} [alt] - Alternative text for the image
+   * @property {() => LoadingProgress} [onProgress] - Progress callback function
+   * @property {*} [attr] - Additional arbitrary attributes
+   */
+
+	/** @type {Props} */
+	let {
+		// Style
+		base,
+		bg,
+		classes,
+		width,
+		height,
+    aspect,
+		overflow = 'overflow-clip',
+
+    // Fitting and positioning of image in its container
+		fit = 'contain',
+		position = 'left top',
+
+    // Image meta data
+		imageMeta,
+
+		imageLoader,
+
+		alt = '',
+
+		// Attributes
+		...attrs
+	} = $props();
+
+	// let show = $state(false);
+
+	/** @type {HTMLDivElement|undefined} */
+	let imgBoxElem = $state();
+
+	/** @type {HTMLImageElement|undefined} */
+	let imgElem = $state();
+
+	let aspectStyle = $state('');
+
+	// > Loading
+
+	let metaWidth = $state(0);
+	let metaHeight = $state(0);
+
+	let imageMeta_ = $state();
+
+	$effect(() => {
+		if( imageMeta )
+		{
+			imageMeta_ = toSingleImageMeta( imageMeta );
+		}
+	});
+
+	$effect(() => {
+		//
+		// Set meta width and height
+		//
+		if (imageMeta_) {
+			if (imageMeta_.width) {
+				metaWidth = imageMeta_.width;
+			}
+
+			if (imageMeta_.height) {
+				metaHeight = imageMeta_.height;
+			}
+		}
+	});
+
+	/** @type {ImageLoader|undefined} */
+	let imageLoader_ = $state();
+
+	$effect( () => {
+		//
+		// User supplied imageLoader instead of imageMeta
+		//
+		if( !imageMeta && imageLoader && !imageLoader_ )
+		{
+			imageLoader_ = imageLoader;
+			imageMeta_ = imageLoader.imageMeta;
+		}
+	} );
+
+	/** @type {string|null} */
+	let objectUrl = $state(null);
+
+	$effect(() => {
+		//
+		// Create image loader
+		//
+		if (imageMeta_ && !imageLoader_) {
+			imageLoader_ = new ImageLoader({ imageMeta: imageMeta_ });
+		}
+	});
+
+	$effect(() => {
+		//
+		// Start loading if imageLoader_ is in state 'initial'
+		//
+		// TODO: implement lazy flag
+		//
+		if (imageLoader_?.initial) {
+			imageLoader_.load();
+		}
+	});
+
+	$effect(() => {
+		//
+		// Get objectUrl when the image has finished loading
+		//
+		if (imageLoader_.loaded) {
+			// @ts-ignore
+			objectUrl = imageLoader_.getObjectURL();
+		}
+
+		return () => {
+			if (objectUrl) {
+				URL.revokeObjectURL(objectUrl);
+				objectUrl = null;
+			}
+		};
+	});
+
+</script>
+
+<div
+	data-image-box
+	bind:this={imgBoxElem}
+	class="{base} {bg} {aspect} {overflow} {width} {height} {classes}"
+	style:--fit={fit}
+	style:--pos={position}
+	style:aspect-ratio={aspectStyle}
+	style:width={width || (height && aspect) ? undefined : '100%'}
+	style:height={height || (width && aspect) ? undefined : '100%'}
+	{...attrs}
+>
+	{#if metaWidth && metaHeight}
+		<img src={objectUrl} {alt} width={metaWidth} height={metaHeight} />
+	{/if}
+</div>
+
+<style>
+	[data-image-box] {
+		max-width: 100%;
+		max-height: 100%;
+	}
+
+	img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		max-width: 100%;
+		max-height: 100%;
+		object-fit: var(--fit);
+		object-position: var(--pos);
+	}
+</style>

package/dist/components/image/ImageBox.svelte.d.ts

@@ -0,0 +1,60 @@
+export default ImageBox;
+declare const ImageBox: import("svelte").Component<{
+    /**
+     * - Base styling class
+     */
+    base?: string;
+    /**
+     * - Background styling class
+     */
+    bg?: string;
+    /**
+     * - Additional CSS classes
+     */
+    classes?: string;
+    /**
+     * - Width of the image container
+     */
+    width?: string;
+    /**
+     * - Height of the image container
+     */
+    height?: string;
+    /**
+     * - Aspect ratio of the image container
+     */
+    aspect?: string;
+    /**
+     * - Overflow behavior
+     */
+    overflow?: string;
+    /**
+     * - Object-fit property
+     */
+    fit?: import("./typedef.js").ObjectFit;
+    /**
+     * - Object-position property
+     */
+    position?: import("./typedef.js").ObjectPosition;
+    /**
+     * Image metadata, TODO: array of image metadata for responsive image
+     */
+    imageMeta?: import("../../config/typedef.js").ImageMeta | import("../../config/typedef.js").ImageMeta[];
+    /**
+     * Image loader
+     */
+    imageLoader?: ImageLoader;
+    /**
+     * - Alternative text for the image
+     */
+    alt?: string;
+    /**
+     * - Progress callback function
+     */
+    onProgress?: () => import("../../classes/svelte/network-loader/typedef.js").LoadingProgress;
+    /**
+     * - Additional arbitrary attributes
+     */
+    attr?: any;
+}, {}, "">;
+import { ImageLoader } from '../../classes/svelte/image/index.js';

package/dist/components/image/ResponsiveImage.svelte

@@ -52,7 +52,7 @@
 
 		if (variantsLoader.loaded) {
 			// @ts-ignore
-			imageUrl = variantsLoader.getObjectUrl();
+			imageUrl = variantsLoader.getObjectURL();
 
 			// image = new Image();
 			// image.src = url;

package/dist/components/image/typedef.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {};
+export default _default;
+export type ObjectFit = ("contain" | "cover" | "fill" | "none" | "scale-down");
+export type ObjectPosition = ("left" | "center" | "right" | "top" | "bottom" | "left top" | "left center" | "left bottom" | "center top" | "center center" | "center bottom" | "right top" | "right center" | "right bottom" | `${number}% ${number}%` | `${number}px ${number}px`);

package/dist/components/image/typedef.js

@@ -0,0 +1,32 @@
+/**
+ * @typedef {(
+ *   'contain' |
+ *   'cover' |
+ *   'fill' |
+ *   'none' |
+ *   'scale-down'
+ * )} ObjectFit
+ */
+
+/**
+ * @typedef {(
+ *   'left' |
+ *   'center' |
+ *   'right' |
+ *   'top' |
+ *   'bottom' |
+ *   'left top' |
+ *   'left center' |
+ *   'left bottom' |
+ *   'center top' |
+ *   'center center' |
+ *   'center bottom' |
+ *   'right top' |
+ *   'right center' |
+ *   'right bottom' |
+ *   `${number}% ${number}%` |
+ *   `${number}px ${number}px`
+ * )} ObjectPosition
+ */
+
+export default {};

package/dist/config/imagetools-config.js

@@ -5,7 +5,7 @@ const DEFAULT_PRESETS = {
 		format: 'avif',
 		quality: '90'
 	},
-	gradient: {
+	render: {
 		format: 'jpg',
 		quality: '95',
 		as: 'metadata'
@@ -15,6 +15,11 @@ const DEFAULT_PRESETS = {
 		quality: '95',
 		as: 'metadata'
 	},
+	gradient: {
+		format: 'jpg',
+		quality: '95',
+		as: 'metadata'
+	},
 	drawing: {
 		format: 'avif',
 		quality: '90',

package/dist/{types → config}/imagetools.d.ts

@@ -1,10 +1,10 @@
+// export interface ImageMeta {
+//   src: string;
+//   width: number;
+//   height: number;
+// }
 
-
-interface ImageMeta {
-  src: string;
-  width?: number;
-  height?: number;
-}
+type ImageMeta = import('./typedef.js').ImageMeta;
 
 declare module '*?responsive' {
   const out: ImageMeta[];
@@ -16,52 +16,62 @@ declare module '*&responsive' {
   export default out;
 }
 
-declare module '*?preset=gradient' {
-  const out: ImageMeta|ImageMeta[];
+declare module '*?preset=photo' {
+  const out: ImageMeta | ImageMeta[];
   export default out;
 }
 
-declare module '*&preset=gradient' {
-  const out: ImageMeta|ImageMeta[];
+declare module '*&preset=photo' {
+  const out: ImageMeta | ImageMeta[];
   export default out;
 }
 
-declare module '*?preset=photo' {
-  const out: ImageMeta|ImageMeta[];
+declare module '*?preset=render' {
+  const out: ImageMeta | ImageMeta[];
   export default out;
 }
 
-declare module '*&preset=photo' {
-  const out: ImageMeta|ImageMeta[];
+declare module '*&preset=render' {
+  const out: ImageMeta | ImageMeta[];
+  export default out;
+}
+
+declare module '*?preset=gradient' {
+  const out: ImageMeta | ImageMeta[];
+  export default out;
+}
+
+declare module '*&preset=gradient' {
+  const out: ImageMeta | ImageMeta[];
   export default out;
 }
 
 declare module '*?preset=drawing' {
-  const out: ImageMeta|ImageMeta[];
+  const out: ImageMeta | ImageMeta[];
   export default out;
 }
 
 declare module '*&preset=drawing' {
-  const out: ImageMeta|ImageMeta[];
+  const out: ImageMeta | ImageMeta[];
   export default out;
 }
 
 declare module '*?preset=savedata' {
-  const out: ImageMeta|ImageMeta[];
+  const out: ImageMeta | ImageMeta[];
   export default out;
 }
 
 declare module '*&preset=savedata' {
-  const out: ImageMeta|ImageMeta[];
+  const out: ImageMeta | ImageMeta[];
   export default out;
 }
 
 declare module '*?preset=blur' {
-  const out: ImageMeta|ImageMeta[];
+  const out: ImageMeta | ImageMeta[];
   export default out;
 }
 
 declare module '*&preset=blur' {
-  const out: ImageMeta|ImageMeta[];
+  const out: ImageMeta | ImageMeta[];
   export default out;
-}
+}

package/dist/config/typedef.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {};
+export default _default;
+export type ImageMeta = {
+    src: string;
+    width: number;
+    height: number;
+};

package/dist/config/typedef.js

@@ -0,0 +1,8 @@
+/**
+ * @typedef {object} ImageMeta
+ * @property {string} src
+ * @property {number} width
+ * @property {number} height
+ */
+
+export default {};

package/dist/util/http/mocks.js

@@ -1,4 +1,4 @@
-import { CONTENT_TYPE, CONTENT_LENGTH } from '@hkdigital/lib-sveltekit/constants/http/index.js';
+import { CONTENT_TYPE, CONTENT_LENGTH } from '../../constants/http/index.js';
 
 import { OCTET_STREAM } from '../../constants/mime/index.js';
 

package/dist/util/image/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns the unchanged image meta object or the last item of
+ * an array of ImageMeta objects. This is assumed to be a list
+ * of sorted responsive image formats, so it should be the
+ * largest image.
+ *
+ * @param {ImageMeta|ImageMeta[]} imageMeta
+ */
+export function toSingleImageMeta(imageMeta: ImageMeta | ImageMeta[]): import("../../config/typedef").ImageMeta;

package/dist/util/image/index.js

@@ -0,0 +1,24 @@
+/**
+ * Returns the unchanged image meta object or the last item of
+ * an array of ImageMeta objects. This is assumed to be a list
+ * of sorted responsive image formats, so it should be the
+ * largest image.
+ *
+ * @param {ImageMeta|ImageMeta[]} imageMeta
+ */
+export function toSingleImageMeta(imageMeta) {
+  if (Array.isArray(imageMeta)) {
+    if (!imageMeta.length) {
+      throw new Error('List of ImageMeta objects is empty');
+    }
+    imageMeta = imageMeta[imageMeta.length - 1];
+  }
+
+  if (typeof imageMeta === 'object') {
+    return imageMeta;
+  } else if (!imageMeta) {
+    throw new Error('Missing [imageMeta]');
+  }
+
+  throw new Error('Invalid value for parameter [imageMeta]');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.0.90",
+	"version": "0.0.92",
 	"author": "Jens Kleinhout, HKdigital (https://hkdigital.nl)",
 	"license": "ISC",
 	"repository": {
@@ -17,19 +17,19 @@
 	],
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build && npm run package",
+		"build": "cross-env vite build && npm run package",
 		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"publish:npm": "npm version patch && npm publish --access public && git push",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"package": "cross-env svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "cross-env npm run package",
+		"publish:npm": "cross-env npm version patch && npm publish --access public && git push",
+		"check": "cross-env svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "cross-env svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
 		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint .",
+		"lint": "cross-env prettier --check . && eslint .",
 		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run && npm run test:e2e",
+		"test": "cross-env npm run test:unit -- --run && npm run test:e2e",
 		"test:e2e": "playwright test",
-		"upgrade:all": "ncu -u && pnpm install"
+		"upgrade:all": "cross-env ncu -u && pnpm install"
 	},
 	"files": [
 		"dist",
@@ -48,6 +48,7 @@
 		"./*": "./dist/*"
 	},
 	"peerDependencies": {
+		"@sveltejs/kit": "^2.15.2",
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
@@ -57,25 +58,26 @@
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@types/eslint": "^9.6.1",
 		"autoprefixer": "^10.4.20",
-		"eslint": "^9.17.0",
-		"eslint-config-prettier": "^9.1.0",
+		"cross-env": "^7.0.3",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^2.46.1",
 		"globals": "^15.14.0",
 		"jsdom": "^26.0.0",
 		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.2",
+		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.9",
-		"publint": "^0.3.0",
+		"publint": "^0.3.2",
 		"standardized-audio-context-mock": "^9.7.15",
-		"svelte": "^5.17.3",
-		"svelte-check": "^4.1.3",
+		"svelte": "^5.17.5",
+		"svelte-check": "^4.1.4",
 		"tailwindcss": "^3.4.17",
 		"typescript": "^5.7.3",
 		"vite": "^6.0.7",
+		"vite-imagetools": "^7.0.5",
 		"vitest": "^2.1.8"
 	},
 	"dependencies": {
-		"@sveltejs/kit": "^2.15.2",
 		"runed": "^0.23.0",
 		"valibot": "^0.42.1",
 		"zod": "^3.24.1"