@unvired/turboforms-embed-sdk 2.0.73 → 2.0.74

package/dist/turboforms.html

@@ -6758,13 +6758,21 @@
     font-weight: 600 !important;
     transition: all 0.2s ease !important;
     display: inline-block !important;
+    padding: 8px 16px !important;
+    margin-top: 4px !important;
+    border-radius: 6px !important;
+    touch-action: manipulation !important;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
+    user-select: none !important;
+    -webkit-user-select: none !important;
 }
 
-.tf-embed-sdk .formio-component-signature .signature-click-hint .signature-click-action:hover {
+.tf-embed-sdk .formio-component-signature .signature-click-hint .signature-click-action:hover,
+.tf-embed-sdk .formio-component-signature .signature-click-hint .signature-click-action:active {
     color: var(--tf-primary-color) !important;
     transform: scale(1.05) !important;
     opacity: 0.9 !important;
-    /* Slight pop effect */
+    background: rgba(0, 0, 0, 0.05) !important;
 }
 
 /* ── ICON REMAPPING (Bootstrap Icons fallback) ── */
@@ -27232,9 +27240,9 @@ function showLocationError(message) {
 </script>
     <script>
 document.addEventListener("openCamera", function (event) {
-  logger.info('[TF_SDK:229] ✅ openCamera event received', { controlId: event.detail.controlId });
+  const controlId = event.detail ? event.detail.controlId : null;
+  logger.info('[TF_SDK:229] ✅ openCamera event received', { controlId });
 
-  const { controlId } = event.detail;
   window.compId = controlId;
 
   // Check if we're in React Native WebView on iOS or Android
@@ -27244,13 +27252,14 @@ document.addEventListener("openCamera", function (event) {
 
   // If React Native on iOS/Android, send event to native side
   if (isReactNative) {
-    logger.info('[TF_SDK:230] ✅ Forwarding to React Native side');
+    logger.info('[TF_SDK:230] ✅ Forwarding to React Native WebView');
     window.ReactNativeWebView.postMessage(JSON.stringify({
       type: 'openCamera',
       controlId: controlId
     }));
     return;
   }
+
   logger.info('[TF_SDK:231] ✅ Opening browser camera modal');
   openCameraModal();
 });
@@ -27273,15 +27282,14 @@ function openCameraModal() {
   const modalHTML = `
   <div id="cameraModal">
     <div id="cameraContainer">
-      <video id="cameraVideo" playsinline webkit-playsinline muted style="opacity: 0; pointer-events: none;"></video>
       <div id="cameraLoader">
         <div class="loader-spinner"></div>
         <p class="loader-text">Starting camera...</p>
       </div>
       <div id="cameraOverlay">
-        <button id="closeCameraBtn" class="camera-close-btn">
+        <button id="closeCameraBtn" class="camera-close-btn" type="button" aria-label="Close">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-            <path d="M18 6L6 18M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round"/>
+            <path d="M18 6L6 18M6 6L18 18" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
           </svg>
         </button>
         <div class="camera-select-container">
@@ -27305,8 +27313,7 @@ function openCameraModal() {
     startCameraStream(e.target.value);
   });
 
-  // Small delay to ensure DOM is ready
-  setTimeout(startCameraStream, 100);
+  startCameraStream();
 }
 
 async function startCameraStream(deviceId = null) {
@@ -27320,9 +27327,6 @@ async function startCameraStream(deviceId = null) {
   }
 
   try {
-    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || (window.platform && window.platform.iosPlatform);
-
-    // Check if API is supported
     if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
       const errorMsg = "Camera API is not supported. Please ensure you are using HTTPS or localhost.";
       alert(errorMsg);
@@ -27330,37 +27334,22 @@ async function startCameraStream(deviceId = null) {
       return;
     }
 
-    const video = document.getElementById("cameraVideo");
-    if (!video) {
-      alert("Camera video element not found.");
+    const container = document.getElementById("cameraContainer");
+    if (!container) {
       return;
     }
 
-    // Simplified approach: Ask for camera directly. 
-    // This allows the browser to handle permissions correctly on all platforms (Windows/Android/iOS)
-    // and defaults to the system default camera (webcam) on laptops.
-    // Simplified approach: Ask for camera directly.
-    // We race against a timeout because WebViews often hang indefinitely if permissions aren't handled.
-    // OPTIMIZATION: Request 16:9 aspect ratio (1280x720) instead of 4:3 (640x480).
-    // This reduces the "zoom" effect on modern mobile screens which are typically 16:9 or taller.
     const constraints = {
-      video: {
-        width: { ideal: 1280 },
-        height: { ideal: 720 }
-      }
+      video: deviceId
+        ? { deviceId: { exact: deviceId } }
+        : { facingMode: { ideal: "environment" } }
     };
 
-    if (deviceId) {
-      constraints.video.deviceId = { exact: deviceId };
-    } else {
-      constraints.video.facingMode = "environment";
-    }
-
-    const streamPromise = navigator.mediaDevices.getUserMedia(constraints);
     logger.info('[TF_SDK:233] ✅ Requesting camera stream...', { deviceId });
 
+    const streamPromise = navigator.mediaDevices.getUserMedia(constraints);
     const timeoutPromise = new Promise((_, reject) =>
-      setTimeout(() => reject(new Error("PermissionTimeout")), 6000)
+      setTimeout(() => reject(new Error("PermissionTimeout")), 10000)
     );
 
     try {
@@ -27372,19 +27361,60 @@ async function startCameraStream(deviceId = null) {
       throw err;
     }
 
-    // iOS Specific: Ensure inline playback setup BEFORE stream assignment
-    if (isIOS) {
-      video.setAttribute("playsinline", "");
-      video.setAttribute("webkit-playsinline", "");
-      video.playsInline = true; // Set property as well
+    // Remove any previous video element
+    let video = document.getElementById("cameraVideo");
+    if (video) {
+      video.remove();
     }
 
-    // Mute video to prevent audio feedback and allow autoplay in restrictive policies
+    // Dynamically create <video> element with playsinline and muted attributes for iOS WebKit
+    video = document.createElement("video");
+    video.id = "cameraVideo";
+    video.setAttribute("playsinline", "");
+    video.setAttribute("webkit-playsinline", "");
+    video.setAttribute("autoplay", "");
+    video.setAttribute("muted", "");
+    video.setAttribute("disablepictureinpicture", "true");
+    video.setAttribute("controlslist", "nodownload nofullscreen noremoteplayback");
+    video.style.cssText = "width: 100%; height: 100%; object-fit: cover; background: #000; transition: opacity 0.3s ease; opacity: 0; pointer-events: none;";
+    video.playsInline = true;
     video.muted = true;
+    video.autoplay = true;
+    video.controls = false;
+    if ('disablePictureInPicture' in video) {
+      video.disablePictureInPicture = true;
+    }
+
+    // Intercept and enforce inline mode for iOS WebKit
+    video.addEventListener("playing", () => {
+      if (typeof video.webkitSetPresentationMode === 'function' && video.webkitPresentationMode !== 'inline') {
+        video.webkitSetPresentationMode('inline');
+      }
+    });
+    video.addEventListener("webkitbeginfullscreen", () => {
+      if (typeof video.webkitExitFullscreen === 'function') {
+        video.webkitExitFullscreen();
+      }
+      if (typeof video.webkitSetPresentationMode === 'function') {
+        video.webkitSetPresentationMode('inline');
+      }
+    });
+    video.addEventListener("webkitpresentationmodechanged", () => {
+      if (video.webkitPresentationMode === 'fullscreen') {
+        if (typeof video.webkitSetPresentationMode === 'function') {
+          video.webkitSetPresentationMode('inline');
+        }
+      }
+    });
+
+    // Insert video element at top of cameraContainer
+    container.insertBefore(video, container.firstChild);
+
+    let playInitiated = false;
+    const handleStreamLive = () => {
+      if (playInitiated) return;
+      playInitiated = true;
 
-    // Wait for video to start playing, then hide loader
-    video.onloadedmetadata = () => {
-      // Once permission is granted and stream starts, listing devices will return labels
       populateCameraDevices();
 
       const showUI = () => {
@@ -27409,29 +27439,34 @@ async function startCameraStream(deviceId = null) {
         cameraStarted = true;
         logger.info('[TF_SDK:235] ✅ Camera stream live');
       }).catch(err => {
-        logger.error("[TF_SDK:236] ❌ Video play error:", err);
-        if (!video.paused) {
-          logger.info("[TF_SDK:237] ✅ Video is playing despite error. Continuing.");
-          showUI();
-          cameraStarted = true;
-        } else {
-          alert("Failed to start video preview: " + err.message);
-          closeCameraModal();
-        }
+        logger.warn("[TF_SDK:236] ⚠️ Video play rejection handled:", err);
+        showUI();
+        cameraStarted = true;
       });
     };
 
-    // Ensure video doesn't stay paused if it somehow exits fullscreen or gets interrupted
+    video.onloadedmetadata = handleStreamLive;
+    video.onloadeddata = handleStreamLive;
+    video.oncanplay = handleStreamLive;
+
+    video.srcObject = videoStream;
+
+    if (video.readyState >= 1) {
+      handleStreamLive();
+    } else {
+      video.play().then(() => {
+        handleStreamLive();
+      }).catch(e => {
+        logger.info("[TF_SDK:234b] Direct play attempt promise caught:", e?.message);
+      });
+    }
+
     video.onpause = () => {
-      if (cameraStarted && video.srcObject) {
-        // Only try to resume if we expect it to be playing
-        video.play().catch(e => logger.info("[TF_SDK:234] ✅ Resume error", e));
+      if (cameraStarted && video.srcObject && video.paused) {
+        video.play().catch(e => logger.info("[TF_SDK:234] ✅ Resume handled:", e?.message));
       }
     };
 
-    // Assign stream
-    video.srcObject = videoStream;
-
   } catch (err) {
     logger.error("[TF_SDK:238] ❌ Camera start error:", err);
     let errorMessage = err.message || "Failed to start camera";
@@ -27683,12 +27718,13 @@ function injectCameraModalStyles() {
       position: absolute;
       top: 20px;
       left: 20px;
-      width: 44px;
-      height: 44px;
+      width: 48px;
+      height: 48px;
       border: none;
       border-radius: 50%;
-      background: rgba(0, 0, 0, 0.5);
+      background: rgba(0, 0, 0, 0.6);
       backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
       cursor: pointer;
       display: flex;
       align-items: center;
@@ -27696,9 +27732,10 @@ function injectCameraModalStyles() {
       transition: background 0.2s;
       pointer-events: auto;
       z-index: 10001;
+      -webkit-tap-highlight-color: transparent;
     }
-    .camera-close-btn:hover {
-      background: rgba(0, 0, 0, 0.7);
+    .camera-close-btn:hover, .camera-close-btn:active {
+      background: rgba(0, 0, 0, 0.8);
     }
 
     .camera-select-container {
@@ -27718,6 +27755,7 @@ function injectCameraModalStyles() {
         border-radius: 20px;
         font-size: 14px;
         backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
         outline: none;
         cursor: pointer;
         appearance: none;
@@ -27739,6 +27777,7 @@ function injectCameraModalStyles() {
       bottom: 40px;
       left: 50%;
       transform: translateX(-50%);
+      -webkit-transform: translateX(-50%);
       cursor: pointer;
       pointer-events: auto;
       z-index: 10001;
@@ -27753,12 +27792,13 @@ function injectCameraModalStyles() {
     .capture-ring {
       width: 80px;
       height: 80px;
-      border: 4px solid rgba(255, 255, 255, 0.3);
+      border: 4px solid rgba(255, 255, 255, 0.4);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.2s ease;
+      background: rgba(0, 0, 0, 0.2);
     }
 
     .capture-inner {
@@ -27769,13 +27809,15 @@ function injectCameraModalStyles() {
       transition: all 0.2s ease;
     }
 
-    #captureButton:hover .capture-ring {
-      border-color: rgba(255, 255, 255, 0.6);
-      transform: scale(1.1);
+    #captureButton:hover .capture-ring, #captureButton:active .capture-ring {
+      border-color: rgba(255, 255, 255, 0.8);
+      transform: scale(1.05);
+      -webkit-transform: scale(1.05);
     }
 
-    #captureButton:hover .capture-inner {
+    #captureButton:hover .capture-inner, #captureButton:active .capture-inner {
       transform: scale(0.9);
+      -webkit-transform: scale(0.9);
     }
 
     #captureButton.capturing .capture-ring {
@@ -27786,6 +27828,7 @@ function injectCameraModalStyles() {
     #captureButton.capturing .capture-inner {
       background: #4CAF50;
       transform: scale(0.7);
+      -webkit-transform: scale(0.7);
     }
 
     @keyframes captureFlash {
@@ -27794,21 +27837,24 @@ function injectCameraModalStyles() {
       100% { transform: scale(1); }
     }
 
-    /* Mobile optimizations */
+    /* Mobile & safe area inset optimizations */
     @media (max-width: 768px) {
       .camera-close-btn {
-        top: env(safe-area-inset-top, 20px);
-        top: max(20px, env(safe-area-inset-top));
+        top: 20px;
+        top: calc(20px + constant(safe-area-inset-top));
+        top: calc(20px + env(safe-area-inset-top));
       }
       
       #captureButton {
-        bottom: env(safe-area-inset-bottom, 40px);
-        bottom: max(40px, env(safe-area-inset-bottom));
+        bottom: 40px;
+        bottom: calc(40px + constant(safe-area-inset-bottom));
+        bottom: calc(40px + env(safe-area-inset-bottom));
       }
 
       .camera-select-container {
-        top: env(safe-area-inset-top, 20px);
-        top: max(20px, env(safe-area-inset-top));
+        top: 20px;
+        top: calc(20px + constant(safe-area-inset-top));
+        top: calc(20px + env(safe-area-inset-top));
       }
     }
 
@@ -29120,8 +29166,6 @@ class SmartStorage {
         }
       };
 
-      reader.onerror = (e) => reject(e);
-
       reader.readAsDataURL(file);
     });
   }
@@ -29136,17 +29180,23 @@ class SmartStorage {
         const trans = db.transaction(["Files"], "readwrite");
         const store = trans.objectStore("Files");
 
-        const req = store.delete(Id);
+        const getReq = store.get(Id);
 
-        req.onsuccess = () => {
-          trans.oncomplete = () => {
-            logger.info("[TF_SDK:217] ✅ File deleted from IndexedDB", { Id });
-            flag = true;
-            resolve(true);
-          };
+        getReq.onsuccess = () => {
+          const record = getReq.result;
+          if (record) {
+            record.mode = "D"; // Mark as Deleted ('D')
+            store.put(record, Id);
+          } else {
+            store.put({ id: Id, mode: "D" }, Id);
+          }
+        };
+
+        trans.oncomplete = () => {
+          logger.info("[TF_SDK:217] ✅ File marked as deleted (mode: D) in IndexedDB", { Id });
+          resolve(true);
         };
 
-        req.onerror = (e) => reject(e);
         trans.onerror = (e) => reject(e);
       } else {
         resolve(true);
@@ -29154,6 +29204,86 @@ class SmartStorage {
     });
   }
 
+  /**
+   * Update an existing file in IndexedDB in-place using the same key.
+   * Used when an image is edited (annotated/cropped) — keeps the same id
+   * and sets mode to 'A'.
+   */
+  async updateFile(existingId, file, fileName, progressCallback) {
+    logger.info("[TF_SDK:223] ✅ updateFile() called", { existingId, fileName, size: (file.size / 1024).toFixed(1) + " KB", type: file.type });
+    if (!existingId) {
+      logger.warn("[TF_SDK:223a] ⚠️ updateFile: no existingId provided, falling back to uploadFile");
+      return this.uploadFile(file, fileName, null, progressCallback);
+    }
+
+    const db = await this.createDb();
+    const reader = new FileReader();
+
+    return new Promise((resolve, reject) => {
+      if (typeof progressCallback === "function") {
+        progressCallback({ loaded: 0, total: file.size });
+      }
+
+      reader.onload = (e) => {
+        const blobObject = new Blob([file], { type: file.type });
+        const url = e.target.result;
+
+        const data = {
+          id: existingId,
+          data: blobObject,
+          name: fileName,
+          size: file.size,
+          type: file.type,
+          url,
+          mode: "A", // Mode 'A' for added/updated
+        };
+
+        if (this.isPlatform()) {
+          const trans = db.transaction(["Files"], "readwrite");
+          const store = trans.objectStore("Files");
+          const putReq = store.put(data, existingId);
+
+          putReq.onerror = (e) => {
+            logger.error("[TF_SDK:224] ❌ Error updating file in IndexedDB:", e);
+            reject(e);
+          };
+
+          trans.onerror = (e) => reject(e);
+
+          trans.oncomplete = () => {
+            logger.info("[TF_SDK:225] ✅ File updated in IndexedDB", { existingId, fileName });
+            if (typeof progressCallback === "function") {
+              progressCallback({ loaded: file.size, total: file.size });
+            }
+            resolve({
+              storage: "SmartStorage",
+              name: fileName,
+              size: file.size,
+              type: file.type,
+              url,
+              id: existingId,
+              mode: "A",
+            });
+          };
+        } else {
+          resolve({
+            storage: "SmartStorage",
+            name: fileName,
+            size: file.size,
+            type: file.type,
+            url,
+            id: existingId,
+            mode: "A",
+          });
+        }
+      };
+
+      reader.onerror = (e) => reject(e);
+
+      reader.readAsDataURL(file);
+    });
+  }
+
   // Download File from indexedDb
   async downloadFile(file) {
     logger.info("[TF_SDK:218] ✅ downloadFile() called", { id: file.id, name: file.originalName || file.name });
@@ -29351,6 +29481,168 @@ const getComponentSavedTypes = FormioUtils.getComponentSavedTypes;
 const componentValueTypes = FormioUtils.componentValueTypes;
 let replace = false;
 
+/**
+ * Directly update an existing file entry in the Forms-Attachments IndexedDB store
+ * using the same key (existingId), so the edited image overwrites the original in-place.
+ * This bypasses Formio's FileService wrapper which doesn't expose an update method.
+ *
+ * @param {string} existingId - The UUID key of the record to overwrite
+ * @param {Blob}   blob       - The new (edited) image blob
+ * @param {string} fileName   - Original file name
+ * @returns {Promise<{id, url, name, size, type, mode}>}
+ */
+function updateFileInIndexedDB(existingId, blob, fileName) {
+  logger.info(`[TF_SDK:IDB-U0] ✅ updateFileInIndexedDB called for id: ${existingId}, file: ${fileName}`);
+
+  if (!existingId) {
+    return Promise.reject(new Error('[TF_SDK] existingId is required for updateFileInIndexedDB'));
+  }
+  if (!blob) {
+    return Promise.reject(new Error('[TF_SDK] blob is required for updateFileInIndexedDB'));
+  }
+
+  return new Promise((resolve, reject) => {
+    const openReq = indexedDB.open('Forms-Attachments', 3);
+
+    openReq.onupgradeneeded = (e) => {
+      const db = e.target.result;
+      if (!db.objectStoreNames.contains('Files')) {
+        db.createObjectStore('Files');
+      }
+    };
+
+    openReq.onerror = () => reject(openReq.error);
+
+    openReq.onsuccess = (e) => {
+      const db = e.target.result;
+
+      if (!db.objectStoreNames.contains('Files')) {
+        db.close();
+        return reject(new Error('[TF_SDK] Files store not found in IndexedDB'));
+      }
+
+      const reader = new FileReader();
+      reader.onerror = () => reject(reader.error);
+
+      reader.onload = (evt) => {
+        const url = evt.target.result;
+
+        const data = {
+          id: existingId,
+          data: blob,
+          name: fileName,
+          size: blob.size,
+          type: blob.type,
+          url: url,
+          mode: 'A', // Mode 'A' for added/edited
+        };
+
+        try {
+          const tx = db.transaction(['Files'], 'readwrite');
+          const store = tx.objectStore('Files');
+
+          const putReq = store.put(data, existingId);
+
+          putReq.onerror = () => {
+            logger.error('[TF_SDK:IDB-U1] ❌ updateFileInIndexedDB put failed:', putReq.error);
+            db.close();
+            reject(putReq.error);
+          };
+
+          tx.oncomplete = () => {
+            logger.info(`[TF_SDK:IDB-U2] ✅ IndexedDB record updated in-place (mode=A): id=${existingId}, file=${fileName}`);
+            db.close();
+            resolve({ id: existingId, url, name: fileName, size: blob.size, type: blob.type, mode: 'A' });
+          };
+
+          tx.onerror = () => {
+            logger.error('[TF_SDK:IDB-U3] ❌ updateFileInIndexedDB transaction error:', tx.error);
+            db.close();
+            reject(tx.error);
+          };
+
+          tx.onabort = () => {
+            db.close();
+            reject(tx.error || new Error('Transaction aborted'));
+          };
+
+        } catch (err) {
+          logger.error('[TF_SDK:IDB-U4] ❌ Exception during transaction:', err);
+          db.close();
+          reject(err);
+        }
+      };
+
+      reader.readAsDataURL(blob);
+    };
+  });
+}
+
+function deleteFileInIndexedDB(existingId) {
+  logger.info(`[TF_SDK:IDB-D0] ✅ deleteFileInIndexedDB called for id: ${existingId}`);
+
+  if (!existingId) {
+    return Promise.reject(new Error('[TF_SDK] existingId is required for deleteFileInIndexedDB'));
+  }
+
+  return new Promise((resolve, reject) => {
+    const openReq = indexedDB.open('Forms-Attachments', 3);
+
+    openReq.onupgradeneeded = (e) => {
+      const db = e.target.result;
+      if (!db.objectStoreNames.contains('Files')) {
+        db.createObjectStore('Files');
+      }
+    };
+
+    openReq.onerror = () => reject(openReq.error);
+
+    openReq.onsuccess = (e) => {
+      const db = e.target.result;
+
+      if (!db.objectStoreNames.contains('Files')) {
+        db.close();
+        return reject(new Error('[TF_SDK] Files store not found in IndexedDB'));
+      }
+
+      try {
+        const tx = db.transaction(['Files'], 'readwrite');
+        const store = tx.objectStore('Files');
+        const getReq = store.get(existingId);
+
+        getReq.onsuccess = () => {
+          const record = getReq.result || { id: existingId };
+          record.mode = 'D'; // Mark mode as Deleted ('D')
+          store.put(record, existingId);
+        };
+
+        tx.oncomplete = () => {
+          logger.info(`[TF_SDK:IDB-D2] ✅ IndexedDB record marked mode='D': id=${existingId}`);
+          db.close();
+          resolve({ id: existingId, mode: 'D' });
+        };
+
+        tx.onerror = () => {
+          logger.error('[TF_SDK:IDB-D3] ❌ deleteFileInIndexedDB transaction error:', tx.error);
+          db.close();
+          reject(tx.error);
+        };
+
+      } catch (err) {
+        logger.error('[TF_SDK:IDB-D4] ❌ Exception during transaction:', err);
+        db.close();
+        reject(err);
+      }
+    };
+  });
+}
+
+if (typeof window !== 'undefined') {
+  window.updateFileInIndexedDB = updateFileInIndexedDB;
+  window.deleteFileInIndexedDB = deleteFileInIndexedDB;
+}
+
+
 let htmlCanvasElement;
 if (typeof window !== 'undefined') {
   htmlCanvasElement = window.HTMLCanvasElement;
@@ -29611,31 +29903,8 @@ class SmartFileComponent extends FieldComponent {
   }
 
   startVideo() {
-
-    this.getVideoStream()
-      .then((stream) => {
-        this.videoStream = stream;
-        const {
-          videoPlayer
-        } = this.refs;
-        if (!videoPlayer) {
-          logger.warn('[TF_SDK:72] ⚠️ Video player not found in template.');
-          this.cameraMode = false;
-          this.redraw();
-          return;
-        }
-
-        videoPlayer.srcObject = stream;
-        const width = parseInt(this.component.webcamSize) || 320;
-        videoPlayer.setAttribute('width', width);
-        videoPlayer.play();
-
-      })
-      .catch((err) => {
-        logger.error(err);
-        this.cameraMode = false;
-        this.redraw();
-      });
+    // Disabled in favor of CustomCamera modal to prevent iOS WebKit native video player popup
+    this._cameraMode = false;
   }
 
   stopVideo() {
@@ -29643,27 +29912,16 @@ class SmartFileComponent extends FieldComponent {
       this.stopVideoStream(this.videoStream);
       this.videoStream = null;
     }
+    this._cameraMode = false;
   }
 
   takePicture() {
-    const {
-      videoPlayer
-    } = this.refs;
-    if (!videoPlayer) {
-      logger.warn('[TF_SDK:73] ⚠️ Video player not found in template.');
-      this.cameraMode = false;
-      this.redraw();
-      return;
-    }
-
-    this.getFrame(videoPlayer)
-      .then((frame) => {
-        frame.name = `photo-${Date.now()}.png`;
-        replace = false;
-        this.processAndUpload([frame]);
-        this.cameraMode = false;
-        this.redraw();
-      });
+    // Forward to CustomCamera modal
+    let id = this.id;
+    let eventCustom = new CustomEvent("openCamera", {
+      detail: { controlId: id }
+    });
+    document.dispatchEvent(eventCustom);
   }
 
   browseFiles(attrs = {}) {
@@ -29693,16 +29951,11 @@ class SmartFileComponent extends FieldComponent {
   }
 
   set cameraMode(value) {
-    this._cameraMode = value;
-    if (value) {
-      this.startVideo();
-    } else {
-      this.stopVideo();
-    }
+    this._cameraMode = false;
   }
 
   get cameraMode() {
-    return this._cameraMode;
+    return false;
   }
 
   get useWebViewCamera() {
@@ -29819,8 +30072,17 @@ class SmartFileComponent extends FieldComponent {
         this.processAndUpload(processedFiles);
       });
       this.addEventListener(this.refs.fileDrop, 'click', (event) => {
-        // Ignore clicks if they were directly on the browse link or other anchors to avoid duplicate triggers
-        if (event.target.tagName === 'A' || event.target.closest('a')) {
+        // Ignore clicks if they were directly on links, buttons or camera controls to avoid duplicate triggers
+        if (
+          event.target.tagName === 'A' ||
+          event.target.closest('a') ||
+          event.target.closest('button') ||
+          (event.target.closest && (
+            event.target.closest('[ref="cameraButton"]') ||
+            event.target.closest('[ref="toggleCameraMode"]') ||
+            event.target.closest('[ref="galleryButton"]')
+          ))
+        ) {
           return;
         }
         event.preventDefault();
@@ -29930,32 +30192,50 @@ class SmartFileComponent extends FieldComponent {
     if (this.refs.cropImage) {
       this.refs.cropImage.forEach((cropImage, index) => {
         this.addEventListener(cropImage, 'click', (event) => {
-          const fileInfo = this.dataValue[index];
-          logger.info("[TF_SDK:79] ✅ cropImage clicked")
           let that = this;
-          const sampleImage = document.getElementsByClassName('fileImageData')
-          for (var i = 0; i < sampleImage.length; i++) {
-            if (sampleImage[i].alt == fileInfo.originalName && (sampleImage[i].id == fileInfo.compnentId || this.component.key == fileInfo.key)) {
-              showCropArea(sampleImage[i]);
+          const fileInfo = this.dataValue[index];
+          logger.info("[TF_SDK:79] ✅ cropImage clicked");
+
+          let targetImage = null;
+          if (that.refs.fileImage && that.refs.fileImage[index]) {
+            targetImage = that.refs.fileImage[index];
+          } else {
+            const sampleImage = document.getElementsByClassName('fileImageData');
+            for (var i = 0; i < sampleImage.length; i++) {
+              if (sampleImage[i].alt == fileInfo.originalName && (sampleImage[i].id == fileInfo.compnentId || that.component.key == fileInfo.key)) {
+                targetImage = sampleImage[i];
+                break;
+              }
+            }
+            if (!targetImage && sampleImage.length > 0) {
+              targetImage = sampleImage[0];
             }
           }
 
+          if (targetImage) {
+            showCropArea(targetImage);
+          } else {
+            logger.error('[TF_SDK:79a] ❌ Target image element not found for crop');
+          }
+
           function showCropArea(target) {
             new cropro.Activator.addKey('CRPR-P238-M097-0451');
             const cropArea = new cropro.CropArea(target);
             cropArea.displayMode = "popup";
+            cropArea.renderImageType = 'image/jpeg';
+            cropArea.renderImageQuality = 0.8;
             cropArea.styles.settings.toolbarBackgroundColor = '#2586c7';
             cropArea.styles.settings.toolbarBackgroundHoverColor = '#286f9f';
-            cropArea.addRenderEventListener((imgURL) => (
-              target.src = imgURL,
-              logger.info('[TF_SDK:80] ✅ cropped imgURL length =' + imgURL.length),
-              that.dataValue[index].url = imgURL,
-              b64CroppedImagetoBlob(imgURL.split(",")[1], 'image/jpeg', that.dataValue[index].originalName)
-            ));
+            cropArea.addRenderEventListener((imgURL) => {
+              target.src = imgURL;
+              logger.info('[TF_SDK:80] ✅ cropped imgURL length =' + imgURL.length);
+              that.dataValue[index].url = imgURL;
+              b64CroppedImagetoBlob(imgURL.split(",")[1], 'image/jpeg', that.dataValue[index].originalName);
+            });
             cropArea.show();
           }
 
-          function b64CroppedImagetoBlob(b64Data, contentType, originalName) {
+          async function b64CroppedImagetoBlob(b64Data, contentType, originalName) {
             var sliceSize = 512;
             var byteCharacters = atob(b64Data);
             var byteArrays = [];
@@ -29973,12 +30253,47 @@ class SmartFileComponent extends FieldComponent {
             }
 
             var blob = new Blob(byteArrays, {
-              type: contentType
+              type: contentType || 'image/jpeg'
             });
-            blob.name = originalName
-            logger.info(`[TF_SDK:81] ✅ Cropped Image file size ${blob.size / 1024 / 1024} MB`);
-            replace = true;
-            that.handleFilesToUpload([blob]);
+            blob.name = originalName;
+
+            if (typeof imageCompression === 'function') {
+              try {
+                const compressedBlob = await imageCompression(blob, { maxSizeMB: 0.2, maxWidthOrHeight: 1600, useWebWorker: true });
+                compressedBlob.name = originalName;
+                logger.info(`[TF_SDK:81] ⚡ Compressed cropped image: ${blob.size} -> ${compressedBlob.size} bytes`);
+                blob = compressedBlob;
+              } catch (e) {
+                logger.warn('[TF_SDK:81a] ⚠️ Compression failed:', e);
+              }
+            }
+
+            logger.info(`[TF_SDK:81b] ✅ Cropped Image file size ${blob.size / 1024 / 1024} MB`);
+
+            // 🔄 Update IndexedDB in-place with the same key so the id in dataValue stays valid
+            const existingFileInfo = that.dataValue[index];
+            const existingId = existingFileInfo && existingFileInfo.id;
+
+            if (existingId) {
+              updateFileInIndexedDB(existingId, blob, originalName).then((updatedInfo) => {
+                logger.info(`[TF_SDK:81c] ✅ IndexedDB updated in-place (crop) for: ${originalName}`);
+                // Keep same id, just patch url/size/mode so dataValue stays consistent
+                that.dataValue[index] = {
+                  ...that.dataValue[index],
+                  url: updatedInfo.url,
+                  size: updatedInfo.size,
+                  mode: updatedInfo.mode,
+                  originalName: originalName,
+                };
+                that.triggerChange?.({ modified: true });
+                that.redraw();
+              }).catch((err) => {
+                logger.error(`[TF_SDK:81d] ❌ updateFileInIndexedDB (crop) failed:`, err);
+              });
+            } else {
+              logger.warn(`[TF_SDK:81e] ⚠️ No existingId found for crop update (index=${index})`);
+            }
+
           }
         });
       });
@@ -29988,62 +30303,110 @@ class SmartFileComponent extends FieldComponent {
     if (this.refs.annotateImage) {
       this.refs.annotateImage.forEach((annotateImage, index) => {
         this.addEventListener(annotateImage, 'click', (event) => {
+          let that = this; // ✅ FIX: capture 'this' so inner functions can reference it
           const fileInfo = this.dataValue[index];
-          logger.info("[TF_SDK:82] ✅ annotateImage clicked")
-          const sampleImage = document.getElementsByClassName('fileImageData')
-          for (var i = 0; i < sampleImage.length; i++) {
-            if (sampleImage[i].alt == fileInfo.originalName && (sampleImage[i].id == fileInfo.compnentId || this.component.key == fileInfo.key)) {
-              showMarkerArea(sampleImage[i]);
+          logger.info("[TF_SDK:82] ✅ annotateImage clicked");
+
+          let targetImage = null;
+          if (that.refs.fileImage && that.refs.fileImage[index]) {
+            targetImage = that.refs.fileImage[index];
+          } else {
+            const sampleImage = document.getElementsByClassName('fileImageData');
+            for (var i = 0; i < sampleImage.length; i++) {
+              if (sampleImage[i].alt == fileInfo.originalName && (sampleImage[i].id == fileInfo.compnentId || that.component.key == fileInfo.key)) {
+                targetImage = sampleImage[i];
+                break;
+              }
+            }
+            if (!targetImage && sampleImage.length > 0) {
+              targetImage = sampleImage[0];
             }
           }
 
-        }, false)
+          if (targetImage) {
+            showMarkerArea(targetImage);
+          } else {
+            logger.error('[TF_SDK:82a] ❌ Target image element not found for annotate');
+          }
 
-        function showMarkerArea(target) {
-          new markerjs2.Activator.addKey('MJS2-P013-M397-4100');
-          const markerArea = new markerjs2.MarkerArea(target);
-          // open the editor in a popup
-          markerArea.settings.displayMode = 'popup';
-          markerArea.uiStyleSettings.toolbarBackgroundColor = '#2586c7';
-          markerArea.uiStyleSettings.toolbarBackgroundHoverColor = '#286f9f';
-          markerArea.addRenderEventListener((imgURL) =>
-          (
-            target.src = imgURL,
-            that.dataValue[index].url = imgURL,
-            b64AnnotatedImagetoBlob(imgURL.split(",")[1], 'image/jpeg', that.dataValue[index].originalName)
-          ));
-          markerArea.show();
-        }
+          function showMarkerArea(target) {
+            new markerjs2.Activator.addKey('MJS2-P013-M397-4100');
+            const markerArea = new markerjs2.MarkerArea(target);
+            // open the editor in a popup
+            markerArea.settings.displayMode = 'popup';
+            markerArea.uiStyleSettings.toolbarBackgroundColor = '#2586c7';
+            markerArea.uiStyleSettings.toolbarBackgroundHoverColor = '#286f9f';
+            markerArea.addRenderEventListener((imgURL) => {
+              target.src = imgURL;
+              that.dataValue[index].url = imgURL;
+              b64AnnotatedImagetoBlob(imgURL.split(",")[1], 'image/jpeg', that.dataValue[index].originalName);
+            });
+            markerArea.show();
+          }
 
 
-        function b64AnnotatedImagetoBlob(b64Data, contentType, originalName) {
-          contentType = contentType || '';
-          var sliceSize = 512;
-          var byteCharacters = atob(b64Data);
-          var byteArrays = [];
+          async function b64AnnotatedImagetoBlob(b64Data, contentType, originalName) {
+            contentType = contentType || 'image/jpeg';
+            var sliceSize = 512;
+            var byteCharacters = atob(b64Data);
+            var byteArrays = [];
 
-          for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
-            var slice = byteCharacters.slice(offset, offset + sliceSize);
+            for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+              var slice = byteCharacters.slice(offset, offset + sliceSize);
 
-            var byteNumbers = new Array(slice.length);
-            for (var i = 0; i < slice.length; i++) {
-              byteNumbers[i] = slice.charCodeAt(i);
+              var byteNumbers = new Array(slice.length);
+              for (var i = 0; i < slice.length; i++) {
+                byteNumbers[i] = slice.charCodeAt(i);
+              }
+
+              var byteArray = new Uint8Array(byteNumbers);
+
+              byteArrays.push(byteArray);
             }
 
-            var byteArray = new Uint8Array(byteNumbers);
+            var blob = new Blob(byteArrays, {
+              type: contentType
+            });
+            blob.name = originalName;
+
+            if (typeof imageCompression === 'function') {
+              try {
+                const compressedBlob = await imageCompression(blob, { maxSizeMB: 0.2, maxWidthOrHeight: 1600, useWebWorker: true });
+                compressedBlob.name = originalName;
+                logger.info(`[TF_SDK:83] ⚡ Compressed annotated image: ${blob.size} -> ${compressedBlob.size} bytes`);
+                blob = compressedBlob;
+              } catch (e) {
+                logger.warn('[TF_SDK:83a] ⚠️ Compression failed:', e);
+              }
+            }
 
-            byteArrays.push(byteArray);
-          }
+            logger.info(`[TF_SDK:83b] ✅ Annotated Image file size ${blob.size / 1024 / 1024} MB`);
 
-          var blob = new Blob(byteArrays, {
-            type: contentType
-          });
-          blob.name = originalName;
-          logger.info(`[TF_SDK:83] ✅ Annotatted Image file size ${blob.size / 1024 / 1024} MB`);
-          replace = true;
-          that.handleFilesToUpload([blob]);
+            // 🔄 Update IndexedDB in-place with the same key so the id in dataValue stays valid
+            const existingFileInfo = that.dataValue[index];
+            const existingId = existingFileInfo && existingFileInfo.id;
 
-        }
+            if (existingId) {
+              updateFileInIndexedDB(existingId, blob, originalName).then((updatedInfo) => {
+                logger.info(`[TF_SDK:83c] ✅ IndexedDB updated in-place (annotate) for: ${originalName}`);
+                // Keep same id, just patch url/size/mode
+                that.dataValue[index] = {
+                  ...that.dataValue[index],
+                  url: updatedInfo.url,
+                  size: updatedInfo.size,
+                  mode: updatedInfo.mode,
+                  originalName: originalName,
+                };
+                that.triggerChange?.({ modified: true });
+                that.redraw();
+              }).catch((err) => {
+                logger.error(`[TF_SDK:83d] ❌ updateFileInIndexedDB (annotate) failed:`, err);
+              });
+            } else {
+              logger.warn(`[TF_SDK:83e] ⚠️ No existingId found for annotate update (index=${index})`);
+            }
+          }
+        });
       });
     }
 
@@ -30114,68 +30477,50 @@ class SmartFileComponent extends FieldComponent {
     if (this.refs.cameraButton) {
       this.addEventListener(this.refs.cameraButton, 'click', (event) => {
         event.preventDefault();
-        if (webViewCamera) {
-          webViewCamera.getPicture((success) => {
-            window.resolveLocalFileSystemURL(success, (fileEntry) => {
-              fileEntry.file((file) => {
-                const reader = new FileReader();
-                reader.onloadend = (evt) => {
-                  const blob = new Blob([new Uint8Array(evt.target.result)], {
-                    type: file.type
-                  });
-                  blob.name = file.name;
-                  replace = false;
-                  this.processAndUpload([blob]);
-                };
-                reader.readAsArrayBuffer(file);
-              });
-            });
-          }, (err) => {
-            logger.error(err);
-          }, {
-            sourceType: webViewCamera.PictureSourceType.CAMERA,
-            encodingType: webViewCamera.EncodingType.PNG,
-            mediaType: webViewCamera.MediaType.PICTURE,
-            saveToPhotoAlbum: true,
-            correctOrientation: false,
-          });
-        } else {
-          let id = this.id;
-          isfileBrowse = false;
-          window.isListenerSet = false;
-          let eventCustom = new CustomEvent("openCamera", {
-            detail: {
-              controlId: id,
-            },
-          });
-
-          if (window.parent && window.parent !== window) {
-            window.parent.postMessage(
-              {
-                type: "OPEN_CAMERA",
-                data: { controlId: id },
-                status: "sucess",
-                message: "camera triggerd",
-              },
-              "*"
-            );
-          }
+        event.stopPropagation();
+        if (typeof event.stopImmediatePropagation === 'function') {
+          event.stopImmediatePropagation();
+        }
+        let id = this.id;
+        isfileBrowse = false;
+        window.isListenerSet = false;
+        let eventCustom = new CustomEvent("openCamera", {
+          detail: {
+            controlId: id,
+          },
+        });
 
-          logger.info("[TF_SDK] ✅ Dispatching openCamera event for controlId:", id);
-          document.dispatchEvent(eventCustom);
+        if (window.parent && window.parent !== window) {
+          window.parent.postMessage(
+            {
+              type: "OPEN_CAMERA",
+              data: { controlId: id },
+              status: "sucess",
+              message: "camera triggerd",
+            },
+            "*"
+          );
         }
+
+        logger.info("[TF_SDK:84a] ✅ Dispatching openCamera event for controlId:", id);
+        document.dispatchEvent(eventCustom);
       });
     }
 
     if (this.refs.takePictureButton) {
       this.addEventListener(this.refs.takePictureButton, 'click', (event) => {
         event.preventDefault();
+        event.stopPropagation();
         this.takePicture();
       });
     }
     if (this.refs.toggleCameraMode) {
       this.addEventListener(this.refs.toggleCameraMode, 'click', (event) => {
         event.preventDefault();
+        event.stopPropagation();
+        if (typeof event.stopImmediatePropagation === 'function') {
+          event.stopImmediatePropagation();
+        }
         let id = this.id;
         isfileBrowse = false;
         window.isListenerSet = false;
@@ -30246,8 +30591,7 @@ class SmartFileComponent extends FieldComponent {
     }
     let that = this;
     this.addEventListener(document, 'capureImageData', function (event) {
-      logger.info("[TF_SDK:84] ✅ event.detail.controlId =" + event.detail.controlId)
-      if (that.id == event.detail.controlId) {
+      if (that.id == event.detail?.controlId) {
         if (!window.isListenerSet) {
           const isBase64 = typeof event.detail.imageData === 'string' && event.detail.imageData.startsWith('data:');
           if (isBase64 || typeof window.resolveLocalFileSystemURL !== 'function') {
@@ -30871,6 +31215,12 @@ class SmartFileComponent extends FieldComponent {
         : this.t('Preparing file to remove'),
     });
 
+    if (fileInfo && fileInfo.id) {
+      deleteFileInIndexedDB(fileInfo.id).catch((err) => {
+        logger.warn(`[TF_SDK:102c] ⚠️ Failed to mark file mode='D' in IndexedDB:`, err);
+      });
+    }
+
     const index = this.dataValue.findIndex((file) => 
       file === fileInfo || 
       (file.id && file.id === fileInfo.id) || 
@@ -31120,23 +31470,33 @@ class SmartFileComponent extends FieldComponent {
 
       logger.info(`[TF_SDK:110] ✅ syncFiles succeeded for ${data.length} new files`);
       if (replace) {
-        let ind;
-        for (let i = 0; i < this.dataValue.length; i++) {
-          if (this.dataValue[i].originalName == fileInfo.originalName) {
-            logger.info("[TF_SDK:111] ✅ original name matches")
-            ind = i;
-          }
-        }
-        if (ind !== -1) {
-          let originalFileId = this.dataValue[ind].id;
-          logger.info("[TF_SDK:112] ✅ originalFileId =" + originalFileId)
-          this.dataValue[ind] = fileInfo;
-          let eventCustom = new CustomEvent('deleteOriginalFileFromDB', {
-            detail: {
-              fileId: originalFileId,
+        replace = false; // Reset flag immediately to avoid stale state on future uploads
+        const editedFileInfo = data[0]; // The newly stored edited image from IndexedDB
+        if (!editedFileInfo) {
+          logger.warn("[TF_SDK:111a] ⚠️ replace=true but no fileInfo available — skipping replace");
+        } else {
+          let ind = undefined;
+          for (let i = 0; i < this.dataValue.length; i++) {
+            if (this.dataValue[i].originalName == editedFileInfo.originalName) {
+              logger.info("[TF_SDK:111] ✅ original name matches at index " + i);
+              ind = i;
             }
-          });
-          document.dispatchEvent(eventCustom);
+          }
+          if (ind !== undefined) {
+            let originalFileId = this.dataValue[ind].id;
+            logger.info("[TF_SDK:112] ✅ originalFileId =" + originalFileId + ", replacing with new id =" + editedFileInfo.id);
+            this.dataValue[ind] = editedFileInfo;
+            // Delete the old IndexedDB entry since the edited image is stored under a new id
+            let eventCustom = new CustomEvent('deleteOriginalFileFromDB', {
+              detail: {
+                fileId: originalFileId,
+              }
+            });
+            document.dispatchEvent(eventCustom);
+          } else {
+            logger.warn("[TF_SDK:112a] ⚠️ Could not find original file to replace in dataValue for: " + editedFileInfo.originalName);
+            this.dataValue.push(editedFileInfo);
+          }
         }
       } else {
         this.dataValue.push(...data);
@@ -33799,47 +34159,11 @@ class SmartSelectComponent extends SmartSelectField {
     });
 
     this.addEventListener(input, 'showDropdown', () => {
-      const container = document.getElementById('form-container');
-      const currentScroll = container ? container.scrollTop : 0;
-
       if (!this.activated) {
         this.update();
       }
       this.positionDropdown();
 
-      // Ensure select is visible above keyboard on iOS
-      if (window.platform && window.platform.iosPlatform) {
-        // We removed native scrollIntoView as it interferes with manual scroll control in focus.js
-        // focus.js handles the centering now.
-      }
-
-      // Restore and lock scroll on iPad to prevent "flicker" shifts during keyboard toggles
-      if (container && currentScroll > 0 && window.platform && window.platform.iosPlatform) {
-        // Immediate restoration
-        container.scrollTop = currentScroll;
-
-        // Follow-up restoration for async layout shifts
-        requestAnimationFrame(() => {
-          container.scrollTop = currentScroll;
-        });
-
-        // Periodical restoration during the typical keyboard transition time (300ms)
-        let count = 0;
-        const interval = setInterval(() => {
-          if (container.scrollTop !== currentScroll) {
-            container.scrollTop = currentScroll;
-          }
-          if (++count > 10) clearInterval(interval);
-        }, 30);
-      } else if (container && currentScroll > 0) {
-        // Standard restoration for other platforms
-        requestAnimationFrame(() => {
-          if (container.scrollTop === 0) {
-            container.scrollTop = currentScroll;
-          }
-        });
-      }
-
       if ((this.component.dataSrc === 'masterdata') && this.component.masterdata) {
         this.component.dropdownOpened = true;
         // Force reloading the full list if we currently only have a partial list (e.g. filtered down on hideDropdown)
@@ -33854,6 +34178,22 @@ class SmartSelectComponent extends SmartSelectField {
         this.positionDropdown();
       });
     }
+
+    this.addEventListener(input, 'hideDropdown', () => {
+      if ((this.component.dataSrc === 'masterdata') && this.component.masterdata) {
+        this.component.dropdownOpened = false;
+      }
+    });
+
+    this.addEventListener(input, 'search', (event) => {
+      if ((this.component.dataSrc === 'masterdata') && this.component.masterdata) {
+        this.searchDownloadedResources = this.filteredMasterdata.filter(data => {
+          return data[this.component.searchField].toLowerCase().includes(event.detail.value.toLowerCase())
+        })
+        this.isFromSearch = true;
+      }
+    });
+
     if (this.choices && choicesOptions.placeholderValue && this.choices._isSelectOneElement) {
       this.addPlaceholderItem(choicesOptions.placeholderValue);
 
@@ -33922,14 +34262,38 @@ class SmartSelectComponent extends SmartSelectField {
     }
 
     if (!dropdown || !container) {
+      console.warn('[TF_SELECT_LOG:ERR] ⚠️ dropdown or container element not found in setDropdownPosition');
       return;
     }
 
     const containerPosition = container.getBoundingClientRect();
-    const isFlipped = container.classList.contains('is-flipped');
-
     const vpH = window.visualViewport ? window.visualViewport.height : window.innerHeight;
-    const top = isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height;
+    const spaceBelow = vpH - (containerPosition.top + containerPosition.height);
+    const spaceAbove = containerPosition.top;
+
+    // Auto-flip upwards if not enough room below and more room above
+    let isFlipped = container.classList.contains('is-flipped');
+    if (!isFlipped && spaceBelow < 180 && spaceAbove > spaceBelow) {
+      isFlipped = true;
+      container.classList.add('is-flipped');
+      dropdown.classList.add('is-flipped');
+    } else if (isFlipped && spaceBelow >= 200) {
+      isFlipped = false;
+      container.classList.remove('is-flipped');
+      dropdown.classList.remove('is-flipped');
+    }
+
+    const dropdownHeight = dropdown.offsetHeight || 220;
+    let top;
+    let maxHeight;
+
+    if (isFlipped) {
+      maxHeight = Math.min(dropdownHeight, Math.max(120, spaceAbove - 20));
+      top = Math.max(10, containerPosition.top - maxHeight);
+    } else {
+      top = containerPosition.top + containerPosition.height;
+      maxHeight = Math.max(120, Math.min(dropdownHeight, vpH - top - 15));
+    }
 
     const style = {
       left: `${containerPosition.left}px`,
@@ -33938,18 +34302,9 @@ class SmartSelectComponent extends SmartSelectField {
       bottom: 'unset',
       right: 'unset',
       top: `${top}px`,
+      maxHeight: `${maxHeight}px`,
     };
 
-    // On iOS, we limit the max-height of the fixed dropdown to stay within the viewport.
-    // We also use a scroll listener on the wrapper (added in attach()) to ensure this fixed 
-    // element re-positions during scrolling, making it behave like an absolute element.
-    if (window.platform && window.platform.iosPlatform) {
-      // Limit max-height to available space but ensure at least 300px for a good scroll area.
-      // We subtract 30px to leave a small gap at the bottom for better visibility.
-      const availableHeight = isFlipped ? top - 20 : vpH - top - 30;
-      style.maxHeight = `${Math.max(availableHeight, 300)}px`;
-    }
-
     _.assign(dropdown.style, style);
   }
 
@@ -38249,49 +38604,39 @@ let isKeyboardOpen = false;
 let activeElement = null;
 const INITIAL_WINDOW_HEIGHT = window.innerHeight;
 
-logger.info("[TF_SDK:254] ✅ Script initialized. Initial Height:", INITIAL_WINDOW_HEIGHT);
+function isIOSDevice() {
+    return /iPad|iPhone|iPod/.test(navigator.userAgent) || 
+           (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) || 
+           Boolean(window.platform && window.platform.iosPlatform);
+}
 
-// SOFT LOCK
-window.addEventListener('scroll', () => {
-    if (isKeyboardOpen && Math.abs(window.scrollY) > 20) {
-        window.scrollTo(0, 0);
-    }
-}, { passive: true });
+logger.info("[TF_SDK:254] ✅ Focus script initialized. Initial Height:", INITIAL_WINDOW_HEIGHT, "isIOS:", isIOSDevice());
 
 // Close flatpickr (date components) if user scrolls any container (like ion-content in Ionic)
 function closeOpenFlatpickrs(e) {
-    // Ignore scrolls inside the flatpickr calendar itself (e.g., year scroll)
     if (e && e.target && e.target.closest && e.target.closest('.flatpickr-calendar')) {
         return;
     }
     const openPicker = document.querySelector('.flatpickr-calendar.open, .flatpickr-calendar.show');
     if (openPicker) {
-        // Method 1: Blur active element
         if (document.activeElement && typeof document.activeElement.blur === 'function') {
             document.activeElement.blur();
         }
-        // Method 2: Call flatpickr instance close() directly
         document.querySelectorAll('input').forEach(input => {
             if (input._flatpickr && typeof input._flatpickr.close === 'function') {
                 input._flatpickr.close();
             }
         });
-        // Method 3: Simulate click outside
         document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
     }
 }
 
 window.addEventListener('scroll', closeOpenFlatpickrs, true);
-// Ionic's ion-content uses Shadow DOM, meaning native 'scroll' events do not bubble out of it.
-// To reliably detect scrolling in Ionic, we use wheel and touchmove events globally.
 window.addEventListener('wheel', closeOpenFlatpickrs, { capture: true, passive: true });
 window.addEventListener('touchmove', closeOpenFlatpickrs, { capture: true, passive: true });
 
 function updateFooterVisibility(keyboardOpen) {
-    // Only hide the footer on iOS to make room for the software keyboard.
-    // On Windows/Desktop, we should keep the footer visible at all times.
-    const isIOS = (window.platform && window.platform.iosPlatform);
-    if (!isIOS) return;
+    if (!isIOSDevice()) return;
 
     const footer = document.getElementById('sticky-footer');
     if (!footer) return;
@@ -38303,126 +38648,127 @@ function updateFooterVisibility(keyboardOpen) {
     }
 }
 
+function centerActiveElement() {
+    if (!isIOSDevice() || !activeElement) return;
+
+    const target = activeElement.closest('.formio-component') || activeElement;
+    const vpH = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+    const rect = target.getBoundingClientRect();
+
+    // If this is a select component, check if its dropdown is active or opening
+    const dropdown = target.querySelector('.choices__list--dropdown.is-active, .choices__list--dropdown');
+    const isSelect = Boolean(dropdown || target.querySelector('.choices'));
+    const dropdownHeight = (isSelect && dropdown) ? Math.max(140, dropdown.offsetHeight || 140) : 0;
+
+    const effectiveBottom = rect.bottom + dropdownHeight;
+    const isHiddenUnderKeyboard = effectiveBottom > (vpH - 15);
+    const isScrolledAboveTop = rect.top < 0;
+
+    // If element is already fully visible in the viewport, do NOT scroll
+    if (!isHiddenUnderKeyboard && !isScrolledAboveTop) {
+        return;
+    }
+
+    if (typeof target.scrollIntoView === 'function') {
+        const align = (isSelect && isHiddenUnderKeyboard) ? 'center' : 'nearest';
+        target.scrollIntoView({ behavior: 'smooth', block: align, inline: 'nearest' });
+    }
+
+    const wrapper = document.getElementById('formio-wrapper');
+    if (wrapper && wrapper.scrollHeight > wrapper.clientHeight) {
+        let offsetTop = 0;
+        let curr = target;
+        while (curr && curr !== wrapper && curr !== null) {
+            offsetTop += curr.offsetTop;
+            curr = curr.offsetParent;
+        }
+        if (isHiddenUnderKeyboard) {
+            const targetScroll = offsetTop - (vpH - target.offsetHeight - dropdownHeight - 20);
+            wrapper.scrollTo({ top: Math.max(0, targetScroll), behavior: 'smooth' });
+        } else if (isScrolledAboveTop) {
+            wrapper.scrollTo({ top: Math.max(0, offsetTop - 20), behavior: 'smooth' });
+        }
+    }
+}
+
 // Track focused input
 document.addEventListener('focusin', (e) => {
+    if (!isIOSDevice()) return;
+
     const el = e.target;
     if (!el || !['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName)) return;
     
-    logger.info("[TF_SDK:255] ✅ focusin on:", el.name || el.id || el.tagName);
     updateFooterVisibility(true);
 
     activeElement = el;
 
-    // Special handling for Choices.js: if an input inside choices is focused,
-    // we want to ensure the whole container is considered the active element for centering
-    if (el.classList.contains('choices__input')) {
-        const container = el.closest('.choices');
+    if (el.classList.contains('choices__input') || el.closest('.choices')) {
+        const container = el.closest('.choices') || el.closest('.formio-component-barcodeselect') || el.closest('.formio-component-select');
         if (container) {
             activeElement = container;
-            logger.info("[TF_SDK:256] ✅ Choices.js detected, centering container.");
         }
     }
 
-    if (isKeyboardOpen) {
-        logger.info("[TF_SDK:257] ✅ Already open, centering now.");
-        centerActiveElement();
-    }
+    // Scroll element into view with multiple staggered triggers for smooth iOS animation
+    setTimeout(centerActiveElement, 100);
+    setTimeout(centerActiveElement, 350);
 });
 
 // Restore footer when focus is lost and keyboard is not open
 document.addEventListener('focusout', (e) => {
+    if (!isIOSDevice()) return;
+
     setTimeout(() => {
         const currentlyFocused = document.activeElement;
         const isInputFocused = currentlyFocused && ['INPUT', 'TEXTAREA', 'SELECT'].includes(currentlyFocused.tagName);
         
         if (!isInputFocused && !isKeyboardOpen) {
-            logger.info("[TF_SDK:258] ✅ focusout and keyboard closed, restoring footer.");
             updateFooterVisibility(false);
         }
-    }, 200);
+    }, 250);
 });
 
-// Detect keyboard open/close
+// Detect keyboard open/close via visualViewport
 if (window.visualViewport) {
     window.visualViewport.addEventListener('resize', () => {
-        const isIOS = (window.platform && window.platform.iosPlatform);
-        if (!isIOS) return;
+        if (!isIOSDevice()) return;
 
         const viewport = window.visualViewport;
         const vpH = viewport.height;
-        const isNowOpen = vpH < INITIAL_WINDOW_HEIGHT - 100; 
+        const isNowOpen = (vpH < INITIAL_WINDOW_HEIGHT - 60) || (vpH < screen.height - 150);
 
         if (isNowOpen) {
-            const wasAlreadyOpen = isKeyboardOpen;
             isKeyboardOpen = true;
             updateFooterVisibility(true);
             
-            if (activeElement && !wasAlreadyOpen) {
-                logger.info("[TF_SDK:259] ✅ Keyboard sliding. Following...");
-                startFollowingElement();
+            if (activeElement) {
+                setTimeout(centerActiveElement, 150);
+                setTimeout(centerActiveElement, 350);
             }
         } else {
             isKeyboardOpen = false;
             updateFooterVisibility(false);
-            window.scrollTo(0, 0); 
         }
     });
 }
 
-// Manually follow the element for a short duration to ensure it stays centered during animation
-function startFollowingElement() {
-    let start = Date.now();
-    const duration = 400; // Follow for 400ms (typical iOS keyboard duration)
-
-    function step() {
-        centerActiveElement();
-        if (Date.now() - start < duration) {
-            requestAnimationFrame(step);
-        }
-    }
-    requestAnimationFrame(step);
-}
-
-function centerActiveElement() {
-    if (!activeElement) return;
-    const wrapper = document.getElementById('formio-wrapper');
-    if (!wrapper) return;
-
-    const vpH = window.visualViewport ? window.visualViewport.height : window.innerHeight;
-    
-    // Calculate absolute offset of element relative to wrapper
-    let offsetTop = 0;
-    let curr = activeElement;
-    while (curr && curr !== wrapper && curr !== null) {
-        offsetTop += curr.offsetTop;
-        curr = curr.offsetParent;
-    }
-
-    // For Choices.js, if the dropdown is open, we might want to adjust centering 
-    // to ensure the dropdown is visible. However, centering the container is usually best.
-    const elementHeight = activeElement.offsetHeight;
+// Listen for Choices.js events to ensure dropdown options are fully visible
+document.addEventListener('showDropdown', (e) => {
+    if (!isIOSDevice()) return;
 
-    // targetScroll = (distance from top) - (half of available space) + (half of element height)
-    const targetScroll = offsetTop - (vpH / 2) + (elementHeight / 2);
-    
-    // Apply instantly but accurately
-    if (Math.abs(wrapper.scrollTop - targetScroll) > 5) {
-        wrapper.scrollTop = targetScroll;
-    }
-}
-
-// Listen for Choices.js events to re-center when dropdown opens/closes
-document.addEventListener('showDropdown', () => {
-    if (isKeyboardOpen) {
-        logger.info("[TF_SDK:260] ✅ showDropdown detected, re-centering.");
-        setTimeout(centerActiveElement, 100);
+    const el = e.target;
+    const comp = (el && el.closest) ? (el.closest('.formio-component-barcodeselect, .formio-component-select, .formio-component') || el) : activeElement;
+    if (comp) {
+        activeElement = comp;
+        setTimeout(centerActiveElement, 50);
+        setTimeout(centerActiveElement, 200);
+        setTimeout(centerActiveElement, 400);
     }
 }, true);
 
 document.addEventListener('hideDropdown', () => {
-    logger.info("[TF_SDK:261] ✅ hideDropdown detected, resetting view.");
-    // When dropdown hides, we might want to center the closed select again
-    setTimeout(centerActiveElement, 100);
+    if (!isIOSDevice()) return;
+    setTimeout(centerActiveElement, 80);
 }, true);
 
 // ============================================  AUTOFOCUS FIX   =======================================================
@@ -40691,6 +41037,8 @@ function processFilePreviewsAndErrors(comp) {
                             tempImg.onload = () => {
                                 const cropArea = new cropro.CropArea(tempImg);
                                 cropArea.displayMode = 'popup';
+                                cropArea.renderImageType = 'image/jpeg';
+                                cropArea.renderImageQuality = 0.8;
                                 cropArea.renderAtNaturalSize = true;
                                 cropArea.popupMargin = 60; // Increase margin to reduce modal size
 
@@ -40723,11 +41071,72 @@ function processFilePreviewsAndErrors(comp) {
                                 }
 
 
-                                cropArea.addRenderEventListener((dataUrl) => {
+                                cropArea.addRenderEventListener(async (dataUrl) => {
+                                    logger.info('[TF_SDK:35a] 🎨 Crop render event fired');
                                     // Update UI
                                     const previewImg = row.querySelector('.file-preview-img, [ref="fileImage"]');
                                     if (previewImg) previewImg.src = dataUrl;
 
+                                    // Find Form.io component instance and row index
+                                    const componentInstance = comp.componentInstance || comp.component;
+                                    const rowIndex = fileRows.indexOf(row);
+
+                                    let fileInfo = null;
+                                    if (componentInstance && Array.isArray(componentInstance.dataValue)) {
+                                        fileInfo = componentInstance.dataValue[rowIndex];
+                                    }
+
+                                    const existingId = fileInfo ? fileInfo.id : null;
+                                    const originalName = fileInfo ? (fileInfo.originalName || fileInfo.name) : 'edited_image.jpg';
+
+                                    // Convert dataUrl to Blob
+                                    var arr = dataUrl.split(','),
+                                        mime = (arr[0].match(/:(.*?);/) || [])[1] || 'image/jpeg',
+                                        bstr = atob(arr[1]),
+                                        n = bstr.length,
+                                        u8arr = new Uint8Array(n);
+                                    while (n--) {
+                                        u8arr[n] = bstr.charCodeAt(n);
+                                    }
+                                    let blob = new Blob([u8arr], { type: mime });
+                                    blob.name = originalName;
+
+                                    // ⚡ OPTIMIZE / COMPRESS CROPPED BLOB
+                                    if (typeof imageCompression === 'function' && mime.startsWith('image/')) {
+                                        try {
+                                            const compressOptions = {
+                                                maxSizeMB: 0.2, // max ~200KB
+                                                maxWidthOrHeight: 1600,
+                                                initialQuality: 0.8,
+                                                useWebWorker: true
+                                            };
+                                            const compressedBlob = await imageCompression(blob, compressOptions);
+                                            compressedBlob.name = originalName;
+                                            logger.info(`[TF_SDK:35b] ⚡ Compressed cropped image: ${blob.size} -> ${compressedBlob.size} bytes`);
+                                            blob = compressedBlob;
+                                        } catch (compressErr) {
+                                            logger.warn('[TF_SDK:35c] ⚠️ Compression skipped/failed:', compressErr);
+                                        }
+                                    }
+
+                                    if (existingId && typeof window.updateFileInIndexedDB === 'function') {
+                                        window.updateFileInIndexedDB(existingId, blob, originalName).then((updatedInfo) => {
+                                            logger.info('[TF_SDK:35d] ✅ IndexedDB update successful for id:', existingId);
+                                            if (fileInfo) {
+                                                fileInfo.url = updatedInfo.url;
+                                                fileInfo.size = updatedInfo.size;
+                                                fileInfo.mode = 'M';
+                                            }
+                                            if (componentInstance && typeof componentInstance.triggerChange === 'function') {
+                                                componentInstance.triggerChange({ modified: true });
+                                            }
+                                        }).catch((err) => {
+                                            logger.error('[TF_SDK:35e] ❌ IndexedDB update failed:', err);
+                                        });
+                                    } else {
+                                        logger.warn('[TF_SDK:35f] ⚠️ Cannot update IndexedDB: existingId missing or updateFileInIndexedDB function not available');
+                                    }
+
                                     // Notify app of changes
                                     const updateEvent = new CustomEvent('formio-file-updated', {
                                         detail: { element: comp, row: row, dataUrl: dataUrl },
@@ -41097,7 +41506,7 @@ window.applySignatureLayout = function(form) {
         const h = document.createElement('span');
         h.className = 'signature-click-hint';
         h.style.pointerEvents = 'none';
-        h.innerHTML = `Sign Here<br>Or<br><span class="signature-click-action">Click To Sign</span>`;
+        h.innerHTML = `Sign Here<br>Or<br><span class="signature-click-action" role="button" tabindex="0">Click To Sign</span>`;
         padBody.appendChild(h);
         return h;
     };
@@ -41155,10 +41564,21 @@ window.applySignatureLayout = function(form) {
         }
 
         // ── "CLICK TO SIGN" → Trigger the component's internal logic ──────────
-        padBody.addEventListener('click', (e) => {
-            if (!e.target.classList.contains('signature-click-action')) return;
+        let lastTriggerTime = 0;
+        const triggerClickToSign = (e) => {
+            const actionBtn = e.target && e.target.closest ? e.target.closest('.signature-click-action') : null;
+            if (!actionBtn) return;
             if (comp.options && comp.options.readOnly) return;
-            
+
+            // Debounce touch vs click firing on mobile
+            const now = Date.now();
+            if (now - lastTriggerTime < 300) return;
+            lastTriggerTime = now;
+
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+
             // Call the new robust method directly
             if (typeof comp.drawSignatureFromName === 'function') {
                 comp.drawSignatureFromName();
@@ -41168,7 +41588,10 @@ window.applySignatureLayout = function(form) {
                 comp.refs.clicktoSign.click();
                 hideHint(padBody);
             }
-        });
+        };
+
+        padBody.addEventListener('click', triggerClickToSign);
+        padBody.addEventListener('touchend', triggerClickToSign, { passive: false });
 
         // ── CANVAS: immediate fade on touch/draw ──────────────────────────────
         if (canvas) {
@@ -41757,7 +42180,7 @@ initThemeHook();
     </div>
 
     <div id="sticky-footer">
-      <div class="build-version">SDK v2.0.73</div>
+      <div class="build-version">SDK v2.0.74</div>
       
       <button class="footer-btn footer-btn-secondary" id="prevBtn" style="display:none" onclick="FormOnPrevious()">
         <i class="bi bi-chevron-left"></i> Previous