From 3e88cc8ef982ae188bdd6efc5ebcce7bbccf0272 Mon Sep 17 00:00:00 2001
From: Avatarsia <Lexan-@gmx.net>
Date: Mon, 6 Apr 2026 03:18:45 +0200
Subject: [PATCH 1/2] feat: save/load settings with export/import and auto-save

Add preset export/import via .bumpmesh files (ZIP containing settings,
optional model STL, optional custom texture PNG). Two icon buttons in
the header open an export dialog with checkboxes and a file picker.

- Export dialog lets users choose what to include (settings always,
  model and custom texture optionally)
- Import via file picker or drag & drop of .bumpmesh files
- Auto-save to localStorage on every settings change, restore on reload
- Uses fflate (already bundled) for ZIP creation/extraction
- Full i18n support (EN/DE) for all new UI elements
---
 index.html    |  15 ++++
 js/i18n/de.js |  11 ++-
 js/i18n/en.js |  11 ++-
 js/main.js    | 239 ++++++++++++++++++++++++++++++++++++++++++++++++++
 style.css     |  68 +++++++++++++-
 5 files changed, 341 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 8b2b4fc..d0aea31 100644
--- a/index.html
+++ b/index.html
@@ -34,6 +34,21 @@
       <span>BumpMesh <small style="opacity:.6;font-weight:400">by <a href="https://www.youtube.com/@CNCKitchen" target="_blank" rel="noopener noreferrer" style="color:inherit;text-decoration:underline">CNC Kitchen</a></small></span>
     </div>
     <div class="header-actions">
+      <div class="preset-io">
+        <button id="export-settings-btn" class="icon-btn" data-i18n-title="header.exportSettings" title="Export settings">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+        </button>
+        <input type="file" id="import-settings-input" accept=".bumpmesh,.json" hidden />
+        <label for="import-settings-input" class="icon-btn" data-i18n-title="header.importSettings" title="Import settings" role="button" tabindex="0">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+        </label>
+        <div id="export-dialog" class="export-dialog hidden">
+          <label><input type="checkbox" id="export-settings-chk" checked disabled /> <span data-i18n="header.exportSettingsLabel">Settings</span></label>
+          <label><input type="checkbox" id="export-model-chk" /> <span data-i18n="header.exportModelLabel">Model (STL)</span></label>
+          <label id="export-texture-row" class="hidden"><input type="checkbox" id="export-texture-chk" /> <span data-i18n="header.exportTextureLabel">Custom Texture</span></label>
+          <button id="export-go-btn" class="export-go-btn" data-i18n="header.exportGo">Export</button>
+        </div>
+      </div>
       <div class="lang-seg">
       </div>
       <button id="theme-toggle" class="theme-toggle"
diff --git a/js/i18n/de.js b/js/i18n/de.js
index 8827528..c1413ca 100644
--- a/js/i18n/de.js
+++ b/js/i18n/de.js
@@ -141,5 +141,14 @@ export default {
   "cta.storeDismiss": "Ausblenden",
   "alerts.loadFailed": "Modell konnte nicht geladen werden: {msg}",
   "alerts.exportFailed": "Export fehlgeschlagen: {msg}",
-  "alerts.fileTooLarge": "Datei zu gross ({size} MB). Maximum: {max} MB."
+  "alerts.fileTooLarge": "Datei zu gross ({size} MB). Maximum: {max} MB.",
+  "header.exportSettings": "Einstellungen exportieren",
+  "header.importSettings": "Einstellungen importieren",
+  "header.exportSettingsLabel": "Einstellungen",
+  "header.exportModelLabel": "Modell (STL)",
+  "header.exportTextureLabel": "Eigene Textur",
+  "header.exportGo": "Exportieren",
+  "alerts.importSuccess": "Einstellungen erfolgreich importiert",
+  "alerts.importFailed": "Import fehlgeschlagen: {msg}",
+  "alerts.importNoFile": "Keine .bumpmesh-Datei ausgewaehlt"
 };
diff --git a/js/i18n/en.js b/js/i18n/en.js
index d5b714b..1cb23c6 100644
--- a/js/i18n/en.js
+++ b/js/i18n/en.js
@@ -141,5 +141,14 @@ export default {
   "cta.storeDismiss": "Dismiss",
   "alerts.loadFailed": "Could not load model: {msg}",
   "alerts.exportFailed": "Export failed: {msg}",
-  "alerts.fileTooLarge": "File too large ({size} MB). Maximum: {max} MB."
+  "alerts.fileTooLarge": "File too large ({size} MB). Maximum: {max} MB.",
+  "header.exportSettings": "Export settings",
+  "header.importSettings": "Import settings",
+  "header.exportSettingsLabel": "Settings",
+  "header.exportModelLabel": "Model (STL)",
+  "header.exportTextureLabel": "Custom Texture",
+  "header.exportGo": "Export",
+  "alerts.importSuccess": "Settings imported successfully",
+  "alerts.importFailed": "Failed to import settings: {msg}",
+  "alerts.importNoFile": "No .bumpmesh file selected"
 };
diff --git a/js/main.js b/js/main.js
index d13fdbf..1689775 100644
--- a/js/main.js
+++ b/js/main.js
@@ -13,6 +13,7 @@ import { exportSTL }          from './exporter.js';
 import { buildAdjacency, bucketFill,
          buildExclusionOverlayGeo, buildFaceWeights } from './exclusion.js';
 import { t, initLang, setLang, getLang, applyTranslations, TRANSLATIONS } from './i18n.js';
+import { zipSync, unzipSync, strToU8, strFromU8 } from 'fflate';
 
 // ── State ─────────────────────────────────────────────────────────────────────
 
@@ -442,6 +443,8 @@ function wireEvents() {
   dropZone.addEventListener('drop', (e) => {
     e.preventDefault();
     dropZone.classList.remove('drag-over');
+    const bmFile = [...e.dataTransfer.files].find(f => /\.bumpmesh$/i.test(f.name));
+    if (bmFile) { importBumpmesh(bmFile); return; }
     const file = [...e.dataTransfer.files].find(f => /\.(stl|obj|3mf)$/i.test(f.name));
     if (file) handleModelFile(file);
   });
@@ -2285,6 +2288,8 @@ function updatePreview() {
 
   syncBoundaryEdgeUniforms();
   exportBtn.disabled = false;
+
+  _saveToLocalStorage();
 }
 
 // ── Displacement preview ──────────────────────────────────────────────────────
@@ -2893,3 +2898,237 @@ function runAsync(fn) {
 function yieldFrame() {
   return new Promise(r => requestAnimationFrame(r));
 }
+
+// ── Export/Import Settings (.bumpmesh) ───────────────────────────────────────
+
+const exportSettingsBtn = document.getElementById('export-settings-btn');
+const exportDialog      = document.getElementById('export-dialog');
+const exportGoBtn       = document.getElementById('export-go-btn');
+const exportModelChk    = document.getElementById('export-model-chk');
+const exportTextureChk  = document.getElementById('export-texture-chk');
+const exportTextureRow  = document.getElementById('export-texture-row');
+const importInput       = document.getElementById('import-settings-input');
+
+// Export dialog toggle
+exportSettingsBtn.addEventListener('click', () => {
+  exportDialog.classList.toggle('hidden');
+  // Show texture checkbox only if custom texture is loaded
+  exportTextureRow.classList.toggle('hidden', !activeMapEntry || !activeMapEntry.isCustom);
+  // Enable model checkbox only if a model is loaded
+  exportModelChk.disabled = !currentGeometry;
+});
+
+// Close dialog when clicking outside
+document.addEventListener('click', (e) => {
+  if (!exportDialog.contains(e.target) && e.target !== exportSettingsBtn && !exportSettingsBtn.contains(e.target)) {
+    exportDialog.classList.add('hidden');
+  }
+});
+
+// Export: build .bumpmesh ZIP and download
+exportGoBtn.addEventListener('click', async () => {
+  exportDialog.classList.add('hidden');
+
+  const includeModel = exportModelChk.checked && currentGeometry;
+  const includeTexture = exportTextureChk.checked && activeMapEntry && activeMapEntry.isCustom;
+
+  const data = {
+    version: 1,
+    texture: activeMapEntry ? activeMapEntry.name : null,
+    settings: { ...settings },
+  };
+
+  const zipFiles = {};
+
+  // Settings JSON (always included)
+  zipFiles['settings.json'] = strToU8(JSON.stringify(data, null, 2));
+
+  // Model as binary STL
+  if (includeModel) {
+    const posArr = currentGeometry.attributes.position.array;
+    const norArr = currentGeometry.attributes.normal ? currentGeometry.attributes.normal.array : null;
+    const triCount = (posArr.length / 9) | 0;
+    const buf = new ArrayBuffer(84 + 50 * triCount);
+    const bytes = new Uint8Array(buf);
+    const view = new DataView(buf);
+    view.setUint32(80, triCount, true);
+    if (norArr) {
+      const posSrc = new Uint8Array(posArr.buffer, posArr.byteOffset, posArr.byteLength);
+      const norSrc = new Uint8Array(norArr.buffer, norArr.byteOffset, norArr.byteLength);
+      for (let i = 0; i < triCount; i++) {
+        const dst = 84 + i * 50, srcOff = i * 36;
+        bytes.set(norSrc.subarray(srcOff, srcOff + 12), dst);
+        bytes.set(posSrc.subarray(srcOff, srcOff + 36), dst + 12);
+      }
+    }
+    zipFiles['model.stl'] = new Uint8Array(buf);
+  }
+
+  // Custom texture as PNG
+  if (includeTexture && activeMapEntry.fullCanvas) {
+    const blob = await new Promise(r => activeMapEntry.fullCanvas.toBlob(r, 'image/png'));
+    const arrBuf = await blob.arrayBuffer();
+    zipFiles['texture.png'] = new Uint8Array(arrBuf);
+  }
+
+  // Create ZIP and download
+  const zipped = zipSync(zipFiles);
+  const blob = new Blob([zipped], { type: 'application/octet-stream' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = (currentStlName || 'bumpmesh') + '.bumpmesh';
+  a.style.display = 'none';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(url), 10000);
+});
+
+// Import: file input handler
+importInput.addEventListener('change', async (e) => {
+  const file = e.target.files[0];
+  if (!file) return;
+  importInput.value = ''; // reset for re-import
+  try {
+    await importBumpmesh(file);
+  } catch (err) {
+    alert(t('alerts.importFailed', { msg: err.message }));
+  }
+});
+
+async function importBumpmesh(file) {
+  const buf = await file.arrayBuffer();
+  const unzipped = unzipSync(new Uint8Array(buf));
+
+  // 1. Settings
+  if (unzipped['settings.json']) {
+    const json = JSON.parse(strFromU8(unzipped['settings.json']));
+    if (json.settings) {
+      // Apply settings to sliders/controls
+      for (const [key, value] of Object.entries(json.settings)) {
+        if (key in settings) settings[key] = value;
+      }
+      // Update all UI elements to reflect new settings
+      _syncUIFromSettings();
+    }
+    // Select texture preset if it matches
+    if (json.texture && !unzipped['texture.png']) {
+      _selectPresetByName(json.texture);
+    }
+  }
+
+  // 2. Model
+  if (unzipped['model.stl']) {
+    const stlBlob = new Blob([unzipped['model.stl']], { type: 'application/octet-stream' });
+    const stlFile = new File([stlBlob], 'model.stl');
+    await handleModelFile(stlFile);
+  }
+
+  // 3. Custom texture
+  if (unzipped['texture.png']) {
+    const texBlob = new Blob([unzipped['texture.png']], { type: 'image/png' });
+    const texFile = new File([texBlob], 'custom-texture.png');
+    activeMapEntry = await loadCustomTexture(texFile);
+    activeMapEntry.isCustom = true;
+    // Update preview
+    updatePreview();
+  }
+}
+
+// ── Helper: Sync UI from Settings ────────────────────────────────────────────
+
+function _syncUIFromSettings() {
+  // Mapping mode
+  if (mappingSelect) mappingSelect.value = settings.mappingMode;
+  capAngleRow.style.display = settings.mappingMode === 3 ? '' : 'none';
+
+  // Scale sliders (logarithmic — convert value to slider position)
+  scaleUSlider.value = scaleToPos(settings.scaleU);
+  scaleUVal.value = settings.scaleU;
+  scaleVSlider.value = scaleToPos(settings.scaleV);
+  scaleVVal.value = settings.scaleV;
+
+  // Linear sliders + their value displays
+  const sliderMap = {
+    'amplitude': 'amplitude',
+    'offset-u': 'offsetU',
+    'offset-v': 'offsetV',
+    'rotation': 'rotation',
+    'refine-length': 'refineLength',
+    'bottom-angle-limit': 'bottomAngleLimit',
+    'top-angle-limit': 'topAngleLimit',
+    'seam-blend': 'mappingBlend',
+    'seam-band-width': 'seamBandWidth',
+    'texture-smoothing': 'textureSmoothing',
+    'cap-angle': 'capAngle',
+  };
+  for (const [sliderId, settingKey] of Object.entries(sliderMap)) {
+    const slider = document.getElementById(sliderId);
+    if (slider) {
+      slider.value = settings[settingKey];
+      slider.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+  }
+
+  // Checkboxes
+  if (symmetricDispToggle) symmetricDispToggle.checked = settings.symmetricDisplacement;
+
+  // Lock scale button
+  if (lockScaleBtn) {
+    lockScaleBtn.classList.toggle('active', settings.lockScale);
+    lockScaleBtn.setAttribute('aria-pressed', String(settings.lockScale));
+  }
+
+  // Max triangles slider
+  if (maxTriSlider) {
+    maxTriSlider.value = settings.maxTriangles;
+    maxTriSlider.dispatchEvent(new Event('input', { bubbles: true }));
+  }
+}
+
+// ── Helper: Select Preset by Name ────────────────────────────────────────────
+
+function _selectPresetByName(name) {
+  const swatches = document.querySelectorAll('.preset-swatch');
+  for (const swatch of swatches) {
+    if (swatch.title === name || swatch.querySelector('.preset-label')?.textContent === name) {
+      swatch.click();
+      return;
+    }
+  }
+}
+
+// ── Auto-Save (localStorage) ─────────────────────────────────────────────────
+
+const STORAGE_KEY = 'bumpmesh-settings';
+
+function _saveToLocalStorage() {
+  const data = {
+    version: 1,
+    texture: activeMapEntry ? activeMapEntry.name : null,
+    settings: { ...settings },
+  };
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); } catch (e) { /* quota exceeded, ignore */ }
+}
+
+function _loadFromLocalStorage() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return;
+    const data = JSON.parse(raw);
+    if (data.settings) {
+      for (const [key, value] of Object.entries(data.settings)) {
+        if (key in settings) settings[key] = value;
+      }
+      // Defer UI sync until DOM is ready
+      requestAnimationFrame(() => {
+        _syncUIFromSettings();
+        if (data.texture) _selectPresetByName(data.texture);
+      });
+    }
+  } catch (e) { /* corrupted data, ignore */ }
+}
+
+// Restore settings from localStorage on startup
+_loadFromLocalStorage();
diff --git a/style.css b/style.css
index f694295..07fcfd0 100644
--- a/style.css
+++ b/style.css
@@ -1148,4 +1148,70 @@ input[type="number"].val:focus { outline: none; border-color: var(--accent); }
   background: var(--border);
   border-color: var(--accent);
   color: var(--text);
-}
\ No newline at end of file
+}
+
+/* ── Preset I/O (export/import settings) ──────────────────────────────── */
+.preset-io {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background 0.15s;
+}
+.icon-btn:hover { background: rgba(255,255,255,0.1); }
+[data-theme="light"] .icon-btn:hover { background: rgba(0,0,0,0.08); }
+
+.export-dialog {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 6px;
+  background: var(--bg-sidebar, #1e1e2e);
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 8px;
+  padding: 10px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 180px;
+  z-index: 100;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+}
+.export-dialog.hidden { display: none; }
+[data-theme="light"] .export-dialog {
+  background: #fff;
+  border-color: rgba(0,0,0,0.12);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+}
+.export-dialog label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.85em;
+  cursor: pointer;
+}
+.export-go-btn {
+  margin-top: 4px;
+  padding: 5px 12px;
+  border: none;
+  border-radius: 5px;
+  background: var(--accent, #6c8cff);
+  color: #fff;
+  cursor: pointer;
+  font-size: 0.85em;
+  font-weight: 500;
+  transition: background 0.15s;
+}
+.export-go-btn:hover { filter: brightness(1.15); }
\ No newline at end of file

From ab86fb1e6ba9cfe95b8ef733c9e6c79480313f7c Mon Sep 17 00:00:00 2001
From: Avatarsia <Lexan-@gmx.net>
Date: Tue, 7 Apr 2026 14:24:21 +0200
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20harden=20save/load=20settings=20?=
 =?UTF-8?q?=E2=80=94=20auto-save=20gaps,=20import=20order,=20state=20filte?=
 =?UTF-8?q?ring?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Auto-save now triggers for non-preview sliders (maxTriangles, refineLength)
  and lockScale toggle that previously bypassed updatePreview()
- Import loads model before applying settings so handleModelFile() resets
  get correctly overridden by the imported values
- Filter useDisplacement from export and localStorage (transient UI state)
- Add 500 MB size limit on .bumpmesh import to prevent zip bombs
- Add boundaryFalloff to _syncUIFromSettings() for upstream compatibility
- Move i18n keys for settings export/import to lazy-loaded en.js/de.js

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 js/main.js | 54 +++++++++++++++++++++++++++++++++---------------------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/js/main.js b/js/main.js
index 1689775..d798569 100644
--- a/js/main.js
+++ b/js/main.js
@@ -506,6 +506,8 @@ function wireEvents() {
       scaleVSlider.value = scaleToPos(settings.scaleU);
       scaleVVal.value = settings.scaleU;
       updatePreview();
+    } else {
+      _saveToLocalStorage();
     }
   });
 
@@ -1438,6 +1440,8 @@ function linkSlider(slider, valInput, onChangeFn, livePreview = true) {
     if (livePreview) {
       clearTimeout(previewDebounce);
       previewDebounce = setTimeout(updatePreview, 80);
+    } else {
+      _saveToLocalStorage();
     }
   });
   // Double-click resets to default value
@@ -1449,6 +1453,8 @@ function linkSlider(slider, valInput, onChangeFn, livePreview = true) {
     if (livePreview) {
       clearTimeout(previewDebounce);
       previewDebounce = setTimeout(updatePreview, 80);
+    } else {
+      _saveToLocalStorage();
     }
   });
   if (!isSpan) {
@@ -2932,10 +2938,11 @@ exportGoBtn.addEventListener('click', async () => {
   const includeModel = exportModelChk.checked && currentGeometry;
   const includeTexture = exportTextureChk.checked && activeMapEntry && activeMapEntry.isCustom;
 
+  const { useDisplacement: _, ...persistSettings } = settings;
   const data = {
     version: 1,
     texture: activeMapEntry ? activeMapEntry.name : null,
-    settings: { ...settings },
+    settings: persistSettings,
   };
 
   const zipFiles = {};
@@ -2998,41 +3005,44 @@ importInput.addEventListener('change', async (e) => {
 });
 
 async function importBumpmesh(file) {
+  const MAX_IMPORT_SIZE = 500 * 1024 * 1024; // 500 MB
+  if (file.size > MAX_IMPORT_SIZE) {
+    alert(t('alerts.importFailed', { msg: `File too large (${(file.size / 1024 / 1024).toFixed(1)} MB)` }));
+    return;
+  }
+
   const buf = await file.arrayBuffer();
   const unzipped = unzipSync(new Uint8Array(buf));
 
-  // 1. Settings
-  if (unzipped['settings.json']) {
-    const json = JSON.parse(strFromU8(unzipped['settings.json']));
-    if (json.settings) {
-      // Apply settings to sliders/controls
-      for (const [key, value] of Object.entries(json.settings)) {
-        if (key in settings) settings[key] = value;
-      }
-      // Update all UI elements to reflect new settings
-      _syncUIFromSettings();
-    }
-    // Select texture preset if it matches
-    if (json.texture && !unzipped['texture.png']) {
-      _selectPresetByName(json.texture);
-    }
-  }
+  const json = unzipped['settings.json']
+    ? JSON.parse(strFromU8(unzipped['settings.json']))
+    : null;
 
-  // 2. Model
+  // 1. Model first (handleModelFile resets some settings)
   if (unzipped['model.stl']) {
     const stlBlob = new Blob([unzipped['model.stl']], { type: 'application/octet-stream' });
     const stlFile = new File([stlBlob], 'model.stl');
     await handleModelFile(stlFile);
   }
 
-  // 3. Custom texture
+  // 2. Settings after model load (overrides any resets from handleModelFile)
+  if (json && json.settings) {
+    for (const [key, value] of Object.entries(json.settings)) {
+      if (key === 'useDisplacement') continue;
+      if (key in settings) settings[key] = value;
+    }
+    _syncUIFromSettings();
+  }
+
+  // 3. Texture preset or custom texture
   if (unzipped['texture.png']) {
     const texBlob = new Blob([unzipped['texture.png']], { type: 'image/png' });
     const texFile = new File([texBlob], 'custom-texture.png');
     activeMapEntry = await loadCustomTexture(texFile);
     activeMapEntry.isCustom = true;
-    // Update preview
     updatePreview();
+  } else if (json && json.texture) {
+    _selectPresetByName(json.texture);
   }
 }
 
@@ -3062,6 +3072,7 @@ function _syncUIFromSettings() {
     'seam-band-width': 'seamBandWidth',
     'texture-smoothing': 'textureSmoothing',
     'cap-angle': 'capAngle',
+    'boundary-falloff': 'boundaryFalloff',
   };
   for (const [sliderId, settingKey] of Object.entries(sliderMap)) {
     const slider = document.getElementById(sliderId);
@@ -3104,10 +3115,11 @@ function _selectPresetByName(name) {
 const STORAGE_KEY = 'bumpmesh-settings';
 
 function _saveToLocalStorage() {
+  const { useDisplacement: _, ...persistSettings } = settings;
   const data = {
     version: 1,
     texture: activeMapEntry ? activeMapEntry.name : null,
-    settings: { ...settings },
+    settings: persistSettings,
   };
   try { localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); } catch (e) { /* quota exceeded, ignore */ }
 }