/**
 * Reactive state for a single panel. Created and managed by a `PanelState` instance.
 *
 * - `width` — current width in px, set by drag resizing or externally.
 * - `collapsed` — whether the panel is collapsed (hidden via the `slideHorizontally` transition).
 * - `collapseDirection` — which direction the panel collapses to (`'left'` or `'right'`).
 * - `isValid` — when `false`, collapse buttons targeting this panel render in a danger color.
 */
export declare class PanelEntry {
    width: number | null;
    collapsed: boolean;
    collapseDirection: 'left' | 'right' | null;
    isValid: boolean;
    setWidth: (value: number) => void;
    setCollapsed: (value: boolean) => void;
    toggleCollapsed: () => void;
}
type RegisterOptions = {
    id: string | undefined;
    initialWidth: number | null;
    collapseDirection: 'left' | 'right';
    isValid?: boolean;
};
/**
 * Per-`PageLayout` registry for `PagePanel` state. Enables controlling any panel's width and
 * collapsed state by ID — including across the layout/page boundary, where a panel is declared in a
 * `+layout.svelte` and the collapse button lives in a child `+page.svelte`.
 *
 * Create one instance and pass it as a prop to every `PagePanel` / `PanelCollapseButton` /
 * `PagePanelSidebars` that should coordinate. For the layout↔page case, thread the same instance
 * through `page.data` (the same way the panel-id constants are already shared).
 *
 * @example
 * ```ts
 * const panelState = new PanelState();
 * // Collapse a panel from anywhere that has the instance + id:
 * panelState.get('sidebar')?.toggleCollapsed();
 * ```
 */
export declare class PanelState {
    private _registry;
    private _nextId;
    register: (options: RegisterOptions) => {
        id: string;
        entry: PanelEntry;
    };
    get: (id: string) => PanelEntry | null;
    unregister: (id: string, entry: PanelEntry) => void;
}
/**
 * Shared collapse target for a `PagePanelSidebars`'s left/right sidebar pair. Create one instance
 * and pass it to `PagePanelSidebars`'s `toggle` prop, then read `toggleBoth` / `allCollapsed` from
 * this instance wherever the external control lives (e.g. `PageLayout`'s `editorControls`) — no
 * `bind:this` or extra local state needed on the consumer side.
 *
 * @example
 * ```ts
 * const panels = new PanelState();
 * const sidebarsToggle = new SidebarsToggle();
 * ```
 * ```svelte
 * <PageLayout editorControls={{ panelsToggle: { active: sidebarsToggle.allCollapsed, onClick: sidebarsToggle.toggleBoth }, close: {...} }}>
 *   <PagePanels>
 *     <PagePanelSidebars panelState={panels} toggle={sidebarsToggle}>...</PagePanelSidebars>
 *   </PagePanels>
 * </PageLayout>
 * ```
 */
export declare class SidebarsToggle {
    private _left;
    private _right;
    /**
     * True when every attached sidebar is currently collapsed.
     * @remarks False both when there are no sidebars attached and before `PagePanelSidebars` mounts —
     * an external toggle button reads this as "not active" in either case.
     */
    get allCollapsed(): boolean;
    /** Wired automatically by the paired `PagePanelSidebars`'s `toggle` prop. Not for direct use. */
    attach(left: PanelEntry | null, right: PanelEntry | null): void;
    /** Collapses both sidebars, or expands both when they are already all collapsed. */
    toggleBoth: () => void;
}
export {};