@micrio/client 5.3.1 → 5.3.3

package/micrio.min.d.ts

@@ -4,7 +4,14 @@ declare module '@micrio/client' {
 	 * Defines the current version of the Micrio library.
 	 * This constant is used internally and exposed statically via `HTMLMicrioElement.VERSION`.
 	 */
-	export const VERSION = "5.3.1";
+	export const VERSION = "5.3.3";
+	/**
+	 * Loads an image texture asynchronously. Adds the request to the queue
+	 * and returns a Promise that resolves with the TextureBitmap or rejects on error.
+	 * @param src The URL of the image to load.
+	 * @returns A Promise resolving to the loaded TextureBitmap.
+	 */
+	export const loadTexture: (src: string) => Promise<TextureBitmap>;
 	export type PREDEFINED = [string, Models.ImageInfo.ImageInfo, Models.ImageData.ImageData | undefined];
 	/** Enum for identifying media type. */
 	export enum MediaType {
@@ -102,158 +109,6 @@ declare module '@micrio/client' {
 			}
 		}
 	}
-	/**
-	 * Micrio grid display controller
-	 * @author Marcel Duin <marcel@micr.io>
-	 */
-	/**
-	 * Controls the display and interaction logic for grid layouts.
-	 * Instantiated on the primary {@link MicrioImage} if grid data is present.
-	 * Accessed via `micrioImage.grid`.
-	 */
-	export class Grid {
-		micrio: HTMLMicrioElement;
-		image: MicrioImage;
-		/** Array of {@link MicrioImage} instances currently part of the grid definition (loaded). */
-		readonly images: MicrioImage[];
-		/** Array of {@link MicrioImage} instances currently visible in the grid layout. */
-		current: MicrioImage[];
-		/** If true, the HTML grid overlay remains visible and interactive even when an image is focused. */
-		clickable: boolean;
-		/** Writable Svelte store holding the currently focused {@link MicrioImage} instance, or undefined if in grid view. */
-		readonly focussed: Writable<MicrioImage | undefined>;
-		/** Getter for the current value of the {@link focussed} store. */
-		get $focussed(): MicrioImage | undefined;
-		/** Writable Svelte store holding an array of {@link MicrioImage} instances whose markers should be displayed in the grid view. */
-		readonly markersShown: Writable<MicrioImage[]>;
-		/** Array storing the history of grid layouts for back navigation. */
-		history: Models.Grid.GridHistory[];
-		/** Writable Svelte store indicating the current depth in the grid history stack. */
-		depth: Writable<number>;
-		/** Default animation duration (seconds) when transitioning *into* a new layout or focused view. */
-		aniDurationIn: number;
-		/** Default animation duration (seconds) when transitioning *out* of a focused view or going back in history. */
-		aniDurationOut: number;
-		/** Delay (seconds) between individual image transitions for 'delayed' effects. */
-		transitionDelay: number;
-		/**
-		 * The Grid constructor. Initializes the grid based on image settings.
-		 * @param micrio The main HTMLMicrioElement instance.
-		 * @param image The MicrioImage instance acting as the virtual container for the grid.
-		*/
-		constructor(micrio: HTMLMicrioElement, image: MicrioImage);
-		/**
-		 * Sets the grid layout based on an input string or array of image definitions.
-		 * This is the main method for changing the grid's content and appearance.
-		 *
-		 * @param input The grid definition. Can be:
-		 *   - A semicolon-separated string following the format defined in `Grid.getString`.
-		 *   - An array of {@link MicrioImage} instances.
-		 *   - An array of objects `{image: MicrioImage, ...GridImageOptions}`.
-		 * @param opts Options controlling the transition and layout.
-		 * @returns A Promise that resolves with the array of currently displayed {@link MicrioImage} instances when the transition completes.
-		*/
-		set(input?: string | MicrioImage[] | ({
-			image: MicrioImage;
-		} & Models.Grid.GridImageOptions)[], opts?: {
-			/** If true, does not add the previous layout to the history stack. */
-			noHistory?: boolean;
-			/** If true, keeps the HTML grid element in the DOM (used internally). */
-			keepGrid?: boolean;
-			/** If true, arranges images in a single horizontal row. */
-			horizontal?: boolean;
-			/** Overrides the default animation duration for the main grid view transition. */
-			duration?: number;
-			/** If provided, animates the main grid view to this viewport rectangle. */
-			view?: Models.Camera.View;
-			/** If true, skips the main grid camera animation. */
-			noCamAni?: boolean;
-			/** If true, forces area animation even for images not currently visible. */
-			forceAreaAni?: boolean;
-			/** If true, does not unfocus the currently focused image when setting a new layout. */
-			noBlur?: boolean;
-			/** If true, skips the fade-in animation for new images. */
-			noFade?: boolean;
-			/** Specifies the transition animation type (e.g., 'crossfade', 'slide-left', 'behind-delayed'). */
-			transition?: Models.Grid.GridSetTransition;
-			/** If true, forces animation even if duration is 0. */
-			forceAni?: boolean;
-			/** If true, limits individual image views to cover their grid cell. */
-			coverLimit?: boolean;
-			/** If true, sets the initial view of images to cover their grid cell (but doesn't enforce limit). */
-			cover?: boolean;
-			/** Scale factor (0-1) applied to each grid cell (creates margins). */
-			scale?: number;
-			/** Overrides the automatic calculation of grid columns. */
-			columns?: number;
-		}): Promise<MicrioImage[]>;
-		/**
-		 * Parses an individual image grid string into a GridImage object.
-		 * @param s The grid string for a single image.
-		 * @returns The parsed {@link Models.Grid.GridImage} object.
-		*/
-		getImage(s: string): Models.Grid.GridImage;
-		/**
-		 * Converts an ImageInfo object and options back into the grid string format.
-		 * @returns The grid encoded string for this image.
-		*/
-		getString: (i: Models.ImageInfo.ImageInfo, opts?: Models.Grid.GridImageOptions) => string;
-		/** Fade out unused images in the grid
-		 * @param images The images to hide
-		*/
-		private removeImages;
-		/** Checks whether current viewed image is (part of) grid */
-		insideGrid(): boolean;
-		/** Reset the grid to its initial layout
-		 * @param duration Duration in seconds
-		 * @param noCamAni Don't do any camera animating
-		 * @param forceAni Force animation on all grid images
-		 * @returns Promise when the transition is complete
-		*/
-		reset(duration?: number, noCamAni?: boolean, forceAni?: boolean): Promise<MicrioImage[]>;
-		/** Fly to the viewports of any markers containing a class name
-		 * @param tag The class name to match
-		 * @param duration Optional duration in ms
-		 * @param noZoom Don't zoom into the markers, just filter the images
-		 * @returns Promise when the transition is complete
-		*/
-		flyToMarkers(tag?: string, duration?: number, noZoom?: boolean): Promise<MicrioImage[]>;
-		/** Go back one step in the grid history
-		 * @param duration Optional duration for transition
-		 * @returns Promise when the transition is complete
-		*/
-		back(duration?: number): Promise<void>;
-		/** Open a grid image full size and set it as the main active image
-		 * @param img The image
-		 * @param opts Focus options
-		 * @returns Promise for when the transition completes
-		*/
-		focus(img: MicrioImage | undefined, opts?: Models.Grid.FocusOptions): Promise<void>;
-		/** Unfocusses any currently focussed image */
-		blur(): void;
-		/** Do an (external) action
-		 * @param action The action type enum or string
-		 * @param data Optional action data
-		 * @param duration Optional action duration
-		*/
-		action(action: Enums.Grid.GridActionType | string, data?: string, duration?: number): void;
-		/** Enlarge a specific image idx of the currently shown grid
-		 * @param idx The image index of the current grid
-		 * @param width The image target number of columns
-		 * @param height The image target number of rows
-		 * @returns Promise when the transition is completed
-		*/
-		enlarge(idx: number, width: number, height?: number): Promise<MicrioImage[]>;
-		/** Get the relative in-grid viewport of the image */
-		getRelativeView(image: MicrioImage, view: Models.Camera.View): Models.Camera.View;
-	}
-	/**
-	 * Loads an image texture asynchronously. Adds the request to the queue
-	 * and returns a Promise that resolves with the TextureBitmap or rejects on error.
-	 * @param src The URL of the image to load.
-	 * @returns A Promise resolving to the loaded TextureBitmap.
-	 */
-	export const loadTexture: (src: string) => Promise<TextureBitmap>;
 	/**
 	 * Represents the virtual camera used to view a {@link MicrioImage}.
 	 * Provides methods for controlling the viewport (position, zoom, rotation),
@@ -810,6 +665,151 @@ declare module '@micrio/client' {
 		/** Fades out the image smoothly or instantly. */
 		fadeOut(direct?: boolean): void;
 	}
+	/**
+	 * Micrio grid display controller
+	 * @author Marcel Duin <marcel@micr.io>
+	 */
+	/**
+	 * Controls the display and interaction logic for grid layouts.
+	 * Instantiated on the primary {@link MicrioImage} if grid data is present.
+	 * Accessed via `micrioImage.grid`.
+	 */
+	export class Grid {
+		micrio: HTMLMicrioElement;
+		image: MicrioImage;
+		/** Array of {@link MicrioImage} instances currently part of the grid definition (loaded). */
+		readonly images: MicrioImage[];
+		/** Array of {@link MicrioImage} instances currently visible in the grid layout. */
+		current: MicrioImage[];
+		/** If true, the HTML grid overlay remains visible and interactive even when an image is focused. */
+		clickable: boolean;
+		/** Writable Svelte store holding the currently focused {@link MicrioImage} instance, or undefined if in grid view. */
+		readonly focussed: Writable<MicrioImage | undefined>;
+		/** Getter for the current value of the {@link focussed} store. */
+		get $focussed(): MicrioImage | undefined;
+		/** Writable Svelte store holding an array of {@link MicrioImage} instances whose markers should be displayed in the grid view. */
+		readonly markersShown: Writable<MicrioImage[]>;
+		/** Array storing the history of grid layouts for back navigation. */
+		history: Models.Grid.GridHistory[];
+		/** Writable Svelte store indicating the current depth in the grid history stack. */
+		depth: Writable<number>;
+		/** Default animation duration (seconds) when transitioning *into* a new layout or focused view. */
+		aniDurationIn: number;
+		/** Default animation duration (seconds) when transitioning *out* of a focused view or going back in history. */
+		aniDurationOut: number;
+		/** Delay (seconds) between individual image transitions for 'delayed' effects. */
+		transitionDelay: number;
+		/**
+		 * The Grid constructor. Initializes the grid based on image settings.
+		 * @param micrio The main HTMLMicrioElement instance.
+		 * @param image The MicrioImage instance acting as the virtual container for the grid.
+		*/
+		constructor(micrio: HTMLMicrioElement, image: MicrioImage);
+		/**
+		 * Sets the grid layout based on an input string or array of image definitions.
+		 * This is the main method for changing the grid's content and appearance.
+		 *
+		 * @param input The grid definition. Can be:
+		 *   - A semicolon-separated string following the format defined in `Grid.getString`.
+		 *   - An array of {@link MicrioImage} instances.
+		 *   - An array of objects `{image: MicrioImage, ...GridImageOptions}`.
+		 * @param opts Options controlling the transition and layout.
+		 * @returns A Promise that resolves with the array of currently displayed {@link MicrioImage} instances when the transition completes.
+		*/
+		set(input?: string | MicrioImage[] | ({
+			image: MicrioImage;
+		} & Models.Grid.GridImageOptions)[], opts?: {
+			/** If true, does not add the previous layout to the history stack. */
+			noHistory?: boolean;
+			/** If true, keeps the HTML grid element in the DOM (used internally). */
+			keepGrid?: boolean;
+			/** If true, arranges images in a single horizontal row. */
+			horizontal?: boolean;
+			/** Overrides the default animation duration for the main grid view transition. */
+			duration?: number;
+			/** If provided, animates the main grid view to this viewport rectangle. */
+			view?: Models.Camera.View;
+			/** If true, skips the main grid camera animation. */
+			noCamAni?: boolean;
+			/** If true, forces area animation even for images not currently visible. */
+			forceAreaAni?: boolean;
+			/** If true, does not unfocus the currently focused image when setting a new layout. */
+			noBlur?: boolean;
+			/** If true, skips the fade-in animation for new images. */
+			noFade?: boolean;
+			/** Specifies the transition animation type (e.g., 'crossfade', 'slide-left', 'behind-delayed'). */
+			transition?: Models.Grid.GridSetTransition;
+			/** If true, forces animation even if duration is 0. */
+			forceAni?: boolean;
+			/** If true, limits individual image views to cover their grid cell. */
+			coverLimit?: boolean;
+			/** If true, sets the initial view of images to cover their grid cell (but doesn't enforce limit). */
+			cover?: boolean;
+			/** Scale factor (0-1) applied to each grid cell (creates margins). */
+			scale?: number;
+			/** Overrides the automatic calculation of grid columns. */
+			columns?: number;
+		}): Promise<MicrioImage[]>;
+		/**
+		 * Parses an individual image grid string into a GridImage object.
+		 * @param s The grid string for a single image.
+		 * @returns The parsed `Models.Grid.GridImage` object.
+		*/
+		getImage(s: string): Models.Grid.GridImage;
+		/**
+		 * Converts an ImageInfo object and options back into the grid string format.
+		 * @returns The grid encoded string for this image.
+		*/
+		getString: (i: Models.ImageInfo.ImageInfo, opts?: Models.Grid.GridImageOptions) => string;
+		/** Fade out unused images in the grid
+		 * @param images The images to hide
+		*/
+		private removeImages;
+		/** Checks whether current viewed image is (part of) grid */
+		insideGrid(): boolean;
+		/** Reset the grid to its initial layout
+		 * @param duration Duration in seconds
+		 * @param noCamAni Don't do any camera animating
+		 * @param forceAni Force animation on all grid images
+		 * @returns Promise when the transition is complete
+		*/
+		reset(duration?: number, noCamAni?: boolean, forceAni?: boolean): Promise<MicrioImage[]>;
+		/** Fly to the viewports of any markers containing a class name
+		 * @param tag The class name to match
+		 * @param duration Optional duration in ms
+		 * @param noZoom Don't zoom into the markers, just filter the images
+		 * @returns Promise when the transition is complete
+		*/
+		flyToMarkers(tag?: string, duration?: number, noZoom?: boolean): Promise<MicrioImage[]>;
+		/** Go back one step in the grid history
+		 * @param duration Optional duration for transition
+		 * @returns Promise when the transition is complete
+		*/
+		back(duration?: number): Promise<void>;
+		/** Open a grid image full size and set it as the main active image
+		 * @param img The image
+		 * @param opts Focus options
+		 * @returns Promise for when the transition completes
+		*/
+		focus(img: MicrioImage | undefined, opts?: Models.Grid.FocusOptions): Promise<void>;
+		/** Unfocusses any currently focussed image */
+		blur(): void;
+		/** Do an (external) action
+		 * @param action The action type enum or string
+		 * @param data Optional action data
+		 * @param duration Optional action duration
+		*/
+		action(action: Enums.Grid.GridActionType | string, data?: string, duration?: number): void;
+		/** Enlarge a specific image idx of the currently shown grid
+		 * @param idx The image index of the current grid
+		 * @param width The image target number of columns
+		 * @param height The image target number of rows
+		 * @returns Promise when the transition is completed
+		*/
+		enlarge(idx: number, width: number, height?: number): Promise<MicrioImage[]>;
+		/** Get the relative in-grid viewport of the image */
+		getRelativeView(image: MicrioImage, view: Models.Camera.View): Models.Camera.View;
+	}
 	/**
 	 * Video tour controller. Manages playback and camera animation for video tours
 	 * defined by a timeline of view rectangles and durations.
@@ -1489,7 +1489,7 @@ declare module '@micrio/client' {
 				/** Positional audio asset */
 				positionalAudio?: Assets.AudioLocation;
 				/** Optional function that overrides all behavior */
-				onclick?: (m: Models.ImageData.Marker) => void;
+				onclick?: (m: ImageData.Marker) => void;
 				/** Additional options */
 				data?: MarkerData;
 			};
@@ -1875,7 +1875,7 @@ declare module '@micrio/client' {
 				/** Custom icon lib */
 				icons?: Assets.Image[];
 				/** Multi-image marker tours */
-				markerTours?: Models.ImageData.MarkerTour[];
+				markerTours?: ImageData.MarkerTour[];
 			}
 			interface WaypointInterface {
 				el?: HTMLElement;
@@ -1925,7 +1925,7 @@ declare module '@micrio/client' {
 			type MarkerFocusTransition = ('crossfade' | 'slide' | 'slide-horiz' | 'slide-vert' | 'slide-up' | 'slide-down' | 'slide-right' | 'slide-left' | 'swipe' | 'swipe-horiz' | 'swipe-vert' | 'swipe-up' | 'swipe-down' | 'swipe-right' | 'swipe-left' | 'behind' | 'behind-left' | 'behind-right');
 			type GridSetTransition = ('crossfade' | 'behind' | 'behind-delayed' | 'appear-delayed');
 			/** Virtual ImageInfo extension to support grid logic */
-			interface GridImage extends Partial<Models.ImageInfo.ImageInfo> {
+			interface GridImage extends Partial<ImageInfo.ImageInfo> {
 				size: [number, number?];
 				area?: Camera.View;
 				view?: Camera.View;
@@ -1946,7 +1946,7 @@ declare module '@micrio/client' {
 				/** Transition duration in ms */
 				duration?: number;
 				/** Transition animation, defaults to crossfade */
-				transition?: Models.Grid.MarkerFocusTransition;
+				transition?: Grid.MarkerFocusTransition;
 				/** Set the target viewport immediately */
 				noViewAni?: boolean;
 				/** Animate the previously focussed image to this view during exit transition */
@@ -2036,11 +2036,11 @@ declare module '@micrio/client' {
 		namespace State {
 			/** Popover interface state type */
 			interface PopoverType {
-				contentPage?: Models.ImageData.Menu;
+				contentPage?: ImageData.Menu;
 				image?: MicrioImage;
-				marker?: Models.ImageData.Marker;
-				markerTour?: Models.ImageData.MarkerTour;
-				gallery?: Models.Assets.Image[];
+				marker?: ImageData.Marker;
+				markerTour?: ImageData.MarkerTour;
+				gallery?: Assets.Image[];
 				galleryStart?: string;
 				showLangSelect?: boolean;
 			}
@@ -2056,6 +2056,214 @@ declare module '@micrio/client' {
 				portrait: boolean;
 			}
 		}
+		type MicrioEvent<T = any> = Event & {
+			detail: T;
+		};
+		interface MicrioEventDetails {
+			/** The main Micrio image is loaded and fully shown */
+			'show': HTMLMicrioElement;
+			/** Before the ImageInfo settings are read, this event allows you to alter them */
+			'pre-info': ImageInfo.ImageInfo;
+			/** Before the ImageData contents are read, this event allows you to alter it */
+			'pre-data': {
+				[micrioId: string]: ImageData.ImageData;
+			};
+			/** The main Micrio element has initialized and is being printed */
+			'print': ImageInfo.ImageInfo;
+			/** Individual image data is loaded and Micrio will start rendering */
+			'load': MicrioImage;
+			/** The user has switched available languages */
+			'lang-switch': string;
+			/** The camera has zoomed */
+			'zoom': {
+				image: MicrioImage;
+				view: Camera.View;
+			};
+			/** The camera has moved */
+			'move': {
+				image: MicrioImage;
+				view: Camera.View;
+			};
+			/** A frame has been drawn */
+			'draw': void;
+			/** The <micr-io> element was resized */
+			'resize': DOMRect;
+			/** The user has started panning */
+			'panstart': void;
+			/** The user has stopped panning */
+			'panend': {
+				duration: number;
+				movedX: number;
+				movedY: number;
+			};
+			/** The user has stopped pinching */
+			'pinchstart': void;
+			/** The user has stopped pinching */
+			'pinchend': {
+				duration: number;
+				movedX: number;
+				movedY: number;
+			};
+			/** A marker has been opened and the camera animation is starting */
+			'marker-open': ImageData.Marker;
+			/** A marker has been fully opened and the camera is done, and popup shown */
+			'marker-opened': ImageData.Marker;
+			/** A marker has been successfully closed */
+			'marker-closed': ImageData.Marker;
+			/** A tour has been successfully started */
+			'tour-start': ImageData.Tour;
+			/** A tour has been successfully stopped */
+			'tour-stop': ImageData.Tour;
+			/** A tour's UI interface has automatically minimized */
+			'tour-minimize': ImageData.Tour;
+			/** Fires for each marker step in a marker tour */
+			'tour-step': ImageData.MarkerTour;
+			/** A multi-image tour is played/resumed */
+			'serialtour-play': ImageData.MarkerTour;
+			/** A multi-image tour is paused */
+			'serialtour-pause': ImageData.MarkerTour;
+			/** A video tour has started from the beginning (can be part of a marker tour) */
+			'videotour-start': ImageData.VideoTour;
+			/** A video tour has ended or is aborted (can be part of a marker tour) */
+			'videotour-stop': ImageData.VideoTour;
+			/** A video tour is played or resumed */
+			'videotour-play': void;
+			/** A video tour is paused */
+			'videotour-pause': void;
+			/** A video tour has ended */
+			'tour-ended': ImageData.VideoTour;
+			/** When a video tour has custom events, they will be fired like this */
+			'tour-event': ImageData.Event;
+			/** The audio controller has been successfully initialized and can play audio */
+			'audio-init': void;
+			/** The audio has been muted */
+			'audio-mute': void;
+			/** The audio has been unmuted */
+			'audio-unmute': void;
+			/** Fires when there is autoplay audio or video which was disallowed by the browser */
+			'autoplay-blocked': void;
+			/** Media has started playing */
+			'media-play': void;
+			/** Media has stopped playing */
+			'media-pause': void;
+			/** Media has ended */
+			'media-ended': void;
+			/** A media timeupdate tick */
+			'timeupdate': number;
+			/** A custom popover page was opened */
+			'page-open': ImageData.Menu;
+			/** A custom popover page was closed */
+			'page-closed': ImageData.Menu;
+			/** Triggers on album image change */
+			'gallery-show': number;
+			/** The grid controller has initialized */
+			'grid-init': Grid;
+			/** All images in the grid have loaded */
+			'grid-load': void;
+			/** The grid layout has changed */
+			'grid-layout-set': Grid;
+			/** The main grid view is activated */
+			'grid-focus': MicrioImage;
+			/** The main grid has lost focus, i.e., navigated away */
+			'grid-blur': void;
+			/** Split screen mode has started */
+			'splitscreen-start': MicrioImage;
+			/** Split screen mode has stopped */
+			'splitscreen-stop': MicrioImage;
+			/** When there is any user action, this event fires. Deferred and fires at a maximum rate of every 500ms */
+			'update': Array<string>;
+		}
+		type MicrioEventMap = {
+			[K in keyof MicrioEventDetails]: MicrioEvent<MicrioEventDetails[K]>;
+		};
+		namespace Attributes {
+			interface MicrioCustomAttributes {
+				/** The image ID */
+				'id'?: string;
+				/** The data language code to use. Default: 'en' */
+				'lang'?: string;
+				/** For custom hosted Micrio images, specify the root URL. Default: Based on image */
+				'data-path'?: string;
+				/** Set this to 'cover' to start the image using the full viewport. Default: undefined */
+				'data-inittype'?: string;
+				/** The user cannot zoom out further than the full viewport. Default: undefined */
+				'data-coverlimit'?: boolean;
+				/** Only start loading the image when it's been scrolled into the user's view. Default: false */
+				'lazyload'?: boolean;
+				/** Do not load any metadata (markers, tours, etc). Default: false */
+				'data-skipmeta'?: boolean;
+				/** Simulate an <img/> element. No logo, loader bar, and no event listeners. Default: false */
+				'data-static'?: boolean;
+				/** Read and write deeplinks to opened tours and markers. Default: null */
+				'data-router'?: string;
+				/** Sending user input as GA Events to any available GTag instance (does nothing if none). Default: true */
+				'data-gtag'?: boolean;
+				/** Set the speed factor for camera animations. Default: 1 */
+				'data-camspeed'?: number;
+				/** Can pan outside the image's limits. Default: false */
+				'data-freemove'?: boolean;
+				/** Set the percentage (1=100%) of how far a user can zoom in. Default: 1 */
+				'data-zoomlimit'?: number;
+				/** Set the initial viewport rectangle of the image. Default: [0,0,1,1] */
+				'data-view'?: number[];
+				/** Set focus point of the image, treated as the center in case of image overflows. Default: [0.5, 0.5] */
+				'data-focus'?: number[];
+				/** Keep drawing frames, even if there is no movement. Default: false */
+				'data-keeprendering'?: boolean;
+				/** When turned off, high DPI screens will have its zoom limited to visually 100% of pixel size. Default: true */
+				'data-normalize-dpr'?: boolean;
+				/** No event handlers will be set up, and the image will be non-interactive. Default: true */
+				'data-events'?: boolean;
+				/** Use your keyboard to navigate through the image. Default: false */
+				'data-keys'?: boolean;
+				/** Use trackpad/touchscreen pinching for zooming. Default: true */
+				'data-pinch-zoom'?: boolean;
+				/** Use mousewheel/trackpad scrolling for zooming. Default: true */
+				'data-scroll-zoom'?: boolean;
+				/** The user must press CTRL/CMD when zooming with the mousewheel. Default: false */
+				'data-control-zoom'?: boolean;
+				/** Requires the user to use two fingers to pan the image on touch devices. Default: false */
+				'data-two-finger-pan'?: boolean;
+				/** The user cannot zoom at all. Default: true */
+				'data-zooming'?: boolean;
+				/** Use dragging and touch events for panning. Default: true */
+				'data-dragging'?: boolean;
+				/** No HTML UI elements will be printed. Default: true */
+				'data-ui'?: boolean;
+				/** No control buttons will be printed. Default: true */
+				'data-controls'?: boolean;
+				/** Show a fullscreen switching button on supported platforms. Default: true */
+				'data-fullscreen'?: boolean;
+				/** Show a social sharing link menu. Default: false */
+				'data-social'?: boolean;
+				/** The Micrio logo is displayed. Default: true */
+				'data-logo'?: boolean;
+				/** The optional Organisation logo (top right) will be hidden. Default: true */
+				'data-logo-org'?: boolean;
+				/** No top menu bar will be printed. Default: true */
+				'data-toolbar'?: boolean;
+				/** Show an image info panel with the title and description. Default: false */
+				'data-show-info'?: boolean;
+				/** An interactive minimap will be shown. Default: false */
+				'data-minimap'?: boolean;
+				/** The minimap will always be visible. Default: true */
+				'data-minimap-hide'?: boolean;
+				/** The minimap height in pixels. Default: 160 */
+				'data-minimap-height'?: number;
+				/** The minimap width in pixels. Default: 200 */
+				'data-minimap-width'?: number;
+				/** All audio will be disabled if this attribute is present. */
+				'muted'?: boolean;
+				/** The general sound volume for music/sfx (between 0 and 1). Default: 1 */
+				'volume'?: number;
+				/** Fade music to this volume while other audio plays (between 0 and 1). Default: 0 */
+				'data-mutedvolume'?: number;
+				/** Configuration for the grid which the viewer will use. */
+				'data-grid'?: string;
+				/** Toggle limited rendering mode in WebAssembly. */
+				'data-limited'?: boolean;
+			}
+		}
 	}
 	/**
 	 * Handles WebGL postprocessing effects.
@@ -2297,6 +2505,12 @@ declare module '@micrio/client' {
 		defaultSettings?: Partial<Models.ImageInfo.Settings>;
 		/** Holds data for the current 360 space, if applicable (loaded via `data-space` attribute or API). */
 		spaceData: Models.Spaces.Space | undefined;
+		addEventListener<K extends keyof Models.MicrioEventMap>(type: K, listener: (this: HTMLMicrioElement, ev: Models.MicrioEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLMicrioElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener(type: string, listener: (this: HTMLMicrioElement, ev: Event) => any, options?: boolean | AddEventListenerOptions): void;
+		removeEventListener<K extends keyof Models.MicrioEventMap>(type: K, listener: (this: HTMLMicrioElement, ev: Models.MicrioEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLMicrioElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener(type: string, listener: (this: HTMLMicrioElement, ev: Event) => any, options?: boolean | EventListenerOptions): void;
 		/** Destroys the Micrio instance, cleans up resources, and removes event listeners. */
 		destroy(): void;
 		/**
@@ -2386,102 +2600,102 @@ declare module '@micrio/client' {
 		/** Cleans up resources when the parent Embed component is unmounted. */
 		unmount(): void;
 	}
-}declare module "svelte/store" {
-	/** Callback to inform of a value updates.
-	*/
-	export type Subscriber<T> = (value: T) => void;
-	/** Unsubscribes from value updates.
-	*/
-	export type Unsubscriber = () => void;
-	/** Callback to update a value.
-	*/
-	export type Updater<T> = (value: T) => T;
-	/** Cleanup logic callback. */
-	type Invalidator<T> = (value?: T) => void;
-	/** Start and stop notification callbacks.
-	 * @internal
-	*/
-	export type StartStopNotifier<T> = (set: Subscriber<T>) => Unsubscriber | void;
-	/** Readable interface for subscribing. See the main SvelteStore article on how to use it in Micrio. */
-	export interface Readable<T> {
-		/**
-		 * Subscribe on value changes.
-		 * @param run subscription callback
-		 * @param invalidate cleanup callback
-		 */
-		subscribe(this: void, run: Subscriber<T>, invalidate?: Invalidator<T>): Unsubscriber;
-	}
-	/** Writable interface for both updating and subscribing. See the main SvelteStore article on how to use it in Micrio. */
-	export interface Writable<T> extends Readable<T> {
-		/**
-		 * Set value and inform subscribers.
-		 * @param value to set
-		 */
-		set(this: void, value: T): void;
-		/**
-		 * Update value using callback and inform subscribers.
-		 * @param updater callback
-		 */
-		update(this: void, updater: Updater<T>): void;
-	}
-	/**
-	 * Creates a `Readable` store that allows reading by subscription.
-	 * @internal
-	 * @param value initial value
-	 * @param {StartStopNotifier}start start and stop notifications for subscriptions
-	 */
-	export function readable<T>(value?: T, start?: StartStopNotifier<T>): Readable<T>;
-	/**
-	 * Create a `Writable` store that allows both updating and reading by subscription.
-	 * @internal
-	 * @param {*=}value initial value
-	 * @param {StartStopNotifier=}start start and stop notifications for subscriptions
-	 */
-	export function writable<T>(value?: T, start?: StartStopNotifier<T>): Writable<T>;
-	/** One or more `Readable`s.
-	 * @internal
-	*/
-	type Stores = Readable<any> | [Readable<any>, ...Array<Readable<any>>] | Array<Readable<any>>;
-	/** One or more values from `Readable` stores.
-	 * @internal
-	*/
-	type StoresValues<T> = T extends Readable<infer U> ? U : {
-		[K in keyof T]: T[K] extends Readable<infer U> ? U : never;
-	};
-	/**
-	 * Derived value store by synchronizing one or more readable stores and
-	 * applying an aggregation function over its input values.
-	 *
-	 * @internal
-	 * @param stores - input stores
-	 * @param fn - function callback that aggregates the values
-	 * @param initial_value - when used asynchronously
-	 */
-	export function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, set: (value: T) => void) => Unsubscriber | void, initial_value?: T): Readable<T>;
-	/**
-	 * Derived value store by synchronizing one or more readable stores and
-	 * applying an aggregation function over its input values.
-	 *
-	 * @internal
-	 * @param stores - input stores
-	 * @param fn - function callback that aggregates the values
-	 * @param initial_value - initial value
-	 */
-	export function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>) => T, initial_value?: T): Readable<T>;
-	/**
-	 * Derived value store by synchronizing one or more readable stores and
-	 * applying an aggregation function over its input values.
-	 *
-	 * @internal
-	 * @param stores - input stores
-	 * @param fn - function callback that aggregates the values
-	 */
-	export function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>) => T): Readable<T>;
-	/**
-	 * Get the current value from a store by subscribing and immediately unsubscribing.
-	 * @internal
-	 * @param store readable
-	 */
-	 export function get<T>(store: Readable<T>): T;
-
-}
+}declare module "svelte/store" {
+	/** Callback to inform of a value updates.
+	*/
+	export type Subscriber<T> = (value: T) => void;
+	/** Unsubscribes from value updates.
+	*/
+	export type Unsubscriber = () => void;
+	/** Callback to update a value.
+	*/
+	export type Updater<T> = (value: T) => T;
+	/** Cleanup logic callback. */
+	type Invalidator<T> = (value?: T) => void;
+	/** Start and stop notification callbacks.
+	 * @internal
+	*/
+	export type StartStopNotifier<T> = (set: Subscriber<T>) => Unsubscriber | void;
+	/** Readable interface for subscribing. See the main SvelteStore article on how to use it in Micrio. */
+	export interface Readable<T> {
+		/**
+		 * Subscribe on value changes.
+		 * @param run subscription callback
+		 * @param invalidate cleanup callback
+		 */
+		subscribe(this: void, run: Subscriber<T>, invalidate?: Invalidator<T>): Unsubscriber;
+	}
+	/** Writable interface for both updating and subscribing. See the main SvelteStore article on how to use it in Micrio. */
+	export interface Writable<T> extends Readable<T> {
+		/**
+		 * Set value and inform subscribers.
+		 * @param value to set
+		 */
+		set(this: void, value: T): void;
+		/**
+		 * Update value using callback and inform subscribers.
+		 * @param updater callback
+		 */
+		update(this: void, updater: Updater<T>): void;
+	}
+	/**
+	 * Creates a `Readable` store that allows reading by subscription.
+	 * @internal
+	 * @param value initial value
+	 * @param {StartStopNotifier}start start and stop notifications for subscriptions
+	 */
+	export function readable<T>(value?: T, start?: StartStopNotifier<T>): Readable<T>;
+	/**
+	 * Create a `Writable` store that allows both updating and reading by subscription.
+	 * @internal
+	 * @param {*=}value initial value
+	 * @param {StartStopNotifier=}start start and stop notifications for subscriptions
+	 */
+	export function writable<T>(value?: T, start?: StartStopNotifier<T>): Writable<T>;
+	/** One or more `Readable`s.
+	 * @internal
+	*/
+	type Stores = Readable<any> | [Readable<any>, ...Array<Readable<any>>] | Array<Readable<any>>;
+	/** One or more values from `Readable` stores.
+	 * @internal
+	*/
+	type StoresValues<T> = T extends Readable<infer U> ? U : {
+		[K in keyof T]: T[K] extends Readable<infer U> ? U : never;
+	};
+	/**
+	 * Derived value store by synchronizing one or more readable stores and
+	 * applying an aggregation function over its input values.
+	 *
+	 * @internal
+	 * @param stores - input stores
+	 * @param fn - function callback that aggregates the values
+	 * @param initial_value - when used asynchronously
+	 */
+	export function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, set: (value: T) => void) => Unsubscriber | void, initial_value?: T): Readable<T>;
+	/**
+	 * Derived value store by synchronizing one or more readable stores and
+	 * applying an aggregation function over its input values.
+	 *
+	 * @internal
+	 * @param stores - input stores
+	 * @param fn - function callback that aggregates the values
+	 * @param initial_value - initial value
+	 */
+	export function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>) => T, initial_value?: T): Readable<T>;
+	/**
+	 * Derived value store by synchronizing one or more readable stores and
+	 * applying an aggregation function over its input values.
+	 *
+	 * @internal
+	 * @param stores - input stores
+	 * @param fn - function callback that aggregates the values
+	 */
+	export function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>) => T): Readable<T>;
+	/**
+	 * Get the current value from a store by subscribing and immediately unsubscribing.
+	 * @internal
+	 * @param store readable
+	 */
+	 export function get<T>(store: Readable<T>): T;
+
+}