feat(ui): add ConfigureSSO navbar and skeleton, refine breadcrumb sizing

Splits the navbar chrome into ConfigureSSONavbar so the layout
composition is more readable. Adds a ConfigureSSOSkeleton that
mirrors the live shell — breadcrumb placeholders, centered content
spinner, disabled footer buttons — used by the initial-load gate.

Drops the orphaned ConfigureSSOCard (replaced by inline
ProfileCard.Root + the new navbar component). Adjusts breadcrumb
bullet sizing and the separator caret to match the latest visual
direction.

Author: iagodahlem

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

@@ -3,13 +3,15 @@ import type { __experimental_ConfigureSSOProps } from '@clerk/shared/types';
 import React from 'react';
 
 import { withCoreUserGuard } from '@/contexts';
-import { descriptors, Flex, Flow, Spinner } from '@/customizables';
+import { Col, descriptors, Flow } from '@/customizables';
 import { withCardStateProvider } from '@/elements/contexts';
 import { ProfileCard } from '@/elements/ProfileCard';
 import { Route, Switch } from '@/router';
 
 import { ConfigureSSOFooter } from './ConfigureSSOFooter';
 import { ConfigureSSOHeader } from './ConfigureSSOHeader';
+import { ConfigureSSONavbar } from './ConfigureSSONavbar';
+import { ConfigureSSOSkeleton } from './ConfigureSSOSkeleton';
 import { Wizard } from './elements/Wizard';
 import { ConfigureCreateApp, ConfirmationStep, ProvideEmail, TestConfigurationStep, VerifyDomainStep } from './steps';
 
@@ -26,11 +28,33 @@ const ConfigureSSOInternal = () => {
 };
 
 const AuthenticatedContent = withCoreUserGuard(() => {
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
   return (
     <ProfileCard.Root
       sx={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })}
     >
-      <ConfigureSSOCardContent />
+      <ConfigureSSONavbar contentRef={contentRef}>
+        <Col
+          ref={contentRef}
+          elementDescriptor={descriptors.scrollBox}
+          sx={t => ({
+            backgroundColor: t.colors.$colorBackground,
+            position: 'relative',
+            borderRadius: t.radii.$lg,
+            width: '100%',
+            overflow: 'hidden',
+            borderWidth: t.borderWidths.$normal,
+            borderStyle: t.borderStyles.$solid,
+            borderColor: t.colors.$borderAlpha150,
+            marginBlock: '-1px',
+            marginInlineEnd: '-1px',
+            flex: 1,
+          })}
+        >
+          <ConfigureSSOCardContent />
+        </Col>
+      </ConfigureSSONavbar>
     </ProfileCard.Root>
   );
 });
@@ -42,19 +66,7 @@ const ConfigureSSOCardContent = () => {
 
   // Initial-load gate at root — wizard never sees isLoading
   if (isLoading && !enterpriseConnection) {
-    return (
-      <Flex
-        align='center'
-        justify='center'
-        sx={{ flex: 1 }}
-      >
-        <Spinner
-          size='xs'
-          colorScheme='neutral'
-          elementDescriptor={descriptors.spinner}
-        />
-      </Flex>
-    );
+    return <ConfigureSSOSkeleton />;
   }
 
   return (

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

@@ -0,0 +1,98 @@
+import { useOrganization } from '@clerk/shared/react/index';
+import React from 'react';
+
+import { useEnvironment } from '@/contexts';
+import { Box, Col, Flex, Icon, localizationKeys, Text, useAppearance } from '@/customizables';
+import { ApplicationLogo } from '@/elements/ApplicationLogo';
+import { NavBar, NavbarContextProvider } from '@/elements/Navbar';
+import { BoxIcon } from '@/icons';
+
+type ConfigureSSONavbarProps = React.PropsWithChildren<{
+  contentRef: React.RefObject<HTMLDivElement>;
+}>;
+
+export const ConfigureSSONavbar = ({ children, contentRef }: ConfigureSSONavbarProps) => {
+  const { parsedOptions } = useAppearance();
+  const {
+    organizationSettings,
+    displayConfig: { applicationName, logoImageUrl },
+  } = useEnvironment();
+
+  const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl);
+
+  return (
+    <NavbarContextProvider contentRef={contentRef}>
+      <NavBar
+        header={
+          <Flex
+            align='center'
+            sx={t => ({
+              gap: t.space.$2,
+              padding: `${t.space.$none} ${t.space.$3}`,
+              maxWidth: '100%',
+            })}
+          >
+            {hasLogo ? (
+              <ApplicationLogo
+                sx={t => ({ width: t.space.$9, height: t.space.$9, borderRadius: t.radii.$md, overflow: 'hidden' })}
+              />
+            ) : (
+              <Box
+                sx={t => ({
+                  width: t.space.$9,
+                  height: t.space.$9,
+                  flexShrink: 0,
+                  borderRadius: t.radii.$md,
+                  backgroundColor: t.colors.$primary500,
+                  color: t.colors.$colorPrimaryForeground,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                })}
+                aria-hidden
+              >
+                <Icon
+                  icon={BoxIcon}
+                  sx={t => ({ width: t.sizes.$4, height: t.sizes.$4 })}
+                />
+              </Box>
+            )}
+
+            <Col sx={{ minWidth: 0 }}>
+              <Text
+                as='p'
+                truncate
+              >
+                {applicationName}
+              </Text>
+              {organizationSettings.enabled && <OrganizationSidebarSubtitle />}
+            </Col>
+          </Flex>
+        }
+        titleSx={t => ({ fontSize: t.fontSizes.$lg })}
+        title={localizationKeys('configureSSO.navbar.title')}
+        routes={[]}
+        contentRef={contentRef}
+      />
+      {children}
+    </NavbarContextProvider>
+  );
+};
+
+const OrganizationSidebarSubtitle = (): JSX.Element | null => {
+  const { organization } = useOrganization();
+
+  if (!organization) {
+    return null;
+  }
+
+  return (
+    <Text
+      as='span'
+      truncate
+      sx={t => ({ color: t.colors.$colorMutedForeground })}
+    >
+      {organization?.name}
+    </Text>
+  );
+};