From 030d90bccac70e9d14ee8d22885b37dcc603ea57 Mon Sep 17 00:00:00 2001
From: EP <ep@Mac.lan>
Date: Wed, 20 Aug 2025 17:54:26 -0700
Subject: [PATCH] Tokenade presets: default separator to ZWNJ for all presets;
 remove 'Presets' label; keep all five preset buttons on one line

---
 css/style.css |  5 +++--
 index.html    |  1 -
 js/app.js     | 10 +++++-----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/css/style.css b/css/style.css
index d0a255c..78ea176 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2024,10 +2024,11 @@ html {
     display: flex;
     align-items: center;
     gap: 8px;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    overflow-x: auto;
     margin: 8px 0 12px 0;
 }
-.tokenade-presets .transform-button { min-width: 160px; }
+.tokenade-presets .transform-button { flex: 0 0 auto; min-width: 160px; }
 
 /* Quick picks panel */
 .carrier-quick-grid { 
diff --git a/index.html b/index.html
index 93c2b4e..9c7124b 100644
--- a/index.html
+++ b/index.html
@@ -253,7 +253,6 @@
                             </small>
                         </div>
                         <div class="tokenade-presets">
-                            <label style="margin-right:8px">Presets</label>
                             <button class="transform-button" title="Very light density" @click="applyTokenadePreset('feather')">🪶 Featherweight</button>
                             <button class="transform-button" title="Light density" @click="applyTokenadePreset('light')">🍃 Lightweight</button>
                             <button class="transform-button" title="Balanced density" @click="applyTokenadePreset('middle')">🪨 Middleweight</button>
diff --git a/js/app.js b/js/app.js
index 633e628..74ad3a4 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1809,19 +1809,19 @@ window.app = new Vue({
 
         applyTokenadePreset(preset) {
             if (preset === 'feather') {
-                this.tbDepth = 1; this.tbBreadth = 3; this.tbRepeats = 2; this.tbSeparator = 'zwsp';
+                this.tbDepth = 1; this.tbBreadth = 3; this.tbRepeats = 2; this.tbSeparator = 'zwnj';
                 this.tbIncludeVS = false; this.tbIncludeNoise = false; this.tbRandomizeEmojis = true;
             } else if (preset === 'light') {
-                this.tbDepth = 2; this.tbBreadth = 3; this.tbRepeats = 3; this.tbSeparator = 'zwsp';
+                this.tbDepth = 2; this.tbBreadth = 3; this.tbRepeats = 3; this.tbSeparator = 'zwnj';
                 this.tbIncludeVS = false; this.tbIncludeNoise = true; this.tbRandomizeEmojis = true;
             } else if (preset === 'middle') {
-                this.tbDepth = 3; this.tbBreadth = 4; this.tbRepeats = 6; this.tbSeparator = 'zwj';
+                this.tbDepth = 3; this.tbBreadth = 4; this.tbRepeats = 6; this.tbSeparator = 'zwnj';
                 this.tbIncludeVS = true; this.tbIncludeNoise = true; this.tbRandomizeEmojis = true;
             } else if (preset === 'heavy') {
-                this.tbDepth = 4; this.tbBreadth = 6; this.tbRepeats = 12; this.tbSeparator = 'zwj';
+                this.tbDepth = 4; this.tbBreadth = 6; this.tbRepeats = 12; this.tbSeparator = 'zwnj';
                 this.tbIncludeVS = true; this.tbIncludeNoise = true; this.tbRandomizeEmojis = true;
             } else if (preset === 'super') {
-                this.tbDepth = 5; this.tbBreadth = 8; this.tbRepeats = 18; this.tbSeparator = 'zwj';
+                this.tbDepth = 5; this.tbBreadth = 8; this.tbRepeats = 18; this.tbSeparator = 'zwnj';
                 this.tbIncludeVS = true; this.tbIncludeNoise = true; this.tbRandomizeEmojis = true;
             }
             this.showNotification('<i class="fas fa-sliders-h"></i> Preset applied', 'success');