@fcannizzaro/streamdeck-react 0.1.9 → 0.1.11

package/dist/roots/touchstrip-root.js

@@ -0,0 +1,383 @@
+import { clearDirtyFlags, createVContainer, isContainerDirty } from "../reconciler/vnode.js";
+import { reconciler } from "../reconciler/renderer.js";
+import { computeNativeTouchstripCacheKey, computeTreeHash, fnv1a } from "../render/cache.js";
+import { getTouchstripNativeCache } from "../render/image-cache.js";
+import { metrics } from "../render/metrics.js";
+import { buildTakumiChildren, measureTree, renderSegmentToDataUri, renderToRaw, sliceToDataUriAsync } 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_TOUCHSTRIP_FPS = 60;
+var TouchStripRoot = class TouchStripRoot {
+	eventBus = new EventBus();
+	container;
+	fiberRoot;
+	columns = /* @__PURE__ */ new Map();
+	globalSettings;
+	setGlobalSettingsFn;
+	renderDebounceMs;
+	renderConfig;
+	deviceInfo;
+	disposed = false;
+	fps;
+	pluginWrapper;
+	_renderCount = 0;
+	_lastRenderReport = 0;
+	static RENDER_WARN_THRESHOLD = 65;
+	_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. */
+	get priority() {
+		const now = Date.now();
+		const cutoff = now - TouchStripRoot.ANIMATION_WINDOW_MS;
+		while (this._recentRenders.length > 0 && this._recentRenders[0] < cutoff) this._recentRenders.shift();
+		if (this._recentRenders.length > TouchStripRoot.ANIMATION_THRESHOLD) return 0;
+		if (now - this._lastInteraction < TouchStripRoot.INTERACTION_COOLDOWN_MS) return 1;
+		if (this._lastFlushTime > 0 && now - this._lastFlushTime > TouchStripRoot.IDLE_THRESHOLD_MS) return 3;
+		return 2;
+	}
+	/** 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, renderDebounceMs, onGlobalSettingsChange, pluginWrapper, touchStripFPS, flushCoordinator) {
+		this.component = component;
+		this.flushCoordinator = flushCoordinator;
+		this.deviceInfo = deviceInfo;
+		this.globalSettings = { ...initialGlobalSettings };
+		this.renderConfig = renderConfig;
+		this.fps = touchStripFPS ?? DEFAULT_TOUCHSTRIP_FPS;
+		this.renderDebounceMs = touchStripFPS != null ? Math.max(1, Math.round(1e3 / touchStripFPS)) : renderDebounceMs;
+		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,
+			fps: this.fps
+		};
+		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,
+			fps: this.fps
+		};
+	}
+	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();
+	}
+	/** Record a user interaction for adaptive debounce. */
+	markInteraction() {
+		this._lastInteraction = Date.now();
+	}
+	get effectiveDebounceMs() {
+		const now = Date.now();
+		const cutoff = now - TouchStripRoot.ANIMATION_WINDOW_MS;
+		while (this._recentRenders.length > 0 && this._recentRenders[0] < cutoff) this._recentRenders.shift();
+		if (this._recentRenders.length > TouchStripRoot.ANIMATION_THRESHOLD) return 0;
+		if (now - this._lastInteraction < TouchStripRoot.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(() => {
+			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();
+	}
+	async doFlush() {
+		if (this.disposed || this.columns.size === 0) 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 > TouchStripRoot.RENDER_WARN_THRESHOLD) console.warn(`[@fcannizzaro/streamdeck-react] TouchStrip rendered ${this._renderCount}x in 1s (FPS target: ${this.fps})`);
+				this._renderCount = 0;
+				this._lastRenderReport = now;
+			}
+		}
+		try {
+			const width = this.touchStripValue.width;
+			if (width === 0) return;
+			if (this.renderConfig.touchstripImageFormat !== "png") {
+				metrics.recordFlush();
+				if (this.renderConfig.caching && !isContainerDirty(this.container)) {
+					metrics.recordDirtySkip();
+					return;
+				}
+				const profiling = this.renderConfig.onProfile != null;
+				const t0 = profiling ? performance.now() : 0;
+				const sortedColumns = [...this.columns.keys()].sort((a, b) => a - b);
+				let treeHash;
+				let cacheKey;
+				let cacheHit = false;
+				if (this.renderConfig.caching && this.renderConfig.touchstripCacheMaxBytes > 0) {
+					treeHash = computeTreeHash(this.container);
+					cacheKey = computeNativeTouchstripCacheKey(treeHash, width, SEGMENT_HEIGHT, this.renderConfig.devicePixelRatio, this.renderConfig.touchstripImageFormat, sortedColumns);
+					const cache = getTouchstripNativeCache(this.renderConfig.touchstripCacheMaxBytes);
+					const cached = cache.get(cacheKey);
+					if (cached !== void 0) {
+						metrics.recordCacheHit();
+						cacheHit = true;
+						for (const [column, uri] of cached) {
+							this.lastSegmentUris.set(column, uri);
+							if (!this.suppressHardwarePush) this.columns.get(column)?.sdkAction.setFeedback({ canvas: uri }).catch(() => {});
+						}
+						if (profiling) {
+							const tNow = performance.now();
+							const stats = measureTree(this.container.children);
+							this.renderConfig.onProfile({
+								vnodeToElementMs: 0,
+								fromJsxMs: 0,
+								takumiRenderMs: tNow - t0,
+								hashMs: 0,
+								base64Ms: 0,
+								totalMs: tNow - t0,
+								skipped: false,
+								cacheHit: true,
+								treeDepth: stats.depth,
+								nodeCount: stats.count,
+								cacheStats: cache.stats
+							});
+						}
+						clearDirtyFlags(this.container);
+					}
+				}
+				if (!cacheHit) {
+					const takumiChildren = buildTakumiChildren(this.container);
+					const segmentResults = [];
+					const renderPromises = [...this.columns.entries()].map(async ([column]) => {
+						const sliceUri = await renderSegmentToDataUri(this.container, width, SEGMENT_HEIGHT, column, SEGMENT_WIDTH, this.renderConfig.touchstripImageFormat, this.renderConfig, takumiChildren);
+						if (sliceUri != null) {
+							segmentResults.push([column, sliceUri]);
+							this.lastSegmentUris.set(column, sliceUri);
+						}
+					});
+					await Promise.all(renderPromises);
+					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.container.lastSvgHash) {
+							metrics.recordHashDedup();
+							skipped = true;
+						} else this.container.lastSvgHash = uriHash;
+					}
+					if (!skipped && !this.suppressHardwarePush) for (const [column, uri] of segmentResults) this.columns.get(column)?.sdkAction.setFeedback({ canvas: uri }).catch(() => {});
+					const elapsedMs = (profiling ? performance.now() : 0) - t0;
+					metrics.recordRender(elapsedMs);
+					if (this.renderConfig.caching && this.renderConfig.touchstripCacheMaxBytes > 0) {
+						if (treeHash === void 0 || cacheKey === void 0) {
+							treeHash = computeTreeHash(this.container);
+							cacheKey = computeNativeTouchstripCacheKey(treeHash, width, SEGMENT_HEIGHT, this.renderConfig.devicePixelRatio, this.renderConfig.touchstripImageFormat, sortedColumns);
+						}
+						const cache = getTouchstripNativeCache(this.renderConfig.touchstripCacheMaxBytes);
+						let byteSize = 64;
+						for (const [, uri] of segmentResults) byteSize += uri.length * 2 + 16;
+						cache.set(cacheKey, segmentResults, byteSize);
+					}
+					if (profiling) {
+						const stats = measureTree(this.container.children);
+						const nativeCache = this.renderConfig.touchstripCacheMaxBytes > 0 ? getTouchstripNativeCache(this.renderConfig.touchstripCacheMaxBytes) : null;
+						this.renderConfig.onProfile({
+							vnodeToElementMs: 0,
+							fromJsxMs: 0,
+							takumiRenderMs: elapsedMs,
+							hashMs: 0,
+							base64Ms: 0,
+							totalMs: elapsedMs,
+							skipped,
+							cacheHit: false,
+							treeDepth: stats.depth,
+							nodeCount: stats.count,
+							cacheStats: nativeCache?.stats ?? null
+						});
+					}
+					clearDirtyFlags(this.container);
+				}
+			} else {
+				const result = await renderToRaw(this.container, width, SEGMENT_HEIGHT, this.renderConfig);
+				if (result === null || this.disposed) return;
+				const feedbackPromises = [...this.columns.entries()].map(async ([column, entry]) => {
+					const sliceUri = await sliceToDataUriAsync(result.buffer, result.width, result.height, column, SEGMENT_WIDTH, SEGMENT_HEIGHT);
+					this.lastSegmentUris.set(column, sliceUri);
+					if (!this.suppressHardwarePush) entry.sdkAction.setFeedback({ canvas: sliceUri }).catch(() => {});
+				});
+				await Promise.all(feedbackPromises);
+			}
+			this.renderConfig.onRender?.(this.container, "");
+		} catch (err) {
+			console.error("[@fcannizzaro/streamdeck-react] TouchStrip render error:", err);
+		} finally {
+			this._rendering = false;
+			if (this._pendingFlush && !this.disposed) {
+				this._pendingFlush = false;
+				await this.doFlush();
+			}
+		}
+	}
+	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 };

package/dist/types.d.ts

@@ -72,31 +72,77 @@ export interface PluginConfig {
     onActionError?: (uuid: string, actionId: string, error: Error) => void;
     /** Enable the devtools WebSocket server. Browser devtools UI discovers it via port scanning. @default false */
     devtools?: boolean;
+    /** Enable performance diagnostics (render counters, duplicate detection, depth warnings). Defaults to `process.env.NODE_ENV !== 'production'`. */
+    debug?: boolean;
+    /** Maximum image cache size in bytes for key/dial renders. Set to 0 to disable. @default 16777216 (16 MB) */
+    imageCacheMaxBytes?: number;
+    /** Maximum touchstrip raw buffer cache size in bytes. Set to 0 to disable. @default 8388608 (8 MB) */
+    touchstripCacheMaxBytes?: number;
+    /** Offload Takumi rendering to a worker thread. Set to false to disable. @default true */
+    useWorker?: boolean;
+    /** Image format for touchstrip segment encoding. `"webp"` renders each segment directly via Takumi (faster, no custom PNG encoder). `"png"` uses the raw+crop+deflate path. @default "webp" */
+    touchstripImageFormat?: "webp" | "png";
 }
 export interface Plugin {
     connect(): Promise<void>;
 }
+export interface ManifestActions {
+}
+/** Action UUID — a union of manifest UUIDs when available, plain `string` otherwise. */
+export type ActionUUID = [keyof ManifestActions] extends [never] ? string : Extract<keyof ManifestActions, string>;
+type HasController<UUID extends string, C extends string> = UUID extends keyof ManifestActions ? ManifestActions[UUID] extends {
+    controllers: readonly (infer Item)[];
+} ? C extends Item ? true : false : false : false;
+type KeySurface<UUID extends string> = HasController<UUID, "Keypad"> extends true ? {
+    key: ComponentType;
+} : {
+    key?: ComponentType;
+};
+type EncoderSurface<UUID extends string> = HasController<UUID, "Encoder"> extends true ? {
+    dial: ComponentType;
+    touchStrip?: ComponentType;
+} | {
+    dial?: ComponentType;
+    touchStrip: ComponentType;
+} : {
+    dial?: ComponentType;
+    touchStrip?: ComponentType;
+};
 export interface ActionConfig<S extends JsonObject = JsonObject> {
     uuid: string;
     key?: ComponentType;
     dial?: ComponentType;
-    /** Full-strip touchbar component. When set, replaces per-encoder `dial` display with a single shared React tree that spans the entire touch strip. */
-    touchBar?: ComponentType;
-    /** Target frame rate for the touchbar animation loop and render pipeline. Controls both `useTick` cadence (via `useTouchBar().fps`) and the render debounce. @default 60 */
-    touchBarFPS?: number;
+    /** Full-strip touchstrip component. When set, replaces per-encoder `dial` display with a single shared React tree that spans the entire touch strip. */
+    touchStrip?: ComponentType;
+    /** Target frame rate for the touchstrip animation loop and render pipeline. Controls both `useTick` cadence (via `useTouchStrip().fps`) and the render debounce. @default 60 */
+    touchStripFPS?: number;
     /** Encoder feedback layout. Defaults to a full-width `pixmap` canvas layout. Custom layouts should include a `pixmap` item keyed as `canvas`. */
     dialLayout?: EncoderLayout;
     wrapper?: WrapperComponent;
     defaultSettings?: Partial<S>;
 }
+/** Resolved action config shape. When `ManifestActions` is populated (via `streamdeck-env.d.ts`), this becomes a mapped type that iterates over every UUID in the manifest and produces a discriminated union. Each member intersects `KeySurface<UUID>` and `EncoderSurface<UUID>` to enforce controller-specific requirements. When `ManifestActions` is empty, it falls back to the permissive `ActionConfig<S>`. */
+export type ActionConfigInput<S extends JsonObject = JsonObject> = [keyof ManifestActions] extends [
+    never
+] ? ActionConfig<S> : {
+    [UUID in ActionUUID]: {
+        uuid: UUID;
+        /** Target frame rate for the touchstrip animation loop and render pipeline. Controls both `useTick` cadence (via `useTouchStrip().fps`) and the render debounce. @default 60 */
+        touchStripFPS?: number;
+        /** Encoder feedback layout. Defaults to a full-width `pixmap` canvas layout. Custom layouts should include a `pixmap` item keyed as `canvas`. */
+        dialLayout?: EncoderLayout;
+        wrapper?: WrapperComponent;
+        defaultSettings?: Partial<S>;
+    } & KeySurface<UUID> & EncoderSurface<UUID>;
+}[ActionUUID];
 export interface ActionDefinition<S extends JsonObject = JsonObject> {
     uuid: string;
     key?: ComponentType;
     dial?: ComponentType;
-    /** Full-strip touchbar component. When set, replaces per-encoder `dial` display with a single shared React tree that spans the entire touch strip. */
-    touchBar?: ComponentType;
-    /** Target frame rate for the touchbar animation loop and render pipeline. @default 60 */
-    touchBarFPS?: number;
+    /** Full-strip touchstrip component. When set, replaces per-encoder `dial` display with a single shared React tree that spans the entire touch strip. */
+    touchStrip?: ComponentType;
+    /** Target frame rate for the touchstrip animation loop and render pipeline. @default 60 */
+    touchStripFPS?: number;
     /** Encoder feedback layout. Defaults to a full-width `pixmap` canvas layout. Custom layouts should include a `pixmap` item keyed as `canvas`. */
     dialLayout?: EncoderLayout;
     wrapper?: WrapperComponent;
@@ -161,7 +207,7 @@ export interface DialHints {
     touch?: string;
     longTouch?: string;
 }
-export interface TouchBarInfo {
+export interface TouchStripInfo {
     /** Full render width in pixels (e.g., 800 for 4 encoders). */
     width: number;
     /** Strip height in pixels (always 100). */
@@ -173,19 +219,19 @@ export interface TouchBarInfo {
     /** Target frame rate for the animation loop. Pass to `useTick` for matched cadence. */
     fps: number;
 }
-export interface TouchBarTapPayload {
+export interface TouchStripTapPayload {
     /** Absolute tap position across the full strip width. */
     tapPos: [x: number, y: number];
     hold: boolean;
     /** The encoder column that was touched. */
     column: number;
 }
-export interface TouchBarDialRotatePayload {
+export interface TouchStripDialRotatePayload {
     column: number;
     ticks: number;
     pressed: boolean;
 }
-export interface TouchBarDialPressPayload {
+export interface TouchStripDialPressPayload {
     column: number;
 }
 export interface EventMap {
@@ -205,9 +251,9 @@ export interface EventMap {
         title: string;
         settings: JsonObject;
     };
-    touchBarTap: TouchBarTapPayload;
-    touchBarDialRotate: TouchBarDialRotatePayload;
-    touchBarDialDown: TouchBarDialPressPayload;
-    touchBarDialUp: TouchBarDialPressPayload;
+    touchStripTap: TouchStripTapPayload;
+    touchStripDialRotate: TouchStripDialRotatePayload;
+    touchStripDialDown: TouchStripDialPressPayload;
+    touchStripDialUp: TouchStripDialPressPayload;
 }
 export {};

package/dist/vite.d.ts

@@ -10,17 +10,31 @@ export interface StreamDeckReactOptions extends StreamDeckTargetOptions {
      * each successful build.
      */
     uuid?: string;
+    /**
+     * Path to the plugin `manifest.json`. When omitted, the plugin
+     * auto-detects by scanning the project root for a `*.sdPlugin/manifest.json`.
+     *
+     * Set to `false` to disable manifest type generation entirely.
+     */
+    manifest?: string | false;
 }
 /**
  * Vite plugin for Stream Deck React projects.
  *
- * - Inlines font files (`.ttf`, `.otf`, `.woff`, `.woff2`) imported by the
- *   project into the bundle as `Buffer` instances so no runtime filesystem
- *   access is needed.
- * - Copies platform-specific `@takumi-rs/core` native bindings (`.node` files)
- *   into the bundle output directory.
- * - Strips devtools code in production builds (non-watch mode).
- * - Optionally restarts the Stream Deck plugin after each build when
- *   {@link StreamDeckReactOptions.uuid} is provided.
+ * Responsibilities mapped to Vite lifecycle hooks:
+ *
+ *   configResolved  → detect dev/production mode, set strip flags
+ *   buildStart      → generate streamdeck-env.d.ts from manifest.json
+ *   resolveId       → redirect devtools imports (production) + font imports
+ *   load            → return noop devtools stub + inline font as base64 Buffer
+ *   writeBundle     → copy native .node bindings to output directory
+ *   closeBundle     → restart Stream Deck plugin (optional, via CLI)
+ *
+ * Font inlining:
+ *   `.ttf`, `.otf`, `.woff`, `.woff2` imports are resolved to absolute
+ *   paths and loaded as synthetic ES modules:
+ *     `export default Buffer.from("<base64>", "base64");`
+ *   This eliminates runtime filesystem access in the sandboxed
+ *   Stream Deck Node.js environment.
  */
 export declare function streamDeckReact(options?: StreamDeckReactOptions): Plugin;

package/dist/vite.js

@@ -1,19 +1,27 @@
 import { NOOP_DEVTOOLS_CODE, NOOP_DEVTOOLS_ID, copyNativeBindings, isLibraryDevtoolsImport, shouldStripDevtools } from "./bundler-shared.js";
 import { loadFont, resolveFontId } from "./font-inline.js";
+import { generateManifestTypes } from "./manifest-codegen.js";
 import { resolve } from "node:path";
 import { exec } from "node:child_process";
 //#region src/vite.ts
 /**
 * Vite plugin for Stream Deck React projects.
 *
-* - Inlines font files (`.ttf`, `.otf`, `.woff`, `.woff2`) imported by the
-*   project into the bundle as `Buffer` instances so no runtime filesystem
-*   access is needed.
-* - Copies platform-specific `@takumi-rs/core` native bindings (`.node` files)
-*   into the bundle output directory.
-* - Strips devtools code in production builds (non-watch mode).
-* - Optionally restarts the Stream Deck plugin after each build when
-*   {@link StreamDeckReactOptions.uuid} is provided.
+* Responsibilities mapped to Vite lifecycle hooks:
+*
+*   configResolved  → detect dev/production mode, set strip flags
+*   buildStart      → generate streamdeck-env.d.ts from manifest.json
+*   resolveId       → redirect devtools imports (production) + font imports
+*   load            → return noop devtools stub + inline font as base64 Buffer
+*   writeBundle     → copy native .node bindings to output directory
+*   closeBundle     → restart Stream Deck plugin (optional, via CLI)
+*
+* Font inlining:
+*   `.ttf`, `.otf`, `.woff`, `.woff2` imports are resolved to absolute
+*   paths and loaded as synthetic ES modules:
+*     `export default Buffer.from("<base64>", "base64");`
+*   This eliminates runtime filesystem access in the sandboxed
+*   Stream Deck Node.js environment.
 */
 function streamDeckReact(options = {}) {
 	let resolvedConfig;
@@ -29,6 +37,14 @@ function streamDeckReact(options = {}) {
 			isDevelopment = isWatch || process.env.NODE_ENV === "development";
 			stripDevtools = shouldStripDevtools(isWatch);
 		},
+		buildStart() {
+			const warn = (msg) => resolvedConfig.logger.warn(msg);
+			const result = generateManifestTypes(resolvedConfig.root, options.manifest, warn);
+			if (result) {
+				this.addWatchFile(result.manifestPath);
+				if (result.written) resolvedConfig.logger.info("[@fcannizzaro/streamdeck-react] Generated src/streamdeck-env.d.ts");
+			}
+		},
 		resolveId(source, importer) {
 			if (stripDevtools && isLibraryDevtoolsImport(source, importer)) return NOOP_DEVTOOLS_ID;
 			return resolveFontId(source, importer);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fcannizzaro/streamdeck-react",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Build Stream Deck plugins with React — render components directly to keys, dials, and touch screens",
   "keywords": [
     "elgato",
@@ -13,7 +13,7 @@
   "bugs": {
     "url": "https://github.com/fcannizzaro/streamdeck-react/issues"
   },
-  "license": "MIT",
+  "license": "Apache-2.0",
   "author": {
     "name": "Francesco Saverio Cannizzaro",
     "url": "https://github.com/fcannizzaro"
@@ -56,14 +56,15 @@
   },
   "scripts": {
     "build": "vite build",
-    "check-types": "tsc --noEmit",
+    "typecheck": "tsc --noEmit",
     "test": "bun test ./src"
   },
   "dependencies": {
     "@elgato/streamdeck": "^2.0.2",
     "@takumi-rs/core": "^0.71.7",
     "@takumi-rs/helpers": "^0.71.7",
-    "react-reconciler": "^0.33.0"
+    "react-reconciler": "^0.33.0",
+    "xxhash-wasm": "^1.1.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.3",

package/dist/context/touchbar-context.d.ts

@@ -1,2 +0,0 @@
-import { TouchBarInfo } from '../types';
-export declare const TouchBarContext: import('react').Context<TouchBarInfo>;

package/dist/context/touchbar-context.js

@@ -1,5 +0,0 @@
-import { createContext } from "react";
-//#region src/context/touchbar-context.ts
-var TouchBarContext = createContext(null);
-//#endregion
-export { TouchBarContext };

package/dist/hooks/touchbar.d.ts

@@ -1,6 +0,0 @@
-import { TouchBarInfo, TouchBarTapPayload, TouchBarDialRotatePayload, TouchBarDialPressPayload } from '../types';
-export declare function useTouchBar(): TouchBarInfo;
-export declare function useTouchBarTap(callback: (payload: TouchBarTapPayload) => void): void;
-export declare function useTouchBarDialRotate(callback: (payload: TouchBarDialRotatePayload) => void): void;
-export declare function useTouchBarDialDown(callback: (payload: TouchBarDialPressPayload) => void): void;
-export declare function useTouchBarDialUp(callback: (payload: TouchBarDialPressPayload) => void): void;