From c0f0bfaeb7996f9d8faf5a775ac8a36e5704870e Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Mon, 28 Sep 2026 09:16:17 -0700
Subject: [PATCH 1/2] refactor(ui): share one ProtectCheckCard between the
 sign-in and sign-up protect check cards

SignInProtectCheck and SignUpProtectCheck carried the same card markup, differing only in the sign-in or sign-up localization keys. ProtectCheckCard in common/ now renders it from the runner's state and the flow. Each card keeps its runner call and continuation, its stale-visit guard, and its blocked card.
---
 .changeset/protect-check-card.md              |  2 +
 packages/ui/src/common/ProtectCheckCard.tsx   | 93 +++++++++++++++++++
 packages/ui/src/common/index.ts               |  1 +
 .../components/SignIn/SignInProtectCheck.tsx  | 71 ++------------
 .../components/SignUp/SignUpProtectCheck.tsx  | 71 ++------------
 5 files changed, 108 insertions(+), 130 deletions(-)
 create mode 100644 .changeset/protect-check-card.md
 create mode 100644 packages/ui/src/common/ProtectCheckCard.tsx

diff --git a/.changeset/protect-check-card.md b/.changeset/protect-check-card.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/protect-check-card.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/common/ProtectCheckCard.tsx b/packages/ui/src/common/ProtectCheckCard.tsx
new file mode 100644
index 00000000000..51f6bc1d82d
--- /dev/null
+++ b/packages/ui/src/common/ProtectCheckCard.tsx
@@ -0,0 +1,93 @@
+import {
+  Box,
+  Button,
+  Col,
+  descriptors,
+  Flex,
+  Flow,
+  localizationKeys,
+  Spinner,
+  useLocalizations,
+} from '../customizables';
+import { Card } from '../elements/Card';
+import { useCardState } from '../elements/contexts';
+import { Header } from '../elements/Header';
+import { useSpinDelay } from '../hooks';
+import type { ProtectCheckRunner } from '../hooks/useProtectCheckRunner';
+
+const localizationKeysByFlow = {
+  signIn: {
+    title: localizationKeys('signIn.protectCheck.title'),
+    subtitle: localizationKeys('signIn.protectCheck.subtitle'),
+    loading: localizationKeys('signIn.protectCheck.loading'),
+    retryButton: localizationKeys('signIn.protectCheck.retryButton'),
+  },
+  signUp: {
+    title: localizationKeys('signUp.protectCheck.title'),
+    subtitle: localizationKeys('signUp.protectCheck.subtitle'),
+    loading: localizationKeys('signUp.protectCheck.loading'),
+    retryButton: localizationKeys('signUp.protectCheck.retryButton'),
+  },
+};
+
+type ProtectCheckCardProps = {
+  flow: 'signIn' | 'signUp';
+  runner: ProtectCheckRunner;
+};
+
+export const ProtectCheckCard = ({ flow, runner }: ProtectCheckCardProps) => {
+  const { containerRef, isRunning, isWidgetVisible, hasError, retry } = runner;
+  const card = useCardState();
+  const { t } = useLocalizations();
+  const keys = localizationKeysByFlow[flow];
+
+  // Debounce the spinner's entrance so a near-instant check (or a script that signals its
+  // widget immediately) never flashes it. The error and widget-visibility gates stay outside
+  // the delay hook: its minimum visible duration must never outrank the handshake's "spinner is
+  // gone when the promise resolves" guarantee, nor keep a spinner next to the retry button.
+  const showSpinner = useSpinDelay(isRunning, { delay: 300 });
+
+  return (
+    <Flow.Part part='protectCheck'>
+      <Card.Root>
+        <Card.Content>
+          <Header.Root showLogo>
+            <Header.Title localizationKey={keys.title} />
+            <Header.Subtitle localizationKey={keys.subtitle} />
+          </Header.Root>
+          <Card.Alert>{card.error}</Card.Alert>
+          <Col
+            elementDescriptor={descriptors.main}
+            gap={6}
+          >
+            <Box
+              ref={containerRef}
+              id='clerk-protect-check'
+              aria-busy={isRunning}
+              // Out of flow while empty so the collapsed container adds no reserved height or flex-gap
+              // gutter above the spinner (same idiom as CaptchaElement's `gapless` mode).
+              style={{ display: 'block', alignSelf: 'center', position: isWidgetVisible ? 'static' : 'absolute' }}
+            />
+            {showSpinner && !hasError && !isWidgetVisible ? (
+              <Flex center>
+                <Spinner
+                  size='lg'
+                  colorScheme='primary'
+                  elementDescriptor={descriptors.spinner}
+                  aria-label={t(keys.loading)}
+                />
+              </Flex>
+            ) : null}
+            {hasError ? (
+              <Button
+                onClick={retry}
+                localizationKey={keys.retryButton}
+              />
+            ) : null}
+          </Col>
+        </Card.Content>
+        <Card.Footer />
+      </Card.Root>
+    </Flow.Part>
+  );
+};
diff --git a/packages/ui/src/common/index.ts b/packages/ui/src/common/index.ts
index efd8a1259db..86e484cb1ad 100644
--- a/packages/ui/src/common/index.ts
+++ b/packages/ui/src/common/index.ts
@@ -8,6 +8,7 @@ export * from './Gate';
 export * from './InfiniteListSpinner';
 export * from './NotificationCountBadge';
 export * from './PrintableComponent';
+export * from './ProtectCheckCard';
 export * from './ProviderInitialIcon';
 export * from './ProviderIcon';
 export * from './QRCode';
diff --git a/packages/ui/src/components/SignIn/SignInProtectCheck.tsx b/packages/ui/src/components/SignIn/SignInProtectCheck.tsx
index 80f312e24cd..942a90a25a0 100644
--- a/packages/ui/src/components/SignIn/SignInProtectCheck.tsx
+++ b/packages/ui/src/components/SignIn/SignInProtectCheck.tsx
@@ -3,25 +3,11 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignInResource } from '@clerk/shared/types';
 import { useEffect, useRef, useState } from 'react';
 
-import { Card } from '@/ui/elements/Card';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
-import { Header } from '@/ui/elements/Header';
 import { actionBlockedDetailsFrom } from '@/ui/utils/actionBlocked';
 
-import { ActionBlockedCard, withRedirectToAfterSignIn } from '../../common';
+import { ActionBlockedCard, ProtectCheckCard, withRedirectToAfterSignIn } from '../../common';
 import { useCoreSignIn, useSignInContext } from '../../contexts';
-import {
-  Box,
-  Button,
-  Col,
-  descriptors,
-  Flex,
-  Flow,
-  localizationKeys,
-  Spinner,
-  useLocalizations,
-} from '../../customizables';
-import { useSpinDelay } from '../../hooks';
 import { useNavigateToFlowStart } from '../../hooks/useNavigateToFlowStart';
 import { useProtectCheckRunner } from '../../hooks/useProtectCheckRunner';
 import { useRouter } from '../../router';
@@ -35,7 +21,6 @@ import {
 
 function SignInProtectCheckInternal(): JSX.Element | null {
   const card = useCardState();
-  const { t } = useLocalizations();
   const signIn = useCoreSignIn();
   const { navigate } = useRouter();
   const { navigateToFlowStart } = useNavigateToFlowStart();
@@ -62,7 +47,7 @@ function SignInProtectCheckInternal(): JSX.Element | null {
     }
   }, [everSawProtectCheck, navigateToFlowStart, signIn.protectCheck]);
 
-  const { containerRef, isRunning, isWidgetVisible, hasError, retry } = useProtectCheckRunner<SignInResource>({
+  const runner = useProtectCheckRunner<SignInResource>({
     getProtectCheck: () => signIn.protectCheck,
     getResource: () => signIn,
     reload: () => signIn.reload(),
@@ -127,13 +112,6 @@ function SignInProtectCheckInternal(): JSX.Element | null {
     },
   });
 
-  // Debounce the spinner's entrance so a near-instant check (or a script that signals its
-  // widget immediately) never flashes it — the card header alone carries the first ~300ms.
-  // The error and widget-visibility gates stay OUTSIDE the delay hook below: its minimum
-  // visible duration must never outrank the handshake's "spinner is gone when the promise
-  // resolves" guarantee, nor keep a spinner next to the retry button.
-  const showSpinner = useSpinDelay(isRunning, { delay: 300 });
-
   // Stale/direct visit that never had a check: render nothing while the flow-start redirect
   // scheduled above kicks in, instead of flashing the card shell for one paint. Must stay
   // below every hook call.
@@ -147,47 +125,10 @@ function SignInProtectCheckInternal(): JSX.Element | null {
   }
 
   return (
-    <Flow.Part part='protectCheck'>
-      <Card.Root>
-        <Card.Content>
-          <Header.Root showLogo>
-            <Header.Title localizationKey={localizationKeys('signIn.protectCheck.title')} />
-            <Header.Subtitle localizationKey={localizationKeys('signIn.protectCheck.subtitle')} />
-          </Header.Root>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Col
-            elementDescriptor={descriptors.main}
-            gap={6}
-          >
-            <Box
-              ref={containerRef}
-              id='clerk-protect-check'
-              aria-busy={isRunning}
-              // Out of flow while empty so the collapsed container adds no reserved height or flex-gap
-              // gutter above the spinner (same idiom as CaptchaElement's `gapless` mode).
-              style={{ display: 'block', alignSelf: 'center', position: isWidgetVisible ? 'static' : 'absolute' }}
-            />
-            {showSpinner && !hasError && !isWidgetVisible ? (
-              <Flex center>
-                <Spinner
-                  size='lg'
-                  colorScheme='primary'
-                  elementDescriptor={descriptors.spinner}
-                  aria-label={t(localizationKeys('signIn.protectCheck.loading'))}
-                />
-              </Flex>
-            ) : null}
-            {hasError ? (
-              <Button
-                onClick={retry}
-                localizationKey={localizationKeys('signIn.protectCheck.retryButton')}
-              />
-            ) : null}
-          </Col>
-        </Card.Content>
-        <Card.Footer />
-      </Card.Root>
-    </Flow.Part>
+    <ProtectCheckCard
+      flow='signIn'
+      runner={runner}
+    />
   );
 }
 
diff --git a/packages/ui/src/components/SignUp/SignUpProtectCheck.tsx b/packages/ui/src/components/SignUp/SignUpProtectCheck.tsx
index 9654cbef133..7a162e3b7d8 100644
--- a/packages/ui/src/components/SignUp/SignUpProtectCheck.tsx
+++ b/packages/ui/src/components/SignUp/SignUpProtectCheck.tsx
@@ -1,25 +1,11 @@
 import type { SignUpProps, SignUpResource } from '@clerk/shared/types';
 import { type ComponentType, useEffect, useRef, useState } from 'react';
 
-import { Card } from '@/ui/elements/Card';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
-import { Header } from '@/ui/elements/Header';
 import { actionBlockedDetailsFrom } from '@/ui/utils/actionBlocked';
 
-import { ActionBlockedCard, withRedirectToAfterSignUp } from '../../common';
+import { ActionBlockedCard, ProtectCheckCard, withRedirectToAfterSignUp } from '../../common';
 import { useCoreSignUp } from '../../contexts';
-import {
-  Box,
-  Button,
-  Col,
-  descriptors,
-  Flex,
-  Flow,
-  localizationKeys,
-  Spinner,
-  useLocalizations,
-} from '../../customizables';
-import { useSpinDelay } from '../../hooks';
 import { useNavigateToFlowStart } from '../../hooks/useNavigateToFlowStart';
 import { useProtectCheckRunner } from '../../hooks/useProtectCheckRunner';
 import { useCompleteSignUpFlow } from './useCompleteSignUpFlow';
@@ -45,7 +31,6 @@ function SignUpProtectCheckInternal({
   protectCheckPath = '.',
 }: SignUpProtectCheckProps = {}): JSX.Element | null {
   const card = useCardState();
-  const { t } = useLocalizations();
   const signUp = useCoreSignUp();
   const { navigateToFlowStart } = useNavigateToFlowStart();
   const completeSignUpFlow = useCompleteSignUpFlow();
@@ -67,7 +52,7 @@ function SignUpProtectCheckInternal({
     }
   }, [everSawProtectCheck, navigateToFlowStart, signUp.protectCheck]);
 
-  const { containerRef, isRunning, isWidgetVisible, hasError, retry } = useProtectCheckRunner<SignUpResource>({
+  const runner = useProtectCheckRunner<SignUpResource>({
     getProtectCheck: () => signUp.protectCheck,
     getResource: () => signUp,
     reload: () => signUp.reload(),
@@ -90,13 +75,6 @@ function SignUpProtectCheckInternal({
     },
   });
 
-  // Debounce the spinner's entrance so a near-instant check (or a script that signals its
-  // widget immediately) never flashes it — the card header alone carries the first ~300ms.
-  // The error and widget-visibility gates stay OUTSIDE the delay hook (in the JSX below): its
-  // minimum visible duration must never outrank the handshake's "spinner is gone when the
-  // promise resolves" guarantee, nor keep a spinner next to the retry button.
-  const showSpinner = useSpinDelay(isRunning, { delay: 300 });
-
   // Stale/direct visit that never had a check: render nothing while the
   // flow-start redirect scheduled above kicks in, instead of flashing the card
   // shell for one paint. Must stay below every hook call.
@@ -110,47 +88,10 @@ function SignUpProtectCheckInternal({
   }
 
   return (
-    <Flow.Part part='protectCheck'>
-      <Card.Root>
-        <Card.Content>
-          <Header.Root showLogo>
-            <Header.Title localizationKey={localizationKeys('signUp.protectCheck.title')} />
-            <Header.Subtitle localizationKey={localizationKeys('signUp.protectCheck.subtitle')} />
-          </Header.Root>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Col
-            elementDescriptor={descriptors.main}
-            gap={6}
-          >
-            <Box
-              ref={containerRef}
-              id='clerk-protect-check'
-              aria-busy={isRunning}
-              // Out of flow while empty so the collapsed container adds no reserved height or flex-gap
-              // gutter above the spinner (same idiom as CaptchaElement's `gapless` mode).
-              style={{ display: 'block', alignSelf: 'center', position: isWidgetVisible ? 'static' : 'absolute' }}
-            />
-            {showSpinner && !hasError && !isWidgetVisible ? (
-              <Flex center>
-                <Spinner
-                  size='lg'
-                  colorScheme='primary'
-                  elementDescriptor={descriptors.spinner}
-                  aria-label={t(localizationKeys('signUp.protectCheck.loading'))}
-                />
-              </Flex>
-            ) : null}
-            {hasError ? (
-              <Button
-                onClick={retry}
-                localizationKey={localizationKeys('signUp.protectCheck.retryButton')}
-              />
-            ) : null}
-          </Col>
-        </Card.Content>
-        <Card.Footer />
-      </Card.Root>
-    </Flow.Part>
+    <ProtectCheckCard
+      flow='signUp'
+      runner={runner}
+    />
   );
 }
 

From 4808118e824f5eceb4fc00c4ac91ec8cb93b6568 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Mon, 28 Sep 2026 09:43:27 -0700
Subject: [PATCH 2/2] refactor(ui): keep ProtectCheckCard out of the shared ui
 chunk and read state only from its props

The card moves from common/ to components/ProtectCheck, since everything outside src/components lands in the ui-common chunk that every component loads. The hook's return type gets its own name, ProtectCheckRunnerState, and it returns the error text so the card no longer reads card state itself. The spinner comment is restored verbatim from SignInProtectCheck.
---
 packages/ui/src/common/index.ts               |  1 -
 .../ProtectCheck}/ProtectCheckCard.tsx        | 30 +++++++++----------
 .../components/SignIn/SignInProtectCheck.tsx  |  3 +-
 .../components/SignUp/SignUpProtectCheck.tsx  |  3 +-
 .../ui/src/hooks/useProtectCheckRunner.ts     | 10 +++----
 5 files changed, 24 insertions(+), 23 deletions(-)
 rename packages/ui/src/{common => components/ProtectCheck}/ProtectCheckCard.tsx (74%)

diff --git a/packages/ui/src/common/index.ts b/packages/ui/src/common/index.ts
index 86e484cb1ad..efd8a1259db 100644
--- a/packages/ui/src/common/index.ts
+++ b/packages/ui/src/common/index.ts
@@ -8,7 +8,6 @@ export * from './Gate';
 export * from './InfiniteListSpinner';
 export * from './NotificationCountBadge';
 export * from './PrintableComponent';
-export * from './ProtectCheckCard';
 export * from './ProviderInitialIcon';
 export * from './ProviderIcon';
 export * from './QRCode';
diff --git a/packages/ui/src/common/ProtectCheckCard.tsx b/packages/ui/src/components/ProtectCheck/ProtectCheckCard.tsx
similarity index 74%
rename from packages/ui/src/common/ProtectCheckCard.tsx
rename to packages/ui/src/components/ProtectCheck/ProtectCheckCard.tsx
index 51f6bc1d82d..40746674e65 100644
--- a/packages/ui/src/common/ProtectCheckCard.tsx
+++ b/packages/ui/src/components/ProtectCheck/ProtectCheckCard.tsx
@@ -1,3 +1,6 @@
+import { Card } from '@/ui/elements/Card';
+import { Header } from '@/ui/elements/Header';
+
 import {
   Box,
   Button,
@@ -8,12 +11,9 @@ import {
   localizationKeys,
   Spinner,
   useLocalizations,
-} from '../customizables';
-import { Card } from '../elements/Card';
-import { useCardState } from '../elements/contexts';
-import { Header } from '../elements/Header';
-import { useSpinDelay } from '../hooks';
-import type { ProtectCheckRunner } from '../hooks/useProtectCheckRunner';
+} from '../../customizables';
+import { useSpinDelay } from '../../hooks';
+import type { ProtectCheckRunnerState } from '../../hooks/useProtectCheckRunner';
 
 const localizationKeysByFlow = {
   signIn: {
@@ -32,19 +32,19 @@ const localizationKeysByFlow = {
 
 type ProtectCheckCardProps = {
   flow: 'signIn' | 'signUp';
-  runner: ProtectCheckRunner;
+  runner: ProtectCheckRunnerState;
 };
 
 export const ProtectCheckCard = ({ flow, runner }: ProtectCheckCardProps) => {
-  const { containerRef, isRunning, isWidgetVisible, hasError, retry } = runner;
-  const card = useCardState();
+  const { containerRef, isRunning, isWidgetVisible, error, retry } = runner;
   const { t } = useLocalizations();
   const keys = localizationKeysByFlow[flow];
 
   // Debounce the spinner's entrance so a near-instant check (or a script that signals its
-  // widget immediately) never flashes it. The error and widget-visibility gates stay outside
-  // the delay hook: its minimum visible duration must never outrank the handshake's "spinner is
-  // gone when the promise resolves" guarantee, nor keep a spinner next to the retry button.
+  // widget immediately) never flashes it — the card header alone carries the first ~300ms.
+  // The error and widget-visibility gates stay OUTSIDE the delay hook below: its minimum
+  // visible duration must never outrank the handshake's "spinner is gone when the promise
+  // resolves" guarantee, nor keep a spinner next to the retry button.
   const showSpinner = useSpinDelay(isRunning, { delay: 300 });
 
   return (
@@ -55,7 +55,7 @@ export const ProtectCheckCard = ({ flow, runner }: ProtectCheckCardProps) => {
             <Header.Title localizationKey={keys.title} />
             <Header.Subtitle localizationKey={keys.subtitle} />
           </Header.Root>
-          <Card.Alert>{card.error}</Card.Alert>
+          <Card.Alert>{error}</Card.Alert>
           <Col
             elementDescriptor={descriptors.main}
             gap={6}
@@ -68,7 +68,7 @@ export const ProtectCheckCard = ({ flow, runner }: ProtectCheckCardProps) => {
               // gutter above the spinner (same idiom as CaptchaElement's `gapless` mode).
               style={{ display: 'block', alignSelf: 'center', position: isWidgetVisible ? 'static' : 'absolute' }}
             />
-            {showSpinner && !hasError && !isWidgetVisible ? (
+            {showSpinner && !error && !isWidgetVisible ? (
               <Flex center>
                 <Spinner
                   size='lg'
@@ -78,7 +78,7 @@ export const ProtectCheckCard = ({ flow, runner }: ProtectCheckCardProps) => {
                 />
               </Flex>
             ) : null}
-            {hasError ? (
+            {error ? (
               <Button
                 onClick={retry}
                 localizationKey={keys.retryButton}
diff --git a/packages/ui/src/components/SignIn/SignInProtectCheck.tsx b/packages/ui/src/components/SignIn/SignInProtectCheck.tsx
index 942a90a25a0..03e080e4a70 100644
--- a/packages/ui/src/components/SignIn/SignInProtectCheck.tsx
+++ b/packages/ui/src/components/SignIn/SignInProtectCheck.tsx
@@ -6,11 +6,12 @@ import { useEffect, useRef, useState } from 'react';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { actionBlockedDetailsFrom } from '@/ui/utils/actionBlocked';
 
-import { ActionBlockedCard, ProtectCheckCard, withRedirectToAfterSignIn } from '../../common';
+import { ActionBlockedCard, withRedirectToAfterSignIn } from '../../common';
 import { useCoreSignIn, useSignInContext } from '../../contexts';
 import { useNavigateToFlowStart } from '../../hooks/useNavigateToFlowStart';
 import { useProtectCheckRunner } from '../../hooks/useProtectCheckRunner';
 import { useRouter } from '../../router';
+import { ProtectCheckCard } from '../ProtectCheck/ProtectCheckCard';
 import { buildSignInOAuthCallbackParams } from './buildOAuthCallbackParams';
 import {
   isProtectCheckRequiredError,
diff --git a/packages/ui/src/components/SignUp/SignUpProtectCheck.tsx b/packages/ui/src/components/SignUp/SignUpProtectCheck.tsx
index 7a162e3b7d8..dbebc37fa31 100644
--- a/packages/ui/src/components/SignUp/SignUpProtectCheck.tsx
+++ b/packages/ui/src/components/SignUp/SignUpProtectCheck.tsx
@@ -4,10 +4,11 @@ import { type ComponentType, useEffect, useRef, useState } from 'react';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { actionBlockedDetailsFrom } from '@/ui/utils/actionBlocked';
 
-import { ActionBlockedCard, ProtectCheckCard, withRedirectToAfterSignUp } from '../../common';
+import { ActionBlockedCard, withRedirectToAfterSignUp } from '../../common';
 import { useCoreSignUp } from '../../contexts';
 import { useNavigateToFlowStart } from '../../hooks/useNavigateToFlowStart';
 import { useProtectCheckRunner } from '../../hooks/useProtectCheckRunner';
+import { ProtectCheckCard } from '../ProtectCheck/ProtectCheckCard';
 import { useCompleteSignUpFlow } from './useCompleteSignUpFlow';
 
 /**
diff --git a/packages/ui/src/hooks/useProtectCheckRunner.ts b/packages/ui/src/hooks/useProtectCheckRunner.ts
index ac22da7425d..885fcd98f53 100644
--- a/packages/ui/src/hooks/useProtectCheckRunner.ts
+++ b/packages/ui/src/hooks/useProtectCheckRunner.ts
@@ -19,7 +19,7 @@ export interface ProtectCheckRunnerParams<TResource> extends ProtectCheckRunnerR
   onResolved: (resource: TResource, isCancelled: () => boolean) => Promise<unknown>;
 }
 
-export interface ProtectCheckRunner {
+export interface ProtectCheckRunnerState {
   containerRef: React.MutableRefObject<HTMLDivElement | null>;
   isRunning: boolean;
   /**
@@ -28,8 +28,8 @@ export interface ProtectCheckRunner {
    * callers should hide their own spinner and give the container layout space.
    */
   isWidgetVisible: boolean;
-  /** Whether the card is currently showing a (recoverable) error. */
-  hasError: boolean;
+  /** The (recoverable) error the card is currently showing, if any. */
+  error: string | undefined;
   /** Clears the error and re-runs the challenge from scratch. */
   retry: () => void;
 }
@@ -41,7 +41,7 @@ export interface ProtectCheckRunner {
  *
  * Must be called from within a `CardStateProvider`.
  */
-export function useProtectCheckRunner<TResource>(params: ProtectCheckRunnerParams<TResource>): ProtectCheckRunner {
+export function useProtectCheckRunner<TResource>(params: ProtectCheckRunnerParams<TResource>): ProtectCheckRunnerState {
   const card = useCardState();
 
   // Override for the module-LOAD bound only (see `executeProtectCheck`), resolved loader first
@@ -252,5 +252,5 @@ export function useProtectCheckRunner<TResource>(params: ProtectCheckRunnerParam
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return { containerRef, isRunning, isWidgetVisible, hasError: !!card.error, retry };
+  return { containerRef, isRunning, isWidgetVisible, error: card.error, retry };
 }