@fcannizzaro/streamdeck-react 0.1.11 → 0.1.13

package/dist/roots/touchstrip-root.js

@@ -1,9 +1,8 @@
 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 { 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";
@@ -12,7 +11,7 @@ import { createElement } from "react";
 //#region src/roots/touchstrip-root.ts
 var SEGMENT_WIDTH = 200;
 var SEGMENT_HEIGHT = 100;
-var DEFAULT_TOUCHSTRIP_FPS = 60;
+var DEFAULT_TOUCH_STRIP_FPS = 30;
 var TouchStripRoot = class TouchStripRoot {
 	eventBus = new EventBus();
 	container;
@@ -20,34 +19,15 @@ var TouchStripRoot = class TouchStripRoot {
 	columns = /* @__PURE__ */ new Map();
 	globalSettings;
 	setGlobalSettingsFn;
-	renderDebounceMs;
 	renderConfig;
 	deviceInfo;
 	disposed = false;
-	fps;
 	pluginWrapper;
+	renderDebounceMs = 17;
 	_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;
-	}
+	static RENDER_WARN_THRESHOLD = 35;
+	_lastSegmentUriHash = 0;
 	/** Last rendered per-column data URIs. Used by devtools snapshots. */
 	lastSegmentUris = /* @__PURE__ */ new Map();
 	/**
@@ -93,14 +73,11 @@ var TouchStripRoot = class TouchStripRoot {
 	}
 	globalSettingsValue;
 	touchStripValue;
-	constructor(component, deviceInfo, initialGlobalSettings, renderConfig, renderDebounceMs, onGlobalSettingsChange, pluginWrapper, touchStripFPS, flushCoordinator) {
+	constructor(component, deviceInfo, initialGlobalSettings, renderConfig, onGlobalSettingsChange, pluginWrapper) {
 		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);
@@ -125,8 +102,7 @@ var TouchStripRoot = class TouchStripRoot {
 			width: 0,
 			height: SEGMENT_HEIGHT,
 			columns: [],
-			segmentWidth: SEGMENT_WIDTH,
-			fps: this.fps
+			segmentWidth: SEGMENT_WIDTH
 		};
 		this.container = createVContainer(() => {
 			this.flush();
@@ -138,7 +114,7 @@ var TouchStripRoot = class TouchStripRoot {
 		}, (err) => {
 			console.error("[@fcannizzaro/streamdeck-react] TouchStrip recoverable error:", err);
 		}, () => {});
-		this.eventBus.ownerId = `touchstrip:${deviceInfo.id}`;
+		this.eventBus.ownerId = `touchStrip:${deviceInfo.id}`;
 	}
 	addColumn(column, actionId, sdkAction) {
 		this.columns.set(column, {
@@ -166,8 +142,7 @@ var TouchStripRoot = class TouchStripRoot {
 			width: (sortedColumns.length > 0 ? sortedColumns[sortedColumns.length - 1] + 1 : 0) * SEGMENT_WIDTH,
 			height: SEGMENT_HEIGHT,
 			columns: sortedColumns,
-			segmentWidth: SEGMENT_WIDTH,
-			fps: this.fps
+			segmentWidth: SEGMENT_WIDTH
 		};
 	}
 	render() {
@@ -184,59 +159,21 @@ var TouchStripRoot = class TouchStripRoot {
 		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(() => {
+		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 || 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})`);
+				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;
 			}
@@ -244,121 +181,64 @@ var TouchStripRoot = class TouchStripRoot {
 		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 (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);
-						const nativeCache = this.renderConfig.touchstripCacheMaxBytes > 0 ? getTouchstripNativeCache(this.renderConfig.touchstripCacheMaxBytes) : null;
 						this.renderConfig.onProfile({
-							vnodeToElementMs: 0,
-							fromJsxMs: 0,
-							takumiRenderMs: elapsedMs,
-							hashMs: 0,
+							vnodeConversionMs: 0,
+							takumiRenderMs: 0,
+							hashMs: tEnd - tPhase2,
 							base64Ms: 0,
-							totalMs: elapsedMs,
-							skipped,
-							cacheHit: false,
+							totalMs: tEnd - tPhase2,
+							skipped: false,
+							cacheHit: true,
 							treeDepth: stats.depth,
 							nodeCount: stats.count,
-							cacheStats: nativeCache?.stats ?? null
+							cacheStats: null
 						});
 					}
-					clearDirtyFlags(this.container);
+					this.renderConfig.onRender?.(this.container, "");
+					return;
 				}
-			} 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);
 			}
+			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);
-		} finally {
-			this._rendering = false;
-			if (this._pendingFlush && !this.disposed) {
-				this._pendingFlush = false;
-				await this.doFlush();
-			}
 		}
 	}
 	updateGlobalSettings(settings) {

package/dist/types.d.ts

@@ -1,6 +1,18 @@
 import { ComponentType, ReactNode } from 'react';
-import { Action, Controller, Coordinates, DeviceType, DialAction, KeyAction, Size } from '@elgato/streamdeck';
 import { JsonObject, JsonValue } from '@elgato/utils';
+import { AdapterActionHandle, StreamDeckAdapter } from './adapter/types';
+/** Controller surface type. */
+export type Controller = "Keypad" | "Encoder";
+/** Grid coordinates for a key or encoder on a device. */
+export interface Coordinates {
+    column: number;
+    row: number;
+}
+/** Device grid size (number of key columns and rows). */
+export interface Size {
+    columns: number;
+    rows: number;
+}
 export interface FontConfig {
     name: string;
     data: ArrayBuffer | Buffer;
@@ -61,11 +73,26 @@ export interface TouchStripLayout {
     items: TouchStripLayoutItem[];
 }
 export type EncoderLayout = string | TouchStripLayout;
+/** Takumi renderer backend selection. `"native-binding"` uses the native Rust NAPI addon (`@takumi-rs/core`). `"wasm"` uses the WebAssembly build (`@takumi-rs/wasm`), suitable for WebContainer and browser environments. */
+export type TakumiBackend = "native-binding" | "wasm";
 export interface PluginConfig {
+    /** Stream Deck adapter. Defaults to physicalDevice() (Elgato SDK). */
+    adapter?: StreamDeckAdapter;
     fonts: FontConfig[];
     actions: ActionDefinition[];
     wrapper?: WrapperComponent;
-    renderDebounceMs?: number;
+    /**
+     * Takumi renderer backend.
+     *
+     * - `"native-binding"` — uses `@takumi-rs/core` (native Rust NAPI addon).
+     *   Requires a platform-specific binary (e.g. `@takumi-rs/core-darwin-arm64`).
+     * - `"wasm"` — uses `@takumi-rs/wasm` (WebAssembly build).
+     *   Requires `@takumi-rs/wasm` to be installed. WOFF fonts are not supported
+     *   in this mode — use TTF/OTF only. Worker threads are force-disabled.
+     *
+     * @default "native-binding"
+     */
+    takumi?: TakumiBackend;
     imageFormat?: "png" | "webp";
     caching?: boolean;
     devicePixelRatio?: number;
@@ -76,12 +103,10 @@ export interface PluginConfig {
     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 */
+    /** 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. Automatically disabled when `takumi` is `"wasm"`. @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>;
@@ -112,10 +137,8 @@ export interface ActionConfig<S extends JsonObject = JsonObject> {
     uuid: string;
     key?: ComponentType;
     dial?: ComponentType;
-    /** Full-strip touchstrip component. When set, replaces per-encoder `dial` display with a single shared React tree that spans the entire touch strip. */
+    /** 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;
@@ -127,8 +150,6 @@ export type ActionConfigInput<S extends JsonObject = JsonObject> = [keyof Manife
 ] ? 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;
@@ -139,10 +160,8 @@ export interface ActionDefinition<S extends JsonObject = JsonObject> {
     uuid: string;
     key?: ComponentType;
     dial?: ComponentType;
-    /** Full-strip touchstrip component. When set, replaces per-encoder `dial` display with a single shared React tree that spans the entire touch strip. */
+    /** 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;
@@ -150,7 +169,8 @@ export interface ActionDefinition<S extends JsonObject = JsonObject> {
 }
 export interface DeviceInfo {
     id: string;
-    type: DeviceType;
+    /** Numeric device type matching Elgato DeviceType enum values (e.g. 7 = StreamDeckPlus). */
+    type: number;
     size: Size;
     name: string;
 }
@@ -167,8 +187,8 @@ export interface CanvasInfo {
     type: "key" | "dial" | "touch";
 }
 export interface StreamDeckAccess {
-    action: Action | DialAction | KeyAction;
-    sdk: typeof import('@elgato/streamdeck').default;
+    action: AdapterActionHandle;
+    adapter: StreamDeckAdapter;
 }
 export interface KeyDownPayload {
     settings: JsonObject;
@@ -216,8 +236,6 @@ export interface TouchStripInfo {
     columns: number[];
     /** Width of each encoder segment in pixels (always 200). */
     segmentWidth: number;
-    /** Target frame rate for the animation loop. Pass to `useTick` for matched cadence. */
-    fps: number;
 }
 export interface TouchStripTapPayload {
     /** Absolute tap position across the full strip width. */

package/dist/vite.d.ts

@@ -1,6 +1,6 @@
 import { Plugin } from 'vite';
 import { StreamDeckTargetOptions } from './bundler-shared';
-export type { StreamDeckPlatform, StreamDeckArch, StreamDeckTarget, StreamDeckTargetOptions, } from './bundler-shared';
+export type { StreamDeckPlatform, StreamDeckArch, StreamDeckTarget, StreamDeckTargetOptions, TakumiBackend, } from './bundler-shared';
 export interface StreamDeckReactOptions extends StreamDeckTargetOptions {
     /**
      * The plugin UUID used to restart the plugin after each build

package/dist/vite.js

@@ -1,4 +1,4 @@
-import { NOOP_DEVTOOLS_CODE, NOOP_DEVTOOLS_ID, copyNativeBindings, isLibraryDevtoolsImport, shouldStripDevtools } from "./bundler-shared.js";
+import { NOOP_DEVTOOLS_CODE, NOOP_DEVTOOLS_ID, TAKUMI_NATIVE_LOADER_CODE, TAKUMI_NATIVE_LOADER_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";
@@ -47,10 +47,12 @@ function streamDeckReact(options = {}) {
 		},
 		resolveId(source, importer) {
 			if (stripDevtools && isLibraryDevtoolsImport(source, importer)) return NOOP_DEVTOOLS_ID;
+			if (options.takumi !== "wasm" && source === "@takumi-rs/core") return TAKUMI_NATIVE_LOADER_ID;
 			return resolveFontId(source, importer);
 		},
 		load(id) {
 			if (id === "\0streamdeck-react:noop-devtools") return NOOP_DEVTOOLS_CODE;
+			if (id === "\0streamdeck-react:takumi-native") return TAKUMI_NATIVE_LOADER_CODE;
 			return loadFont(id);
 		},
 		writeBundle() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fcannizzaro/streamdeck-react",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Build Stream Deck plugins with React — render components directly to keys, dials, and touch screens",
   "keywords": [
     "elgato",
@@ -60,29 +60,35 @@
     "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",
-    "xxhash-wasm": "^1.1.0"
+    "@takumi-rs/core": "^0.73.1",
+    "@takumi-rs/helpers": "^0.73.1",
+    "react-reconciler": "^0.33.0"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.8.3",
+    "@happy-dom/global-registrator": "^20.8.4",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/react-reconciler": "^0.33.0",
     "react-dom": "^19.2.4",
     "rollup": "^4.59.0",
-    "vite": "8.0.0-beta.18",
+    "vite": "8.0.0",
     "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {
+    "@elgato/streamdeck": "^2.0.2",
+    "@takumi-rs/wasm": "^0.71.7",
     "react": "^18.0.0 || ^19.0.0",
     "rollup": "^4.0.0",
     "typescript": "^5",
     "vite": "^7.0.0 || ^8.0.0"
   },
   "peerDependenciesMeta": {
+    "@elgato/streamdeck": {
+      "optional": true
+    },
+    "@takumi-rs/wasm": {
+      "optional": true
+    },
     "rollup": {
       "optional": true
     },