@zenbu-labs/pixel 0.0.0 → 0.0.13

package/dist/react/markdown.js

@@ -0,0 +1,270 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Markdown = Markdown;
+exports.slugify = slugify;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const components_1 = require("./components");
+const native_1 = require("./native");
+const HEADING_SCALE = [1.7, 1.4, 1.2, 1.05, 1, 1];
+function Markdown({ text, theme, rem, streaming, monoFont, onLinkClick, highlight, highlightBg, }) {
+    const blocks = (0, react_1.useMemo)(() => (0, native_1.parseMarkdown)(text, streaming), [text, streaming]);
+    const groups = (0, react_1.useMemo)(() => groupQuotes(blocks), [blocks]);
+    const slugs = (0, react_1.useMemo)(() => headingSlugs(blocks), [blocks]);
+    const anchors = (0, react_1.useRef)(new Map());
+    const external = (0, react_1.useRef)(onLinkClick);
+    external.current = onLinkClick;
+    const nav = (0, react_1.useRef)({
+        anchors,
+        follow: (href) => {
+            if (href.startsWith("#")) {
+                anchors.current.get(href.slice(1))?.scrollIntoView(true); // bad api
+            }
+            else {
+                external.current?.(href);
+            }
+        },
+    });
+    const highlighted = (block) => highlight != null && block.sourceEnd > highlight.start && block.sourceStart < highlight.end;
+    const firstHighlighted = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (highlight != null)
+            firstHighlighted.current?.scrollIntoView(true);
+    }, [highlight?.start, highlight?.end, text]);
+    let highlightSeen = false;
+    const blockProps = (block, index) => {
+        const hit = highlighted(block);
+        const first = hit && !highlightSeen;
+        if (hit)
+            highlightSeen = true;
+        return {
+            block,
+            index,
+            slug: slugs.get(index),
+            nav: nav.current,
+            theme,
+            rem,
+            monoFont,
+            highlightBg: hit ? highlightBg ?? theme.codeBg : undefined,
+            highlightRef: first ? firstHighlighted : undefined,
+        };
+    };
+    return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: { flexDirection: "column", gap: rem * 0.55 }, children: groups.map((group, i) => group.quote > 0 ? ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: { gap: rem * 0.6 }, children: [Array.from({ length: group.quote }, (_, bar) => ((0, jsx_runtime_1.jsx)(components_1.Box, { style: { width: Math.max(2, rem * 0.18), background: theme.separator } }, bar))), (0, jsx_runtime_1.jsx)(components_1.Box, { style: { flexDirection: "column", gap: rem * 0.55, flexShrink: 1 }, children: group.blocks.map(({ block, index }, j) => ((0, jsx_runtime_1.jsx)(Block, { ...blockProps(block, index) }, j))) })] }, i)) : ((0, jsx_runtime_1.jsx)(Block, { ...blockProps(group.blocks[0].block, group.blocks[0].index) }, i))) }));
+}
+function groupQuotes(blocks) {
+    const groups = [];
+    blocks.forEach((block, index) => {
+        const last = groups[groups.length - 1];
+        if (block.quote > 0 && last?.quote === block.quote) {
+            last.blocks.push({ block, index });
+        }
+        else {
+            groups.push({ quote: block.quote, blocks: [{ block, index }] });
+        }
+    });
+    return groups;
+}
+function slugify(text) {
+    return text
+        .toLowerCase()
+        .trim()
+        .replace(/[^\p{L}\p{N}\s-]/gu, "")
+        .replace(/\s+/g, "-");
+}
+function headingSlugs(blocks) {
+    const used = new Map();
+    const out = new Map();
+    blocks.forEach((block, index) => {
+        if (block.kind !== "heading")
+            return;
+        const base = slugify(block.text);
+        const n = used.get(base) ?? 0;
+        used.set(base, n + 1);
+        out.set(index, n === 0 ? base : `${base}-${n}`);
+    });
+    return out;
+}
+const Block = (0, react_1.memo)(function Block({ block, theme, rem, monoFont, slug, nav, index, highlightBg, highlightRef, }) {
+    let body = ((0, jsx_runtime_1.jsx)(BlockBody, { block: block, theme: theme, rem: rem, monoFont: monoFont, slug: slug, nav: nav, index: index }));
+    if (highlightBg != null) {
+        body = ((0, jsx_runtime_1.jsx)(components_1.Box, { ref: (handle) => {
+                if (highlightRef)
+                    highlightRef.current = handle;
+            }, style: {
+                background: highlightBg,
+                cornerRadius: rem * 0.25,
+                margin: { left: -rem * 0.35, right: -rem * 0.35 },
+                padding: { left: rem * 0.35, right: rem * 0.35, top: rem * 0.15, bottom: rem * 0.15 },
+            }, children: (0, jsx_runtime_1.jsx)(components_1.Box, { style: { flexDirection: "column", flexGrow: 1 }, children: body }) }));
+    }
+    if (block.listDepth == null)
+        return body;
+    const indent = block.listDepth * rem * 1.3;
+    return ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: { margin: { left: indent } }, children: [(0, jsx_runtime_1.jsx)(components_1.Box, { style: { width: rem * 1.4, flexShrink: 0 }, children: block.itemStart && ((0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: block.task != null ? theme.link : theme.muted }, children: marker(block) })) }), (0, jsx_runtime_1.jsx)(components_1.Box, { style: { flexDirection: "column", flexShrink: 1 }, children: body })] }));
+}, (a, b) => a.theme === b.theme &&
+    a.rem === b.rem &&
+    a.monoFont === b.monoFont &&
+    a.slug === b.slug &&
+    a.index === b.index &&
+    a.highlightBg === b.highlightBg &&
+    a.highlightRef === b.highlightRef &&
+    blockEqual(a.block, b.block));
+function marker(block) {
+    if (block.task != null)
+        return block.task ? "☑" : "□";
+    if (block.ordinal != null)
+        return `${block.ordinal}.`;
+    return "•";
+}
+function blockEqual(a, b) {
+    return (a.kind === b.kind &&
+        a.text === b.text &&
+        a.level === b.level &&
+        a.language === b.language &&
+        a.closed === b.closed &&
+        a.quote === b.quote &&
+        a.listDepth === b.listDepth &&
+        a.ordinal === b.ordinal &&
+        a.task === b.task &&
+        a.itemStart === b.itemStart &&
+        a.src === b.src &&
+        spansEqual(a.spans, b.spans) &&
+        a.aligns.length === b.aligns.length &&
+        a.aligns.every((al, i) => al === b.aligns[i]) &&
+        a.rows.length === b.rows.length &&
+        a.rows.every((row, i) => rowEqual(row, b.rows[i])));
+}
+function rowEqual(a, b) {
+    return (a.cells.length === b.cells.length &&
+        a.cells.every((cell, i) => cell.text === b.cells[i].text && spansEqual(cell.spans, b.cells[i].spans)));
+}
+function spansEqual(a, b) {
+    return (a.length === b.length &&
+        a.every((s, i) => {
+            const o = b[i];
+            return (s.start === o.start &&
+                s.end === o.end &&
+                s.bold === o.bold &&
+                s.italic === o.italic &&
+                s.strikethrough === o.strikethrough &&
+                s.code === o.code &&
+                s.link === o.link &&
+                s.incompleteLink === o.incompleteLink);
+        }));
+}
+function blockId(index) {
+    return index != null ? `md:${index}` : undefined;
+}
+function BlockBody({ block, theme, rem, monoFont, slug, nav, index }) {
+    switch (block.kind) {
+        case "heading": {
+            const scale = HEADING_SCALE[block.level - 1] ?? 1;
+            return ((0, jsx_runtime_1.jsx)(components_1.Text, { id: blockId(index), ref: (handle) => {
+                    if (!slug || !nav)
+                        return;
+                    if (handle)
+                        nav.anchors.current.set(slug, handle);
+                    else
+                        nav.anchors.current.delete(slug);
+                }, style: { fontSize: rem * scale, color: theme.fg }, spans: styledSpans(block.text, block.spans, theme, { bold: true, cover: true }), onClick: linkClick(block.spans, nav), children: block.text }));
+        }
+        case "code":
+            return ((0, jsx_runtime_1.jsx)(CodeBlock, { block: block, theme: theme, rem: rem, monoFont: monoFont, index: index }));
+        case "rule":
+            return (0, jsx_runtime_1.jsx)(components_1.Box, { style: { height: 1, background: theme.separator } });
+        case "image":
+            return ((0, jsx_runtime_1.jsx)(components_1.Image, { src: block.src, style: { height: rem * 8, cornerRadius: rem * 0.4 }, placeholder: (0, jsx_runtime_1.jsx)(components_1.Box, { style: { background: theme.codeBg } }) }));
+        case "table":
+            return (0, jsx_runtime_1.jsx)(Table, { block: block, theme: theme, rem: rem, nav: nav, index: index });
+        default:
+            return ((0, jsx_runtime_1.jsx)(components_1.Text, { id: blockId(index), style: { color: theme.fg }, spans: styledSpans(block.text, block.spans, theme, {}), onClick: linkClick(block.spans, nav), children: block.text }));
+    }
+}
+function linkClick(spans, nav) {
+    if (!nav || !spans.some((s) => s.link))
+        return undefined;
+    return (event) => {
+        if (event.offset == null)
+            return;
+        const hit = spans.find((s) => s.link && s.start <= event.offset && event.offset < s.end);
+        if (hit?.link)
+            nav.follow(hit.link);
+    };
+}
+function styledSpans(text, spans, theme, opts) {
+    if (!spans.length && !opts.cover)
+        return undefined;
+    const styled = spans.map((s) => ({
+        start: s.start,
+        end: s.end,
+        color: s.code ? theme.inlineCode : s.link || s.incompleteLink ? theme.link : theme.fg,
+        background: s.code ? theme.codeBg : undefined,
+        bold: s.bold || opts.bold,
+        italic: s.italic,
+        underline: Boolean(s.link),
+        strikethrough: s.strikethrough,
+    }));
+    if (!opts.cover)
+        return styled;
+    const bytes = Buffer.byteLength(text);
+    const covered = [];
+    let at = 0;
+    for (const span of styled) {
+        if (span.start > at)
+            covered.push({ start: at, end: span.start, color: theme.fg, bold: opts.bold });
+        covered.push(span);
+        at = span.end;
+    }
+    if (at < bytes)
+        covered.push({ start: at, end: bytes, color: theme.fg, bold: opts.bold });
+    return covered;
+}
+const CELL_JUSTIFY = { left: "start", center: "center", right: "end", none: "start" };
+function Table({ block, theme, rem, nav, index }) {
+    const columns = block.rows[0]?.cells.length ?? 0;
+    const weights = Array.from({ length: columns }, (_, c) => Math.min(42, Math.max(3, ...block.rows.map((row) => row.cells[c]?.text.length ?? 0))));
+    if (columns === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+            flexDirection: "column",
+            border: { width: 1, color: theme.separator },
+            padding: 1,
+            overflow: "hidden",
+        }, children: block.rows.map((row, r) => ((0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+                background: r === 0 ? theme.codeBg : undefined,
+                border: r > 0 ? { top: [1, theme.separator] } : undefined,
+            }, children: Array.from({ length: columns }, (_, c) => {
+                const cell = row.cells[c];
+                const align = block.aligns[c] ?? "none";
+                return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+                        flexGrow: weights[c],
+                        flexBasis: 0,
+                        justifyContent: CELL_JUSTIFY[align],
+                        border: c > 0 ? { left: [1, theme.separator] } : undefined,
+                        padding: {
+                            left: rem * 0.6,
+                            right: rem * 0.6,
+                            top: rem * 0.35,
+                            bottom: rem * 0.35,
+                        },
+                    }, children: cell && ((0, jsx_runtime_1.jsx)(components_1.Text, { id: blockId(index), style: { color: theme.fg }, spans: styledSpans(cell.text, cell.spans, theme, {
+                            bold: r === 0,
+                            cover: r === 0,
+                        }), onClick: linkClick(cell.spans, nav), children: cell.text })) }, c));
+            }) }, r))) }));
+}
+function CodeBlock({ block, theme, rem, monoFont, index }) {
+    const spans = (0, react_1.useMemo)(() => (0, native_1.highlight)(block.text, block.language).map((s) => ({
+        start: s.start,
+        end: s.end,
+        color: theme.syntax[native_1.HIGHLIGHT_CAPTURES[s.capture]] ?? theme.fg,
+    })), [block.text, block.language, theme]);
+    return ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: {
+            flexDirection: "column",
+            background: theme.codeBg,
+            cornerRadius: rem * 0.35,
+            padding: { left: rem * 0.75, right: rem * 0.75, top: rem * 0.5, bottom: rem * 0.5 },
+            gap: rem * 0.35,
+            overflow: "hidden",
+        }, children: [block.language !== "" && ((0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme.muted, fontSize: rem * 0.8 }, children: block.language + (block.closed ? "" : " …") })), (0, jsx_runtime_1.jsx)(components_1.Text, { id: blockId(index), style: { wrap: false, color: theme.fg, font: monoFont }, spans: spans, children: block.text })] }));
+}

package/dist/react/native.d.ts

@@ -0,0 +1,116 @@
+export interface DamageRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface SurfaceShm {
+    fd: number;
+    width: number;
+    height: number;
+    stride: number;
+    size: number;
+}
+export interface NativeEngine {
+    info(): string;
+    applyOps(ops: string): void;
+    updateSurface(id: number, bgra: Buffer, width: number, height: number, damage?: DamageRect): void;
+    updateSurfaceTexture?(id: number, handle: Buffer, damage?: DamageRect): void;
+    updateSurfaceShm?(id: number, shm: SurfaceShm, damage?: DamageRect, released?: (...args: unknown[]) => void): void;
+    removeSurface(id: number): void;
+    surfaceStats(): string;
+    startSurfaceCapture(surfaceId: number, dir: string): number;
+    stopSurfaceCapture(captureId: number): string;
+    captureIndex(captureId: number): string;
+    captureFrame(captureId: number, index: number): Buffer;
+    releaseCapture(captureId: number): void;
+    setKeyEventTypes(enabled: boolean): void;
+    start(callback: (err: unknown, event: string) => void): void;
+    stop(): void;
+}
+export type Rgba = [number, number, number, number];
+export type TerminalColors = {
+    foreground: Rgba | null;
+    background: Rgba | null;
+    palette: (Rgba | null)[];
+};
+/**
+ * fixme: this is a very weird name to export
+ */
+export interface EngineInfo {
+    width: number;
+    height: number;
+    cellWidth: number;
+    cellHeight: number;
+    basePx: number;
+    kittyKeyboard: boolean;
+    hosted: boolean;
+    colors: TerminalColors;
+}
+export interface HostOptions {
+    socket: string;
+    pane: string;
+    name: string;
+    /** [placeholder copy: Set when the host is not pixel: frames are drawn into this terminal as kitty virtual placements the host positions.] */
+    tty?: string;
+}
+export interface HighlightSpan {
+    start: number;
+    end: number;
+    capture: number;
+}
+export interface MarkdownSpan {
+    start: number;
+    end: number;
+    bold: boolean;
+    italic: boolean;
+    strikethrough: boolean;
+    code: boolean;
+    link?: string;
+    incompleteLink: boolean;
+}
+export interface MarkdownCell {
+    text: string;
+    spans: MarkdownSpan[];
+}
+export interface MarkdownRow {
+    cells: MarkdownCell[];
+}
+export interface MarkdownBlock {
+    kind: "paragraph" | "heading" | "code" | "rule" | "image" | "table";
+    text: string;
+    spans: MarkdownSpan[];
+    level: number;
+    language: string;
+    closed: boolean;
+    quote: number;
+    listDepth?: number;
+    ordinal?: number;
+    task?: boolean;
+    itemStart: boolean;
+    src: string;
+    rows: MarkdownRow[];
+    aligns: ("left" | "center" | "right" | "none")[];
+    sourceStart: number;
+    sourceEnd: number;
+}
+export interface DiffEmphasis {
+    start: number;
+    end: number;
+}
+export interface DiffRow {
+    kind: "context" | "del" | "add" | "gap";
+    oldLine?: number;
+    newLine?: number;
+    text: string;
+    sideStart: number;
+    emphasis: DiffEmphasis[];
+    count?: number;
+}
+export declare function createNativeEngine(tty?: string, wrapper?: string, sessionEnv?: NodeJS.ProcessEnv, host?: HostOptions): NativeEngine;
+export declare function highlight(source: string, language: string): HighlightSpan[];
+export declare const HIGHLIGHT_CAPTURES: readonly string[];
+export declare function diff(oldSource: string, newSource: string, contextLines?: number): DiffRow[];
+export declare function encodeRecording(jobJson: string, onProgress?: (percent: number) => void): Promise<void>;
+export declare function captureFilmstrip(dir: string, frames: number[], tileWidth: number, width: number, height: number): Promise<Buffer>;
+export declare function parseMarkdown(source: string, streaming?: boolean): MarkdownBlock[];

package/dist/react/native.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HIGHLIGHT_CAPTURES = void 0;
+exports.createNativeEngine = createNativeEngine;
+exports.highlight = highlight;
+exports.diff = diff;
+exports.encodeRecording = encodeRecording;
+exports.captureFilmstrip = captureFilmstrip;
+exports.parseMarkdown = parseMarkdown;
+const NATIVE_PACKAGE = `@zenbu-labs/pixel-native-${process.platform}-${process.arch}`;
+function loadBinding() {
+    try {
+        return require(`${NATIVE_PACKAGE}/pixel.node`);
+    }
+    catch (error) {
+        const target = `${process.platform}-${process.arch} (${NATIVE_PACKAGE})`;
+        const message = error instanceof Error ? error.message : String(error);
+        throw new Error(error.code === "MODULE_NOT_FOUND"
+            ? `no native build for ${target}: ${message}]`
+            : `failed to load: ${message}]`);
+    }
+}
+if (process.platform === "darwin" && !process.env.NATIVE_SCROLL_HELPER) {
+    try {
+        process.env.NATIVE_SCROLL_HELPER = require.resolve(`${NATIVE_PACKAGE}/native-scroll-helper`);
+    }
+    catch { }
+}
+const binding = loadBinding();
+function createNativeEngine(tty, wrapper, sessionEnv, host) {
+    const env = sessionEnv
+        ? Object.fromEntries(Object.entries(sessionEnv).filter((entry) => typeof entry[1] === "string"))
+        : undefined;
+    const pixelEngine = new binding.PixelEngine(tty, wrapper, env, host);
+    return pixelEngine;
+}
+function highlight(source, language) {
+    return binding.highlight(source, language);
+}
+exports.HIGHLIGHT_CAPTURES = binding.highlightCaptures();
+function diff(oldSource, newSource, contextLines) {
+    return binding.diff(oldSource, newSource, contextLines);
+}
+function encodeRecording(jobJson, onProgress) {
+    return binding.encodeRecording(jobJson, onProgress &&
+        ((err, percent) => {
+            if (err == null)
+                onProgress(percent);
+        }));
+}
+function captureFilmstrip(dir, frames, tileWidth, width, height) {
+    return binding.captureFilmstrip(dir, frames, tileWidth, width, height);
+}
+function parseMarkdown(source, streaming) {
+    return binding.parseMarkdown(source, streaming);
+}

package/dist/react/reconciler-config.d.ts

@@ -0,0 +1,241 @@
+import Reconciler from "react-reconciler";
+import { HostOptions, NativeEngine } from "./native";
+import { Color, Style } from "./styles";
+import { Surface } from "./surface";
+export declare const APP_VIEW = 0;
+export declare const DEVTOOLS_VIEW = 1;
+export interface ClickEvent {
+    x: number;
+    y: number;
+    offset?: number;
+}
+export interface ScrollEvent {
+    offset: number;
+    max: number;
+}
+export interface EventMods {
+    shift: boolean;
+    alt: boolean;
+    ctrl: boolean;
+    super: boolean;
+}
+export interface WheelEvent {
+    x: number;
+    y: number;
+    deltaX: number;
+    deltaY: number;
+    precise: boolean;
+    mods: EventMods;
+}
+export interface PointerEvent {
+    kind: "down" | "up" | "move";
+    button: "left" | "middle" | "right" | "none";
+    mods: {
+        shift: boolean;
+        alt: boolean;
+        ctrl: boolean;
+        super: boolean;
+    };
+    x: number;
+    y: number;
+}
+export interface DragEvent {
+    phase: "start" | "move" | "end";
+    x: number;
+    y: number;
+    mods: EventMods;
+}
+export interface MouseMoveEvent {
+    x: number;
+    y: number;
+}
+export interface SelectionPart {
+    key: string;
+    start: number;
+    end: number;
+}
+export interface ContainerSelection {
+    text: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    parts: SelectionPart[];
+}
+export interface BoxProps {
+    style?: Style;
+    id?: string;
+    /** [placeholder copy: Lays the box out as nothing and paints none of it, keeping its children mounted.] */
+    hidden?: boolean;
+    onClick?: (event: ClickEvent) => void;
+    onClickOutside?: (event: ClickEvent) => void;
+    onScroll?: (event: ScrollEvent) => void;
+    onWheel?: (event: WheelEvent) => void;
+    onPointer?: (event: PointerEvent) => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    onMouseMove?: (event: MouseMoveEvent) => void;
+    onDrag?: (event: DragEvent) => void;
+    onSelection?: (selection: ContainerSelection) => void;
+    contentHeight?: number;
+    surface?: Surface;
+    children?: React.ReactNode;
+}
+export interface ShapeStroke {
+    width: number;
+    color: Color;
+    cap?: "butt" | "round" | "square";
+    join?: "miter" | "round" | "bevel";
+}
+export interface PathProps {
+    style?: Style;
+    id?: string;
+    hidden?: boolean;
+    d: string;
+    stroke: ShapeStroke;
+    viewBox?: number;
+    onClick?: (event: ClickEvent) => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    onDrag?: (event: DragEvent) => void;
+}
+export interface TextSpan {
+    start: number;
+    end: number;
+    color: Color;
+    background?: Color;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strikethrough?: boolean;
+}
+export interface TextProps {
+    style?: Style;
+    id?: string;
+    onClick?: (event: ClickEvent) => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    spans?: TextSpan[];
+    children?: React.ReactNode;
+}
+export interface MarkRef {
+    id: number;
+    offset: number;
+    /**
+     * in the case the engine creates the mark (a paste event where it deserializes the bespoke paste format)
+     * the application needs to know about the deserialized data to start internally tracking it
+     */
+    data?: string;
+}
+export type PasteSource = "clipboard" | "osc" | "file";
+export interface PastedImage {
+    path: string;
+    width: number;
+    height: number;
+    source: PasteSource;
+}
+export interface CaretInfo {
+    cursor: number;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export type ChangeSource = "type" | "paste" | "edit";
+export interface ChangeInfo extends CaretInfo {
+    source: ChangeSource;
+    marks: MarkRef[];
+}
+export interface InputGutter {
+    color: Color;
+    activeColor: Color;
+}
+export interface InputProps {
+    style?: Style;
+    id?: string;
+    defaultValue?: string;
+    value?: string;
+    defaultMarks?: MarkRef[];
+    renderMark?: (id: number) => React.ReactNode;
+    serializeMark?: (id: number) => string | undefined;
+    caretColor?: Style["color"];
+    selectionColor?: Style["color"];
+    autoFocus?: boolean;
+    spans?: TextSpan[];
+    gutter?: InputGutter;
+    activeLine?: Color;
+    onChange?: (text: string, change: ChangeInfo) => void;
+    onCaret?: (caret: CaretInfo) => void;
+    onSubmit?: (text: string, marks: MarkRef[]) => void;
+    onPasteImage?: (image: PastedImage) => void;
+}
+export interface MarkedTextProps {
+    style?: Style;
+    id?: string;
+    text: string;
+    marks: MarkRef[];
+    renderMark?: (id: number) => React.ReactNode;
+    serializeMark?: (id: number) => string | undefined;
+    onClick?: (event: ClickEvent) => void;
+}
+export interface ImageAdvancedProps {
+    confirmedEqualTo?: string[];
+}
+export interface ImageProps {
+    style?: Style;
+    id?: string;
+    src: string;
+    onClick?: (event: ClickEvent) => void;
+    placeholder?: React.ReactNode;
+    error?: React.ReactNode;
+    advanced?: ImageAdvancedProps;
+}
+export type AnyProps = BoxProps & TextProps & InputProps & Partial<ImageProps> & Partial<Omit<MarkedTextProps, "style" | "id" | "onClick">> & Partial<PathProps> & {
+    slot?: "placeholder" | "error";
+    mark?: number;
+};
+export interface Instance {
+    id: number;
+    bridge: Bridge;
+    view: number;
+    type: string;
+    props: AnyProps;
+    parent: Instance | Container | null;
+    children: Instance[];
+    mounted: boolean;
+    hidden: boolean;
+    lastSent: string | null;
+}
+export interface Container {
+    bridge: Bridge;
+    view: number;
+    children: Instance[];
+}
+type Op = Record<string, unknown>;
+export interface FlushSample {
+    seq: number;
+    view: number;
+    ops: number;
+    start: number;
+    dur: number;
+}
+export declare class Bridge {
+    engine: NativeEngine;
+    propsById: Array<Map<number, AnyProps>>;
+    containers: Array<Container | null>;
+    onFlush: ((sample: FlushSample) => void) | null;
+    onTreeMutation: ((view: number) => void) | null;
+    afterCommit: ((view: number) => void) | null;
+    private queues;
+    private nextId;
+    private seq;
+    constructor(tty?: string, wrapper?: string, sessionEnv?: NodeJS.ProcessEnv, host?: HostOptions);
+    allocId(): number;
+    push(view: number, op: Op): void;
+    flush(): void;
+}
+export declare function getBridge(wrapper?: string): Bridge;
+export declare function devtoolsBridge(): Bridge;
+export declare function setDevtoolsBridge(bridge: Bridge): void;
+export declare const reconciler: Reconciler.Reconciler<unknown, unknown, unknown, unknown, unknown>;
+export {};