plusui-native 0.2.86 → 0.2.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plusui-native",
-  "version": "0.2.86",
+  "version": "0.2.87",
   "description": "PlusUI CLI - Build C++ desktop apps modern UI ",
   "main": "src/index.js",
   "type": "module",
@@ -27,11 +27,11 @@
     "semver": "^7.6.0",
     "which": "^4.0.0",
     "execa": "^8.0.1",
-    "plusui-native-builder": "^0.1.84",
-    "plusui-native-connect": "^0.1.84"
+    "plusui-native-builder": "^0.1.85",
+    "plusui-native-connect": "^0.1.85"
   },
   "peerDependencies": {
-    "plusui-native-connect": "^0.1.84"
+    "plusui-native-connect": "^0.1.85"
   },
   "publishConfig": {
     "access": "public"

package/templates/react/frontend/src/App.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 import plusui from 'plusui';
-// Generated by `plusui connect` — channel objects auto-created from name.on / name.emit usage:
-import { customFileDrop } from '../../Connections/connections.gen';
+// Built-in features are exposed directly on the plusui object
 
 function App() {
   const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
@@ -10,7 +9,7 @@ function App() {
   const [canGoBack, setCanGoBack] = useState(false);
   const [canGoForward, setCanGoForward] = useState(false);
 
-  // customFileDrop connect channel state
+  // Native FileDrop state
   const [isDragging, setIsDragging] = useState(false);
   const [droppedFiles, setDroppedFiles] = useState<{ name: string; size: number; type: string }[]>([]);
   const [backendMsg, setBackendMsg] = useState<string | null>(null);
@@ -38,14 +37,20 @@ function App() {
     plusui.browser.canGoBack().then(setCanGoBack);
     plusui.browser.canGoForward().then(setCanGoForward);
 
-    // Listen for responses emitted from C++ via ch.customFileDrop.emit(...) in main.cpp
-    const unsubChannel = customFileDrop.on((data: any) => {
-      setBackendMsg(data?.message ?? JSON.stringify(data));
+    // Listen for native file drops
+    const unsubFileDrop = plusui.fileDrop.onFilesDropped((files: any[]) => {
+      setDroppedFiles(files);
+      setBackendMsg(`Native FileDrop: Received ${files.length} file(s)`);
     });
 
+    const unsubDragEnter = plusui.fileDrop.onDragEnter(() => setIsDragging(true));
+    const unsubDragLeave = plusui.fileDrop.onDragLeave(() => setIsDragging(false));
+
     return () => {
       unsubNav();
-      unsubChannel();
+      unsubFileDrop();
+      unsubDragEnter();
+      unsubDragLeave();
     };
   }, []);
 
@@ -69,26 +74,14 @@ function App() {
   // App control
   const handleQuit = async () => await plusui.app.quit();
 
-  // customFileDrop drag handlers — use HTML5 drag events to collect files, then
-  // emit them to the C++ backend via the connect channel
-  const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(true); };
-  const handleDragLeave = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); };
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-    const items = Array.from(e.dataTransfer.files).map(f => ({
-      name: f.name, size: f.size, type: f.type || 'unknown',
-    }));
-    setDroppedFiles(items);
-    setBackendMsg(null);
-    // Emit to C++ — ch.customFileDrop.on() in main.cpp receives this
-    customFileDrop.emit({ files: items });
-  };
+  // Native FileDrop handlers
+  // The C++ native window automatically detects elements with class 'filedrop-zone'.
+  // We do not need HTML5 drag events, the C++ backend emits events directly.
 
   return (
     <div className="app">
       <header className="app-header">
-        <h1>{{ PROJECT_NAME }}</h1>
+        <h1>{'{{ PROJECT_NAME }}'}</h1>
         <p>Built with PlusUI Framework</p>
       </header>
 
@@ -138,20 +131,16 @@ function App() {
         </div>
 
         <div className="card">
-          <h2>Custom Channel — File Drop</h2>
+          <h2>Native FileDrop API</h2>
           <p style={{ fontSize: '0.85em', color: '#aaa', marginBottom: '1rem' }}>
-            Drop files below. The frontend calls <code>customFileDrop.emit()</code> to send file
-            info to C++. The C++ handler calls <code>ch.customFileDrop.emit()</code> to reply.
-            The frontend receives the reply via <code>customFileDrop.on()</code>. Run{' '}
-            <code>plusui connect</code> to regenerate the channel bindings from both sides.
+            Drop files below. The <code>plusui.fileDrop</code> API is handled natively in C++
+            which overrides standard browser drag-and-drop. It automatically detects elements
+            with the <code>.filedrop-zone</code> class or <code>data-dropzone="true"</code>.
           </p>
 
           <div
             className={`filedrop-zone ${isDragging ? 'filedrop-active' : ''}`}
-            onDragOver={handleDragOver}
-            onDragEnter={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
+            data-dropzone="true"
           >
             <div className="filedrop-content">
               <svg className="filedrop-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">

package/templates/react/main.cpp.template

@@ -200,25 +200,22 @@ int main() {
     initChannels(conn);
     
     // ========================================
-    // CUSTOM FILE DROP CHANNEL
+    // NATIVE FILE DROP
     // ========================================
-    // customFileDrop is a connect channel detected by `plusui connect`.
-    // Frontend drops files → emits via customFileDrop.emit({ files: [...] })
-    // C++ receives here, processes, then emits back to the frontend.
-    // Frontend receives the reply via customFileDrop.on() in App.tsx.
-    customFileDrop.on([](const json& payload) {
-        auto files = payload.value("files", json::array());
-        int count = static_cast<int>(files.size());
-        std::cout << "customFileDrop: received " << count << " file(s) from frontend" << std::endl;
-        for (const auto& f : files) {
-            std::cout << "  - " << f.value("name", "?") << " (" << f.value("size", 0) << " bytes)" << std::endl;
+    // The PlusUI native file drop feature is enabled in WindowConfig.
+    // Frontend dropped files are automatically passed to C++ as JSON.
+    // Frontend also receives the 'plusui:fileDrop.filesDropped' event automatically.
+    mainWindow.onFileDrop([](const std::string& filesJson) {
+        try {
+            auto files = json::parse(filesJson);
+            int count = static_cast<int>(files.size());
+            std::cout << "Native FileDrop: received " << count << " file(s)" << std::endl;
+            for (const auto& f : files) {
+                std::cout << "  - " << f.value("name", "?") << " (" << f.value("size", 0) << " bytes)" << std::endl;
+            }
+        } catch (const std::exception& e) {
+            std::cout << "Native FileDrop Error: " << e.what() << std::endl;
         }
-        // Reply back to frontend — received by customFileDrop.on() in App.tsx
-        customFileDrop.emit({
-            {"processed", true},
-            {"count", count},
-            {"message", "C++ received " + std::to_string(count) + " file(s)"}
-        });
     });
     
     // ========================================

package/templates/solid/frontend/src/App.tsx

@@ -1,7 +1,6 @@
 import { createSignal, onMount, onCleanup, Show, For } from 'solid-js';
 import plusui from 'plusui';
-// Generated by `plusui connect` — channel objects auto-created from name.on / name.emit usage:
-import { customFileDrop } from '../../Connections/connections.gen';
+// Built-in features are exposed directly on the plusui object
 
 function App() {
   const [windowSize, setWindowSize] = createSignal({ width: 0, height: 0 });
@@ -10,7 +9,7 @@ function App() {
   const [canGoBack, setCanGoBack] = createSignal(false);
   const [canGoForward, setCanGoForward] = createSignal(false);
 
-  // customFileDrop connect channel state
+  // Native FileDrop state
   const [isDragging, setIsDragging] = createSignal(false);
   const [droppedFiles, setDroppedFiles] = createSignal<{ name: string; size: number; type: string }[]>([]);
   const [backendMsg, setBackendMsg] = createSignal<string | null>(null);
@@ -34,14 +33,20 @@ function App() {
     plusui.browser.canGoBack().then(setCanGoBack);
     plusui.browser.canGoForward().then(setCanGoForward);
 
-    // Listen for responses emitted from C++ via ch.customFileDrop.emit(...) in main.cpp
-    const unsubFileDrop = customFileDrop.on((data: any) => {
-      setBackendMsg(data?.message ?? JSON.stringify(data));
+    // Listen for native file drops
+    const unsubFileDrop = plusui.fileDrop.onFilesDropped((files: any[]) => {
+      setDroppedFiles(files);
+      setBackendMsg(`Native FileDrop: Received ${files.length} file(s)`);
     });
 
+    const unsubDragEnter = plusui.fileDrop.onDragEnter(() => setIsDragging(true));
+    const unsubDragLeave = plusui.fileDrop.onDragLeave(() => setIsDragging(false));
+
     onCleanup(() => {
       unsubNav();
       unsubFileDrop();
+      unsubDragEnter();
+      unsubDragLeave();
     });
   });
 
@@ -65,26 +70,14 @@ function App() {
   // App control
   const handleQuit = async () => await plusui.app.quit();
 
-  // customFileDrop drag handlers — use HTML5 drag events to collect files, then
-  // emit them to the C++ backend via the connect channel
-  const handleDragOver = (e: DragEvent) => { e.preventDefault(); setIsDragging(true); };
-  const handleDragLeave = (e: DragEvent) => { e.preventDefault(); setIsDragging(false); };
-  const handleDrop = (e: DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-    const items = Array.from(e.dataTransfer?.files ?? []).map(f => ({
-      name: f.name, size: f.size, type: f.type || 'unknown',
-    }));
-    setDroppedFiles(items);
-    setBackendMsg(null);
-    // Emit to C++ — ch.customFileDrop.on() in main.cpp receives this
-    customFileDrop.emit({ files: items });
-  };
+  // Native FileDrop handlers
+  // The C++ native window automatically detects elements with class 'filedrop-zone'.
+  // We do not need HTML5 drag events, the C++ backend emits events directly.
 
   return (
     <div class="app">
       <header class="app-header">
-        <h1>{{ PROJECT_NAME }} App</h1>
+        <h1>{'{{ PROJECT_NAME }}'} App</h1>
         <p>Built with PlusUI Framework</p>
       </header>
 
@@ -134,20 +127,16 @@ function App() {
         </div>
 
         <div class="card">
-          <h2>Custom Channel — File Drop</h2>
+          <h2>Native FileDrop API</h2>
           <p style={{ 'font-size': '0.85em', color: '#aaa', 'margin-bottom': '1rem' }}>
-            Drop files below. The frontend calls <code>customFileDrop.emit()</code> to send file
-            info to C++. The C++ handler calls <code>ch.customFileDrop.emit()</code> to reply.
-            The frontend receives the reply via <code>customFileDrop.on()</code>. Run{' '}
-            <code>plusui connect</code> to regenerate the channel bindings from both sides.
+            Drop files below. The <code>plusui.fileDrop</code> API is handled natively in C++
+            which overrides standard browser drag-and-drop. It automatically detects elements
+            with the <code>.filedrop-zone</code> class or <code>data-dropzone="true"</code>.
           </p>
 
           <div
             class={`filedrop-zone ${isDragging() ? 'filedrop-active' : ''}`}
-            onDragOver={handleDragOver}
-            onDragEnter={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
+            data-dropzone="true"
           >
             <div class="filedrop-content">
               <svg class="filedrop-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">

package/templates/solid/main.cpp.template

@@ -194,25 +194,22 @@ int main() {
     initChannels(conn);
     
     // ========================================
-    // CUSTOM FILE DROP CHANNEL
+    // NATIVE FILE DROP
     // ========================================
-    // customFileDrop is a connect channel detected by `plusui connect`.
-    // Frontend drops files → emits via customFileDrop.emit({ files: [...] })
-    // C++ receives here, processes, then emits back to the frontend.
-    // Frontend receives the reply via customFileDrop.on() in App.tsx.
-    customFileDrop.on([](const json& payload) {
-        auto files = payload.value("files", json::array());
-        int count = static_cast<int>(files.size());
-        std::cout << "customFileDrop: received " << count << " file(s) from frontend" << std::endl;
-        for (const auto& f : files) {
-            std::cout << "  - " << f.value("name", "?") << " (" << f.value("size", 0) << " bytes)" << std::endl;
+    // The PlusUI native file drop feature is enabled in WindowConfig.
+    // Frontend dropped files are automatically passed to C++ as JSON.
+    // Frontend also receives the 'plusui:fileDrop.filesDropped' event automatically.
+    mainWindow.onFileDrop([](const std::string& filesJson) {
+        try {
+            auto files = json::parse(filesJson);
+            int count = static_cast<int>(files.size());
+            std::cout << "Native FileDrop: received " << count << " file(s)" << std::endl;
+            for (const auto& f : files) {
+                std::cout << "  - " << f.value("name", "?") << " (" << f.value("size", 0) << " bytes)" << std::endl;
+            }
+        } catch (const std::exception& e) {
+            std::cout << "Native FileDrop Error: " << e.what() << std::endl;
         }
-        // Reply back to frontend — received by customFileDrop.on() in App.tsx
-        customFileDrop.emit({
-            {"processed", true},
-            {"count", count},
-            {"message", "C++ received " + std::to_string(count) + " file(s)"}
-        });
     });
     
     // ========================================