From cfc3e13b38947ae6254ddb44898586701f36c0dc Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Tue, 20 Jan 2026 22:59:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E4=BA=8EFabric.js=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=83=8C=E6=99=AF=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  812 ++++++++-
 package.json                                  |    1 +
 src/shared/stores/tools.ts                    |   13 +
 .../tools/add_background/add_background.vue   | 1562 +++++++++++++++++
 4 files changed, 2375 insertions(+), 13 deletions(-)
 create mode 100644 src/views/tools/add_background/add_background.vue

diff --git a/package-lock.json b/package-lock.json
index d342793..a643c2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,6 +57,7 @@
         "@vue-flow/minimap": "^1.0.0",
         "@vueuse/core": "^13.9.0",
         "axios": "^1.5.0",
+        "fabric": "^7.1.0",
         "jquery": "^3.7.0",
         "monaco-editor": "^0.54.0",
         "naive-ui": "^2.34.0",
@@ -110,6 +111,27 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
+      "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@csstools/css-calc": "^2.1.3",
+        "@csstools/css-color-parser": "^3.0.9",
+        "@csstools/css-parser-algorithms": "^3.0.4",
+        "@csstools/css-tokenizer": "^3.0.3",
+        "lru-cache": "^10.4.3"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -190,6 +212,78 @@
         "vue": "^3.0.11"
       }
     },
+    "node_modules/@csstools/color-helpers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
+      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
+      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/css-calc": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
     "node_modules/@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@@ -2282,7 +2376,7 @@
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
       "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">= 14"
@@ -2551,6 +2645,27 @@
         "bare-path": "^3.0.0"
       }
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/basic-ftp": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.0.5.tgz",
@@ -2573,6 +2688,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
     "node_modules/body-parser": {
       "version": "1.20.4",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.4.tgz",
@@ -2637,6 +2764,31 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/buffer-crc32": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
@@ -2730,6 +2882,13 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/chromium-bidi": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-12.0.1.tgz",
@@ -2903,6 +3062,20 @@
       "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
       "license": "MIT"
     },
+    "node_modules/cssstyle": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
+      "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@asamuzakjp/css-color": "^3.2.0",
+        "rrweb-cssom": "^0.8.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -3025,6 +3198,20 @@
         "node": ">= 14"
       }
     },
+    "node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/date-fns": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
@@ -3069,6 +3256,29 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/deep-equal": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
@@ -3089,6 +3299,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -3286,7 +3506,7 @@
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
       "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "once": "^1.4.0"
@@ -3530,6 +3750,16 @@
       "integrity": "sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==",
       "license": "MIT"
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "license": "(MIT OR WTFPL)",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/express": {
       "version": "4.22.1",
       "resolved": "https://registry.npmjs.org/express/-/express-4.22.1.tgz",
@@ -3678,6 +3908,19 @@
         "@types/yauzl": "^2.9.1"
       }
     },
+    "node_modules/fabric": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/fabric/-/fabric-7.1.0.tgz",
+      "integrity": "sha512-061QsoSw6xn7UoRXYq816qMyvObP4gRNVph0jAFWtG5E2kBlfdjrYBiLPRuaAHSmVQUz9RjbPpePB/hljiYJIw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "optionalDependencies": {
+        "canvas": "^3.2.0",
+        "jsdom": "^26.1.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3829,6 +4072,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3952,6 +4202,13 @@
         "node": ">= 14"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -4059,6 +4316,19 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/http-errors": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
@@ -4100,7 +4370,7 @@
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
       "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "agent-base": "^7.1.0",
@@ -4148,7 +4418,7 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
       "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "agent-base": "^7.1.2",
@@ -4171,6 +4441,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
     "node_modules/immutable": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
@@ -4199,9 +4490,16 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC"
     },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/ip-address": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
@@ -4333,6 +4631,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -4387,6 +4692,46 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsdom": {
+      "version": "26.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-26.1.0.tgz",
+      "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "cssstyle": "^4.2.1",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.5.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.16",
+        "parse5": "^7.2.1",
+        "rrweb-cssom": "^0.8.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^5.1.1",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.1.1",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -4650,6 +4995,19 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -4666,6 +5024,16 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/mitt": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
@@ -4673,6 +5041,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/mlly": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz",
@@ -4773,6 +5148,13 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/napi-build-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
+      "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -4793,11 +5175,23 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/node-abi": {
+      "version": "3.87.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.87.0.tgz",
+      "integrity": "sha512-+CGM1L1CgmtheLcBuleyYOn7NWPVu0s0EJH2C4puxgEZb9h8QpR9G2dBfZJOAUhi7VQxuBPMd0hiISWcTyiYyQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
       "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-      "dev": true,
       "license": "MIT",
       "optional": true
     },
@@ -4819,6 +5213,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/nwsapi": {
+      "version": "2.2.23",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.23.tgz",
+      "integrity": "sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -4874,7 +5275,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
       "dependencies": {
         "wrappy": "1"
@@ -4964,6 +5365,32 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -5094,6 +5521,73 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
+      "integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^2.0.0",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/tar-fs": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.4.tgz",
+      "integrity": "sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/prettier": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
@@ -5368,13 +5862,23 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
       "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "end-of-stream": "^1.1.0",
         "once": "^1.3.1"
       }
     },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/punycode.js": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
@@ -5606,6 +6110,37 @@
       "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
       "integrity": "sha512-sf7oGoLuaYAScB4VGr0tzetsYlS8EJH6qnTCfQ/WVEa89hALQ4RQfCKt5xCyPQKPDUbVUAIP1QsxAwfAjlDp7Q=="
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+      "optional": true,
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -5711,11 +6246,18 @@
       "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
       "license": "MIT"
     },
+    "node_modules/rrweb-cssom": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
+      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -5736,7 +6278,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/sass": {
@@ -5761,6 +6303,19 @@
         "@parcel/watcher": "^2.4.1"
       }
     },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -5791,7 +6346,7 @@
       "version": "7.7.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
       "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -5977,6 +6532,53 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/smart-buffer": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
@@ -6083,6 +6685,16 @@
         "text-decoder": "^1.1.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -6118,6 +6730,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/tar-fs": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.1.1.tgz",
@@ -6207,6 +6836,26 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/tldts": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tldts-core": "^6.1.86"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -6229,6 +6878,32 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/treemate": {
       "version": "0.3.11",
       "resolved": "https://registry.npmjs.org/treemate/-/treemate-0.3.11.tgz",
@@ -6688,6 +7363,19 @@
         "@esbuild/win32-x64": "0.27.2"
       }
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -6923,6 +7611,13 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -7159,6 +7854,19 @@
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
       "license": "MIT"
     },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/webdriver-bidi-protocol": {
       "version": "0.3.10",
       "resolved": "https://registry.npmjs.org/webdriver-bidi-protocol/-/webdriver-bidi-protocol-0.3.10.tgz",
@@ -7166,12 +7874,73 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
       "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
       "license": "MIT"
     },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tr46": "^5.1.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -7194,14 +7963,14 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC"
     },
     "node_modules/ws": {
       "version": "8.18.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
       "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
@@ -7219,6 +7988,23 @@
         }
       }
     },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/y-prosemirror": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/y-prosemirror/-/y-prosemirror-1.3.7.tgz",
diff --git a/package.json b/package.json
index 1efbde7..4f75bb1 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "@vue-flow/minimap": "^1.0.0",
     "@vueuse/core": "^13.9.0",
     "axios": "^1.5.0",
+    "fabric": "^7.1.0",
     "jquery": "^3.7.0",
     "monaco-editor": "^0.54.0",
     "naive-ui": "^2.34.0",
diff --git a/src/shared/stores/tools.ts b/src/shared/stores/tools.ts
index dcefce4..ea42b83 100644
--- a/src/shared/stores/tools.ts
+++ b/src/shared/stores/tools.ts
@@ -51,6 +51,19 @@ function getDefaultTools(): Tool[] {
       isDefault: true,
       toolName: 'remove_background'
     },
+    {
+      id: 'add-background',
+      name: t('Add Background'),
+      description: t('Add custom background color to images'),
+      category: 'Image Processing',
+      icon: 'photo-plus',
+      color: '#e5e7eb',
+      type: 'route',
+      routeName: 'AddBackground',
+      order: 2,
+      isDefault: true,
+      toolName: 'add_background'
+    },
     // 在这里添加更多默认工具，每行一个：
     // {
     //   id: 'tool-id-2',
diff --git a/src/views/tools/add_background/add_background.vue b/src/views/tools/add_background/add_background.vue
new file mode 100644
index 0000000..948d000
--- /dev/null
+++ b/src/views/tools/add_background/add_background.vue
@@ -0,0 +1,1562 @@
+<template>
+  <div
+    class="add-background-page"
+    @dragenter.prevent="handleDragEnter"
+    @dragover.prevent="handleDragOver"
+    @dragleave="handleDragLeave"
+    @drop.prevent="handleDrop"
+  >
+    <div v-if="isDragging" class="global-drag-overlay">
+      <div class="overlay-content">
+        <p>{{ t('Drop image anywhere to add background') }}</p>
+      </div>
+    </div>
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept="image/*"
+      style="display: none"
+      @change="handleFileSelect"
+    />
+    
+    <div class="page-header">
+      <h2>{{ t('Add Background') }}</h2>
+      <div v-if="uploadedImage" class="toolbar-actions">
+        <button
+          v-if="resultImage"
+          class="toolbar-btn"
+          @click="handleDownload"
+          :title="t('Download')"
+        >
+          <i class="fa fa-download"></i>
+        </button>
+        <button 
+          class="toolbar-btn"
+          @click="resetUpload"
+          :title="t('Change Image')"
+        >
+          <i class="fa fa-refresh"></i>
+        </button>
+      </div>
+    </div>
+
+    <div class="page-content">
+      <div class="tool-container">
+        <div class="upload-section">
+          <div
+            v-if="!uploadedImage"
+            class="upload-area"
+            :class="{ 'dragging': isDragging }"
+          >
+            <div class="upload-content">
+              <button
+                type="button"
+                class="upload-btn"
+                @click="triggerFileInput"
+                :disabled="processing"
+              >
+                <i class="fa fa-upload"></i>
+                <span>{{ t('Upload Image') }}</span>
+              </button>
+              
+              <div class="divider">
+                <span>{{ t('or') }}</span>
+              </div>
+              
+              <div class="url-input-wrapper" @click.stop>
+                <input
+                  ref="urlInputRef"
+                  v-model="imageUrl"
+                  type="text"
+                  class="url-input"
+                  :placeholder="t('Paste image URL here')"
+                  @keyup.enter="handleUrlSubmit"
+                  @paste="handleUrlPaste"
+                  :disabled="processing"
+                />
+              </div>
+              
+              <p class="upload-hint">{{ t('Drag and drop your image anywhere, or paste image directly') }}</p>
+              <p class="upload-format-hint">{{ t('Supports JPG, PNG, WebP formats') }}</p>
+            </div>
+            <div v-if="processing" class="upload-processing-overlay">
+              <div class="spinner"></div>
+              <p>{{ t('Loading image from URL...') }}</p>
+            </div>
+          </div>
+
+          <div v-else class="preview-section">
+            <!-- Background Color Selection -->
+            <div v-if="uploadedImage && !processing" class="background-controls">
+              <div class="control-group">
+                <label class="control-label">{{ t('Background Color') }}</label>
+                <div class="color-picker-container">
+                  <input
+                    v-model="backgroundColor"
+                    type="color"
+                    class="color-picker"
+                  />
+                  <input
+                    v-model="backgroundColor"
+                    type="text"
+                    class="hex-input"
+                    placeholder="#FFFFFF"
+                    @input="validateHexColor"
+                  />
+                </div>
+              </div>
+              
+              <div class="action-buttons">
+                <button
+                  class="apply-btn"
+                  @click="applyBackgroundColor"
+                  :disabled="processing || !isColorValid"
+                >
+                  {{ t('Apply Background') }}
+                </button>
+              </div>
+            </div>
+
+            <div class="canvas-container" v-show="uploadedImage">
+              <canvas 
+                ref="canvasRef" 
+                class="preview-canvas"
+              ></canvas>
+              <div v-if="processing" class="canvas-processing-overlay">
+                <div class="spinner"></div>
+                <p>{{ t('Applying background...') }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="historyList.length > 0 || uploadedImage" class="history-bar">
+          <div class="history-scroll-container">
+            <button 
+              type="button"
+              class="history-item add-button"
+              @click.stop="triggerFileInput"
+              :title="t('Add New Image')"
+            >
+              <i class="fa fa-plus"></i>
+            </button>
+
+            <div
+              v-for="(item, index) in historyList"
+              :key="item.id"
+              class="history-item"
+              :class="{ 'active': currentHistoryIndex === index }"
+              @click="selectHistoryItem(index)"
+            >
+              <div class="history-thumbnail">
+                <img :src="getHistoryThumbnailUrl(item)" alt="History" />
+                <button
+                  type="button"
+                  class="history-delete-btn"
+                  @click.stop="removeHistoryItem(index)"
+                  :title="t('Delete')"
+                  :aria-label="t('Delete')"
+                ></button>
+              </div>
+            </div>
+
+            <div
+              v-if="uploadedImage && resultImage && currentHistoryIndex === -1"
+              class="history-item active"
+            >
+              <div class="history-thumbnail">
+                <img :src="resultImageUrl" alt="Current" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { useMessage } from 'naive-ui'
+import { useRoute } from 'vue-router'
+import axios from 'axios'
+import { t } from '@/shared/i18n'
+import { get_session_api_headers } from '@/shared/api/auth'
+import { useAuthStore } from '@/shared/stores/auth'
+import { useSEO } from '@/shared/composables/useSEO'
+import { compressImageFile } from '@/shared/utils/imageResize'
+import { Canvas, FabricImage } from 'fabric'
+
+const message = useMessage()
+const authStore = useAuthStore()
+const route = useRoute()
+
+// SEO configuration
+useSEO({
+  title: t('Add Background'),
+  description: t('Add custom background color to images. Free online tool to add background to transparent images. Supports JPG, PNG, WebP formats.'),
+  keywords: t('add background, background color, image background, transparent background, online background tool, image processing, background editor, free tool')
+})
+
+interface HistoryItem {
+  id: string
+  originalImageUrl: string
+  originalImageFile: File | null
+  resultImage: string
+  backgroundColor: string
+  timestamp: number
+}
+
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const urlInputRef = ref<HTMLInputElement | null>(null)
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+const uploadedImage = ref<File | null>(null)
+const uploadedImageUrl = ref<string>('')
+const resultImage = ref<string>('')
+const resultImageBlobUrl = ref<string>('')
+const imageUrl = ref<string>('')
+const backgroundColor = ref<string>('#FFFFFF')
+const isColorValid = ref<boolean>(true)
+const resultImageUrl = computed(() => {
+  if (!resultImage.value) return ''
+  return resultImage.value
+})
+
+const historyList = ref<HistoryItem[]>([])
+const currentHistoryIndex = ref<number>(-1)
+const isDragging = ref(false)
+const dragCounter = ref(0)
+const processing = ref(false)
+let fabricCanvas: Canvas | null = null
+
+const adjustCanvasSize = () => {
+  const canvas = canvasRef.value
+  if (!canvas) return
+  
+  const previewSection = canvas.closest('.preview-section') as HTMLElement
+  if (!previewSection) return
+  
+  const previewRect = previewSection.getBoundingClientRect()
+  const padding = 24
+  const maxAvailableWidth = Math.max(0, previewRect.width - padding)
+  const maxAvailableHeight = Math.max(0, previewRect.height - 200) // Account for controls
+  
+  if (maxAvailableWidth <= 0 || maxAvailableHeight <= 0) return
+  
+  canvas.style.maxWidth = `${maxAvailableWidth}px`
+  canvas.style.maxHeight = `${maxAvailableHeight}px`
+}
+
+watch(uploadedImageUrl, adjustCanvasSize)
+
+const handleResize = () => {
+  adjustCanvasSize()
+}
+
+const handlePaste = async (event: ClipboardEvent) => {
+  const items = event.clipboardData?.items
+  if (!items) return
+
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    if (item.type.indexOf('image') !== -1) {
+      event.preventDefault()
+      const file = item.getAsFile()
+      if (file) {
+        processFile(file)
+      }
+      return
+    }
+  }
+
+  const text = event.clipboardData?.getData('text')
+  if (text && isValidImageUrl(text)) {
+    event.preventDefault()
+    imageUrl.value = text.trim()
+    await handleUrlSubmit()
+  }
+}
+
+const isValidImageUrl = (url: string): boolean => {
+  if (!url || typeof url !== 'string') return false
+  try {
+    const urlObj = new URL(url)
+    if (!['http:', 'https:'].includes(urlObj.protocol)) {
+      return false
+    }
+    
+    const pathname = urlObj.pathname.toLowerCase()
+    const imageExtensions = ['.jpg', '.jpeg', '.png', '.webp', '.gif', '.bmp']
+    
+    const hasImageExtension = imageExtensions.some(ext => pathname.endsWith(ext)) || 
+                              urlObj.pathname.match(/\.(jpg|jpeg|png|webp|gif|bmp)(\?|$)/i) !== null
+    
+    return hasImageExtension || pathname.length > 0
+  } catch {
+    return false
+  }
+}
+
+const handleUrlPaste = async (event: ClipboardEvent) => {
+  const text = event.clipboardData?.getData('text')
+  if (text && isValidImageUrl(text)) {
+    event.preventDefault()
+    imageUrl.value = text.trim()
+    await handleUrlSubmit()
+  }
+}
+
+const handleUrlSubmit = async () => {
+  const url = imageUrl.value.trim()
+  if (!url) {
+    message.warning(t('Please enter an image URL'))
+    return
+  }
+
+  if (!isValidImageUrl(url)) {
+    message.warning(t('Please enter a valid image URL'))
+    return
+  }
+
+  processing.value = true
+  resultImage.value = ''
+  currentHistoryIndex.value = -1
+
+  try {
+    const response = await fetch(url, { mode: 'cors' })
+    if (!response.ok) {
+      throw new Error(`Failed to load image: ${response.status}`)
+    }
+
+    const blob = await response.blob()
+    
+    const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
+    if (!validTypes.includes(blob.type)) {
+      message.warning(t('Unsupported image format. Please use JPG, PNG, or WebP'))
+      processing.value = false
+      return
+    }
+
+    const maxSize = 10 * 1024 * 1024
+    if (blob.size > maxSize) {
+      message.warning(t('Image size exceeds 10MB limit'))
+      processing.value = false
+      return
+    }
+
+    const originalFile = new File([blob], 'image-from-url', { type: blob.type })
+    
+    try {
+      const compressedFile = await compressImageFile(originalFile, {
+        maxWidth: 1024,
+        maxHeight: 1024,
+        quality: 0.92,
+        mode: 'contain'
+      })
+      
+      uploadedImage.value = compressedFile
+      uploadedImageUrl.value = URL.createObjectURL(compressedFile)
+      
+      await initializeCanvas()
+    } catch (error) {
+      message.error(t('Image processing failed, please try again'))
+      processing.value = false
+    }
+  } catch (error: any) {
+    let errorMessage = t('Failed to load image from URL')
+    
+    if (error.message?.includes('CORS')) {
+      errorMessage = t('CORS error. The image server does not allow cross-origin access.')
+    } else if (error.message?.includes('Failed to load')) {
+      errorMessage = t('Failed to load image. Please check the URL and try again.')
+    }
+    
+    message.error(errorMessage)
+    processing.value = false
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+  window.addEventListener('paste', handlePaste)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  window.removeEventListener('paste', handlePaste)
+  if (uploadedImageUrl.value && uploadedImageUrl.value.startsWith('blob:')) {
+    URL.revokeObjectURL(uploadedImageUrl.value)
+  }
+  if (resultImageBlobUrl.value) {
+    URL.revokeObjectURL(resultImageBlobUrl.value)
+  }
+  if (fabricCanvas) {
+    fabricCanvas.dispose()
+    fabricCanvas = null
+  }
+})
+
+const triggerFileInput = () => {
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+    fileInputRef.value.click()
+  }
+}
+
+const handleFileSelect = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (file) {
+    processFile(file)
+  }
+}
+
+const hasFiles = (event: DragEvent) => {
+  const types = event.dataTransfer?.types
+  if (!types) return false
+  return Array.from(types).includes('Files')
+}
+
+const handleDragEnter = (event: DragEvent) => {
+  if (!hasFiles(event)) return
+  dragCounter.value += 1
+  isDragging.value = true
+}
+
+const handleDragOver = (event: DragEvent) => {
+  if (!hasFiles(event)) return
+  event.dataTransfer!.dropEffect = 'copy'
+  isDragging.value = true
+}
+
+const handleDragLeave = (event: DragEvent) => {
+  if (!hasFiles(event)) return
+  dragCounter.value = Math.max(0, dragCounter.value - 1)
+  if (dragCounter.value === 0) {
+    isDragging.value = false
+  }
+}
+
+const handleDrop = (event: DragEvent) => {
+  if (!hasFiles(event)) return
+  event.preventDefault()
+  dragCounter.value = 0
+  isDragging.value = false
+  const file = event.dataTransfer?.files[0]
+  if (file && file.type.startsWith('image/')) {
+    processFile(file)
+  } else {
+    message.warning(t('Please upload an image file'))
+  }
+}
+
+const processFile = async (file: File) => {
+  const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
+  if (!validTypes.includes(file.type)) {
+    message.warning(t('Unsupported image format. Please use JPG, PNG, or WebP'))
+    return
+  }
+
+  const maxSize = 10 * 1024 * 1024
+  if (file.size > maxSize) {
+    message.warning(t('Image size exceeds 10MB limit'))
+    return
+  }
+
+  try {
+    const compressedFile = await compressImageFile(file, {
+      maxWidth: 1024,
+      maxHeight: 1024,
+      quality: 0.92,
+      mode: 'contain'
+    })
+    
+    uploadedImage.value = compressedFile
+    resultImage.value = ''
+    currentHistoryIndex.value = -1
+    
+    const reader = new FileReader()
+    reader.onload = async (e) => {
+      uploadedImageUrl.value = e.target?.result as string
+      await initializeCanvas()
+    }
+    reader.readAsDataURL(compressedFile)
+  } catch (error) {
+    message.error(t('Image processing failed, please try again'))
+  }
+}
+
+const initializeCanvas = async () => {
+  if (!canvasRef.value || !uploadedImageUrl.value) {
+    processing.value = false
+    return
+  }
+  
+  try {
+    await nextTick()
+    
+    // Clean up old canvas
+    if (fabricCanvas) {
+      fabricCanvas.dispose()
+      fabricCanvas = null
+    }
+    
+    // Create new fabric canvas
+    fabricCanvas = new Canvas(canvasRef.value, {
+      selection: false
+    })
+    
+    // Load image using fabric v7 API
+    const img = await FabricImage.fromURL(uploadedImageUrl.value, {
+      crossOrigin: 'anonymous'
+    })
+    
+    if (!img || !fabricCanvas) {
+      processing.value = false
+      return
+    }
+    
+    const previewSection = canvasRef.value?.closest('.preview-section') as HTMLElement
+    if (!previewSection) {
+      processing.value = false
+      return
+    }
+    
+    const previewRect = previewSection.getBoundingClientRect()
+    const padding = 100
+    const maxAvailableWidth = Math.max(400, previewRect.width - padding)
+    const maxAvailableHeight = Math.max(400, previewRect.height - 300)
+    
+    const imgWidth = img.width || 1
+    const imgHeight = img.height || 1
+    
+    const scale = Math.min(
+      maxAvailableWidth / imgWidth,
+      maxAvailableHeight / imgHeight,
+      1
+    )
+    
+    img.scale(scale)
+    
+    const canvasWidth = img.getScaledWidth()
+    const canvasHeight = img.getScaledHeight()
+    
+    // Use setDimensions for fabric v7
+    fabricCanvas.setDimensions({ width: canvasWidth, height: canvasHeight })
+    
+    img.set({
+      left: 0,
+      top: 0,
+      selectable: false,
+      evented: false
+    })
+    
+    fabricCanvas.add(img)
+    fabricCanvas.centerObject(img)
+    fabricCanvas.renderAll()
+    
+    processing.value = false
+  } catch (error) {
+    console.error('Canvas initialization error:', error)
+    message.error(t('Failed to load image'))
+    processing.value = false
+  }
+}
+
+const validateHexColor = () => {
+  const hex = backgroundColor.value.trim()
+  const isValid = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(hex)
+  isColorValid.value = isValid
+  return isValid
+}
+
+const applyBackgroundColor = async () => {
+  if (!fabricCanvas || !uploadedImage.value) {
+    message.warning(t('Please upload an image first'))
+    return
+  }
+  
+  if (!validateHexColor()) {
+    message.warning(t('Please enter a valid hex color code'))
+    return
+  }
+
+  processing.value = true
+  resultImage.value = ''
+
+  try {
+    const objects = fabricCanvas.getObjects()
+    
+    if (objects.length === 0) {
+      throw new Error('No image found on canvas')
+    }
+    
+    // Set background color using fabric v7 API
+    fabricCanvas.backgroundColor = backgroundColor.value
+    fabricCanvas.renderAll()
+    
+    // Export to data URL using fabric v7 API
+    const dataUrl = fabricCanvas.toDataURL({
+      format: 'png',
+      quality: 0.95,
+      multiplier: 1
+    })
+    
+    resultImage.value = dataUrl
+    await cacheResultImage(dataUrl)
+    
+    // Add to history
+    if (currentHistoryIndex.value === -1 && uploadedImage.value && uploadedImageUrl.value) {
+      const historyItem: HistoryItem = {
+        id: `history-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        originalImageUrl: uploadedImageUrl.value,
+        originalImageFile: uploadedImage.value,
+        resultImage: dataUrl,
+        backgroundColor: backgroundColor.value,
+        timestamp: Date.now()
+      }
+      historyList.value.unshift(historyItem)
+      currentHistoryIndex.value = 0
+    } else if (currentHistoryIndex.value >= 0) {
+      historyList.value[currentHistoryIndex.value].resultImage = dataUrl
+      historyList.value[currentHistoryIndex.value].backgroundColor = backgroundColor.value
+    }
+    
+    message.success(t('Background applied successfully'))
+    
+  } catch (error: any) {
+    console.error('Apply background error:', error)
+    message.error(error.message || t('Failed to apply background'))
+  } finally {
+    processing.value = false
+  }
+}
+
+const resetUpload = () => {
+  if (uploadedImageUrl.value && uploadedImageUrl.value.startsWith('blob:')) {
+    URL.revokeObjectURL(uploadedImageUrl.value)
+  }
+  if (resultImageBlobUrl.value) {
+    URL.revokeObjectURL(resultImageBlobUrl.value)
+    resultImageBlobUrl.value = ''
+  }
+  if (fabricCanvas) {
+    fabricCanvas.dispose()
+    fabricCanvas = null
+  }
+  uploadedImage.value = null
+  uploadedImageUrl.value = ''
+  resultImage.value = ''
+  imageUrl.value = ''
+  backgroundColor.value = '#FFFFFF'
+  currentHistoryIndex.value = -1
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+  }
+}
+
+const selectHistoryItem = async (index: number) => {
+  if (index < 0 || index >= historyList.value.length) return
+  
+  const item = historyList.value[index]
+  currentHistoryIndex.value = index
+  uploadedImageUrl.value = item.originalImageUrl
+  resultImage.value = item.resultImage
+  backgroundColor.value = item.backgroundColor
+  uploadedImage.value = item.originalImageFile
+  
+  if (item.resultImage) {
+    await cacheResultImage(item.resultImage)
+  }
+  
+  await initializeCanvas()
+}
+
+const getHistoryThumbnailUrl = (item: HistoryItem): string => {
+  if (item.resultImage) {
+    return item.resultImage
+  }
+  return item.originalImageUrl
+}
+
+const cacheResultImage = async (imageUrl: string) => {
+  try {
+    if (resultImageBlobUrl.value) {
+      URL.revokeObjectURL(resultImageBlobUrl.value)
+      resultImageBlobUrl.value = ''
+    }
+    
+    const response = await fetch(imageUrl)
+    if (!response.ok) {
+      throw new Error(`Failed to fetch image: ${response.status}`)
+    }
+    const blob = await response.blob()
+    resultImageBlobUrl.value = URL.createObjectURL(blob)
+  } catch (error) {
+    // Cache failure doesn't affect display
+  }
+}
+
+const handleDownload = async () => {
+  if (!resultImage.value) return
+
+  try {
+    let blobUrl = resultImageBlobUrl.value
+    
+    if (!blobUrl) {
+      const response = await fetch(resultImage.value)
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      const blob = await response.blob()
+      blobUrl = URL.createObjectURL(blob)
+      resultImageBlobUrl.value = blobUrl
+    }
+    
+    const link = document.createElement('a')
+    link.href = blobUrl
+    link.download = `background-added-${Date.now()}.png`
+    link.style.display = 'none'
+    
+    document.body.appendChild(link)
+    link.click()
+    
+    requestAnimationFrame(() => {
+      document.body.removeChild(link)
+    })
+  } catch (error: any) {
+    message.error(t('Failed to download image'))
+  }
+}
+
+const removeHistoryItem = (index: number) => {
+  if (index < 0 || index >= historyList.value.length) return
+
+  const removingCurrent = currentHistoryIndex.value === index
+  historyList.value.splice(index, 1)
+
+  if (historyList.value.length === 0) {
+    currentHistoryIndex.value = -1
+    resetUpload()
+    return
+  }
+
+  if (removingCurrent) {
+    const nextIndex = Math.min(index, historyList.value.length - 1)
+    selectHistoryItem(nextIndex)
+  } else if (currentHistoryIndex.value > index) {
+    currentHistoryIndex.value -= 1
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.add-background-page {
+  position: relative;
+  width: calc(100% + 40px);
+  height: calc(100vh - 64px - 40px);
+  margin: -20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.global-drag-overlay {
+  position: fixed;
+  inset: 0;
+  background: radial-gradient(circle at center, rgba(248, 250, 252, 0.92), rgba(248, 250, 252, 0.82));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  pointer-events: none;
+  animation: fade-in 0.15s ease;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 55vmax;
+    height: 55vmax;
+    border-radius: 35%;
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    animation: rotate 12s linear infinite;
+    pointer-events: none;
+  }
+}
+
+.overlay-content {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 18px 30px;
+  color: #0f172a;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  letter-spacing: 0.04em;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -10px;
+    border-radius: 999px;
+    border: 1px solid rgba(79, 70, 229, 0.35);
+    opacity: 0.7;
+    animation: pulse-line 1.8s ease-out infinite;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: -28px 16px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, rgba(59, 130, 246, 0), rgba(59, 130, 246, 0.24), rgba(59, 130, 246, 0));
+    filter: blur(10px);
+    opacity: 0.65;
+    animation: shimmer 2.4s linear infinite;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse-line {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1.05);
+    opacity: 0;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+
+.page-header {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 12px 36px;
+}
+
+.page-content {
+  flex: 1;
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.page-header h2 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.toolbar-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.toolbar-btn {
+  width: 36px;
+  height: 36px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: white;
+  color: #64748b;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  i {
+    font-size: 14px;
+  }
+
+  &:hover {
+    border-color: #1fc76f;
+    color: #1fc76f;
+    background: #f0fdf4;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.tool-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.upload-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e5e7eb;
+}
+
+.upload-section:has(.preview-section) {
+  padding: 0;
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+  background: transparent;
+}
+
+.upload-area {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed #cbd5e1;
+  border-radius: 12px;
+  padding: 48px 32px;
+  text-align: center;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: #fafbfc;
+  min-height: 0;
+  position: relative;
+
+  &:hover {
+    border-color: #1fc76f;
+    background: #f0fdf4;
+  }
+
+  &.dragging {
+    border-color: #1fc76f;
+    background: #ecfdf5;
+    border-style: solid;
+  }
+}
+
+.upload-processing-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.95);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  border-radius: 12px;
+  backdrop-filter: blur(4px);
+  z-index: 10;
+
+  p {
+    font-size: 14px;
+    color: #64748b;
+    margin: 0;
+    font-weight: 500;
+  }
+}
+
+.upload-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  max-width: 500px;
+}
+
+.upload-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 40px;
+  background: #e6f8f0;
+  color: #0d684b;
+  border: 1px solid #1fc76f;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+
+  i {
+    font-size: 16px;
+  }
+
+  &:hover:not(:disabled) {
+    background: #dcfce7;
+    border-color: #1fc76f;
+    color: #166534;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15);
+  }
+
+  &:active:not(:disabled) {
+    background: #1fc76f;
+    border-color: #1fc76f;
+    color: white;
+    transform: translateY(0);
+    box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background: #f1f5f9;
+    border-color: #e2e8f0;
+    color: #94a3b8;
+  }
+
+  &:disabled:hover {
+    transform: none;
+    box-shadow: none;
+  }
+}
+
+.divider {
+  display: flex;
+  align-items: center;
+  color: #94a3b8;
+  font-size: 13px;
+  width: 100%;
+  max-width: 300px;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: #e5e7eb;
+  }
+
+  span {
+    padding: 0 12px;
+  }
+}
+
+.upload-hint {
+  font-size: 13px;
+  color: #64748b;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.upload-format-hint {
+  font-size: 12px;
+  color: #94a3b8;
+  margin: 0;
+}
+
+.url-input-wrapper {
+  width: 100%;
+  max-width: 500px;
+}
+
+.url-input {
+  width: 100%;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 12px 16px;
+  font-size: 14px;
+  color: #1f2937;
+  background: white;
+  outline: none;
+  transition: all 0.2s ease;
+
+  &::placeholder {
+    color: #94a3b8;
+  }
+
+  &:focus {
+    border-color: #1fc76f;
+    box-shadow: 0 0 0 3px rgba(31, 199, 111, 0.1);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background: #f8fafc;
+  }
+}
+
+.preview-section {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+  padding: 12px;
+}
+
+.background-controls {
+  flex-shrink: 0;
+  padding: 20px;
+  background: #f8fafc;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.control-group {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.control-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #64748b;
+  min-width: 120px;
+}
+
+.color-picker-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.color-picker {
+  width: 48px;
+  height: 48px;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  cursor: pointer;
+  background: none;
+  
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+  
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 6px;
+  }
+}
+
+.hex-input {
+  width: 120px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 14px;
+  font-family: monospace;
+  color: #1f2937;
+  background: white;
+  outline: none;
+  transition: all 0.2s ease;
+
+  &:focus {
+    border-color: #1fc76f;
+    box-shadow: 0 0 0 3px rgba(31, 199, 111, 0.1);
+  }
+
+  &.invalid {
+    border-color: #ef4444;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  }
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: center;
+}
+
+.apply-btn {
+  padding: 12px 32px;
+  background: #1fc76f;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background: #16a34a;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(31, 199, 111, 0.3);
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(0);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+  }
+}
+
+.canvas-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: auto;
+  min-height: 400px;
+  padding: 20px;
+}
+
+.preview-canvas {
+  max-width: 100%;
+  max-height: 100%;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.canvas-processing-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  backdrop-filter: blur(4px);
+
+  p {
+    font-size: 14px;
+    color: #64748b;
+    margin: 0;
+  }
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #e5e7eb;
+  border-top-color: #1fc76f;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.history-bar {
+  flex-shrink: 0;
+  width: 100%;
+  padding: 12px 0;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+}
+
+.history-scroll-container {
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0;
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
+
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
+
+    &:hover {
+      background: #94a3b8;
+    }
+  }
+}
+
+.history-item {
+  flex-shrink: 0;
+  width: 56px;
+  height: 56px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+
+  &.add-button {
+    background: white;
+    border: 2px dashed #cbd5e1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #64748b;
+    transition: all 0.2s ease;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    i {
+      font-size: 24px;
+      pointer-events: none;
+    }
+
+    &:hover {
+      border-color: #1fc76f;
+      color: #1fc76f;
+      background: #f0fdf4;
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: #1fc76f;
+    }
+  }
+
+  &.active {
+    .history-thumbnail {
+      border-color: #1fc76f;
+      box-shadow: 0 0 10px rgba(31, 199, 111, 0.35);
+    }
+  }
+}
+
+.history-thumbnail {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  border: 2px solid #e5e7eb;
+  overflow: hidden;
+  position: relative;
+  background: 
+    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
+    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
+    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
+  background-size: 10px 10px;
+  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
+  transition: all 0.2s ease;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+  }
+
+  &:hover {
+    border-color: #1fc76f;
+  }
+
+  .history-delete-btn {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 18px;
+    height: 18px;
+    border-radius: 999px;
+    border: none;
+    background: rgba(15, 23, 42, 0.6);
+    color: white;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transform: scale(0.9);
+    transition: all 0.2s ease;
+    cursor: pointer;
+    font-size: 0;
+    line-height: 1;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: 10px;
+      height: 2px;
+      background: white;
+      border-radius: 999px;
+    }
+
+    &::before {
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      transform: rotate(-45deg);
+    }
+
+    &:hover {
+      background: rgba(239, 68, 68, 0.85);
+    }
+  }
+
+  &:hover .history-delete-btn {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (max-width: 768px) {
+  .page-header {
+    padding: 10px 12px;
+  }
+
+  .page-header h2 {
+    font-size: 18px;
+  }
+
+  .page-content {
+    padding: 8px 12px;
+  }
+
+  .upload-section {
+    padding: 16px;
+  }
+
+  .upload-area {
+    padding: 32px 16px;
+  }
+
+  .upload-content {
+    gap: 14px;
+    max-width: 100%;
+  }
+
+  .upload-btn {
+    width: 100%;
+    justify-content: center;
+    padding: 18px 32px;
+    font-size: 15px;
+
+    i {
+      font-size: 15px;
+    }
+  }
+
+  .divider {
+    max-width: 100%;
+  }
+
+  .url-input-wrapper {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .url-input {
+    font-size: 12px;
+    padding: 6px 10px;
+  }
+
+  .preview-section {
+    padding: 8px;
+  }
+
+  .background-controls {
+    padding: 16px;
+  }
+
+  .control-group {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .control-label {
+    min-width: auto;
+  }
+
+  .color-picker-container {
+    width: 100%;
+  }
+
+  .hex-input {
+    flex: 1;
+  }
+
+  .history-bar {
+    padding: 10px 0;
+  }
+
+  .history-item {
+    width: 48px;
+    height: 48px;
+  }
+
+  .history-scroll-container {
+    gap: 8px;
+    padding: 0 8px;
+  }
+
+  .toolbar-btn {
+    width: 32px;
+    height: 32px;
+
+    i {
+      font-size: 12px;
+    }
+  }
+}
+</style>
\ No newline at end of file