@c.a.f/infrastructure-react 1.0.0

package/.build/DevTools/index.d.ts

@@ -0,0 +1,3 @@
+export { usePlocDevTools } from "./usePlocDevTools";
+export { useUseCaseDevTools } from "./useUseCaseDevTools";
+export { useCAFDevTools, useTrackPloc, type CAFDevToolsContext } from "./useCAFDevTools";

package/.build/DevTools/index.js

@@ -0,0 +1,3 @@
+export { usePlocDevTools } from "./usePlocDevTools";
+export { useUseCaseDevTools } from "./useUseCaseDevTools";
+export { useCAFDevTools, useTrackPloc } from "./useCAFDevTools";

package/.build/DevTools/useCAFDevTools.d.ts

@@ -0,0 +1,43 @@
+import type { Ploc } from "@c.a.f/core";
+import type { PlocDevTools } from "@c.a.f/devtools";
+import { useUseCaseDevTools } from "./useUseCaseDevTools";
+export interface CAFDevToolsContext {
+    plocs: Map<Ploc<any>, PlocDevTools<any>>;
+    useCases: ReturnType<typeof useUseCaseDevTools>;
+    enabled: boolean;
+    enable: () => void;
+    disable: () => void;
+}
+/**
+ * React hook that provides centralized DevTools access for CAF applications.
+ * Tracks all Plocs and UseCases in your application and exposes them for debugging.
+ *
+ * @param options - Global DevTools options
+ * @returns DevTools context with access to all tracked Plocs and UseCases
+ *
+ * @example
+ * ```tsx
+ * const devTools = useCAFDevTools({ enabled: process.env.NODE_ENV === 'development' });
+ *
+ * // Enable/disable globally
+ * devTools.enable();
+ * devTools.disable();
+ *
+ * // Access tracked Plocs
+ * const plocTools = devTools.plocs.get(myPloc);
+ * if (plocTools) {
+ *   const history = plocTools.getStateHistory();
+ * }
+ * ```
+ */
+export declare function useCAFDevTools(options?: {
+    enabled?: boolean;
+}): CAFDevToolsContext;
+/**
+ * Helper hook to register a Ploc with DevTools.
+ * Use this inside components that use Plocs to automatically track them.
+ *
+ * @param ploc - Ploc instance to track
+ * @param name - Optional name for the Ploc
+ */
+export declare function useTrackPloc<T>(ploc: Ploc<T>, name?: string): void;

package/.build/DevTools/useCAFDevTools.js

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from "react";
+import { usePlocDevTools } from "./usePlocDevTools";
+import { useUseCaseDevTools } from "./useUseCaseDevTools";
+/**
+ * React hook that provides centralized DevTools access for CAF applications.
+ * Tracks all Plocs and UseCases in your application and exposes them for debugging.
+ *
+ * @param options - Global DevTools options
+ * @returns DevTools context with access to all tracked Plocs and UseCases
+ *
+ * @example
+ * ```tsx
+ * const devTools = useCAFDevTools({ enabled: process.env.NODE_ENV === 'development' });
+ *
+ * // Enable/disable globally
+ * devTools.enable();
+ * devTools.disable();
+ *
+ * // Access tracked Plocs
+ * const plocTools = devTools.plocs.get(myPloc);
+ * if (plocTools) {
+ *   const history = plocTools.getStateHistory();
+ * }
+ * ```
+ */
+export function useCAFDevTools(options) {
+    const plocsRef = useRef(new Map());
+    const [enabled, setEnabled] = useState(options?.enabled ?? false);
+    const useCaseDevTools = useUseCaseDevTools();
+    // Expose devtools to React DevTools if available
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            // Expose CAF DevTools to global scope for React DevTools extension
+            window.__CAF_DEVTOOLS__ = {
+                plocs: plocsRef.current,
+                useCases: useCaseDevTools,
+                enabled,
+                enable: () => setEnabled(true),
+                disable: () => setEnabled(false),
+            };
+        }
+        return () => {
+            if (typeof window !== "undefined") {
+                delete window.__CAF_DEVTOOLS__;
+            }
+        };
+    }, [enabled, useCaseDevTools]);
+    return {
+        plocs: plocsRef.current,
+        useCases: useCaseDevTools,
+        enabled,
+        enable: () => setEnabled(true),
+        disable: () => setEnabled(false),
+    };
+}
+/**
+ * Helper hook to register a Ploc with DevTools.
+ * Use this inside components that use Plocs to automatically track them.
+ *
+ * @param ploc - Ploc instance to track
+ * @param name - Optional name for the Ploc
+ */
+export function useTrackPloc(ploc, name) {
+    const devTools = useCAFDevTools();
+    const plocDevTools = usePlocDevTools(ploc, { name, enabled: devTools.enabled });
+    useEffect(() => {
+        if (!devTools.plocs.has(ploc)) {
+            devTools.plocs.set(ploc, plocDevTools);
+        }
+        return () => {
+            devTools.plocs.delete(ploc);
+        };
+    }, [ploc, plocDevTools, devTools]);
+}

package/.build/DevTools/usePlocDevTools.d.ts

@@ -0,0 +1,23 @@
+import type { Ploc } from "@c.a.f/core";
+import { type PlocDevTools, type PlocDevToolsOptions } from "@c.a.f/devtools";
+/**
+ * React hook that provides DevTools for a Ploc instance.
+ * Automatically cleans up on unmount.
+ *
+ * @param ploc - A Ploc instance
+ * @param options - DevTools options
+ * @returns DevTools instance and current state
+ *
+ * @example
+ * ```tsx
+ * const [state, ploc] = usePloc(userPloc);
+ * const devTools = usePlocDevTools(ploc, { name: 'UserPloc', enabled: true });
+ *
+ * // Access state history
+ * const history = devTools.getStateHistory();
+ *
+ * // Time-travel debugging
+ * devTools.jumpToState(2);
+ * ```
+ */
+export declare function usePlocDevTools<T>(ploc: Ploc<T>, options?: PlocDevToolsOptions): PlocDevTools<T>;

package/.build/DevTools/usePlocDevTools.js

@@ -0,0 +1,58 @@
+import { useEffect, useRef } from "react";
+import { createPlocDevTools, } from "@c.a.f/devtools";
+/**
+ * React hook that provides DevTools for a Ploc instance.
+ * Automatically cleans up on unmount.
+ *
+ * @param ploc - A Ploc instance
+ * @param options - DevTools options
+ * @returns DevTools instance and current state
+ *
+ * @example
+ * ```tsx
+ * const [state, ploc] = usePloc(userPloc);
+ * const devTools = usePlocDevTools(ploc, { name: 'UserPloc', enabled: true });
+ *
+ * // Access state history
+ * const history = devTools.getStateHistory();
+ *
+ * // Time-travel debugging
+ * devTools.jumpToState(2);
+ * ```
+ */
+export function usePlocDevTools(ploc, options) {
+    const devToolsRef = useRef(null);
+    const plocRef = useRef(null);
+    // Create adapter wrapper that matches PlocInstance interface
+    // PlocDevTools expects subscribe to return void (not unsubscribe function)
+    const createPlocAdapter = (p) => {
+        return {
+            state: p.state,
+            changeState: (state) => p.changeState(state),
+            subscribe: (listener) => {
+                p.subscribe(listener);
+                // Note: PlocDevTools now handles cleanup internally via MemoryLeakDetector
+            },
+            unsubscribe: (listener) => p.unsubscribe(listener),
+        };
+    };
+    // Recreate devtools if ploc changed
+    if (plocRef.current !== ploc || !devToolsRef.current) {
+        plocRef.current = ploc;
+        if (devToolsRef.current) {
+            devToolsRef.current.cleanup();
+        }
+        const adapter = createPlocAdapter(ploc);
+        devToolsRef.current = createPlocDevTools(adapter, options);
+    }
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (devToolsRef.current) {
+                devToolsRef.current.cleanup();
+                devToolsRef.current = null;
+            }
+        };
+    }, []);
+    return devToolsRef.current;
+}

package/.build/DevTools/useUseCaseDevTools.d.ts

@@ -0,0 +1,18 @@
+import { type UseCaseDevTools, type UseCaseDevToolsOptions } from "@c.a.f/devtools";
+/**
+ * React hook that provides DevTools for UseCase execution tracking.
+ * Creates a singleton DevTools instance that persists across renders.
+ *
+ * @param options - DevTools options
+ * @returns DevTools instance
+ *
+ * @example
+ * ```tsx
+ * const useCaseDevTools = useUseCaseDevTools({ name: 'CreateUser', enabled: true });
+ * const wrappedUseCase = useCaseDevTools.wrap(createUserUseCase);
+ *
+ * // Get execution history
+ * const history = useCaseDevTools.getExecutionHistory();
+ * ```
+ */
+export declare function useUseCaseDevTools(options?: UseCaseDevToolsOptions): UseCaseDevTools;

package/.build/DevTools/useUseCaseDevTools.js

@@ -0,0 +1,25 @@
+import { useRef } from "react";
+import { createUseCaseDevTools, } from "@c.a.f/devtools";
+/**
+ * React hook that provides DevTools for UseCase execution tracking.
+ * Creates a singleton DevTools instance that persists across renders.
+ *
+ * @param options - DevTools options
+ * @returns DevTools instance
+ *
+ * @example
+ * ```tsx
+ * const useCaseDevTools = useUseCaseDevTools({ name: 'CreateUser', enabled: true });
+ * const wrappedUseCase = useCaseDevTools.wrap(createUserUseCase);
+ *
+ * // Get execution history
+ * const history = useCaseDevTools.getExecutionHistory();
+ * ```
+ */
+export function useUseCaseDevTools(options) {
+    const devToolsRef = useRef(null);
+    if (!devToolsRef.current) {
+        devToolsRef.current = createUseCaseDevTools(options);
+    }
+    return devToolsRef.current;
+}

package/.build/ErrorBoundary/CAFErrorBoundary.d.ts

@@ -0,0 +1,36 @@
+import React, { Component, type ReactNode } from "react";
+export interface CAFErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: (error: Error, errorInfo: React.ErrorInfo, resetError: () => void) => ReactNode;
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+interface CAFErrorBoundaryState {
+    error: Error | null;
+    errorInfo: React.ErrorInfo | null;
+}
+/**
+ * Error Boundary component for CAF applications.
+ * Catches errors from Ploc/UseCase execution and component rendering.
+ * Provides error context via React Context and supports custom error UI and recovery.
+ *
+ * @example
+ * ```tsx
+ * <CAFErrorBoundary fallback={(error, errorInfo, reset) => (
+ *   <div>
+ *     <h2>Something went wrong</h2>
+ *     <p>{error.message}</p>
+ *     <button onClick={reset}>Try again</button>
+ *   </div>
+ * )}>
+ *   <App />
+ * </CAFErrorBoundary>
+ * ```
+ */
+export declare class CAFErrorBoundary extends Component<CAFErrorBoundaryProps, CAFErrorBoundaryState> {
+    constructor(props: CAFErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<CAFErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    resetError: () => void;
+    render(): ReactNode;
+}
+export {};

package/.build/ErrorBoundary/CAFErrorBoundary.js

@@ -0,0 +1,99 @@
+import React, { Component } from "react";
+import { CAFErrorContext } from "./ErrorContext";
+/**
+ * Error Boundary component for CAF applications.
+ * Catches errors from Ploc/UseCase execution and component rendering.
+ * Provides error context via React Context and supports custom error UI and recovery.
+ *
+ * @example
+ * ```tsx
+ * <CAFErrorBoundary fallback={(error, errorInfo, reset) => (
+ *   <div>
+ *     <h2>Something went wrong</h2>
+ *     <p>{error.message}</p>
+ *     <button onClick={reset}>Try again</button>
+ *   </div>
+ * )}>
+ *   <App />
+ * </CAFErrorBoundary>
+ * ```
+ */
+export class CAFErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: null,
+            errorInfo: null,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return {
+            error,
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        this.setState({
+            error,
+            errorInfo,
+        });
+        // Call optional error handler
+        if (this.props.onError) {
+            this.props.onError(error, errorInfo);
+        }
+    }
+    resetError = () => {
+        this.setState({
+            error: null,
+            errorInfo: null,
+        });
+    };
+    render() {
+        if (this.state.error) {
+            const contextValue = {
+                error: this.state.error,
+                errorInfo: this.state.errorInfo,
+                resetError: this.resetError,
+            };
+            // Use custom fallback if provided
+            if (this.props.fallback) {
+                return (React.createElement(CAFErrorContext.Provider, { value: contextValue }, this.props.fallback(this.state.error, this.state.errorInfo, this.resetError)));
+            }
+            // Default error UI
+            return (React.createElement(CAFErrorContext.Provider, { value: contextValue },
+                React.createElement("div", { style: {
+                        padding: "2rem",
+                        margin: "1rem",
+                        border: "1px solid #ff6b6b",
+                        borderRadius: "8px",
+                        backgroundColor: "#fff5f5",
+                    } },
+                    React.createElement("h2", { style: { color: "#c92a2a", marginTop: 0 } }, "Something went wrong"),
+                    React.createElement("details", { style: { marginBottom: "1rem" } },
+                        React.createElement("summary", { style: { cursor: "pointer", fontWeight: "bold" } }, "Error details"),
+                        React.createElement("pre", { style: {
+                                marginTop: "0.5rem",
+                                padding: "1rem",
+                                backgroundColor: "#fff",
+                                borderRadius: "4px",
+                                overflow: "auto",
+                                fontSize: "0.875rem",
+                            } },
+                            this.state.error.toString(),
+                            this.state.errorInfo?.componentStack)),
+                    React.createElement("button", { onClick: this.resetError, style: {
+                            padding: "0.5rem 1rem",
+                            backgroundColor: "#667eea",
+                            color: "white",
+                            border: "none",
+                            borderRadius: "4px",
+                            cursor: "pointer",
+                            fontSize: "1rem",
+                        } }, "Try again"))));
+        }
+        return (React.createElement(CAFErrorContext.Provider, { value: {
+                error: null,
+                errorInfo: null,
+                resetError: this.resetError,
+            } }, this.props.children));
+    }
+}

package/.build/ErrorBoundary/ErrorContext.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+/**
+ * Context for CAF error boundary state.
+ * Provides access to the current error and recovery function.
+ */
+export interface CAFErrorContextValue {
+    error: Error | null;
+    errorInfo: React.ErrorInfo | null;
+    resetError: () => void;
+}
+export declare const CAFErrorContext: import("react").Context<CAFErrorContextValue | null>;
+/**
+ * Hook to access CAF error boundary context.
+ * Returns null if used outside of CAFErrorBoundary.
+ *
+ * @returns Error context value or null
+ */
+export declare function useCAFError(): CAFErrorContextValue | null;

package/.build/ErrorBoundary/ErrorContext.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+export const CAFErrorContext = createContext(null);
+/**
+ * Hook to access CAF error boundary context.
+ * Returns null if used outside of CAFErrorBoundary.
+ *
+ * @returns Error context value or null
+ */
+export function useCAFError() {
+    return useContext(CAFErrorContext);
+}

package/.build/ErrorBoundary/index.d.ts

@@ -0,0 +1,2 @@
+export { CAFErrorBoundary, type CAFErrorBoundaryProps } from "./CAFErrorBoundary";
+export { CAFErrorContext, useCAFError, type CAFErrorContextValue } from "./ErrorContext";

package/.build/ErrorBoundary/index.js

@@ -0,0 +1,2 @@
+export { CAFErrorBoundary } from "./CAFErrorBoundary";
+export { CAFErrorContext, useCAFError } from "./ErrorContext";

package/.build/Ploc/index.d.ts

@@ -0,0 +1 @@
+export { usePloc } from "./usePloc";

package/.build/Ploc/index.js

@@ -0,0 +1 @@
+export { usePloc } from "./usePloc";

package/.build/Ploc/usePloc.d.ts

@@ -0,0 +1,15 @@
+import type { Ploc } from "@c.a.f/core";
+/**
+ * React hook that subscribes to a Ploc and returns the current state and the Ploc instance.
+ * Handles subscription on mount, syncs when the ploc reference changes, and unsubscribes on unmount.
+ *
+ * @param ploc - A Ploc instance (from @c.a.f/core)
+ * @returns A tuple of [currentState, ploc]
+ *
+ * @example
+ * ```tsx
+ * const [state, userPloc] = usePloc(userPloc);
+ * return <span>{state.name}</span>;
+ * ```
+ */
+export declare function usePloc<T>(ploc: Ploc<T>): [T, Ploc<T>];

package/.build/Ploc/usePloc.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+/**
+ * React hook that subscribes to a Ploc and returns the current state and the Ploc instance.
+ * Handles subscription on mount, syncs when the ploc reference changes, and unsubscribes on unmount.
+ *
+ * @param ploc - A Ploc instance (from @c.a.f/core)
+ * @returns A tuple of [currentState, ploc]
+ *
+ * @example
+ * ```tsx
+ * const [state, userPloc] = usePloc(userPloc);
+ * return <span>{state.name}</span>;
+ * ```
+ */
+export function usePloc(ploc) {
+    const [state, setState] = useState(() => ploc.state);
+    useEffect(() => {
+        setState(ploc.state);
+        const listener = (newState) => setState(newState);
+        ploc.subscribe(listener);
+        return () => {
+            ploc.unsubscribe(listener);
+        };
+    }, [ploc]);
+    return [state, ploc];
+}

package/.build/RouteManager/RouteHandler.d.ts

@@ -0,0 +1,12 @@
+import { RouteRepository } from "@c.a.f/core";
+/**
+ * @deprecated This class violates React's rules of hooks by calling hooks in a constructor.
+ * Use `useRouteRepository()` hook instead, which properly calls hooks at the hook level.
+ */
+export declare class RouteHandler implements RouteRepository {
+    private navigate;
+    constructor();
+    currentRoute: string;
+    change(route: string): void;
+    watchCurrentRoute(): void;
+}

package/.build/RouteManager/RouteHandler.js

@@ -0,0 +1,19 @@
+import { useNavigate, useLocation } from "react-router-dom";
+/**
+ * @deprecated This class violates React's rules of hooks by calling hooks in a constructor.
+ * Use `useRouteRepository()` hook instead, which properly calls hooks at the hook level.
+ */
+export class RouteHandler {
+    navigate = useNavigate();
+    constructor() {
+        this.watchCurrentRoute();
+    }
+    currentRoute = '';
+    change(route) {
+        this.navigate(route);
+    }
+    watchCurrentRoute() {
+        const { pathname } = useLocation();
+        this.currentRoute = pathname;
+    }
+}

package/.build/RouteManager/RouteManger.d.ts

@@ -0,0 +1,10 @@
+import { RouteManager, RouteManagerAuthOptions } from "@c.a.f/core";
+/**
+ * @deprecated This class creates RouteHandler in constructor, which violates React's rules of hooks.
+ * Use `useRouteManager()` hook instead, which properly calls React hooks at the hook level.
+ */
+export declare class RouterService {
+    private routeManager;
+    constructor(authOptions?: RouteManagerAuthOptions);
+    getRouteManager(): RouteManager;
+}

package/.build/RouteManager/RouteManger.js

@@ -0,0 +1,16 @@
+import { RouteManager } from "@c.a.f/core";
+import { RouteHandler } from "./RouteHandler";
+/**
+ * @deprecated This class creates RouteHandler in constructor, which violates React's rules of hooks.
+ * Use `useRouteManager()` hook instead, which properly calls React hooks at the hook level.
+ */
+export class RouterService {
+    routeManager;
+    constructor(authOptions) {
+        const routeHandler = new RouteHandler();
+        this.routeManager = new RouteManager(routeHandler, authOptions);
+    }
+    getRouteManager() {
+        return this.routeManager;
+    }
+}

package/.build/RouteManager/index.d.ts

@@ -0,0 +1 @@
+export * from './RouteManger';

package/.build/RouteManager/index.js

@@ -0,0 +1 @@
+export * from './RouteManger';

package/.build/RouteManager/useRouteManager.d.ts

@@ -0,0 +1,8 @@
+import { RouteManager, RouteManagerAuthOptions } from "@c.a.f/core";
+/**
+ * React hook that provides a RouteManager from @c.a.f/core.
+ * Uses useRouteRepository to get the RouteRepository implementation.
+ *
+ * @param authOptions - Optional authentication configuration. If not provided, RouteManager will work without auth checks.
+ */
+export declare const useRouteManager: (authOptions?: RouteManagerAuthOptions) => RouteManager;

package/.build/RouteManager/useRouteManager.js

@@ -0,0 +1,15 @@
+import { RouteManager } from "@c.a.f/core";
+import { useMemo } from "react";
+import { useRouteRepository } from "./useRouteRepository";
+/**
+ * React hook that provides a RouteManager from @c.a.f/core.
+ * Uses useRouteRepository to get the RouteRepository implementation.
+ *
+ * @param authOptions - Optional authentication configuration. If not provided, RouteManager will work without auth checks.
+ */
+export const useRouteManager = (authOptions) => {
+    const routeRepository = useRouteRepository();
+    return useMemo(() => {
+        return new RouteManager(routeRepository, authOptions);
+    }, [routeRepository, authOptions]);
+};

package/.build/RouteManager/useRouteRepository.d.ts

@@ -0,0 +1,6 @@
+import { RouteRepository } from "@c.a.f/core";
+/**
+ * React hook that provides a RouteRepository implementation.
+ * Calls React Router hooks at the hook level (not in a constructor).
+ */
+export declare const useRouteRepository: () => RouteRepository;

package/.build/RouteManager/useRouteRepository.js

@@ -0,0 +1,20 @@
+import { useNavigate, useLocation } from "react-router-dom";
+import { useMemo } from "react";
+/**
+ * React hook that provides a RouteRepository implementation.
+ * Calls React Router hooks at the hook level (not in a constructor).
+ */
+export const useRouteRepository = () => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    return useMemo(() => {
+        return {
+            get currentRoute() {
+                return location.pathname;
+            },
+            change(route) {
+                navigate(route);
+            },
+        };
+    }, [navigate, location.pathname]);
+};

package/.build/UseCase/index.d.ts

@@ -0,0 +1 @@
+export { useUseCase } from "./useUseCase";

package/.build/UseCase/index.js

@@ -0,0 +1 @@
+export { useUseCase } from "./useUseCase";

package/.build/UseCase/useUseCase.d.ts

@@ -0,0 +1,26 @@
+import type { UseCase } from "@c.a.f/core";
+/**
+ * React hook that wraps a UseCase execution with loading/error/data state management.
+ * Handles RequestResult subscriptions automatically and provides a clean API for executing use cases.
+ *
+ * @param useCase - A UseCase instance (from @c.a.f/core)
+ * @returns An object with execute function, loading state, error state, and data
+ *
+ * @example
+ * ```tsx
+ * const { execute, loading, error, data } = useUseCase(createUserUseCase);
+ *
+ * const handleCreate = async () => {
+ *   const result = await execute({ name: 'John', email: 'john@example.com' });
+ *   if (result) {
+ *     console.log('User created:', result);
+ *   }
+ * };
+ * ```
+ */
+export declare function useUseCase<TArgs extends any[], TResult>(useCase: UseCase<TArgs, TResult>): {
+    execute: (...args: TArgs) => Promise<TResult | null>;
+    loading: boolean;
+    error: Error | null;
+    data: TResult | null;
+};

package/.build/UseCase/useUseCase.js

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+/**
+ * React hook that wraps a UseCase execution with loading/error/data state management.
+ * Handles RequestResult subscriptions automatically and provides a clean API for executing use cases.
+ *
+ * @param useCase - A UseCase instance (from @c.a.f/core)
+ * @returns An object with execute function, loading state, error state, and data
+ *
+ * @example
+ * ```tsx
+ * const { execute, loading, error, data } = useUseCase(createUserUseCase);
+ *
+ * const handleCreate = async () => {
+ *   const result = await execute({ name: 'John', email: 'john@example.com' });
+ *   if (result) {
+ *     console.log('User created:', result);
+ *   }
+ * };
+ * ```
+ */
+export function useUseCase(useCase) {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [data, setData] = useState(null);
+    const requestResultRef = useRef(null);
+    const listenersRef = useRef(null);
+    // Cleanup subscriptions on unmount
+    useEffect(() => {
+        return () => {
+            const currentResult = requestResultRef.current;
+            const listeners = listenersRef.current;
+            if (currentResult && listeners) {
+                currentResult.loading.unsubscribe(listeners.loading);
+                currentResult.data.unsubscribe(listeners.data);
+                currentResult.error.unsubscribe(listeners.error);
+            }
+        };
+    }, []);
+    const execute = useCallback(async (...args) => {
+        // Unsubscribe from previous result if exists
+        const previousResult = requestResultRef.current;
+        const previousListeners = listenersRef.current;
+        if (previousResult && previousListeners) {
+            previousResult.loading.unsubscribe(previousListeners.loading);
+            previousResult.data.unsubscribe(previousListeners.data);
+            previousResult.error.unsubscribe(previousListeners.error);
+        }
+        try {
+            const result = await useCase.execute(...args);
+            requestResultRef.current = result;
+            // Create listeners for the new result
+            const loadingListener = (value) => setLoading(value);
+            const dataListener = (value) => setData(value);
+            const errorListener = (value) => setError(value);
+            listenersRef.current = {
+                loading: loadingListener,
+                data: dataListener,
+                error: errorListener,
+            };
+            // Subscribe to the new result
+            result.loading.subscribe(loadingListener);
+            result.data.subscribe(dataListener);
+            result.error.subscribe(errorListener);
+            // Initialize state from result
+            setLoading(result.loading.value);
+            setData(result.data.value);
+            setError(result.error.value);
+            return result.data.value;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            setLoading(false);
+            return null;
+        }
+    }, [useCase]);
+    return {
+        execute,
+        loading,
+        error,
+        data,
+    };
+}

package/.build/index.d.ts

@@ -0,0 +1,7 @@
+export * from './RouteManager';
+export * from './RouteManager/useRouteRepository';
+export * from './RouteManager/useRouteManager';
+export * from './Ploc';
+export * from './UseCase';
+export * from './ErrorBoundary';
+export * from './DevTools';

package/.build/index.js

@@ -0,0 +1,7 @@
+export * from './RouteManager';
+export * from './RouteManager/useRouteRepository';
+export * from './RouteManager/useRouteManager';
+export * from './Ploc';
+export * from './UseCase';
+export * from './ErrorBoundary';
+export * from './DevTools';

package/.build/vitest.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/.build/vitest.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from "vitest/config";
+import { fileURLToPath } from "url";
+import { dirname, resolve } from "path";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+export default defineConfig({
+    test: {
+        environment: "happy-dom",
+        include: ["**/*.spec.ts", "**/*.spec.tsx"],
+        setupFiles: [resolve(__dirname, "./vitest.setup.ts")],
+        globals: true,
+    },
+    resolve: {
+        alias: {
+            // Force resolution from workspace root node_modules
+            "@testing-library/dom": resolve(__dirname, "../../../node_modules/@testing-library/dom"),
+            // Fix ES module resolution for @c.a.f/core - resolve to the actual built file
+            "@c.a.f/core": resolve(__dirname, "../../../node_modules/@c.a.f/core/.build/src/index.js"),
+        },
+        conditions: ["import", "module", "default"],
+    },
+});

package/.build/vitest.setup.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

package/.build/vitest.setup.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

package/README.md

@@ -0,0 +1,319 @@
+# @c.a.f/infrastructure-react
+
+React-specific infrastructure adapters for CAF.
+
+## Installation
+
+```bash
+npm install @c.a.f/infrastructure-react react-router-dom
+```
+
+## Usage
+
+### usePloc
+
+Hook that subscribes to a Ploc and returns the current state and the Ploc instance. Subscribes on mount, syncs when the ploc reference changes, and unsubscribes on unmount.
+
+```typescript
+import { usePloc } from '@c.a.f/infrastructure-react';
+
+function UserProfile({ userPloc }: { userPloc: UserPloc }) {
+  const [state, ploc] = usePloc(userPloc);
+
+  return (
+    <div>
+      <span>{state.name}</span>
+      <button onClick={() => ploc.loadUser()}>Refresh</button>
+    </div>
+  );
+}
+```
+
+The hook returns a tuple `[state, ploc]`: the current state (re-renders when the Ploc updates) and the same Ploc instance so you can call methods on it. The Ploc is typically provided via props, context, or created with `useMemo` for the component tree.
+
+### useUseCase
+
+Hook that wraps a UseCase execution with loading/error/data state management. Handles `RequestResult` subscriptions automatically and provides a clean API for executing use cases.
+
+```typescript
+import { useUseCase } from '@c.a.f/infrastructure-react';
+import { CreateUser } from './application/User/Commands/CreateUser';
+
+function CreateUserForm({ createUserUseCase }: { createUserUseCase: CreateUser }) {
+  const { execute, loading, error, data } = useUseCase(createUserUseCase);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    const result = await execute({
+      name: formData.get('name') as string,
+      email: formData.get('email') as string,
+    });
+    
+    if (result) {
+      console.log('User created:', result);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {loading && <p>Creating user...</p>}
+      {error && <p>Error: {error.message}</p>}
+      {data && <p>User created: {data.name}</p>}
+      {/* form fields */}
+    </form>
+  );
+}
+```
+
+The hook automatically subscribes to the `RequestResult`'s `loading`, `data`, and `error` pulses, so your component re-renders when these values change. The `execute` function returns the data value directly (or `null` on error), making it easy to handle results.
+
+### CAFErrorBoundary
+
+Error Boundary component that catches errors from Ploc/UseCase execution and component rendering. Provides error context via React Context and supports custom error UI and recovery.
+
+```typescript
+import { CAFErrorBoundary, useCAFError } from '@c.a.f/infrastructure-react';
+
+function App() {
+  return (
+    <CAFErrorBoundary
+      fallback={(error, errorInfo, resetError) => (
+        <div>
+          <h2>Oops! Something went wrong</h2>
+          <p>{error.message}</p>
+          <button onClick={resetError}>Try again</button>
+        </div>
+      )}
+      onError={(error, errorInfo) => {
+        // Log to error reporting service
+        console.error('Error caught:', error, errorInfo);
+      }}
+    >
+      <YourApp />
+    </CAFErrorBoundary>
+  );
+}
+```
+
+Access error context from anywhere within the boundary:
+
+```typescript
+import { useCAFError } from '@c.a.f/infrastructure-react';
+
+function ErrorDisplay() {
+  const errorContext = useCAFError();
+  
+  if (errorContext?.error) {
+    return (
+      <div>
+        <p>Error: {errorContext.error.message}</p>
+        <button onClick={errorContext.resetError}>Reset</button>
+      </div>
+    );
+  }
+  
+  return null;
+}
+```
+
+The error boundary catches:
+- Errors during component rendering
+- Errors in lifecycle methods
+- Errors in constructors
+- Errors from Ploc/UseCase execution (when not caught locally)
+
+### DevTools Integration
+
+React hooks for debugging and inspecting CAF applications. Integrates with `@c.a.f/devtools` and exposes data for React DevTools.
+
+#### usePlocDevTools
+
+Hook that provides DevTools for a Ploc instance. Enables state tracking, time-travel debugging, state history, and memory leak detection.
+
+```typescript
+import { usePloc, usePlocDevTools } from '@c.a.f/infrastructure-react';
+import { createMemoryLeakDetector } from '@c.a.f/devtools';
+
+function UserProfile({ userPloc }: { userPloc: UserPloc }) {
+  const [state, ploc] = usePloc(userPloc);
+  
+  // Optional: Create memory leak detector
+  const leakDetector = createMemoryLeakDetector({
+    enabled: process.env.NODE_ENV === 'development',
+    warnThreshold: 10000, // Warn after 10 seconds
+  });
+  
+  const devTools = usePlocDevTools(ploc, { 
+    name: 'UserPloc', 
+    enabled: process.env.NODE_ENV === 'development',
+    enableLeakDetection: true,
+    leakDetector, // Optional: provide custom detector
+  });
+
+  // Access state history
+  const history = devTools.getStateHistory();
+  
+  // Time-travel debugging
+  const handleUndo = () => {
+    devTools.previousState();
+  };
+
+  return (
+    <div>
+      <span>{state.name}</span>
+      {process.env.NODE_ENV === 'development' && (
+        <button onClick={handleUndo}>Undo</button>
+      )}
+    </div>
+  );
+}
+```
+
+#### useUseCaseDevTools
+
+Hook that provides DevTools for UseCase execution tracking. Tracks execution history, timing, errors, and performance profiling.
+
+```typescript
+import { useUseCaseDevTools } from '@c.a.f/infrastructure-react';
+import { createPerformanceProfiler } from '@c.a.f/devtools';
+import { CreateUser } from './application/User/Commands/CreateUser';
+
+function CreateUserForm({ createUserUseCase }: { createUserUseCase: CreateUser }) {
+  // Optional: Create performance profiler
+  const profiler = createPerformanceProfiler({
+    enabled: process.env.NODE_ENV === 'development',
+    trackSlowOperations: true,
+    slowThreshold: 100, // ms
+  });
+  
+  const useCaseDevTools = useUseCaseDevTools({ 
+    name: 'CreateUser',
+    enabled: true,
+    logExecutionTime: true,
+    profiler, // Optional: provide custom profiler
+  });
+  
+  // Wrap use case with DevTools tracking
+  const trackedUseCase = useCaseDevTools.wrap(createUserUseCase);
+  
+  // Get execution statistics
+  const stats = useCaseDevTools.getStatistics();
+  console.log('Total executions:', stats.totalExecutions);
+  console.log('Average duration:', stats.averageDuration, 'ms');
+  
+  // Use the tracked use case...
+}
+```
+
+#### useCAFDevTools
+
+Main hook that provides centralized DevTools access for your entire application. Tracks all Plocs and UseCases.
+
+```typescript
+import { useCAFDevTools, useTrackPloc } from '@c.a.f/infrastructure-react';
+
+function App() {
+  const devTools = useCAFDevTools({ 
+    enabled: process.env.NODE_ENV === 'development' 
+  });
+
+  // Enable/disable globally
+  const handleToggleDevTools = () => {
+    if (devTools.enabled) {
+      devTools.disable();
+    } else {
+      devTools.enable();
+    }
+  };
+
+  return (
+    <div>
+      {/* Your app */}
+      {process.env.NODE_ENV === 'development' && (
+        <button onClick={handleToggleDevTools}>
+          {devTools.enabled ? 'Disable' : 'Enable'} DevTools
+        </button>
+      )}
+    </div>
+  );
+}
+
+// In components using Plocs, automatically track them:
+function UserComponent({ userPloc }: { userPloc: UserPloc }) {
+  useTrackPloc(userPloc, 'UserPloc'); // Automatically registered with DevTools
+  const [state] = usePloc(userPloc);
+  // ...
+}
+```
+
+The DevTools data is also exposed to `window.__CAF_DEVTOOLS__` for React DevTools extension integration.
+
+### useRouteManager
+
+Hook that provides a `RouteManager` from `@c.a.f/core`:
+
+```typescript
+import { useRouteManager } from '@c.a.f/infrastructure-react';
+import { RouteManagerAuthOptions } from '@c.a.f/core';
+
+function MyComponent() {
+  // Optional: provide auth configuration
+  const authOptions: RouteManagerAuthOptions = {
+    loginPath: '/login',
+    isLoggedIn: () => !!localStorage.getItem('token'),
+  };
+  
+  const routeManager = useRouteManager(authOptions);
+  
+  const handleLogin = async () => {
+    // ... login logic
+    routeManager.changeRoute('/dashboard');
+  };
+  
+  return <button onClick={handleLogin}>Login</button>;
+}
+```
+
+### useRouteRepository
+
+Hook that provides a `RouteRepository` implementation:
+
+```typescript
+import { useRouteRepository } from '@c.a.f/infrastructure-react';
+import { RouteManager } from '@c.a.f/core';
+
+function MyComponent() {
+  const routeRepository = useRouteRepository();
+  const routeManager = new RouteManager(routeRepository);
+  
+  // Use routeManager...
+}
+```
+
+## Exports
+
+- `usePloc` — Hook that subscribes to a Ploc and returns `[state, ploc]`; handles subscribe/unsubscribe and cleanup
+- `useUseCase` — Hook that wraps UseCase execution with loading/error/data state management; handles RequestResult subscriptions automatically
+- `CAFErrorBoundary` — Error Boundary component that catches errors from Ploc/UseCase execution; provides error context via React Context
+- `useCAFError` — Hook to access error context from CAFErrorBoundary
+- `usePlocDevTools` — Hook that provides DevTools for a Ploc instance; enables state tracking and time-travel debugging
+- `useUseCaseDevTools` — Hook that provides DevTools for UseCase execution tracking
+- `useCAFDevTools` — Main hook that provides centralized DevTools access; tracks all Plocs and UseCases
+- `useTrackPloc` — Helper hook to automatically register a Ploc with DevTools
+- `useRouteManager` — Hook returning core `RouteManager` with React Router integration
+- `useRouteRepository` — Hook returning `RouteRepository` implementation
+
+## Dependencies
+
+- `@c.a.f/core` — Core primitives
+- `@c.a.f/devtools` — DevTools utilities (for debugging)
+- `react-router-dom` — React Router
+
+## Peer Dependencies
+
+- `react` >= 16.8.0
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@c.a.f/infrastructure-react",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "Clean Architecture Frontend (CAF) — React adapters: usePloc, useUseCase, CAFErrorBoundary, DevTools, useRouteManager, useRouteRepository.",
+  "keywords": [
+    "clean-architecture-frontend",
+    "clean-architecture",
+    "caf",
+    "infrastructure",
+    "react",
+    "routing",
+    "hooks",
+    "ploc",
+    "state-management",
+    "devtools",
+    "debugging"
+  ],
+  "author": "ali aslani <aliaslani.mm@gmail.com>",
+  "license": "MIT",
+  "repository": "https://github.com/ialiaslani/caf.git",
+  "main": "./.build/index.js",
+  "module": "./.build/index.js",
+  "types": "./.build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./.build/index.d.ts",
+      "import": "./.build/index.js",
+      "default": "./.build/index.js"
+    }
+  },
+  "files": [
+    ".build"
+  ],
+  "scripts": {
+    "build": "tsc --build",
+    "start": "tsc --watch",
+    "prepublishOnly": "npm run build",
+    "test": "node_modules/.bin/vitest run",
+    "test:watch": "node_modules/.bin/vitest"
+  },
+  "dependencies": {
+    "@c.a.f/core": "1.0.0",
+    "@c.a.f/devtools": "1.0.0",
+    "react-router-dom": "^6.23.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^16.0.0",
+    "happy-dom": "^15.11.7",
+    "vitest": "^2.1.0"
+  }
+}