@zenbu-labs/pixel 0.0.0 → 0.0.13

package/dist/react/devtools/theme.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UI = exports.MONO = exports.theme = void 0;
+exports.refreshTheme = refreshTheme;
+const FALLBACK_BG = [30, 31, 34, 255];
+const FALLBACK_FG = [223, 225, 229, 255];
+function hexToRgba(value) {
+    const n = parseInt(value.slice(1), 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255, 255];
+}
+function mix(base, toward, t) {
+    const channel = (b, c) => Math.round(b + (c - b) * t);
+    return [
+        channel(base[0], toward[0]),
+        channel(base[1], toward[1]),
+        channel(base[2], toward[2]),
+        255,
+    ];
+}
+function hex(color) {
+    return `#${color
+        .slice(0, 3)
+        .map((c) => Math.max(0, Math.min(255, c)).toString(16).padStart(2, "0"))
+        .join("")}`;
+}
+function build(colors) {
+    const bg = colors.background ?? FALLBACK_BG;
+    const fg = colors.foreground ?? FALLBACK_FG;
+    const slot = (at, fallback) => colors.palette[at] ?? hexToRgba(fallback);
+    const accent = colors.palette[12] ?? slot(4, "#4d9fff");
+    const red = slot(1, "#e06c75");
+    const green = slot(2, "#98c379");
+    const yellow = slot(3, "#e5c07b");
+    const magenta = slot(5, "#c586c0");
+    const cyan = slot(6, "#5db0d7");
+    // shades of one hue so stacked bars in a flame lane stay apart
+    const lane = (base, count) => Array.from({ length: count }, (_, i) => hex(i % 2 === 0 ? mix(base, fg, i * 0.12) : mix(base, bg, i * 0.1)));
+    return {
+        bg: hex(bg),
+        panel: hex(mix(bg, fg, 0.04)),
+        chrome: hex(mix(bg, fg, 0.09)),
+        chromeActive: hex(mix(bg, fg, 0.15)),
+        border: hex(mix(bg, fg, 0.18)),
+        text: hex(fg),
+        dim: hex(mix(fg, bg, 0.35)),
+        faint: hex(mix(fg, bg, 0.55)),
+        accent: hex(accent),
+        accentDim: hex(mix(bg, accent, 0.4)),
+        selectionBg: hex(mix(bg, accent, 0.35)),
+        hover: hex(mix(bg, fg, 0.11)),
+        tag: hex(cyan),
+        attrName: hex(yellow),
+        attrValue: hex(green),
+        danger: hex(red),
+        warn: hex(yellow),
+        ok: hex(green),
+        levels: {
+            debug: hex(mix(fg, bg, 0.45)),
+            info: hex(fg),
+            warn: hex(yellow),
+            error: hex(red),
+        },
+        flame: {
+            react: lane(accent, 4),
+            bridge: lane(magenta, 2),
+            engine: lane(green, 4),
+            devtools: lane(mix(fg, bg, 0.45), 2),
+            images: lane(cyan, 2),
+        },
+    };
+}
+exports.theme = build({ foreground: null, background: null, palette: [] });
+function refreshTheme(colors) {
+    exports.theme = build(colors);
+}
+exports.MONO = 0;
+exports.UI = 0;

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

@@ -0,0 +1,24 @@
+import React from "react";
+export declare function Button(props: {
+    label: string;
+    onClick: () => void;
+    active?: boolean;
+    danger?: boolean;
+    rem: number;
+}): React.JSX.Element;
+export declare function Chip(props: {
+    label: string;
+    onClick?: () => void;
+    active?: boolean;
+    color?: string;
+    rem: number;
+}): React.JSX.Element;
+export declare function Toolbar(props: {
+    rem: number;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+export declare function Divider(): React.JSX.Element;
+export declare function Empty(props: {
+    text: string;
+    rem: number;
+}): React.JSX.Element;

package/dist/react/devtools/ui.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = Button;
+exports.Chip = Chip;
+exports.Toolbar = Toolbar;
+exports.Divider = Divider;
+exports.Empty = Empty;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("../components");
+const theme_1 = require("./theme");
+function Button(props) {
+    const { label, onClick, active, danger, rem } = props;
+    return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+            padding: { left: rem * 0.5, right: rem * 0.5, top: rem * 0.15, bottom: rem * 0.15 },
+            cornerRadius: rem * 0.25,
+            background: active ? theme_1.theme.accentDim : undefined,
+            hoverBackground: active ? theme_1.theme.accentDim : theme_1.theme.hover,
+            border: active ? { width: 1, color: theme_1.theme.accent } : { width: 1, color: theme_1.theme.border },
+        }, onClick: onClick, children: (0, jsx_runtime_1.jsx)(components_1.Text, { style: {
+                color: danger ? theme_1.theme.danger : active ? theme_1.theme.accent : theme_1.theme.text,
+                fontSize: rem * 0.75,
+                wrap: false,
+            }, children: label }) }));
+}
+function Chip(props) {
+    const { label, onClick, active, color, rem } = props;
+    return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+            padding: { left: rem * 0.4, right: rem * 0.4, top: rem * 0.08, bottom: rem * 0.08 },
+            cornerRadius: rem * 0.5,
+            background: active ? theme_1.theme.accentDim : theme_1.theme.chrome,
+            hoverBackground: onClick ? theme_1.theme.chromeActive : undefined,
+        }, onClick: onClick, children: (0, jsx_runtime_1.jsx)(components_1.Text, { style: {
+                color: color ?? (active ? theme_1.theme.accent : theme_1.theme.dim),
+                fontSize: rem * 0.68,
+                wrap: false,
+            }, children: label }) }));
+}
+function Toolbar(props) {
+    return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: props.rem * 0.4,
+            padding: props.rem * 0.35,
+            background: theme_1.theme.panel,
+            border: { width: 0, color: theme_1.theme.border },
+            flexShrink: 0,
+        }, children: props.children }));
+}
+function Divider() {
+    return (0, jsx_runtime_1.jsx)(components_1.Box, { style: { height: 1, background: theme_1.theme.border, flexShrink: 0 } });
+}
+function Empty(props) {
+    return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+            flexGrow: 1,
+            alignItems: "center",
+            justifyContent: "center",
+            padding: props.rem,
+        }, children: (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.faint, fontSize: props.rem * 0.8 }, children: props.text }) }));
+}

package/dist/react/index.d.ts

@@ -0,0 +1,110 @@
+import { type ReactNode } from "react";
+import type { PastedImage } from "./reconciler-config";
+import type { EngineInfo, HostOptions, TerminalColors } from "./native";
+import { Surface } from "./surface";
+import { closeDevtools, engineOp, openDevtools, requestLayout, toggleDevtools } from "./devtools/controller";
+import type { Rgba } from "./native";
+import { inspectorStore, LayoutSnapshot } from "./devtools/stores";
+import type { LogLevel } from "./devtools/store";
+declare function appLog(level: LogLevel, target: string, text: string): void;
+export { Box, Text, Input, Image, MarkedText, Path, } from "./components";
+export type { NodeHandle } from "./components";
+export { appLog };
+export { layoutStore, profilerStore } from "./devtools/stores";
+export type { LayoutSnapshot, ProfileSession } from "./devtools/stores";
+export type { BoxProps, TextProps, TextSpan, InputGutter, InputProps, MarkRef, PasteSource, PastedImage, CaretInfo, ChangeInfo, ChangeSource, ImageProps, ImageAdvancedProps, MarkedTextProps, ClickEvent, ContainerSelection, DragEvent, EventMods, MouseMoveEvent, ScrollEvent, SelectionPart, WheelEvent, PointerEvent, ShapeStroke, PathProps, } from "./reconciler-config";
+export type { Color, Edges, InsetEdges, InsetValue, ScrollbarStyle, Style } from "./styles";
+export type { DiffEmphasis, DiffRow, EngineInfo, HighlightSpan, HostOptions, MarkdownBlock, MarkdownCell, MarkdownRow, MarkdownSpan, Rgba, SurfaceShm, TerminalColors, } from "./native";
+export { HIGHLIGHT_CAPTURES, captureFilmstrip, diff, encodeRecording, highlight, parseMarkdown } from "./native";
+export { useTerminalColors } from "./colors";
+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 { openDevtools, closeDevtools, toggleDevtools, requestLayout, engineOp };
+/**
+ *
+ * i think this api exists to support capturing a click to focus the input,
+ * 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 {
+    shift: boolean;
+    alt: boolean;
+    ctrl: boolean;
+    super: boolean;
+}
+export interface EngineKeyEvent {
+    key: string;
+    kind: "press" | "repeat" | "release";
+    text?: string;
+    mods: KeyMods;
+}
+export interface RootOptions {
+    onKey?: (event: EngineKeyEvent) => void;
+    onRightClick?: (event: {
+        x: number;
+        y: number;
+    }) => void;
+    onPaste?: (text: string) => void;
+    onFocus?: (focused: boolean) => void;
+    onPasteImage?: (image: PastedImage) => void;
+    onEngineExit?: (error: string | null) => void;
+    onResize?: (size: {
+        width: number;
+        height: number;
+        basePx: number;
+    }) => void;
+    onColors?: (colors: TerminalColors) => void;
+    onLayout?: (snapshot: LayoutSnapshot) => void;
+    onHostClosed?: () => void;
+    onHandoff?: (handoff: {
+        tty?: string;
+        socket?: string;
+    }) => void;
+    keyEventTypes?: boolean;
+    devtools?: boolean;
+    cwd?: string;
+    tty?: string;
+    host?: HostOptions;
+    wrapper?: "tmux";
+    sessionEnv?: NodeJS.ProcessEnv;
+}
+export interface PixelRoot {
+    info: EngineInfo;
+    sharedTextures: boolean;
+    render(element: ReactNode): void;
+    flushSync<T>(fn: () => T): T;
+    registerFont(path: string): Promise<number>;
+    createSurface(): Surface;
+    surfaceStats(): SurfaceStats;
+    stop(): void;
+    openDevtools(): void;
+    closeDevtools(): void;
+    nudgeResize(): void;
+    queryLayout(): void;
+    setPointerShape(shape: string): void;
+    setClearColor(color: Rgba): void;
+    setKeyCapture(keys: string[]): void;
+    requestClipboardImage(): void;
+    setClipboard(text: string): void;
+    setTitle(text: string): void;
+    retarget(target: RetargetTarget): Promise<void>;
+}
+export type RetargetTarget = {
+    tty: string;
+    wrapper?: "tmux";
+} | {
+    host: HostOptions;
+};
+export interface SurfaceStats {
+    submitted: number;
+    coalesced: number;
+    presented: number;
+    rows: number;
+}
+export declare function createRoot(options?: RootOptions): PixelRoot;
+export { inspectorStore };