import * as react from "react";
import "@storybook/react";

//#region react/performance-decorator.d.ts
/**
 * Props for the PerformanceProvider component.
 * @interface PerformanceProviderProps
 * @private
 */
interface PerformanceProviderProps {
  /** React children to render and monitor */
  children: React.ReactNode;
  /** Whether performance monitoring is enabled. Default: true */
  enabled?: boolean;
  /** The current story ID for associating profiler data */
  storyId: string;
}
/**
 * Main performance monitoring component for the preview iframe.
 *
 * This component orchestrates all metric collection by:
 * 1. Setting up PerformanceObserver for long tasks, layout shifts, paints, resources
 * 2. Running a requestAnimationFrame loop for frame timing
 * 3. Installing a MutationObserver for style writes and DOM mutation tracking
 * 4. Patching HTMLElement getters to detect forced reflows
 * 5. Listening for input events to measure latency
 * 6. Providing context for React Profiler integration
 * 7. Emitting metrics to the panel via Storybook channel
 *
 * @component
 * @param props - Component props
 * @param props.children - Content to render and monitor
 * @param props.enabled - Whether monitoring is active (default: true)
 *
 * @example
 * // Used by withPerformanceMonitor decorator
 * <PerformanceProvider enabled={shouldMonitor}>
 *   <Story />
 * </PerformanceProvider>
 *
 * @see {@link withPerformanceMonitor} - The decorator that uses this provider
 * @see {@link PerformanceMetrics} - The metrics emitted to the panel
 */
declare const PerformanceProvider: react.NamedExoticComponent<PerformanceProviderProps>;
/**
 * Wraps children in a React.Profiler to capture render timing metrics.
 *
 * Connects to the PerformanceProvider context to report:
 * - Mount vs update phases
 * - Actual render duration (time with memoization)
 * - Base duration (estimated time without memoization)
 * - Nested updates (setState during render)
 *
 * Profilers are automatically registered on first render - no manual setup needed.
 * Use descriptive IDs as they're displayed in the panel.
 *
 * @component
 * @param props - Component props
 * @param props.id - Profiler ID (displayed in panel - use descriptive names)
 * @param props.children - Content to profile
 *
 * @example
 * <ProfiledComponent id="My Story">
 *   <MyComponent />
 * </ProfiledComponent>
 *
 * @example
 * // Multiple profilers in one story
 * <ProfiledComponent id="Header Section">
 *   <Header />
 * </ProfiledComponent>
 * <ProfiledComponent id="Main Content">
 *   <Content />
 * </ProfiledComponent>
 *
 * @see {@link https://react.dev/reference/react/Profiler React Profiler API}
 */
declare const ProfiledComponent: react.NamedExoticComponent<{
  /** Unique identifier for this profiler instance (displayed in panel) */id: string; /** React children to profile */
  children: React.ReactNode;
}>;
//#endregion
//#region react/react-profiler-wrapper.d.ts
interface ReactProfilerWrapperProps {
  /**
   * Unique identifier for this profiler.
   * This ID is displayed in the panel, so use descriptive names like:
   * "main-content", "sidebar", "modal-dialog", "data-table"
   *
   * If multiple wrappers use the same ID, a suffix is auto-appended
   * (e.g., "modal#2", "modal#3") to keep them unique.
   */
  id: string;
  /**
   * React children to profile.
   */
  children: React.ReactNode;
  /**
   * Whether profiling is enabled.
   * When false, children are rendered without the profiler overhead.
   * @default true
   */
  enabled?: boolean;
}
/**
 * Standalone React profiler wrapper for tracking React performance metrics.
 *
 * This component wraps children in a React.Profiler and reports metrics
 * directly to the performance store. It can be used:
 *
 * 1. Inside the main decorator tree (will track as a separate profiler)
 * 2. Outside the main tree (e.g., portals, separate React roots)
 *
 * Metrics are automatically registered with the store on mount and
 * unregistered on unmount.
 *
 * @component
 *
 * @example
 * // Inside a story - profile a specific section
 * function MyStory() {
 *   return (
 *     <div>
 *       <Header />
 *       <ReactProfilerWrapper id="Main Content">
 *         <ExpensiveList items={items} />
 *       </ReactProfilerWrapper>
 *       <Footer />
 *     </div>
 *   )
 * }
 *
 * @example
 * // Profile a portal/modal outside the main tree
 * function MyModal({ isOpen }) {
 *   if (!isOpen) return null
 *   return createPortal(
 *     <ReactProfilerWrapper id="Modal Dialog">
 *       <ModalContent />
 *     </ReactProfilerWrapper>,
 *     document.body
 *   )
 * }
 *
 * @example
 * // Compare two implementations
 * function ComparisonStory() {
 *   return (
 *     <div style={{ display: 'flex', gap: 20 }}>
 *       <ReactProfilerWrapper id="Old Implementation">
 *         <OldComponent />
 *       </ReactProfilerWrapper>
 *       <ReactProfilerWrapper id="New Implementation">
 *         <NewComponent />
 *       </ReactProfilerWrapper>
 *     </div>
 *   )
 * }
 */
declare const ReactProfilerWrapper: react.NamedExoticComponent<ReactProfilerWrapperProps>;
//#endregion
export { PerformanceProvider, ProfiledComponent, ReactProfilerWrapper };