@fcannizzaro/streamdeck-react 0.1.12 → 0.1.13

package/README.md

@@ -63,11 +63,13 @@ export const counterAction = defineAction({
 Register it in your plugin entrypoint:
 
 ```ts
-import { createPlugin } from "@fcannizzaro/streamdeck-react";
+import { createPlugin, googleFont } from "@fcannizzaro/streamdeck-react";
 import { counterAction } from "./actions/counter.tsx";
 
+const inter = await googleFont("Inter");
+
 const plugin = createPlugin({
-  fonts: [],
+  fonts: [inter],
   actions: [counterAction],
 });
 
@@ -83,12 +85,13 @@ await plugin.connect();
 
 ## Samples
 
-- `samples/counter/` - local state, settings hook, dial interaction
-- `samples/zustand/` - shared external store across multiple actions
-- `samples/jotai/` - shared atom state with a plugin-level wrapper
-- `samples/pokemon/` - richer plugin example with custom wrappers
-- `samples/snake/` - snake game on the Stream Deck+ touch strip using dial controls and touch tap
-- `samples/weather/` - weather forecast dials with animated detail panels and a shared Zustand store
+- `samples/counter/` — local state, persisted settings, dial interaction
+- `samples/zustand/` — shared state across keys via a module-scope Zustand store
+- `samples/jotai/` — shared atom state with a plugin-level Jotai Provider wrapper
+- `samples/pokemon/` — data fetching with TanStack Query and remote image rendering
+- `samples/animation/` — spring bounce, fade-slide, and spring dial animations
+- `samples/snake/` — snake game on the Stream Deck+ TouchStrip using dial controls and touch tap
+- `samples/weather/` — weather forecast dials with animated detail panels and a shared Zustand store
 
 ## DevTools
 

package/dist/bundler-shared.d.ts

@@ -4,8 +4,16 @@ export interface StreamDeckTarget {
     platform: StreamDeckPlatform;
     arch: StreamDeckArch;
 }
+/** Takumi renderer backend selection. Mirrors the runtime `TakumiBackend` type for build-time configuration. */
+export type TakumiBackend = "native-binding" | "wasm";
 export interface StreamDeckTargetOptions {
     targets?: StreamDeckTarget[];
+    /**
+     * Takumi renderer backend. When `"wasm"`, native `.node` binding
+     * copying is skipped entirely during the build.
+     * @default "native-binding"
+     */
+    takumi?: TakumiBackend;
 }
 export interface ResolvedTarget extends StreamDeckTarget {
     pkg: string;
@@ -17,6 +25,8 @@ export declare function isArch(value: string): value is StreamDeckArch;
 export declare function isDevelopmentMode(watchMode: boolean | undefined): boolean;
 export declare const NOOP_DEVTOOLS_ID = "\0streamdeck-react:noop-devtools";
 export declare const NOOP_DEVTOOLS_CODE = "export function startDevtoolsServer() {}";
+export declare const TAKUMI_NATIVE_LOADER_ID = "\0streamdeck-react:takumi-native";
+export declare const TAKUMI_NATIVE_LOADER_CODE: string;
 /**
  * Returns true when devtools should be stripped from the bundle.
  * Only strips in explicit production mode (NODE_ENV=production) to avoid

package/dist/bundler-shared.js

@@ -40,6 +40,32 @@ function isDevelopmentMode(watchMode) {
 var NOOP_DEVTOOLS_ID = "\0streamdeck-react:noop-devtools";
 var NOOP_DEVTOOLS_CODE = "export function startDevtoolsServer() {}";
 var DEVTOOLS_IMPORT_SOURCE = "./devtools/index.js";
+var TAKUMI_NATIVE_LOADER_ID = "\0streamdeck-react:takumi-native";
+var TAKUMI_NATIVE_LOADER_CODE = `
+import { createRequire } from "node:module";
+const require = createRequire(import.meta.url);
+let binding = null;
+if (process.platform === "darwin") {
+  if (process.arch === "arm64") {
+    try { binding = require("./core.darwin-arm64.node"); } catch {}
+  } else if (process.arch === "x64") {
+    try { binding = require("./core.darwin-x64.node"); } catch {}
+  }
+} else if (process.platform === "win32") {
+  if (process.arch === "arm64") {
+    try { binding = require("./core.win32-arm64-msvc.node"); } catch {}
+  } else if (process.arch === "x64") {
+    try { binding = require("./core.win32-x64-msvc.node"); } catch {}
+  }
+}
+if (!binding) {
+  throw new Error(
+    "[@fcannizzaro/streamdeck-react] Failed to load @takumi-rs/core native binding for " +
+    process.platform + "-" + process.arch
+  );
+}
+export const { Renderer, OutputFormat, DitheringAlgorithm, AnimationOutputFormat, extractResourceUrls } = binding;
+`.trim();
 /**
 * Returns true when devtools should be stripped from the bundle.
 * Only strips in explicit production mode (NODE_ENV=production) to avoid
@@ -92,6 +118,7 @@ function expandTargets(targets) {
 * In production: missing bindings throw an error (the plugin won't work).
 */
 function copyNativeBindings(outDir, isDevelopment, options, warn) {
+	if (options.takumi === "wasm") return;
 	try {
 		const requestedTargets = normalizeTargetRequests(options, isDevelopment);
 		if (requestedTargets.length === 0) {
@@ -129,4 +156,4 @@ function copyNativeBindings(outDir, isDevelopment, options, warn) {
 	}
 }
 //#endregion
-export { NOOP_DEVTOOLS_CODE, NOOP_DEVTOOLS_ID, copyNativeBindings, isDevelopmentMode, isLibraryDevtoolsImport, shouldStripDevtools };
+export { NOOP_DEVTOOLS_CODE, NOOP_DEVTOOLS_ID, TAKUMI_NATIVE_LOADER_CODE, TAKUMI_NATIVE_LOADER_ID, copyNativeBindings, isDevelopmentMode, isLibraryDevtoolsImport, shouldStripDevtools };

package/dist/font-inline.js

@@ -1,7 +1,7 @@
+import { readFile } from "node:fs/promises";
 import { dirname, resolve } from "node:path";
 import { createRequire } from "node:module";
 import { realpathSync } from "node:fs";
-import { readFile } from "node:fs/promises";
 //#region src/font-inline.ts
 var FONT_RE = /\.(ttf|otf|woff2?)$/;
 /**

package/dist/google-font.d.ts

@@ -0,0 +1,61 @@
+import { FontConfig } from './types';
+type FontWeight = FontConfig["weight"];
+type FontStyle = FontConfig["style"];
+export interface GoogleFontVariant {
+    weight?: FontWeight;
+    style?: FontStyle;
+}
+/**
+ * Fetch a Google Font as a ready-to-use `FontConfig`.
+ *
+ * Downloads TTF font data directly from Google Fonts — no npm package
+ * needed. The returned config can be passed straight into
+ * `createPlugin({ fonts: [...] })`.
+ *
+ * Font files are cached to `.google-fonts/` in the current working
+ * directory. Subsequent calls read from disk without network access.
+ *
+ * @param family - The Google Font family name (e.g. `"Inter"`, `"Roboto"`).
+ * @returns A `FontConfig` with weight 400 and normal style.
+ *
+ * @example
+ * ```ts
+ * const inter = await googleFont("Inter");
+ * createPlugin({ fonts: [inter], actions: [...] });
+ * ```
+ */
+export declare function googleFont(family: string): Promise<FontConfig>;
+/**
+ * Fetch a specific weight/style variant of a Google Font.
+ *
+ * @param family  - The Google Font family name.
+ * @param variant - Weight and/or style to fetch.
+ * @returns A single `FontConfig`.
+ *
+ * @example
+ * ```ts
+ * const bold = await googleFont("Inter", { weight: 700 });
+ * ```
+ */
+export declare function googleFont(family: string, variant: GoogleFontVariant): Promise<FontConfig>;
+/**
+ * Fetch multiple weight/style variants of a Google Font in one call.
+ *
+ * All variants are fetched in parallel for maximum throughput.
+ *
+ * @param family   - The Google Font family name.
+ * @param variants - Array of weight/style combinations to fetch.
+ * @returns An array of `FontConfig` objects, one per variant.
+ *
+ * @example
+ * ```ts
+ * const fonts = await googleFont("Inter", [
+ *   { weight: 400 },
+ *   { weight: 700 },
+ *   { weight: 700, style: "italic" },
+ * ]);
+ * createPlugin({ fonts, actions: [...] });
+ * ```
+ */
+export declare function googleFont(family: string, variants: GoogleFontVariant[]): Promise<FontConfig[]>;
+export {};

package/dist/google-font.js

@@ -0,0 +1,124 @@
+import { access, mkdir, readFile, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+//#region src/google-font.ts
+var TTF_USER_AGENT = "Mozilla/4.0";
+var GOOGLE_FONTS_CSS2_BASE = "https://fonts.googleapis.com/css2";
+var CACHE_DIR = ".google-fonts";
+function sanitizeName(family) {
+	return family.toLowerCase().replace(/\s+/g, "-");
+}
+function cacheFilePath(family, weight, style) {
+	return join(process.cwd(), CACHE_DIR, `${sanitizeName(family)}-${weight}-${style}.ttf`);
+}
+async function fileExists(path) {
+	try {
+		await access(path);
+		return true;
+	} catch {
+		return false;
+	}
+}
+async function ensureCacheDir() {
+	await mkdir(join(process.cwd(), CACHE_DIR), { recursive: true });
+}
+async function readCached(family, weight, style) {
+	const path = cacheFilePath(family, weight, style);
+	if (!await fileExists(path)) return null;
+	return {
+		name: family,
+		data: (await readFile(path)).buffer,
+		weight,
+		style
+	};
+}
+async function writeCache(family, weight, style, data) {
+	await ensureCacheDir();
+	await writeFile(cacheFilePath(family, weight, style), Buffer.from(data));
+}
+function buildCss2Url(family, variants) {
+	const hasItalic = variants.some((v) => v.style === "italic");
+	const encodedFamily = encodeURIComponent(family);
+	if (hasItalic) {
+		const specs = variants.map((v) => {
+			return `${v.style === "italic" ? 1 : 0},${v.weight ?? 400}`;
+		});
+		specs.sort();
+		return `${GOOGLE_FONTS_CSS2_BASE}?family=${encodedFamily}:ital,wght@${specs.join(";")}`;
+	}
+	const weights = variants.map((v) => v.weight ?? 400);
+	weights.sort((a, b) => a - b);
+	return `${GOOGLE_FONTS_CSS2_BASE}?family=${encodedFamily}:wght@${weights.join(";")}`;
+}
+function parseFontFaces(css) {
+	const results = [];
+	const seen = /* @__PURE__ */ new Set();
+	const blockRegex = /@font-face\s*\{([^}]+)\}/g;
+	let match;
+	while ((match = blockRegex.exec(css)) !== null) {
+		const block = match[1];
+		const urlMatch = block.match(/url\(([^)]+)\)/);
+		const weightMatch = block.match(/font-weight:\s*(\d+)/);
+		const styleMatch = block.match(/font-style:\s*(normal|italic)/);
+		if (!urlMatch?.[1]) continue;
+		const weight = Number(weightMatch?.[1] ?? 400);
+		const style = styleMatch?.[1] ?? "normal";
+		const key = `${weight}:${style}`;
+		if (seen.has(key)) continue;
+		seen.add(key);
+		results.push({
+			url: urlMatch[1],
+			weight,
+			style
+		});
+	}
+	return results;
+}
+async function fetchGoogleFonts(family, variants) {
+	const results = [];
+	const uncached = [];
+	for (const v of variants) {
+		const weight = v.weight ?? 400;
+		const style = v.style ?? "normal";
+		const cached = await readCached(family, weight, style);
+		if (cached) results.push(cached);
+		else uncached.push({
+			weight,
+			style
+		});
+	}
+	if (uncached.length === 0) return results;
+	const url = buildCss2Url(family, uncached);
+	const cssResponse = await fetch(url, { headers: { "User-Agent": TTF_USER_AGENT } });
+	if (!cssResponse.ok) throw new Error(`Google Fonts: failed to fetch CSS for "${family}" (HTTP ${cssResponse.status})`);
+	const faces = parseFontFaces(await cssResponse.text());
+	if (faces.length === 0) throw new Error(`Google Fonts: no font faces found in CSS response for "${family}". Verify the family name is correct at https://fonts.google.com`);
+	const downloaded = await Promise.all(faces.map(async (face) => {
+		const fontResponse = await fetch(face.url);
+		if (!fontResponse.ok) throw new Error(`Google Fonts: failed to download font file for "${family}" weight ${face.weight} (HTTP ${fontResponse.status})`);
+		const data = await fontResponse.arrayBuffer();
+		writeCache(family, face.weight, face.style, data).catch(() => {});
+		return {
+			name: family,
+			data,
+			weight: face.weight,
+			style: face.style
+		};
+	}));
+	return [...results, ...downloaded];
+}
+async function googleFont(family, variantOrVariants) {
+	if (variantOrVariants === void 0) return (await fetchGoogleFonts(family, [{
+		weight: 400,
+		style: "normal"
+	}]))[0];
+	if (!Array.isArray(variantOrVariants)) return (await fetchGoogleFonts(family, [{
+		weight: variantOrVariants.weight ?? 400,
+		style: variantOrVariants.style ?? "normal"
+	}]))[0];
+	return fetchGoogleFonts(family, variantOrVariants.map((v) => ({
+		weight: v.weight ?? 400,
+		style: v.style ?? "normal"
+	})));
+}
+//#endregion
+export { googleFont };

package/dist/index.d.ts

@@ -23,7 +23,9 @@ export { ProgressBar } from './components/ProgressBar';
 export { CircularGauge } from './components/CircularGauge';
 export { ErrorBoundary } from './components/ErrorBoundary';
 export { tw } from './tw/index';
-export type { PluginConfig, FontConfig, ActionConfig, ActionConfigInput, ActionDefinition, ActionUUID, ManifestActions, EncoderLayout, WrapperComponent, Controller, Coordinates, Size, DeviceInfo, ActionInfo, CanvasInfo, TouchStripLayout, TouchStripLayoutItem, KeyDownPayload, KeyUpPayload, DialRotatePayload, DialPressPayload, TouchTapPayload, DialHints, StreamDeckAccess, TouchStripInfo, TouchStripTapPayload, TouchStripDialRotatePayload, TouchStripDialPressPayload, } from './types';
+export { googleFont } from './google-font';
+export type { GoogleFontVariant } from './google-font';
+export type { PluginConfig, Plugin, FontConfig, ActionConfig, ActionConfigInput, ActionDefinition, ActionUUID, ManifestActions, EncoderLayout, WrapperComponent, TakumiBackend, Controller, Coordinates, Size, DeviceInfo, ActionInfo, CanvasInfo, TouchStripLayout, TouchStripLayoutItem, KeyDownPayload, KeyUpPayload, DialRotatePayload, DialPressPayload, TouchTapPayload, DialHints, StreamDeckAccess, TouchStripInfo, TouchStripTapPayload, TouchStripDialRotatePayload, TouchStripDialPressPayload, } from './types';
 export type { TapOptions, LongPressOptions, DoubleTapOptions } from './hooks/gestures';
 export type { BoxProps } from './components/Box';
 export type { TextProps } from './components/Text';

package/dist/index.js

@@ -18,4 +18,5 @@ import { ProgressBar } from "./components/ProgressBar.js";
 import { CircularGauge } from "./components/CircularGauge.js";
 import { ErrorBoundary } from "./components/ErrorBoundary.js";
 import { tw } from "./tw/index.js";
-export { Box, CircularGauge, Easings, ErrorBoundary, Icon, Image, ProgressBar, SpringPresets, Text, createPlugin, defineAction, physicalDevice, tw, useAction, useCanvas, useDevice, useDialDown, useDialHint, useDialRotate, useDialUp, useDoubleTap, useGlobalSettings, useInterval, useKeyDown, useKeyUp, useLongPress, useOpenUrl, usePrevious, usePropertyInspector, useSendToPI, useSettings, useShowAlert, useShowOk, useSpring, useStreamDeck, useSwitchProfile, useTap, useTick, useTimeout, useTitle, useTouchStrip, useTouchStripDialDown, useTouchStripDialRotate, useTouchStripDialUp, useTouchStripTap, useTouchTap, useTween, useWillAppear, useWillDisappear };
+import { googleFont } from "./google-font.js";
+export { Box, CircularGauge, Easings, ErrorBoundary, Icon, Image, ProgressBar, SpringPresets, Text, createPlugin, defineAction, googleFont, physicalDevice, tw, useAction, useCanvas, useDevice, useDialDown, useDialHint, useDialRotate, useDialUp, useDoubleTap, useGlobalSettings, useInterval, useKeyDown, useKeyUp, useLongPress, useOpenUrl, usePrevious, usePropertyInspector, useSendToPI, useSettings, useShowAlert, useShowOk, useSpring, useStreamDeck, useSwitchProfile, useTap, useTick, useTimeout, useTitle, useTouchStrip, useTouchStripDialDown, useTouchStripDialRotate, useTouchStripDialUp, useTouchStripTap, useTouchTap, useTween, useWillAppear, useWillDisappear };

package/dist/plugin.js

@@ -7,46 +7,55 @@ import { Renderer } from "@takumi-rs/core";
 //#region src/plugin.ts
 function createPlugin(config) {
 	const adapter = config.adapter ?? physicalDevice();
-	const renderer = new Renderer({ fonts: config.fonts.map((f) => ({
-		name: f.name,
-		data: f.data,
-		weight: f.weight,
-		style: f.style
-	})) });
-	const renderPool = config.useWorker !== false ? new RenderPool(config.fonts) : null;
-	const renderConfig = {
-		renderer,
-		imageFormat: config.imageFormat ?? "png",
-		caching: config.caching ?? true,
-		devicePixelRatio: config.devicePixelRatio ?? 1,
-		debug: config.debug ?? process.env.NODE_ENV !== "production",
-		imageCacheMaxBytes: config.imageCacheMaxBytes ?? 16 * 1024 * 1024,
-		touchStripCacheMaxBytes: config.touchStripCacheMaxBytes ?? 8 * 1024 * 1024,
-		renderPool
-	};
-	const registry = new RootRegistry(renderConfig, adapter, async (settings) => {
-		await adapter.setGlobalSettings(settings);
-	}, config.wrapper);
-	adapter.getGlobalSettings().then((gs) => {
-		registry.setGlobalSettings(gs);
-	}).catch((err) => {
-		console.error("[@fcannizzaro/streamdeck-react] Failed to load global settings:", err);
-	});
-	adapter.onGlobalSettingsChanged((settings) => {
-		registry.setGlobalSettings(settings);
-	});
-	for (const definition of config.actions) registerActionWithAdapter(adapter, definition, registry, config.onActionError);
-	if (renderConfig.debug) metrics.enable();
-	if (config.devtools) startDevtoolsServer({
-		devtoolsName: adapter.pluginUUID,
-		registry,
-		renderConfig
-	});
 	return { async connect() {
+		const takumiMode = config.takumi ?? "native-binding";
+		const renderPool = (takumiMode === "wasm" ? false : config.useWorker !== false) ? new RenderPool(config.fonts) : null;
+		const renderConfig = {
+			renderer: await initializeRenderer(takumiMode, config.fonts),
+			imageFormat: config.imageFormat ?? "png",
+			caching: config.caching ?? true,
+			devicePixelRatio: config.devicePixelRatio ?? 1,
+			debug: config.debug ?? process.env.NODE_ENV !== "production",
+			imageCacheMaxBytes: config.imageCacheMaxBytes ?? 16 * 1024 * 1024,
+			touchStripCacheMaxBytes: config.touchStripCacheMaxBytes ?? 8 * 1024 * 1024,
+			renderPool
+		};
+		const registry = new RootRegistry(renderConfig, adapter, async (settings) => {
+			await adapter.setGlobalSettings(settings);
+		}, config.wrapper);
+		adapter.getGlobalSettings().then((gs) => {
+			registry.setGlobalSettings(gs);
+		}).catch((err) => {
+			console.error("[@fcannizzaro/streamdeck-react] Failed to load global settings:", err);
+		});
+		adapter.onGlobalSettingsChanged((settings) => {
+			registry.setGlobalSettings(settings);
+		});
+		for (const definition of config.actions) registerActionWithAdapter(adapter, definition, registry, config.onActionError);
+		if (renderConfig.debug) metrics.enable();
+		if (config.devtools) startDevtoolsServer({
+			devtoolsName: adapter.pluginUUID,
+			registry,
+			renderConfig
+		});
 		if (renderPool != null) renderPool.initialize().catch(() => {});
 		await adapter.connect();
 	} };
 }
+async function initializeRenderer(mode, fonts) {
+	const fontData = fonts.map((f) => ({
+		name: f.name,
+		data: f.data,
+		weight: f.weight,
+		style: f.style
+	}));
+	if (mode === "wasm") {
+		const wasm = await import("@takumi-rs/wasm");
+		await wasm.default();
+		return new wasm.Renderer({ fonts: fontData });
+	}
+	return new Renderer({ fonts: fontData });
+}
 function registerActionWithAdapter(adapter, definition, registry, onError) {
 	const handleError = (actionId, err) => {
 		const error = err instanceof Error ? err : new Error(String(err));

package/dist/rollup.d.ts

@@ -1,6 +1,6 @@
 import { Plugin } from 'rollup';
 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 StreamDeckRollupOptions extends StreamDeckTargetOptions {
     /**
      * Path to the plugin `manifest.json`. When omitted, the plugin

package/dist/rollup.js

@@ -1,4 +1,4 @@
-import { NOOP_DEVTOOLS_CODE, NOOP_DEVTOOLS_ID, copyNativeBindings, isDevelopmentMode, isLibraryDevtoolsImport, shouldStripDevtools } from "./bundler-shared.js";
+import { NOOP_DEVTOOLS_CODE, NOOP_DEVTOOLS_ID, TAKUMI_NATIVE_LOADER_CODE, TAKUMI_NATIVE_LOADER_ID, copyNativeBindings, isDevelopmentMode, isLibraryDevtoolsImport, shouldStripDevtools } from "./bundler-shared.js";
 import { loadFont, resolveFontId } from "./font-inline.js";
 import { generateManifestTypes } from "./manifest-codegen.js";
 import { dirname, resolve } from "node:path";
@@ -39,6 +39,7 @@ function streamDeckReact(options = {}) {
 			order: "pre",
 			handler(source, importer) {
 				if (shouldStripDevtools(this.meta.watchMode) && isLibraryDevtoolsImport(source, importer)) return NOOP_DEVTOOLS_ID;
+				if (options.takumi !== "wasm" && source === "@takumi-rs/core") return TAKUMI_NATIVE_LOADER_ID;
 				return resolveFontId(source, importer);
 			}
 		},
@@ -46,6 +47,7 @@ function streamDeckReact(options = {}) {
 			order: "pre",
 			handler(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);
 			}
 		},

package/dist/roots/registry.js

@@ -5,44 +5,44 @@ import { TouchStripRoot } from "./touchstrip-root.js";
 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,
@@ -72,8 +72,8 @@ function getCanvasInfo(deviceType, surfaceType) {
 	};
 	return {
 		...KEY_SIZES[deviceType] ?? {
-			width: 72,
-			height: 72
+			width: 144,
+			height: 144
 		},
 		type: "key"
 	};

package/dist/types.d.ts

@@ -73,12 +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;
+    /**
+     * 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;
@@ -91,7 +105,7 @@ export interface PluginConfig {
     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 */
+    /** Offload Takumi rendering to a worker thread. Set to false to disable. Automatically disabled when `takumi` is `"wasm"`. @default true */
     useWorker?: boolean;
 }
 export interface Plugin {

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.12",
+  "version": "0.1.13",
   "description": "Build Stream Deck plugins with React — render components directly to keys, dials, and touch screens",
   "keywords": [
     "elgato",
@@ -60,22 +60,23 @@
     "test": "bun test ./src"
   },
   "dependencies": {
-    "@takumi-rs/core": "^0.71.7",
-    "@takumi-rs/helpers": "^0.71.7",
+    "@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",
@@ -85,6 +86,9 @@
     "@elgato/streamdeck": {
       "optional": true
     },
+    "@takumi-rs/wasm": {
+      "optional": true
+    },
     "rollup": {
       "optional": true
     },