vibecarbon 0.1.0

package/carbon/src/client/hooks/api/useSubscription.ts

@@ -0,0 +1,87 @@
+import type { Plan, PlanId } from '@shared/pricing';
+import { plans } from '@shared/pricing';
+import { useQuery } from '@tanstack/react-query';
+import { supabase } from '@/lib/supabase';
+
+interface Subscription {
+  id: string;
+  status: string;
+  priceId: string;
+  planId: PlanId;
+  currentPeriodEnd: string;
+  cancelAtPeriodEnd: boolean;
+  product: {
+    id: string;
+    name: string;
+    description?: string;
+  };
+  price: {
+    id: string;
+    unitAmount: number;
+    currency: string;
+    interval: string;
+  };
+}
+
+interface SubscriptionResponse {
+  subscription: Subscription | null;
+  status: string;
+}
+
+async function getAuthHeaders() {
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
+  return {
+    'Content-Type': 'application/json',
+    Authorization: session ? `Bearer ${session.access_token}` : '',
+  };
+}
+
+async function fetchSubscription(
+  type: 'user' | 'organization',
+  organizationId?: string
+): Promise<SubscriptionResponse> {
+  const headers = await getAuthHeaders();
+  const params = new URLSearchParams({ type });
+  if (organizationId) params.set('organizationId', organizationId);
+
+  const response = await fetch(`/api/v1/billing/subscription?${params}`, { headers });
+  if (!response.ok) throw new Error('Failed to fetch subscription');
+  return response.json();
+}
+
+export const subscriptionQueryKey = (type: 'user' | 'organization', organizationId?: string) =>
+  ['subscription', type, organizationId ?? 'self'] as const;
+
+export function useSubscription(options?: {
+  type?: 'user' | 'organization';
+  organizationId?: string;
+  enabled?: boolean;
+}) {
+  const type = options?.type ?? 'user';
+  const organizationId = options?.organizationId;
+
+  const query = useQuery({
+    queryKey: subscriptionQueryKey(type, organizationId),
+    queryFn: () => fetchSubscription(type, organizationId),
+    staleTime: 2 * 60 * 1000,
+    gcTime: 5 * 60 * 1000,
+    enabled: options?.enabled ?? true,
+  });
+
+  const subscription = query.data?.subscription ?? null;
+  const planId: PlanId = subscription?.planId ?? 'free';
+  const plan: Plan = plans.find((p) => p.id === planId) ?? plans[0];
+  const isActive = subscription?.status === 'active' || subscription?.status === 'trialing';
+
+  return {
+    ...query,
+    subscription,
+    planId,
+    plan,
+    isActive,
+    isTrialing: subscription?.status === 'trialing',
+    isCanceling: subscription?.cancelAtPeriodEnd ?? false,
+  };
+}

package/carbon/src/client/hooks/use-mobile.ts

@@ -0,0 +1,21 @@
+'use client';
+
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/carbon/src/client/hooks/useMousePosition.ts

@@ -0,0 +1,91 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface MousePosition {
+  x: number;
+  y: number;
+  clientX: number;
+  clientY: number;
+}
+
+/**
+ * Global mouse position tracking with RAF throttling for performance
+ */
+export function useMousePosition(): MousePosition {
+  const [position, setPosition] = useState<MousePosition>({
+    x: 0,
+    y: 0,
+    clientX: 0,
+    clientY: 0,
+  });
+  const rafRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+      rafRef.current = requestAnimationFrame(() => {
+        setPosition({
+          x: e.pageX,
+          y: e.pageY,
+          clientX: e.clientX,
+          clientY: e.clientY,
+        });
+      });
+    };
+
+    window.addEventListener('mousemove', handleMouseMove, { passive: true });
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, []);
+
+  return position;
+}
+
+interface ProximityResult {
+  distance: number;
+  angle: number;
+  relativeX: number;
+  relativeY: number;
+}
+
+/**
+ * Calculate proximity of mouse to an element
+ * Useful for proximity glow and magnetic effects
+ */
+export function useElementProximity(
+  elementRef: React.RefObject<HTMLElement | null>
+): ProximityResult {
+  const mousePosition = useMousePosition();
+  const [proximity, setProximity] = useState<ProximityResult>({
+    distance: Number.POSITIVE_INFINITY,
+    angle: 0,
+    relativeX: 50,
+    relativeY: 50,
+  });
+
+  useEffect(() => {
+    if (!elementRef.current) return;
+
+    const rect = elementRef.current.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+
+    const dx = mousePosition.clientX - centerX;
+    const dy = mousePosition.clientY - centerY;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    const angle = Math.atan2(dy, dx);
+
+    // Relative position as percentage (0-100)
+    const relativeX = ((mousePosition.clientX - rect.left) / rect.width) * 100;
+    const relativeY = ((mousePosition.clientY - rect.top) / rect.height) * 100;
+
+    setProximity({ distance, angle, relativeX, relativeY });
+  }, [mousePosition, elementRef]);
+
+  return proximity;
+}

package/carbon/src/client/hooks/useNotifications.tsx

@@ -0,0 +1,124 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { createContext, type ReactNode, useCallback, useContext, useState } from 'react';
+import { useAuth } from '@/components/auth/AuthProvider';
+import { getAuthHeaders } from '@/lib/api';
+
+export type NotificationType = 'info' | 'warning' | 'error' | 'success';
+export type NotificationVisibility = 'all' | 'authenticated' | 'public';
+
+export type Notification = {
+  id: string;
+  title: string;
+  message?: string;
+  type: NotificationType;
+  visibility?: NotificationVisibility;
+  dismissible: boolean;
+  action?: {
+    label: string;
+    url: string;
+  };
+  createdAt: string;
+};
+
+type NotificationContextValue = {
+  notifications: Notification[];
+  hasNotifications: boolean;
+  isLoading: boolean;
+  isDrawerOpen: boolean;
+  openDrawer: () => void;
+  closeDrawer: () => void;
+  toggleDrawer: () => void;
+  dismissNotification: (id: string) => Promise<void>;
+  refetch: () => void;
+};
+
+const NotificationContext = createContext<NotificationContextValue | null>(null);
+
+async function fetchNotifications(authenticated: boolean): Promise<Notification[]> {
+  const headers: HeadersInit = authenticated ? await getAuthHeaders() : {};
+  const response = await fetch('/api/v1/notifications', { headers });
+
+  if (!response.ok) {
+    if (response.status === 401) {
+      return [];
+    }
+    throw new Error('Failed to fetch notifications');
+  }
+
+  const data = await response.json();
+  return data.notifications;
+}
+
+async function dismissNotificationApi(notificationId: string): Promise<void> {
+  const headers = await getAuthHeaders();
+  const response = await fetch(`/api/v1/notifications/${notificationId}/dismiss`, {
+    method: 'POST',
+    headers,
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to dismiss notification');
+  }
+}
+
+export function NotificationProvider({ children }: { children: ReactNode }) {
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  const {
+    data: notifications = [],
+    isLoading,
+    refetch,
+  } = useQuery({
+    queryKey: ['notifications', !!user],
+    queryFn: () => fetchNotifications(!!user),
+    staleTime: Infinity, // Only fetch on page load
+    refetchOnWindowFocus: false,
+  });
+
+  const dismissMutation = useMutation({
+    mutationFn: dismissNotificationApi,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+    },
+  });
+
+  const openDrawer = useCallback(() => setIsDrawerOpen(true), []);
+  const closeDrawer = useCallback(() => setIsDrawerOpen(false), []);
+  const toggleDrawer = useCallback(() => setIsDrawerOpen((prev) => !prev), []);
+
+  const dismissNotification = useCallback(
+    async (id: string) => {
+      await dismissMutation.mutateAsync(id);
+    },
+    [dismissMutation]
+  );
+
+  return (
+    <NotificationContext.Provider
+      value={{
+        notifications,
+        hasNotifications: notifications.length > 0,
+        isLoading,
+        isDrawerOpen,
+        openDrawer,
+        closeDrawer,
+        toggleDrawer,
+        dismissNotification,
+        refetch,
+      }}
+    >
+      {children}
+    </NotificationContext.Provider>
+  );
+}
+
+export function useNotifications() {
+  const context = useContext(NotificationContext);
+  if (!context) {
+    throw new Error('useNotifications must be used within a NotificationProvider');
+  }
+  return context;
+}

package/carbon/src/client/hooks/useOrganizationMembers.ts

@@ -0,0 +1,127 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { getAuthHeaders } from '@/lib/api';
+
+export type MemberRole = 'OWNER' | 'ADMIN' | 'MEMBER';
+
+export type Member = {
+  id: string;
+  role: MemberRole;
+  createdAt: string;
+  user: {
+    id: string;
+    email: string;
+    name?: string;
+    avatar?: string;
+  } | null;
+};
+
+async function fetchMembers(orgId: string): Promise<Member[]> {
+  const headers = await getAuthHeaders();
+  const response = await fetch(`/api/v1/organizations/${orgId}/members`, { headers });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to fetch members');
+  }
+
+  const data = await response.json();
+  return data.members;
+}
+
+async function addMember(orgId: string, email: string, role: 'ADMIN' | 'MEMBER'): Promise<Member> {
+  const headers = await getAuthHeaders();
+  const response = await fetch(`/api/v1/organizations/${orgId}/members`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({ email, role }),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to add member');
+  }
+
+  const data = await response.json();
+  return data.member;
+}
+
+async function updateMemberRole(orgId: string, userId: string, role: MemberRole): Promise<void> {
+  const headers = await getAuthHeaders();
+  const response = await fetch(`/api/v1/organizations/${orgId}/members/${userId}`, {
+    method: 'PATCH',
+    headers,
+    body: JSON.stringify({ role }),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to update role');
+  }
+}
+
+async function removeMember(orgId: string, userId: string): Promise<void> {
+  const headers = await getAuthHeaders();
+  const response = await fetch(`/api/v1/organizations/${orgId}/members/${userId}`, {
+    method: 'DELETE',
+    headers,
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to remove member');
+  }
+}
+
+export function useOrganizationMembers(orgId: string | undefined) {
+  const queryClient = useQueryClient();
+  const queryKey = ['organization-members', orgId];
+
+  const membersQuery = useQuery({
+    queryKey,
+    queryFn: () => {
+      if (!orgId) throw new Error('Organization ID is required');
+      return fetchMembers(orgId);
+    },
+    enabled: !!orgId,
+  });
+
+  const addMemberMutation = useMutation({
+    mutationFn: ({ email, role }: { email: string; role: 'ADMIN' | 'MEMBER' }) => {
+      if (!orgId) throw new Error('Organization ID is required');
+      return addMember(orgId, email, role);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey });
+    },
+  });
+
+  const updateRoleMutation = useMutation({
+    mutationFn: ({ userId, role }: { userId: string; role: MemberRole }) => {
+      if (!orgId) throw new Error('Organization ID is required');
+      return updateMemberRole(orgId, userId, role);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey });
+    },
+  });
+
+  const removeMemberMutation = useMutation({
+    mutationFn: (userId: string) => {
+      if (!orgId) throw new Error('Organization ID is required');
+      return removeMember(orgId, userId);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey });
+    },
+  });
+
+  return {
+    members: membersQuery.data ?? [],
+    isLoading: membersQuery.isLoading,
+    error: membersQuery.error,
+    refetch: membersQuery.refetch,
+    addMember: addMemberMutation,
+    updateRole: updateRoleMutation,
+    removeMember: removeMemberMutation,
+  };
+}

package/carbon/src/client/hooks/useOrganizations.tsx

@@ -0,0 +1,230 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { useAuth } from '@/components/auth/AuthProvider';
+
+export type OrganizationRole = 'OWNER' | 'ADMIN' | 'MEMBER';
+
+export type Organization = {
+  id: string;
+  name: string;
+  slug: string;
+  plan: 'FREE' | 'STARTER' | 'PRO' | 'ENTERPRISE';
+  created_at: string;
+  updated_at: string;
+};
+
+export type Membership = {
+  id: string;
+  role: OrganizationRole;
+  organization: Organization;
+};
+
+type OrganizationsContextType = {
+  /** List of organizations the user belongs to */
+  organizations: Organization[];
+  /** List of memberships with role info */
+  memberships: Membership[];
+  /** Currently selected organization */
+  selectedOrganization: Organization | null;
+  /** User's role in the selected organization */
+  selectedOrganizationRole: OrganizationRole | null;
+  /** Whether the user is an admin (OWNER or ADMIN) of the selected organization */
+  isOrgAdmin: boolean;
+  /** Whether the user is the owner of the selected organization */
+  isOrgOwner: boolean;
+  /** Loading state */
+  isLoading: boolean;
+  /** Error state */
+  error: string | null;
+  /** Select an organization */
+  selectOrganization: (org: Organization) => void;
+  /** Create a new organization */
+  createOrganization: (name: string) => Promise<Organization>;
+  /** Refresh organizations list */
+  refresh: () => Promise<void>;
+};
+
+const OrganizationsContext = createContext<OrganizationsContextType | undefined>(undefined);
+
+const SELECTED_ORG_KEY = 'selectedOrganizationId';
+
+function generateSlug(name: string): string {
+  return name
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .substring(0, 50);
+}
+
+function transformMemberships(data: Record<string, unknown>[]): Membership[] {
+  return (data || [])
+    .filter((m) => m.organization !== null)
+    .map((m) => ({
+      id: m.id as string,
+      role: m.role as OrganizationRole,
+      organization: m.organization as unknown as Organization,
+    }));
+}
+
+export function OrganizationsProvider({ children }: { children: ReactNode }) {
+  const { user, session } = useAuth();
+  const queryClient = useQueryClient();
+  const [selectedOrganization, setSelectedOrganization] = useState<Organization | null>(null);
+
+  const {
+    data: memberships = [],
+    isLoading,
+    error: queryError,
+    refetch,
+  } = useQuery({
+    queryKey: ['organizations', user?.id],
+    queryFn: async () => {
+      const response = await fetch('/api/v1/me', {
+        headers: { Authorization: `Bearer ${session?.access_token}` },
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch organizations');
+      }
+
+      const { memberships: data } = await response.json();
+      return transformMemberships(data);
+    },
+    enabled: !!user && !!session,
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  });
+
+  const error = queryError
+    ? queryError instanceof Error
+      ? queryError.message
+      : 'Failed to fetch organizations'
+    : null;
+
+  // Restore selected organization from localStorage when memberships change
+  useEffect(() => {
+    if (memberships.length === 0) {
+      setSelectedOrganization(null);
+      return;
+    }
+
+    const savedOrgId = localStorage.getItem(SELECTED_ORG_KEY);
+    const savedOrg = memberships.find((m) => m.organization.id === savedOrgId);
+
+    if (savedOrg) {
+      setSelectedOrganization(savedOrg.organization);
+    } else {
+      setSelectedOrganization(memberships[0].organization);
+    }
+  }, [memberships]);
+
+  // Select organization handler
+  const selectOrganization = useCallback((org: Organization) => {
+    setSelectedOrganization(org);
+    localStorage.setItem(SELECTED_ORG_KEY, org.id);
+  }, []);
+
+  // Create organization mutation
+  const createMutation = useMutation({
+    mutationFn: async (name: string) => {
+      if (!session) {
+        throw new Error('Not authenticated');
+      }
+
+      const slug = generateSlug(name);
+
+      const response = await fetch('/api/v1/organizations', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${session.access_token}`,
+        },
+        body: JSON.stringify({ name, slug }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to create organization');
+      }
+
+      return data.organization as Organization;
+    },
+    onSuccess: (org) => {
+      queryClient.invalidateQueries({ queryKey: ['organizations'] });
+      selectOrganization(org);
+    },
+  });
+
+  const createOrganization = useCallback(
+    async (name: string): Promise<Organization> => {
+      return createMutation.mutateAsync(name);
+    },
+    [createMutation]
+  );
+
+  const refresh = useCallback(async () => {
+    await refetch();
+  }, [refetch]);
+
+  // Derived values
+  const organizations = useMemo(() => memberships.map((m) => m.organization), [memberships]);
+
+  const selectedMembership = useMemo(
+    () => memberships.find((m) => m.organization.id === selectedOrganization?.id),
+    [memberships, selectedOrganization]
+  );
+
+  const selectedOrganizationRole = selectedMembership?.role ?? null;
+  const isOrgAdmin = selectedOrganizationRole === 'OWNER' || selectedOrganizationRole === 'ADMIN';
+  const isOrgOwner = selectedOrganizationRole === 'OWNER';
+
+  const value = useMemo(
+    () => ({
+      organizations,
+      memberships,
+      selectedOrganization,
+      selectedOrganizationRole,
+      isOrgAdmin,
+      isOrgOwner,
+      isLoading: !!user && isLoading,
+      error,
+      selectOrganization,
+      createOrganization,
+      refresh,
+    }),
+    [
+      organizations,
+      memberships,
+      selectedOrganization,
+      selectedOrganizationRole,
+      isOrgAdmin,
+      isOrgOwner,
+      user,
+      isLoading,
+      error,
+      selectOrganization,
+      createOrganization,
+      refresh,
+    ]
+  );
+
+  return <OrganizationsContext.Provider value={value}>{children}</OrganizationsContext.Provider>;
+}
+
+export function useOrganizations() {
+  const context = useContext(OrganizationsContext);
+  if (context === undefined) {
+    throw new Error('useOrganizations must be used within an OrganizationsProvider');
+  }
+  return context;
+}