plusui-native-core 0.1.98 → 0.1.101

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

@@ -1,43 +1,2 @@
-/**
- * FileDrop API
- *
- * Handle files dragged and dropped onto the application window.
- * Also supports initiating drag operations from the app.
- *
- * Actions:
- *   fileDrop.setEnabled(enabled)       - Enable or disable file drop
- *   fileDrop.isEnabled()               - Check if file drop is enabled
- *   fileDrop.startDrag(filePaths)      - Start a drag operation with the given files
- *   fileDrop.clearCallbacks()          - Remove all registered drop callbacks
- *
- * Events:
- *   fileDrop.onFilesDropped(cb)        - Fires when files are dropped onto the window
- *   fileDrop.onDragEnter(cb)           - Fires when a drag enters the window
- *   fileDrop.onDragLeave(cb)           - Fires when a drag leaves the window
- *
- * Helpers (pure functions):
- *   readFileAsText(path)               - Read a file path as a text string
- *   readFileAsDataUrl(path)            - Read a file path as a base64 data URL
- *   filterFilesByExtension(files, ext) - Filter FileInfo[] by extension(s)
- *   filterFilesByMimeType(files, mime) - Filter FileInfo[] by MIME type(s)
- *   isImageFile(file)                  - Check if FileInfo is an image
- *   isVideoFile(file)                  - Check if FileInfo is a video
- *   isAudioFile(file)                  - Check if FileInfo is audio
- *   isTextFile(file)                   - Check if FileInfo is a text file
- *   formatFileSize(bytes)              - Format byte count as a human-readable string
- */
-
-export type { FileInfo, DragEvent, FileDropAPI } from '../FileDrop/filedrop';
-
-export {
-  fileDrop,
-  readFileAsText,
-  readFileAsDataUrl,
-  filterFilesByExtension,
-  filterFilesByMimeType,
-  isImageFile,
-  isVideoFile,
-  isAudioFile,
-  isTextFile,
-  formatFileSize,
-} from '../FileDrop/filedrop';
+export type { FileInfo, DropZone } from '../FileDrop/filedrop';
+export { fileDrop, formatFileSize, createDropZone } from '../FileDrop/filedrop';

package/Core/Features/API/index.ts

@@ -1,9 +1,5 @@
 /**
  * PlusUI API
- * 
- * window.show(), window.hide(), window.close()
- * window.maximize(), window.minimize(), window.restore()
- * window.setSize(w, h), window.setPosition(x, y)
  */
 
 export { window, win } from './window-api';
@@ -14,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 } from './filedrop-api';
+export { fileDrop, formatFileSize, createDropZone } from './filedrop-api';
 export { menu } from './menu-api';
 export { gpu, GPUBufferUsage, GPUTextureUsage, GPUMapMode, GPUShaderStage, GPUColorWrite } from './webgpu-api';
 
@@ -22,19 +18,17 @@ export { connect, createChannel, type Channel } from './Connect_API';
 export { _client } from '../Connection/connect';
 
 export type { WindowSize, WindowPosition, WindowRect } from './window-api';
+export type { FileInfo, DropZone } from './filedrop-api';
 export type { ClipboardAPI } from './clipboard-api';
 export type { KeyEvent, Shortcut } from './keyboard-api';
 export type { TrayMenuItem, TrayIconData } from './tray-api';
 export type { Display, DisplayMode, DisplayBounds, DisplayResolution } from './display-api';
-export type { FileInfo, FileDropAPI } from './filedrop-api';
 export type { MenuItem, MenuItemType, MenuBarData, ContextMenuOptions, ContextInfo } from './menu-api';
 export type { AppConfig } from './app-api';
 export type { GPUAdapter, GPUDevice, GPUBuffer, GPUTexture, GPUShaderModule, GPURenderPipeline, GPUComputePipeline, GPUQueue, GPUCommandEncoder } from './webgpu-api';
 export type { BrowserState, NavigateCallback, StateCallback, LoadCallback, ErrorCallback } from './browser-api';
 export type { RouteMap, RouteChangeCallback, RouteConfig } from './router-api';
 
-export { readFileAsText, readFileAsDataUrl, filterFilesByExtension, filterFilesByMimeType, isImageFile, isVideoFile, isAudioFile, isTextFile } from './filedrop-api';
-
 import { window, win } from './window-api';
 import { clipboard } from './clipboard-api';
 import { app } from './app-api';
@@ -43,7 +37,7 @@ import { router } from './router-api';
 import { keyboard, KeyCode, KeyMod } from './keyboard-api';
 import { tray } from './tray-api';
 import { display } from './display-api';
-import { fileDrop, formatFileSize } from './filedrop-api';
+import { fileDrop, formatFileSize, createDropZone } from './filedrop-api';
 import { menu } from './menu-api';
 import { gpu, GPUBufferUsage, GPUTextureUsage, GPUMapMode, GPUShaderStage, GPUColorWrite } from './webgpu-api';
 import { connect, createChannel } from './Connect_API';
@@ -60,6 +54,7 @@ const plusui = {
   tray,
   display,
   fileDrop,
+  createDropZone,
   menu,
   gpu,
   connect,

package/Core/Features/FileDrop/filedrop.ts

@@ -1,15 +1,3 @@
-/**
- * FileDrop API - Cross-platform drag & drop file handling
- * 
- * Direct method calls - no .on/.emit
- * 
- * Usage:
- *   import { fileDrop } from '@plusui/api';
- *   
- *   await fileDrop.setEnabled(true);
- *   fileDrop.onFilesDropped((files) => { ... });
- */
-
 export interface FileInfo {
   path: string;
   name: string;
@@ -17,147 +5,107 @@ export interface FileInfo {
   size: number;
 }
 
-export interface DragEvent {
-  x?: number;
-  y?: number;
-}
-
-export interface FileDropAPI {
-  setEnabled(enabled: boolean): Promise<void>;
-  isEnabled(): Promise<boolean>;
-  startDrag(filePaths: string[]): Promise<boolean>;
-  clearCallbacks(): Promise<void>;
-  onFilesDropped(callback: (files: FileInfo[]) => void): () => void;
-  onDragEnter(callback: (event: DragEvent) => void): () => void;
-  onDragLeave(callback: (event: DragEvent) => void): () => void;
-}
-
-let _invoke: ((name: string, args?: unknown[]) => Promise<unknown>) | null = null;
-let _event: ((event: string, callback: (data: unknown) => void) => () => void) | null = null;
+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 }>();
 
-export function setInvokeFn(fn: (name: string, args?: unknown[]) => Promise<unknown>) {
-  _invoke = fn;
+function getGlobal(): any {
+  if (typeof window !== 'undefined') return window;
+  if (typeof globalThis !== 'undefined') return globalThis;
+  return {};
 }
 
-export function setEventFn(fn: (event: string, callback: (data: unknown) => void) => () => void) {
-  _event = fn;
-}
-
-async function invoke<T = unknown>(name: string, args?: unknown[]): Promise<T> {
-  if (!_invoke) {
-    if (typeof window !== 'undefined' && (window as any).__invoke__) {
-      _invoke = (window as any).__invoke__;
-    } else {
-      throw new Error('FileDrop API not initialized');
-    }
-  }
-  return _invoke!(name, args) as Promise<T>;
-}
+const g = getGlobal();
 
-function eventHandler(event: string, callback: (data: unknown) => void): () => void {
-  if (!_event) {
-    if (typeof window !== 'undefined' && (window as any).__on__) {
-      _event = (window as any).__on__;
-    } else {
-      return () => {};
-    }
+g.__response__ = function(id: string, result: any, error?: any) {
+  const p = pending.get(id);
+  if (p) {
+    pending.delete(id);
+    error ? p.reject(new Error(error)) : p.resolve(result);
   }
-  return _event!(event, callback);
-}
-
-export const fileDrop: FileDropAPI = {
-  async setEnabled(enabled: boolean): Promise<void> {
-    await invoke('fileDrop.setEnabled', [enabled]);
-  },
-
-  async isEnabled(): Promise<boolean> {
-    return invoke<boolean>('fileDrop.isEnabled');
-  },
-
-  async startDrag(filePaths: string[]): Promise<boolean> {
-    if (!filePaths || filePaths.length === 0) {
-      throw new Error('filePaths must be a non-empty array');
-    }
-    return invoke<boolean>('fileDrop.startDrag', [filePaths]);
-  },
-
-  async clearCallbacks(): Promise<void> {
-    await invoke('fileDrop.clearCallbacks');
-  },
-
-  onFilesDropped(callback: (files: FileInfo[]) => void): () => void {
-    return eventHandler('fileDrop:filesDropped', callback as (data: unknown) => void);
-  },
-
-  onDragEnter(callback: (event: DragEvent) => void): () => void {
-    return eventHandler('fileDrop:dragEnter', callback as (data: unknown) => void);
-  },
-
-  onDragLeave(callback: (event: DragEvent) => void): () => void {
-    return eventHandler('fileDrop:dragLeave', callback as (data: unknown) => void);
-  },
 };
 
-export async function readFileAsText(filePath: string): Promise<string> {
-  const response = await fetch(`file://${filePath}`);
-  return await response.text();
-}
+g.__plusui_fileDrop__ = function(zoneName: string, files: FileInfo[]) {
+  const zone = zoneCallbacks.get(zoneName);
+  if (zone && zone.onFiles) zone.onFiles(files);
+};
 
-export async function readFileAsDataUrl(filePath: string): Promise<string> {
-  const response = await fetch(`file://${filePath}`);
-  const blob = await response.blob();
+async function invoke<T>(method: string, params: any[] = []): Promise<T> {
   return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(reader.result as string);
-    reader.onerror = reject;
-    reader.readAsDataURL(blob);
-  });
-}
-
-export function filterFilesByExtension(
-  files: FileInfo[],
-  extensions: string[]
-): FileInfo[] {
-  const lowerExtensions = extensions.map((ext) => ext.toLowerCase());
-  return files.filter((file) => {
-    const ext = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
-    return lowerExtensions.includes(ext);
+    const id = String(++callId);
+    pending.set(id, { resolve, reject });
+    const payload = JSON.stringify({ id, method, params });
+
+    if (g.__native_invoke__) {
+      g.__native_invoke__(payload);
+    } else if (g.chrome && g.chrome.webview && g.chrome.webview.postMessage) {
+      g.chrome.webview.postMessage(payload);
+    } else {
+      pending.delete(id);
+      console.warn('[PlusUI] ' + method + ' - native bridge not ready');
+      resolve(null as T);
+    }
   });
 }
 
-export function filterFilesByMimeType(
-  files: FileInfo[],
-  mimeTypes: string[]
-): FileInfo[] {
-  return files.filter((file) => mimeTypes.includes(file.type));
+export interface DropZone {
+  onFiles: (callback: (files: FileInfo[]) => void) => () => void;
+  element: HTMLElement | null;
 }
 
-export function isImageFile(file: FileInfo): boolean {
-  return file.type.startsWith('image/');
-}
-
-export function isVideoFile(file: FileInfo): boolean {
-  return file.type.startsWith('video/');
-}
+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)
+    // The C++ backend handles actual file delivery via WM_DROPFILES
+    element.addEventListener('drop', (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      element.classList.remove('dropzone-active');
+    });
+    
+    // Visual feedback: the injected C++ script manages dropzone-active
+    // via document-level listeners, but we also handle cleanup here
+    element.addEventListener('dragleave', (e: DragEvent) => {
+      // Only remove if actually leaving the element (not entering a child)
+      const related = e.relatedTarget as Node | null;
+      if (!related || !element.contains(related)) {
+        element.classList.remove('dropzone-active');
+      }
+    });
+    
+    element.addEventListener('dragover', (e: DragEvent) => {
+      e.preventDefault();
+      if (e.dataTransfer) {
+        try { e.dataTransfer.dropEffect = 'copy'; } catch (_) {}
+      }
+    });
+  }
 
-export function isAudioFile(file: FileInfo): boolean {
-  return file.type.startsWith('audio/');
+  return {
+    element,
+    onFiles: (callback: (files: FileInfo[]) => void) => {
+      zoneCallbacks.set(name, { onFiles: callback });
+      return () => zoneCallbacks.delete(name);
+    }
+  };
 }
 
-export function isTextFile(file: FileInfo): boolean {
-  return file.type.startsWith('text/') || 
-         file.type === 'application/json' ||
-         file.type === 'application/xml';
-}
+export const fileDrop = {
+  setEnabled: (enabled: boolean) => invoke<void>('fileDrop.setEnabled', [enabled]),
+  isEnabled: () => invoke<boolean>('fileDrop.isEnabled'),
+  createDropZone,
+};
 
 export function formatFileSize(bytes: number): string {
-  if (bytes === 0) return '0 Bytes';
-  
+  if (bytes === 0) return '0 B';
   const k = 1024;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const sizes = ['B', 'KB', 'MB', 'GB'];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
 }
 
 export default fileDrop;