import { Component, type ReactNode } from "react";
import { type ClientErrorBoundaryFallbackProps, type LoaderDefinition, type LoaderFn, type ResolvedSegment } from "./types";
/**
 * Outlet component - renders child content in layouts
 *
 * If the current segment defines a loading component, the outlet content
 * is wrapped in Suspense with the loading component as fallback.
 * This means during navigation/streaming, React's Suspense will automatically
 * show the loading skeleton until the content is ready.
 *
 * When a name prop is provided (e.g., "@modal"), renders content from
 * the parallel segment with that slot name instead of the default content.
 * This is used for parallel routes and intercepting routes.
 *
 * @param name - Optional slot name for parallel/intercept content (must start with @)
 *
 * @example
 * ```tsx
 * function BlogLayout() {
 *   return (
 *     <div>
 *       <h1>Blog</h1>
 *       <Outlet />
 *     </div>
 *   );
 * }
 *
 * // With named slot for modal/parallel content:
 * function KanbanLayout() {
 *   return (
 *     <div>
 *       <KanbanBoard />
 *       <Outlet name="@modal" />
 *       <Outlet />
 *     </div>
 *   );
 * }
 * ```
 */
export declare function Outlet({ name }?: {
    name?: `@${string}`;
}): ReactNode;
/**
 * ParallelOutlet component - renders content for a named parallel slot
 *
 * If the parallel segment defines a loading component, the content
 * is wrapped in Suspense with the loading component as fallback.
 * This enables streaming and navigation loading states for parallels.
 *
 * @param name - The slot name (must start with @, e.g., "@modal", "@sidebar")
 *
 * @example
 * ```tsx
 * function DashboardLayout() {
 *   return (
 *     <div>
 *       <h1>Dashboard</h1>
 *       <ParallelOutlet name="@sidebar" />
 *       <ParallelOutlet name="@modal" />
 *     </div>
 *   );
 * }
 * ```
 */
export declare function ParallelOutlet({ name }: {
    name: `@${string}`;
}): ReactNode;
/**
 * Provider for outlet content - used internally by renderSegments
 *
 * Stores a reference to parent context so useLoader can walk up the chain
 * to find loader data from parent layouts. If this segment defines a loading
 * component, Outlet will wrap content with Suspense using that as fallback.
 */
export declare function OutletProvider({ content, parallel, segment, loaderData, children, }: {
    content: ReactNode;
    parallel?: ResolvedSegment[];
    segment?: ResolvedSegment;
    loaderData?: Record<string, any>;
    children: ReactNode;
}): ReactNode;
/**
 * Hook to access outlet content programmatically
 *
 * Alternative to using <Outlet /> component. Useful when you need
 * direct access to the outlet content in your logic.
 *
 * @example
 * ```tsx
 * function BlogLayout() {
 *   const outlet = useOutlet();
 *   return <div><h1>Blog</h1>{outlet}</div>;
 * }
 * ```
 */
export declare function useOutlet(): ReactNode;
export { useLoader, useFetchLoader, type LoadFunction, type UseLoaderResult, type UseFetchLoaderResult, type UseLoaderOptions, } from "./use-loader.js";
/**
 * Hook to access all loader data in the current context
 *
 * Returns a record of all loader data available in the current outlet context
 * and all parent contexts. Useful for debugging or when you need access to
 * multiple loaders.
 *
 * @returns Record of loader name to data, or empty object if no loaders
 *
 * @example
 * ```tsx
 * "use client";
 * import { useLoaderData } from "rsc-router/client";
 *
 * export function DebugPanel() {
 *   const loaderData = useLoaderData();
 *   return <pre>{JSON.stringify(loaderData, null, 2)}</pre>;
 * }
 * ```
 */
export declare function useLoaderData(): Record<string, any>;
/**
 * Client-safe createLoader factory
 *
 * Creates a loader definition that can be used with useLoader().
 * This is the client-side version that only stores the $$id - the function
 * is ignored since loaders only execute on the server.
 *
 * The $$id is injected by the exposeLoaderId Vite plugin. In most cases,
 * you should import the loader directly from the server file rather than
 * creating a reference manually.
 *
 * @param fn - Loader function (ignored on client, kept for API compatibility)
 * @param _fetchable - Optional fetchable flag (ignored on client)
 * @param __injectedId - $$id injected by Vite plugin
 *
 * @example
 * ```tsx
 * "use client";
 * import { useLoader } from "rsc-router/client";
 * import { CartLoader } from "../loaders/cart"; // Import from server file
 *
 * export function CartIcon() {
 *   const cart = useLoader(CartLoader);
 *   return <span>Cart ({cart?.items.length ?? 0})</span>;
 * }
 * ```
 */
export declare function createLoader<T>(fn: LoaderFn<T, Record<string, string | undefined>, any>): LoaderDefinition<Awaited<T>, Record<string, string | undefined>>;
export declare function createLoader<T>(fn: LoaderFn<T, Record<string, string | undefined>, any>, fetchable: true): LoaderDefinition<Awaited<T>, Record<string, string | undefined>>;
/**
 * Props for the ErrorBoundary component
 */
export interface ErrorBoundaryProps {
    /** Fallback UI to show when an error is caught */
    fallback: ReactNode | ((props: ClientErrorBoundaryFallbackProps) => ReactNode);
    /** Children to render */
    children: ReactNode;
    /** Optional callback when an error is caught */
    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
}
interface ErrorBoundaryState {
    hasError: boolean;
    error: Error | null;
}
/**
 * Client-side ErrorBoundary component
 *
 * Catches JavaScript errors in child components during rendering,
 * in lifecycle methods, and in constructors of the whole tree below them.
 * Displays a fallback UI instead of the component tree that crashed.
 *
 * Use this to wrap client components that might throw during hydration
 * or user interaction. For server-side errors (middleware, loaders, handlers),
 * use the errorBoundary() helper in route definitions instead.
 *
 * @example
 * ```tsx
 * "use client";
 * import { ErrorBoundary } from "rsc-router/client";
 *
 * function MyComponent() {
 *   return (
 *     <ErrorBoundary fallback={<div>Something went wrong</div>}>
 *       <ComponentThatMightThrow />
 *     </ErrorBoundary>
 *   );
 * }
 *
 * // Or with a function fallback for more control:
 * function MyComponent() {
 *   return (
 *     <ErrorBoundary
 *       fallback={({ error, reset }) => (
 *         <div>
 *           <p>Error: {error.message}</p>
 *           <button onClick={reset}>Try again</button>
 *         </div>
 *       )}
 *     >
 *       <ComponentThatMightThrow />
 *     </ErrorBoundary>
 *   );
 * }
 * ```
 */
export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
    constructor(props: ErrorBoundaryProps);
    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
    reset: () => void;
    render(): ReactNode;
}
export { useNavigation, type NavigationMethods, type NavigationValue, } from "./browser/react/use-navigation.js";
export { useAction, type ServerActionFunction, } from "./browser/react/use-action.js";
export { useSegments, type SegmentsState, } from "./browser/react/use-segments.js";
export { useClientCache, type ClientCacheControls, } from "./browser/react/use-client-cache.js";
export { NavigationProvider, type NavigationProviderProps, } from "./browser/react/NavigationProvider.js";
export { Link, type LinkProps, type PrefetchStrategy, type StateOrGetter, } from "./browser/react/Link.js";
export { useLinkStatus, type LinkStatus, } from "./browser/react/use-link-status.js";
export { ScrollRestoration, useScrollRestoration, type ScrollRestorationProps, } from "./browser/react/ScrollRestoration.js";
export { createHandle, isHandle, type Handle } from "./handle.js";
export { useHandle } from "./browser/react/use-handle.js";
export { Meta } from "./handles/meta.js";
export { MetaTags } from "./handles/MetaTags.js";
export type { MetaDescriptor, MetaDescriptorBase } from "./router/types.js";
export { createLocationState, useLocationState, type LocationStateDefinition, type LocationStateEntry, } from "./browser/react/location-state.js";
export { href, type ValidPaths, type PatternToPath, type PathResponse } from "./href-client.js";
export type { ResponseEnvelope, ResponseError } from "./urls.js";
/**
 * Type guard for checking if a response envelope contains an error.
 *
 * @example
 * ```typescript
 * const result: ResponseEnvelope<Product> = await fetch(url).then(r => r.json());
 * if (isResponseError(result)) {
 *   console.log(result.error.message, result.error.code);
 *   return;
 * }
 * result.data // fully typed as Product
 * ```
 */
export declare function isResponseError<T>(result: import("./urls.js").ResponseEnvelope<T>): result is import("./urls.js").ResponseEnvelope<T> & {
    error: import("./urls.js").ResponseError;
};
export { useMount } from "./browser/react/use-mount.js";
export { MountContext } from "./browser/react/mount-context.js";
export { useHref } from "./browser/react/use-href.js";
export type { ScopedReverseFunction } from "./reverse.js";
export type { LoaderDefinition } from "./types.js";
//# sourceMappingURL=client.d.ts.map