electrobun 0.4.1 → 0.6.0-beta.0

package/templates/interactive-playground/src/bun/types/rpc.ts

@@ -1,109 +0,0 @@
-import { type RPCSchema } from "electrobun";
-
-export type PlaygroundRPC = {
-  bun: RPCSchema<{
-    requests: {
-      // Window Management
-      createWindow: {
-        params: {
-          width: number;
-          height: number;
-          x: number;
-          y: number;
-          frameless?: boolean;
-          transparent?: boolean;
-          alwaysOnTop?: boolean;
-        };
-        response: { id: number };
-      };
-      closeWindow: {
-        params: number; // window id
-        response: void;
-      };
-      focusWindow: {
-        params: number; // window id
-        response: void;
-      };
-      getWindowList: {
-        params: void;
-        response: Array<{ id: number; title: string }>;
-      };
-      
-      // RPC Testing
-      doMath: {
-        params: { a: number; b: number; operation: string };
-        response: number;
-      };
-      echoBigData: {
-        params: string;
-        response: string;
-      };
-      
-      // Menu Operations
-      createTray: {
-        params: { title: string; image?: string };
-        response: { id: number };
-      };
-      removeTray: {
-        params: number; // tray id
-        response: void;
-      };
-      showContextMenu: {
-        params: { x: number; y: number };
-        response: void;
-      };
-      
-      // File Operations
-      openFileDialog: {
-        params: {
-          multiple?: boolean;
-          fileTypes?: string[];
-          startingFolder?: string;
-        };
-        response: string[];
-      };
-      moveToTrash: {
-        params: string; // file path
-        response: void;
-      };
-      showInFinder: {
-        params: string; // file path
-        response: void;
-      };
-      
-      // WebView Operations
-      createWebView: {
-        params: string; // url
-        response: { id: number };
-      };
-      executeJSInWebView: {
-        params: { id: number; script: string };
-        response: any;
-      };
-      
-      
-    };
-    messages: {};
-  }>;
-  
-  webview: RPCSchema<{
-    requests: {};
-    messages: {
-      // Messages from bun to webview
-      windowCreated: { id: number; title: string };
-      windowClosed: { id: number };
-      windowFocused: { id: number };
-      
-      trayClicked: { id: number; action: string };
-      menuClicked: { action: string };
-      
-      fileSelected: { paths: string[] };
-      
-      rpcTestResult: { operation: string; result: any; duration: number };
-      
-      systemEvent: { type: string; details: any };
-      
-      logMessage: { level: 'info' | 'warn' | 'error'; message: string };
-    };
-  }>;
-};

package/templates/interactive-playground/src/mainview/components/EventLog.ts

@@ -1,107 +0,0 @@
-interface LogEntry {
-  timestamp: Date;
-  level: 'info' | 'warn' | 'error';
-  message: string;
-  data?: any;
-}
-
-export class EventLog {
-  private entries: LogEntry[] = [];
-  private isOpen: boolean = false;
-  private filters: Set<string> = new Set(['info', 'warn', 'error']);
-
-  constructor() {
-    this.initializeEventListeners();
-  }
-
-  private initializeEventListeners() {
-    const toggle = document.getElementById('event-log-toggle');
-    const clearBtn = document.getElementById('clear-log');
-    const filterCheckboxes = document.querySelectorAll('.event-log-filters input[type="checkbox"]');
-
-    toggle?.addEventListener('click', () => {
-      this.toggle();
-    });
-
-    clearBtn?.addEventListener('click', () => {
-      this.clear();
-    });
-
-    filterCheckboxes.forEach(checkbox => {
-      checkbox.addEventListener('change', (e) => {
-        const target = e.target as HTMLInputElement;
-        const level = target.getAttribute('data-level');
-        if (level) {
-          if (target.checked) {
-            this.filters.add(level);
-          } else {
-            this.filters.delete(level);
-          }
-          this.render();
-        }
-      });
-    });
-  }
-
-  toggle() {
-    this.isOpen = !this.isOpen;
-    const eventLog = document.getElementById('event-log');
-    eventLog?.classList.toggle('open', this.isOpen);
-  }
-
-  addEntry(level: 'info' | 'warn' | 'error', message: string, data?: any) {
-    const entry: LogEntry = {
-      timestamp: new Date(),
-      level,
-      message,
-      data
-    };
-
-    this.entries.unshift(entry); // Add to beginning
-
-    // Keep only last 100 entries
-    if (this.entries.length > 100) {
-      this.entries = this.entries.slice(0, 100);
-    }
-
-    this.render();
-  }
-
-  clear() {
-    this.entries = [];
-    this.render();
-  }
-
-  private render() {
-    const container = document.getElementById('event-log-list');
-    if (!container) return;
-
-    const filteredEntries = this.entries.filter(entry => this.filters.has(entry.level));
-
-    container.innerHTML = filteredEntries.map(entry => `
-      <div class="event-entry ${entry.level}">
-        <div class="event-time">${this.formatTime(entry.timestamp)}</div>
-        <div class="event-message">${this.escapeHtml(entry.message)}</div>
-        ${entry.data ? `<pre class="event-data">${this.escapeHtml(JSON.stringify(entry.data, null, 2))}</pre>` : ''}
-      </div>
-    `).join('');
-
-    // Auto-scroll to top for new entries
-    container.scrollTop = 0;
-  }
-
-  private formatTime(date: Date): string {
-    return date.toLocaleTimeString('en-US', { 
-      hour12: false,
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit'
-    });
-  }
-
-  private escapeHtml(text: string): string {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-  }
-}

package/templates/interactive-playground/src/mainview/components/Sidebar.ts

@@ -1,65 +0,0 @@
-export class Sidebar {
-  private currentDemo: string = 'windows';
-  private onDemoChange?: (demo: string) => void;
-
-  constructor() {
-    this.initializeEventListeners();
-  }
-
-  private initializeEventListeners() {
-    const navItems = document.querySelectorAll('.nav-item');
-    
-    navItems.forEach(item => {
-      item.addEventListener('click', () => {
-        const demo = item.getAttribute('data-demo');
-        if (demo && demo !== this.currentDemo) {
-          this.setActiveDemo(demo);
-        }
-      });
-    });
-
-    // Search functionality
-    const searchInput = document.getElementById('search') as HTMLInputElement;
-    searchInput?.addEventListener('input', (e) => {
-      this.filterDemos((e.target as HTMLInputElement).value);
-    });
-  }
-
-  setActiveDemo(demo: string) {
-    // Remove active class from all items
-    document.querySelectorAll('.nav-item').forEach(item => {
-      item.classList.remove('active');
-    });
-
-    // Add active class to selected item
-    const selectedItem = document.querySelector(`[data-demo="${demo}"]`);
-    selectedItem?.classList.add('active');
-
-    this.currentDemo = demo;
-    this.onDemoChange?.(demo);
-  }
-
-  private filterDemos(query: string) {
-    const lowerQuery = query.toLowerCase();
-    const navItems = document.querySelectorAll('.nav-item');
-
-    navItems.forEach(item => {
-      const label = item.querySelector('.nav-label')?.textContent?.toLowerCase() || '';
-      const demo = item.getAttribute('data-demo')?.toLowerCase() || '';
-      
-      if (label.includes(lowerQuery) || demo.includes(lowerQuery)) {
-        (item as HTMLElement).style.display = 'flex';
-      } else {
-        (item as HTMLElement).style.display = 'none';
-      }
-    });
-  }
-
-  onDemoChangeCallback(callback: (demo: string) => void) {
-    this.onDemoChange = callback;
-  }
-
-  getCurrentDemo() {
-    return this.currentDemo;
-  }
-}

package/templates/interactive-playground/src/mainview/components/Toast.ts

@@ -1,57 +0,0 @@
-export type ToastType = 'info' | 'success' | 'warning' | 'error';
-
-export class Toast {
-  static show(message: string, type: ToastType = 'info', duration: number = 3000) {
-    const container = document.getElementById('toast-container');
-    if (!container) return;
-
-    const toast = document.createElement('div');
-    toast.className = `toast ${type}`;
-    toast.innerHTML = `
-      <div class="toast-content">
-        <div class="toast-message">${this.escapeHtml(message)}</div>
-      </div>
-    `;
-
-    container.appendChild(toast);
-
-    // Auto-remove after duration
-    setTimeout(() => {
-      this.remove(toast);
-    }, duration);
-
-    // Allow manual dismissal
-    toast.addEventListener('click', () => {
-      this.remove(toast);
-    });
-  }
-
-  private static remove(toast: HTMLElement) {
-    toast.style.animation = 'slideOut 0.3s ease forwards';
-    setTimeout(() => {
-      toast.remove();
-    }, 300);
-  }
-
-  private static escapeHtml(text: string): string {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-  }
-
-  static success(message: string, duration?: number) {
-    this.show(message, 'success', duration);
-  }
-
-  static error(message: string, duration?: number) {
-    this.show(message, 'error', duration);
-  }
-
-  static warning(message: string, duration?: number) {
-    this.show(message, 'warning', duration);
-  }
-
-  static info(message: string, duration?: number) {
-    this.show(message, 'info', duration);
-  }
-}

package/templates/interactive-playground/src/mainview/demos/FileDemo.ts

@@ -1,211 +0,0 @@
-export class FileDemo {
-  private selectedFiles: string[] = [];
-
-  render() {
-    return `
-      <div class="demo-section">
-        <div class="demo-header">
-          <span class="demo-icon">🗂️</span>
-          <div>
-            <h2 class="demo-title">File Operations</h2>
-            <p class="demo-description">Test file dialogs, file system operations, and drag & drop functionality</p>
-          </div>
-        </div>
-
-        <div class="demo-controls">
-          <h3>File Dialog</h3>
-          <div class="control-group">
-            <label class="control-checkbox">
-              <input type="checkbox" id="file-multiple"> Allow multiple selection
-            </label>
-            
-            <label class="control-label">File Types:</label>
-            <select id="file-types" class="control-input" style="width: 150px;">
-              <option value="">All Files (*)</option>
-              <option value="txt,md">Text Files</option>
-              <option value="png,jpg,jpeg,gif">Images</option>
-              <option value="pdf">PDF Files</option>
-              <option value="json,js,ts">Code Files</option>
-            </select>
-            
-            <button class="btn btn-primary" id="open-file-dialog">Open File Dialog</button>
-          </div>
-
-          <h3>File Operations</h3>
-          <div class="control-group">
-            <button class="btn btn-secondary" id="move-to-trash" disabled>Move Selected to Trash</button>
-            <button class="btn btn-secondary" id="show-in-finder" disabled>Show in Finder</button>
-          </div>
-
-          <h3>Drag & Drop Test</h3>
-          <div class="drop-zone" id="drop-zone" style="border: 2px dashed #cbd5e0; border-radius: 0.5rem; padding: 2rem; text-align: center; color: #718096; margin: 1rem 0; background: #f7fafc;">
-            <div>📁 Drag and drop files here</div>
-            <div style="font-size: 0.875rem; margin-top: 0.5rem;">Or click "Open File Dialog" above</div>
-          </div>
-        </div>
-
-        <div class="demo-results">
-          <div class="results-header">Selected Files (<span id="file-count">0</span>):</div>
-          <div id="file-list" class="file-list">
-            <div class="no-files" style="text-align: center; color: #718096; padding: 2rem;">
-              No files selected yet.
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  initialize(rpc: any) {
-    const openDialogBtn = document.getElementById('open-file-dialog');
-    const moveToTrashBtn = document.getElementById('move-to-trash');
-    const showInFinderBtn = document.getElementById('show-in-finder');
-    const dropZone = document.getElementById('drop-zone');
-
-    openDialogBtn?.addEventListener('click', async () => {
-      const multiple = (document.getElementById('file-multiple') as HTMLInputElement).checked;
-      const fileTypes = (document.getElementById('file-types') as HTMLSelectElement).value;
-      
-      try {
-        const files = await rpc.request.openFileDialog({
-          multiple,
-          fileTypes: fileTypes ? fileTypes.split(',') : undefined
-        });
-        
-        this.selectedFiles = files;
-        this.updateFileList();
-      } catch (error) {
-        console.error('Error opening file dialog:', error);
-      }
-    });
-
-    moveToTrashBtn?.addEventListener('click', async () => {
-      if (this.selectedFiles.length === 0) return;
-      
-      const confirmed = confirm(`Are you sure you want to move ${this.selectedFiles.length} file(s) to trash?`);
-      if (!confirmed) return;
-
-      for (const file of this.selectedFiles) {
-        try {
-          await rpc.request.moveToTrash(file);
-        } catch (error) {
-          console.error(`Error moving ${file} to trash:`, error);
-        }
-      }
-      
-      this.selectedFiles = [];
-      this.updateFileList();
-    });
-
-    showInFinderBtn?.addEventListener('click', async () => {
-      if (this.selectedFiles.length === 0) return;
-      
-      // Show the first selected file in finder
-      try {
-        await rpc.request.showInFinder(this.selectedFiles[0]);
-      } catch (error) {
-        console.error('Error showing in finder:', error);
-      }
-    });
-
-    // Set up drag and drop
-    if (dropZone) {
-      this.setupDragAndDrop(dropZone);
-    }
-  }
-
-  private setupDragAndDrop(dropZone: HTMLElement) {
-    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-      dropZone.addEventListener(eventName, (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      });
-    });
-
-    ['dragenter', 'dragover'].forEach(eventName => {
-      dropZone.addEventListener(eventName, () => {
-        dropZone.style.background = '#ebf8ff';
-        dropZone.style.borderColor = '#4299e1';
-      });
-    });
-
-    ['dragleave', 'drop'].forEach(eventName => {
-      dropZone.addEventListener(eventName, () => {
-        dropZone.style.background = '#f7fafc';
-        dropZone.style.borderColor = '#cbd5e0';
-      });
-    });
-
-    dropZone.addEventListener('drop', (e) => {
-      const dt = e.dataTransfer;
-      if (!dt) return;
-
-      const files = Array.from(dt.files).map(file => file.path || file.name);
-      this.selectedFiles = files;
-      this.updateFileList();
-    });
-  }
-
-  private updateFileList() {
-    const container = document.getElementById('file-list');
-    const count = document.getElementById('file-count');
-    const moveToTrashBtn = document.getElementById('move-to-trash');
-    const showInFinderBtn = document.getElementById('show-in-finder');
-    
-    if (!container || !count) return;
-
-    count.textContent = this.selectedFiles.length.toString();
-
-    // Enable/disable action buttons
-    const hasFiles = this.selectedFiles.length > 0;
-    moveToTrashBtn?.toggleAttribute('disabled', !hasFiles);
-    showInFinderBtn?.toggleAttribute('disabled', !hasFiles);
-
-    if (this.selectedFiles.length === 0) {
-      container.innerHTML = `
-        <div class="no-files" style="text-align: center; color: #718096; padding: 2rem;">
-          No files selected yet.
-        </div>
-      `;
-      return;
-    }
-
-    container.innerHTML = this.selectedFiles.map((file, index) => `
-      <div class="file-item" style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1rem; margin-bottom: 0.5rem;">
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <div style="flex: 1; min-width: 0;">
-            <div style="font-weight: 500; color: #2d3748; margin-bottom: 0.25rem;">
-              ${this.getFileName(file)}
-            </div>
-            <div style="color: #718096; font-size: 0.875rem; word-break: break-all;">
-              ${file}
-            </div>
-          </div>
-          <div style="margin-left: 1rem;">
-            <button class="btn btn-small btn-secondary remove-file" data-index="${index}">Remove</button>
-          </div>
-        </div>
-      </div>
-    `).join('');
-
-    // Add remove button listeners
-    const removeButtons = document.querySelectorAll('.remove-file');
-    removeButtons.forEach(btn => {
-      btn.addEventListener('click', (e) => {
-        const index = parseInt((e.target as HTMLElement).getAttribute('data-index') || '0');
-        this.selectedFiles.splice(index, 1);
-        this.updateFileList();
-      });
-    });
-  }
-
-  private getFileName(path: string): string {
-    return path.split('/').pop() || path.split('\\').pop() || path;
-  }
-
-  // Handle events from the backend
-  onFileSelected(data: { paths: string[] }) {
-    this.selectedFiles = data.paths;
-    this.updateFileList();
-  }
-}

package/templates/interactive-playground/src/mainview/demos/MenuDemo.ts

@@ -1,102 +0,0 @@
-export class MenuDemo {
-  private rpc: any;
-
-  render() {
-    return `
-      <div class="demo-section">
-        <div class="demo-header">
-          <span class="demo-icon">🎛️</span>
-          <div>
-            <h2 class="demo-title">Menu Systems</h2>
-            <p class="demo-description">Test application menus and context menus</p>
-          </div>
-        </div>
-
-        <div class="demo-controls">
-          <h3>Application Menu</h3>
-          <div class="control-group">
-            <div style="padding: 1rem; background: #f7fafc; border-radius: 0.5rem;">
-              <p style="color: #4a5568; margin-bottom: 0.5rem;">
-                The application menu is automatically set up. Look at the menu bar at the top of your screen.
-              </p>
-              <p style="color: #718096; font-size: 0.875rem;">
-                Try: Edit → Custom Menu Item 🚀
-              </p>
-            </div>
-          </div>
-
-          <h3>Context Menu</h3>
-          <div class="control-group">
-            <button class="btn btn-primary" id="show-context-menu">Show Context Menu</button>
-            <span style="color: #718096; font-size: 0.875rem;">Click to show a context menu at cursor position</span>
-          </div>
-
-          <div class="control-group">
-            <div style="padding: 1rem; background: #ebf8ff; border: 1px solid #90cdf4; border-radius: 0.5rem;">
-              <p style="color: #2b6cb0; font-size: 0.875rem;">
-                <strong>Tip:</strong> You can also trigger context menus from your app by right-clicking in your UI and preventing the default action.
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div class="demo-results">
-          <div class="results-header">Menu Events:</div>
-          <div id="menu-events" class="menu-events">
-            <div class="no-events" style="text-align: center; color: #718096; padding: 2rem;">
-              Click menu items to see events here
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  initialize(rpc: any) {
-    this.rpc = rpc;
-    const showContextBtn = document.getElementById('show-context-menu');
-
-    showContextBtn?.addEventListener('click', async () => {
-      try {
-        // Show context menu at a default position
-        await rpc.request.showContextMenu({ x: 100, y: 100 });
-        this.addMenuEvent('Context menu shown');
-      } catch (error) {
-        console.error('Error showing context menu:', error);
-      }
-    });
-  }
-
-  private addMenuEvent(event: string) {
-    const container = document.getElementById('menu-events');
-    if (!container) return;
-
-    const time = new Date().toLocaleTimeString();
-    const eventHtml = `
-      <div style="background: #f8fafc; border-left: 3px solid #4299e1; padding: 0.75rem; margin-bottom: 0.5rem; border-radius: 0 0.25rem 0.25rem 0;">
-        <div style="color: #718096; font-size: 0.75rem;">${time}</div>
-        <div style="color: #2d3748;">${event}</div>
-      </div>
-    `;
-
-    // Remove "no events" message if it exists
-    const noEvents = container.querySelector('.no-events');
-    if (noEvents) {
-      container.innerHTML = '';
-    }
-
-    // Add new event at the top
-    container.insertAdjacentHTML('afterbegin', eventHtml);
-
-    // Keep only last 10 events
-    const events = container.children;
-    while (events.length > 10) {
-      container.removeChild(events[events.length - 1]);
-    }
-  }
-
-  // Handle events from the backend
-  onMenuClicked(data: { action: string }) {
-    this.addMenuEvent(`Menu clicked: ${data.action}`);
-  }
-}