@zenbu-labs/pixel 0.0.0 → 0.0.13

package/dist/react/index.js

@@ -0,0 +1,538 @@
+"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.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;
+const react_1 = require("react");
+const constants_1 = require("react-reconciler/constants");
+const reconciler_config_1 = require("./reconciler-config");
+const surface_1 = require("./surface");
+const app_1 = require("./devtools/app");
+const console_capture_1 = require("./devtools/console-capture");
+const controller_1 = require("./devtools/controller");
+Object.defineProperty(exports, "closeDevtools", { enumerable: true, get: function () { return controller_1.closeDevtools; } });
+Object.defineProperty(exports, "engineOp", { enumerable: true, get: function () { return controller_1.engineOp; } });
+Object.defineProperty(exports, "openDevtools", { enumerable: true, get: function () { return controller_1.openDevtools; } });
+Object.defineProperty(exports, "requestLayout", { enumerable: true, get: function () { return controller_1.requestLayout; } });
+Object.defineProperty(exports, "toggleDevtools", { enumerable: true, get: function () { return controller_1.toggleDevtools; } });
+const export_profile_1 = require("./devtools/export-profile");
+const fiber_hook_1 = require("./devtools/fiber-hook");
+const colors_1 = require("./colors");
+const theme_1 = require("./devtools/theme");
+const stores_1 = require("./devtools/stores");
+Object.defineProperty(exports, "inspectorStore", { enumerable: true, get: function () { return stores_1.inspectorStore; } });
+function appLog(level, target, text) {
+    stores_1.engineLogs.push(level, target, text);
+}
+var components_1 = require("./components");
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return components_1.Box; } });
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return components_1.Text; } });
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return components_1.Input; } });
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return components_1.Image; } });
+Object.defineProperty(exports, "MarkedText", { enumerable: true, get: function () { return components_1.MarkedText; } });
+Object.defineProperty(exports, "Path", { enumerable: true, get: function () { return components_1.Path; } });
+var stores_2 = require("./devtools/stores");
+Object.defineProperty(exports, "layoutStore", { enumerable: true, get: function () { return stores_2.layoutStore; } });
+Object.defineProperty(exports, "profilerStore", { enumerable: true, get: function () { return stores_2.profilerStore; } });
+var native_1 = require("./native");
+Object.defineProperty(exports, "HIGHLIGHT_CAPTURES", { enumerable: true, get: function () { return native_1.HIGHLIGHT_CAPTURES; } });
+Object.defineProperty(exports, "captureFilmstrip", { enumerable: true, get: function () { return native_1.captureFilmstrip; } });
+Object.defineProperty(exports, "diff", { enumerable: true, get: function () { return native_1.diff; } });
+Object.defineProperty(exports, "encodeRecording", { enumerable: true, get: function () { return native_1.encodeRecording; } });
+Object.defineProperty(exports, "highlight", { enumerable: true, get: function () { return native_1.highlight; } });
+Object.defineProperty(exports, "parseMarkdown", { enumerable: true, get: function () { return native_1.parseMarkdown; } });
+var colors_2 = require("./colors");
+Object.defineProperty(exports, "useTerminalColors", { enumerable: true, get: function () { return colors_2.useTerminalColors; } });
+var surface_2 = require("./surface");
+Object.defineProperty(exports, "Surface", { enumerable: true, get: function () { return surface_2.Surface; } });
+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; } });
+/**
+ *
+ * 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
+ */
+function setKeyCapture(keys) {
+    const bridge = (0, reconciler_config_1.getBridge)();
+    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" });
+    bridge.flush();
+}
+function setClipboard(text) {
+    const bridge = (0, reconciler_config_1.getBridge)();
+    bridge.push(reconciler_config_1.APP_VIEW, { op: "setClipboard", text });
+    bridge.flush();
+}
+function applyColors(colors) {
+    (0, colors_1.publishColors)(colors);
+    (0, theme_1.refreshTheme)(colors);
+    stores_1.devtoolsStore.update((s) => ({ ...s, background: colors.background }));
+}
+function createRoot(options = {}) {
+    const bridge = options.tty || options.host
+        ? new reconciler_config_1.Bridge(options.tty, options.wrapper, options.sessionEnv, options.host)
+        : (0, reconciler_config_1.getBridge)(options.wrapper);
+    const devtoolsEnabled = options.devtools !== false;
+    if (options.cwd)
+        (0, export_profile_1.setProfileDirectory)(options.cwd);
+    let devtoolsInstalled = false;
+    const enableDevtools = () => {
+        if (devtoolsInstalled)
+            return;
+        devtoolsInstalled = true;
+        (0, console_capture_1.installConsoleCapture)();
+        (0, fiber_hook_1.installFiberHook)();
+        reconciler_config_1.reconciler.injectIntoDevTools({
+            bundleType: 0,
+            version: "18.3.1",
+            rendererPackageName: "pixel-react",
+        });
+        bridge.onFlush = (sample) => {
+            (0, stores_1.recordSpan)({
+                name: `ops flush (${sample.ops} ops)`,
+                start: sample.start,
+                dur: sample.dur,
+                depth: 0,
+                lane: "bridge",
+                arg: sample.seq,
+            });
+        };
+    };
+    const info = JSON.parse(bridge.engine.info());
+    applyColors(info.colors);
+    bridge.engine.setKeyEventTypes(!!options.keyEventTypes);
+    if (options.onLayout) {
+        bridge.afterCommit = (view) => {
+            if (view !== reconciler_config_1.APP_VIEW)
+                return;
+            bridge.push(reconciler_config_1.APP_VIEW, { op: "queryLayout" });
+            bridge.flush();
+        };
+    }
+    const container = { bridge, view: reconciler_config_1.APP_VIEW, children: [] };
+    bridge.containers[reconciler_config_1.APP_VIEW] = container;
+    const root = reconciler_config_1.reconciler.createContainer(container, constants_1.ConcurrentRoot, null, false, null, "pixel", (error) => {
+        stores_1.engineLogs.push("error", "react", String(error));
+    }, null);
+    if (devtoolsEnabled)
+        enableDevtools();
+    const fontIds = new Map();
+    const fontRequests = new Map();
+    const retargets = [];
+    const dispatch = (event) => {
+        const view = event.view ?? reconciler_config_1.APP_VIEW;
+        switch (event.type) {
+            case "click": {
+                const props = bridge.propsById[view]?.get(event.node);
+                props?.onClick?.({ x: event.x, y: event.y, offset: event.offset ?? undefined });
+                break;
+            }
+            case "clickOutside": {
+                const props = bridge.propsById[view]?.get(event.node);
+                props?.onClickOutside?.({ x: event.x, y: event.y });
+                break;
+            }
+            case "change": {
+                const props = bridge.propsById[view]?.get(event.node);
+                props?.onChange?.(event.text, {
+                    cursor: event.cursor ?? 0,
+                    ...(event.caret ?? { x: 0, y: 0, w: 0, h: 0 }),
+                    source: event.source ?? "edit",
+                    marks: event.marks ?? [],
+                });
+                break;
+            }
+            case "caret": {
+                const props = bridge.propsById[view]?.get(event.node);
+                props?.onCaret?.({
+                    cursor: event.cursor ?? 0,
+                    ...(event.caret ?? { x: 0, y: 0, w: 0, h: 0 }),
+                });
+                break;
+            }
+            case "submit": {
+                const props = bridge.propsById[view]?.get(event.node);
+                props?.onSubmit?.(event.text, event.marks ?? []);
+                break;
+            }
+            case "serializeMarks": {
+                const request = (event.marks ?? []);
+                const replies = [];
+                for (const entry of request) {
+                    const props = bridge.propsById[view]?.get(entry.node);
+                    const data = props?.serializeMark?.(entry.id);
+                    if (typeof data === "string")
+                        replies.push({ index: entry.index, data });
+                }
+                bridge.push(view, { op: "richClipboard", token: event.token, marks: replies });
+                bridge.flush();
+                break;
+            }
+            case "pasteImage": {
+                const image = {
+                    path: event.path,
+                    width: event.width,
+                    height: event.height,
+                    source: event.source,
+                };
+                const props = bridge.propsById[view]?.get(event.node);
+                if (props?.onPasteImage) {
+                    props.onPasteImage(image);
+                }
+                else if (view === reconciler_config_1.APP_VIEW) {
+                    options.onPasteImage?.(image);
+                }
+                break;
+            }
+            case "scroll": {
+                const props = bridge.propsById[view]?.get(event.node);
+                props?.onScroll?.({ offset: event.offset, max: event.max });
+                break;
+            }
+            case "selection": {
+                const props = bridge.propsById[view]?.get(event.node);
+                props?.onSelection?.({
+                    text: event.text ?? "",
+                    x: event.x ?? 0,
+                    y: event.y ?? 0,
+                    w: event.w ?? 0,
+                    h: event.h ?? 0,
+                    parts: (event.parts ?? []),
+                });
+                break;
+            }
+            case "drag": {
+                const props = bridge.propsById[view]?.get(event.node);
+                props?.onDrag?.({
+                    phase: event.phase,
+                    x: event.x,
+                    y: event.y,
+                    mods: event.mods ?? { shift: false, alt: false, ctrl: false, super: false },
+                });
+                break;
+            }
+            case "hoverEnter": {
+                const props = bridge.propsById[view]?.get(event.node);
+                props?.onMouseEnter?.();
+                break;
+            }
+            case "hoverLeave": {
+                const props = bridge.propsById[view]?.get(event.node);
+                props?.onMouseLeave?.();
+                break;
+            }
+            case "wheel": {
+                const props = bridge.propsById[view]?.get(event.node);
+                props?.onWheel?.({
+                    x: event.x,
+                    y: event.y,
+                    deltaX: event.deltaX ?? 0,
+                    deltaY: event.deltaY ?? 0,
+                    precise: !!event.precise,
+                    mods: event.mods ?? { shift: false, alt: false, ctrl: false, super: false },
+                });
+                break;
+            }
+            case "pointer": {
+                const props = bridge.propsById[view]?.get(event.node);
+                props?.onPointer?.({
+                    kind: event.kind,
+                    button: event.button,
+                    mods: event.mods,
+                    x: event.x,
+                    y: event.y,
+                });
+                break;
+            }
+            case "mouseMove": {
+                const props = bridge.propsById[view]?.get(event.node);
+                props?.onMouseMove?.({ x: event.x, y: event.y });
+                break;
+            }
+            case "colors": {
+                info.colors = event.colors;
+                applyColors(info.colors);
+                options.onColors?.(info.colors);
+                break;
+            }
+            case "resize": {
+                const size = {
+                    width: event.width,
+                    height: event.height,
+                    basePx: event.basePx,
+                };
+                if (view === reconciler_config_1.APP_VIEW) {
+                    info.width = size.width;
+                    info.height = size.height;
+                    info.basePx = size.basePx;
+                    options.onResize?.(size);
+                }
+                else if ((0, reconciler_config_1.devtoolsBridge)() === bridge) {
+                    stores_1.devtoolsStore.update((s) => ({ ...s, ...size }));
+                }
+                break;
+            }
+            case "key": {
+                if (view === reconciler_config_1.DEVTOOLS_VIEW) {
+                    if ((0, reconciler_config_1.devtoolsBridge)() === bridge)
+                        (0, app_1.handleDevtoolsKey)(event.key);
+                }
+                else {
+                    options.onKey?.({
+                        key: event.key,
+                        kind: event.kind,
+                        text: event.text,
+                        mods: event.mods,
+                    });
+                }
+                break;
+            }
+            case "rightClick":
+                if (view === reconciler_config_1.APP_VIEW) {
+                    options.onRightClick?.({ x: event.x, y: event.y });
+                }
+                break;
+            case "paste":
+                if (view === reconciler_config_1.APP_VIEW)
+                    options.onPaste?.(event.text);
+                break;
+            case "focus":
+                options.onFocus?.(!!event.focused);
+                break;
+            case "devtools":
+                enableDevtools();
+                (0, controller_1.attachDevtools)(bridge);
+                (0, controller_1.toggleDevtools)();
+                break;
+            case "inspect":
+                if (devtoolsEnabled && view === reconciler_config_1.APP_VIEW && event.node != null) {
+                    enableDevtools();
+                    (0, controller_1.attachDevtools)(bridge);
+                    (0, controller_1.openDevtools)(event.node);
+                    (0, controller_1.selectNode)(event.node, true);
+                }
+                break;
+            case "log":
+                stores_1.engineLogs.push(event.level ?? "info", event.target ?? "engine", event.message ?? event.text ?? "", event.epochMs);
+                break;
+            case "layout": {
+                const rects = new Map();
+                for (const node of event.nodes ?? [])
+                    rects.set(node.id, node);
+                const snapshot = {
+                    rects,
+                    stats: event.stats ?? { frameMs: 0, fps: 0 },
+                    width: event.width ?? 0,
+                    height: event.height ?? 0,
+                    at: Date.now(),
+                };
+                stores_1.layoutStore.set(snapshot);
+                options.onLayout?.(snapshot);
+                break;
+            }
+            case "profile":
+                (0, controller_1.onEngineProfile)({
+                    epochMs: event.epochMs ?? 0,
+                    spans: event.spans ?? [],
+                    counters: event.counters ?? [],
+                    marks: event.marks ?? [],
+                });
+                break;
+            case "error":
+                stores_1.engineLogs.push("error", "bridge", event.message ?? "unknown bridge error");
+                break;
+            case "hostClosed":
+                options.onHostClosed?.();
+                break;
+            case "handoff":
+                options.onHandoff?.({ tty: event.tty ?? undefined, socket: event.socket ?? undefined });
+                break;
+            case "retargeted": {
+                const waiting = retargets.shift();
+                if (event.ok && event.info) {
+                    Object.assign(info, event.info);
+                    applyColors(info.colors);
+                    waiting?.resolve();
+                }
+                else {
+                    waiting?.reject(new Error(event.error ?? "retarget failed"));
+                }
+                break;
+            }
+            case "fontRegistered": {
+                const pending = fontRequests.get(event.path) ?? [];
+                fontRequests.delete(event.path);
+                if (event.font != null) {
+                    fontIds.set(event.path, event.font);
+                    for (const p of pending)
+                        p.resolve(event.font);
+                }
+                else {
+                    const error = new Error(event.error ?? "font failed to load");
+                    for (const p of pending)
+                        p.reject(error);
+                }
+                break;
+            }
+            case "exit":
+                if (options.onEngineExit) {
+                    options.onEngineExit(event.error ?? null);
+                }
+                else {
+                    if (event.error) {
+                        process.stderr.write(`pixel-react: engine exited: ${event.error}\n`);
+                    }
+                    process.exit(event.error ? 1 : 0);
+                }
+                break;
+        }
+    };
+    bridge.engine.start((err, json) => {
+        if (err)
+            return;
+        const event = JSON.parse(json);
+        dispatch(event);
+        if (event.atMs && event.type !== "profile" && stores_1.profilerStore.get().recording) {
+            const now = performance.timeOrigin + performance.now();
+            (0, stores_1.recordSpan)({
+                name: `event ${event.type}`,
+                start: event.atMs,
+                dur: Math.max(now - event.atMs, 0.01),
+                depth: 0,
+                lane: "bridge",
+            });
+        }
+    });
+    if (!devtoolsEnabled || options.onRightClick) {
+        bridge.push(reconciler_config_1.APP_VIEW, { op: "setDefaultMenu", on: false });
+        bridge.flush();
+    }
+    /**
+     *
+     * fixme: node types?
+     */
+    const forwardResize = () => bridge.engine.applyOps(JSON.stringify({ view: 0, ops: [] }));
+    const ownsStdout = !options.tty && !options.host;
+    if (ownsStdout)
+        process.stdout.on("resize", forwardResize);
+    const restore = () => bridge.engine.stop();
+    process.on("exit", restore);
+    const onAppRender = (_id, phase, actualDuration, _baseDuration, startTime, commitTime) => {
+        (0, stores_1.recordSpan)({
+            name: `react ${phase}`,
+            start: performance.timeOrigin + startTime,
+            dur: Math.max(commitTime - startTime, actualDuration),
+            depth: 0,
+            lane: "react",
+            self: actualDuration,
+        });
+    };
+    let nextSurfaceId = 1;
+    return {
+        info,
+        sharedTextures: typeof bridge.engine.updateSurfaceTexture === "function",
+        render(element) {
+            const wrapped = devtoolsEnabled
+                ? (0, react_1.createElement)(react_1.Profiler, { id: "pixel-app", onRender: onAppRender }, element)
+                : element;
+            reconciler_config_1.reconciler.updateContainer(wrapped, root, null, null);
+        },
+        flushSync(fn) {
+            return reconciler_config_1.reconciler.flushSync(fn);
+        },
+        registerFont(path) {
+            const known = fontIds.get(path);
+            if (known != null)
+                return Promise.resolve(known);
+            return new Promise((resolve, reject) => {
+                const pending = fontRequests.get(path);
+                if (pending) {
+                    pending.push({ resolve, reject });
+                    return;
+                }
+                fontRequests.set(path, [{ resolve, reject }]);
+                bridge.push(reconciler_config_1.APP_VIEW, { op: "registerFont", path });
+                bridge.flush();
+            });
+        },
+        createSurface() {
+            return new surface_1.Surface(bridge.engine, nextSurfaceId++);
+        },
+        surfaceStats() {
+            return JSON.parse(bridge.engine.surfaceStats());
+        },
+        stop() {
+            reconciler_config_1.reconciler.flushSync(() => {
+                reconciler_config_1.reconciler.updateContainer(null, root, null, null);
+            });
+            if ((0, reconciler_config_1.devtoolsBridge)() === bridge)
+                (0, controller_1.unmountDevtools)();
+            bridge.engine.stop();
+            if (ownsStdout)
+                process.stdout.off("resize", forwardResize);
+            process.off("exit", restore);
+        },
+        openDevtools() {
+            enableDevtools();
+            (0, controller_1.attachDevtools)(bridge);
+            (0, controller_1.openDevtools)();
+        },
+        closeDevtools() {
+            if ((0, reconciler_config_1.devtoolsBridge)() === bridge)
+                (0, controller_1.closeDevtools)();
+        },
+        // shitty name     
+        nudgeResize() {
+            forwardResize();
+        },
+        queryLayout() {
+            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();
+        },
+        setKeyCapture(keys) {
+            bridge.push(reconciler_config_1.APP_VIEW, { op: "setKeyCapture", keys });
+            bridge.flush();
+        },
+        requestClipboardImage() {
+            bridge.push(reconciler_config_1.APP_VIEW, { op: "requestClipboardImage" });
+            bridge.flush();
+        },
+        setClipboard(text) {
+            bridge.push(reconciler_config_1.APP_VIEW, { op: "setClipboard", text });
+            bridge.flush();
+        },
+        setTitle(text) {
+            bridge.push(reconciler_config_1.APP_VIEW, { op: "setTitle", text });
+            bridge.flush();
+        },
+        retarget(target) {
+            return new Promise((resolve, reject) => {
+                retargets.push({ resolve, reject });
+                bridge.push(reconciler_config_1.APP_VIEW, { op: "retarget", ...target });
+                bridge.flush();
+            });
+        },
+    };
+}

package/dist/react/markdown.d.ts

@@ -0,0 +1,25 @@
+import type { Color } from "./styles";
+export interface MarkdownTheme {
+    fg: Color;
+    muted: Color;
+    link: Color;
+    inlineCode: Color;
+    codeBg: Color;
+    separator: Color;
+    syntax: Record<string, Color | undefined>;
+}
+export interface MarkdownProps {
+    text: string;
+    theme: MarkdownTheme;
+    rem: number;
+    streaming?: boolean;
+    monoFont?: number;
+    onLinkClick?: (href: string) => void;
+    highlight?: {
+        start: number;
+        end: number;
+    } | null;
+    highlightBg?: Color;
+}
+export declare function Markdown({ text, theme, rem, streaming, monoFont, onLinkClick, highlight, highlightBg, }: MarkdownProps): import("react").JSX.Element;
+export declare function slugify(text: string): string;