@petrarca/sonnet-shell 0.5.0 → 0.7.0

package/dist/auth/index.js

@@ -1,54 +1,66 @@
 // src/auth/Login.tsx
 import { useState as useState2, useEffect, useCallback as useCallback2 } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
+import { Alert as Alert2 } from "@petrarca/sonnet-ui";
 import { Button as Button2 } from "@petrarca/sonnet-ui";
 import { Input } from "@petrarca/sonnet-ui";
 import { Label } from "@petrarca/sonnet-ui";
-import { Alert as Alert2 } from "@petrarca/sonnet-ui";
+import { Spinner } from "@petrarca/sonnet-ui";
 
-// src/auth/TenantSelection.tsx
+// src/auth/OrgSelection.tsx
 import { useState, useCallback } from "react";
 import { Check } from "lucide-react";
 import { Button } from "@petrarca/sonnet-ui";
 import { Alert } from "@petrarca/sonnet-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
-function TenantSelection({
-  tenants,
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function OrgSelection({
+  orgs,
   isLoading,
   error,
-  onSelect
+  onSelect,
+  emptyAction
 }) {
   const [selectedId, setSelectedId] = useState(null);
+  const isEmpty = orgs.length === 0;
   const handleContinue = useCallback(() => {
-    if (selectedId) {
-      onSelect(selectedId);
-    }
+    if (selectedId) onSelect(selectedId);
   }, [selectedId, onSelect]);
-  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen bg-slate-100", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md bg-white rounded-lg shadow-lg p-8", children: [
-    /* @__PURE__ */ jsx("h1", { className: "text-center mb-2", children: "Select Tenant" }),
-    /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-muted-foreground mb-6", children: "Choose the tenant you want to work in." }),
-    error && /* @__PURE__ */ jsx(Alert, { className: "mb-4 border-red-200 bg-red-50 text-red-700", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: error }) }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-6 max-h-64 overflow-y-auto", children: tenants.map((tenant) => /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => setSelectedId(tenant.id),
-        className: `w-full flex items-center justify-between px-4 py-3 rounded-md border text-left text-sm transition-colors ${selectedId === tenant.id ? "border-blue-500 bg-blue-50 text-blue-900" : "border-slate-200 hover:bg-slate-50"}`,
-        children: [
-          /* @__PURE__ */ jsx("span", { children: tenant.name }),
-          selectedId === tenant.id && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-blue-500" })
-        ]
-      },
-      tenant.id
-    )) }),
-    /* @__PURE__ */ jsx(
-      Button,
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen bg-muted px-4", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm bg-card rounded-lg shadow-sm border border-border p-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-foreground text-center", children: "Select organization" }),
+      /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-muted-foreground mt-1", children: isEmpty ? "No organizations assigned to your account." : "Choose the organization you want to work in." })
+    ] }),
+    error ? /* @__PURE__ */ jsx(
+      Alert,
       {
-        onClick: handleContinue,
-        disabled: !selectedId || isLoading,
-        className: "w-full",
-        children: isLoading ? "Loading..." : "Continue"
+        variant: "destructive",
+        className: "mb-4 bg-destructive/10 text-sm py-2.5 px-3",
+        children: error
       }
-    )
+    ) : null,
+    isEmpty ? emptyAction ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: emptyAction }) : null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-6 max-h-64 overflow-y-auto", children: orgs.map((org) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setSelectedId(org.id),
+          className: `w-full flex items-center justify-between px-4 py-3 rounded-md border text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${selectedId === org.id ? "border-primary bg-state-selected text-foreground" : "border-border hover:bg-state-hover text-foreground"}`,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: org.name }),
+            selectedId === org.id ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-primary shrink-0" }) : null
+          ]
+        },
+        org.id
+      )) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleContinue,
+          disabled: !selectedId || isLoading,
+          className: "w-full h-10",
+          children: isLoading ? "Loading..." : "Continue"
+        }
+      )
+    ] })
   ] }) });
 }
 
@@ -60,43 +72,80 @@ function useLoginFlow(props) {
     config,
     isAuthenticated,
     activeTenantId,
-    tenants,
+    orgs,
     onLogin,
     onFetchCurrentUser,
-    onSwitchTenant,
-    onClearError
+    onSelectOrg,
+    onClearError,
+    onDiscover,
+    onExternalLogin,
+    requiresOrgSelection = true
   } = props;
   const navigate = useNavigate();
   const location = useLocation();
   const locationState = location.state;
+  const identifierFirst = Boolean(onDiscover);
+  const requestedStep = requiresOrgSelection && locationState?.step ? locationState.step : void 0;
+  const initial = requestedStep ?? (identifierFirst ? "identifier" : "credentials");
   const [redirectTo] = useState2(() => locationState?.from?.pathname ?? "/");
-  const [step, setStep] = useState2(
-    () => locationState?.step ?? "credentials"
-  );
+  const [step, setStep] = useState2(initial);
   const [identifier, setIdentifier] = useState2("");
   const [password, setPassword] = useState2("");
-  const [tenantError, setTenantError] = useState2(null);
+  const [providers, setProviders] = useState2([]);
+  const [discoverError, setDiscoverError] = useState2(null);
+  const [isRedirecting, setIsRedirecting] = useState2(false);
+  const [orgError, setOrgError] = useState2(null);
   useEffect(() => {
-    if (isAuthenticated && activeTenantId)
+    if (isAuthenticated && (activeTenantId || !requiresOrgSelection))
       navigate(redirectTo, { replace: true });
-  }, [isAuthenticated, activeTenantId, navigate, redirectTo]);
+  }, [
+    isAuthenticated,
+    activeTenantId,
+    requiresOrgSelection,
+    navigate,
+    redirectTo
+  ]);
   useEffect(() => {
-    if (!isAuthenticated || !tenants || activeTenantId) return;
-    if (tenants.length === 1) {
-      onSwitchTenant(tenants[0].id).catch((err) => {
-        setTenantError(
-          normalizeError(err).message || "Failed to select tenant"
+    if (!requiresOrgSelection) return;
+    if (!isAuthenticated || !orgs || activeTenantId) return;
+    if (orgs.length === 1) {
+      onSelectOrg(orgs[0].id).catch((err) => {
+        setOrgError(
+          normalizeError(err).message || "Failed to select organization"
         );
-        setStep("tenant-selection");
+        setStep("org-selection");
       });
-    } else if (tenants.length > 1) {
-      setStep("tenant-selection");
+    } else if (orgs.length > 1) {
+      setStep("org-selection");
     }
-  }, [isAuthenticated, tenants, activeTenantId, onSwitchTenant]);
+  }, [
+    requiresOrgSelection,
+    isAuthenticated,
+    orgs,
+    activeTenantId,
+    onSelectOrg
+  ]);
   useEffect(() => {
     if (config?.ui.direct_redirect)
       window.location.href = config.ui.direct_redirect;
   }, [config]);
+  const handleIdentifierSubmit = useCallback2(
+    async (e) => {
+      e.preventDefault();
+      if (!onDiscover || !identifier.trim()) return;
+      setDiscoverError(null);
+      try {
+        const resolved = await onDiscover(identifier.trim());
+        setProviders(resolved);
+        setStep("auth");
+      } catch (err) {
+        setDiscoverError(
+          normalizeError(err).message || "Failed to look up providers"
+        );
+      }
+    },
+    [identifier, onDiscover]
+  );
   const handleCredentialSubmit = useCallback2(
     async (e) => {
       e.preventDefault();
@@ -109,94 +158,176 @@ function useLoginFlow(props) {
     },
     [identifier, password, onLogin, onFetchCurrentUser, onClearError]
   );
-  const handleTenantSelect = useCallback2(
+  const handleExternalLogin = useCallback2(
+    async (provider) => {
+      if (!onExternalLogin) return;
+      setIsRedirecting(true);
+      try {
+        await onExternalLogin(provider);
+      } catch {
+        setIsRedirecting(false);
+      }
+    },
+    [onExternalLogin]
+  );
+  const handleOrgSelect = useCallback2(
     async (id) => {
-      setTenantError(null);
+      setOrgError(null);
       try {
-        await onSwitchTenant(id);
+        await onSelectOrg(id);
       } catch (err) {
-        setTenantError(
-          normalizeError(err).message || "Failed to select tenant"
+        setOrgError(
+          normalizeError(err).message || "Failed to select organization"
         );
       }
     },
-    [onSwitchTenant]
+    [onSelectOrg]
   );
+  const goBack = useCallback2(() => {
+    setPassword("");
+    setDiscoverError(null);
+    onClearError();
+    setStep(identifierFirst ? "identifier" : "credentials");
+  }, [identifierFirst, onClearError]);
   return {
     step,
     identifier,
     setIdentifier,
     password,
     setPassword,
-    tenantError,
+    providers,
+    discoverError,
+    isRedirecting,
+    orgError,
+    handleIdentifierSubmit,
     handleCredentialSubmit,
-    handleTenantSelect
+    handleExternalLogin,
+    handleOrgSelect,
+    goBack
   };
 }
+function resolveScreen(args) {
+  if (args.directRedirect || args.isRedirecting) return "redirecting";
+  const canShowOrgPicker = args.requiresOrgSelection && args.step === "org-selection" && args.orgsLoaded;
+  if (args.isAuthenticated && !args.activeTenantId && !canShowOrgPicker)
+    return "redirecting";
+  return canShowOrgPicker ? "org-selection" : "form";
+}
 function Login(props) {
-  const { config, isLoading, error, tenants } = props;
+  const {
+    config,
+    isAuthenticated,
+    activeTenantId,
+    isLoading,
+    isDiscovering,
+    error,
+    orgs,
+    appName,
+    logoUrl,
+    orgEmptyAction,
+    requiresOrgSelection = true
+  } = props;
   const flow = useLoginFlow(props);
-  if (config?.ui.direct_redirect) {
-    return /* @__PURE__ */ jsx2(RedirectingMessage, {});
-  }
-  if (flow.step === "tenant-selection" && tenants) {
+  const screen = resolveScreen({
+    isRedirecting: flow.isRedirecting,
+    directRedirect: Boolean(config?.ui.direct_redirect),
+    isAuthenticated,
+    activeTenantId,
+    requiresOrgSelection,
+    step: flow.step,
+    orgsLoaded: orgs !== null
+  });
+  if (screen === "redirecting") return /* @__PURE__ */ jsx2(RedirectingMessage, {});
+  if (screen === "org-selection") {
     return /* @__PURE__ */ jsx2(
-      TenantSelection,
+      OrgSelection,
       {
-        tenants,
+        orgs: orgs ?? [],
         isLoading,
-        error: flow.tenantError,
-        onSelect: flow.handleTenantSelect
+        error: flow.orgError,
+        onSelect: flow.handleOrgSelect,
+        emptyAction: orgEmptyAction
       }
     );
   }
-  return /* @__PURE__ */ jsx2(
-    CredentialPage,
-    {
-      config,
-      error,
-      isLoading,
-      flow
-    }
-  );
-}
-function RedirectingMessage() {
-  return /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground", children: "Redirecting to authentication..." }) });
-}
-function CredentialPage({
-  config,
-  error,
-  isLoading,
-  flow
-}) {
-  return /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center min-h-screen bg-slate-100", children: /* @__PURE__ */ jsxs2("div", { className: "w-full max-w-md bg-white rounded-lg shadow-lg p-8", children: [
-    /* @__PURE__ */ jsx2("h1", { className: "text-center mb-6", children: "Sign In" }),
-    error && /* @__PURE__ */ jsx2(Alert2, { className: "mb-4 border-red-200 bg-red-50 text-red-700", children: /* @__PURE__ */ jsx2("p", { className: "text-sm", children: error }) }),
-    config?.features.local_auth && /* @__PURE__ */ jsx2(
-      CredentialForm,
+  return /* @__PURE__ */ jsx2(PageShell, { children: /* @__PURE__ */ jsxs2(Card, { children: [
+    flow.step === "identifier" && /* @__PURE__ */ jsx2(
+      IdentifierStep,
       {
+        appName,
+        logoUrl,
         identifier: flow.identifier,
+        error: flow.discoverError,
+        isLoading: isDiscovering ?? false,
+        onIdentifierChange: flow.setIdentifier,
+        onSubmit: flow.handleIdentifierSubmit
+      }
+    ),
+    flow.step === "auth" && /* @__PURE__ */ jsx2(
+      AuthStep,
+      {
+        appName,
+        logoUrl,
+        identifier: flow.identifier,
+        providers: flow.providers,
         password: flow.password,
+        error,
         isLoading,
-        onIdentifierChange: flow.setIdentifier,
         onPasswordChange: flow.setPassword,
-        onSubmit: flow.handleCredentialSubmit
+        onCredentialSubmit: flow.handleCredentialSubmit,
+        onExternalLogin: flow.handleExternalLogin,
+        onBack: flow.goBack
       }
     ),
-    config?.features.oauth && config.oauth?.providers && /* @__PURE__ */ jsx2(OAuthProviders, { providers: config.oauth.providers })
+    flow.step === "credentials" && /* @__PURE__ */ jsx2(
+      CredentialsStep,
+      {
+        appName,
+        logoUrl,
+        config,
+        identifier: flow.identifier,
+        password: flow.password,
+        error,
+        isLoading,
+        onIdentifierChange: flow.setIdentifier,
+        onPasswordChange: flow.setPassword,
+        onSubmit: flow.handleCredentialSubmit,
+        onExternalLogin: flow.handleExternalLogin
+      }
+    )
   ] }) });
 }
-function CredentialForm({
+function PageShell({ children }) {
+  return /* @__PURE__ */ jsx2("div", { className: "flex flex-col items-center justify-center min-h-screen bg-muted px-4", children });
+}
+function Card({ children }) {
+  return /* @__PURE__ */ jsx2("div", { className: "w-full max-w-sm bg-card rounded-lg border border-border shadow-sm p-8", children });
+}
+function BrandHeader({
+  appName,
+  logoUrl
+}) {
+  if (!appName && !logoUrl) return null;
+  return /* @__PURE__ */ jsx2("div", { className: "flex flex-col items-center mb-6", children: logoUrl ? /* @__PURE__ */ jsx2("img", { src: logoUrl, alt: appName ?? "Logo", className: "h-10 w-auto" }) : /* @__PURE__ */ jsx2("span", { className: "text-lg font-semibold text-muted-foreground tracking-wide", children: appName }) });
+}
+function IdentifierStep({
+  appName,
+  logoUrl,
   identifier,
-  password,
+  error,
   isLoading,
   onIdentifierChange,
-  onPasswordChange,
   onSubmit
 }) {
-  return /* @__PURE__ */ jsxs2("form", { onSubmit, className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx2(Label, { htmlFor: "identifier", children: "Email or Username" }),
+  return /* @__PURE__ */ jsxs2("form", { onSubmit, className: "space-y-6", children: [
+    /* @__PURE__ */ jsx2(BrandHeader, { appName, logoUrl }),
+    /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-semibold text-foreground leading-tight", children: "Welcome" }),
+      /* @__PURE__ */ jsx2("p", { className: "mt-2 text-sm text-muted-foreground", children: "Enter your email or username to continue." })
+    ] }),
+    error ? /* @__PURE__ */ jsx2(ErrorAlert, { message: error }) : null,
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx2(Label, { htmlFor: "identifier", className: "mb-1.5 block", children: "Email or username" }),
       /* @__PURE__ */ jsx2(
         Input,
         {
@@ -205,55 +336,239 @@ function CredentialForm({
           value: identifier,
           onChange: (e) => onIdentifierChange(e.target.value),
           required: true,
-          placeholder: "Enter your email or username"
+          autoFocus: true,
+          autoComplete: "email",
+          placeholder: "you@company.com"
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx2(Label, { htmlFor: "password", children: "Password" }),
+    /* @__PURE__ */ jsx2(
+      PrimaryButton,
+      {
+        type: "submit",
+        disabled: isLoading || !identifier.trim(),
+        loading: isLoading,
+        loadingText: "Looking up...",
+        children: "Continue"
+      }
+    )
+  ] });
+}
+function AuthStep({
+  appName,
+  logoUrl,
+  identifier,
+  providers,
+  password,
+  error,
+  isLoading,
+  onPasswordChange,
+  onCredentialSubmit,
+  onExternalLogin,
+  onBack
+}) {
+  const external = providers.filter((p) => p.type === "external");
+  const hasLocal = providers.some((p) => p.type === "local");
+  const hasBoth = external.length > 0 && hasLocal;
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx2(BrandHeader, { appName, logoUrl }),
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          className: "flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors mb-4",
+          children: [
+            /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: "\u2190" }),
+            " Back"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-semibold text-foreground leading-tight", children: "Welcome back" }),
+      /* @__PURE__ */ jsx2("p", { className: "mt-1 text-sm text-muted-foreground", children: identifier })
+    ] }),
+    error ? /* @__PURE__ */ jsx2(ErrorAlert, { message: error }) : null,
+    hasLocal ? /* @__PURE__ */ jsxs2("form", { onSubmit: onCredentialSubmit, className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2(Label, { htmlFor: "password", className: "mb-1.5 block", children: "Password" }),
+        /* @__PURE__ */ jsx2(
+          Input,
+          {
+            id: "password",
+            type: "password",
+            value: password,
+            onChange: (e) => onPasswordChange(e.target.value),
+            required: true,
+            autoFocus: true,
+            autoComplete: "current-password",
+            placeholder: "Enter your password"
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx2(
-        Input,
+        PrimaryButton,
         {
-          id: "password",
-          type: "password",
-          value: password,
-          onChange: (e) => onPasswordChange(e.target.value),
-          required: true,
-          placeholder: "Enter your password"
+          type: "submit",
+          disabled: isLoading,
+          loading: isLoading,
+          loadingText: "Signing in...",
+          children: "Sign in"
         }
       )
-    ] }),
-    /* @__PURE__ */ jsx2(Button2, { type: "submit", disabled: isLoading, className: "w-full", children: isLoading ? "Signing in..." : "Sign In" })
+    ] }) : null,
+    hasBoth ? /* @__PURE__ */ jsx2(Separator, {}) : null,
+    external.length > 0 ? /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: external.map((p) => /* @__PURE__ */ jsx2(
+      SsoButton,
+      {
+        label: p.label,
+        onClick: () => onExternalLogin(p)
+      },
+      p.name
+    )) }) : null,
+    providers.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground text-center py-2", children: "No login methods available." }) : null
   ] });
 }
-function OAuthProviders({ providers }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "mt-6", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "relative mb-4", children: [
-      /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx2("div", { className: "w-full border-t border-slate-300" }) }),
-      /* @__PURE__ */ jsx2("div", { className: "relative flex justify-center text-sm", children: /* @__PURE__ */ jsx2("span", { className: "px-2 bg-white text-muted-foreground", children: "Or continue with" }) })
-    ] }),
-    /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: Object.entries(providers).map(
-      ([key, provider]) => provider.enabled ? /* @__PURE__ */ jsxs2(
-        "a",
+function resolveOAuthProviders(config) {
+  return config?.features.oauth && config.oauth?.providers ? Object.entries(config.oauth.providers).filter(([, p]) => p.enabled) : [];
+}
+function CredentialsStep({
+  appName,
+  logoUrl,
+  config,
+  identifier,
+  password,
+  error,
+  isLoading,
+  onIdentifierChange,
+  onPasswordChange,
+  onSubmit,
+  onExternalLogin
+}) {
+  const oauthProviders = resolveOAuthProviders(config);
+  const hasBoth = config?.features.local_auth && oauthProviders.length > 0;
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx2(BrandHeader, { appName, logoUrl }),
+    /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-semibold text-foreground leading-tight text-center", children: "Welcome" }),
+    error ? /* @__PURE__ */ jsx2(ErrorAlert, { message: error }) : null,
+    config?.features.local_auth ? /* @__PURE__ */ jsxs2("form", { onSubmit, className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2(Label, { htmlFor: "identifier", className: "mb-1.5 block", children: "Email or username" }),
+        /* @__PURE__ */ jsx2(
+          Input,
+          {
+            id: "identifier",
+            type: "text",
+            value: identifier,
+            onChange: (e) => onIdentifierChange(e.target.value),
+            required: true,
+            autoFocus: true,
+            autoComplete: "email",
+            placeholder: "you@company.com"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2(Label, { htmlFor: "password", className: "mb-1.5 block", children: "Password" }),
+        /* @__PURE__ */ jsx2(
+          Input,
+          {
+            id: "password",
+            type: "password",
+            value: password,
+            onChange: (e) => onPasswordChange(e.target.value),
+            required: true,
+            autoComplete: "current-password",
+            placeholder: "Enter your password"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2(
+        PrimaryButton,
         {
-          href: provider.login_url,
-          className: "w-full flex items-center justify-center py-2 px-4 border border-slate-300 rounded-md hover:bg-slate-50",
-          children: [
-            "Continue with ",
-            provider.name
-          ]
-        },
-        key
-      ) : null
-    ) })
+          type: "submit",
+          disabled: isLoading,
+          loading: isLoading,
+          loadingText: "Signing in...",
+          children: "Sign in"
+        }
+      )
+    ] }) : null,
+    hasBoth ? /* @__PURE__ */ jsx2(Separator, {}) : null,
+    oauthProviders.length > 0 ? /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: oauthProviders.map(([key, p]) => /* @__PURE__ */ jsx2(
+      SsoButton,
+      {
+        label: `Continue with ${p.name}`,
+        onClick: () => onExternalLogin({ type: "external", name: key, label: p.name })
+      },
+      key
+    )) }) : null
+  ] });
+}
+function RedirectingMessage() {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center min-h-screen bg-muted gap-3 text-muted-foreground", children: [
+    /* @__PURE__ */ jsx2(Spinner, { size: "lg" }),
+    /* @__PURE__ */ jsx2("p", { className: "text-sm", children: "Redirecting..." })
+  ] });
+}
+function ErrorAlert({ message }) {
+  return /* @__PURE__ */ jsx2(
+    Alert2,
+    {
+      variant: "destructive",
+      className: "bg-destructive/10 px-3 py-2.5 text-sm",
+      children: message
+    }
+  );
+}
+function Separator() {
+  return /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx2("div", { className: "w-full border-t border-border" }) }),
+    /* @__PURE__ */ jsx2("div", { className: "relative flex justify-center text-xs", children: /* @__PURE__ */ jsx2("span", { className: "bg-card px-2 text-muted-foreground", children: "or continue with" }) })
   ] });
 }
+function PrimaryButton({
+  type = "button",
+  disabled,
+  loading,
+  loadingText,
+  children,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs2(
+    Button2,
+    {
+      type,
+      size: "lg",
+      disabled,
+      onClick,
+      className: "w-full",
+      children: [
+        loading ? /* @__PURE__ */ jsx2(Spinner, { size: "sm" }) : null,
+        loading && loadingText ? loadingText : children
+      ]
+    }
+  );
+}
+function SsoButton({ label, onClick }) {
+  return /* @__PURE__ */ jsx2(
+    Button2,
+    {
+      type: "button",
+      variant: "outline",
+      size: "lg",
+      onClick,
+      className: "w-full",
+      children: label
+    }
+  );
+}
 
 // src/auth/ProtectedRoute.tsx
 import { Navigate, useLocation as useLocation2 } from "react-router-dom";
 import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
-import { Spinner } from "@petrarca/sonnet-ui";
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+import { Spinner as Spinner2 } from "@petrarca/sonnet-ui";
+import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
 function ProtectedRoute({
   children,
   authEnabled,
@@ -261,7 +576,8 @@ function ProtectedRoute({
   isAuthenticated,
   accessToken,
   activeTenantId,
-  initializeAuth
+  initializeAuth,
+  requiresOrgSelection = true
 }) {
   const location = useLocation2();
   const [initializing, setInitializing] = useState3(true);
@@ -270,10 +586,10 @@ function ProtectedRoute({
     initRef.current().finally(() => setInitializing(false));
   }, []);
   if (authConfigLoading || initializing) {
-    return /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsx3(Spinner, { size: "lg" }) });
+    return /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsx3(Spinner2, { size: "lg" }) });
   }
   if (!authEnabled) {
-    return /* @__PURE__ */ jsx3(Fragment, { children });
+    return /* @__PURE__ */ jsx3(Fragment2, { children });
   }
   if (!isAuthenticated || !accessToken) {
     return /* @__PURE__ */ jsx3(
@@ -285,21 +601,21 @@ function ProtectedRoute({
       }
     );
   }
-  if (!activeTenantId) {
+  if (requiresOrgSelection && !activeTenantId) {
     return /* @__PURE__ */ jsx3(
       Navigate,
       {
         to: "/login",
-        state: { from: location, step: "tenant-selection" },
+        state: { from: location, step: "org-selection" },
         replace: true
       }
     );
   }
-  return /* @__PURE__ */ jsx3(Fragment, { children });
+  return /* @__PURE__ */ jsx3(Fragment2, { children });
 }
 export {
   Login,
-  ProtectedRoute,
-  TenantSelection
+  OrgSelection,
+  ProtectedRoute
 };
 //# sourceMappingURL=index.js.map