@vaultix.ai/react 0.3.3 → 0.3.5

package/dist/index.js

@@ -33,6 +33,7 @@ __export(index_exports, {
   getStoredToken: () => getStoredToken,
   useAuth: () => useAuth,
   useOrganization: () => useOrganization,
+  usePlatformConnect: () => usePlatformConnect,
   useSession: () => useSession,
   useUser: () => useUser,
   useVaultix: () => useVaultix
@@ -111,6 +112,7 @@ function VaultixProvider({
   const [user, setUser] = (0, import_react.useState)(null);
   const [session, setSession] = (0, import_react.useState)(null);
   const [organization, setOrganization] = (0, import_react.useState)(null);
+  const [appConfig, setAppConfig] = (0, import_react.useState)(null);
   const jwtRef = (0, import_react.useRef)(null);
   const refreshTimerRef = (0, import_react.useRef)(null);
   const clearAuth = (0, import_react.useCallback)(() => {
@@ -211,7 +213,21 @@ function VaultixProvider({
         if (!cancelled) setIsLoaded(true);
       }
     }
+    async function fetchAppConfig() {
+      try {
+        const res = await fetch(
+          `${apiOrigin}/api/v1/app/config?pk=${encodeURIComponent(publishableKey)}`,
+          { credentials: "omit" }
+        );
+        if (res.ok && !cancelled) {
+          const cfg = await res.json();
+          setAppConfig(cfg);
+        }
+      } catch {
+      }
+    }
     hydrate();
+    void fetchAppConfig();
     return () => {
       cancelled = true;
       if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
@@ -270,6 +286,7 @@ function VaultixProvider({
     isLoaded,
     isSignedIn: !!session,
     apiOrigin,
+    appConfig,
     signOut,
     updateUser,
     connectPlatform
@@ -304,6 +321,44 @@ function useOrganization() {
   const { organization, isLoaded } = useVaultixContext();
   return { organization, isLoaded };
 }
+function usePlatformConnect(provider, defaultOptions) {
+  const { connectPlatform } = useVaultixContext();
+  const [connectedAccount, setConnectedAccount] = (0, import_react2.useState)(null);
+  const connect = (0, import_react2.useCallback)(
+    (overrides) => {
+      connectPlatform(provider, { ...defaultOptions, ...overrides });
+    },
+    [connectPlatform, provider, defaultOptions]
+  );
+  (0, import_react2.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const connectToken = params.get("__vaultix_connect");
+    const returnedProvider = params.get("provider");
+    if (!connectToken || returnedProvider !== provider) return;
+    try {
+      const segment = connectToken.split(".")[1];
+      if (!segment) return;
+      const b64 = segment.replace(/-/g, "+").replace(/_/g, "/");
+      const payload = JSON.parse(atob(b64));
+      const result = {
+        provider: returnedProvider,
+        raw: payload,
+        ...typeof payload["platform_user_id"] === "string" && { platformUserId: payload["platform_user_id"] },
+        ...typeof payload["username"] === "string" && { username: payload["username"] },
+        ...typeof payload["access_token"] === "string" && { accessToken: payload["access_token"] },
+        ...typeof payload["scope"] === "string" && { scope: payload["scope"] }
+      };
+      setConnectedAccount(result);
+      const clean = new URL(window.location.href);
+      clean.searchParams.delete("__vaultix_connect");
+      clean.searchParams.delete("provider");
+      window.history.replaceState({}, "", clean.toString());
+    } catch {
+    }
+  }, [provider]);
+  return { connect, connectedAccount };
+}
 function useAuth() {
   const { user, session, isLoaded, isSignedIn, signOut } = useVaultixContext();
   const getToken = (0, import_react2.useCallback)(async () => {
@@ -365,9 +420,25 @@ function SignIn({
   onSuccess,
   onError,
   apiOrigin: apiOriginProp,
-  className
+  className,
+  appearance
 }) {
   const apiOrigin = resolveApiOrigin2(apiOriginProp);
+  const vars = appearance?.variables ?? {};
+  const primaryColor = vars.colorPrimary;
+  const cardBg = vars.colorBackground ?? "rgba(22,27,45,0.92)";
+  const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
+  const mutedColor = vars.colorTextMuted ?? "#475569";
+  let appConfig = null;
+  try {
+    appConfig = useVaultixContext().appConfig;
+  } catch {
+  }
+  const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
+  const enabledMethods = appConfig?.methods ?? ["password", "magic_link", "passkey"];
+  const hasPassword = enabledMethods.includes("password");
+  const hasMagicLink = enabledMethods.includes("magic_link");
+  const hasPasskey = enabledMethods.includes("passkey");
   const [step, setStep] = (0, import_react3.useState)("email");
   const [email, setEmail] = (0, import_react3.useState)("");
   const [password, setPassword] = (0, import_react3.useState)("");
@@ -417,7 +488,15 @@ function SignIn({
         setErr(data.error ?? "Could not look up account.");
         return;
       }
-      setStep(data.preferred_challenge === "passkey" ? "passkey" : "password");
+      if (data.preferred_challenge === "passkey" && hasPasskey) {
+        setStep("passkey");
+      } else if (hasPassword) {
+        setStep("password");
+      } else if (hasMagicLink) {
+        await handleMagicLinkRequest();
+      } else if (hasPasskey) {
+        setStep("passkey");
+      }
     } catch {
       setErr("Network error. Please try again.");
     } finally {
@@ -632,24 +711,31 @@ function SignIn({
         "backdrop-blur-[16px]",
         className
       ),
-      style: { background: "rgba(22,27,45,0.92)" },
+      style: { background: cardBg },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-8 pt-8 pb-6 text-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "inline-flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-purple-600 to-blue-600 shadow-lg shadow-purple-500/30 mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LockIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { className: "text-xl font-semibold text-white/90", children: title[step] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-[#475569] mt-1", children: subtitle[step] })
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4",
+              style: primaryColor ? { background: primaryColor, boxShadow: `0 10px 15px -3px ${primaryColor}4d` } : { background: "linear-gradient(to bottom right, #7c3aed, #2563eb)", boxShadow: "0 10px 15px -3px rgba(124,58,237,0.3)" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LockIcon, {})
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { className: "text-xl font-semibold", style: { color: textColor }, children: title[step] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm mt-1", style: { color: mutedColor }, children: subtitle[step] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-8 pb-8 space-y-4", children: [
           error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-red-400", children: error }) }),
           info && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rounded-lg bg-blue-500/10 border border-blue-500/30 px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-blue-400", children: info }) }),
           step === "email" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GoogleButton, { onClick: handleGoogleSignIn }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GitHubButton, { onClick: handleGitHubSignIn }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetaButton, { onClick: handleMetaSignIn }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LinkedInButton, { onClick: handleLinkedInSignIn }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(XButton, { onClick: handleXSignIn }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Divider, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleEmailSubmit, className: "space-y-3", children: [
+            enabledProviders.includes("google") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GoogleButton, { onClick: handleGoogleSignIn }),
+            enabledProviders.includes("github") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GitHubButton, { onClick: handleGitHubSignIn }),
+            enabledProviders.includes("meta") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetaButton, { onClick: handleMetaSignIn }),
+            enabledProviders.includes("linkedin") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LinkedInButton, { onClick: handleLinkedInSignIn }),
+            enabledProviders.includes("x") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(XButton, { onClick: handleXSignIn }),
+            (hasPassword || hasMagicLink || hasPasskey) && enabledProviders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Divider, { mutedColor }),
+            (hasPassword || hasMagicLink || hasPasskey) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleEmailSubmit, className: "space-y-3", children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 Input,
                 {
@@ -658,10 +744,11 @@ function SignIn({
                   value: email,
                   onChange: setEmail,
                   autoFocus: true,
-                  required: true
+                  required: true,
+                  primaryColor
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, children: "Continue" })
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, primaryColor, children: "Continue" })
             ] })
           ] }),
           step === "password" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handlePasswordSubmit, className: "space-y-3", children: [
@@ -673,42 +760,52 @@ function SignIn({
                 value: password,
                 onChange: setPassword,
                 autoFocus: true,
-                required: true
+                required: true,
+                primaryColor
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, children: "Sign in" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 h-px bg-white/8" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[10px] text-[#475569]", children: "or" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 h-px bg-white/8" })
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, primaryColor, children: "Sign in" }),
+            hasMagicLink && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 h-px bg-white/8" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[10px]", style: { color: mutedColor }, children: "or" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 h-px bg-white/8" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: handleMagicLinkRequest, mutedColor, children: "\u2709 Email me a sign-in link" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: handleMagicLinkRequest, children: "\u2709 Email me a sign-in link" }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => {
               setStep("forgot");
               setError(null);
-            }, children: "Forgot password?" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => setStep("email"), children: "\u2190 Back" })
+            }, mutedColor, children: "Forgot password?" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => setStep("email"), mutedColor, children: "\u2190 Back" })
           ] }),
           step === "magic-link-sent" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-4 text-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-14 h-14 rounded-2xl bg-purple-500/15 border border-purple-500/30 flex items-center justify-center mx-auto", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EnvelopeIcon, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-sm text-[#94a3b8] leading-relaxed", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                className: "w-14 h-14 rounded-2xl flex items-center justify-center mx-auto border",
+                style: primaryColor ? { background: `${primaryColor}26`, borderColor: `${primaryColor}4d` } : { background: "rgba(168,85,247,0.15)", borderColor: "rgba(168,85,247,0.3)" },
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EnvelopeIcon, { color: primaryColor ?? "#a78bfa" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-sm leading-relaxed", style: { color: mutedColor }, children: [
               "The link expires in ",
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-white/80 font-medium", children: "15 minutes" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: textColor }, className: "font-medium", children: "15 minutes" }),
               " and can only be used once."
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: handleMagicLinkRequest, children: "Resend link" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: handleMagicLinkRequest, mutedColor, children: "Resend link" }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => {
               setStep("password");
               setError(null);
-            }, children: "Use password instead" })
+            }, mutedColor, children: "Use password instead" })
           ] }),
           step === "passkey" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(PrimaryButton, { loading, onClick: handlePasskeySignIn, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(PrimaryButton, { loading, onClick: handlePasskeySignIn, primaryColor, children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FingerprintIcon, {}),
               "Authenticate with passkey"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => setStep("password"), children: "Use password instead" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => setStep("email"), children: "\u2190 Back" })
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => setStep("password"), mutedColor, children: "Use password instead" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => setStep("email"), mutedColor, children: "\u2190 Back" })
           ] }),
           step === "totp" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleTotpSubmit, className: "space-y-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -723,11 +820,12 @@ function SignIn({
                 onChange: setTotp,
                 autoFocus: true,
                 required: true,
-                className: "text-center tracking-[0.4em] text-lg"
+                className: "text-center tracking-[0.4em] text-lg",
+                primaryColor
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, children: "Verify" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => setStep("password"), children: "\u2190 Back" })
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, primaryColor, children: "Verify" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => setStep("password"), mutedColor, children: "\u2190 Back" })
           ] }),
           step === "forgot" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleForgotSubmit, className: "space-y-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -738,14 +836,15 @@ function SignIn({
                 value: email,
                 onChange: setEmail,
                 autoFocus: true,
-                required: true
+                required: true,
+                primaryColor
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, children: "Send reset code" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, primaryColor, children: "Send reset code" }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => {
               setStep("password");
               setError(null);
-            }, children: "\u2190 Back" })
+            }, mutedColor, children: "\u2190 Back" })
           ] }),
           step === "forgot-verify" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleForgotVerifySubmit, className: "space-y-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -760,10 +859,11 @@ function SignIn({
                 onChange: setForgotCode,
                 autoFocus: true,
                 required: true,
-                className: "text-center tracking-[0.4em] text-lg"
+                className: "text-center tracking-[0.4em] text-lg",
+                primaryColor
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, children: "Continue" })
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, primaryColor, children: "Continue" })
           ] }),
           step === "forgot-reset" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleResetPasswordSubmit, className: "space-y-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -775,18 +875,19 @@ function SignIn({
                 onChange: setNewPassword,
                 autoFocus: true,
                 required: true,
-                minLength: 8
+                minLength: 8,
+                primaryColor
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PasswordStrength, { password: newPassword }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, children: "Reset password" })
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, primaryColor, children: "Reset password" })
           ] })
         ] })
       ]
     }
   );
 }
-function Input({ onChange, className, ...props }) {
+function Input({ onChange, className, primaryColor, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "input",
     {
@@ -795,39 +896,48 @@ function Input({ onChange, className, ...props }) {
       className: (0, import_clsx.clsx)(
         "w-full bg-white/5 border border-white/8 rounded-xl px-4 py-2.5",
         "text-sm text-white/90 placeholder:text-[#475569]",
-        "focus:outline-none focus:border-purple-500/60 transition-colors",
+        "focus:outline-none transition-colors",
+        !primaryColor && "focus:border-purple-500/60",
         className
-      )
+      ),
+      style: primaryColor ? { "--vx-focus": primaryColor } : void 0,
+      onFocus: (e) => {
+        if (primaryColor) e.currentTarget.style.borderColor = `${primaryColor}99`;
+        props.onFocus?.(e);
+      },
+      onBlur: (e) => {
+        if (primaryColor) e.currentTarget.style.borderColor = "";
+        props.onBlur?.(e);
+      }
     }
   );
 }
-function PrimaryButton({ children, loading, onClick }) {
+function PrimaryButton({ children, loading, onClick, primaryColor }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
       type: onClick ? "button" : "submit",
       onClick,
       disabled: loading,
+      style: primaryColor ? { background: primaryColor, boxShadow: `0 10px 15px -3px ${primaryColor}33` } : void 0,
       className: (0, import_clsx.clsx)(
         "w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl",
-        "text-sm font-semibold text-white",
-        "bg-gradient-to-r from-purple-600 to-blue-600",
-        "hover:from-purple-500 hover:to-blue-500",
-        "shadow-lg shadow-purple-500/20",
-        "transition-all duration-150",
-        "disabled:opacity-60 disabled:cursor-not-allowed"
+        "text-sm font-semibold text-white transition-all duration-150",
+        "disabled:opacity-60 disabled:cursor-not-allowed",
+        !primaryColor && "bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 shadow-lg shadow-purple-500/20"
       ),
       children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, {}) : children
     }
   );
 }
-function GhostButton({ children, onClick }) {
+function GhostButton({ children, onClick, mutedColor }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
       type: "button",
       onClick,
-      className: "w-full text-xs text-[#475569] hover:text-white/70 transition-colors py-1",
+      className: "w-full text-xs transition-colors py-1 hover:opacity-80",
+      style: { color: mutedColor ?? "#475569" },
       children
     }
   );
@@ -871,10 +981,10 @@ function GitHubButton({ onClick }) {
 function XButton({ onClick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OAuthButton, { icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(XIcon, {}), label: "Continue with X", onClick });
 }
-function Divider() {
+function Divider({ mutedColor }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 h-px bg-white/8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[10px] text-[#475569] uppercase tracking-wider", children: "or" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[10px] uppercase tracking-wider", style: { color: mutedColor ?? "#475569" }, children: "or" }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 h-px bg-white/8" })
   ] });
 }
@@ -944,8 +1054,8 @@ function GitHubIcon() {
 function XIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) });
 }
-function EnvelopeIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#a78bfa", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+function EnvelopeIcon({ color = "#a78bfa" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
   ] });
@@ -963,6 +1073,13 @@ function resolveApiOrigin3(prop) {
   }
   return "";
 }
+function resolvePk2() {
+  if (typeof document !== "undefined") {
+    const el = document.querySelector("[data-vaultix-pk]");
+    if (el) return el.getAttribute("data-vaultix-pk") ?? "";
+  }
+  return "";
+}
 function resolveAfterSignUpUrl(redirectUrlProp) {
   if (redirectUrlProp) return redirectUrlProp;
   if (typeof document !== "undefined") {
@@ -980,9 +1097,23 @@ function SignUp({
   onSuccess,
   onError,
   apiOrigin: apiOriginProp,
-  className
+  className,
+  appearance
 }) {
   const apiOrigin = resolveApiOrigin3(apiOriginProp);
+  const vars = appearance?.variables ?? {};
+  const primaryColor = vars.colorPrimary;
+  const cardBg = vars.colorBackground ?? "rgba(22,27,45,0.92)";
+  const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
+  const mutedColor = vars.colorTextMuted ?? "#475569";
+  let appConfig = null;
+  try {
+    appConfig = useVaultixContext().appConfig;
+  } catch {
+  }
+  const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
+  const enabledMethods = appConfig?.methods ?? ["password", "magic_link", "passkey"];
+  const hasPassword = enabledMethods.includes("password");
   const [step, setStep] = (0, import_react4.useState)("email");
   const [email, setEmail] = (0, import_react4.useState)("");
   const [password, setPassword] = (0, import_react4.useState)("");
@@ -1001,10 +1132,12 @@ function SignUp({
     url.searchParams.set("__vaultix_handshake", handshakeToken);
     window.location.href = url.toString();
   }
-  function handleGoogleSignUp() {
+  function oauthRedirect(provider) {
     const target = resolveAfterSignUpUrl(redirectUrl);
+    const pk = resolvePk2();
     const params = new URLSearchParams({ redirect_url: target });
-    window.location.href = `${apiOrigin}/api/v1/auth/oauth/google?${params}`;
+    if (pk) params.set("pk", pk);
+    window.location.href = `${apiOrigin}/api/v1/auth/oauth/${provider}?${params}`;
   }
   async function handleEmailPassword(e) {
     e.preventDefault();
@@ -1075,48 +1208,61 @@ function SignUp({
         "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl backdrop-blur-[16px]",
         className
       ),
-      style: { background: "rgba(22,27,45,0.92)" },
+      style: { background: cardBg },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "px-8 pt-8 pb-6 text-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "inline-flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-600 to-teal-600 shadow-lg shadow-emerald-500/30 mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SparkleIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { className: "text-xl font-semibold text-white/90", children: step === "verify" ? "Check your email" : "Create an account" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-[#475569] mt-1", children: step === "verify" ? `We sent a code to ${email}` : "Start your free trial today" })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4",
+              style: primaryColor ? { background: primaryColor, boxShadow: `0 10px 15px -3px ${primaryColor}4d` } : { background: "linear-gradient(to bottom right, #059669, #0d9488)", boxShadow: "0 10px 15px -3px rgba(5,150,105,0.3)" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SparkleIcon, {})
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { className: "text-xl font-semibold", style: { color: textColor }, children: step === "verify" ? "Check your email" : "Create an account" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm mt-1", style: { color: mutedColor }, children: step === "verify" ? `We sent a code to ${email}` : "Start your free trial today" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "px-8 pb-8 space-y-4", children: [
           error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-red-400", children: error }) }),
           step === "email" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GoogleButton2, { onClick: handleGoogleSignUp }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Divider2, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit: handleEmailPassword, className: "space-y-3", children: [
+            enabledProviders.includes("google") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OAuthButton2, { icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GoogleIcon2, {}), label: "Continue with Google", onClick: () => oauthRedirect("google") }),
+            enabledProviders.includes("github") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OAuthButton2, { icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GitHubIcon2, {}), label: "Continue with GitHub", onClick: () => oauthRedirect("github") }),
+            enabledProviders.includes("meta") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OAuthButton2, { icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetaIcon2, {}), label: "Continue with Facebook", onClick: () => oauthRedirect("meta") }),
+            enabledProviders.includes("linkedin") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OAuthButton2, { icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkedInIcon2, {}), label: "Continue with LinkedIn", onClick: () => oauthRedirect("linkedin") }),
+            enabledProviders.includes("x") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OAuthButton2, { icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(XIcon2, {}), label: "Continue with X", onClick: () => oauthRedirect("x") }),
+            hasPassword && enabledProviders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Divider2, { mutedColor }),
+            hasPassword && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit: handleEmailPassword, className: "space-y-3", children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                SignUpInput,
+                Input2,
                 {
                   type: "email",
                   placeholder: "you@company.com",
                   value: email,
                   onChange: setEmail,
                   autoFocus: true,
-                  required: true
+                  required: true,
+                  primaryColor
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                SignUpInput,
+                Input2,
                 {
                   type: "password",
                   placeholder: "Create a password",
                   value: password,
                   onChange: setPassword,
                   required: true,
-                  minLength: 8
+                  minLength: 8,
+                  primaryColor
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PasswordStrength2, { password }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SignUpPrimaryButton, { loading, children: "Create account" })
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PasswordStrength2, { password, primaryColor }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PrimaryButton2, { loading, primaryColor, children: "Create account" })
             ] })
           ] }),
           step === "verify" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit: handleVerification, className: "space-y-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              SignUpInput,
+              Input2,
               {
                 type: "text",
                 inputMode: "numeric",
@@ -1127,16 +1273,18 @@ function SignUp({
                 onChange: setVerificationCode,
                 autoFocus: true,
                 required: true,
-                className: "text-center tracking-[0.4em] text-lg"
+                className: "text-center tracking-[0.4em] text-lg",
+                primaryColor
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SignUpPrimaryButton, { loading, children: "Verify email" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PrimaryButton2, { loading, primaryColor, children: "Verify email" }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "button",
               {
                 type: "button",
                 onClick: resendCode,
-                className: "w-full text-xs text-[#475569] hover:text-white/70 transition-colors py-1",
+                className: "w-full text-xs transition-colors py-1 hover:opacity-80",
+                style: { color: mutedColor },
                 children: "Resend code"
               }
             )
@@ -1146,7 +1294,7 @@ function SignUp({
     }
   );
 }
-function SignUpInput({ onChange, className, ...props }) {
+function Input2({ onChange, className, primaryColor, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "input",
     {
@@ -1155,34 +1303,47 @@ function SignUpInput({ onChange, className, ...props }) {
       className: (0, import_clsx2.clsx)(
         "w-full bg-white/5 border border-white/8 rounded-xl px-4 py-2.5",
         "text-sm text-white/90 placeholder:text-[#475569]",
-        "focus:outline-none focus:border-emerald-500/60 transition-colors",
+        "focus:outline-none transition-colors",
+        !primaryColor && "focus:border-emerald-500/60",
         className
-      )
+      ),
+      onFocus: (e) => {
+        if (primaryColor) e.currentTarget.style.borderColor = `${primaryColor}99`;
+        props.onFocus?.(e);
+      },
+      onBlur: (e) => {
+        if (primaryColor) e.currentTarget.style.borderColor = "";
+        props.onBlur?.(e);
+      }
     }
   );
 }
-function SignUpPrimaryButton({
+function PrimaryButton2({
   children,
-  loading
+  loading,
+  primaryColor
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "button",
     {
       type: "submit",
       disabled: loading,
+      style: primaryColor ? { background: primaryColor, boxShadow: `0 10px 15px -3px ${primaryColor}33` } : void 0,
       className: (0, import_clsx2.clsx)(
         "w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl",
-        "text-sm font-semibold text-white",
-        "bg-gradient-to-r from-emerald-600 to-teal-600",
-        "hover:from-emerald-500 hover:to-teal-500",
-        "shadow-lg shadow-emerald-500/20 transition-all duration-150",
-        "disabled:opacity-60 disabled:cursor-not-allowed"
+        "text-sm font-semibold text-white transition-all duration-150",
+        "disabled:opacity-60 disabled:cursor-not-allowed",
+        !primaryColor && "bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 shadow-lg shadow-emerald-500/20"
       ),
       children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner2, {}) : children
     }
   );
 }
-function GoogleButton2({ onClick }) {
+function OAuthButton2({
+  icon,
+  label,
+  onClick
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "button",
     {
@@ -1196,20 +1357,20 @@ function GoogleButton2({ onClick }) {
         "transition-all duration-150"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GoogleIcon2, {}),
-        "Continue with Google"
+        icon,
+        label
       ]
     }
   );
 }
-function Divider2() {
+function Divider2({ mutedColor }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1 h-px bg-white/8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[10px] text-[#475569] uppercase tracking-wider", children: "or" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[10px] uppercase tracking-wider", style: { color: mutedColor ?? "#475569" }, children: "or" }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1 h-px bg-white/8" })
   ] });
 }
-function PasswordStrength2({ password }) {
+function PasswordStrength2({ password, primaryColor }) {
   const score = (() => {
     if (password.length === 0) return 0;
     let s = 0;
@@ -1221,15 +1382,17 @@ function PasswordStrength2({ password }) {
   })();
   if (password.length === 0) return null;
   const labels = ["", "Weak", "Fair", "Good", "Strong"];
-  const colors = ["", "bg-red-500", "bg-amber-400", "bg-blue-400", "bg-emerald-400"];
+  const tailwindColors = ["", "bg-red-500", "bg-amber-400", "bg-blue-400", "bg-emerald-400"];
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex gap-1", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
         className: (0, import_clsx2.clsx)(
           "flex-1 h-0.5 rounded-full transition-all duration-300",
-          i <= score ? colors[score] : "bg-white/10"
-        )
+          i <= score && !primaryColor ? tailwindColors[score] : void 0,
+          i > score || !primaryColor && i <= score ? void 0 : void 0
+        ),
+        style: i <= score && primaryColor ? { background: score >= 4 ? primaryColor : void 0 } : { background: i <= score ? void 0 : "rgba(255,255,255,0.1)" }
       },
       i
     )) }),
@@ -1253,6 +1416,18 @@ function GoogleIcon2() {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })
   ] });
 }
+function MetaIcon2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "#1877F2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) });
+}
+function LinkedInIcon2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "#0A66C2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }) });
+}
+function GitHubIcon2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" }) });
+}
+function XIcon2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) });
+}
 
 // src/components/SignedIn.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -2039,6 +2214,7 @@ function clearStoredToken() {
   getStoredToken,
   useAuth,
   useOrganization,
+  usePlatformConnect,
   useSession,
   useUser,
   useVaultix