@fcannizzaro/streamdeck-react 0.1.9 → 0.1.11

package/dist/devtools/types.d.ts

@@ -81,7 +81,7 @@ export interface SnapshotAction {
     tree: SerializedVNode | null;
     dataUri: string | null;
 }
-export interface SnapshotTouchBar {
+export interface SnapshotTouchStrip {
     deviceId: string;
     deviceName: string;
     canvas: {
@@ -98,10 +98,11 @@ export interface SnapshotTouchBar {
 export interface SnapshotMessage extends BaseMessage {
     type: "snapshot";
     actions: SnapshotAction[];
-    touchBars: SnapshotTouchBar[];
+    touchStrips: SnapshotTouchStrip[];
     recentConsole: ConsoleMessage[];
     recentNetwork: (NetworkRequestMessage | NetworkResponseMessage | NetworkErrorMessage)[];
     recentEvents: EventBusMessage[];
+    metrics?: MetricsData;
 }
 export interface ConsoleMessage extends BaseMessage {
     type: "console";
@@ -145,9 +146,11 @@ export interface RenderMessage extends BaseMessage {
     tree: SerializedVNode;
     dataUri: string;
     renderMs: number;
+    /** Per-render pipeline timing profile, when available. */
+    profile?: ProfileData;
 }
-export interface TouchBarRenderMessage extends BaseMessage {
-    type: "render:touchbar";
+export interface TouchStripRenderMessage extends BaseMessage {
+    type: "render:touchstrip";
     deviceId: string;
     canvas: {
         width: number;
@@ -160,6 +163,8 @@ export interface TouchBarRenderMessage extends BaseMessage {
         dataUri: string;
     }>;
     renderMs: number;
+    /** Per-render pipeline timing profile, when available. */
+    profile?: ProfileData;
 }
 export interface EventBusMessage extends BaseMessage {
     type: "event";
@@ -174,7 +179,7 @@ export interface LifecycleMessage extends BaseMessage {
     event: "appear" | "disappear";
     actionId: string;
     actionUuid: string;
-    surface: "key" | "dial" | "touch" | "touchbar";
+    surface: "key" | "dial" | "touch" | "touchstrip";
     device: {
         id: string;
         type: number;
@@ -196,6 +201,45 @@ export interface HighlightRenderMessage extends BaseMessage {
     /** Data URI of the rendered image with highlight overlay, or null to clear. */
     dataUri: string | null;
 }
+/** Per-render pipeline timing data, embedded in RenderMessage. */
+export interface ProfileData {
+    vnodeToElementMs: number;
+    fromJsxMs: number;
+    takumiRenderMs: number;
+    hashMs: number;
+    base64Ms: number;
+    totalMs: number;
+    skipped: boolean;
+    /** Whether this render was served from the image cache. */
+    cacheHit: boolean;
+    treeDepth: number;
+    nodeCount: number;
+}
+/** Aggregate render metrics snapshot. */
+export interface MetricsData {
+    /** Total flush() calls (render attempts). */
+    flushCount: number;
+    /** Flushes that reached the Takumi renderer. */
+    renderCount: number;
+    /** Tree hash cache hits. */
+    cacheHitCount: number;
+    /** Skipped due to clean tree (dirty flag check). */
+    dirtySkipCount: number;
+    /** Skipped due to identical output (post-render FNV-1a dedup). */
+    hashDedupCount: number;
+    /** Average Takumi render time in milliseconds. */
+    avgRenderMs: number;
+    /** Peak (worst-case) render time in milliseconds. */
+    peakRenderMs: number;
+    /** Image cache memory usage in bytes. */
+    imageCacheBytes: number;
+    /** TouchStrip cache memory usage in bytes. */
+    touchstripCacheBytes: number;
+}
+export interface MetricsMessage extends BaseMessage {
+    type: "metrics";
+    metrics: MetricsData;
+}
 export interface RequestSnapshotMessage extends BaseMessage {
     type: "request:snapshot";
 }
@@ -207,6 +251,6 @@ export interface HighlightActionMessage extends BaseMessage {
     nodeId: number | null;
 }
 /** Messages the plugin server sends to browser clients (via SSE). */
-export type ServerMessage = ServerInfoMessage | SnapshotMessage | ConsoleMessage | NetworkRequestMessage | NetworkResponseMessage | NetworkErrorMessage | RenderMessage | TouchBarRenderMessage | EventBusMessage | LifecycleMessage | HighlightRenderMessage;
+export type ServerMessage = ServerInfoMessage | SnapshotMessage | ConsoleMessage | NetworkRequestMessage | NetworkResponseMessage | NetworkErrorMessage | RenderMessage | TouchStripRenderMessage | EventBusMessage | LifecycleMessage | HighlightRenderMessage | MetricsMessage;
 /** Messages browser clients send to the plugin server (via POST /message). */
 export type ClientMessage = RequestSnapshotMessage | HighlightActionMessage;

package/dist/font-inline.d.ts

@@ -18,5 +18,9 @@ export declare function resolveFontId(source: string, importer: string | undefin
  *
  * Follows symlinks before reading so that bun's internal
  * `node_modules/.bun/` layout resolves to the real file.
+ *
+ * Async: uses `fs.promises.readFile()` to avoid blocking the bundler
+ * event loop for large fonts (1-2 MB).  Both Vite and Rollup `load`
+ * hooks support async return values.
  */
-export declare function loadFont(id: string): string | null;
+export declare function loadFont(id: string): Promise<string | null>;

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";
+import { realpathSync } from "node:fs";
+import { readFile } from "node:fs/promises";
 //#region src/font-inline.ts
 var FONT_RE = /\.(ttf|otf|woff2?)$/;
 /**
@@ -33,10 +34,14 @@ function resolveFontId(source, importer) {
 *
 * Follows symlinks before reading so that bun's internal
 * `node_modules/.bun/` layout resolves to the real file.
+*
+* Async: uses `fs.promises.readFile()` to avoid blocking the bundler
+* event loop for large fonts (1-2 MB).  Both Vite and Rollup `load`
+* hooks support async return values.
 */
-function loadFont(id) {
+async function loadFont(id) {
 	if (!isFontFile(id)) return null;
-	return `export default Buffer.from("${readFileSync(safeRealpath(id) ?? id).toString("base64")}", "base64");`;
+	return `export default Buffer.from("${(await readFile(safeRealpath(id) ?? id)).toString("base64")}", "base64");`;
 }
 function safeRealpath(p) {
 	try {

package/dist/hooks/animation.d.ts

@@ -0,0 +1,154 @@
+/** A single number or a flat object of named numbers. */
+export type AnimationTarget = number | Record<string, number>;
+/** Maps an AnimationTarget shape to its animated output shape. */
+export type AnimatedValue<T extends AnimationTarget> = T extends number ? number : {
+    [K in keyof T]: number;
+};
+export interface SpringConfig {
+    /** Stiffness coefficient (force per unit displacement). @default 170 */
+    tension: number;
+    /** Damping coefficient (force per unit velocity). @default 26 */
+    friction: number;
+    /** Mass of the simulated object. @default 1 */
+    mass: number;
+    /** Absolute velocity threshold below which the spring settles. @default 0.01 */
+    velocityThreshold: number;
+    /** Absolute displacement threshold below which the spring settles. @default 0.005 */
+    displacementThreshold: number;
+    /** Clamp output to target (no overshoot). @default false */
+    clamp: boolean;
+}
+export interface SpringResult<T extends AnimationTarget> {
+    /** Current interpolated value(s). */
+    value: AnimatedValue<T>;
+    /** Whether the spring is still in motion. */
+    isAnimating: boolean;
+    /** Imperatively update the target. */
+    set: (target: T) => void;
+    /** Jump immediately to a value (no animation). */
+    jump: (target: T) => void;
+}
+export type EasingName = "linear" | "easeIn" | "easeOut" | "easeInOut" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic" | "easeInBack" | "easeOutBack" | "easeOutBounce";
+export type EasingFn = (t: number) => number;
+export interface TweenConfig {
+    /** Duration in milliseconds. @default 300 */
+    duration: number;
+    /** Easing function name or custom (t: number) => number. @default "easeOut" */
+    easing: EasingName | EasingFn;
+    /** Target FPS for the animation tick loop. @default 60 */
+    fps: number;
+}
+export interface TweenResult<T extends AnimationTarget> {
+    /** Current interpolated value(s). */
+    value: AnimatedValue<T>;
+    /** 0..1 normalized progress of the current transition. */
+    progress: number;
+    /** Whether the tween is still running. */
+    isAnimating: boolean;
+    /** Imperatively update the target (starts a new tween from current value). */
+    set: (target: T) => void;
+    /** Jump immediately to a value (no animation). */
+    jump: (target: T) => void;
+}
+interface SpringState {
+    position: number;
+    velocity: number;
+}
+/**
+ * Semi-implicit Euler step for a damped harmonic oscillator.
+ * Updates velocity first, then position — stable at low frame rates.
+ */
+export declare function stepSpring(state: SpringState, target: number, config: SpringConfig, dtSeconds: number): SpringState;
+/** Check if a spring channel has come to rest. */
+export declare function isSettled(state: SpringState, target: number, config: SpringConfig): boolean;
+export declare const SpringPresets: {
+    /** Default balanced spring. */
+    readonly default: {
+        readonly tension: 170;
+        readonly friction: 26;
+        readonly mass: 1;
+    };
+    /** Quick and responsive with slight overshoot. Good for press feedback. */
+    readonly stiff: {
+        readonly tension: 400;
+        readonly friction: 28;
+        readonly mass: 1;
+    };
+    /** Bouncy with visible oscillation. Good for playful UIs. */
+    readonly wobbly: {
+        readonly tension: 180;
+        readonly friction: 12;
+        readonly mass: 1;
+    };
+    /** Slow and smooth. Good for background transitions. */
+    readonly gentle: {
+        readonly tension: 120;
+        readonly friction: 14;
+        readonly mass: 1;
+    };
+    /** Very slow, molasses-like. Good for ambient drift. */
+    readonly molasses: {
+        readonly tension: 80;
+        readonly friction: 30;
+        readonly mass: 1;
+    };
+    /** Snappy with no overshoot. Good for precise UI elements. */
+    readonly snap: {
+        readonly tension: 300;
+        readonly friction: 36;
+        readonly mass: 1;
+        readonly clamp: true;
+    };
+    /** Heavy object feel. */
+    readonly heavy: {
+        readonly tension: 200;
+        readonly friction: 20;
+        readonly mass: 3;
+    };
+};
+export declare const Easings: Record<EasingName, EasingFn>;
+/**
+ * Spring physics-based animation hook.
+ *
+ * Returns animated value(s) that follow the target with natural spring dynamics
+ * (damped harmonic oscillator). Supports single numbers and objects of numbers.
+ *
+ * Automatically starts/stops the tick loop when the spring is in motion or settled.
+ *
+ * @example
+ * ```tsx
+ * const { value: scale } = useSpring(pressed ? 0.85 : 1, SpringPresets.wobbly);
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const { value } = useSpring({ x: targetX, opacity: show ? 1 : 0 }, SpringPresets.gentle);
+ * // value.x and value.opacity are plain numbers
+ * ```
+ */
+export declare function useSpring<T extends AnimationTarget>(target: T, config?: Partial<SpringConfig> & {
+    fps?: number;
+}): SpringResult<T>;
+/**
+ * Duration + easing-based animation hook.
+ *
+ * Returns animated value(s) that smoothly transition to the target over the
+ * specified duration using an easing curve. Supports single numbers and objects
+ * of numbers.
+ *
+ * When the target changes mid-tween, a new tween starts from the current
+ * interpolated position (no discontinuity).
+ *
+ * @example
+ * ```tsx
+ * const { value: opacity } = useTween(visible ? 1 : 0, { duration: 500, easing: "easeInOut" });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const { value } = useTween({ y: expanded ? 0 : -50, opacity: expanded ? 1 : 0 });
+ * // value.y and value.opacity are plain numbers
+ * ```
+ */
+export declare function useTween<T extends AnimationTarget>(target: T, config?: Partial<TweenConfig>): TweenResult<T>;
+export {};

package/dist/hooks/animation.js

@@ -0,0 +1,381 @@
+import { usePrevious, useTick } from "./utility.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region src/hooks/animation.ts
+var SPRING_DEFAULTS = {
+	tension: 170,
+	friction: 26,
+	mass: 1,
+	velocityThreshold: .01,
+	displacementThreshold: .005,
+	clamp: false
+};
+var TWEEN_DEFAULTS = {
+	duration: 300,
+	easing: "easeOut",
+	fps: 60
+};
+/** Max dt cap to prevent spring explosion after long pauses.
+*  If the process is suspended (debugger, GC pause), dt could be
+*  seconds-long, causing the spring to overshoot wildly.  Capping
+*  at ~64ms (roughly one frame at 15fps) keeps the simulation stable. */
+var MAX_DT_SEC = .064;
+/**
+* Semi-implicit Euler step for a damped harmonic oscillator.
+* Updates velocity first, then position — stable at low frame rates.
+*/
+function stepSpring(state, target, config, dtSeconds) {
+	const { tension, friction, mass } = config;
+	const displacement = state.position - target;
+	const acceleration = (-tension * displacement + -friction * state.velocity) / mass;
+	let velocity = state.velocity + acceleration * dtSeconds;
+	let position = state.position + velocity * dtSeconds;
+	if (config.clamp) {
+		if (displacement > 0 && position < target || displacement < 0 && position > target) {
+			position = target;
+			velocity = 0;
+		}
+	}
+	return {
+		position,
+		velocity
+	};
+}
+/** Check if a spring channel has come to rest. */
+function isSettled(state, target, config) {
+	return Math.abs(state.velocity) < config.velocityThreshold && Math.abs(state.position - target) < config.displacementThreshold;
+}
+var SpringPresets = {
+	default: {
+		tension: 170,
+		friction: 26,
+		mass: 1
+	},
+	stiff: {
+		tension: 400,
+		friction: 28,
+		mass: 1
+	},
+	wobbly: {
+		tension: 180,
+		friction: 12,
+		mass: 1
+	},
+	gentle: {
+		tension: 120,
+		friction: 14,
+		mass: 1
+	},
+	molasses: {
+		tension: 80,
+		friction: 30,
+		mass: 1
+	},
+	snap: {
+		tension: 300,
+		friction: 36,
+		mass: 1,
+		clamp: true
+	},
+	heavy: {
+		tension: 200,
+		friction: 20,
+		mass: 3
+	}
+};
+var Easings = {
+	linear: (t) => t,
+	easeIn: (t) => t * t,
+	easeOut: (t) => t * (2 - t),
+	easeInOut: (t) => t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
+	easeInCubic: (t) => t * t * t,
+	easeOutCubic: (t) => 1 - (1 - t) ** 3,
+	easeInOutCubic: (t) => t < .5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2,
+	easeInBack: (t) => {
+		const c = 1.70158;
+		return (c + 1) * t * t * t - c * t * t;
+	},
+	easeOutBack: (t) => {
+		const c = 1.70158;
+		return 1 + (c + 1) * (t - 1) ** 3 + c * (t - 1) ** 2;
+	},
+	easeOutBounce: (t) => {
+		const n1 = 7.5625;
+		const d1 = 2.75;
+		if (t < 1 / d1) return n1 * t * t;
+		if (t < 2 / d1) return n1 * (t -= 1.5 / d1) * t + .75;
+		if (t < 2.5 / d1) return n1 * (t -= 2.25 / d1) * t + .9375;
+		return n1 * (t -= 2.625 / d1) * t + .984375;
+	}
+};
+function resolveEasing(easing) {
+	return typeof easing === "function" ? easing : Easings[easing];
+}
+var SCALAR_KEY = "_";
+function toChannelMap(target) {
+	if (typeof target === "number") return new Map([[SCALAR_KEY, target]]);
+	return new Map(Object.entries(target));
+}
+function snapshotValue(target) {
+	if (typeof target === "number") return target;
+	const result = {};
+	for (const [key, val] of Object.entries(target)) result[key] = val;
+	return result;
+}
+function snapshotFromSpringState(state, isObject) {
+	if (!isObject) return state.get(SCALAR_KEY).position;
+	const result = {};
+	for (const [key, s] of state) result[key] = s.position;
+	return result;
+}
+function snapshotFromMap(map, isObject) {
+	if (!isObject) return map.get(SCALAR_KEY);
+	const result = {};
+	for (const [key, val] of map) result[key] = val;
+	return result;
+}
+function forEachChannel(target, fn) {
+	if (typeof target === "number") fn(SCALAR_KEY, target);
+	else for (const [key, val] of Object.entries(target)) fn(key, val);
+}
+function shallowEqual(a, b) {
+	if (typeof a === "number" && typeof b === "number") return a === b;
+	if (typeof a !== typeof b) return false;
+	const aObj = a;
+	const bObj = b;
+	const aKeys = Object.keys(aObj);
+	const bKeys = Object.keys(bObj);
+	if (aKeys.length !== bKeys.length) return false;
+	return aKeys.every((k) => aObj[k] === bObj[k]);
+}
+function initializeSpringState(target) {
+	const map = /* @__PURE__ */ new Map();
+	forEachChannel(target, (key, value) => {
+		map.set(key, {
+			position: value,
+			velocity: 0
+		});
+	});
+	return map;
+}
+function snapSpringToTarget(state, target) {
+	forEachChannel(target, (key, value) => {
+		state.set(key, {
+			position: value,
+			velocity: 0
+		});
+	});
+}
+/**
+* Spring physics-based animation hook.
+*
+* Returns animated value(s) that follow the target with natural spring dynamics
+* (damped harmonic oscillator). Supports single numbers and objects of numbers.
+*
+* Automatically starts/stops the tick loop when the spring is in motion or settled.
+*
+* @example
+* ```tsx
+* const { value: scale } = useSpring(pressed ? 0.85 : 1, SpringPresets.wobbly);
+* ```
+*
+* @example
+* ```tsx
+* const { value } = useSpring({ x: targetX, opacity: show ? 1 : 0 }, SpringPresets.gentle);
+* // value.x and value.opacity are plain numbers
+* ```
+*/
+function useSpring(target, config) {
+	const resolvedConfig = useMemo(() => ({
+		...SPRING_DEFAULTS,
+		...config
+	}), [
+		config?.tension,
+		config?.friction,
+		config?.mass,
+		config?.velocityThreshold,
+		config?.displacementThreshold,
+		config?.clamp
+	]);
+	const fps = config?.fps ?? 60;
+	const isObject = typeof target === "object" && target !== null;
+	const stateRef = useRef(null);
+	if (stateRef.current === null) stateRef.current = initializeSpringState(target);
+	const targetRef = useRef(target);
+	targetRef.current = target;
+	const configRef = useRef(resolvedConfig);
+	configRef.current = resolvedConfig;
+	const [value, setValue] = useState(() => snapshotValue(target));
+	const [isAnimating, setIsAnimating] = useState(false);
+	const prevTarget = usePrevious(target);
+	useEffect(() => {
+		if (prevTarget !== void 0 && !shallowEqual(prevTarget, target)) {
+			const state = stateRef.current;
+			forEachChannel(target, (key, val) => {
+				if (!state.has(key)) state.set(key, {
+					position: val,
+					velocity: 0
+				});
+			});
+			setIsAnimating(true);
+		}
+	}, [prevTarget, target]);
+	useTick((deltaMs) => {
+		const dt = Math.min(deltaMs / 1e3, MAX_DT_SEC);
+		const state = stateRef.current;
+		const currentTarget = targetRef.current;
+		const cfg = configRef.current;
+		let allSettled = true;
+		forEachChannel(currentTarget, (key, targetVal) => {
+			const channelState = state.get(key);
+			if (!channelState) return;
+			const next = stepSpring(channelState, targetVal, cfg, dt);
+			state.set(key, next);
+			if (!isSettled(next, targetVal, cfg)) allSettled = false;
+		});
+		if (allSettled) {
+			snapSpringToTarget(state, currentTarget);
+			setValue(snapshotValue(currentTarget));
+			setIsAnimating(false);
+		} else setValue(snapshotFromSpringState(state, isObject));
+	}, isAnimating ? fps : false);
+	const set = useCallback((newTarget) => {
+		targetRef.current = newTarget;
+		const state = stateRef.current;
+		forEachChannel(newTarget, (key, val) => {
+			if (!state.has(key)) state.set(key, {
+				position: val,
+				velocity: 0
+			});
+		});
+		setIsAnimating(true);
+	}, []);
+	const jump = useCallback((newTarget) => {
+		targetRef.current = newTarget;
+		snapSpringToTarget(stateRef.current, newTarget);
+		setValue(snapshotValue(newTarget));
+		setIsAnimating(false);
+	}, []);
+	return useMemo(() => ({
+		value,
+		isAnimating,
+		set,
+		jump
+	}), [
+		value,
+		isAnimating,
+		set,
+		jump
+	]);
+}
+function interpolateTween(tween, easingFn) {
+	const easedT = easingFn(tween.duration > 0 ? Math.min(tween.elapsed / tween.duration, 1) : 1);
+	const result = /* @__PURE__ */ new Map();
+	for (const [key, fromVal] of tween.from) {
+		const toVal = tween.to.get(key) ?? fromVal;
+		result.set(key, fromVal + (toVal - fromVal) * easedT);
+	}
+	return result;
+}
+/**
+* Duration + easing-based animation hook.
+*
+* Returns animated value(s) that smoothly transition to the target over the
+* specified duration using an easing curve. Supports single numbers and objects
+* of numbers.
+*
+* When the target changes mid-tween, a new tween starts from the current
+* interpolated position (no discontinuity).
+*
+* @example
+* ```tsx
+* const { value: opacity } = useTween(visible ? 1 : 0, { duration: 500, easing: "easeInOut" });
+* ```
+*
+* @example
+* ```tsx
+* const { value } = useTween({ y: expanded ? 0 : -50, opacity: expanded ? 1 : 0 });
+* // value.y and value.opacity are plain numbers
+* ```
+*/
+function useTween(target, config) {
+	const duration = config?.duration ?? TWEEN_DEFAULTS.duration;
+	const easingFn = resolveEasing(config?.easing ?? TWEEN_DEFAULTS.easing);
+	const fps = config?.fps ?? TWEEN_DEFAULTS.fps;
+	const isObject = typeof target === "object" && target !== null;
+	const tweenRef = useRef(null);
+	if (tweenRef.current === null) {
+		const initial = toChannelMap(target);
+		tweenRef.current = {
+			from: new Map(initial),
+			to: new Map(initial),
+			elapsed: duration,
+			duration
+		};
+	}
+	const targetRef = useRef(target);
+	const easingRef = useRef(easingFn);
+	easingRef.current = easingFn;
+	const [value, setValue] = useState(() => snapshotValue(target));
+	const [progress, setProgress] = useState(1);
+	const [isAnimating, setIsAnimating] = useState(false);
+	const prevTarget = usePrevious(target);
+	useEffect(() => {
+		if (prevTarget !== void 0 && !shallowEqual(prevTarget, target)) {
+			const tween = tweenRef.current;
+			tween.from = interpolateTween(tween, easingRef.current);
+			tween.to = toChannelMap(target);
+			tween.elapsed = 0;
+			tween.duration = duration;
+			targetRef.current = target;
+			setIsAnimating(true);
+		}
+	}, [
+		prevTarget,
+		target,
+		duration
+	]);
+	useTick((deltaMs) => {
+		const tween = tweenRef.current;
+		tween.elapsed = Math.min(tween.elapsed + deltaMs, tween.duration);
+		const t = tween.duration > 0 ? tween.elapsed / tween.duration : 1;
+		const result = interpolateTween(tween, easingRef.current);
+		setProgress(t);
+		setValue(snapshotFromMap(result, isObject));
+		if (t >= 1) setIsAnimating(false);
+	}, isAnimating ? fps : false);
+	const set = useCallback((newTarget) => {
+		const tween = tweenRef.current;
+		tween.from = interpolateTween(tween, easingRef.current);
+		tween.to = toChannelMap(newTarget);
+		tween.elapsed = 0;
+		tween.duration = duration;
+		targetRef.current = newTarget;
+		setIsAnimating(true);
+	}, [duration]);
+	const jump = useCallback((newTarget) => {
+		const tween = tweenRef.current;
+		const map = toChannelMap(newTarget);
+		tween.from = new Map(map);
+		tween.to = new Map(map);
+		tween.elapsed = tween.duration;
+		targetRef.current = newTarget;
+		setValue(snapshotValue(newTarget));
+		setProgress(1);
+		setIsAnimating(false);
+	}, []);
+	return useMemo(() => ({
+		value,
+		progress,
+		isAnimating,
+		set,
+		jump
+	}), [
+		value,
+		progress,
+		isAnimating,
+		set,
+		jump
+	]);
+}
+//#endregion
+export { Easings, SpringPresets, useSpring, useTween };

package/dist/hooks/events.js

@@ -1,6 +1,6 @@
 import { EventBusContext, StreamDeckContext } from "../context/providers.js";
 import { useCallbackRef } from "./internal/useCallbackRef.js";
-import { useContext, useEffect, useRef } from "react";
+import { useContext, useEffect } from "react";
 //#region src/hooks/events.ts
 function useEvent(event, callback) {
 	const bus = useContext(EventBusContext);
@@ -37,11 +37,7 @@ function useTouchTap(callback) {
 }
 function useDialHint(hints) {
 	const { action } = useContext(StreamDeckContext);
-	const prevHints = useRef("");
 	useEffect(() => {
-		const serialized = JSON.stringify(hints);
-		if (serialized === prevHints.current) return;
-		prevHints.current = serialized;
 		if ("setTriggerDescription" in action) action.setTriggerDescription({
 			rotate: hints.rotate,
 			push: hints.press,