Add Letter Swap Lab tool and Export TXT to all tools

- New letter-replacement-lab.html: select source and target letters via A-Z button grids, apply case-insensitive (preserves case) or case-sensitive replacement, with stats and export
- Added Export TXT button to every tool's output section (eraser, lipogram, long-tail, alphabetizer, text-reversal, line-break, markov-mashup, grid-it, and letter-swap)
- Updated nav bar across all HTML files to include Letter Swap link
- Added Letter Swap Lab card to index.html homepage grid

https://claude.ai/code/session_01TqQ89AjtEg7deff3NvazJS

Author: claude

about.html

@@ -16,6 +16,7 @@
         <a href="lipogram-lab.html">Lipogram Lab</a>
         <a href="long-tail-lab.html">Long Tail Lab</a>
         <a href="grid-it-lab.html">Grid-It Lab</a>
+        <a href="letter-replacement-lab.html">Letter Swap</a>
         <a href="about.html">About</a>
     </nav>
 

alphabetizer-lab.html

@@ -16,6 +16,7 @@
         <a href="lipogram-lab.html">Lipogram Lab</a>
         <a href="long-tail-lab.html">Long Tail Lab</a>
         <a href="grid-it-lab.html">Grid-It Lab</a>
+        <a href="letter-replacement-lab.html">Letter Swap</a>
         <a href="about.html">About</a>
     </nav>
 
@@ -82,6 +83,7 @@ <h2>Upload Text File</h2>
             </div>
             <div class="word-display" id="wordDisplay"></div>
             <div class="stats" id="statsDisplay"></div>
+            <button class="apply-btn" id="exportBtn" style="margin-top: 15px;">Export TXT</button>
         </div>
     </div>
 
@@ -227,6 +229,26 @@ <h2>Upload Text File</h2>
         wordDisplay.style.fontSize = e.target.value + 'px';
     });
 }
+
+document.getElementById('exportBtn').addEventListener('click', function() {
+    const items = wordDisplay.querySelectorAll('.word-item');
+    const words = Array.from(items).map(function(item) {
+        const freqSpan = item.querySelector('.frequency');
+        if (freqSpan) {
+            return item.textContent.replace(freqSpan.textContent, '').trim();
+        }
+        return item.textContent.trim();
+    });
+    const text = words.join('\n');
+    if (!text) return;
+    const blob = new Blob([text], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'alphabetizer-lab-output.txt';
+    a.click();
+    URL.revokeObjectURL(url);
+});
     </script>
 </body>
 </html>

eraser-lab.html

@@ -16,6 +16,7 @@
         <a href="lipogram-lab.html">Lipogram Lab</a>
         <a href="long-tail-lab.html">Long Tail Lab</a>
         <a href="grid-it-lab.html">Grid-It Lab</a>
+        <a href="letter-replacement-lab.html">Letter Swap</a>
         <a href="about.html">About</a>
     </nav>
 
@@ -115,6 +116,7 @@ <h3>Display Options</h3>
                 <span>Remaining: <span id="remainingCount">0</span> elements</span>
                 <span>Erased: <span id="erasedCount">0</span> elements</span>
             </div>
+            <button class="apply-btn" id="exportBtn" style="display: none; margin-top: 15px;">Export TXT</button>
         </div>
 
     <script>
@@ -266,6 +268,19 @@ <h3>Display Options</h3>
             updateStats(elements, processedElements);
         }
 
+        const exportBtn = document.getElementById('exportBtn');
+        exportBtn.addEventListener('click', function() {
+            const text = outputText.textContent;
+            if (!text) return;
+            const blob = new Blob([text], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'eraser-lab-output.txt';
+            a.click();
+            URL.revokeObjectURL(url);
+        });
+
         function updateStats(originalElements, processedElements) {
             const originalCount = originalElements.length;
             const erasedCount = processedElements.filter((element, index) => {
@@ -282,6 +297,7 @@ <h3>Display Options</h3>
             document.getElementById('erasedCount').textContent = erasedCount;
 
             stats.style.display = 'flex';
+            exportBtn.style.display = 'block';
         }
     </script>
 </body>

grid-it-lab.html

@@ -75,6 +75,7 @@
         <a href="lipogram-lab.html">Lipogram Lab</a>
         <a href="long-tail-lab.html">Long Tail Lab</a>
         <a href="grid-it-lab.html">Grid-It Lab</a>
+        <a href="letter-replacement-lab.html">Letter Swap</a>
         <a href="about.html">About</a>
     </nav>
 
@@ -151,6 +152,7 @@ <h3>Reading Direction</h3>
             </div>
             <div id="gridContainer"></div>
             <div class="stats" id="statsDisplay"></div>
+            <button class="apply-btn" id="exportBtn" style="margin-top: 15px;">Export TXT</button>
         </div>
     </div>
 
@@ -338,6 +340,24 @@ <h3>Reading Direction</h3>
             });
         }
 
+        document.getElementById('exportBtn').addEventListener('click', function() {
+            const table = gridContainer.querySelector('table');
+            if (!table) return;
+            const rows = Array.from(table.querySelectorAll('tr')).map(function(tr) {
+                return Array.from(tr.querySelectorAll('td')).map(function(td) {
+                    return td.textContent;
+                }).join('\t');
+            });
+            const text = rows.join('\n');
+            const blob = new Blob([text], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'grid-it-lab-output.txt';
+            a.click();
+            URL.revokeObjectURL(url);
+        });
+
     </script>
 </body>
 </html>

index.html

@@ -16,6 +16,7 @@
         <a href="lipogram-lab.html">Lipogram Lab</a>
         <a href="long-tail-lab.html">Long Tail Lab</a>
         <a href="grid-it-lab.html">Grid-It Lab</a>
+        <a href="letter-replacement-lab.html">Letter Swap</a>
         <a href="about.html">About</a>
     </nav>
 
@@ -57,6 +58,10 @@ <h2>Long Tail Lab</h2>
                 <h2>Grid-It Lab</h2>
                 <p>Organize text into a customizable grid with adjustable rows and columns.</p>
             </a>
+            <a href="letter-replacement-lab.html" class="tool-card">
+                <h2>Letter Swap Lab</h2>
+                <p>Replace every occurrence of one letter with another throughout your text.</p>
+            </a>
         </div>
     <script>
         // JavaScript for this specific tool