@zenbu-labs/pixel 0.0.0 → 0.0.13

package/dist/preload/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference path="../../electron/electron.d.ts" preserve="true" />
+/** [placeholder copy: The terminal's colours as rgb triples. `ansi` has 16 slots and is null where the terminal did not report a colour.] */
+export interface TerminalTheme {
+    background: number[];
+    foreground: number[];
+    ansi: (number[] | null)[];
+}
+export interface PixelApi {
+    theme(): TerminalTheme | null;
+    onTheme(subscriber: (theme: TerminalTheme) => void): () => void;
+    quit(): void;
+}
+declare global {
+    var pixel: PixelApi;
+}

package/dist/preload/index.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/// <reference path="../../electron/electron.d.ts" preserve="true" />

package/dist/react/colors.d.ts

@@ -0,0 +1,3 @@
+import type { TerminalColors } from "./native";
+export declare function publishColors(colors: TerminalColors): void;
+export declare function useTerminalColors(): TerminalColors;

package/dist/react/colors.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.publishColors = publishColors;
+exports.useTerminalColors = useTerminalColors;
+const react_1 = require("react");
+const UNKNOWN = { foreground: null, background: null, palette: [] };
+let snapshot = UNKNOWN;
+const listeners = new Set();
+function publishColors(colors) {
+    snapshot = colors;
+    for (const listener of listeners)
+        listener();
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+function read() {
+    return snapshot;
+}
+function useTerminalColors() {
+    return (0, react_1.useSyncExternalStore)(subscribe, read);
+}

package/dist/react/components.d.ts

@@ -0,0 +1,21 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from "react";
+import type { BoxProps, ImageProps, InputProps, MarkedTextProps, PathProps, TextProps } from "./reconciler-config";
+export interface NodeHandle {
+    id: number;
+    focus(): void;
+    blur(): void;
+    scrollTo(offset: number, smooth?: boolean): void;
+    scrollIntoView(smooth?: boolean): void;
+    splice(start: number, end: number, text: string): void;
+    selectAll(): void;
+    addMark(mark: number, offset?: number): void;
+    removeMark(mark: number): void;
+}
+type Host<P> = ForwardRefExoticComponent<P & RefAttributes<NodeHandle>>;
+export declare const Box: Host<BoxProps>;
+export declare const Text: Host<TextProps>;
+export declare const Path: Host<PathProps>;
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<NodeHandle>>;
+export declare const MarkedText: ForwardRefExoticComponent<MarkedTextProps & RefAttributes<NodeHandle>>;
+export declare const Image: ForwardRefExoticComponent<ImageProps & RefAttributes<NodeHandle>>;
+export {};

package/dist/react/components.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = exports.MarkedText = exports.Input = exports.Path = exports.Text = exports.Box = void 0;
+const react_1 = require("react");
+exports.Box = "box";
+exports.Text = "text";
+exports.Path = "shape-path";
+function markWidgets(marks, renderMark) {
+    if (!renderMark)
+        return null;
+    return marks.map((mark) => (0, react_1.createElement)("box", { key: mark.id, mark: mark.id }, renderMark(mark.id)));
+}
+const InputHost = "input";
+exports.Input = (0, react_1.forwardRef)(function Input(props, ref) {
+    const { renderMark, onChange, ...rest } = props;
+    const [marks, setMarks] = (0, react_1.useState)(props.defaultMarks ?? []);
+    return (0, react_1.createElement)(InputHost, {
+        ...rest,
+        ref,
+        onChange: (text, change) => {
+            setMarks(change.marks);
+            onChange?.(text, change);
+        },
+    }, markWidgets(marks, renderMark));
+});
+const MarkedTextHost = "marked-text";
+exports.MarkedText = (0, react_1.forwardRef)(function MarkedText(props, ref) {
+    const { renderMark, ...rest } = props;
+    return (0, react_1.createElement)(MarkedTextHost, { ...rest, ref }, markWidgets(props.marks, renderMark));
+});
+function slotted(kind, content) {
+    if (content == null || typeof content === "boolean")
+        return null;
+    if ((0, react_1.isValidElement)(content) && typeof content.type === "string") {
+        return (0, react_1.cloneElement)(content, {
+            key: kind,
+            slot: kind,
+        });
+    }
+    return (0, react_1.createElement)("box", { key: kind, slot: kind }, content);
+}
+exports.Image = (0, react_1.forwardRef)(function Image(props, ref) {
+    const { placeholder, error, ...rest } = props;
+    return (0, react_1.createElement)("image", { ...rest, ref }, slotted("placeholder", placeholder), slotted("error", error));
+});

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

@@ -0,0 +1,3 @@
+import React from "react";
+export declare function handleDevtoolsKey(key: string): boolean;
+export declare function DevtoolsApp(): React.JSX.Element;

package/dist/react/devtools/app.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleDevtoolsKey = handleDevtoolsKey;
+exports.DevtoolsApp = DevtoolsApp;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const components_1 = require("../components");
+const controller_1 = require("./controller");
+const elements_1 = require("./elements");
+const log_panel_1 = require("./log-panel");
+const profiler_1 = require("./profiler");
+const stores_1 = require("./stores");
+const store_1 = require("./store");
+const theme_1 = require("./theme");
+const TABS = [
+    { id: "elements", label: "Elements" },
+    { id: "console", label: "Console" },
+    { id: "profiler", label: "Profiler" },
+];
+function handleDevtoolsKey(key) {
+    const state = stores_1.devtoolsStore.get();
+    if (!state.open)
+        return false;
+    if (key === "escape" && stores_1.inspectorStore.get().picking) {
+        (0, controller_1.setPicking)(false);
+        return true;
+    }
+    if (state.tab === "profiler") {
+        return (0, profiler_1.profilerHandleKey)(key);
+    }
+    return false;
+}
+function Tab(props) {
+    const { id, label, active, rem } = props;
+    return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+            padding: { left: rem * 0.7, right: rem * 0.7, top: rem * 0.3, bottom: rem * 0.3 },
+            background: active ? theme_1.theme.bg : undefined,
+            hoverBackground: active ? theme_1.theme.bg : theme_1.theme.chromeActive,
+        }, onClick: () => stores_1.devtoolsStore.update((s) => ({ ...s, tab: id })), children: (0, jsx_runtime_1.jsx)(components_1.Text, { style: {
+                color: active ? theme_1.theme.text : theme_1.theme.dim,
+                fontSize: rem * 0.74,
+                wrap: false,
+            }, children: label }) }));
+}
+function TabBar(props) {
+    const { tab, rem } = props;
+    return ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: {
+            flexDirection: "row",
+            alignItems: "center",
+            background: theme_1.theme.chrome,
+            flexShrink: 0,
+            justifyContent: "space-between",
+        }, children: [(0, jsx_runtime_1.jsx)(components_1.Box, { style: { flexDirection: "row", alignItems: "center" }, children: TABS.map((entry) => ((0, jsx_runtime_1.jsx)(Tab, { id: entry.id, label: entry.label, active: tab === entry.id, rem: rem }, entry.id))) }), (0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+                    padding: { left: rem * 0.6, right: rem * 0.6, top: rem * 0.3, bottom: rem * 0.3 },
+                    hoverBackground: theme_1.theme.chromeActive,
+                }, onClick: controller_1.closeDevtools, children: (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.dim, fontSize: rem * 0.8, wrap: false }, children: "\u00D7" }) })] }));
+}
+function StatusBar(props) {
+    const { rem } = props;
+    const layout = (0, store_1.useStore)(stores_1.layoutStore);
+    const profiler = (0, store_1.useStore)(stores_1.profilerStore);
+    const devtools = (0, store_1.useStore)(stores_1.devtoolsStore);
+    return ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            background: theme_1.theme.chrome,
+            padding: { left: rem * 0.5, right: rem * 0.5, top: rem * 0.12, bottom: rem * 0.12 },
+            flexShrink: 0,
+        }, children: [(0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.faint, fontSize: rem * 0.64, wrap: false }, children: `${layout.stats.fps.toFixed(0)} fps · ${layout.stats.frameMs.toFixed(1)} ms/frame · ${layout.rects.size} nodes` }), (0, jsx_runtime_1.jsxs)(components_1.Box, { style: { flexDirection: "row", gap: rem * 0.6 }, children: [devtools.cpuRate > 1 && ((0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.warn, fontSize: rem * 0.64, wrap: false }, children: `cpu ${devtools.cpuRate}x` })), profiler.recording && ((0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.danger, fontSize: rem * 0.64, wrap: false }, children: "recording" }))] })] }));
+}
+function DevtoolsApp() {
+    const state = (0, store_1.useStore)(stores_1.devtoolsStore);
+    const rem = Math.max(state.basePx, 10);
+    (0, react_1.useEffect)(() => {
+        if (!state.open)
+            return;
+        (0, controller_1.requestLayout)();
+        const timer = setInterval(controller_1.requestLayout, 400);
+        return () => clearInterval(timer);
+    }, [state.open]);
+    return ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: {
+            flexDirection: "column",
+            width: "100%",
+            flexGrow: 1,
+            background: theme_1.theme.bg,
+            color: theme_1.theme.text,
+        }, children: [(0, jsx_runtime_1.jsx)(TabBar, { tab: state.tab, rem: rem }), state.tab === "elements" && (0, jsx_runtime_1.jsx)(elements_1.ElementsPanel, { rem: rem }), state.tab === "console" && (0, jsx_runtime_1.jsx)(log_panel_1.LogPanel, { rem: rem }), state.tab === "profiler" && (0, jsx_runtime_1.jsx)(profiler_1.ProfilerPanel, { rem: rem }), (0, jsx_runtime_1.jsx)(StatusBar, { rem: rem })] }));
+}

package/dist/react/devtools/console-capture.d.ts

@@ -0,0 +1 @@
+export declare function installConsoleCapture(): void;

package/dist/react/devtools/console-capture.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.installConsoleCapture = installConsoleCapture;
+const node_util_1 = __importDefault(require("node:util"));
+const stores_1 = require("./stores");
+let installed = false;
+function installConsoleCapture() {
+    if (installed)
+        return;
+    installed = true;
+    const capture = (level) => (...args) => {
+        stores_1.consoleLogs.push(level, "console", node_util_1.default.format(...args));
+    };
+    console.log = capture("info");
+    console.info = capture("info");
+    console.warn = capture("warn");
+    console.error = capture("error");
+    console.debug = capture("debug");
+    console.trace = (...args) => {
+        const stack = new Error().stack?.split("\n").slice(2).join("\n") ?? "";
+        stores_1.consoleLogs.push("debug", "console", `Trace: ${node_util_1.default.format(...args)}\n${stack}`);
+    };
+    const captureStream = (stream, level, target) => {
+        stream.write = ((chunk, encodingOrCb, cb) => {
+            const text = typeof chunk === "string"
+                ? chunk
+                : Buffer.from(chunk).toString(typeof encodingOrCb === "string" ? encodingOrCb : "utf8");
+            const trimmed = text.replace(/\n$/, "");
+            if (trimmed.length > 0)
+                stores_1.consoleLogs.push(level, target, trimmed);
+            const callback = typeof encodingOrCb === "function" ? encodingOrCb : cb;
+            callback?.(null);
+            return true;
+        });
+    };
+    captureStream(process.stdout, "info", "stdout");
+    captureStream(process.stderr, "error", "stderr");
+}

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

@@ -0,0 +1,45 @@
+import { Bridge, Instance } from "../reconciler-config";
+export declare const DEFAULT_SPLIT = 0.58;
+export declare function engineOp(op: Record<string, unknown>): void;
+export declare function attachDevtools(bridge: Bridge): void;
+export declare function openDevtools(selectId?: number): void;
+export declare function closeDevtools(): void;
+export declare function toggleDevtools(): void;
+export declare function unmountDevtools(): void;
+export declare function findInstance(id: number): Instance | null;
+export declare function selectNode(id: number, reveal?: boolean): void;
+export type HighlightArea = "content" | "padding" | "border" | "margin";
+export declare function setHighlight(id: number | null, area?: HighlightArea): void;
+export declare function setPicking(on: boolean): void;
+export declare function toggleExpanded(id: number): void;
+export declare function setCpuThrottle(rate: number): void;
+export declare function requestLayout(): void;
+export declare function startRecording(): void;
+export declare function stopRecording(): void;
+export declare function clearRecording(): void;
+interface EngineProfileEvent {
+    epochMs: number;
+    spans: Array<{
+        name: string;
+        start: number;
+        dur: number;
+        depth: number;
+        view: number;
+        arg?: number | null;
+        label?: string | null;
+    }>;
+    counters?: Array<{
+        name: string;
+        at: number;
+        value: number;
+    }>;
+    marks?: Array<{
+        name: string;
+        label: string;
+        start: number;
+        dur: number;
+        view: number;
+    }>;
+}
+export declare function onEngineProfile(data: EngineProfileEvent): void;
+export {};

package/dist/react/devtools/controller.js

@@ -0,0 +1,252 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_SPLIT = void 0;
+exports.engineOp = engineOp;
+exports.attachDevtools = attachDevtools;
+exports.openDevtools = openDevtools;
+exports.closeDevtools = closeDevtools;
+exports.toggleDevtools = toggleDevtools;
+exports.unmountDevtools = unmountDevtools;
+exports.findInstance = findInstance;
+exports.selectNode = selectNode;
+exports.setHighlight = setHighlight;
+exports.setPicking = setPicking;
+exports.toggleExpanded = toggleExpanded;
+exports.setCpuThrottle = setCpuThrottle;
+exports.requestLayout = requestLayout;
+exports.startRecording = startRecording;
+exports.stopRecording = stopRecording;
+exports.clearRecording = clearRecording;
+exports.onEngineProfile = onEngineProfile;
+const react_1 = require("react");
+const constants_1 = require("react-reconciler/constants");
+const reconciler_config_1 = require("../reconciler-config");
+const app_1 = require("./app");
+const stores_1 = require("./stores");
+exports.DEFAULT_SPLIT = 0.58;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let devtoolsRoot = null;
+function engineOp(op) {
+    const b = (0, reconciler_config_1.devtoolsBridge)();
+    b.push(reconciler_config_1.DEVTOOLS_VIEW, op);
+    b.flush();
+}
+function mountDevtools() {
+    if (devtoolsRoot)
+        return;
+    const b = (0, reconciler_config_1.devtoolsBridge)();
+    const container = { bridge: b, view: reconciler_config_1.DEVTOOLS_VIEW, children: [] };
+    b.containers[reconciler_config_1.DEVTOOLS_VIEW] = container;
+    devtoolsRoot = reconciler_config_1.reconciler.createContainer(container, constants_1.ConcurrentRoot, null, false, null, "pixel-devtools", () => { }, null);
+    reconciler_config_1.reconciler.updateContainer((0, react_1.createElement)(app_1.DevtoolsApp), devtoolsRoot, null, null);
+}
+// Moves the devtools to another root: whatever is open on the previous one is
+// closed there first, since the engine split and the mounted tree are per bridge.
+function attachDevtools(bridge) {
+    if ((0, reconciler_config_1.devtoolsBridge)() === bridge)
+        return;
+    if (stores_1.devtoolsStore.get().open)
+        closeDevtools();
+    unmountDevtools();
+    (0, reconciler_config_1.setDevtoolsBridge)(bridge);
+}
+function openDevtools(selectId) {
+    mountDevtools();
+    stores_1.devtoolsStore.update((s) => ({ ...s, open: true }));
+    if (selectId != null)
+        selectNode(selectId, true);
+    engineOp({ op: "setSplit", fraction: exports.DEFAULT_SPLIT });
+}
+function closeDevtools() {
+    stores_1.devtoolsStore.update((s) => ({ ...s, open: false }));
+    setHighlight(null);
+    engineOp({ op: "setSplit", fraction: null });
+}
+function toggleDevtools() {
+    if (stores_1.devtoolsStore.get().open)
+        closeDevtools();
+    else
+        openDevtools();
+}
+function unmountDevtools() {
+    if (!devtoolsRoot)
+        return;
+    reconciler_config_1.reconciler.flushSync(() => {
+        reconciler_config_1.reconciler.updateContainer(null, devtoolsRoot, null, null);
+    });
+    devtoolsRoot = null;
+    (0, reconciler_config_1.devtoolsBridge)().containers[reconciler_config_1.DEVTOOLS_VIEW] = null;
+}
+function findInstance(id) {
+    const container = (0, reconciler_config_1.devtoolsBridge)().containers[reconciler_config_1.APP_VIEW];
+    if (!container)
+        return null;
+    const stack = [...container.children];
+    while (stack.length) {
+        const instance = stack.pop();
+        if (instance.id === id)
+            return instance;
+        stack.push(...instance.children);
+    }
+    return null;
+}
+function isInstance(node) {
+    return node.type !== undefined;
+}
+function selectNode(id, reveal = false) {
+    stores_1.inspectorStore.update((state) => {
+        const expanded = new Set(state.expanded);
+        if (reveal) {
+            let node = findInstance(id)?.parent ?? null;
+            while (node && isInstance(node)) {
+                expanded.add(node.id);
+                node = node.parent;
+            }
+        }
+        return { ...state, selectedId: id, expanded, picking: false };
+    });
+}
+let highlightTimer = null;
+function setHighlight(id, area) {
+    if (highlightTimer) {
+        clearTimeout(highlightTimer);
+        highlightTimer = null;
+    }
+    engineOp({ op: "highlight", view: reconciler_config_1.APP_VIEW, id, area });
+}
+function setPicking(on) {
+    stores_1.inspectorStore.update((s) => ({ ...s, picking: on }));
+    engineOp({ op: "setInspectMode", on });
+}
+function toggleExpanded(id) {
+    stores_1.inspectorStore.update((state) => {
+        const expanded = new Set(state.expanded);
+        if (expanded.has(id))
+            expanded.delete(id);
+        else
+            expanded.add(id);
+        return { ...state, expanded };
+    });
+}
+function setCpuThrottle(rate) {
+    stores_1.devtoolsStore.update((s) => ({ ...s, cpuRate: rate }));
+    engineOp({ op: "setCpuThrottle", rate });
+}
+function requestLayout() {
+    const b = (0, reconciler_config_1.devtoolsBridge)();
+    b.push(reconciler_config_1.APP_VIEW, { op: "queryLayout" });
+    b.flush();
+}
+const STALL_TICK_MS = 25;
+const STALL_REPORT_MS = 60;
+let stallTimer = null;
+let lastTick = 0;
+function startStallWatch() {
+    lastTick = performance.timeOrigin + performance.now();
+    stallTimer = setInterval(() => {
+        const now = performance.timeOrigin + performance.now();
+        const gap = now - lastTick;
+        if (gap > STALL_REPORT_MS) {
+            stores_1.pendingSpans.push({
+                name: `js event-loop stall (${Math.round(gap)}ms)`,
+                start: lastTick,
+                dur: gap,
+                depth: 1,
+                lane: "bridge",
+            });
+        }
+        lastTick = now;
+    }, STALL_TICK_MS);
+}
+function stopStallWatch() {
+    if (stallTimer) {
+        clearInterval(stallTimer);
+        stallTimer = null;
+    }
+}
+function startRecording() {
+    stores_1.pendingSpans.length = 0;
+    stores_1.profilerStore.set({
+        recording: true,
+        pendingStop: false,
+        session: null,
+        startedAt: Date.now(),
+    });
+    startStallWatch();
+    engineOp({ op: "profileStart" });
+}
+function stopRecording() {
+    stopStallWatch();
+    stores_1.profilerStore.update((s) => ({ ...s, recording: false, pendingStop: true }));
+    engineOp({ op: "profileStop" });
+}
+function clearRecording() {
+    stopStallWatch();
+    stores_1.pendingSpans.length = 0;
+    stores_1.profilerStore.set({ recording: false, pendingStop: false, session: null, startedAt: 0 });
+}
+const IMAGE_LANE_NAMES = new Set(["image.wait", "image.decode", "image.encode"]);
+function packImageRows(spans) {
+    const waits = spans.filter((s) => s.lane === "images" && s.name === "image.wait");
+    const rowEnds = [];
+    const rowByArg = new Map();
+    for (const wait of waits) {
+        let row = rowEnds.findIndex((end) => wait.start >= end + 0.1);
+        if (row === -1) {
+            row = rowEnds.length;
+            rowEnds.push(0);
+        }
+        rowEnds[row] = wait.start + wait.dur;
+        wait.depth = row * 2;
+        if (wait.arg != null)
+            rowByArg.set(wait.arg, row * 2);
+    }
+    for (const span of spans) {
+        if (span.lane === "images" && span.name !== "image.wait") {
+            span.depth = (span.arg != null ? rowByArg.get(span.arg) ?? 0 : 0) + 1;
+        }
+    }
+}
+function onEngineProfile(data) {
+    const engineSpans = data.spans.map((s) => ({
+        name: s.name,
+        start: data.epochMs + s.start,
+        dur: s.dur,
+        depth: s.depth,
+        lane: IMAGE_LANE_NAMES.has(s.name)
+            ? "images"
+            : s.view === reconciler_config_1.DEVTOOLS_VIEW
+                ? "devtools-engine"
+                : "engine",
+        arg: s.arg ?? undefined,
+        label: s.label ?? undefined,
+    }));
+    const spans = [...stores_1.pendingSpans, ...engineSpans].sort((a, b) => a.start - b.start);
+    packImageRows(spans);
+    stores_1.pendingSpans.length = 0;
+    if (spans.length === 0) {
+        stores_1.profilerStore.update((s) => ({ ...s, pendingStop: false, session: null }));
+        return;
+    }
+    let start = Infinity;
+    let end = -Infinity;
+    for (const span of spans) {
+        start = Math.min(start, span.start);
+        end = Math.max(end, span.start + span.dur);
+    }
+    const frames = engineSpans.filter((s) => s.name === "frame" && s.depth === 0);
+    const counters = (data.counters ?? []).map((c) => ({
+        name: c.name,
+        at: data.epochMs + c.at,
+        value: c.value,
+    }));
+    const marks = (data.marks ?? []).map((m) => ({
+        name: m.view === reconciler_config_1.DEVTOOLS_VIEW ? `[devtools] ${m.label}` : m.label,
+        start: data.epochMs + m.start,
+        dur: m.dur,
+        depth: 0,
+        lane: "interaction",
+    }));
+    const session = { spans, frames, start, end, counters, marks };
+    stores_1.profilerStore.update((s) => ({ ...s, pendingStop: false, session }));
+}

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

@@ -0,0 +1,4 @@
+import React from "react";
+export declare function ElementsPanel(props: {
+    rem: number;
+}): React.JSX.Element;