UI: Add global Advanced Unicode panel + header toggle; remove duplicate from decoder; wire Apply to steganography options; minor UI polish

js/app.js

@@ -14,11 +14,11 @@ window.app = new Vue({
         activeTransform: null,
         // Transform categories for styling
         transformCategories: {
-            encoding: ['Base64', 'Base32', 'Binary', 'Hexadecimal', 'ASCII85', 'URL Encode', 'HTML Entities'],
-            cipher: ['Caesar Cipher', 'ROT13', 'ROT47', 'Morse Code', 'Atbash Cipher', 'ROT5'],
+            encoding: ['Base64', 'Base64 URL', 'Base32', 'Base58', 'Base62', 'Binary', 'Hexadecimal', 'ASCII85', 'URL Encode', 'HTML Entities'],
+            cipher: ['Caesar Cipher', 'ROT13', 'ROT47', 'Morse Code', 'Atbash Cipher', 'ROT5', 'Vigenère Cipher', 'Rail Fence (3 Rails)'],
             visual: ['Rainbow Text', 'Strikethrough', 'Underline', 'Reverse Text', 'Alternating Case', 'Reverse Words', 'Random Case', 'Title Case', 'Sentence Case', 'Emoji Speak'],
             format: ['Pig Latin', 'Leetspeak', 'NATO Phonetic', 'camelCase', 'snake_case', 'kebab-case'],
-            unicode: ['Invisible Text', 'Upside Down', 'Full Width', 'Small Caps', 'Bubble', 'Braille', 'Greek Letters', 'Wingdings', 'Superscript', 'Subscript', 'Regional Indicator Letters', 'Fraktur', 'Cyrillic Stylized', 'Katakana', 'Hiragana'],
+            unicode: ['Invisible Text', 'Upside Down', 'Full Width', 'Small Caps', 'Bubble', 'Braille', 'Greek Letters', 'Wingdings', 'Superscript', 'Subscript', 'Regional Indicator Letters', 'Fraktur', 'Cyrillic Stylized', 'Katakana', 'Hiragana', 'Roman Numerals'],
             special: ['Medieval', 'Cursive', 'Monospace', 'Double-Struck', 'Elder Futhark', 'Mirror Text', 'Zalgo'],
             fantasy: ['Quenya (Tolkien Elvish)', 'Tengwar Script', 'Klingon', 'Aurebesh (Star Wars)', 'Dovahzul (Dragon)'],
             ancient: ['Hieroglyphics', 'Ogham (Celtic)', 'Semaphore Flags'],
@@ -56,9 +56,18 @@ window.app = new Vue({
         // History of copied content
         copyHistory: [],
         maxHistoryItems: 10,
-        showCopyHistory: false
+        showCopyHistory: false,
+        showUnicodePanel: false
     },
     methods: {
+        toggleUnicodePanel() {
+            this.showUnicodePanel = !this.showUnicodePanel;
+            const panel = document.getElementById('unicode-options-panel');
+            if (panel) {
+                if (this.showUnicodePanel) panel.classList.add('active');
+                else panel.classList.remove('active');
+            }
+        },
         // Focus an element without causing the page to scroll
         focusWithoutScroll(el) {
             if (!el) return;
@@ -1030,6 +1039,34 @@ window.app = new Vue({
                 }
             }
 
+            // - Base58
+            if (/^[1-9A-HJ-NP-Za-km-z]+$/.test(input.trim())) {
+                try {
+                    if (window.transforms.base58 && window.transforms.base58.reverse) {
+                        const result = window.transforms.base58.reverse(input.trim());
+                        if (result && /[\x20-\x7E]{3,}/.test(result)) {
+                            return { text: result, method: 'Base58' };
+                        }
+                    }
+                } catch (e) {
+                    console.error('Base58 decode error:', e);
+                }
+            }
+
+            // - Base62
+            if (/^[0-9A-Za-z]+$/.test(input.trim())) {
+                try {
+                    if (window.transforms.base62 && window.transforms.base62.reverse) {
+                        const result = window.transforms.base62.reverse(input.trim());
+                        if (result && /[\x20-\x7E]{3,}/.test(result)) {
+                            return { text: result, method: 'Base62' };
+                        }
+                    }
+                } catch (e) {
+                    console.error('Base62 decode error:', e);
+                }
+            }
+
             // - Upside Down text
             if (window.transforms.upside_down && window.transforms.upside_down.reverse) {
                 try {

js/steganography.js

@@ -1,4 +1,19 @@
 // Steganography carriers
+// Global adjustable options for selectors/zero-width usage
+const __STEG_DEFAULTS__ = {
+    bitZeroVS: '\ufe0e', // VS15 as 0
+    bitOneVS: '\ufe0f',  // VS16 as 1
+    initialPresentation: 'emoji', // 'emoji' -> VS16, 'text' -> VS15, 'none'
+    trailingZW: '\u200B', // e.g., ZWSP; set to null to disable
+    interBitZW: null,      // e.g., '\u200C' ZWNJ, '\u200D' ZWJ; null disables
+    interBitEvery: 1,      // insert interBitZW every N bits (1 = after each bit)
+    bitOrder: 'msb'        // 'msb' or 'lsb' within each byte
+};
+let __stegOptions__ = Object.assign({}, __STEG_DEFAULTS__);
+function setStegOptions(opts) {
+    if (!opts) return;
+    __stegOptions__ = Object.assign({}, __stegOptions__, opts);
+}
 // First define encoding function for preview usage
 function encodeForPreview(emoji, text) {
     if (!text) return emoji;
@@ -9,20 +24,28 @@ function encodeForPreview(emoji, text) {
         .join('');
     
     // Use variation selectors to encode binary
-    const vs15 = '\ufe0e';  // text variation selector (0)
-    const vs16 = '\ufe0f';  // emoji variation selector (1)
+    const vs0 = __stegOptions__.bitZeroVS || '\ufe0e';
+    const vs1 = __stegOptions__.bitOneVS || '\ufe0f';
     
     // Start with the emoji character
     // Ensure the emoji has a presentation selector first to standardize it
-    let result = emoji + vs16; // Add emoji presentation selector first
+    let result = emoji;
+    if (__stegOptions__.initialPresentation === 'emoji') result += '\ufe0f';
+    else if (__stegOptions__.initialPresentation === 'text') result += '\ufe0e';
     
     // Add variation selectors based on binary representation
-    for (const bit of binary) {
-        result += bit === '0' ? vs15 : vs16;
+    for (let i=0;i<binary.length;i++) {
+        const bit = binary[i];
+        result += bit === '0' ? vs0 : vs1;
+        if (__stegOptions__.interBitZW && i < binary.length-1 && ((i+1) % Math.max(1, __stegOptions__.interBitEvery)) === 0) {
+            result += __stegOptions__.interBitZW;
+        }
     }
     
-    // Ensure there's a zero-width space after the encoded content
-    result += '\u200B';
+    // Optional trailing zero-width character
+    if (__stegOptions__.trailingZW) {
+        try { result += eval(`'${__stegOptions__.trailingZW}'`); } catch (_) { result += '\u200B'; }
+    }
     
     return result;
 }
@@ -73,21 +96,28 @@ function encodeEmoji(emoji, text) {
         .join('');
     
     // Use variation selectors to encode binary
-    const vs15 = '\ufe0e';  // text variation selector (0)
-    const vs16 = '\ufe0f';  // emoji variation selector (1)
+    const vs0 = __stegOptions__.bitZeroVS || '\ufe0e';
+    const vs1 = __stegOptions__.bitOneVS || '\ufe0f';
     
     // Start with the emoji character
     // Ensure the emoji has a presentation selector first to standardize it
-    let result = emoji + vs16; // Add emoji presentation selector first
+    let result = emoji;
+    if (__stegOptions__.initialPresentation === 'emoji') result += '\ufe0f';
+    else if (__stegOptions__.initialPresentation === 'text') result += '\ufe0e';
     
     // Add variation selectors based on binary representation
-    for (const bit of binary) {
-        result += bit === '0' ? vs15 : vs16;
+    for (let i=0;i<binary.length;i++) {
+        const bit = binary[i];
+        result += bit === '0' ? vs0 : vs1;
+        if (__stegOptions__.interBitZW && i < binary.length-1 && ((i+1) % Math.max(1, __stegOptions__.interBitEvery)) === 0) {
+            result += __stegOptions__.interBitZW;
+        }
     }
     
-    // Ensure there's a zero-width space after the encoded content
-    // This helps with browser rendering
-    result += '\u200B';
+    // Optional trailing zero-width character (helps with rendering in many browsers)
+    if (__stegOptions__.trailingZW) {
+        try { result += eval(`'${__stegOptions__.trailingZW}'`); } catch (_) { result += '\u200B'; }
+    }
     
     return result;
 }
@@ -105,27 +135,33 @@ function decodeEmoji(text) {
     // Only extract the emoji and its variation selectors, ignoring other content
     // This prevents random characters from being included in the decoded result
     const emojiChar = emojiMatch[1];
-    const pattern = new RegExp(`^${emojiChar}([\ufe0e\ufe0f]+)`, 'u');
+    // Allow zero-width chars interleaved, but capture only variation selectors
+    const pattern = new RegExp(`^${emojiChar}([\ufe0e\ufe0f\u200B\u200C\u200D\ufeff]+)`, 'u');
     const emojiData = text.match(pattern);
     
     if (!emojiData || !emojiData[1]) return '';
     
-    // Get only the variation selectors that follow the emoji directly
-    const varSelectors = emojiData[1];
-    // Skip the first variation selector as it's used for presentation
-    const matches = [...varSelectors.matchAll(/[\ufe0e\ufe0f]/g)];
-    if (matches.length <= 1) return ''; // Need at least one bit after the presentation selector
-    
-    // Convert variation selectors to binary, skipping the first one (presentation selector)
-    const binary = matches.slice(1).map(m => m[0] === '\ufe0e' ? '0' : '1').join('');
+    // Extract variation selectors only
+    const rawSeq = emojiData[1];
+    const matches = [...rawSeq.matchAll(/[\ufe0e\ufe0f]/g)];
+    if (matches.length === 0) return '';
+    // Decide if the first selector is presentation
+    const skip = (__stegOptions__.initialPresentation === 'none') ? 0 : 1;
+    if (matches.length <= skip) return '';
+    const zeroSel = __stegOptions__.bitZeroVS || '\ufe0e';
+    const oneSel  = __stegOptions__.bitOneVS || '\ufe0f';
+    let binary = matches.slice(skip).map(m => m[0] === zeroSel ? '0' : (m[0] === oneSel ? '1' : '')).join('');
     
     // Make sure we have complete bytes (multiples of 8 bits)
     const validBinaryLength = Math.floor(binary.length / 8) * 8;
     
-    // Convert binary to text
+    // Convert binary to text (respect bitOrder)
     let decoded = '';
     for (let i = 0; i < validBinaryLength; i += 8) {
-        const byte = binary.slice(i, i + 8);
+        let byte = binary.slice(i, i + 8);
+        if (__stegOptions__.bitOrder === 'lsb') {
+            byte = byte.split('').reverse().join('');
+        }
         if (byte.length === 8) {
             const charCode = parseInt(byte, 2);
             // Only include printable ASCII characters
@@ -191,5 +227,6 @@ window.steganography = {
     encodeEmoji,
     decodeEmoji,
     encodeInvisible,
-    decodeInvisible
+    decodeInvisible,
+    setStegOptions
 };

js/transforms.js

@@ -263,6 +263,26 @@ const transforms = {
         }
     },
     
+    base64url: {
+        name: 'Base64 URL',
+        func: function(text) {
+            if (!text) return '';
+            const std = btoa(text);
+            return std.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/,'');
+        },
+        preview: function(text) {
+            if (!text) return '[b64url]';
+            return this.func(text.slice(0,3)) + '...';
+        },
+        reverse: function(text) {
+            if (!text) return '';
+            let std = text.replace(/-/g, '+').replace(/_/g, '/');
+            // pad
+            while (std.length % 4 !== 0) std += '=';
+            try { return atob(std); } catch (e) { return text; }
+        }
+    },
+    
     hex: {
         name: 'Hexadecimal',
         func: function(text) {
@@ -1229,6 +1249,329 @@ const transforms = {
         }
     },
 
+    // Base58 (Bitcoin alphabet)
+    base58: {
+        name: 'Base58',
+        alphabet: '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz',
+        func: function(text) {
+            if (!text) return '';
+            const bytes = new TextEncoder().encode(text);
+            // Count leading zeros
+            let zeros = 0;
+            for (let b of bytes) { if (b === 0) zeros++; else break; }
+            // Convert to BigInt
+            let n = 0n;
+            for (let b of bytes) { n = (n << 8n) + BigInt(b); }
+            // Encode
+            let out = '';
+            while (n > 0n) {
+                const rem = n % 58n;
+                n = n / 58n;
+                out = this.alphabet[Number(rem)] + out;
+            }
+            // Add leading zeros as '1'
+            for (let i = 0; i < zeros; i++) out = '1' + out;
+            return out || '1';
+        },
+        preview: function(text) {
+            if (!text) return '[base58]';
+            return this.func(text.slice(0, 3)) + '...';
+        },
+        reverse: function(text) {
+            if (!text) return '';
+            // Count leading '1's
+            let zeros = 0;
+            for (let c of text) { if (c === '1') zeros++; else break; }
+            // Convert to BigInt
+            let n = 0n;
+            for (let c of text) {
+                const i = this.alphabet.indexOf(c);
+                if (i < 0) continue;
+                n = n * 58n + BigInt(i);
+            }
+            // Convert BigInt to bytes
+            const bytes = [];
+            while (n > 0n) {
+                bytes.unshift(Number(n % 256n));
+                n = n / 256n;
+            }
+            for (let i = 0; i < zeros; i++) bytes.unshift(0);
+            return new TextDecoder().decode(Uint8Array.from(bytes));
+        }
+    },
+
+    // Base62 (0-9A-Za-z)
+    base62: {
+        name: 'Base62',
+        alphabet: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
+        func: function(text) {
+            if (!text) return '';
+            const bytes = new TextEncoder().encode(text);
+            let n = 0n;
+            for (let b of bytes) { n = (n << 8n) + BigInt(b); }
+            if (n === 0n) return '0';
+            let out = '';
+            while (n > 0n) {
+                const rem = n % 62n;
+                n = n / 62n;
+                out = this.alphabet[Number(rem)] + out;
+            }
+            return out;
+        },
+        preview: function(text) {
+            if (!text) return '[base62]';
+            return this.func(text.slice(0, 3)) + '...';
+        },
+        reverse: function(text) {
+            if (!text) return '';
+            let n = 0n;
+            for (let c of text) {
+                const i = this.alphabet.indexOf(c);
+                if (i < 0) continue;
+                n = n * 62n + BigInt(i);
+            }
+            const bytes = [];
+            while (n > 0n) {
+                bytes.unshift(Number(n % 256n));
+                n = n / 256n;
+            }
+            if (bytes.length === 0) bytes.push(0);
+            return new TextDecoder().decode(Uint8Array.from(bytes));
+        }
+    },
+
+    // Roman Numerals (1..3999)
+    roman_numerals: {
+        name: 'Roman Numerals',
+        numerals: [
+            ['M',1000],['CM',900],['D',500],['CD',400],
+            ['C',100],['XC',90],['L',50],['XL',40],
+            ['X',10],['IX',9],['V',5],['IV',4],['I',1]
+        ],
+        func: function(text) {
+            return text.replace(/\b\d+\b/g, m => {
+                let num = parseInt(m,10);
+                if (num <= 0 || num > 3999 || isNaN(num)) return m;
+                let out = '';
+                for (const [sym,val] of this.numerals) {
+                    while (num >= val) { out += sym; num -= val; }
+                }
+                return out;
+            });
+        },
+        preview: function(text) {
+            return this.func(text || '2024');
+        },
+        reverse: function(text) {
+            // Greedy parse roman numerals to digits
+            const map = {I:1,V:5,X:10,L:50,C:100,D:500,M:1000};
+            const tokenize = s => s.match(/[IVXLCDM]+|[^IVXLCDM]+/gi) || [s];
+            return tokenize(text).map(tok => {
+                if (!/^[IVXLCDM]+$/i.test(tok)) return tok;
+                const s = tok.toUpperCase();
+                let total = 0;
+                for (let i=0;i<s.length;i++) {
+                    const v = map[s[i]] || 0;
+                    const n = map[s[i+1]] || 0;
+                    total += v < n ? -v : v;
+                }
+                return String(total);
+            }).join('');
+        }
+    },
+
+    // Vigenère Cipher (default key: KEY)
+    vigenere: {
+        name: 'Vigenère Cipher',
+        key: 'KEY',
+        func: function(text) {
+            const key = this.key;
+            let out = '';
+            let j = 0;
+            for (let i=0;i<text.length;i++) {
+                const c = text[i];
+                const code = c.charCodeAt(0);
+                const k = key[j % key.length].toUpperCase().charCodeAt(0) - 65;
+                if (code >= 65 && code <= 90) { out += String.fromCharCode(65 + ((code-65 + k)%26)); j++; }
+                else if (code >= 97 && code <= 122) { out += String.fromCharCode(97 + ((code-97 + k)%26)); j++; }
+                else out += c;
+            }
+            return out;
+        },
+        preview: function(text) {
+            if (!text) return '[Vigenère]';
+            return this.func(text.slice(0,8)) + (text.length>8?'...':'');
+        },
+        reverse: function(text) {
+            const key = this.key;
+            let out = '';
+            let j = 0;
+            for (let i=0;i<text.length;i++) {
+                const c = text[i];
+                const code = c.charCodeAt(0);
+                const k = key[j % key.length].toUpperCase().charCodeAt(0) - 65;
+                if (code >= 65 && code <= 90) { out += String.fromCharCode(65 + ((code-65 + 26 - (k%26))%26)); j++; }
+                else if (code >= 97 && code <= 122) { out += String.fromCharCode(97 + ((code-97 + 26 - (k%26))%26)); j++; }
+                else out += c;
+            }
+            return out;
+        }
+    },
+
+    // Rail Fence Cipher (3 rails)
+    rail_fence: {
+        name: 'Rail Fence (3 Rails)',
+        rails: 3,
+        func: function(text) {
+            const rails = Array.from({length: this.rails}, () => []);
+            let rail = 0, dir = 1;
+            for (const ch of text) {
+                rails[rail].push(ch);
+                rail += dir;
+                if (rail === 0 || rail === this.rails-1) dir *= -1;
+            }
+            return rails.flat().join('');
+        },
+        preview: function(text) {
+            if (!text) return '[rail]';
+            return this.func(text.slice(0,12)) + (text.length>12?'...':'');
+        },
+        reverse: function(text) {
+            const len = text.length;
+            const pattern = [];
+            let rail = 0, dir = 1;
+            for (let i=0;i<len;i++) {
+                pattern.push(rail);
+                rail += dir;
+                if (rail === 0 || rail === this.rails-1) dir *= -1;
+            }
+            const counts = Array(this.rails).fill(0);
+            for (const r of pattern) counts[r]++;
+            const railsArr = [];
+            let idx = 0;
+            for (let r=0;r<this.rails;r++) {
+                railsArr[r] = text.slice(idx, idx+counts[r]).split('');
+                idx += counts[r];
+            }
+            const positions = Array(this.rails).fill(0);
+            let out = '';
+            for (const r of pattern) {
+                out += railsArr[r][positions[r]++];
+            }
+            return out;
+        }
+    },
+
+    // ROT18 (ROT13 letters + ROT5 digits)
+    rot18: {
+        name: 'ROT18',
+        func: function(text) {
+            const rot13 = c => {
+                const code = c.charCodeAt(0);
+                if (code >= 65 && code <= 90) return String.fromCharCode(65 + ((code-65 + 13)%26));
+                if (code >= 97 && code <= 122) return String.fromCharCode(97 + ((code-97 + 13)%26));
+                return c;
+            };
+            const rot5 = c => {
+                if (c >= '0' && c <= '9') return String.fromCharCode(48 + (((c.charCodeAt(0)-48)+5)%10));
+                return c;
+            };
+            return [...text].map(c => rot5(rot13(c))).join('');
+        },
+        preview: function(text) {
+            if (!text) return '[rot18]';
+            return this.func(text.slice(0, 8)) + (text.length>8?'...':'');
+        },
+        reverse: function(text) { return this.func(text); }
+    },
+
+    // A1Z26 (letters to 1-26, separated by hyphens)
+    a1z26: {
+        name: 'A1Z26',
+        func: function(text) {
+            return text.replace(/[A-Za-z]/g, c => {
+                const n = (c.toUpperCase().charCodeAt(0) - 64);
+                return String(n) + '-';
+            }).replace(/-+(?!\d)/g,'-').replace(/-+$/,'');
+        },
+        preview: function(text) {
+            if (!text) return '[1-26]';
+            return this.func(text.slice(0, 5)) + '...';
+        },
+        reverse: function(text) {
+            return text.split(/([^0-9]+)/).map(tok => {
+                if (!/^\d+$/.test(tok)) return tok;
+                const n = parseInt(tok,10);
+                if (n>=1 && n<=26) return String.fromCharCode(64+n).toLowerCase();
+                return tok;
+            }).join('');
+        }
+    },
+
+    // Affine Cipher (a=5, b=8)
+    affine: {
+        name: 'Affine Cipher (a=5,b=8)',
+        a: 5, b: 8, m: 26, invA: 21, // 5*21 ≡ 1 (mod 26)
+        func: function(text) {
+            const {a,b,m} = this;
+            return [...text].map(c => {
+                const code = c.charCodeAt(0);
+                if (code>=65 && code<=90) return String.fromCharCode(65 + ((a*(code-65)+b)%m));
+                if (code>=97 && code<=122) return String.fromCharCode(97 + ((a*(code-97)+b)%m));
+                return c;
+            }).join('');
+        },
+        preview: function(text) {
+            if (!text) return '[affine]';
+            return this.func(text.slice(0,8)) + (text.length>8?'...':'');
+        },
+        reverse: function(text) {
+            const {invA,b,m} = this;
+            return [...text].map(c => {
+                const code = c.charCodeAt(0);
+                if (code>=65 && code<=90) return String.fromCharCode(65 + ((invA*((code-65 - b + m)%m))%m));
+                if (code>=97 && code<=122) return String.fromCharCode(97 + ((invA*((code-97 - b + m)%m))%m));
+                return c;
+            }).join('');
+        }
+    },
+
+    // QWERTY Right-Shift (maps to next key on same row)
+    qwerty_shift: {
+        name: 'QWERTY Right Shift',
+        rows: [
+            'qwertyuiop',
+            'asdfghjkl',
+            'zxcvbnm'
+        ],
+        buildMap: function() {
+            if (this._map) return this._map;
+            const map = {};
+            for (const row of this.rows) {
+                for (let i=0;i<row.length;i++) {
+                    const from = row[i], to = row[(i+1)%row.length];
+                    map[from] = to;
+                    map[from.toUpperCase()] = to.toUpperCase();
+                }
+            }
+            this._map = map; return map;
+        },
+        func: function(text) {
+            const m = this.buildMap();
+            return [...text].map(c => m[c] || c).join('');
+        },
+        preview: function(text) {
+            if (!text) return '[qwerty]';
+            return this.func(text.slice(0,8)) + (text.length>8?'...':'');
+        },
+        reverse: function(text) {
+            const m = this.buildMap();
+            const inv = {};
+            Object.keys(m).forEach(k => inv[m[k]] = k);
+            return [...text].map(c => inv[c] || c).join('');
+        }
+    },
+
     // Case/formatting transforms
     title_case: {
         name: 'Title Case',
@@ -1711,7 +2054,8 @@ const transforms = {
                 'hieroglyphics', 'ogham', 'mathematical', 'cursive', 'medieval',
                 'monospace', 'greek', 'braille', 'alternating_case', 'reverse_words',
                 'title_case', 'sentence_case', 'camel_case', 'snake_case', 'kebab_case', 'random_case',
-                'regional_indicator', 'fraktur', 'cyrillic_stylized', 'katakana', 'hiragana', 'emoji_speak'
+                'regional_indicator', 'fraktur', 'cyrillic_stylized', 'katakana', 'hiragana', 'emoji_speak',
+                'base58', 'base62', 'roman_numerals', 'vigenere', 'rail_fence', 'base64url'
             ];
             return suitable.filter(name => window.transforms[name]);
         },