@zenbu-labs/pixel 0.0.0 → 0.0.13

package/dist/host/shell.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Shell = void 0;
+class Shell {
+    ownerLabel;
+    guests = [];
+    activeIndex = 0;
+    restoreFocus = null;
+    listeners = new Set();
+    snapshot = null;
+    constructor(ownerLabel) {
+        this.ownerLabel = ownerLabel;
+    }
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    };
+    get = () => {
+        if (!this.snapshot) {
+            this.snapshot = {
+                tabs: [
+                    { key: "owner", guest: null, label: this.ownerLabel() },
+                    ...this.guests.map((guest) => ({
+                        key: guest.pane,
+                        guest,
+                        label: guest.title || guest.name,
+                    })),
+                ],
+                active: this.activeIndex,
+            };
+        }
+        return this.snapshot;
+    };
+    get active() {
+        return this.activeIndex;
+    }
+    guestActive() {
+        return this.activeIndex > 0;
+    }
+    hasGuests() {
+        return this.guests.length > 0;
+    }
+    activeGuest() {
+        return this.guests[this.activeIndex - 1] ?? null;
+    }
+    add(guest) {
+        this.guests.push(guest);
+        guest.onTitle = () => this.changed();
+        this.activate(this.guests.length);
+    }
+    remove(guest) {
+        const at = this.guests.indexOf(guest);
+        if (at < 0)
+            return;
+        this.guests.splice(at, 1);
+        const wasActive = this.activeIndex === at + 1;
+        if (this.activeIndex > this.guests.length)
+            this.activeIndex = this.guests.length;
+        if (wasActive && this.activeIndex === 0)
+            this.restoreFocus?.();
+        this.changed();
+    }
+    onCloseOwner = null;
+    close(index) {
+        if (index === 0)
+            this.onCloseOwner?.();
+        else
+            this.guests[index - 1]?.close();
+    }
+    successor() {
+        return this.activeGuest() ?? this.guests[0] ?? null;
+    }
+    others(except) {
+        return this.guests.filter((guest) => guest !== except);
+    }
+    activate(index) {
+        const clamped = Math.max(0, Math.min(index, this.guests.length));
+        if (clamped === this.activeIndex)
+            return;
+        this.activeIndex = clamped;
+        if (clamped === 0)
+            this.restoreFocus?.();
+        this.changed();
+    }
+    rememberFocus(restore) {
+        this.restoreFocus = restore;
+    }
+    changed() {
+        this.snapshot = null;
+        for (const listener of this.listeners)
+            listener();
+    }
+    handleKey(event) {
+        if (!this.hasGuests() || event.kind === "release")
+            return false;
+        const { mods, key } = event;
+        if (!mods.alt || mods.ctrl || mods.super || mods.shift)
+            return false;
+        if (/^[1-9]$/.test(key)) {
+            this.activate(Number(key) - 1);
+            return true;
+        }
+        if (key === "[" || key === "]") {
+            const count = this.guests.length + 1;
+            this.activate((this.activeIndex + (key === "]" ? 1 : count - 1)) % count);
+            return true;
+        }
+        return false;
+    }
+}
+exports.Shell = Shell;

package/dist/host/strip.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+import type { Shell } from "./shell";
+export declare function PaneShell({ shell, children }: {
+    shell: Shell;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/host/strip.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaneShell = PaneShell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("../icons");
+const react_2 = require("../react");
+const registry_1 = require("../registry");
+const theme_1 = require("../theme");
+const guest_1 = require("./guest");
+function PaneShell({ shell, children }) {
+    const registry = (0, react_1.useContext)(registry_1.RootContext);
+    if (!registry)
+        throw new Error("PaneShell outside a root");
+    const { tabs, active } = (0, react_1.useSyncExternalStore)(shell.subscribe, shell.get, shell.get);
+    const colors = (0, registry_1.useRegistryColors)(registry);
+    const theme = (0, theme_1.makeTheme)(colors);
+    const rem = registry.root.info.basePx;
+    const [hovered, setHovered] = (0, react_1.useState)(null);
+    const closeSlot = rem * 0.95;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { style: { flexDirection: "column", width: "100%", height: "100%" }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { hidden: tabs.length === 1, style: {
+                    height: Math.round(rem * 1.9),
+                    alignItems: "center",
+                    gap: rem * 0.25,
+                    padding: { left: rem * 0.3, right: rem * 0.3 },
+                    background: theme.field,
+                    border: { bottom: [1, theme.hairline] },
+                    flexShrink: 0,
+                }, children: tabs.map((tab, index) => {
+                    const current = index === active;
+                    const closable = hovered === tab.key;
+                    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { style: {
+                            flexGrow: 1,
+                            flexBasis: 0,
+                            minWidth: 0,
+                            height: Math.round(rem * 1.4),
+                            alignItems: "center",
+                            gap: rem * 0.3,
+                            padding: { left: rem * 0.7, right: rem * 0.35 },
+                            cornerRadius: rem * 0.45,
+                            background: current ? theme.hover : undefined,
+                            hoverBackground: current ? undefined : theme.hover,
+                            overflow: "hidden",
+                        }, onClick: () => shell.activate(index), onMouseEnter: () => setHovered(tab.key), onMouseLeave: () => setHovered((key) => (key === tab.key ? null : key)), children: [(0, jsx_runtime_1.jsx)(react_2.Text, { style: {
+                                    flexGrow: 1,
+                                    flexBasis: 0,
+                                    fontSize: rem * 0.82,
+                                    color: current ? theme.fg : theme.muted,
+                                    wrap: false,
+                                    ellipsis: true,
+                                    selectable: false,
+                                    overflow: "hidden",
+                                }, children: tab.label }), closable ? ((0, jsx_runtime_1.jsx)(react_2.Box, { style: {
+                                    width: closeSlot,
+                                    height: closeSlot,
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    cornerRadius: rem * 0.2,
+                                    hoverBackground: theme.hoverStrong,
+                                    flexShrink: 0,
+                                }, onClick: () => shell.close(index), children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { icon: "close", size: rem * 0.8, color: theme.muted }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { style: { width: closeSlot, height: closeSlot, flexShrink: 0 } }))] }, tab.key));
+                }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { style: { flexGrow: 1, flexBasis: 0, flexDirection: "column" }, hidden: active !== 0, children: children }), tabs.map((tab, index) => tab.guest && (0, jsx_runtime_1.jsx)(guest_1.GuestView, { guest: tab.guest, active: index === active }, tab.key))] }));
+}

package/dist/icons.d.ts

@@ -0,0 +1,30 @@
+import type { Rgba } from "./react";
+export declare const ICONS: {
+    back: string;
+    forward: string;
+    close: string;
+    plus: string;
+    reload: string;
+    search: string;
+    download: string;
+    cursor: string;
+    pen: string;
+    arrow: string;
+    oval: string;
+    text: string;
+    crop: string;
+    record: string;
+    play: string;
+    bolt: string;
+    camera: string;
+    pause: string;
+    more: string;
+    terminal: string;
+};
+export type IconName = keyof typeof ICONS;
+export declare function Icon({ icon, size, color, weight, }: {
+    icon: IconName;
+    size: number;
+    color: Rgba;
+    weight?: number;
+}): import("react").JSX.Element;

package/dist/icons.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICONS = void 0;
+exports.Icon = Icon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("./react");
+function arcPath(cx, cy, r, fromDeg, toDeg) {
+    const rad = (deg) => (deg * Math.PI) / 180;
+    const segments = Math.max(1, Math.ceil(Math.abs(toDeg - fromDeg) / 90));
+    const step = (rad(toDeg) - rad(fromDeg)) / segments;
+    const k = (4 / 3) * Math.tan(step / 4);
+    const n = (value) => Number(value.toFixed(3));
+    const px = (t) => cx + r * Math.cos(t);
+    const py = (t) => cy + r * Math.sin(t);
+    let a = rad(fromDeg);
+    let path = `M ${n(px(a))} ${n(py(a))}`;
+    for (let i = 0; i < segments; i++) {
+        const b = a + step;
+        path +=
+            ` C ${n(px(a) - k * r * Math.sin(a))} ${n(py(a) + k * r * Math.cos(a))}` +
+                ` ${n(px(b) + k * r * Math.sin(b))} ${n(py(b) - k * r * Math.cos(b))}` +
+                ` ${n(px(b))} ${n(py(b))}`;
+        a = b;
+    }
+    return path;
+}
+exports.ICONS = {
+    back: "M 14.5 5.5 L 8 12 L 14.5 18.5",
+    forward: "M 9.5 5.5 L 16 12 L 9.5 18.5",
+    close: "M 7 7 L 17 17 M 17 7 L 7 17",
+    plus: "M 12 5.5 L 12 18.5 M 5.5 12 L 18.5 12",
+    reload: `${arcPath(12, 12, 7, 0, 270)} C 13.96 5 15.83 5.78 17.24 7.13 L 19 8.89 M 19 5 L 19 8.89 L 15.11 8.89`,
+    search: `${arcPath(11, 11, 5.75, 0, 360)} M 15.4 15.4 L 19.25 19.25`,
+    download: "M 12 4.5 L 12 14.5 M 7.75 10.5 L 12 14.75 L 16.25 10.5 M 5.5 18.5 L 18.5 18.5",
+    cursor: "M 6.5 4.5 L 18 11.8 L 12.6 13.2 L 10.2 19 Z",
+    pen: "M 4.5 19.5 L 8.2 18.6 L 18.8 8 L 16 5.2 L 5.4 15.8 L 4.5 19.5 Z",
+    arrow: "M 6 18 L 17.5 6.5 M 10.5 6 L 18 6 L 18 13.5",
+    oval: arcPath(12, 12, 7.5, 0, 360),
+    text: "M 5.5 6 L 18.5 6 M 12 6 L 12 19",
+    crop: "M 7 3 L 7 17 L 21 17 M 3 7 L 17 7 L 17 21",
+    record: arcPath(12, 12, 4.5, 0, 360),
+    play: "M 9 6.5 L 17.5 12 L 9 17.5 Z",
+    bolt: "M 13.2 3.5 L 6.5 13.5 L 11.2 13.5 L 10.4 20.5 L 17.5 10.2 L 12.4 10.2 Z",
+    camera: "M 4 8.2 L 8.3 8.2 L 9.8 6 L 14.2 6 L 15.7 8.2 L 20 8.2 L 20 18 L 4 18 Z " +
+        arcPath(12, 12.9, 3.1, 0, 360),
+    pause: "M 9.2 6.8 L 9.2 17.2 M 14.8 6.8 L 14.8 17.2",
+    more: arcPath(5.5, 12, 0.7, 0, 360) +
+        " " +
+        arcPath(12, 12, 0.7, 0, 360) +
+        " " +
+        arcPath(18.5, 12, 0.7, 0, 360),
+    terminal: "M 5 3 L 19 3 C 20.104 3 21 3.896 21 5 L 21 19 C 21 20.104 20.104 21 19 21 " +
+        "L 5 21 C 3.896 21 3 20.104 3 19 L 3 5 C 3 3.896 3.896 3 5 3 Z " +
+        "M 7 11 L 9 9 L 7 7 M 11 13 L 15 13",
+};
+function Icon({ icon, size, color, weight = 2.2, }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Path, { d: exports.ICONS[icon], viewBox: 24, stroke: { width: weight, color, cap: "round", join: "round" }, style: { width: size, height: size, flexShrink: 0 } }));
+}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference path="../electron/electron.d.ts" preserve="true" />
+export { createRoot } from "./root";
+export type { LoadOptions, Root, RootOptions } from "./root";
+export type { Instance } from "./instances";
+export { findOwner, listInstances } from "./instances";
+export { WebView } from "./webview";
+export type { DownloadProgress, OpenWindowDecision, OpenWindowPolicy, BrowserWindowOptions, WebViewHandle, WebViewProps, WebViewRecording, WebViewState, } from "./webview";
+export { DevTools } from "./devtools";
+export type { DevToolsProps } from "./devtools";
+export type { DevtoolsDock } from "./web/types";
+export type { ZoomDirection } from "./web/zoom";
+export type { TerminalTheme } from "./web/session";
+export { QUIT_URL, defaultOpenWindow } from "./web/host";
+export { Box, Text, Input, Image, MarkedText, Path, Markdown, appLog, useTerminalColors, setClipboard, setPointerShape, requestClipboardImage, highlight, diff, parseMarkdown, HIGHLIGHT_CAPTURES, Surface, SurfaceCapture, captureFilmstrip, encodeRecording, } from "./react";
+export type { BoxProps, TextProps, TextSpan, InputProps, InputGutter, ImageProps, ImageAdvancedProps, MarkedTextProps, MarkRef, PathProps, ShapeStroke, ClickEvent, DragEvent, EventMods, MouseMoveEvent, ScrollEvent, WheelEvent, PointerEvent, PastedImage, PasteSource, CaretInfo, ChangeInfo, ChangeSource, ContainerSelection, SelectionPart, NodeHandle, Color, Edges, InsetEdges, InsetValue, ScrollbarStyle, Style, EngineInfo, EngineKeyEvent, KeyMods, Rgba, TerminalColors, SurfaceFrame, SurfaceTexture, CaptureStats, CaptureFrameMeta, CaptureIndex, MarkdownProps, MarkdownTheme, MarkdownBlock, HighlightSpan, DiffRow, } from "./react";
+export { makeTheme } from "./theme";
+export type { Theme } from "./theme";

package/dist/index.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeTheme = exports.encodeRecording = exports.captureFilmstrip = exports.SurfaceCapture = exports.Surface = exports.HIGHLIGHT_CAPTURES = exports.parseMarkdown = exports.diff = exports.highlight = exports.requestClipboardImage = exports.setPointerShape = exports.setClipboard = exports.useTerminalColors = exports.appLog = exports.Markdown = exports.Path = exports.MarkedText = exports.Image = exports.Input = exports.Text = exports.Box = exports.defaultOpenWindow = exports.QUIT_URL = exports.DevTools = exports.WebView = exports.listInstances = exports.findOwner = exports.createRoot = void 0;
+/// <reference path="../electron/electron.d.ts" preserve="true" />
+var root_1 = require("./root");
+Object.defineProperty(exports, "createRoot", { enumerable: true, get: function () { return root_1.createRoot; } });
+var instances_1 = require("./instances");
+Object.defineProperty(exports, "findOwner", { enumerable: true, get: function () { return instances_1.findOwner; } });
+Object.defineProperty(exports, "listInstances", { enumerable: true, get: function () { return instances_1.listInstances; } });
+var webview_1 = require("./webview");
+Object.defineProperty(exports, "WebView", { enumerable: true, get: function () { return webview_1.WebView; } });
+var devtools_1 = require("./devtools");
+Object.defineProperty(exports, "DevTools", { enumerable: true, get: function () { return devtools_1.DevTools; } });
+var host_1 = require("./web/host");
+Object.defineProperty(exports, "QUIT_URL", { enumerable: true, get: function () { return host_1.QUIT_URL; } });
+Object.defineProperty(exports, "defaultOpenWindow", { enumerable: true, get: function () { return host_1.defaultOpenWindow; } });
+var react_1 = require("./react");
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return react_1.Box; } });
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return react_1.Text; } });
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return react_1.Input; } });
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return react_1.Image; } });
+Object.defineProperty(exports, "MarkedText", { enumerable: true, get: function () { return react_1.MarkedText; } });
+Object.defineProperty(exports, "Path", { enumerable: true, get: function () { return react_1.Path; } });
+Object.defineProperty(exports, "Markdown", { enumerable: true, get: function () { return react_1.Markdown; } });
+Object.defineProperty(exports, "appLog", { enumerable: true, get: function () { return react_1.appLog; } });
+Object.defineProperty(exports, "useTerminalColors", { enumerable: true, get: function () { return react_1.useTerminalColors; } });
+Object.defineProperty(exports, "setClipboard", { enumerable: true, get: function () { return react_1.setClipboard; } });
+Object.defineProperty(exports, "setPointerShape", { enumerable: true, get: function () { return react_1.setPointerShape; } });
+Object.defineProperty(exports, "requestClipboardImage", { enumerable: true, get: function () { return react_1.requestClipboardImage; } });
+Object.defineProperty(exports, "highlight", { enumerable: true, get: function () { return react_1.highlight; } });
+Object.defineProperty(exports, "diff", { enumerable: true, get: function () { return react_1.diff; } });
+Object.defineProperty(exports, "parseMarkdown", { enumerable: true, get: function () { return react_1.parseMarkdown; } });
+Object.defineProperty(exports, "HIGHLIGHT_CAPTURES", { enumerable: true, get: function () { return react_1.HIGHLIGHT_CAPTURES; } });
+Object.defineProperty(exports, "Surface", { enumerable: true, get: function () { return react_1.Surface; } });
+Object.defineProperty(exports, "SurfaceCapture", { enumerable: true, get: function () { return react_1.SurfaceCapture; } });
+Object.defineProperty(exports, "captureFilmstrip", { enumerable: true, get: function () { return react_1.captureFilmstrip; } });
+Object.defineProperty(exports, "encodeRecording", { enumerable: true, get: function () { return react_1.encodeRecording; } });
+var theme_1 = require("./theme");
+Object.defineProperty(exports, "makeTheme", { enumerable: true, get: function () { return theme_1.makeTheme; } });

package/dist/instances.d.ts

@@ -0,0 +1,30 @@
+export declare const PROTOCOL = 1;
+export interface Instance {
+    tty: string;
+    pid: number;
+    socket: string;
+    protocol: number;
+    name: string;
+    title: string | null;
+    cwd: string;
+    startedAt: number;
+}
+export declare function instancesDir(env?: NodeJS.ProcessEnv): string;
+export declare function instanceKey(tty: string): string;
+export declare function listInstances(env?: NodeJS.ProcessEnv): Instance[];
+export declare function findOwner(tty: string, env?: NodeJS.ProcessEnv): Instance | null;
+export declare function announceGuest(owner: Instance, name: string): {
+    pane: string;
+    end(): void;
+};
+export declare function markHandoff(tty: string, env?: NodeJS.ProcessEnv): void;
+export declare function clearHandoff(tty: string, env?: NodeJS.ProcessEnv): void;
+export declare function waitForOwners(tty: string, env?: NodeJS.ProcessEnv): Promise<void>;
+export declare class InstanceRecord {
+    private readonly file;
+    private readonly record;
+    constructor(record: Instance, env?: NodeJS.ProcessEnv);
+    setTitle(title: string | null): void;
+    withdraw(): void;
+    private write;
+}

package/dist/instances.js

@@ -0,0 +1,177 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InstanceRecord = exports.PROTOCOL = void 0;
+exports.instancesDir = instancesDir;
+exports.instanceKey = instanceKey;
+exports.listInstances = listInstances;
+exports.findOwner = findOwner;
+exports.announceGuest = announceGuest;
+exports.markHandoff = markHandoff;
+exports.clearHandoff = clearHandoff;
+exports.waitForOwners = waitForOwners;
+const node_crypto_1 = require("node:crypto");
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_net_1 = __importDefault(require("node:net"));
+const node_os_1 = __importDefault(require("node:os"));
+const node_path_1 = __importDefault(require("node:path"));
+exports.PROTOCOL = 1;
+function instancesDir(env = process.env) {
+    const state = env.XDG_STATE_HOME ?? node_path_1.default.join(node_os_1.default.homedir(), ".local", "state");
+    return node_path_1.default.join(state, "pixel", "instances");
+}
+function instanceKey(tty) {
+    return tty.replace(/[^\w-]/g, "_");
+}
+function alive(pid) {
+    try {
+        process.kill(pid, 0);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+function readInstance(file) {
+    try {
+        const parsed = JSON.parse(node_fs_1.default.readFileSync(file, "utf8"));
+        if (typeof parsed.tty !== "string" ||
+            typeof parsed.pid !== "number" ||
+            typeof parsed.socket !== "string" ||
+            typeof parsed.protocol !== "number") {
+            return null;
+        }
+        return {
+            tty: parsed.tty,
+            pid: parsed.pid,
+            socket: parsed.socket,
+            protocol: parsed.protocol,
+            name: typeof parsed.name === "string" ? parsed.name : "app",
+            title: typeof parsed.title === "string" ? parsed.title : null,
+            cwd: typeof parsed.cwd === "string" ? parsed.cwd : "",
+            startedAt: typeof parsed.startedAt === "number" ? parsed.startedAt : 0,
+        };
+    }
+    catch {
+        return null;
+    }
+}
+function listInstances(env = process.env) {
+    const dir = instancesDir(env);
+    let names;
+    try {
+        names = node_fs_1.default.readdirSync(dir);
+    }
+    catch {
+        return [];
+    }
+    const live = [];
+    for (const name of names) {
+        if (!name.endsWith(".json"))
+            continue;
+        const file = node_path_1.default.join(dir, name);
+        const record = readInstance(file);
+        if (!record || !alive(record.pid) || !node_fs_1.default.existsSync(record.socket)) {
+            node_fs_1.default.rmSync(file, { force: true });
+            continue;
+        }
+        live.push(record);
+    }
+    return live.sort((a, b) => b.startedAt - a.startedAt);
+}
+function findOwner(tty, env = process.env) {
+    return (listInstances(env).find((record) => record.tty === tty && record.protocol === exports.PROTOCOL && record.pid !== process.pid) ?? null);
+}
+// Tells an owner that an app is on its way so the tab shows up before the
+// app's electron has booted; the connection stays open for the app's lifetime
+// and its close before the app joins means the launch failed.
+function announceGuest(owner, name) {
+    const pane = (0, node_crypto_1.randomBytes)(8).toString("hex");
+    const socket = node_net_1.default.connect(owner.socket);
+    socket.on("error", () => { });
+    socket.on("connect", () => {
+        socket.write(`${JSON.stringify({ type: "announce", pane, name, pid: process.pid })}\n`);
+    });
+    return {
+        pane,
+        end: () => socket.destroy(),
+    };
+}
+function handoffMarker(tty, env = process.env) {
+    return node_path_1.default.join(instancesDir(env), `${instanceKey(tty)}.handoff`);
+}
+function markHandoff(tty, env = process.env) {
+    try {
+        node_fs_1.default.mkdirSync(instancesDir(env), { recursive: true });
+        node_fs_1.default.writeFileSync(handoffMarker(tty, env), String(Date.now()));
+    }
+    catch { }
+}
+function clearHandoff(tty, env = process.env) {
+    try {
+        node_fs_1.default.rmSync(handoffMarker(tty, env), { force: true });
+    }
+    catch { }
+}
+function handoffPending(tty, env = process.env) {
+    try {
+        return Date.now() - Number(node_fs_1.default.readFileSync(handoffMarker(tty, env), "utf8")) < 20000;
+    }
+    catch {
+        return false;
+    }
+}
+async function waitForOwners(tty, env = process.env) {
+    const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+    for (;;) {
+        const owner = findOwner(tty, env);
+        if (!owner) {
+            if (!handoffPending(tty, env))
+                return;
+            await sleep(50);
+            continue;
+        }
+        await new Promise((resolve) => {
+            const socket = node_net_1.default.connect(owner.socket);
+            const done = () => {
+                socket.destroy();
+                resolve();
+            };
+            socket.on("error", done);
+            socket.on("close", done);
+            socket.on("end", done);
+        });
+    }
+}
+class InstanceRecord {
+    file;
+    record;
+    constructor(record, env = process.env) {
+        this.record = record;
+        this.file = node_path_1.default.join(instancesDir(env), `${instanceKey(record.tty)}.json`);
+        node_fs_1.default.mkdirSync(node_path_1.default.dirname(this.file), { recursive: true });
+        this.write();
+    }
+    setTitle(title) {
+        if (this.record.title === title)
+            return;
+        this.record.title = title;
+        this.write();
+    }
+    withdraw() {
+        node_fs_1.default.rmSync(this.file, { force: true });
+    }
+    write() {
+        const tmp = `${this.file}.${process.pid}.tmp`;
+        try {
+            node_fs_1.default.writeFileSync(tmp, `${JSON.stringify(this.record)}\n`);
+            node_fs_1.default.renameSync(tmp, this.file);
+        }
+        catch {
+            node_fs_1.default.rmSync(tmp, { force: true });
+        }
+    }
+}
+exports.InstanceRecord = InstanceRecord;

package/dist/layout.d.ts

@@ -0,0 +1,5 @@
+import type { RefObject } from "react";
+import type { NodeHandle } from "./react";
+import type { ViewRegistry } from "./registry";
+import type { Rect } from "./devtools-layout";
+export declare function useNodeRect(node: RefObject<NodeHandle | null>, registry: ViewRegistry): Rect | null;

package/dist/layout.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNodeRect = useNodeRect;
+const react_1 = require("react");
+const debug_1 = require("./debug");
+function useNodeRect(node, registry) {
+    const [rect, setRect] = (0, react_1.useState)(null);
+    // subscribed before the query below goes out, or the reply can land first and be missed
+    (0, react_1.useLayoutEffect)(() => registry.layout.subscribe(() => {
+        const id = node.current?.id;
+        const snapshot = registry.layout.get();
+        (0, debug_1.debug)("layout reply", { id, nodes: snapshot.rects.size, found: id != null ? snapshot.rects.get(id) : null });
+        if (id == null)
+            return;
+        const found = snapshot.rects.get(id);
+        if (!found)
+            return;
+        setRect((prev) => prev &&
+            prev.x === found.x &&
+            prev.y === found.y &&
+            prev.width === found.w &&
+            prev.height === found.h
+            ? prev
+            : { x: found.x, y: found.y, width: found.w, height: found.h });
+    }), [node, registry]);
+    (0, react_1.useEffect)(() => {
+        const ask = () => registry.queryLayout();
+        registry.resizeListeners.add(ask);
+        return () => {
+            registry.resizeListeners.delete(ask);
+        };
+    }, [registry]);
+    return rect;
+}

package/dist/popup.d.ts

@@ -0,0 +1,21 @@
+import type { PointerEvent, Surface, WheelEvent } from "./react";
+import type { Theme } from "./theme";
+import type { Rect } from "./devtools-layout";
+export interface PopupView {
+    title: string;
+    host: string;
+    loading: boolean;
+    width: number;
+    height: number;
+}
+export declare function PopupCard({ view, page, rem, theme, surface, onPointer, onWheel, onHover, onClose, }: {
+    view: PopupView;
+    page: Rect;
+    rem: number;
+    theme: Theme;
+    surface: Surface;
+    onPointer(event: PointerEvent): void;
+    onWheel(event: WheelEvent): void;
+    onHover(hovering: boolean): void;
+    onClose(): void;
+}): import("react").JSX.Element;

package/dist/popup.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupCard = PopupCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("./react");
+const icons_1 = require("./icons");
+function PopupCard({ view, page, rem, theme, surface, onPointer, onWheel, onHover, onClose, }) {
+    const [closeHover, setCloseHover] = (0, react_1.useState)(false);
+    const headerH = Math.round(rem * 1.7);
+    const cardH = headerH + view.height;
+    const left = page.x + Math.round((page.width - view.width) / 2);
+    const top = page.y + Math.max(Math.round(rem * 0.5), Math.round((page.height - cardH) / 2));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { style: {
+                    position: "absolute",
+                    inset: { top: page.y, left: page.x },
+                    width: page.width,
+                    height: page.height,
+                    background: [8, 9, 12, 150],
+                }, onPointer: (event) => {
+                    if (event.kind === "down")
+                        onClose();
+                }, onWheel: () => { } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { style: {
+                    position: "absolute",
+                    inset: { top, left },
+                    width: view.width,
+                    flexDirection: "column",
+                    background: theme.bg,
+                    cornerRadius: rem * 0.5,
+                    border: { width: 1, color: theme.fieldBorder },
+                    overflow: "hidden",
+                }, onPointer: () => { }, onWheel: () => { }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { style: {
+                            height: headerH,
+                            alignItems: "center",
+                            gap: rem * 0.5,
+                            padding: { left: rem * 0.65, right: rem * 0.35 },
+                            background: theme.field,
+                            border: { bottom: [1, theme.hairline] },
+                        }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { style: { fontSize: rem * 0.78, wrap: false, selectable: false }, children: view.title || (view.loading ? "loading…" : view.host) }), (0, jsx_runtime_1.jsx)(react_2.Box, { style: { flexGrow: 1, flexBasis: 0 } }), (0, jsx_runtime_1.jsx)(react_2.Text, { style: { fontSize: rem * 0.72, color: theme.muted, wrap: false, selectable: false }, children: view.host }), (0, jsx_runtime_1.jsx)(react_2.Box, { style: {
+                                    width: rem * 1.15,
+                                    height: rem * 1.15,
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    cornerRadius: rem * 0.3,
+                                    background: closeHover ? theme.hover : undefined,
+                                }, onClick: onClose, onMouseEnter: () => setCloseHover(true), onMouseLeave: () => setCloseHover(false), children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { icon: "close", size: rem * 0.8, color: theme.muted }) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { surface: surface, style: { width: view.width, height: view.height, background: theme.bg }, onPointer: onPointer, onWheel: onWheel, onMouseEnter: () => onHover(true), onMouseLeave: () => onHover(false) })] })] }));
+}