import type { PageModel } from './store.js';
import { type InteractiveStateDef, type ScreenStateAxisDef } from './interactiveStates.js';
import type { PreviewEnvironmentControlDef } from './previewEnvironmentControls.js';
/**
 * One axis along which the selected screen can vary, whatever declared it.
 * The panel renders every axis with the same row and asks the source-specific
 * `ref` only when an option is chosen.
 */
export type VariantAxisSource = 'screen-state' | 'interaction' | 'pseudo' | 'condition';
export interface VariantAxisOption {
    id: string;
    label: string;
    /** Category tag a screen-state branch may declare (overlay, badge, layout, …). */
    kind?: string;
    description?: string;
}
export type VariantAxisRef = {
    source: 'screen-state';
    pages: readonly PageModel[];
} | {
    source: 'interaction';
    def: InteractiveStateDef;
} | {
    source: 'pseudo';
    def: ScreenStateAxisDef;
} | {
    source: 'condition';
    control: PreviewEnvironmentControlDef;
};
export interface VariantAxis {
    /** Unique across sources: `${source}:${declared id}`. */
    id: string;
    source: VariantAxisSource;
    group: VariantGroup;
    label: string;
    options: readonly VariantAxisOption[];
    /** Active option ids: one, or several on a combining axis. */
    value: readonly string[];
    defaultValue: string;
    multiple: boolean;
    /** The active value differs from the base this frame shows. */
    changed: boolean;
    ref: VariantAxisRef;
}
export type VariantGroup = 'Screen state' | 'Interaction' | 'Elements' | 'Condition';
export declare const VARIANT_GROUP_ORDER: readonly VariantGroup[];
export interface VariantAxisInput {
    page: PageModel;
    /** Sibling frames of the page's scenario on its canvas, base first. */
    siblings?: readonly PageModel[];
    /** Declared axes that apply to the page. */
    declared?: readonly InteractiveStateDef[];
    /** Element pseudo-state axes discovered on the page. */
    pseudo?: readonly ScreenStateAxisDef[];
    conditions?: readonly PreviewEnvironmentControlDef[];
    conditionValue?: (controlId: string) => string | undefined;
}
/** Collects every axis the selected screen can vary along, in panel order. */
export declare function collectVariantAxes(input: VariantAxisInput): VariantAxis[];
/** Axes away from their base, for the identity chips. */
export declare function changedVariantAxes(axes: readonly VariantAxis[]): VariantAxis[];
/** Groups in panel order, empty groups dropped. */
export declare function variantAxisGroups(axes: readonly VariantAxis[]): {
    group: VariantGroup;
    axes: VariantAxis[];
}[];
/** The labels of an axis's active options, in option order. */
export declare function variantAxisValueLabels(axis: VariantAxis): string[];
/** Rows with more options than fit one line fall back to a menu. */
export declare const VARIANT_SEGMENT_LIMIT = 4;