@sanity/sdk-react 0.0.0-alpha.14 → 0.0.0-alpha.15

package/README.md

@@ -7,32 +7,49 @@
 
 React hooks for creating Sanity applications.
 
-## Installation
+## 💻 Installation
 
 ```bash
 npm i @sanity/sdk-react @sanity/sdk
 ```
 
-## SDK Documentation
+> 💡 Looking to build a Sanity application? Check out the [Quick Start](#quick-start) section.
+
+## 📚 SDK Documentation
 
 See the [SDK Documentation](https://sdk-docs.sanity.dev) for more information.
 
-## Quick Start
+## 🚀 Quick Start
 
 Here's how to implement your Sanity application:
 
+1. Create a new React TypeScript project using the Sanity template
+
 ```bash
-# Create a new Vite React TypeScript project
-npm create vite@latest my-content-os-app -- --template react-ts -y
+pnpx sanity@latest init --template core-app
 cd my-content-os-app
-# Install Sanity dependencies
-npm i @sanity/sdk-react @sanity/sdk
-# Run the app
+```
+
+2. Install dependencies
+
+```bash
+npm i
+```
+
+3. Run the app
+
+```bash
 npm run dev
-# In another terminal, run the Sanity CoreUI
-npx @sanity/os-cli run --url=http://localhost:5173/
 ```
 
+4. Open the App in Sanity Dashboard with your organization ID
+
+```
+https://core.sanity.io/<your-organization-id>?dev=localhost:5173
+```
+
+5. Overwrite the `src/App.tsx` file with the following code:
+
 ```tsx
 // src/App.tsx
 import {SanityConfig} from '@sanity/sdk'
@@ -41,19 +58,16 @@ import {useCurrentUser, useLogOut} from '@sanity/sdk-react/hooks'
 
 import './App.css'
 
-const sanityConfig: SanityConfig = {
-  projectId: '<your-project-id>',
-  dataset: '<your-dataset>',
-  // optional auth config set projectId and dataset to '' and authScope to 'global' for a global token
-  // auth: {
-  //   authScope: 'global',
-  //   ...
-  // },
-}
+const sanityConfig: SanityConfigs = [
+  {
+    projectId: '<your-project-id>',
+    dataset: '<your-dataset>',
+  },
+]
 
 export function App(): JSX.Element {
   return (
-    <SanityApp sanityConfig={sanityConfig}>
+    <SanityApp sanityConfigs={sanityConfigs}>
       <MyApp />
     </SanityApp>
   )
@@ -74,6 +88,8 @@ function MyApp() {
 export default App
 ```
 
+6. Overwrite the `src/App.css` file with the following code:
+
 ```css
 /* src/App.css */
 #root {
@@ -135,19 +151,6 @@ export default App
 }
 ```
 
-## TypeScript Support
-
-This package includes TypeScript definitions. You can import types like:
-
-```tsx
-import type {
-  SanityProviderProps,
-  AuthBoundaryProps,
-  LoginLayoutProps,
-  LoginErrorProps,
-} from '@sanity/react'
-```
-
 ## License
 
 MIT © Sanity.io

package/dist/_chunks-es/context.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext } from "react";
-const SanityInstanceContext = createContext(null), SanityProvider = ({ children, sanityInstance }) => /* @__PURE__ */ jsx(SanityInstanceContext.Provider, { value: sanityInstance, children });
+const SanityInstanceContext = createContext(null), SanityProvider = ({ children, sanityInstances }) => /* @__PURE__ */ jsx(SanityInstanceContext.Provider, { value: sanityInstances, children });
 export {
   SanityInstanceContext,
   SanityProvider

package/dist/_chunks-es/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["../../src/context/SanityProvider.tsx"],"sourcesContent":["import {type SanityInstance} from '@sanity/sdk'\nimport {createContext, type ReactElement} from 'react'\n\n/**\n * @internal\n */\nexport interface SanityProviderProps {\n  children: React.ReactNode\n  sanityInstance: SanityInstance\n}\n\nexport const SanityInstanceContext = createContext<SanityInstance | null>(null)\n\n/**\n * @internal\n *\n * Top-level context provider that provides access to the Sanity configuration instance.\n * This must wrap any components making use of the Sanity SDK React hooks.\n *\n * @remarks In most cases, SanityApp should be used rather than SanityProvider directly; SanityApp bundles both SanityProvider and an authentication layer.\n * @param props - Sanity project and dataset configuration\n * @returns Rendered component\n * @example\n * ```tsx\n * import {createSanityInstance} from '@sanity/sdk'\n * import {SanityProvider} from '@sanity/sdk-react'\n *\n * import MyAppRoot from './Root'\n *\n * const sanityInstance = createSanityInstance({\n *   projectId: 'your-project-id',\n *   dataset: 'production',\n * })\n *\n * export default function MyApp() {\n *   return (\n *     <SanityProvider sanityInstance={sanityInstance}>\n *       <MyAppRoot />\n *     </SanityProvider>\n *   )\n * }\n * ```\n */\nexport const SanityProvider = ({children, sanityInstance}: SanityProviderProps): ReactElement => {\n  return (\n    <SanityInstanceContext.Provider value={sanityInstance}>\n      {children}\n    </SanityInstanceContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;AAWO,MAAM,wBAAwB,cAAqC,IAAI,GAgCjE,iBAAiB,CAAC,EAAC,UAAU,eAAc,0BAEnD,sBAAsB,UAAtB,EAA+B,OAAO,gBACpC,SACH,CAAA;"}
+{"version":3,"file":"context.js","sources":["../../src/context/SanityProvider.tsx"],"sourcesContent":["import {type SanityInstance} from '@sanity/sdk'\nimport {createContext, type ReactElement} from 'react'\n\n/**\n * @internal\n */\nexport interface SanityProviderProps {\n  children: React.ReactNode\n  sanityInstances: SanityInstance[]\n}\n\nexport const SanityInstanceContext = createContext<SanityInstance[] | null>(null)\n\n/**\n * @internal\n *\n * Top-level context provider that provides access to the Sanity configuration instance.\n * This must wrap any components making use of the Sanity SDK React hooks.\n *\n * @remarks In most cases, SanityApp should be used rather than SanityProvider directly; SanityApp bundles both SanityProvider and an authentication layer.\n * @param props - Sanity project and dataset configuration\n * @returns Rendered component\n * @example\n * ```tsx\n * import {createSanityInstance} from '@sanity/sdk'\n * import {SanityProvider} from '@sanity/sdk-react'\n *\n * import MyAppRoot from './Root'\n *\n * const sanityInstance = createSanityInstance({\n *   projectId: 'your-project-id',\n *   dataset: 'production',\n * })\n *\n * export default function MyApp() {\n *   return (\n *     <SanityProvider sanityInstance={sanityInstance}>\n *       <MyAppRoot />\n *     </SanityProvider>\n *   )\n * }\n * ```\n */\nexport const SanityProvider = ({children, sanityInstances}: SanityProviderProps): ReactElement => {\n  return (\n    <SanityInstanceContext.Provider value={sanityInstances}>\n      {children}\n    </SanityInstanceContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;AAWO,MAAM,wBAAwB,cAAuC,IAAI,GAgCnE,iBAAiB,CAAC,EAAC,UAAU,gBAAe,0BAEpD,sBAAsB,UAAtB,EAA+B,OAAO,iBACpC,SACH,CAAA;"}

package/dist/_chunks-es/useLogOut.js

@@ -1,16 +1,27 @@
 import { getAuthState, handleCallback, getLoginUrlsState, fetchLoginUrls, logout } from "@sanity/sdk";
 import { useContext, useMemo, useSyncExternalStore, useCallback } from "react";
 import { SanityInstanceContext } from "./context.js";
-const useSanityInstance = () => {
+const useSanityInstance = (resourceId) => {
   const sanityInstance = useContext(SanityInstanceContext);
   if (!sanityInstance)
     throw new Error("useSanityInstance must be called from within the SanityProvider");
-  return sanityInstance;
+  if (sanityInstance.length === 0)
+    throw new Error("No Sanity instances found");
+  if (sanityInstance.length === 1 || !resourceId)
+    return sanityInstance[0];
+  if (!resourceId)
+    throw new Error("resourceId is required when there are multiple Sanity instances");
+  const instance = sanityInstance.find((inst) => inst.identity.resourceId === resourceId);
+  if (!instance)
+    throw new Error(`Sanity instance with resourceId ${resourceId} not found`);
+  return instance;
 };
 function createStateSourceHook(options) {
-  const getState = typeof options == "function" ? options : options.getState, suspense = "shouldSuspend" in options && "suspender" in options ? options : void 0;
+  const getState = typeof options == "function" ? options : options.getState, getResourceId = "getResourceId" in options ? options.getResourceId : void 0, suspense = "shouldSuspend" in options && "suspender" in options ? options : void 0;
   function useHook(...params) {
-    const instance = useSanityInstance();
+    let resourceId;
+    getResourceId && (resourceId = getResourceId(...params));
+    const instance = useSanityInstance(resourceId);
     if (suspense?.shouldSuspend(instance, ...params))
       throw suspense.suspender(instance, ...params);
     const state = useMemo(

package/dist/_chunks-es/useLogOut.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLogOut.js","sources":["../../src/hooks/context/useSanityInstance.ts","../../src/hooks/helpers/createStateSourceHook.tsx","../../src/hooks/auth/useAuthState.tsx","../../src/hooks/helpers/createCallbackHook.tsx","../../src/hooks/auth/useHandleCallback.tsx","../../src/hooks/auth/useLoginUrls.tsx","../../src/hooks/auth/useLogOut.tsx"],"sourcesContent":["import {type SanityInstance} from '@sanity/sdk'\nimport {useContext} from 'react'\n\nimport {SanityInstanceContext} from '../../context/SanityProvider'\n\n/**\n * `useSanityInstance` returns the current Sanity instance from the application context.\n * This must be called from within a `SanityProvider` component.\n * @internal\n * @returns The current Sanity instance\n * @example\n * ```tsx\n * const instance = useSanityInstance()\n * ```\n */\nexport const useSanityInstance = (): SanityInstance => {\n  const sanityInstance = useContext(SanityInstanceContext)\n  if (!sanityInstance) {\n    throw new Error('useSanityInstance must be called from within the SanityProvider')\n  }\n\n  return sanityInstance\n}\n","import {type SanityInstance, type StateSource} from '@sanity/sdk'\nimport {useMemo, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\ntype StateSourceFactory<TParams extends unknown[], TState> = (\n  instance: SanityInstance,\n  ...params: TParams\n) => StateSource<TState>\n\ninterface CreateStateSourceHookOptions<TParams extends unknown[], TState> {\n  getState: StateSourceFactory<TParams, TState>\n  shouldSuspend: (instance: SanityInstance, ...params: TParams) => boolean\n  suspender: (instance: SanityInstance, ...params: TParams) => Promise<unknown>\n}\n\nexport function createStateSourceHook<TParams extends unknown[], TState>(\n  options: StateSourceFactory<TParams, TState> | CreateStateSourceHookOptions<TParams, TState>,\n): (...params: TParams) => TState {\n  const getState = typeof options === 'function' ? options : options.getState\n  const suspense = 'shouldSuspend' in options && 'suspender' in options ? options : undefined\n\n  function useHook(...params: TParams) {\n    const instance = useSanityInstance()\n    if (suspense?.shouldSuspend(instance, ...params)) {\n      throw suspense.suspender(instance, ...params)\n    }\n\n    const state = useMemo(\n      () => getState(instance, ...params),\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [instance, ...params],\n    )\n    return useSyncExternalStore(state.subscribe, state.getCurrent)\n  }\n\n  return useHook\n}\n","import {type AuthState, getAuthState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\n * @internal\n * A React hook that subscribes to authentication state changes.\n *\n * This hook provides access to the current authentication state type from the Sanity auth store.\n * It automatically re-renders when the authentication state changes.\n *\n * @remarks\n * The hook uses `useSyncExternalStore` to safely subscribe to auth state changes\n * and ensure consistency between server and client rendering.\n *\n * @returns The current authentication state type\n *\n * @example\n * ```tsx\n * function AuthStatus() {\n *   const authState = useAuthState()\n *   return <div>Current auth state: {authState}</div>\n * }\n * ```\n */\nexport const useAuthState: () => AuthState = createStateSourceHook(getAuthState)\n","import {type SanityInstance} from '@sanity/sdk'\nimport {useCallback} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\nexport function createCallbackHook<TParams extends unknown[], TReturn>(\n  callback: (instance: SanityInstance, ...params: TParams) => TReturn,\n): () => (...params: TParams) => TReturn {\n  function useHook() {\n    const instance = useSanityInstance()\n    return useCallback((...params: TParams) => callback(instance, ...params), [instance])\n  }\n\n  return useHook\n}\n","import {handleCallback} from '@sanity/sdk'\n\nimport {createCallbackHook} from '../helpers/createCallbackHook'\n\n/**\n * @internal\n * A React hook that returns a function for handling authentication callbacks.\n *\n * @remarks\n * This hook provides access to the authentication store's callback handler,\n * which processes auth redirects by extracting the session ID and fetching the\n * authentication token. If fetching the long-lived token is successful,\n * `handleCallback` will return a Promise that resolves a new location that\n * removes the short-lived token from the URL. Use this in combination with\n * `history.replaceState` or your own router's `replace` function to update the\n * current location without triggering a reload.\n *\n * @example\n * ```tsx\n * function AuthCallback() {\n *   const handleCallback = useHandleCallback()\n *   const router = useRouter() // Example router\n *\n *   useEffect(() => {\n *     async function processCallback() {\n *       // Handle the callback and get the cleaned URL\n *       const newUrl = await handleCallback(window.location.href)\n *\n *       if (newUrl) {\n *         // Replace URL without triggering navigation\n *         router.replace(newUrl, {shallow: true})\n *       }\n *     }\n *\n *     processCallback().catch(console.error)\n *   }, [handleCallback, router])\n *\n *   return <div>Completing login...</div>\n * }\n * ```\n *\n * @returns A callback handler function that processes OAuth redirects\n * @public\n */\nexport const useHandleCallback = createCallbackHook(handleCallback)\n","import {type AuthProvider, fetchLoginUrls, getLoginUrlsState} from '@sanity/sdk'\nimport {useMemo, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @internal\n * A React hook that retrieves the available authentication provider URLs for login.\n *\n * @remarks\n * This hook fetches the login URLs from the Sanity auth store when the component mounts.\n * Each provider object contains information about an authentication method, including its URL.\n * The hook will suspend if the login URLs have not yet loaded.\n *\n * @example\n * ```tsx\n * // LoginProviders component that uses the hook\n * function LoginProviders() {\n *   const providers = useLoginUrls()\n *\n *   return (\n *     <div>\n *       {providers.map((provider) => (\n *         <a key={provider.name} href={provider.url}>\n *           Login with {provider.title}\n *         </a>\n *       ))}\n *     </div>\n *   )\n * }\n *\n * // Parent component with Suspense boundary\n * function LoginPage() {\n *   return (\n *     <Suspense fallback={<div>Loading authentication providers...</div>}>\n *       <LoginProviders />\n *     </Suspense>\n *   )\n * }\n * ```\n *\n * @returns An array of {@link AuthProvider} objects containing login URLs and provider information\n * @public\n */\nexport function useLoginUrls(): AuthProvider[] {\n  const instance = useSanityInstance()\n  const {subscribe, getCurrent} = useMemo(() => getLoginUrlsState(instance), [instance])\n\n  if (!getCurrent()) throw fetchLoginUrls(instance)\n\n  return useSyncExternalStore(subscribe, getCurrent as () => AuthProvider[])\n}\n","import {logout} from '@sanity/sdk'\n\nimport {createCallbackHook} from '../helpers/createCallbackHook'\n\n/**\n * Hook to log out of the current session\n * @internal\n * @returns A function to log out of the current session\n */\nexport const useLogOut = createCallbackHook(logout)\n"],"names":[],"mappings":";;;AAeO,MAAM,oBAAoB,MAAsB;AAC/C,QAAA,iBAAiB,WAAW,qBAAqB;AACvD,MAAI,CAAC;AACG,UAAA,IAAI,MAAM,iEAAiE;AAG5E,SAAA;AACT;ACNO,SAAS,sBACd,SACgC;AAChC,QAAM,WAAW,OAAO,WAAY,aAAa,UAAU,QAAQ,UAC7D,WAAW,mBAAmB,WAAW,eAAe,UAAU,UAAU;AAElF,WAAS,WAAW,QAAiB;AACnC,UAAM,WAAW,kBAAkB;AACnC,QAAI,UAAU,cAAc,UAAU,GAAG,MAAM;AAC7C,YAAM,SAAS,UAAU,UAAU,GAAG,MAAM;AAG9C,UAAM,QAAQ;AAAA,MACZ,MAAM,SAAS,UAAU,GAAG,MAAM;AAAA;AAAA,MAElC,CAAC,UAAU,GAAG,MAAM;AAAA,IACtB;AACA,WAAO,qBAAqB,MAAM,WAAW,MAAM,UAAU;AAAA,EAAA;AAGxD,SAAA;AACT;ACZa,MAAA,eAAgC,sBAAsB,YAAY;ACpBxE,SAAS,mBACd,UACuC;AACvC,WAAS,UAAU;AACjB,UAAM,WAAW,kBAAkB;AAC5B,WAAA,YAAY,IAAI,WAAoB,SAAS,UAAU,GAAG,MAAM,GAAG,CAAC,QAAQ,CAAC;AAAA,EAAA;AAG/E,SAAA;AACT;AC8Ba,MAAA,oBAAoB,mBAAmB,cAAc;ACA3D,SAAS,eAA+B;AAC7C,QAAM,WAAW,qBACX,EAAC,WAAW,WAAU,IAAI,QAAQ,MAAM,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAErF,MAAI,CAAC,WAAA,EAAc,OAAM,eAAe,QAAQ;AAEzC,SAAA,qBAAqB,WAAW,UAAkC;AAC3E;AC1Ca,MAAA,YAAY,mBAAmB,MAAM;"}
+{"version":3,"file":"useLogOut.js","sources":["../../src/hooks/context/useSanityInstance.ts","../../src/hooks/helpers/createStateSourceHook.tsx","../../src/hooks/auth/useAuthState.tsx","../../src/hooks/helpers/createCallbackHook.tsx","../../src/hooks/auth/useHandleCallback.tsx","../../src/hooks/auth/useLoginUrls.tsx","../../src/hooks/auth/useLogOut.tsx"],"sourcesContent":["import {type SanityInstance} from '@sanity/sdk'\nimport {useContext} from 'react'\n\nimport {SanityInstanceContext} from '../../context/SanityProvider'\n\n/**\n * `useSanityInstance` returns the current Sanity instance from the application context.\n * This must be called from within a `SanityProvider` component.\n * @internal\n *\n * @param resourceId - The resourceId of the Sanity instance to return (optional)\n * @returns The current Sanity instance\n * @example\n * ```tsx\n * const instance = useSanityInstance('abc123:production')\n * ```\n */\nexport const useSanityInstance = (resourceId?: string): SanityInstance => {\n  const sanityInstance = useContext(SanityInstanceContext)\n  if (!sanityInstance) {\n    throw new Error('useSanityInstance must be called from within the SanityProvider')\n  }\n  if (sanityInstance.length === 0) {\n    throw new Error('No Sanity instances found')\n  }\n  if (sanityInstance.length === 1 || !resourceId) {\n    return sanityInstance[0]\n  }\n\n  if (!resourceId) {\n    throw new Error('resourceId is required when there are multiple Sanity instances')\n  }\n\n  const instance = sanityInstance.find((inst) => inst.identity.resourceId === resourceId)\n  if (!instance) {\n    throw new Error(`Sanity instance with resourceId ${resourceId} not found`)\n  }\n  return instance\n}\n","import {type ResourceId, type SanityInstance, type StateSource} from '@sanity/sdk'\nimport {useMemo, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\ntype StateSourceFactory<TParams extends unknown[], TState> = (\n  instance: SanityInstance,\n  ...params: TParams\n) => StateSource<TState>\n\ninterface CreateStateSourceHookOptions<TParams extends unknown[], TState> {\n  getState: StateSourceFactory<TParams, TState>\n  shouldSuspend: (instance: SanityInstance, ...params: TParams) => boolean\n  suspender: (instance: SanityInstance, ...params: TParams) => Promise<unknown>\n  getResourceId?: (...params: TParams) => ResourceId\n}\n\nexport function createStateSourceHook<TParams extends unknown[], TState>(\n  options: StateSourceFactory<TParams, TState> | CreateStateSourceHookOptions<TParams, TState>,\n): (...params: TParams) => TState {\n  const getState = typeof options === 'function' ? options : options.getState\n  const getResourceId = 'getResourceId' in options ? options.getResourceId : undefined\n  const suspense = 'shouldSuspend' in options && 'suspender' in options ? options : undefined\n\n  function useHook(...params: TParams) {\n    let resourceId: ResourceId | undefined\n    if (getResourceId) {\n      resourceId = getResourceId(...params)\n    }\n    const instance = useSanityInstance(resourceId)\n    if (suspense?.shouldSuspend(instance, ...params)) {\n      throw suspense.suspender(instance, ...params)\n    }\n\n    const state = useMemo(\n      () => getState(instance, ...params),\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [instance, ...params],\n    )\n    return useSyncExternalStore(state.subscribe, state.getCurrent)\n  }\n\n  return useHook\n}\n","import {type AuthState, getAuthState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\n * @internal\n * A React hook that subscribes to authentication state changes.\n *\n * This hook provides access to the current authentication state type from the Sanity auth store.\n * It automatically re-renders when the authentication state changes.\n *\n * @remarks\n * The hook uses `useSyncExternalStore` to safely subscribe to auth state changes\n * and ensure consistency between server and client rendering.\n *\n * @returns The current authentication state type\n *\n * @example\n * ```tsx\n * function AuthStatus() {\n *   const authState = useAuthState()\n *   return <div>Current auth state: {authState}</div>\n * }\n * ```\n */\nexport const useAuthState: () => AuthState = createStateSourceHook(getAuthState)\n","import {type SanityInstance} from '@sanity/sdk'\nimport {useCallback} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\nexport function createCallbackHook<TParams extends unknown[], TReturn>(\n  callback: (instance: SanityInstance, ...params: TParams) => TReturn,\n): () => (...params: TParams) => TReturn {\n  function useHook() {\n    const instance = useSanityInstance()\n    return useCallback((...params: TParams) => callback(instance, ...params), [instance])\n  }\n\n  return useHook\n}\n","import {handleCallback} from '@sanity/sdk'\n\nimport {createCallbackHook} from '../helpers/createCallbackHook'\n\n/**\n * @internal\n * A React hook that returns a function for handling authentication callbacks.\n *\n * @remarks\n * This hook provides access to the authentication store's callback handler,\n * which processes auth redirects by extracting the session ID and fetching the\n * authentication token. If fetching the long-lived token is successful,\n * `handleCallback` will return a Promise that resolves a new location that\n * removes the short-lived token from the URL. Use this in combination with\n * `history.replaceState` or your own router's `replace` function to update the\n * current location without triggering a reload.\n *\n * @example\n * ```tsx\n * function AuthCallback() {\n *   const handleCallback = useHandleCallback()\n *   const router = useRouter() // Example router\n *\n *   useEffect(() => {\n *     async function processCallback() {\n *       // Handle the callback and get the cleaned URL\n *       const newUrl = await handleCallback(window.location.href)\n *\n *       if (newUrl) {\n *         // Replace URL without triggering navigation\n *         router.replace(newUrl, {shallow: true})\n *       }\n *     }\n *\n *     processCallback().catch(console.error)\n *   }, [handleCallback, router])\n *\n *   return <div>Completing login...</div>\n * }\n * ```\n *\n * @returns A callback handler function that processes OAuth redirects\n * @public\n */\nexport const useHandleCallback = createCallbackHook(handleCallback)\n","import {type AuthProvider, fetchLoginUrls, getLoginUrlsState} from '@sanity/sdk'\nimport {useMemo, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @internal\n * A React hook that retrieves the available authentication provider URLs for login.\n *\n * @remarks\n * This hook fetches the login URLs from the Sanity auth store when the component mounts.\n * Each provider object contains information about an authentication method, including its URL.\n * The hook will suspend if the login URLs have not yet loaded.\n *\n * @example\n * ```tsx\n * // LoginProviders component that uses the hook\n * function LoginProviders() {\n *   const providers = useLoginUrls()\n *\n *   return (\n *     <div>\n *       {providers.map((provider) => (\n *         <a key={provider.name} href={provider.url}>\n *           Login with {provider.title}\n *         </a>\n *       ))}\n *     </div>\n *   )\n * }\n *\n * // Parent component with Suspense boundary\n * function LoginPage() {\n *   return (\n *     <Suspense fallback={<div>Loading authentication providers...</div>}>\n *       <LoginProviders />\n *     </Suspense>\n *   )\n * }\n * ```\n *\n * @returns An array of {@link AuthProvider} objects containing login URLs and provider information\n * @public\n */\nexport function useLoginUrls(): AuthProvider[] {\n  const instance = useSanityInstance()\n  const {subscribe, getCurrent} = useMemo(() => getLoginUrlsState(instance), [instance])\n\n  if (!getCurrent()) throw fetchLoginUrls(instance)\n\n  return useSyncExternalStore(subscribe, getCurrent as () => AuthProvider[])\n}\n","import {logout} from '@sanity/sdk'\n\nimport {createCallbackHook} from '../helpers/createCallbackHook'\n\n/**\n * Hook to log out of the current session\n * @internal\n * @returns A function to log out of the current session\n */\nexport const useLogOut = createCallbackHook(logout)\n"],"names":[],"mappings":";;;AAiBa,MAAA,oBAAoB,CAAC,eAAwC;AAClE,QAAA,iBAAiB,WAAW,qBAAqB;AACvD,MAAI,CAAC;AACG,UAAA,IAAI,MAAM,iEAAiE;AAEnF,MAAI,eAAe,WAAW;AACtB,UAAA,IAAI,MAAM,2BAA2B;AAEzC,MAAA,eAAe,WAAW,KAAK,CAAC;AAClC,WAAO,eAAe,CAAC;AAGzB,MAAI,CAAC;AACG,UAAA,IAAI,MAAM,iEAAiE;AAG7E,QAAA,WAAW,eAAe,KAAK,CAAC,SAAS,KAAK,SAAS,eAAe,UAAU;AACtF,MAAI,CAAC;AACH,UAAM,IAAI,MAAM,mCAAmC,UAAU,YAAY;AAEpE,SAAA;AACT;ACrBO,SAAS,sBACd,SACgC;AAChC,QAAM,WAAW,OAAO,WAAY,aAAa,UAAU,QAAQ,UAC7D,gBAAgB,mBAAmB,UAAU,QAAQ,gBAAgB,QACrE,WAAW,mBAAmB,WAAW,eAAe,UAAU,UAAU;AAElF,WAAS,WAAW,QAAiB;AAC/B,QAAA;AACA,sBACF,aAAa,cAAc,GAAG,MAAM;AAEhC,UAAA,WAAW,kBAAkB,UAAU;AAC7C,QAAI,UAAU,cAAc,UAAU,GAAG,MAAM;AAC7C,YAAM,SAAS,UAAU,UAAU,GAAG,MAAM;AAG9C,UAAM,QAAQ;AAAA,MACZ,MAAM,SAAS,UAAU,GAAG,MAAM;AAAA;AAAA,MAElC,CAAC,UAAU,GAAG,MAAM;AAAA,IACtB;AACA,WAAO,qBAAqB,MAAM,WAAW,MAAM,UAAU;AAAA,EAAA;AAGxD,SAAA;AACT;AClBa,MAAA,eAAgC,sBAAsB,YAAY;ACpBxE,SAAS,mBACd,UACuC;AACvC,WAAS,UAAU;AACjB,UAAM,WAAW,kBAAkB;AAC5B,WAAA,YAAY,IAAI,WAAoB,SAAS,UAAU,GAAG,MAAM,GAAG,CAAC,QAAQ,CAAC;AAAA,EAAA;AAG/E,SAAA;AACT;AC8Ba,MAAA,oBAAoB,mBAAmB,cAAc;ACA3D,SAAS,eAA+B;AAC7C,QAAM,WAAW,qBACX,EAAC,WAAW,WAAU,IAAI,QAAQ,MAAM,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAErF,MAAI,CAAC,WAAA,EAAc,OAAM,eAAe,QAAQ;AAEzC,SAAA,qBAAqB,WAAW,UAAkC;AAC3E;AC1Ca,MAAA,YAAY,mBAAmB,MAAM;"}

package/dist/components.d.ts

@@ -98,13 +98,13 @@ declare interface LoginLayoutProps {
  * }
  * ```
  */
-export declare function SanityApp({sanityConfig, children}: SanityAppProps): ReactElement
+export declare function SanityApp({sanityConfigs, children}: SanityAppProps): ReactElement
 
 /**
  * @public
  */
 export declare interface SanityAppProps {
-  sanityConfig: SanityConfig
+  sanityConfigs: SanityConfig[]
   children: React.ReactNode
 }
 
@@ -113,14 +113,14 @@ export declare interface SanityAppProps {
  *
  * Top-level context provider that provides access to the Sanity SDK.
  */
-export declare function SDKProvider({children, sanityConfig}: SDKProviderProps): ReactElement
+export declare function SDKProvider({children, sanityConfigs}: SDKProviderProps): ReactElement
 
 /**
  * @internal
  */
 export declare interface SDKProviderProps {
   children: ReactNode
-  sanityConfig: SanityConfig
+  sanityConfigs: SanityConfig[]
 }
 
 export {}

package/dist/components.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { AuthStateType, createSanityInstance } from "@sanity/sdk";
-import { Fragment, Suspense, useEffect, useCallback, useMemo } from "react";
+import { Fragment, Suspense, useEffect, useCallback, useMemo, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { useLoginUrls, useHandleCallback, useLogOut, useAuthState } from "./_chunks-es/useLogOut.js";
 import { SanityLogo } from "@sanity/logos";
@@ -8,6 +8,10 @@ import { SanityProvider } from "./_chunks-es/context.js";
 function isInIframe() {
   return typeof window < "u" && window.self !== window.top;
 }
+function isLocalUrl(window2) {
+  const url = typeof window2 < "u" ? window2.location.href : "";
+  return url.startsWith("http://localhost") || url.startsWith("https://localhost") || url.startsWith("http://127.0.0.1") || url.startsWith("https://127.0.0.1");
+}
 class AuthError extends Error {
   constructor(error) {
     typeof error == "object" && error && "message" in error && typeof error.message == "string" ? super(error.message) : super(), this.cause = error;
@@ -125,15 +129,29 @@ function AuthSwitch({
       return /* @__PURE__ */ jsx(LoginComponent, { ...props });
   }
 }
-function SDKProvider({ children, sanityConfig }) {
-  const sanityInstance = createSanityInstance(sanityConfig);
-  return /* @__PURE__ */ jsx(SanityProvider, { sanityInstance, children: /* @__PURE__ */ jsx(AuthBoundary, { children }) });
+function SDKProvider({ children, sanityConfigs }) {
+  const sanityInstances = sanityConfigs.map(
+    (sanityConfig) => createSanityInstance(sanityConfig)
+  );
+  return /* @__PURE__ */ jsx(SanityProvider, { sanityInstances, children: /* @__PURE__ */ jsx(AuthBoundary, { children }) });
 }
-function SanityApp({ sanityConfig, children }) {
-  return isInIframe() && (sanityConfig.auth = {
-    ...sanityConfig.auth,
-    storageArea: void 0
-  }), /* @__PURE__ */ jsx(SDKProvider, { sanityConfig, children });
+const CORE_URL = "https://core.sanity.io";
+function SanityApp({ sanityConfigs, children }) {
+  const [_sanityConfigs, setSanityConfigs] = useState(sanityConfigs);
+  return useEffect(() => {
+    let timeout;
+    return isInIframe() ? setSanityConfigs(
+      sanityConfigs.map((sanityConfig) => ({
+        ...sanityConfig,
+        auth: {
+          ...sanityConfig.auth,
+          storageArea: void 0
+        }
+      }))
+    ) : isLocalUrl(window) || (timeout = setTimeout(() => {
+      console.warn("Redirecting to core", CORE_URL), window.location.replace(CORE_URL);
+    }, 1e3)), () => clearTimeout(timeout);
+  }, [sanityConfigs]), /* @__PURE__ */ jsx(SDKProvider, { sanityConfigs: _sanityConfigs, children });
 }
 export {
   AuthBoundary,

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":["../src/components/utils.ts","../src/components/auth/AuthError.ts","../src/components/auth/LoginFooter.tsx","../src/components/auth/LoginLayout.tsx","../src/components/auth/Login.tsx","../src/components/auth/LoginCallback.tsx","../src/components/auth/LoginError.tsx","../src/components/auth/AuthBoundary.tsx","../src/components/SDKProvider.tsx","../src/components/SanityApp.tsx"],"sourcesContent":["export function isInIframe(): boolean {\n  return typeof window !== 'undefined' && window.self !== window.top\n}\n","/**\n * Error class for authentication-related errors. Wraps errors thrown during the\n * authentication flow.\n *\n * @remarks\n * This class provides a consistent error type for authentication failures while\n * preserving the original error as the cause. If the original error has a\n * message property, it will be used as the error message.\n *\n * @alpha\n */\nexport class AuthError extends Error {\n  constructor(error: unknown) {\n    if (\n      typeof error === 'object' &&\n      !!error &&\n      'message' in error &&\n      typeof error.message === 'string'\n    ) {\n      super(error.message)\n    } else {\n      super()\n    }\n\n    this.cause = error\n  }\n}\n","import {SanityLogo} from '@sanity/logos'\nimport {Fragment} from 'react'\n\nconst LINKS = [\n  {\n    url: 'https://slack.sanity.io/',\n    i18nKey: 'workspaces.community-title',\n    title: 'Community',\n  },\n  {\n    url: 'https://www.sanity.io/docs',\n    i18nKey: 'workspaces.docs-title',\n    title: 'Docs',\n  },\n  {\n    url: 'https://www.sanity.io/legal/privacy',\n    i18nKey: 'workspaces.privacy-title',\n    title: 'Privacy',\n  },\n  {\n    url: 'https://www.sanity.io',\n    i18nKey: 'workspaces.sanity-io-title',\n    title: 'sanity.io',\n  },\n]\n\n/**\n * Default footer component for login screens showing Sanity branding and legal\n * links.\n *\n * @alpha\n */\nexport function LoginFooter(): React.ReactNode {\n  return (\n    <div className=\"sc-login-footer\">\n      <SanityLogo className=\"sc-login-footer__logo\" />\n\n      <ul className=\"sc-login-footer__links\">\n        {LINKS.map((link) => (\n          <Fragment key={link.title}>\n            <li className=\"sc-login-footer__link\">\n              <a href={link.url} target=\"_blank\" rel=\"noopener noreferrer\">\n                {link.title}\n              </a>\n            </li>\n          </Fragment>\n        ))}\n      </ul>\n    </div>\n  )\n}\n","import {LoginFooter} from './LoginFooter'\n\n/**\n * @alpha\n */\nexport interface LoginLayoutProps {\n  /** Optional header content rendered at top of card */\n  header?: React.ReactNode\n\n  /** Optional footer content rendered below card. Defaults to an internal login footer */\n  footer?: React.ReactNode\n\n  /** Main content rendered in card body */\n  children?: React.ReactNode\n}\n\n/**\n * Layout component for login-related screens providing consistent styling and structure.\n * Renders content in a centered card with optional header and footer sections.\n *\n * Can be used to build custom login screens for the AuthBoundary component, including:\n * - Login provider selection (LoginComponent)\n * - OAuth callback handling (CallbackComponent)\n * - Error states (LoginErrorComponent)\n *\n * @example\n * ```tsx\n * // Custom login screen using the layout\n * function CustomLogin({header, footer}: LoginLayoutProps) {\n *   return (\n *     <LoginLayout\n *       header={header}\n *       footer={footer}\n *     >\n *       <CustomLoginContent />\n *     </LoginLayout>\n *   )\n * }\n *\n * // Use with AuthBoundary\n * <AuthBoundary\n *   LoginComponent={CustomLogin}\n *   header={<Logo />}\n * >\n *   <ProtectedContent />\n * </AuthBoundary>\n * ```\n *\n * @alpha\n */\nexport function LoginLayout({\n  children,\n  footer = <LoginFooter />,\n  header,\n}: LoginLayoutProps): React.ReactNode {\n  return (\n    <div className=\"sc-login-layout\">\n      <div className=\"sc-login-layout__container\">\n        <div className=\"sc-login-layout__card\">\n          {header && <div className=\"sc-login-layout__card-header\">{header}</div>}\n\n          {children && <div className=\"sc-login-layout__card-body\">{children}</div>}\n        </div>\n\n        {footer}\n      </div>\n    </div>\n  )\n}\n","import {type JSX, Suspense} from 'react'\n\nimport {useLoginUrls} from '../../hooks/auth/useLoginUrls'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * Login component that displays available authentication providers.\n * Renders a list of login options with a loading fallback while providers load.\n *\n * @alpha\n * @internal\n */\nexport function Login({header, footer}: LoginLayoutProps): JSX.Element {\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <div className=\"sc-login\">\n        <h1 className=\"sc-login__title\">Choose login provider</h1>\n\n        <Suspense fallback={<div className=\"sc-login__loading\">Loading…</div>}>\n          <Providers />\n        </Suspense>\n      </div>\n    </LoginLayout>\n  )\n}\n\nfunction Providers() {\n  const loginUrls = useLoginUrls()\n\n  return (\n    <div className=\"sc-login-providers\">\n      {loginUrls.map(({title, url}) => (\n        <a key={url} href={url}>\n          {title}\n        </a>\n      ))}\n    </div>\n  )\n}\n","import {useEffect} from 'react'\n\nimport {useHandleCallback} from '../../hooks/auth/useHandleCallback'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n/**\n * Component shown during auth callback processing that handles login completion.\n * Automatically processes the auth callback when mounted and updates the URL\n * to remove callback parameters without triggering a page reload.\n *\n * @alpha\n */\nexport function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNode {\n  const handleCallback = useHandleCallback()\n\n  useEffect(() => {\n    const url = new URL(location.href)\n    handleCallback(url.toString()).then((replacementLocation) => {\n      if (replacementLocation) {\n        // history API with `replaceState` is used to prevent a reload but still\n        // remove the short-lived token from the URL\n        history.replaceState(null, '', replacementLocation)\n      }\n    })\n  }, [handleCallback])\n\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <div className=\"sc-login-callback\">\n        <h1 className=\"sc-login-callback__title\">Logging you in…</h1>\n        <div className=\"sc-login-callback__loading\">Loading…</div>\n      </div>\n    </LoginLayout>\n  )\n}\n","import {useCallback} from 'react'\nimport {type FallbackProps} from 'react-error-boundary'\n\nimport {useLogOut} from '../../hooks/auth/useLogOut'\nimport {AuthError} from './AuthError'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * @alpha\n */\nexport type LoginErrorProps = FallbackProps & LoginLayoutProps\n\n/**\n * Displays authentication error details and provides retry functionality.\n * Only handles {@link AuthError} instances - rethrows other error types.\n *\n * @alpha\n */\nexport function LoginError({\n  error,\n  resetErrorBoundary,\n  header,\n  footer,\n}: LoginErrorProps): React.ReactNode {\n  if (!(error instanceof AuthError)) throw error\n  const logout = useLogOut()\n\n  const handleRetry = useCallback(async () => {\n    await logout()\n    resetErrorBoundary()\n  }, [logout, resetErrorBoundary])\n\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <div className=\"sc-login-error\">\n        <div className=\"sc-login-error__content\">\n          <h2 className=\"sc-login-error__title\">Authentication Error</h2>\n          <p className=\"sc-login-error__description\">\n            Please try again or contact support if the problem persists.\n          </p>\n        </div>\n\n        <button className=\"sc-login-error__button\" onClick={handleRetry}>\n          Retry\n        </button>\n      </div>\n    </LoginLayout>\n  )\n}\n","import {AuthStateType} from '@sanity/sdk'\nimport {useMemo} from 'react'\nimport {ErrorBoundary, type FallbackProps} from 'react-error-boundary'\n\nimport {useAuthState} from '../../hooks/auth/useAuthState'\nimport {isInIframe} from '../utils'\nimport {AuthError} from './AuthError'\nimport {Login} from './Login'\nimport {LoginCallback} from './LoginCallback'\nimport {LoginError, type LoginErrorProps} from './LoginError'\nimport {type LoginLayoutProps} from './LoginLayout'\n\n// Only import bridge if we're in an iframe. This assumes that the app is\n// running within SanityOS if it is in an iframe.\nif (isInIframe()) {\n  const parsedUrl = new URL(window.location.href)\n  const mode = new URLSearchParams(parsedUrl.hash.slice(1)).get('mode')\n  const script = document.createElement('script')\n  script.src =\n    mode === 'core-ui--staging'\n      ? 'https://core.sanity-cdn.work/bridge.js'\n      : 'https://core.sanity-cdn.com/bridge.js'\n  script.type = 'module'\n  script.async = true\n  document.head.appendChild(script)\n}\n\n/**\n * @internal\n */\ninterface AuthBoundaryProps extends LoginLayoutProps {\n  /**\n   * Custom component to render the login screen.\n   * Receives all login layout props. Defaults to {@link Login}.\n   */\n  LoginComponent?: React.ComponentType<LoginLayoutProps>\n\n  /**\n   * Custom component to render during OAuth callback processing.\n   * Receives all login layout props. Defaults to {@link LoginCallback}.\n   */\n  CallbackComponent?: React.ComponentType<LoginLayoutProps>\n\n  /**\n   * Custom component to render when authentication errors occur.\n   * Receives login layout props and error boundary props. Defaults to\n   * {@link LoginError}\n   */\n  LoginErrorComponent?: React.ComponentType<LoginErrorProps>\n}\n\n/**\n * A component that handles authentication flow and error boundaries for a\n * protected section of the application.\n *\n * @remarks\n * This component manages different authentication states and renders the\n * appropriate components based on that state.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <AuthBoundary header={<MyLogo />}>\n *       <ProtectedContent />\n *     </AuthBoundary>\n *   )\n * }\n * ```\n *\n * @internal\n */\nexport function AuthBoundary({\n  LoginErrorComponent = LoginError,\n  ...props\n}: AuthBoundaryProps): React.ReactNode {\n  const {header, footer} = props\n  const FallbackComponent = useMemo(() => {\n    return function LoginComponentWithLayoutProps(fallbackProps: FallbackProps) {\n      return <LoginErrorComponent {...fallbackProps} header={header} footer={footer} />\n    }\n  }, [header, footer, LoginErrorComponent])\n\n  return (\n    <ErrorBoundary FallbackComponent={FallbackComponent}>\n      <AuthSwitch {...props} />\n    </ErrorBoundary>\n  )\n}\n\ninterface AuthSwitchProps extends LoginLayoutProps {\n  LoginComponent?: React.ComponentType<LoginLayoutProps>\n  CallbackComponent?: React.ComponentType<LoginLayoutProps>\n}\n\nfunction AuthSwitch({\n  LoginComponent = Login,\n  CallbackComponent = LoginCallback,\n  children,\n  ...props\n}: AuthSwitchProps) {\n  const authState = useAuthState()\n\n  switch (authState.type) {\n    case AuthStateType.ERROR: {\n      throw new AuthError(authState.error)\n    }\n    case AuthStateType.LOGGING_IN: {\n      return <CallbackComponent {...props} />\n    }\n    case AuthStateType.LOGGED_IN: {\n      return children\n    }\n    default: {\n      return <LoginComponent {...props} />\n    }\n  }\n}\n","import {createSanityInstance, type SanityConfig} from '@sanity/sdk'\nimport {type ReactElement, type ReactNode} from 'react'\n\nimport {SanityProvider} from '../context/SanityProvider'\nimport {AuthBoundary} from './auth/AuthBoundary'\n\n/**\n * @internal\n */\nexport interface SDKProviderProps {\n  children: ReactNode\n  sanityConfig: SanityConfig\n}\n\n// Marking this as internal since this should not be used directly by consumers\n/**\n * @internal\n *\n * Top-level context provider that provides access to the Sanity SDK.\n */\nexport function SDKProvider({children, sanityConfig}: SDKProviderProps): ReactElement {\n  const sanityInstance = createSanityInstance(sanityConfig)\n\n  return (\n    <SanityProvider sanityInstance={sanityInstance}>\n      <AuthBoundary>{children}</AuthBoundary>\n    </SanityProvider>\n  )\n}\n","import {type SanityConfig} from '@sanity/sdk'\nimport {type ReactElement} from 'react'\n\nimport {SDKProvider} from './SDKProvider'\nimport {isInIframe} from './utils'\n\n/**\n * @public\n */\nexport interface SanityAppProps {\n  sanityConfig: SanityConfig\n  children: React.ReactNode\n}\n\n/**\n * @public\n *\n * The SanityApp component provides your Sanity application with access to your Sanity configuration,\n * as well as application context and state which is used by the Sanity React hooks. Your application\n * must be wrapped with the SanityApp component to function properly.\n *\n * @param props - Your Sanity configuration and the React children to render\n * @returns Your Sanity application, integrated with your Sanity configuration and application context\n *\n * @example\n * ```\n * import { SanityApp } from '@sanity/sdk-react\n *\n * import MyAppRoot from './Root'\n *\n * const mySanityConfig = {\n *   procectId: 'my-project-id',\n *   dataset: 'production',\n * }\n *\n * export default function MyApp() {\n *   return (\n *     <SanityApp sanityConfig={mySanityConfig}>\n *       <MyAppRoot />\n *     </SanityApp>\n *   )\n * }\n * ```\n */\nexport function SanityApp({sanityConfig, children}: SanityAppProps): ReactElement {\n  if (isInIframe()) {\n    // When running in an iframe Content OS, we don't want to store tokens\n    sanityConfig.auth = {\n      ...sanityConfig.auth,\n      storageArea: undefined,\n    }\n  }\n\n  return <SDKProvider sanityConfig={sanityConfig}>{children}</SDKProvider>\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"components.js","sources":["../src/components/utils.ts","../src/components/auth/AuthError.ts","../src/components/auth/LoginFooter.tsx","../src/components/auth/LoginLayout.tsx","../src/components/auth/Login.tsx","../src/components/auth/LoginCallback.tsx","../src/components/auth/LoginError.tsx","../src/components/auth/AuthBoundary.tsx","../src/components/SDKProvider.tsx","../src/components/SanityApp.tsx"],"sourcesContent":["export function isInIframe(): boolean {\n  return typeof window !== 'undefined' && window.self !== window.top\n}\n\n/**\n * @internal\n *\n * Checks if the current URL is a local URL.\n *\n * @param window - The window object\n * @returns True if the current URL is a local URL, false otherwise\n */\nexport function isLocalUrl(window: Window): boolean {\n  const url = typeof window !== 'undefined' ? window.location.href : ''\n\n  return (\n    url.startsWith('http://localhost') ||\n    url.startsWith('https://localhost') ||\n    url.startsWith('http://127.0.0.1') ||\n    url.startsWith('https://127.0.0.1')\n  )\n}\n","/**\n * Error class for authentication-related errors. Wraps errors thrown during the\n * authentication flow.\n *\n * @remarks\n * This class provides a consistent error type for authentication failures while\n * preserving the original error as the cause. If the original error has a\n * message property, it will be used as the error message.\n *\n * @alpha\n */\nexport class AuthError extends Error {\n  constructor(error: unknown) {\n    if (\n      typeof error === 'object' &&\n      !!error &&\n      'message' in error &&\n      typeof error.message === 'string'\n    ) {\n      super(error.message)\n    } else {\n      super()\n    }\n\n    this.cause = error\n  }\n}\n","import {SanityLogo} from '@sanity/logos'\nimport {Fragment} from 'react'\n\nconst LINKS = [\n  {\n    url: 'https://slack.sanity.io/',\n    i18nKey: 'workspaces.community-title',\n    title: 'Community',\n  },\n  {\n    url: 'https://www.sanity.io/docs',\n    i18nKey: 'workspaces.docs-title',\n    title: 'Docs',\n  },\n  {\n    url: 'https://www.sanity.io/legal/privacy',\n    i18nKey: 'workspaces.privacy-title',\n    title: 'Privacy',\n  },\n  {\n    url: 'https://www.sanity.io',\n    i18nKey: 'workspaces.sanity-io-title',\n    title: 'sanity.io',\n  },\n]\n\n/**\n * Default footer component for login screens showing Sanity branding and legal\n * links.\n *\n * @alpha\n */\nexport function LoginFooter(): React.ReactNode {\n  return (\n    <div className=\"sc-login-footer\">\n      <SanityLogo className=\"sc-login-footer__logo\" />\n\n      <ul className=\"sc-login-footer__links\">\n        {LINKS.map((link) => (\n          <Fragment key={link.title}>\n            <li className=\"sc-login-footer__link\">\n              <a href={link.url} target=\"_blank\" rel=\"noopener noreferrer\">\n                {link.title}\n              </a>\n            </li>\n          </Fragment>\n        ))}\n      </ul>\n    </div>\n  )\n}\n","import {LoginFooter} from './LoginFooter'\n\n/**\n * @alpha\n */\nexport interface LoginLayoutProps {\n  /** Optional header content rendered at top of card */\n  header?: React.ReactNode\n\n  /** Optional footer content rendered below card. Defaults to an internal login footer */\n  footer?: React.ReactNode\n\n  /** Main content rendered in card body */\n  children?: React.ReactNode\n}\n\n/**\n * Layout component for login-related screens providing consistent styling and structure.\n * Renders content in a centered card with optional header and footer sections.\n *\n * Can be used to build custom login screens for the AuthBoundary component, including:\n * - Login provider selection (LoginComponent)\n * - OAuth callback handling (CallbackComponent)\n * - Error states (LoginErrorComponent)\n *\n * @example\n * ```tsx\n * // Custom login screen using the layout\n * function CustomLogin({header, footer}: LoginLayoutProps) {\n *   return (\n *     <LoginLayout\n *       header={header}\n *       footer={footer}\n *     >\n *       <CustomLoginContent />\n *     </LoginLayout>\n *   )\n * }\n *\n * // Use with AuthBoundary\n * <AuthBoundary\n *   LoginComponent={CustomLogin}\n *   header={<Logo />}\n * >\n *   <ProtectedContent />\n * </AuthBoundary>\n * ```\n *\n * @alpha\n */\nexport function LoginLayout({\n  children,\n  footer = <LoginFooter />,\n  header,\n}: LoginLayoutProps): React.ReactNode {\n  return (\n    <div className=\"sc-login-layout\">\n      <div className=\"sc-login-layout__container\">\n        <div className=\"sc-login-layout__card\">\n          {header && <div className=\"sc-login-layout__card-header\">{header}</div>}\n\n          {children && <div className=\"sc-login-layout__card-body\">{children}</div>}\n        </div>\n\n        {footer}\n      </div>\n    </div>\n  )\n}\n","import {type JSX, Suspense} from 'react'\n\nimport {useLoginUrls} from '../../hooks/auth/useLoginUrls'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * Login component that displays available authentication providers.\n * Renders a list of login options with a loading fallback while providers load.\n *\n * @alpha\n * @internal\n */\nexport function Login({header, footer}: LoginLayoutProps): JSX.Element {\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <div className=\"sc-login\">\n        <h1 className=\"sc-login__title\">Choose login provider</h1>\n\n        <Suspense fallback={<div className=\"sc-login__loading\">Loading…</div>}>\n          <Providers />\n        </Suspense>\n      </div>\n    </LoginLayout>\n  )\n}\n\nfunction Providers() {\n  const loginUrls = useLoginUrls()\n\n  return (\n    <div className=\"sc-login-providers\">\n      {loginUrls.map(({title, url}) => (\n        <a key={url} href={url}>\n          {title}\n        </a>\n      ))}\n    </div>\n  )\n}\n","import {useEffect} from 'react'\n\nimport {useHandleCallback} from '../../hooks/auth/useHandleCallback'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n/**\n * Component shown during auth callback processing that handles login completion.\n * Automatically processes the auth callback when mounted and updates the URL\n * to remove callback parameters without triggering a page reload.\n *\n * @alpha\n */\nexport function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNode {\n  const handleCallback = useHandleCallback()\n\n  useEffect(() => {\n    const url = new URL(location.href)\n    handleCallback(url.toString()).then((replacementLocation) => {\n      if (replacementLocation) {\n        // history API with `replaceState` is used to prevent a reload but still\n        // remove the short-lived token from the URL\n        history.replaceState(null, '', replacementLocation)\n      }\n    })\n  }, [handleCallback])\n\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <div className=\"sc-login-callback\">\n        <h1 className=\"sc-login-callback__title\">Logging you in…</h1>\n        <div className=\"sc-login-callback__loading\">Loading…</div>\n      </div>\n    </LoginLayout>\n  )\n}\n","import {useCallback} from 'react'\nimport {type FallbackProps} from 'react-error-boundary'\n\nimport {useLogOut} from '../../hooks/auth/useLogOut'\nimport {AuthError} from './AuthError'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * @alpha\n */\nexport type LoginErrorProps = FallbackProps & LoginLayoutProps\n\n/**\n * Displays authentication error details and provides retry functionality.\n * Only handles {@link AuthError} instances - rethrows other error types.\n *\n * @alpha\n */\nexport function LoginError({\n  error,\n  resetErrorBoundary,\n  header,\n  footer,\n}: LoginErrorProps): React.ReactNode {\n  if (!(error instanceof AuthError)) throw error\n  const logout = useLogOut()\n\n  const handleRetry = useCallback(async () => {\n    await logout()\n    resetErrorBoundary()\n  }, [logout, resetErrorBoundary])\n\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <div className=\"sc-login-error\">\n        <div className=\"sc-login-error__content\">\n          <h2 className=\"sc-login-error__title\">Authentication Error</h2>\n          <p className=\"sc-login-error__description\">\n            Please try again or contact support if the problem persists.\n          </p>\n        </div>\n\n        <button className=\"sc-login-error__button\" onClick={handleRetry}>\n          Retry\n        </button>\n      </div>\n    </LoginLayout>\n  )\n}\n","import {AuthStateType} from '@sanity/sdk'\nimport {useMemo} from 'react'\nimport {ErrorBoundary, type FallbackProps} from 'react-error-boundary'\n\nimport {useAuthState} from '../../hooks/auth/useAuthState'\nimport {isInIframe} from '../utils'\nimport {AuthError} from './AuthError'\nimport {Login} from './Login'\nimport {LoginCallback} from './LoginCallback'\nimport {LoginError, type LoginErrorProps} from './LoginError'\nimport {type LoginLayoutProps} from './LoginLayout'\n\n// Only import bridge if we're in an iframe. This assumes that the app is\n// running within SanityOS if it is in an iframe.\nif (isInIframe()) {\n  const parsedUrl = new URL(window.location.href)\n  const mode = new URLSearchParams(parsedUrl.hash.slice(1)).get('mode')\n  const script = document.createElement('script')\n  script.src =\n    mode === 'core-ui--staging'\n      ? 'https://core.sanity-cdn.work/bridge.js'\n      : 'https://core.sanity-cdn.com/bridge.js'\n  script.type = 'module'\n  script.async = true\n  document.head.appendChild(script)\n}\n\n/**\n * @internal\n */\ninterface AuthBoundaryProps extends LoginLayoutProps {\n  /**\n   * Custom component to render the login screen.\n   * Receives all login layout props. Defaults to {@link Login}.\n   */\n  LoginComponent?: React.ComponentType<LoginLayoutProps>\n\n  /**\n   * Custom component to render during OAuth callback processing.\n   * Receives all login layout props. Defaults to {@link LoginCallback}.\n   */\n  CallbackComponent?: React.ComponentType<LoginLayoutProps>\n\n  /**\n   * Custom component to render when authentication errors occur.\n   * Receives login layout props and error boundary props. Defaults to\n   * {@link LoginError}\n   */\n  LoginErrorComponent?: React.ComponentType<LoginErrorProps>\n}\n\n/**\n * A component that handles authentication flow and error boundaries for a\n * protected section of the application.\n *\n * @remarks\n * This component manages different authentication states and renders the\n * appropriate components based on that state.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <AuthBoundary header={<MyLogo />}>\n *       <ProtectedContent />\n *     </AuthBoundary>\n *   )\n * }\n * ```\n *\n * @internal\n */\nexport function AuthBoundary({\n  LoginErrorComponent = LoginError,\n  ...props\n}: AuthBoundaryProps): React.ReactNode {\n  const {header, footer} = props\n  const FallbackComponent = useMemo(() => {\n    return function LoginComponentWithLayoutProps(fallbackProps: FallbackProps) {\n      return <LoginErrorComponent {...fallbackProps} header={header} footer={footer} />\n    }\n  }, [header, footer, LoginErrorComponent])\n\n  return (\n    <ErrorBoundary FallbackComponent={FallbackComponent}>\n      <AuthSwitch {...props} />\n    </ErrorBoundary>\n  )\n}\n\ninterface AuthSwitchProps extends LoginLayoutProps {\n  LoginComponent?: React.ComponentType<LoginLayoutProps>\n  CallbackComponent?: React.ComponentType<LoginLayoutProps>\n}\n\nfunction AuthSwitch({\n  LoginComponent = Login,\n  CallbackComponent = LoginCallback,\n  children,\n  ...props\n}: AuthSwitchProps) {\n  const authState = useAuthState()\n\n  switch (authState.type) {\n    case AuthStateType.ERROR: {\n      throw new AuthError(authState.error)\n    }\n    case AuthStateType.LOGGING_IN: {\n      return <CallbackComponent {...props} />\n    }\n    case AuthStateType.LOGGED_IN: {\n      return children\n    }\n    default: {\n      return <LoginComponent {...props} />\n    }\n  }\n}\n","import {createSanityInstance, type SanityConfig} from '@sanity/sdk'\nimport {type ReactElement, type ReactNode} from 'react'\n\nimport {SanityProvider} from '../context/SanityProvider'\nimport {AuthBoundary} from './auth/AuthBoundary'\n\n/**\n * @internal\n */\nexport interface SDKProviderProps {\n  children: ReactNode\n  sanityConfigs: SanityConfig[]\n}\n\n// Marking this as internal since this should not be used directly by consumers\n/**\n * @internal\n *\n * Top-level context provider that provides access to the Sanity SDK.\n */\nexport function SDKProvider({children, sanityConfigs}: SDKProviderProps): ReactElement {\n  const sanityInstances = sanityConfigs.map((sanityConfig: SanityConfig) =>\n    createSanityInstance(sanityConfig),\n  )\n\n  return (\n    <SanityProvider sanityInstances={sanityInstances}>\n      <AuthBoundary>{children}</AuthBoundary>\n    </SanityProvider>\n  )\n}\n","import {type SanityConfig} from '@sanity/sdk'\nimport {type ReactElement, useEffect, useState} from 'react'\n\nimport {SDKProvider} from './SDKProvider'\nimport {isInIframe, isLocalUrl} from './utils'\n\n/**\n * @public\n */\nexport interface SanityAppProps {\n  sanityConfigs: SanityConfig[]\n  children: React.ReactNode\n}\n\nconst CORE_URL = 'https://core.sanity.io'\n\n/**\n * @public\n *\n * The SanityApp component provides your Sanity application with access to your Sanity configuration,\n * as well as application context and state which is used by the Sanity React hooks. Your application\n * must be wrapped with the SanityApp component to function properly.\n *\n * @param props - Your Sanity configuration and the React children to render\n * @returns Your Sanity application, integrated with your Sanity configuration and application context\n *\n * @example\n * ```\n * import { SanityApp } from '@sanity/sdk-react\n *\n * import MyAppRoot from './Root'\n *\n * const mySanityConfig = {\n *   procectId: 'my-project-id',\n *   dataset: 'production',\n * }\n *\n * export default function MyApp() {\n *   return (\n *     <SanityApp sanityConfig={mySanityConfig}>\n *       <MyAppRoot />\n *     </SanityApp>\n *   )\n * }\n * ```\n */\nexport function SanityApp({sanityConfigs, children}: SanityAppProps): ReactElement {\n  const [_sanityConfigs, setSanityConfigs] = useState<SanityConfig[]>(sanityConfigs)\n\n  useEffect(() => {\n    let timeout: NodeJS.Timeout | undefined\n\n    if (isInIframe()) {\n      // When running in an iframe Content OS, we don't want to store tokens\n      setSanityConfigs(\n        sanityConfigs.map((sanityConfig) => ({\n          ...sanityConfig,\n          auth: {\n            ...sanityConfig.auth,\n            storageArea: undefined,\n          },\n        })),\n      )\n    } else if (!isLocalUrl(window)) {\n      // If the app is not running in an iframe and is not a local url, redirect to core.\n      timeout = setTimeout(() => {\n        // eslint-disable-next-line no-console\n        console.warn('Redirecting to core', CORE_URL)\n        window.location.replace(CORE_URL)\n      }, 1000)\n    }\n    return () => clearTimeout(timeout)\n  }, [sanityConfigs])\n\n  return <SDKProvider sanityConfigs={_sanityConfigs}>{children}</SDKProvider>\n}\n"],"names":["window"],"mappings":"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"}

package/dist/context.d.ts

@@ -33,7 +33,7 @@ import {SanityInstance} from '@sanity/sdk'
  */
 export declare const SanityProvider: ({
   children,
-  sanityInstance,
+  sanityInstances,
 }: SanityProviderProps) => ReactElement
 
 /**
@@ -41,7 +41,7 @@ export declare const SanityProvider: ({
  */
 export declare interface SanityProviderProps {
   children: React.ReactNode
-  sanityInstance: SanityInstance
+  sanityInstances: SanityInstance[]
 }
 
 export {}

package/dist/hooks.d.ts

@@ -19,6 +19,7 @@ import {ResourceType} from '@sanity/sdk'
 import {SanityDocument} from '@sanity/types'
 import {SanityInstance} from '@sanity/sdk'
 import {SanityUser as SanityUser_2} from '@sanity/sdk'
+import {ValidProjection} from '@sanity/sdk'
 import {WindowMessage} from '@sanity/sdk'
 
 /** @public */
@@ -3315,7 +3316,7 @@ export declare const useDatasets: () => DatasetsResponse
 export declare function useDocument<
   TDocument extends SanityDocument,
   TPath extends JsonMatchPath<TDocument>,
->(doc: string | DocumentHandle<TDocument>, path: TPath): JsonMatch<TDocument, TPath> | undefined
+>(doc: DocumentHandle<TDocument>, path: TPath): JsonMatch<TDocument, TPath> | undefined
 
 /**
  * @beta
@@ -3353,7 +3354,7 @@ export declare function useDocument<
  *
  */
 export declare function useDocument<TDocument extends SanityDocument>(
-  doc: string | DocumentHandle<TDocument>,
+  doc: DocumentHandle<TDocument>,
 ): TDocument | null
 
 /**
@@ -3379,7 +3380,10 @@ export declare function useDocument<TDocument extends SanityDocument>(
  * })
  * ```
  */
-export declare function useDocumentEvent(handler: (documentEvent: DocumentEvent) => void): void
+export declare function useDocumentEvent(
+  handler: (documentEvent: DocumentEvent) => void,
+  doc: DocumentHandle,
+): void
 
 /**
  * @public
@@ -3449,7 +3453,7 @@ declare type UseDocumentSyncStatus = {
    * @returns `true` if local changes are synced with remote, `false` if the changes are not synced, and `undefined` if the document is not found
    * @example Disable a Save button when there are no changes to sync
    * ```
-   * const myDocumentHandle = { _id: 'documentId', _type: 'documentType' }
+   * const myDocumentHandle = { _id: 'documentId', _type: 'documentType', resourceId: 'document:projectId:dataset:documentId' }
    * const documentSynced = useDocumentSyncStatus(myDocumentHandle)
    *
    * return (
@@ -3515,7 +3519,7 @@ export declare function useEditDocument<
   TDocument extends SanityDocument,
   TPath extends JsonMatchPath<TDocument>,
 >(
-  doc: string | DocumentHandle<TDocument>,
+  doc: DocumentHandle<TDocument>,
   path: TPath,
 ): (nextValue: Updater<JsonMatch<TDocument, TPath>>) => Promise<ActionsResult<TDocument>>
 
@@ -3582,7 +3586,7 @@ export declare function useEditDocument<
  * ```
  */
 export declare function useEditDocument<TDocument extends SanityDocument>(
-  doc: string | DocumentHandle<TDocument>,
+  doc: DocumentHandle<TDocument>,
 ): (nextValue: Updater<TDocument>) => Promise<ActionsResult<TDocument>>
 
 /**
@@ -3819,6 +3823,78 @@ export declare interface UsePreviewResults {
 /** @public */
 export declare const useProject: (projectId: string) => SanityProject
 
+/**
+ * @beta
+ *
+ * Returns the projection values of a document (specified via a `DocumentHandle`),
+ * based on the provided projection string. These values are live and will update in realtime.
+ * To reduce unnecessary network requests for resolving the projection values, an optional `ref` can be passed to the hook so that projection
+ * resolution will only occur if the `ref` is intersecting the current viewport.
+ *
+ * @category Documents
+ * @param options - The document handle for the document you want to project values from, the projection string, and an optional ref
+ * @returns The projection values for the given document and a boolean to indicate whether the resolution is pending
+ *
+ * @example Using a projection to display specific document fields
+ * ```
+ * // ProjectionComponent.jsx
+ * export default function ProjectionComponent({ document }) {
+ *   const ref = useRef(null)
+ *   const { results: { title, description, authors }, isPending } = useProjection({
+ *     document,
+ *     projection: '{title, "description": pt::text("description"), "authors": array::join(authors[]->name, ", ")}',
+ *     ref
+ *   })
+ *
+ *   return (
+ *     <article ref={ref} style={{ opacity: isPending ? 0.5 : 1}}>
+ *       <h2>{title}</h2>
+ *       <p>{description}</p>
+ *       <p>{authors}</p>
+ *     </article>
+ *   )
+ * }
+ * ```
+ *
+ * @example Combining with useDocuments to render a collection with specific fields
+ * ```
+ * // DocumentList.jsx
+ * const { results, isPending } = useDocuments({ filter: '_type == "article"' })
+ * return (
+ *   <div>
+ *     <h1>Articles</h1>
+ *     <ul>
+ *       {isPending ? 'Loading…' : results.map(article => (
+ *         <li key={article._id}>
+ *           <Suspense fallback='Loading…'>
+ *             <ProjectionComponent
+ *               document={article}
+ *             />
+ *           </Suspense>
+ *         </li>
+ *       ))}
+ *     </ul>
+ *   </div>
+ * )
+ * ```
+ */
+export declare function useProjection<TResult extends object>({
+  document: {_id, _type},
+  projection,
+  ref,
+}: UseProjectionOptions): UseProjectionResults<TResult>
+
+declare interface UseProjectionOptions {
+  document: DocumentHandle
+  projection: ValidProjection
+  ref?: React.RefObject<unknown>
+}
+
+declare interface UseProjectionResults<TResult extends object> {
+  results: TResult
+  isPending: boolean
+}
+
 /** @public */
 export declare const useProjects: () => Omit<SanityProject, 'members'>[]
 
@@ -3838,13 +3914,15 @@ declare class UsersClient {
  * `useSanityInstance` returns the current Sanity instance from the application context.
  * This must be called from within a `SanityProvider` component.
  * @internal
+ *
+ * @param resourceId - The resourceId of the Sanity instance to return (optional)
  * @returns The current Sanity instance
  * @example
  * ```tsx
- * const instance = useSanityInstance()
+ * const instance = useSanityInstance('abc123:production')
  * ```
  */
-export declare const useSanityInstance: () => SanityInstance
+export declare const useSanityInstance: (resourceId?: string) => SanityInstance
 
 /**
  * @public