Refactor code structure for improved readability and maintainability

index.html

@@ -362,6 +362,9 @@
       <a href="https://geni.us/CNCStoreTexture" target="_blank" rel="noopener noreferrer" class="sponsor-link" data-i18n="sponsor.visitStore">
         🛒 Visit CNCKitchen.STORE
       </a>
+      <a href="https://www.paypal.me/CNCKitchen" target="_blank" rel="noopener noreferrer" class="sponsor-link sponsor-link--paypal" data-i18n="sponsor.donate">
+        💙 Donate on PayPal
+      </a>
       <label class="sponsor-no-show">
         <input type="checkbox" id="sponsor-dont-show" />
         <span data-i18n="sponsor.dontShow">Don't show this again</span>

js/i18n.js

@@ -141,6 +141,7 @@ export const TRANSLATIONS = {
     'sponsor.title':           'Thanks for using CNC Kitchen STL Texturizer!',
     'sponsor.body':            'This tool is provided <strong>completely free</strong> by CNC Kitchen.<br>While your STL is being processed, why not check out the store that helps us keep making cool stuff for you?',
     'sponsor.visitStore':      '\uD83D\uDED2 Visit CNCKitchen.STORE',
+    'sponsor.donate':          '\uD83D\uDC99 Donate on PayPal',
     'sponsor.dontShow':        "Don\u2019t show this again",
     'sponsor.closeAndContinue':'Close &amp; Continue',
 
@@ -292,6 +293,7 @@ export const TRANSLATIONS = {
     'sponsor.title':           'Danke f\u00fcr die Nutzung des CNC Kitchen STL Texturizers!',
     'sponsor.body':            'Dieses Tool wird von CNC Kitchen <strong>komplett kostenlos</strong> bereitgestellt.<br>W\u00e4hrend dein STL verarbeitet wird, schau doch mal im Shop vorbei, der uns hilft, coole Sachen f\u00fcr dich zu machen!',
     'sponsor.visitStore':      '\uD83D\uDED2 CNCKitchen.STORE besuchen',
+    'sponsor.donate':          '\uD83D\uDC99 Via PayPal spenden',
     'sponsor.dontShow':        'Nicht mehr anzeigen',
     'sponsor.closeAndContinue':'Schlie\u00dfen &amp; Weiter',
 

js/main.js

@@ -1408,6 +1408,11 @@ function addSmoothNormals(geometry) {
 async function toggleDisplacementPreview(enable) {
   settings.useDisplacement = enable;
 
+  // Exit surface masking mode when the 3D preview is activated
+  if (enable && exclusionTool) {
+    setExclusionTool(null);
+  }
+
   if (!enable) {
     // Revert to original geometry with bump-only shading.
     if (currentGeometry && previewMaterial) {

js/presetTextures.js

@@ -29,18 +29,24 @@ function fitDimensions(imgW, imgH) {
 // ── Image-based presets ───────────────────────────────────────────────────────
 
 const IMAGE_PRESETS = [
-  { name: 'Basket',    url: 'textures/basket.jpg'   },
+  { name: 'Basket',       url: 'textures/basket.jpg'       },
-  { name: 'Brick',     url: 'textures/brick.jpg'    },
+  { name: 'Brick',        url: 'textures/brick.jpg'        },
-  { name: 'Bubble',    url: 'textures/bubble.jpg'   },
+  { name: 'Bubble',       url: 'textures/bubble.jpg'       },
-  { name: 'Crystal',   url: 'textures/crystal.jpg'  },
+  { name: 'Crystal',      url: 'textures/crystal.jpg'      },
-  { name: 'Hexagon',   url: 'textures/hexagon.jpg'  },
+  { name: 'Grip Surface', url: 'textures/gripSurface.jpg'  },
-  { name: 'Knitting',  url: 'textures/knitting.jpg' },
+  { name: 'Hexagon',      url: 'textures/hexagon.jpg'      },
-  { name: 'Knurling',  url: 'textures/knurling.jpg' },
+  { name: 'Hexagons',     url: 'textures/hexagons.jpg'     },
-  { name: 'Leather',   url: 'textures/leather.jpg'  },
+  { name: 'Knitting',     url: 'textures/knitting.jpg'     },
-  { name: 'Leather 2', url: 'textures/leather2.jpg' },
+  { name: 'Knurling',     url: 'textures/knurling.jpg'     },
-  { name: 'Weave',     url: 'textures/weave.jpg'    },
+  { name: 'Leather',      url: 'textures/leather.jpg'      },
-  { name: 'Wood',      url: 'textures/wood.jpg'     },
+  { name: 'Leather 2',    url: 'textures/leather2.jpg'     },
-  { name: 'Noise',     url: 'textures/noise.jpg'    },
+  { name: 'Melt',         url: 'textures/melt.jpg'         },
+  { name: 'Noise',        url: 'textures/noise.jpg'        },
+  { name: 'Rhombic',      url: 'textures/rhombic.jpg'      },
+  { name: 'Voronoi',      url: 'textures/voronoi.jpg'      },
+  { name: 'Weave',        url: 'textures/weave.jpg'        },
+  { name: 'Weave 02',     url: 'textures/weave_02.jpg'     },
+  { name: 'Wood',         url: 'textures/wood.jpg'         },
 ];
 
 function loadImagePreset({ name, url }) {

style.css

@@ -858,6 +858,11 @@ input[type="number"].val:focus { outline: none; border-color: var(--accent); }
 
 .sponsor-link:hover { background: var(--accent-hover); }
 
+.sponsor-link--paypal {
+  background: #009cde;
+}
+.sponsor-link--paypal:hover { background: #007bb5; }
+
 .sponsor-no-show {
   display: flex;
   align-items: center;