@hkdigital/lib-sveltekit 0.0.89 → 0.0.91

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,6 @@
  * - The loading process can be monitored
  */
 export default class ImageLoader extends NetworkLoader {
+    get url(): string;
 }
 import { NetworkLoader } from '../network-loader/index.js';

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

@@ -10,13 +10,36 @@ import {
  * - The loading process can be monitored
  */
 export default class ImageLoader extends NetworkLoader {
-  // > Inherited methods
+  // onenter(label) {
+  //   console.log('ImageLoader:onenter', label);
+  // }
+
+  // constructor({ url }) {
+  //   super({ url });
+
+  //   $effect(() => {
+  //     console.log('ImageLoader: state', this.state);
+  //   });
+  // }
+
+  get url() {
+    return this._url;
+  }
+
+  //
+  // /**
+  //  * Construct ImageLoader
+  //  *
+  //  * @param {object} _
+  //  * @param {string} _.url
+  //  */
+  // constructor( { 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/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,8 @@ export default class NetworkLoader {
         url: string;
     });
     _state: LoadingStateMachine;
-    state: string;
+    state: any;
+    initial: boolean;
     loaded: boolean;
     /** @type {string|null} */
     _url: string | null;
@@ -29,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);
     /**
@@ -87,7 +85,7 @@ export default class NetworkLoader {
      *
      * @returns {string|null}
      */
-    getObjectUrl(): string | null;
+    getObjectURL(): string | null;
     #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,13 +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.current === STATE_INITIAL;
+  });
 
   loaded = $derived.by(() => {
-    return this.state === STATE_LOADED;
+    return this._state.current === STATE_LOADED;
   });
 
   /** @type {string|null} */
@@ -56,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,
@@ -80,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;
@@ -121,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);
   }
 
@@ -218,14 +229,14 @@ export default class NetworkLoader {
    *
    * @returns {string|null}
    */
-  getObjectUrl() {
+  getObjectURL() {
     //
     // Example usage:
     //
     // $effect(() => {
     //   if (loader.loaded) {
     //     // @ts-ignore
-    //     objectUrl = loader.getObjectUrl();
+    //     objectUrl = loader.getObjectURL();
     //   }
     //
     //   return () => {
@@ -247,7 +258,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,229 @@
+<script>
+	import { onMount } from 'svelte';
+
+	import { ImageLoader } from '../../classes/svelte/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[]} image - Image metadata or array of image metadata
+   * @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
+		image,
+
+		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 singleImage = $state();
+
+	$effect(() => {
+		if (image instanceof Array && image[0]) {
+			throw new Error('Responsive image is not supported (yet)');
+		} else if (typeof image === 'object') {
+			// expect image.src
+			// expect image.width
+			// expect image.height
+			singleImage = image;
+		}
+	});
+
+	$effect(() => {
+		//
+		// Set meta width and height
+		//
+		if (singleImage) {
+			if (singleImage.width) {
+				metaWidth = singleImage.width;
+			}
+
+			if (singleImage.height) {
+				metaHeight = singleImage.height;
+			}
+		}
+	});
+
+	/** @type {ImageLoader|undefined} */
+	let imageLoader = $state();
+
+	/** @type {string|null} */
+	let objectUrl = $state(null);
+
+	$effect(() => {
+		//
+		// Create image loader
+		//
+		if (singleImage.src && !imageLoader) {
+			const url = singleImage.src;
+			imageLoader = new ImageLoader({ url });
+		}
+	});
+
+	$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;
+			}
+		};
+	});
+
+	$effect(() => {
+		console.log('classes', classes);
+	});
+</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,55 @@
+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 or array of image metadata
+     */
+    image: import("../../config/typedef.js").ImageMeta | import("../../config/typedef.js").ImageMeta[];
+    /**
+     * - Alternative text for the image
+     */
+    alt?: string;
+    /**
+     * - Progress callback function
+     */
+    onProgress?: () => import("../../classes/svelte/network-loader/typedef.js").LoadingProgress;
+    /**
+     * - Additional arbitrary attributes
+     */
+    attr?: any;
+}, {}, "">;

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.0.89",
+	"version": "0.0.91",
 	"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",
@@ -57,6 +57,7 @@
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@types/eslint": "^9.6.1",
 		"autoprefixer": "^10.4.20",
+		"cross-env": "^7.0.3",
 		"eslint": "^9.17.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.1",
@@ -72,6 +73,7 @@
 		"tailwindcss": "^3.4.17",
 		"typescript": "^5.7.3",
 		"vite": "^6.0.7",
+		"vite-imagetools": "^7.0.5",
 		"vitest": "^2.1.8"
 	},
 	"dependencies": {