@iqauth/sdk 2.0.3 → 2.0.5

package/dist/react.js

@@ -950,29 +950,147 @@ function useIQAuthSignInContext(iqAuthBaseUrl, appKey, returnTo) {
   }, [iqAuthBaseUrl, appKey, returnTo]);
   return { ctx, loading, error };
 }
+var SHELL_CSS = `
+.iqauth-sdk-shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 1fr;
+  background: var(--brand-bg, #f7f7f6);
+  color: var(--brand-text, #0f172a);
+}
+.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;
+}
+.iqauth-sdk-card {
+  width: 100%; max-width: 420px;
+  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);
+  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-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-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; }
+.iqauth-sdk-footer { margin-top: 20px; text-align: center; font-size: 13px; color: rgba(15,23,42,0.55); display: flex; flex-direction: column; gap: 8px; align-items: center; }
+.iqauth-sdk-footer-links { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
+.iqauth-sdk-footer-links a { color: inherit; opacity: 0.75; text-decoration: none; }
+.iqauth-sdk-footer-links a:hover { opacity: 1; text-decoration: underline; }
+.iqauth-sdk-divider { display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(15,23,42,0.45); text-transform: uppercase; letter-spacing: 0.08em; }
+.iqauth-sdk-divider::before, .iqauth-sdk-divider::after { content: ""; flex: 1; height: 1px; background: rgba(15,23,42,0.1); }
+.iqauth-sdk-google-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
+  width: 100%; padding: 10px 16px; border-radius: 8px;
+  background: #fff; color: #0f172a;
+  border: 1px solid rgba(15,23,42,0.18);
+  font-size: 14px; font-weight: 500; cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.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); }
+  .iqauth-sdk-hero {
+    display: flex; flex-direction: column; justify-content: space-between;
+    padding: 48px 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;
+  }
+  .iqauth-sdk-hero[data-bg-image="true"] {
+    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-foot { font-size: 12px; opacity: 0.7; }
+  .iqauth-sdk-mobile-brand { display: none; }
+}
+`;
+var sdkShellStylesInjected = false;
+function ensureSdkShellStyles() {
+  if (typeof document === "undefined" || sdkShellStylesInjected) return;
+  const tag = document.createElement("style");
+  tag.setAttribute("data-iqauth-sdk-shell", "");
+  tag.textContent = SHELL_CSS;
+  document.head.appendChild(tag);
+  sdkShellStylesInjected = true;
+}
+function useDocumentBranding(branding, fallbackTitle) {
+  (0, import_react.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    const prevTitle = document.title;
+    const brandName = branding?.brandName || "IQAuth";
+    document.title = `${fallbackTitle} \xB7 ${brandName}`;
+    let linkEl = null;
+    let prevHref = null;
+    if (branding?.faviconUrl) {
+      linkEl = document.querySelector("link[rel='icon']");
+      if (!linkEl) {
+        linkEl = document.createElement("link");
+        linkEl.rel = "icon";
+        document.head.appendChild(linkEl);
+      } else {
+        prevHref = linkEl.href;
+      }
+      linkEl.href = branding.faviconUrl;
+    }
+    return () => {
+      document.title = prevTitle;
+      if (linkEl && prevHref !== null) linkEl.href = prevHref;
+    };
+  }, [branding?.brandName, branding?.faviconUrl, fallbackTitle]);
+}
 function Shell({
   branding,
   className,
-  children
+  children,
+  title,
+  subtitle
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      className,
-      style: {
-        background: "var(--brand-surface, #ffffff)",
-        color: "var(--brand-text, #0f172a)",
-        border: "1px solid rgba(15,23,42,0.08)",
-        borderRadius: 12,
-        padding: 24,
-        ...brandStyle(branding)
-      },
-      children: [
-        branding?.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: branding.logoUrl, alt: branding.brandName || "", style: { height: 28, width: "auto", marginBottom: 16 } }) : null,
-        children
-      ]
-    }
-  );
+  ensureSdkShellStyles();
+  useDocumentBranding(branding, title || "Sign in");
+  const brandVars = brandStyle(branding);
+  const brandName = branding?.brandName || "IQAuth";
+  const heroImage = branding?.heroImageUrl || null;
+  const heroStyle = heroImage ? { ["--iqauth-sdk-hero-image"]: `url("${heroImage.replace(/"/g, '\\"')}")` } : {};
+  const supportLink = branding?.supportUrl ? branding.supportUrl : branding?.supportEmail ? `mailto:${branding.supportEmail}` : null;
+  const hasFooterLinks = !!(branding?.termsUrl || branding?.privacyUrl || supportLink);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `iqauth-sdk-shell${className ? ` ${className}` : ""}`, style: brandVars, "data-iqauth-shell": "", children: [
+    branding?.customCss ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { "data-iqauth-sdk-custom": true, children: branding.customCss }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: "iqauth-sdk-hero", "data-bg-image": heroImage ? "true" : "false", style: heroStyle, "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "iqauth-sdk-hero-brand", style: { display: "flex", alignItems: "center", gap: 12 }, children: branding?.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: branding.logoUrl, alt: "" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "iqauth-sdk-hero-name", children: brandName }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "iqauth-sdk-hero-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: branding?.tagline || `Welcome to ${brandName}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: branding?.loginSideCopy || branding?.loginSubheadline || `Sign in to continue to your ${brandName} workspace.` })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "iqauth-sdk-hero-foot", children: `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${brandName}` })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "iqauth-sdk-pane", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { style: { width: "100%", maxWidth: 420 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "iqauth-sdk-mobile-brand", children: branding?.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: branding.logoUrl, alt: `${brandName} logo` }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: brandName }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "iqauth-sdk-card", children: [
+        title || subtitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "iqauth-sdk-card-header", children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: title }) : null,
+          subtitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: subtitle }) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "iqauth-sdk-card-body", children })
+      ] }),
+      hasFooterLinks ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("footer", { className: "iqauth-sdk-footer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "iqauth-sdk-footer-links", children: [
+        branding?.termsUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: branding.termsUrl, target: "_blank", rel: "noreferrer noopener", children: "Terms" }) : null,
+        branding?.privacyUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: branding.privacyUrl, target: "_blank", rel: "noreferrer noopener", children: "Privacy" }) : null,
+        supportLink ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: supportLink, target: "_blank", rel: "noreferrer noopener", children: "Support" }) : null
+      ] }) }) : null
+    ] }) })
+  ] });
 }
 function Field({ label, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 13 }, children: [
@@ -1174,13 +1292,13 @@ function SignIn({ iqAuthBaseUrl, appKey, returnTo, onRedirect, className }) {
       setOauthExchanging(false);
     })();
   }, [ctx?.app.defaultClientId]);
-  if (loading || oauthExchanging) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shell, { branding: ctx?.branding || null, className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: oauthExchanging ? "Completing sign-in\u2026" : "Loading\u2026" }) });
-  if (error || !ctx) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shell, { branding: null, className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorBanner, { message: error || "Failed to load app context" }) });
-  if (!ctx.returnAllowed) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shell, { branding: ctx.branding, className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorBanner, { message: `returnTo "${returnTo}" is not in this app's allowed origins.` }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Shell, { branding: ctx.branding, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: { fontSize: 20, fontWeight: 600, margin: "0 0 12px" }, children: ctx.branding?.loginHeadline || `Sign in to ${ctx.app.name}` }),
-    ctx.branding?.loginSubheadline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { marginBottom: 16, fontSize: 13, opacity: 0.7 }, children: ctx.branding.loginSubheadline }) : null,
-    formError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorBanner, { message: formError }) }) : null,
+  if (loading || oauthExchanging) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shell, { branding: ctx?.branding || null, className, title: oauthExchanging ? "Completing sign-in\u2026" : "Loading\u2026", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: oauthExchanging ? "Completing sign-in\u2026" : "Loading\u2026" }) });
+  if (error || !ctx) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shell, { branding: null, className, title: "Application unavailable", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorBanner, { message: error || "Failed to load app context" }) });
+  if (!ctx.returnAllowed) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shell, { branding: ctx.branding, className, title: "Invalid redirect", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorBanner, { message: `returnTo "${returnTo}" is not in this app's allowed origins.` }) });
+  const cardTitle = ctx.branding?.loginHeadline || `Sign in to ${ctx.app.name}`;
+  const cardSubtitle = ctx.branding?.loginSubheadline || void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Shell, { branding: ctx.branding, className, title: cardTitle, subtitle: cardSubtitle, children: [
+    formError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorBanner, { message: formError }) : null,
     tenantSel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "radiogroup", "aria-label": "Choose tenant", style: { display: "flex", flexDirection: "column", gap: 8 }, children: tenantSel.tenants.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "button",
       {
@@ -1210,20 +1328,16 @@ function SignIn({ iqAuthBaseUrl, appKey, returnTo, onRedirect, className }) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GhostButton, { type: "button", onClick: () => setMfa({ ...mfa, backup: !mfa.backup, code: "" }), children: mfa.backup ? "Use verification code" : "Use backup code" })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
       ctx.providers?.google ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(GhostButton, { type: "button", onClick: startGoogleLogin, disabled: submitting, "aria-label": "Continue with Google", style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 10 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", className: "iqauth-sdk-google-btn", onClick: startGoogleLogin, disabled: submitting, "aria-label": ctx.branding?.googleButtonLabel || "Continue with Google", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", "aria-hidden": "true", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#4285F4", d: "M17.64 9.2c0-.64-.06-1.25-.17-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.71v2.26h2.92a8.78 8.78 0 0 0 2.68-6.61z" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#34A853", d: "M9 18c2.43 0 4.47-.81 5.96-2.18l-2.92-2.26a5.4 5.4 0 0 1-8.04-2.83H.96v2.33A9 9 0 0 0 9 18z" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#FBBC05", d: "M3.96 10.71A5.41 5.41 0 0 1 3.68 9c0-.59.1-1.17.29-1.71V4.96H.96a9 9 0 0 0 0 8.08l3-2.33z" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#EA4335", d: "M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.59A9 9 0 0 0 .96 4.96l3 2.33A5.4 5.4 0 0 1 9 3.58z" })
           ] }),
-          "Continue with Google"
+          ctx.branding?.googleButtonLabel || "Continue with Google"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { role: "separator", "aria-label": "or", style: { display: "flex", alignItems: "center", gap: 10, fontSize: 12, opacity: 0.6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: 1, height: 1, background: "rgba(15,23,42,0.12)" } }),
-          "OR",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: 1, height: 1, background: "rgba(15,23,42,0.12)" } })
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "separator", "aria-label": "or", className: "iqauth-sdk-divider", children: "OR" })
       ] }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { onSubmit: submitLogin, style: { display: "flex", flexDirection: "column", gap: 12 }, "aria-label": `Sign in to ${ctx.app.name}`, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { label: "Email", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { style: inputStyle(), type: "email", autoComplete: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value) }) }),

package/dist/react.mjs

@@ -251,29 +251,147 @@ function useIQAuthSignInContext(iqAuthBaseUrl, appKey, returnTo) {
   }, [iqAuthBaseUrl, appKey, returnTo]);
   return { ctx, loading, error };
 }
+var SHELL_CSS = `
+.iqauth-sdk-shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 1fr;
+  background: var(--brand-bg, #f7f7f6);
+  color: var(--brand-text, #0f172a);
+}
+.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;
+}
+.iqauth-sdk-card {
+  width: 100%; max-width: 420px;
+  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);
+  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-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-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; }
+.iqauth-sdk-footer { margin-top: 20px; text-align: center; font-size: 13px; color: rgba(15,23,42,0.55); display: flex; flex-direction: column; gap: 8px; align-items: center; }
+.iqauth-sdk-footer-links { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
+.iqauth-sdk-footer-links a { color: inherit; opacity: 0.75; text-decoration: none; }
+.iqauth-sdk-footer-links a:hover { opacity: 1; text-decoration: underline; }
+.iqauth-sdk-divider { display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(15,23,42,0.45); text-transform: uppercase; letter-spacing: 0.08em; }
+.iqauth-sdk-divider::before, .iqauth-sdk-divider::after { content: ""; flex: 1; height: 1px; background: rgba(15,23,42,0.1); }
+.iqauth-sdk-google-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
+  width: 100%; padding: 10px 16px; border-radius: 8px;
+  background: #fff; color: #0f172a;
+  border: 1px solid rgba(15,23,42,0.18);
+  font-size: 14px; font-weight: 500; cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.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); }
+  .iqauth-sdk-hero {
+    display: flex; flex-direction: column; justify-content: space-between;
+    padding: 48px 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;
+  }
+  .iqauth-sdk-hero[data-bg-image="true"] {
+    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-foot { font-size: 12px; opacity: 0.7; }
+  .iqauth-sdk-mobile-brand { display: none; }
+}
+`;
+var sdkShellStylesInjected = false;
+function ensureSdkShellStyles() {
+  if (typeof document === "undefined" || sdkShellStylesInjected) return;
+  const tag = document.createElement("style");
+  tag.setAttribute("data-iqauth-sdk-shell", "");
+  tag.textContent = SHELL_CSS;
+  document.head.appendChild(tag);
+  sdkShellStylesInjected = true;
+}
+function useDocumentBranding(branding, fallbackTitle) {
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const prevTitle = document.title;
+    const brandName = branding?.brandName || "IQAuth";
+    document.title = `${fallbackTitle} \xB7 ${brandName}`;
+    let linkEl = null;
+    let prevHref = null;
+    if (branding?.faviconUrl) {
+      linkEl = document.querySelector("link[rel='icon']");
+      if (!linkEl) {
+        linkEl = document.createElement("link");
+        linkEl.rel = "icon";
+        document.head.appendChild(linkEl);
+      } else {
+        prevHref = linkEl.href;
+      }
+      linkEl.href = branding.faviconUrl;
+    }
+    return () => {
+      document.title = prevTitle;
+      if (linkEl && prevHref !== null) linkEl.href = prevHref;
+    };
+  }, [branding?.brandName, branding?.faviconUrl, fallbackTitle]);
+}
 function Shell({
   branding,
   className,
-  children
+  children,
+  title,
+  subtitle
 }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      style: {
-        background: "var(--brand-surface, #ffffff)",
-        color: "var(--brand-text, #0f172a)",
-        border: "1px solid rgba(15,23,42,0.08)",
-        borderRadius: 12,
-        padding: 24,
-        ...brandStyle(branding)
-      },
-      children: [
-        branding?.logoUrl ? /* @__PURE__ */ jsx("img", { src: branding.logoUrl, alt: branding.brandName || "", style: { height: 28, width: "auto", marginBottom: 16 } }) : null,
-        children
-      ]
-    }
-  );
+  ensureSdkShellStyles();
+  useDocumentBranding(branding, title || "Sign in");
+  const brandVars = brandStyle(branding);
+  const brandName = branding?.brandName || "IQAuth";
+  const heroImage = branding?.heroImageUrl || null;
+  const heroStyle = heroImage ? { ["--iqauth-sdk-hero-image"]: `url("${heroImage.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
+    ] }) })
+  ] });
 }
 function Field({ label, children }) {
   return /* @__PURE__ */ jsxs("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 13 }, children: [
@@ -475,13 +593,13 @@ function SignIn({ iqAuthBaseUrl, appKey, returnTo, onRedirect, className }) {
       setOauthExchanging(false);
     })();
   }, [ctx?.app.defaultClientId]);
-  if (loading || oauthExchanging) return /* @__PURE__ */ jsx(Shell, { branding: ctx?.branding || null, className, children: /* @__PURE__ */ jsx("p", { children: oauthExchanging ? "Completing sign-in\u2026" : "Loading\u2026" }) });
-  if (error || !ctx) return /* @__PURE__ */ jsx(Shell, { branding: null, className, children: /* @__PURE__ */ jsx(ErrorBanner, { message: error || "Failed to load app context" }) });
-  if (!ctx.returnAllowed) return /* @__PURE__ */ jsx(Shell, { branding: ctx.branding, className, children: /* @__PURE__ */ jsx(ErrorBanner, { message: `returnTo "${returnTo}" is not in this app's allowed origins.` }) });
-  return /* @__PURE__ */ jsxs(Shell, { branding: ctx.branding, className, children: [
-    /* @__PURE__ */ jsx("h2", { style: { fontSize: 20, fontWeight: 600, margin: "0 0 12px" }, children: ctx.branding?.loginHeadline || `Sign in to ${ctx.app.name}` }),
-    ctx.branding?.loginSubheadline ? /* @__PURE__ */ jsx("p", { style: { marginBottom: 16, fontSize: 13, opacity: 0.7 }, children: ctx.branding.loginSubheadline }) : null,
-    formError ? /* @__PURE__ */ jsx("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsx(ErrorBanner, { message: formError }) }) : null,
+  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 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: [
+    formError ? /* @__PURE__ */ jsx(ErrorBanner, { message: formError }) : null,
     tenantSel ? /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": "Choose tenant", style: { display: "flex", flexDirection: "column", gap: 8 }, children: tenantSel.tenants.map((t) => /* @__PURE__ */ jsxs(
       "button",
       {
@@ -511,20 +629,16 @@ function SignIn({ iqAuthBaseUrl, appKey, returnTo, onRedirect, className }) {
       /* @__PURE__ */ jsx(GhostButton, { type: "button", onClick: () => setMfa({ ...mfa, backup: !mfa.backup, code: "" }), children: mfa.backup ? "Use verification code" : "Use backup code" })
     ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
       ctx.providers?.google ? /* @__PURE__ */ jsxs(Fragment2, { children: [
-        /* @__PURE__ */ jsxs(GhostButton, { type: "button", onClick: startGoogleLogin, disabled: submitting, "aria-label": "Continue with Google", style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 10 }, children: [
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "iqauth-sdk-google-btn", onClick: startGoogleLogin, disabled: submitting, "aria-label": ctx.branding?.googleButtonLabel || "Continue with Google", children: [
           /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx("path", { fill: "#4285F4", d: "M17.64 9.2c0-.64-.06-1.25-.17-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.71v2.26h2.92a8.78 8.78 0 0 0 2.68-6.61z" }),
             /* @__PURE__ */ jsx("path", { fill: "#34A853", d: "M9 18c2.43 0 4.47-.81 5.96-2.18l-2.92-2.26a5.4 5.4 0 0 1-8.04-2.83H.96v2.33A9 9 0 0 0 9 18z" }),
             /* @__PURE__ */ jsx("path", { fill: "#FBBC05", d: "M3.96 10.71A5.41 5.41 0 0 1 3.68 9c0-.59.1-1.17.29-1.71V4.96H.96a9 9 0 0 0 0 8.08l3-2.33z" }),
             /* @__PURE__ */ jsx("path", { fill: "#EA4335", d: "M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.59A9 9 0 0 0 .96 4.96l3 2.33A5.4 5.4 0 0 1 9 3.58z" })
           ] }),
-          "Continue with Google"
+          ctx.branding?.googleButtonLabel || "Continue with Google"
         ] }),
-        /* @__PURE__ */ jsxs("div", { role: "separator", "aria-label": "or", style: { display: "flex", alignItems: "center", gap: 10, fontSize: 12, opacity: 0.6 }, children: [
-          /* @__PURE__ */ jsx("span", { style: { flex: 1, height: 1, background: "rgba(15,23,42,0.12)" } }),
-          "OR",
-          /* @__PURE__ */ jsx("span", { style: { flex: 1, height: 1, background: "rgba(15,23,42,0.12)" } })
-        ] })
+        /* @__PURE__ */ jsx("div", { role: "separator", "aria-label": "or", className: "iqauth-sdk-divider", children: "OR" })
       ] }) : null,
       /* @__PURE__ */ jsxs("form", { onSubmit: submitLogin, style: { display: "flex", flexDirection: "column", gap: 12 }, "aria-label": `Sign in to ${ctx.app.name}`, children: [
         /* @__PURE__ */ jsx(Field, { label: "Email", children: /* @__PURE__ */ jsx("input", { style: inputStyle(), type: "email", autoComplete: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value) }) }),

package/dist/server.d.mts

@@ -1,7 +1,7 @@
 import { b as IQAuthTokenClientConfig, N as ExpressMiddlewareOptions, Q as IQAuthRequestLike, R as IQAuthResponseLike, V as IQAuthNextFunction } from './types-Cxl3bQHt.mjs';
-import { I as IQAuthClient } from './client-C1DXfB8Z.mjs';
+import { I as IQAuthClient } from './client-Dv4v92Mj.mjs';
 export { E as ErrorCodes, I as IQAuthError } from './errors-CDdl24MP.mjs';
-export { C as CookieAwareMiddlewareOptions, D as DEFAULT_ACCESS_COOKIE, a as DEFAULT_REFRESH_COOKIE, i as iqAuthMiddleware } from './express-CpfyYTmw.mjs';
+export { C as CookieAwareMiddlewareOptions, D as DEFAULT_ACCESS_COOKIE, a as DEFAULT_REFRESH_COOKIE, i as iqAuthMiddleware } from './express-BZmF1llh.mjs';
 export { HandlerResponse, IQAuthHelperConfig, SetCookieDirective, handleCallback, handleRefresh, handleSignout, serializeCookie } from './server/handlers.mjs';
 import 'jsonwebtoken';
 

package/dist/server.d.ts

@@ -1,7 +1,7 @@
 import { b as IQAuthTokenClientConfig, N as ExpressMiddlewareOptions, Q as IQAuthRequestLike, R as IQAuthResponseLike, V as IQAuthNextFunction } from './types-Cxl3bQHt.js';
-import { I as IQAuthClient } from './client-CggvJmmm.js';
+import { I as IQAuthClient } from './client-DXbHb2ul.js';
 export { E as ErrorCodes, I as IQAuthError } from './errors-CDdl24MP.js';
-export { C as CookieAwareMiddlewareOptions, D as DEFAULT_ACCESS_COOKIE, a as DEFAULT_REFRESH_COOKIE, i as iqAuthMiddleware } from './express-BKAXB5Nl.js';
+export { C as CookieAwareMiddlewareOptions, D as DEFAULT_ACCESS_COOKIE, a as DEFAULT_REFRESH_COOKIE, i as iqAuthMiddleware } from './express-B4o3P8vK.js';
 export { HandlerResponse, IQAuthHelperConfig, SetCookieDirective, handleCallback, handleRefresh, handleSignout, serializeCookie } from './server/handlers.js';
 import 'jsonwebtoken';
 

package/dist/server.js

@@ -456,7 +456,10 @@ function parseMfaResponse(data, browserSessionMode) {
 var import_crypto = __toESM(require("crypto"));
 var import_jsonwebtoken = __toESM(require("jsonwebtoken"));
 var JWKS_CACHE_TTL_MS = 60 * 60 * 1e3;
-var DEFAULT_TOKEN_ISSUER = "auth.dispositioniq.com";
+var DEFAULT_TOKEN_ISSUER = [
+  "https://auth.dispositioniq.com",
+  "auth.dispositioniq.com"
+];
 var DEFAULT_TOKEN_AUDIENCE = [
   "dispositioniq",
   "iqcapture",

package/dist/server.mjs

@@ -2,7 +2,7 @@ import {
   DEFAULT_ACCESS_COOKIE,
   DEFAULT_REFRESH_COOKIE,
   iqAuthMiddleware
-} from "./chunk-73R6BEGO.mjs";
+} from "./chunk-ZESHDJDU.mjs";
 import {
   handleCallback,
   handleRefresh,
@@ -12,7 +12,7 @@ import {
 import "./chunk-5WFR6Y33.mjs";
 import {
   IQAuthClient
-} from "./chunk-JQWYIIIS.mjs";
+} from "./chunk-MDUHPQMM.mjs";
 import {
   ErrorCodes,
   IQAuthError

package/dist/service.d.mts

@@ -1,4 +1,4 @@
-import { I as IQAuthClient } from './client-C1DXfB8Z.mjs';
+import { I as IQAuthClient } from './client-Dv4v92Mj.mjs';
 import { b as IQAuthTokenClientConfig } from './types-Cxl3bQHt.mjs';
 export { E as ErrorCodes, I as IQAuthError } from './errors-CDdl24MP.mjs';
 import 'jsonwebtoken';

package/dist/service.d.ts

@@ -1,4 +1,4 @@
-import { I as IQAuthClient } from './client-CggvJmmm.js';
+import { I as IQAuthClient } from './client-DXbHb2ul.js';
 import { b as IQAuthTokenClientConfig } from './types-Cxl3bQHt.js';
 export { E as ErrorCodes, I as IQAuthError } from './errors-CDdl24MP.js';
 import 'jsonwebtoken';

package/dist/service.js

@@ -449,7 +449,10 @@ function parseMfaResponse(data, browserSessionMode) {
 var import_crypto = __toESM(require("crypto"));
 var import_jsonwebtoken = __toESM(require("jsonwebtoken"));
 var JWKS_CACHE_TTL_MS = 60 * 60 * 1e3;
-var DEFAULT_TOKEN_ISSUER = "auth.dispositioniq.com";
+var DEFAULT_TOKEN_ISSUER = [
+  "https://auth.dispositioniq.com",
+  "auth.dispositioniq.com"
+];
 var DEFAULT_TOKEN_AUDIENCE = [
   "dispositioniq",
   "iqcapture",

package/dist/service.mjs

@@ -1,6 +1,6 @@
 import {
   IQAuthClient
-} from "./chunk-JQWYIIIS.mjs";
+} from "./chunk-MDUHPQMM.mjs";
 import {
   ErrorCodes,
   IQAuthError

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iqauth/sdk",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "TypeScript SDK for IQAuth — the canonical way for all IQ projects to integrate with IQAuthService",
   "main": "dist/index.js",
   "module": "dist/index.mjs",