@fcannizzaro/streamdeck-react 0.1.11 → 0.1.13

package/dist/roots/registry.js

@@ -1,49 +1,48 @@
 import { shallowEqualSettings } from "./settings-equality.js";
 import { ReactRoot } from "./root.js";
 import { TouchStripRoot } from "./touchstrip-root.js";
-import { FlushCoordinator } from "./flush-coordinator.js";
 //#region src/roots/registry.ts
 var SEGMENT_WIDTH = 200;
 var KEY_SIZES = {
 	0: {
-		width: 72,
-		height: 72
+		width: 144,
+		height: 144
 	},
 	1: {
-		width: 80,
-		height: 80
+		width: 144,
+		height: 144
 	},
 	2: {
-		width: 96,
-		height: 96
+		width: 144,
+		height: 144
 	},
 	3: {
-		width: 72,
-		height: 72
+		width: 144,
+		height: 144
 	},
 	4: {
-		width: 72,
-		height: 72
+		width: 144,
+		height: 144
 	},
 	5: {
-		width: 72,
-		height: 72
+		width: 144,
+		height: 144
 	},
 	6: {
-		width: 72,
-		height: 72
+		width: 144,
+		height: 144
 	},
 	7: {
 		width: 144,
 		height: 144
 	},
 	8: {
-		width: 72,
-		height: 72
+		width: 144,
+		height: 144
 	},
 	9: {
-		width: 72,
-		height: 72
+		width: 144,
+		height: 144
 	},
 	10: {
 		width: 144,
@@ -73,29 +72,26 @@ function getCanvasInfo(deviceType, surfaceType) {
 	};
 	return {
 		...KEY_SIZES[deviceType] ?? {
-			width: 72,
-			height: 72
+			width: 144,
+			height: 144
 		},
 		type: "key"
 	};
 }
-var RootRegistry = class RootRegistry {
+var RootRegistry = class {
 	roots = /* @__PURE__ */ new Map();
 	touchStripRoots = /* @__PURE__ */ new Map();
 	touchStripActions = /* @__PURE__ */ new Map();
 	renderConfig;
-	renderDebounceMs;
-	sdkInstance;
+	adapter;
 	globalSettings = {};
 	onGlobalSettingsChange;
 	wrapper;
-	flushCoordinator = new FlushCoordinator();
 	/** DevTools observer. Set externally by startDevtoolsServer(). null when devtools is off. */
 	observer = null;
-	constructor(renderConfig, renderDebounceMs, sdkInstance, onGlobalSettingsChange, wrapper) {
+	constructor(renderConfig, adapter, onGlobalSettingsChange, wrapper) {
 		this.renderConfig = renderConfig;
-		this.renderDebounceMs = renderDebounceMs;
-		this.sdkInstance = sdkInstance;
+		this.adapter = adapter;
 		this.onGlobalSettingsChange = onGlobalSettingsChange;
 		this.wrapper = wrapper;
 	}
@@ -127,13 +123,13 @@ var RootRegistry = class RootRegistry {
 			id: contextId,
 			uuid: definition.uuid,
 			controller,
-			coordinates: "coordinates" in ev.action ? ev.action.coordinates : void 0,
+			coordinates: ev.action.coordinates,
 			isInMultiAction: ev.payload.isInMultiAction
 		};
 		const canvas = getCanvasInfo(device.type, surfaceType);
-		const root = new ReactRoot(component, actionInfo, deviceInfo, canvas, ev.payload.settings, this.globalSettings, ev.action, this.sdkInstance, this.renderConfig, this.renderDebounceMs, async (settings) => {
+		const root = new ReactRoot(component, actionInfo, deviceInfo, canvas, ev.payload.settings, this.globalSettings, ev.action, this.adapter, this.renderConfig, async (settings) => {
 			await ev.action.setSettings(settings);
-		}, this.onGlobalSettingsChange, this.flushCoordinator, this.wrapper, definition.wrapper, definition.dialLayout);
+		}, this.onGlobalSettingsChange, this.wrapper, definition.wrapper, definition.dialLayout);
 		root.eventBus.emitSticky("willAppear", {
 			settings: ev.payload.settings,
 			controller,
@@ -155,9 +151,9 @@ var RootRegistry = class RootRegistry {
 		const actionId = ev.action.id;
 		const device = ev.action.device;
 		const deviceId = device.id;
-		const column = this.getEncoderColumn(ev);
+		const column = ev.action.coordinates?.column;
 		if (column === void 0) {
-			console.warn("[@fcannizzaro/streamdeck-react] Cannot determine encoder column for touchstrip action:", actionId);
+			console.warn("[@fcannizzaro/streamdeck-react] Cannot determine encoder column for TouchStrip action:", actionId);
 			return;
 		}
 		let tbRoot = this.touchStripRoots.get(deviceId);
@@ -168,7 +164,7 @@ var RootRegistry = class RootRegistry {
 				size: device.size,
 				name: device.name
 			};
-			tbRoot = new TouchStripRoot(definition.touchStrip, deviceInfo, this.globalSettings, this.renderConfig, this.renderDebounceMs, this.onGlobalSettingsChange, this.wrapper, definition.touchStripFPS, this.flushCoordinator);
+			tbRoot = new TouchStripRoot(definition.touchStrip, deviceInfo, this.globalSettings, this.renderConfig, this.onGlobalSettingsChange, this.wrapper);
 			this.touchStripRoots.set(deviceId, tbRoot);
 			this.observer?.onTouchStripCreated(deviceId, tbRoot, deviceInfo);
 		}
@@ -176,9 +172,6 @@ var RootRegistry = class RootRegistry {
 		this.observer?.onTouchStripColumnChanged(deviceId, [...tbRoot.columnNumbers], tbRoot.columnActionMap);
 		this.touchStripActions.set(actionId, deviceId);
 	}
-	getEncoderColumn(ev) {
-		return ev.action.coordinates?.column;
-	}
 	destroy(contextId) {
 		const deviceId = this.touchStripActions.get(contextId);
 		if (deviceId) {
@@ -202,18 +195,9 @@ var RootRegistry = class RootRegistry {
 			this.roots.delete(contextId);
 		}
 	}
-	static INTERACTION_EVENTS = new Set([
-		"keyDown",
-		"keyUp",
-		"dialRotate",
-		"dialDown",
-		"dialUp",
-		"touchTap"
-	]);
 	dispatch(contextId, event, payload) {
 		const root = this.roots.get(contextId);
 		if (root) {
-			if (RootRegistry.INTERACTION_EVENTS.has(event)) root.markInteraction();
 			root.eventBus.emit(event, payload);
 			this.observer?.onDispatch(contextId, event, payload);
 			return;
@@ -222,7 +206,6 @@ var RootRegistry = class RootRegistry {
 		if (deviceId) {
 			const tbRoot = this.touchStripRoots.get(deviceId);
 			if (tbRoot) {
-				if (RootRegistry.INTERACTION_EVENTS.has(event)) tbRoot.markInteraction();
 				this.dispatchToTouchStrip(tbRoot, contextId, event, payload);
 				this.observer?.onDispatch(contextId, event, payload);
 			}

package/dist/roots/root.d.ts

@@ -2,15 +2,13 @@ import { ComponentType } from 'react';
 import { VContainer } from '../reconciler/vnode';
 import { RenderConfig } from '../render/pipeline';
 import { EventBus } from '../context/event-bus';
-import { ActionInfo, CanvasInfo, DeviceInfo, EncoderLayout, StreamDeckAccess, WrapperComponent } from '../types';
-import { FlushCoordinator, FlushableRoot } from './flush-coordinator';
+import { ActionInfo, CanvasInfo, DeviceInfo, EncoderLayout, WrapperComponent } from '../types';
 import { JsonObject } from '@elgato/utils';
-import { Action, DialAction, KeyAction } from '@elgato/streamdeck';
-export declare class ReactRoot implements FlushableRoot {
+import { AdapterActionHandle, StreamDeckAdapter } from '../adapter/types';
+export declare class ReactRoot {
     private component;
     private actionInfo;
     private deviceInfo;
-    private flushCoordinator?;
     private pluginWrapper?;
     private actionWrapper?;
     readonly eventBus: EventBus;
@@ -20,27 +18,16 @@ export declare class ReactRoot implements FlushableRoot {
     private globalSettings;
     private setSettingsFn;
     private setGlobalSettingsFn;
-    private renderDebounceMs;
+    private readonly renderDebounceMs;
     private renderConfig;
     private canvas;
     private resolvedDialLayout;
-    private sdkAction;
-    private sdkInstance;
+    private action;
+    private adapter;
     private disposed;
     private _renderCount;
     private _lastRenderReport;
     private static readonly RENDER_WARN_THRESHOLD;
-    private _rendering;
-    private _pendingFlush;
-    private _recentRenders;
-    private _lastInteraction;
-    private static readonly ANIMATION_WINDOW_MS;
-    private static readonly ANIMATION_THRESHOLD;
-    private static readonly INTERACTION_COOLDOWN_MS;
-    private static readonly IDLE_THRESHOLD_MS;
-    private _lastFlushTime;
-    /** Current render priority (lower = higher priority). Used by flush coordinator for ordering. */
-    get priority(): number;
     /** Last data URI successfully sent to hardware. Used by devtools snapshots. */
     lastDataUri: string | null;
     /**
@@ -57,25 +44,11 @@ export declare class ReactRoot implements FlushableRoot {
     private streamDeckValue;
     private settingsValue;
     private globalSettingsValue;
-    constructor(component: ComponentType, actionInfo: ActionInfo, deviceInfo: DeviceInfo, canvas: CanvasInfo, initialSettings: JsonObject, initialGlobalSettings: JsonObject, sdkAction: Action | DialAction | KeyAction, sdkInstance: StreamDeckAccess["sdk"], renderConfig: RenderConfig, renderDebounceMs: number, onSettingsChange: (settings: JsonObject) => Promise<void>, onGlobalSettingsChange: (settings: JsonObject) => Promise<void>, flushCoordinator?: FlushCoordinator | undefined, pluginWrapper?: WrapperComponent | undefined, actionWrapper?: WrapperComponent | undefined, dialLayout?: EncoderLayout);
+    constructor(component: ComponentType, actionInfo: ActionInfo, deviceInfo: DeviceInfo, canvas: CanvasInfo, initialSettings: JsonObject, initialGlobalSettings: JsonObject, action: AdapterActionHandle, adapter: StreamDeckAdapter, renderConfig: RenderConfig, onSettingsChange: (settings: JsonObject) => Promise<void>, onGlobalSettingsChange: (settings: JsonObject) => Promise<void>, pluginWrapper?: WrapperComponent | undefined, actionWrapper?: WrapperComponent | undefined, dialLayout?: EncoderLayout);
     private render;
     private buildTree;
     private scheduleRerender;
-    /** Record a user interaction (keyDown, dialRotate, etc.) for adaptive debounce. */
-    markInteraction(): void;
-    /** Compute effective debounce based on recent render frequency and interaction state. */
-    private get effectiveDebounceMs();
     private flush;
-    /**
-     * Submit this root for flushing. Routes through the coordinator
-     * (priority-ordered) when available, or flushes directly.
-     */
-    private submitFlush;
-    /**
-     * Execute the flush. Called by FlushCoordinator in priority order,
-     * or directly when no coordinator is present.
-     */
-    executeFlush(): Promise<void>;
     private doFlush;
     updateSettings(settings: JsonObject): void;
     updateGlobalSettings(settings: JsonObject): void;

package/dist/roots/root.js

@@ -1,4 +1,4 @@
-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";
@@ -27,35 +27,16 @@ var ReactRoot = class ReactRoot {
 	globalSettings;
 	setSettingsFn;
 	setGlobalSettingsFn;
-	renderDebounceMs;
+	renderDebounceMs = 17;
 	renderConfig;
 	canvas;
 	resolvedDialLayout;
-	sdkAction;
-	sdkInstance;
+	action;
+	adapter;
 	disposed = false;
 	_renderCount = 0;
 	_lastRenderReport = 0;
 	static RENDER_WARN_THRESHOLD = 30;
-	_rendering = false;
-	_pendingFlush = false;
-	_recentRenders = [];
-	_lastInteraction = 0;
-	static ANIMATION_WINDOW_MS = 100;
-	static ANIMATION_THRESHOLD = 2;
-	static INTERACTION_COOLDOWN_MS = 500;
-	static IDLE_THRESHOLD_MS = 2e3;
-	_lastFlushTime = 0;
-	/** Current render priority (lower = higher priority). Used by flush coordinator for ordering. */
-	get priority() {
-		const now = Date.now();
-		const cutoff = now - ReactRoot.ANIMATION_WINDOW_MS;
-		while (this._recentRenders.length > 0 && this._recentRenders[0] < cutoff) this._recentRenders.shift();
-		if (this._recentRenders.length > ReactRoot.ANIMATION_THRESHOLD) return 0;
-		if (now - this._lastInteraction < ReactRoot.INTERACTION_COOLDOWN_MS) return 1;
-		if (this._lastFlushTime > 0 && now - this._lastFlushTime > ReactRoot.IDLE_THRESHOLD_MS) return 3;
-		return 2;
-	}
 	/** Last data URI successfully sent to hardware. Used by devtools snapshots. */
 	lastDataUri = null;
 	/**
@@ -68,16 +49,12 @@ var ReactRoot = class ReactRoot {
 	/** 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() {
@@ -86,20 +63,18 @@ var ReactRoot = class ReactRoot {
 	streamDeckValue;
 	settingsValue;
 	globalSettingsValue;
-	constructor(component, actionInfo, deviceInfo, canvas, initialSettings, initialGlobalSettings, sdkAction, sdkInstance, renderConfig, renderDebounceMs, onSettingsChange, onGlobalSettingsChange, flushCoordinator, 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;
-		this.flushCoordinator = flushCoordinator;
 		this.pluginWrapper = pluginWrapper;
 		this.actionWrapper = actionWrapper;
 		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) => {
 			const hasChanges = partialHasChanges(this.settings, partial);
@@ -132,8 +107,8 @@ var ReactRoot = class ReactRoot {
 			this.scheduleRerender();
 		};
 		this.streamDeckValue = {
-			action: this.sdkAction,
-			sdk: this.sdkInstance
+			action: this.action,
+			adapter: this.adapter
 		};
 		this.settingsValue = {
 			settings: this.settings,
@@ -154,7 +129,8 @@ var ReactRoot = class ReactRoot {
 			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;
@@ -174,55 +150,17 @@ var ReactRoot = class ReactRoot {
 		if (this.disposed) return;
 		this.render();
 	}
-	/** Record a user interaction (keyDown, dialRotate, etc.) for adaptive debounce. */
-	markInteraction() {
-		this._lastInteraction = Date.now();
-	}
-	/** Compute effective debounce based on recent render frequency and interaction state. */
-	get effectiveDebounceMs() {
-		const now = Date.now();
-		const cutoff = now - ReactRoot.ANIMATION_WINDOW_MS;
-		while (this._recentRenders.length > 0 && this._recentRenders[0] < cutoff) this._recentRenders.shift();
-		if (this._recentRenders.length > ReactRoot.ANIMATION_THRESHOLD) return 0;
-		if (now - this._lastInteraction < ReactRoot.INTERACTION_COOLDOWN_MS) return Math.min(this.renderDebounceMs, 16);
-		return this.renderDebounceMs;
-	}
 	async flush() {
 		if (this.disposed) return;
-		if (this._rendering) {
-			this._pendingFlush = true;
-			return;
-		}
-		this._recentRenders.push(Date.now());
-		const debounce = this.effectiveDebounceMs;
-		if (debounce > 0 && this.container.renderTimer !== null) clearTimeout(this.container.renderTimer);
-		if (debounce > 0) this.container.renderTimer = setTimeout(() => {
+		if (this.renderDebounceMs > 0 && this.container.renderTimer !== null) clearTimeout(this.container.renderTimer);
+		if (this.renderDebounceMs > 0) this.container.renderTimer = setTimeout(async () => {
 			this.container.renderTimer = null;
-			this.submitFlush();
-		}, debounce);
-		else this.submitFlush();
-	}
-	/**
-	* Submit this root for flushing. Routes through the coordinator
-	* (priority-ordered) when available, or flushes directly.
-	*/
-	submitFlush() {
-		if (this.disposed) return;
-		if (this.flushCoordinator) this.flushCoordinator.requestFlush(this);
-		else this.doFlush();
-	}
-	/**
-	* Execute the flush. Called by FlushCoordinator in priority order,
-	* or directly when no coordinator is present.
-	*/
-	async executeFlush() {
-		await this.doFlush();
+			await this.doFlush();
+		}, this.renderDebounceMs);
+		else await this.doFlush();
 	}
 	async doFlush() {
 		if (this.disposed) return;
-		this._rendering = true;
-		this._pendingFlush = false;
-		this._lastFlushTime = Date.now();
 		if (this.renderConfig.debug) {
 			this._renderCount++;
 			const now = Date.now();
@@ -234,6 +172,7 @@ var ReactRoot = class ReactRoot {
 		}
 		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) this.pushImage(dataUri).catch((err) => {
@@ -241,12 +180,6 @@ var ReactRoot = class ReactRoot {
 			});
 		} catch (err) {
 			console.error("[@fcannizzaro/streamdeck-react] Render error:", err);
-		} finally {
-			this._rendering = false;
-			if (this._pendingFlush && !this.disposed) {
-				this._pendingFlush = false;
-				await this.doFlush();
-			}
 		}
 	}
 	updateSettings(settings) {

package/dist/roots/touchstrip-root.d.ts

@@ -3,38 +3,25 @@ import { VContainer } from '../reconciler/vnode';
 import { RenderConfig } from '../render/pipeline';
 import { EventBus } from '../context/event-bus';
 import { DeviceInfo, WrapperComponent } from '../types';
-import { FlushCoordinator, FlushableRoot } from './flush-coordinator';
-import { DialAction } from '@elgato/streamdeck';
+import { AdapterActionHandle } from '../adapter/types';
 import { JsonObject } from '@elgato/utils';
-export declare class TouchStripRoot implements FlushableRoot {
+export declare class TouchStripRoot {
     private component;
-    private flushCoordinator?;
     readonly eventBus: EventBus;
     private container;
     private fiberRoot;
     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 _rendering;
-    private _pendingFlush;
-    private _recentRenders;
-    private _lastInteraction;
-    private static readonly ANIMATION_WINDOW_MS;
-    private static readonly ANIMATION_THRESHOLD;
-    private static readonly INTERACTION_COOLDOWN_MS;
-    private static readonly IDLE_THRESHOLD_MS;
-    private _lastFlushTime;
-    /** Current render priority (lower = higher priority). Used by flush coordinator. */
-    get priority(): number;
+    private _lastSegmentUriHash;
     /** Last rendered per-column data URIs. Used by devtools snapshots. */
     lastSegmentUris: Map<number, string>;
     /**
@@ -64,8 +51,8 @@ export declare class TouchStripRoot implements FlushableRoot {
     get columnActionMap(): Map<number, string>;
     private globalSettingsValue;
     private touchStripValue;
-    constructor(component: ComponentType, deviceInfo: DeviceInfo, initialGlobalSettings: JsonObject, renderConfig: RenderConfig, renderDebounceMs: number, onGlobalSettingsChange: (settings: JsonObject) => Promise<void>, pluginWrapper?: WrapperComponent, touchStripFPS?: number, flushCoordinator?: FlushCoordinator | undefined);
-    addColumn(column: number, actionId: string, sdkAction: DialAction): void;
+    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;
@@ -73,20 +60,7 @@ export declare class TouchStripRoot implements FlushableRoot {
     private render;
     private buildTree;
     private scheduleRerender;
-    /** Record a user interaction for adaptive debounce. */
-    markInteraction(): void;
-    private get effectiveDebounceMs();
     private flush;
-    /**
-     * Submit this root for flushing. Routes through the coordinator
-     * (priority-ordered) when available, or flushes directly.
-     */
-    private submitFlush;
-    /**
-     * Execute the flush. Called by FlushCoordinator in priority order,
-     * or directly when no coordinator is present.
-     */
-    executeFlush(): Promise<void>;
     private doFlush;
     updateGlobalSettings(settings: JsonObject): void;
     unmount(): void;