@1upvision/sdk 0.1.0 → 0.1.2

package/dist/bridge/worker-bridge.d.ts

@@ -1,11 +1,17 @@
 type RequestHandler = (params: unknown) => unknown | Promise<unknown>;
 type NotificationHandler = (params: unknown) => void;
+/**
+ * Bridge used by the extension sandbox (Worker **or** iframe) to
+ * communicate with the host via JSON-RPC over postMessage.
+ */
 export declare class WorkerBridge {
     private requestHandlers;
     private notificationHandlers;
     private pendingRequests;
     private requestCounter;
+    private messageListener;
     constructor();
+    private send;
     notify(method: string, params?: unknown): void;
     request(method: string, params?: unknown): Promise<unknown>;
     onRequest(method: string, handler: RequestHandler): void;

package/dist/bridge/worker-bridge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"worker-bridge.d.ts","sourceRoot":"","sources":["../../src/bridge/worker-bridge.ts"],"names":[],"mappings":"AAOA,KAAK,cAAc,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;AACtE,KAAK,mBAAmB,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;AAErD,qBAAa,YAAY;IACvB,OAAO,CAAC,eAAe,CAAqC;IAC5D,OAAO,CAAC,oBAAoB,CAA0C;IACtE,OAAO,CAAC,eAAe,CAGnB;IACJ,OAAO,CAAC,cAAc,CAAK;;IAQ3B,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI;IAK9C,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAS3D,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,IAAI;IAIxD,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,mBAAmB,GAAG,IAAI;IAIlE,OAAO,CAAC,aAAa;IAsDrB,OAAO,IAAI,IAAI;CAKhB"}
+{"version":3,"file":"worker-bridge.d.ts","sourceRoot":"","sources":["../../src/bridge/worker-bridge.ts"],"names":[],"mappings":"AAOA,KAAK,cAAc,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;AACtE,KAAK,mBAAmB,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;AAUrD;;;GAGG;AACH,qBAAa,YAAY;IACvB,OAAO,CAAC,eAAe,CAAqC;IAC5D,OAAO,CAAC,oBAAoB,CAA0C;IACtE,OAAO,CAAC,eAAe,CAGnB;IACJ,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,eAAe,CAAgD;;IAqBvE,OAAO,CAAC,IAAI;IAQZ,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI;IAK9C,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAS3D,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,IAAI;IAIxD,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,mBAAmB,GAAG,IAAI;IAIlE,OAAO,CAAC,aAAa;IAsDrB,OAAO,IAAI,IAAI;CAahB"}

package/dist/bridge/worker-bridge.js

@@ -1,23 +1,55 @@
+/**
+ * Detect whether we're running inside a Web Worker or an iframe.
+ * In a Worker `self` is a DedicatedWorkerGlobalScope (no `parent`).
+ * In an iframe `self` is a Window with `self.parent !== self`.
+ */
+const isIframe = typeof window !== "undefined" && window.parent && window.parent !== window;
+/**
+ * Bridge used by the extension sandbox (Worker **or** iframe) to
+ * communicate with the host via JSON-RPC over postMessage.
+ */
 export class WorkerBridge {
     requestHandlers = new Map();
     notificationHandlers = new Map();
     pendingRequests = new Map();
     requestCounter = 0;
+    messageListener = null;
     constructor() {
-        self.addEventListener("message", (event) => {
-            this.handleMessage(event.data);
-        });
+        this.messageListener = (event) => {
+            // In iframe context, ignore messages not from the parent window
+            if (isIframe && event.source !== window.parent)
+                return;
+            const data = event.data;
+            // Ignore non-JSONRPC messages (e.g. React DevTools, HMR, etc.)
+            if (!data || typeof data !== "object" || data.jsonrpc !== "2.0")
+                return;
+            this.handleMessage(data);
+        };
+        if (isIframe) {
+            window.addEventListener("message", this.messageListener);
+        }
+        else {
+            self.addEventListener("message", this.messageListener);
+        }
+    }
+    send(message) {
+        if (isIframe) {
+            window.parent.postMessage(message, "*");
+        }
+        else {
+            self.postMessage(message);
+        }
     }
     notify(method, params) {
         const message = { jsonrpc: "2.0", method, params };
-        self.postMessage(message);
+        this.send(message);
     }
     request(method, params) {
         const id = `req_${++this.requestCounter}`;
         const message = { jsonrpc: "2.0", id, method, params };
         return new Promise((resolve, reject) => {
             this.pendingRequests.set(id, { resolve, reject });
-            self.postMessage(message);
+            this.send(message);
         });
     }
     onRequest(method, handler) {
@@ -56,7 +88,7 @@ export class WorkerBridge {
                             id: message.id,
                             result,
                         };
-                        self.postMessage(response);
+                        this.send(response);
                     })
                         .catch((error) => {
                         const response = {
@@ -64,7 +96,7 @@ export class WorkerBridge {
                             id: message.id,
                             error: { code: -32000, message: String(error) },
                         };
-                        self.postMessage(response);
+                        this.send(response);
                     });
                 }
             }
@@ -78,6 +110,15 @@ export class WorkerBridge {
         }
     }
     destroy() {
+        if (this.messageListener) {
+            if (isIframe) {
+                window.removeEventListener("message", this.messageListener);
+            }
+            else {
+                self.removeEventListener("message", this.messageListener);
+            }
+            this.messageListener = null;
+        }
         this.pendingRequests.clear();
         this.requestHandlers.clear();
         this.notificationHandlers.clear();

package/dist/hooks/useMutation.d.ts

@@ -0,0 +1,18 @@
+export interface UseMutationResult<T = unknown> {
+    mutate: (args?: Record<string, unknown>) => void;
+    mutateAsync: (args?: Record<string, unknown>) => Promise<T>;
+    data: T | undefined;
+    isLoading: boolean;
+    error: Error | null;
+}
+/**
+ * Call a server mutation function by name.
+ *
+ * ```tsx
+ * const { mutate: addPlayer, isLoading } = useMutation("addPlayer");
+ * // ...
+ * addPlayer({ userId: "alice", score: 100 });
+ * ```
+ */
+export declare function useMutation<T = unknown>(name: string): UseMutationResult<T>;
+//# sourceMappingURL=useMutation.d.ts.map

package/dist/hooks/useMutation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMutation.d.ts","sourceRoot":"","sources":["../../src/hooks/useMutation.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,OAAO;IAC5C,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACjD,WAAW,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IAC5D,IAAI,EAAE,CAAC,GAAG,SAAS,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,CAAC,GAAG,OAAO,EACrC,IAAI,EAAE,MAAM,GACX,iBAAiB,CAAC,CAAC,CAAC,CAwDtB"}

package/dist/hooks/useMutation.js

@@ -0,0 +1,50 @@
+import { useState, useCallback } from "react";
+/**
+ * Call a server mutation function by name.
+ *
+ * ```tsx
+ * const { mutate: addPlayer, isLoading } = useMutation("addPlayer");
+ * // ...
+ * addPlayer({ userId: "alice", score: 100 });
+ * ```
+ */
+export function useMutation(name) {
+    const [data, setData] = useState(undefined);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const bridge = globalThis.__visionBridge;
+    const mutateAsync = useCallback(async (args) => {
+        if (!bridge) {
+            throw new Error("Vision bridge not available");
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            const result = (await bridge.request("server.mutation", {
+                name,
+                args,
+            }));
+            setData(result);
+            setIsLoading(false);
+            // Trigger query invalidation so useQuery hooks refetch
+            const invalidate = globalThis
+                .__visionQueryInvalidate;
+            if (invalidate) {
+                invalidate({});
+            }
+            return result;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            setIsLoading(false);
+            throw error;
+        }
+    }, [bridge, name]);
+    const mutate = useCallback((args) => {
+        mutateAsync(args).catch(() => {
+            // Error is already captured in state; swallow to avoid unhandled rejection
+        });
+    }, [mutateAsync]);
+    return { mutate, mutateAsync, data, isLoading, error };
+}

package/dist/hooks/useQuery.d.ts

@@ -0,0 +1,16 @@
+export interface UseQueryResult<T = unknown> {
+    data: T | undefined;
+    isLoading: boolean;
+    error: Error | null;
+    refetch: () => void;
+}
+/**
+ * Call a server query function by name and reactively return the result.
+ *
+ * ```tsx
+ * const { data: players, isLoading, refetch } = useQuery("getPlayers");
+ * const { data: player } = useQuery("getPlayer", { userId: "alice" });
+ * ```
+ */
+export declare function useQuery<T = unknown>(name: string, args?: Record<string, unknown>): UseQueryResult<T>;
+//# sourceMappingURL=useQuery.d.ts.map

package/dist/hooks/useQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useQuery.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,OAAO;IACzC,IAAI,EAAE,CAAC,GAAG,SAAS,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,CAAC,GAAG,OAAO,EAClC,IAAI,EAAE,MAAM,EACZ,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC7B,cAAc,CAAC,CAAC,CAAC,CAiEnB"}

package/dist/hooks/useQuery.js

@@ -0,0 +1,62 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+/**
+ * Call a server query function by name and reactively return the result.
+ *
+ * ```tsx
+ * const { data: players, isLoading, refetch } = useQuery("getPlayers");
+ * const { data: player } = useQuery("getPlayer", { userId: "alice" });
+ * ```
+ */
+export function useQuery(name, args) {
+    const [data, setData] = useState(undefined);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const argsJson = JSON.stringify(args);
+    const mountedRef = useRef(true);
+    const bridge = globalThis.__visionBridge;
+    const fetchData = useCallback(() => {
+        if (!bridge)
+            return;
+        setIsLoading(true);
+        setError(null);
+        const parsedArgs = argsJson ? JSON.parse(argsJson) : undefined;
+        bridge
+            .request("server.query", { name, args: parsedArgs })
+            .then((result) => {
+            if (mountedRef.current) {
+                setData(result);
+                setIsLoading(false);
+            }
+        })
+            .catch((err) => {
+            if (mountedRef.current) {
+                setError(err instanceof Error ? err : new Error(String(err)));
+                setIsLoading(false);
+            }
+        });
+    }, [bridge, name, argsJson]);
+    useEffect(() => {
+        mountedRef.current = true;
+        fetchData();
+        return () => {
+            mountedRef.current = false;
+        };
+    }, [fetchData]);
+    // Listen for server-side invalidation pushed by the host after mutations
+    useEffect(() => {
+        const handler = (detail) => {
+            const payload = detail;
+            if (!payload?.queryNames || payload.queryNames.includes(name)) {
+                fetchData();
+            }
+        };
+        globalThis.__visionQueryInvalidate = handler;
+        return () => {
+            if (globalThis.__visionQueryInvalidate ===
+                handler) {
+                delete globalThis.__visionQueryInvalidate;
+            }
+        };
+    }, [fetchData, name]);
+    return { data, isLoading, error, refetch: fetchData };
+}

package/dist/index.d.ts

@@ -13,6 +13,8 @@ export { Box } from "./components/Box";
 export { useExtensionStorage } from "./hooks/useExtensionStorage";
 export { useExtensionContext } from "./hooks/useExtensionContext";
 export { useVisionState } from "./hooks/useVisionState";
+export { useQuery } from "./hooks/useQuery";
+export { useMutation } from "./hooks/useMutation";
 export type { ExtensionContext } from "./hooks/useExtensionContext";
 export type { ButtonProps } from "./components/Button";
 export type { TextFieldProps } from "./components/TextField";
@@ -25,5 +27,7 @@ export type { ListProps } from "./components/List";
 export type { TextProps } from "./components/Text";
 export type { ImageProps } from "./components/Image";
 export type { BoxProps } from "./components/Box";
+export type { UseQueryResult } from "./hooks/useQuery";
+export type { UseMutationResult } from "./hooks/useMutation";
 export type { VisionStyle } from "@1upvision/protocol";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,YAAY,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACpE,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,YAAY,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,YAAY,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACpE,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,YAAY,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.js

@@ -16,3 +16,5 @@ export { Box } from "./components/Box";
 export { useExtensionStorage } from "./hooks/useExtensionStorage";
 export { useExtensionContext } from "./hooks/useExtensionContext";
 export { useVisionState } from "./hooks/useVisionState";
+export { useQuery } from "./hooks/useQuery";
+export { useMutation } from "./hooks/useMutation";

package/dist/renderer/callback-registry.d.ts

@@ -3,6 +3,7 @@ export declare class CallbackRegistry {
     private counter;
     register(fn: Function): string;
     invoke(handlerId: string, args: unknown[]): unknown;
+    update(handlerId: string, fn: Function): void;
     remove(handlerId: string): void;
     clear(): void;
 }

package/dist/renderer/callback-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"callback-registry.d.ts","sourceRoot":"","sources":["../../src/renderer/callback-registry.ts"],"names":[],"mappings":"AAAA,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,OAAO,CAAK;IAEpB,QAAQ,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM;IAM9B,MAAM,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO;IASnD,MAAM,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAI/B,KAAK,IAAI,IAAI;CAId"}
+{"version":3,"file":"callback-registry.d.ts","sourceRoot":"","sources":["../../src/renderer/callback-registry.ts"],"names":[],"mappings":"AAAA,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,OAAO,CAAK;IAEpB,QAAQ,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM;IAM9B,MAAM,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO;IASnD,MAAM,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,GAAG,IAAI;IAI7C,MAAM,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAI/B,KAAK,IAAI,IAAI;CAId"}

package/dist/renderer/callback-registry.js

@@ -14,6 +14,9 @@ export class CallbackRegistry {
         }
         return handler(...args);
     }
+    update(handlerId, fn) {
+        this.handlers.set(handlerId, fn);
+    }
     remove(handlerId) {
         this.handlers.delete(handlerId);
     }

package/dist/renderer/reconciler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reconciler.d.ts","sourceRoot":"","sources":["../../src/renderer/reconciler.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AACpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAMvD,eAAO,MAAM,gBAAgB,kBAAyB,CAAC;AAMvD,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;CAC/B;AAMD,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,cAAc,EAAE,CAAC;CAC5B;AAsDD;;;GAGG;AACH,iBAAS,aAAa,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,mBAAmB,EAAE,CASzE;AAiBD,KAAK,UAAU,GAAG,GAAG,CAAC;AAEtB,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,KAAK,IAAI,GAC9C,UAAU,CA+TZ;AAED,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"reconciler.d.ts","sourceRoot":"","sources":["../../src/renderer/reconciler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAMvD,eAAO,MAAM,gBAAgB,kBAAyB,CAAC;AAMvD,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;CAC/B;AAMD,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,cAAc,EAAE,CAAC;CAC5B;AAoID;;;GAGG;AACH,iBAAS,aAAa,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,mBAAmB,EAAE,CASzE;AAiBD,KAAK,UAAU,GAAG,GAAG,CAAC;AAEtB,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,KAAK,IAAI,GAC9C,UAAU,CA6VZ;AAED,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/renderer/reconciler.js

@@ -10,17 +10,48 @@ let nodeCounter = 0;
 function nextId() {
     return `node_${++nodeCounter}`;
 }
+/**
+ * Recursively remove all callback registry entries for an instance and its
+ * descendants.  Called when nodes are removed from the tree so that the
+ * CallbackRegistry doesn't grow unbounded.
+ */
+function cleanupHandlers(instance) {
+    for (const [key, value] of Object.entries(instance.props)) {
+        if (key.startsWith("__handler_")) {
+            callbackRegistry.remove(value);
+        }
+    }
+    for (const child of instance.children) {
+        cleanupHandlers(child);
+    }
+}
 /**
  * Sanitize props by replacing function values with handler IDs.
+ *
+ * When `existingProps` is provided (during updates), we reuse handler IDs
+ * for prop keys that already had a handler registered.  This avoids the
+ * monotonically-growing callback counter producing "different" IDs on every
+ * React commit, which would cause the serialized tree to look different each
+ * time, driving an infinite commit → serialize → commit loop inside the
+ * worker and leaking memory at ~250 MB/s.
  */
-function sanitizeProps(props) {
+function sanitizeProps(props, existingProps) {
     const sanitized = {};
     for (const [key, value] of Object.entries(props)) {
         if (key === "children")
             continue;
         if (typeof value === "function") {
-            const handlerId = callbackRegistry.register(value);
-            sanitized[`__handler_${key}`] = handlerId;
+            const handlerKey = `__handler_${key}`;
+            const existingHandlerId = existingProps?.[handlerKey];
+            if (existingHandlerId) {
+                // Reuse the existing ID but update the function it points to
+                callbackRegistry.update(existingHandlerId, value);
+                sanitized[handlerKey] = existingHandlerId;
+            }
+            else {
+                const handlerId = callbackRegistry.register(value);
+                sanitized[handlerKey] = handlerId;
+            }
         }
         else {
             sanitized[key] = value;
@@ -28,11 +59,49 @@ function sanitizeProps(props) {
     }
     return sanitized;
 }
+/**
+ * Check whether a value is safe to include in serialized props.
+ * Rejects React elements/fibers, class instances, DOM nodes, and other
+ * objects that would cause deepSanitize to walk enormous object graphs.
+ * Only plain objects ({}) and arrays are allowed through.
+ */
+function isPlainSerializable(value) {
+    if (value === null || value === undefined)
+        return true;
+    const t = typeof value;
+    if (t === "string" || t === "number" || t === "boolean")
+        return true;
+    if (t === "function" || t === "symbol")
+        return false;
+    if (t !== "object")
+        return false;
+    // Arrays are fine (contents checked recursively)
+    if (Array.isArray(value))
+        return true;
+    // React elements have $$typeof (Symbol) — reject them
+    if ("$$typeof" in value)
+        return false;
+    // DOM nodes
+    if (typeof value.nodeType === "number")
+        return false;
+    // Only allow plain objects (Object.prototype or null prototype)
+    const proto = Object.getPrototypeOf(value);
+    return proto === Object.prototype || proto === null;
+}
+/** Maximum nesting depth for deepSanitize to prevent runaway recursion. */
+const MAX_SANITIZE_DEPTH = 10;
 /**
  * Deep-strip any values that cannot survive structured clone (postMessage).
- * Functions, Symbols, and circular refs are removed.
+ * Functions, Symbols, circular/shared refs, and non-plain objects are removed.
+ *
+ * Uses a `seen` WeakSet that is never cleared during traversal — objects are
+ * visited at most once across the entire graph. This prevents both infinite
+ * loops from circular references AND exponential blowup from shared refs
+ * (e.g. React fiber trees where child.return === parent).
  */
-function deepSanitize(value) {
+function deepSanitize(value, seen = new WeakSet(), depth = 0) {
+    if (depth > MAX_SANITIZE_DEPTH)
+        return undefined;
     if (value === null || value === undefined)
         return value;
     const t = typeof value;
@@ -40,12 +109,20 @@ function deepSanitize(value) {
         return value;
     if (t === "function" || t === "symbol")
         return undefined;
-    if (Array.isArray(value))
-        return value.map(deepSanitize);
     if (t === "object") {
+        const obj = value;
+        if (seen.has(obj))
+            return undefined;
+        seen.add(obj);
+        // Reject non-plain objects (React elements, DOM nodes, class instances)
+        if (!isPlainSerializable(value))
+            return undefined;
+        if (Array.isArray(value)) {
+            return value.map((v) => deepSanitize(v, seen, depth + 1));
+        }
         const out = {};
         for (const [k, v] of Object.entries(value)) {
-            const sanitized = deepSanitize(v);
+            const sanitized = deepSanitize(v, seen, depth + 1);
             if (sanitized !== undefined) {
                 out[k] = sanitized;
             }
@@ -75,6 +152,27 @@ const DefaultEventPriority = 32;
 export function createHostConfig(onCommit) {
     // Track update priority internally (required by React 19 reconciler)
     let currentUpdatePriority = 0;
+    // Deduplicate ui.render: only send when the serialized tree actually changes.
+    // React 19's concurrent reconciler calls resetAfterCommit on every commit
+    // (including passive-effect-only commits where the tree hasn't changed),
+    // which without this guard would flood the host with identical trees,
+    // causing massive memory pressure from repeated postMessage structured clones.
+    let prevTreeCompareJson = null;
+    /**
+     * Strip __handler_* values from a serialized tree for comparison purposes.
+     * Handler IDs are monotonically incrementing (cb_1, cb_2, ...) so they
+     * change on every React commit even when the actual UI hasn't changed.
+     * Without stripping them, every commit produces a "different" tree,
+     * causing an infinite ui.render → setTree → re-render → ui.render loop
+     * that leaks hundreds of MB per second.
+     */
+    function treeToCompareJson(tree) {
+        return JSON.stringify(tree, (key, value) => {
+            if (key.startsWith("__handler_"))
+                return "__handler__";
+            return value;
+        });
+    }
     return {
         // -----------------------------------------------------------------------
         // Feature flags
@@ -186,6 +284,7 @@ export function createHostConfig(onCommit) {
             parent.children.push(child);
         },
         removeChild(parent, child) {
+            cleanupHandlers(child);
             child.parent = null;
             const idx = parent.children.indexOf(child);
             if (idx !== -1)
@@ -206,6 +305,7 @@ export function createHostConfig(onCommit) {
             container.children.push(child);
         },
         removeChildFromContainer(container, child) {
+            cleanupHandlers(child);
             child.parent = null;
             const idx = container.children.indexOf(child);
             if (idx !== -1)
@@ -223,17 +323,21 @@ export function createHostConfig(onCommit) {
         },
         // -----------------------------------------------------------------------
         // Updates
+        //
+        // NOTE: react-reconciler@0.32.0 (React 19) removed prepareUpdate and
+        // the updatePayload parameter from commitUpdate. The reconciler now
+        // calls commitUpdate directly with (instance, type, oldProps, newProps,
+        // internalHandle) — no updatePayload.
         // -----------------------------------------------------------------------
-        prepareUpdate(_instance, _type, _oldProps, newProps) {
-            return newProps;
-        },
-        commitUpdate(instance, _updatePayload, _type, _oldProps, newProps) {
-            for (const [key, value] of Object.entries(instance.props)) {
-                if (key.startsWith("__handler_")) {
+        commitUpdate(instance, _type, _oldProps, newProps) {
+            const oldInstanceProps = instance.props;
+            instance.props = sanitizeProps(newProps, oldInstanceProps);
+            // Clean up handler IDs that existed in old props but are no longer present
+            for (const [key, value] of Object.entries(oldInstanceProps)) {
+                if (key.startsWith("__handler_") && !(key in instance.props)) {
                     callbackRegistry.remove(value);
                 }
             }
-            instance.props = sanitizeProps(newProps);
         },
         commitTextUpdate(textInstance, _oldText, newText) {
             textInstance.props = { content: newText };
@@ -252,6 +356,10 @@ export function createHostConfig(onCommit) {
         },
         resetAfterCommit(container) {
             const tree = serializeTree(container.children);
+            const compareJson = treeToCompareJson(tree);
+            if (compareJson === prevTreeCompareJson)
+                return; // no visible change
+            prevTreeCompareJson = compareJson;
             onCommit(tree);
         },
         // -----------------------------------------------------------------------
@@ -273,6 +381,9 @@ export function createHostConfig(onCommit) {
         // Container operations
         // -----------------------------------------------------------------------
         clearContainer(container) {
+            for (const child of container.children) {
+                cleanupHandlers(child);
+            }
             container.children = [];
         },
         preparePortalMount() {

package/dist/renderer/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/renderer/render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAM5D,wBAAgB,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAEpD;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAqCjE;AAED,eAAO,MAAM,MAAM;oBAEN,KAAK,CAAC,YAAY,aAChB;QAAE,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAA;KAAE,GACzD,IAAI;CAGR,CAAC"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/renderer/render.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAW5D,wBAAgB,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAEpD;AAqCD,wBAAgB,eAAe,CAAC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAmBjE;AAED,eAAO,MAAM,MAAM;oBAEN,KAAK,CAAC,YAAY,aAChB;QAAE,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAA;KAAE,GACzD,IAAI;CAGR,CAAC"}

package/dist/renderer/render.js

@@ -1,32 +1,46 @@
 import ReactReconciler from "react-reconciler";
 import { createHostConfig } from "./reconciler";
 let bridgeInstance = null;
+let reconcilerInstance = null;
+let rootInstance = null;
 export function setBridge(bridge) {
     bridgeInstance = bridge;
 }
-export function renderExtension(element) {
-    if (!bridgeInstance) {
-        throw new Error("Vision SDK: Bridge not initialized. Ensure worker-entry has run before calling render.");
+function ensureRoot() {
+    if (reconcilerInstance && rootInstance) {
+        return {
+            reconciler: reconcilerInstance,
+            root: rootInstance,
+        };
     }
-    const bridge = bridgeInstance;
     const onCommit = (tree) => {
-        bridge.notify("ui.render", { tree });
+        bridgeInstance?.notify("ui.render", { tree });
     };
     const hostConfig = createHostConfig(onCommit);
     const reconciler = ReactReconciler(hostConfig);
     const container = { children: [] };
-    const root = reconciler.createContainer(container, 0, // ConcurrentRoot tag
+    const root = reconciler.createContainer(container, 1, // ConcurrentRoot (0 = LegacyRoot/sync, 1 = ConcurrentRoot/async)
     null, // hydrationCallbacks
     false, // isStrictMode
     null, // concurrentUpdatesByDefaultOverride
     "", // identifierPrefix
     (error) => console.error(error), // onRecoverableError
     null);
+    reconcilerInstance = reconciler;
+    rootInstance = root;
+    return { reconciler, root };
+}
+export function renderExtension(element) {
+    if (!bridgeInstance) {
+        throw new Error("Vision SDK: Bridge not initialized. Ensure worker-entry has run before calling render.");
+    }
+    const { reconciler, root } = ensureRoot();
     reconciler.updateContainer(element, root, null, () => {
-        bridge.notify("ui.ready");
+        bridgeInstance?.notify("ui.ready");
     });
     // Clear the init timeout since render was called
-    const clearInit = globalThis.__visionClearInitTimeout;
+    const clearInit = globalThis
+        .__visionClearInitTimeout;
     if (typeof clearInit === "function") {
         clearInit();
     }