@fcannizzaro/streamdeck-react 0.1.9 → 0.1.11

package/dist/roots/registry.js

@@ -1,5 +1,7 @@
+import { shallowEqualSettings } from "./settings-equality.js";
 import { ReactRoot } from "./root.js";
-import { TouchBarRoot } from "./touchbar-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 = {
@@ -77,16 +79,17 @@ function getCanvasInfo(deviceType, surfaceType) {
 		type: "key"
 	};
 }
-var RootRegistry = class {
+var RootRegistry = class RootRegistry {
 	roots = /* @__PURE__ */ new Map();
-	touchBarRoots = /* @__PURE__ */ new Map();
-	touchBarActions = /* @__PURE__ */ new Map();
+	touchStripRoots = /* @__PURE__ */ new Map();
+	touchStripActions = /* @__PURE__ */ new Map();
 	renderConfig;
 	renderDebounceMs;
 	sdkInstance;
 	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) {
@@ -97,18 +100,19 @@ var RootRegistry = class {
 		this.wrapper = wrapper;
 	}
 	setGlobalSettings(settings) {
+		if (shallowEqualSettings(this.globalSettings, settings)) return;
 		this.globalSettings = settings;
 		for (const root of this.roots.values()) root.updateGlobalSettings(settings);
-		for (const tbRoot of this.touchBarRoots.values()) tbRoot.updateGlobalSettings(settings);
+		for (const tbRoot of this.touchStripRoots.values()) tbRoot.updateGlobalSettings(settings);
 	}
 	create(ev, component, definition) {
 		const contextId = ev.action.id;
-		if (this.roots.has(contextId) || this.touchBarActions.has(contextId)) return;
+		if (this.roots.has(contextId) || this.touchStripActions.has(contextId)) return;
 		const device = ev.action.device;
 		const controller = ev.action.controllerType;
 		const isEncoder = controller === "Encoder";
-		if (isEncoder && definition.touchBar) {
-			this.registerTouchBarColumn(ev, definition);
+		if (isEncoder && definition.touchStrip) {
+			this.registerTouchStripColumn(ev, definition);
 			return;
 		}
 		let surfaceType = "key";
@@ -129,7 +133,7 @@ var RootRegistry = class {
 		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) => {
 			await ev.action.setSettings(settings);
-		}, this.onGlobalSettingsChange, this.wrapper, definition.wrapper, definition.dialLayout);
+		}, this.onGlobalSettingsChange, this.flushCoordinator, this.wrapper, definition.wrapper, definition.dialLayout);
 		root.eventBus.emitSticky("willAppear", {
 			settings: ev.payload.settings,
 			controller,
@@ -147,16 +151,16 @@ var RootRegistry = class {
 			} : void 0
 		});
 	}
-	registerTouchBarColumn(ev, definition) {
+	registerTouchStripColumn(ev, definition) {
 		const actionId = ev.action.id;
 		const device = ev.action.device;
 		const deviceId = device.id;
 		const column = this.getEncoderColumn(ev);
 		if (column === void 0) {
-			console.warn("[@fcannizzaro/streamdeck-react] Cannot determine encoder column for touchbar action:", actionId);
+			console.warn("[@fcannizzaro/streamdeck-react] Cannot determine encoder column for touchstrip action:", actionId);
 			return;
 		}
-		let tbRoot = this.touchBarRoots.get(deviceId);
+		let tbRoot = this.touchStripRoots.get(deviceId);
 		if (!tbRoot) {
 			const deviceInfo = {
 				id: deviceId,
@@ -164,31 +168,31 @@ var RootRegistry = class {
 				size: device.size,
 				name: device.name
 			};
-			tbRoot = new TouchBarRoot(definition.touchBar, deviceInfo, this.globalSettings, this.renderConfig, this.renderDebounceMs, this.onGlobalSettingsChange, this.wrapper, definition.touchBarFPS);
-			this.touchBarRoots.set(deviceId, tbRoot);
-			this.observer?.onTouchBarCreated(deviceId, tbRoot, deviceInfo);
+			tbRoot = new TouchStripRoot(definition.touchStrip, deviceInfo, this.globalSettings, this.renderConfig, this.renderDebounceMs, this.onGlobalSettingsChange, this.wrapper, definition.touchStripFPS, this.flushCoordinator);
+			this.touchStripRoots.set(deviceId, tbRoot);
+			this.observer?.onTouchStripCreated(deviceId, tbRoot, deviceInfo);
 		}
 		tbRoot.addColumn(column, actionId, ev.action);
-		this.observer?.onTouchBarColumnChanged(deviceId, [...tbRoot.columnNumbers], tbRoot.columnActionMap);
-		this.touchBarActions.set(actionId, deviceId);
+		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.touchBarActions.get(contextId);
+		const deviceId = this.touchStripActions.get(contextId);
 		if (deviceId) {
-			const tbRoot = this.touchBarRoots.get(deviceId);
+			const tbRoot = this.touchStripRoots.get(deviceId);
 			if (tbRoot) {
 				const column = tbRoot.findColumnByActionId(contextId);
 				if (column !== void 0) tbRoot.removeColumn(column);
 				if (tbRoot.isEmpty) {
-					this.observer?.onTouchBarDestroyed(deviceId);
+					this.observer?.onTouchStripDestroyed(deviceId);
 					tbRoot.unmount();
-					this.touchBarRoots.delete(deviceId);
+					this.touchStripRoots.delete(deviceId);
 				}
 			}
-			this.touchBarActions.delete(contextId);
+			this.touchStripActions.delete(contextId);
 			return;
 		}
 		const root = this.roots.get(contextId);
@@ -198,29 +202,39 @@ var RootRegistry = class {
 			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;
 		}
-		const deviceId = this.touchBarActions.get(contextId);
+		const deviceId = this.touchStripActions.get(contextId);
 		if (deviceId) {
-			const tbRoot = this.touchBarRoots.get(deviceId);
+			const tbRoot = this.touchStripRoots.get(deviceId);
 			if (tbRoot) {
-				this.dispatchToTouchBar(tbRoot, contextId, event, payload);
+				if (RootRegistry.INTERACTION_EVENTS.has(event)) tbRoot.markInteraction();
+				this.dispatchToTouchStrip(tbRoot, contextId, event, payload);
 				this.observer?.onDispatch(contextId, event, payload);
 			}
 		}
 	}
-	dispatchToTouchBar(tbRoot, actionId, event, payload) {
+	dispatchToTouchStrip(tbRoot, actionId, event, payload) {
 		const column = tbRoot.findColumnByActionId(actionId);
 		if (column === void 0) return;
 		switch (event) {
 			case "touchTap": {
 				const tp = payload;
-				tbRoot.eventBus.emit("touchBarTap", {
+				tbRoot.eventBus.emit("touchStripTap", {
 					tapPos: [column * SEGMENT_WIDTH + tp.tapPos[0], tp.tapPos[1]],
 					hold: tp.hold,
 					column
@@ -229,7 +243,7 @@ var RootRegistry = class {
 			}
 			case "dialRotate": {
 				const dr = payload;
-				tbRoot.eventBus.emit("touchBarDialRotate", {
+				tbRoot.eventBus.emit("touchStripDialRotate", {
 					column,
 					ticks: dr.ticks,
 					pressed: dr.pressed
@@ -237,10 +251,10 @@ var RootRegistry = class {
 				break;
 			}
 			case "dialDown":
-				tbRoot.eventBus.emit("touchBarDialDown", { column });
+				tbRoot.eventBus.emit("touchStripDialDown", { column });
 				break;
 			case "dialUp":
-				tbRoot.eventBus.emit("touchBarDialUp", { column });
+				tbRoot.eventBus.emit("touchStripDialUp", { column });
 				break;
 		}
 	}
@@ -251,9 +265,9 @@ var RootRegistry = class {
 	destroyAll() {
 		for (const [_, root] of this.roots) root.unmount();
 		this.roots.clear();
-		for (const [_, tbRoot] of this.touchBarRoots) tbRoot.unmount();
-		this.touchBarRoots.clear();
-		this.touchBarActions.clear();
+		for (const [_, tbRoot] of this.touchStripRoots) tbRoot.unmount();
+		this.touchStripRoots.clear();
+		this.touchStripActions.clear();
 	}
 };
 //#endregion

package/dist/roots/root.d.ts

@@ -3,12 +3,14 @@ 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 { JsonObject } from '@elgato/utils';
 import { Action, DialAction, KeyAction } from '@elgato/streamdeck';
-export declare class ReactRoot {
+export declare class ReactRoot implements FlushableRoot {
     private component;
     private actionInfo;
     private deviceInfo;
+    private flushCoordinator?;
     private pluginWrapper?;
     private actionWrapper?;
     readonly eventBus: EventBus;
@@ -25,6 +27,20 @@ export declare class ReactRoot {
     private sdkAction;
     private sdkInstance;
     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;
     /**
@@ -41,11 +57,25 @@ export declare class ReactRoot {
     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>, pluginWrapper?: WrapperComponent | undefined, actionWrapper?: WrapperComponent | undefined, dialLayout?: EncoderLayout);
+    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);
     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

@@ -3,6 +3,7 @@ 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;
@@ -33,6 +34,28 @@ var ReactRoot = class {
 	sdkAction;
 	sdkInstance;
 	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;
 	/**
@@ -63,10 +86,11 @@ 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, sdkAction, sdkInstance, renderConfig, renderDebounceMs, onSettingsChange, onGlobalSettingsChange, flushCoordinator, pluginWrapper, actionWrapper, dialLayout) {
 		this.component = component;
 		this.actionInfo = actionInfo;
 		this.deviceInfo = deviceInfo;
+		this.flushCoordinator = flushCoordinator;
 		this.pluginWrapper = pluginWrapper;
 		this.actionWrapper = actionWrapper;
 		this.canvas = canvas;
@@ -78,27 +102,33 @@ var ReactRoot = class {
 		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 = {
@@ -144,27 +174,86 @@ var ReactRoot = class {
 		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.renderDebounceMs > 0 && this.container.renderTimer !== null) clearTimeout(this.container.renderTimer);
-		if (this.renderDebounceMs > 0) this.container.renderTimer = setTimeout(async () => {
+		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(() => {
 			this.container.renderTimer = null;
-			await this.doFlush();
-		}, this.renderDebounceMs);
-		else await this.doFlush();
+			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();
 	}
 	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();
+			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);
 			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);
+		} finally {
+			this._rendering = false;
+			if (this._pendingFlush && !this.disposed) {
+				this._pendingFlush = false;
+				await this.doFlush();
+			}
 		}
 	}
 	updateSettings(settings) {
+		if (shallowEqualSettings(this.settings, settings)) {
+			this.eventBus.emit("settingsChanged", settings);
+			return;
+		}
 		this.settings = { ...settings };
 		this.settingsValue = {
 			settings: this.settings,
@@ -174,6 +263,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/touchstrip-root.d.ts

@@ -0,0 +1,93 @@
+import { ComponentType } from 'react';
+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 { JsonObject } from '@elgato/utils';
+export declare class TouchStripRoot implements FlushableRoot {
+    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 _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;
+    /** 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. */
+    get columnNumbers(): number[];
+    /** Column → actionId map for devtools observer. */
+    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;
+    removeColumn(column: number): void;
+    get isEmpty(): boolean;
+    findColumnByActionId(actionId: string): number | undefined;
+    private updateTouchStripInfo;
+    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;
+}