0.6.21

package-lock.json

@@ -1,14 +1,15 @@
 {
   "name": "tools-app",
-  "version": "0.6.20",
+  "version": "0.6.21",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tools-app",
-      "version": "0.6.20",
+      "version": "0.6.21",
       "hasInstallScript": true,
       "dependencies": {
+        "@gkucmierz/utils": "^1.28.7",
         "barcode-detector": "^3.1.0",
         "lucide-vue-next": "^0.575.0",
         "marked": "^17.0.3",
@@ -2135,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",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tools-app",
   "private": true,
-  "version": "0.6.20",
+  "version": "0.6.21",
   "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",

src/components/tools/QrCode.vue

@@ -1,16 +1,125 @@
 <script setup>
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch, onMounted, computed, onUnmounted } from 'vue'
-import { Download } from 'lucide-vue-next'
+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)
+}
+
+const stopDrag = () => {
+  activeHandle.value = null
+  window.removeEventListener('mousemove', onDrag)
+  window.removeEventListener('mouseup', stopDrag)
+  window.removeEventListener('touchmove', onDrag)
+  window.removeEventListener('touchend', stopDrag)
+}
 
 const { height: previewHeight } = useFillHeight(previewRef, 40) // 40px extra margin
 
@@ -47,20 +156,46 @@ const generateQR = () => {
   worker.postMessage({
     id: latestJobId,
     text: text.value,
-    ecc: ecc.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 }
   })
 }
 
-watch([text, ecc], () => {
+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()
 })
 
-import { onUnmounted } from 'vue'
-
 onUnmounted(() => {
   if (worker) {
     worker.terminate()
@@ -68,36 +203,48 @@ onUnmounted(() => {
 })
 
 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,
+    let finalSvg = svgContent.value
-    // but usually raw SVG is better.
+    if (!finalSvg.includes('width=')) {
-    // If we want to support the "Size" dropdown for SVG download, we can regenerate with specific width.
+      finalSvg = finalSvg.replace('<svg ', `<svg width="${size.value}" height="${size.value}" `)
-    const svgWithSize = await QRCode.toString(text.value, {
+    }
-      type: 'svg',
+    const blob = new Blob([finalSvg], { type: 'image/svg+xml' })
-      errorCorrectionLevel: ecc.value,
-      margin: 1,
-      width: size.value
-    })
-    const blob = new Blob([svgWithSize], { 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, {
+      canvas.width = size.value
-        errorCorrectionLevel: ecc.value,
+      canvas.height = size.value
-        margin: 1,
+      const ctx = canvas.getContext('2d')
-        width: size.value
-      })
 
-      const mime = `image/${format.value}`
+      const img = new Image()
-      canvas.toBlob((blob) => {
+      const svgSource = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent.value)}`
-        if (blob) triggerDownload(blob, filename)
+
-      }, mime)
+      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)
     }
@@ -143,11 +290,80 @@ 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})`) }">
+             <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')"></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')"></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')"></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')"></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>
+
+           <!-- Overlay Icon Toggle -->
+           <button
+              v-if="fgType !== 'solid' || (!isBgTransparent && bgType !== 'solid')"
+              class="icon-btn edit-toggle-btn"
+              :class="{ 'active': showHandles }"
+              @click="showHandles = !showHandles"
+              title="Toggle edit handles"
+            >
+              <Eye v-if="showHandles" size="20" />
+              <EyeOff v-else size="20" />
+           </button>
         </div>
 
         <div class="download-settings">
@@ -228,6 +444,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;
@@ -249,6 +501,28 @@ const triggerDownload = (blob, filename) => {
   width: 100%;
   min-height: 0;
   container-type: size;
+  position: relative;
+}
+
+.edit-toggle-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 20;
+  color: var(--text-secondary);
+  opacity: 0.6;
+  background: var(--panel-bg);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.edit-toggle-btn:hover {
+  opacity: 1;
+  color: var(--text-strong);
+}
+
+.edit-toggle-btn.active {
+  color: var(--primary-accent);
+  opacity: 0.9;
 }
 
 :root[data-theme="light"] .preview-section {
@@ -268,6 +542,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;

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 {
@@ -353,6 +361,9 @@ const isUrl = (string) => {
                   <button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy" v-ripple>
                     <Copy size="18" />
                   </button>
+                  <button class="icon-btn" @click="navigateToGenerateQr(code.value)" title="Generate QR Code" v-ripple>
+                    <QrCode size="18" />
+                  </button>
                   <button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove" v-ripple>
                     <Trash2 size="18" />
                   </button>

src/router/index.js

@@ -34,7 +34,7 @@ const routes = [
     component: QrScanner
   },
   {
-    path: '/qr-code',
+    path: '/qr-code/:payload?',
     name: 'QrCode',
     component: QrCode
   },

src/workers/qrcode.worker.js

@@ -1,7 +1,7 @@
 import QRCode from 'qrcode'
 
 self.onmessage = async (e) => {
-  const { id, text, ecc } = e.data
+  const { id, text, ecc, isBgTransparent, bgType, bgColor1, bgColor2, bgGradPos, fgType, fgColor1, fgColor2, fgGradPos } = e.data
 
   if (!text) {
     self.postMessage({ id, svgContent: '' })
@@ -9,12 +9,56 @@ self.onmessage = async (e) => {
   }
 
   try {
-    const svgContent = await QRCode.toString(text, {
+    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 })