fix: styling for error messaging

packages/core/src/_exports/index.ts

@@ -123,8 +123,6 @@ export {resolveProjection} from '../projection/resolveProjection'
 export {type ProjectionValuePending, type ValidProjection} from '../projection/types'
 export {getProjectsState, resolveProjects} from '../projects/projects'
 export {
-  clearQueryError,
-  getQueryErrorState,
   getQueryKey,
   getQueryState,
   parseQueryKey,

packages/core/src/query/queryStore.ts

@@ -317,29 +317,6 @@ const _getQueryState = bindActionByDataset(
   }),
 )
 
-/**
- * Returns a state source for the top-level query store error (if any).
- *
- * Unlike {@link getQueryState}, this selector does not throw; it simply returns the error value.
- * Subscribe to this to be notified when a global query error occurs (e.g., CORS failures).
- *
- * @beta
- */
-export function getQueryErrorState(instance: SanityInstance): StateSource<unknown | undefined> {
-  return _getQueryErrorState(instance)
-}
-
-const _getQueryErrorState = bindActionByDataset(
-  queryStore,
-  createStateSourceAction({
-    selector: ({state}: SelectorContext<QueryStoreState>) => state.error,
-    onSubscribe: () => {
-      // No-op subscription as we don't track per-query subscribers here
-      return () => {}
-    },
-  }),
-)
-
 /**
  * Resolves the result of a query without registering a lasting subscriber.
  *
@@ -413,16 +390,3 @@ const _resolveQuery = bindActionByDataset(
     return firstValueFrom(race([resolved$, aborted$]))
   },
 )
-
-/**
- * Clears the top-level query store error.
- * @beta
- */
-export function clearQueryError(instance: SanityInstance): void
-export function clearQueryError(...args: Parameters<typeof _clearQueryError>): void {
-  return _clearQueryError(...args)
-}
-
-const _clearQueryError = bindActionByDataset(queryStore, ({state}) => {
-  state.set('setError', {error: undefined})
-})

packages/react/src/components/auth/AuthBoundary.tsx

@@ -7,7 +7,6 @@ import {ComlinkTokenRefreshProvider} from '../../context/ComlinkTokenRefresh'
 import {useAuthState} from '../../hooks/auth/useAuthState'
 import {useLoginUrl} from '../../hooks/auth/useLoginUrl'
 import {useVerifyOrgProjects} from '../../hooks/auth/useVerifyOrgProjects'
-import {useCorsOriginError} from '../../hooks/errors/useCorsOriginError'
 import {CorsErrorComponent} from '../errors/CorsErrorComponent'
 import {isInIframe} from '../utils'
 import {AuthError} from './AuthError'
@@ -108,38 +107,24 @@ export function AuthBoundary({
   LoginErrorComponent = LoginError,
   ...props
 }: AuthBoundaryProps): React.ReactNode {
-  const {error: corsError, projectId, clear: clearCorsError} = useCorsOriginError()
-
   const FallbackComponent = useMemo(() => {
     return function LoginComponentWithLayoutProps(fallbackProps: FallbackProps) {
       if (fallbackProps.error instanceof CorsOriginError) {
         return (
           <CorsErrorComponent
             {...fallbackProps}
             projectId={getCorsErrorProjectId(fallbackProps.error)}
-            resetErrorBoundary={() => {
-              clearCorsError()
-              fallbackProps.resetErrorBoundary()
-            }}
           />
         )
       }
       return <LoginErrorComponent {...fallbackProps} />
     }
-  }, [LoginErrorComponent, clearCorsError])
+  }, [LoginErrorComponent])
 
   return (
     <ComlinkTokenRefreshProvider>
       <ErrorBoundary FallbackComponent={FallbackComponent}>
-        {corsError ? (
-          <CorsErrorComponent
-            error={corsError}
-            resetErrorBoundary={() => clearCorsError()}
-            projectId={projectId}
-          />
-        ) : (
-          <AuthSwitch {...props} />
-        )}
+        <AuthSwitch {...props} />
       </ErrorBoundary>
     </ComlinkTokenRefreshProvider>
   )

packages/react/src/components/auth/LoginError.tsx

@@ -5,6 +5,7 @@ import {type FallbackProps} from 'react-error-boundary'
 
 import {useAuthState} from '../../hooks/auth/useAuthState'
 import {useLogOut} from '../../hooks/auth/useLogOut'
+import {Error} from '../errors/Error'
 import {AuthError} from './AuthError'
 import {ConfigurationError} from './ConfigurationError'
 /**
@@ -59,17 +60,13 @@ export function LoginError({error, resetErrorBoundary}: LoginErrorProps): React.
   }, [authState, handleRetry, error])
 
   return (
-    <div className="sc-login-error">
-      <div className="sc-login-error__content">
-        <h2 className="sc-login-error__title">
-          {error instanceof AuthError ? 'Authentication Error' : 'Configuration Error'}
-        </h2>
-        <p className="sc-login-error__description">{authErrorMessage}</p>
-      </div>
-
-      <button className="sc-login-error__button" onClick={handleRetry}>
-        Retry
-      </button>
-    </div>
+    <Error
+      heading={error instanceof AuthError ? 'Authentication Error' : 'Configuration Error'}
+      description={authErrorMessage}
+      cta={{
+        text: 'Retry',
+        onClick: handleRetry,
+      }}
+    />
   )
 }

packages/react/src/components/errors/CorsErrorComponent.test.tsx

@@ -21,7 +21,7 @@ describe('CorsErrorComponent', () => {
       />,
     )
 
-    expect(screen.getByText('Before you continue...')).toBeInTheDocument()
+    expect(screen.getByText('Before you continue…')).toBeInTheDocument()
     expect(screen.getByText(origin)).toBeInTheDocument()
 
     const link = screen.getByRole('link', {name: 'Manage CORS configuration'}) as HTMLAnchorElement
@@ -41,7 +41,7 @@ describe('CorsErrorComponent', () => {
     const error = new Error('some error message')
     render(<CorsErrorComponent projectId={null} error={error} resetErrorBoundary={() => {}} />)
 
-    expect(screen.getByText('Before you continue...')).toBeInTheDocument()
+    expect(screen.getByText('Before you continue…')).toBeInTheDocument()
     expect(screen.getByText('some error message')).toBeInTheDocument()
     expect(screen.queryByRole('link', {name: 'Manage CORS configuration'})).toBeNull()
   })

packages/react/src/components/errors/CorsErrorComponent.tsx

@@ -1,6 +1,8 @@
 import {useMemo} from 'react'
 import {type FallbackProps} from 'react-error-boundary'
 
+import {Error} from './Error'
+
 type CorsErrorComponentProps = FallbackProps & {
   projectId: string | null
 }
@@ -15,26 +17,21 @@ export function CorsErrorComponent({projectId, error}: CorsErrorComponentProps):
     return url.toString()
   }, [origin, projectId])
   return (
-    <div className="sc-login-error">
-      <div className="sc-login-error__content">
-        <h1>Before you continue...</h1>
-        <p>
-          To access your content, you need to <b>add the following URL as a CORS origin</b> to your
-          Sanity project.
-        </p>
-        <p>
-          <code>{origin}</code>
-        </p>
-        {projectId ? (
-          <p>
-            <a href={corsUrl ?? ''} target="_blank" rel="noopener noreferrer">
-              Manage CORS configuration
-            </a>
-          </p>
-        ) : (
-          <p>{error?.message}</p>
-        )}
-      </div>
-    </div>
+    <Error
+      heading="Before you continue…"
+      {...(projectId
+        ? {
+            description:
+              'To access your content, you need to <strong>add the following URL as a CORS origin</strong> to your Sanity project.',
+            code: origin,
+            cta: {
+              text: 'Manage CORS configuration',
+              href: corsUrl,
+            },
+          }
+        : {
+            description: error?.message,
+          })}
+    />
   )
 }

packages/react/src/components/errors/Error.styles.ts

@@ -0,0 +1,35 @@
+const FONT_SANS_SERIF = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif`
+const FONT_MONOSPACE = `-apple-system-ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace`
+
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    padding: '28px',
+    fontFamily: FONT_SANS_SERIF,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '21px',
+    fontSize: '14px',
+  },
+  heading: {
+    margin: 0,
+    fontSize: '28px',
+    fontWeight: 700,
+  },
+  paragraph: {
+    margin: 0,
+  },
+  link: {
+    appearance: 'none',
+    background: 'transparent',
+    border: 0,
+    padding: 0,
+    font: 'inherit',
+    textDecoration: 'underline',
+    cursor: 'pointer',
+  },
+  code: {
+    fontFamily: FONT_MONOSPACE,
+  },
+}
+
+export default styles

packages/react/src/components/errors/Error.tsx

@@ -0,0 +1,40 @@
+import styles from './Error.styles'
+
+type ErrorProps = {
+  heading: string
+  description?: string
+  code?: string
+  cta?: {
+    text: string
+    href?: string
+    onClick?: () => void
+  }
+}
+
+export function Error({heading, description, code, cta}: ErrorProps): React.ReactNode {
+  return (
+    <div style={styles['container']}>
+      <h1 style={styles['heading']}>{heading}</h1>
+
+      {description && (
+        <p style={styles['paragraph']} dangerouslySetInnerHTML={{__html: description}} />
+      )}
+
+      {code && <code style={styles['code']}>{code}</code>}
+
+      {cta && (cta.href || cta.onClick) && (
+        <p style={styles['paragraph']}>
+          {cta.href ? (
+            <a style={styles['link']} href={cta.href} target="_blank" rel="noopener noreferrer">
+              {cta.text}
+            </a>
+          ) : (
+            <button style={styles['link']} onClick={cta.onClick}>
+              {cta.text}
+            </button>
+          )}
+        </p>
+      )}
+    </div>
+  )
+}