@sanity/sdk-react 0.0.0-alpha.1 → 0.0.0-alpha.11

package/README.md

@@ -0,0 +1,163 @@
+<p align="center">
+  <a href="https://sanity.io">
+    <img src="https://cdn.sanity.io/images/3do82whm/next/1dfce9dde7a62ccaa8e8377254a1e919f6c07ad3-128x128.svg" />
+  </a>
+  <h1 align="center">Sanity SDK - React</h1>
+</p>
+
+React hooks for creating Sanity applications.
+
+## Installation
+
+```bash
+npm i @sanity/sdk-react @sanity/sdk
+```
+
+## SDK Documentation
+
+See the [SDK Documentation](https://sdk-docs.sanity.dev) for more information.
+
+## Quick Start
+
+Here's how to implement your Sanity application:
+
+```bash
+# Create a new Vite React TypeScript project
+npm create vite@latest my-content-os-app -- --template react-ts -y
+cd my-content-os-app
+# Install Sanity dependencies
+npm i @sanity/sdk-react @sanity/sdk
+# Run the app
+npm run dev
+# In another terminal, run the Sanity CoreUI
+npx @sanity/os-cli run --url=http://localhost:5173/
+```
+
+```tsx
+// src/App.tsx
+import {SanityConfig} from '@sanity/sdk'
+import {SanityApp} from '@sanity/sdk-react/components'
+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',
+  //   ...
+  // },
+}
+
+export function App(): JSX.Element {
+  return (
+    <SanityApp sanityConfig={sanityConfig}>
+      <MyApp />
+    </SanityApp>
+  )
+}
+
+function MyApp() {
+  const currentUser = useCurrentUser()
+  const logout = useLogOut()
+
+  return (
+    <div>
+      <h1>Hello, {currentUser?.name}!</h1>
+      <button onClick={logout}>Logout</button>
+    </div>
+  )
+}
+
+export default App
+```
+
+```css
+/* src/App.css */
+#root {
+  margin: auto;
+}
+
+.sc-login-layout {
+  min-height: 100vh;
+  display: flex;
+  background: #f3f3f3;
+}
+
+.sc-login-layout__container {
+  margin: auto;
+  padding: 2rem;
+}
+
+.sc-login-layout__card {
+  background: white;
+  padding: 2rem;
+}
+
+.sc-login__title,
+.sc-login-callback {
+  text-align: center;
+  margin-bottom: 2rem;
+  color: #333;
+}
+
+.sc-login-providers {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.sc-login-providers a {
+  padding: 0.8rem;
+  border: 1px solid #ddd;
+  text-decoration: none;
+  color: #333;
+  text-align: center;
+}
+
+.sc-login-footer {
+  margin-top: 2rem;
+  text-align: center;
+}
+
+.sc-login-footer__links {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+.sc-login-footer__link a {
+  font-size: 0.9rem;
+}
+```
+
+## Available Hooks
+
+- `useAuthState` - Get current authentication state
+- `useCurrentUser` - Access the currently authenticated user
+- `useAuthToken` - Access the authentication token
+- `useLoginUrls` - Get OAuth login URLs
+- `useLogOut` - Handle user logout
+- `useSanityInstance` - Access the Sanity client instance
+- and more...
+
+## 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

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext } from "react";
+const SanityInstanceContext = createContext(null), SanityProvider = ({ children, sanityInstance }) => /* @__PURE__ */ jsx(SanityInstanceContext.Provider, { value: sanityInstance, children });
+export {
+  SanityInstanceContext,
+  SanityProvider
+};
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +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 * @public\n */\nexport interface SanityProviderProps {\n  children: React.ReactNode\n  sanityInstance: SanityInstance\n}\n\nexport const SanityInstanceContext = createContext<SanityInstance | null>(null)\n\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 * @remarks In most cases, SanityApp should be used rather than SanityProvider directly; SanityApp bundles both SanityProvider and an authentication layer.\n * @internal\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,GA8BjE,iBAAiB,CAAC,EAAC,UAAU,eAAc,0BAEnD,sBAAsB,UAAtB,EAA+B,OAAO,gBACpC,SACH,CAAA;"}

package/dist/_chunks-es/useLogOut.js

@@ -1,32 +1,41 @@
-import { getAuthStore } from "@sanity/sdk";
-import { useStore } from "zustand/react";
-import { createContext, useContext, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-const SanityInstanceContext = createContext(null), SanityProvider = ({ children, sanityInstance }) => /* @__PURE__ */ jsx(SanityInstanceContext.Provider, { value: sanityInstance, children }), useSanityInstance = () => {
+import { getAuthState, handleCallback, getLoginUrlsState, fetchLoginUrls, logout } from "@sanity/sdk";
+import { useContext, useMemo, useSyncExternalStore, useCallback } from "react";
+import { SanityInstanceContext } from "./context.js";
+const useSanityInstance = () => {
   const sanityInstance = useContext(SanityInstanceContext);
   if (!sanityInstance)
     throw new Error("useSanityInstance must be called from within the SanityProvider");
   return sanityInstance;
 };
-function useAuthState() {
-  const instance = useSanityInstance(), { authState } = getAuthStore(instance);
-  return useStore(authState);
+function createStateSourceHook(stateSourceFactory) {
+  function useHook(...params) {
+    const instance = useSanityInstance(), { subscribe, getCurrent } = useMemo(
+      () => stateSourceFactory(instance, ...params),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [instance, ...params]
+    );
+    return useSyncExternalStore(subscribe, getCurrent);
+  }
+  return useHook;
 }
-function useLoginUrls() {
-  const instance = useSanityInstance(), result = useMemo(() => getAuthStore(instance), [instance]).getLoginUrls();
-  if (Array.isArray(result)) return result;
-  throw result;
+const useAuthState = createStateSourceHook(getAuthState);
+function createCallbackHook(callback) {
+  function useHook() {
+    const instance = useSanityInstance();
+    return useCallback((...params) => callback(instance, ...params), [instance]);
+  }
+  return useHook;
 }
-function useHandleCallback() {
-  const instance = useSanityInstance();
-  return useMemo(() => getAuthStore(instance), [instance]).handleCallback;
+const useHandleCallback = createCallbackHook(handleCallback);
+function useLoginUrls() {
+  const instance = useSanityInstance(), { subscribe, getCurrent } = useMemo(() => getLoginUrlsState(instance), [instance]);
+  if (!getCurrent()) throw fetchLoginUrls(instance);
+  return useSyncExternalStore(subscribe, getCurrent);
 }
-const useLogOut = () => {
-  const instance = useSanityInstance(), { logout } = getAuthStore(instance);
-  return logout;
-};
+const useLogOut = createCallbackHook(logout);
 export {
-  SanityProvider,
+  createCallbackHook,
+  createStateSourceHook,
   useAuthState,
   useHandleCallback,
   useLogOut,

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

@@ -1 +1 @@
-{"version":3,"file":"useLogOut.js","sources":["../../src/components/context/SanityProvider.tsx","../../src/hooks/context/useSanityInstance.ts","../../src/hooks/auth/useAuthState.tsx","../../src/hooks/auth/useLoginUrls.tsx","../../src/hooks/auth/useHandleCallback.tsx","../../src/hooks/auth/useLogOut.tsx"],"sourcesContent":["import {type SanityInstance} from '@sanity/sdk'\nimport {createContext, type ReactElement} from 'react'\n\n/**\n * @public\n */\nexport interface SanityProviderProps {\n  children: React.ReactNode\n  sanityInstance: SanityInstance\n}\n\nexport const SanityInstanceContext = createContext<SanityInstance | null>(null)\n\n/**\n * Top-level context provider that provides a Sanity configuration instance.\n * This must wrap any Sanity SDK React component.\n * @public\n * @param props - Sanity project and dataset configuration\n * @returns Rendered component\n * @example\n * ```tsx\n * import {createSanityInstance} from '@sanity/sdk'\n * import {ExampleComponent, SanityProvider} from '@sanity/sdk-react'\n *\n * const sanityInstance = createSanityInstance({projectId: 'your-project-id', dataset: 'production'})\n *\n * export default function MyApp() {\n *   return (\n *     <SanityProvider sanityInstance={sanityInstance}>\n *      <ExampleComponent />\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","import type {SanityInstance} from '@sanity/sdk'\nimport {useContext} from 'react'\n\nimport {SanityInstanceContext} from '../../components/context/SanityProvider'\n\n/**\n * Hook that provides the current Sanity instance from the context.\n * This must be called from within a `SanityProvider` component.\n * @public\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 AuthState, getAuthStore} from '@sanity/sdk'\nimport {useStore} from 'zustand/react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\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 the component 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 *\n * @public\n */\nexport function useAuthState(): AuthState {\n  const instance = useSanityInstance()\n  const {authState} = getAuthStore(instance)\n\n  return useStore(authState)\n}\n","import {type AuthProvider, getAuthStore} from '@sanity/sdk'\nimport {useMemo} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\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 authStore = useMemo(() => getAuthStore(instance), [instance])\n  const result = authStore.getLoginUrls()\n\n  if (Array.isArray(result)) return result\n  throw result\n}\n","import {type AuthStore, getAuthStore} from '@sanity/sdk'\nimport {useMemo} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\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 function useHandleCallback(): AuthStore['handleCallback'] {\n  const instance = useSanityInstance()\n  const authStore = useMemo(() => getAuthStore(instance), [instance])\n\n  return authStore.handleCallback\n}\n","import {type AuthStore, getAuthStore} from '@sanity/sdk'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * Hook to log out of the current session\n * @public\n * @returns A function to log out of the current session\n */\nexport const useLogOut = (): AuthStore['logout'] => {\n  const instance = useSanityInstance()\n  const {logout} = getAuthStore(instance)\n\n  return logout\n}\n"],"names":[],"mappings":";;;;AAWO,MAAM,wBAAwB,cAAqC,IAAI,GAwBjE,iBAAiB,CAAC,EAAC,UAAU,eAAc,0BAEnD,sBAAsB,UAAtB,EAA+B,OAAO,gBACpC,SACH,CAAA,GCxBS,oBAAoB,MAAsB;AAC/C,QAAA,iBAAiB,WAAW,qBAAqB;AACvD,MAAI,CAAC;AACG,UAAA,IAAI,MAAM,iEAAiE;AAG5E,SAAA;AACT;ACKO,SAAS,eAA0B;AACxC,QAAM,WAAW,kBAAkB,GAC7B,EAAC,UAAS,IAAI,aAAa,QAAQ;AAEzC,SAAO,SAAS,SAAS;AAC3B;ACWO,SAAS,eAA+B;AAC7C,QAAM,WAAW,qBAEX,SADY,QAAQ,MAAM,aAAa,QAAQ,GAAG,CAAC,QAAQ,CAAC,EACzC,aAAa;AAEtC,MAAI,MAAM,QAAQ,MAAM,EAAU,QAAA;AAC5B,QAAA;AACR;ACNO,SAAS,oBAAiD;AAC/D,QAAM,WAAW,kBAAkB;AACjB,SAAA,QAAQ,MAAM,aAAa,QAAQ,GAAG,CAAC,QAAQ,CAAC,EAEjD;AACnB;ACxCO,MAAM,YAAY,MAA2B;AAClD,QAAM,WAAW,kBAAkB,GAC7B,EAAC,OAAM,IAAI,aAAa,QAAQ;AAE/B,SAAA;AACT;"}
+{"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 * @public\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\nexport function createStateSourceHook<TParams extends unknown[], TState>(\n  stateSourceFactory: (instance: SanityInstance, ...params: TParams) => StateSource<TState>,\n): (...params: TParams) => TState {\n  function useHook(...params: TParams) {\n    const instance = useSanityInstance()\n    const {subscribe, getCurrent} = useMemo(\n      () => stateSourceFactory(instance, ...params),\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [instance, ...params],\n    )\n\n    return useSyncExternalStore(subscribe, 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 *\n * @public\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;ACjBO,SAAS,sBACd,oBACgC;AAChC,WAAS,WAAW,QAAiB;AACnC,UAAM,WAAW,kBAAkB,GAC7B,EAAC,WAAW,WAAc,IAAA;AAAA,MAC9B,MAAM,mBAAmB,UAAU,GAAG,MAAM;AAAA;AAAA,MAE5C,CAAC,UAAU,GAAG,MAAM;AAAA,IACtB;AAEO,WAAA,qBAAqB,WAAW,UAAU;AAAA,EAAA;AAG5C,SAAA;AACT;ACOa,MAAA,eAAgC,sBAAsB,YAAY;ACtBxE,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

@@ -1,7 +1,6 @@
 import {FallbackProps} from 'react-error-boundary'
-import type {PropsWithChildren} from 'react'
 import {ReactElement} from 'react'
-import {SanityInstance} from '@sanity/sdk'
+import {SanityConfig} from '@sanity/sdk'
 
 /**
  * A component that handles authentication flow and error boundaries for a
@@ -22,7 +21,7 @@ import {SanityInstance} from '@sanity/sdk'
  * }
  * ```
  *
- * @alpha
+ * @internal
  */
 export declare function AuthBoundary({
   LoginErrorComponent,
@@ -30,9 +29,9 @@ export declare function AuthBoundary({
 }: AuthBoundaryProps): React.ReactNode
 
 /**
- * @alpha
+ * @internal
  */
-export declare interface AuthBoundaryProps extends LoginLayoutProps {
+declare interface AuthBoundaryProps extends LoginLayoutProps {
   /**
    * Custom component to render the login screen.
    * Receives all login layout props. Defaults to {@link Login}.
@@ -52,122 +51,14 @@ export declare interface AuthBoundaryProps extends LoginLayoutProps {
 }
 
 /**
- * @public
- */
-export declare const DocumentGridLayout: {
-  (props: PropsWithChildren): ReactElement
-  displayName: string
-}
-
-/**
- * @public
- */
-export declare const DocumentListLayout: {
-  (props: PropsWithChildren): ReactElement
-  displayName: string
-}
-
-/**
- * This is a component that renders a document preview.
- *
- * @public
- *
- * @param props - The props for the DocumentPreviewLayout component.
- * @returns - The DocumentPreviewLayout component.
- */
-export declare const DocumentPreviewLayout: {
-  ({docType, selected, status, subtitle, title, url}: DocumentPreviewLayoutProps): JSX.Element
-  displayName: string
-}
-
-/**
- * @public
- */
-export declare interface DocumentPreviewLayoutProps {
-  docType?: string
-  media?: React.ReactNode
-  selected?: boolean
-  status?: string
-  subtitle?: string
-  title: string
-  url?: string
-}
-
-/**
- * Login component that displays available authentication providers.
- * Renders a list of login options with a loading fallback while providers load.
- *
- * @alpha
- */
-export declare function Login({header, footer}: LoginLayoutProps): JSX.Element
-
-/**
- * Component shown during auth callback processing that handles login completion.
- * Automatically processes the auth callback when mounted and updates the URL
- * to remove callback parameters without triggering a page reload.
- *
- * @alpha
- */
-export declare function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNode
-
-/**
- * Displays authentication error details and provides retry functionality.
- * Only handles {@link AuthError} instances - rethrows other error types.
- *
- * @alpha
- */
-export declare function LoginError({
-  error,
-  resetErrorBoundary,
-  header,
-  footer,
-}: LoginErrorProps): React.ReactNode
-
-/**
- * @alpha
- */
-export declare type LoginErrorProps = FallbackProps & LoginLayoutProps
-
-/**
- * Layout component for login-related screens providing consistent styling and structure.
- * Renders content in a centered card with optional header and footer sections.
- *
- * Can be used to build custom login screens for the AuthBoundary component, including:
- * - Login provider selection (LoginComponent)
- * - OAuth callback handling (CallbackComponent)
- * - Error states (LoginErrorComponent)
- *
- * @example
- * ```tsx
- * // Custom login screen using the layout
- * function CustomLogin({header, footer}: LoginLayoutProps) {
- *   return (
- *     <LoginLayout
- *       header={header}
- *       footer={footer}
- *     >
- *       <CustomLoginContent />
- *     </LoginLayout>
- *   )
- * }
- *
- * // Use with AuthBoundary
- * <AuthBoundary
- *   LoginComponent={CustomLogin}
- *   header={<Logo />}
- * >
- *   <ProtectedContent />
- * </AuthBoundary>
- * ```
- *
  * @alpha
  */
-export declare function LoginLayout({children, footer, header}: LoginLayoutProps): React.ReactNode
+declare type LoginErrorProps = FallbackProps & LoginLayoutProps
 
 /**
  * @alpha
  */
-export declare interface LoginLayoutProps {
+declare interface LoginLayoutProps {
   /** Optional header content rendered at top of card */
   header?: React.ReactNode
   /** Optional footer content rendered below card. Defaults to an internal login footer */
@@ -177,59 +68,43 @@ export declare interface LoginLayoutProps {
 }
 
 /**
- * Component that handles Sanity authentication flow and renders login provider options
- *
  * @public
  *
- * @returns Rendered component
+ * The SanityApp component provides your Sanity application with access to your Sanity configuration,
+ * as well as application context and state which is used by the Sanity React hooks. Your application
+ * must be wrapped with the SanityApp component to function properly.
  *
- * @remarks
- * The component handles three states:
- * 1. Loading state during token exchange
- * 2. Success state after successful authentication
- * 3. Provider selection UI when not authenticated
+ * @param props - Your Sanity configuration and the React children to render
+ * @returns Your Sanity application, integrated with your Sanity configuration and application context
  *
  * @example
- * ```tsx
- * const config = { projectId: 'your-project-id', dataset: 'production' }
- * return <LoginLinks sanityInstance={config} />
  * ```
- */
-export declare const LoginLinks: () => ReactElement
-
-/**
- * Top-level context provider that provides a Sanity configuration instance.
- * This must wrap any Sanity SDK React component.
- * @public
- * @param props - Sanity project and dataset configuration
- * @returns Rendered component
- * @example
- * ```tsx
- * import {createSanityInstance} from '@sanity/sdk'
- * import {ExampleComponent, SanityProvider} from '@sanity/sdk-react'
+ * import { SanityApp } from '@sanity/sdk-react
  *
- * const sanityInstance = createSanityInstance({projectId: 'your-project-id', dataset: 'production'})
+ * import MyAppRoot from './Root'
+ *
+ * const mySanityConfig = {
+ *   procectId: 'my-project-id',
+ *   dataset: 'production',
+ * }
  *
  * export default function MyApp() {
  *   return (
- *     <SanityProvider sanityInstance={sanityInstance}>
- *      <ExampleComponent />
- *     </SanityProvider>
+ *     <SanityApp sanityConfig={mySanityConfig}>
+ *       <MyAppRoot />
+ *     </SanityApp>
  *   )
  * }
  * ```
  */
-export declare const SanityProvider: ({
-  children,
-  sanityInstance,
-}: SanityProviderProps) => ReactElement
+export declare function SanityApp({sanityConfig, children}: SanityAppProps): ReactElement
 
 /**
  * @public
  */
-export declare interface SanityProviderProps {
+export declare interface SanityAppProps {
+  sanityConfig: SanityConfig
   children: React.ReactNode
-  sanityInstance: SanityInstance
 }
 
 export {}