import type { VideoTeaser } from '../../types/video-processing';
/**
 * Vizard clip extraction aspect ratios. Mirrors `lib/types/aspect-ratio.ts`
 * in the hub — narrow on purpose. If the hub's `VizardAspectRatio` adds a
 * value, mirror it here.
 */
export type VizardAspectRatio = '9:16' | '16:9' | '1:1';
/**
 * Extended VideoTeaser with aspect_ratio metadata from Vizard.
 * The base `VideoTeaser` carries every other persisted bite field
 * (timing/confidence/viral_reason live there); this adds ONLY the
 * ratio. Import this when you need the ratio at compile time —
 * it is the canonical type display/aggregation code extends.
 */
export interface VideoTeaserWithRatio extends VideoTeaser {
    aspect_ratio?: VizardAspectRatio;
}
/** Ratio category used for grid layout and tab grouping. */
export type RatioCategory = 'portrait' | 'square' | 'landscape';
/** Grid class for each aspect ratio (admin editors — narrower columns). */
export declare const RATIO_GRID_CLASS: Record<RatioCategory, string>;
/** CSS `aspect-ratio` value per category — sizing for strip cards + placeholders. */
export declare const RATIO_TO_CSS_ASPECT: Record<RatioCategory, string>;
interface RatioTabsProps {
    groups: Record<RatioCategory, {
        count: number;
        render: () => React.ReactNode;
    }>;
    defaultTab?: RatioCategory;
    className?: string;
}
/**
 * RatioTabs — shared aspect-ratio tab wrapper.
 *
 * Only renders tabs that have content. `forceMount` + `data-[state=inactive]:hidden`
 * keeps inactive tabs in the DOM so switching back doesn't scroll-jump.
 */
export declare function RatioTabs({ groups, defaultTab, className, }: RatioTabsProps): import("react").JSX.Element | null;
/**
 * Detect aspect ratio from a Vizard ratio string, falling back to
 * inferring from width/height if the string is missing or unknown.
 * Default: portrait (`'9:16'`).
 */
export declare function detectAspectRatio(ratioString?: string, width?: number, height?: number): VizardAspectRatio;
/** Map a `VizardAspectRatio` to its `RatioCategory` for grouping. */
export declare function ratioToCategory(ratio: VizardAspectRatio): RatioCategory;
/**
 * Group items by aspect ratio into portrait / square / landscape buckets.
 * `hasMultiple` is true when 2+ buckets are non-empty (drives tab vs. flat
 * grid rendering downstream).
 */
export declare function groupByAspectRatio<T>(items: T[], getAspectRatio: (item: T) => VizardAspectRatio): {
    portrait: T[];
    square: T[];
    landscape: T[];
    hasMultiple: boolean;
};
export {};
//# sourceMappingURL=video-ratio-tabs.d.ts.map