@fcannizzaro/streamdeck-react 0.1.8 → 0.1.10

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="https://fcannizzaro.com/_astro/streamdeck-react.BAjPov6j.webp" alt="illustration" />
+  <img src="https://fcannizzaro.com/_astro/streamdeck-react.tzWCgEgf.webp" alt="illustration" />
 </p>
 
 # @fcannizzaro/streamdeck-react

package/dist/action.js

@@ -1,3 +1,4 @@
+//#region src/action.ts
 function defineAction(config) {
 	return {
 		uuid: config.uuid,
@@ -10,4 +11,5 @@ function defineAction(config) {
 		defaultSettings: config.defaultSettings ?? {}
 	};
 }
+//#endregion
 export { defineAction };

package/dist/bundler-shared.js

@@ -1,7 +1,8 @@
 import { dirname, join } from "node:path";
 import { createRequire } from "node:module";
 import { copyFileSync, existsSync } from "node:fs";
-const TARGETS = [
+//#region src/bundler-shared.ts
+var TARGETS = [
 	{
 		platform: "darwin",
 		arch: "arm64",
@@ -36,8 +37,8 @@ function isArch(value) {
 function isDevelopmentMode(watchMode) {
 	return watchMode || process.env.NODE_ENV === "development";
 }
-const NOOP_DEVTOOLS_ID = "\0streamdeck-react:noop-devtools";
-const NOOP_DEVTOOLS_CODE = "export function startDevtoolsServer() {}";
+var NOOP_DEVTOOLS_ID = "\0streamdeck-react:noop-devtools";
+var NOOP_DEVTOOLS_CODE = "export function startDevtoolsServer() {}";
 var DEVTOOLS_IMPORT_SOURCE = "./devtools/index.js";
 /**
 * Returns true when devtools should be stripped from the bundle.
@@ -116,4 +117,5 @@ function copyNativeBindings(outDir, isDevelopment, options, warn) {
 		throw new Error(`[@fcannizzaro/streamdeck-react] Failed to copy native binding: ${String(err)}`);
 	}
 }
+//#endregion
 export { NOOP_DEVTOOLS_CODE, NOOP_DEVTOOLS_ID, copyNativeBindings, isDevelopmentMode, isLibraryDevtoolsImport, shouldStripDevtools };

package/dist/components/Box.js

@@ -1,4 +1,5 @@
 import { createElement } from "react";
+//#region src/components/Box.tsx
 function Box({ className, center, padding, background, borderRadius, gap, direction, style, children }) {
 	return createElement("div", {
 		className,
@@ -17,4 +18,5 @@ function Box({ className, center, padding, background, borderRadius, gap, direct
 		}
 	}, children);
 }
+//#endregion
 export { Box };

package/dist/components/CircularGauge.js

@@ -1,4 +1,5 @@
 import { createElement } from "react";
+//#region src/components/CircularGauge.tsx
 function CircularGauge({ className, value, max = 100, size = 80, strokeWidth = 6, color = "#2196F3", background = "#333", style }) {
 	const percent = Math.max(0, Math.min(100, value / max * 100));
 	const radius = (size - strokeWidth) / 2;
@@ -31,4 +32,5 @@ function CircularGauge({ className, value, max = 100, size = 80, strokeWidth = 6
 		transform: `rotate(-90 ${center} ${center})`
 	}));
 }
+//#endregion
 export { CircularGauge };

package/dist/components/ErrorBoundary.js

@@ -1,4 +1,5 @@
 import { Component, createElement } from "react";
+//#region src/components/ErrorBoundary.tsx
 var ErrorBoundary = class extends Component {
 	constructor(props) {
 		super(props);
@@ -30,4 +31,5 @@ var ErrorBoundary = class extends Component {
 		return this.props.children;
 	}
 };
+//#endregion
 export { ErrorBoundary };

package/dist/components/Icon.js

@@ -1,4 +1,5 @@
 import { createElement } from "react";
+//#region src/components/Icon.tsx
 function Icon({ className, path, size = 24, color = "white", viewBox = "0 0 24 24", style }) {
 	return createElement("svg", {
 		className,
@@ -11,4 +12,5 @@ function Icon({ className, path, size = 24, color = "white", viewBox = "0 0 24 2
 		fill: color
 	}));
 }
+//#endregion
 export { Icon };

package/dist/components/Image.js

@@ -1,4 +1,5 @@
 import { createElement } from "react";
+//#region src/components/Image.tsx
 function Image({ className, src, width, height, fit, borderRadius, style }) {
 	return createElement("img", {
 		className,
@@ -12,4 +13,5 @@ function Image({ className, src, width, height, fit, borderRadius, style }) {
 		}
 	});
 }
+//#endregion
 export { Image };

package/dist/components/ProgressBar.js

@@ -1,4 +1,5 @@
 import { createElement } from "react";
+//#region src/components/ProgressBar.tsx
 function ProgressBar({ className, value, max = 100, height = 8, color = "#4CAF50", background = "#333", borderRadius = 4, style }) {
 	const percent = Math.max(0, Math.min(100, value / max * 100));
 	return createElement("div", {
@@ -19,4 +20,5 @@ function ProgressBar({ className, value, max = 100, height = 8, color = "#4CAF50
 		borderRadius
 	} }));
 }
+//#endregion
 export { ProgressBar };

package/dist/components/Text.js

@@ -1,4 +1,5 @@
 import { createElement } from "react";
+//#region src/components/Text.tsx
 function Text({ className, size, color, weight, align, font, lineHeight, style, children }) {
 	return createElement("span", {
 		className,
@@ -13,4 +14,5 @@ function Text({ className, size, color, weight, align, font, lineHeight, style,
 		}
 	}, children);
 }
+//#endregion
 export { Text };

package/dist/context/event-bus.js

@@ -1,3 +1,4 @@
+//#region src/context/event-bus.ts
 var EventBus = class EventBus {
 	listeners = /* @__PURE__ */ new Map();
 	sticky = /* @__PURE__ */ new Map();
@@ -36,4 +37,5 @@ var EventBus = class EventBus {
 		}
 	}
 };
+//#endregion
 export { EventBus };

package/dist/context/providers.js

@@ -1,9 +1,11 @@
 import { createContext } from "react";
-const SettingsContext = createContext(null);
-const GlobalSettingsContext = createContext(null);
-const ActionContext = createContext(null);
-const DeviceContext = createContext(null);
-const CanvasContext = createContext(null);
-const EventBusContext = createContext(null);
-const StreamDeckContext = createContext(null);
+//#region src/context/providers.ts
+var SettingsContext = createContext(null);
+var GlobalSettingsContext = createContext(null);
+var ActionContext = createContext(null);
+var DeviceContext = createContext(null);
+var CanvasContext = createContext(null);
+var EventBusContext = createContext(null);
+var StreamDeckContext = createContext(null);
+//#endregion
 export { ActionContext, CanvasContext, DeviceContext, EventBusContext, GlobalSettingsContext, SettingsContext, StreamDeckContext };

package/dist/context/touchbar-context.js

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

package/dist/devtools/bridge.js

@@ -1,6 +1,7 @@
 import { serializeValue } from "./serialization/value.js";
 import { serializeVNode } from "./serialization/vnode.js";
 import { renderWithHighlight } from "./highlight.js";
+//#region src/devtools/bridge.ts
 var RingBuffer = class {
 	items;
 	head = 0;
@@ -435,4 +436,5 @@ var DevtoolsBridge = class {
 		};
 	}
 };
+//#endregion
 export { DevtoolsBridge };

package/dist/devtools/highlight.js

@@ -2,6 +2,7 @@ import { vnodeToElement } from "../reconciler/vnode.js";
 import { bufferToDataUri } from "../render/pipeline.js";
 import { createElement } from "react";
 import { fromJsx } from "@takumi-rs/helpers/jsx";
+//#region src/devtools/highlight.ts
 var HIGHLIGHT_BORDER_COLOR = "rgba(111, 168, 220, 0.85)";
 var HIGHLIGHT_BORDER_WIDTH = 2;
 var HIGHLIGHT_BG = "rgba(111, 168, 220, 0.66)";
@@ -87,4 +88,5 @@ function resolveInSubtree(node, targetNid, counter, parentNid) {
 	}
 	return null;
 }
+//#endregion
 export { renderWithHighlight };

package/dist/devtools/index.d.ts

@@ -1,7 +1,6 @@
 import { RootRegistry } from '../roots/registry';
 import { RenderConfig } from '../render/pipeline';
 export declare function startDevtoolsServer(config: {
-    port?: number;
     devtoolsName: string;
     registry: RootRegistry;
     renderConfig: RenderConfig;

package/dist/devtools/index.js

@@ -1,11 +1,11 @@
 import { EventBus } from "../context/event-bus.js";
 import { DevtoolsBridge } from "./bridge.js";
 import { patchConsole } from "./intercepts/console.js";
-import { DevtoolsServer } from "./server.js";
+import { DevtoolsServer, hashToPort } from "./server.js";
 import { patchFetch } from "./intercepts/fetch.js";
-var DEFAULT_PORT = 39400;
+//#region src/devtools/index.ts
 function startDevtoolsServer(config) {
-	const server = new DevtoolsServer(config.port ?? DEFAULT_PORT);
+	const server = new DevtoolsServer(hashToPort(config.devtoolsName), config.devtoolsName);
 	const bridge = new DevtoolsBridge(server, config.devtoolsName, config.renderConfig);
 	config.registry.observer = bridge;
 	config.renderConfig.onRender = (container, dataUri) => {
@@ -32,4 +32,5 @@ function startDevtoolsServer(config) {
 		server.stop();
 	});
 }
+//#endregion
 export { startDevtoolsServer };

package/dist/devtools/intercepts/console.js

@@ -1,3 +1,4 @@
+//#region src/devtools/intercepts/console.ts
 /**
 * Patches console methods to forward output to the devtools bridge.
 * Returns a restore function that undoes the patch.
@@ -42,11 +43,12 @@ function patchConsole(cb) {
 * Stored originals for use by the devtools server when it needs to log
 * without triggering the interceptor.
 */
-const origConsole = {
+var origConsole = {
 	log: console.log,
 	warn: console.warn,
 	error: console.error,
 	info: console.info,
 	debug: console.debug
 };
+//#endregion
 export { origConsole, patchConsole };

package/dist/devtools/intercepts/fetch.js

@@ -1,3 +1,4 @@
+//#region src/devtools/intercepts/fetch.ts
 var MAX_BODY_BYTES = 256 * 1024;
 var BINARY_CONTENT_TYPES = /^(image|audio|video|application\/octet-stream|application\/zip|application\/pdf)/;
 function headersToRecord(headers) {
@@ -65,4 +66,5 @@ async function readBodySafe(reqOrRes) {
 		return "[body read error]";
 	}
 }
+//#endregion
 export { patchFetch };

package/dist/devtools/serialization/value.js

@@ -1,3 +1,4 @@
+//#region src/devtools/serialization/value.ts
 var MAX_STRING_LENGTH = 1e4;
 var MAX_ARRAY_ITEMS = 100;
 var MAX_OBJECT_KEYS = 100;
@@ -96,4 +97,5 @@ function serializeValue(value, maxDepth, seen = /* @__PURE__ */ new WeakSet()) {
 		hint: String(typeof value)
 	};
 }
+//#endregion
 export { serializeValue };

package/dist/devtools/serialization/vnode.js

@@ -1,4 +1,5 @@
 import { serializeValue } from "./value.js";
+//#region src/devtools/serialization/vnode.ts
 var MAX_TREE_DEPTH = 50;
 var MAX_TOTAL_NODES = 1e3;
 var nodeCounter = 0;
@@ -38,4 +39,5 @@ function serializeNode(node, depth) {
 		children: node.children.map((child) => serializeNode(child, depth + 1))
 	};
 }
+//#endregion
 export { serializeVNode };

package/dist/devtools/server.d.ts

@@ -1,17 +1,20 @@
 import { BaseMessage, ClientMessage } from './types';
+/** djb2 hash of a string mapped to a port in [PORT_MIN, PORT_MAX]. */
+export declare function hashToPort(str: string): number;
 export declare class DevtoolsServer {
+    private uuid;
     private httpServer;
     private clients;
     private port;
     private actualPort;
     private onConnectCb;
     private onMessageCb;
-    constructor(port: number);
+    constructor(port: number, uuid: string);
     /** Set a callback invoked when a new browser client connects via SSE. */
     setOnConnect(cb: (clientId: string) => void): void;
     /** Set a callback for client→server messages (request:snapshot, highlight:action). */
     setOnMessage(cb: (msg: ClientMessage) => void): void;
-    /** Start listening. Tries the configured port, then random ports in range on EADDRINUSE. */
+    /** Start listening. Tries the configured port, then sequential ports in range on EADDRINUSE. */
     start(): Promise<void>;
     /** Stop the server and disconnect all clients. */
     stop(): void;

package/dist/devtools/server.js

@@ -1,8 +1,15 @@
 import { origConsole } from "./intercepts/console.js";
 import { createServer } from "node:http";
+//#region src/devtools/server.ts
 var PORT_MIN = 39400;
-var PORT_MAX = 39499;
+var PORT_RANGE = 39499 - PORT_MIN + 1;
 var MAX_RETRIES = 10;
+/** djb2 hash of a string mapped to a port in [PORT_MIN, PORT_MAX]. */
+function hashToPort(str) {
+	let hash = 5381;
+	for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i) | 0;
+	return PORT_MIN + (hash % PORT_RANGE + PORT_RANGE) % PORT_RANGE;
+}
 var clientIdCounter = 0;
 var DevtoolsServer = class {
 	httpServer = null;
@@ -11,7 +18,8 @@ var DevtoolsServer = class {
 	actualPort = null;
 	onConnectCb = null;
 	onMessageCb = null;
-	constructor(port) {
+	constructor(port, uuid) {
+		this.uuid = uuid;
 		this.port = port;
 	}
 	/** Set a callback invoked when a new browser client connects via SSE. */
@@ -22,10 +30,11 @@ var DevtoolsServer = class {
 	setOnMessage(cb) {
 		this.onMessageCb = cb;
 	}
-	/** Start listening. Tries the configured port, then random ports in range on EADDRINUSE. */
+	/** Start listening. Tries the configured port, then sequential ports in range on EADDRINUSE. */
 	async start() {
 		let port = this.port;
 		let retries = 0;
+		const baseOffset = hashToPort(this.uuid) - PORT_MIN;
 		while (retries < MAX_RETRIES) try {
 			await this.listen(port);
 			this.actualPort = port;
@@ -34,7 +43,7 @@ var DevtoolsServer = class {
 		} catch (err) {
 			if (err.code === "EADDRINUSE") {
 				retries++;
-				port = PORT_MIN + Math.floor(Math.random() * (PORT_MAX - PORT_MIN + 1));
+				port = PORT_MIN + (baseOffset + retries) % PORT_RANGE;
 				continue;
 			}
 			throw err;
@@ -180,4 +189,5 @@ var DevtoolsServer = class {
 		});
 	}
 };
-export { DevtoolsServer };
+//#endregion
+export { DevtoolsServer, hashToPort };

package/dist/font-inline.js

@@ -1,6 +1,7 @@
 import { dirname, resolve } from "node:path";
 import { createRequire } from "node:module";
 import { readFileSync, realpathSync } from "node:fs";
+//#region src/font-inline.ts
 var FONT_RE = /\.(ttf|otf|woff2?)$/;
 /**
 * Returns `true` when the given module specifier or resolved id looks like
@@ -44,4 +45,5 @@ function safeRealpath(p) {
 		return null;
 	}
 }
+//#endregion
 export { loadFont, resolveFontId };

package/dist/hooks/context.js

@@ -1,5 +1,6 @@
 import { ActionContext, CanvasContext, DeviceContext, StreamDeckContext } from "../context/providers.js";
 import { useContext } from "react";
+//#region src/hooks/context.ts
 function useDevice() {
 	return useContext(DeviceContext);
 }
@@ -12,4 +13,5 @@ function useCanvas() {
 function useStreamDeck() {
 	return useContext(StreamDeckContext);
 }
+//#endregion
 export { useAction, useCanvas, useDevice, useStreamDeck };

package/dist/hooks/events.js

@@ -1,6 +1,7 @@
 import { EventBusContext, StreamDeckContext } from "../context/providers.js";
 import { useCallbackRef } from "./internal/useCallbackRef.js";
 import { useContext, useEffect, useRef } from "react";
+//#region src/hooks/events.ts
 function useEvent(event, callback) {
 	const bus = useContext(EventBusContext);
 	const callbackRef = useCallbackRef(callback);
@@ -55,4 +56,5 @@ function useDialHint(hints) {
 		hints.longTouch
 	]);
 }
+//#endregion
 export { useDialDown, useDialHint, useDialRotate, useDialUp, useKeyDown, useKeyUp, useTouchTap };

package/dist/hooks/gestures.d.ts

@@ -8,7 +8,7 @@ export interface LongPressOptions {
     timeout?: number;
 }
 export interface DoubleTapOptions {
-    /** Max milliseconds between two key-up events. @default 300 */
+    /** Max milliseconds between two key-up events. @default 250 */
     timeout?: number;
 }
 export declare function useTap(callback: (payload: KeyUpPayload) => void, options?: TapOptions): void;

package/dist/hooks/gestures.js

@@ -1,6 +1,7 @@
 import { EventBusContext } from "../context/providers.js";
 import { useCallbackRef } from "./internal/useCallbackRef.js";
 import { useContext, useEffect, useRef } from "react";
+//#region src/hooks/gestures.ts
 var DEFAULT_LONG_PRESS_TIMEOUT = 500;
 var DEFAULT_DOUBLE_TAP_TIMEOUT = 250;
 var TapGate = class {
@@ -137,4 +138,5 @@ function useDoubleTap(callback, options) {
 		timeout
 	]);
 }
+//#endregion
 export { useDoubleTap, useLongPress, useTap };

package/dist/hooks/internal/useCallbackRef.js

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from "react";
+//#region src/hooks/internal/useCallbackRef.ts
 function useCallbackRef(callback) {
 	const callbackRef = useRef(callback);
 	useEffect(() => {
@@ -6,4 +7,5 @@ function useCallbackRef(callback) {
 	});
 	return callbackRef;
 }
+//#endregion
 export { useCallbackRef };

package/dist/hooks/lifecycle.js

@@ -1,6 +1,7 @@
 import { EventBusContext } from "../context/providers.js";
 import { useCallbackRef } from "./internal/useCallbackRef.js";
 import { useContext, useEffect } from "react";
+//#region src/hooks/lifecycle.ts
 function useWillAppear(callback) {
 	const bus = useContext(EventBusContext);
 	const callbackRef = useCallbackRef(callback);
@@ -23,4 +24,5 @@ function useWillDisappear(callback) {
 		return () => bus.off("willDisappear", handler);
 	}, [bus, callbackRef]);
 }
+//#endregion
 export { useWillAppear, useWillDisappear };

package/dist/hooks/sdk.js

@@ -1,6 +1,7 @@
 import { EventBusContext, StreamDeckContext } from "../context/providers.js";
 import { useCallbackRef } from "./internal/useCallbackRef.js";
 import { useCallback, useContext, useEffect } from "react";
+//#region src/hooks/sdk.ts
 function useOpenUrl() {
 	const { sdk } = useContext(StreamDeckContext);
 	return useCallback(async (url) => {
@@ -49,4 +50,5 @@ function useTitle() {
 		if ("setTitle" in action) await action.setTitle(title);
 	}, [action]);
 }
+//#endregion
 export { useOpenUrl, usePropertyInspector, useSendToPI, useShowAlert, useShowOk, useSwitchProfile, useTitle };

package/dist/hooks/settings.js

@@ -1,5 +1,6 @@
 import { GlobalSettingsContext, SettingsContext } from "../context/providers.js";
 import { useCallback, useContext } from "react";
+//#region src/hooks/settings.ts
 function useSettings() {
 	const ctx = useContext(SettingsContext);
 	const setSettings = useCallback((partial) => {
@@ -14,4 +15,5 @@ function useGlobalSettings() {
 	}, [ctx]);
 	return [ctx.settings, setSettings];
 }
+//#endregion
 export { useGlobalSettings, useSettings };

package/dist/hooks/touchbar.js

@@ -2,6 +2,7 @@ import { EventBusContext } from "../context/providers.js";
 import { TouchBarContext } from "../context/touchbar-context.js";
 import { useCallbackRef } from "./internal/useCallbackRef.js";
 import { useContext, useEffect } from "react";
+//#region src/hooks/touchbar.ts
 function useTouchBarEvent(event, callback) {
 	const bus = useContext(EventBusContext);
 	const callbackRef = useCallbackRef(callback);
@@ -32,4 +33,5 @@ function useTouchBarDialDown(callback) {
 function useTouchBarDialUp(callback) {
 	useTouchBarEvent("touchBarDialUp", callback);
 }
+//#endregion
 export { useTouchBar, useTouchBarDialDown, useTouchBarDialRotate, useTouchBarDialUp, useTouchBarTap };

package/dist/hooks/utility.js

@@ -1,5 +1,6 @@
 import { useCallbackRef } from "./internal/useCallbackRef.js";
 import { useCallback, useEffect, useMemo, useRef } from "react";
+//#region src/hooks/utility.ts
 var DEFAULT_TICK_FPS = 60;
 function toTickIntervalMs(fps) {
 	if (!Number.isFinite(fps) || fps <= 0) return Math.round(1e3 / DEFAULT_TICK_FPS);
@@ -97,4 +98,5 @@ function useTick(callback, fpsOrActive = DEFAULT_TICK_FPS) {
 		callbackRef.current(delta);
 	}, delayMs);
 }
+//#endregion
 export { useInterval, usePrevious, useTick, useTimeout };

package/dist/plugin.js

@@ -2,6 +2,7 @@ import { RootRegistry } from "./roots/registry.js";
 import { startDevtoolsServer } from "./devtools/index.js";
 import streamDeck, { SingletonAction } from "@elgato/streamdeck";
 import { Renderer } from "@takumi-rs/core";
+//#region src/plugin.ts
 function createPlugin(config) {
 	const renderConfig = {
 		renderer: new Renderer({ fonts: config.fonts.map((f) => ({
@@ -30,7 +31,6 @@ function createPlugin(config) {
 		streamDeck.actions.registerAction(singletonAction);
 	}
 	if (config.devtools) startDevtoolsServer({
-		port: config.devtoolsPort,
 		devtoolsName: streamDeck.info.plugin.uuid,
 		registry,
 		renderConfig
@@ -174,4 +174,5 @@ function createSingletonAction(definition, registry, onError) {
 		}
 	}();
 }
+//#endregion
 export { createPlugin };

package/dist/reconciler/host-config.js

@@ -1,8 +1,9 @@
 import { createTextVNode, createVNode } from "./vnode.js";
 import { createContext } from "react";
 import { DefaultEventPriority } from "react-reconciler/constants.js";
+//#region src/reconciler/host-config.ts
 var NO_CONTEXT = {};
-const hostConfig = {
+var hostConfig = {
 	supportsMutation: true,
 	supportsPersistence: false,
 	supportsHydration: false,
@@ -122,4 +123,5 @@ const hostConfig = {
 	scheduleMicrotask: queueMicrotask,
 	preparePortalMount: () => {}
 };
+//#endregion
 export { hostConfig };

package/dist/reconciler/renderer.js

@@ -1,9 +1,11 @@
 import { hostConfig } from "./host-config.js";
 import Reconciler from "react-reconciler";
-const reconciler = Reconciler(hostConfig);
+//#region src/reconciler/renderer.ts
+var reconciler = Reconciler(hostConfig);
 reconciler.injectIntoDevTools({
 	bundleType: process.env.NODE_ENV === "production" ? 0 : 1,
 	rendererPackageName: "@fcannizzaro/streamdeck-react",
 	version: "0.1.0"
 });
+//#endregion
 export { reconciler };

package/dist/reconciler/vnode.js

@@ -1,4 +1,5 @@
 import { createElement } from "react";
+//#region src/reconciler/vnode.ts
 function createVNode(type, props) {
 	return {
 		type,
@@ -30,4 +31,5 @@ function vnodeToElement(node) {
 	const childElements = node.children.map(vnodeToElement);
 	return createElement(node.type, restProps, ...childElements);
 }
+//#endregion
 export { createTextVNode, createVContainer, createVNode, vnodeToElement };

package/dist/render/cache.js

@@ -1,3 +1,4 @@
+//#region src/render/cache.ts
 function fnv1a(input) {
 	let hash = 2166136261;
 	if (typeof input === "string") for (let i = 0; i < input.length; i++) {
@@ -10,4 +11,5 @@ function fnv1a(input) {
 	}
 	return hash >>> 0;
 }
+//#endregion
 export { fnv1a };

package/dist/render/pipeline.js

@@ -3,6 +3,7 @@ import { fnv1a } from "./cache.js";
 import { encodePng } from "./png.js";
 import { createElement } from "react";
 import { fromJsx } from "@takumi-rs/helpers/jsx";
+//#region src/render/pipeline.ts
 function bufferToDataUri(buffer, format) {
 	return `data:image/${format};base64,${(Buffer.isBuffer(buffer) ? buffer : Buffer.from(buffer)).toString("base64")}`;
 }
@@ -69,4 +70,5 @@ function cropSlice(raw, fullWidth, column, segmentWidth, segmentHeight) {
 function sliceToDataUri(raw, fullWidth, fullHeight, column, segmentWidth, segmentHeight) {
 	return bufferToDataUri(encodePng(segmentWidth, segmentHeight, cropSlice(raw, fullWidth, column, segmentWidth, segmentHeight)), "png");
 }
+//#endregion
 export { bufferToDataUri, renderToDataUri, renderToRaw, sliceToDataUri };

package/dist/render/png.js

@@ -1,4 +1,5 @@
 import { deflateSync } from "node:zlib";
+//#region src/render/png.ts
 var crcTable = new Uint32Array(256);
 for (let n = 0; n < 256; n++) {
 	let c = n;
@@ -66,4 +67,5 @@ function encodePng(width, height, rgba) {
 		pngChunk("IEND", Buffer.alloc(0))
 	]);
 }
+//#endregion
 export { encodePng };

package/dist/rollup.js

@@ -1,6 +1,7 @@
 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";
+//#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
@@ -41,4 +42,5 @@ function streamDeckReact(options = {}) {
 		}
 	};
 }
+//#endregion
 export { streamDeckReact };

package/dist/roots/registry.js

@@ -1,5 +1,6 @@
 import { ReactRoot } from "./root.js";
 import { TouchBarRoot } from "./touchbar-root.js";
+//#region src/roots/registry.ts
 var SEGMENT_WIDTH = 200;
 var KEY_SIZES = {
 	0: {
@@ -255,4 +256,5 @@ var RootRegistry = class {
 		this.touchBarActions.clear();
 	}
 };
+//#endregion
 export { RootRegistry };

package/dist/roots/root.js

@@ -4,6 +4,7 @@ import { renderToDataUri } from "../render/pipeline.js";
 import { EventBus } from "../context/event-bus.js";
 import { ActionContext, CanvasContext, DeviceContext, EventBusContext, GlobalSettingsContext, SettingsContext, StreamDeckContext } from "../context/providers.js";
 import { createElement } from "react";
+//#region src/roots/root.ts
 var DEFAULT_DIAL_LAYOUT = {
 	id: "com.example.plugin.react-layout",
 	items: [{
@@ -195,4 +196,5 @@ function resolveDialLayout(layout) {
 		items: DEFAULT_DIAL_LAYOUT.items.map((item) => ({ ...item }))
 	};
 }
+//#endregion
 export { ReactRoot };

package/dist/roots/touchbar-root.js

@@ -5,6 +5,7 @@ import { EventBus } from "../context/event-bus.js";
 import { DeviceContext, EventBusContext, GlobalSettingsContext } from "../context/providers.js";
 import { TouchBarContext } from "../context/touchbar-context.js";
 import { createElement } from "react";
+//#region src/roots/touchbar-root.ts
 var SEGMENT_WIDTH = 200;
 var SEGMENT_HEIGHT = 100;
 var DEFAULT_TOUCHBAR_FPS = 60;
@@ -170,4 +171,5 @@ var TouchBarRoot = class {
 		this.columns.clear();
 	}
 };
+//#endregion
 export { TouchBarRoot };

package/dist/tw/index.js

@@ -1,3 +1,4 @@
+//#region src/tw/index.ts
 /**
 * Concatenates Tailwind class strings, filtering out falsy values.
 *
@@ -9,4 +10,5 @@
 function tw(...args) {
 	return args.filter(Boolean).join(" ");
 }
+//#endregion
 export { tw };

package/dist/types.d.ts

@@ -72,8 +72,6 @@ export interface PluginConfig {
     onActionError?: (uuid: string, actionId: string, error: Error) => void;
     /** Enable the devtools WebSocket server. Browser devtools UI discovers it via port scanning. @default false */
     devtools?: boolean;
-    /** Port for the devtools WebSocket server. If omitted, picks a random port in range 39400-39499. */
-    devtoolsPort?: number;
 }
 export interface Plugin {
     connect(): Promise<void>;

package/dist/vite.js

@@ -2,6 +2,7 @@ import { NOOP_DEVTOOLS_CODE, NOOP_DEVTOOLS_ID, copyNativeBindings, isLibraryDevt
 import { loadFont, resolveFontId } from "./font-inline.js";
 import { resolve } from "node:path";
 import { exec } from "node:child_process";
+//#region src/vite.ts
 /**
 * Vite plugin for Stream Deck React projects.
 *
@@ -49,4 +50,5 @@ function streamDeckReact(options = {}) {
 		}
 	};
 }
+//#endregion
 export { streamDeckReact };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fcannizzaro/streamdeck-react",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Build Stream Deck plugins with React — render components directly to keys, dials, and touch screens",
   "keywords": [
     "elgato",
@@ -61,8 +61,8 @@
   },
   "dependencies": {
     "@elgato/streamdeck": "^2.0.2",
-    "@takumi-rs/core": "^0.70.4",
-    "@takumi-rs/helpers": "^0.70.4",
+    "@takumi-rs/core": "^0.71.7",
+    "@takumi-rs/helpers": "^0.71.7",
     "react-reconciler": "^0.33.0"
   },
   "devDependencies": {
@@ -72,7 +72,7 @@
     "@types/react-reconciler": "^0.33.0",
     "react-dom": "^19.2.4",
     "rollup": "^4.59.0",
-    "vite": "8.0.0-beta.16",
+    "vite": "8.0.0-beta.18",
     "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {