@fcannizzaro/streamdeck-react 0.1.10 → 0.1.12

package/dist/devtools/observers/lifecycle.d.ts

@@ -1,5 +1,5 @@
 import { ReactRoot } from '../../roots/root';
-import { TouchBarRoot } from '../../roots/touchbar-root';
+import { TouchStripRoot } from '../../roots/touchstrip-root';
 import { CanvasInfo, DeviceInfo } from '../../types';
 export interface RegistryObserver {
     onRootCreated(actionId: string, root: ReactRoot, meta: {
@@ -13,8 +13,8 @@ export interface RegistryObserver {
         };
     }): void;
     onRootDestroyed(actionId: string): void;
-    onTouchBarCreated(deviceId: string, root: TouchBarRoot, deviceInfo: DeviceInfo): void;
-    onTouchBarColumnChanged(deviceId: string, columns: number[], actionMap: Map<number, string>): void;
-    onTouchBarDestroyed(deviceId: string): void;
+    onTouchStripCreated(deviceId: string, root: TouchStripRoot, deviceInfo: DeviceInfo): void;
+    onTouchStripColumnChanged(deviceId: string, columns: number[], actionMap: Map<number, string>): void;
+    onTouchStripDestroyed(deviceId: string): void;
     onDispatch(actionId: string, event: string, payload: unknown): void;
 }

package/dist/devtools/server.d.ts

@@ -35,7 +35,12 @@ export declare class DevtoolsServer {
     /**
      * GET /message?d=<json> — fire-and-forget client→server messages.
      * Used via `new Image().src` to bypass CORS/PNA preflight entirely.
-     * Returns a 1x1 transparent GIF.
+     * Returns a 1x1 transparent GIF (smallest valid image response).
+     *
+     * Why: browsers enforce Private Network Access (PNA) restrictions
+     * on fetch/XHR to localhost from public origins.  Image loading
+     * is exempt from PNA preflight, so `new Image().src = url` works
+     * without triggering CORS errors.
      */
     private handleGetMessage;
     /** POST /message — client→server messages (JSON body). Fallback for programmatic use. */

package/dist/devtools/server.js

@@ -153,7 +153,12 @@ var DevtoolsServer = class {
 	/**
 	* GET /message?d=<json> — fire-and-forget client→server messages.
 	* Used via `new Image().src` to bypass CORS/PNA preflight entirely.
-	* Returns a 1x1 transparent GIF.
+	* Returns a 1x1 transparent GIF (smallest valid image response).
+	*
+	* Why: browsers enforce Private Network Access (PNA) restrictions
+	* on fetch/XHR to localhost from public origins.  Image loading
+	* is exempt from PNA preflight, so `new Image().src = url` works
+	* without triggering CORS errors.
 	*/
 	handleGetMessage(req, res) {
 		const qs = (req.url ?? "").split("?")[1] ?? "";

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 {
+    /** Time to convert VNode tree to Takumi node tree (ms). */
+    vnodeConversionMs: 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 30 */
+    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 {};