@hkdigital/lib-sveltekit 0.1.2 → 0.1.4

package/dist/classes/{svelte → svkit}/audio/AudioScene.svelte.js

@@ -14,7 +14,7 @@ import {
 	LOADED,
 	UNLOAD,
 	INITIAL
-} from '$lib/classes/svelte/loading-state-machine/index.js';
+} from '../loading-state-machine/index.js';
 
 import AudioLoader from './AudioLoader.svelte.js';
 

package/dist/classes/{svelte → svkit}/image/ImageLoader.svelte.js

@@ -4,9 +4,9 @@ import { toSingleImageMeta } from '../../../util/image/index.js';
 
 import {
   NetworkLoader
-  // ERROR_NOT_LOADED,
+  // ERROR_NOT_LOADED
   // ERROR_TRANSFERRED
-} from '$lib/classes/svelte/network-loader/index.js';
+} from '../network-loader/index.js';
 
 /**
  * ImageLoader instance

package/dist/classes/{svelte → svkit}/image/ImageScene.svelte.js

@@ -16,7 +16,7 @@ import {
   LOADED,
   UNLOAD,
   INITIAL
-} from '$lib/classes/svelte/loading-state-machine/index.js';
+} from '../loading-state-machine/index.js';
 
 import ImageLoader from './ImageLoader.svelte.js';
 

package/dist/classes/{svelte → svkit}/network-loader/NetworkLoader.svelte.js

@@ -14,7 +14,7 @@ import {
   LOADED,
   UNLOAD,
   INITIAL
-} from '$lib/classes/svelte/loading-state-machine/index.js';
+} from '../loading-state-machine/index.js';
 
 import * as expect from '../../../util/expect/index.js';
 

package/dist/components/image/ImageBox.svelte

@@ -1,6 +1,6 @@
 <script>
-	import { ImageLoader } from '../../classes/svelte/image/index.js';
-	import { ImageVariantsLoader } from '../../classes/svelte/image/index.js';
+	import { ImageLoader } from '../../classes/svkit/image/index.js';
+	import { ImageVariantsLoader } from '../../classes/svkit/image/index.js';
 	import { toSingleImageMeta } from '../../util/image/index.js';
 
 	/**
@@ -15,9 +15,9 @@
 	 *   fit?: 'contain' | 'cover' | 'fill',
 	 *   position?: string,
 	 *   imageMeta: import('../../config/typedef.js').ImageMeta | import('../../config/typedef.js').ImageMeta[],
-	 *   imageLoader?: import('../../classes/svelte/image/index.js').ImageLoader,
+	 *   imageLoader?: import('../../classes/svkit/image/index.js').ImageLoader,
 	 *   alt?: string,
-	 *   onProgress?: (progress: import('../../classes/svelte/network-loader/typedef.js').LoadingProgress) => void,
+	 *   onProgress?: (progress: import('../../classes/svkit/network-loader/typedef.js').LoadingProgress) => void,
 	 *   [attr: string]: any
 	 * }}
 	 */
@@ -200,7 +200,9 @@
 		height: 100%;
 		max-width: 100%;
 		max-height: 100%;
-		object-fit: var(--fit);
-		object-position: var(--pos);
+		-o-object-fit: var(--fit);
+		   object-fit: var(--fit);
+		-o-object-position: var(--pos);
+		   object-position: var(--pos);
 	}
 </style>

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

@@ -30,7 +30,7 @@ declare const ImageBox: import("svelte").Component<{
     fit?: "contain" | "cover" | "fill";
     position?: string;
     imageMeta: import("../../config/typedef.js").ImageMeta | import("../../config/typedef.js").ImageMeta[];
-    imageLoader?: import("../../classes/svelte/image/index.js").ImageLoader;
+    imageLoader?: import("../../classes/svkit/image/index.js").ImageLoader;
     alt?: string;
-    onProgress?: (progress: import("../../classes/svelte/network-loader/typedef.js").LoadingProgress) => void;
+    onProgress?: (progress: import("../../classes/svkit/network-loader/typedef.js").LoadingProgress) => void;
 }, {}, "">;

package/dist/util/http/index.js

@@ -5,7 +5,7 @@
 // 	AbortError,
 // 	TimeoutError,
 // 	TypeOrValueError
-// } from '$lib/constants/errors/index.js';
+// } from '../../constants/errors/index.js';
 
 // import { setRequestHeaders } from './headers.js';
 // import { getErrorFromResponse } from './errors.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.2",
+	"version": "0.1.4",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"
@@ -68,7 +68,7 @@
 		"@skeletonlabs/skeleton-svelte": "1.0.0-next.4",
 		"@steeze-ui/heroicons": "^2.4.2",
 		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/package": "^2.3.10",
+		"@sveltejs/package": "2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/typography": "^0.5.16",
 		"@types/eslint": "^9.6.1",

package/dist/components/image/EnhancedImage.svelte__

@@ -1,162 +0,0 @@
-<script>
-  import { onMount } from 'svelte';
-
-  /**
-   * @example
-   * import { EnhancedImage }
-   *   from '$lib/components/EnhancedImage/index.js';
-   *
-   * <EnhancedImage
-   *   classes="aspect-video max-h-svh w-full border-8 border-pink-500"
-   *   src={NeonLightsOff}
-   *   onload={() => {
-   *     console.log('loaded');
-   *   }}
-   * />
-   */
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
-   *   overflow?: string,
-   *   aspect?: string,
-   *   fit?: string,
-   *   position?: string,
-   *   src: string | import('$lib/typedef/image.js').Picture,
-   *   alt?: string,
-   *   onload?: ( e: (Event|{ type: string, target: HTMLImageElement }) ) => void,
-   *   onerror?: ( e: (Event|{ type: string, target: HTMLImageElement }) ) => void,
-   *   loading?: string
-   * } & { [attr: string]: any }}
-   */
-  let {
-    // Style
-    base,
-    bg,
-    classes,
-
-    overflow = 'overflow-clip',
-    aspect,
-
-    fit = 'contain',
-    position = 'left top',
-
-    src,
-    alt = '',
-    onload,
-    onerror,
-    loading,
-
-    // Attributes
-    ...attrs
-  } = $props();
-
-  // let show = $state(false);
-
-  /** @type {HTMLDivElement|undefined} */
-  let imgBoxElem = $state();
-
-  /** @type {HTMLImageElement|undefined} */
-  let imgElem = $state();
-
-  /** @type {string | import('$lib/typedef/image.js').Picture} */
-  let src_;
-
-  $effect(() => {
-    if (src_ && src !== src_) {
-      throw new Error('Property [src] change is not supported');
-    }
-  });
-
-  let aspectStyle = $state('');
-
-  // > Event names
-  const LOAD = 'load';
-  const ERROR = 'error';
-
-  // > onMount
-
-  onMount(() => {
-    // show = true;
-
-    imgElem = imgBoxElem?.getElementsByTagName('img')[0];
-
-    if (!imgElem) {
-      throw new Error('Missing IMG element');
-    }
-
-    // > Auto set box aspect to same as image aspect if not set
-
-    if (!aspect) {
-      aspectStyle = `${imgElem.width / imgElem.height}`;
-    } else {
-      aspectStyle = '';
-    }
-
-    // > Register image onload and onerror handlers
-
-    /** @type {( e: Event ) => void} */
-    let onloadFn;
-
-    if (onload) {
-      if (imgElem?.complete) {
-        onload({ type: LOAD, target: imgElem });
-      } else {
-        onloadFn = onload;
-        imgElem?.addEventListener(LOAD, onloadFn);
-      }
-    }
-
-    /** @type {( e: Event ) => void} */
-    let onerrorFn;
-
-    if (onerror) {
-      onerrorFn = onerror;
-      imgElem?.addEventListener(ERROR, onerrorFn);
-    }
-
-    return () => {
-      if (onloadFn) {
-        imgElem?.removeEventListener(LOAD, onloadFn);
-      }
-
-      if (onerrorFn) {
-        imgElem?.removeEventListener(ERROR, onerrorFn);
-      }
-    };
-  });
-</script>
-
-<div
-  data-hk-enhanced-image
-  bind:this={imgBoxElem}
-  class="{base} {bg} {aspect} {overflow} {classes}"
-  style:--fit={fit}
-  style:--pos={position}
-  style:aspect-ratio={aspectStyle}
-  {...attrs}
->
-  <enhanced:img {src} {alt} />
-</div>
-
-<style>
-  [data-hk-enhanced-image],
-  :global([data-hk-enhanced-image] picture),
-  :global([data-hk-enhanced-image] img) {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-  :global([data-hk-enhanced-image] picture),
-  :global([data-hk-enhanced-image] img) {
-    max-width: 100%;
-    max-height: 100%;
-  }
-
-  :global([data-hk-enhanced-image] img) {
-    object-fit: var(--fit);
-    object-position: var(--pos);
-  }
-</style>

package/dist/components/image/ImageBox.svelte__

@@ -1,242 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-
-	import { ImageLoader } from '$lib/classes/svelte/image/index.js';
-
-	import { toSingleImageMeta } from '$lib/util/image/index.js';
-
-	/**
-	 * @example
-	 * import { ImageBox } from '/path/to/ImageBox/index.js';
-	 *
-	 * // @note 'as=metadata' is set by the preset
-	 * import NeonLightsOff from '$lib/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('$lib/classes/svelte/network-loader/typedef.js').LoadingProgress} LoadingProgress
-	 *
-	 * @typedef {import('$lib/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',
-
-		// Single image or responsive image meta data
-		imageMeta,
-
-		imageLoader,
-
-		alt = '',
-
-		// Attributes
-		...attrs
-	} = $props();
-
-	if (!imageMeta) {
-		throw new Error('Missing [imageMeta]');
-	}
-
-	// let show = $state(false);
-
-	/** @type {HTMLImageElement|undefined} */
-	let imgElem = $state();
-
-	let aspectStyle = $state('');
-
-	// > Loading
-
-	let metaWidth = $state(0);
-	let metaHeight = $state(0);
-
-	let imageMeta_ = $state();
-
-	$effect(() => {
-		//
-		// Is imageMeta is a list of responsive options: pick one
-		//
-		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"
-	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 objectUrl && 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___

@@ -1,241 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import { ImageLoader } from '$lib/classes/svelte/image/index.js';
-	import { ImageVariantsLoader } from '$lib/classes/svelte/image/index.js';
-	import { toSingleImageMeta } from '$lib/util/image/index.js';
-
-	/**
-	 * @type {{
-	 *   base?: string,
-	 *   bg?: string,
-	 *   classes?: string,
-	 *   width?: string,
-	 *   height?: string,
-	 *   aspect?: string,
-	 *   overflow?: string,
-	 *   fit?: 'contain' | 'cover' | 'fill',
-	 *   position?: string,
-	 *   imageMeta: import('$lib/config/typedef.js').ImageMeta | import('$lib/config/typedef.js').ImageMeta[],
-	 *   imageLoader?: import('$lib/classes/svelte/image/index.js').ImageLoader,
-	 *   alt?: string,
-	 *   onProgress?: () => import('$lib/classes/svelte/network-loader/typedef.js').LoadingProgress,
-	 *   debug?: boolean,
-	 *   [attr: string]: any
-	 * }}
-	 */
-	let {
-		// Style
-		base,
-		bg,
-		classes,
-		width,
-		height,
-		aspect,
-		overflow = 'overflow-clip',
-
-		// Fitting and positioning of image in its container
-		fit = 'contain',
-		position = 'left top',
-
-		// Single image or responsive image meta data
-		imageMeta,
-		imageLoader,
-
-		// Accessibility
-		alt = '',
-
-		// Development
-		debug = false,
-
-		// Additional attributes
-		...attrs
-	} = $props();
-
-	if (!imageMeta) {
-		throw new Error('Missing [imageMeta]');
-	}
-
-	/** @type {HTMLDivElement|undefined} */
-	let containerElem = $state();
-
-	/** @type {HTMLImageElement|undefined} */
-	let imgElem = $state();
-
-	let aspectStyle = $state('');
-
-	// > Loading
-	let metaWidth = $state(0);
-	let metaHeight = $state(0);
-
-	let imageMeta_ = $state();
-	let variantsLoader = $state();
-	let variantObjectUrl = $state(null);
-	let objectUrl = $state(null);
-
-	$effect(() => {
-		//
-		// Is imageMeta is a list of responsive options:
-		// => setup variants loader
-		//
-		if (Array.isArray(imageMeta) && !imageLoader && !variantsLoader) {
-			// $inspect(imageMeta, 'Creating variantsLoader');
-
-			variantsLoader = new ImageVariantsLoader(imageMeta, {
-				devicePixelRatio: window.devicePixelRatio
-			});
-		}
-		//
-		// Single image meta (only if not using variants)
-		//
-		else if (imageMeta && !variantsLoader) {
-			// Only run if there is no variantsLoader
-
-			//$inspect(imageMeta, 'Using single imageMeta');
-
-			imageMeta_ = toSingleImageMeta(imageMeta);
-		}
-	});
-
-	$effect(() => {
-		//
-		// Set meta width and height for single image
-		//
-		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;
-		}
-	});
-
-	$effect(() => {
-		//
-		// Create image loader for single image
-		//
-		if (imageMeta_ && !imageLoader_) {
-			imageLoader_ = new ImageLoader({ imageMeta: imageMeta_ });
-		}
-	});
-
-	$effect(() => {
-		//
-		// Start loading if imageLoader_ is in state 'initial'
-		//
-		if (imageLoader_?.initial) {
-			imageLoader_.load();
-		}
-	});
-
-	$effect(() => {
-		//
-		// Get objectUrl when the single image has finished loading
-		//
-		if (imageLoader_?.loaded) {
-			objectUrl = imageLoader_.getObjectURL();
-		}
-
-		return () => {
-			if (objectUrl) {
-				URL.revokeObjectURL(objectUrl);
-				objectUrl = null;
-			}
-		};
-	});
-
-	$effect(() => {
-		//
-		// Setup resize observer for variants loading
-		//
-		if (!containerElem || !variantsLoader) return;
-
-		const resizeObserver = new ResizeObserver((entries) => {
-			for (const entry of entries) {
-				const { width, height } = entry.contentRect;
-
-				variantsLoader.updateOptimalImageMeta({
-					containerWidth: width,
-					containerHeight: height,
-					fit
-				});
-			}
-		});
-
-		resizeObserver.observe(containerElem);
-
-		return () => {
-			resizeObserver.disconnect();
-		};
-	});
-
-	$effect(() => {
-		//
-		// Get variantObjectUrl when a variant has finished loading
-		//
-		if (variantsLoader?.loaded) {
-			variantObjectUrl = variantsLoader.getObjectURL();
-		}
-
-		return () => {
-			if (variantObjectUrl) {
-				URL.revokeObjectURL(variantObjectUrl);
-				variantObjectUrl = null;
-			}
-		};
-	});
-</script>
-
-<div
-	data-image="box"
-	bind:this={containerElem}
-	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 variantsLoader?.loaded && variantObjectUrl}
-		<img
-			src={variantObjectUrl}
-			{alt}
-			width={variantsLoader.variant.width}
-			height={variantsLoader.variant.height}
-		/>
-	{:else if objectUrl && 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/ResponsiveImage.svelte

@@ -1,90 +0,0 @@
-<script>
-	/** @typedef {import('../../config/typedef.js').ImageMeta} ImageMeta */
-
-	import { ImageVariantsLoader } from '../../classes/svelte/image/index.js';
-
-	/**
-	 * @type {{
-	 *   base?: string,
-	 *   classes?: string
-	 *   boxBase?: string,
-	 *   boxClasses?: string
-	 *   boxAttrs?: { [attr: string]: * },
-	 *   images: ImageMeta[],
-	 *   alt?: string
-	 * } & { [attr: string]: any }}
-	 */
-	const {
-		base,
-		classes,
-		boxBase,
-		boxClasses,
-		boxAttrs,
-
-		// Functional
-		images,
-		alt = '',
-
-		// Attributes
-		...attrs
-	} = $props();
-
-	let variantsLoader = new ImageVariantsLoader(images);
-
-	let containerWidth = $state(0);
-
-	/** @type {ImageMeta|null} */
-	let imageVariant = $state(null);
-
-	$effect(() => {
-		variantsLoader.updateOptimalImageMeta({ containerWidth });
-	});
-
-	// $effect(() => {
-	//   console.log('imageVariant', $state.snapshot(imageVariant));
-	// });
-
-	/** @type {string|null} */
-	let imageUrl = $state(null);
-
-	$effect(() => {
-		let image;
-
-		if (variantsLoader.loaded) {
-			// @ts-ignore
-			imageUrl = variantsLoader.getObjectURL();
-		}
-
-		return () => {
-			if (imageUrl) {
-				URL.revokeObjectURL(imageUrl);
-				imageUrl = null;
-			}
-		};
-	});
-
-	let variant = $derived(variantsLoader.variant);
-
-	// let image = $derived(variantsLoader.image);
-</script>
-
-™
-<div
-	bind:clientWidth={containerWidth}
-	class="{boxBase} {boxClasses}"
-	{...boxAttrs}
->
-	<!-- <p class="p text-white">variant: {JSON.stringify(variant)}</p> -->
-
-	{#if variant}
-		<img
-			data-image="responsive"
-			src={imageUrl ? imageUrl : ''}
-			width={variant.width}
-			height={variant.height}
-			{alt}
-			class="{boxBase} {boxClasses}"
-			{...attrs}
-		/>
-	{/if}
-</div>

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

@@ -1,31 +0,0 @@
-export default ResponsiveImage;
-export type ImageMeta = import("../../config/typedef.js").ImageMeta;
-type ResponsiveImage = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<{
-        base?: string;
-        classes?: string;
-        boxBase?: string;
-        boxClasses?: string;
-        boxAttrs?: {
-            [attr: string]: any;
-        };
-        images: ImageMeta[];
-        alt?: string;
-    } & {
-        [attr: string]: any;
-    }>): void;
-};
-declare const ResponsiveImage: import("svelte").Component<{
-    base?: string;
-    classes?: string;
-    boxBase?: string;
-    boxClasses?: string;
-    boxAttrs?: {
-        [attr: string]: any;
-    };
-    images: ImageMeta[];
-    alt?: string;
-} & {
-    [attr: string]: any;
-}, {}, "">;

package/dist/components/image/ResponsiveImage.svelte__

@@ -1,90 +0,0 @@
-<script>
-	/** @typedef {import('$lib/config/typedef.js').ImageMeta} ImageMeta */
-
-	import { ImageVariantsLoader } from '$lib/classes/svelte/image/index.js';
-
-	/**
-	 * @type {{
-	 *   base?: string,
-	 *   classes?: string
-	 *   boxBase?: string,
-	 *   boxClasses?: string
-	 *   boxAttrs?: { [attr: string]: * },
-	 *   images: ImageMeta[],
-	 *   alt?: string
-	 * } & { [attr: string]: any }}
-	 */
-	const {
-		base,
-		classes,
-		boxBase,
-		boxClasses,
-		boxAttrs,
-
-		// Functional
-		images,
-		alt = '',
-
-		// Attributes
-		...attrs
-	} = $props();
-
-	let variantsLoader = new ImageVariantsLoader(images);
-
-	let containerWidth = $state(0);
-
-	/** @type {ImageMeta|null} */
-	let imageVariant = $state(null);
-
-	$effect(() => {
-		variantsLoader.updateOptimalImageMeta({ containerWidth });
-	});
-
-	// $effect(() => {
-	//   console.log('imageVariant', $state.snapshot(imageVariant));
-	// });
-
-	/** @type {string|null} */
-	let imageUrl = $state(null);
-
-	$effect(() => {
-		let image;
-
-		if (variantsLoader.loaded) {
-			// @ts-ignore
-			imageUrl = variantsLoader.getObjectURL();
-		}
-
-		return () => {
-			if (imageUrl) {
-				URL.revokeObjectURL(imageUrl);
-				imageUrl = null;
-			}
-		};
-	});
-
-	let variant = $derived(variantsLoader.variant);
-
-	// let image = $derived(variantsLoader.image);
-</script>
-
-™
-<div
-	bind:clientWidth={containerWidth}
-	class="{boxBase} {boxClasses}"
-	{...boxAttrs}
->
-	<!-- <p class="p text-white">variant: {JSON.stringify(variant)}</p> -->
-
-	{#if variant}
-		<img
-			data-image="responsive"
-			src={imageUrl ? imageUrl : ''}
-			width={variant.width}
-			height={variant.height}
-			{alt}
-			class="{boxBase} {boxClasses}"
-			{...attrs}
-		/>
-	{/if}
-</div>