Add macOS titlebar presets

Author: bigmacfive

README.ko.md

@@ -28,7 +28,7 @@ macOS, Windows, Linux를 지원합니다.
 - title, description, theme color, favicon, apple-touch-icon, manifest icon 수집
 - 깨진 응답이나 저품질 raster 아이콘을 패키징 전에 걸러냄
 - 대상 URL을 감싸는 로컬 Electrobun shell 생성
-- macOS에서 윈도우 chrome과 콘텐츠가 붙어 보이도록 통합 상단바 적용
+- macOS에서 자주 쓰는 윈도우 chrome 패턴을 프리셋으로 고를 수 있게 생성
 - macOS용 DMG 흐름 포함, 나머지 플랫폼도 빌드 가능한 출력 제공
 - interactive 터미널에서는 파괴적이거나 무거운 작업 전에 확인 프롬프트 표시, 자동 승인은 `--yes`
 
@@ -61,6 +61,12 @@ bun install
 bun run build
 ```
 
+처음부터 더 타이트한 macOS 상단바를 쓰고 싶다면:
+
+```bash
+appbun https://chat.openai.com --name "ChatGPT" --titlebar compact --dmg
+```
+
 ## CLI 예시
 
 ```bash
@@ -83,6 +89,10 @@ appbun https://chat.openai.com --theme-color '#10a37f'
 appbun https://www.notion.so --package-manager npm
 ```
 
+```bash
+appbun https://github.com --name "GitHub" --titlebar system
+```
+
 스크립트나 CI에서 확인 프롬프트를 건너뛰려면:
 
 ```bash
@@ -101,6 +111,25 @@ appbun prompt http://localhost:3000 --name "My App"
 
 그러면 에이전트가 현재 웹앱을 `./desktop/my-app` 아래에 `appbun@latest`로 패키징하고 빌드하게 만드는 지시문이 출력됩니다.
 
+## 윈도우 chrome 프리셋
+
+이제 `appbun`은 생성되는 macOS 상단바를 한 가지 스타일로 고정하지 않고, 사용자가 프리셋으로 고를 수 있게 만들었습니다.
+
+| 프리셋 | 어울리는 경우 | macOS 동작 |
+| --- | --- | --- |
+| `system` | 가장 네이티브한 창이 좋을 때 | 기본 시스템 title bar, 로컬 shell header 없음 |
+| `unified` | 기본값, 가장 균형 잡힌 wrapper | hidden inset traffic lights + 연결된 로컬 toolbar |
+| `compact` | 콘텐츠가 우선인 앱 | 같은 패턴이지만 더 낮고 더 조밀함 |
+| `minimal` | 시각적 chrome을 덜 보이고 싶을 때 | 같은 패턴이지만 메타데이터를 줄이고 경계를 약하게 표현 |
+
+Windows와 Linux에서는 현재 표준 네이티브 title bar로 폴백합니다.
+
+옵션 전체를 빨리 보려면:
+
+```bash
+appbun create --help
+```
+
 ## Showcase
 
 로그인 없이 바로 동작하는 공개 웹앱을 Playwright로 캡처하고, 생성되는 shell 느낌에 맞춰 프레임한 예시입니다.
@@ -147,16 +176,17 @@ my-app/
 
 ### macOS
 
-생성 앱은 다음을 사용합니다.
+생성 앱은 다음 중 하나를 사용합니다.
 
-- `hiddenInset` traffic lights
-- `UnifiedTitleAndToolbar`
-- 떠 있는 가짜 헤더 대신 전체 폭 로컬 title area
+- `--titlebar system`일 때 기본 시스템 title bar
+- `--titlebar unified`, `compact`, `minimal`일 때 `hiddenInset` traffic lights
+- 연결형 프리셋에서 `UnifiedTitleAndToolbar` + `FullSizeContentView`
+- 고정된 가짜 헤더 하나가 아니라 선택한 프리셋에 맞는 로컬 title area
 - 설치형 배포를 위한 `build:dmg`
 
 ### Windows 와 Linux
 
-생성된 Electrobun 프로젝트는 이미 빌드 가능합니다. 현재 `appbun`은 우선 macOS 설치 자동화에 집중하고 있고, Windows/Linux 패키징 helper는 로드맵에 있습니다.
+생성된 Electrobun 프로젝트는 이미 빌드 가능합니다. 현재 `appbun`은 이 플랫폼들에서는 표준 네이티브 title bar를 유지하고, 우선 macOS 설치 자동화에 집중하고 있습니다. Windows/Linux 패키징 helper는 로드맵에 있습니다.
 
 ## 로컬 개발
 

README.md

@@ -28,7 +28,7 @@ What it handles for you:
 - fetches title, description, theme color, favicon, apple-touch icon, and manifest icons
 - rejects obviously broken icon responses and low-quality raster assets before packaging
 - generates a local Electrobun shell around the target URL
-- uses a unified top bar on macOS so the window chrome and content feel connected
+- lets you choose between common macOS window chrome presets instead of hard-coding one look
 - produces cross-platform build output, plus a macOS DMG flow for drag-to-Applications installs
 - asks before destructive or heavyweight steps in interactive terminals, with `--yes` to skip prompts
 
@@ -61,6 +61,12 @@ bun install
 bun run build
 ```
 
+Need a tighter macOS chrome right away:
+
+```bash
+appbun https://chat.openai.com --name "ChatGPT" --titlebar compact --dmg
+```
+
 ## CLI examples
 
 ```bash
@@ -83,6 +89,10 @@ appbun https://chat.openai.com --theme-color '#10a37f'
 appbun https://www.notion.so --package-manager npm
 ```
 
+```bash
+appbun https://github.com --name "GitHub" --titlebar system
+```
+
 Skip confirmation prompts in scripted runs:
 
 ```bash
@@ -101,6 +111,25 @@ appbun prompt http://localhost:3000 --name "My App"
 
 That outputs a ready-to-paste instruction block telling the agent to package the current web app into `./desktop/my-app` with `appbun@latest`, then build it.
 
+## Window chrome presets
+
+`appbun` now exposes the generated macOS title area as a user choice instead of locking every app to one look.
+
+| Preset | Best for | macOS behavior |
+| --- | --- | --- |
+| `system` | strict native window chrome | default system title bar, no local shell header |
+| `unified` | default, balanced desktop wrapper | hidden inset traffic lights with a connected local toolbar |
+| `compact` | content-heavy apps | same pattern, but shorter and tighter |
+| `minimal` | distraction-free wrappers | same pattern, but lighter metadata and less visible chrome |
+
+On Windows and Linux, generated apps fall back to the standard native title bar.
+
+To inspect every option quickly:
+
+```bash
+appbun create --help
+```
+
 ## Showcase
 
 Public no-login web apps captured with Playwright and framed to match the generated shell:
@@ -147,16 +176,17 @@ my-app/
 
 ### macOS
 
-Generated apps use:
+Generated apps can use:
 
-- `hiddenInset` traffic lights
-- `UnifiedTitleAndToolbar`
-- a full-width local title area instead of a floating fake header
+- the default system title bar with `--titlebar system`
+- `hiddenInset` traffic lights with `--titlebar unified`, `compact`, or `minimal`
+- `UnifiedTitleAndToolbar` plus `FullSizeContentView` for the connected presets
+- a local title area sized to match the selected preset instead of one fixed fake header
 - `build:dmg` for installer-style distribution
 
 ### Windows and Linux
 
-The generated Electrobun project is already buildable there. `appbun` currently focuses its installer automation on macOS first; Windows and Linux packaging helpers are still on the roadmap.
+The generated Electrobun project is already buildable there. `appbun` keeps the standard native title bar on those platforms today and focuses its installer automation on macOS first; Windows and Linux packaging helpers are still on the roadmap.
 
 ## Local development
 

docs/agent-prompts/web-app-repo.ko.md

@@ -12,6 +12,7 @@ Inputs you must fill in before running:
 - App name: [APP_NAME]
 - Desktop wrapper output directory inside this repo: ./desktop/[APP_SLUG]
 - Window size: [WIDTH]x[HEIGHT]
+- Titlebar preset: [system|unified|compact|minimal]
 - Theme color: [THEME_COLOR]
 
 Rules:
@@ -27,7 +28,7 @@ Rules:
 Execution plan:
 1. 필요하면 현재 웹앱 dev server를 띄우고 [WEB_APP_URL]이 실제로 열리는지 확인한다.
 2. 아래 명령을 실행한다.
-   npx -y appbun@latest [WEB_APP_URL] --name "[APP_NAME]" --out-dir ./desktop/[APP_SLUG] --width [WIDTH] --height [HEIGHT] --theme-color [THEME_COLOR] --yes
+   npx -y appbun@latest [WEB_APP_URL] --name "[APP_NAME]" --out-dir ./desktop/[APP_SLUG] --titlebar [system|unified|compact|minimal] --width [WIDTH] --height [HEIGHT] --theme-color [THEME_COLOR] --yes
 3. 생성된 wrapper 디렉터리로 이동한다.
    cd ./desktop/[APP_SLUG]
 4. 의존성을 설치한다.

docs/agent-prompts/web-app-repo.md

@@ -12,6 +12,7 @@ Inputs you must fill in before running:
 - App name: [APP_NAME]
 - Desktop wrapper output directory inside this repo: ./desktop/[APP_SLUG]
 - Window size: [WIDTH]x[HEIGHT]
+- Titlebar preset: [system|unified|compact|minimal]
 - Theme color: [THEME_COLOR]
 
 Rules:
@@ -27,7 +28,7 @@ Rules:
 Execution plan:
 1. If needed, start the current web app and verify [WEB_APP_URL] loads.
 2. Run:
-   npx -y appbun@latest [WEB_APP_URL] --name "[APP_NAME]" --out-dir ./desktop/[APP_SLUG] --width [WIDTH] --height [HEIGHT] --theme-color [THEME_COLOR] --yes
+   npx -y appbun@latest [WEB_APP_URL] --name "[APP_NAME]" --out-dir ./desktop/[APP_SLUG] --titlebar [system|unified|compact|minimal] --width [WIDTH] --height [HEIGHT] --theme-color [THEME_COLOR] --yes
 3. Change into the generated wrapper directory:
    cd ./desktop/[APP_SLUG]
 4. Install dependencies:

src/__tests__/generator.test.ts

@@ -157,6 +157,63 @@ describe("generator", () => {
     expect(files.find((file) => file.path === "src/mainview/index.css")?.content).toContain("--shell-toolbar-height: 40px");
   });
 
+  test("system titlebar preset falls back to native chrome", () => {
+    const config = resolveAppConfig(
+      "https://example.com",
+      {
+        width: 1400,
+        height: 900,
+        packageManager: "bun",
+        install: false,
+        dmg: false,
+        yes: false,
+        showConfig: false,
+        quiet: true,
+        titlebar: "system",
+      },
+      {
+        title: "Example",
+        description: "Example app",
+        themeColor: "#336699",
+        sourceUrl: "https://example.com",
+        iconCandidates: [],
+      },
+    );
+
+    const files = renderTemplateFiles(config, {});
+    expect(files.find((file) => file.path === "src/bun/index.ts")?.content).toContain('titleBarStyle: isMac ? "default" : "default"');
+    expect(files.find((file) => file.path === "src/mainview/index.html")?.content).not.toContain("<header");
+    expect(files.find((file) => file.path === "src/mainview/index.css")?.content).toContain("--shell-topbar-display: none");
+  });
+
+  test("compact titlebar preset lowers toolbar height", () => {
+    const config = resolveAppConfig(
+      "https://example.com",
+      {
+        width: 1400,
+        height: 900,
+        packageManager: "bun",
+        install: false,
+        dmg: false,
+        yes: false,
+        showConfig: false,
+        quiet: true,
+        titlebar: "compact",
+      },
+      {
+        title: "Example",
+        description: "Example app",
+        themeColor: "#336699",
+        sourceUrl: "https://example.com",
+        iconCandidates: [],
+      },
+    );
+
+    const files = renderTemplateFiles(config, {});
+    expect(files.find((file) => file.path === "src/bun/index.ts")?.content).toContain('titleBarStyle: isMac ? "hiddenInset" : "default"');
+    expect(files.find((file) => file.path === "src/mainview/index.css")?.content).toContain("--shell-toolbar-height: 36px");
+  });
+
   test("writeProject creates config and icon files", async () => {
     const root = mkdtempSync(join(tmpdir(), "appbun-test-"));
     tempDirs.push(root);

src/cli.ts

@@ -16,12 +16,13 @@ import {
   writeProject,
 } from "./lib/generator.js";
 import { createFallbackSiteMetadata, fetchSiteMetadata } from "./lib/metadata.js";
-import type { CreateCommandOptions } from "./lib/types.js";
+import type { CreateCommandOptions, TitlebarStyle } from "./lib/types.js";
 import { clearDirectoryContents, displayPath, isDirectoryEmpty, suggestAlternativeOutputDirectory } from "./lib/utils.js";
 
 const defaultOptions: CreateCommandOptions = {
   width: 1440,
   height: 900,
+  titlebar: "unified",
   packageManager: "bun",
   install: false,
   dmg: false,
@@ -38,6 +39,8 @@ const program = new Command();
 program
   .name("appbun")
   .description("Generate an Electrobun desktop wrapper from any web app URL.")
+  .showSuggestionAfterError()
+  .showHelpAfterError()
   .version("0.5.2");
 
 program
@@ -49,6 +52,12 @@ program
   .option("--description <description>", "package description")
   .option("--identifier <identifier>", "bundle identifier, for example com.example.app")
   .option("--theme-color <hex>", "shell accent color, for example #2563eb")
+  .option(
+    "--titlebar <style>",
+    "window chrome preset: system, unified, compact, or minimal",
+    parseTitlebar,
+    defaultOptions.titlebar,
+  )
   .option("--width <number>", "window width", parseInteger, defaultOptions.width)
   .option("--height <number>", "window height", parseInteger, defaultOptions.height)
   .option("--package-manager <pm>", "install command for the generated app: bun or npm", defaultOptions.packageManager)
@@ -57,6 +66,25 @@ program
   .option("-y, --yes", "accept interactive prompts automatically")
   .option("--show-config", "print resolved config before writing files")
   .option("--quiet", "reduce output")
+  .addHelpText(
+    "after",
+    `
+
+Titlebar presets:
+  system   Keep the default system title bar. Best for strict native chrome.
+  unified  Recommended on macOS. Hidden inset traffic lights with a connected local toolbar.
+  compact  Same macOS pattern, but tighter for content-heavy apps.
+  minimal  Same macOS pattern, with lighter metadata and less visible chrome.
+
+Examples:
+  $ appbun create https://calendar.google.com --name Calendar --out-dir ./calendar-app
+  $ appbun https://linear.app --package-manager npm --install
+  $ appbun create https://chat.openai.com --theme-color #10a37f --titlebar compact --width 1600 --height 1000
+  $ appbun https://chat.openai.com --name ChatGPT --dmg
+  $ appbun https://github.com --name GitHub --titlebar system
+  $ appbun https://github.com --name GitHub --out-dir ./github --yes
+`,
+  )
   .action(async (url: string, options: CreateCommandOptions) => {
     try {
       validatePackageManager(options.packageManager);
@@ -175,10 +203,25 @@ program
   .option("--description <description>", "package description")
   .option("--identifier <identifier>", "bundle identifier, for example com.example.app")
   .option("--theme-color <hex>", "shell accent color, for example #2563eb")
+  .option(
+    "--titlebar <style>",
+    "window chrome preset: system, unified, compact, or minimal",
+    parseTitlebar,
+    defaultOptions.titlebar,
+  )
   .option("--width <number>", "window width", parseInteger, defaultOptions.width)
   .option("--height <number>", "window height", parseInteger, defaultOptions.height)
   .option("--copy", "copy the generated prompt to the clipboard when supported")
   .option("--quiet", "reduce metadata logs")
+  .addHelpText(
+    "after",
+    `
+
+Examples:
+  $ appbun prompt http://localhost:3000 --name "My App"
+  $ appbun prompt https://staging.example.com --name "Staging App" --titlebar minimal --copy
+`,
+  )
   .action(async (url: string, options: CreateCommandOptions & { copy?: boolean }) => {
     try {
       validatePackageManager(defaultOptions.packageManager);
@@ -239,13 +282,11 @@ program
 program.addHelpText(
   "after",
   `
-Examples:
-  $ appbun create https://calendar.google.com --name Calendar --out-dir ./calendar-app
-  $ appbun https://linear.app --package-manager npm --install
-  $ appbun create https://chat.openai.com --theme-color #10a37f --width 1600 --height 1000
-  $ appbun https://chat.openai.com --name ChatGPT --dmg
-  $ appbun https://github.com --name GitHub --out-dir ./github --yes
-  $ appbun prompt https://myapp.com --name "My App" --copy
+Commands:
+  create   Scaffold a desktop wrapper project from a URL.
+  prompt   Print a ready-to-paste instruction block for another coding agent.
+
+Run "appbun <command> --help" to see examples and titlebar presets.
 `,
 );
 
@@ -259,6 +300,20 @@ function parseInteger(value: string): number {
   return parsed;
 }
 
+function parseTitlebar(value: string): TitlebarStyle {
+  const normalized = value.trim().toLowerCase();
+  if (
+    normalized === "system" ||
+    normalized === "unified" ||
+    normalized === "compact" ||
+    normalized === "minimal"
+  ) {
+    return normalized;
+  }
+
+  throw new Error(`Invalid titlebar style: ${value}. Use system, unified, compact, or minimal.`);
+}
+
 function validatePackageManager(value: string): asserts value is "bun" | "npm" {
   if (value !== "bun" && value !== "npm") {
     throw new Error(`Unsupported package manager: ${value}`);