import type { Signal } from './signals.js';

/** Min-width px thresholds keyed by breakpoint name. */
export declare const BREAKPOINTS: { xs: 0; sm: 480; md: 768; lg: 1024; xl: 1280 };

/** Ordered breakpoint names, narrowest → widest. */
export declare const BP_NAMES: string[];

/**
 * Shared signal holding the current viewport breakpoint name.
 * Read inside a UIElement `render()` to subscribe; the component
 * re-renders automatically on breakpoint change.
 */
export declare const breakpoint: Signal<'xs' | 'sm' | 'md' | 'lg' | 'xl'>;

/**
 * Resolve a responsive attribute value for the given breakpoint.
 *
 * Syntax: `"base @bp:override ..."` — e.g. `"1 2@sm 4@lg"`.
 * Mobile-first: `@bp` applies at that breakpoint and all wider ones.
 * Returns the unannotated default when no annotation matches.
 *
 * @param value    Raw attribute string (e.g. `"1 2@sm 4@lg"`).
 * @param activeBp Breakpoint to resolve for. Defaults to `breakpoint.value`.
 */
export declare function parseResponsive(
  value: string | null | undefined,
  activeBp?: string,
): string | null;
