@micrio/client 5.5.6 → 6.0.0

package/micrio.min.d.ts

@@ -12,8 +12,948 @@ declare module '@micrio/client' {
 	 * @returns A Promise resolving to the loaded TextureBitmap.
 	 */
 	export const loadTexture: (src: string) => Promise<TextureBitmap>;
+	/**
+	 * Engine-wide constants and math values.
+	 * @author Marcel Duin <marcel@micr.io>
+	 */
+	export const PI: number;
+	export const PIh: number;
+	export const PI2: number;
+	/** Number of horizontal segments for 360 sphere geometry. */
+	export const segsX = 16;
+	/** Number of vertical segments for 360 sphere geometry. */
+	export const segsY = 16;
+	/** Base distance for 360 space transitions. */
+	export const base360Distance = 8;
+	/** Calculates 2 to the power of num (2^num). */
+	export function twoNth(num: number): number;
+	/** Calculates the positive modulo (floored division remainder). */
+	export function mod(n: number, m?: number): number;
+	/** Calculates the modulo 1 of a number (keeps the fractional part, positive). @deprecated Use mod(n, 1) */
+	export const mod1: (n: number) => number;
+	/** Calculates the modulo 2*PI of a number (wraps angles to the range [0, 2*PI)). */
+	export function modPI(n: number): number;
+	/**
+	 * Calculates the shortest angular distance between two longitude coordinates.
+	 * Handles wrapping around the 360-degree sphere.
+	 * @param from Starting longitude coordinate (0-1).
+	 * @param to Target longitude coordinate (0-1).
+	 * @returns The shortest signed distance (-0.5 to 0.5).
+	 */
+	export function longitudeDistance(from: number, to: number): number;
+	/**
+	 * Implements a cubic bezier curve calculation.
+	 * Used for animation easing functions.
+	 */
+	export class Bicubic {
+		private readonly Cx;
+		private readonly Bx;
+		private readonly Ax;
+		private readonly Cy;
+		private readonly By;
+		private readonly Ay;
+		private readonly isLinear;
+		constructor(p1: number, p2: number, p3: number, p4: number);
+		/** Calculates the X coordinate on the bezier curve for a given parameter t. */
+		private bezier_x;
+		/** Calculates the Y coordinate on the bezier curve for a given parameter t. */
+		private bezier_y;
+		/** Calculates the derivative of the bezier curve's X component with respect to t. */
+		private bezier_x_der;
+		/**
+		 * Approximates the parameter t that corresponds to a given X coordinate on the curve,
+		 * using Newton's method.
+		 * @param x The target X coordinate.
+		 * @returns The approximated parameter t for the given x.
+		 */
+		private find_x_for;
+		/**
+		 * Gets the eased Y value for a given progress value t (0-1).
+		 * @param t The progress value (time).
+		 * @returns The eased Y value.
+		 */
+		get(t: number): number;
+	}
+	/** Predefined cubic bezier easing: ease-in-out (standard). */
+	export const easeInOut: Bicubic;
+	/** Predefined cubic bezier easing: ease-in. */
+	export const easeIn: Bicubic;
+	/** Predefined cubic bezier easing: ease-out. */
+	export const easeOut: Bicubic;
+	/** Predefined cubic bezier easing: linear. */
+	export const linear: Bicubic;
+	/**
+	 * High-performance matrix and vector operations for WebGL.
+	 * Ported from gl-matrix 3.2.1 (Copyright (c) 2015-2020, Brandon Jones, Colin MacKenzie IV).
+	 * Originally ported to AssemblyScript/WASM by marcel@micr.io, 2020.
+	 * Re-ported to TypeScript for the Micrio engine.
+	 *
+	 * @license MIT
+	 */
+	/** Represents a 4x4 matrix, tailored for WebGL operations. */
+	export class Mat4 {
+		a0: number;
+		a1: number;
+		a2: number;
+		a3: number;
+		a4: number;
+		a5: number;
+		a6: number;
+		a7: number;
+		a8: number;
+		a9: number;
+		a10: number;
+		a11: number;
+		a12: number;
+		a13: number;
+		a14: number;
+		a15: number;
+		/** Float32Array view for direct use with WebGL uniformMatrix4fv. */
+		readonly arr: Float32Array;
+		/**
+		 * Creates a new identity Mat4.
+		 * Matrix layout (column-major):
+		 * a0 a4 a8 a12
+		 * a1 a5 a9 a13
+		 * a2 a6 a10 a14
+		 * a3 a7 a11 a15
+		 */
+		constructor(a0?: number, a1?: number, a2?: number, a3?: number, a4?: number, a5?: number, a6?: number, a7?: number, a8?: number, a9?: number, a10?: number, a11?: number, a12?: number, a13?: number, a14?: number, a15?: number);
+		/** Updates the internal Float32Array with the current matrix values. */
+		toArray(): Float32Array;
+		/** Resets the matrix to the identity matrix. */
+		identity(): void;
+		/** Copies the values from another Mat4 into this one. */
+		copy(s: Mat4): void;
+		/** Multiplies this matrix by a rotation matrix created from the given angle around the X axis. */
+		rotateX(rad: number): void;
+		/** Multiplies this matrix by a rotation matrix created from the given angle around the Y axis. */
+		rotateY(rad: number): void;
+		/** Multiplies this matrix by a rotation matrix created from the given angle around the Z axis. */
+		rotateZ(rad: number): void;
+		/** Uniform scale applied only to X and Y columns (Z unchanged). */
+		scaleFlat(scale: number): void;
+		/** Translates the matrix by the given vector [x, y, z]. */
+		translate(x: number, y: number, z: number): void;
+		/** Generates a perspective projection matrix with the given bounds. */
+		perspective(fovy: number, aspect: number, near: number, far: number): void;
+		/** Generates a simplified perspective matrix suitable for CSS 3D transforms (no near/far clipping). */
+		perspectiveCss(fovy: number): void;
+		/** Inverts the matrix. */
+		invert(): void;
+		/** Multiplies this matrix by another matrix `a` (this = this * a). */
+		multiply(a: Mat4): void;
+		/** Scales the matrix by the given vector [x, y, z]. */
+		scaleXY(x: number, y: number, z?: number): void;
+	}
+	/** Represents a 4D vector (x, y, z, w). */
+	export class Vec4 {
+		x: number;
+		y: number;
+		z: number;
+		w: number;
+		constructor(x?: number, y?: number, z?: number, w?: number);
+		/** Copies the values from another Vec4 into this one. */
+		copy(v: Vec4): void;
+		/** Transforms the vector by the given Mat4. */
+		transformMat4(m: Mat4): void;
+		/** Normalizes the vector (scales it to have a length of 1). */
+		normalize(): void;
+	}
+	/**
+	 * Represents a single image source (tiled or single) within a TileCanvas.
+	 * Handles tile pyramid, layer management, and tile culling.
+	 * @author Marcel Duin <marcel@micr.io>
+	 */
+	/** Represents a single resolution layer within an Image. */
+	class Layer {
+		readonly image: Image;
+		readonly index: number;
+		readonly start: number;
+		readonly end: number;
+		readonly tileSize: number;
+		readonly cols: number;
+		readonly rows: number;
+		readonly tileWidth: number;
+		readonly tileHeight: number;
+		constructor(image: Image, index: number, start: number, end: number, tileSize: number, cols: number, rows: number);
+		getTileRect(idx: number, r: DrawRect): DrawRect;
+	}
+	/** Represents a single image source (tiled or single) within a TileCanvas. */
+	export default class Image {
+		private readonly canvas;
+		readonly index: number;
+		readonly localIdx: number;
+		readonly width: number;
+		readonly height: number;
+		readonly tileSize: number;
+		readonly isSingle: boolean;
+		readonly isVideo: boolean;
+		readonly startOffset: number;
+		opacity: number;
+		tOpacity: number;
+		rotX: number;
+		rotY: number;
+		rotZ: number;
+		readonly scale: number;
+		readonly fromScale: number;
+		private static readonly toDraw;
+		private static toDrawSeen;
+		private static toDrawSeenBase;
+		readonly vec: Vec4;
+		readonly mat: Mat4;
+		rScale: number;
+		readonly layers: Layer[];
+		numLayers: number;
+		targetLayer: number;
+		x0: number;
+		y0: number;
+		x1: number;
+		y1: number;
+		rWidth: number;
+		rHeight: number;
+		areaCenterX: number;
+		areaCenterY: number;
+		areaWidth: number;
+		areaHeight: number;
+		sphere3DX: number;
+		sphere3DY: number;
+		sphere3DZ: number;
+		angularWidth: number;
+		angularHeight: number;
+		gotBase: number;
+		readonly endOffset: number;
+		aspect: number;
+		doneTotal: number;
+		doRender: boolean;
+		private is360Embed;
+		isVideoPlaying: boolean;
+		private static sampledXs;
+		private static sampledYs;
+		private static uniqueXs;
+		private static sampledLength;
+		private static uniqueLength;
+		constructor(canvas: TileCanvas, index: number, localIdx: number, width: number, height: number, tileSize: number, isSingle: boolean, isVideo: boolean, startOffset: number, opacity: number, tOpacity: number, rotX: number, rotY: number, rotZ: number, scale: number, fromScale: number);
+		/** Sets the relative area this image occupies within its parent canvas. */
+		setArea(x0: number, y0: number, x1: number, y1: number): void;
+		/** Converts 2D sphere coordinates to 3D unit sphere position */
+		private calculate3DSpherePosition;
+		/**
+		 * Checks if embed's 3D sphere position is within camera's viewing frustum
+		 */
+		private sphere3DOverlap;
+		/** Checks if the image's bounding box is completely outside the current view. */
+		private outsideView;
+		/** Determines if this image should be rendered in the current frame. */
+		shouldRender(): boolean;
+		/**
+		 * Steps the opacity animation for this image.
+		 * @returns True if the opacity changed (animation is active or snapped).
+		 */
+		opacityTick(direct: boolean): boolean;
+		/**
+		 * Calculates the set of tiles needed to render the current view for this image.
+		 * @returns The number of tiles from this image that are already loaded/drawn.
+		 */
+		getTiles(scale: number): number;
+		/** Calculates the target layer index based on the current scale. */
+		private getTargetLayer;
+		/** Calculates and adds tiles within a given rectangular area for a specific layer. */
+		private getTilesRect;
+		/**
+		 * Calculates tiles for 360 embeds using viewport-based coordinates.
+		 */
+		private getTilesViewport;
+		private setToDraw;
+		/** Calculates the vertex positions for an embedded image within a 360 canvas. */
+		setDrawRect(r: DrawRect): void;
+		/** Calculates the effective scale of an embedded image based on its projection. */
+		private getEmbeddedScale;
+		private get360Tiles;
+	}
+	/**
+	 * Shared data structures for the Micrio engine: View, Coordinates, Viewport, DrawRect.
+	 * @author Marcel Duin <marcel@micr.io>
+	 */
+	/** Structure to hold information about a specific tile to be drawn. */
+	export class DrawRect {
+		/** Left edge of the tile in relative image coordinates (0-1). */
+		x0: number;
+		/** Top edge of the tile in relative image coordinates (0-1). */
+		y0: number;
+		/** Right edge of the tile in relative image coordinates (0-1). */
+		x1: number;
+		/** Bottom edge of the tile in relative image coordinates (0-1). */
+		y1: number;
+		/** Index of the resolution layer this tile belongs to. */
+		layer: number;
+		/** Column index of the tile within its layer. */
+		x: number;
+		/** Row index of the tile within its layer. */
+		y: number;
+		/** Reference to the Image instance this tile belongs to. */
+		image: Image;
+		constructor(
+		/** Left edge of the tile in relative image coordinates (0-1). */
+		x0?: number, 
+		/** Top edge of the tile in relative image coordinates (0-1). */
+		y0?: number, 
+		/** Right edge of the tile in relative image coordinates (0-1). */
+		x1?: number, 
+		/** Bottom edge of the tile in relative image coordinates (0-1). */
+		y1?: number, 
+		/** Index of the resolution layer this tile belongs to. */
+		layer?: number, 
+		/** Column index of the tile within its layer. */
+		x?: number, 
+		/** Row index of the tile within its layer. */
+		y?: number);
+	}
+	/** Represents the logical view rectangle within an image. */
+	export class View {
+		private readonly canvas;
+		centerX: number;
+		centerY: number;
+		width: number;
+		height: number;
+		lCenterX: number;
+		lCenterY: number;
+		lWidth: number;
+		lHeight: number;
+		/** Float64Array view of [centerX, centerY, width, height] — for efficient JS access. */
+		readonly arr: Float64Array;
+		/** Flag indicating if the view coordinates have changed since the last frame. */
+		changed: boolean;
+		/** Flag indicating if the view limits have changed. */
+		limitChanged: boolean;
+		constructor(canvas: TileCanvas, centerX?: number, centerY?: number, width?: number, height?: number, lCenterX?: number, lCenterY?: number, lWidth?: number, lHeight?: number);
+		get x0(): number;
+		get y0(): number;
+		get x1(): number;
+		get y1(): number;
+		get lX0(): number;
+		get lY0(): number;
+		get lX1(): number;
+		get lY1(): number;
+		get yaw(): number;
+		get pitch(): number;
+		get aspect(): number;
+		get size(): number;
+		set(centerX: number, centerY: number, width: number, height: number, preserveAspect?: boolean): void;
+		/** Sets the relative View area of a MicrioImage to render to, animates by default. Used in grids. */
+		setArea(x0: number, y0: number, x1: number, y1: number): void;
+		setLimit(lCenterX: number, lCenterY: number, lWidth: number, lHeight: number): void;
+		copy(v: View, excludeLimit?: boolean): void;
+		/** Calculates the perspective value needed to achieve this view height in 360 mode. */
+		getPerspective(): number;
+		/** Calculates the effective scale factor represented by this view. */
+		getScale(): number;
+		/** Calculates a distance metric between this view and another view, used for animation duration. */
+		getDistance(v: View, correctAspect: boolean): number;
+		limit(correctZoom: boolean, noLimit?: boolean, freeMove?: boolean): void;
+		correctAspectRatio(): void;
+		/** Updates the shared Float64Array with the current view coordinates. */
+		toArray(): Float64Array;
+		/** Checks if this view is equal to another view. */
+		equals(centerX: number, centerY: number, width: number, height: number): boolean;
+		/** Checks if this view represents the full image [0,0,1,1]. */
+		isFull(): boolean;
+	}
+	/** Represents coordinates: relative image coordinates or screen pixel coordinates. */
+	export class Coordinates {
+		x: number;
+		y: number;
+		scale: number;
+		w: number;
+		direction: number;
+		/** Float64Array view for efficient JS access [x, y, scale, w/depth, direction]. */
+		readonly arr: Float64Array;
+		constructor(x?: number, y?: number, scale?: number, w?: number, direction?: number);
+		/** Checks if the screen coordinate is potentially within the viewport bounds. */
+		inView(v: Viewport): boolean;
+		/** Updates the shared Float64Array with the current coordinate values. */
+		toArray(): Float64Array;
+	}
+	/** Represents the screen viewport of a TileCanvas element. */
+	export class Viewport {
+		width: number;
+		height: number;
+		left: number;
+		top: number;
+		areaWidth: number;
+		areaHeight: number;
+		ratio: number;
+		scale: number;
+		isPortrait: boolean;
+		/** Int32Array view for efficient JS access [width, height, left, top]. */
+		readonly arr: Int32Array;
+		constructor(width?: number, height?: number, left?: number, top?: number, areaWidth?: number, areaHeight?: number, ratio?: number, scale?: number, isPortrait?: boolean);
+		get centerX(): number;
+		get centerY(): number;
+		get aspect(): number;
+		/** Updates the shared Int32Array with the current viewport dimensions (integer pixels). */
+		toArray(): Int32Array;
+		/**
+		 * Sets the viewport properties, scaling by device pixel ratio.
+		 * @returns True if any property changed, false otherwise.
+		 */
+		set(w: number, h: number, l: number, t: number, r: number, s: number, p: boolean): boolean;
+		/** Copies properties from another Viewport object. */
+		copy(v: Viewport): void;
+	}
+	/**
+	 * Main controller class for the Micrio engine.
+	 * Manages all canvases, global settings, and host callbacks.
+	 * @author Marcel Duin <marcel@micr.io>
+	 */
+	/** Host interface for callbacks from the engine to the JS host. */
+	export interface MainHost {
+		drawTile: (imgIdx: number, idx: number, layer: number, x: number, y: number, opacity: number, animating: boolean, isTargetLayer: boolean) => boolean;
+		drawQuad: (opacity: number) => void;
+		getTileOpacity: (idx: number) => number;
+		setTileOpacity: (idx: number, direct: boolean, imageOpacity: number) => number;
+		setMatrix: (arr: Float32Array) => void;
+		setViewport: (x: number, y: number, width: number, height: number) => void;
+		aniDone: (c: TileCanvas) => void;
+		aniAbort: (c: TileCanvas) => void;
+		viewSet: (c: TileCanvas) => void;
+		viewportSet: (c: TileCanvas, x: number, y: number, w: number, h: number) => void;
+		setCanvasVisible: (c: TileCanvas, visible: boolean) => void;
+		setImageVisible: (c: Image, visible: boolean) => void;
+	}
+	/**
+	 * Main controller class for the Micrio engine.
+	 * Manages all canvases, global settings, and the render loop.
+	 * Host callbacks are provided at construction via {@link MainHost}.
+	 */
+	export class Main {
+		/** Viewport representing the main HTML element (<micr-io>). */
+		readonly el: Viewport;
+		/** Vertex buffer for rendering 2D image tiles (quads). */
+		readonly vertexBuffer: Float32Array;
+		/** Vertex buffer for rendering 360 sphere geometry. */
+		readonly vertexBuffer360: Float32Array;
+		/** Array holding all active TileCanvas instances managed by this engine. */
+		readonly canvases: TileCanvas[];
+		/** Total number of tiles across all images in all canvases. */
+		numTiles: number;
+		/** Total number of Image instances across all canvases. */
+		numImages: number;
+		/** Timestamp of the current frame (performance.now()). */
+		now: number;
+		/** Flag indicating if any animation is active in any canvas this frame. */
+		animating: boolean;
+		/** Overall loading progress (0-1) based on tiles drawn vs tiles needed. */
+		progress: number;
+		/** Total number of tiles needed across all canvases this frame. */
+		toDrawTotal: number;
+		/** Total number of tiles successfully drawn (or already loaded) across all canvases this frame. */
+		doneTotal: number;
+		/** Default duration (seconds) for crossfade between canvases. */
+		crossfadeDuration: number;
+		/** Default duration (seconds) for grid item transitions. */
+		gridTransitionDuration: number;
+		/** Default easing function for grid transitions. */
+		gridTransitionTimingFunction: Bicubic;
+		/** Default duration (seconds) for transitions between 360 spaces. */
+		spacesTransitionDuration: number;
+		/** Default duration (seconds) for fading embedded images/videos. */
+		embedFadeDuration: number;
+		/** Elasticity factor for kinetic dragging (higher = more movement). */
+		dragElasticity: number;
+		/** Flag indicating if a binary archive is being used. */
+		hasArchive: boolean;
+		/** Layer offset when using an archive. */
+		archiveLayerOffset: number;
+		/** Number of "underzoom" levels. */
+		underzoomLevels: number;
+		/** Number of lowest resolution layers to skip loading initially. */
+		skipBaseLevels: number;
+		/** Flag for barebone mode (minimal texture loading). */
+		bareBone: boolean;
+		/** Flag indicating if the current context is a swipe gallery. */
+		isSwipe: boolean;
+		/** Flag to disable panning during pinch gestures. */
+		noPinchPan: boolean;
+		/** Target direction for 360 transition. */
+		direction: number;
+		/** Horizontal distance for 360 transition. */
+		distanceX: number;
+		/** Vertical distance for 360 transition. */
+		distanceY: number;
+		/** Estimated time per frame in seconds (used for animation speed normalization). */
+		frameTime: number;
+		private readonly _host;
+		constructor(host: MainHost);
+		get drawTile(): (imgIdx: number, idx: number, layer: number, x: number, y: number, opacity: number, animating: boolean, isTargetLayer: boolean) => boolean;
+		get drawQuad(): (opacity: number) => void;
+		get getTileOpacity(): (idx: number) => number;
+		get setTileOpacity(): (idx: number, direct: boolean, imageOpacity: number) => number;
+		get setMatrix(): (arr: Float32Array) => void;
+		get setViewport(): (x: number, y: number, width: number, height: number) => void;
+		get aniDone(): (c: TileCanvas) => void;
+		get aniAbort(): (c: TileCanvas) => void;
+		get viewSet(): (c: TileCanvas) => void;
+		get viewportSet(): (c: TileCanvas, x: number, y: number, w: number, h: number) => void;
+		get setCanvasVisible(): (c: TileCanvas, visible: boolean) => void;
+		get setImageVisible(): (c: Image, visible: boolean) => void;
+		shouldDraw(now: number): boolean;
+		draw(): void;
+		reset(): void;
+		aniStop(): void;
+		/**
+		 * Updates the main element's viewport dimensions and triggers resize on all canvases.
+		 */
+		resize(w: number, h: number, l: number, t: number, r: number, s: number, p: boolean): void;
+		/** Removes a specific TileCanvas instance from the managed list. */
+		remove(c: TileCanvas): void;
+	}
+	/**
+	 * Handles kinetic scrolling/dragging behavior after user interaction stops.
+	 * @author Marcel Duin <marcel@micr.io>
+	 */
+	/** Handles kinetic scrolling/dragging behavior after user interaction stops. */
+	export default class Kinetic {
+		private canvas;
+		/** Accumulated horizontal delta during drag. */
+		private dX;
+		/** Accumulated vertical delta during drag. */
+		private dY;
+		/** Timestamp when the drag interaction started. */
+		private startTime;
+		/** Timestamp of the previous step added. */
+		private prevTime;
+		/** Timestamp when the drag interaction ended (kinetic phase started). */
+		private endTime;
+		/** Timestamp of the last significant interaction step. */
+		private lastInteraction;
+		/** Current horizontal velocity for kinetic movement. */
+		private velocityX;
+		/** Current vertical velocity for kinetic movement. */
+		private velocityY;
+		/** Flag indicating if kinetic movement is currently active. */
+		started: boolean;
+		constructor(canvas: TileCanvas);
+		/**
+		 * Adds a step (delta) from the user's drag interaction.
+		 * @param pX Horizontal pixel delta since last step.
+		 * @param pY Vertical pixel delta since last step.
+		 * @param time Current timestamp (performance.now()).
+		 */
+		addStep(pX: number, pY: number, time: number): void;
+		/** Starts the kinetic movement phase (called when user stops dragging). */
+		start(): void;
+		/** Stops the kinetic movement and resets state. */
+		stop(): void;
+		/**
+		 * Calculates and applies the kinetic movement step for the current frame.
+		 * @returns Progress towards stopping (0 = max velocity, 1 = stopped).
+		 */
+		step(time: number): number;
+	}
+	/** Manages camera and view animations (fly-to, zoom). */
+	export default class Ani {
+		private canvas;
+		/** Flag indicating if a view animation (fly-to) is active. */
+		private isView;
+		/** Starting view state for the animation. */
+		private readonly vFrom;
+		/** Target view state for the animation. */
+		private readonly vTo;
+		/** Stores the final target view requested (might differ from vTo during corrections). */
+		readonly lastView: View;
+		/** Flag indicating if a zoom animation (perspective change in 360) is active. */
+		private isZoom;
+		/** Flag indicating if the animation is a "jump" (zooms out then in). */
+		private isJump;
+		/** Starting perspective value for zoom animation. */
+		private zFrom;
+		/** Target perspective value for zoom animation. */
+		private zTo;
+		/** Flag to disable perspective limits during zoom animation. */
+		private zNoLimit;
+		/** Easing function used for the current animation. */
+		private fn;
+		/** Timestamp when the animation started. */
+		private started;
+		/** Total duration of the animation in milliseconds. */
+		private duration;
+		/** Flag indicating if the animation is currently running (not paused). */
+		private isRunning;
+		/** Flag indicating if the view should be limited during animation (usually false during animation). */
+		limit: boolean;
+		/** Flag indicating if the current animation step resulted in zooming out. */
+		zoomingOut: boolean;
+		/** Flag indicating if the animation is a fly-to type. */
+		flying: boolean;
+		/** Flag indicating if the animation is correcting the view to stay within limits. */
+		correcting: boolean;
+		/** Timestamp when the animation was paused. 0 if not paused. */
+		private pausedAt;
+		private fL;
+		private fT;
+		private fR;
+		private fB;
+		/** Start point for the ease-in part of the jump animation curve. */
+		private mI;
+		/** Start point for the ease-out part of the jump animation curve. */
+		private mO;
+		/** Starting frame index for omni object rotation animation. */
+		private omniStartIdx;
+		/** Delta (number of frames) to rotate during omni animation. */
+		private omniDelta;
+		constructor(canvas: TileCanvas);
+		/** Pauses the current animation. */
+		pause(time: number): void;
+		/** Resumes a paused animation. */
+		resume(time: number): void;
+		/** Stops the current animation completely and resets state. */
+		stop(): void;
+		/** Checks if a view animation is currently running. */
+		isStarted(): boolean;
+		/**
+		 * Starts or updates a "fly-to" animation to a target view rectangle.
+		 * @returns Calculated or provided animation duration in ms.
+		 */
+		toView(toCenterX: number, toCenterY: number, toWidth: number, toHeight: number, dur: number, speed: number, perc: number, isJump: boolean, limitViewport: boolean, omniIdx: number, fn: number, time: number, correct?: boolean): number;
+		/** Updates the target view of a running animation. Used for corrections. */
+		updateTarget(toCenterX: number, toCenterY: number, toWidth: number, toHeight: number, limiting?: boolean): void;
+		/**
+		 * Starts a zoom animation (perspective change for 360).
+		 * @returns Calculated or provided animation duration in ms.
+		 */
+		zoom(to: number, dur: number, speed: number, noLimit: boolean, time: number): number;
+		/** Sets the starting view for progress calculation in flyTo animations. */
+		setStartView(centerX: number, centerY: number, width: number, height: number, correctRatio: boolean): void;
+		/**
+		 * Calculates and applies the animation step for the current frame.
+		 * @returns Current animation progress (0-1).
+		 */
+		step(time: number): number;
+	}
+	/**
+	 * Handles 2D camera logic, view calculations, and user interactions like pan, zoom, pinch.
+	 * @author Marcel Duin <marcel@micr.io>
+	 */
+	/** Handles 2D camera logic, view calculations, and user interactions like pan, zoom, pinch. */
+	export default class Camera {
+		private canvas;
+		scale: number;
+		minScale: number;
+		minSize: number;
+		maxScale: number;
+		fullScale: number;
+		coverScale: number;
+		readonly xy: Coordinates;
+		readonly coo: Coordinates;
+		private readonly startCoo;
+		private pinching;
+		private inited;
+		private hasStartCoo;
+		cpw: number;
+		cph: number;
+		private wasCoverLimit;
+		constructor(canvas: TileCanvas);
+		/**
+		 * Converts screen pixel coordinates to relative image coordinates [0-1].
+		 */
+		getCoo(x: number, y: number, abs: boolean, noLimit: boolean): Coordinates;
+		/**
+		 * Converts relative image coordinates [0-1] to screen pixel coordinates.
+		 */
+		getXY(x: number, y: number, abs: boolean): Coordinates;
+		getXYOmni(x: number, y: number, radius: number, rotation: number, abs: boolean): Coordinates;
+		/**
+		 * Converts 3D coordinates relative to an omni object's center to screen pixel coordinates.
+		 */
+		getXYOmniCoo(x: number, y: number, z: number, rotation: number, abs: boolean): Coordinates;
+		/** Recalculates scale limits (minScale, maxScale, coverScale, fullScale) based on current canvas and image dimensions. */
+		setCanvas(): void;
+		/** Corrects minScale and maxScale based on coverLimit and focus area. */
+		correctMinMax(noLimit?: boolean): void;
+		/** Checks if the current scale is below the minimum allowed scale (considering minSize margin). */
+		isUnderZoom(): boolean;
+		/** Checks if the camera is fully zoomed out (at or below minScale, considering minSize margin). */
+		isZoomedOut(b?: boolean): boolean;
+		/** Checks if the camera is fully zoomed in (at or above maxScale). */
+		isZoomedIn(): boolean;
+		/**
+		 * Calculates and sets the current camera scale and view offsets based on the logical view rectangle.
+		 * @returns True if the view was successfully set, false if initialization is pending.
+		 */
+		setView(): boolean;
+		/** Checks if the current view extends beyond the defined limits or max scale. */
+		isOutsideLimit(): boolean;
+		/**
+		 * Pans the view by a given pixel delta.
+		 */
+		pan(xPx: number, yPx: number, duration: number, noLimit: boolean, time: number, force?: boolean, isKinetic?: boolean): void;
+		/**
+		 * Zooms the view by a given delta, centered on screen coordinates.
+		 * @returns The calculated animation duration.
+		 */
+		zoom(delta: number, xPx: number, yPx: number, duration: number, noLimit: boolean, time: number): number;
+		prevSize: number;
+		prevCenterX: number;
+		prevCenterY: number;
+		/** Handles pinch gesture updates. */
+		pinch(xPx1: number, yPx1: number, xPx2: number, yPx2: number): void;
+		/** Signals the start of a pinch gesture. */
+		pinchStart(): void;
+		/** Signals the end of a pinch gesture. */
+		pinchStop(time: number): void;
+		private snapToBounds;
+		/**
+		 * Initiates a fly-to animation to a target view rectangle.
+		 * @returns The calculated animation duration.
+		 */
+		flyTo(centerX: number, centerY: number, width: number, height: number, dur: number, speed: number, perc: number, isJump: boolean, limit: boolean, limitZoom: boolean, toOmniIdx: number, fn: number, time: number): number;
+		/**
+		 * Sets the view center and scale, optionally animating.
+		 * @returns The calculated animation duration.
+		 */
+		setCoo(x: number, y: number, scale: number, dur: number, speed: number, limit: boolean, fn: number, time: number): number;
+	}
+	/** Handles 360 camera logic, perspective, and related SphericalView calculations. */
+	export default class SphericalView {
+		private canvas;
+		readonly pMatrix: Mat4;
+		readonly iMatrix: Mat4;
+		private readonly cachedInverse;
+		private inverseDirty;
+		private readonly rMatrix;
+		readonly position: Vec4;
+		radius: number;
+		scale: number;
+		scaleY: number;
+		offY: number;
+		dofY: number;
+		limitX: number;
+		limitY: number;
+		baseYaw: number;
+		yaw: number;
+		pitch: number;
+		defaultPerspective: number;
+		perspective: number;
+		maxPerspective: number;
+		minPerspective: number;
+		cameraForwardX: number;
+		cameraForwardY: number;
+		cameraForwardZ: number;
+		cameraUpX: number;
+		cameraUpY: number;
+		cameraUpZ: number;
+		cameraRightX: number;
+		cameraRightY: number;
+		cameraRightZ: number;
+		fieldOfView: number;
+		aspectRatio: number;
+		readonly vec4: Vec4;
+		readonly coo: Coordinates;
+		offX: number;
+		constructor(canvas: TileCanvas);
+		/** Sets the horizontal and vertical movement limits. */
+		setLimits(x: number, y: number): void;
+		/** Updates the projection and rotation matrices based on current state. */
+		update(noPersp?: boolean): void;
+		/**
+		 * Applies rotation based on pixel delta from mouse/touch drag.
+		 */
+		rotate(xPx: number, yPx: number, duration: number, time: number): void;
+		/** Clamps the pitch value based on perspective and vertical limits. */
+		private limitPitch;
+		/** Clamps the yaw value based on horizontal limits. */
+		private limitYaw;
+		/**
+		 * Applies zoom by adjusting the perspective.
+		 */
+		zoom(factor: number, dur: number, speed: number, noLimit: boolean, t: number, pxX?: number, pxY?: number): number;
+		/** Sets the perspective (FoV) and updates related state. */
+		setPerspective(perspective: number, noLimit: boolean): void;
+		/** Recalculates the effective scale based on coordinate conversion. */
+		readScale(): void;
+		/** Sets the camera orientation directly. */
+		setDirection(yaw: number, pitch: number, persp: number): void;
+		/** Sets the camera orientation using viewport format (center + dimensions). */
+		setView(centerX: number, centerY: number, _width: number, height: number, noLimit?: boolean, correctNorth?: boolean): void;
+		/** Synchronizes the logical view with the current camera state for 360 images. */
+		private syncLogicalView;
+		/** Calculates 3D camera frustum for accurate 360 embed visibility detection */
+		calculate3DFrustum(): void;
+		/** Applies translation offset for 360 space transitions. */
+		moveTo(distance: number, distanceY: number, direction: number, addYaw: number): void;
+		/** Handles canvas resize events for 360 mode. */
+		resize(): void;
+		/** Ensures the cached inverse projection matrix is up to date. */
+		private ensureInverse;
+		/** Converts screen pixel coordinates to 360 image coordinates [0-1]. */
+		getCoo(pxX: number, pxY: number): Coordinates;
+		/** Converts 360 image coordinates [0-1] to screen pixel coordinates. */
+		getXYZ(x: number, y: number): Coordinates;
+		/**
+		 * Calculates the 3D vector corresponding to a point on the 360 sphere.
+		 */
+		getVec3(x: number, y: number, abs?: boolean, rad?: number): Vec4;
+		/**
+		 * Calculates the combined transformation matrix for placing an element
+		 * at a specific point on the 360 sphere.
+		 */
+		getMatrix(x: number, y: number, scale: number, radius: number, rX: number, rY: number, rZ: number, transY: number, sX?: number, sY?: number, _noCorrectNorth?: boolean): Mat4;
+		/** Generates vertex data for a segment of the 360 sphere geometry. */
+		setTile360(x: number, y: number, w: number, h: number): void;
+	}
+	/**
+	 * Represents a single rendering canvas within the Micrio engine.
+	 * Orchestrates image loading, tile calculation, camera control, and drawing.
+	 * @author Marcel Duin <marcel@micr.io>
+	 */
+	export interface TileCanvasConfig {
+		tileSize: number;
+		is360: boolean;
+		noImage: boolean;
+		isSingle: boolean;
+		freeMove: boolean;
+		coverStart: boolean;
+		maxScale: number;
+		scaleMultiplier: number;
+		camSpeed: number;
+		rotationY: number;
+		isGallerySwitch: boolean;
+		pagesHaveBackground: boolean;
+		isOmni: boolean;
+		pinchZoomOutLimit: boolean;
+		omniNumLayers: number;
+		omniStartLayer: number;
+	}
+	export default class TileCanvas {
+		readonly main: Main;
+		width: number;
+		height: number;
+		targetOpacity: number;
+		coverLimit: boolean;
+		readonly hasParent: boolean;
+		readonly view: View;
+		readonly focus: View;
+		readonly ani: Ani;
+		readonly kinetic: Kinetic;
+		readonly camera: Camera;
+		readonly webgl: SphericalView;
+		readonly rect: DrawRect;
+		readonly el: Viewport;
+		readonly images: Image[];
+		private readonly children;
+		readonly area: View;
+		readonly currentArea: View;
+		readonly targetArea: View;
+		readonly visible: View;
+		readonly full: View;
+		private areaAniPerc;
+		private areaAniPaused;
+		private _zIndex;
+		private childrenDirty;
+		get zIndex(): number;
+		set zIndex(v: number);
+		readonly toDraw: number[];
+		readonly aspect: number;
+		private index;
+		private isVisible;
+		opacity: number;
+		bOpacity: number;
+		isReady: boolean;
+		activeImageIdx: number;
+		omniFieldOfView: number;
+		omniVerticalAngle: number;
+		omniDistance: number;
+		omniOffsetX: number;
+		limited: boolean;
+		layer: number;
+		readonly tileSize: number;
+		readonly is360: boolean;
+		readonly noImage: boolean;
+		readonly isSingle: boolean;
+		readonly freeMove: boolean;
+		readonly coverStart: boolean;
+		readonly maxScale: number;
+		readonly scaleMultiplier: number;
+		readonly camSpeed: number;
+		readonly rotationY: number;
+		readonly isGallerySwitch: boolean;
+		readonly pagesHaveBackground: boolean;
+		readonly isOmni: boolean;
+		readonly pinchZoomOutLimit: boolean;
+		readonly omniNumLayers: number;
+		readonly omniStartLayer: number;
+		constructor(main: Main, width: number, height: number, targetOpacity: number, coverLimit: boolean, cfg: TileCanvasConfig, hasParent?: boolean);
+		/** Reference to the parent canvas (if this is a child/grid item). */
+		parent: TileCanvas;
+		/** Sets the parent canvas for a child canvas. */
+		setParent(parent: TileCanvas): void;
+		/**
+		 * Adds an image source (usually tiled) to this canvas.
+		 */
+		addImage(x0: number, y0: number, x1: number, y1: number, w: number, h: number, tileSize: number, isSingle: boolean, isVideo: boolean, opa: number, rotX: number, rotY: number, rotZ: number, scale: number, fromScale: number): Image;
+		addChild(x0: number, y0: number, x1: number, y1: number, width: number, height: number): TileCanvas;
+		/** Steps the opacity fade animation and applies 360 transition movement. */
+		private stepOpacity;
+		/** Notifies the JS host about visibility changes. */
+		setCanvasVisible(b: boolean): void;
+		/** Initiates a fade-out animation. */
+		fadeOut(): void;
+		/** Initiates a fade-in animation. */
+		fadeIn(): void;
+		/** Checks if the canvas area is currently animating. */
+		areaAnimating(): boolean;
+		/** Checks if the canvas is effectively hidden. */
+		isHidden(): boolean;
+		/** Determines if the canvas needs to be drawn in the next frame and calculates tiles needed. */
+		shouldDraw(): void;
+		/** Executes the drawing commands for the current frame for this canvas. */
+		draw(): void;
+		private partialView;
+		/** Sets the target area for this canvas within its parent, optionally animating. */
+		setArea(x0: number, y0: number, x1: number, y1: number, direct: boolean, noDispatch: boolean): void;
+		/** Calculates the vertex positions for a given tile index and updates the vertex buffer. */
+		private setTile;
+		/** Notifies JS host about the current screen viewport details. */
+		sendViewport(): void;
+		/** Finds the Image, Layer, and calculates the DrawRect for a given global tile index. */
+		private findTileRect;
+		/** Handles resizing of the canvas element. */
+		resize(): void;
+		/** Resets the canvas state. */
+		reset(): void;
+		/** Removes this canvas instance from the main controller. */
+		remove(): void;
+		/** Re-adds this canvas instance to the main controller. */
+		replace(): void;
+		/** Sets the active layer for multi-layer omni objects. */
+		setActiveLayer(idx: number): void;
+		/** Sets the active image(s) for gallery/omni canvases. */
+		setActiveImage(idx: number, num: number): void;
+		/** Sets the focus area for gallery/grid canvases. */
+		setFocus(x0: number, y0: number, x1: number, y1: number, noLimit: boolean): void;
+		/** Gets image coordinates from screen coordinates. */
+		getCoo(x: number, y: number, abs: boolean, noLimit: boolean): Float64Array;
+		/** Gets screen coordinates from image coordinates. */
+		getXY(x: number, y: number, abs: boolean, radius: number, rotation: number): Float64Array;
+		/** Gets the current logical view array. */
+		getView(): Float64Array;
+		/** Sets the logical view directly. */
+		setView(centerX: number, centerY: number, width: number, height: number, noLimit: boolean, noLastView: boolean, correctNorth?: boolean, forceLimit?: boolean): void;
+		getScale(): number;
+		isZoomedIn(): boolean;
+		isZoomedOut(b?: boolean): boolean;
+		setDirection(yaw: number, pitch: number, resetPersp: boolean): void;
+		getMatrix(x: number, y: number, s: number, r: number, rX: number, rY: number, rZ: number, t: number, sX?: number, sY?: number, noCorrectNorth?: boolean): Float32Array;
+		aniPause(time: number): void;
+		aniResume(time: number): void;
+		aniStop(): void;
+		aniDone(): void;
+		aniAbort(): void;
+	}
 	/** Type for error codes */
 	export type ErrorCode = typeof ErrorCodes[keyof typeof ErrorCodes];
+	export { mod } from "engine/utils/utils";
 	/**
 	 * Converts seconds into a human-readable time string (hh?:mm:ss).
 	 * @param s Time in seconds. Can be negative for remaining time display.
@@ -182,6 +1122,9 @@ declare module '@micrio/client' {
 		readonly center: Models.Camera.Coords;
 		/** CORRECT view: [x0, y0, width, height] */
 		private readonly view;
+		private _getXY;
+		private _getCoo;
+		private _setMinScale;
 		/**
 		 * Gets the current image view rectangle.
 		 * @returns A copy of the current screen viewport array, or undefined if not initialized.
@@ -207,7 +1150,7 @@ declare module '@micrio/client' {
 			noLimit?: boolean;
 			/** If true (for 360), corrects the view based on the `trueNorth` setting. */
 			correctNorth?: boolean;
-			/** If true, prevents triggering a Wasm render after setting the view. */
+			/** If true, prevents triggering a render after setting the view. */
 			noRender?: boolean;
 			/** If provided, interprets `view` relative to this sub-area instead of the full image. */
 			area?: Models.Camera.ViewRect;
@@ -265,29 +1208,10 @@ declare module '@micrio/client' {
 		setScale: (s: number) => void;
 		/** Gets the scale at which the image fully covers the viewport. */
 		getCoverScale: () => number;
-		/**
-		 * Gets the minimum allowed zoom scale for the image.
-		 * @returns The minimum scale.
-		*/
 		getMinScale: () => number;
-		/**
-		 * Sets the minimum allowed zoom scale.
-		 * @param s The minimum scale to set.
-		*/
 		setMinScale(s: number): void;
-		/**
-		 * Sets the minimum screen size the image should occupy when zooming out (0-1).
-		 * Allows zooming out further than the image boundaries, creating margins.
-		 * Note: Does not work with albums.
-		 * @param s The minimum screen size fraction (0-1).
-		*/
 		setMinScreenSize(s: number): void;
-		/** Returns true if the camera is currently zoomed in to its maximum limit. */
 		isZoomedIn: () => boolean;
-		/**
-		 * Returns true if the camera is currently zoomed out to its minimum limit.
-		 * @param full If true, checks against the absolute minimum scale (ignoring `setMinScreenSize`).
-		*/
 		isZoomedOut: (full?: boolean) => boolean;
 		/**
 		 * Sets a rectangular limit for camera navigation within the image.
@@ -299,14 +1223,12 @@ declare module '@micrio/client' {
 		 * @param b If true, limits the view to cover the screen.
 		*/
 		setCoverLimit(b: boolean): void;
-		/** Gets whether the cover limit is currently enabled. */
 		getCoverLimit: () => boolean;
-		/**
-		 * Limits the horizontal and vertical viewing range for 360 images.
-		 * @param xPerc The horizontal arc limit as a percentage (0-1, where 1 = 360°). 0 disables horizontal limit.
-		 * @param yPerc The vertical arc limit as a percentage (0-1, where 1 = 180°). 0 disables vertical limit.
-		*/
+		stop(): void;
+		pause(): void;
+		resume(): void;
 		set360RangeLimit(xPerc?: number, yPerc?: number): void;
+		aniIsKinetic(): boolean;
 		/**
 		 * Animates the camera smoothly to a target viewport.
 		 * @param view The target viewport as either a View [x0, y0, x1, y1] or View {centerX, centerY, width, height}.
@@ -358,7 +1280,7 @@ declare module '@micrio/client' {
 		 * @param noLimit If true, allows zooming beyond image boundaries.
 		 * @returns A Promise that resolves when the zoom animation completes.
 		 */
-		zoom: (delta: number, duration?: number, x?: number | undefined, y?: number | undefined, speed?: number, noLimit?: boolean) => Promise<void>;
+		zoom: (delta: number, duration?: number, x?: number | undefined, y?: number | undefined, _speed?: number, noLimit?: boolean) => Promise<void>;
 		/**
 		 * Zooms in by a specified factor.
 		 * @param factor Zoom factor (e.g., 1 = standard zoom step).
@@ -386,29 +1308,12 @@ declare module '@micrio/client' {
 			render?: boolean;
 			noLimit?: boolean;
 		}): void;
-		/** Stops any currently running camera animation immediately. */
-		stop(): void;
-		/** Pauses the current camera animation. */
-		pause(): void;
-		/** Resumes a paused camera animation. */
-		resume(): void;
-		/** Returns true if the camera is currently performing a kinetic pan/zoom (coasting). */
-		aniIsKinetic(): boolean;
 		/** Gets the current viewing direction (yaw) in 360 mode.
 		 * @returns The current yaw in radians.
 		 */
 		getDirection: () => number;
-		/**
-		 * Sets the viewing direction (yaw and optionally pitch) instantly in 360 mode.
-		 * @param yaw The target yaw in radians.
-		 * @param pitch Optional target pitch in radians.
-		*/
-		setDirection(yaw: number, pitch?: number): void;
-		/**
-		 * Gets the current viewing pitch in 360 mode.
-		 * @returns The current pitch in radians.
-		*/
 		getPitch: () => number;
+		setDirection(yaw: number, pitch?: number): void;
 		/**
 		 * Sets the rendering area for this image within the main canvas.
 		 * Used for split-screen and potentially other layout effects. Animates by default.
@@ -420,7 +1325,7 @@ declare module '@micrio/client' {
 			direct?: boolean;
 			/** If true, prevents dispatching view updates during the animation. */
 			noDispatch?: boolean;
-			/** If true, prevents triggering a Wasm render after setting the area. */
+			/** If true, prevents triggering a render after setting the area. */
 			noRender?: boolean;
 		}): void;
 		/** Sets the 3D rotation for an embedded image (used for placing embeds in 360 space). */
@@ -431,52 +1336,92 @@ declare module '@micrio/client' {
 		getOmniFrame(rot?: number): number | undefined;
 		/** [Omni] Gets the screen coordinates [x, y, scale, depth] for given 3D object coordinates. */
 		getOmniXY(x: number, y: number, z: number): Float64Array;
-		/** [Omni] Applies Omni-specific camera settings (distance, FoV, angle) to Wasm. */
+		/** [Omni] Applies Omni-specific camera settings (distance, FoV, angle) to the engine canvas. */
 		setOmniSettings(): void;
 	}
 	/**
-	 * The main WebAssembly controller class. Handles interaction between JavaScript
-	 * and the compiled C++ core of Micrio. Accessed via `micrio.wasm`.
+	 * The main Micrio compute controller class. Handles the engine lifecycle,
+	 * render loop, tile management, and WebGL integration.
+	 * Accessed via `micrio.engine`.
 	 */
-	export class Wasm {
+	export class Engine {
 		micrio: HTMLMicrioElement;
-		/** Flag indicating if the Wasm module has been loaded and initialized. */
 		ready: boolean;
-		/** Shared WebAssembly memory instance. */
-		private memory;
 		/** Forget in-memory tiles after X seconds not drawn */
 		private deleteAfterSeconds;
-		/**
-		 * Creates the Wasm controller instance.
-		 * @param micrio The main HTMLMicrioElement instance.
-		*/
+		preventDirectionSet: boolean;
+		/** Shared Float32Array for standard tile vertex data. */
+		_vertexBuffer: Float32Array;
+		/** Static Float32Array holding texture coordinates for a standard quad. */
+		static readonly _textureBuffer: Float32Array;
+		/** Shared Float32Array for 360 tile vertex data. */
+		_vertexBuffer360: Float32Array;
+		/** Static Float32Array holding texture coordinates for the 360 sphere. */
+		static _textureBuffer360: Float32Array;
+		/** Flag indicating if the current context is a gallery. */
+		private isGallery;
+		private now;
+		private raf;
+		private drawing;
+		/** Returns the engine TileCanvas for a MicrioImage, or undefined. */
+		getCanvas(img: MicrioImage | Models.Omni.Frame): TileCanvas | undefined;
 		constructor(micrio: HTMLMicrioElement);
 		/**
-		 * Loads and instantiates the WebAssembly module.
-		 * @returns A Promise that resolves when the Wasm module is ready.
-		 * @throws Error if WebAssembly binary loading or instantiation fails
-		*/
+		 * Initializes the engine (replaces WebAssembly loading).
+		 * @throws Error if engine initialization fails
+		 */
 		load(): Promise<void>;
+		private _hostDrawQuad;
+		private _hostGetTileOpacity;
+		private _hostSetTileOpacity;
+		private _hostSetMatrix;
+		private _hostSetViewport;
+		private _hostAniDone;
+		private _hostAniAbort;
+		private _hostViewSet;
+		private _hostViewportSet;
+		private _hostSetCanvasVisible;
+		private _hostSetImageVisible;
 		/** Unbinds event listeners, stops rendering, and cleans up resources. */
 		unbind(): void;
 		/**
-		 * Sets the currently active canvas/image instance in the Wasm module.
-		 * Handles adding the canvas to Wasm if it's not already initialized.
-		 * @param canvas The MicrioImage instance to set as active.
-		*/
+		 * Sets the currently active canvas/image instance in the engine.
+		 */
 		setCanvas(canvas?: MicrioImage): void;
-		/** Removes a canvas instance from the Wasm module. */
+		/** Removes a canvas instance from the engine. */
 		removeCanvas(c: MicrioImage): void;
-		/** Requests the next animation frame to trigger the `draw` method. */
+		/** Requests the next animation frame. */
 		render(): void;
+		/**
+		 * Callback for the engine to request drawing a tile.
+		 * @returns True if the tile texture is ready and drawn, false otherwise.
+		 */
+		private drawTile;
 		/** Add a child image to the current canvas, either embed or independent canvas */
 		private addImage;
-		/** Add a child independent canvas to the current canvas, used for grid images
-		 * @param image The image
-		 * @param parent The parent image
-		 * @returns Promise when the image is added
-		 */
+		/** Add a child independent canvas to the current canvas */
 		addChild: (image: MicrioImage, parent: MicrioImage) => Promise<void>;
+		setZIndex(ptr: number, z: number): void;
+		setGridTransitionDuration(dur: number): void;
+		setGridTransitionTimingFunction(fn: number): void;
+		setCrossfadeDuration(dur: number): void;
+		fadeTo(ptr: number, opacity: number, direct: boolean): void;
+		fadeIn(ptr: number): void;
+		fadeOut(ptr: number): void;
+		areaAnimating(ptr: number): boolean;
+		getActiveImageIdx(ptr: number): number;
+		setNoPinchPan(v: boolean): void;
+		setIsSwipe(v: boolean): void;
+		ease(p: number): number;
+		panStart(ptr: number): void;
+		panStop(ptr: number): void;
+		pinchStart(ptr: number): void;
+		pinch(ptr: number, x0: number, y0: number, x1: number, y1: number): void;
+		pinchStop(ptr: number, t: number): void;
+		setLimited(ptr: number, v: boolean): void;
+		set360Orientation(d: number, dX: number, dY: number): void;
+		setCanvasArea(w: number, h: number): void;
+		setImageVideoPlaying(ptr: number, playing: boolean): void;
 	}
 	/**
 	 * Handles swipe gestures for navigating image sequences, particularly for
@@ -488,7 +1433,7 @@ declare module '@micrio/client' {
 		private length;
 		goto: (i: number) => void;
 		private opts;
-		/** Getter for the current active image/frame index from the Wasm module. */
+		/** Getter for the current active image/frame index from the engine. */
 		get currentIndex(): number;
 		/**
 		 * Creates a GallerySwiper instance.
@@ -644,7 +1589,7 @@ declare module '@micrio/client' {
 	/**
 	 * Represents and controls a single Micrio image instance within the viewer.
 	 * This class manages the image's metadata (info), cultural data (data),
-	 * settings, camera, state, and interactions with the WebAssembly module
+	 * settings, camera, state, and interactions with the compute engine
 	 * for rendering and processing. It handles loading image tiles, embeds,
 	 * markers, tours, and galleries associated with the image.
 	 *
@@ -652,7 +1597,7 @@ declare module '@micrio/client' {
 	 * @author Marcel Duin <marcel@micr.io>
 	*/
 	export class MicrioImage {
-		wasm: Wasm;
+		engine: Engine;
 		private attr;
 		opts: {
 			/** Optional sub area [x0, y0, x1, y1] defining placement within a parent canvas (for embeds/galleries). */
@@ -2462,7 +3407,7 @@ declare module '@micrio/client' {
 		 */
 		getRatio: (s?: Partial<Models.ImageInfo.Settings>) => number;
 		/**
-		 * Sets virtual offset margins in the Wasm controller.
+		 * Sets virtual offset margins in the engine controller.
 		 * This likely affects how viewports are calculated or limited.
 		 * @param width The horizontal offset margin in pixels.
 		 * @param height The vertical offset margin in pixels.
@@ -2931,7 +3876,7 @@ declare module '@micrio/client' {
 	/**
 	 * The main Micrio custom HTML element `<micr-io>`.
 	 * This class acts as the central controller for the Micrio viewer, managing
-	 * the WebGL canvas, WebAssembly module, Svelte UI, state, events, and image loading.
+	 * the WebGL canvas, compute engine, Svelte UI, state, events, and image loading.
 	 *
 	 * It orchestrates the interaction between different parts of the library and
 	 * exposes methods and properties for controlling the viewer.
@@ -3025,7 +3970,7 @@ declare module '@micrio/client' {
 		/**
 		 * Closes an opened MicrioImage.
 		 * For split-screen images, it triggers the split-end transition.
-		 * For main images, it removes the canvas from the Wasm controller.
+		 * For main images, it removes the canvas from the engine.
 		 * @param img The {@link MicrioImage} instance to close.
 		*/
 		close(img: MicrioImage): void;
@@ -3071,20 +4016,20 @@ declare module '@micrio/client' {
 	 * Handles HLS playback via hls.js if necessary.
 	 */
 	export class GLEmbedVideo {
-		private wasm;
+		private engine;
 		private image;
 		private embed;
 		private paused;
 		private moved;
 		/**
 		 * Creates a GLEmbedVideo instance.
-		 * @param wasm The Wasm controller instance.
+		 * @param engine The Engine controller instance.
 		 * @param image The parent MicrioImage instance where the video is embedded.
 		 * @param embed The embed data object.
 		 * @param paused Initial paused state (e.g., due to pause-on-zoom).
-		 * @param moved Callback function to notify when position/state changes (triggers Wasm render).
+		 * @param moved Callback function to notify when position/state changes (triggers Engine render).
 		 */
-		constructor(wasm: Wasm, image: MicrioImage, embed: Models.ImageData.Embed, paused: boolean, // Initial paused state
+		constructor(engine: Engine, image: MicrioImage, embed: Models.ImageData.Embed, paused: boolean, // Initial paused state
 		moved: () => void);
 		/** Cleans up resources when the parent Embed component is unmounted. */
 		unmount(): void;
@@ -3264,13 +4209,34 @@ declare module '@micrio/client' {
 	export { Router } from "ts/nav/router";
 	export { Grid } from "ts/nav/grid";
 	export { GallerySwiper } from "ts/nav/swiper";
-	export { Wasm } from "ts/render/wasm";
+	export { Engine } from "ts/render/engine";
 	export { WebGL } from "ts/render/webgl";
 	export { Canvas } from "ts/render/canvas";
 	export { PostProcessor } from "ts/render/postprocess";
 	export { archive } from "ts/render/archive";
 	export { loadTexture, runningThreads, numThreads, abortDownload } from "ts/render/textures";
 	export type { TextureBitmap } from "ts/render/textures";
+	/**
+	 * Micrio Engine — TypeScript compute core for the Micrio image viewer.
+	 *
+	 * This module replaces the WebAssembly/AssemblyScript compute layer.
+	 * It provides the same computational logic (camera math, tile pyramid
+	 * management, animation engine, 360 sphere geometry, matrix/vector math)
+	 * as pure TypeScript classes.
+	 *
+	 * @author Marcel Duin <marcel@micr.io>
+	 */
+	export { Main } from "engine/main";
+	export { default as TileCanvas } from "engine/canvas/canvas";
+	export { default as Image } from "engine/canvas/image";
+	export { default as SphericalView } from "engine/webgl/webgl";
+	export { default as Camera } from "engine/camera/camera";
+	export { default as Ani } from "engine/camera/ani";
+	export { default as Kinetic } from "engine/camera/kinetic";
+	export { View, Coordinates, Viewport, DrawRect } from "engine/shared/shared";
+	export { Mat4, Vec4 } from "engine/webgl/mat";
+	export { Bicubic, easeInOut, easeIn, easeOut, linear, mod1, modPI, twoNth, longitudeDistance } from "engine/utils/utils";
+	export { PI, PI2, PIh, segsX, segsY, base360Distance } from "engine/globals";
 }declare module "svelte/store" {
 	/** Callback to inform of a value updates.
 	*/