@vaultix.ai/react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1152 @@
+// src/context/VaultixProvider.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+function resolveApiOrigin(key, apiUrlProp) {
+  if (apiUrlProp) return apiUrlProp.replace(/\/$/, "");
+  const parts = key.split("_");
+  if (parts.length < 4 || parts[1] !== "pk") {
+    throw new Error("Invalid publishable key format.");
+  }
+  if (parts[0] === "smritix") {
+    throw new Error(
+      'smritix_ publishable keys require the "apiUrl" prop on <VaultixProvider>.\nExample: <VaultixProvider publishableKey="..." apiUrl="https://your-auth-engine.up.railway.app">'
+    );
+  }
+  if (parts[0] !== "vaultix") {
+    throw new Error(`Unknown publishable key prefix "${parts[0]}".`);
+  }
+  try {
+    return atob(parts.slice(3).join("_")).replace(/\/$/, "");
+  } catch {
+    throw new Error("Publishable key has an unreadable API origin payload.");
+  }
+}
+var VaultixContext = createContext(null);
+function useVaultixContext() {
+  const ctx = useContext(VaultixContext);
+  if (!ctx) {
+    throw new Error(
+      '<VaultixProvider> is missing from the component tree. Wrap your app root with <VaultixProvider publishableKey="...">.'
+    );
+  }
+  return ctx;
+}
+function VaultixProvider({
+  publishableKey,
+  apiUrl,
+  children,
+  afterSignInUrl,
+  afterSignUpUrl
+}) {
+  const apiOrigin = resolveApiOrigin(publishableKey, apiUrl);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [user, setUser] = useState(null);
+  const [session, setSession] = useState(null);
+  const [organization, setOrganization] = useState(null);
+  const refreshTimerRef = useRef(null);
+  const scheduleRefresh = useCallback(
+    (expiresAt) => {
+      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+      const msUntilRefresh = expiresAt * 1e3 - Date.now() - 1e4;
+      if (msUntilRefresh <= 0) return;
+      refreshTimerRef.current = setTimeout(async () => {
+        try {
+          const res = await fetch(`${apiOrigin}/v1/session/refresh`, {
+            method: "POST",
+            credentials: "include"
+          });
+          if (!res.ok) {
+            setUser(null);
+            setSession(null);
+            setOrganization(null);
+            return;
+          }
+          const data = await res.json();
+          setSession(data.session);
+          scheduleRefresh(data.session.expiresAt);
+        } catch {
+        }
+      }, msUntilRefresh);
+    },
+    [apiOrigin]
+  );
+  useEffect(() => {
+    let cancelled = false;
+    async function hydrate() {
+      try {
+        const res = await fetch(`${apiOrigin}/v1/me`, {
+          credentials: "include",
+          headers: { "X-Vaultix-Publishable-Key": publishableKey }
+        });
+        if (!res.ok) {
+          if (!cancelled) setIsLoaded(true);
+          return;
+        }
+        const data = await res.json();
+        if (!cancelled) {
+          setUser(data.user);
+          setSession(data.session);
+          setOrganization(data.organization);
+          setIsLoaded(true);
+          scheduleRefresh(data.session.expiresAt);
+        }
+      } catch {
+        if (!cancelled) setIsLoaded(true);
+      }
+    }
+    hydrate();
+    return () => {
+      cancelled = true;
+      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+    };
+  }, [apiOrigin, publishableKey, scheduleRefresh]);
+  const signOut = useCallback(async () => {
+    try {
+      await fetch(`${apiOrigin}/v1/session`, {
+        method: "DELETE",
+        credentials: "include"
+      });
+    } catch {
+    } finally {
+      setUser(null);
+      setSession(null);
+      setOrganization(null);
+      if (afterSignInUrl) window.location.href = afterSignInUrl;
+    }
+  }, [apiOrigin, afterSignInUrl]);
+  const value = {
+    user,
+    session,
+    organization,
+    isLoaded,
+    isSignedIn: !!session,
+    signOut
+  };
+  return /* @__PURE__ */ jsx(VaultixContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-vaultix-after-sign-in": afterSignInUrl ?? "",
+      "data-vaultix-after-sign-up": afterSignUpUrl ?? "",
+      "data-vaultix-api": apiOrigin,
+      style: { display: "contents" },
+      children
+    }
+  ) });
+}
+
+// src/hooks/index.ts
+function useVaultix() {
+  return useVaultixContext();
+}
+function useSession() {
+  const { session, isLoaded, isSignedIn } = useVaultixContext();
+  return { session, isLoaded, isSignedIn };
+}
+function useUser() {
+  const { user, isLoaded, isSignedIn } = useVaultixContext();
+  return { user, isLoaded, isSignedIn };
+}
+function useOrganization() {
+  const { organization, isLoaded } = useVaultixContext();
+  return { organization, isLoaded };
+}
+
+// src/components/SignIn.tsx
+import { clsx } from "clsx";
+import { useRef as useRef2, useState as useState2 } 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, "");
+}
+function resolveApiOrigin2(prop) {
+  if (prop) return prop;
+  if (typeof document !== "undefined") {
+    const el = document.querySelector("[data-vaultix-api]");
+    if (el) return el.getAttribute("data-vaultix-api") ?? "";
+  }
+  return "";
+}
+function SignIn({
+  redirectUrl,
+  onSuccess,
+  onError,
+  apiOrigin: apiOriginProp,
+  className
+}) {
+  const apiOrigin = resolveApiOrigin2(apiOriginProp);
+  const [step, setStep] = useState2("email");
+  const [email, setEmail] = useState2("");
+  const [password, setPassword] = useState2("");
+  const [totp, setTotp] = useState2("");
+  const [error, setError] = useState2(null);
+  const [loading, setLoading] = useState2(false);
+  const challengeIdRef = useRef2(null);
+  function setErr(msg) {
+    setError(msg);
+    onError?.(msg);
+  }
+  async function handleEmailSubmit(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await fetch(`${apiOrigin}/v1/auth/lookup`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setErr(data.error ?? "Could not look up account.");
+        return;
+      }
+      setStep(data.preferred_challenge === "passkey" ? "passkey" : "password");
+    } catch {
+      setErr("Network error. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function handlePasswordSubmit(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await fetch(`${apiOrigin}/v1/auth/sign-in`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setErr(data.error ?? "Invalid credentials.");
+        return;
+      }
+      if (data.requires_totp) {
+        challengeIdRef.current = data.challenge_id ?? null;
+        setStep("totp");
+        return;
+      }
+      handleSuccess(data.session_id);
+    } catch {
+      setErr("Network error. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function handlePasskeySignIn() {
+    setError(null);
+    setLoading(true);
+    try {
+      const optRes = await fetch(
+        `${apiOrigin}/v1/auth/passkey/authenticate/options`,
+        {
+          method: "POST",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email })
+        }
+      );
+      if (!optRes.ok) {
+        setErr("Could not start passkey authentication.");
+        return;
+      }
+      const options = await optRes.json();
+      const credential = await navigator.credentials.get({
+        publicKey: options
+      });
+      const verifyRes = await fetch(
+        `${apiOrigin}/v1/auth/passkey/authenticate/verify`,
+        {
+          method: "POST",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            email,
+            id: credential.id,
+            rawId: toBase64url(credential.rawId),
+            response: {
+              authenticatorData: toBase64url(
+                credential.response.authenticatorData
+              ),
+              clientDataJSON: toBase64url(credential.response.clientDataJSON),
+              signature: toBase64url(
+                credential.response.signature
+              )
+            },
+            type: credential.type
+          })
+        }
+      );
+      const verifyData = await verifyRes.json();
+      if (!verifyRes.ok) {
+        setErr(verifyData.error ?? "Passkey verification failed.");
+        return;
+      }
+      handleSuccess(verifyData.session_id);
+    } catch (err) {
+      if (err instanceof Error && err.name === "NotAllowedError") {
+        setErr("Passkey was cancelled or timed out.");
+      } else {
+        setErr("Passkey authentication failed.");
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function handleTotpSubmit(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await fetch(`${apiOrigin}/v1/auth/totp/verify`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          challenge_id: challengeIdRef.current,
+          code: totp
+        })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setErr(data.error ?? "Invalid code.");
+        return;
+      }
+      handleSuccess(data.session_id);
+    } catch {
+      setErr("Network error. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+  function handleSuccess(sessionId) {
+    onSuccess?.(sessionId);
+    const target = redirectUrl ?? document.querySelector("[data-vaultix-after-sign-in]")?.getAttribute("data-vaultix-after-sign-in") ?? "/";
+    if (target) window.location.href = target;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "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)" },
+      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__ */ jsxs("h1", { className: "text-xl font-semibold text-white/90", children: [
+            step === "email" && "Sign in",
+            step === "password" && "Enter password",
+            step === "passkey" && "Passkey sign-in",
+            step === "totp" && "Two-factor code"
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "text-sm text-[#475569] mt-1", children: [
+            step === "email" && "Welcome back",
+            step === "password" && email,
+            step === "passkey" && email,
+            step === "totp" && "Enter the 6-digit code from your authenticator app"
+          ] })
+        ] }),
+        /* @__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 }) }),
+          step === "email" && /* @__PURE__ */ jsxs("form", { onSubmit: handleEmailSubmit, className: "space-y-3", children: [
+            /* @__PURE__ */ jsx2(
+              Input,
+              {
+                type: "email",
+                placeholder: "you@company.com",
+                value: email,
+                onChange: setEmail,
+                autoFocus: true,
+                required: true
+              }
+            ),
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Continue" })
+          ] }),
+          step === "password" && /* @__PURE__ */ jsxs("form", { onSubmit: handlePasswordSubmit, className: "space-y-3", children: [
+            /* @__PURE__ */ jsx2(
+              Input,
+              {
+                type: "password",
+                placeholder: "Password",
+                value: password,
+                onChange: setPassword,
+                autoFocus: true,
+                required: true
+              }
+            ),
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Sign in" }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("email"), children: "\u2190 Back" })
+          ] }),
+          step === "passkey" && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs(PrimaryButton, { loading, onClick: handlePasskeySignIn, 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" })
+          ] }),
+          step === "totp" && /* @__PURE__ */ jsxs("form", { onSubmit: handleTotpSubmit, className: "space-y-3", children: [
+            /* @__PURE__ */ jsx2(
+              Input,
+              {
+                type: "text",
+                inputMode: "numeric",
+                pattern: "[0-9]{6}",
+                maxLength: 6,
+                placeholder: "000000",
+                value: totp,
+                onChange: setTotp,
+                autoFocus: true,
+                required: true,
+                className: "text-center tracking-[0.4em] text-lg"
+              }
+            ),
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Verify" }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("password"), children: "\u2190 Back" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function Input({ onChange, className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "input",
+    {
+      ...props,
+      onChange: (e) => onChange(e.target.value),
+      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",
+        className
+      )
+    }
+  );
+}
+function PrimaryButton({ children, loading, onClick }) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: onClick ? "button" : "submit",
+      onClick,
+      disabled: loading,
+      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"
+      ),
+      children: loading ? /* @__PURE__ */ jsx2(Spinner, {}) : children
+    }
+  );
+}
+function GhostButton({ children, onClick }) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "w-full text-xs text-[#475569] hover:text-white/70 transition-colors py-1",
+      children
+    }
+  );
+}
+function Spinner() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "animate-spin h-4 w-4 text-white/80",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      children: [
+        /* @__PURE__ */ jsx2("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+          }
+        )
+      ]
+    }
+  );
+}
+function LockIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx2("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+  ] });
+}
+function FingerprintIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx2("path", { d: "M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M5 19.5C5.5 18 6 15 6 12c0-1.7.7-3.2 1.8-4.3" }),
+    /* @__PURE__ */ jsx2("path", { d: "M17.5 10c.4.8.5 1.3.5 2 0 2-.7 5-1 6.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M22 12c0 1-.2 2.4-.6 3.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9 12c0 1.2.6 2.5 1.5 3.2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 12v.01" })
+  ] });
+}
+
+// src/components/SignUp.tsx
+import { clsx as clsx2 } from "clsx";
+import { useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function resolveApiOrigin3(prop) {
+  if (prop) return prop;
+  if (typeof document !== "undefined") {
+    const el = document.querySelector("[data-vaultix-api]");
+    if (el) return el.getAttribute("data-vaultix-api") ?? "";
+  }
+  return "";
+}
+function SignUp({
+  redirectUrl,
+  onSuccess,
+  onError,
+  apiOrigin: apiOriginProp,
+  className
+}) {
+  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);
+  function setErr(msg) {
+    setError(msg);
+    onError?.(msg);
+  }
+  async function handleEmailPassword(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await fetch(`${apiOrigin}/v1/auth/sign-up`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setErr(data.error ?? "Could not create account.");
+        return;
+      }
+      setRegistrationId(data.registration_id ?? null);
+      setStep("verify");
+    } catch {
+      setErr("Network error. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function handleVerification(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await fetch(`${apiOrigin}/v1/auth/email/verify`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          registration_id: registrationId,
+          code: verificationCode
+        })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setErr(data.error ?? "Invalid code.");
+        return;
+      }
+      onSuccess?.(data.session_id);
+      const target = redirectUrl ?? document.querySelector("[data-vaultix-after-sign-up]")?.getAttribute("data-vaultix-after-sign-up") ?? "/";
+      if (target) window.location.href = target;
+    } catch {
+      setErr("Network error. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function resendCode() {
+    if (!registrationId) return;
+    try {
+      await fetch(`${apiOrigin}/v1/auth/email/resend`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ registration_id: registrationId })
+      });
+    } catch {
+    }
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: clsx2(
+        "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)" },
+      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__ */ 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" || step === "password") && /* @__PURE__ */ jsxs2("form", { onSubmit: handleEmailPassword, className: "space-y-3", children: [
+            /* @__PURE__ */ jsx3(
+              SignUpInput,
+              {
+                type: "email",
+                placeholder: "you@company.com",
+                value: email,
+                onChange: setEmail,
+                autoFocus: true,
+                required: true
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              SignUpInput,
+              {
+                type: "password",
+                placeholder: "Create a password",
+                value: password,
+                onChange: setPassword,
+                required: true,
+                minLength: 8
+              }
+            ),
+            /* @__PURE__ */ jsx3(PasswordStrength, { password }),
+            /* @__PURE__ */ jsx3(SignUpPrimaryButton, { loading, children: "Create account" })
+          ] }),
+          step === "verify" && /* @__PURE__ */ jsxs2("form", { onSubmit: handleVerification, className: "space-y-3", children: [
+            /* @__PURE__ */ jsx3(
+              SignUpInput,
+              {
+                type: "text",
+                inputMode: "numeric",
+                pattern: "[0-9]{6}",
+                maxLength: 6,
+                placeholder: "000000",
+                value: verificationCode,
+                onChange: setVerificationCode,
+                autoFocus: true,
+                required: true,
+                className: "text-center tracking-[0.4em] text-lg"
+              }
+            ),
+            /* @__PURE__ */ jsx3(SignUpPrimaryButton, { loading, 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",
+                children: "Resend code"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function SignUpInput({ onChange, className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "input",
+    {
+      ...props,
+      onChange: (e) => onChange(e.target.value),
+      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",
+        className
+      )
+    }
+  );
+}
+function SignUpPrimaryButton({
+  children,
+  loading
+}) {
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "submit",
+      disabled: loading,
+      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"
+      ),
+      children: loading ? /* @__PURE__ */ jsx3(Spinner2, {}) : children
+    }
+  );
+}
+function PasswordStrength({ password }) {
+  const score = (() => {
+    if (password.length === 0) return 0;
+    let s = 0;
+    if (password.length >= 8) s++;
+    if (/[A-Z]/.test(password)) s++;
+    if (/[0-9]/.test(password)) s++;
+    if (/[^A-Za-z0-9]/.test(password)) s++;
+    return s;
+  })();
+  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"
+  ];
+  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
+    )) }),
+    /* @__PURE__ */ jsx3("p", { className: "text-[10px] text-[#475569]", children: labels[score] })
+  ] });
+}
+function Spinner2() {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      className: "animate-spin h-4 w-4 text-white/80",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      children: [
+        /* @__PURE__ */ jsx3("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+          }
+        )
+      ]
+    }
+  );
+}
+function SparkleIcon() {
+  return /* @__PURE__ */ jsx3("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) });
+}
+
+// src/components/UserButton.tsx
+import { clsx as clsx3 } from "clsx";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState4 } from "react";
+import { jsx as jsx4, 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 containerRef = useRef3(null);
+  useEffect2(() => {
+    function onPointerDown(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, []);
+  if (!isLoaded) return /* @__PURE__ */ jsx4(AvatarSkeleton, {});
+  if (!isSignedIn || !user) return null;
+  const initials = [user.firstName, user.lastName].filter(Boolean).map((s) => s.charAt(0)).join("").toUpperCase() || user.email.charAt(0).toUpperCase();
+  async function handleSignOut() {
+    setSigningOut(true);
+    await signOut();
+    if (afterSignOutUrl) window.location.href = afterSignOutUrl;
+  }
+  return /* @__PURE__ */ jsxs3("div", { ref: containerRef, className: clsx3("relative", className), children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        onClick: () => setOpen((o) => !o),
+        className: "flex items-center gap-2 rounded-xl p-1 hover:bg-white/8 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx4(Avatar, { initials, imageUrl: user.imageUrl }),
+          showName && /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium text-white/90 pr-1", children: user.firstName ?? user.email })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: clsx3(
+          "absolute right-0 mt-2 w-64 rounded-2xl border border-white/8",
+          "backdrop-blur-[16px] shadow-2xl shadow-black/40 z-50"
+        ),
+        style: { background: "rgba(22,27,45,0.96)" },
+        children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-white/8", children: [
+            /* @__PURE__ */ jsx4(Avatar, { initials, imageUrl: user.imageUrl, size: "lg" }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
+              (user.firstName || user.lastName) && /* @__PURE__ */ jsx4("p", { className: "text-sm font-semibold text-white/90 truncate", children: [user.firstName, user.lastName].filter(Boolean).join(" ") }),
+              /* @__PURE__ */ jsx4("p", { className: "text-xs text-[#475569] truncate", children: user.email })
+            ] })
+          ] }),
+          session && /* @__PURE__ */ jsx4("div", { className: "px-4 py-2 border-b border-white/8", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx4("span", { className: "text-[10px] uppercase tracking-widest text-[#475569]", children: "Risk level" }),
+            /* @__PURE__ */ jsx4(RiskBadge, { level: session.riskLevel })
+          ] }) }),
+          /* @__PURE__ */ jsxs3("div", { className: "p-2", children: [
+            /* @__PURE__ */ jsx4(
+              DropdownItem,
+              {
+                label: "Manage account",
+                icon: /* @__PURE__ */ jsx4(UserIcon, {}),
+                onClick: () => setOpen(false)
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              DropdownItem,
+              {
+                label: "Security settings",
+                icon: /* @__PURE__ */ jsx4(ShieldIcon, {}),
+                onClick: () => setOpen(false)
+              }
+            ),
+            /* @__PURE__ */ jsx4("div", { className: "h-px bg-white/8 my-1" }),
+            /* @__PURE__ */ jsx4(
+              DropdownItem,
+              {
+                label: signingOut ? "Signing out\u2026" : "Sign out",
+                icon: /* @__PURE__ */ jsx4(SignOutIcon, {}),
+                onClick: handleSignOut,
+                destructive: true
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function Avatar({ initials, imageUrl, size = "sm" }) {
+  const dim = size === "lg" ? "w-9 h-9 text-sm" : "w-8 h-8 text-xs";
+  if (imageUrl) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsx4(
+        "img",
+        {
+          src: imageUrl,
+          alt: "",
+          className: clsx3(dim, "rounded-full object-cover ring-2 ring-white/10")
+        }
+      )
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: clsx3(
+        dim,
+        "rounded-full flex items-center justify-center font-semibold text-white",
+        "bg-gradient-to-br from-purple-600 to-blue-600 ring-2 ring-white/10"
+      ),
+      children: initials
+    }
+  );
+}
+function AvatarSkeleton() {
+  return /* @__PURE__ */ jsx4("div", { className: "w-8 h-8 rounded-full bg-white/5 animate-pulse" });
+}
+function RiskBadge({ level }) {
+  const styles = {
+    low: "bg-emerald-500/15 text-emerald-400 border-emerald-500/30",
+    medium: "bg-amber-500/15 text-amber-400 border-amber-500/30",
+    high: "bg-orange-500/15 text-orange-400 border-orange-500/30",
+    critical: "bg-red-500/15 text-red-400 border-red-500/30"
+  };
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      className: clsx3(
+        "inline-flex items-center text-[10px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded-full border",
+        styles[level] ?? styles.low
+      ),
+      children: level
+    }
+  );
+}
+function DropdownItem({ label, icon, onClick, destructive }) {
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      onClick,
+      className: clsx3(
+        "w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-colors",
+        destructive ? "text-red-400 hover:bg-red-500/10" : "text-white/70 hover:text-white hover:bg-white/8"
+      ),
+      children: [
+        /* @__PURE__ */ jsx4("span", { className: "opacity-70", children: icon }),
+        label
+      ]
+    }
+  );
+}
+function UserIcon() {
+  return /* @__PURE__ */ jsxs3("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx4("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "7", r: "4" })
+  ] });
+}
+function ShieldIcon() {
+  return /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) });
+}
+function SignOutIcon() {
+  return /* @__PURE__ */ jsxs3("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx4("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+    /* @__PURE__ */ jsx4("polyline", { points: "16 17 21 12 16 7" }),
+    /* @__PURE__ */ jsx4("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+  ] });
+}
+
+// src/components/OrganizationSwitcher.tsx
+import { clsx as clsx4 } from "clsx";
+import { useEffect as useEffect3, useRef as useRef4, useState as useState5 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function resolveApiOrigin4() {
+  if (typeof document !== "undefined") {
+    const el = document.querySelector("[data-vaultix-api]");
+    if (el) return el.getAttribute("data-vaultix-api") ?? "";
+  }
+  return "";
+}
+function OrganizationSwitcher({
+  afterSwitchUrl,
+  className
+}) {
+  const { organization, isLoaded, isSignedIn } = useVaultixContext();
+  const [open, setOpen] = useState5(false);
+  const [orgs, setOrgs] = useState5([]);
+  const [switching, setSwitching] = useState5(null);
+  const containerRef = useRef4(null);
+  useEffect3(() => {
+    function onPointerDown(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, []);
+  useEffect3(() => {
+    if (!open) return;
+    const api = resolveApiOrigin4();
+    fetch(`${api}/v1/me/organizations`, { credentials: "include" }).then((r) => r.json()).then(
+      (data) => setOrgs(data.organizations ?? [])
+    ).catch(() => {
+    });
+  }, [open]);
+  if (!isLoaded || !isSignedIn) return null;
+  async function switchOrg(orgId) {
+    if (switching) return;
+    setSwitching(orgId);
+    try {
+      const api = resolveApiOrigin4();
+      const res = await fetch(`${api}/v1/session/org`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ org_id: orgId })
+      });
+      if (res.ok) {
+        setOpen(false);
+        if (afterSwitchUrl) {
+          window.location.href = afterSwitchUrl;
+        } else {
+          window.location.reload();
+        }
+      }
+    } finally {
+      setSwitching(null);
+    }
+  }
+  const displayName = organization?.name ?? "Personal";
+  const initials = displayName.split(/\s+/).slice(0, 2).map((w) => w[0]).join("").toUpperCase();
+  return /* @__PURE__ */ jsxs4("div", { ref: containerRef, className: clsx4("relative", className), children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        onClick: () => setOpen((o) => !o),
+        className: clsx4(
+          "flex items-center gap-2 px-2 py-1.5 rounded-xl",
+          "border border-white/8 hover:border-white/16 hover:bg-white/5",
+          "transition-all duration-150"
+        ),
+        children: [
+          /* @__PURE__ */ jsx5(OrgAvatar, { initials }),
+          /* @__PURE__ */ jsxs4("div", { className: "text-left min-w-0", children: [
+            /* @__PURE__ */ jsx5("p", { className: "text-sm font-semibold text-white/90 truncate max-w-[120px]", children: displayName }),
+            organization && /* @__PURE__ */ jsx5("p", { className: "text-[10px] text-[#475569] capitalize", children: organization.role })
+          ] }),
+          /* @__PURE__ */ jsx5(ChevronIcon, {})
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: clsx4(
+          "absolute left-0 mt-2 w-72 rounded-2xl border border-white/8",
+          "backdrop-blur-[16px] shadow-2xl shadow-black/40 z-50"
+        ),
+        style: { background: "rgba(22,27,45,0.96)" },
+        children: [
+          /* @__PURE__ */ jsx5("div", { className: "px-4 py-3 border-b border-white/8", children: /* @__PURE__ */ jsx5("p", { className: "text-[10px] uppercase tracking-widest text-[#475569]", children: "Switch organization" }) }),
+          /* @__PURE__ */ jsxs4("div", { className: "p-2 max-h-56 overflow-y-auto", children: [
+            orgs.length === 0 && /* @__PURE__ */ jsx5("p", { className: "text-xs text-[#475569] text-center py-4", children: "Loading\u2026" }),
+            orgs.map((org) => {
+              const isActive = org.id === organization?.id;
+              const orgInitials = org.name.split(/\s+/).slice(0, 2).map((w) => w[0]).join("").toUpperCase();
+              return /* @__PURE__ */ jsxs4(
+                "button",
+                {
+                  onClick: () => !isActive && switchOrg(org.id),
+                  disabled: isActive || switching === org.id,
+                  className: clsx4(
+                    "w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-colors text-left",
+                    isActive ? "bg-purple-500/10 cursor-default" : "hover:bg-white/8 cursor-pointer"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx5(OrgAvatar, { initials: orgInitials, active: isActive }),
+                    /* @__PURE__ */ jsxs4("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ jsx5(
+                        "p",
+                        {
+                          className: clsx4(
+                            "text-sm font-medium truncate",
+                            isActive ? "text-purple-300" : "text-white/80"
+                          ),
+                          children: org.name
+                        }
+                      ),
+                      /* @__PURE__ */ jsx5("p", { className: "text-[10px] text-[#475569] capitalize", children: org.role })
+                    ] }),
+                    isActive && /* @__PURE__ */ jsx5("span", { className: "w-1.5 h-1.5 rounded-full bg-purple-400 shrink-0" }),
+                    switching === org.id && /* @__PURE__ */ jsx5(MiniSpinner, {})
+                  ]
+                },
+                org.id
+              );
+            })
+          ] }),
+          /* @__PURE__ */ jsx5("div", { className: "p-2 border-t border-white/8", children: /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              onClick: () => {
+                setOpen(false);
+              },
+              className: "w-full flex items-center gap-2 px-3 py-2 rounded-xl text-sm text-[#475569] hover:text-white hover:bg-white/8 transition-colors",
+              children: [
+                /* @__PURE__ */ jsx5(PlusIcon, {}),
+                "Create organization"
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function OrgAvatar({
+  initials,
+  active = false
+}) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: clsx4(
+        "w-8 h-8 rounded-lg flex items-center justify-center text-xs font-bold text-white shrink-0",
+        active ? "bg-gradient-to-br from-purple-600 to-blue-600" : "bg-gradient-to-br from-[#1E2538] to-[#2D3548] border border-white/8"
+      ),
+      children: initials
+    }
+  );
+}
+function ChevronIcon() {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "text-[#475569] shrink-0",
+      children: /* @__PURE__ */ jsx5("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function PlusIcon() {
+  return /* @__PURE__ */ jsxs4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx5("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ jsx5("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  ] });
+}
+function MiniSpinner() {
+  return /* @__PURE__ */ jsxs4("svg", { className: "animate-spin h-3 w-3 text-[#475569]", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ jsx5("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx5("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+  ] });
+}
+export {
+  OrganizationSwitcher,
+  SignIn,
+  SignUp,
+  UserButton,
+  VaultixProvider,
+  useOrganization,
+  useSession,
+  useUser,
+  useVaultix
+};