plusui-native 0.2.62 → 0.2.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plusui-native",
-  "version": "0.2.62",
+  "version": "0.2.65",
   "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.61",
-    "plusui-native-connect": "^0.1.61"
+    "plusui-native-builder": "^0.1.64",
+    "plusui-native-connect": "^0.1.64"
   },
   "peerDependencies": {
-    "plusui-native-connect": "^0.1.61"
+    "plusui-native-connect": "^0.1.64"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
-import plusui, { type FileInfo } from 'plusui';
-// Custom channels (generated by `plusui connect`) — import what you use:
-// import { greeting, download } from '../Connections/connections.gen';
+import plusui from 'plusui';
+// Generated by `plusui connect` — channel objects auto-created from name.on / name.emit usage:
+import { customFileDrop } from '../Connections/connections.gen';
 
 // Define routes for your app (optional - for SPA routing)
 const routes = {
@@ -17,11 +17,10 @@ function App() {
   const [canGoBack, setCanGoBack] = useState(false);
   const [canGoForward, setCanGoForward] = useState(false);
   
-  // FileDrop state
-  const [files, setFiles] = useState<FileInfo[]>([]);
+  // customFileDrop connect channel state
   const [isDragging, setIsDragging] = useState(false);
-  const [dropZoneStyle, setDropZoneStyle] = useState('');
-  const [dropAccent] = useState('#60a5fa');
+  const [droppedFiles, setDroppedFiles] = useState<{ name: string; size: number; type: string }[]>([]);
+  const [backendMsg, setBackendMsg] = useState<string | null>(null);
 
   useEffect(() => {
     plusui.win.show().catch(() => {
@@ -38,21 +37,11 @@ function App() {
       plusui.browser.canGoForward().then(setCanGoForward);
     });
     
-    // Setup FileDrop listeners
-    const unsubDrop = plusui.fileDrop.onFilesDropped((droppedFiles) => {
-      console.log('Files dropped:', droppedFiles);
-      setFiles(prev => [...prev, ...droppedFiles]);
-      setIsDragging(false);
+    // 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));
     });
-    
-    const unsubEnter = plusui.fileDrop.onDragEnter(() => {
-      setIsDragging(true);
-    });
-    
-    const unsubLeave = plusui.fileDrop.onDragLeave(() => {
-      setIsDragging(false);
-    });
-    
+
     // Get initial state
     plusui.browser.getUrl().then(setCurrentUrl);
     plusui.browser.canGoBack().then(setCanGoBack);
@@ -60,9 +49,7 @@ function App() {
     
     return () => {
       unsub();
-      unsubDrop();
-      unsubEnter();
-      unsubLeave();
+      unsubChannel();
     };
   }, []);
 
@@ -90,6 +77,22 @@ 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 });
+  };
+
   return (
     <div className="app">
       <header className="app-header">
@@ -154,67 +157,57 @@ function App() {
         </div>
 
         <div className="card">
-          <h2>FileDrop - Drag & Drop Files</h2>
+          <h2>Custom Channel — File Drop</h2>
           <p style={{ fontSize: '0.85em', color: '#aaa', marginBottom: '1rem' }}>
-            Native file drop is enabled. The webview's default drag & drop behavior is disabled
-            to prevent files from opening in the browser, allowing your FileDrop handlers to work.
+            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.
           </p>
           
-          <div className="filedrop-control-row">
-            <label className="filedrop-control-label">Style:</label>
-            <select 
-              value={dropZoneStyle} 
-              onChange={(e) => setDropZoneStyle(e.target.value)}
-              className="filedrop-control-select"
-            >
-              <option value="">Default</option>
-              <option value="filedrop-compact">Compact</option>
-              <option value="filedrop-inline">Inline</option>
-              <option value="filedrop-minimal">Minimal</option>
-              <option value="filedrop-bold">Bold</option>
-            </select>
-          </div>
-
           <div
-            className={`filedrop-zone ${dropZoneStyle} ${isDragging ? 'filedrop-active' : ''}`}
-            data-dropzone="true"
-            data-filedrop-state={isDragging ? 'dragging' : 'idle'}
-            data-filedrop-style={dropZoneStyle.replace('filedrop-', '') || 'default'}
-            style={{ '--filedrop-accent': dropAccent } as React.CSSProperties}
+            className={`filedrop-zone ${isDragging ? 'filedrop-active' : ''}`}
+            onDragOver={handleDragOver}
+            onDragEnter={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
           >
             <div className="filedrop-content">
               <svg className="filedrop-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                       d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
               </svg>
               <div className="filedrop-text">
-                {isDragging ? 'Drop files here' : 'Drag & drop files'}
+                {isDragging ? 'Drop files here' : 'Drag & drop files to send to C++'}
               </div>
-              <div className="filedrop-hint">All file types supported</div>
             </div>
           </div>
 
-          {files.length > 0 && (
-            <div className="filedrop-files">
-              {files.map((file, i) => (
+          {droppedFiles.length > 0 && (
+            <div className="filedrop-files" style={{ marginTop: '1rem' }}>
+              <p style={{ fontSize: '0.8em', color: '#888', marginBottom: '0.5rem' }}>
+                Sent to C++ via <code>customFileDrop.emit()</code>:
+              </p>
+              {droppedFiles.map((file, i) => (
                 <div key={i} className="filedrop-file-item">
                   <div className="filedrop-file-icon">📄</div>
                   <div className="filedrop-file-info">
                     <div className="filedrop-file-name">{file.name}</div>
-                    <div className="filedrop-file-meta">
-                      {plusui.formatFileSize(file.size)} • {file.type}
-                    </div>
+                    <div className="filedrop-file-meta">{plusui.formatFileSize(file.size)} • {file.type}</div>
                   </div>
-                  <button 
-                    className="filedrop-file-remove"
-                    onClick={() => setFiles(files.filter((_, idx) => idx !== i))}
-                  >
-                    ✕
-                  </button>
                 </div>
               ))}
             </div>
           )}
+
+          {backendMsg !== null && (
+            <div style={{ marginTop: '1rem', padding: '0.75rem 1rem', background: '#1a2e1a', border: '1px solid #2d5a2d', borderRadius: '6px' }}>
+              <p style={{ fontSize: '0.8em', color: '#4caf50', margin: 0 }}>
+                ✓ C++ replied via <code>ch.customFileDrop.emit()</code>:
+              </p>
+              <p style={{ fontSize: '0.9em', color: '#e0e0e0', margin: '0.4rem 0 0' }}>{backendMsg}</p>
+            </div>
+          )}
         </div>
 
         <div className="info">

package/templates/react/main.cpp.template

@@ -184,14 +184,25 @@ int main() {
     Connections ch(connect);  // use ch.name.on() / ch.name.emit()
     
     // ========================================
-    // FILE DROP EVENTS (Native Drag & Drop API)
+    // CUSTOM FILE DROP CHANNEL
     // ========================================
-    // Native FileDrop API - handles OS-level file drag-and-drop.
-    // Frontend dragEnter/dragLeave events are dispatched from injected WebView script.
-    mainWindow.onFileDrop([](const std::string& data) {
-        std::cout << "Files dropped: " << data << std::endl;
-        // Parse the JSON data to get file info
-        // You can process files here in C++
+    // 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.
+    ch.customFileDrop.on([&ch](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;
+        }
+        // Reply back to frontend — received by customFileDrop.on() in App.tsx
+        ch.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,7 @@
 import { createSignal, onMount, onCleanup, Show, For } from 'solid-js';
-import plusui, { type FileInfo } from 'plusui';
-// Custom channels (generated by `plusui connect`) — import what you use:
-// import { greeting, download } from '../Connections/connections.gen';
+import plusui from 'plusui';
+// Generated by `plusui connect` — channel objects auto-created from name.on / name.emit usage:
+import { customFileDrop } from '../Connections/connections.gen';
 
 // Define routes for your app (optional - for SPA routing)
 const routes = {
@@ -17,11 +17,10 @@ function App() {
   const [canGoBack, setCanGoBack] = createSignal(false);
   const [canGoForward, setCanGoForward] = createSignal(false);
   
-  // FileDrop state
-  const [files, setFiles] = createSignal<FileInfo[]>([]);
+  // customFileDrop connect channel state
   const [isDragging, setIsDragging] = createSignal(false);
-  const [dropZoneStyle, setDropZoneStyle] = createSignal('');
-  const [dropAccent] = createSignal('#60a5fa');
+  const [droppedFiles, setDroppedFiles] = createSignal<{ name: string; size: number; type: string }[]>([]);
+  const [backendMsg, setBackendMsg] = createSignal<string | null>(null);
 
   onMount(() => {
     // Setup routes
@@ -39,26 +38,11 @@ function App() {
     plusui.browser.canGoBack().then(setCanGoBack);
     plusui.browser.canGoForward().then(setCanGoForward);
     
-    // Setup FileDrop listeners
-    const unsubDrop = plusui.fileDrop.onFilesDropped((droppedFiles) => {
-      console.log('Files dropped:', droppedFiles);
-      setFiles(prev => [...prev, ...droppedFiles]);
-      setIsDragging(false);
-    });
-    
-    const unsubEnter = plusui.fileDrop.onDragEnter(() => {
-      setIsDragging(true);
-    });
-    
-    const unsubLeave = plusui.fileDrop.onDragLeave(() => {
-      setIsDragging(false);
-    });
-    
-    onCleanup(() => {
-      unsubDrop();
-      unsubEnter();
-      unsubLeave();
+    // Listen for responses emitted from C++ via ch.customFileDrop.emit(...) in main.cpp
+    const unsub = customFileDrop.on((data: any) => {
+      setBackendMsg(data?.message ?? JSON.stringify(data));
     });
+    onCleanup(() => unsub());
   });
 
   const handleMinimize = async () => await plusui.win.minimize();
@@ -85,6 +69,22 @@ 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 });
+  };
+
   return (
     <div class="app">
       <header class="app-header">
@@ -149,69 +149,59 @@ function App() {
         </div>
 
         <div class="card">
-          <h2>FileDrop - Drag & Drop Files</h2>
+          <h2>Custom Channel — File Drop</h2>
           <p style={{ 'font-size': '0.85em', color: '#aaa', 'margin-bottom': '1rem' }}>
-            Native file drop is enabled. The webview's default drag & drop behavior is disabled
-            to prevent files from opening in the browser, allowing your FileDrop handlers to work.
+            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.
           </p>
           
-          <div class="filedrop-control-row">
-            <label class="filedrop-control-label">Style:</label>
-            <select 
-              value={dropZoneStyle()} 
-              onChange={(e) => setDropZoneStyle(e.target.value)}
-              class="filedrop-control-select"
-            >
-              <option value="">Default</option>
-              <option value="filedrop-compact">Compact</option>
-              <option value="filedrop-inline">Inline</option>
-              <option value="filedrop-minimal">Minimal</option>
-              <option value="filedrop-bold">Bold</option>
-            </select>
-          </div>
-
           <div
-            class={`filedrop-zone ${dropZoneStyle()} ${isDragging() ? 'filedrop-active' : ''}`}
-            data-dropzone="true"
-            data-filedrop-state={isDragging() ? 'dragging' : 'idle'}
-            data-filedrop-style={dropZoneStyle().replace('filedrop-', '') || 'default'}
-            style={{ '--filedrop-accent': dropAccent() }}
+            class={`filedrop-zone ${isDragging() ? 'filedrop-active' : ''}`}
+            onDragOver={handleDragOver}
+            onDragEnter={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
           >
             <div class="filedrop-content">
               <svg class="filedrop-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} 
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2}
                       d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
               </svg>
               <div class="filedrop-text">
-                {isDragging() ? 'Drop files here' : 'Drag & drop files'}
+                {isDragging() ? 'Drop files here' : 'Drag & drop files to send to C++'}
               </div>
-              <div class="filedrop-hint">All file types supported</div>
             </div>
           </div>
 
-          <Show when={files().length > 0}>
-            <div class="filedrop-files">
-              <For each={files()}>
-                {(file, i) => (
+          <Show when={droppedFiles().length > 0}>
+            <div class="filedrop-files" style={{ 'margin-top': '1rem' }}>
+              <p style={{ 'font-size': '0.8em', color: '#888', 'margin-bottom': '0.5rem' }}>
+                Sent to C++ via <code>customFileDrop.emit()</code>:
+              </p>
+              <For each={droppedFiles()}>
+                {(file) => (
                   <div class="filedrop-file-item">
                     <div class="filedrop-file-icon">📄</div>
                     <div class="filedrop-file-info">
                       <div class="filedrop-file-name">{file.name}</div>
-                      <div class="filedrop-file-meta">
-                        {plusui.formatFileSize(file.size)} • {file.type}
-                      </div>
+                      <div class="filedrop-file-meta">{plusui.formatFileSize(file.size)} • {file.type}</div>
                     </div>
-                    <button 
-                      class="filedrop-file-remove"
-                      onClick={() => setFiles(files().filter((_, idx) => idx !== i()))}
-                    >
-                      ✕
-                    </button>
                   </div>
                 )}
               </For>
             </div>
           </Show>
+
+          <Show when={backendMsg() !== null}>
+            <div style={{ 'margin-top': '1rem', padding: '0.75rem 1rem', background: '#1a2e1a', border: '1px solid #2d5a2d', 'border-radius': '6px' }}>
+              <p style={{ 'font-size': '0.8em', color: '#4caf50', margin: '0' }}>
+                ✓ C++ replied via <code>ch.customFileDrop.emit()</code>:
+              </p>
+              <p style={{ 'font-size': '0.9em', color: '#e0e0e0', margin: '0.4rem 0 0' }}>{backendMsg()}</p>
+            </div>
+          </Show>
         </div>
 
         <div class="info">

package/templates/solid/main.cpp.template

@@ -178,14 +178,25 @@ int main() {
     Connections ch(connect);  // use ch.name.on() / ch.name.emit()
     
     // ========================================
-    // FILE DROP EVENTS (Native Drag & Drop API)
+    // CUSTOM FILE DROP CHANNEL
     // ========================================
-    // Native FileDrop API - handles OS-level file drag-and-drop.
-    // Frontend dragEnter/dragLeave events are dispatched from injected WebView script.
-    mainWindow.onFileDrop([](const std::string& data) {
-        std::cout << "Files dropped: " << data << std::endl;
-        // Parse the JSON data to get file info
-        // You can process files here in C++
+    // 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.
+    ch.customFileDrop.on([&ch](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;
+        }
+        // Reply back to frontend — received by customFileDrop.on() in App.tsx
+        ch.customFileDrop.emit({
+            {"processed", true},
+            {"count", count},
+            {"message", "C++ received " + std::to_string(count) + " file(s)"}
+        });
     });
     
     // ========================================