@fcannizzaro/streamdeck-react 0.1.11 → 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/action.js

@@ -5,7 +5,6 @@ function defineAction(config) {
 		key: config.key,
 		dial: config.dial,
 		touchStrip: config.touchStrip,
-		touchStripFPS: config.touchStripFPS,
 		dialLayout: config.dialLayout,
 		wrapper: config.wrapper,
 		defaultSettings: config.defaultSettings ?? {}

package/dist/adapter/index.d.ts

@@ -0,0 +1,2 @@
+export type { StreamDeckAdapter, AdapterActionHandle, AdapterActionCallbacks, AdapterWillAppearEvent, AdapterActionDevice, AdapterController, AdapterCoordinates, AdapterSize, AdapterTriggerDescription, AdapterKeyDownPayload, AdapterKeyUpPayload, AdapterDialRotatePayload, AdapterDialPressPayload, AdapterTouchTapPayload, } from './types';
+export { physicalDevice } from './physical-device';

package/dist/adapter/physical-device.d.ts

@@ -0,0 +1,2 @@
+import { StreamDeckAdapter } from './types';
+export declare function physicalDevice(): StreamDeckAdapter;

package/dist/adapter/physical-device.js

@@ -0,0 +1,153 @@
+import streamDeck, { SingletonAction } from "@elgato/streamdeck";
+//#region src/adapter/physical-device.ts
+function wrapSdkAction(action) {
+	return {
+		id: action.id,
+		device: {
+			id: action.device.id,
+			type: action.device.type,
+			size: action.device.size,
+			name: action.device.name
+		},
+		controllerType: action.controllerType,
+		coordinates: "coordinates" in action ? action.coordinates : void 0,
+		async setImage(dataUri) {
+			if ("setImage" in action) await action.setImage(dataUri);
+		},
+		async setTitle(title) {
+			if ("setTitle" in action) await action.setTitle(title);
+		},
+		async showOk() {
+			if ("showOk" in action) await action.showOk();
+		},
+		async showAlert() {
+			await action.showAlert();
+		},
+		async setSettings(settings) {
+			await action.setSettings(settings);
+		},
+		async setFeedback(payload) {
+			if ("setFeedback" in action) await action.setFeedback(payload);
+		},
+		async setFeedbackLayout(layout) {
+			if ("setFeedbackLayout" in action) await action.setFeedbackLayout(layout);
+		},
+		async setTriggerDescription(hints) {
+			if ("setTriggerDescription" in action) await action.setTriggerDescription({
+				rotate: hints.rotate,
+				push: hints.push,
+				touch: hints.touch,
+				longTouch: hints.longTouch
+			});
+		}
+	};
+}
+function physicalDevice() {
+	return {
+		pluginUUID: streamDeck.info.plugin.uuid,
+		async connect() {
+			await streamDeck.connect();
+		},
+		async getGlobalSettings() {
+			return streamDeck.settings.getGlobalSettings();
+		},
+		async setGlobalSettings(settings) {
+			await streamDeck.settings.setGlobalSettings(settings);
+		},
+		onGlobalSettingsChanged(callback) {
+			streamDeck.settings.onDidReceiveGlobalSettings((ev) => {
+				callback(ev.settings);
+			});
+		},
+		registerAction(uuid, callbacks) {
+			const singletonAction = new class extends SingletonAction {
+				manifestId = uuid;
+				onWillAppear(ev) {
+					callbacks.onWillAppear({
+						action: wrapSdkAction(ev.action),
+						payload: {
+							settings: ev.payload.settings,
+							controller: ev.payload.controller,
+							isInMultiAction: ev.payload.isInMultiAction
+						}
+					});
+				}
+				onWillDisappear(ev) {
+					callbacks.onWillDisappear(ev.action.id);
+				}
+				onKeyDown(ev) {
+					callbacks.onKeyDown(ev.action.id, {
+						settings: ev.payload.settings,
+						isInMultiAction: ev.payload.isInMultiAction,
+						state: ev.payload.state,
+						userDesiredState: "userDesiredState" in ev.payload ? ev.payload.userDesiredState : void 0
+					});
+				}
+				onKeyUp(ev) {
+					callbacks.onKeyUp(ev.action.id, {
+						settings: ev.payload.settings,
+						isInMultiAction: ev.payload.isInMultiAction,
+						state: ev.payload.state,
+						userDesiredState: "userDesiredState" in ev.payload ? ev.payload.userDesiredState : void 0
+					});
+				}
+				onDialRotate(ev) {
+					callbacks.onDialRotate(ev.action.id, {
+						ticks: ev.payload.ticks,
+						pressed: ev.payload.pressed,
+						settings: ev.payload.settings
+					});
+				}
+				onDialDown(ev) {
+					callbacks.onDialDown(ev.action.id, {
+						settings: ev.payload.settings,
+						controller: "Encoder"
+					});
+				}
+				onDialUp(ev) {
+					callbacks.onDialUp(ev.action.id, {
+						settings: ev.payload.settings,
+						controller: "Encoder"
+					});
+				}
+				onTouchTap(ev) {
+					callbacks.onTouchTap(ev.action.id, {
+						tapPos: ev.payload.tapPos,
+						hold: ev.payload.hold,
+						settings: ev.payload.settings
+					});
+				}
+				onDidReceiveSettings(ev) {
+					callbacks.onDidReceiveSettings(ev.action.id, ev.payload.settings);
+				}
+				onSendToPlugin(ev) {
+					callbacks.onSendToPlugin(ev.action.id, ev.payload);
+				}
+				onPropertyInspectorDidAppear(ev) {
+					callbacks.onPropertyInspectorDidAppear(ev.action.id);
+				}
+				onPropertyInspectorDidDisappear(ev) {
+					callbacks.onPropertyInspectorDidDisappear(ev.action.id);
+				}
+				onTitleParametersDidChange(ev) {
+					callbacks.onTitleParametersDidChange(ev.action.id, {
+						title: ev.payload.title,
+						settings: ev.payload.settings
+					});
+				}
+			}();
+			streamDeck.actions.registerAction(singletonAction);
+		},
+		async openUrl(url) {
+			await streamDeck.system.openUrl(url);
+		},
+		async switchToProfile(deviceId, profile) {
+			await streamDeck.profiles.switchToProfile(deviceId, profile);
+		},
+		async sendToPropertyInspector(payload) {
+			await streamDeck.ui.sendToPropertyInspector(payload);
+		}
+	};
+}
+//#endregion
+export { physicalDevice };

package/dist/adapter/types.d.ts

@@ -0,0 +1,127 @@
+import { JsonObject, JsonValue } from '@elgato/utils';
+/** Controller surface type. Matches SDK Controller values exactly. */
+export type AdapterController = "Keypad" | "Encoder";
+/** Grid coordinates for a key or encoder on a device. */
+export interface AdapterCoordinates {
+    readonly column: number;
+    readonly row: number;
+}
+/** Device grid size (number of key columns and rows). */
+export interface AdapterSize {
+    readonly columns: number;
+    readonly rows: number;
+}
+/** Hint labels for dial/encoder trigger zones shown on the Stream Deck LCD. */
+export interface AdapterTriggerDescription {
+    rotate?: string;
+    push?: string;
+    touch?: string;
+    longTouch?: string;
+}
+export interface AdapterActionHandle {
+    readonly id: string;
+    readonly device: AdapterActionDevice;
+    readonly controllerType: AdapterController;
+    readonly coordinates?: AdapterCoordinates;
+    /** Push a rendered data URI to the key display. No-op on encoder surfaces. */
+    setImage(dataUri: string): Promise<void>;
+    /** Set the key title overlay. No-op on encoder surfaces. */
+    setTitle(title: string): Promise<void>;
+    /** Flash the OK checkmark on the key. No-op on encoder surfaces. */
+    showOk(): Promise<void>;
+    /** Flash the alert triangle on the action. */
+    showAlert(): Promise<void>;
+    /** Persist action settings to the Stream Deck. */
+    setSettings(settings: JsonObject): Promise<void>;
+    /** Push dial/touchstrip feedback payload. No-op on key surfaces. */
+    setFeedback(payload: Record<string, unknown>): Promise<void>;
+    /** Set the encoder feedback layout (JSON or layout ID). No-op on key surfaces. */
+    setFeedbackLayout(layout: string | Record<string, unknown>): Promise<void>;
+    /** Set dial hint text (rotate, push, touch labels). No-op on key surfaces. */
+    setTriggerDescription(hints: AdapterTriggerDescription): Promise<void>;
+}
+/** Device info as seen from an action event. */
+export interface AdapterActionDevice {
+    readonly id: string;
+    /**
+     * Numeric device type matching Elgato DeviceType enum values.
+     * Using `number` instead of the SDK's enum avoids coupling to specific
+     * device models while remaining compatible with the KEY_SIZES lookup
+     * table in registry.ts.
+     */
+    readonly type: number;
+    readonly size: AdapterSize;
+    readonly name: string;
+}
+/** Event payload provided to onWillAppear callbacks. */
+export interface AdapterWillAppearEvent {
+    action: AdapterActionHandle;
+    payload: {
+        settings: JsonObject;
+        controller: AdapterController;
+        isInMultiAction: boolean;
+    };
+}
+export interface AdapterKeyDownPayload {
+    settings: JsonObject;
+    isInMultiAction: boolean;
+    state?: number;
+    userDesiredState?: number;
+}
+export interface AdapterKeyUpPayload {
+    settings: JsonObject;
+    isInMultiAction: boolean;
+    state?: number;
+    userDesiredState?: number;
+}
+export interface AdapterDialRotatePayload {
+    ticks: number;
+    pressed: boolean;
+    settings: JsonObject;
+}
+export interface AdapterDialPressPayload {
+    settings: JsonObject;
+    controller: "Encoder";
+}
+export interface AdapterTouchTapPayload {
+    tapPos: [x: number, y: number];
+    hold: boolean;
+    settings: JsonObject;
+}
+export interface AdapterActionCallbacks {
+    onWillAppear(ev: AdapterWillAppearEvent): void;
+    onWillDisappear(actionId: string): void;
+    onKeyDown(actionId: string, payload: AdapterKeyDownPayload): void;
+    onKeyUp(actionId: string, payload: AdapterKeyUpPayload): void;
+    onDialRotate(actionId: string, payload: AdapterDialRotatePayload): void;
+    onDialDown(actionId: string, payload: AdapterDialPressPayload): void;
+    onDialUp(actionId: string, payload: AdapterDialPressPayload): void;
+    onTouchTap(actionId: string, payload: AdapterTouchTapPayload): void;
+    onDidReceiveSettings(actionId: string, settings: JsonObject): void;
+    onSendToPlugin(actionId: string, payload: JsonValue): void;
+    onPropertyInspectorDidAppear(actionId: string): void;
+    onPropertyInspectorDidDisappear(actionId: string): void;
+    onTitleParametersDidChange(actionId: string, payload: {
+        title: string;
+        settings: JsonObject;
+    }): void;
+}
+export interface StreamDeckAdapter {
+    /** Plugin UUID, used for devtools identification. */
+    readonly pluginUUID: string;
+    /** Initialize the adapter and connect to the backend. */
+    connect(): Promise<void>;
+    /** Retrieve plugin-wide global settings. */
+    getGlobalSettings<T extends JsonObject = JsonObject>(): Promise<T>;
+    /** Persist plugin-wide global settings. */
+    setGlobalSettings<T extends JsonObject = JsonObject>(settings: T): Promise<void>;
+    /** Subscribe to external global settings changes (e.g. from Property Inspector). */
+    onGlobalSettingsChanged(callback: (settings: JsonObject) => void): void;
+    registerAction(uuid: string, callbacks: AdapterActionCallbacks): void;
+    /** Open a URL in the user's default browser. */
+    openUrl(url: string): Promise<void>;
+    /** Switch the active Stream Deck profile. */
+    switchToProfile(deviceId: string, profile: string): Promise<void>;
+    /** Send a payload to the Property Inspector. */
+    sendToPropertyInspector(payload: JsonValue): Promise<void>;
+}

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/devtools/bridge.d.ts

@@ -63,7 +63,7 @@ export declare class DevtoolsBridge implements RegistryObserver {
     private static readonly TB_PREFIX;
     private handleHighlight;
     /**
-     * Restore a highlighted action or touchstrip to its normal state.
+     * Restore a highlighted action or TouchStrip to its normal state.
      * Un-suppresses hardware pushes and restores the original image(s).
      */
     private restoreHighlight;
@@ -73,7 +73,7 @@ export declare class DevtoolsBridge implements RegistryObserver {
     private broadcastHighlightRender;
     /**
      * Clear highlight URIs for the given actionId.
-     * For touchstrip IDs, clears all per-segment keys (touchstrip:*:seg:N).
+     * For TouchStrip IDs, clears all per-segment keys (touchStrip:*:seg:N).
      * For regular actions, clears the single actionId key.
      */
     private broadcastHighlightClear;

package/dist/devtools/bridge.js

@@ -141,7 +141,7 @@ var DevtoolsBridge = class DevtoolsBridge {
 			columns: /* @__PURE__ */ new Map()
 		});
 		this.eventBusOwners.set(root.eventBus, {
-			actionId: `touchstrip:${deviceId}`,
+			actionId: `touchStrip:${deviceId}`,
 			uuid: ""
 		});
 	}
@@ -339,8 +339,7 @@ var DevtoolsBridge = class DevtoolsBridge {
 	/** Convert internal RenderProfile to wire-protocol ProfileData. */
 	toProfileData(profile) {
 		return {
-			vnodeToElementMs: profile.vnodeToElementMs,
-			fromJsxMs: profile.fromJsxMs,
+			vnodeConversionMs: profile.vnodeConversionMs,
 			takumiRenderMs: profile.takumiRenderMs,
 			hashMs: profile.hashMs,
 			base64Ms: profile.base64Ms,
@@ -363,7 +362,7 @@ var DevtoolsBridge = class DevtoolsBridge {
 			});
 		}
 		const msg = {
-			type: "render:touchstrip",
+			type: "render:touchStrip",
 			ts: Date.now(),
 			deviceId,
 			canvas: {
@@ -377,7 +376,7 @@ var DevtoolsBridge = class DevtoolsBridge {
 		};
 		this.server.broadcast(msg);
 	}
-	static TB_PREFIX = "touchstrip:";
+	static TB_PREFIX = "touchStrip:";
 	async handleHighlight(actionId, nodeId) {
 		try {
 			const prevId = this.highlightedActionId;
@@ -419,7 +418,7 @@ var DevtoolsBridge = class DevtoolsBridge {
 		} catch {}
 	}
 	/**
-	* Restore a highlighted action or touchstrip to its normal state.
+	* Restore a highlighted action or TouchStrip to its normal state.
 	* Un-suppresses hardware pushes and restores the original image(s).
 	*/
 	async restoreHighlight(id) {
@@ -454,7 +453,7 @@ var DevtoolsBridge = class DevtoolsBridge {
 			const segmentWidth = 200;
 			const segmentHeight = 100;
 			const fullWidth = (Math.max(...columns) + 1) * segmentWidth;
-			const result = await renderTouchStripWithHighlight(tb.root.vcontainer, fullWidth, segmentHeight, columns, segmentWidth, this.renderConfig.touchstripImageFormat, this.renderConfig, nodeId);
+			const result = await renderTouchStripWithHighlight(tb.root.vcontainer, fullWidth, segmentHeight, columns, segmentWidth, this.renderConfig, nodeId);
 			if (result && this.highlightedActionId === actionId && this.highlightedNodeId === nodeId) {
 				await tb.root.pushSegmentImages(result.segmentUris);
 				for (const [col, uri] of result.segmentUris) this.broadcastHighlightRender(`${actionId}:seg:${col}`, uri);
@@ -473,7 +472,7 @@ var DevtoolsBridge = class DevtoolsBridge {
 	}
 	/**
 	* Clear highlight URIs for the given actionId.
-	* For touchstrip IDs, clears all per-segment keys (touchstrip:*:seg:N).
+	* For TouchStrip IDs, clears all per-segment keys (touchStrip:*:seg:N).
 	* For regular actions, clears the single actionId key.
 	*/
 	broadcastHighlightClear(id) {

package/dist/devtools/highlight.d.ts

@@ -1,4 +1,3 @@
-import { OutputFormat } from '@takumi-rs/core';
 import { VContainer } from '../reconciler/vnode';
 import { RenderConfig } from '../render/pipeline';
 export declare function renderWithHighlight(container: VContainer, width: number, height: number, config: RenderConfig, targetNid: number): Promise<string | null>;
@@ -6,4 +5,4 @@ export interface TouchStripHighlightResult {
     /** Per-column data URIs for ALL segments. */
     segmentUris: Map<number, string>;
 }
-export declare function renderTouchStripWithHighlight(container: VContainer, fullWidth: number, segmentHeight: number, columns: number[], segmentWidth: number, format: OutputFormat, config: RenderConfig, targetNid: number): Promise<TouchStripHighlightResult | null>;
+export declare function renderTouchStripWithHighlight(container: VContainer, fullWidth: number, segmentHeight: number, columns: number[], segmentWidth: number, config: RenderConfig, targetNid: number): Promise<TouchStripHighlightResult | null>;

package/dist/devtools/highlight.js

@@ -18,7 +18,8 @@ async function renderWithHighlight(container, width, height, config, targetNid)
 		devicePixelRatio: config.devicePixelRatio
 	}), config.imageFormat);
 }
-async function renderTouchStripWithHighlight(container, fullWidth, segmentHeight, columns, segmentWidth, format, config, targetNid) {
+var TOUCHSTRIP_HIGHLIGHT_FORMAT = "png";
+async function renderTouchStripWithHighlight(container, fullWidth, segmentHeight, columns, segmentWidth, config, targetNid) {
 	if (container.children.length === 0) return null;
 	const effectiveNid = resolveTargetNid(container, targetNid);
 	const rootNode = buildTakumiRoot(container);
@@ -50,10 +51,10 @@ async function renderTouchStripWithHighlight(container, fullWidth, segmentHeight
 		const segBuffer = await config.renderer.render(clipNode, {
 			width: segmentWidth,
 			height: segmentHeight,
-			format,
+			format: TOUCHSTRIP_HIGHLIGHT_FORMAT,
 			devicePixelRatio: config.devicePixelRatio
 		});
-		segmentUris.set(column, bufferToDataUri(segBuffer, format));
+		segmentUris.set(column, bufferToDataUri(segBuffer, TOUCHSTRIP_HIGHLIGHT_FORMAT));
 	});
 	await Promise.all(segmentPromises);
 	return { segmentUris };

package/dist/devtools/types.d.ts

@@ -150,7 +150,7 @@ export interface RenderMessage extends BaseMessage {
     profile?: ProfileData;
 }
 export interface TouchStripRenderMessage extends BaseMessage {
-    type: "render:touchstrip";
+    type: "render:touchStrip";
     deviceId: string;
     canvas: {
         width: number;
@@ -179,7 +179,7 @@ export interface LifecycleMessage extends BaseMessage {
     event: "appear" | "disappear";
     actionId: string;
     actionUuid: string;
-    surface: "key" | "dial" | "touch" | "touchstrip";
+    surface: "key" | "dial" | "touch" | "touchStrip";
     device: {
         id: string;
         type: number;
@@ -203,8 +203,8 @@ export interface HighlightRenderMessage extends BaseMessage {
 }
 /** Per-render pipeline timing data, embedded in RenderMessage. */
 export interface ProfileData {
-    vnodeToElementMs: number;
-    fromJsxMs: number;
+    /** Time to convert VNode tree to Takumi node tree (ms). */
+    vnodeConversionMs: number;
     takumiRenderMs: number;
     hashMs: number;
     base64Ms: number;
@@ -234,7 +234,7 @@ export interface MetricsData {
     /** Image cache memory usage in bytes. */
     imageCacheBytes: number;
     /** TouchStrip cache memory usage in bytes. */
-    touchstripCacheBytes: number;
+    touchStripCacheBytes: number;
 }
 export interface MetricsMessage extends BaseMessage {
     type: "metrics";

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 {};