@zenbu-labs/pixel 0.0.0 → 0.0.12

package/dist/react/reconciler-config.js

@@ -0,0 +1,412 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reconciler = exports.Bridge = exports.DEVTOOLS_VIEW = exports.APP_VIEW = void 0;
+exports.getBridge = getBridge;
+exports.devtoolsBridge = devtoolsBridge;
+exports.setDevtoolsBridge = setDevtoolsBridge;
+const react_reconciler_1 = __importDefault(require("react-reconciler"));
+const constants_1 = require("react-reconciler/constants");
+const native_1 = require("./native");
+const styles_1 = require("./styles");
+const surface_1 = require("./surface");
+exports.APP_VIEW = 0;
+exports.DEVTOOLS_VIEW = 1;
+class Bridge {
+    engine;
+    propsById = [new Map(), new Map()];
+    containers = [null, null];
+    onFlush = null;
+    onTreeMutation = null;
+    afterCommit = null;
+    queues = [[], []];
+    nextId = 1;
+    seq = 0;
+    constructor(tty, wrapper, sessionEnv, host) {
+        this.engine = (0, native_1.createNativeEngine)(tty, wrapper, sessionEnv, host);
+        if (!defaultBridge)
+            defaultBridge = this;
+    }
+    allocId() {
+        return this.nextId++;
+    }
+    push(view, op) {
+        this.queues[view].push(op);
+    }
+    flush() {
+        for (let view = 0; view < this.queues.length; view++) {
+            const ops = this.queues[view];
+            if (ops.length === 0)
+                continue;
+            this.queues[view] = [];
+            const seq = ++this.seq;
+            const payload = JSON.stringify({ view, seq, ops });
+            const start = performance.timeOrigin + performance.now();
+            this.engine.applyOps(payload);
+            if (this.onFlush) {
+                const dur = performance.timeOrigin + performance.now() - start;
+                this.onFlush({ seq, view, ops: ops.length, start, dur });
+            }
+        }
+    }
+}
+exports.Bridge = Bridge;
+let defaultBridge = null;
+function getBridge(wrapper) {
+    if (!defaultBridge)
+        defaultBridge = new Bridge(undefined, wrapper);
+    return defaultBridge;
+}
+let devtoolsBridgeRef = null;
+function devtoolsBridge() {
+    return devtoolsBridgeRef ?? getBridge();
+}
+function setDevtoolsBridge(bridge) {
+    devtoolsBridgeRef = bridge;
+}
+function textOf(children) {
+    if (children == null || typeof children === "boolean")
+        return "";
+    if (typeof children === "string" || typeof children === "number") {
+        return String(children);
+    }
+    if (Array.isArray(children))
+        return children.map(textOf).join("");
+    throw new Error("<Text> children must be strings or numbers");
+}
+function serializeProps(type, props, hidden, prevProps) {
+    const base = {
+        style: (0, styles_1.serializeStyle)(props.style ?? {}),
+        key: props.id,
+        clickable: !!props.onClick,
+        hidden: hidden || !!props.hidden,
+        contentHeight: props.contentHeight,
+        scrollEvents: !!props.onScroll,
+        wheelEvents: !!props.onWheel,
+        pointerEvents: !!props.onPointer,
+        hoverEvents: !!(props.onMouseEnter || props.onMouseLeave),
+        outsideClickEvents: !!props.onClickOutside,
+        dragEvents: !!props.onDrag,
+        selectionEvents: !!props.onSelection,
+        moveEvents: !!props.onMouseMove,
+        slot: props.slot,
+        mark: props.mark,
+        surface: props.surface ? (0, surface_1.surfaceId)(props.surface) : undefined,
+    };
+    if ((type === "text" || type === "input") && props.spans?.length) {
+        base.spans = props.spans.map((s) => ({
+            start: s.start,
+            end: s.end,
+            color: (0, styles_1.parseColor)(s.color),
+            background: s.background && (0, styles_1.parseColor)(s.background),
+            bold: s.bold,
+            italic: s.italic,
+            underline: s.underline,
+            strikethrough: s.strikethrough,
+        }));
+    }
+    if (type === "shape-path" && props.stroke) {
+        base.shape = {
+            d: props.d ?? "",
+            viewBox: props.viewBox,
+            stroke: {
+                width: props.stroke.width,
+                color: (0, styles_1.parseColor)(props.stroke.color),
+                cap: props.stroke.cap,
+                join: props.stroke.join,
+            },
+        };
+    }
+    if (type === "text") {
+        base.text = textOf(props.children);
+    }
+    else if (type === "marked-text") {
+        base.text = props.text ?? "";
+        base.marks = props.marks;
+    }
+    else if (type === "image") {
+        base.image = {
+            src: props.src ?? "",
+            confirmedEqualTo: props.advanced?.confirmedEqualTo,
+        };
+    }
+    else if (type === "input") {
+        const valueChanged = !prevProps || props.value !== prevProps.value;
+        base.input = {
+            initial: props.defaultValue ?? props.value ?? "",
+            value: valueChanged ? props.value : undefined,
+            marks: props.defaultMarks,
+            caretColor: (0, styles_1.parseColor)(props.caretColor),
+            selectionColor: (0, styles_1.parseColor)(props.selectionColor),
+            autoFocus: !!props.autoFocus,
+            submit: !!props.onSubmit,
+            gutter: props.gutter && {
+                color: (0, styles_1.parseColor)(props.gutter.color),
+                activeColor: (0, styles_1.parseColor)(props.gutter.activeColor),
+            },
+            activeLine: (0, styles_1.parseColor)(props.activeLine),
+        };
+    }
+    return base;
+}
+function mutated(b, view) {
+    b.onTreeMutation?.(view);
+}
+function pushPropsIfChanged(instance, serialized) {
+    const json = JSON.stringify(serialized);
+    if (json === instance.lastSent)
+        return false;
+    instance.lastSent = json;
+    instance.bridge.push(instance.view, {
+        op: "update",
+        id: instance.id,
+        props: serialized,
+    });
+    return true;
+}
+function materialize(b, instance) {
+    if (instance.mounted)
+        return;
+    instance.mounted = true;
+    const serialized = serializeProps(instance.type, instance.props, instance.hidden);
+    instance.lastSent = JSON.stringify(serialized);
+    b.push(instance.view, {
+        op: "create",
+        id: instance.id,
+        props: serialized,
+    });
+    for (const child of instance.children) {
+        materialize(b, child);
+        b.push(instance.view, {
+            op: "insertBefore",
+            parent: instance.id,
+            child: child.id,
+            before: null,
+        });
+    }
+}
+function detachFromParent(child) {
+    const parent = child.parent;
+    if (!parent)
+        return;
+    const index = parent.children.indexOf(child);
+    if (index !== -1)
+        parent.children.splice(index, 1);
+    child.parent = null;
+}
+function insert(parent, parentId, child, before) {
+    const b = child.bridge;
+    materialize(b, child);
+    detachFromParent(child);
+    const siblings = parent.children;
+    const at = before ? siblings.indexOf(before) : -1;
+    if (at === -1)
+        siblings.push(child);
+    else
+        siblings.splice(at, 0, child);
+    child.parent = parent;
+    b.push(child.view, {
+        op: "insertBefore",
+        parent: parentId,
+        child: child.id,
+        before: before?.id ?? null,
+    });
+    mutated(b, child.view);
+}
+function remove(child) {
+    detachFromParent(child);
+    child.bridge.push(child.view, { op: "remove", id: child.id });
+    mutated(child.bridge, child.view);
+}
+const CONTAINER_NODE_ID = 0;
+const hostConfig = {
+    supportsMutation: true,
+    supportsPersistence: false,
+    supportsHydration: false,
+    isPrimaryRenderer: true,
+    noTimeout: -1,
+    createInstance(type, props, rootContainer) {
+        const b = rootContainer.bridge;
+        const instance = {
+            id: b.allocId(),
+            bridge: b,
+            view: rootContainer.view,
+            type,
+            props,
+            parent: null,
+            children: [],
+            mounted: false,
+            hidden: false,
+            lastSent: null,
+        };
+        b.propsById[instance.view].set(instance.id, props);
+        return instance;
+    },
+    createTextInstance() {
+        throw new Error("Raw text must be wrapped in <Text>");
+    },
+    shouldSetTextContent(type) {
+        return type === "text";
+    },
+    appendInitialChild(parent, child) {
+        parent.children.push(child);
+        child.parent = parent;
+    },
+    finalizeInitialChildren() {
+        return false;
+    },
+    prepareUpdate(_instance, _type, _oldProps, newProps) {
+        return newProps;
+    },
+    commitUpdate(instance, newProps, _type, oldProps) {
+        const b = instance.bridge;
+        const prevProps = instance.props;
+        instance.props = newProps;
+        b.propsById[instance.view].set(instance.id, newProps);
+        const serialized = serializeProps(instance.type, newProps, instance.hidden, oldProps ?? prevProps);
+        if (pushPropsIfChanged(instance, serialized)) {
+            mutated(instance.bridge, instance.view);
+        }
+    },
+    appendChild(parent, child) {
+        insert(parent, parent.id, child, null);
+    },
+    appendChildToContainer(container, child) {
+        insert(container, CONTAINER_NODE_ID, child, null);
+    },
+    insertBefore(parent, child, before) {
+        insert(parent, parent.id, child, before);
+    },
+    insertInContainerBefore(container, child, before) {
+        insert(container, CONTAINER_NODE_ID, child, before);
+    },
+    removeChild(_parent, child) {
+        remove(child);
+    },
+    removeChildFromContainer(_container, child) {
+        remove(child);
+    },
+    clearContainer(container) {
+        container.children = [];
+        container.bridge.push(container.view, { op: "clear", id: CONTAINER_NODE_ID });
+        mutated(container.bridge, container.view);
+    },
+    detachDeletedInstance(instance) {
+        const b = instance.bridge;
+        b.propsById[instance.view].delete(instance.id);
+        b.push(instance.view, { op: "forget", id: instance.id });
+    },
+    hideInstance(instance) {
+        instance.hidden = true;
+        const serialized = serializeProps(instance.type, instance.props, true, instance.props);
+        if (pushPropsIfChanged(instance, serialized)) {
+            mutated(instance.bridge, instance.view);
+        }
+    },
+    unhideInstance(instance, props) {
+        const prevProps = instance.props;
+        instance.hidden = false;
+        instance.props = props;
+        const serialized = serializeProps(instance.type, props, false, prevProps);
+        if (pushPropsIfChanged(instance, serialized)) {
+            mutated(instance.bridge, instance.view);
+        }
+    },
+    hideTextInstance() { },
+    unhideTextInstance() { },
+    commitTextUpdate() { },
+    resetTextContent() { },
+    commitMount() { },
+    getRootHostContext() {
+        return null;
+    },
+    getChildHostContext(parentContext) {
+        return parentContext;
+    },
+    getPublicInstance(instance) {
+        const type = instance.type;
+        return {
+            id: instance.id,
+            focus: () => {
+                if (type !== "input")
+                    return;
+                const b = instance.bridge;
+                b.push(instance.view, { op: "focus", id: instance.id });
+                b.flush();
+            },
+            blur: () => {
+                if (type !== "input")
+                    return;
+                const b = instance.bridge;
+                b.push(instance.view, { op: "focus", id: null });
+                b.flush();
+            },
+            scrollTo: (offset, smooth = false) => {
+                const b = instance.bridge;
+                b.push(instance.view, { op: "scrollTo", id: instance.id, offset, smooth });
+                b.flush();
+            },
+            scrollIntoView: (smooth = false) => {
+                const b = instance.bridge;
+                b.push(instance.view, { op: "scrollIntoView", id: instance.id, smooth });
+                b.flush();
+            },
+            splice: (start, end, text) => {
+                if (type !== "input")
+                    return;
+                const b = instance.bridge;
+                b.push(instance.view, { op: "inputSplice", id: instance.id, start, end, text });
+                b.flush();
+            },
+            selectAll: () => {
+                if (type !== "input")
+                    return;
+                const b = instance.bridge;
+                b.push(instance.view, { op: "inputSelectAll", id: instance.id });
+                b.flush();
+            },
+            addMark: (mark, offset) => {
+                if (type !== "input")
+                    return;
+                const b = instance.bridge;
+                b.push(instance.view, { op: "insertMark", id: instance.id, mark, offset });
+                b.flush();
+            },
+            removeMark: (mark) => {
+                if (type !== "input")
+                    return;
+                const b = instance.bridge;
+                b.push(instance.view, { op: "removeMark", id: instance.id, mark });
+                b.flush();
+            },
+        };
+    },
+    prepareForCommit() {
+        return null;
+    },
+    resetAfterCommit(container) {
+        container.bridge.flush();
+        container.bridge.afterCommit?.(container.view);
+    },
+    preparePortalMount() { },
+    scheduleTimeout: setTimeout,
+    cancelTimeout: clearTimeout,
+    supportsMicrotasks: true,
+    scheduleMicrotask: queueMicrotask,
+    getCurrentEventPriority() {
+        return constants_1.DefaultEventPriority;
+    },
+    getInstanceFromNode() {
+        return null;
+    },
+    getInstanceFromScope() {
+        return null;
+    },
+    prepareScopeUpdate() { },
+    beforeActiveInstanceBlur() { },
+    afterActiveInstanceBlur() { },
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+exports.reconciler = (0, react_reconciler_1.default)(hostConfig);

package/dist/react/styles.d.ts

@@ -0,0 +1,88 @@
+import type { Rgba } from "./native";
+export type Color = Rgba | [number, number, number] | string;
+export interface Edges {
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+}
+export type InsetValue = number | `${number}%`;
+export interface InsetEdges {
+    left?: InsetValue;
+    right?: InsetValue;
+    top?: InsetValue;
+    bottom?: InsetValue;
+}
+export interface ScrollbarStyle {
+    width?: number;
+    hoverWidth?: number;
+    margin?: number;
+    minThumb?: number;
+    thumbColor?: Color;
+    thumbHoverColor?: Color;
+    trackColor?: Color;
+}
+export type BorderSide = [width: number, color: Color];
+export interface GradientStop {
+    at: number;
+    color: Color;
+}
+export interface LinearGradient {
+    from: [number, number];
+    to: [number, number];
+    stops: GradientStop[];
+}
+export type Border = {
+    width: number;
+    color: Color;
+} | {
+    top?: BorderSide;
+    right?: BorderSide;
+    bottom?: BorderSide;
+    left?: BorderSide;
+};
+export interface Style {
+    flexDirection?: "row" | "column";
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: number | `${number}%` | "auto";
+    width?: number | `${number}%` | "auto";
+    height?: number | `${number}%` | "auto";
+    minWidth?: number | `${number}%` | "auto";
+    maxWidth?: number | `${number}%` | "auto";
+    maxHeight?: number | `${number}%` | "auto";
+    padding?: number | Edges;
+    margin?: number | Edges;
+    gap?: number;
+    position?: "flow" | "absolute";
+    inset?: InsetEdges;
+    overflow?: "visible" | "hidden" | "scroll";
+    justifyContent?: "start" | "center" | "end" | "space-between";
+    alignItems?: "start" | "center" | "end" | "stretch";
+    background?: Color | LinearGradient;
+    cornerRadius?: number | {
+        topLeft?: number;
+        topRight?: number;
+        bottomRight?: number;
+        bottomLeft?: number;
+    };
+    border?: Border;
+    color?: Color;
+    fontSize?: number;
+    font?: number;
+    hoverBackground?: Color;
+    hoverColor?: Color;
+    scrollbar?: ScrollbarStyle;
+    wrap?: boolean;
+    ellipsis?: boolean;
+    selectable?: boolean;
+    selectionColor?: Color;
+    /**
+     * bespoke property so that we can get selection that feels more like a terminal
+     *
+     * makes the highlight extend to the entire available space of the selection container instead of just the text
+     */
+    selectionMode?: "text" | "unified";
+}
+export declare function parseColor(color: Color | undefined): Rgba | undefined;
+export declare function serializeStyle(style: Style): Record<string, unknown>;

package/dist/react/styles.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseColor = parseColor;
+exports.serializeStyle = serializeStyle;
+function parseColor(color) {
+    if (color == null)
+        return undefined;
+    if (Array.isArray(color)) {
+        const [r, g, b, a] = color;
+        return [r, g, b, a ?? 255];
+    }
+    let hex = color.startsWith("#") ? color.slice(1) : color;
+    if (hex.length === 3 || hex.length === 4) {
+        hex = [...hex].map((c) => c + c).join("");
+    }
+    if (!/^[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(hex)) {
+        throw new Error(`unsupported color: ${color}`);
+    }
+    const int = (i) => parseInt(hex.slice(i, i + 2), 16);
+    return [int(0), int(2), int(4), hex.length === 8 ? int(6) : 255];
+}
+function serializePaint(paint) {
+    if (Array.isArray(paint) || typeof paint === "string")
+        return parseColor(paint);
+    return {
+        from: paint.from,
+        to: paint.to,
+        stops: paint.stops.map((stop) => ({ at: stop.at, color: parseColor(stop.color) })),
+    };
+}
+function serializeBorder(border) {
+    if ("width" in border) {
+        return { width: border.width, color: parseColor(border.color) };
+    }
+    const side = (s) => s && [s[0], parseColor(s[1])];
+    return {
+        top: side(border.top),
+        right: side(border.right),
+        bottom: side(border.bottom),
+        left: side(border.left),
+    };
+}
+function serializeStyle(style) {
+    return {
+        flexDirection: style.flexDirection,
+        flexGrow: style.flexGrow,
+        flexShrink: style.flexShrink,
+        flexBasis: style.flexBasis,
+        width: style.width,
+        height: style.height,
+        minWidth: style.minWidth,
+        maxWidth: style.maxWidth,
+        maxHeight: style.maxHeight,
+        padding: style.padding,
+        margin: style.margin,
+        gap: style.gap,
+        position: style.position,
+        inset: style.inset,
+        overflow: style.overflow,
+        justifyContent: style.justifyContent,
+        alignItems: style.alignItems,
+        background: style.background === undefined ? undefined : serializePaint(style.background),
+        cornerRadius: style.cornerRadius,
+        border: style.border && serializeBorder(style.border),
+        color: parseColor(style.color),
+        fontSize: style.fontSize,
+        font: style.font,
+        hoverBackground: parseColor(style.hoverBackground),
+        hoverColor: parseColor(style.hoverColor),
+        wrap: style.wrap,
+        ellipsis: style.ellipsis,
+        selectable: style.selectable,
+        selectionColor: parseColor(style.selectionColor),
+        selectionMode: style.selectionMode,
+        scrollbar: style.scrollbar && {
+            width: style.scrollbar.width,
+            hoverWidth: style.scrollbar.hoverWidth,
+            margin: style.scrollbar.margin,
+            minThumb: style.scrollbar.minThumb,
+            thumbColor: parseColor(style.scrollbar.thumbColor),
+            thumbHoverColor: parseColor(style.scrollbar.thumbHoverColor),
+            trackColor: parseColor(style.scrollbar.trackColor),
+        },
+    };
+}

package/dist/react/surface.d.ts

@@ -0,0 +1,55 @@
+import type { DamageRect, NativeEngine, SurfaceShm } from "./native";
+type Damaged = {
+    damage?: DamageRect;
+};
+export type SurfaceTexture = {
+    ioSurface: Buffer;
+} | {
+    shm: SurfaceShm;
+};
+export type SurfaceFrame = ({
+    bgra: Buffer;
+    width: number;
+    height: number;
+} & Damaged) | (SurfaceTexture & Damaged & Released);
+interface Released {
+    released?: () => void;
+}
+export declare class Surface {
+    private readonly id;
+    private readonly engine;
+    private closed;
+    constructor(engine: NativeEngine, id: number);
+    present(frame: SurfaceFrame): void;
+    clear(): void;
+    startCapture(dir: string): SurfaceCapture;
+    close(): void;
+}
+export interface CaptureStats {
+    frames: number;
+    drops: number;
+    durationMs: number;
+}
+export interface CaptureFrameMeta {
+    tMs: number;
+    key: boolean;
+    width: number;
+    height: number;
+    dropsBefore: number;
+}
+export interface CaptureIndex {
+    frames: CaptureFrameMeta[];
+    drops: number;
+    durationMs: number;
+}
+export declare class SurfaceCapture {
+    private readonly engine;
+    readonly id: number;
+    constructor(engine: NativeEngine, id: number);
+    stop(): CaptureStats;
+    index(): CaptureIndex;
+    frame(index: number): Buffer;
+    release(): void;
+}
+export declare function surfaceId(surface: Surface): number;
+export {};