@yorozu/animations 0.3.0

package/index.js

@@ -0,0 +1,2229 @@
+//#region src/core/reduced-motion.ts
+function prefersReducedMotion() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+	return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+//#endregion
+//#region src/core/raf.ts
+function dualRaf() {
+	return new Promise((resolve) => {
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => resolve());
+		});
+	});
+}
+//#endregion
+//#region src/core/level.ts
+var ANIMATION_LEVELS = [
+	"low",
+	"med",
+	"high"
+];
+var DEFAULT_ANIMATION_LEVEL = "high";
+function isAnimationLevel(value) {
+	return value === "low" || value === "med" || value === "high";
+}
+function parseAnimationLevel(raw) {
+	if (typeof raw !== "string") return null;
+	let next = raw.trim().toLowerCase();
+	return isAnimationLevel(next) ? next : null;
+}
+function defaultAnimationLevel(prefersReduced) {
+	return prefersReduced ? "med" : DEFAULT_ANIMATION_LEVEL;
+}
+function cycleAnimationLevel(level) {
+	let idx = ANIMATION_LEVELS.indexOf(level);
+	if (idx < 0) return DEFAULT_ANIMATION_LEVEL;
+	return ANIMATION_LEVELS[(idx + 1) % ANIMATION_LEVELS.length];
+}
+function canAnimate(level) {
+	return level !== "low";
+}
+function pickAnimationLevelFromRatio(t) {
+	if (t < 1 / 3) return "low";
+	if (t < 2 / 3) return "med";
+	return "high";
+}
+function stepAnimationLevel(level, delta) {
+	let idx = ANIMATION_LEVELS.indexOf(level);
+	if (idx < 0) return DEFAULT_ANIMATION_LEVEL;
+	let next = idx + delta;
+	if (next < 0) return ANIMATION_LEVELS[0];
+	if (next >= ANIMATION_LEVELS.length) return ANIMATION_LEVELS[ANIMATION_LEVELS.length - 1];
+	return ANIMATION_LEVELS[next];
+}
+//#endregion
+//#region src/core/playback.ts
+function createPlayback() {
+	let cancelled = false;
+	let settled = false;
+	let resolveDone;
+	let done = new Promise((resolve) => {
+		resolveDone = resolve;
+	});
+	let resolve = (ran) => {
+		if (settled) return;
+		settled = true;
+		resolveDone(cancelled ? false : ran);
+	};
+	return {
+		playback: {
+			done,
+			cancel: () => {
+				cancelled = true;
+				resolve(false);
+			}
+		},
+		resolve,
+		isCancelled: () => cancelled
+	};
+}
+function animateElement(el, keyframes, options) {
+	if (typeof el.animate !== "function") return null;
+	return el.animate(keyframes, options);
+}
+//#endregion
+//#region src/core/tween.ts
+function easeOutCubic(t) {
+	return 1 - (1 - (t < 0 ? 0 : t > 1 ? 1 : t)) ** 3;
+}
+function lerp(from, to, t) {
+	return from + (to - from) * t;
+}
+function tween(options) {
+	let { playback, resolve, isCancelled } = createPlayback();
+	let ease = options.easing ?? easeOutCubic;
+	let durationMs = Math.max(0, options.durationMs);
+	if (durationMs <= 0) {
+		options.onUpdate(options.to);
+		resolve(true);
+		return playback;
+	}
+	let start = performance.now();
+	let frame = 0;
+	let tick = (now) => {
+		if (isCancelled()) {
+			resolve(false);
+			return;
+		}
+		let t = Math.min(1, (now - start) / durationMs);
+		options.onUpdate(lerp(options.from, options.to, ease(t)));
+		if (t >= 1) {
+			resolve(true);
+			return;
+		}
+		frame = requestAnimationFrame(tick);
+	};
+	frame = requestAnimationFrame(tick);
+	let cancel = playback.cancel;
+	playback.cancel = () => {
+		cancelAnimationFrame(frame);
+		cancel();
+	};
+	return playback;
+}
+//#endregion
+//#region src/rect/fit.ts
+/** Fit natural size into box without upscaling past natural (CSS contain-like). */
+function fitContain(natural, box) {
+	let natW = natural.width;
+	let natH = natural.height;
+	let boxW = box.width;
+	let boxH = box.height;
+	if (!(natW > 0) || !(natH > 0) || !(boxW > 0) || !(boxH > 0)) return null;
+	let scale = Math.min(boxW / natW, boxH / natH, 1);
+	return {
+		width: Math.max(1, Math.round(natW * scale)),
+		height: Math.max(1, Math.round(natH * scale))
+	};
+}
+/** Center a fitted size inside a padded viewport. */
+function centerFitInViewport(fit, viewport, insets) {
+	let availW = Math.max(0, viewport.width - insets.left - insets.right);
+	let availH = Math.max(0, viewport.height - insets.top - insets.bottom);
+	return {
+		top: insets.top + (availH - fit.height) / 2,
+		left: insets.left + (availW - fit.width) / 2,
+		width: fit.width,
+		height: fit.height
+	};
+}
+//#endregion
+//#region src/shared-element/math.ts
+/** Expand a cover-cropped thumb so its aspect matches destination aspect. */
+function uncoverByAspect(aspectWidth, aspectHeight, thumb) {
+	let { top, left, width, height } = thumb;
+	let realW = aspectWidth;
+	let realH = aspectHeight;
+	if (!(realW > 0) || !(realH > 0) || !(width > 0) || !(height > 0)) return { ...thumb };
+	if (realW === realH) {
+		let size = Math.max(width, height);
+		left -= (size - width) / 2;
+		top -= (size - height) / 2;
+		width = size;
+		height = size;
+	} else if (realW > realH) {
+		let srcWidth = width;
+		width = height * (realW / realH);
+		left -= (width - srcWidth) / 2;
+	} else {
+		let srcHeight = height;
+		height = width * (realH / realW);
+		top -= (height - srcHeight) / 2;
+	}
+	return {
+		top,
+		left,
+		width,
+		height
+	};
+}
+/** Center-based translate/scale so an element at `to` visually matches `from`. */
+function computeFlight(from, to) {
+	if (!(to.width > 0) || !(to.height > 0) || !(from.width > 0) || !(from.height > 0)) return null;
+	let fromCx = from.left + from.width / 2;
+	let fromCy = from.top + from.height / 2;
+	let toCx = to.left + to.width / 2;
+	let toCy = to.top + to.height / 2;
+	return {
+		to: { ...to },
+		fromTranslateX: fromCx - toCx,
+		fromTranslateY: fromCy - toCy,
+		fromScaleX: from.width / to.width,
+		fromScaleY: from.height / to.height
+	};
+}
+/** Prefer natural size; fall back to thumb so fit is never empty. */
+function resolveNaturalSize(naturalWidth, naturalHeight, thumb) {
+	if (naturalWidth && naturalHeight && naturalWidth > 0 && naturalHeight > 0) return {
+		width: naturalWidth,
+		height: naturalHeight
+	};
+	if (thumb.width > 0 && thumb.height > 0) return {
+		width: thumb.width,
+		height: thumb.height
+	};
+	return {
+		width: 1,
+		height: 1
+	};
+}
+/**
+* Open flight: (possibly uncovered) thumb → stage fit box (or explicit live `to`).
+* Cover thumbs uncover against destination aspect so scale is uniform.
+*/
+function computeOpenFlight(opts) {
+	let natural = resolveNaturalSize(opts.naturalWidth, opts.naturalHeight, opts.thumb);
+	let to = opts.to && opts.to.width > 0 && opts.to.height > 0 ? { ...opts.to } : null;
+	if (!to) {
+		if (!opts.insets) return null;
+		let fit = fitContain(natural, {
+			width: Math.max(0, opts.viewport.width - opts.insets.left - opts.insets.right),
+			height: Math.max(0, opts.viewport.height - opts.insets.top - opts.insets.bottom)
+		});
+		if (!fit) return null;
+		to = centerFitInViewport(fit, opts.viewport, opts.insets);
+	}
+	let from;
+	if (opts.objectFit === "cover") from = uncoverByAspect(to.width, to.height, opts.thumb);
+	else from = { ...opts.thumb };
+	return computeFlight(from, to);
+}
+/**
+* Close flight: stage box → thumb.
+* Cover uses Math.min(sx, sy) so the land crop matches.
+*/
+function computeCloseFlight(opts) {
+	let flight = computeFlight(opts.fromStage, opts.thumb);
+	if (!flight) return null;
+	if (opts.objectFit === "cover") {
+		let s = Math.min(flight.fromScaleX, flight.fromScaleY);
+		flight = {
+			...flight,
+			fromScaleX: s,
+			fromScaleY: s
+		};
+	}
+	return flight;
+}
+/** Whether rect is fully inside clip (within epsilon). */
+function isRectFullyVisibleIn(rect, clip, epsilon = 1) {
+	if (!(rect.width > 0) || !(rect.height > 0) || !(clip.width > 0) || !(clip.height > 0)) return false;
+	let right = rect.left + rect.width;
+	let bottom = rect.top + rect.height;
+	let clipRight = clip.left + clip.width;
+	let clipBottom = clip.top + clip.height;
+	return rect.left >= clip.left - epsilon && rect.top >= clip.top - epsilon && right <= clipRight + epsilon && bottom <= clipBottom + epsilon;
+}
+/** Whether rect intersects the viewport enough to land on. */
+function isRectInViewport(rect, viewport, minVisiblePx = 8) {
+	let right = rect.left + rect.width;
+	let bottom = rect.top + rect.height;
+	let visW = Math.min(right, viewport.width) - Math.max(rect.left, 0);
+	let visH = Math.min(bottom, viewport.height) - Math.max(rect.top, 0);
+	return visW >= minVisiblePx && visH >= minVisiblePx;
+}
+/** Off-viewport landing: fly above or below toward the thumb's side. */
+function offViewportLandingRect(from, thumb, viewportHeight) {
+	return {
+		top: thumb.top + thumb.height / 2 < from.top + from.height / 2 ? -thumb.height : viewportHeight,
+		left: thumb.left,
+		width: thumb.width,
+		height: thumb.height
+	};
+}
+//#endregion
+//#region src/core/styles.ts
+function applyStyles(el, styles) {
+	for (let key in styles) el.style.setProperty(key, styles[key]);
+}
+function clearStyles(el, keys) {
+	for (let key of keys) el.style.removeProperty(key);
+}
+//#endregion
+//#region src/shared-element/player.ts
+var SHARED_ELEMENT_MS = 200;
+var SHARED_ELEMENT_EASING = "ease";
+var SHARED_ELEMENT_END_MS = 16;
+function defaultViewport(override) {
+	if (override) return override;
+	if (typeof window === "undefined") return {
+		width: 0,
+		height: 0
+	};
+	return {
+		width: window.innerWidth,
+		height: window.innerHeight
+	};
+}
+function createClone(imageUrl, objectFit, roundedStart) {
+	let el = document.createElement("div");
+	el.setAttribute("aria-hidden", "true");
+	applyStyles(el, {
+		position: "fixed",
+		"z-index": "2147483646",
+		overflow: "hidden",
+		"pointer-events": "none",
+		"transform-origin": "center center",
+		"will-change": "transform, opacity",
+		"border-radius": roundedStart ? "12px" : "0"
+	});
+	let img = document.createElement("img");
+	img.draggable = false;
+	img.alt = "";
+	applyStyles(img, {
+		display: "block",
+		width: "100%",
+		height: "100%",
+		"object-fit": objectFit,
+		"pointer-events": "none",
+		"user-select": "none"
+	});
+	if (imageUrl) img.src = imageUrl;
+	el.appendChild(img);
+	return el;
+}
+function applyStartPose(el, flight) {
+	applyStyles(el, {
+		top: `${flight.to.top}px`,
+		left: `${flight.to.left}px`,
+		width: `${flight.to.width}px`,
+		height: `${flight.to.height}px`,
+		transform: startTransform$1(flight)
+	});
+}
+function startTransform$1(flight) {
+	return `translate3d(${flight.fromTranslateX}px, ${flight.fromTranslateY}px, 0) scale(${flight.fromScaleX}, ${flight.fromScaleY})`;
+}
+function createSharedElement() {
+	let current = null;
+	let teardownDom = (active) => {
+		if (active.timer != null) {
+			clearTimeout(active.timer);
+			active.timer = null;
+		}
+		if (active.clone.parentNode) active.clone.remove();
+		if (active.hideTarget) active.hideTarget.style.visibility = active.hidePrev;
+	};
+	let abort = (active) => {
+		if (current === active) current = null;
+		active.anim?.cancel();
+		active.anim = null;
+		teardownDom(active);
+		active.settleCancel();
+	};
+	let cancel = () => {
+		if (!current) return;
+		abort(current);
+	};
+	let start = (opts, flight) => {
+		cancel();
+		let { playback, resolve, isCancelled } = createPlayback();
+		let objectFit = opts.objectFit ?? "contain";
+		let clone = createClone(opts.imageUrl, objectFit, !!opts.roundedStart);
+		let hideTarget = opts.hideTarget ?? null;
+		let hidePrev = hideTarget?.style.visibility ?? "";
+		let durationMs = opts.durationMs ?? 200;
+		let easing = opts.easing ?? "ease";
+		let active = {
+			clone,
+			hideTarget,
+			hidePrev,
+			settleCancel: playback.cancel,
+			resolve,
+			isCancelled,
+			anim: null,
+			timer: null,
+			finishing: false
+		};
+		current = active;
+		applyStartPose(clone, flight);
+		opts.host.appendChild(clone);
+		if (hideTarget) hideTarget.style.visibility = "hidden";
+		let handle = {
+			done: playback.done,
+			cancel: () => {
+				if (current === active) abort(active);
+				else playback.cancel();
+			}
+		};
+		let finish = async (ran) => {
+			if (current !== active || active.finishing) return;
+			if (isCancelled()) {
+				abort(active);
+				return;
+			}
+			active.finishing = true;
+			if (active.timer != null) {
+				clearTimeout(active.timer);
+				active.timer = null;
+			}
+			if (opts.onLand) try {
+				await opts.onLand();
+			} catch {}
+			if (isCancelled() || current !== active) return;
+			current = null;
+			teardownDom(active);
+			resolve(ran);
+		};
+		(async () => {
+			await dualRaf();
+			if (current !== active) return;
+			if (isCancelled()) {
+				abort(active);
+				return;
+			}
+			let fromFrame = { transform: startTransform$1(flight) };
+			let toFrame = { transform: "translate3d(0, 0, 0) scale(1, 1)" };
+			if (opts.fadeOut) {
+				fromFrame.opacity = "1";
+				toFrame.opacity = "0";
+			}
+			if (opts.roundedStart || opts.roundedEnd) {
+				fromFrame.borderRadius = opts.roundedStart ? "12px" : "0px";
+				toFrame.borderRadius = opts.roundedEnd ? "12px" : "0px";
+			}
+			active.anim = animateElement(clone, [fromFrame, toFrame], {
+				duration: durationMs,
+				easing,
+				fill: "forwards"
+			});
+			active.timer = setTimeout(() => {
+				finish(true);
+			}, durationMs + 16);
+			if (active.anim) active.anim.finished.then(() => finish(true), () => void 0);
+		})();
+		return handle;
+	};
+	let play = (opts) => {
+		let flight = computeFlight(opts.from, opts.to);
+		if (!flight) {
+			cancel();
+			return null;
+		}
+		return start(opts, flight);
+	};
+	let playOpen = (opts) => {
+		let flight = computeOpenFlight({
+			thumb: opts.seed.rect,
+			naturalWidth: opts.seed.naturalWidth,
+			naturalHeight: opts.seed.naturalHeight,
+			objectFit: opts.seed.objectFit ?? "contain",
+			viewport: defaultViewport(opts.viewport),
+			insets: opts.insets,
+			to: opts.to
+		});
+		if (!flight) {
+			cancel();
+			return null;
+		}
+		return start({
+			host: opts.host,
+			from: opts.seed.rect,
+			to: flight.to,
+			imageUrl: opts.seed.imageUrl,
+			objectFit: "contain",
+			durationMs: opts.durationMs,
+			roundedStart: true,
+			roundedEnd: false,
+			hideTarget: opts.hideTarget,
+			onLand: opts.onLand
+		}, flight);
+	};
+	let playClose = (opts) => {
+		let imageUrl = opts.imageUrl ?? opts.target?.imageUrl ?? null;
+		if (!opts.target) return start({
+			host: opts.host,
+			from: opts.fromStage,
+			to: opts.fromStage,
+			imageUrl,
+			objectFit: "contain",
+			durationMs: opts.durationMs,
+			fadeOut: true,
+			roundedStart: false,
+			roundedEnd: false,
+			hideTarget: opts.hideTarget
+		}, {
+			to: { ...opts.fromStage },
+			fromTranslateX: 0,
+			fromTranslateY: 0,
+			fromScaleX: 1,
+			fromScaleY: 1
+		});
+		let thumb = opts.target.rect;
+		let viewport = defaultViewport(opts.viewport);
+		if (!isRectInViewport(thumb, viewport)) thumb = offViewportLandingRect(opts.fromStage, thumb, viewport.height);
+		let objectFit = opts.target.objectFit ?? "contain";
+		let flight = computeCloseFlight({
+			fromStage: opts.fromStage,
+			thumb,
+			objectFit
+		});
+		if (!flight) {
+			cancel();
+			return null;
+		}
+		return start({
+			host: opts.host,
+			from: opts.fromStage,
+			to: flight.to,
+			imageUrl,
+			objectFit,
+			durationMs: opts.durationMs,
+			fadeOut: opts.fadeOut ?? false,
+			roundedStart: false,
+			roundedEnd: true,
+			hideTarget: opts.hideTarget
+		}, flight);
+	};
+	return {
+		play,
+		playOpen,
+		playClose,
+		cancel
+	};
+}
+var defaultController = null;
+function playSharedElement(opts) {
+	if (!defaultController) defaultController = createSharedElement();
+	return defaultController.play(opts);
+}
+//#endregion
+//#region src/view-slide/transforms.ts
+var VIEW_SLIDE_FADE_OFFSET = "1.5rem";
+var VIEW_SLIDE_MS = 300;
+var VIEW_SLIDE_EASING = "cubic-bezier(0.25, 1, 0.5, 1)";
+var VIEW_SLIDE_COVER_MS = 250;
+var VIEW_SLIDE_COVER_EASING = "ease-in-out";
+var VIEW_SLIDE_ZOOM_MS = 150;
+var VIEW_SLIDE_ZOOM_EASING = "ease";
+var VIEW_SLIDE_REVEAL_MS = 350;
+var VIEW_SLIDE_REVEAL_EASING = "ease-in";
+function slideDirectionByIndex(from, to, items) {
+	let fromIndex = items.findIndex((item) => item.id === from);
+	let toIndex = items.findIndex((item) => item.id === to);
+	if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return null;
+	return toIndex > fromIndex ? "forward" : "back";
+}
+function resolveViewSlideMode(level, kind) {
+	if (level === "low") return "none";
+	if (level === "med") return "crossfade";
+	return kind === "layer" ? "cover" : "push";
+}
+function viewSlideDurationMs(mode) {
+	if (mode === "cover") return 250;
+	if (mode === "zoom") return 150;
+	if (mode === "reveal") return 350;
+	return 300;
+}
+function viewSlideEasing(mode) {
+	if (mode === "cover") return VIEW_SLIDE_COVER_EASING;
+	if (mode === "zoom") return VIEW_SLIDE_ZOOM_EASING;
+	if (mode === "reveal") return VIEW_SLIDE_REVEAL_EASING;
+	return VIEW_SLIDE_EASING;
+}
+function viewSlideTransforms(direction, mode) {
+	if (mode === "crossfade") {
+		let leave = direction === "forward" ? `-${VIEW_SLIDE_FADE_OFFSET}` : VIEW_SLIDE_FADE_OFFSET;
+		let enter = direction === "forward" ? VIEW_SLIDE_FADE_OFFSET : `-${VIEW_SLIDE_FADE_OFFSET}`;
+		return {
+			fromStart: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1"
+			},
+			fromEnd: {
+				transform: `translate3d(${leave}, 0, 0)`,
+				opacity: "0"
+			},
+			toStart: {
+				transform: `translate3d(${enter}, 0, 0)`,
+				opacity: "0"
+			},
+			toEnd: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1"
+			}
+		};
+	}
+	if (mode === "cover") {
+		if (direction === "forward") return {
+			fromStart: {
+				transform: "scale(1)",
+				opacity: "1"
+			},
+			fromEnd: {
+				transform: "scale(0.7)",
+				opacity: "0"
+			},
+			toStart: {
+				transform: "translateX(200%)",
+				opacity: "1"
+			},
+			toEnd: {
+				transform: "translateX(0)",
+				opacity: "1"
+			}
+		};
+		return {
+			fromStart: {
+				transform: "translateX(0)",
+				opacity: "1"
+			},
+			fromEnd: {
+				transform: "translateX(200%)",
+				opacity: "1"
+			},
+			toStart: {
+				transform: "scale(0.7)",
+				opacity: "0"
+			},
+			toEnd: {
+				transform: "scale(1)",
+				opacity: "1"
+			}
+		};
+	}
+	if (mode === "peek") {
+		if (direction === "forward") return {
+			fromStart: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1"
+			},
+			fromEnd: {
+				transform: "translate3d(-20%, 0, 0)",
+				opacity: "0.7"
+			},
+			toStart: {
+				transform: "translate3d(100%, 0, 0)",
+				opacity: "1"
+			},
+			toEnd: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1"
+			}
+		};
+		return {
+			fromStart: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1"
+			},
+			fromEnd: {
+				transform: "translate3d(100%, 0, 0)",
+				opacity: "1"
+			},
+			toStart: {
+				transform: "translate3d(-20%, 0, 0)",
+				opacity: "0.7"
+			},
+			toEnd: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1"
+			}
+		};
+	}
+	if (mode === "lift") {
+		if (direction === "forward") return {
+			fromStart: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1"
+			},
+			fromEnd: {
+				transform: "translate3d(0, -100%, 0)",
+				opacity: "1"
+			},
+			toStart: {
+				transform: "translate3d(0, 100%, 0)",
+				opacity: "1"
+			},
+			toEnd: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1"
+			}
+		};
+		return {
+			fromStart: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1"
+			},
+			fromEnd: {
+				transform: "translate3d(0, 100%, 0)",
+				opacity: "1"
+			},
+			toStart: {
+				transform: "translate3d(0, -100%, 0)",
+				opacity: "1"
+			},
+			toEnd: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1"
+			}
+		};
+	}
+	if (mode === "zoom") {
+		if (direction === "forward") return {
+			fromStart: {
+				transform: "scale(1)",
+				opacity: "1"
+			},
+			fromEnd: {
+				transform: "scale(0.95)",
+				opacity: "0"
+			},
+			toStart: {
+				transform: "scale(1.1)",
+				opacity: "0"
+			},
+			toEnd: {
+				transform: "scale(1)",
+				opacity: "1"
+			}
+		};
+		return {
+			fromStart: {
+				transform: "scale(1)",
+				opacity: "1"
+			},
+			fromEnd: {
+				transform: "scale(1.1)",
+				opacity: "0"
+			},
+			toStart: {
+				transform: "scale(0.95)",
+				opacity: "0"
+			},
+			toEnd: {
+				transform: "scale(1)",
+				opacity: "1"
+			}
+		};
+	}
+	if (mode === "reveal") {
+		if (direction === "forward") return {
+			fromStart: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1"
+			},
+			fromEnd: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1"
+			},
+			toStart: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1",
+				clipPath: "inset(0 100% 0 0)"
+			},
+			toEnd: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1",
+				clipPath: "inset(0 0 0 0)"
+			}
+		};
+		return {
+			fromStart: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1",
+				clipPath: "inset(0 0 0 0)"
+			},
+			fromEnd: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1",
+				clipPath: "inset(0 100% 0 0)"
+			},
+			toStart: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1"
+			},
+			toEnd: {
+				transform: "translate3d(0, 0, 0)",
+				opacity: "1"
+			}
+		};
+	}
+	if (direction === "forward") return {
+		fromStart: {
+			transform: "translate3d(0, 0, 0)",
+			opacity: "1"
+		},
+		fromEnd: {
+			transform: "translate3d(-100%, 0, 0)",
+			opacity: "1"
+		},
+		toStart: {
+			transform: "translate3d(100%, 0, 0)",
+			opacity: "1"
+		},
+		toEnd: {
+			transform: "translate3d(0, 0, 0)",
+			opacity: "1"
+		}
+	};
+	return {
+		fromStart: {
+			transform: "translate3d(0, 0, 0)",
+			opacity: "1"
+		},
+		fromEnd: {
+			transform: "translate3d(100%, 0, 0)",
+			opacity: "1"
+		},
+		toStart: {
+			transform: "translate3d(-100%, 0, 0)",
+			opacity: "1"
+		},
+		toEnd: {
+			transform: "translate3d(0, 0, 0)",
+			opacity: "1"
+		}
+	};
+}
+//#endregion
+//#region src/view-slide/session.ts
+var VIEW_SLIDE_SETTLE_SLACK_MS = 80;
+var PANEL_STYLE_KEYS$1 = [
+	"transform",
+	"opacity",
+	"will-change",
+	"clip-path"
+];
+function applyPanel(el, state) {
+	let styles = {
+		transform: state.transform,
+		opacity: state.opacity,
+		"will-change": state.clipPath != null ? "transform, opacity, clip-path" : "transform, opacity"
+	};
+	if (state.clipPath != null) styles["clip-path"] = state.clipPath;
+	applyStyles(el, styles);
+}
+function clearPanel(el) {
+	clearStyles(el, PANEL_STYLE_KEYS$1);
+}
+function createViewSlide(config) {
+	let mountPolicy = config.mountPolicy ?? "keep-visited";
+	let settleSlackMs = config.settleSlackMs ?? 80;
+	let resolveTransforms = config.transforms ?? viewSlideTransforms;
+	let resolveDuration = config.durationMs ?? viewSlideDurationMs;
+	let resolveEasing = config.easing ?? viewSlideEasing;
+	let mountedKeys = [];
+	let panelEls = /* @__PURE__ */ new Map();
+	let animating = false;
+	let leavingKey;
+	let lastRequestedKey;
+	let pending = null;
+	let pair = null;
+	let slideGen = 0;
+	let destroyed = false;
+	let isMounted = (key) => mountedKeys.includes(key);
+	let ensureMounted = (key) => {
+		if (!mountedKeys.includes(key)) mountedKeys = [...mountedKeys, key];
+	};
+	let retainOnly = (keys) => {
+		let wanted = keys.filter((key, index) => keys.indexOf(key) === index);
+		let ordered = mountedKeys.filter((key) => wanted.includes(key));
+		for (let key of wanted) if (!ordered.includes(key)) ordered.push(key);
+		mountedKeys = ordered;
+	};
+	let applyMountAfterSettle = (active) => {
+		if (mountPolicy === "keep-visited") return;
+		retainOnly([active]);
+	};
+	let isVisible = (key) => {
+		if (key === lastRequestedKey) return true;
+		return animating && key === leavingKey;
+	};
+	let role = (key) => {
+		if (animating) {
+			if (key === lastRequestedKey) return "entering";
+			if (key === leavingKey) return "leaving";
+			return "idle";
+		}
+		return key === lastRequestedKey ? "active" : "idle";
+	};
+	let detachPair = (active) => {
+		if (active.settleTimer != null) {
+			clearTimeout(active.settleTimer);
+			active.settleTimer = null;
+		}
+		active.fromAnim?.cancel();
+		active.toAnim?.cancel();
+		active.fromAnim = null;
+		active.toAnim = null;
+		active.fromEl.removeEventListener("transitionend", active.onEnd);
+		active.toEl.removeEventListener("transitionend", active.onEnd);
+		clearPanel(active.fromEl);
+		clearPanel(active.toEl);
+	};
+	let abortInFlight = () => {
+		pending = null;
+		if (!pair) return;
+		detachPair(pair);
+		pair = null;
+	};
+	let finishSlide = (gen, to) => {
+		if (gen !== slideGen || destroyed) return;
+		if (pair && pair.gen === gen) detachPair(pair);
+		pair = null;
+		pending = null;
+		animating = false;
+		leavingKey = void 0;
+		applyMountAfterSettle(to);
+	};
+	let abortToInstant = (from, to, gen) => {
+		if (gen !== slideGen || destroyed) return;
+		let fromEl = panelEls.get(from);
+		let toEl = panelEls.get(to);
+		if (fromEl) clearPanel(fromEl);
+		if (toEl) clearPanel(toEl);
+		animating = false;
+		leavingKey = void 0;
+		pending = null;
+		applyMountAfterSettle(to);
+	};
+	let performSlide = async (from, to, fromEl, toEl, dir, mode, gen) => {
+		if (gen !== slideGen || destroyed) return;
+		let tx = resolveTransforms(dir, mode);
+		let ms = resolveDuration(mode);
+		animating = true;
+		leavingKey = from;
+		applyPanel(fromEl, tx.fromStart);
+		applyPanel(toEl, tx.toStart);
+		fromEl.offsetWidth;
+		toEl.offsetWidth;
+		let onEnd = (event) => {
+			if (event.target !== toEl) return;
+			let propertyName = event.propertyName;
+			if (propertyName && propertyName !== "transform") return;
+			finishSlide(gen, to);
+		};
+		fromEl.addEventListener("transitionend", onEnd);
+		toEl.addEventListener("transitionend", onEnd);
+		let active = {
+			gen,
+			from,
+			to,
+			fromEl,
+			toEl,
+			fromAnim: null,
+			toAnim: null,
+			settleTimer: null,
+			onEnd
+		};
+		pair = active;
+		active.settleTimer = setTimeout(() => {
+			finishSlide(gen, to);
+		}, ms + settleSlackMs);
+		await dualRaf();
+		if (gen !== slideGen || destroyed || pair !== active) return;
+		let easing = resolveEasing(mode);
+		active.fromAnim = animateElement(fromEl, [tx.fromStart, tx.fromEnd], {
+			duration: ms,
+			easing,
+			fill: "forwards"
+		});
+		active.toAnim = animateElement(toEl, [tx.toStart, tx.toEnd], {
+			duration: ms,
+			easing,
+			fill: "forwards"
+		});
+		if (active.toAnim) active.toAnim.finished.then(() => finishSlide(gen, to), () => void 0);
+	};
+	/** Start the pair only after both panels have an attached node. */
+	let tryRunPending = () => {
+		if (!pending || destroyed) return;
+		let fromEl = panelEls.get(pending.from);
+		let toEl = panelEls.get(pending.to);
+		if (!fromEl || !toEl) return;
+		let { from, to, gen } = pending;
+		pending = null;
+		let mode = config.getMode();
+		let dir = config.getDirection(from, to);
+		if (!dir || mode === "none") {
+			abortToInstant(from, to, gen);
+			return;
+		}
+		performSlide(from, to, fromEl, toEl, dir, mode, gen);
+	};
+	let setActive = (key) => {
+		if (destroyed) return;
+		if (key === lastRequestedKey) return;
+		if (lastRequestedKey == null) {
+			lastRequestedKey = key;
+			if (key != null) ensureMounted(key);
+			return;
+		}
+		let from = lastRequestedKey;
+		lastRequestedKey = key;
+		slideGen++;
+		abortInFlight();
+		if (key == null) {
+			animating = false;
+			leavingKey = void 0;
+			if (mountPolicy !== "keep-visited") retainOnly([]);
+			return;
+		}
+		ensureMounted(from);
+		ensureMounted(key);
+		animating = true;
+		leavingKey = from;
+		pending = {
+			from,
+			to: key,
+			gen: slideGen
+		};
+		tryRunPending();
+	};
+	let attach = (el, key) => {
+		if (!destroyed) {
+			panelEls.set(key, el);
+			tryRunPending();
+		}
+		return {
+			update: (next) => {
+				if (destroyed || next === key) return;
+				if (pair && (pair.from === key || pair.to === key) || pending && (pending.from === key || pending.to === key)) {
+					slideGen++;
+					abortInFlight();
+					animating = false;
+					leavingKey = void 0;
+				}
+				if (panelEls.get(key) === el) panelEls.delete(key);
+				key = next;
+				panelEls.set(key, el);
+				tryRunPending();
+			},
+			destroy: () => {
+				if (panelEls.get(key) === el) panelEls.delete(key);
+			}
+		};
+	};
+	let cancel = () => {
+		if (destroyed) return;
+		slideGen++;
+		abortInFlight();
+		animating = false;
+		leavingKey = void 0;
+		if (lastRequestedKey != null && mountPolicy !== "keep-visited") applyMountAfterSettle(lastRequestedKey);
+	};
+	let destroy = () => {
+		if (destroyed) return;
+		destroyed = true;
+		slideGen++;
+		abortInFlight();
+		for (let el of panelEls.values()) clearPanel(el);
+		animating = false;
+		leavingKey = void 0;
+		lastRequestedKey = void 0;
+		pending = null;
+		pair = null;
+		panelEls.clear();
+		mountedKeys = [];
+	};
+	return {
+		get mountedKeys() {
+			return mountedKeys;
+		},
+		get animating() {
+			return animating;
+		},
+		get leavingKey() {
+			return leavingKey;
+		},
+		setActive,
+		attach,
+		isMounted,
+		isVisible,
+		role,
+		cancel,
+		destroy
+	};
+}
+//#endregion
+//#region src/sliding-indicator/indicator.ts
+var INDICATOR_MS = 300;
+var INDICATOR_EASING = "cubic-bezier(0.25, 1, 0.5, 1)";
+function translate3d(left, top) {
+	return `translate3d(${left}px, ${top}px, 0)`;
+}
+function createSlidingIndicator(options) {
+	let durationMs = options.durationMs ?? 300;
+	let easing = options.easing ?? "cubic-bezier(0.25, 1, 0.5, 1)";
+	let laidOut = false;
+	let prevLeft = 0;
+	let prevTop = 0;
+	let currentAnim = null;
+	let destroyed = false;
+	let observedTrack = null;
+	let cancelAnim = () => {
+		if (!currentAnim) return;
+		currentAnim.cancel();
+		currentAnim = null;
+	};
+	let measure = () => {
+		if (destroyed) return;
+		let track = options.getTrack();
+		if (track && track !== observedTrack) {
+			if (observedTrack) observer.unobserve(observedTrack);
+			observer.observe(track);
+			observedTrack = track;
+		}
+		let indicator = options.getIndicator();
+		let active = options.getActive();
+		if (!indicator || !active) return;
+		let left = active.offsetLeft;
+		let top = active.offsetTop;
+		let width = active.offsetWidth;
+		let height = active.offsetHeight;
+		let next = translate3d(left, top);
+		let shouldAnimate = laidOut && (options.enabled?.() ?? true);
+		applyStyles(indicator, {
+			width: `${width}px`,
+			height: `${height}px`
+		});
+		if (!shouldAnimate) {
+			cancelAnim();
+			applyStyles(indicator, { transform: next });
+			prevLeft = left;
+			prevTop = top;
+			laidOut = true;
+			return;
+		}
+		let from = translate3d(prevLeft, prevTop);
+		cancelAnim();
+		applyStyles(indicator, { transform: next });
+		currentAnim = animateElement(indicator, [{ transform: from }, { transform: next }], {
+			duration: durationMs,
+			easing,
+			fill: "forwards"
+		});
+		prevLeft = left;
+		prevTop = top;
+	};
+	let observer = new ResizeObserver(() => {
+		measure();
+	});
+	let initialTrack = options.getTrack();
+	if (initialTrack) {
+		observer.observe(initialTrack);
+		observedTrack = initialTrack;
+	}
+	let destroy = () => {
+		if (destroyed) return;
+		destroyed = true;
+		cancelAnim();
+		observer.disconnect();
+		observedTrack = null;
+	};
+	return {
+		measure,
+		destroy
+	};
+}
+//#endregion
+//#region src/list-reorder/classify.ts
+/** orderDiff = newIndex − oldIndex for keys in curr; new keys → −Infinity. */
+function buildOrderDiff(prev, curr) {
+	let diff = /* @__PURE__ */ new Map();
+	for (let [key, newIdx] of curr) {
+		let oldIdx = prev.get(key);
+		if (oldIdx === void 0) {
+			diff.set(key, -Infinity);
+			continue;
+		}
+		diff.set(key, newIdx - oldIdx);
+	}
+	return diff;
+}
+/**
+* Majority vertical direction → move; minority / non-finite → opacity; zero → none.
+* Adjacent swap (1 up, 1 down): up is opacity, down is move.
+*/
+function classifyReorderAnim(orderDiffByKey, key) {
+	let orderDiff = orderDiffByKey.get(key);
+	if (orderDiff === void 0 || orderDiff === 0) return "none";
+	if (!Number.isFinite(orderDiff)) return "opacity";
+	let numberOfUp = 0;
+	let numberOfDown = 0;
+	for (let d of orderDiffByKey.values()) {
+		if (!Number.isFinite(d) || d === 0) continue;
+		if (d < 0) numberOfUp++;
+		else if (d > 0) numberOfDown++;
+	}
+	if (numberOfUp <= numberOfDown && orderDiff < 0 || numberOfDown < numberOfUp && orderDiff > 0) return "opacity";
+	return "move";
+}
+//#endregion
+//#region src/list-reorder/reorder.ts
+var LIST_REORDER_MS = 200;
+var LIST_REORDER_EASING = "ease-out";
+var LIST_REORDER_EPSILON_PX = 1;
+function createListReorder(options) {
+	let durationMs = options.durationMs ?? 200;
+	let easing = options.easing ?? "ease-out";
+	let isEnabled = options.isEnabled ?? (() => true);
+	let isReduced = options.isReduced ?? (() => false);
+	let isSuppressed = options.isSuppressed ?? (() => false);
+	let itemEls = /* @__PURE__ */ new Map();
+	let activeAnims = /* @__PURE__ */ new Map();
+	let prevIndexByKey = null;
+	let destroyed = false;
+	let buildIndexMap = (items) => {
+		let map = /* @__PURE__ */ new Map();
+		for (let i = 0; i < items.length; i++) map.set(options.getKey(items[i], i), i);
+		return map;
+	};
+	let cancelAnim = (key) => {
+		let anim = activeAnims.get(key);
+		if (!anim) return;
+		anim.cancel();
+		activeAnims.delete(key);
+	};
+	let cancelAll = () => {
+		for (let key of [...activeAnims.keys()]) cancelAnim(key);
+	};
+	let register = (el, key) => {
+		if (destroyed) return {
+			update: () => {},
+			destroy: () => {}
+		};
+		itemEls.set(key, el);
+		return {
+			update: (next) => {
+				if (destroyed || next === key) return;
+				cancelAnim(key);
+				if (itemEls.get(key) === el) itemEls.delete(key);
+				key = next;
+				itemEls.set(key, el);
+			},
+			destroy: () => {
+				if (itemEls.get(key) === el) itemEls.delete(key);
+				cancelAnim(key);
+			}
+		};
+	};
+	let sync = (items) => {
+		if (destroyed) return;
+		if (!isEnabled() || isReduced()) {
+			prevIndexByKey = null;
+			return;
+		}
+		let curr = buildIndexMap(items);
+		let prev = prevIndexByKey;
+		let suppressed = isSuppressed();
+		if (prev && !suppressed) {
+			let orderDiffByKey = buildOrderDiff(prev, curr);
+			let itemHeight = options.getItemHeight();
+			for (let [key, el] of itemEls) {
+				let kind = classifyReorderAnim(orderDiffByKey, key);
+				if (kind === "none") continue;
+				cancelAnim(key);
+				let anim;
+				if (kind === "opacity") anim = animateElement(el, [{ opacity: 0 }, { opacity: 1 }], {
+					duration: durationMs,
+					easing
+				});
+				else {
+					let delta = -(orderDiffByKey.get(key) ?? 0) * itemHeight;
+					if (Math.abs(delta) <= 1) continue;
+					anim = animateElement(el, [{ transform: `translateY(${delta}px)` }, { transform: "translateY(0)" }], {
+						duration: durationMs,
+						easing
+					});
+				}
+				if (!anim) continue;
+				activeAnims.set(key, anim);
+				let captured = anim;
+				anim.finished.then(() => {
+					if (activeAnims.get(key) === captured) activeAnims.delete(key);
+				}).catch(() => {});
+			}
+		}
+		prevIndexByKey = curr;
+	};
+	let cancel = () => {
+		cancelAll();
+	};
+	let destroy = () => {
+		if (destroyed) return;
+		destroyed = true;
+		cancelAll();
+		itemEls.clear();
+		prevIndexByKey = null;
+	};
+	return {
+		register,
+		sync,
+		cancel,
+		destroy
+	};
+}
+//#endregion
+//#region src/fade/fade.ts
+var FADE_MS = 120;
+var FADE_EASING = "ease-out";
+var STYLE_KEYS$1 = ["will-change"];
+function createFade(el, options) {
+	let durationMs = options?.durationMs ?? 120;
+	let easing = options?.easing ?? "ease-out";
+	let lastVisible;
+	let current = null;
+	let stopCurrent = () => {
+		if (!current) return;
+		current.anim?.cancel();
+		current.resolve(false);
+		current = null;
+	};
+	let setVisible = (visible) => {
+		if (lastVisible === visible && !current) {
+			let { playback, resolve } = createPlayback();
+			resolve(true);
+			return playback;
+		}
+		stopCurrent();
+		lastVisible = visible;
+		let { playback, resolve, isCancelled } = createPlayback();
+		let from = visible ? "0" : "1";
+		let to = visible ? "1" : "0";
+		if (durationMs <= 0) {
+			applyStyles(el, { opacity: to });
+			resolve(true);
+			return playback;
+		}
+		applyStyles(el, {
+			opacity: from,
+			"will-change": "opacity"
+		});
+		let anim = animateElement(el, [{ opacity: from }, { opacity: to }], {
+			duration: durationMs,
+			easing,
+			fill: "forwards"
+		});
+		let run = {
+			anim,
+			resolve
+		};
+		current = run;
+		let finish = (ran) => {
+			if (current !== run) return;
+			current = null;
+			clearStyles(el, STYLE_KEYS$1);
+			applyStyles(el, { opacity: to });
+			resolve(ran);
+		};
+		let cancel = playback.cancel;
+		playback.cancel = () => {
+			if (current === run) {
+				anim?.cancel();
+				current = null;
+				clearStyles(el, STYLE_KEYS$1);
+			}
+			cancel();
+		};
+		if (!anim) {
+			finish(true);
+			return playback;
+		}
+		anim.finished.then(() => finish(true), () => {
+			if (!isCancelled() && current === run) finish(false);
+		});
+		return playback;
+	};
+	return { setVisible };
+}
+//#endregion
+//#region src/dock/transforms.ts
+var DOCK_FADE_OFFSET = "1.5rem";
+var DOCK_MS = 300;
+var DOCK_EASING = "cubic-bezier(0.25, 1, 0.5, 1)";
+function isVertical(edge) {
+	return edge === "top" || edge === "bottom";
+}
+function isNegative(edge) {
+	return edge === "left" || edge === "top";
+}
+function translate(edge, value) {
+	return `translate${isVertical(edge) ? "Y" : "X"}(${value})`;
+}
+function dockTransforms(mode, edge) {
+	let axisZero = translate(edge, "0");
+	if (mode === "fade") return {
+		closed: {
+			transform: translate(edge, isNegative(edge) ? `-${DOCK_FADE_OFFSET}` : DOCK_FADE_OFFSET),
+			opacity: "0"
+		},
+		open: {
+			transform: axisZero,
+			opacity: "1"
+		}
+	};
+	return {
+		closed: {
+			transform: translate(edge, isNegative(edge) ? "-100%" : "100%"),
+			opacity: "1"
+		},
+		open: {
+			transform: axisZero,
+			opacity: "1"
+		}
+	};
+}
+//#endregion
+//#region src/dock/dock.ts
+var PANEL_STYLE_KEYS = [
+	"transform",
+	"opacity",
+	"will-change"
+];
+var BACKDROP_STYLE_KEYS = ["opacity", "will-change"];
+function createDock(config) {
+	let edge = config.edge ?? "right";
+	let durationMs = config.durationMs ?? 300;
+	let easing = config.easing ?? "cubic-bezier(0.25, 1, 0.5, 1)";
+	let mounted = false;
+	let leaving = false;
+	let animating = false;
+	let wantOpen = false;
+	let destroyed = false;
+	let panel = null;
+	let backdrop = null;
+	let active = null;
+	let applyPanel = (el, state) => {
+		applyStyles(el, {
+			transform: state.transform,
+			opacity: state.opacity,
+			"will-change": "transform, opacity"
+		});
+	};
+	let clearPanel = () => {
+		if (panel) clearStyles(panel, PANEL_STYLE_KEYS);
+	};
+	let clearBackdrop = () => {
+		if (backdrop) clearStyles(backdrop, BACKDROP_STYLE_KEYS);
+	};
+	let abortActive = () => {
+		if (!active) return;
+		active.panelAnim?.cancel();
+		active.backdropAnim?.cancel();
+		let resolve = active.resolve;
+		active = null;
+		resolve(false);
+	};
+	let settleInstant = (open) => {
+		wantOpen = open;
+		mounted = open;
+		leaving = false;
+		animating = false;
+		if (open) {
+			if (backdrop) applyStyles(backdrop, { opacity: "1" });
+			return;
+		}
+		clearPanel();
+		clearBackdrop();
+	};
+	let finish = (run, ran) => {
+		if (active !== run) return;
+		active = null;
+		animating = false;
+		leaving = false;
+		if (wantOpen) {
+			mounted = true;
+			if (panel) {
+				applyPanel(panel, dockTransforms(run.mode, edge).open);
+				clearStyles(panel, ["will-change"]);
+			}
+			if (backdrop) {
+				applyStyles(backdrop, { opacity: "1" });
+				clearStyles(backdrop, ["will-change"]);
+			}
+		} else {
+			mounted = false;
+			clearPanel();
+			clearBackdrop();
+		}
+		run.resolve(ran);
+	};
+	let animatePair = (run) => {
+		let tx = dockTransforms(run.mode, edge);
+		let from = run.opening ? tx.closed : tx.open;
+		let to = run.opening ? tx.open : tx.closed;
+		if (panel) run.panelAnim = animateElement(panel, [from, to], {
+			duration: durationMs,
+			easing,
+			fill: "forwards"
+		});
+		if (backdrop) run.backdropAnim = animateElement(backdrop, run.opening ? [{ opacity: "0" }, { opacity: "1" }] : [{ opacity: "1" }, { opacity: "0" }], {
+			duration: durationMs,
+			easing,
+			fill: "forwards"
+		});
+		let waiter = run.panelAnim ?? run.backdropAnim;
+		if (!waiter) {
+			finish(run, true);
+			return;
+		}
+		waiter.finished.then(() => finish(run, true), () => void 0);
+	};
+	let performOpen = async (run) => {
+		await dualRaf();
+		if (active !== run || destroyed || run.isCancelled()) return;
+		animatePair(run);
+	};
+	let kick = (run) => {
+		if (run.started || run !== active || destroyed) return;
+		if (run.opening) {
+			if (!panel && !backdrop) return;
+			run.started = true;
+			let tx = dockTransforms(run.mode, edge);
+			if (panel) {
+				applyPanel(panel, tx.closed);
+				panel.offsetWidth;
+			}
+			if (backdrop) applyStyles(backdrop, {
+				opacity: "0",
+				"will-change": "opacity"
+			});
+			performOpen(run);
+			return;
+		}
+		if (!panel && !backdrop) {
+			finish(run, true);
+			return;
+		}
+		run.started = true;
+		if (panel) {
+			applyPanel(panel, dockTransforms(run.mode, edge).open);
+			panel.offsetWidth;
+		}
+		if (backdrop) applyStyles(backdrop, {
+			opacity: "1",
+			"will-change": "opacity"
+		});
+		animatePair(run);
+	};
+	let bindCancel = (run) => {
+		let cancel = run.playback.cancel;
+		run.playback.cancel = () => {
+			if (active === run) {
+				run.panelAnim?.cancel();
+				run.backdropAnim?.cancel();
+				active = null;
+				animating = false;
+				leaving = false;
+				if (!wantOpen) {
+					mounted = false;
+					clearPanel();
+					clearBackdrop();
+				}
+			}
+			cancel();
+		};
+	};
+	let setOpen = (open) => {
+		if (destroyed) {
+			let { playback, resolve } = createPlayback();
+			resolve(false);
+			return playback;
+		}
+		if (open === wantOpen && mounted === open && !animating) {
+			let { playback, resolve } = createPlayback();
+			resolve(true);
+			return playback;
+		}
+		abortActive();
+		wantOpen = open;
+		let mode = config.getMode();
+		if (mode === "none" || durationMs <= 0) {
+			let { playback, resolve } = createPlayback();
+			settleInstant(open);
+			resolve(true);
+			return playback;
+		}
+		let { playback, resolve, isCancelled } = createPlayback();
+		mounted = true;
+		leaving = !open;
+		animating = true;
+		let run = {
+			opening: open,
+			mode,
+			playback,
+			resolve,
+			isCancelled,
+			panelAnim: null,
+			backdropAnim: null,
+			started: false
+		};
+		active = run;
+		bindCancel(run);
+		kick(run);
+		return playback;
+	};
+	let attach = (el) => {
+		if (!destroyed) {
+			panel = el;
+			if (active) kick(active);
+		}
+		return { destroy: () => {
+			if (panel === el) panel = null;
+		} };
+	};
+	let attachBackdrop = (el) => {
+		if (!destroyed) {
+			backdrop = el;
+			if (active) kick(active);
+		}
+		return { destroy: () => {
+			if (backdrop === el) backdrop = null;
+		} };
+	};
+	let destroy = () => {
+		if (destroyed) return;
+		destroyed = true;
+		abortActive();
+		clearPanel();
+		clearBackdrop();
+		mounted = false;
+		leaving = false;
+		animating = false;
+		wantOpen = false;
+		panel = null;
+		backdrop = null;
+	};
+	return {
+		get mounted() {
+			return mounted;
+		},
+		get leaving() {
+			return leaving;
+		},
+		get animating() {
+			return animating;
+		},
+		setOpen,
+		attach,
+		attachBackdrop,
+		destroy
+	};
+}
+//#endregion
+//#region src/popover/popover.ts
+var POPOVER_MS = 120;
+var POPOVER_EASING = "ease-out";
+var POPOVER_ORIGIN = "center top";
+var CLOSED = {
+	transform: "scale(0.92)",
+	opacity: "0"
+};
+var OPEN = {
+	transform: "scale(1)",
+	opacity: "1"
+};
+var STYLE_KEYS = ["will-change"];
+function createPopover() {
+	let lastOrigin = POPOVER_ORIGIN;
+	let current = null;
+	let stopCurrent = () => {
+		if (!current) return;
+		current.anim?.cancel();
+		current.resolve(false);
+		current = null;
+	};
+	let play = (el, opening, options) => {
+		stopCurrent();
+		let { playback, resolve, isCancelled } = createPlayback();
+		let durationMs = options?.durationMs ?? 120;
+		let easing = options?.easing ?? "ease-out";
+		if (options?.origin != null) lastOrigin = options.origin;
+		applyStyles(el, { "transform-origin": options?.origin ?? lastOrigin });
+		let from = opening ? CLOSED : OPEN;
+		let to = opening ? OPEN : CLOSED;
+		if (durationMs <= 0) {
+			applyStyles(el, {
+				transform: to.transform,
+				opacity: to.opacity
+			});
+			resolve(true);
+			return playback;
+		}
+		applyStyles(el, {
+			transform: from.transform,
+			opacity: from.opacity,
+			"will-change": "transform, opacity"
+		});
+		let anim = animateElement(el, [from, to], {
+			duration: durationMs,
+			easing,
+			fill: "forwards"
+		});
+		let run = {
+			anim,
+			resolve
+		};
+		current = run;
+		let finish = (ran) => {
+			if (current !== run) return;
+			current = null;
+			clearStyles(el, STYLE_KEYS);
+			applyStyles(el, {
+				transform: to.transform,
+				opacity: to.opacity
+			});
+			resolve(ran);
+		};
+		let cancel = playback.cancel;
+		playback.cancel = () => {
+			if (current === run) {
+				anim?.cancel();
+				current = null;
+				clearStyles(el, STYLE_KEYS);
+			}
+			cancel();
+		};
+		if (!anim) {
+			finish(true);
+			return playback;
+		}
+		anim.finished.then(() => finish(true), () => {
+			if (!isCancelled() && current === run) finish(false);
+		});
+		return playback;
+	};
+	return {
+		playOpen: (el, options) => play(el, true, options),
+		playClose: (el, options) => play(el, false, options)
+	};
+}
+//#endregion
+//#region src/digit-flip/slots.ts
+var DIGIT_FLIP_MS = 200;
+var MAX_SIMULTANEOUS_DIGIT_FLIPS = 10;
+function buildDigitSlots(text, prevText, shouldAnimate) {
+	if (!shouldAnimate || prevText === void 0 || prevText === text) return [...text].map((char) => ({
+		kind: "static",
+		char
+	}));
+	let slots = [];
+	let textLength = text.length;
+	let prevLength = prevText.length;
+	for (let i = 0; i < textLength; i++) {
+		let charIndex = textLength - 1 - i;
+		let prevIndex = prevLength - 1 - i;
+		let char = text[charIndex];
+		let prevChar = prevIndex >= 0 ? prevText[prevIndex] : "";
+		if (char !== prevChar) slots.unshift({
+			kind: "flip",
+			char,
+			prevChar
+		});
+		else slots.unshift({
+			kind: "static",
+			char
+		});
+	}
+	return slots;
+}
+function formatCounterText(value) {
+	let n = Math.max(0, Math.floor(value));
+	return n >= 1e3 ? "999+" : String(n);
+}
+function shouldPresencePop(prev, next) {
+	return prev === 0 && next > 0;
+}
+var scheduled = 0;
+var resetQueued = false;
+function scheduleDigitFlip(condition) {
+	if (!condition || scheduled >= 10) return false;
+	if (!resetQueued) {
+		resetQueued = true;
+		setTimeout(() => {
+			scheduled = 0;
+			resetQueued = false;
+		}, 0);
+	}
+	scheduled += 1;
+	return true;
+}
+//#endregion
+//#region src/digit-flip/play.ts
+var DIGIT_FLIP_EASING = "ease";
+var PRESENCE_POP_MS = 200;
+var PRESENCE_POP_EASING = "ease";
+function playTransform(el, frames, options, fallbackMs = 200, fallbackEasing = DIGIT_FLIP_EASING) {
+	let { playback, resolve } = createPlayback();
+	let anim = animateElement(el, frames, {
+		duration: options?.durationMs ?? fallbackMs,
+		easing: options?.easing ?? fallbackEasing,
+		fill: "forwards"
+	});
+	if (!anim) {
+		resolve(true);
+		return playback;
+	}
+	let cancel = playback.cancel;
+	playback.cancel = () => {
+		anim.cancel();
+		cancel();
+	};
+	anim.finished.then(() => resolve(true), () => resolve(false));
+	return playback;
+}
+function playDigitFlip(el, options) {
+	return playTransform(el, [{ transform: "rotateX(90deg)" }, { transform: "rotateX(0deg)" }], options);
+}
+function playPresencePop(el, options) {
+	return playTransform(el, [{
+		transform: "scale(0.6)",
+		opacity: "0"
+	}, {
+		transform: "scale(1)",
+		opacity: "1"
+	}], options, 200, PRESENCE_POP_EASING);
+}
+//#endregion
+//#region src/send-flight/flight.ts
+var SEND_FLIGHT_MS = 200;
+var SEND_FLIGHT_EASING = "ease";
+function startTransform(tx, ty, sx, sy) {
+	return `translate3d(${tx}px, ${ty}px, 0) scale(${sx}, ${sy})`;
+}
+function createImageClone(imageUrl) {
+	let img = document.createElement("img");
+	img.src = imageUrl;
+	img.alt = "";
+	img.draggable = false;
+	return img;
+}
+function playSendFlight(options) {
+	let flight = computeFlight(options.from, options.to);
+	if (!flight) return null;
+	let clone = options.node ? options.node.cloneNode(true) : createImageClone(options.imageUrl ?? "");
+	applyStyles(clone, {
+		position: "fixed",
+		top: `${flight.to.top}px`,
+		left: `${flight.to.left}px`,
+		width: `${flight.to.width}px`,
+		height: `${flight.to.height}px`,
+		"transform-origin": "center center",
+		"pointer-events": "none",
+		"z-index": "2147483646",
+		transform: startTransform(flight.fromTranslateX, flight.fromTranslateY, flight.fromScaleX, flight.fromScaleY)
+	});
+	options.host.appendChild(clone);
+	let { playback, resolve } = createPlayback();
+	let durationMs = options.durationMs ?? 200;
+	let easing = options.easing ?? "ease";
+	let anim = animateElement(clone, [{ transform: startTransform(flight.fromTranslateX, flight.fromTranslateY, flight.fromScaleX, flight.fromScaleY) }, { transform: "translate3d(0, 0, 0) scale(1, 1)" }], {
+		duration: durationMs,
+		easing,
+		fill: "forwards"
+	});
+	let teardown = () => {
+		if (clone.parentNode) clone.remove();
+	};
+	let cancel = playback.cancel;
+	playback.cancel = () => {
+		anim?.cancel();
+		teardown();
+		cancel();
+	};
+	let finish = (ran) => {
+		teardown();
+		resolve(ran);
+	};
+	if (!anim) {
+		finish(true);
+		return playback;
+	}
+	anim.finished.then(() => finish(true), () => finish(false));
+	return playback;
+}
+//#endregion
+//#region src/swipe-reveal/swipe.ts
+var SWIPE_THRESHOLD = 56;
+var SWIPE_MAX = 80;
+var SWIPE_TWEEN_MS = 200;
+function shouldCommitSwipe(offset, threshold) {
+	return offset >= threshold;
+}
+function rubberSwipeOffset(delta, max) {
+	if (delta <= 0) return 0;
+	if (delta <= max) return delta;
+	let overflow = delta - max;
+	return max + overflow / (1 + overflow / max);
+}
+function applyOffset(el, offset) {
+	el.style.setProperty("transform", `translateX(${offset}px)`);
+}
+function createSwipeReveal(el, options) {
+	let threshold = options.threshold ?? 56;
+	let max = options.max ?? 80;
+	let dragging = false;
+	let startX = 0;
+	let current = 0;
+	let playback = null;
+	let stopTween = () => {
+		if (!playback) return;
+		playback.cancel();
+		playback = null;
+	};
+	let settleTo = (target) => {
+		stopTween();
+		let run = tween({
+			from: current,
+			to: target,
+			durationMs: options.durationMs ?? 200,
+			onUpdate: (value) => {
+				current = value;
+				applyOffset(el, value);
+			}
+		});
+		playback = run;
+		run.done.then(() => {
+			if (playback === run) playback = null;
+		});
+	};
+	let onPointerDown = (event) => {
+		stopTween();
+		dragging = true;
+		startX = event.clientX - current;
+		if (typeof el.setPointerCapture === "function") el.setPointerCapture(event.pointerId);
+	};
+	let onPointerMove = (event) => {
+		if (!dragging) return;
+		current = rubberSwipeOffset(event.clientX - startX, max);
+		applyOffset(el, current);
+	};
+	let onPointerUp = (event) => {
+		if (!dragging) return;
+		dragging = false;
+		if (typeof el.releasePointerCapture === "function") try {
+			el.releasePointerCapture(event.pointerId);
+		} catch {}
+		if (shouldCommitSwipe(current, threshold)) {
+			options.onCommit();
+			settleTo(max);
+		} else settleTo(0);
+	};
+	el.addEventListener("pointerdown", onPointerDown);
+	el.addEventListener("pointermove", onPointerMove);
+	el.addEventListener("pointerup", onPointerUp);
+	el.addEventListener("pointercancel", onPointerUp);
+	return { destroy: () => {
+		stopTween();
+		dragging = false;
+		el.removeEventListener("pointerdown", onPointerDown);
+		el.removeEventListener("pointermove", onPointerMove);
+		el.removeEventListener("pointerup", onPointerUp);
+		el.removeEventListener("pointercancel", onPointerUp);
+	} };
+}
+//#endregion
+//#region src/scroll-tween/scroll.ts
+var SCROLL_TWEEN_MS = 200;
+function playScrollTween(el, options) {
+	let fromLeft = el.scrollLeft;
+	let fromTop = el.scrollTop;
+	let toLeft = options.left ?? fromLeft;
+	let toTop = options.top ?? fromTop;
+	return tween({
+		from: 0,
+		to: 1,
+		durationMs: options.durationMs ?? 200,
+		onUpdate: (t) => {
+			if (options.left != null) el.scrollLeft = lerp(fromLeft, toLeft, t);
+			if (options.top != null) el.scrollTop = lerp(fromTop, toTop, t);
+		}
+	});
+}
+//#endregion
+//#region src/ripple/ripple.ts
+var RIPPLE_MS = 400;
+var RIPPLE_EASING = "ease-out";
+var RIPPLE_COLOR = "currentColor";
+var RIPPLE_SIZE_PX = 48;
+function playRipple(host, options) {
+	let { playback, resolve } = createPlayback();
+	let durationMs = options.durationMs ?? 400;
+	let easing = options.easing ?? "ease-out";
+	let ink = document.createElement("span");
+	applyStyles(ink, {
+		position: "absolute",
+		left: `${options.x}px`,
+		top: `${options.y}px`,
+		width: `48px`,
+		height: `48px`,
+		"border-radius": "50%",
+		background: options.color ?? "currentColor",
+		"pointer-events": "none",
+		"transform-origin": "center center"
+	});
+	host.appendChild(ink);
+	let anim = animateElement(ink, [{
+		transform: "translate(-50%, -50%) scale(0)",
+		opacity: "1"
+	}, {
+		transform: "translate(-50%, -50%) scale(1)",
+		opacity: "0"
+	}], {
+		duration: durationMs,
+		easing,
+		fill: "forwards"
+	});
+	let teardown = () => {
+		if (ink.parentNode) ink.remove();
+	};
+	let cancel = playback.cancel;
+	playback.cancel = () => {
+		anim?.cancel();
+		teardown();
+		cancel();
+	};
+	let finish = (ran) => {
+		teardown();
+		resolve(ran);
+	};
+	if (!anim) {
+		finish(true);
+		return playback;
+	}
+	anim.finished.then(() => finish(true), () => finish(false));
+	return playback;
+}
+//#endregion
+//#region src/pinch-zoom/math.ts
+var PINCH_MIN_SCALE = 1;
+var PINCH_MAX_SCALE = 20;
+var PINCH_WHEEL_FACTOR = .01;
+function clampScale(scale, min, max) {
+	if (!Number.isFinite(scale)) return min;
+	if (scale < min) return min;
+	if (scale > max) return max;
+	return scale;
+}
+function clampNumber(value, min, max) {
+	let next = value;
+	if (next < min) next = min;
+	if (next > max) next = max;
+	return next === 0 ? 0 : next;
+}
+function maxTranslate(scale, layoutW, layoutH, viewportW, viewportH) {
+	return {
+		translateX: Math.max(0, (layoutW * scale - viewportW) / 2),
+		translateY: Math.max(0, (layoutH * scale - viewportH) / 2)
+	};
+}
+function boundTranslate(translateX, translateY, scale, layoutW, layoutH, viewportW, viewportH) {
+	let bounds = maxTranslate(scale, layoutW, layoutH, viewportW, viewportH);
+	return {
+		translateX: clampNumber(translateX, -bounds.translateX, bounds.translateX),
+		translateY: clampNumber(translateY, -bounds.translateY, bounds.translateY)
+	};
+}
+function boundState(state, layoutW, layoutH, viewportW, viewportH) {
+	let bounded = boundTranslate(state.translateX, state.translateY, state.scale, layoutW, layoutH, viewportW, viewportH);
+	return {
+		scale: state.scale,
+		translateX: bounded.translateX,
+		translateY: bounded.translateY
+	};
+}
+function zoomAtOrigin(state, nextScale, origin, layoutW, layoutH, viewportW, viewportH, minScale = 1, maxScale = 20) {
+	let scale = clampScale(nextScale, minScale, maxScale);
+	if (scale === state.scale) return boundState(state, layoutW, layoutH, viewportW, viewportH);
+	let originX = origin?.offsetX ?? 0;
+	let originY = origin?.offsetY ?? 0;
+	let ratio = scale / state.scale;
+	return boundState({
+		scale,
+		translateX: state.translateX + originX * (1 - ratio),
+		translateY: state.translateY + originY * (1 - ratio)
+	}, layoutW, layoutH, viewportW, viewportH);
+}
+function resetZoom() {
+	return {
+		scale: 1,
+		translateX: 0,
+		translateY: 0
+	};
+}
+function zoomTransform(state) {
+	return `translate3d(${state.translateX}px, ${state.translateY}px, 0) scale(${state.scale})`;
+}
+function nextScaleFromWheel(scale, deltaY, minScale = 1, maxScale = 20) {
+	return clampScale(scale * Math.exp(-deltaY * PINCH_WHEEL_FACTOR), minScale, maxScale);
+}
+//#endregion
+//#region src/pinch-zoom/pinch.ts
+function applyState(el, state) {
+	applyStyles(el, {
+		transform: zoomTransform(state),
+		"transform-origin": "0 0"
+	});
+}
+function createPinchZoom(config) {
+	let state = resetZoom();
+	let el = config.getEl();
+	let sizes = () => ({
+		layout: config.getLayout(),
+		viewport: config.getViewport()
+	});
+	let commit = (next) => {
+		let { layout, viewport } = sizes();
+		let scale = clampScale(next.scale, 1, 20);
+		let bounded = boundTranslate(next.translateX, next.translateY, scale, layout.width, layout.height, viewport.width, viewport.height);
+		state = {
+			scale,
+			translateX: bounded.translateX,
+			translateY: bounded.translateY
+		};
+		let node = config.getEl();
+		if (node) applyState(node, state);
+		return state;
+	};
+	let onWheel = (event) => {
+		let node = config.getEl();
+		if (!node) return;
+		let { layout, viewport } = sizes();
+		if (event.ctrlKey || event.metaKey) {
+			event.preventDefault();
+			state = zoomAtOrigin(state, nextScaleFromWheel(state.scale, event.deltaY), {
+				offsetX: event.offsetX,
+				offsetY: event.offsetY
+			}, layout.width, layout.height, viewport.width, viewport.height);
+			applyState(node, state);
+			return;
+		}
+		if (state.scale <= 1) return;
+		event.preventDefault();
+		let pan = boundTranslate(state.translateX - event.deltaX, state.translateY - event.deltaY, state.scale, layout.width, layout.height, viewport.width, viewport.height);
+		state = {
+			scale: state.scale,
+			translateX: pan.translateX,
+			translateY: pan.translateY
+		};
+		applyState(node, state);
+	};
+	if (el) el.addEventListener("wheel", onWheel, { passive: false });
+	return {
+		setState: (next) => commit(next),
+		reset: () => commit(resetZoom()),
+		destroy: () => {
+			if (el) el.removeEventListener("wheel", onWheel);
+			el = null;
+		}
+	};
+}
+//#endregion
+//#region src/waveform/decode.ts
+function decodeWaveform(encoded5bit) {
+	let bitsCount = encoded5bit.length * 8;
+	let valuesCount = Math.floor(bitsCount / 5);
+	if (!valuesCount) return [];
+	let result = [];
+	for (let i = 0; i < valuesCount; i++) {
+		let byteIndex = Math.floor(i * 5 / 8);
+		let bitShift = i * 5 % 8;
+		let lo = encoded5bit[byteIndex] ?? 0;
+		let hi = encoded5bit[byteIndex + 1] ?? 0;
+		result.push(lo + (hi << 8) >> bitShift & 31);
+	}
+	return result;
+}
+function fitWaveform(data, fitCount) {
+	let count = Math.max(0, Math.floor(fitCount));
+	if (count === 0) return [];
+	if (data.length === 0) return Array.from({ length: count }, () => 0);
+	let out = [];
+	let spring = data.length / count;
+	for (let i = 0; i < count; i++) {
+		let idx = Math.min(data.length - 1, Math.floor(i * spring));
+		out.push(data[idx] ?? 0);
+	}
+	return out;
+}
+//#endregion
+//#region src/spoiler/spoiler.ts
+var SPOILER_MS = 200;
+var SPOILER_EASING = "ease-out";
+var DOT_GAP = 6;
+var DOT_RADIUS = 1.15;
+function paintDots(canvas) {
+	let ctx = canvas.getContext("2d");
+	if (!ctx) return;
+	let width = canvas.width;
+	let height = canvas.height;
+	ctx.clearRect(0, 0, width, height);
+	ctx.fillStyle = "rgba(128, 128, 128, 0.9)";
+	for (let y = DOT_GAP / 2; y < height; y += DOT_GAP) for (let x = DOT_GAP / 2; x < width; x += DOT_GAP) {
+		ctx.beginPath();
+		ctx.arc(x, y, DOT_RADIUS, 0, Math.PI * 2);
+		ctx.fill();
+	}
+}
+function createSpoiler(el, options) {
+	let durationMs = options.durationMs ?? 200;
+	let easing = options.easing ?? "ease-out";
+	let canvas = document.createElement("canvas");
+	applyStyles(canvas, {
+		position: "absolute",
+		inset: "0",
+		width: "100%",
+		height: "100%",
+		"pointer-events": "none"
+	});
+	canvas.width = Math.max(1, el.clientWidth || 1);
+	canvas.height = Math.max(1, el.clientHeight || 1);
+	paintDots(canvas);
+	el.appendChild(canvas);
+	let fade = createFade(canvas, {
+		durationMs,
+		easing
+	});
+	if (options.revealed()) applyStyles(canvas, { opacity: "0" });
+	return {
+		reveal: () => fade.setVisible(false),
+		reset: () => fade.setVisible(true),
+		destroy: () => {
+			if (canvas.parentNode) canvas.remove();
+		}
+	};
+}
+//#endregion
+export { ANIMATION_LEVELS, DEFAULT_ANIMATION_LEVEL, DIGIT_FLIP_EASING, DIGIT_FLIP_MS, DOCK_EASING, DOCK_FADE_OFFSET, DOCK_MS, FADE_EASING, FADE_MS, INDICATOR_EASING, INDICATOR_MS, LIST_REORDER_EASING, LIST_REORDER_EPSILON_PX, LIST_REORDER_MS, MAX_SIMULTANEOUS_DIGIT_FLIPS, PINCH_MAX_SCALE, PINCH_MIN_SCALE, PINCH_WHEEL_FACTOR, POPOVER_EASING, POPOVER_MS, POPOVER_ORIGIN, PRESENCE_POP_EASING, PRESENCE_POP_MS, RIPPLE_COLOR, RIPPLE_EASING, RIPPLE_MS, RIPPLE_SIZE_PX, SCROLL_TWEEN_MS, SEND_FLIGHT_EASING, SEND_FLIGHT_MS, SHARED_ELEMENT_EASING, SHARED_ELEMENT_END_MS, SHARED_ELEMENT_MS, SPOILER_EASING, SPOILER_MS, SWIPE_MAX, SWIPE_THRESHOLD, SWIPE_TWEEN_MS, VIEW_SLIDE_COVER_EASING, VIEW_SLIDE_COVER_MS, VIEW_SLIDE_EASING, VIEW_SLIDE_FADE_OFFSET, VIEW_SLIDE_MS, VIEW_SLIDE_REVEAL_EASING, VIEW_SLIDE_REVEAL_MS, VIEW_SLIDE_SETTLE_SLACK_MS, VIEW_SLIDE_ZOOM_EASING, VIEW_SLIDE_ZOOM_MS, boundTranslate, buildDigitSlots, buildOrderDiff, canAnimate, centerFitInViewport, clampScale, classifyReorderAnim, computeCloseFlight, computeFlight, computeOpenFlight, createDock, createFade, createListReorder, createPinchZoom, createPopover, createSharedElement, createSlidingIndicator, createSpoiler, createSwipeReveal, createViewSlide, cycleAnimationLevel, decodeWaveform, defaultAnimationLevel, dockTransforms, dualRaf, easeOutCubic, fitContain, fitWaveform, formatCounterText, isAnimationLevel, isRectFullyVisibleIn, isRectInViewport, lerp, maxTranslate, nextScaleFromWheel, offViewportLandingRect, parseAnimationLevel, pickAnimationLevelFromRatio, playDigitFlip, playPresencePop, playRipple, playScrollTween, playSendFlight, playSharedElement, prefersReducedMotion, resetZoom, resolveNaturalSize, resolveViewSlideMode, rubberSwipeOffset, scheduleDigitFlip, shouldCommitSwipe, shouldPresencePop, slideDirectionByIndex, stepAnimationLevel, tween, uncoverByAspect, viewSlideDurationMs, viewSlideEasing, viewSlideTransforms, zoomAtOrigin, zoomTransform };