import { type ReactNode } from "react";
/** Which pane carries the drag-controlled pixel width; its sibling flexes. */
export type ResizablePane = "primary" | "secondary";
/**
 * Which pane (if any) collapses below the `lg` breakpoint, leaving its sibling
 * full-width. Use this to hide the pixel-sized pane on narrow screens — always
 * pair it with {@link ResizableSplitProps.resizablePane} (hide the fixed pane so
 * the visible sibling is the flexing one and fills the row). `"none"` keeps both
 * panes at every width.
 */
export type ResizableCollapse = "primary" | "secondary" | "none";
/** Props for {@link ResizableSplit}. */
export interface ResizableSplitProps {
    /** Content rendered in the first (left) region. */
    readonly primary: ReactNode;
    /** Content rendered in the second (right) region. */
    readonly secondary: ReactNode;
    /**
     * Which pane is pixel-sized and drag-resizable; the other flexes to fill.
     * Child render order is fixed (`primary` then `secondary`) regardless of this
     * value, so flipping it re-flows the layout without remounting either child.
     * @default "secondary"
     */
    readonly resizablePane?: ResizablePane;
    /**
     * Default width of the resizable pane in pixels.
     * Overridden by a persisted value when `storageKey` is set.
     * @default 384
     */
    readonly defaultSize?: number;
    /** Minimum width of the resizable pane in pixels. @default 280 */
    readonly minSize?: number;
    /** Maximum width of the resizable pane in pixels. @default 800 */
    readonly maxSize?: number;
    /**
     * `localStorage` key for persisting the pane width across sessions.
     * When omitted, the pane width resets to `defaultSize` on remount.
     * Changing this key (or `resizablePane`) re-initializes the width from the
     * new key without remounting — the mechanism the session layout uses to keep
     * a distinct persisted width per mode.
     */
    readonly storageKey?: string;
    /** Which pane collapses below the `lg` breakpoint. @default "none" */
    readonly responsiveCollapse?: ResizableCollapse;
    /**
     * Which pane (if any) is collapsed at every width, hiding the drag handle and
     * letting the sibling fill the row. Unlike conditional rendering at the call
     * site, collapsing through this prop keeps both children mounted at stable
     * tree positions — the session panel uses it so opening/closing the panel
     * never remounts the conversation. The persisted width survives a collapse
     * and applies again on expand.
     * @default "none"
     */
    readonly collapsedPane?: ResizableCollapse;
    /**
     * Accessible label for the drag separator. @default "Resize panel"
     */
    readonly ariaLabel?: string;
    /**
     * Called whenever the resizable pane width changes (during drag
     * and on initial mount from persisted state). Consumers use this
     * to thread the width into layout-dependent calculations like
     * `WorkflowExecutionGraph.panelOffsetPx`.
     */
    readonly onResize?: (widthPx: number) => void;
    /** Additional CSS class names for the root flex container. */
    readonly className?: string;
}
/**
 * Horizontal split layout with one drag-resizable pixel-sized pane and one
 * flexible pane.
 *
 * By default the right region (`secondary`) is pixel-sized and the left
 * (`primary`) flexes. Set `resizablePane="primary"` to flip which side carries
 * the width — the session layout uses this to invert between a chat-dominant
 * layout (inspector on the right, fixed) and a workspace-dominant layout (chat
 * on the left, fixed). Render order never changes, so flipping re-flows the row
 * without remounting either child (preserving streaming/scroll state).
 *
 * Design:
 * - Pointer-based drag with `setPointerCapture` for reliable tracking
 * - `requestAnimationFrame` coalescing during drag (DD-009 pattern)
 * - Keyboard accessible: arrow keys nudge by {@link KEYBOARD_STEP_PX}, oriented
 *   so the pane always grows toward its own side
 * - Optional `localStorage` persistence via `storageKey`, re-initialized when
 *   the key or resizable side changes (no remount required)
 * - Optional responsive collapse of the pixel pane below `lg`
 * - Styled with `--stgm-*` tokens; no hardcoded colors
 *
 * @example
 * ```tsx
 * // Chat-dominant: inspector fixed on the right (default)
 * <ResizableSplit
 *   primary={<Conversation />}
 *   secondary={<Inspector />}
 *   storageKey="stgm-session-inspector-width"
 *   responsiveCollapse="secondary"
 * />
 *
 * // Workspace-dominant: chat fixed on the left
 * <ResizableSplit
 *   resizablePane="primary"
 *   primary={<Conversation />}
 *   secondary={<WorkspaceSurface />}
 *   storageKey="stgm-session-chat-width"
 *   responsiveCollapse="primary"
 * />
 * ```
 */
export declare function ResizableSplit({ primary, secondary, resizablePane, defaultSize, minSize, maxSize, storageKey, responsiveCollapse, collapsedPane, ariaLabel, onResize, className, }: ResizableSplitProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=ResizableSplit.d.ts.map