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

package/src/presentation/preview/PreviewHeader.tsx

@@ -1,15 +1,13 @@
-/* eslint-disable no-nested-ternary */
 import {DesktopIcon, MobileDeviceIcon, PanelLeftIcon, RefreshIcon} from '@sanity/icons'
 import {withoutSecretSearchParams} from '@sanity/preview-url-secret/without-secret-search-params'
 import {Box, Card, Flex, Hotkeys, Switch, Text} from '@sanity/ui'
-import {useSelector} from '@xstate/react'
 import {type RefObject, useCallback, useMemo} from 'react'
 import {useTranslation} from 'sanity'
 
 import {Button, Tooltip} from '../../ui-components'
 import {presentationLocaleNamespace} from '../i18n'
+import {ACTION_IFRAME_RELOAD} from '../reducers/presentationReducer'
 import {type HeaderOptions} from '../types'
-import {useId} from '../useId'
 import {OpenPreviewButton} from './OpenPreviewButton'
 import {type PreviewProps} from './Preview'
 import {PreviewLocationInput} from './PreviewLocationInput'
@@ -26,6 +24,8 @@ const PreviewHeaderDefault = (props: Omit<PreviewHeaderProps, 'renderDefault'>)
     canSharePreviewAccess,
     canToggleSharePreviewAccess,
     canUseSharedPreviewAccess,
+    dispatch,
+    iframe,
     iframeRef,
     initialUrl,
     navigatorEnabled,
@@ -33,7 +33,6 @@ const PreviewHeaderDefault = (props: Omit<PreviewHeaderProps, 'renderDefault'>)
     onRefresh,
     openPopup,
     overlaysConnection,
-    presentationRef,
     perspective,
     previewUrl,
     setViewport,
@@ -41,7 +40,7 @@ const PreviewHeaderDefault = (props: Omit<PreviewHeaderProps, 'renderDefault'>)
     toggleNavigator,
     toggleOverlay,
     viewport,
-    previewUrlRef,
+    visualEditing: {overlaysEnabled},
   } = props
 
   const {t} = useTranslation(presentationLocaleNamespace)
@@ -60,7 +59,7 @@ const PreviewHeaderDefault = (props: Omit<PreviewHeaderProps, 'renderDefault'>)
       if (!iframeRef.current) {
         return
       }
-      presentationRef.send({type: 'iframe reload'})
+      dispatch({type: ACTION_IFRAME_RELOAD})
       // Funky way to reload an iframe without CORS issues
       // eslint-disable-next-line no-self-assign
       // ref.current.src = ref.current.src
@@ -68,17 +67,6 @@ const PreviewHeaderDefault = (props: Omit<PreviewHeaderProps, 'renderDefault'>)
     })
   }
 
-  const isLoading = useSelector(presentationRef, (state) => state.matches('loading'))
-  const isLoaded = useSelector(presentationRef, (state) => state.matches('loaded'))
-  const isRefreshing = useSelector(presentationRef, (state) =>
-    state.matches({loaded: 'refreshing'}),
-  )
-  const isReloading = useSelector(presentationRef, (state) => state.matches({loaded: 'reloading'}))
-  const overlaysEnabled = useSelector(
-    presentationRef,
-    (state) => state.context.visualEditingOverlaysEnabled,
-  )
-
   const previewLocationRoute = useMemo(() => {
     const previewURL = new URL(previewUrl || '/', targetOrigin)
     const {pathname, search} = withoutSecretSearchParams(previewURL)
@@ -86,14 +74,6 @@ const PreviewHeaderDefault = (props: Omit<PreviewHeaderProps, 'renderDefault'>)
     return `${pathname}${search}`
   }, [previewUrl, targetOrigin])
 
-  const perspectiveToggleTooltipId = useId()
-
-  /**
-   * If the preview URL machine is busy it means it's about to change the target origin and reload the iframe,
-   * so we show a spinner
-   */
-  const previewUrlBusy = useSelector(previewUrlRef, (state) => state.hasTag('busy'))
-
   return (
     <Flex align="center" gap={1} paddingX={1} style={{width: '100%'}}>
       {toggleNavigator && (
@@ -146,10 +126,9 @@ const PreviewHeaderDefault = (props: Omit<PreviewHeaderProps, 'renderDefault'>)
           <Flex align="center" gap={3}>
             <div style={{margin: -4}}>
               <Switch
-                indeterminate={!isLoaded}
                 checked={overlaysEnabled}
                 onChange={toggleOverlay}
-                disabled={isLoading || overlaysConnection !== 'connected'}
+                disabled={iframe.status === 'loading' || overlaysConnection !== 'connected'}
               />
             </div>
             <Box>
@@ -163,24 +142,15 @@ const PreviewHeaderDefault = (props: Omit<PreviewHeaderProps, 'renderDefault'>)
 
       <Box flex={1}>
         <PreviewLocationInput
-          previewUrlRef={previewUrlRef}
           prefix={
             <Box padding={1}>
               <Tooltip
                 animate
                 content={
                   <Text size={1}>
-                    {isLoaded
+                    {iframe.status === 'loaded'
                       ? t('preview-frame.refresh-button.tooltip')
-                      : t('preview-frame.status', {
-                          context: isLoading
-                            ? 'loading'
-                            : isRefreshing
-                              ? 'refreshing'
-                              : isReloading
-                                ? 'reloading'
-                                : 'unknown',
-                        })}
+                      : t('preview-frame.status', {context: iframe.status})}
                   </Text>
                 }
                 fallbackPlacements={['bottom-end']}
@@ -191,7 +161,7 @@ const PreviewHeaderDefault = (props: Omit<PreviewHeaderProps, 'renderDefault'>)
                   aria-label={t('preview-frame.refresh-button.aria-label')}
                   icon={RefreshIcon}
                   mode="bleed"
-                  loading={isReloading || isRefreshing || previewUrlBusy}
+                  loading={iframe.status === 'reloading' || iframe.status === 'refreshing'}
                   onClick={handleRefresh}
                   tooltipProps={null}
                 />
@@ -199,6 +169,7 @@ const PreviewHeaderDefault = (props: Omit<PreviewHeaderProps, 'renderDefault'>)
             </Box>
           }
           onChange={onPathChange}
+          origin={previewLocationOrigin}
           suffix={
             <Box padding={1}>
               <OpenPreviewButton
@@ -217,10 +188,6 @@ const PreviewHeaderDefault = (props: Omit<PreviewHeaderProps, 'renderDefault'>)
       <Flex align="center" flex="none" gap={1}>
         <Tooltip
           animate
-          // eslint-disable-next-line react/jsx-no-bind
-          ref={(node) => {
-            node?.style.setProperty('view-transition-name', perspectiveToggleTooltipId)
-          }}
           content={
             <Text size={1}>
               {t('preview-frame.viewport-button.tooltip', {

package/src/presentation/preview/PreviewLocationInput.tsx

@@ -2,6 +2,7 @@ import {ResetIcon} from '@sanity/icons'
 import {TextInput, type TextInputClearButtonProps} from '@sanity/ui'
 import {
   type ChangeEvent,
+  type FunctionComponent,
   type KeyboardEvent,
   type ReactNode,
   useCallback,
@@ -13,22 +14,17 @@ import {
 import {useActiveWorkspace, useTranslation} from 'sanity'
 
 import {presentationLocaleNamespace} from '../i18n'
-import {type PreviewUrlRef} from '../machines/preview-url'
-import {useAllowPatterns} from '../useAllowPatterns'
-import {useTargetOrigin} from '../useTargetOrigin'
 
-export function PreviewLocationInput(props: {
+export const PreviewLocationInput: FunctionComponent<{
   fontSize?: number
   onChange: (value: string) => void
-  previewUrlRef: PreviewUrlRef
+  origin: string
   padding?: number
   prefix?: ReactNode
   suffix?: ReactNode
   value: string
-}): React.JSX.Element {
-  const {fontSize = 1, onChange, padding = 3, prefix, suffix, value, previewUrlRef} = props
-  const allowOrigins = useAllowPatterns(previewUrlRef)
-  const targetOrigin = useTargetOrigin(previewUrlRef)
+}> = function (props) {
+  const {fontSize = 1, onChange, origin, padding = 3, prefix, suffix, value} = props
 
   const {t} = useTranslation(presentationLocaleNamespace)
   const {basePath = '/'} = useActiveWorkspace()?.activeWorkspace || {}
@@ -48,41 +44,29 @@ export function PreviewLocationInput(props: {
           return
         }
 
-        let absoluteValue = sessionValue
-        try {
-          absoluteValue = new URL(sessionValue, targetOrigin).toString()
-        } catch {
-          // ignore
-        }
+        const absoluteValue =
+          sessionValue.startsWith('/') || sessionValue === ''
+            ? `${origin}${sessionValue}`
+            : sessionValue
 
-        if (Array.isArray(allowOrigins)) {
-          if (!allowOrigins.some((pattern) => pattern.test(absoluteValue))) {
-            setCustomValidity(
-              t('preview-location-input.error', {
-                origin: targetOrigin,
-                context: 'origin-not-allowed',
-              }),
-            )
-            event.currentTarget.reportValidity()
-            return
-          }
-          // `origin` is an empty string '' if the Studio is embedded, and that's when we need to protect against recursion
-        } else if (
-          !targetOrigin &&
-          (absoluteValue.startsWith(`${basePath}/`) || absoluteValue === basePath)
-        ) {
+        if (!absoluteValue.startsWith(`${origin}/`) && absoluteValue !== origin) {
+          setCustomValidity(t('preview-location-input.error', {origin, context: 'missing-origin'}))
+          return
+        }
+        // `origin` is an empty string '' if the Studio is embedded, and that's when we need to protect against recursion
+        if (!origin && (absoluteValue.startsWith(`${basePath}/`) || absoluteValue === basePath)) {
           setCustomValidity(
             t('preview-location-input.error', {basePath, context: 'same-base-path'}),
           )
           return
         }
 
-        const nextValue = absoluteValue === targetOrigin ? `${targetOrigin}/` : absoluteValue
+        const nextValue = absoluteValue === origin ? `${origin}/` : absoluteValue
 
         setCustomValidity(undefined)
         setSessionValue(undefined)
 
-        onChange(nextValue)
+        onChange(nextValue.slice(origin.length))
 
         inputRef.current?.blur()
       }
@@ -92,7 +76,7 @@ export function PreviewLocationInput(props: {
         setSessionValue(undefined)
       }
     },
-    [allowOrigins, basePath, onChange, sessionValue, t, targetOrigin],
+    [basePath, onChange, origin, sessionValue, t],
   )
 
   const handleBlur = useCallback(() => {
@@ -100,21 +84,10 @@ export function PreviewLocationInput(props: {
     setSessionValue(undefined)
   }, [])
 
-  const handleClear = useCallback(() => {
-    setCustomValidity(undefined)
-    let nextValue = value
-    try {
-      nextValue = new URL(value, targetOrigin).toString()
-    } catch {
-      // ignore
-    }
-    setSessionValue(nextValue)
-  }, [targetOrigin, value])
-
   useEffect(() => {
     setCustomValidity(undefined)
     setSessionValue(undefined)
-  }, [targetOrigin, value])
+  }, [origin, value])
 
   const resetButton: TextInputClearButtonProps = useMemo(() => ({icon: ResetIcon}), [])
 
@@ -125,7 +98,10 @@ export function PreviewLocationInput(props: {
         customValidity={customValidity}
         fontSize={fontSize}
         onBlur={handleBlur}
-        onClear={handleClear}
+        onClear={() => {
+          setCustomValidity(undefined)
+          setSessionValue(origin + value)
+        }}
         onChange={handleChange}
         onKeyDownCapture={handleKeyDown}
         padding={padding}
@@ -135,7 +111,7 @@ export function PreviewLocationInput(props: {
         ref={inputRef}
         space={padding}
         suffix={suffix}
-        value={sessionValue === undefined ? new URL(value, targetOrigin).toString() : sessionValue}
+        value={sessionValue === undefined ? `${origin}${value}` : sessionValue}
       />
     </>
   )

package/src/presentation/preview/SharePreviewMenu.tsx

@@ -108,7 +108,7 @@ export const SharePreviewMenu = memo(function SharePreviewMenuComponent(
       setDisabling(true)
       await disablePreviewAccessSharing(
         client,
-        'sanity/presentation',
+        '@sanity/presentation',
         typeof window === 'undefined' ? '' : location.href,
         currentUser?.id,
       )
@@ -125,7 +125,7 @@ export const SharePreviewMenu = memo(function SharePreviewMenuComponent(
 
       const previewUrlSecret = await enablePreviewAccessSharing(
         client,
-        'sanity/presentation',
+        '@sanity/presentation',
         typeof window === 'undefined' ? '' : location.href,
         currentUser?.id,
       )

package/src/presentation/reducers/presentationReducer.ts

@@ -0,0 +1,134 @@
+import {type Dispatch, type Reducer} from 'react'
+import {boolean, fallback, object, parse, picklist} from 'valibot'
+
+/** @public */
+export interface PresentationState {
+  mainDocument: boolean
+  iframe: {
+    status: 'loading' | 'loaded' | 'refreshing' | 'reloading'
+  }
+  visualEditing: {
+    overlaysEnabled: boolean
+  }
+}
+
+/** @public */
+export const ACTION_IFRAME_LOADED = 'ACTION_IFRAME_LOADED'
+/** @public */
+export const ACTION_IFRAME_REFRESH = 'ACTION_IFRAME_REFRESH'
+/** @public */
+export const ACTION_IFRAME_RELOAD = 'ACTION_IFRAME_RELOAD'
+/** @public */
+export const ACTION_VISUAL_EDITING_OVERLAYS_TOGGLE = 'ACTION_VISUAL_EDITING_OVERLAYS_TOGGLE'
+
+/** @public */
+export interface IframeLoadedAction {
+  type: typeof ACTION_IFRAME_LOADED
+}
+/** @public */
+export interface IframeRefreshAction {
+  type: typeof ACTION_IFRAME_REFRESH
+}
+/** @public */
+export interface IframeReloadAction {
+  type: typeof ACTION_IFRAME_RELOAD
+}
+/** @public */
+export interface VisualEditingOverlaysToggleAction {
+  type: typeof ACTION_VISUAL_EDITING_OVERLAYS_TOGGLE
+  enabled: boolean
+}
+
+/** @public */
+export type PresentationAction =
+  | IframeLoadedAction
+  | IframeRefreshAction
+  | IframeReloadAction
+  | VisualEditingOverlaysToggleAction
+
+export const presentationReducer: Reducer<
+  Readonly<PresentationState>,
+  Readonly<PresentationAction>
+> = (state, action) => {
+  switch (action.type) {
+    case ACTION_IFRAME_LOADED:
+      return state.iframe.status === 'loaded'
+        ? state
+        : {
+            ...state,
+            iframe: {
+              ...state.iframe,
+              status: 'loaded',
+            },
+          }
+    case ACTION_IFRAME_REFRESH:
+      return state.iframe.status === 'refreshing'
+        ? state
+        : {
+            ...state,
+            iframe: {
+              ...state.iframe,
+              status: 'refreshing',
+            },
+          }
+    case ACTION_IFRAME_RELOAD:
+      return state.iframe.status === 'reloading'
+        ? state
+        : {
+            ...state,
+            iframe: {
+              ...state.iframe,
+              status: 'reloading',
+            },
+          }
+    case ACTION_VISUAL_EDITING_OVERLAYS_TOGGLE:
+      return toggleVisualEditingOverlays(state, action)
+    default:
+      return state
+  }
+}
+
+const toggleVisualEditingOverlays: Reducer<
+  Readonly<PresentationState>,
+  Readonly<VisualEditingOverlaysToggleAction>
+> = (state, action) => {
+  if (state.visualEditing.overlaysEnabled === action.enabled) return state
+  return {
+    ...state,
+    visualEditing: {
+      ...state.visualEditing,
+      overlaysEnabled: action.enabled,
+    },
+  }
+}
+
+const mainDocumentSchema = fallback(boolean(), false)
+
+const iframeStatusSchema = picklist(['loading', 'loaded', 'refreshing', 'reloading'])
+
+const initStateSchema = object({
+  mainDocument: mainDocumentSchema,
+  iframe: object({
+    status: iframeStatusSchema,
+  }),
+  visualEditing: object({overlaysEnabled: boolean()}),
+})
+
+const INITIAL_PRESENTATION_STATE = {
+  mainDocument: false,
+  iframe: {
+    status: 'loading',
+  },
+  visualEditing: {
+    overlaysEnabled: false,
+  },
+} as const satisfies PresentationState
+
+export function presentationReducerInit(
+  state: Readonly<Partial<PresentationState>>,
+): Readonly<PresentationState> {
+  return parse(initStateSchema, {...INITIAL_PRESENTATION_STATE, ...state})
+}
+
+/** @public */
+export type DispatchPresentationAction = Dispatch<Readonly<PresentationAction>>

package/src/presentation/types.ts

@@ -6,14 +6,17 @@ import {
   type VisualEditingControllerMsg,
   type VisualEditingNodeMsg,
 } from '@sanity/presentation-comlink'
-import {type PreviewUrlResolver} from '@sanity/preview-url-secret/define-preview-url'
+import {
+  type PreviewUrlResolver,
+  type PreviewUrlResolverOptions,
+} from '@sanity/preview-url-secret/define-preview-url'
 import {type ComponentType} from 'react'
 import {type Observable} from 'rxjs'
 import {type DocumentStore, type SanityClient} from 'sanity'
 
 import {type PreviewHeaderProps} from './preview/PreviewHeader'
 
-export type {PreviewUrlResolver}
+export type {PreviewUrlResolver, PreviewUrlResolverOptions}
 
 /**
  * Represents a document location
@@ -79,141 +82,7 @@ export interface HeaderOptions {
 }
 
 /** @public */
-export interface PreviewUrlAllowOptionContext {
-  client: SanityClient
-  /**
-   * Equivalent to `location.origin`
-   */
-  origin: string
-  /**
-   * The initial URL of the preview
-   */
-  initialUrl: URL
-}
-
-/** @public */
-export interface PreviewUrlInitialOptionContext {
-  client: SanityClient
-  /**
-   * Equivalent to `location.origin`
-   */
-  origin: string
-}
-
-/** @public */
-export interface PreviewUrlPreviewModeOptionContext {
-  client: SanityClient
-  /**
-   * Equivalent to `location.origin`
-   */
-  origin: string
-  /**
-   * The origin on the URL that will be used in the preview iframe
-   */
-  targetOrigin: string
-}
-
-/** @public */
-export type PreviewUrlAllowOption =
-  | string
-  | string[]
-  | ((context: PreviewUrlAllowOptionContext) => string | string[] | Promise<string | string[]>)
-
-/** @public */
-export type PreviewUrlInitialOption =
-  | string
-  | ((context: PreviewUrlInitialOptionContext) => string | Promise<string>)
-
-/** @public */
-export type PreviewUrlPreviewModeOption =
-  | PreviewUrlPreviewMode
-  | ((
-      context: PreviewUrlPreviewModeOptionContext,
-    ) => false | PreviewUrlPreviewMode | Promise<false | PreviewUrlPreviewMode>)
-
-/** @public */
-export interface PreviewUrlPreviewMode {
-  /**
-   * The route that enables Preview Mode
-   * @example '/api/preview'
-   * @example '/api/draft-mode/enable'
-   */
-  enable: string
-  /**
-   * Allow sharing access to a preview with others.
-   * This is enabled/disabled in the Presentation Tool. It's initially disabled, and can be enabled by someone who has access to creating draft documents in the Studio.
-   * Custom roles can limit access to `_id in path("drafts.**") && _type == "sanity.previewUrlSecret"`.
-   * This will create a secret that is valid until sharing is disabled. Turning sharing off and on again will create a new secret and can be used to remove access for folks that got the link in an email but should no longer have access.
-   * Share URLs to previews will append this secret and give access to anyone who is given the URL, they don't need to be logged into the Studio or to Vercel.
-   */
-  shareAccess?: boolean
-  /**
-   * The route that reports if Preview Mode is enabled or not, useful for debugging
-   * @example '/api/check-preview'
-   * @deprecated - this API is not yet implemented
-   */
-  check?: string
-  /**
-   * The route that disables Preview Mode, useful for debugging
-   * @example '/api/disable-preview'
-   * @deprecated - this API is not yet implemented
-   */
-  disable?: string
-}
-
-/**
- * @public
- */
-export interface PreviewUrlResolverOptions {
-  /**
-   * The default preview URL, used when the URL to use is not yet known, or there's no `&preview=...` search param in the studio URL.
-   * @example '/en/preview?q=shoes'
-   * @example 'https://example.com'
-   * @defaultValue `location.origin`
-   */
-  initial?: PreviewUrlInitialOption
-  previewMode?: PreviewUrlPreviewModeOption
-  /**
-   * @defaultValue `location.origin`
-   * @deprecated - use `previewMode.initial` instead
-   */
-  origin?: string
-  /**
-   * @defaultValue '/'
-   * @deprecated - use `previewMode.initial` instead
-   */
-  preview?: string
-  /**
-   * @deprecated - use `previewMode` instead
-   */
-  draftMode?: {
-    /**
-     * @deprecated - use `previewMode.enable` instead
-     */
-    enable: string
-    /**
-     * @deprecated - use `previewMode.shareAccess` instead
-     */
-    shareAccess?: boolean
-    /**
-     * @deprecated - use `previewMode.check` instead
-     */
-    check?: string
-    /**
-     * @deprecated - use `previewMode.disable` instead
-     */
-    disable?: string
-  }
-}
-
-/**
- * @deprecated the `previewUrl.initial`, `previewUrl.allowOrigins` and `previewUrl.previewMode.enable` supports async functions that offer advanced control over how preview URLs are resolved
- * @public
- */
-export type DeprecatedPreviewUrlResolver = PreviewUrlResolver<SanityClient>
-
-/** @public */
-export type PreviewUrlOption = string | DeprecatedPreviewUrlResolver | PreviewUrlResolverOptions
+export type PreviewUrlOption = string | PreviewUrlResolver<SanityClient> | PreviewUrlResolverOptions
 
 /**
  * Object of document location resolver definitions per document type
@@ -291,8 +160,6 @@ export interface PresentationPluginOptions {
   icon?: ComponentType
   name?: string
   title?: string
-  allowOrigins?: PreviewUrlAllowOption
-  previewUrl: PreviewUrlOption
   /**
    * @deprecated use `resolve.locations` instead
    */
@@ -301,6 +168,7 @@ export interface PresentationPluginOptions {
     mainDocuments?: DocumentResolver[]
     locations?: DocumentLocationResolvers | DocumentLocationResolver
   }
+  previewUrl: PreviewUrlOption
   components?: {
     unstable_header?: HeaderOptions
     unstable_navigator?: NavigatorOptions

package/src/presentation/useMainDocument.ts

@@ -12,6 +12,7 @@ import {
   type MainDocument,
   type MainDocumentState,
   type PresentationNavigate,
+  type PreviewUrlOption,
 } from './types'
 
 // Helper function to "unwrap" a result when it is either explicitly provided or
@@ -96,10 +97,10 @@ export function useMainDocument(props: {
   navigate?: PresentationNavigate
   navigationHistory: RouterState[]
   path?: string
-  targetOrigin: string
+  previewUrl?: PreviewUrlOption
   resolvers?: DocumentResolver[]
 }): MainDocumentState | undefined {
-  const {navigate, navigationHistory, path, targetOrigin, resolvers = []} = props
+  const {navigate, navigationHistory, path, previewUrl, resolvers = []} = props
   const {state: routerState} = useRouter()
   const {perspectiveStack} = usePerspective()
   const client = useClient({apiVersion: API_VERSION})
@@ -135,7 +136,14 @@ export function useMainDocument(props: {
   })
 
   useEffect(() => {
-    const url = new URL(relativeUrl, targetOrigin)
+    const base =
+      // eslint-disable-next-line no-nested-ternary
+      typeof previewUrl === 'string'
+        ? previewUrl
+        : typeof previewUrl === 'object'
+          ? previewUrl?.origin || location.origin
+          : location.origin
+    const url = new URL(relativeUrl, base)
 
     if (resolvers.length) {
       let result:
@@ -180,7 +188,7 @@ export function useMainDocument(props: {
     setMainDocumentState(undefined)
     mainDocumentIdRef.current = undefined
     return undefined
-  }, [client, perspectiveStack, relativeUrl, resolvers, targetOrigin])
+  }, [client, previewUrl, relativeUrl, resolvers, perspectiveStack])
 
   return mainDocumentState
 }

package/src/presentation/useParams.ts

@@ -3,6 +3,7 @@ import {type MutableRefObject, useCallback, useEffect, useMemo, useRef, useState
 import {getPublishedId} from 'sanity'
 import {type RouterContextValue, type RouterState, type SearchParam} from 'sanity/router'
 
+import {parseRouterState} from './lib/parse'
 import {
   type CombinedSearchParams,
   type FrameState,
@@ -12,7 +13,6 @@ import {
   type PresentationStateParams,
   type StructureDocumentPaneParams,
 } from './types'
-import {parseRouterState} from './util/parse'
 
 function pruneObject<T extends RouterState | PresentationParamsContextValue>(obj: T): T {
   return Object.fromEntries(
@@ -50,7 +50,8 @@ export function useParams({
       id,
       type,
       path,
-      preview: routerSearchParams.preview || initialPreviewUrl.toString(),
+      preview:
+        routerSearchParams.preview || `${initialPreviewUrl.pathname}${initialPreviewUrl.search}`,
       perspective: routerSearchParams.perspective,
       viewport: routerSearchParams.viewport,
       inspect: routerSearchParams.inspect,