@fcannizzaro/streamdeck-react 0.1.10 → 0.1.12

package/dist/roots/root.js

@@ -1,8 +1,9 @@
-import { createVContainer } from "../reconciler/vnode.js";
+import { clearDirtyFlags, createVContainer } from "../reconciler/vnode.js";
 import { reconciler } from "../reconciler/renderer.js";
 import { renderToDataUri } from "../render/pipeline.js";
 import { EventBus } from "../context/event-bus.js";
 import { ActionContext, CanvasContext, DeviceContext, EventBusContext, GlobalSettingsContext, SettingsContext, StreamDeckContext } from "../context/providers.js";
+import { partialHasChanges, shallowEqualSettings } from "./settings-equality.js";
 import { createElement } from "react";
 //#region src/roots/root.ts
 var DEFAULT_DIAL_LAYOUT = {
@@ -18,7 +19,7 @@ var DEFAULT_DIAL_LAYOUT = {
 		]
 	}]
 };
-var ReactRoot = class {
+var ReactRoot = class ReactRoot {
 	eventBus = new EventBus();
 	container;
 	fiberRoot;
@@ -26,13 +27,16 @@ var ReactRoot = class {
 	globalSettings;
 	setSettingsFn;
 	setGlobalSettingsFn;
-	renderDebounceMs;
+	renderDebounceMs = 17;
 	renderConfig;
 	canvas;
 	resolvedDialLayout;
-	sdkAction;
-	sdkInstance;
+	action;
+	adapter;
 	disposed = false;
+	_renderCount = 0;
+	_lastRenderReport = 0;
+	static RENDER_WARN_THRESHOLD = 30;
 	/** Last data URI successfully sent to hardware. Used by devtools snapshots. */
 	lastDataUri = null;
 	/**
@@ -45,16 +49,12 @@ var ReactRoot = class {
 	/** Push an arbitrary data URI to the hardware. Used by devtools highlight overlay. */
 	async pushImage(dataUri) {
 		if (this.disposed) return;
-		if (this.canvas.type === "key") {
-			if ("setImage" in this.sdkAction) await this.sdkAction.setImage(dataUri);
-		} else if (this.canvas.type === "dial") {
-			if ("setFeedback" in this.sdkAction) await this.sdkAction.setFeedback({
-				canvas: dataUri,
-				title: ""
-			});
-		} else if (this.canvas.type === "touch") {
-			if ("setFeedback" in this.sdkAction) await this.sdkAction.setFeedback({ canvas: dataUri });
-		}
+		if (this.canvas.type === "key") await this.action.setImage(dataUri);
+		else if (this.canvas.type === "dial") await this.action.setFeedback({
+			canvas: dataUri,
+			title: ""
+		});
+		else if (this.canvas.type === "touch") await this.action.setFeedback({ canvas: dataUri });
 	}
 	/** Exposes the VContainer for devtools inspection. */
 	get vcontainer() {
@@ -63,7 +63,7 @@ var ReactRoot = class {
 	streamDeckValue;
 	settingsValue;
 	globalSettingsValue;
-	constructor(component, actionInfo, deviceInfo, canvas, initialSettings, initialGlobalSettings, sdkAction, sdkInstance, renderConfig, renderDebounceMs, onSettingsChange, onGlobalSettingsChange, pluginWrapper, actionWrapper, dialLayout) {
+	constructor(component, actionInfo, deviceInfo, canvas, initialSettings, initialGlobalSettings, action, adapter, renderConfig, onSettingsChange, onGlobalSettingsChange, pluginWrapper, actionWrapper, dialLayout) {
 		this.component = component;
 		this.actionInfo = actionInfo;
 		this.deviceInfo = deviceInfo;
@@ -72,38 +72,43 @@ var ReactRoot = class {
 		this.canvas = canvas;
 		this.settings = { ...initialSettings };
 		this.globalSettings = { ...initialGlobalSettings };
-		this.sdkAction = sdkAction;
-		this.sdkInstance = sdkInstance;
+		this.action = action;
+		this.adapter = adapter;
 		this.renderConfig = renderConfig;
-		this.renderDebounceMs = renderDebounceMs;
 		this.resolvedDialLayout = resolveDialLayout(dialLayout);
 		this.setSettingsFn = (partial) => {
-			this.settings = {
+			const hasChanges = partialHasChanges(this.settings, partial);
+			const nextSettings = hasChanges ? {
 				...this.settings,
 				...partial
-			};
+			} : this.settings;
+			onSettingsChange(nextSettings);
+			if (!hasChanges) return;
+			this.settings = nextSettings;
 			this.settingsValue = {
 				settings: this.settings,
 				setSettings: this.setSettingsFn
 			};
-			onSettingsChange(this.settings);
 			this.scheduleRerender();
 		};
 		this.setGlobalSettingsFn = (partial) => {
-			this.globalSettings = {
+			const hasChanges = partialHasChanges(this.globalSettings, partial);
+			const nextSettings = hasChanges ? {
 				...this.globalSettings,
 				...partial
-			};
+			} : this.globalSettings;
+			onGlobalSettingsChange(nextSettings);
+			if (!hasChanges) return;
+			this.globalSettings = nextSettings;
 			this.globalSettingsValue = {
 				settings: this.globalSettings,
 				setSettings: this.setGlobalSettingsFn
 			};
-			onGlobalSettingsChange(this.globalSettings);
 			this.scheduleRerender();
 		};
 		this.streamDeckValue = {
-			action: this.sdkAction,
-			sdk: this.sdkInstance
+			action: this.action,
+			adapter: this.adapter
 		};
 		this.settingsValue = {
 			settings: this.settings,
@@ -124,7 +129,8 @@ var ReactRoot = class {
 			console.error("[@fcannizzaro/streamdeck-react] Recoverable error:", err);
 		}, () => {});
 		if (canvas.type === "dial" || canvas.type === "touch") {
-			if ("setFeedbackLayout" in this.sdkAction) this.sdkAction.setFeedbackLayout(this.resolvedDialLayout);
+			const layout = this.resolvedDialLayout;
+			this.action.setFeedbackLayout(typeof layout === "string" ? layout : layout);
 		}
 		this.eventBus.ownerId = actionInfo.id;
 		this.eventBus.ownerUuid = actionInfo.uuid;
@@ -155,16 +161,32 @@ var ReactRoot = class {
 	}
 	async doFlush() {
 		if (this.disposed) return;
+		if (this.renderConfig.debug) {
+			this._renderCount++;
+			const now = Date.now();
+			if (now - this._lastRenderReport > 1e3) {
+				if (this._renderCount > ReactRoot.RENDER_WARN_THRESHOLD) console.warn(`[@fcannizzaro/streamdeck-react] Action ${this.actionInfo.id} rendered ${this._renderCount}x in 1s`);
+				this._renderCount = 0;
+				this._lastRenderReport = now;
+			}
+		}
 		try {
 			const dataUri = await renderToDataUri(this.container, this.canvas.width, this.canvas.height, this.renderConfig);
+			clearDirtyFlags(this.container);
 			if (dataUri === null || this.disposed) return;
 			this.lastDataUri = dataUri;
-			if (!this.suppressHardwarePush) await this.pushImage(dataUri);
+			if (!this.suppressHardwarePush) this.pushImage(dataUri).catch((err) => {
+				console.error("[@fcannizzaro/streamdeck-react] Hardware push error:", err);
+			});
 		} catch (err) {
 			console.error("[@fcannizzaro/streamdeck-react] Render error:", err);
 		}
 	}
 	updateSettings(settings) {
+		if (shallowEqualSettings(this.settings, settings)) {
+			this.eventBus.emit("settingsChanged", settings);
+			return;
+		}
 		this.settings = { ...settings };
 		this.settingsValue = {
 			settings: this.settings,
@@ -174,6 +196,7 @@ var ReactRoot = class {
 		this.scheduleRerender();
 	}
 	updateGlobalSettings(settings) {
+		if (shallowEqualSettings(this.globalSettings, settings)) return;
 		this.globalSettings = { ...settings };
 		this.globalSettingsValue = {
 			settings: this.globalSettings,

package/dist/roots/settings-equality.d.ts

@@ -0,0 +1,5 @@
+import { JsonObject } from '@elgato/utils';
+/** Returns true when applying `partial` would change at least one key in `current`. */
+export declare function partialHasChanges(current: JsonObject, partial: JsonObject): boolean;
+/** Shallow equality for full settings objects. */
+export declare function shallowEqualSettings(a: JsonObject, b: JsonObject): boolean;

package/dist/roots/settings-equality.js

@@ -0,0 +1,24 @@
+//#region src/roots/settings-equality.ts
+/** Returns true when applying `partial` would change at least one key in `current`. */
+function partialHasChanges(current, partial) {
+	const keys = Object.keys(partial);
+	for (let i = 0; i < keys.length; i++) {
+		const key = keys[i];
+		if (!Object.is(current[key], partial[key])) return true;
+	}
+	return false;
+}
+/** Shallow equality for full settings objects. */
+function shallowEqualSettings(a, b) {
+	const aKeys = Object.keys(a);
+	const bKeys = Object.keys(b);
+	if (aKeys.length !== bKeys.length) return false;
+	for (let i = 0; i < aKeys.length; i++) {
+		const key = aKeys[i];
+		if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+		if (!Object.is(a[key], b[key])) return false;
+	}
+	return true;
+}
+//#endregion
+export { partialHasChanges, shallowEqualSettings };

package/dist/roots/{touchbar-root.d.ts → touchstrip-root.d.ts}

@@ -3,9 +3,9 @@ import { VContainer } from '../reconciler/vnode';
 import { RenderConfig } from '../render/pipeline';
 import { EventBus } from '../context/event-bus';
 import { DeviceInfo, WrapperComponent } from '../types';
-import { DialAction } from '@elgato/streamdeck';
+import { AdapterActionHandle } from '../adapter/types';
 import { JsonObject } from '@elgato/utils';
-export declare class TouchBarRoot {
+export declare class TouchStripRoot {
     private component;
     readonly eventBus: EventBus;
     private container;
@@ -13,14 +13,36 @@ export declare class TouchBarRoot {
     private columns;
     private globalSettings;
     private setGlobalSettingsFn;
-    private renderDebounceMs;
     private renderConfig;
     private deviceInfo;
     private disposed;
-    private fps;
     private pluginWrapper?;
+    private readonly renderDebounceMs;
+    private _renderCount;
+    private _lastRenderReport;
+    private static readonly RENDER_WARN_THRESHOLD;
+    private _lastSegmentUriHash;
     /** Last rendered per-column data URIs. Used by devtools snapshots. */
     lastSegmentUris: Map<number, string>;
+    /**
+     * When true, doFlush skips pushing rendered segments to hardware.
+     * Set by the devtools bridge while a highlight overlay is active so
+     * that rapid re-renders don't overwrite the highlight on the device.
+     * The highlight path calls pushSegmentImages() directly (bypassing
+     * this flag).
+     *
+     * Mirrors ReactRoot.suppressHardwarePush — same pattern, different
+     * granularity (per-segment instead of single image).
+     */
+    suppressHardwarePush: boolean;
+    /**
+     * Push per-column data URIs to the physical Stream Deck touch strip.
+     * Used by the devtools highlight overlay to bypass suppressHardwarePush.
+     *
+     * @param uris  Map of column → data URI to push to hardware.
+     *              Columns not present in the map are left unchanged.
+     */
+    pushSegmentImages(uris: Map<number, string>): Promise<void>;
     /** Exposes the VContainer for devtools inspection. */
     get vcontainer(): VContainer;
     /** Sorted column numbers for devtools observer. */
@@ -28,13 +50,13 @@ export declare class TouchBarRoot {
     /** Column → actionId map for devtools observer. */
     get columnActionMap(): Map<number, string>;
     private globalSettingsValue;
-    private touchBarValue;
-    constructor(component: ComponentType, deviceInfo: DeviceInfo, initialGlobalSettings: JsonObject, renderConfig: RenderConfig, renderDebounceMs: number, onGlobalSettingsChange: (settings: JsonObject) => Promise<void>, pluginWrapper?: WrapperComponent, touchBarFPS?: number);
-    addColumn(column: number, actionId: string, sdkAction: DialAction): void;
+    private touchStripValue;
+    constructor(component: ComponentType, deviceInfo: DeviceInfo, initialGlobalSettings: JsonObject, renderConfig: RenderConfig, onGlobalSettingsChange: (settings: JsonObject) => Promise<void>, pluginWrapper?: WrapperComponent);
+    addColumn(column: number, actionId: string, sdkAction: AdapterActionHandle): void;
     removeColumn(column: number): void;
     get isEmpty(): boolean;
     findColumnByActionId(actionId: string): number | undefined;
-    private updateTouchBarInfo;
+    private updateTouchStripInfo;
     private render;
     private buildTree;
     private scheduleRerender;

package/dist/roots/touchstrip-root.js

@@ -0,0 +1,263 @@
+import { clearDirtyFlags, createVContainer, isContainerDirty } from "../reconciler/vnode.js";
+import { reconciler } from "../reconciler/renderer.js";
+import { computeTouchStripSegmentCacheKey, computeTreeHash, fnv1a } from "../render/cache.js";
+import { getTouchStripSegmentCache } from "../render/image-cache.js";
+import { measureTree, renderToRaw, sliceToDataUri } from "../render/pipeline.js";
+import { EventBus } from "../context/event-bus.js";
+import { DeviceContext, EventBusContext, GlobalSettingsContext } from "../context/providers.js";
+import { partialHasChanges, shallowEqualSettings } from "./settings-equality.js";
+import { TouchStripContext } from "../context/touchstrip-context.js";
+import { createElement } from "react";
+//#region src/roots/touchstrip-root.ts
+var SEGMENT_WIDTH = 200;
+var SEGMENT_HEIGHT = 100;
+var DEFAULT_TOUCH_STRIP_FPS = 30;
+var TouchStripRoot = class TouchStripRoot {
+	eventBus = new EventBus();
+	container;
+	fiberRoot;
+	columns = /* @__PURE__ */ new Map();
+	globalSettings;
+	setGlobalSettingsFn;
+	renderConfig;
+	deviceInfo;
+	disposed = false;
+	pluginWrapper;
+	renderDebounceMs = 17;
+	_renderCount = 0;
+	_lastRenderReport = 0;
+	static RENDER_WARN_THRESHOLD = 35;
+	_lastSegmentUriHash = 0;
+	/** Last rendered per-column data URIs. Used by devtools snapshots. */
+	lastSegmentUris = /* @__PURE__ */ new Map();
+	/**
+	* When true, doFlush skips pushing rendered segments to hardware.
+	* Set by the devtools bridge while a highlight overlay is active so
+	* that rapid re-renders don't overwrite the highlight on the device.
+	* The highlight path calls pushSegmentImages() directly (bypassing
+	* this flag).
+	*
+	* Mirrors ReactRoot.suppressHardwarePush — same pattern, different
+	* granularity (per-segment instead of single image).
+	*/
+	suppressHardwarePush = false;
+	/**
+	* Push per-column data URIs to the physical Stream Deck touch strip.
+	* Used by the devtools highlight overlay to bypass suppressHardwarePush.
+	*
+	* @param uris  Map of column → data URI to push to hardware.
+	*              Columns not present in the map are left unchanged.
+	*/
+	async pushSegmentImages(uris) {
+		if (this.disposed) return;
+		const promises = [];
+		for (const [column, uri] of uris) {
+			const entry = this.columns.get(column);
+			if (entry) promises.push(entry.sdkAction.setFeedback({ canvas: uri }).catch(() => {}));
+		}
+		await Promise.all(promises);
+	}
+	/** Exposes the VContainer for devtools inspection. */
+	get vcontainer() {
+		return this.container;
+	}
+	/** Sorted column numbers for devtools observer. */
+	get columnNumbers() {
+		return [...this.columns.keys()].sort((a, b) => a - b);
+	}
+	/** Column → actionId map for devtools observer. */
+	get columnActionMap() {
+		const map = /* @__PURE__ */ new Map();
+		for (const [col, entry] of this.columns) map.set(col, entry.actionId);
+		return map;
+	}
+	globalSettingsValue;
+	touchStripValue;
+	constructor(component, deviceInfo, initialGlobalSettings, renderConfig, onGlobalSettingsChange, pluginWrapper) {
+		this.component = component;
+		this.deviceInfo = deviceInfo;
+		this.globalSettings = { ...initialGlobalSettings };
+		this.renderConfig = renderConfig;
+		this.pluginWrapper = pluginWrapper;
+		this.setGlobalSettingsFn = (partial) => {
+			const hasChanges = partialHasChanges(this.globalSettings, partial);
+			const nextSettings = hasChanges ? {
+				...this.globalSettings,
+				...partial
+			} : this.globalSettings;
+			onGlobalSettingsChange(nextSettings);
+			if (!hasChanges) return;
+			this.globalSettings = nextSettings;
+			this.globalSettingsValue = {
+				settings: this.globalSettings,
+				setSettings: this.setGlobalSettingsFn
+			};
+			this.scheduleRerender();
+		};
+		this.globalSettingsValue = {
+			settings: this.globalSettings,
+			setSettings: this.setGlobalSettingsFn
+		};
+		this.touchStripValue = {
+			width: 0,
+			height: SEGMENT_HEIGHT,
+			columns: [],
+			segmentWidth: SEGMENT_WIDTH
+		};
+		this.container = createVContainer(() => {
+			this.flush();
+		});
+		this.fiberRoot = reconciler.createContainer(this.container, 0, null, false, null, "", (err) => {
+			console.error("[@fcannizzaro/streamdeck-react] TouchStrip uncaught error:", err);
+		}, (err) => {
+			console.error("[@fcannizzaro/streamdeck-react] TouchStrip caught error:", err);
+		}, (err) => {
+			console.error("[@fcannizzaro/streamdeck-react] TouchStrip recoverable error:", err);
+		}, () => {});
+		this.eventBus.ownerId = `touchStrip:${deviceInfo.id}`;
+	}
+	addColumn(column, actionId, sdkAction) {
+		this.columns.set(column, {
+			actionId,
+			sdkAction
+		});
+		this.updateTouchStripInfo();
+		this.scheduleRerender();
+	}
+	removeColumn(column) {
+		this.columns.delete(column);
+		if (this.columns.size === 0) return;
+		this.updateTouchStripInfo();
+		this.scheduleRerender();
+	}
+	get isEmpty() {
+		return this.columns.size === 0;
+	}
+	findColumnByActionId(actionId) {
+		for (const [column, entry] of this.columns) if (entry.actionId === actionId) return column;
+	}
+	updateTouchStripInfo() {
+		const sortedColumns = [...this.columns.keys()].sort((a, b) => a - b);
+		this.touchStripValue = {
+			width: (sortedColumns.length > 0 ? sortedColumns[sortedColumns.length - 1] + 1 : 0) * SEGMENT_WIDTH,
+			height: SEGMENT_HEIGHT,
+			columns: sortedColumns,
+			segmentWidth: SEGMENT_WIDTH
+		};
+	}
+	render() {
+		if (this.disposed) return;
+		const element = this.buildTree();
+		reconciler.updateContainer(element, this.fiberRoot, null, () => {});
+	}
+	buildTree() {
+		let child = createElement(this.component);
+		if (this.pluginWrapper) child = createElement(this.pluginWrapper, null, child);
+		return createElement(TouchStripContext.Provider, { value: this.touchStripValue }, createElement(DeviceContext.Provider, { value: this.deviceInfo }, createElement(EventBusContext.Provider, { value: this.eventBus }, createElement(GlobalSettingsContext.Provider, { value: this.globalSettingsValue }, child))));
+	}
+	scheduleRerender() {
+		if (this.disposed) return;
+		this.render();
+	}
+	async flush() {
+		if (this.disposed) return;
+		if (this.renderDebounceMs > 0) this.container.renderTimer = setTimeout(async () => {
+			this.container.renderTimer = null;
+			await this.doFlush();
+		}, this.renderDebounceMs);
+		else await this.doFlush();
+	}
+	async doFlush() {
+		if (this.disposed || this.columns.size === 0) return;
+		if (this.renderConfig.debug) {
+			this._renderCount++;
+			const now = Date.now();
+			if (now - this._lastRenderReport > 1e3) {
+				if (this._renderCount > TouchStripRoot.RENDER_WARN_THRESHOLD) console.warn(`[@fcannizzaro/streamdeck-react] TouchStrip rendered ${this._renderCount}x in 1s (max ${DEFAULT_TOUCH_STRIP_FPS}fps)`);
+				this._renderCount = 0;
+				this._lastRenderReport = now;
+			}
+		}
+		try {
+			const width = this.touchStripValue.width;
+			if (width === 0) return;
+			if (this.renderConfig.caching && !isContainerDirty(this.container)) return;
+			const sortedColumns = [...this.columns.keys()].sort((a, b) => a - b);
+			let cacheKey;
+			const profiling = this.renderConfig.onProfile != null;
+			const tPhase2 = profiling ? performance.now() : 0;
+			if (this.renderConfig.caching && this.renderConfig.touchStripCacheMaxBytes > 0) {
+				cacheKey = computeTouchStripSegmentCacheKey(computeTreeHash(this.container), width, SEGMENT_HEIGHT, this.renderConfig.devicePixelRatio, sortedColumns);
+				const cached = getTouchStripSegmentCache(this.renderConfig.touchStripCacheMaxBytes).get(cacheKey);
+				if (cached !== void 0) {
+					for (const [column, uri] of cached) this.lastSegmentUris.set(column, uri);
+					if (!this.suppressHardwarePush) for (const [column, uri] of cached) this.columns.get(column)?.sdkAction.setFeedback({ canvas: uri }).catch(() => {});
+					clearDirtyFlags(this.container);
+					if (profiling) {
+						const tEnd = performance.now();
+						const stats = measureTree(this.container.children);
+						this.renderConfig.onProfile({
+							vnodeConversionMs: 0,
+							takumiRenderMs: 0,
+							hashMs: tEnd - tPhase2,
+							base64Ms: 0,
+							totalMs: tEnd - tPhase2,
+							skipped: false,
+							cacheHit: true,
+							treeDepth: stats.depth,
+							nodeCount: stats.count,
+							cacheStats: null
+						});
+					}
+					this.renderConfig.onRender?.(this.container, "");
+					return;
+				}
+			}
+			const result = await renderToRaw(this.container, width, SEGMENT_HEIGHT, this.renderConfig);
+			if (result === null || this.disposed) return;
+			const segmentResults = [];
+			for (const [column] of this.columns) {
+				const sliceUri = sliceToDataUri(result.buffer, result.width, result.height, column, SEGMENT_WIDTH, SEGMENT_HEIGHT);
+				segmentResults.push([column, sliceUri]);
+				this.lastSegmentUris.set(column, sliceUri);
+			}
+			segmentResults.sort((a, b) => a[0] - b[0]);
+			let skipped = false;
+			if (this.renderConfig.caching) {
+				const uriHash = fnv1a(segmentResults.map(([col, uri]) => `${col}:${uri}`).join("\0"));
+				if (uriHash === this._lastSegmentUriHash) skipped = true;
+				else this._lastSegmentUriHash = uriHash;
+			}
+			if (!skipped && !this.suppressHardwarePush) for (const [column, uri] of segmentResults) this.columns.get(column)?.sdkAction.setFeedback({ canvas: uri }).catch(() => {});
+			if (cacheKey !== void 0 && this.renderConfig.caching && this.renderConfig.touchStripCacheMaxBytes > 0) {
+				const cache = getTouchStripSegmentCache(this.renderConfig.touchStripCacheMaxBytes);
+				let byteSize = 64;
+				for (const [, uri] of segmentResults) byteSize += uri.length * 2 + 16;
+				cache.set(cacheKey, segmentResults, byteSize);
+			}
+			clearDirtyFlags(this.container);
+			this.renderConfig.onRender?.(this.container, "");
+		} catch (err) {
+			console.error("[@fcannizzaro/streamdeck-react] TouchStrip render error:", err);
+		}
+	}
+	updateGlobalSettings(settings) {
+		if (shallowEqualSettings(this.globalSettings, settings)) return;
+		this.globalSettings = { ...settings };
+		this.globalSettingsValue = {
+			settings: this.globalSettings,
+			setSettings: this.setGlobalSettingsFn
+		};
+		this.scheduleRerender();
+	}
+	unmount() {
+		this.disposed = true;
+		if (this.container.renderTimer !== null) clearTimeout(this.container.renderTimer);
+		this.eventBus.emit("willDisappear", void 0);
+		reconciler.updateContainer(null, this.fiberRoot, null, () => {});
+		this.eventBus.removeAllListeners();
+		this.columns.clear();
+	}
+};
+//#endregion
+export { TouchStripRoot };