import { PointerEvent as ReactPointerEvent, RefObject } from 'react';
import { PopupModal } from './schema/index.ts';
/**
 * Drag-to-resize the card: how wide it is, how tall it is at minimum, how far
 * its content sits from the edge, and how round its corners are.
 *
 * All four are already numbers in the Design tab. What a handle adds is seeing
 * the answer while you choose it — padding and corner radius in particular are
 * values nobody has an opinion about in the abstract and an immediate one about
 * on the page.
 *
 * Pointer events for the reasons {@link useDragSort} is built on them: the
 * editor ships inside a shadow root and the gesture has to survive a finger.
 */
/** Which edge is in hand. Width comes in two so neither reading direction has to think. */
export type CardHandle = 'width-start' | 'width-end' | 'height' | 'padding' | 'radius';
/** What each value snaps to, and the range it may take. */
export declare const WIDTH_STEP = 10;
export declare const WIDTH_MIN = 240;
export declare const WIDTH_MAX = 1200;
export declare const HEIGHT_STEP = 10;
export declare const HEIGHT_MIN = 0;
export declare const HEIGHT_MAX = 1600;
export declare const PADDING_STEP = 2;
export declare const PADDING_MIN = 0;
export declare const PADDING_MAX = 96;
export declare const RADIUS_STEP = 1;
export declare const RADIUS_MIN = 0;
export declare const RADIUS_MAX = 80;
/** A percentage width is a share of the container, so it snaps and clamps its own way. */
export declare const PERCENT_MIN = 20;
/**
 * The width a drag lands on, as the `width` / `widthUnit` pair the form stores.
 *
 * The card is centred, so an edge travels half as far as the width changes:
 * pull the right edge 10px and the card grows 10px on each side. Doubling the
 * travel keeps the edge under the pointer. A handle on the leading edge passes
 * a negated travel, so both sides read as "outward widens".
 */
export declare function nextWidth(startPx: number, travel: number, containerPx: number, unit: PopupModal['widthUnit']): {
    width: number;
    widthUnit: 'px' | '%';
} | null;
/**
 * The minimum height a drag lands on. A modal is centred in its overlay, so its
 * bottom edge moves half as far as the height changes, the same as width; an
 * inline card hangs from its top, so the edge tracks the pointer one to one.
 */
export declare function nextHeight(startPx: number, travel: number, centered: boolean): number;
/**
 * The padding a drag lands on. The handle sits at the content's leading corner
 * and both axes push it the same way, so dragging it inward — right and down in
 * a left-to-right form — opens the gap, whichever way the hand happens to move.
 */
export declare function nextPadding(start: number, dx: number, dy: number, rtl: boolean): number;
/**
 * The corner radius a drag lands on. The handle rides on the arc of the
 * trailing bottom corner, and dragging it toward the middle of the card rounds
 * it off, the same gesture as padding with the corner it belongs to.
 *
 * Half the card's short side is the point where the corners meet and any more
 * radius is the same pill, so that is the ceiling regardless of the constant.
 */
export declare function nextRadius(start: number, dx: number, dy: number, rtl: boolean, shortSidePx: number): number;
/** The card values a drag is proposing, before it is committed. */
export type CardPreview = Partial<Pick<PopupModal, 'width' | 'widthUnit' | 'minHeight' | 'padding' | 'borderRadius'>>;
export interface CardResize {
    /** The handle in hand, or null when no drag is running. */
    handle: CardHandle | null;
    /** What the card currently shows. The model still holds the old values. */
    preview: CardPreview | null;
    /** Call from a handle's `onPointerDown` to arm a resize. */
    start: (handle: CardHandle, e: ReactPointerEvent) => void;
}
export declare function useCardResize(cardRef: RefObject<HTMLElement | null>, popup: PopupModal, onCommit: (patch: CardPreview) => void, 
/** A modal is centred in its overlay; an inline card hangs from its top. */
centered: boolean): CardResize;