refactor(ui): make ConfigureSSO Wizard state-driven and render children

Replaces the route-based wizard primitive with a state-driven version:

- Wizard renders {children} directly. Header, Footer, and step
  descriptors all render as siblings inside the wizard scope. The
  Switch / Route / useRouter routing layer is gone.
- Wizard.Step is a self-rendering component now: it registers itself
  with the parent wizard via useLayoutEffect on mount, then renders
  its children only when its id matches the wizard's currentStep.
  Inactive steps render null.
- Active-step state is internal — first registered step becomes the
  default; goNext / goPrev / goToStep mutate that state. Nested
  wizards still bubble to parent.goNext on inner-last-step continue.
- Step descriptors no longer carry a path; navigation is purely by id.
- Footer now reads the deepest wizard's value from reactive context
  state (not a ref), so navigation inside a nested wizard re-renders
  the Footer and isFirstStep / isLastStep stay in sync.

Also picks up earlier in-flight work in ConfigureSSO: rename
ConfigureSSOLayout to ConfigureSSOCard (the inner Col flex wrapper
was dropped — the body Col on the card scrollbox owns sizing now),
and Header / Steps / Footer mount as siblings inside the wizard
scope so the breadcrumb and footer chrome render alongside the
active step body.

Author: iagodahlem

packages/clerk-js/sandbox/template.html

@@ -456,7 +456,7 @@
     <script
       type="text/javascript"
       src="/<%= htmlRspackPlugin.files.js[0] %>"
-      data-clerk-publishable-key="pk_test_c3VtbWFyeS1tYW4tOTkuY2xlcmsuYWNjb3VudHNzdGFnZS5kZXYk"
+      data-clerk-publishable-key="pk_test_bW9kZWwtbWFzdGlmZi04Ny5jbGVyay5hY2NvdW50c3N0YWdlLmRldiQ"
     ></script>
     <script
       type="text/javascript"

packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx

@@ -5,125 +5,117 @@ import React from 'react';
 import { withCoreUserGuard } from '@/contexts';
 import { descriptors, Flex, Flow, Spinner } from '@/customizables';
 import { withCardStateProvider } from '@/elements/contexts';
+import { ProfileCard } from '@/elements/ProfileCard';
 import { Route, Switch } from '@/router';
 
-import { ConfigureSSOFlowProvider } from './ConfigureSSOContext';
 import { ConfigureSSOFooter } from './ConfigureSSOFooter';
 import { ConfigureSSOHeader } from './ConfigureSSOHeader';
-import { ConfigureSSOLayout } from './ConfigureSSOLayout';
-import { FooterActionsProvider, Wizard } from './elements/Wizard';
+import { Wizard } from './elements/Wizard';
 import { ConfigureCreateApp, ConfirmationStep, ProvideEmail, TestConfigurationStep, VerifyDomainStep } from './steps';
 
 const ConfigureSSOInternal = () => {
   return (
     <Flow.Root flow='configureSSO'>
-      <Flow.Part>
-        <Switch>
-          <Route>
-            <AuthenticatedContent />
-          </Route>
-        </Switch>
-      </Flow.Part>
+      <Switch>
+        <Route>
+          <AuthenticatedContent />
+        </Route>
+      </Switch>
     </Flow.Root>
   );
 };
 
 const AuthenticatedContent = withCoreUserGuard(() => {
+  return (
+    <ProfileCard.Root
+      sx={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })}
+    >
+      <ConfigureSSOCardContent />
+    </ProfileCard.Root>
+  );
+});
+
+const ConfigureSSOCardContent = () => {
   const { data: enterpriseConnections, isLoading } = __internal_useUserEnterpriseConnections({ enabled: true });
   // Currently FAPI only supports one enterprise connection per user
   const enterpriseConnection = enterpriseConnections?.[0];
 
   // Initial-load gate at root — wizard never sees isLoading
-  if (isLoading && !enterpriseConnections) {
+  if (isLoading && !enterpriseConnection) {
     return (
-      <ConfigureSSOLayout>
-        <Flex
-          align='center'
-          justify='center'
-          sx={{ flex: 1 }}
-        >
-          <Spinner
-            size='xs'
-            colorScheme='neutral'
-            elementDescriptor={descriptors.spinner}
-          />
-        </Flex>
-      </ConfigureSSOLayout>
+      <Flex
+        align='center'
+        justify='center'
+        sx={{ flex: 1 }}
+      >
+        <Spinner
+          size='xs'
+          colorScheme='neutral'
+          elementDescriptor={descriptors.spinner}
+        />
+      </Flex>
     );
   }
 
   return (
-    <ConfigureSSOFlowProvider enterpriseConnection={enterpriseConnection}>
-      <FooterActionsProvider>
-        <ConfigureSSOLayout>
-          <ConfigureSSOHeader />
-          <ConfigureSSOSteps />
-          <ConfigureSSOFooter />
-        </ConfigureSSOLayout>
-      </FooterActionsProvider>
-    </ConfigureSSOFlowProvider>
+    <Wizard>
+      <ConfigureSSOHeader />
+
+      <ConfigureSSOSteps />
+
+      <ConfigureSSOFooter />
+    </Wizard>
   );
-});
+};
 
 const ConfigureSSOSteps = () => {
   const { user } = useUser();
 
   const primaryEmailAddress = user?.primaryEmailAddress;
 
   return (
-    <Wizard>
+    <>
       <Wizard.Step
         id='verify-email-domain'
-        path='verify-email-domain'
         label='Verify domain'
       >
         <Wizard>
           {!primaryEmailAddress && (
-            <Wizard.Step
-              id='provide-email'
-              path='provide-email'
-            >
+            <Wizard.Step id='provide-email'>
               <ProvideEmail />
             </Wizard.Step>
           )}
-          <Wizard.Step
-            id='verify-domain'
-            path='verify-domain'
-          >
+          <Wizard.Step id='verify-domain'>
             <VerifyDomainStep />
           </Wizard.Step>
         </Wizard>
       </Wizard.Step>
+
       <Wizard.Step
         id='configure'
-        path='configure'
         label='Configure'
       >
         <Wizard>
-          {/* TODO: Implement configure steps */}
-          <Wizard.Step
-            id='create-app'
-            path='create-app'
-          >
+          <Wizard.Step id='create-app'>
             <ConfigureCreateApp />
           </Wizard.Step>
         </Wizard>
       </Wizard.Step>
+
       <Wizard.Step
         id='test'
-        path='test'
         label='Test'
       >
         <TestConfigurationStep />
       </Wizard.Step>
+
       <Wizard.Step
         id='confirmation'
-        path='confirmation'
         label='Confirmation'
       >
         <ConfirmationStep />
       </Wizard.Step>
-    </Wizard>
+    </>
   );
 };
 

…ents/ConfigureSSO/ConfigureSSOLayout.tsx …onents/ConfigureSSO/ConfigureSSOCard.tsxpackages/ui/src/components/ConfigureSSO/ConfigureSSOLayout.tsx renamed to packages/ui/src/components/ConfigureSSO/ConfigureSSOCard.tsx packages/ui/src/components/ConfigureSSO/ConfigureSSOLayout.tsx renamed to packages/ui/src/components/ConfigureSSO/ConfigureSSOCard.tsx

@@ -14,7 +14,7 @@ import { BoxIcon } from '@/icons';
  * body Col with flex sizing so the wizard / pre-wizard gates can fill
  * the available space without needing their own sizing chrome
  */
-export const ConfigureSSOLayout = ({ children }: PropsWithChildren): JSX.Element => {
+export const ConfigureSSOCard = ({ children }: PropsWithChildren): JSX.Element => {
   const contentRef = React.useRef<HTMLDivElement>(null);
   const { applicationName, logoImageUrl } = useEnvironment().displayConfig;
   const { organizationSettings } = useEnvironment();
@@ -95,7 +95,7 @@ export const ConfigureSSOLayout = ({ children }: PropsWithChildren): JSX.Element
             flex: 1,
           })}
         >
-          <Col sx={{ flex: 1, minHeight: 0 }}>{children}</Col>
+          {children}
         </Col>
       </NavbarContextProvider>
     </ProfileCard.Root>

packages/ui/src/components/ConfigureSSO/ConfigureSSOFooter.tsx

@@ -26,13 +26,12 @@ export const ConfigureSSOFooter = ({
   hidePrevious = false,
   isDisabled = false,
 }: ConfigureSSOFooterProps): JSX.Element => {
-  const { continueAction, deepestWizardRef } = useFooterActions();
+  const { continueAction, deepestWizard } = useFooterActions();
   const { t } = useLocalizations();
 
   const isForceDisabled = isDisabled;
-  const deepest = deepestWizardRef.current?.current;
-  const isFirstStep = deepest?.isFirstStep ?? true;
-  const isLastStep = deepest?.isLastStep ?? true;
+  const isFirstStep = deepestWizard?.isFirstStep ?? true;
+  const isLastStep = deepestWizard?.isLastStep ?? true;
 
   const continueLabelToShow =
     typeof continueAction?.label === 'string'
@@ -46,11 +45,11 @@ export const ConfigureSSOFooter = ({
       void continueAction.handler();
       return;
     }
-    void deepestWizardRef.current?.current.goNext();
+    void deepestWizard?.goNext();
   };
 
   const handlePrevious = () => {
-    void deepestWizardRef.current?.current.goPrev();
+    void deepestWizard?.goPrev();
   };
 
   return (