@astra-kit/ui 0.0.0-stage → 0.0.0

package/dist/lib/rich-text/rich-markdown.js

@@ -0,0 +1,105 @@
+import { parseRichTextSegments } from "./link-markdown.js";
+import { RICH_TEXT_SEGMENT_TYPE } from "./link-markdown-constants.js";
+/**
+* Block-level markdown subset for long-form content such as descriptions and stories.
+*
+* It builds on top of the shared link parser (`parseRichTextSegments`) without
+* touching it, adding paragraphs, unordered lists (`- item` / `* item`) and
+* inline bold (`**text**`). Everything else stays plain text, so the renderer
+* never interprets raw HTML.
+*/
+export const RICH_MARKDOWN_BLOCK_TYPE = {
+	list: "list",
+	paragraph: "paragraph"
+};
+export const RICH_MARKDOWN_INLINE_TYPE = {
+	bold: "bold",
+	link: "link",
+	text: "text"
+};
+const LINE_BREAK_PATTERN = /\r?\n/;
+const LIST_ITEM_PATTERN = /^\s*[-*]\s+(.*)$/;
+const BOLD_PATTERN = /\*\*([^*]+)\*\*/g;
+const PARAGRAPH_LINE_SEPARATOR = "\n";
+function parseInlineLinks(text) {
+	return parseRichTextSegments(text).map((segment) => segment.type === RICH_TEXT_SEGMENT_TYPE.link ? {
+		text: segment.text,
+		type: RICH_MARKDOWN_INLINE_TYPE.link,
+		url: segment.url
+	} : {
+		text: segment.text,
+		type: RICH_MARKDOWN_INLINE_TYPE.text
+	});
+}
+function parseInlineSegments(text) {
+	const segments = [];
+	let lastIndex = 0;
+	for (const boldMatch of text.matchAll(BOLD_PATTERN)) {
+		const matchIndex = boldMatch.index ?? 0;
+		if (matchIndex > lastIndex) {
+			segments.push(...parseInlineLinks(text.slice(lastIndex, matchIndex)));
+		}
+		segments.push({
+			text: boldMatch[1],
+			type: RICH_MARKDOWN_INLINE_TYPE.bold
+		});
+		lastIndex = matchIndex + boldMatch[0].length;
+	}
+	if (lastIndex < text.length) {
+		segments.push(...parseInlineLinks(text.slice(lastIndex)));
+	}
+	return segments;
+}
+const EXCERPT_SEGMENT_SEPARATOR = " ";
+const EXCERPT_ELLIPSIS = "…";
+/**
+* Flattens the parsed content into plain text (formatting stripped) and trims it
+* to `maxLength`, for SEO descriptions and previews.
+*/
+export function buildRichMarkdownExcerpt(content, maxLength) {
+	const plainText = parseRichMarkdownBlocks(content).flatMap((block) => block.type === RICH_MARKDOWN_BLOCK_TYPE.paragraph ? block.segments.map((segment) => segment.text) : block.items.flatMap((itemSegments) => itemSegments.map((segment) => segment.text))).join(EXCERPT_SEGMENT_SEPARATOR).replace(/\s+/g, EXCERPT_SEGMENT_SEPARATOR).trim();
+	if (plainText.length <= maxLength) {
+		return plainText;
+	}
+	return plainText.slice(0, maxLength - EXCERPT_ELLIPSIS.length).trimEnd() + EXCERPT_ELLIPSIS;
+}
+export function parseRichMarkdownBlocks(content) {
+	const blocks = [];
+	let paragraphLines = [];
+	let listItems = [];
+	const flushParagraph = () => {
+		if (paragraphLines.length > 0) {
+			blocks.push({
+				segments: parseInlineSegments(paragraphLines.join(PARAGRAPH_LINE_SEPARATOR)),
+				type: RICH_MARKDOWN_BLOCK_TYPE.paragraph
+			});
+			paragraphLines = [];
+		}
+	};
+	const flushList = () => {
+		if (listItems.length > 0) {
+			blocks.push({
+				items: listItems,
+				type: RICH_MARKDOWN_BLOCK_TYPE.list
+			});
+			listItems = [];
+		}
+	};
+	for (const line of content.split(LINE_BREAK_PATTERN)) {
+		const listItemMatch = LIST_ITEM_PATTERN.exec(line);
+		if (listItemMatch) {
+			flushParagraph();
+			listItems.push(parseInlineSegments(listItemMatch[1]));
+			continue;
+		}
+		flushList();
+		if (line.trim().length === 0) {
+			flushParagraph();
+			continue;
+		}
+		paragraphLines.push(line);
+	}
+	flushParagraph();
+	flushList();
+	return blocks;
+}

package/dist/lib/rich-text/rich-text-editor-dom.d.ts

@@ -0,0 +1,26 @@
+/**
+ * DOM helpers that translate between the rich link editor's plain-text offsets
+ * and the browser `Selection`/`Range` API. Kept apart from the pure helpers so
+ * the latter can be unit-tested without a DOM.
+ */
+import type { RichTextSelectionRange } from "./link-markdown-types.js";
+/**
+ * Returns the plain-text character offset within `editor` for a DOM
+ * `(container, offset)` boundary, or `null` when it cannot be resolved.
+ */
+export declare function getEditorBoundaryOffset(editor: HTMLDivElement, container: Node, offset: number): number | null;
+/**
+ * Reads the current selection as a plain-text offset range within `editor`, or
+ * `null` when there is no selection inside the editor.
+ */
+export declare function getEditorSelectionRange(editor: HTMLDivElement): RichTextSelectionRange | null;
+/**
+ * Resolves a plain-text offset within `editor` to a DOM `(node, offset)`
+ * boundary, walking its text nodes.
+ */
+export declare function getEditorTextBoundary(editor: HTMLDivElement, targetOffset: number): {
+    node: Node;
+    offset: number;
+};
+/** Restores a plain-text offset range as the live selection inside `editor`. */
+export declare function setEditorSelectionRange(editor: HTMLDivElement, selectionRange: RichTextSelectionRange): void;

package/dist/lib/rich-text/rich-text-editor-dom.js

@@ -0,0 +1,79 @@
+/**
+* Returns the plain-text character offset within `editor` for a DOM
+* `(container, offset)` boundary, or `null` when it cannot be resolved.
+*/
+export function getEditorBoundaryOffset(editor, container, offset) {
+	const boundaryRange = document.createRange();
+	boundaryRange.selectNodeContents(editor);
+	try {
+		boundaryRange.setEnd(container, offset);
+	} catch {
+		return null;
+	}
+	return boundaryRange.toString().length;
+}
+/**
+* Reads the current selection as a plain-text offset range within `editor`, or
+* `null` when there is no selection inside the editor.
+*/
+export function getEditorSelectionRange(editor) {
+	const selection = window.getSelection();
+	if (!selection || selection.rangeCount === 0) {
+		return null;
+	}
+	const anchorNode = selection.anchorNode;
+	const focusNode = selection.focusNode;
+	if (!anchorNode || !focusNode) {
+		return null;
+	}
+	if (!editor.contains(anchorNode) || !editor.contains(focusNode)) {
+		return null;
+	}
+	const anchorOffset = getEditorBoundaryOffset(editor, anchorNode, selection.anchorOffset);
+	const focusOffset = getEditorBoundaryOffset(editor, focusNode, selection.focusOffset);
+	if (anchorOffset === null || focusOffset === null) {
+		return null;
+	}
+	return {
+		end: Math.max(anchorOffset, focusOffset),
+		start: Math.min(anchorOffset, focusOffset)
+	};
+}
+/**
+* Resolves a plain-text offset within `editor` to a DOM `(node, offset)`
+* boundary, walking its text nodes.
+*/
+export function getEditorTextBoundary(editor, targetOffset) {
+	const textNodeWalker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT);
+	let remainingOffset = targetOffset;
+	let currentNode = textNodeWalker.nextNode();
+	while (currentNode) {
+		const currentTextLength = currentNode.textContent?.length ?? 0;
+		if (remainingOffset <= currentTextLength) {
+			return {
+				node: currentNode,
+				offset: remainingOffset
+			};
+		}
+		remainingOffset -= currentTextLength;
+		currentNode = textNodeWalker.nextNode();
+	}
+	return {
+		node: editor,
+		offset: editor.childNodes.length
+	};
+}
+/** Restores a plain-text offset range as the live selection inside `editor`. */
+export function setEditorSelectionRange(editor, selectionRange) {
+	const selection = window.getSelection();
+	if (!selection) {
+		return;
+	}
+	const editorRange = document.createRange();
+	const startBoundary = getEditorTextBoundary(editor, selectionRange.start);
+	const endBoundary = getEditorTextBoundary(editor, selectionRange.end);
+	editorRange.setStart(startBoundary.node, startBoundary.offset);
+	editorRange.setEnd(endBoundary.node, endBoundary.offset);
+	selection.removeAllRanges();
+	selection.addRange(editorRange);
+}

package/dist/lib/toast-layer.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Tells whether an event target belongs to the toast layer.
+ * @param target - Target of the outside interaction.
+ * @returns `true` when the target is a toast or one of its controls.
+ */
+export declare function isToastLayerTarget(target: EventTarget | null): boolean;
+/**
+ * Lets keyboard focus enter the toast layer while a modal traps focus. Radix's focus trap listens for `focusin` and
+ * `focusout` on the document and pulls focus back into the modal whenever it lands outside, so Sonner's hotkey could
+ * never move focus to a toast's controls. Focus changes that land on a toast stop at the body, after React has run
+ * its own handlers and before the document-level trap sees them; every other focus change still reaches the trap.
+ * Because the trap never sees focus leave, it cannot pull it back either: when the focused toast control is removed
+ * (an action or close button dismisses its toast), focus returns to the element it came from instead of the body.
+ * @param ownerDocument - Document whose body hosts the app and the modal portals.
+ * @returns Removes the listeners.
+ */
+export declare function letFocusReachToastLayer(ownerDocument: Document): () => void;
+/**
+ * Wraps a modal's `onInteractOutside` so presses on toasts never dismiss it. The consumer's handler still runs first
+ * and can keep preventing dismissal for its own reasons.
+ * @param handler - The consumer's `onInteractOutside`, if any.
+ * @returns The handler to give the Radix content.
+ */
+export declare function keepOpenOnToastInteraction<OutsideEvent extends Event>(handler?: (event: OutsideEvent) => void): (event: OutsideEvent) => void;

package/dist/lib/toast-layer.js

@@ -0,0 +1,76 @@
+/**
+* Keeps toasts usable while a modal overlay is open. Toasts sit above every overlay, but a modal `Dialog` or `Sheet`
+* treats a press on them as a press outside and closes, so a toast's action or close button would dismiss the form
+* that raised it instead of running.
+*/
+import { TOAST_LAYER_SELECTOR } from "../constants/toast.js";
+/**
+* Tells whether an event target belongs to the toast layer.
+* @param target - Target of the outside interaction.
+* @returns `true` when the target is a toast or one of its controls.
+*/
+export function isToastLayerTarget(target) {
+	return target instanceof Element && target.closest(TOAST_LAYER_SELECTOR) !== null;
+}
+/**
+* Lets keyboard focus enter the toast layer while a modal traps focus. Radix's focus trap listens for `focusin` and
+* `focusout` on the document and pulls focus back into the modal whenever it lands outside, so Sonner's hotkey could
+* never move focus to a toast's controls. Focus changes that land on a toast stop at the body, after React has run
+* its own handlers and before the document-level trap sees them; every other focus change still reaches the trap.
+* Because the trap never sees focus leave, it cannot pull it back either: when the focused toast control is removed
+* (an action or close button dismisses its toast), focus returns to the element it came from instead of the body.
+* @param ownerDocument - Document whose body hosts the app and the modal portals.
+* @returns Removes the listeners.
+*/
+export function letFocusReachToastLayer(ownerDocument) {
+	const { body } = ownerDocument;
+	let focusOrigin = null;
+	let focusedToastElement = null;
+	const restoreFocusAfterRemoval = new MutationObserver(() => {
+		if (focusedToastElement?.isConnected !== false) return;
+		const activeElement = ownerDocument.activeElement;
+		if (activeElement === null || activeElement === body) focusOrigin?.focus({ preventScroll: true });
+		stopTrackingToastFocus();
+	});
+	const stopTrackingToastFocus = () => {
+		restoreFocusAfterRemoval.disconnect();
+		focusOrigin = null;
+		focusedToastElement = null;
+	};
+	const stopFocusIntoToast = (event) => {
+		const focusedElement = event.type === "focusin" ? event.target : event.relatedTarget;
+		if (!isToastLayerTarget(focusedElement)) {
+			if (event.type === "focusin") stopTrackingToastFocus();
+			return;
+		}
+		event.stopPropagation();
+		if (event.type !== "focusin") return;
+		if (focusedToastElement === null) {
+			focusOrigin = event.relatedTarget instanceof HTMLElement ? event.relatedTarget : null;
+			restoreFocusAfterRemoval.observe(body, {
+				childList: true,
+				subtree: true
+			});
+		}
+		focusedToastElement = focusedElement;
+	};
+	body.addEventListener("focusin", stopFocusIntoToast);
+	body.addEventListener("focusout", stopFocusIntoToast);
+	return () => {
+		stopTrackingToastFocus();
+		body.removeEventListener("focusin", stopFocusIntoToast);
+		body.removeEventListener("focusout", stopFocusIntoToast);
+	};
+}
+/**
+* Wraps a modal's `onInteractOutside` so presses on toasts never dismiss it. The consumer's handler still runs first
+* and can keep preventing dismissal for its own reasons.
+* @param handler - The consumer's `onInteractOutside`, if any.
+* @returns The handler to give the Radix content.
+*/
+export function keepOpenOnToastInteraction(handler) {
+	return (event) => {
+		handler?.(event);
+		if (isToastLayerTarget(event.target)) event.preventDefault();
+	};
+}

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+/** Shares class composition and Tailwind conflict resolution across consumers. */
+export { cn } from "cn";

package/dist/lib/utils.js

@@ -0,0 +1,2 @@
+/** Shares class composition and Tailwind conflict resolution across consumers. */
+export { cn } from "cn";

package/dist/lib/year-month-filter.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Parsea un texto `MM/AAAA` a su valor numérico comparable `AAAAMM`
+ * (por ejemplo `06/2026` → `202606`). Devuelve `null` cuando el texto no es
+ * un mes-año válido.
+ */
+export declare function parseYearMonthFilterInput(value: string): number | null;
+/**
+ * Formatea un valor numérico `AAAAMM` de vuelta a `MM/AAAA` para rehidratar
+ * los inputs del filtro al reabrir el diálogo.
+ */
+/**
+ * Evalúa un filtro de rango de año-mes contra el valor numérico `AAAAMM` de una
+ * fila (`null` cuando la fila no tiene fecha). Devuelve `true` cuando el filtro
+ * no aplica, replicando el contrato de los demás matchers de la tabla.
+ */
+export declare function matchesAdvancedYearMonthRangeFilter(columnFilterValue: unknown, value: number | null): boolean;

package/dist/lib/year-month-filter.js

@@ -0,0 +1,46 @@
+const YEAR_MONTH_INPUT_PATTERN = /^(0[1-9]|1[0-2])\/(\d{4})$/;
+/**
+* Parsea un texto `MM/AAAA` a su valor numérico comparable `AAAAMM`
+* (por ejemplo `06/2026` → `202606`). Devuelve `null` cuando el texto no es
+* un mes-año válido.
+*/
+export function parseYearMonthFilterInput(value) {
+	const match = YEAR_MONTH_INPUT_PATTERN.exec(value.trim());
+	if (!match) {
+		return null;
+	}
+	const [, month, year] = match;
+	return Number(`${year}${month}`);
+}
+/**
+* Formatea un valor numérico `AAAAMM` de vuelta a `MM/AAAA` para rehidratar
+* los inputs del filtro al reabrir el diálogo.
+*/
+/**
+* Evalúa un filtro de rango de año-mes contra el valor numérico `AAAAMM` de una
+* fila (`null` cuando la fila no tiene fecha). Devuelve `true` cuando el filtro
+* no aplica, replicando el contrato de los demás matchers de la tabla.
+*/
+export function matchesAdvancedYearMonthRangeFilter(columnFilterValue, value) {
+	if (!columnFilterValue || typeof columnFilterValue !== "object" || columnFilterValue.kind !== "yearMonthRange") {
+		return true;
+	}
+	const filterValue = columnFilterValue;
+	const hasValue = value != null && Number.isFinite(value);
+	if (filterValue.mode === "hasValue") {
+		return hasValue;
+	}
+	if (filterValue.mode === "noValue") {
+		return !hasValue;
+	}
+	if (!hasValue) {
+		return false;
+	}
+	if (filterValue.min != null && value < filterValue.min) {
+		return false;
+	}
+	if (filterValue.max != null && value > filterValue.max) {
+		return false;
+	}
+	return true;
+}

package/dist/motion/arc-floating-slot.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Entry and exit playback of Arc's floating layers (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md):
+ * tooltips, popovers and hover cards start a few pixels toward their trigger, slightly scaled down, and settle in
+ * place. Arc drives them with CSS transitions so a close that interrupts an open, or a reopen during a close, turns
+ * around from where the layer is; this slot keeps that property with Motion: an interrupted playback continues from
+ * the values it had reached instead of jumping to rest first. It animates the primitive's own node through a Slot,
+ * without adding DOM wrappers, and holds the node for `AnimatePresence` until its exit finishes.
+ */
+import { type ComponentProps, type ReactElement } from "react";
+import { Slot } from "radix-ui";
+import { type AnimationOptions } from "motion/react";
+/** A visual state of the floating layer, relative to its resting place. */
+export interface ArcFloatingPose {
+    /** Pixels the layer sits toward its trigger, along the side it was placed on. */
+    travel: number;
+    scale: number;
+    opacity: number;
+}
+/** The two transitions of one playback: the transform may spring while the fade stays a short tween. */
+export interface ArcFloatingTransitions {
+    transform: AnimationOptions;
+    opacity: AnimationOptions;
+}
+/** Entry and exit of a floating layer. The entry always ends at rest: no travel, full scale and full opacity. */
+export interface ArcFloatingMotion {
+    enterFrom: ArcFloatingPose;
+    enter: ArcFloatingTransitions;
+    exitTo: ArcFloatingPose;
+    exit: ArcFloatingTransitions;
+}
+/**
+ * Animates the floating layer rendered as its only child.
+ * @param props.motion - Returns the entry and exit of the layer. It is read once, when the layer mounts, so a layer
+ *   revived mid-exit keeps the path it came in on.
+ * @returns The child with the slot's ref composed into it.
+ */
+export declare function ArcFloatingSlot({ children, motion, ref, ...props }: Omit<ComponentProps<typeof Slot.Root>, "children"> & {
+    children: ReactElement;
+    motion: () => ArcFloatingMotion;
+}): import("react").JSX.Element;

package/dist/motion/arc-floating-slot.js

@@ -0,0 +1,177 @@
+"use client";
+/**
+* Entry and exit playback of Arc's floating layers (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md):
+* tooltips, popovers and hover cards start a few pixels toward their trigger, slightly scaled down, and settle in
+* place. Arc drives them with CSS transitions so a close that interrupts an open, or a reopen during a close, turns
+* around from where the layer is; this slot keeps that property with Motion: an interrupted playback continues from
+* the values it had reached instead of jumping to rest first. It animates the primitive's own node through a Slot,
+* without adding DOM wrappers, and holds the node for `AnimatePresence` until its exit finishes.
+*/
+import { useLayoutEffect, useRef } from "react";
+import { Slot } from "radix-ui";
+import { animate, frame, usePresence } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { MILLISECONDS_PER_SECOND, MOTION_ENTERING_ATTRIBUTE } from "../constants/motion.js";
+import { ARC_DURATION, ARC_EASE } from "./arc-tokens.js";
+import { useAttachedElement } from "./use-attached-element.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ANIMATED_PROPERTIES = ["opacity", "transform"];
+const REST_POSE = {
+	travel: 0,
+	scale: 1,
+	opacity: 1
+};
+/** Reduced motion keeps an entering layer in place and only fades it in, on Arc's instant timing. */
+const REDUCED_TWEEN = {
+	duration: ARC_DURATION.instant,
+	ease: [...ARC_EASE.standard]
+};
+/** Grace, in ms, past the planned exit before the layer is removed even if its playback never reports completion. */
+const EXIT_DEADLINE_GRACE_MS = 100;
+/**
+* Reads how long a transition plays, in ms: a spring's `visualDuration` (which overrides `duration`) or a tween's `duration`.
+* @param transition - Motion transition options.
+* @returns The planned duration, or Arc's standard duration when the transition does not state one.
+*/
+function plannedDurationMs({ duration, visualDuration }) {
+	return (visualDuration ?? duration ?? ARC_DURATION.standard) * MILLISECONDS_PER_SECOND;
+}
+/**
+* Builds the transform of a pose. Radix writes the placed side on `data-side`; the offset points toward the trigger,
+* so a layer flipped above its trigger still grows from the trigger edge.
+*/
+function poseTransform(element, { travel, scale }) {
+	const side = element.dataset.side;
+	const horizontalOffset = side === "left" ? travel : side === "right" ? -travel : 0;
+	const verticalOffset = side === "top" ? travel : side === "bottom" ? -travel : 0;
+	return `translate(${horizontalOffset}px, ${verticalOffset}px) scale(${scale})`;
+}
+/**
+* Animates the floating layer rendered as its only child.
+* @param props.motion - Returns the entry and exit of the layer. It is read once, when the layer mounts, so a layer
+*   revived mid-exit keeps the path it came in on.
+* @returns The child with the slot's ref composed into it.
+*/
+export function ArcFloatingSlot({ children, motion, ref, ...props }) {
+	const [element, attach] = useAttachedElement(ref);
+	const reduceMotion = usePrefersReducedMotion();
+	const [isPresent, safeToRemove] = usePresence();
+	// AnimatePresence hands out a new `safeToRemove` on every render; a ref keeps a re-render from restarting an exit.
+	const safeToRemoveRef = useRef(safeToRemove);
+	const resolveMotionRef = useRef(motion);
+	useLayoutEffect(() => {
+		safeToRemoveRef.current = safeToRemove;
+		resolveMotionRef.current = motion;
+	});
+	/** The motion chosen when this node mounted. */
+	const plannedRef = useRef(null);
+	/** Values an interrupted playback had reached, so the next one continues from them. */
+	const interruptedRef = useRef(null);
+	useLayoutEffect(() => {
+		let active = true;
+		// Some primitives keep children mounted in a detached portal while closed; they must not hold an exit open.
+		if (!element || !element.isConnected) {
+			if (!isPresent) queueMicrotask(() => {
+				if (active) safeToRemoveRef.current?.();
+			});
+			return () => {
+				active = false;
+			};
+		}
+		// Reduced motion removes a leaving layer at once, like `MotionSlot`: a fade would keep the modal layer hiding the
+		// rest of the page from assistive technology until it ends.
+		if (reduceMotion && !isPresent) {
+			queueMicrotask(() => {
+				if (active) safeToRemoveRef.current?.();
+			});
+			return () => {
+				active = false;
+			};
+		}
+		const isFirstEntry = plannedRef.current === null;
+		plannedRef.current ??= resolveMotionRef.current();
+		const planned = plannedRef.current;
+		const original = {
+			opacity: element.style.opacity,
+			transform: element.style.transform
+		};
+		const restore = () => {
+			ANIMATED_PROPERTIES.forEach((property) => {
+				element.style[property] = original[property];
+			});
+			element.removeAttribute(MOTION_ENTERING_ATTRIBUTE);
+		};
+		const interrupted = interruptedRef.current;
+		interruptedRef.current = null;
+		const startsFromEntryPose = isPresent && isFirstEntry && !interrupted;
+		const from = {
+			opacity: startsFromEntryPose ? planned.enterFrom.opacity : interrupted?.opacity ? Number.parseFloat(interrupted.opacity) : REST_POSE.opacity,
+			transform: startsFromEntryPose ? reduceMotion ? "none" : poseTransform(element, planned.enterFrom) : interrupted?.transform ?? "none"
+		};
+		const targetPose = isPresent ? REST_POSE : planned.exitTo;
+		const to = {
+			opacity: targetPose.opacity,
+			transform: reduceMotion ? "none" : poseTransform(element, targetPose)
+		};
+		const transitions = reduceMotion ? {
+			transform: REDUCED_TWEEN,
+			opacity: REDUCED_TWEEN
+		} : isPresent ? planned.enter : planned.exit;
+		// Motion starts on its next frame; painting the first keyframe now keeps that frame from flashing the rest state.
+		element.style.opacity = String(from.opacity);
+		element.style.transform = from.transform;
+		// A transform makes the layer the containing block of fixed descendants, so they stay hidden until it settles.
+		if (isPresent) element.setAttribute(MOTION_ENTERING_ATTRIBUTE, "");
+		const animations = [animate(element, { opacity: [from.opacity, to.opacity] }, transitions.opacity), ...from.transform === to.transform ? [] : [animate(element, { transform: [from.transform, to.transform] }, transitions.transform)]];
+		/*
+		* Playback reports completion from Motion's frame loop, which runs on animation frames. When frames stop (a hidden
+		* tab, or a test whose fake clock swallowed the pending frame), a leaving layer would stay mounted forever, so
+		* its removal also has a deadline on a plain timer, shortly after the planned exit.
+		*/
+		let removed = false;
+		const removeLeavingLayer = () => {
+			if (removed || !active) return;
+			removed = true;
+			safeToRemoveRef.current?.();
+		};
+		const exitDeadline = isPresent ? undefined : setTimeout(removeLeavingLayer, Math.max(plannedDurationMs(transitions.opacity), plannedDurationMs(transitions.transform)) + EXIT_DEADLINE_GRACE_MS);
+		void Promise.all(animations).then(() => {
+			if (!active) return;
+			if (!isPresent) {
+				removeLeavingLayer();
+				return;
+			}
+			// Motion commits the final keyframe inline; giving the caller's styles back leaves no compositing layer.
+			frame.postRender(() => {
+				if (active) restore();
+			});
+		});
+		return () => {
+			active = false;
+			clearTimeout(exitDeadline);
+			const computed = getComputedStyle(element);
+			const isMidPlayback = element.hasAttribute(MOTION_ENTERING_ATTRIBUTE) || !isPresent;
+			// A settled entrance needs no snapshot: the next playback starts from rest.
+			interruptedRef.current = isMidPlayback ? {
+				opacity: computed.opacity,
+				transform: computed.transform
+			} : null;
+			animations.forEach((animation) => animation.cancel());
+			restore();
+		};
+	}, [
+		element,
+		isPresent,
+		reduceMotion
+	]);
+	return /* @__PURE__ */ _jsx(Slot.Root, {
+		ref: attach,
+		...props,
+		// A leaving layer can be neither clicked, focused nor announced while it fades out.
+		...isPresent ? {} : {
+			inert: true,
+			"aria-hidden": true
+		},
+		children
+	});
+}

package/dist/motion/arc-press.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Scales the element down while pressed and springs it back on release.
+ * @param element - Rendered button, link or Slot child; nothing happens until it is attached.
+ * @param isEnabled - False skips the feedback, for reduced motion or variants that should not press.
+ */
+export declare function useArcPress(element: HTMLElement | null, isEnabled: boolean): void;

package/dist/motion/arc-press.js

@@ -0,0 +1,59 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Press feedback adapted from Arc (https://uiarc.dev), Copyright (c) 2026 Elia Kuratli, MIT License.
+* The full license text ships in THIRD_PARTY_NOTICES.md. Works on whatever node a Slot or Base UI
+* renders, so `asChild` links press exactly like native buttons.
+*/
+import { useEffect } from "react";
+import { animate, press } from "motion/react";
+import { BUTTON_DEFAULT_PRESS_SCALE, BUTTON_ICON_PRESS_SCALE, BUTTON_ICON_THRESHOLD_PX, BUTTON_WIDE_PRESS_SCALE, BUTTON_WIDE_THRESHOLD_PX } from "../constants/button.js";
+import { ARC_DURATION, ARC_EASE, ARC_SPRING_SNAPPY } from "./arc-tokens.js";
+/** Matches triggers of menus, popovers and dialogs, which never scale: Radix measures them on pointerdown. */
+const LAYER_ANCHOR_SELECTOR = "[aria-haspopup]:not([aria-haspopup=\"false\"]), [data-state], [role=\"combobox\"]";
+/** Matches elements that ignore presses: disabled, busy or marked unavailable. */
+const INERT_SELECTOR = ":disabled, [data-disabled], [aria-disabled=\"true\"], [aria-busy=\"true\"]";
+/** Icon buttons press a little deeper and wide buttons a little less, so every size reads as the same push. */
+function getPressScale(width) {
+	if (width > BUTTON_WIDE_THRESHOLD_PX) return BUTTON_WIDE_PRESS_SCALE;
+	if (width && width <= BUTTON_ICON_THRESHOLD_PX) return BUTTON_ICON_PRESS_SCALE;
+	return BUTTON_DEFAULT_PRESS_SCALE;
+}
+/**
+* Scales the element down while pressed and springs it back on release.
+* @param element - Rendered button, link or Slot child; nothing happens until it is attached.
+* @param isEnabled - False skips the feedback, for reduced motion or variants that should not press.
+*/
+export function useArcPress(element, isEnabled) {
+	const $ = _c(4);
+	let t0;
+	let t1;
+	if ($[0] !== element || $[1] !== isEnabled) {
+		t0 = () => {
+			if (!element || !isEnabled) {
+				return;
+			}
+			return press(element, () => {
+				if (element.matches(INERT_SELECTOR) || element.matches(LAYER_ANCHOR_SELECTOR)) {
+					return;
+				}
+				animate(element, { scale: getPressScale(element.offsetWidth) }, {
+					duration: ARC_DURATION.instant,
+					ease: [...ARC_EASE.standard]
+				});
+				return () => {
+					animate(element, { scale: 1 }, ARC_SPRING_SNAPPY);
+				};
+			});
+		};
+		t1 = [element, isEnabled];
+		$[0] = element;
+		$[1] = isEnabled;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useEffect(t0, t1);
+}