electrobun 0.0.19-beta.99 → 0.1.0

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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,211 @@
+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

@@ -0,0 +1,102 @@
+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}`);
+  }
+}

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

@@ -0,0 +1,229 @@
+export class RPCDemo {
+  private testResults: Array<{ operation: string; result: any; duration: number }> = [];
+
+  render() {
+    return `
+      <div class="demo-section">
+        <div class="demo-header">
+          <span class="demo-icon">📡</span>
+          <div>
+            <h2 class="demo-title">RPC Communication</h2>
+            <p class="demo-description">Test bidirectional communication between the webview and bun process</p>
+          </div>
+        </div>
+
+        <div class="demo-controls">
+          <h3>Math Operations</h3>
+          <div class="control-group">
+            <label class="control-label">A:</label>
+            <input type="number" id="math-a" class="control-input" value="10">
+            
+            <label class="control-label">B:</label>
+            <input type="number" id="math-b" class="control-input" value="5">
+            
+            <label class="control-label">Operation:</label>
+            <select id="math-operation" class="control-input" style="width: 120px;">
+              <option value="add">Add (+)</option>
+              <option value="subtract">Subtract (-)</option>
+              <option value="multiply">Multiply (×)</option>
+              <option value="divide">Divide (÷)</option>
+              <option value="power">Power (^)</option>
+            </select>
+            
+            <button class="btn btn-primary" id="do-math">Calculate</button>
+          </div>
+
+          <h3>Data Transfer Test</h3>
+          <div class="control-group">
+            <label class="control-label">Data Size:</label>
+            <select id="data-size" class="control-input" style="width: 150px;">
+              <option value="1024">1 KB</option>
+              <option value="10240">10 KB</option>
+              <option value="102400">100 KB</option>
+              <option value="1048576">1 MB</option>
+              <option value="2097152">2 MB</option>
+            </select>
+            
+            <button class="btn btn-primary" id="test-big-data">Test Echo</button>
+          </div>
+
+          <h3>Performance Test</h3>
+          <div class="control-group">
+            <label class="control-label">Message Size:</label>
+            <select id="perf-size" class="control-input" style="width: 120px;">
+              <option value="100">100 B</option>
+              <option value="1024">1 KB</option>
+              <option value="10240">10 KB</option>
+            </select>
+            
+            <label class="control-label">Count:</label>
+            <input type="number" id="perf-count" class="control-input" value="10" min="1" max="100">
+            
+            <button class="btn btn-primary" id="run-performance-test">Run Test</button>
+          </div>
+        </div>
+
+        <div class="demo-results">
+          <div class="results-header">Test Results:</div>
+          <div id="rpc-results" class="rpc-results">
+            <div class="no-results" style="text-align: center; color: #718096; padding: 2rem;">
+              No tests run yet. Use the controls above to start testing RPC communication.
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  initialize(rpc: any) {
+    const mathBtn = document.getElementById('do-math');
+    const bigDataBtn = document.getElementById('test-big-data');
+    const perfTestBtn = document.getElementById('run-performance-test');
+
+    mathBtn?.addEventListener('click', async () => {
+      const a = parseFloat((document.getElementById('math-a') as HTMLInputElement).value);
+      const b = parseFloat((document.getElementById('math-b') as HTMLInputElement).value);
+      const operation = (document.getElementById('math-operation') as HTMLSelectElement).value;
+
+      try {
+        const startTime = Date.now();
+        const result = await rpc.request.doMath({ a, b, operation });
+        const duration = Date.now() - startTime;
+        
+        this.addTestResult({
+          operation: `${a} ${operation} ${b}`,
+          result,
+          duration
+        });
+      } catch (error) {
+        this.addTestResult({
+          operation: `${a} ${operation} ${b}`,
+          result: `Error: ${error.message}`,
+          duration: 0
+        });
+      }
+    });
+
+    bigDataBtn?.addEventListener('click', async () => {
+      const size = parseInt((document.getElementById('data-size') as HTMLSelectElement).value);
+      const testData = 'x'.repeat(size);
+
+      try {
+        const startTime = Date.now();
+        const result = await rpc.request.echoBigData(testData);
+        const duration = Date.now() - startTime;
+        
+        this.addTestResult({
+          operation: `Echo ${this.formatBytes(size)}`,
+          result: `Received ${this.formatBytes(result.length)}`,
+          duration
+        });
+      } catch (error) {
+        this.addTestResult({
+          operation: `Echo ${this.formatBytes(size)}`,
+          result: `Error: ${error.message}`,
+          duration: 0
+        });
+      }
+    });
+
+    perfTestBtn?.addEventListener('click', async () => {
+      const size = parseInt((document.getElementById('perf-size') as HTMLSelectElement).value);
+      const count = parseInt((document.getElementById('perf-count') as HTMLInputElement).value);
+      
+      perfTestBtn.textContent = 'Running...';
+      perfTestBtn.setAttribute('disabled', 'true');
+
+      try {
+        const results = await this.runPerformanceTest(rpc, size, count);
+        this.addTestResult({
+          operation: `Performance: ${count} × ${this.formatBytes(size)}`,
+          result: `${results.messagesPerSecond.toFixed(1)} msg/sec, avg: ${results.averageTime.toFixed(1)}ms`,
+          duration: results.totalTime
+        });
+      } catch (error) {
+        this.addTestResult({
+          operation: `Performance: ${count} × ${this.formatBytes(size)}`,
+          result: `Error: ${error.message}`,
+          duration: 0
+        });
+      } finally {
+        perfTestBtn.textContent = 'Run Test';
+        perfTestBtn.removeAttribute('disabled');
+      }
+    });
+  }
+
+  private async runPerformanceTest(rpc: any, messageSize: number, messageCount: number) {
+    const testData = 'x'.repeat(messageSize);
+    const results: number[] = [];
+    const startTime = Date.now();
+
+    for (let i = 0; i < messageCount; i++) {
+      const messageStart = Date.now();
+      await rpc.request.echoBigData(testData);
+      results.push(Date.now() - messageStart);
+      
+      // Update progress
+      const progress = ((i + 1) / messageCount) * 100;
+      const perfTestBtn = document.getElementById('run-performance-test');
+      if (perfTestBtn) {
+        perfTestBtn.textContent = `Running... ${progress.toFixed(0)}%`;
+      }
+    }
+
+    const totalTime = Date.now() - startTime;
+    const averageTime = results.reduce((a, b) => a + b, 0) / results.length;
+    const messagesPerSecond = (messageCount / totalTime) * 1000;
+
+    return { totalTime, averageTime, messagesPerSecond };
+  }
+
+  private addTestResult(result: { operation: string; result: any; duration: number }) {
+    this.testResults.unshift(result);
+    
+    // Keep only last 20 results
+    if (this.testResults.length > 20) {
+      this.testResults = this.testResults.slice(0, 20);
+    }
+
+    this.renderResults();
+  }
+
+  private renderResults() {
+    const container = document.getElementById('rpc-results');
+    if (!container) return;
+
+    if (this.testResults.length === 0) {
+      container.innerHTML = `
+        <div class="no-results" style="text-align: center; color: #718096; padding: 2rem;">
+          No tests run yet. Use the controls above to start testing RPC communication.
+        </div>
+      `;
+      return;
+    }
+
+    container.innerHTML = this.testResults.map(result => `
+      <div class="result-entry" style="background: #f8fafc; border-left: 3px solid #4299e1; padding: 1rem; margin-bottom: 0.5rem; border-radius: 0 0.25rem 0.25rem 0;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
+          <strong>${result.operation}</strong>
+          <span style="color: #718096; font-size: 0.875rem;">${result.duration}ms</span>
+        </div>
+        <div style="color: #2d3748;">${result.result}</div>
+      </div>
+    `).join('');
+  }
+
+  private formatBytes(bytes: number): string {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+  }
+
+  // Handle events from the backend
+  onRpcTestResult(data: { operation: string; result: any; duration: number }) {
+    this.addTestResult(data);
+  }
+}