react-morphcard 0.1.0

package/dist/index.js

@@ -0,0 +1,1575 @@
+"use client";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+//#region src/geometry.ts
+function box(left, top, width, height) {
+	return {
+		left,
+		top,
+		width,
+		height
+	};
+}
+function toBox(rect) {
+	return {
+		left: rect.left,
+		top: rect.top,
+		width: rect.width,
+		height: rect.height
+	};
+}
+/**
+* Screen pixels per CSS pixel of an element: its rendered width over its
+* layout width. Not 1 when an ancestor is scaled (a preview frame shrunk to
+* fit, a zoomed canvas). Falls back to 1 when either size is unusable.
+*/
+function unitOf(rendered, layout) {
+	if (!(rendered > 0) || !(layout > 0)) return 1;
+	const unit = rendered / layout;
+	return Math.abs(unit - 1) < .001 ? 1 : unit;
+}
+/**
+* A box measured on screen, in the CSS pixels of a scaled subtree. Clip
+* insets and transforms are written in those pixels, so every measured box
+* goes through this before it becomes a keyframe.
+*/
+function toLocal(b, unit) {
+	if (unit === 1) return b;
+	return {
+		left: b.left / unit,
+		top: b.top / unit,
+		width: b.width / unit,
+		height: b.height / unit
+	};
+}
+function area(b) {
+	return b ? Math.max(0, b.width) * Math.max(0, b.height) : 0;
+}
+/** The overlap of two boxes, or null when they do not overlap. */
+function intersect(a, b) {
+	const left = Math.max(a.left, b.left);
+	const top = Math.max(a.top, b.top);
+	const right = Math.min(a.left + a.width, b.left + b.width);
+	const bottom = Math.min(a.top + a.height, b.top + b.height);
+	if (right <= left || bottom <= top) return null;
+	return {
+		left,
+		top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+/** Share of `rect` that is inside `visible` (0 to 1). Empty boxes count as hidden. */
+function visibleRatio(rect, visible) {
+	const whole = area(rect);
+	if (whole <= 0 || !visible) return 0;
+	return area(intersect(rect, visible)) / whole;
+}
+/** Below this share of their area on screen, elements do not take part in a flight. */
+const MIN_VISIBLE = .5;
+function isOnScreen(rect, visible, min = MIN_VISIBLE) {
+	return visibleRatio(rect, visible) >= min;
+}
+const NO_SHIFT = {
+	x: 0,
+	y: 0
+};
+function moveBox(b, shift) {
+	return shift.x === 0 && shift.y === 0 ? b : box(b.left + shift.x, b.top + shift.y, b.width, b.height);
+}
+/**
+* How far to move `outer` so that it covers `inner`, moving it as little as
+* possible. When `inner` is larger on an axis, `outer` ends up inside it.
+* Used for a sheet smaller than the screen (a centred panel) that must start
+* over a card it does not cover.
+*/
+function coverShift(inner, outer) {
+	const axis = (a0, a1, b0, b1) => {
+		if (a0 >= b0 && a1 <= b1) return 0;
+		if (a1 - a0 <= b1 - b0) return a0 < b0 ? a0 - b0 : a1 - b1;
+		if (b0 >= a0 && b1 <= a1) return 0;
+		return b0 < a0 ? a0 - b0 : a1 - b1;
+	};
+	return {
+		x: axis(inner.left, inner.left + inner.width, outer.left, outer.left + outer.width),
+		y: axis(inner.top, inner.top + inner.height, outer.top, outer.top + outer.height)
+	};
+}
+function px(n) {
+	return `${Math.round(n * 100) / 100}px`;
+}
+/**
+* A clip-path that shows only `rect` of an element whose border box is
+* `container`. The rect is clamped to the container, so a card that sticks
+* out of the surface never produces negative insets.
+*/
+function insetClip(rect, container, radius) {
+	const top = Math.max(0, rect.top - container.top);
+	const left = Math.max(0, rect.left - container.left);
+	const right = Math.max(0, container.left + container.width - (rect.left + rect.width));
+	const bottom = Math.max(0, container.top + container.height - (rect.top + rect.height));
+	return `inset(${px(top)} ${px(right)} ${px(bottom)} ${px(left)} round ${px(radius)})`;
+}
+function fullClip(radius) {
+	return `inset(0px 0px 0px 0px round ${px(radius)})`;
+}
+/**
+* First length of a computed border-radius ("16px", "16px 8px"). Percentages
+* resolve against `width`; anything else counts as square.
+*/
+function parseRadius(value, width = 0) {
+	const text = value?.trim() ?? "";
+	const pxMatch = /^(\d*\.?\d+)px/.exec(text);
+	if (pxMatch) return Number(pxMatch[1]);
+	const pctMatch = /^(\d*\.?\d+)%/.exec(text);
+	if (pctMatch) return Number(pctMatch[1]) / 100 * width;
+	return 0;
+}
+/** Lines of text in a box, given its computed line-height and font-size. */
+function lineCount(height, lineHeight, fontSize) {
+	const parsed = Number.parseFloat(lineHeight);
+	const lh = Number.isFinite(parsed) && parsed > 0 ? lineHeight.endsWith("px") ? parsed : parsed * fontSize : fontSize * 1.2;
+	if (lh <= 0) return 1;
+	return Math.max(1, Math.round(height / lh));
+}
+function planPair(input) {
+	const { src, dst } = input;
+	if (input.mode === "box") {
+		const scale = dst.width > 0 ? src.width / dst.width : 1;
+		return {
+			scale,
+			crossfade: dst.height <= 0 || Math.abs(src.height / dst.height - scale) > .04
+		};
+	}
+	const srcFont = input.srcFont ?? 16;
+	const dstFont = input.dstFont ?? 16;
+	const scale = dstFont > 0 ? srcFont / dstFont : 1;
+	return {
+		scale,
+		crossfade: Boolean(input.srcClipped) || (input.srcLines ?? 1) !== (input.dstLines ?? 1) || dst.width <= 0 || dst.height <= 0 || Math.abs(src.width / dst.width - scale) > .04 || Math.abs(src.height / dst.height - scale) > .04
+	};
+}
+/** Transform (origin 0 0) that draws an element laid out at `at` over `over`, scaled by `scale`. */
+function placeOver(at, over, scale) {
+	return `translate(${px(over.left - at.left)}, ${px(over.top - at.top)}) scale(${Math.round(scale * 1e4) / 1e4})`;
+}
+/**
+* Frames for a picture that changes shape on the way: a square thumbnail
+* into a wide banner, a cropped poster into a tall video. The small picture
+* is treated as a crop of the large one, the way `object-fit: cover` crops
+* it. A rectangle moves from the card to the sheet; the large copy covers it
+* and both copies are cut to it with a clip-path. The small copy is scaled so
+* that it shows the same part of the picture at the same size and place as
+* the large copy under it. So while the two copies swap, the reader sees one
+* picture whose frame changes shape: never two pictures of different sizes,
+* never a zoom into a crop.
+*
+* The rectangle moves linearly; the effect's easing shapes it in time. The
+* frames are sampled because a clip-path inside a changing scale is not linear.
+*/
+function fillFrames(input) {
+	const { big, small, from, to } = input;
+	const [ax, ay] = input.align ?? [.5, .5];
+	const [r0, r1] = input.radius ?? [0, 0];
+	const steps = input.steps ?? 16;
+	const out = {
+		big: [],
+		small: []
+	};
+	if (!(big.width > 0 && big.height > 0 && small.width > 0 && small.height > 0)) return out;
+	const k = Math.max(small.width / big.width, small.height / big.height);
+	const cropX = ax * (big.width * k - small.width);
+	const cropY = ay * (big.height * k - small.height);
+	const lerp = (a, b, t) => a + (b - a) * t;
+	const frame = (at, left, top, s, rect, radius, offset) => {
+		const c = (n) => px(Math.max(0, n) / s);
+		const inset = [
+			c(rect.top - top),
+			c(left + at.width * s - (rect.left + rect.width)),
+			c(top + at.height * s - (rect.top + rect.height)),
+			c(rect.left - left)
+		];
+		return {
+			offset,
+			transform: `translate(${px(left - at.left)}, ${px(top - at.top)}) scale(${Math.round(s * 1e4) / 1e4})`,
+			transformOrigin: "0 0",
+			clipPath: `inset(${inset.join(" ")} round ${px(radius / s)})`
+		};
+	};
+	for (let i = 0; i <= steps; i++) {
+		const t = i / steps;
+		const offset = Math.round(t * 1e4) / 1e4;
+		const rect = box(lerp(from.left, to.left, t), lerp(from.top, to.top, t), lerp(from.width, to.width, t), lerp(from.height, to.height, t));
+		const radius = lerp(r0, r1, t);
+		const sb = Math.max(rect.width / big.width, rect.height / big.height);
+		const bl = rect.left + ax * (rect.width - big.width * sb);
+		const bt = rect.top + ay * (rect.height - big.height * sb);
+		out.big.push(frame(big, bl, bt, sb, rect, radius, offset));
+		if (input.crop === false) {
+			const s2 = Math.max(rect.width / small.width, rect.height / small.height);
+			const sl = rect.left + ax * (rect.width - small.width * s2);
+			const st = rect.top + ay * (rect.height - small.height * s2);
+			out.small.push(frame(small, sl, st, s2, rect, radius, offset));
+		} else {
+			const ss = sb / k;
+			out.small.push(frame(small, bl + cropX * ss, bt + cropY * ss, ss, rect, radius, offset));
+		}
+	}
+	return out;
+}
+/**
+* Transform origin for scaling the background back: the horizontal centre of
+* its visible part and 30% down it, so a long scrolled page shrinks around
+* what the reader sees, not around the middle of the whole document.
+*/
+function backgroundOrigin(element, visible) {
+	const v = visible ?? element;
+	const x = v.left + v.width / 2 - element.left;
+	const y = v.top + v.height * .3 - element.top;
+	return `${px(x)} ${px(y)}`;
+}
+//#endregion
+//#region src/dom.ts
+/**
+* DOM helpers: measuring what is on screen, finding marked elements, and
+* undoing every attribute or inline style the library sets.
+*/
+const SHARED_ATTR = "data-morph";
+const GHOST_ATTR = "data-morph-ghost";
+const STAGGER_ATTR = "data-morph-stagger";
+const DOCK_ATTR = "data-morph-dock";
+const FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+function viewportBox() {
+	return {
+		left: 0,
+		top: 0,
+		width: document.documentElement.clientWidth || window.innerWidth,
+		height: window.innerHeight
+	};
+}
+/**
+* The part of the viewport where `el` can be seen: the viewport cut down by
+* every ancestor that clips its content (overflow other than visible).
+* Returns null when an ancestor clips everything away.
+*/
+function visibleBoxOf(el) {
+	let visible = viewportBox();
+	for (let node = el.parentElement; node && visible; node = node.parentElement) {
+		if (node === document.body || node === document.documentElement) break;
+		const style = getComputedStyle(node);
+		if (style.display === "contents") continue;
+		if (style.overflowX !== "visible" || style.overflowY !== "visible") {
+			const rect = node.getBoundingClientRect();
+			const scaleX = unitOf(rect.width, node.offsetWidth);
+			const scaleY = unitOf(rect.height, node.offsetHeight);
+			visible = intersect(visible, {
+				left: rect.left + node.clientLeft * scaleX,
+				top: rect.top + node.clientTop * scaleY,
+				width: node.clientWidth * scaleX,
+				height: node.clientHeight * scaleY
+			});
+		}
+		if (style.position === "fixed") break;
+	}
+	return visible;
+}
+function rectOf(el) {
+	return toBox(el.getBoundingClientRect());
+}
+/**
+* True when a descendant is position: fixed. A transform on the ancestor
+* would become the containing block of that descendant and drag it along.
+*/
+function hasFixedDescendant(el) {
+	const all = el.getElementsByTagName("*");
+	for (let i = 0; i < all.length; i++) {
+		const node = all[i];
+		if (node && getComputedStyle(node).position === "fixed") return true;
+	}
+	return false;
+}
+/** The text is cut off: an ellipsis, a line clamp or hidden overflow. */
+function isClipped(el, style = getComputedStyle(el)) {
+	if (style.overflowX === "visible" && style.overflowY === "visible") return false;
+	if (el.clientWidth === 0) return false;
+	return el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1;
+}
+function textLines(el, height, style = getComputedStyle(el)) {
+	const fontSize = Number.parseFloat(style.fontSize) || 16;
+	const inner = height - (Number.parseFloat(style.paddingTop) || 0) - (Number.parseFloat(style.paddingBottom) || 0) - (Number.parseFloat(style.borderTopWidth) || 0) - (Number.parseFloat(style.borderBottomWidth) || 0);
+	return lineCount(Math.max(0, inner), style.lineHeight, fontSize);
+}
+/** Index once per measurement; duplicate keys keep the first non-ghost element. */
+function sharedElements(root) {
+	const elements = /* @__PURE__ */ new Map();
+	for (const el of root.querySelectorAll(`[${SHARED_ATTR}]`)) {
+		if (el.closest(`[data-morph-ghost]`)) continue;
+		const key = el.getAttribute(SHARED_ATTR);
+		if (key && !elements.has(key)) elements.set(key, el);
+	}
+	return elements;
+}
+/**
+* Splits the sheet into the parts that move differently. Walks down only
+* into elements that contain shared, stagger or dock markers, so each
+* returned element is the largest block that can fade as a whole.
+*/
+function collectContent(sheet) {
+	const out = {
+		stagger: [],
+		plain: [],
+		docks: []
+	};
+	const marked = `[${SHARED_ATTR}], [${STAGGER_ATTR}], [${DOCK_ATTR}]`;
+	const walk = (parent) => {
+		for (const child of Array.from(parent.children)) {
+			if (!(child instanceof HTMLElement) && !(child instanceof SVGElement)) continue;
+			if (child.hasAttribute("data-morph-ghost") || child.hasAttribute("data-morph")) continue;
+			if (child.hasAttribute(DOCK_ATTR)) out.docks.push(child);
+			else if (child.hasAttribute(STAGGER_ATTR) && !child.querySelector(`[data-morph]`)) out.stagger.push(child);
+			else if (child.querySelector(marked)) walk(child);
+			else out.plain.push(child);
+		}
+	};
+	walk(sheet);
+	return out;
+}
+/** Largest blocks of a card copy that contain no shared element. */
+function collectRest(root) {
+	const out = [];
+	const walk = (parent) => {
+		for (const child of Array.from(parent.children)) {
+			if (child.hasAttribute("data-morph")) continue;
+			if (child.querySelector(`[data-morph]`)) walk(child);
+			else out.push(child);
+		}
+	};
+	walk(root);
+	return out;
+}
+function focusTargetIn(root) {
+	if (root.matches("[data-morph-focus]")) return root;
+	const marked = root.querySelector("[data-morph-focus]");
+	if (marked) return marked;
+	if (root.matches("a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])")) return root;
+	const first = root.querySelector(FOCUSABLE);
+	if (first) return first;
+	return root.tabIndex >= 0 ? root : null;
+}
+/** Nearest ancestor that scrolls vertically, or the window. */
+function scrollerOf(el) {
+	for (let node = el.parentElement; node; node = node.parentElement) {
+		if (node === document.body || node === document.documentElement) break;
+		const overflow = getComputedStyle(node).overflowY;
+		if ((overflow === "auto" || overflow === "scroll" || overflow === "overlay") && node.scrollHeight > node.clientHeight) return node;
+	}
+	return window;
+}
+function saveScroll(target) {
+	if (target instanceof Window) return {
+		target,
+		top: window.scrollY,
+		left: window.scrollX
+	};
+	return {
+		target,
+		top: target.scrollTop,
+		left: target.scrollLeft
+	};
+}
+/** Puts the scroll position back at once, ignoring scroll-behavior: smooth. */
+function restoreScroll(saved) {
+	const { target, top, left } = saved;
+	if (target instanceof Window) {
+		if (window.scrollY !== top || window.scrollX !== left) window.scrollTo({
+			top,
+			left,
+			behavior: "instant"
+		});
+	} else if (target.isConnected && (target.scrollTop !== top || target.scrollLeft !== left)) target.scrollTo({
+		top,
+		left,
+		behavior: "instant"
+	});
+}
+/**
+* Records every attribute it changes and puts them back in reverse order, so
+* nothing the library touched survives a cleanup.
+*/
+var Undo = class {
+	steps = [];
+	attr(el, name, value) {
+		const previous = el.getAttribute(name);
+		if (value === null) el.removeAttribute(name);
+		else el.setAttribute(name, value);
+		this.steps.push(() => {
+			if (previous === null) el.removeAttribute(name);
+			else el.setAttribute(name, previous);
+		});
+	}
+	get size() {
+		return this.steps.length;
+	}
+	flush() {
+		for (let step = this.steps.pop(); step; step = this.steps.pop()) step();
+	}
+};
+//#endregion
+//#region src/timing.ts
+const defaults = {
+	duration: {
+		open: 400,
+		close: 300
+	},
+	easing: {
+		surface: "cubic-bezier(0.32, 0.72, 0, 1)",
+		content: "cubic-bezier(0.23, 1, 0.32, 1)"
+	},
+	stagger: 45,
+	backgroundScale: .96,
+	reducedMotion: "system",
+	timeScale: 1,
+	closeOnEscape: true,
+	restoreScroll: true
+};
+/**
+* Fractions of the open or close duration. With the defaults (400 / 300 ms):
+* content enters at 130 ms, the card copy of a crossfading text is gone by
+* 160 ms, and on close the big heading hands over to the card text by 90 ms.
+*/
+const choreography = {
+	open: {
+		contentDelay: .325,
+		content: .65,
+		copyOut: .4,
+		targetIn: .5,
+		restOut: .35,
+		borderOut: .2,
+		lateIn: .4,
+		dockDelay: .4,
+		dock: .75
+	},
+	close: {
+		copyIn: .37,
+		targetOut: .3,
+		restDelay: .5,
+		rest: .5,
+		contentOut: .37,
+		dock: .6
+	},
+	/** Opacity only, in ms: the empty surface covers the page before any text appears. */
+	fade: {
+		surface: 120,
+		contentDelay: 100,
+		content: 140,
+		closeContent: 100,
+		closeSurfaceDelay: 100,
+		closeSurface: 120
+	}
+};
+function resolveTiming(options, base) {
+	return {
+		duration: {
+			...base.duration,
+			...options.duration
+		},
+		easing: {
+			...base.easing,
+			...options.easing
+		},
+		stagger: options.stagger ?? base.stagger,
+		backgroundScale: options.backgroundScale ?? base.backgroundScale,
+		reducedMotion: options.reducedMotion ?? base.reducedMotion,
+		timeScale: options.timeScale ?? base.timeScale,
+		closeOnEscape: options.closeOnEscape ?? base.closeOnEscape,
+		restoreScroll: options.restoreScroll ?? base.restoreScroll
+	};
+}
+function durationFor(direction, timing, fade) {
+	const f = choreography.fade;
+	return (fade ? direction === "open" ? f.contentDelay + f.content : f.closeSurfaceDelay + f.closeSurface : timing.duration[direction]) * timing.timeScale;
+}
+//#endregion
+//#region src/animate.ts
+const EASE_OUT = "ease-out";
+/** Build one run from measured geometry. Lifecycle and cleanup belong to morph.ts. */
+function buildAnimations(r, g, context) {
+	const { sheet, background, scrim, timing, session } = context;
+	const pending = [];
+	function queueAnimation(el, frames, duration, delay = 0, easing = "linear") {
+		pending.push({
+			el,
+			frames,
+			options: {
+				duration: Math.max(0, duration),
+				delay,
+				easing,
+				fill: "both"
+			}
+		});
+	}
+	/**
+	* A copy of the card placed exactly over it, inside the sheet. It carries
+	* what the sheet does not have (meta lines, icons, the border) and the
+	* card's own version of texts that crossfade.
+	*/
+	function makeGhost(r, g) {
+		const card = g.card;
+		const ghost = card.cloneNode(true);
+		ghost.removeAttribute("id");
+		for (const node of ghost.querySelectorAll("[id]")) node.removeAttribute("id");
+		for (const node of ghost.querySelectorAll("[name]")) node.removeAttribute("name");
+		ghost.setAttribute(GHOST_ATTR, "");
+		ghost.setAttribute("aria-hidden", "true");
+		ghost.inert = true;
+		const style = getComputedStyle(card);
+		for (const prop of [
+			"color",
+			"font-family",
+			"font-size",
+			"font-weight",
+			"font-style",
+			"line-height",
+			"letter-spacing",
+			"text-align",
+			"white-space",
+			"direction",
+			"font-feature-settings",
+			"font-variant-numeric"
+		]) ghost.style.setProperty(prop, style.getPropertyValue(prop));
+		const left = g.cardBox.left - g.sheetBox.left - sheet.clientLeft + sheet.scrollLeft;
+		const top = g.cardBox.top - g.sheetBox.top - sheet.clientTop + sheet.scrollTop;
+		Object.assign(ghost.style, {
+			position: "absolute",
+			boxSizing: "border-box",
+			margin: "0",
+			left: `${left}px`,
+			top: `${top}px`,
+			width: `${g.cardBox.width}px`,
+			height: `${g.cardBox.height}px`,
+			minWidth: "0",
+			maxWidth: "none",
+			minHeight: "0",
+			maxHeight: "none",
+			background: "transparent",
+			boxShadow: "none",
+			outline: "none",
+			transform: "none",
+			transition: "none",
+			animation: "none",
+			opacity: "1",
+			visibility: "visible",
+			pointerEvents: "none",
+			zIndex: "0"
+		});
+		ghost.style.borderColor = g.border ?? "transparent";
+		const copies = /* @__PURE__ */ new Map();
+		const rest = collectRest(ghost);
+		const pairs = new Map(g.pairs.map((pair) => [pair.key, pair]));
+		for (const node of ghost.querySelectorAll(`[${SHARED_ATTR}]`)) {
+			const key = node.getAttribute("data-morph") ?? "";
+			const pair = pairs.get(key);
+			if (pair?.mode === "scale") node.style.visibility = "hidden";
+			else if (pair?.mode === "crossfade") copies.set(key, node);
+			else rest.push(node);
+		}
+		sheet.prepend(ghost);
+		r.ghosts.push(ghost);
+		const placed = toLocal(rectOf(ghost), g.unit);
+		const dx = g.cardBox.left - placed.left;
+		const dy = g.cardBox.top - placed.top;
+		if (Math.abs(dx) > .5 || Math.abs(dy) > .5) {
+			ghost.style.left = `${left + dx}px`;
+			ghost.style.top = `${top + dy}px`;
+		}
+		return {
+			root: ghost,
+			copies,
+			rest
+		};
+	}
+	/**
+	* A sheet that does not cover the card at rest (a centred panel) starts
+	* moved over it and slides into place while it grows, on the same curve,
+	* so the surface and every flight follow the same path on screen as with
+	* a sheet that covers the card.
+	*/
+	function slide(g, duration, back) {
+		if (g.shift.x === 0 && g.shift.y === 0) return;
+		const moved = { translate: `${g.shift.x}px ${g.shift.y}px` };
+		const home = { translate: "0px 0px" };
+		queueAnimation(sheet, back ? [home, moved] : [moved, home], duration, 0, timing.easing.surface);
+	}
+	function recede(duration, back, isReduced) {
+		if (background && session?.scaled && !isReduced) {
+			const still = {
+				transform: "none",
+				transformOrigin: session.origin
+			};
+			const away = {
+				transform: `scale(${session.scale})`,
+				transformOrigin: session.origin
+			};
+			queueAnimation(background, back ? [away, still] : [still, away], duration, 0, timing.easing.surface);
+		}
+		if (scrim) queueAnimation(scrim, back ? [{ opacity: 1 }, { opacity: 0 }] : [{ opacity: 0 }, { opacity: 1 }], duration, 0, EASE_OUT);
+	}
+	function fillOf(p, direction) {
+		const f = p.fill ?? {
+			radius: [0, 0],
+			align: [.5, .5],
+			crop: true
+		};
+		const open = direction === "open";
+		return fillFrames({
+			big: p.dstBox,
+			small: p.srcBox,
+			from: open ? p.srcBox : p.dstBox,
+			to: open ? p.dstBox : p.srcBox,
+			align: f.align,
+			crop: f.crop,
+			radius: open ? f.radius : [f.radius[1], f.radius[0]]
+		});
+	}
+	function buildOpen(r, g) {
+		const D = timing.duration.open * timing.timeScale;
+		const k = choreography.open;
+		const surface = timing.easing.surface;
+		const content = timing.easing.content;
+		queueAnimation(sheet, [{ clipPath: insetClip(g.clipBox, g.sheetBox, g.radius) }, { clipPath: fullClip(g.sheetRadius) }], D, 0, surface);
+		if (g.colors) queueAnimation(sheet, [{ backgroundColor: g.colors[0] }, { backgroundColor: g.colors[1] }], D, 0, surface);
+		const ghost = makeGhost(r, g);
+		slide(g, D, false);
+		for (const p of g.pairs) {
+			if (p.mode === "skip" || !p.dst) {
+				if (p.dst) queueAnimation(p.dst, [{ opacity: 0 }, { opacity: 1 }], k.lateIn * D, (1 - k.lateIn) * D, EASE_OUT);
+				continue;
+			}
+			const fill = p.fill ? fillOf(p, "open") : null;
+			queueAnimation(p.dst, fill ? fill.big : [{
+				transform: placeOver(p.dstBox, p.srcBox, p.scale),
+				transformOrigin: "0 0"
+			}, {
+				transform: "none",
+				transformOrigin: "0 0"
+			}], D, 0, surface);
+			if (p.mode !== "crossfade") continue;
+			const copy = ghost.copies.get(p.key);
+			if (copy) {
+				queueAnimation(copy, fill ? fill.small : [{
+					transform: "none",
+					transformOrigin: "0 0"
+				}, {
+					transform: placeOver(p.srcBox, p.dstBox, 1 / p.scale),
+					transformOrigin: "0 0"
+				}], D, 0, surface);
+				queueAnimation(copy, [{ opacity: 1 }, { opacity: 0 }], k.copyOut * D, 0, EASE_OUT);
+			}
+			queueAnimation(p.dst, [{ opacity: 0 }, { opacity: 1 }], k.targetIn * D, 0, EASE_OUT);
+		}
+		for (const el of ghost.rest) queueAnimation(el, [{ opacity: 1 }, { opacity: 0 }], k.restOut * D, 0, EASE_OUT);
+		if (g.border) queueAnimation(ghost.root, [{ borderColor: g.border }, { borderColor: "transparent" }], k.borderOut * D, 0, EASE_OUT);
+		const parts = collectContent(sheet);
+		parts.stagger.forEach((el, i) => {
+			queueAnimation(el, hasFixedDescendant(el) ? [{ opacity: 0 }, { opacity: 1 }] : [{
+				opacity: 0,
+				transform: "translateY(10px)"
+			}, {
+				opacity: 1,
+				transform: "none"
+			}], k.content * D, (k.contentDelay * timing.duration.open + i * timing.stagger) * timing.timeScale, content);
+		});
+		for (const el of parts.plain) queueAnimation(el, [{ opacity: 0 }, { opacity: 1 }], k.content * D, k.contentDelay * D, content);
+		for (const el of parts.docks) queueAnimation(el, hasFixedDescendant(el) ? [{ opacity: 0 }, { opacity: 1 }] : [{ transform: "translateY(100%)" }, { transform: "none" }], k.dock * D, k.dockDelay * D, content);
+		recede(D, false, false);
+	}
+	function buildClose(r, g) {
+		const C = timing.duration.close * timing.timeScale;
+		const k = choreography.close;
+		const surface = timing.easing.surface;
+		queueAnimation(sheet, [{ clipPath: fullClip(g.sheetRadius) }, { clipPath: insetClip(g.clipBox, g.sheetBox, g.radius) }], C, 0, surface);
+		if (g.colors) queueAnimation(sheet, [{ backgroundColor: g.colors[1] }, { backgroundColor: g.colors[0] }], C, 0, surface);
+		const ghost = makeGhost(r, g);
+		slide(g, C, true);
+		let anchor = null;
+		for (const p of g.pairs) {
+			if (p.mode === "skip" || !p.dst) {
+				if (p.dst) queueAnimation(p.dst, [{ opacity: 1 }, { opacity: 0 }], k.contentOut * C, 0, EASE_OUT);
+				continue;
+			}
+			if (!anchor || p.dstBox.top + p.dstBox.height > anchor.dstBox.top + anchor.dstBox.height) anchor = p;
+			const fill = p.fill ? fillOf(p, "close") : null;
+			queueAnimation(p.dst, fill ? fill.big : [{
+				transform: "none",
+				transformOrigin: "0 0"
+			}, {
+				transform: placeOver(p.dstBox, p.srcBox, p.scale),
+				transformOrigin: "0 0"
+			}], C, 0, surface);
+			if (p.mode !== "crossfade") continue;
+			const copy = ghost.copies.get(p.key);
+			if (copy) {
+				queueAnimation(copy, fill ? fill.small : [{
+					transform: placeOver(p.srcBox, p.dstBox, 1 / p.scale),
+					transformOrigin: "0 0"
+				}, {
+					transform: "none",
+					transformOrigin: "0 0"
+				}], C, 0, surface);
+				queueAnimation(copy, [{ opacity: 0 }, { opacity: 1 }], k.copyIn * C, 0, EASE_OUT);
+			}
+			queueAnimation(p.dst, [{ opacity: 1 }, { opacity: 0 }], k.targetOut * C, 0, EASE_OUT);
+		}
+		for (const el of ghost.rest) queueAnimation(el, [{ opacity: 0 }, { opacity: 1 }], k.rest * C, k.restDelay * C, EASE_OUT);
+		if (g.border) queueAnimation(ghost.root, [{ borderColor: "transparent" }, { borderColor: g.border }], k.rest * C, k.restDelay * C, EASE_OUT);
+		const parts = collectContent(sheet);
+		const follow = anchor ? `translate(${anchor.srcBox.left - anchor.dstBox.left}px, ${anchor.srcBox.top - anchor.dstBox.top}px)` : null;
+		for (const el of parts.stagger) {
+			if (follow && !hasFixedDescendant(el)) queueAnimation(el, [{ transform: "none" }, { transform: follow }], C, 0, surface);
+			queueAnimation(el, [{ opacity: 1 }, { opacity: 0 }], k.contentOut * C, 0, EASE_OUT);
+		}
+		for (const el of parts.plain) queueAnimation(el, [{ opacity: 1 }, { opacity: 0 }], k.contentOut * C, 0, EASE_OUT);
+		for (const el of parts.docks) queueAnimation(el, hasFixedDescendant(el) ? [{ opacity: 1 }, { opacity: 0 }] : [{ transform: "none" }, { transform: "translateY(100%)" }], k.dock * C, 0, EASE_OUT);
+		recede(C, true, false);
+	}
+	function sheetChildren() {
+		return Array.from(sheet.children).filter((el) => !el.hasAttribute(GHOST_ATTR));
+	}
+	/** Opacity only: the empty surface first, then the content, so two screens of text never overlap. */
+	function buildFadeOpen(isReduced) {
+		const f = choreography.fade;
+		const t = timing.timeScale;
+		queueAnimation(sheet, [{ opacity: 0 }, { opacity: 1 }], f.surface * t, 0, "ease");
+		for (const el of sheetChildren()) queueAnimation(el, [{ opacity: 0 }, { opacity: 1 }], f.content * t, f.contentDelay * t, "ease");
+		recede((f.contentDelay + f.content) * t, false, isReduced);
+	}
+	function buildFadeClose(isReduced) {
+		const f = choreography.fade;
+		const t = timing.timeScale;
+		for (const el of sheetChildren()) queueAnimation(el, [{ opacity: 1 }, { opacity: 0 }], f.closeContent * t, 0, "ease");
+		queueAnimation(sheet, [{ opacity: 1 }, { opacity: 0 }], f.closeSurface * t, f.closeSurfaceDelay * t, "ease");
+		recede((f.closeSurfaceDelay + f.closeSurface) * t, true, isReduced);
+	}
+	if (g.plan.choreography === "morph") {
+		if (r.kind === "open") buildOpen(r, g);
+		else buildClose(r, g);
+	} else if (r.kind === "open") buildFadeOpen(g.plan.reduced);
+	else buildFadeClose(g.plan.reduced);
+	for (const { el, frames, options } of pending) r.anims.push(el.animate(frames, options));
+}
+//#endregion
+//#region src/layers.ts
+const layers = /* @__PURE__ */ new WeakMap();
+function activate(sheet) {
+	deactivate(sheet);
+	const stack = layers.get(sheet.ownerDocument) ?? [];
+	stack.push(sheet);
+	layers.set(sheet.ownerDocument, stack);
+}
+function deactivate(sheet) {
+	const stack = layers.get(sheet.ownerDocument);
+	const index = stack?.indexOf(sheet) ?? -1;
+	if (index >= 0) stack?.splice(index, 1);
+}
+function isTopLayer(sheet) {
+	return layers.get(sheet.ownerDocument)?.at(-1) === sheet;
+}
+//#endregion
+//#region src/measure.ts
+const TRANSPARENT = /^(transparent|rgba\(0, 0, 0, 0\))$/;
+const ZERO = {
+	left: 0,
+	top: 0,
+	width: 0,
+	height: 0
+};
+/** Jumps CSS transitions on the card (hover, press) to their end so the card is measured at rest. */
+function settleTransitions(card) {
+	if (typeof card.getAnimations !== "function") return;
+	for (const a of card.getAnimations({ subtree: true })) if (typeof CSSTransition !== "undefined" && a instanceof CSSTransition) a.finish();
+}
+/** Smallest visible strip of a card, in px, that a flight starts from or lands on. */
+const MIN_SEEN = 8;
+function isSeen(b) {
+	return b !== null && b.width >= MIN_SEEN && b.height >= MIN_SEEN;
+}
+/** Measure one transition before constructing any of its animations. */
+function measureTransition(direction, card, isReduced, hooks) {
+	const { sheet, backgroundScaled } = hooks;
+	const destinations = sharedElements(sheet);
+	const keys = [...destinations.keys()];
+	let sources;
+	const unit = unitOf(sheet.getBoundingClientRect().width, sheet.offsetWidth);
+	const rectOf$1 = (el) => toLocal(rectOf(el), unit);
+	const visibleBoxOf$1 = (el) => {
+		const v = visibleBoxOf(el);
+		return v ? toLocal(v, unit) : null;
+	};
+	function isShared(key) {
+		return !hooks.shared || hooks.shared.includes(key);
+	}
+	function radiusOf(el, width) {
+		return parseRadius(getComputedStyle(el).borderTopLeftRadius, width);
+	}
+	/**
+	* A card picture that is an image or a video is a crop of the large one, at
+	* its object-position. A plain box (a gradient, an icon tile) is not.
+	*/
+	function cropOf(el) {
+		const media = /^(img|video|picture|canvas)$/i.test(el.tagName) ? el : el.querySelector("img, video, canvas");
+		const pos = media ? getComputedStyle(media).objectPosition : "";
+		const part = (v) => {
+			if (!v) return .5;
+			if (v === "left" || v === "top") return 0;
+			if (v === "right" || v === "bottom") return 1;
+			if (v.endsWith("%")) return Math.min(1, Math.max(0, Number.parseFloat(v) / 100));
+			return .5;
+		};
+		const [x, y] = pos.trim().split(/\s+/);
+		return {
+			align: [part(x), part(y)],
+			crop: Boolean(media)
+		};
+	}
+	function pairFor(key, card) {
+		sources ??= sharedElements(card);
+		const src = sources.get(key) ?? null;
+		const dst = destinations.get(key) ?? null;
+		const skip = (reason) => ({
+			key,
+			mode: "skip",
+			reason,
+			src,
+			dst,
+			srcBox: ZERO,
+			dstBox: ZERO,
+			scale: 1
+		});
+		if (!isShared(key)) return skip("not-shared");
+		if (!src) return skip("missing-card-element");
+		if (!dst) return skip("missing-sheet-element");
+		const srcBox = rectOf$1(src);
+		const dstBox = rectOf$1(dst);
+		if (area(srcBox) === 0) return skip("missing-card-element");
+		if (area(dstBox) === 0) return skip("missing-sheet-element");
+		if (!isOnScreen(dstBox, visibleBoxOf$1(dst))) return skip("sheet-element-offscreen");
+		const declared = dst.getAttribute("data-morph-mode") ?? src.getAttribute("data-morph-mode");
+		const mode = declared === "box" || declared === "text" ? declared : /^(img|svg|video|canvas|picture)$/i.test(dst.tagName) ? "box" : "text";
+		const srcStyle = getComputedStyle(src);
+		const dstStyle = getComputedStyle(dst);
+		const decision = planPair({
+			src: srcBox,
+			dst: dstBox,
+			mode,
+			srcFont: Number.parseFloat(srcStyle.fontSize) || 16,
+			dstFont: Number.parseFloat(dstStyle.fontSize) || 16,
+			srcLines: mode === "text" ? textLines(src, srcBox.height, srcStyle) : 1,
+			dstLines: mode === "text" ? textLines(dst, dstBox.height, dstStyle) : 1,
+			srcClipped: mode === "text" && isClipped(src, srcStyle)
+		});
+		return {
+			key,
+			mode: decision.crossfade ? "crossfade" : "scale",
+			src,
+			dst,
+			srcBox,
+			dstBox,
+			scale: decision.scale,
+			fill: decision.crossfade && mode === "box" ? {
+				radius: [radiusOf(src, srcBox.width), radiusOf(dst, dstBox.width)],
+				...cropOf(src)
+			} : void 0
+		};
+	}
+	const sheetBox = rectOf$1(sheet);
+	let reason;
+	let cardBox = ZERO;
+	let clipBox = ZERO;
+	let shift = NO_SHIFT;
+	if (isReduced) reason = "reduced-motion";
+	else if (!card || !card.isConnected) reason = "no-card";
+	else if (area(sheetBox) === 0) reason = "sheet-hidden";
+	else {
+		settleTransitions(card);
+		cardBox = rectOf$1(card);
+		const view = visibleBoxOf$1(card);
+		const shown = view ? intersect(cardBox, view) : null;
+		if (!isSeen(shown)) reason = "card-offscreen";
+		else {
+			if (!hasFixedDescendant(sheet)) shift = coverShift(shown, sheetBox);
+			const under = intersect(shown, moveBox(sheetBox, shift));
+			if (!isSeen(under)) reason = "card-offscreen";
+			else clipBox = under;
+		}
+	}
+	const pairs = reason || !card ? keys.map((key) => ({
+		key,
+		mode: "skip",
+		reason: reason ?? "no-card",
+		src: null,
+		dst: destinations.get(key) ?? null,
+		srcBox: ZERO,
+		dstBox: ZERO,
+		scale: 1
+	})) : keys.map((key) => pairFor(key, card));
+	let colors = null;
+	let border = null;
+	let radius = 0;
+	let sheetRadius = 0;
+	if (!reason && card) {
+		const cardStyle = getComputedStyle(card);
+		const sheetStyle = getComputedStyle(sheet);
+		const from = cardStyle.backgroundColor;
+		const to = sheetStyle.backgroundColor;
+		if (from !== to && !TRANSPARENT.test(from) && !TRANSPARENT.test(to)) colors = [from, to];
+		if ((Number.parseFloat(cardStyle.borderTopWidth) || 0) > 0 && !TRANSPARENT.test(cardStyle.borderTopColor)) border = cardStyle.borderTopColor;
+		radius = hooks.radius ?? parseRadius(cardStyle.borderTopLeftRadius, cardBox.width);
+		sheetRadius = parseRadius(sheetStyle.borderTopLeftRadius, sheetBox.width);
+	}
+	const back = {
+		x: -shift.x,
+		y: -shift.y
+	};
+	if (reason) shift = NO_SHIFT;
+	const local = reason ? pairs : pairs.map((p) => p.mode === "skip" ? p : {
+		...p,
+		srcBox: moveBox(p.srcBox, back)
+	});
+	return {
+		plan: {
+			direction,
+			choreography: reason ? "fade" : "morph",
+			reason,
+			reduced: isReduced,
+			backgroundScaled: Boolean(backgroundScaled),
+			pairs: pairs.map(({ key, mode, reason: why }) => why ? {
+				key,
+				mode,
+				reason: why
+			} : {
+				key,
+				mode
+			})
+		},
+		card: reason ? null : card,
+		cardBox: moveBox(cardBox, back),
+		clipBox: moveBox(clipBox, back),
+		sheetBox,
+		shift,
+		unit,
+		radius,
+		sheetRadius,
+		colors,
+		border,
+		pairs: local
+	};
+}
+function backgroundOriginFor(background) {
+	const unit = unitOf(background.getBoundingClientRect().width, background.offsetWidth);
+	const visible = visibleBoxOf(background);
+	return backgroundOrigin(toLocal(rectOf(background), unit), visible ? toLocal(visible, unit) : null);
+}
+//#endregion
+//#region src/morph.ts
+/**
+* createMorph: a card that grows into a full detail sheet and shrinks back.
+*
+* The sheet is one surface whose clip-path starts as the card's shape. Shared
+* elements (data-morph="key") fly from the card to their place on the sheet.
+* Everything else fades or slides. All motion uses the Web Animations API, so
+* a close that arrives mid-open reverses the running animations from where
+* they are instead of jumping.
+*/
+function time(a) {
+	return Number(a.currentTime ?? 0);
+}
+function createMorph(options) {
+	const sheet = options.sheet;
+	if (!sheet) throw new TypeError("morphcard: the `sheet` option is required");
+	const background = options.background ?? null;
+	const scrim = options.scrim ?? null;
+	if (background && (background.contains(sheet) || background === scrim)) throw new TypeError("morphcard: `background` must not contain the sheet");
+	if (scrim?.contains(sheet)) throw new TypeError("morphcard: `scrim` must not contain the sheet");
+	sheet.hidden = true;
+	if (scrim) scrim.hidden = true;
+	for (const el of [sheet, scrim]) if (el?.isConnected && getComputedStyle(el).display !== "none") console.warn("morphcard: an element with the hidden attribute is still displayed. A display rule in your CSS overrides [hidden]; add `[hidden] { display: none !important }`.", el);
+	let timing = resolveTiming(options, defaults);
+	let hooks = {
+		prepare: options.prepare,
+		onStateChange: options.onStateChange,
+		shared: options.shared,
+		radius: options.radius,
+		scroller: options.scroller,
+		resolveCard: options.resolveCard
+	};
+	let state = "closed";
+	let current = null;
+	let returnTo = null;
+	let gen = 0;
+	let run = null;
+	let holds = [];
+	let session = null;
+	let plan = null;
+	let lockTimer;
+	let destroyed = false;
+	const waiters = /* @__PURE__ */ new Set();
+	const runUndo = new Undo();
+	const inertUndo = new Undo();
+	const sessionUndo = new Undo();
+	const reduced = () => timing.reducedMotion === "system" ? typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches : timing.reducedMotion;
+	function setState(next) {
+		if (state === next) return;
+		state = next;
+		if (next === "closed") sheet.removeAttribute("data-morph-state");
+		else sheet.setAttribute("data-morph-state", next);
+		hooks.onStateChange?.(next, current);
+	}
+	function wait(target) {
+		return new Promise((resolve) => waiters.add({
+			target,
+			resolve
+		}));
+	}
+	function resolveWaiters(reached) {
+		for (const waiter of waiters) waiter.resolve(waiter.target === reached);
+		waiters.clear();
+	}
+	function applyHolds() {
+		cancelHolds();
+		const hold = (el, frame) => holds.push(el.animate([frame, frame], {
+			duration: 0,
+			fill: "forwards"
+		}));
+		if (background && session?.scaled) hold(background, {
+			transform: `scale(${session.scale})`,
+			transformOrigin: session.origin
+		});
+		if (scrim) hold(scrim, { opacity: 1 });
+	}
+	function cancelHolds() {
+		for (const a of holds) a.cancel();
+		holds = [];
+	}
+	/**
+	* inert while the surface moves: clicks pass through to the page below (so
+	* a card can be clicked again mid-close) and nothing inside takes focus.
+	* An attribute, not an inline style, so nothing lingers after cleanup.
+	*/
+	function lock(ms) {
+		if (!sheet.inert) runUndo.attr(sheet, "inert", "");
+		if (scrim && !scrim.inert) runUndo.attr(scrim, "inert", "");
+		clearTimeout(lockTimer);
+		if (ms !== void 0) {
+			const owner = run;
+			lockTimer = setTimeout(() => {
+				if (run === owner) runUndo.flush();
+			}, ms);
+		}
+	}
+	function unlock() {
+		clearTimeout(lockTimer);
+		runUndo.flush();
+	}
+	/** Keeps clicks and keys off the page behind while the sheet opens and stays open. */
+	function shield() {
+		if (background && !background.inert && inertUndo.size === 0) inertUndo.attr(background, "inert", "");
+	}
+	function focusIn() {
+		const target = sheet.querySelector("[data-morph-focus]") ?? sheet.querySelector("a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])");
+		if (target && !target.closest(`[data-morph-ghost]`)) {
+			target.focus({ preventScroll: true });
+			return;
+		}
+		if (!sheet.hasAttribute("tabindex")) sessionUndo.attr(sheet, "tabindex", "-1");
+		sheet.focus({ preventScroll: true });
+	}
+	function focusOut() {
+		const active = document.activeElement;
+		if ((!active || active === document.body || sheet.contains(active)) && returnTo?.isConnected) returnTo.focus({ preventScroll: true });
+	}
+	function watch(r) {
+		const owner = gen;
+		Promise.allSettled(r.anims.map((a) => a.finished)).then(() => {
+			if (owner !== gen || run !== r) return;
+			settle(reachedBy(r));
+		});
+	}
+	function reachedBy(r) {
+		return r.kind === "open" === (r.dir === 1) ? "open" : "closed";
+	}
+	function settle(target) {
+		const r = run;
+		run = null;
+		if (r) {
+			for (const a of r.anims) a.cancel();
+			for (const ghost of r.ghosts) ghost.remove();
+		}
+		unlock();
+		if (target === "open") {
+			applyHolds();
+			shield();
+			focusIn();
+			setState("open");
+		} else {
+			deactivate(sheet);
+			cancelHolds();
+			inertUndo.flush();
+			focusOut();
+			sessionUndo.flush();
+			sheet.hidden = true;
+			if (scrim) scrim.hidden = true;
+			setState("closed");
+			current = null;
+			returnTo = null;
+			session = null;
+		}
+		resolveWaiters(target);
+	}
+	/** Plays the current run the other way from where it is now. */
+	function flip(r) {
+		gen++;
+		r.dir = r.dir === 1 ? -1 : 1;
+		const target = reachedBy(r);
+		setState(target === "open" ? "opening" : "closing");
+		if (target === "closed") {
+			inertUndo.flush();
+			lock();
+		} else {
+			unlock();
+			shield();
+		}
+		const elapsed = Math.max(0, ...r.anims.map(time));
+		const now = Number(document.timeline.currentTime ?? NaN);
+		const destinationMs = durationFor(target === "open" ? "open" : "close", timing, plan?.choreography === "fade");
+		if (elapsed <= 0 || !Number.isFinite(now) || destinationMs <= 0) {
+			settle(target);
+			return;
+		}
+		const speed = r.duration > 0 ? r.duration / destinationMs : 1;
+		const rate = r.dir * speed;
+		for (const a of r.anims) {
+			a.pause();
+			a.playbackRate = rate;
+			a.currentTime = elapsed;
+			a.play();
+		}
+		watch(r);
+	}
+	function begin(card) {
+		const owner = ++gen;
+		activate(sheet);
+		current = card;
+		session = {
+			scroll: null,
+			scaled: false,
+			scale: 1,
+			origin: "50% 30%"
+		};
+		setState("opening");
+		const result = wait("open");
+		let prepared;
+		try {
+			prepared = hooks.prepare?.(card);
+		} catch (error) {
+			settle("closed");
+			throw error;
+		}
+		if (prepared && typeof prepared.then === "function") prepared.then(() => {
+			if (owner === gen) start();
+		}, (error) => {
+			if (owner !== gen) return;
+			settle("closed");
+			if (typeof reportError === "function") reportError(error);
+		});
+		else start();
+		return result;
+	}
+	function start() {
+		try {
+			startOpen();
+		} catch (error) {
+			gen++;
+			settle("closed");
+			throw error;
+		}
+	}
+	function startOpen() {
+		const card = current;
+		const isReduced = reduced();
+		const s = session;
+		if (card) s.scroll = saveScroll(hooks.scroller ?? scrollerOf(card));
+		if (background && !isReduced && timing.backgroundScale !== false && !hasFixedDescendant(background)) {
+			s.scaled = true;
+			s.scale = timing.backgroundScale;
+			s.origin = backgroundOriginFor(background);
+		}
+		sheet.hidden = false;
+		if (scrim) scrim.hidden = false;
+		sheet.scrollTop = 0;
+		for (const el of sheet.querySelectorAll("*")) if (el.scrollTop > 0) el.scrollTop = 0;
+		const g = measureTransition("open", card, isReduced, {
+			...hooks,
+			sheet,
+			backgroundScaled: s.scaled
+		});
+		plan = g.plan;
+		returnTo = pickReturn(card);
+		shield();
+		const r = {
+			kind: "open",
+			dir: 1,
+			anims: [],
+			ghosts: [],
+			duration: durationFor("open", timing, g.plan.choreography === "fade")
+		};
+		run = r;
+		buildAnimations(r, g, {
+			sheet,
+			background,
+			scrim,
+			timing,
+			session
+		});
+		lock(.5 * (g.plan.choreography === "morph" ? timing.duration.open : choreography.fade.surface * 2) * timing.timeScale);
+		watch(r);
+	}
+	function pickReturn(card) {
+		const active = document.activeElement;
+		if (card) return active && card.contains(active) ? active : focusTargetIn(card);
+		return active && active !== document.body && !sheet.contains(active) ? active : null;
+	}
+	function beginClose() {
+		try {
+			return startClose();
+		} catch (error) {
+			gen++;
+			settle("closed");
+			throw error;
+		}
+	}
+	function startClose() {
+		gen++;
+		const isReduced = reduced();
+		setState("closing");
+		cancelHolds();
+		if (timing.restoreScroll && session?.scroll) restoreScroll(session.scroll);
+		const g = measureTransition("close", current, isReduced, {
+			...hooks,
+			sheet,
+			backgroundScaled: Boolean(session?.scaled)
+		});
+		plan = g.plan;
+		inertUndo.flush();
+		const r = {
+			kind: "close",
+			dir: 1,
+			anims: [],
+			ghosts: [],
+			duration: durationFor("close", timing, g.plan.choreography === "fade")
+		};
+		run = r;
+		buildAnimations(r, g, {
+			sheet,
+			background,
+			scrim,
+			timing,
+			session
+		});
+		lock();
+		watch(r);
+		return wait("closed");
+	}
+	function open(card) {
+		if (destroyed) return Promise.resolve(false);
+		const target = card ?? null;
+		if (state === "open") return Promise.resolve(target === current);
+		if (state === "opening") return target === current ? wait("open") : Promise.resolve(false);
+		if (state === "closing") {
+			if (run && target !== null && target === current) {
+				const result = wait("open");
+				flip(run);
+				return result;
+			}
+			gen++;
+			settle("closed");
+		}
+		return begin(target);
+	}
+	function close(opts) {
+		if (destroyed || state === "closed") return Promise.resolve(state === "closed");
+		if (state === "closing") return wait("closed");
+		let retarget = opts !== void 0 && "to" in opts;
+		let target = retarget ? opts?.to ?? null : current;
+		if (!retarget && hooks.resolveCard) {
+			const found = hooks.resolveCard(current);
+			if (found !== current) {
+				retarget = true;
+				target = found;
+			}
+		}
+		if (state === "opening") {
+			if (!run) {
+				gen++;
+				settle("closed");
+				return Promise.resolve(true);
+			}
+			if (target === current) {
+				const result = wait("closed");
+				flip(run);
+				return result;
+			}
+			gen++;
+			settle("open");
+		}
+		if (retarget) {
+			current = target;
+			returnTo = target ? focusTargetIn(target) : null;
+		}
+		return beginClose();
+	}
+	const onKey = (event) => {
+		if (event.key !== "Escape" || event.defaultPrevented || !timing.closeOnEscape || !isTopLayer(sheet)) return;
+		event.preventDefault();
+		if (state === "open" || state === "opening") close();
+	};
+	const onClick = (event) => {
+		const trigger = event.target?.closest?.("[data-morph-close]");
+		if (trigger && !trigger.closest(`[data-morph-ghost]`)) close();
+	};
+	document.addEventListener("keydown", onKey);
+	sheet.addEventListener("click", onClick);
+	scrim?.addEventListener("click", onClick);
+	return {
+		open,
+		close,
+		get state() {
+			return state;
+		},
+		get card() {
+			return current;
+		},
+		get plan() {
+			return plan;
+		},
+		setOptions(next) {
+			timing = resolveTiming(next, timing);
+			hooks = {
+				prepare: "prepare" in next ? next.prepare : hooks.prepare,
+				onStateChange: "onStateChange" in next ? next.onStateChange : hooks.onStateChange,
+				shared: "shared" in next ? next.shared : hooks.shared,
+				radius: "radius" in next ? next.radius : hooks.radius,
+				scroller: "scroller" in next ? next.scroller : hooks.scroller,
+				resolveCard: "resolveCard" in next ? next.resolveCard : hooks.resolveCard
+			};
+		},
+		destroy() {
+			if (destroyed) return;
+			gen++;
+			if (state !== "closed") settle("closed");
+			destroyed = true;
+			document.removeEventListener("keydown", onKey);
+			sheet.removeEventListener("click", onClick);
+			scrim?.removeEventListener("click", onClick);
+		}
+	};
+}
+//#endregion
+//#region src/use-morph.ts
+/**
+* useMorph: the public API. The sheet stays mounted; the hook shows and hides
+* it. The engine underneath (createMorph in ./morph) has no React in it and
+* is not part of the package's exports.
+*
+*   const morph = useMorph<Delivery>();
+*   <main ref={morph.backgroundRef}>
+*     <article ref={morph.cardRef(d.id)} onClick={() => morph.open({ key: d.id, item: d })}>…</article>
+*   </main>
+*   <div ref={morph.scrimRef} data-morph-close hidden />
+*   <section ref={morph.sheetRef} hidden>{morph.item && <Detail d={morph.item} />}</section>
+*/
+const isKey = (value) => typeof value === "string" || typeof value === "number";
+const isElement = (value) => typeof value === "object" && value !== null && "nodeType" in value;
+function useMorph(options = {}) {
+	const [state, setState] = useState("closed");
+	const [item, setItem] = useState(null);
+	const [sheet, setSheet] = useState(null);
+	const [background, setBackground] = useState(null);
+	const [scrim, setScrim] = useState(null);
+	const instance = useRef(null);
+	const pending = useRef(null);
+	const queued = useRef(null);
+	const mounted = useRef(false);
+	const initialized = useRef(false);
+	const latest = useRef(options);
+	latest.current = options;
+	const cards = useRef(/* @__PURE__ */ new Map());
+	const refs = useRef(/* @__PURE__ */ new Map());
+	const openKey = useRef(null);
+	const cardFor = useCallback((key) => {
+		const el = cards.current.get(key);
+		return el?.isConnected ? el : null;
+	}, []);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+			queueMicrotask(() => {
+				if (mounted.current) return;
+				queued.current?.resolve(false);
+				queued.current = null;
+			});
+		};
+	}, []);
+	useEffect(() => {
+		if (!sheet) return;
+		const morph = createMorph({
+			...latest.current,
+			sheet,
+			background,
+			scrim,
+			prepare: () => {
+				const next = pending.current;
+				pending.current = null;
+				openKey.current = next?.key ?? null;
+				if (next) flushSync(next.apply);
+			},
+			resolveCard: (card) => card?.isConnected || openKey.current === null ? card : cardFor(openKey.current) || card,
+			onStateChange: (next, card) => {
+				setState(next);
+				if (next === "closed") {
+					openKey.current = null;
+					setItem(null);
+				}
+				latest.current.onStateChange?.(next, card);
+			}
+		});
+		instance.current = morph;
+		initialized.current = true;
+		queueMicrotask(() => {
+			if (!mounted.current || instance.current !== morph) return;
+			const job = queued.current;
+			queued.current = null;
+			if (job) try {
+				job.run().then(job.resolve, job.reject);
+			} catch (error) {
+				job.reject(error);
+			}
+		});
+		return () => {
+			morph.destroy();
+			if (instance.current === morph) instance.current = null;
+			setState("closed");
+		};
+	}, [
+		sheet,
+		background,
+		scrim
+	]);
+	const applyOptions = useCallback(() => {
+		const next = latest.current;
+		instance.current?.setOptions({
+			...resolveTiming(next, defaults),
+			shared: next.shared,
+			radius: next.radius,
+			scroller: next.scroller
+		});
+	}, []);
+	useEffect(applyOptions);
+	const cardRef = useCallback((key) => {
+		let ref = refs.current.get(key);
+		if (!ref) {
+			ref = (el) => {
+				if (el) {
+					cards.current.set(key, el);
+					return;
+				}
+				queueMicrotask(() => {
+					if (cards.current.get(key)?.isConnected) return;
+					cards.current.delete(key);
+					refs.current.delete(key);
+				});
+			};
+			refs.current.set(key, ref);
+		}
+		return ref;
+	}, []);
+	const open = useCallback((target, update) => {
+		let card = null;
+		let key = null;
+		let hasItem = false;
+		let nextItem = null;
+		if (isKey(target)) key = target;
+		else if (isElement(target)) card = target;
+		else if (target) {
+			key = target.key ?? null;
+			card = target.card ?? null;
+			if ("item" in target) {
+				hasItem = true;
+				nextItem = target.item ?? null;
+			}
+		}
+		if (!card && key !== null) card = cardFor(key);
+		const apply = () => {
+			if (hasItem) setItem(() => nextItem);
+			update?.();
+		};
+		const morph = instance.current;
+		if (!morph) {
+			if (!initialized.current && mounted.current) {
+				queued.current?.resolve(false);
+				return new Promise((resolve, reject) => {
+					queued.current = {
+						run: () => open(target, update),
+						resolve,
+						reject
+					};
+				});
+			}
+			apply();
+			return Promise.resolve(false);
+		}
+		applyOptions();
+		pending.current = {
+			key,
+			apply
+		};
+		try {
+			return morph.open(card);
+		} finally {
+			pending.current = null;
+		}
+	}, [cardFor, applyOptions]);
+	const close = useCallback((opts) => {
+		queued.current?.resolve(false);
+		queued.current = null;
+		const morph = instance.current;
+		if (!morph) return Promise.resolve(true);
+		applyOptions();
+		if (!opts || !("to" in opts)) return morph.close();
+		const to = opts.to ?? null;
+		return morph.close({ to: isKey(to) ? cardFor(to) : to });
+	}, [cardFor, applyOptions]);
+	return useMemo(() => ({
+		sheetRef: setSheet,
+		backgroundRef: setBackground,
+		scrimRef: setScrim,
+		cardRef,
+		state,
+		item,
+		open,
+		close,
+		get instance() {
+			return instance.current;
+		}
+	}), [
+		state,
+		item,
+		cardRef,
+		open,
+		close
+	]);
+}
+//#endregion
+export { choreography, defaults, useMorph };
+
+//# sourceMappingURL=index.js.map