@vaultix.ai/react 0.3.3 → 0.3.4

package/dist/index.mjs

@@ -254,7 +254,7 @@ function VaultixProvider({
 }
 
 // src/hooks/index.ts
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
 function useVaultix() {
   return useVaultixContext();
 }
@@ -270,6 +270,44 @@ function useOrganization() {
   const { organization, isLoaded } = useVaultixContext();
   return { organization, isLoaded };
 }
+function usePlatformConnect(provider, defaultOptions) {
+  const { connectPlatform } = useVaultixContext();
+  const [connectedAccount, setConnectedAccount] = useState2(null);
+  const connect = useCallback2(
+    (overrides) => {
+      connectPlatform(provider, { ...defaultOptions, ...overrides });
+    },
+    [connectPlatform, provider, defaultOptions]
+  );
+  useEffect2(() => {
+    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 = useCallback2(async () => {
@@ -294,7 +332,7 @@ function useAuth() {
 
 // src/components/SignIn.tsx
 import { clsx } from "clsx";
-import { useRef as useRef2, useState as useState2 } from "react";
+import { useRef as useRef2, useState as useState3 } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function toBase64url(buf) {
   return btoa(String.fromCharCode(...new Uint8Array(buf))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
@@ -331,18 +369,24 @@ function SignIn({
   onSuccess,
   onError,
   apiOrigin: apiOriginProp,
-  className
+  className,
+  appearance
 }) {
   const apiOrigin = resolveApiOrigin2(apiOriginProp);
-  const [step, setStep] = useState2("email");
-  const [email, setEmail] = useState2("");
-  const [password, setPassword] = useState2("");
-  const [totp, setTotp] = useState2("");
-  const [forgotCode, setForgotCode] = useState2("");
-  const [newPassword, setNewPassword] = useState2("");
-  const [error, setError] = useState2(null);
-  const [loading, setLoading] = useState2(false);
-  const [info, setInfo] = useState2(null);
+  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";
+  const [step, setStep] = useState3("email");
+  const [email, setEmail] = useState3("");
+  const [password, setPassword] = useState3("");
+  const [totp, setTotp] = useState3("");
+  const [forgotCode, setForgotCode] = useState3("");
+  const [newPassword, setNewPassword] = useState3("");
+  const [error, setError] = useState3(null);
+  const [loading, setLoading] = useState3(false);
+  const [info, setInfo] = useState3(null);
   const challengeIdRef = useRef2(null);
   function setErr(msg) {
     setError(msg);
@@ -598,12 +642,19 @@ function SignIn({
         "backdrop-blur-[16px]",
         className
       ),
-      style: { background: "rgba(22,27,45,0.92)" },
+      style: { background: cardBg },
       children: [
         /* @__PURE__ */ jsxs("div", { className: "px-8 pt-8 pb-6 text-center", children: [
-          /* @__PURE__ */ jsx2("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__ */ jsx2(LockIcon, {}) }),
-          /* @__PURE__ */ jsx2("h1", { className: "text-xl font-semibold text-white/90", children: title[step] }),
-          /* @__PURE__ */ jsx2("p", { className: "text-sm text-[#475569] mt-1", children: subtitle[step] })
+          /* @__PURE__ */ jsx2(
+            "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__ */ jsx2(LockIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx2("h1", { className: "text-xl font-semibold", style: { color: textColor }, children: title[step] }),
+          /* @__PURE__ */ jsx2("p", { className: "text-sm mt-1", style: { color: mutedColor }, children: subtitle[step] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "px-8 pb-8 space-y-4", children: [
           error && /* @__PURE__ */ jsx2("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2", children: /* @__PURE__ */ jsx2("p", { className: "text-xs text-red-400", children: error }) }),
@@ -614,7 +665,7 @@ function SignIn({
             /* @__PURE__ */ jsx2(MetaButton, { onClick: handleMetaSignIn }),
             /* @__PURE__ */ jsx2(LinkedInButton, { onClick: handleLinkedInSignIn }),
             /* @__PURE__ */ jsx2(XButton, { onClick: handleXSignIn }),
-            /* @__PURE__ */ jsx2(Divider, {}),
+            /* @__PURE__ */ jsx2(Divider, { mutedColor }),
             /* @__PURE__ */ jsxs("form", { onSubmit: handleEmailSubmit, className: "space-y-3", children: [
               /* @__PURE__ */ jsx2(
                 Input,
@@ -624,10 +675,11 @@ function SignIn({
                   value: email,
                   onChange: setEmail,
                   autoFocus: true,
-                  required: true
+                  required: true,
+                  primaryColor
                 }
               ),
-              /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Continue" })
+              /* @__PURE__ */ jsx2(PrimaryButton, { loading, primaryColor, children: "Continue" })
             ] })
           ] }),
           step === "password" && /* @__PURE__ */ jsxs("form", { onSubmit: handlePasswordSubmit, className: "space-y-3", children: [
@@ -639,42 +691,50 @@ function SignIn({
                 value: password,
                 onChange: setPassword,
                 autoFocus: true,
-                required: true
+                required: true,
+                primaryColor
               }
             ),
-            /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Sign in" }),
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, primaryColor, children: "Sign in" }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" }),
-              /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-[#475569]", children: "or" }),
+              /* @__PURE__ */ jsx2("span", { className: "text-[10px]", style: { color: mutedColor }, children: "or" }),
               /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" })
             ] }),
-            /* @__PURE__ */ jsx2(GhostButton, { onClick: handleMagicLinkRequest, children: "\u2709 Email me a sign-in link" }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: handleMagicLinkRequest, mutedColor, children: "\u2709 Email me a sign-in link" }),
             /* @__PURE__ */ jsx2(GhostButton, { onClick: () => {
               setStep("forgot");
               setError(null);
-            }, children: "Forgot password?" }),
-            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("email"), children: "\u2190 Back" })
+            }, mutedColor, children: "Forgot password?" }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("email"), mutedColor, children: "\u2190 Back" })
           ] }),
           step === "magic-link-sent" && /* @__PURE__ */ jsxs("div", { className: "space-y-4 text-center", children: [
-            /* @__PURE__ */ jsx2("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__ */ jsx2(EnvelopeIcon, {}) }),
-            /* @__PURE__ */ jsxs("p", { className: "text-sm text-[#94a3b8] leading-relaxed", children: [
+            /* @__PURE__ */ jsx2(
+              "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__ */ jsx2(EnvelopeIcon, { color: primaryColor ?? "#a78bfa" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm leading-relaxed", style: { color: mutedColor }, children: [
               "The link expires in ",
-              /* @__PURE__ */ jsx2("span", { className: "text-white/80 font-medium", children: "15 minutes" }),
+              /* @__PURE__ */ jsx2("span", { style: { color: textColor }, className: "font-medium", children: "15 minutes" }),
               " and can only be used once."
             ] }),
-            /* @__PURE__ */ jsx2(GhostButton, { onClick: handleMagicLinkRequest, children: "Resend link" }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: handleMagicLinkRequest, mutedColor, children: "Resend link" }),
             /* @__PURE__ */ jsx2(GhostButton, { onClick: () => {
               setStep("password");
               setError(null);
-            }, children: "Use password instead" })
+            }, mutedColor, children: "Use password instead" })
           ] }),
           step === "passkey" && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsxs(PrimaryButton, { loading, onClick: handlePasskeySignIn, children: [
+            /* @__PURE__ */ jsxs(PrimaryButton, { loading, onClick: handlePasskeySignIn, primaryColor, children: [
               /* @__PURE__ */ jsx2(FingerprintIcon, {}),
               "Authenticate with passkey"
             ] }),
-            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("password"), children: "Use password instead" }),
-            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("email"), children: "\u2190 Back" })
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("password"), mutedColor, children: "Use password instead" }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("email"), mutedColor, children: "\u2190 Back" })
           ] }),
           step === "totp" && /* @__PURE__ */ jsxs("form", { onSubmit: handleTotpSubmit, className: "space-y-3", children: [
             /* @__PURE__ */ jsx2(
@@ -689,11 +749,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__ */ jsx2(PrimaryButton, { loading, children: "Verify" }),
-            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("password"), children: "\u2190 Back" })
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, primaryColor, children: "Verify" }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("password"), mutedColor, children: "\u2190 Back" })
           ] }),
           step === "forgot" && /* @__PURE__ */ jsxs("form", { onSubmit: handleForgotSubmit, className: "space-y-3", children: [
             /* @__PURE__ */ jsx2(
@@ -704,14 +765,15 @@ function SignIn({
                 value: email,
                 onChange: setEmail,
                 autoFocus: true,
-                required: true
+                required: true,
+                primaryColor
               }
             ),
-            /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Send reset code" }),
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, primaryColor, children: "Send reset code" }),
             /* @__PURE__ */ jsx2(GhostButton, { onClick: () => {
               setStep("password");
               setError(null);
-            }, children: "\u2190 Back" })
+            }, mutedColor, children: "\u2190 Back" })
           ] }),
           step === "forgot-verify" && /* @__PURE__ */ jsxs("form", { onSubmit: handleForgotVerifySubmit, className: "space-y-3", children: [
             /* @__PURE__ */ jsx2(
@@ -726,10 +788,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__ */ jsx2(PrimaryButton, { loading, children: "Continue" })
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, primaryColor, children: "Continue" })
           ] }),
           step === "forgot-reset" && /* @__PURE__ */ jsxs("form", { onSubmit: handleResetPasswordSubmit, className: "space-y-3", children: [
             /* @__PURE__ */ jsx2(
@@ -741,18 +804,19 @@ function SignIn({
                 onChange: setNewPassword,
                 autoFocus: true,
                 required: true,
-                minLength: 8
+                minLength: 8,
+                primaryColor
               }
             ),
             /* @__PURE__ */ jsx2(PasswordStrength, { password: newPassword }),
-            /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Reset password" })
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, primaryColor, children: "Reset password" })
           ] })
         ] })
       ]
     }
   );
 }
-function Input({ onChange, className, ...props }) {
+function Input({ onChange, className, primaryColor, ...props }) {
   return /* @__PURE__ */ jsx2(
     "input",
     {
@@ -761,39 +825,48 @@ function Input({ onChange, className, ...props }) {
       className: 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__ */ jsx2(
     "button",
     {
       type: onClick ? "button" : "submit",
       onClick,
       disabled: loading,
+      style: primaryColor ? { background: primaryColor, boxShadow: `0 10px 15px -3px ${primaryColor}33` } : void 0,
       className: 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__ */ jsx2(Spinner, {}) : children
     }
   );
 }
-function GhostButton({ children, onClick }) {
+function GhostButton({ children, onClick, mutedColor }) {
   return /* @__PURE__ */ jsx2(
     "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
     }
   );
@@ -837,10 +910,10 @@ function GitHubButton({ onClick }) {
 function XButton({ onClick }) {
   return /* @__PURE__ */ jsx2(OAuthButton, { icon: /* @__PURE__ */ jsx2(XIcon, {}), label: "Continue with X", onClick });
 }
-function Divider() {
+function Divider({ mutedColor }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
     /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" }),
-    /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-[#475569] uppercase tracking-wider", children: "or" }),
+    /* @__PURE__ */ jsx2("span", { className: "text-[10px] uppercase tracking-wider", style: { color: mutedColor ?? "#475569" }, children: "or" }),
     /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" })
   ] });
 }
@@ -910,8 +983,8 @@ function GitHubIcon() {
 function XIcon() {
   return /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ jsx2("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__ */ 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__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx2("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
     /* @__PURE__ */ jsx2("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
   ] });
@@ -919,7 +992,7 @@ function EnvelopeIcon() {
 
 // src/components/SignUp.tsx
 import { clsx as clsx2 } from "clsx";
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function resolveApiOrigin3(prop) {
   if (prop) return prop;
@@ -929,6 +1002,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") {
@@ -946,16 +1026,22 @@ function SignUp({
   onSuccess,
   onError,
   apiOrigin: apiOriginProp,
-  className
+  className,
+  appearance
 }) {
   const apiOrigin = resolveApiOrigin3(apiOriginProp);
-  const [step, setStep] = useState3("email");
-  const [email, setEmail] = useState3("");
-  const [password, setPassword] = useState3("");
-  const [verificationCode, setVerificationCode] = useState3("");
-  const [error, setError] = useState3(null);
-  const [loading, setLoading] = useState3(false);
-  const [registrationId, setRegistrationId] = useState3(null);
+  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";
+  const [step, setStep] = useState4("email");
+  const [email, setEmail] = useState4("");
+  const [password, setPassword] = useState4("");
+  const [verificationCode, setVerificationCode] = useState4("");
+  const [error, setError] = useState4(null);
+  const [loading, setLoading] = useState4(false);
+  const [registrationId, setRegistrationId] = useState4(null);
   function setErr(msg) {
     setError(msg);
     onError?.(msg);
@@ -967,10 +1053,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();
@@ -1041,48 +1129,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__ */ jsxs2("div", { className: "px-8 pt-8 pb-6 text-center", children: [
-          /* @__PURE__ */ jsx3("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__ */ jsx3(SparkleIcon, {}) }),
-          /* @__PURE__ */ jsx3("h1", { className: "text-xl font-semibold text-white/90", children: step === "verify" ? "Check your email" : "Create an account" }),
-          /* @__PURE__ */ jsx3("p", { className: "text-sm text-[#475569] mt-1", children: step === "verify" ? `We sent a code to ${email}` : "Start your free trial today" })
+          /* @__PURE__ */ jsx3(
+            "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__ */ jsx3(SparkleIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx3("h1", { className: "text-xl font-semibold", style: { color: textColor }, children: step === "verify" ? "Check your email" : "Create an account" }),
+          /* @__PURE__ */ jsx3("p", { className: "text-sm mt-1", style: { color: mutedColor }, children: step === "verify" ? `We sent a code to ${email}` : "Start your free trial today" })
         ] }),
         /* @__PURE__ */ jsxs2("div", { className: "px-8 pb-8 space-y-4", children: [
           error && /* @__PURE__ */ jsx3("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2", children: /* @__PURE__ */ jsx3("p", { className: "text-xs text-red-400", children: error }) }),
           step === "email" && /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsx3(GoogleButton2, { onClick: handleGoogleSignUp }),
-            /* @__PURE__ */ jsx3(Divider2, {}),
+            /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(GoogleIcon2, {}), label: "Continue with Google", onClick: () => oauthRedirect("google") }),
+            /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(GitHubIcon2, {}), label: "Continue with GitHub", onClick: () => oauthRedirect("github") }),
+            /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(MetaIcon2, {}), label: "Continue with Facebook", onClick: () => oauthRedirect("meta") }),
+            /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(LinkedInIcon2, {}), label: "Continue with LinkedIn", onClick: () => oauthRedirect("linkedin") }),
+            /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(XIcon2, {}), label: "Continue with X", onClick: () => oauthRedirect("x") }),
+            /* @__PURE__ */ jsx3(Divider2, { mutedColor }),
             /* @__PURE__ */ jsxs2("form", { onSubmit: handleEmailPassword, className: "space-y-3", children: [
               /* @__PURE__ */ jsx3(
-                SignUpInput,
+                Input2,
                 {
                   type: "email",
                   placeholder: "you@company.com",
                   value: email,
                   onChange: setEmail,
                   autoFocus: true,
-                  required: true
+                  required: true,
+                  primaryColor
                 }
               ),
               /* @__PURE__ */ jsx3(
-                SignUpInput,
+                Input2,
                 {
                   type: "password",
                   placeholder: "Create a password",
                   value: password,
                   onChange: setPassword,
                   required: true,
-                  minLength: 8
+                  minLength: 8,
+                  primaryColor
                 }
               ),
-              /* @__PURE__ */ jsx3(PasswordStrength2, { password }),
-              /* @__PURE__ */ jsx3(SignUpPrimaryButton, { loading, children: "Create account" })
+              /* @__PURE__ */ jsx3(PasswordStrength2, { password, primaryColor }),
+              /* @__PURE__ */ jsx3(PrimaryButton2, { loading, primaryColor, children: "Create account" })
             ] })
           ] }),
           step === "verify" && /* @__PURE__ */ jsxs2("form", { onSubmit: handleVerification, className: "space-y-3", children: [
             /* @__PURE__ */ jsx3(
-              SignUpInput,
+              Input2,
               {
                 type: "text",
                 inputMode: "numeric",
@@ -1093,16 +1194,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__ */ jsx3(SignUpPrimaryButton, { loading, children: "Verify email" }),
+            /* @__PURE__ */ jsx3(PrimaryButton2, { loading, primaryColor, children: "Verify email" }),
             /* @__PURE__ */ jsx3(
               "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"
               }
             )
@@ -1112,7 +1215,7 @@ function SignUp({
     }
   );
 }
-function SignUpInput({ onChange, className, ...props }) {
+function Input2({ onChange, className, primaryColor, ...props }) {
   return /* @__PURE__ */ jsx3(
     "input",
     {
@@ -1121,34 +1224,47 @@ function SignUpInput({ onChange, className, ...props }) {
       className: clsx2(
         "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__ */ jsx3(
     "button",
     {
       type: "submit",
       disabled: loading,
+      style: primaryColor ? { background: primaryColor, boxShadow: `0 10px 15px -3px ${primaryColor}33` } : void 0,
       className: clsx2(
         "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__ */ jsx3(Spinner2, {}) : children
     }
   );
 }
-function GoogleButton2({ onClick }) {
+function OAuthButton2({
+  icon,
+  label,
+  onClick
+}) {
   return /* @__PURE__ */ jsxs2(
     "button",
     {
@@ -1162,20 +1278,20 @@ function GoogleButton2({ onClick }) {
         "transition-all duration-150"
       ),
       children: [
-        /* @__PURE__ */ jsx3(GoogleIcon2, {}),
-        "Continue with Google"
+        icon,
+        label
       ]
     }
   );
 }
-function Divider2() {
+function Divider2({ mutedColor }) {
   return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
     /* @__PURE__ */ jsx3("div", { className: "flex-1 h-px bg-white/8" }),
-    /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-[#475569] uppercase tracking-wider", children: "or" }),
+    /* @__PURE__ */ jsx3("span", { className: "text-[10px] uppercase tracking-wider", style: { color: mutedColor ?? "#475569" }, children: "or" }),
     /* @__PURE__ */ jsx3("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;
@@ -1187,15 +1303,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__ */ jsxs2("div", { className: "space-y-1", children: [
     /* @__PURE__ */ jsx3("div", { className: "flex gap-1", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx3(
       "div",
       {
         className: clsx2(
           "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
     )) }),
@@ -1219,6 +1337,18 @@ function GoogleIcon2() {
     /* @__PURE__ */ jsx3("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__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "#1877F2", children: /* @__PURE__ */ jsx3("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__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "#0A66C2", children: /* @__PURE__ */ jsx3("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__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ jsx3("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__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ jsx3("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
 import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
@@ -1234,10 +1364,10 @@ function SignedOut({ children }) {
 }
 
 // src/components/RedirectComponents.tsx
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 function RedirectToSignIn({ redirectUrl = "/sign-in" }) {
   const { isLoaded, isSignedIn } = useVaultixContext();
-  useEffect2(() => {
+  useEffect3(() => {
     if (isLoaded && !isSignedIn) {
       window.location.href = redirectUrl;
     }
@@ -1246,7 +1376,7 @@ function RedirectToSignIn({ redirectUrl = "/sign-in" }) {
 }
 function RedirectToSignUp({ redirectUrl = "/sign-up" }) {
   const { isLoaded, isSignedIn } = useVaultixContext();
-  useEffect2(() => {
+  useEffect3(() => {
     if (isLoaded && !isSignedIn) {
       window.location.href = redirectUrl;
     }
@@ -1256,15 +1386,15 @@ function RedirectToSignUp({ redirectUrl = "/sign-up" }) {
 
 // src/components/UserButton.tsx
 import { clsx as clsx3 } from "clsx";
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function UserButton({ showName = false, afterSignOutUrl, className }) {
   const { user, session, isLoaded, isSignedIn, signOut } = useVaultixContext();
-  const [open, setOpen] = useState4(false);
-  const [signingOut, setSigningOut] = useState4(false);
-  const [showProfile, setShowProfile] = useState4(false);
+  const [open, setOpen] = useState5(false);
+  const [signingOut, setSigningOut] = useState5(false);
+  const [showProfile, setShowProfile] = useState5(false);
   const containerRef = useRef3(null);
-  useEffect3(() => {
+  useEffect4(() => {
     function onPointerDown(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
     }
@@ -1326,17 +1456,17 @@ function UserButton({ showName = false, afterSignOutUrl, className }) {
 }
 function ProfileModal({ onClose }) {
   const { user, updateUser } = useVaultixContext();
-  const [tab, setTab] = useState4("profile");
-  const [firstName, setFirstName] = useState4(user?.firstName ?? "");
-  const [lastName, setLastName] = useState4(user?.lastName ?? "");
-  const [imageUrl, setImageUrl] = useState4(user?.imageUrl ?? "");
-  const [currentPassword, setCurrentPassword] = useState4("");
-  const [newPassword, setNewPassword] = useState4("");
-  const [confirmPassword, setConfirmPassword] = useState4("");
-  const [saving, setSaving] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [success, setSuccess] = useState4(null);
-  useEffect3(() => {
+  const [tab, setTab] = useState5("profile");
+  const [firstName, setFirstName] = useState5(user?.firstName ?? "");
+  const [lastName, setLastName] = useState5(user?.lastName ?? "");
+  const [imageUrl, setImageUrl] = useState5(user?.imageUrl ?? "");
+  const [currentPassword, setCurrentPassword] = useState5("");
+  const [newPassword, setNewPassword] = useState5("");
+  const [confirmPassword, setConfirmPassword] = useState5("");
+  const [saving, setSaving] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [success, setSuccess] = useState5(null);
+  useEffect4(() => {
     function onKey(e) {
       if (e.key === "Escape") onClose();
     }
@@ -1447,17 +1577,17 @@ function ProfileModal({ onClose }) {
 }
 function SecurityTab() {
   const { apiOrigin } = useVaultixContext();
-  const [totpEnabled, setTotpEnabled] = useState4(null);
-  const [backupCodesLeft, setBackupCodesLeft] = useState4(null);
-  const [enrollStep, setEnrollStep] = useState4("idle");
-  const [qrDataUrl, setQrDataUrl] = useState4("");
-  const [manualKey, setManualKey] = useState4("");
-  const [enrollCode, setEnrollCode] = useState4("");
-  const [disableCode, setDisableCode] = useState4("");
-  const [backupCodes, setBackupCodes] = useState4([]);
-  const [loading, setLoading] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [showDisable, setShowDisable] = useState4(false);
+  const [totpEnabled, setTotpEnabled] = useState5(null);
+  const [backupCodesLeft, setBackupCodesLeft] = useState5(null);
+  const [enrollStep, setEnrollStep] = useState5("idle");
+  const [qrDataUrl, setQrDataUrl] = useState5("");
+  const [manualKey, setManualKey] = useState5("");
+  const [enrollCode, setEnrollCode] = useState5("");
+  const [disableCode, setDisableCode] = useState5("");
+  const [backupCodes, setBackupCodes] = useState5([]);
+  const [loading, setLoading] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [showDisable, setShowDisable] = useState5(false);
   const fetchStatus = useCallback3(async () => {
     const res = await fetch(`${apiOrigin}/api/v1/auth/totp/status`, { credentials: "include" });
     if (res.ok) {
@@ -1466,7 +1596,7 @@ function SecurityTab() {
       setBackupCodesLeft(d.backup_codes_remaining);
     }
   }, [apiOrigin]);
-  useEffect3(() => {
+  useEffect4(() => {
     void fetchStatus();
   }, [fetchStatus]);
   async function startEnroll() {
@@ -1782,7 +1912,7 @@ function CloseIcon() {
 
 // src/components/OrganizationSwitcher.tsx
 import { clsx as clsx4 } from "clsx";
-import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState6 } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function resolveApiOrigin4() {
   if (typeof document !== "undefined") {
@@ -1796,11 +1926,11 @@ function OrganizationSwitcher({
   className
 }) {
   const { organization, isLoaded, isSignedIn } = useVaultixContext();
-  const [open, setOpen] = useState5(false);
-  const [orgs, setOrgs] = useState5([]);
-  const [switching, setSwitching] = useState5(null);
+  const [open, setOpen] = useState6(false);
+  const [orgs, setOrgs] = useState6([]);
+  const [switching, setSwitching] = useState6(null);
   const containerRef = useRef4(null);
-  useEffect4(() => {
+  useEffect5(() => {
     function onPointerDown(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setOpen(false);
@@ -1809,7 +1939,7 @@ function OrganizationSwitcher({
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!open) return;
     const api = resolveApiOrigin4();
     fetch(`${api}/v1/me/organizations`, { credentials: "include" }).then((r) => r.json()).then(
@@ -2004,6 +2134,7 @@ export {
   getStoredToken,
   useAuth,
   useOrganization,
+  usePlatformConnect,
   useSession,
   useUser,
   useVaultix