plusui-native-core 0.1.57 → 0.1.61

package/Core/Features/Browser/browser.ts

@@ -38,6 +38,8 @@ const _loadErrorCallbacks: ErrorCallback[] = [];
 let _currentState: BrowserState = { url: '', title: '', canGoBack: false, canGoForward: false, isLoading: false };
 let _routes: Record<string, string> = {};
 let _currentRoute: string = '/';
+const browserFeatureEvents = connect.feature('browser');
+const routerFeatureEvents = connect.feature('router');
 
 // Setup event listeners from native backend
 if (typeof window !== 'undefined') {
@@ -64,7 +66,15 @@ if (typeof window !== 'undefined') {
 }
 
 export const browser = {
-  connect: connect.feature('browser'),
+  connect: browserFeatureEvents,
+
+  on: <TData = unknown>(name: string, callback: (payload: TData) => void): (() => void) => {
+    return browserFeatureEvents.on<TData>(name, callback);
+  },
+
+  emit: <TIn = Record<string, unknown>>(name: string, payload: TIn): void => {
+    browserFeatureEvents.emit<TIn>(name, payload);
+  },
 
   async navigate(url: string): Promise<void> {
     await invoke('browser.navigate', [url]);
@@ -164,7 +174,15 @@ export const browser = {
 };
 
 export const router = {
-  connect: connect.feature('router'),
+  connect: routerFeatureEvents,
+
+  on: <TData = unknown>(name: string, callback: (payload: TData) => void): (() => void) => {
+    return routerFeatureEvents.on<TData>(name, callback);
+  },
+
+  emit: <TIn = Record<string, unknown>>(name: string, payload: TIn): void => {
+    routerFeatureEvents.emit<TIn>(name, payload);
+  },
 
   setRoutes(routes: Record<string, string>): void {
     _routes = routes;

package/Core/Features/Clipboard/clipboard.ts

@@ -8,6 +8,9 @@ import { connect } from '../Connection/connect';
  */
 
 export interface ClipboardAPI {
+  on<TData = unknown>(name: string, callback: (payload: TData) => void): () => void;
+  emit<TIn = Record<string, unknown>>(name: string, payload: TIn): void;
+
   // Text operations
   getText(): Promise<string>;
   setText(text: string): Promise<void>;
@@ -38,6 +41,14 @@ export class Clipboard implements ClipboardAPI {
     this.onFn = onFn;
   }
 
+  on<TData = unknown>(name: string, callback: (payload: TData) => void): () => void {
+    return this.connect.on<TData>(name, callback);
+  }
+
+  emit<TIn = Record<string, unknown>>(name: string, payload: TIn): void {
+    this.connect.emit<TIn>(name, payload);
+  }
+
   /**
    * Get text from clipboard
    * @returns Current clipboard text content

package/Core/Features/Connection/README.md

@@ -2,7 +2,7 @@
 
 ## 🎯 Overview
 
-The **Connection Feature** is PlusUI's absurdly simple system for frontend ↔ backend communication. Both sides use the same two methods: **`emit()`** and **`on()`**.
+The **Connection Feature** is PlusUI's absurdly simple system for frontend ↔ backend communication. Use **`feature.emit()`** and **`feature.on()`** on frontend, mirrored by scoped channels on backend.
 
 ## ✨ The 5 Primitives That Cover Everything
 
@@ -32,13 +32,15 @@ Just `emit()` and `on()` handle all communication patterns:
 ```typescript
 import { connect } from 'plusui-native-core/connect';
 
+const custom = connect.feature('custom');
+
 // Listen for response
-connect.on('greetResponse', (data) => {
+custom.on('greetResponse', (data) => {
   console.log(data.message); // "Hello, World!"
 });
 
 // Send message to backend
-connect.emit('greet', { name: 'World' });
+custom.emit('greet', { name: 'World' });
 ```
 
 ### Receive & Respond
@@ -48,23 +50,25 @@ connect.emit('greet', { name: 'World' });
 
 plusui::Connect connect;
 
-connect.on("greet", [&connect](const nlohmann::json& payload) {
+auto customFeature = connect.feature("custom");
+
+customFeature.on("greet", [&connect](const nlohmann::json& payload) {
   std::string user = payload.value("name", "World");
-  connect.emit("greetResponse", {{"message", "Hello, " + user + "!"}});
+  connect.emit("custom.greetResponse", {{"message", "Hello, " + user + "!"}});
 });
 
 // Wire backend connect ↔ window bridge once
 plusui::bindConnect(mainWindow, connect);
 
 // Example: backend push to frontend
-connect.emit("resize", {{"width", 1280}, {"height", 720}});
+connect.emit("custom.resize", {{"width", 1280}, {"height", 720}});
 ```
 
 ### Listen on Frontend
 
 ```typescript
 // Listen for messages from backend
-connect.on('resize', (data) => {
+custom.on('resize', (data) => {
   console.log(`${data.width}x${data.height}`);
   updateLayout(data);
 });
@@ -117,14 +121,47 @@ connect.onSubscription("cpu", [](bool subscribed, const nlohmann::json&) {
 
 ### Feature-Scoped Names
 
-Use `connect` for custom global channels, and `feature.connect` when you want automatic namespacing:
+Use `connect` for custom global channels, and feature-scoped APIs when you want automatic namespacing:
 
 ```typescript
+window.emit('resized', { width: 1200, height: 800 });           // -> "window.resized"
+clipboard.emit('changed', { text: 'hello' });                   // -> "clipboard.changed"
+
+// Also supported when you need explicit feature connect access:
 window.connect.emit('resized', { width: 1200, height: 800 });   // -> "window.resized"
-clipboard.connect.emit('changed', { text: 'hello' });           // -> "clipboard.changed"
 connect.emit('custom.appEvent', { ok: true });                  // custom/global channel
 ```
 
+Backend can listen using fully scoped names, or use a scoped helper:
+
+```cpp
+plusui::Connect connect;
+plusui::bindConnect(mainWindow, connect);
+
+auto windowFeature = connect.feature("window");
+windowFeature.on("resized", [](const nlohmann::json& payload) {
+  // receives "window.resized"
+});
+
+connect.on("window.resized", [](const nlohmann::json& payload) {
+  // from window.emit('resized', ...) or window.connect.emit('resized', ...)
+});
+
+connect.on("clipboard.changed", [](const nlohmann::json& payload) {
+  // from clipboard.emit('changed', ...) or clipboard.connect.emit('changed', ...)
+});
+
+connect.on("custom.appEvent", [](const nlohmann::json& payload) {
+  // from connect.emit('custom.appEvent', ...)
+});
+```
+
+`plusui connect` scans frontend and backend `.emit()` / `.on()` calls and understands feature aliases, including:
+
+- `const custom = createFeatureConnect('custom'); custom.on('event', ...)`
+- `const custom = connect.feature('custom'); custom.emit('event', ...)`
+- `auto custom = connect.feature("custom"); custom.on("event", ...)`
+
 ## 💡 Design Your Own Patterns
 
 ### Request/Response Pattern

package/Core/Features/Display/display.ts

@@ -40,6 +40,14 @@ export class DisplayAPI {
     private invokeFn: (name: string, args?: unknown[]) => Promise<unknown>
   ) {}
 
+  on<TData = unknown>(name: string, callback: (payload: TData) => void): () => void {
+    return this.connect.on<TData>(name, callback);
+  }
+
+  emit<TIn = Record<string, unknown>>(name: string, payload: TIn): void {
+    this.connect.emit<TIn>(name, payload);
+  }
+
   async getAllDisplays(): Promise<Display[]> {
     return await this.invokeFn<Display[]>('display.getAllDisplays', []);
   }

package/Core/Features/FileDrop/filedrop.ts

@@ -32,6 +32,9 @@ export interface DragEvent {
 }
 
 export interface FileDropAPI {
+  on<TData = unknown>(name: string, callback: (payload: TData) => void): () => void;
+  emit<TIn = Record<string, unknown>>(name: string, payload: TIn): void;
+
   /**
    * Enable or disable file drop into window
    * @param enabled - true to allow files to be dropped into the window
@@ -91,6 +94,14 @@ export class FileDrop implements FileDropAPI {
     this.onFn = onFn;
   }
 
+  on<TData = unknown>(name: string, callback: (payload: TData) => void): () => void {
+    return this.connect.on<TData>(name, callback);
+  }
+
+  emit<TIn = Record<string, unknown>>(name: string, payload: TIn): void {
+    this.connect.emit<TIn>(name, payload);
+  }
+
   /**
    * Enable or disable file drop into window
    * @param enabled - true to allow files to be dropped into the window

package/Core/Features/Keyboard/keyboard.ts

@@ -65,6 +65,14 @@ export class KeyboardAPI {
     this.setupEventListeners();
   }
 
+  on<TData = unknown>(name: string, callback: (payload: TData) => void): () => void {
+    return this.connect.on<TData>(name, callback);
+  }
+
+  emit<TIn = Record<string, unknown>>(name: string, payload: TIn): void {
+    this.connect.emit<TIn>(name, payload);
+  }
+
   private setupEventListeners(): void {
     this.eventFn('keyboard:keydown', (data) => {
       const event = data as KeyEvent;

package/Core/Features/Menu/menu.ts

@@ -88,6 +88,14 @@ export class MenuAPI {
         });
     }
 
+    on<TData = unknown>(name: string, callback: (payload: TData) => void): () => void {
+        return this.connect.on<TData>(name, callback);
+    }
+
+    emit<TIn = Record<string, unknown>>(name: string, payload: TIn): void {
+        this.connect.emit<TIn>(name, payload);
+    }
+
     // ========================================================================
     // Popup Menus
     // ========================================================================

package/Core/Features/Tray/tray.ts

@@ -25,6 +25,14 @@ export class TrayAPI {
     private eventFn: (event: string, callback: (...args: unknown[]) => void) => () => void
   ) {}
 
+  on<TData = unknown>(name: string, callback: (payload: TData) => void): () => void {
+    return this.connect.on<TData>(name, callback);
+  }
+
+  emit<TIn = Record<string, unknown>>(name: string, payload: TIn): void {
+    this.connect.emit<TIn>(name, payload);
+  }
+
   async setIcon(iconPath: string): Promise<void> {
     await this.invokeFn('tray.setIcon', [iconPath]);
   }

package/Core/Features/WebGPU/webgpu.ts

@@ -575,6 +575,14 @@ class WebGPUNamespace {
     this.onFn = onFn;
   }
 
+  on<TData = unknown>(name: string, callback: (payload: TData) => void): () => void {
+    return this.connect.on<TData>(name, callback);
+  }
+
+  emit<TIn = Record<string, unknown>>(name: string, payload: TIn): void {
+    this.connect.emit<TIn>(name, payload);
+  }
+
   async requestAdapter(options?: GPURequestAdapterOptions): Promise<GPUAdapter | null> {
     const result = await this.invokeFn('webgpu.requestAdapter', [options || {}]);
     if (!result) {

package/Core/Features/Window/window.ts

@@ -43,8 +43,18 @@ async function invoke(method: string, args?: unknown[]): Promise<unknown> {
   return _invoke(method, args);
 }
 
+const windowFeatureEvents = connect.feature('window');
+
 export const window = {
-  connect: connect.feature('window'),
+  connect: windowFeatureEvents,
+
+  on: <TData = unknown>(name: string, callback: (payload: TData) => void): (() => void) => {
+    return windowFeatureEvents.on<TData>(name, callback);
+  },
+
+  emit: <TIn = Record<string, unknown>>(name: string, payload: TIn): void => {
+    windowFeatureEvents.emit<TIn>(name, payload);
+  },
 
   async minimize(id?: WindowId): Promise<void> {
     await invoke('window.minimize', id ? [id] : []);

package/Core/include/plusui/connect.hpp

@@ -72,6 +72,72 @@ public:
   using SubscriptionHandler =
       std::function<void(bool subscribed, const nlohmann::json &)>;
 
+  class Feature {
+    Connect *owner;
+    std::string scope;
+
+    std::string scopedName(const std::string &name) const {
+      const std::string prefix = scope + ".";
+      if (name.rfind(prefix, 0) == 0) {
+        return name;
+      }
+      return prefix + name;
+    }
+
+  public:
+    Feature(Connect *parent, std::string featureScope)
+        : owner(parent), scope(std::move(featureScope)) {}
+
+    void on(const std::string &name, EventHandler handler) {
+      owner->on(scopedName(name), std::move(handler));
+    }
+
+    void emit(const std::string &name, const nlohmann::json &payload) {
+      owner->emit(scopedName(name), payload);
+    }
+
+    void onCall(const std::string &name, CallHandler handler) {
+      owner->onCall(scopedName(name), std::move(handler));
+    }
+
+    void onSubscription(const std::string &name,
+                        SubscriptionHandler handler) {
+      owner->onSubscription(scopedName(name), std::move(handler));
+    }
+  };
+
+  // ============================================================
+  // Channel — single-name channel object
+  //
+  // Mirror of the TypeScript createChannel() object:
+  //   download.on([](const json& p) { ... });
+  //   download.emit({{"progress", 50}});
+  //
+  // Obtained via connect.channel("download") or declared in
+  // the auto-generated connections.gen.hpp.
+  // ============================================================
+  class Channel {
+    Connect *owner;
+    std::string name_;
+
+  public:
+    Channel() : owner(nullptr) {}
+    Channel(Connect *parent, std::string channelName)
+        : owner(parent), name_(std::move(channelName)) {}
+
+    // Register a listener — mirrors TypeScript: download.on((d) => { ... })
+    void on(EventHandler handler) {
+      if (owner) owner->on(name_, std::move(handler));
+    }
+
+    // Send a message — mirrors TypeScript: download.emit({ key: value })
+    void emit(const nlohmann::json &payload = nlohmann::json::object()) {
+      if (owner) owner->emit(name_, payload);
+    }
+
+    const std::string &name() const { return name_; }
+  };
+
 private:
   std::function<void(const std::string &)> outboundHandler;
   std::map<std::string, std::vector<EventHandler>> eventHandlers;
@@ -100,6 +166,8 @@ private:
     outboundHandler(j.dump());
   }
 
+public:
+
   virtual ~Connect() = default;
 
   // Mirror frontend API: register message listener by name
@@ -107,6 +175,15 @@ private:
     eventHandlers[name].push_back(std::move(handler));
   }
 
+  Feature feature(const std::string &scope) { return Feature(this, scope); }
+
+  // Create a named channel object — mirrors TypeScript createChannel('name')
+  // Returns by value; store as a member or local:
+  //   auto download = connect.channel("download");
+  //   download.on([](const json& p) { ... });
+  //   download.emit({{"progress", 50}});
+  Channel channel(const std::string &name) { return Channel(this, name); }
+
   // Request/response helper for call primitive
   void onCall(const std::string &name, CallHandler handler) {
     callHandlers[name] = std::move(handler);

package/Core/include/plusui/plusui.hpp

@@ -31,7 +31,6 @@
 #include <plusui/filedrop.hpp>
 #include <plusui/keyboard.hpp>
 #include <plusui/menu.hpp>
-#include <plusui/native_bindings.hpp>
 #include <plusui/tray.hpp>
 #include <plusui/webgpu.hpp>
 #include <plusui/window.hpp>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plusui-native-core",
-  "version": "0.1.57",
+  "version": "0.1.61",
   "description": "PlusUI Core framework (frontend + backend implementations)",
   "type": "module",
   "files": [

package/Core/include/plusui/native_bindings.hpp

@@ -1,19 +0,0 @@
-#pragma once
-
-#include <string>
-#include <vector>
-
-namespace plusui {
-
-struct BindingEntry {
-  const char *source;
-  const char *feature;
-  const char *method;
-};
-
-class NativeBindings {
-public:
-  static const std::vector<BindingEntry> &getEntries();
-};
-
-} // namespace plusui