@zenbu-labs/pixel 0.0.14 → 0.0.16

package/dist/index.d.ts

@@ -11,7 +11,8 @@ 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 { Box, Text, Input, Image, MarkedText, Path, Markdown, appLog, useTerminalColors, setClipboard, setPointerShape, requestClipboardImage, highlight, diff, parseMarkdown, HIGHLIGHT_CAPTURES, Surface, SurfaceCapture, captureFilmstrip, encodeRecording, engineLogs, useStore, } from "./react";
+export type { LogRow, LogBuffer } 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

@@ -1,6 +1,6 @@
 "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;
+exports.makeTheme = exports.useStore = exports.engineLogs = 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; } });
@@ -35,5 +35,7 @@ Object.defineProperty(exports, "Surface", { enumerable: true, get: function () {
 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; } });
+Object.defineProperty(exports, "engineLogs", { enumerable: true, get: function () { return react_1.engineLogs; } });
+Object.defineProperty(exports, "useStore", { enumerable: true, get: function () { return react_1.useStore; } });
 var theme_1 = require("./theme");
 Object.defineProperty(exports, "makeTheme", { enumerable: true, get: function () { return theme_1.makeTheme; } });

package/dist/react/devtools/controller.d.ts

@@ -13,6 +13,8 @@ export declare function setHighlight(id: number | null, area?: HighlightArea): v
 export declare function setPicking(on: boolean): void;
 export declare function toggleExpanded(id: number): void;
 export declare function setCpuThrottle(rate: number): void;
+export declare function setMaxFps(fps: number): void;
+export declare function setHighlightTransmits(on: boolean): void;
 export declare function requestLayout(): void;
 export declare function startRecording(): void;
 export declare function stopRecording(): void;

package/dist/react/devtools/controller.js

@@ -13,6 +13,8 @@ exports.setHighlight = setHighlight;
 exports.setPicking = setPicking;
 exports.toggleExpanded = toggleExpanded;
 exports.setCpuThrottle = setCpuThrottle;
+exports.setMaxFps = setMaxFps;
+exports.setHighlightTransmits = setHighlightTransmits;
 exports.requestLayout = requestLayout;
 exports.startRecording = startRecording;
 exports.stopRecording = stopRecording;
@@ -55,11 +57,14 @@ function openDevtools(selectId) {
     stores_1.devtoolsStore.update((s) => ({ ...s, open: true }));
     if (selectId != null)
         selectNode(selectId, true);
+    engineOp({ op: "setLogCapture", on: true });
     engineOp({ op: "setSplit", fraction: exports.DEFAULT_SPLIT });
 }
 function closeDevtools() {
     stores_1.devtoolsStore.update((s) => ({ ...s, open: false }));
     setHighlight(null);
+    engineOp({ op: "setLogCapture", on: false });
+    stores_1.engineLogs.clear();
     engineOp({ op: "setSplit", fraction: null });
 }
 function toggleDevtools() {
@@ -132,6 +137,14 @@ function setCpuThrottle(rate) {
     stores_1.devtoolsStore.update((s) => ({ ...s, cpuRate: rate }));
     engineOp({ op: "setCpuThrottle", rate });
 }
+function setMaxFps(fps) {
+    stores_1.devtoolsStore.update((s) => ({ ...s, maxFps: fps }));
+    engineOp({ op: "setRender", maxFps: fps });
+}
+function setHighlightTransmits(on) {
+    stores_1.devtoolsStore.update((s) => ({ ...s, highlightTransmits: on }));
+    engineOp({ op: "setRender", highlightTransmits: on });
+}
 function requestLayout() {
     const b = (0, reconciler_config_1.devtoolsBridge)();
     b.push(reconciler_config_1.APP_VIEW, { op: "queryLayout" });

package/dist/react/devtools/export-profile.js

@@ -84,7 +84,21 @@ const GLOSSARY = {
     aggregates_note: "paint.* spans are per-frame aggregates laid out back-to-back under tree.paint: " +
         "durations and counts are real, start times are not the true instants.",
     counters: "Point samples: 'bytes' = escape-sequence bytes written per frame; 'paint.nodes' / " +
-        "'paint.glyphs' = nodes visited / glyphs drawn per paint.",
+        "'paint.glyphs' = nodes visited / glyphs drawn per paint; 'present.patches' = damaged " +
+        "rects sent as separate images that frame, 'present.pixels' = pixels handed to the " +
+        "terminal (the whole frame when a full image went out), 'present.whole_frame' = a frame " +
+        "that fell back to one full image because too much changed or the patch pool was full. " +
+        "Per-stage pixel counts show amplification along the pipeline: 'surface.damage_px' = area " +
+        "of the dirty rects the browser reported, 'surface.changed_px' = area that actually changed " +
+        "after comparing, 'paint.px' = area repainted in the view, 'compose.px' = area copied into " +
+        "the frame, 'present.pixels' = area handed to the terminal. Each should be close to the one " +
+        "before it; a jump marks work done on pixels that did not change. 'present.compactions' " +
+        "= live patches folded into one image, re-sending their union, to free image ids or " +
+        "placements; 'present.absorbed' = a mostly hidden patch deleted as a new one grew over it; " +
+        "'present.tiles' = tiles outside the opaque zones re-sent because their pixels changed. " +
+        "'cpu.frame_thread_us' / 'cpu.frame_process_us' = CPU time the engine thread / the whole " +
+        "process burned during that frame (spans record wall time on one thread and miss worker " +
+        "threads and kernel time); 'cpu.convert_thread_us' = the same for one surface compare.",
     cpuThrottle_note: "meta.cpuThrottle > 1 means the engine and JS threads were duty-cycle suspended to " +
         "simulate a CPU that many times slower; durations are inflated accordingly. Throttle " +
         "changes mid-recording appear as 'cpu throttle Nx' interactions.",

package/dist/react/devtools/profiler.js

@@ -364,6 +364,21 @@ function ProfilerPanel(props) {
                             const rates = [1, 2, 4, 10];
                             const next = rates[(rates.indexOf(devtools.cpuRate) + 1) % rates.length];
                             (0, controller_1.setCpuThrottle)(next);
+                        } }), (0, jsx_runtime_1.jsx)(ui_1.Button, { rem: rem, label: "outline sends", active: devtools.highlightTransmits, onClick: () => (0, controller_1.setHighlightTransmits)(!devtools.highlightTransmits) }), (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.faint, fontSize: rem * 0.66, wrap: false }, children: "fps" }), (0, jsx_runtime_1.jsx)(components_1.Input, { style: {
+                            width: rem * 2.6,
+                            height: rem * 1.3,
+                            fontSize: rem * 0.7,
+                            color: theme_1.theme.text,
+                            font: theme_1.MONO,
+                            wrap: false,
+                            padding: { left: rem * 0.3, right: rem * 0.3 },
+                            border: { width: 1, color: theme_1.theme.border },
+                            cornerRadius: rem * 0.2,
+                        }, defaultValue: devtools.maxFps === 0 ? "off" : String(devtools.maxFps), onSubmit: (text) => {
+                            const value = text.trim().toLowerCase();
+                            const fps = value === "off" || value === "0" ? 0 : Number(value);
+                            if (Number.isFinite(fps) && fps >= 0)
+                                (0, controller_1.setMaxFps)(fps);
                         } }), session && !exportedTo && (0, jsx_runtime_1.jsx)(Summary, { session: session, rem: rem }), exportedTo && ((0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.ok, fontSize: rem * 0.66, font: theme_1.MONO, wrap: false }, children: exportedTo })), (0, jsx_runtime_1.jsx)(components_1.Box, { style: { flexGrow: 1 } }), (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.faint, fontSize: rem * 0.62, wrap: false }, children: "f=fit" })] }), (0, jsx_runtime_1.jsx)(ui_1.Divider, {}), state.recording ? ((0, jsx_runtime_1.jsx)(ui_1.Empty, { rem: rem, text: "Recording\u2026" })) : state.pendingStop ? ((0, jsx_runtime_1.jsx)(ui_1.Empty, { rem: rem, text: "Waiting for profile\u2026" })) : !session || !viewport ? ((0, jsx_runtime_1.jsx)(ui_1.Empty, { rem: rem, text: "" })) : ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: {
                     flexDirection: "column",
                     flexGrow: 1,

package/dist/react/devtools/stores.d.ts

@@ -80,13 +80,16 @@ export interface ProfilerState {
 export declare const profilerStore: import("./store").Store<ProfilerState>;
 export declare const pendingSpans: TimeSpan[];
 export declare function recordSpan(span: TimeSpan): void;
+export type DevtoolsTab = "elements" | "console" | "profiler";
 export interface DevtoolsState {
     open: boolean;
-    tab: "elements" | "console" | "profiler";
+    tab: DevtoolsTab;
     width: number;
     height: number;
     basePx: number;
     cpuRate: number;
+    highlightTransmits: boolean;
+    maxFps: number;
     background: Rgba | null;
 }
 export declare const devtoolsStore: import("./store").Store<DevtoolsState>;

package/dist/react/devtools/stores.js

@@ -37,5 +37,7 @@ exports.devtoolsStore = (0, store_1.createStore)({
     height: 0,
     basePx: 16,
     cpuRate: 1,
+    highlightTransmits: false,
+    maxFps: 0,
     background: null,
 });

package/dist/react/index.d.ts

@@ -4,14 +4,16 @@ import type { EngineInfo, HostOptions, TerminalColors } from "./native";
 import { Surface } from "./surface";
 import { closeDevtools, engineOp, openDevtools, requestLayout, toggleDevtools } from "./devtools/controller";
 import type { Rgba } from "./native";
-import { inspectorStore, LayoutSnapshot } from "./devtools/stores";
+import { DevtoolsTab, inspectorStore, LayoutSnapshot } from "./devtools/stores";
 import type { LogLevel } from "./devtools/store";
 declare function appLog(level: LogLevel, target: string, text: string): void;
 export { Box, Text, Input, Image, MarkedText, Path, } from "./components";
 export type { NodeHandle } from "./components";
 export { appLog };
-export { layoutStore, profilerStore } from "./devtools/stores";
-export type { LayoutSnapshot, ProfileSession } from "./devtools/stores";
+export { layoutStore, profilerStore, engineLogs } from "./devtools/stores";
+export { useStore } from "./devtools/store";
+export type { LogRow, LogBuffer } from "./devtools/store";
+export type { DevtoolsTab, LayoutSnapshot, ProfileSession } from "./devtools/stores";
 export type { BoxProps, TextProps, TextSpan, InputGutter, InputProps, MarkRef, PasteSource, PastedImage, CaretInfo, ChangeInfo, ChangeSource, ImageProps, ImageAdvancedProps, MarkedTextProps, ClickEvent, ContainerSelection, DragEvent, EventMods, MouseMoveEvent, ScrollEvent, SelectionPart, WheelEvent, PointerEvent, ShapeStroke, PathProps, } from "./reconciler-config";
 export type { Color, Edges, InsetEdges, InsetValue, ScrollbarStyle, Style } from "./styles";
 export type { DiffEmphasis, DiffRow, EngineInfo, HighlightSpan, HostOptions, MarkdownBlock, MarkdownCell, MarkdownRow, MarkdownSpan, Rgba, SurfaceShm, TerminalColors, } from "./native";
@@ -51,6 +53,7 @@ export interface RootOptions {
     }) => void;
     onPaste?: (text: string) => void;
     onFocus?: (focused: boolean) => void;
+    onVisible?: (visible: boolean) => void;
     onPasteImage?: (image: PastedImage) => void;
     onEngineExit?: (error: string | null) => void;
     onResize?: (size: {
@@ -73,6 +76,13 @@ export interface RootOptions {
     wrapper?: "tmux";
     sessionEnv?: NodeJS.ProcessEnv;
 }
+export interface RenderSettings {
+    maxFps?: number;
+    frameBudgetMbps?: number;
+    highlightTransmits?: boolean;
+    compareFrames?: boolean;
+    frameEvents?: boolean;
+}
 export interface PixelRoot {
     info: EngineInfo;
     sharedTextures: boolean;
@@ -82,8 +92,13 @@ export interface PixelRoot {
     createSurface(): Surface;
     surfaceStats(): SurfaceStats;
     stop(): void;
-    openDevtools(): void;
+    openDevtools(tab?: DevtoolsTab): void;
     closeDevtools(): void;
+    startProfile(): void;
+    stopProfile(): Promise<string | null>;
+    setRender(settings: RenderSettings): void;
+    setLogFile(path: string | null): void;
+    highlightTransmits(): boolean;
     nudgeResize(): void;
     queryLayout(): void;
     setPointerShape(shape: string): void;

package/dist/react/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.inspectorStore = exports.engineOp = exports.requestLayout = exports.toggleDevtools = exports.closeDevtools = exports.openDevtools = exports.Markdown = exports.SurfaceCapture = exports.Surface = exports.useTerminalColors = exports.parseMarkdown = exports.highlight = exports.encodeRecording = exports.diff = exports.captureFilmstrip = exports.HIGHLIGHT_CAPTURES = exports.profilerStore = exports.layoutStore = exports.Path = exports.MarkedText = exports.Image = exports.Input = exports.Text = exports.Box = void 0;
+exports.inspectorStore = exports.engineOp = exports.requestLayout = exports.toggleDevtools = exports.closeDevtools = exports.openDevtools = exports.Markdown = exports.SurfaceCapture = exports.Surface = exports.useTerminalColors = exports.parseMarkdown = exports.highlight = exports.encodeRecording = exports.diff = exports.captureFilmstrip = exports.HIGHLIGHT_CAPTURES = exports.useStore = exports.engineLogs = exports.profilerStore = exports.layoutStore = exports.Path = exports.MarkedText = exports.Image = exports.Input = exports.Text = exports.Box = void 0;
 exports.appLog = appLog;
 exports.setKeyCapture = setKeyCapture;
 exports.setPointerShape = setPointerShape;
@@ -11,6 +11,7 @@ const react_1 = require("react");
 const constants_1 = require("react-reconciler/constants");
 const reconciler_config_1 = require("./reconciler-config");
 const surface_1 = require("./surface");
+const frame_rate_1 = require("../web/frame-rate");
 const app_1 = require("./devtools/app");
 const console_capture_1 = require("./devtools/console-capture");
 const controller_1 = require("./devtools/controller");
@@ -38,6 +39,9 @@ Object.defineProperty(exports, "Path", { enumerable: true, get: function () { re
 var stores_2 = require("./devtools/stores");
 Object.defineProperty(exports, "layoutStore", { enumerable: true, get: function () { return stores_2.layoutStore; } });
 Object.defineProperty(exports, "profilerStore", { enumerable: true, get: function () { return stores_2.profilerStore; } });
+Object.defineProperty(exports, "engineLogs", { enumerable: true, get: function () { return stores_2.engineLogs; } });
+var store_1 = require("./devtools/store");
+Object.defineProperty(exports, "useStore", { enumerable: true, get: function () { return store_1.useStore; } });
 var native_1 = require("./native");
 Object.defineProperty(exports, "HIGHLIGHT_CAPTURES", { enumerable: true, get: function () { return native_1.HIGHLIGHT_CAPTURES; } });
 Object.defineProperty(exports, "captureFilmstrip", { enumerable: true, get: function () { return native_1.captureFilmstrip; } });
@@ -129,7 +133,7 @@ function createRoot(options = {}) {
         stores_1.engineLogs.push("error", "react", String(error));
     }, null);
     if (devtoolsEnabled)
-        enableDevtools();
+        (0, console_capture_1.installConsoleCapture)();
     const fontIds = new Map();
     const fontRequests = new Map();
     const retargets = [];
@@ -278,6 +282,8 @@ function createRoot(options = {}) {
                 if (view === reconciler_config_1.APP_VIEW) {
                     info.width = size.width;
                     info.height = size.height;
+                    info.cellWidth = event.cellWidth;
+                    info.cellHeight = event.cellHeight;
                     info.basePx = size.basePx;
                     options.onResize?.(size);
                 }
@@ -313,6 +319,9 @@ function createRoot(options = {}) {
             case "focus":
                 options.onFocus?.(!!event.focused);
                 break;
+            case "visible":
+                options.onVisible?.(!!event.visible);
+                break;
             case "devtools":
                 enableDevtools();
                 (0, controller_1.attachDevtools)(bridge);
@@ -486,11 +495,54 @@ function createRoot(options = {}) {
                 process.stdout.off("resize", forwardResize);
             process.off("exit", restore);
         },
-        openDevtools() {
+        openDevtools(tab) {
             enableDevtools();
             (0, controller_1.attachDevtools)(bridge);
+            if (tab)
+                stores_1.devtoolsStore.update((s) => ({ ...s, tab }));
             (0, controller_1.openDevtools)();
         },
+        startProfile() {
+            enableDevtools();
+            (0, controller_1.attachDevtools)(bridge);
+            (0, controller_1.startRecording)();
+        },
+        stopProfile() {
+            return new Promise((resolve) => {
+                const now = stores_1.profilerStore.get();
+                if (!now.recording && !now.pendingStop) {
+                    resolve((0, export_profile_1.exportProfile)());
+                    return;
+                }
+                const unsubscribe = stores_1.profilerStore.subscribe(() => {
+                    const state = stores_1.profilerStore.get();
+                    if (state.recording || state.pendingStop)
+                        return;
+                    unsubscribe();
+                    resolve((0, export_profile_1.exportProfile)());
+                });
+                (0, controller_1.stopRecording)();
+            });
+        },
+        setRender(settings) {
+            // The browser should not bother producing frames the engine would only drop.
+            if (settings.maxFps !== undefined)
+                (0, frame_rate_1.requestFrameRate)(settings.maxFps);
+            stores_1.devtoolsStore.update((s) => ({
+                ...s,
+                maxFps: settings.maxFps ?? s.maxFps,
+                highlightTransmits: settings.highlightTransmits ?? s.highlightTransmits,
+            }));
+            bridge.push(reconciler_config_1.APP_VIEW, { op: "setRender", ...settings });
+            bridge.flush();
+        },
+        setLogFile(path) {
+            bridge.push(reconciler_config_1.APP_VIEW, { op: "setLogFile", path });
+            bridge.flush();
+        },
+        highlightTransmits() {
+            return stores_1.devtoolsStore.get().highlightTransmits;
+        },
         closeDevtools() {
             if ((0, reconciler_config_1.devtoolsBridge)() === bridge)
                 (0, controller_1.closeDevtools)();

package/dist/react/native.d.ts

@@ -15,7 +15,7 @@ export interface NativeEngine {
     info(): string;
     applyOps(ops: string): void;
     updateSurface(id: number, bgra: Buffer, width: number, height: number, damage?: DamageRect): void;
-    updateSurfaceTexture?(id: number, handle: Buffer, damage?: DamageRect): void;
+    updateSurfaceTexture?(id: number, handle: number, damageX: number, damageY: number, damageWidth: number, damageHeight: number): void;
     updateSurfaceShm?(id: number, shm: SurfaceShm, damage?: DamageRect, released?: (...args: unknown[]) => void): void;
     removeSurface(id: number): void;
     surfaceStats(): string;

package/dist/react/styles.d.ts

@@ -72,6 +72,7 @@ export interface Style {
     font?: number;
     hoverBackground?: Color;
     hoverColor?: Color;
+    opaque?: boolean;
     scrollbar?: ScrollbarStyle;
     wrap?: boolean;
     ellipsis?: boolean;

package/dist/react/styles.js

@@ -70,6 +70,7 @@ function serializeStyle(style) {
         wrap: style.wrap,
         ellipsis: style.ellipsis,
         selectable: style.selectable,
+        opaque: style.opaque,
         selectionColor: parseColor(style.selectionColor),
         selectionMode: style.selectionMode,
         scrollbar: style.scrollbar && {

package/dist/react/surface.js

@@ -20,7 +20,9 @@ class Surface {
             const submit = this.engine.updateSurfaceTexture;
             if (!submit)
                 throw new Error("IOSurface frames are not supported on this platform");
-            submit.call(this.engine, this.id, frame.ioSurface, frame.damage);
+            const address = frame.ioSurface.readUIntLE(0, 6);
+            const d = frame.damage;
+            submit.call(this.engine, this.id, address, d?.x ?? 0, d?.y ?? 0, d?.width ?? 0, d?.height ?? 0);
         }
         else if ("shm" in frame) {
             const submit = this.engine.updateSurfaceShm;

package/dist/root.js

@@ -164,6 +164,7 @@ function createRoot(options = {}) {
             options.onFocus?.(focused);
             registry?.handleTerminalFocus(focused);
         },
+        onVisible: (visible) => options.onVisible?.(visible),
         onResize: (size) => {
             const ratio = cellZoom.ratio(engineRoot.info);
             if (registry) {
@@ -337,6 +338,12 @@ function createRoot(options = {}) {
             shutdown(code);
         },
     };
+    try {
+        const hz = electron_1.screen.getPrimaryDisplay().displayFrequency;
+        if (hz > 0)
+            engineRoot.setRender({ maxFps: hz });
+    }
+    catch { }
     liveRoots.add(root);
     return root;
 }

package/dist/scale.js

@@ -14,16 +14,16 @@ function hostDisplayScale(terminal, env) {
 class CellZoomFollower {
     last = null;
     ratio(info) {
-        const { height, basePx } = info;
+        const { height, basePx, cellHeight } = info;
+        const rows = cellHeight > 0 ? Math.round(height / cellHeight) : 0;
         const prev = this.last;
-        this.last = { height, basePx };
-        if (!prev || !prev.basePx || !prev.height)
+        this.last = { rows, basePx };
+        if (!prev || !prev.basePx || !prev.rows || !rows)
             return null;
         const ratio = basePx / prev.basePx;
         if (!Number.isFinite(ratio) || ratio <= 0 || Math.abs(ratio - 1) < 0.01)
             return null;
-        const paneRatio = height / prev.height;
-        if (Math.abs(paneRatio - ratio) < 0.04 * ratio)
+        if (rows === prev.rows)
             return null;
         return ratio;
     }

package/dist/terminal/terminals/ghostty.js

@@ -17,7 +17,7 @@ const DIRECTION_CODES = {
     down: "GSdn",
     up: "GSup",
 };
-const GHOSTTY_BINARY = /\/Ghostty\.app\/Contents\/MacOS\/ghostty(\s|$)/;
+const GHOSTTY_BINARY = /\.app\/Contents\/MacOS\/ghostty(\s|$)/;
 function ghosttyAbove(start, processes) {
     for (let pid = start, hops = 0; hops < 64 && processes.has(pid); hops++) {
         const { parent, command } = processes.get(pid);

package/dist/web/frame-rate.d.ts

@@ -1 +1,3 @@
+export declare function requestFrameRate(fps: number): void;
+export declare function onFrameRateChange(listener: () => void): () => void;
 export declare function frameRate(): number;

package/dist/web/frame-rate.js

@@ -1,11 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.requestFrameRate = requestFrameRate;
+exports.onFrameRateChange = onFrameRateChange;
 exports.frameRate = frameRate;
 const electron_1 = require("electron");
+let requested = 0;
+const listeners = new Set();
+function clamp(fps) {
+    return Math.max(1, Math.min(240, Math.round(fps)));
+}
+function requestFrameRate(fps) {
+    const next = Number.isFinite(fps) && fps > 0 ? clamp(fps) : 0;
+    if (next === requested)
+        return;
+    requested = next;
+    for (const listener of listeners)
+        listener();
+}
+function onFrameRateChange(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
 function frameRate() {
     const configured = Number(process.env.PIXEL_FPS);
     if (Number.isFinite(configured) && configured > 0) {
-        return Math.max(1, Math.min(240, Math.round(configured)));
+        return clamp(configured);
+    }
+    if (requested > 0) {
+        return requested;
     }
     const fastest = Math.max(0, ...electron_1.screen.getAllDisplays().map((display) => display.displayFrequency));
     return fastest > 0 ? Math.min(240, Math.round(fastest)) : 60;

package/dist/web/host.d.ts

@@ -32,6 +32,7 @@ export declare class PageHost {
     private layout;
     private state;
     private stopped;
+    private stopWatchingFrameRate?;
     private contentFocused;
     private readonly input;
     private readonly clipboardRead;

package/dist/web/host.js

@@ -62,6 +62,7 @@ class PageHost {
     layout;
     state;
     stopped = false;
+    stopWatchingFrameRate;
     contentFocused = false;
     input;
     clipboardRead;
@@ -133,6 +134,7 @@ class PageHost {
             if (this.quitLink(url))
                 event.preventDefault();
         });
+        this.stopWatchingFrameRate = (0, frame_rate_1.onFrameRateChange)(this.onDisplayChange);
         electron_1.screen.on("display-added", this.onDisplayChange);
         electron_1.screen.on("display-removed", this.onDisplayChange);
         electron_1.screen.on("display-metrics-changed", this.onDisplayChange);
@@ -424,6 +426,8 @@ class PageHost {
         for (const popup of [...this.popups])
             popup.close();
         this.devtools?.close();
+        this.stopWatchingFrameRate?.();
+        this.stopWatchingFrameRate = undefined;
         electron_1.screen.off("display-added", this.onDisplayChange);
         electron_1.screen.off("display-removed", this.onDisplayChange);
         electron_1.screen.off("display-metrics-changed", this.onDisplayChange);

package/dist/webview.js

@@ -431,6 +431,7 @@ exports.WebView = (0, react_1.forwardRef)(function WebView(props, ref) {
                     height: page.height,
                     cornerRadius: props.style?.cornerRadius,
                     background: theme.bg,
+                    opaque: !props.browserWindowOptions?.transparent,
                 }, onPointer: (event) => {
                     if (menuRef.current) {
                         if (event.kind === "down")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenbu-labs/pixel",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "[placeholder copy: Electron apps that render into your terminal pane]",
   "license": "MIT",
   "repository": {
@@ -58,10 +58,10 @@
     "react": "^18.3.1"
   },
   "optionalDependencies": {
-    "@zenbu-labs/pixel-native-darwin-arm64": "0.0.14",
-    "@zenbu-labs/pixel-native-darwin-x64": "0.0.14",
-    "@zenbu-labs/pixel-native-linux-arm64": "0.0.14",
-    "@zenbu-labs/pixel-native-linux-x64": "0.0.14"
+    "@zenbu-labs/pixel-native-darwin-arm64": "0.0.16",
+    "@zenbu-labs/pixel-native-darwin-x64": "0.0.16",
+    "@zenbu-labs/pixel-native-linux-arm64": "0.0.16",
+    "@zenbu-labs/pixel-native-linux-x64": "0.0.16"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",