@micrio/client 6.0.0 → 6.0.1

package/micrio.min.d.ts

@@ -12,948 +12,12 @@ 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";
+	/**
+	 * Calculates the positive modulo (floored division remainder).
+	 */
+	export const mod: (n: number, m?: number) => number;
 	/**
 	 * Converts seconds into a human-readable time string (hh?:mm:ss).
 	 * @param s Time in seconds. Can be negative for remaining time display.
@@ -1215,7 +279,7 @@ declare module '@micrio/client' {
 		isZoomedOut: (full?: boolean) => boolean;
 		/**
 		 * Sets a rectangular limit for camera navigation within the image.
-		 * @param l The viewport limit rectangle [x0, y0, x1, y1].
+		 * @param v The viewport limit rectangle [x0, y0, x1, y1].
 		*/
 		setLimit(v: Models.Camera.ViewRect): void;
 		/**
@@ -1276,7 +340,7 @@ declare module '@micrio/client' {
 		 * @param duration Forced duration in ms (0 for instant).
 		 * @param x Screen pixel X-coordinate for zoom focus (optional, defaults to center).
 		 * @param y Screen pixel Y-coordinate for zoom focus (optional, defaults to center).
-		 * @param speed Animation speed multiplier (optional).
+		 * @param _speed Animation speed multiplier (optional).
 		 * @param noLimit If true, allows zooming beyond image boundaries.
 		 * @returns A Promise that resolves when the zoom animation completes.
 		 */
@@ -1363,8 +427,6 @@ declare module '@micrio/client' {
 		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);
 		/**
 		 * Initializes the engine (replaces WebAssembly loading).
@@ -3077,19 +2139,19 @@ declare module '@micrio/client' {
 			/** A numeric array or Float64Array used for camera geometry. */
 			type CameraArray = number[] | Float64Array;
 			/** A viewport rectangle `[x0, y0, x1, y1]` (corners). */
-			export type ViewRect = CameraArray;
+			type ViewRect = CameraArray;
 			/** An area definition `[x0, y0, width, height]` (origin + size). */
-			export type View = CameraArray;
+			type View = CameraArray;
 			/** Coordinate tuple, [x, y, scale] */
-			export type Coords = [number, number, number?] | Float64Array;
+			type Coords = [number, number, number?] | Float64Array;
 			/** A 360 vector for use in Spaces */
-			export type Vector = {
+			type Vector = {
 				direction: number;
 				distanceX: number;
 				distanceY: number;
 			};
-			export type TimingFunction = ('ease' | 'ease-in' | 'ease-out' | 'linear');
-			export interface AnimationOptions {
+			type TimingFunction = ('ease' | 'ease-in' | 'ease-out' | 'linear');
+			interface AnimationOptions {
 				/** Animation duration in ms */
 				duration?: number;
 				/** Limit the viewport to fill the screen */
@@ -3099,7 +2161,6 @@ declare module '@micrio/client' {
 				/** Transition timing function */
 				timingFunction?: TimingFunction;
 			}
-			export {};
 		}
 		namespace Embeds {
 			interface EmbedOptions {
@@ -3891,7 +2952,7 @@ declare module '@micrio/client' {
 	 * </script>
 	 * ```
 	 *
-	 * [[include:./ts/element.md]]
+	 * {@include ./element.md}
 	 *
 	 * @author Marcel Duin <marcel@micr.io>
 	*/
@@ -4216,27 +3277,6 @@ declare module '@micrio/client' {
 	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.
 	*/