@fcannizzaro/streamdeck-react 0.1.10 → 0.1.12

package/dist/render/svg.js

@@ -0,0 +1,139 @@
+//#region src/render/svg.ts
+var SVG_CAMEL_ATTRS = new Set([
+	"accentHeight",
+	"alignmentBaseline",
+	"arabicForm",
+	"baselineShift",
+	"capHeight",
+	"clipPath",
+	"clipPathUnits",
+	"clipRule",
+	"colorInterpolation",
+	"colorInterpolationFilters",
+	"colorProfile",
+	"colorRendering",
+	"enableBackground",
+	"fillOpacity",
+	"fillRule",
+	"floodColor",
+	"floodOpacity",
+	"fontFamily",
+	"fontSize",
+	"fontSizeAdjust",
+	"fontStretch",
+	"fontStyle",
+	"fontVariant",
+	"fontWeight",
+	"glyphName",
+	"glyphOrientationHorizontal",
+	"glyphOrientationVertical",
+	"horizAdvX",
+	"horizOriginX",
+	"imageRendering",
+	"letterSpacing",
+	"lightingColor",
+	"markerEnd",
+	"markerMid",
+	"markerStart",
+	"overlinePosition",
+	"overlineThickness",
+	"paintOrder",
+	"pointerEvents",
+	"preserveAspectRatio",
+	"shapeRendering",
+	"stopColor",
+	"stopOpacity",
+	"strokeDasharray",
+	"strokeDashoffset",
+	"strokeLinecap",
+	"strokeLinejoin",
+	"strokeMiterlimit",
+	"strokeOpacity",
+	"strokeWidth",
+	"textAnchor",
+	"textDecoration",
+	"textRendering",
+	"transformOrigin",
+	"underlinePosition",
+	"underlineThickness",
+	"unicodeBidi",
+	"unicodeRange",
+	"unitsPerEm",
+	"vAlphabetic",
+	"vHanging",
+	"vIdeographic",
+	"vMathematical",
+	"vectorEffect",
+	"vertAdvY",
+	"vertOriginX",
+	"vertOriginY",
+	"wordSpacing",
+	"writingMode"
+]);
+var SKIP_PROPS = new Set([
+	"children",
+	"key",
+	"ref",
+	"__self",
+	"__source"
+]);
+function camelToKebab(str) {
+	return str.replace(/[A-Z]/g, (ch) => `-${ch.toLowerCase()}`);
+}
+function escapeAttr(value) {
+	return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function serializeStyle(style) {
+	const parts = [];
+	for (const key of Object.keys(style)) {
+		const value = style[key];
+		if (value == null) continue;
+		parts.push(`${camelToKebab(key)}:${String(value).trim()}`);
+	}
+	return parts.join(";");
+}
+function serializeAttr(key, value) {
+	if (SKIP_PROPS.has(key) || value == null) return null;
+	let attrName;
+	if (key === "className") attrName = "class";
+	else if (SVG_CAMEL_ATTRS.has(key)) attrName = camelToKebab(key);
+	else attrName = key;
+	if (key === "style" && typeof value === "object") {
+		const css = serializeStyle(value);
+		if (!css) return null;
+		return `${attrName}="${escapeAttr(css)}"`;
+	}
+	if (typeof value === "boolean") return `${attrName}="${String(value)}"`;
+	return `${attrName}="${escapeAttr(String(value))}"`;
+}
+function serializeVNode(node) {
+	if (node.type === "#text") return node.text ?? "";
+	const attrs = [];
+	for (const [key, value] of Object.entries(node.props)) {
+		const attr = serializeAttr(key, value);
+		if (attr != null) attrs.push(attr);
+	}
+	const childMarkup = node.children.map(serializeVNode).join("");
+	const attrStr = attrs.length > 0 ? ` ${attrs.join(" ")}` : "";
+	return `<${node.type}${attrStr}>${childMarkup}</${node.type}>`;
+}
+/**
+* Serialize an `<svg>` VNode (and its entire subtree) to an SVG markup string.
+* Auto-injects `xmlns="http://www.w3.org/2000/svg"` if not present.
+* The returned string can be used as the `src` of a Takumi ImageNode.
+*/
+function serializeSvgTree(svgNode) {
+	if (!("xmlns" in svgNode.props)) {
+		const original = svgNode.props;
+		svgNode.props = {
+			...original,
+			xmlns: "http://www.w3.org/2000/svg"
+		};
+		const result = serializeVNode(svgNode);
+		svgNode.props = original;
+		return result;
+	}
+	return serializeVNode(svgNode);
+}
+//#endregion
+export { serializeSvgTree };

package/dist/render/worker.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/rollup.d.ts

@@ -1,16 +1,30 @@
 import { Plugin } from 'rollup';
 import { StreamDeckTargetOptions } from './bundler-shared';
 export type { StreamDeckPlatform, StreamDeckArch, StreamDeckTarget, StreamDeckTargetOptions, } from './bundler-shared';
+export interface StreamDeckRollupOptions extends StreamDeckTargetOptions {
+    /**
+     * 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;
+}
 /**
- * Rollup plugin that copies the `@takumi-rs/core` platform-specific native
- * binding (`.node` file) into the bundle output directory so the Stream Deck
- * Node.js runtime can find it at startup.
+ * Rollup plugin for Stream Deck React projects.
  *
- * Font files (`.ttf`, `.otf`, `.woff`, `.woff2`) imported by the project are
- * automatically inlined into the bundle as `Buffer` instances so no runtime
- * filesystem access is needed.
+ * Same responsibilities as the Vite plugin (see vite.ts) with
+ * Rollup-specific differences:
  *
- * In production builds (non-watch mode), the devtools module is replaced with
- * a noop stub so the entire devtools tree and `ws` dependency are eliminated.
+ *   - No `configResolved` — dev mode detected via `this.meta.watchMode`
+ *   - `onLog` suppresses `MODULE_LEVEL_DIRECTIVE` warnings (caused by
+ *     "use client" directives in React dependencies)
+ *   - `buildStart` resolves root via `resolve(".")` (no Vite config)
+ *   - `writeBundle` reads output dir from `outputOptions.dir` or
+ *     `dirname(outputOptions.file)` (Rollup supports both)
+ *   - No `closeBundle` restart hook (handled externally)
+ *
+ * Font inlining and manifest codegen are shared via bundler-shared.ts,
+ * font-inline.ts, and manifest-codegen.ts.
  */
-export declare function streamDeckReact(options?: StreamDeckTargetOptions): Plugin;
+export declare function streamDeckReact(options?: StreamDeckRollupOptions): Plugin;

package/dist/rollup.js

@@ -1,18 +1,24 @@
 import { NOOP_DEVTOOLS_CODE, NOOP_DEVTOOLS_ID, copyNativeBindings, isDevelopmentMode, isLibraryDevtoolsImport, shouldStripDevtools } from "./bundler-shared.js";
 import { loadFont, resolveFontId } from "./font-inline.js";
-import { dirname } from "node:path";
+import { generateManifestTypes } from "./manifest-codegen.js";
+import { dirname, resolve } from "node:path";
 //#region src/rollup.ts
 /**
-* Rollup plugin that copies the `@takumi-rs/core` platform-specific native
-* binding (`.node` file) into the bundle output directory so the Stream Deck
-* Node.js runtime can find it at startup.
+* Rollup plugin for Stream Deck React projects.
 *
-* Font files (`.ttf`, `.otf`, `.woff`, `.woff2`) imported by the project are
-* automatically inlined into the bundle as `Buffer` instances so no runtime
-* filesystem access is needed.
+* Same responsibilities as the Vite plugin (see vite.ts) with
+* Rollup-specific differences:
 *
-* In production builds (non-watch mode), the devtools module is replaced with
-* a noop stub so the entire devtools tree and `ws` dependency are eliminated.
+*   - No `configResolved` — dev mode detected via `this.meta.watchMode`
+*   - `onLog` suppresses `MODULE_LEVEL_DIRECTIVE` warnings (caused by
+*     "use client" directives in React dependencies)
+*   - `buildStart` resolves root via `resolve(".")` (no Vite config)
+*   - `writeBundle` reads output dir from `outputOptions.dir` or
+*     `dirname(outputOptions.file)` (Rollup supports both)
+*   - No `closeBundle` restart hook (handled externally)
+*
+* Font inlining and manifest codegen are shared via bundler-shared.ts,
+* font-inline.ts, and manifest-codegen.ts.
 */
 function streamDeckReact(options = {}) {
 	return {
@@ -20,6 +26,15 @@ function streamDeckReact(options = {}) {
 		onLog(_level, log) {
 			if (log.code === "MODULE_LEVEL_DIRECTIVE") return false;
 		},
+		buildStart() {
+			const root = resolve(".");
+			const warn = (msg) => this.warn(msg);
+			const result = generateManifestTypes(root, options.manifest, warn);
+			if (result) {
+				this.addWatchFile(result.manifestPath);
+				if (result.written) console.log("[@fcannizzaro/streamdeck-react] Generated src/streamdeck-env.d.ts");
+			}
+		},
 		resolveId: {
 			order: "pre",
 			handler(source, importer) {

package/dist/roots/registry.d.ts

@@ -1,29 +1,27 @@
 import { ComponentType } from 'react';
-import { WillAppearEvent } from '@elgato/streamdeck';
 import { JsonObject } from '@elgato/utils';
-import { ActionDefinition, EventMap, StreamDeckAccess, WrapperComponent } from '../types';
+import { AdapterWillAppearEvent, StreamDeckAdapter } from '../adapter/types';
+import { ActionDefinition, EventMap, WrapperComponent } from '../types';
 import { RenderConfig } from '../render/pipeline';
 import { RegistryObserver } from '../devtools/observers/lifecycle';
 export declare class RootRegistry {
     private roots;
-    private touchBarRoots;
-    private touchBarActions;
+    private touchStripRoots;
+    private touchStripActions;
     private renderConfig;
-    private renderDebounceMs;
-    private sdkInstance;
+    private adapter;
     private globalSettings;
     private onGlobalSettingsChange;
     private wrapper?;
     /** DevTools observer. Set externally by startDevtoolsServer(). null when devtools is off. */
     observer: RegistryObserver | null;
-    constructor(renderConfig: RenderConfig, renderDebounceMs: number, sdkInstance: StreamDeckAccess["sdk"], onGlobalSettingsChange: (settings: JsonObject) => Promise<void>, wrapper?: WrapperComponent);
+    constructor(renderConfig: RenderConfig, adapter: StreamDeckAdapter, onGlobalSettingsChange: (settings: JsonObject) => Promise<void>, wrapper?: WrapperComponent);
     setGlobalSettings(settings: JsonObject): void;
-    create(ev: WillAppearEvent<JsonObject>, component: ComponentType, definition: ActionDefinition): void;
-    private registerTouchBarColumn;
-    private getEncoderColumn;
+    create(ev: AdapterWillAppearEvent, component: ComponentType, definition: ActionDefinition): void;
+    private registerTouchStripColumn;
     destroy(contextId: string): void;
     dispatch<K extends keyof EventMap>(contextId: string, event: K, payload: EventMap[K]): void;
-    private dispatchToTouchBar;
+    private dispatchToTouchStrip;
     updateSettings(contextId: string, settings: JsonObject): void;
     destroyAll(): void;
 }

package/dist/roots/registry.js

@@ -1,5 +1,6 @@
+import { shallowEqualSettings } from "./settings-equality.js";
 import { ReactRoot } from "./root.js";
-import { TouchBarRoot } from "./touchbar-root.js";
+import { TouchStripRoot } from "./touchstrip-root.js";
 //#region src/roots/registry.ts
 var SEGMENT_WIDTH = 200;
 var KEY_SIZES = {
@@ -79,36 +80,35 @@ function getCanvasInfo(deviceType, surfaceType) {
 }
 var RootRegistry = class {
 	roots = /* @__PURE__ */ new Map();
-	touchBarRoots = /* @__PURE__ */ new Map();
-	touchBarActions = /* @__PURE__ */ new Map();
+	touchStripRoots = /* @__PURE__ */ new Map();
+	touchStripActions = /* @__PURE__ */ new Map();
 	renderConfig;
-	renderDebounceMs;
-	sdkInstance;
+	adapter;
 	globalSettings = {};
 	onGlobalSettingsChange;
 	wrapper;
 	/** DevTools observer. Set externally by startDevtoolsServer(). null when devtools is off. */
 	observer = null;
-	constructor(renderConfig, renderDebounceMs, sdkInstance, onGlobalSettingsChange, wrapper) {
+	constructor(renderConfig, adapter, onGlobalSettingsChange, wrapper) {
 		this.renderConfig = renderConfig;
-		this.renderDebounceMs = renderDebounceMs;
-		this.sdkInstance = sdkInstance;
+		this.adapter = adapter;
 		this.onGlobalSettingsChange = onGlobalSettingsChange;
 		this.wrapper = wrapper;
 	}
 	setGlobalSettings(settings) {
+		if (shallowEqualSettings(this.globalSettings, settings)) return;
 		this.globalSettings = settings;
 		for (const root of this.roots.values()) root.updateGlobalSettings(settings);
-		for (const tbRoot of this.touchBarRoots.values()) tbRoot.updateGlobalSettings(settings);
+		for (const tbRoot of this.touchStripRoots.values()) tbRoot.updateGlobalSettings(settings);
 	}
 	create(ev, component, definition) {
 		const contextId = ev.action.id;
-		if (this.roots.has(contextId) || this.touchBarActions.has(contextId)) return;
+		if (this.roots.has(contextId) || this.touchStripActions.has(contextId)) return;
 		const device = ev.action.device;
 		const controller = ev.action.controllerType;
 		const isEncoder = controller === "Encoder";
-		if (isEncoder && definition.touchBar) {
-			this.registerTouchBarColumn(ev, definition);
+		if (isEncoder && definition.touchStrip) {
+			this.registerTouchStripColumn(ev, definition);
 			return;
 		}
 		let surfaceType = "key";
@@ -123,11 +123,11 @@ var RootRegistry = class {
 			id: contextId,
 			uuid: definition.uuid,
 			controller,
-			coordinates: "coordinates" in ev.action ? ev.action.coordinates : void 0,
+			coordinates: ev.action.coordinates,
 			isInMultiAction: ev.payload.isInMultiAction
 		};
 		const canvas = getCanvasInfo(device.type, surfaceType);
-		const root = new ReactRoot(component, actionInfo, deviceInfo, canvas, ev.payload.settings, this.globalSettings, ev.action, this.sdkInstance, this.renderConfig, this.renderDebounceMs, async (settings) => {
+		const root = new ReactRoot(component, actionInfo, deviceInfo, canvas, ev.payload.settings, this.globalSettings, ev.action, this.adapter, this.renderConfig, async (settings) => {
 			await ev.action.setSettings(settings);
 		}, this.onGlobalSettingsChange, this.wrapper, definition.wrapper, definition.dialLayout);
 		root.eventBus.emitSticky("willAppear", {
@@ -147,16 +147,16 @@ var RootRegistry = class {
 			} : void 0
 		});
 	}
-	registerTouchBarColumn(ev, definition) {
+	registerTouchStripColumn(ev, definition) {
 		const actionId = ev.action.id;
 		const device = ev.action.device;
 		const deviceId = device.id;
-		const column = this.getEncoderColumn(ev);
+		const column = ev.action.coordinates?.column;
 		if (column === void 0) {
-			console.warn("[@fcannizzaro/streamdeck-react] Cannot determine encoder column for touchbar action:", actionId);
+			console.warn("[@fcannizzaro/streamdeck-react] Cannot determine encoder column for TouchStrip action:", actionId);
 			return;
 		}
-		let tbRoot = this.touchBarRoots.get(deviceId);
+		let tbRoot = this.touchStripRoots.get(deviceId);
 		if (!tbRoot) {
 			const deviceInfo = {
 				id: deviceId,
@@ -164,31 +164,28 @@ var RootRegistry = class {
 				size: device.size,
 				name: device.name
 			};
-			tbRoot = new TouchBarRoot(definition.touchBar, deviceInfo, this.globalSettings, this.renderConfig, this.renderDebounceMs, this.onGlobalSettingsChange, this.wrapper, definition.touchBarFPS);
-			this.touchBarRoots.set(deviceId, tbRoot);
-			this.observer?.onTouchBarCreated(deviceId, tbRoot, deviceInfo);
+			tbRoot = new TouchStripRoot(definition.touchStrip, deviceInfo, this.globalSettings, this.renderConfig, this.onGlobalSettingsChange, this.wrapper);
+			this.touchStripRoots.set(deviceId, tbRoot);
+			this.observer?.onTouchStripCreated(deviceId, tbRoot, deviceInfo);
 		}
 		tbRoot.addColumn(column, actionId, ev.action);
-		this.observer?.onTouchBarColumnChanged(deviceId, [...tbRoot.columnNumbers], tbRoot.columnActionMap);
-		this.touchBarActions.set(actionId, deviceId);
-	}
-	getEncoderColumn(ev) {
-		return ev.action.coordinates?.column;
+		this.observer?.onTouchStripColumnChanged(deviceId, [...tbRoot.columnNumbers], tbRoot.columnActionMap);
+		this.touchStripActions.set(actionId, deviceId);
 	}
 	destroy(contextId) {
-		const deviceId = this.touchBarActions.get(contextId);
+		const deviceId = this.touchStripActions.get(contextId);
 		if (deviceId) {
-			const tbRoot = this.touchBarRoots.get(deviceId);
+			const tbRoot = this.touchStripRoots.get(deviceId);
 			if (tbRoot) {
 				const column = tbRoot.findColumnByActionId(contextId);
 				if (column !== void 0) tbRoot.removeColumn(column);
 				if (tbRoot.isEmpty) {
-					this.observer?.onTouchBarDestroyed(deviceId);
+					this.observer?.onTouchStripDestroyed(deviceId);
 					tbRoot.unmount();
-					this.touchBarRoots.delete(deviceId);
+					this.touchStripRoots.delete(deviceId);
 				}
 			}
-			this.touchBarActions.delete(contextId);
+			this.touchStripActions.delete(contextId);
 			return;
 		}
 		const root = this.roots.get(contextId);
@@ -205,22 +202,22 @@ var RootRegistry = class {
 			this.observer?.onDispatch(contextId, event, payload);
 			return;
 		}
-		const deviceId = this.touchBarActions.get(contextId);
+		const deviceId = this.touchStripActions.get(contextId);
 		if (deviceId) {
-			const tbRoot = this.touchBarRoots.get(deviceId);
+			const tbRoot = this.touchStripRoots.get(deviceId);
 			if (tbRoot) {
-				this.dispatchToTouchBar(tbRoot, contextId, event, payload);
+				this.dispatchToTouchStrip(tbRoot, contextId, event, payload);
 				this.observer?.onDispatch(contextId, event, payload);
 			}
 		}
 	}
-	dispatchToTouchBar(tbRoot, actionId, event, payload) {
+	dispatchToTouchStrip(tbRoot, actionId, event, payload) {
 		const column = tbRoot.findColumnByActionId(actionId);
 		if (column === void 0) return;
 		switch (event) {
 			case "touchTap": {
 				const tp = payload;
-				tbRoot.eventBus.emit("touchBarTap", {
+				tbRoot.eventBus.emit("touchStripTap", {
 					tapPos: [column * SEGMENT_WIDTH + tp.tapPos[0], tp.tapPos[1]],
 					hold: tp.hold,
 					column
@@ -229,7 +226,7 @@ var RootRegistry = class {
 			}
 			case "dialRotate": {
 				const dr = payload;
-				tbRoot.eventBus.emit("touchBarDialRotate", {
+				tbRoot.eventBus.emit("touchStripDialRotate", {
 					column,
 					ticks: dr.ticks,
 					pressed: dr.pressed
@@ -237,10 +234,10 @@ var RootRegistry = class {
 				break;
 			}
 			case "dialDown":
-				tbRoot.eventBus.emit("touchBarDialDown", { column });
+				tbRoot.eventBus.emit("touchStripDialDown", { column });
 				break;
 			case "dialUp":
-				tbRoot.eventBus.emit("touchBarDialUp", { column });
+				tbRoot.eventBus.emit("touchStripDialUp", { column });
 				break;
 		}
 	}
@@ -251,9 +248,9 @@ var RootRegistry = class {
 	destroyAll() {
 		for (const [_, root] of this.roots) root.unmount();
 		this.roots.clear();
-		for (const [_, tbRoot] of this.touchBarRoots) tbRoot.unmount();
-		this.touchBarRoots.clear();
-		this.touchBarActions.clear();
+		for (const [_, tbRoot] of this.touchStripRoots) tbRoot.unmount();
+		this.touchStripRoots.clear();
+		this.touchStripActions.clear();
 	}
 };
 //#endregion

package/dist/roots/root.d.ts

@@ -2,9 +2,9 @@ import { ComponentType } from 'react';
 import { VContainer } from '../reconciler/vnode';
 import { RenderConfig } from '../render/pipeline';
 import { EventBus } from '../context/event-bus';
-import { ActionInfo, CanvasInfo, DeviceInfo, EncoderLayout, StreamDeckAccess, WrapperComponent } from '../types';
+import { ActionInfo, CanvasInfo, DeviceInfo, EncoderLayout, WrapperComponent } from '../types';
 import { JsonObject } from '@elgato/utils';
-import { Action, DialAction, KeyAction } from '@elgato/streamdeck';
+import { AdapterActionHandle, StreamDeckAdapter } from '../adapter/types';
 export declare class ReactRoot {
     private component;
     private actionInfo;
@@ -18,13 +18,16 @@ export declare class ReactRoot {
     private globalSettings;
     private setSettingsFn;
     private setGlobalSettingsFn;
-    private renderDebounceMs;
+    private readonly renderDebounceMs;
     private renderConfig;
     private canvas;
     private resolvedDialLayout;
-    private sdkAction;
-    private sdkInstance;
+    private action;
+    private adapter;
     private disposed;
+    private _renderCount;
+    private _lastRenderReport;
+    private static readonly RENDER_WARN_THRESHOLD;
     /** Last data URI successfully sent to hardware. Used by devtools snapshots. */
     lastDataUri: string | null;
     /**
@@ -41,7 +44,7 @@ export declare class ReactRoot {
     private streamDeckValue;
     private settingsValue;
     private globalSettingsValue;
-    constructor(component: ComponentType, actionInfo: ActionInfo, deviceInfo: DeviceInfo, canvas: CanvasInfo, initialSettings: JsonObject, initialGlobalSettings: JsonObject, sdkAction: Action | DialAction | KeyAction, sdkInstance: StreamDeckAccess["sdk"], renderConfig: RenderConfig, renderDebounceMs: number, onSettingsChange: (settings: JsonObject) => Promise<void>, onGlobalSettingsChange: (settings: JsonObject) => Promise<void>, pluginWrapper?: WrapperComponent | undefined, actionWrapper?: WrapperComponent | undefined, dialLayout?: EncoderLayout);
+    constructor(component: ComponentType, actionInfo: ActionInfo, deviceInfo: DeviceInfo, canvas: CanvasInfo, initialSettings: JsonObject, initialGlobalSettings: JsonObject, action: AdapterActionHandle, adapter: StreamDeckAdapter, renderConfig: RenderConfig, onSettingsChange: (settings: JsonObject) => Promise<void>, onGlobalSettingsChange: (settings: JsonObject) => Promise<void>, pluginWrapper?: WrapperComponent | undefined, actionWrapper?: WrapperComponent | undefined, dialLayout?: EncoderLayout);
     private render;
     private buildTree;
     private scheduleRerender;