plusui-native 0.2.57 → 0.2.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plusui-native",
-  "version": "0.2.57",
+  "version": "0.2.61",
   "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.56",
-    "plusui-native-connect": "^0.1.56"
+    "plusui-native-builder": "^0.1.60",
+    "plusui-native-connect": "^0.1.60"
   },
   "peerDependencies": {
-    "plusui-native-connect": "^0.1.56"
+    "plusui-native-connect": "^0.1.60"
   },
   "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';
@@ -400,8 +400,8 @@ async function updatePlusUIPackages() {
 function getAppBindgenPaths() {
     return {
         featuresDir: join(process.cwd(), 'src', 'features'),
-        outputDir: join(process.cwd(), 'src', 'Bindings'),
-        frontendOutputDir: join(process.cwd(), 'frontend', 'src', 'Bindings'),
+        // Connections/ is now at the project root — shared by C++ and TS
+        outputDir: join(process.cwd(), 'Connections'),
     };
 }
 
@@ -1089,14 +1089,12 @@ async function runBindgen(providedArgs = null, options = {}) {
 
     let usedDefaultAppMode = false;
     let defaultOutputDir = null;
-    let defaultFrontendOutputDir = null;
 
     if (bindgenArgs.length === 0) {
-        const { outputDir: appOutputDir, frontendOutputDir } = getAppBindgenPaths();
+        const { outputDir: appOutputDir } = getAppBindgenPaths();
         bindgenArgs = [process.cwd(), appOutputDir];
         usedDefaultAppMode = true;
         defaultOutputDir = appOutputDir;
-        defaultFrontendOutputDir = frontendOutputDir;
         log(`Project mode: ${process.cwd()} -> ${appOutputDir}`, 'dim');
     }
     
@@ -1110,9 +1108,6 @@ async function runBindgen(providedArgs = null, options = {}) {
         proc.on('close', async (code) => {
             if (code === 0) {
                 try {
-                    if (usedDefaultAppMode && defaultOutputDir && defaultFrontendOutputDir) {
-                        await syncGeneratedTsBindings(defaultOutputDir, defaultFrontendOutputDir);
-                    }
                     log('\nBindgen complete!', 'green');
                     resolve();
                 } catch (syncErr) {

package/templates/base/README.md.template

@@ -40,23 +40,19 @@ npm run connect
 
 Default connect generator paths:
 - Input: project root scan (frontend + backend files)
-- Output: `src/Bindings`
+- Output: `Connections/` (at project root)
 
 Generated structure:
-- `src/Bindings/bindings.gen.ts`
-- `src/Bindings/bindings.gen.hpp`
-- `src/Bindings/connect.manifest.json`
+- `Connections/connections.gen.ts`    — typed TS channel exports (regenerated)
+- `Connections/connections.gen.hpp`   — C++ `Connections` struct (regenerated)
+- `Connections/connect.manifest.json` — detected channel list (regenerated)
+
+All three files are always regenerated — do not manually edit them.
 
 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 connect` scans your project structure and does not require a schema file.
 
 You can also pass custom paths:
@@ -163,10 +159,12 @@ just help         # Show all commands
 
 ## Calling C++ from TypeScript
 
-Use the local `frontend/src/plusui.ts` bridge to interact with the native backend:
+All features and custom channels are available via a single import:
 
 ```tsx
-import { win } from './plusui';
+import plusui from 'plusui';
+// or named imports:
+import { connect, win, clipboard, app } from 'plusui';
 
 // Window controls
 await win.minimize();

package/templates/manager.js

@@ -5,6 +5,7 @@ import { fileURLToPath } from 'url';
 import { EnvironmentDoctor } from '../src/doctor/index.js';
 import chalk from 'chalk';
 import { spawn } from 'child_process';
+import { execSync } from 'child_process';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -24,6 +25,58 @@ export class TemplateManager {
     return this.cliPackageJson.version;
   }
 
+  async loadCliPackageJson() {
+    if (!this.cliPackageJson) {
+      const packageJsonPath = join(this.templatesDir, '..', 'package.json');
+      const content = await readFile(packageJsonPath, 'utf8');
+      this.cliPackageJson = JSON.parse(content);
+    }
+    return this.cliPackageJson;
+  }
+
+  getLatestPublishedVersion(packageName) {
+    try {
+      const version = execSync(`npm view ${packageName} version`, {
+        encoding: 'utf8',
+        stdio: ['pipe', 'pipe', 'ignore']
+      }).trim();
+      return version || null;
+    } catch {
+      return null;
+    }
+  }
+
+  toCompatibleRange(version) {
+    if (!version) {
+      return null;
+    }
+    return version.startsWith('^') || version.startsWith('~') ? version : `^${version}`;
+  }
+
+  async resolveTemplatePackageVersions() {
+    const cliPkg = await this.loadCliPackageJson();
+    const cliVersion = cliPkg.version;
+    const [major, minor] = cliVersion.split('.');
+
+    const fallbackCliRange = `^${major}.${minor}.0`;
+    const fallbackToolsRange = `^${major}.1.0`;
+
+    const publishedCli = this.getLatestPublishedVersion('plusui-native');
+    const publishedCore = this.getLatestPublishedVersion('plusui-native-core');
+    const publishedBuilder = this.getLatestPublishedVersion('plusui-native-builder');
+    const publishedConnect = this.getLatestPublishedVersion('plusui-native-connect');
+
+    const cliDependencyBuilder = cliPkg.dependencies?.['plusui-native-builder'] || null;
+    const cliDependencyConnect = cliPkg.dependencies?.['plusui-native-connect'] || null;
+
+    return {
+      cli: this.toCompatibleRange(publishedCli) || fallbackCliRange,
+      core: this.toCompatibleRange(publishedCore) || fallbackToolsRange,
+      builder: this.toCompatibleRange(publishedBuilder) || cliDependencyBuilder || fallbackToolsRange,
+      connect: this.toCompatibleRange(publishedConnect) || cliDependencyConnect || fallbackToolsRange
+    };
+  }
+
   async create(projectName, options = {}) {
     const template = options.template || 'react';
     const templatePath = join(this.templatesDir, template);
@@ -53,32 +106,22 @@ export class TemplateManager {
 
     await mkdir(projectPath, { recursive: true });
 
-    // 3. Get current package versions
-    const cliVersion = await this.loadCliVersion();
-    
-    // Use version ranges that match latest published versions
-    // For CLI (plusui-native): Use major.minor.0 to get latest compatible
-    const [major, minor, patch] = cliVersion.split('.');
-    const cliVersionRange = `^${major}.${minor}.0`;
-    
-    // Core version follows 0.1.x pattern when CLI is 0.2.x
-    const coreVersionRange = `^${major}.1.0`;
-    
-    // Builder and connect generator also follow 0.1.x pattern
-    const builderVersionRange = `^${major}.1.0`;
-    const connectVersionRange = `^${major}.1.0`;
+    // 3. Resolve package versions for generated app dependencies
+    const resolvedVersions = await this.resolveTemplatePackageVersions();
     
     // 4. Prepare template variables
     const variables = {
       PROJECT_NAME: projectName,
       PROJECT_NAME_LOWER: projectName.toLowerCase(),
       PROJECT_VERSION: '0.1.0',
-      PLUSUI_CLI_VERSION: cliVersionRange,
-      PLUSUI_CORE_VERSION: coreVersionRange,
-      PLUSUI_BUILDER_VERSION: builderVersionRange,
-      PLUSUI_CONNECT_VERSION: connectVersionRange
+      PLUSUI_CLI_VERSION: resolvedVersions.cli,
+      PLUSUI_CORE_VERSION: resolvedVersions.core,
+      PLUSUI_BUILDER_VERSION: resolvedVersions.builder,
+      PLUSUI_CONNECT_VERSION: resolvedVersions.connect
     };
 
+    console.log(chalk.dim(`Using versions: core=${variables.PLUSUI_CORE_VERSION}, builder=${variables.PLUSUI_BUILDER_VERSION}, connect=${variables.PLUSUI_CONNECT_VERSION}`));
+
     // 5. Copy template files
     await this.copyTemplate(templatePath, projectPath, variables);
 

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

@@ -1,5 +1,7 @@
 import { useState, useEffect } from 'react';
-import { win, browser, router, app, fileDrop, formatFileSize, type FileInfo } from './plusui';
+import { win, browser, router, app, fileDrop, formatFileSize, type FileInfo } from 'plusui';
+// Custom channels (generated by `plusui connect`) — import what you use:
+// import { greeting, download } from '../Connections/connections.gen';
 
 // Define routes for your app (optional - for SPA routing)
 const routes = {

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

@@ -1,3 +1,18 @@
+// ============================================================
+// PlusUI — single import entrypoint
+//
+//   import plusui from 'plusui';
+//   import { connect, win, clipboard, app } from 'plusui';
+//
+// Everything your app needs — built-in features AND your own
+// custom connect channels — is available from this one import.
+//
+// After running `plusui connect`, Connections/connections.gen.ts
+// is auto-imported here so all discovered channels become typed.
+// ============================================================
+
+// ─── Bridge bootstrap ────────────────────────────────────────────────────────
+
 type InvokeFn = (method: string, args?: unknown[]) => Promise<unknown>;
 type PendingMap = Record<string, { resolve: (value: unknown) => void; reject: (reason?: unknown) => void }>;
 
@@ -25,16 +40,12 @@ function initBridge() {
     return new Promise((resolve, reject) => {
       const id = Math.random().toString(36).slice(2, 11);
       const request = JSON.stringify({ id, method, params: args ?? [] });
-
       _pending[id] = { resolve, reject };
 
       if (typeof w.__native_invoke__ === 'function') {
         w.__native_invoke__(request);
       } else {
-        setTimeout(() => {
-          delete _pending[id];
-          resolve(null);
-        }, 0);
+        setTimeout(() => { delete _pending[id]; resolve(null); }, 0);
       }
 
       setTimeout(() => {
@@ -48,10 +59,7 @@ function initBridge() {
 
   w.__response__ = (id: string, result: unknown) => {
     const pending = _pending[id];
-    if (pending) {
-      pending.resolve(result);
-      delete _pending[id];
-    }
+    if (pending) { pending.resolve(result); delete _pending[id]; }
   };
 
   _invoke = w.__invoke__ as InvokeFn;
@@ -60,99 +68,292 @@ function initBridge() {
 async function invoke(method: string, args?: unknown[]) {
   if (!_invoke) {
     initBridge();
-    if (!_invoke) {
-      throw new Error('PlusUI bridge not initialized');
-    }
+    if (!_invoke) throw new Error('PlusUI bridge not initialized');
   }
-
   return _invoke(method, args);
 }
 
 initBridge();
 
+// ─── Connection (on / emit) ───────────────────────────────────────────────────
+//
+// TWO METHODS. FIVE PRIMITIVES. EVERYTHING YOU NEED.
+//
+//   connect.emit('myEvent', { value: 42 });     // TS → C++
+//   connect.on('myEvent', (data) => { ... });   // C++ → TS
+//
+// Built-in features use their feature name as a scope:
+//   clipboard.on('changed', (data) => { ... })  // 'clipboard.changed'
+//   win.on('resized', (data) => { ... })         // 'window.resized'
+//
+// ─────────────────────────────────────────────────────────────────────────────
+
+type MessageCallback = (payload: any) => void;
+
+class ConnectionClient {
+  private pending = new Map<string, { resolve: (v: any) => void; reject: (e: Error) => void }>();
+  private listeners = new Map<string, Set<MessageCallback>>();
+
+  constructor() {
+    const host = globalThis as any;
+    host.__plusuiConnectionMessage = (message: unknown) => this.handleIncoming(message);
+    if (typeof window !== 'undefined') {
+      window.addEventListener('plusui:connection:message', (ev: Event) => {
+        this.handleIncoming((ev as CustomEvent<unknown>).detail);
+      });
+    }
+  }
+
+  private nextId() { return `${Date.now()}-${Math.random().toString(16).slice(2)}`; }
+
+  private async send(env: { kind: string; id?: string; name: string; payload?: unknown }): Promise<any> {
+    const host = globalThis as any;
+    if (typeof host.__invoke__ === 'function') return host.__invoke__('connection.dispatch', env);
+    if (host.ipc?.postMessage) host.ipc.postMessage(JSON.stringify(env));
+    return null;
+  }
+
+  private decode(message: unknown): any | null {
+    if (!message) return null;
+    if (typeof message === 'string') { try { return JSON.parse(message); } catch { return null; } }
+    if (typeof message === 'object') return message;
+    return null;
+  }
+
+  private handleIncoming(message: unknown): void {
+    const env = this.decode(message);
+    if (!env) return;
+    if ((env.kind === 'result' || env.kind === 'error') && env.id) {
+      const entry = this.pending.get(env.id);
+      if (!entry) return;
+      this.pending.delete(env.id);
+      if (env.kind === 'error') entry.reject(new Error(env.error || 'Connection call failed'));
+      else entry.resolve(env.payload);
+      return;
+    }
+    if (env.kind === 'event' || env.kind === 'stream' || env.kind === 'publish') {
+      const handlers = this.listeners.get(env.name);
+      if (handlers) for (const h of handlers) h(env.payload);
+    }
+  }
+
+  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) => this.pending.set(id, { resolve, reject }));
+    await this.send({ kind: 'call', id, name, payload });
+    return promise;
+  }
+
+  fire<TIn = Record<string, unknown>>(name: string, payload: TIn): void {
+    void this.send({ kind: 'fire', name, payload });
+  }
+
+  on<TData = unknown>(name: string, callback: (payload: TData) => void): () => void {
+    const set = this.listeners.get(name) ?? new Set<MessageCallback>();
+    set.add(callback as MessageCallback);
+    this.listeners.set(name, set);
+    return () => {
+      const cur = this.listeners.get(name);
+      if (!cur) return;
+      cur.delete(callback as MessageCallback);
+      if (cur.size === 0) this.listeners.delete(name);
+    };
+  }
+
+  stream<TData = unknown>(name: string) {
+    return {
+      subscribe: (cb: (payload: TData) => void): (() => void) => {
+        void this.send({ kind: 'sub', name });
+        const off = this.on<TData>(name, cb);
+        return () => { off(); void this.send({ kind: 'unsub', name }); };
+      },
+    };
+  }
+
+  channel<TData = unknown>(name: string) {
+    return {
+      subscribe: (cb: (payload: TData) => void): (() => void) => {
+        void this.send({ kind: 'sub', name });
+        const off = this.on<TData>(name, cb);
+        return () => { off(); void this.send({ kind: 'unsub', name }); };
+      },
+      publish: (payload: TData): void => { void this.send({ kind: 'publish', name, payload }); },
+    };
+  }
+}
+
+const _client = new ConnectionClient();
+
+// ─── FeatureConnect ───────────────────────────────────────────────────────────
+
+export type FeatureConnect = {
+  on: <TData = unknown>(name: string, cb: (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>;
+  stream: <TData = unknown>(name: string) => { subscribe: (cb: (payload: TData) => void) => (() => void) };
+  channel: <TData = unknown>(name: string) => {
+    subscribe: (cb: (payload: TData) => void) => (() => void);
+    publish: (payload: TData) => void;
+  };
+  scoped: (scope: string) => FeatureConnect;
+};
+
+function _scopeName(scope: string, name: string): string {
+  return name.startsWith(`${scope}.`) ? name : `${scope}.${name}`;
+}
+
+async function _invokeScoped(method: string, payload?: unknown): Promise<unknown> {
+  const host = globalThis as any;
+  if (typeof host.__invoke__ !== 'function') return undefined;
+  return host.__invoke__(method, payload === undefined ? [] : [payload]);
+}
+
+export function createFeatureConnect(scope: string): FeatureConnect {
+  return {
+    emit<TIn = Record<string, unknown>>(name: string, payload: TIn) {
+      const s = _scopeName(scope, name);
+      void _invokeScoped(s, payload);
+      _client.fire(s, payload);
+      if (typeof window !== 'undefined') {
+        window.dispatchEvent(new CustomEvent(`plusui:${s}`, { detail: payload }));
+      }
+    },
+    on<TData = unknown>(name: string, cb: (payload: TData) => void): () => void {
+      const s = _scopeName(scope, name);
+      const off = _client.on<TData>(s, cb);
+      if (typeof window === 'undefined') return off;
+      const dom = (e: Event) => cb((e as CustomEvent<TData>).detail);
+      window.addEventListener(`plusui:${s}`, dom as EventListener);
+      return () => { off(); window.removeEventListener(`plusui:${s}`, dom as EventListener); };
+    },
+    call<TOut = unknown, TIn = Record<string, unknown>>(name: string, payload: TIn): Promise<TOut> {
+      const s = _scopeName(scope, name);
+      const host = globalThis as any;
+      if (typeof host.__invoke__ === 'function') return _invokeScoped(s, payload) as Promise<TOut>;
+      return _client.call<TOut, TIn>(s, payload);
+    },
+    stream<TData = unknown>(name: string) { return _client.stream<TData>(_scopeName(scope, name)); },
+    channel<TData = unknown>(name: string) { return _client.channel<TData>(_scopeName(scope, name)); },
+    scoped: (child: string) => createFeatureConnect(_scopeName(scope, child)),
+  };
+}
+
+// ─── connect — custom channels (your app-specific messages) ──────────────────
+export const connect = {
+  /** Send a message to C++ backend */
+  emit<TIn = Record<string, unknown>>(name: string, payload: TIn): void {
+    _client.fire(name, payload);
+  },
+  /** Listen for messages from C++ backend. Returns unsubscribe fn. */
+  on<TData = unknown>(name: string, cb: (payload: TData) => void): () => void {
+    return _client.on<TData>(name, cb);
+  },
+  /** Scoped feature connection (auto-prefixes names) */
+  feature: createFeatureConnect,
+};
+
+/** Advanced: raw connection client — call / stream / channel */
+export const connection = _client;
+
+// ─── win — window management ──────────────────────────────────────────────────
+const _winEvents = createFeatureConnect('window');
+
 export const win = {
-  minimize: async () => invoke('window.minimize', []),
-  maximize: async () => invoke('window.maximize', []),
-  show: async () => invoke('window.show', []),
-  hide: async () => invoke('window.hide', []),
-  close: async () => invoke('window.close', []),
-  setPosition: async (x: number, y: number) => invoke('window.setPosition', [x, y]),
-  getSize: async (): Promise<WindowSize> => invoke('window.getSize', []) as Promise<WindowSize>,
-  getPosition: async (): Promise<WindowPosition> => invoke('window.getPosition', []) as Promise<WindowPosition>,
+  minimize:       async () => invoke('window.minimize', []),
+  maximize:       async () => invoke('window.maximize', []),
+  show:           async () => invoke('window.show', []),
+  hide:           async () => invoke('window.hide', []),
+  close:          async () => invoke('window.close', []),
+  center:         async () => invoke('window.center', []),
+  setTitle:       async (title: string) => invoke('window.setTitle', [title]),
+  setSize:        async (w: number, h: number) => invoke('window.setSize', [w, h]),
+  setMinSize:     async (w: number, h: number) => invoke('window.setMinSize', [w, h]),
+  setMaxSize:     async (w: number, h: number) => invoke('window.setMaxSize', [w, h]),
+  setPosition:    async (x: number, y: number) => invoke('window.setPosition', [x, y]),
+  setAlwaysOnTop: async (v: boolean) => invoke('window.setAlwaysOnTop', [v]),
+  setFullscreen:  async (v: boolean) => invoke('window.setFullscreen', [v]),
+  setOpacity:     async (v: number) => invoke('window.setOpacity', [v]),
+  getSize:        async (): Promise<WindowSize> => invoke('window.getSize', []) as Promise<WindowSize>,
+  getPosition:    async (): Promise<WindowPosition> => invoke('window.getPosition', []) as Promise<WindowPosition>,
+  isMaximized:    async (): Promise<boolean> => invoke('window.isMaximized', []) as Promise<boolean>,
+  isVisible:      async (): Promise<boolean> => invoke('window.isVisible', []) as Promise<boolean>,
+  on:   _winEvents.on.bind(_winEvents),
+  emit: _winEvents.emit.bind(_winEvents),
 };
 
+// ─── browser ──────────────────────────────────────────────────────────────────
+const _browserEvents = createFeatureConnect('browser');
+
 export const browser = {
-  getUrl: async (): Promise<string> => invoke('browser.getUrl', []) as Promise<string>,
-  goBack: async () => invoke('browser.goBack', []),
-  goForward: async () => invoke('browser.goForward', []),
-  reload: async () => invoke('browser.reload', []),
-  canGoBack: async (): Promise<boolean> => invoke('browser.canGoBack', []) as Promise<boolean>,
+  getUrl:       async (): Promise<string> => invoke('browser.getUrl', []) as Promise<string>,
+  navigate:     async (url: string) => invoke('browser.navigate', [url]),
+  goBack:       async () => invoke('browser.goBack', []),
+  goForward:    async () => invoke('browser.goForward', []),
+  reload:       async () => invoke('browser.reload', []),
+  canGoBack:    async (): Promise<boolean> => invoke('browser.canGoBack', []) as Promise<boolean>,
   canGoForward: async (): Promise<boolean> => invoke('browser.canGoForward', []) as Promise<boolean>,
   onNavigate: (handler: (url: string) => void) => {
-    if (typeof window === 'undefined') {
-      return () => {};
-    }
-
-    const eventHandler = (event: Event) => {
-      const custom = event as CustomEvent<{ url?: string }>;
-      const nextUrl = custom.detail?.url ?? '';
-      handler(nextUrl);
-    };
-
-    window.addEventListener('plusui:navigate', eventHandler);
-    return () => window.removeEventListener('plusui:navigate', eventHandler);
+    if (typeof window === 'undefined') return () => {};
+    const h = (e: Event) => handler((e as CustomEvent<{ url?: string }>).detail?.url ?? '');
+    window.addEventListener('plusui:navigate', h);
+    return () => window.removeEventListener('plusui:navigate', h);
   },
+  on:   _browserEvents.on.bind(_browserEvents),
+  emit: _browserEvents.emit.bind(_browserEvents),
 };
 
+// ─── router ───────────────────────────────────────────────────────────────────
 export const router = {
-  setRoutes: (routes: RouteMap) => {
-    _routes = routes;
-  },
-  push: async (path: string) => {
-    const target = _routes[path] ?? path;
-    return invoke('browser.navigate', [target]);
-  },
+  setRoutes: (routes: RouteMap) => { _routes = routes; },
+  push: async (path: string) => invoke('browser.navigate', [_routes[path] ?? path]),
 };
 
+// ─── app ──────────────────────────────────────────────────────────────────────
+const _appEvents = createFeatureConnect('app');
+
 export const app = {
-  quit: async () => invoke('app.quit', []),
+  quit:  async () => invoke('app.quit', []),
+  on:   _appEvents.on.bind(_appEvents),
+  emit: _appEvents.emit.bind(_appEvents),
 };
 
-// FileDrop API
-export interface FileInfo {
-  path: string;
-  name: string;
-  type: string;
-  size: number;
-}
+// ─── clipboard ────────────────────────────────────────────────────────────────
+const _clipboardEvents = createFeatureConnect('clipboard');
+
+export const clipboard = {
+  getText:  async (): Promise<string> => invoke('clipboard.getText', []) as Promise<string>,
+  setText:  async (text: string) => invoke('clipboard.setText', [text]),
+  clear:    async () => invoke('clipboard.clear', []),
+  hasText:  async (): Promise<boolean> => invoke('clipboard.hasText', []) as Promise<boolean>,
+  on:   _clipboardEvents.on.bind(_clipboardEvents),
+  emit: _clipboardEvents.emit.bind(_clipboardEvents),
+};
+
+// ─── fileDrop ─────────────────────────────────────────────────────────────────
+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>,
+  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);
+    const h = (e: Event) => handler((e as CustomEvent<{ files?: FileInfo[] }>).detail?.files ?? []);
+    window.addEventListener('plusui:fileDrop.filesDropped', h);
+    return () => window.removeEventListener('plusui:fileDrop.filesDropped', h);
   },
   onDragEnter: (handler: () => void) => {
     if (typeof window === 'undefined') return () => {};
-    const eventHandler = () => handler();
-    window.addEventListener('plusui:fileDrop.dragEnter', eventHandler);
-    return () => window.removeEventListener('plusui:fileDrop.dragEnter', eventHandler);
+    window.addEventListener('plusui:fileDrop.dragEnter', handler);
+    return () => window.removeEventListener('plusui:fileDrop.dragEnter', handler);
   },
   onDragLeave: (handler: () => void) => {
     if (typeof window === 'undefined') return () => {};
-    const eventHandler = () => handler();
-    window.addEventListener('plusui:fileDrop.dragLeave', eventHandler);
-    return () => window.removeEventListener('plusui:fileDrop.dragLeave', eventHandler);
+    window.addEventListener('plusui:fileDrop.dragLeave', handler);
+    return () => window.removeEventListener('plusui:fileDrop.dragLeave', handler);
   },
 };
 
-// Helper functions
+// ─── Helpers ──────────────────────────────────────────────────────────────────
 export function formatFileSize(bytes: number): string {
   if (bytes === 0) return '0 Bytes';
   const k = 1024;
@@ -161,6 +362,40 @@ export function formatFileSize(bytes: number): string {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 }
 
-export function isImageFile(file: FileInfo): boolean {
-  return file.type.startsWith('image/');
-}
+export function isImageFile(file: FileInfo): boolean { return file.type.startsWith('image/'); }
+
+// ─── Top-level on / emit ─────────────────────────────────────────────────────
+//
+//   Custom app events — import directly, no wrapper prefix:
+//
+//   import { on, emit } from 'plusui';
+//
+//   emit('myEvent', { value: 42 });        // TS → C++
+//   on('myEvent', (data) => { ... });      // C++ → TS
+//
+//   Framework features use their own namespace:
+//
+//   import { win, clipboard } from 'plusui';
+//
+//   win.minimize();
+//   clipboard.on('changed', (data) => { ... });
+//
+export const on   = connect.on.bind(connect) as typeof connect.on;
+export const emit = connect.emit.bind(connect) as typeof connect.emit;
+
+// ─── Default export — everything under one roof ───────────────────────────────
+const plusui = {
+  /** Create a named custom scope: const search = feature('search'); search.on/emit(...) */
+  feature: createFeatureConnect,
+  connection,
+  win,
+  browser,
+  router,
+  app,
+  clipboard,
+  fileDrop,
+  on,
+  emit,
+};
+
+export default plusui;

package/templates/react/frontend/tsconfig.json

@@ -14,7 +14,11 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "plusui": ["./src/plusui.ts"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

package/templates/react/frontend/vite.config.ts

@@ -1,8 +1,15 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { fileURLToPath, URL } from 'node:url';
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      // `import plusui from 'plusui'` resolves to your local plusui.ts
+      plusui: fileURLToPath(new URL('./src/plusui.ts', import.meta.url)),
+    },
+  },
   build: {
     outDir: 'dist',
     emptyOutDir: true,

package/templates/react/main.cpp.template

@@ -1,6 +1,8 @@
 #include <plusui/plusui.hpp>  // All-in-one framework header
 #include <iostream>
 #include "generated/assets.h"
+// ── Generated channel bindings (run `plusui connect` to regenerate) ──────────
+#include "Connections/connections.gen.hpp"
 
 using namespace plusui;
 
@@ -104,6 +106,14 @@ struct WebGPUConfig {
 // ============================================================================
 // MAIN - Application Entry Point
 // ============================================================================
+// ── Connect instance ─────────────────────────────────────────────────────────
+// connect is the bridge between C++ and the frontend.
+// Run `plusui connect` to generate Connections/ from your name.on / name.emit usage.
+// Then declare:  Connections ch(connect);
+// and use:       ch.myEvent.on([](const json& p) { ... });
+//                ch.myEvent.emit({{"value", 42}});
+static Connect connect;
+
 int main() {
     // Build the app with configuration
     auto appBuilder = createApp()
@@ -164,12 +174,14 @@ int main() {
     #endif
     
     // ========================================
-    // CUSTOM C++ FUNCTIONS (expose to frontend)
+    // CONNECT — bind frontend ↔ backend
     // ========================================
-    // {{PROJECT_NAME_LOWER}}.bind("getVersion", [](const std::string& args) {
-    //     return "\"" + appConfig.version + "\"";
-    // });
-    // Call from JS: const version = await app.invoke('getVersion');
+    // Wires the connect object to this window.
+    // Connections ch gives you named channel objects — same API as TypeScript:
+    //   ch.myEvent.on([](const json& p) { ... });  // receive from frontend
+    //   ch.myEvent.emit({{"value", 42}});          // send to frontend
+    bindConnect(mainWindow, connect);
+    Connections ch(connect);  // use ch.name.on() / ch.name.emit()
     
     // ========================================
     // FILE DROP EVENTS (Native Drag & Drop API)
@@ -194,7 +206,15 @@ int main() {
 // ============================================================================
 // FRONTEND API REFERENCE
 // ============================================================================
-// import { win, browser, router, app } from './frontend/src/plusui';
+// import plusui from 'plusui';
+// import { connect, win, clipboard, app, browser, router, fileDrop } from 'plusui';
+//
+// CONNECT (custom channels — same API on both sides):
+//   Run `plusui connect` to generate Connections/ from your name.on / name.emit calls.
+//   C++: ch.myEvent.on([](const json& p) { ... });  // receive
+//        ch.myEvent.emit({{"value", 42}});          // send
+//   TS:  myEvent.on((data) => { ... });             // receive
+//        myEvent.emit({ value: 42 });               // send
 //
 // WINDOW: win.minimize(), win.maximize(), win.close(), win.center(),
 //         win.setSize(w, h), win.setPosition(x, y), win.setTitle(str),

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

@@ -1,5 +1,7 @@
 import { createSignal, onMount, onCleanup, Show, For } from 'solid-js';
-import { win, browser, router, app, fileDrop, formatFileSize, type FileInfo } from './plusui';
+import { win, browser, router, app, fileDrop, formatFileSize, type FileInfo } from 'plusui';
+// Custom channels (generated by `plusui connect`) — import what you use:
+// import { greeting, download } from '../Connections/connections.gen';
 
 // Define routes for your app (optional - for SPA routing)
 const routes = {

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

@@ -1,3 +1,18 @@
+// ============================================================
+// PlusUI — single import entrypoint
+//
+//   import plusui from 'plusui';
+//   import { connect, win, clipboard, app } from 'plusui';
+//
+// Everything your app needs — built-in features AND your own
+// custom connect channels — is available from this one import.
+//
+// After running `plusui connect`, Connections/connections.gen.ts
+// is auto-imported here so all discovered channels become typed.
+// ============================================================
+
+// ─── Bridge bootstrap ────────────────────────────────────────────────────────
+
 type InvokeFn = (method: string, args?: unknown[]) => Promise<unknown>;
 type PendingMap = Record<string, { resolve: (value: unknown) => void; reject: (reason?: unknown) => void }>;
 
@@ -25,16 +40,12 @@ function initBridge() {
     return new Promise((resolve, reject) => {
       const id = Math.random().toString(36).slice(2, 11);
       const request = JSON.stringify({ id, method, params: args ?? [] });
-
       _pending[id] = { resolve, reject };
 
       if (typeof w.__native_invoke__ === 'function') {
         w.__native_invoke__(request);
       } else {
-        setTimeout(() => {
-          delete _pending[id];
-          resolve(null);
-        }, 0);
+        setTimeout(() => { delete _pending[id]; resolve(null); }, 0);
       }
 
       setTimeout(() => {
@@ -48,10 +59,7 @@ function initBridge() {
 
   w.__response__ = (id: string, result: unknown) => {
     const pending = _pending[id];
-    if (pending) {
-      pending.resolve(result);
-      delete _pending[id];
-    }
+    if (pending) { pending.resolve(result); delete _pending[id]; }
   };
 
   _invoke = w.__invoke__ as InvokeFn;
@@ -60,97 +68,292 @@ function initBridge() {
 async function invoke(method: string, args?: unknown[]) {
   if (!_invoke) {
     initBridge();
-    if (!_invoke) {
-      throw new Error('PlusUI bridge not initialized');
-    }
+    if (!_invoke) throw new Error('PlusUI bridge not initialized');
   }
-
   return _invoke(method, args);
 }
 
 initBridge();
 
+// ─── Connection (on / emit) ───────────────────────────────────────────────────
+//
+// TWO METHODS. FIVE PRIMITIVES. EVERYTHING YOU NEED.
+//
+//   connect.emit('myEvent', { value: 42 });     // TS → C++
+//   connect.on('myEvent', (data) => { ... });   // C++ → TS
+//
+// Built-in features use their feature name as a scope:
+//   clipboard.on('changed', (data) => { ... })  // 'clipboard.changed'
+//   win.on('resized', (data) => { ... })         // 'window.resized'
+//
+// ─────────────────────────────────────────────────────────────────────────────
+
+type MessageCallback = (payload: any) => void;
+
+class ConnectionClient {
+  private pending = new Map<string, { resolve: (v: any) => void; reject: (e: Error) => void }>();
+  private listeners = new Map<string, Set<MessageCallback>>();
+
+  constructor() {
+    const host = globalThis as any;
+    host.__plusuiConnectionMessage = (message: unknown) => this.handleIncoming(message);
+    if (typeof window !== 'undefined') {
+      window.addEventListener('plusui:connection:message', (ev: Event) => {
+        this.handleIncoming((ev as CustomEvent<unknown>).detail);
+      });
+    }
+  }
+
+  private nextId() { return `${Date.now()}-${Math.random().toString(16).slice(2)}`; }
+
+  private async send(env: { kind: string; id?: string; name: string; payload?: unknown }): Promise<any> {
+    const host = globalThis as any;
+    if (typeof host.__invoke__ === 'function') return host.__invoke__('connection.dispatch', env);
+    if (host.ipc?.postMessage) host.ipc.postMessage(JSON.stringify(env));
+    return null;
+  }
+
+  private decode(message: unknown): any | null {
+    if (!message) return null;
+    if (typeof message === 'string') { try { return JSON.parse(message); } catch { return null; } }
+    if (typeof message === 'object') return message;
+    return null;
+  }
+
+  private handleIncoming(message: unknown): void {
+    const env = this.decode(message);
+    if (!env) return;
+    if ((env.kind === 'result' || env.kind === 'error') && env.id) {
+      const entry = this.pending.get(env.id);
+      if (!entry) return;
+      this.pending.delete(env.id);
+      if (env.kind === 'error') entry.reject(new Error(env.error || 'Connection call failed'));
+      else entry.resolve(env.payload);
+      return;
+    }
+    if (env.kind === 'event' || env.kind === 'stream' || env.kind === 'publish') {
+      const handlers = this.listeners.get(env.name);
+      if (handlers) for (const h of handlers) h(env.payload);
+    }
+  }
+
+  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) => this.pending.set(id, { resolve, reject }));
+    await this.send({ kind: 'call', id, name, payload });
+    return promise;
+  }
+
+  fire<TIn = Record<string, unknown>>(name: string, payload: TIn): void {
+    void this.send({ kind: 'fire', name, payload });
+  }
+
+  on<TData = unknown>(name: string, callback: (payload: TData) => void): () => void {
+    const set = this.listeners.get(name) ?? new Set<MessageCallback>();
+    set.add(callback as MessageCallback);
+    this.listeners.set(name, set);
+    return () => {
+      const cur = this.listeners.get(name);
+      if (!cur) return;
+      cur.delete(callback as MessageCallback);
+      if (cur.size === 0) this.listeners.delete(name);
+    };
+  }
+
+  stream<TData = unknown>(name: string) {
+    return {
+      subscribe: (cb: (payload: TData) => void): (() => void) => {
+        void this.send({ kind: 'sub', name });
+        const off = this.on<TData>(name, cb);
+        return () => { off(); void this.send({ kind: 'unsub', name }); };
+      },
+    };
+  }
+
+  channel<TData = unknown>(name: string) {
+    return {
+      subscribe: (cb: (payload: TData) => void): (() => void) => {
+        void this.send({ kind: 'sub', name });
+        const off = this.on<TData>(name, cb);
+        return () => { off(); void this.send({ kind: 'unsub', name }); };
+      },
+      publish: (payload: TData): void => { void this.send({ kind: 'publish', name, payload }); },
+    };
+  }
+}
+
+const _client = new ConnectionClient();
+
+// ─── FeatureConnect ───────────────────────────────────────────────────────────
+
+export type FeatureConnect = {
+  on: <TData = unknown>(name: string, cb: (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>;
+  stream: <TData = unknown>(name: string) => { subscribe: (cb: (payload: TData) => void) => (() => void) };
+  channel: <TData = unknown>(name: string) => {
+    subscribe: (cb: (payload: TData) => void) => (() => void);
+    publish: (payload: TData) => void;
+  };
+  scoped: (scope: string) => FeatureConnect;
+};
+
+function _scopeName(scope: string, name: string): string {
+  return name.startsWith(`${scope}.`) ? name : `${scope}.${name}`;
+}
+
+async function _invokeScoped(method: string, payload?: unknown): Promise<unknown> {
+  const host = globalThis as any;
+  if (typeof host.__invoke__ !== 'function') return undefined;
+  return host.__invoke__(method, payload === undefined ? [] : [payload]);
+}
+
+export function createFeatureConnect(scope: string): FeatureConnect {
+  return {
+    emit<TIn = Record<string, unknown>>(name: string, payload: TIn) {
+      const s = _scopeName(scope, name);
+      void _invokeScoped(s, payload);
+      _client.fire(s, payload);
+      if (typeof window !== 'undefined') {
+        window.dispatchEvent(new CustomEvent(`plusui:${s}`, { detail: payload }));
+      }
+    },
+    on<TData = unknown>(name: string, cb: (payload: TData) => void): () => void {
+      const s = _scopeName(scope, name);
+      const off = _client.on<TData>(s, cb);
+      if (typeof window === 'undefined') return off;
+      const dom = (e: Event) => cb((e as CustomEvent<TData>).detail);
+      window.addEventListener(`plusui:${s}`, dom as EventListener);
+      return () => { off(); window.removeEventListener(`plusui:${s}`, dom as EventListener); };
+    },
+    call<TOut = unknown, TIn = Record<string, unknown>>(name: string, payload: TIn): Promise<TOut> {
+      const s = _scopeName(scope, name);
+      const host = globalThis as any;
+      if (typeof host.__invoke__ === 'function') return _invokeScoped(s, payload) as Promise<TOut>;
+      return _client.call<TOut, TIn>(s, payload);
+    },
+    stream<TData = unknown>(name: string) { return _client.stream<TData>(_scopeName(scope, name)); },
+    channel<TData = unknown>(name: string) { return _client.channel<TData>(_scopeName(scope, name)); },
+    scoped: (child: string) => createFeatureConnect(_scopeName(scope, child)),
+  };
+}
+
+// ─── connect — custom channels (your app-specific messages) ──────────────────
+export const connect = {
+  /** Send a message to C++ backend */
+  emit<TIn = Record<string, unknown>>(name: string, payload: TIn): void {
+    _client.fire(name, payload);
+  },
+  /** Listen for messages from C++ backend. Returns unsubscribe fn. */
+  on<TData = unknown>(name: string, cb: (payload: TData) => void): () => void {
+    return _client.on<TData>(name, cb);
+  },
+  /** Scoped feature connection (auto-prefixes names) */
+  feature: createFeatureConnect,
+};
+
+/** Advanced: raw connection client — call / stream / channel */
+export const connection = _client;
+
+// ─── win — window management ──────────────────────────────────────────────────
+const _winEvents = createFeatureConnect('window');
+
 export const win = {
-  minimize: async () => invoke('window.minimize', []),
-  maximize: async () => invoke('window.maximize', []),
-  close: async () => invoke('window.close', []),
-  setPosition: async (x: number, y: number) => invoke('window.setPosition', [x, y]),
-  getSize: async (): Promise<WindowSize> => invoke('window.getSize', []) as Promise<WindowSize>,
-  getPosition: async (): Promise<WindowPosition> => invoke('window.getPosition', []) as Promise<WindowPosition>,
+  minimize:       async () => invoke('window.minimize', []),
+  maximize:       async () => invoke('window.maximize', []),
+  show:           async () => invoke('window.show', []),
+  hide:           async () => invoke('window.hide', []),
+  close:          async () => invoke('window.close', []),
+  center:         async () => invoke('window.center', []),
+  setTitle:       async (title: string) => invoke('window.setTitle', [title]),
+  setSize:        async (w: number, h: number) => invoke('window.setSize', [w, h]),
+  setMinSize:     async (w: number, h: number) => invoke('window.setMinSize', [w, h]),
+  setMaxSize:     async (w: number, h: number) => invoke('window.setMaxSize', [w, h]),
+  setPosition:    async (x: number, y: number) => invoke('window.setPosition', [x, y]),
+  setAlwaysOnTop: async (v: boolean) => invoke('window.setAlwaysOnTop', [v]),
+  setFullscreen:  async (v: boolean) => invoke('window.setFullscreen', [v]),
+  setOpacity:     async (v: number) => invoke('window.setOpacity', [v]),
+  getSize:        async (): Promise<WindowSize> => invoke('window.getSize', []) as Promise<WindowSize>,
+  getPosition:    async (): Promise<WindowPosition> => invoke('window.getPosition', []) as Promise<WindowPosition>,
+  isMaximized:    async (): Promise<boolean> => invoke('window.isMaximized', []) as Promise<boolean>,
+  isVisible:      async (): Promise<boolean> => invoke('window.isVisible', []) as Promise<boolean>,
+  on:   _winEvents.on.bind(_winEvents),
+  emit: _winEvents.emit.bind(_winEvents),
 };
 
+// ─── browser ──────────────────────────────────────────────────────────────────
+const _browserEvents = createFeatureConnect('browser');
+
 export const browser = {
-  getUrl: async (): Promise<string> => invoke('browser.getUrl', []) as Promise<string>,
-  goBack: async () => invoke('browser.goBack', []),
-  goForward: async () => invoke('browser.goForward', []),
-  reload: async () => invoke('browser.reload', []),
-  canGoBack: async (): Promise<boolean> => invoke('browser.canGoBack', []) as Promise<boolean>,
+  getUrl:       async (): Promise<string> => invoke('browser.getUrl', []) as Promise<string>,
+  navigate:     async (url: string) => invoke('browser.navigate', [url]),
+  goBack:       async () => invoke('browser.goBack', []),
+  goForward:    async () => invoke('browser.goForward', []),
+  reload:       async () => invoke('browser.reload', []),
+  canGoBack:    async (): Promise<boolean> => invoke('browser.canGoBack', []) as Promise<boolean>,
   canGoForward: async (): Promise<boolean> => invoke('browser.canGoForward', []) as Promise<boolean>,
   onNavigate: (handler: (url: string) => void) => {
-    if (typeof window === 'undefined') {
-      return () => {};
-    }
-
-    const eventHandler = (event: Event) => {
-      const custom = event as CustomEvent<{ url?: string }>;
-      const nextUrl = custom.detail?.url ?? '';
-      handler(nextUrl);
-    };
-
-    window.addEventListener('plusui:navigate', eventHandler);
-    return () => window.removeEventListener('plusui:navigate', eventHandler);
+    if (typeof window === 'undefined') return () => {};
+    const h = (e: Event) => handler((e as CustomEvent<{ url?: string }>).detail?.url ?? '');
+    window.addEventListener('plusui:navigate', h);
+    return () => window.removeEventListener('plusui:navigate', h);
   },
+  on:   _browserEvents.on.bind(_browserEvents),
+  emit: _browserEvents.emit.bind(_browserEvents),
 };
 
+// ─── router ───────────────────────────────────────────────────────────────────
 export const router = {
-  setRoutes: (routes: RouteMap) => {
-    _routes = routes;
-  },
-  push: async (path: string) => {
-    const target = _routes[path] ?? path;
-    return invoke('browser.navigate', [target]);
-  },
+  setRoutes: (routes: RouteMap) => { _routes = routes; },
+  push: async (path: string) => invoke('browser.navigate', [_routes[path] ?? path]),
 };
 
+// ─── app ──────────────────────────────────────────────────────────────────────
+const _appEvents = createFeatureConnect('app');
+
 export const app = {
-  quit: async () => invoke('app.quit', []),
+  quit:  async () => invoke('app.quit', []),
+  on:   _appEvents.on.bind(_appEvents),
+  emit: _appEvents.emit.bind(_appEvents),
 };
 
-// FileDrop API
-export interface FileInfo {
-  path: string;
-  name: string;
-  type: string;
-  size: number;
-}
+// ─── clipboard ────────────────────────────────────────────────────────────────
+const _clipboardEvents = createFeatureConnect('clipboard');
+
+export const clipboard = {
+  getText:  async (): Promise<string> => invoke('clipboard.getText', []) as Promise<string>,
+  setText:  async (text: string) => invoke('clipboard.setText', [text]),
+  clear:    async () => invoke('clipboard.clear', []),
+  hasText:  async (): Promise<boolean> => invoke('clipboard.hasText', []) as Promise<boolean>,
+  on:   _clipboardEvents.on.bind(_clipboardEvents),
+  emit: _clipboardEvents.emit.bind(_clipboardEvents),
+};
+
+// ─── fileDrop ─────────────────────────────────────────────────────────────────
+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>,
+  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);
+    const h = (e: Event) => handler((e as CustomEvent<{ files?: FileInfo[] }>).detail?.files ?? []);
+    window.addEventListener('plusui:fileDrop.filesDropped', h);
+    return () => window.removeEventListener('plusui:fileDrop.filesDropped', h);
   },
   onDragEnter: (handler: () => void) => {
     if (typeof window === 'undefined') return () => {};
-    const eventHandler = () => handler();
-    window.addEventListener('plusui:fileDrop.dragEnter', eventHandler);
-    return () => window.removeEventListener('plusui:fileDrop.dragEnter', eventHandler);
+    window.addEventListener('plusui:fileDrop.dragEnter', handler);
+    return () => window.removeEventListener('plusui:fileDrop.dragEnter', handler);
   },
   onDragLeave: (handler: () => void) => {
     if (typeof window === 'undefined') return () => {};
-    const eventHandler = () => handler();
-    window.addEventListener('plusui:fileDrop.dragLeave', eventHandler);
-    return () => window.removeEventListener('plusui:fileDrop.dragLeave', eventHandler);
+    window.addEventListener('plusui:fileDrop.dragLeave', handler);
+    return () => window.removeEventListener('plusui:fileDrop.dragLeave', handler);
   },
 };
 
-// Helper functions
+// ─── Helpers ──────────────────────────────────────────────────────────────────
 export function formatFileSize(bytes: number): string {
   if (bytes === 0) return '0 Bytes';
   const k = 1024;
@@ -159,6 +362,41 @@ export function formatFileSize(bytes: number): string {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 }
 
-export function isImageFile(file: FileInfo): boolean {
-  return file.type.startsWith('image/');
-}
+export function isImageFile(file: FileInfo): boolean { return file.type.startsWith('image/'); }
+
+// ─── Top-level on / emit ─────────────────────────────────────────────────────
+//
+//   Custom app events — import directly, no wrapper prefix:
+//
+//   import { on, emit } from 'plusui';
+//
+//   emit('myEvent', { value: 42 });        // TS → C++
+//   on('myEvent', (data) => { ... });      // C++ → TS
+//
+//   Framework features use their own namespace:
+//
+//   import { win, clipboard } from 'plusui';
+//
+//   win.minimize();
+//   clipboard.on('changed', (data) => { ... });
+//
+export const on   = connect.on.bind(connect) as typeof connect.on;
+export const emit = connect.emit.bind(connect) as typeof connect.emit;
+
+// ─── Default export — everything under one roof ───────────────────────────────
+const plusui = {
+  /** Create a named custom scope: const search = feature('search'); search.on/emit(...) */
+  feature: createFeatureConnect,
+  connection,
+  win,
+  browser,
+  router,
+  app,
+  clipboard,
+  fileDrop,
+  on,
+  emit,
+};
+
+export default plusui;
+

package/templates/solid/frontend/tsconfig.json

@@ -15,7 +15,11 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "plusui": ["./src/plusui.ts"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

package/templates/solid/frontend/vite.config.ts

@@ -1,8 +1,15 @@
 import { defineConfig } from 'vite';
 import solid from 'vite-plugin-solid';
+import { fileURLToPath, URL } from 'node:url';
 
 export default defineConfig({
   plugins: [solid()],
+  resolve: {
+    alias: {
+      // `import plusui from 'plusui'` resolves to your local plusui.ts
+      plusui: fileURLToPath(new URL('./src/plusui.ts', import.meta.url)),
+    },
+  },
   build: {
     outDir: 'dist',
     emptyOutDir: true,

package/templates/solid/main.cpp.template

@@ -1,6 +1,8 @@
 #include <plusui/plusui.hpp>  // All-in-one framework header
 #include <iostream>
 #include "generated/assets.h"
+// ── Generated channel bindings (run `plusui connect` to regenerate) ──────────
+#include "Connections/connections.gen.hpp"
 
 using namespace plusui;
 
@@ -103,6 +105,14 @@ struct WebGPUConfig {
 // ============================================================================
 // MAIN - Application Entry Point
 // ============================================================================
+// ── Connect instance ─────────────────────────────────────────────────────────
+// connect is the bridge between C++ and the frontend.
+// Run `plusui connect` to generate Connections/ from your name.on / name.emit usage.
+// Then declare:  Connections ch(connect);
+// and use:       ch.myEvent.on([](const json& p) { ... });
+//                ch.myEvent.emit({{"value", 42}});
+static Connect connect;
+
 int main() {
     // Build the app with configuration
     auto appBuilder = createApp()
@@ -158,12 +168,14 @@ int main() {
     #endif
     
     // ========================================
-    // CUSTOM C++ FUNCTIONS (expose to frontend)
+    // CONNECT — bind frontend ↔ backend
     // ========================================
-    // {{PROJECT_NAME_LOWER}}.bind("getVersion", [](const std::string& args) {
-    //     return "\"" + appConfig.version + "\"";
-    // });
-    // Call from JS: const version = await app.invoke('getVersion');
+    // Wires the connect object to this window.
+    // Connections ch gives you named channel objects — same API as TypeScript:
+    //   ch.myEvent.on([](const json& p) { ... });  // receive from frontend
+    //   ch.myEvent.emit({{"value", 42}});          // send to frontend
+    bindConnect(mainWindow, connect);
+    Connections ch(connect);  // use ch.name.on() / ch.name.emit()
     
     // ========================================
     // FILE DROP EVENTS (Native Drag & Drop API)
@@ -188,7 +200,15 @@ int main() {
 // ============================================================================
 // FRONTEND API REFERENCE
 // ============================================================================
-// import { win, browser, router, app } from './frontend/src/plusui';
+// import plusui from 'plusui';
+// import { connect, win, clipboard, app, browser, router, fileDrop } from 'plusui';
+//
+// CONNECT (custom channels — same API on both sides):
+//   Run `plusui connect` to generate Connections/ from your name.on / name.emit calls.
+//   C++: ch.myEvent.on([](const json& p) { ... });  // receive
+//        ch.myEvent.emit({{"value", 42}});          // send
+//   TS:  myEvent.on((data) => { ... });             // receive
+//        myEvent.emit({ value: 42 });               // send
 //
 // WINDOW: win.minimize(), win.maximize(), win.close(), win.center(),
 //         win.setSize(w, h), win.setPosition(x, y), win.setTitle(str),