Emoji tab: add Token Bomb Generator (nested emoji builder with zero-width options, VS toggles, randomization)

index.html

@@ -116,6 +116,65 @@
                         </div>
                     </div>
 
+                    <!-- Token Bomb Generator -->
+                    <div class="token-bomb-section">
+                        <div class="section-header">
+                            <h3>
+                                <i class="fas fa-bomb"></i> Token Bomb Generator
+                                <small>Create dense token sequences using nested emojis</small>
+                            </h3>
+                        </div>
+                        <div class="token-bomb-controls options-grid">
+                            <label>
+                                Depth
+                                <input type="number" v-model.number="tbDepth" min="1" max="8" />
+                            </label>
+                            <label>
+                                Breadth per level
+                                <input type="number" v-model.number="tbBreadth" min="1" max="12" />
+                            </label>
+                            <label>
+                                Repeats
+                                <input type="number" v-model.number="tbRepeats" min="1" max="100" />
+                            </label>
+                            <label>
+                                Separator
+                                <select v-model="tbSeparator">
+                                    <option value="zwj">Zero-Width Joiner (\u200D)</option>
+                                    <option value="zwnj">Zero-Width Non-Joiner (\u200C)</option>
+                                    <option value="zwsp">Zero-Width Space (\u200B)</option>
+                                    <option value="none">None</option>
+                                </select>
+                            </label>
+                            <label>
+                                Include Variation Selectors
+                                <input type="checkbox" v-model="tbIncludeVS" />
+                            </label>
+                            <label>
+                                Include Invisible Noise
+                                <input type="checkbox" v-model="tbIncludeNoise" />
+                            </label>
+                            <label>
+                                Randomize Emojis
+                                <input type="checkbox" v-model="tbRandomizeEmojis" />
+                            </label>
+                        </div>
+                        <div class="token-bomb-actions">
+                            <button class="transform-button" @click="generateTokenBomb">
+                                <i class="fas fa-hammer"></i> Generate
+                            </button>
+                            <button class="copy-button" v-if="tokenBombOutput" @click="copyToClipboard(tokenBombOutput)">
+                                <i class="fas fa-copy"></i> Copy
+                            </button>
+                            <small v-if="tokenBombOutput">
+                                Length: {{ tokenBombOutput.length.toLocaleString() }} chars
+                            </small>
+                        </div>
+                        <div class="output-container" v-if="tokenBombOutput">
+                            <textarea readonly v-model="tokenBombOutput" aria-label="Token bomb output"></textarea>
+                        </div>
+                    </div>
+
                     <div class="output-section" v-if="encodedMessage">
                         <div class="output-heading">
                             <h4>

js/app.js

@@ -52,6 +52,15 @@ window.app = new Vue({
         // Emoji Library
         filteredEmojis: [...window.emojiLibrary.EMOJI_LIST],
         selectedEmoji: null,
+        // Token Bomb Generator
+        tbDepth: 3,
+        tbBreadth: 4,
+        tbRepeats: 5,
+        tbSeparator: 'zwj',
+        tbIncludeVS: true,
+        tbIncludeNoise: true,
+        tbRandomizeEmojis: true,
+        tokenBombOutput: '',
         
         // History of copied content
         copyHistory: [],
@@ -1665,6 +1674,74 @@ window.app = new Vue({
                 });
             });
         }
+        ,
+        // Token Bomb Generator Logic
+        generateTokenBomb() {
+            const depth = Math.max(1, Math.min(8, Number(this.tbDepth) || 1));
+            const breadth = Math.max(1, Math.min(12, Number(this.tbBreadth) || 1));
+            const repeats = Math.max(1, Math.min(100, Number(this.tbRepeats) || 1));
+            const sep = this.tbSeparator === 'zwj' ? '\u200D' : this.tbSeparator === 'zwnj' ? '\u200C' : this.tbSeparator === 'zwsp' ? '\u200B' : '';
+            const includeVS = !!this.tbIncludeVS;
+            const includeNoise = !!this.tbIncludeNoise;
+            const randomize = !!this.tbRandomizeEmojis;
+
+            const emojiList = this.filteredEmojis && this.filteredEmojis.length ? this.filteredEmojis : window.emojiLibrary.EMOJI_LIST;
+
+            function pickEmojis(count) {
+                const out = [];
+                for (let i = 0; i < count; i++) {
+                    const idx = randomize ? Math.floor(Math.random() * emojiList.length) : (i % emojiList.length);
+                    out.push(String(emojiList[idx]));
+                }
+                return out;
+            }
+
+            function addVS(str) {
+                if (!includeVS) return str;
+                // Alternate VS16/VS15 to maximize tokenization churn
+                const vs16 = '\uFE0F';
+                const vs15 = '\uFE0E';
+                let out = '';
+                for (let i = 0; i < str.length; i++) {
+                    const ch = str[i];
+                    out += ch + (i % 2 === 0 ? vs16 : vs15);
+                }
+                return out;
+            }
+
+            function noise() {
+                if (!includeNoise) return '';
+                const parts = ['\u200B','\u200C','\u200D','\u2060','\u2062','\u2063'];
+                let s = '';
+                const n = 1 + Math.floor(Math.random() * 3);
+                for (let i = 0; i < n; i++) s += parts[Math.floor(Math.random() * parts.length)];
+                return s;
+            }
+
+            function buildLevel(level) {
+                if (level === 0) {
+                    const base = pickEmojis(breadth).join('');
+                    return addVS(base);
+                }
+                const items = [];
+                for (let i = 0; i < breadth; i++) {
+                    const inner = buildLevel(level - 1);
+                    items.push(inner + noise());
+                }
+                return items.join(sep);
+            }
+
+            let block = buildLevel(depth - 1);
+            // Repeat the block to increase token length
+            const blocks = [];
+            for (let i = 0; i < repeats; i++) {
+                blocks.push(block + noise());
+            }
+            this.tokenBombOutput = blocks.join(sep);
+
+            // Provide a quick visual confirmation
+            this.showNotification('<i class="fas fa-bomb"></i> Token bomb generated', 'success');
+        }
     },
     // Initialize theme and components
     mounted() {