diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..821b4ec
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,34 @@
+name: CI
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  test:
+    name: Test & Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test:run
+
+      - name: Type check
+        run: npx vue-tsc --noEmit
+
+      - name: Build
+        run: npm run build
diff --git a/package-lock.json b/package-lock.json
index ad3b42a..ed913ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "typescript": "^5.5.3",
         "vite": "^5.3.4",
         "vite-plugin-zip-pack": "^1.2.3",
+        "vitest": "^3.2.4",
         "vue-tsc": "^2.0.28"
       }
     },
@@ -425,9 +426,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
@@ -654,6 +655,24 @@
         "win32"
       ]
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -681,6 +700,131 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.4.tgz",
+      "integrity": "sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
+        "chai": "^5.2.0",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.4.tgz",
+      "integrity": "sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "3.2.4",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.17"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/mocker/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.4.tgz",
+      "integrity": "sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.2.4.tgz",
+      "integrity": "sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "3.2.4",
+        "pathe": "^2.0.3",
+        "strip-literal": "^3.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.2.4.tgz",
+      "integrity": "sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.4",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.4.tgz",
+      "integrity": "sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^4.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.4.tgz",
+      "integrity": "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.4",
+        "loupe": "^3.1.4",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/@volar/language-core": {
       "version": "2.4.0-alpha.18",
       "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.18.tgz",
@@ -860,6 +1004,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -903,6 +1057,43 @@
         "node": ">=8"
       }
     },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chai": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
+      "integrity": "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/check-error": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.3.tgz",
+      "integrity": "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -954,6 +1145,34 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -966,6 +1185,13 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -1011,6 +1237,16 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "license": "MIT"
     },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -1133,6 +1369,13 @@
       "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
       "dev": true
     },
+    "node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/jszip": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
@@ -1160,13 +1403,20 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/loupe": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
+      "integrity": "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/magic-string": {
-      "version": "0.30.10",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
-      "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
+        "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
     "node_modules/minimatch": {
@@ -1185,6 +1435,13 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/muggle-string": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
@@ -1233,6 +1490,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pathval": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.1.tgz",
+      "integrity": "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
@@ -1393,6 +1667,13 @@
       "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
       "dev": true
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -1402,6 +1683,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
+      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -1411,6 +1706,111 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.1.0.tgz",
+      "integrity": "sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^9.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/tinypool": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz",
+      "integrity": "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
+      "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.4.tgz",
+      "integrity": "sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1500,6 +1900,29 @@
         }
       }
     },
+    "node_modules/vite-node": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.4.tgz",
+      "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.4.1",
+        "es-module-lexer": "^1.7.0",
+        "pathe": "^2.0.3",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/vite-plugin-zip-pack": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/vite-plugin-zip-pack/-/vite-plugin-zip-pack-1.2.3.tgz",
@@ -1512,6 +1935,92 @@
         "vite": ">=2.x"
       }
     },
+    "node_modules/vitest": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.4.tgz",
+      "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/expect": "3.2.4",
+        "@vitest/mocker": "3.2.4",
+        "@vitest/pretty-format": "^3.2.4",
+        "@vitest/runner": "3.2.4",
+        "@vitest/snapshot": "3.2.4",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
+        "chai": "^5.2.0",
+        "debug": "^4.4.1",
+        "expect-type": "^1.2.1",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.2",
+        "std-env": "^3.9.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^0.3.2",
+        "tinyglobby": "^0.2.14",
+        "tinypool": "^1.1.1",
+        "tinyrainbow": "^2.0.0",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0",
+        "vite-node": "3.2.4",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@types/debug": "^4.1.12",
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "@vitest/browser": "3.2.4",
+        "@vitest/ui": "3.2.4",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@types/debug": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/vscode-uri": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
@@ -1557,6 +2066,23 @@
       "peerDependencies": {
         "typescript": ">=5.0.0"
       }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index c3cf143..25f5d26 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,9 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:run": "vitest run"
   },
   "dependencies": {
     "vue": "^3.4.33"
@@ -19,6 +21,7 @@
     "typescript": "^5.5.3",
     "vite": "^5.3.4",
     "vite-plugin-zip-pack": "^1.2.3",
+    "vitest": "^3.2.4",
     "vue-tsc": "^2.0.28"
   },
   "author": "Robert Phillips"
diff --git a/src/App.vue b/src/App.vue
index f942609..e8c23b8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,323 +3,32 @@
     <div v-if="error" class="error error--top">
       There was an error setting the rules, did you use an invalid header name
     </div>
-    <div
+    <FolderPanel
       v-if="data.folders"
-      class="folders"
-      :class="{ 'folders--compact': compact }"
-    >
-      <div class="folders__list">
-        <div class="folders__list__wrapper">
-          <h1 class="mb20 logo" :class="{ 'logo--compact': compact }">
-            <img src="/images/48_48.png" alt="Modbox" />
-            <span v-if="!compact">ModBox</span>
-          </h1>
-          <h3 v-if="!compact" class="mb10">Folders</h3>
-          <div v-if="!data.folders.length">No folders</div>
-
-          <Dragger
-            :folders="data.folders"
-            @moveFolder="moveFolder"
-            @toggleActive="toggleActive"
-            @setFolder="setFolder"
-            :activeFolder="activeFolder"
-            :showSettings="showSettings"
-            :compact="compact"
-          />
-
-          <button
-            class="mt10 mb20"
-            @click="addFolder"
-            title="Add folder"
-            :class="{
-              btn: !compact,
-              'btn-icon btn-icon--with--border': compact,
-            }"
-          >
-            <template v-if="compact">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                fill="currentColor"
-                class="bi bi-plus"
-                viewBox="0 0 16 16"
-              >
-                <path
-                  d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"
-                />
-              </svg>
-            </template>
-            <template v-else>
-              Add
-            </template>
-          </button>
-
-          <hr />
-
-          <div class="folders__list__settings">
-            <h3 v-if="!compact" class="mb10">Global</h3>
-            <div v-if="!compact" class="folders__list__item">
-              <button
-                class="folders__list__item__label"
-                @click="data.active = !data.active"
-              >
-                Rules enabled
-                <div class="badge">{{ totalActiveRules }}</div>
-              </button>
-              <div
-                class="toggle toggle--warning"
-                @click="data.active = !data.active"
-                :class="{ 'toggle--active': data.active }"
-              >
-                <div class="toggle__text">
-                  {{ data.active ? "On" : "Off" }}
-                </div>
-              </div>
-            </div>
-            
-            <div
-              class="folders__list__item"
-              :class="{
-                'folders__list__item--active': showSettings,
-                'folders__list__item--compact': compact,
-              }"
-            >
-              <button
-                class="folders__list__item__label"
-                @click="showSettings = true"
-                title="Global settings"
-              >
-                <template v-if="!compact">Settings</template>
-                <template v-else>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    fill="currentColor"
-                    class="bi bi-gear-wide-connected"
-                    viewBox="0 0 16 16"
-                  >
-                    <path
-                      d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5m0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78zM5.048 3.967l-.087.065zm-.431.355A4.98 4.98 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8zm.344 7.646.087.065z"
-                    />
-                  </svg>
-                </template>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="folders__detail" :class="{ 'folders__detail--compact': compact }">
-        <div v-if="!showSettings" v-for="(folder, index) in data.folders">
-          <Folder
-            v-if="index === activeFolder"
-            :folder="folder"
-            @deleteFolder="deleteFolder"
-            @cloneFolder="cloneFolder"
-            @toggleActive="toggleActive"
-          />
-        </div>
-        <div v-else>
-          <div class="folder__header mb10">
-            <h3>Settings</h3>
-          </div>
-
-          <div class="panel panel--large mb20"> 
-            <h3 class="mb10">Compact mode <div class="tag">New</div></h3>
-            <p class="mb20">
-              If you need a bit more space to work with your rules, compact mode reduces the left hand column width.
-            </p>
-
-            <div class="panel__actions">
-              <button @click="setCompact" class="btn">
-                {{ compact ? "Disable compact mode" : "Enable compact mode" }}
-              </button>
-            </div>
-          </div>
-
-          <div class="panel panel--large">
-            <h3 class="mb10">
-              Export
-              <div class="tag">New</div>
-            </h3>
-            <p class="mb20">
-              You can export your rules into .json packages to backup, or send
-              to friends/colleagues. Check the folders you want and click
-              export.
-            </p>
-
-            <div class="mb20">
-              <label
-                class="checkbox"
-                :class="{ 'checkbox--active': selectedExport.includes(index) }"
-                v-for="(folder, index) in data.folders"
-              >
-                <input
-                  type="checkbox"
-                  v-model="selectedExport"
-                  :value="index"
-                />
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  fill="currentColor"
-                  class="bi bi-check"
-                  viewBox="0 0 16 16"
-                >
-                  <path
-                    d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"
-                  />
-                </svg>
-                {{ folder.name }}
-              </label>
-            </div>
-
-            <div class="panel__actions">
-              <button
-                class="btn"
-                @click="download"
-                :disabled="!selectedExport.length"
-              >
-                Export
-              </button>
-            </div>
-          </div>
-
-          <div class="panel panel--large">
-            <h3 class="mb10">
-              Import
-              <div class="tag">New</div>
-            </h3>
-            <p class="mb20">
-              You can select and import modbox backup files and append them to
-              your current set of folders, tabs and rules.
-            </p>
-
-            <div class="mb20">
-              <!-- <label for="file">Choose file to upload</label> -->
-              <input
-                type="file"
-                ref="fileupload"
-                accept=".json"
-                @change="onFileChange($event)"
-                class="file-upload"
-              />
-            </div>
-
-            <div v-if="importData.length" class="mb20">
-              <label
-                class="checkbox"
-                :class="{ 'checkbox--active': selectedImport.includes(index) }"
-                v-for="(folder, index) in importData"
-              >
-                <input
-                  type="checkbox"
-                  v-model="selectedImport"
-                  :value="index"
-                />
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  fill="currentColor"
-                  class="bi bi-check"
-                  viewBox="0 0 16 16"
-                >
-                  <path
-                    d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"
-                  />
-                </svg>
-                {{ folder.name }}
-              </label>
-            </div>
-
-            <div v-if="importError.length > 0" class="error mb20">
-              {{ importError }}
-            </div>
-
-            <div class="panel__actions btn-group">
-              <button
-                class="btn"
-                @click="clearImported"
-                :disabled="!importData.length"
-              >
-                Clear
-              </button>
-              <button
-                class="btn"
-                @click="appendImported"
-                :disabled="!selectedImport.length"
-              >
-                Append
-              </button>
-            </div>
-          </div>
-
-          <div class="panel panel--large mb20"> 
-            <div v-if="showDeleteConfirmation" class="panel__modal">
-              <h3 class="mb10">Confirm rules deletion</h3>
-              <div class="panel__modal__actions">
-                <button class="btn btn--danger" @click="reset">Delete</button>
-                <button class="btn" @click="showDeleteConfirmation = false">
-                  Cancel
-                </button>
-              </div>
-            </div>
-
-            <h3 class="mb10">Delete all rules</h3>
-            <p class="mb20">
-              If you want to totally reset all of your rules. This cannot be
-              undone so please use carefully.
-            </p>
-
-            <div class="panel__actions">
-              <button @click="showDeleteConfirmation = true" class="btn">
-                Delete all
-              </button>
-            </div>
-          </div>
-
-          <div class="panel panel--large">
-            <h3 class="mb10">About</h3>
-            <p class="mb20">
-              ModBox is a hobby project with the aim of providing developers and
-              hackers with a tool for testing and debugging.
-            </p>
-
-            <div class="panel__actions">
-              <a
-                href="https://www.linkedin.com/in/frontendrob/"
-                class="btn"
-                target="_blank"
-              >
-                LinkedIn
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+      :data="data"
+      :totalActiveRules="totalActiveRules"
+      @toggleGlobalActive="toggleGlobalActive"
+      @reset="reset"
+      @importFolders="importFolders"
+      @compactChanged="saveCompact"
+      @activeFolderChanged="saveActiveFolder"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import type { Ref } from "vue";
-import * as _ from "lodash";
 
-import { DataType, FolderType } from "./interaces";
+import { DataType, FolderType } from "./interfaces";
 import { generateRules, isChrome } from "./utils";
 
-import Folder from "./components/Folder.vue";
-import Dragger from "./components/FolderDragger.vue";
+import FolderPanel from "./components/FolderPanel.vue";
 
 /**
- * static variables
+ * Default data structure
  */
-
-const fallbackData = {
+const fallbackData: DataType = {
   active: true,
   folders: [
     {
@@ -341,214 +50,65 @@ const fallbackData = {
 };
 
 /**
- * reactive variables
+ * Reactive state
  */
-const fileupload: Ref<HTMLFormElement | null> = ref(null);
-
 const data: Ref<DataType> = ref({
   active: true,
   folders: [],
 });
 
-const activeFolder: Ref<number> = ref(0);
-const totalActiveRules: Ref<number> = ref(0);
+const totalActiveRules = ref(0);
 const error = ref(false);
-const compact = ref(false);
-const showSettings = ref(false);
-const showDeleteConfirmation = ref(false);
-const selectedExport: Ref<number[]> = ref([]);
-const selectedImport: Ref<number[]> = ref([]);
-
-const importData: Ref<FolderType[]> = ref([]);
-const importError = ref("");
 
 /**
- * methods
+ * Event handlers from FolderPanel
  */
-
-function clearImported() {
-  if (fileupload.value && fileupload.value.value) {
-    fileupload.value.value = null;
-  }
-
-  importError.value = "";
-  importData.value = [];
-  selectedImport.value = [];
+function toggleGlobalActive() {
+  data.value.active = !data.value.active;
 }
 
-function appendImported() {
-  if (fileupload.value && fileupload.value.value) {
-    fileupload.value.value = null;
-  }
-
-  let selectedFolders: FolderType[] = [];
-
-  importData.value.forEach((folder: FolderType, index: number) => {
-    if (selectedImport.value.includes(index)) {
-      selectedFolders.push(folder);
-    }
-  });
-
-  data.value.folders.push(...selectedFolders);
-
-  importError.value = "";
-  importData.value = [];
-  selectedImport.value = [];
-}
-
-function onFileChange(e: any) {
-  const file = e.target.files[0];
-
-  const fr = new FileReader();
-
-  fr.onload = (e: any) => {
-    try {
-      const payload = JSON.parse(e.target.result);
-
-      if (
-        payload.name === "modbox" &&
-        payload.version === 1 &&
-        payload.folders
-      ) {
-        importData.value = payload.folders;
-      } else {
-        // throw Error("not modbox or version version");
-        importError.value = "We don't think this is a modbox backup file";
-      }
-    } catch (error) {
-      // console.log(error);
-      importError.value = "we had an unexpected error during import";
-    }
-  };
-  fr.readAsText(file);
-}
-
-function download() {
-  let exportData: FolderType[] = [];
-
-  data.value.folders.forEach((folder: FolderType, index: number) => {
-    if (selectedExport.value.includes(index)) {
-      exportData.push(folder);
-    }
-  });
-
-  const payload = {
-    name: "modbox",
-    version: 1,
-    folders: exportData,
-  };
-
-  const json = JSON.stringify(payload);
-  const blob = new Blob([json], { type: "application/json" });
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement("a");
-
-  anchor.href = url;
-  anchor.download = `modbox-export-${Math.floor(Date.now() / 1000)}.json`;
-  document.body.appendChild(anchor);
-  anchor.click();
-  document.body.removeChild(anchor);
-
-  selectedExport.value = [];
+function reset() {
+  data.value = { ...fallbackData };
 }
 
-// move the position of a folder
-function moveFolder(from: number, to: number) {
-  const folder = data.value.folders[from];
-
-  data.value.folders.splice(from, 1);
-  data.value.folders.splice(to, 0, folder);
-
-  setFolder(to, false);
+function importFolders(folders: FolderType[]) {
+  data.value.folders.push(...folders);
 }
 
-function toggleActive(folder: FolderType) {
-  folder.active = !folder.active;
+function saveCompact(compact: boolean) {
+  if (isChrome) {
+    chrome.storage.local.set({ compact: `${compact}` }).then(() => {
+      console.log("Chrome storage compact set");
+    });
+  } else {
+    window.localStorage.setItem("compact", `${compact}`);
+  }
 }
 
-function setFolder(index: number, saveTab: Boolean = true) {
-  activeFolder.value = index;
-  showSettings.value = false;
-
+function saveActiveFolder(index: number, saveTab: boolean) {
   if (isChrome) {
-    chrome.storage.local
-      .set({ activeFolder: `${activeFolder.value}` })
-      .then(() => {
-        console.log("Chrome storage activeFolder set");
-      });
-
+    chrome.storage.local.set({ activeFolder: `${index}` }).then(() => {
+      console.log("Chrome storage activeFolder set");
+    });
     if (saveTab) {
       chrome.storage.local.set({ activeTab: "0" }).then(() => {
         console.log("Chrome storage activeTab set");
       });
     }
   } else {
-    window.localStorage.setItem("activeFolder", `${activeFolder.value}`);
+    window.localStorage.setItem("activeFolder", `${index}`);
     if (saveTab) {
       window.localStorage.setItem("activeTab", "0");
     }
   }
 }
 
-function setCompact() {
-  compact.value = !compact.value;
-
-  if (isChrome) {
-    chrome.storage.local.set({ compact: `${compact.value}` }).then(() => {
-      console.log("Chrome storage compact set");
-    });
-  } else {
-    window.localStorage.setItem("compact", `${compact.value}`);
-  }
-}
-
-function cloneFolder(folder: FolderType) {
-  data.value.folders.push({ ..._.cloneDeep(folder), name: "Cloned folder" });
-
-  setFolder(data.value.folders.length - 1);
-}
-
-function reset() {
-  data.value = { ...fallbackData };
-  showSettings.value = false;
-  showDeleteConfirmation.value = false;
-
-  setFolder(0);
-  // save();
-}
-
-function addFolder() {
-  data.value.folders?.push({
-    name: "New folder",
-    active: true,
-    tabs: [
-      {
-        name: "default tab",
-        active: true,
-        requestDomains: "",
-        requestHeaders: [],
-        responseHeaders: [],
-        blockedRequests: [],
-        redirectRequests: [],
-      },
-    ],
-  });
-
-  setFolder(data.value.folders.length - 1);
-}
-
-function deleteFolder(targetFolder: FolderType) {
-  data.value.folders = data.value.folders.filter(
-    (folder) => folder !== targetFolder
-  );
-
-  setFolder(0);
-}
-
+/**
+ * Data persistence
+ */
 async function save() {
   const activeRules = generateRules(data.value);
   totalActiveRules.value = activeRules.length;
-  console.log(activeRules);
 
   if (isChrome) {
     const oldRules = await chrome.declarativeNetRequest.getDynamicRules();
@@ -559,24 +119,16 @@ async function save() {
         removeRuleIds: oldRuleIds,
         addRules: activeRules,
       });
-
       error.value = false;
     } catch (e) {
       error.value = true;
-      console.log(e);
+      console.error(e);
     }
 
-    chrome.storage.local.set({ rules: JSON.stringify(data.value) }).then(() => {
-      console.log("Chrome storage rules set");
-    });
-
-    chrome.storage.local
-      .set({ totalActiveRules: `${activeRules.length}` })
-      .then(() => {
-        console.log("Chrome storage totalActiveRules set");
-      });
+    chrome.storage.local.set({ rules: JSON.stringify(data.value) });
+    chrome.storage.local.set({ totalActiveRules: `${activeRules.length}` });
 
-    // set badge
+    // Update badge
     chrome.action.setBadgeBackgroundColor({ color: "blue" });
     chrome.action.setBadgeText({
       text: totalActiveRules.value > 0 ? `${totalActiveRules.value}` : "",
@@ -586,72 +138,37 @@ async function save() {
   }
 }
 
-async function getData() {
-  const chromeData = await chrome.storage.local.get(["rules", "activeFolder", "compact"]);
-
-  if (chromeData.rules) {
-    console.log("restore rules from chrome storage");
-    data.value = JSON.parse(chromeData.rules);
-    // save();
+async function loadData() {
+  if (isChrome) {
+    const chromeData = await chrome.storage.local.get(["rules"]);
+    if (chromeData.rules) {
+      data.value = JSON.parse(chromeData.rules);
+    } else {
+      data.value = fallbackData;
+    }
   } else {
-    console.log("nothing to restore from chrome");
-    data.value = fallbackData;
-  }
-
-  if (chromeData.activeFolder) {
-    activeFolder.value = parseInt(chromeData.activeFolder);
-  }
-
-  if (chromeData.compact) {
-    compact.value = chromeData.compact === "true";
+    const rules = window.localStorage.getItem("rules");
+    if (rules) {
+      data.value = JSON.parse(rules);
+    } else {
+      data.value = fallbackData;
+    }
   }
 }
 
 /**
- * watch
+ * Watchers
  */
-
 watch(
   () => data,
-  () => {
-    save();
-  },
+  () => save(),
   { deep: true }
 );
 
 /**
- * lifecycle hooks
+ * Lifecycle
  */
-
 onMounted(() => {
-  if (isChrome) {
-    getData();
-  } else {
-    const rules = window.localStorage.getItem("rules");
-    const af = window.localStorage.getItem("activeFolder");
-    const cp = window.localStorage.getItem("compact");
-
-    if (rules) {
-      console.log("restore data from ls");
-      data.value = JSON.parse(rules);
-    } else {
-      console.log("nothing to restore from ls");
-      data.value = fallbackData;
-    }
-
-    if (af) {
-      activeFolder.value = parseInt(af);
-    }
-
-    if (cp) {
-      compact.value = cp === "true";
-    }
-
-    // if(rules || af) {
-    //   save()
-    // }
-  }
-
-  // save()
+  loadData();
 });
 </script>
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index ac66705..a163402 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -7,7 +7,7 @@
       </svg>
     </button>
     <div v-show="isOpen" class="dropdown__menu">
-      <button v-for="option in options" @click="option.action ? option.action() : set(option.value)" class="dropdown__menu__item" :class="{'dropdown__menu__item--active' : model === option.value}">
+      <button v-for="(option, index) in options" :key="index" @click="option.action ? option.action() : set(option.value)" class="dropdown__menu__item" :class="{'dropdown__menu__item--active' : model === option.value}">
         {{ option.label }}
       </button>
     </div>
@@ -17,10 +17,11 @@
 <script setup lang="ts">
 import { ref, toRefs, computed } from "vue";
 import type { Ref, PropType } from "vue";
+import { useOutsideClick } from "../composables";
 
 const model = defineModel();
 const root: Ref<HTMLElement | null> = ref(null);
-const isOpen = ref(false);
+const { isOpen, toggle, close } = useOutsideClick(root);
 
 interface Option {
   label: string,
@@ -39,53 +40,20 @@ const propRefs = toRefs(props);
 const options = propRefs.options;
 
 const defaultOption = computed(() => {
-  // if(!options) {
-  //   return {
-  //     label: "empty",
-  //     value: "empty"
-  //   }
-  // }
-  // console.log(model.value);
   if(typeof model.value !== "undefined" && model.value !== "") {
     return options.value.find(option => option.value === model.value)
   }
   
   return options.value[0]
-
-  // return {
-  //     label: "empty",
-  //     value: "empty"
-  //   }
 })
 
 /**
  * functions
  */
 
-function toggle() {
-  isOpen.value = !isOpen.value;
-
-  if (isOpen.value) {
-    window.addEventListener("click", outsideClick)
-  } else {
-    window.removeEventListener("click", outsideClick)
-  }
-}
-
-function close() {
-  isOpen.value = false;
-  window.removeEventListener("click", outsideClick)
-}
-
-function outsideClick(e: any) {
-  if (!root.value?.contains(e.target)) {
-    close();
-  }
-}
-
 function set(val: string | boolean) {
   model.value = val;
-  isOpen.value = false;
+  close();
 }
 
 </script>
diff --git a/src/components/DropdownMenu.vue b/src/components/DropdownMenu.vue
index 9248730..0ac6062 100644
--- a/src/components/DropdownMenu.vue
+++ b/src/components/DropdownMenu.vue
@@ -6,7 +6,7 @@
       </svg>
     </button>
     <div v-show="isOpen" class="dropdown__menu">
-      <div v-for="(option, index) in options" class="dropdown__menu__wrapper">
+      <div v-for="(option, index) in options" :key="index" class="dropdown__menu__wrapper">
         <button @click="handleClick(option, index, false)" class="dropdown__menu__item">
           {{ option.label }}
         </button>
@@ -22,13 +22,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs } from "vue";
+import { ref, toRefs, watch } from "vue";
 import type { Ref, PropType } from "vue";
+import { useOutsideClick } from "../composables";
 
 const root: Ref<HTMLElement | null> = ref(null);
-const isOpen = ref(false);
+const { isOpen, toggle, close } = useOutsideClick(root);
 const confirmationOpen = ref(-1);
 
+// Reset confirmation when dropdown closes
+watch(isOpen, (newVal) => {
+  if (!newVal) {
+    confirmationOpen.value = -1;
+  }
+});
+
 interface Option {
   label: String,
   action: Function,
@@ -62,30 +70,8 @@ function handleClick(option: Option, index: number, override: Boolean) {
   else {
     confirmationOpen.value = -1;
     option.action(rule.value);
-    isOpen.value = false
-  }
- }
-
-function toggle() {
-  isOpen.value = !isOpen.value;
-
-  if (isOpen.value) {
-    window.addEventListener("click", outsideClick)
-  } else {
-    window.removeEventListener("click", outsideClick)
-  }
-}
-
-function close() {
-  isOpen.value = false;
-  confirmationOpen.value = -1;
-  window.removeEventListener("click", outsideClick)
-}
-
-function outsideClick(e: any) {
-  if (!root.value?.contains(e.target)) {
     close();
   }
-}
+ }
 
 </script>
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index b981f50..f5d87e7 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -26,7 +26,7 @@
       </button>
 
       <Tooltip v-if="splitDomains.length > 1" :trigger="splitDomains.length - 1">
-        <div v-for="domain in splitDomains">{{ cleanDomain(domain) }}</div>
+        <div v-for="(domain, idx) in splitDomains" :key="idx">{{ cleanDomain(domain) }}</div>
       </Tooltip>
       
       <button v-if="!splitDomains.length" @click="edit" class="editor__trigger">
diff --git a/src/components/Folder.vue b/src/components/Folder.vue
index bc93c23..cdab543 100644
--- a/src/components/Folder.vue
+++ b/src/components/Folder.vue
@@ -77,7 +77,7 @@
       </div>
     </div>
 
-    <div v-for="(tab, index) in folder.tabs">
+    <div v-for="(tab, index) in folder.tabs" :key="`tab-${index}`">
       <Tab v-if="index === activeTab" :tab="tab" @deleteTab="deleteTab" @cloneTab="cloneTab" />
     </div>
   </div>
@@ -91,7 +91,7 @@ import * as _ from "lodash";
 import { isChrome } from "../utils"
 import Tab from "./Tab.vue";
 import TabDragger from "./TabDragger.vue";
-import { TabType } from "../interaces";
+import { TabType } from "../interfaces";
 
 const props = defineProps({
   folder: {
diff --git a/src/components/FolderDragger.vue b/src/components/FolderDragger.vue
index af5e0ba..2ed8d1c 100644
--- a/src/components/FolderDragger.vue
+++ b/src/components/FolderDragger.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-for="(folder, index) in folders" class="folders__list__item"
+  <div v-for="(folder, index) in folders" :key="`folder-drag-${index}`" class="folders__list__item"
     :class="{ 
       'folders__list__item--active': index === activeFolder && !showSettings,
       'folders__list__item--bottom': index === target && target > tmp && target !== tmp,
@@ -37,7 +37,7 @@
 
 <script setup lang="ts">
 import { ref, toRefs, type PropType } from "vue";
-import { FolderType } from "../interaces";
+import { FolderType } from "../interfaces";
 
 const props = defineProps({
   folders: {
diff --git a/src/components/FolderPanel.vue b/src/components/FolderPanel.vue
new file mode 100644
index 0000000..c2a3a9e
--- /dev/null
+++ b/src/components/FolderPanel.vue
@@ -0,0 +1,266 @@
+<template>
+  <div
+    class="folders"
+    :class="{ 'folders--compact': compact }"
+  >
+    <!-- Sidebar -->
+    <div class="folders__list">
+      <div class="folders__list__wrapper">
+        <h1 class="mb20 logo" :class="{ 'logo--compact': compact }">
+          <img src="/images/48_48.png" alt="Modbox" />
+          <span v-if="!compact">ModBox</span>
+        </h1>
+        <h3 v-if="!compact" class="mb10">Folders</h3>
+        <div v-if="!data.folders.length">No folders</div>
+
+        <FolderDragger
+          :folders="data.folders"
+          @moveFolder="moveFolder"
+          @toggleActive="toggleActive"
+          @setFolder="setFolder"
+          :activeFolder="activeFolder"
+          :showSettings="showSettings"
+          :compact="compact"
+        />
+
+        <button
+          class="mt10 mb20"
+          @click="addFolder"
+          title="Add folder"
+          :class="{
+            btn: !compact,
+            'btn-icon btn-icon--with--border': compact,
+          }"
+        >
+          <template v-if="compact">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              class="bi bi-plus"
+              viewBox="0 0 16 16"
+            >
+              <path
+                d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"
+              />
+            </svg>
+          </template>
+          <template v-else>Add</template>
+        </button>
+
+        <hr />
+
+        <div class="folders__list__settings">
+          <h3 v-if="!compact" class="mb10">Global</h3>
+          <div v-if="!compact" class="folders__list__item">
+            <button
+              class="folders__list__item__label"
+              @click="$emit('toggleGlobalActive')"
+            >
+              Rules enabled
+              <div class="badge">{{ totalActiveRules }}</div>
+            </button>
+            <div
+              class="toggle toggle--warning"
+              @click="$emit('toggleGlobalActive')"
+              :class="{ 'toggle--active': data.active }"
+            >
+              <div class="toggle__text">
+                {{ data.active ? "On" : "Off" }}
+              </div>
+            </div>
+          </div>
+
+          <div
+            class="folders__list__item"
+            :class="{
+              'folders__list__item--active': showSettings,
+              'folders__list__item--compact': compact,
+            }"
+          >
+            <button
+              class="folders__list__item__label"
+              @click="showSettings = true"
+              title="Global settings"
+            >
+              <template v-if="!compact">Settings</template>
+              <template v-else>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  class="bi bi-gear-wide-connected"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5m0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78zM5.048 3.967l-.087.065zm-.431.355A4.98 4.98 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8zm.344 7.646.087.065z"
+                  />
+                </svg>
+              </template>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Detail Area -->
+    <div class="folders__detail" :class="{ 'folders__detail--compact': compact }">
+      <template v-if="!showSettings">
+        <div v-for="(folder, index) in data.folders" :key="`folder-${index}`">
+          <Folder
+            v-if="index === activeFolder"
+            :folder="folder"
+            @deleteFolder="deleteFolder"
+            @cloneFolder="cloneFolder"
+            @toggleActive="toggleActive"
+          />
+        </div>
+      </template>
+      <Settings
+        v-else
+        :folders="data.folders"
+        :compact="compact"
+        @toggleCompact="toggleCompact"
+        @reset="$emit('reset')"
+        @importFolders="importFolders"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, type PropType } from "vue";
+import * as _ from "lodash";
+
+import { DataType, FolderType } from "../interfaces";
+import { isChrome } from "../utils";
+
+import Folder from "./Folder.vue";
+import FolderDragger from "./FolderDragger.vue";
+import Settings from "./Settings.vue";
+
+const props = defineProps({
+  data: {
+    type: Object as PropType<DataType>,
+    required: true,
+  },
+  totalActiveRules: {
+    type: Number,
+    required: true,
+  },
+  initialActiveFolder: {
+    type: Number,
+    default: 0,
+  },
+  initialCompact: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  toggleGlobalActive: [];
+  reset: [];
+  importFolders: [folders: FolderType[]];
+  compactChanged: [compact: boolean];
+  activeFolderChanged: [index: number, saveTab: boolean];
+}>();
+
+/**
+ * Local state
+ */
+const activeFolder = ref(props.initialActiveFolder);
+const compact = ref(props.initialCompact);
+const showSettings = ref(false);
+
+/**
+ * Folder management
+ */
+function addFolder() {
+  props.data.folders.push({
+    name: "New folder",
+    active: true,
+    tabs: [
+      {
+        name: "default tab",
+        active: true,
+        requestDomains: "",
+        requestHeaders: [],
+        responseHeaders: [],
+        blockedRequests: [],
+        redirectRequests: [],
+      },
+    ],
+  });
+
+  setFolder(props.data.folders.length - 1);
+}
+
+function deleteFolder(targetFolder: FolderType) {
+  const index = props.data.folders.indexOf(targetFolder);
+  if (index > -1) {
+    props.data.folders.splice(index, 1);
+  }
+  setFolder(0);
+}
+
+function cloneFolder(folder: FolderType) {
+  props.data.folders.push({ ..._.cloneDeep(folder), name: "Cloned folder" });
+  setFolder(props.data.folders.length - 1);
+}
+
+function moveFolder(from: number, to: number) {
+  const folder = props.data.folders[from];
+  props.data.folders.splice(from, 1);
+  props.data.folders.splice(to, 0, folder);
+  setFolder(to, false);
+}
+
+function toggleActive(folder: FolderType) {
+  folder.active = !folder.active;
+}
+
+function setFolder(index: number, saveTab: boolean = true) {
+  activeFolder.value = index;
+  showSettings.value = false;
+  emit("activeFolderChanged", index, saveTab);
+}
+
+/**
+ * Settings
+ */
+function toggleCompact() {
+  compact.value = !compact.value;
+  emit("compactChanged", compact.value);
+}
+
+function importFolders(folders: FolderType[]) {
+  emit("importFolders", folders);
+}
+
+/**
+ * Restore active folder from storage
+ */
+onMounted(async () => {
+  if (isChrome) {
+    const chromeData = await chrome.storage.local.get(["activeFolder", "compact"]);
+    if (chromeData.activeFolder) {
+      activeFolder.value = parseInt(chromeData.activeFolder);
+    }
+    if (chromeData.compact) {
+      compact.value = chromeData.compact === "true";
+    }
+  } else {
+    const af = window.localStorage.getItem("activeFolder");
+    const cp = window.localStorage.getItem("compact");
+    if (af) {
+      activeFolder.value = parseInt(af);
+    }
+    if (cp) {
+      compact.value = cp === "true";
+    }
+  }
+});
+</script>
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
new file mode 100644
index 0000000..72858a4
--- /dev/null
+++ b/src/components/Settings.vue
@@ -0,0 +1,322 @@
+<template>
+  <div>
+    <div class="folder__header mb10">
+      <h3>Settings</h3>
+    </div>
+
+    <!-- Compact Mode -->
+    <div class="panel panel--large mb20">
+      <h3 class="mb10">Compact mode <div class="tag">New</div></h3>
+      <p class="mb20">
+        If you need a bit more space to work with your rules, compact mode reduces the left hand column width.
+      </p>
+
+      <div class="panel__actions">
+        <button @click="$emit('toggleCompact')" class="btn">
+          {{ compact ? "Disable compact mode" : "Enable compact mode" }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Export -->
+    <div class="panel panel--large mb20">
+      <h3 class="mb10">
+        Export
+        <div class="tag">New</div>
+      </h3>
+      <p class="mb20">
+        You can export your rules into .json packages to backup, or send
+        to friends/colleagues. Check the folders you want and click
+        export.
+      </p>
+
+      <div class="mb20">
+        <label
+          class="checkbox"
+          :class="{ 'checkbox--active': selectedExport.includes(index) }"
+          v-for="(folder, index) in folders"
+          :key="`export-${index}`"
+        >
+          <input
+            type="checkbox"
+            v-model="selectedExport"
+            :value="index"
+          />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-check"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"
+            />
+          </svg>
+          {{ folder.name }}
+        </label>
+      </div>
+
+      <div class="panel__actions">
+        <button
+          class="btn"
+          @click="download"
+          :disabled="!selectedExport.length"
+        >
+          Export
+        </button>
+      </div>
+    </div>
+
+    <!-- Import -->
+    <div class="panel panel--large mb20">
+      <h3 class="mb10">
+        Import
+        <div class="tag">New</div>
+      </h3>
+      <p class="mb20">
+        You can select and import modbox backup files and append them to
+        your current set of folders, tabs and rules.
+      </p>
+
+      <div class="mb20">
+        <input
+          type="file"
+          ref="fileupload"
+          accept=".json"
+          @change="onFileChange($event)"
+          class="file-upload"
+        />
+      </div>
+
+      <div v-if="importData.length" class="mb20">
+        <label
+          class="checkbox"
+          :class="{ 'checkbox--active': selectedImport.includes(index) }"
+          v-for="(folder, index) in importData"
+          :key="`import-${index}`"
+        >
+          <input
+            type="checkbox"
+            v-model="selectedImport"
+            :value="index"
+          />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-check"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"
+            />
+          </svg>
+          {{ folder.name }}
+        </label>
+      </div>
+
+      <div v-if="importError.length > 0" class="error mb20">
+        {{ importError }}
+      </div>
+
+      <div class="panel__actions btn-group">
+        <button
+          class="btn"
+          @click="clearImported"
+          :disabled="!importData.length"
+        >
+          Clear
+        </button>
+        <button
+          class="btn"
+          @click="appendImported"
+          :disabled="!selectedImport.length"
+        >
+          Append
+        </button>
+      </div>
+    </div>
+
+    <!-- Delete All -->
+    <div class="panel panel--large mb20">
+      <div v-if="showDeleteConfirmation" class="panel__modal">
+        <h3 class="mb10">Confirm rules deletion</h3>
+        <div class="panel__modal__actions">
+          <button class="btn btn--danger" @click="confirmReset">Delete</button>
+          <button class="btn" @click="showDeleteConfirmation = false">
+            Cancel
+          </button>
+        </div>
+      </div>
+
+      <h3 class="mb10">Delete all rules</h3>
+      <p class="mb20">
+        If you want to totally reset all of your rules. This cannot be
+        undone so please use carefully.
+      </p>
+
+      <div class="panel__actions">
+        <button @click="showDeleteConfirmation = true" class="btn">
+          Delete all
+        </button>
+      </div>
+    </div>
+
+    <!-- About -->
+    <div class="panel panel--large">
+      <h3 class="mb10">About</h3>
+      <p class="mb20">
+        ModBox is a hobby project with the aim of providing developers and
+        hackers a tool for testing and debugging.
+      </p>
+
+      <div class="panel__actions">
+        <a
+          href="https://www.linkedin.com/in/frontendrob/"
+          class="btn"
+          target="_blank"
+        >
+          My LinkedIn
+        </a>
+        <a
+          href="https://www.buymeacoffee.com/robphillips"
+          class="btn"
+          target="_blank"
+        >
+          Tip Jar
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, type PropType } from "vue";
+import type { Ref } from "vue";
+import { FolderType, isValidExportPayload } from "../interfaces";
+
+const props = defineProps({
+  folders: {
+    type: Array as PropType<FolderType[]>,
+    required: true,
+  },
+  compact: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const emit = defineEmits<{
+  toggleCompact: [];
+  reset: [];
+  importFolders: [folders: FolderType[]];
+}>();
+
+/**
+ * Reactive state
+ */
+const fileupload: Ref<HTMLFormElement | null> = ref(null);
+const selectedExport: Ref<number[]> = ref([]);
+const selectedImport: Ref<number[]> = ref([]);
+const importData: Ref<FolderType[]> = ref([]);
+const importError = ref("");
+const showDeleteConfirmation = ref(false);
+
+/**
+ * Export functionality
+ */
+function download() {
+  const exportData: FolderType[] = [];
+
+  props.folders.forEach((folder: FolderType, index: number) => {
+    if (selectedExport.value.includes(index)) {
+      exportData.push(folder);
+    }
+  });
+
+  const payload = {
+    name: "modbox",
+    version: 1,
+    folders: exportData,
+  };
+
+  const json = JSON.stringify(payload);
+  const blob = new Blob([json], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+
+  anchor.href = url;
+  anchor.download = `modbox-export-${Math.floor(Date.now() / 1000)}.json`;
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+
+  selectedExport.value = [];
+}
+
+/**
+ * Import functionality
+ */
+function onFileChange(e: Event) {
+  const target = e.target as HTMLInputElement;
+  const file = target.files?.[0];
+  
+  if (!file) return;
+
+  const fr = new FileReader();
+
+  fr.onload = (event) => {
+    try {
+      const result = event.target?.result;
+      if (typeof result !== 'string') return;
+      
+      const payload = JSON.parse(result);
+
+      if (!isValidExportPayload(payload)) {
+        importError.value = "Invalid file format. Please select a valid ModBox backup file.";
+        return;
+      }
+
+      importData.value = payload.folders;
+      importError.value = "";
+    } catch {
+      importError.value = "Failed to parse file. Please ensure it's a valid JSON file.";
+    }
+  };
+  fr.readAsText(file);
+}
+
+function clearImported() {
+  if (fileupload.value) {
+    fileupload.value.value = "";
+  }
+
+  importError.value = "";
+  importData.value = [];
+  selectedImport.value = [];
+}
+
+function appendImported() {
+  const selectedFolders: FolderType[] = [];
+
+  importData.value.forEach((folder: FolderType, index: number) => {
+    if (selectedImport.value.includes(index)) {
+      selectedFolders.push(folder);
+    }
+  });
+
+  emit("importFolders", selectedFolders);
+  clearImported();
+}
+
+/**
+ * Reset functionality
+ */
+function confirmReset() {
+  emit("reset");
+  showDeleteConfirmation.value = false;
+}
+</script>
diff --git a/src/components/Tab.vue b/src/components/Tab.vue
index fefc4b9..562fc0b 100644
--- a/src/components/Tab.vue
+++ b/src/components/Tab.vue
@@ -437,7 +437,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, computed, onMounted, nextTick } from "vue";
+import { ref, toRefs, computed, onMounted, onUnmounted, nextTick } from "vue";
 import type { Ref } from "vue";
 
 import Editor from "./Editor.vue";
@@ -769,4 +769,8 @@ onMounted(() => {
     });
   }
 });
+
+onUnmounted(() => {
+  clearTimeout(timer);
+});
 </script>
diff --git a/src/components/TabDragger.vue b/src/components/TabDragger.vue
index 5ad192f..5e9d908 100644
--- a/src/components/TabDragger.vue
+++ b/src/components/TabDragger.vue
@@ -1,6 +1,7 @@
 <template>
   <div 
     v-for="(tab, index) in tabs"
+    :key="`tab-drag-${index}`"
     class="tabs__tab"
     :class="{ 
       'tabs__tab--active': index === activeTab,
@@ -40,7 +41,7 @@
 
 <script setup lang="ts">
 import { ref, toRefs, type PropType } from "vue";
-import { TabType } from "../interaces";
+import { TabType } from "../interfaces";
 
 const props = defineProps({
   tabs: {
diff --git a/src/composables/index.ts b/src/composables/index.ts
new file mode 100644
index 0000000..2cd06ac
--- /dev/null
+++ b/src/composables/index.ts
@@ -0,0 +1,46 @@
+import { ref, onUnmounted, type Ref } from 'vue';
+
+/**
+ * Composable for handling dropdown/modal outside click behavior
+ * Provides toggle, open, close functions and isOpen state with automatic cleanup
+ */
+export function useOutsideClick(rootRef: Ref<HTMLElement | null>) {
+  const isOpen = ref(false);
+
+  function outsideClick(e: MouseEvent) {
+    if (rootRef.value && !rootRef.value.contains(e.target as Node)) {
+      close();
+    }
+  }
+
+  function open() {
+    isOpen.value = true;
+    window.addEventListener('click', outsideClick);
+  }
+
+  function close() {
+    isOpen.value = false;
+    window.removeEventListener('click', outsideClick);
+  }
+
+  function toggle() {
+    if (isOpen.value) {
+      close();
+    } else {
+      open();
+    }
+  }
+
+  // Cleanup on unmount
+  onUnmounted(() => {
+    window.removeEventListener('click', outsideClick);
+  });
+
+  return {
+    isOpen,
+    open,
+    close,
+    toggle
+  };
+}
+
diff --git a/src/interaces.ts b/src/interaces.ts
deleted file mode 100644
index 4dedcce..0000000
--- a/src/interaces.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export interface TabType {
-  name: string;
-  requestDomains?: string;
-  active: boolean;
-  requestHeaders?: any[];
-  responseHeaders?: any[];
-  blockedRequests?: any[];
-  redirectRequests?: any[];
-}
-
-export interface FolderType {
-  name: string;
-  active: boolean;
-  tabs: TabType[];
-}
-
-export interface DataType {
-  active: boolean;
-  folders: FolderType[];
-}
diff --git a/src/interfaces.test.ts b/src/interfaces.test.ts
new file mode 100644
index 0000000..54b47e6
--- /dev/null
+++ b/src/interfaces.test.ts
@@ -0,0 +1,453 @@
+import { describe, it, expect } from 'vitest';
+import {
+  isValidRuleCondition,
+  isValidHeaderRule,
+  isValidBlockedRequest,
+  isValidRedirectRequest,
+  isValidTab,
+  isValidFolder,
+  isValidExportPayload,
+  isValidDataType,
+} from './interfaces';
+
+describe('Type Guards', () => {
+  describe('isValidRuleCondition', () => {
+    it('returns true for valid condition', () => {
+      expect(isValidRuleCondition({
+        urlFilter: '*.js',
+        requestDomains: 'example.com',
+      })).toBe(true);
+    });
+
+    it('returns true for empty strings', () => {
+      expect(isValidRuleCondition({
+        urlFilter: '',
+        requestDomains: '',
+      })).toBe(true);
+    });
+
+    it('returns false for null', () => {
+      expect(isValidRuleCondition(null)).toBe(false);
+    });
+
+    it('returns false for undefined', () => {
+      expect(isValidRuleCondition(undefined)).toBe(false);
+    });
+
+    it('returns false for missing urlFilter', () => {
+      expect(isValidRuleCondition({
+        requestDomains: 'example.com',
+      })).toBe(false);
+    });
+
+    it('returns false for missing requestDomains', () => {
+      expect(isValidRuleCondition({
+        urlFilter: '*.js',
+      })).toBe(false);
+    });
+
+    it('returns false for non-string urlFilter', () => {
+      expect(isValidRuleCondition({
+        urlFilter: 123,
+        requestDomains: 'example.com',
+      })).toBe(false);
+    });
+
+    it('accepts optional document property', () => {
+      expect(isValidRuleCondition({
+        urlFilter: '',
+        requestDomains: 'example.com',
+        document: true,
+      })).toBe(true);
+    });
+  });
+
+  describe('isValidHeaderRule', () => {
+    const validRule = {
+      active: true,
+      name: 'X-Custom-Header',
+      value: 'test-value',
+      operation: 'set' as const,
+      condition: { urlFilter: '', requestDomains: '' },
+    };
+
+    it('returns true for valid header rule', () => {
+      expect(isValidHeaderRule(validRule)).toBe(true);
+    });
+
+    it('returns true without operation (defaults to set)', () => {
+      const { operation, ...ruleWithoutOp } = validRule;
+      expect(isValidHeaderRule(ruleWithoutOp)).toBe(true);
+    });
+
+    it('returns true for remove operation', () => {
+      expect(isValidHeaderRule({ ...validRule, operation: 'remove' })).toBe(true);
+    });
+
+    it('returns false for invalid operation', () => {
+      expect(isValidHeaderRule({ ...validRule, operation: 'invalid' })).toBe(false);
+    });
+
+    it('returns false for non-boolean active', () => {
+      expect(isValidHeaderRule({ ...validRule, active: 'true' })).toBe(false);
+    });
+
+    it('returns false for non-string name', () => {
+      expect(isValidHeaderRule({ ...validRule, name: 123 })).toBe(false);
+    });
+
+    it('returns false for missing condition', () => {
+      const { condition, ...ruleWithoutCondition } = validRule;
+      expect(isValidHeaderRule(ruleWithoutCondition)).toBe(false);
+    });
+
+    it('returns false for invalid condition', () => {
+      expect(isValidHeaderRule({ ...validRule, condition: 'invalid' })).toBe(false);
+    });
+  });
+
+  describe('isValidBlockedRequest', () => {
+    const validBlock = {
+      active: true,
+      condition: { urlFilter: '*.js', requestDomains: '', document: false },
+    };
+
+    it('returns true for valid blocked request', () => {
+      expect(isValidBlockedRequest(validBlock)).toBe(true);
+    });
+
+    it('returns false for non-boolean active', () => {
+      expect(isValidBlockedRequest({ ...validBlock, active: 1 })).toBe(false);
+    });
+
+    it('returns false for missing condition', () => {
+      expect(isValidBlockedRequest({ active: true })).toBe(false);
+    });
+  });
+
+  describe('isValidRedirectRequest', () => {
+    const validRedirect = {
+      active: true,
+      url: 'https://example.com/new',
+      condition: { urlFilter: '/old', requestDomains: '' },
+    };
+
+    it('returns true for valid redirect request', () => {
+      expect(isValidRedirectRequest(validRedirect)).toBe(true);
+    });
+
+    it('returns false for missing url', () => {
+      const { url, ...noUrl } = validRedirect;
+      expect(isValidRedirectRequest(noUrl)).toBe(false);
+    });
+
+    it('returns false for non-string url', () => {
+      expect(isValidRedirectRequest({ ...validRedirect, url: 123 })).toBe(false);
+    });
+  });
+
+  describe('isValidTab', () => {
+    const validTab = {
+      name: 'Test Tab',
+      active: true,
+      requestDomains: 'example.com',
+      requestHeaders: [],
+      responseHeaders: [],
+      blockedRequests: [],
+      redirectRequests: [],
+    };
+
+    it('returns true for valid tab', () => {
+      expect(isValidTab(validTab)).toBe(true);
+    });
+
+    it('returns true without requestDomains', () => {
+      const { requestDomains, ...tabWithoutDomains } = validTab;
+      expect(isValidTab(tabWithoutDomains)).toBe(true);
+    });
+
+    it('returns false for non-string name', () => {
+      expect(isValidTab({ ...validTab, name: 123 })).toBe(false);
+    });
+
+    it('returns false for non-array requestHeaders', () => {
+      expect(isValidTab({ ...validTab, requestHeaders: 'invalid' })).toBe(false);
+    });
+
+    it('returns false for missing arrays', () => {
+      const { blockedRequests, ...tabWithoutBlocked } = validTab;
+      expect(isValidTab(tabWithoutBlocked)).toBe(false);
+    });
+
+    it('returns true with populated arrays', () => {
+      const tabWithRules = {
+        ...validTab,
+        requestHeaders: [{
+          active: true,
+          name: 'X-Test',
+          value: 'test',
+          condition: { urlFilter: '', requestDomains: '' },
+        }],
+      };
+      expect(isValidTab(tabWithRules)).toBe(true);
+    });
+  });
+
+  describe('isValidFolder', () => {
+    const validFolder = {
+      name: 'Test Folder',
+      active: true,
+      tabs: [{
+        name: 'Test Tab',
+        active: true,
+        requestHeaders: [],
+        responseHeaders: [],
+        blockedRequests: [],
+        redirectRequests: [],
+      }],
+    };
+
+    it('returns true for valid folder', () => {
+      expect(isValidFolder(validFolder)).toBe(true);
+    });
+
+    it('returns true for folder with empty tabs array', () => {
+      expect(isValidFolder({ ...validFolder, tabs: [] })).toBe(true);
+    });
+
+    it('returns false for non-string name', () => {
+      expect(isValidFolder({ ...validFolder, name: null })).toBe(false);
+    });
+
+    it('returns false for non-array tabs', () => {
+      expect(isValidFolder({ ...validFolder, tabs: 'invalid' })).toBe(false);
+    });
+
+    it('returns false for invalid tab in tabs array', () => {
+      expect(isValidFolder({ ...validFolder, tabs: [{ invalid: true }] })).toBe(false);
+    });
+
+    it('returns false for missing active', () => {
+      const { active, ...noActive } = validFolder;
+      expect(isValidFolder(noActive)).toBe(false);
+    });
+  });
+
+  describe('isValidExportPayload', () => {
+    const validPayload = {
+      name: 'modbox' as const,
+      version: 1,
+      folders: [{
+        name: 'Test Folder',
+        active: true,
+        tabs: [{
+          name: 'Test Tab',
+          active: true,
+          requestHeaders: [],
+          responseHeaders: [],
+          blockedRequests: [],
+          redirectRequests: [],
+        }],
+      }],
+    };
+
+    it('returns true for valid export payload', () => {
+      expect(isValidExportPayload(validPayload)).toBe(true);
+    });
+
+    it('returns false for wrong name', () => {
+      expect(isValidExportPayload({ ...validPayload, name: 'other' })).toBe(false);
+    });
+
+    it('returns false for non-number version', () => {
+      expect(isValidExportPayload({ ...validPayload, version: '1' })).toBe(false);
+    });
+
+    it('returns false for non-array folders', () => {
+      expect(isValidExportPayload({ ...validPayload, folders: {} })).toBe(false);
+    });
+
+    it('returns false for invalid folder in array', () => {
+      expect(isValidExportPayload({ ...validPayload, folders: [{ bad: true }] })).toBe(false);
+    });
+
+    it('returns true with empty folders array', () => {
+      expect(isValidExportPayload({ ...validPayload, folders: [] })).toBe(true);
+    });
+  });
+
+  describe('isValidDataType', () => {
+    const validData = {
+      active: true,
+      folders: [{
+        name: 'Test Folder',
+        active: true,
+        tabs: [{
+          name: 'Test Tab',
+          active: true,
+          requestHeaders: [],
+          responseHeaders: [],
+          blockedRequests: [],
+          redirectRequests: [],
+        }],
+      }],
+    };
+
+    it('returns true for valid data', () => {
+      expect(isValidDataType(validData)).toBe(true);
+    });
+
+    it('returns false for non-boolean active', () => {
+      expect(isValidDataType({ ...validData, active: 'true' })).toBe(false);
+    });
+
+    it('returns false for non-array folders', () => {
+      expect(isValidDataType({ ...validData, folders: null })).toBe(false);
+    });
+
+    it('returns true with empty folders', () => {
+      expect(isValidDataType({ active: true, folders: [] })).toBe(true);
+    });
+
+    it('returns false for null', () => {
+      expect(isValidDataType(null)).toBe(false);
+    });
+
+    it('returns false for undefined', () => {
+      expect(isValidDataType(undefined)).toBe(false);
+    });
+
+    it('returns false for primitive types', () => {
+      expect(isValidDataType('string')).toBe(false);
+      expect(isValidDataType(123)).toBe(false);
+      expect(isValidDataType(true)).toBe(false);
+    });
+  });
+});
+
+describe('Real-world validation scenarios', () => {
+  it('validates a realistic full data structure', () => {
+    const realData = {
+      active: true,
+      folders: [
+        {
+          name: 'Development',
+          active: true,
+          tabs: [
+            {
+              name: 'API Headers',
+              active: true,
+              requestDomains: 'api.example.com',
+              requestHeaders: [
+                {
+                  active: true,
+                  name: 'Authorization',
+                  value: 'Bearer token123',
+                  operation: 'set' as const,
+                  condition: { urlFilter: '', requestDomains: '' },
+                },
+              ],
+              responseHeaders: [],
+              blockedRequests: [],
+              redirectRequests: [],
+            },
+            {
+              name: 'Block Ads',
+              active: false,
+              requestHeaders: [],
+              responseHeaders: [],
+              blockedRequests: [
+                {
+                  active: true,
+                  condition: { urlFilter: '*ads*', requestDomains: '', document: false },
+                },
+              ],
+              redirectRequests: [],
+            },
+          ],
+        },
+        {
+          name: 'Testing',
+          active: false,
+          tabs: [
+            {
+              name: 'Redirects',
+              active: true,
+              requestHeaders: [],
+              responseHeaders: [],
+              blockedRequests: [],
+              redirectRequests: [
+                {
+                  active: true,
+                  url: 'https://localhost:3000/api',
+                  condition: { urlFilter: '/api/*', requestDomains: 'prod.example.com' },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    expect(isValidDataType(realData)).toBe(true);
+  });
+
+  it('validates export payload from real export', () => {
+    const exportPayload = {
+      name: 'modbox' as const,
+      version: 1,
+      folders: [
+        {
+          name: 'Exported Folder',
+          active: true,
+          tabs: [
+            {
+              name: 'Exported Tab',
+              active: true,
+              requestDomains: '',
+              requestHeaders: [],
+              responseHeaders: [
+                {
+                  active: true,
+                  name: 'X-Frame-Options',
+                  value: 'SAMEORIGIN',
+                  condition: { urlFilter: '', requestDomains: 'secure.example.com' },
+                },
+              ],
+              blockedRequests: [],
+              redirectRequests: [],
+            },
+          ],
+        },
+      ],
+    };
+
+    expect(isValidExportPayload(exportPayload)).toBe(true);
+  });
+
+  it('rejects malformed import data', () => {
+    // Missing required arrays
+    const badImport1 = {
+      name: 'modbox',
+      version: 1,
+      folders: [{ name: 'Bad Folder', active: true, tabs: [] }],
+    };
+    // tabs array has invalid tab (missing arrays)
+    expect(isValidExportPayload({
+      ...badImport1,
+      folders: [{
+        name: 'Folder',
+        active: true,
+        tabs: [{ name: 'Tab', active: true }], // Missing arrays
+      }],
+    })).toBe(false);
+
+    // Wrong payload name
+    const badImport2 = {
+      name: 'notmodbox',
+      version: 1,
+      folders: [],
+    };
+    expect(isValidExportPayload(badImport2)).toBe(false);
+  });
+});
diff --git a/src/interfaces.ts b/src/interfaces.ts
new file mode 100644
index 0000000..441afb0
--- /dev/null
+++ b/src/interfaces.ts
@@ -0,0 +1,143 @@
+export interface RuleCondition {
+  urlFilter: string;
+  requestDomains: string;
+  document?: boolean;
+}
+
+export interface HeaderRule {
+  active: boolean;
+  name: string;
+  value: string;
+  operation?: 'set' | 'remove';
+  condition: RuleCondition;
+}
+
+export interface BlockedRequest {
+  active: boolean;
+  condition: RuleCondition;
+}
+
+export interface RedirectRequest {
+  active: boolean;
+  url: string;
+  condition: Omit<RuleCondition, 'document'>;
+}
+
+export interface TabType {
+  name: string;
+  requestDomains?: string;
+  active: boolean;
+  requestHeaders: HeaderRule[];
+  responseHeaders: HeaderRule[];
+  blockedRequests: BlockedRequest[];
+  redirectRequests: RedirectRequest[];
+}
+
+export interface FolderType {
+  name: string;
+  active: boolean;
+  tabs: TabType[];
+}
+
+export interface DataType {
+  active: boolean;
+  folders: FolderType[];
+}
+
+export interface ExportPayload {
+  name: 'modbox';
+  version: number;
+  folders: FolderType[];
+}
+
+/**
+ * Type guards for runtime validation
+ */
+export function isValidRuleCondition(obj: unknown): obj is RuleCondition {
+  if (!obj || typeof obj !== 'object') return false;
+  const cond = obj as Record<string, unknown>;
+  return (
+    typeof cond.urlFilter === 'string' &&
+    typeof cond.requestDomains === 'string'
+  );
+}
+
+export function isValidHeaderRule(obj: unknown): obj is HeaderRule {
+  if (!obj || typeof obj !== 'object') return false;
+  const rule = obj as Record<string, unknown>;
+  return (
+    typeof rule.active === 'boolean' &&
+    typeof rule.name === 'string' &&
+    typeof rule.value === 'string' &&
+    (rule.operation === undefined || rule.operation === 'set' || rule.operation === 'remove') &&
+    isValidRuleCondition(rule.condition)
+  );
+}
+
+export function isValidBlockedRequest(obj: unknown): obj is BlockedRequest {
+  if (!obj || typeof obj !== 'object') return false;
+  const rule = obj as Record<string, unknown>;
+  return (
+    typeof rule.active === 'boolean' &&
+    isValidRuleCondition(rule.condition)
+  );
+}
+
+export function isValidRedirectRequest(obj: unknown): obj is RedirectRequest {
+  if (!obj || typeof obj !== 'object') return false;
+  const rule = obj as Record<string, unknown>;
+  return (
+    typeof rule.active === 'boolean' &&
+    typeof rule.url === 'string' &&
+    rule.condition !== null &&
+    typeof rule.condition === 'object' &&
+    typeof (rule.condition as Record<string, unknown>).urlFilter === 'string' &&
+    typeof (rule.condition as Record<string, unknown>).requestDomains === 'string'
+  );
+}
+
+export function isValidTab(obj: unknown): obj is TabType {
+  if (!obj || typeof obj !== 'object') return false;
+  const tab = obj as Record<string, unknown>;
+  return (
+    typeof tab.name === 'string' &&
+    typeof tab.active === 'boolean' &&
+    (tab.requestDomains === undefined || typeof tab.requestDomains === 'string') &&
+    Array.isArray(tab.requestHeaders) &&
+    Array.isArray(tab.responseHeaders) &&
+    Array.isArray(tab.blockedRequests) &&
+    Array.isArray(tab.redirectRequests)
+  );
+}
+
+export function isValidFolder(obj: unknown): obj is FolderType {
+  if (!obj || typeof obj !== 'object') return false;
+  const folder = obj as Record<string, unknown>;
+  return (
+    typeof folder.name === 'string' &&
+    typeof folder.active === 'boolean' &&
+    Array.isArray(folder.tabs) &&
+    folder.tabs.every(isValidTab)
+  );
+}
+
+export function isValidExportPayload(obj: unknown): obj is ExportPayload {
+  if (!obj || typeof obj !== 'object') return false;
+  const payload = obj as Record<string, unknown>;
+  return (
+    payload.name === 'modbox' &&
+    typeof payload.version === 'number' &&
+    Array.isArray(payload.folders) &&
+    payload.folders.every(isValidFolder)
+  );
+}
+
+export function isValidDataType(obj: unknown): obj is DataType {
+  if (!obj || typeof obj !== 'object') return false;
+  const data = obj as Record<string, unknown>;
+  return (
+    typeof data.active === 'boolean' &&
+    Array.isArray(data.folders) &&
+    data.folders.every(isValidFolder)
+  );
+}
diff --git a/src/utils.test.ts b/src/utils.test.ts
new file mode 100644
index 0000000..cd22403
--- /dev/null
+++ b/src/utils.test.ts
@@ -0,0 +1,801 @@
+import { describe, it, expect } from 'vitest';
+import { generateRules, parseDomains, cleanDomain } from './utils';
+import { DataType } from './interfaces';
+
+/**
+ * Helper to create minimal valid data structure
+ */
+function createData(overrides: Partial<DataType> = {}): DataType {
+  return {
+    active: true,
+    folders: [],
+    ...overrides,
+  };
+}
+
+function createFolder(overrides = {}) {
+  return {
+    name: "Test Folder",
+    active: true,
+    tabs: [],
+    ...overrides,
+  };
+}
+
+function createTab(overrides = {}) {
+  return {
+    name: "Test Tab",
+    active: true,
+    requestDomains: "",
+    requestHeaders: [],
+    responseHeaders: [],
+    blockedRequests: [],
+    redirectRequests: [],
+    ...overrides,
+  };
+}
+
+function createHeaderRule(overrides = {}) {
+  return {
+    active: true,
+    name: "X-Custom-Header",
+    value: "test-value",
+    operation: "set" as const,
+    condition: {
+      urlFilter: "",
+      requestDomains: "",
+    },
+    ...overrides,
+  };
+}
+
+function createBlockRule(overrides = {}) {
+  return {
+    active: true,
+    condition: {
+      urlFilter: "*.js",
+      requestDomains: "",
+      document: false,
+    },
+    ...overrides,
+  };
+}
+
+function createRedirectRule(overrides = {}) {
+  return {
+    active: true,
+    url: "https://example.com/redirect",
+    condition: {
+      urlFilter: "/old-path",
+      requestDomains: "",
+    },
+    ...overrides,
+  };
+}
+
+describe('generateRules', () => {
+  describe('basic functionality', () => {
+    it('returns empty array when data.active is false', () => {
+      const data = createData({ active: false });
+      expect(generateRules(data)).toEqual([]);
+    });
+
+    it('returns empty array when folders is empty', () => {
+      const data = createData({ folders: [] });
+      expect(generateRules(data)).toEqual([]);
+    });
+
+    it('returns empty array when data is null/undefined', () => {
+      expect(generateRules(null as any)).toEqual([]);
+      expect(generateRules(undefined as any)).toEqual([]);
+    });
+
+    it('returns empty array when folders is not an array', () => {
+      const data = { active: true, folders: "invalid" } as any;
+      expect(generateRules(data)).toEqual([]);
+    });
+
+    it('skips inactive folders', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            active: false,
+            tabs: [createTab({ requestHeaders: [createHeaderRule()] })],
+          }),
+        ],
+      });
+      expect(generateRules(data)).toEqual([]);
+    });
+
+    it('skips inactive tabs', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                active: false,
+                requestHeaders: [createHeaderRule()],
+              }),
+            ],
+          }),
+        ],
+      });
+      expect(generateRules(data)).toEqual([]);
+    });
+
+    it('generates sequential IDs', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                requestHeaders: [createHeaderRule(), createHeaderRule({ name: "X-Another" })],
+              }),
+            ],
+          }),
+        ],
+      });
+      const rules = generateRules(data);
+      expect(rules[0].id).toBe(1);
+      expect(rules[1].id).toBe(2);
+    });
+  });
+
+  describe('request header rules', () => {
+    it('generates a request header rule with set operation', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                requestHeaders: [createHeaderRule()],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const rules = generateRules(data);
+      expect(rules).toHaveLength(1);
+      expect(rules[0]).toMatchObject({
+        id: 1,
+        priority: 1,
+        action: {
+          type: "modifyHeaders",
+          requestHeaders: [{
+            header: "X-Custom-Header",
+            operation: "set",
+            value: "test-value",
+          }],
+        },
+      });
+    });
+
+    it('generates a request header rule with remove operation (no value)', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                requestHeaders: [createHeaderRule({ operation: "remove" })],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const rules = generateRules(data);
+      expect(rules[0].action.requestHeaders?.[0]).not.toHaveProperty("value");
+      expect(rules[0].action.requestHeaders?.[0].operation).toBe("remove");
+    });
+
+    it('skips inactive header rules', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                requestHeaders: [createHeaderRule({ active: false })],
+              }),
+            ],
+          }),
+        ],
+      });
+      expect(generateRules(data)).toEqual([]);
+    });
+
+    it('skips header rules with empty name', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                requestHeaders: [createHeaderRule({ name: "" })],
+              }),
+            ],
+          }),
+        ],
+      });
+      expect(generateRules(data)).toEqual([]);
+    });
+
+    it('skips header rules with whitespace-only name', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                requestHeaders: [createHeaderRule({ name: "   " })],
+              }),
+            ],
+          }),
+        ],
+      });
+      expect(generateRules(data)).toEqual([]);
+    });
+  });
+
+  describe('response header rules', () => {
+    it('generates a response header rule', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                responseHeaders: [createHeaderRule({ name: "X-Response-Header" })],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const rules = generateRules(data);
+      expect(rules).toHaveLength(1);
+      expect(rules[0].action).toHaveProperty("responseHeaders");
+      expect(rules[0].action.responseHeaders?.[0].header).toBe("X-Response-Header");
+    });
+  });
+
+  describe('redirect rules', () => {
+    it('generates a redirect rule', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                redirectRequests: [createRedirectRule()],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const rules = generateRules(data);
+      expect(rules).toHaveLength(1);
+      expect(rules[0]).toMatchObject({
+        action: {
+          type: "redirect",
+          redirect: { url: "https://example.com/redirect" },
+        },
+      });
+    });
+
+    it('skips redirect rules with empty URL', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                redirectRequests: [createRedirectRule({ url: "" })],
+              }),
+            ],
+          }),
+        ],
+      });
+      expect(generateRules(data)).toEqual([]);
+    });
+  });
+
+  describe('block rules', () => {
+    it('generates a block rule for assets', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                blockedRequests: [createBlockRule()],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const rules = generateRules(data);
+      expect(rules).toHaveLength(1);
+      expect(rules[0].action.type).toBe("block");
+      expect(rules[0].condition.resourceTypes).not.toContain("main_frame");
+      expect(rules[0].condition.resourceTypes).not.toContain("sub_frame");
+    });
+
+    it('generates a document block rule', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                blockedRequests: [
+                  createBlockRule({
+                    condition: { urlFilter: "", requestDomains: "blocked.com", document: true },
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const rules = generateRules(data);
+      expect(rules[0].condition.resourceTypes).toContain("main_frame");
+      expect(rules[0].condition.resourceTypes).toContain("sub_frame");
+      expect(rules[0].condition.resourceTypes).toHaveLength(2);
+    });
+
+    it('document block rule does not include urlFilter', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                blockedRequests: [
+                  createBlockRule({
+                    condition: { urlFilter: "should-be-ignored", requestDomains: "blocked.com", document: true },
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const rules = generateRules(data);
+      expect(rules[0].condition).not.toHaveProperty("urlFilter");
+    });
+  });
+
+  describe('domain handling', () => {
+    it('uses rule-specific requestDomains', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                requestDomains: "fallback.com",
+                requestHeaders: [
+                  createHeaderRule({
+                    condition: { urlFilter: "", requestDomains: "specific.com" },
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const rules = generateRules(data);
+      expect(rules[0].condition.requestDomains).toEqual(["specific.com"]);
+    });
+
+    it('falls back to tab requestDomains when rule has none', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                requestDomains: "fallback.com",
+                requestHeaders: [
+                  createHeaderRule({
+                    condition: { urlFilter: "", requestDomains: "" },
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const rules = generateRules(data);
+      expect(rules[0].condition.requestDomains).toEqual(["fallback.com"]);
+    });
+
+    it('handles multiple domains', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                requestHeaders: [
+                  createHeaderRule({
+                    condition: { urlFilter: "", requestDomains: "one.com, two.com, three.com" },
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const rules = generateRules(data);
+      expect(rules[0].condition.requestDomains).toEqual(["one.com", "two.com", "three.com"]);
+    });
+
+    it('strips protocol from domains', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                requestHeaders: [
+                  createHeaderRule({
+                    condition: { urlFilter: "", requestDomains: "https://secure.com, http://insecure.com" },
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const rules = generateRules(data);
+      expect(rules[0].condition.requestDomains).toEqual(["secure.com", "insecure.com"]);
+    });
+  });
+
+  describe('urlFilter handling', () => {
+    it('includes urlFilter when specified', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                requestHeaders: [
+                  createHeaderRule({
+                    condition: { urlFilter: "*api*", requestDomains: "" },
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const rules = generateRules(data);
+      expect(rules[0].condition.urlFilter).toBe("*api*");
+    });
+
+    it('excludes urlFilter when empty', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            tabs: [
+              createTab({
+                requestHeaders: [
+                  createHeaderRule({
+                    condition: { urlFilter: "", requestDomains: "example.com" },
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const rules = generateRules(data);
+      expect(rules[0].condition).not.toHaveProperty("urlFilter");
+    });
+  });
+
+  describe('complex scenarios', () => {
+    it('generates rules from multiple folders, tabs, and rule types', () => {
+      const data = createData({
+        folders: [
+          createFolder({
+            name: "Folder 1",
+            tabs: [
+              createTab({
+                requestHeaders: [createHeaderRule()],
+                responseHeaders: [createHeaderRule({ name: "X-Response" })],
+              }),
+            ],
+          }),
+          createFolder({
+            name: "Folder 2",
+            tabs: [
+              createTab({
+                blockedRequests: [createBlockRule()],
+                redirectRequests: [createRedirectRule()],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const rules = generateRules(data);
+      expect(rules).toHaveLength(4);
+      expect(rules.map(r => r.id)).toEqual([1, 2, 3, 4]);
+    });
+
+    it('handles mixed active/inactive items correctly', () => {
+      const data = createData({
+        folders: [
+          createFolder({ active: false, tabs: [createTab({ requestHeaders: [createHeaderRule()] })] }),
+          createFolder({
+            tabs: [
+              createTab({ active: false, requestHeaders: [createHeaderRule()] }),
+              createTab({
+                requestHeaders: [
+                  createHeaderRule({ active: false }),
+                  createHeaderRule({ name: "Active-Header" }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const rules = generateRules(data);
+      expect(rules).toHaveLength(1);
+      expect(rules[0].action.requestHeaders?.[0].header).toBe("Active-Header");
+    });
+  });
+});
+
+describe('parseDomains', () => {
+  it('parses single domain', () => {
+    expect(parseDomains("example.com")).toEqual(["example.com"]);
+  });
+
+  it('parses multiple comma-separated domains', () => {
+    expect(parseDomains("one.com,two.com,three.com")).toEqual(["one.com", "two.com", "three.com"]);
+  });
+
+  it('trims whitespace from domains', () => {
+    expect(parseDomains("  one.com  ,  two.com  ")).toEqual(["one.com", "two.com"]);
+  });
+
+  it('strips protocols', () => {
+    expect(parseDomains("https://secure.com,http://insecure.com")).toEqual(["secure.com", "insecure.com"]);
+  });
+
+  it('filters out empty strings', () => {
+    expect(parseDomains("one.com,,two.com,")).toEqual(["one.com", "two.com"]);
+  });
+
+  it('returns empty array for empty string', () => {
+    expect(parseDomains("")).toEqual([]);
+  });
+
+  it('returns empty array for null/undefined', () => {
+    expect(parseDomains(null as any)).toEqual([]);
+    expect(parseDomains(undefined as any)).toEqual([]);
+  });
+});
+
+describe('cleanDomain', () => {
+  it('trims whitespace', () => {
+    expect(cleanDomain("  example.com  ")).toBe("example.com");
+  });
+
+  it('strips https://', () => {
+    expect(cleanDomain("https://example.com")).toBe("example.com");
+  });
+
+  it('strips http://', () => {
+    expect(cleanDomain("http://example.com")).toBe("example.com");
+  });
+
+  it('is case-insensitive for protocol', () => {
+    expect(cleanDomain("HTTPS://example.com")).toBe("example.com");
+    expect(cleanDomain("HTTP://example.com")).toBe("example.com");
+  });
+
+  it('returns empty string for null/undefined', () => {
+    expect(cleanDomain(null as any)).toBe("");
+    expect(cleanDomain(undefined as any)).toBe("");
+  });
+
+  it('preserves path and query string', () => {
+    expect(cleanDomain("https://example.com/path?query=1")).toBe("example.com/path?query=1");
+  });
+
+  it('handles mixed case protocols', () => {
+    expect(cleanDomain("HtTpS://example.com")).toBe("example.com");
+    expect(cleanDomain("HtTp://example.com")).toBe("example.com");
+  });
+
+  it('handles empty string', () => {
+    expect(cleanDomain("")).toBe("");
+  });
+
+  it('handles whitespace-only string', () => {
+    expect(cleanDomain("   ")).toBe("");
+  });
+
+  it('handles domain with port', () => {
+    expect(cleanDomain("https://example.com:8080")).toBe("example.com:8080");
+  });
+
+  it('handles domain with subdomain', () => {
+    expect(cleanDomain("https://api.sub.example.com")).toBe("api.sub.example.com");
+  });
+});
+
+describe('parseDomains edge cases', () => {
+  it('handles domains with ports', () => {
+    expect(parseDomains("example.com:8080")).toEqual(["example.com:8080"]);
+  });
+
+  it('handles multiple domains with protocols mixed', () => {
+    expect(parseDomains("https://a.com, http://b.com, c.com")).toEqual(["a.com", "b.com", "c.com"]);
+  });
+
+  it('handles commas with varying whitespace', () => {
+    expect(parseDomains("a.com,b.com,  c.com  ,d.com")).toEqual(["a.com", "b.com", "c.com", "d.com"]);
+  });
+
+  it('handles newline-separated domains', () => {
+    expect(parseDomains("a.com\nb.com\nc.com")).toEqual(["a.com", "b.com", "c.com"]);
+  });
+
+  it('handles mixed comma and newline separators', () => {
+    expect(parseDomains("a.com, b.com\nc.com")).toEqual(["a.com", "b.com", "c.com"]);
+  });
+
+  it('filters out duplicate domains', () => {
+    expect(parseDomains("example.com, example.com")).toEqual(["example.com"]);
+  });
+
+  it('filters out duplicates when protocols differ', () => {
+    expect(parseDomains("https://example.com, http://example.com")).toEqual(["example.com"]);
+  });
+
+  it('handles array input', () => {
+    expect(parseDomains(["a.com", "b.com"])).toEqual(["a.com", "b.com"]);
+  });
+
+  it('cleans domains in array input', () => {
+    expect(parseDomains(["https://a.com", "  b.com  "])).toEqual(["a.com", "b.com"]);
+  });
+});
+
+describe('generateRules security and limits', () => {
+  it('handles very long domain lists', () => {
+    const domains = Array.from({ length: 100 }, (_, i) => `domain${i}.com`).join(',');
+    const data = createData({
+      folders: [
+        createFolder({
+          tabs: [
+            createTab({
+              requestDomains: domains,
+              requestHeaders: [createHeaderRule()],
+            }),
+          ],
+        }),
+      ],
+    });
+
+    const rules = generateRules(data);
+    expect(rules).toHaveLength(1);
+    expect(rules[0].condition.requestDomains).toHaveLength(100);
+  });
+
+  it('handles deeply nested folder/tab structure', () => {
+    const data = createData({
+      folders: Array.from({ length: 10 }, (_, i) => 
+        createFolder({
+          name: `Folder ${i}`,
+          tabs: Array.from({ length: 5 }, (_, j) => 
+            createTab({
+              name: `Tab ${j}`,
+              requestHeaders: [createHeaderRule({ name: `Header-${i}-${j}` })],
+            })
+          ),
+        })
+      ),
+    });
+
+    const rules = generateRules(data);
+    // 10 folders * 5 tabs * 1 header rule each = 50 rules
+    expect(rules).toHaveLength(50);
+    // Each should have a unique sequential id
+    rules.forEach((rule, index) => {
+      expect(rule.id).toBe(index + 1);
+    });
+  });
+
+  it('handles special characters in header values', () => {
+    const data = createData({
+      folders: [
+        createFolder({
+          tabs: [
+            createTab({
+              requestHeaders: [
+                createHeaderRule({
+                  name: 'X-Special',
+                  value: 'value with "quotes" and \'apostrophes\' and <brackets>',
+                }),
+              ],
+            }),
+          ],
+        }),
+      ],
+    });
+
+    const rules = generateRules(data);
+    expect(rules).toHaveLength(1);
+    expect(rules[0].action.requestHeaders?.[0].value).toBe(
+      'value with "quotes" and \'apostrophes\' and <brackets>'
+    );
+  });
+
+  it('handles unicode in domain names', () => {
+    const data = createData({
+      folders: [
+        createFolder({
+          tabs: [
+            createTab({
+              requestDomains: 'münchen.de',
+              requestHeaders: [createHeaderRule()],
+            }),
+          ],
+        }),
+      ],
+    });
+
+    const rules = generateRules(data);
+    expect(rules[0].condition.requestDomains).toEqual(['münchen.de']);
+  });
+
+  it('handles empty strings in header values', () => {
+    const data = createData({
+      folders: [
+        createFolder({
+          tabs: [
+            createTab({
+              requestHeaders: [
+                createHeaderRule({ name: 'X-Empty', value: '' }),
+              ],
+            }),
+          ],
+        }),
+      ],
+    });
+
+    const rules = generateRules(data);
+    expect(rules).toHaveLength(1);
+    expect(rules[0].action.requestHeaders?.[0].value).toBe('');
+  });
+
+  it('generates unique IDs across mixed rule types', () => {
+    const data = createData({
+      folders: [
+        createFolder({
+          tabs: [
+            createTab({
+              requestHeaders: [createHeaderRule()],
+              responseHeaders: [createHeaderRule({ name: 'Response-Header' })],
+              blockedRequests: [createBlockRule()],
+              redirectRequests: [createRedirectRule()],
+            }),
+          ],
+        }),
+      ],
+    });
+
+    const rules = generateRules(data);
+    const ids = rules.map(r => r.id);
+    const uniqueIds = new Set(ids);
+    expect(uniqueIds.size).toBe(rules.length);
+    // IDs should be sequential starting from 1
+    expect(ids).toEqual([1, 2, 3, 4]);
+  });
+});
diff --git a/src/utils.ts b/src/utils.ts
index ac5516e..4adaded 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,125 +1,245 @@
-// @ts-ignore  
-import { DataType, FolderType, TabType } from "../interaces.ts"
+import { DataType, HeaderRule, BlockedRequest, RedirectRequest } from "./interfaces"
 
+/**
+ * Chrome declarativeNetRequest resource types
+ */
+const ALL_RESOURCE_TYPES = [
+  "main_frame", "sub_frame", "stylesheet", "script", "image", "font", 
+  "object", "xmlhttprequest", "ping", "csp_report", "media", "websocket", 
+  "webtransport", "webbundle", "other"
+] as const;
+
+const NON_DOCUMENT_RESOURCE_TYPES = ALL_RESOURCE_TYPES.filter(
+  type => type !== "main_frame" && type !== "sub_frame"
+);
+
+const DOCUMENT_RESOURCE_TYPES = ["main_frame", "sub_frame"] as const;
+
+/**
+ * Build condition object for a rule
+ */
+function buildCondition(
+  condition: { urlFilter?: string; requestDomains?: string },
+  fallbackDomains?: string,
+  resourceTypes?: readonly string[]
+) {
+  const result: Record<string, unknown> = {};
+
+  if (condition.urlFilter && condition.urlFilter.trim() !== "") {
+    result.urlFilter = condition.urlFilter;
+  }
+
+  const domains = condition.requestDomains || fallbackDomains;
+  if (domains && domains.trim() !== "") {
+    result.requestDomains = parseDomains(domains);
+  }
+
+  if (resourceTypes) {
+    result.resourceTypes = [...resourceTypes];
+  }
+
+  return result;
+}
+
+/**
+ * Generate Chrome declarativeNetRequest rules from app data
+ */
 export function generateRules(data: DataType) {
-  const rules: any = [];
+  const rules: ChromeRule[] = [];
   let id = 1;
 
-  if (!data.active) {
+  if (!data?.active) {
+    return [];
+  }
+
+  if (!Array.isArray(data.folders)) {
     return [];
   }
 
-  data.folders.forEach((folder:FolderType) => {
-    if (folder.active) {
-      folder.tabs.forEach((tab: TabType) => {
-        if (tab.active) {
-          // request header rules
-          tab.requestHeaders?.forEach((request:any) => {
-            if (request.active && request.name !== "") {
-              rules.push({
-                id,
-                priority: 1,
-                action: {
-                  type: "modifyHeaders",
-                  requestHeaders: [{ 
-                    header: request.name,
-                    operation: request.operation || "set",
-                    // remove operation cannot have a value
-                    ...(request.operation !== "remove" && { value: request.value })
-                  }]
-                },
-                condition: {
-                  ...(request.condition.urlFilter !== "" && { urlFilter: request.condition.urlFilter }),
-                  ...(request.condition.requestDomains && { requestDomains: parseDomains(request.condition.requestDomains) }),
-                  ...(!request.condition.requestDomains && tab.requestDomains && { requestDomains: parseDomains(tab.requestDomains) }),
-                  resourceTypes: ["main_frame", "sub_frame", "stylesheet", "script", "image", "font", "object", "xmlhttprequest", "ping", "csp_report", "media", "websocket", "webtransport", "webbundle", "other"]
-                }
-              });
-
-              id += 1;
-            }
+  for (const folder of data.folders) {
+    if (!folder?.active || !Array.isArray(folder.tabs)) continue;
+
+    for (const tab of folder.tabs) {
+      if (!tab?.active) continue;
+
+      // Request header rules
+      if (Array.isArray(tab.requestHeaders)) {
+        for (const header of tab.requestHeaders) {
+          if (!isValidHeaderRule(header)) continue;
+
+          rules.push({
+            id: id++,
+            priority: 1,
+            action: {
+              type: "modifyHeaders",
+              requestHeaders: [{
+                header: header.name,
+                operation: header.operation || "set",
+                ...(header.operation !== "remove" && { value: header.value })
+              }]
+            },
+            condition: buildCondition(
+              header.condition,
+              tab.requestDomains,
+              ALL_RESOURCE_TYPES
+            )
           });
+        }
+      }
+
+      // Response header rules
+      if (Array.isArray(tab.responseHeaders)) {
+        for (const header of tab.responseHeaders) {
+          if (!isValidHeaderRule(header)) continue;
 
-          // response header rules
-          tab.responseHeaders?.forEach((request:any) => {
-            if (request.active && request.name !== "") {
-              rules.push({
-                id,
-                priority: 1,
-                action: {
-                  type: "modifyHeaders",
-                  responseHeaders: [{ 
-                    header: request.name,
-                    operation: request.operation || "set",
-                    // remove operation cannot have a value
-                    ...(request.operation !== "remove" && { value: request.value })
-                  }]
-                },
-                condition: {
-                  ...(request.condition.urlFilter !== "" && { urlFilter: request.condition.urlFilter }),
-                  ...(request.condition.requestDomains && { requestDomains: parseDomains(request.condition.requestDomains) }),
-                  ...(!request.condition.requestDomains && tab.requestDomains && { requestDomains: parseDomains(tab.requestDomains) }),
-                  resourceTypes: ["main_frame", "sub_frame", "stylesheet", "script", "image", "font", "object", "xmlhttprequest", "ping", "csp_report", "media", "websocket", "webtransport", "webbundle", "other"]
-                }
-              });
-
-              id += 1;
-            }
+          rules.push({
+            id: id++,
+            priority: 1,
+            action: {
+              type: "modifyHeaders",
+              responseHeaders: [{
+                header: header.name,
+                operation: header.operation || "set",
+                ...(header.operation !== "remove" && { value: header.value })
+              }]
+            },
+            condition: buildCondition(
+              header.condition,
+              tab.requestDomains,
+              ALL_RESOURCE_TYPES
+            )
           });
+        }
+      }
+
+      // Redirect rules
+      if (Array.isArray(tab.redirectRequests)) {
+        for (const redirect of tab.redirectRequests) {
+          if (!isValidRedirectRule(redirect)) continue;
 
-          // redirect rules
-          tab.redirectRequests?.forEach((request:any) => {
-            if (request.active && request.url !== "") {
-              rules.push({
-                id,
-                priority: 1,
-                action: { type: "redirect", "redirect": { "url": request.url }},
-                condition: {
-                  ...(request.condition.urlFilter !== "" && { urlFilter: request.condition.urlFilter }),
-                  ...(request.condition.requestDomains && { requestDomains: parseDomains(request.condition.requestDomains) }),
-                  ...(!request.condition.requestDomains && tab.requestDomains && { requestDomains: parseDomains(tab.requestDomains) }),
-                },
-              });
-
-              id += 1;
-            }
+          rules.push({
+            id: id++,
+            priority: 1,
+            action: { 
+              type: "redirect", 
+              redirect: { url: redirect.url } 
+            },
+            condition: buildCondition(
+              redirect.condition,
+              tab.requestDomains
+            )
           });
+        }
+      }
+
+      // Block rules
+      if (Array.isArray(tab.blockedRequests)) {
+        for (const block of tab.blockedRequests) {
+          if (!isValidBlockRule(block)) continue;
+
+          const isDocumentBlock = block.condition.document === true;
+          const condition = buildCondition(
+            isDocumentBlock ? { requestDomains: block.condition.requestDomains } : block.condition,
+            tab.requestDomains,
+            isDocumentBlock ? DOCUMENT_RESOURCE_TYPES : NON_DOCUMENT_RESOURCE_TYPES
+          );
 
-          // blocking rules
-          tab.blockedRequests?.forEach((request:any) => {
-            if (request.active) {
-              rules.push({
-                id,
-                priority: 1,
-                action: { type: "block" },
-                condition: {
-                  ...(request.condition.urlFilter !== "" && !request.condition.document && { urlFilter: request.condition.urlFilter }),
-                  ...(request.condition.requestDomains && { requestDomains: parseDomains(request.condition.requestDomains) }),
-                  ...(!request.condition.requestDomains && tab.requestDomains && { requestDomains: parseDomains(tab.requestDomains) }),
-                  ...(!request.condition.document && { resourceTypes: ["stylesheet", "script", "image", "font", "object", "xmlhttprequest", "ping", "csp_report", "media", "websocket", "webtransport", "webbundle", "other"] }),
-                  ...(request.condition.document && { resourceTypes: ["main_frame", "sub_frame"] }),
-                },
-              });
-
-              id += 1;
-            }
+          rules.push({
+            id: id++,
+            priority: 1,
+            action: { type: "block" },
+            condition
           });
         }
-      });
+      }
     }
-  });
+  }
 
   return rules;
 }
 
+/**
+ * Validation helpers
+ */
+function isValidHeaderRule(rule: HeaderRule | undefined): rule is HeaderRule {
+  return Boolean(
+    rule?.active && 
+    rule.name && 
+    rule.name.trim() !== "" &&
+    rule.condition
+  );
+}
+
+function isValidRedirectRule(rule: RedirectRequest | undefined): rule is RedirectRequest {
+  return Boolean(
+    rule?.active && 
+    rule.url && 
+    rule.url.trim() !== "" &&
+    rule.condition
+  );
+}
+
+function isValidBlockRule(rule: BlockedRequest | undefined): rule is BlockedRequest {
+  return Boolean(rule?.active && rule.condition);
+}
+
+/**
+ * Chrome rule type for type safety
+ */
+interface ChromeRule {
+  id: number;
+  priority: number;
+  action: {
+    type: string;
+    requestHeaders?: Array<{ header: string; operation: string; value?: string }>;
+    responseHeaders?: Array<{ header: string; operation: string; value?: string }>;
+    redirect?: { url: string };
+  };
+  condition: Record<string, unknown>;
+}
+
+/**
+ * Environment detection
+ */
 export const isChrome: boolean =
-  chrome && chrome.declarativeNetRequest && chrome.storage;
+  typeof chrome !== "undefined" && 
+  Boolean(chrome?.declarativeNetRequest) && 
+  Boolean(chrome?.storage);
 
-export const parseDomains = (domains: string) => {
-  const domainsArray = domains.split(",");
-  return domainsArray.map(domain => cleanDomain(domain))
+/**
+ * Domain parsing utilities
+ * Supports comma-separated strings, newline-separated strings, or arrays
+ * Automatically deduplicates and cleans domains
+ */
+export function parseDomains(domains: string | string[]): string[] {
+  if (!domains) {
+    return [];
+  }
+  
+  // Handle array input
+  if (Array.isArray(domains)) {
+    const cleaned = domains
+      .map(domain => cleanDomain(domain))
+      .filter(domain => domain !== "");
+    return [...new Set(cleaned)]; // Deduplicate
+  }
+  
+  if (typeof domains !== "string") {
+    return [];
+  }
+  
+  // Split by comma or newline
+  const cleaned = domains
+    .split(/[,\n]/)
+    .map(domain => cleanDomain(domain))
+    .filter(domain => domain !== "");
+  
+  return [...new Set(cleaned)]; // Deduplicate
 }
 
-export const cleanDomain = (domain: string) => {
-  return domain.trim().replaceAll("https://", "").replaceAll("https://", "")
+export function cleanDomain(domain: string): string {
+  if (!domain || typeof domain !== "string") {
+    return "";
+  }
+  return domain.trim().replace(/^https?:\/\//i, "");
 }
\ No newline at end of file