@zenbu-labs/pixel 0.0.23 → 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, 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, 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.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; } });
@@ -24,10 +24,10 @@ Object.defineProperty(exports, "Image", { enumerable: true, get: function () { r
 Object.defineProperty(exports, "MarkedText", { enumerable: true, get: function () { return react_1.MarkedText; } });
 Object.defineProperty(exports, "Path", { enumerable: true, get: function () { return react_1.Path; } });
 Object.defineProperty(exports, "Markdown", { enumerable: true, get: function () { return react_1.Markdown; } });
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return react_1.Link; } });
 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";
@@ -23,6 +23,8 @@ export { Surface, SurfaceCapture } from "./surface";
 export type { SurfaceFrame, SurfaceTexture, CaptureStats, CaptureFrameMeta, CaptureIndex, } from "./surface";
 export { Markdown } from "./markdown";
 export type { MarkdownProps, MarkdownTheme } from "./markdown";
+export { Link } from "./link";
+export type { LinkProps } from "./link";
 export { openDevtools, closeDevtools, toggleDevtools, requestLayout, engineOp };
 /**
  *
@@ -30,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 {
@@ -99,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

@@ -1,9 +1,8 @@
 "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.useStore = exports.engineLogs = 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.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;
@@ -56,6 +55,8 @@ Object.defineProperty(exports, "Surface", { enumerable: true, get: function () {
 Object.defineProperty(exports, "SurfaceCapture", { enumerable: true, get: function () { return surface_2.SurfaceCapture; } });
 var markdown_1 = require("./markdown");
 Object.defineProperty(exports, "Markdown", { enumerable: true, get: function () { return markdown_1.Markdown; } });
+var link_1 = require("./link");
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return link_1.Link; } });
 /**
  *
  * i think this api exists to support capturing a click to focus the input,
@@ -66,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" });
@@ -555,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.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { ClickEvent } from "./reconciler-config";
+import type { Style } from "./styles";
+export interface LinkProps {
+    href: string;
+    children: ReactNode;
+    style?: Style;
+    onClick?(event: ClickEvent): void;
+}
+export declare function Link({ href, children, style, onClick }: LinkProps): import("react").JSX.Element;

package/dist/react/link.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = Link;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const electron_1 = require("electron");
+const components_1 = require("./components");
+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), 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/terminal/index.d.ts

@@ -3,7 +3,7 @@ export type { Detect, Direction, ListPanesOptions, Pane, PaneContext, PaneDetail
 export { canSplit } from "./terminal";
 export type { Run } from "./run";
 export { shellIn } from "./run";
-export { bracketedPaste, callerTty, shellLiteral } from "./shared";
+export { bracketedPaste, callerTty, PASTE_KEY, shellLiteral } from "./shared";
 export type { TerminalCheck } from "./detect";
 export { cannotOpenPanes, checkTerminal, detect } from "./detect";
 export type { GraphicsSupport } from "./graphics";

package/dist/terminal/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GRAPHICS_SKIP_ENV = exports.unsupportedGraphicsMessage = exports.probeGraphics = exports.EMBED_PROTOCOL = exports.listInstances = exports.findOwner = exports.detect = exports.checkTerminal = exports.cannotOpenPanes = exports.shellLiteral = exports.callerTty = exports.bracketedPaste = exports.shellIn = exports.canSplit = void 0;
+exports.GRAPHICS_SKIP_ENV = exports.unsupportedGraphicsMessage = exports.probeGraphics = exports.EMBED_PROTOCOL = exports.listInstances = exports.findOwner = exports.detect = exports.checkTerminal = exports.cannotOpenPanes = exports.shellLiteral = exports.PASTE_KEY = exports.callerTty = exports.bracketedPaste = exports.shellIn = exports.canSplit = void 0;
 var terminal_1 = require("./terminal");
 Object.defineProperty(exports, "canSplit", { enumerable: true, get: function () { return terminal_1.canSplit; } });
 var run_1 = require("./run");
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "shellIn", { enumerable: true, get: function () {
 var shared_1 = require("./shared");
 Object.defineProperty(exports, "bracketedPaste", { enumerable: true, get: function () { return shared_1.bracketedPaste; } });
 Object.defineProperty(exports, "callerTty", { enumerable: true, get: function () { return shared_1.callerTty; } });
+Object.defineProperty(exports, "PASTE_KEY", { enumerable: true, get: function () { return shared_1.PASTE_KEY; } });
 Object.defineProperty(exports, "shellLiteral", { enumerable: true, get: function () { return shared_1.shellLiteral; } });
 var detect_1 = require("./detect");
 Object.defineProperty(exports, "cannotOpenPanes", { enumerable: true, get: function () { return detect_1.cannotOpenPanes; } });

package/dist/terminal/shared.d.ts

@@ -17,4 +17,5 @@ export declare function paneById(panes: () => Promise<Pane[]>, id: string | null
 export declare function shellQuote(argv: string[]): string;
 export declare const sleep: (ms: number) => Promise<unknown>;
 export declare function shellLiteral(text: string): string;
+export declare const PASTE_KEY = "\u0016";
 export declare function bracketedPaste(text: string): string;

package/dist/terminal/shared.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sleep = void 0;
+exports.PASTE_KEY = exports.sleep = void 0;
 exports.adjacentPane = adjacentPane;
 exports.callerTty = callerTty;
 exports.setPaneWorkingDirectory = setPaneWorkingDirectory;
@@ -81,6 +81,7 @@ exports.sleep = sleep;
 function shellLiteral(text) {
     return `'${text.replace(/['\\]/g, (char) => (char === "'" ? "'\\''" : "'\\\\'"))}'`;
 }
+exports.PASTE_KEY = "\x16";
 function bracketedPaste(text) {
     if (!text.includes("\n"))
         return text;

package/dist/terminal/terminal.d.ts

@@ -60,6 +60,7 @@ export interface Terminal {
     listPanes?(options?: ListPanesOptions): Promise<PaneDetails[]>;
     neighbor?(from: Pane, direction: Direction): Promise<Pane | null>;
     sendText?(pane: string, text: string): Promise<void>;
+    pasteKey?(pane: string): Promise<void>;
     focusPane?(pane: string): Promise<void>;
 }
 export type Detect = (env: NodeJS.ProcessEnv, run: Run) => Terminal | null;

package/dist/terminal/terminals/cmux.js

@@ -83,6 +83,9 @@ const cmux = (env, run) => {
         async sendText(pane, text) {
             await cmux(["rpc", "terminal.paste", JSON.stringify({ text, surface_id: pane, submit_key: "none" })]);
         },
+        async pasteKey(pane) {
+            await cmux(["send", "--surface", pane, "--", shared_1.PASTE_KEY]);
+        },
         async focusPane(pane) {
             await cmux(["focus-panel", "--panel", pane]);
         },

package/dist/terminal/terminals/ghostty.js

@@ -309,6 +309,9 @@ const ghostty = (env, run) => {
             if (result !== "ok")
                 throw new Error(`Ghostty could not type into pane ${pane}`);
         },
+        async pasteKey(pane) {
+            await ghosttyCommand("action", [pane, "text:\\x16"]);
+        },
         async neighbor(from, direction) {
             const [window, tab] = from.tab.split(":");
             const result = (await ghosttyCommand("neighbor", [window, tab, from.id, direction])).trim();

package/dist/terminal/terminals/herdr.js

@@ -125,6 +125,9 @@ const herdr = (env, run) => {
         async sendText(pane, text) {
             await herdr(["pane", "send-text", pane, (0, shared_1.bracketedPaste)(text)]);
         },
+        async pasteKey(pane) {
+            await herdr(["pane", "send-text", pane, shared_1.PASTE_KEY]);
+        },
         focusPane,
         async split({ from, direction, command, size }) {
             const native = NATIVE_DIRECTION[direction];

package/dist/terminal/terminals/kitty.js

@@ -192,6 +192,9 @@ const kitty = (env, run) => {
                 await kitten(target, text);
             }
         },
+        async pasteKey(pane) {
+            await kitten(["send-text", "--match", `id:${pane}`, "--stdin"], shared_1.PASTE_KEY);
+        },
         async focusPane(pane) {
             await kitten(["focus-window", "--match", `id:${pane}`]);
         },

package/dist/terminal/terminals/supacode.js

@@ -55,6 +55,10 @@ const supacode = (env, run) => {
             const { worktree, tab } = await home(pane);
             await supacode(["surface", "focus", "-w", worktree, "-t", tab, "-s", pane, "--input", text, "--timeout", "5"]);
         },
+        async pasteKey(pane) {
+            const { worktree, tab } = await home(pane);
+            await supacode(["surface", "focus", "-w", worktree, "-t", tab, "-s", pane, "--input", shared_1.PASTE_KEY, "--timeout", "5"]);
+        },
         async focusPane(pane) {
             const { worktree, tab } = await home(pane);
             await supacode(["surface", "focus", "-w", worktree, "-t", tab, "-s", pane, "--timeout", "5"]);

package/dist/terminal/terminals/tmux.js

@@ -88,6 +88,9 @@ const tmux = (env, run) => {
             await run("tmux", ["load-buffer", "-b", "pixel-send", "-"], text);
             await tmux(["paste-buffer", "-p", "-d", "-b", "pixel-send", "-t", pane]);
         },
+        async pasteKey(pane) {
+            await tmux(["send-keys", "-t", pane, "C-v"]);
+        },
         async focusPane(pane) {
             const client = await userClient();
             if (client) {

package/dist/terminal/terminals/tty7.js

@@ -44,6 +44,9 @@ const tty7 = (env, run) => {
         async sendText(pane, text) {
             await tty7(["send", `%${pane}`, (0, shared_1.bracketedPaste)(text)]);
         },
+        async pasteKey(pane) {
+            await tty7(["send", `%${pane}`, shared_1.PASTE_KEY]);
+        },
         async split({ from, direction, command, size }) {
             if (direction !== "right" && direction !== "down") {
                 throw new Error("tty7 only splits right and down");

package/dist/terminal/terminals/wezterm.js

@@ -48,6 +48,9 @@ const wezterm = (env, run) => {
         async sendText(pane, text) {
             await wezterm(["cli", "send-text", "--pane-id", pane], text);
         },
+        async pasteKey(pane) {
+            await wezterm(["cli", "send-text", "--no-paste", "--pane-id", pane], shared_1.PASTE_KEY);
+        },
         async focusPane(pane) {
             await wezterm(["cli", "activate-pane", "--pane-id", pane]);
         },

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.0.23",
+  "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.0.23",
-    "@zenbu-labs/pixel-native-darwin-x64": "0.0.23",
-    "@zenbu-labs/pixel-native-linux-arm64": "0.0.23",
-    "@zenbu-labs/pixel-native-linux-x64": "0.0.23"
+    "@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",