@zenbu-labs/pixel 0.0.0 → 0.0.12

package/dist/react/devtools/profiler.js

@@ -0,0 +1,374 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.viewportStore = void 0;
+exports.profilerHandleKey = profilerHandleKey;
+exports.ProfilerPanel = ProfilerPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const components_1 = require("../components");
+const controller_1 = require("./controller");
+const export_profile_1 = require("./export-profile");
+const store_1 = require("./store");
+const stores_1 = require("./stores");
+const theme_1 = require("./theme");
+const ui_1 = require("./ui");
+exports.viewportStore = (0, store_1.createStore)(null);
+const selectedSpanStore = (0, store_1.createStore)(null);
+function profilerHandleKey(key) {
+    const session = stores_1.profilerStore.get().session;
+    const viewport = exports.viewportStore.get();
+    if (!session || !viewport)
+        return false;
+    const span = viewport.t1 - viewport.t0;
+    const center = (viewport.t0 + viewport.t1) / 2;
+    switch (key) {
+        case "w": {
+            const next = Math.max(span / 1.4, 0.05);
+            exports.viewportStore.set({ t0: center - next / 2, t1: center + next / 2 });
+            return true;
+        }
+        case "s": {
+            const next = Math.min(span * 1.4, session.end - session.start || 1);
+            exports.viewportStore.set(clampViewport({ t0: center - next / 2, t1: center + next / 2 }, session));
+            return true;
+        }
+        case "a":
+            exports.viewportStore.set(clampViewport({ t0: viewport.t0 - span * 0.2, t1: viewport.t1 - span * 0.2 }, session));
+            return true;
+        case "d":
+            exports.viewportStore.set(clampViewport({ t0: viewport.t0 + span * 0.2, t1: viewport.t1 + span * 0.2 }, session));
+            return true;
+        case "f":
+            exports.viewportStore.set({ t0: session.start, t1: session.end });
+            return true;
+        default:
+            return false;
+    }
+}
+function clampViewport(viewport, session) {
+    const span = viewport.t1 - viewport.t0;
+    let t0 = Math.max(viewport.t0, session.start - span * 0.1);
+    const t1 = Math.min(t0 + span, session.end + span * 0.1);
+    t0 = t1 - span;
+    return { t0, t1 };
+}
+function laneColor(span) {
+    const palettes = {
+        react: theme_1.theme.flame.react,
+        bridge: theme_1.theme.flame.bridge,
+        engine: theme_1.theme.flame.engine,
+        "devtools-engine": theme_1.theme.flame.devtools,
+        images: theme_1.theme.flame.images,
+        interaction: [theme_1.theme.warn, "#d19a66"],
+    };
+    const palette = palettes[span.lane];
+    let hash = 0;
+    for (let i = 0; i < span.name.length; i++)
+        hash = (hash * 31 + span.name.charCodeAt(i)) | 0;
+    return palette[Math.abs(hash) % palette.length];
+}
+function frameColor(dur) {
+    if (dur < 8)
+        return theme_1.theme.ok;
+    if (dur < 17)
+        return theme_1.theme.warn;
+    return theme_1.theme.danger;
+}
+function Overview(props) {
+    const { session, width, viewport, rem } = props;
+    const height = rem * 2.4;
+    const range = Math.max(session.end - session.start, 0.001);
+    const scale = width / range;
+    const frames = session.frames.slice(0, 2000);
+    return ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: { height, background: theme_1.theme.bg, flexShrink: 0, overflow: "hidden" }, children: [frames.map((frame, i) => {
+                const x = (frame.start - session.start) * scale;
+                const w = Math.max(frame.dur * scale, 1.5);
+                const h = Math.max(3, Math.min(frame.dur / 33, 1) * (height - 4));
+                return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+                        position: "absolute",
+                        inset: { left: x, bottom: 2 },
+                        width: w,
+                        height: h,
+                        background: frameColor(frame.dur),
+                        cornerRadius: 1,
+                    }, onClick: () => {
+                        const pad = Math.max(frame.dur, 4);
+                        exports.viewportStore.set({ t0: frame.start - pad, t1: frame.start + frame.dur + pad });
+                    } }, i));
+            }), session.marks.slice(0, 400).map((mark, i) => ((0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+                    position: "absolute",
+                    inset: { left: (mark.start - session.start) * scale, top: 0 },
+                    width: 1.5,
+                    height: height * 0.45,
+                    background: theme_1.theme.warn,
+                } }, `m${i}`))), (0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+                    position: "absolute",
+                    inset: { left: (viewport.t0 - session.start) * scale, top: 0 },
+                    width: Math.max((viewport.t1 - viewport.t0) * scale, 2),
+                    height,
+                    background: "#4d9fff22",
+                    border: { width: 1, color: theme_1.theme.accent },
+                } })] }));
+}
+const LANES = [
+    { label: "React", match: (s) => s.lane === "react" || s.lane === "bridge" },
+    { label: "Engine", match: (s) => s.lane === "engine" },
+    { label: "Images", match: (s) => s.lane === "images" },
+    { label: "Engine (devtools)", match: (s) => s.lane === "devtools-engine" },
+];
+function laneRows(session) {
+    const rows = [];
+    for (const lane of LANES) {
+        const spans = session.spans.filter(lane.match);
+        if (spans.length > 0)
+            rows.push({ label: lane.label, spans });
+    }
+    return rows;
+}
+function InteractionsLane(props) {
+    const { marks, viewport, width, rem, selected } = props;
+    if (marks.length === 0)
+        return null;
+    const rowH = rem * 1.2;
+    const scale = width / (viewport.t1 - viewport.t0);
+    const minW = rem * 0.6;
+    const placed = [];
+    const rowEnds = [-Infinity, -Infinity];
+    for (const mark of marks) {
+        const rawX = (mark.start - viewport.t0) * scale;
+        const w = Math.max(mark.dur * scale, minW);
+        if (rawX + w < 0 || rawX > width)
+            continue;
+        const x = Math.max(rawX, 0);
+        const row = x >= rowEnds[0] + 2 ? 0 : x >= rowEnds[1] + 2 ? 1 : 0;
+        rowEnds[row] = x + w;
+        placed.push({ mark, x, w, row, labelW: 0 });
+        if (placed.length >= 300)
+            break;
+    }
+    const estCharW = rem * 0.42;
+    for (let i = 0; i < placed.length; i++) {
+        const entry = placed[i];
+        let next = Infinity;
+        for (let j = i + 1; j < placed.length; j++) {
+            if (placed[j].row === entry.row) {
+                next = placed[j].x;
+                break;
+            }
+        }
+        const room = Math.min(next, width) - (entry.x + entry.w) - rem * 0.4;
+        const need = entry.mark.name.length * estCharW;
+        entry.labelW = room > need ? need + rem * 0.3 : 0;
+    }
+    const rows = placed.reduce((max, p) => Math.max(max, p.row + 1), 1);
+    return ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: { flexDirection: "column", flexShrink: 0 }, children: [(0, jsx_runtime_1.jsx)(components_1.Box, { style: { padding: { left: rem * 0.5, top: rem * 0.25, bottom: rem * 0.1 } }, children: (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.faint, fontSize: rem * 0.62, wrap: false }, children: "Interactions" }) }), (0, jsx_runtime_1.jsx)(components_1.Box, { style: { height: rows * rowH + 2, overflow: "hidden" }, children: placed.map((entry, i) => {
+                    const fromDevtools = entry.mark.name.startsWith("[devtools]");
+                    const isSelected = selected === entry.mark;
+                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+                                    position: "absolute",
+                                    inset: { left: entry.x, top: entry.row * rowH + 1 },
+                                    width: entry.w,
+                                    height: rowH - 3,
+                                    background: fromDevtools ? theme_1.theme.faint : theme_1.theme.warn,
+                                    cornerRadius: 3,
+                                    border: isSelected ? { width: 1, color: "#ffffff" } : undefined,
+                                    hoverBackground: fromDevtools ? theme_1.theme.dim : "#f0d090",
+                                }, onClick: () => selectedSpanStore.set(entry.mark) }), entry.labelW > 0 && ((0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+                                    position: "absolute",
+                                    inset: { left: entry.x + entry.w + rem * 0.25, top: entry.row * rowH + 1 },
+                                    width: entry.labelW,
+                                    height: rowH - 3,
+                                    overflow: "hidden",
+                                }, children: (0, jsx_runtime_1.jsx)(components_1.Text, { style: {
+                                        color: fromDevtools ? theme_1.theme.faint : theme_1.theme.warn,
+                                        fontSize: rem * 0.64,
+                                        font: theme_1.MONO,
+                                        wrap: false,
+                                    }, children: entry.mark.name }) }))] }, i));
+                }) })] }));
+}
+function Lane(props) {
+    const { label, spans, viewport, width, rem, selected } = props;
+    const rowH = rem * 1.05;
+    const scale = width / (viewport.t1 - viewport.t0);
+    const visible = [];
+    let maxDepth = 0;
+    let lastEnd = -Infinity;
+    for (const span of spans) {
+        if (span.start + span.dur < viewport.t0 || span.start > viewport.t1)
+            continue;
+        if (span.lane !== "interaction") {
+            if (span.dur * scale < 0.4 && span.depth === 0) {
+                if ((span.start - lastEnd) * scale < 1.2)
+                    continue;
+                lastEnd = span.start + span.dur;
+            }
+            else if (span.dur * scale < 0.4) {
+                continue;
+            }
+        }
+        visible.push(span);
+        if (span.depth > maxDepth)
+            maxDepth = span.depth;
+        if (visible.length >= 600)
+            break;
+    }
+    return ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: { flexDirection: "column", flexShrink: 0 }, children: [(0, jsx_runtime_1.jsx)(components_1.Box, { style: { padding: { left: rem * 0.5, top: rem * 0.25, bottom: rem * 0.1 } }, children: (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.faint, fontSize: rem * 0.62, wrap: false }, children: label }) }), (0, jsx_runtime_1.jsx)(components_1.Box, { style: { height: (maxDepth + 1) * rowH + 2, overflow: "hidden" }, children: visible.map((span, i) => {
+                    const rawX = (span.start - viewport.t0) * scale;
+                    const minW = span.lane === "interaction" ? 3 : 1.5;
+                    const right = rawX + Math.max(span.dur * scale - 0.5, minW);
+                    const x = Math.max(rawX, 0);
+                    const w = Math.max(right - x, 1.5);
+                    const isSelected = selected === span;
+                    return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+                            position: "absolute",
+                            inset: { left: x, top: span.depth * rowH },
+                            width: w,
+                            height: rowH - 1,
+                            background: laneColor(span),
+                            border: isSelected ? { width: 1, color: "#ffffff" } : undefined,
+                            cornerRadius: 1,
+                            overflow: "hidden",
+                        }, onClick: () => {
+                            if (selectedSpanStore.get() === span) {
+                                exports.viewportStore.set({ t0: span.start, t1: span.start + Math.max(span.dur, 0.05) });
+                            }
+                            else {
+                                selectedSpanStore.set(span);
+                            }
+                        }, children: w > rem * 2.2 && ((0, jsx_runtime_1.jsx)(components_1.Text, { style: {
+                                color: "#101318",
+                                fontSize: rem * 0.62,
+                                font: theme_1.MONO,
+                                wrap: false,
+                            }, children: span.label ?? span.name })) }, i));
+                }) })] }));
+}
+function Ruler(props) {
+    const { session, viewport, width, rem } = props;
+    const ticks = 5;
+    const step = (viewport.t1 - viewport.t0) / ticks;
+    return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: { height: rem, flexShrink: 0, background: theme_1.theme.panel, overflow: "hidden" }, children: Array.from({ length: ticks + 1 }, (_, i) => {
+            const t = viewport.t0 + step * i;
+            const x = ((t - viewport.t0) / (viewport.t1 - viewport.t0)) * width;
+            return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: { position: "absolute", inset: { left: x, top: 0 } }, children: (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.faint, fontSize: rem * 0.58, font: theme_1.MONO, wrap: false }, children: `${(t - session.start).toFixed(1)}ms` }) }, i));
+        }) }));
+}
+function SpanDetail(props) {
+    const { span, session, rem } = props;
+    return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+            flexDirection: "row",
+            gap: rem * 0.8,
+            padding: rem * 0.35,
+            background: theme_1.theme.panel,
+            flexShrink: 0,
+            alignItems: "center",
+        }, children: span ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.text, fontSize: rem * 0.72, font: theme_1.MONO, wrap: false }, children: span.name }), span.label != null && ((0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.dim, fontSize: rem * 0.66, font: theme_1.MONO, wrap: false }, children: span.label })), (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.dim, fontSize: rem * 0.66, font: theme_1.MONO, wrap: false }, children: `at ${(span.start - session.start).toFixed(2)}ms` }), (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.accent, fontSize: rem * 0.66, font: theme_1.MONO, wrap: false }, children: `total ${span.dur.toFixed(2)}ms` }), span.self != null && ((0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.warn, fontSize: rem * 0.66, font: theme_1.MONO, wrap: false }, children: `self ${span.self.toFixed(2)}ms` })), span.arg != null && ((0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.faint, fontSize: rem * 0.66, font: theme_1.MONO, wrap: false }, children: span.name.startsWith("paint.")
+                        ? `n = ${span.arg}`
+                        : span.name.startsWith("image.")
+                            ? `img #${span.arg}`
+                            : `batch #${span.arg}` }))] })) : ((0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.faint, fontSize: rem * 0.66, wrap: false }, children: "Click a span to see details, click again to zoom into it." })) }));
+}
+function Summary(props) {
+    const { session, rem } = props;
+    const frames = session.frames;
+    const total = session.end - session.start;
+    const avg = frames.length
+        ? frames.reduce((sum, f) => sum + f.dur, 0) / frames.length
+        : 0;
+    const worst = frames.reduce((max, f) => Math.max(max, f.dur), 0);
+    return ((0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.dim, fontSize: rem * 0.66, wrap: false }, children: `${(total / 1000).toFixed(1)}s · ${frames.length} frames · avg ${avg.toFixed(1)}ms · worst ${worst.toFixed(1)}ms` }));
+}
+function ProfilerPanel(props) {
+    const { rem } = props;
+    const state = (0, store_1.useStore)(stores_1.profilerStore);
+    const devtools = (0, store_1.useStore)(stores_1.devtoolsStore);
+    const viewport = (0, store_1.useStore)(exports.viewportStore);
+    const selected = (0, store_1.useStore)(selectedSpanStore);
+    const [, setTick] = (0, react_1.useState)(0);
+    const [exportedTo, setExportedTo] = (0, react_1.useState)(null);
+    const session = state.session;
+    (0, react_1.useEffect)(() => {
+        if (session && !exports.viewportStore.get()) {
+            exports.viewportStore.set({ t0: session.start, t1: session.end });
+        }
+    }, [session]);
+    const chartWidth = Math.max(devtools.width - rem, 40);
+    const onChartWheel = (e) => {
+        const current = exports.viewportStore.get();
+        if (!session || !current)
+            return;
+        const span = current.t1 - current.t0;
+        const scale = chartWidth / span;
+        if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+            const shift = e.deltaX / scale;
+            exports.viewportStore.set(clampViewport({ t0: current.t0 + shift, t1: current.t1 + shift }, session));
+            return;
+        }
+        const dy = e.precise ? e.deltaY : e.deltaY * 3;
+        const factor = Math.exp(dy * 0.0035);
+        const total = session.end - session.start || 1;
+        const next = Math.min(Math.max(span * factor, 0.02), total * 1.2);
+        const fraction = Math.min(Math.max((e.x - rem * 0.5) / chartWidth, 0), 1);
+        const at = current.t0 + fraction * span;
+        exports.viewportStore.set(clampViewport({ t0: at - fraction * next, t1: at + (1 - fraction) * next }, session));
+    };
+    return ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: { flexDirection: "column", flexGrow: 1, flexBasis: 0, overflow: "hidden" }, children: [(0, jsx_runtime_1.jsxs)(ui_1.Toolbar, { rem: rem, children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { rem: rem, label: state.recording ? "Stop" : "Record", danger: state.recording, active: state.recording, onClick: () => {
+                            if (state.recording)
+                                (0, controller_1.stopRecording)();
+                            else {
+                                exports.viewportStore.set(null);
+                                selectedSpanStore.set(null);
+                                (0, controller_1.startRecording)();
+                            }
+                            setTick((t) => t + 1);
+                        } }), session && ((0, jsx_runtime_1.jsx)(ui_1.Button, { rem: rem, label: "Clear", onClick: () => {
+                            (0, controller_1.clearRecording)();
+                            exports.viewportStore.set(null);
+                            selectedSpanStore.set(null);
+                            setExportedTo(null);
+                        } })), session && ((0, jsx_runtime_1.jsx)(ui_1.Button, { rem: rem, label: "Export", onClick: () => setExportedTo((0, export_profile_1.exportProfile)()) })), (0, jsx_runtime_1.jsx)(ui_1.Button, { rem: rem, label: `cpu ${devtools.cpuRate}x`, active: devtools.cpuRate > 1, danger: devtools.cpuRate > 1, onClick: () => {
+                            const rates = [1, 2, 4, 10];
+                            const next = rates[(rates.indexOf(devtools.cpuRate) + 1) % rates.length];
+                            (0, controller_1.setCpuThrottle)(next);
+                        } }), session && !exportedTo && (0, jsx_runtime_1.jsx)(Summary, { session: session, rem: rem }), exportedTo && ((0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.ok, fontSize: rem * 0.66, font: theme_1.MONO, wrap: false }, children: exportedTo })), (0, jsx_runtime_1.jsx)(components_1.Box, { style: { flexGrow: 1 } }), (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.faint, fontSize: rem * 0.62, wrap: false }, children: "f=fit" })] }), (0, jsx_runtime_1.jsx)(ui_1.Divider, {}), state.recording ? ((0, jsx_runtime_1.jsx)(ui_1.Empty, { rem: rem, text: "Recording\u2026" })) : state.pendingStop ? ((0, jsx_runtime_1.jsx)(ui_1.Empty, { rem: rem, text: "Waiting for profile\u2026" })) : !session || !viewport ? ((0, jsx_runtime_1.jsx)(ui_1.Empty, { rem: rem, text: "" })) : ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: {
+                    flexDirection: "column",
+                    flexGrow: 1,
+                    flexBasis: 0,
+                    overflow: "hidden",
+                    padding: { left: rem * 0.5, right: rem * 0.5 },
+                }, onWheel: onChartWheel, children: [(0, jsx_runtime_1.jsx)(Overview, { session: session, width: chartWidth, viewport: viewport, rem: rem }), (0, jsx_runtime_1.jsx)(ui_1.Divider, {}), (0, jsx_runtime_1.jsx)(Ruler, { session: session, viewport: viewport, width: chartWidth, rem: rem }), (0, jsx_runtime_1.jsxs)(components_1.Box, { style: { flexDirection: "column", flexGrow: 1, flexBasis: 0, overflow: "hidden" }, children: [(0, jsx_runtime_1.jsx)(InteractionsLane, { marks: session.marks, viewport: viewport, width: chartWidth, rem: rem, selected: selected }), laneRows(session).map((lane) => ((0, jsx_runtime_1.jsx)(Lane, { label: lane.label, spans: lane.spans, viewport: viewport, width: chartWidth, rem: rem, selected: selected }, lane.label)))] }), (0, jsx_runtime_1.jsx)(SpanDetail, { span: selected, session: session, rem: rem })] }))] }));
+}

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

@@ -0,0 +1,27 @@
+export interface Store<T> {
+    get(): T;
+    set(next: T): void;
+    update(fn: (current: T) => T): void;
+    subscribe(listener: () => void): () => void;
+}
+export declare function createStore<T>(initial: T): Store<T>;
+export declare function useStore<T>(store: Store<T>): T;
+export type LogLevel = "debug" | "info" | "warn" | "error";
+export interface LogRow {
+    id: number;
+    level: LogLevel;
+    target: string;
+    text: string;
+    epochMs: number;
+    count: number;
+}
+export interface LogBuffer {
+    rows: LogRow[];
+    version: number;
+}
+export declare function createLogStore(): {
+    store: Store<LogBuffer>;
+    push(level: LogLevel, target: string, text: string, epochMs?: number): void;
+    clear(): void;
+};
+export type LogStore = ReturnType<typeof createLogStore>;

package/dist/react/devtools/store.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStore = createStore;
+exports.useStore = useStore;
+exports.createLogStore = createLogStore;
+const react_1 = require("react");
+function createStore(initial) {
+    let value = initial;
+    const listeners = new Set();
+    return {
+        get: () => value,
+        set(next) {
+            if (next === value)
+                return;
+            value = next;
+            for (const listener of listeners)
+                listener();
+        },
+        update(fn) {
+            this.set(fn(value));
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+    };
+}
+function useStore(store) {
+    return (0, react_1.useSyncExternalStore)(store.subscribe, store.get, store.get);
+}
+const LOG_CAP = 2000;
+function createLogStore() {
+    const store = createStore({ rows: [], version: 0 });
+    let nextId = 1;
+    return {
+        store,
+        push(level, target, text, epochMs) {
+            store.update((buffer) => {
+                const rows = buffer.rows.slice(-LOG_CAP);
+                const last = rows[rows.length - 1];
+                if (last && last.text === text && last.level === level && last.target === target) {
+                    rows[rows.length - 1] = { ...last, count: last.count + 1 };
+                }
+                else {
+                    rows.push({
+                        id: nextId++,
+                        level,
+                        target,
+                        text,
+                        epochMs: epochMs ?? Date.now(),
+                        count: 1,
+                    });
+                }
+                return { rows, version: buffer.version + 1 };
+            });
+        },
+        clear() {
+            store.update((buffer) => ({ rows: [], version: buffer.version + 1 }));
+        },
+    };
+}

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

@@ -0,0 +1,92 @@
+import type { Rgba } from "../native";
+export declare const consoleLogs: {
+    store: import("./store").Store<import("./store").LogBuffer>;
+    push(level: import("./store").LogLevel, target: string, text: string, epochMs?: number): void;
+    clear(): void;
+};
+export declare const engineLogs: {
+    store: import("./store").Store<import("./store").LogBuffer>;
+    push(level: import("./store").LogLevel, target: string, text: string, epochMs?: number): void;
+    clear(): void;
+};
+export interface BoxEdges {
+    l: number;
+    t: number;
+    r: number;
+    b: number;
+}
+export interface LayoutRect {
+    id: number;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    vw: number;
+    vh: number;
+    scroll?: number;
+    scrollMax?: number;
+    text?: string;
+    padding?: BoxEdges;
+    border?: BoxEdges;
+    margin?: BoxEdges;
+}
+export interface LayoutSnapshot {
+    rects: Map<number, LayoutRect>;
+    stats: {
+        frameMs: number;
+        fps: number;
+    };
+    width: number;
+    height: number;
+    at: number;
+}
+export declare const layoutStore: import("./store").Store<LayoutSnapshot>;
+export interface InspectorState {
+    selectedId: number | null;
+    expanded: ReadonlySet<number>;
+    picking: boolean;
+    treeVersion: number;
+}
+export declare const inspectorStore: import("./store").Store<InspectorState>;
+export interface TimeSpan {
+    name: string;
+    start: number;
+    dur: number;
+    depth: number;
+    lane: "react" | "bridge" | "engine" | "devtools-engine" | "images" | "interaction";
+    self?: number;
+    arg?: number;
+    label?: string;
+}
+export interface CounterSample {
+    name: string;
+    at: number;
+    value: number;
+}
+export interface ProfileSession {
+    spans: TimeSpan[];
+    start: number;
+    end: number;
+    frames: TimeSpan[];
+    counters: CounterSample[];
+    marks: TimeSpan[];
+}
+export interface ProfilerState {
+    recording: boolean;
+    pendingStop: boolean;
+    session: ProfileSession | null;
+    startedAt: number;
+}
+export declare const profilerStore: import("./store").Store<ProfilerState>;
+export declare const pendingSpans: TimeSpan[];
+export declare function recordSpan(span: TimeSpan): void;
+export interface DevtoolsState {
+    open: boolean;
+    tab: "elements" | "console" | "profiler";
+    width: number;
+    height: number;
+    basePx: number;
+    cpuRate: number;
+    background: Rgba | null;
+}
+export declare const devtoolsStore: import("./store").Store<DevtoolsState>;

package/dist/react/devtools/stores.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.devtoolsStore = exports.pendingSpans = exports.profilerStore = exports.inspectorStore = exports.layoutStore = exports.engineLogs = exports.consoleLogs = void 0;
+exports.recordSpan = recordSpan;
+const store_1 = require("./store");
+exports.consoleLogs = (0, store_1.createLogStore)();
+exports.engineLogs = (0, store_1.createLogStore)();
+exports.layoutStore = (0, store_1.createStore)({
+    rects: new Map(),
+    stats: { frameMs: 0, fps: 0 },
+    width: 0,
+    height: 0,
+    at: 0,
+});
+exports.inspectorStore = (0, store_1.createStore)({
+    selectedId: null,
+    expanded: new Set(),
+    picking: false,
+    treeVersion: 0,
+});
+exports.profilerStore = (0, store_1.createStore)({
+    recording: false,
+    pendingStop: false,
+    session: null,
+    startedAt: 0,
+});
+exports.pendingSpans = [];
+function recordSpan(span) {
+    if (!exports.profilerStore.get().recording)
+        return;
+    exports.pendingSpans.push(span);
+}
+exports.devtoolsStore = (0, store_1.createStore)({
+    open: false,
+    tab: "elements",
+    width: 0,
+    height: 0,
+    basePx: 16,
+    cpuRate: 1,
+    background: null,
+});

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

@@ -0,0 +1,35 @@
+import type { TerminalColors } from "../native";
+declare function build(colors: TerminalColors): {
+    bg: string;
+    panel: string;
+    chrome: string;
+    chromeActive: string;
+    border: string;
+    text: string;
+    dim: string;
+    faint: string;
+    accent: string;
+    accentDim: string;
+    selectionBg: string;
+    hover: string;
+    tag: string;
+    attrName: string;
+    attrValue: string;
+    danger: string;
+    warn: string;
+    ok: string;
+    levels: Record<string, string>;
+    flame: {
+        react: string[];
+        bridge: string[];
+        engine: string[];
+        devtools: string[];
+        images: string[];
+    };
+};
+export type DevtoolsTheme = ReturnType<typeof build>;
+export declare let theme: DevtoolsTheme;
+export declare function refreshTheme(colors: TerminalColors): void;
+export declare const MONO = 0;
+export declare const UI = 0;
+export {};