plusui-native-core 0.1.102 → 0.1.103

package/Core/Features/Connection/connect.ts

@@ -1,12 +1,24 @@
 /**
  * PlusUI Connection
- * 
- * TWO METHODS. FIVE PRIMITIVES. EVERYTHING YOU NEED.
- * 
- *   name.on(callback)   - Listen for messages
- *   name.emit(data)     - Send messages
- * 
- * Built-in features (win, clipboard, app) are imported from 'plusui'.
+ *
+ * SEMANTIC SYNTAX. ZERO CONFIG. ALL 5 PATTERNS.
+ *
+ * Just write code using `connect.namespace.method()` syntax for CUSTOM
+ * frontend ↔ backend communication, then run `plusui connect` to generate bindings.
+ *
+ * Patterns are auto-detected from your code:
+ *
+ *   connect.user.fetch(123)             → Request/Response (CALL)
+ *   connect.app.onNotify(cb)            → Event Listener (SUBSCRIBE)
+ *   connect.files.startUpload(file)     → Fire & Forget (SIMPLEX)
+ *   connect.settings.onThemeChange(cb)  → Event Listener
+ *
+ * BUILT-IN FEATURES - use direct imports from 'plusui':
+ *   import plusui from 'plusui';
+ *   plusui.window.minimize();
+ *   plusui.clipboard.setText('hello');
+ *   plusui.app.quit();
+ *
  * Custom channels are auto-generated by `plusui connect`.
  */
 
@@ -30,10 +42,12 @@ export type ConnectionEnvelope = {
 };
 
 type MessageCallback = (payload: any) => void;
+type CallHandler = (...args: any[]) => any;
 
 class ConnectionClient {
   private pending = new Map<string, { resolve: (v: any) => void; reject: (e: Error) => void }>();
   private listeners = new Map<string, Set<MessageCallback>>();
+  private callHandlers = new Map<string, CallHandler>();
 
   constructor() {
     const host = globalThis as any;
@@ -83,6 +97,7 @@ class ConnectionClient {
     const env = this.decode(message);
     if (!env) return;
 
+    // Handle call results
     if ((env.kind === "result" || env.kind === "error") && env.id) {
       const entry = this.pending.get(env.id);
       if (!entry) return;
@@ -95,7 +110,31 @@ class ConnectionClient {
       return;
     }
 
-    if (env.kind === "event" || env.kind === "stream" || env.kind === "publish") {
+    // Handle calls FROM backend (backend calling frontend)
+    if (env.kind === "call" && env.id) {
+      const handler = this.callHandlers.get(env.name);
+      if (handler) {
+        try {
+          const result = handler(env.payload);
+          // If the handler returns a Promise, wait for it
+          if (result && typeof result.then === 'function') {
+            result.then((resolved: any) => {
+              this.send({ kind: "result", id: env.id, name: env.name, payload: resolved });
+            }).catch((err: Error) => {
+              this.send({ kind: "error", id: env.id, name: env.name, error: err.message });
+            });
+          } else {
+            this.send({ kind: "result", id: env.id!, name: env.name, payload: result });
+          }
+        } catch (err: any) {
+          this.send({ kind: "error", id: env.id!, name: env.name, error: err?.message || "Handler error" });
+        }
+      }
+      return;
+    }
+
+    // Handle events/streams/publishes
+    if (env.kind === "event" || env.kind === "stream" || env.kind === "publish" || env.kind === "fire") {
       const handlers = this.listeners.get(env.name);
       if (!handlers) return;
       for (const handler of handlers) {
@@ -104,6 +143,9 @@ class ConnectionClient {
     }
   }
 
+  // ---- Public API ----
+
+  /** Send a call (request/response) to the backend */
   async call<TOut = unknown, TIn = Record<string, unknown>>(name: string, payload: TIn): Promise<TOut> {
     const id = this.nextId();
     const promise = new Promise<TOut>((resolve, reject) => {
@@ -113,10 +155,12 @@ class ConnectionClient {
     return promise;
   }
 
+  /** Fire a one-way message (simplex / fire & forget) */
   fire<TIn = Record<string, unknown>>(name: string, payload: TIn): void {
     void this.send({ kind: "fire", name, payload });
   }
 
+  /** Listen for messages on a channel (events, streams, pub-sub) */
   on<TData = unknown>(name: string, callback: (payload: TData) => void): () => void {
     const existing = this.listeners.get(name) ?? new Set<MessageCallback>();
     existing.add(callback as MessageCallback);
@@ -130,30 +174,97 @@ class ConnectionClient {
       }
     };
   }
+
+  /** Register a handler for backend-initiated calls (backend calling frontend) */
+  handle(name: string, handler: CallHandler): () => void {
+    this.callHandlers.set(name, handler);
+    return () => {
+      this.callHandlers.delete(name);
+    };
+  }
 }
 
 const _client = new ConnectionClient();
 
+// ============================================================================
+// Semantic Connect Proxy
+// ============================================================================
+// Usage: connect.namespace.method(...args)
+//
+// The proxy automatically routes to the correct wire format:
+//   - 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', {})
+// ============================================================================
+
 /**
- * connect - Custom channel API
- * 
- * Use for app-specific communication:
- *   connect.emit('myEvent', { data: 123 });
- *   connect.on('myEvent', (data) => { ... });
+ * connect — Semantic channel proxy
+ *
+ * Use this for all custom backend ↔ frontend communication.
+ * Just write `connect.namespace.method()` and run `plusui connect`.
+ *
+ * The proxy works even BEFORE running `plusui connect` — it dynamically
+ * infers intent from use. Running `plusui connect` generates type
+ * declarations for IDE autocomplete and compile-time safety.
  */
-export const connect = {
-  emit: <TIn = Record<string, unknown>>(name: string, payload: TIn): void => {
-    _client.fire(name, payload);
-  },
-  on: <TData = unknown>(name: string, callback: (payload: TData) => void): (() => void) => {
-    return _client.on<TData>(name, callback);
+export const connect: Record<string, Record<string, any>> = new Proxy({} as any, {
+  get(_target, namespace: string) {
+    if (namespace === '__esModule' || namespace === 'then' || typeof namespace === 'symbol') {
+      return undefined;
+    }
+
+    // Return a proxy for the namespace that intercepts method calls
+    return new Proxy({} as any, {
+      get(_nsTarget, method: string) {
+        if (typeof method === 'symbol') return undefined;
+
+        const wireName = `${namespace}.${method}`;
+
+        // If method starts with 'on' + uppercase → event listener
+        if (/^on[A-Z]/.test(method)) {
+          return <T = unknown>(cb: (data: T) => void) => _client.on<T>(wireName, cb);
+        }
+
+        // If method starts with 'handle' + uppercase → register a handler for backend calls
+        if (/^handle[A-Z]/.test(method)) {
+          return (handler: CallHandler) => _client.handle(wireName, handler);
+        }
+
+        // Default: a callable function
+        // We return a function that can be either awaited (call) or just invoked (fire).
+        // The generated code will be more specific, but this proxy handles the dynamic case.
+        return (...args: unknown[]) => {
+          const payload = args.length === 1 ? args[0] : args.length === 0 ? {} : args;
+          // We use call (request/response) by default so `await` works.
+          // If the user doesn't await, the Promise is simply ignored (fire-and-forget).
+          return _client.call(wireName, payload);
+        };
+      },
+
+      set(_nsTarget, method: string, value: any) {
+        if (typeof method === 'symbol') return false;
+        const wireName = `${namespace}.${method}`;
+
+        // Setting a handler: connect.user.handleFetch = (data) => { ... }
+        if (typeof value === 'function') {
+          _client.handle(wireName, value);
+          return true;
+        }
+        return false;
+      },
+    });
   },
-  feature: createFeatureConnect,
-};
+});
+
+// ============================================================================
+// Feature-scoped connect (for framework internals)
+// ============================================================================
 
 export type FeatureConnect = {
   on: <TData = unknown>(name: string, callback: (payload: TData) => void) => (() => void);
   emit: <TIn = Record<string, unknown>>(name: string, payload: TIn) => void;
+  call: <TOut = unknown, TIn = Record<string, unknown>>(name: string, payload: TIn) => Promise<TOut>;
 };
 
 function scopeName(scope: string, name: string): string {
@@ -183,6 +294,10 @@ export function createFeatureConnect(scope: string): FeatureConnect {
         window.removeEventListener(`plusui:${scoped}`, domHandler as EventListener);
       };
     },
+    call: <TOut = unknown, TIn = Record<string, unknown>>(name: string, payload: TIn): Promise<TOut> => {
+      const scoped = scopeName(scope, name);
+      return _client.call<TOut, TIn>(scoped, payload);
+    },
   };
 }
 

package/Core/Features/FileDrop/filedrop.ts

@@ -25,11 +25,21 @@ g.__response__ = function(id: string, result: any, error?: any) {
   }
 };
 
+// Called by C++ when files are dropped on a named zone
 g.__plusui_fileDrop__ = function(zoneName: string, files: FileInfo[]) {
   const zone = zoneCallbacks.get(zoneName);
   if (zone && zone.onFiles) zone.onFiles(files);
 };
 
+// Called by C++ when the drop point doesn't hit any named zone — deliver to
+// all registered zones so a single-zone app always works regardless of DPI
+// scaling or hit-test accuracy.
+g.__plusui_fileDrop_default__ = function(files: FileInfo[]) {
+  for (const zone of zoneCallbacks.values()) {
+    if (zone && zone.onFiles) zone.onFiles(files);
+  }
+};
+
 async function invoke<T>(method: string, params: any[] = []): Promise<T> {
   return new Promise((resolve, reject) => {
     const id = String(++callId);
@@ -55,32 +65,39 @@ export interface DropZone {
 
 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
+
+    // Prevent browser default on drop (file navigation).
+    // Actual file delivery comes from C++ via WM_DROPFILES → __plusui_fileDrop__.
     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('dragenter', (e: DragEvent) => {
+      e.preventDefault();
+      element.classList.add('dropzone-active');
+      if (e.dataTransfer) {
+        // 'move' matches the native OS dropzone cursor (arrow + file icon)
+        // rather than the browser's '+ Copy' cursor
+        try { e.dataTransfer.dropEffect = 'move'; } catch (_) {}
+      }
+    });
+
     element.addEventListener('dragover', (e: DragEvent) => {
       e.preventDefault();
       if (e.dataTransfer) {
-        try { e.dataTransfer.dropEffect = 'copy'; } catch (_) {}
+        try { e.dataTransfer.dropEffect = 'move'; } catch (_) {}
       }
     });
   }