feat(ui): add ConfigureSSO layout components

Adds three new top-level components under packages/ui/src/components/
ConfigureSSO/ that consume the wizard primitive and the breadcrumbs
primitive:

- ConfigureSSOLayout: ProfileCard shell with the navbar sidebar and a
  body Col that owns the flex sizing for the wizard's step output.
- ConfigureSSOHeader: thin wrapper that drives the declarative
  Breadcrumbs primitive from the wizard's active steps + currentStep.
- ConfigureSSOFooter: shared Previous / Continue footer that
  dispatches to the deepest mounted wizard via the FooterActions
  context registry.

Nothing wires these in yet — that swap lands in a follow-up commit.

Author: iagodahlem

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

@@ -0,0 +1,103 @@
+import { Button, descriptors, Flex, Icon, useLocalizations } from '@/customizables';
+import { CaretLeft, CaretRight } from '@/icons';
+
+import { useFooterActions, useWizard } from './elements/Wizard';
+
+interface ConfigureSSOFooterProps {
+  /** Override label for the Previous button */
+  previousLabel?: string;
+  /** Override label for the Continue button (also overridable per step via `useRegisterContinueAction({ label })`) */
+  continueLabel?: string;
+  /** Hides the Previous button entirely */
+  hidePrevious?: boolean;
+  /** Force-disables both Previous and Continue regardless of wizard state */
+  isDisabled?: boolean;
+}
+
+/**
+ * Shared Previous / Continue footer for the ConfigureSSO surface.
+ * Dispatches to the deepest mounted wizard so Previous from a nested
+ * sub-step lands on its own previous sibling instead of jumping out
+ * to the parent wizard's previous main step
+ */
+export const ConfigureSSOFooter = ({
+  previousLabel = 'Previous',
+  continueLabel = 'Continue',
+  hidePrevious = false,
+  isDisabled = false,
+}: ConfigureSSOFooterProps): JSX.Element => {
+  const { isLoading } = useWizard();
+  const { continueAction, deepestWizardRef } = useFooterActions();
+  const { t } = useLocalizations();
+
+  const isForceDisabled = isDisabled || isLoading;
+  const deepest = deepestWizardRef.current?.current;
+  const isFirstStep = deepest?.isFirstStep ?? true;
+  const isLastStep = deepest?.isLastStep ?? true;
+
+  const continueLabelToShow =
+    typeof continueAction?.label === 'string'
+      ? continueAction.label
+      : continueAction?.label
+        ? t(continueAction.label)
+        : continueLabel;
+
+  const handleContinue = () => {
+    if (continueAction?.handler) {
+      void continueAction.handler();
+      return;
+    }
+    void deepestWizardRef.current?.current.goNext();
+  };
+
+  const handlePrevious = () => {
+    void deepestWizardRef.current?.current.goPrev();
+  };
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.footer}
+      align='center'
+      justify='end'
+      sx={theme => ({
+        gap: theme.space.$2,
+        padding: `${theme.space.$3} ${theme.space.$6}`,
+        borderTopWidth: theme.borderWidths.$normal,
+        borderTopStyle: theme.borderStyles.$solid,
+        borderTopColor: theme.colors.$borderAlpha100,
+      })}
+    >
+      {!hidePrevious && (
+        <Button
+          elementDescriptor={descriptors.configureSSOWizardFooterPreviousButton}
+          variant='outline'
+          size='sm'
+          isDisabled={isForceDisabled || isFirstStep}
+          onClick={handlePrevious}
+        >
+          <Icon
+            icon={CaretLeft}
+            size='sm'
+            sx={theme => ({ marginInlineEnd: theme.space.$1 })}
+          />
+          {previousLabel}
+        </Button>
+      )}
+      <Button
+        elementDescriptor={descriptors.configureSSOWizardFooterContinueButton}
+        variant='solid'
+        size='sm'
+        isDisabled={isForceDisabled || continueAction?.isDisabled || isLastStep}
+        isLoading={continueAction?.isLoading}
+        onClick={handleContinue}
+      >
+        {continueLabelToShow}
+        <Icon
+          icon={CaretRight}
+          size='sm'
+          sx={theme => ({ marginInlineStart: theme.space.$1 })}
+        />
+      </Button>
+    </Flex>
+  );
+};

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

@@ -0,0 +1,30 @@
+import { Breadcrumbs } from './elements/Breadcrumbs';
+import { useWizard } from './elements/Wizard';
+
+/**
+ * Renders the wizard's active steps as a numbered breadcrumb. Sits
+ * above the body in the ConfigureSSO layout. Reads navigation state
+ * from `useWizard()` and feeds the data declaratively into the
+ * `<Breadcrumbs>` primitive
+ */
+export const ConfigureSSOHeader = (): JSX.Element => {
+  const { activeSteps, currentStep, goToStep } = useWizard();
+
+  return (
+    <Breadcrumbs
+      currentId={currentStep?.id}
+      onItemClick={id => {
+        void goToStep(id);
+      }}
+    >
+      {activeSteps.map(step => (
+        <Breadcrumbs.Item
+          key={step.id}
+          id={step.id}
+          label={step.label}
+          isCompleted={step.isCompleted}
+        />
+      ))}
+    </Breadcrumbs>
+  );
+};

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

@@ -0,0 +1,121 @@
+import { useOrganization } from '@clerk/shared/react';
+import React, { type PropsWithChildren } from 'react';
+
+import { useEnvironment } from '@/contexts';
+import { Box, Col, descriptors, Flex, Icon, localizationKeys, Text, useAppearance } from '@/customizables';
+import { ApplicationLogo } from '@/elements/ApplicationLogo';
+import { NavBar, NavbarContextProvider } from '@/elements/Navbar';
+import { ProfileCard } from '@/elements/ProfileCard';
+import { BoxIcon } from '@/icons';
+
+/**
+ * Visual shell for the ConfigureSSO surface — ProfileCard with the
+ * navbar sidebar and a body content area. Children render inside the
+ * 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 => {
+  const contentRef = React.useRef<HTMLDivElement>(null);
+  const { applicationName, logoImageUrl } = useEnvironment().displayConfig;
+  const { organizationSettings } = useEnvironment();
+  const { parsedOptions } = useAppearance();
+  const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl);
+
+  return (
+    <ProfileCard.Root
+      sx={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })}
+    >
+      <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}
+        />
+        <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,
+          })}
+        >
+          <Col sx={{ flex: 1, minHeight: 0 }}>{children}</Col>
+        </Col>
+      </NavbarContextProvider>
+    </ProfileCard.Root>
+  );
+};
+
+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>
+  );
+};