import "./page_content.css";
import type * as React from "react";
import type { ReactNode } from "react";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "./style_props";
export interface PageContentProps extends StyleProps {
    children: ReactNode;
    title?: string;
    titleRight?: ReactNode;
    description?: string | null;
    header?: ReactNode;
    footer?: ReactNode;
    /** The job this screen does, which is what its reading column is sized by
     *  ({@link PAGE_SIZES}). Unstated, the column is a `register`. */
    size?: PageSize;
    fullscreen?: boolean;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * The page shell — a centered, width-capped column (`size` names the job, {@link PAGE_SIZES})
 * with an optional title band (`title` + `titleRight` + `description`), `header`/`footer` slots,
 * and `fullscreen`. Wrap a screen's body for consistent gutters; cards float inside it.
 *
 * THE COLUMN IS ALWAYS CAPPED. A shell that named no job used to run the whole
 * viewport, so the one screen nobody decided a width for was the one screen with
 * no reading column at all — a register 1900px wide with its identity and its
 * amount at opposite ends of the desk. `register` is the default because an app
 * screen is `[tabs] + list → record`; `fullscreen` is the one uncapped surface,
 * and it says so.
 *
 * The cap and the gutter both narrow while the shell's own box is phone-shaped,
 * which is a CONTAINER question — a page in a 700px pane beside an open chat
 * panel must not be capped to 480, and must not spend a wide screen's gutter on
 * it either — so the shell establishes a container and both queries sit on it.
 * The gutter's rungs are `--lotics-page-pad-narrow` / `-wide`, the pair
 * `--lotics-page-pad` resolves between, so a list and the record it opens land on
 * the same edge and one override moves both.
 */
export declare function PageContent(props: PageContentProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
/**
 * THE READING COLUMN, KEYED BY THE JOB THE SCREEN DOES — one width each, and
 * this is where they are written down. A doc that restated them was a second
 * answer to one number, and the two drifted.
 *
 * Each number is the CONTENT the reader gets; the page gutter is added outside
 * it, so a register capped at `register` hands its body 1040 rather than 1040
 * less two gutters — which is what `RecordPage`'s two-region fork measures.
 *
 * | `size` | px | The job |
 * |---|---|---|
 * | `focused` | 560 | A focused task flow — a sign-in, a pick run, a checklist |
 * | `form` | 720 | One record's form, or a feed |
 * | `dashboard` | 960 | A dashboard, a pivot, a faceted browse |
 * | `register` | 1040 | A register, a work list, a calendar — **the default** |
 * | `wide` | 1100 | A wallboard or a report |
 *
 * The stylesheet reads whichever one `size` names through
 * `--lotics-page-content-max`; a screen that cannot use this shell imports the
 * number.
 */
export declare const PAGE_SIZES: {
    readonly focused: 560;
    readonly form: 720;
    readonly dashboard: 960;
    readonly register: 1040;
    readonly wide: 1100;
};
/** The jobs {@link PAGE_SIZES} has a column for. */
export type PageSize = keyof typeof PAGE_SIZES;