vibecarbon 0.1.0

package/carbon/src/client/components/auth/AuthProvider.tsx

@@ -0,0 +1,466 @@
+import type {
+  AuthMFAChallengeResponse,
+  AuthMFAEnrollResponse,
+  Factor,
+  Session,
+  User,
+} from '@supabase/supabase-js';
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { useMfaRequired } from '../../hooks/api';
+import { supabase } from '../../lib/supabase';
+
+type MFAChallenge = {
+  factorId: string;
+  challengeId: string;
+};
+
+const IMPERSONATION_KEY = 'impersonation_admin_session';
+
+type ImpersonationInfo = {
+  userId: string;
+  email: string;
+  name: string | null;
+};
+
+type AuthContextType = {
+  user: User | null;
+  session: Session | null;
+  isLoading: boolean;
+  /** Super admin can access the Super Admin panel and administrate the entire system */
+  isSuperAdmin: boolean;
+  /** Whether MFA is required app-wide (set by admin) */
+  mfaRequired: boolean;
+  /** Whether current user has MFA enabled */
+  hasMfaEnabled: boolean;
+  /** Pending MFA challenge (set during login when MFA is required) */
+  pendingMfaChallenge: MFAChallenge | null;
+  /** Whether currently impersonating another user */
+  isImpersonating: boolean;
+  /** Info about the user being impersonated */
+  impersonationTarget: ImpersonationInfo | null;
+  signIn: {
+    email: (email: string, password: string) => Promise<{ requiresMfa: boolean }>;
+    google: () => Promise<void>;
+    microsoft: () => Promise<void>;
+    github: () => Promise<void>;
+    apple: () => Promise<void>;
+    discord: () => Promise<void>;
+    magicLink: (email: string) => Promise<void>;
+  };
+  signUp: (email: string, password: string, name?: string) => Promise<void>;
+  signOut: () => Promise<void>;
+  /** Clear pending MFA challenge (e.g., when user cancels) */
+  clearMfaChallenge: () => void;
+  /** Impersonate a user (super admin only) */
+  impersonateUser: (userId: string) => Promise<void>;
+  /** Stop impersonating and return to admin session */
+  stopImpersonating: () => Promise<void>;
+  /** MFA operations */
+  mfa: {
+    /** Enroll a new TOTP factor */
+    enroll: (friendlyName?: string) => Promise<AuthMFAEnrollResponse['data']>;
+    /** Create a challenge for an enrolled factor */
+    challenge: (factorId: string) => Promise<AuthMFAChallengeResponse['data']>;
+    /** Verify a challenge with a TOTP code */
+    verify: (factorId: string, challengeId: string, code: string) => Promise<void>;
+    /** Combined challenge and verify (convenience method) */
+    challengeAndVerify: (factorId: string, code: string) => Promise<void>;
+    /** Unenroll a factor */
+    unenroll: (factorId: string) => Promise<void>;
+    /** List enrolled factors */
+    listFactors: () => Promise<Factor[]>;
+    /** Get current authenticator assurance level */
+    getAAL: () => Promise<{ currentLevel: string | null; nextLevel: string | null }>;
+  };
+};
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [session, setSession] = useState<Session | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasMfaEnabled, setHasMfaEnabled] = useState(false);
+  const [pendingMfaChallenge, setPendingMfaChallenge] = useState<MFAChallenge | null>(null);
+  const [isImpersonating, setIsImpersonating] = useState(
+    () => !!localStorage.getItem(IMPERSONATION_KEY)
+  );
+  const [impersonationTarget, setImpersonationTarget] = useState<ImpersonationInfo | null>(() => {
+    const saved = localStorage.getItem(`${IMPERSONATION_KEY}_target`);
+    return saved ? JSON.parse(saved) : null;
+  });
+
+  // Use shared hook for MFA requirement (cached via TanStack Query)
+  const { mfaRequired } = useMfaRequired();
+
+  // Check if user has MFA enabled
+  const checkUserMfa = useCallback(async () => {
+    try {
+      const { data } = await supabase.auth.mfa.listFactors();
+      const verifiedFactors = data?.totp?.filter((f) => f.status === 'verified') || [];
+      setHasMfaEnabled(verifiedFactors.length > 0);
+    } catch {
+      setHasMfaEnabled(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Validate session on mount by calling getUser() which checks with the server
+    // This handles cases where the database was reset but browser still has cached tokens
+    const validateSession = async () => {
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+
+      if (session) {
+        // Validate the session with the server
+        const {
+          data: { user },
+          error,
+        } = await supabase.auth.getUser();
+
+        if (error || !user) {
+          // Session is invalid (e.g., user deleted, database reset)
+          await supabase.auth.signOut();
+          setSession(null);
+          setUser(null);
+        } else {
+          setSession(session);
+          setUser(user);
+          // Check MFA status for this user
+          checkUserMfa();
+        }
+      } else {
+        setSession(null);
+        setUser(null);
+      }
+
+      setIsLoading(false);
+    };
+
+    validateSession();
+
+    // Listen for auth changes
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      setSession(session);
+      setUser(session?.user ?? null);
+      setIsLoading(false);
+
+      // Update MFA status when user changes
+      if (session?.user) {
+        checkUserMfa();
+      } else {
+        setHasMfaEnabled(false);
+      }
+    });
+
+    return () => subscription.unsubscribe();
+  }, [checkUserMfa]);
+
+  const signIn = {
+    email: async (email: string, password: string): Promise<{ requiresMfa: boolean }> => {
+      // Single API call handles lockout check, auth, and lockout recording
+      const response = await fetch('/api/v1/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Login failed');
+      }
+
+      // Set the session from server response
+      const { error: sessionError } = await supabase.auth.setSession({
+        access_token: data.session.access_token,
+        refresh_token: data.session.refresh_token,
+      });
+
+      if (sessionError) {
+        throw sessionError;
+      }
+
+      // Check if user has MFA factors
+      const { data: factors } = await supabase.auth.mfa.listFactors();
+      const verifiedFactors = factors?.totp?.filter((f) => f.status === 'verified') || [];
+
+      if (verifiedFactors.length > 0) {
+        // User has MFA - create challenge
+        const { data: challenge, error: challengeError } = await supabase.auth.mfa.challenge({
+          factorId: verifiedFactors[0].id,
+        });
+
+        if (challengeError) {
+          throw challengeError;
+        }
+
+        if (challenge) {
+          setPendingMfaChallenge({
+            factorId: verifiedFactors[0].id,
+            challengeId: challenge.id,
+          });
+          return { requiresMfa: true };
+        }
+      }
+
+      return { requiresMfa: false };
+    },
+    google: async () => {
+      const { error } = await supabase.auth.signInWithOAuth({
+        provider: 'google',
+        options: {
+          redirectTo: `${window.location.origin}/auth/callback`,
+        },
+      });
+      if (error) throw error;
+    },
+    microsoft: async () => {
+      const { error } = await supabase.auth.signInWithOAuth({
+        provider: 'azure',
+        options: {
+          redirectTo: `${window.location.origin}/auth/callback`,
+          scopes: 'email',
+        },
+      });
+      if (error) throw error;
+    },
+    github: async () => {
+      const { error } = await supabase.auth.signInWithOAuth({
+        provider: 'github',
+        options: {
+          redirectTo: `${window.location.origin}/auth/callback`,
+        },
+      });
+      if (error) throw error;
+    },
+    apple: async () => {
+      const { error } = await supabase.auth.signInWithOAuth({
+        provider: 'apple',
+        options: {
+          redirectTo: `${window.location.origin}/auth/callback`,
+        },
+      });
+      if (error) throw error;
+    },
+    discord: async () => {
+      const { error } = await supabase.auth.signInWithOAuth({
+        provider: 'discord',
+        options: {
+          redirectTo: `${window.location.origin}/auth/callback`,
+        },
+      });
+      if (error) throw error;
+    },
+    magicLink: async (email: string) => {
+      const { error } = await supabase.auth.signInWithOtp({
+        email,
+        options: {
+          emailRedirectTo: `${window.location.origin}/auth/callback`,
+        },
+      });
+      if (error) throw error;
+    },
+  };
+
+  const impersonateUser = async (userId: string) => {
+    // Save current admin session
+    const {
+      data: { session: adminSession },
+    } = await supabase.auth.getSession();
+    if (!adminSession) throw new Error('No active session');
+
+    // Request impersonation token from server
+    const response = await fetch(`/api/v1/admin/impersonate/${userId}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${adminSession.access_token}`,
+      },
+    });
+
+    const data = await response.json();
+    if (!response.ok) {
+      throw new Error(data.error || 'Failed to impersonate user');
+    }
+
+    // Store admin session for later restoration
+    localStorage.setItem(IMPERSONATION_KEY, JSON.stringify(adminSession));
+    const target: ImpersonationInfo = {
+      userId: data.user.id,
+      email: data.user.email,
+      name: data.user.name,
+    };
+    localStorage.setItem(`${IMPERSONATION_KEY}_target`, JSON.stringify(target));
+
+    // Verify the magic link token to get a session as the target user
+    const { error } = await supabase.auth.verifyOtp({
+      token_hash: data.tokenHash,
+      type: 'magiclink',
+    });
+
+    if (error) {
+      localStorage.removeItem(IMPERSONATION_KEY);
+      localStorage.removeItem(`${IMPERSONATION_KEY}_target`);
+      throw error;
+    }
+
+    setIsImpersonating(true);
+    setImpersonationTarget(target);
+  };
+
+  const stopImpersonating = async () => {
+    const saved = localStorage.getItem(IMPERSONATION_KEY);
+    localStorage.removeItem(IMPERSONATION_KEY);
+    localStorage.removeItem(`${IMPERSONATION_KEY}_target`);
+    setIsImpersonating(false);
+    setImpersonationTarget(null);
+
+    if (saved) {
+      const adminSession = JSON.parse(saved);
+      await supabase.auth.setSession({
+        access_token: adminSession.access_token,
+        refresh_token: adminSession.refresh_token,
+      });
+    }
+  };
+
+  const signUp = async (email: string, password: string, name?: string) => {
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+      options: {
+        data: {
+          full_name: name,
+        },
+      },
+    });
+    if (error) throw error;
+  };
+
+  const signOut = async () => {
+    setPendingMfaChallenge(null);
+    localStorage.removeItem(IMPERSONATION_KEY);
+    localStorage.removeItem(`${IMPERSONATION_KEY}_target`);
+    setIsImpersonating(false);
+    setImpersonationTarget(null);
+    const { error } = await supabase.auth.signOut();
+    if (error) throw error;
+  };
+
+  const clearMfaChallenge = () => {
+    setPendingMfaChallenge(null);
+  };
+
+  // MFA operations
+  const mfa = {
+    enroll: async (friendlyName?: string) => {
+      const { data, error } = await supabase.auth.mfa.enroll({
+        factorType: 'totp',
+        friendlyName,
+      });
+      if (error) throw error;
+      return data;
+    },
+    challenge: async (factorId: string) => {
+      const { data, error } = await supabase.auth.mfa.challenge({ factorId });
+      if (error) throw error;
+      return data;
+    },
+    verify: async (factorId: string, challengeId: string, code: string) => {
+      const { error } = await supabase.auth.mfa.verify({
+        factorId,
+        challengeId,
+        code,
+      });
+      if (error) throw error;
+      setPendingMfaChallenge(null);
+      // Refresh MFA status
+      checkUserMfa();
+    },
+    challengeAndVerify: async (factorId: string, code: string) => {
+      const { error } = await supabase.auth.mfa.challengeAndVerify({
+        factorId,
+        code,
+      });
+      if (error) throw error;
+      setPendingMfaChallenge(null);
+      checkUserMfa();
+    },
+    unenroll: async (factorId: string) => {
+      const { error } = await supabase.auth.mfa.unenroll({ factorId });
+      if (error) throw error;
+      checkUserMfa();
+    },
+    listFactors: async () => {
+      const { data, error } = await supabase.auth.mfa.listFactors();
+      if (error) throw error;
+      return data?.totp || [];
+    },
+    getAAL: async () => {
+      const { data, error } = await supabase.auth.mfa.getAuthenticatorAssuranceLevel();
+      if (error) throw error;
+      return {
+        currentLevel: data?.currentLevel ?? null,
+        nextLevel: data?.nextLevel ?? null,
+      };
+    },
+  };
+
+  // Super admin role is stored in app_metadata (set via Supabase admin API)
+  const isSuperAdmin = user?.app_metadata?.role === 'super_admin';
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: signIn/signUp/signOut/mfa/impersonateUser/stopImpersonating/clearMfaChallenge are stable references that don't need to trigger re-renders
+  const value = useMemo(
+    () => ({
+      user,
+      session,
+      isLoading,
+      isSuperAdmin,
+      mfaRequired,
+      hasMfaEnabled,
+      pendingMfaChallenge,
+      isImpersonating,
+      impersonationTarget,
+      signIn,
+      signUp,
+      signOut,
+      clearMfaChallenge,
+      impersonateUser,
+      stopImpersonating,
+      mfa,
+    }),
+    [
+      user,
+      session,
+      isLoading,
+      isSuperAdmin,
+      mfaRequired,
+      hasMfaEnabled,
+      pendingMfaChallenge,
+      isImpersonating,
+      impersonationTarget,
+    ]
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}

package/carbon/src/client/components/effects/FilmGrainOverlay.tsx

@@ -0,0 +1,35 @@
+import { useReducedMotion } from '../../hooks/useReducedMotion';
+
+interface FilmGrainOverlayProps {
+  opacity?: number;
+  animated?: boolean;
+}
+
+/**
+ * Film grain overlay for anodized metal/industrial feel
+ * Uses SVG noise filter for subtle texture
+ */
+export function FilmGrainOverlay({ opacity = 0.03, animated = false }: FilmGrainOverlayProps) {
+  const prefersReducedMotion = useReducedMotion();
+  const shouldAnimate = animated && !prefersReducedMotion;
+
+  return (
+    <div
+      className="fixed inset-0 pointer-events-none z-[9999]"
+      style={{ mixBlendMode: 'overlay' }}
+      aria-hidden="true"
+    >
+      <svg className="w-full h-full" style={{ opacity }} aria-hidden="true">
+        <filter id="film-grain-filter">
+          <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch">
+            {shouldAnimate && (
+              <animate attributeName="seed" from="0" to="100" dur="1s" repeatCount="indefinite" />
+            )}
+          </feTurbulence>
+          <feColorMatrix type="saturate" values="0" />
+        </filter>
+        <rect width="100%" height="100%" filter="url(#film-grain-filter)" />
+      </svg>
+    </div>
+  );
+}

package/carbon/src/client/components/effects/FresnelEdge.tsx

@@ -0,0 +1,49 @@
+import { cn } from '../../lib/utils';
+
+interface FresnelEdgeProps {
+  children: React.ReactNode;
+  className?: string;
+  edgeColor?: string;
+  glowStrength?: number;
+}
+
+/**
+ * Fresnel edge effect - glowing 1px edges on glass objects
+ * Creates the "light catching" effect seen on premium glass surfaces
+ */
+export function FresnelEdge({
+  children,
+  className,
+  edgeColor = 'rgba(255, 255, 255, 0.15)',
+  glowStrength = 0.5,
+}: FresnelEdgeProps) {
+  return (
+    <div className={cn('relative', className)}>
+      {/* Main content */}
+      {children}
+
+      {/* Fresnel edge - top/left lighter (light source from top-left) */}
+      <div
+        className="absolute inset-0 pointer-events-none rounded-inherit"
+        style={{
+          boxShadow: `
+            inset 1px 1px 0 ${edgeColor},
+            inset -1px -1px 0 rgba(0,0,0,0.1),
+            0 0 ${20 * glowStrength}px ${edgeColor}
+          `,
+          borderRadius: 'inherit',
+        }}
+        aria-hidden="true"
+      />
+
+      {/* Top edge highlight */}
+      <div
+        className="absolute top-0 left-[10%] right-[10%] h-[1px] pointer-events-none"
+        style={{
+          background: `linear-gradient(90deg, transparent, ${edgeColor}, transparent)`,
+        }}
+        aria-hidden="true"
+      />
+    </div>
+  );
+}

package/carbon/src/client/components/effects/GlowTracker.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * Mouse-tracking radial glow overlay for cards.
+ *
+ * Usage: Place as the first child of a `relative overflow-hidden` container.
+ * The glow follows the cursor within the card and fades on mouse leave.
+ */
+export function GlowTracker() {
+  const ref = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const parent = ref.current?.parentElement;
+    if (!parent) return;
+
+    const handleMove = (e: MouseEvent) => {
+      const rect = parent.getBoundingClientRect();
+      setPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    };
+    const handleEnter = () => setVisible(true);
+    const handleLeave = () => setVisible(false);
+
+    parent.addEventListener('mousemove', handleMove);
+    parent.addEventListener('mouseenter', handleEnter);
+    parent.addEventListener('mouseleave', handleLeave);
+    return () => {
+      parent.removeEventListener('mousemove', handleMove);
+      parent.removeEventListener('mouseenter', handleEnter);
+      parent.removeEventListener('mouseleave', handleLeave);
+    };
+  }, []);
+
+  return (
+    <div ref={ref} className="absolute inset-0 z-0 pointer-events-none">
+      <div
+        className="absolute -inset-px rounded-[inherit] transition-opacity duration-300"
+        style={{
+          opacity: visible ? 1 : 0,
+          background: `radial-gradient(600px circle at ${pos.x}px ${pos.y}px, oklch(0.82 0.14 192 / 0.06) 0%, transparent 90%)`,
+        }}
+      />
+    </div>
+  );
+}