beez-ui 2.6.2 → 2.7.1

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") {

package/dist/motion/tokens.d.ts

@@ -1,30 +1,49 @@
-/**
- * Defines the timing, curves and physics shared by Motion animations, aligned with beui.dev/components/motion.
- * Public: consumers animate their own product surfaces with these tokens so they move like the library.
- */
 export declare const MOTION_TIMING: {
-    readonly fast: 0.14;
-    readonly enter: 0.18;
-    readonly message: 0.2;
-    readonly panel: 0.22;
-    readonly overlay: 0.2;
-    readonly exit: 0.12;
+    /** Arc `duration.instant`: color answers and fades that must feel immediate. */
+    readonly instant: 0.12;
+    /** Arc `duration.fast`: small fades, the opacity of a spring entrance, and dialog exits. */
+    readonly fast: 0.16;
+    /** Arc `duration.standard`: entrance tweens. */
+    readonly enter: 0.24;
+    /** Arc `duration.standard`: tween length for a deliberate on-screen change. */
+    readonly standard: 0.24;
+    /** Arc `duration.considered`: the slowest tween, for large layout changes. */
+    readonly considered: 0.48;
+    /** Arc `duration.standard`: inline messages that appear next to the content they describe. */
+    readonly message: 0.24;
+    /** Arc `duration.standard`: opacity of panels whose size moves on a spring. */
+    readonly panel: 0.24;
+    /** Arc `duration.standard`: scrims fading in behind dialogs and sheets. */
+    readonly overlay: 0.24;
+    /** Arc `duration.exit`: leaving is faster than arriving. */
+    readonly exit: 0.18;
     readonly surfaceClip: 0.32;
+    /**
+     * @deprecated Invalid fields no longer shake: the error is told by color and message. Kept for consumers that
+     * animate their own fields.
+     */
     readonly shake: 0.45;
     readonly checkDraw: 0.3;
     readonly checkDrawDelay: 0.04;
-    readonly iconSwap: 0.2;
-    readonly listItem: 0.18;
+    /** Arc `duration.fast`: the fade of an icon swapped in place; its scale rides `SPRING_POP`. */
+    readonly iconSwap: 0.16;
+    /** Arc `duration.fast`: options fading in with their list. */
+    readonly listItem: 0.16;
     readonly listDelay: 0.05;
+    /** Arc `stagger.item`. */
     readonly listStagger: 0.035;
     readonly closeEnter: 0.2;
     readonly closeDelay: 0.16;
+    /** Arc `duration.standard`: edge panels leaving the viewport. */
     readonly sheetExit: 0.24;
-    /** Dialog surface unfolding from its center toward every edge. */
+    /**
+     * @deprecated Dialogs no longer unfold from their center; they rise and scale in on `SPRING_PANEL`. Kept for
+     * consumers that animate their own surfaces with it.
+     */
     readonly centerMorph: 0.43;
     /**
-     * Dialog surface folding back to its center. Shorter than the unfold: the page stays hidden
-     * from assistive technology and focus returns to the trigger only once the fold finishes.
+     * @deprecated Dialogs no longer fold back to their center; they leave in `MOTION_TIMING.fast`. Kept for consumers
+     * that animate their own surfaces with it.
      */
     readonly centerMorphFold: 0.24;
     readonly reveal: 0.4;
@@ -32,96 +51,95 @@ export declare const MOTION_TIMING: {
     readonly pop: 0.32;
     /** Height of expanding and collapsing regions. */
     readonly collapse: 0.26;
+    /** Arc `duration.standard`. */
     readonly monthSwap: 0.24;
     readonly cursorBlink: 1;
     readonly skeleton: 1.8;
 };
 /** Items beyond this position share the last stagger delay, so long lists never lag behind. */
 export declare const MOTION_LIST_STAGGER_LIMIT = 10;
-/** Strong ease-out used for entrances; weak defaults such as `ease-out` feel sluggish. */
+/** Arc `ease.enter`: strong ease-out for entrances; weak defaults such as `ease-out` feel sluggish. */
 export declare const MOTION_EASE: readonly [0.16, 1, 0.3, 1];
-/** Symmetric curve for looping or reversible effects. */
-export declare const MOTION_EASE_IN_OUT: readonly [0.77, 0, 0.175, 1];
+/** Arc `ease.exit`: accelerates away, for elements leaving the screen. */
+export declare const MOTION_EASE_EXIT: readonly [0.7, 0, 0.84, 0];
+/** Arc `ease.standard`: color and opacity changes, and quick exits that must not linger. */
+export declare const MOTION_EASE_STANDARD: readonly [0.22, 1, 0.36, 1];
+/** Arc `ease.inOut`: elements that move while already on screen, and looping effects. */
+export declare const MOTION_EASE_IN_OUT: readonly [0.65, 0, 0.35, 1];
 /** Drawer curve for edge panels leaving the viewport. */
 export declare const MOTION_EASE_DRAWER: readonly [0.32, 0.72, 0, 1];
 /**
  * Near-linear curve for the center morph: a spring or strong ease-out would resolve the clip
  * early and spend the last frames barely moving, so the whole duration reads as unfolding.
+ * @deprecated Dialogs no longer unfold from their center. Kept for consumers that animate their own surfaces with it.
  */
 export declare const MOTION_EASE_UNFOLD: readonly [0.2, 0, 0.2, 1];
-/** Press feedback on buttons and other tappable surfaces. */
+/** Arc `spring.snappy`: press feedback on buttons and other tappable surfaces. */
 export declare const SPRING_PRESS: {
     readonly type: "spring";
-    readonly stiffness: 500;
-    readonly damping: 30;
-    readonly mass: 0.6;
+    readonly visualDuration: 0.26;
+    readonly bounce: 0.12;
 };
-/** Overlay panel entrances — dialogs, sheets and floating surfaces. */
+/** Arc `spring.smooth`: overlay panel entrances (dialogs, sheets and floating surfaces); never overshoots. */
 export declare const SPRING_PANEL: {
     readonly type: "spring";
-    readonly stiffness: 420;
-    readonly damping: 40;
-    readonly mass: 0.5;
+    readonly visualDuration: 0.4;
+    readonly bounce: 0;
 };
-/** Shared-layout glides — indicators and highlights moving between items. */
+/** Arc `spring.morph`: shared-layout glides, indicators and highlights moving between items. */
 export declare const SPRING_LAYOUT: {
     readonly type: "spring";
-    readonly stiffness: 360;
-    readonly damping: 32;
-    readonly mass: 0.6;
+    readonly visualDuration: 0.42;
+    readonly bounce: 0.16;
 };
-/** Keyboard highlight in menus and lists: quick enough to keep up with a held arrow key. */
+/** Arc `spring.snappy`: keyboard highlight in menus and lists, quick enough to keep up with a held arrow key. */
 export declare const SPRING_HIGHLIGHT: {
     readonly type: "spring";
-    readonly stiffness: 700;
-    readonly damping: 45;
-    readonly mass: 0.5;
+    readonly visualDuration: 0.26;
+    readonly bounce: 0.12;
 };
-/** Tab indicator glide, tuned to settle without overshooting the list edges. */
+/** Arc `spring.morph`: the tab indicator gliding between tabs. */
 export declare const SPRING_TABS: {
     readonly type: "spring";
-    readonly stiffness: 245;
-    readonly damping: 36;
-    readonly mass: 1.2;
+    readonly visualDuration: 0.42;
+    readonly bounce: 0.16;
 };
-/** Lighter spawn for small tooltip surfaces. */
+/** Arc `spring.snappy`: small tooltip surfaces. */
 export declare const SPRING_TOOLTIP: {
     readonly type: "spring";
-    readonly stiffness: 380;
-    readonly damping: 30;
-    readonly mass: 0.7;
+    readonly visualDuration: 0.26;
+    readonly bounce: 0.12;
 };
-/** Disclosure chevrons rotate with a little bounce, as if flicked. */
+/** Arc `spring.snappy`: disclosure chevrons turning toward their new state. */
 export declare const SPRING_CHEVRON: {
     readonly type: "spring";
-    readonly duration: 0.4;
-    readonly bounce: 0.3;
+    readonly visualDuration: 0.26;
+    readonly bounce: 0.12;
 };
-/** Heavy, deliberate switch thumb — high mass keeps the travel weighty without wobble. */
+/** Arc `spring.smooth`: the switch thumb reports state, so it lands without overshoot. */
 export declare const SPRING_THUMB: {
     readonly type: "spring";
-    readonly stiffness: 800;
-    readonly damping: 80;
-    readonly mass: 4;
+    readonly visualDuration: 0.4;
+    readonly bounce: 0;
 };
-/** Small, confident pops for counters, badges and toggled icons. */
+/** Arc `spring.snappy`: small, confident pops for counters, badges and swapped icons. */
 export declare const SPRING_POP: {
     readonly type: "spring";
-    readonly stiffness: 520;
-    readonly damping: 30;
-    readonly mass: 0.5;
+    readonly visualDuration: 0.26;
+    readonly bounce: 0.12;
 };
-/** Primary actions compress noticeably; dense navigation items stay subtle. */
-export declare const MOTION_PRESS_SCALE = 0.93;
+/** Arc's press: about 0.97, so every pressable reads as the same push. */
+export declare const MOTION_PRESS_SCALE = 0.97;
 export declare const MOTION_SUBTLE_PRESS_SCALE = 0.98;
 export declare const MOTION_TOGGLE_PRESS_SCALE = 0.92;
 export declare const MOTION_HOVER_SCALE = 1.02;
 export declare const MOTION_THUMB_SQUISH_SCALE = 0.9;
 export declare const MOTION_ITEM_CHECK_SCALE = 0.75;
-export declare const MOTION_ICON_SWAP_SCALE = 0.25;
+/** Arc's icon swap: the incoming icon grows from 0.6 on `SPRING_POP`. */
+export declare const MOTION_ICON_SWAP_SCALE = 0.6;
 export declare const MOTION_CLOSE_BUTTON_SCALE = 0.8;
 export declare const MOTION_LIST_ITEM_DISTANCE = 6;
-/** Scale a freshly inserted list item starts from, and a leaving one shrinks to. */
+/** Scale a freshly inserted list item, option or inline message starts from, and a leaving one shrinks to. */
 export declare const MOTION_ITEM_ENTER_SCALE = 0.98;
 /** Loaded images settle from a slight zoom, so they develop in place instead of popping in. */
 export declare const MOTION_REVEAL_SCALE = 1.06;
@@ -133,17 +151,35 @@ export declare const MOTION_SHIMMER_TRANSLATE: readonly ["-100% 0", "100% 0"];
 /** Hovered interactive cards gain a soft drop shadow; the rest value has the same shape, invisible. */
 export declare const MOTION_CARD_SHADOW_LIFT = "0px 4px 16px 0px rgba(0, 0, 0, 0.08)";
 export declare const MOTION_CARD_SHADOW_REST = "0px 0px 0px 0px rgba(0, 0, 0, 0)";
+/** Arc's dialog panel scale on entrance; floating surfaces start from it too. */
 export declare const MOTION_SURFACE_SCALE = 0.96;
+/** Scale a dialog or tooltip shrinks to while it leaves (Arc). */
+export declare const MOTION_EXIT_SCALE = 0.98;
 /** Fraction of the surface kept hidden by the clip at the start of its reveal, in percent. */
 export declare const MOTION_SURFACE_CLIP_PERCENT = 92;
 /** Room left outside a revealing surface for its ring and drop shadow (`shadow-lg` spans ~22px). */
 export declare const MOTION_SURFACE_CLIP_BLEED_PX = 24;
-export declare const MOTION_TOOLTIP_DISTANCE = 8;
-export declare const MOTION_DIALOG_DISTANCE = 20;
-/** Inset kept on every side of a center-morph dialog while folded, in percent: a sliver at its center. */
+/** Arc's tooltip rise from its trigger, in pixels. */
+export declare const MOTION_TOOLTIP_DISTANCE = 3;
+/** Arc's tooltip scale on entrance. */
+export declare const MOTION_TOOLTIP_SCALE = 0.97;
+/** Arc's dialog rise on entrance, in pixels. */
+export declare const MOTION_DIALOG_DISTANCE = 8;
+/** Arc's dialog drop while it leaves, in pixels. */
+export declare const MOTION_DIALOG_EXIT_DISTANCE = 4;
+/**
+ * Inset kept on every side of a center-morph dialog while folded, in percent: a sliver at its center.
+ * @deprecated Dialogs no longer unfold from their center. Kept for consumers that animate their own surfaces with it.
+ */
 export declare const MOTION_CENTER_MORPH_FOLDED_PERCENT = 48;
 export declare const MOTION_CONTENT_DISTANCE = 4;
+/**
+ * @deprecated Invalid fields no longer shake: the error is told by color and message. Kept for consumers that
+ * animate their own fields.
+ */
 export declare const MOTION_INVALID_SHAKE_PX: readonly [0, -6, 6, -4, 4, -2, 0];
 /** Time after an item loses its active state during which a new active item still glides from it. */
 export declare const GLIDE_CONTINUITY_MS = 300;
-export type MotionKind = "press" | "subtle-press" | "toggle" | "fade" | "content" | "message" | "card" | "row" | "field" | "thumb" | "check" | "selection" | "item-check" | "rotate" | "list-item" | "icon-swap" | "delayed-pop" | "skeleton" | "reveal" | "link" | "icon" | "tooltip" | "surface" | "dialog" | "center-morph" | "sheet" | "overlay";
+export type MotionKind = "press" | "subtle-press" | "toggle" | "fade" | "content" | "message" | "card" | "row" | "field" | "thumb" | "check" | "selection" | "item-check" | "rotate" | "list-item" | "icon-swap" | "delayed-pop" | "skeleton" | "reveal" | "link" | "icon" | "tooltip" | "surface" | "dialog"
+/** @deprecated Library dialogs use `dialog`. */
+ | "center-morph" | "sheet" | "overlay";