@zenbu-labs/pixel 0.0.0 → 0.0.13

package/dist/web/popup.d.ts

@@ -0,0 +1,40 @@
+import type { BrowserWindow } from "electron";
+import type { Surface } from "../react";
+import { PageInput } from "./input";
+import type { ZoomDirection } from "./zoom";
+export interface PopupState {
+    url: string;
+    title: string;
+    loading: boolean;
+    width: number;
+    height: number;
+}
+export declare class PopupWindow {
+    readonly input: PageInput;
+    cursorShape: string;
+    onCursorChange: (() => void) | null;
+    private readonly window;
+    private readonly surface;
+    private readonly onChange;
+    private readonly renderScale;
+    private stateValue;
+    private visible;
+    private focused;
+    private cdpAttached;
+    private destroyed;
+    constructor(window: BrowserWindow, surface: Surface, size: {
+        width: number;
+        height: number;
+    }, renderScale: number, scale: () => number, onChange: () => void, onClosed: () => void, openWindow?: (details: Electron.HandlerDetails) => Electron.WindowOpenHandlerResponse);
+    get state(): PopupState;
+    close(): void;
+    zoom(direction: ZoomDirection): number;
+    scaleZoom(ratio: number): number;
+    setVisible(visible: boolean): void;
+    private screencastParams;
+    private startStreaming;
+    private focus;
+    private attachCdp;
+    private cdp;
+    private update;
+}

package/dist/web/popup.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupWindow = void 0;
+const electron_1 = require("electron");
+const cursor_1 = require("./cursor");
+const input_1 = require("./input");
+const zoom_1 = require("./zoom");
+class PopupWindow {
+    input;
+    cursorShape = "default";
+    onCursorChange = null;
+    window;
+    surface;
+    onChange;
+    renderScale;
+    stateValue;
+    visible = true;
+    focused = false;
+    cdpAttached = false;
+    destroyed = false;
+    constructor(window, surface, size, renderScale, scale, onChange, onClosed, openWindow) {
+        this.window = window;
+        this.surface = surface;
+        this.onChange = onChange;
+        this.renderScale = renderScale;
+        this.stateValue = {
+            url: window.webContents.getURL(),
+            title: "",
+            loading: true,
+            width: size.width,
+            height: size.height,
+        };
+        this.input = new input_1.PageInput({
+            contents: () => this.window.webContents,
+            scale,
+            focus: () => this.focus(),
+            cdp: (method, params) => this.cdp(method, params),
+        });
+        const contents = window.webContents;
+        contents.on("page-title-updated", (_event, title) => this.update({ title }));
+        contents.on("did-navigate", (_event, url) => this.update({ url }));
+        contents.on("did-navigate-in-page", (_event, url, mainFrame) => {
+            if (mainFrame)
+                this.update({ url });
+        });
+        contents.on("did-start-loading", () => this.update({ loading: true }));
+        contents.on("did-stop-loading", () => this.update({ loading: false }));
+        contents.on("cursor-changed", (_event, type) => {
+            const shape = (0, cursor_1.cursorShapeFor)(type);
+            if (shape === this.cursorShape)
+                return;
+            this.cursorShape = shape;
+            this.onCursorChange?.();
+        });
+        contents.setWindowOpenHandler(openWindow ??
+            (({ url }) => {
+                void contents.loadURL(url);
+                return { action: "deny" };
+            }));
+        window.on("closed", () => {
+            this.destroyed = true;
+            this.surface.clear();
+            onClosed();
+        });
+        void this.startStreaming(size, renderScale).catch(() => { });
+        this.focus();
+    }
+    get state() {
+        return this.stateValue;
+    }
+    close() {
+        if (!this.destroyed)
+            this.window.destroy();
+    }
+    zoom(direction) {
+        return (0, zoom_1.stepZoom)(this.window.webContents, direction);
+    }
+    scaleZoom(ratio) {
+        return (0, zoom_1.scaleZoom)(this.window.webContents, ratio);
+    }
+    setVisible(visible) {
+        if (this.visible === visible || this.destroyed)
+            return;
+        this.visible = visible;
+        void this.cdp(visible ? "Page.startScreencast" : "Page.stopScreencast", {
+            ...(visible ? this.screencastParams() : {}),
+        }).catch(() => { });
+    }
+    screencastParams() {
+        return {
+            format: "png",
+            everyNthFrame: 1,
+            maxWidth: Math.ceil(this.stateValue.width * this.renderScale),
+            maxHeight: Math.ceil(this.stateValue.height * this.renderScale),
+        };
+    }
+    async startStreaming(size, renderScale) {
+        await this.attachCdp();
+        this.window.webContents.debugger.on("message", (_event, method, params) => {
+            if (method !== "Page.screencastFrame")
+                return;
+            const frame = params;
+            void this.cdp("Page.screencastFrameAck", { sessionId: frame.sessionId }).catch(() => { });
+            if (!this.visible || this.destroyed)
+                return;
+            const image = electron_1.nativeImage.createFromBuffer(Buffer.from(frame.data, "base64"));
+            if (image.isEmpty())
+                return;
+            const dims = image.getSize();
+            this.surface.present({ bgra: image.toBitmap(), width: dims.width, height: dims.height });
+        });
+        await this.cdp("Page.enable");
+        await this.cdp("Emulation.setDeviceMetricsOverride", {
+            width: size.width,
+            height: size.height,
+            deviceScaleFactor: renderScale,
+            mobile: false,
+        });
+        await this.cdp("Page.startScreencast", this.screencastParams());
+    }
+    focus() {
+        if (this.focused || this.destroyed)
+            return;
+        this.focused = true;
+        this.window.focus();
+        this.window.webContents.focus();
+        return this.cdp("Emulation.setFocusEmulationEnabled", { enabled: true }).then(() => undefined, () => undefined);
+    }
+    async attachCdp() {
+        if (this.cdpAttached)
+            return;
+        this.window.webContents.debugger.attach("1.3");
+        this.cdpAttached = true;
+    }
+    async cdp(method, params) {
+        await this.attachCdp();
+        return this.window.webContents.debugger.sendCommand(method, params);
+    }
+    update(change) {
+        this.stateValue = { ...this.stateValue, ...change };
+        this.onChange();
+    }
+}
+exports.PopupWindow = PopupWindow;

package/dist/web/session.d.ts

@@ -0,0 +1,20 @@
+import type { Session } from "electron";
+import type { PageHost } from "./host";
+export interface TerminalTheme {
+    background: number[];
+    foreground: number[];
+    ansi: (number[] | null)[];
+}
+export declare const THEME_CHANNEL = "pixel:theme";
+export declare const THEME_REQUEST_CHANNEL = "pixel:theme-request";
+export declare const QUIT_CHANNEL = "pixel:quit";
+export declare function prepareSession(ses: Session): void;
+export declare function flushSessions(): void;
+export interface EmbedderHost {
+    hosts(): Iterable<PageHost>;
+    theme(): TerminalTheme | null;
+    quit(host: PageHost): void;
+}
+export declare function installEmbedderApi(target: EmbedderHost): void;
+export declare function uninstallEmbedderApi(target: EmbedderHost): void;
+export declare function broadcastTheme(target: EmbedderHost, theme: TerminalTheme | null): void;

package/dist/web/session.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QUIT_CHANNEL = exports.THEME_REQUEST_CHANNEL = exports.THEME_CHANNEL = void 0;
+exports.prepareSession = prepareSession;
+exports.flushSessions = flushSessions;
+exports.installEmbedderApi = installEmbedderApi;
+exports.uninstallEmbedderApi = uninstallEmbedderApi;
+exports.broadcastTheme = broadcastTheme;
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const electron_1 = require("electron");
+const browser_session_1 = require("./browser-session");
+exports.THEME_CHANNEL = "pixel:theme";
+exports.THEME_REQUEST_CHANNEL = "pixel:theme-request";
+exports.QUIT_CHANNEL = "pixel:quit";
+// library into an app keeps working.
+const API_PRELOAD_SOURCE = `if (process.isMainFrame) {
+  const { ipcRenderer } = require("electron");
+  let current = null;
+  const subscribers = new Set();
+  ipcRenderer.on("pixel:theme", (_event, theme) => {
+    current = theme;
+    for (const subscriber of subscribers) {
+      try { subscriber(theme); } catch {}
+    }
+  });
+  ipcRenderer.send("pixel:theme-request");
+  globalThis.pixel = {
+    theme: () => current,
+    onTheme(subscriber) {
+      subscribers.add(subscriber);
+      if (current) { try { subscriber(current); } catch {} }
+      return () => subscribers.delete(subscriber);
+    },
+    quit: () => ipcRenderer.send("pixel:quit"),
+  };
+}
+`;
+let apiPreloadFile = null;
+function apiPreloadPath() {
+    if (!apiPreloadFile) {
+        apiPreloadFile = node_path_1.default.join(electron_1.app.getPath("userData"), "pixel-api-preload.js");
+        node_fs_1.default.writeFileSync(apiPreloadFile, API_PRELOAD_SOURCE);
+    }
+    return apiPreloadFile;
+}
+const prepared = new Set();
+function prepareSession(ses) {
+    if (prepared.has(ses))
+        return;
+    prepared.add(ses);
+    (0, browser_session_1.configureBrowserSession)(ses);
+    ses.registerPreloadScript({ type: "frame", filePath: apiPreloadPath() });
+}
+function flushSessions() {
+    for (const ses of prepared) {
+        try {
+            ses.flushStorageData();
+        }
+        catch { }
+    }
+}
+const embedders = new Set();
+function ownerOf(event) {
+    if (event.senderFrame !== event.sender.mainFrame)
+        return null;
+    for (const embedder of embedders) {
+        for (const host of embedder.hosts()) {
+            if (host.hasContents(event.sender.id))
+                return { embedder, host };
+        }
+    }
+    return null;
+}
+function onThemeRequest(event) {
+    const owner = ownerOf(event);
+    if (!owner)
+        return;
+    const payload = owner.embedder.theme();
+    if (payload)
+        event.sender.send(exports.THEME_CHANNEL, payload);
+}
+function onQuitRequest(event) {
+    const owner = ownerOf(event);
+    if (owner)
+        owner.embedder.quit(owner.host);
+}
+function installEmbedderApi(target) {
+    if (embedders.size === 0) {
+        electron_1.ipcMain.on(exports.THEME_REQUEST_CHANNEL, onThemeRequest);
+        electron_1.ipcMain.on(exports.QUIT_CHANNEL, onQuitRequest);
+    }
+    embedders.add(target);
+}
+function uninstallEmbedderApi(target) {
+    embedders.delete(target);
+    if (embedders.size === 0) {
+        electron_1.ipcMain.removeListener(exports.THEME_REQUEST_CHANNEL, onThemeRequest);
+        electron_1.ipcMain.removeListener(exports.QUIT_CHANNEL, onQuitRequest);
+    }
+}
+function broadcastTheme(target, theme) {
+    if (!theme)
+        return;
+    for (const host of target.hosts())
+        host.sendToPage(exports.THEME_CHANNEL, theme);
+}

package/dist/web/types.d.ts

@@ -0,0 +1,38 @@
+import type { TextureInfo } from "electron";
+export type DevtoolsDock = "bottom" | "right";
+export interface WebViewState {
+    url: string;
+    title: string;
+    loading: boolean;
+    canGoBack: boolean;
+    canGoForward: boolean;
+    findMatches: {
+        active: number;
+        total: number;
+    } | null;
+    zoom: number;
+    favicon: string | null;
+}
+export declare function initialWebViewState(url: string): WebViewState;
+export interface SurfaceLayout {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    scale: number;
+}
+export declare function cssSize(width: number, height: number, scale: number): {
+    width: number;
+    height: number;
+};
+export declare function snapToCssGrid(width: number, height: number, scale: number): {
+    width: number;
+    height: number;
+};
+export declare function damageOf(info: TextureInfo): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | undefined;
+export declare function paintedNothing(info: TextureInfo): boolean;

package/dist/web/types.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initialWebViewState = initialWebViewState;
+exports.cssSize = cssSize;
+exports.snapToCssGrid = snapToCssGrid;
+exports.damageOf = damageOf;
+exports.paintedNothing = paintedNothing;
+function initialWebViewState(url) {
+    return {
+        url,
+        title: "",
+        loading: true,
+        canGoBack: false,
+        canGoForward: false,
+        findMatches: null,
+        zoom: 1,
+        favicon: null,
+    };
+}
+function cssSize(width, height, scale) {
+    return {
+        width: Math.max(1, Math.floor(width / scale)),
+        height: Math.max(1, Math.floor(height / scale)),
+    };
+}
+function snapToCssGrid(width, height, scale) {
+    const css = cssSize(width, height, scale);
+    return { width: Math.round(css.width * scale), height: Math.round(css.height * scale) };
+}
+function damageOf(info) {
+    const rect = info.metadata?.captureUpdateRect;
+    if (!rect || rect.width <= 0 || rect.height <= 0)
+        return undefined;
+    return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+}
+function paintedNothing(info) {
+    const rect = info.metadata?.captureUpdateRect;
+    return !!rect && (rect.width <= 0 || rect.height <= 0);
+}

package/dist/web/zoom.d.ts

@@ -0,0 +1,5 @@
+import type { WebContents } from "electron";
+export type ZoomDirection = 1 | -1 | 0;
+export declare function stepZoom(contents: WebContents, direction: ZoomDirection): number;
+export declare function scaleZoom(contents: WebContents, ratio: number): number;
+export declare function zoomDirection(key: string): ZoomDirection | null;

package/dist/web/zoom.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stepZoom = stepZoom;
+exports.scaleZoom = scaleZoom;
+exports.zoomDirection = zoomDirection;
+const ZOOM_PRESETS = [
+    0.25, 0.33, 0.5, 0.67, 0.75, 0.8, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5,
+];
+function stepZoom(contents, direction) {
+    const current = contents.getZoomFactor();
+    const factor = direction === 0
+        ? 1
+        : direction === 1
+            ? (ZOOM_PRESETS.find((preset) => preset > current * 1.001) ?? ZOOM_PRESETS.at(-1))
+            : ([...ZOOM_PRESETS].reverse().find((preset) => preset < current * 0.999) ??
+                ZOOM_PRESETS[0]);
+    contents.setZoomFactor(factor);
+    return factor;
+}
+function scaleZoom(contents, ratio) {
+    const floor = ZOOM_PRESETS[0];
+    const ceiling = ZOOM_PRESETS.at(-1);
+    const exact = contents.getZoomFactor() * ratio;
+    const factor = Math.min(ceiling, Math.max(floor, Math.round(exact * 1000) / 1000));
+    contents.setZoomFactor(factor);
+    return factor;
+}
+function zoomDirection(key) {
+    if (key === "=" || key === "+")
+        return 1;
+    if (key === "-" || key === "_")
+        return -1;
+    if (key === "0")
+        return 0;
+    return null;
+}

package/dist/webview.d.ts

@@ -0,0 +1,55 @@
+import type { PointerEvent, Style, SurfaceCapture } from "./react";
+import type { DownloadProgress } from "./web/browser-session";
+import type { BrowserWindowOptions, OpenWindowDecision, OpenWindowPolicy } from "./web/host";
+import type { DevtoolsDock, WebViewState } from "./web/types";
+import type { ZoomDirection } from "./web/zoom";
+export type { BrowserWindowOptions, DownloadProgress, OpenWindowDecision, OpenWindowPolicy, WebViewState };
+export interface WebViewProps {
+    src: string;
+    style?: Style;
+    preload?: string;
+    partition?: string;
+    clipboardRead?: boolean;
+    proxy?: string;
+    browserWindowOptions?: BrowserWindowOptions;
+    autoFocus?: boolean;
+    devtools?: boolean | DevtoolsDock;
+    hidden?: boolean;
+    keepFrame?: boolean;
+    onChange?(state: WebViewState): void;
+    onPointer?(event: PointerEvent): void;
+    onContextMenu?(params: Electron.ContextMenuParams): void;
+    onOpenWindow?: OpenWindowPolicy;
+    onDownload?(progress: DownloadProgress): void;
+}
+export interface WebViewHandle {
+    readonly webContents: Electron.WebContents;
+    readonly state: WebViewState;
+    onChange(listener: (state: WebViewState) => void): () => void;
+    loadURL(url: string): void;
+    focus(): void;
+    blur(): void;
+    back(): void;
+    forward(): void;
+    reload(): void;
+    zoom(direction: ZoomDirection): number;
+    find(text: string): void;
+    findNext(forward: boolean): void;
+    stopFind(): void;
+    cdp(method: string, params?: Record<string, unknown>): Promise<Record<string, unknown>>;
+    openDevtools(): void;
+    closeDevtools(): void;
+    closePopup(): void;
+    readonly recording: WebViewRecording;
+}
+export interface WebViewRecording {
+    start(dir: string): SurfaceCapture;
+    onFrame(listener: () => void): () => void;
+    frameSize(): {
+        width: number;
+        height: number;
+    } | null;
+    pinFrameRate(pinned: boolean): void;
+    invalidate(): void;
+}
+export declare const WebView: import("react").ForwardRefExoticComponent<WebViewProps & import("react").RefAttributes<WebViewHandle>>;