plusui-native 0.2.59 → 0.2.62

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

@@ -1,3 +1,22 @@
+// ============================================================
+// PlusUI — single import entrypoint
+//
+//   import plusui from 'plusui';
+//
+//   plusui.win.minimize();
+//   plusui.fileDrop.onFilesDropped(...);
+//   plusui.formatFileSize(bytes);
+//
+// For TypeScript types only:
+//   import type { FileInfo } from 'plusui';
+//
+// After running `plusui connect`, custom channel objects are
+// exported from Connections/connections.gen.ts:
+//   import { myChannel } from '../Connections/connections.gen';
+// ============================================================
+
+// ─── Bridge bootstrap ────────────────────────────────────────────────────────
+
 type InvokeFn = (method: string, args?: unknown[]) => Promise<unknown>;
 type PendingMap = Record<string, { resolve: (value: unknown) => void; reject: (reason?: unknown) => void }>;
 
@@ -25,16 +44,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 +63,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 +72,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 +366,36 @@ 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 ─────────────────────────────────────────────────────
+//
+//   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 = {
+  /** Create a named custom scope: const search = feature('search'); search.on/emit(...) */
+  feature: createFeatureConnect,
+  connection,
+  win,
+  browser,
+  router,
+  app,
+  clipboard,
+  fileDrop,
+  formatFileSize,
+  isImageFile,
+  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 plusui, { 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 = {
@@ -23,32 +25,32 @@ function App() {
 
   onMount(() => {
     // Setup routes
-    router.setRoutes(routes);
+    plusui.router.setRoutes(routes);
     
     // Listen for navigation changes
-    browser.onNavigate((url) => {
+    plusui.browser.onNavigate((url) => {
       setCurrentUrl(url);
-      browser.canGoBack().then(setCanGoBack);
-      browser.canGoForward().then(setCanGoForward);
+      plusui.browser.canGoBack().then(setCanGoBack);
+      plusui.browser.canGoForward().then(setCanGoForward);
     });
     
     // Get initial state
-    browser.getUrl().then(setCurrentUrl);
-    browser.canGoBack().then(setCanGoBack);
-    browser.canGoForward().then(setCanGoForward);
+    plusui.browser.getUrl().then(setCurrentUrl);
+    plusui.browser.canGoBack().then(setCanGoBack);
+    plusui.browser.canGoForward().then(setCanGoForward);
     
     // Setup FileDrop listeners
-    const unsubDrop = fileDrop.onFilesDropped((droppedFiles) => {
+    const unsubDrop = plusui.fileDrop.onFilesDropped((droppedFiles) => {
       console.log('Files dropped:', droppedFiles);
       setFiles(prev => [...prev, ...droppedFiles]);
       setIsDragging(false);
     });
     
-    const unsubEnter = fileDrop.onDragEnter(() => {
+    const unsubEnter = plusui.fileDrop.onDragEnter(() => {
       setIsDragging(true);
     });
     
-    const unsubLeave = fileDrop.onDragLeave(() => {
+    const unsubLeave = plusui.fileDrop.onDragLeave(() => {
       setIsDragging(false);
     });
     
@@ -59,29 +61,29 @@ function App() {
     });
   });
 
-  const handleMinimize = async () => await win.minimize();
-  const handleMaximize = async () => await win.maximize();
-  const handleClose = async () => await win.close();
+  const handleMinimize = async () => await plusui.win.minimize();
+  const handleMaximize = async () => await plusui.win.maximize();
+  const handleClose = async () => await plusui.win.close();
   const handleGetSize = async () => {
-    const size = await win.getSize();
+    const size = await plusui.win.getSize();
     setWindowSize(size);
   };
   const handleGetPosition = async () => {
-    const pos = await win.getPosition();
+    const pos = await plusui.win.getPosition();
     setWindowPos(pos);
   };
 
   // Browser navigation
-  const handleGoBack = async () => await browser.goBack();
-  const handleGoForward = async () => await browser.goForward();
-  const handleReload = async () => await browser.reload();
+  const handleGoBack = async () => await plusui.browser.goBack();
+  const handleGoForward = async () => await plusui.browser.goForward();
+  const handleReload = async () => await plusui.browser.reload();
 
   // Router navigation
-  const handleGoHome = async () => await router.push('/');
-  const handleGoSettings = async () => await router.push('/settings');
+  const handleGoHome = async () => await plusui.router.push('/');
+  const handleGoSettings = async () => await plusui.router.push('/settings');
 
   // App control
-  const handleQuit = async () => await app.quit();
+  const handleQuit = async () => await plusui.app.quit();
 
   return (
     <div class="app">
@@ -112,8 +114,8 @@ function App() {
           <h2>Window Position</h2>
           <div class="button-group">
             <button onClick={handleGetPosition} class="button">Get Position</button>
-            <button onClick={() => win.setPosition(100, 100)} class="button">Move Left</button>
-            <button onClick={() => win.setPosition(800, 100)} class="button">Move Right</button>
+            <button onClick={() => plusui.win.setPosition(100, 100)} class="button">Move Left</button>
+            <button onClick={() => plusui.win.setPosition(800, 100)} class="button">Move Right</button>
           </div>
           <Show when={windowPos().x !== 0}>
             <p class="info-text">Position: {windowPos().x}, {windowPos().y}</p>
@@ -137,7 +139,7 @@ function App() {
             <button onClick={handleGoSettings} class="button">Settings</button>
           </div>
           <p style={{ 'font-size': '0.85em', color: '#666', 'margin-top': '10px' }}>
-            Define routes with <code>router.setRoutes({'{ ... }'})</code> then navigate with <code>router.push('/path')</code>
+            Define routes with <code>plusui.router.setRoutes({'{ ... }'})</code> then navigate with <code>plusui.router.push('/path')</code>
           </p>
         </div>
 
@@ -196,7 +198,7 @@ function App() {
                     <div class="filedrop-file-info">
                       <div class="filedrop-file-name">{file.name}</div>
                       <div class="filedrop-file-meta">
-                        {formatFileSize(file.size)} • {file.type}
+                        {plusui.formatFileSize(file.size)} • {file.type}
                       </div>
                     </div>
                     <button