@zenbu-labs/pixel 0.0.22 → 0.1.0

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, 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 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 { 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.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;
 /// <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,6 +24,7 @@ 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; } });

package/dist/react/index.d.ts

@@ -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 };
 /**
  *

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.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;
@@ -56,6 +56,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,

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,11 @@
+"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");
+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 }));
+}

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.js

@@ -7,7 +7,7 @@ const CSS_CURSORS = new Set([
     "no-drop", "not-allowed", "grab", "grabbing", "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", "col-resize", "row-resize",
+    "nwse-resize",
 ]);
 function cursorShapeFor(type) {
     // chromium's "pointer" is the plain arrow; its css pointer is "hand"
@@ -15,6 +15,11 @@ function cursorShapeFor(type) {
         return "pointer";
     if (CSS_CURSORS.has(type))
         return type;
+    // kitty's pointer shape protocol has no col/row-resize; the axis arrows mean the same
+    if (type === "col-resize")
+        return "ew-resize";
+    if (type === "row-resize")
+        return "ns-resize";
     if (type === "nodrop")
         return "no-drop";
     if (type.endsWith("-panning"))

package/dist/webview.js

@@ -93,8 +93,8 @@ exports.WebView = (0, react_1.forwardRef)(function WebView(props, ref) {
         const h = hover.current;
         const shape = h.divider
             ? dockRef.current === "bottom"
-                ? "row-resize"
-                : "col-resize"
+                ? "ns-resize"
+                : "ew-resize"
             : h.devtools
                 ? host?.devtools?.cursorShape ?? "default"
                 : host?.popup

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenbu-labs/pixel",
-  "version": "0.0.22",
+  "version": "0.1.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.22",
-    "@zenbu-labs/pixel-native-darwin-x64": "0.0.22",
-    "@zenbu-labs/pixel-native-linux-arm64": "0.0.22",
-    "@zenbu-labs/pixel-native-linux-x64": "0.0.22"
+    "@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"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",