import * as React from 'react';
/**
 * CSS-like positioning for the viewport.
 * Values can be numbers (pixels) or strings with '%' (percentage of canvas).
 */
export type ViewportPosition = {
    /** Distance from top edge (pixels or percentage) */
    top?: number | string;
    /** Distance from right edge (pixels or percentage) */
    right?: number | string;
    /** Distance from bottom edge (pixels or percentage) */
    bottom?: number | string;
    /** Distance from left edge (pixels or percentage) */
    left?: number | string;
    /** Width of the viewport (pixels or percentage) */
    width: number | string;
    /** Height of the viewport (pixels or percentage) */
    height: number | string;
};
export type ViewportHudProps = {
    /**
     * Any React node
     * @dial-ignore
     */
    children: React.ReactNode;
    /**
     * Render priority
     * @dial rendering
     * @dial-dtype int
     * @dial-default 1
     * @dial-min 1
     * @dial-max 10
     */
    renderPriority?: number;
    /**
     * Distance from top edge (pixels or percentage string like '10%')
     * @dial viewport
     * @dial-cols 2
     * @dial-dtype number
     * @dial-step 1
     * @dial-min 0
     */
    top?: number | string;
    /**
     * Distance from right edge (pixels or percentage string like '10%')
     * @dial viewport
     * @dial-dtype number
     * @dial-step 1
     * @dial-min 0
     */
    right?: number | string;
    /**
     * Distance from bottom edge (pixels or percentage string like '10%')
     * @dial viewport
     * @dial-dtype number
     * @dial-step 1
     * @dial-min 0
     */
    bottom?: number | string;
    /**
     * Distance from left edge (pixels or percentage string like '10%')
     * @dial viewport
     * @dial-dtype number
     * @dial-step 1
     * @dial-min 0
     */
    left?: number | string;
    /**
     * Width of the viewport (pixels or percentage string like '50%')
     * @dial viewport
     * @dial-dtype number
     * @dial-step 1
     * @dial-min 1
     * @dial-default 100
     */
    width: number | string;
    /**
     * Height of the viewport (pixels or percentage string like '50%')
     * @dial viewport
     * @dial-dtype number
     * @dial-step 1
     * @dial-min 1
     * @dial-default 100
     */
    height: number | string;
};
/**
 * A HUD (Heads-Up Display) component that renders to a specific viewport region.
 *
 * Based on drei's Hud but with the ability to constrain rendering to a
 * rectangular region of the canvas using CSS-like positioning.
 *
 * @example
 * ```tsx
 * // Render a HUD in the top-left corner
 * <ViewportHud top={10} left={10} width={100} height={200}>
 *   <OrthographicCamera makeDefault position={[0, 0, 10]} />
 *   <mesh>
 *     <boxGeometry />
 *     <meshBasicMaterial color="red" />
 *   </mesh>
 * </ViewportHud>
 *
 * // Render a HUD in the top-right corner
 * <ViewportHud top={10} right={20} width={100} height={200}>
 *   <PerspectiveCamera makeDefault position={[0, 0, 5]} />
 *   <mesh>
 *     <sphereGeometry />
 *     <meshBasicMaterial color="blue" />
 *   </mesh>
 * </ViewportHud>
 *
 * // Using percentages
 * <ViewportHud bottom="5%" left="5%" width="20%" height="30%">
 *   {/* ... *\/}
 * </ViewportHud>
 * ```
 */
export declare function ViewportHud({ children, renderPriority, top, right, bottom, left, width, height, }: ViewportHudProps): import("react/jsx-runtime").JSX.Element;