/**
 * The overlay's shared visual language.
 *
 * A leaf, like `layout.ts` and `geometry.ts`. These values used to be inline string
 * literals in `panel.ts` and a private copy in `predict.ts` annotated "match the room
 * debug-panels" — a comment the compiler could not enforce. Now it can.
 */
/** Muted text: labels, secondary readouts, chevrons. */
export declare const SECONDARY = "#888";
/** Hairline rule inside a card or panel (the menu's grooves are deliberately louder). */
export declare const RULE = "rgba(255, 255, 255, 0.15)";
/**
 * Segmented buttons: the network presets, the panel-position grid, and the Predict
 * mode pills. All three are "pick exactly one of N", so all three look the same.
 */
export declare const SEGMENT: {
    background: string;
    border: string;
    hover: string;
    foreground: string;
    activeBackground: string;
    activeBorder: string;
    activeForeground: string;
};
/**
 * Paint a segmented button for its selected state. Callers must give the element a
 * `border:1px solid` in their own CSS — only the colour is set here, so the border
 * width never flickers between states.
 *
 * `dataset.active` is the single source of truth the hover handler reads.
 */
export declare function applySegmentedState(button: HTMLElement, active: boolean): void;
/** The hover wash every segmented button shares. Extra handlers run after it. */
export declare function bindSegmentedHover(button: HTMLElement, onEnter?: () => void, onLeave?: () => void): void;