beez-ui 2.6.1 → 2.7.0

package/dist/motion/glide-indicator.js

@@ -47,42 +47,81 @@ export const GLIDE_PRESETS = {
 export const GLIDE_TARGET_ATTRIBUTE = "data-glide-target";
 /** Marks items whose transitions, including pseudo-element ones, are suspended during a glide. */
 export const GLIDE_FREEZE_ATTRIBUTE = "data-glide-freeze";
-/** Converts a viewport rectangle into the container's scrolling coordinate space. */
+/** Laid-out size of the border box, unaffected by any transform on the element or its ancestors. */
+function layoutSize(element) {
+	const style = getComputedStyle(element);
+	const width = Number.parseFloat(style.width);
+	const height = Number.parseFloat(style.height);
+	if (!Number.isFinite(width) || !Number.isFinite(height)) {
+		return {
+			width: element.offsetWidth,
+			height: element.offsetHeight
+		};
+	}
+	if (style.boxSizing === "border-box") return {
+		width,
+		height
+	};
+	const sum = (...values) => values.reduce((total, value) => total + (Number.parseFloat(value) || 0), 0);
+	return {
+		width: width + sum(style.paddingLeft, style.paddingRight, style.borderLeftWidth, style.borderRightWidth),
+		height: height + sum(style.paddingTop, style.paddingBottom, style.borderTopWidth, style.borderBottomWidth)
+	};
+}
+/**
+* Converts a viewport rectangle into the container's own scrolling coordinate space. A container
+* still scaling in (a menu or listbox entrance) paints everything inside it smaller, so painted
+* distances are divided by that scale to land where absolute positioning places the copy.
+*/
 function toContainerBox(container, rect) {
 	const origin = container.getBoundingClientRect();
+	const layout = layoutSize(container);
+	const scaleX = layout.width > 0 && origin.width > 0 ? origin.width / layout.width : 1;
+	const scaleY = layout.height > 0 && origin.height > 0 ? origin.height / layout.height : 1;
 	return {
-		left: rect.left - origin.left - container.clientLeft + container.scrollLeft,
-		top: rect.top - origin.top - container.clientTop + container.scrollTop,
-		width: rect.width,
-		height: rect.height
+		left: (rect.left - origin.left) / scaleX - container.clientLeft + container.scrollLeft,
+		top: (rect.top - origin.top) / scaleY - container.clientTop + container.scrollTop,
+		width: rect.width / scaleX,
+		height: rect.height / scaleY
 	};
 }
-/** Translation an item's own running entrance adds, read from its computed `matrix()`. */
-function inFlightTranslation(item) {
-	const values = /^matrix\(([^)]+)\)$/.exec(getComputedStyle(item).transform);
+/** Scale and translation an item's own running entrance adds, read from its computed `matrix()`. */
+function inFlightTransform(item) {
+	const style = getComputedStyle(item);
+	const values = /^matrix\(([^)]+)\)$/.exec(style.transform);
+	const [originX = 0, originY = 0] = style.transformOrigin.split(" ").map(Number.parseFloat);
 	if (!values) return {
+		scaleX: 1,
+		scaleY: 1,
 		x: 0,
-		y: 0
+		y: 0,
+		originX,
+		originY
 	};
 	const parts = values[1].split(",").map(Number.parseFloat);
 	return {
+		scaleX: parts[0] || 1,
+		scaleY: parts[3] || 1,
 		x: parts[4] ?? 0,
-		y: parts[5] ?? 0
+		y: parts[5] ?? 0,
+		originX,
+		originY
 	};
 }
 /**
-* Measures the highlight: the item box, or its positioned `::after` bar for line variants.
-* An item still sliding into place (staggered Select options) is measured where it will
-* settle, so the highlight does not land offset and jump when the entrance ends.
+* Measures the highlight in the container's coordinates: the item box, or its positioned `::after`
+* bar for line variants. An item still entering (Select options settle from a slight scale) is
+* measured where it will rest, so the highlight neither lands undersized nor jumps when it ends.
 */
-function highlightBox(item, surface) {
-	const box = item.getBoundingClientRect();
-	const offset = inFlightTranslation(item);
+function highlightBox(container, item, surface) {
+	const painted = toContainerBox(container, item.getBoundingClientRect());
+	const motion = inFlightTransform(item);
+	// The entrance scales around the transform origin, so the resting corner sits that far back.
 	const rect = {
-		left: box.left - offset.x,
-		top: box.top - offset.y,
-		width: box.width,
-		height: box.height
+		left: painted.left - motion.x - motion.originX * (1 - motion.scaleX),
+		top: painted.top - motion.y - motion.originY * (1 - motion.scaleY),
+		width: painted.width / motion.scaleX,
+		height: painted.height / motion.scaleY
 	};
 	if (surface === "background") return rect;
 	const pseudo = getComputedStyle(item, "::after");
@@ -201,13 +240,13 @@ export function attachGlideIndicator(container, preset) {
 	/** Starts, or redirects, the glide from the previous highlight to the new active item. */
 	function glide(from, to) {
 		const surface = preset.surface(container);
-		const origin = overlay ? overlay.getBoundingClientRect() : highlightBox(from, surface);
+		const start = overlay ? toContainerBox(container, overlay.getBoundingClientRect()) : highlightBox(container, from, surface);
 		settle();
 		// The previous item drops its highlight instantly: the copy is what leaves it.
 		freezeTransitions(from)();
 		// Read the target's settled paint before any transition has a chance to start.
 		const thawTarget = freezeTransitions(to);
-		const destination = toContainerBox(container, highlightBox(to, surface));
+		const destination = highlightBox(container, to, surface);
 		const paint = highlightPaint(to, surface);
 		if (destination.width === 0 || destination.height === 0) {
 			thawTarget();
@@ -227,7 +266,6 @@ export function attachGlideIndicator(container, preset) {
 			zIndex: "-1",
 			margin: "0"
 		});
-		const start = toContainerBox(container, origin);
 		container.prepend(overlay);
 		releaseTarget = hideTarget(to, surface, thawTarget);
 		animation = animate(overlay, {

package/dist/motion/motion-slot.js

@@ -6,8 +6,8 @@ import { Slot } from "radix-ui";
 import { animate, hover, press, usePresence, frame } from "motion/react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { HOVER_CAPABLE_QUERY, MILLISECONDS_PER_SECOND, MOTION_ENTERING_ATTRIBUTE } from "../constants/motion.js";
-import { MOTION_EASE, MOTION_TIMING, MOTION_PRESS_SCALE, MOTION_SUBTLE_PRESS_SCALE, MOTION_TOGGLE_PRESS_SCALE, MOTION_HOVER_SCALE, MOTION_THUMB_SQUISH_SCALE, MOTION_CONTENT_DISTANCE, MOTION_INVALID_SHAKE_PX, MOTION_ITEM_CHECK_SCALE, MOTION_ICON_SWAP_SCALE, MOTION_CLOSE_BUTTON_SCALE, MOTION_LIST_ITEM_DISTANCE, MOTION_LIST_STAGGER_LIMIT, MOTION_EASE_IN_OUT, MOTION_REVEAL_BLUR_PX, MOTION_REVEAL_SCALE, MOTION_SHIMMER_TRANSLATE, MOTION_CARD_SHADOW_LIFT, MOTION_CARD_SHADOW_REST, SPRING_CHEVRON, SPRING_PANEL, SPRING_PRESS, SPRING_THUMB } from "./tokens.js";
-import { surfaceEnter, surfaceExit } from "./surface-keyframes.js";
+import { MOTION_EASE, MOTION_TIMING, MOTION_PRESS_SCALE, MOTION_SUBTLE_PRESS_SCALE, MOTION_TOGGLE_PRESS_SCALE, MOTION_HOVER_SCALE, MOTION_THUMB_SQUISH_SCALE, MOTION_CONTENT_DISTANCE, MOTION_ITEM_CHECK_SCALE, MOTION_ITEM_ENTER_SCALE, MOTION_ICON_SWAP_SCALE, MOTION_CLOSE_BUTTON_SCALE, MOTION_EASE_IN_OUT, MOTION_REVEAL_BLUR_PX, MOTION_REVEAL_SCALE, MOTION_SHIMMER_TRANSLATE, MOTION_CARD_SHADOW_LIFT, MOTION_CARD_SHADOW_REST, SPRING_CHEVRON, SPRING_PANEL, SPRING_POP, SPRING_PRESS, SPRING_THUMB } from "./tokens.js";
+import { surfaceEnter, surfaceExit, withRestingStyle } from "./surface-keyframes.js";
 import { useAttachedElement } from "./use-attached-element.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EASE_OUT = [...MOTION_EASE];
@@ -33,8 +33,6 @@ const ANIMATED_PROPERTIES = [
 	"filter",
 	"clipPath"
 ];
-/** Input groups draw the field frame; their controls are borderless. */
-const INPUT_GROUP_SLOT = "input-group";
 /** SVG attributes Motion writes to draw a stroke with `pathLength`. */
 const STROKE_DRAW_ATTRIBUTES = [
 	"pathLength",
@@ -44,7 +42,6 @@ const STROKE_DRAW_ATTRIBUTES = [
 /** Attributes whose changes re-announce a field's state with a subtle settle. */
 const FIELD_STATE_ATTRIBUTES = [
 	"data-state",
-	"aria-invalid",
 	"aria-selected",
 	"aria-checked",
 	"data-loading",
@@ -87,14 +84,6 @@ function rotationOf(transform) {
 	const { a, b } = matrixOf(transform);
 	return Math.atan2(b, a) * 180 / Math.PI;
 }
-/** Position of an item among its siblings of the same slot inside the closest list or menu. */
-function listIndexOf(element) {
-	const slot = element.getAttribute("data-slot");
-	const list = element.closest("[role=\"listbox\"],[role=\"menu\"],[role=\"list\"]");
-	if (!slot || !list) return 0;
-	const items = Array.from(list.querySelectorAll(`[data-slot="${slot}"]`));
-	return Math.max(items.indexOf(element), 0);
-}
 /** Checked and indeterminate indicators are visible; only unchecked ones are hidden. */
 function isChecked(element) {
 	const state = element.getAttribute("data-state");
@@ -192,13 +181,18 @@ export function MotionSlot(t0) {
 							snapshot[property_1] = value;
 						}
 					});
-					interruptedRef.current = snapshot;
+					interruptedRef.current = {
+						element,
+						values: snapshot
+					};
 				}
 				cleanups.forEach(_temp);
 				cancel();
 				restore();
 				element.removeAttribute(MOTION_ENTERING_ATTRIBUTE);
 			};
+			const interrupted = interruptedRef.current;
+			interruptedRef.current = null;
 			if (reduceMotion || !isPresent && element.hasAttribute("data-beez-theme-menu")) {
 				if (!isPresent) {
 					queueMicrotask(() => {
@@ -253,13 +247,15 @@ export function MotionSlot(t0) {
 				});
 			};
 			const tween = _temp2;
-			const interrupted = interruptedRef.current;
-			interruptedRef.current = null;
 			if (SURFACE_KINDS.includes(kind)) {
 				const step = isPresent ? surfaceEnter(element, kind) : surfaceExit(element, kind);
-				const keyframes_0 = { ...step.keyframes };
-				if (!isPresent && interrupted) {
-					Object.entries(interrupted).forEach((t10) => {
+				const computed_0 = getComputedStyle(element);
+				const keyframes_0 = withRestingStyle(step.keyframes, {
+					transform: computed_0.transform,
+					opacity: Number.parseFloat(computed_0.opacity)
+				});
+				if (interrupted?.element === element) {
+					Object.entries(interrupted.values).forEach((t10) => {
 						const [property_8, value_0] = t10;
 						const frames_0 = keyframes_0[property_8];
 						if (!Array.isArray(frames_0) || !value_0) {
@@ -298,11 +294,10 @@ export function MotionSlot(t0) {
 				if (kind === "icon-swap") {
 					play({
 						opacity: [0, 1],
-						transform: [`scale(${MOTION_ICON_SWAP_SCALE})`, "scale(1)"],
-						filter: ["blur(8px)", "blur(0px)"]
+						transform: [`scale(${MOTION_ICON_SWAP_SCALE})`, "scale(1)"]
 					}, {
-						duration: MOTION_TIMING.iconSwap,
-						ease: [...MOTION_EASE_IN_OUT]
+						...SPRING_POP,
+						opacity: tween(MOTION_TIMING.iconSwap)
 					});
 				} else {
 					if (kind === "item-check") {
@@ -315,16 +310,10 @@ export function MotionSlot(t0) {
 						});
 					} else {
 						if (kind === "list-item") {
-							const index = listIndexOf(element);
-							const position = Math.min(index, MOTION_LIST_STAGGER_LIMIT);
-							play(index < MOTION_LIST_STAGGER_LIMIT ? {
+							play({
 								opacity: [0, 1],
-								transform: [`translateY(${-MOTION_LIST_ITEM_DISTANCE}px)`, "translateY(0px)"],
-								filter: ["blur(3px)", "blur(0px)"]
-							} : { opacity: [0, 1] }, {
-								...tween(MOTION_TIMING.listItem),
-								delay: MOTION_TIMING.listDelay + position * MOTION_TIMING.listStagger
-							});
+								transform: [`scale(${MOTION_ITEM_ENTER_SCALE})`, "scale(1)"]
+							}, tween(MOTION_TIMING.listItem));
 						} else {
 							if (kind === "delayed-pop" && typeof element.animate === "function") {
 								const pop = element.animate({
@@ -356,8 +345,7 @@ export function MotionSlot(t0) {
 										if (kind === "message") {
 											play({
 												opacity: [0, 1],
-												transform: [`translateY(${-MOTION_CONTENT_DISTANCE}px)`, "translateY(0px)"],
-												filter: ["blur(4px)", "blur(0px)"]
+												transform: [`scale(${MOTION_ITEM_ENTER_SCALE})`, "scale(1)"]
 											}, tween(MOTION_TIMING.message));
 										} else {
 											if (kind === "fade" || kind === "card" || kind === "row") {
@@ -450,26 +438,10 @@ export function MotionSlot(t0) {
 				};
 				element.addEventListener("focusin", settleField);
 				cleanups.push(() => element.removeEventListener("focusin", settleField));
-				const isGroup = element.getAttribute("data-slot") === INPUT_GROUP_SLOT;
-				const isGroupControl = !isGroup && element.parentElement?.closest(`[data-slot="${INPUT_GROUP_SLOT}"]`) != null;
-				const readInvalid = () => isGroup ? element.querySelector("[data-slot][aria-invalid=\"true\"]") !== null : element.getAttribute("aria-invalid") === "true";
-				let wasInvalid = readInvalid();
-				const observer = new MutationObserver((records) => {
-					const isInvalid = readInvalid();
-					const becameInvalid = isInvalid && !wasInvalid;
-					wasInvalid = isInvalid;
-					if (becameInvalid && !isGroupControl && !element.hasAttribute("hidden")) {
-						play({ transform: MOTION_INVALID_SHAKE_PX.map(_temp3) }, { duration: MOTION_TIMING.shake });
-					} else {
-						if (records.some((record) => record.target === element && record.attributeName !== "aria-invalid")) {
-							settleField();
-						}
-					}
-				});
+				const observer = new MutationObserver(settleField);
 				observer.observe(element, {
 					attributes: true,
-					attributeFilter: FIELD_STATE_ATTRIBUTES,
-					subtree: isGroup
+					attributeFilter: FIELD_STATE_ATTRIBUTES
 				});
 				cleanups.push(() => observer.disconnect());
 			}
@@ -477,9 +449,9 @@ export function MotionSlot(t0) {
 				let wasChecked = isChecked(element);
 				const strokeDraws = new Set();
 				const settleStrokes = () => {
-					strokeDraws.forEach(_temp4);
+					strokeDraws.forEach(_temp3);
 					strokeDraws.clear();
-					element.querySelectorAll("path").forEach(_temp5);
+					element.querySelectorAll("path").forEach(_temp4);
 				};
 				cleanups.push(settleStrokes);
 				const observer_0 = new MutationObserver(() => {
@@ -644,7 +616,7 @@ export function MotionSlot(t0) {
 									release.cancel();
 									squish = null;
 								}
-							}).catch(_temp6);
+							}).catch(_temp5);
 						};
 					}));
 				}
@@ -697,16 +669,13 @@ export function MotionSlot(t0) {
 	}
 	return t6;
 }
-function _temp6() {}
-function _temp5(path) {
+function _temp5() {}
+function _temp4(path) {
 	STROKE_DRAW_ATTRIBUTES.forEach((attribute) => path.removeAttribute(attribute));
 }
-function _temp4(draw) {
+function _temp3(draw) {
 	return draw.cancel();
 }
-function _temp3(offset) {
-	return `translateX(${offset}px)`;
-}
 function _temp2(duration) {
 	return {
 		duration,

package/dist/motion/surface-keyframes.d.ts

@@ -7,7 +7,18 @@ export interface MotionStep {
     keyframes: DOMKeyframesDefinition;
     transition: AnimationOptions;
 }
-/** Entrance playback matching the beui surface family for each kind. */
+/** Entrance playback for each surface kind, on Arc's motion presets. */
 export declare function surfaceEnter(element: Element, kind: SurfaceKind): MotionStep;
+/** Transform and opacity a surface rests at, which its caller may set through a class or style. */
+export interface RestingStyle {
+    transform: string;
+    opacity: number;
+}
+/**
+ * Composes surface playback with the surface's resting transform and opacity, so a caller-owned
+ * tilt, offset or translucency holds through the whole entrance and exit instead of being
+ * replaced by identity and full opacity, then snapping back once playback restores it.
+ */
+export declare function withRestingStyle(keyframes: DOMKeyframesDefinition, resting: RestingStyle): DOMKeyframesDefinition;
 /** Exit playback: brief and eased so dismissal never blocks the next interaction. */
 export declare function surfaceExit(element: Element, kind: SurfaceKind): MotionStep;

package/dist/motion/surface-keyframes.js

@@ -1,7 +1,7 @@
-import { MOTION_CENTER_MORPH_FOLDED_PERCENT, MOTION_DIALOG_DISTANCE, MOTION_EASE, MOTION_EASE_DRAWER, MOTION_EASE_UNFOLD, MOTION_SURFACE_CLIP_BLEED_PX, MOTION_SURFACE_CLIP_PERCENT, MOTION_SURFACE_SCALE, MOTION_TIMING, MOTION_TOOLTIP_DISTANCE, SPRING_PANEL, SPRING_TOOLTIP } from "./tokens.js";
+import { MOTION_DIALOG_DISTANCE, MOTION_DIALOG_EXIT_DISTANCE, MOTION_EASE, MOTION_EASE_DRAWER, MOTION_EASE_STANDARD, MOTION_EXIT_SCALE, MOTION_SURFACE_CLIP_BLEED_PX, MOTION_SURFACE_CLIP_PERCENT, MOTION_SURFACE_SCALE, MOTION_TIMING, MOTION_TOOLTIP_DISTANCE, MOTION_TOOLTIP_SCALE, SPRING_PANEL } from "./tokens.js";
 const EASE_OUT = [...MOTION_EASE];
 const EASE_DRAWER = [...MOTION_EASE_DRAWER];
-const EASE_UNFOLD = [...MOTION_EASE_UNFOLD];
+const EASE_STANDARD = [...MOTION_EASE_STANDARD];
 const SIDES = [
 	"top",
 	"right",
@@ -70,45 +70,14 @@ function collapsedClip(side, align) {
 	const [top, bottom] = crossAxis(align);
 	return side === "right" ? `inset(${top} ${hidden} ${bottom} ${OPEN_EDGE})` : `inset(${top} ${OPEN_EDGE} ${bottom} ${hidden})`;
 }
-/** Computed radius of each corner, clockwise from the top left, as border-radius serializes it. */
-const CORNER_RADIUS_PROPERTIES = [
-	"borderTopLeftRadius",
-	"borderTopRightRadius",
-	"borderBottomRightRadius",
-	"borderBottomLeftRadius"
-];
-/**
-* Builds the `round` part of an inset clip that repeats the surface's own corners, each grown by
-* the bleed so the clip edge stays parallel to the border. A corner serializes as one radius or
-* as a horizontal and vertical pair (elliptical), in pixels or percentages of the box.
-*/
-function bleedingCornerRadii(element) {
-	const computed = getComputedStyle(element);
-	const grow = (radius) => `calc(${radius} + ${MOTION_SURFACE_CLIP_BLEED_PX}px)`;
-	const corners = CORNER_RADIUS_PROPERTIES.map((property) => {
-		const [horizontal = "0px", vertical = horizontal] = computed[property].trim().split(/\s+/);
-		return {
-			horizontal: grow(horizontal),
-			vertical: grow(vertical)
-		};
-	});
-	const horizontals = corners.map((corner) => corner.horizontal).join(" ");
-	const verticals = corners.map((corner) => corner.vertical).join(" ");
-	return `round ${horizontals} / ${verticals}`;
-}
 /**
-* Folded and unfolded clips of a center-morph surface. Both share the surface's own corners,
-* so the shape matches the panel once unfolded and the clip never spends its last frames
-* rounding corners.
+* Arc's dialog leave: a short tween on the standard curve, so it never lingers and a reopen
+* retargets from wherever the panel is.
 */
-function centerMorphClips(element) {
-	const round = bleedingCornerRadii(element);
-	const folded = `${MOTION_CENTER_MORPH_FOLDED_PERCENT}%`;
-	return {
-		folded: `inset(${folded} ${folded} ${folded} ${folded} ${round})`,
-		unfolded: `inset(${OPEN_EDGE} ${OPEN_EDGE} ${OPEN_EDGE} ${OPEN_EDGE} ${round})`
-	};
-}
+const DIALOG_LEAVE = {
+	duration: MOTION_TIMING.fast,
+	ease: EASE_STANDARD
+};
 /** Edge-panel travel: fully off-screen on the side the sheet is attached to. */
 function sheetOffset(element) {
 	const side = readPlacement(element).side ?? "right";
@@ -129,7 +98,7 @@ function sheetOffset(element) {
 		y: "0%"
 	};
 }
-/** Entrance playback matching the beui surface family for each kind. */
+/** Entrance playback for each surface kind, on Arc's motion presets. */
 export function surfaceEnter(element, kind) {
 	const { side, align } = readPlacement(element);
 	if (kind === "overlay") {
@@ -142,42 +111,33 @@ export function surfaceEnter(element, kind) {
 		};
 	}
 	if (kind === "tooltip") {
+		// Arc's tooltip: a short rise from its trigger and a fade, without blur.
 		const offset = offsetAwayFromTrigger(side, MOTION_TOOLTIP_DISTANCE);
 		return {
 			keyframes: {
 				opacity: [0, 1],
-				transform: [transform(offset.x, offset.y, .9), transform(0, 0)],
-				filter: ["blur(5px)", "blur(0px)"]
+				transform: [transform(offset.x, offset.y, MOTION_TOOLTIP_SCALE), transform(0, 0)]
 			},
 			transition: {
-				...SPRING_TOOLTIP,
-				opacity: {
-					duration: MOTION_TIMING.fast,
-					ease: EASE_OUT
-				},
-				filter: {
-					duration: MOTION_TIMING.enter,
-					ease: EASE_OUT
-				}
+				duration: MOTION_TIMING.fast,
+				ease: EASE_OUT
 			}
 		};
 	}
-	if (kind === "dialog") {
+	// The deprecated center morph now plays Arc's dialog transition, like the library's own dialogs.
+	if (kind === "dialog" || kind === "center-morph") {
+		// Arc's dialog: the panel rises and scales in on the smooth spring while it fades in quickly.
 		return {
 			keyframes: {
 				opacity: [0, 1],
-				transform: [transform(0, MOTION_DIALOG_DISTANCE, .97), transform(0, 0)]
+				transform: [transform(0, MOTION_DIALOG_DISTANCE, MOTION_SURFACE_SCALE), transform(0, 0)]
 			},
-			transition: SPRING_PANEL
-		};
-	}
-	if (kind === "center-morph") {
-		const { folded, unfolded } = centerMorphClips(element);
-		return {
-			keyframes: { clipPath: [folded, unfolded] },
 			transition: {
-				duration: MOTION_TIMING.centerMorph,
-				ease: EASE_UNFOLD
+				...SPRING_PANEL,
+				opacity: {
+					duration: MOTION_TIMING.fast,
+					ease: EASE_OUT
+				}
 			}
 		};
 	}
@@ -211,6 +171,22 @@ export function surfaceEnter(element, kind) {
 		}
 	};
 }
+/**
+* Composes surface playback with the surface's resting transform and opacity, so a caller-owned
+* tilt, offset or translucency holds through the whole entrance and exit instead of being
+* replaced by identity and full opacity, then snapping back once playback restores it.
+*/
+export function withRestingStyle(keyframes, resting) {
+	const composed = { ...keyframes };
+	const { transform, opacity } = composed;
+	if (Array.isArray(transform) && resting.transform && resting.transform !== "none") {
+		composed.transform = transform.map((value) => `${String(value)} ${resting.transform}`);
+	}
+	if (Array.isArray(opacity) && Number.isFinite(resting.opacity) && resting.opacity !== 1) {
+		composed.opacity = opacity.map((value) => Number(value) * resting.opacity);
+	}
+	return composed;
+}
 /** Exit playback: brief and eased so dismissal never blocks the next interaction. */
 export function surfaceExit(element, kind) {
 	const exitTween = {
@@ -220,40 +196,29 @@ export function surfaceExit(element, kind) {
 	if (kind === "overlay") {
 		return {
 			keyframes: { opacity: [1, 0] },
-			transition: exitTween
+			transition: DIALOG_LEAVE
 		};
 	}
 	if (kind === "tooltip") {
-		const offset = offsetAwayFromTrigger(readPlacement(element).side, MOTION_TOOLTIP_DISTANCE * .6);
+		// Arc's tooltip leaves in place, shrinking slightly while it fades, on the instant timing.
 		return {
 			keyframes: {
 				opacity: [1, 0],
-				transform: [transform(0, 0), transform(offset.x, offset.y, .94)],
-				filter: ["blur(0px)", "blur(3px)"]
+				transform: [transform(0, 0), transform(0, 0, MOTION_EXIT_SCALE)]
 			},
-			transition: exitTween
+			transition: {
+				duration: MOTION_TIMING.instant,
+				ease: EASE_STANDARD
+			}
 		};
 	}
-	if (kind === "dialog") {
+	if (kind === "dialog" || kind === "center-morph") {
 		return {
 			keyframes: {
 				opacity: [1, 0],
-				transform: [transform(0, 0), transform(0, MOTION_DIALOG_DISTANCE, .98)]
+				transform: [transform(0, 0), transform(0, MOTION_DIALOG_EXIT_DISTANCE, MOTION_EXIT_SCALE)]
 			},
-			transition: {
-				duration: MOTION_TIMING.enter,
-				ease: EASE_OUT
-			}
-		};
-	}
-	if (kind === "center-morph") {
-		const { folded, unfolded } = centerMorphClips(element);
-		return {
-			keyframes: { clipPath: [unfolded, folded] },
-			transition: {
-				duration: MOTION_TIMING.centerMorphFold,
-				ease: EASE_UNFOLD
-			}
+			transition: DIALOG_LEAVE
 		};
 	}
 	if (kind === "sheet") {