plusui-native-core 0.1.104 → 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/FileDrop/filedrop.ts

@@ -102,27 +102,30 @@ export function createDropZone(name: string, element?: HTMLElement | null): Drop
     el.addEventListener('drop', (e: DragEvent) => {
       e.preventDefault();
       el.classList.remove('dropzone-active');
+      el.classList.remove('filedrop-active');
     });
 
     el.addEventListener('dragleave', (e: DragEvent) => {
       const related = e.relatedTarget as Node | null;
       if (!related || !el.contains(related)) {
         el.classList.remove('dropzone-active');
+        el.classList.remove('filedrop-active');
       }
     });
 
     el.addEventListener('dragenter', (e: DragEvent) => {
       e.preventDefault();
       el.classList.add('dropzone-active');
+      el.classList.add('filedrop-active');
       if (e.dataTransfer) {
-        try { e.dataTransfer.dropEffect = 'move'; } catch (_) {}
+        try { e.dataTransfer.dropEffect = 'copy'; } catch (_) {}
       }
     });
 
     el.addEventListener('dragover', (e: DragEvent) => {
       e.preventDefault();
       if (e.dataTransfer) {
-        try { e.dataTransfer.dropEffect = 'move'; } catch (_) {}
+        try { e.dataTransfer.dropEffect = 'copy'; } catch (_) {}
       }
     });
   }

package/Core/Features/Window/webview.cpp

@@ -174,6 +174,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;
@@ -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,16 +220,20 @@ Window Window::create(void *windowHandle, const WindowConfig &config) {
 
                               document.addEventListener('dragleave', function(e) {
                                 e.preventDefault();
-                                var zone = findDropZone(e);
-                                // Only remove if actually leaving the zone (relatedTarget is outside)
-                                if (e.relatedTarget && zone && !zone.contains(e.relatedTarget)) {
+                                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);

package/Core/Features/Window/window.cpp

@@ -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',"
@@ -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);
 

package/package.json

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