@chao-component/bag-animation-ui 1.0.2 → 1.0.4

package/dist/index.d.mts

@@ -8,8 +8,11 @@ interface BagAnimationProps {
     defaultImage?: string;
     defaultImageAlt?: string;
     swipeHintText?: string;
+    showMask?: boolean;
+    maskOpacity?: number;
+    maskBlur?: number;
 }
-declare function BagAnimation({ isAnimating, setIsAnimating, doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText }: BagAnimationProps): react_jsx_runtime.JSX.Element;
+declare function BagAnimation({ isAnimating, setIsAnimating, doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText, showMask, maskOpacity, maskBlur }: BagAnimationProps): react_jsx_runtime.JSX.Element;
 
 /**
  * 获取打包后的资源路径

package/dist/index.d.ts

@@ -8,8 +8,11 @@ interface BagAnimationProps {
     defaultImage?: string;
     defaultImageAlt?: string;
     swipeHintText?: string;
+    showMask?: boolean;
+    maskOpacity?: number;
+    maskBlur?: number;
 }
-declare function BagAnimation({ isAnimating, setIsAnimating, doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText }: BagAnimationProps): react_jsx_runtime.JSX.Element;
+declare function BagAnimation({ isAnimating, setIsAnimating, doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText, showMask, maskOpacity, maskBlur }: BagAnimationProps): react_jsx_runtime.JSX.Element;
 
 /**
  * 获取打包后的资源路径

package/dist/index.js

@@ -808,7 +808,10 @@ function BagAnimation({
   frames = defaultAnimationFrames,
   defaultImage = defaultImagePath,
   defaultImageAlt = "Weedza Mystery Box",
-  swipeHintText = "Swipe to open"
+  swipeHintText = "Swipe to open",
+  showMask = true,
+  maskOpacity = 0.7,
+  maskBlur = 8
 }) {
   const [frame, setFrame] = (0, import_react.useState)(0);
   const [isPausedAtThird, setIsPausedAtThird] = (0, import_react.useState)(false);
@@ -1028,79 +1031,112 @@ function BagAnimation({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    isAnimating && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative w-full md:w-[85%] mx-auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "canvas",
+    isAnimating && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      showMask && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
         {
-          ref: canvasRef,
-          onMouseDown,
-          onMouseMove,
-          onMouseUp,
-          onMouseLeave: onMouseUp,
-          onTouchStart: (e) => {
-            if (isPausedAtThird && canvasRef.current) {
-              const touch = e.touches[0];
-              const rect = canvasRef.current.getBoundingClientRect();
-              const touchGap = touch.clientX - rect.left;
-              const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
-              setThirdFrameProgress(initialProgress);
-              setShowSwipeHint(false);
-            }
-          },
-          onTouchMove: (e) => {
-            if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
-            const touch = e.touches[0];
-            const rect = canvasRef.current.getBoundingClientRect();
-            const relativeX = touch.clientX - rect.left;
-            const canvasWidth = rect.width;
-            const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
-            setThirdFrameProgress(progress);
-            if (progress >= 95 && !hasTriggeredFourthFrame.current) {
-              hasTriggeredFourthFrame.current = true;
-              setIsPausedAtThird(false);
-              setThirdFrameProgress(0);
-              setFrame(3);
-            }
-          },
-          onTouchEnd: (e) => {
-            if (isPausedAtThird) {
-              e.preventDefault();
-              setThirdFrameProgress(0);
-              setShowSwipeHint(true);
-            }
-          },
-          className: "select-none cursor-pointer w-full h-full object-contain",
+          className: "fixed inset-0 z-[9998]",
           style: {
-            imageRendering: "pixelated",
-            cursor: isPausedAtThird ? "grab" : "pointer",
-            touchAction: "none",
-            // 防止默認觸摸行為
-            userSelect: "none"
-            // 防止選中
+            backgroundColor: `rgba(0, 0, 0, ${maskOpacity})`,
+            backdropFilter: `blur(${maskBlur}px)`,
+            WebkitBackdropFilter: `blur(${maskBlur}px)`
+            // Safari 支持
+          },
+          onClick: (e) => {
+            e.stopPropagation();
           }
         }
       ),
-      isPausedAtThird && showSwipeHint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute bottom-8 left-1/2 transform -translate-x-1/2 bg-black/70 text-white px-6 py-3 rounded-full text-sm md:text-base font-medium animate-pulse pointer-events-none z-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "svg",
-          {
-            className: "w-5 h-5 md:w-6 md:h-6",
-            fill: "none",
-            stroke: "currentColor",
-            viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M13 7l5 5m0 0l-5 5m5-5H6"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: swipeHintText })
-      ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: "fixed inset-0 z-[9999] flex items-center justify-center pointer-events-none",
+          style: { pointerEvents: "none" },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              className: "relative w-full max-w-[90vw] max-h-[90vh] flex items-center justify-center pointer-events-auto",
+              style: { pointerEvents: "auto" },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "canvas",
+                  {
+                    ref: canvasRef,
+                    onMouseDown,
+                    onMouseMove,
+                    onMouseUp,
+                    onMouseLeave: onMouseUp,
+                    onTouchStart: (e) => {
+                      if (isPausedAtThird && canvasRef.current) {
+                        const touch = e.touches[0];
+                        const rect = canvasRef.current.getBoundingClientRect();
+                        const touchGap = touch.clientX - rect.left;
+                        const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
+                        setThirdFrameProgress(initialProgress);
+                        setShowSwipeHint(false);
+                      }
+                    },
+                    onTouchMove: (e) => {
+                      if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
+                      const touch = e.touches[0];
+                      const rect = canvasRef.current.getBoundingClientRect();
+                      const relativeX = touch.clientX - rect.left;
+                      const canvasWidth = rect.width;
+                      const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
+                      setThirdFrameProgress(progress);
+                      if (progress >= 95 && !hasTriggeredFourthFrame.current) {
+                        hasTriggeredFourthFrame.current = true;
+                        setIsPausedAtThird(false);
+                        setThirdFrameProgress(0);
+                        setFrame(3);
+                      }
+                    },
+                    onTouchEnd: (e) => {
+                      if (isPausedAtThird) {
+                        e.preventDefault();
+                        setThirdFrameProgress(0);
+                        setShowSwipeHint(true);
+                      }
+                    },
+                    className: "select-none cursor-pointer w-full h-full object-contain",
+                    style: {
+                      imageRendering: "pixelated",
+                      cursor: isPausedAtThird ? "grab" : "pointer",
+                      touchAction: "none",
+                      // 防止默認觸摸行為
+                      userSelect: "none",
+                      // 防止選中
+                      maxWidth: "100%",
+                      maxHeight: "100%"
+                    }
+                  }
+                ),
+                isPausedAtThird && showSwipeHint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute bottom-8 left-1/2 transform -translate-x-1/2 bg-black/70 text-white px-6 py-3 rounded-full text-sm md:text-base font-medium animate-pulse pointer-events-none z-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "svg",
+                    {
+                      className: "w-5 h-5 md:w-6 md:h-6",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M13 7l5 5m0 0l-5 5m5-5H6"
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: swipeHintText })
+                ] }) })
+              ]
+            }
+          )
+        }
+      )
     ] }),
     !isAnimating && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "img",

package/dist/index.mjs

@@ -792,7 +792,10 @@ function BagAnimation({
   frames = defaultAnimationFrames,
   defaultImage = defaultImagePath,
   defaultImageAlt = "Weedza Mystery Box",
-  swipeHintText = "Swipe to open"
+  swipeHintText = "Swipe to open",
+  showMask = true,
+  maskOpacity = 0.7,
+  maskBlur = 8
 }) {
   const [frame, setFrame] = useState(0);
   const [isPausedAtThird, setIsPausedAtThird] = useState(false);
@@ -1012,79 +1015,112 @@ function BagAnimation({
     }
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isAnimating && /* @__PURE__ */ jsxs("div", { className: "relative w-full md:w-[85%] mx-auto", children: [
-      /* @__PURE__ */ jsx(
-        "canvas",
+    isAnimating && /* @__PURE__ */ jsxs(Fragment, { children: [
+      showMask && /* @__PURE__ */ jsx(
+        "div",
         {
-          ref: canvasRef,
-          onMouseDown,
-          onMouseMove,
-          onMouseUp,
-          onMouseLeave: onMouseUp,
-          onTouchStart: (e) => {
-            if (isPausedAtThird && canvasRef.current) {
-              const touch = e.touches[0];
-              const rect = canvasRef.current.getBoundingClientRect();
-              const touchGap = touch.clientX - rect.left;
-              const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
-              setThirdFrameProgress(initialProgress);
-              setShowSwipeHint(false);
-            }
-          },
-          onTouchMove: (e) => {
-            if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
-            const touch = e.touches[0];
-            const rect = canvasRef.current.getBoundingClientRect();
-            const relativeX = touch.clientX - rect.left;
-            const canvasWidth = rect.width;
-            const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
-            setThirdFrameProgress(progress);
-            if (progress >= 95 && !hasTriggeredFourthFrame.current) {
-              hasTriggeredFourthFrame.current = true;
-              setIsPausedAtThird(false);
-              setThirdFrameProgress(0);
-              setFrame(3);
-            }
-          },
-          onTouchEnd: (e) => {
-            if (isPausedAtThird) {
-              e.preventDefault();
-              setThirdFrameProgress(0);
-              setShowSwipeHint(true);
-            }
-          },
-          className: "select-none cursor-pointer w-full h-full object-contain",
+          className: "fixed inset-0 z-[9998]",
           style: {
-            imageRendering: "pixelated",
-            cursor: isPausedAtThird ? "grab" : "pointer",
-            touchAction: "none",
-            // 防止默認觸摸行為
-            userSelect: "none"
-            // 防止選中
+            backgroundColor: `rgba(0, 0, 0, ${maskOpacity})`,
+            backdropFilter: `blur(${maskBlur}px)`,
+            WebkitBackdropFilter: `blur(${maskBlur}px)`
+            // Safari 支持
+          },
+          onClick: (e) => {
+            e.stopPropagation();
           }
         }
       ),
-      isPausedAtThird && showSwipeHint && /* @__PURE__ */ jsx("div", { className: "absolute bottom-8 left-1/2 transform -translate-x-1/2 bg-black/70 text-white px-6 py-3 rounded-full text-sm md:text-base font-medium animate-pulse pointer-events-none z-20", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            className: "w-5 h-5 md:w-6 md:h-6",
-            fill: "none",
-            stroke: "currentColor",
-            viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M13 7l5 5m0 0l-5 5m5-5H6"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { children: swipeHintText })
-      ] }) })
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-[9999] flex items-center justify-center pointer-events-none",
+          style: { pointerEvents: "none" },
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "relative w-full max-w-[90vw] max-h-[90vh] flex items-center justify-center pointer-events-auto",
+              style: { pointerEvents: "auto" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "canvas",
+                  {
+                    ref: canvasRef,
+                    onMouseDown,
+                    onMouseMove,
+                    onMouseUp,
+                    onMouseLeave: onMouseUp,
+                    onTouchStart: (e) => {
+                      if (isPausedAtThird && canvasRef.current) {
+                        const touch = e.touches[0];
+                        const rect = canvasRef.current.getBoundingClientRect();
+                        const touchGap = touch.clientX - rect.left;
+                        const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
+                        setThirdFrameProgress(initialProgress);
+                        setShowSwipeHint(false);
+                      }
+                    },
+                    onTouchMove: (e) => {
+                      if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
+                      const touch = e.touches[0];
+                      const rect = canvasRef.current.getBoundingClientRect();
+                      const relativeX = touch.clientX - rect.left;
+                      const canvasWidth = rect.width;
+                      const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
+                      setThirdFrameProgress(progress);
+                      if (progress >= 95 && !hasTriggeredFourthFrame.current) {
+                        hasTriggeredFourthFrame.current = true;
+                        setIsPausedAtThird(false);
+                        setThirdFrameProgress(0);
+                        setFrame(3);
+                      }
+                    },
+                    onTouchEnd: (e) => {
+                      if (isPausedAtThird) {
+                        e.preventDefault();
+                        setThirdFrameProgress(0);
+                        setShowSwipeHint(true);
+                      }
+                    },
+                    className: "select-none cursor-pointer w-full h-full object-contain",
+                    style: {
+                      imageRendering: "pixelated",
+                      cursor: isPausedAtThird ? "grab" : "pointer",
+                      touchAction: "none",
+                      // 防止默認觸摸行為
+                      userSelect: "none",
+                      // 防止選中
+                      maxWidth: "100%",
+                      maxHeight: "100%"
+                    }
+                  }
+                ),
+                isPausedAtThird && showSwipeHint && /* @__PURE__ */ jsx("div", { className: "absolute bottom-8 left-1/2 transform -translate-x-1/2 bg-black/70 text-white px-6 py-3 rounded-full text-sm md:text-base font-medium animate-pulse pointer-events-none z-20", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      className: "w-5 h-5 md:w-6 md:h-6",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M13 7l5 5m0 0l-5 5m5-5H6"
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { children: swipeHintText })
+                ] }) })
+              ]
+            }
+          )
+        }
+      )
     ] }),
     !isAnimating && /* @__PURE__ */ jsx(
       "img",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chao-component/bag-animation-ui",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -9,10 +9,15 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    }
+    },
+    "./vite-plugin": "./vite-plugin.js",
+    "./webpack-plugin": "./webpack-plugin.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "vite-plugin.js",
+    "webpack-plugin.js",
+    "scripts"
   ],
   "directories": {
     "assets": "dist/assets"

package/scripts/copy-assets.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+/**
+ * 安装脚本：自动复制资源文件到项目的 public 目录
+ * 
+ * 使用方法：
+ * 1. 在 package.json 中添加 postinstall 脚本：
+ *    "scripts": {
+ *      "postinstall": "node node_modules/@chao-component/bag-animation-ui/scripts/copy-assets.js"
+ *    }
+ * 
+ * 2. 或者手动运行：
+ *    node node_modules/@chao-component/bag-animation-ui/scripts/copy-assets.js
+ */
+
+const { copyFileSync, mkdirSync, readdirSync, existsSync } = require('fs');
+const { join, resolve } = require('path');
+
+function copyDir(src, dest) {
+  if (!existsSync(src)) {
+    console.warn(`⚠️  Source directory not found: ${src}`);
+    return;
+  }
+  
+  if (!existsSync(dest)) {
+    mkdirSync(dest, { recursive: true });
+  }
+  
+  const entries = readdirSync(src, { withFileTypes: true });
+  
+  for (const entry of entries) {
+    const srcPath = join(src, entry.name);
+    const destPath = join(dest, entry.name);
+    
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function main() {
+  const packageName = '@chao-component/bag-animation-ui';
+  const publicDir = process.argv[2] || 'public';
+  
+  // 查找包的位置
+  const packagePath = resolve(__dirname, '..', 'dist', 'assets');
+  const targetPath = resolve(process.cwd(), publicDir, 'assets');
+  
+  console.log(`📦 Copying assets from ${packageName}...`);
+  console.log(`   Source: ${packagePath}`);
+  console.log(`   Target: ${targetPath}`);
+  
+  if (existsSync(packagePath)) {
+    copyDir(packagePath, targetPath);
+    console.log(`✅ Assets copied successfully to ${publicDir}/assets`);
+  } else {
+    console.error(`❌ Error: Package assets not found at ${packagePath}`);
+    console.error(`   Make sure ${packageName} is installed correctly.`);
+    process.exit(1);
+  }
+}
+
+main();
+

package/vite-plugin.js

@@ -0,0 +1,86 @@
+/**
+ * Vite 插件：自动复制 @chao-component/bag-animation-ui 的资源文件到 public 目录
+ * 
+ * 使用方法：
+ * 在 vite.config.js/ts 中：
+ * 
+ * import { bagAnimationAssets } from '@chao-component/bag-animation-ui/vite-plugin';
+ * 
+ * export default {
+ *   plugins: [
+ *     bagAnimationAssets(),
+ *     // ... 其他插件
+ *   ]
+ * }
+ */
+
+import { copyFileSync, mkdirSync, readdirSync, existsSync, statSync } from 'fs';
+import { join, dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+function copyDir(src, dest) {
+  if (!existsSync(src)) return;
+  
+  if (!existsSync(dest)) {
+    mkdirSync(dest, { recursive: true });
+  }
+  
+  const entries = readdirSync(src, { withFileTypes: true });
+  
+  for (const entry of entries) {
+    const srcPath = join(src, entry.name);
+    const destPath = join(dest, entry.name);
+    
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+export function bagAnimationAssets(options = {}) {
+  const {
+    publicDir = 'public',
+    packageName = '@chao-component/bag-animation-ui'
+  } = options;
+
+  return {
+    name: 'bag-animation-assets',
+    apply: 'serve', // 只在开发服务器时应用
+    buildStart() {
+      try {
+        // 查找 node_modules 中的包
+        const packagePath = resolve(process.cwd(), 'node_modules', packageName, 'dist', 'assets');
+        const targetPath = resolve(process.cwd(), publicDir, 'assets');
+        
+        if (existsSync(packagePath)) {
+          copyDir(packagePath, targetPath);
+          console.log(`✅ [bag-animation-assets] Assets copied to ${publicDir}/assets`);
+        } else {
+          console.warn(`⚠️  [bag-animation-assets] Package assets not found at ${packagePath}`);
+        }
+      } catch (error) {
+        console.error(`❌ [bag-animation-assets] Error copying assets:`, error);
+      }
+    },
+    buildEnd() {
+      // 构建时也复制资源
+      try {
+        const packagePath = resolve(process.cwd(), 'node_modules', packageName, 'dist', 'assets');
+        const targetPath = resolve(process.cwd(), publicDir, 'assets');
+        
+        if (existsSync(packagePath)) {
+          copyDir(packagePath, targetPath);
+          console.log(`✅ [bag-animation-assets] Assets copied to ${publicDir}/assets`);
+        }
+      } catch (error) {
+        console.error(`❌ [bag-animation-assets] Error copying assets:`, error);
+      }
+    }
+  };
+}
+

package/webpack-plugin.js

@@ -0,0 +1,70 @@
+/**
+ * Webpack 插件：自动复制 @chao-component/bag-animation-ui 的资源文件到 public 目录
+ * 
+ * 使用方法：
+ * 在 webpack.config.js 中：
+ * 
+ * const { BagAnimationAssetsPlugin } = require('@chao-component/bag-animation-ui/webpack-plugin');
+ * 
+ * module.exports = {
+ *   plugins: [
+ *     new BagAnimationAssetsPlugin(),
+ *     // ... 其他插件
+ *   ]
+ * }
+ */
+
+const { copyFileSync, mkdirSync, readdirSync, existsSync } = require('fs');
+const { join, resolve } = require('path');
+
+function copyDir(src, dest) {
+  if (!existsSync(src)) return;
+  
+  if (!existsSync(dest)) {
+    mkdirSync(dest, { recursive: true });
+  }
+  
+  const entries = readdirSync(src, { withFileTypes: true });
+  
+  for (const entry of entries) {
+    const srcPath = join(src, entry.name);
+    const destPath = join(dest, entry.name);
+    
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+class BagAnimationAssetsPlugin {
+  constructor(options = {}) {
+    this.options = {
+      publicDir: options.publicDir || 'public',
+      packageName: options.packageName || '@chao-component/bag-animation-ui'
+    };
+  }
+
+  apply(compiler) {
+    compiler.hooks.beforeRun.tapAsync('BagAnimationAssetsPlugin', (compilation, callback) => {
+      try {
+        const packagePath = resolve(process.cwd(), 'node_modules', this.options.packageName, 'dist', 'assets');
+        const targetPath = resolve(process.cwd(), this.options.publicDir, 'assets');
+        
+        if (existsSync(packagePath)) {
+          copyDir(packagePath, targetPath);
+          console.log(`✅ [bag-animation-assets] Assets copied to ${this.options.publicDir}/assets`);
+        } else {
+          console.warn(`⚠️  [bag-animation-assets] Package assets not found at ${packagePath}`);
+        }
+      } catch (error) {
+        console.error(`❌ [bag-animation-assets] Error copying assets:`, error);
+      }
+      callback();
+    });
+  }
+}
+
+module.exports = { BagAnimationAssetsPlugin };
+