sanity 3.83.1-canary.23 → 3.84.1-next.0

package/lib/presentation.js

@@ -1,6 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
 var presentation = require("./_chunks-cjs/presentation.js");
+exports.ACTION_IFRAME_LOADED = presentation.ACTION_IFRAME_LOADED;
+exports.ACTION_IFRAME_REFRESH = presentation.ACTION_IFRAME_REFRESH;
+exports.ACTION_IFRAME_RELOAD = presentation.ACTION_IFRAME_RELOAD;
+exports.ACTION_VISUAL_EDITING_OVERLAYS_TOGGLE = presentation.ACTION_VISUAL_EDITING_OVERLAYS_TOGGLE;
 exports.defineDocuments = presentation.defineDocuments;
 exports.defineLocations = presentation.defineLocations;
 exports.presentationTool = presentation.presentationTool;

package/lib/presentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"presentation.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/lib/presentation.mjs

@@ -1,5 +1,9 @@
-import { defineDocuments, defineLocations, presentationTool, usePresentationNavigate, usePresentationParams, useSharedState } from "./_chunks-es/presentation.mjs";
+import { ACTION_IFRAME_LOADED, ACTION_IFRAME_REFRESH, ACTION_IFRAME_RELOAD, ACTION_VISUAL_EDITING_OVERLAYS_TOGGLE, defineDocuments, defineLocations, presentationTool, usePresentationNavigate, usePresentationParams, useSharedState } from "./_chunks-es/presentation.mjs";
 export {
+  ACTION_IFRAME_LOADED,
+  ACTION_IFRAME_REFRESH,
+  ACTION_IFRAME_RELOAD,
+  ACTION_VISUAL_EDITING_OVERLAYS_TOGGLE,
   defineDocuments,
   defineLocations,
   presentationTool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity",
-  "version": "3.83.1-canary.23+2bb4c143a9",
+  "version": "3.84.1-next.0",
   "description": "Sanity is a real-time content infrastructure with a scalable, hosted backend featuring a Graph Oriented Query Language (GROQ), asset pipelines and fast edge caches",
   "keywords": [
     "sanity",
@@ -156,11 +156,11 @@
     "@rexxars/react-json-inspector": "^9.0.1",
     "@sanity/asset-utils": "^2.0.6",
     "@sanity/bifur-client": "^0.4.1",
-    "@sanity/cli": "3.83.1-canary.23+2bb4c143a9",
+    "@sanity/cli": "3.84.1-next.0",
     "@sanity/client": "^6.28.4",
     "@sanity/color": "^3.0.0",
     "@sanity/comlink": "^3.0.1",
-    "@sanity/diff": "3.83.1-canary.23+2bb4c143a9",
+    "@sanity/diff": "3.84.1-next.0",
     "@sanity/diff-match-patch": "^3.1.1",
     "@sanity/diff-patch": "^5.0.0",
     "@sanity/eventsource": "^5.0.0",
@@ -170,15 +170,15 @@
     "@sanity/import": "^3.38.2",
     "@sanity/insert-menu": "^1.1.9",
     "@sanity/logos": "^2.1.13",
-    "@sanity/migrate": "3.83.1-canary.23+2bb4c143a9",
-    "@sanity/mutator": "3.83.1-canary.23+2bb4c143a9",
+    "@sanity/migrate": "3.84.1-next.0",
+    "@sanity/mutator": "3.84.1-next.0",
     "@sanity/presentation-comlink": "^1.0.15",
     "@sanity/preview-url-secret": "^2.1.7",
-    "@sanity/schema": "3.83.1-canary.23+2bb4c143a9",
+    "@sanity/schema": "3.84.1-next.0",
     "@sanity/telemetry": "^0.8.0",
-    "@sanity/types": "3.83.1-canary.23+2bb4c143a9",
+    "@sanity/types": "3.84.1-next.0",
     "@sanity/ui": "^2.15.13",
-    "@sanity/util": "3.83.1-canary.23+2bb4c143a9",
+    "@sanity/util": "3.84.1-next.0",
     "@sanity/uuid": "^3.0.2",
     "@sentry/react": "^8.33.0",
     "@tanstack/react-table": "^8.16.0",
@@ -189,7 +189,6 @@
     "@types/tar-stream": "^3.1.3",
     "@types/use-sync-external-store": "^1.5.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@xstate/react": "^5.0.3",
     "archiver": "^7.0.0",
     "arrify": "^2.0.1",
     "async-mutex": "^0.4.1",
@@ -260,25 +259,25 @@
     "semver": "^7.3.5",
     "shallow-equals": "^1.0.0",
     "speakingurl": "^14.0.1",
+    "suspend-react": "0.1.3",
     "tar-fs": "^2.1.1",
     "tar-stream": "^3.1.7",
-    "urlpattern-polyfill": "10.0.0",
     "use-device-pixel-ratio": "^1.1.0",
     "use-effect-event": "^1.0.2",
     "use-hot-module-reload": "^2.0.0",
     "use-sync-external-store": "^1.5.0",
     "uuid": "^11.0.5",
+    "valibot": "0.31.1",
     "vite": "^6.0.11",
-    "xstate": "^5.19.2",
     "yargs": "^17.3.0"
   },
   "devDependencies": {
     "@playwright/experimental-ct-react": "1.51.1",
     "@playwright/test": "1.51.1",
-    "@repo/dev-aliases": "3.83.0",
-    "@repo/package.config": "3.83.0",
-    "@repo/test-config": "3.83.0",
-    "@sanity/codegen": "3.83.1-canary.23+2bb4c143a9",
+    "@repo/dev-aliases": "3.84.1-next.0",
+    "@repo/package.config": "3.84.1-next.0",
+    "@repo/test-config": "3.84.1-next.0",
+    "@sanity/codegen": "3.84.1-next.0",
     "@sanity/generate-help-url": "^3.0.0",
     "@sanity/pkg-utils": "6.13.4",
     "@sanity/tsdoc": "1.0.169",
@@ -325,5 +324,5 @@
   "engines": {
     "node": ">=18"
   },
-  "gitHead": "2bb4c143a953cacedc1c687cda33a0fe9fb1a007"
+  "gitHead": "09b868ccb5b76181daf2495b124005cb36072796"
 }

package/src/presentation/PostMessageTelemetry.tsx

@@ -13,7 +13,7 @@ const PostMessageTelemetry: FC<PostMessageTelemetryProps> = (props) => {
   const telemetry = useTelemetry()
 
   useEffect(() => {
-    return comlink.on('visual-editing/telemetry-log', (message) => {
+    return comlink.on('visual-editing/telemetry-log', async (message) => {
       const {event, data} = message
 
       // SANITY_STUDIO_DEBUG_TELEMETRY ensures noop/in-browser logging for telemetry events

package/src/presentation/PresentationTool.tsx

@@ -17,8 +17,7 @@ import {
   urlSearchParamVercelSetBypassCookie,
 } from '@sanity/preview-url-secret/constants'
 import {BoundaryElementProvider, Flex} from '@sanity/ui'
-import {useActorRef, useSelector} from '@xstate/react'
-import {lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {lazy, Suspense, useCallback, useEffect, useMemo, useReducer, useRef, useState} from 'react'
 import {
   type CommentIntentGetter,
   COMMENTS_INSPECTOR_NAME,
@@ -26,6 +25,7 @@ import {
   type SanityDocument,
   type Tool,
   useDataset,
+  usePerspective,
   useProjectId,
   useUnique,
   useWorkspace,
@@ -36,8 +36,7 @@ import {useEffectEvent} from 'use-effect-event'
 
 import {DEFAULT_TOOL_NAME, EDIT_INTENT_MODE} from './constants'
 import PostMessageFeatures from './features/PostMessageFeatures'
-import {presentationMachine} from './machines/presentation-machine'
-import {type PreviewUrlRef} from './machines/preview-url'
+import {debounce} from './lib/debounce'
 import {SharedStateProvider} from './overlays/SharedStateProvider'
 import {Panel} from './panels/Panel'
 import {Panels} from './panels/Panels'
@@ -47,24 +46,29 @@ import {usePresentationNavigator} from './PresentationNavigator'
 import {PresentationParamsProvider} from './PresentationParamsProvider'
 import {PresentationProvider} from './PresentationProvider'
 import {Preview} from './preview/Preview'
+import {
+  ACTION_IFRAME_LOADED,
+  ACTION_IFRAME_REFRESH,
+  ACTION_VISUAL_EDITING_OVERLAYS_TOGGLE,
+  presentationReducer,
+  presentationReducerInit,
+} from './reducers/presentationReducer'
 import {
   type FrameState,
   type PresentationNavigate,
+  type PresentationPerspective,
   type PresentationPluginOptions,
   type PresentationStateParams,
   type PresentationViewport,
   type StructureDocumentPaneParams,
   type VisualEditingConnection,
 } from './types'
-import {useAllowPatterns} from './useAllowPatterns'
 import {useDocumentsOnPage} from './useDocumentsOnPage'
 import {useMainDocument} from './useMainDocument'
 import {useParams} from './useParams'
 import {usePopups} from './usePopups'
-import {usePresentationPerspective} from './usePresentationPerspective'
+import {usePreviewUrl} from './usePreviewUrl'
 import {useStatus} from './useStatus'
-import {useTargetOrigin} from './useTargetOrigin'
-import {debounce} from './util/debounce'
 
 const LiveQueries = lazy(() => import('./loader/LiveQueries'))
 const PostMessageDocuments = lazy(() => import('./overlays/PostMessageDocuments'))
@@ -80,25 +84,20 @@ const Container = styled(Flex)`
 
 export default function PresentationTool(props: {
   tool: Tool<PresentationPluginOptions>
+  canCreateUrlPreviewSecrets: boolean
   canToggleSharePreviewAccess: boolean
   canUseSharedPreviewAccess: boolean
   vercelProtectionBypass: string | null
-  initialPreviewUrl: URL
-  previewUrlRef: PreviewUrlRef
 }): React.JSX.Element {
   const {
+    canCreateUrlPreviewSecrets,
     canToggleSharePreviewAccess,
     canUseSharedPreviewAccess,
     tool,
     vercelProtectionBypass,
-    initialPreviewUrl,
-    previewUrlRef,
   } = props
-
-  const allowOrigins = useAllowPatterns(previewUrlRef)
-  const targetOrigin = useTargetOrigin(previewUrlRef)
-
   const components = tool.options?.components
+  const _previewUrl = tool.options?.previewUrl
   const name = tool.name || DEFAULT_TOOL_NAME
   const {unstable_navigator, unstable_header} = components || {}
 
@@ -106,12 +105,39 @@ export default function PresentationTool(props: {
     state: PresentationStateParams
   }
   const routerSearchParams = useUnique(Object.fromEntries(routerState._searchParams || []))
-  const perspective = usePresentationPerspective()
-
-  const canSharePreviewAccess = useSelector(
-    previewUrlRef,
-    (state) => state.context.previewMode?.shareAccess !== false,
+  const {perspectiveStack, selectedPerspectiveName = 'drafts', selectedReleaseId} = usePerspective()
+  const perspective = (
+    selectedReleaseId ? perspectiveStack : selectedPerspectiveName
+  ) as PresentationPerspective
+
+  const initialPreviewUrl = usePreviewUrl(
+    _previewUrl || '/',
+    name,
+    perspective,
+    routerSearchParams.preview || null,
+    canCreateUrlPreviewSecrets,
   )
+  const canSharePreviewAccess = useMemo<boolean>(() => {
+    if (
+      _previewUrl &&
+      typeof _previewUrl === 'object' &&
+      'draftMode' in _previewUrl &&
+      _previewUrl.draftMode
+    ) {
+      // eslint-disable-next-line no-console
+      console.warn('previewUrl.draftMode is deprecated, use previewUrl.previewMode instead')
+      return _previewUrl.draftMode.shareAccess !== false
+    }
+    if (
+      _previewUrl &&
+      typeof _previewUrl === 'object' &&
+      'previewMode' in _previewUrl &&
+      _previewUrl.previewMode
+    ) {
+      return _previewUrl.previewMode.shareAccess !== false
+    }
+    return false
+  }, [_previewUrl])
 
   const [devMode] = useState(() => {
     const option = tool.options?.devMode
@@ -122,6 +148,10 @@ export default function PresentationTool(props: {
     return typeof window !== 'undefined' && window.location.hostname === 'localhost'
   })
 
+  const targetOrigin = useMemo(() => {
+    return initialPreviewUrl.origin
+  }, [initialPreviewUrl.origin])
+
   const iframeRef = useRef<HTMLIFrameElement>(null)
 
   const [controller, setController] = useState<Controller>()
@@ -151,7 +181,7 @@ export default function PresentationTool(props: {
   // Most navigation events should be debounced, so use this unless explicitly needed
   const navigate = useMemo(() => debounce<PresentationNavigate>(_navigate, 50), [_navigate])
 
-  const presentationRef = useActorRef(presentationMachine)
+  const [state, dispatch] = useReducer(presentationReducer, {}, presentationReducerInit)
 
   const viewport = useMemo(() => (params.viewport ? 'mobile' : 'desktop'), [params.viewport])
 
@@ -165,7 +195,7 @@ export default function PresentationTool(props: {
     navigate: _navigate,
     navigationHistory,
     path: params.preview,
-    targetOrigin,
+    previewUrl: tool.options?.previewUrl,
     resolvers: tool.options?.resolve?.mainDocuments,
   })
 
@@ -175,7 +205,7 @@ export default function PresentationTool(props: {
 
   const {open: handleOpenPopup} = usePopups(controller)
 
-  const isLoading = useSelector(presentationRef, (state) => state.matches('loading'))
+  const isLoading = state.iframe.status === 'loading'
 
   useEffect(() => {
     const target = iframeRef.current?.contentWindow
@@ -220,19 +250,7 @@ export default function PresentationTool(props: {
     })
 
     comlink.on('visual-editing/navigate', (data) => {
-      const {title} = data
-      let url = data.url
-      /**
-       * The URL is relative, we need to resolve it to an absolute URL
-       */
-      if (!url.startsWith('http')) {
-        try {
-          url = new URL(url, targetOrigin).toString()
-        } catch {
-          // ignore
-        }
-      }
-
+      const {title, url} = data
       if (frameStateRef.current.url !== url) {
         try {
           // Handle bypass params being forwarded to the final URL
@@ -256,7 +274,10 @@ export default function PresentationTool(props: {
     })
 
     comlink.on('visual-editing/toggle', (data) => {
-      presentationRef.send({type: 'toggle visual editing overlays', enabled: data.enabled})
+      dispatch({
+        type: ACTION_VISUAL_EDITING_OVERLAYS_TOGGLE,
+        enabled: data.enabled,
+      })
     })
 
     comlink.on('visual-editing/documents', (data) => {
@@ -273,12 +294,12 @@ export default function PresentationTool(props: {
       if (data.source === 'manual') {
         clearTimeout(refreshRef.current)
       } else if (data.source === 'mutation') {
-        presentationRef.send({type: 'iframe refresh'})
+        dispatch({type: ACTION_IFRAME_REFRESH})
       }
     })
 
     comlink.on('visual-editing/refreshed', () => {
-      presentationRef.send({type: 'iframe loaded'})
+      dispatch({type: ACTION_IFRAME_LOADED})
     })
 
     comlink.onStatus(setOverlaysConnection)
@@ -289,7 +310,7 @@ export default function PresentationTool(props: {
       stop()
       setVisualEditingComlink(null)
     }
-  }, [controller, presentationRef, setDocumentsOnPage, setOverlaysConnection, targetOrigin])
+  }, [controller, setDocumentsOnPage, setOverlaysConnection, targetOrigin])
 
   useEffect(() => {
     if (!controller) return undefined
@@ -322,7 +343,7 @@ export default function PresentationTool(props: {
 
   const handleFocusPath = useCallback(
     (nextPath: Path) => {
-      // Don't need to explicitly set the id here because it was either already set via postMessage or is the same if navigating in the document pane
+      // Don’t need to explicitly set the id here because it was either already set via postMessage or is the same if navigating in the document pane
       navigate({path: studioPath.toString(nextPath)}, {}, true)
     },
     [navigate],
@@ -330,20 +351,13 @@ export default function PresentationTool(props: {
 
   const handlePreviewPath = useCallback(
     (nextPath: string) => {
-      const url = new URL(nextPath, targetOrigin)
-      const preview = url.toString()
-      if (params.preview === preview) {
-        return
-      }
-      if (Array.isArray(allowOrigins)) {
-        if (allowOrigins.some((pattern) => pattern.test(preview))) {
-          navigate({}, {preview})
-        }
-      } else if (url.origin === targetOrigin) {
+      const url = new URL(nextPath, initialPreviewUrl.origin)
+      const preview = url.pathname + url.search
+      if (url.origin === initialPreviewUrl.origin && preview !== params.preview) {
         navigate({}, {preview})
       }
     },
-    [targetOrigin, params.preview, allowOrigins, navigate],
+    [initialPreviewUrl, params, navigate],
   )
 
   const handleStructureParams = useCallback(
@@ -369,32 +383,12 @@ export default function PresentationTool(props: {
       params.preview &&
       frameStateRef.current.url !== params.preview
     ) {
-      try {
-        const frameOrigin = new URL(frameStateRef.current.url, targetOrigin).origin
-        const previewOrigin = new URL(params.preview, targetOrigin).origin
-        if (frameOrigin !== previewOrigin) {
-          return
-        }
-      } catch {
-        // ignore
-      }
-
       frameStateRef.current.url = params.preview
-      if (overlaysConnection === 'connected') {
-        /**
-         * Translate the possibly absolute params url back to a relative URL
-         */
-        let url = params.preview
-        if (url.startsWith('http')) {
-          try {
-            const newUrl = new URL(params.preview, targetOrigin)
-            url = newUrl.pathname + newUrl.search + newUrl.hash
-          } catch {
-            // ignore
-          }
-        }
+      if (overlaysConnection !== 'connected' && iframeRef.current) {
+        iframeRef.current.src = `${targetOrigin}${params.preview}`
+      } else {
         visualEditingComlink?.post('presentation/navigate', {
-          url,
+          url: params.preview,
           type: 'replace',
         })
       }
@@ -442,7 +436,7 @@ export default function PresentationTool(props: {
   const refreshRef = useRef<number>(undefined)
   const handleRefresh = useCallback(
     (fallback: () => void) => {
-      presentationRef.send({type: 'iframe refresh'})
+      dispatch({type: ACTION_IFRAME_REFRESH})
       if (visualEditingComlink) {
         // We only wait 300ms for the iframe to ack the refresh request before running the fallback logic
         refreshRef.current = window.setTimeout(fallback, 300)
@@ -455,7 +449,7 @@ export default function PresentationTool(props: {
       }
       fallback()
     },
-    [loadersConnection, presentationRef, previewKitConnection, visualEditingComlink],
+    [loadersConnection, previewKitConnection, visualEditingComlink],
   )
 
   const workspace = useWorkspace()
@@ -517,13 +511,14 @@ export default function PresentationTool(props: {
                     <Flex direction="column" flex={1} height="fill" ref={setBoundaryElement}>
                       <BoundaryElementProvider element={boundaryElement}>
                         <Preview
-                          // @TODO move closer to the <iframe> element itself to allow for more precise handling of when to reload the iframe and when to reconnect when the target origin changes
                           // Make sure the iframe is unmounted if the targetOrigin has changed
                           key={targetOrigin}
                           canSharePreviewAccess={canSharePreviewAccess}
                           canToggleSharePreviewAccess={canToggleSharePreviewAccess}
                           canUseSharedPreviewAccess={canUseSharedPreviewAccess}
+                          dispatch={dispatch}
                           header={unstable_header}
+                          iframe={state.iframe}
                           initialUrl={initialPreviewUrl}
                           loadersConnection={loadersConnection}
                           navigatorEnabled={navigatorEnabled}
@@ -539,9 +534,8 @@ export default function PresentationTool(props: {
                           toggleNavigator={toggleNavigator}
                           toggleOverlay={toggleOverlay}
                           viewport={viewport}
+                          visualEditing={state.visualEditing}
                           vercelProtectionBypass={vercelProtectionBypass}
-                          presentationRef={presentationRef}
-                          previewUrlRef={previewUrlRef}
                         />
                       </BoundaryElementProvider>
                     </Flex>
@@ -606,12 +600,10 @@ export default function PresentationTool(props: {
   )
 }
 
-// @TODO reconcile with core utils
 function isAltKey(event: KeyboardEvent): boolean {
   return event.key === 'Alt'
 }
 
-// @TODO reconcile with core utils
 const IS_MAC =
   typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform)
 const MODIFIERS: Record<string, 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'> = {
@@ -620,7 +612,6 @@ const MODIFIERS: Record<string, 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'> =
   mod: IS_MAC ? 'metaKey' : 'ctrlKey',
   shift: 'shiftKey',
 }
-// @TODO reconcile with core utils
 function isHotkey(keys: string[], event: KeyboardEvent): boolean {
   return keys.every((key) => {
     if (MODIFIERS[key]) {

package/src/presentation/PresentationToolGrantsCheck.tsx

@@ -1,67 +1,103 @@
-import {useSelector} from '@xstate/react'
-import {type Tool} from 'sanity'
+import {
+  schemaIdSingleton,
+  schemaType,
+  schemaTypeSingleton,
+} from '@sanity/preview-url-secret/constants'
+import {useToast} from '@sanity/ui'
+import {uuid} from '@sanity/uuid'
+import {useEffect, useState} from 'react'
+import {type PermissionCheckResult, type Tool, useGrantsStore, useTranslation} from 'sanity'
 
+import {presentationLocaleNamespace} from './i18n'
 import {PresentationSpinner} from './PresentationSpinner'
 import PresentationTool from './PresentationTool'
 import {type PresentationPluginOptions} from './types'
-import {usePreviewUrlActorRef} from './usePreviewUrlActorRef'
-import {useReportInvalidPreviewSearchParam} from './useReportInvalidPreviewSearchParam'
 import {useVercelBypassSecret} from './useVercelBypassSecret'
 
-export default function PresentationToolGrantsCheck({
-  tool,
-}: {
+export default function PresentationToolGrantsCheck(props: {
   tool: Tool<PresentationPluginOptions>
 }): React.JSX.Element {
-  const previewUrlRef = usePreviewUrlActorRef(tool.options?.previewUrl, tool.options?.allowOrigins)
-  useReportInvalidPreviewSearchParam(previewUrlRef)
+  const {t} = useTranslation(presentationLocaleNamespace)
+  const {previewUrl} = props.tool.options ?? {}
+  const {push: pushToast} = useToast()
+  const willGeneratePreviewUrlSecret =
+    typeof previewUrl === 'object' || typeof previewUrl === 'function'
+  const grantsStore = useGrantsStore()
+  const [previewAccessSharingCreatePermission, setCreateAccessSharingPermission] =
+    useState<PermissionCheckResult | null>(null)
+  const [previewAccessSharingUpdatePermission, setUpdateAccessSharingPermission] =
+    useState<PermissionCheckResult | null>(null)
+  const [previewAccessSharingReadPermission, setReadAccessSharingPermission] =
+    useState<PermissionCheckResult | null>(null)
+  const [previewUrlSecretPermission, setPreviewUrlSecretPermission] =
+    useState<PermissionCheckResult | null>(null)
+
+  useEffect(() => {
+    if (!willGeneratePreviewUrlSecret) return undefined
+
+    const previewCreateAccessSharingPermissionSubscription = grantsStore
+      .checkDocumentPermission('create', {_id: schemaIdSingleton, _type: schemaTypeSingleton})
+      .subscribe(setCreateAccessSharingPermission)
+    const previewUpdateAccessSharingPermissionSubscription = grantsStore
+      .checkDocumentPermission('update', {_id: schemaIdSingleton, _type: schemaTypeSingleton})
+      .subscribe(setUpdateAccessSharingPermission)
+    const previewReadAccessSharingPermissionSubscription = grantsStore
+      .checkDocumentPermission('read', {_id: schemaIdSingleton, _type: schemaTypeSingleton})
+      .subscribe(setReadAccessSharingPermission)
+    const previewUrlSecretPermissionSubscription = grantsStore
+      .checkDocumentPermission('create', {_id: `drafts.${uuid()}`, _type: schemaType})
+      .subscribe(setPreviewUrlSecretPermission)
+
+    return () => {
+      previewCreateAccessSharingPermissionSubscription.unsubscribe()
+      previewUpdateAccessSharingPermissionSubscription.unsubscribe()
+      previewReadAccessSharingPermissionSubscription.unsubscribe()
+      previewUrlSecretPermissionSubscription.unsubscribe()
+    }
+  }, [grantsStore, willGeneratePreviewUrlSecret])
+
+  const canCreateUrlPreviewSecrets = previewUrlSecretPermission?.granted
+
+  useEffect(() => {
+    if (!willGeneratePreviewUrlSecret || canCreateUrlPreviewSecrets !== false) return undefined
+    const raf = requestAnimationFrame(() =>
+      pushToast({
+        closable: true,
+        status: 'error',
+        duration: 30_000,
+        title: t('preview-url-secret.missing-grants'),
+      }),
+    )
+    return () => cancelAnimationFrame(raf)
+  }, [canCreateUrlPreviewSecrets, pushToast, t, willGeneratePreviewUrlSecret])
 
-  const previewAccessSharingCreatePermission = useSelector(
-    previewUrlRef,
-    (state) => state.context.previewAccessSharingCreatePermission,
-  )
-  const previewAccessSharingUpdatePermission = useSelector(
-    previewUrlRef,
-    (state) => state.context.previewAccessSharingUpdatePermission,
-  )
-  const previewAccessSharingReadPermission = useSelector(
-    previewUrlRef,
-    (state) => state.context.previewAccessSharingReadPermission,
-  )
-  const previewUrlSecretPermission = useSelector(
-    previewUrlRef,
-    (state) => state.context.previewUrlSecretPermission,
-  )
-  const url = useSelector(previewUrlRef, (state) => state.context.previewUrl)
-  // @TODO the vercel protection bypass can be moved to the iframe level
   const [vercelProtectionBypass, vercelProtectionBypassReadyState] = useVercelBypassSecret()
 
   if (
-    !url ||
     vercelProtectionBypassReadyState === 'loading' ||
-    !previewAccessSharingCreatePermission ||
-    typeof previewAccessSharingCreatePermission.granted === 'undefined' ||
-    !previewAccessSharingUpdatePermission ||
-    typeof previewAccessSharingUpdatePermission.granted === 'undefined' ||
-    !previewUrlSecretPermission ||
-    !previewAccessSharingReadPermission ||
-    typeof previewAccessSharingReadPermission.granted === 'undefined' ||
-    typeof previewUrlSecretPermission.granted === 'undefined'
+    (willGeneratePreviewUrlSecret &&
+      (!previewAccessSharingCreatePermission ||
+        typeof previewAccessSharingCreatePermission.granted === 'undefined' ||
+        !previewAccessSharingUpdatePermission ||
+        typeof previewAccessSharingUpdatePermission.granted === 'undefined' ||
+        !previewUrlSecretPermission ||
+        !previewAccessSharingReadPermission ||
+        typeof previewAccessSharingReadPermission.granted === 'undefined' ||
+        typeof previewUrlSecretPermission.granted === 'undefined'))
   ) {
     return <PresentationSpinner />
   }
 
   return (
     <PresentationTool
-      tool={tool}
-      initialPreviewUrl={url}
+      {...props}
       vercelProtectionBypass={vercelProtectionBypass}
+      canCreateUrlPreviewSecrets={canCreateUrlPreviewSecrets === true}
       canToggleSharePreviewAccess={
         previewAccessSharingCreatePermission?.granted === true &&
         previewAccessSharingUpdatePermission?.granted === true
       }
       canUseSharedPreviewAccess={previewAccessSharingReadPermission?.granted === true}
-      previewUrlRef={previewUrlRef}
     />
   )
 }