@kaappu/react 0.2.0

package/dist/index.mjs

@@ -0,0 +1,2183 @@
+import { createContext, useContext, useState, useRef, useEffect, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/context/KaappuProvider.tsx
+var KaappuContext = createContext(null);
+function useKaappu() {
+  const ctx = useContext(KaappuContext);
+  if (!ctx) {
+    throw new Error(
+      '[Kaappu] useKaappu() must be used inside <KaappuProvider>. Wrap your app: <KaappuProvider publishableKey="pk_live_..."><App /></KaappuProvider>'
+    );
+  }
+  return ctx;
+}
+var TOKEN_KEY = "kaappu_token";
+var REFRESH_KEY = "kaappu_refresh";
+var USER_KEY = "kaappu_user";
+var REFRESH_BEFORE_EXPIRY_MS = 6e4;
+function getStoredToken() {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem(TOKEN_KEY);
+}
+function parseJwtPayload(token) {
+  try {
+    return JSON.parse(atob(token.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")));
+  } catch {
+    return null;
+  }
+}
+function isTokenExpired(token) {
+  const payload = parseJwtPayload(token);
+  if (!payload || typeof payload.exp !== "number") return true;
+  return Date.now() >= payload.exp * 1e3;
+}
+function getTokenExpiryMs(token) {
+  const payload = parseJwtPayload(token);
+  if (!payload || typeof payload.exp !== "number") return 0;
+  return payload.exp * 1e3 - Date.now();
+}
+function KaappuProvider({
+  publishableKey,
+  baseUrl = "http://localhost:9091",
+  signInUrl = "/sign-in",
+  signUpUrl = "/sign-up",
+  children
+}) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isSignedIn, setIsSignedIn] = useState(false);
+  const [user, setUser] = useState(null);
+  const [accessToken, setAccessToken] = useState(null);
+  const [tenantConfig, setTenantConfig] = useState(null);
+  const refreshTimerRef = useRef(null);
+  const [configLoaded, setConfigLoaded] = useState(false);
+  const [sessionReady, setSessionReady] = useState(false);
+  useEffect(() => {
+    if (configLoaded && sessionReady) setIsLoaded(true);
+  }, [configLoaded, sessionReady]);
+  useEffect(() => {
+    let cancelled = false;
+    async function loadConfig(attempt = 0) {
+      try {
+        const r = await fetch(`${baseUrl}/api/v1/accounts/config?pk=${publishableKey}`);
+        if (r.ok) {
+          const data = await r.json();
+          if (!cancelled && data?.data) setTenantConfig(data.data);
+          if (!cancelled) setConfigLoaded(true);
+          return;
+        }
+      } catch {
+      }
+      if (!cancelled && attempt < 3) {
+        setTimeout(() => loadConfig(attempt + 1), 1e3 * Math.pow(2, attempt));
+      } else if (!cancelled) {
+        setConfigLoaded(true);
+      }
+    }
+    loadConfig();
+    return () => {
+      cancelled = true;
+    };
+  }, [publishableKey, baseUrl]);
+  useEffect(() => {
+    const cookieToken = document.cookie.split("; ").find((c) => c.startsWith("kaappu_token="));
+    if (cookieToken) {
+      const token = decodeURIComponent(cookieToken.split("=")[1]);
+      if (token && !isTokenExpired(token)) {
+        localStorage.setItem(TOKEN_KEY, token);
+        document.cookie = "kaappu_token=; path=/; max-age=0";
+        const payload = parseJwtPayload(token);
+        if (payload) {
+          const userData = {
+            id: payload.sub,
+            email: payload.email,
+            accountId: payload.tid || "default",
+            sessionId: payload.sid || "",
+            permissions: Array.isArray(payload.permissions) ? payload.permissions : []
+          };
+          localStorage.setItem(USER_KEY, JSON.stringify(userData));
+          setAccessToken(token);
+          setUser(userData);
+          setIsSignedIn(true);
+          scheduleRefresh(token);
+          setSessionReady(true);
+          return;
+        }
+      }
+    }
+    const storedToken = getStoredToken();
+    const storedUser = localStorage.getItem(USER_KEY);
+    if (storedToken && !isTokenExpired(storedToken)) {
+      setAccessToken(storedToken);
+      if (storedUser) {
+        try {
+          setUser(JSON.parse(storedUser));
+        } catch {
+        }
+      }
+      setIsSignedIn(true);
+      scheduleRefresh(storedToken);
+    } else if (storedToken && isTokenExpired(storedToken)) {
+      silentRefresh().finally(() => setSessionReady(true));
+      return;
+    }
+    setSessionReady(true);
+  }, []);
+  function scheduleRefresh(token) {
+    if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+    const msUntilRefresh = Math.max(getTokenExpiryMs(token) - REFRESH_BEFORE_EXPIRY_MS, 0);
+    refreshTimerRef.current = setTimeout(() => silentRefresh(), msUntilRefresh);
+  }
+  async function silentRefresh() {
+    const refreshToken = localStorage.getItem(REFRESH_KEY);
+    if (!refreshToken) {
+      clearSession();
+      return null;
+    }
+    try {
+      const res = await fetch(`${baseUrl}/api/v1/idm/auth/refresh`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ refreshToken })
+      });
+      if (!res.ok) {
+        clearSession();
+        return null;
+      }
+      const data = await res.json();
+      const newToken = data.data?.accessToken;
+      if (newToken) {
+        localStorage.setItem(TOKEN_KEY, newToken);
+        document.cookie = `kaappu_token=${encodeURIComponent(newToken)}; path=/; max-age=${15 * 60}; samesite=lax`;
+        setAccessToken(newToken);
+        scheduleRefresh(newToken);
+        return newToken;
+      }
+      clearSession();
+      return null;
+    } catch {
+      clearSession();
+      return null;
+    }
+  }
+  function clearSession() {
+    localStorage.removeItem(TOKEN_KEY);
+    localStorage.removeItem(REFRESH_KEY);
+    localStorage.removeItem(USER_KEY);
+    document.cookie = "kaappu_token=; path=/; max-age=0";
+    setAccessToken(null);
+    setUser(null);
+    setIsSignedIn(false);
+    if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+  }
+  const signOut = useCallback(async () => {
+    const token = getStoredToken();
+    if (token) {
+      await fetch(`${baseUrl}/api/v1/idm/auth/sign-out`, {
+        method: "POST",
+        headers: { Authorization: `Bearer ${token}` }
+      }).catch(() => {
+      });
+    }
+    clearSession();
+  }, [baseUrl]);
+  const getToken = useCallback(async () => {
+    const stored = getStoredToken();
+    if (stored && !isTokenExpired(stored)) return stored;
+    return silentRefresh();
+  }, [baseUrl]);
+  const hasPermission = useCallback((permission) => {
+    if (!user?.permissions) return false;
+    return user.permissions.includes("*") || user.permissions.includes(permission);
+  }, [user]);
+  function onAuthSuccess(token, refreshToken, userData) {
+    localStorage.setItem(TOKEN_KEY, token);
+    localStorage.setItem(REFRESH_KEY, refreshToken);
+    localStorage.setItem(USER_KEY, JSON.stringify(userData));
+    document.cookie = `kaappu_token=${encodeURIComponent(token)}; path=/; max-age=${15 * 60}; samesite=lax`;
+    setAccessToken(token);
+    setUser(userData);
+    setIsSignedIn(true);
+    scheduleRefresh(token);
+  }
+  const contextValue = {
+    isLoaded,
+    isSignedIn,
+    user,
+    accessToken,
+    tenantConfig,
+    signOut,
+    getToken,
+    hasPermission,
+    // Internal — used by LoginPanel/RegisterPanel without exposing in public types
+    _onAuthSuccess: onAuthSuccess,
+    _baseUrl: baseUrl
+  };
+  return /* @__PURE__ */ jsx(KaappuContext.Provider, { value: contextValue, children });
+}
+
+// src/theme/index.ts
+var DARK_VARS = {
+  "--k-primary": "#6366f1",
+  "--k-primary-fg": "#ffffff",
+  "--k-bg": "#0a0a0f",
+  "--k-card-bg": "#111118",
+  "--k-text": "#f0f6fc",
+  "--k-muted": "#8b949e",
+  "--k-border": "rgba(240,246,252,0.12)",
+  "--k-hover": "rgba(240,246,252,0.06)",
+  "--k-radius": "0.75rem",
+  "--k-font": '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  "--k-shadow": "0 8px 32px rgba(0,0,0,0.4)"
+};
+var LIGHT_VARS = {
+  "--k-primary": "#6366f1",
+  "--k-primary-fg": "#ffffff",
+  "--k-bg": "#f5f5fa",
+  "--k-card-bg": "#ffffff",
+  "--k-text": "#111118",
+  "--k-muted": "#6b7280",
+  "--k-border": "rgba(0,0,0,0.10)",
+  "--k-hover": "rgba(0,0,0,0.04)",
+  "--k-radius": "0.75rem",
+  "--k-font": '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  "--k-shadow": "0 8px 32px rgba(0,0,0,0.12)"
+};
+function resolveColorScheme(scheme = "dark") {
+  if (scheme !== "auto") return scheme;
+  if (typeof window === "undefined") return "dark";
+  return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+function buildThemeVars(appearance, brandingColor) {
+  const scheme = resolveColorScheme(appearance?.colorScheme ?? "dark");
+  const base = scheme === "light" ? { ...LIGHT_VARS } : { ...DARK_VARS };
+  if (brandingColor) base["--k-primary"] = brandingColor;
+  const v = appearance?.variables ?? {};
+  if (v.primaryColor) base["--k-primary"] = v.primaryColor;
+  if (v.primaryForeground) base["--k-primary-fg"] = v.primaryForeground;
+  if (v.backgroundColor) base["--k-bg"] = v.backgroundColor;
+  if (v.cardBackground) base["--k-card-bg"] = v.cardBackground;
+  if (v.textColor) base["--k-text"] = v.textColor;
+  if (v.mutedColor) base["--k-muted"] = v.mutedColor;
+  if (v.borderColor) base["--k-border"] = v.borderColor;
+  if (v.borderRadius) base["--k-radius"] = v.borderRadius;
+  if (v.fontFamily) base["--k-font"] = v.fontFamily;
+  return base;
+}
+function createTheme(appearance) {
+  return appearance;
+}
+var inputStyle = {
+  width: "100%",
+  padding: "0.625rem 0.875rem",
+  background: "var(--k-hover)",
+  border: "1px solid var(--k-border)",
+  borderRadius: "calc(var(--k-radius) * 0.6)",
+  color: "var(--k-text)",
+  fontSize: "0.875rem",
+  outline: "none",
+  boxSizing: "border-box",
+  fontFamily: "var(--k-font)"
+};
+var primaryButtonStyle = {
+  width: "100%",
+  padding: "0.625rem 1rem",
+  background: "var(--k-primary)",
+  color: "var(--k-primary-fg)",
+  border: "none",
+  borderRadius: "calc(var(--k-radius) * 0.6)",
+  fontSize: "0.875rem",
+  fontWeight: 600,
+  cursor: "pointer",
+  fontFamily: "var(--k-font)"
+};
+var ghostButtonStyle = {
+  width: "100%",
+  padding: "0.625rem 1rem",
+  background: "var(--k-hover)",
+  color: "var(--k-text)",
+  border: "1px solid var(--k-border)",
+  borderRadius: "calc(var(--k-radius) * 0.6)",
+  fontSize: "0.875rem",
+  fontWeight: 500,
+  cursor: "pointer",
+  fontFamily: "var(--k-font)"
+};
+var labelStyle = {
+  display: "block",
+  fontSize: "0.8125rem",
+  fontWeight: 500,
+  color: "var(--k-muted)",
+  marginBottom: "0.375rem"
+};
+var errorStyle = {
+  fontSize: "0.8125rem",
+  color: "#ef4444",
+  marginTop: "0.25rem"
+};
+function LoginPanel({
+  onSuccess,
+  redirectUrl,
+  logoUrl,
+  appearance,
+  className,
+  oauthProxyUrl,
+  allowedProviders,
+  // New props for standalone usage (without KaappuProvider)
+  authUrl: authUrlProp,
+  accountId: accountIdProp,
+  signUpPath = "/sign-up",
+  signUpLabel = "Enroll Identity",
+  signUpPrompt = "New operator?"
+}) {
+  const ctx = useContext(KaappuContext);
+  const config = ctx?.tenantConfig;
+  const rawBase = authUrlProp ?? ctx?._baseUrl ?? "/api/auth";
+  const baseUrl = rawBase.includes("/api/auth") || rawBase.includes("/idm/auth") ? rawBase : rawBase.endsWith("/igai") || rawBase.includes(":9091") ? `${rawBase}/api/v1/idm/auth` : rawBase;
+  const accountId = accountIdProp ?? config?.accountId ?? "default";
+  const [tab, setTab] = useState("password");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [info, setInfo] = useState(null);
+  async function handlePasswordSignIn(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await fetch(`${baseUrl}/sign-in`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password, accountId })
+      });
+      const data = await res.json();
+      if (!data.success && !data.data) {
+        setError(data.error ?? "Sign in failed");
+        return;
+      }
+      const { accessToken, refreshToken, user } = data.data ?? data;
+      const mapped = mapUser(user, accountId);
+      ctx?._onAuthSuccess?.(accessToken, refreshToken, mapped);
+      onSuccess?.(accessToken, mapped);
+      if (redirectUrl) window.location.href = redirectUrl;
+    } catch {
+      setError("Unable to connect. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function handleMagicLink(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await fetch(`${baseUrl}/magic-link`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, accountId })
+      });
+      if (res.ok) {
+        setInfo(`Magic link sent to ${email}. Check your inbox.`);
+      } else {
+        const d = await res.json().catch(() => ({}));
+        setError(d.error ?? "Could not send magic link");
+      }
+    } catch {
+      setError("Unable to connect.");
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function handleOtpRequest(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await fetch(`${baseUrl}/email-otp`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, accountId })
+      });
+      if (res.ok) {
+        setInfo(`A 6-digit code was sent to ${email}`);
+      } else {
+        const d = await res.json().catch(() => ({}));
+        setError(d.error ?? "Could not send code");
+      }
+    } catch {
+      setError("Unable to connect.");
+    } finally {
+      setLoading(false);
+    }
+  }
+  function handleOAuth(provider) {
+    if (oauthProxyUrl) {
+      window.location.href = `${oauthProxyUrl}/${provider}`;
+    } else {
+      const redirect = redirectUrl ?? window.location.href;
+      window.location.href = `${baseUrl}/oauth/${provider}?redirect=${encodeURIComponent(redirect)}`;
+    }
+  }
+  const resolvedLogo = logoUrl ?? config?.branding?.logoUrl ?? "/kaappu-logo.png";
+  const cssVars = buildThemeVars(appearance, config?.branding?.primaryColor);
+  const isDark = resolveColorScheme(appearance?.colorScheme) === "dark";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        ...cssVars,
+        background: isDark ? "#030712" : "var(--k-bg, #f5f5fa)",
+        minHeight: isDark ? "100vh" : void 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+        overflow: "hidden",
+        padding: isDark ? void 0 : "1rem 0"
+      },
+      className,
+      children: [
+        isDark && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: "radial-gradient(circle at 20% 30%, rgba(99,102,241,0.12) 0%, transparent 60%), radial-gradient(circle at 80% 70%, rgba(139,92,246,0.08) 0%, transparent 60%)", zIndex: 0 } }),
+        isDark && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, backgroundImage: "linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)", backgroundSize: "40px 40px", zIndex: 1 } }),
+        /* @__PURE__ */ jsxs("div", { style: CARD, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 32 }, children: [
+            /* @__PURE__ */ jsx("img", { src: resolvedLogo, alt: "Logo", style: { height: isDark ? 120 : 52, marginBottom: 4, filter: isDark ? "drop-shadow(0 0 20px rgba(99,102,241,0.3))" : "none" } }),
+            /* @__PURE__ */ jsx("p", { style: { color: "var(--k-muted, #8b949e)", fontSize: 13, marginTop: 12, textAlign: "center" }, children: "Welcome back! Please sign in to continue." })
+          ] }),
+          (() => {
+            const allProviders = [
+              { id: "google", label: "Google", icon: /* @__PURE__ */ jsx(GoogleIcon, {}) },
+              { id: "github", label: "GitHub", icon: /* @__PURE__ */ jsx(GithubIcon, {}) },
+              { id: "microsoft", label: "Microsoft", icon: /* @__PURE__ */ jsx(MicrosoftIcon, {}) },
+              { id: "apple", label: "Apple", icon: /* @__PURE__ */ jsx(AppleIcon, {}) }
+            ];
+            const visible = allProviders.filter((p) => {
+              if (allowedProviders && allowedProviders.length > 0) return allowedProviders.includes(p.id);
+              return config?.authMethods?.[p.id] !== false;
+            });
+            if (visible.length === 0) return null;
+            if (visible.length === 1) {
+              const p = visible[0];
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => handleOAuth(p.id),
+                  style: {
+                    ...OAUTH_BTN,
+                    display: "flex",
+                    gap: 10,
+                    padding: "12px 16px",
+                    width: "100%",
+                    marginBottom: 12,
+                    fontSize: 14,
+                    fontWeight: 500
+                  },
+                  onMouseEnter: (e) => e.currentTarget.style.background = "var(--k-hover, rgba(255,255,255,0.08))",
+                  onMouseLeave: (e) => e.currentTarget.style.background = "var(--k-hover, rgba(255,255,255,0.04))",
+                  children: [
+                    p.icon,
+                    " ",
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      "Continue with ",
+                      p.label
+                    ] })
+                  ]
+                }
+              );
+            }
+            const cols = Math.min(visible.length, 4);
+            return /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 10, marginBottom: 12 }, children: visible.map((p) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleOAuth(p.id),
+                style: OAUTH_BTN,
+                onMouseEnter: (e) => e.currentTarget.style.background = "var(--k-hover, rgba(255,255,255,0.08))",
+                onMouseLeave: (e) => e.currentTarget.style.background = "var(--k-hover, rgba(255,255,255,0.04))",
+                children: p.icon
+              },
+              p.id
+            )) });
+          })(),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              style: PASSKEY_BTN,
+              onMouseEnter: (e) => e.currentTarget.style.background = "rgba(99,102,241,0.15)",
+              onMouseLeave: (e) => e.currentTarget.style.background = "rgba(99,102,241,0.08)",
+              children: [
+                /* @__PURE__ */ jsx(FingerprintIcon, {}),
+                " Sign in with Passkey"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, marginBottom: 24, color: "var(--k-muted, #484f58)", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em" }, children: [
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, height: 1, background: "var(--k-border, rgba(255,255,255,0.06))" } }),
+            "or use email",
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, height: 1, background: "var(--k-border, rgba(255,255,255,0.06))" } })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", background: "var(--k-hover, rgba(255,255,255,0.04))", borderRadius: 10, padding: 3, marginBottom: 24 }, children: [
+            { key: "password", label: "\u{1F511} Password" },
+            { key: "magic", label: "\u2728 Magic Link" },
+            { key: "otp", label: "\u{1F4E7} Email OTP" },
+            { key: "phone", label: "\u{1F4F1} Phone" }
+          ].map(({ key, label }) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                setTab(key);
+                setError(null);
+                setInfo(null);
+              },
+              style: {
+                flex: 1,
+                padding: "7px 2px",
+                borderRadius: 8,
+                fontSize: 10,
+                fontWeight: 700,
+                cursor: "pointer",
+                background: tab === key ? "rgba(99,102,241,0.2)" : "transparent",
+                color: tab === key ? "#818cf8" : "#8b949e",
+                border: "none",
+                transition: "all 0.15s ease"
+              },
+              children: label
+            },
+            key
+          )) }),
+          error && /* @__PURE__ */ jsx("div", { style: ERROR_BANNER, children: error }),
+          info && /* @__PURE__ */ jsx("p", { style: { fontSize: 13, color: "#34d399", marginBottom: 12, textAlign: "center" }, children: info }),
+          /* @__PURE__ */ jsxs("form", { onSubmit: tab === "magic" ? handleMagicLink : tab === "otp" ? handleOtpRequest : handlePasswordSignIn, children: [
+            /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
+              /* @__PURE__ */ jsx("label", { style: LABEL, children: "Work Email" }),
+              /* @__PURE__ */ jsxs("div", { style: INPUT_ROW, children: [
+                /* @__PURE__ */ jsx("div", { style: ICON_BOX, children: /* @__PURE__ */ jsx(MailIcon, {}) }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "email",
+                    value: email,
+                    onChange: (e) => setEmail(e.target.value),
+                    placeholder: "name@company.com",
+                    required: true,
+                    style: INPUT
+                  }
+                )
+              ] })
+            ] }),
+            tab === "password" && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6, marginLeft: 4 }, children: [
+                /* @__PURE__ */ jsx("label", { style: { ...LABEL, marginBottom: 0 }, children: "Access Key" }),
+                /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--k-primary, #818cf8)", fontWeight: 700, cursor: "pointer" }, children: "Recover" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: INPUT_ROW, children: [
+                /* @__PURE__ */ jsx("div", { style: ICON_BOX, children: /* @__PURE__ */ jsx(LockIcon, {}) }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: showPassword ? "text" : "password",
+                    value: password,
+                    onChange: (e) => setPassword(e.target.value),
+                    placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+                    required: true,
+                    style: { ...INPUT, paddingRight: 0 }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setShowPassword(!showPassword),
+                    style: { width: 48, height: "100%", display: "flex", alignItems: "center", justifyContent: "center", background: "none", border: "none", cursor: "pointer", color: "var(--k-muted, #484f58)" },
+                    children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+                  }
+                )
+              ] })
+            ] }),
+            tab === "magic" && /* @__PURE__ */ jsx("p", { style: HINT, children: "We'll send a one-click sign-in link to your email." }),
+            tab === "otp" && /* @__PURE__ */ jsx("p", { style: HINT, children: "We'll send a 6-digit code to your email. No password needed." }),
+            tab === "phone" && /* @__PURE__ */ jsx("p", { style: HINT, children: "We'll send a 6-digit code via SMS. No password needed." }),
+            /* @__PURE__ */ jsxs("button", { type: "submit", disabled: loading, style: {
+              ...PRIMARY_BTN,
+              opacity: loading ? 0.6 : 1,
+              cursor: loading ? "not-allowed" : "pointer"
+            }, children: [
+              loading ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : null,
+              tab === "password" && "Authenticate",
+              tab === "magic" && "Send Magic Link",
+              tab === "otp" && "Send Code",
+              tab === "phone" && "Send Code",
+              !loading && /* @__PURE__ */ jsx(ArrowIcon, {})
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { style: { textAlign: "center", fontSize: 14, color: "var(--k-muted, #8b949e)", marginTop: 28 }, children: [
+            signUpPrompt,
+            " ",
+            /* @__PURE__ */ jsx("a", { href: signUpPath, style: { color: "var(--k-primary, #818cf8)", textDecoration: "none", fontWeight: 700 }, children: signUpLabel })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { marginTop: 32, borderTop: "1px solid var(--k-border, rgba(255,255,255,0.06))", paddingTop: 20, textAlign: "center" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "inline-flex", alignItems: "center", gap: 8, opacity: 0.4 }, children: [
+            /* @__PURE__ */ jsx(ShieldIcon, {}),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 10, fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.3em", color: "var(--k-muted, #8b949e)" }, children: "Protected by Kaappu" })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}
+var CARD = {
+  width: "100%",
+  maxWidth: 420,
+  background: "var(--k-card-bg, rgba(13, 17, 23, 0.9))",
+  border: "1px solid var(--k-border, rgba(255,255,255,0.1))",
+  borderRadius: 24,
+  padding: 40,
+  position: "relative",
+  zIndex: 10,
+  backdropFilter: "blur(20px)",
+  boxShadow: "var(--k-shadow, 0 25px 80px rgba(0,0,0,0.5))"
+};
+var INPUT_ROW = {
+  display: "flex",
+  alignItems: "center",
+  background: "var(--k-hover, rgba(255,255,255,0.03))",
+  border: "1px solid var(--k-border, rgba(255,255,255,0.08))",
+  borderRadius: 12,
+  height: 52,
+  overflow: "hidden"
+};
+var INPUT = {
+  flex: 1,
+  background: "transparent",
+  border: "none",
+  outline: "none",
+  color: "var(--k-text, #f0f6fc)",
+  fontSize: 15,
+  paddingRight: 16
+};
+var ICON_BOX = {
+  width: 48,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "var(--k-muted, #484f58)"
+};
+var LABEL = {
+  display: "block",
+  fontSize: 11,
+  fontWeight: 800,
+  color: "var(--k-muted, #484f58)",
+  textTransform: "uppercase",
+  letterSpacing: "0.1em",
+  marginBottom: 6,
+  marginLeft: 4
+};
+var HINT = {
+  fontSize: 12,
+  color: "var(--k-muted, #8b949e)",
+  marginBottom: 12,
+  marginLeft: 4
+};
+var PRIMARY_BTN = {
+  width: "100%",
+  height: 56,
+  marginTop: 8,
+  background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
+  color: "white",
+  border: "none",
+  borderRadius: 14,
+  fontSize: 15,
+  fontWeight: 700,
+  boxShadow: "0 10px 25px rgba(99,102,241,0.3)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 10
+};
+var OAUTH_BTN = {
+  padding: 10,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "var(--k-hover, rgba(255,255,255,0.04))",
+  border: "1px solid var(--k-border, rgba(255,255,255,0.08))",
+  borderRadius: 12,
+  cursor: "pointer",
+  color: "var(--k-text, #f0f6fc)"
+};
+var PASSKEY_BTN = {
+  width: "100%",
+  marginBottom: 12,
+  padding: "10px 16px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 8,
+  background: "rgba(99,102,241,0.08)",
+  border: "1px solid rgba(99,102,241,0.2)",
+  borderRadius: 12,
+  cursor: "pointer",
+  color: "var(--k-primary, #818cf8)",
+  fontSize: 13,
+  fontWeight: 600
+};
+var ERROR_BANNER = {
+  background: "rgba(248,81,73,0.1)",
+  border: "1px solid rgba(248,81,73,0.2)",
+  borderRadius: 10,
+  padding: "10px 14px",
+  fontSize: 13,
+  color: "#f85149",
+  textAlign: "center",
+  fontWeight: 600,
+  marginBottom: 16
+};
+var GoogleIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "20", height: "20", children: [
+  /* @__PURE__ */ jsx("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z", fill: "#FBBC05" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.66l3.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" })
+] });
+var GithubIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.477 2 2 6.477 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z" }) });
+var MicrosoftIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 23 23", width: "16", height: "16", children: /* @__PURE__ */ jsx("path", { fill: "#f3f3f3", d: "M0 0h11v11H0zM12 0h11v11H12zM0 12h11v11H0zM12 12h11v11H12z" }) });
+var AppleIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 384 512", width: "20", height: "20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" }) });
+var FingerprintIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 19.5C5.5 18 6 15 6 12c0-3.5 2.5-6 6-6 3 0 5.5 2 5.8 5" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 12v4s.9 3 3.3 5" }),
+  /* @__PURE__ */ jsx("path", { d: "M8.5 18c.5-2 .5-4 .5-6 0-1.7 1.3-3 3-3s3 1.3 3 3c0 2-.5 4.5-1.5 6.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 21c.5-2 .5-4.5 0-7" })
+] });
+var MailIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
+] });
+var LockIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+] });
+var EyeIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+] });
+var EyeOffIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }),
+  /* @__PURE__ */ jsx("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
+  /* @__PURE__ */ jsx("path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }),
+  /* @__PURE__ */ jsx("path", { d: "m2 2 20 20" })
+] });
+var ArrowIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+  /* @__PURE__ */ jsx("path", { d: "m12 5 7 7-7 7" })
+] });
+var ShieldIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "#8b949e", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" }) });
+var SpinnerIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { animation: "kaappu-spin 1s linear infinite" }, children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+function mapUser(raw, accountId) {
+  return {
+    id: raw.id ?? raw.userId,
+    email: raw.email,
+    firstName: raw.firstName,
+    lastName: raw.lastName,
+    avatarUrl: raw.avatarUrl,
+    emailVerified: raw.emailVerified,
+    mfaEnabled: raw.mfaEnabled,
+    accountId: raw.accountId ?? accountId,
+    sessionId: raw.sessionId ?? "",
+    roles: raw.roles ?? [],
+    permissions: raw.permissions ?? []
+  };
+}
+function RegisterPanel({
+  onSuccess,
+  redirectUrl,
+  logoUrl,
+  appearance,
+  className,
+  // Standalone-mode props (no KaappuProvider required)
+  authUrl: authUrlProp,
+  accountId: accountIdProp,
+  signInPath = "/sign-in",
+  signInLabel = "Sign in",
+  signInPrompt = "Already have an account?",
+  // OAuth provider gating (mirrors LoginPanel)
+  allowedProviders,
+  oauthProxyUrl
+}) {
+  const ctx = useContext(KaappuContext);
+  const config = ctx?.tenantConfig;
+  const rawBase = authUrlProp ?? ctx?._baseUrl ?? "/api/auth";
+  const baseUrl = rawBase.includes("/api/auth") || rawBase.includes("/idm/auth") ? rawBase : rawBase.endsWith("/igai") || rawBase.includes(":9091") ? `${rawBase}/api/v1/idm/auth` : rawBase;
+  const accountId = accountIdProp ?? config?.accountId ?? "default";
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [step, setStep] = useState("form");
+  const rules = {
+    length: password.length >= 8,
+    letter: /[A-Za-z]/.test(password),
+    number: /\d/.test(password),
+    symbol: /[^A-Za-z0-9]/.test(password)
+  };
+  const passwordsMatch = confirm.length > 0 && password === confirm;
+  const passwordStrong = rules.length && rules.letter && rules.number;
+  const canSubmit = firstName && lastName && email && passwordStrong && passwordsMatch && !loading;
+  async function handleSignUp(e) {
+    e.preventDefault();
+    setError(null);
+    if (!passwordStrong) {
+      setError("Password must be at least 8 characters and include letters and numbers.");
+      return;
+    }
+    if (!passwordsMatch) {
+      setError("Passwords do not match.");
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await fetch(`${baseUrl}/sign-up`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password, firstName, lastName, accountId })
+      });
+      const data = await res.json();
+      if (!res.ok && !data.success) {
+        setError(friendlyError(data.error ?? data.code));
+        return;
+      }
+      const payload = data.data ?? data;
+      const { accessToken, refreshToken, user } = payload;
+      if (accessToken) {
+        const mapped = mapUser2(user, accountId);
+        ctx?._onAuthSuccess?.(accessToken, refreshToken, mapped);
+        onSuccess?.(accessToken, mapped);
+        if (redirectUrl) window.location.href = redirectUrl;
+      } else {
+        setStep("verify");
+      }
+    } catch {
+      setError("Unable to connect. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+  function handleOAuth(provider) {
+    if (oauthProxyUrl) {
+      window.location.href = `${oauthProxyUrl}/${provider}`;
+    } else {
+      const redirect = redirectUrl ?? window.location.href;
+      window.location.href = `${baseUrl}/oauth/${provider}?redirect=${encodeURIComponent(redirect)}`;
+    }
+  }
+  const resolvedLogo = logoUrl ?? config?.branding?.logoUrl ?? "/kaappu-logo.png";
+  const cssVars = buildThemeVars(appearance, config?.branding?.primaryColor);
+  const isDark = resolveColorScheme(appearance?.colorScheme) === "dark";
+  if (step === "verify") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          ...cssVars,
+          background: isDark ? "#030712" : "var(--k-bg, #f5f5fa)",
+          minHeight: isDark ? "100vh" : void 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: isDark ? void 0 : "1rem 0"
+        },
+        className,
+        children: /* @__PURE__ */ jsxs("div", { style: CARD2, children: [
+          /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 40, marginBottom: 12 }, children: "\u2709\uFE0F" }),
+            /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 8px", fontSize: 22, fontWeight: 700, color: "var(--k-text, #f0f6fc)" }, children: "Check your inbox" }),
+            /* @__PURE__ */ jsxs("p", { style: { margin: 0, fontSize: 14, color: "var(--k-muted, #8b949e)", lineHeight: 1.6 }, children: [
+              "We sent a verification link to",
+              " ",
+              /* @__PURE__ */ jsx("strong", { style: { color: "var(--k-text, #f0f6fc)" }, children: email }),
+              ". Click the link to activate your account."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ProtectedFooter, {})
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        ...cssVars,
+        background: isDark ? "#030712" : "var(--k-bg, #f5f5fa)",
+        minHeight: isDark ? "100vh" : void 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+        overflow: "hidden",
+        padding: isDark ? "40px 16px" : "1rem 0"
+      },
+      className,
+      children: [
+        isDark && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: "radial-gradient(circle at 20% 30%, rgba(99,102,241,0.12) 0%, transparent 60%), radial-gradient(circle at 80% 70%, rgba(139,92,246,0.08) 0%, transparent 60%)", zIndex: 0 } }),
+        isDark && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, backgroundImage: "linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)", backgroundSize: "40px 40px", zIndex: 1 } }),
+        /* @__PURE__ */ jsxs("div", { style: CARD2, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 24 }, children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: resolvedLogo,
+                alt: "Logo",
+                style: { height: isDark ? 96 : 52, marginBottom: 6, filter: isDark ? "drop-shadow(0 0 20px rgba(99,102,241,0.30))" : "none" }
+              }
+            ),
+            /* @__PURE__ */ jsx("h2", { style: { color: "var(--k-text, #f0f6fc)", fontSize: 22, fontWeight: 700, margin: "4px 0 6px 0" }, children: "Create your account" }),
+            /* @__PURE__ */ jsxs("p", { style: { color: "var(--k-muted, #8b949e)", fontSize: 13, margin: 0, textAlign: "center" }, children: [
+              "Join ",
+              config?.branding?.name ?? "Kaappu",
+              " to get started."
+            ] })
+          ] }),
+          (() => {
+            const allProviders = [
+              { id: "google", label: "Google", icon: /* @__PURE__ */ jsx(GoogleIcon2, {}) },
+              { id: "github", label: "GitHub", icon: /* @__PURE__ */ jsx(GithubIcon2, {}) },
+              { id: "microsoft", label: "Microsoft", icon: /* @__PURE__ */ jsx(MicrosoftIcon2, {}) },
+              { id: "apple", label: "Apple", icon: /* @__PURE__ */ jsx(AppleIcon2, {}) }
+            ];
+            const visible = allProviders.filter((p) => {
+              if (allowedProviders && allowedProviders.length > 0) return allowedProviders.includes(p.id);
+              return config?.authMethods?.[p.id] !== false;
+            });
+            if (visible.length === 0) return null;
+            if (visible.length === 1) {
+              const p = visible[0];
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleOAuth(p.id),
+                  style: {
+                    ...OAUTH_BTN2,
+                    gap: 10,
+                    padding: "12px 16px",
+                    width: "100%",
+                    marginBottom: 14,
+                    fontSize: 14,
+                    fontWeight: 500
+                  },
+                  onMouseEnter: (e) => e.currentTarget.style.background = "var(--k-hover, rgba(255,255,255,0.08))",
+                  onMouseLeave: (e) => e.currentTarget.style.background = "var(--k-hover, rgba(255,255,255,0.04))",
+                  children: [
+                    p.icon,
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      "Continue with ",
+                      p.label
+                    ] })
+                  ]
+                }
+              );
+            }
+            const cols = Math.min(visible.length, 4);
+            return /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 10, marginBottom: 14 }, children: visible.map((p) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleOAuth(p.id),
+                style: OAUTH_BTN2,
+                onMouseEnter: (e) => e.currentTarget.style.background = "var(--k-hover, rgba(255,255,255,0.08))",
+                onMouseLeave: (e) => e.currentTarget.style.background = "var(--k-hover, rgba(255,255,255,0.04))",
+                children: p.icon
+              },
+              p.id
+            )) });
+          })(),
+          /* @__PURE__ */ jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            marginTop: 4,
+            marginBottom: 18,
+            color: "var(--k-muted, #484f58)",
+            fontSize: 11,
+            fontWeight: 700,
+            textTransform: "uppercase",
+            letterSpacing: "0.1em"
+          }, children: [
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, height: 1, background: "var(--k-border, rgba(255,255,255,0.06))" } }),
+            "or with email",
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, height: 1, background: "var(--k-border, rgba(255,255,255,0.06))" } })
+          ] }),
+          error && /* @__PURE__ */ jsxs("div", { style: ERROR_BANNER2, children: [
+            /* @__PURE__ */ jsx(AlertIcon, {}),
+            /* @__PURE__ */ jsx("span", { children: error })
+          ] }),
+          /* @__PURE__ */ jsxs("form", { onSubmit: handleSignUp, children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 14 }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx("label", { style: LABEL2, children: "First name" }),
+                /* @__PURE__ */ jsxs("div", { style: INPUT_ROW2, children: [
+                  /* @__PURE__ */ jsx("div", { style: ICON_BOX2, children: /* @__PURE__ */ jsx(UserIcon, {}) }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: firstName,
+                      onChange: (e) => setFirstName(e.target.value),
+                      placeholder: "Jane",
+                      required: true,
+                      autoComplete: "given-name",
+                      style: { ...INPUT2, minWidth: 0, width: "100%" }
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx("label", { style: LABEL2, children: "Last name" }),
+                /* @__PURE__ */ jsxs("div", { style: INPUT_ROW2, children: [
+                  /* @__PURE__ */ jsx("div", { style: ICON_BOX2, children: /* @__PURE__ */ jsx(UserIcon, {}) }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: lastName,
+                      onChange: (e) => setLastName(e.target.value),
+                      placeholder: "Doe",
+                      required: true,
+                      autoComplete: "family-name",
+                      style: { ...INPUT2, minWidth: 0, width: "100%" }
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { marginBottom: 14 }, children: [
+              /* @__PURE__ */ jsx("label", { style: LABEL2, children: "Work email" }),
+              /* @__PURE__ */ jsxs("div", { style: INPUT_ROW2, children: [
+                /* @__PURE__ */ jsx("div", { style: ICON_BOX2, children: /* @__PURE__ */ jsx(MailIcon2, {}) }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "email",
+                    value: email,
+                    onChange: (e) => setEmail(e.target.value),
+                    placeholder: "you@company.com",
+                    required: true,
+                    autoComplete: "email",
+                    style: INPUT2
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
+              /* @__PURE__ */ jsx("label", { style: LABEL2, children: "Password" }),
+              /* @__PURE__ */ jsxs("div", { style: INPUT_ROW2, children: [
+                /* @__PURE__ */ jsx("div", { style: ICON_BOX2, children: /* @__PURE__ */ jsx(LockIcon2, {}) }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: showPassword ? "text" : "password",
+                    value: password,
+                    onChange: (e) => setPassword(e.target.value),
+                    placeholder: "At least 8 characters",
+                    required: true,
+                    minLength: 8,
+                    autoComplete: "new-password",
+                    style: { ...INPUT2, paddingRight: 0 }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setShowPassword(!showPassword),
+                    "aria-label": showPassword ? "Hide password" : "Show password",
+                    style: { width: 44, height: "100%", display: "flex", alignItems: "center", justifyContent: "center", background: "none", border: "none", cursor: "pointer", color: "var(--k-muted, #6b7280)" },
+                    children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon2, {}) : /* @__PURE__ */ jsx(EyeIcon2, {})
+                  }
+                )
+              ] }),
+              password.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px 14px", marginTop: 8, marginLeft: 4, fontSize: 11 }, children: [
+                /* @__PURE__ */ jsx(RuleChip, { ok: rules.length, label: "8+ characters" }),
+                /* @__PURE__ */ jsx(RuleChip, { ok: rules.letter, label: "letter" }),
+                /* @__PURE__ */ jsx(RuleChip, { ok: rules.number, label: "number" }),
+                /* @__PURE__ */ jsx(RuleChip, { ok: rules.symbol, label: "symbol (recommended)", optional: true })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
+              /* @__PURE__ */ jsx("label", { style: LABEL2, children: "Confirm password" }),
+              /* @__PURE__ */ jsxs("div", { style: {
+                ...INPUT_ROW2,
+                ...confirm.length > 0 && {
+                  borderColor: passwordsMatch ? "rgba(52,211,153,0.40)" : "rgba(248,81,73,0.40)"
+                }
+              }, children: [
+                /* @__PURE__ */ jsx("div", { style: ICON_BOX2, children: /* @__PURE__ */ jsx(LockIcon2, {}) }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: showPassword ? "text" : "password",
+                    value: confirm,
+                    onChange: (e) => setConfirm(e.target.value),
+                    placeholder: "Re-enter password",
+                    required: true,
+                    autoComplete: "new-password",
+                    style: INPUT2
+                  }
+                ),
+                confirm.length > 0 && /* @__PURE__ */ jsx("div", { style: { width: 44, display: "flex", alignItems: "center", justifyContent: "center" }, children: passwordsMatch ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(XIcon, {}) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("button", { type: "submit", disabled: !canSubmit, style: {
+              ...PRIMARY_BTN2,
+              background: canSubmit ? PRIMARY_BTN2.background : "rgba(99,102,241,0.30)",
+              boxShadow: canSubmit ? PRIMARY_BTN2.boxShadow : "none",
+              cursor: canSubmit ? "pointer" : "not-allowed"
+            }, children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(SpinnerIcon2, {}),
+              " Creating account\u2026"
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              "Create account ",
+              /* @__PURE__ */ jsx(ArrowIcon2, {})
+            ] }) }),
+            /* @__PURE__ */ jsx("p", { style: { margin: "14px 0 0", textAlign: "center", fontSize: 12, color: "var(--k-muted, #8b949e)" }, children: "By continuing, you agree to the Terms of Service and Privacy Policy." })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { style: { textAlign: "center", fontSize: 13, color: "var(--k-muted, #8b949e)", marginTop: 22 }, children: [
+            signInPrompt,
+            " ",
+            /* @__PURE__ */ jsx("a", { href: signInPath, style: { color: "var(--k-primary, #818cf8)", textDecoration: "none", fontWeight: 600 }, children: signInLabel })
+          ] }),
+          /* @__PURE__ */ jsx(ProtectedFooter, {})
+        ] }),
+        /* @__PURE__ */ jsx("style", { children: `@keyframes kaappu-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` })
+      ]
+    }
+  );
+}
+function RuleChip({ ok, label, optional }) {
+  const color = ok ? "#34d399" : optional ? "#6b7280" : "#9ca3af";
+  return /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 4, color, fontWeight: 500 }, children: [
+    ok ? /* @__PURE__ */ jsx(CheckIcon, { size: 12 }) : /* @__PURE__ */ jsx("span", { style: { width: 8, height: 8, borderRadius: "50%", border: `1.5px solid ${color}`, display: "inline-block" } }),
+    label
+  ] });
+}
+function ProtectedFooter() {
+  return /* @__PURE__ */ jsx("div", { style: { marginTop: 26, borderTop: "1px solid var(--k-border, rgba(255,255,255,0.06))", paddingTop: 18, textAlign: "center" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "inline-flex", alignItems: "center", gap: 8, opacity: 0.5 }, children: [
+    /* @__PURE__ */ jsx(ShieldIcon2, {}),
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 9, fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.28em", color: "var(--k-muted, #8b949e)" }, children: "Protected by Kaappu" })
+  ] }) });
+}
+function friendlyError(code) {
+  const map = {
+    email_already_exists: "An account with this email already exists. Try signing in instead.",
+    email_exists: "An account with this email already exists. Try signing in instead.",
+    password_breached: "This password has appeared in a known data breach. Please choose a different one.",
+    weak_password: "Password is too weak. Use at least 8 characters with letters and numbers.",
+    password_too_weak: "Password is too weak. Use at least 8 characters with letters and numbers.",
+    password_too_short: "Password must be at least 8 characters.",
+    invalid_email: "Please enter a valid email address.",
+    invalid_password: "Password does not meet the requirements.",
+    email_domain_not_allowed: "Sign-ups from this email domain are not allowed.",
+    email_blocked: "This email address cannot be used.",
+    bot_protection_failed: "Bot protection check failed. Please try again.",
+    rate_limited: "Too many attempts. Please wait a minute and try again."
+  };
+  return map[code] ?? code ?? "Registration failed. Please try again.";
+}
+function mapUser2(raw, accountId) {
+  return {
+    id: raw.id ?? raw.userId,
+    email: raw.email,
+    firstName: raw.firstName,
+    lastName: raw.lastName,
+    avatarUrl: raw.avatarUrl,
+    emailVerified: raw.emailVerified,
+    mfaEnabled: raw.mfaEnabled,
+    accountId: raw.accountId ?? accountId,
+    sessionId: raw.sessionId ?? "",
+    roles: raw.roles ?? [],
+    permissions: raw.permissions ?? []
+  };
+}
+var CARD2 = {
+  width: "100%",
+  maxWidth: 460,
+  background: "var(--k-card-bg, rgba(13, 17, 23, 0.92))",
+  border: "1px solid var(--k-border, rgba(255,255,255,0.10))",
+  borderRadius: 24,
+  padding: "40px 38px",
+  position: "relative",
+  zIndex: 10,
+  backdropFilter: "blur(20px)",
+  boxShadow: "var(--k-shadow, 0 25px 80px rgba(0,0,0,0.5))"
+};
+var INPUT_ROW2 = {
+  display: "flex",
+  alignItems: "center",
+  background: "var(--k-hover, rgba(255,255,255,0.03))",
+  border: "1px solid var(--k-border, rgba(255,255,255,0.10))",
+  borderRadius: 12,
+  height: 48,
+  overflow: "hidden",
+  transition: "border-color 0.15s ease"
+};
+var INPUT2 = {
+  flex: 1,
+  background: "transparent",
+  border: "none",
+  outline: "none",
+  color: "var(--k-text, #f0f6fc)",
+  fontSize: 14,
+  paddingRight: 14,
+  WebkitTextFillColor: "var(--k-text, #f0f6fc)",
+  minWidth: 0
+};
+var ICON_BOX2 = {
+  width: 44,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "var(--k-muted, #6b7280)"
+};
+var LABEL2 = {
+  display: "block",
+  fontSize: 11,
+  fontWeight: 700,
+  color: "var(--k-muted, #9ca3af)",
+  textTransform: "uppercase",
+  letterSpacing: "0.08em",
+  marginBottom: 6,
+  marginLeft: 2
+};
+var PRIMARY_BTN2 = {
+  width: "100%",
+  height: 50,
+  marginTop: 4,
+  background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
+  color: "white",
+  border: "none",
+  borderRadius: 12,
+  fontSize: 14,
+  fontWeight: 700,
+  boxShadow: "0 10px 25px rgba(99,102,241,0.30)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 10,
+  transition: "all 0.15s ease"
+};
+var OAUTH_BTN2 = {
+  padding: 10,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "var(--k-hover, rgba(255,255,255,0.04))",
+  border: "1px solid var(--k-border, rgba(255,255,255,0.08))",
+  borderRadius: 12,
+  cursor: "pointer",
+  color: "var(--k-text, #f0f6fc)",
+  height: 46
+};
+var ERROR_BANNER2 = {
+  background: "rgba(248,81,73,0.10)",
+  border: "1px solid rgba(248,81,73,0.25)",
+  borderRadius: 10,
+  padding: "10px 14px",
+  fontSize: 13,
+  color: "#f87171",
+  display: "flex",
+  alignItems: "flex-start",
+  gap: 8,
+  marginBottom: 14
+};
+var GoogleIcon2 = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "20", height: "20", children: [
+  /* @__PURE__ */ jsx("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z", fill: "#FBBC05" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.66l3.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" })
+] });
+var GithubIcon2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.477 2 2 6.477 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z" }) });
+var MicrosoftIcon2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 23 23", width: "18", height: "18", children: /* @__PURE__ */ jsx("path", { fill: "#f3f3f3", d: "M0 0h11v11H0zM12 0h11v11H12zM0 12h11v11H0zM12 12h11v11H12z" }) });
+var AppleIcon2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 384 512", width: "20", height: "20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" }) });
+var UserIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
+] });
+var MailIcon2 = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
+] });
+var LockIcon2 = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+] });
+var EyeIcon2 = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+] });
+var EyeOffIcon2 = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }),
+  /* @__PURE__ */ jsx("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
+  /* @__PURE__ */ jsx("path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }),
+  /* @__PURE__ */ jsx("path", { d: "m2 2 20 20" })
+] });
+var ArrowIcon2 = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+  /* @__PURE__ */ jsx("path", { d: "m12 5 7 7-7 7" })
+] });
+var ShieldIcon2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "12", height: "12", fill: "none", stroke: "#8b949e", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" }) });
+var SpinnerIcon2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { animation: "kaappu-spin 1s linear infinite" }, children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+var AlertIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0, marginTop: 1 }, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+] });
+var CheckIcon = ({ size = 16 }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", stroke: "#34d399", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
+var XIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "#f87171", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+function ProfileBadge({
+  afterSignOutUrl = "/sign-in",
+  userProfileUrl = "/account",
+  appearance,
+  className
+}) {
+  const ctx = useContext(KaappuContext);
+  if (!ctx) throw new Error("[Kaappu] <ProfileBadge> must be inside <KaappuProvider>");
+  const { user, isLoaded, isSignedIn, signOut, tenantConfig } = ctx;
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    function handleClick(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    if (open) document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  if (!isLoaded || !isSignedIn || !user) return null;
+  const themeVars = buildThemeVars(appearance, tenantConfig?.branding?.primaryColor);
+  const initials = [user.firstName, user.lastName].filter(Boolean).map((n) => n[0].toUpperCase()).join("") || user.email[0].toUpperCase();
+  const displayName = [user.firstName, user.lastName].filter(Boolean).join(" ") || user.email;
+  async function handleSignOut() {
+    setOpen(false);
+    await signOut();
+    window.location.href = afterSignOutUrl;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      style: { position: "relative", display: "inline-block", ...themeVars, fontFamily: "var(--k-font)" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setOpen((o) => !o),
+            className,
+            "aria-haspopup": "true",
+            "aria-expanded": open,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              padding: "0.25rem 0.5rem 0.25rem 0.25rem",
+              background: open ? "var(--k-hover)" : "transparent",
+              border: "1px solid transparent",
+              borderRadius: "2rem",
+              cursor: "pointer",
+              color: "var(--k-text)",
+              fontFamily: "var(--k-font)",
+              transition: "background 0.15s ease, border-color 0.15s ease"
+            },
+            onMouseEnter: (e) => {
+              const el = e.currentTarget;
+              el.style.background = "var(--k-hover)";
+              el.style.borderColor = "var(--k-border)";
+            },
+            onMouseLeave: (e) => {
+              if (!open) {
+                const el = e.currentTarget;
+                el.style.background = "transparent";
+                el.style.borderColor = "transparent";
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: "32px",
+                    height: "32px",
+                    borderRadius: "50%",
+                    background: user.avatarUrl ? "transparent" : "var(--k-primary)",
+                    color: "var(--k-primary-fg)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: "0.8125rem",
+                    fontWeight: 700,
+                    flexShrink: 0,
+                    overflow: "hidden"
+                  },
+                  children: user.avatarUrl ? /* @__PURE__ */ jsx("img", { src: user.avatarUrl, alt: displayName, style: { width: "100%", height: "100%", objectFit: "cover" } }) : initials
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "0.875rem", fontWeight: 500, maxWidth: "120px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: displayName }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "12",
+                  height: "12",
+                  viewBox: "0 0 12 12",
+                  fill: "none",
+                  style: { color: "var(--k-muted)", transform: open ? "rotate(180deg)" : "none", transition: "transform 0.15s ease", flexShrink: 0 },
+                  children: /* @__PURE__ */ jsx("path", { d: "M2 4L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "menu",
+            style: {
+              position: "absolute",
+              top: "calc(100% + 0.5rem)",
+              right: 0,
+              minWidth: "220px",
+              background: "var(--k-card-bg)",
+              border: "1px solid var(--k-border)",
+              borderRadius: "var(--k-radius)",
+              boxShadow: "var(--k-shadow)",
+              padding: "0.5rem",
+              zIndex: 9999
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: {
+                padding: "0.5rem 0.75rem 0.75rem",
+                borderBottom: "1px solid var(--k-border)",
+                marginBottom: "0.375rem"
+              }, children: [
+                /* @__PURE__ */ jsx("div", { style: { fontSize: "0.875rem", fontWeight: 600, color: "var(--k-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: displayName }),
+                /* @__PURE__ */ jsx("div", { style: { fontSize: "0.75rem", color: "var(--k-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: "0.125rem" }, children: user.email })
+              ] }),
+              /* @__PURE__ */ jsx(
+                DropdownItem,
+                {
+                  href: userProfileUrl,
+                  icon: "\u2699\uFE0F",
+                  label: "Manage account",
+                  onClick: () => setOpen(false)
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { style: { height: "1px", background: "var(--k-border)", margin: "0.375rem 0" } }),
+              /* @__PURE__ */ jsx(
+                DropdownItem,
+                {
+                  icon: "\u2192",
+                  label: "Sign out",
+                  onClick: handleSignOut,
+                  danger: true
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function DropdownItem({
+  href,
+  icon,
+  label,
+  onClick,
+  danger = false
+}) {
+  const baseStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.625rem",
+    width: "100%",
+    padding: "0.5rem 0.75rem",
+    borderRadius: "calc(var(--k-radius) * 0.5)",
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    color: danger ? "#ef4444" : "var(--k-text)",
+    background: "transparent",
+    border: "none",
+    cursor: "pointer",
+    textDecoration: "none",
+    fontFamily: "var(--k-font)",
+    textAlign: "left",
+    boxSizing: "border-box"
+  };
+  const hoverStyle = { background: "var(--k-hover)" };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { style: { fontSize: "0.875rem" }, children: icon }),
+    label
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        style: baseStyle,
+        role: "menuitem",
+        onClick,
+        onMouseEnter: (e) => Object.assign(e.currentTarget.style, hoverStyle),
+        onMouseLeave: (e) => {
+          e.currentTarget.style.background = "transparent";
+        },
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      style: baseStyle,
+      role: "menuitem",
+      onClick,
+      onMouseEnter: (e) => Object.assign(e.currentTarget.style, hoverStyle),
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "transparent";
+      },
+      children: content
+    }
+  );
+}
+function AccountView({ appearance, className }) {
+  const ctx = useContext(KaappuContext);
+  if (!ctx) throw new Error("[Kaappu] <AccountView> must be inside <KaappuProvider>");
+  const { user, isLoaded, isSignedIn, tenantConfig, getToken } = ctx;
+  const baseUrl = ctx._baseUrl ?? "http://localhost:9091";
+  const [tab, setTab] = useState("profile");
+  if (!isLoaded) return /* @__PURE__ */ jsx(Skeleton, {});
+  if (!isSignedIn || !user) return null;
+  const themeVars = buildThemeVars(appearance, tenantConfig?.branding?.primaryColor);
+  const accountId = user.accountId ?? "default";
+  return /* @__PURE__ */ jsxs("div", { style: { ...themeVars, fontFamily: "var(--k-font)", color: "var(--k-text)", width: "100%" }, className, children: [
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "0", borderBottom: "1px solid var(--k-border)", marginBottom: "1.5rem", overflowX: "auto" }, children: ["profile", "security", "sessions", "passkeys"].map((t) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setTab(t),
+        style: {
+          padding: "0.625rem 1rem",
+          background: "none",
+          border: "none",
+          borderBottom: tab === t ? "2px solid var(--k-primary)" : "2px solid transparent",
+          color: tab === t ? "var(--k-text)" : "var(--k-muted)",
+          fontWeight: tab === t ? 600 : 400,
+          cursor: "pointer",
+          fontSize: "0.875rem",
+          fontFamily: "var(--k-font)",
+          whiteSpace: "nowrap",
+          textTransform: "capitalize"
+        },
+        children: t
+      },
+      t
+    )) }),
+    tab === "profile" && /* @__PURE__ */ jsx(ProfileTab, { user, baseUrl, accountId, getToken }),
+    tab === "security" && /* @__PURE__ */ jsx(SecurityTab, { user, baseUrl, accountId, getToken }),
+    tab === "sessions" && /* @__PURE__ */ jsx(SessionsTab, { baseUrl, accountId, getToken, currentSessionId: user.sessionId }),
+    tab === "passkeys" && /* @__PURE__ */ jsx(PasskeysTab, { baseUrl, accountId, getToken })
+  ] });
+}
+function ProfileTab({ user, baseUrl, accountId, getToken }) {
+  const [firstName, setFirstName] = useState(user.firstName ?? "");
+  const [lastName, setLastName] = useState(user.lastName ?? "");
+  const [phoneNumber, setPhoneNumber] = useState(user.phoneNumber ?? "");
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState(null);
+  async function handleSave(e) {
+    e.preventDefault();
+    setError(null);
+    setSaving(true);
+    try {
+      const token = await getToken();
+      const res = await fetch(`${baseUrl}/api/v1/idm/users/me`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          ...token ? { Authorization: `Bearer ${token}` } : {}
+        },
+        body: JSON.stringify({ firstName, lastName })
+      });
+      if (!res.ok) {
+        const d = await res.json().catch(() => ({}));
+        setError(d.error ?? "Failed to save changes");
+      } else {
+        setSaved(true);
+        setTimeout(() => setSaved(false), 2500);
+      }
+    } catch {
+      setError("Unable to connect.");
+    } finally {
+      setSaving(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { maxWidth: "480px" }, children: [
+    /* @__PURE__ */ jsx(SectionTitle, { children: "Personal information" }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1.25rem" }, children: [
+      /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Email address" }),
+      /* @__PURE__ */ jsxs("div", { style: { ...inputStyle, color: "var(--k-muted)", cursor: "default", userSelect: "text" }, children: [
+        user.email,
+        user.emailVerified && /* @__PURE__ */ jsx("span", { style: { marginLeft: "0.5rem", fontSize: "0.75rem", color: "#34d399" }, children: "\u2713 Verified" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSave, style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }, children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { style: labelStyle, children: "First name" }),
+          /* @__PURE__ */ jsx("input", { style: inputStyle, value: firstName, onChange: (e) => setFirstName(e.target.value), placeholder: "Jane" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Last name" }),
+          /* @__PURE__ */ jsx("input", { style: inputStyle, value: lastName, onChange: (e) => setLastName(e.target.value), placeholder: "Smith" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Phone number" }),
+        /* @__PURE__ */ jsx("input", { style: inputStyle, value: phoneNumber, onChange: (e) => setPhoneNumber(e.target.value), placeholder: "+1 (555) 000-0000", type: "tel" })
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { style: errorStyle, children: error }),
+      /* @__PURE__ */ jsx("button", { style: { ...primaryButtonStyle, maxWidth: "160px" }, type: "submit", disabled: saving, children: saving ? "Saving\u2026" : saved ? "Saved \u2713" : "Save changes" })
+    ] })
+  ] });
+}
+function SecurityTab({ user, baseUrl, accountId, getToken }) {
+  const [pwOld, setPwOld] = useState("");
+  const [pwNew, setPwNew] = useState("");
+  const [pwSaving, setPwSaving] = useState(false);
+  const [pwError, setPwError] = useState(null);
+  const [pwDone, setPwDone] = useState(false);
+  const [totpUri, setTotpUri] = useState(null);
+  const [totpCode, setTotpCode] = useState("");
+  const [totpStep, setTotpStep] = useState("idle");
+  const [totpError, setTotpError] = useState(null);
+  async function handleChangePassword(e) {
+    e.preventDefault();
+    setPwError(null);
+    setPwSaving(true);
+    try {
+      const token = await getToken();
+      const res = await fetch(`${baseUrl}/api/v1/idm/auth/change-password`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...token ? { Authorization: `Bearer ${token}` } : {}
+        },
+        body: JSON.stringify({ currentPassword: pwOld, newPassword: pwNew, accountId })
+      });
+      const d = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        setPwError(d.error ?? "Failed to change password");
+      } else {
+        setPwDone(true);
+        setPwOld("");
+        setPwNew("");
+      }
+    } catch {
+      setPwError("Unable to connect.");
+    } finally {
+      setPwSaving(false);
+    }
+  }
+  async function startTotpEnroll() {
+    setTotpError(null);
+    const token = await getToken();
+    const res = await fetch(`${baseUrl}/api/v1/idm/auth/totp/enroll`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...token ? { Authorization: `Bearer ${token}` } : {}
+      },
+      body: JSON.stringify({ accountId })
+    });
+    const d = await res.json().catch(() => ({}));
+    if (res.ok && d.data?.uri) {
+      setTotpUri(d.data.uri);
+      setTotpStep("enroll");
+    } else {
+      setTotpError(d.error ?? "Failed to start TOTP enrollment");
+    }
+  }
+  async function confirmTotp(e) {
+    e.preventDefault();
+    setTotpError(null);
+    const token = await getToken();
+    const res = await fetch(`${baseUrl}/api/v1/idm/auth/totp/confirm`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...token ? { Authorization: `Bearer ${token}` } : {}
+      },
+      body: JSON.stringify({ code: totpCode, accountId })
+    });
+    const d = await res.json().catch(() => ({}));
+    if (res.ok) {
+      setTotpStep("done");
+    } else {
+      setTotpError(d.error ?? "Invalid code");
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { maxWidth: "480px", display: "flex", flexDirection: "column", gap: "2rem" }, children: [
+    /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx(SectionTitle, { children: "Change password" }),
+      pwDone ? /* @__PURE__ */ jsx("p", { style: { color: "#34d399", fontSize: "0.875rem" }, children: "Password updated successfully." }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleChangePassword, style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Current password" }),
+          /* @__PURE__ */ jsx("input", { style: inputStyle, type: "password", value: pwOld, onChange: (e) => setPwOld(e.target.value), required: true, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: "current-password" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { style: labelStyle, children: "New password" }),
+          /* @__PURE__ */ jsx("input", { style: inputStyle, type: "password", value: pwNew, onChange: (e) => setPwNew(e.target.value), required: true, minLength: 8, placeholder: "Min. 8 characters", autoComplete: "new-password" })
+        ] }),
+        pwError && /* @__PURE__ */ jsx("p", { style: errorStyle, children: pwError }),
+        /* @__PURE__ */ jsx("button", { style: { ...primaryButtonStyle, maxWidth: "180px" }, type: "submit", disabled: pwSaving, children: pwSaving ? "Updating\u2026" : "Update password" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx(SectionTitle, { children: "Authenticator app (TOTP)" }),
+      user.mfaEnabled && totpStep !== "done" && /* @__PURE__ */ jsx(StatusBadge, { color: "#34d399", children: "MFA enabled" }),
+      !user.mfaEnabled && totpStep === "idle" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { style: { fontSize: "0.875rem", color: "var(--k-muted)", marginBottom: "1rem", lineHeight: 1.6 }, children: "Add an extra layer of security by requiring a code from your authenticator app at sign-in." }),
+        totpError && /* @__PURE__ */ jsx("p", { style: errorStyle, children: totpError }),
+        /* @__PURE__ */ jsx("button", { style: { ...ghostButtonStyle, maxWidth: "200px" }, onClick: startTotpEnroll, children: "Set up authenticator" })
+      ] }),
+      totpStep === "enroll" && totpUri && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
+        /* @__PURE__ */ jsx("p", { style: { fontSize: "0.875rem", color: "var(--k-muted)", lineHeight: 1.6 }, children: "Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.), then enter the 6-digit code to confirm." }),
+        /* @__PURE__ */ jsx(QrCode, { uri: totpUri }),
+        /* @__PURE__ */ jsxs("form", { onSubmit: confirmTotp, style: { display: "flex", flexDirection: "column", gap: "0.75rem", maxWidth: "240px" }, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Verification code" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                style: { ...inputStyle, letterSpacing: "0.25em", textAlign: "center", fontSize: "1.125rem" },
+                type: "text",
+                inputMode: "numeric",
+                maxLength: 6,
+                value: totpCode,
+                onChange: (e) => setTotpCode(e.target.value.replace(/\D/g, "")),
+                placeholder: "000000",
+                required: true
+              }
+            )
+          ] }),
+          totpError && /* @__PURE__ */ jsx("p", { style: errorStyle, children: totpError }),
+          /* @__PURE__ */ jsx("button", { style: primaryButtonStyle, type: "submit", disabled: totpCode.length < 6, children: "Verify & enable" })
+        ] })
+      ] }),
+      totpStep === "done" && /* @__PURE__ */ jsx(StatusBadge, { color: "#34d399", children: "Authenticator app enabled \u2713" })
+    ] })
+  ] });
+}
+function SessionsTab({ baseUrl, accountId, getToken, currentSessionId }) {
+  const [sessions, setSessions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [revoking, setRevoking] = useState(null);
+  const loadSessions = useCallback(async () => {
+    setLoading(true);
+    try {
+      const token = await getToken();
+      const res = await fetch(`${baseUrl}/api/v1/idm/sessions?accountId=${accountId}`, {
+        headers: token ? { Authorization: `Bearer ${token}` } : {}
+      });
+      const d = await res.json().catch(() => ({}));
+      setSessions(Array.isArray(d.data) ? d.data : []);
+    } catch {
+      setSessions([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [baseUrl, accountId, getToken]);
+  useEffect(() => {
+    loadSessions();
+  }, [loadSessions]);
+  async function handleRevoke(sessionId) {
+    setRevoking(sessionId);
+    try {
+      const token = await getToken();
+      await fetch(`${baseUrl}/api/v1/idm/sessions/${sessionId}`, {
+        method: "DELETE",
+        headers: token ? { Authorization: `Bearer ${token}` } : {}
+      });
+      setSessions((s) => s.filter((x) => x.id !== sessionId));
+    } finally {
+      setRevoking(null);
+    }
+  }
+  if (loading) return /* @__PURE__ */ jsx(Skeleton, { rows: 3 });
+  return /* @__PURE__ */ jsxs("div", { style: { maxWidth: "560px" }, children: [
+    /* @__PURE__ */ jsx(SectionTitle, { children: "Active sessions" }),
+    /* @__PURE__ */ jsx("p", { style: { fontSize: "0.875rem", color: "var(--k-muted)", marginBottom: "1.25rem", lineHeight: 1.6 }, children: "These devices are currently signed into your account." }),
+    sessions.length === 0 && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.875rem", color: "var(--k-muted)" }, children: "No active sessions found." }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.625rem" }, children: sessions.map((s) => {
+      const isCurrent = s.id === currentSessionId;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "1rem",
+            padding: "0.875rem 1rem",
+            background: "var(--k-hover)",
+            border: `1px solid ${isCurrent ? "var(--k-primary)" : "var(--k-border)"}`,
+            borderRadius: "calc(var(--k-radius) * 0.6)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.875rem", fontWeight: 500, color: "var(--k-text)", display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                /* @__PURE__ */ jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: s.ipAddress ?? "Unknown IP" }),
+                isCurrent && /* @__PURE__ */ jsx(StatusBadge, { color: "var(--k-primary)", inline: true, children: "Current" })
+              ] }),
+              s.userAgent && /* @__PURE__ */ jsx("div", { style: { fontSize: "0.75rem", color: "var(--k-muted)", marginTop: "0.25rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: parseUserAgent(s.userAgent) }),
+              s.createdAt && /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.75rem", color: "var(--k-muted)", marginTop: "0.125rem" }, children: [
+                "Started ",
+                formatDate(s.createdAt)
+              ] })
+            ] }),
+            !isCurrent && /* @__PURE__ */ jsx(
+              "button",
+              {
+                style: {
+                  padding: "0.375rem 0.75rem",
+                  background: "transparent",
+                  border: "1px solid rgba(239,68,68,0.35)",
+                  borderRadius: "calc(var(--k-radius) * 0.5)",
+                  color: "#ef4444",
+                  fontSize: "0.8125rem",
+                  cursor: "pointer",
+                  fontFamily: "var(--k-font)",
+                  flexShrink: 0
+                },
+                disabled: revoking === s.id,
+                onClick: () => handleRevoke(s.id),
+                children: revoking === s.id ? "Revoking\u2026" : "Revoke"
+              }
+            )
+          ]
+        },
+        s.id
+      );
+    }) })
+  ] });
+}
+function PasskeysTab({ baseUrl, accountId, getToken }) {
+  const [passkeys, setPasskeys] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [deleting, setDeleting] = useState(null);
+  const loadPasskeys = useCallback(async () => {
+    setLoading(true);
+    try {
+      const token = await getToken();
+      const res = await fetch(`${baseUrl}/api/v1/idm/auth/passkey/credentials?accountId=${accountId}`, {
+        headers: token ? { Authorization: `Bearer ${token}` } : {}
+      });
+      const d = await res.json().catch(() => ({}));
+      setPasskeys(Array.isArray(d.data) ? d.data : []);
+    } catch {
+      setPasskeys([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [baseUrl, accountId, getToken]);
+  useEffect(() => {
+    loadPasskeys();
+  }, [loadPasskeys]);
+  async function handleDelete(passkeyId) {
+    setDeleting(passkeyId);
+    try {
+      const token = await getToken();
+      await fetch(`${baseUrl}/api/v1/idm/auth/passkey/credentials/${passkeyId}`, {
+        method: "DELETE",
+        headers: token ? { Authorization: `Bearer ${token}` } : {}
+      });
+      setPasskeys((p) => p.filter((x) => x.id !== passkeyId));
+    } finally {
+      setDeleting(null);
+    }
+  }
+  if (loading) return /* @__PURE__ */ jsx(Skeleton, { rows: 2 });
+  return /* @__PURE__ */ jsxs("div", { style: { maxWidth: "560px" }, children: [
+    /* @__PURE__ */ jsx(SectionTitle, { children: "Passkeys" }),
+    /* @__PURE__ */ jsx("p", { style: { fontSize: "0.875rem", color: "var(--k-muted)", marginBottom: "1.25rem", lineHeight: 1.6 }, children: "Passkeys let you sign in with your device's biometrics or PIN \u2014 no password needed." }),
+    passkeys.length === 0 && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.875rem", color: "var(--k-muted)" }, children: "No passkeys registered." }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.625rem" }, children: passkeys.map((pk) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "1rem",
+          padding: "0.875rem 1rem",
+          background: "var(--k-hover)",
+          border: "1px solid var(--k-border)",
+          borderRadius: "calc(var(--k-radius) * 0.6)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem", flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "1.25rem" }, children: "\u{1F511}" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { style: { fontSize: "0.875rem", fontWeight: 500, color: "var(--k-text)" }, children: pk.name ?? "Passkey" }),
+              pk.createdAt && /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.75rem", color: "var(--k-muted)", marginTop: "0.125rem" }, children: [
+                "Added ",
+                formatDate(pk.createdAt)
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              style: {
+                padding: "0.375rem 0.75rem",
+                background: "transparent",
+                border: "1px solid rgba(239,68,68,0.35)",
+                borderRadius: "calc(var(--k-radius) * 0.5)",
+                color: "#ef4444",
+                fontSize: "0.8125rem",
+                cursor: "pointer",
+                fontFamily: "var(--k-font)",
+                flexShrink: 0
+              },
+              disabled: deleting === pk.id,
+              onClick: () => handleDelete(pk.id),
+              children: deleting === pk.id ? "Removing\u2026" : "Remove"
+            }
+          )
+        ]
+      },
+      pk.id
+    )) })
+  ] });
+}
+function SectionTitle({ children }) {
+  return /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 1rem", fontSize: "0.9375rem", fontWeight: 600, color: "var(--k-text)" }, children });
+}
+function StatusBadge({ children, color, inline = false }) {
+  return /* @__PURE__ */ jsx("span", { style: {
+    display: inline ? "inline-flex" : "inline-flex",
+    alignItems: "center",
+    padding: "0.125rem 0.5rem",
+    borderRadius: "1rem",
+    fontSize: "0.75rem",
+    fontWeight: 600,
+    color,
+    background: `${color}22`,
+    border: `1px solid ${color}44`,
+    marginBottom: inline ? 0 : "0.75rem"
+  }, children });
+}
+function Skeleton({ rows = 1 }) {
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx("div", { style: { height: "52px", background: "var(--k-hover)", borderRadius: "calc(var(--k-radius) * 0.6)", border: "1px solid var(--k-border)" } }, i)) });
+}
+function QrCode({ uri }) {
+  const encoded = encodeURIComponent(uri);
+  return /* @__PURE__ */ jsx("div", { style: {
+    padding: "0.75rem",
+    background: "#ffffff",
+    borderRadius: "calc(var(--k-radius) * 0.6)",
+    display: "inline-block",
+    lineHeight: 0
+  }, children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: `https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=${encoded}`,
+      alt: "TOTP QR code",
+      width: 160,
+      height: 160,
+      style: { display: "block" }
+    }
+  ) });
+}
+function parseUserAgent(ua) {
+  if (ua.includes("Chrome")) return `Chrome \xB7 ${extractOS(ua)}`;
+  if (ua.includes("Firefox")) return `Firefox \xB7 ${extractOS(ua)}`;
+  if (ua.includes("Safari")) return `Safari \xB7 ${extractOS(ua)}`;
+  return ua.slice(0, 60);
+}
+function extractOS(ua) {
+  if (ua.includes("Windows")) return "Windows";
+  if (ua.includes("Mac")) return "macOS";
+  if (ua.includes("Linux")) return "Linux";
+  if (ua.includes("Android")) return "Android";
+  if (ua.includes("iPhone") || ua.includes("iPad")) return "iOS";
+  return "Unknown OS";
+}
+function formatDate(iso) {
+  try {
+    return new Intl.DateTimeFormat(void 0, { dateStyle: "medium", timeStyle: "short" }).format(new Date(iso));
+  } catch {
+    return iso;
+  }
+}
+function LoggedIn({ children, fallback = null }) {
+  const { isLoaded, isSignedIn } = useKaappu();
+  if (!isLoaded) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  if (!isSignedIn) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function LoggedOut({ children, fallback = null }) {
+  const { isLoaded, isSignedIn } = useKaappu();
+  if (!isLoaded) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  if (isSignedIn) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function Authorize({
+  children,
+  permission,
+  role,
+  fallback = null,
+  loading = null
+}) {
+  const { isLoaded, isSignedIn, user, hasPermission } = useKaappu();
+  if (!isLoaded) return /* @__PURE__ */ jsx(Fragment, { children: loading });
+  if (!isSignedIn || !user) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  if (permission && !hasPermission(permission)) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  if (role) {
+    const userRoles = user.roles ?? [];
+    if (!userRoles.includes(role) && !userRoles.includes("super_admin")) {
+      return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+    }
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+// ../core/dist/index.mjs
+function checkPermission(userPermissions, required) {
+  if (!required) return true;
+  if (!userPermissions || userPermissions.length === 0) return false;
+  const [requiredResource] = required.split(":");
+  return userPermissions.some(
+    (p) => p === "*" || p === required || p === `${requiredResource}:*`
+  );
+}
+function checkAllPermissions(userPermissions, required) {
+  return required.every((perm) => checkPermission(userPermissions, perm));
+}
+function checkAnyPermission(userPermissions, required) {
+  return required.some((perm) => checkPermission(userPermissions, perm));
+}
+function isPermission(val) {
+  return val === "*" || /^[a-z_]+:[a-z_*]+$/.test(val);
+}
+var KaappuApiClient = class {
+  constructor(config) {
+    this.baseUrl = config.baseUrl || "http://localhost:9091";
+    this.publishableKey = config.publishableKey;
+  }
+  /** Fetch tenant config (auth methods, branding, bot protection) */
+  async getTenantConfig() {
+    try {
+      const res = await fetch(`${this.baseUrl}/api/v1/accounts/config?pk=${this.publishableKey}`);
+      if (!res.ok) return null;
+      const data = await res.json();
+      return data?.data ?? null;
+    } catch {
+      return null;
+    }
+  }
+  /** Sign in with email + password */
+  async signIn(email, password, accountId) {
+    const res = await fetch(`${this.baseUrl}/api/v1/idm/auth/sign-in`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password, accountId: accountId || "default" })
+    });
+    const data = await res.json();
+    if (!data.success) throw new Error(data.error || "Sign in failed");
+    return data.data;
+  }
+  /** Sign up with email + password */
+  async signUp(params) {
+    const res = await fetch(`${this.baseUrl}/api/v1/idm/auth/sign-up`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ ...params, accountId: params.accountId || "default" })
+    });
+    const data = await res.json();
+    if (!data.success) throw new Error(data.error || "Sign up failed");
+    return data.data;
+  }
+  /** Refresh an access token using a refresh token */
+  async refreshToken(refreshToken) {
+    try {
+      const res = await fetch(`${this.baseUrl}/api/v1/idm/auth/refresh`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ refreshToken })
+      });
+      if (!res.ok) return null;
+      const data = await res.json();
+      return data?.data ?? null;
+    } catch {
+      return null;
+    }
+  }
+  /** Sign out — invalidate session on the server */
+  async signOut(accessToken) {
+    await fetch(`${this.baseUrl}/api/v1/idm/auth/sign-out`, {
+      method: "POST",
+      headers: { Authorization: `Bearer ${accessToken}` }
+    }).catch(() => {
+    });
+  }
+  /** Get current user profile */
+  async getMe(accessToken) {
+    try {
+      const res = await fetch(`${this.baseUrl}/api/v1/idm/auth/me`, {
+        headers: { Authorization: `Bearer ${accessToken}` }
+      });
+      if (!res.ok) return null;
+      const data = await res.json();
+      return data?.data?.user ?? null;
+    } catch {
+      return null;
+    }
+  }
+  /** Verify MFA challenge */
+  async verifyMfa(challengeId, code) {
+    const res = await fetch(`${this.baseUrl}/api/v1/idm/auth/mfa/verify`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ challengeId, code })
+    });
+    const data = await res.json();
+    if (!data.success) throw new Error(data.error || "MFA verification failed");
+    return data.data;
+  }
+  /** Request magic link */
+  async requestMagicLink(email, accountId) {
+    await fetch(`${this.baseUrl}/api/v1/idm/auth/magic-link`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, accountId: accountId || "default" })
+    });
+  }
+  /** Get OAuth authorization URL */
+  async getOAuthUrl(provider, redirectUri, accountId) {
+    const res = await fetch(
+      `${this.baseUrl}/api/v1/idm/auth/oauth/${provider}?accountId=${accountId || "default"}&redirectUri=${encodeURIComponent(redirectUri)}`
+    );
+    const data = await res.json();
+    return data?.data?.url || data?.url || "";
+  }
+};
+
+export { AccountView, Authorize, KaappuApiClient, KaappuProvider, LoggedIn, LoggedOut, LoginPanel, ProfileBadge, RegisterPanel, buildThemeVars, checkAllPermissions, checkAnyPermission, checkPermission, createTheme, isPermission, resolveColorScheme, useKaappu };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map