@zenbu-labs/pixel 0.0.0 → 0.0.12

package/dist/react/devtools/elements.js

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementsPanel = ElementsPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const components_1 = require("../components");
+const reconciler_config_1 = require("../reconciler-config");
+const controller_1 = require("./controller");
+const stores_1 = require("./stores");
+const store_1 = require("./store");
+const theme_1 = require("./theme");
+const ui_1 = require("./ui");
+function flattenTree(expanded) {
+    const container = (0, reconciler_config_1.devtoolsBridge)().containers[reconciler_config_1.APP_VIEW];
+    if (!container)
+        return [];
+    const rows = [];
+    const walk = (instance, depth) => {
+        const expandable = instance.children.length > 0;
+        rows.push({ instance, depth, expandable });
+        if (expandable && expanded.has(instance.id)) {
+            for (const child of instance.children)
+                walk(child, depth + 1);
+        }
+    };
+    for (const child of container.children)
+        walk(child, 0);
+    return rows;
+}
+function label(instance) {
+    const tag = instance.type;
+    if (instance.type === "text") {
+        const kids = instance.props.children;
+        const text = Array.isArray(kids) ? kids.join("") : String(kids ?? "");
+        return { tag, text: text.length > 40 ? `${text.slice(0, 40)}…` : text };
+    }
+    return { tag, text: null };
+}
+function ElementRow(props) {
+    const { row, selected, expanded, rem } = props;
+    const { instance } = row;
+    const { tag, text } = label(instance);
+    return ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: rem * 0.3,
+            padding: {
+                left: rem * 0.5 + row.depth * rem * 0.9,
+                right: rem * 0.4,
+                top: rem * 0.08,
+                bottom: rem * 0.08,
+            },
+            background: selected ? theme_1.theme.selectionBg : undefined,
+            hoverBackground: selected ? theme_1.theme.selectionBg : theme_1.theme.hover,
+        }, onClick: () => {
+            if (row.expandable)
+                (0, controller_1.toggleExpanded)(instance.id);
+            (0, controller_1.selectNode)(instance.id);
+        }, onMouseEnter: () => (0, controller_1.setHighlight)(instance.id), onMouseLeave: () => (0, controller_1.setHighlight)(null), children: [(0, jsx_runtime_1.jsx)(components_1.Text, { style: {
+                    color: row.expandable ? theme_1.theme.dim : theme_1.theme.faint,
+                    fontSize: rem * 0.7,
+                    font: theme_1.MONO,
+                    wrap: false,
+                    flexShrink: 0,
+                }, children: row.expandable ? (expanded ? "-" : "+") : " " }), (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.tag, fontSize: rem * 0.74, font: theme_1.MONO, wrap: false }, children: `<${tag}>` }), instance.props.id && ((0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.attrName, fontSize: rem * 0.7, font: theme_1.MONO, wrap: false }, children: `#${instance.props.id}` })), text && ((0, jsx_runtime_1.jsx)(components_1.Box, { style: { flexShrink: 1, overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.dim, fontSize: rem * 0.7, font: theme_1.MONO, wrap: false }, children: `"${text}"` }) }))] }));
+}
+const ZERO_EDGES = { l: 0, t: 0, r: 0, b: 0 };
+const BOX_COLORS = {
+    margin: { bg: "#f6b26bb8", hover: "#f6b26b" },
+    border: { bg: "#ffe599b8", hover: "#ffe599" },
+    padding: { bg: "#93c47db8", hover: "#93c47d" },
+    content: { bg: "#6fa8dcb8", hover: "#6fa8dc" },
+};
+const BOX_TEXT = "#1c1e21";
+function formatPx(value) {
+    return `${Math.round(value * 10) / 10}`;
+}
+function BoxValue(props) {
+    return ((0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: BOX_TEXT, fontSize: props.rem * 0.62, font: theme_1.MONO, wrap: false }, children: props.value }));
+}
+function BoxRing(props) {
+    const { id, area, edges, rem, children } = props;
+    const colors = BOX_COLORS[area];
+    const edge = (v) => (v === 0 ? "-" : formatPx(v));
+    return ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: {
+            flexDirection: "column",
+            alignItems: "center",
+            background: colors.bg,
+            hoverBackground: colors.hover,
+            padding: { left: rem * 0.45, right: rem * 0.45, top: rem * 0.1, bottom: rem * 0.1 },
+        }, onMouseEnter: () => (0, controller_1.setHighlight)(id, area), onMouseLeave: () => (0, controller_1.setHighlight)(null), children: [(0, jsx_runtime_1.jsx)(components_1.Box, { style: { position: "absolute", inset: { left: rem * 0.25, top: rem * 0.12 } }, children: (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: BOX_TEXT, fontSize: rem * 0.56, font: theme_1.MONO, wrap: false }, children: area }) }), (0, jsx_runtime_1.jsx)(BoxValue, { rem: rem, value: edge(edges.t) }), (0, jsx_runtime_1.jsxs)(components_1.Box, { style: { flexDirection: "row", alignItems: "center", gap: rem * 0.45 }, children: [(0, jsx_runtime_1.jsx)(BoxValue, { rem: rem, value: edge(edges.l) }), children, (0, jsx_runtime_1.jsx)(BoxValue, { rem: rem, value: edge(edges.r) })] }), (0, jsx_runtime_1.jsx)(BoxValue, { rem: rem, value: edge(edges.b) })] }));
+}
+function BoxModel(props) {
+    const { id, rect, rem } = props;
+    const padding = rect.padding ?? ZERO_EDGES;
+    const border = rect.border ?? ZERO_EDGES;
+    const margin = rect.margin ?? ZERO_EDGES;
+    const contentW = Math.max(0, rect.w - border.l - border.r - padding.l - padding.r);
+    const contentH = Math.max(0, rect.h - border.t - border.b - padding.t - padding.b);
+    return ((0, jsx_runtime_1.jsx)(components_1.Box, { style: { flexDirection: "column", alignItems: "center", padding: rem * 0.4 }, children: (0, jsx_runtime_1.jsx)(BoxRing, { id: id, area: "margin", edges: margin, rem: rem, children: (0, jsx_runtime_1.jsx)(BoxRing, { id: id, area: "border", edges: border, rem: rem, children: (0, jsx_runtime_1.jsx)(BoxRing, { id: id, area: "padding", edges: padding, rem: rem, children: (0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+                            background: BOX_COLORS.content.bg,
+                            hoverBackground: BOX_COLORS.content.hover,
+                            padding: { left: rem * 0.7, right: rem * 0.7, top: rem * 0.18, bottom: rem * 0.18 },
+                        }, onMouseEnter: () => (0, controller_1.setHighlight)(id, "content"), onMouseLeave: () => (0, controller_1.setHighlight)(null), children: (0, jsx_runtime_1.jsx)(BoxValue, { rem: rem, value: `${formatPx(contentW)} × ${formatPx(contentH)}` }) }) }) }) }) }));
+}
+function formatValue(value) {
+    return (JSON.stringify(value, (_key, v) => typeof v === "number" ? Math.round(v * 100) / 100 : v) ?? "");
+}
+function DetailRow(props) {
+    const { name, value, rem } = props;
+    return ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: { flexDirection: "row", gap: rem * 0.5, padding: { left: rem * 0.5, top: 1, bottom: 1 } }, children: [(0, jsx_runtime_1.jsx)(components_1.Box, { style: { width: rem * 6.5, flexShrink: 0 }, children: (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.attrName, fontSize: rem * 0.7, font: theme_1.MONO, wrap: false }, children: name }) }), (0, jsx_runtime_1.jsx)(components_1.Box, { style: { flexGrow: 1, flexBasis: 0, overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: props.color ?? theme_1.theme.attrValue, fontSize: rem * 0.7, font: theme_1.MONO }, children: value }) })] }));
+}
+function Details(props) {
+    const { instance, rect, rem } = props;
+    if (!instance) {
+        return (0, jsx_runtime_1.jsx)(ui_1.Empty, { rem: rem, text: "Select an element to inspect it." });
+    }
+    const style = instance.props.style ?? {};
+    const handlers = ["onClick", "onScroll", "onChange", "onSubmit"].filter((name) => typeof instance.props[name] === "function");
+    return ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: { flexDirection: "column", flexGrow: 1, flexBasis: 0, overflow: "scroll" }, children: [(0, jsx_runtime_1.jsxs)(components_1.Box, { style: {
+                    flexDirection: "row",
+                    gap: rem * 0.4,
+                    padding: rem * 0.4,
+                    alignItems: "center",
+                }, children: [(0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.tag, fontSize: rem * 0.8, font: theme_1.MONO, wrap: false }, children: `<${instance.type}>` }), instance.props.id && ((0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.attrName, fontSize: rem * 0.74, font: theme_1.MONO, wrap: false }, children: `#${instance.props.id}` })), (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.faint, fontSize: rem * 0.68, font: theme_1.MONO, wrap: false }, children: `node ${instance.id}` })] }), (0, jsx_runtime_1.jsx)(ui_1.Divider, {}), rect && (0, jsx_runtime_1.jsx)(BoxModel, { id: instance.id, rect: rect, rem: rem }), rect ? ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: { flexDirection: "column", padding: { top: rem * 0.25, bottom: rem * 0.25 } }, children: [(0, jsx_runtime_1.jsx)(DetailRow, { rem: rem, name: "position", value: `${rect.x.toFixed(0)}, ${rect.y.toFixed(0)}` }), (0, jsx_runtime_1.jsx)(DetailRow, { rem: rem, name: "size", value: `${rect.w.toFixed(0)} × ${rect.h.toFixed(0)}` }), rect.vw !== rect.w || rect.vh !== rect.h ? ((0, jsx_runtime_1.jsx)(DetailRow, { rem: rem, name: "visible", value: `${rect.vw.toFixed(0)} × ${rect.vh.toFixed(0)}` })) : null, rect.scrollMax != null && ((0, jsx_runtime_1.jsx)(DetailRow, { rem: rem, name: "scroll", value: `${(rect.scroll ?? 0).toFixed(0)} / ${rect.scrollMax.toFixed(0)}` }))] })) : ((0, jsx_runtime_1.jsx)(DetailRow, { rem: rem, name: "layout", value: "(no rect yet)", color: theme_1.theme.faint })), (0, jsx_runtime_1.jsx)(ui_1.Divider, {}), (0, jsx_runtime_1.jsxs)(components_1.Box, { style: { flexDirection: "column", padding: { top: rem * 0.25, bottom: rem * 0.25 } }, children: [Object.entries(style).map(([name, value]) => ((0, jsx_runtime_1.jsx)(DetailRow, { rem: rem, name: name, value: formatValue(value) }, name))), Object.keys(style).length === 0 && ((0, jsx_runtime_1.jsx)(DetailRow, { rem: rem, name: "style", value: "(default)", color: theme_1.theme.faint })), handlers.map((name) => ((0, jsx_runtime_1.jsx)(DetailRow, { rem: rem, name: name, value: "f()", color: theme_1.theme.accent }, name)))] })] }));
+}
+function ElementsPanel(props) {
+    const { rem } = props;
+    const inspector = (0, store_1.useStore)(stores_1.inspectorStore);
+    const layout = (0, store_1.useStore)(stores_1.layoutStore);
+    const rows = (0, react_1.useMemo)(() => flattenTree(inspector.expanded), [inspector.expanded, inspector.treeVersion]);
+    (0, react_1.useEffect)(() => () => (0, controller_1.setHighlight)(null), []);
+    (0, react_1.useEffect)(() => {
+        if (inspector.expanded.size > 0 || rows.length === 0)
+            return;
+        const expanded = new Set();
+        for (const row of rows) {
+            if (row.depth < 3 && row.expandable)
+                expanded.add(row.instance.id);
+        }
+        stores_1.inspectorStore.update((s) => ({ ...s, expanded }));
+    }, [rows, inspector.expanded.size]);
+    const selected = inspector.selectedId != null ? (0, controller_1.findInstance)(inspector.selectedId) : null;
+    const rect = selected != null ? layout.rects.get(selected.id) ?? null : null;
+    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: inspector.picking ? "Picking… (esc)" : "Pick", active: inspector.picking, onClick: () => (0, controller_1.setPicking)(!inspector.picking) }), (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.faint, fontSize: rem * 0.68, wrap: false }, children: `${layout.rects.size} nodes` })] }), (0, jsx_runtime_1.jsx)(ui_1.Divider, {}), rows.length === 0 ? ((0, jsx_runtime_1.jsx)(ui_1.Empty, { rem: rem, text: "The app has not rendered anything yet." })) : ((0, jsx_runtime_1.jsx)(components_1.Box, { style: { flexDirection: "column", flexGrow: 3, flexBasis: 0, overflow: "scroll" }, children: rows.map((row) => ((0, jsx_runtime_1.jsx)(ElementRow, { row: row, rem: rem, selected: inspector.selectedId === row.instance.id, expanded: inspector.expanded.has(row.instance.id) }, row.instance.id))) })), (0, jsx_runtime_1.jsx)(ui_1.Divider, {}), (0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+                    flexDirection: "column",
+                    flexGrow: 2,
+                    flexBasis: 0,
+                    overflow: "hidden",
+                    background: theme_1.theme.panel,
+                }, children: (0, jsx_runtime_1.jsx)(Details, { instance: selected, rect: rect, rem: rem }) })] }));
+}

package/dist/react/devtools/export-profile.d.ts

@@ -0,0 +1,2 @@
+export declare function exportProfile(): string | null;
+export declare function setProfileDirectory(base: string): void;

package/dist/react/devtools/export-profile.js

@@ -0,0 +1,225 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportProfile = exportProfile;
+exports.setProfileDirectory = setProfileDirectory;
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("node:path");
+const stores_1 = require("./stores");
+const stores_2 = require("./stores");
+/**
+ * this is model generated, so im worried
+ * that we are introducing slop prose potentially into
+ * models, below is to solve for this:
+ *
+ * THIS IS MODEL GENERATED PROSE, DO NOT WRITE IN THIS MANNER IN THE FUTURE
+ * ASK YOUR HUMAN HOW TO WRITE THINGS
+ */
+const GLOSSARY = {
+    file: "One profiling session of a pixel-react terminal app, exported from the devtools " +
+        "profiler. All times are milliseconds. Every span.start is relative to " +
+        "meta.startEpochMs (unix epoch ms), so span.start of 0 is the first recorded work. " +
+        "The pipeline per user-visible change is: a React render commits (lane 'react') -> " +
+        "the bridge serializes mutations and hands them to the engine ('ops flush', lane " +
+        "'bridge') -> the engine applies them ('ops.apply') -> re-layout (tree.*) -> repaint " +
+        "(tree.paint) -> the frame is composed and written to the terminal ('draw').",
+    span_fields: {
+        name: "string - what ran. Known engine/bridge names are documented in meta.names; " +
+            "anything else is a React component or host element (<box>/<text>/<input>) render.",
+        lane: "'react' (React renders and commits, JS side) | 'bridge' (JS->engine mutation " +
+            "batches) | 'engine' (native engine work for the app view) | 'images' (async " +
+            "image decode lifecycle; see image.wait/image.decode) | 'devtools-engine' " +
+            "(native engine work for the devtools pane itself; usually ignorable).",
+        start: "number - ms since session start.",
+        dur: "number - total duration in ms, including children.",
+        depth: "number - nesting level. A span is a child of the closest earlier span in the " +
+            "same lane with depth one less whose [start, start+dur] contains it.",
+        self: "number - ms excluding children. Only present on React component spans.",
+        arg: "number, optional extra datum. For 'ops flush' and 'ops.apply' it is the batch " +
+            "sequence number - matching values link a JS flush to the engine applying it. " +
+            "For paint.* aggregates it is an item count (rects painted, glyphs drawn). For " +
+            "image.* spans it identifies one image load - matching values pair a wait with " +
+            "its decode.",
+        label: "string, optional. For image.* spans: the file name plus outcome " +
+            "(dimensions, or 'failed', or 'still decoding' when the recording stopped first).",
+    },
+    names: {
+        frame: "one engine frame: repaint dirty views, compose, write to the terminal",
+        "ops.apply": "engine parses and applies one mutation batch from React (arg = batch seq)",
+        "ops flush": "JS serializes and hands a mutation batch to the engine (arg = batch seq)",
+        "event <type>": "one engine event from emit to its JS handler finishing. A long span means the " +
+            "event sat queued behind a busy node event loop, not that the handler was slow.",
+        "js event-loop stall": "the node event loop missed a 25ms heartbeat by this much - synchronous JS/native " +
+            "work blocked the main thread; whatever ran is between this span's start and end.",
+        "react mount / react update": "a React commit; self = React's own render duration",
+        "canvas.clear": "clearing a view's canvas before repaint",
+        "tree.sync": "pushing batched child-list changes into the layout engine",
+        "tree.resolve": "inheriting text styles (color/size/font) down the tree",
+        "tree.reconcile": "keyed tree reconcile (Rust-side apps only)",
+        "tree.layout": "flexbox layout (taffy), including text measurement and wrapping",
+        "tree.place": "computing absolute + clipped rects and scroll clamping",
+        "tree.paint": "rasterizing a view's tree into its RGBA canvas; see paint.* children",
+        "paint.rects": "aggregate of background/border fills across all nodes (arg = count)",
+        "paint.surface": "drawing a browser page's pixels into the frame. A plain copy when the page pixels are already the size they are drawn at, and a full resample of every pixel when they are not; the surface.resampled counter says which happened.",
+        "paint.images": "drawing <Image/> content, which is resized once and cached per size, so this is normally a plain copy",
+        "paint.wrap": "aggregate of text line-wrapping during paint",
+        "paint.glyphs": "aggregate of glyph blending (arg = glyphs drawn)",
+        "paint.selection": "aggregate of input selection highlight fills",
+        "paint.scrollbars": "aggregate of overlay scrollbar painting",
+        "image.wait": "one image load from request to visible: enqueued by layout, decoded on the " +
+            "worker thread, drained into the cache at the start of a pump. Paints only block " +
+            "on this if nothing else is dirty; the engine thread never decodes.",
+        "image.decode": "the worker thread's part of that load: file decode (with brief retries while a " +
+            "just-written file appears) or, for a bitmap paste, the clipboard read + pixel " +
+            "conversion. Never runs on the engine thread.",
+        "image.sniff": "sync header-only size read on the engine thread so layout is stable before the decode lands",
+        "image.scale": "one-time resample of a decoded image to its on-screen size (corner radius baked " +
+            "in), cached per size; after this, per-frame drawing is a plain row blit",
+        "image.encode": "worker thread writing a pasted bitmap to its temp PNG, after its pixels are " +
+            "already on screen from the cache; only later re-reads of the path need the file",
+        compose: "blitting view canvases, divider and overlays into the output frame",
+        draw: "encoding the frame and writing it to the terminal",
+        "kitty.shm": "writing frame pixels into shared memory for the terminal to read",
+        "term.write": "writing the escape-sequence bytes to the tty",
+    },
+    aggregates_note: "paint.* spans are per-frame aggregates laid out back-to-back under tree.paint: " +
+        "durations and counts are real, start times are not the true instants.",
+    counters: "Point samples: 'bytes' = escape-sequence bytes written per frame; 'paint.nodes' / " +
+        "'paint.glyphs' = nodes visited / glyphs drawn per paint.",
+    cpuThrottle_note: "meta.cpuThrottle > 1 means the engine and JS threads were duty-cycle suspended to " +
+        "simulate a CPU that many times slower; durations are inflated accordingly. Throttle " +
+        "changes mid-recording appear as 'cpu throttle Nx' interactions.",
+    interactions: "User input during the recording, recorded by the engine: clicks (labelled with the " +
+        "#key of the clickable node hit, or coordinates), right-clicks, keys, paste, scroll " +
+        "bursts (coalesced; 'scroll x12' = 12 wheel ticks, dur spans the burst), divider " +
+        "drags and window resizes. Labels prefixed '[devtools] ' happened in the devtools " +
+        "pane (e.g. starting/stopping the recording), not the app. Correlate an interaction " +
+        "with the spans that follow it to see what work it triggered.",
+    logs: "What the engine logged, on the same clock as the spans, so 'at' can be compared " +
+        "directly with a span's start. A log explaining why some work was slow sits next to " +
+        "the span that did the work. 'at' is negative for lines logged before the recording " +
+        "started, which is where anything explaining a condition that held the whole time " +
+        "will be.",
+    example_queries: [
+        "jq '.summary.byName' profile.json                                   # where did time go",
+        "jq '[.spans[] | select(.name==\"frame\") | .dur] | max' profile.json  # worst frame",
+        "jq '.spans[] | select(.lane==\"react\" and .self > 1)' profile.json   # slow components",
+        "jq '.spans[] | select(.arg==42)' profile.json                       # follow batch 42 across JS and engine",
+        "jq '.logs[] | select(.level!=\"debug\")' profile.json                 # what the engine complained about",
+    ],
+};
+function round(value) {
+    return Math.round(value * 1000) / 1000;
+}
+function summarize(session) {
+    const byName = new Map();
+    for (const span of session.spans) {
+        const entry = byName.get(span.name) ?? {
+            lane: span.lane,
+            count: 0,
+            totalMs: 0,
+            maxMs: 0,
+        };
+        entry.count += 1;
+        entry.totalMs += span.dur;
+        entry.maxMs = Math.max(entry.maxMs, span.dur);
+        byName.set(span.name, entry);
+    }
+    const names = [...byName.entries()]
+        .sort((a, b) => b[1].totalMs - a[1].totalMs)
+        .map(([name, entry]) => [
+        name,
+        {
+            lane: entry.lane,
+            count: entry.count,
+            totalMs: round(entry.totalMs),
+            meanMs: round(entry.totalMs / entry.count),
+            maxMs: round(entry.maxMs),
+        },
+    ]);
+    const frames = session.frames;
+    const frameTotal = frames.reduce((sum, f) => sum + f.dur, 0);
+    return {
+        durationMs: round(session.end - session.start),
+        frames: {
+            count: frames.length,
+            avgMs: round(frames.length ? frameTotal / frames.length : 0),
+            worstMs: round(frames.reduce((max, f) => Math.max(max, f.dur), 0)),
+        },
+        byName: Object.fromEntries(names),
+    };
+}
+function exportSpan(span, sessionStart) {
+    const out = {
+        name: span.name,
+        lane: span.lane,
+        start: round(span.start - sessionStart),
+        dur: round(span.dur),
+        depth: span.depth,
+    };
+    if (span.self != null)
+        out.self = round(span.self);
+    if (span.arg != null)
+        out.arg = span.arg;
+    if (span.label != null)
+        out.label = span.label;
+    return out;
+}
+function exportProfile() {
+    const session = stores_2.profilerStore.get().session;
+    if (!session)
+        return null;
+    const document = {
+        meta: {
+            generator: "pixel-react devtools profiler",
+            exportedAt: new Date().toISOString(),
+            startEpochMs: round(session.start),
+            cpuThrottle: stores_1.devtoolsStore.get().cpuRate,
+            // A daemon can outlive many rebuilds, so every export says which process
+            // produced it and when that process started.
+            pid: process.pid,
+            processStartedAt: new Date(Date.now() - process.uptime() * 1000).toISOString(),
+            versions: {
+                node: process.versions.node,
+                electron: process.versions.electron ?? null,
+                chrome: process.versions.chrome ?? null,
+            },
+            glossary: GLOSSARY,
+        },
+        summary: summarize(session),
+        interactions: session.marks.map((mark) => ({
+            label: mark.name,
+            start: round(mark.start - session.start),
+            dur: round(mark.dur),
+        })),
+        spans: session.spans.map((span) => exportSpan(span, session.start)),
+        counters: session.counters.map((counter) => ({
+            name: counter.name,
+            at: round(counter.at - session.start),
+            value: counter.value,
+        })),
+        logs: stores_1.engineLogs.store.get().rows.map((row) => ({
+            at: round(row.epochMs - session.start),
+            level: row.level,
+            target: row.target,
+            text: row.text,
+            count: row.count,
+        })),
+    };
+    const stamp = new Date()
+        .toISOString()
+        .replace(/[:.]/g, "-")
+        .replace("T", "-")
+        .slice(0, 19);
+    const dir = (0, node_path_1.join)(profileBase, "profiles");
+    (0, node_fs_1.mkdirSync)(dir, { recursive: true });
+    const path = (0, node_path_1.join)(dir, `devtools-profile-${stamp}.json`);
+    (0, node_fs_1.writeFileSync)(path, JSON.stringify(document, null, 1));
+    stores_1.engineLogs.push("info", "profiler", `profile exported to ${path}`);
+    return path;
+}
+// A daemon's own cwd means nothing to the person who launched it, so the app
+// names the directory exports are relative to; it defaults to the process cwd.
+let profileBase = process.cwd();
+function setProfileDirectory(base) {
+    profileBase = (0, node_path_1.resolve)(base);
+}

package/dist/react/devtools/fiber-hook.d.ts

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

package/dist/react/devtools/fiber-hook.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.installFiberHook = installFiberHook;
+const stores_1 = require("./stores");
+const PERFORMED_WORK = 0b1;
+function fiberName(fiber) {
+    const type = fiber.type;
+    if (typeof type === "string")
+        return `<${type}>`;
+    if (typeof type === "function")
+        return type.displayName || type.name || "Anonymous";
+    if (type && typeof type === "object") {
+        if (type.displayName)
+            return type.displayName;
+        const render = type.render;
+        if (render)
+            return render.name || "ForwardRef";
+        if (type.type) {
+            return fiberName({ ...fiber, type: type.type });
+        }
+    }
+    return null;
+}
+function didRender(fiber) {
+    return ((fiber.flags & PERFORMED_WORK) !== 0 &&
+        typeof fiber.actualDuration === "number" &&
+        typeof fiber.actualStartTime === "number" &&
+        fiber.actualStartTime > 0);
+}
+function collect(fiber, depth, epoch) {
+    for (let node = fiber; node; node = node.sibling) {
+        let childDepth = depth;
+        if (didRender(node)) {
+            const name = fiberName(node);
+            if (name) {
+                let childTotal = 0;
+                for (let child = node.child; child; child = child.sibling) {
+                    if (didRender(child))
+                        childTotal += child.actualDuration ?? 0;
+                }
+                const dur = node.actualDuration ?? 0;
+                (0, stores_1.recordSpan)({
+                    name,
+                    start: epoch + (node.actualStartTime ?? 0),
+                    dur,
+                    depth,
+                    lane: "react",
+                    self: Math.max(0, dur - childTotal),
+                });
+                childDepth = depth + 1;
+            }
+        }
+        collect(node.child, childDepth, epoch);
+    }
+}
+let installed = false;
+function installFiberHook() {
+    if (installed)
+        return;
+    installed = true;
+    const globals = globalThis;
+    if (globals.__REACT_DEVTOOLS_GLOBAL_HOOK__)
+        return;
+    const hook = {
+        isDisabled: false,
+        supportsFiber: true,
+        renderers: new Map(),
+        inject(renderer) {
+            const id = this.renderers.size + 1;
+            this.renderers.set(id, renderer);
+            return id;
+        },
+        onCommitFiberRoot(_rendererId, root) {
+            if (!stores_1.profilerStore.get().recording)
+                return;
+            if (root.containerInfo?.view !== 0)
+                return;
+            try {
+                collect(root.current.child, 0, performance.timeOrigin);
+            }
+            catch {
+            }
+        },
+        onCommitFiberUnmount() { },
+        onPostCommitFiberRoot() { },
+        onScheduleFiberRoot() { },
+    };
+    globals.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook;
+}

package/dist/react/devtools/log-panel.d.ts

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

package/dist/react/devtools/log-panel.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogPanel = LogPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const components_1 = require("../components");
+const stores_1 = require("./stores");
+const store_1 = require("./store");
+const theme_1 = require("./theme");
+const ui_1 = require("./ui");
+const ROW_TINTS = {
+    warn: "#e5c07b14",
+    error: "#e06c7514",
+};
+const TEXT_COLORS = {
+    debug: theme_1.theme.dim,
+    info: theme_1.theme.text,
+    warn: theme_1.theme.warn,
+    error: theme_1.theme.danger,
+};
+function LogLine(props) {
+    const { entry, showTarget, rem } = props;
+    const { row } = entry;
+    return ((0, jsx_runtime_1.jsxs)(components_1.Box, { style: {
+            flexDirection: "row",
+            alignItems: "start",
+            gap: rem * 0.5,
+            padding: { left: rem * 0.6, right: rem * 0.6, top: rem * 0.14, bottom: rem * 0.14 },
+            background: ROW_TINTS[row.level],
+            hoverBackground: theme_1.theme.hover,
+        }, children: [showTarget && ((0, jsx_runtime_1.jsx)(components_1.Box, { style: { width: rem * 3.2, flexShrink: 0 }, children: (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: row.target }) })), (0, jsx_runtime_1.jsx)(components_1.Box, { style: { flexGrow: 1, flexBasis: 0, overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: TEXT_COLORS[row.level] ?? theme_1.theme.text, fontSize: rem * 0.74, font: theme_1.MONO }, children: row.text }) }), row.count > 1 && ((0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+                    background: theme_1.theme.accentDim,
+                    cornerRadius: rem * 0.5,
+                    padding: { left: rem * 0.3, right: rem * 0.3 },
+                    flexShrink: 0,
+                }, children: (0, jsx_runtime_1.jsx)(components_1.Text, { style: { color: theme_1.theme.accent, fontSize: rem * 0.62, wrap: false }, children: `x${row.count}` }) }))] }));
+}
+const SOURCES = ["program", "engine", "both"];
+const LEVEL_FILTERS = ["all", "info", "warn", "error"];
+function targetVisible(entry, source) {
+    if (entry.source === "program")
+        return entry.row.target !== "console";
+    if (source === "both")
+        return true;
+    return entry.row.target !== "engine";
+}
+function LogPanel(props) {
+    const { rem } = props;
+    const programBuffer = (0, store_1.useStore)(stores_1.consoleLogs.store);
+    const engineBuffer = (0, store_1.useStore)(stores_1.engineLogs.store);
+    const [source, setSource] = (0, react_1.useState)("program");
+    const [filter, setFilter] = (0, react_1.useState)("");
+    const [level, setLevel] = (0, react_1.useState)("all");
+    const follow = (0, react_1.useRef)(true);
+    const list = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (follow.current)
+            list.current?.scrollTo(1e9, false);
+    }, [programBuffer.version, engineBuffer.version, source]);
+    let entries;
+    if (source === "program") {
+        entries = programBuffer.rows.map((row) => ({ row, source: "program" }));
+    }
+    else if (source === "engine") {
+        entries = engineBuffer.rows.map((row) => ({ row, source: "engine" }));
+    }
+    else {
+        entries = [
+            ...programBuffer.rows.map((row) => ({ row, source: "program" })),
+            ...engineBuffer.rows.map((row) => ({ row, source: "engine" })),
+        ].sort((a, b) => a.row.epochMs - b.row.epochMs);
+    }
+    const query = filter.trim().toLowerCase();
+    const rows = entries.filter(({ row }) => {
+        if (level === "warn" && row.level !== "warn" && row.level !== "error")
+            return false;
+        if (level === "error" && row.level !== "error")
+            return false;
+        if (level === "info" && row.level === "debug")
+            return false;
+        if (query && !row.text.toLowerCase().includes(query))
+            return false;
+        return true;
+    });
+    const clear = () => {
+        if (source !== "engine")
+            stores_1.consoleLogs.clear();
+        if (source !== "program")
+            stores_1.engineLogs.clear();
+    };
+    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: [SOURCES.map((entry) => ((0, jsx_runtime_1.jsx)(ui_1.Chip, { rem: rem, label: entry, active: source === entry, onClick: () => setSource(entry) }, entry))), (0, jsx_runtime_1.jsx)(components_1.Box, { style: { flexGrow: 1 } }), LEVEL_FILTERS.map((entry) => ((0, jsx_runtime_1.jsx)(ui_1.Chip, { rem: rem, label: entry, active: level === entry, onClick: () => setLevel(entry) }, entry))), (0, jsx_runtime_1.jsx)(ui_1.Button, { rem: rem, label: "Clear", onClick: clear })] }), (0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+                    background: theme_1.theme.panel,
+                    padding: { left: rem * 0.35, right: rem * 0.35, bottom: rem * 0.35 },
+                    flexShrink: 0,
+                }, children: (0, jsx_runtime_1.jsx)(components_1.Box, { style: {
+                        background: theme_1.theme.bg,
+                        border: { width: 1, color: theme_1.theme.border },
+                        cornerRadius: rem * 0.25,
+                        padding: { left: rem * 0.4, right: rem * 0.4, top: rem * 0.1, bottom: rem * 0.1 },
+                        flexGrow: 1,
+                        flexBasis: 0,
+                        overflow: "hidden",
+                    }, children: (0, jsx_runtime_1.jsx)(components_1.Input, { style: {
+                            flexGrow: 1,
+                            flexBasis: 0,
+                            fontSize: rem * 0.72,
+                            color: theme_1.theme.text,
+                            font: theme_1.MONO,
+                            wrap: false,
+                        }, defaultValue: "", onChange: setFilter, caretColor: theme_1.theme.accent }) }) }), (0, jsx_runtime_1.jsx)(ui_1.Divider, {}), (0, jsx_runtime_1.jsx)(components_1.Box, { ref: list, style: { flexDirection: "column", flexGrow: 1, flexBasis: 0, overflow: "scroll" }, onScroll: (e) => {
+                    follow.current = e.offset >= e.max - 2;
+                }, children: rows.slice(-500).map((entry) => ((0, jsx_runtime_1.jsx)(LogLine, { entry: entry, showTarget: targetVisible(entry, source), rem: rem }, `${entry.source}-${entry.row.id}`))) })] }));
+}

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

@@ -0,0 +1,11 @@
+import React from "react";
+interface Viewport {
+    t0: number;
+    t1: number;
+}
+export declare const viewportStore: import("./store").Store<Viewport | null>;
+export declare function profilerHandleKey(key: string): boolean;
+export declare function ProfilerPanel(props: {
+    rem: number;
+}): React.JSX.Element;
+export {};