beez-ui 0.6.2 → 0.8.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/motion/glide-indicator.d.ts

@@ -1,4 +1,4 @@
-import { SPRING_LAYOUT, SPRING_TABS } from "./tokens.js";
+import { SPRING_HIGHLIGHT, SPRING_LAYOUT, SPRING_TABS } from "./tokens.js";
 /** Which part of the active item carries the highlight that must travel. */
 type GlideSurface = "background" | "after";
 /** Describes the items of one container and how their active state is exposed. */
@@ -13,7 +13,13 @@ export interface GlidePreset {
     attributes: string[];
     isActive: (item: Element) => boolean;
     surface: (container: HTMLElement) => GlideSurface;
-    spring: typeof SPRING_LAYOUT | typeof SPRING_TABS;
+    spring: typeof SPRING_LAYOUT | typeof SPRING_TABS | typeof SPRING_HIGHLIGHT;
+    /**
+     * Highlights that follow the pointer (menus, listboxes) jump straight to the hovered item:
+     * the pointer already marks the position, so a travelling copy would only trail behind it.
+     * The glide is kept for keyboard navigation.
+     */
+    instantOnPointer?: boolean;
 }
 export declare const GLIDE_PRESETS: {
     tabs: {
@@ -42,7 +48,7 @@ export declare const GLIDE_PRESETS: {
             readonly mass: 0.6;
         };
     };
-    menu: {
+    pagination: {
         itemSelector: string;
         containerSelector: string;
         attributes: string[];
@@ -55,6 +61,34 @@ export declare const GLIDE_PRESETS: {
             readonly mass: 0.6;
         };
     };
+    suggestions: {
+        itemSelector: string;
+        containerSelector: string;
+        attributes: string[];
+        isActive: (item: Element) => boolean;
+        surface: () => "background";
+        spring: {
+            readonly type: "spring";
+            readonly stiffness: 700;
+            readonly damping: 45;
+            readonly mass: 0.5;
+        };
+        instantOnPointer: true;
+    };
+    menu: {
+        itemSelector: string;
+        containerSelector: string;
+        attributes: string[];
+        isActive: (item: Element) => boolean;
+        surface: () => "background";
+        spring: {
+            readonly type: "spring";
+            readonly stiffness: 700;
+            readonly damping: 45;
+            readonly mass: 0.5;
+        };
+        instantOnPointer: true;
+    };
 };
 export type GlidePresetName = keyof typeof GLIDE_PRESETS;
 /** Marks the item whose own highlight is hidden while the travelling copy stands in for it. */

package/dist/motion/glide-indicator.js

@@ -4,7 +4,7 @@
 * previous item and is removed once it lands, leaving the item's own styles in charge again.
 */
 import { animate } from "motion/react";
-import { GLIDE_CONTINUITY_MS, SPRING_LAYOUT, SPRING_TABS } from "./tokens.js";
+import { GLIDE_CONTINUITY_MS, SPRING_HIGHLIGHT, SPRING_LAYOUT, SPRING_TABS } from "./tokens.js";
 export const GLIDE_PRESETS = {
 	tabs: {
 		itemSelector: "[data-slot=\"tabs-trigger\"]",
@@ -22,13 +22,31 @@ export const GLIDE_PRESETS = {
 		surface: () => "background",
 		spring: SPRING_LAYOUT
 	},
+	pagination: {
+		itemSelector: "[data-slot=\"pagination-link\"]",
+		containerSelector: "[data-slot=\"pagination-content\"]",
+		attributes: ["aria-current"],
+		isActive: (item) => item.getAttribute("aria-current") === "page",
+		surface: () => "background",
+		spring: SPRING_LAYOUT
+	},
+	suggestions: {
+		itemSelector: "[role=\"option\"]",
+		containerSelector: "[role=\"listbox\"]",
+		attributes: ["aria-selected"],
+		isActive: (item) => item.getAttribute("aria-selected") === "true",
+		surface: () => "background",
+		spring: SPRING_HIGHLIGHT,
+		instantOnPointer: true
+	},
 	menu: {
 		itemSelector: "[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"],[role=\"option\"]",
 		containerSelector: "[role=\"menu\"],[role=\"listbox\"]",
 		attributes: ["data-highlighted"],
 		isActive: (item) => item.hasAttribute("data-highlighted"),
 		surface: () => "background",
-		spring: SPRING_LAYOUT
+		spring: SPRING_HIGHLIGHT,
+		instantOnPointer: true
 	}
 };
 /** Marks the item whose own highlight is hidden while the travelling copy stands in for it. */
@@ -136,6 +154,20 @@ export function attachGlideIndicator(container, preset) {
 		position: container.style.position,
 		isolation: container.style.isolation
 	};
+	// The last input decides whether a highlight change was driven by the pointer or the keyboard.
+	// Keyboard focus may live outside the container (a combobox input), so both are read from the
+	// document; the pointer only counts while it moves over this container.
+	let isPointerDriven = false;
+	const onPointerMove = () => {
+		isPointerDriven = true;
+	};
+	const onKeyDown = () => {
+		isPointerDriven = false;
+	};
+	if (preset.instantOnPointer) {
+		container.addEventListener("pointermove", onPointerMove);
+		container.ownerDocument.addEventListener("keydown", onKeyDown, true);
+	}
 	/** Puts the item's own highlight back and removes the travelling copy. */
 	function settle() {
 		animation?.cancel();
@@ -236,7 +268,7 @@ export function attachGlideIndicator(container, preset) {
 		const isContinuous = previous !== null && previous !== active && previous.isConnected && !preset.isActive(previous) && (lastActiveSeenAt === Number.NEGATIVE_INFINITY || now - lastActiveSeenAt <= GLIDE_CONTINUITY_MS);
 		lastActive = active;
 		lastActiveSeenAt = Number.NEGATIVE_INFINITY;
-		if (isContinuous) glide(previous, active);
+		if (isContinuous && !(preset.instantOnPointer && isPointerDriven)) glide(previous, active);
 		else settle();
 	});
 	observer.observe(container, {
@@ -247,6 +279,8 @@ export function attachGlideIndicator(container, preset) {
 	});
 	return () => {
 		observer.disconnect();
+		container.removeEventListener("pointermove", onPointerMove);
+		container.ownerDocument.removeEventListener("keydown", onKeyDown, true);
 		settle();
 	};
 }

package/dist/motion/motion-slot.js

@@ -6,7 +6,7 @@ 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 } 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, SPRING_CHEVRON, SPRING_PANEL, SPRING_PRESS, SPRING_THUMB } from "./tokens.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 { useAttachedElement } from "./use-attached-element.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -277,16 +277,14 @@ export function MotionSlot(t0) {
 				});
 				return dispose;
 			}
-			if (kind === "skeleton") {
-				animations.set(animate(element, { opacity: [
-					1,
-					.6,
-					1
-				] }, {
-					duration: MOTION_TIMING.skeleton,
-					repeat: Infinity,
-					ease: "easeInOut"
-				}), ["opacity"]);
+			if (kind === "skeleton" && typeof element.animate === "function") {
+				const shimmer = element.animate({ translate: [...MOTION_SHIMMER_TRANSLATE] }, {
+					duration: MOTION_TIMING.skeleton * MILLISECONDS_PER_SECOND,
+					easing: `cubic-bezier(${MOTION_EASE_IN_OUT.join(", ")})`,
+					iterations: Infinity,
+					pseudoElement: "::after"
+				});
+				cleanups.push(() => shimmer.cancel());
 			} else {
 				if (kind === "icon-swap") {
 					play({
@@ -398,6 +396,13 @@ export function MotionSlot(t0) {
 					}));
 				}
 			}
+			let restingShadow = "none";
+			const withRestingShadow = (shadow) => {
+				if (!element.style.boxShadow) {
+					restingShadow = getComputedStyle(element).boxShadow;
+				}
+				return restingShadow === "none" ? shadow : `${restingShadow}, ${shadow}`;
+			};
 			if (kind === "card" || kind === "link" || kind === "icon") {
 				cleanups.push(hover(element, () => {
 					if (!isEnabled(element) || !canHover() || kind === "card" && !element.querySelector("a,button")) {
@@ -405,7 +410,9 @@ export function MotionSlot(t0) {
 					}
 					const keep = { restoreOnComplete: false };
 					if (kind === "card") {
-						play({ boxShadow: "0 4px 16px rgba(0,0,0,0.08)" }, tween(MOTION_TIMING.enter), keep);
+						const rest = withRestingShadow(MOTION_CARD_SHADOW_REST);
+						const from = element.style.boxShadow ? getComputedStyle(element).boxShadow : rest;
+						play({ boxShadow: [from, withRestingShadow(MOTION_CARD_SHADOW_LIFT)] }, tween(MOTION_TIMING.enter), keep);
 					} else {
 						if (kind === "icon") {
 							play({ transform: ["rotate(0deg) scale(1)", "rotate(-3deg) scale(1.025)"] }, SPRING_PRESS, keep);
@@ -415,7 +422,7 @@ export function MotionSlot(t0) {
 					}
 					return () => {
 						if (kind === "card") {
-							play({ boxShadow: original.boxShadow || "0 0px 0px rgba(0,0,0,0)" }, tween(MOTION_TIMING.fast));
+							play({ boxShadow: [getComputedStyle(element).boxShadow, withRestingShadow(MOTION_CARD_SHADOW_REST)] }, tween(MOTION_TIMING.fast));
 						} else {
 							if (kind === "icon") {
 								play({ transform: [currentTransform(element), "rotate(0deg) scale(1)"] }, SPRING_PRESS);
@@ -544,6 +551,28 @@ export function MotionSlot(t0) {
 				}
 				cleanups.push(() => observer_1.disconnect());
 			}
+			if (kind === "reveal") {
+				const isLoading = () => element.hasAttribute("data-loading");
+				let wasLoading = isLoading();
+				const observer_2 = new MutationObserver(() => {
+					const loading = isLoading();
+					const loaded = wasLoading && !loading && !element.hasAttribute("data-error");
+					wasLoading = loading;
+					if (!loaded) {
+						return;
+					}
+					play({
+						opacity: [0, 1],
+						transform: [`scale(${MOTION_REVEAL_SCALE})`, "scale(1)"],
+						filter: [`blur(${MOTION_REVEAL_BLUR_PX}px)`, "blur(0px)"]
+					}, tween(MOTION_TIMING.reveal));
+				});
+				observer_2.observe(element, {
+					attributes: true,
+					attributeFilter: ["data-loading", "data-error"]
+				});
+				cleanups.push(() => observer_2.disconnect());
+			}
 			if (kind === "thumb") {
 				const restingOffset = () => {
 					if (!element.getClientRects().length) {
@@ -565,7 +594,7 @@ export function MotionSlot(t0) {
 					element.parentElement?.removeEventListener("pointerenter", remeasure);
 					element.parentElement?.removeEventListener("focusin", remeasure);
 				});
-				const observer_2 = new MutationObserver(() => {
+				const observer_3 = new MutationObserver(() => {
 					const glideOffset = translateXOf(getComputedStyle(element).transform);
 					cancel(["transform"]);
 					restore(["transform"]);
@@ -576,11 +605,11 @@ export function MotionSlot(t0) {
 						play({ transform: [`translateX(${delta_0}px)`, "translateX(0px)"] }, SPRING_THUMB);
 					}
 				});
-				observer_2.observe(element, {
+				observer_3.observe(element, {
 					attributes: true,
 					attributeFilter: ["data-state"]
 				});
-				cleanups.push(() => observer_2.disconnect());
+				cleanups.push(() => observer_3.disconnect());
 				const root = element.parentElement;
 				if (root && typeof element.animate === "function") {
 					const squishTiming = {
@@ -597,9 +626,9 @@ export function MotionSlot(t0) {
 						squish?.cancel();
 						squish = element.animate({ scale: ["1", String(MOTION_THUMB_SQUISH_SCALE)] }, squishTiming);
 						return () => {
-							const from = getComputedStyle(element).scale;
+							const from_0 = getComputedStyle(element).scale;
 							squish?.cancel();
-							const release = element.animate({ scale: [from === "none" ? "1" : from, "1"] }, squishTiming);
+							const release = element.animate({ scale: [from_0 === "none" ? "1" : from_0, "1"] }, squishTiming);
 							squish = release;
 							release.finished.then(() => {
 								if (squish === release) {

package/dist/motion/surface-keyframes.js

@@ -1,5 +1,6 @@
-import { MOTION_DIALOG_DISTANCE, MOTION_EASE, MOTION_SURFACE_CLIP_PERCENT, MOTION_SURFACE_SCALE, MOTION_TIMING, MOTION_TOOLTIP_DISTANCE, SPRING_PANEL, SPRING_TOOLTIP } from "./tokens.js";
+import { MOTION_DIALOG_DISTANCE, MOTION_EASE, MOTION_EASE_DRAWER, MOTION_SURFACE_CLIP_BLEED_PX, MOTION_SURFACE_CLIP_PERCENT, MOTION_SURFACE_SCALE, MOTION_TIMING, MOTION_TOOLTIP_DISTANCE, SPRING_PANEL, SPRING_TOOLTIP } from "./tokens.js";
 const EASE_OUT = [...MOTION_EASE];
+const EASE_DRAWER = [...MOTION_EASE_DRAWER];
 const SIDES = [
 	"top",
 	"right",
@@ -48,18 +49,25 @@ function offsetAwayFromTrigger(side, distance) {
 		y: 0
 	};
 }
+/**
+* Open edges extend the clip past the box, so the ring and drop shadow drawn outside it
+* (Tailwind rings are box-shadows) are never cut while the surface reveals or settles.
+*/
+const OPEN_EDGE = `-${MOTION_SURFACE_CLIP_BLEED_PX}px`;
+/** Fully revealed clip: nothing of the surface, its outline or its shadow is hidden. */
+const REVEALED_CLIP = `inset(${OPEN_EDGE} ${OPEN_EDGE} ${OPEN_EDGE} ${OPEN_EDGE})`;
 /** Collapsed clip anchored at the corner or edge closest to the trigger. */
 function collapsedClip(side, align) {
 	const hidden = `${MOTION_SURFACE_CLIP_PERCENT}%`;
 	const half = `${MOTION_SURFACE_CLIP_PERCENT / 2}%`;
 	/** Maps an alignment to the inset kept on the leading and trailing edges of the cross axis. */
-	const crossAxis = (value) => value === "start" ? ["0%", hidden] : value === "end" ? [hidden, "0%"] : [half, half];
+	const crossAxis = (value) => value === "start" ? [OPEN_EDGE, hidden] : value === "end" ? [hidden, OPEN_EDGE] : [half, half];
 	if (side === "bottom" || side === "top") {
 		const [left, right] = crossAxis(align);
-		return side === "bottom" ? `inset(0% ${right} ${hidden} ${left})` : `inset(${hidden} ${right} 0% ${left})`;
+		return side === "bottom" ? `inset(${OPEN_EDGE} ${right} ${hidden} ${left})` : `inset(${hidden} ${right} ${OPEN_EDGE} ${left})`;
 	}
 	const [top, bottom] = crossAxis(align);
-	return side === "right" ? `inset(${top} ${hidden} ${bottom} 0%)` : `inset(${top} 0% ${bottom} ${hidden})`;
+	return side === "right" ? `inset(${top} ${hidden} ${bottom} ${OPEN_EDGE})` : `inset(${top} ${OPEN_EDGE} ${bottom} ${hidden})`;
 }
 /** Edge-panel travel: fully off-screen on the side the sheet is attached to. */
 function sheetOffset(element) {
@@ -136,7 +144,7 @@ export function surfaceEnter(element, kind) {
 	};
 	// Primitives aligned over their trigger (Select item-aligned) have no side to reveal from.
 	if (side) {
-		keyframes.clipPath = [collapsedClip(side, align), "inset(0% 0% 0% 0%)"];
+		keyframes.clipPath = [collapsedClip(side, align), REVEALED_CLIP];
 	}
 	return {
 		keyframes,
@@ -190,9 +198,13 @@ export function surfaceExit(element, kind) {
 	}
 	if (kind === "sheet") {
 		const offset = sheetOffset(element);
+		// A spring would linger at the edge; the drawer curve accelerates the panel away.
 		return {
 			keyframes: { transform: [transform("0%", "0%"), transform(offset.x, offset.y)] },
-			transition: SPRING_PANEL
+			transition: {
+				duration: MOTION_TIMING.sheetExit,
+				ease: EASE_DRAWER
+			}
 		};
 	}
 	return {

package/dist/motion/tokens.d.ts

@@ -1,4 +1,7 @@
-/** Defines the timing, curves and physics shared by Motion animations, aligned with beui.dev/components/motion. */
+/**
+ * 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;
@@ -16,6 +19,14 @@ export declare const MOTION_TIMING: {
     readonly listStagger: 0.035;
     readonly closeEnter: 0.2;
     readonly closeDelay: 0.16;
+    readonly sheetExit: 0.24;
+    readonly reveal: 0.4;
+    /** Heart and badge pops that confirm a toggle. */
+    readonly pop: 0.32;
+    /** Height of expanding and collapsing regions. */
+    readonly collapse: 0.26;
+    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. */
@@ -47,6 +58,13 @@ export declare const SPRING_LAYOUT: {
     readonly damping: 32;
     readonly mass: 0.6;
 };
+/** 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;
+};
 /** Tab indicator glide, tuned to settle without overshooting the list edges. */
 export declare const SPRING_TABS: {
     readonly type: "spring";
@@ -74,6 +92,13 @@ export declare const SPRING_THUMB: {
     readonly damping: 80;
     readonly mass: 4;
 };
+/** Small, confident pops for counters, badges and toggled icons. */
+export declare const SPRING_POP: {
+    readonly type: "spring";
+    readonly stiffness: 520;
+    readonly damping: 30;
+    readonly mass: 0.5;
+};
 /** Primary actions compress noticeably; dense navigation items stay subtle. */
 export declare const MOTION_PRESS_SCALE = 0.93;
 export declare const MOTION_SUBTLE_PRESS_SCALE = 0.98;
@@ -84,13 +109,27 @@ export declare const MOTION_ITEM_CHECK_SCALE = 0.75;
 export declare const MOTION_ICON_SWAP_SCALE = 0.25;
 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. */
+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;
+export declare const MOTION_REVEAL_BLUR_PX = 6;
+/** Calendar months slide just enough to show the direction of navigation. */
+export declare const MOTION_MONTH_DISTANCE = 12;
+/** Skeleton shine travels from fully before the box to fully past it, as a `translate` value. */
+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)";
 export declare const MOTION_SURFACE_SCALE = 0.96;
 /** 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;
 export declare const MOTION_CONTENT_DISTANCE = 4;
 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" | "link" | "icon" | "tooltip" | "surface" | "dialog" | "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" | "sheet" | "overlay";