From 7369eea2bd43b855b00e2a35c6f7047cc57983a4 Mon Sep 17 00:00:00 2001
From: Odyhibit <josh.2990@gmail.com>
Date: Thu, 21 May 2026 16:06:40 -0500
Subject: [PATCH 1/9] Version 3

---
 README.md          |  47 ++++---
 decoder/index.html | 344 ++++++++++++++++++++++++++++++++++++++++++++-
 encoder/index.html | 182 ++++++++++++++----------
 encoder/qrcode.js  |   6 +
 shared/protocol.ts |  15 +-
 test/test.js       |  63 +++++++++
 6 files changed, 545 insertions(+), 112 deletions(-)

diff --git a/README.md b/README.md
index 719cba6..32cd8bf 100644
--- a/README.md
+++ b/README.md
@@ -51,33 +51,34 @@ test/test.js            Test suite (43 tests)
 
 Encoder and decoder pages bundle all dependencies locally — no CDN, no build step. They work from `file://`, GitHub Pages, or the dev server.
 
-## Chunk protocol (v2)
+## Chunk protocol (v3)
 
-Each QR code contains a JSON chunk:
+The encoder emits compact binary QR frames. The decoder still accepts the older JSON v1/v2 frames for compatibility.
 
-```json
-{
-  "v": 2, "i": 0, "n": 17,
-  "hash": "a1b2c3d4", "name": "file.txt",
-  "gz": 1, "zip": 0, "rs": 1, "k": 7, "sz": 19721,
-  "t": "d", "d": "base64data..."
-}
+Frame layout:
+
+```text
+"Q3" magic
+flags byte: gzip, zip, Reed-Solomon, parity
+frame index varint
+total frame count varint
+data frame count varint
+binary frame body
+```
+
+Frame 0's body starts with transfer metadata, then binary payload bytes:
+
+```text
+encoded payload size varint
+original file size varint
+frame 0 data byte count varint
+FNV-1a hash uint32
+filename length varint
+filename UTF-8 bytes
+payload bytes
 ```
 
-| Field | Description |
-|-------|-------------|
-| `v`   | Protocol version (2) |
-| `i`   | Chunk index (0-based) |
-| `n`   | Total chunks (data + parity) |
-| `hash`| FNV-1a hash of original file |
-| `name`| File name |
-| `gz`  | 1 if gzip-compressed |
-| `zip` | 1 if zip archive |
-| `rs`  | 1 if Reed-Solomon enabled |
-| `k`   | Data chunk count (for RS) |
-| `sz`  | Original file size in bytes |
-| `t`   | `d` = data, `p` = parity |
-| `d`   | Base64 payload |
+Other data frames contain only binary payload bytes. Parity frames contain Reed-Solomon parity bytes. Reed-Solomon protects data frame bodies, including frame 0 metadata, so a missing metadata frame can be recovered from parity.
 
 ## Testing
 
diff --git a/decoder/index.html b/decoder/index.html
index aba4c30..0782269 100644
--- a/decoder/index.html
+++ b/decoder/index.html
@@ -8,6 +8,7 @@
   <script src="pako.min.js"></script>
   <script src="jszip.min.js"></script>
   <script src="reedsolomon.js"></script>
+  <script src="../shared/protocol-v3.js"></script>
   <style>
     :root {
       --bg: #1e1e2e;
@@ -392,6 +393,7 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     var camIsZipped = false;
     var camRsEnabled = false;
     var camRsK = 0;
+    var camProtocolVersion = 2;
     var camFacingMode = 'environment';
     var camFrameCount = 0;
     var camLastFpsTime = 0;
@@ -427,6 +429,10 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       camFileName = null;
       camIsGzipped = false;
       camOriginalSize = null;
+      camIsZipped = false;
+      camRsEnabled = false;
+      camRsK = 0;
+      camProtocolVersion = 2;
       camFrameCount = 0;
       camLastFpsTime = performance.now();
       camLastFpsCount = 0;
@@ -519,6 +525,7 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
           for (var i = 0; i < barcodes.length; i++) {
             if (barcodes[i].rawValue) camProcessQR(barcodes[i].rawValue);
           }
+          camFallbackJsQR(vw, vh);
           camAfterScan();
         }).catch(function() {
           camFrameCount++;
@@ -541,7 +548,7 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       var code = jsQR(imageData.data, imageData.width, imageData.height, {
         inversionAttempts: 'attemptBoth'
       });
-      if (code && code.data) camProcessQR(code.data);
+      if (code && (code.data || code.binaryData)) camProcessQR(code.data || '', code.binaryData);
     }
 
     function camAfterScan() {
@@ -573,8 +580,42 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       if (cameraStream) cameraAnimFrame = requestAnimationFrame(camScanLoop);
     }
 
-    function camProcessQR(data) {
+    function camProcessQR(data, binaryData) {
       try {
+        var v3Frame = decodeV3Frame(data, binaryData);
+        if (v3Frame) {
+          var v3New = camDecodedChunks[v3Frame.i] === undefined;
+          camDecodedChunks[v3Frame.i] = v3Frame;
+          camProtocolVersion = 3;
+
+          if (!camExpectedTotal) {
+            camExpectedTotal = v3Frame.n;
+            camIsGzipped = v3Frame.gz;
+            camIsZipped = v3Frame.zip;
+            camRsEnabled = v3Frame.rs;
+            camRsK = v3Frame.k;
+            if (v3Frame.meta) {
+              camExpectedHash = v3Frame.meta.hash;
+              camFileName = v3Frame.meta.name;
+              camOriginalSize = v3Frame.meta.originalSize;
+            }
+            camInitGrid(camExpectedTotal);
+          } else if (v3Frame.meta) {
+            camExpectedHash = v3Frame.meta.hash;
+            camFileName = v3Frame.meta.name;
+            camOriginalSize = v3Frame.meta.originalSize;
+          }
+          camUpdateGrid();
+          camUpdatePreview();
+
+          if (v3New) {
+            cameraContainer.classList.remove('flash');
+            void cameraContainer.offsetWidth;
+            cameraContainer.classList.add('flash');
+          }
+          return;
+        }
+
         var chunk = JSON.parse(data);
         if ((chunk.v === 1 || chunk.v === 2) && typeof chunk.i === 'number' && typeof chunk.n === 'number' && chunk.d) {
           var isNew = camDecodedChunks[chunk.i] === undefined;
@@ -631,6 +672,10 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     }
 
     function camUpdatePreview() {
+      if (camProtocolVersion === 3) {
+        camUpdatePreviewV3();
+        return;
+      }
       var found = Object.keys(camDecodedChunks).length;
       var complete = camExpectedTotal && found >= camExpectedTotal;
       var rsEnough = camRsEnabled && found >= camRsK;
@@ -672,7 +717,48 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       }
     }
 
+    function camUpdatePreviewV3() {
+      var found = Object.keys(camDecodedChunks).length;
+      var complete = camExpectedTotal && found >= camExpectedTotal;
+      var rsEnough = camRsEnabled && found >= camRsK;
+      var displayComplete = complete || rsEnough;
+      cameraPreviewBadge.textContent = displayComplete ? (rsEnough && !complete ? 'RS recoverable!' : 'complete!') : found + '/' + (camExpectedTotal || '?') + ' chunks';
+      cameraPreviewBadge.className = 'badge ' + (displayComplete ? 'badge-success' : 'badge-info');
+
+      var first = camDecodedChunks[0];
+      if (!first || !first.meta) {
+        cameraPreviewCode.textContent = '[waiting for metadata frame]';
+        return;
+      }
+
+      try {
+        var bytes = assembleV3PreviewBytes(camDecodedChunks, camRsK, first.meta);
+        if (camIsGzipped) {
+          try { bytes = pako.ungzip(bytes); } catch (e) {
+            cameraPreviewCode.textContent = '[decompressing...]';
+            return;
+          }
+        }
+
+        try {
+          var text = new TextDecoder('utf-8', { fatal: true }).decode(bytes);
+          var lines = text.split('\n');
+          cameraPreviewCode.textContent = lines.length > 20
+            ? lines.slice(0, 20).join('\n') + '\n\n... (' + lines.length + ' lines)'
+            : text;
+        } catch (e) {
+          cameraPreviewCode.textContent = '[Binary — ' + formatSize(bytes.length) + ']';
+        }
+      } catch (e) {
+        cameraPreviewCode.textContent = '[decoding...]';
+      }
+    }
+
     function camFinishDecode(allFound) {
+      if (camProtocolVersion === 3) {
+        camFinishDecodeV3(allFound);
+        return;
+      }
       var base64Chunks = [];
       var hasAll = true;
       for (var i = 0; i < (camExpectedTotal || 0); i++) {
@@ -759,6 +845,68 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       }
     }
 
+    function camFinishDecodeV3(allFound) {
+      resultCard.classList.remove('hidden');
+      resultCode.textContent = '';
+
+      var assembled = assembleV3Result(camDecodedChunks, camExpectedTotal, camRsK, camRsEnabled);
+      if (!assembled) {
+        resultBadge.textContent = 'INCOMPLETE';
+        resultBadge.className = 'badge badge-error';
+        resultCode.textContent = 'Incomplete: missing required chunks.';
+        return;
+      }
+
+      var bytes = assembled.bytes;
+      var meta = assembled.meta;
+      camExpectedHash = meta.hash;
+      camFileName = meta.name;
+      camOriginalSize = meta.originalSize;
+
+      try {
+        if (camIsGzipped) {
+          try { bytes = pako.ungzip(bytes); } catch (e) {
+            resultCode.textContent = 'Error: gzip decompression failed.';
+            resultBadge.textContent = 'ERROR';
+            resultBadge.className = 'badge badge-error';
+            return;
+          }
+        }
+
+        var metaHtml = '<span>' + formatSize(bytes.length) + '</span>' +
+          '<span>' + escapeHtml(camFileName || 'unknown') + '</span>' +
+          '<span>Hash: ' + (camExpectedHash || '?') + '</span>';
+        if (camIsGzipped) metaHtml += '<span class="badge badge-info">gzip</span>';
+        if (camIsZipped) metaHtml += '<span class="badge badge-info">zip archive</span>';
+        if (!allFound && assembled.recovered) metaHtml += '<span class="badge badge-comp">RS recovered</span>';
+        resultMeta.innerHTML = metaHtml;
+        resultBadge.textContent = 'VERIFIED';
+        resultBadge.className = 'badge badge-success';
+
+        if (camIsZipped) {
+          resultCode.textContent = '[' + formatSize(bytes.length) + ' ZIP archive — see files below]';
+          showZipBrowser(bytes);
+        } else {
+          var text;
+          try { text = new TextDecoder('utf-8', { fatal: true }).decode(bytes); } catch (e) { text = '[Binary — use Download]'; }
+          resultCode.textContent = text;
+          btnDownload.onclick = function() {
+            downloadBlob(bytes, camFileName || 'decoded-file');
+          };
+          btnCopy.onclick = function() {
+            navigator.clipboard.writeText(resultCode.textContent).then(function() {
+              btnCopy.textContent = 'Copied!';
+              setTimeout(function() { btnCopy.textContent = 'Copy to Clipboard'; }, 2000);
+            });
+          };
+        }
+      } catch (e) {
+        resultCode.textContent = 'Error: ' + e.message;
+        resultBadge.textContent = 'ERROR';
+        resultBadge.className = 'badge badge-error';
+      }
+    }
+
     function finishCameraDecode(complete) {
       if (complete) {
         camFinishDecode(true);
@@ -803,6 +951,70 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     // Trailing null stripping above is safe because valid base64 (ASCII subset)
     // never contains \0 — any nulls are RS padding artifacts from uneven chunks.
 
+    function decodeV3Frame(data, binaryData) {
+      try {
+        if (binaryData && binaryData.length >= 2) {
+          var bytes = binaryData instanceof Uint8Array ? binaryData : new Uint8Array(binaryData);
+          var frame = QrProtocolV3.decodeFrame(bytes);
+          if (frame) return frame;
+        }
+        return QrProtocolV3.decodeFrame(data || '');
+      } catch (e) {
+        return null;
+      }
+    }
+
+    function concatByteParts(parts, limit) {
+      var total = 0;
+      for (var i = 0; i < parts.length; i++) total += parts[i].length;
+      if (typeof limit === 'number') total = Math.min(total, limit);
+      var out = new Uint8Array(total);
+      var offset = 0;
+      for (var p = 0; p < parts.length && offset < total; p++) {
+        var slice = parts[p].subarray(0, Math.min(parts[p].length, total - offset));
+        out.set(slice, offset);
+        offset += slice.length;
+      }
+      return out;
+    }
+
+    function assembleV3PreviewBytes(frameMap, k, meta) {
+      var parts = [meta.data];
+      var total = meta.data.length;
+      for (var i = 1; i < k; i++) {
+        if (!frameMap[i]) break;
+        parts.push(frameMap[i].body);
+        total += frameMap[i].body.length;
+        if (total >= meta.encodedSize) break;
+      }
+      return concatByteParts(parts, meta.encodedSize);
+    }
+
+    function assembleV3Result(frameMap, total, k, rsEnabled) {
+      var dataBodies = [];
+      var hasAllData = true;
+      for (var i = 0; i < k; i++) {
+        if (frameMap[i]) dataBodies[i] = frameMap[i].body;
+        else hasAllData = false;
+      }
+
+      var recovered = false;
+      if (!hasAllData && rsEnabled) {
+        var frames = [];
+        for (var f = 0; f < total; f++) frames[f] = frameMap[f] || null;
+        var decoded = QrProtocolV3.recoverBodies(frames, k);
+        if (!decoded) return null;
+        dataBodies = decoded;
+        recovered = true;
+      } else if (!hasAllData) {
+        return null;
+      }
+
+      var assembled = QrProtocolV3.assembleData(dataBodies);
+      assembled.recovered = recovered;
+      return assembled;
+    }
+
     // ===================== FILE UPLOAD DECODE =====================
 
     var decodedChunks = {};
@@ -814,6 +1026,7 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     var isZipped = false;
     var rsEnabled = false;
     var rsK = 0;
+    var protocolVersion = 2;
 
     dropZone.addEventListener('click', function() { fileInput.click(); });
     dropZone.addEventListener('dragover', function(e) { e.preventDefault(); dropZone.classList.add('dragover'); });
@@ -851,6 +1064,10 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       fileName = null;
       isGzipped = false;
       originalSize = null;
+      isZipped = false;
+      rsEnabled = false;
+      rsK = 0;
+      protocolVersion = 2;
       decodeStatus.textContent = 'Ready to decode';
       decodeProgress.style.width = '0%';
       chunkGrid.innerHTML = '';
@@ -1033,7 +1250,7 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
           prevData = ctx.getImageData(0, 0, result.width, result.height);
           var fullImg = ctx.getImageData(0, 0, result.width, result.height);
           var code = jsQR(fullImg.data, fullImg.width, fullImg.height, { inversionAttempts: 'attemptBoth' });
-          if (code && code.data) processQRData(code.data);
+          if (code && (code.data || code.binaryData)) processQRData(code.data || '', code.binaryData);
           var pct = ((f + 1) / result.frames.length * 100).toFixed(0);
           decodeProgress.style.width = pct + '%';
           var found = Object.keys(decodedChunks).length;
@@ -1084,7 +1301,7 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
         var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
         var code = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'attemptBoth' });
         framesScanned++;
-        if (code && code.data) processQRData(code.data);
+        if (code && (code.data || code.binaryData)) processQRData(code.data || '', code.binaryData);
         var pct = Math.min((time / duration) * 100, 99);
         decodeProgress.style.width = pct + '%';
         var found = Object.keys(decodedChunks).length;
@@ -1101,8 +1318,34 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       finishDecoding();
     }
 
-    function processQRData(data) {
+    function processQRData(data, binaryData) {
       try {
+        var v3Frame = decodeV3Frame(data, binaryData);
+        if (v3Frame) {
+          decodedChunks[v3Frame.i] = v3Frame;
+          protocolVersion = 3;
+          if (!expectedTotal) {
+            expectedTotal = v3Frame.n;
+            isGzipped = v3Frame.gz;
+            isZipped = v3Frame.zip;
+            rsEnabled = v3Frame.rs;
+            rsK = v3Frame.k;
+            if (v3Frame.meta) {
+              expectedHash = v3Frame.meta.hash;
+              fileName = v3Frame.meta.name;
+              originalSize = v3Frame.meta.originalSize;
+            }
+            initChunkGrid(expectedTotal);
+          } else if (v3Frame.meta) {
+            expectedHash = v3Frame.meta.hash;
+            fileName = v3Frame.meta.name;
+            originalSize = v3Frame.meta.originalSize;
+          }
+          updateChunkGrid();
+          updatePreview();
+          return;
+        }
+
         var chunk = JSON.parse(data);
         if ((chunk.v === 1 || chunk.v === 2) && typeof chunk.i === 'number' && typeof chunk.n === 'number' && chunk.d) {
           decodedChunks[chunk.i] = chunk.d;
@@ -1149,6 +1392,10 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     }
 
     function updatePreview() {
+      if (protocolVersion === 3) {
+        updatePreviewV3();
+        return;
+      }
       var found = Object.keys(decodedChunks).length;
       if (found === 0) return;
       previewSection.classList.remove('hidden');
@@ -1178,6 +1425,36 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       } catch (e) { previewCode.textContent = '[decoding...]'; }
     }
 
+    function updatePreviewV3() {
+      var found = Object.keys(decodedChunks).length;
+      if (found === 0) return;
+      previewSection.classList.remove('hidden');
+      var complete = expectedTotal && found >= expectedTotal;
+      var rsEnough = rsEnabled && found >= rsK;
+      var displayComplete = complete || rsEnough;
+      previewBadge.textContent = displayComplete ? (rsEnough && !complete ? 'RS recoverable' : 'complete') : 'partial (' + found + '/' + expectedTotal + ')';
+      previewBadge.className = 'badge ' + (displayComplete ? 'badge-success' : 'badge-info');
+
+      var first = decodedChunks[0];
+      if (!first || !first.meta) {
+        previewCode.textContent = '[waiting for metadata frame]';
+        return;
+      }
+
+      try {
+        var bytes = assembleV3PreviewBytes(decodedChunks, rsK, first.meta);
+        if (isGzipped) { try { bytes = pako.ungzip(bytes); } catch (e) { previewCode.textContent = '[decompressing...]'; return; } }
+        try {
+          var text = new TextDecoder('utf-8', { fatal: true }).decode(bytes);
+          var lines = text.split('\n');
+          previewCode.textContent = lines.length > 30 ? lines.slice(0, 30).join('\n') + '\n\n... (' + lines.length + ' lines)' : text;
+        } catch (e) { previewCode.textContent = '[Binary — ' + formatSize(bytes.length) + ']'; }
+        previewMeta.innerHTML = '<span>' + formatSize(bytes.length) + '</span>' +
+          (fileName ? '<span>' + escapeHtml(fileName) + '</span>' : '') +
+          (isGzipped ? '<span class="badge badge-info">gzip</span>' : '');
+      } catch (e) { previewCode.textContent = '[decoding...]'; }
+    }
+
     function finishDecoding() {
       var foundCount = Object.keys(decodedChunks).length;
       var allFound = expectedTotal && foundCount >= expectedTotal;
@@ -1198,6 +1475,10 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     }
 
     function assembleResult(complete, useRS) {
+      if (protocolVersion === 3) {
+        assembleResultV3(complete, useRS);
+        return;
+      }
       resultCard.classList.remove('hidden');
       resultCode.textContent = '';
       if (!complete && !useRS) { resultBadge.textContent = 'INCOMPLETE'; resultBadge.className = 'badge badge-error'; }
@@ -1263,6 +1544,59 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       }
     }
 
+    function assembleResultV3(complete, useRS) {
+      resultCard.classList.remove('hidden');
+      resultCode.textContent = '';
+
+      var assembled = assembleV3Result(decodedChunks, expectedTotal, rsK, rsEnabled);
+      if (!assembled) {
+        resultBadge.textContent = 'INCOMPLETE';
+        resultBadge.className = 'badge badge-error';
+        resultCode.textContent = 'Incomplete: missing required chunks.';
+        return;
+      }
+
+      var bytes = assembled.bytes;
+      var meta = assembled.meta;
+      expectedHash = meta.hash;
+      fileName = meta.name;
+      originalSize = meta.originalSize;
+
+      try {
+        if (isGzipped) { try { bytes = pako.ungzip(bytes); } catch (e) { resultCode.textContent = 'Error: gzip failed.'; resultBadge.textContent = 'ERROR'; resultBadge.className = 'badge badge-error'; return; } }
+
+        var metaHtml = '<span>' + formatSize(bytes.length) + '</span><span>' + escapeHtml(fileName || 'unknown') + '</span><span>Hash: ' + (expectedHash || '?') + '</span>';
+        if (isGzipped) metaHtml += '<span class="badge badge-info">gzip</span>';
+        if (isZipped) metaHtml += '<span class="badge badge-info">zip archive</span>';
+        if ((useRS || assembled.recovered) && assembled.recovered) metaHtml += '<span class="badge badge-comp">RS recovered</span>';
+        resultMeta.innerHTML = metaHtml;
+        resultBadge.textContent = 'VERIFIED';
+        resultBadge.className = 'badge badge-success';
+
+        if (isZipped) {
+          resultCode.textContent = '[' + formatSize(bytes.length) + ' ZIP archive — see files below]';
+          showZipBrowser(bytes);
+        } else {
+          var text;
+          try { text = new TextDecoder('utf-8', { fatal: true }).decode(bytes); } catch (e) { text = '[Binary — use Download]'; }
+          resultCode.textContent = text;
+
+          btnDownload.onclick = function() {
+            downloadBlob(bytes, fileName || 'decoded-file');
+          };
+          btnCopy.onclick = function() {
+            navigator.clipboard.writeText(resultCode.textContent).then(function() {
+              btnCopy.textContent = 'Copied!';
+              setTimeout(function() { btnCopy.textContent = 'Copy to Clipboard'; }, 2000);
+            });
+          };
+        }
+      } catch (e) {
+        resultCode.textContent = 'Error: ' + e.message;
+        resultBadge.textContent = 'ERROR'; resultBadge.className = 'badge badge-error';
+      }
+    }
+
     var zipBrowser = document.getElementById('zip-browser');
     var zipFileList = document.getElementById('zip-file-list');
     var zipCountBadge = document.getElementById('zip-count');
diff --git a/encoder/index.html b/encoder/index.html
index 72bc3cb..bf9d6e8 100644
--- a/encoder/index.html
+++ b/encoder/index.html
@@ -8,6 +8,7 @@
   <script src="pako.min.js"></script>
   <script src="jszip.min.js"></script>
   <script src="reedsolomon.js"></script>
+  <script src="../shared/protocol-v3.js"></script>
   <style>
     :root {
       --bg: #1e1e2e;
@@ -382,14 +383,19 @@ <h3>Export</h3>
 
     var maxChunkSizeCache = {};
 
+    function v3BodyBudget(frameBudget) {
+      return Math.max(1, frameBudget - 24);
+    }
+
     function getMaxChunkSize(ec) {
       if (maxChunkSizeCache[ec]) return maxChunkSizeCache[ec];
       var sizes = [800, 750, 700, 650, 600, 550, 500, 450, 400, 350, 300, 250, 200, 150, 100];
       for (var s = 0; s < sizes.length; s++) {
-        var payload = JSON.stringify({
-          v: 2, i: 0, n: 999, hash: '12345678', name: 'x'.repeat(40),
-          rs: 1, k: 999, sz: 99999, t: 'd', d: 'A'.repeat(sizes[s])
+        var frames = QrProtocolV3.buildFrames(new Uint8Array(sizes[s] * 2), {
+          name: 'x'.repeat(40), hash: '12345678', originalSize: 99999,
+          chunkBodySize: v3BodyBudget(sizes[s]), gz: true, zip: false, rsParity: 1
         });
+        var payload = frames[0].bytes;
         try {
           var qr = qrcode(0, ec);
           qr.addData(payload);
@@ -404,13 +410,12 @@ <h3>Export</h3>
 
     function updateDensityInfo() {
       if (!lastRawBytes) { densityInfo.textContent = '—'; return; }
-      var info = getCompressedBase64();
-      var base64 = info.base64;
-      var k = Math.ceil(base64.length / userChunkSize);
-      var payload = JSON.stringify({
-        v: 2, i: 0, n: k, hash: '12345678', name: 'x'.repeat(40),
-        rs: 1, k: k, sz: 99999, t: 'd', d: 'A'.repeat(userChunkSize)
+      var info = getCompressedData();
+      var frames = QrProtocolV3.buildFrames(info.dataToEncode, {
+        name: lastDisplayName || 'file', hash: '12345678', originalSize: lastRawBytes.length,
+        chunkBodySize: v3BodyBudget(userChunkSize), gz: info.useCompressed, zip: lastIsZip, rsParity: rsParity
       });
+      var payload = frames[0].bytes;
       try {
         var qr = qrcode(0, userEcLevel);
         qr.addData(payload);
@@ -418,7 +423,7 @@ <h3>Export</h3>
         var modules = qr.getModuleCount();
         var cellSize = Math.floor(400 / modules);
         var ver = Math.round((modules - 17) / 4);
-        densityInfo.textContent = k + ' chunks \u00b7 v' + ver + ' QR \u00b7 ' + cellSize + 'px cells';
+        densityInfo.textContent = frames.length + ' chunks \u00b7 v' + ver + ' QR \u00b7 ' + cellSize + 'px cells';
         densityInfo.className = 'badge ' + (cellSize >= 5 ? 'badge-success' : cellSize >= 3 ? 'badge-info' : 'badge-error');
       } catch (e) {
         var max = getMaxChunkSize(userEcLevel);
@@ -434,13 +439,12 @@ <h3>Export</h3>
     var cachedBase64 = '';
     var densityDebounceId = null;
 
-    function getCompressedBase64() {
+    function getCompressedData() {
       if (cachedCompressed && cachedCompressed.rawBytes === lastRawBytes) return cachedCompressed;
       var compressed = pako.gzip(lastRawBytes);
       var useCompressed = compressed.length < lastRawBytes.length;
       var dataToEncode = useCompressed ? compressed : lastRawBytes;
-      var base64 = bytesToBase64(dataToEncode);
-      cachedCompressed = { rawBytes: lastRawBytes, base64: base64, compressed: compressed, useCompressed: useCompressed };
+      cachedCompressed = { rawBytes: lastRawBytes, dataToEncode: dataToEncode, compressed: compressed, useCompressed: useCompressed };
       return cachedCompressed;
     }
 
@@ -512,16 +516,34 @@ <h3>Export</h3>
         qr.make();
         return qr.getModuleCount();
       } catch (e) {
+        getQrModuleCount.lastError = e && e.message ? e.message : String(e);
         return 0;
       }
     }
 
+    function chunkPayload(chunk) {
+      return chunk && chunk.bytes instanceof Uint8Array ? chunk.bytes : JSON.stringify(chunk);
+    }
+
     function calcFixedSize(chunksArr) {
       var maxMod = 0;
+      var failedIndex = -1;
       for (var i = 0; i < chunksArr.length; i++) {
-        var m = getQrModuleCount(JSON.stringify(chunksArr[i]));
+        var m = getQrModuleCount(chunkPayload(chunksArr[i]));
+        if (!m) {
+          failedIndex = i;
+          break;
+        }
         if (m > maxMod) maxMod = m;
       }
+      if (failedIndex !== -1 || !maxMod) {
+        return {
+          w: 440,
+          h: 440,
+          error: 'QR frame ' + (failedIndex + 1) + ' is too large for the selected error correction level.',
+          detail: getQrModuleCount.lastError || ''
+        };
+      }
       var cellSize = Math.max(4, Math.floor(400 / maxMod));
       var size = cellSize * maxMod + 40;
       return { w: size, h: size };
@@ -544,6 +566,30 @@ <h3>Export</h3>
       }
     }
 
+    function renderCanvasMessage(cvs, message) {
+      cvs.width = fixedSize.w;
+      cvs.height = fixedSize.h;
+      var ctx = cvs.getContext('2d');
+      ctx.fillStyle = '#FFFFFF';
+      ctx.fillRect(0, 0, cvs.width, cvs.height);
+      ctx.fillStyle = '#B00020';
+      ctx.font = '14px sans-serif';
+      var words = String(message).split(' ');
+      var line = '';
+      var y = 32;
+      for (var i = 0; i < words.length; i++) {
+        var test = line ? line + ' ' + words[i] : words[i];
+        if (ctx.measureText(test).width > cvs.width - 40 && line) {
+          ctx.fillText(line, 20, y);
+          line = words[i];
+          y += 20;
+        } else {
+          line = test;
+        }
+      }
+      if (line) ctx.fillText(line, 20, y);
+    }
+
     dropZone.addEventListener('dragover', function(e) { e.preventDefault(); dropZone.classList.add('dragover'); });
     dropZone.addEventListener('dragleave', function() { dropZone.classList.remove('dragover'); });
     dropZone.addEventListener('drop', function(e) {
@@ -691,70 +737,32 @@ <h3>Export</h3>
       var compressionFlag = useCompressed ? 1 : 0;
 
       var hash = simpleHash(rawBytes);
-      var base64 = bytesToBase64(dataToEncode);
-
-      effectiveChunkSize = userChunkSize;
       var maxForEc = getMaxChunkSize(userEcLevel);
-      if (effectiveChunkSize > maxForEc) effectiveChunkSize = maxForEc;
-
-      var dataChunkCount = Math.ceil(base64.length / effectiveChunkSize);
-      var dataChunks = [];
-      for (var i = 0; i < dataChunkCount; i++) {
-        dataChunks.push(base64.slice(i * effectiveChunkSize, (i + 1) * effectiveChunkSize));
-      }
-
-      var parityChunkData = [];
-      if (rsParity > 0 && dataChunkCount > 0) {
-        var chunkBytes = dataChunks.map(function(d) {
-          var b = [];
-          for (var c = 0; c < d.length; c++) b.push(d.charCodeAt(c));
-          return new Uint8Array(b);
-        });
-        parityChunkData = ReedSolomon.encode(chunkBytes, rsParity);
-      }
-
-      var totalCount = dataChunkCount + parityChunkData.length;
-      chunks = [];
+      effectiveChunkSize = Math.min(userChunkSize, maxForEc);
 
-      for (var di = 0; di < dataChunkCount; di++) {
-        chunks.push({
-          v: 2,
-          i: di,
-          n: totalCount,
-          hash: hash,
+      while (effectiveChunkSize >= 100) {
+        chunks = QrProtocolV3.buildFrames(dataToEncode, {
           name: displayName,
-          gz: compressionFlag,
-          zip: isZip ? 1 : 0,
-          rs: rsParity > 0 ? 1 : 0,
-          k: dataChunkCount,
-          sz: rawBytes.length,
-          t: 'd',
-          d: dataChunks[di]
-        });
-      }
-
-      for (var pi = 0; pi < parityChunkData.length; pi++) {
-        var pRaw = '';
-        for (var b2 = 0; b2 < parityChunkData[pi].length; b2++) {
-          pRaw += String.fromCharCode(parityChunkData[pi][b2]);
-        }
-        chunks.push({
-          v: 2,
-          i: dataChunkCount + pi,
-          n: totalCount,
           hash: hash,
-          name: displayName,
-          gz: compressionFlag,
-          zip: isZip ? 1 : 0,
-          rs: rsParity > 0 ? 1 : 0,
-          k: dataChunkCount,
-          sz: rawBytes.length,
-          t: 'p',
-          d: btoa(pRaw)
+          originalSize: rawBytes.length,
+          chunkBodySize: v3BodyBudget(effectiveChunkSize),
+          gz: compressionFlag === 1,
+          zip: isZip ? true : false,
+          rsParity: rsParity
         });
+        fixedSize = calcFixedSize(chunks);
+        if (!fixedSize.error) break;
+        effectiveChunkSize -= 50;
       }
 
-      fixedSize = calcFixedSize(chunks);
+      if (fixedSize.error) {
+        fileMeta.classList.remove('hidden');
+        fileMeta.innerHTML = '<strong>' + escapeHtml(displayName) + '</strong> &middot; <span class="badge badge-error">' + escapeHtml(fixedSize.error) + '</span>';
+        encodeCard.classList.remove('hidden');
+        qrMeta.innerHTML = '<span class="badge badge-error">' + escapeHtml(fixedSize.error + (fixedSize.detail ? ' ' + fixedSize.detail : '')) + '</span>';
+        renderCanvasMessage(canvas, fixedSize.error + (fixedSize.detail ? ' ' + fixedSize.detail : ''));
+        return;
+      }
 
       fileMeta.classList.remove('hidden');
       fileMeta.innerHTML = '<strong>' + escapeHtml(displayName) + '</strong> &middot; ' + formatSize(rawBytes.length) + ' &middot; ' + chunks.length + ' chunk' + (chunks.length !== 1 ? 's' : '') + ' &middot; Hash: <span style="font-size:1em;color:var(--accent)">' + hash + '</span>';
@@ -778,10 +786,10 @@ <h3>Export</h3>
       setRsParity(rsParity);
 
       encodeCard.classList.remove('hidden');
-      var metaParts = ['Base64 payload: ' + formatSize(base64.length) + ' &middot; chunk size: ' + effectiveChunkSize + ' bytes'];
+      var metaParts = ['Binary payload: ' + formatSize(dataToEncode.length) + ' &middot; chunk size: ' + effectiveChunkSize + ' bytes'];
       if (useCompressed) metaParts.push('<span class="badge badge-comp">gzip compressed</span>');
       if (isZip) metaParts.push('<span class="badge badge-comp">zipped</span>');
-      if (rsParity > 0) metaParts.push('<span class="badge badge-comp">RS +' + parityChunkData.length + ' parity (recover ' + rsParity + ')</span>');
+      if (rsParity > 0) metaParts.push('<span class="badge badge-comp">RS +' + (chunks.length - chunks[0].k) + ' parity (recover ' + rsParity + ')</span>');
       qrMeta.innerHTML = metaParts.join(' &middot; ');
 
       currentFrame = 0;
@@ -793,7 +801,7 @@ <h3>Export</h3>
 
     function renderFrame(index) {
       var chunk = chunks[index];
-      var payload = JSON.stringify(chunk);
+      var payload = chunkPayload(chunk);
       renderQrToCanvas(canvas, payload);
 
       var pct = ((index + 1) / chunks.length * 100).toFixed(0);
@@ -995,6 +1003,12 @@ <h3>Export</h3>
 
     btnGif.addEventListener('click', function() {
       if (chunks.length === 0) return;
+      fixedSize = calcFixedSize(chunks);
+      if (fixedSize.error) {
+        gifStatus.classList.remove('hidden');
+        gifStatus.textContent = fixedSize.error;
+        return;
+      }
 
       btnGif.disabled = true;
       gifStatus.classList.remove('hidden');
@@ -1009,14 +1023,20 @@ <h3>Export</h3>
       var tempCanvas = document.createElement('canvas');
       tempCanvas.width = gw;
       tempCanvas.height = gh;
-      var ctx = tempCanvas.getContext('2d', { willReadFrequently: true });
 
       var frames = [];
 
       for (var loop = 0; loop < loops; loop++) {
         for (var i = 0; i < chunks.length; i++) {
-          var payload = JSON.stringify(chunks[i]);
-          drawQrToCanvas(tempCanvas, payload, gw, gh);
+          var payload = chunkPayload(chunks[i]);
+          try {
+            drawQrToCanvas(tempCanvas, payload, gw, gh);
+          } catch (err) {
+            gifStatus.textContent = 'Error rendering frame ' + (i + 1) + ': ' + (err.message || err);
+            btnGif.disabled = false;
+            return;
+          }
+          var ctx = tempCanvas.getContext('2d', { willReadFrequently: true });
           var imgData = ctx.getImageData(0, 0, gw, gh);
           var pixels = new Uint8Array(gw * gh);
           for (var p = 0; p < pixels.length; p++) {
@@ -1052,6 +1072,12 @@ <h3>Export</h3>
 
     btnVideo.addEventListener('click', function() {
       if (chunks.length === 0) return;
+      fixedSize = calcFixedSize(chunks);
+      if (fixedSize.error) {
+        videoStatus.classList.remove('hidden');
+        videoStatus.textContent = fixedSize.error;
+        return;
+      }
 
       var mimeType = '';
       var ext = '';
@@ -1128,7 +1154,7 @@ <h3>Export</h3>
           return;
         }
 
-        var payload = JSON.stringify(frameQueue[qi]);
+        var payload = chunkPayload(frameQueue[qi]);
         drawQrToCanvas(recCanvas, payload, gw, gh);
 
         if (track.requestFrame) {
diff --git a/encoder/qrcode.js b/encoder/qrcode.js
index 76889b5..ea6352b 100644
--- a/encoder/qrcode.js
+++ b/encoder/qrcode.js
@@ -737,6 +737,12 @@ var qrcode = function() {
   qrcode.stringToBytesFuncs = {
     'default' : function(s) {
       var bytes = [];
+      if (typeof s !== 'string' && s && typeof s.length == 'number') {
+        for (var j = 0; j < s.length; j += 1) {
+          bytes.push(s[j] & 0xff);
+        }
+        return bytes;
+      }
       for (var i = 0; i < s.length; i += 1) {
         var c = s.charCodeAt(i);
         bytes.push(c & 0xff);
diff --git a/shared/protocol.ts b/shared/protocol.ts
index 63dd1ae..4a5ed1b 100644
--- a/shared/protocol.ts
+++ b/shared/protocol.ts
@@ -1,11 +1,14 @@
-export interface QrChunk {
-  v: number;
+export interface QrFrameV3 {
+  v: 3;
   i: number;
   n: number;
-  hash: string;
-  name: string;
-  d: string;
+  k: number;
+  gz: boolean;
+  zip: boolean;
+  rs: boolean;
+  parity: boolean;
+  body: Uint8Array;
 }
 
-export const CHUNK_VERSION = 1;
+export const CHUNK_VERSION = 3;
 export const MAX_CHUNK_BYTES = 1200;
diff --git a/test/test.js b/test/test.js
index 8378210..e08af5f 100644
--- a/test/test.js
+++ b/test/test.js
@@ -8,6 +8,9 @@ const vm = require('vm');
 const rsPath = path.join(__dirname, '..', 'shared', 'reedsolomon.js');
 const rsCode = fs.readFileSync(rsPath, 'utf8');
 vm.runInThisContext(rsCode);
+const protocolV3Path = path.join(__dirname, '..', 'shared', 'protocol-v3.js');
+const protocolV3Code = fs.readFileSync(protocolV3Path, 'utf8');
+vm.runInThisContext(protocolV3Code);
 
 function strToBytes(s) {
   const b = new Uint8Array(s.length);
@@ -267,6 +270,66 @@ describe('FNV-1a hash', () => {
   });
 });
 
+describe('Protocol v3 binary framing', () => {
+  it('round-trips binary payload without base64 expansion', () => {
+    const data = new Uint8Array(1024);
+    for (let i = 0; i < data.length; i++) data[i] = i & 0xff;
+
+    const frames = QrProtocolV3.buildFrames(data, {
+      name: 'binary.bin',
+      hash: '1234abcd',
+      originalSize: data.length,
+      chunkBodySize: 500,
+      gz: false,
+      zip: false,
+      rsParity: 0
+    });
+
+    assert.strictEqual(frames[0].v, 3);
+    assert.ok(frames.length > 1);
+    assert.ok(!('text' in frames[0]));
+    assert.strictEqual(frames[0].bytes[0], 0x51);
+    assert.strictEqual(frames[0].bytes[1], 0x33);
+    assert.ok(frames[0].bytes.length < 500 + 64);
+
+    const decoded = {};
+    frames.forEach(frame => {
+      const parsed = QrProtocolV3.decodeFrame(frame.bytes);
+      decoded[parsed.i] = parsed;
+    });
+
+    const assembled = QrProtocolV3.assembleData(frames.map(frame => decoded[frame.i].body));
+    assert.strictEqual(assembled.meta.name, 'binary.bin');
+    assert.strictEqual(assembled.meta.hash, '1234abcd');
+    assert.deepStrictEqual(Buffer.from(assembled.bytes), Buffer.from(data));
+  });
+
+  it('recovers missing metadata frame through Reed-Solomon parity', () => {
+    const data = Buffer.from('hello v3 reed-solomon recovery '.repeat(80));
+    const frames = QrProtocolV3.buildFrames(data, {
+      name: 'note.txt',
+      hash: 'a1b2c3d4',
+      originalSize: data.length,
+      chunkBodySize: 300,
+      gz: false,
+      zip: false,
+      rsParity: 2
+    });
+
+    const parsed = new Array(frames.length).fill(null);
+    frames.forEach(frame => {
+      if (frame.i !== 0 && frame.i !== 2) parsed[frame.i] = QrProtocolV3.decodeFrame(frame.bytes);
+    });
+
+    const recovered = QrProtocolV3.recoverBodies(parsed, frames[0].k);
+    assert.ok(recovered);
+    const assembled = QrProtocolV3.assembleData(recovered);
+    assert.strictEqual(assembled.meta.name, 'note.txt');
+    assert.strictEqual(assembled.meta.hash, 'a1b2c3d4');
+    assert.deepStrictEqual(Buffer.from(assembled.bytes), Buffer.from(data));
+  });
+});
+
 describe('bytesToBase64', () => {
   it('round-trips correctly', () => {
     const original = Buffer.from('Hello, World! This is a test of base64 encoding.');

From a845e0920bdcd95027a089bbb61af5ddaee8baaa Mon Sep 17 00:00:00 2001
From: Odyhibit <josh.2990@gmail.com>
Date: Thu, 21 May 2026 19:36:16 -0500
Subject: [PATCH 2/9] moved v3 file

---
 shared/protocol-v3.js | 229 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 229 insertions(+)
 create mode 100644 shared/protocol-v3.js

diff --git a/shared/protocol-v3.js b/shared/protocol-v3.js
new file mode 100644
index 0000000..1f48a64
--- /dev/null
+++ b/shared/protocol-v3.js
@@ -0,0 +1,229 @@
+var QrProtocolV3 = (function() {
+  var MAGIC_0 = 0x51; // Q
+  var MAGIC_1 = 0x33; // 3
+  var FLAG_GZIP = 1 << 0;
+  var FLAG_ZIP = 1 << 1;
+  var FLAG_RS = 1 << 2;
+  var FLAG_PARITY = 1 << 3;
+
+  function writeVarint(out, value) {
+    value = Number(value);
+    while (value >= 0x80) {
+      out.push((value & 0x7f) | 0x80);
+      value = Math.floor(value / 128);
+    }
+    out.push(value & 0x7f);
+  }
+
+  function readVarint(bytes, pos) {
+    var value = 0;
+    var shift = 0;
+    while (pos < bytes.length) {
+      var b = bytes[pos++];
+      value += (b & 0x7f) * Math.pow(2, shift);
+      if ((b & 0x80) === 0) return { value: value, pos: pos };
+      shift += 7;
+      if (shift > 35) throw new Error('varint too long');
+    }
+    throw new Error('truncated varint');
+  }
+
+  function utf8Encode(str) {
+    if (typeof TextEncoder !== 'undefined') return Array.prototype.slice.call(new TextEncoder().encode(str));
+    var encoded = unescape(encodeURIComponent(str));
+    var bytes = [];
+    for (var i = 0; i < encoded.length; i++) bytes.push(encoded.charCodeAt(i) & 0xff);
+    return bytes;
+  }
+
+  function utf8Decode(bytes) {
+    if (typeof TextDecoder !== 'undefined') return new TextDecoder('utf-8').decode(bytes);
+    var s = '';
+    for (var i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
+    return decodeURIComponent(escape(s));
+  }
+
+  function stringToBytes(str) {
+    var bytes = new Uint8Array(str.length);
+    for (var i = 0; i < str.length; i++) bytes[i] = str.charCodeAt(i) & 0xff;
+    return bytes;
+  }
+
+  function concatParts(parts, totalLength) {
+    var out = new Uint8Array(totalLength);
+    var offset = 0;
+    for (var i = 0; i < parts.length; i++) {
+      out.set(parts[i], offset);
+      offset += parts[i].length;
+    }
+    return out;
+  }
+
+  function encodeMetadata(meta, firstDataLen) {
+    var out = [];
+    var nameBytes = utf8Encode(meta.name || 'decoded-file');
+    writeVarint(out, meta.encodedSize);
+    writeVarint(out, meta.originalSize);
+    writeVarint(out, firstDataLen);
+    var hashNum = parseInt(meta.hash || '0', 16) >>> 0;
+    out.push(hashNum & 0xff, (hashNum >>> 8) & 0xff, (hashNum >>> 16) & 0xff, (hashNum >>> 24) & 0xff);
+    writeVarint(out, nameBytes.length);
+    for (var i = 0; i < nameBytes.length; i++) out.push(nameBytes[i]);
+    return new Uint8Array(out);
+  }
+
+  function parseMetadataBody(body) {
+    var pos = 0;
+    var r = readVarint(body, pos); var encodedSize = r.value; pos = r.pos;
+    r = readVarint(body, pos); var originalSize = r.value; pos = r.pos;
+    r = readVarint(body, pos); var firstDataLen = r.value; pos = r.pos;
+    if (pos + 4 > body.length) throw new Error('truncated hash');
+    var hashNum = (body[pos] | (body[pos + 1] << 8) | (body[pos + 2] << 16) | (body[pos + 3] << 24)) >>> 0;
+    pos += 4;
+    r = readVarint(body, pos); var nameLen = r.value; pos = r.pos;
+    if (pos + nameLen > body.length) throw new Error('truncated name');
+    var name = utf8Decode(body.subarray(pos, pos + nameLen));
+    pos += nameLen;
+    var dataEnd = Math.min(body.length, pos + firstDataLen);
+    return {
+      encodedSize: encodedSize,
+      originalSize: originalSize,
+      firstDataLen: firstDataLen,
+      hash: hashNum.toString(16).padStart(8, '0'),
+      name: name,
+      data: body.subarray(pos, dataEnd)
+    };
+  }
+
+  function encodeFrame(frame) {
+    var flags = 0;
+    if (frame.gz) flags |= FLAG_GZIP;
+    if (frame.zip) flags |= FLAG_ZIP;
+    if (frame.rs) flags |= FLAG_RS;
+    if (frame.parity) flags |= FLAG_PARITY;
+
+    var out = [MAGIC_0, MAGIC_1, flags];
+    writeVarint(out, frame.i);
+    writeVarint(out, frame.n);
+    writeVarint(out, frame.k);
+    for (var b = 0; b < frame.body.length; b++) out.push(frame.body[b]);
+    return new Uint8Array(out);
+  }
+
+  function decodeFrame(input) {
+    var bytes = input instanceof Uint8Array ? input : stringToBytes(input || '');
+    if (bytes.length < 3 || bytes[0] !== MAGIC_0 || bytes[1] !== MAGIC_1) return null;
+    var flags = bytes[2];
+    var pos = 3;
+    var r = readVarint(bytes, pos); var i = r.value; pos = r.pos;
+    r = readVarint(bytes, pos); var n = r.value; pos = r.pos;
+    r = readVarint(bytes, pos); var k = r.value; pos = r.pos;
+    var body = bytes.subarray(pos);
+    var frame = {
+      v: 3,
+      i: i,
+      n: n,
+      k: k,
+      gz: (flags & FLAG_GZIP) !== 0,
+      zip: (flags & FLAG_ZIP) !== 0,
+      rs: (flags & FLAG_RS) !== 0,
+      parity: (flags & FLAG_PARITY) !== 0,
+      body: body
+    };
+    if (i === 0 && !frame.parity) frame.meta = parseMetadataBody(body);
+    return frame;
+  }
+
+  function makeDataBodies(dataBytes, meta, chunkBodySize) {
+    var firstDataLen = 0;
+    var metadata = encodeMetadata(meta, firstDataLen);
+    while (true) {
+      firstDataLen = Math.max(0, chunkBodySize - metadata.length);
+      var next = encodeMetadata(meta, Math.min(firstDataLen, dataBytes.length));
+      if (next.length === metadata.length) {
+        metadata = next;
+        firstDataLen = Math.min(firstDataLen, dataBytes.length);
+        break;
+      }
+      metadata = next;
+    }
+
+    var bodies = [];
+    var firstData = dataBytes.subarray(0, firstDataLen);
+    bodies.push(concatParts([metadata, firstData], metadata.length + firstData.length));
+    for (var offset = firstDataLen; offset < dataBytes.length; offset += chunkBodySize) {
+      bodies.push(dataBytes.subarray(offset, Math.min(offset + chunkBodySize, dataBytes.length)));
+    }
+    return bodies;
+  }
+
+  function buildFrames(dataBytes, options) {
+    var meta = {
+      name: options.name,
+      hash: options.hash,
+      originalSize: options.originalSize,
+      encodedSize: dataBytes.length
+    };
+    var dataBodies = makeDataBodies(dataBytes, meta, options.chunkBodySize);
+    var parityBodies = [];
+    if (options.rsParity > 0 && dataBodies.length > 0) {
+      parityBodies = ReedSolomon.encode(dataBodies, options.rsParity);
+    }
+    var total = dataBodies.length + parityBodies.length;
+    var frames = [];
+    for (var i = 0; i < dataBodies.length; i++) {
+      frames.push({ v: 3, i: i, n: total, k: dataBodies.length, gz: options.gz, zip: options.zip, rs: parityBodies.length > 0, parity: false, body: dataBodies[i] });
+    }
+    for (var p = 0; p < parityBodies.length; p++) {
+      frames.push({ v: 3, i: dataBodies.length + p, n: total, k: dataBodies.length, gz: options.gz, zip: options.zip, rs: true, parity: true, body: parityBodies[p] });
+    }
+    return frames.map(function(frame) {
+      var bytes = encodeFrame(frame);
+      frame.bytes = bytes;
+      if (frame.i === 0 && !frame.parity) frame.meta = parseMetadataBody(frame.body);
+      return frame;
+    });
+  }
+
+  function recoverBodies(frames, k) {
+    var available = [];
+    var indices = [];
+    for (var i = 0; i < frames.length; i++) {
+      if (frames[i] !== null && frames[i] !== undefined) {
+        available.push(frames[i].body);
+        indices.push(i);
+      }
+    }
+    if (available.length < k) return null;
+    return ReedSolomon.decode(available, indices, k);
+  }
+
+  function assembleData(dataBodies) {
+    var meta = parseMetadataBody(dataBodies[0]);
+    var parts = [meta.data];
+    var total = meta.data.length;
+    for (var i = 1; i < dataBodies.length; i++) {
+      parts.push(dataBodies[i]);
+      total += dataBodies[i].length;
+    }
+    var joined = concatParts(parts, total);
+    return {
+      meta: meta,
+      bytes: joined.subarray(0, meta.encodedSize)
+    };
+  }
+
+  return {
+    FLAG_GZIP: FLAG_GZIP,
+    FLAG_ZIP: FLAG_ZIP,
+    FLAG_RS: FLAG_RS,
+    FLAG_PARITY: FLAG_PARITY,
+    stringToBytes: stringToBytes,
+    encodeFrame: encodeFrame,
+    decodeFrame: decodeFrame,
+    buildFrames: buildFrames,
+    recoverBodies: recoverBodies,
+    assembleData: assembleData,
+    parseMetadataBody: parseMetadataBody
+  };
+})();

From fe195df866db6f0d920a0327c50f229598a63428 Mon Sep 17 00:00:00 2001
From: Odyhibit <josh.2990@gmail.com>
Date: Thu, 21 May 2026 20:21:35 -0500
Subject: [PATCH 3/9] changed slider to select QR version, since the blocks of
 base64 text are no longer used.

---
 README.md          |   8 +-
 encoder/index.html | 214 ++++++++++++++++++++++++++-------------------
 2 files changed, 130 insertions(+), 92 deletions(-)

diff --git a/README.md b/README.md
index 32cd8bf..1060d15 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ Open `encoder/index.html` or `decoder/index.html` directly in a browser. Camera
 - Gzip compression
 - GIF, MP4, and WebM export
 - Reed-Solomon erasure coding (+2/+5/+10 parity chunks)
-- Adjustable chunk size (100–800 B) and QR error correction level (L/M/Q/H)
+- Adjustable QR version and QR error correction level (L/M/Q/H)
 
 **Decoding:**
 - Live camera scan with native `BarcodeDetector` (hardware-accelerated) + jsQR fallback
@@ -86,12 +86,12 @@ Other data frames contain only binary payload bytes. Parity frames contain Reed-
 npm test
 ```
 
-43 tests covering GF(256) arithmetic, Reed-Solomon encode/decode, recovery scenarios, path traversal protection, GIF parser bounds checking, and the full encode→RS→recover→decompress pipeline.
+45 tests covering GF(256) arithmetic, Reed-Solomon encode/decode, recovery scenarios, v3 binary framing, path traversal protection, GIF parser bounds checking, and the full encode→RS→recover→decompress pipeline.
 
 ## Camera tips
 
-- **Fast scanning**: chunk size 300 + EC level L = larger cells, easier to scan
-- **Fewer frames**: chunk size 800 + EC level M = fewer QR codes in the sequence
+- **Fast scanning**: lower QR version + EC level L = larger cells, easier to scan
+- **Fewer frames**: higher QR version + EC level M = fewer QR codes in the sequence
 - **Missed chunks**: add +2 or +5 RS parity to recover from dropped frames
 - **Encoder FPS**: start at 3–6 FPS and adjust
 
diff --git a/encoder/index.html b/encoder/index.html
index bf9d6e8..a65c385 100644
--- a/encoder/index.html
+++ b/encoder/index.html
@@ -233,9 +233,9 @@ <h2>1. Select Files</h2>
     <div class="hidden" id="density-section" style="margin-top:12px;">
       <div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
         <div style="display:flex;align-items:center;gap:8px;">
-          <label style="font-size:0.9em;">Chunk size:</label>
-          <input type="range" id="chunk-size-slider" min="100" max="800" step="50" value="500" style="width:120px;">
-          <span id="chunk-size-val" style="font-size:0.85em;min-width:50px;">500</span>
+          <label style="font-size:0.9em;">QR version:</label>
+          <input type="range" id="qr-version-slider" min="1" max="40" step="1" value="12" style="width:120px;">
+          <span id="qr-version-val" style="font-size:0.85em;min-width:95px;">v12 · 65x65</span>
         </div>
         <div style="display:flex;align-items:center;gap:8px;">
           <label style="font-size:0.9em;">Error correction:</label>
@@ -248,6 +248,7 @@ <h2>1. Select Files</h2>
         </div>
         <span class="badge" id="density-info">—</span>
       </div>
+      <div class="export-status hidden" id="encoder-error" style="margin-top:8px;"></div>
     </div>
   </div>
 
@@ -347,13 +348,38 @@ <h3>Export</h3>
     var rsParity = 0;
 
     var densitySection = document.getElementById('density-section');
-    var chunkSizeSlider = document.getElementById('chunk-size-slider');
-    var chunkSizeVal = document.getElementById('chunk-size-val');
+    var qrVersionSlider = document.getElementById('qr-version-slider');
+    var qrVersionVal = document.getElementById('qr-version-val');
     var ecLevelSelect = document.getElementById('ec-level');
     var densityInfo = document.getElementById('density-info');
-    var userChunkSize = 500;
+    var encoderError = document.getElementById('encoder-error');
+    var userQrVersion = 12;
     var userEcLevel = 'M';
 
+    var QR_BYTE_CAPACITY = {
+      L: [0,17,32,53,78,106,134,154,192,230,271,321,367,425,458,520,586,644,718,792,858,929,1003,1091,1171,1273,1367,1465,1528,1628,1732,1840,1952,2068,2188,2303,2431,2563,2699,2809,2953],
+      M: [0,14,26,42,62,84,106,122,152,180,213,251,287,331,362,412,450,504,560,624,666,711,779,857,911,997,1059,1125,1190,1264,1370,1452,1538,1628,1722,1809,1911,1989,2099,2213,2331],
+      Q: [0,11,20,32,46,60,74,86,108,130,151,177,203,241,258,292,322,364,394,442,482,509,565,611,661,715,751,805,868,908,982,1030,1112,1168,1228,1283,1351,1423,1499,1579,1663],
+      H: [0,7,14,24,34,44,58,64,84,98,119,137,155,177,194,220,250,280,310,338,382,403,439,461,511,535,593,625,658,698,742,790,842,898,958,983,1051,1093,1139,1219,1273]
+    };
+
+    function updateQrVersionLabel() {
+      var modules = userQrVersion * 4 + 17;
+      qrVersionVal.textContent = 'v' + userQrVersion + ' · ' + modules + 'x' + modules;
+    }
+    updateQrVersionLabel();
+
+    function showEncoderError(message) {
+      encoderError.textContent = message;
+      encoderError.classList.remove('hidden');
+      encoderError.style.color = 'var(--error)';
+    }
+
+    function clearEncoderError() {
+      encoderError.textContent = '';
+      encoderError.classList.add('hidden');
+    }
+
     function setRsParity(n) {
       rsParity = n;
       var btns = [btnRsOff, btnRs2, btnRs5, btnRs10];
@@ -369,75 +395,90 @@ <h3>Export</h3>
     btnRs5.addEventListener('click', function() { setRsParity(5); reEncode(); });
     btnRs10.addEventListener('click', function() { setRsParity(10); reEncode(); });
 
-    chunkSizeSlider.addEventListener('input', function() {
-      userChunkSize = parseInt(chunkSizeSlider.value);
-      chunkSizeVal.textContent = userChunkSize;
-      debouncedUpdateDensityInfo();
+    qrVersionSlider.addEventListener('input', function() {
+      stopPlayback();
+      userQrVersion = parseInt(qrVersionSlider.value);
+      updateQrVersionLabel();
+      updateDensityInfo();
+    });
+    qrVersionSlider.addEventListener('change', function() {
+      reEncode();
     });
-    chunkSizeSlider.addEventListener('change', function() { reEncode(); });
     ecLevelSelect.addEventListener('change', function() {
       userEcLevel = ecLevelSelect.value;
       updateDensityInfo();
       reEncode();
     });
 
-    var maxChunkSizeCache = {};
-
-    function v3BodyBudget(frameBudget) {
-      return Math.max(1, frameBudget - 24);
+    function getSelectedQrCapacity() {
+      return QR_BYTE_CAPACITY[userEcLevel][userQrVersion];
     }
 
-    function getMaxChunkSize(ec) {
-      if (maxChunkSizeCache[ec]) return maxChunkSizeCache[ec];
-      var sizes = [800, 750, 700, 650, 600, 550, 500, 450, 400, 350, 300, 250, 200, 150, 100];
-      for (var s = 0; s < sizes.length; s++) {
-        var frames = QrProtocolV3.buildFrames(new Uint8Array(sizes[s] * 2), {
-          name: 'x'.repeat(40), hash: '12345678', originalSize: 99999,
-          chunkBodySize: v3BodyBudget(sizes[s]), gz: true, zip: false, rsParity: 1
+    function buildFramesForCapacity(dataBytes, options, capacity) {
+      var low = 1;
+      var high = capacity;
+      var best = null;
+      var bestBodySize = 0;
+      while (low <= high) {
+        var mid = Math.floor((low + high) / 2);
+        var frames = QrProtocolV3.buildFrames(dataBytes, {
+          name: options.name,
+          hash: options.hash,
+          originalSize: options.originalSize,
+          chunkBodySize: mid,
+          gz: options.gz,
+          zip: options.zip,
+          rsParity: options.rsParity
         });
-        var payload = frames[0].bytes;
-        try {
-          var qr = qrcode(0, ec);
-          qr.addData(payload);
-          qr.make();
-          maxChunkSizeCache[ec] = sizes[s];
-          return sizes[s];
-        } catch (e) { continue; }
+        var fits = true;
+        for (var i = 0; i < frames.length; i++) {
+          if (frames[i].bytes.length > capacity) {
+            fits = false;
+            break;
+          }
+        }
+        if (fits) {
+          best = frames;
+          bestBodySize = mid;
+          low = mid + 1;
+        } else {
+          high = mid - 1;
+        }
       }
-      maxChunkSizeCache[ec] = 100;
-      return 100;
+      return { frames: best, bodySize: bestBodySize };
     }
 
     function updateDensityInfo() {
-      if (!lastRawBytes) { densityInfo.textContent = '—'; return; }
+      var capacity = getSelectedQrCapacity();
+      var modules = userQrVersion * 4 + 17;
+      if (!lastRawBytes) {
+        densityInfo.textContent = 'capacity ' + capacity + ' bytes/frame · ' + modules + 'x' + modules + ' modules';
+        densityInfo.className = 'badge badge-info';
+        return;
+      }
       var info = getCompressedData();
-      var frames = QrProtocolV3.buildFrames(info.dataToEncode, {
-        name: lastDisplayName || 'file', hash: '12345678', originalSize: lastRawBytes.length,
-        chunkBodySize: v3BodyBudget(userChunkSize), gz: info.useCompressed, zip: lastIsZip, rsParity: rsParity
-      });
-      var payload = frames[0].bytes;
-      try {
-        var qr = qrcode(0, userEcLevel);
-        qr.addData(payload);
-        qr.make();
-        var modules = qr.getModuleCount();
-        var cellSize = Math.floor(400 / modules);
-        var ver = Math.round((modules - 17) / 4);
-        densityInfo.textContent = frames.length + ' chunks \u00b7 v' + ver + ' QR \u00b7 ' + cellSize + 'px cells';
-        densityInfo.className = 'badge ' + (cellSize >= 5 ? 'badge-success' : cellSize >= 3 ? 'badge-info' : 'badge-error');
-      } catch (e) {
-        var max = getMaxChunkSize(userEcLevel);
-        densityInfo.textContent = 'too large (max ' + max + ')';
+      var built = buildFramesForCapacity(info.dataToEncode, {
+        name: lastDisplayName || 'file',
+        hash: '12345678',
+        originalSize: lastRawBytes.length,
+        gz: info.useCompressed,
+        zip: lastIsZip,
+        rsParity: rsParity
+      }, capacity);
+      if (!built.frames) {
+        densityInfo.textContent = 'metadata too large for selected version';
         densityInfo.className = 'badge badge-error';
+        return;
       }
+      var cellSize = Math.floor(400 / modules);
+      densityInfo.textContent = built.frames.length + ' chunks · ' + built.bodySize + ' body bytes/frame · capacity ' + capacity + ' · ' + modules + 'x' + modules + ' modules';
+      densityInfo.className = 'badge ' + (cellSize >= 5 ? 'badge-success' : cellSize >= 3 ? 'badge-info' : 'badge-error');
     }
 
     var lastRawBytes = null;
     var lastDisplayName = '';
     var lastIsZip = false;
     var cachedCompressed = null;
-    var cachedBase64 = '';
-    var densityDebounceId = null;
 
     function getCompressedData() {
       if (cachedCompressed && cachedCompressed.rawBytes === lastRawBytes) return cachedCompressed;
@@ -448,11 +489,6 @@ <h3>Export</h3>
       return cachedCompressed;
     }
 
-    function debouncedUpdateDensityInfo() {
-      if (densityDebounceId) clearTimeout(densityDebounceId);
-      densityDebounceId = setTimeout(updateDensityInfo, 150);
-    }
-
     function reEncode() {
       if (!lastRawBytes) return;
       encodeBytes(lastRawBytes, lastDisplayName, lastIsZip);
@@ -478,7 +514,7 @@ <h3>Export</h3>
     }
 
     function drawQrToCanvas(cvs, text, fixedWidth, fixedHeight) {
-      var qr = qrcode(0, userEcLevel);
+      var qr = qrcode(userQrVersion, userEcLevel);
       qr.addData(text);
       qr.make();
 
@@ -511,7 +547,7 @@ <h3>Export</h3>
 
     function getQrModuleCount(text) {
       try {
-        var qr = qrcode(0, userEcLevel);
+        var qr = qrcode(userQrVersion, userEcLevel);
         qr.addData(text);
         qr.make();
         return qr.getModuleCount();
@@ -540,7 +576,7 @@ <h3>Export</h3>
         return {
           w: 440,
           h: 440,
-          error: 'QR frame ' + (failedIndex + 1) + ' is too large for the selected error correction level.',
+          error: 'QR frame ' + (failedIndex + 1) + ' is too large for the selected version and error correction level.',
           detail: getQrModuleCount.lastError || ''
         };
       }
@@ -554,14 +590,7 @@ <h3>Export</h3>
         drawQrToCanvas(cvs, text, fixedSize.w, fixedSize.h);
         return true;
       } catch (err) {
-        var ctx = cvs.getContext('2d');
-        cvs.width = fixedSize.w;
-        cvs.height = fixedSize.h;
-        ctx.fillStyle = '#FFFFFF';
-        ctx.fillRect(0, 0, cvs.width, cvs.height);
-        ctx.fillStyle = '#FF0000';
-        ctx.font = '14px sans-serif';
-        ctx.fillText('Error: ' + err.message, 20, cvs.height / 2);
+        renderCanvasMessage(cvs, 'Error: ' + (err.message || err));
         return false;
       }
     }
@@ -686,7 +715,7 @@ <h3>Export</h3>
           var rawBytes = new Uint8Array(reader.result);
           encodeBytes(rawBytes, file.name, false);
         } catch (err) {
-          alert('Error: ' + err.message);
+          showEncoderError('Error reading file: ' + (err.message || err));
           console.error(err);
         }
       };
@@ -726,6 +755,7 @@ <h3>Export</h3>
 
     function encodeBytes(rawBytes, displayName, isZip) {
       stopPlayback();
+      clearEncoderError();
       lastRawBytes = rawBytes;
       lastDisplayName = displayName;
       lastIsZip = isZip;
@@ -737,29 +767,31 @@ <h3>Export</h3>
       var compressionFlag = useCompressed ? 1 : 0;
 
       var hash = simpleHash(rawBytes);
-      var maxForEc = getMaxChunkSize(userEcLevel);
-      effectiveChunkSize = Math.min(userChunkSize, maxForEc);
-
-      while (effectiveChunkSize >= 100) {
-        chunks = QrProtocolV3.buildFrames(dataToEncode, {
-          name: displayName,
-          hash: hash,
-          originalSize: rawBytes.length,
-          chunkBodySize: v3BodyBudget(effectiveChunkSize),
-          gz: compressionFlag === 1,
-          zip: isZip ? true : false,
-          rsParity: rsParity
-        });
-        fixedSize = calcFixedSize(chunks);
-        if (!fixedSize.error) break;
-        effectiveChunkSize -= 50;
-      }
+      var capacity = getSelectedQrCapacity();
+      var built = buildFramesForCapacity(dataToEncode, {
+        name: displayName,
+        hash: hash,
+        originalSize: rawBytes.length,
+        gz: compressionFlag === 1,
+        zip: isZip ? true : false,
+        rsParity: rsParity
+      }, capacity);
+      chunks = built.frames || [];
+      effectiveChunkSize = built.bodySize;
+      fixedSize = chunks.length ? calcFixedSize(chunks) : {
+        w: 440,
+        h: 440,
+        error: 'Metadata is too large for the selected QR version and error correction level.',
+        detail: ''
+      };
 
       if (fixedSize.error) {
         fileMeta.classList.remove('hidden');
         fileMeta.innerHTML = '<strong>' + escapeHtml(displayName) + '</strong> &middot; <span class="badge badge-error">' + escapeHtml(fixedSize.error) + '</span>';
+        densitySection.classList.remove('hidden');
         encodeCard.classList.remove('hidden');
         qrMeta.innerHTML = '<span class="badge badge-error">' + escapeHtml(fixedSize.error + (fixedSize.detail ? ' ' + fixedSize.detail : '')) + '</span>';
+        showEncoderError(fixedSize.error + (fixedSize.detail ? ' ' + fixedSize.detail : ''));
         renderCanvasMessage(canvas, fixedSize.error + (fixedSize.detail ? ' ' + fixedSize.detail : ''));
         return;
       }
@@ -786,7 +818,12 @@ <h3>Export</h3>
       setRsParity(rsParity);
 
       encodeCard.classList.remove('hidden');
-      var metaParts = ['Binary payload: ' + formatSize(dataToEncode.length) + ' &middot; chunk size: ' + effectiveChunkSize + ' bytes'];
+      var metaParts = [
+        'Binary payload: ' + formatSize(dataToEncode.length),
+        'QR v' + userQrVersion + '-' + userEcLevel,
+        'capacity: ' + capacity + ' bytes/frame',
+        'body: ' + effectiveChunkSize + ' bytes/frame'
+      ];
       if (useCompressed) metaParts.push('<span class="badge badge-comp">gzip compressed</span>');
       if (isZip) metaParts.push('<span class="badge badge-comp">zipped</span>');
       if (rsParity > 0) metaParts.push('<span class="badge badge-comp">RS +' + (chunks.length - chunks[0].k) + ' parity (recover ' + rsParity + ')</span>');
@@ -1096,7 +1133,8 @@ <h3>Export</h3>
       }
 
       if (!mimeType) {
-        alert('Your browser does not support video recording. Try Chrome or Edge.');
+        videoStatus.classList.remove('hidden');
+        videoStatus.textContent = 'Your browser does not support video recording. Try Chrome or Edge.';
         return;
       }
 

From 04e75d03735d5ed1717341fe7cb978f384299963 Mon Sep 17 00:00:00 2001
From: Odyhibit <josh.2990@gmail.com>
Date: Tue, 2 Jun 2026 07:24:27 -0500
Subject: [PATCH 4/9] only run jsQR on each frame, update readme

---
 README.md          |  4 ++--
 decoder/index.html | 46 ++++++++++------------------------------------
 index.html         |  2 +-
 3 files changed, 13 insertions(+), 39 deletions(-)

diff --git a/README.md b/README.md
index 1060d15..6234c80 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,7 @@ Open `encoder/index.html` or `decoder/index.html` directly in a browser. Camera
 - Adjustable QR version and QR error correction level (L/M/Q/H)
 
 **Decoding:**
-- Live camera scan with native `BarcodeDetector` (hardware-accelerated) + jsQR fallback
+- Live camera scan with jsQR, including raw binary QR payloads
 - GIF and video upload decoding
 - Progressive preview as chunks arrive
 - RS recovery of missing chunks
@@ -98,7 +98,7 @@ npm test
 ## Requirements
 
 - Node.js (for dev server and tests)
-- Chrome recommended (BarcodeDetector API support)
+- Chrome recommended
 - OpenSSL optional (server falls back to JS cert generation)
 
 ## License
diff --git a/decoder/index.html b/decoder/index.html
index 0782269..5ef1fba 100644
--- a/decoder/index.html
+++ b/decoder/index.html
@@ -398,20 +398,9 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     var camFrameCount = 0;
     var camLastFpsTime = 0;
     var camLastFpsCount = 0;
-    var barcodeDetector = null;
     var camScanning = false;
-    var camFallbackCanvas = document.createElement('canvas');
-    var camFallbackCtx = camFallbackCanvas.getContext('2d', { willReadFrequently: true });
-
-    if ('BarcodeDetector' in window) {
-      BarcodeDetector.getSupportedFormats().then(function(formats) {
-        if (formats.indexOf('qr_code') >= 0) {
-          barcodeDetector = new BarcodeDetector({ formats: ['qr_code'] });
-          cameraScannerBadge.textContent = 'Native';
-          cameraScannerBadge.className = 'badge badge-success';
-        }
-      }).catch(function() {});
-    }
+    var camScanCanvas = document.createElement('canvas');
+    var camScanCtx = camScanCanvas.getContext('2d', { willReadFrequently: true });
 
     btnCameraStart.addEventListener('click', startCamera);
     btnCameraStop.addEventListener('click', stopCamera);
@@ -519,32 +508,17 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
 
       camScanning = true;
 
-      if (barcodeDetector) {
-        barcodeDetector.detect(cameraVideo).then(function(barcodes) {
-          camFrameCount++;
-          for (var i = 0; i < barcodes.length; i++) {
-            if (barcodes[i].rawValue) camProcessQR(barcodes[i].rawValue);
-          }
-          camFallbackJsQR(vw, vh);
-          camAfterScan();
-        }).catch(function() {
-          camFrameCount++;
-          camFallbackJsQR(vw, vh);
-          camAfterScan();
-        });
-      } else {
-        camFrameCount++;
-        camFallbackJsQR(vw, vh);
-        camAfterScan();
-      }
+      camFrameCount++;
+      camScanJsQR(vw, vh);
+      camAfterScan();
     }
 
-    function camFallbackJsQR(vw, vh) {
+    function camScanJsQR(vw, vh) {
       var scale = Math.min(1, 800 / vw);
-      camFallbackCanvas.width = Math.round(vw * scale);
-      camFallbackCanvas.height = Math.round(vh * scale);
-      camFallbackCtx.drawImage(cameraVideo, 0, 0, camFallbackCanvas.width, camFallbackCanvas.height);
-      var imageData = camFallbackCtx.getImageData(0, 0, camFallbackCanvas.width, camFallbackCanvas.height);
+      camScanCanvas.width = Math.round(vw * scale);
+      camScanCanvas.height = Math.round(vh * scale);
+      camScanCtx.drawImage(cameraVideo, 0, 0, camScanCanvas.width, camScanCanvas.height);
+      var imageData = camScanCtx.getImageData(0, 0, camScanCanvas.width, camScanCanvas.height);
       var code = jsQR(imageData.data, imageData.width, imageData.height, {
         inversionAttempts: 'attemptBoth'
       });
diff --git a/index.html b/index.html
index d565e86..0b2fbdc 100644
--- a/index.html
+++ b/index.html
@@ -245,7 +245,7 @@ <h3>GIF & Video Export</h3>
         <div class="feature-card">
           <span class="icon">&#128247;</span>
           <h3>Live Camera Scan</h3>
-          <p>Uses BarcodeDetector API (hardware-accelerated) with jsQR fallback. Real-time chunk tracking with FPS counter and progress grid.</p>
+          <p>Uses jsQR for live camera decoding, including raw binary QR payloads. Real-time chunk tracking with FPS counter and progress grid.</p>
         </div>
         <div class="feature-card">
           <span class="icon">&#9881;&#65039;</span>

From 435fd0535ba6152025715b67bcab0d02f121cf99 Mon Sep 17 00:00:00 2001
From: Odyhibit <josh.2990@gmail.com>
Date: Fri, 12 Jun 2026 00:13:34 -0500
Subject: [PATCH 5/9] set default version to 17 to match the default block size
 of 500 as close as we can (507) since we do not waste space with padding, but
 fill the entire QR code with data

---
 encoder/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/encoder/index.html b/encoder/index.html
index a65c385..0143a09 100644
--- a/encoder/index.html
+++ b/encoder/index.html
@@ -234,7 +234,7 @@ <h2>1. Select Files</h2>
       <div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
         <div style="display:flex;align-items:center;gap:8px;">
           <label style="font-size:0.9em;">QR version:</label>
-          <input type="range" id="qr-version-slider" min="1" max="40" step="1" value="12" style="width:120px;">
+          <input type="range" id="qr-version-slider" min="1" max="40" step="1" value="17" style="width:120px;">
           <span id="qr-version-val" style="font-size:0.85em;min-width:95px;">v12 · 65x65</span>
         </div>
         <div style="display:flex;align-items:center;gap:8px;">

From 5325d9fd21f0a146d70e1933cde8ade20e822d42 Mon Sep 17 00:00:00 2001
From: Odyhibit <josh.2990@gmail.com>
Date: Fri, 12 Jun 2026 01:35:04 -0500
Subject: [PATCH 6/9] Smaller, and seriously faster. removed the call to
 calcFixedSize every frame, since we now define the Version. btnGif handler is
 now async: with a live progress update decoder is now async with updates
 while decoding.

---
 decoder/index.html | 109 ++++++++++++++++++++++++++++++++++------
 encoder/index.html | 122 +++++++++++++++++++--------------------------
 2 files changed, 145 insertions(+), 86 deletions(-)

diff --git a/decoder/index.html b/decoder/index.html
index 5ef1fba..0752e9e 100644
--- a/decoder/index.html
+++ b/decoder/index.html
@@ -1188,10 +1188,76 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
         return { frames: frames, width: screenW, height: screenH };
       }
 
-      return { parseFrames: parseFrames };
+      function* parseFramesGen(gifData) {
+        var d = gifData;
+        var pos = 0;
+        if (d[0] !== 0x47 || d[1] !== 0x49 || d[2] !== 0x46) return;
+        pos = 6;
+        var screenW = d[pos] | (d[pos + 1] << 8); pos += 2;
+        var screenH = d[pos] | (d[pos + 1] << 8); pos += 2;
+        var packed = d[pos]; pos++;
+        pos += 2;
+        var gctFlag = (packed >> 7) & 1;
+        var gctSize = gctFlag ? (3 * (1 << ((packed & 7) + 1))) : 0;
+        var gct = null;
+        if (gctFlag) {
+          gct = new Uint8Array(gctSize);
+          for (var gi = 0; gi < gctSize; gi++) gct[gi] = d[pos + gi];
+          pos += gctSize;
+        }
+        yield { type: 'header', width: screenW, height: screenH };
+        var transIdx = -1;
+        while (pos < d.length - 1) {
+          var b = d[pos];
+          if (b === 0x3B) break;
+          if (b === 0x21) {
+            if (pos + 2 > d.length) break;
+            pos++; var label = d[pos]; pos++;
+            if (label === 0xF9) {
+              if (pos + 5 > d.length) break;
+              pos++; var gcPacked = d[pos]; pos++;
+              transIdx = (gcPacked & 1) ? d[pos + 2] : -1;
+              pos += 3; pos++;
+            } else {
+              while (pos < d.length) { var esz = d[pos]; pos++; if (esz === 0) break; if (pos + esz > d.length) break; pos += esz; }
+            }
+          } else if (b === 0x2C) {
+            if (pos + 9 > d.length) break;
+            pos++;
+            var imgL = d[pos] | (d[pos + 1] << 8); pos += 2;
+            var imgT = d[pos] | (d[pos + 1] << 8); pos += 2;
+            var imgW = d[pos] | (d[pos + 1] << 8); pos += 2;
+            var imgH = d[pos] | (d[pos + 1] << 8); pos += 2;
+            var imgPacked = d[pos]; pos++;
+            var lct = gct;
+            if ((imgPacked >> 7) & 1) {
+              var lctSize = 3 * (1 << ((imgPacked & 7) + 1));
+              if (pos + lctSize > d.length) break;
+              lct = new Uint8Array(d.buffer, d.byteOffset + pos, lctSize);
+              pos += lctSize;
+            }
+            if (pos >= d.length) break;
+            var minCodeSz = d[pos]; pos++;
+            var lzwBytes = [];
+            while (pos < d.length) { var fsz = d[pos]; pos++; if (fsz === 0) break; if (pos + fsz > d.length) break; for (var fj = 0; fj < fsz; fj++) lzwBytes.push(d[pos++]); }
+            var pixels = lzwDecode(lzwBytes, minCodeSz, imgW * imgH);
+            var rgba = new Uint8ClampedArray(imgW * imgH * 4);
+            var ct = lct || gct;
+            if (!ct) { yield { type: 'frame', rgba: rgba, width: imgW, height: imgH, left: imgL, top: imgT }; continue; }
+            for (var fp = 0; fp < pixels.length; fp++) {
+              var ci = pixels[fp]; var off = ci * 3;
+              if (off + 2 >= ct.length) continue;
+              rgba[fp * 4] = ct[off]; rgba[fp * 4 + 1] = ct[off + 1]; rgba[fp * 4 + 2] = ct[off + 2]; rgba[fp * 4 + 3] = (ci === transIdx) ? 0 : 255;
+            }
+            yield { type: 'frame', rgba: rgba, width: imgW, height: imgH, left: imgL, top: imgT };
+          } else { pos++; }
+        }
+      }
+
+      return { parseFrames: parseFrames, parseFramesGen: parseFramesGen };
     })();
 
-    function decodeGif() {
+    async function decodeGif() {
       cancelling = false;
       btnDecode.disabled = true;
       btnCancel.classList.remove('hidden');
@@ -1199,37 +1265,50 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       expectedTotal = null;
 
       var reader = new FileReader();
-      reader.onload = function() {
+      reader.onload = async function() {
         var data = new Uint8Array(reader.result);
-        var result = GifParser.parseFrames(data);
 
-        if (!result || result.frames.length === 0) {
+        decodeStatus.textContent = 'Parsing GIF...';
+        await new Promise(function(r) { setTimeout(r, 0); });
+
+        var gen = GifParser.parseFramesGen(data);
+        var first = gen.next();
+        if (first.done || !first.value || first.value.type !== 'header') {
           decodeStatus.textContent = 'Could not parse GIF frames.';
           btnDecode.disabled = false;
           btnCancel.classList.add('hidden');
           return;
         }
 
+        var screenW = first.value.width;
+        var screenH = first.value.height;
         var canvas = document.createElement('canvas');
-        canvas.width = result.width;
-        canvas.height = result.height;
+        canvas.width = screenW;
+        canvas.height = screenH;
         var ctx = canvas.getContext('2d', { willReadFrequently: true });
-        var prevData = ctx.createImageData(result.width, result.height);
+        var prevData = ctx.createImageData(screenW, screenH);
+        var frameCount = 0;
 
-        for (var f = 0; f < result.frames.length && !cancelling; f++) {
-          var frame = result.frames[f];
+        for (var step = gen.next(); !step.done && !cancelling; step = gen.next()) {
+          var frame = step.value;
+          frameCount++;
           ctx.putImageData(prevData, 0, 0);
           var frameImg = new ImageData(frame.rgba, frame.width, frame.height);
           ctx.putImageData(frameImg, frame.left, frame.top);
-          prevData = ctx.getImageData(0, 0, result.width, result.height);
-          var fullImg = ctx.getImageData(0, 0, result.width, result.height);
+          prevData = ctx.getImageData(0, 0, screenW, screenH);
+          var fullImg = ctx.getImageData(0, 0, screenW, screenH);
           var code = jsQR(fullImg.data, fullImg.width, fullImg.height, { inversionAttempts: 'attemptBoth' });
           if (code && (code.data || code.binaryData)) processQRData(code.data || '', code.binaryData);
-          var pct = ((f + 1) / result.frames.length * 100).toFixed(0);
-          decodeProgress.style.width = pct + '%';
+
           var found = Object.keys(decodedChunks).length;
           var total = expectedTotal || '?';
-          decodeStatus.textContent = 'Scanned frame ' + (f + 1) + '/' + result.frames.length + ', found ' + found + '/' + total;
+          if (expectedTotal) decodeProgress.style.width = (found / expectedTotal * 100).toFixed(0) + '%';
+          decodeStatus.textContent = 'Scanned frame ' + frameCount + ', found ' + found + '/' + total;
+
+          if (frameCount % 20 === 0) {
+            await new Promise(function(r) { setTimeout(r, 0); });
+          }
+
           if (expectedTotal && found >= expectedTotal) break;
         }
 
diff --git a/encoder/index.html b/encoder/index.html
index 0143a09..fb7f087 100644
--- a/encoder/index.html
+++ b/encoder/index.html
@@ -235,7 +235,7 @@ <h2>1. Select Files</h2>
         <div style="display:flex;align-items:center;gap:8px;">
           <label style="font-size:0.9em;">QR version:</label>
           <input type="range" id="qr-version-slider" min="1" max="40" step="1" value="17" style="width:120px;">
-          <span id="qr-version-val" style="font-size:0.85em;min-width:95px;">v12 · 65x65</span>
+          <span id="qr-version-val" style="font-size:0.85em;min-width:95px;">v17 · 85x85</span>
         </div>
         <div style="display:flex;align-items:center;gap:8px;">
           <label style="font-size:0.9em;">Error correction:</label>
@@ -284,7 +284,7 @@ <h3>Export</h3>
       <div class="export-options">
         <button id="btn-gif">Export GIF</button>
         <button id="btn-video">Export Video (MP4/WebM)</button>
-        <label>Loops: <input type="number" id="gif-loops" value="2" min="1" max="10"></label>
+        <label>Loops: <input type="number" id="gif-loops" value="1" min="1" max="10"></label>
         <label>Delay (ms): <input type="number" id="gif-delay" value="400" min="100" max="2000" step="50"></label>
       </div>
       <div class="export-status hidden" id="gif-status"></div>
@@ -342,7 +342,7 @@ <h3>Export</h3>
     var playing = false;
     var fps = 3;
     var loopCount = 1;
-    var intervalId = null;
+    var playTimer = null;
     var effectiveChunkSize = 500;
     var fixedSize = { w: 440, h: 440 };
     var rsParity = 0;
@@ -353,7 +353,7 @@ <h3>Export</h3>
     var ecLevelSelect = document.getElementById('ec-level');
     var densityInfo = document.getElementById('density-info');
     var encoderError = document.getElementById('encoder-error');
-    var userQrVersion = 12;
+    var userQrVersion = 17;
     var userEcLevel = 'M';
 
     var QR_BYTE_CAPACITY = {
@@ -513,9 +513,9 @@ <h3>Export</h3>
       return btoa(str);
     }
 
-    function drawQrToCanvas(cvs, text, fixedWidth, fixedHeight) {
+    function drawQrToCanvas(cvs, data, fixedWidth, fixedHeight) {
       var qr = qrcode(userQrVersion, userEcLevel);
-      qr.addData(text);
+      qr.addData(data);
       qr.make();
 
       var moduleCount = qr.getModuleCount();
@@ -545,43 +545,14 @@ <h3>Export</h3>
       }
     }
 
-    function getQrModuleCount(text) {
-      try {
-        var qr = qrcode(userQrVersion, userEcLevel);
-        qr.addData(text);
-        qr.make();
-        return qr.getModuleCount();
-      } catch (e) {
-        getQrModuleCount.lastError = e && e.message ? e.message : String(e);
-        return 0;
-      }
-    }
-
     function chunkPayload(chunk) {
       return chunk && chunk.bytes instanceof Uint8Array ? chunk.bytes : JSON.stringify(chunk);
     }
 
     function calcFixedSize(chunksArr) {
-      var maxMod = 0;
-      var failedIndex = -1;
-      for (var i = 0; i < chunksArr.length; i++) {
-        var m = getQrModuleCount(chunkPayload(chunksArr[i]));
-        if (!m) {
-          failedIndex = i;
-          break;
-        }
-        if (m > maxMod) maxMod = m;
-      }
-      if (failedIndex !== -1 || !maxMod) {
-        return {
-          w: 440,
-          h: 440,
-          error: 'QR frame ' + (failedIndex + 1) + ' is too large for the selected version and error correction level.',
-          detail: getQrModuleCount.lastError || ''
-        };
-      }
-      var cellSize = Math.max(4, Math.floor(400 / maxMod));
-      var size = cellSize * maxMod + 40;
+      var modules = userQrVersion * 4 + 17;
+      var cellSize = Math.max(4, Math.floor(400 / modules));
+      var size = cellSize * modules + 40;
       return { w: size, h: size };
     }
 
@@ -861,14 +832,14 @@ <h3>Export</h3>
       playing = true;
       btnPlay.disabled = true;
       btnPause.disabled = false;
-      intervalId = setInterval(nextFrame, 1000 / fps);
+      playTimer = setInterval(nextFrame, 1000 / fps);
     }
 
     function stopPlayback() {
       playing = false;
       btnPlay.disabled = false;
       btnPause.disabled = true;
-      if (intervalId) { clearInterval(intervalId); intervalId = null; }
+      if (playTimer) { clearInterval(playTimer); playTimer = null; }
     }
 
     btnPlay.addEventListener('click', startPlayback);
@@ -894,8 +865,8 @@ <h3>Export</h3>
       fps = parseInt(e.target.value);
       fpsVal.textContent = fps;
       if (playing) {
-        clearInterval(intervalId);
-        intervalId = setInterval(nextFrame, 1000 / fps);
+        clearInterval(playTimer);
+        playTimer = setInterval(nextFrame, 1000 / fps);
       }
     });
 
@@ -970,7 +941,7 @@ <h3>Export</h3>
         return output;
       }
 
-      function encode(frames, width, height, delayMs, loops) {
+      function* encode(frames, width, height, delayMs, loops) {
         var buf = [];
 
         writeString(buf, 'GIF89a');
@@ -1028,6 +999,8 @@ <h3>Export</h3>
             }
           }
           writeByte(buf, 0);
+
+          if ((f + 1) % 20 === 0) yield;
         }
 
         writeByte(buf, 0x3b);
@@ -1035,17 +1008,21 @@ <h3>Export</h3>
         return new Uint8Array(buf);
       }
 
-      return { encode: encode };
+      async function encodeAsync(frames, width, height, delayMs, loops) {
+        var gen = encode(frames, width, height, delayMs, loops);
+        var step;
+        while (!(step = gen.next()).done) {
+          await new Promise(function(r) { setTimeout(r, 0); });
+        }
+        return step.value;
+      }
+
+      return { encode: encodeAsync };
     })();
 
-    btnGif.addEventListener('click', function() {
+    btnGif.addEventListener('click', async function() {
       if (chunks.length === 0) return;
       fixedSize = calcFixedSize(chunks);
-      if (fixedSize.error) {
-        gifStatus.classList.remove('hidden');
-        gifStatus.textContent = fixedSize.error;
-        return;
-      }
 
       btnGif.disabled = true;
       gifStatus.classList.remove('hidden');
@@ -1060,6 +1037,7 @@ <h3>Export</h3>
       var tempCanvas = document.createElement('canvas');
       tempCanvas.width = gw;
       tempCanvas.height = gh;
+      var ctx = tempCanvas.getContext('2d', { willReadFrequently: true });
 
       var frames = [];
 
@@ -1073,38 +1051,40 @@ <h3>Export</h3>
             btnGif.disabled = false;
             return;
           }
-          var ctx = tempCanvas.getContext('2d', { willReadFrequently: true });
           var imgData = ctx.getImageData(0, 0, gw, gh);
           var pixels = new Uint8Array(gw * gh);
           for (var p = 0; p < pixels.length; p++) {
             pixels[p] = (imgData.data[p * 4] < 128) ? 1 : 0;
           }
           frames.push(pixels);
+
+          if (frames.length % 20 === 0) {
+            gifStatus.textContent = 'Captured ' + frames.length + '/' + totalFrames + ' frames...';
+            await new Promise(function(r) { setTimeout(r, 0); });
+          }
         }
-        gifStatus.textContent = 'Captured ' + frames.length + '/' + totalFrames + ' frames...';
       }
 
       gifStatus.textContent = 'Encoding GIF (' + frames.length + ' frames)...';
+      await new Promise(function(r) { setTimeout(r, 0); });
 
-      setTimeout(function() {
-        try {
-          var gifBytes = SimpleGifEncoder.encode(frames, gw, gh, delay, loops);
-          var blob = new Blob([gifBytes], { type: 'image/gif' });
-          var url = URL.createObjectURL(blob);
-          var a = document.createElement('a');
-          a.href = url;
-          var baseName = chunks[0].name || 'file';
-          a.download = baseName + '.qr.gif';
-          a.click();
-          URL.revokeObjectURL(url);
-
-          gifStatus.textContent = 'Done! GIF saved (' + formatSize(blob.size) + ', ' + frames.length + ' frames)';
-        } catch (err) {
-          gifStatus.textContent = 'Error: ' + err.message;
-          console.error(err);
-        }
-        btnGif.disabled = false;
-      }, 50);
+      try {
+        var gifBytes = await SimpleGifEncoder.encode(frames, gw, gh, delay, loops);
+        var blob = new Blob([gifBytes], { type: 'image/gif' });
+        var url = URL.createObjectURL(blob);
+        var a = document.createElement('a');
+        a.href = url;
+        var baseName = chunks[0].name || 'file';
+        a.download = baseName + '.qr.gif';
+        a.click();
+        URL.revokeObjectURL(url);
+
+        gifStatus.textContent = 'Done! GIF saved (' + formatSize(blob.size) + ', ' + frames.length + ' frames)';
+      } catch (err) {
+        gifStatus.textContent = 'Error: ' + err.message;
+        console.error(err);
+      }
+      btnGif.disabled = false;
     });
 
     btnVideo.addEventListener('click', function() {

From 392038a4748d5de91e1d6d5fc83486f77550d699 Mon Sep 17 00:00:00 2001
From: Odyhibit <josh.2990@gmail.com>
Date: Sun, 28 Jun 2026 21:46:06 -0500
Subject: [PATCH 7/9] use each color channel as a separate QR code.

---
 decoder/index.html | 166 +++++++++++++++++++++++++++++++++++++++------
 encoder/index.html | 109 +++++++++++++++++++++--------
 2 files changed, 225 insertions(+), 50 deletions(-)

diff --git a/decoder/index.html b/decoder/index.html
index 0752e9e..b7667fb 100644
--- a/decoder/index.html
+++ b/decoder/index.html
@@ -380,6 +380,80 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       btnCameraStart.disabled = true;
     }
 
+    function extractChannelImageData(imageData, ch) {
+      var d = imageData.data, n = imageData.width * imageData.height;
+      var out = new Uint8ClampedArray(n * 4);
+      for (var i = 0; i < n; i++) {
+        var v = d[i * 4 + ch];
+        out[i * 4] = v; out[i * 4 + 1] = v; out[i * 4 + 2] = v; out[i * 4 + 3] = 255;
+      }
+      return new ImageData(out, imageData.width, imageData.height);
+    }
+
+    function cropToLocation(imageData, location, pad) {
+      var corners = [location.topLeftCorner, location.topRightCorner,
+                     location.bottomRightCorner, location.bottomLeftCorner];
+      var xs = corners.map(function(c) { return c.x; });
+      var ys = corners.map(function(c) { return c.y; });
+      var x0 = Math.max(0, Math.floor(Math.min.apply(null, xs)) - pad);
+      var y0 = Math.max(0, Math.floor(Math.min.apply(null, ys)) - pad);
+      var x1 = Math.min(imageData.width,  Math.ceil(Math.max.apply(null, xs)) + pad);
+      var y1 = Math.min(imageData.height, Math.ceil(Math.max.apply(null, ys)) + pad);
+      var cw = x1 - x0, ch = y1 - y0;
+      var src = imageData.data, out = new Uint8ClampedArray(cw * ch * 4);
+      for (var row = 0; row < ch; row++) {
+        for (var col = 0; col < cw; col++) {
+          var si = ((y0 + row) * imageData.width + (x0 + col)) * 4;
+          var di = (row * cw + col) * 4;
+          out[di] = src[si]; out[di+1] = src[si+1]; out[di+2] = src[si+2]; out[di+3] = 255;
+        }
+      }
+      return new ImageData(out, cw, ch);
+    }
+
+    function otsuNormalize(imageData, channel) {
+      var d = imageData.data, n = imageData.width * imageData.height;
+      var hist = new Int32Array(256);
+      for (var i = 0; i < n; i++) hist[d[i * 4 + channel]]++;
+
+      // Otsu threshold — finds the split that maximises inter-class variance
+      var sumAll = 0;
+      for (var v = 0; v < 256; v++) sumAll += v * hist[v];
+      var sumB = 0, wB = 0, maxVar = 0, thresh = 128;
+      for (var t = 0; t < 256; t++) {
+        wB += hist[t]; if (wB === 0) continue;
+        var wF = n - wB; if (wF === 0) break;
+        sumB += t * hist[t];
+        var mB = sumB / wB, mF = (sumAll - sumB) / wF;
+        var bvar = wB * wF * (mB - mF) * (mB - mF);
+        if (bvar > maxVar) { maxVar = bvar; thresh = t; }
+      }
+
+      // Mean of each cluster = "most common dark" and "most common light"
+      var darkSum = 0, darkCount = 0, lightSum = 0, lightCount = 0;
+      for (var v = 0; v < 256; v++) {
+        if (v <= thresh) { darkSum += v * hist[v]; darkCount += hist[v]; }
+        else             { lightSum += v * hist[v]; lightCount += hist[v]; }
+      }
+      var darkCenter  = darkCount  ? darkSum  / darkCount  : 0;
+      var lightCenter = lightCount ? lightSum / lightCount : 255;
+      var range = lightCenter - darkCenter || 1;
+
+      // Stretch so dark cluster → 0, light cluster → 255
+      var out = new Uint8ClampedArray(n * 4);
+      for (var i = 0; i < n; i++) {
+        var v = Math.min(255, Math.max(0, Math.round((d[i * 4 + channel] - darkCenter) * 255 / range)));
+        out[i*4] = v; out[i*4+1] = v; out[i*4+2] = v; out[i*4+3] = 255;
+      }
+      return new ImageData(out, imageData.width, imageData.height);
+    }
+
+    function scanChannelWithHint(imageData, channel, location) {
+      var crop = cropToLocation(imageData, location, 20);
+      var normalized = otsuNormalize(crop, channel);
+      return jsQR(normalized.data, normalized.width, normalized.height, { inversionAttempts: 'attemptBoth' });
+    }
+
     // ===================== CAMERA DECODE =====================
 
     var cameraStream = null;
@@ -519,10 +593,24 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       camScanCanvas.height = Math.round(vh * scale);
       camScanCtx.drawImage(cameraVideo, 0, 0, camScanCanvas.width, camScanCanvas.height);
       var imageData = camScanCtx.getImageData(0, 0, camScanCanvas.width, camScanCanvas.height);
-      var code = jsQR(imageData.data, imageData.width, imageData.height, {
-        inversionAttempts: 'attemptBoth'
+
+      // Green first — most reliable, gives us the QR location for free
+      var greenImg = extractChannelImageData(imageData, 1);
+      var greenCode = jsQR(greenImg.data, greenImg.width, greenImg.height, { inversionAttempts: 'attemptBoth' });
+      var loc = null;
+      if (greenCode) {
+        if (greenCode.data || greenCode.binaryData) camProcessQR(greenCode.data || '', greenCode.binaryData);
+        loc = greenCode.location;
+      }
+
+      // Red and blue: crop to known QR area + Otsu-normalize, fall back to full-frame scan
+      [0, 2].forEach(function(ch) {
+        var code = loc ? scanChannelWithHint(imageData, ch, loc) : (function() {
+          var chData = extractChannelImageData(imageData, ch);
+          return jsQR(chData.data, chData.width, chData.height, { inversionAttempts: 'attemptBoth' });
+        })();
+        if (code && (code.data || code.binaryData)) camProcessQR(code.data || '', code.binaryData);
       });
-      if (code && (code.data || code.binaryData)) camProcessQR(code.data || '', code.binaryData);
     }
 
     function camAfterScan() {
@@ -623,13 +711,13 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     function camInitGrid(total) {
       cameraChunkGrid.innerHTML = '';
       camGridCells = [];
-      for (var i = 0; i < total; i++) {
+      var numImages = Math.ceil(total / 3);
+      for (var i = 0; i < numImages; i++) {
         var cell = document.createElement('div');
-        var isParity = camRsEnabled && i >= camRsK;
-        cell.className = 'chunk-cell' + (isParity ? ' parity' : '');
+        cell.className = 'chunk-cell';
         cell.textContent = i;
-        cell.dataset.index = i;
-        cell.title = isParity ? 'Parity chunk' : 'Data chunk';
+        cell.dataset.imageIndex = i;
+        cell.title = 'Image ' + i + ' (chunks ' + (i*3) + '-' + Math.min(i*3+2, total-1) + ')';
         cameraChunkGrid.appendChild(cell);
         camGridCells.push(cell);
       }
@@ -637,11 +725,17 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
 
     function camUpdateGrid() {
       var found = Object.keys(camDecodedChunks).length;
+      var total = camExpectedTotal;
       for (var i = 0; i < camGridCells.length; i++) {
-        camGridCells[i].className = 'chunk-cell' + (camDecodedChunks[i] !== undefined ? ' found' : '');
+        var base = i * 3;
+        var hasG = camDecodedChunks[base] !== undefined || (total !== null && base >= total);
+        var hasR = camDecodedChunks[base+1] !== undefined || (total !== null && base+1 >= total);
+        var hasB = camDecodedChunks[base+2] !== undefined || (total !== null && base+2 >= total);
+        camGridCells[i].style.background = 'rgb(' + (hasR?255:40) + ',' + (hasG?255:40) + ',' + (hasB?255:40) + ')';
+        camGridCells[i].style.color = (hasR && hasG && hasB) ? '#111' : '#cdd6f4';
       }
-      if (camExpectedTotal) {
-        cameraProgress.style.width = (found / camExpectedTotal * 100).toFixed(0) + '%';
+      if (total) {
+        cameraProgress.style.width = (found / total * 100).toFixed(0) + '%';
       }
     }
 
@@ -1297,8 +1391,20 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
           ctx.putImageData(frameImg, frame.left, frame.top);
           prevData = ctx.getImageData(0, 0, screenW, screenH);
           var fullImg = ctx.getImageData(0, 0, screenW, screenH);
-          var code = jsQR(fullImg.data, fullImg.width, fullImg.height, { inversionAttempts: 'attemptBoth' });
-          if (code && (code.data || code.binaryData)) processQRData(code.data || '', code.binaryData);
+          var gImg = extractChannelImageData(fullImg, 1);
+          var gCode = jsQR(gImg.data, gImg.width, gImg.height, { inversionAttempts: 'attemptBoth' });
+          var gifLoc = null;
+          if (gCode) {
+            if (gCode.data || gCode.binaryData) processQRData(gCode.data || '', gCode.binaryData);
+            gifLoc = gCode.location;
+          }
+          [0, 2].forEach(function(ch) {
+            var code = gifLoc ? scanChannelWithHint(fullImg, ch, gifLoc) : (function() {
+              var chImg = extractChannelImageData(fullImg, ch);
+              return jsQR(chImg.data, chImg.width, chImg.height, { inversionAttempts: 'attemptBoth' });
+            })();
+            if (code && (code.data || code.binaryData)) processQRData(code.data || '', code.binaryData);
+          });
 
           var found = Object.keys(decodedChunks).length;
           var total = expectedTotal || '?';
@@ -1352,9 +1458,21 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
         canvas.height = Math.min(vh, 960);
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
         var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        var code = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'attemptBoth' });
         framesScanned++;
-        if (code && (code.data || code.binaryData)) processQRData(code.data || '', code.binaryData);
+        var vGImg = extractChannelImageData(imageData, 1);
+        var vGCode = jsQR(vGImg.data, vGImg.width, vGImg.height, { inversionAttempts: 'attemptBoth' });
+        var vidLoc = null;
+        if (vGCode) {
+          if (vGCode.data || vGCode.binaryData) processQRData(vGCode.data || '', vGCode.binaryData);
+          vidLoc = vGCode.location;
+        }
+        [0, 2].forEach(function(ch) {
+          var code = vidLoc ? scanChannelWithHint(imageData, ch, vidLoc) : (function() {
+            var chImg = extractChannelImageData(imageData, ch);
+            return jsQR(chImg.data, chImg.width, chImg.height, { inversionAttempts: 'attemptBoth' });
+          })();
+          if (code && (code.data || code.binaryData)) processQRData(code.data || '', code.binaryData);
+        });
         var pct = Math.min((time / duration) * 100, 99);
         decodeProgress.style.width = pct + '%';
         var found = Object.keys(decodedChunks).length;
@@ -1424,13 +1542,13 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     function initChunkGrid(total) {
       chunkGrid.innerHTML = '';
       fileGridCells = [];
-      for (var i = 0; i < total; i++) {
+      var numImages = Math.ceil(total / 3);
+      for (var i = 0; i < numImages; i++) {
         var cell = document.createElement('div');
-        var isParity = rsEnabled && i >= rsK;
-        cell.className = 'chunk-cell' + (isParity ? ' parity' : '');
+        cell.className = 'chunk-cell';
         cell.textContent = i;
-        cell.dataset.index = i;
-        cell.title = isParity ? 'Parity chunk' : 'Data chunk';
+        cell.dataset.imageIndex = i;
+        cell.title = 'Image ' + i + ' (chunks ' + (i*3) + '-' + Math.min(i*3+2, total-1) + ')';
         chunkGrid.appendChild(cell);
         fileGridCells.push(cell);
       }
@@ -1439,8 +1557,14 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     function updateChunkGrid() {
       var found = Object.keys(decodedChunks).length;
       chunkInfo.textContent = found + ' / ' + expectedTotal;
+      var total = expectedTotal;
       for (var i = 0; i < fileGridCells.length; i++) {
-        fileGridCells[i].className = 'chunk-cell' + (decodedChunks[i] !== undefined ? ' found' : ' missing');
+        var base = i * 3;
+        var hasG = decodedChunks[base] !== undefined || (total !== null && base >= total);
+        var hasR = decodedChunks[base+1] !== undefined || (total !== null && base+1 >= total);
+        var hasB = decodedChunks[base+2] !== undefined || (total !== null && base+2 >= total);
+        fileGridCells[i].style.background = 'rgb(' + (hasR?255:40) + ',' + (hasG?255:40) + ',' + (hasB?255:40) + ')';
+        fileGridCells[i].style.color = (hasR && hasG && hasB) ? '#111' : '#cdd6f4';
       }
     }
 
diff --git a/encoder/index.html b/encoder/index.html
index fb7f087..be7780c 100644
--- a/encoder/index.html
+++ b/encoder/index.html
@@ -549,6 +549,38 @@ <h3>Export</h3>
       return chunk && chunk.bytes instanceof Uint8Array ? chunk.bytes : JSON.stringify(chunk);
     }
 
+    function drawRgbQrToCanvas(cvs, dataG, dataR, dataB, fw, fh) {
+      var qrG = qrcode(userQrVersion, userEcLevel);
+      qrG.addData(dataG); qrG.make();
+      var qrR = null, qrB = null;
+      if (dataR) { qrR = qrcode(userQrVersion, userEcLevel); qrR.addData(dataR); qrR.make(); }
+      if (dataB) { qrB = qrcode(userQrVersion, userEcLevel); qrB.addData(dataB); qrB.make(); }
+
+      var moduleCount = qrG.getModuleCount();
+      var margin = 20;
+      var availSize = Math.min(fw, fh) - margin * 2;
+      var cellSize = Math.max(2, Math.floor(availSize / moduleCount));
+      var qrSize = cellSize * moduleCount;
+      var offsetX = Math.floor((fw - qrSize) / 2);
+      var offsetY = Math.floor((fh - qrSize) / 2);
+
+      cvs.width = fw; cvs.height = fh;
+      var ctx = cvs.getContext('2d');
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, fw, fh);
+
+      for (var row = 0; row < moduleCount; row++) {
+        for (var col = 0; col < moduleCount; col++) {
+          var r = (qrR && qrR.isDark(row, col)) ? 0 : 255;
+          var g = qrG.isDark(row, col) ? 0 : 255;
+          var b = (qrB && qrB.isDark(row, col)) ? 0 : 255;
+          if (r === 255 && g === 255 && b === 255) continue;
+          ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
+          ctx.fillRect(offsetX + col * cellSize, offsetY + row * cellSize, cellSize, cellSize);
+        }
+      }
+    }
+
     function calcFixedSize(chunksArr) {
       var modules = userQrVersion * 4 + 17;
       var cellSize = Math.max(4, Math.floor(400 / modules));
@@ -807,19 +839,27 @@ <h3>Export</h3>
       startPlayback();
     }
 
-    function renderFrame(index) {
-      var chunk = chunks[index];
-      var payload = chunkPayload(chunk);
-      renderQrToCanvas(canvas, payload);
+    function getNumImages() { return Math.ceil(chunks.length / 3); }
 
-      var pct = ((index + 1) / chunks.length * 100).toFixed(0);
-      progressFill.style.width = pct + '%';
-      frameInfo.textContent = 'Frame ' + (index + 1) + ' / ' + chunks.length;
+    function renderFrame(imageIdx) {
+      var base = imageIdx * 3;
+      var dataG = chunkPayload(chunks[base]);
+      var dataR = chunks[base + 1] ? chunkPayload(chunks[base + 1]) : null;
+      var dataB = chunks[base + 2] ? chunkPayload(chunks[base + 2]) : null;
+      try {
+        drawRgbQrToCanvas(canvas, dataG, dataR, dataB, fixedSize.w, fixedSize.h);
+      } catch(err) {
+        renderCanvasMessage(canvas, 'Error: ' + (err.message || err));
+        return;
+      }
+      var numImages = getNumImages();
+      progressFill.style.width = ((imageIdx + 1) / numImages * 100).toFixed(0) + '%';
+      frameInfo.textContent = 'Image ' + (imageIdx + 1) + ' / ' + numImages + ' · ' + chunks.length + ' chunks';
     }
 
     function nextFrame() {
       currentFrame++;
-      if (currentFrame >= chunks.length) {
+      if (currentFrame >= getNumImages()) {
         currentFrame = 0;
         loopCount++;
         loopBadge.textContent = 'Loop ' + loopCount;
@@ -846,12 +886,12 @@ <h3>Export</h3>
     btnPause.addEventListener('click', stopPlayback);
     btnNext.addEventListener('click', function() {
       stopPlayback();
-      currentFrame = (currentFrame + 1) % chunks.length;
+      currentFrame = (currentFrame + 1) % getNumImages();
       renderFrame(currentFrame);
     });
     btnPrev.addEventListener('click', function() {
       stopPlayback();
-      currentFrame = (currentFrame - 1 + chunks.length) % chunks.length;
+      currentFrame = (currentFrame - 1 + getNumImages()) % getNumImages();
       renderFrame(currentFrame);
     });
     btnReset.addEventListener('click', function() {
@@ -947,16 +987,15 @@ <h3>Export</h3>
         writeString(buf, 'GIF89a');
         writeShort(buf, width);
         writeShort(buf, height);
-        writeByte(buf, 0x80);
-        writeByte(buf, 0);
+        writeByte(buf, 0x82);
+        writeByte(buf, 7);
         writeByte(buf, 0);
 
-        writeByte(buf, 0xff);
-        writeByte(buf, 0xff);
-        writeByte(buf, 0xff);
-        writeByte(buf, 0x00);
-        writeByte(buf, 0x00);
-        writeByte(buf, 0x00);
+        var gifPalette = [
+          0,0,0,       255,0,0,   0,255,0,   255,255,0,
+          0,0,255,     255,0,255, 0,255,255, 255,255,255
+        ];
+        for (var pc = 0; pc < gifPalette.length; pc++) writeByte(buf, gifPalette[pc]);
 
         writeByte(buf, 0x21);
         writeByte(buf, 0xff);
@@ -967,7 +1006,7 @@ <h3>Export</h3>
         writeShort(buf, loops);
         writeByte(buf, 0);
 
-        var minCodeSize = 2;
+        var minCodeSize = 3;
 
         for (var f = 0; f < frames.length; f++) {
           var framePixels = frames[f];
@@ -1030,7 +1069,8 @@ <h3>Export</h3>
 
       var loops = parseInt(gifLoopsInput.value) || 2;
       var delay = parseInt(gifDelayInput.value) || 400;
-      var totalFrames = chunks.length * loops;
+      var numImages = getNumImages();
+      var totalFrames = numImages * loops;
       var gw = fixedSize.w;
       var gh = fixedSize.h;
 
@@ -1042,10 +1082,13 @@ <h3>Export</h3>
       var frames = [];
 
       for (var loop = 0; loop < loops; loop++) {
-        for (var i = 0; i < chunks.length; i++) {
-          var payload = chunkPayload(chunks[i]);
+        for (var i = 0; i < numImages; i++) {
+          var base = i * 3;
+          var dataG = chunkPayload(chunks[base]);
+          var dataR = chunks[base + 1] ? chunkPayload(chunks[base + 1]) : null;
+          var dataB = chunks[base + 2] ? chunkPayload(chunks[base + 2]) : null;
           try {
-            drawQrToCanvas(tempCanvas, payload, gw, gh);
+            drawRgbQrToCanvas(tempCanvas, dataG, dataR, dataB, gw, gh);
           } catch (err) {
             gifStatus.textContent = 'Error rendering frame ' + (i + 1) + ': ' + (err.message || err);
             btnGif.disabled = false;
@@ -1054,7 +1097,10 @@ <h3>Export</h3>
           var imgData = ctx.getImageData(0, 0, gw, gh);
           var pixels = new Uint8Array(gw * gh);
           for (var p = 0; p < pixels.length; p++) {
-            pixels[p] = (imgData.data[p * 4] < 128) ? 1 : 0;
+            var ri = imgData.data[p * 4] >= 128 ? 1 : 0;
+            var gi = imgData.data[p * 4 + 1] >= 128 ? 1 : 0;
+            var bi = imgData.data[p * 4 + 2] >= 128 ? 1 : 0;
+            pixels[p] = ri | (gi << 1) | (bi << 2);
           }
           frames.push(pixels);
 
@@ -1125,7 +1171,8 @@ <h3>Export</h3>
       var delay = parseInt(gifDelayInput.value) || 400;
       var gw = fixedSize.w;
       var gh = fixedSize.h;
-      var totalFrames = chunks.length * loops;
+      var numImages = getNumImages();
+      var totalFrames = numImages * loops;
 
       var recCanvas = document.createElement('canvas');
       recCanvas.width = gw;
@@ -1160,8 +1207,8 @@ <h3>Export</h3>
 
       var frameQueue = [];
       for (var loop = 0; loop < loops; loop++) {
-        for (var i = 0; i < chunks.length; i++) {
-          frameQueue.push(chunks[i]);
+        for (var i = 0; i < numImages; i++) {
+          frameQueue.push(i);
         }
       }
 
@@ -1172,8 +1219,12 @@ <h3>Export</h3>
           return;
         }
 
-        var payload = chunkPayload(frameQueue[qi]);
-        drawQrToCanvas(recCanvas, payload, gw, gh);
+        var imgIdx = frameQueue[qi];
+        var base = imgIdx * 3;
+        var dataG = chunkPayload(chunks[base]);
+        var dataR = chunks[base + 1] ? chunkPayload(chunks[base + 1]) : null;
+        var dataB = chunks[base + 2] ? chunkPayload(chunks[base + 2]) : null;
+        drawRgbQrToCanvas(recCanvas, dataG, dataR, dataB, gw, gh);
 
         if (track.requestFrame) {
           track.requestFrame();

From 45b5b3c9353c574f1299685f8867181875dd6d92 Mon Sep 17 00:00:00 2001
From: Odyhibit <josh.2990@gmail.com>
Date: Sun, 28 Jun 2026 22:58:59 -0500
Subject: [PATCH 8/9] Updated documentation for the new color mode.

---
 README.md          | 43 +++++++++++++++++++++++++++++++++++++++----
 encoder/index.html | 10 +++++++++-
 2 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 6234c80..7267c47 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,8 @@ Transfer files via animated QR codes. No network, no Bluetooth, no USB — just
 2. **Transfer** — Point a phone camera at the screen, or export a GIF/video and send it any way you like.
 3. **Decode** — Open the decoder on the receiving device. Scan with the camera or upload the GIF/video. The file is reassembled.
 
+Each image frame carries **three independent QR codes** — one per RGB colour channel — tripling data density with no increase in image size.
+
 ## Quick start
 
 ```bash
@@ -25,19 +27,50 @@ Open `encoder/index.html` or `decoder/index.html` directly in a browser. Camera
 ## Features
 
 **Encoding:**
+- RGB tri-channel encoding: three QR codes per image frame (~3× data density)
 - Multi-file and folder support (auto-zipped)
 - Gzip compression
 - GIF, MP4, and WebM export
 - Reed-Solomon erasure coding (+2/+5/+10 parity chunks)
-- Adjustable QR version and QR error correction level (L/M/Q/H)
+- Adjustable QR version and error correction level (L/M/Q/H)
 
 **Decoding:**
 - Live camera scan with jsQR, including raw binary QR payloads
 - GIF and video upload decoding
+- Per-channel adaptive thresholding (Otsu) for robust red/blue recovery
 - Progressive preview as chunks arrive
 - RS recovery of missing chunks
 - ZIP archive browsing
 
+## RGB channel encoding
+
+Each image frame is a single full-colour image that encodes three logical QR codes simultaneously — one in the red channel, one in green, one in blue. Every pixel is one of eight pure colours (the corners of the RGB cube: black, white, red, green, blue, cyan, magenta, yellow).
+
+```
+Pixel colour = (R_light, G_light, B_light) where each channel is 0 or 255.
+```
+
+**Green** carries the primary (authoritative) channel. Green dominates camera sensor sensitivity (Bayer arrays have 2× green photosites), so it is the most faithfully captured channel and the location for the frame metadata. **Red** and **blue** carry additional data.
+
+Logical chunk numbering maps to image frames as:
+
+```
+Frame 0: chunks 0 (green), 1 (red), 2 (blue)
+Frame 1: chunks 3 (green), 4 (red), 5 (blue)
+…
+```
+
+The decoder grid shows one cell per image. Each cell's colour reflects which channels have been successfully decoded, using additive mixing — the first one is red, green, or blue. When there are two colors complete it will be yellow, cyan, or magenta, all three is white.
+
+## Decoding: adaptive channel scanning
+
+For each image frame the decoder:
+
+1. Extracts the **green channel** as grayscale and runs jsQR. On success this also returns the four corner coordinates of the QR code.
+2. Uses those coordinates to **crop** the red and blue channel images down to just the QR region before scanning — faster and immune to false positives outside the QR area.
+3. Applies **Otsu's thresholding** to the cropped region for red and blue: finds the histogram threshold that maximally separates the dark and light pixel clusters, computes the mean of each cluster, and stretches that range to fill 0–255. This automatically compensates for the lower camera sensitivity in the red and blue channels (the same correction you would do manually with brightness/contrast in an image editor).
+4. Falls back to a full-frame scan for red and blue if the green channel fails.
+
 ## Project structure
 
 ```
@@ -46,7 +79,7 @@ encoder/index.html      Encoder (self-contained)
 decoder/index.html      Decoder (self-contained)
 shared/reedsolomon.js   Reed-Solomon library (source)
 server.js               HTTPS dev server
-test/test.js            Test suite (43 tests)
+test/test.js            Test suite
 ```
 
 Encoder and decoder pages bundle all dependencies locally — no CDN, no build step. They work from `file://`, GitHub Pages, or the dev server.
@@ -80,18 +113,20 @@ payload bytes
 
 Other data frames contain only binary payload bytes. Parity frames contain Reed-Solomon parity bytes. Reed-Solomon protects data frame bodies, including frame 0 metadata, so a missing metadata frame can be recovered from parity.
 
+With RGB encoding the total logical frame count is approximately 3× what it would be for a single-channel encode of the same file. The frame index field in each QR payload is the absolute logical frame number, so the protocol layer is unaware of the channel grouping — the decoder simply collects frames by index as they arrive from whichever channel decoded them.
+
 ## Testing
 
 ```bash
 npm test
 ```
 
-45 tests covering GF(256) arithmetic, Reed-Solomon encode/decode, recovery scenarios, v3 binary framing, path traversal protection, GIF parser bounds checking, and the full encode→RS→recover→decompress pipeline.
+Tests covering GF(256) arithmetic, Reed-Solomon encode/decode, recovery scenarios, v3 binary framing, path traversal protection, GIF parser bounds checking, and the full encode→RS→recover→decompress pipeline.
 
 ## Camera tips
 
 - **Fast scanning**: lower QR version + EC level L = larger cells, easier to scan
-- **Fewer frames**: higher QR version + EC level M = fewer QR codes in the sequence
+- **Fewer frames**: higher QR version + EC level M = fewer images in the sequence
 - **Missed chunks**: add +2 or +5 RS parity to recover from dropped frames
 - **Encoder FPS**: start at 3–6 FPS and adjust
 
diff --git a/encoder/index.html b/encoder/index.html
index be7780c..b6b3a3d 100644
--- a/encoder/index.html
+++ b/encoder/index.html
@@ -192,7 +192,7 @@
 </head>
 <body>
   <h1>Code to QR — Encoder</h1>
-  <p class="subtitle">Convert any file into animated QR codes — now with compression and GIF export</p>
+  <p class="subtitle">Convert any file into animated QR codes — RGB tri-channel encoding, compression, and GIF export</p>
 
   <div class="card">
     <h2>1. Select Files</h2>
@@ -549,6 +549,11 @@ <h3>Export</h3>
       return chunk && chunk.bytes instanceof Uint8Array ? chunk.bytes : JSON.stringify(chunk);
     }
 
+    // Overlays three independent QR codes into a single RGB image.
+    // Each channel is driven by its own QR's dark/light state, so every pixel
+    // is one of 8 pure colours (the corners of the RGB cube). A null channel
+    // contributes all-light (255) to that component, appearing as the
+    // complement of whichever other channels are active.
     function drawRgbQrToCanvas(cvs, dataG, dataR, dataB, fw, fh) {
       var qrG = qrcode(userQrVersion, userEcLevel);
       qrG.addData(dataG); qrG.make();
@@ -987,10 +992,13 @@ <h3>Export</h3>
         writeString(buf, 'GIF89a');
         writeShort(buf, width);
         writeShort(buf, height);
+        // 0x82: GCT present, size field = 2 → 2^(2+1) = 8 colours. Background = 7 (white).
         writeByte(buf, 0x82);
         writeByte(buf, 7);
         writeByte(buf, 0);
 
+        // Palette index = R_light | (G_light << 1) | (B_light << 2)
+        // giving: 0=black 1=red 2=green 3=yellow 4=blue 5=magenta 6=cyan 7=white
         var gifPalette = [
           0,0,0,       255,0,0,   0,255,0,   255,255,0,
           0,0,255,     255,0,255, 0,255,255, 255,255,255

From b23a86e42171075758a4c66d6d8e656df8607270 Mon Sep 17 00:00:00 2001
From: Odyhibit <josh.2990@gmail.com>
Date: Sun, 28 Jun 2026 23:17:14 -0500
Subject: [PATCH 9/9] Change default QR version to 20 (97x97)  to match
 original repo

---
 encoder/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/encoder/index.html b/encoder/index.html
index b6b3a3d..d897df1 100644
--- a/encoder/index.html
+++ b/encoder/index.html
@@ -353,7 +353,7 @@ <h3>Export</h3>
     var ecLevelSelect = document.getElementById('ec-level');
     var densityInfo = document.getElementById('density-info');
     var encoderError = document.getElementById('encoder-error');
-    var userQrVersion = 17;
+    var userQrVersion = 20;
     var userEcLevel = 'M';
 
     var QR_BYTE_CAPACITY = {