@hkdigital/lib-sveltekit 0.0.91 → 0.0.93

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

@@ -4,6 +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,31 +14,29 @@ import {
  * - The loading process can be monitored
  */
 export default class ImageLoader extends NetworkLoader {
-  // onenter(label) {
-  //   console.log('ImageLoader:onenter', label);
-  // }
+  /** @type {ImageMeta} */
+  #imageMeta;
+
+  /**
+   * @param {object} _
+   * @param {ImageMeta|ImageMeta[]} _.imageMeta
+   */
+  constructor({ imageMeta }) {
+    imageMeta = toSingleImageMeta(imageMeta);
 
-  // constructor({ url }) {
-  //   super({ url });
+    super({ url: imageMeta.src });
 
-  //   $effect(() => {
-  //     console.log('ImageLoader: state', this.state);
-  //   });
-  // }
+    this.#imageMeta = imageMeta;
+  }
+
+  get imageMeta() {
+    return this.#imageMeta;
+  }
 
   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
   //  *

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/network-loader/NetworkLoader.svelte.d.ts

@@ -83,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

@@ -227,7 +227,7 @@ export default class NetworkLoader {
    *
    * @note the objectURL should be revoked when no longer used
    *
-   * @returns {string|null}
+   * @returns {string}
    */
   getObjectURL() {
     //
@@ -247,9 +247,7 @@ export default class NetworkLoader {
     //   };
     // });
 
-    const blob = this.getBlob();
-
-    return blob ? URL.createObjectURL(blob) : null;
+    return URL.createObjectURL(this.getBlob());
   }
 
   /**

package/dist/components/image/ImageBox.svelte

@@ -3,6 +3,8 @@
 
 	import { ImageLoader } from '../../classes/svelte/image/index.js';
 
+	import { toSingleImageMeta } from '../../util/image/index.js';
+
 	/**
 	 * @example
 	 * import { ImageBox } from '/path/to/ImageBox/index.js';
@@ -73,7 +75,13 @@
    * @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 {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
@@ -94,8 +102,10 @@
 		fit = 'contain',
 		position = 'left top',
 
-    // Image meta
-		image,
+    // Image meta data
+		imageMeta,
+
+		imageLoader,
 
 		alt = '',
 
@@ -118,16 +128,12 @@
 	let metaWidth = $state(0);
 	let metaHeight = $state(0);
 
-	let singleImage = $state();
+	let imageMeta_ = $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;
+		if( imageMeta )
+		{
+			imageMeta_ = toSingleImageMeta( imageMeta );
 		}
 	});
 
@@ -135,19 +141,30 @@
 		//
 		// Set meta width and height
 		//
-		if (singleImage) {
-			if (singleImage.width) {
-				metaWidth = singleImage.width;
+		if (imageMeta_) {
+			if (imageMeta_.width) {
+				metaWidth = imageMeta_.width;
 			}
 
-			if (singleImage.height) {
-				metaHeight = singleImage.height;
+			if (imageMeta_.height) {
+				metaHeight = imageMeta_.height;
 			}
 		}
 	});
 
 	/** @type {ImageLoader|undefined} */
-	let imageLoader = $state();
+	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);
@@ -156,20 +173,19 @@
 		//
 		// Create image loader
 		//
-		if (singleImage.src && !imageLoader) {
-			const url = singleImage.src;
-			imageLoader = new ImageLoader({ url });
+		if (imageMeta_ && !imageLoader_) {
+			imageLoader_ = new ImageLoader({ imageMeta: imageMeta_ });
 		}
 	});
 
 	$effect(() => {
 		//
-		// Start loading if imageLoader is in state 'initial'
+		// Start loading if imageLoader_ is in state 'initial'
 		//
 		// TODO: implement lazy flag
 		//
-		if (imageLoader?.initial) {
-			imageLoader.load();
+		if (imageLoader_?.initial) {
+			imageLoader_.load();
 		}
 	});
 
@@ -177,9 +193,9 @@
 		//
 		// Get objectUrl when the image has finished loading
 		//
-		if (imageLoader.loaded) {
+		if (imageLoader_.loaded) {
 			// @ts-ignore
-			objectUrl = imageLoader.getObjectURL();
+			objectUrl = imageLoader_.getObjectURL();
 		}
 
 		return () => {
@@ -190,9 +206,6 @@
 		};
 	});
 
-	$effect(() => {
-		console.log('classes', classes);
-	});
 </script>
 
 <div

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

@@ -37,9 +37,13 @@ declare const ImageBox: import("svelte").Component<{
      */
     position?: import("./typedef.js").ObjectPosition;
     /**
-     * - Image metadata or array of image metadata
+     * Image metadata, TODO: array of image metadata for responsive image
      */
-    image: import("../../config/typedef.js").ImageMeta | import("../../config/typedef.js").ImageMeta[];
+    imageMeta?: import("../../config/typedef.js").ImageMeta | import("../../config/typedef.js").ImageMeta[];
+    /**
+     * Image loader
+     */
+    imageLoader?: ImageLoader;
     /**
      * - Alternative text for the image
      */
@@ -53,3 +57,4 @@ declare const ImageBox: import("svelte").Component<{
      */
     attr?: any;
 }, {}, "">;
+import { ImageLoader } from '../../classes/svelte/image/index.js';

package/dist/components/image/ResponsiveImage.svelte

@@ -1,5 +1,5 @@
 <script>
-	/** @typedef {import('../../types/imagetools.js').ImageMeta} ImageMeta */
+	/** @typedef {import('../../config/typedef.js').ImageMeta} ImageMeta */
 
 	import { ImageVariantsLoader } from '../../classes/svelte/image/index.js';
 

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

@@ -1,5 +1,5 @@
 export default ResponsiveImage;
-export type ImageMeta = any;
+export type ImageMeta = import("../../config/typedef.js").ImageMeta;
 declare const ResponsiveImage: import("svelte").Component<{
     base?: string;
     classes?: string;

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

@@ -1,4 +1,5 @@
+export { default as ImageBox } from "./ImageBox.svelte";
 export { default as ResponsiveImage } from "./ResponsiveImage.svelte";
 declare const _default: {};
 export default _default;
-export type ImageMeta = any;
+export type ImageMeta = import("../../config/typedef.js").ImageMeta;

package/dist/components/image/index.js

@@ -1,5 +1,6 @@
-/** @typedef {import('../../types/imagetools.js').ImageMeta} ImageMeta */
+/** @typedef {import('../../config/typedef.js').ImageMeta} ImageMeta */
 
+export { default as ImageBox } from './ImageBox.svelte';
 export { default as ResponsiveImage } from './ResponsiveImage.svelte';
 
 export default {};

package/dist/config/imagetools.d.ts

@@ -1,9 +1,3 @@
-// export interface ImageMeta {
-//   src: string;
-//   width: number;
-//   height: number;
-// }
-
 type ImageMeta = import('./typedef.js').ImageMeta;
 
 declare module '*?responsive' {

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.91",
+	"version": "0.0.93",
 	"author": "Jens Kleinhout, HKdigital (https://hkdigital.nl)",
 	"license": "ISC",
 	"repository": {
@@ -48,6 +48,7 @@
 		"./*": "./dist/*"
 	},
 	"peerDependencies": {
+		"@sveltejs/kit": "^2.15.2",
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
@@ -58,18 +59,18 @@
 		"@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": "^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",
@@ -77,7 +78,6 @@
 		"vitest": "^2.1.8"
 	},
 	"dependencies": {
-		"@sveltejs/kit": "^2.15.2",
 		"runed": "^0.23.0",
 		"valibot": "^0.42.1",
 		"zod": "^3.24.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]: * }}
-   */
-  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>