plusui-native 0.2.66 → 0.2.68

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

@@ -1,21 +1,3 @@
-// ============================================================
-// 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 }>;
@@ -256,32 +238,32 @@ export const connect = {
   feature: createFeatureConnect,
 };
 
-/** Advanced: raw connection client — call / stream / channel */
-export const connection = _client;
+/** 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]),
+  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),
+  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),
 };
 
@@ -289,20 +271,20 @@ export const win = {
 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>,
+  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 () => {};
+    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),
+  on: _browserEvents.on.bind(_browserEvents),
   emit: _browserEvents.emit.bind(_browserEvents),
 };
 
@@ -316,8 +298,8 @@ export const router = {
 const _appEvents = createFeatureConnect('app');
 
 export const app = {
-  quit:  async () => invoke('app.quit', []),
-  on:   _appEvents.on.bind(_appEvents),
+  quit: async () => invoke('app.quit', []),
+  on: _appEvents.on.bind(_appEvents),
   emit: _appEvents.emit.bind(_appEvents),
 };
 
@@ -325,11 +307,11 @@ export const app = {
 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),
+  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),
 };
 
@@ -338,64 +320,518 @@ export interface FileInfo { path: string; name: string; type: string; size: numb
 
 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 () => {};
+    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 () => {};
+    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);
-  },
-};
+    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),
+    };
 
-// ─── 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];
-}
+    // ─── 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),
+    };
 
-export function isImageFile(file: FileInfo): boolean { return file.type.startsWith('image/'); }
+    // ─── router ───────────────────────────────────────────────────────────────────
+    export const router = {
+      setRoutes: (routes: RouteMap) => { _routes = routes; },
+      push: async (path: string) => invoke('browser.navigate', [_routes[path] ?? path]),
+    };
 
-// ─── 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;
+    // ─── app ──────────────────────────────────────────────────────────────────────
+    const _appEvents = createFeatureConnect('app');
 
-// ─── 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 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;
+    export default plusui;