@multiplatform.one/cli 6.4.2 → 6.6.0

package/templates/pieces/tauri/universal/apps/__NAME__/src-tauri/src/main.rs

@@ -0,0 +1,9 @@
+//! __NAME__ Tauri desktop entry point — delegates to the shared lib.rs so
+//! the same crate can later host mobile entry points (tauri ios/android).
+
+// Prevents an additional console window on Windows in release builds.
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    app_lib::run();
+}

package/templates/pieces/tauri/universal/apps/__NAME__/src-tauri/tauri.conf.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "__NAME__",
+  "version": "0.0.0",
+  "identifier": "com.__NAME_APPID__.app",
+  "build": {
+    "beforeDevCommand": "pnpm dev",
+    "beforeBuildCommand": "pnpm build",
+    "devUrl": "http://localhost:3456",
+    "frontendDist": "../dist"
+  },
+  "app": {
+    "security": {
+      "csp": null
+    },
+    "windows": [
+      {
+        "title": "__NAME_PASCAL__",
+        "width": 1200,
+        "height": 800,
+        "resizable": true,
+        "fullscreen": false,
+        "center": true,
+        "minWidth": 800,
+        "minHeight": 600
+      }
+    ]
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ],
+    "category": "Productivity",
+    "shortDescription": "__NAME__ desktop app",
+    "copyright": "Copyright © __YEAR__"
+  }
+}

package/templates/pieces/tauri/universal/gitignore.partial

@@ -0,0 +1,3 @@
+# tauri piece (mpo init --tauri): rust build output + generated schemas
+apps/__NAME__/src-tauri/target
+apps/__NAME__/src-tauri/gen/schemas

package/templates/pieces/tauri/universal/package.json.partial

@@ -0,0 +1,6 @@
+{
+  "scripts": {
+    "tauri:dev": "pnpm --filter @app/__NAME__ tauri:dev",
+    "tauri:build": "pnpm --filter @app/__NAME__ tauri:build"
+  }
+}

package/templates/pieces/vscode/universal/README.md.partial

@@ -0,0 +1,17 @@
+## VS Code extension (`mpo init --vscode`)
+
+`apps/__NAME__/vscode/` is a VS Code extension target: a thin extension host
+(`extension/`) opening a Tamagui webview (`webview/`) that mounts the same
+`features/__NAME__` screens as the web app — a webview has no One server
+runtime, so the `one` router API rides the stack-navigation seam
+(`@multiplatform.one/router/seam`).
+
+```bash
+pnpm build:vscode   # stage extension + webview + manifest into apps/__NAME__/dist-vscode
+```
+
+Try it: open `apps/__NAME__/dist-vscode` in VS Code's Extension Development
+Host (F5 with a launch config pointing at it, or
+`code --extensionDevelopmentPath=$PWD/apps/__NAME__/dist-vscode`), then run
+the "__NAME_PASCAL__: Show App" command. Package a .vsix with
+`vsce package` from inside `apps/__NAME__/dist-vscode`.

package/templates/pieces/vscode/universal/apps/__NAME__/package.json.partial

@@ -0,0 +1,19 @@
+{
+  "scripts": {
+    "dev:vscode": "cd vscode && vite --config ../vite.config.vscode.ts",
+    "build:vscode": "cd vscode && vite build --config ../vite.config.vscode.ts && cd .. && tsx vscode/manifest.ts",
+    "typecheck:vscode": "tsc --noEmit -p vscode/tsconfig.json"
+  },
+  "dependencies": {
+    "@multiplatform.one/router": "__MPO_VERSION__",
+    "react-cookie": "^8.1.2"
+  },
+  "devDependencies": {
+    "@multiplatform.one/vite-plugin-vscode": "__MPO_VERSION__",
+    "@tamagui/vite-plugin": "2.0.0-rc.41",
+    "@tomjs/vite-plugin-vscode": "^7.1.1",
+    "@types/node": "^25.6.0",
+    "@types/vscode": "^1.118.0",
+    "tsx": "^4.21.0"
+  }
+}

package/templates/pieces/vscode/universal/apps/__NAME__/vite.config.vscode.ts

@@ -0,0 +1,17 @@
+// Vite config for the VS Code target — extension host + Tamagui webview
+// built from vscode/ into dist-vscode/, where vscode/manifest.ts drops the
+// vsce package.json. The heavy lifting (workspace source aliases, one→seam
+// alias, React dedupe, @tomjs/vite-plugin-vscode wiring) lives in
+// @multiplatform.one/vite-plugin-vscode.
+
+import { resolve } from "node:path";
+import { createVscodeConfig } from "@multiplatform.one/vite-plugin-vscode";
+import { defineConfig } from "vite";
+
+export default defineConfig(async () =>
+  createVscodeConfig({
+    targetDir: resolve(import.meta.dirname, "vscode"),
+    outDir: resolve(import.meta.dirname, "dist-vscode"),
+    tamaguiConfig: resolve(import.meta.dirname, "config/tamagui.config.ts"),
+  }),
+);

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/extension/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@tomjs/vite-plugin-vscode/env" />

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/extension/index.ts

@@ -0,0 +1,13 @@
+import type { ExtensionContext } from "vscode";
+import { commands } from "vscode";
+import { MainPanel } from "./views/panel";
+
+export function activate(context: ExtensionContext) {
+  context.subscriptions.push(
+    commands.registerCommand("__NAME__.showApp", async () => {
+      MainPanel.render(context);
+    }),
+  );
+}
+
+export function deactivate() {}

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/extension/views/helper.ts

@@ -0,0 +1,14 @@
+import type { ExtensionContext, Webview } from "vscode";
+// The plugin resolves `virtual:vscode` at build time to a module embedding
+// the built webview HTML (CSP + nonce + asWebviewUri asset rewriting).
+import { getWebviewHtml } from "virtual:vscode";
+
+export class WebviewHelper {
+  public static setupHtml(webview: Webview, context: ExtensionContext) {
+    return getWebviewHtml(
+      process.env.VITE_DEV_SERVER_URL
+        ? { serverUrl: process.env.VITE_DEV_SERVER_URL, webview, context }
+        : { webview, context },
+    );
+  }
+}

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/extension/views/panel.ts

@@ -0,0 +1,38 @@
+import type { Disposable, ExtensionContext, WebviewPanel } from "vscode";
+import { ViewColumn, window } from "vscode";
+import { WebviewHelper } from "./helper";
+
+export class MainPanel {
+  public static currentPanel: MainPanel | undefined;
+  private readonly _panel: WebviewPanel;
+  private _disposables: Disposable[] = [];
+
+  private constructor(panel: WebviewPanel, context: ExtensionContext) {
+    this._panel = panel;
+    this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
+    this._panel.webview.html = WebviewHelper.setupHtml(this._panel.webview, context);
+  }
+
+  public static render(context: ExtensionContext) {
+    if (MainPanel.currentPanel) {
+      MainPanel.currentPanel._panel.reveal(ViewColumn.One);
+    } else {
+      const panel = window.createWebviewPanel("__NAME__.app", "__NAME_PASCAL__", ViewColumn.One, {
+        enableScripts: true,
+      });
+      MainPanel.currentPanel = new MainPanel(panel, context);
+    }
+  }
+
+  /** Clean up webview resources when the panel is closed. */
+  public dispose() {
+    MainPanel.currentPanel = undefined;
+    this._panel.dispose();
+    while (this._disposables.length) {
+      const disposable = this._disposables.pop();
+      if (disposable) {
+        disposable.dispose();
+      }
+    }
+  }
+}

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/index.html

@@ -0,0 +1,49 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__NAME_PASCAL__</title>
+    <style>
+      /* Critical reset — matches the web app shell's inline reset */
+      html {
+        max-width: 100vw;
+      }
+      body {
+        overflow-x: hidden;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        min-width: 100%;
+        min-height: 100vh;
+      }
+      #root {
+        display: flex;
+        flex-direction: column;
+        min-width: 100%;
+        min-height: 100vh;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      a {
+        color: inherit;
+        text-decoration: none;
+      }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/webview/main.tsx"></script>
+  </body>
+</html>

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/manifest.ts

@@ -0,0 +1,33 @@
+// Stage the VS Code extension manifest after `pnpm build:vscode`: a VS Code
+// extension's package.json IS its manifest, and the app's own package.json
+// is a One/Expo app manifest — so `vsce package` runs against dist-vscode/
+// with this generated one (same pattern as the webext target's generated
+// manifest.json).
+
+import { resolve } from "node:path";
+import { writeVsceManifest } from "@multiplatform.one/vite-plugin-vscode";
+
+const stagingDir = resolve(import.meta.dirname, "../dist-vscode");
+
+await writeVsceManifest(stagingDir, {
+  name: "__NAME__",
+  displayName: "__NAME_PASCAL__",
+  publisher: "__NAME__",
+  version: "0.0.0",
+  description: "__NAME__ VS Code extension",
+  // The extension host builds ESM (the app is type:module) — supported
+  // since VS Code 1.100.
+  type: "module",
+  engines: { vscode: "^1.100.0" },
+  activationEvents: [],
+  contributes: {
+    commands: [
+      {
+        command: "__NAME__.showApp",
+        title: "__NAME_PASCAL__: Show App",
+      },
+    ],
+  },
+});
+
+console.log(`[vscode] staged extension manifest → ${stagingDir}/package.json`);

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@app/__NAME__-vscode-target",
+  "private": true,
+  "description": "Build-time marker for the VS Code target: @tomjs/vite-plugin-vscode reads the nearest package.json (cwd) for `main` (presence check) and `type` (esm/cjs extension-host format). NOT a workspace package (apps/* only matches apps/__NAME__) and NOT the extension manifest — that is generated into dist-vscode by vscode/manifest.ts. The app's own package.json cannot carry `main`: Expo/Metro would treat it as the native app entry.",
+  "type": "module",
+  "main": "dist/extension/index.js"
+}

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/tamagui.css

@@ -0,0 +1,3 @@
+/* Generated by @tamagui/vite-plugin (outputCSS). This stub keeps the
+   `import "../tamagui.css"` in webview/main.tsx resolvable on a fresh
+   scaffold; dev/build regenerate it. */

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["node", "vscode", "vite/client"]
+  },
+  "include": ["**/*"],
+  "exclude": ["**/node_modules/**"]
+}

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/webview/app.tsx

@@ -0,0 +1,24 @@
+import { CookiesProvider } from "react-cookie";
+import { AppProvider } from "../../src/app";
+import { ErrorBoundary } from "./components/ErrorBoundary";
+import { AppRoutes, initialRoute } from "./router";
+import { useVSCodeTheme } from "./useVSCodeTheme";
+
+export function App() {
+  // VS Code's theme kind drives the house ThemeProvider scheme, so the
+  // webview follows the editor's light/dark theme live.
+  const scheme = useVSCodeTheme();
+
+  return (
+    <ErrorBoundary>
+      {/* Webview pages don't go through createRootLayout, which normally
+          provides cookies (ThemeProvider's useCookies throws without it) —
+          same fix as the webext extension pages. */}
+      <CookiesProvider>
+        <AppProvider systemTheme={scheme}>
+          <AppRoutes initialHref={initialRoute()} />
+        </AppProvider>
+      </CookiesProvider>
+    </ErrorBoundary>
+  );
+}

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/webview/components/ErrorBoundary.tsx

@@ -0,0 +1,41 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+
+/**
+ * Plain-DOM error boundary (same pattern as the webext target): it must
+ * render without Tamagui so a failure inside the provider stack itself still
+ * surfaces a readable error instead of a blank webview.
+ */
+export class ErrorBoundary extends Component<
+  { children: ReactNode },
+  { hasError: boolean; error: Error | null; errorInfo: ErrorInfo | null }
+> {
+  constructor(props: { children: ReactNode }) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.setState({ error, errorInfo });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: 16, color: "red" }}>
+          <h2>Something went wrong</h2>
+          <details style={{ whiteSpace: "pre-wrap", marginTop: 16 }}>
+            <summary>Error Details</summary>
+            {this.state.error?.toString()}
+            <br />
+            {this.state.errorInfo?.componentStack}
+          </details>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/webview/fonts.css

@@ -0,0 +1,21 @@
+/*
+ * Inter must be declared in CSS that ships as a real asset: the webview
+ * rewrites <link href> to vscode-resource URIs, and url() inside the emitted
+ * stylesheet resolves relative to that stylesheet — inline <style> in the
+ * webview HTML would resolve against the vscode-webview:// document instead.
+ * Same woff2 binaries as @tamagui/font-inter (identical metrics).
+ */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/inter-400.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./fonts/inter-700.woff2") format("woff2");
+}

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/webview/main.tsx

@@ -0,0 +1,35 @@
+import "./fonts.css";
+import "../tamagui.css";
+import "@tamagui/core/reset.css";
+import {
+  createI18nConfig,
+  defaultLanguage,
+  defaultNamespace,
+  languages,
+  namespaces,
+} from "@package/i18n";
+import { resources } from "@package/i18n/resources";
+import i18next from "i18next";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { initReactI18next } from "react-i18next";
+import { App } from "./app";
+
+// Initialize i18n synchronously before React renders: the webview has no One
+// server runtime, so translations come purely from the bundled resources.
+i18next.use(initReactI18next).init(
+  createI18nConfig({
+    languages: [...languages],
+    namespaces: [...namespaces],
+    defaultLanguage,
+    defaultNamespace,
+    resources,
+  }),
+);
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/webview/router.tsx

@@ -0,0 +1,58 @@
+// The webview runs the shared feature screens over the stack-navigation
+// seam (@multiplatform.one/router/seam): a webview has no address bar and
+// no One server runtime, so One's file-based routes/loaders don't apply —
+// the seam backs the SAME `one` router API (aliased in
+// vite.config.vscode.ts) with a DOM page stack. AppLayout and the screens
+// are the exact modules the web/native app mounts.
+
+import { AboutScreen, AppLayout, HomeScreen } from "@features/__NAME__";
+import { DomNavigationHost, stackNavigator } from "@multiplatform.one/router/seam";
+import { usePathname } from "one";
+import { useEffect } from "react";
+import { vscode } from "./utils/vscode";
+
+export const ROUTES = [
+  { pattern: "/", tag: "home", title: "Home" },
+  { pattern: "/about", tag: "about", title: "About" },
+];
+
+stackNavigator.configure(ROUTES);
+
+/** Restore the route persisted through the webview host (reopening the
+ *  panel / a VS Code reload). */
+export function initialRoute(): string {
+  const state = vscode.getState();
+  if (
+    state &&
+    typeof state === "object" &&
+    typeof (state as { route?: unknown }).route === "string"
+  ) {
+    return (state as { route: string }).route;
+  }
+  return "/";
+}
+
+function RoutePersistence() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    vscode.setState({ route: pathname });
+  }, [pathname]);
+
+  return null;
+}
+
+export function AppRoutes({ initialHref }: { initialHref?: string }) {
+  return (
+    <AppLayout>
+      <RoutePersistence />
+      <DomNavigationHost
+        initialHref={initialHref}
+        routes={[
+          { ...ROUTES[0]!, element: <HomeScreen /> },
+          { ...ROUTES[1]!, element: <AboutScreen /> },
+        ]}
+      />
+    </AppLayout>
+  );
+}

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/webview/useVSCodeTheme.ts

@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+
+export type VSCodeScheme = "light" | "dark";
+
+/**
+ * Resolve the house theme scheme from the VS Code webview host.
+ *
+ * VS Code stamps the webview <body> with a theme class
+ * (`vscode-light` | `vscode-dark` | `vscode-high-contrast`) and a
+ * `data-vscode-theme-kind` attribute. Outside VS Code (browser harness, dev
+ * preview) neither exists, so fall back to `prefers-color-scheme`.
+ */
+function readScheme(): VSCodeScheme {
+  if (typeof document === "undefined") return "light";
+  const body = document.body;
+  const kind = body?.dataset?.vscodeThemeKind;
+  if (kind) return kind.includes("light") ? "light" : "dark";
+  if (body?.classList.contains("vscode-high-contrast-light")) return "light";
+  if (body?.classList.contains("vscode-light")) return "light";
+  if (body?.classList.contains("vscode-dark") || body?.classList.contains("vscode-high-contrast")) {
+    return "dark";
+  }
+  if (
+    typeof window !== "undefined" &&
+    window.matchMedia?.("(prefers-color-scheme: dark)").matches
+  ) {
+    return "dark";
+  }
+  return "light";
+}
+
+/**
+ * Live VS Code theme scheme: VS Code mutates the body class/data attributes
+ * in place when the user switches color themes, so a MutationObserver keeps
+ * the scheme in sync without extension-host message plumbing.
+ */
+export function useVSCodeTheme(): VSCodeScheme {
+  const [scheme, setScheme] = useState<VSCodeScheme>(readScheme);
+
+  useEffect(() => {
+    const update = () => setScheme(readScheme());
+    const observer = new MutationObserver(update);
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["class", "data-vscode-theme-kind"],
+    });
+    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+    mq?.addEventListener("change", update);
+    return () => {
+      observer.disconnect();
+      mq?.removeEventListener("change", update);
+    };
+  }, []);
+
+  return scheme;
+}

package/templates/pieces/vscode/universal/apps/__NAME__/vscode/webview/utils/vscode.ts

@@ -0,0 +1,16 @@
+// `acquireVsCodeApi` is injected by the VS Code webview host. When the
+// webview is opened directly in a browser (dev preview), it doesn't exist —
+// fall back to a noop stub so the page can still render.
+declare function acquireVsCodeApi(): {
+  postMessage: (msg: unknown) => void;
+  setState: (state: unknown) => void;
+  getState: () => unknown;
+};
+
+const stub = {
+  postMessage: () => {},
+  setState: () => {},
+  getState: () => undefined,
+};
+
+export const vscode = typeof acquireVsCodeApi === "function" ? acquireVsCodeApi() : stub;

package/templates/pieces/vscode/universal/gitignore.partial

@@ -0,0 +1,2 @@
+# vscode piece (mpo init --vscode): staged extension host + webview
+dist-vscode

package/templates/pieces/vscode/universal/package.json.partial

@@ -0,0 +1,6 @@
+{
+  "scripts": {
+    "vscode": "pnpm --filter @app/__NAME__ dev:vscode",
+    "build:vscode": "pnpm --filter @app/__NAME__ build:vscode"
+  }
+}

package/templates/pieces/webext/universal/README.md.partial

@@ -0,0 +1,16 @@
+## Browser extension (`mpo init --webext`)
+
+`apps/__NAME__/webext/` is an MV3 extension target (popup + background) that
+mounts the same `features/__NAME__` screens as the web app — extension pages
+have no One server runtime, so the `one` router API rides the
+stack-navigation seam (`@multiplatform.one/router/seam`).
+
+```bash
+pnpm build:webext   # stage a loadable extension into apps/__NAME__/dist-webext
+pnpm webext         # dev loop: manifest watcher + background watch + views HMR
+```
+
+Load `apps/__NAME__/dist-webext` as an unpacked extension
+(chrome://extensions → Developer mode → Load unpacked; Firefox loads it via
+about:debugging). The manifest lives in code at
+`apps/__NAME__/webext/manifest.ts`.

package/templates/pieces/webext/universal/apps/__NAME__/package.json.partial

@@ -0,0 +1,22 @@
+{
+  "scripts": {
+    "dev:webext": "NODE_ENV=development sh -c 'tsx webext/prepare.ts & vite build --config vite.config.webext-background.ts --mode development & vite --config vite.config.webext.ts & wait'",
+    "build:webext": "vite build --config vite.config.webext.ts && vite build --config vite.config.webext-background.ts && NODE_ENV=production tsx webext/prepare.ts",
+    "typecheck:webext": "tsc --noEmit -p webext/tsconfig.json"
+  },
+  "dependencies": {
+    "@multiplatform.one/router": "__MPO_VERSION__",
+    "react-cookie": "^8.1.2",
+    "webextension-polyfill": "^0.12.0"
+  },
+  "devDependencies": {
+    "@multiplatform.one/utils": "__MPO_VERSION__",
+    "@multiplatform.one/vite-plugin-webext": "__MPO_VERSION__",
+    "@tamagui/vite-plugin": "2.0.0-rc.41",
+    "@tamagui/web": "2.0.0-rc.41",
+    "@types/chrome": "^0.2.5",
+    "@types/node": "^25.6.0",
+    "dotenv": "^17.4.2",
+    "tsx": "^4.21.0"
+  }
+}

package/templates/pieces/webext/universal/apps/__NAME__/tsconfig.json.partial

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "types": ["node"]
+  }
+}

package/templates/pieces/webext/universal/apps/__NAME__/vite.config.webext-background.ts

@@ -0,0 +1,19 @@
+// Vite config for the webext background target (MV3 service worker on
+// chromium, background script on firefox) — see vite.config.webext.ts.
+
+import { resolve } from "node:path";
+import { createWebextBackgroundConfig } from "@multiplatform.one/vite-plugin-webext";
+import { defineConfig } from "vite";
+import packageJson from "./package.json";
+import { isDev, port } from "./webext/env";
+
+export default defineConfig(
+  createWebextBackgroundConfig({
+    targetDir: resolve(import.meta.dirname, "webext"),
+    stagingDir: resolve(import.meta.dirname, "dist-webext"),
+    tamaguiConfig: resolve(import.meta.dirname, "config/tamagui.config.ts"),
+    packageInfo: packageJson,
+    isDev,
+    port,
+  }),
+);