diff --git a/README.md b/README.md
new file mode 100644
index 0000000..38dcd2d
--- /dev/null
+++ b/README.md
@@ -0,0 +1,271 @@
+# QR Code Generator
+
+A powerful QR code generator with support for custom images, color customization, and SVG export. Built with React and vanilla JavaScript utilities.
+
+## Features
+
+- ✅ **QR Code Generation**: Generate QR codes from any text
+- ✅ **Custom Images**: Embed logos or images in the center of QR codes
+- ✅ **Color Customization**: Customize foreground and background colors
+- ✅ **SVG Export**: Export QR codes as scalable vector graphics
+- ✅ **Bitmap Vectorization**: Convert bitmap images to vector paths in SVG
+- ✅ **Multiple Formats**: Support for PNG, JPEG, GIF, WebP, and SVG images
+- ✅ **Precise Positioning**: Perfect centering with decimal coordinates
+- ✅ **Framework Agnostic**: Use with React or vanilla JavaScript
+
+## Installation
+
+```bash
+npm install
+```
+
+## Usage
+
+### With React
+
+The main React component is located at `src/components/TextAreaComponent.jsx`:
+
+```jsx
+import TextAreaComponent from './components/TextAreaComponent';
+
+function App() {
+ return (
+
+
QR Code Generator
+
+
+ );
+}
+```
+
+### With Vanilla JavaScript
+
+Use the utility functions directly in any JavaScript project:
+
+```javascript
+import {
+ generateQRCode,
+ generateCompleteSVGQRCode,
+ downloadSVG,
+ fileToDataURL,
+ validateImageFile
+} from './src/utils/qrCodeUtils.js';
+
+// Generate a basic QR code
+const qrCodeUrl = await generateQRCode('Hello World', '#000000', '#FFFFFF');
+
+// Generate QR code with custom image
+const svgContent = await generateCompleteSVGQRCode(
+ 'Hello World',
+ 'data:image/png;base64,...', // Custom image data URL
+ 20, // Image size percentage
+ '#000000', // Foreground color
+ '#FFFFFF' // Background color
+);
+
+// Download as SVG
+downloadSVG(svgContent, 'qrcode.svg');
+```
+
+## API Reference
+
+### Core Functions
+
+#### `generateQRCode(text, foregroundColor, backgroundColor)`
+Generates a QR code as a data URL (PNG format).
+
+- **Parameters:**
+ - `text` (string): Text to encode in the QR code
+ - `foregroundColor` (string): QR code color (default: '#000000')
+ - `backgroundColor` (string): Background color (default: '#FFFFFF')
+- **Returns:** Promise - Data URL of the generated QR code
+
+#### `generateSVGQRCode(text, foregroundColor, backgroundColor)`
+Generates a QR code as an SVG string.
+
+- **Parameters:**
+ - `text` (string): Text to encode in the QR code
+ - `foregroundColor` (string): QR code color (default: '#000000')
+ - `backgroundColor` (string): Background color (default: '#FFFFFF')
+- **Returns:** Promise - SVG string of the generated QR code
+
+#### `generateCompleteSVGQRCode(text, imageUrl, imageSize, foregroundColor, backgroundColor)`
+Generates a complete SVG QR code with embedded image.
+
+- **Parameters:**
+ - `text` (string): Text to encode in the QR code
+ - `imageUrl` (string, optional): Custom image data URL
+ - `imageSize` (number): Image size as percentage (0-100, default: 20)
+ - `foregroundColor` (string): QR code color (default: '#000000')
+ - `backgroundColor` (string): Background color (default: '#FFFFFF')
+- **Returns:** Promise - Complete SVG string with embedded image
+
+### Image Processing Functions
+
+#### `addImageToQRCode(qrCodeUrl, imageUrl, imageSize)`
+Adds a custom image to a QR code data URL.
+
+- **Parameters:**
+ - `qrCodeUrl` (string): The QR code data URL
+ - `imageUrl` (string): The custom image data URL
+ - `imageSize` (number): Image size as percentage (0-100)
+- **Returns:** Promise - Data URL of QR code with embedded image
+
+#### `addImageToSVG(svgString, imageUrl, imageSize)`
+Adds a custom image to an SVG QR code.
+
+- **Parameters:**
+ - `svgString` (string): The SVG QR code string
+ - `imageUrl` (string): The custom image data URL
+ - `imageSize` (number): Image size as percentage (0-100)
+- **Returns:** Promise - SVG string with embedded image
+
+#### `vectorizeBitmap(img, targetSize, x, y, svgDoc)`
+Converts a bitmap image to SVG vector elements.
+
+- **Parameters:**
+ - `img` (HTMLImageElement): The image element to vectorize
+ - `targetSize` (number): Target size in QR coordinate system
+ - `x` (number): X position in QR coordinate system
+ - `y` (number): Y position in QR coordinate system
+ - `svgDoc` (Document): The SVG document to add elements to
+- **Returns:** Promise - SVG group element containing vectorized image
+
+### Utility Functions
+
+#### `downloadSVG(svgContent, filename)`
+Downloads an SVG string as a file.
+
+- **Parameters:**
+ - `svgContent` (string): The SVG content to download
+ - `filename` (string): The filename for the download (default: 'qrcode.svg')
+
+#### `fileToDataURL(file)`
+Converts a file to data URL.
+
+- **Parameters:**
+ - `file` (File): The file to convert
+- **Returns:** Promise - Data URL of the file
+
+#### `validateImageFile(file, maxSize)`
+Validates an image file.
+
+- **Parameters:**
+ - `file` (File): The file to validate
+ - `maxSize` (number): Maximum file size in bytes (default: 2MB)
+- **Returns:** Object - Validation result with success boolean and error message
+
+## Examples
+
+### Basic QR Code Generation
+
+```javascript
+import { generateQRCode } from './src/utils/qrCodeUtils.js';
+
+const qrCode = await generateQRCode('https://example.com');
+console.log(qrCode); // data:image/png;base64,...
+```
+
+### QR Code with Custom Image
+
+```javascript
+import { generateCompleteSVGQRCode, downloadSVG } from './src/utils/qrCodeUtils.js';
+
+const svgContent = await generateCompleteSVGQRCode(
+ 'https://example.com',
+ 'data:image/svg+xml;base64,...', // Your logo
+ 25, // 25% of QR code size
+ '#1a1a1a', // Dark gray
+ '#ffffff' // White
+);
+
+downloadSVG(svgContent, 'company-qrcode.svg');
+```
+
+### File Upload and Validation
+
+```javascript
+import { fileToDataURL, validateImageFile } from './src/utils/qrCodeUtils.js';
+
+const fileInput = document.getElementById('file-input');
+const file = fileInput.files[0];
+
+const validation = validateImageFile(file);
+if (validation.success) {
+ const dataUrl = await fileToDataURL(file);
+ // Use dataUrl for QR code generation
+} else {
+ alert(validation.error);
+}
+```
+
+## Vanilla JavaScript Example
+
+See `examples/vanilla-js-example.html` for a complete vanilla JavaScript implementation.
+
+## Development
+
+### Running the Development Server
+
+```bash
+npm run dev
+```
+
+### Building for Production
+
+```bash
+npm run build
+```
+
+### Project Structure
+
+```
+src/
+├── components/
+│ └── TextAreaComponent.jsx # Main React component
+├── utils/
+│ └── qrCodeUtils.js # Pure JavaScript utility functions
+├── App.jsx # React app entry point
+├── main.jsx # React app initialization
+└── style.css # Global styles
+
+examples/
+└── vanilla-js-example.html # Vanilla JavaScript example
+
+dist/ # Production build output
+```
+
+## Dependencies
+
+- **React**: UI framework
+- **Vite**: Build tool and development server
+- **qrcode**: QR code generation library
+- **imagetracer**: Bitmap to vector conversion (optional)
+
+## Browser Support
+
+- Modern browsers with ES6 module support
+- Canvas API support for image processing
+- File API support for file uploads
+
+## License
+
+MIT License - feel free to use this project for any purpose.
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests if applicable
+5. Submit a pull request
+
+## Changelog
+
+### v1.0.0
+- Initial release
+- QR code generation with custom images
+- SVG export with vectorization
+- React and vanilla JavaScript support
+- Color customization
+- Precise coordinate positioning
\ No newline at end of file
diff --git a/STANDALONE_BUNDLE.md b/STANDALONE_BUNDLE.md
new file mode 100644
index 0000000..1ec9332
--- /dev/null
+++ b/STANDALONE_BUNDLE.md
@@ -0,0 +1,281 @@
+# Standalone QR Code Utils Bundle
+
+A complete, self-contained bundle of the QR Code Generator utilities that includes all dependencies. No external dependencies required!
+
+## 📦 Bundle Files
+
+The standalone build creates three formats in the `dist/` directory:
+
+- **`qr-code-utils.iife.js`** (28 KB) - Immediately Invoked Function Expression (IIFE) for browser use
+- **`qr-code-utils.umd.js`** (28 KB) - Universal Module Definition for Node.js and bundlers
+- **`qr-code-utils.es.js`** (61 KB) - ES Module for modern bundlers and browsers
+
+## 🚀 Quick Start
+
+### Browser (IIFE)
+```html
+
+
+
+ QR Code Generator
+
+
+
+
+
+
+
+
+
+```
+
+### ES Module
+```javascript
+import { generateQRCode, generateCompleteSVGQRCode } from './qr-code-utils.es.js';
+
+// Generate basic QR code
+const qrCode = await generateQRCode('Hello World');
+
+// Generate QR code with custom image
+const svgContent = await generateCompleteSVGQRCode(
+ 'Hello World',
+ 'data:image/png;base64,...', // Custom image
+ 20, // Image size percentage
+ '#000000', // Foreground color
+ '#FFFFFF' // Background color
+);
+```
+
+### Node.js (UMD)
+```javascript
+const { generateQRCode } = require('./qr-code-utils.umd.js');
+
+async function generateQR() {
+ const qrCode = await generateQRCode('Hello World');
+ console.log(qrCode);
+}
+
+generateQR();
+```
+
+## 🔧 Building the Bundle
+
+### Prerequisites
+```bash
+npm install
+```
+
+### Build Commands
+```bash
+# Build standalone bundle
+npm run build:standalone
+
+# Build with detailed info
+npm run build:standalone:info
+```
+
+### Build Configuration
+The standalone bundle is configured in `vite.standalone.config.js`:
+
+- **Entry Point**: `src/utils/qrCodeUtils.js`
+- **Dependencies Included**: `qrcode`, `imagetracer`
+- **Formats**: ES Module, UMD, IIFE
+- **Optimization**: Minified with Terser
+- **Target**: ES2018 for modern browser support
+
+## 📋 Included Functions
+
+### Core QR Code Generation
+- `generateQRCode(text, foregroundColor, backgroundColor)` - Generate PNG QR code
+- `generateSVGQRCode(text, foregroundColor, backgroundColor)` - Generate SVG QR code
+- `generateCompleteSVGQRCode(text, imageUrl, imageSize, foregroundColor, backgroundColor)` - Complete QR code with image
+
+### Image Processing
+- `addImageToQRCode(qrCodeUrl, imageUrl, imageSize)` - Add image to PNG QR code
+- `addImageToSVG(svgString, imageUrl, imageSize)` - Add image to SVG QR code
+- `vectorizeBitmap(img, targetSize, x, y, svgDoc)` - Convert bitmap to vector
+
+### Utilities
+- `downloadSVG(svgContent, filename)` - Download SVG file
+- `fileToDataURL(file)` - Convert file to data URL
+- `validateImageFile(file, maxSize)` - Validate image file
+
+## 🎯 Use Cases
+
+### 1. Static Websites
+```html
+
+
+```
+
+### 2. CDN Distribution
+```html
+
+
+```
+
+### 3. Node.js Applications
+```javascript
+const { generateCompleteSVGQRCode } = require('./qr-code-utils.umd.js');
+
+// Generate QR codes on the server
+const svgContent = await generateCompleteSVGQRCode(
+ 'https://example.com',
+ logoDataUrl,
+ 25,
+ '#1a1a1a',
+ '#ffffff'
+);
+```
+
+### 4. Modern Bundlers (Webpack, Rollup, Vite)
+```javascript
+import { generateQRCode } from './qr-code-utils.es.js';
+
+// Tree-shakeable imports
+const qrCode = await generateQRCode('Hello World');
+```
+
+## 📊 Bundle Analysis
+
+### Size Breakdown
+- **IIFE/UMD**: ~28 KB (gzipped: ~10.5 KB)
+- **ES Module**: ~61 KB (gzipped: ~15 KB)
+- **Source Maps**: ~140 KB each
+
+### Dependencies Included
+- **qrcode**: QR code generation library
+- **imagetracer**: Bitmap to vector conversion
+- **All utilities**: Complete set of helper functions
+
+### Browser Support
+- **ES2018+**: Modern browsers with ES6+ support
+- **Canvas API**: Required for image processing
+- **File API**: Required for file uploads
+- **Blob API**: Required for downloads
+
+## 🔍 Bundle Contents
+
+The standalone bundle includes:
+
+1. **QR Code Generation**: Complete QR code generation with error correction
+2. **Image Processing**: Custom image embedding with white background
+3. **Vectorization**: Bitmap to SVG vector conversion
+4. **File Handling**: File validation and data URL conversion
+5. **Download Utilities**: SVG download functionality
+6. **Error Handling**: Comprehensive error handling and validation
+
+## 🛠️ Customization
+
+### Modify Bundle Configuration
+Edit `vite.standalone.config.js`:
+
+```javascript
+export default defineConfig({
+ build: {
+ lib: {
+ entry: resolve(__dirname, 'src/utils/qrCodeUtils.js'),
+ name: 'QRCodeUtils', // Change global variable name
+ formats: ['es', 'umd', 'iife'], // Choose formats
+ fileName: (format) => `my-qr-utils.${format}.js` // Custom filename
+ },
+ rollupOptions: {
+ external: [], // Add external dependencies if needed
+ output: {
+ globals: {} // Define global variables for externals
+ }
+ }
+ }
+});
+```
+
+### Exclude Dependencies
+To exclude dependencies and use them as externals:
+
+```javascript
+rollupOptions: {
+ external: ['qrcode', 'imagetracer'],
+ output: {
+ globals: {
+ qrcode: 'QRCode',
+ imagetracer: 'ImageTracer'
+ }
+ }
+}
+```
+
+## 🧪 Testing the Bundle
+
+### Browser Test
+1. Build the bundle: `npm run build:standalone`
+2. Open `examples/standalone-bundle-example.html` in a browser
+3. Test all features: QR generation, image upload, SVG export
+
+### Node.js Test
+```javascript
+const { generateQRCode } = require('./dist/qr-code-utils.umd.js');
+
+generateQRCode('Test QR Code')
+ .then(qrCode => console.log('QR Code generated:', qrCode.substring(0, 50) + '...'))
+ .catch(error => console.error('Error:', error));
+```
+
+## 📈 Performance
+
+### Bundle Optimization
+- **Tree Shaking**: ES module format supports tree shaking
+- **Minification**: Terser optimization for smallest bundle size
+- **Source Maps**: Development debugging support
+- **Gzip Compression**: Optimized for network transfer
+
+### Runtime Performance
+- **Async Operations**: All functions return promises for non-blocking execution
+- **Memory Efficient**: Proper cleanup of canvas and blob objects
+- **Error Recovery**: Graceful fallbacks for failed operations
+
+## 🔒 Security
+
+### File Validation
+- **Type Checking**: Validates image file types
+- **Size Limits**: Configurable file size limits
+- **Data URL Safety**: Secure data URL generation
+
+### XSS Prevention
+- **Input Sanitization**: Validates all input parameters
+- **Safe DOM Manipulation**: Uses safe DOM methods
+- **Error Handling**: Prevents information leakage
+
+## 📚 Examples
+
+See the following examples for complete usage:
+
+- `examples/standalone-bundle-example.html` - Complete browser example
+- `examples/vanilla-js-example.html` - Vanilla JavaScript with modules
+- `src/components/TextAreaComponent.jsx` - React component usage
+
+## 🤝 Contributing
+
+To modify the standalone bundle:
+
+1. Update `src/utils/qrCodeUtils.js` with new functions
+2. Test with `npm run build:standalone`
+3. Verify functionality in `examples/standalone-bundle-example.html`
+4. Update documentation as needed
+
+## 📄 License
+
+MIT License - Same as the main project
\ No newline at end of file
diff --git a/dist/assets/index-Bjb0tQZ7.js b/dist/assets/index-Bjb0tQZ7.js
deleted file mode 100644
index b0f7dc9..0000000
--- a/dist/assets/index-Bjb0tQZ7.js
+++ /dev/null
@@ -1,56 +0,0 @@
-(function(){const m=document.createElement("link").relList;if(m&&m.supports&&m.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))c(r);new MutationObserver(r=>{for(const d of r)if(d.type==="childList")for(const M of d.addedNodes)M.tagName==="LINK"&&M.rel==="modulepreload"&&c(M)}).observe(document,{childList:!0,subtree:!0});function b(r){const d={};return r.integrity&&(d.integrity=r.integrity),r.referrerPolicy&&(d.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?d.credentials="include":r.crossOrigin==="anonymous"?d.credentials="omit":d.credentials="same-origin",d}function c(r){if(r.ep)return;r.ep=!0;const d=b(r);fetch(r.href,d)}})();function Bc(s){return s&&s.__esModule&&Object.prototype.hasOwnProperty.call(s,"default")?s.default:s}var uc={exports:{}},Aa={};/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var O0;function Qh(){if(O0)return Aa;O0=1;var s=Symbol.for("react.transitional.element"),m=Symbol.for("react.fragment");function b(c,r,d){var M=null;if(d!==void 0&&(M=""+d),r.key!==void 0&&(M=""+r.key),"key"in r){d={};for(var R in r)R!=="key"&&(d[R]=r[R])}else d=r;return r=d.ref,{$$typeof:s,type:c,key:M,ref:r!==void 0?r:null,props:d}}return Aa.Fragment=m,Aa.jsx=b,Aa.jsxs=b,Aa}var U0;function jh(){return U0||(U0=1,uc.exports=Qh()),uc.exports}var At=jh(),ac={exports:{}},rt={};/**
- * @license React
- * react.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var N0;function Xh(){if(N0)return rt;N0=1;var s=Symbol.for("react.transitional.element"),m=Symbol.for("react.portal"),b=Symbol.for("react.fragment"),c=Symbol.for("react.strict_mode"),r=Symbol.for("react.profiler"),d=Symbol.for("react.consumer"),M=Symbol.for("react.context"),R=Symbol.for("react.forward_ref"),v=Symbol.for("react.suspense"),S=Symbol.for("react.memo"),N=Symbol.for("react.lazy"),G=Symbol.iterator;function B(h){return h===null||typeof h!="object"?null:(h=G&&h[G]||h["@@iterator"],typeof h=="function"?h:null)}var q={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},W=Object.assign,lt={};function ct(h,p,x){this.props=h,this.context=p,this.refs=lt,this.updater=x||q}ct.prototype.isReactComponent={},ct.prototype.setState=function(h,p){if(typeof h!="object"&&typeof h!="function"&&h!=null)throw Error("takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,h,p,"setState")},ct.prototype.forceUpdate=function(h){this.updater.enqueueForceUpdate(this,h,"forceUpdate")};function K(){}K.prototype=ct.prototype;function P(h,p,x){this.props=h,this.context=p,this.refs=lt,this.updater=x||q}var L=P.prototype=new K;L.constructor=P,W(L,ct.prototype),L.isPureReactComponent=!0;var j=Array.isArray,F={H:null,A:null,T:null,S:null,V:null},H=Object.prototype.hasOwnProperty;function Q(h,p,x,C,I,gt){return x=gt.ref,{$$typeof:s,type:h,key:p,ref:x!==void 0?x:null,props:gt}}function Z(h,p){return Q(h.type,p,void 0,void 0,void 0,h.props)}function X(h){return typeof h=="object"&&h!==null&&h.$$typeof===s}function et(h){var p={"=":"=0",":":"=2"};return"$"+h.replace(/[=:]/g,function(x){return p[x]})}var J=/\/+/g;function V(h,p){return typeof h=="object"&&h!==null&&h.key!=null?et(""+h.key):p.toString(36)}function k(){}function nt(h){switch(h.status){case"fulfilled":return h.value;case"rejected":throw h.reason;default:switch(typeof h.status=="string"?h.then(k,k):(h.status="pending",h.then(function(p){h.status==="pending"&&(h.status="fulfilled",h.value=p)},function(p){h.status==="pending"&&(h.status="rejected",h.reason=p)})),h.status){case"fulfilled":return h.value;case"rejected":throw h.reason}}throw h}function Ot(h,p,x,C,I){var gt=typeof h;(gt==="undefined"||gt==="boolean")&&(h=null);var ft=!1;if(h===null)ft=!0;else switch(gt){case"bigint":case"string":case"number":ft=!0;break;case"object":switch(h.$$typeof){case s:case m:ft=!0;break;case N:return ft=h._init,Ot(ft(h._payload),p,x,C,I)}}if(ft)return I=I(h),ft=C===""?"."+V(h,0):C,j(I)?(x="",ft!=null&&(x=ft.replace(J,"$&/")+"/"),Ot(I,p,x,"",function($t){return $t})):I!=null&&(X(I)&&(I=Z(I,x+(I.key==null||h&&h.key===I.key?"":(""+I.key).replace(J,"$&/")+"/")+ft)),p.push(I)),1;ft=0;var Nt=C===""?".":C+":";if(j(h))for(var yt=0;yt>>1,h=_[bt];if(0>>1;bt