@fcannizzaro/streamdeck-react 0.1.10 → 0.1.12

package/dist/devtools/bridge.d.ts

@@ -1,8 +1,8 @@
 import { ReactRoot } from '../roots/root';
-import { TouchBarRoot } from '../roots/touchbar-root';
+import { TouchStripRoot } from '../roots/touchstrip-root';
 import { CanvasInfo, DeviceInfo } from '../types';
 import { VContainer } from '../reconciler/vnode';
-import { RenderConfig } from '../render/pipeline';
+import { RenderConfig, RenderProfile } from '../render/pipeline';
 import { RegistryObserver } from './observers/lifecycle';
 import { DevtoolsServer } from './server';
 import { SnapshotMessage } from './types';
@@ -14,12 +14,14 @@ export declare class DevtoolsBridge implements RegistryObserver {
     private networkRing;
     private eventRing;
     private actions;
-    private touchBars;
+    private touchStrips;
     private lastRenderSent;
     private pendingTrailing;
     private eventBusOwners;
     private highlightedActionId;
     private highlightedNodeId;
+    private _lastProfile;
+    private _metricsTimer;
     constructor(server: DevtoolsServer, devtoolsName: string, renderConfig: RenderConfig);
     onRootCreated(actionId: string, root: ReactRoot, meta: {
         actionUuid: string;
@@ -32,22 +34,48 @@ export declare class DevtoolsBridge implements RegistryObserver {
         };
     }): void;
     onRootDestroyed(actionId: string): void;
-    onTouchBarCreated(deviceId: string, root: TouchBarRoot, deviceInfo: DeviceInfo): void;
-    onTouchBarColumnChanged(deviceId: string, columns: number[], actionMap: Map<number, string>): void;
-    onTouchBarDestroyed(deviceId: string): void;
+    onTouchStripCreated(deviceId: string, root: TouchStripRoot, deviceInfo: DeviceInfo): void;
+    onTouchStripColumnChanged(deviceId: string, columns: number[], actionMap: Map<number, string>): void;
+    onTouchStripDestroyed(deviceId: string): void;
     onDispatch(actionId: string, event: string, payload: unknown): void;
     onEventBusEmit(bus: object, event: string, payload: unknown): void;
     onConsole(level: string, args: unknown[], stack: string | undefined): void;
+    /**
+     * Stash the render profile for the next onRender call.
+     * In the pipeline, onProfile fires synchronously before onRender,
+     * so the stash is always consumed immediately.
+     */
+    onProfile(profile: RenderProfile): void;
+    private static readonly METRICS_INTERVAL_MS;
+    /** Start periodic metrics emission to connected devtools clients. */
+    startMetricsEmitter(): void;
+    /** Stop periodic metrics emission. */
+    stopMetricsEmitter(): void;
     onFetchRequest(id: string, method: string, url: string, headers: Record<string, string>, body?: string): void;
     onFetchResponse(id: string, status: number, statusText: string, headers: Record<string, string>, body: string | undefined, durationMs: number): void;
     onFetchError(id: string, error: string, durationMs: number): void;
     onRender(container: VContainer, dataUri: string): void;
     private throttledRender;
     private emitRender;
-    private emitTouchBarRender;
+    /** Convert internal RenderProfile to wire-protocol ProfileData. */
+    private toProfileData;
+    private emitTouchStripRender;
+    private static readonly TB_PREFIX;
     private handleHighlight;
+    /**
+     * Restore a highlighted action or TouchStrip to its normal state.
+     * Un-suppresses hardware pushes and restores the original image(s).
+     */
+    private restoreHighlight;
     private applyHighlight;
+    private applyTouchStripHighlight;
     /** Broadcast highlight render image (or null to clear) to devtools UI. */
     private broadcastHighlightRender;
+    /**
+     * Clear highlight URIs for the given actionId.
+     * For TouchStrip IDs, clears all per-segment keys (touchStrip:*:seg:N).
+     * For regular actions, clears the single actionId key.
+     */
+    private broadcastHighlightClear;
     buildSnapshot(): SnapshotMessage;
 }

package/dist/devtools/bridge.js

@@ -1,6 +1,7 @@
+import { metrics } from "../render/metrics.js";
 import { serializeValue } from "./serialization/value.js";
 import { serializeVNode } from "./serialization/vnode.js";
-import { renderWithHighlight } from "./highlight.js";
+import { renderTouchStripWithHighlight, renderWithHighlight } from "./highlight.js";
 //#region src/devtools/bridge.ts
 var RingBuffer = class {
 	items;
@@ -27,7 +28,7 @@ var NETWORK_RING_SIZE = 100;
 var EVENT_RING_SIZE = 200;
 var consoleIdCounter = 0;
 var eventIdCounter = 0;
-var DevtoolsBridge = class {
+var DevtoolsBridge = class DevtoolsBridge {
 	server;
 	devtoolsName;
 	renderConfig;
@@ -35,12 +36,14 @@ var DevtoolsBridge = class {
 	networkRing = new RingBuffer(NETWORK_RING_SIZE);
 	eventRing = new RingBuffer(EVENT_RING_SIZE);
 	actions = /* @__PURE__ */ new Map();
-	touchBars = /* @__PURE__ */ new Map();
+	touchStrips = /* @__PURE__ */ new Map();
 	lastRenderSent = /* @__PURE__ */ new Map();
 	pendingTrailing = /* @__PURE__ */ new Map();
 	eventBusOwners = /* @__PURE__ */ new Map();
 	highlightedActionId = null;
 	highlightedNodeId = null;
+	_lastProfile = null;
+	_metricsTimer = null;
 	constructor(server, devtoolsName, renderConfig) {
 		this.server = server;
 		this.devtoolsName = devtoolsName;
@@ -131,25 +134,25 @@ var DevtoolsBridge = class {
 			this.pendingTrailing.delete(actionId);
 		}
 	}
-	onTouchBarCreated(deviceId, root, deviceInfo) {
-		this.touchBars.set(deviceId, {
+	onTouchStripCreated(deviceId, root, deviceInfo) {
+		this.touchStrips.set(deviceId, {
 			root,
 			deviceInfo,
 			columns: /* @__PURE__ */ new Map()
 		});
 		this.eventBusOwners.set(root.eventBus, {
-			actionId: `touchbar:${deviceId}`,
+			actionId: `touchStrip:${deviceId}`,
 			uuid: ""
 		});
 	}
-	onTouchBarColumnChanged(deviceId, columns, actionMap) {
-		const tb = this.touchBars.get(deviceId);
+	onTouchStripColumnChanged(deviceId, columns, actionMap) {
+		const tb = this.touchStrips.get(deviceId);
 		if (tb) tb.columns = new Map(actionMap);
 	}
-	onTouchBarDestroyed(deviceId) {
-		const tb = this.touchBars.get(deviceId);
+	onTouchStripDestroyed(deviceId) {
+		const tb = this.touchStrips.get(deviceId);
 		if (tb) this.eventBusOwners.delete(tb.root.eventBus);
-		this.touchBars.delete(deviceId);
+		this.touchStrips.delete(deviceId);
 	}
 	onDispatch(actionId, event, payload) {
 		if (!this.server.hasClients()) return;
@@ -207,6 +210,37 @@ var DevtoolsBridge = class {
 		this.consoleRing.push(msg);
 		this.server.broadcast(msg);
 	}
+	/**
+	* Stash the render profile for the next onRender call.
+	* In the pipeline, onProfile fires synchronously before onRender,
+	* so the stash is always consumed immediately.
+	*/
+	onProfile(profile) {
+		this._lastProfile = profile;
+	}
+	static METRICS_INTERVAL_MS = 3e3;
+	/** Start periodic metrics emission to connected devtools clients. */
+	startMetricsEmitter() {
+		if (this._metricsTimer) return;
+		this._metricsTimer = setInterval(() => {
+			if (!this.server.hasClients()) return;
+			const snapshot = metrics.snapshot();
+			const msg = {
+				type: "metrics",
+				ts: Date.now(),
+				metrics: snapshot
+			};
+			this.server.broadcast(msg);
+		}, DevtoolsBridge.METRICS_INTERVAL_MS);
+		if (typeof this._metricsTimer === "object" && "unref" in this._metricsTimer) this._metricsTimer.unref();
+	}
+	/** Stop periodic metrics emission. */
+	stopMetricsEmitter() {
+		if (this._metricsTimer) {
+			clearInterval(this._metricsTimer);
+			this._metricsTimer = null;
+		}
+	}
 	onFetchRequest(id, method, url, headers, body) {
 		const msg = {
 			type: "network:request",
@@ -247,6 +281,8 @@ var DevtoolsBridge = class {
 	}
 	onRender(container, dataUri) {
 		if (!this.server.hasClients()) return;
+		const profile = this._lastProfile;
+		this._lastProfile = null;
 		let actionId = null;
 		let meta = null;
 		for (const [id, m] of this.actions) if (m.root.vcontainer === container) {
@@ -256,30 +292,32 @@ var DevtoolsBridge = class {
 		}
 		if (actionId && meta) {
 			meta.root.lastDataUri = dataUri;
-			this.throttledRender(actionId, container, dataUri, meta);
+			this.throttledRender(actionId, container, dataUri, meta, profile);
 			if (this.highlightedActionId === actionId && this.highlightedNodeId !== null) this.applyHighlight(actionId, this.highlightedNodeId, meta).catch(() => {});
 			return;
 		}
-		for (const [deviceId, tb] of this.touchBars) if (tb.root.vcontainer === container) {
-			this.emitTouchBarRender(deviceId, tb);
+		for (const [deviceId, tb] of this.touchStrips) if (tb.root.vcontainer === container) {
+			this.emitTouchStripRender(deviceId, tb, profile);
+			const tbActionId = `${DevtoolsBridge.TB_PREFIX}${deviceId}`;
+			if (this.highlightedActionId === tbActionId && this.highlightedNodeId !== null) this.applyTouchStripHighlight(tbActionId, deviceId, this.highlightedNodeId, tb).catch(() => {});
 			return;
 		}
 	}
-	throttledRender(actionId, container, dataUri, meta) {
+	throttledRender(actionId, container, dataUri, meta, profile) {
 		const now = Date.now();
 		const elapsed = now - (this.lastRenderSent.get(actionId) ?? 0);
 		const pending = this.pendingTrailing.get(actionId);
 		if (pending) clearTimeout(pending);
 		if (elapsed >= RENDER_THROTTLE_MS) {
-			this.emitRender(actionId, container, dataUri, meta, now);
+			this.emitRender(actionId, container, dataUri, meta, now, profile);
 			this.lastRenderSent.set(actionId, now);
 		} else this.pendingTrailing.set(actionId, setTimeout(() => {
-			this.emitRender(actionId, container, dataUri, meta, Date.now());
+			this.emitRender(actionId, container, dataUri, meta, Date.now(), profile);
 			this.lastRenderSent.set(actionId, Date.now());
 			this.pendingTrailing.delete(actionId);
 		}, RENDER_THROTTLE_MS - elapsed));
 	}
-	emitRender(actionId, container, dataUri, meta, ts) {
+	emitRender(actionId, container, dataUri, meta, ts, profile) {
 		const tree = serializeVNode(container);
 		const msg = {
 			type: "render",
@@ -293,11 +331,26 @@ var DevtoolsBridge = class {
 			},
 			tree,
 			dataUri,
-			renderMs: 0
+			renderMs: profile?.totalMs ?? 0,
+			...profile ? { profile: this.toProfileData(profile) } : {}
 		};
 		this.server.broadcast(msg);
 	}
-	emitTouchBarRender(deviceId, tb) {
+	/** Convert internal RenderProfile to wire-protocol ProfileData. */
+	toProfileData(profile) {
+		return {
+			vnodeConversionMs: profile.vnodeConversionMs,
+			takumiRenderMs: profile.takumiRenderMs,
+			hashMs: profile.hashMs,
+			base64Ms: profile.base64Ms,
+			totalMs: profile.totalMs,
+			skipped: profile.skipped,
+			cacheHit: profile.cacheHit,
+			treeDepth: profile.treeDepth,
+			nodeCount: profile.nodeCount
+		};
+	}
+	emitTouchStripRender(deviceId, tb, profile) {
 		const tree = serializeVNode(tb.root.vcontainer);
 		const segments = [];
 		for (const [column, actionId] of tb.columns) {
@@ -309,7 +362,7 @@ var DevtoolsBridge = class {
 			});
 		}
 		const msg = {
-			type: "render:touchbar",
+			type: "render:touchStrip",
 			ts: Date.now(),
 			deviceId,
 			canvas: {
@@ -318,46 +371,72 @@ var DevtoolsBridge = class {
 			},
 			tree,
 			segments,
-			renderMs: 0
+			renderMs: profile?.totalMs ?? 0,
+			...profile ? { profile: this.toProfileData(profile) } : {}
 		};
 		this.server.broadcast(msg);
 	}
+	static TB_PREFIX = "touchStrip:";
 	async handleHighlight(actionId, nodeId) {
 		try {
 			const prevId = this.highlightedActionId;
 			this.highlightedActionId = actionId;
 			this.highlightedNodeId = nodeId;
 			if (prevId && prevId !== actionId) {
-				const prevMeta = this.actions.get(prevId);
-				if (prevMeta) {
-					prevMeta.root.suppressHardwarePush = false;
-					if (prevMeta.root.lastDataUri) await prevMeta.root.pushImage(prevMeta.root.lastDataUri).catch(() => {});
-				}
-				this.broadcastHighlightRender(prevId, null);
+				await this.restoreHighlight(prevId);
+				this.broadcastHighlightClear(prevId);
 			}
 			if (!actionId || nodeId === null) {
 				if (actionId && prevId === actionId) {
-					const meta = this.actions.get(actionId);
-					if (meta) {
-						meta.root.suppressHardwarePush = false;
-						if (meta.root.lastDataUri) await meta.root.pushImage(meta.root.lastDataUri).catch(() => {});
-					}
-					this.broadcastHighlightRender(actionId, null);
+					await this.restoreHighlight(actionId);
+					this.broadcastHighlightClear(actionId);
 				}
 				this.highlightedActionId = null;
 				this.highlightedNodeId = null;
 				return;
 			}
-			const meta = this.actions.get(actionId);
-			if (!meta) {
-				this.highlightedActionId = null;
-				this.highlightedNodeId = null;
-				return;
+			if (actionId.startsWith(DevtoolsBridge.TB_PREFIX)) {
+				const deviceId = actionId.slice(DevtoolsBridge.TB_PREFIX.length);
+				const tb = this.touchStrips.get(deviceId);
+				if (!tb) {
+					this.highlightedActionId = null;
+					this.highlightedNodeId = null;
+					return;
+				}
+				tb.root.suppressHardwarePush = true;
+				await this.applyTouchStripHighlight(actionId, deviceId, nodeId, tb);
+			} else {
+				const meta = this.actions.get(actionId);
+				if (!meta) {
+					this.highlightedActionId = null;
+					this.highlightedNodeId = null;
+					return;
+				}
+				meta.root.suppressHardwarePush = true;
+				await this.applyHighlight(actionId, nodeId, meta);
 			}
-			meta.root.suppressHardwarePush = true;
-			await this.applyHighlight(actionId, nodeId, meta);
 		} catch {}
 	}
+	/**
+	* Restore a highlighted action or TouchStrip to its normal state.
+	* Un-suppresses hardware pushes and restores the original image(s).
+	*/
+	async restoreHighlight(id) {
+		if (id.startsWith(DevtoolsBridge.TB_PREFIX)) {
+			const deviceId = id.slice(DevtoolsBridge.TB_PREFIX.length);
+			const tb = this.touchStrips.get(deviceId);
+			if (tb) {
+				tb.root.suppressHardwarePush = false;
+				await tb.root.pushSegmentImages(tb.root.lastSegmentUris);
+			}
+		} else {
+			const prevMeta = this.actions.get(id);
+			if (prevMeta) {
+				prevMeta.root.suppressHardwarePush = false;
+				if (prevMeta.root.lastDataUri) await prevMeta.root.pushImage(prevMeta.root.lastDataUri).catch(() => {});
+			}
+		}
+	}
 	async applyHighlight(actionId, nodeId, meta) {
 		try {
 			const uri = await renderWithHighlight(meta.root.vcontainer, meta.canvas.width, meta.canvas.height, this.renderConfig, nodeId);
@@ -367,6 +446,20 @@ var DevtoolsBridge = class {
 			}
 		} catch {}
 	}
+	async applyTouchStripHighlight(actionId, deviceId, nodeId, tb) {
+		try {
+			const columns = tb.root.columnNumbers;
+			if (columns.length === 0) return;
+			const segmentWidth = 200;
+			const segmentHeight = 100;
+			const fullWidth = (Math.max(...columns) + 1) * segmentWidth;
+			const result = await renderTouchStripWithHighlight(tb.root.vcontainer, fullWidth, segmentHeight, columns, segmentWidth, this.renderConfig, nodeId);
+			if (result && this.highlightedActionId === actionId && this.highlightedNodeId === nodeId) {
+				await tb.root.pushSegmentImages(result.segmentUris);
+				for (const [col, uri] of result.segmentUris) this.broadcastHighlightRender(`${actionId}:seg:${col}`, uri);
+			}
+		} catch {}
+	}
 	/** Broadcast highlight render image (or null to clear) to devtools UI. */
 	broadcastHighlightRender(actionId, dataUri) {
 		const msg = {
@@ -377,6 +470,18 @@ var DevtoolsBridge = class {
 		};
 		this.server.broadcast(msg);
 	}
+	/**
+	* Clear highlight URIs for the given actionId.
+	* For TouchStrip IDs, clears all per-segment keys (touchStrip:*:seg:N).
+	* For regular actions, clears the single actionId key.
+	*/
+	broadcastHighlightClear(id) {
+		if (id.startsWith(DevtoolsBridge.TB_PREFIX)) {
+			const deviceId = id.slice(DevtoolsBridge.TB_PREFIX.length);
+			const tb = this.touchStrips.get(deviceId);
+			if (tb) for (const col of tb.root.columnNumbers) this.broadcastHighlightRender(`${id}:seg:${col}`, null);
+		} else this.broadcastHighlightRender(id, null);
+	}
 	buildSnapshot() {
 		const actions = [];
 		for (const [actionId, meta] of this.actions) {
@@ -402,8 +507,8 @@ var DevtoolsBridge = class {
 				dataUri: meta.root.lastDataUri
 			});
 		}
-		const touchBars = [];
-		for (const [deviceId, tb] of this.touchBars) {
+		const touchStrips = [];
+		for (const [deviceId, tb] of this.touchStrips) {
 			let tree = null;
 			try {
 				tree = serializeVNode(tb.root.vcontainer);
@@ -414,7 +519,7 @@ var DevtoolsBridge = class {
 				actionId,
 				dataUri: tb.root.lastSegmentUris.get(column) ?? null
 			});
-			touchBars.push({
+			touchStrips.push({
 				deviceId,
 				deviceName: tb.deviceInfo.name,
 				canvas: {
@@ -429,10 +534,11 @@ var DevtoolsBridge = class {
 			type: "snapshot",
 			ts: Date.now(),
 			actions,
-			touchBars,
+			touchStrips,
 			recentConsole: this.consoleRing.toArray(),
 			recentNetwork: this.networkRing.toArray(),
-			recentEvents: this.eventRing.toArray()
+			recentEvents: this.eventRing.toArray(),
+			metrics: metrics.snapshot()
 		};
 	}
 };

package/dist/devtools/highlight.d.ts

@@ -1,3 +1,8 @@
 import { VContainer } from '../reconciler/vnode';
 import { RenderConfig } from '../render/pipeline';
 export declare function renderWithHighlight(container: VContainer, width: number, height: number, config: RenderConfig, targetNid: number): Promise<string | null>;
+export interface TouchStripHighlightResult {
+    /** Per-column data URIs for ALL segments. */
+    segmentUris: Map<number, string>;
+}
+export declare function renderTouchStripWithHighlight(container: VContainer, fullWidth: number, segmentHeight: number, columns: number[], segmentWidth: number, config: RenderConfig, targetNid: number): Promise<TouchStripHighlightResult | null>;

package/dist/devtools/highlight.js

@@ -1,92 +1,142 @@
-import { vnodeToElement } from "../reconciler/vnode.js";
-import { bufferToDataUri } from "../render/pipeline.js";
-import { createElement } from "react";
-import { fromJsx } from "@takumi-rs/helpers/jsx";
+import { bufferToDataUri, buildTakumiRoot } from "../render/pipeline.js";
 //#region src/devtools/highlight.ts
-var HIGHLIGHT_BORDER_COLOR = "rgba(111, 168, 220, 0.85)";
-var HIGHLIGHT_BORDER_WIDTH = 2;
 var HIGHLIGHT_BG = "rgba(111, 168, 220, 0.66)";
-var HIGHLIGHT_BOX_SHADOW = `inset 0 0 0 ${HIGHLIGHT_BORDER_WIDTH}px ${HIGHLIGHT_BORDER_COLOR}`;
+var HIGHLIGHT_BOX_SHADOW = `inset 0 0 0 2px rgba(111, 168, 220, 0.85)`;
 async function renderWithHighlight(container, width, height, config, targetNid) {
 	if (container.children.length === 0) return null;
 	const effectiveNid = resolveTargetNid(container, targetNid);
-	const rootChildren = container.children.map(vnodeToElement);
-	const { node, stylesheets } = await fromJsx(createElement("div", { style: {
-		display: "flex",
-		position: "relative",
-		width: "100%",
-		height: "100%"
-	} }, ...rootChildren));
-	const renderOpts = {
+	const rootNode = buildTakumiRoot(container);
+	const counter = { value: 0 };
+	counter.value++;
+	const target = findTargetTakumiNode(container.children, rootNode.children ?? [], effectiveNid, counter);
+	if (!target) return null;
+	injectHighlightOverlay(target);
+	return bufferToDataUri(await config.renderer.render(rootNode, {
 		width,
 		height,
-		stylesheets,
+		format: config.imageFormat,
 		devicePixelRatio: config.devicePixelRatio
-	};
-	const measured = await config.renderer.measure(node, renderOpts);
+	}), config.imageFormat);
+}
+var TOUCHSTRIP_HIGHLIGHT_FORMAT = "png";
+async function renderTouchStripWithHighlight(container, fullWidth, segmentHeight, columns, segmentWidth, config, targetNid) {
+	if (container.children.length === 0) return null;
+	const effectiveNid = resolveTargetNid(container, targetNid);
+	const rootNode = buildTakumiRoot(container);
 	const counter = { value: 0 };
 	counter.value++;
-	const bounds = findTargetBounds(container.children, measured.children, effectiveNid, counter, measured.transform[4], measured.transform[5]);
-	if (!bounds) return null;
-	const overlay = createElement("div", { style: {
-		position: "absolute",
-		top: bounds.y,
-		left: bounds.x,
-		width: bounds.width,
-		height: bounds.height,
-		backgroundColor: HIGHLIGHT_BG,
-		boxShadow: HIGHLIGHT_BOX_SHADOW
-	} });
-	const { node: hlNode, stylesheets: hlStylesheets } = await fromJsx(createElement("div", { style: {
-		display: "flex",
-		position: "relative",
-		width: "100%",
-		height: "100%"
-	} }, ...rootChildren, overlay));
-	return bufferToDataUri(await config.renderer.render(hlNode, {
-		...renderOpts,
-		format: config.imageFormat,
-		stylesheets: hlStylesheets
-	}), config.imageFormat);
+	const target = findTargetTakumiNode(container.children, rootNode.children ?? [], effectiveNid, counter);
+	if (!target) return null;
+	injectHighlightOverlay(target);
+	const segmentUris = /* @__PURE__ */ new Map();
+	const segmentPromises = columns.map(async (column) => {
+		const clipNode = {
+			type: "container",
+			style: {
+				width: segmentWidth,
+				height: segmentHeight,
+				overflow: "hidden"
+			},
+			children: [{
+				type: "container",
+				style: {
+					display: "flex",
+					width: fullWidth,
+					height: segmentHeight,
+					marginLeft: -(column * segmentWidth)
+				},
+				children: rootNode.children
+			}]
+		};
+		const segBuffer = await config.renderer.render(clipNode, {
+			width: segmentWidth,
+			height: segmentHeight,
+			format: TOUCHSTRIP_HIGHLIGHT_FORMAT,
+			devicePixelRatio: config.devicePixelRatio
+		});
+		segmentUris.set(column, bufferToDataUri(segBuffer, TOUCHSTRIP_HIGHLIGHT_FORMAT));
+	});
+	await Promise.all(segmentPromises);
+	return { segmentUris };
 }
-function findTargetBounds(vnodes, measuredChildren, targetNid, counter, parentX, parentY) {
-	let measuredIdx = 0;
+function injectHighlightOverlay(target) {
+	const node = target.node;
+	const overlay = {
+		type: "container",
+		style: {
+			position: "absolute",
+			top: 0,
+			left: 0,
+			width: "100%",
+			height: "100%",
+			backgroundColor: HIGHLIGHT_BG,
+			boxShadow: HIGHLIGHT_BOX_SHADOW
+		}
+	};
+	if (node.type === "container") {
+		node.style = {
+			...node.style ?? {},
+			position: "relative"
+		};
+		if (!node.children) node.children = [];
+		node.children.push(overlay);
+	} else {
+		const wrapper = {
+			type: "container",
+			style: { position: "relative" },
+			children: [target.node, overlay]
+		};
+		target.parentChildren[target.indexInParent] = wrapper;
+	}
+}
+function findTargetTakumiNode(vnodes, takumiNodes, targetNid, counter) {
+	let idx = 0;
 	for (const vnode of vnodes) {
 		const nid = counter.value++;
-		if (vnode.type === "#text") continue;
-		const measured = measuredChildren[measuredIdx++];
-		if (!measured) continue;
-		const absX = parentX + measured.transform[4];
-		const absY = parentY + measured.transform[5];
+		const takumiNode = takumiNodes[idx];
+		idx++;
+		if (!takumiNode) continue;
 		if (nid === targetNid) return {
-			x: absX,
-			y: absY,
-			width: measured.width,
-			height: measured.height
+			node: takumiNode,
+			parentChildren: takumiNodes,
+			indexInParent: idx - 1
 		};
-		const found = findTargetBounds(vnode.children, measured.children, targetNid, counter, absX, absY);
+		if (vnode.type === "#text" || vnode.type === "img") continue;
+		if (vnode.type === "svg") {
+			advanceCounterThroughSubtree(vnode.children, counter);
+			continue;
+		}
+		const childTakumiNodes = takumiNode.children ?? [];
+		const found = findTargetTakumiNode(vnode.children, childTakumiNodes, targetNid, counter);
 		if (found) return found;
 	}
 	return null;
 }
+function advanceCounterThroughSubtree(vnodes, counter) {
+	for (const node of vnodes) {
+		counter.value++;
+		advanceCounterThroughSubtree(node.children, counter);
+	}
+}
 function resolveTargetNid(container, targetNid) {
 	const counter = { value: 0 };
 	counter.value++;
 	for (const child of container.children) {
-		const resolved = resolveInSubtree(child, targetNid, counter, 0);
+		const resolved = resolveInSubtree(child, targetNid, counter, 0, false);
 		if (resolved !== null) return resolved;
 	}
 	return targetNid;
 }
-function resolveInSubtree(node, targetNid, counter, parentNid) {
+function resolveInSubtree(node, targetNid, counter, parentNid, insideSvg) {
 	const nid = counter.value++;
-	if (nid === targetNid) return node.type === "#text" ? parentNid : nid;
+	if (nid === targetNid) return node.type === "#text" || insideSvg ? parentNid : nid;
 	if (node.type === "#text") return null;
+	const childInsideSvg = insideSvg || node.type === "svg";
 	for (const child of node.children) {
-		const resolved = resolveInSubtree(child, targetNid, counter, nid);
+		const resolved = resolveInSubtree(child, targetNid, counter, nid, childInsideSvg);
 		if (resolved !== null) return resolved;
 	}
 	return null;
 }
 //#endregion
-export { renderWithHighlight };
+export { renderTouchStripWithHighlight, renderWithHighlight };

package/dist/devtools/index.js

@@ -11,6 +11,9 @@ function startDevtoolsServer(config) {
 	config.renderConfig.onRender = (container, dataUri) => {
 		bridge.onRender(container, dataUri);
 	};
+	config.renderConfig.onProfile = (profile) => {
+		bridge.onProfile(profile);
+	};
 	EventBus.devtoolsObserver = (bus, event, payload) => {
 		bridge.onEventBusEmit(bus, event, payload);
 	};
@@ -23,12 +26,15 @@ function startDevtoolsServer(config) {
 		onError: (id, error, dur) => bridge.onFetchError(id, error, dur)
 	});
 	server.start();
+	bridge.startMetricsEmitter();
 	process.on("exit", () => {
+		bridge.stopMetricsEmitter();
 		restoreConsole();
 		restoreFetch();
 		EventBus.devtoolsObserver = null;
 		config.registry.observer = null;
 		config.renderConfig.onRender = void 0;
+		config.renderConfig.onProfile = void 0;
 		server.stop();
 	});
 }