electrobun 0.0.19-beta.113 → 0.0.19-beta.115

package/dist/api/bun/core/Updater.ts

@@ -1,4 +1,4 @@
-import { join, dirname, resolve, basename } from "path";
+import { join, dirname, resolve, basename, relative } from "path";
 import { homedir } from "os";
 import { renameSync, unlinkSync, mkdirSync, rmdirSync, statSync, readdirSync, cpSync } from "fs";
 import { execSync } from "child_process";
@@ -379,9 +379,10 @@ const Updater = {
         if (currentOS === 'win') {
           console.log(`Using Windows native tar.exe to extract ${latestTarPath} to ${extractionDir}...`);
           try {
-            execSync(`tar -xf "${latestTarPath}" -C "${extractionDir}"`, { 
+            const relativeTarPath = relative(extractionDir, latestTarPath);
+            execSync(`tar -xf "${relativeTarPath}"`, { 
               stdio: 'inherit',
-              cwd: extractionDir 
+              cwd: extractionDir
             });
             console.log('Windows tar.exe extraction completed successfully');
             

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "electrobun",
-  "version": "0.0.19-beta.113",
+  "version": "0.0.19-beta.115",
   "description": "Build ultra fast, tiny, and cross-platform desktop apps with Typescript.",
   "license": "MIT",
   "author": "Blackboard Technologies Inc.",

package/src/cli/index.ts

@@ -1,4 +1,4 @@
-import { join, dirname, basename } from "path";
+import { join, dirname, basename, relative } from "path";
 import {
   existsSync,
   readFileSync,
@@ -192,7 +192,8 @@ async function ensureCoreDependencies(targetOS?: 'macos' | 'win' | 'linux', targ
     // Use Windows native tar.exe on Windows due to npm tar library issues
     if (OS === 'win') {
       console.log('Using Windows native tar.exe for reliable extraction...');
-      execSync(`tar -xf "${tempFile}" -C "${platformDistPath}"`, { 
+      const relativeTempFile = relative(platformDistPath, tempFile);
+      execSync(`tar -xf "${relativeTempFile}"`, { 
         stdio: 'inherit',
         cwd: platformDistPath 
       });
@@ -333,7 +334,8 @@ async function ensureCEFDependencies(targetOS?: 'macos' | 'win' | 'linux', targe
     // Use Windows native tar.exe on Windows due to npm tar library issues
     if (OS === 'win') {
       console.log('Using Windows native tar.exe for reliable extraction...');
-      execSync(`tar -xf "${tempFile}" -C "${platformDistPath}"`, { 
+      const relativeTempFile = relative(platformDistPath, tempFile);
+      execSync(`tar -xf "${relativeTempFile}"`, { 
         stdio: 'inherit',
         cwd: platformDistPath 
       });

package/templates/photo-booth/bun.lock

@@ -4,7 +4,7 @@
     "": {
       "name": "electrobun-photo-booth",
       "dependencies": {
-        "electrobun": "^0.0.19-beta.110",
+        "electrobun": "file:../../",
       },
       "devDependencies": {
         "@types/bun": "latest",
@@ -18,6 +18,8 @@
 
     "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
 
+    "@types/archiver": ["@types/archiver@6.0.3", "", { "dependencies": { "@types/readdir-glob": "*" } }, "sha512-a6wUll6k3zX6qs5KlxIggs1P1JcYJaTCx2gnlr+f0S1yd2DoaEwoIK10HmBaLnZwWneBz+JBm0dwcZu0zECBcQ=="],
+
     "@types/bun": ["@types/bun@1.2.20", "", { "dependencies": { "bun-types": "1.2.20" } }, "sha512-dX3RGzQ8+KgmMw7CsW4xT5ITBSCrSbfHc36SNT31EOUg/LA9JWq0VDdEXDRSe1InVWpd2yLUM1FUF/kEOyTzYA=="],
 
     "@types/emscripten": ["@types/emscripten@1.40.1", "", {}, "sha512-sr53lnYkQNhjHNN0oJDdUm5564biioI5DuOpycufDVK7D3y+GR3oUswe2rlwY1nPNyusHbrJ9WoTyIHl4/Bpwg=="],
@@ -32,8 +34,12 @@
 
     "@types/react": ["@types/react@19.1.10", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-EhBeSYX0Y6ye8pNebpKrwFJq7BoQ8J5SO6NlvNwwHjSj6adXJViPQrKlsyPw7hLBLvckEMO1yxeGdR82YBBlDg=="],
 
+    "@types/readdir-glob": ["@types/readdir-glob@1.1.5", "", { "dependencies": { "@types/node": "*" } }, "sha512-raiuEPUYqXu+nvtY2Pe8s8FEmZ3x5yAH4VkLdihcPdalvsHltomrRC9BzuStrJ9yk06470hS0Crw0f1pXqD+Hg=="],
+
     "@types/webextension-polyfill": ["@types/webextension-polyfill@0.12.3", "", {}, "sha512-F58aDVSeN/MjUGazXo/cPsmR76EvqQhQ1v4x23hFjUX0cfAJYE+JBWwiOGW36/VJGGxoH74sVlRIF3z7SJCKyg=="],
 
+    "@types/ws": ["@types/ws@8.5.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw=="],
+
     "abort-controller": ["abort-controller@3.0.0", "", { "dependencies": { "event-target-shim": "^5.0.0" } }, "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg=="],
 
     "ansi-regex": ["ansi-regex@6.1.0", "", {}, "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA=="],
@@ -84,7 +90,7 @@
 
     "eastasianwidth": ["eastasianwidth@0.2.0", "", {}, "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="],
 
-    "electrobun": ["electrobun@0.0.19-beta.110", "", { "dependencies": { "@oneidentity/zstd-js": "^1.0.3", "archiver": "^7.0.1", "rpc-anywhere": "1.5.0", "tar": "^6.2.1" }, "bin": { "electrobun": "bin/electrobun.cjs" } }, "sha512-2QCaFeNI+yK48LJVQWZeICVrkFeBW6MsVT1ARuYQ1iJ3ui2R3XU7BnX9M36LbMuqyCMWxQk2jWnN5UcjEGzF7Q=="],
+    "electrobun": ["electrobun@file:../..", { "dependencies": { "@oneidentity/zstd-js": "^1.0.3", "archiver": "^7.0.1", "rpc-anywhere": "1.5.0", "tar": "^6.2.1" }, "devDependencies": { "@types/archiver": "^6.0.3", "@types/bun": "1.1.9" }, "bin": { "electrobun": "./bin/electrobun.cjs" } }],
 
     "emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
 
@@ -188,6 +194,8 @@
 
     "zip-stream": ["zip-stream@6.0.1", "", { "dependencies": { "archiver-utils": "^5.0.0", "compress-commons": "^6.0.2", "readable-stream": "^4.0.0" } }, "sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA=="],
 
+    "electrobun/@types/bun": ["@types/bun@1.1.9", "", { "dependencies": { "bun-types": "1.1.27" } }, "sha512-SXJRejXpmAc3qxyN/YS4/JGWEzLf4dDBa5fLtRDipQXHqNccuMU4EUYCooXNTsylG0DmwFQsGgEDHxZF+3DqRw=="],
+
     "fs-minipass/minipass": ["minipass@3.3.6", "", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw=="],
 
     "glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
@@ -212,6 +220,8 @@
 
     "wrap-ansi-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
+    "electrobun/@types/bun/bun-types": ["bun-types@1.1.27", "", { "dependencies": { "@types/node": "~20.12.8", "@types/ws": "~8.5.10" } }, "sha512-rHXAiIDefeMS/fleNM1rRDYqolJGNRdch3+AuCRwcZWaqTa1vjGBNsahH/HVV7Y82frllYhJomCVSEiHzLzkgg=="],
+
     "lazystream/readable-stream/safe-buffer": ["safe-buffer@5.1.2", "", {}, "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="],
 
     "lazystream/readable-stream/string_decoder": ["string_decoder@1.1.1", "", { "dependencies": { "safe-buffer": "~5.1.0" } }, "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg=="],
@@ -221,5 +231,9 @@
     "wrap-ansi-cjs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
     "wrap-ansi-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
+    "electrobun/@types/bun/bun-types/@types/node": ["@types/node@20.12.14", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-scnD59RpYD91xngrQQLGkE+6UrHUPzeKZWhhjBSa3HSkwjbQc38+q3RoIVEwxQGRw3M+j5hpNAM+lgV3cVormg=="],
+
+    "electrobun/@types/bun/bun-types/@types/node/undici-types": ["undici-types@5.26.5", "", {}, "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="],
   }
 }

package/templates/photo-booth/package.json

@@ -8,7 +8,7 @@
     "start": "bun run build:dev && bun run dev"
   },
   "dependencies": {
-    "electrobun": "^0.0.19-beta.110"
+    "electrobun": "0.0.19-beta.114"
   },
   "devDependencies": {
     "@types/bun": "latest"

package/templates/photo-booth/src/bun/index.ts

@@ -75,10 +75,11 @@ const photoBoothRPC = BrowserView.defineRPC<PhotoBoothRPC>({
 });
 
 // Create the main window
+// Use native renderer (WKWebView) by default, but allow overriding with CEF
 const mainWindow = new BrowserWindow({
   title: "Photo Booth",
   url: "views://mainview/index.html",
-  renderer: "cef",
+  // Don't specify renderer to use the default (native WKWebView on macOS)
   frame: {
     width: 1000,
     height: 700,

package/templates/photo-booth/src/mainview/index.css

@@ -24,6 +24,45 @@ header {
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #3a3a3a;
+    gap: 2rem;
+}
+
+.mode-selector {
+    display: flex;
+    gap: 0.5rem;
+    background: #1a1a1a;
+    padding: 0.25rem;
+    border-radius: 8px;
+    border: 1px solid #3a3a3a;
+}
+
+.mode-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    background: transparent;
+    color: #999;
+    border: none;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.mode-btn:hover {
+    background: #333;
+    color: #fff;
+}
+
+.mode-btn.active {
+    background: #007aff;
+    color: white;
+}
+
+.mode-btn.active:hover {
+    background: #0056b3;
 }
 
 h1 {
@@ -81,6 +120,43 @@ main {
     justify-content: center;
 }
 
+.native-capture-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #1a1a1a;
+    color: #999;
+    z-index: 1;
+}
+
+.placeholder-content {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.placeholder-content svg {
+    opacity: 0.6;
+}
+
+.placeholder-content p {
+    margin: 0;
+    font-size: 0.875rem;
+}
+
+.placeholder-content p:first-of-type {
+    font-size: 1rem;
+    font-weight: 500;
+    color: #ccc;
+}
+
 #video {
     width: 100%;
     height: 100%;
@@ -169,6 +245,42 @@ main {
     cursor: pointer;
 }
 
+.camera-only-control {
+    display: flex;
+}
+
+.screen-only-control {
+    display: none;
+}
+
+.mode-screen .camera-only-control {
+    display: none;
+}
+
+.mode-screen .screen-only-control {
+    display: flex;
+}
+
+.start-camera-btn,
+.select-screen-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: #007aff;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.start-camera-btn:hover,
+.select-screen-btn:hover {
+    background: #0056b3;
+}
+
 .change-source-btn {
     display: flex;
     align-items: center;

package/templates/photo-booth/src/mainview/index.html

@@ -10,9 +10,26 @@
     <div class="container">
         <header>
             <h1>Photo Booth / Screenshot Tool</h1>
+            <div class="mode-selector">
+                <button id="cameraModeBtn" class="mode-btn active">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
+                        <circle cx="12" cy="13" r="4"/>
+                    </svg>
+                    Camera
+                </button>
+                <button id="screenModeBtn" class="mode-btn">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
+                        <line x1="8" y1="21" x2="16" y2="21"/>
+                        <line x1="12" y1="17" x2="12" y2="21"/>
+                    </svg>
+                    Screen Capture
+                </button>
+            </div>
             <div class="status" id="status">
                 <span class="status-dot"></span>
-                <span class="status-text">Initializing media...</span>
+                <span class="status-text">Initializing...</span>
             </div>
         </header>
 
@@ -26,29 +43,41 @@
                 
                 <div class="controls">
                     <button id="captureBtn" class="capture-btn" disabled>
-                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="capture-icon-camera">
                             <circle cx="12" cy="12" r="10"/>
                             <circle cx="12" cy="12" r="7"/>
                         </svg>
-                        Take Photo
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="capture-icon-screen" style="display: none;">
+                            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
+                            <circle cx="12" cy="10" r="2"/>
+                        </svg>
+                        <span class="capture-btn-text">Take Photo</span>
                     </button>
                     
                     <div class="settings">
-                        <label>
+                        <label class="timer-setting">
                             <input type="checkbox" id="timerToggle">
                             <span>3s Timer</span>
                         </label>
                         
-                        <select id="cameraSelect" class="camera-select">
+                        <select id="cameraSelect" class="camera-select camera-only-control">
                             <option value="">Select Camera</option>
                         </select>
                         
-                        <button id="changeSourceBtn" class="change-source-btn" style="display: none;">
+                        <button id="startCameraBtn" class="start-camera-btn camera-only-control" style="display: none;">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
+                                <circle cx="12" cy="13" r="4"/>
+                            </svg>
+                            Start Camera
+                        </button>
+                        
+                        <button id="selectScreenBtn" class="select-screen-btn screen-only-control" style="display: none;">
                             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
-                                <circle cx="12" cy="12" r="3"/>
+                                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
+                                <polyline points="8 17 12 21 16 17"/>
                             </svg>
-                            Change Source
+                            Select Screen
                         </button>
                     </div>
                 </div>