@ai-markdown/core 3.4.0 → 3.4.2

package/dist/components/index.d.cts

@@ -413,7 +413,11 @@ interface ImageGeometry {
 }
 export declare const initialImageTransform: () => ImageTransform;
 export declare function imageTransformStyle(transform: ImageTransform): string;
-export declare function zoomImage(transform: ImageTransform, ratio: number, geometry: ImageGeometry, centerX?: number, centerY?: number, touch?: boolean): ImageTransform;
+/** Scales by `ratio` about a viewport point, keeping the image point under it in place, within `limits`. */
+export declare function zoomImage(transform: ImageTransform, ratio: number, geometry: ImageGeometry, centerX?: number, centerY?: number, touch?: boolean, limits?: {
+  min: number;
+  max: number;
+}): ImageTransform;
 /**
  * The zoom factor for one wheel event. A full notch (100 pixels) is one 1.5x
  * step, and a smaller delta a proportional part of it.
@@ -421,13 +425,14 @@ export declare function zoomImage(transform: ImageTransform, ratio: number, geom
  *   pages, not pixels: three lines or one page count as a notch.
  * - `pinch` is a trackpad pinch, which arrives as a wheel event with the
  *   control key set and small deltas. It scales continuously with the delta.
+ * - `step` is what a full notch adds to the scale factor: 0.5 makes it 1.5x.
  */
-export declare function imageWheelRatio(delta: number, mode?: number, pinch?: boolean): number;
+export declare function imageWheelRatio(delta: number, mode?: number, pinch?: boolean, step?: number): number;
 /** Snap a moved image back inside the viewport, taking quarter turns into account. */
 export declare function reboundImage(transform: ImageTransform, geometry: ImageGeometry, bounds: {
   left: number;
   top: number;
-}): ImageTransform;
+}, minScale?: number): ImageTransform;
 /** Upstream pinch center weights each finger by how far it moved. */
 export declare function imagePinchCenter(oldA: {
   x: number;
@@ -464,6 +469,14 @@ interface ImagePreviewState {
   status: ImageLoadStatus;
   /** A drag or a pinch is in progress: the image follows the pointer without a transition. */
   moving: boolean;
+  /** The image can be dragged and pinched (the `movable` option). */
+  movable: boolean;
+  /** Viewport point the preview grows out of and shrinks back into: the anchor of the image shown when it opened,
+   * then of the image shown when it closes. Undefined means the centre of the viewport. */
+  origin: {
+    x: number;
+    y: number;
+  } | undefined;
   canPrevious: boolean;
   canNext: boolean;
   canZoomIn: boolean;
@@ -475,12 +488,46 @@ interface ImagePreviewHost {
   geometry(): ImageGeometry | undefined;
   /** Runs the callback before the next paint and returns a cancel function. `requestAnimationFrame` in a browser. */
   frame(callback: () => void): () => void;
+  /** Where the image registered under `id` sits on the page, as a viewport point: the centre of its thumbnail.
+   * Undefined when it has none or it is out of view. Asked when the preview opens and again when it closes. */
+  anchor?(id: object): {
+    x: number;
+    y: number;
+  } | undefined;
 }
 interface ImagePreviewOptions {
   /** How long the leaving style stays up, in milliseconds. Zero closes at once. A function is read at each close,
    * so a host can answer zero while the user prefers reduced motion. Default 300. */
   closeDuration?: number | (() => number);
+  /** What one zoom step adds to the scale factor: the toolbar, a double click and a full wheel notch multiply or
+   * divide by `1 + scaleStep`. Default 0.5. */
+  scaleStep?: number;
+  /** Smallest scale the toolbar and the wheel reach, and the one a pinch returns to. Default 1. */
+  minScale?: number;
+  /** Largest scale. Default 50. */
+  maxScale?: number;
+  /** Whether the image can be dragged and pinched. Default true. */
+  movable?: boolean;
+  /** Whether the wheel and a trackpad pinch zoom. Default true. */
+  wheel?: boolean;
+  /** The preview started to open (true) or to close (false). */
+  onOpenChange?(open: boolean, info: {
+    current: number;
+    item: ImageGalleryItem | undefined;
+  }): void;
+  /** An opening or a closing ran to its end. One that was interrupted, by reopening while it closed or by
+   * `dispose`, reports nothing. */
+  afterOpenChange?(open: boolean): void;
+  /** The user moved to another image of the gallery. */
+  onChange?(current: number, previous: number): void;
+  /** The transform changed. A drag or a wheel burst reports once per frame, with the last action. */
+  onTransform?(info: {
+    transform: ImageTransform;
+    action: ImagePreviewAction;
+  }): void;
 }
+/** What changed the transform, as reported to `onTransform`. */
+type ImagePreviewAction = 'zoomIn' | 'zoomOut' | 'rotateLeft' | 'rotateRight' | 'flipX' | 'flipY' | 'wheel' | 'doubleClick' | 'move' | 'pinch' | 'rebound' | 'prev' | 'next';
 interface ImagePointer {
   /** Pointer id: one drag, or one finger of a pinch. */
   id: number;
@@ -507,8 +554,10 @@ interface ImagePointer {
  *   else is published at once. Each update is applied to the current state, so
  *   several in one frame add up.
  * - Switching images resets the transform. Zoom is limited to 1x to 50x in
- *   1.5x steps, about the pointer for the wheel and a double click, about the
- *   viewport centre for the toolbar.
+ *   1.5x steps unless the options say otherwise, about the pointer for the
+ *   wheel and a double click, about the viewport centre for the toolbar.
+ * - The `on…` options report what the user did; they are called after the
+ *   state that reflects it has been published.
  */
 export declare function createImagePreviewController(host: ImagePreviewHost, publish: (state: ImagePreviewState) => void, options?: ImagePreviewOptions): {
   state: () => ImagePreviewState;
@@ -536,7 +585,7 @@ export declare function createImagePreviewController(host: ImagePreviewHost, pub
     mode?: number;
     pinch?: boolean;
   }): boolean;
-  /** Returns to the natural size, or zooms one step about the point when already there. */
+  /** Returns to the starting size, or zooms one step about the point when already there. */
   doubleClick(x: number, y: number): void;
   /** True when the key was used: prevent the default action. Left and right move through a gallery. */
   key(key: string): boolean;
@@ -565,4 +614,4 @@ export interface CodeBlockOptions {
   /** Text of the code block, as overrides of the English defaults. A function is called on every render. */
   labels?: LabelsOption<CodeBlockLabels>;
 }
-export type { CodeBlockInput, CodeBlockLabels, CodeBlockSnapshot, CodeFrame, CodeSource, DiagramEngine, DiagramError, DiagramLabels, DiagramRequest, DiagramState, DiagramView, ImageActionIconName, ImageGallery, ImageGalleryItem, ImageGeometry, ImageIconName, ImageLabels, ImageLoadStatus, ImagePointer, ImagePreviewHost, ImagePreviewOptions, ImagePreviewPhase, ImagePreviewState, ImageTransform, LabelsOption, MermaidInitTarget, TableExportReason, TableLabels, TableProjection };
+export type { CodeBlockInput, CodeBlockLabels, CodeBlockSnapshot, CodeFrame, CodeSource, DiagramEngine, DiagramError, DiagramLabels, DiagramRequest, DiagramState, DiagramView, ImageActionIconName, ImageGallery, ImageGalleryItem, ImageGeometry, ImageIconName, ImageLabels, ImageLoadStatus, ImagePointer, ImagePreviewAction, ImagePreviewHost, ImagePreviewOptions, ImagePreviewPhase, ImagePreviewState, ImageTransform, LabelsOption, MermaidInitTarget, TableExportReason, TableLabels, TableProjection };

package/dist/components/index.d.ts

@@ -413,7 +413,11 @@ interface ImageGeometry {
 }
 export declare const initialImageTransform: () => ImageTransform;
 export declare function imageTransformStyle(transform: ImageTransform): string;
-export declare function zoomImage(transform: ImageTransform, ratio: number, geometry: ImageGeometry, centerX?: number, centerY?: number, touch?: boolean): ImageTransform;
+/** Scales by `ratio` about a viewport point, keeping the image point under it in place, within `limits`. */
+export declare function zoomImage(transform: ImageTransform, ratio: number, geometry: ImageGeometry, centerX?: number, centerY?: number, touch?: boolean, limits?: {
+  min: number;
+  max: number;
+}): ImageTransform;
 /**
  * The zoom factor for one wheel event. A full notch (100 pixels) is one 1.5x
  * step, and a smaller delta a proportional part of it.
@@ -421,13 +425,14 @@ export declare function zoomImage(transform: ImageTransform, ratio: number, geom
  *   pages, not pixels: three lines or one page count as a notch.
  * - `pinch` is a trackpad pinch, which arrives as a wheel event with the
  *   control key set and small deltas. It scales continuously with the delta.
+ * - `step` is what a full notch adds to the scale factor: 0.5 makes it 1.5x.
  */
-export declare function imageWheelRatio(delta: number, mode?: number, pinch?: boolean): number;
+export declare function imageWheelRatio(delta: number, mode?: number, pinch?: boolean, step?: number): number;
 /** Snap a moved image back inside the viewport, taking quarter turns into account. */
 export declare function reboundImage(transform: ImageTransform, geometry: ImageGeometry, bounds: {
   left: number;
   top: number;
-}): ImageTransform;
+}, minScale?: number): ImageTransform;
 /** Upstream pinch center weights each finger by how far it moved. */
 export declare function imagePinchCenter(oldA: {
   x: number;
@@ -464,6 +469,14 @@ interface ImagePreviewState {
   status: ImageLoadStatus;
   /** A drag or a pinch is in progress: the image follows the pointer without a transition. */
   moving: boolean;
+  /** The image can be dragged and pinched (the `movable` option). */
+  movable: boolean;
+  /** Viewport point the preview grows out of and shrinks back into: the anchor of the image shown when it opened,
+   * then of the image shown when it closes. Undefined means the centre of the viewport. */
+  origin: {
+    x: number;
+    y: number;
+  } | undefined;
   canPrevious: boolean;
   canNext: boolean;
   canZoomIn: boolean;
@@ -475,12 +488,46 @@ interface ImagePreviewHost {
   geometry(): ImageGeometry | undefined;
   /** Runs the callback before the next paint and returns a cancel function. `requestAnimationFrame` in a browser. */
   frame(callback: () => void): () => void;
+  /** Where the image registered under `id` sits on the page, as a viewport point: the centre of its thumbnail.
+   * Undefined when it has none or it is out of view. Asked when the preview opens and again when it closes. */
+  anchor?(id: object): {
+    x: number;
+    y: number;
+  } | undefined;
 }
 interface ImagePreviewOptions {
   /** How long the leaving style stays up, in milliseconds. Zero closes at once. A function is read at each close,
    * so a host can answer zero while the user prefers reduced motion. Default 300. */
   closeDuration?: number | (() => number);
+  /** What one zoom step adds to the scale factor: the toolbar, a double click and a full wheel notch multiply or
+   * divide by `1 + scaleStep`. Default 0.5. */
+  scaleStep?: number;
+  /** Smallest scale the toolbar and the wheel reach, and the one a pinch returns to. Default 1. */
+  minScale?: number;
+  /** Largest scale. Default 50. */
+  maxScale?: number;
+  /** Whether the image can be dragged and pinched. Default true. */
+  movable?: boolean;
+  /** Whether the wheel and a trackpad pinch zoom. Default true. */
+  wheel?: boolean;
+  /** The preview started to open (true) or to close (false). */
+  onOpenChange?(open: boolean, info: {
+    current: number;
+    item: ImageGalleryItem | undefined;
+  }): void;
+  /** An opening or a closing ran to its end. One that was interrupted, by reopening while it closed or by
+   * `dispose`, reports nothing. */
+  afterOpenChange?(open: boolean): void;
+  /** The user moved to another image of the gallery. */
+  onChange?(current: number, previous: number): void;
+  /** The transform changed. A drag or a wheel burst reports once per frame, with the last action. */
+  onTransform?(info: {
+    transform: ImageTransform;
+    action: ImagePreviewAction;
+  }): void;
 }
+/** What changed the transform, as reported to `onTransform`. */
+type ImagePreviewAction = 'zoomIn' | 'zoomOut' | 'rotateLeft' | 'rotateRight' | 'flipX' | 'flipY' | 'wheel' | 'doubleClick' | 'move' | 'pinch' | 'rebound' | 'prev' | 'next';
 interface ImagePointer {
   /** Pointer id: one drag, or one finger of a pinch. */
   id: number;
@@ -507,8 +554,10 @@ interface ImagePointer {
  *   else is published at once. Each update is applied to the current state, so
  *   several in one frame add up.
  * - Switching images resets the transform. Zoom is limited to 1x to 50x in
- *   1.5x steps, about the pointer for the wheel and a double click, about the
- *   viewport centre for the toolbar.
+ *   1.5x steps unless the options say otherwise, about the pointer for the
+ *   wheel and a double click, about the viewport centre for the toolbar.
+ * - The `on…` options report what the user did; they are called after the
+ *   state that reflects it has been published.
  */
 export declare function createImagePreviewController(host: ImagePreviewHost, publish: (state: ImagePreviewState) => void, options?: ImagePreviewOptions): {
   state: () => ImagePreviewState;
@@ -536,7 +585,7 @@ export declare function createImagePreviewController(host: ImagePreviewHost, pub
     mode?: number;
     pinch?: boolean;
   }): boolean;
-  /** Returns to the natural size, or zooms one step about the point when already there. */
+  /** Returns to the starting size, or zooms one step about the point when already there. */
   doubleClick(x: number, y: number): void;
   /** True when the key was used: prevent the default action. Left and right move through a gallery. */
   key(key: string): boolean;
@@ -565,4 +614,4 @@ export interface CodeBlockOptions {
   /** Text of the code block, as overrides of the English defaults. A function is called on every render. */
   labels?: LabelsOption<CodeBlockLabels>;
 }
-export type { CodeBlockInput, CodeBlockLabels, CodeBlockSnapshot, CodeFrame, CodeSource, DiagramEngine, DiagramError, DiagramLabels, DiagramRequest, DiagramState, DiagramView, ImageActionIconName, ImageGallery, ImageGalleryItem, ImageGeometry, ImageIconName, ImageLabels, ImageLoadStatus, ImagePointer, ImagePreviewHost, ImagePreviewOptions, ImagePreviewPhase, ImagePreviewState, ImageTransform, LabelsOption, MermaidInitTarget, TableExportReason, TableLabels, TableProjection };
+export type { CodeBlockInput, CodeBlockLabels, CodeBlockSnapshot, CodeFrame, CodeSource, DiagramEngine, DiagramError, DiagramLabels, DiagramRequest, DiagramState, DiagramView, ImageActionIconName, ImageGallery, ImageGalleryItem, ImageGeometry, ImageIconName, ImageLabels, ImageLoadStatus, ImagePointer, ImagePreviewAction, ImagePreviewHost, ImagePreviewOptions, ImagePreviewPhase, ImagePreviewState, ImageTransform, LabelsOption, MermaidInitTarget, TableExportReason, TableLabels, TableProjection };

package/dist/components/index.js

@@ -694,9 +694,14 @@ function imageTransformStyle(transform) {
 	const { x, y, scale, rotate, flipX, flipY } = transform;
 	return `translate3d(${x}px, ${y}px, 0) scale3d(${flipX ? "-" : ""}${scale}, ${flipY ? "-" : ""}${scale}, 1) rotate(${rotate}deg)`;
 }
-function zoomImage(transform, ratio, geometry, centerX = geometry.viewportWidth / 2, centerY = geometry.viewportHeight / 2, touch = false) {
+const DEFAULT_SCALE_LIMITS = {
+	min: 1,
+	max: 50
+};
+function zoomImage(transform, ratio, geometry, centerX = geometry.viewportWidth / 2, centerY = geometry.viewportHeight / 2, touch = false, limits = DEFAULT_SCALE_LIMITS) {
 	if (!Number.isFinite(ratio) || ratio <= 0) return transform;
-	const scale = Math.min(50, touch ? Math.max(.01, transform.scale * ratio) : Math.max(1, transform.scale * ratio));
+	const floor = touch ? .01 : limits.min;
+	const scale = Math.min(limits.max, Math.max(floor, transform.scale * ratio));
 	const difference = scale / transform.scale - 1;
 	let x = transform.x - difference * (centerX - transform.x - geometry.left - geometry.width / 2);
 	let y = transform.y - difference * (centerY - transform.y - geometry.top - geometry.height / 2);
@@ -708,19 +713,19 @@ function zoomImage(transform, ratio, geometry, centerX = geometry.viewportWidth
 		scale
 	};
 }
-function imageWheelRatio(delta, mode = 0, pinch = false) {
+function imageWheelRatio(delta, mode = 0, pinch = false, step = .5) {
 	if (!Number.isFinite(delta) || delta === 0) return 1;
-	if (pinch) return Math.min(1.5, Math.max(1 / 1.5, Math.exp(-delta / 100)));
+	if (pinch) return Math.min(1 + step, Math.max(1 / (1 + step), Math.exp(-delta / 100)));
 	const pixels = mode === 1 ? delta * 100 / 3 : mode === 2 ? delta * 100 : delta;
-	const ratio = 1 + Math.min(Math.abs(pixels / 100), 1) * .5;
+	const ratio = 1 + Math.min(Math.abs(pixels / 100), 1) * step;
 	return pixels > 0 ? 1 / ratio : ratio;
 }
-function reboundImage(transform, geometry, bounds) {
-	if (transform.scale < 1) return {
+function reboundImage(transform, geometry, bounds, minScale = 1) {
+	if (transform.scale < minScale) return {
 		...transform,
 		x: 0,
 		y: 0,
-		scale: 1
+		scale: minScale
 	};
 	const rotated = transform.rotate % 180 !== 0;
 	const width = (rotated ? geometry.height : geometry.width) * transform.scale;
@@ -752,9 +757,8 @@ function imagePinchCenter(oldA, oldB, a, b) {
 		y: oldA.y + ratio * (oldB.y - oldA.y)
 	};
 }
-const ZOOM_STEP = 1.5;
-const MAX_SCALE = 50;
 const CLOSE_MS = 300;
+const positive = (value, fallback) => typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback;
 const closedState = Object.freeze({
 	phase: "closed",
 	items: Object.freeze([]),
@@ -763,19 +767,34 @@ const closedState = Object.freeze({
 	transform: initialImageTransform(),
 	status: "loading",
 	moving: false,
+	movable: true,
+	origin: void 0,
 	canPrevious: false,
 	canNext: false,
 	canZoomIn: false,
 	canZoomOut: false
 });
 function createImagePreviewController(host, publish, options = {}) {
+	const limits = {
+		min: positive(options.minScale, 1),
+		max: 0
+	};
+	limits.max = Math.max(limits.min, positive(options.maxScale, 50));
+	const baseScale = Math.min(limits.max, Math.max(limits.min, 1));
+	const scaleStep = positive(options.scaleStep, .5);
+	const movable = options.movable ?? true;
+	const wheelZoom = options.wheel ?? true;
 	let phase = "closed";
 	let items = [];
 	let selected;
 	let current = -1;
-	let transform = initialImageTransform();
+	let transform = {
+		...initialImageTransform(),
+		scale: baseScale
+	};
 	let status = "loading";
 	let moving = false;
+	let origin;
 	let unsubscribe;
 	let cancelPublish;
 	let cancelOpening;
@@ -794,23 +813,40 @@ function createImagePreviewController(host, publish, options = {}) {
 			transform,
 			status,
 			moving,
+			movable,
+			origin,
 			canPrevious: current > 0,
 			canNext: current < items.length - 1,
-			canZoomIn: ready && transform.scale < MAX_SCALE,
-			canZoomOut: ready && transform.scale > 1
+			canZoomIn: ready && transform.scale < limits.max,
+			canZoomOut: ready && transform.scale > limits.min
 		};
 	};
+	let reported;
+	const flush = () => {
+		publish(snapshot());
+		const action = reported;
+		reported = void 0;
+		if (action) options.onTransform?.({
+			transform,
+			action
+		});
+	};
 	const emit = () => {
 		cancelPublish?.();
 		cancelPublish = void 0;
-		publish(snapshot());
+		flush();
 	};
 	const emitNextFrame = () => {
 		cancelPublish ??= host.frame(() => {
 			cancelPublish = void 0;
-			publish(snapshot());
+			flush();
 		});
 	};
+	const apply = (next, action) => {
+		if (next.x === transform.x && next.y === transform.y && next.scale === transform.scale && next.rotate === transform.rotate && next.flipX === transform.flipX && next.flipY === transform.flipY) return;
+		transform = next;
+		reported = action;
+	};
 	const endGesture = () => {
 		pointers.clear();
 		grip = void 0;
@@ -818,22 +854,26 @@ function createImagePreviewController(host, publish, options = {}) {
 		moving = false;
 	};
 	const startImage = () => {
-		transform = initialImageTransform();
+		transform = {
+			...initialImageTransform(),
+			scale: baseScale
+		};
+		reported = void 0;
 		status = "loading";
 		endGesture();
 	};
-	const zoom = (ratio, x, y, touch = false) => {
+	const zoom = (action, ratio, x, y, touch = false) => {
 		const box = host.geometry();
-		if (box && status === "ready") transform = zoomImage(transform, ratio, box, x, y, touch);
+		if (box && status === "ready") apply(zoomImage(transform, ratio, box, x, y, touch, limits), action);
 	};
 	const rebound = () => {
-		if (transform.scale < 1) {
-			transform = {
+		if (transform.scale < limits.min) {
+			apply({
 				...transform,
 				x: 0,
 				y: 0,
-				scale: 1
-			};
+				scale: limits.min
+			}, "rebound");
 			return;
 		}
 		const box = host.geometry();
@@ -841,18 +881,28 @@ function createImagePreviewController(host, publish, options = {}) {
 		const turned = transform.rotate % 180 !== 0;
 		const width = (turned ? box.height : box.width) * transform.scale;
 		const height = (turned ? box.width : box.height) * transform.scale;
-		transform = reboundImage(transform, box, {
+		apply(reboundImage(transform, box, {
 			left: box.left + box.width / 2 + transform.x - width / 2,
 			top: box.top + box.height / 2 + transform.y - height / 2
-		});
+		}, limits.min), "rebound");
+	};
+	const anchorOf = (id) => {
+		const point = host.anchor?.(id);
+		return point && Number.isFinite(point.x) && Number.isFinite(point.y) ? {
+			x: point.x,
+			y: point.y
+		} : void 0;
 	};
 	const finishClosing = () => {
 		closeTimer = void 0;
 		phase = "closed";
 		items = [];
 		selected = void 0;
+		origin = void 0;
 		current = -1;
+		reported = void 0;
 		emit();
+		options.afterOpenChange?.(false);
 	};
 	const close = () => {
 		if (phase === "closed" || phase === "closing") return;
@@ -861,20 +911,36 @@ function createImagePreviewController(host, publish, options = {}) {
 		unsubscribe?.();
 		unsubscribe = void 0;
 		endGesture();
+		reported = void 0;
+		origin = selected ? anchorOf(selected) : void 0;
 		phase = "closing";
+		const info = {
+			current,
+			item: items[current]
+		};
 		const duration = typeof options.closeDuration === "function" ? options.closeDuration() : options.closeDuration ?? CLOSE_MS;
 		if (duration > 0) {
 			emit();
 			closeTimer = setTimeout(finishClosing, duration);
-		} else finishClosing();
+			options.onOpenChange?.(false, info);
+		} else try {
+			options.onOpenChange?.(false, info);
+		} finally {
+			if (phase === "closing") finishClosing();
+		}
 	};
 	const go = (delta) => {
 		const target = current + delta;
 		if (phase === "closed" || phase === "closing" || target < 0 || target >= items.length || target === current) return;
+		const previous = current;
+		const { x, y, scale, rotate, flipX, flipY } = transform;
+		const transformed = x !== 0 || y !== 0 || scale !== baseScale || rotate !== 0 || flipX || flipY;
 		current = target;
 		selected = items[target].id;
 		startImage();
+		if (transformed) reported = delta < 0 ? "prev" : "next";
 		emit();
+		options.onChange?.(current, previous);
 	};
 	const follow = (gallery) => {
 		const next = gallery.items();
@@ -898,6 +964,7 @@ function createImagePreviewController(host, publish, options = {}) {
 			items = list;
 			current = index;
 			selected = id;
+			origin = anchorOf(id);
 			startImage();
 			unsubscribe = gallery.subscribe(() => follow(gallery));
 			if (phase === "open") {
@@ -905,15 +972,26 @@ function createImagePreviewController(host, publish, options = {}) {
 				return true;
 			}
 			cancelOpening = void 0;
+			const starting = phase !== "opening";
 			phase = "opening";
 			emit();
 			cancelOpening = host.frame(() => {
+				const measured = selected ? anchorOf(selected) : void 0;
+				if (measured?.x !== origin?.x || measured?.y !== origin?.y) {
+					origin = measured;
+					emit();
+				}
 				cancelOpening = host.frame(() => {
 					cancelOpening = void 0;
 					phase = "open";
 					emit();
+					options.afterOpenChange?.(true);
 				});
 			});
+			if (starting) options.onOpenChange?.(true, {
+				current,
+				item: items[current]
+			});
 			return true;
 		},
 		close,
@@ -924,24 +1002,24 @@ function createImagePreviewController(host, publish, options = {}) {
 			if (name === "prev") return go(-1);
 			if (name === "next") return go(1);
 			if (status !== "ready") return;
-			if (name === "zoomIn") zoom(ZOOM_STEP);
-			else if (name === "zoomOut") zoom(1 / ZOOM_STEP);
-			else if (name === "rotateLeft") transform = {
+			if (name === "zoomIn") zoom(name, 1 + scaleStep);
+			else if (name === "zoomOut") zoom(name, 1 / (1 + scaleStep));
+			else if (name === "rotateLeft") apply({
 				...transform,
 				rotate: transform.rotate - 90
-			};
-			else if (name === "rotateRight") transform = {
+			}, name);
+			else if (name === "rotateRight") apply({
 				...transform,
 				rotate: transform.rotate + 90
-			};
-			else if (name === "flipX") transform = {
+			}, name);
+			else if (name === "flipX") apply({
 				...transform,
 				flipX: !transform.flipX
-			};
-			else if (name === "flipY") transform = {
+			}, name);
+			else if (name === "flipY") apply({
 				...transform,
 				flipY: !transform.flipY
-			};
+			}, name);
 			emit();
 		},
 		loaded() {
@@ -956,7 +1034,7 @@ function createImagePreviewController(host, publish, options = {}) {
 			emit();
 		},
 		pointerDown(pointer) {
-			if (phase !== "open" && phase !== "opening" || status !== "ready") return false;
+			if (!movable || phase !== "open" && phase !== "opening" || status !== "ready") return false;
 			if (pointer.button !== void 0 && pointer.button !== 0) return false;
 			if (pointers.size >= 2 && !pointers.has(pointer.id)) return false;
 			pointers.set(pointer.id, {
@@ -983,12 +1061,12 @@ function createImagePreviewController(host, publish, options = {}) {
 				const [a, b] = [...pointers.values()];
 				const span = Math.hypot(before[0].x - before[1].x, before[0].y - before[1].y);
 				const center = imagePinchCenter(before[0], before[1], a, b);
-				if (span > 0) zoom(Math.hypot(a.x - b.x, a.y - b.y) / span, center.x, center.y, true);
-			} else if (grip) transform = {
+				if (span > 0) zoom("pinch", Math.hypot(a.x - b.x, a.y - b.y) / span, center.x, center.y, true);
+			} else if (grip) apply({
 				...transform,
 				x: pointer.x - grip.x,
 				y: pointer.y - grip.y
-			};
+			}, "move");
 			displaced = true;
 			emitNextFrame();
 		},
@@ -1008,20 +1086,20 @@ function createImagePreviewController(host, publish, options = {}) {
 			emit();
 		},
 		wheel(input) {
-			if (phase !== "open" || status !== "ready" || !input.deltaY) return false;
-			zoom(imageWheelRatio(input.deltaY, input.mode, input.pinch), input.x, input.y);
+			if (!wheelZoom || phase !== "open" || status !== "ready" || !input.deltaY) return false;
+			zoom("wheel", imageWheelRatio(input.deltaY, input.mode, input.pinch, scaleStep), input.x, input.y);
 			emitNextFrame();
 			return true;
 		},
 		doubleClick(x, y) {
 			if (phase !== "open" || status !== "ready") return;
-			if (transform.scale !== 1) transform = {
+			if (transform.scale !== baseScale) apply({
 				...transform,
 				x: 0,
 				y: 0,
-				scale: 1
-			};
-			else zoom(ZOOM_STEP, x, y);
+				scale: baseScale
+			}, "doubleClick");
+			else zoom("doubleClick", 1 + scaleStep, x, y);
 			emit();
 		},
 		key(key) {
@@ -1041,7 +1119,9 @@ function createImagePreviewController(host, publish, options = {}) {
 			phase = "closed";
 			items = [];
 			selected = void 0;
+			origin = void 0;
 			current = -1;
+			reported = void 0;
 		}
 	};
 }