@noya-app/noya-multiplayer-react 0.1.83 → 0.1.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-multiplayer-react",
-  "version": "0.1.83",
+  "version": "0.1.85",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -11,7 +11,7 @@
     "dev": "npm run build -- --watch"
   },
   "dependencies": {
-    "@noya-app/state-manager": "0.1.66",
+    "@noya-app/state-manager": "0.1.67",
     "@noya-app/emitter": "0.1.0",
     "@noya-app/observable": "0.1.12",
     "@noya-app/task-runner": "0.1.7",

package/src/NoyaStateContext.tsx

@@ -170,26 +170,28 @@ export const AnyNoyaStateContext = createContext<
   AnyNoyaStateContextValue | undefined
 >(undefined);
 
-export function useAnyNoyaStateContext() {
+export function useOptionalAnyNoyaStateContext() {
   const value = useContext(AnyNoyaStateContext);
+  const bindings = getNoyaSingletonBindings();
 
-  if (!value) {
-    const bindings = getNoyaSingletonBindings();
+  if (value) return value;
+  if (!bindings) return undefined;
 
-    if (bindings) {
-      return {
-        noyaManager: getNoyaManagerSingleton(),
-        theme: bindings.theme,
-        viewType: bindings.viewType,
-      } as AnyNoyaStateContextValue;
-    }
-
-    throw new Error(
-      "useNoyaStateContext must be used within a NoyaStateProvider"
-    );
-  }
+  return {
+    noyaManager: getNoyaManagerSingleton(),
+    theme: bindings.theme,
+    viewType: bindings.viewType,
+  } as AnyNoyaStateContextValue;
+}
+
+export function useAnyNoyaStateContext() {
+  const value = useOptionalAnyNoyaStateContext();
 
-  return value;
+  if (value) return value;
+
+  throw new Error(
+    "useNoyaStateContext must be used within a NoyaStateProvider"
+  );
 }
 
 export function useAnyNoyaManager() {

package/src/__tests__/useResourceUrl.test.tsx

@@ -0,0 +1,92 @@
+import { Asset, Resource } from "@noya-app/noya-schemas";
+import { NoyaManager } from "@noya-app/state-manager";
+import { act, cleanup, renderHook } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "bun:test";
+import { PropsWithChildren } from "react";
+import { AnyNoyaStateContext } from "../NoyaStateContext";
+import { useResourceUrl } from "../useResourceUrl";
+
+const asset = {
+  id: "asset-id",
+  stableId: "asset-stable-id",
+  url: "blob:http://localhost/image",
+} as Asset;
+
+const resource = {
+  accessibleByFileId: null,
+  accessibleByFileVersionId: null,
+  createdAt: "2026-01-01T00:00:00.000Z",
+  updatedAt: "2026-01-01T00:00:00.000Z",
+  id: "resource-id",
+  stableId: "resource-stable-id",
+  path: "image.png",
+  type: "asset",
+  assetId: asset.id,
+  url: "/api/resources/resource-id",
+} satisfies Resource;
+
+afterEach(cleanup);
+
+describe("useResourceUrl", () => {
+  it("resolves IDs and stable IDs and responds to data updates", () => {
+    const noyaManager = new NoyaManager(
+      {},
+      {
+        initialAssets: [asset],
+        initialResources: [resource],
+      }
+    );
+    const wrapper = ({ children }: PropsWithChildren) => (
+      <AnyNoyaStateContext.Provider
+        value={{ noyaManager, theme: "light", viewType: "editable" }}
+      >
+        {children}
+      </AnyNoyaStateContext.Provider>
+    );
+    const { result, rerender } = renderHook(
+      ({ id }: { id: string | undefined }) => useResourceUrl(id),
+      {
+        initialProps: { id: resource.id },
+        wrapper,
+      }
+    );
+
+    expect(result.current).toBe(asset.url);
+
+    rerender({ id: resource.stableId });
+    expect(result.current).toBe(asset.url);
+
+    act(() => {
+      noyaManager.assetManager.set([
+        { ...asset, url: "blob:http://localhost/updated-image" },
+      ]);
+    });
+    expect(result.current).toBe("blob:http://localhost/updated-image");
+
+    act(() => {
+      noyaManager.assetManager.set([]);
+    });
+    expect(result.current).toBe(resource.url);
+
+    act(() => {
+      noyaManager.resourceManager.setResources([
+        { ...resource, url: "/api/resources/updated-resource-id" },
+      ]);
+    });
+    expect(result.current).toBe("/api/resources/updated-resource-id");
+  });
+
+  it("returns undefined when no resource ID is provided", () => {
+    const noyaManager = new NoyaManager({});
+    const wrapper = ({ children }: PropsWithChildren) => (
+      <AnyNoyaStateContext.Provider
+        value={{ noyaManager, theme: "light", viewType: "editable" }}
+      >
+        {children}
+      </AnyNoyaStateContext.Provider>
+    );
+    const { result } = renderHook(() => useResourceUrl(undefined), { wrapper });
+
+    expect(result.current).toBeUndefined();
+  });
+});

package/src/index.ts

@@ -9,5 +9,6 @@ export * from "./noyaApp";
 export * from "./NoyaStateContext";
 export * from "./singleton";
 export * from "./useObservable";
+export * from "./useResourceUrl";
 export { WebSocketConnection } from "./WebSocketConnection";
 export type { ConnectionEvent, ConnectionOptions } from "./WebSocketConnection";

package/src/inspector/StateInspector.test.tsx

@@ -0,0 +1,18 @@
+import { afterEach, expect, it } from "bun:test";
+import { NoyaManager } from "@noya-app/state-manager";
+import { cleanup, render } from "@testing-library/react";
+import { StateInspector } from "./StateInspector";
+
+afterEach(() => {
+  cleanup();
+  localStorage.clear();
+});
+
+it("can default to collapsed", () => {
+  const noyaManager = new NoyaManager({});
+  const view = render(
+    <StateInspector noyaManager={noyaManager} defaultCollapsed />
+  );
+
+  expect(view.queryByText("Users")).toBeNull();
+});

package/src/inspector/StateInspector.tsx

@@ -48,6 +48,7 @@ export type StateInspectorOptions = {
   colorScheme?: "light" | "dark";
   anchor?: StateInspectorAnchor;
   advanced?: boolean;
+  defaultCollapsed?: boolean;
 };
 
 export const StateInspector = memoGeneric(function StateInspector<
@@ -62,6 +63,7 @@ export const StateInspector = memoGeneric(function StateInspector<
   anchor = "right",
   unstyled = false,
   advanced = false,
+  defaultCollapsed = false,
   ...props
 }: {
   noyaManager: NoyaManager<S, M, E, MenuT, I>;
@@ -99,7 +101,7 @@ export const StateInspector = memoGeneric(function StateInspector<
 
   const [showInspector, setShowInspector] = useLocalStorageState(
     "noya-multiplayer-react-show-inspector",
-    true
+    !defaultCollapsed
   );
   const [showEvents, setShowEvents] = useLocalStorageState(
     "noya-multiplayer-react-show-events",

package/src/inspector/useStateInspector.tsx

@@ -40,12 +40,14 @@ export function useStateInspector<
   noyaManager,
   disabled = false,
   advanced = false,
+  defaultCollapsed = false,
   colorScheme,
   anchor,
 }: {
   noyaManager: NoyaManager<S, M, E, MenuT, I>;
   disabled?: boolean;
   advanced?: boolean;
+  defaultCollapsed?: boolean;
   colorScheme?: ComponentProps<typeof StateInspector>["colorScheme"];
   anchor?: ComponentProps<typeof StateInspector>["anchor"];
 }) {
@@ -70,7 +72,8 @@ export function useStateInspector<
         anchor={anchor}
         noyaManager={noyaManager}
         advanced={advanced}
+        defaultCollapsed={defaultCollapsed}
       />
     );
-  }, [noyaManager, anchor, colorScheme, root, advanced]);
+  }, [noyaManager, anchor, colorScheme, root, advanced, defaultCollapsed]);
 }

package/src/singleton.tsx

@@ -139,6 +139,11 @@ export function initializeNoyaSingleton<
         advanced={
           resolvedInspector === true ? false : resolvedInspector.advanced
         }
+        defaultCollapsed={
+          resolvedInspector === true
+            ? false
+            : resolvedInspector.defaultCollapsed
+        }
       />
     );
   }

package/src/useResourceUrl.ts

@@ -0,0 +1,19 @@
+"use client";
+
+import { getResourceUrl } from "@noya-app/state-manager";
+import { useAnyNoyaStateContext } from "./NoyaStateContext";
+import { useObservable } from "./useObservable";
+
+export function useResourceUrl(
+  idOrStableId: string | undefined
+): string | undefined {
+  const { noyaManager } = useAnyNoyaStateContext();
+  const resources = useObservable(
+    noyaManager.resourceManager.optimisticResources$
+  );
+  const assets = useObservable(noyaManager.assetManager.assets$);
+
+  if (!idOrStableId) return undefined;
+
+  return getResourceUrl(idOrStableId, resources, assets);
+}