@zenbu-labs/pixel 0.0.0 → 0.0.13

package/dist/bin.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/bin.js

@@ -0,0 +1,161 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_child_process_1 = require("node:child_process");
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_os_1 = __importDefault(require("node:os"));
+const node_path_1 = __importDefault(require("node:path"));
+const instances_1 = require("./instances");
+const sandbox_1 = require("./sandbox");
+const terminal_1 = require("./terminal");
+function fail(message) {
+    process.stderr.write(`pixel: ${message}\n`);
+    process.exit(1);
+}
+function resolveEntry(given) {
+    const target = node_path_1.default.resolve(given);
+    if (node_fs_1.default.existsSync(target) && node_fs_1.default.statSync(target).isDirectory()) {
+        const manifest = node_path_1.default.join(target, "package.json");
+        let main = "index.js";
+        if (node_fs_1.default.existsSync(manifest)) {
+            const parsed = JSON.parse(node_fs_1.default.readFileSync(manifest, "utf8"));
+            if (parsed.main)
+                main = parsed.main;
+        }
+        const entry = node_path_1.default.join(target, main);
+        if (!node_fs_1.default.existsSync(entry)) {
+            fail(`[placeholder copy: ${entry} does not exist. Build your app or point "main" in package.json at the built entry.]`);
+        }
+        return entry;
+    }
+    if (!node_fs_1.default.existsSync(target))
+        fail(`[placeholder copy: no such file ${target}]`);
+    return target;
+}
+function appName(dir) {
+    try {
+        const parsed = JSON.parse(node_fs_1.default.readFileSync(node_path_1.default.join(dir, "package.json"), "utf8"));
+        if (parsed.name)
+            return parsed.name.replace(/^@/, "").replace("/", "-");
+    }
+    catch { }
+    return node_path_1.default.basename(dir);
+}
+function appDir(entry) {
+    for (let dir = node_path_1.default.dirname(entry);; dir = node_path_1.default.dirname(dir)) {
+        if (node_fs_1.default.existsSync(node_path_1.default.join(dir, "package.json")))
+            return dir;
+        if (node_path_1.default.dirname(dir) === dir)
+            return node_path_1.default.dirname(entry);
+    }
+}
+function electronBinary() {
+    const dist = node_path_1.default.resolve(__dirname, "..", "electron", "dist");
+    if (!node_fs_1.default.existsSync(node_path_1.default.join(dist, ".zenbu-electron-sha256"))) {
+        fail("[placeholder copy: the patched electron build is not installed. Run `node node_modules/@zenbu-labs/pixel/scripts/postinstall.mjs` (npm normally runs it for you on install).]");
+    }
+    return process.platform === "darwin"
+        ? node_path_1.default.join(dist, "Electron.app", "Contents", "MacOS", "pixel")
+        : node_path_1.default.join(dist, "pixel");
+}
+function logFile(appDir) {
+    const state = process.env.XDG_STATE_HOME ?? node_path_1.default.join(node_os_1.default.homedir(), ".local", "state");
+    const dir = node_path_1.default.join(state, "pixel", "logs");
+    node_fs_1.default.mkdirSync(dir, { recursive: true });
+    return node_path_1.default.join(dir, `${node_path_1.default.basename(appDir)}.stderr.log`);
+}
+function ownTty() {
+    try {
+        const out = (0, node_child_process_1.execFileSync)("tty", { stdio: ["inherit", "pipe", "ignore"], encoding: "utf8" }).trim();
+        if (out.startsWith("/dev/"))
+            return out;
+    }
+    catch { }
+    return fail("[placeholder copy: could not work out which tty this shell is on]");
+}
+async function main() {
+    const args = process.argv.slice(2);
+    const passthrough = args.indexOf("--");
+    const own = passthrough < 0 ? args : args.slice(0, passthrough);
+    const appArgs = passthrough < 0 ? [] : args.slice(passthrough + 1);
+    if (own.includes("--help") || own.includes("-h")) {
+        process.stdout.write("[placeholder copy: usage: pixel [entry|dir] [-- app args]\n  Runs an app's main file inside the pixel runtime, in this terminal pane.]\n");
+        return 0;
+    }
+    const stray = own.slice(1).find((arg) => arg.startsWith("-")) ?? own.find((arg) => arg.startsWith("-"));
+    if (stray) {
+        fail(`[placeholder copy: unknown option ${stray}. pixel takes an entry and nothing else; put your app's arguments after --]`);
+    }
+    if (own.length > 1)
+        fail(`[placeholder copy: unexpected ${own[1]}; put your app's arguments after --]`);
+    const entry = resolveEntry(own[0] ?? ".");
+    const tty = process.env.PIXEL_TTY ?? ownTty();
+    const owner = (0, instances_1.findOwner)(tty);
+    const announced = owner ? (0, instances_1.announceGuest)(owner, appName(appDir(entry))) : null;
+    if (!owner && !process.env.PIXEL_EMBED) {
+        if (!process.stdin.isTTY || !process.stdout.isTTY) {
+            fail("[placeholder copy: pixel draws into the terminal, so it needs to run on a tty]");
+        }
+        const check = await (0, terminal_1.checkTerminal)((0, terminal_1.detect)());
+        if (check.graphics === "unsupported") {
+            process.stderr.write((0, terminal_1.unsupportedGraphicsMessage)(process.stderr.isTTY === true));
+            return 1;
+        }
+    }
+    const electron = electronBinary();
+    const chromiumArgs = [];
+    if (process.platform === "linux") {
+        let sandboxError = (0, sandbox_1.linuxSandboxError)(electron);
+        if (sandboxError) {
+            (0, sandbox_1.apparmorSetup)(electron);
+            sandboxError = (0, sandbox_1.linuxSandboxError)(electron);
+        }
+        if (sandboxError)
+            fail(sandboxError);
+        // headless ozone reports a 1x1 screen unless told otherwise:
+        // https://source.chromium.org/chromium/chromium/src/+/refs/tags/150.0.7871.212:ui/ozone/platform/headless/headless_screen.cc;l=37-46
+        if (!process.env.DISPLAY && !process.env.WAYLAND_DISPLAY) {
+            chromiumArgs.push("--ozone-platform=headless", "--screen-info={8192x8192}");
+        }
+    }
+    const bootstrap = node_path_1.default.join(__dirname, "bootstrap.js");
+    const env = { ...process.env };
+    delete env.ELECTRON_RUN_AS_NODE;
+    env.PIXEL_TTY = tty;
+    if (announced)
+        env.PIXEL_PANE = announced.pane;
+    else
+        delete env.PIXEL_PANE;
+    const stderr = node_fs_1.default.openSync(logFile(appDir(entry)), "a");
+    const child = (0, node_child_process_1.spawn)(electron, [bootstrap, entry, ...chromiumArgs, ...appArgs], {
+        stdio: ["inherit", "inherit", stderr],
+        env,
+    });
+    const forward = (signal) => () => {
+        try {
+            child.kill(signal);
+        }
+        catch { }
+        setTimeout(() => {
+            try {
+                child.kill("SIGKILL");
+            }
+            catch { }
+        }, 2000).unref();
+    };
+    for (const signal of ["SIGINT", "SIGTERM", "SIGHUP"])
+        process.on(signal, forward(signal));
+    const exited = await new Promise((resolve) => {
+        child.on("error", (error) => {
+            process.stderr.write(`pixel: could not start electron: ${error.message}\n`);
+            resolve(1);
+        });
+        child.on("exit", (code, signal) => resolve(code ?? (signal ? 128 : 0)));
+    });
+    await (0, instances_1.waitForOwners)(tty);
+    return exited;
+}
+void main().then((code) => process.exit(code), (error) => fail(error instanceof Error ? error.message : String(error)));

package/dist/bootstrap.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/bootstrap.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_net_1 = __importDefault(require("node:net"));
+const node_path_1 = __importDefault(require("node:path"));
+const electron_1 = require("electron");
+const debug_1 = require("./debug");
+const entry = process.argv[2];
+if (!entry) {
+    process.stderr.write("pixel bootstrap: missing entry path\n");
+    electron_1.app.exit(2);
+}
+function appName() {
+    for (let dir = node_path_1.default.dirname(node_path_1.default.resolve(entry));; dir = node_path_1.default.dirname(dir)) {
+        const candidate = node_path_1.default.join(dir, "package.json");
+        if (node_fs_1.default.existsSync(candidate)) {
+            try {
+                const name = JSON.parse(node_fs_1.default.readFileSync(candidate, "utf8")).name;
+                if (name)
+                    return name.replace(/^@/, "").replace("/", "-");
+            }
+            catch { }
+        }
+        if (node_path_1.default.dirname(dir) === dir)
+            return "pixel-app";
+    }
+}
+function freePort() {
+    return new Promise((resolve) => {
+        const probe = node_net_1.default.createServer();
+        probe.once("error", () => resolve(null));
+        probe.listen(0, "127.0.0.1", () => {
+            const address = probe.address();
+            probe.close(() => resolve(address && typeof address === "object" ? address.port : null));
+        });
+    });
+}
+process.on("uncaughtException", (error) => {
+    process.stderr.write(`pixel: uncaught exception: ${error instanceof Error ? error.stack : String(error)}\n`);
+    electron_1.app.exit(1);
+});
+process.on("unhandledRejection", (reason) => {
+    process.stderr.write(`pixel: unhandled rejection: ${reason instanceof Error ? reason.stack : String(reason)}\n`);
+});
+electron_1.app.setName(appName());
+electron_1.app.commandLine.appendSwitch("disable-renderer-backgrounding");
+electron_1.app.commandLine.appendSwitch("disable-background-timer-throttling");
+electron_1.app.commandLine.appendSwitch("disable-backgrounding-occluded-windows");
+if (process.env.PIXEL_DISABLE_GPU === "1")
+    electron_1.app.commandLine.appendSwitch("disable-gpu");
+try {
+    const logs = electron_1.app.getPath("logs");
+    node_fs_1.default.mkdirSync(logs, { recursive: true });
+    electron_1.app.commandLine.appendSwitch("enable-logging", "file");
+    electron_1.app.commandLine.appendSwitch("log-file", node_path_1.default.join(logs, "chromium.log"));
+}
+catch { }
+void (async () => {
+    const port = await freePort();
+    if (port != null)
+        electron_1.app.commandLine.appendSwitch("remote-debugging-port", String(port));
+    await electron_1.app.whenReady();
+    (0, debug_1.debug)("bootstrap", { entry, tty: process.env.PIXEL_TTY ?? null });
+    if (process.platform === "darwin")
+        electron_1.app.dock?.hide();
+    const chromiumSwitch = (arg) => arg.startsWith("--ozone-platform=") || arg.startsWith("--screen-info=");
+    process.argv = [process.argv[0], node_path_1.default.resolve(entry), ...process.argv.slice(3).filter((arg) => !chromiumSwitch(arg))];
+    require(node_path_1.default.resolve(entry));
+})().catch((error) => {
+    process.stderr.write(`${error instanceof Error ? error.stack : String(error)}\n`);
+    electron_1.app.exit(1);
+});

package/dist/context-menu.d.ts

@@ -0,0 +1,20 @@
+import type { Theme } from "./theme";
+export interface MenuItem {
+    id: string;
+    label: string;
+    enabled: boolean;
+    shortcut: string;
+}
+export declare function ContextMenu({ x, y, bounds, items, rem, theme, onAction, onClose, }: {
+    x: number;
+    y: number;
+    bounds: {
+        width: number;
+        height: number;
+    };
+    items: MenuItem[];
+    rem: number;
+    theme: Theme;
+    onAction(id: string): void;
+    onClose(): void;
+}): import("react").JSX.Element;

package/dist/context-menu.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenu = ContextMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("./react");
+function ContextMenu({ x, y, bounds, items, rem, theme, onAction, onClose, }) {
+    const rowH = Math.round(rem * 1.55);
+    const charW = rem * 0.82 * 0.6;
+    const shortcutW = rem * 0.72 * 0.6;
+    const width = Math.round(items.reduce((widest, item) => {
+        let row = rem * 1.4 + item.label.length * charW;
+        if (item.shortcut)
+            row += rem * 0.6 + item.shortcut.length * shortcutW;
+        return Math.max(widest, row);
+    }, rem * 9));
+    const height = items.length * rowH;
+    const left = Math.max(2, Math.min(x, bounds.width - width - 4));
+    const top = Math.max(2, Math.min(y, bounds.height - height - 4));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { style: {
+            position: "absolute",
+            inset: { top, left },
+            width,
+            flexDirection: "column",
+            background: theme.field,
+            cornerRadius: rem * 0.45,
+            border: { width: 1, color: theme.fieldBorder },
+            overflow: "hidden",
+        }, onClickOutside: onClose, children: items.map((item, i) => ((0, jsx_runtime_1.jsx)(MenuRow, { item: item, rowH: rowH, rem: rem, theme: theme, onAction: onAction, first: i === 0, last: i === items.length - 1 }, item.id))) }));
+}
+function MenuRow({ item, rowH, rem, theme, onAction, first, last, }) {
+    const radius = Math.max(2, rem * 0.45 - 1);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { style: {
+            height: rowH,
+            alignItems: "center",
+            padding: { left: rem * 0.7, right: rem * 0.7 },
+            hoverBackground: item.enabled ? theme.hover : undefined,
+            cornerRadius: {
+                topLeft: first ? radius : 0,
+                topRight: first ? radius : 0,
+                bottomLeft: last ? radius : 0,
+                bottomRight: last ? radius : 0,
+            },
+            flexShrink: 0,
+        }, onClick: item.enabled ? () => onAction(item.id) : undefined, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { style: {
+                    flexGrow: 1,
+                    flexBasis: 0,
+                    fontSize: rem * 0.82,
+                    color: item.enabled ? theme.fg : theme.disabled,
+                    wrap: false,
+                    selectable: false,
+                }, children: item.label }), item.shortcut && ((0, jsx_runtime_1.jsx)(react_1.Text, { style: {
+                    fontSize: rem * 0.72,
+                    color: item.enabled ? theme.muted : theme.disabled,
+                    wrap: false,
+                    selectable: false,
+                }, children: item.shortcut }))] }));
+}

package/dist/debug.d.ts

@@ -0,0 +1 @@
+export declare function debug(...parts: unknown[]): void;

package/dist/debug.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.debug = debug;
+const enabled = process.env.PIXEL_DEBUG === "1";
+function debug(...parts) {
+    if (!enabled)
+        return;
+    process.stderr.write(`[pixel] ${parts.map((p) => (typeof p === "string" ? p : JSON.stringify(p))).join(" ")}\n`);
+}

package/dist/devtools-layout.d.ts

@@ -0,0 +1,21 @@
+import type { DevtoolsDock } from "./web/types";
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface DevtoolsPlacement {
+    dock: DevtoolsDock;
+    fraction: number;
+}
+export declare function clampDevtoolsFraction(value: number): number;
+export declare function dividerFraction(page: Rect, devtools: Rect & {
+    dock: DevtoolsDock;
+}, x: number, y: number): number;
+export declare function splitForDevtools(page: Rect, placement: DevtoolsPlacement | null, gap: number): {
+    page: Rect;
+    devtools: (Rect & {
+        dock: DevtoolsDock;
+    }) | null;
+};

package/dist/devtools-layout.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clampDevtoolsFraction = clampDevtoolsFraction;
+exports.dividerFraction = dividerFraction;
+exports.splitForDevtools = splitForDevtools;
+function clampDevtoolsFraction(value) {
+    return Math.max(0.15, Math.min(0.85, value));
+}
+function dividerFraction(page, devtools, x, y) {
+    const fraction = devtools.dock === "bottom"
+        ? (devtools.y + devtools.height - y) / (devtools.y + devtools.height - page.y)
+        : (devtools.x + devtools.width - x) / (devtools.x + devtools.width - page.x);
+    return clampDevtoolsFraction(fraction);
+}
+function splitForDevtools(page, placement, gap) {
+    if (!placement)
+        return { page, devtools: null };
+    const fraction = clampDevtoolsFraction(placement.fraction);
+    if (placement.dock === "bottom") {
+        const devtoolsHeight = Math.round(page.height * fraction);
+        const pageHeight = Math.max(1, page.height - devtoolsHeight - gap);
+        return {
+            page: { ...page, height: pageHeight },
+            devtools: {
+                x: page.x,
+                y: page.y + pageHeight + gap,
+                width: page.width,
+                height: Math.max(1, devtoolsHeight),
+                dock: "bottom",
+            },
+        };
+    }
+    const devtoolsWidth = Math.round(page.width * fraction);
+    const pageWidth = Math.max(1, page.width - devtoolsWidth - gap);
+    return {
+        page: { ...page, width: pageWidth },
+        devtools: {
+            x: page.x + pageWidth + gap,
+            y: page.y,
+            width: Math.max(1, devtoolsWidth),
+            height: page.height,
+            dock: "right",
+        },
+    };
+}

package/dist/devtools.d.ts

@@ -0,0 +1,33 @@
+import type { RefObject } from "react";
+import type { Rect } from "./devtools-layout";
+import type { DragEvent, PointerEvent, Style, Surface, WheelEvent } from "./react";
+import type { Theme } from "./theme";
+import type { DevtoolsDock } from "./web/types";
+import type { WebViewHandle } from "./webview";
+export declare function DevtoolsDockPane({ rect, dock, rem, theme, surface, dividerEngaged, onPointer, onWheel, onHover, onDividerDrag, onDividerHover, }: {
+    rect: Rect;
+    dock: DevtoolsDock;
+    rem: number;
+    theme: Theme;
+    surface: Surface;
+    dividerEngaged: boolean;
+    onPointer(event: PointerEvent): void;
+    onWheel(event: WheelEvent): void;
+    onHover(hovering: boolean): void;
+    onDividerDrag(event: DragEvent): void;
+    onDividerHover(hovering: boolean): void;
+}): import("react").JSX.Element;
+export interface DevToolsProps {
+    /** [placeholder copy: The WebView to inspect, as the ref you gave it or the handle itself.] */
+    target: RefObject<WebViewHandle | null> | WebViewHandle;
+    style?: Style;
+    dock?: DevtoolsDock;
+    /** [placeholder copy: Devtools panel to show once open, for example "console" or "elements".] */
+    panel?: string;
+    /** [placeholder copy: The devtools toolbar asked to close or to dock elsewhere. Unmount or change dock in response.] */
+    onAction?(action: "close" | "dock-bottom" | "dock-right"): void;
+    /** [placeholder copy: Keep showing the last frame, stretched, while the pane changes size instead of clearing until devtools repaint. Defaults to true.] */
+    keepFrame?: boolean;
+}
+/** [placeholder copy: Renders a WebView's devtools wherever this sits in the tree. Mounting opens them, unmounting closes them.] */
+export declare function DevTools({ target, style, dock, panel, onAction, keepFrame }: DevToolsProps): import("react").JSX.Element;

package/dist/devtools.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DevtoolsDockPane = DevtoolsDockPane;
+exports.DevTools = DevTools;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const layout_1 = require("./layout");
+const react_2 = require("./react");
+const registry_1 = require("./registry");
+const types_1 = require("./web/types");
+const DIVIDER_ACTIVE = [58, 96, 168, 255];
+const DIVIDER_GRIP = [118, 122, 132, 255];
+function DevtoolsDockPane({ rect, dock, rem, theme, surface, dividerEngaged, onPointer, onWheel, onHover, onDividerDrag, onDividerHover, }) {
+    const horizontal = dock === "bottom";
+    const grab = Math.max(8, Math.round(rem * 0.5));
+    const divider = horizontal
+        ? { x: rect.x, y: rect.y - grab + 2, width: rect.width, height: grab }
+        : { x: rect.x - grab + 2, y: rect.y, width: grab, height: rect.height };
+    const gripAlong = (offset) => horizontal
+        ? { top: Math.round(divider.height / 2) - 1, left: Math.round(divider.width / 2) + offset - 1 }
+        : { top: Math.round(divider.height / 2) + offset - 1, left: Math.round(divider.width / 2) - 1 };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { surface: surface, style: {
+                    position: "absolute",
+                    inset: { top: rect.y, left: rect.x },
+                    width: rect.width,
+                    height: rect.height,
+                    background: theme.bg,
+                }, onPointer: onPointer, onWheel: onWheel, onMouseEnter: () => onHover(true), onMouseLeave: () => onHover(false) }), (0, jsx_runtime_1.jsx)(react_2.Box, { style: {
+                    position: "absolute",
+                    inset: { top: divider.y, left: divider.x },
+                    width: divider.width,
+                    height: divider.height,
+                    background: dividerEngaged ? [...DIVIDER_ACTIVE] : undefined,
+                    cornerRadius: 2,
+                }, onDrag: onDividerDrag, onMouseEnter: () => onDividerHover(true), onMouseLeave: () => onDividerHover(false), children: [-7, 0, 7].map((offset) => ((0, jsx_runtime_1.jsx)(react_2.Box, { style: {
+                        position: "absolute",
+                        inset: gripAlong(offset),
+                        width: 2,
+                        height: 2,
+                        cornerRadius: 1,
+                        background: dividerEngaged ? [235, 238, 245, 255] : [...DIVIDER_GRIP],
+                    } }, offset))) })] }));
+}
+function resolveEntry(target) {
+    const handle = "current" in target ? target.current : target;
+    return handle ? registry_1.handleEntries.get(handle) ?? null : null;
+}
+/** [placeholder copy: Renders a WebView's devtools wherever this sits in the tree. Mounting opens them, unmounting closes them.] */
+function DevTools({ target, style, dock = "right", panel, onAction, keepFrame = true }) {
+    const registry = (0, react_1.useContext)(registry_1.RootContext);
+    if (!registry) {
+        throw new Error("[placeholder copy: <DevTools> has to be rendered by a root from pixel's createRoot()]");
+    }
+    const boxRef = (0, react_1.useRef)(null);
+    const rect = (0, layout_1.useNodeRect)(boxRef, registry);
+    const surface = (0, react_1.useRef)(null);
+    const opened = (0, react_1.useRef)(null);
+    const scale = registry.displayScale;
+    (0, react_1.useLayoutEffect)(() => {
+        surface.current = registry.root.createSurface();
+        return () => {
+            const entry = opened.current;
+            if (entry?.externalDevtools) {
+                entry.externalDevtools = false;
+                entry.externalDevtoolsAction = null;
+                entry.host?.closeDevtools();
+            }
+            opened.current = null;
+            surface.current?.close();
+            surface.current = null;
+        };
+    }, [registry]);
+    const size = rect ? (0, types_1.snapToCssGrid)(rect.width, rect.height, scale) : null;
+    (0, react_1.useEffect)(() => {
+        const entry = resolveEntry(target);
+        const host = entry?.host;
+        if (!entry || !host || !size || !surface.current)
+            return;
+        const layout = { x: 0, y: 0, width: size.width, height: size.height, scale };
+        if (opened.current !== entry && opened.current?.externalDevtools) {
+            opened.current.externalDevtools = false;
+            opened.current.host?.closeDevtools();
+        }
+        opened.current = entry;
+        entry.externalDevtoolsAction = (action) => onAction?.(action);
+        if (!host.devtools) {
+            entry.externalDevtools = true;
+            host.openDevtools(surface.current, layout, dock);
+            const opened = () => host.devtools;
+            if (panel)
+                opened()?.showPanel(panel);
+            return;
+        }
+        if (entry.externalDevtools)
+            host.devtools.resize(layout, { keepFrame });
+    });
+    (0, react_1.useEffect)(() => {
+        const host = resolveEntry(target)?.host;
+        if (panel && host?.devtools)
+            host.devtools.showPanel(panel);
+    }, [panel, target]);
+    (0, react_1.useEffect)(() => {
+        resolveEntry(target)?.host?.devtools?.setDock(dock);
+    }, [dock, target]);
+    const entry = resolveEntry(target);
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: boxRef, style: { ...style, overflow: "hidden" }, children: size && surface.current && ((0, jsx_runtime_1.jsx)(react_2.Box, { surface: surface.current, style: {
+                position: "absolute",
+                inset: { top: 0, left: 0 },
+                width: size.width,
+                height: size.height,
+                cornerRadius: style?.cornerRadius,
+            }, onPointer: (event) => {
+                const host = entry?.host;
+                if (!entry || !host?.devtools)
+                    return;
+                registry.focus(entry, "devtools");
+                host.devtools.input.pointer(event);
+            }, onWheel: (event) => {
+                const host = entry?.host;
+                if (!entry || !host?.devtools)
+                    return;
+                registry.focus(entry, "devtools");
+                host.devtools.input.wheel(event);
+            }, onMouseEnter: () => registry.setPointerShape(entry?.host?.devtools?.cursorShape ?? "default"), onMouseLeave: () => registry.setPointerShape("default") })) }));
+}

package/dist/electron/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="../../electron/electron.d.ts" preserve="true" />
+import electron = require("electron");
+export = electron;

package/dist/electron/index.js

@@ -0,0 +1,4 @@
+"use strict";
+/// <reference path="../../electron/electron.d.ts" preserve="true" />
+const electron = require("electron");
+module.exports = electron;

package/dist/host/guest.d.ts

@@ -0,0 +1,5 @@
+import type { Guest } from "./server";
+export declare function GuestView({ guest, active }: {
+    guest: Guest;
+    active: boolean;
+}): import("react").JSX.Element;