0.7.1

style: add svg icons for waveforms in Tone Generator
0.7.0
2026-03-04 06:19:59 +00:00 · 2026-03-04 06:19:58 +00:00 · 2026-03-04 06:14:03 +00:00 · 2026-03-04 06:13:52 +00:00 · 2026-03-04 05:29:38 +00:00 · 2026-03-04 05:28:31 +00:00
33 changed files with 2625 additions and 556 deletions
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1,11 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
+# Check if GPG signing is enabled
+gpg_sign=$(git config --get commit.gpgsign || echo "false")
+
+if [ "$gpg_sign" != "true" ]; then
+  echo "Error: GPG signing is not enabled or properly configured!"
+  echo "Please enable it globally using: git config --global commit.gpgsign true"
+  echo "Or locally by running: git config commit.gpgsign true"
+  exit 1
+fi

 npm run lint
--- a/README.md
+++ b/README.md
@@ -40,6 +40,13 @@ Scan QR codes directly from your camera or device.
 - **History:** Keeps a log of scanned codes with options to copy or download as JSON.
 - **Responsive:** Fullscreen mode for immersive scanning experience.

+### 🎵 Tone Generator
+Generate precise audio frequencies directly in the browser.
+- **Customizable:** Slide from 20 Hz to 20,000 Hz or type exact values.
+- **Waveforms:** Choose between Sine, Square, Sawtooth, and Triangle waves.
+- **Presets:** Quick access to common frequencies like 440 Hz (A4) and 528 Hz.
+- **Safe:** Smooth volume ramping to protect against audio clicking.
+
 ---

 ## Chrome Extension 🧩
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -33,6 +33,7 @@ export default [
      'no-unused-vars': 'off',
      'no-undef': 'off',
      'no-debugger': 'off',
+      'indent': ['error', 2]
    }
  },
  {
--- a/extension/background.js
+++ b/extension/background.js
@@ -84,8 +84,8 @@ async function refreshOffscreenDocument() {
 chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  if (request.action === 'startSniffing') {
    if (isSniffing) {
-       sendResponse({ status: 'already_started' });
-       return true;
+      sendResponse({ status: 'already_started' });
+      return true;
    }

    isSniffing = true;
--- a/index.html
+++ b/index.html
@@ -7,6 +7,10 @@
    <meta name="theme-color" content="#4facfe" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tools App</title>
+    <meta property="og:title" content="Tools App" />
+    <meta property="og:description" content="A versatile collection of developer and everyday tools including a Password Generator, QR Code Scanner/Generator, URL Cleaner, and more." />
+    <meta property="og:image" content="/preview.png" />
+    <meta property="og:type" content="website" />
  </head>
  <body>
    <div id="app"></div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,15 @@
 {
  "name": "tools-app",
-  "version": "0.6.18",
+  "version": "0.7.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "tools-app",
-      "version": "0.6.18",
+      "version": "0.7.1",
      "hasInstallScript": true,
      "dependencies": {
+        "@gkucmierz/utils": "^1.28.7",
        "barcode-detector": "^3.1.0",
        "lucide-vue-next": "^0.575.0",
        "marked": "^17.0.3",
@@ -24,7 +25,8 @@
        "globals": "^17.4.0",
        "husky": "^9.1.7",
        "vite": "^7.3.1",
-        "vite-plugin-pwa": "^1.2.0"
+        "vite-plugin-pwa": "^1.2.0",
+        "worker-loader": "^3.0.8"
      }
    },
    "node_modules/@apideck/better-ajv-errors": {
@@ -2134,6 +2136,12 @@
        "node": "^20.19.0 || ^22.13.0 || >=24"
      }
    },
+    "node_modules/@gkucmierz/utils": {
+      "version": "1.28.7",
+      "resolved": "https://registry.npmjs.org/@gkucmierz/utils/-/utils-1.28.7.tgz",
+      "integrity": "sha512-ekN8W4PL+SEeG0adWlkxxmTv6StLgxqtGRB9eBdWmkT5S4GSfJHYmzLY1ebc4jlL40OEa992ryvsT/TJS7eMmA==",
+      "license": "MIT"
+    },
    "node_modules/@humanfs/core": {
      "version": "0.19.1",
      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -2709,6 +2717,30 @@
      "integrity": "sha512-cMQm7pxu6BxtHyqJ7mQZ2kXWV5SLmugybFdHCBbJ5eHzOo6VhBckEgAT3//rP5FwPHNPeEiq4SmQ5ucBwsOo4Q==",
      "license": "MIT"
    },
+    "node_modules/@types/eslint": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
+      "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/eslint-scope": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
+      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
    "node_modules/@types/esrecurse": {
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
@@ -2730,6 +2762,17 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/node": {
+      "version": "25.3.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.3.tgz",
+      "integrity": "sha512-DpzbrH7wIcBaJibpKo9nnSQL0MTRdnWttGyE5haGwK86xgMOkFLp7vEyfQPGLOJh5wNYiJ3V9PmUMDhV9u8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
    "node_modules/@types/resolve": {
      "version": "1.20.2",
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -2921,6 +2964,198 @@
      "integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==",
      "license": "MIT"
    },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
+      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
+      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
+      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
+      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
+      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
+      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
+      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/wasm-gen": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
+      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
+      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
+      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
+      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/helper-wasm-section": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-opt": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1",
+        "@webassemblyjs/wast-printer": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
+      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
+      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
+      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
+      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true
+    },
    "node_modules/acorn": {
      "version": "8.16.0",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
@@ -2933,6 +3168,20 @@
        "node": ">=0.4.0"
      }
    },
+    "node_modules/acorn-import-phases": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
+      "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "peerDependencies": {
+        "acorn": "^8.14.0"
+      }
+    },
    "node_modules/acorn-jsx": {
      "version": "5.3.2",
      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
@@ -2960,6 +3209,39 @@
        "url": "https://github.com/sponsors/epoberezkin"
      }
    },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
    "node_modules/ansi-regex": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -3172,6 +3454,16 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/birpc": {
      "version": "2.9.0",
      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
@@ -3337,6 +3629,17 @@
        "url": "https://paulmillr.com/funding/"
      }
    },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
+      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
    "node_modules/cliui": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -3653,6 +3956,31 @@
      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
      "license": "MIT"
    },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.20.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.0.tgz",
+      "integrity": "sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/entities": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
@@ -3754,6 +4082,14 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/es-module-lexer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/es-object-atoms": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -4158,6 +4494,17 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
    "node_modules/exsolve": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
@@ -4542,6 +4889,14 @@
        "node": ">=10.13.0"
      }
    },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true
+    },
    "node_modules/globals": {
      "version": "17.4.0",
      "resolved": "https://registry.npmjs.org/globals/-/globals-17.4.0.tgz",
@@ -4605,6 +4960,17 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/has-property-descriptors": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
@@ -5231,6 +5597,22 @@
        "node": ">=10"
      }
    },
+    "node_modules/jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5257,6 +5639,14 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/json-schema": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
@@ -5347,6 +5737,36 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/loader-runner": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.1.tgz",
+      "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.11.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
    "node_modules/local-pkg": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
@@ -5462,6 +5882,39 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/minimatch": {
      "version": "10.2.4",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
@@ -5561,6 +6014,14 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/node-releases": {
      "version": "2.0.27",
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
@@ -6223,6 +6684,27 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/schema-utils": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.3.tgz",
+      "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
    "node_modules/scule": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
@@ -6651,6 +7133,23 @@
        "node": ">=16"
      }
    },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
    "node_modules/supports-preserve-symlinks-flag": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -6676,6 +7175,21 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
    "node_modules/temp-dir": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -6724,6 +7238,41 @@
        "node": ">=10"
      }
    },
+    "node_modules/terser-webpack-plugin": {
+      "version": "5.3.17",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.17.tgz",
+      "integrity": "sha512-YR7PtUp6GMU91BgSJmlaX/rS2lGDbAF7D+Wtq7hRO+MiljNmodYvqslzCFiYVAgW+Qoaaia/QUIP4lGXufjdZw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^4.3.0",
+        "terser": "^5.31.1"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "uglify-js": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.15",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -6879,6 +7428,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/unicode-canonical-property-names-ecmascript": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
@@ -7246,6 +7803,21 @@
        }
      }
    },
+    "node_modules/watchpack": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
+      "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/webidl-conversions": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
@@ -7253,12 +7825,99 @@
      "dev": true,
      "license": "BSD-2-Clause"
    },
+    "node_modules/webpack": {
+      "version": "5.105.4",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.105.4.tgz",
+      "integrity": "sha512-jTywjboN9aHxFlToqb0K0Zs9SbBoW4zRUlGzI2tYNxVYcEi/IPpn+Xi4ye5jTLvX2YeLuic/IvxNot+Q1jMoOw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/eslint-scope": "^3.7.7",
+        "@types/estree": "^1.0.8",
+        "@types/json-schema": "^7.0.15",
+        "@webassemblyjs/ast": "^1.14.1",
+        "@webassemblyjs/wasm-edit": "^1.14.1",
+        "@webassemblyjs/wasm-parser": "^1.14.1",
+        "acorn": "^8.16.0",
+        "acorn-import-phases": "^1.0.3",
+        "browserslist": "^4.28.1",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.20.0",
+        "es-module-lexer": "^2.0.0",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.11",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.3.1",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^4.3.3",
+        "tapable": "^2.3.0",
+        "terser-webpack-plugin": "^5.3.17",
+        "watchpack": "^2.5.1",
+        "webpack-sources": "^3.3.4"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.4.tgz",
+      "integrity": "sha512-7tP1PdV4vF+lYPnkMR0jMY5/la2ub5Fc/8VQrrU+lXkiM6C4TjVfGw7iKfyhnTQOsD+6Q/iKw0eFciziRgD58Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/webpack-virtual-modules": {
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
      "license": "MIT"
    },
+    "node_modules/webpack/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/webpack/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
    "node_modules/whatwg-url": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
@@ -7721,6 +8380,80 @@
        "workbox-core": "7.4.0"
      }
    },
+    "node_modules/worker-loader": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-3.0.8.tgz",
+      "integrity": "sha512-XQyQkIFeRVC7f7uRhFdNMe/iJOdO6zxAaR3EWbDp45v3mDhrTi+++oswKNxShUNjPC/1xUp5DB29YKLhFo129g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/worker-loader/node_modules/ajv": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/worker-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/worker-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/worker-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
    "node_modules/wrap-ansi": {
      "version": "6.2.0",
      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "tools-app",
  "private": true,
-  "version": "0.6.18",
+  "version": "0.7.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -13,6 +13,7 @@
    "prepare": "husky"
  },
  "dependencies": {
+    "@gkucmierz/utils": "^1.28.7",
    "barcode-detector": "^3.1.0",
    "lucide-vue-next": "^0.575.0",
    "marked": "^17.0.3",
@@ -28,6 +29,7 @@
    "globals": "^17.4.0",
    "husky": "^9.1.7",
    "vite": "^7.3.1",
-    "vite-plugin-pwa": "^1.2.0"
+    "vite-plugin-pwa": "^1.2.0",
+    "worker-loader": "^3.0.8"
  }
 }
--- a/public/preview.png
+++ b/public/preview.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,7 @@ import Footer from './components/Footer.vue'
 import Sidebar from './components/Sidebar.vue'
 import InstallPrompt from './components/InstallPrompt.vue'
 import ReloadPrompt from './components/ReloadPrompt.vue'
+import GlobalTooltip from './components/common/GlobalTooltip.vue'
 import { UI_CONFIG } from './config/ui'

 const isSidebarOpen = ref(window.innerWidth >= 768)
@@ -61,6 +62,7 @@ onUnmounted(() => {
  <Footer />
  <InstallPrompt />
  <ReloadPrompt />
+  <GlobalTooltip />
 </template>

 <style scoped>
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -35,7 +35,7 @@ onMounted(() => {
          class="menu-btn"
          @click="$emit('toggleSidebar')"
          aria-label="Toggle Menu"
-          title="Toggle Menu"
+          v-tooltip="'Toggle Menu'"
          v-ripple
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -50,7 +50,7 @@ onMounted(() => {
      <button
        class="btn-neon nav-btn icon-only"
        @click="toggleTheme"
-        :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+        v-tooltip="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
        v-ripple
      >
        <Sun v-if="isDark" :size="20" />
--- a/src/components/InstallPrompt.vue
+++ b/src/components/InstallPrompt.vue
@@ -3,8 +3,8 @@
    <div class="prompt-content">
      <span class="prompt-text">Install app for faster access</span>
      <div class="prompt-actions">
-        <button @click="installPWA" class="install-btn">Install</button>
-        <button @click="dismissPrompt" class="dismiss-btn">✕</button>
+        <button @click="installPWA" class="install-btn" v-ripple>Install</button>
+        <button @click="dismissPrompt" class="dismiss-btn" v-ripple>✕</button>
      </div>
    </div>
  </div>
--- a/src/components/ReloadPrompt.vue
+++ b/src/components/ReloadPrompt.vue
@@ -50,7 +50,7 @@ onMounted(() => {
    <div class="message">
      New content available, click on reload button to update.
    </div>
-    <button @click="updateServiceWorker()">
+    <button @click="updateServiceWorker()" class="btn-neon" v-ripple>
      Reload
    </button>
  </div>
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -15,6 +15,7 @@ defineProps({
      <router-link to="/url-cleaner" class="nav-item" v-ripple>URL Cleaner</router-link>
      <router-link to="/qr-scanner" class="nav-item" v-ripple>QR Scanner</router-link>
      <router-link to="/qr-code" class="nav-item" v-ripple>QR Code</router-link>
+      <router-link to="/tone-generator" class="nav-item" v-ripple>Tone Generator</router-link>
    </nav>
  </aside>
 </template>
@@ -27,7 +28,7 @@ defineProps({
  left: 0;
  bottom: 0;
  width: 250px;
-  background-color: var(--panel-bg);
+  background-color: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-x: hidden;
--- a/src/components/common/GlobalTooltip.vue
+++ b/src/components/common/GlobalTooltip.vue
@@ -0,0 +1,138 @@
+<script setup>
+import { tooltipState } from '../../composables/useTooltip'
+import { ref, watch, nextTick } from 'vue'
+
+const tooltipRef = ref(null)
+const x = ref(0)
+const y = ref(0)
+const arrowX = ref(0)
+const isBottom = ref(false)
+
+watch(() => tooltipState.isVisible, async (visible) => {
+  if (visible) {
+    // Wait for DOM update to ensure the text content affects height before measuring
+    await nextTick()
+    if (!tooltipRef.value || !tooltipState.targetRect) return
+
+    const rect = tooltipState.targetRect
+    const tooltipRect = tooltipRef.value.getBoundingClientRect()
+
+    let top = rect.top - tooltipRect.height - 8
+    let idealCenter = rect.left + (rect.width / 2)
+    let left = idealCenter - (tooltipRect.width / 2)
+
+    isBottom.value = false
+    if (top < 8) {
+      top = rect.bottom + 8
+      isBottom.value = true
+    }
+
+    // Bounds checking for the tooltip box
+    let actualLeft = left
+    if (actualLeft < 8) {
+      actualLeft = 8
+    } else if (actualLeft + tooltipRect.width > window.innerWidth - 8) {
+      actualLeft = window.innerWidth - tooltipRect.width - 8
+    }
+
+    // Calculate the difference between where the box is forced to be,
+    // and where it naturally wanted to be. We move the arrow by the opposite amount.
+    arrowX.value = idealCenter - (actualLeft + (tooltipRect.width / 2))
+
+    x.value = actualLeft
+    y.value = top
+  }
+})
+</script>
+
+<template>
+  <div
+    ref="tooltipRef"
+    class="global-tooltip"
+    :class="{ 'visible': tooltipState.isVisible, 'tooltip-bottom': isBottom }"
+    :style="{
+      transform: `translate(${x}px, ${y}px)`,
+      '--arrow-offset': `${arrowX}px`
+    }"
+  >
+    {{ tooltipState.text }}
+  </div>
+</template>
+
+<style scoped>
+.global-tooltip {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+  background: rgba(15, 23, 42, 0.95);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  color: #f8fafc;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transform: translateY(4px) scale(0.95);
+  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  opacity: 0;
+  visibility: hidden;
+}
+
+.global-tooltip::after {
+  content: '';
+  position: absolute;
+  left: calc(50% + var(--arrow-offset, 0px));
+  bottom: -5px;
+  margin-left: -5px;
+  width: 10px;
+  height: 10px;
+  background: rgba(15, 23, 42, 0.95);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  transform: rotate(45deg);
+  border-radius: 0 0 2px 0;
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+
+.global-tooltip.tooltip-bottom::after {
+  bottom: auto;
+  top: -5px;
+  border-right: none;
+  border-bottom: none;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 2px 0 0 0;
+  clip-path: polygon(0 0, 100% 0, 0 100%);
+}
+
+.global-tooltip.visible {
+  opacity: 1;
+  visibility: visible;
+  /* Transform returns to natural pos defined by inline styles when visible */
+}
+
+:root[data-theme="light"] .global-tooltip {
+  background: rgba(255, 255, 255, 0.95);
+  color: #0f172a;
+  border-color: rgba(15, 23, 42, 0.1);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
+}
+
+:root[data-theme="light"] .global-tooltip::after {
+  background: rgba(255, 255, 255, 0.95);
+  border-right-color: rgba(15, 23, 42, 0.1);
+  border-bottom-color: rgba(15, 23, 42, 0.1);
+}
+
+:root[data-theme="light"] .global-tooltip.tooltip-bottom::after {
+  border-left-color: rgba(15, 23, 42, 0.1);
+  border-top-color: rgba(15, 23, 42, 0.1);
+}
+</style>
--- a/src/components/tools/ClipboardSniffer.vue
+++ b/src/components/tools/ClipboardSniffer.vue
@@ -62,7 +62,7 @@ const clearText = () => {
          class="btn-neon"
          @click="startListening"
          :disabled="!isExtensionReady"
-          :title="!isExtensionReady ? 'Extension required' : 'Start capturing clipboard'"
+          v-tooltip="!isExtensionReady ? 'Extension required' : 'Start capturing clipboard'"
          v-ripple
        >
          Start Sniffing
--- a/src/components/tools/Passwords.vue
+++ b/src/components/tools/Passwords.vue
@@ -115,17 +115,17 @@ const generatePasswords = () => {
          <div class="input-wrapper">
            <label>Length</label>
            <div class="number-control">
-              <button class="control-btn" @click="length > 4 ? length-- : null">-</button>
+              <button class="control-btn" @click="length > 4 ? length-- : null" v-ripple>-</button>
              <input type="number" v-model="length" min="4" max="128" class="number-input">
-              <button class="control-btn" @click="length < 128 ? length++ : null">+</button>
+              <button class="control-btn" @click="length < 128 ? length++ : null" v-ripple>+</button>
            </div>
          </div>
          <div class="input-wrapper">
            <label>Count</label>
            <div class="number-control">
-              <button class="control-btn" @click="count > 1 ? count-- : null">-</button>
+              <button class="control-btn" @click="count > 1 ? count-- : null" v-ripple>-</button>
              <input type="number" v-model="count" min="1" max="1000" class="number-input">
-              <button class="control-btn" @click="count < 1000 ? count++ : null">+</button>
+              <button class="control-btn" @click="count < 1000 ? count++ : null" v-ripple>+</button>
            </div>
          </div>
        </div>
@@ -149,12 +149,6 @@ const generatePasswords = () => {
 </template>

 <style scoped>
-.tool-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
 .options-grid {
  display: flex;
  flex-wrap: wrap;
@@ -190,7 +184,7 @@ const generatePasswords = () => {

 .input-wrapper label {
  color: var(--text-color);
-  font-weight: 600;
+  font-weight: 400;
  margin-bottom: 0.2rem;
 }

--- a/src/components/tools/QrCode.vue
+++ b/src/components/tools/QrCode.vue
@@ -1,80 +1,264 @@
 <script setup>
-import { ref, watch, onMounted } from 'vue'
-import { Download } from 'lucide-vue-next'
+import { ref, watch, onMounted, computed, onUnmounted } from 'vue'
+import { Download, Eye, EyeOff } from 'lucide-vue-next'
 import QRCode from 'qrcode'
 import { useFillHeight } from '../../composables/useFillHeight'
 import { useLocalStorage } from '../../composables/useLocalStorage'
+import { useRoute, useRouter } from 'vue-router'
+import { fromBase64Url, toBase64Url } from '@gkucmierz/utils'
+
+const route = useRoute()
+const router = useRouter()

 const text = useLocalStorage('text', '', 'qr-code')
 const ecc = useLocalStorage('ecc', 'M', 'qr-code')
 const size = useLocalStorage('size', 300, 'qr-code')
+const isBgTransparent = useLocalStorage('isBgTransparent', true, 'qr-code')
+const bgType = useLocalStorage('bgType', 'solid', 'qr-code')
+const bgColor1 = useLocalStorage('bgColor1', '#ffffff', 'qr-code')
+const bgColor2 = useLocalStorage('bgColor2', '#e2e8f0', 'qr-code')
+const bgGradPos = useLocalStorage('bgGradPos', { x1: 50, y1: 50, x2: 100, y2: 100 }, 'qr-code')
+const fgType = useLocalStorage('fgType', 'solid', 'qr-code')
+const fgColor1 = useLocalStorage('fgColor1', '#000000', 'qr-code')
+const fgColor2 = useLocalStorage('fgColor2', '#10b981', 'qr-code')
+const fgGradPos = useLocalStorage('fgGradPos', { x1: 0, y1: 0, x2: 100, y2: 100 }, 'qr-code')
+const showHandles = useLocalStorage('showHandles', true, 'qr-code')
 const format = useLocalStorage('format', 'png', 'qr-code')
+
 const svgContent = ref('')
 const previewRef = ref(null)
+const qrFrameRef = ref(null)
+
+const fgLinePts = computed(() => getLineEndPoints(fgGradPos.value))
+const bgLinePts = computed(() => getLineEndPoints(bgGradPos.value))
+
+const getLineEndPoints = (pos) => {
+  if (!qrFrameRef.value) return { x1: pos.x1, y1: pos.y1, x2: pos.x2, y2: pos.y2 }
+  const rect = qrFrameRef.value.getBoundingClientRect()
+  if (rect.width === 0 || rect.height === 0) return { x1: pos.x1, y1: pos.y1, x2: pos.x2, y2: pos.y2 }
+
+  // Handle radius in pixels (14/2 = 7px) plus half the line stroke width (1/2 = 0.5px) if needed
+  const VISUAL_OFFSET_PX = 1;
+  const rPx = 7 - VISUAL_OFFSET_PX;
+
+  const dx = (pos.x2 - pos.x1) * rect.width / 100
+  const dy = (pos.y2 - pos.y1) * rect.height / 100
+  const distPx = Math.sqrt(dx * dx + dy * dy)
+
+  if (distPx <= rPx * 2) {
+    // Too close, don't show line
+    return { x1: pos.x1, y1: pos.y1, x2: pos.x1, y2: pos.y1 }
+  }
+
+  const angle = Math.atan2(dy, dx)
+
+  // Calculate offsets in percentages (using radius, not diameter)
+  // adding extra 1px to accommodate the stroke/shadow
+  const effectiveRPx = rPx + 1
+  const xOffsetPct = (Math.cos(angle) * effectiveRPx / rect.width) * 100
+  const yOffsetPct = (Math.sin(angle) * effectiveRPx / rect.height) * 100
+
+  return {
+    x1: pos.x1 + xOffsetPct,
+    y1: pos.y1 + yOffsetPct,
+    x2: pos.x2 - xOffsetPct,
+    y2: pos.y2 - yOffsetPct
+  }
+}
+
+const activeHandle = ref(null)
+
+const startDrag = (e, handleStr) => {
+  e.preventDefault()
+  activeHandle.value = handleStr
+  window.addEventListener('mousemove', onDrag)
+  window.addEventListener('mouseup', stopDrag)
+  window.addEventListener('touchmove', onDrag, { passive: false })
+  window.addEventListener('touchend', stopDrag)
+}
+
+const onDrag = (e) => {
+  if (!activeHandle.value || !qrFrameRef.value) return
+  if (e.type === 'touchmove') e.preventDefault()
+
+  const rect = qrFrameRef.value.getBoundingClientRect()
+  const clientX = e.touches ? e.touches[0].clientX : e.clientX
+  const clientY = e.touches ? e.touches[0].clientY : e.clientY
+
+  let x = ((clientX - rect.left) / rect.width) * 100
+  let y = ((clientY - rect.top) / rect.height) * 100
+  x = Math.max(0, Math.min(100, x))
+  y = Math.max(0, Math.min(100, y))
+
+  // Snap to 5 points (Corners + Center)
+  // Distance threshold in percentages, roughly matching handle diameter mapping
+  const snapDist = 5
+  const snapPoints = [
+    { x: 0, y: 0 }, { x: 100, y: 0 },
+    { x: 0, y: 100 }, { x: 100, y: 100 },
+    { x: 50, y: 50 }
+  ]
+
+  for (const pt of snapPoints) {
+    if (Math.abs(x - pt.x) < snapDist && Math.abs(y - pt.y) < snapDist) {
+      x = pt.x
+      y = pt.y
+      break
+    }
+  }
+
+  const [type, point] = activeHandle.value.split(':')
+  const posRef = type === 'fg' ? fgGradPos : bgGradPos
+  posRef.value[`x${point}`] = Math.round(x)
+  posRef.value[`y${point}`] = Math.round(y)
+}
+
+let justDragged = false
+
+const stopDrag = () => {
+  if (activeHandle.value) {
+    justDragged = true
+    setTimeout(() => { justDragged = false }, 50)
+  }
+  activeHandle.value = null
+  window.removeEventListener('mousemove', onDrag)
+  window.removeEventListener('mouseup', stopDrag)
+  window.removeEventListener('touchmove', onDrag)
+  window.removeEventListener('touchend', stopDrag)
+}
+
+const handleFrameClick = (event) => {
+  if (justDragged) return
+
+  if (!activeHandle.value) {
+    showHandles.value = !showHandles.value
+  }
+}

 const { height: previewHeight } = useFillHeight(previewRef, 40) // 40px extra margin

-const generateQR = async () => {
+let worker = null
+let latestJobId = 0
+
+const generateQR = () => {
  if (!text.value) {
    svgContent.value = ''
    return
  }
-  try {
-    // Generate SVG for preview (always sharp)
-    svgContent.value = await QRCode.toString(text.value, {
-      type: 'svg',
-      errorCorrectionLevel: ecc.value,
-      margin: 1,
-      // No fixed width, allow scaling via CSS
-    })
-  } catch (err) {
-    console.error('QR Generation failed', err)
-    svgContent.value = ''
+
+  // Create worker if not exists
+  if (!worker) {
+    worker = new Worker(new URL('../../workers/qrcode.worker.js', import.meta.url), { type: 'module' })
+    worker.onmessage = (e) => {
+      const { id, svgContent: newSvg, error } = e.data
+
+      // Only process the result of the most recently requested job
+      // to avoid race conditions overriding newer results with older ones
+      if (id !== latestJobId) return
+
+      if (error) {
+        console.error('QR Generation worker failed', error)
+        svgContent.value = ''
+      } else {
+        svgContent.value = newSvg
+      }
+    }
  }
+
+  // Increment ID for each new Generation request
+  latestJobId++
+  worker.postMessage({
+    id: latestJobId,
+    text: text.value,
+    ecc: ecc.value,
+    isBgTransparent: isBgTransparent.value,
+    bgType: bgType.value,
+    bgColor1: bgColor1.value,
+    bgColor2: bgColor2.value,
+    bgGradPos: { ...bgGradPos.value },
+    fgType: fgType.value,
+    fgColor1: fgColor1.value,
+    fgColor2: fgColor2.value,
+    fgGradPos: { ...fgGradPos.value }
+  })
 }

-// Debounce generation slightly to avoid lag on typing
-let timeout
-watch([text, ecc], () => { // size is not relevant for preview
-  clearTimeout(timeout)
-  timeout = setTimeout(generateQR, 300)
+watch([text, ecc, isBgTransparent, bgType, bgColor1, bgColor2, bgGradPos, fgType, fgColor1, fgColor2, fgGradPos], () => {
+  generateQR()
+}, { deep: true })
+
+watch(text, (newText) => {
+  if (newText) {
+    router.replace({ name: 'QrCode', params: { payload: toBase64Url(newText) } })
+  } else {
+    router.replace({ name: 'QrCode', params: {} })
+  }
 })

 onMounted(() => {
+  if (route.params.payload) {
+    try {
+      const decodedPayload = fromBase64Url(route.params.payload)
+      text.value = decodedPayload
+    } catch (e) {
+      console.error('Failed to parse QR payload from URL', e)
+    }
+  } else if (text.value) {
+    router.replace({ name: 'QrCode', params: { payload: toBase64Url(text.value) } })
+  }
+
  if (text.value) generateQR()
 })

+onUnmounted(() => {
+  if (worker) {
+    worker.terminate()
+  }
+})
+
 const downloadFile = async () => {
-  if (!text.value) return
+  if (!text.value || !svgContent.value) return

  const filename = `qr-code-${Date.now()}.${format.value}`

  if (format.value === 'svg') {
-    // For SVG download, we might want to inject the size if user specifically requested it,
-    // but usually raw SVG is better.
-    // If we want to support the "Size" dropdown for SVG download, we can regenerate with specific width.
-    const svgWithSize = await QRCode.toString(text.value, {
-      type: 'svg',
-      errorCorrectionLevel: ecc.value,
-      margin: 1,
-      width: size.value
-    })
-    const blob = new Blob([svgWithSize], { type: 'image/svg+xml' })
+    let finalSvg = svgContent.value
+    if (!finalSvg.includes('width=')) {
+      finalSvg = finalSvg.replace('<svg ', `<svg width="${size.value}" height="${size.value}" `)
+    }
+    const blob = new Blob([finalSvg], { type: 'image/svg+xml' })
    triggerDownload(blob, filename)
  } else {
-    // For raster formats, render to canvas first
    try {
      const canvas = document.createElement('canvas')
-      await QRCode.toCanvas(canvas, text.value, {
-        errorCorrectionLevel: ecc.value,
-        margin: 1,
-        width: size.value
-      })
+      canvas.width = size.value
+      canvas.height = size.value
+      const ctx = canvas.getContext('2d')

-      const mime = `image/${format.value}`
-      canvas.toBlob((blob) => {
-        if (blob) triggerDownload(blob, filename)
-      }, mime)
+      const img = new Image()
+      const svgSource = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent.value)}`
+
+      img.onload = () => {
+        if (format.value === 'jpeg' && isBgTransparent.value) {
+          ctx.fillStyle = '#ffffff'
+          ctx.fillRect(0, 0, size.value, size.value)
+        } else if (format.value === 'jpeg' && bgType.value !== 'solid') {
+          // Let the Canvas render the SVG's background gradient naturally instead of filling
+          // Though drawing bounding rect white might still be needed behind transparent parts
+          ctx.fillStyle = '#ffffff'
+          ctx.fillRect(0, 0, size.value, size.value)
+        }
+        ctx.drawImage(img, 0, 0, size.value, size.value)
+
+        const mime = format.value === 'jpeg' ? 'image/jpeg' : `image/${format.value}`
+        canvas.toBlob((blob) => {
+          if (blob) triggerDownload(blob, filename)
+        }, mime, 1.0)
+      }
+      img.onerror = (e) => {
+        console.error('Failed to load SVG for conversion', e)
+      }
+      img.src = svgSource
    } catch (err) {
      console.error('Download failed', err)
    }
@@ -120,22 +304,88 @@ const triggerDownload = (blob, filename) => {
            <option value="H">High (30%)</option>
          </select>
        </div>
+
+        <div class="control-group">
+          <label>QR Style</label>
+          <select v-model="fgType" class="select-input">
+            <option value="solid">Solid Color</option>
+            <option value="linear">Linear Gradient</option>
+            <option value="radial">Radial Gradient</option>
+          </select>
+        </div>
+
+        <div class="control-group">
+          <label>QR Color(s)</label>
+          <div class="color-picker-wrapper">
+            <input type="color" v-model="fgColor1" class="color-input">
+            <input type="color" v-model="fgColor2" v-if="fgType !== 'solid'" class="color-input">
+          </div>
+        </div>
+
+        <div class="control-group">
+          <label>Background Style</label>
+          <select v-model="bgType" :disabled="isBgTransparent" class="select-input">
+            <option value="solid">Solid Color</option>
+            <option value="linear">Linear Gradient</option>
+            <option value="radial">Radial Gradient</option>
+          </select>
+        </div>
+
+        <div class="control-group">
+          <label>Background Color(s)</label>
+          <div class="color-picker-wrapper">
+            <input type="color" v-model="bgColor1" :disabled="isBgTransparent" class="color-input">
+            <input type="color" v-model="bgColor2" v-if="bgType !== 'solid'" :disabled="isBgTransparent" class="color-input">
+            <label class="checkbox-label" style="margin-left: 0.5rem">
+              <input type="checkbox" v-model="isBgTransparent"> Transparent
+            </label>
+          </div>
+        </div>
      </div>

      <div class="preview-section" v-if="text" ref="previewRef" :style="{ height: previewHeight }">
        <div class="qr-container">
-          <div class="qr-frame" v-html="svgContent"></div>
+          <div
+            class="qr-frame"
+            :style="{
+              background: isBgTransparent ? 'white' : bgType === 'solid' ? bgColor1 : (bgType === 'linear' ? `linear-gradient(to bottom right, ${bgColor1}, ${bgColor2})` : `radial-gradient(circle, ${bgColor1}, ${bgColor2})`),
+              cursor: (fgType !== 'solid' || (!isBgTransparent && bgType !== 'solid')) ? 'pointer' : 'default'
+            }"
+            @click="handleFrameClick"
+            v-tooltip="(fgType !== 'solid' || (!isBgTransparent && bgType !== 'solid')) ? (showHandles ? 'Hide edit handles' : 'Show edit handles') : ''"
+          >
+             <div class="svg-wrapper" ref="qrFrameRef">
+                <div v-html="svgContent" class="svg-content-box"></div>
+
+                <template v-if="showHandles">
+                  <!-- Background Gradient Handles -->
+                  <template v-if="!isBgTransparent && bgType !== 'solid'">
+                    <div class="grad-handle bg-handle handle-1" :style="{ left: bgGradPos.x1 + '%', top: bgGradPos.y1 + '%' }" @mousedown="startDrag($event, 'bg:1')" @touchstart.prevent="startDrag($event, 'bg:1')" @click.stop></div>
+                    <div class="grad-handle bg-handle handle-2" :style="{ left: bgGradPos.x2 + '%', top: bgGradPos.y2 + '%' }" @mousedown="startDrag($event, 'bg:2')" @touchstart.prevent="startDrag($event, 'bg:2')" @click.stop></div>
+                    <svg class="grad-line-svg"><line :x1="bgLinePts.x1 + '%'" :y1="bgLinePts.y1 + '%'" :x2="bgLinePts.x2 + '%'" :y2="bgLinePts.y2 + '%'" class="bg-line" /></svg>
+                  </template>
+
+                  <!-- Foreground Gradient Handles -->
+                  <template v-if="fgType !== 'solid'">
+                    <div class="grad-handle fg-handle handle-1" :style="{ left: fgGradPos.x1 + '%', top: fgGradPos.y1 + '%' }" @mousedown="startDrag($event, 'fg:1')" @touchstart.prevent="startDrag($event, 'fg:1')" @click.stop></div>
+                    <div class="grad-handle fg-handle handle-2" :style="{ left: fgGradPos.x2 + '%', top: fgGradPos.y2 + '%' }" @mousedown="startDrag($event, 'fg:2')" @touchstart.prevent="startDrag($event, 'fg:2')" @click.stop></div>
+                    <svg class="grad-line-svg"><line :x1="fgLinePts.x1 + '%'" :y1="fgLinePts.y1 + '%'" :x2="fgLinePts.x2 + '%'" :y2="fgLinePts.y2 + '%'" class="fg-line" /></svg>
+                  </template>
+                </template>
+             </div>
+          </div>
+
        </div>

        <div class="download-settings">
          <div class="control-group">
            <label>Size (px)</label>
            <div class="number-control size-control">
-              <button class="control-btn" @click="size = Math.max(10, size - 100)" title="-100">-100</button>
-              <button class="control-btn" @click="size = Math.max(10, size - 10)" title="-10">-10</button>
+              <button class="control-btn" @click="size = Math.max(10, size - 100)" v-tooltip="'-100'" v-ripple>-100</button>
+              <button class="control-btn" @click="size = Math.max(10, size - 10)" v-tooltip="'-10'" v-ripple>-10</button>
              <input type="number" v-model.number="size" class="number-input" />
-              <button class="control-btn" @click="size += 10" title="+10">+10</button>
-              <button class="control-btn" @click="size += 100" title="+100">+100</button>
+              <button class="control-btn" @click="size += 10" v-tooltip="'+10'" v-ripple>+10</button>
+              <button class="control-btn" @click="size += 100" v-tooltip="'+100'" v-ripple>+100</button>
            </div>
          </div>

@@ -149,7 +399,7 @@ const triggerDownload = (blob, filename) => {
            </select>
          </div>

-          <button class="action-btn download-btn" @click="downloadFile">
+          <button class="btn-neon primary" @click="downloadFile" v-ripple>
            <Download size="18" />
            Download
          </button>
@@ -160,12 +410,6 @@ const triggerDownload = (blob, filename) => {
 </template>

 <style scoped>
-.tool-container.full-width {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
 .tool-panel {
  padding: 1rem;
  display: flex;
@@ -211,6 +455,42 @@ const triggerDownload = (blob, filename) => {
  color: var(--text-secondary);
 }

+.color-picker-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 38px;
+}
+
+.color-input {
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  border: 1px solid var(--panel-border);
+  border-radius: 6px;
+  cursor: pointer;
+  background: var(--panel-bg);
+}
+
+.color-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+  color: var(--text-secondary);
+  user-select: none;
+}
+.checkbox-label input {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+}

 .preview-section {
  display: flex;
@@ -232,8 +512,11 @@ const triggerDownload = (blob, filename) => {
  width: 100%;
  min-height: 0;
  container-type: size;
+  position: relative;
 }

+
+
 :root[data-theme="light"] .preview-section {
  background: rgba(255, 255, 255, 0.3);
 }
@@ -251,6 +534,57 @@ const triggerDownload = (blob, filename) => {
  overflow: hidden;
 }

+.svg-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.svg-content-box {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.svg-content-box :deep(svg) {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.grad-line-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 15;
+}
+
+.grad-handle {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  cursor: grab;
+  z-index: 10;
+  touch-action: none;
+  background: rgb(255, 255, 255);
+  box-shadow: 0 0 4px 0px rgb(0, 0, 0);
+}
+
+.grad-handle:active {
+  cursor: grabbing;
+}
+
+.fg-line, .bg-line {
+  stroke: rgb(255, 255, 255);
+  stroke-width: 1;
+  filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
+}
+
 .download-settings {
  display: flex;
  gap: 1.5rem;
@@ -261,31 +595,39 @@ const triggerDownload = (blob, filename) => {
 }

 .size-control {
-  min-width: 280px;
+  width: 100%;
+}
+
+@media (max-width: 480px) {
+  .size-control {
+    border-radius: 8px;
+  }
+  .size-control .control-btn {
+    flex: 1;
+  }
 }

 .format-select {
  min-width: 100px !important;
 }

-.download-btn {
-  height: 40px;
-  padding: 0 1.5rem;
-  background: var(--primary-accent);
-  color: #000;
-  border: none;
-  border-radius: 8px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  transition: all 0.2s;
+@media (max-width: 600px) {
+  .preview-section {
+    padding: 1rem 0.5rem;
+    gap: 1rem;
+    border-radius: 8px;
+  }
+
+  .qr-container {
+    width: 100%;
+    aspect-ratio: 1;
+    min-height: unset;
+  }
+
+  .qr-frame {
+    padding: 0.5rem;
+  }
 }

-.download-btn:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
-}
 </style>

--- a/src/components/tools/QrScanner.vue
+++ b/src/components/tools/QrScanner.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
-import { SwitchCamera, Trash2, Copy, Download, X } from 'lucide-vue-next'
+import { SwitchCamera, Trash2, Copy, Download, X, QrCode } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+import { toBase64Url } from '@gkucmierz/utils'
 import { useCamera } from '../../composables/useCamera'
 import { useQrDetection } from '../../composables/useQrDetection'

@@ -12,6 +14,12 @@ const bgCanvas = ref(null)
 let bgRafId = null

 const videoRef = ref(null)
+const router = useRouter()
+
+const navigateToGenerateQr = (text) => {
+  const payload = toBase64Url(text)
+  router.push({ name: 'QrCode', params: { payload } })
+}
 const overlayCanvas = ref(null)

 const {
@@ -307,14 +315,15 @@ const isUrl = (string) => {

            <div v-if="error" class="error-overlay">
              <p>{{ error }}</p>
-              <button @click="startScan" class="retry-btn">Retry</button>
+              <button @click="startScan" class="retry-btn" v-ripple>Retry</button>
            </div>

            <button
              v-if="hasMultipleCameras"
              class="switch-camera-btn"
              @click.stop="switchCamera"
-              title="Switch Camera"
+              v-tooltip="'Switch Camera'"
+              v-ripple
            >
              <SwitchCamera size="24" />
            </button>
@@ -324,13 +333,13 @@ const isUrl = (string) => {
            <div class="results-header">
              <h3>Scanned Codes ({{ scannedCodes.length }})</h3>
              <div v-if="scannedCodes.length > 0" class="header-actions">
-                <button class="icon-btn" @click="copyAll" title="Copy All">
+                <button class="icon-btn" @click="copyAll" v-tooltip="'Copy All'" v-ripple>
                  <Copy size="18" />
                </button>
-                <button class="icon-btn" @click="downloadJson" title="Download JSON">
+                <button class="icon-btn" @click="downloadJson" v-tooltip="'Download JSON'" v-ripple>
                  <Download size="18" />
                </button>
-                <button class="icon-btn delete-btn" @click="clearHistory" title="Clear All">
+                <button class="icon-btn delete-btn" @click="clearHistory" v-tooltip="'Clear All'" v-ripple>
                  <Trash2 size="18" />
                </button>
              </div>
@@ -349,10 +358,13 @@ const isUrl = (string) => {
                  </div>
                </div>
                <div class="item-actions">
-                  <button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy">
+                  <button class="icon-btn" @click="copyToClipboard(code.value)" v-tooltip="'Copy'" v-ripple>
                    <Copy size="18" />
                  </button>
-                  <button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove">
+                  <button class="icon-btn" @click="navigateToGenerateQr(code.value)" v-tooltip="'Generate QR Code'" v-ripple>
+                    <QrCode size="18" />
+                  </button>
+                  <button class="icon-btn delete-btn" @click="removeCode(code.id)" v-tooltip="'Remove'" v-ripple>
                    <Trash2 size="18" />
                  </button>
                </div>
@@ -369,12 +381,6 @@ const isUrl = (string) => {
 </template>

 <style scoped>
-.tool-container.full-width {
-  max-width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}

 .scanner-content {
  display: flex;
@@ -391,6 +397,10 @@ const isUrl = (string) => {
  gap: 0;
 }

+:global(:root[data-theme="light"] .scanner-content.is-fullscreen) {
+  background: #fff;
+}
+
 .camera-wrapper {
  width: 100%;
  max-width: 500px;
@@ -405,6 +415,10 @@ const isUrl = (string) => {
  transition: all 0.3s ease;
 }

+:global(:root[data-theme="light"] .camera-wrapper) {
+  background: #f1f5f9;
+}
+
 .camera-wrapper.clickable {
  cursor: pointer;
 }
@@ -478,9 +492,11 @@ const isUrl = (string) => {
 }

 .switch-camera-btn {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
+  position: absolute !important;
+  top: auto !important;
+  left: auto !important;
+  bottom: 0.75rem !important;
+  right: 0.75rem !important;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
@@ -529,11 +545,15 @@ const isUrl = (string) => {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: none;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  border-top: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
 }

+:global(:root[data-theme="light"] .scanner-content.is-fullscreen .results-section) {
+  background: rgba(255, 255, 255, 0.75);
+}
+
 .code-value {
  color: var(--primary-accent);
  font-family: monospace;
--- a/src/components/tools/ToneGenerator.vue
+++ b/src/components/tools/ToneGenerator.vue
@@ -0,0 +1,464 @@
+<script setup>
+import { ref, onUnmounted, watch } from 'vue'
+import { Volume2, VolumeX, Play, Square, Activity } from 'lucide-vue-next'
+
+const frequency = ref(440)
+const volume = ref(20)
+const waveform = ref('sine')
+const isPlaying = ref(false)
+
+const waveforms = [
+  { value: 'sine', label: 'Sine', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12c3.5-8 5.5-8 9 0 3.5 8 5.5 8 9 0"/></svg>' },
+  { value: 'square', label: 'Square', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15h6V9h6v6h6"/></svg>' },
+  { value: 'sawtooth', label: 'Sawtooth', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15l8-8v8l8-8v8"/></svg>' },
+  { value: 'triangle', label: 'Triangle', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l4-6 8 12 6-8"/></svg>' }
+]
+
+let audioContext = null
+let oscillator = null
+let gainNode = null
+
+const initAudio = () => {
+  if (!audioContext) {
+    audioContext = new (window.AudioContext || window.webkitAudioContext)()
+  }
+}
+
+const updateOscillator = () => {
+  if (oscillator && isPlaying.value) {
+    // Ramp to prevent clicking sounds
+    oscillator.frequency.setTargetAtTime(frequency.value, audioContext.currentTime, 0.05)
+    oscillator.type = waveform.value
+  }
+}
+
+const updateVolume = () => {
+  if (gainNode && isPlaying.value) {
+    // Ramp to prevent clicking sounds
+    const gainValue = volume.value / 100
+    gainNode.gain.setTargetAtTime(gainValue, audioContext.currentTime, 0.05)
+  }
+}
+
+watch(frequency, updateOscillator)
+watch(waveform, updateOscillator)
+watch(volume, updateVolume)
+
+const togglePlay = () => {
+  if (isPlaying.value) {
+    stopTone()
+  } else {
+    playTone()
+  }
+}
+
+const playTone = () => {
+  initAudio()
+
+  if (audioContext.state === 'suspended') {
+    audioContext.resume()
+  }
+
+  oscillator = audioContext.createOscillator()
+  gainNode = audioContext.createGain()
+
+  oscillator.type = waveform.value
+  oscillator.frequency.setValueAtTime(frequency.value, audioContext.currentTime)
+
+  const gainValue = volume.value / 100
+  gainNode.gain.setValueAtTime(0, audioContext.currentTime)
+  gainNode.gain.setTargetAtTime(gainValue, audioContext.currentTime, 0.05)
+
+  oscillator.connect(gainNode)
+  gainNode.connect(audioContext.destination)
+
+  oscillator.start()
+  isPlaying.value = true
+}
+
+const stopTone = () => {
+  if (oscillator && isPlaying.value) {
+    gainNode.gain.setTargetAtTime(0, audioContext.currentTime, 0.05)
+    setTimeout(() => {
+      if (oscillator) {
+        oscillator.stop()
+        oscillator.disconnect()
+        oscillator = null
+      }
+      if (gainNode) {
+        gainNode.disconnect()
+        gainNode = null
+      }
+    }, 100) // wait for ramp down
+  }
+  isPlaying.value = false
+}
+
+const handleFreqInput = (e) => {
+  let val = parseInt(e.target.value)
+  if (isNaN(val)) val = 440
+  // allow temporary out of bounds typing but bound eventually
+  frequency.value = val
+}
+
+const clampFreq = () => {
+  if (frequency.value < 1) frequency.value = 1
+  if (frequency.value > 24000) frequency.value = 24000
+}
+
+onUnmounted(() => {
+  stopTone()
+  if (audioContext) {
+    audioContext.close()
+  }
+})
+</script>
+
+<template>
+  <div class="tool-container full-width">
+    <div class="tool-panel">
+      <div class="panel-header">
+        <h2 class="tool-title">Tone Generator</h2>
+      </div>
+
+      <div class="tone-controls">
+        <!-- Frequency Control -->
+        <div class="control-group">
+          <div class="number-input-container">
+            <span class="input-label">Frequency</span>
+            <input
+              type="number"
+              class="bare-number-input"
+              v-model="frequency"
+              @change="clampFreq"
+              @input="handleFreqInput"
+              min="1"
+              max="24000"
+            />
+            <span class="input-unit">Hz</span>
+          </div>
+          <input
+            type="range"
+            class="slider"
+            v-model.number="frequency"
+            min="20"
+            max="10000"
+            step="1"
+          />
+          <div class="presets">
+            <button class="btn-preset" @click="frequency = 440">A4 (440)</button>
+            <button class="btn-preset" @click="frequency = 528">C5 (528)</button>
+            <button class="btn-preset" @click="frequency = 432">A4 (432)</button>
+            <button class="btn-preset" @click="frequency = 1000">1 kHz</button>
+            <button class="btn-preset" @click="frequency = 10000">10 kHz</button>
+          </div>
+        </div>
+
+        <!-- Waveform Control -->
+        <div class="control-group">
+          <div class="control-header">
+            <label>Waveform</label>
+            <Activity size="18" class="label-icon" />
+          </div>
+          <div class="waveform-selector">
+            <button
+              v-for="wf in waveforms"
+              :key="wf.value"
+              class="wf-btn"
+              :class="{ active: waveform === wf.value }"
+              @click="waveform = wf.value"
+              v-ripple
+            >
+              <div class="wf-btn-content">
+                <span class="wf-label">{{ wf.label }}</span>
+                <span class="wf-icon" v-html="wf.icon"></span>
+              </div>
+            </button>
+          </div>
+        </div>
+
+        <!-- Volume Control -->
+        <div class="control-group">
+          <div class="control-header">
+            <label>Volume</label>
+            <div class="vol-label">
+              <VolumeX v-if="volume == 0" size="18" />
+              <Volume2 v-else size="18" />
+              <span>{{ volume }}%</span>
+            </div>
+          </div>
+          <input
+            type="range"
+            class="slider"
+            v-model.number="volume"
+            min="0"
+            max="100"
+            step="1"
+          />
+        </div>
+
+        <!-- Play Button -->
+        <div class="action-section">
+          <button
+            class="play-btn"
+            :class="{ 'is-playing': isPlaying }"
+            @click="togglePlay"
+            v-ripple
+          >
+            <template v-if="!isPlaying">
+              <Play size="24" fill="currentColor" />
+              <span>Play Tone</span>
+            </template>
+            <template v-else>
+              <Square size="24" fill="currentColor" />
+              <span>Stop Tone</span>
+            </template>
+          </button>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tone-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1.5rem;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+}
+
+@media (max-width: 640px) {
+  .tone-controls {
+    background: transparent;
+    border: none;
+    padding: 0;
+  }
+}
+
+.control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.control-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.control-header label {
+  font-weight: bold;
+  color: var(--text-strong);
+}
+
+.label-icon {
+  color: var(--text-secondary);
+}
+
+.number-input-container {
+  display: flex;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--panel-border);
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+}
+
+.input-label {
+  color: var(--text-strong);
+  font-weight: bold;
+  flex: 1;
+}
+
+.bare-number-input {
+  background: transparent;
+  border: none;
+  color: var(--primary-accent);
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-align: right;
+  width: 80px;
+  outline: none;
+  font-family: inherit;
+  padding: 0;
+}
+
+.bare-number-input::-webkit-outer-spin-button,
+.bare-number-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+.bare-number-input[type=number] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.input-unit {
+  color: var(--text-secondary);
+  margin-left: 0.5rem;
+  font-weight: normal;
+}
+
+.vol-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text-secondary);
+  font-family: monospace;
+}
+
+/* Common Slider Styles */
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  background: var(--toggle-border);
+  border-radius: 5px;
+  outline: none;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--primary-accent);
+  cursor: pointer;
+  transition: transform 0.1s;
+  box-shadow: 0 0 10px var(--primary-accent);
+}
+
+.slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+
+.presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: -0.5rem;
+}
+
+.btn-preset {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--panel-border);
+  color: var(--text-secondary);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-preset:hover {
+  background: rgba(var(--primary-accent-rgb), 0.1);
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
+}
+
+.waveform-selector {
+  display: flex;
+  gap: 0.5rem;
+}
+
+@media (max-width: 640px) {
+  .waveform-selector {
+    flex-wrap: wrap;
+  }
+  .wf-btn {
+    flex: 1;
+    min-width: calc(50% - 0.5rem);
+    text-align: center;
+  }
+}
+
+.wf-btn {
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--panel-border);
+  color: var(--text-secondary);
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: all 0.2s;
+  flex: 1; /* make buttons take even space by default on desktop too */
+}
+
+.wf-btn-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.wf-label {
+  flex: 1;
+  text-align: left;
+}
+
+.wf-icon {
+  display: flex;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
+
+.wf-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.wf-btn.active {
+  background: rgba(var(--primary-accent-rgb), 0.15);
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
+  box-shadow: 0 0 10px rgba(var(--primary-accent-rgb), 0.2);
+}
+
+.wf-btn.active .wf-icon {
+  opacity: 1;
+}
+
+.action-section {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+.play-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  background: var(--primary-accent);
+  color: #fff;
+  border: none;
+  border-radius: 30px;
+  padding: 1rem 3rem;
+  font-size: 1.2rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(var(--primary-accent-rgb), 0.3);
+}
+
+.play-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(var(--primary-accent-rgb), 0.4);
+}
+
+.play-btn.is-playing {
+  background: #ef4444; /* red for stop */
+  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
+}
+
+.play-btn.is-playing:hover {
+  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
+}
+</style>
--- a/src/components/tools/UrlCleaner.vue
+++ b/src/components/tools/UrlCleaner.vue
@@ -110,7 +110,7 @@ onUnmounted(() => {
      <div class="panel-header">
        <h2 class="tool-title">URL Cleaner</h2>
        <div class="header-actions">
-          <button class="icon-btn settings-btn" @click="showExceptionsModal = true" title="Cleaning Exceptions">
+          <button class="icon-btn settings-btn" @click="showExceptionsModal = true" v-tooltip="'Cleaning Exceptions'" v-ripple>
            <Settings size="20" />
          </button>
          <ExtensionStatus :isReady="isExtensionReady" />
@@ -126,18 +126,19 @@ onUnmounted(() => {
            @keydown.enter.prevent="handleClean"
            rows="1"
          ></textarea>
-          <button class="btn-neon" @click="handleClean">
-            Clean
-          </button>
        </div>

        <div class="watch-toggle">
+          <button class="btn-neon" @click="handleClean" v-ripple>
+            Clean
+          </button>
          <button
            class="btn-neon toggle-btn"
            :class="{ 'active': isWatchEnabled && isExtensionReady }"
            @click="toggleWatch"
            :disabled="!isExtensionReady"
-            :title="!isExtensionReady ? 'Extension required for auto-watch' : 'Automatically clean URLs from clipboard'"
+            v-tooltip="!isExtensionReady ? 'Extension required for auto-watch' : 'Automatically clean URLs from clipboard'"
+            v-ripple
          >
            <Power size="18" />
            <span>Watch Clipboard</span>
@@ -148,15 +149,15 @@ onUnmounted(() => {

      <div class="history-section" v-if="cleanedHistory.length > 0">
        <div class="history-header">
-          <h3>Cleaned URLs</h3>
+          <h3>Cleaned URLs ({{ cleanedHistory.length }})</h3>
          <div class="history-actions">
-            <button class="icon-btn" @click="copyAllUrls" title="Copy all URLs">
+            <button class="icon-btn" @click="copyAllUrls" v-tooltip="'Copy all URLs'" v-ripple>
              <Copy size="18" />
            </button>
-            <button class="icon-btn" @click="downloadJson" title="Download JSON">
+            <button class="icon-btn" @click="downloadJson" v-tooltip="'Download JSON'" v-ripple>
              <Download size="18" />
            </button>
-            <button class="icon-btn delete-btn" @click="clearHistory" title="Clear History">
+            <button class="icon-btn delete-btn" @click="clearHistory" v-tooltip="'Clear History'" v-ripple>
              <Trash2 size="18" />
            </button>
          </div>
@@ -175,13 +176,13 @@ onUnmounted(() => {
              </div>
            </div>
            <div class="item-actions">
-              <button class="icon-btn" @click="copyToClipboard(item.cleaned)" title="Copy">
-                <Copy size="18" />
+              <button class="icon-btn" @click="copyToClipboard(item.cleaned)" v-tooltip="'Copy'" v-ripple>
+                <Copy size="16" />
              </button>
-              <a :href="item.cleaned" target="_blank" class="icon-btn" title="Open">
-                <ExternalLink size="18" />
+              <a :href="item.cleaned" target="_blank" class="icon-btn" v-tooltip="'Open'" v-ripple>
+                <ExternalLink size="16" />
              </a>
-              <button class="icon-btn delete-btn" @click="removeEntry(item.id)" title="Remove">
+              <button class="icon-btn delete-btn" @click="removeEntry(item.id)" v-tooltip="'Remove'" v-ripple>
                <X size="18" />
              </button>
            </div>
@@ -205,13 +206,6 @@ onUnmounted(() => {
 </template>

 <style scoped>
-.tool-container.full-width {
-  max-width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
 .input-section {
  display: flex;
  flex-direction: column;
@@ -259,7 +253,8 @@ onUnmounted(() => {

 .watch-toggle {
  display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  gap: 0.75rem;
 }

 .toggle-btn {
--- a/src/components/tools/UrlCleanerExceptionsModal.vue
+++ b/src/components/tools/UrlCleanerExceptionsModal.vue
@@ -30,7 +30,7 @@ onUnmounted(() => {

 const newRule = ref({
  domainPattern: '',
-  keepParams: '',
+  keepParams: [],
  keepHash: false,
  keepAllParams: false
 })
@@ -43,10 +43,12 @@ const localExceptions = computed({
 const addRule = () => {
  if (!newRule.value.domainPattern) return

-  const params = newRule.value.keepParams
-    .split(',')
-    .map(p => p.trim())
-    .filter(p => p)
+  // Flush any pending text in the param input before adding rule
+  if (pendingParamInput.value.trim()) {
+    addPendingParam(pendingParamInput.value)
+  }
+
+  const params = [...newRule.value.keepParams]

  const existingRuleIndex = localExceptions.value.findIndex(
    r => r.domainPattern === newRule.value.domainPattern
@@ -92,19 +94,48 @@ const addRule = () => {
  // Reset form
  newRule.value = {
    domainPattern: '',
-    keepParams: '',
+    keepParams: [],
    keepHash: false,
    keepAllParams: false
  }
+  pendingParamInput.value = ''
+}
+
+const pendingParamInput = ref('')
+
+const handleParamInputKeydown = (e) => {
+  if (e.key === 'Enter' || e.key === ',' || e.key === ' ') {
+    e.preventDefault()
+    addPendingParam(pendingParamInput.value)
+  } else if (e.key === 'Backspace' && pendingParamInput.value === '') {
+    // Remove last param if backspace is pressed on empty input
+    if (newRule.value.keepParams.length > 0) {
+      newRule.value.keepParams.pop()
+    }
+  }
+}
+
+const addPendingParam = (val) => {
+  const cleanVals = val.split(/[\s,]+/).map(v => v.trim()).filter(Boolean)
+  if (cleanVals.length > 0) {
+    const updatedParams = [...new Set([...newRule.value.keepParams, ...cleanVals])]
+    newRule.value.keepParams = updatedParams
+  }
+  pendingParamInput.value = ''
+}
+
+const removeNewRuleParam = (paramToRemove) => {
+  newRule.value.keepParams = newRule.value.keepParams.filter(p => p !== paramToRemove)
 }

 const editRule = (rule) => {
  newRule.value = {
    domainPattern: rule.domainPattern,
-    keepParams: Array.isArray(rule.keepParams) ? rule.keepParams.join(', ') : '',
+    keepParams: Array.isArray(rule.keepParams) ? [...rule.keepParams] : [],
    keepHash: !!rule.keepHash,
    keepAllParams: !!rule.keepAllParams
  }
+  pendingParamInput.value = ''
 }

 const removeRule = (id) => {
@@ -172,7 +203,7 @@ const resetToDefault = (ruleId) => {
 <template>
  <Teleport to="body">
    <div v-if="isOpen" class="modal-overlay" @click.self="$emit('close')">
-      <div class="modal-content">
+      <div class="modal-content glass-panel">
        <div class="modal-header">
          <h3>URL Cleaning Exceptions</h3>
          <button class="close-btn" @click="$emit('close')">
@@ -195,25 +226,35 @@ const resetToDefault = (ruleId) => {
                class="input-field"
                @keyup.enter="addRule"
              >
-              <input
-                v-model="newRule.keepParams"
-                placeholder="Keep params (comma separated, e.g. v, id)"
-                class="input-field"
-                @keyup.enter="addRule"
-              >
+              <div class="token-input-field input-field" @click="$refs.paramInput?.focus()">
+                <span v-for="param in newRule.keepParams" :key="param" class="token-badge">
+                  {{ param }}
+                  <button class="remove-token-btn" @click.stop="removeNewRuleParam(param)">
+                    <X size="12" />
+                  </button>
+                </span>
+                <input
+                  ref="paramInput"
+                  v-model="pendingParamInput"
+                  placeholder="Params (Space, Comma or Enter to add)"
+                  class="token-raw-input"
+                  @keydown="handleParamInputKeydown"
+                  @blur="addPendingParam(pendingParamInput)"
+                >
+              </div>
            </div>
            <div class="form-row checkbox-row">
              <div class="checkbox-group">
-                <label class="checkbox-label">
+                <label class="checkbox-label" v-ripple>
                  <input type="checkbox" v-model="newRule.keepHash">
                  Keep Anchor (#)
                </label>
-                <label class="checkbox-label">
+                <label class="checkbox-label" v-ripple>
                  <input type="checkbox" v-model="newRule.keepAllParams">
                  Keep all params
                </label>
              </div>
-              <button class="btn-neon small" @click="addRule" :disabled="!newRule.domainPattern">
+              <button class="btn-neon small" @click="addRule" :disabled="!newRule.domainPattern" v-ripple>
                <Plus size="16" /> Add Rule
              </button>
            </div>
@@ -227,13 +268,13 @@ const resetToDefault = (ruleId) => {

            <div v-for="rule in localExceptions" :key="rule.id" class="rule-item" :class="{ disabled: !rule.isEnabled }">
              <div class="rule-info">
-                <div class="rule-domain" @click="editRule(rule)" title="Click to edit">{{ rule.domainPattern }}</div>
+                <div class="rule-domain" @click="editRule(rule)" v-tooltip="'Click to edit'">{{ rule.domainPattern }}</div>
                <div class="rule-details">
                  <div class="params-list">
                    <template v-if="rule.keepAllParams">
                      <span class="detail-tag">
                        Keep all params
-                        <button class="remove-param-btn" @click.stop="toggleKeepAllParams(rule.id)" title="Disable keep all params">
+                        <button class="remove-param-btn" @click.stop="toggleKeepAllParams(rule.id)" v-tooltip="'Disable keep all params'">
                          <X size="12" />
                        </button>
                      </span>
@@ -241,14 +282,14 @@ const resetToDefault = (ruleId) => {
                    <template v-else>
                      <span v-for="param in rule.keepParams" :key="param" class="detail-tag">
                        {{ param }}
-                        <button class="remove-param-btn" @click.stop="removeParam(rule.id, param)" title="Remove parameter">
+                        <button class="remove-param-btn" @click.stop="removeParam(rule.id, param)" v-tooltip="'Remove parameter'">
                          <X size="12" />
                        </button>
                      </span>
                    </template>
                    <span v-if="rule.keepHash" class="detail-tag hash-tag">
                      Keep #
-                      <button class="remove-param-btn" @click.stop="toggleKeepHash(rule.id)" title="Remove hash exception">
+                      <button class="remove-param-btn" @click.stop="toggleKeepHash(rule.id)" v-tooltip="'Remove hash exception'">
                        <X size="12" />
                      </button>
                    </span>
@@ -261,7 +302,8 @@ const resetToDefault = (ruleId) => {
                <button
                  class="icon-btn"
                  @click="toggleRule(rule.id)"
-                  :title="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
+                  v-tooltip="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
+                  v-ripple
                >
                  <div class="toggle-switch" :class="{ active: rule.isEnabled }"></div>
                </button>
@@ -270,11 +312,12 @@ const resetToDefault = (ruleId) => {
                  v-if="!rule.isDefault"
                  class="icon-btn delete-btn"
                  @click="removeRule(rule.id)"
-                  title="Remove rule"
+                  v-tooltip="'Remove rule'"
+                  v-ripple
                >
                  <Trash2 size="18" />
                </button>
-                <button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" title="Restore default rule">
+                <button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" v-tooltip="'Restore default rule'" v-ripple>
                  <RotateCcw size="16" /> Default
                </button>
              </div>
@@ -303,10 +346,6 @@ const resetToDefault = (ruleId) => {
 }

 .modal-content {
-  background: var(--glass-bg);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 0;
  max-width: 800px;
@@ -314,7 +353,6 @@ const resetToDefault = (ruleId) => {
  max-height: 85vh;
  display: flex;
  flex-direction: column;
-  box-shadow: var(--glass-shadow);
  color: var(--text-color);
 }

@@ -439,10 +477,63 @@ const resetToDefault = (ruleId) => {
  outline: none;
 }

-.input-field:focus {
+.input-field:focus, .token-input-field:focus-within {
  border-color: var(--primary-accent);
 }

+.token-input-field {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+  padding: 0.4rem 0.6rem;
+  cursor: text;
+}
+
+.token-raw-input {
+  flex: 1;
+  min-width: 150px;
+  background: none;
+  border: none;
+  color: var(--text-color);
+  outline: none;
+  font-size: 0.95rem;
+  padding: 0.2rem 0;
+}
+
+.token-raw-input:focus {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.token-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  background: rgba(var(--primary-accent-rgb), 0.15);
+  border: 1px solid rgba(var(--primary-accent-rgb), 0.3);
+  color: var(--primary-accent);
+  padding: 0.15rem 0.4rem;
+  border-radius: 4px;
+  font-size: 0.85rem;
+}
+
+.remove-token-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.remove-token-btn:hover {
+  opacity: 1;
+}
+
 .checkbox-label {
  display: flex;
  align-items: center;
@@ -450,6 +541,31 @@ const resetToDefault = (ruleId) => {
  color: var(--text-secondary);
  font-size: 0.9rem;
  cursor: pointer;
+  padding: 0.4rem 0.8rem;
+  background: var(--toggle-bg);
+  border: 1px solid var(--toggle-border);
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.checkbox-label:hover {
+  border-color: var(--toggle-hover-border);
+  color: var(--text-color);
+}
+
+.checkbox-label:has(input:checked) {
+  background: rgba(var(--primary-accent-rgb), 0.2);
+  border-color: var(--primary-accent);
+  color: var(--primary-accent);
+}
+
+.checkbox-label input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
 }

 .btn-neon.small {
@@ -505,16 +621,7 @@ const resetToDefault = (ruleId) => {
  flex-wrap: wrap;
 }

-.detail-tag {
-  font-size: 0.8rem;
-  background: rgba(255, 255, 255, 0.1);
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  color: var(--text-secondary);
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-}
+

 .remove-param-btn {
  background: none;
--- a/src/components/tools/common/ExtensionStatus.vue
+++ b/src/components/tools/common/ExtensionStatus.vue
@@ -34,7 +34,7 @@ onUnmounted(() => {
 </script>

 <template>
-  <div class="extension-status" v-bind="$attrs" :class="{ 'is-ready': isReady }" @click="showModal = true" :title="isReady ? 'Extension Connected' : 'Extension Not Connected'">
+  <div class="extension-status" v-bind="$attrs" :class="{ 'is-ready': isReady }" @click="showModal = true" v-tooltip="isReady ? 'Extension Connected' : 'Extension Not Connected'">
    <Plug v-if="isReady" size="18" />
    <Plus v-else size="18" />
  </div>
@@ -76,7 +76,7 @@ onUnmounted(() => {
            The extension is active and ready to process your clipboard in the background.
          </p>
          <div class="modal-actions">
-            <button class="btn-neon" @click="showModal = false">Got it!</button>
+            <button class="btn-neon" @click="showModal = false" v-ripple>Got it!</button>
          </div>
        </div>
      </div>
@@ -132,16 +132,11 @@ onUnmounted(() => {
 }

 .modal-content {
-  background: var(--glass-bg);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 2.5rem;
  max-width: 500px;
  width: 90%;
  position: relative;
-  box-shadow: var(--glass-shadow);
  text-align: center;
  color: var(--text-color);
 }
--- a/src/composables/useCamera.js
+++ b/src/composables/useCamera.js
@@ -1,110 +1,110 @@
 import { ref, watch, onUnmounted } from 'vue'

 export function useCamera(videoRef) {
-    const stream = ref(null)
-    const facingMode = ref('environment')
-    const hasMultipleCameras = ref(false)
-    const isMirrored = ref(false)
-    const error = ref('')
+  const stream = ref(null)
+  const facingMode = ref('environment')
+  const hasMultipleCameras = ref(false)
+  const isMirrored = ref(false)
+  const error = ref('')

-    const checkCameras = async () => {
-        try {
-            if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
-                return
-            }
-            const devices = await navigator.mediaDevices.enumerateDevices()
-            const cameras = devices.filter(d => d.kind === 'videoinput')
-            hasMultipleCameras.value = cameras.length > 1
-        } catch (e) {
-            console.error('Error checking cameras:', e)
+  const checkCameras = async () => {
+    try {
+      if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
+        return
+      }
+      const devices = await navigator.mediaDevices.enumerateDevices()
+      const cameras = devices.filter(d => d.kind === 'videoinput')
+      hasMultipleCameras.value = cameras.length > 1
+    } catch (e) {
+      console.error('Error checking cameras:', e)
+    }
+  }
+
+  const stopCamera = () => {
+    if (stream.value) {
+      stream.value.getTracks().forEach(t => t.stop())
+      stream.value = null
+    }
+  }
+
+  const startCamera = async () => {
+    stopCamera()
+    error.value = ''
+
+    try {
+      const constraints = {
+        video: {
+          facingMode: facingMode.value,
+          width: { ideal: 1280 },
+          height: { ideal: 720 }
        }
-    }
+      }

-    const stopCamera = () => {
-        if (stream.value) {
-            stream.value.getTracks().forEach(t => t.stop())
-            stream.value = null
+      const mediaStream = await navigator.mediaDevices.getUserMedia(constraints)
+      stream.value = mediaStream
+
+      // Detect actual facing mode to mirror front camera correctly
+      const videoTrack = mediaStream.getVideoTracks()[0]
+      if (videoTrack) {
+        const settings = videoTrack.getSettings()
+        if (settings.facingMode) {
+          isMirrored.value = settings.facingMode === 'user'
+        } else {
+          // Fallback: check label for desktop cameras or assume requested mode
+          const label = videoTrack.label ? videoTrack.label.toLowerCase() : ''
+          if (label.includes('front') || label.includes('facetime') || label.includes('macbook')) {
+            isMirrored.value = true
+          } else {
+            isMirrored.value = facingMode.value === 'user'
+          }
        }
+      }
+
+      if (videoRef.value) {
+        videoRef.value.srcObject = mediaStream
+        return new Promise((resolve) => {
+          videoRef.value.onloadedmetadata = () => {
+            videoRef.value.play().catch(e => console.error('Play error', e))
+            resolve()
+          }
+        })
+      }
+    } catch (err) {
+      if (err.name === 'NotAllowedError') {
+        error.value = 'Camera permission denied'
+      } else if (err.name === 'NotFoundError') {
+        error.value = 'No camera found'
+      } else {
+        error.value = `Camera error: ${err.name}`
+      }
+      throw err // Let caller know it failed
    }
+  }

-    const startCamera = async () => {
-        stopCamera()
-        error.value = ''
+  const switchCamera = () => {
+    facingMode.value = facingMode.value === 'environment' ? 'user' : 'environment'
+  }

-        try {
-            const constraints = {
-                video: {
-                    facingMode: facingMode.value,
-                    width: { ideal: 1280 },
-                    height: { ideal: 720 }
-                }
-            }
-
-            const mediaStream = await navigator.mediaDevices.getUserMedia(constraints)
-            stream.value = mediaStream
-
-            // Detect actual facing mode to mirror front camera correctly
-            const videoTrack = mediaStream.getVideoTracks()[0]
-            if (videoTrack) {
-                const settings = videoTrack.getSettings()
-                if (settings.facingMode) {
-                    isMirrored.value = settings.facingMode === 'user'
-                } else {
-                    // Fallback: check label for desktop cameras or assume requested mode
-                    const label = videoTrack.label ? videoTrack.label.toLowerCase() : ''
-                    if (label.includes('front') || label.includes('facetime') || label.includes('macbook')) {
-                        isMirrored.value = true
-                    } else {
-                        isMirrored.value = facingMode.value === 'user'
-                    }
-                }
-            }
-
-            if (videoRef.value) {
-                videoRef.value.srcObject = mediaStream
-                return new Promise((resolve) => {
-                    videoRef.value.onloadedmetadata = () => {
-                        videoRef.value.play().catch(e => console.error('Play error', e))
-                        resolve()
-                    }
-                })
-            }
-        } catch (err) {
-            if (err.name === 'NotAllowedError') {
-                error.value = 'Camera permission denied'
-            } else if (err.name === 'NotFoundError') {
-                error.value = 'No camera found'
-            } else {
-                error.value = `Camera error: ${err.name}`
-            }
-            throw err // Let caller know it failed
-        }
+  watch(facingMode, () => {
+    if (stream.value) {
+      // Re-start if already running
+      startCamera().catch(() => { })
    }
+  })

-    const switchCamera = () => {
-        facingMode.value = facingMode.value === 'environment' ? 'user' : 'environment'
-    }
+  onUnmounted(() => {
+    stopCamera()
+  })

-    watch(facingMode, () => {
-        if (stream.value) {
-            // Re-start if already running
-            startCamera().catch(() => { })
-        }
-    })
-
-    onUnmounted(() => {
-        stopCamera()
-    })
-
-    return {
-        stream,
-        facingMode,
-        hasMultipleCameras,
-        isMirrored,
-        error,
-        checkCameras,
-        startCamera,
-        stopCamera,
-        switchCamera
-    }
+  return {
+    stream,
+    facingMode,
+    hasMultipleCameras,
+    isMirrored,
+    error,
+    checkCameras,
+    startCamera,
+    stopCamera,
+    switchCamera
+  }
 }
--- a/src/composables/useExtension.js
+++ b/src/composables/useExtension.js
@@ -31,7 +31,7 @@ export function useExtension() {
    extensionCheckInterval = setInterval(() => {
      window.postMessage({ type: 'TOOLS_APP_PING' }, '*')
      if (Date.now() - lastPongTime > TIMEOUT_THRESHOLD) {
-         isExtensionReady.value = false
+        isExtensionReady.value = false
      }
    }, PING_INTERVAL)
  }
--- a/src/composables/useQrDetection.js
+++ b/src/composables/useQrDetection.js
@@ -1,174 +1,174 @@
 import { ref, onMounted, onUnmounted } from 'vue'

 export function useQrDetection(videoRef, overlayCanvasRef) {
-    const barcodeDetector = ref(null)
-    const isDetecting = ref(false)
-    const error = ref('')
-    let scanRafId = null
+  let barcodeDetector = null  // must be plain variable, NOT a Vue ref (Proxy breaks native private fields)
+  const isDetecting = ref(false)
+  const error = ref('')
+  let scanRafId = null

-    // Function to initialize detector
-    const initDetector = async () => {
-        if (!barcodeDetector.value) {
-            if ('BarcodeDetector' in window) {
-                try {
-                    // Formats are optional, but specifying qr_code might be faster
-                    const formats = await window.BarcodeDetector.getSupportedFormats()
-                    if (formats.includes('qr_code')) {
-                        barcodeDetector.value = new window.BarcodeDetector({ formats: ['qr_code'] })
-                    } else {
-                        barcodeDetector.value = new window.BarcodeDetector()
-                    }
-                } catch (e) {
-                    // Fallback
-                    barcodeDetector.value = new window.BarcodeDetector()
-                }
-            } else {
-                error.value = 'Barcode Detection API not supported on this device/browser.'
-            }
-        }
-    }
-
-    const paintDetections = (codes) => {
-        const canvas = overlayCanvasRef.value
-        const video = videoRef.value
-
-        if (!canvas || !video) return
-
-        const ctx = canvas.getContext('2d')
-        const { width, height } = canvas.getBoundingClientRect()
-
-        // Update canvas size if needed (to match CSS size)
-        if (canvas.width !== width || canvas.height !== height) {
-            canvas.width = width
-            canvas.height = height
-        }
-
-        ctx.clearRect(0, 0, width, height)
-
-        if (!codes || codes.length === 0) return
-
-        const vw = video.videoWidth
-        const vh = video.videoHeight
-        if (!vw || !vh) return
-
-        // Calculate object-fit: cover scaling
-        const videoRatio = vw / vh
-        const canvasRatio = width / height
-
-        let drawWidth, drawHeight, startX, startY
-
-        if (canvasRatio > videoRatio) {
-            // Canvas is wider than video (video cropped top/bottom)
-            drawWidth = width
-            drawHeight = width / videoRatio
-            startX = 0
-            startY = (height - drawHeight) / 2
-        } else {
-            // Canvas is taller than video (video cropped left/right)
-            drawHeight = height
-            drawWidth = height * videoRatio
-            startY = 0
-            startX = (width - drawWidth) / 2
-        }
-
-        const scale = drawWidth / vw
-        // Styles
-        const styles = getComputedStyle(document.documentElement)
-        const accent = styles.getPropertyValue('--primary-accent').trim() || '#00f2fe'
-
-        ctx.lineWidth = 4
-        ctx.strokeStyle = accent
-        ctx.fillStyle = accent
-
-        codes.forEach(code => {
-            const points = code.cornerPoints
-            if (!points || points.length < 4) return
-
-            ctx.beginPath()
-
-            const transform = (p) => {
-                let x = p.x * scale + startX
-                let y = p.y * scale + startY
-                return { x, y }
-            }
-
-            const p0 = transform(points[0])
-            ctx.moveTo(p0.x, p0.y)
-
-            for (let i = 1; i < points.length; i++) {
-                const p = transform(points[i])
-                ctx.lineTo(p.x, p.y)
-            }
-
-            ctx.closePath()
-            ctx.stroke()
-
-            // Draw corners
-            points.forEach(p => {
-                const tp = transform(p)
-                ctx.beginPath()
-                ctx.arc(tp.x, tp.y, 4, 0, Math.PI * 2)
-                ctx.fill()
-            })
-        })
-    }
-
-    const startDetection = async (onDetectCallback) => {
-        error.value = ''
+  // Function to initialize detector
+  const initDetector = async () => {
+    if (!barcodeDetector) {
+      if ('BarcodeDetector' in window) {
        try {
-            await initDetector()
-            if (!barcodeDetector.value) {
-                if (!error.value) error.value = 'Barcode Detector failed to initialize'
-                return
-            }
-
-            isDetecting.value = true
-
-            const detectLoop = async () => {
-                if (!isDetecting.value || !videoRef.value || videoRef.value.paused || videoRef.value.ended) {
-                    scanRafId = requestAnimationFrame(detectLoop)
-                    return
-                }
-
-                try {
-                    const codes = await barcodeDetector.value.detect(videoRef.value)
-                    paintDetections(codes)
-                    if (codes.length > 0 && onDetectCallback) {
-                        onDetectCallback(codes)
-                    }
-                } catch (e) {
-                    // Silent catch for intermittent detection frames failing
-                }
-                if (isDetecting.value) {
-                    scanRafId = requestAnimationFrame(detectLoop)
-                }
-            }
-
-            detectLoop() // start loop
-
+          const formats = await window.BarcodeDetector.getSupportedFormats()
+          if (formats.includes('qr_code')) {
+            barcodeDetector = new window.BarcodeDetector({ formats: ['qr_code'] })
+          } else {
+            barcodeDetector = new window.BarcodeDetector()
+          }
        } catch (e) {
-            error.value = `Detection error: ${e.message}`
+          barcodeDetector = new window.BarcodeDetector()
        }
+      } else {
+        error.value = 'Barcode Detection API not supported on this device/browser.'
+      }
+    }
+  }
+
+  const paintDetections = (codes) => {
+    const canvas = overlayCanvasRef.value
+    const video = videoRef.value
+
+    if (!canvas || !video) return
+
+    const ctx = canvas.getContext('2d')
+    const { width, height } = canvas.getBoundingClientRect()
+
+    // Update canvas size if needed (to match CSS size)
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width
+      canvas.height = height
    }

-    const stopDetection = () => {
-        isDetecting.value = false
-        if (scanRafId) cancelAnimationFrame(scanRafId)
-        // Clear canvas
-        if (overlayCanvasRef.value) {
-            const ctx = overlayCanvasRef.value.getContext('2d')
-            ctx.clearRect(0, 0, overlayCanvasRef.value.width, overlayCanvasRef.value.height)
-        }
+    ctx.clearRect(0, 0, width, height)
+
+    if (!codes || codes.length === 0) return
+
+    const vw = video.videoWidth
+    const vh = video.videoHeight
+    if (!vw || !vh) return
+
+    // Calculate object-fit: cover scaling
+    const videoRatio = vw / vh
+    const canvasRatio = width / height
+
+    let drawWidth, drawHeight, startX, startY
+
+    if (canvasRatio > videoRatio) {
+      // Canvas is wider than video (video cropped top/bottom)
+      drawWidth = width
+      drawHeight = width / videoRatio
+      startX = 0
+      startY = (height - drawHeight) / 2
+    } else {
+      // Canvas is taller than video (video cropped left/right)
+      drawHeight = height
+      drawWidth = height * videoRatio
+      startY = 0
+      startX = (width - drawWidth) / 2
    }

-    onUnmounted(() => {
-        stopDetection()
+    const scale = drawWidth / vw
+    // Styles
+    const styles = getComputedStyle(document.documentElement)
+    const accent = styles.getPropertyValue('--primary-accent').trim() || '#00f2fe'
+
+    ctx.lineWidth = 4
+    ctx.strokeStyle = accent
+    ctx.fillStyle = accent
+
+    codes.forEach(code => {
+      const points = code.cornerPoints
+      if (!points || points.length < 4) return
+
+      ctx.beginPath()
+
+      const transform = (p) => {
+        let x = p.x * scale + startX
+        let y = p.y * scale + startY
+        return { x, y }
+      }
+
+      const p0 = transform(points[0])
+      ctx.moveTo(p0.x, p0.y)
+
+      for (let i = 1; i < points.length; i++) {
+        const p = transform(points[i])
+        ctx.lineTo(p.x, p.y)
+      }
+
+      ctx.closePath()
+      ctx.stroke()
+
+      // Draw corners
+      points.forEach(p => {
+        const tp = transform(p)
+        ctx.beginPath()
+        ctx.arc(tp.x, tp.y, 4, 0, Math.PI * 2)
+        ctx.fill()
+      })
    })
+  }

-    return {
-        error,
-        isDetecting,
-        startDetection,
-        stopDetection
+  const startDetection = async (onDetectCallback) => {
+    error.value = ''
+    try {
+      await initDetector()
+      if (!barcodeDetector) {
+        if (!error.value) error.value = 'Barcode Detector failed to initialize'
+        return
+      }
+
+      isDetecting.value = true
+
+      const detectLoop = async () => {
+        const video = videoRef.value
+        if (!isDetecting.value) return
+        if (!video || video.readyState < 2) {
+          scanRafId = requestAnimationFrame(detectLoop)
+          return
+        }
+
+        try {
+          const codes = await barcodeDetector.detect(video)
+          paintDetections(codes)
+          if (codes.length > 0 && onDetectCallback) {
+            onDetectCallback(codes)
+          }
+        } catch (e) {
+          // Silent catch for intermittent detection frames failing
+        }
+        if (isDetecting.value) {
+          scanRafId = requestAnimationFrame(detectLoop)
+        }
+      }
+
+      detectLoop() // start loop
+
+    } catch (e) {
+      error.value = `Detection error: ${e.message}`
    }
+  }
+
+  const stopDetection = () => {
+    isDetecting.value = false
+    if (scanRafId) cancelAnimationFrame(scanRafId)
+    // Clear canvas
+    if (overlayCanvasRef.value) {
+      const ctx = overlayCanvasRef.value.getContext('2d')
+      ctx.clearRect(0, 0, overlayCanvasRef.value.width, overlayCanvasRef.value.height)
+    }
+  }
+
+  onUnmounted(() => {
+    stopDetection()
+  })
+
+  return {
+    error,
+    isDetecting,
+    startDetection,
+    stopDetection
+  }
 }
--- a/src/composables/useTooltip.js
+++ b/src/composables/useTooltip.js
@@ -0,0 +1,34 @@
+import { reactive } from 'vue'
+
+export const tooltipState = reactive({
+  isVisible: false,
+  text: '',
+  targetRect: null
+})
+
+export function showTooltip(el, text) {
+  if (!text) return;
+
+  if (!el.hasAttribute('aria-label')) {
+    el.setAttribute('aria-label', text);
+  }
+
+  const rect = el.getBoundingClientRect();
+  tooltipState.targetRect = {
+    top: rect.top,
+    left: rect.left,
+    width: rect.width,
+    bottom: rect.bottom
+  };
+  tooltipState.text = text;
+  tooltipState.isVisible = true;
+}
+
+// Hide tooltip on any scroll event to avoid floating detached tooltips
+if (typeof window !== 'undefined') {
+  window.addEventListener('scroll', hideTooltip, { passive: true, capture: true })
+}
+
+export function hideTooltip() {
+  tooltipState.isVisible = false;
+}
--- a/src/composables/useUrlCleaner.js
+++ b/src/composables/useUrlCleaner.js
@@ -1,115 +1,115 @@
 import { useLocalStorage } from './useLocalStorage'

 export function useUrlCleaner() {
-    const cleanedHistory = useLocalStorage('url-cleaner-history', [])
-    const isWatchEnabled = useLocalStorage('url-cleaner-watch-enabled', false)
+  const cleanedHistory = useLocalStorage('url-cleaner-history', [])
+  const isWatchEnabled = useLocalStorage('url-cleaner-watch-enabled', false)

-    const defaultExceptions = [
-        { id: 'yt', domainPattern: '*.youtube.com', keepParams: ['v', 't'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true },
-        { id: 'yt-short', domainPattern: 'youtu.be', keepParams: ['t'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true }
-    ]
-    const exceptions = useLocalStorage('url-cleaner-exceptions', defaultExceptions)
+  const defaultExceptions = [
+    { id: 'yt', domainPattern: '*.youtube.com', keepParams: ['v', 't'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true },
+    { id: 'yt-short', domainPattern: 'youtu.be', keepParams: ['t'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true }
+  ]
+  const exceptions = useLocalStorage('url-cleaner-exceptions', defaultExceptions)

-    const matchDomain = (pattern, domain) => {
-        // Escape regex chars except *
-        const regexString = '^' + pattern.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*') + '$'
-        return new RegExp(regexString, 'i').test(domain)
-    }
+  const matchDomain = (pattern, domain) => {
+    // Escape regex chars except *
+    const regexString = '^' + pattern.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*') + '$'
+    return new RegExp(regexString, 'i').test(domain)
+  }

-    const processUrl = (text, autoClipboard = false, writeClipboardFn = null) => {
-        try {
-            // Basic URL validation
-            if (!text.match(/^https?:\/\//i)) {
-                if (autoClipboard) return text
+  const processUrl = (text, autoClipboard = false, writeClipboardFn = null) => {
+    try {
+      // Basic URL validation
+      if (!text.match(/^https?:\/\//i)) {
+        if (autoClipboard) return text
+      }
+
+      const originalLength = text.length
+      let cleanedUrl = text
+
+      try {
+        const urlObj = new URL(text)
+        const hostname = urlObj.hostname
+
+        const matchedRule = exceptions.value.find(rule =>
+          rule.isEnabled && matchDomain(rule.domainPattern, hostname)
+        )
+
+        if (matchedRule) {
+          if (!matchedRule.keepAllParams) {
+            const params = new URLSearchParams(urlObj.search)
+            const keys = Array.from(params.keys())
+
+            for (const key of keys) {
+              if (!matchedRule.keepParams.includes(key)) {
+                params.delete(key)
+              }
            }
+            urlObj.search = params.toString()
+          }

-            const originalLength = text.length
-            let cleanedUrl = text
-
-            try {
-                const urlObj = new URL(text)
-                const hostname = urlObj.hostname
-
-                const matchedRule = exceptions.value.find(rule =>
-                    rule.isEnabled && matchDomain(rule.domainPattern, hostname)
-                )
-
-                if (matchedRule) {
-                    if (!matchedRule.keepAllParams) {
-                        const params = new URLSearchParams(urlObj.search)
-                        const keys = Array.from(params.keys())
-
-                        for (const key of keys) {
-                            if (!matchedRule.keepParams.includes(key)) {
-                                params.delete(key)
-                            }
-                        }
-                        urlObj.search = params.toString()
-                    }
-
-                    if (!matchedRule.keepHash) {
-                        urlObj.hash = ''
-                    }
-                } else {
-                    if (urlObj.search || urlObj.hash) {
-                        urlObj.search = ''
-                        urlObj.hash = ''
-                    }
-                }
-
-                cleanedUrl = urlObj.toString()
-            } catch (e) {
-                return text
-            }
-
-            if (cleanedUrl === text && autoClipboard) {
-                return text
-            }
-
-            const newLength = cleanedUrl.length
-            const savedChars = originalLength - newLength
-            const savedPercent = originalLength > 0 ? Math.round((savedChars / originalLength) * 100) : 0
-
-            const entry = {
-                id: Date.now(),
-                original: text,
-                cleaned: cleanedUrl,
-                savedPercent,
-                timestamp: new Date().toLocaleTimeString()
-            }
-
-            cleanedHistory.value.unshift(entry)
-
-            if (cleanedHistory.value.length > 50) {
-                cleanedHistory.value.pop()
-            }
-
-            if (autoClipboard && savedChars > 0 && writeClipboardFn) {
-                writeClipboardFn(cleanedUrl)
-            }
-
-            return cleanedUrl
-        } catch (e) {
-            console.error('Error processing URL:', e)
-            return text
+          if (!matchedRule.keepHash) {
+            urlObj.hash = ''
+          }
+        } else {
+          if (urlObj.search || urlObj.hash) {
+            urlObj.search = ''
+            urlObj.hash = ''
+          }
        }
-    }

-    const removeEntry = (id) => {
-        cleanedHistory.value = cleanedHistory.value.filter(item => item.id !== id)
-    }
+        cleanedUrl = urlObj.toString()
+      } catch (e) {
+        return text
+      }

-    const clearHistory = () => {
-        cleanedHistory.value = []
-    }
+      if (cleanedUrl === text && autoClipboard) {
+        return text
+      }

-    return {
-        cleanedHistory,
-        isWatchEnabled,
-        exceptions,
-        defaultExceptions,
-        processUrl,
-        removeEntry,
-        clearHistory
+      const newLength = cleanedUrl.length
+      const savedChars = originalLength - newLength
+      const savedPercent = originalLength > 0 ? Math.round((savedChars / originalLength) * 100) : 0
+
+      const entry = {
+        id: Date.now(),
+        original: text,
+        cleaned: cleanedUrl,
+        savedPercent,
+        timestamp: new Date().toLocaleTimeString()
+      }
+
+      cleanedHistory.value.unshift(entry)
+
+      if (cleanedHistory.value.length > 50) {
+        cleanedHistory.value.pop()
+      }
+
+      if (autoClipboard && savedChars > 0 && writeClipboardFn) {
+        writeClipboardFn(cleanedUrl)
+      }
+
+      return cleanedUrl
+    } catch (e) {
+      console.error('Error processing URL:', e)
+      return text
    }
+  }
+
+  const removeEntry = (id) => {
+    cleanedHistory.value = cleanedHistory.value.filter(item => item.id !== id)
+  }
+
+  const clearHistory = () => {
+    cleanedHistory.value = []
+  }
+
+  return {
+    cleanedHistory,
+    isWatchEnabled,
+    exceptions,
+    defaultExceptions,
+    processUrl,
+    removeEntry,
+    clearHistory
+  }
 }
--- a/src/directives/ripple.js
+++ b/src/directives/ripple.js
@@ -19,7 +19,7 @@ const Ripple = {

      // Allow custom color via directive value
      if (binding.value && typeof binding.value === 'string') {
-          circle.style.backgroundColor = binding.value;
+        circle.style.backgroundColor = binding.value;
      }

      el.appendChild(circle);
--- a/src/directives/tooltip.js
+++ b/src/directives/tooltip.js
@@ -0,0 +1,84 @@
+import { showTooltip, hideTooltip, tooltipState } from '../composables/useTooltip'
+
+export const tooltipDirective = {
+  mounted(el, binding) {
+    el._tooltipText = binding.value;
+    let touchTimeout = null;
+    let isTouch = false;
+
+    el._handleMouseEnter = () => {
+      if (!isTouch) showTooltip(el, el._tooltipText);
+    };
+    el._handleMouseLeave = () => {
+      if (!isTouch) hideTooltip();
+    };
+    el._handleFocus = () => {
+      if (!isTouch) showTooltip(el, el._tooltipText);
+    };
+    el._handleBlur = () => {
+      if (!isTouch) hideTooltip();
+    };
+
+    el._handleTouchStart = () => {
+      isTouch = true;
+      if (touchTimeout) clearTimeout(touchTimeout);
+      touchTimeout = setTimeout(() => {
+        showTooltip(el, el._tooltipText);
+      }, 400); // 400ms long press threshold
+    };
+
+    el._handleTouchEnd = () => {
+      if (touchTimeout) clearTimeout(touchTimeout);
+      hideTooltip();
+      // Block ensuing simulated mouseenter events
+      setTimeout(() => { isTouch = false; }, 500);
+    };
+
+    el._handleTouchCancel = () => {
+      if (touchTimeout) clearTimeout(touchTimeout);
+      hideTooltip();
+      setTimeout(() => { isTouch = false; }, 500);
+    };
+
+    el._handleContextMenu = (e) => {
+      // Prevent the OS context menu if we're showing a tooltip via long press
+      if (isTouch && tooltipState.isVisible && tooltipState.text === el._tooltipText) {
+        e.preventDefault();
+      }
+    };
+
+    el.addEventListener('mouseenter', el._handleMouseEnter);
+    el.addEventListener('mouseleave', el._handleMouseLeave);
+    el.addEventListener('focus', el._handleFocus);
+    el.addEventListener('blur', el._handleBlur);
+
+    el.addEventListener('touchstart', el._handleTouchStart, { passive: true });
+    el.addEventListener('touchend', el._handleTouchEnd);
+    el.addEventListener('touchmove', el._handleTouchCancel, { passive: true });
+    el.addEventListener('touchcancel', el._handleTouchCancel);
+    el.addEventListener('contextmenu', el._handleContextMenu);
+  },
+  updated(el, binding) {
+    el._tooltipText = binding.value;
+
+    if (tooltipState.isVisible && tooltipState.text !== binding.value) {
+      if (el.matches(':hover') || document.activeElement === el) {
+        showTooltip(el, binding.value);
+      }
+    }
+  },
+  unmounted(el) {
+    if (el._handleMouseEnter) {
+      el.removeEventListener('mouseenter', el._handleMouseEnter);
+      el.removeEventListener('mouseleave', el._handleMouseLeave);
+      el.removeEventListener('focus', el._handleFocus);
+      el.removeEventListener('blur', el._handleBlur);
+      el.removeEventListener('touchstart', el._handleTouchStart);
+      el.removeEventListener('touchend', el._handleTouchEnd);
+      el.removeEventListener('touchmove', el._handleTouchCancel);
+      el.removeEventListener('touchcancel', el._handleTouchCancel);
+      el.removeEventListener('contextmenu', el._handleContextMenu);
+    }
+    hideTooltip();
+  }
+};
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import './style.css'
 import App from './App.vue'
 import router from './router'
 import Ripple from './directives/ripple'
+import { tooltipDirective } from './directives/tooltip'
 import { BarcodeDetector, prepareZXingModule } from 'barcode-detector/ponyfill'

 // Configure BarcodeDetector polyfill to use local WASM file
@@ -28,5 +29,6 @@ try {
 const app = createApp(App)

 app.directive('ripple', Ripple)
+app.directive('tooltip', tooltipDirective)
 app.use(router)
 app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,7 @@ import ClipboardSniffer from '../components/tools/ClipboardSniffer.vue'
 import UrlCleaner from '../components/tools/UrlCleaner.vue'
 import QrScanner from '../components/tools/QrScanner.vue'
 import QrCode from '../components/tools/QrCode.vue'
+import ToneGenerator from '../components/tools/ToneGenerator.vue'
 import PrivacyPolicy from '../views/PrivacyPolicy.vue'

 const routes = [
@@ -34,7 +35,7 @@ const routes = [
    component: QrScanner
  },
  {
-    path: '/qr-code',
+    path: '/qr-code/:payload?',
    name: 'QrCode',
    component: QrCode
  },
@@ -42,6 +43,11 @@ const routes = [
    path: '/extension-privacy-policy',
    name: 'PrivacyPolicy',
    component: PrivacyPolicy
+  },
+  {
+    path: '/tone-generator',
+    name: 'ToneGenerator',
+    component: ToneGenerator
  }
 ]

--- a/src/style.css
+++ b/src/style.css
@@ -24,6 +24,7 @@
  --accent-cyan: #00f2fe;
  --accent-purple: #4facfe;
  --primary-accent: #00f2fe;
+  --primary-accent-rgb: 0, 242, 254;
  --title-glow: rgba(0, 255, 255, 0.2);
  --toggle-bg: rgba(255, 255, 255, 0.08);
  --toggle-border: rgba(255, 255, 255, 0.2);
@@ -44,14 +45,9 @@
  --ripple-color: rgba(255, 255, 255, 0.3);
  --nav-item-weight: 400;
  --list-hover-bg: rgba(255, 255, 255, 0.05);
+  --list-border: rgba(255, 255, 255, 0.12);
  --header-bg: rgba(0, 0, 0, 0.6);

-  color: var(--text-color);
-  background-color: #242424;
-  /* Fallback */
-  background: var(--bg-gradient);
-  background-attachment: fixed;
-
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
@@ -59,9 +55,9 @@
 }

 :root[data-theme="light"] {
-  --bg-gradient: radial-gradient(circle at center, #f8fafc 0%, #e2e8f0 100%);
-  --glass-bg: rgba(255, 255, 255, 0.85);
-  --glass-border: rgba(255, 255, 255, 0.8);
+  --bg-gradient: radial-gradient(circle at center, #ffffff 0%, #ddd 100%);
+  --glass-bg: rgba(255, 255, 255, 0.45);
+  --glass-border: rgba(15, 23, 42, 0.2);
  --glass-shadow: 0 8px 32px 0 rgba(30, 41, 59, 0.15);
  --text-color: #0f172a;
  --text-strong: #020617;
@@ -70,6 +66,7 @@
  --accent-cyan: #0ea5e9;
  --accent-purple: #6366f1;
  --primary-accent: #0ea5e9;
+  --primary-accent-rgb: 14, 165, 233;
  --title-glow: rgba(14, 165, 233, 0.35);
  --toggle-bg: rgba(255, 255, 255, 1);
  --toggle-border: rgba(15, 23, 42, 0.2);
@@ -88,7 +85,8 @@
  --button-active-shadow: 0 0 18px rgba(14, 165, 233, 0.25);
  --title-gradient: linear-gradient(45deg, #0ea5e9, #6366f1);
  --ripple-color: rgba(0, 0, 0, 0.1);
-  --list-hover-bg: rgba(255, 255, 255, 0.5);
+  --list-hover-bg: rgba(15, 23, 42, 0.05);
+  --list-border: rgba(15, 23, 42, 0.08);
  --header-bg: rgba(255, 255, 255, 0.6);
 }

@@ -100,6 +98,12 @@ body {
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
+
+  color: var(--text-color);
+  background-color: var(--bg-gradient);
+  /* fallback but works if variable contains simple color */
+  background: var(--bg-gradient);
+  background-attachment: fixed;
 }

 .selectable {
@@ -141,6 +145,10 @@ body {
  padding: 0.5rem;
 }

+.tool-container.full-width {
+  flex-direction: column;
+}
+
 .tool-panel {
  width: 100%;
  padding: 1rem;
@@ -206,6 +214,12 @@ body {
  box-sizing: border-box;
 }

+::placeholder {
+  color: var(--text-muted);
+  opacity: 1;
+  /* Override Firefox default opacity */
+}
+
 .tool-textarea {
  font-family: monospace;
  resize: none;
@@ -300,6 +314,24 @@ button:focus {
  border-color: var(--accent-cyan);
 }

+.btn-neon.primary {
+  background: var(--primary-accent);
+  color: #000;
+  border-color: var(--primary-accent);
+  font-weight: 600;
+}
+
+.btn-neon.primary:hover {
+  background: var(--primary-accent);
+  opacity: 0.9;
+  box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
+}
+
+:root[data-theme="light"] .btn-neon.primary:hover {
+  box-shadow: 0 0 18px rgba(14, 165, 233, 0.4);
+}
+
+
 .btn-neon:active {
  transform: translateY(1px);
  box-shadow: var(--button-active-shadow);
@@ -358,12 +390,20 @@ button:focus {
  outline: none;
 }

+button:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--primary-accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
 input:focus,
 select:focus,
 textarea:focus,
 .number-control:focus-within {
  border-color: var(--primary-accent) !important;
  box-shadow: 0 0 0 1px var(--primary-accent) !important;
+  transition: border-color 0.2s, box-shadow 0.2s;
 }

 /* --- Global Checkbox Styles --- */
@@ -503,6 +543,19 @@ textarea:focus,
  border: 1px solid rgba(0, 0, 0, 0.06);
 }

+.detail-tag {
+  font-size: 0.8rem;
+  background: var(--list-hover-bg);
+  border: 1px solid var(--list-border);
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  transition: all 0.2s ease;
+}
+
 /* --- Global Number Control Styles --- */
 .number-control {
  display: flex;
@@ -511,7 +564,10 @@ textarea:focus,
  border: 1px solid var(--toggle-border);
  border-radius: 8px;
  overflow: hidden;
-  height: 40px;
+  height: auto;
+  min-height: 40px;
+  flex-wrap: wrap;
+  /* allow wrapping on very small screens */
 }

 .control-btn {
@@ -539,11 +595,12 @@ textarea:focus,
  border: none;
  color: var(--text-color);
  flex: 1;
-  min-width: 60px;
+  min-width: 40px;
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  appearance: textfield;
+  padding: 0.2rem;
 }

 .number-input::-webkit-outer-spin-button,
@@ -580,6 +637,14 @@ textarea:focus,
  color: var(--text-strong);
 }

+.history-actions,
+.results-actions,
+.header-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
 .history-list,
 .codes-list {
  flex: 1;
@@ -593,7 +658,7 @@ textarea:focus,
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
-  border-bottom: 1px solid var(--glass-border);
+  border-bottom: 1px solid var(--list-border);
  transition: background 0.2s;
 }

--- a/src/workers/qrcode.worker.js
+++ b/src/workers/qrcode.worker.js
@@ -0,0 +1,66 @@
+import QRCode from 'qrcode'
+
+self.onmessage = async (e) => {
+  const { id, text, ecc, isBgTransparent, bgType, bgColor1, bgColor2, bgGradPos, fgType, fgColor1, fgColor2, fgGradPos } = e.data
+
+  if (!text) {
+    self.postMessage({ id, svgContent: '' })
+    return
+  }
+
+  try {
+    let svgContent = await QRCode.toString(text, {
+      type: 'svg',
+      errorCorrectionLevel: ecc,
+      margin: 1,
+      color: {
+        dark: fgType === 'solid' ? fgColor1 : '#000000',
+        light: isBgTransparent ? '#00000000' : (bgType === 'solid' ? bgColor1 : '#00000000')
+      }
+    })
+
+    let defsHtml = ''
+
+    if (fgType !== 'solid') {
+      const isLinear = fgType === 'linear'
+      const pos = fgGradPos || { x1: 0, y1: 0, x2: 100, y2: 100 }
+      const r = Math.sqrt(Math.pow(pos.x2 - pos.x1, 2) + Math.pow(pos.y2 - pos.y1, 2))
+      defsHtml += isLinear
+        ? `<linearGradient id="qr-fg-grad" x1="${pos.x1}%" y1="${pos.y1}%" x2="${pos.x2}%" y2="${pos.y2}%"><stop offset="0%" stop-color="${fgColor1}" /><stop offset="100%" stop-color="${fgColor2}" /></linearGradient>`
+        : `<radialGradient id="qr-fg-grad" cx="${pos.x1}%" cy="${pos.y1}%" r="${r}%"><stop offset="0%" stop-color="${fgColor1}" /><stop offset="100%" stop-color="${fgColor2}" /></radialGradient>`
+    }
+
+    if (!isBgTransparent && bgType !== 'solid') {
+      const isLinear = bgType === 'linear'
+      const pos = bgGradPos || { x1: 0, y1: 0, x2: 100, y2: 100 }
+      const r = Math.sqrt(Math.pow(pos.x2 - pos.x1, 2) + Math.pow(pos.y2 - pos.y1, 2))
+      defsHtml += isLinear
+        ? `<linearGradient id="qr-bg-grad" x1="${pos.x1}%" y1="${pos.y1}%" x2="${pos.x2}%" y2="${pos.y2}%"><stop offset="0%" stop-color="${bgColor1}" /><stop offset="100%" stop-color="${bgColor2}" /></linearGradient>`
+        : `<radialGradient id="qr-bg-grad" cx="${pos.x1}%" cy="${pos.y1}%" r="${r}%"><stop offset="0%" stop-color="${bgColor1}" /><stop offset="100%" stop-color="${bgColor2}" /></radialGradient>`
+    }
+
+    if (defsHtml) {
+      svgContent = svgContent.replace('shape-rendering="crispEdges">', `shape-rendering="crispEdges"><defs>${defsHtml}</defs>`)
+    }
+
+    if (fgType !== 'solid') {
+      // qrcode outputs <path stroke="#000000"...> so it's safe to replace
+      svgContent = svgContent.replace(/stroke="#000000"/g, 'stroke="url(#qr-fg-grad)"')
+    }
+
+    if (!isBgTransparent && bgType !== 'solid') {
+      // Find viewBox to inject background rect
+      const viewBoxMatch = svgContent.match(/viewBox="0 0 (\d+) (\d+)"/)
+      if (viewBoxMatch) {
+        const w = viewBoxMatch[1]
+        const h = viewBoxMatch[2]
+        // Inject a rect immediately inside the svg
+        svgContent = svgContent.replace('</defs>', `</defs><rect width="${w}" height="${h}" fill="url(#qr-bg-grad)" />`)
+      }
+    }
+
+    self.postMessage({ id, svgContent })
+  } catch (err) {
+    self.postMessage({ id, error: err.message })
+  }
+}
Author	SHA1	Message	Date
Grzegorz Kucmierz	65089fb6d2	0.7.1 All checks were successful Deploy to Production / deploy (push) Successful in 24s Details	2026-03-04 06:19:59 +00:00
Grzegorz Kucmierz	ba6514add2	style: add svg icons for waveforms in Tone Generator	2026-03-04 06:19:58 +00:00
Grzegorz Kucmierz	15a6a143ee	0.7.0 All checks were successful Deploy to Production / deploy (push) Successful in 15s Details	2026-03-04 06:14:03 +00:00
Grzegorz Kucmierz	024bd0f20d	feat: add Tone Generator tool with precise audio controls and wave selection	2026-03-04 06:13:52 +00:00
Grzegorz Kucmierz	d395d8754a	0.6.24 All checks were successful Deploy to Production / deploy (push) Successful in 27s Details	2026-03-04 05:29:38 +00:00
Grzegorz Kucmierz	4c1815b3b3	chore: add open graph meta tags and preview image All checks were successful Deploy to Production / deploy (push) Successful in 14s Details	2026-03-04 05:28:31 +00:00
Grzegorz Kucmierz	d82f5ec7c5	0.6.23 All checks were successful Deploy to Production / deploy (push) Successful in 24s Details	2026-03-04 05:22:07 +00:00
Grzegorz Kucmierz	4711102407	feat(qr): improve mobile UX for scanner and generator	2026-03-04 05:21:53 +00:00
Grzegorz Kucmierz	a367d364df	0.6.22 All checks were successful Deploy to Production / deploy (push) Successful in 16s Details	2026-03-04 04:30:46 +00:00
Grzegorz Kucmierz	27fee3ac34	feat: replace native titles with global vue tooltips	2026-03-04 04:30:38 +00:00
Grzegorz Kucmierz	b5a79f8dbe	0.6.21 All checks were successful Deploy to Production / deploy (push) Successful in 16s Details	2026-03-04 04:11:37 +00:00
Grzegorz Kucmierz	b6eb33f205	feat(qr): refine gradient drag handles with visual offsets, magnetic snapping to corners, and floating icon toggle	2026-03-04 04:11:05 +00:00
Grzegorz Kucmierz	bec6a0ec8f	style(qr): synchronize gradient handle and line styles with CSS variables	2026-03-04 03:35:29 +00:00
Grzegorz Kucmierz	52024ad7c6	style(qr): make gradient edit handles and lines thin black with delicate white glow	2026-03-04 03:27:31 +00:00
Grzegorz Kucmierz	805b986a7b	style(qr): enhance editable gradient handles with a glow and add visibility toggle	2026-03-04 03:24:53 +00:00
Grzegorz Kucmierz	8fa0c9bd44	feat(qr): add draggable gradient handles for background and foreground styling	2026-03-04 03:22:56 +00:00
Grzegorz Kucmierz	9f9ea255a8	feat(qr): implement background style and gradient support for QR generation	2026-03-04 03:18:06 +00:00
Grzegorz Kucmierz	858e880c38	fix(qr): fix svg attribute malformation when injecting gradient defs	2026-03-04 03:15:19 +00:00
Grzegorz Kucmierz	f8953984ef	feat(qr): add background and foreground colors/gradient customization	2026-03-04 03:13:39 +00:00
Grzegorz Kucmierz	6be7abfe02	feat(qr): sync generator text to url path payload and add generator button to scanner list All checks were successful Deploy to Production / deploy (push) Successful in 24s Details	2026-03-04 03:07:17 +00:00
Grzegorz Kucmierz	fdd841177b	0.6.20 All checks were successful Deploy to Production / deploy (push) Successful in 20s Details	2026-03-04 02:47:53 +00:00
Grzegorz Kucmierz	2c286af429	chore(lint): format extension background script	2026-03-04 02:47:24 +00:00
Grzegorz Kucmierz	10286c2924	chore(lint): enforce 2-space indent & add gpg pre-commit hook	2026-03-04 02:45:53 +00:00
Grzegorz Kucmierz	b98a14950c	chore: fix husky deprecation warning	2026-03-04 02:42:41 +00:00
Grzegorz Kucmierz	18912368a4	feat(ui): refine input states, add tokenized params & ripple effects - Refactored Url Cleaner Exception 'Keep params' into a tokenized input array (pills/badges) - Standardized UI contrast: ensured proper label highlighting in light/dark themes - Expanded v-ripple interaction effect to buttons across all remaining tools, header, and modals - Moved base .detail-tag styles into global CSS variables - Web worker generation for QR codes (WIP)	2026-03-04 02:41:58 +00:00
Grzegorz Kucmierz	b51bc61cf3	feat: show count of cleaned URLs in header	2026-03-03 22:10:07 +00:00
Grzegorz Kucmierz	e40762873c	0.6.19 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-03-03 14:30:19 +00:00
Grzegorz Kucmierz	011db26ec4	fix: normalize font-weight for Length/Count labels in Passwords; refactor QR scanner composables; style fixes	2026-03-03 14:29:58 +00:00