From 7a97cb04b44d0f972774f74295214e079ec29581 Mon Sep 17 00:00:00 2001
From: devvsakib <devvsakib@gmail.com>
Date: Tue, 7 Oct 2025 20:42:32 +0600
Subject: [PATCH 1/3] Add YAML Formatter component and update availability in
 DevArea

---
 package.json                                  |   1 +
 src/components/DevAreaTools/YAMLFormatter.jsx |  95 +++++++++
 src/pages/DevArea/DevTools.jsx                |   4 +
 src/pages/DevArea/index.jsx                   | 142 ++++++++++++-
 yarn.lock                                     | 186 +++++++++++++-----
 5 files changed, 376 insertions(+), 52 deletions(-)
 create mode 100644 src/components/DevAreaTools/YAMLFormatter.jsx

diff --git a/package.json b/package.json
index 4237c39..52a18ff 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "axios": "^1.2.2",
     "classnames": "^2.5.1",
     "framer-motion": "^10.8.3",
+    "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.544.0",
     "prettier": "^3.3.3",
diff --git a/src/components/DevAreaTools/YAMLFormatter.jsx b/src/components/DevAreaTools/YAMLFormatter.jsx
new file mode 100644
index 0000000..16a52aa
--- /dev/null
+++ b/src/components/DevAreaTools/YAMLFormatter.jsx
@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+import yaml from "js-yaml";
+
+export default function YAMLFormatter() {
+  const [input, setInput] = useState("");
+  const [output, setOutput] = useState("");
+  const [error, setError] = useState(null);
+
+  const handleFormat = () => {
+    setError(null);
+    try {
+      const parsed = yaml.load(input);
+      const formatted = yaml.dump(parsed, { indent: 2 });
+      setOutput(formatted);
+    } catch (err) {
+      setError("Invalid YAML syntax.");
+    }
+  };
+
+  const handleMinify = () => {
+    setError(null);
+    try {
+      const parsed = yaml.load(input);
+      const minified = yaml.dump(parsed, { indent: 0, flowLevel: -1 }).replace(/\n/g, "");
+      setOutput(minified);
+    } catch (err) {
+      setError("Invalid YAML syntax.");
+    }
+  };
+
+  const handleClear = () => {
+    setInput("");
+    setOutput("");
+    setError(null);
+  };
+
+  return (
+    <div className="min-h-screen text-white p-8 font-sans">
+      <h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-amber-500 drop-shadow-[0_0_10px_rgba(251,191,36,0.6)]">
+        🧾 YAML Formatter
+      </h2>
+
+      <div className="max-w-3xl mx-auto bg-[#111827]/70 border border-[#1e293b] rounded-2xl p-6 backdrop-blur-sm shadow-[0_0_20px_rgba(251,191,36,0.15)]">
+        <p className="text-sm text-slate-400 mb-4 text-center">
+          Paste your YAML below to <span className="text-amber-400 font-medium">format</span> or <span className="text-amber-400 font-medium">minify</span>.
+        </p>
+
+        <textarea
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Paste YAML here..."
+          className="w-full min-h-[100px] p-3 rounded-xl bg-[#0f172a] border border-slate-700 focus:border-amber-500 text-sm mb-4 outline-none text-slate-200"
+        />
+
+        <div className="flex gap-3 justify-center mb-5">
+          <button
+            onClick={handleFormat}
+            className="px-5 py-2 rounded-lg bg-gradient-to-r from-amber-500 to-yellow-400 hover:from-amber-400 hover:to-yellow-300 shadow-[0_0_12px_rgba(251,191,36,0.4)] transition-all"
+          >
+            Format
+          </button>
+          <button
+            onClick={handleMinify}
+            className="px-5 py-2 rounded-lg border border-slate-600 hover:border-amber-400 transition-all"
+          >
+            Minify
+          </button>
+          <button
+            onClick={handleClear}
+            className="px-5 py-2 rounded-lg border border-slate-600 hover:border-amber-400 transition-all"
+          >
+            Clear
+          </button>
+        </div>
+
+        {error && (
+          <div className="mb-5 p-3 rounded-md bg-red-900/30 border border-red-500/30 text-red-300 text-sm">
+            {error}
+          </div>
+        )}
+
+        <div>
+          <h3 className="font-semibold text-amber-400 mb-2">Output</h3>
+          <pre className="mt-2 p-3 rounded-md bg-[#0f172a] border border-slate-700 h-60 overflow-auto text-xs text-slate-300 whitespace-pre-wrap">
+            {output || "No formatted YAML yet"}
+          </pre>
+        </div>
+      </div>
+
+      <p className="mt-6 text-center text-xs text-slate-500">
+        🟡 This tool formats YAML locally in your browser.
+      </p>
+    </div>
+  );
+}
diff --git a/src/pages/DevArea/DevTools.jsx b/src/pages/DevArea/DevTools.jsx
index 784a838..c4c5c55 100644
--- a/src/pages/DevArea/DevTools.jsx
+++ b/src/pages/DevArea/DevTools.jsx
@@ -6,6 +6,8 @@ import JWTDecoder from "../../components/DevAreaTools/JwtDecoder";
 import URLEncoderDecoder from "../../components/DevAreaTools/URLEncoderDecoder";
 import XmlFormatter from "../../components/DevAreaTools/XmlFormatter";
 import Base64Tool from "../../components/DevAreaTools/Base64Tool";
+import YAMLFormatter from "../../components/DevAreaTools/YAMLFormatter";
+import PasswordGenerator from "../../components/DevAreaTools/PasswordGenerator";
 
 const DevTools = () => {
     const { tool } = useParams();
@@ -16,7 +18,9 @@ const DevTools = () => {
         "json-formatter": <JSONFormatter />,
         "url-encoder-decoder": <URLEncoderDecoder />,
         "xml-formatter": <XmlFormatter />,
+        "yaml-formatter": <YAMLFormatter />,
         "base64": <Base64Tool />,
+        "password-generator": <PasswordGenerator />,
     }
 
 
diff --git a/src/pages/DevArea/index.jsx b/src/pages/DevArea/index.jsx
index bf48f4f..024aca2 100644
--- a/src/pages/DevArea/index.jsx
+++ b/src/pages/DevArea/index.jsx
@@ -26,11 +26,10 @@ const DevArea = () => {
             isAvailable: true
         },
         {
-        name: "URL Encoder/Decoder",
-        link: "/devarea/url-encoder-decoder",
-        isAvailable: true
+            name: "URL Encoder/Decoder",
+            link: "/devarea/url-encoder-decoder",
+            isAvailable: true
         },
-
         {
             name: "XML Formatter",
             link: "/devarea/xml-formatter",
@@ -39,13 +38,146 @@ const DevArea = () => {
         {
             name: "YAML Formatter",
             link: "/devarea/yaml-formatter",
-            isAvailable: false
+            isAvailable: true
         },
         {
             name: "CSV Formatter",
             link: "/devarea/csv-formatter",
             isAvailable: false
         },
+        // Text & String Tools
+        {
+            name: "Text Diff Checker",
+            link: "/devarea/text-diff",
+            isAvailable: false
+        },
+        {
+            name: "Case Converter",
+            link: "/devarea/case-converter",
+            isAvailable: false
+        },
+        {
+            name: "String Length Counter",
+            link: "/devarea/string-counter",
+            isAvailable: false
+        },
+        {
+            name: "Lorem Ipsum Generator",
+            link: "/devarea/lorem-ipsum",
+            isAvailable: false
+        },
+        // Encoding & Hashing
+        {
+            name: "Hash Generator (MD5, SHA)",
+            link: "/devarea/hash-generator",
+            isAvailable: false
+        },
+        {
+            name: "UUID Generator",
+            link: "/devarea/uuid-generator",
+            isAvailable: false
+        },
+        {
+            name: "HTML Encoder/Decoder",
+            link: "/devarea/html-encoder-decoder",
+            isAvailable: false
+        },
+        // Code & Data
+        {
+            name: "SQL Formatter",
+            link: "/devarea/sql-formatter",
+            isAvailable: false
+        },
+        {
+            name: "Regex Tester",
+            link: "/devarea/regex-tester",
+            isAvailable: false
+        },
+        {
+            name: "JSON to CSV",
+            link: "/devarea/json-to-csv",
+            isAvailable: false
+        },
+        {
+            name: "CSV to JSON",
+            link: "/devarea/csv-to-json",
+            isAvailable: false
+        },
+        {
+            name: "Code Minifier",
+            link: "/devarea/code-minifier",
+            isAvailable: false
+        },
+        {
+            name: "Code Beautifier",
+            link: "/devarea/code-beautifier",
+            isAvailable: false
+        },
+        // Color & Design
+        {
+            name: "Color Converter",
+            link: "/devarea/color-converter",
+            isAvailable: false
+        },
+        {
+            name: "Color Picker",
+            link: "/devarea/color-picker",
+            isAvailable: false
+        },
+        {
+            name: "Gradient Generator",
+            link: "/devarea/gradient-generator",
+            isAvailable: false
+        },
+        // Time & Date
+        {
+            name: "Unix Timestamp Converter",
+            link: "/devarea/timestamp-converter",
+            isAvailable: false
+        },
+        {
+            name: "Cron Expression Generator",
+            link: "/devarea/cron-generator",
+            isAvailable: false
+        },
+        // Image & Media
+        {
+            name: "Image to Base64",
+            link: "/devarea/image-to-base64",
+            isAvailable: false
+        },
+        {
+            name: "QR Code Generator",
+            link: "/devarea/qr-code-generator",
+            isAvailable: false
+        },
+        // Network & API
+        {
+            name: "API Tester",
+            link: "/devarea/api-tester",
+            isAvailable: false
+        },
+        {
+            name: "HTTP Status Codes",
+            link: "/devarea/http-status-codes",
+            isAvailable: false
+        },
+        {
+            name: "IP Address Lookup",
+            link: "/devarea/ip-lookup",
+            isAvailable: false
+        },
+        // Security
+        {
+            name: "Password Generator",
+            link: "/devarea/password-generator",
+            isAvailable: true
+        },
+        {
+            name: "Bcrypt Generator/Checker",
+            link: "/devarea/bcrypt",
+            isAvailable: true
+        }
     ]
     return <Layout>
         <div className="px-5 md:px-10">
diff --git a/yarn.lock b/yarn.lock
index e327990..949f672 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -265,6 +265,111 @@
   resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@esbuild/android-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
+  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
+
+"@esbuild/android-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
+  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
+
+"@esbuild/android-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
+  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
+
+"@esbuild/darwin-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
+  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
+
+"@esbuild/darwin-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
+  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
+
+"@esbuild/freebsd-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
+  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
+
+"@esbuild/freebsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
+  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
+
+"@esbuild/linux-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
+  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
+
+"@esbuild/linux-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
+  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
+
+"@esbuild/linux-ia32@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
+  integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
+
+"@esbuild/linux-loong64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
+  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
+
+"@esbuild/linux-mips64el@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
+  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
+
+"@esbuild/linux-ppc64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
+  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
+
+"@esbuild/linux-riscv64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
+  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
+
+"@esbuild/linux-s390x@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
+  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
+
+"@esbuild/linux-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338"
+  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
+
+"@esbuild/netbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
+  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
+
+"@esbuild/openbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
+  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
+
+"@esbuild/sunos-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
+  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
+
+"@esbuild/win32-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
+  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
+
+"@esbuild/win32-ia32@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
+  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
+
 "@esbuild/win32-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz"
@@ -322,7 +427,7 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
@@ -732,12 +837,7 @@
   resolved "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz"
   integrity sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==
 
-"@types/unist@^2":
-  version "2.0.10"
-  resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz"
-  integrity sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==
-
-"@types/unist@^2.0.0":
+"@types/unist@^2", "@types/unist@^2.0.0":
   version "2.0.10"
   resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz"
   integrity sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==
@@ -859,6 +959,11 @@ arg@^5.0.2:
   resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz"
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 array-tree-filter@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz"
@@ -1008,7 +1113,7 @@ classcat@^5.0.3:
   resolved "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz"
   integrity sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==
 
-classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2, classnames@^2.5.1, classnames@2.x:
+classnames@2.x, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2, classnames@^2.5.1:
   version "2.5.1"
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -1027,16 +1132,16 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
@@ -1105,7 +1210,7 @@ csstype@^3.0.2, csstype@^3.1.3:
   resolved "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz"
   integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
 
-d3-drag@^3.0.0, "d3-drag@2 - 3":
+"d3-drag@2 - 3", d3-drag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz"
   integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
@@ -1125,7 +1230,7 @@ d3-drag@^3.0.0, "d3-drag@2 - 3":
   dependencies:
     d3-color "1 - 3"
 
-d3-selection@^3.0.0, "d3-selection@2 - 3", d3-selection@3:
+"d3-selection@2 - 3", d3-selection@3, d3-selection@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz"
   integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
@@ -1392,6 +1497,11 @@ framer-motion@^10.8.3:
   optionalDependencies:
     "@emotion/is-prop-valid" "^0.8.2"
 
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
@@ -1409,7 +1519,7 @@ get-stream@^5.0.0:
   dependencies:
     pump "^3.0.0"
 
-glob-parent@^5.1.2:
+glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -1423,13 +1533,6 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
-glob-parent@~5.1.2:
-  version "5.1.2"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
-  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
-  dependencies:
-    is-glob "^4.0.1"
-
 glob@^10.3.10:
   version "10.4.5"
   resolved "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz"
@@ -1649,6 +1752,13 @@ jiti@^1.21.0:
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz"
@@ -2405,17 +2515,7 @@ picocolors@^1.0.0, picocolors@^1.0.1:
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz"
   integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
 
-picomatch@^2.0.4:
-  version "2.3.1"
-  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
-  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
-
-picomatch@^2.2.1:
-  version "2.3.1"
-  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
-  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
-
-picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -2466,15 +2566,15 @@ postcss-nested@^6.0.1:
   dependencies:
     postcss-selector-parser "^6.1.1"
 
-postcss-selector-parser@^6.0.11:
-  version "6.1.1"
-  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz"
-  integrity sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==
+postcss-selector-parser@6.0.10:
+  version "6.0.10"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-selector-parser@^6.1.1:
+postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.1.1:
   version "6.1.1"
   resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz"
   integrity sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==
@@ -2482,14 +2582,6 @@ postcss-selector-parser@^6.1.1:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-selector-parser@6.0.10:
-  version "6.0.10"
-  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz"
-  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
-  dependencies:
-    cssesc "^3.0.0"
-    util-deprecate "^1.0.2"
-
 postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"

From 2b8d7e984f6fbaa20c1811c61685a85d4fa943c0 Mon Sep 17 00:00:00 2001
From: devvsakib <devvsakib@gmail.com>
Date: Tue, 7 Oct 2025 20:44:52 +0600
Subject: [PATCH 2/3] Remove commented-out import for PasswordGenerator in
 DevTools component

---
 src/pages/DevArea/DevTools.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/DevArea/DevTools.jsx b/src/pages/DevArea/DevTools.jsx
index c4c5c55..8adc83a 100644
--- a/src/pages/DevArea/DevTools.jsx
+++ b/src/pages/DevArea/DevTools.jsx
@@ -7,7 +7,7 @@ import URLEncoderDecoder from "../../components/DevAreaTools/URLEncoderDecoder";
 import XmlFormatter from "../../components/DevAreaTools/XmlFormatter";
 import Base64Tool from "../../components/DevAreaTools/Base64Tool";
 import YAMLFormatter from "../../components/DevAreaTools/YAMLFormatter";
-import PasswordGenerator from "../../components/DevAreaTools/PasswordGenerator";
+// import PasswordGenerator from "../../components/DevAreaTools/PasswordGenerator";
 
 const DevTools = () => {
     const { tool } = useParams();
@@ -20,7 +20,7 @@ const DevTools = () => {
         "xml-formatter": <XmlFormatter />,
         "yaml-formatter": <YAMLFormatter />,
         "base64": <Base64Tool />,
-        "password-generator": <PasswordGenerator />,
+        // "password-generator": <PasswordGenerator />,
     }
 
 

From e4e98fa051e3eb095c0167e66c0916a20b68b989 Mon Sep 17 00:00:00 2001
From: devvsakib <devvsakib@gmail.com>
Date: Tue, 7 Oct 2025 20:46:05 +0600
Subject: [PATCH 3/3] Add Password Generator component and update DevTools to
 include it #287

---
 .../DevAreaTools/PasswordGenerator.jsx        | 99 +++++++++++++++++++
 src/pages/DevArea/DevTools.jsx                |  4 +-
 2 files changed, 101 insertions(+), 2 deletions(-)
 create mode 100644 src/components/DevAreaTools/PasswordGenerator.jsx

diff --git a/src/components/DevAreaTools/PasswordGenerator.jsx b/src/components/DevAreaTools/PasswordGenerator.jsx
new file mode 100644
index 0000000..bdc45b4
--- /dev/null
+++ b/src/components/DevAreaTools/PasswordGenerator.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+
+export default function PasswordGenerator() {
+    const [length, setLength] = useState(12);
+    const [includeUpper, setIncludeUpper] = useState(true);
+    const [includeLower, setIncludeLower] = useState(true);
+    const [includeNumbers, setIncludeNumbers] = useState(true);
+    const [includeSymbols, setIncludeSymbols] = useState(true);
+    const [password, setPassword] = useState("");
+
+    const generatePassword = () => {
+        let charset = "";
+        if (includeUpper) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+        if (includeLower) charset += "abcdefghijklmnopqrstuvwxyz";
+        if (includeNumbers) charset += "0123456789";
+        if (includeSymbols) charset += "!@#$%^&*()_+-=[]{}|;:,.<>?";
+        if (!charset) return setPassword("⚠️ Select at least one option.");
+
+        let pass = "";
+        for (let i = 0; i < length; i++) {
+            pass += charset.charAt(Math.floor(Math.random() * charset.length));
+        }
+        setPassword(pass);
+    };
+
+    const copyPassword = async () => {
+        if (!password) return;
+        await navigator.clipboard.writeText(password);
+    };
+
+    return (
+        <div className="min-h-screen text-white p-8 font-sans">
+            <h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-500 drop-shadow-[0_0_10px_rgba(52,211,153,0.6)]">
+                🔐 Password Generator
+            </h2>
+
+            <div className="max-w-3xl mx-auto bg-[#111827]/70 border border-[#1e293b] rounded-2xl p-6 backdrop-blur-sm shadow-[0_0_20px_rgba(52,211,153,0.15)] space-y-4">
+                <div className="flex items-center justify-between">
+                    <label className="text-sm text-slate-300">Password Length</label>
+                    <input
+                        type="number"
+                        min="4"
+                        max="64"
+                        value={length}
+                        onChange={(e) => setLength(Number(e.target.value))}
+                        className="w-20 text-center bg-[#0f172a] border border-slate-700 rounded-md p-1 text-sm text-slate-200 focus:border-emerald-500 outline-none"
+                    />
+                </div>
+
+                <div className="grid grid-cols-2 gap-3 mt-2">
+                    <label className="flex items-center gap-2 text-sm text-slate-300">
+                        <input type="checkbox" checked={includeUpper} onChange={() => setIncludeUpper(!includeUpper)} />
+                        Include Uppercase
+                    </label>
+                    <label className="flex items-center gap-2 text-sm text-slate-300">
+                        <input type="checkbox" checked={includeLower} onChange={() => setIncludeLower(!includeLower)} />
+                        Include Lowercase
+                    </label>
+                    <label className="flex items-center gap-2 text-sm text-slate-300">
+                        <input type="checkbox" checked={includeNumbers} onChange={() => setIncludeNumbers(!includeNumbers)} />
+                        Include Numbers
+                    </label>
+                    <label className="flex items-center gap-2 text-sm text-slate-300">
+                        <input type="checkbox" checked={includeSymbols} onChange={() => setIncludeSymbols(!includeSymbols)} />
+                        Include Symbols
+                    </label>
+                </div>
+
+                <div className="flex gap-3 justify-center mt-4">
+                    <button
+                        onClick={generatePassword}
+                        className="px-5 py-2 rounded-lg bg-gradient-to-r from-emerald-500 to-green-400 hover:from-emerald-400 hover:to-green-300 shadow-[0_0_12px_rgba(52,211,153,0.4)] transition-all"
+                    >
+                        Generate
+                    </button>
+                    <button
+                        onClick={copyPassword}
+                        className={`px-5 py-2 rounded-lg border border-slate-600 hover:border-emerald-400 transition-all ${!password && "opacity-40 cursor-not-allowed"
+                            }`}
+                        disabled={!password}
+                    >
+                        Copy
+                    </button>
+                </div>
+
+                <div>
+                    <h3 className="font-semibold text-emerald-400 mb-2">Generated Password</h3>
+                    <textarea
+                        readOnly
+                        className="w-full p-3 rounded-md bg-[#0f172a] border border-slate-700 text-slate-200 text-sm"
+                        rows="2"
+                        value={password}
+                        placeholder="Your secure password will appear here..."
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/pages/DevArea/DevTools.jsx b/src/pages/DevArea/DevTools.jsx
index 8adc83a..c4c5c55 100644
--- a/src/pages/DevArea/DevTools.jsx
+++ b/src/pages/DevArea/DevTools.jsx
@@ -7,7 +7,7 @@ import URLEncoderDecoder from "../../components/DevAreaTools/URLEncoderDecoder";
 import XmlFormatter from "../../components/DevAreaTools/XmlFormatter";
 import Base64Tool from "../../components/DevAreaTools/Base64Tool";
 import YAMLFormatter from "../../components/DevAreaTools/YAMLFormatter";
-// import PasswordGenerator from "../../components/DevAreaTools/PasswordGenerator";
+import PasswordGenerator from "../../components/DevAreaTools/PasswordGenerator";
 
 const DevTools = () => {
     const { tool } = useParams();
@@ -20,7 +20,7 @@ const DevTools = () => {
         "xml-formatter": <XmlFormatter />,
         "yaml-formatter": <YAMLFormatter />,
         "base64": <Base64Tool />,
-        // "password-generator": <PasswordGenerator />,
+        "password-generator": <PasswordGenerator />,
     }