@zenbu-labs/pixel 0.1.0 → 0.2.0

package/dist/devtools.d.ts

@@ -1,21 +1,20 @@
 import type { RefObject } from "react";
 import type { Rect } from "./devtools-layout";
-import type { DragEvent, PointerEvent, Style, Surface, WheelEvent } from "./react";
+import type { DragEvent, PointerEvent, PointerShape, Style, Surface, WheelEvent } from "./react";
 import type { Theme } from "./theme";
 import type { DevtoolsDock } from "./web/types";
 import type { WebViewHandle } from "./webview";
-export declare function DevtoolsDockPane({ rect, dock, rem, theme, surface, dividerEngaged, onPointer, onWheel, onHover, onDividerDrag, onDividerHover, }: {
+export declare function DevtoolsDockPane({ rect, dock, rem, theme, surface, dividerEngaged, pointerShape, onPointer, onWheel, onDividerDrag, }: {
     rect: Rect;
     dock: DevtoolsDock;
     rem: number;
     theme: Theme;
     surface: Surface;
     dividerEngaged: boolean;
+    pointerShape: PointerShape;
     onPointer(event: PointerEvent): void;
     onWheel(event: WheelEvent): void;
-    onHover(hovering: boolean): void;
     onDividerDrag(event: DragEvent): void;
-    onDividerHover(hovering: boolean): void;
 }): import("react").JSX.Element;
 export interface DevToolsProps {
     target: RefObject<WebViewHandle | null> | WebViewHandle;

package/dist/devtools.js

@@ -10,7 +10,7 @@ const registry_1 = require("./registry");
 const types_1 = require("./web/types");
 const DIVIDER_ACTIVE = [58, 96, 168, 255];
 const DIVIDER_GRIP = [118, 122, 132, 255];
-function DevtoolsDockPane({ rect, dock, rem, theme, surface, dividerEngaged, onPointer, onWheel, onHover, onDividerDrag, onDividerHover, }) {
+function DevtoolsDockPane({ rect, dock, rem, theme, surface, dividerEngaged, pointerShape, onPointer, onWheel, onDividerDrag, }) {
     const horizontal = dock === "bottom";
     const grab = Math.max(8, Math.round(rem * 0.5));
     const divider = horizontal
@@ -25,14 +25,16 @@ function DevtoolsDockPane({ rect, dock, rem, theme, surface, dividerEngaged, onP
                     width: rect.width,
                     height: rect.height,
                     background: theme.bg,
-                }, onPointer: onPointer, onWheel: onWheel, onMouseEnter: () => onHover(true), onMouseLeave: () => onHover(false) }), (0, jsx_runtime_1.jsx)(react_2.Box, { style: {
+                    pointerShape,
+                }, onPointer: onPointer, onWheel: onWheel }), (0, jsx_runtime_1.jsx)(react_2.Box, { style: {
                     position: "absolute",
                     inset: { top: divider.y, left: divider.x },
                     width: divider.width,
                     height: divider.height,
                     background: dividerEngaged ? [...DIVIDER_ACTIVE] : undefined,
                     cornerRadius: 2,
-                }, onDrag: onDividerDrag, onMouseEnter: () => onDividerHover(true), onMouseLeave: () => onDividerHover(false), children: [-7, 0, 7].map((offset) => ((0, jsx_runtime_1.jsx)(react_2.Box, { style: {
+                    pointerShape: horizontal ? "ns-resize" : "ew-resize",
+                }, onDrag: onDividerDrag, children: [-7, 0, 7].map((offset) => ((0, jsx_runtime_1.jsx)(react_2.Box, { style: {
                         position: "absolute",
                         inset: gripAlong(offset),
                         width: 2,
@@ -54,6 +56,7 @@ function DevTools({ target, style, dock = "right", panel, onAction, keepFrame =
     const rect = (0, layout_1.useNodeRect)(boxRef, registry);
     const surface = (0, react_1.useRef)(null);
     const opened = (0, react_1.useRef)(null);
+    const [pointerShape, setPointerShape] = (0, react_1.useState)("default");
     const scale = registry.displayScale;
     (0, react_1.useLayoutEffect)(() => {
         surface.current = registry.root.createSurface();
@@ -62,6 +65,7 @@ function DevTools({ target, style, dock = "right", panel, onAction, keepFrame =
             if (entry?.externalDevtools) {
                 entry.externalDevtools = false;
                 entry.externalDevtoolsAction = null;
+                entry.externalDevtoolsCursor = null;
                 entry.host?.closeDevtools();
             }
             opened.current = null;
@@ -80,8 +84,14 @@ function DevTools({ target, style, dock = "right", panel, onAction, keepFrame =
             opened.current.externalDevtools = false;
             opened.current.host?.closeDevtools();
         }
+        if (opened.current !== entry) {
+            if (opened.current)
+                opened.current.externalDevtoolsCursor = null;
+            setPointerShape(host.devtools?.cursorShape ?? "default");
+        }
         opened.current = entry;
         entry.externalDevtoolsAction = (action) => onAction?.(action);
+        entry.externalDevtoolsCursor = setPointerShape;
         if (!host.devtools) {
             entry.externalDevtools = true;
             host.openDevtools(surface.current, layout, dock);
@@ -108,6 +118,7 @@ function DevTools({ target, style, dock = "right", panel, onAction, keepFrame =
                 width: size.width,
                 height: size.height,
                 cornerRadius: style?.cornerRadius,
+                pointerShape,
             }, onPointer: (event) => {
                 const host = entry?.host;
                 if (!entry || !host?.devtools)
@@ -120,5 +131,5 @@ function DevTools({ target, style, dock = "right", panel, onAction, keepFrame =
                     return;
                 registry.focus(entry, "devtools");
                 host.devtools.input.wheel(event);
-            }, onMouseEnter: () => registry.setPointerShape(entry?.host?.devtools?.cursorShape ?? "default"), onMouseLeave: () => registry.setPointerShape("default") })) }));
+            } })) }));
 }

package/dist/host/guest.js

@@ -19,7 +19,7 @@ function GuestView({ guest, active }) {
     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 [pointerShape, setPointerShape] = (0, react_1.useState)("default");
     const wheel = (0, react_1.useRef)({ x: 0, y: 0 });
     const greeted = (0, react_1.useRef)(false);
     const entry = (0, react_1.useMemo)(() => ({
@@ -28,6 +28,7 @@ function GuestView({ guest, active }) {
         devtoolsEnabled: false,
         externalDevtools: false,
         externalDevtoolsAction: null,
+        externalDevtoolsCursor: null,
         toggleDevtools: () => { },
         handleKey: (event) => {
             guest.send({ type: "key", ...event });
@@ -67,8 +68,7 @@ function GuestView({ guest, active }) {
             });
         };
         guest.onPointer = (shape) => {
-            if (hovered.current)
-                registry.setPointerShape(shape);
+            setPointerShape(shape);
         };
         guest.onClipboard = (text) => registry.root.setClipboard(text);
         return () => {
@@ -166,13 +166,9 @@ function GuestView({ guest, active }) {
                 inset: { top: 0, left: 0 },
                 width: snapped.width,
                 height: snapped.height,
+                pointerShape,
             }, 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");
-            } })) }));
+            }, onMouseMove: (event) => forward(event, "move"), onWheel: scroll })) }));
 }

package/dist/index.d.ts

@@ -13,8 +13,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, Link, appLog, useTerminalColors, setClipboard, setPointerShape, requestClipboardImage, highlight, diff, parseMarkdown, HIGHLIGHT_CAPTURES, Surface, SurfaceCapture, captureFilmstrip, encodeRecording, engineLogs, useStore, } from "./react";
+export { Box, Text, Input, Image, MarkedText, Path, Markdown, Link, appLog, useTerminalColors, setClipboard, 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, LinkProps, MarkdownBlock, HighlightSpan, DiffRow, } 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, PointerShape, ScrollbarStyle, Style, EngineInfo, EngineKeyEvent, KeyMods, Rgba, TerminalColors, SurfaceFrame, SurfaceTexture, CaptureStats, CaptureFrameMeta, CaptureIndex, MarkdownProps, MarkdownTheme, LinkProps, 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.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.Link = exports.Markdown = exports.Path = exports.MarkedText = exports.Image = exports.Input = exports.Text = exports.Box = exports.defaultOpenWindow = exports.QUIT_URL = exports.useRect = 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.setClipboard = exports.useTerminalColors = exports.appLog = exports.Link = exports.Markdown = exports.Path = exports.MarkedText = exports.Image = exports.Input = exports.Text = exports.Box = exports.defaultOpenWindow = exports.QUIT_URL = exports.useRect = 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; } });
@@ -28,7 +28,6 @@ Object.defineProperty(exports, "Link", { enumerable: true, get: function () { re
 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; } });

package/dist/popup.d.ts

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

package/dist/popup.js

@@ -5,7 +5,7 @@ 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, }) {
+function PopupCard({ view, page, rem, theme, surface, pointerShape, onPointer, onWheel, onClose, }) {
     const [closeHover, setCloseHover] = (0, react_1.useState)(false);
     const headerH = Math.round(rem * 1.7);
     const cardH = headerH + view.height;
@@ -43,5 +43,5 @@ function PopupCard({ view, page, rem, theme, surface, onPointer, onWheel, onHove
                                     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) })] })] }));
+                                }, 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, pointerShape }, onPointer: onPointer, onWheel: onWheel })] })] }));
 }

package/dist/react/index.d.ts

@@ -15,7 +15,7 @@ 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 { Color, Edges, InsetEdges, InsetValue, PointerShape, ScrollbarStyle, Style } from "./styles";
 export type { DiffEmphasis, DiffRow, EngineInfo, HighlightSpan, HostOptions, MarkdownBlock, MarkdownCell, MarkdownRow, MarkdownSpan, Rgba, SurfaceShm, TerminalColors, } from "./native";
 export { HIGHLIGHT_CAPTURES, captureFilmstrip, diff, encodeRecording, highlight, parseMarkdown } from "./native";
 export { useTerminalColors } from "./colors";
@@ -32,7 +32,6 @@ export { openDevtools, closeDevtools, toggleDevtools, requestLayout, engineOp };
  * this is dumb we can abstract this with a more cannonical capture/bubble phase
  */
 export declare function setKeyCapture(keys: string[]): void;
-export declare function setPointerShape(shape: string): void;
 export declare function requestClipboardImage(): void;
 export declare function setClipboard(text: string): void;
 export interface KeyMods {
@@ -101,7 +100,6 @@ export interface PixelRoot {
     highlightTransmits(): boolean;
     nudgeResize(): void;
     queryLayout(): void;
-    setPointerShape(shape: string): void;
     setClearColor(color: Rgba): void;
     setKeyCapture(keys: string[]): void;
     requestClipboardImage(): void;

package/dist/react/index.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.inspectorStore = exports.engineOp = exports.requestLayout = exports.toggleDevtools = exports.closeDevtools = exports.openDevtools = exports.Link = 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;
 exports.requestClipboardImage = requestClipboardImage;
 exports.setClipboard = setClipboard;
 exports.createRoot = createRoot;
@@ -68,11 +67,6 @@ function setKeyCapture(keys) {
     bridge.push(reconciler_config_1.APP_VIEW, { op: "setKeyCapture", keys });
     bridge.flush();
 }
-function setPointerShape(shape) {
-    const bridge = (0, reconciler_config_1.getBridge)();
-    bridge.push(reconciler_config_1.APP_VIEW, { op: "setPointerShape", shape });
-    bridge.flush();
-}
 function requestClipboardImage() {
     const bridge = (0, reconciler_config_1.getBridge)();
     bridge.push(reconciler_config_1.APP_VIEW, { op: "requestClipboardImage" });
@@ -557,10 +551,6 @@ function createRoot(options = {}) {
             bridge.push(reconciler_config_1.APP_VIEW, { op: "queryLayout" });
             bridge.flush();
         },
-        setPointerShape(shape) {
-            bridge.push(reconciler_config_1.APP_VIEW, { op: "setPointerShape", shape });
-            bridge.flush();
-        },
         setClearColor(color) {
             bridge.push(reconciler_config_1.APP_VIEW, { op: "setClearColor", color });
             bridge.flush();

package/dist/react/link.js

@@ -4,8 +4,7 @@ exports.Link = Link;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const electron_1 = require("electron");
 const components_1 = require("./components");
-const index_1 = require("./index");
 function Link({ href, children, style, onClick }) {
     const plain = typeof children === "string" || typeof children === "number";
-    return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: plain ? undefined : style, onClick: (event) => (onClick ? onClick(event) : void electron_1.shell.openExternal(href)), onMouseEnter: () => (0, index_1.setPointerShape)("pointer"), onMouseLeave: () => (0, index_1.setPointerShape)("default"), children: plain ? (0, jsx_runtime_1.jsx)(components_1.Text, { style: { selectable: false, ...style }, children: children }) : children }));
+    return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: { ...(plain ? undefined : style), pointerShape: "pointer" }, onClick: (event) => (onClick ? onClick(event) : void electron_1.shell.openExternal(href)), children: plain ? (0, jsx_runtime_1.jsx)(components_1.Text, { style: { selectable: false, ...style }, children: children }) : children }));
 }

package/dist/react/styles.d.ts

@@ -23,6 +23,7 @@ export interface ScrollbarStyle {
     trackColor?: Color;
 }
 export type BorderSide = [width: number, color: Color];
+export type PointerShape = "default" | "pointer" | "text" | "crosshair" | "wait" | "help" | "progress" | "cell" | "vertical-text" | "context-menu" | "alias" | "copy" | "move" | "no-drop" | "not-allowed" | "grab" | "grabbing" | "all-scroll" | "zoom-in" | "zoom-out" | "e-resize" | "n-resize" | "ne-resize" | "nw-resize" | "s-resize" | "se-resize" | "sw-resize" | "w-resize" | "ns-resize" | "ew-resize" | "nesw-resize" | "nwse-resize";
 export interface GradientStop {
     at: number;
     color: Color;
@@ -84,6 +85,7 @@ export interface Style {
      * makes the highlight extend to the entire available space of the selection container instead of just the text
      */
     selectionMode?: "text" | "unified";
+    pointerShape?: PointerShape;
 }
 export declare function parseColor(color: Color | undefined): Rgba | undefined;
 export declare function serializeStyle(style: Style): Record<string, unknown>;

package/dist/react/styles.js

@@ -73,6 +73,7 @@ function serializeStyle(style) {
         opaque: style.opaque,
         selectionColor: parseColor(style.selectionColor),
         selectionMode: style.selectionMode,
+        pointerShape: style.pointerShape,
         scrollbar: style.scrollbar && {
             width: style.scrollbar.width,
             hoverWidth: style.scrollbar.hoverWidth,

package/dist/registry.d.ts

@@ -1,4 +1,4 @@
-import type { EngineKeyEvent, LayoutSnapshot, PastedImage, PixelRoot, TerminalColors } from "./react";
+import type { EngineKeyEvent, LayoutSnapshot, PastedImage, PixelRoot, PointerShape, TerminalColors } from "./react";
 import type { Store } from "./react/devtools/store";
 import type { PageHost } from "./web/host";
 import type { TerminalTheme } from "./web/session";
@@ -8,6 +8,7 @@ export interface ViewEntry {
     devtoolsEnabled: boolean;
     externalDevtools: boolean;
     externalDevtoolsAction: ((action: "close" | "dock-bottom" | "dock-right") => void) | null;
+    externalDevtoolsCursor: ((shape: PointerShape) => void) | null;
     toggleDevtools(): void;
     handleKey(event: EngineKeyEvent): boolean;
     paste?(text: string): void;
@@ -26,7 +27,6 @@ export declare class ViewRegistry {
     readonly resizeListeners: Set<() => void>;
     readonly layout: Store<LayoutSnapshot>;
     readonly colors: Store<TerminalColors>;
-    private sentCursor;
     constructor(root: PixelRoot, displayScale: number, noSuper: boolean, hooks: RegistryHooks);
     register(entry: ViewEntry): void;
     unregister(entry: ViewEntry): void;
@@ -35,7 +35,6 @@ export declare class ViewRegistry {
     blur(entry: ViewEntry): void;
     private setActive;
     quit(entry: ViewEntry | null): void;
-    setPointerShape(shape: string): void;
     queryLayout(): void;
     background(): string;
     theme(): TerminalTheme | null;

package/dist/registry.js

@@ -20,7 +20,6 @@ class ViewRegistry {
         at: 0,
     });
     colors;
-    sentCursor = null;
     constructor(root, displayScale, noSuper, hooks) {
         this.root = root;
         this.displayScale = displayScale;
@@ -73,12 +72,6 @@ class ViewRegistry {
     quit(entry) {
         this.hooks.quit(entry);
     }
-    setPointerShape(shape) {
-        if (shape === this.sentCursor)
-            return;
-        this.sentCursor = shape;
-        this.root.setPointerShape(shape);
-    }
     queryLayout() {
         this.root.queryLayout();
     }

package/dist/root.js

@@ -95,11 +95,6 @@ function createRoot(options = {}) {
             }
         }
         (0, session_1.flushSessions)();
-        try {
-            // wait whats going on here 
-            engineRoot.setPointerShape("text");
-        }
-        catch { }
         try {
             engineRoot.stop();
         }

package/dist/web/cursor.d.ts

@@ -1 +1,2 @@
-export declare function cursorShapeFor(type: string): string;
+import type { PointerShape } from "../react";
+export declare function cursorShapeFor(type: string): PointerShape;

package/dist/web/devtools.d.ts

@@ -1,5 +1,5 @@
 import type { WebContents } from "electron";
-import type { Surface } from "../react";
+import type { PointerShape, Surface } from "../react";
 import type { DevtoolsDock } from "./types";
 import { PageInput } from "./input";
 import type { SurfaceLayout } from "./types";
@@ -19,7 +19,7 @@ export declare class DevtoolsWindow {
     private cdpAttached;
     private destroyed;
     private pendingPanel;
-    cursorShape: string;
+    cursorShape: PointerShape;
     onCursorChange: ((shape: string) => void) | null;
     private readonly onDisplayChange;
     constructor(pageContents: WebContents, surface: Surface, layout: SurfaceLayout, dock: DevtoolsDock, background: string, renderScale: number, onAction: (action: DevtoolsAction) => void, onClosed: () => void);

package/dist/web/host.d.ts

@@ -1,4 +1,4 @@
-import type { EngineKeyEvent, PastedImage, PointerEvent, Surface, WheelEvent } from "../react";
+import type { EngineKeyEvent, PastedImage, PointerEvent, PointerShape, Surface, WheelEvent } from "../react";
 import type { DownloadProgress } from "./browser-session";
 import { DevtoolsWindow } from "./devtools";
 import type { DevtoolsAction } from "./devtools";
@@ -50,7 +50,7 @@ export declare class PageHost {
     private readonly bitmaps;
     private lastFrameSize;
     onFrameSubmitted: (() => void) | null;
-    cursorShape: string;
+    cursorShape: PointerShape;
     onCursorChange: ((shape: string) => void) | null;
     onOpenWindow: OpenWindowPolicy | null;
     onQuit: (() => void) | null;

package/dist/web/popup.d.ts

@@ -1,5 +1,5 @@
 import type { BrowserWindow } from "electron";
-import type { Surface } from "../react";
+import type { PointerShape, Surface } from "../react";
 import { PageInput } from "./input";
 import type { ZoomDirection } from "./zoom";
 export interface PopupState {
@@ -11,7 +11,7 @@ export interface PopupState {
 }
 export declare class PopupWindow {
     readonly input: PageInput;
-    cursorShape: string;
+    cursorShape: PointerShape;
     onCursorChange: (() => void) | null;
     private readonly window;
     private readonly surface;

package/dist/webview.js

@@ -38,17 +38,19 @@ exports.WebView = (0, react_1.forwardRef)(function WebView(props, ref) {
     const stateRef = (0, react_1.useRef)((0, types_1.initialWebViewState)(props.src));
     const propsRef = (0, react_1.useRef)(props);
     propsRef.current = props;
-    const hover = (0, react_1.useRef)({ page: false, popup: false, devtools: false, divider: false });
     const dragging = (0, react_1.useRef)(false);
     const lastDragResize = (0, react_1.useRef)(0);
     const pendingInspect = (0, react_1.useRef)(null);
     const frameListeners = (0, react_1.useRef)(new Set());
     const changeListeners = (0, react_1.useRef)(new Set());
     const [popup, setPopup] = (0, react_1.useState)(null);
+    const [pointerShapes, setPointerShapes] = (0, react_1.useState)({
+        page: "default",
+        devtools: "default",
+        popup: "default",
+    });
     const [devtoolsOpen, setDevtoolsOpen] = (0, react_1.useState)(false);
     const [dock, setDock] = (0, react_1.useState)(typeof props.devtools === "string" ? props.devtools : "right");
-    const dockRef = (0, react_1.useRef)(dock);
-    dockRef.current = dock;
     const [fraction, setFraction] = (0, react_1.useState)(0.4);
     const [dividerEngaged, setDividerEngaged] = (0, react_1.useState)(false);
     const [menu, setMenu] = (0, react_1.useState)(null);
@@ -61,6 +63,7 @@ exports.WebView = (0, react_1.forwardRef)(function WebView(props, ref) {
         devtoolsEnabled: false,
         externalDevtools: false,
         externalDevtoolsAction: null,
+        externalDevtoolsCursor: null,
         toggleDevtools: () => { },
         handleKey: () => false,
     }), []);
@@ -90,21 +93,12 @@ exports.WebView = (0, react_1.forwardRef)(function WebView(props, ref) {
     const keepFrame = () => dragging.current || propsRef.current.keepFrame !== false;
     const syncCursor = () => {
         const host = hostRef.current;
-        const h = hover.current;
-        const shape = h.divider
-            ? dockRef.current === "bottom"
-                ? "ns-resize"
-                : "ew-resize"
-            : h.devtools
-                ? host?.devtools?.cursorShape ?? "default"
-                : host?.popup
-                    ? h.popup
-                        ? host.popup.cursorShape
-                        : "default"
-                    : h.page
-                        ? host?.cursorShape ?? "default"
-                        : "default";
-        registry.setPointerShape(shape);
+        setPointerShapes({
+            page: host?.cursorShape ?? "default",
+            devtools: host?.devtools?.cursorShape ?? "default",
+            popup: host?.popup?.cursorShape ?? "default",
+        });
+        entry.externalDevtoolsCursor?.(host?.devtools?.cursorShape ?? "default");
     };
     const readPopup = (host) => {
         const top = host.popup;
@@ -432,6 +426,7 @@ exports.WebView = (0, react_1.forwardRef)(function WebView(props, ref) {
                     cornerRadius: props.style?.cornerRadius,
                     background: props.browserWindowOptions?.transparent ? undefined : theme.bg,
                     opaque: !props.browserWindowOptions?.transparent,
+                    pointerShape: pointerShapes.page,
                 }, onPointer: (event) => {
                     if (menuRef.current) {
                         if (event.kind === "down")
@@ -445,13 +440,7 @@ exports.WebView = (0, react_1.forwardRef)(function WebView(props, ref) {
                 }, onWheel: (event) => {
                     registry.focus(entry);
                     hostRef.current?.wheel(event);
-                }, onMouseEnter: () => {
-                    hover.current.page = true;
-                    syncCursor();
-                }, onMouseLeave: () => {
-                    hover.current.page = false;
-                    syncCursor();
-                } })), devtoolsRect && surfaces.current && ((0, jsx_runtime_1.jsx)(devtools_1.DevtoolsDockPane, { rect: devtoolsRect, dock: dock, rem: rem, theme: theme, surface: surfaces.current.devtools, dividerEngaged: dividerEngaged, onPointer: (event) => {
+                } })), devtoolsRect && surfaces.current && ((0, jsx_runtime_1.jsx)(devtools_1.DevtoolsDockPane, { rect: devtoolsRect, dock: dock, rem: rem, theme: theme, surface: surfaces.current.devtools, dividerEngaged: dividerEngaged, pointerShape: pointerShapes.devtools, onPointer: (event) => {
                     const host = hostRef.current;
                     if (!host?.devtools)
                         return;
@@ -463,20 +452,11 @@ exports.WebView = (0, react_1.forwardRef)(function WebView(props, ref) {
                         return;
                     registry.focus(entry, "devtools");
                     host.devtools.input.wheel(event);
-                }, onHover: (hovering) => {
-                    hover.current.devtools = hovering;
-                    syncCursor();
-                }, onDividerDrag: onDividerDrag, onDividerHover: (hovering) => {
-                    hover.current.divider = hovering;
-                    syncCursor();
-                } })), popupView && page && surfaces.current && ((0, jsx_runtime_1.jsx)(popup_1.PopupCard, { view: popupView, page: page, rem: rem, theme: theme, surface: surfaces.current.popup, onPointer: (event) => {
+                }, onDividerDrag: onDividerDrag })), popupView && page && surfaces.current && ((0, jsx_runtime_1.jsx)(popup_1.PopupCard, { view: popupView, page: page, rem: rem, theme: theme, surface: surfaces.current.popup, pointerShape: pointerShapes.popup, onPointer: (event) => {
                     registry.focus(entry, "popup");
                     hostRef.current?.popup?.input.pointer(event);
                 }, onWheel: (event) => {
                     registry.focus(entry, "popup");
                     hostRef.current?.popup?.input.wheel(event);
-                }, onHover: (hovering) => {
-                    hover.current.popup = hovering;
-                    syncCursor();
                 }, onClose: () => hostRef.current?.popup?.close() })), menu && rect && ((0, jsx_runtime_1.jsx)(context_menu_1.ContextMenu, { x: menu.x, y: menu.y, bounds: { width: rect.width, height: rect.height }, items: menu.items, rem: rem, theme: theme, onAction: runMenu, onClose: () => setMenu(null) }))] }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenbu-labs/pixel",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Build graphical applications in the terminal",
   "license": "MIT",
   "repository": {
@@ -58,10 +58,10 @@
     "react": "^18.3.1"
   },
   "optionalDependencies": {
-    "@zenbu-labs/pixel-native-darwin-arm64": "0.1.0",
-    "@zenbu-labs/pixel-native-darwin-x64": "0.1.0",
-    "@zenbu-labs/pixel-native-linux-arm64": "0.1.0",
-    "@zenbu-labs/pixel-native-linux-x64": "0.1.0"
+    "@zenbu-labs/pixel-native-darwin-arm64": "0.2.0",
+    "@zenbu-labs/pixel-native-darwin-x64": "0.2.0",
+    "@zenbu-labs/pixel-native-linux-arm64": "0.2.0",
+    "@zenbu-labs/pixel-native-linux-x64": "0.2.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",