plusui-native 0.2.8 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plusui-native",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "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.8",
-    "plusui-native-bindgen": "^0.1.8"
+    "plusui-native-builder": "^0.1.9",
+    "plusui-native-bindgen": "^0.1.9"
   },
   "peerDependencies": {
-    "plusui-native-bindgen": "^0.1.8"
+    "plusui-native-bindgen": "^0.1.9"
   },
   "publishConfig": {
     "access": "public"

package/src/index.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 import { mkdir, readFile, stat, rm, readdir, writeFile, copyFile } from 'fs/promises';
 import { existsSync, watch, statSync, mkdirSync } from 'fs';
@@ -198,8 +198,8 @@ function runCMake(args, options = {}) {
 function getAppBindgenPaths() {
     return {
         featuresDir: join(process.cwd(), 'src', 'features'),
-        outputDir: join(process.cwd(), 'src', 'Bindings_Generated'),
-        frontendOutputDir: join(process.cwd(), 'frontend', 'src', 'Bindings_Generated'),
+        outputDir: join(process.cwd(), 'src', 'Bindings'),
+        frontendOutputDir: join(process.cwd(), 'frontend', 'src', 'Bindings'),
     };
 }
 
@@ -261,11 +261,20 @@ function ensureBuildLayout() {
     }
 }
 
+function getDevBuildDir() {
+    const platformFolder = PLATFORMS[process.platform]?.folder || 'Windows';
+    return join('.plusui', 'dev', platformFolder);
+}
+
 function resolveBindgenScriptPath() {
     const candidates = [
+        resolve(__dirname, '../../plusui-bindgen/src/advanced-bindgen.js'),
         resolve(__dirname, '../../plusui-bindgen/src/index.js'),
+        resolve(__dirname, '../../plusui-native-bindgen/src/advanced-bindgen.js'),
         resolve(__dirname, '../../plusui-native-bindgen/src/index.js'),
+        resolve(__dirname, '../../../plusui-native-bindgen/src/advanced-bindgen.js'),
         resolve(__dirname, '../../../plusui-native-bindgen/src/index.js'),
+        resolve(process.cwd(), 'node_modules', 'plusui-native-bindgen', 'src', 'advanced-bindgen.js'),
         resolve(process.cwd(), 'node_modules', 'plusui-native-bindgen', 'src', 'index.js'),
     ];
 
@@ -556,8 +565,7 @@ async function startBackend() {
     const projectName = getProjectName();
     killProcessByName(projectName);
 
-    const platformFolder = PLATFORMS[process.platform]?.folder || 'Windows';
-    const buildDir = join('build', platformFolder, 'dev');
+    const buildDir = getDevBuildDir();
 
     // Configure with dev mode if not configured
     if (!existsSync(join(buildDir, 'CMakeCache.txt'))) {
@@ -733,8 +741,7 @@ function devBackend() {
     const projectName = getProjectName();
     killProcessByName(projectName);
 
-    const platformFolder = PLATFORMS[process.platform]?.folder || 'Windows';
-    const buildDir = join('build', platformFolder, 'dev');
+    const buildDir = getDevBuildDir();
 
     if (!existsSync(join(buildDir, 'CMakeCache.txt'))) {
         log('Configuring CMake...', 'blue');
@@ -841,7 +848,7 @@ async function clean() {
     ensureProjectRoot('clean');
     logSection('Cleaning Build Artifacts');
 
-    const dirs = ['build', 'frontend/dist'];
+    const dirs = ['build', '.plusui', 'frontend/dist'];
 
     for (const dir of dirs) {
         if (existsSync(dir)) {
@@ -881,22 +888,12 @@ async function runBindgen(providedArgs = null, options = {}) {
     let defaultFrontendOutputDir = null;
 
     if (bindgenArgs.length === 0) {
-        const { featuresDir: appFeaturesDir, outputDir: appOutputDir, frontendOutputDir } = getAppBindgenPaths();
-
-        if (existsSync(appFeaturesDir)) {
-            bindgenArgs = [appFeaturesDir, appOutputDir];
-            usedDefaultAppMode = true;
-            defaultOutputDir = appOutputDir;
-            defaultFrontendOutputDir = frontendOutputDir;
-            log(`App mode: ${appFeaturesDir} -> ${appOutputDir}`, 'dim');
-        } else {
-            if (skipIfNoInput) {
-                log(`No src/features folder found; skipping binding refresh for ${source}.`, 'dim');
-                return;
-            } else {
-                error('No bindgen input found. Create src/features in your app or pass paths: plusui bindgen <featuresDir> <outputDir>');
-            }
-        }
+        const { outputDir: appOutputDir, frontendOutputDir } = getAppBindgenPaths();
+        bindgenArgs = [process.cwd(), appOutputDir];
+        usedDefaultAppMode = true;
+        defaultOutputDir = appOutputDir;
+        defaultFrontendOutputDir = frontendOutputDir;
+        log(`Project mode: ${process.cwd()} -> ${appOutputDir}`, 'dim');
     }
     
     // Spawn node process

package/templates/base/README.md.template

@@ -27,22 +27,44 @@ This will:
 - Changes to frontend code reflect instantly
 - Auto-refresh app bindings when `src/features` exists
 
+Dev build intermediates are stored in `.plusui/dev/...` so your `build/` folder stays focused on release/platform outputs.
+
 Note: You can still run `npm run bind` manually anytime.
 
 ## Bindings (App-level)
 
-Generate bindings for your app feature headers:
+Generate bidirectional bindings for your app:
 ```bash
 npm run bind
 ```
 
 Default bindgen paths:
-- Input headers: `src/features`
-- Output: `src/Bindings_Generated`
+- Input: project root scan (frontend + backend files)
+- Output: `src/Bindings`
+
+Generated structure:
+- `src/Bindings/NativeBindings/CPP_IO`
+- `src/Bindings/NativeBindings/WEB_IO`
+- `src/Bindings/CustomBindings/CPP_IO`
+- `src/Bindings/CustomBindings/WEB_IO`
+- `include/Bindings/NativeBindings/CPP_IO` (generated `.hpp` headers)
+- `include/Bindings/CustomBindings/CPP_IO` (generated `.hpp` headers)
+
+Scan extensions:
+- `WEB_IO`: `.ts`, `.tsx`, `.js`, `.jsx`, `.mts`, `.cts`, `.html`
+- `CPP_IO`: `.h`, `.hpp`, `.hh`, `.hxx`, `.cpp`, `.cc`, `.cxx`
+
+Custom binding kinds detected:
+- `method`
+- `service`
+- `stream`
+- `event`
+
+`plusui bind` scans your whole project structure and does not require a specific feature folder.
 
 You can also pass custom paths:
 ```bash
-plusui bindgen <featuresDir> <outputDir>
+plusui bindgen <projectRoot> <outputDir>
 ```
 
 ## Assets & Icons

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

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { win, browser, router, app } from './plusui';
+import { win, browser, router, app, fileDrop, formatFileSize, type FileInfo } from './plusui';
 
 // Define routes for your app (optional - for SPA routing)
 const routes = {
@@ -14,6 +14,11 @@ function App() {
   const [currentUrl, setCurrentUrl] = useState('');
   const [canGoBack, setCanGoBack] = useState(false);
   const [canGoForward, setCanGoForward] = useState(false);
+  
+  // FileDrop state
+  const [files, setFiles] = useState<FileInfo[]>([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dropZoneStyle, setDropZoneStyle] = useState('');
 
   useEffect(() => {
     // Setup routes
@@ -26,7 +31,27 @@ function App() {
       browser.canGoForward().then(setCanGoForward);
     });
     
-    // Get initial state
+    // Setup FileDrop listeners
+    const unsubDrop = fileDrop.onFilesDropped((droppedFiles) => {
+      console.log('Files dropped:', droppedFiles);
+      setFiles(prev => [...prev, ...droppedFiles]);
+      setIsDragging(false);
+    });
+    
+    const unsubEnter = fileDrop.onDragEnter(() => {
+      setIsDragging(true);
+    });
+    
+    const unsubLeave = fileDrop.onDragLeave(() => {
+      setIsDragging(false);
+    });
+    
+    return () => {
+      unsub();
+      unsubDrop();
+      unsubEnter();
+      unsubLeave();
+    }al state
     browser.getUrl().then(setCurrentUrl);
     browser.canGoBack().then(setCanGoBack);
     browser.canGoForward().then(setCanGoForward);
@@ -101,7 +126,68 @@ function App() {
           <div className="button-group">
             <button onClick={handleGoBack} className="button" disabled={!canGoBack}>Back</button>
             <button onClick={handleGoForward} className="button" disabled={!canGoForward}>Forward</button>
-            <button onClick={handleReload} className="button">Reload</button>
+            <button onClcard">
+          <h2>FileDrop - Drag & Drop Files</h2>
+          
+          <div style={{ marginBottom: '1rem' }}>
+            <label style={{ marginRight: '0.5rem', fontSize: '0.9em' }}>Style:</label>
+            <select 
+              value={dropZoneStyle} 
+              onChange={(e) => setDropZoneStyle(e.target.value)}
+              style={{ 
+                padding: '0.5rem', 
+                borderRadius: '0.25rem', 
+                border: '1px solid rgba(255,255,255,0.3)',
+                background: 'rgba(255,255,255,0.1)',
+                color: '#fff',
+                fontSize: '0.9em'
+              }}
+            >
+              <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' : ''}`}>
+            <div className="filedrop-content">
+              <svg className="filedrop-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <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'}
+              </div>
+              <div className="filedrop-hint">All file types supported</div>
+            </div>
+          </div>
+
+          {files.length > 0 && (
+            <div className="filedrop-files">
+              {files.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">
+                      {formatFileSize(file.size)} • {file.type}
+                    </div>
+                  </div>
+                  <button 
+                    className="filedrop-file-remove"
+                    onClick={() => setFiles(files.filter((_, idx) => idx !== i))}
+                  >
+                    ✕
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="ick={handleReload} className="button">Reload</button>
           </div>
         </div>
 

package/templates/react/frontend/src/plusui.ts

@@ -115,3 +115,50 @@ export const router = {
 export const app = {
   quit: async () => invoke('app.quit', []),
 };
+
+// FileDrop API
+export interface FileInfo {
+  path: string;
+  name: string;
+  type: string;
+  size: number;
+}
+
+export const fileDrop = {
+  setEnabled: async (enabled: boolean) => invoke('fileDrop.setEnabled', [enabled]),
+  isEnabled: async (): Promise<boolean> => invoke('fileDrop.isEnabled', []) as Promise<boolean>,
+  onFilesDropped: (handler: (files: FileInfo[]) => void) => {
+    if (typeof window === 'undefined') return () => {};
+    const eventHandler = (event: Event) => {
+      const custom = event as CustomEvent<{ files?: FileInfo[] }>;
+      handler(custom.detail?.files ?? []);
+    };
+    window.addEventListener('plusui:fileDrop.filesDropped', eventHandler);
+    return () => window.removeEventListener('plusui:fileDrop.filesDropped', eventHandler);
+  },
+  onDragEnter: (handler: () => void) => {
+    if (typeof window === 'undefined') return () => {};
+    const eventHandler = () => handler();
+    window.addEventListener('plusui:fileDrop.dragEnter', eventHandler);
+    return () => window.removeEventListener('plusui:fileDrop.dragEnter', eventHandler);
+  },
+  onDragLeave: (handler: () => void) => {
+    if (typeof window === 'undefined') return () => {};
+    const eventHandler = () => handler();
+    window.addEventListener('plusui:fileDrop.dragLeave', eventHandler);
+    return () => window.removeEventListener('plusui:fileDrop.dragLeave', eventHandler);
+  },
+};
+
+// Helper functions
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+export function isImageFile(file: FileInfo): boolean {
+  return file.type.startsWith('image/');
+}

package/templates/react/frontend/src/styles/app.css

@@ -138,3 +138,191 @@ body {
   border-radius: 0.25rem;
   font-family: 'Courier New', monospace;
 }
+
+/* ============================================================================
+ * FILEDROP STYLES
+ * ============================================================================ */
+
+.filedrop-zone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 180px;
+  padding: 2rem;
+  border: 2px dashed rgba(255, 255, 255, 0.3);
+  border-radius: 0.75rem;
+  background-color: rgba(255, 255, 255, 0.05);
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  user-select: none;
+}
+
+.filedrop-zone:hover {
+  border-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.filedrop-zone.filedrop-active {
+  border-color: #60a5fa;
+  background-color: rgba(96, 165, 250, 0.1);
+  border-width: 3px;
+  transform: scale(1.02);
+  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
+}
+
+.filedrop-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+.filedrop-icon {
+  width: 3rem;
+  height: 3rem;
+  color: rgba(255, 255, 255, 0.6);
+  transition: all 0.2s ease-in-out;
+}
+
+.filedrop-zone.filedrop-active .filedrop-icon {
+  color: #60a5fa;
+  transform: scale(1.2);
+}
+
+.filedrop-text {
+  font-size: 1rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+  transition: color 0.2s ease-in-out;
+}
+
+.filedrop-zone.filedrop-active .filedrop-text {
+  color: #93c5fd;
+  font-weight: 600;
+}
+
+.filedrop-hint {
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.6);
+  transition: color 0.2s ease-in-out;
+}
+
+.filedrop-zone.filedrop-active .filedrop-hint {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.filedrop-zone.filedrop-compact {
+  min-height: 120px;
+  padding: 1.5rem;
+}
+
+.filedrop-zone.filedrop-compact .filedrop-icon {
+  width: 2rem;
+  height: 2rem;
+}
+
+.filedrop-zone.filedrop-inline {
+  min-height: 80px;
+  padding: 1rem;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 1rem;
+}
+
+.filedrop-zone.filedrop-inline .filedrop-content {
+  flex-direction: row;
+  align-items: center;
+  text-align: left;
+  gap: 0.75rem;
+}
+
+.filedrop-zone.filedrop-minimal {
+  border-style: solid;
+  border-width: 1px;
+  background-color: transparent;
+}
+
+.filedrop-zone.filedrop-bold {
+  border-width: 3px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+.filedrop-files {
+  margin-top: 1rem;
+  width: 100%;
+}
+
+.filedrop-file-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 0.5rem;
+  margin-bottom: 0.5rem;
+  transition: all 0.2s ease-in-out;
+}
+
+.filedrop-file-item:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.filedrop-file-icon {
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 0.375rem;
+  font-size: 1.2rem;
+}
+
+.filedrop-file-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.filedrop-file-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.filedrop-file-meta {
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+  margin-top: 0.125rem;
+}
+
+.filedrop-file-remove {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  pointer-events: auto;
+  background: transparent;
+  border: none;
+  font-size: 1rem;
+}
+
+.filedrop-file-remove:hover {
+  background-color: rgba(239, 68, 68, 0.2);
+  color: #fca5a5;
+}

package/templates/react/main.cpp.template

@@ -75,6 +75,7 @@ struct ServicesConfig {
     bool enableDisplay = true;    // Enable multi-display detection
     bool enableKeyboard = true;   // Enable keyboard shortcuts/hotkeys
     bool enableMenu = true;       // Enable custom menu bar
+    bool enableFileDrop = true;   // Enable drag & drop file handling
 } servicesConfig;
 
 // ============================================================================
@@ -169,6 +170,24 @@ int main() {
     // });
     // Call from JS: const version = await app.invoke('getVersion');
     
+    // ========================================
+    // FILE DROP EVENTS (Drag & Drop)
+    // ========================================
+    // Listen for files dropped into the window
+    plusui::event::on("fileDrop.filesDropped", [](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++
+    });
+    
+    plusui::event::on("fileDrop.dragEnter", [](const std::string&) {
+        std::cout << "Drag entered window" << std::endl;
+    });
+    
+    plusui::event::on("fileDrop.dragLeave", [](const std::string&) {
+        std::cout << "Drag left window" << std::endl;
+    });
+    
     // ========================================
     // RUN APPLICATION
     // ========================================
@@ -198,4 +217,8 @@ int main() {
 // DISPLAY: display.getAll(), display.getPrimary(), display.getCurrent()
 //
 // CLIPBOARD: clipboard.writeText(str), clipboard.readText(), clipboard.clear()
+//
+// FILEDROP: fileDrop.onFilesDropped(callback), fileDrop.setEnabled(bool),
+//           fileDrop.onDragEnter(callback), fileDrop.onDragLeave(callback),
+//           fileDrop.startDrag([paths])
 

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

@@ -1,5 +1,5 @@
-import { createSignal, onMount, Show } from 'solid-js';
-import { win, browser, router, app } from './plusui';
+import { createSignal, onMount, onCleanup, Show, For } from 'solid-js';
+import { win, browser, router, app, fileDrop, formatFileSize, type FileInfo } from './plusui';
 
 // Define routes for your app (optional - for SPA routing)
 const routes = {
@@ -14,6 +14,11 @@ function App() {
   const [currentUrl, setCurrentUrl] = createSignal('');
   const [canGoBack, setCanGoBack] = createSignal(false);
   const [canGoForward, setCanGoForward] = createSignal(false);
+  
+  // FileDrop state
+  const [files, setFiles] = createSignal<FileInfo[]>([]);
+  const [isDragging, setIsDragging] = createSignal(false);
+  const [dropZoneStyle, setDropZoneStyle] = createSignal('');
 
   onMount(() => {
     // Setup routes
@@ -30,6 +35,27 @@ function App() {
     browser.getUrl().then(setCurrentUrl);
     browser.canGoBack().then(setCanGoBack);
     browser.canGoForward().then(setCanGoForward);
+    
+    // Setup FileDrop listeners
+    const unsubDrop = fileDrop.onFilesDropped((droppedFiles) => {
+      console.log('Files dropped:', droppedFiles);
+      setFiles(prev => [...prev, ...droppedFiles]);
+      setIsDragging(false);
+    });
+    
+    const unsubEnter = fileDrop.onDragEnter(() => {
+      setIsDragging(true);
+    });
+    
+    const unsubLeave = fileDrop.onDragLeave(() => {
+      setIsDragging(false);
+    });
+    
+    onCleanup(() => {
+      unsubDrop();
+      unsubEnter();
+      unsubLeave();
+    });
   });
 
   const handleMinimize = async () => await win.minimize();
@@ -119,6 +145,69 @@ function App() {
           <button onClick={handleQuit} class="button button-danger">Quit App</button>
         </div>
 
+        <div class="card">
+          <h2>FileDrop - Drag & Drop Files</h2>
+          
+          <div style={{ 'margin-bottom': '1rem' }}>
+            <label style={{ 'margin-right': '0.5rem', 'font-size': '0.9em' }}>Style:</label>
+            <select 
+              value={dropZoneStyle()} 
+              onChange={(e) => setDropZoneStyle(e.target.value)}
+              style={{ 
+                padding: '0.5rem', 
+                'border-radius': '0.25rem', 
+                border: '1px solid rgba(255,255,255,0.3)',
+                background: 'rgba(255,255,255,0.1)',
+                color: '#fff',
+                'font-size': '0.9em'
+              }}
+            >
+              <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' : ''}`}>
+            <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} 
+                      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'}
+              </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) => (
+                  <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">
+                        {formatFileSize(file.size)} • {file.type}
+                      </div>
+                    </div>
+                    <button 
+                      class="filedrop-file-remove"
+                      onClick={() => setFiles(files().filter((_, idx) => idx !== i()))}
+                    >
+                      ✕
+                    </button>
+                  </div>
+                )}
+              </For>
+            </div>
+          </Show>
+        </div>
+
         <div class="info">
           <p>Edit <code>frontend/src/App.tsx</code> to modify the UI.</p>
           <p>Edit <code>main.cpp</code> to add C++ functionality.</p>

package/templates/solid/frontend/src/plusui.ts

@@ -115,3 +115,50 @@ export const router = {
 export const app = {
   quit: async () => invoke('app.quit', []),
 };
+
+// FileDrop API
+export interface FileInfo {
+  path: string;
+  name: string;
+  type: string;
+  size: number;
+}
+
+export const fileDrop = {
+  setEnabled: async (enabled: boolean) => invoke('fileDrop.setEnabled', [enabled]),
+  isEnabled: async (): Promise<boolean> => invoke('fileDrop.isEnabled', []) as Promise<boolean>,
+  onFilesDropped: (handler: (files: FileInfo[]) => void) => {
+    if (typeof window === 'undefined') return () => {};
+    const eventHandler = (event: Event) => {
+      const custom = event as CustomEvent<{ files?: FileInfo[] }>;
+      handler(custom.detail?.files ?? []);
+    };
+    window.addEventListener('plusui:fileDrop.filesDropped', eventHandler);
+    return () => window.removeEventListener('plusui:fileDrop.filesDropped', eventHandler);
+  },
+  onDragEnter: (handler: () => void) => {
+    if (typeof window === 'undefined') return () => {};
+    const eventHandler = () => handler();
+    window.addEventListener('plusui:fileDrop.dragEnter', eventHandler);
+    return () => window.removeEventListener('plusui:fileDrop.dragEnter', eventHandler);
+  },
+  onDragLeave: (handler: () => void) => {
+    if (typeof window === 'undefined') return () => {};
+    const eventHandler = () => handler();
+    window.addEventListener('plusui:fileDrop.dragLeave', eventHandler);
+    return () => window.removeEventListener('plusui:fileDrop.dragLeave', eventHandler);
+  },
+};
+
+// Helper functions
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+export function isImageFile(file: FileInfo): boolean {
+  return file.type.startsWith('image/');
+}

package/templates/solid/frontend/src/styles/app.css

@@ -138,3 +138,191 @@ body {
   border-radius: 0.25rem;
   font-family: 'Courier New', monospace;
 }
+
+/* ============================================================================
+ * FILEDROP STYLES
+ * ============================================================================ */
+
+.filedrop-zone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 180px;
+  padding: 2rem;
+  border: 2px dashed rgba(255, 255, 255, 0.3);
+  border-radius: 0.75rem;
+  background-color: rgba(255, 255, 255, 0.05);
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  user-select: none;
+}
+
+.filedrop-zone:hover {
+  border-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.filedrop-zone.filedrop-active {
+  border-color: #60a5fa;
+  background-color: rgba(96, 165, 250, 0.1);
+  border-width: 3px;
+  transform: scale(1.02);
+  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
+}
+
+.filedrop-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+.filedrop-icon {
+  width: 3rem;
+  height: 3rem;
+  color: rgba(255, 255, 255, 0.6);
+  transition: all 0.2s ease-in-out;
+}
+
+.filedrop-zone.filedrop-active .filedrop-icon {
+  color: #60a5fa;
+  transform: scale(1.2);
+}
+
+.filedrop-text {
+  font-size: 1rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+  transition: color 0.2s ease-in-out;
+}
+
+.filedrop-zone.filedrop-active .filedrop-text {
+  color: #93c5fd;
+  font-weight: 600;
+}
+
+.filedrop-hint {
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.6);
+  transition: color 0.2s ease-in-out;
+}
+
+.filedrop-zone.filedrop-active .filedrop-hint {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.filedrop-zone.filedrop-compact {
+  min-height: 120px;
+  padding: 1.5rem;
+}
+
+.filedrop-zone.filedrop-compact .filedrop-icon {
+  width: 2rem;
+  height: 2rem;
+}
+
+.filedrop-zone.filedrop-inline {
+  min-height: 80px;
+  padding: 1rem;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 1rem;
+}
+
+.filedrop-zone.filedrop-inline .filedrop-content {
+  flex-direction: row;
+  align-items: center;
+  text-align: left;
+  gap: 0.75rem;
+}
+
+.filedrop-zone.filedrop-minimal {
+  border-style: solid;
+  border-width: 1px;
+  background-color: transparent;
+}
+
+.filedrop-zone.filedrop-bold {
+  border-width: 3px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+.filedrop-files {
+  margin-top: 1rem;
+  width: 100%;
+}
+
+.filedrop-file-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 0.5rem;
+  margin-bottom: 0.5rem;
+  transition: all 0.2s ease-in-out;
+}
+
+.filedrop-file-item:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.filedrop-file-icon {
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 0.375rem;
+  font-size: 1.2rem;
+}
+
+.filedrop-file-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.filedrop-file-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.filedrop-file-meta {
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+  margin-top: 0.125rem;
+}
+
+.filedrop-file-remove {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  pointer-events: auto;
+  background: transparent;
+  border: none;
+  font-size: 1rem;
+}
+
+.filedrop-file-remove:hover {
+  background-color: rgba(239, 68, 68, 0.2);
+  color: #fca5a5;
+}

package/templates/solid/main.cpp.template

@@ -75,6 +75,7 @@ struct ServicesConfig {
     bool enableDisplay = true;    // Enable multi-display detection
     bool enableKeyboard = true;   // Enable keyboard shortcuts/hotkeys
     bool enableMenu = true;       // Enable custom menu bar
+    bool enableFileDrop = true;   // Enable drag & drop file handling
 } servicesConfig;
 
 // ============================================================================
@@ -160,6 +161,24 @@ int main() {
     // });
     // Call from JS: const version = await app.invoke('getVersion');
     
+    // ========================================
+    // FILE DROP EVENTS (Drag & Drop)
+    // ========================================
+    // Listen for files dropped into the window
+    plusui::event::on("fileDrop.filesDropped", [](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++
+    });
+    
+    plusui::event::on("fileDrop.dragEnter", [](const std::string&) {
+        std::cout << "Drag entered window" << std::endl;
+    });
+    
+    plusui::event::on("fileDrop.dragLeave", [](const std::string&) {
+        std::cout << "Drag left window" << std::endl;
+    });
+    
     // ========================================
     // RUN APPLICATION
     // ========================================
@@ -189,4 +208,8 @@ int main() {
 // DISPLAY: display.getAll(), display.getPrimary(), display.getCurrent()
 //
 // CLIPBOARD: clipboard.writeText(str), clipboard.readText(), clipboard.clear()
+//
+// FILEDROP: fileDrop.onFilesDropped(callback), fileDrop.setEnabled(bool),
+//           fileDrop.onDragEnter(callback), fileDrop.onDragLeave(callback),
+//           fileDrop.startDrag([paths])