plusui-native-core 0.1.103 → 0.1.105

package/Core/Features/API/Connect_API.ts

@@ -1,76 +1,44 @@
 /**
- * PlusUI Connect API — Semantic Frontend ↔ Backend Communication
+ * PlusUI Connect API — Custom Frontend ↔ Backend Communication
  *
- * ZERO CONFIG. SEMANTIC SYNTAX. ALL 5 PATTERNS.
- *
- * IMPORTANT: `connect` is for CUSTOM user-defined communication only!
- * Built-in features (window, clipboard, app, etc.) use direct imports:
- *   import plusui from 'plusui';
- *   plusui.window.minimize();
- *   plusui.clipboard.setText('hello');
- *
- * For custom communication, use `connect.namespace.method()`:
+ * Use `connect` for YOUR custom communication channels only!
  *
  *   import { connect } from 'plusui';
  *
- *   // Request/Response — await a call to the backend
+ *   // Request/Response
  *   const user = await connect.user.fetch(123);
  *
- *   // Fire & Forget — one-way notification
+ *   // Fire & Forget (one-way)
  *   connect.files.upload({ file: myFile });
  *
- *   // Event Listener — listen for backend events
+ *   // Subscribe to events
  *   connect.app.onNotify((msg) => console.log(msg));
  *
- *   // Register a handler — backend can call frontend
+ *   // Register handler (backend calls frontend)
  *   connect.ui.handlePrompt = async (data) => {
  *     return await Dialog.confirm(data.msg);
  *   };
  *
- * Then run `plusui connect` to generate typed bindings.
+ * Run `plusui connect` to generate typed bindings.
  *
- * Pattern detection is automatic:
- *   - `await connect.x.y()` → CALL (Request/Response)
- *   - `connect.x.onY(cb)` → EVENT (Subscribe)
- *   - `connect.x.handleY = fn` → HANDLER (Backend calls frontend)
- *   - `connect.x.y()` → FIRE (Simplex, one-way)
+ * BUILT-IN FEATURES use direct imports:
+ *   import plusui from 'plusui';
+ *   plusui.window.minimize();
+ *   plusui.clipboard.setText('hello');
  */
 
 import { connect, _client, createFeatureConnect } from '../Connection/connect';
 import type { FeatureConnect, ConnectionKind, ConnectionEnvelope } from '../Connection/connect';
 
-/**
- * connect — Semantic channel proxy
- *
- * Usage:
- *   connect.namespace.method(...args)
- *
- * The proxy routes to the correct wire format automatically:
- *   connect.user.fetch(123)         → _client.call('user.fetch', 123)
- *   connect.app.onNotify(cb)        → _client.on('app.onNotify', cb)
- *   connect.ui.handlePrompt = fn    → _client.handle('ui.handlePrompt', fn)
- *   connect.system.minimize()       → _client.fire('system.minimize', {})
- *
- * Works dynamically even before running `plusui connect`.
- * After running `plusui connect`, you get IDE autocomplete.
- */
-export { connect };
-
-/**
- * _client — Low-level connection client
- *
- * Direct access to the underlying client for advanced use cases.
- * Prefer using `connect.namespace.method()` for normal communication.
- */
-export { _client };
+export { connect, _client, createFeatureConnect };
+export type { FeatureConnect, ConnectionKind, ConnectionEnvelope };
 
 /**
- * createFeatureConnect — Scoped connect for framework internals
- *
- * Creates a connect API scoped to a feature namespace.
- * Used internally by PlusUI features like window, clipboard, etc.
+ * Low-level client methods (use `connect` instead when possible)
  */
-export { createFeatureConnect };
-
-export type { FeatureConnect, ConnectionKind, ConnectionEnvelope };
-export default connect;
+export type ClientAPI = {
+  call: <TOut = unknown, TIn = Record<string, unknown>>(name: string, payload: TIn) => Promise<TOut>;
+  fire: <TIn = Record<string, unknown>>(name: string, payload: TIn) => void;
+  on: <TData = unknown>(name: string, callback: (payload: TData) => void) => () => void;
+  handle: (name: string, handler: (...args: any[]) => any) => () => void;
+};

package/Core/Features/API/filedrop-api.ts

@@ -1,2 +1,13 @@
+export { 
+  fileDrop, 
+  createDropZone,
+  formatFileSize,
+  filterFilesByExtension,
+  filterFilesByMimeType,
+  isImageFile,
+  isVideoFile,
+  isAudioFile,
+  isTextFile
+} from '../FileDrop/filedrop';
+
 export type { FileInfo, DropZone } from '../FileDrop/filedrop';
-export { fileDrop, formatFileSize, createDropZone } from '../FileDrop/filedrop';

package/Core/Features/API/index.ts

@@ -10,7 +10,7 @@ export { router } from './router-api';
 export { keyboard, KeyCode, KeyMod } from './keyboard-api';
 export { tray } from './tray-api';
 export { display } from './display-api';
-export { fileDrop, formatFileSize, createDropZone } from './filedrop-api';
+export { fileDrop, formatFileSize, createDropZone, filterFilesByExtension, filterFilesByMimeType, isImageFile, isVideoFile, isAudioFile, isTextFile } from './filedrop-api';
 export { menu } from './menu-api';
 export { gpu, GPUBufferUsage, GPUTextureUsage, GPUMapMode, GPUShaderStage, GPUColorWrite } from './webgpu-api';
 

package/Core/Features/App/app.cpp

@@ -77,38 +77,38 @@ App::Builder &App::Builder::transparent(bool transparent) {
 App::Builder &App::Builder::decorations(bool decorations) {
   config.decorations = decorations;
   return *this;
-}
-App::Builder &App::Builder::skipTaskbar(bool skip) {
-  config.skipTaskbar = skip;
-  return *this;
-}
-App::Builder &App::Builder::scrollbars(bool show) {
-  config.scrollbars = show;
-  return *this;
-}
-App::Builder &App::Builder::enableFileDrop(bool enable) {
-  config.enableFileDrop = enable;
-  return *this;
-}
-
-Window App::Builder::build() {
-  WindowConfig winConfig;
-  winConfig.title = config.title;
-  winConfig.width = config.width;
-  winConfig.height = config.height;
-  winConfig.resizable = config.resizable;
-  winConfig.alwaysOnTop = config.alwaysOnTop;
-  winConfig.center = config.centered;
-  winConfig.transparent = config.transparent;
-  winConfig.decorations = config.decorations;
-  winConfig.skipTaskbar = config.skipTaskbar;
-  winConfig.enableFileDrop = config.enableFileDrop;
-
-  // WebView configuration (now part of WindowConfig)
-  winConfig.devtools = config.devtools;
-  winConfig.scrollbars = config.scrollbars;
-  winConfig.disableWebviewDragDrop =
-      config.enableFileDrop; // Auto-disable webview drag when FileDrop enabled
+}
+App::Builder &App::Builder::skipTaskbar(bool skip) {
+  config.skipTaskbar = skip;
+  return *this;
+}
+App::Builder &App::Builder::scrollbars(bool show) {
+  config.scrollbars = show;
+  return *this;
+}
+App::Builder &App::Builder::fileDrop(bool enable) {
+  config.fileDrop = enable;
+  return *this;
+}
+
+Window App::Builder::build() {
+  WindowConfig winConfig;
+  winConfig.title = config.title;
+  winConfig.width = config.width;
+  winConfig.height = config.height;
+  winConfig.resizable = config.resizable;
+  winConfig.alwaysOnTop = config.alwaysOnTop;
+  winConfig.center = config.centered;
+  winConfig.transparent = config.transparent;
+  winConfig.decorations = config.decorations;
+  winConfig.skipTaskbar = config.skipTaskbar;
+  winConfig.fileDrop = config.fileDrop;
+
+  // WebView configuration (now part of WindowConfig)
+  winConfig.devtools = config.devtools;
+  winConfig.scrollbars = config.scrollbars;
+  winConfig.disableWebviewDragDrop =
+      config.fileDrop; // Auto-disable browser drag-drop when OS file drop enabled
 
   // Create native window
   auto nativeWinPtr = std::make_shared<Window>(Window::create(winConfig));

package/Core/Features/FileDrop/filedrop.ts

@@ -1,3 +1,24 @@
+/**
+ * PlusUI FileDrop API
+ * 
+ * Simple API for handling OS file drops in your app.
+ * Enable in config: .fileDrop(true) - enabled by default
+ * 
+ * Usage:
+ *   import plusui from 'plusui';
+ *   const { fileDrop } = plusui;
+ *   
+ *   // Create a drop zone
+ *   const zone = fileDrop.createDropZone('myZone', element);
+ *   zone.onFiles((files) => {
+ *     console.log('Dropped:', files.map(f => f.name));
+ *   });
+ *   
+ *   // Or use data-dropzone attribute
+ *   // <div data-dropzone="upload"></div>
+ *   fileDrop.onFiles('upload', (files) => { ... });
+ */
+
 export interface FileInfo {
   path: string;
   name: string;
@@ -5,9 +26,22 @@ export interface FileInfo {
   size: number;
 }
 
+export interface DropZone {
+  name: string;
+  onFiles(callback: (files: FileInfo[]) => void): () => void;
+  onDragEnter(callback: () => void): () => void;
+  onDragLeave(callback: () => void): () => void;
+  element: HTMLElement | null;
+}
+
+interface PendingCall {
+  resolve: (v: any) => void;
+  reject: (e: any) => void;
+}
+
 let callId = 0;
-const pending = new Map<string, { resolve: (v: any) => void; reject: (e: any) => void }>();
-const zoneCallbacks = new Map<string, { onFiles: (files: FileInfo[]) => void }>();
+const pending = new Map<string, PendingCall>();
+const zones = new Map<string, DropZone>();
 
 function getGlobal(): any {
   if (typeof window !== 'undefined') return window;
@@ -25,18 +59,18 @@ g.__response__ = function(id: string, result: any, error?: any) {
   }
 };
 
-// Called by C++ when files are dropped on a named zone
 g.__plusui_fileDrop__ = function(zoneName: string, files: FileInfo[]) {
-  const zone = zoneCallbacks.get(zoneName);
-  if (zone && zone.onFiles) zone.onFiles(files);
+  const zone = zones.get(zoneName);
+  if (zone) {
+    const cb = (zone as any).__onFiles;
+    if (cb) cb(files);
+  }
 };
 
-// Called by C++ when the drop point doesn't hit any named zone — deliver to
-// all registered zones so a single-zone app always works regardless of DPI
-// scaling or hit-test accuracy.
 g.__plusui_fileDrop_default__ = function(files: FileInfo[]) {
-  for (const zone of zoneCallbacks.values()) {
-    if (zone && zone.onFiles) zone.onFiles(files);
+  for (const zone of zones.values()) {
+    const cb = (zone as any).__onFiles;
+    if (cb) cb(files);
   }
 };
 
@@ -52,77 +86,132 @@ async function invoke<T>(method: string, params: any[] = []): Promise<T> {
       g.chrome.webview.postMessage(payload);
     } else {
       pending.delete(id);
-      console.warn('[PlusUI] ' + method + ' - native bridge not ready');
+      console.warn('[PlusUI] Native bridge not ready');
       resolve(null as T);
     }
   });
 }
 
-export interface DropZone {
-  onFiles: (callback: (files: FileInfo[]) => void) => () => void;
-  element: HTMLElement | null;
-}
-
-export function createDropZone(name: string, el?: HTMLElement | null): DropZone {
-  const element = el || document.querySelector(`[data-dropzone="${name}"]`) as HTMLElement;
-
-  if (element) {
-    element.setAttribute('data-dropzone', name);
-
-    // Prevent browser default on drop (file navigation).
-    // Actual file delivery comes from C++ via WM_DROPFILES → __plusui_fileDrop__.
-    element.addEventListener('drop', (e: DragEvent) => {
+export function createDropZone(name: string, element?: HTMLElement | null): DropZone {
+  const el = element || document.querySelector(`[data-dropzone="${name}"]`) as HTMLElement;
+  
+  if (el) {
+    el.setAttribute('data-dropzone', name);
+    el.classList.add('plusui-dropzone');
+    
+    el.addEventListener('drop', (e: DragEvent) => {
       e.preventDefault();
-      e.stopPropagation();
-      element.classList.remove('dropzone-active');
+      el.classList.remove('dropzone-active');
+      el.classList.remove('filedrop-active');
     });
 
-    element.addEventListener('dragleave', (e: DragEvent) => {
+    el.addEventListener('dragleave', (e: DragEvent) => {
       const related = e.relatedTarget as Node | null;
-      if (!related || !element.contains(related)) {
-        element.classList.remove('dropzone-active');
+      if (!related || !el.contains(related)) {
+        el.classList.remove('dropzone-active');
+        el.classList.remove('filedrop-active');
       }
     });
 
-    element.addEventListener('dragenter', (e: DragEvent) => {
+    el.addEventListener('dragenter', (e: DragEvent) => {
       e.preventDefault();
-      element.classList.add('dropzone-active');
+      el.classList.add('dropzone-active');
+      el.classList.add('filedrop-active');
       if (e.dataTransfer) {
-        // 'move' matches the native OS dropzone cursor (arrow + file icon)
-        // rather than the browser's '+ Copy' cursor
-        try { e.dataTransfer.dropEffect = 'move'; } catch (_) {}
+        try { e.dataTransfer.dropEffect = 'copy'; } catch (_) {}
       }
     });
 
-    element.addEventListener('dragover', (e: DragEvent) => {
+    el.addEventListener('dragover', (e: DragEvent) => {
       e.preventDefault();
       if (e.dataTransfer) {
-        try { e.dataTransfer.dropEffect = 'move'; } catch (_) {}
+        try { e.dataTransfer.dropEffect = 'copy'; } catch (_) {}
       }
     });
   }
 
-  return {
-    element,
+  const zone: DropZone = {
+    name,
+    element: el,
     onFiles: (callback: (files: FileInfo[]) => void) => {
-      zoneCallbacks.set(name, { onFiles: callback });
-      return () => zoneCallbacks.delete(name);
+      (zone as any).__onFiles = callback;
+      zones.set(name, zone);
+      return () => {
+        (zone as any).__onFiles = undefined;
+        zones.delete(name);
+      };
+    },
+    onDragEnter: (callback: () => void) => {
+      (zone as any).__onDragEnter = callback;
+      return () => { (zone as any).__onDragEnter = undefined; };
+    },
+    onDragLeave: (callback: () => void) => {
+      (zone as any).__onDragLeave = callback;
+      return () => { (zone as any).__onDragLeave = undefined; };
     }
   };
+
+  zones.set(name, zone);
+  return zone;
 }
 
 export const fileDrop = {
-  setEnabled: (enabled: boolean) => invoke<void>('fileDrop.setEnabled', [enabled]),
-  isEnabled: () => invoke<boolean>('fileDrop.isEnabled'),
   createDropZone,
+  
+  onFiles: (name: string, callback: (files: FileInfo[]) => void): (() => void) => {
+    const zone = zones.get(name);
+    if (zone) {
+      return zone.onFiles(callback);
+    }
+    const newZone = createDropZone(name);
+    return newZone.onFiles(callback);
+  },
+
+  setEnabled: (enabled: boolean): Promise<void> => 
+    invoke<void>('fileDrop.setEnabled', [enabled]),
+    
+  isEnabled: (): Promise<boolean> => 
+    invoke<boolean>('fileDrop.isEnabled'),
+    
+  startDrag: (filePaths: string[]): Promise<void> =>
+    invoke<void>('fileDrop.startDrag', [filePaths]),
 };
 
 export function formatFileSize(bytes: number): string {
   if (bytes === 0) return '0 B';
   const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
   return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
 }
 
+export function filterFilesByExtension(files: FileInfo[], extensions: string[]): FileInfo[] {
+  const exts = extensions.map(e => e.toLowerCase().replace(/^\./, ''));
+  return files.filter(f => {
+    const ext = f.name.split('.').pop()?.toLowerCase() || '';
+    return exts.includes(ext);
+  });
+}
+
+export function filterFilesByMimeType(files: FileInfo[], mimeTypes: string[]): FileInfo[] {
+  return files.filter(f => mimeTypes.includes(f.type));
+}
+
+export function isImageFile(file: FileInfo): boolean {
+  return file.type.startsWith('image/');
+}
+
+export function isVideoFile(file: FileInfo): boolean {
+  return file.type.startsWith('video/');
+}
+
+export function isAudioFile(file: FileInfo): boolean {
+  return file.type.startsWith('audio/');
+}
+
+export function isTextFile(file: FileInfo): boolean {
+  return file.type.startsWith('text/') || file.name.endsWith('.txt') || 
+         file.name.endsWith('.md') || file.name.endsWith('.json');
+}
+
 export default fileDrop;

package/Core/Features/Window/webview.cpp

@@ -167,13 +167,14 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
                         // while still showing visual feedback on drop zones.
                         // File delivery is handled by WM_DROPFILES in wndProc.
                         if (pImpl->config.disableWebviewDragDrop ||
-                            pImpl->config.enableFileDrop) {
+                            pImpl->config.fileDrop) {
                           std::string disableDragDropScript = R"(
                             (function() {
                               if (window.__plusui_dropzone_init) return;
                               window.__plusui_dropzone_init = true;
 
                               var activeZone = null;
+                              var dragDepth = 0;
 
                               var findDropZone = function(e) {
                                 var target = null;
@@ -187,13 +188,20 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
 
                               var updateActiveZone = function(zone) {
                                 if (activeZone === zone) return;
-                                if (activeZone) activeZone.classList.remove('dropzone-active');
+                                if (activeZone) {
+                                  activeZone.classList.remove('dropzone-active');
+                                  activeZone.classList.remove('filedrop-active');
+                                }
                                 activeZone = zone;
-                                if (activeZone) activeZone.classList.add('dropzone-active');
+                                if (activeZone) {
+                                  activeZone.classList.add('dropzone-active');
+                                  activeZone.classList.add('filedrop-active');
+                                }
                               };
 
                               document.addEventListener('dragenter', function(e) {
                                 e.preventDefault();
+                                dragDepth++;
                                 var zone = findDropZone(e);
                                 updateActiveZone(zone);
                                 if (e.dataTransfer) {
@@ -212,13 +220,20 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
 
                               document.addEventListener('dragleave', function(e) {
                                 e.preventDefault();
-                                var zone = findDropZone(e);
-                                updateActiveZone(zone);
+                                dragDepth--;
+                                if (dragDepth <= 0) {
+                                  dragDepth = 0;
+                                  updateActiveZone(null);
+                                } else {
+                                  var zone = findDropZone(e);
+                                  updateActiveZone(zone);
+                                }
                               }, true);
 
                               document.addEventListener('drop', function(e) {
                                 e.preventDefault();
                                 updateActiveZone(null);
+                                dragDepth = 0;
                               }, true);
 
                               window.addEventListener('dragover', function(e) { e.preventDefault(); }, true);
@@ -679,7 +694,7 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
                                           script = "(function() { delete window.__plusui_dropzone_init; })();";
                                         } else {
                                           // Re-install the dropzone blocker script
-                                          script = "(function() { if (window.__plusui_dropzone_init) return; window.__plusui_dropzone_init = true; var activeZone = null; var findDropZone = function(e) { var target = null; if (e && typeof e.clientX === 'number' && document.elementFromPoint) { target = document.elementFromPoint(e.clientX, e.clientY); } if (!target && e && e.target) target = e.target; if (!target || !target.closest) return null; return target.closest('[data-dropzone]'); }; var updateActiveZone = function(zone) { if (activeZone === zone) return; if (activeZone) activeZone.classList.remove('dropzone-active'); activeZone = zone; if (activeZone) activeZone.classList.add('dropzone-active'); }; document.addEventListener('dragenter', function(e) { e.preventDefault(); var zone = findDropZone(e); updateActiveZone(zone); if (e.dataTransfer) { try { e.dataTransfer.dropEffect = zone ? 'copy' : 'none'; } catch(_) {} } }, true); document.addEventListener('dragover', function(e) { e.preventDefault(); var zone = findDropZone(e); updateActiveZone(zone); if (e.dataTransfer) { try { e.dataTransfer.dropEffect = zone ? 'copy' : 'none'; } catch(_) {} } }, true); document.addEventListener('dragleave', function(e) { e.preventDefault(); var zone = findDropZone(e); updateActiveZone(zone); }, true); document.addEventListener('drop', function(e) { e.preventDefault(); updateActiveZone(null); }, true); window.addEventListener('dragover', function(e) { e.preventDefault(); }, true); window.addEventListener('drop', function(e) { e.preventDefault(); }, true); })();";
+                                          script = "(function() { if (window.__plusui_dropzone_init) return; window.__plusui_dropzone_init = true; var activeZone = null; var findDropZone = function(e) { var target = null; if (e && typeof e.clientX === 'number' && document.elementFromPoint) { target = document.elementFromPoint(e.clientX, e.clientY); } if (!target && e && e.target) target = e.target; if (!target || !target.closest) return null; return target.closest('[data-dropzone]'); }; var updateActiveZone = function(zone) { if (activeZone === zone) return; if (activeZone) activeZone.classList.remove('dropzone-active'); activeZone = zone; if (activeZone) activeZone.classList.add('dropzone-active'); }; document.addEventListener('dragenter', function(e) { e.preventDefault(); var zone = findDropZone(e); updateActiveZone(zone); if (e.dataTransfer) { try { e.dataTransfer.dropEffect = zone ? 'copy' : 'none'; } catch(_) {} } }, true); document.addEventListener('dragover', function(e) { e.preventDefault(); var zone = findDropZone(e); updateActiveZone(zone); if (e.dataTransfer) { try { e.dataTransfer.dropEffect = zone ? 'copy' : 'none'; } catch(_) {} } }, true); document.addEventListener('dragleave', function(e) { e.preventDefault(); var zone = findDropZone(e); if (e.relatedTarget && zone && !zone.contains(e.relatedTarget)) { updateActiveZone(null); } }, true); document.addEventListener('drop', function(e) { e.preventDefault(); updateActiveZone(null); }, true); window.addEventListener('dragover', function(e) { e.preventDefault(); }, true); window.addEventListener('drop', function(e) { e.preventDefault(); }, true); })();";
                                         }
                                         pImpl->webview->ExecuteScript(
                                             std::wstring(script.begin(), script.end()).c_str(),
@@ -806,7 +821,7 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
   // Block browser default drag-drop while allowing drop zone visual feedback.
   // File delivery is handled natively by macOS drag APIs, not browser events.
   if (win.pImpl->config.disableWebviewDragDrop ||
-      win.pImpl->config.enableFileDrop) {
+      win.pImpl->config.fileDrop) {
     NSString *disableDragDropScript = @"(function() {"
       "if (window.__plusui_dropzone_init) return;"
       "window.__plusui_dropzone_init = true;"
@@ -841,7 +856,9 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
       "document.addEventListener('dragleave', function(e) {"
         "e.preventDefault();"
         "var zone = findDropZone(e);"
-        "updateActiveZone(zone);"
+        "if (e.relatedTarget && zone && !zone.contains(e.relatedTarget)) {"
+          "updateActiveZone(null);"
+        "}"
       "}, true);"
       "document.addEventListener('drop', function(e) {"
         "e.preventDefault();"

package/Core/Features/Window/webview.ts

@@ -20,7 +20,7 @@ export interface WebViewConfig {
   allowRemoteContent?: boolean;
   dataPath?: string;
   cacheSize?: number; // MB
-  disableWebviewDragDrop?: boolean; // Disable webview drag-drop (auto-set by WindowConfig.enableFileDrop)
+  disableWebviewDragDrop?: boolean; // Disable browser HTML drag-drop (auto-set by WindowConfig.fileDrop)
 }
 
 export type WindowId = number;

package/Core/Features/Window/window.cpp

@@ -270,7 +270,7 @@ struct Window::Impl {
           }
         }
 
-        if (!targetImpl || !targetImpl->config.enableFileDrop ||
+        if (!targetImpl || !targetImpl->config.fileDrop ||
             !targetImpl->webview) {
           DragFinish(hDrop);
           return 0;
@@ -346,6 +346,10 @@ struct Window::Impl {
             "var files=" +
             filesJson +
             ";"
+            // Clear any leftover visual feedback from the drag
+            "document.querySelectorAll('.dropzone-active,.filedrop-active')"
+            ".forEach(function(z){z.classList.remove('dropzone-active');"
+            "z.classList.remove('filedrop-active');});"
             // Global event — always fires
             "window.dispatchEvent(new "
             "CustomEvent('plusui:fileDrop.filesDropped',"
@@ -504,7 +508,7 @@ Window Window::create(const WindowConfig &config) {
   w.pImpl->state.width = config.width;
   w.pImpl->state.height = config.height;
 
-  DragAcceptFiles(w.pImpl->hwnd, config.enableFileDrop ? TRUE : FALSE);
+  DragAcceptFiles(w.pImpl->hwnd, config.fileDrop ? TRUE : FALSE);
 
   if (config.center) {
     RECT screen;
@@ -1069,7 +1073,7 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
 
   // Pure native file-drop mode: when native FileDrop is enabled,
   // fully disable browser/WebView drag-drop handling.
-  if (win.pImpl->config.enableFileDrop) {
+  if (win.pImpl->config.fileDrop) {
     win.pImpl->config.disableWebviewDragDrop = true;
   }
 
@@ -1104,18 +1108,20 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
                         Window::Impl::embeddedWebviewByParent[parentHwnd] =
                             pImpl.get();
 
-                        // Disable WebView2's internal drop handling so the OS
-                        // drop message (WM_DROPFILES) propagates to our WndProc.
-                        // When AllowExternalDrop is TRUE, WebView2 consumes the
-                        // drop event itself and WM_DROPFILES never fires.
-                        // Visual drag feedback (dropzone-active CSS class) is
-                        // still handled by the injected JS via dragenter/dragover.
+                        // AllowExternalDrop must be TRUE so that drag-
+                        // related DOM events (dragenter, dragover, dragleave,
+                        // drop) fire inside the webview.  Our injected JS
+                        // calls preventDefault() on all of them to stop the
+                        // browser from navigating to the dropped file.
+                        // The parent HWND still receives WM_DROPFILES via
+                        // DragAcceptFiles, which is where we extract file
+                        // metadata and push it into JavaScript.
                         ComPtr<ICoreWebView2Controller4> controller4;
                         if (controller &&
                             SUCCEEDED(controller->QueryInterface(
                                 IID_PPV_ARGS(&controller4))) &&
                             controller4) {
-                          controller4->put_AllowExternalDrop(FALSE);
+                          controller4->put_AllowExternalDrop(TRUE);
                         }
 
                         pImpl->nativeWebView = pImpl->webview.Get();
@@ -1157,6 +1163,7 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
                             window.__plusui_dropzone_init = true;
 
                             var activeZone = null;
+                            var dragDepth = 0;
 
                             var findDropZone = function(e) {
                               var target = null;
@@ -1170,19 +1177,28 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
 
                             var updateActiveZone = function(zone) {
                               if (activeZone === zone) return;
-                              if (activeZone) activeZone.classList.remove('dropzone-active');
+                              if (activeZone) {
+                                activeZone.classList.remove('dropzone-active');
+                                activeZone.classList.remove('filedrop-active');
+                              }
                               activeZone = zone;
-                              if (activeZone) activeZone.classList.add('dropzone-active');
+                              if (activeZone) {
+                                activeZone.classList.add('dropzone-active');
+                                activeZone.classList.add('filedrop-active');
+                              }
                             };
 
                             // Always preventDefault to stop browser from navigating to file,
-                            // but show visual feedback when over a drop zone
+                            // but show visual feedback when over a drop zone.
+                            // dragDepth tracks nested dragenter/dragleave pairs so we know
+                            // when the drag truly leaves the window (depth returns to 0).
                             document.addEventListener('dragenter', function(e) {
                               e.preventDefault();
+                              dragDepth++;
                               var zone = findDropZone(e);
                               updateActiveZone(zone);
                               if (e.dataTransfer) {
-                                try { e.dataTransfer.dropEffect = zone ? 'move' : 'none'; } catch(_) {}
+                                try { e.dataTransfer.dropEffect = zone ? 'copy' : 'none'; } catch(_) {}
                               }
                             }, true);
 
@@ -1191,18 +1207,25 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
                               var zone = findDropZone(e);
                               updateActiveZone(zone);
                               if (e.dataTransfer) {
-                                try { e.dataTransfer.dropEffect = zone ? 'move' : 'none'; } catch(_) {}
+                                try { e.dataTransfer.dropEffect = zone ? 'copy' : 'none'; } catch(_) {}
                               }
                             }, true);
 
                             document.addEventListener('dragleave', function(e) {
                               e.preventDefault();
-                              var zone = findDropZone(e);
-                              updateActiveZone(zone);
+                              dragDepth--;
+                              if (dragDepth <= 0) {
+                                dragDepth = 0;
+                                updateActiveZone(null);
+                              } else {
+                                var zone = findDropZone(e);
+                                updateActiveZone(zone);
+                              }
                             }, true);
 
                             document.addEventListener('drop', function(e) {
                               e.preventDefault();
+                              dragDepth = 0;
                               updateActiveZone(null);
                             }, true);
 
@@ -1619,7 +1642,7 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
                                             msg.substr(p1 + 1, p2 - p1 - 1);
                                         bool enabled = params.find("true") !=
                                                        std::string::npos;
-                                        pImpl->config.enableFileDrop = enabled;
+                                        pImpl->config.fileDrop = enabled;
 
                                         HWND targetHwnd = nullptr;
                                         if (pImpl->window) {
@@ -1652,7 +1675,7 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
                                       }
                                       success = true;
                                     } else if (fileDropMethod == "isEnabled") {
-                                      result = pImpl->config.enableFileDrop
+                                      result = pImpl->config.fileDrop
                                                    ? "true"
                                                    : "false";
                                       success = true;
@@ -1758,7 +1781,7 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
   // Block browser default drag-drop while allowing drop zone visual feedback.
   // File delivery is handled natively by macOS drag APIs, not browser events.
   if (win.pImpl->config.disableWebviewDragDrop ||
-      win.pImpl->config.enableFileDrop) {
+      win.pImpl->config.fileDrop) {
     NSString *disableDragDropScript =
         @"(function() {"
          "if (window.__plusui_dropzone_init) return;"
@@ -1794,7 +1817,9 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
          "document.addEventListener('dragleave', function(e) {"
          "e.preventDefault();"
          "var zone = findDropZone(e);"
-         "updateActiveZone(zone);"
+         "if (e.relatedTarget && zone && !zone.contains(e.relatedTarget)) {"
+         "updateActiveZone(null);"
+         "}"
          "}, true);"
          "document.addEventListener('drop', function(e) {"
          "e.preventDefault();"

package/Core/include/plusui/api.hpp

@@ -74,7 +74,7 @@
  *     .width(1200)                              .width(1200)
  *     .height(800)                              .height(800)
  *     .devtools(true)                           .devtools(true)
- *     .enableFileDrop(true);                    .enableFileDrop(true)
+ *     .fileDrop(true);                    .fileDrop(true)
  *                                               .build()   ← returns Window
  *   TS:   app.quit()                      C++:  app.quit()
  *   TS:   app.onReady(cb)                 C++:  (start after build())
@@ -201,7 +201,7 @@
  *       .title("My App")
  *       .width(1200)
  *       .height(800)
- *       .enableFileDrop(true)
+ *       .fileDrop(true)
  *       .build();
  *
  *     MyApp connect;

package/Core/include/plusui/app.hpp

@@ -25,47 +25,47 @@ private:
   std::unique_ptr<Impl> pImpl;
 };
 
-class App::Builder {
-public:
-  struct Config {
-    std::string title = "PlusUI App";
-    int width = 1200;
-    int height = 800;
-    bool resizable = true;
-    bool devtools = true;
-    std::string trayIconPath;
-    std::string trayTooltip;
-    bool alwaysOnTop = false;
-    bool centered = true;
-    bool transparent = false;
-    bool decorations = true;
-    bool skipTaskbar = false;
-    bool scrollbars = true;
-    bool enableFileDrop = true;
-  };
-
-  Builder();
-
-  Builder &title(const std::string &t);
-  Builder &width(int w);
-  Builder &height(int h);
-  Builder &resizable(bool r);
-  Builder &devtools(bool d);
-  Builder &trayIcon(const std::string &icon);
-  Builder &trayTooltip(const std::string &tooltip);
-  Builder &alwaysOnTop(bool top);
-  Builder &centered(bool center);
-  Builder &transparent(bool transparent);
-  Builder &decorations(bool decorations);
-  Builder &skipTaskbar(bool skip);
-  Builder &scrollbars(bool show);
-  Builder &enableFileDrop(bool enable);
-
-  Window build();
-
-private:
-  Config config;
-};
+class App::Builder {
+public:
+  struct Config {
+    std::string title = "PlusUI App";
+    int width = 1200;
+    int height = 800;
+    bool resizable = true;
+    bool devtools = true;
+    std::string trayIconPath;
+    std::string trayTooltip;
+    bool alwaysOnTop = false;
+    bool centered = true;
+    bool transparent = false;
+    bool decorations = true;
+    bool skipTaskbar = false;
+    bool scrollbars = true;
+    bool fileDrop = true; // Enable OS file drop
+  };
+
+  Builder();
+
+  Builder &title(const std::string &t);
+  Builder &width(int w);
+  Builder &height(int h);
+  Builder &resizable(bool r);
+  Builder &devtools(bool d);
+  Builder &trayIcon(const std::string &icon);
+  Builder &trayTooltip(const std::string &tooltip);
+  Builder &alwaysOnTop(bool top);
+  Builder &centered(bool center);
+  Builder &transparent(bool transparent);
+  Builder &decorations(bool decorations);
+  Builder &skipTaskbar(bool skip);
+  Builder &scrollbars(bool show);
+  Builder &fileDrop(bool enable);
+
+  Window build();
+
+private:
+  Config config;
+};
 
 App::Builder createApp();
 

package/Core/include/plusui/window.hpp

@@ -11,46 +11,44 @@ namespace plusui {
 
 class TrayManager;
 
-struct WindowConfig {
-  // Window properties
-  std::string title = "PlusUI Window";
-  int x = -1;
-  int y = -1;
-  int width = 800;
-  int height = 600;
-  int minWidth = 100;
-  int minHeight = 100;
-  int maxWidth = -1;
-  int maxHeight = -1;
-  bool resizable = true;
-  bool minimizable = true;
-  bool maximizable = true;
-  bool closable = true;
-  bool alwaysOnTop = false;
-  bool center = true;
-  bool frame = true;
-  bool transparent = false;
-  bool decorations = true;
-  bool skipTaskbar = false;
-  double opacity = 1.0;
-  bool fullscreen = false;
-  bool enableFileDrop =
-      true; // Enable native FileDrop API (auto-disables webview drag-drop)
-
-  // WebView properties
-  std::string userAgent = "";
-  bool devtools = true;
-  bool contextMenu = true;
-  bool javascript = true;
-  bool webSecurity = true;
-  bool allowFileAccess = false;
-  bool allowRemoteContent = true;
-  std::string dataPath = "";
-  int cacheSize = 100;    // MB
-  bool scrollbars = true; // Show/hide scrollbars
-  bool disableWebviewDragDrop =
-      true; // Disable webview drag-drop (usually set by enableFileDrop)
-};
+struct WindowConfig {
+  // Window properties
+  std::string title = "PlusUI Window";
+  int x = -1;
+  int y = -1;
+  int width = 800;
+  int height = 600;
+  int minWidth = 100;
+  int minHeight = 100;
+  int maxWidth = -1;
+  int maxHeight = -1;
+  bool resizable = true;
+  bool minimizable = true;
+  bool maximizable = true;
+  bool closable = true;
+  bool alwaysOnTop = false;
+  bool center = true;
+  bool frame = true;
+  bool transparent = false;
+  bool decorations = true;
+  bool skipTaskbar = false;
+  double opacity = 1.0;
+  bool fullscreen = false;
+  bool fileDrop = true; // Enable OS file drop (drag files from Explorer/Finder into window)
+  bool disableWebviewDragDrop = true; // Disable browser HTML drag-drop (auto-set by fileDrop)
+
+  // WebView properties
+  std::string userAgent = "";
+  bool devtools = true;
+  bool contextMenu = true;
+  bool javascript = true;
+  bool webSecurity = true;
+  bool allowFileAccess = false;
+  bool allowRemoteContent = true;
+  std::string dataPath = "";
+  int cacheSize = 100;    // MB
+  bool scrollbars = true; // Show/hide scrollbars
+};
 
 struct WindowState {
   int x = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plusui-native-core",
-  "version": "0.1.103",
+  "version": "0.1.105",
   "description": "PlusUI Core framework (frontend + backend implementations)",
   "type": "module",
   "main": "./Core/Features/API/index.ts",