plusui-native 0.2.73 → 0.2.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plusui-native",
-  "version": "0.2.73",
+  "version": "0.2.75",
   "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.72",
-    "plusui-native-connect": "^0.1.72"
+    "plusui-native-builder": "^0.1.74",
+    "plusui-native-connect": "^0.1.74"
   },
   "peerDependencies": {
-    "plusui-native-connect": "^0.1.72"
+    "plusui-native-connect": "^0.1.74"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,15 +1,8 @@
 import { useState, useEffect } from 'react';
-import plusui from 'plusui';
+import plusui, { formatFileSize } from 'plusui-native-core';
 // Generated by `plusui connect` — channel objects auto-created from name.on / name.emit usage:
 import { customFileDrop } from '../Connections/connections.gen';
 
-// Define routes for your app (optional - for SPA routing)
-const routes = {
-  '/': 'http://localhost:5173',
-  '/settings': 'http://localhost:5173/settings',
-  '/about': 'http://localhost:5173/about',
-};
-
 function App() {
   const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
   const [windowPos, setWindowPos] = useState({ x: 0, y: 0 });
@@ -28,7 +21,10 @@ function App() {
     });
 
     // Setup routes
-    plusui.router.setRoutes(routes);
+    plusui.router.setRoutes({
+      '/app': 'http://localhost:5173/app',
+      '/about': 'http://localhost:5173/about',
+    });
 
     // Listen for navigation changes
     const unsub = plusui.browser.onNavigate((url) => {
@@ -70,10 +66,6 @@ function App() {
   const handleGoForward = async () => await plusui.browser.goForward();
   const handleReload = async () => await plusui.browser.reload();
 
-  // Router navigation
-  const handleGoHome = async () => await plusui.router.push('/');
-  const handleGoSettings = async () => await plusui.router.push('/settings');
-
   // App control
   const handleQuit = async () => await plusui.app.quit();
 
@@ -140,17 +132,6 @@ function App() {
           </div>
         </div>
 
-        <div className="card">
-          <h2>Router (SPA Navigation)</h2>
-          <div className="button-group">
-            <button onClick={handleGoHome} className="button">Home /</button>
-            <button onClick={handleGoSettings} className="button">Settings</button>
-          </div>
-          <p style={{ fontSize: '0.85em', color: '#666', marginTop: '10px' }}>
-            Define routes with <code>plusui.router.setRoutes({'{ ... }'})</code> then navigate with <code>plusui.router.push('/path')</code>
-          </p>
-        </div>
-
         <div className="card">
           <h2>App Control</h2>
           <button onClick={handleQuit} className="button button-danger">Quit App</button>
@@ -193,7 +174,7 @@ function App() {
                   <div className="filedrop-file-icon">📄</div>
                   <div className="filedrop-file-info">
                     <div className="filedrop-file-name">{file.name}</div>
-                    <div className="filedrop-file-meta">{plusui.formatFileSize(file.size)} • {file.type}</div>
+                    <div className="filedrop-file-meta">{formatFileSize(file.size)} • {file.type}</div>
                   </div>
                 </div>
               ))}

package/templates/react/main.cpp.template

@@ -73,9 +73,9 @@ struct WindowConfig {
     
     // --- Routing ---
     // The frontend route this window opens on.
-    // Use "/" for root, "/settings" for settings page, etc.
+    // Use "/app" for main view, "/settings" for settings page, etc.
     // Works with any frontend router (React Router, TanStack, Solid Router).
-    std::string route = "/";              // Starting route (e.g. "/", "/settings", "/profile")
+    std::string route = "/app";           // Starting route (e.g. "/app", "/settings")
     int devServerPort = 5173;             // Vite dev server port
 } windowConfig;
 
@@ -114,12 +114,13 @@ struct WebGPUConfig {
 // MAIN - Application Entry Point
 // ============================================================================
 // ── Connect instance ─────────────────────────────────────────────────────────
-// connect is the bridge between C++ and the frontend.
+// conn 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;
+// Call initChannels(conn) once, then use channels directly:
+//   customFileDrop.on([](const json& p) { ... });
+//   customFileDrop.emit({{"value", 42}});
+static Connect conn;
+using json = nlohmann::json;
 
 int main() {
     // Build the app with configuration
@@ -191,12 +192,12 @@ int main() {
     // ========================================
     // CONNECT — bind frontend ↔ backend
     // ========================================
-    // 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()
+    // Wires the connect object to this window, then initialises
+    // the auto-generated channels so you can use them directly:
+    //   customFileDrop.on([](const json& p) { ... });
+    //   customFileDrop.emit({{"value", 42}});
+    bindConnect(mainWindow, conn);
+    initChannels(conn);
     
     // ========================================
     // CUSTOM FILE DROP CHANNEL
@@ -205,7 +206,7 @@ int main() {
     // Frontend drops files → emits via customFileDrop.emit({ files: [...] })
     // C++ receives here, processes, then emits back to the frontend.
     // Frontend receives the reply via customFileDrop.on() in App.tsx.
-    ch.customFileDrop.on([&ch](const json& payload) {
+    customFileDrop.on([](const json& payload) {
         auto files = payload.value("files", json::array());
         int count = static_cast<int>(files.size());
         std::cout << "customFileDrop: received " << count << " file(s) from frontend" << std::endl;
@@ -213,7 +214,7 @@ int main() {
             std::cout << "  - " << f.value("name", "?") << " (" << f.value("size", 0) << " bytes)" << std::endl;
         }
         // Reply back to frontend — received by customFileDrop.on() in App.tsx
-        ch.customFileDrop.emit({
+        customFileDrop.emit({
             {"processed", true},
             {"count", count},
             {"message", "C++ received " + std::to_string(count) + " file(s)"}
@@ -237,10 +238,10 @@ int main() {
 //
 // 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
+//   C++: customFileDrop.on([](const json& p) { ... });  // receive
+//        customFileDrop.emit({{"value", 42}});           // send
+//   TS:  customFileDrop.on((data) => { ... });           // receive
+//        customFileDrop.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,22 +1,15 @@
 import { createSignal, onMount, onCleanup, Show, For } from 'solid-js';
-import plusui from 'plusui';
+import plusui, { formatFileSize } from 'plusui-native-core';
 // Generated by `plusui connect` — channel objects auto-created from name.on / name.emit usage:
 import { customFileDrop } from '../Connections/connections.gen';
 
-// Define routes for your app (optional - for SPA routing)
-const routes = {
-  '/': 'http://localhost:5173',
-  '/settings': 'http://localhost:5173/settings',
-  '/about': 'http://localhost:5173/about',
-};
-
 function App() {
   const [windowSize, setWindowSize] = createSignal({ width: 0, height: 0 });
   const [windowPos, setWindowPos] = createSignal({ x: 0, y: 0 });
   const [currentUrl, setCurrentUrl] = createSignal('');
   const [canGoBack, setCanGoBack] = createSignal(false);
   const [canGoForward, setCanGoForward] = createSignal(false);
-  
+
   // customFileDrop connect channel state
   const [isDragging, setIsDragging] = createSignal(false);
   const [droppedFiles, setDroppedFiles] = createSignal<{ name: string; size: number; type: string }[]>([]);
@@ -24,20 +17,23 @@ function App() {
 
   onMount(() => {
     // Setup routes
-    plusui.router.setRoutes(routes);
-    
+    plusui.router.setRoutes({
+      '/app': 'http://localhost:5173/app',
+      '/about': 'http://localhost:5173/about',
+    });
+
     // Listen for navigation changes
     plusui.browser.onNavigate((url) => {
       setCurrentUrl(url);
       plusui.browser.canGoBack().then(setCanGoBack);
       plusui.browser.canGoForward().then(setCanGoForward);
     });
-    
+
     // Get initial state
     plusui.browser.getUrl().then(setCurrentUrl);
     plusui.browser.canGoBack().then(setCanGoBack);
     plusui.browser.canGoForward().then(setCanGoForward);
-    
+
     // Listen for responses emitted from C++ via ch.customFileDrop.emit(...) in main.cpp
     const unsub = customFileDrop.on((data: any) => {
       setBackendMsg(data?.message ?? JSON.stringify(data));
@@ -62,10 +58,6 @@ function App() {
   const handleGoForward = async () => await plusui.browser.goForward();
   const handleReload = async () => await plusui.browser.reload();
 
-  // Router navigation
-  const handleGoHome = async () => await plusui.router.push('/');
-  const handleGoSettings = async () => await plusui.router.push('/settings');
-
   // App control
   const handleQuit = async () => await plusui.app.quit();
 
@@ -88,7 +80,7 @@ function App() {
   return (
     <div class="app">
       <header class="app-header">
-        <h1>{{PROJECT_NAME}} App</h1>
+        <h1>{{ PROJECT_NAME }} App</h1>
         <p>Built with PlusUI Framework</p>
       </header>
 
@@ -132,17 +124,6 @@ function App() {
           </div>
         </div>
 
-        <div class="card">
-          <h2>Router (SPA Navigation)</h2>
-          <div class="button-group">
-            <button onClick={handleGoHome} class="button">Home /</button>
-            <button onClick={handleGoSettings} class="button">Settings</button>
-          </div>
-          <p style={{ 'font-size': '0.85em', color: '#666', 'margin-top': '10px' }}>
-            Define routes with <code>plusui.router.setRoutes({'{ ... }'})</code> then navigate with <code>plusui.router.push('/path')</code>
-          </p>
-        </div>
-
         <div class="card">
           <h2>App Control</h2>
           <button onClick={handleQuit} class="button button-danger">Quit App</button>
@@ -156,7 +137,7 @@ function App() {
             The frontend receives the reply via <code>customFileDrop.on()</code>. Run{' '}
             <code>plusui connect</code> to regenerate the channel bindings from both sides.
           </p>
-          
+
           <div
             class={`filedrop-zone ${isDragging() ? 'filedrop-active' : ''}`}
             onDragOver={handleDragOver}
@@ -167,7 +148,7 @@ function App() {
             <div class="filedrop-content">
               <svg class="filedrop-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2}
-                      d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
               </svg>
               <div class="filedrop-text">
                 {isDragging() ? 'Drop files here' : 'Drag & drop files to send to C++'}
@@ -186,7 +167,7 @@ function App() {
                     <div class="filedrop-file-icon">📄</div>
                     <div class="filedrop-file-info">
                       <div class="filedrop-file-name">{file.name}</div>
-                      <div class="filedrop-file-meta">{plusui.formatFileSize(file.size)} • {file.type}</div>
+                      <div class="filedrop-file-meta">{formatFileSize(file.size)} • {file.type}</div>
                     </div>
                   </div>
                 )}

package/templates/solid/main.cpp.template

@@ -72,9 +72,9 @@ struct WindowConfig {
     
     // --- Routing ---
     // The frontend route this window opens on.
-    // Use "/" for root, "/settings" for settings page, etc.
+    // Use "/app" for main view, "/settings" for settings page, etc.
     // Works with any frontend router (Solid Router, TanStack, etc.).
-    std::string route = "/";              // Starting route (e.g. "/", "/settings", "/profile")
+    std::string route = "/app";           // Starting route (e.g. "/app", "/settings")
     int devServerPort = 5173;             // Vite dev server port
 } windowConfig;
 
@@ -113,12 +113,13 @@ struct WebGPUConfig {
 // MAIN - Application Entry Point
 // ============================================================================
 // ── Connect instance ─────────────────────────────────────────────────────────
-// connect is the bridge between C++ and the frontend.
+// conn 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;
+// Call initChannels(conn) once, then use channels directly:
+//   customFileDrop.on([](const json& p) { ... });
+//   customFileDrop.emit({{"value", 42}});
+static Connect conn;
+using json = nlohmann::json;
 
 int main() {
     // Build the app with configuration
@@ -185,12 +186,12 @@ int main() {
     // ========================================
     // CONNECT — bind frontend ↔ backend
     // ========================================
-    // 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()
+    // Wires the connect object to this window, then initialises
+    // the auto-generated channels so you can use them directly:
+    //   customFileDrop.on([](const json& p) { ... });
+    //   customFileDrop.emit({{"value", 42}});
+    bindConnect(mainWindow, conn);
+    initChannels(conn);
     
     // ========================================
     // CUSTOM FILE DROP CHANNEL
@@ -199,7 +200,7 @@ int main() {
     // Frontend drops files → emits via customFileDrop.emit({ files: [...] })
     // C++ receives here, processes, then emits back to the frontend.
     // Frontend receives the reply via customFileDrop.on() in App.tsx.
-    ch.customFileDrop.on([&ch](const json& payload) {
+    customFileDrop.on([](const json& payload) {
         auto files = payload.value("files", json::array());
         int count = static_cast<int>(files.size());
         std::cout << "customFileDrop: received " << count << " file(s) from frontend" << std::endl;
@@ -207,7 +208,7 @@ int main() {
             std::cout << "  - " << f.value("name", "?") << " (" << f.value("size", 0) << " bytes)" << std::endl;
         }
         // Reply back to frontend — received by customFileDrop.on() in App.tsx
-        ch.customFileDrop.emit({
+        customFileDrop.emit({
             {"processed", true},
             {"count", count},
             {"message", "C++ received " + std::to_string(count) + " file(s)"}
@@ -231,10 +232,10 @@ int main() {
 //
 // 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
+//   C++: customFileDrop.on([](const json& p) { ... });  // receive
+//        customFileDrop.emit({{"value", 42}});           // send
+//   TS:  customFileDrop.on((data) => { ... });           // receive
+//        customFileDrop.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/react/frontend/src/plusui.ts

@@ -1,837 +0,0 @@
-
-type InvokeFn = (method: string, args?: unknown[]) => Promise<unknown>;
-type PendingMap = Record<string, { resolve: (value: unknown) => void; reject: (reason?: unknown) => void }>;
-
-type WindowSize = { width: number; height: number };
-type WindowPosition = { x: number; y: number };
-type RouteMap = Record<string, string>;
-
-let _invoke: InvokeFn | null = null;
-let _pending: PendingMap = {};
-let _routes: RouteMap = {};
-
-function initBridge() {
-  if (typeof window === 'undefined') return;
-
-  const w = window as any;
-  if (typeof w.__invoke__ === 'function') {
-    _invoke = w.__invoke__ as InvokeFn;
-    return;
-  }
-
-  _pending = {};
-  w.__pending__ = _pending;
-
-  w.__invoke__ = (method: string, args?: unknown[]): Promise<unknown> => {
-    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(() => {
-        if (_pending[id]) {
-          delete _pending[id];
-          reject(new Error(`${method} timed out`));
-        }
-      }, 30000);
-    });
-  };
-
-  w.__response__ = (id: string, result: unknown) => {
-    const pending = _pending[id];
-    if (pending) { pending.resolve(result); delete _pending[id]; }
-  };
-
-  _invoke = w.__invoke__ as InvokeFn;
-}
-
-async function invoke(method: string, args?: unknown[]) {
-  if (!_invoke) {
-    initBridge();
-    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 — used by generated code */
-export { _client, _client as connection };
-
-// ─── 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', []),
-  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>,
-  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 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) => invoke('browser.navigate', [_routes[path] ?? path]),
-};
-
-// ─── app ──────────────────────────────────────────────────────────────────────
-const _appEvents = createFeatureConnect('app');
-
-export const app = {
-  quit: async () => invoke('app.quit', []),
-  on: _appEvents.on.bind(_appEvents),
-  emit: _appEvents.emit.bind(_appEvents),
-};
-
-// ─── 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>,
-  onFilesDropped: (handler: (files: FileInfo[]) => void) => {
-    if (typeof window === 'undefined') return () => { };
-    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 () => { };
-    window.addEventListener('plusui:fileDrop.dragEnter', handler);
-    return () => window.removeEventListener('plusui:fileDrop.dragEnter', handler);
-  },
-  onDragLeave: (handler: () => void) => {
-    if (typeof window === 'undefined') return () => { };
-
-    // ─── 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', []),
-      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>,
-      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 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) => invoke('browser.navigate', [_routes[path] ?? path]),
-    };
-
-    // ─── app ──────────────────────────────────────────────────────────────────────
-    const _appEvents = createFeatureConnect('app');
-
-    export const app = {
-      quit: async () => invoke('app.quit', []),
-      on: _appEvents.on.bind(_appEvents),
-      emit: _appEvents.emit.bind(_appEvents),
-    };
-
-    // ─── 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>,
-      onFilesDropped: (handler: (files: FileInfo[]) => void) => {
-        if (typeof window === 'undefined') return () => { };
-        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 () => { };
-        window.addEventListener('plusui:fileDrop.dragEnter', handler);
-        return () => window.removeEventListener('plusui:fileDrop.dragEnter', handler);
-      },
-      onDragLeave: (handler: () => void) => {
-        if (typeof window === 'undefined') return () => { };
-        window.addEventListener('plusui:fileDrop.dragLeave', handler);
-        return () => window.removeEventListener('plusui:fileDrop.dragLeave', handler);
-      },
-    };
-
-    // ─── keyboard ─────────────────────────────────────────────────────────────────
-    export enum KeyCode {
-      Unknown = 0, Space = 32, Escape = 256, Enter = 257, Tab = 258,
-      Backspace = 259, Delete = 261, Right = 262, Left = 263, Down = 264, Up = 265,
-      F1 = 290, F2 = 291, F3 = 292, F4 = 293, F5 = 294, F6 = 295,
-      F7 = 296, F8 = 297, F9 = 298, F10 = 299, F11 = 300, F12 = 301,
-      LeftShift = 340, LeftControl = 341, LeftAlt = 342,
-    }
-    export enum KeyMod { None = 0, Shift = 1, Control = 2, Alt = 4, Super = 8 }
-    export interface KeyEvent { key: KeyCode; scancode: number; mods: KeyMod; pressed: boolean; repeat: boolean; keyName: string; }
-    export interface Shortcut { key: KeyCode; mods: KeyMod; }
-
-    const _shortcutHandlers = new Map<string, () => void>();
-
-    export const keyboard = {
-      isKeyPressed: async (key: KeyCode): Promise<boolean> => invoke('keyboard.isKeyPressed', [key]) as Promise<boolean>,
-      setAutoRepeat: async (enabled: boolean): Promise<void> => { await invoke('keyboard.setAutoRepeat', [enabled]); },
-      getAutoRepeat: async (): Promise<boolean> => invoke('keyboard.getAutoRepeat') as Promise<boolean>,
-      async registerShortcut(id: string, shortcut: Shortcut, callback: () => void): Promise<boolean> {
-        _shortcutHandlers.set(id, callback);
-        return invoke<boolean>('keyboard.registerShortcut', [id, shortcut]);
-      },
-      async unregisterShortcut(id: string): Promise<boolean> {
-        _shortcutHandlers.delete(id);
-        return invoke<boolean>('keyboard.unregisterShortcut', [id]);
-      },
-      async clearShortcuts(): Promise<void> {
-        _shortcutHandlers.clear();
-        await invoke('keyboard.clearShortcuts');
-      },
-      onKeyDown(callback: (event: KeyEvent) => void): () => void {
-        if (typeof window === 'undefined') return () => { };
-        const h = (e: Event) => callback((e as CustomEvent<KeyEvent>).detail);
-        window.addEventListener('plusui:keyboard.keydown', h);
-        return () => window.removeEventListener('plusui:keyboard.keydown', h);
-      },
-      onKeyUp(callback: (event: KeyEvent) => void): () => void {
-        if (typeof window === 'undefined') return () => { };
-        const h = (e: Event) => callback((e as CustomEvent<KeyEvent>).detail);
-        window.addEventListener('plusui:keyboard.keyup', h);
-        return () => window.removeEventListener('plusui:keyboard.keyup', h);
-      },
-      onShortcut(callback: (id: string) => void): () => void {
-        if (typeof window === 'undefined') return () => { };
-        const h = (e: Event) => callback((e as CustomEvent<{ id: string }>).detail.id);
-        window.addEventListener('plusui:keyboard.shortcut', h);
-        return () => window.removeEventListener('plusui:keyboard.shortcut', h);
-      },
-      parseShortcut(str: string): Shortcut {
-        const parts = str.toLowerCase().split('+');
-        let mods = KeyMod.None;
-        let key = KeyCode.Unknown;
-        for (const part of parts) {
-          const t = part.trim();
-          if (t === 'ctrl' || t === 'control') mods |= KeyMod.Control;
-          else if (t === 'alt') mods |= KeyMod.Alt;
-          else if (t === 'shift') mods |= KeyMod.Shift;
-          else if (t === 'super' || t === 'win' || t === 'cmd') mods |= KeyMod.Super;
-          else key = this.keyNameToCode(t);
-        }
-        return { key, mods };
-      },
-      keyNameToCode(name: string): KeyCode {
-        const map: Record<string, KeyCode> = {
-          space: KeyCode.Space, escape: KeyCode.Escape, enter: KeyCode.Enter,
-          tab: KeyCode.Tab, backspace: KeyCode.Backspace, delete: KeyCode.Delete,
-          right: KeyCode.Right, left: KeyCode.Left, down: KeyCode.Down, up: KeyCode.Up,
-          f1: KeyCode.F1, f2: KeyCode.F2, f3: KeyCode.F3, f4: KeyCode.F4,
-          f5: KeyCode.F5, f6: KeyCode.F6, f7: KeyCode.F7, f8: KeyCode.F8,
-          f9: KeyCode.F9, f10: KeyCode.F10, f11: KeyCode.F11, f12: KeyCode.F12,
-        };
-        return map[name] ?? KeyCode.Unknown;
-      },
-    };
-
-    // ─── tray ─────────────────────────────────────────────────────────────────────
-    export interface TrayMenuItem { id: string; label: string; icon?: string; enabled?: boolean; checked?: boolean; separator?: boolean; submenu?: TrayMenuItem[]; }
-    export interface TrayIconData { id: number; tooltip: string; iconPath: string; isVisible: boolean; }
-
-    export const tray = {
-      setIcon: async (iconPath: string): Promise<void> => { await invoke('tray.setIcon', [iconPath]); },
-      setTooltip: async (tooltip: string): Promise<void> => { await invoke('tray.setTooltip', [tooltip]); },
-      setVisible: async (visible: boolean): Promise<void> => { await invoke('tray.setVisible', [visible]); },
-      setMenu: async (items: TrayMenuItem[]): Promise<void> => { await invoke('tray.setMenu', [items]); },
-      setContextMenu: async (items: TrayMenuItem[]): Promise<void> => { await invoke('tray.setContextMenu', [items]); },
-      onClick(callback: (x: number, y: number) => void): () => void {
-        if (typeof window === 'undefined') return () => { };
-        const h = (e: Event) => { const d = (e as CustomEvent<{ x: number; y: number }>).detail; callback(d.x, d.y); };
-        window.addEventListener('plusui:tray.click', h);
-        return () => window.removeEventListener('plusui:tray.click', h);
-      },
-      onDoubleClick(callback: () => void): () => void {
-        if (typeof window === 'undefined') return () => { };
-        window.addEventListener('plusui:tray.doubleClick', callback);
-        return () => window.removeEventListener('plusui:tray.doubleClick', callback);
-      },
-      onRightClick(callback: (x: number, y: number) => void): () => void {
-        if (typeof window === 'undefined') return () => { };
-        const h = (e: Event) => { const d = (e as CustomEvent<{ x: number; y: number }>).detail; callback(d.x, d.y); };
-        window.addEventListener('plusui:tray.rightClick', h);
-        return () => window.removeEventListener('plusui:tray.rightClick', h);
-      },
-      onMenuItemClick(callback: (id: string) => void): () => void {
-        if (typeof window === 'undefined') return () => { };
-        const h = (e: Event) => callback((e as CustomEvent<{ id: string }>).detail.id);
-        window.addEventListener('plusui:tray.menuItemClick', h);
-        return () => window.removeEventListener('plusui:tray.menuItemClick', h);
-      },
-    };
-
-    // ─── display ──────────────────────────────────────────────────────────────────
-    export interface DisplayMode { width: number; height: number; refreshRate: number; bitDepth: number; }
-    export interface DisplayBounds { x: number; y: number; width: number; height: number; }
-    export interface DisplayResolution { width: number; height: number; }
-    export interface Display {
-      id: number; name: string; isPrimary: boolean;
-      bounds: DisplayBounds; workArea: DisplayBounds; resolution: DisplayResolution;
-      currentMode: DisplayMode; scaleFactor: number; rotation: number;
-      isInternal: boolean; isConnected: boolean;
-    }
-
-    export const display = {
-      getAllDisplays: async (): Promise<Display[]> => invoke<Display[]>('display.getAllDisplays'),
-      getPrimaryDisplay: async (): Promise<Display> => invoke<Display>('display.getPrimaryDisplay'),
-      getDisplayAt: async (x: number, y: number): Promise<Display> => invoke<Display>('display.getDisplayAt', [x, y]),
-      getDisplayAtCursor: async (): Promise<Display> => invoke<Display>('display.getDisplayAtCursor'),
-      getDisplayById: async (id: number): Promise<Display> => invoke<Display>('display.getDisplayById', [id]),
-      setDisplayMode: async (displayId: number, mode: DisplayMode): Promise<boolean> => invoke<boolean>('display.setDisplayMode', [displayId, mode]),
-      setPosition: async (displayId: number, x: number, y: number): Promise<boolean> => invoke<boolean>('display.setPosition', [displayId, x, y]),
-      turnOff: async (displayId: number): Promise<boolean> => invoke<boolean>('display.turnOff', [displayId]),
-      getScreenWidth: async (): Promise<number> => invoke<number>('screen.getWidth'),
-      getScreenHeight: async (): Promise<number> => invoke<number>('screen.getHeight'),
-      getScaleFactor: async (): Promise<number> => invoke<number>('screen.getScaleFactor'),
-      getRefreshRate: async (): Promise<number> => invoke<number>('screen.getRefreshRate'),
-      onConnected(callback: (d: Display) => void): () => void {
-        if (typeof window === 'undefined') return () => { };
-        const h = (e: Event) => callback((e as CustomEvent<Display>).detail);
-        window.addEventListener('plusui:display.connected', h);
-        return () => window.removeEventListener('plusui:display.connected', h);
-      },
-      onDisconnected(callback: (id: number) => void): () => void {
-        if (typeof window === 'undefined') return () => { };
-        const h = (e: Event) => callback((e as CustomEvent<{ id: number }>).detail.id);
-        window.addEventListener('plusui:display.disconnected', h);
-        return () => window.removeEventListener('plusui:display.disconnected', h);
-      },
-      onChanged(callback: (d: Display) => void): () => void {
-        if (typeof window === 'undefined') return () => { };
-        const h = (e: Event) => callback((e as CustomEvent<Display>).detail);
-        window.addEventListener('plusui:display.changed', h);
-        return () => window.removeEventListener('plusui:display.changed', h);
-      },
-    };
-
-    // ─── menu ─────────────────────────────────────────────────────────────────────
-    export type MenuItemType = 'normal' | 'separator' | 'submenu' | 'checkbox' | 'radio';
-    export interface MenuItem {
-      id: string; label: string; accelerator?: string; icon?: string;
-      type?: MenuItemType; enabled?: boolean; checked?: boolean;
-      submenu?: MenuItem[]; click?: (item: MenuItem) => void; data?: Record<string, unknown>;
-    }
-    export interface ContextMenuOptions { x?: number; y?: number; selector?: string; context?: Record<string, unknown>; }
-    export interface ContextInfo { x: number; y: number; clientX: number; clientY: number; selector: string; tagName: string; isEditable: boolean; hasSelection: boolean; selectedText?: string; }
-
-    const _menuClickHandlers = new Map<string, (item: MenuItem) => void>();
-
-    function _registerMenuClicks(items: MenuItem[]): void {
-      for (const item of items) {
-        if (item.click) _menuClickHandlers.set(item.id, item.click);
-        if (item.submenu) _registerMenuClicks(item.submenu);
-      }
-    }
-
-    function _stripMenuFunctions(items: MenuItem[]): unknown[] {
-      return items.map(({ click: _c, submenu, ...rest }) => ({
-        ...rest,
-        ...(submenu ? { submenu: _stripMenuFunctions(submenu) } : {}),
-      }));
-    }
-
-    export const menu = {
-      async create(items: MenuItem[]): Promise<string> {
-        _registerMenuClicks(items);
-        return invoke<string>('menu.create', [_stripMenuFunctions(items)]);
-      },
-      popup: async (menuId: string, x?: number, y?: number): Promise<void> => { await invoke('menu.popup', [menuId, x ?? 0, y ?? 0]); },
-      popupAtCursor: async (menuId: string): Promise<void> => { await invoke('menu.popupAtCursor', [menuId]); },
-      close: async (menuId: string): Promise<void> => { await invoke('menu.close', [menuId]); },
-      destroy: async (menuId: string): Promise<void> => { await invoke('menu.destroy', [menuId]); },
-      async setApplicationMenu(items: MenuItem[]): Promise<void> {
-        _registerMenuClicks(items);
-        await invoke('menu.setApplicationMenu', [_stripMenuFunctions(items)]);
-      },
-      getApplicationMenu: async (): Promise<MenuItem[]> => invoke<MenuItem[]>('menu.getApplicationMenu'),
-      async appendToMenuBar(item: MenuItem): Promise<void> {
-        _registerMenuClicks([item]);
-        await invoke('menu.appendToMenuBar', [_stripMenuFunctions([item])[0]]);
-      },
-      async showContextMenu(items: MenuItem[], options: ContextMenuOptions = {}): Promise<void> {
-        const menuId = await menu.create(items);
-        await menu.popup(menuId, options.x, options.y);
-      },
-      onItemClick(callback: (id: string) => void): () => void {
-        if (typeof window === 'undefined') return () => { };
-        const h = (e: Event) => callback((e as CustomEvent<{ id: string }>).detail.id);
-        window.addEventListener('plusui:menu.itemClick', h);
-        return () => window.removeEventListener('plusui:menu.itemClick', h);
-      },
-      onContextOpen(callback: (info: ContextInfo) => void): () => void {
-        if (typeof window === 'undefined') return () => { };
-        const h = (e: Event) => callback((e as CustomEvent<ContextInfo>).detail);
-        window.addEventListener('plusui:menu.contextOpen', h);
-        return () => window.removeEventListener('plusui:menu.contextOpen', h);
-      },
-      createEditMenu(handlers?: Partial<{ undo: () => void; redo: () => void; cut: () => void; copy: () => void; paste: () => void; selectAll: () => void; }>): MenuItem {
-        return {
-          id: 'edit', label: '&Edit', submenu: [
-            { id: 'undo', label: 'Undo', accelerator: 'Ctrl+Z', click: handlers?.undo },
-            { id: 'redo', label: 'Redo', accelerator: 'Ctrl+Y', click: handlers?.redo },
-            { id: 'sep1', label: '', type: 'separator' },
-            { id: 'cut', label: 'Cut', accelerator: 'Ctrl+X', click: handlers?.cut },
-            { id: 'copy', label: 'Copy', accelerator: 'Ctrl+C', click: handlers?.copy },
-            { id: 'paste', label: 'Paste', accelerator: 'Ctrl+V', click: handlers?.paste },
-            { id: 'sep2', label: '', type: 'separator' },
-            { id: 'selectAll', label: 'Select All', accelerator: 'Ctrl+A', click: handlers?.selectAll },
-          ]
-        };
-      },
-      createFileMenu(handlers?: Partial<{ new: () => void; open: () => void; save: () => void; saveAs: () => void; exit: () => void; }>): MenuItem {
-        return {
-          id: 'file', label: '&File', submenu: [
-            { id: 'new', label: 'New', accelerator: 'Ctrl+N', click: handlers?.new },
-            { id: 'open', label: 'Open...', accelerator: 'Ctrl+O', click: handlers?.open },
-            { id: 'sep1', label: '', type: 'separator' },
-            { id: 'save', label: 'Save', accelerator: 'Ctrl+S', click: handlers?.save },
-            { id: 'saveAs', label: 'Save As...', accelerator: 'Ctrl+Shift+S', click: handlers?.saveAs },
-            { id: 'sep2', label: '', type: 'separator' },
-            { id: 'exit', label: 'Exit', accelerator: 'Alt+F4', click: handlers?.exit },
-          ]
-        };
-      },
-      createViewMenu(handlers?: Partial<{ zoomIn: () => void; zoomOut: () => void; resetZoom: () => void; fullscreen: () => void; devtools: () => void; }>): MenuItem {
-        return {
-          id: 'view', label: '&View', submenu: [
-            { id: 'zoomIn', label: 'Zoom In', accelerator: 'Ctrl++', click: handlers?.zoomIn },
-            { id: 'zoomOut', label: 'Zoom Out', accelerator: 'Ctrl+-', click: handlers?.zoomOut },
-            { id: 'resetZoom', label: 'Reset Zoom', accelerator: 'Ctrl+0', click: handlers?.resetZoom },
-            { id: 'sep1', label: '', type: 'separator' },
-            { id: 'fullscreen', label: 'Toggle Fullscreen', accelerator: 'F11', click: handlers?.fullscreen },
-            { id: 'sep2', label: '', type: 'separator' },
-            { id: 'devtools', label: 'Developer Tools', accelerator: 'F12', click: handlers?.devtools },
-          ]
-        };
-      },
-      createTextContextMenu(): MenuItem[] { return [{ id: 'cut', label: 'Cut', accelerator: 'Ctrl+X' }, { id: 'copy', label: 'Copy', accelerator: 'Ctrl+C' }, { id: 'paste', label: 'Paste', accelerator: 'Ctrl+V' }, { id: 'sep1', label: '', type: 'separator' }, { id: 'selectAll', label: 'Select All', accelerator: 'Ctrl+A' }]; },
-      createImageContextMenu(): MenuItem[] { return [{ id: 'copyImage', label: 'Copy Image' }, { id: 'saveImage', label: 'Save Image As...' }, { id: 'sep1', label: '', type: 'separator' }, { id: 'openInNewTab', label: 'Open Image in New Tab' }]; },
-      createLinkContextMenu(): MenuItem[] { return [{ id: 'openLink', label: 'Open Link' }, { id: 'openInNewTab', label: 'Open in New Tab' }, { id: 'sep1', label: '', type: 'separator' }, { id: 'copyLink', label: 'Copy Link Address' }]; },
-      dispose() { _menuClickHandlers.clear(); },
-    };
-
-    // ─── gpu ──────────────────────────────────────────────────────────────────────
-    export interface GPUAdapter { requestDevice(descriptor?: GPUDeviceDescriptor): Promise<GPUDevice>; features: Set<string>; limits: Record<string, number>; info?: GPUAdapterInfo; }
-    export interface GPUAdapterInfo { vendor?: string; architecture?: string; device?: string; description?: string; }
-    export interface GPUDevice {
-      createBuffer(d: GPUBufferDescriptor): GPUBuffer;
-      createTexture(d: GPUTextureDescriptor): GPUTexture;
-      createSampler(d?: GPUSamplerDescriptor): GPUSampler;
-      createShaderModule(d: GPUShaderModuleDescriptor): GPUShaderModule;
-      createRenderPipeline(d: GPURenderPipelineDescriptor): GPURenderPipeline;
-      createComputePipeline(d: GPUComputePipelineDescriptor): GPUComputePipeline;
-      createBindGroupLayout(d: GPUBindGroupLayoutDescriptor): GPUBindGroupLayout;
-      createBindGroup(d: GPUBindGroupDescriptor): GPUBindGroup;
-      createCommandEncoder(d?: GPUCommandEncoderDescriptor): GPUCommandEncoder;
-      queue: GPUQueue; destroy(): void; lost?: Promise<GPUDeviceLostInfo>;
-    }
-    export interface GPUDeviceLostInfo { reason: 'unknown' | 'destroyed'; message?: string; }
-    export interface GPUBuffer { mapAsync(mode: number, offset?: number, size?: number): Promise<void>; getMappedRange(offset?: number, size?: number): ArrayBuffer; unmap(): void; destroy(): void; size: number; usage: number; mapState: 'unmapped' | 'pending' | 'mapped'; }
-    export interface GPUTexture { createView(d?: GPUTextureViewDescriptor): GPUTextureView; destroy(): void; width: number; height: number; depthOrArrayLayers: number; mipLevelCount: number; sampleCount: number; dimension: string; format: string; usage: number; }
-    export interface GPUTextureView { }
-    export interface GPUSampler { }
-    export interface GPUShaderModule { getCompilationInfo(): Promise<{ messages: Array<{ message: string; type: 'error' | 'warning' | 'info'; lineNum?: number; linePos?: number; }> }>; }
-    export interface GPURenderPipeline { getBindGroupLayout(index: number): GPUBindGroupLayout; }
-    export interface GPUComputePipeline { getBindGroupLayout(index: number): GPUBindGroupLayout; }
-    export interface GPUBindGroupLayout { }
-    export interface GPUBindGroup { }
-    export interface GPUQueue { submit(cbs: GPUCommandBuffer[]): void; writeBuffer(b: GPUBuffer, offset: number, data: ArrayBuffer | ArrayBufferView, dataOffset?: number, size?: number): void; onSubmittedWorkDone(): Promise<void>; }
-    export interface GPUCommandBuffer { }
-    export interface GPUCommandEncoder {
-      beginRenderPass(d: GPURenderPassDescriptor): GPURenderPassEncoder;
-      beginComputePass(d?: GPUComputePassDescriptor): GPUComputePassEncoder;
-      copyBufferToBuffer(src: GPUBuffer, srcOffset: number, dst: GPUBuffer, dstOffset: number, size: number): void;
-      finish(d?: { label?: string }): GPUCommandBuffer;
-    }
-    export interface GPURenderPassEncoder { setPipeline(p: GPURenderPipeline): void; setVertexBuffer(slot: number, b: GPUBuffer, offset?: number, size?: number): void; setIndexBuffer(b: GPUBuffer, fmt: string, offset?: number, size?: number): void; setBindGroup(index: number, bg: GPUBindGroup, offsets?: number[]): void; draw(vertexCount: number, instanceCount?: number, firstVertex?: number, firstInstance?: number): void; drawIndexed(indexCount: number, instanceCount?: number, firstIndex?: number, baseVertex?: number, firstInstance?: number): void; end(): void; }
-    export interface GPUComputePassEncoder { setPipeline(p: GPUComputePipeline): void; setBindGroup(index: number, bg: GPUBindGroup, offsets?: number[]): void; dispatchWorkgroups(x: number, y?: number, z?: number): void; end(): void; }
-    export interface GPUBufferDescriptor { size: number; usage: number; mappedAtCreation?: boolean; label?: string; }
-    export interface GPUTextureDescriptor { size: { width: number; height?: number; depthOrArrayLayers?: number }; mipLevelCount?: number; sampleCount?: number; dimension?: string; format: string; usage: number; label?: string; }
-    export interface GPUTextureViewDescriptor { format?: string; dimension?: string; baseMipLevel?: number; mipLevelCount?: number; baseArrayLayer?: number; arrayLayerCount?: number; label?: string; }
-    export interface GPUSamplerDescriptor { label?: string; addressModeU?: string; addressModeV?: string; magFilter?: string; minFilter?: string; }
-    export interface GPUShaderModuleDescriptor { code: string; label?: string; }
-    export interface GPURenderPipelineDescriptor { layout?: GPUPipelineLayout; vertex: { module: GPUShaderModule; entryPoint: string; buffers?: unknown[] }; primitive?: { topology?: string; cullMode?: string }; fragment?: { module: GPUShaderModule; entryPoint: string; targets: unknown[] }; label?: string; }
-    export interface GPUComputePipelineDescriptor { layout?: GPUPipelineLayout; compute: { module: GPUShaderModule; entryPoint: string }; label?: string; }
-    export interface GPUBindGroupLayoutDescriptor { entries: unknown[]; label?: string; }
-    export interface GPUBindGroupDescriptor { layout: GPUBindGroupLayout; entries: { binding: number; resource: unknown }[]; label?: string; }
-    export interface GPUCommandEncoderDescriptor { label?: string; }
-    export interface GPURenderPassDescriptor { colorAttachments: unknown[]; depthStencilAttachment?: unknown; label?: string; }
-    export interface GPUComputePassDescriptor { label?: string; }
-    export interface GPUPipelineLayout { }
-    export interface GPURequestAdapterOptions { powerPreference?: 'low-power' | 'high-performance'; forceFallbackAdapter?: boolean; }
-    export interface GPUDeviceDescriptor { requiredFeatures?: string[]; requiredLimits?: Record<string, number>; label?: string; }
-    export const GPUBufferUsage = { MAP_READ: 0x0001, MAP_WRITE: 0x0002, COPY_SRC: 0x0004, COPY_DST: 0x0008, INDEX: 0x0010, VERTEX: 0x0020, UNIFORM: 0x0040, STORAGE: 0x0080, INDIRECT: 0x0100, QUERY_RESOLVE: 0x0200 } as const;
-    export const GPUTextureUsage = { COPY_SRC: 0x0001, COPY_DST: 0x0002, TEXTURE_BINDING: 0x0004, STORAGE_BINDING: 0x0008, RENDER_ATTACHMENT: 0x0010 } as const;
-    export const GPUMapMode = { READ: 0x0001, WRITE: 0x0002 } as const;
-    export const GPUShaderStage = { VERTEX: 0x0001, FRAGMENT: 0x0002, COMPUTE: 0x0004 } as const;
-    export const GPUColorWrite = { RED: 0x1, GREEN: 0x2, BLUE: 0x4, ALPHA: 0x8, ALL: 0xF } as const;
-
-    export const gpu = {
-      async requestAdapter(options?: GPURequestAdapterOptions): Promise<GPUAdapter | null> {
-        const result = await invoke<any>('webgpu.requestAdapter', [options || {}]);
-        if (!result) return null;
-        return {
-          features: new Set<string>(result.features || []),
-          limits: result.limits || {},
-          info: result.info,
-          requestDevice: async (descriptor?: GPUDeviceDescriptor): Promise<GPUDevice> =>
-            invoke<any>('webgpu.requestDevice', [result.id, descriptor || {}]),
-        } as GPUAdapter;
-      },
-      getPreferredCanvasFormat(): string { return 'bgra8unorm'; },
-      onAdapterLost(callback: (info: GPUAdapterInfo) => void): () => void {
-        if (typeof window === 'undefined') return () => { };
-        const h = (e: Event) => callback((e as CustomEvent<GPUAdapterInfo>).detail);
-        window.addEventListener('plusui:webgpu.adapterLost', h);
-        return () => window.removeEventListener('plusui:webgpu.adapterLost', h);
-      },
-      onDeviceLost(callback: (info: GPUDeviceLostInfo) => void): () => void {
-        if (typeof window === 'undefined') return () => { };
-        const h = (e: Event) => callback((e as CustomEvent<GPUDeviceLostInfo>).detail);
-        window.addEventListener('plusui:webgpu.deviceLost', h);
-        return () => window.removeEventListener('plusui:webgpu.deviceLost', h);
-      },
-      onError(callback: (error: string) => void): () => void {
-        if (typeof window === 'undefined') return () => { };
-        const h = (e: Event) => callback((e as CustomEvent<{ error: string }>).detail.error);
-        window.addEventListener('plusui:webgpu.error', h);
-        return () => window.removeEventListener('plusui:webgpu.error', h);
-      },
-    };
-
-    // ─── Helpers ──────────────────────────────────────────────────────────────────
-    export function formatFileSize(bytes: number): string {
-      if (bytes === 0) return '0 Bytes';
-      const k = 1024;
-      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-      const i = Math.floor(Math.log(bytes) / Math.log(k));
-      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-    }
-
-    export function isImageFile(file: FileInfo): boolean { return file.type.startsWith('image/'); }
-
-    // ─── Top-level on / emit ─────────────────────────────────────────────────────
-    //
-    //   import plusui from 'plusui';
-    //
-    //   plusui.emit('myEvent', { value: 42 });   // TS → C++
-    //   plusui.on('myEvent', (data) => { ... }); // C++ → TS
-    //
-    //   plusui.win.minimize();
-    //   plusui.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 = {
-      feature: createFeatureConnect,
-      connection: _client,
-      win,
-      browser,
-      router,
-      app,
-      clipboard,
-      fileDrop,
-      keyboard,
-      KeyCode,
-      KeyMod,
-      tray,
-      display,
-      menu,
-      gpu,
-      GPUBufferUsage,
-      GPUTextureUsage,
-      GPUMapMode,
-      GPUShaderStage,
-      GPUColorWrite,
-      formatFileSize,
-      isImageFile,
-      on,
-      emit,
-    };
-
-    export default plusui;