@sanity/sdk-react 2.7.0 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -52,7 +52,7 @@
     "react-compiler-runtime": "19.1.0-rc.2",
     "react-error-boundary": "^5.0.0",
     "rxjs": "^7.8.2",
-    "@sanity/sdk": "2.7.0"
+    "@sanity/sdk": "2.9.0"
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
@@ -75,13 +75,13 @@
     "react-dom": "^19.2.1",
     "rollup-plugin-visualizer": "^5.14.0",
     "typescript": "^5.8.3",
-    "vite": "^6.3.4",
+    "vite": "^7.0.0",
     "vitest": "^3.2.4",
+    "@repo/tsconfig": "0.0.1",
     "@repo/package.config": "0.0.1",
-    "@repo/config-eslint": "0.0.0",
     "@repo/config-test": "0.0.1",
     "@repo/package.bundle": "3.82.0",
-    "@repo/tsconfig": "0.0.1"
+    "@repo/config-eslint": "0.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/_exports/sdk-react.ts

@@ -50,6 +50,7 @@ export {
 } from '../hooks/dashboard/useNavigateToStudioDocument'
 export {useRecordDocumentHistoryEvent} from '../hooks/dashboard/useRecordDocumentHistoryEvent'
 export {useStudioWorkspacesByProjectIdDataset} from '../hooks/dashboard/useStudioWorkspacesByProjectIdDataset'
+export {useWindowTitle} from '../hooks/dashboard/useWindowTitle'
 export {useDatasets} from '../hooks/datasets/useDatasets'
 export {useApplyDocumentActions} from '../hooks/document/useApplyDocumentActions'
 export {useDocument} from '../hooks/document/useDocument'

package/src/components/SanityApp.tsx

@@ -37,6 +37,7 @@ function deriveConfigFromWorkspace(workspace: StudioWorkspaceHandle): SanityConf
     projectId: workspace.projectId,
     dataset: workspace.dataset,
     studio: {
+      authenticated: workspace.authenticated,
       auth: workspace.auth.token ? {token: workspace.auth.token} : undefined,
     },
   }

package/src/components/auth/AuthBoundary.test.tsx

@@ -22,6 +22,9 @@ vi.mock('../../hooks/auth/useHandleAuthCallback', () => ({
 vi.mock('../../hooks/auth/useLogOut', () => ({
   useLogOut: vi.fn(() => async () => {}),
 }))
+vi.mock('../../hooks/comlink/useWindowConnection', () => ({
+  useWindowConnection: vi.fn(() => ({fetch: vi.fn()})),
+}))
 
 // Mock AuthError throwing scenario
 vi.mock('./AuthError', async (importOriginal) => {

package/src/components/auth/LoginError.test.tsx

@@ -9,6 +9,10 @@ vi.mock('../../hooks/auth/useLogOut', () => ({
   useLogOut: vi.fn(() => async () => {}),
 }))
 
+vi.mock('../../hooks/comlink/useWindowConnection', () => ({
+  useWindowConnection: vi.fn(() => ({fetch: vi.fn()})),
+}))
+
 describe('LoginError', () => {
   it('shows authentication error and retry button', async () => {
     const mockReset = vi.fn()
@@ -21,6 +25,7 @@ describe('LoginError', () => {
     )
 
     expect(screen.getByText('Authentication Error')).toBeInTheDocument()
+
     const retryButton = screen.getByRole('button', {name: 'Retry'})
     fireEvent.click(retryButton)
 

package/src/components/auth/LoginError.tsx

@@ -1,4 +1,5 @@
 import {ClientError} from '@sanity/client'
+import {SDK_CHANNEL_NAME, SDK_NODE_NAME} from '@sanity/message-protocol'
 import {
   AuthStateType,
   getClientErrorApiBody,
@@ -10,6 +11,8 @@ import {type FallbackProps} from 'react-error-boundary'
 
 import {useAuthState} from '../../hooks/auth/useAuthState'
 import {useLogOut} from '../../hooks/auth/useLogOut'
+import {useWindowConnection} from '../../hooks/comlink/useWindowConnection'
+import {useSanityInstance} from '../../hooks/context/useSanityInstance'
 import {Error} from '../errors/Error'
 import {AuthError} from './AuthError'
 import {ConfigurationError} from './ConfigurationError'
@@ -36,12 +39,23 @@ export function LoginError({error, resetErrorBoundary}: LoginErrorProps): React.
 
   const logout = useLogOut()
   const authState = useAuthState()
+  const {
+    config: {projectId},
+  } = useSanityInstance()
 
   const [authErrorMessage, setAuthErrorMessage] = useState(
     'Please try again or contact support if the problem persists.',
   )
   const [showRetryCta, setShowRetryCta] = useState(true)
 
+  /**
+   * TODO: before merge update message-protocol package to include the new message type
+   */
+  const {fetch} = useWindowConnection({
+    name: SDK_NODE_NAME,
+    connectTo: SDK_CHANNEL_NAME,
+  })
+
   const handleRetry = useCallback(async () => {
     await logout()
     resetErrorBoundary()
@@ -55,6 +69,13 @@ export function LoginError({error, resetErrorBoundary}: LoginErrorProps): React.
           const description = getClientErrorApiDescription(error)
           if (description) setAuthErrorMessage(description)
           setShowRetryCta(false)
+          /**
+           * Handoff to dashboard to enable the request access flow for the project.
+           */
+          fetch('dashboard/v1/auth/access/request', {
+            resourceType: 'project',
+            resourceId: projectId,
+          })
         } else {
           setShowRetryCta(true)
           handleRetry()
@@ -73,7 +94,7 @@ export function LoginError({error, resetErrorBoundary}: LoginErrorProps): React.
       setAuthErrorMessage(error.message)
       setShowRetryCta(true)
     }
-  }, [authState, handleRetry, error])
+  }, [authState, handleRetry, error, fetch, projectId])
 
   return (
     <Error

package/src/context/ResourceProvider.test.tsx

@@ -1,7 +1,7 @@
 import {type SanityConfig, type SanityInstance} from '@sanity/sdk'
 import {act, render, screen} from '@testing-library/react'
 import {StrictMode, use, useEffect} from 'react'
-import {describe, expect, it} from 'vitest'
+import {describe, expect, it, vi} from 'vitest'
 
 import {ResourceProvider} from './ResourceProvider'
 import {SanityInstanceContext} from './SanityInstanceContext'
@@ -37,6 +37,7 @@ describe('ResourceProvider', () => {
   })
 
   it('shows fallback during loading', async () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
     const {promise, resolve} = promiseWithResolvers()
     function SuspendingChild(): React.ReactNode {
       throw promise
@@ -52,6 +53,8 @@ describe('ResourceProvider', () => {
     act(() => {
       resolve()
     })
+    await new Promise((r) => setTimeout(r, 0))
+    consoleSpy.mockRestore()
   })
 
   it('creates root instance when no parent context exists', async () => {
@@ -141,6 +144,7 @@ describe('ResourceProvider', () => {
   })
 
   it('uses default fallback when none provided', async () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
     const {promise, resolve} = promiseWithResolvers()
     function SuspendingChild(): React.ReactNode {
       throw promise
@@ -157,5 +161,7 @@ describe('ResourceProvider', () => {
     act(() => {
       resolve()
     })
+    await new Promise((r) => setTimeout(r, 0))
+    consoleSpy.mockRestore()
   })
 })

package/src/context/ResourceProvider.tsx

@@ -1,4 +1,5 @@
 import {createSanityInstance, type SanityConfig, type SanityInstance} from '@sanity/sdk'
+import {initTelemetry} from '@sanity/sdk/_internal'
 import {Suspense, useContext, useEffect, useMemo, useRef} from 'react'
 
 import {SanityInstanceContext} from './SanityInstanceContext'
@@ -78,6 +79,11 @@ export function ResourceProvider({
     [config, parent],
   )
 
+  const projectId = config.projectId ?? ''
+  useMemo(() => {
+    if (projectId && !parent) initTelemetry(instance, projectId)
+  }, [instance, projectId, parent])
+
   // Ref to hold the scheduled disposal timer.
   const disposal = useRef<{
     instance: SanityInstance

package/src/context/SDKStudioContext.ts

@@ -13,6 +13,12 @@ export interface StudioWorkspaceHandle {
   projectId: string
   /** The dataset name for this workspace. */
   dataset: string
+  /**
+   * Whether the Studio has determined the user is authenticated.
+   * When `true` and the token source emits `null`, the SDK infers
+   * cookie-based auth is in use and skips the logged-out state.
+   */
+  authenticated?: boolean
   /** Authentication state for this workspace. */
   auth: {
     /**

package/src/hooks/dashboard/useDispatchIntent.test.ts

@@ -37,11 +37,13 @@ describe('useDispatchIntent', () => {
   })
 
   it('should throw error when neither action nor intentId is provided', () => {
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
     const {result} = renderHook(() => useDispatchIntent({documentHandle: mockDocumentHandle}))
 
     expect(() => result.current.dispatchIntent()).toThrow(
       'useDispatchIntent: Either `action` or `intentId` must be provided.',
     )
+    consoleErrorSpy.mockRestore()
   })
 
   it('should handle errors gracefully', () => {

package/src/hooks/dashboard/useWindowTitle.test.ts

@@ -0,0 +1,213 @@
+import {renderHook, waitFor} from '@testing-library/react'
+import {afterEach, describe, expect, it, vi} from 'vitest'
+
+import {useWindowConnection} from '../comlink/useWindowConnection'
+import {useWindowTitle} from './useWindowTitle'
+
+vi.mock('../comlink/useWindowConnection', () => ({
+  useWindowConnection: vi.fn(),
+}))
+
+function createContextResponse(resource: Record<string, unknown>) {
+  return {context: {resource}}
+}
+
+describe('useWindowTitle', () => {
+  afterEach(() => {
+    vi.clearAllMocks()
+    document.title = ''
+  })
+
+  it('should set the document title to the manifest title', async () => {
+    const mockFetch = vi.fn().mockResolvedValue(
+      createContextResponse({
+        type: 'application',
+        title: 'sdk-movie-list',
+        manifest: {title: 'Movie List App'},
+      }),
+    )
+    vi.mocked(useWindowConnection).mockReturnValue({
+      fetch: mockFetch,
+      sendMessage: vi.fn(),
+    })
+
+    renderHook(() => useWindowTitle())
+
+    await waitFor(() => {
+      expect(document.title).toBe('Movie List App')
+    })
+  })
+
+  it('should prefer manifest title over system title', async () => {
+    const mockFetch = vi.fn().mockResolvedValue(
+      createContextResponse({
+        type: 'application',
+        title: 'sdk-movie-list',
+        manifest: {title: 'Movie List App'},
+        activeDeployment: {manifest: {title: 'Deployed Title'}},
+      }),
+    )
+    vi.mocked(useWindowConnection).mockReturnValue({
+      fetch: mockFetch,
+      sendMessage: vi.fn(),
+    })
+
+    renderHook(() => useWindowTitle())
+
+    await waitFor(() => {
+      expect(document.title).toBe('Movie List App')
+    })
+  })
+
+  it('should fall back to activeDeployment manifest title', async () => {
+    const mockFetch = vi.fn().mockResolvedValue(
+      createContextResponse({
+        type: 'application',
+        title: 'sdk-movie-list',
+        manifest: null,
+        activeDeployment: {manifest: {title: 'Deployed Title'}},
+      }),
+    )
+    vi.mocked(useWindowConnection).mockReturnValue({
+      fetch: mockFetch,
+      sendMessage: vi.fn(),
+    })
+
+    renderHook(() => useWindowTitle())
+
+    await waitFor(() => {
+      expect(document.title).toBe('Deployed Title')
+    })
+  })
+
+  it('should fall back to system title when no manifest title exists', async () => {
+    const mockFetch = vi.fn().mockResolvedValue(
+      createContextResponse({
+        type: 'application',
+        title: 'sdk-movie-list',
+        manifest: null,
+        activeDeployment: null,
+      }),
+    )
+    vi.mocked(useWindowConnection).mockReturnValue({
+      fetch: mockFetch,
+      sendMessage: vi.fn(),
+    })
+
+    renderHook(() => useWindowTitle())
+
+    await waitFor(() => {
+      expect(document.title).toBe('sdk-movie-list')
+    })
+  })
+
+  it('should prepend view title when provided', async () => {
+    const mockFetch = vi.fn().mockResolvedValue(
+      createContextResponse({
+        type: 'application',
+        title: 'sdk-movie-list',
+        manifest: {title: 'Movie List App'},
+      }),
+    )
+    vi.mocked(useWindowConnection).mockReturnValue({
+      fetch: mockFetch,
+      sendMessage: vi.fn(),
+    })
+
+    renderHook(() => useWindowTitle('Movies'))
+
+    await waitFor(() => {
+      expect(document.title).toBe('Movies | Movie List App')
+    })
+  })
+
+  it('should update when view title changes', async () => {
+    const mockFetch = vi.fn().mockResolvedValue(
+      createContextResponse({
+        type: 'application',
+        title: 'sdk-movie-list',
+        manifest: {title: 'Movie List App'},
+      }),
+    )
+    vi.mocked(useWindowConnection).mockReturnValue({
+      fetch: mockFetch,
+      sendMessage: vi.fn(),
+    })
+
+    const {rerender} = renderHook(({viewTitle}) => useWindowTitle(viewTitle), {
+      initialProps: {viewTitle: 'Movies'},
+    })
+
+    await waitFor(() => {
+      expect(document.title).toBe('Movies | Movie List App')
+    })
+
+    rerender({viewTitle: 'Movie Details'})
+
+    await waitFor(() => {
+      expect(document.title).toBe('Movie Details | Movie List App')
+    })
+  })
+
+  it('should restore the previous title on unmount', async () => {
+    document.title = 'Previous Title'
+
+    const mockFetch = vi.fn().mockResolvedValue(
+      createContextResponse({
+        type: 'application',
+        title: 'sdk-movie-list',
+        manifest: {title: 'Movie List App'},
+      }),
+    )
+    vi.mocked(useWindowConnection).mockReturnValue({
+      fetch: mockFetch,
+      sendMessage: vi.fn(),
+    })
+
+    const {unmount} = renderHook(() => useWindowTitle('Movies'))
+
+    await waitFor(() => {
+      expect(document.title).toBe('Movies | Movie List App')
+    })
+
+    unmount()
+
+    expect(document.title).toBe('Previous Title')
+  })
+
+  it('should handle AbortError silently', async () => {
+    const abortError = new Error('Aborted')
+    abortError.name = 'AbortError'
+    const mockFetch = vi.fn().mockRejectedValue(abortError)
+    vi.mocked(useWindowConnection).mockReturnValue({
+      fetch: mockFetch,
+      sendMessage: vi.fn(),
+    })
+
+    renderHook(() => useWindowTitle())
+
+    await waitFor(() => {
+      expect(document.title).toBe('')
+    })
+  })
+
+  it('should log non-abort fetch errors', async () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const mockFetch = vi.fn().mockRejectedValue(new Error('Connection failed'))
+    vi.mocked(useWindowConnection).mockReturnValue({
+      fetch: mockFetch,
+      sendMessage: vi.fn(),
+    })
+
+    renderHook(() => useWindowTitle('Movies'))
+
+    await waitFor(() => {
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Failed to fetch app title from dashboard context:',
+        expect.any(Error),
+      )
+    })
+
+    consoleSpy.mockRestore()
+  })
+})

package/src/hooks/dashboard/useWindowTitle.ts

@@ -0,0 +1,112 @@
+import {SDK_CHANNEL_NAME, SDK_NODE_NAME} from '@sanity/message-protocol'
+import {useEffect, useState} from 'react'
+
+import {useWindowConnection} from '../comlink/useWindowConnection'
+
+interface ContextResource {
+  type: string
+  title?: string
+  manifest?: {
+    title?: string
+  } | null
+  activeDeployment?: {
+    manifest?: {
+      title?: string
+    } | null
+  } | null
+}
+
+interface ContextResponse {
+  context: {
+    resource: ContextResource
+  }
+}
+
+function resolveAppTitle(resource: ContextResource): string | undefined {
+  return resource.manifest?.title ?? resource.activeDeployment?.manifest?.title ?? resource.title
+}
+
+/**
+ * Sets the browser's document title, automatically including the app's name
+ * from the manifest.
+ *
+ * This follows the same convention as Sanity Studio workspaces, where the
+ * workspace name is always present in the title:
+ *
+ * - With a view title: `<viewTitle> | <appTitle>`
+ * - Without a view title: `<appTitle>`
+ *
+ * The Sanity dashboard appends `| Sanity` to produce the final browser tab title.
+ *
+ * @param viewTitle - An optional view-specific title to prepend to the app title.
+ *
+ * @example
+ * ```tsx
+ * import {useWindowTitle} from '@sanity/sdk-react'
+ *
+ * function MoviesList() {
+ *   useWindowTitle('Movies')
+ *   return <div>...</div>
+ * }
+ *
+ * // Browser tab: "Movies | My App | Sanity"
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Call without arguments to show just the app title
+ * function AppRoot() {
+ *   useWindowTitle()
+ *   return <Outlet />
+ * }
+ *
+ * // Browser tab: "My App | Sanity"
+ * ```
+ *
+ * @public
+ */
+export function useWindowTitle(viewTitle?: string): void {
+  const [appTitle, setAppTitle] = useState<string | null>(null)
+
+  const {fetch} = useWindowConnection({
+    name: SDK_NODE_NAME,
+    connectTo: SDK_CHANNEL_NAME,
+  })
+
+  useEffect(() => {
+    if (!fetch) return
+
+    const controller = new AbortController()
+
+    async function fetchAppTitle(signal: AbortSignal) {
+      try {
+        const data = await fetch<ContextResponse>('dashboard/v1/context', undefined, {signal})
+        const title = resolveAppTitle(data.context.resource)
+        if (title) {
+          setAppTitle(title)
+        }
+      } catch (err: unknown) {
+        if (err instanceof Error && err.name === 'AbortError') return
+        // eslint-disable-next-line no-console
+        console.error('Failed to fetch app title from dashboard context:', err)
+      }
+    }
+
+    fetchAppTitle(controller.signal)
+
+    return () => {
+      controller.abort()
+    }
+  }, [fetch])
+
+  useEffect(() => {
+    if (!appTitle) return
+
+    const previous = document.title
+    document.title = viewTitle ? `${viewTitle} | ${appTitle}` : appTitle
+
+    return () => {
+      document.title = previous
+    }
+  }, [viewTitle, appTitle])
+}