electrobun 0.0.19-beta.11 → 0.0.19-beta.111

package/templates/hello-world/README.md

@@ -0,0 +1,57 @@
+# Electrobun Hello World
+
+A simple Electrobun app to get you started with the framework.
+
+## What You'll See
+
+This hello world app demonstrates:
+- **Native Window**: A cross-platform desktop window
+- **Web-based UI**: Modern HTML, CSS, and JavaScript interface
+- **Simple Architecture**: Clean separation between Bun process and UI
+
+## Getting Started
+
+1. Install dependencies:
+   ```bash
+   bun install
+   ```
+
+2. Run in development mode:
+   ```bash
+   bun run dev
+   ```
+
+3. Build for production:
+   ```bash
+   bun run build
+   ```
+
+## Project Structure
+
+```
+src/
+├── bun/
+│   └── index.ts      # Main process - creates and manages windows
+└── mainview/
+    ├── index.html    # Your app's UI
+    ├── index.css     # Styles
+    └── index.ts      # View logic
+```
+
+## Next Steps
+
+Ready to build something more complex? Check out:
+
+- **[Documentation](https://docs.electrobun.dev)** - Learn about all Electrobun features
+- **[Examples](https://github.com/blackboardsh/electrobun/tree/main/playground)** - See advanced features like RPC, menus, and system tray
+- **[GitHub](https://github.com/blackboardsh/electrobun)** - Star the repo and join the community
+
+### Add More Features
+
+Want to extend this app? Try adding:
+- RPC communication between Bun and webview
+- Native menus and system tray
+- File dialogs and system integration
+- Multiple windows and views
+
+Happy building! 🚀

package/templates/hello-world/bun.lock

@@ -0,0 +1,63 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "electrobun-hello-world",
+      "dependencies": {
+        "electrobun": "latest",
+      },
+      "devDependencies": {
+        "@types/bun": "latest",
+      },
+    },
+  },
+  "packages": {
+    "@oneidentity/zstd-js": ["@oneidentity/zstd-js@1.0.3", "", { "dependencies": { "@types/emscripten": "^1.39.4" } }, "sha512-Jm6sawqxLzBrjC4sg2BeXToa33yPzUmq20CKsehKY2++D/gHb/oSwVjNgT+RH4vys+r8FynrgcNzGwhZWMLzfQ=="],
+
+    "@types/bun": ["@types/bun@1.2.19", "", { "dependencies": { "bun-types": "1.2.19" } }, "sha512-d9ZCmrH3CJ2uYKXQIUuZ/pUnTqIvLDS0SK7pFmbx8ma+ziH/FRMoAq5bYpRG7y+w1gl+HgyNZbtqgMq4W4e2Lg=="],
+
+    "@types/emscripten": ["@types/emscripten@1.40.1", "", {}, "sha512-sr53lnYkQNhjHNN0oJDdUm5564biioI5DuOpycufDVK7D3y+GR3oUswe2rlwY1nPNyusHbrJ9WoTyIHl4/Bpwg=="],
+
+    "@types/filesystem": ["@types/filesystem@0.0.36", "", { "dependencies": { "@types/filewriter": "*" } }, "sha512-vPDXOZuannb9FZdxgHnqSwAG/jvdGM8Wq+6N4D/d80z+D4HWH+bItqsZaVRQykAn6WEVeEkLm2oQigyHtgb0RA=="],
+
+    "@types/filewriter": ["@types/filewriter@0.0.33", "", {}, "sha512-xFU8ZXTw4gd358lb2jw25nxY9QAgqn2+bKKjKOYfNCzN4DKCFetK7sPtrlpg66Ywe3vWY9FNxprZawAh9wfJ3g=="],
+
+    "@types/har-format": ["@types/har-format@1.2.16", "", {}, "sha512-fluxdy7ryD3MV6h8pTfTYpy/xQzCFC7m89nOH9y94cNqJ1mDIDPut7MnRHI3F6qRmh/cT2fUjG1MLdCNb4hE9A=="],
+
+    "@types/node": ["@types/node@24.1.0", "", { "dependencies": { "undici-types": "~7.8.0" } }, "sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w=="],
+
+    "@types/react": ["@types/react@19.1.9", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA=="],
+
+    "@types/webextension-polyfill": ["@types/webextension-polyfill@0.12.3", "", {}, "sha512-F58aDVSeN/MjUGazXo/cPsmR76EvqQhQ1v4x23hFjUX0cfAJYE+JBWwiOGW36/VJGGxoH74sVlRIF3z7SJCKyg=="],
+
+    "browser-namespace": ["browser-namespace@1.4.0", "", { "dependencies": { "@types/filesystem": "*", "@types/har-format": "*", "@types/webextension-polyfill": "*" } }, "sha512-9b4yNTNs+8HVPssSq8RSZMRunf+G4cVQ2PMtOTn+uEVFOW5C0Uo+eGXuJ5LfxS1UDph5oAdWj92thPyxVhpqXg=="],
+
+    "bun-types": ["bun-types@1.2.19", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-uAOTaZSPuYsWIXRpj7o56Let0g/wjihKCkeRqUBhlLVM/Bt+Fj9xTo+LhC1OV1XDaGkz4hNC80et5xgy+9KTHQ=="],
+
+    "chownr": ["chownr@2.0.0", "", {}, "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="],
+
+    "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
+
+    "electrobun": ["electrobun@0.0.18", "", { "dependencies": { "@oneidentity/zstd-js": "^1.0.3", "rpc-anywhere": "1.5.0", "tar": "^6.2.1" }, "bin": { "electrobun": "dist/electrobun" } }, "sha512-RyMNGcAaHklicZlJToGfN3fVZGKHpxZv6o8S96TK9tHSY/SRze5bNPIGUnY9wr/BbWuQW5gGUGaVIWWqa5NSZQ=="],
+
+    "fs-minipass": ["fs-minipass@2.1.0", "", { "dependencies": { "minipass": "^3.0.0" } }, "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg=="],
+
+    "minipass": ["minipass@5.0.0", "", {}, "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ=="],
+
+    "minizlib": ["minizlib@2.1.2", "", { "dependencies": { "minipass": "^3.0.0", "yallist": "^4.0.0" } }, "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg=="],
+
+    "mkdirp": ["mkdirp@1.0.4", "", { "bin": { "mkdirp": "bin/cmd.js" } }, "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="],
+
+    "rpc-anywhere": ["rpc-anywhere@1.5.0", "", { "dependencies": { "browser-namespace": "^1.4.0" } }, "sha512-ZYrB0foAM4oE7oBnUH3BL7LwtW9d6+RkzL/rFnjj8GCaFt5c81Rbw6oVl6u9AMsGONsKeJX0mL62TpbPXSO6og=="],
+
+    "tar": ["tar@6.2.1", "", { "dependencies": { "chownr": "^2.0.0", "fs-minipass": "^2.0.0", "minipass": "^5.0.0", "minizlib": "^2.1.1", "mkdirp": "^1.0.3", "yallist": "^4.0.0" } }, "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A=="],
+
+    "undici-types": ["undici-types@7.8.0", "", {}, "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw=="],
+
+    "yallist": ["yallist@4.0.0", "", {}, "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="],
+
+    "fs-minipass/minipass": ["minipass@3.3.6", "", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw=="],
+
+    "minizlib/minipass": ["minipass@3.3.6", "", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw=="],
+  }
+}

package/templates/hello-world/electrobun.config

@@ -0,0 +1,18 @@
+{
+    "app": {
+        "name": "hello-world",
+        "identifier": "helloworld.electrobun.dev",
+        "version": "0.0.1"
+    },
+    "build": {
+        "mac": {           
+          "bundleCEF": true            
+        },
+        "linux": {
+            "bundleCEF": true
+        },
+        "win": {
+            "bundleCEF": true
+        }
+    },
+}

package/templates/hello-world/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "electrobun-hello-world",
+  "version": "1.0.0",
+  "description": "A simple Electrobun app showcasing core features",
+  "scripts": {
+    "dev": "electrobun dev",
+    "build": "electrobun build",
+    "start": "bun run build && bun run dev"
+  },
+  "dependencies": {
+    "electrobun": "latest"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  }
+}

package/templates/hello-world/src/bun/index.ts

@@ -0,0 +1,15 @@
+import { BrowserWindow } from "electrobun/bun";
+
+// Create the main application window
+const mainWindow = new BrowserWindow({
+  title: "Hello Electrobun!",
+  url: "views://main/index.html",
+  frame: {
+    width: 800,
+    height: 600,
+    x: 200,
+    y: 200,
+  },
+});
+
+console.log("Hello Electrobun app started!");

package/templates/hello-world/src/mainview/index.css

@@ -0,0 +1,124 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #333;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 40px 20px;
+}
+
+h1 {
+    color: white;
+    font-size: 3rem;
+    text-align: center;
+    margin-bottom: 8px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.subtitle {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1.25rem;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 40px;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.welcome-section {
+    background: white;
+    border-radius: 12px;
+    padding: 30px;
+    margin: 30px 0;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    line-height: 1.6;
+}
+
+h2 {
+    color: #2563eb;
+    margin-top: 30px;
+    margin-bottom: 15px;
+}
+
+ul {
+    margin: 20px 0;
+    padding-left: 20px;
+}
+
+li {
+    margin: 8px 0;
+}
+
+.links {
+    display: flex;
+    gap: 15px;
+    margin: 25px 0;
+    flex-wrap: wrap;
+}
+
+.doc-link {
+    display: inline-block;
+    background: #2563eb;
+    color: white;
+    text-decoration: none;
+    padding: 12px 20px;
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
+}
+
+.doc-link:hover {
+    background: #1d4ed8;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
+}
+
+code {
+    background: #f1f5f9;
+    color: #475569;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.9em;
+}
+
+.footer {
+    text-align: center;
+    color: rgba(255, 255, 255, 0.8);
+    margin-top: 40px;
+    padding: 20px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    backdrop-filter: blur(10px);
+}
+
+.footer p {
+    margin: 8px 0;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .welcome-section {
+        background: #1f2937;
+        color: #f3f4f6;
+    }
+    
+    h2 {
+        color: #60a5fa;
+    }
+    
+    code {
+        background: #374151;
+        color: #d1d5db;
+    }
+}

package/templates/hello-world/src/mainview/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hello Electrobun!</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Hello Electrobun! 🎉</h1>
+        <p class="subtitle">A fast, cross-platform desktop app framework</p>
+        
+        <div class="welcome-section">
+            <p>Welcome to your first Electrobun app! This framework combines the power of Bun with native desktop capabilities.</p>
+            
+            <h2>What is Electrobun?</h2>
+            <ul>
+                <li><strong>Fast:</strong> Built on Bun's lightning-fast JavaScript runtime</li>
+                <li><strong>Native:</strong> Access to system APIs like menus, trays, and file dialogs</li>
+                <li><strong>Cross-platform:</strong> Works on macOS, Windows, and Linux</li>
+                <li><strong>Web-based UI:</strong> Use familiar HTML, CSS, and JavaScript for your interface</li>
+            </ul>
+            
+            <h2>Get Started</h2>
+            <p>Ready to build something amazing? Check out the documentation and examples:</p>
+            
+            <div class="links">
+                <a href="https://docs.electrobun.dev" target="_blank" class="doc-link">
+                    📚 Documentation
+                </a>
+                <a href="https://github.com/blackboardsh/electrobun" target="_blank" class="doc-link">
+                    🐙 GitHub Repository
+                </a>
+                <a href="https://docs.electrobun.dev/examples" target="_blank" class="doc-link">
+                    💡 Examples
+                </a>
+                <button id="testCameraBtn" class="doc-link" style="background: #007AFF; color: white; border: none; cursor: pointer;">
+                    🎥 Test Camera Permission
+                </button>
+            </div>
+        </div>
+
+        <div class="footer">
+            <p>Edit <code>src/bun/index.ts</code> and <code>src/mainview/</code> to customize your app</p>
+            <p>Press F12 to open DevTools</p>
+        </div>
+    </div>
+</body>
+</html>

package/templates/hello-world/src/mainview/index.ts

@@ -0,0 +1,24 @@
+// Simple Hello World - no RPC needed for this basic template
+console.log("Hello Electrobun view loaded!");
+
+// Test camera permission dialog
+document.getElementById('testCameraBtn')?.addEventListener('click', async () => {
+    console.log('Testing camera permission...');
+    try {
+        const stream = await navigator.mediaDevices.getUserMedia({ 
+            video: true, 
+            audio: false 
+        });
+        console.log('Camera permission granted:', stream);
+        alert('Camera permission granted! Check console for stream details.');
+        
+        // Stop the stream immediately since we're just testing
+        stream.getTracks().forEach(track => track.stop());
+    } catch (error) {
+        console.error('Camera permission denied or failed:', error);
+        alert(`Camera permission failed: ${error.message}`);
+    }
+});
+
+// You can add interactive functionality here
+// For RPC communication with the Bun process, check out the playground example

package/templates/photo-booth/README.md

@@ -0,0 +1,108 @@
+# Photo Booth Template
+
+A cross-platform desktop photo booth application built with Electrobun. This template demonstrates how to use the getUserMedia API to access the user's camera, capture photos, and save them to disk.
+
+## Features
+
+- **Camera Access**: Uses getUserMedia to access and display live camera feed
+- **Photo Capture**: Take instant photos or use a 3-second timer
+- **Camera Selection**: Switch between multiple cameras if available
+- **Photo Gallery**: View all captured photos in a grid layout
+- **Full-Screen Preview**: Click any photo to view it in full size
+- **Save to Disk**: Save photos to your computer with a native file dialog
+- **Delete Photos**: Remove unwanted photos from the gallery
+- **Modern UI**: Clean, responsive interface with dark theme
+
+## Project Structure
+
+```
+src/
+├── bun/
+│   └── index.ts      # Main process - handles window creation and file operations
+└── mainview/
+    ├── index.html    # Photo booth UI structure
+    ├── index.css     # Styling
+    └── index.ts      # Camera logic and photo management
+```
+
+## Getting Started
+
+### Development Mode
+```bash
+bun dev
+```
+
+### Build for Production
+```bash
+bun build
+```
+
+### Run the Built App
+```bash
+bun start
+```
+
+## How It Works
+
+### Camera Access
+The app requests camera permission on startup using the Web MediaDevices API:
+```typescript
+const stream = await navigator.mediaDevices.getUserMedia({
+    video: { width: { ideal: 1920 }, height: { ideal: 1080 } },
+    audio: false
+});
+```
+
+### Photo Capture
+Photos are captured by drawing the current video frame to a canvas:
+1. Video stream is displayed in a `<video>` element
+2. When capture is triggered, the current frame is drawn to a hidden `<canvas>`
+3. Canvas is converted to a data URL (base64 PNG)
+4. Photo is stored in memory and displayed in the gallery
+
+### File Saving
+The save functionality uses Electrobun's IPC to communicate between renderer and main process:
+1. Renderer sends the photo data URL to main process
+2. Main process shows a native save dialog
+3. If user confirms, the base64 data is converted to a buffer and written to disk
+
+## Customization
+
+### Styling
+Modify `src/mainview/index.css` to customize the appearance. The app uses CSS variables for easy theming.
+
+### Camera Settings
+Adjust camera constraints in `index.ts` to change resolution or other parameters:
+```typescript
+const constraints = {
+    video: {
+        width: { ideal: 1920 },
+        height: { ideal: 1080 },
+        facingMode: 'user' // or 'environment' for rear camera
+    }
+};
+```
+
+### Storage
+Currently photos are stored in memory. You could extend this to:
+- Save photos automatically to a specific folder
+- Store photo metadata in a database
+- Upload photos to a cloud service
+
+## Security Considerations
+
+- Camera permissions are requested explicitly
+- Photos are only saved when user confirms via native dialog
+- No network requests are made
+- All photo data stays local to the device
+
+## Browser Compatibility
+
+This template uses modern web APIs that require:
+- Secure context (HTTPS or localhost)
+- Modern browser with getUserMedia support
+- Camera/webcam hardware
+
+## License
+
+This template is part of the Electrobun project and follows the same license terms.