diff --git a/package-lock.json b/package-lock.json
index 1ad9d16..3a1fe23 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -266,23 +266,23 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.6.tgz",
-      "integrity": "sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==",
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.2.tgz",
+      "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.28.6",
-        "@babel/types": "^7.28.6"
+        "@babel/types": "^7.29.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
-      "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.2.tgz",
+      "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.29.0"
@@ -946,9 +946,9 @@
       }
     },
     "node_modules/@eslint/eslintrc/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -1019,6 +1019,7 @@
       "version": "0.2.96",
       "resolved": "https://registry.npmjs.org/@fileverse-dev/formula-parser/-/formula-parser-0.2.96.tgz",
       "integrity": "sha512-PLVWp1PSZZEiYLNiU9Lop1lDdvkoeGoBU0066qnuyM01UHxlDnsiD9GRq3DaGox5fBzf25RM4Kj1+l2YOGdnHg==",
+      "license": "MIT",
       "dependencies": {
         "@fileverse-dev/formulajs": "4.4.50",
         "tiny-emitter": "^2.1.0"
@@ -1047,6 +1048,7 @@
       "version": "1.3.11",
       "resolved": "https://registry.npmjs.org/@fileverse-dev/fortune-core/-/fortune-core-1.3.11.tgz",
       "integrity": "sha512-UyaABj3JvOKAJNxAzInLkBVJSrTiAFycXxF3efLvi1mW4giwIeoMekgYTi82+ASi+GJodp1pP3mjjVVidTgtIA==",
+      "license": "MIT",
       "dependencies": {
         "@fileverse-dev/formula-parser": "0.2.96",
         "dayjs": "^1.11.0",
@@ -1060,6 +1062,7 @@
       "version": "1.3.11",
       "resolved": "https://registry.npmjs.org/@fileverse-dev/fortune-react/-/fortune-react-1.3.11.tgz",
       "integrity": "sha512-3VIjM1Fgnkyu/OCt2FsLM2alQhfYu+kynJR2DHjnKwvUzVvCwpW84+Jqe5KM+E3gov+V+RvRP5ZB7AdM2e16wQ==",
+      "license": "MIT",
       "dependencies": {
         "@fileverse-dev/fortune-core": "1.3.11",
         "@fileverse/ui": "5.0.0",
@@ -1074,7 +1077,7 @@
         "react-dom": ">= 18.2"
       }
     },
-    "node_modules/@fileverse/ui": {
+    "node_modules/@fileverse-dev/fortune-react/node_modules/@fileverse/ui": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@fileverse/ui/-/ui-5.0.0.tgz",
       "integrity": "sha512-Q8FiFn7rGJCDleD58aihwXm74U1U+bYrcCfZ7McaHUZUDIKPtlQBzo77sb04HOsWvo4jSPwIkmZbQ3PkD8sD8Q==",
@@ -1110,32 +1113,68 @@
         "react-dom": "^18.2.0"
       }
     },
+    "node_modules/@fileverse/ui": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@fileverse/ui/-/ui-5.0.2.tgz",
+      "integrity": "sha512-uLFOAuz9gB9FHR8571150N9qN9jjP74tN6KNuakqsLyhmOQrrt5GzzNuQLrXPbaWd3x9vvCQXjkARs6EF2Zs5Q==",
+      "dependencies": {
+        "@radix-ui/react-accordion": "^1.2.0",
+        "@radix-ui/react-checkbox": "^1.0.4",
+        "@radix-ui/react-compose-refs": "^1.0.1",
+        "@radix-ui/react-dialog": "^1.1.1",
+        "@radix-ui/react-focus-scope": "^1.1.0",
+        "@radix-ui/react-hover-card": "^1.1.1",
+        "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-switch": "^1.0.3",
+        "@radix-ui/react-tabs": "^1.0.4",
+        "@radix-ui/react-toast": "^1.2.1",
+        "@radix-ui/react-tooltip": "^1.0.7",
+        "@radix-ui/themes": "^3.0.2",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.0",
+        "cmdk": "^1.0.0",
+        "date-fns": "^3.6.0",
+        "emoji-picker-react": "^4.11.1",
+        "framer-motion": "^11.1.7",
+        "lucide-react": "^0.475.0",
+        "react-day-picker": "^8.10.1",
+        "tailwind-merge": "^2.2.2",
+        "tailwindcss-animate": "^1.0.7",
+        "usehooks-ts": "^3.1.0",
+        "vaul": "1.1.2"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "node_modules/@floating-ui/core": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.4.tgz",
-      "integrity": "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==",
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/utils": "^0.2.10"
+        "@floating-ui/utils": "^0.2.11"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.5.tgz",
-      "integrity": "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==",
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/core": "^1.7.4",
-        "@floating-ui/utils": "^0.2.10"
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.7.tgz",
-      "integrity": "sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg==",
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+      "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/dom": "^1.7.5"
+        "@floating-ui/dom": "^1.7.6"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -1143,9 +1182,9 @@
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
-      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
     },
     "node_modules/@humanwhocodes/config-array": {
@@ -1176,9 +1215,9 @@
       }
     },
     "node_modules/@humanwhocodes/config-array/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -1377,6 +1416,22 @@
         "resolve": "~1.19.0"
       }
     },
+    "node_modules/@microsoft/tsdoc-config/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/@microsoft/tsdoc-config/node_modules/resolve": {
       "version": "1.19.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
@@ -3687,9 +3742,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
-      "integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz",
+      "integrity": "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==",
       "cpu": [
         "arm"
       ],
@@ -3701,9 +3756,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
-      "integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz",
+      "integrity": "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==",
       "cpu": [
         "arm64"
       ],
@@ -3715,9 +3770,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
-      "integrity": "sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz",
+      "integrity": "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==",
       "cpu": [
         "arm64"
       ],
@@ -3729,9 +3784,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
-      "integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz",
+      "integrity": "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==",
       "cpu": [
         "x64"
       ],
@@ -3743,9 +3798,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
-      "integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz",
+      "integrity": "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==",
       "cpu": [
         "arm64"
       ],
@@ -3757,9 +3812,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
-      "integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz",
+      "integrity": "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==",
       "cpu": [
         "x64"
       ],
@@ -3771,9 +3826,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
-      "integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz",
+      "integrity": "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==",
       "cpu": [
         "arm"
       ],
@@ -3785,9 +3840,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
-      "integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz",
+      "integrity": "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==",
       "cpu": [
         "arm"
       ],
@@ -3799,9 +3854,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
-      "integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz",
+      "integrity": "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==",
       "cpu": [
         "arm64"
       ],
@@ -3813,9 +3868,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
-      "integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz",
+      "integrity": "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==",
       "cpu": [
         "arm64"
       ],
@@ -3827,9 +3882,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
-      "integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz",
+      "integrity": "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==",
       "cpu": [
         "loong64"
       ],
@@ -3841,9 +3896,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
-      "integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz",
+      "integrity": "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==",
       "cpu": [
         "loong64"
       ],
@@ -3855,9 +3910,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
-      "integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz",
+      "integrity": "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==",
       "cpu": [
         "ppc64"
       ],
@@ -3869,9 +3924,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
-      "integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz",
+      "integrity": "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==",
       "cpu": [
         "ppc64"
       ],
@@ -3883,9 +3938,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
-      "integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz",
+      "integrity": "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==",
       "cpu": [
         "riscv64"
       ],
@@ -3897,9 +3952,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
-      "integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz",
+      "integrity": "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==",
       "cpu": [
         "riscv64"
       ],
@@ -3911,9 +3966,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
-      "integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz",
+      "integrity": "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==",
       "cpu": [
         "s390x"
       ],
@@ -3925,9 +3980,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
-      "integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz",
+      "integrity": "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==",
       "cpu": [
         "x64"
       ],
@@ -3939,9 +3994,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
-      "integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz",
+      "integrity": "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==",
       "cpu": [
         "x64"
       ],
@@ -3953,9 +4008,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
-      "integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz",
+      "integrity": "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==",
       "cpu": [
         "x64"
       ],
@@ -3967,9 +4022,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
-      "integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz",
+      "integrity": "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==",
       "cpu": [
         "arm64"
       ],
@@ -3981,9 +4036,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
-      "integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz",
+      "integrity": "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==",
       "cpu": [
         "arm64"
       ],
@@ -3995,9 +4050,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
-      "integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz",
+      "integrity": "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==",
       "cpu": [
         "ia32"
       ],
@@ -4009,9 +4064,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
-      "integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz",
+      "integrity": "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==",
       "cpu": [
         "x64"
       ],
@@ -4023,9 +4078,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
-      "integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz",
+      "integrity": "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==",
       "cpu": [
         "x64"
       ],
@@ -4233,15 +4288,16 @@
       "license": "MIT"
     },
     "node_modules/@types/lodash": {
-      "version": "4.17.23",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.23.tgz",
-      "integrity": "sha512-RDvF6wTulMPjrNdCoYRC8gNR880JNGT8uB+REUpC2Ns4pRqQJhGz90wh7rgdXDPpCczF3VGktDuFGVnz8zP7HA==",
-      "dev": true
+      "version": "4.17.24",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.24.tgz",
+      "integrity": "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.19.33",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.33.tgz",
-      "integrity": "sha512-Rs1bVAIdBs5gbTIKza/tgpMuG1k3U/UMJLWecIMxNdJFDMzcM5LOiLVRYh3PilWEYDIeUDv7bpiHPLPsbydGcw==",
+      "version": "20.19.37",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.37.tgz",
+      "integrity": "sha512-8kzdPJ3FsNsVIurqBs7oodNnCEVbni9yUEkaHbgptDACOPW04jimGagZ51E6+lXUwJjgnBw+hyko/lkFWCldqw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -4554,26 +4610,26 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.28",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.28.tgz",
-      "integrity": "sha512-kviccYxTgoE8n6OCw96BNdYlBg2GOWfBuOW4Vqwrt7mSKWKwFVvI8egdTltqRgITGPsTFYtKYfxIG8ptX2PJHQ==",
+      "version": "3.5.30",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.30.tgz",
+      "integrity": "sha512-s3DfdZkcu/qExZ+td75015ljzHc6vE+30cFMGRPROYjqkroYI5NV2X1yAMX9UeyBNWB9MxCfPcsjpLS11nzkkw==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.0",
-        "@vue/shared": "3.5.28",
+        "@vue/shared": "3.5.30",
         "entities": "^7.0.1",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.28",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.28.tgz",
-      "integrity": "sha512-/1ZepxAb159jKR1btkefDP+J2xuWL5V3WtleRmxaT+K2Aqiek/Ab/+Ebrw2pPj0sdHO8ViAyyJWfhXXOP/+LQA==",
+      "version": "3.5.30",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.30.tgz",
+      "integrity": "sha512-eCFYESUEVYHhiMuK4SQTldO3RYxyMR/UQL4KdGD1Yrkfdx4m/HYuZ9jSfPdA+nWJY34VWndiYdW/wZXyiPEB9g==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.28",
-        "@vue/shared": "3.5.28"
+        "@vue/compiler-core": "3.5.30",
+        "@vue/shared": "3.5.30"
       }
     },
     "node_modules/@vue/language-core": {
@@ -4602,9 +4658,9 @@
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.28",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.28.tgz",
-      "integrity": "sha512-cfWa1fCGBxrvaHRhvV3Is0MgmrbSCxYTXCSCau2I0a1Xw1N1pHAvkWCiXPRAqjvToILvguNyEwjevUqAuBQWvQ==",
+      "version": "3.5.30",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.30.tgz",
+      "integrity": "sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ==",
       "license": "MIT"
     },
     "node_modules/acorn": {
@@ -4646,9 +4702,10 @@
       "license": "MIT"
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
@@ -4833,9 +4890,9 @@
       "license": "MIT"
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.24",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.24.tgz",
-      "integrity": "sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==",
+      "version": "10.4.27",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.27.tgz",
+      "integrity": "sha512-NP9APE+tO+LuJGn7/9+cohklunJsXWiaWEfV3si4Gi/XHDwVNgkwr1J3RQYFIvPy76GmJ9/bW8vyoU1LcxwKHA==",
       "dev": true,
       "funding": [
         {
@@ -4854,7 +4911,7 @@
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.28.1",
-        "caniuse-lite": "^1.0.30001766",
+        "caniuse-lite": "^1.0.30001774",
         "fraction.js": "^5.3.4",
         "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
@@ -4896,9 +4953,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
-      "integrity": "sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==",
+      "version": "2.10.9",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.9.tgz",
+      "integrity": "sha512-OZd0e2mU11ClX8+IdXe3r0dbqMEznRiT4TfbhYIbcRPZkqJ7Qwer8ij3GZAmLsRKa+II9V1v5czCkvmHH3XZBg==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -5102,9 +5159,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001770",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001770.tgz",
-      "integrity": "sha512-x/2CLQ1jHENRbHg5PSId2sXq1CIO1CISvwWAj027ltMVG2UNgW+w9oH2+HzgEIRFembL8bUlXtfbBHR1fCg2xw==",
+      "version": "1.0.30001780",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001780.tgz",
+      "integrity": "sha512-llngX0E7nQci5BPJDqoZSbuZ5Bcs9F5db7EtgfwBerX9XGtkkiO4NwfDDIRzHTTwcYC8vC7bmeUEPGrKlR/TkQ==",
       "dev": true,
       "funding": [
         {
@@ -5411,9 +5468,9 @@
       }
     },
     "node_modules/dayjs": {
-      "version": "1.11.19",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
-      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.20.tgz",
+      "integrity": "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==",
       "license": "MIT"
     },
     "node_modules/de-indent": {
@@ -5541,9 +5598,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.286",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz",
-      "integrity": "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==",
+      "version": "1.5.321",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.321.tgz",
+      "integrity": "sha512-L2C7Q279W2D/J4PLZLk7sebOILDSWos7bMsMNN06rK482umHUrh/3lM8G7IlHFOYip2oAg5nha1rCMxr/rs6ZQ==",
       "dev": true,
       "license": "ISC"
     },
@@ -5839,9 +5896,9 @@
       }
     },
     "node_modules/eslint/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -6176,9 +6233,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "dev": true,
       "license": "ISC"
     },
@@ -6405,9 +6462,9 @@
       }
     },
     "node_modules/glob/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -6562,15 +6619,16 @@
       "version": "9.0.21",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
       "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/immer"
       }
     },
     "node_modules/immutable": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
-      "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz",
+      "integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==",
       "dev": true,
       "license": "MIT"
     },
@@ -6907,9 +6965,9 @@
       "license": "MIT"
     },
     "node_modules/katex": {
-      "version": "0.16.28",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.28.tgz",
-      "integrity": "sha512-YHzO7721WbmAL6Ov1uzN/l5mY5WWWhJBSW+jq4tkfZfsxmo1hu6frS0EOswvjBUnWE6NtjEs48SFn5CQESRLZg==",
+      "version": "0.16.39",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.39.tgz",
+      "integrity": "sha512-FR2f6y85+81ZLO0GPhyQ+EJl/E5ILNWltJhpAeOTzRny952Z13x2867lTFDmvMZix//Ux3CuMQ2VkLXRbUwOFg==",
       "funding": [
         "https://opencollective.com/katex",
         "https://github.com/sponsors/katex"
@@ -7318,13 +7376,13 @@
       }
     },
     "node_modules/log-update/node_modules/strip-ansi": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
-      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ansi-regex": "^6.0.1"
+        "ansi-regex": "^6.2.2"
       },
       "engines": {
         "node": ">=12"
@@ -7580,9 +7638,9 @@
       "optional": true
     },
     "node_modules/node-releases": {
-      "version": "2.0.27",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
-      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "version": "2.0.36",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.36.tgz",
+      "integrity": "sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==",
       "dev": true,
       "license": "MIT"
     },
@@ -7628,6 +7686,7 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/numeral/-/numeral-2.0.6.tgz",
       "integrity": "sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA==",
+      "license": "MIT",
       "engines": {
         "node": "*"
       }
@@ -7851,9 +7910,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
+      "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
       "funding": [
         {
           "type": "opencollective",
@@ -8403,9 +8462,9 @@
       }
     },
     "node_modules/readdir-glob/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz",
+      "integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -8532,9 +8591,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
-      "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
+      "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -8548,31 +8607,31 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.57.1",
-        "@rollup/rollup-android-arm64": "4.57.1",
-        "@rollup/rollup-darwin-arm64": "4.57.1",
-        "@rollup/rollup-darwin-x64": "4.57.1",
-        "@rollup/rollup-freebsd-arm64": "4.57.1",
-        "@rollup/rollup-freebsd-x64": "4.57.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.57.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.57.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.57.1",
-        "@rollup/rollup-linux-arm64-musl": "4.57.1",
-        "@rollup/rollup-linux-loong64-gnu": "4.57.1",
-        "@rollup/rollup-linux-loong64-musl": "4.57.1",
-        "@rollup/rollup-linux-ppc64-gnu": "4.57.1",
-        "@rollup/rollup-linux-ppc64-musl": "4.57.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.57.1",
-        "@rollup/rollup-linux-riscv64-musl": "4.57.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.57.1",
-        "@rollup/rollup-linux-x64-gnu": "4.57.1",
-        "@rollup/rollup-linux-x64-musl": "4.57.1",
-        "@rollup/rollup-openbsd-x64": "4.57.1",
-        "@rollup/rollup-openharmony-arm64": "4.57.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.57.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.57.1",
-        "@rollup/rollup-win32-x64-gnu": "4.57.1",
-        "@rollup/rollup-win32-x64-msvc": "4.57.1",
+        "@rollup/rollup-android-arm-eabi": "4.59.0",
+        "@rollup/rollup-android-arm64": "4.59.0",
+        "@rollup/rollup-darwin-arm64": "4.59.0",
+        "@rollup/rollup-darwin-x64": "4.59.0",
+        "@rollup/rollup-freebsd-arm64": "4.59.0",
+        "@rollup/rollup-freebsd-x64": "4.59.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.59.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.59.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.59.0",
+        "@rollup/rollup-linux-arm64-musl": "4.59.0",
+        "@rollup/rollup-linux-loong64-gnu": "4.59.0",
+        "@rollup/rollup-linux-loong64-musl": "4.59.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.59.0",
+        "@rollup/rollup-linux-ppc64-musl": "4.59.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.59.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.59.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.59.0",
+        "@rollup/rollup-linux-x64-gnu": "4.59.0",
+        "@rollup/rollup-linux-x64-musl": "4.59.0",
+        "@rollup/rollup-openbsd-x64": "4.59.0",
+        "@rollup/rollup-openharmony-arm64": "4.59.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.59.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.59.0",
+        "@rollup/rollup-win32-x64-gnu": "4.59.0",
+        "@rollup/rollup-win32-x64-msvc": "4.59.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -8620,14 +8679,14 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.97.3",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz",
-      "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==",
+      "version": "1.98.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.98.0.tgz",
+      "integrity": "sha512-+4N/u9dZ4PrgzGgPlKnaaRQx64RO0JBKs9sDhQ2pLgN6JQZ25uPQZKQYaBJU48Kd5BxgXoJ4e09Dq7nMcOUW3A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "chokidar": "^4.0.0",
-        "immutable": "^5.0.2",
+        "immutable": "^5.1.5",
         "source-map-js": ">=0.6.2 <2.0.0"
       },
       "bin": {
@@ -8894,13 +8953,13 @@
       }
     },
     "node_modules/string-width/node_modules/strip-ansi": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
-      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ansi-regex": "^6.0.1"
+        "ansi-regex": "^6.2.2"
       },
       "engines": {
         "node": ">=12"
@@ -9170,7 +9229,8 @@
     "node_modules/tiny-emitter": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "license": "MIT"
     },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
@@ -10176,13 +10236,13 @@
       }
     },
     "node_modules/wrap-ansi/node_modules/strip-ansi": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
-      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ansi-regex": "^6.0.1"
+        "ansi-regex": "^6.2.2"
       },
       "engines": {
         "node": ">=12"
@@ -10425,9 +10485,9 @@
       }
     },
     "node_modules/yjs": {
-      "version": "13.6.29",
-      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.29.tgz",
-      "integrity": "sha512-kHqDPdltoXH+X4w1lVmMtddE3Oeqq48nM40FD5ojTd8xYhQpzIDcfE2keMSU5bAgRPJBe225WTUdyUgj1DtbiQ==",
+      "version": "13.6.30",
+      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.30.tgz",
+      "integrity": "sha512-vv/9h42eCMC81ZHDFswuu/MKzkl/vyq1BhaNGfHyOonwlG4CJbQF4oiBBJPvfdeCt/PlVDWh7Nov9D34YY09uQ==",
       "license": "MIT",
       "dependencies": {
         "lib0": "^0.2.99"
diff --git a/package.json b/package.json
index f6d84d1..e48b8c1 100644
--- a/package.json
+++ b/package.json
@@ -81,4 +81,4 @@
     "typescript": "^5.2.2",
     "vite": "^5.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/package/components/editor-workbook.tsx b/package/components/editor-workbook.tsx
index 13cb871..aeb7e79 100644
--- a/package/components/editor-workbook.tsx
+++ b/package/components/editor-workbook.tsx
@@ -39,7 +39,7 @@ import {
   syncCurrentSheetField,
   updateAllCell,
 } from './editor-workbook-sync';
-
+// import { useEditorData } from '../hooks/use-editor-data';
 // Use the types defined in types.ts
 type OnboardingHandler = OnboardingHandlerType;
 type DataBlockApiKeyHandler = DataBlockApiKeyHandlerType;
@@ -108,8 +108,11 @@ export const EditorWorkbook: React.FC<EditorWorkbookProps> = ({
     getDocumentTitle,
     updateDocumentTitle,
     handleLiveQuery,
+    setIsDataLoaded,
   } = useEditor();
 
+  // const { setIsDataLoaded } = useEditorData();
+
   useEffect(() => {
     if (dataBlockCalcFunction) {
       dataBlockListYdocUpdate({
@@ -143,6 +146,7 @@ export const EditorWorkbook: React.FC<EditorWorkbookProps> = ({
   });
 
   usehandleHomepageRedirect({
+    setIsDataLoaded,
     setSelectedTemplate,
     handleXLSXUpload,
     handleCSVUpload,
diff --git a/package/components/import-button-ui.tsx b/package/components/import-button-ui.tsx
index 7bfb984..09a4170 100644
--- a/package/components/import-button-ui.tsx
+++ b/package/components/import-button-ui.tsx
@@ -1,6 +1,16 @@
 import { Popover, PopoverContent, PopoverTrigger } from '@fileverse/ui';
 import { ChangeEventHandler, useState } from 'react';
-import { LucideIcon, IconButton, DynamicModal, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@fileverse/ui';
+import {
+  LucideIcon,
+  IconButton,
+  DynamicModal,
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@fileverse/ui';
 
 import './import-button.scss';
 const MAX_FILE_SIZE = 4 * 1024 * 1024;
@@ -14,9 +24,16 @@ export const CustomButton = ({
   handleExportToJSON,
 }: {
   setExportDropdownOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  handleCSVUpload:
-  (event: ChangeEventHandler<HTMLInputElement> | undefined, file: any, importType: string) => void;
-  handleXLSXUpload: (event: ChangeEventHandler<HTMLInputElement> | undefined, file: any, importType: string) => void;
+  handleCSVUpload: (
+    event: ChangeEventHandler<HTMLInputElement> | undefined,
+    file: any,
+    importType: string,
+  ) => void | Promise<void>;
+  handleXLSXUpload: (
+    event: ChangeEventHandler<HTMLInputElement> | undefined,
+    file: any,
+    importType: string,
+  ) => void | Promise<void>;
   handleExportToXLSX: () => void;
   handleExportToCSV: () => void;
   handleExportToJSON: () => void;
@@ -26,35 +43,46 @@ export const CustomButton = ({
   const [importType, setImportType] = useState('new-dsheet');
   const [file, setFile] = useState<any>(null);
   const [extension, setExtension] = useState('');
+  const [isImporting, setIsImporting] = useState(false);
 
-  const handleApplyData = () => {
+  const handleApplyData = async () => {
     if (extension === 'xlsx') {
       if (file && importType === 'new-dsheet') {
         const url = URL.createObjectURL(file);
         setTimeout(() => {
           window.open(
             `/sheet/create?xlsx=${encodeURIComponent(url)}`,
-            '_blank'
+            '_blank',
           );
         }, 0);
+        setOpenImportTypeModal(false);
       } else {
-        handleXLSXUpload(undefined, file, importType);
+        setIsImporting(true);
+        try {
+          await Promise.resolve(handleXLSXUpload(undefined, file, importType));
+        } finally {
+          setIsImporting(false);
+          setOpenImportTypeModal(false);
+        }
       }
     } else {
       if (file && importType === 'new-dsheet') {
         const url = URL.createObjectURL(file);
         setTimeout(() => {
-          window.open(
-            `/sheet/create?csv=${encodeURIComponent(url)}`,
-            '_blank'
-          );
+          window.open(`/sheet/create?csv=${encodeURIComponent(url)}`, '_blank');
         }, 0);
+        setOpenImportTypeModal(false);
       } else {
-        handleCSVUpload(undefined, file, importType);
+        setIsImporting(true);
+        try {
+          await Promise.resolve(handleCSVUpload(undefined, file, importType));
+        } finally {
+          setIsImporting(false);
+          setOpenImportTypeModal(false);
+        }
       }
     }
-    setOpenImportTypeModal(false);
-  }
+  };
 
   return (
     <Popover
@@ -92,7 +120,10 @@ export const CustomButton = ({
           className="p-2 color-text-default dsheet-export-section"
           data-testid="export-section"
         >
-          <h2 className="dsheet-heading dsheet-heading--section text-helper-text-sm color-text-secondary pl-2" data-testid="export-heading">
+          <h2
+            className="dsheet-heading dsheet-heading--section text-helper-text-sm color-text-secondary pl-2"
+            data-testid="export-heading"
+          >
             Export
           </h2>
           <button
@@ -102,7 +133,9 @@ export const CustomButton = ({
             data-testid="export-json-button"
           >
             <LucideIcon name="FileExport" className="w-[17px] h-[17px]" />
-            <span className="dsheet-text dsheet-text--body text-body-sm">Export to .json</span>
+            <span className="dsheet-text dsheet-text--body text-body-sm">
+              Export to .json
+            </span>
           </button>
 
           <button
@@ -112,7 +145,9 @@ export const CustomButton = ({
             data-testid="export-xlsx-button"
           >
             <LucideIcon name="FileExport" className="w-[17px] h-[17px]" />
-            <span className="dsheet-text dsheet-text--body text-body-sm">Export to .xlsx</span>
+            <span className="dsheet-text dsheet-text--body text-body-sm">
+              Export to .xlsx
+            </span>
           </button>
 
           <button
@@ -122,25 +157,36 @@ export const CustomButton = ({
             data-testid="export-csv-button"
           >
             <LucideIcon name="FileExport" className="w-[17px] h-[17px]" />
-            <span className="dsheet-text dsheet-text--body text-body-sm">Export to .csv</span>
+            <span className="dsheet-text dsheet-text--body text-body-sm">
+              Export to .csv
+            </span>
           </button>
         </div>
         <div
           className="p-2 color-text-default dsheet-import-section"
           data-testid="import-section"
-        // onClick={() => setIsOpen(false)}
+          // onClick={() => setIsOpen(false)}
         >
-          <h2 className="dsheet-heading dsheet-heading--section text-helper-text-sm color-text-secondary pl-2" data-testid="import-heading">
+          <h2
+            className="dsheet-heading dsheet-heading--section text-helper-text-sm color-text-secondary pl-2"
+            data-testid="import-heading"
+          >
             Import
           </h2>
           <div className="btn dsheet-import-actions">
-            <button type="button" className="dsheet-btn dsheet-btn--import-xlsx hover:color-bg-default-hover h-8 rounded p-2 w-full text-left flex items-center justify-start space-x-2 transition" data-testid="import-xlsx-button">
+            <button
+              type="button"
+              className="dsheet-btn dsheet-btn--import-xlsx hover:color-bg-default-hover h-8 rounded p-2 w-full text-left flex items-center justify-start space-x-2 transition"
+              data-testid="import-xlsx-button"
+            >
               <LucideIcon name="FileImport" />
               <label
                 htmlFor="xlsx-upload"
                 className="dsheet-label text-body-sm w-full cursor-pointer"
               >
-                <span className="dsheet-text dsheet-text--body">Import .xlsx</span>
+                <span className="dsheet-text dsheet-text--body">
+                  Import .xlsx
+                </span>
               </label>
             </button>
             <input
@@ -173,13 +219,19 @@ export const CustomButton = ({
               }}
               style={{ display: 'none' }}
             />
-            <button type="button" className="dsheet-btn dsheet-btn--import-csv hover:color-bg-default-hover h-8 rounded p-2 w-full text-left flex items-center justify-start space-x-2 transition" data-testid="import-csv-button">
+            <button
+              type="button"
+              className="dsheet-btn dsheet-btn--import-csv hover:color-bg-default-hover h-8 rounded p-2 w-full text-left flex items-center justify-start space-x-2 transition"
+              data-testid="import-csv-button"
+            >
               <LucideIcon width={18} height={18} name="FileImport" />
               <label
                 htmlFor="csv-upload"
                 className="dsheet-label text-body-sm w-full cursor-pointer"
               >
-                <span className="dsheet-text dsheet-text--body">Import .csv</span>
+                <span className="dsheet-text dsheet-text--body">
+                  Import .csv
+                </span>
               </label>
             </button>
           </div>
@@ -188,37 +240,75 @@ export const CustomButton = ({
       <DynamicModal
         hasCloseIcon
         open={openImportTypeModal}
-        onOpenChange={setOpenImportTypeModal}
+        onOpenChange={(open) => {
+          if (isImporting && !open) return;
+          setOpenImportTypeModal(open);
+        }}
         className="dsheet-modal dsheet-modal--import rounded-lg max-w-[420px]"
         contentClassName="!pt-4 px-6"
         title={
-          <div className="dsheet-heading dsheet-heading--modal font-medium text-lg leading-6" data-testid="import-modal-title">Import file</div>
+          <div
+            className="dsheet-heading dsheet-heading--modal font-medium text-lg leading-6"
+            data-testid="import-modal-title"
+          >
+            Import file
+          </div>
         }
         content={
-          <div className="dsheet-modal-content flex flex-col gap-4 font-normal text-sm leading-5" data-testid="import-modal-content">
-            <div className="dsheet-modal-field" data-testid="import-modal-filename-field">
-              <div className="dsheet-label dsheet-label--heading text-heading-xsm mb-[4px]">File name</div>
+          <div
+            className="dsheet-modal-content flex flex-col gap-4 font-normal text-sm leading-5"
+            data-testid="import-modal-content"
+          >
+            <div
+              className="dsheet-modal-field"
+              data-testid="import-modal-filename-field"
+            >
+              <div className="dsheet-label dsheet-label--heading text-heading-xsm mb-[4px]">
+                File name
+              </div>
               <div className="dsheet-input-wrap h-[36px] p-2 border border-gray-200 rounded color-bg-disabled flex items-center">
-                <p className="dsheet-text dsheet-text--body text-body-sm color-text-disabled truncate-text" data-testid="import-modal-filename">{file?.name}</p>
+                <p
+                  className="dsheet-text dsheet-text--body text-body-sm color-text-disabled truncate-text"
+                  data-testid="import-modal-filename"
+                >
+                  {file?.name}
+                </p>
               </div>
               {file?.size > MAX_FILE_SIZE && (
-                <p className="dsheet-text dsheet-text--error text-[hsla(var(--color-text-danger))] font-[`Helvetica_Neue`] text-[14px] font-normal mt-[4px] leading-[20px]" data-testid="import-modal-file-size-error">
+                <p
+                  className="dsheet-text dsheet-text--error text-[hsla(var(--color-text-danger))] font-[`Helvetica_Neue`] text-[14px] font-normal mt-[4px] leading-[20px]"
+                  data-testid="import-modal-file-size-error"
+                >
                   Can't import this file right now. Try again later.
                 </p>
               )}
             </div>
 
-            <div className="dsheet-modal-field" data-testid="import-modal-location-field">
-              <div className="dsheet-label dsheet-label--heading text-heading-xsm mb-[4px]">Import location</div>
+            <div
+              className="dsheet-modal-field"
+              data-testid="import-modal-location-field"
+            >
+              <div className="dsheet-label dsheet-label--heading text-heading-xsm mb-[4px]">
+                Import location
+              </div>
 
-              <Select onValueChange={(value) => {
-                setImportType(value);
-              }}>
+              <Select
+                onValueChange={(value) => {
+                  setImportType(value);
+                }}
+              >
                 <SelectTrigger data-testid="import-location-trigger">
                   <SelectValue placeholder="Create new dSheet" />
                 </SelectTrigger>
                 <SelectContent id="publish-category">
-                  {[{ id: 'new-dsheet', label: 'Create new dSheet' }, { id: 'merge-current-dsheet', label: 'Insert new sheet(s)' }, { id: 'new-current-dsheet', label: 'Replace sheet(s)' }].map((cat) => (
+                  {[
+                    { id: 'new-dsheet', label: 'Create new dSheet' },
+                    {
+                      id: 'merge-current-dsheet',
+                      label: 'Insert new sheet(s)',
+                    },
+                    { id: 'new-current-dsheet', label: 'Replace sheet(s)' },
+                  ].map((cat) => (
                     <SelectItem key={cat.id} value={cat.id}>
                       {cat.label}
                     </SelectItem>
@@ -226,7 +316,10 @@ export const CustomButton = ({
                 </SelectContent>
               </Select>
             </div>
-            <div className="dsheet-modal-actions flex justify-end items-center gap-2" data-testid="import-modal-actions">
+            <div
+              className="dsheet-modal-actions flex justify-end items-center gap-2"
+              data-testid="import-modal-actions"
+            >
               <Button
                 className="dsheet-btn dsheet-btn--secondary font-medium text-sm leading-5 px-3 py-2 w-20 min-w-[80px] h-10 h-[36px] max-h-10 rounded"
                 size="md"
@@ -237,7 +330,8 @@ export const CustomButton = ({
                 Cancel
               </Button>
               <Button
-                // disabled={!file || file?.size > MAX_FILE_SIZE}
+                disabled={!file || file?.size > MAX_FILE_SIZE || isImporting}
+                isLoading={isImporting}
                 className="dsheet-btn dsheet-btn--primary font-medium text-sm leading-5 px-3 py-2 w-20 min-w-[100px] h-10 h-[36px] max-h-10 rounded"
                 size="md"
                 onClick={handleApplyData}
diff --git a/package/constants/shared-constants.ts b/package/constants/shared-constants.ts
index 458df29..cc9ee2c 100644
--- a/package/constants/shared-constants.ts
+++ b/package/constants/shared-constants.ts
@@ -21,7 +21,7 @@ export const SERVICES_API_KEY: ServicesApiKeyType = RawServicesApiKey;
 export const DEFAULT_SHEET_DATA = [
   {
     id: '0',
-    name: 'Sheet1',
+    name: 'Sheet2',
     celldata: [],
     config: {},
     order: 0,
diff --git a/package/contexts/editor-context.tsx b/package/contexts/editor-context.tsx
index af2dfcb..8a2df53 100644
--- a/package/contexts/editor-context.tsx
+++ b/package/contexts/editor-context.tsx
@@ -24,6 +24,7 @@ import { DataBlockApiKeyHandlerType, SheetUpdateData } from '../types';
 
 // Define the shape of the context
 export interface EditorContextType {
+  setIsDataLoaded: React.Dispatch<React.SetStateAction<boolean>>;
   handleOnChangePortalUpdate: () => void;
   setSelectedTemplate?: React.Dispatch<React.SetStateAction<string>>;
   setShowSmartContractModal?: React.Dispatch<React.SetStateAction<boolean>>;
@@ -214,6 +215,7 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({
     handleChange,
     handleLiveQuery,
     initialiseLiveQueryData,
+    setIsDataLoaded,
   } = useEditorData(
     ydocRef,
     dsheetId,
@@ -276,6 +278,7 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({
       remoteUpdateRef,
       handleChange,
       loading,
+      setIsDataLoaded,
       forceSheetRender,
       setForceSheetRender,
       activeUsers,
@@ -290,6 +293,7 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({
       handleOnChangePortalUpdate
     };
   }, [
+    setIsDataLoaded,
     setShowSmartContractModal,
     getDocumentTitle,
     updateDocumentTitle,
diff --git a/package/docs/xlsx-import-performance-improvements.md b/package/docs/xlsx-import-performance-improvements.md
new file mode 100644
index 0000000..3c353cb
--- /dev/null
+++ b/package/docs/xlsx-import-performance-improvements.md
@@ -0,0 +1,125 @@
+# XLSX Import Efficiency Analysis & Optimizations
+
+## Context
+
+For large files (100k+ cells, multiple sheets), the import runs several passes that accumulate hidden cost. This document identifies what's wasteful and what concrete changes to make.
+
+---
+
+## Current Pass Map
+
+| # | Where | What | Cost |
+|---|-------|------|------|
+| 1 | `workbook.eachSheet → ws.eachRow → row.eachCell` | Build hyperlinks, styles maps | O(all cells × sheets) — exceljs pass |
+| 2 | `worksheet.getSheetValues().reduce()` | Detect dropdowns | O(all cells in sheet 1) — even if zero dropdowns |
+| 3 | `transformExcelToLucky(file, ...)` | Re-parse entire file | Second full parse of the xlsx binary |
+| 4 | `sheets.map` with inner cell loop | Apply styles/hyperlinks/date fix | O(cells × sheets) — luckyexcel pass |
+| 5 | `combinedSheets.map` | Assign `order` field | O(sheets) — redundant extra loop |
+| 6 | `useEffect` on `mergeInfo` | Apply merges | N separate `mergeCells()` API calls |
+
+**Unavoidable ceiling:** Passes 1 and 3 both fully parse the file — exceljs for styles/hyperlinks/freeze/dropdowns, luckyexcel for the Fortune JSON format. This double-parse is the largest cost and can't be removed without replacing one of the libraries.
+
+**Everything below is within JS land and fixable.**
+
+---
+
+## Issues Found
+
+### Issue 1 — `getSheetValues()` scans all cells for dropdowns (Pass 2)
+
+```ts
+// Current: iterates the entire sheet grid even if no dropdowns exist
+worksheet?.getSheetValues()?.reduce(...)
+```
+
+ExcelJS stores data validations as a flat collection on `worksheet.dataValidations.model` — a plain object keyed by cell address (e.g., `{ "A1": { type: "list", formulae: [...] } }`). No cell scan needed.
+
+**Fix:** Replace `getSheetValues().reduce()` with direct access to `worksheet.dataValidations.model`.
+
+```ts
+const dvModel = worksheet?.dataValidations?.model ?? {};
+dropdownInfo = Object.keys(dvModel).length > 0 ? dvModel : null;
+```
+
+> The downstream `for (const key of Object.keys(dropdownInfo))` loop is unchanged — `dataValidations.model` is the same shape the existing dropdown-building code already expects.
+
+---
+
+### Issue 2 — `Object.keys(cellStyle).length > 0` allocates an array per cell (Pass 1)
+
+```ts
+// Current: creates a temporary keys array for every cell in every sheet
+if (Object.keys(cellStyle).length > 0) {
+  styles[key] = cellStyle;
+}
+```
+
+**Fix:** Track non-emptiness with a boolean flag set inside the style-extraction block. Zero allocations.
+
+```ts
+let hasStyle = false;
+const cellStyle: Record<string, string | number> = {};
+// set hasStyle = true wherever a style property is written
+if (hasStyle) { styles[key] = cellStyle; }
+```
+
+---
+
+### Issue 3 — Extra `combinedSheets.map` just for `order` (Pass 5)
+
+```ts
+// Current: separate O(sheets) loop after sheets.map
+combinedSheets = combinedSheets.map((sheet, index) => {
+  sheet.order = index;
+  return sheet;
+});
+```
+
+**Fix:** Assign `order` inside the existing `sheets.map` loop using the known offset, then delete this pass.
+
+```ts
+// Inside sheets.map — before the sheets.map, compute once:
+const orderOffset = importType === 'merge-current-dsheet' ? localSheetsArray.length : 0;
+// Inside sheets.map:
+sheet.order = orderOffset + sheetIndex;
+```
+
+---
+
+### Issue 4 — Spread operator creates a new object per date cell (Pass 4)
+
+```ts
+// Current: allocates a new object for every date cell
+cell.v.ct = { ...cell.v.ct, t: 'd' };
+```
+
+These cell objects come from luckyexcel and are about to be stored in YJS — direct mutation is safe.
+
+**Fix:**
+
+```ts
+(cell.v.ct as any).t = 'd';
+```
+
+---
+
+## What's Already Good (don't change)
+
+- `isDateCache` is outside the `sheets.map` → shared across all sheets in one import run ✓
+- Single cell loop in Pass 4 handles styles + hyperlinks + dates together ✓
+- `hlKeys`/`styleKeys` lookups are O(1) hash map reads ✓
+- `ydoc.transact()` batches all YJS mutations into one operation ✓
+
+---
+
+## File to Modify
+
+`package/hooks/use-xlsx-import.tsx`
+
+---
+
+## Verification
+
+1. Import a multi-sheet `.xlsx` with dates, hyperlinks, frozen panes, and dropdowns
+2. Confirm all features still work: dates display correctly, links are blue/underlined, panes freeze, dropdowns appear
+3. For perf: import a file with 50k+ cells — observe no regression in load time (ideally faster due to skipping the `getSheetValues` full-scan)
diff --git a/package/dsheet-editor.tsx b/package/dsheet-editor.tsx
index d315daf..da61a30 100644
--- a/package/dsheet-editor.tsx
+++ b/package/dsheet-editor.tsx
@@ -150,11 +150,8 @@ const EditorContent = ({
     ySheet.set('dataVerification', dataVerification);
     const conditionRules = new Y.Map();
     ySheet.set('conditionRules', conditionRules);
-
     const luckysheet_conditionformat_save = new Y.Array();
     ySheet.set('luckysheet_conditionformat_save', luckysheet_conditionformat_save);
-
-
     return ySheet;
   };
 
diff --git a/package/hooks/use-editor-data.tsx b/package/hooks/use-editor-data.tsx
index 6192d51..efa8b16 100644
--- a/package/hooks/use-editor-data.tsx
+++ b/package/hooks/use-editor-data.tsx
@@ -187,6 +187,7 @@ export const useEditorData = (
     ydocRef,
     isReadOnly,
     isDataLoaded,
+    setIsDataLoaded,
     portalContent,
     allowComments,
     syncStatus,
@@ -281,6 +282,7 @@ export const useEditorData = (
     currentDataRef,
     remoteUpdateRef,
     isDataLoaded,
+    setIsDataLoaded,
     handleChange,
     handleLiveQuery,
     initialiseLiveQueryData,
diff --git a/package/hooks/use-homepage-redirect.tsx b/package/hooks/use-homepage-redirect.tsx
index 3b5ac34..7a5cb06 100644
--- a/package/hooks/use-homepage-redirect.tsx
+++ b/package/hooks/use-homepage-redirect.tsx
@@ -2,8 +2,8 @@ import { useEffect } from 'react';
 import { WorkbookInstance } from '@fileverse-dev/fortune-react';
 import * as Y from 'yjs';
 
-
 export const usehandleHomepageRedirect = ({
+  setIsDataLoaded,
   setSelectedTemplate,
   handleXLSXUpload,
   handleCSVUpload,
@@ -12,34 +12,38 @@ export const usehandleHomepageRedirect = ({
   currentDataRef,
   setForceSheetRender,
   sheetEditorRef,
-  updateDocumentTitle
+  updateDocumentTitle,
 }: {
+  setIsDataLoaded: React.Dispatch<React.SetStateAction<boolean>>;
   setSelectedTemplate?: React.Dispatch<React.SetStateAction<string>>;
   handleXLSXUpload: any;
-  handleCSVUpload: any
+  handleCSVUpload: any;
   ydocRef: React.RefObject<Y.Doc | null>;
   dsheetId: string;
   currentDataRef: React.MutableRefObject<object | null>;
   setForceSheetRender: React.Dispatch<React.SetStateAction<number>>;
   sheetEditorRef: React.RefObject<WorkbookInstance | null>;
-  updateDocumentTitle: any
+  updateDocumentTitle: any;
 }) => {
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
     const fileUrl = params.get("xlsx");
 
     if (fileUrl) {
+      setIsDataLoaded(false);
       fetch(fileUrl)
         .then((res) => res.blob())
         .then((blob) => {
           const file = new File([blob], "import.xlsx");
           if (file) {
-            handleXLSXUpload(undefined, file);
+            Promise.resolve(handleXLSXUpload(undefined, file))
+              .finally(() => {
+                setIsDataLoaded(true);
+              });
           }
-          // Call handler with file
         })
         .finally(() => {
-          // Remove 'file' param from the URL without reloading
+          setIsDataLoaded(true);
           params.delete("xlsx");
           window.history.replaceState({}, "", `${window.location.pathname}${params.toString() ? `?${params.toString()}` : ""}`);
         });
@@ -53,12 +57,14 @@ export const usehandleHomepageRedirect = ({
         .then((blob) => {
           const file = new File([blob], "import.csv");
           if (file) {
-            handleCSVUpload(undefined, ydocRef.current, setForceSheetRender, dsheetId, currentDataRef, sheetEditorRef, updateDocumentTitle, file);
+            Promise.resolve(handleCSVUpload(undefined, ydocRef.current, setForceSheetRender, dsheetId, currentDataRef, sheetEditorRef, updateDocumentTitle, file))
+              .finally(() => {
+                setIsDataLoaded(true);
+              });
           }
-          // Call handler with file
         })
         .finally(() => {
-          // Remove 'file' param from the URL without reloading
+          setIsDataLoaded(true);
           params.delete("csv");
           window.history.replaceState({}, "", `${window.location.pathname}${params.toString() ? `?${params.toString()}` : ""}`);
         });
@@ -70,6 +76,5 @@ export const usehandleHomepageRedirect = ({
       params.delete("template");
       window.history.replaceState({}, "", `${window.location.pathname}${params.toString() ? `?${params.toString()}` : ""}`);
     }
-
   }, []);
-}
+};
diff --git a/package/hooks/use-xlsx-import.tsx b/package/hooks/use-xlsx-import.tsx
index 7901e2a..da6b401 100644
--- a/package/hooks/use-xlsx-import.tsx
+++ b/package/hooks/use-xlsx-import.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import React from 'react';
+import SSF from 'ssf';
 import { Workbook } from 'exceljs';
 import * as Y from 'yjs';
 import { Sheet } from '@fileverse-dev/fortune-react';
@@ -8,6 +9,353 @@ import { ySheetArrayToPlain } from '../utils/update-ydoc';
 
 // @ts-expect-error, type is not available from package
 import { transformExcelToLucky } from 'luckyexcel';
+import {
+  extractImagesFromWorksheet,
+  convertRawImagesToFortuneSheet,
+  RawSheetImage,
+} from '../utils/xlsx-image-utils';
+
+/** Predefined option colors for data validation dropdowns (when XLSX has no color). */
+const DATA_VERIFICATION_OPTION_COLORS = [
+  '228, 232, 237', // Light Gray
+  '219, 233, 236', // White
+  '244, 217, 227', // Pink
+  '247, 229, 207', // Peach
+  '217, 234, 244', // Blue
+  '222, 239, 222', // Green
+  '239, 239, 239', // Light Green
+  '244, 230, 230', // Rose
+  '247, 239, 217', // Yellow
+  '230, 230, 244', // Purple
+  '217, 244, 244', // Cyan
+  '244, 239, 234', // Cream
+];
+const DEFAULT_OPTION_COLOR = DATA_VERIFICATION_OPTION_COLORS[0]; // Light Gray
+
+/** Build dataVerification color string from option count: use color list only when options ≤ 12; if more, use only grey (first) repeated. */
+function buildDataVerificationColor(optionCount: number): string {
+  if (optionCount <= 0) return DEFAULT_OPTION_COLOR;
+  if (optionCount > DATA_VERIFICATION_OPTION_COLORS.length) {
+    return Array(optionCount).fill(DEFAULT_OPTION_COLOR).join(', ');
+  }
+  return DATA_VERIFICATION_OPTION_COLORS.slice(0, optionCount).join(', ');
+}
+
+/** Parse Excel A1-style address to 0-based row and column. e.g. "A1" -> { row: 0, col: 0 }, "B10" -> { row: 9, col: 1 } */
+function parseA1Address(address: string): { row: number; col: number } | null {
+  const match = address.match(/^([A-Z]+)(\d+)$/i);
+  if (!match) return null;
+  const letters = match[1].toUpperCase();
+  const digits = match[2];
+  let col1Based = 0;
+  for (let i = 0; i < letters.length; i++) {
+    col1Based = col1Based * 26 + (letters.charCodeAt(i) - 64);
+  }
+  const row = parseInt(digits, 10) - 1;
+  const col = col1Based - 1;
+  return { row, col };
+}
+
+/** Map ExcelJS DataValidation to project dataVerification entry (row_column key format) */
+function excelDataValidationToSheetEntry(
+  address: string,
+  dv: {
+    type?: string;
+    formulae?: any[];
+    prompt?: string;
+    showInputMessage?: boolean;
+    allowBlank?: boolean;
+  },
+): { rowColKey: string; entry: Record<string, unknown> } | null {
+  const parsed = parseA1Address(address);
+  if (!parsed) return null;
+  const { row, col } = parsed;
+  const rowColKey = `${row}_${col}`;
+
+  const type = dv.type === 'list' ? 'dropdown' : dv.type || 'dropdown';
+  const value1 =
+    Array.isArray(dv.formulae) && dv.formulae.length > 0
+      ? String(dv.formulae[0])
+          .replace(/^["']|["']$/g, '')
+          .replace(/["']/g, '')
+      : '';
+
+  // When no color is preset (e.g. from XLSX): one color per option; use predefined list up to 12, then Light Gray for the rest
+  const optionCount = value1 ? value1.split(',').length : 0;
+  const color = buildDataVerificationColor(optionCount || 1);
+
+  const entry: Record<string, unknown> = {
+    type,
+    type2: '',
+    rangeTxt: address,
+    value1,
+    value2: '',
+    validity: '',
+    remote: false,
+    prohibitInput: dv.type === 'list',
+    hintShow: Boolean(dv.showInputMessage),
+    hintValue: dv.prompt ?? '',
+    color,
+    checked: false,
+  };
+  return { rowColKey, entry };
+}
+
+/** Parse Excel range ref (e.g. "A1:A500" or "A1") to 0-based row/column ranges */
+function parseRefToRange(
+  ref: string,
+): { row: [number, number]; column: [number, number] } | null {
+  const parts = ref.split(':');
+  const start = parseA1Address(parts[0].trim());
+  if (!start) return null;
+  const end = parts.length > 1 ? parseA1Address(parts[1].trim()) : start;
+  if (!end) return null;
+  return {
+    row: [Math.min(start.row, end.row), Math.max(start.row, end.row)],
+    column: [Math.min(start.col, end.col), Math.max(start.col, end.col)],
+  };
+}
+
+/** Build project cellrange from ref (row/column 0-based). Format: array of one range with row/column as arrays. */
+function buildCellrange(ref: string): unknown[] | null {
+  const range = parseRefToRange(ref);
+  if (!range) return null;
+  const [r0, r1] = range.row;
+  const [c0, c1] = range.column;
+  return [
+    {
+      left: 0,
+      width: 104,
+      top: 0,
+      height: 23,
+      left_move: 0,
+      width_move: 104,
+      top_move: 0,
+      height_move: 11999,
+      row: [r0, r1],
+      column: [c0, c1],
+      row_focus: r0,
+      column_focus: c0,
+      column_select: true,
+    },
+  ];
+}
+
+/** Map ExcelJS dxf style to project format (textColor, cellColor, bold, italic, underline, strikethrough) */
+function dxfStyleToFormat(style: {
+  font?: {
+    color?: { argb?: string };
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+  } | null;
+  fill?: {
+    type?: string;
+    pattern?: string;
+    fgColor?: { argb?: string };
+  } | null;
+}): {
+  textColor: string;
+  cellColor: string;
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  strikethrough: boolean;
+} {
+  const defaultFormat = {
+    textColor: '#000000',
+    cellColor: '#ffffff',
+    bold: false,
+    italic: false,
+    underline: false,
+    strikethrough: false,
+  };
+  if (!style) return defaultFormat;
+  const font = style.font;
+  const fill = style.fill;
+  let textColor = defaultFormat.textColor;
+  let cellColor = defaultFormat.cellColor;
+  if (font?.color?.argb) {
+    const a = font.color.argb;
+    textColor = '#' + (a.length >= 6 ? a.slice(-6) : a);
+  }
+  if (
+    fill?.type === 'pattern' &&
+    fill.pattern === 'solid' &&
+    fill.fgColor?.argb
+  ) {
+    const a = fill.fgColor.argb;
+    cellColor = '#' + (a.length >= 6 ? a.slice(-6) : a);
+  }
+  return {
+    textColor,
+    cellColor,
+    bold: Boolean(font?.bold),
+    italic: Boolean(font?.italic),
+    underline: Boolean(font?.underline),
+    strikethrough: false,
+  };
+}
+
+/**
+ * Extract the text argument from a SEARCH(...) formula (Google/Excel "text contains").
+ * Handles Google's SEARCH(("ab"),(C1)) and standard SEARCH("ab",A1). One regex pass, no loops.
+ */
+function extractTextFromSearchFormula(formula: string | undefined): string {
+  if (!formula || typeof formula !== 'string') return '';
+  const s = formula.trim();
+  // SEARCH(("text"), or SEARCH("text", or SEARCH( ( "text" ) , – allow optional parens/spaces before first quote
+  const m = s.match(/SEARCH\s*\([\s(]*"((?:[^"]|"")*)"/i);
+  if (m) return (m[1] ?? '').replace(/""/g, '"');
+  const m2 = s.match(/SEARCH\s*\([\s(]*'([^']*)'/i);
+  if (m2) return m2[1] ?? '';
+  return '';
+}
+
+/** Map ExcelJS cfRule type/operator to project conditionName; return null if unsupported */
+function excelCfTypeToConditionName(
+  type: string,
+  operator?: string,
+  opts?: {
+    percent?: boolean;
+    bottom?: boolean;
+    rank?: number;
+    aboveAverage?: boolean;
+    text?: string;
+    timePeriod?: string;
+  },
+): { conditionName: string; conditionValue: string[] } | null {
+  if (type === 'cellIs') {
+    const op = (operator || '').toLowerCase();
+    if (op === 'greaterthan')
+      return { conditionName: 'greaterThan', conditionValue: [] };
+    if (op === 'greaterthanorequal')
+      return { conditionName: 'greaterThanOrEqual', conditionValue: [] };
+    if (op === 'lessthan')
+      return { conditionName: 'lessThan', conditionValue: [] };
+    if (op === 'lessthanorequal')
+      return { conditionName: 'lessThanOrEqual', conditionValue: [] };
+    if (op === 'equal') return { conditionName: 'equal', conditionValue: [] };
+    if (op === 'between')
+      return { conditionName: 'between', conditionValue: [] };
+    return null;
+  }
+  if (type === 'containsText' || type === 'notContainsText') {
+    const op = (operator ?? '').toLowerCase();
+    if (op === 'containsblanks')
+      return { conditionName: 'empty', conditionValue: [''] };
+    const text = opts?.text ?? '';
+    return {
+      conditionName: 'textContains',
+      conditionValue: text ? [text] : [],
+    };
+  }
+  if (type === 'duplicateValues')
+    return { conditionName: 'duplicateValue', conditionValue: [] };
+  if (type === 'top10') {
+    const rank = opts?.rank ?? 10;
+    if (opts?.percent && opts?.bottom)
+      return { conditionName: 'last10Percent', conditionValue: [String(rank)] };
+    if (opts?.percent)
+      return { conditionName: 'top10Percent', conditionValue: [String(rank)] };
+    if (opts?.bottom)
+      return { conditionName: 'last10', conditionValue: [String(rank)] };
+    return { conditionName: 'top10', conditionValue: [String(rank)] };
+  }
+  if (type === 'aboveAverage') {
+    if (opts?.aboveAverage === false)
+      return { conditionName: 'belowAverage', conditionValue: [] };
+    return { conditionName: 'aboveAverage', conditionValue: [] };
+  }
+  if (type === 'timePeriod')
+    return {
+      conditionName: 'date',
+      conditionValue: opts?.timePeriod ? [opts.timePeriod] : [],
+    };
+  return null;
+}
+
+/** One ExcelJS conditional format rule -> one luckysheet_conditionformat_save entry, or null if unsupported */
+function excelCfRuleToLuckysheet(
+  ref: string,
+  rule: {
+    type?: string;
+    operator?: string;
+    formulae?: string[];
+    style?: Record<string, unknown>;
+    text?: string;
+    timePeriod?: string;
+    percent?: boolean;
+    bottom?: boolean;
+    rank?: number;
+    aboveAverage?: boolean;
+  },
+): Record<string, unknown> | null {
+  if (!rule.type) return null;
+  const range = parseRefToRange(ref);
+  if (!range) return null;
+
+  // Text-contains: Google puts text only in formula e.g. SEARCH(("ab"),(C1)) – resolve once
+  let resolvedText = (rule.text ?? '').trim();
+  if (
+    (rule.type === 'containsText' || rule.type === 'notContainsText') &&
+    !resolvedText
+  ) {
+    const formula =
+      Array.isArray(rule.formulae) && rule.formulae[0]
+        ? rule.formulae[0]
+        : undefined;
+    resolvedText = extractTextFromSearchFormula(formula);
+  }
+
+  const mapped = excelCfTypeToConditionName(rule.type, rule.operator, {
+    percent: rule.percent,
+    bottom: rule.bottom,
+    rank: rule.rank,
+    aboveAverage: rule.aboveAverage,
+    text: resolvedText || rule.text,
+    timePeriod: rule.timePeriod,
+  });
+  if (!mapped) return null;
+
+  let conditionValue: string[];
+  if (
+    rule.type === 'cellIs' &&
+    Array.isArray(rule.formulae) &&
+    rule.formulae.length > 0
+  ) {
+    conditionValue = rule.formulae.map((f) => String(f ?? ''));
+  } else if (mapped.conditionName === 'empty') {
+    conditionValue = [''];
+  } else if (rule.type === 'containsText' || rule.type === 'notContainsText') {
+    conditionValue = resolvedText ? [resolvedText] : [];
+  } else {
+    conditionValue = mapped.conditionValue.map((v) =>
+      v == null ? '' : String(v),
+    );
+  }
+
+  const cellrange = buildCellrange(ref);
+  if (!cellrange) return null;
+
+  const format = dxfStyleToFormat(rule.style as any);
+
+  return {
+    type: 'default',
+    cellrange,
+    format: {
+      textColor: format.textColor,
+      cellColor: format.cellColor,
+      bold: format.bold,
+      italic: format.italic,
+      underline: format.underline,
+      strikethrough: format.strikethrough,
+    },
+    conditionName: mapped.conditionName,
+    conditionRange: [],
+    conditionValue,
+  };
+}
 
 export const useXLSXImport = ({
   sheetEditorRef,
@@ -24,372 +372,475 @@ export const useXLSXImport = ({
   currentDataRef: React.MutableRefObject<object | null>;
   updateDocumentTitle?: (title: string) => void;
 }) => {
-  const [sheetData, setSheetData] = useState<Sheet[]>([]);
-  const [mergeInfo, setMergeInfo] = useState<Record<
-    string,
-    { r: number; c: number; rs: number; cs: number }
-  > | null>(null);
-
-  useEffect(() => {
-    if (sheetEditorRef && sheetEditorRef.current) {
-      if (sheetData.length > 0) {
-        setMergeInfo(sheetData[0].config?.merge ?? null);
-      }
-    }
-  }, [sheetData]);
-
-  useEffect(() => {
-    if (mergeInfo) {
-      Object.keys(mergeInfo).forEach((key) => {
-        const merge = mergeInfo[key] as {
-          r: number;
-          c: number;
-          rs: number;
-          cs: number;
-        };
-        const startCellAddressR = merge.r;
-        const startCellAddressC = merge.c;
-        const endCellAddressR = merge.r + merge.rs - 1;
-        const endCellAddressC = merge.c + merge.cs - 1;
-        if (sheetEditorRef && sheetEditorRef.current) {
-          sheetEditorRef.current.mergeCells(
-            [
-              {
-                row: [startCellAddressR, endCellAddressR],
-                column: [startCellAddressC, endCellAddressC],
-              },
-            ],
-            'merge-horizontal',
-          );
-        }
-      });
-    }
-  }, [mergeInfo]);
-
   const handleFileUpload = async (
     event: React.ChangeEvent<HTMLInputElement> | undefined,
     fileArg: File,
     importType?: 'new-dsheet' | 'merge-current-dsheet' | 'new-current-dsheet',
-  ) => {
+  ): Promise<void> => {
     const input = event?.target;
     if (!input?.files?.length && !fileArg) {
-      return;
+      return Promise.resolve();
     }
     const file = input?.files?.[0] || fileArg;
-    let dropdownInfo: Record<
-      string,
-      {
-        type?: string;
-        formulae?: { replace: (a: RegExp, b: string) => string }[];
-      }
-    > | null = null;
-
-    const reader = new FileReader();
-    reader.onload = async (e) => {
-      if (!e.target) {
-        console.error('FileReader event target is null');
-        return;
-      }
-      const arrayBuffer = e.target.result;
-      const workbook = new Workbook();
-      try {
-        //@ts-expect-error, later
-        await workbook.xlsx.load(arrayBuffer);
-        const worksheet = workbook.getWorksheet(1);
-        // Extract hyperlinks, freeze info, and cell formatting from all worksheets
-        const hyperlinksBySheet: Record<
-          number,
-          Record<string, { linkType: string; linkAddress: string }>
-        > = {};
-        const frozenBySheet: Record<
-          number,
-          {
-            type:
-            | 'row'
-            | 'column'
-            | 'both'
-            | 'rangeRow'
-            | 'rangeColumn'
-            | 'rangeBoth';
-            range: { row_focus: number; column_focus: number };
-          }
-        > = {};
-        const cellStylesBySheet: Record<
-          number,
-          Record<
-            string,
+    /** dataVerification per sheet: sheetIndex -> { row_column: entry } */
+    const dataVerificationBySheet: Record<
+      number,
+      Record<string, Record<string, unknown>>
+    > = {};
+    /** conditional formatting per sheet: sheetIndex -> luckysheet_conditionformat_save array */
+    const conditionFormatBySheet: Record<number, Record<string, unknown>[]> =
+      {};
+
+    return new Promise<void>((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onerror = () => reject(new Error('Failed to read file'));
+      reader.onload = async (e) => {
+        if (!e.target) {
+          console.error('FileReader event target is null');
+          reject(new Error('FileReader event target is null'));
+          return;
+        }
+        const arrayBuffer = e.target.result;
+        const workbook = new Workbook();
+        try {
+          //@ts-expect-error, later
+          await workbook.xlsx.load(arrayBuffer);
+          // Extract hyperlinks, freeze info, cell formatting, and data validation from all worksheets
+          const hyperlinksBySheet: Record<
+            number,
+            Record<string, { linkType: string; linkAddress: string }>
+          > = {};
+          const frozenBySheet: Record<
+            number,
             {
-              bl?: number;
-              it?: number;
-              fs?: number;
-              ff?: string;
-              fc?: string;
-              bg?: string;
-              un?: number;
+              type:
+                | 'row'
+                | 'column'
+                | 'both'
+                | 'rangeRow'
+                | 'rangeColumn'
+                | 'rangeBoth';
+              range: { row_focus: number; column_focus: number };
             }
-          >
-        > = {};
-        workbook.eachSheet((ws, sheetIndex) => {
-          const idx = sheetIndex - 1; // exceljs is 1-based
-
-          // Hyperlinks
-          const sheetHyperlinks: Record<
-            string,
-            { linkType: string; linkAddress: string }
           > = {};
+          const cellStylesBySheet: Record<
+            number,
+            Record<
+              string,
+              {
+                bl?: number;
+                it?: number;
+                fs?: number;
+                ff?: string;
+                fc?: string;
+                bg?: string;
+                un?: number;
+              }
+            >
+          > = {};
+          // Raw image data keyed by 0-based sheet index.
+          // Pixel positions are deferred to sheets.map where FortuneSheet
+          // column/row dimensions are available.
+          const imagesBySheet: Record<number, RawSheetImage[]> = {};
 
-          // Freeze panes from worksheet views
-          const views = ws.views;
-          if (views && views.length > 0) {
-            const view = views[0];
-            if (view.state === 'frozen') {
-              const xSplit = view.xSplit || 0;
-              const ySplit = view.ySplit || 0;
-              let type: 'rangeRow' | 'rangeColumn' | 'rangeBoth' | null = null;
-              if (xSplit > 0 && ySplit > 0) type = 'rangeBoth';
-              else if (ySplit > 0) type = 'rangeRow';
-              else if (xSplit > 0) type = 'rangeColumn';
-              if (type) {
-                frozenBySheet[idx] = {
-                  type,
-                  range: {
-                    row_focus: ySplit - 1,
-                    column_focus: xSplit - 1,
-                  },
-                };
+          workbook.eachSheet((ws, sheetIndex) => {
+            console.log('ws', ws);
+            const idx = sheetIndex - 1; // exceljs is 1-based
+
+            // Hyperlinks
+            const sheetHyperlinks: Record<
+              string,
+              { linkType: string; linkAddress: string }
+            > = {};
+
+            // Freeze panes from worksheet views
+            const views = ws.views;
+            if (views && views.length > 0) {
+              const view = views[0];
+              if (view.state === 'frozen') {
+                const xSplit = view.xSplit || 0;
+                const ySplit = view.ySplit || 0;
+                let type: 'rangeRow' | 'rangeColumn' | 'rangeBoth' | null =
+                  null;
+                if (xSplit > 0 && ySplit > 0) type = 'rangeBoth';
+                else if (ySplit > 0) type = 'rangeRow';
+                else if (xSplit > 0) type = 'rangeColumn';
+                if (type) {
+                  frozenBySheet[idx] = {
+                    type,
+                    range: {
+                      row_focus: ySplit - 1,
+                      column_focus: xSplit - 1,
+                    },
+                  };
+                }
               }
             }
-          }
 
-          // Cell-level formatting and hyperlinks
-          const styles: Record<
-            string,
-            {
-              bl?: number;
-              it?: number;
-              fs?: number;
-              ff?: string;
-              fc?: string;
-              bg?: string;
-              un?: number;
-            }
-          > = {};
-          ws.eachRow({ includeEmpty: false }, (row, rowNumber) => {
-            row.eachCell({ includeEmpty: false }, (cell, colNumber) => {
-              const key = `${rowNumber - 1}_${colNumber - 1}`;
-
-              if (cell.hyperlink) {
-                sheetHyperlinks[key] = {
-                  linkType: 'webpage',
-                  linkAddress: cell.hyperlink,
-                };
+            // Cell-level formatting and hyperlinks
+            const styles: Record<
+              string,
+              {
+                bl?: number;
+                it?: number;
+                fs?: number;
+                ff?: string;
+                fc?: string;
+                bg?: string;
+                un?: number;
               }
+            > = {};
+            ws.eachRow({ includeEmpty: false }, (row, rowNumber) => {
+              row.eachCell({ includeEmpty: false }, (cell, colNumber) => {
+                const key = `${rowNumber - 1}_${colNumber - 1}`;
 
-              // Extract cell formatting
-              const font = cell.style?.font;
-              const fill = cell.style?.fill;
-              const cellStyle: Record<string, string | number> = {};
-
-              if (font) {
-                if (font.bold) cellStyle.bl = 1;
-                if (font.italic) cellStyle.it = 1;
-                if (font.underline) cellStyle.un = 1;
-                if (font.size) cellStyle.fs = font.size;
-                if (font.name) cellStyle.ff = font.name;
-                if (font.color?.argb) {
-                  const argb = font.color.argb;
-                  const hex = '#' + argb.substring(argb.length - 6);
-                  cellStyle.fc = hex;
+                if (cell.hyperlink) {
+                  sheetHyperlinks[key] = {
+                    linkType: 'webpage',
+                    linkAddress: cell.hyperlink,
+                  };
                 }
-              }
-              if (
-                fill?.type === 'pattern' &&
-                fill.pattern === 'solid' &&
-                fill.fgColor
-              ) {
-                if (fill.fgColor.argb) {
-                  const argb = fill.fgColor.argb;
-                  const hex = '#' + argb.substring(argb.length - 6);
-                  cellStyle.bg = hex;
+
+                // Extract cell formatting
+                const font = cell.style?.font;
+                const fill = cell.style?.fill;
+                const cellStyle: Record<string, string | number> = {};
+
+                if (font) {
+                  if (font.bold) cellStyle.bl = 1;
+                  if (font.italic) cellStyle.it = 1;
+                  if (font.underline) cellStyle.un = 1;
+                  if (font.size) cellStyle.fs = font.size;
+                  if (font.name) cellStyle.ff = font.name;
+                  if (font.color?.argb) {
+                    const argb = font.color.argb;
+                    const hex = '#' + argb.substring(argb.length - 6);
+                    cellStyle.fc = hex;
+                  }
                 }
-              }
-              if (Object.keys(cellStyle).length > 0) {
-                styles[key] = cellStyle;
-              }
-            });
-          });
-
-          if (Object.keys(sheetHyperlinks).length > 0) {
-            hyperlinksBySheet[idx] = sheetHyperlinks;
-          }
-          if (Object.keys(styles).length > 0) {
-            cellStylesBySheet[idx] = styles;
-          }
-        });
-
-        dropdownInfo =
-          worksheet
-            ?.getSheetValues()
-            ?.reduce<Record<string, object>>((acc = {}, row, rowIndex) => {
-              if (row) {
-                Array.isArray(row) &&
-                  row.forEach((cell, colIndex) => {
-                    if (
-                      cell &&
-                      typeof cell === 'object' &&
-                      'dataValidation' in cell
-                    ) {
-                      const cellAddress = `${String.fromCharCode(65 + colIndex)}${rowIndex}`;
-                      acc[cellAddress] =
-                        (cell as { dataValidation?: object | undefined })
-                          .dataValidation ?? {};
-                    }
-                  });
-              }
-              return acc;
-            }, {}) || null;
-        transformExcelToLucky(
-          file,
-          function (exportJson: { sheets: Sheet[] }) {
-            let sheets = exportJson.sheets;
-            for (const sheet of sheets) {
-              if (dropdownInfo && Object.keys(dropdownInfo).length > 0) {
-                const dataVerification: Record<string, object> = {};
-                for (const key of Object.keys(dropdownInfo)) {
-                  const value = dropdownInfo[key];
-                  if (value.type === 'list') {
-                    const splited = key.split('');
-                    const col_ = splited[0].charCodeAt(0) - 65;
-                    const row_ = Number(splited[1]) - 1;
-                    const f_key = `${row_}_${col_}`;
-                    dataVerification[f_key] = {
-                      type: 'dropdown',
-                      type2: '',
-                      rangeTxt: key,
-                      value1: value.formulae?.[0]?.replace(/["']/g, '') || '',
-                      value2: '',
-                      validity: '',
-                      remote: false,
-                      prohibitInput: true,
-                      hintShow: false,
-                      hintValue: '',
-                      checked: false,
-                    };
+                if (
+                  fill?.type === 'pattern' &&
+                  fill.pattern === 'solid' &&
+                  fill.fgColor
+                ) {
+                  if (fill.fgColor.argb) {
+                    const argb = fill.fgColor.argb;
+                    const hex = '#' + argb.substring(argb.length - 6);
+                    cellStyle.bg = hex;
                   }
                 }
-                sheet.dataVerification = dataVerification;
-              }
-            }
+                if (Object.keys(cellStyle).length > 0) {
+                  styles[key] = cellStyle;
+                }
+              });
+            });
 
-            if (!ydocRef.current) {
-              console.error('ydocRef.current is null');
-              return;
+            if (Object.keys(sheetHyperlinks).length > 0) {
+              hyperlinksBySheet[idx] = sheetHyperlinks;
+            }
+            if (Object.keys(styles).length > 0) {
+              cellStylesBySheet[idx] = styles;
             }
-            const sheetArray = ydocRef.current.getArray(dsheetId);
-            const localSheetsArray = Array.from(sheetArray) as Sheet[];
-            sheets = sheets.map((sheet, sheetIndex) => {
-              const lastCell = sheet?.celldata?.[sheet.celldata.length - 1];
 
-              const lastRow = lastCell?.r ?? 0;
-              const lastCol = lastCell?.c ?? 0;
+            // Extract images — pixel positions are deferred to sheets.map
+            const sheetImages = extractImagesFromWorksheet(ws, workbook);
+            if (sheetImages.length > 0) imagesBySheet[idx] = sheetImages;
 
-              sheet.row = Math.max(lastRow, 500);
-              sheet.column = Math.max(lastCol, 36);
+            // Extract data validation for this sheet (row_column keys for dataVerification)
+            const dvModel = (
+              ws as { dataValidations?: { model?: Record<string, unknown> } }
+            ).dataValidations?.model;
+            if (dvModel && typeof dvModel === 'object') {
+              const sheetDv: Record<string, Record<string, unknown>> = {};
+              for (const [address, dv] of Object.entries(dvModel)) {
+                const dvObj = dv as {
+                  type?: string;
+                  formulae?: unknown[];
+                  prompt?: string;
+                  showInputMessage?: boolean;
+                  allowBlank?: boolean;
+                };
+                const result = excelDataValidationToSheetEntry(address, dvObj);
+                if (result) sheetDv[result.rowColKey] = result.entry;
+              }
+              if (Object.keys(sheetDv).length > 0) {
+                dataVerificationBySheet[idx] = sheetDv;
+              }
+            }
 
-              if (!sheet.id) {
-                sheet.id = sheetEditorRef.current
-                  ?.getSettings()
-                  .generateSheetId();
+            // Extract conditional formatting for this sheet (luckysheet_conditionformat_save)
+            const cfs = (
+              ws as {
+                conditionalFormattings?: { ref: string; rules: unknown[] }[];
               }
-              if (sheet.calcChain) {
-                sheet.calcChain = sheet.calcChain.map((chain) => {
-                  delete chain.id;
-                  delete chain.index;
-                  chain.id = sheet.id;
-                  return chain;
-                });
+            ).conditionalFormattings;
+            if (Array.isArray(cfs) && cfs.length > 0) {
+              const sheetCf: Record<string, unknown>[] = [];
+              for (const cf of cfs) {
+                console.log('cf', cf);
+                const ref = cf.ref;
+                const rules = cf.rules || [];
+                for (const rule of rules) {
+                  const r = rule as {
+                    type?: string;
+                    operator?: string;
+                    formulae?: string[];
+                    style?: Record<string, unknown>;
+                    text?: string;
+                    timePeriod?: string;
+                    percent?: boolean;
+                    bottom?: boolean;
+                    rank?: number;
+                    aboveAverage?: boolean;
+                  };
+                  const entry = r.type ? excelCfRuleToLuckysheet(ref, r) : null;
+                  if (entry) sheetCf.push(entry);
+                }
               }
-              // Attach freeze pane info
-              if (frozenBySheet[sheetIndex]) {
-                sheet.frozen = frozenBySheet[sheetIndex];
+              if (sheetCf.length > 0) {
+                conditionFormatBySheet[idx] = sheetCf;
               }
-              // Attach hyperlinks extracted from exceljs for this sheet
-              if (hyperlinksBySheet[sheetIndex]) {
-                sheet.hyperlink = {
-                  ...(sheet.hyperlink || {}),
-                  ...hyperlinksBySheet[sheetIndex],
-                };
+            }
+          }); // close workbook.eachSheet
+
+          transformExcelToLucky(
+            file,
+            function (exportJson: { sheets: Sheet[] }) {
+              let sheets = exportJson.sheets;
+              sheets.forEach((sheet, sheetIndex) => {
+                const sheetDv = dataVerificationBySheet[sheetIndex];
+                if (sheetDv && Object.keys(sheetDv).length > 0) {
+                  sheet.dataVerification = sheetDv;
+                }
+                // Always set condition format: use our imported rules or empty array. Avoids leaving
+                // stale/malformed rules from luckyexcel (e.g. type "colorGradation" with undefined format)
+                // which cause "Cannot read properties of undefined (reading '0')" in fortune-core ConditionFormat.js
+                const sheetCf = conditionFormatBySheet[sheetIndex];
+                sheet.luckysheet_conditionformat_save =
+                  Array.isArray(sheetCf) && sheetCf.length > 0 ? sheetCf : [];
+              });
+
+              if (!ydocRef.current) {
+                console.error('ydocRef.current is null');
+                return;
               }
-              // Apply cell formatting from exceljs (hyperlink styling, bold, italic, bg, etc.)
-              const hlKeys = hyperlinksBySheet[sheetIndex];
-              const styleKeys = cellStylesBySheet[sheetIndex];
-              if ((hlKeys || styleKeys) && sheet.celldata) {
-                for (const cell of sheet.celldata) {
-                  const key = `${cell.r}_${cell.c}`;
-                  if (cell.v) {
-                    // Apply formatting extracted from exceljs
-                    if (styleKeys?.[key]) {
-                      Object.assign(cell.v, styleKeys[key]);
-                    }
-                    // Override font color + underline for hyperlink cells
-                    if (hlKeys?.[key]) {
-                      cell.v.fc = 'rgb(0, 0, 255)';
-                      cell.v.un = 1;
+              const sheetArray = ydocRef.current.getArray(dsheetId);
+              const localSheetsArray = Array.from(sheetArray) as Sheet[];
+              const isDateCache = new Map<string, boolean>();
+              sheets = sheets.map((sheet, sheetIndex) => {
+                const lastCell = sheet?.celldata?.[sheet.celldata.length - 1];
+
+                const lastRow = lastCell?.r ?? 0;
+                const lastCol = lastCell?.c ?? 0;
+
+                sheet.row = Math.max(lastRow, 500);
+                sheet.column = Math.max(lastCol, 36);
+
+                if (!sheet.id) {
+                  sheet.id = sheetEditorRef.current
+                    ?.getSettings()
+                    .generateSheetId();
+                }
+                // Attach freeze pane info
+                if (frozenBySheet[sheetIndex]) {
+                  sheet.frozen = frozenBySheet[sheetIndex];
+                }
+                // Attach hyperlinks extracted from exceljs for this sheet
+                if (hyperlinksBySheet[sheetIndex]) {
+                  sheet.hyperlink = {
+                    ...(sheet.hyperlink || {}),
+                    ...hyperlinksBySheet[sheetIndex],
+                  };
+                }
+                // Attach images — convert fractional col/row to pixels using
+                // FortuneSheet's actual column/row dimensions so positions match.
+                if (imagesBySheet[sheetIndex]) {
+                  const defaultColPx =
+                    Number(sheet.defaultColWidth) ||
+                    Number(
+                      sheetEditorRef.current?.getSettings?.()?.defaultColWidth,
+                    ) ||
+                    99;
+                  const defaultRowPx =
+                    Number(sheet.defaultRowHeight) ||
+                    Number(
+                      sheetEditorRef.current?.getSettings?.()?.defaultRowHeight,
+                    ) ||
+                    21;
+                  sheet.images = convertRawImagesToFortuneSheet(
+                    imagesBySheet[sheetIndex],
+                    sheet,
+                    defaultColPx,
+                    defaultRowPx,
+                  );
+                }
+                // Apply cell formatting from exceljs (hyperlink styling, bold, italic, bg, etc.)
+                // Also fix date cells: set ct.t="d", coerce v to number, compute m
+                const hlKeys = hyperlinksBySheet[sheetIndex];
+                const styleKeys = cellStylesBySheet[sheetIndex];
+                const calcChain: { r: number; c: number; id: string }[] = [];
+                // Built during the celldata loop below; only allocated when merges exist
+                const celldataMap = sheet.config?.merge
+                  ? new Map<
+                      string,
+                      { r: number; c: number; v: Record<string, unknown> }
+                    >()
+                  : null;
+                if (sheet.celldata) {
+                  for (const cell of sheet.celldata) {
+                    const key = `${cell.r}_${cell.c}`;
+                    celldataMap?.set(
+                      key,
+                      cell as {
+                        r: number;
+                        c: number;
+                        v: Record<string, unknown>;
+                      },
+                    );
+                    if (cell.v) {
+                      // Mark formula cells so FortuneSheet recalculates them on dependency change
+                      if (cell.v.f && cell.v.ct?.t !== 'd') {
+                        cell.v.ct = { ...(cell.v.ct ?? {}), t: 'str' };
+                        calcChain.push({
+                          r: cell.r,
+                          c: cell.c,
+                          id: sheet.id as string,
+                        });
+                      }
+                      // Apply formatting extracted from exceljs
+                      if (styleKeys?.[key]) {
+                        Object.assign(cell.v, styleKeys[key]);
+                      }
+                      // Override font color + underline for hyperlink cells
+                      if (hlKeys?.[key]) {
+                        cell.v.fc = 'rgb(0, 0, 255)';
+                        cell.v.un = 1;
+                      }
+                      // Fix date cells: luckyexcel leaves ct.t unset and v as a string
+                      const fa = cell.v.ct?.fa;
+                      if (fa && !isDateCache.has(fa)) {
+                        isDateCache.set(fa, SSF.is_date(fa));
+                      }
+                      if (fa && isDateCache.get(fa)) {
+                        const numV =
+                          typeof cell.v.v === 'string'
+                            ? parseFloat(cell.v.v)
+                            : cell.v.v;
+                        if (typeof numV === 'number' && !isNaN(numV)) {
+                          try {
+                            cell.v.v = numV;
+                            cell.v.m = SSF.format(fa, numV);
+                            cell.v.ct = { ...cell.v.ct, t: 'd' };
+                          } catch {
+                            // malformed format string — leave cell as-is
+                          }
+                        }
+                        // luckyexcel stores numeric values as strings (e.g. "59.0"); parse to number and recompute m so integers don't display with a trailing ".0"
+                      } else if (
+                        typeof cell.v.v === 'string' &&
+                        cell.v.ct?.t !== 's'
+                      ) {
+                        const numV = parseFloat(cell.v.v as string);
+                        if (isFinite(numV)) {
+                          cell.v.v = numV;
+                          if (!fa || fa === 'General') {
+                            cell.v.m = String(numV);
+                          } else {
+                            try {
+                              cell.v.m = SSF.format(fa, numV);
+                            } catch {
+                              // malformed format string — leave m as-is
+                            }
+                          }
+                        }
+                      }
                     }
                   }
                 }
-              }
-              return sheet;
-            });
 
-            let combinedSheets;
+                sheet.calcChain = calcChain;
 
-            if (importType === 'merge-current-dsheet') {
-              combinedSheets = [...localSheetsArray, ...sheets];
-            } else {
-              combinedSheets = [...sheets];
-            }
+                // luckyexcel only sets config.merge but not cell-level mc properties.
+                // FortuneSheet's canvas renderer needs mc on each cell in the merge range.
+                // celldataMap was built during the celldata loop above (single pass).
+                if (celldataMap && sheet.config?.merge && sheet.celldata) {
+                  for (const merge of Object.values(sheet.config.merge) as {
+                    r: number;
+                    c: number;
+                    rs: number;
+                    cs: number;
+                  }[]) {
+                    const { r, c, rs, cs } = merge;
+                    for (let dr = 0; dr < rs; dr++) {
+                      for (let dc = 0; dc < cs; dc++) {
+                        const key = `${r + dr}_${c + dc}`;
+                        let cell = celldataMap.get(key);
+                        if (!cell) {
+                          cell = { r: r + dr, c: c + dc, v: {} };
+                          sheet.celldata.push(cell as never);
+                          celldataMap.set(key, cell);
+                        }
+                        if (!cell.v) cell.v = {};
+                        cell.v.mc =
+                          dr === 0 && dc === 0 ? { r, c, rs, cs } : { r, c };
+                      }
+                    }
+                  }
+                }
 
-            combinedSheets = combinedSheets.map((sheet, index) => {
-              sheet.order = index;
-              return sheet;
-            });
+                return sheet;
+              });
+
+              let combinedSheets;
 
-            setSheetData(combinedSheets);
-            const ydoc = ydocRef.current;
-            ydoc.transact(() => {
-              if (importType !== 'merge-current-dsheet') {
-                sheetArray.delete(0, sheetArray.length);
+              if (importType === 'merge-current-dsheet') {
+                combinedSheets = [...localSheetsArray, ...sheets];
+              } else {
+                combinedSheets = [...sheets];
               }
 
-              combinedSheets.forEach((sheet) => {
-                if (sheet instanceof Y.Map) return;
+              combinedSheets = combinedSheets.map((sheet, index) => {
+                sheet.order = index;
+                return sheet;
+              });
+
+              const ydoc = ydocRef.current;
+              ydoc.transact(() => {
+                if (importType !== 'merge-current-dsheet') {
+                  sheetArray.delete(0, sheetArray.length);
+                }
 
-                const factory = migrateSheetFactoryForImport(sheet);
-                sheetArray.push([factory()]);
+                combinedSheets.forEach((sheet) => {
+                  if (sheet instanceof Y.Map) return;
+
+                  const factory = migrateSheetFactoryForImport(sheet);
+                  sheetArray.push([factory()]);
+                });
               });
-            });
 
-            // Update UI immediately so sync handler sees correct count before it can run
-            if (ydocRef?.current) {
-              const arr = ydocRef.current.getArray(dsheetId);
-              const plain = ySheetArrayToPlain(arr);
-              currentDataRef.current = plain;
-              setForceSheetRender((prev: number) => prev + 1);
-            }
-            // @ts-expect-error later
-            updateDocumentTitle?.(exportJson.info?.name);
-          },
-        );
-      } catch (error) {
-        console.error('Error loading the workbook', error);
-        alert(
-          'Error loading the workbook. Please ensure it is a valid .xlsx file.',
-        );
-      }
-    };
+              // Update UI immediately so sync handler sees correct count before it can run
+              if (ydocRef?.current) {
+                const arr = ydocRef.current.getArray(dsheetId);
+                const plain = ySheetArrayToPlain(arr);
+                currentDataRef.current = plain;
+                setForceSheetRender((prev: number) => prev + 1);
+              }
+              // @ts-expect-error later
+              updateDocumentTitle?.(exportJson.info?.name);
+              resolve();
+            },
+          );
+        } catch (error) {
+          console.error('Error loading the workbook', error);
+          alert(
+            'Error loading the workbook. Please ensure it is a valid .xlsx file.',
+          );
+          reject(error);
+        }
+      };
 
-    reader.readAsArrayBuffer(file);
+      reader.readAsArrayBuffer(file);
+    });
   };
 
   return { handleXLSXUpload: handleFileUpload };
diff --git a/package/utils/csv-export.tsx b/package/utils/csv-export.tsx
index 38817f2..83516f4 100644
--- a/package/utils/csv-export.tsx
+++ b/package/utils/csv-export.tsx
@@ -1,10 +1,13 @@
 import * as Y from 'yjs';
 import { WorkbookInstance } from '@fileverse-dev/fortune-react';
 import { MutableRefObject } from 'react';
+import { getExportFilenameBase } from './export-filename';
 
 export const handleExportToCSV = (
   workbookRef: MutableRefObject<WorkbookInstance | null>,
   ydocRef: MutableRefObject<Y.Doc | null>,
+  _dsheetId?: string,
+  getDocumentTitle?: () => string,
 ) => {
   if (!workbookRef.current || !ydocRef.current) return;
 
@@ -69,7 +72,13 @@ export const handleExportToCSV = (
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
     link.href = url;
-    link.setAttribute('download', `${activeSheet.name}.csv`);
+    const title = getExportFilenameBase({
+      getDocumentTitle,
+      documentTitleFallback: typeof document !== 'undefined' ? document.title : '',
+      sheetNameFallback: activeSheet.name,
+      defaultBase: 'Sheet',
+    });
+    link.setAttribute('download', `${activeSheet.name + ' - ' + title}.csv`);
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
diff --git a/package/utils/csv-import.tsx b/package/utils/csv-import.tsx
index 5a3fd6f..42ff48e 100644
--- a/package/utils/csv-import.tsx
+++ b/package/utils/csv-import.tsx
@@ -20,32 +20,36 @@ export const handleCSVUpload = (
   fileArg?: File,
   importType?: string,
   handleContentPortal?: any
-) => {
+): Promise<void> => {
   const input = event?.target;
   if (!input?.files?.length && !fileArg) {
-    return;
+    return Promise.resolve();
   }
   const file = input?.files[0] || fileArg;
 
-  const reader = new FileReader({ encoded: 'UTF-8' });
-  reader.onload = (e) => {
-    if (!e.target) {
-      console.error('FileReader event target is null');
-      return;
-    }
-    const csvContent = e.target.result;
-
-    if (typeof csvContent === 'string') {
-      Papa.parse(csvContent, {
-        header: true,
-        dynamicTyping: true,
-        skipEmptyLines: true,
-        complete: (results) => {
-          if (results.errors.length > 0 && results.data.length === 0) {
-            console.error('CSV Parsing errors:', results.errors);
-            alert('Error parsing CSV file');
-            return;
-          }
+  return new Promise<void>((resolve, reject) => {
+    const reader = new FileReader({ encoded: 'UTF-8' });
+    reader.onerror = () => reject(new Error('Failed to read file'));
+    reader.onload = (e) => {
+      if (!e.target) {
+        console.error('FileReader event target is null');
+        reject(new Error('FileReader event target is null'));
+        return;
+      }
+      const csvContent = e.target.result;
+
+      if (typeof csvContent === 'string') {
+        Papa.parse(csvContent, {
+          header: true,
+          dynamicTyping: true,
+          skipEmptyLines: true,
+          complete: (results) => {
+            if (results.errors.length > 0 && results.data.length === 0) {
+              console.error('CSV Parsing errors:', results.errors);
+              alert('Error parsing CSV file');
+              reject(new Error('Error parsing CSV file'));
+              return;
+            }
 
           // Convert CSV data to fortune-sheet format
           const cellData: {
@@ -135,6 +139,7 @@ export const handleCSVUpload = (
 
           if (!ydoc) {
             console.error('ydocRef.current is null');
+            reject(new Error('ydocRef.current is null'));
             return;
           }
 
@@ -191,10 +196,14 @@ export const handleCSVUpload = (
               index: finalData.length - 1,
             });
           }, 500);
-        },
-      });
-    }
-  };
-
-  reader.readAsText(file);
+            resolve();
+          },
+        });
+      } else {
+        reject(new Error('Invalid file content'));
+      }
+    };
+
+    reader.readAsText(file);
+  });
 };
diff --git a/package/utils/custom-toolbar-item.tsx b/package/utils/custom-toolbar-item.tsx
index 8b9a180..e73e294 100644
--- a/package/utils/custom-toolbar-item.tsx
+++ b/package/utils/custom-toolbar-item.tsx
@@ -44,12 +44,12 @@ export const getCustomToolbarItems = ({
     file?: File,
     importType?: string,
     handleContentPortal?: any
-  ) => void;
+  ) => void | Promise<void>;
   handleXLSXUpload: (
     event: ChangeEventHandler<HTMLInputElement> | undefined,
     file?: File,
     importType?: string
-  ) => void;
+  ) => void | Promise<void>;
   handleExportToXLSX: (
     sheetEditorRef: React.RefObject<WorkbookInstance | null>,
     ydocRef: React.RefObject<Y.Doc | null>,
@@ -60,6 +60,7 @@ export const getCustomToolbarItems = ({
     sheetEditorRef: React.RefObject<WorkbookInstance | null>,
     ydocRef: React.RefObject<Y.Doc | null>,
     dsheetId: string,
+    getDocumentTitle?: () => string,
   ) => void;
   handleExportToJSON: (
     sheetEditorRef: React.RefObject<WorkbookInstance | null>,
@@ -127,7 +128,7 @@ export const getCustomToolbarItems = ({
             )
           }
           handleExportToCSV={() =>
-            handleExportToCSV(sheetEditorRef, ydocRef, dsheetId)
+            handleExportToCSV(sheetEditorRef, ydocRef, dsheetId, getDocumentTitle)
           }
           handleExportToJSON={() =>
             handleExportToJSON(sheetEditorRef, ydocRef, dsheetId)
diff --git a/package/utils/export-filename.ts b/package/utils/export-filename.ts
new file mode 100644
index 0000000..f81908a
--- /dev/null
+++ b/package/utils/export-filename.ts
@@ -0,0 +1,43 @@
+const INVALID_FILENAME_CHARS_REGEX = /[<>:"/\\|?*\u0000-\u001F]/g;
+const TRAILING_DOTS_SPACES_REGEX = /[.\s]+$/g;
+
+const MAX_FILENAME_BASE_LENGTH = 120;
+
+export const sanitizeFilenameBase = (value: string): string => {
+  const trimmed = (value ?? '').trim();
+  const withoutInvalid = trimmed.replace(INVALID_FILENAME_CHARS_REGEX, '-');
+  const collapsedWhitespace = withoutInvalid.replace(/\s+/g, ' ');
+  const withoutTrailing = collapsedWhitespace.replace(
+    TRAILING_DOTS_SPACES_REGEX,
+    '',
+  );
+
+  return withoutTrailing.slice(0, MAX_FILENAME_BASE_LENGTH).trim();
+};
+
+export const getExportFilenameBase = ({
+  getDocumentTitle,
+  documentTitleFallback,
+  sheetNameFallback,
+  defaultBase = 'Sheet',
+}: {
+  getDocumentTitle?: () => string;
+  documentTitleFallback?: string;
+  sheetNameFallback?: string;
+  defaultBase?: string;
+}): string => {
+  const candidates = [
+    getDocumentTitle?.(),
+    documentTitleFallback?.split('-')[0]?.trim(),
+    sheetNameFallback,
+    defaultBase,
+  ];
+
+  for (const candidate of candidates) {
+    if (typeof candidate !== 'string') continue;
+    const sanitized = sanitizeFilenameBase(candidate);
+    if (sanitized) return sanitized;
+  }
+
+  return defaultBase;
+};
diff --git a/package/utils/xlsx-border-utils.ts b/package/utils/xlsx-border-utils.ts
new file mode 100644
index 0000000..3a7de61
--- /dev/null
+++ b/package/utils/xlsx-border-utils.ts
@@ -0,0 +1,178 @@
+import { utils as XLSXUtil } from 'xlsx-js-style';
+
+export type BorderSide = { style: number; color?: string };
+
+export const BORDER_STYLE_MAP: Record<number, string> = {
+  1: 'thin',
+  2: 'hair',
+  3: 'dotted',
+  4: 'dashed',
+  5: 'dashDot',
+  6: 'dashDotDot',
+  7: 'double',
+  8: 'medium',
+  9: 'mediumDashed',
+  10: 'mediumDashDot',
+  11: 'mediumDashDotDot',
+  12: 'slantDashDot',
+  13: 'thick',
+};
+
+/** Normalize any hex color to a 6-char uppercase RGB string (no #). */
+const normalizeHexColor = (color: unknown): string => {
+  if (typeof color !== 'string') return '000000';
+  const hex = color.replace('#', '').toUpperCase();
+  if (hex.length === 3) return hex.replace(/(.)/g, '$1$1');
+  return hex.length === 6 ? hex : '000000';
+};
+
+/** Convert a fortune border side descriptor to an xlsx-js-style border entry. */
+export const toBorderSide = (style: unknown, color: unknown) => {
+  const s = Number(style);
+  if (!s) return undefined;
+  return {
+    style: BORDER_STYLE_MAP[s] ?? 'thin',
+    color: { rgb: normalizeHexColor(color) },
+  };
+};
+
+type XlsxBorderSide = ReturnType<typeof toBorderSide>;
+
+/**
+ * Mutates a single cell in the worksheet, applying only the requested border
+ * sides. Spreads the cell and its style objects to avoid mutating frozen refs.
+ */
+const applyToCell = (
+  worksheet: Record<string, unknown>,
+  r: number,
+  c: number,
+  sides: { l?: boolean; r?: boolean; t?: boolean; b?: boolean },
+  borderSide: XlsxBorderSide,
+) => {
+  if (!borderSide) return;
+  if (!sides.l && !sides.r && !sides.t && !sides.b) return;
+  const ref = XLSXUtil.encode_cell({ r, c });
+  const cell = {
+    ...((worksheet[ref] as Record<string, unknown>) || { t: 'z' }),
+  };
+  const s = { ...((cell.s as Record<string, unknown>) || {}) };
+  const border = { ...((s.border as Record<string, unknown>) || {}) };
+  if (sides.l) border.left = borderSide;
+  if (sides.r) border.right = borderSide;
+  if (sides.t) border.top = borderSide;
+  if (sides.b) border.bottom = borderSide;
+  s.border = border;
+  cell.s = s;
+  worksheet[ref] = cell;
+};
+
+/**
+ * Reads `borderInfo` from a fortune sheet config and writes the corresponding
+ * border styles into the xlsx-js-style worksheet object.
+ *
+ * Handles two rangeTypes:
+ *  - "cell"  → per-cell border entries produced by luckyexcel on import
+ *  - "range" → range border commands produced when the user draws borders in the UI
+ */
+export const applyBordersToWorksheet = (
+  worksheet: Record<string, unknown>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  borderInfo: any[],
+) => {
+  borderInfo.forEach((border) => {
+    // ── cell type (from luckyexcel import) ──────────────────────────────────
+    if (border.rangeType === 'cell') {
+      if (!border.value) return;
+      const { row_index: r, col_index: c } = border.value;
+      if (r == null || c == null) return;
+      const v = border.value as {
+        l?: BorderSide;
+        r?: BorderSide;
+        t?: BorderSide;
+        b?: BorderSide;
+      };
+      // Each side can have a distinct style/color, so build the border object directly.
+      const ref = XLSXUtil.encode_cell({ r, c });
+      const cell = {
+        ...((worksheet[ref] as Record<string, unknown>) || { t: 'z' }),
+      };
+      const s = { ...((cell.s as Record<string, unknown>) || {}) };
+      const borderObj = { ...((s.border as Record<string, unknown>) || {}) };
+      if (v.l) borderObj.left = toBorderSide(v.l.style, v.l.color);
+      if (v.r) borderObj.right = toBorderSide(v.r.style, v.r.color);
+      if (v.t) borderObj.top = toBorderSide(v.t.style, v.t.color);
+      if (v.b) borderObj.bottom = toBorderSide(v.b.style, v.b.color);
+      s.border = borderObj;
+      cell.s = s;
+      worksheet[ref] = cell;
+
+      // ── range type (from user drawing borders in the UI) ────────────────────
+    } else if (border.rangeType === 'range') {
+      const { borderType, style, color, range } = border;
+      if (borderType === 'border-none' || !Array.isArray(range) || !style)
+        return;
+      const xlsxSide = toBorderSide(style, color);
+      if (!xlsxSide) return;
+
+      (range as { row: number[]; column: number[] }[]).forEach((rangeItem) => {
+        const [r1, r2] = rangeItem.row;
+        const [c1, c2] = rangeItem.column;
+        for (let r = r1; r <= r2; r++) {
+          for (let c = c1; c <= c2; c++) {
+            switch (borderType) {
+              case 'border-all':
+                applyToCell(
+                  worksheet,
+                  r,
+                  c,
+                  { l: true, r: true, t: true, b: true },
+                  xlsxSide,
+                );
+                break;
+              case 'border-outside':
+                applyToCell(
+                  worksheet,
+                  r,
+                  c,
+                  { l: c === c1, r: c === c2, t: r === r1, b: r === r2 },
+                  xlsxSide,
+                );
+                break;
+              case 'border-inside':
+                applyToCell(
+                  worksheet,
+                  r,
+                  c,
+                  { r: c < c2, b: r < r2 },
+                  xlsxSide,
+                );
+                break;
+              case 'border-horizontal':
+                applyToCell(worksheet, r, c, { b: r < r2 }, xlsxSide);
+                break;
+              case 'border-vertical':
+                applyToCell(worksheet, r, c, { r: c < c2 }, xlsxSide);
+                break;
+              case 'border-left':
+                if (c === c1)
+                  applyToCell(worksheet, r, c, { l: true }, xlsxSide);
+                break;
+              case 'border-right':
+                if (c === c2)
+                  applyToCell(worksheet, r, c, { r: true }, xlsxSide);
+                break;
+              case 'border-top':
+                if (r === r1)
+                  applyToCell(worksheet, r, c, { t: true }, xlsxSide);
+                break;
+              case 'border-bottom':
+                if (r === r2)
+                  applyToCell(worksheet, r, c, { b: true }, xlsxSide);
+                break;
+            }
+          }
+        }
+      });
+    }
+  });
+};
diff --git a/package/utils/xlsx-export.tsx b/package/utils/xlsx-export.tsx
index 64be649..225df0e 100644
--- a/package/utils/xlsx-export.tsx
+++ b/package/utils/xlsx-export.tsx
@@ -1,25 +1,28 @@
-import { utils as XLSXUtil, writeFile as XLSXWriteFile } from "xlsx-js-style";
-import * as Y from "yjs";
-import { WorkbookInstance } from "@fileverse-dev/fortune-react";
-import { MutableRefObject } from "react";
-
+import { utils as XLSXUtil, write as XLSXWrite } from 'xlsx-js-style';
+import { Workbook as ExcelJSWorkbook } from 'exceljs';
+import * as Y from 'yjs';
+import { WorkbookInstance } from '@fileverse-dev/fortune-react';
+import { MutableRefObject } from 'react';
+import { getExportFilenameBase } from './export-filename';
+import { applyBordersToWorksheet } from './xlsx-border-utils';
+import { addFortuneImagesToWorksheet } from './xlsx-image-utils';
 
 const parseColorToHex = (color: string): string | null => {
-  if (!color || typeof color !== "string") return null;
+  if (!color || typeof color !== 'string') return null;
 
   // Trim & lowercase for detection
   const c = color.trim().toLowerCase();
 
   // CASE 1: Already HEX (#fff or #ffffff)
-  if (c.startsWith("#")) {
-    const hex = c.replace("#", "").toUpperCase();
+  if (c.startsWith('#')) {
+    const hex = c.replace('#', '').toUpperCase();
 
     if (hex.length === 3) {
       // Expand shortened hex (#f00 → #FF0000)
       return hex
-        .split("")
+        .split('')
         .map((x) => x + x)
-        .join("")
+        .join('')
         .toUpperCase();
     }
 
@@ -45,24 +48,21 @@ const parseColorToHex = (color: string): string | null => {
     const g = Math.min(255, Math.max(0, parseFloat(match[2])));
     const b = Math.min(255, Math.max(0, parseFloat(match[3])));
 
-    return (
-      ((1 << 24) + (r << 16) + (g << 8) + b)
-        .toString(16)
-        .slice(1)
-        .toUpperCase()
-    );
+    return ((1 << 24) + (r << 16) + (g << 8) + b)
+      .toString(16)
+      .slice(1)
+      .toUpperCase();
   }
 
   // Unknown format → ignore styling
   return null;
 };
 
-
 export const handleExportToXLSX = async (
   workbookRef: MutableRefObject<WorkbookInstance | null>,
   ydocRef: MutableRefObject<Y.Doc | null>,
   dsheetId: string,
-  getDocumentTitle?: () => string
+  getDocumentTitle?: () => string,
 ) => {
   if (!workbookRef.current || !ydocRef.current) return;
 
@@ -79,10 +79,10 @@ export const handleExportToXLSX = async (
       const worksheet: any = XLSXUtil.aoa_to_sheet(rows);
 
       // APPLY MERGED CELLS
-      worksheet["!merges"] = [];
+      worksheet['!merges'] = [];
       if (sheet.config?.merge) {
         Object.values(sheet.config.merge).forEach((m: any) => {
-          worksheet["!merges"].push({
+          worksheet['!merges'].push({
             s: { r: m.r, c: m.c },
             e: { r: m.r + m.rs - 1, c: m.c + m.cs - 1 },
           });
@@ -91,17 +91,17 @@ export const handleExportToXLSX = async (
 
       // APPLY COLUMN WIDTH
       if (sheet.config?.columnlen) {
-        worksheet["!cols"] = [];
+        worksheet['!cols'] = [];
         Object.entries(sheet.config.columnlen).forEach(([col, w]) => {
-          worksheet["!cols"][Number(col)] = { wpx: Number(w) };
+          worksheet['!cols'][Number(col)] = { wpx: Number(w) };
         });
       }
 
       // ROW HEIGHT
       if (sheet.config?.rowlen) {
-        worksheet["!rows"] = [];
+        worksheet['!rows'] = [];
         Object.entries(sheet.config.rowlen).forEach(([row, h]) => {
-          worksheet["!rows"][Number(row)] = { hpx: Number(h) };
+          worksheet['!rows'][Number(row)] = { hpx: Number(h) };
         });
       }
 
@@ -119,9 +119,8 @@ export const handleExportToXLSX = async (
         // -----------------------------
         // VALUE + FORMULA
         // -----------------------------
-        if (v.f) newCell.f = v.f.replace(/^=/, "");
+        if (v.f) newCell.f = v.f.replace(/^=/, '');
         newCell.v = v.v || v?.ct?.s?.[0]?.v;
-        ;
         if (v.m) newCell.w = v.m;
 
         // -----------------------------
@@ -129,7 +128,8 @@ export const handleExportToXLSX = async (
         // -----------------------------
         if (v.ct) {
           if (v.ct.fa) newCell.z = v.ct.fa;
-          if (v.ct.t) newCell.t = v.ct.t;
+          //xlsx needs date to be in number format, so we set type to 'n' for date cells. this fixes exporting date from dsheets
+          if (v.ct.t) newCell.t = v.ct.t === 'd' ? 'n' : v.ct.t;
         }
 
         // -----------------------------
@@ -142,7 +142,7 @@ export const handleExportToXLSX = async (
           const hex = parseColorToHex(v.bg);
           if (hex) {
             newCell.s.fill = {
-              patternType: "solid",
+              patternType: 'solid',
               fgColor: { rgb: hex },
             };
           }
@@ -159,16 +159,16 @@ export const handleExportToXLSX = async (
           sz: v.fs ?? undefined,
           name: v.ff ?? undefined,
 
-          color: v.fc ? { rgb: v.fc.replace("#", "") } : undefined,
+          color: v.fc ? { rgb: v.fc.replace('#', '') } : undefined,
         };
 
         // ============ ALIGNMENT ============
-        const HT_MAP: any = { "0": "center", "1": "left", "2": "right" };
-        const VT_MAP: any = { "0": "center", "1": "top", "2": "bottom" };
+        const HT_MAP: any = { '0': 'center', '1': 'left', '2': 'right' };
+        const VT_MAP: any = { '0': 'center', '1': 'top', '2': 'bottom' };
 
         newCell.s.alignment = {
           ...(newCell.s.alignment || {}),
-          wrapText: v.tb === "1" || v.tb === "2" ? true : undefined,
+          wrapText: v.tb === '1' || v.tb === '2' ? true : undefined,
           textRotation: v.tr !== undefined ? v.tr : undefined,
         };
 
@@ -178,32 +178,158 @@ export const handleExportToXLSX = async (
         if (v.tb !== undefined) {
           newCell.s.alignment = newCell.s.alignment || {};
 
-          if (v.tb === "1") {
-            newCell.s.alignment.wrapText = true;   // Wrap text
-          } else if (v.tb === "2") {
+          if (v.tb === '1') {
+            newCell.s.alignment.wrapText = true; // Wrap text
+          } else if (v.tb === '2') {
             newCell.s.alignment.shrinkToFit = true; // Clip text
           }
           // "0" → overflow → do nothing
         }
 
-
         worksheet[cellRef] = newCell;
       });
 
+      // APPLY BORDERS
+      if (sheet.config?.borderInfo) {
+        applyBordersToWorksheet(worksheet, sheet.config.borderInfo);
+      }
+
       const subSheetName =
         sheet.name.length > 30 ? sheet.name.slice(0, 30) : sheet.name;
 
       XLSXUtil.book_append_sheet(workbook, worksheet, subSheetName);
     });
 
-    let title = (await getDocumentTitle?.()) || "Sheet";
-    title = title.length > 30 ? title.slice(0, 30) : title;
+    const activeSheetName = workbookRef.current.getSheet()?.name;
+    const title = getExportFilenameBase({
+      getDocumentTitle: () => getDocumentTitle?.() ?? '',
+      documentTitleFallback:
+        typeof document !== 'undefined' ? document.title : '',
+      sheetNameFallback: activeSheetName,
+      defaultBase: 'Sheet',
+    });
 
-    XLSXWriteFile(workbook, `${title}.xlsx`, {
-      bookType: "xlsx",
+    // Pass 1: write to buffer with xlsx-js-style (preserves all cell styling)
+    const xlsxBuffer: ArrayBuffer = XLSXWrite(workbook, {
+      bookType: 'xlsx',
+      type: 'array',
       compression: true,
     });
+
+    // Pass 2: ExcelJS reads the buffer and adds data validations
+    const excelWorkbook = new ExcelJSWorkbook();
+    await excelWorkbook.xlsx.load(xlsxBuffer);
+
+    sheetWithData.forEach((sheet, index) => {
+      if (!sheet.dataVerification) return;
+      const ws = excelWorkbook.worksheets[index];
+      if (!ws) return;
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const wsAny = ws as any;
+      if (!wsAny.dataValidations) wsAny.dataValidations = { model: {} };
+      if (!wsAny.dataValidations.model) wsAny.dataValidations.model = {};
+      const dvModel: Record<string, unknown> = wsAny.dataValidations.model;
+
+      let cfPriority = 1;
+      Object.entries(sheet.dataVerification).forEach(([rowColKey, dvRaw]) => {
+        const dv = dvRaw as {
+          type?: string;
+          value1?: string;
+          color?: string;
+          hintShow?: boolean;
+          hintValue?: string;
+          prohibitInput?: boolean;
+        };
+        if (dv.type !== 'dropdown') return;
+        const [row, col] = rowColKey.split('_').map(Number);
+        const cellAddress = XLSXUtil.encode_cell({ r: row, c: col });
+        const options = (dv.value1 || '')
+          .split(',')
+          .map((s: string) => s.trim())
+          .filter(Boolean);
+        if (options.length === 0) return;
+
+        // Write directly to the model in the same format the import reads it
+        dvModel[cellAddress] = {
+          type: 'list',
+          allowBlank: true,
+          formulae: [`"${options.join(',')}"`],
+          showInputMessage: Boolean(dv.hintShow),
+          prompt: dv.hintValue || '',
+          showErrorMessage: Boolean(dv.prohibitInput),
+        };
+
+        // Add conditional formatting so option colors persist in Google Sheets / Excel.
+        // color is a flat comma-separated string of R, G, B triplets (one per option).
+        if (dv.color) {
+          const colorNums = dv.color
+            .split(',')
+            .map((s: string) => parseInt(s.trim(), 10));
+          const toHex2 = (n: number) =>
+            Math.max(0, Math.min(255, n))
+              .toString(16)
+              .padStart(2, '0')
+              .toUpperCase();
+          const cfRules = options
+            .map((option, i) => {
+              const r = colorNums[i * 3];
+              const g = colorNums[i * 3 + 1];
+              const b = colorNums[i * 3 + 2];
+              if (isNaN(r) || isNaN(g) || isNaN(b)) return null;
+              const argb = `FF${toHex2(r)}${toHex2(g)}${toHex2(b)}`;
+              return {
+                type: 'cellIs',
+                operator: 'equal',
+                formulae: [`"${option}"`],
+                priority: cfPriority++,
+                style: {
+                  fill: {
+                    type: 'pattern',
+                    pattern: 'solid',
+                    fgColor: { argb },
+                  },
+                },
+              };
+            })
+            .filter(Boolean);
+          if (cfRules.length > 0) {
+            wsAny.addConditionalFormatting({
+              ref: cellAddress,
+              rules: cfRules,
+            });
+          }
+        }
+      });
+    });
+
+    sheetWithData.forEach((sheet, index) => {
+      if (!sheet.images?.length) return;
+      const ws = excelWorkbook.worksheets[index];
+      if (!ws) return;
+      const defaultColPx = Number(sheet.defaultColWidth) || 99;
+      const defaultRowPx = Number(sheet.defaultRowHeight) || 21;
+      addFortuneImagesToWorksheet(
+        ws,
+        excelWorkbook,
+        sheet.images,
+        sheet,
+        defaultColPx,
+        defaultRowPx,
+      );
+    });
+
+    const finalBuffer = await excelWorkbook.xlsx.writeBuffer();
+    const blob = new Blob([finalBuffer], {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${title}.xlsx`;
+    a.click();
+    URL.revokeObjectURL(url);
   } catch (error) {
-    console.error("Export failed:", error);
+    console.error('Export failed:', error);
   }
 };
diff --git a/package/utils/xlsx-image-utils.ts b/package/utils/xlsx-image-utils.ts
new file mode 100644
index 0000000..a4a7265
--- /dev/null
+++ b/package/utils/xlsx-image-utils.ts
@@ -0,0 +1,236 @@
+import { Workbook, Worksheet } from 'exceljs';
+import { Sheet } from '@fileverse-dev/fortune-react';
+
+export interface RawSheetImage {
+  src: string;
+  nativeCol: number;
+  nativeColOff: number;
+  nativeRow: number;
+  nativeRowOff: number;
+  width: number;
+  height: number;
+  brNativeCol?: number;
+  brNativeColOff?: number;
+  brNativeRow?: number;
+  brNativeRowOff?: number;
+}
+
+export function extractImagesFromWorksheet(
+  ws: Worksheet,
+  workbook: Workbook,
+): RawSheetImage[] {
+  const wsImages = ws.getImages();
+  if (!wsImages.length) return [];
+
+  const sheetImages: RawSheetImage[] = [];
+  for (const img of wsImages) {
+    try {
+      const imageData = workbook.getImage(Number(img.imageId));
+      if (!imageData) continue;
+
+      let base64: string;
+      if (imageData.buffer) {
+        const arr = new Uint8Array(imageData.buffer as unknown as ArrayBuffer);
+        let binary = '';
+        for (let i = 0; i < arr.length; i += 8192) {
+          binary += String.fromCharCode(...arr.subarray(i, i + 8192));
+        }
+        base64 = btoa(binary);
+      } else if (imageData.base64) {
+        base64 = imageData.base64;
+      } else {
+        continue;
+      }
+
+      const ext = imageData.extension ?? 'png';
+      const mime = ext === 'jpeg' ? 'image/jpeg' : `image/${ext}`;
+      const src = `data:${mime};base64,${base64}`;
+
+      const { tl, br } = img.range;
+      // Google Sheets (and some Excel files) use tl+ext instead of tl+br
+      const rangeExt = (
+        img.range as unknown as { ext?: { width: number; height: number } }
+      ).ext;
+
+      sheetImages.push({
+        src,
+        nativeCol: tl.nativeCol,
+        nativeColOff: tl.nativeColOff,
+        nativeRow: tl.nativeRow,
+        nativeRowOff: tl.nativeRowOff,
+        width: rangeExt ? Math.max(Math.round(rangeExt.width), 20) : 0,
+        height: rangeExt ? Math.max(Math.round(rangeExt.height), 20) : 0,
+        brNativeCol: br?.nativeCol,
+        brNativeColOff: br?.nativeColOff,
+        brNativeRow: br?.nativeRow,
+        brNativeRowOff: br?.nativeRowOff,
+      });
+    } catch {
+      // skip unreadable images
+    }
+  }
+  return sheetImages;
+}
+
+const EMU_TO_PX = 9525;
+const COL_GRIDLINE_PX = 1;
+const ROW_GRIDLINE_PX = 2;
+
+/** Convert a pixel offset to native column index + EMU offset (inverse of nativeColToPx). */
+function pxToNativeCol(
+  px: number,
+  sheet: Sheet,
+  defaultColPx: number,
+): { nativeCol: number; nativeColOff: number } {
+  let cumPx = 0;
+  let col = 0;
+  while (col < 10000) {
+    const colWidth =
+      (sheet.config?.columnlen?.[col] ?? defaultColPx) + COL_GRIDLINE_PX;
+    if (cumPx + colWidth > px) {
+      return {
+        nativeCol: col,
+        nativeColOff: Math.round((px - cumPx) * EMU_TO_PX),
+      };
+    }
+    cumPx += colWidth;
+    col++;
+  }
+  return { nativeCol: col, nativeColOff: 0 };
+}
+
+/** Convert a pixel offset to native row index + EMU offset (inverse of nativeRowToPx). */
+function pxToNativeRow(
+  px: number,
+  sheet: Sheet,
+  defaultRowPx: number,
+): { nativeRow: number; nativeRowOff: number } {
+  let cumPx = 0;
+  let row = 0;
+  while (row < 100000) {
+    const rowHeight =
+      (sheet.config?.rowlen?.[row] ?? defaultRowPx) + ROW_GRIDLINE_PX;
+    if (cumPx + rowHeight > px) {
+      return {
+        nativeRow: row,
+        nativeRowOff: Math.round((px - cumPx) * EMU_TO_PX),
+      };
+    }
+    cumPx += rowHeight;
+    row++;
+  }
+  return { nativeRow: row, nativeRowOff: 0 };
+}
+
+/**
+ * Embed Fortune sheet images into an ExcelJS worksheet.
+ * This is the inverse of convertRawImagesToFortuneSheet: converts pixel-based
+ * Image objects back to ExcelJS native cell + EMU positioning.
+ */
+export function addFortuneImagesToWorksheet(
+  ws: Worksheet,
+  workbook: Workbook,
+  images: {
+    id: string;
+    src: string;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  }[],
+  sheet: Sheet,
+  defaultColPx: number,
+  defaultRowPx: number,
+): void {
+  for (const img of images) {
+    try {
+      const match = img.src.match(/^data:image\/([a-zA-Z]+);base64,(.+)$/);
+      if (!match) continue;
+
+      const rawExt = match[1].toLowerCase();
+      const extension = (
+        rawExt === 'jpeg' || rawExt === 'jpg'
+          ? 'jpeg'
+          : rawExt === 'gif'
+            ? 'gif'
+            : rawExt === 'bmp'
+              ? 'bmp'
+              : 'png'
+      ) as 'png' | 'jpeg' | 'gif' | 'bmp';
+      const base64 = match[2];
+
+      const imageId = workbook.addImage({ base64, extension });
+      const { nativeCol, nativeColOff } = pxToNativeCol(
+        img.left,
+        sheet,
+        defaultColPx,
+      );
+      const { nativeRow, nativeRowOff } = pxToNativeRow(
+        img.top,
+        sheet,
+        defaultRowPx,
+      );
+
+      ws.addImage(imageId, {
+        tl: { nativeCol, nativeColOff, nativeRow, nativeRowOff } as never,
+        ext: { width: img.width, height: img.height },
+        editAs: 'oneCell',
+      });
+    } catch {
+      // skip unembeddable images
+    }
+  }
+}
+
+export function convertRawImagesToFortuneSheet(
+  rawImages: RawSheetImage[],
+  sheet: Sheet,
+  defaultColPx: number,
+  defaultRowPx: number,
+) {
+  const nativeColToPx = (nativeCol: number, nativeColOff: number) => {
+    let px = 0;
+    for (let c = 0; c < nativeCol; c++) {
+      px += (sheet.config?.columnlen?.[c] ?? defaultColPx) + COL_GRIDLINE_PX;
+    }
+    return Math.round(px + nativeColOff / EMU_TO_PX);
+  };
+
+  const nativeRowToPx = (nativeRow: number, nativeRowOff: number) => {
+    let px = 0;
+    for (let r = 0; r < nativeRow; r++) {
+      px += (sheet.config?.rowlen?.[r] ?? defaultRowPx) + ROW_GRIDLINE_PX;
+    }
+    return Math.round(px + nativeRowOff / EMU_TO_PX);
+  };
+
+  return rawImages.map((raw) => {
+    const left = nativeColToPx(raw.nativeCol, raw.nativeColOff);
+    const top = nativeRowToPx(raw.nativeRow, raw.nativeRowOff);
+
+    let { width, height } = raw;
+
+    if (!width && raw.brNativeCol != null) {
+      width = Math.max(
+        nativeColToPx(raw.brNativeCol, raw.brNativeColOff ?? 0) - left,
+        20,
+      );
+    }
+
+    if (!height && raw.brNativeRow != null) {
+      height = Math.max(
+        nativeRowToPx(raw.brNativeRow, raw.brNativeRowOff ?? 0) - top,
+        20,
+      );
+    }
+
+    return {
+      id: `img_imported_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+      src: raw.src,
+      left,
+      top,
+      width: Math.max(width, 20),
+      height: Math.max(height, 20),
+    };
+  });
+}