import type { PanelState } from './panel-state.svelte';
import type { PanelBorder, PanelResizingSettings } from './types';
import type { Snippet } from 'svelte';
type Props = {
    /** The shared `PanelState` instance this panel registers with. */
    panelState: PanelState;
    children: Snippet;
    /** Explicit registry id. Auto-assigned when omitted. Set it when another component needs to target this panel via `collapseButtons` / `PanelCollapseButton`. */
    id?: string;
    /** Full header override — when set, `title` / `actions*` / `collapseButtons` are ignored. */
    header?: Snippet;
    footer?: Snippet;
    title?: string | Snippet;
    actionsLeft?: Snippet;
    actionsCenter?: Snippet;
    actionsRight?: Snippet;
    /** IDs of sibling panels to render collapse toggles for (placed by the target's `collapseDirection`). */
    collapseButtons?: string[];
    hideHeader?: boolean;
    /** Lay the header out as a 3-column grid so `actionsCenter` is centered against the panel width regardless of the left / right column widths. @default false */
    balanceHeaderCenter?: boolean;
    /** Resize / collapse config. `null` ⇒ the panel is `flex: 1` (no resizing). @default null */
    resizing?: PanelResizingSettings | null;
    borders?: PanelBorder[];
    on?: {
        collapse?: (collapsed: boolean) => void;
    };
};
/**
 * PagePanel — a panel within `PagePanels`. Renders a fixed-height header and a scrollable content
 * area. Supports drag resizing (pointer + keyboard), external collapse via the shared `PanelState`
 * instance, and configurable borders. Collapse uses the `slideHorizontally` transition.
 *
 * Pass the same `panelState` instance to every panel + collapse button that should coordinate.
 *
 * ### Header modes
 * - `title` (string | Snippet) — renders in the left section; `actionsLeft` / `actionsRight` and
 * `collapseButtons` are placed alongside.
 * - `header` (Snippet) — replaces the entire header content.
 * - No props — an empty header bar is rendered unless `hideHeader` is set.
 *
 * ### Resize keyboard
 * Focus the resizer (Tab), then: ArrowLeft / ArrowRight resize by 8px (Shift = 32px); Home / End snap
 * to min / max; Enter / Space toggle collapsed.
 *
 * ### CSS Custom Properties
 * | Property | Description | Default |
 * |---|---|---|
 * | `--sc-kit--page-panel--border-color` | Border + header divider color | `--sc-kit--color--border` |
 * | `--sc-kit--page-panel--content--background` | Content background | `transparent` |
 * | `--sc-kit--page-panel--footer--border-width` | Footer top border width | `0` |
 * | `--sc-kit--page-panel--footer--justify` | Footer `justify-content` | `flex-end` |
 * | `--sc-kit--page-panel--header--background` | Header background | `--sc-kit--color--bg--panel` |
 * | `--sc-kit--page-panel--header--padding-inline` | Header + footer inline padding | `24px` |
 * | `--sc-kit--page-panel--title--font-size` | Title font size | `14px` |
 * | `--sc-kit--page-panel--resizer-color` | Resizer handle hover color | `--sc-kit--color--border` |
 */
declare const Cmp: import("svelte").Component<Props, {}, "">;
type Cmp = ReturnType<typeof Cmp>;
export default Cmp;