Estado del Cliente Moderno: Zustand (Slices) y Átomos de Jotai

// Topología Zustand: Store Centralizado + Selector de Proyección
const userName = useRootStore((state) => state.auth.user.name);

// Topología Jotai: Grafo Atómico de Dependencias
const [cartItems] = useAtom(cartItemsAtom); // Nodo raíz primitivo
const [totalPrice] = useAtom(totalPriceAtom); // Nodo computado derivado y memoizado automáticamente

import { StateCreator } from 'zustand';
import { RootStore } from '../rootStore';

export interface UserSession {
  readonly id: string;
  readonly email: string;
  readonly role: 'admin' | 'member' | 'guest';
}

export interface AuthSlice {
  session: UserSession | null;
  isAuthenticated: boolean;
  setSession: (session: UserSession | null) => void;
  logout: () => void;
}

export const createAuthSlice: StateCreator<
  RootStore,
  [['zustand/devtools', never]],
  [],
  AuthSlice
> = (set) => ({
  session: null,
  isAuthenticated: false,
  setSession: (session) =>
    set(
      { session, isAuthenticated: Boolean(session) },
      false,
      'auth/setSession'
    ),
  logout: () =>
    set(
      { session: null, isAuthenticated: false },
      false,
      'auth/logout'
    ),
});

import { StateCreator } from 'zustand';
import { RootStore } from '../rootStore';

export type ThemeMode = 'dark' | 'light' | 'system';

export interface UISlice {
  theme: ThemeMode;
  sidebarOpen: boolean;
  toggleSidebar: () => void;
  setTheme: (theme: ThemeMode) => void;
}

export const createUISlice: StateCreator<
  RootStore,
  [['zustand/devtools', never]],
  [],
  UISlice
> = (set) => ({
  theme: 'dark',
  sidebarOpen: true,
  toggleSidebar: () =>
    set(
      (state) => ({ sidebarOpen: !state.sidebarOpen }),
      false,
      'ui/toggleSidebar'
    ),
  setTheme: (theme) =>
    set({ theme }, false, 'ui/setTheme'),
});

import { create } from 'zustand';
import { devtools, subscribeWithSelector } from 'zustand/middleware';
import { AuthSlice, createAuthSlice } from './slices/authSlice';
import { UISlice, createUISlice } from './slices/uiSlice';

export type RootStore = AuthSlice & UISlice;

export const useRootStore = create<RootStore>()(
  devtools(
    subscribeWithSelector((...args) => ({
      ...createAuthSlice(...args),
      ...createUISlice(...args),
    })),
    { name: 'AgenticLab_GlobalStore', enabled: process.env.NODE_ENV !== 'production' }
  )
);

// ❌ ANTIPATRÓN: ¡Nueva referencia de objeto generada en cada tic del almacén!
const { session, theme } = useRootStore((state) => ({
  session: state.session,
  theme: state.theme,
}));

// ✅ PATRÓN DE PRODUCCIÓN: useShallow coteja las propiedades por valor superficial
import { useShallow } from 'zustand/react/shallow';

const { session, theme } = useRootStore(
  useShallow((state) => ({
    session: state.session,
    theme: state.theme,
  }))
);

import { useEffect, useRef } from 'react';
import { useRootStore } from '../store/rootStore';

export function CursorTracker() {
  const dotRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Suscripción directa al store eludiendo el ciclo de React Reconciliation
    const unsubscribe = useRootStore.subscribe(
      (state) => state.sidebarOpen,
      (isOpen) => {
        if (dotRef.current) {
          dotRef.current.style.transform = isOpen
            ? 'translateX(260px)'
            : 'translateX(0px)';
        }
      },
      { fireImmediately: true }
    );

    return unsubscribe;
  }, []);

  return (
    <div
      ref={dotRef}
      className="fixed bottom-4 left-4 w-4 h-4 rounded-full bg-accent-cyan transition-transform duration-200 pointer-events-none"
    />
  );
}

import { atom } from 'jotai';
import { atomWithStorage } from 'jotai/utils';

export interface CartItem {
  readonly id: string;
  readonly title: string;
  readonly unitPrice: number;
  readonly quantity: number;
}

// 1. Átomo primitivo persistente (LocalStorage con valor seguro para SSR)
export const cartItemsAtom = atomWithStorage<CartItem[]>(
  'agenticlab_cart',
  [],
  undefined,
  { getOnInit: true }
);

// 2. Átomo primitivo para código promocional
export const promoCodeAtom = atom<string>('');

// 3. Átomo derivado de solo lectura para subtotal (Cálculo puro)
export const subtotalAtom = atom<number>((get) => {
  const items = get(cartItemsAtom);
  return items.reduce((sum, item) => sum + item.unitPrice * item.quantity, 0);
});

// 4. Átomo derivado asíncrono para descuento (Compatible con React 19 Suspense)
export const discountAtom = atom<Promise<number>>(async (get) => {
  const promo = get(promoCodeAtom).trim().toUpperCase();
  const subtotal = get(subtotalAtom);

  if (!promo || subtotal === 0) return 0;

  const response = await fetch(`/api/discount?code=${encodeURIComponent(promo)}`);
  if (!response.ok) return 0;
  
  const data = (await response.json()) as { percentage: number };
  return (subtotal * data.percentage) / 100;
});

// 5. Átomo derivado de lectura/escritura para gestionar mutaciones del carrito
export const cartActionsAtom = atom(
  null,
  (get, set, action: { type: 'ADD'; item: CartItem } | { type: 'REMOVE'; id: string }) => {
    const currentItems = get(cartItemsAtom);
    if (action.type === 'ADD') {
      const existingIndex = currentItems.findIndex((i) => i.id === action.item.id);
      if (existingIndex > -1) {
        const next = [...currentItems];
        next[existingIndex] = {
          ...next[existingIndex],
          quantity: next[existingIndex].quantity + action.item.quantity,
        };
        set(cartItemsAtom, next);
      } else {
        set(cartItemsAtom, [...currentItems, action.item]);
      }
    } else if (action.type === 'REMOVE') {
      set(cartItemsAtom, currentItems.filter((i) => i.id !== action.id));
    }
  }
);