@iqauth/sdk 2.0.5 → 2.1.0

package/dist/react.mjs

@@ -212,6 +212,12 @@ function brandStyle(branding) {
   if (branding.backgroundColor) s["--brand-bg"] = branding.backgroundColor;
   if (branding.surfaceColor) s["--brand-surface"] = branding.surfaceColor;
   if (branding.textColor) s["--brand-text"] = branding.textColor;
+  if (branding.borderRadius != null && branding.borderRadius !== "") {
+    const n = typeof branding.borderRadius === "number" ? `${branding.borderRadius}px` : String(branding.borderRadius);
+    s["--brand-radius"] = n;
+  }
+  if (branding.fontFamilyBody) s["--brand-font-body"] = branding.fontFamilyBody;
+  if (branding.fontFamilyHeading) s["--brand-font-heading"] = branding.fontFamilyHeading;
   return s;
 }
 async function jsonFetch(url, init) {
@@ -236,7 +242,7 @@ function useIQAuthSignInContext(iqAuthBaseUrl, appKey, returnTo) {
     let cancelled = false;
     setLoading(true);
     const url = `${iqAuthBaseUrl.replace(/\/$/, "")}/api/public/apps/${encodeURIComponent(appKey)}/sign-in-context?return_to=${encodeURIComponent(returnTo)}`;
-    fetch(url).then((r) => r.json()).then((payload) => {
+    fetch(url, { credentials: "include" }).then((r) => r.json()).then((payload) => {
       if (cancelled) return;
       if (payload?.success === false) throw new Error(payload?.error?.message || "Failed to load sign-in context");
       setCtx(payload.data);
@@ -254,6 +260,7 @@ function useIQAuthSignInContext(iqAuthBaseUrl, appKey, returnTo) {
 var SHELL_CSS = `
 .iqauth-sdk-shell {
   min-height: 100vh;
+  width: 100%;
   display: grid;
   grid-template-columns: 1fr;
   background: var(--brand-bg, #f7f7f6);
@@ -262,20 +269,31 @@ var SHELL_CSS = `
 .iqauth-sdk-hero { display: none; }
 .iqauth-sdk-pane {
   display: flex; flex-direction: column; align-items: center; justify-content: center;
-  padding: 40px 16px; min-height: 100vh;
+  padding: 48px 24px; min-height: 100vh;
 }
 .iqauth-sdk-card {
-  width: 100%; max-width: 420px;
+  width: 100%; max-width: 460px;
   background: var(--brand-surface, #ffffff);
   border: 1px solid rgba(15,23,42,0.08);
-  border-radius: 14px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(15,23,42,0.04);
+  border-radius: var(--brand-radius, 16px);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px rgba(15,23,42,0.06);
   overflow: hidden;
 }
-.iqauth-sdk-card-header { padding: 28px 28px 0; }
-.iqauth-sdk-card-header h1 { font-size: 22px; font-weight: 600; margin: 0; line-height: 1.2; }
+.iqauth-sdk-shell, .iqauth-sdk-shell input, .iqauth-sdk-shell button { font-family: var(--brand-font-body, inherit); }
+.iqauth-sdk-shell h1, .iqauth-sdk-shell h2, .iqauth-sdk-shell h3 { font-family: var(--brand-font-heading, var(--brand-font-body, inherit)); }
+.iqauth-sdk-shell[data-layout="centered_card"] { grid-template-columns: 1fr; }
+.iqauth-sdk-shell[data-layout="centered_card"] .iqauth-sdk-hero { display: none; }
+.iqauth-sdk-shell[data-layout="full_bleed"] { background-size: cover; background-position: center; background-repeat: no-repeat; }
+.iqauth-sdk-shell[data-layout="full_bleed"] .iqauth-sdk-hero { display: none; }
+.iqauth-sdk-shell[data-layout="full_bleed"] .iqauth-sdk-pane { background: rgba(15,23,42,0.30); }
+.iqauth-sdk-shell[data-social-style="outline"] .iqauth-sdk-google-btn { background: transparent; border-color: var(--brand-primary, rgba(15,23,42,0.18)); color: var(--brand-text, inherit); }
+.iqauth-sdk-shell[data-social-style="ghost"] .iqauth-sdk-google-btn { background: transparent; border-color: transparent; color: var(--brand-text, inherit); }
+.iqauth-sdk-shell[data-social-style="solid"] .iqauth-sdk-google-btn { background: var(--brand-primary, #3b82f6); border-color: transparent; color: #fff; }
+.iqauth-sdk-shell[data-social-style="solid"] .iqauth-sdk-google-btn:hover { background: var(--brand-primary, #3b82f6); opacity: 0.92; }
+.iqauth-sdk-card-header { padding: 32px 36px 0; }
+.iqauth-sdk-card-header h1 { font-size: 24px; font-weight: 600; margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
 .iqauth-sdk-card-header p { margin: 8px 0 0; font-size: 14px; color: rgba(15,23,42,0.65); line-height: 1.5; }
-.iqauth-sdk-card-body { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 18px; }
+.iqauth-sdk-card-body { padding: 32px 36px 28px; display: flex; flex-direction: column; gap: 18px; }
 .iqauth-sdk-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
 .iqauth-sdk-mobile-brand img { height: 36px; width: auto; }
 .iqauth-sdk-mobile-brand span { font-size: 16px; font-weight: 600; }
@@ -296,11 +314,11 @@ var SHELL_CSS = `
 .iqauth-sdk-google-btn:hover { background: #f8fafc; border-color: rgba(15,23,42,0.28); }
 .iqauth-sdk-google-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
 
-@media (min-width: 900px) {
-  .iqauth-sdk-shell { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
+@media (min-width: 768px) {
+  .iqauth-sdk-shell:not([data-layout="centered_card"]):not([data-layout="full_bleed"]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
   .iqauth-sdk-hero {
     display: flex; flex-direction: column; justify-content: space-between;
-    padding: 48px 56px; color: #ffffff;
+    padding: clamp(32px, 4vw, 56px); color: #ffffff;
     background: linear-gradient(135deg, var(--brand-primary, #3b82f6) 0%, var(--brand-accent, #6366f1) 100%);
     background-size: cover; background-position: center;
     position: relative; overflow: hidden; min-height: 100vh;
@@ -309,15 +327,113 @@ var SHELL_CSS = `
     background-image: var(--iqauth-sdk-hero-image), linear-gradient(135deg, var(--brand-primary, #3b82f6), var(--brand-accent, #6366f1));
     background-blend-mode: multiply;
   }
-  .iqauth-sdk-hero-brand img { height: 44px; width: auto; filter: brightness(0) invert(1); opacity: 0.96; }
-  .iqauth-sdk-hero-brand .iqauth-sdk-hero-name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
-  .iqauth-sdk-hero-content h2 { font-size: 34px; font-weight: 600; line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.015em; }
-  .iqauth-sdk-hero-content p { font-size: 15px; line-height: 1.6; opacity: 0.92; margin: 0; max-width: 460px; white-space: pre-wrap; }
+  .iqauth-sdk-hero-brand img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: 0.96; }
+  .iqauth-sdk-hero-brand .iqauth-sdk-hero-name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
+  .iqauth-sdk-hero-content { max-width: 520px; }
+  .iqauth-sdk-hero-content h2 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; line-height: 1.2; margin: 0 0 14px; letter-spacing: -0.015em; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; }
+  .iqauth-sdk-hero-content p { font-size: 15px; line-height: 1.6; opacity: 0.92; margin: 0; white-space: pre-wrap; }
   .iqauth-sdk-hero-foot { font-size: 12px; opacity: 0.7; }
   .iqauth-sdk-mobile-brand { display: none; }
 }
+@media (min-width: 1280px) {
+  .iqauth-sdk-shell:not([data-layout="centered_card"]):not([data-layout="full_bleed"]) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
+}
 `;
 var sdkShellStylesInjected = false;
+var SDK_CSS_MAX_LEN = 50 * 1024;
+var SDK_CSS_FORBIDDEN = [
+  /<\/?\s*style[^>]*>/gi,
+  /<\/?\s*script[^>]*>/gi,
+  /<!--[\s\S]*?-->/g,
+  /@import\s+[^;]*;?/gi,
+  /expression\s*\(/gi,
+  /behavior\s*:/gi,
+  /-moz-binding\s*:/gi,
+  /javascript\s*:/gi,
+  /vbscript\s*:/gi
+];
+var SDK_URL_DATA_RE = /url\s*\(\s*(['"]?)\s*data\s*:[^)]*\)/gi;
+function sanitizeBrandCss(input) {
+  if (!input) return "";
+  let out = String(input);
+  if (out.length > SDK_CSS_MAX_LEN) out = out.slice(0, SDK_CSS_MAX_LEN);
+  out = out.replace(/</g, "");
+  for (const re of SDK_CSS_FORBIDDEN) out = out.replace(re, "");
+  out = out.replace(SDK_URL_DATA_RE, "url()");
+  return out;
+}
+function SdkBrandLogo({ branding, alt, fallback }) {
+  const light = branding?.logoLightUrl || branding?.logoUrl || null;
+  const dark = branding?.logoDarkUrl || null;
+  if (!light && !dark) return /* @__PURE__ */ jsx(Fragment2, { children: fallback });
+  const fallbackSrc = light || dark;
+  return /* @__PURE__ */ jsxs("picture", { "data-iqauth-sdk-logo": "", children: [
+    dark ? /* @__PURE__ */ jsx("source", { srcSet: dark, media: "(prefers-color-scheme: dark)" }) : null,
+    light ? /* @__PURE__ */ jsx("source", { srcSet: light, media: "(prefers-color-scheme: light)" }) : null,
+    /* @__PURE__ */ jsx("img", { src: fallbackSrc, alt })
+  ] });
+}
+var sdkBrandingCache = /* @__PURE__ */ new Map();
+var SDK_BRANDING_TTL_MS = 6e4;
+function flattenBrandingPayload(data) {
+  const e = data && data.effective || {};
+  const meta = data && data.meta || {};
+  return {
+    brandName: e.brandName ?? data?.brandName ?? null,
+    logoUrl: e.logoLightUrl ?? data?.logoUrl ?? null,
+    logoLightUrl: e.logoLightUrl ?? data?.logoLightUrl ?? null,
+    logoDarkUrl: e.logoDarkUrl ?? data?.logoDarkUrl ?? null,
+    faviconUrl: e.faviconUrl ?? data?.faviconUrl ?? null,
+    primaryColor: e.primaryColor ?? data?.primaryColor ?? null,
+    accentColor: e.accentColor ?? data?.accentColor ?? null,
+    backgroundColor: e.backgroundColor ?? data?.backgroundColor ?? null,
+    surfaceColor: e.surfaceColor ?? data?.surfaceColor ?? null,
+    textColor: e.textColor ?? data?.textColor ?? null,
+    fontFamilyBody: e.fontFamilyBody ?? data?.fontFamilyBody ?? null,
+    fontFamilyHeading: e.fontFamilyHeading ?? data?.fontFamilyHeading ?? null,
+    customFontUrl: e.customFontUrl ?? data?.customFontUrl ?? null,
+    borderRadius: e.borderRadius ?? data?.borderRadius ?? null,
+    backgroundImageUrl: e.backgroundImageUrl ?? data?.backgroundImageUrl ?? null,
+    customCss: e.customCss ?? data?.customCss ?? null,
+    loginLayout: e.loginLayout ?? data?.loginLayout ?? null,
+    socialButtonStyle: e.socialButtonStyle ?? data?.socialButtonStyle ?? null,
+    footerText: e.footerText ?? data?.footerText ?? null,
+    brandingRev: meta.brandingRev ?? data?.brandingRev ?? null
+  };
+}
+function useResolvedSdkBranding(iqAuthBaseUrl, appId) {
+  const ctx = useContext(IQAuthContext);
+  const resolvedAppId = appId ?? ctx?.manager?.appKey ?? null;
+  const url = `${iqAuthBaseUrl.replace(/\/$/, "")}/api/public/branding${resolvedAppId ? `?appId=${encodeURIComponent(resolvedAppId)}` : ""}`;
+  const cached = sdkBrandingCache.get(url);
+  const fresh = cached && Date.now() - cached.ts < SDK_BRANDING_TTL_MS ? cached.data : null;
+  const [b, setB] = useState(fresh);
+  useEffect(() => {
+    let cancelled = false;
+    const entry = sdkBrandingCache.get(url);
+    const headers = {};
+    if (entry?.rev) headers["If-None-Match"] = `W/"brand-${entry.rev}"`;
+    if (entry) setB(entry.data);
+    fetch(url, { credentials: "include", headers }).then(async (r) => {
+      if (cancelled) return;
+      if (r.status === 304 && entry) {
+        sdkBrandingCache.set(url, { ...entry, ts: Date.now() });
+        return;
+      }
+      if (!r.ok) return;
+      const p = await r.json().catch(() => null);
+      if (!p?.data) return;
+      const flat = flattenBrandingPayload(p.data);
+      sdkBrandingCache.set(url, { ts: Date.now(), rev: flat.brandingRev || "", data: flat });
+      setB(flat);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+  return b;
+}
 function ensureSdkShellStyles() {
   if (typeof document === "undefined" || sdkShellStylesInjected) return;
   const tag = document.createElement("style");
@@ -363,35 +479,61 @@ function Shell({
   const brandVars = brandStyle(branding);
   const brandName = branding?.brandName || "IQAuth";
   const heroImage = branding?.heroImageUrl || null;
+  const layout = (branding?.loginLayout || "split_screen").toString();
+  const bgImage = branding?.backgroundImageUrl || null;
+  const fontUrl = branding?.customFontUrl || null;
+  const socialStyle = (branding?.socialButtonStyle || "").toString();
   const heroStyle = heroImage ? { ["--iqauth-sdk-hero-image"]: `url("${heroImage.replace(/"/g, '\\"')}")` } : {};
+  const shellStyle = {
+    ...brandVars,
+    ...layout === "full_bleed" && bgImage ? { backgroundImage: `linear-gradient(rgba(15,23,42,0.35), rgba(15,23,42,0.45)), url("${bgImage.replace(/"/g, '\\"')}")` } : {}
+  };
   const supportLink = branding?.supportUrl ? branding.supportUrl : branding?.supportEmail ? `mailto:${branding.supportEmail}` : null;
   const hasFooterLinks = !!(branding?.termsUrl || branding?.privacyUrl || supportLink);
-  return /* @__PURE__ */ jsxs("div", { className: `iqauth-sdk-shell${className ? ` ${className}` : ""}`, style: brandVars, "data-iqauth-shell": "", children: [
-    branding?.customCss ? /* @__PURE__ */ jsx("style", { "data-iqauth-sdk-custom": true, children: branding.customCss }) : null,
-    /* @__PURE__ */ jsxs("aside", { className: "iqauth-sdk-hero", "data-bg-image": heroImage ? "true" : "false", style: heroStyle, "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx("div", { className: "iqauth-sdk-hero-brand", style: { display: "flex", alignItems: "center", gap: 12 }, children: branding?.logoUrl ? /* @__PURE__ */ jsx("img", { src: branding.logoUrl, alt: "" }) : /* @__PURE__ */ jsx("span", { className: "iqauth-sdk-hero-name", children: brandName }) }),
-      /* @__PURE__ */ jsxs("div", { className: "iqauth-sdk-hero-content", children: [
-        /* @__PURE__ */ jsx("h2", { children: branding?.tagline || `Welcome to ${brandName}` }),
-        /* @__PURE__ */ jsx("p", { children: branding?.loginSideCopy || branding?.loginSubheadline || `Sign in to continue to your ${brandName} workspace.` })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "iqauth-sdk-hero-foot", children: `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${brandName}` })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "iqauth-sdk-pane", children: /* @__PURE__ */ jsxs("main", { style: { width: "100%", maxWidth: 420 }, children: [
-      /* @__PURE__ */ jsx("div", { className: "iqauth-sdk-mobile-brand", children: branding?.logoUrl ? /* @__PURE__ */ jsx("img", { src: branding.logoUrl, alt: `${brandName} logo` }) : /* @__PURE__ */ jsx("span", { children: brandName }) }),
-      /* @__PURE__ */ jsxs("section", { className: "iqauth-sdk-card", children: [
-        title || subtitle ? /* @__PURE__ */ jsxs("div", { className: "iqauth-sdk-card-header", children: [
-          title ? /* @__PURE__ */ jsx("h1", { children: title }) : null,
-          subtitle ? /* @__PURE__ */ jsx("p", { children: subtitle }) : null
-        ] }) : null,
-        /* @__PURE__ */ jsx("div", { className: "iqauth-sdk-card-body", children })
-      ] }),
-      hasFooterLinks ? /* @__PURE__ */ jsx("footer", { className: "iqauth-sdk-footer", children: /* @__PURE__ */ jsxs("div", { className: "iqauth-sdk-footer-links", children: [
-        branding?.termsUrl ? /* @__PURE__ */ jsx("a", { href: branding.termsUrl, target: "_blank", rel: "noreferrer noopener", children: "Terms" }) : null,
-        branding?.privacyUrl ? /* @__PURE__ */ jsx("a", { href: branding.privacyUrl, target: "_blank", rel: "noreferrer noopener", children: "Privacy" }) : null,
-        supportLink ? /* @__PURE__ */ jsx("a", { href: supportLink, target: "_blank", rel: "noreferrer noopener", children: "Support" }) : null
-      ] }) }) : null
-    ] }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `iqauth-sdk-shell${className ? ` ${className}` : ""}`,
+      "data-layout": layout,
+      "data-social-style": socialStyle || void 0,
+      style: shellStyle,
+      "data-iqauth-shell": "",
+      "data-branding-rev": branding?.brandingRev || "",
+      children: [
+        /* @__PURE__ */ jsx("style", { "data-brand": true, children: [
+          fontUrl ? `@font-face{font-family:"${(branding?.fontFamilyBody || "Brand").replace(/"/g, "")}";src:url("${fontUrl.replace(/"/g, '\\"')}");font-display:swap;}` : "",
+          sanitizeBrandCss(branding?.customCss)
+        ].filter(Boolean).join("\n") }),
+        /* @__PURE__ */ jsxs("aside", { className: "iqauth-sdk-hero", "data-bg-image": heroImage ? "true" : "false", style: heroStyle, "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("div", { className: "iqauth-sdk-hero-brand", style: { display: "flex", alignItems: "center", gap: 12 }, children: /* @__PURE__ */ jsx(SdkBrandLogo, { branding, alt: "", fallback: /* @__PURE__ */ jsx("span", { className: "iqauth-sdk-hero-name", children: brandName }) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "iqauth-sdk-hero-content", children: [
+            /* @__PURE__ */ jsx("h2", { children: branding?.tagline || `Welcome to ${brandName}` }),
+            /* @__PURE__ */ jsx("p", { children: branding?.loginSideCopy || branding?.loginSubheadline || `Sign in to continue to your ${brandName} workspace.` })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "iqauth-sdk-hero-foot", children: `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${brandName}` })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "iqauth-sdk-pane", children: /* @__PURE__ */ jsxs("main", { style: { width: "100%", maxWidth: 420 }, children: [
+          /* @__PURE__ */ jsx("div", { className: "iqauth-sdk-mobile-brand", children: /* @__PURE__ */ jsx(SdkBrandLogo, { branding, alt: `${brandName} logo`, fallback: /* @__PURE__ */ jsx("span", { children: brandName }) }) }),
+          /* @__PURE__ */ jsxs("section", { className: "iqauth-sdk-card", children: [
+            title || subtitle ? /* @__PURE__ */ jsxs("div", { className: "iqauth-sdk-card-header", children: [
+              title ? /* @__PURE__ */ jsx("h1", { children: title }) : null,
+              subtitle ? /* @__PURE__ */ jsx("p", { children: subtitle }) : null
+            ] }) : null,
+            /* @__PURE__ */ jsx("div", { className: "iqauth-sdk-card-body", children })
+          ] }),
+          hasFooterLinks || branding?.footerText ? /* @__PURE__ */ jsxs("footer", { className: "iqauth-sdk-footer", children: [
+            branding?.footerText ? /* @__PURE__ */ jsx("div", { "data-testid": "text-brand-footer-sdk", style: { fontSize: 12, opacity: 0.75 }, children: branding.footerText }) : null,
+            hasFooterLinks ? /* @__PURE__ */ jsxs("div", { className: "iqauth-sdk-footer-links", children: [
+              branding?.termsUrl ? /* @__PURE__ */ jsx("a", { href: branding.termsUrl, target: "_blank", rel: "noreferrer noopener", children: "Terms" }) : null,
+              branding?.privacyUrl ? /* @__PURE__ */ jsx("a", { href: branding.privacyUrl, target: "_blank", rel: "noreferrer noopener", children: "Privacy" }) : null,
+              supportLink ? /* @__PURE__ */ jsx("a", { href: supportLink, target: "_blank", rel: "noreferrer noopener", children: "Support" }) : null
+            ] }) : null
+          ] }) : null
+        ] }) })
+      ]
+    },
+    branding?.brandingRev || void 0
+  );
 }
 function Field({ label, children }) {
   return /* @__PURE__ */ jsxs("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 13 }, children: [
@@ -461,7 +603,15 @@ function ErrorBanner({ message }) {
     color: "#b91c1c"
   }, children: message });
 }
-function SignIn({ iqAuthBaseUrl, appKey, returnTo, onRedirect, className }) {
+function isSilentSsoEligible(ctx, effectivePrompt) {
+  if (!ctx) return false;
+  if (effectivePrompt === "login") return false;
+  if (!ctx.session) return false;
+  if (!ctx.app.defaultClientId) return false;
+  if (!ctx.returnAllowed) return false;
+  return true;
+}
+function SignIn({ iqAuthBaseUrl, appKey, returnTo, onRedirect, className, prompt }) {
   const { ctx, loading, error } = useIQAuthSignInContext(iqAuthBaseUrl, appKey, returnTo);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -470,6 +620,18 @@ function SignIn({ iqAuthBaseUrl, appKey, returnTo, onRedirect, className }) {
   const [mfa, setMfa] = useState(null);
   const [tenantSel, setTenantSel] = useState(null);
   const [oauthExchanging, setOauthExchanging] = useState(false);
+  const [silent, setSilent] = useState("idle");
+  const [forcePrompt, setForcePrompt] = useState(false);
+  const effectivePrompt = useMemo(() => {
+    if (prompt === "login" || forcePrompt) return "login";
+    if (typeof window !== "undefined") {
+      try {
+        if (new URLSearchParams(window.location.search).get("prompt") === "login") return "login";
+      } catch {
+      }
+    }
+    return void 0;
+  }, [prompt, forcePrompt]);
   const oidcPayload = () => ({
     client_id: ctx?.app.defaultClientId,
     redirect_uri: returnTo,
@@ -559,6 +721,58 @@ function SignIn({ iqAuthBaseUrl, appKey, returnTo, onRedirect, className }) {
     const url = `${iqAuthBaseUrl.replace(/\/$/, "")}/api/v1/auth/google?redirect_uri=${encodeURIComponent(bridgeUrl)}&client_id=${encodeURIComponent(ctx.app.defaultClientId)}`;
     window.location.href = url;
   };
+  useEffect(() => {
+    if (loading || error || !ctx) return;
+    if (effectivePrompt === "login") {
+      setSilent("skipped");
+      return;
+    }
+    if (silent !== "idle") return;
+    if (!ctx.session || !ctx.app.defaultClientId || !ctx.returnAllowed) {
+      setSilent("skipped");
+      return;
+    }
+    setSilent("trying");
+    (async () => {
+      try {
+        const r = await fetch(`${iqAuthBaseUrl.replace(/\/$/, "")}/oidc/sso-resume`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify(oidcPayload())
+        });
+        const payload = await r.json().catch(() => ({}));
+        if (payload?.type === "redirect" && payload.redirectUrl) {
+          (onRedirect || ((u) => {
+            window.location.replace(u);
+          }))(payload.redirectUrl);
+          return;
+        }
+        if (payload?.type === "tenant_selection") {
+          setTenantSel({ token: payload.tenantSelectionToken, tenants: payload.tenants || [] });
+          setSilent("failed");
+          return;
+        }
+        setSilent("failed");
+      } catch {
+        setSilent("failed");
+      }
+    })();
+  }, [loading, error, ctx, effectivePrompt]);
+  const switchAccount = (e) => {
+    if (e) e.preventDefault();
+    setForcePrompt(true);
+    setSilent("skipped");
+    setTenantSel(null);
+    if (typeof window !== "undefined") {
+      try {
+        const u = new URL(window.location.href);
+        u.searchParams.set("prompt", "login");
+        window.history.replaceState({}, "", u.toString());
+      } catch {
+      }
+    }
+  };
   useEffect(() => {
     if (!ctx?.app.defaultClientId) return;
     const params = new URLSearchParams(window.location.search);
@@ -596,6 +810,13 @@ function SignIn({ iqAuthBaseUrl, appKey, returnTo, onRedirect, className }) {
   if (loading || oauthExchanging) return /* @__PURE__ */ jsx(Shell, { branding: ctx?.branding || null, className, title: oauthExchanging ? "Completing sign-in\u2026" : "Loading\u2026", children: /* @__PURE__ */ jsx("p", { children: oauthExchanging ? "Completing sign-in\u2026" : "Loading\u2026" }) });
   if (error || !ctx) return /* @__PURE__ */ jsx(Shell, { branding: null, className, title: "Application unavailable", children: /* @__PURE__ */ jsx(ErrorBanner, { message: error || "Failed to load app context" }) });
   if (!ctx.returnAllowed) return /* @__PURE__ */ jsx(Shell, { branding: ctx.branding, className, title: "Invalid redirect", children: /* @__PURE__ */ jsx(ErrorBanner, { message: `returnTo "${returnTo}" is not in this app's allowed origins.` }) });
+  const silentEligible = isSilentSsoEligible(ctx, effectivePrompt);
+  if (silentEligible && silent !== "failed") {
+    return /* @__PURE__ */ jsxs(Shell, { branding: ctx.branding, className, title: "Signing you in\u2026", subtitle: ctx.session ? `Welcome back, ${ctx.session.name || ctx.session.email}.` : void 0, children: [
+      /* @__PURE__ */ jsx("p", { "data-testid": "text-silent-resume", style: { fontSize: 14, opacity: 0.8 }, children: "Resuming your session." }),
+      /* @__PURE__ */ jsx("a", { href: "#", onClick: switchAccount, "data-testid": "link-switch-account", style: { fontSize: 13 }, children: "Not you? Use a different account" })
+    ] });
+  }
   const cardTitle = ctx.branding?.loginHeadline || `Sign in to ${ctx.app.name}`;
   const cardSubtitle = ctx.branding?.loginSubheadline || void 0;
   return /* @__PURE__ */ jsxs(Shell, { branding: ctx.branding, className, title: cardTitle, subtitle: cardSubtitle, children: [
@@ -645,7 +866,11 @@ function SignIn({ iqAuthBaseUrl, appKey, returnTo, onRedirect, className }) {
         /* @__PURE__ */ jsx(Field, { label: "Password", children: /* @__PURE__ */ jsx("input", { style: inputStyle(), type: "password", autoComplete: "current-password", required: true, value: password, onChange: (e) => setPassword(e.target.value) }) }),
         /* @__PURE__ */ jsx(PrimaryButton, { type: "submit", disabled: submitting || !email || !password, children: submitting ? "Signing in\u2026" : "Sign in" })
       ] })
-    ] })
+    ] }),
+    (silent === "failed" || effectivePrompt === "login" && ctx.session) && !mfa ? /* @__PURE__ */ jsxs("p", { style: { marginTop: 12, fontSize: 13, opacity: 0.75 }, children: [
+      silent === "failed" && ctx.session ? "Couldn't resume your session. " : null,
+      /* @__PURE__ */ jsx("a", { href: "#", onClick: switchAccount, "data-testid": "link-switch-account", children: "Use a different account" })
+    ] }) : null
   ] });
 }
 function SignUp({ iqAuthBaseUrl, appKey, returnTo, onSuccess, className }) {
@@ -696,6 +921,9 @@ function initialsOf(name, email) {
 function UserButton({ iqAuthBaseUrl, accountUrl, onSignOut, className }) {
   const [user, setUser] = useState(null);
   const [open, setOpen] = useState(false);
+  const branding = useResolvedSdkBranding(iqAuthBaseUrl);
+  const accent = branding?.accentColor || "#6366f1";
+  const primary = branding?.primaryColor || "#0f172a";
   useEffect(() => {
     let cancelled = false;
     fetch(`${iqAuthBaseUrl.replace(/\/$/, "")}/api/v1/auth/me`, { credentials: "include" }).then((r) => r.json()).then((p) => {
@@ -716,59 +944,69 @@ function UserButton({ iqAuthBaseUrl, accountUrl, onSignOut, className }) {
   };
   if (!user) return null;
   const target = accountUrl || `${iqAuthBaseUrl.replace(/\/$/, "")}/account`;
-  return /* @__PURE__ */ jsxs("div", { className, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-haspopup": "menu",
-        "aria-expanded": open,
-        onClick: () => setOpen((o) => !o),
-        style: {
-          width: 32,
-          height: 32,
-          borderRadius: "50%",
-          background: "var(--brand-accent, #6366f1)",
-          color: "#fff",
-          border: "none",
-          cursor: "pointer",
-          fontSize: 12,
-          fontWeight: 600
-        },
-        children: user.picture ? /* @__PURE__ */ jsx("img", { src: user.picture, alt: user.name, style: { width: "100%", height: "100%", borderRadius: "50%" } }) : initialsOf(user.name, user.email)
-      }
-    ),
-    open ? /* @__PURE__ */ jsxs("div", { role: "menu", style: {
-      position: "absolute",
-      right: 0,
-      top: 40,
-      minWidth: 200,
-      background: "#fff",
-      border: "1px solid rgba(15,23,42,0.12)",
-      borderRadius: 8,
-      boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
-      padding: 8,
-      zIndex: 100
-    }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { padding: "8px 10px", fontSize: 12, opacity: 0.7, borderBottom: "1px solid rgba(15,23,42,0.06)" }, children: [
-        /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, color: "#0f172a" }, children: user.name }),
-        /* @__PURE__ */ jsx("div", { children: user.email })
-      ] }),
-      /* @__PURE__ */ jsx("a", { href: target, role: "menuitem", style: { display: "block", padding: "8px 10px", fontSize: 13, color: "#0f172a", textDecoration: "none" }, children: "Account" }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          role: "menuitem",
-          type: "button",
-          onClick: signOut2,
-          style: { display: "block", width: "100%", textAlign: "left", padding: "8px 10px", fontSize: 13, background: "transparent", border: "none", cursor: "pointer", color: "#b91c1c" },
-          children: "Sign out"
-        }
-      )
-    ] }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: { position: "relative", display: "inline-block", ...brandStyle(branding) },
+      "data-iqauth-sdk-userbutton": "",
+      "data-branding-rev": branding?.brandingRev || "",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            onClick: () => setOpen((o) => !o),
+            style: {
+              width: 32,
+              height: 32,
+              borderRadius: "50%",
+              background: accent,
+              color: "#fff",
+              border: "none",
+              cursor: "pointer",
+              fontSize: 12,
+              fontWeight: 600
+            },
+            children: user.picture ? /* @__PURE__ */ jsx("img", { src: user.picture, alt: user.name, style: { width: "100%", height: "100%", borderRadius: "50%" } }) : initialsOf(user.name, user.email)
+          }
+        ),
+        open ? /* @__PURE__ */ jsxs("div", { role: "menu", style: {
+          position: "absolute",
+          right: 0,
+          top: 40,
+          minWidth: 200,
+          background: "#fff",
+          border: "1px solid rgba(15,23,42,0.12)",
+          borderRadius: 8,
+          boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+          padding: 8,
+          zIndex: 100
+        }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { padding: "8px 10px", fontSize: 12, opacity: 0.7, borderBottom: "1px solid rgba(15,23,42,0.06)" }, children: [
+            /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, color: "#0f172a" }, children: user.name }),
+            /* @__PURE__ */ jsx("div", { children: user.email })
+          ] }),
+          /* @__PURE__ */ jsx("a", { href: target, role: "menuitem", style: { display: "block", padding: "8px 10px", fontSize: 13, color: primary, textDecoration: "none" }, children: "Account" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              role: "menuitem",
+              type: "button",
+              onClick: signOut2,
+              style: { display: "block", width: "100%", textAlign: "left", padding: "8px 10px", fontSize: 13, background: "transparent", border: "none", cursor: "pointer", color: "#b91c1c" },
+              children: "Sign out"
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
 }
 function UserProfile({ iqAuthBaseUrl, className }) {
+  const branding = useResolvedSdkBranding(iqAuthBaseUrl);
   const [user, setUser] = useState(null);
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
@@ -802,8 +1040,8 @@ function UserProfile({ iqAuthBaseUrl, className }) {
     await fetch(`${iqAuthBaseUrl.replace(/\/$/, "")}/api/v1/auth/sessions/${sessionId}`, { method: "DELETE", credentials: "include" });
     setSessions((prev) => prev.filter((s) => s.id !== sessionId));
   };
-  if (!user) return /* @__PURE__ */ jsx(Shell, { branding: null, className, children: /* @__PURE__ */ jsx("p", { children: "Loading account\u2026" }) });
-  return /* @__PURE__ */ jsxs(Shell, { branding: null, className, children: [
+  if (!user) return /* @__PURE__ */ jsx(Shell, { branding, className, children: /* @__PURE__ */ jsx("p", { children: "Loading account\u2026" }) });
+  return /* @__PURE__ */ jsxs(Shell, { branding, className, children: [
     /* @__PURE__ */ jsx("h2", { style: { fontSize: 20, fontWeight: 600, margin: "0 0 12px" }, children: "Your account" }),
     /* @__PURE__ */ jsxs("section", { "aria-labelledby": "iqauth-profile", style: { marginBottom: 20 }, children: [
       /* @__PURE__ */ jsx("h3", { id: "iqauth-profile", style: { fontSize: 14, fontWeight: 600 }, children: "Profile" }),
@@ -838,6 +1076,8 @@ function UserProfile({ iqAuthBaseUrl, className }) {
   ] });
 }
 function OrganizationSwitcher({ iqAuthBaseUrl, onSwitched, className }) {
+  const branding = useResolvedSdkBranding(iqAuthBaseUrl);
+  const accent = branding?.accentColor || "#6366f1";
   const [memberships, setMemberships] = useState([]);
   const [activeTenantId, setActiveTenantId] = useState(null);
   const [open, setOpen] = useState(false);
@@ -863,55 +1103,64 @@ function OrganizationSwitcher({ iqAuthBaseUrl, onSwitched, className }) {
     }
   };
   const active = memberships.find((m) => m.tenantId === activeTenantId);
-  return /* @__PURE__ */ jsxs("div", { className, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-haspopup": "menu",
-        "aria-expanded": open,
-        onClick: () => setOpen((o) => !o),
-        style: { background: "transparent", border: "1px solid rgba(15,23,42,0.15)", padding: "6px 12px", borderRadius: 6, cursor: "pointer", fontSize: 13 },
-        children: active?.tenantName || active?.tenantSlug || "Select organization"
-      }
-    ),
-    open ? /* @__PURE__ */ jsx("div", { role: "menu", style: {
-      position: "absolute",
-      left: 0,
-      top: 36,
-      minWidth: 220,
-      background: "#fff",
-      border: "1px solid rgba(15,23,42,0.12)",
-      borderRadius: 8,
-      boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
-      padding: 8,
-      zIndex: 100
-    }, children: memberships.length === 0 ? /* @__PURE__ */ jsx("p", { style: { fontSize: 13, opacity: 0.6, padding: "4px 6px" }, children: "No memberships" }) : memberships.map((m) => /* @__PURE__ */ jsxs(
-      "button",
-      {
-        role: "menuitem",
-        type: "button",
-        onClick: () => switchTo(m.tenantId),
-        style: {
-          display: "block",
-          width: "100%",
-          textAlign: "left",
-          padding: "8px 10px",
-          background: m.tenantId === activeTenantId ? "rgba(99,102,241,0.08)" : "transparent",
-          border: "none",
-          borderRadius: 4,
-          cursor: "pointer",
-          fontSize: 13,
-          color: "#0f172a"
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { style: { fontWeight: 500 }, children: m.tenantName || m.tenantSlug || m.tenantId }),
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 11, opacity: 0.6 }, children: m.roles.join(", ") })
-        ]
-      },
-      m.tenantId
-    )) }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: { position: "relative", display: "inline-block", ...brandStyle(branding) },
+      "data-iqauth-sdk-orgswitcher": "",
+      "data-branding-rev": branding?.brandingRev || "",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            onClick: () => setOpen((o) => !o),
+            style: { background: "transparent", border: `1px solid ${accent}55`, color: branding?.primaryColor || "#0f172a", padding: "6px 12px", borderRadius: 6, cursor: "pointer", fontSize: 13 },
+            children: active?.tenantName || active?.tenantSlug || "Select organization"
+          }
+        ),
+        open ? /* @__PURE__ */ jsx("div", { role: "menu", style: {
+          position: "absolute",
+          left: 0,
+          top: 36,
+          minWidth: 220,
+          background: "#fff",
+          border: "1px solid rgba(15,23,42,0.12)",
+          borderRadius: 8,
+          boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+          padding: 8,
+          zIndex: 100
+        }, children: memberships.length === 0 ? /* @__PURE__ */ jsx("p", { style: { fontSize: 13, opacity: 0.6, padding: "4px 6px" }, children: "No memberships" }) : memberships.map((m) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            role: "menuitem",
+            type: "button",
+            onClick: () => switchTo(m.tenantId),
+            style: {
+              display: "block",
+              width: "100%",
+              textAlign: "left",
+              padding: "8px 10px",
+              background: m.tenantId === activeTenantId ? `${accent}14` : "transparent",
+              border: "none",
+              borderRadius: 4,
+              cursor: "pointer",
+              fontSize: 13,
+              color: "#0f172a"
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { style: { fontWeight: 500 }, children: m.tenantName || m.tenantSlug || m.tenantId }),
+              /* @__PURE__ */ jsx("div", { style: { fontSize: 11, opacity: 0.6 }, children: m.roles.join(", ") })
+            ]
+          },
+          m.tenantId
+        )) }) : null
+      ]
+    }
+  );
 }
 var __version__ = "phase-bc-1.0.0";
 export {
@@ -926,10 +1175,13 @@ export {
   UserButton,
   UserProfile,
   __version__,
+  isSilentSsoEligible,
+  sanitizeBrandCss,
   useAuth,
   useAuthFetch,
   useIQAuthSignInContext,
   useOrganization,
+  useResolvedSdkBranding,
   useSession,
   useUser
 };