App

.github/workflows/build.yml

@@ -0,0 +1,79 @@
+name: Build
+
+on:
+  push:
+    branches: [main, app]
+    tags: ["v*"]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - os: macos-14
+            name: macOS (ARM64)
+            artifact: kite-macos-arm64
+          - os: ubuntu-24.04
+            name: Linux (x64)
+            artifact: kite-linux-x64
+          - os: windows-latest
+            name: Windows (x64)
+            artifact: kite-windows-x64
+
+    name: ${{ matrix.name }}
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install system dependencies (Linux)
+        if: runner.os == 'Linux'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libgtk-3-dev
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Build Vite
+        run: bun run build:vite
+
+      - name: Build Electrobun
+        run: bunx electrobun build
+
+      - name: Archive build
+        shell: bash
+        run: tar -czf ${{ matrix.artifact }}.tar.gz -C build .
+
+      - name: Upload build artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.artifact }}
+          path: ${{ matrix.artifact }}.tar.gz
+          retention-days: 30
+
+  release:
+    needs: build
+    if: startsWith(github.ref, 'refs/tags/v')
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+
+    steps:
+      - name: Download all artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: artifacts
+
+      - name: Create release
+        uses: softprops/action-gh-release@v2
+        with:
+          generate_release_notes: true
+          files: artifacts/**/*.tar.gz

.gitignore

@@ -23,10 +23,8 @@ dist-ssr
 *.sln
 *.sw?
 
-# wrangler files
-.wrangler
-.dev.vars*
-!.dev.vars.example
+# Electrobun build output
+build/
+
 .env*
 !.env.example
-UI_COMPARISON_ANALYSIS.md

docs/apis_application-icons.md

@@ -0,0 +1,70 @@
+# Application Icons
+
+## Introduction
+
+Configure your Applications icons. These icons are used for the icon of your app in the app switcher and in the file system like on your Desktop or in the Applications folder.
+
+### MacOS
+
+The default location for the icon folder is in the root of your repo in a folder named `icon.iconset`.
+
+[Read Apple's developer docs](https://developer.apple.com/documentation/xcode/configuring-your-app-icon) for more details.
+
+You should include different icon sizes in your `icon.iconset` folder. We recommend the following sizes and naming convention:
+
+```
+icon_16x16.png
+[email protected]
+icon_32x32.png
+[email protected]
+icon_128x128.png
+[email protected]
+icon_256x256.png
+[email protected]
+icon_512x512.png
+[email protected]
+```
+
+You can specify a custom path for the `icon.iconset` folder in your [electrobun.config](/electrobun/docs/apis/cli/build-configuration) file.
+
+### Windows
+
+Set the `build.win.icon` option in your [electrobun.config](/electrobun/docs/apis/cli/build-configuration) file to a path to an `.ico` or `.png` file. If you provide a PNG, it will be automatically converted to ICO format during the build.
+
+The icon is embedded into the launcher executable, the Bun runtime executable, and the installer, so it appears in the taskbar, desktop shortcuts, and File Explorer.
+
+For best results with `.ico` files, include multiple sizes: 16x16, 32x32, 48x48, and 256x256. If you provide a `.png` it should be at least 256x256 pixels.
+
+```javascript
+// electrobun.config.ts
+const config: ElectrobunConfig = {
+  build: {
+    win: {
+      icon: "assets/icon.ico",
+      // or use a PNG from your macOS iconset:
+      // icon: "icon.iconset/icon_256x256.png",
+    },
+  },
+};
+```
+
+### Linux
+
+Set the `build.linux.icon` option in your [electrobun.config](/electrobun/docs/apis/cli/build-configuration) file to a path to a `.png` file. The icon should be at least 256x256 pixels.
+
+The icon is used for the window icon, taskbar, and the generated `.desktop` entry.
+
+```javascript
+// electrobun.config.ts
+const config: ElectrobunConfig = {
+  build: {
+    linux: {
+      icon: "assets/icon.png",
+      // or use a PNG from your macOS iconset:
+      // icon: "icon.iconset/icon_256x256.png",
+    },
+  },
+};
+```
+
+**Tip:** You can reuse PNGs from your macOS `icon.iconset` folder for Windows and Linux builds, so you don't need to maintain separate icon files per platform.

docs/apis_application-menu.md

@@ -0,0 +1,164 @@
+# Application Menu
+
+Create and control an application menu. In MacOS this is the menu in the top-left with File, Edit, and so on.
+
+```javascript
+import {ApplicationMenu} from "electrobun/bun";
+
+
+ApplicationMenu.setApplicationMenu([
+  {
+    submenu: [{ label: "Quit", role: "quit" }],
+  },
+  {
+    label: "Edit",
+    submenu: [
+      { role: "undo" },
+      { role: "redo" },
+      { type: "separator" },
+      {
+        label: "Custom Menu Item  🚀",
+        action: "custom-action-1",
+        tooltip: "I'm a tooltip",
+      },
+      {
+        label: "Custom menu disabled",
+        enabled: false,
+        action: "custom-action-2",
+      },
+      { type: "separator" },
+      { role: "cut" },
+      { role: "copy" },
+      { role: "paste" },
+      { role: "pasteAndMatchStyle" },
+      { role: "delete" },
+      { role: "selectAll" },
+    ],
+  },
+]);
+
+Electrobun.events.on("application-menu-clicked", (e) => {
+  console.log("application menu clicked", e.data.action); // custom-actino
+});
+```
+
+### setApplicationMenu
+
+This function takes an array of menu items. Here are some example menu items:
+
+### Menu dividers
+
+```javascript
+// menu dividers
+{type: "divider"}
+// or
+{type: "separator"}
+```
+
+### Default Roles
+
+Menu items can specify a role instead of an action. Use menu item roles to access built-in OS functionality and enable their corresponding keyboard shortcuts.
+
+If you want to enable keyboard shortcuts like ``cmd+q`}>`` to quit your application, ``cmd+c`}>`` and ``cmd+v`}>`` for copy and paste then you need to specify menu items with the corresponding roles.
+
+```javascript
+// example Edit menu
+ {
+    label: "Edit",
+    submenu: [
+      // Corresponding keyboard shotcuts will automatically
+      // be bound when a valid role is set.
+      { role: "undo" },
+      { role: "redo" },
+      { type: "separator" },
+      { role: "cut" },
+      { role: "copy" },
+      { role: "paste" },
+      { role: "pasteAndMatchStyle" },
+      { role: "delete" },
+      { role: "selectAll" },
+    ],
+  },
+```
+
+List of supported roles
+
+```
+quit: "Quit",
+  hide: "Hide",
+  hideOthers: "Hide Others",
+  showAll: "Show All",
+  undo: "Undo",
+  redo: "Redo",
+  cut: "Cut",
+  copy: "Copy",
+  paste: "Paste",
+  pasteAndMatchStyle: "Paste And Match Style",
+  delete: "Delete",
+  selectAll: "Select All",
+  startSpeaking: "Start Speaking",
+  stopSpeaking: "Stop Speaking",
+  enterFullScreen: "Enter FullScreen",
+  exitFullScreen: "Exit FullScreen",
+  toggleFullScreen: "Toggle Full Screen",
+  minimize: "Minimize",
+  zoom: "Zoom",
+  bringAllToFront: "Bring All To Front",
+  close: "Close",
+  cycleThroughWindows: "Cycle Through Windows",
+  showHelp: "Show Help",`}>
+```
+
+### Custom Menu Items
+
+Instead of a role you can specify and action, you can then listen for that action in the 'application-menu-clicked' event.
+
+```javascript
+// basic menu item
+{label: "I am a menu item", action: 'some-action'}
+```
+
+## Optionaly properties
+
+### enabled
+
+Set to false to show the menu item as disabled
+
+### checked
+
+Set to true to show a checkbox next to the menu item.
+
+### hidden
+
+Set to true to hide
+
+### tooltip
+
+Will show this tooltip when hovering over the menu item
+
+### submenu
+
+The top-level menu corresponds to the menu items you see when the app is focused, eg: File, Edit, View, etc. You can add actions to those if you want and treat them like buttons, but you can also add nested submenus.
+
+### accelerator
+
+Set a custom keyboard shortcut for the menu item. This is useful when you want a custom action to have a keyboard shortcut that isn't covered by the built-in roles.
+
+```javascript
+// Custom menu item with keyboard shortcut
+{
+  label: "Save Project",
+  action: "save-project",
+  accelerator: "s"  // Will show as Cmd+S on macOS, Ctrl+S on Windows
+}
+```
+
+The accelerator string specifies the key to bind. The default modifier is Command on macOS and Ctrl on Windows.
+
+#### Platform Support
+
+*   **macOS:** Full support for custom accelerators. The default modifier is Command.
+*   **Windows:** Supports simple single-character accelerators (e.g., "s", "n", "o"). Complex combinations may not work as expected.
+*   **Linux:** Application menus are not currently supported on Linux.
+
+**Note:** If you use a role (like "copy" or "paste"), the OS automatically assigns the standard keyboard shortcut. Only use ``accelerator`}>`` for custom actions.