@sanity/sdk-react 0.0.0-alpha.4 → 0.0.0-alpha.6

package/README.md

@@ -26,61 +26,115 @@ Here's how to implement your Sanity application:
 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 @sanity/ui
+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 {createSanityInstance} from '@sanity/sdk'
-import {SanityProvider} from '@sanity/sdk-react/context'
+import {SanityConfig} from '@sanity/sdk'
+import {SanityApp} from '@sanity/sdk-react/components'
 import {useCurrentUser, useLogOut} from '@sanity/sdk-react/hooks'
-import {Button, Flex, Spinner, Text, ThemeProvider} from '@sanity/ui'
-import {buildTheme} from '@sanity/ui/theme'
-import {Suspense} from 'react'
 
-const theme = buildTheme({})
-const sanityInstance = createSanityInstance({
+import './App.css'
+
+const sanityConfig: SanityConfig = {
   projectId: '<your-project-id>',
   dataset: '<your-dataset>',
-  // optional auth config set projectId and dataset to '' and authScope to 'org' for a global token
+  // optional auth config set projectId and dataset to '' and authScope to 'global' for a global token
   // auth: {
-  //   authScope: 'org',
+  //   authScope: 'global',
   //   ...
   // },
-})
+}
 
 export function App(): JSX.Element {
   return (
-    <ThemeProvider theme={theme}>
-      <Suspense fallback={<Spinner />}>
-        <SanityProvider sanityInstance={sanityInstance}>
-          {/* You will need to implement an auth boundary */}
-          <AuthBoundary header={<Text>My Sanity App</Text>}>
-            <Authenticated />
-          </AuthBoundary>
-        </SanityProvider>
-      </Suspense>
-    </ThemeProvider>
+    <SanityApp sanityConfig={sanityConfig}>
+      <MyApp />
+    </SanityApp>
   )
 }
 
-function Authenticated() {
+function MyApp() {
   const currentUser = useCurrentUser()
   const logout = useLogOut()
 
   return (
-    <Flex direction="column" gap={2}>
-      <Text>Hello, {currentUser?.name}!</Text>
-      <Button text="Logout" onClick={logout} mode="ghost" />
-    </Flex>
+    <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

package/dist/components.d.ts

@@ -57,6 +57,7 @@ declare type LoginErrorProps = FallbackProps & LoginLayoutProps
 
 /**
  * @alpha
+ * @internal
  */
 declare interface LoginLayoutProps {
   /** Optional header content rendered at top of card */

package/dist/components.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { AuthStateType, createSanityInstance } from "@sanity/sdk";
-import { Fragment, Suspense, useEffect, useCallback, useMemo } from "react";
+import { Suspense, useEffect, useCallback, useMemo } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { useLoginUrls, useHandleCallback, useLogOut, useAuthState } from "./_chunks-es/useLogOut.js";
+import { Box, Flex, Inline, Text, Container, Card, Heading, Spinner, Stack, Button } from "@sanity/ui";
 import { SanityLogo } from "@sanity/logos";
 import { SanityProvider } from "./_chunks-es/context.js";
 class AuthError extends Error {
@@ -33,9 +34,18 @@ const LINKS = [
   }
 ];
 function LoginFooter() {
-  return /* @__PURE__ */ jsxs("div", { className: "sc-login-footer", children: [
-    /* @__PURE__ */ jsx(SanityLogo, { className: "sc-login-footer__logo" }),
-    /* @__PURE__ */ jsx("ul", { className: "sc-login-footer__links", children: LINKS.map((link) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("li", { className: "sc-login-footer__link", children: /* @__PURE__ */ jsx("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", children: link.title }) }) }, link.title)) })
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(SanityLogo, {}) }),
+    /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(Inline, { space: 2, paddingY: 3, children: LINKS.map((link) => /* @__PURE__ */ jsx(Text, { size: 0, children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: link.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: { color: "inherit" },
+        children: link.title
+      }
+    ) }, link.url)) }) })
   ] });
 }
 function LoginLayout({
@@ -43,23 +53,38 @@ function LoginLayout({
   footer = /* @__PURE__ */ jsx(LoginFooter, {}),
   header
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "sc-login-layout", children: /* @__PURE__ */ jsxs("div", { className: "sc-login-layout__container", children: [
-    /* @__PURE__ */ jsxs("div", { className: "sc-login-layout__card", children: [
-      header && /* @__PURE__ */ jsx("div", { className: "sc-login-layout__card-header", children: header }),
-      children && /* @__PURE__ */ jsx("div", { className: "sc-login-layout__card-body", children })
-    ] }),
+  return /* @__PURE__ */ jsx(Container, { width: 0, children: /* @__PURE__ */ jsxs(Card, { shadow: 1, radius: 2, padding: 4, children: [
+    header && header,
+    children && children,
     footer
   ] }) });
 }
 function Login({ header, footer }) {
-  return /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs("div", { className: "sc-login", children: [
-    /* @__PURE__ */ jsx("h1", { className: "sc-login__title", children: "Choose login provider" }),
-    /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "sc-login__loading", children: "Loading\u2026" }), children: /* @__PURE__ */ jsx(Providers, {}) })
-  ] }) });
+  return /* @__PURE__ */ jsxs(LoginLayout, { header, footer, children: [
+    /* @__PURE__ */ jsx(Heading, { as: "h6", align: "center", children: "Choose login provider:" }),
+    /* @__PURE__ */ jsx(
+      Suspense,
+      {
+        fallback: /* @__PURE__ */ jsx(Box, { padding: 5, children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsx(Spinner, {}) }) }),
+        children: /* @__PURE__ */ jsx(Providers, {})
+      }
+    )
+  ] });
 }
 function Providers() {
   const loginUrls = useLoginUrls();
-  return /* @__PURE__ */ jsx("div", { className: "sc-login-providers", children: loginUrls.map(({ title, url }) => /* @__PURE__ */ jsx("a", { href: url, children: title }, url)) });
+  return /* @__PURE__ */ jsx(Stack, { space: 3, marginY: 5, children: loginUrls.map(({ title, url }) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      as: "a",
+      href: url,
+      mode: "ghost",
+      text: title,
+      textAlign: "center",
+      fontSize: 2
+    },
+    url
+  )) });
 }
 function LoginCallback({ header, footer }) {
   const handleCallback = useHandleCallback();
@@ -68,10 +93,10 @@ function LoginCallback({ header, footer }) {
     handleCallback(url.toString()).then((replacementLocation) => {
       replacementLocation && history.replaceState(null, "", replacementLocation);
     });
-  }, [handleCallback]), /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs("div", { className: "sc-login-callback", children: [
-    /* @__PURE__ */ jsx("h1", { className: "sc-login-callback__title", children: "Logging you in\u2026" }),
-    /* @__PURE__ */ jsx("div", { className: "sc-login-callback__loading", children: "Loading\u2026" })
-  ] }) });
+  }, [handleCallback]), /* @__PURE__ */ jsxs(LoginLayout, { header, footer, children: [
+    /* @__PURE__ */ jsx(Heading, { as: "h6", align: "center", children: "Logging you in\u2026" }),
+    /* @__PURE__ */ jsx(Flex, { paddingY: 5, align: "center", justify: "center", children: /* @__PURE__ */ jsx(Spinner, {}) })
+  ] });
 }
 function LoginError({
   error,
@@ -83,12 +108,10 @@ function LoginError({
   const logout = useLogOut(), handleRetry = useCallback(async () => {
     await logout(), resetErrorBoundary();
   }, [logout, resetErrorBoundary]);
-  return /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs("div", { className: "sc-login-error", children: [
-    /* @__PURE__ */ jsxs("div", { className: "sc-login-error__content", children: [
-      /* @__PURE__ */ jsx("h2", { className: "sc-login-error__title", children: "Authentication Error" }),
-      /* @__PURE__ */ jsx("p", { className: "sc-login-error__description", children: "Please try again or contact support if the problem persists." })
-    ] }),
-    /* @__PURE__ */ jsx("button", { className: "sc-login-error__button", onClick: handleRetry, children: "Retry" })
+  return /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs(Stack, { space: 5, marginBottom: 5, children: [
+    /* @__PURE__ */ jsx(Heading, { as: "h6", align: "center", children: "Authentication Error" }),
+    /* @__PURE__ */ jsx(Text, { align: "center", children: "Please try again or contact support if the problem persists." }),
+    /* @__PURE__ */ jsx(Button, { mode: "ghost", onClick: handleRetry, text: "Retry", fontSize: 2 })
   ] }) });
 }
 function AuthBoundary({

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":["../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/SanityApp.tsx"],"sourcesContent":["/**\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 */\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 {AuthError} from './AuthError'\nimport {Login} from './Login'\nimport {LoginCallback} from './LoginCallback'\nimport {LoginError, type LoginErrorProps} from './LoginError'\nimport {type LoginLayoutProps} from './LoginLayout'\n\n/**\n * @alpha\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 * @alpha\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 JSX} from 'react'\n\nimport {SanityProvider} from '../context/SanityProvider'\nimport {AuthBoundary} from './auth/AuthBoundary'\n\n/**\n * @public\n *\n * @returns Rendered child component wrapped in a SanityProvider and AuthBoundary\n */\nexport function SanityApp({\n  sanityConfig,\n  children,\n}: {\n  children: React.ReactNode\n  sanityConfig: SanityConfig\n}): JSX.Element {\n  const sanityInstance = createSanityInstance(sanityConfig)\n\n  return (\n    <SanityProvider sanityInstance={sanityInstance}>\n      <AuthBoundary>{children}</AuthBoundary>\n    </SanityProvider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAWO,MAAM,kBAAkB,MAAM;AAAA,EACnC,YAAY,OAAgB;AAExB,WAAO,SAAU,YACf,SACF,aAAa,SACb,OAAO,MAAM,WAAY,WAEzB,MAAM,MAAM,OAAO,IAEnB,MAAM,GAGR,KAAK,QAAQ;AAAA,EAAA;AAEjB;ACvBA,MAAM,QAAQ;AAAA,EACZ;AAAA,IACE,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAEX;AAQO,SAAS,cAA+B;AAE3C,SAAA,qBAAC,OAAI,EAAA,WAAU,mBACb,UAAA;AAAA,IAAC,oBAAA,YAAA,EAAW,WAAU,wBAAwB,CAAA;AAAA,IAE7C,oBAAA,MAAA,EAAG,WAAU,0BACX,UAAM,MAAA,IAAI,CAAC,SACT,oBAAA,UAAA,EACC,UAAC,oBAAA,MAAA,EAAG,WAAU,yBACZ,UAAA,oBAAC,KAAE,EAAA,MAAM,KAAK,KAAK,QAAO,UAAS,KAAI,uBACpC,UAAK,KAAA,OACR,EACF,CAAA,EAAA,GALa,KAAK,KAMpB,CACD,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;ACAO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,6BAAU,aAAY,EAAA;AAAA,EACtB;AACF,GAAsC;AACpC,6BACG,OAAI,EAAA,WAAU,mBACb,UAAC,qBAAA,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,MAAA,UAAW,oBAAA,OAAA,EAAI,WAAU,gCAAgC,UAAO,QAAA;AAAA,MAEhE,YAAY,oBAAC,OAAI,EAAA,WAAU,8BAA8B,SAAS,CAAA;AAAA,IAAA,GACrE;AAAA,IAEC;AAAA,EAAA,EAAA,CACH,EACF,CAAA;AAEJ;ACzDO,SAAS,MAAM,EAAC,QAAQ,UAAwC;AACrE,6BACG,aAAY,EAAA,QAAgB,QAC3B,UAAC,qBAAA,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAC,oBAAA,MAAA,EAAG,WAAU,mBAAkB,UAAqB,yBAAA;AAAA,IAErD,oBAAC,UAAS,EAAA,UAAW,oBAAA,OAAA,EAAI,WAAU,qBAAoB,UAAQ,gBAAA,CAAA,GAC7D,UAAC,oBAAA,WAAA,CAAA,CAAU,EACb,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEA,SAAS,YAAY;AACnB,QAAM,YAAY,aAAa;AAE/B,6BACG,OAAI,EAAA,WAAU,sBACZ,UAAU,UAAA,IAAI,CAAC,EAAC,OAAO,IAAG,0BACxB,KAAY,EAAA,MAAM,KAChB,UADK,MAAA,GAAA,GAER,CACD,GACH;AAEJ;ACxBO,SAAS,cAAc,EAAC,QAAQ,UAA4C;AACjF,QAAM,iBAAiB,kBAAkB;AAEzC,SAAA,UAAU,MAAM;AACd,UAAM,MAAM,IAAI,IAAI,SAAS,IAAI;AACjC,mBAAe,IAAI,SAAS,CAAC,EAAE,KAAK,CAAC,wBAAwB;AACvD,6BAGF,QAAQ,aAAa,MAAM,IAAI,mBAAmB;AAAA,IAAA,CAErD;AAAA,EACA,GAAA,CAAC,cAAc,CAAC,GAGjB,oBAAC,aAAY,EAAA,QAAgB,QAC3B,UAAA,qBAAC,OAAI,EAAA,WAAU,qBACb,UAAA;AAAA,IAAC,oBAAA,MAAA,EAAG,WAAU,4BAA2B,UAAe,wBAAA;AAAA,IACvD,oBAAA,OAAA,EAAI,WAAU,8BAA6B,UAAQ,gBAAA,CAAA;AAAA,EAAA,EAAA,CACtD,EACF,CAAA;AAEJ;ACjBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqC;AAC/B,MAAA,EAAE,iBAAiB,WAAkB,OAAA;AACzC,QAAM,SAAS,UAAA,GAET,cAAc,YAAY,YAAY;AACpC,UAAA,UACN,mBAAmB;AAAA,EAAA,GAClB,CAAC,QAAQ,kBAAkB,CAAC;AAE/B,6BACG,aAAY,EAAA,QAAgB,QAC3B,UAAC,qBAAA,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAC,oBAAA,MAAA,EAAG,WAAU,yBAAwB,UAAoB,wBAAA;AAAA,MACzD,oBAAA,KAAA,EAAE,WAAU,+BAA8B,UAE3C,+DAAA,CAAA;AAAA,IAAA,GACF;AAAA,wBAEC,UAAO,EAAA,WAAU,0BAAyB,SAAS,aAAa,UAEjE,QAAA,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;ACQO,SAAS,aAAa;AAAA,EAC3B,sBAAsB;AAAA,EACtB,GAAG;AACL,GAAuC;AAC/B,QAAA,EAAC,QAAQ,WAAU,OACnB,oBAAoB,QAAQ,MACzB,SAAuC,eAA8B;AAC1E,WAAQ,oBAAA,qBAAA,EAAqB,GAAG,eAAe,QAAgB,QAAgB;AAAA,EAEhF,GAAA,CAAC,QAAQ,QAAQ,mBAAmB,CAAC;AAExC,6BACG,eAAc,EAAA,mBACb,8BAAC,YAAY,EAAA,GAAG,MAAO,CAAA,GACzB;AAEJ;AAOA,SAAS,WAAW;AAAA,EAClB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,YAAY,aAAa;AAE/B,UAAQ,UAAU,MAAM;AAAA,IACtB,KAAK,cAAc;AACX,YAAA,IAAI,UAAU,UAAU,KAAK;AAAA,IAErC,KAAK,cAAc;AACV,aAAA,oBAAC,mBAAmB,EAAA,GAAG,MAAO,CAAA;AAAA,IAEvC,KAAK,cAAc;AACV,aAAA;AAAA,IAET;AACS,aAAA,oBAAC,gBAAgB,EAAA,GAAG,MAAO,CAAA;AAAA,EAAA;AAGxC;AC1FO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AACF,GAGgB;AACR,QAAA,iBAAiB,qBAAqB,YAAY;AAExD,6BACG,gBAAe,EAAA,gBACd,UAAC,oBAAA,cAAA,EAAc,SAAS,CAAA,GAC1B;AAEJ;"}
+{"version":3,"file":"components.js","sources":["../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/SanityApp.tsx"],"sourcesContent":["/**\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 {Box, Flex, Inline, Text} from '@sanity/ui'\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    <Box>\n      <Flex justify=\"center\">\n        <SanityLogo />\n      </Flex>\n\n      <Flex justify=\"center\">\n        <Inline space={2} paddingY={3}>\n          {LINKS.map((link) => (\n            <Text size={0} key={link.url}>\n              <a\n                href={link.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                style={{color: 'inherit'}}\n              >\n                {link.title}\n              </a>\n            </Text>\n          ))}\n        </Inline>\n      </Flex>\n    </Box>\n  )\n}\n","import {Card, Container} from '@sanity/ui'\n\nimport {LoginFooter} from './LoginFooter'\n\n/**\n * @alpha\n * @internal\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    <Container width={0}>\n      <Card shadow={1} radius={2} padding={4}>\n        {header && header}\n\n        {children && children}\n\n        {footer}\n      </Card>\n    </Container>\n  )\n}\n","import {Box, Button, Flex, Heading, Spinner, Stack} from '@sanity/ui'\nimport {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      <Heading as=\"h6\" align=\"center\">\n        Choose login provider:\n      </Heading>\n\n      <Suspense\n        fallback={\n          <Box padding={5}>\n            <Flex align=\"center\" justify=\"center\">\n              <Spinner />\n            </Flex>\n          </Box>\n        }\n      >\n        <Providers />\n      </Suspense>\n    </LoginLayout>\n  )\n}\n\nfunction Providers() {\n  const loginUrls = useLoginUrls()\n\n  return (\n    <Stack space={3} marginY={5}>\n      {loginUrls.map(({title, url}) => (\n        <Button\n          key={url}\n          as=\"a\"\n          href={url}\n          mode=\"ghost\"\n          text={title}\n          textAlign=\"center\"\n          fontSize={2}\n        ></Button>\n      ))}\n    </Stack>\n  )\n}\n","import {Flex, Heading, Spinner} from '@sanity/ui'\nimport {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      <Heading as=\"h6\" align=\"center\">\n        Logging you in…\n      </Heading>\n      <Flex paddingY={5} align=\"center\" justify=\"center\">\n        <Spinner />\n      </Flex>\n    </LoginLayout>\n  )\n}\n","import {Button, Heading, Stack, Text} from '@sanity/ui'\nimport {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      <Stack space={5} marginBottom={5}>\n        <Heading as=\"h6\" align=\"center\">\n          Authentication Error\n        </Heading>\n        <Text align=\"center\">Please try again or contact support if the problem persists.</Text>\n        <Button mode=\"ghost\" onClick={handleRetry} text=\"Retry\" fontSize={2} />\n      </Stack>\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 {AuthError} from './AuthError'\nimport {Login} from './Login'\nimport {LoginCallback} from './LoginCallback'\nimport {LoginError, type LoginErrorProps} from './LoginError'\nimport {type LoginLayoutProps} from './LoginLayout'\n\n/**\n * @alpha\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 * @alpha\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 JSX} from 'react'\n\nimport {SanityProvider} from '../context/SanityProvider'\nimport {AuthBoundary} from './auth/AuthBoundary'\n\n/**\n * @public\n *\n * @returns Rendered child component wrapped in a SanityProvider and AuthBoundary\n */\nexport function SanityApp({\n  sanityConfig,\n  children,\n}: {\n  children: React.ReactNode\n  sanityConfig: SanityConfig\n}): JSX.Element {\n  const sanityInstance = createSanityInstance(sanityConfig)\n\n  return (\n    <SanityProvider sanityInstance={sanityInstance}>\n      <AuthBoundary>{children}</AuthBoundary>\n    </SanityProvider>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/hooks.d.ts

@@ -8,6 +8,22 @@ import {PreviewValue} from '@sanity/sdk'
 import {SanityInstance} from '@sanity/sdk'
 import {WindowMessage} from '@sanity/sdk'
 
+/**
+ * @public
+ */
+export declare interface DocumentCollection {
+  /** Retrieve more documents matching the provided options */
+  loadMore: () => void
+  /** The retrieved document handles of the documents matching the provided options */
+  results: DocumentHandle[]
+  /** Whether a retrieval of documents is in flight */
+  isPending: boolean
+  /** Whether more documents exist that match the provided options than have been retrieved */
+  hasMore: boolean
+  /** The total number of documents in the collection */
+  count: number
+}
+
 /**
  * @public
  */
@@ -80,24 +96,56 @@ export declare const useCurrentUser: () => CurrentUser | null
 
 /**
  * @public
- */
-export declare interface UseDocuments {
-  loadMore: () => void
-  results: DocumentHandle[]
-  isPending: boolean
-  hasMore: boolean
-  count: number
-}
-
-/**
- * Hook to get the list of documents for specified options
  *
- * @public
+ * The `useDocuments` hook retrieves and provides access to a live collection of documents, optionally filtered, sorted, and matched to a given Content Lake perspective.
+ * Because the returned document collection is live, the results will update in real time until the component invoking the hook is unmounted.
  *
- * @param options - options for the document list
- * @returns result of the document list and function to load more
+ * @param options - Options for narrowing and sorting the document collection
+ * @returns The collection of documents matching the provided options (if any), as well as properties describing the collection and a function to load more.
+ *
+ * @example Retrieving all documents of type 'movie'
+ * ```
+ * const { results, isPending } = useDocuments({ filter: '_type == "movie"' })
+ *
+ * return (
+ *   <div>
+ *     <h1>Movies</h1>
+ *     {results && (
+ *       <ul>
+ *         {results.map(movie => (<li key={movie._id}>…</li>))}
+ *       </ul>
+ *     )}
+ *     {isPending && <div>Loading movies…</div>}
+ *   </div>
+ * )
+ * ```
+ *
+ * @example Retrieving all movies released since 1980, sorted by director’s last name
+ * ```
+ * const { results } = useDocuments({
+ *   filter: '_type == "movie" && releaseDate >= "1980-01-01"',
+ *   sort: [
+ *     {
+ *       // Expand the `director` reference field with the dereferencing operator `->`
+ *       field: 'director->lastName',
+ *       sort: 'asc',
+ *     },
+ *   ],
+ * })
+ *
+ * return (
+ *   <div>
+ *      <h1>Movies released since 1980</h1>
+ *      {results && (
+ *        <ol>
+ *          {results.map(movie => (<li key={movie._id}>…</li>))}
+ *        </ol>
+ *     )}
+ *   </div>
+ * )
+ * ```
  */
-export declare function useDocuments(options?: DocumentListOptions): UseDocuments
+export declare function useDocuments(options?: DocumentListOptions): DocumentCollection
 
 /**
  * @public
@@ -209,18 +257,68 @@ export declare const useLogOut: () => () => Promise<void>
 
 /**
  * @alpha
+ *
+ * The `usePreview` hook takes a document (via a `DocumentHandle`) and returns its resolved preview values,
+ * including the document’s `title`, `subtitle`, `media`, and `status`. These values are live and will update in realtime.
+ * To reduce unnecessary network requests for resolving the preview values, an optional `ref` can be passed to the hook so that preview
+ * resolution will only occur if the `ref` is intersecting the current viewport.
+ *
+ * @param options - The document handle for the document you want to resolve preview values for, and an optional ref
+ * @returns The preview values for the given document and a boolean to indicate whether the resolution is pending
+ *
+ * @example Combining with useDocuments to render a collection of document previews
+ * ```
+ * // PreviewComponent.jsx
+ * export default function PreviewComponent({ document }) {
+ *   const { results: { title, subtitle, media }, isPending } = usePreview({ document })
+ *   return isPending ? 'Loading…' : (
+ *     <article>
+ *       {media?.type === 'image-asset' ? <img src={media.url} alt='' /> : ''}
+ *       <h2>{title}</h2>
+ *       <p>{subtitle}</p>
+ *     </article>
+ *   )
+ * }
+ *
+ * // DocumentList.jsx
+ * const { results, isPending } = useDocuments({ filter: '_type == "movie"' })
+ * return (
+ *   <div>
+ *     <h1>Movies</h1>
+ *     <ul>
+ *       {isPending ? 'Loading…' : results.map(movie => (
+ *         <li key={movie._id}>
+ *           <Suspense fallback='Loading…'>
+ *             <PreviewComponent document={movie} />
+ *           </Suspense>
+ *         </li>
+ *       ))}
+ *     </ul>
+ *   </div>
+ * )
+ * ```
  */
 export declare function usePreview({
   document: {_id, _type},
   ref,
-}: UsePreviewOptions): [PreviewValue, boolean]
+}: UsePreviewOptions): UsePreviewResults
 
 /**
  * @alpha
  */
 export declare interface UsePreviewOptions {
   document: DocumentHandle
-  ref: HTMLElement | null
+  ref?: React.RefObject<unknown>
+}
+
+/**
+ * @alpha
+ */
+export declare interface UsePreviewResults {
+  /** The results of resolving the document’s preview values */
+  results: PreviewValue
+  /** True when preview values are being refreshed */
+  isPending: boolean
 }
 
 /**

package/dist/hooks.js

@@ -104,22 +104,20 @@ function useDocuments(options = {}) {
     ref.storeInstance?.loadMore();
   }, [ref]), ...state };
 }
-function usePreview({
-  document: { _id, _type },
-  ref
-}) {
+function usePreview({ document: { _id, _type }, ref }) {
   const instance = useSanityInstance(), stateSource = useMemo(
     () => getPreviewState(instance, { document: { _id, _type } }),
     [instance, _id, _type]
   ), subscribe = useCallback(
     (onStoreChanged) => {
       const subscription = new Observable((observer) => {
-        if (typeof IntersectionObserver > "u") return;
+        if (typeof IntersectionObserver > "u" || typeof HTMLElement > "u")
+          return;
         const intersectionObserver = new IntersectionObserver(
           ([entry]) => observer.next(entry.isIntersecting),
           { rootMargin: "0px", threshold: 0 }
         );
-        return ref && intersectionObserver.observe(ref), () => intersectionObserver.disconnect();
+        return ref?.current && ref.current instanceof HTMLElement && intersectionObserver.observe(ref.current), () => intersectionObserver.disconnect();
       }).pipe(
         startWith(!1),
         distinctUntilChanged(),
@@ -131,9 +129,9 @@ function usePreview({
     },
     [stateSource, ref]
   ), getSnapshot = useCallback(() => {
-    const previewTuple = stateSource.getCurrent();
-    if (!previewTuple[0]) throw resolvePreview(instance, { document: { _id, _type } });
-    return previewTuple;
+    const currentState = stateSource.getCurrent();
+    if (currentState.results === null) throw resolvePreview(instance, { document: { _id, _type } });
+    return currentState;
   }, [_id, _type, instance, stateSource]);
   return useSyncExternalStore(subscribe, getSnapshot);
 }

package/dist/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../src/hooks/auth/useAuthToken.tsx","../src/hooks/auth/useCurrentUser.tsx","../src/hooks/comlink/useFrameConnection.ts","../src/hooks/comlink/useWindowConnection.ts","../src/hooks/documentCollection/useDocuments.ts","../src/hooks/preview/usePreview.tsx"],"sourcesContent":["import {getTokenState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\n * Hook to get the currently logged in user\n * @public\n * @returns The current user or null if not authenticated\n */\nexport const useAuthToken = createStateSourceHook(getTokenState)\n","import {getCurrentUserState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\n * Hook to get the currently logged in user\n * @public\n * @returns The current user or null if not authenticated\n */\nexport const useCurrentUser = createStateSourceHook(getCurrentUserState)\n","import {\n  type FrameMessage,\n  getOrCreateChannel,\n  getOrCreateController,\n  releaseChannel,\n  type WindowMessage,\n} from '@sanity/sdk'\nimport {useCallback, useEffect, useMemo} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @public\n */\nexport type FrameMessageHandler<TWindowMessage extends WindowMessage> = (\n  event: TWindowMessage['data'],\n) => TWindowMessage['response'] | Promise<TWindowMessage['response']>\n\n/**\n * @public\n */\nexport interface UseFrameConnectionOptions<TWindowMessage extends WindowMessage> {\n  name: string\n  connectTo: string\n  targetOrigin: string\n  onMessage?: Record<string, FrameMessageHandler<TWindowMessage>>\n}\n\n/**\n * @public\n */\nexport interface FrameConnection<TFrameMessage extends FrameMessage> {\n  connect: (frameWindow: Window) => () => void // Return cleanup function\n  sendMessage: <T extends TFrameMessage['type']>(\n    ...params: Extract<TFrameMessage, {type: T}>['data'] extends undefined\n      ? [type: T]\n      : [type: T, data: Extract<TFrameMessage, {type: T}>['data']]\n  ) => void\n}\n\n/**\n * @public\n */\nexport function useFrameConnection<\n  TFrameMessage extends FrameMessage,\n  TWindowMessage extends WindowMessage,\n>(options: UseFrameConnectionOptions<TWindowMessage>): FrameConnection<TFrameMessage> {\n  const {onMessage, targetOrigin, name, connectTo} = options\n  const instance = useSanityInstance()\n\n  const controller = useMemo(\n    () => getOrCreateController(instance, targetOrigin),\n    [instance, targetOrigin],\n  )\n\n  const channel = useMemo(\n    () =>\n      getOrCreateChannel(instance, {\n        name,\n        connectTo,\n      }),\n    [instance, name, connectTo],\n  )\n\n  useEffect(() => {\n    if (!channel || !onMessage) return\n\n    const unsubscribers: Array<() => void> = []\n\n    Object.entries(onMessage).forEach(([type, handler]) => {\n      const unsubscribe = channel.on(type, handler)\n      unsubscribers.push(unsubscribe)\n    })\n\n    return () => {\n      unsubscribers.forEach((unsub) => unsub())\n    }\n  }, [channel, onMessage])\n\n  const connect = useCallback(\n    (frameWindow: Window) => {\n      const removeTarget = controller?.addTarget(frameWindow)\n      return () => {\n        removeTarget?.()\n      }\n    },\n    [controller],\n  )\n\n  const sendMessage = useCallback(\n    <T extends TFrameMessage['type']>(\n      type: T,\n      data?: Extract<TFrameMessage, {type: T}>['data'],\n    ) => {\n      channel?.post(type, data)\n    },\n    [channel],\n  )\n\n  // cleanup channel on unmount\n  useEffect(() => {\n    return () => {\n      releaseChannel(instance, name)\n    }\n  }, [name, instance])\n\n  return {\n    connect,\n    sendMessage,\n  }\n}\n","import {type FrameMessage, getOrCreateNode, releaseNode, type WindowMessage} from '@sanity/sdk'\nimport {useCallback, useEffect, useMemo} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @public\n */\nexport type WindowMessageHandler<TFrameMessage extends FrameMessage> = (\n  event: TFrameMessage['data'],\n) => TFrameMessage['response']\n\n/**\n * @public\n */\nexport interface UseWindowConnectionOptions<TMessage extends FrameMessage> {\n  name: string\n  connectTo: string\n  onMessage?: Record<TMessage['type'], WindowMessageHandler<TMessage>>\n}\n\n/**\n * @public\n */\nexport interface WindowConnection<TMessage extends WindowMessage> {\n  sendMessage: <TType extends TMessage['type']>(\n    type: TType,\n    data?: Extract<TMessage, {type: TType}>['data'],\n  ) => void\n}\n\n/**\n * @public\n */\nexport function useWindowConnection<\n  TWindowMessage extends WindowMessage,\n  TFrameMessage extends FrameMessage,\n>(options: UseWindowConnectionOptions<TFrameMessage>): WindowConnection<TWindowMessage> {\n  const {name, onMessage, connectTo} = options\n  const instance = useSanityInstance()\n\n  const node = useMemo(\n    () => getOrCreateNode(instance, {name, connectTo}),\n    [instance, name, connectTo],\n  )\n\n  useEffect(() => {\n    if (!onMessage) return\n\n    const unsubscribers: Array<() => void> = []\n\n    Object.entries(onMessage).forEach(([type, handler]) => {\n      const unsubscribe = node.on(type, handler as WindowMessageHandler<TFrameMessage>)\n      unsubscribers.push(unsubscribe)\n    })\n\n    return () => {\n      unsubscribers.forEach((unsub) => unsub())\n    }\n  }, [node, onMessage])\n\n  const sendMessage = useCallback(\n    <TType extends WindowMessage['type']>(\n      type: TType,\n      data?: Extract<WindowMessage, {type: TType}>['data'],\n    ) => {\n      node?.post(type, data)\n    },\n    [node],\n  )\n\n  // cleanup node on unmount\n  useEffect(() => {\n    return () => {\n      releaseNode(instance, name)\n    }\n  }, [instance, name])\n\n  return {\n    sendMessage,\n  }\n}\n","import {createDocumentListStore, type DocumentHandle, type DocumentListOptions} from '@sanity/sdk'\nimport {useCallback, useEffect, useState, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @public\n */\nexport interface UseDocuments {\n  loadMore: () => void\n  results: DocumentHandle[]\n  isPending: boolean\n  hasMore: boolean\n  count: number\n}\n\ntype DocumentListStore = ReturnType<typeof createDocumentListStore>\ntype DocumentListState = ReturnType<DocumentListStore['getState']>['getCurrent']\nconst STABLE_EMPTY = {\n  results: [],\n  isPending: false,\n  hasMore: false,\n  count: 0,\n}\n\n/**\n * Hook to get the list of documents for specified options\n *\n * @public\n *\n * @param options - options for the document list\n * @returns result of the document list and function to load more\n */\nexport function useDocuments(options: DocumentListOptions = {}): UseDocuments {\n  const instance = useSanityInstance()\n\n  // NOTE: useState is used because it guaranteed to return a stable reference\n  // across renders\n  const [ref] = useState<{\n    storeInstance: DocumentListStore | null\n    getCurrent: DocumentListState\n    initialOptions: DocumentListOptions\n  }>(() => ({\n    storeInstance: null,\n    getCurrent: () => STABLE_EMPTY,\n    initialOptions: options,\n  }))\n\n  // serialize options to ensure it only calls `setOptions` when the values\n  // themselves changes (in cases where devs put config inline)\n  const serializedOptions = JSON.stringify(options)\n  useEffect(() => {\n    ref.storeInstance?.setOptions(JSON.parse(serializedOptions))\n  }, [ref, serializedOptions])\n\n  const subscribe = useCallback(\n    (onStoreChanged: () => void) => {\n      // to match the lifecycle of `useSyncExternalState`, we create the store\n      // instance after subscribe and mutate the ref to connect everything\n      ref.storeInstance = createDocumentListStore(instance)\n      ref.storeInstance.setOptions(ref.initialOptions)\n      const state = ref.storeInstance.getState()\n      ref.getCurrent = state.getCurrent\n      const unsubscribe = state.subscribe(onStoreChanged)\n\n      return () => {\n        // unsubscribe to clean up the state subscriptions\n        unsubscribe()\n        // dispose of the instance\n        ref.storeInstance?.dispose()\n      }\n    },\n    [instance, ref],\n  )\n\n  const getSnapshot = useCallback(() => {\n    return ref.getCurrent()\n  }, [ref])\n\n  const state = useSyncExternalStore(subscribe, getSnapshot)\n\n  const loadMore = useCallback(() => {\n    ref.storeInstance?.loadMore()\n  }, [ref])\n\n  return {loadMore, ...state}\n}\n","import {type DocumentHandle, getPreviewState, type PreviewValue, resolvePreview} from '@sanity/sdk'\nimport {useCallback, useMemo, useSyncExternalStore} from 'react'\nimport {distinctUntilChanged, EMPTY, Observable, startWith, switchMap} from 'rxjs'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @alpha\n */\nexport interface UsePreviewOptions {\n  document: DocumentHandle\n  ref: HTMLElement | null\n}\n\n/**\n * @alpha\n */\nexport function usePreview({\n  document: {_id, _type},\n  ref,\n}: UsePreviewOptions): [PreviewValue, boolean] {\n  const instance = useSanityInstance()\n\n  const stateSource = useMemo(\n    () => getPreviewState(instance, {document: {_id, _type}}),\n    [instance, _id, _type],\n  )\n\n  // Create subscribe function for useSyncExternalStore\n  const subscribe = useCallback(\n    (onStoreChanged: () => void) => {\n      const subscription = new Observable<boolean>((observer) => {\n        // for environments that don't have an intersection observer\n        if (typeof IntersectionObserver === 'undefined') return\n\n        const intersectionObserver = new IntersectionObserver(\n          ([entry]) => observer.next(entry.isIntersecting),\n          {rootMargin: '0px', threshold: 0},\n        )\n        if (ref) intersectionObserver.observe(ref)\n        return () => intersectionObserver.disconnect()\n      })\n        .pipe(\n          startWith(false),\n          distinctUntilChanged(),\n          switchMap((isVisible) =>\n            isVisible\n              ? new Observable<void>((obs) => {\n                  return stateSource.subscribe(() => obs.next())\n                })\n              : EMPTY,\n          ),\n        )\n        .subscribe({next: onStoreChanged})\n\n      return () => subscription.unsubscribe()\n    },\n    [stateSource, ref],\n  )\n\n  // Create getSnapshot function to return current state\n  const getSnapshot = useCallback(() => {\n    const previewTuple = stateSource.getCurrent()\n    if (!previewTuple[0]) throw resolvePreview(instance, {document: {_id, _type}})\n    return previewTuple as [PreviewValue, boolean]\n  }, [_id, _type, instance, stateSource])\n\n  return useSyncExternalStore(subscribe, getSnapshot)\n}\n"],"names":["state"],"mappings":"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"}
+{"version":3,"file":"hooks.js","sources":["../src/hooks/auth/useAuthToken.tsx","../src/hooks/auth/useCurrentUser.tsx","../src/hooks/comlink/useFrameConnection.ts","../src/hooks/comlink/useWindowConnection.ts","../src/hooks/documentCollection/useDocuments.ts","../src/hooks/preview/usePreview.tsx"],"sourcesContent":["import {getTokenState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\n * Hook to get the currently logged in user\n * @public\n * @returns The current user or null if not authenticated\n */\nexport const useAuthToken = createStateSourceHook(getTokenState)\n","import {getCurrentUserState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\n * Hook to get the currently logged in user\n * @public\n * @returns The current user or null if not authenticated\n */\nexport const useCurrentUser = createStateSourceHook(getCurrentUserState)\n","import {\n  type FrameMessage,\n  getOrCreateChannel,\n  getOrCreateController,\n  releaseChannel,\n  type WindowMessage,\n} from '@sanity/sdk'\nimport {useCallback, useEffect, useMemo} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @public\n */\nexport type FrameMessageHandler<TWindowMessage extends WindowMessage> = (\n  event: TWindowMessage['data'],\n) => TWindowMessage['response'] | Promise<TWindowMessage['response']>\n\n/**\n * @public\n */\nexport interface UseFrameConnectionOptions<TWindowMessage extends WindowMessage> {\n  name: string\n  connectTo: string\n  targetOrigin: string\n  onMessage?: Record<string, FrameMessageHandler<TWindowMessage>>\n}\n\n/**\n * @public\n */\nexport interface FrameConnection<TFrameMessage extends FrameMessage> {\n  connect: (frameWindow: Window) => () => void // Return cleanup function\n  sendMessage: <T extends TFrameMessage['type']>(\n    ...params: Extract<TFrameMessage, {type: T}>['data'] extends undefined\n      ? [type: T]\n      : [type: T, data: Extract<TFrameMessage, {type: T}>['data']]\n  ) => void\n}\n\n/**\n * @public\n */\nexport function useFrameConnection<\n  TFrameMessage extends FrameMessage,\n  TWindowMessage extends WindowMessage,\n>(options: UseFrameConnectionOptions<TWindowMessage>): FrameConnection<TFrameMessage> {\n  const {onMessage, targetOrigin, name, connectTo} = options\n  const instance = useSanityInstance()\n\n  const controller = useMemo(\n    () => getOrCreateController(instance, targetOrigin),\n    [instance, targetOrigin],\n  )\n\n  const channel = useMemo(\n    () =>\n      getOrCreateChannel(instance, {\n        name,\n        connectTo,\n      }),\n    [instance, name, connectTo],\n  )\n\n  useEffect(() => {\n    if (!channel || !onMessage) return\n\n    const unsubscribers: Array<() => void> = []\n\n    Object.entries(onMessage).forEach(([type, handler]) => {\n      const unsubscribe = channel.on(type, handler)\n      unsubscribers.push(unsubscribe)\n    })\n\n    return () => {\n      unsubscribers.forEach((unsub) => unsub())\n    }\n  }, [channel, onMessage])\n\n  const connect = useCallback(\n    (frameWindow: Window) => {\n      const removeTarget = controller?.addTarget(frameWindow)\n      return () => {\n        removeTarget?.()\n      }\n    },\n    [controller],\n  )\n\n  const sendMessage = useCallback(\n    <T extends TFrameMessage['type']>(\n      type: T,\n      data?: Extract<TFrameMessage, {type: T}>['data'],\n    ) => {\n      channel?.post(type, data)\n    },\n    [channel],\n  )\n\n  // cleanup channel on unmount\n  useEffect(() => {\n    return () => {\n      releaseChannel(instance, name)\n    }\n  }, [name, instance])\n\n  return {\n    connect,\n    sendMessage,\n  }\n}\n","import {type FrameMessage, getOrCreateNode, releaseNode, type WindowMessage} from '@sanity/sdk'\nimport {useCallback, useEffect, useMemo} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @public\n */\nexport type WindowMessageHandler<TFrameMessage extends FrameMessage> = (\n  event: TFrameMessage['data'],\n) => TFrameMessage['response']\n\n/**\n * @public\n */\nexport interface UseWindowConnectionOptions<TMessage extends FrameMessage> {\n  name: string\n  connectTo: string\n  onMessage?: Record<TMessage['type'], WindowMessageHandler<TMessage>>\n}\n\n/**\n * @public\n */\nexport interface WindowConnection<TMessage extends WindowMessage> {\n  sendMessage: <TType extends TMessage['type']>(\n    type: TType,\n    data?: Extract<TMessage, {type: TType}>['data'],\n  ) => void\n}\n\n/**\n * @public\n */\nexport function useWindowConnection<\n  TWindowMessage extends WindowMessage,\n  TFrameMessage extends FrameMessage,\n>(options: UseWindowConnectionOptions<TFrameMessage>): WindowConnection<TWindowMessage> {\n  const {name, onMessage, connectTo} = options\n  const instance = useSanityInstance()\n\n  const node = useMemo(\n    () => getOrCreateNode(instance, {name, connectTo}),\n    [instance, name, connectTo],\n  )\n\n  useEffect(() => {\n    if (!onMessage) return\n\n    const unsubscribers: Array<() => void> = []\n\n    Object.entries(onMessage).forEach(([type, handler]) => {\n      const unsubscribe = node.on(type, handler as WindowMessageHandler<TFrameMessage>)\n      unsubscribers.push(unsubscribe)\n    })\n\n    return () => {\n      unsubscribers.forEach((unsub) => unsub())\n    }\n  }, [node, onMessage])\n\n  const sendMessage = useCallback(\n    <TType extends WindowMessage['type']>(\n      type: TType,\n      data?: Extract<WindowMessage, {type: TType}>['data'],\n    ) => {\n      node?.post(type, data)\n    },\n    [node],\n  )\n\n  // cleanup node on unmount\n  useEffect(() => {\n    return () => {\n      releaseNode(instance, name)\n    }\n  }, [instance, name])\n\n  return {\n    sendMessage,\n  }\n}\n","import {createDocumentListStore, type DocumentHandle, type DocumentListOptions} from '@sanity/sdk'\nimport {useCallback, useEffect, useState, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @public\n */\nexport interface DocumentCollection {\n  /** Retrieve more documents matching the provided options */\n  loadMore: () => void\n  /** The retrieved document handles of the documents matching the provided options */\n  results: DocumentHandle[]\n  /** Whether a retrieval of documents is in flight */\n  isPending: boolean\n  /** Whether more documents exist that match the provided options than have been retrieved */\n  hasMore: boolean\n  /** The total number of documents in the collection */\n  count: number\n}\n\ntype DocumentListStore = ReturnType<typeof createDocumentListStore>\ntype DocumentListState = ReturnType<DocumentListStore['getState']>['getCurrent']\nconst STABLE_EMPTY = {\n  results: [],\n  isPending: false,\n  hasMore: false,\n  count: 0,\n}\n\n/**\n * @public\n *\n * The `useDocuments` hook retrieves and provides access to a live collection of documents, optionally filtered, sorted, and matched to a given Content Lake perspective.\n * Because the returned document collection is live, the results will update in real time until the component invoking the hook is unmounted.\n *\n * @param options - Options for narrowing and sorting the document collection\n * @returns The collection of documents matching the provided options (if any), as well as properties describing the collection and a function to load more.\n *\n * @example Retrieving all documents of type 'movie'\n * ```\n * const { results, isPending } = useDocuments({ filter: '_type == \"movie\"' })\n *\n * return (\n *   <div>\n *     <h1>Movies</h1>\n *     {results && (\n *       <ul>\n *         {results.map(movie => (<li key={movie._id}>…</li>))}\n *       </ul>\n *     )}\n *     {isPending && <div>Loading movies…</div>}\n *   </div>\n * )\n * ```\n *\n * @example Retrieving all movies released since 1980, sorted by director’s last name\n * ```\n * const { results } = useDocuments({\n *   filter: '_type == \"movie\" && releaseDate >= \"1980-01-01\"',\n *   sort: [\n *     {\n *       // Expand the `director` reference field with the dereferencing operator `->`\n *       field: 'director->lastName',\n *       sort: 'asc',\n *     },\n *   ],\n * })\n *\n * return (\n *   <div>\n *      <h1>Movies released since 1980</h1>\n *      {results && (\n *        <ol>\n *          {results.map(movie => (<li key={movie._id}>…</li>))}\n *        </ol>\n *     )}\n *   </div>\n * )\n * ```\n */\nexport function useDocuments(options: DocumentListOptions = {}): DocumentCollection {\n  const instance = useSanityInstance()\n\n  // NOTE: useState is used because it guaranteed to return a stable reference\n  // across renders\n  const [ref] = useState<{\n    storeInstance: DocumentListStore | null\n    getCurrent: DocumentListState\n    initialOptions: DocumentListOptions\n  }>(() => ({\n    storeInstance: null,\n    getCurrent: () => STABLE_EMPTY,\n    initialOptions: options,\n  }))\n\n  // serialize options to ensure it only calls `setOptions` when the values\n  // themselves changes (in cases where devs put config inline)\n  const serializedOptions = JSON.stringify(options)\n  useEffect(() => {\n    ref.storeInstance?.setOptions(JSON.parse(serializedOptions))\n  }, [ref, serializedOptions])\n\n  const subscribe = useCallback(\n    (onStoreChanged: () => void) => {\n      // to match the lifecycle of `useSyncExternalState`, we create the store\n      // instance after subscribe and mutate the ref to connect everything\n      ref.storeInstance = createDocumentListStore(instance)\n      ref.storeInstance.setOptions(ref.initialOptions)\n      const state = ref.storeInstance.getState()\n      ref.getCurrent = state.getCurrent\n      const unsubscribe = state.subscribe(onStoreChanged)\n\n      return () => {\n        // unsubscribe to clean up the state subscriptions\n        unsubscribe()\n        // dispose of the instance\n        ref.storeInstance?.dispose()\n      }\n    },\n    [instance, ref],\n  )\n\n  const getSnapshot = useCallback(() => {\n    return ref.getCurrent()\n  }, [ref])\n\n  const state = useSyncExternalStore(subscribe, getSnapshot)\n\n  const loadMore = useCallback(() => {\n    ref.storeInstance?.loadMore()\n  }, [ref])\n\n  return {loadMore, ...state}\n}\n","import {type DocumentHandle, getPreviewState, type PreviewValue, resolvePreview} from '@sanity/sdk'\nimport {useCallback, useMemo, useSyncExternalStore} from 'react'\nimport {distinctUntilChanged, EMPTY, Observable, startWith, switchMap} from 'rxjs'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @alpha\n */\nexport interface UsePreviewOptions {\n  document: DocumentHandle\n  ref?: React.RefObject<unknown>\n}\n\n/**\n * @alpha\n */\nexport interface UsePreviewResults {\n  /** The results of resolving the document’s preview values */\n  results: PreviewValue\n  /** True when preview values are being refreshed */\n  isPending: boolean\n}\n\n/**\n * @alpha\n *\n * The `usePreview` hook takes a document (via a `DocumentHandle`) and returns its resolved preview values,\n * including the document’s `title`, `subtitle`, `media`, and `status`. These values are live and will update in realtime.\n * To reduce unnecessary network requests for resolving the preview values, an optional `ref` can be passed to the hook so that preview\n * resolution will only occur if the `ref` is intersecting the current viewport.\n *\n * @param options - The document handle for the document you want to resolve preview values for, and an optional ref\n * @returns The preview values for the given document and a boolean to indicate whether the resolution is pending\n *\n * @example Combining with useDocuments to render a collection of document previews\n * ```\n * // PreviewComponent.jsx\n * export default function PreviewComponent({ document }) {\n *   const { results: { title, subtitle, media }, isPending } = usePreview({ document })\n *   return isPending ? 'Loading…' : (\n *     <article>\n *       {media?.type === 'image-asset' ? <img src={media.url} alt='' /> : ''}\n *       <h2>{title}</h2>\n *       <p>{subtitle}</p>\n *     </article>\n *   )\n * }\n *\n * // DocumentList.jsx\n * const { results, isPending } = useDocuments({ filter: '_type == \"movie\"' })\n * return (\n *   <div>\n *     <h1>Movies</h1>\n *     <ul>\n *       {isPending ? 'Loading…' : results.map(movie => (\n *         <li key={movie._id}>\n *           <Suspense fallback='Loading…'>\n *             <PreviewComponent document={movie} />\n *           </Suspense>\n *         </li>\n *       ))}\n *     </ul>\n *   </div>\n * )\n * ```\n */\nexport function usePreview({document: {_id, _type}, ref}: UsePreviewOptions): UsePreviewResults {\n  const instance = useSanityInstance()\n\n  const stateSource = useMemo(\n    () => getPreviewState(instance, {document: {_id, _type}}),\n    [instance, _id, _type],\n  )\n\n  // Create subscribe function for useSyncExternalStore\n  const subscribe = useCallback(\n    (onStoreChanged: () => void) => {\n      const subscription = new Observable<boolean>((observer) => {\n        // for environments that don't have an intersection observer\n        if (typeof IntersectionObserver === 'undefined' || typeof HTMLElement === 'undefined') {\n          return\n        }\n\n        const intersectionObserver = new IntersectionObserver(\n          ([entry]) => observer.next(entry.isIntersecting),\n          {rootMargin: '0px', threshold: 0},\n        )\n        if (ref?.current && ref.current instanceof HTMLElement) {\n          intersectionObserver.observe(ref.current)\n        }\n        return () => intersectionObserver.disconnect()\n      })\n        .pipe(\n          startWith(false),\n          distinctUntilChanged(),\n          switchMap((isVisible) =>\n            isVisible\n              ? new Observable<void>((obs) => {\n                  return stateSource.subscribe(() => obs.next())\n                })\n              : EMPTY,\n          ),\n        )\n        .subscribe({next: onStoreChanged})\n\n      return () => subscription.unsubscribe()\n    },\n    [stateSource, ref],\n  )\n\n  // Create getSnapshot function to return current state\n  const getSnapshot = useCallback(() => {\n    const currentState = stateSource.getCurrent()\n    if (currentState.results === null) throw resolvePreview(instance, {document: {_id, _type}})\n    return currentState as UsePreviewResults\n  }, [_id, _type, instance, stateSource])\n\n  return useSyncExternalStore(subscribe, getSnapshot)\n}\n"],"names":["state"],"mappings":"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"}