@codehz/auto-transition 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 codehz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,84 @@
+# @codehz/auto-transition
+
+一个轻量级的 React 组件库，旨在为容器内的子元素提供自动的**进入 (Enter)**、**退出 (Exit)** 和**移动 (Move)** 动画。
+
+它通过拦截底层的 DOM 操作（如 `appendChild`、`removeChild`）来实现动画，无需开发者手动管理复杂的动画状态。
+
+## 主要功能
+
+- **全自动动画**：自动识别子元素的添加、删除和位置变化并应用动画。
+- **高性能**：基于原生 Web Animations API 实现，确保流畅的 160fps 体验。
+- **布局感知**：自动计算元素在容器内的相对位置，支持平滑的位移和缩放过渡。
+- **高度可定制**：支持通过插件系统自定义动画效果。
+- **无侵入性**：支持 `asChild` 属性（类似 Radix UI），可无缝集成到现有布局中。
+
+## 安装
+
+该项目依赖于 React 19+。
+
+```bash
+npm install @codehz/auto-transition
+# 或者使用 bun
+bun add @codehz/auto-transition
+```
+
+## 快速上手
+
+只需将需要动画的列表或元素包裹在 `AutoTransition` 中即可：
+
+```tsx
+import { AutoTransition } from "@codehz/auto-transition";
+import { useState } from "react";
+
+function ListExample() {
+  const [items, setItems] = useState([1, 2, 3]);
+
+  return (
+    <AutoTransition as="ul" className="grid gap-2">
+      {items.map((id) => (
+        <li key={id} onClick={() => setItems(items.filter((i) => i !== id))}>
+          项目 {id} (点击删除)
+        </li>
+      ))}
+      <button onClick={() => setItems([...items, Date.now()])}>添加项目</button>
+    </AutoTransition>
+  );
+}
+```
+
+## API 参考
+
+### `AutoTransition` 组件 Props
+
+| 属性       | 类型               | 默认值       | 说明                                                |
+| :--------- | :----------------- | :----------- | :-------------------------------------------------- |
+| `as`       | `ElementType`      | `div`        | 容器渲染成的 HTML 标签或组件。                      |
+| `asChild`  | `boolean`          | `false`      | 是否使用 `Slot` 模式，将 props 转发给唯一的子元素。 |
+| `plugin`   | `TransitionPlugin` | 内置默认动画 | 用于自定义进入、退出和移动动画的插件对象。          |
+| `children` | `ReactNode`        | -            | 需要应用动画的子元素。                              |
+| `ref`      | `Ref<HTMLElement>` | -            | 转发给容器 DOM 元素的引用。                         |
+
+### `TransitionPlugin` 接口
+
+你可以通过实现此接口来自定义动画：
+
+```typescript
+export type TransitionPlugin = {
+  // 元素插入容器时触发
+  enter?(el: Element): Animation;
+  // 元素从容器移除时触发，rect 为移除时的位置大小
+  exit?(el: Element, rect: Rect): Animation;
+  // 元素在容器内位置或大小变化时触发
+  move?(el: Element, current: Rect, previous: Rect): Animation;
+};
+```
+
+### 默认动画行为
+
+- **Enter**: 透明度从 0 到 1 (250ms ease-out)。
+- **Exit**: 保持当前位置和大小，透明度从 1 到 0 (250ms ease-in)，动画结束后从 DOM 移除。
+- **Move**: 使用 FLIP 进行位移和缩放补偿，实现平滑的布局切换 (250ms ease-in)。
+
+## 许可证
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,111 @@
+import { ComponentPropsWithoutRef, ElementType, ForwardedRef, ReactElement, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/AutoTransition.d.ts
+
+/**
+ * A rectangle describing an element's position and size relative to the measured
+ * parent used by `AutoTransition` for layout calculations.
+ *
+ * - `x`/`y` are the left/top offsets relative to the measurement parent's content box.
+ * - `width`/`height` are the element's layout size in pixels.
+ */
+type Rect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+/**
+ * Simple size pair used for resize transitions (width/height in pixels).
+ */
+type Dimensions = {
+  width: number;
+  height: number;
+};
+/**
+ * Common props for `AutoTransition`.
+ *
+ * @template T - Element type to render as (e.g., "div", "ul").
+ */
+type AutoTransitionBaseProps<T extends ElementType | undefined> = {
+  as?: T;
+  transition?: TransitionPlugin;
+  ref?: ForwardedRef<HTMLElement>;
+};
+type AutoTransitionProps<T extends ElementType | undefined> = T extends ElementType ? AutoTransitionBaseProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof AutoTransitionBaseProps<T>> & {
+  children?: ReactNode;
+} : AutoTransitionBaseProps<T> & {
+  children: ReactElement;
+};
+/**
+ * AutoTransition
+ *
+ * A small container component that provides automatic enter/exit/move
+ * animations for its child `Element` nodes. The component intercepts
+ * low-level DOM operations (`appendChild`, `insertBefore`, `removeChild`)
+ * performed on the container and plays animations (via the Web Animations
+ * API) before applying DOM changes such as removing an element.
+ *
+ * If a `transition` plugin is not provided, AutoTransition applies its
+ * default animations:
+ *  - enter: fade in (opacity 0 -> 1), 250ms ease-out
+ *  - exit: keep element size and position while fading out, 250ms ease-in
+ *  - move: translate + scale from previous rect to new rect, 250ms ease-in
+ *
+ * Notes:
+ *  - This component is client-only (relies on DOM measurement & Web Animations API).
+ *  - It only animates `Element` nodes; text nodes use native DOM operations.
+ *  - In exit path, the provided animation's finish triggers removal from the DOM.
+ *
+ * Example usage:
+ * ```tsx
+ * <AutoTransition as="div" className="grid gap-2">
+ *   {items.map((it) => (
+ *     <Card key={it.id}>{it.title}</Card>
+ *   ))}
+ * </AutoTransition>
+ *
+ * // with custom transition plugin
+ * <AutoTransition transition={FloatingPanelTransition} as="div">
+ *   {isOpen && <PanelContent/>}
+ * </AutoTransition>
+ * ```
+ *
+ * @template T - Element type to render as (e.g. "div")
+ * @param props - props as defined by `AutoTransitionProps<T>`
+ */
+declare function AutoTransition<T extends ElementType | undefined>({
+  as,
+  children,
+  transition,
+  ref: externalRef,
+  ...rest
+}: AutoTransitionProps<T>): react_jsx_runtime0.JSX.Element;
+/**
+ * A plugin interface to provide custom animations for enter/exit/move/resize.
+ * Implementations should return a Web Animations API `Animation` instance.
+ *
+ * - `enter` receives the element being inserted.
+ * - `exit` receives the element being removed and its last-known rectangle
+ *    relative to the measurement parent — useful for leaving the element in
+ *    place while animating out.
+ * - `move` receives the element that's moved and both current/previous rects
+ *    to allow translation/scale-based transitions.
+ * - `resize` receives the element and previous/new dimensions — note: the
+ *    current component implementation doesn't automatically call `resize`,
+ *    but implementations may document this hook for future use.
+ */
+type TransitionPlugin = {
+  /** Play when an element enters/was inserted into the container. */
+  enter?(el: Element): Animation;
+  /** Play when an element is removed; `rect` is the element's rect at removal time. */
+  exit?(el: Element, rect: Rect): Animation;
+  /** Play when an element moves within the container (position or size changes). */
+  move?(el: Element, current: Rect, previous: Rect): Animation;
+  /** Play when element is resized; not invoked by current implementation. */
+  resize?(el: Element, current: Dimensions, previous: Dimensions): Animation;
+};
+//#endregion
+export { AutoTransition, Dimensions, Rect, TransitionPlugin };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -0,0 +1,207 @@
+import { Slot } from "@radix-ui/react-slot";
+import { startTransition, useCallback, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/microcache.ts
+function microcache(create, cleanup) {
+	let cache;
+	return (...args) => {
+		if (cache) return cache;
+		cache = create(...args);
+		startTransition(() => {
+			const old = cache;
+			cache = void 0;
+			cleanup?.(old);
+		});
+		return cache;
+	};
+}
+
+//#endregion
+//#region src/useForkRef.ts
+function useForkRef(...refs) {
+	return useCallback((node) => {
+		refs.forEach((ref) => {
+			if (ref) {
+				if (typeof ref === "function") ref(node);
+				else if (ref.current !== void 0) ref.current = node;
+			}
+		});
+	}, refs);
+}
+
+//#endregion
+//#region src/AutoTransition.tsx
+/**
+* AutoTransition
+*
+* A small container component that provides automatic enter/exit/move
+* animations for its child `Element` nodes. The component intercepts
+* low-level DOM operations (`appendChild`, `insertBefore`, `removeChild`)
+* performed on the container and plays animations (via the Web Animations
+* API) before applying DOM changes such as removing an element.
+*
+* If a `transition` plugin is not provided, AutoTransition applies its
+* default animations:
+*  - enter: fade in (opacity 0 -> 1), 250ms ease-out
+*  - exit: keep element size and position while fading out, 250ms ease-in
+*  - move: translate + scale from previous rect to new rect, 250ms ease-in
+*
+* Notes:
+*  - This component is client-only (relies on DOM measurement & Web Animations API).
+*  - It only animates `Element` nodes; text nodes use native DOM operations.
+*  - In exit path, the provided animation's finish triggers removal from the DOM.
+*
+* Example usage:
+* ```tsx
+* <AutoTransition as="div" className="grid gap-2">
+*   {items.map((it) => (
+*     <Card key={it.id}>{it.title}</Card>
+*   ))}
+* </AutoTransition>
+*
+* // with custom transition plugin
+* <AutoTransition transition={FloatingPanelTransition} as="div">
+*   {isOpen && <PanelContent/>}
+* </AutoTransition>
+* ```
+*
+* @template T - Element type to render as (e.g. "div")
+* @param props - props as defined by `AutoTransitionProps<T>`
+*/
+function AutoTransition({ as, children, transition, ref: externalRef, ...rest }) {
+	const Component = as ?? Slot;
+	const ref = useRef(null);
+	useEffect(() => {
+		const removed = /* @__PURE__ */ new Set();
+		const target = ref.current;
+		let measureTarget = target;
+		let styles = getComputedStyle(measureTarget);
+		while (styles.display === "contents" || styles.position === "static" && measureTarget !== document.body) {
+			measureTarget = measureTarget.parentElement;
+			styles = getComputedStyle(measureTarget);
+		}
+		const parentRect = microcache(() => {
+			const borderBox = measureTarget.getBoundingClientRect();
+			return {
+				left: borderBox.left + parseFloat(styles.borderLeftWidth || "0"),
+				top: borderBox.top + parseFloat(styles.borderTopWidth || "0")
+			};
+		});
+		const snapshot = microcache(() => {
+			const parent = parentRect();
+			const result = /* @__PURE__ */ new Map();
+			for (const child of target.children) if (child instanceof Element) {
+				const rect = child.getBoundingClientRect();
+				result.set(child, {
+					x: rect.left - parent.left,
+					y: rect.top - parent.top,
+					width: rect.width,
+					height: rect.height
+				});
+			}
+			return result;
+		}, (old) => {
+			for (const child of target.children) if (child instanceof Element) {
+				if (removed.has(child)) continue;
+				const rect = getRelativePosition(child);
+				const oldRect = old.get(child);
+				if (!oldRect) continue;
+				if (rect.x !== oldRect.x || rect.y !== oldRect.y || rect.width !== oldRect.width || rect.height !== oldRect.height) animateNodeMove(child, rect, oldRect);
+			}
+		});
+		target.removeChild = function removeChild(node) {
+			if (node instanceof Element) {
+				if (removed.has(node)) return node;
+				removed.add(node);
+				animateNodeExit(node, snapshot().get(node) ?? getRelativePosition(node));
+				return node;
+			}
+			return Element.prototype.removeChild.call(this, node);
+		};
+		target.insertBefore = function insertBefore(node, child) {
+			snapshot();
+			if (!(node instanceof Element)) return Element.prototype.insertBefore.call(this, node, child);
+			Element.prototype.insertBefore.call(this, node, child);
+			animateNodeEnter(node);
+			return node;
+		};
+		target.appendChild = function appendChild(node) {
+			snapshot();
+			if (!(node instanceof Element)) return Element.prototype.appendChild.call(this, node);
+			Element.prototype.appendChild.call(this, node);
+			animateNodeEnter(node);
+			return node;
+		};
+		return () => {
+			target.removeChild = Element.prototype.removeChild;
+			target.insertBefore = Element.prototype.insertBefore;
+			target.appendChild = Element.prototype.appendChild;
+		};
+		function animateNodeExit(node, rect) {
+			let animation;
+			if (transition?.exit) animation = transition.exit(node, rect);
+			else {
+				const width = `${rect.width}px`;
+				const height = `${rect.height}px`;
+				const translate = `translate(${rect.x}px, ${rect.y}px)`;
+				animation = node.animate({
+					position: ["absolute", "absolute"],
+					opacity: [1, 0],
+					top: ["0", "0"],
+					left: ["0", "0"],
+					transform: [translate, translate],
+					width: [width, width],
+					height: [height, height],
+					margin: ["0", "0"]
+				}, {
+					duration: 250,
+					easing: "ease-in"
+				});
+			}
+			animation.finished.then(() => node.remove());
+			return animation;
+		}
+		function animateNodeEnter(node) {
+			if (transition?.enter) transition.enter(node);
+			else node.animate({ opacity: [0, 1] }, {
+				duration: 250,
+				easing: "ease-out"
+			});
+		}
+		function animateNodeMove(node, rect, oldRect) {
+			if (transition?.move) transition.move(node, rect, oldRect);
+			else {
+				const dx = oldRect.x - rect.x;
+				const dy = oldRect.y - rect.y;
+				const sx = oldRect.width / rect.width;
+				const sy = oldRect.height / rect.height;
+				node.animate({
+					transformOrigin: ["0 0", "0 0"],
+					transform: [`translate(${dx}px, ${dy}px) scale(${sx}, ${sy})`, `translate(0, 0) scale(1, 1)`]
+				}, {
+					duration: 250,
+					easing: "ease-in"
+				});
+			}
+		}
+		function getRelativePosition(node, parent = parentRect()) {
+			const rect = node.getBoundingClientRect();
+			return {
+				x: rect.left - parent.left,
+				y: rect.top - parent.top,
+				width: rect.width,
+				height: rect.height
+			};
+		}
+	}, [transition]);
+	return /* @__PURE__ */ jsx(Component, {
+		ref: useForkRef(ref, externalRef),
+		...rest,
+		children
+	});
+}
+
+//#endregion
+export { AutoTransition };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["cache: T | undefined","animation: Animation"],"sources":["../src/microcache.ts","../src/useForkRef.ts","../src/AutoTransition.tsx"],"sourcesContent":["import { startTransition } from \"react\";\n\nexport function microcache<T, Args extends unknown[]>(create: (...args: Args) => T, cleanup?: (old: T) => void) {\n  let cache: T | undefined;\n  return (...args: Args) => {\n    if (cache) {\n      return cache;\n    }\n    cache = create(...args);\n    startTransition(() => {\n      const old = cache!;\n      cache = undefined;\n      cleanup?.(old);\n    });\n    return cache;\n  };\n}\n","import { useCallback, type Ref } from \"react\";\n\nexport function useForkRef<T>(...refs: (Ref<T> | null | undefined)[]): (node: T | null) => void {\n  return useCallback((node: T | null) => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref.current !== undefined) {\n          ref.current = node;\n        }\n      }\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, refs);\n}\n","import { Slot } from \"@radix-ui/react-slot\";\nimport {\n  useEffect,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ForwardedRef,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { microcache } from \"./microcache.ts\";\nimport { useForkRef } from \"./useForkRef.ts\";\n\n/**\n * A rectangle describing an element's position and size relative to the measured\n * parent used by `AutoTransition` for layout calculations.\n *\n * - `x`/`y` are the left/top offsets relative to the measurement parent's content box.\n * - `width`/`height` are the element's layout size in pixels.\n */\nexport type Rect = {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n};\n\n/**\n * Simple size pair used for resize transitions (width/height in pixels).\n */\nexport type Dimensions = {\n  width: number;\n  height: number;\n};\n\n/**\n * Common props for `AutoTransition`.\n *\n * @template T - Element type to render as (e.g., \"div\", \"ul\").\n */\ntype AutoTransitionBaseProps<T extends ElementType | undefined> = {\n  as?: T;\n  transition?: TransitionPlugin;\n  ref?: ForwardedRef<HTMLElement>;\n};\n\ntype AutoTransitionProps<T extends ElementType | undefined> = T extends ElementType\n  ? AutoTransitionBaseProps<T> &\n      Omit<ComponentPropsWithoutRef<T>, keyof AutoTransitionBaseProps<T>> & {\n        children?: ReactNode;\n      }\n  : AutoTransitionBaseProps<T> & {\n      children: ReactElement;\n    };\n\n/**\n * AutoTransition\n *\n * A small container component that provides automatic enter/exit/move\n * animations for its child `Element` nodes. The component intercepts\n * low-level DOM operations (`appendChild`, `insertBefore`, `removeChild`)\n * performed on the container and plays animations (via the Web Animations\n * API) before applying DOM changes such as removing an element.\n *\n * If a `transition` plugin is not provided, AutoTransition applies its\n * default animations:\n *  - enter: fade in (opacity 0 -> 1), 250ms ease-out\n *  - exit: keep element size and position while fading out, 250ms ease-in\n *  - move: translate + scale from previous rect to new rect, 250ms ease-in\n *\n * Notes:\n *  - This component is client-only (relies on DOM measurement & Web Animations API).\n *  - It only animates `Element` nodes; text nodes use native DOM operations.\n *  - In exit path, the provided animation's finish triggers removal from the DOM.\n *\n * Example usage:\n * ```tsx\n * <AutoTransition as=\"div\" className=\"grid gap-2\">\n *   {items.map((it) => (\n *     <Card key={it.id}>{it.title}</Card>\n *   ))}\n * </AutoTransition>\n *\n * // with custom transition plugin\n * <AutoTransition transition={FloatingPanelTransition} as=\"div\">\n *   {isOpen && <PanelContent/>}\n * </AutoTransition>\n * ```\n *\n * @template T - Element type to render as (e.g. \"div\")\n * @param props - props as defined by `AutoTransitionProps<T>`\n */\nexport function AutoTransition<T extends ElementType | undefined>({\n  as,\n  children,\n  transition,\n  ref: externalRef,\n  ...rest\n}: AutoTransitionProps<T>) {\n  const Component = as ?? Slot;\n  const ref = useRef<HTMLElement>(null);\n  useEffect(() => {\n    const removed = new Set<Element>();\n    const target = ref.current!;\n    let measureTarget = target;\n    let styles = getComputedStyle(measureTarget);\n    while (styles.display === \"contents\" || (styles.position === \"static\" && measureTarget !== document.body)) {\n      measureTarget = measureTarget.parentElement!;\n      styles = getComputedStyle(measureTarget);\n    }\n    const parentRect = microcache(() => {\n      const borderBox = measureTarget.getBoundingClientRect();\n      return {\n        left: borderBox.left + parseFloat(styles.borderLeftWidth || \"0\"),\n        top: borderBox.top + parseFloat(styles.borderTopWidth || \"0\"),\n      };\n    });\n    const snapshot = microcache(\n      () => {\n        const parent = parentRect();\n        const result = new Map<Element, Rect>();\n        for (const child of target.children) {\n          if (child instanceof Element) {\n            const rect = child.getBoundingClientRect();\n            result.set(child, {\n              x: rect.left - parent.left,\n              y: rect.top - parent.top,\n              width: rect.width,\n              height: rect.height,\n            });\n          }\n        }\n        return result;\n      },\n      (old) => {\n        for (const child of target.children) {\n          if (child instanceof Element) {\n            if (removed.has(child)) continue;\n            const rect = getRelativePosition(child);\n            const oldRect = old.get(child);\n            if (!oldRect) continue;\n            if (\n              rect.x !== oldRect.x ||\n              rect.y !== oldRect.y ||\n              rect.width !== oldRect.width ||\n              rect.height !== oldRect.height\n            ) {\n              animateNodeMove(child, rect, oldRect);\n            }\n          }\n        }\n      },\n    );\n    target.removeChild = function removeChild<T extends Node>(node: T) {\n      if (node instanceof Element) {\n        if (removed.has(node)) return node;\n        removed.add(node);\n        const rect = snapshot().get(node) ?? getRelativePosition(node);\n        animateNodeExit(node, rect);\n        return node;\n      }\n      return Element.prototype.removeChild.call(this, node) as T;\n    };\n    target.insertBefore = function insertBefore<T extends Node>(node: T, child: Node | null) {\n      snapshot();\n      if (!(node instanceof Element)) {\n        return Element.prototype.insertBefore.call(this, node, child) as T;\n      }\n      Element.prototype.insertBefore.call(this, node, child);\n      animateNodeEnter(node);\n      return node;\n    };\n    target.appendChild = function appendChild<T extends Node>(node: T) {\n      snapshot();\n      if (!(node instanceof Element)) {\n        return Element.prototype.appendChild.call(this, node) as T;\n      }\n      Element.prototype.appendChild.call(this, node);\n      animateNodeEnter(node);\n      return node;\n    };\n    return () => {\n      target.removeChild = Element.prototype.removeChild;\n      target.insertBefore = Element.prototype.insertBefore;\n      target.appendChild = Element.prototype.appendChild;\n    };\n\n    function animateNodeExit(node: Element, rect: Rect) {\n      let animation: Animation;\n      if (transition?.exit) {\n        animation = transition.exit(node, rect);\n      } else {\n        const width = `${rect.width}px`;\n        const height = `${rect.height}px`;\n        const translate = `translate(${rect.x}px, ${rect.y}px)`;\n        animation = node.animate(\n          {\n            position: [\"absolute\", \"absolute\"],\n            opacity: [1, 0],\n            top: [\"0\", \"0\"],\n            left: [\"0\", \"0\"],\n            transform: [translate, translate],\n            width: [width, width],\n            height: [height, height],\n            margin: [\"0\", \"0\"],\n          },\n          { duration: 250, easing: \"ease-in\" },\n        );\n      }\n      animation.finished.then(() => node.remove());\n      return animation;\n    }\n\n    function animateNodeEnter(node: Element) {\n      if (transition?.enter) {\n        transition.enter(node);\n      } else {\n        node.animate({ opacity: [0, 1] }, { duration: 250, easing: \"ease-out\" });\n      }\n    }\n\n    function animateNodeMove(node: Element, rect: Rect, oldRect: Rect) {\n      if (transition?.move) {\n        transition.move(node, rect, oldRect);\n      } else {\n        const dx = oldRect.x - rect.x;\n        const dy = oldRect.y - rect.y;\n        const sx = oldRect.width / rect.width;\n        const sy = oldRect.height / rect.height;\n        node.animate(\n          {\n            transformOrigin: [\"0 0\", \"0 0\"],\n            transform: [`translate(${dx}px, ${dy}px) scale(${sx}, ${sy})`, `translate(0, 0) scale(1, 1)`],\n          },\n          { duration: 250, easing: \"ease-in\" },\n        );\n      }\n    }\n\n    function getRelativePosition(node: Element, parent = parentRect()): Rect {\n      const rect = node.getBoundingClientRect();\n      return {\n        x: rect.left - parent.left,\n        y: rect.top - parent.top,\n        width: rect.width,\n        height: rect.height,\n      };\n    }\n  }, [transition]);\n  const forkedRef = useForkRef(ref, externalRef);\n  return (\n    <Component ref={forkedRef} {...rest}>\n      {children}\n    </Component>\n  );\n}\n\n/**\n * A plugin interface to provide custom animations for enter/exit/move/resize.\n * Implementations should return a Web Animations API `Animation` instance.\n *\n * - `enter` receives the element being inserted.\n * - `exit` receives the element being removed and its last-known rectangle\n *    relative to the measurement parent — useful for leaving the element in\n *    place while animating out.\n * - `move` receives the element that's moved and both current/previous rects\n *    to allow translation/scale-based transitions.\n * - `resize` receives the element and previous/new dimensions — note: the\n *    current component implementation doesn't automatically call `resize`,\n *    but implementations may document this hook for future use.\n */\nexport type TransitionPlugin = {\n  /** Play when an element enters/was inserted into the container. */\n  enter?(el: Element): Animation;\n  /** Play when an element is removed; `rect` is the element's rect at removal time. */\n  exit?(el: Element, rect: Rect): Animation;\n  /** Play when an element moves within the container (position or size changes). */\n  move?(el: Element, current: Rect, previous: Rect): Animation;\n  /** Play when element is resized; not invoked by current implementation. */\n  resize?(el: Element, current: Dimensions, previous: Dimensions): Animation;\n};\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@codehz/auto-transition",
+  "version": "0.0.1",
+  "description": "A lightweight React component for automatic enter/exit/move transitions using Web Animations API",
+  "license": "MIT",
+  "author": "codehz",
+  "module": "dist/index.mjs",
+  "type": "module",
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/react": "^19.2.7",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.7.4",
+    "publint": "^0.3.16",
+    "tsdown": "^0.18.2",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.50.1"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,md}": [
+      "prettier --write"
+    ]
+  },
+  "scripts": {
+    "prepare": "bunx tsdown --sourcemap --publint && bunx husky",
+    "lint": "eslint .",
+    "format": "prettier --write ."
+  }
+}