import { FC, ReactNode } from 'react';
/**
 * AppShellLayout Props Interface
 */
export interface AppShellLayoutProps {
    /** Header component */
    header?: ReactNode;
    /** Sidebar component */
    sidebar?: ReactNode;
    /** Footer component */
    footer?: ReactNode;
    /** Bottom panel area (resizable, for plugin panels) */
    bottomPanel?: ReactNode;
    /** Right panel area (resizable, for plugin panels) */
    rightPanel?: ReactNode;
    /** Status bar rendered at the very bottom */
    statusBar?: ReactNode;
    /** Main content */
    children: ReactNode;
    /** Whether header is visible */
    headerVisible?: boolean;
    /** Whether footer is visible */
    footerVisible?: boolean;
    /** Whether sidebar is visible */
    sidebarVisible?: boolean;
    /** Custom className for main content area */
    contentClassName?: string;
    /**
     * Padding for main content area (e.g., 'p-4', 'p-6', 'p-8', 'p-card-padding').
     * Default: comfortable Boff UI page gutters ('px-6 lg:px-8 py-6').
     */
    contentPadding?: string;
    /** When true, footer is rendered inside main content area (scrolls with content). Default: false */
    footerInContent?: boolean;
    /**
     * Apply iOS/Android safe-area-inset padding to the outer shell so notched
     * devices don't overlap header/footer. Reads Capacitor `--safe-*` vars and
     * CSS `env(safe-area-inset-*)`, picking the larger. Default `true`.
     */
    safeArea?: boolean;
    /**
     * Bottom bar slot (e.g. `MobileTabBar`), rendered after the content row.
     * The bar positions itself (fixed bottom); the layout only pads the main
     * scroll area by `var(--mobile-tabbar-height)` so content never hides
     * behind it.
     */
    bottomBar?: ReactNode;
    /**
     * Native-compact mode for installed-app phone layouts: marks the shell with
     * `data-native-shell` (native.css takes over safe-areas / paddings) and
     * makes the content area full-bleed (no desktop page gutters). Combine with
     * `bottomBar` + `NativeTopBar`.
     */
    nativeCompact?: boolean;
}
/**
 * AppShellLayout Component
 *
 * Generic app shell layout for product shells. Pure presentation component
 * that composes header, sidebar, footer, and main content.
 *
 * Features:
 * - Flexible header/sidebar/footer composition
 * - Visibility controls for each section
 * - Responsive layout: overlay on mobile, push on desktop
 * - Custom content styling
 *
 * Responsive Behavior:
 * - Mobile (< md): Sidebar as overlay drawer with backdrop
 * - Desktop (>= md): Sidebar pushes content with collapse support
 *
 * Uses semantic tokens for styling, which must be provided by the shell.
 *
 * @example
 * ```tsx
 * <AppShellLayout
 *   header={<HeaderBar {...headerProps} />}
 *   sidebar={<SideNavigation {...navProps} />}
 *   footer={<FooterBar {...footerProps} />}
 *   headerVisible={true}
 *   footerVisible={true}
 *   sidebarVisible={true}
 *   contentPadding="p-6"
 * >
 *   <Routes>...</Routes>
 * </AppShellLayout>
 * ```
 */
export declare const AppShellLayout: FC<AppShellLayoutProps>;
//# sourceMappingURL=AppShellLayout.d.ts.map