@zenbu-labs/pixel 0.0.0 → 0.0.12

package/dist/host/guest.js

@@ -0,0 +1,178 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GuestView = GuestView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const node_fs_1 = __importDefault(require("node:fs"));
+const react_1 = require("react");
+const debug_1 = require("../debug");
+const layout_1 = require("../layout");
+const react_2 = require("../react");
+const registry_1 = require("../registry");
+function GuestView({ guest, active }) {
+    const registry = (0, react_1.useContext)(registry_1.RootContext);
+    if (!registry)
+        throw new Error("GuestView outside a root");
+    const colors = (0, registry_1.useRegistryColors)(registry);
+    const boxRef = (0, react_1.useRef)(null);
+    const rect = (0, layout_1.useNodeRect)(boxRef, registry);
+    const surface = (0, react_1.useRef)(null);
+    const hovered = (0, react_1.useRef)(false);
+    const wheel = (0, react_1.useRef)({ x: 0, y: 0 });
+    const greeted = (0, react_1.useRef)(false);
+    const entry = (0, react_1.useMemo)(() => ({
+        host: null,
+        handle: null,
+        devtoolsEnabled: false,
+        externalDevtools: false,
+        externalDevtoolsAction: null,
+        toggleDevtools: () => { },
+        handleKey: (event) => {
+            guest.send({ type: "key", ...event });
+            return true;
+        },
+        paste: (text) => guest.send({ type: "paste", text }),
+        setActive: (focused) => guest.send({ type: "focus", focused }),
+    }), [guest]);
+    const cell = registry.root.info;
+    const snapped = rect
+        ? {
+            width: Math.floor(rect.width / cell.cellWidth) * cell.cellWidth,
+            height: Math.floor(rect.height / cell.cellHeight) * cell.cellHeight,
+        }
+        : null;
+    (0, react_1.useLayoutEffect)(() => {
+        const created = registry.root.createSurface();
+        surface.current = created;
+        registry.register(entry);
+        guest.onFrame = (frame) => {
+            let fd;
+            try {
+                fd = node_fs_1.default.openSync(frame.path, "r");
+            }
+            catch (error) {
+                (0, debug_1.debug)("guest frame unreadable", frame.path, String(error));
+                frame.ack();
+                return;
+            }
+            const stride = frame.width * 4;
+            created.present({
+                shm: { fd, width: frame.width, height: frame.height, stride, size: stride * frame.height },
+                released: () => {
+                    node_fs_1.default.closeSync(fd);
+                    frame.ack();
+                },
+            });
+        };
+        guest.onPointer = (shape) => {
+            if (hovered.current)
+                registry.setPointerShape(shape);
+        };
+        guest.onClipboard = (text) => registry.root.setClipboard(text);
+        return () => {
+            guest.onFrame = null;
+            guest.onPointer = null;
+            guest.onClipboard = null;
+            registry.unregister(entry);
+            created.close();
+            surface.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [guest]);
+    (0, react_1.useEffect)(() => {
+        if (!snapped || snapped.width <= 0 || snapped.height <= 0)
+            return;
+        const size = {
+            cols: snapped.width / cell.cellWidth,
+            rows: snapped.height / cell.cellHeight,
+            width: snapped.width,
+            height: snapped.height,
+        };
+        if (!greeted.current) {
+            greeted.current = true;
+            guest.send({ type: "init", ...size, colors, focused: active });
+            return;
+        }
+        guest.send({ type: "size", ...size });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [snapped?.width, snapped?.height]);
+    (0, react_1.useEffect)(() => {
+        if (greeted.current)
+            guest.send({ type: "colors", colors });
+    }, [colors, guest]);
+    (0, react_1.useEffect)(() => {
+        if (active)
+            registry.focus(entry);
+        else
+            registry.blur(entry);
+    }, [active, entry, registry]);
+    const forward = (event, kind) => {
+        const pointer = event;
+        guest.send({
+            type: "mouse",
+            kind,
+            button: pointer.button ?? "none",
+            mods: pointer.mods ?? { shift: false, alt: false, ctrl: false, super: false },
+            x: Math.max(0, Math.round(event.x)),
+            y: Math.max(0, Math.round(event.y)),
+        });
+    };
+    const scroll = (event) => {
+        if (event.precise) {
+            guest.send({
+                type: "wheel",
+                x: Math.max(0, Math.round(event.x)),
+                y: Math.max(0, Math.round(event.y)),
+                deltaX: event.deltaX,
+                deltaY: event.deltaY,
+                mods: event.mods,
+            });
+            return;
+        }
+        const acc = wheel.current;
+        acc.x += event.deltaX;
+        acc.y += event.deltaY;
+        const stepX = cell.cellWidth;
+        const stepY = cell.cellHeight;
+        const send = (kind) => guest.send({
+            type: "mouse",
+            kind,
+            button: "none",
+            mods: event.mods,
+            x: Math.max(0, Math.round(event.x)),
+            y: Math.max(0, Math.round(event.y)),
+        });
+        while (acc.y >= stepY) {
+            acc.y -= stepY;
+            send("scrolldown");
+        }
+        while (acc.y <= -stepY) {
+            acc.y += stepY;
+            send("scrollup");
+        }
+        while (acc.x >= stepX) {
+            acc.x -= stepX;
+            send("scrollright");
+        }
+        while (acc.x <= -stepX) {
+            acc.x += stepX;
+            send("scrollleft");
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: boxRef, style: { flexGrow: 1, flexBasis: 0, overflow: "hidden" }, hidden: !active, children: snapped && snapped.width > 0 && snapped.height > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { surface: surface.current ?? undefined, style: {
+                position: "absolute",
+                inset: { top: 0, left: 0 },
+                width: snapped.width,
+                height: snapped.height,
+            }, onPointer: (event) => {
+                registry.focus(entry);
+                forward(event, event.kind);
+            }, onMouseMove: (event) => forward(event, "move"), onWheel: scroll, onMouseEnter: () => {
+                hovered.current = true;
+            }, onMouseLeave: () => {
+                hovered.current = false;
+                registry.setPointerShape("default");
+            } })) }));
+}

package/dist/host/server.d.ts

@@ -0,0 +1,91 @@
+import net from "node:net";
+import type { EngineKeyEvent, TerminalColors } from "../react";
+export interface GuestFrame {
+    path: string;
+    width: number;
+    height: number;
+    ack(): void;
+}
+export interface InitPayload {
+    cols: number;
+    rows: number;
+    width: number;
+    height: number;
+    colors: TerminalColors;
+    focused: boolean;
+}
+export type GuestMessage = ({
+    type: "key";
+} & EngineKeyEvent) | {
+    type: "paste";
+    text: string;
+} | {
+    type: "mouse";
+    kind: "down" | "up" | "move" | "scrollup" | "scrolldown" | "scrollleft" | "scrollright";
+    button: "left" | "middle" | "right" | "none";
+    mods: EngineKeyEvent["mods"];
+    x: number;
+    y: number;
+} | {
+    type: "wheel";
+    x: number;
+    y: number;
+    deltaX: number;
+    deltaY: number;
+    mods: EngineKeyEvent["mods"];
+} | {
+    type: "focus";
+    focused: boolean;
+} | {
+    type: "colors";
+    colors: TerminalColors;
+} | ({
+    type: "size";
+} & Pick<InitPayload, "cols" | "rows" | "width" | "height">) | ({
+    type: "init";
+} & InitPayload) | {
+    type: "adopt";
+    tty: string;
+} | {
+    type: "rejoin";
+    socket: string;
+};
+export declare class Guest {
+    readonly pane: string;
+    readonly name: string;
+    pid: number;
+    private control;
+    private announce;
+    title: string | null;
+    onFrame: ((frame: GuestFrame) => void) | null;
+    onTitle: ((title: string) => void) | null;
+    onPointer: ((shape: string) => void) | null;
+    onClipboard: ((text: string) => void) | null;
+    onClose: (() => void) | null;
+    private closed;
+    private departed;
+    private greeted;
+    private queued;
+    constructor(pane: string, name: string, pid: number, control: net.Socket | null, announce: net.Socket | null);
+    get pending(): boolean;
+    attach(control: net.Socket, pid: number): void;
+    send(message: GuestMessage): void;
+    handleLine(line: string): void;
+    close(): void;
+    gone(): void;
+}
+export declare class OwnerServer {
+    readonly socketPath: string;
+    private readonly cell;
+    readonly frameDir: string;
+    onJoin: ((guest: Guest) => void) | null;
+    private readonly server;
+    private readonly guests;
+    constructor(socketPath: string, cell: () => {
+        width: number;
+        height: number;
+    });
+    stop(): void;
+    private serve;
+    private open;
+}

package/dist/host/server.js

@@ -0,0 +1,296 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OwnerServer = exports.Guest = void 0;
+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"));
+const debug_1 = require("../debug");
+class Guest {
+    pane;
+    name;
+    pid;
+    control;
+    announce;
+    title = null;
+    onFrame = null;
+    onTitle = null;
+    onPointer = null;
+    onClipboard = null;
+    onClose = null;
+    closed = false;
+    departed = false;
+    // Nothing may reach the guest before init; its engine reads init first.
+    greeted = false;
+    queued = [];
+    constructor(pane, name, pid, 
+    // Null while only announced: the app's electron has not joined yet.
+    control, announce) {
+        this.pane = pane;
+        this.name = name;
+        this.pid = pid;
+        this.control = control;
+        this.announce = announce;
+    }
+    get pending() {
+        return this.control === null;
+    }
+    attach(control, pid) {
+        this.control = control;
+        if (pid > 0)
+            this.pid = pid;
+        this.greeted = false;
+        for (const waiting of this.queued.splice(0))
+            this.send(waiting);
+    }
+    send(message) {
+        if (this.closed)
+            return;
+        if (!this.control) {
+            this.queued.push(message);
+            return;
+        }
+        if (!this.greeted) {
+            if (message.type !== "init") {
+                this.queued.push(message);
+                return;
+            }
+            this.greeted = true;
+            this.control.write(`${JSON.stringify(message)}\n`);
+            for (const waiting of this.queued.splice(0))
+                this.send(waiting);
+            return;
+        }
+        this.control.write(`${JSON.stringify(message)}\n`);
+    }
+    handleLine(line) {
+        let message;
+        try {
+            message = JSON.parse(line);
+        }
+        catch {
+            return;
+        }
+        switch (message.type) {
+            case "title":
+                this.title = message.text ?? null;
+                if (this.title != null)
+                    this.onTitle?.(this.title);
+                break;
+            case "pointer":
+                if (message.shape)
+                    this.onPointer?.(message.shape);
+                break;
+            case "clipboard":
+                if (typeof message.text === "string")
+                    this.onClipboard?.(message.text);
+                break;
+        }
+    }
+    // Dropping the control connection ends the guest's engine; a guest that
+    // still lingers after that gets a signal.
+    close() {
+        if (this.closed)
+            return;
+        this.closed = true;
+        this.control?.destroy();
+        this.announce?.destroy();
+        if (this.pid > 0) {
+            setTimeout(() => {
+                if (this.departed)
+                    return;
+                try {
+                    process.kill(this.pid, "SIGTERM");
+                }
+                catch { }
+            }, 2000).unref();
+        }
+    }
+    gone() {
+        if (this.departed)
+            return;
+        this.departed = true;
+        this.closed = true;
+        this.onClose?.();
+    }
+}
+exports.Guest = Guest;
+function frameDirectory() {
+    const root = node_path_1.default.join(node_os_1.default.tmpdir(), "pixel-frames");
+    node_fs_1.default.mkdirSync(root, { recursive: true });
+    for (const entry of node_fs_1.default.readdirSync(root)) {
+        const pid = Number(entry);
+        if (!Number.isInteger(pid) || pid === process.pid)
+            continue;
+        try {
+            process.kill(pid, 0);
+        }
+        catch {
+            node_fs_1.default.rmSync(node_path_1.default.join(root, entry), { recursive: true, force: true });
+        }
+    }
+    const dir = node_path_1.default.join(root, String(process.pid));
+    node_fs_1.default.rmSync(dir, { recursive: true, force: true });
+    node_fs_1.default.mkdirSync(dir, { mode: 0o700 });
+    return dir;
+}
+class OwnerServer {
+    socketPath;
+    cell;
+    frameDir;
+    onJoin = null;
+    server;
+    guests = new Map();
+    constructor(socketPath, cell) {
+        this.socketPath = socketPath;
+        this.cell = cell;
+        this.frameDir = frameDirectory();
+        node_fs_1.default.rmSync(socketPath, { force: true });
+        node_fs_1.default.mkdirSync(node_path_1.default.dirname(socketPath), { recursive: true });
+        this.server = node_net_1.default.createServer((connection) => this.serve(connection));
+        this.server.on("error", (error) => (0, debug_1.debug)("owner server error", error.message));
+        this.server.listen(socketPath);
+    }
+    stop() {
+        for (const guest of this.guests.values())
+            guest.close();
+        this.guests.clear();
+        this.server.close();
+        node_fs_1.default.rmSync(this.socketPath, { force: true });
+        node_fs_1.default.rmSync(this.frameDir, { recursive: true, force: true });
+    }
+    serve(connection) {
+        connection.setEncoding("utf8");
+        connection.on("error", () => { });
+        let buffer = "";
+        let route = null;
+        let owned = null;
+        connection.on("data", (chunk) => {
+            buffer += chunk;
+            let newline = buffer.indexOf("\n");
+            while (newline >= 0) {
+                const line = buffer.slice(0, newline);
+                buffer = buffer.slice(newline + 1);
+                newline = buffer.indexOf("\n");
+                if (!line.trim())
+                    continue;
+                if (route) {
+                    route(line);
+                    continue;
+                }
+                const opened = this.open(connection, line);
+                route = opened.route;
+                owned = opened.guest;
+            }
+        });
+        connection.on("close", () => {
+            if (owned) {
+                (0, debug_1.debug)("guest gone", { pane: owned.pane, name: owned.name });
+                this.guests.delete(owned.pane);
+                owned.gone();
+            }
+        });
+    }
+    open(connection, line) {
+        let opening;
+        try {
+            opening = JSON.parse(line);
+        }
+        catch {
+            connection.destroy();
+            return { route: () => { }, guest: null };
+        }
+        if (opening.method === "pane.graphics.info") {
+            const cell = this.cell();
+            const result = {
+                type: "pane_graphics_info",
+                cell_width_px: cell.width,
+                cell_height_px: cell.height,
+                pane_visible: true,
+                file_frame_directory: this.frameDir,
+                file_frame_formats: ["bgra"],
+                file_frame_transport: "direct-kitty",
+            };
+            connection.end(`${JSON.stringify({ id: opening.id ?? "info", result })}\n`);
+            return { route: () => { }, guest: null };
+        }
+        if (opening.method === "pane.graphics.stream") {
+            const pane = opening.params?.pane_id ?? "";
+            const id = opening.id ?? "stream";
+            connection.write(`${JSON.stringify({ id, result: { type: "ok" } })}\n`);
+            const ack = `${JSON.stringify({ id, result: { type: "pane_graphics_frame_ack" } })}\n`;
+            return {
+                guest: null,
+                route: (header) => {
+                    const guest = this.guests.get(pane);
+                    let frame;
+                    try {
+                        frame = JSON.parse(header);
+                    }
+                    catch {
+                        return;
+                    }
+                    const file = frame.file?.path;
+                    if (!guest?.onFrame || !file || !frame.image_width || !frame.image_height) {
+                        connection.write(ack);
+                        return;
+                    }
+                    let acked = false;
+                    guest.onFrame({
+                        path: file,
+                        width: frame.image_width,
+                        height: frame.image_height,
+                        ack: () => {
+                            if (acked)
+                                return;
+                            acked = true;
+                            connection.write(ack);
+                        },
+                    });
+                },
+            };
+        }
+        const name = typeof opening.name === "string" && opening.name ? opening.name : "app";
+        const pid = typeof opening.pid === "number" ? opening.pid : 0;
+        if (opening.type === "announce" && typeof opening.pane === "string") {
+            if (this.guests.has(opening.pane)) {
+                connection.destroy();
+                return { route: () => { }, guest: null };
+            }
+            const guest = new Guest(opening.pane, name, pid, null, connection);
+            this.guests.set(guest.pane, guest);
+            (0, debug_1.debug)("guest announced", { pane: guest.pane, name });
+            this.onJoin?.(guest);
+            connection.on("close", () => {
+                if (guest.pending) {
+                    this.guests.delete(guest.pane);
+                    guest.gone();
+                }
+            });
+            return { route: () => { }, guest: null };
+        }
+        if (opening.type === "join" && typeof opening.pane === "string") {
+            const announced = this.guests.get(opening.pane);
+            if (announced) {
+                if (!announced.pending) {
+                    connection.destroy();
+                    return { route: () => { }, guest: null };
+                }
+                announced.attach(connection, pid);
+                (0, debug_1.debug)("guest joined", { pane: announced.pane, name: announced.name, pid });
+                return { route: (line) => announced.handleLine(line), guest: announced };
+            }
+            const guest = new Guest(opening.pane, name, pid, connection, null);
+            this.guests.set(guest.pane, guest);
+            (0, debug_1.debug)("guest joined", { pane: guest.pane, name: guest.name, pid: guest.pid });
+            this.onJoin?.(guest);
+            return { route: (line) => guest.handleLine(line), guest };
+        }
+        connection.destroy();
+        return { route: () => { }, guest: null };
+    }
+}
+exports.OwnerServer = OwnerServer;

package/dist/host/shell.d.ts

@@ -0,0 +1,35 @@
+import type { EngineKeyEvent } from "../react";
+import type { Guest } from "./server";
+export interface ShellTab {
+    key: string;
+    guest: Guest | null;
+    label: string;
+}
+export declare class Shell {
+    private readonly ownerLabel;
+    private guests;
+    private activeIndex;
+    private restoreFocus;
+    private readonly listeners;
+    private snapshot;
+    constructor(ownerLabel: () => string);
+    subscribe: (listener: () => void) => () => void;
+    get: () => {
+        tabs: ShellTab[];
+        active: number;
+    };
+    get active(): number;
+    guestActive(): boolean;
+    hasGuests(): boolean;
+    activeGuest(): Guest | null;
+    add(guest: Guest): void;
+    remove(guest: Guest): void;
+    onCloseOwner: (() => void) | null;
+    close(index: number): void;
+    successor(): Guest | null;
+    others(except: Guest): Guest[];
+    activate(index: number): void;
+    rememberFocus(restore: () => void): void;
+    changed(): void;
+    handleKey(event: EngineKeyEvent): boolean;
+}