import { LitElement, PropertyValues } from 'lit';
import { InstrumentState, Priority } from '../types.js';
import { AngleAdviceRaw } from './advice.js';
import { Tickmark, TickmarkStyle } from './tickmark.js';
import { RotType, RotPosition } from '../rate-of-turn/rot-renderer.js';
import { VesselImage, VesselImageSize } from './vessel.js';
import { ZoomToFitArcFrame } from '../../svghelpers/arc-frame.js';
export { TickmarkStyle };
export { RotType, RotPosition };
export { VesselImage, VesselImageSize };
export declare enum WatchCircleType {
    single = "single",
    double = "double",
    doubleThin = "doubleThin",
    triple = "triple"
}
export interface WatchArea {
    startAngle: number;
    endAngle: number;
    roundOutsideCut: boolean;
    roundInsideCut: boolean;
}
export interface WatchBarArea {
    startAngle: number;
    endAngle: number;
    fillColor: string;
}
export interface WatchNeedle {
    angle: number;
    fillColor: string;
    strokeColor: string;
}
export interface WatchVessel {
    size: VesselImageSize;
    transform: string;
    vesselImage: VesselImage;
}
export declare const OUTER_RING_RADIUS: number;
export declare function innerRingRadiusFor(type: WatchCircleType): number;
/**
 * `<obc-watch>` - Core SVG renderer for circular/radial watch-based instruments.
 *
 * This component renders all circular instrument elements including rings, tickmarks,
 * bar areas, needles, advices, setpoints, vessel images, and environmental indicators
 * (wind/current). It serves as the foundation for compass, heading, rudder, speed-gauge,
 * and other radial navigation instruments.
 *
 * ## Setpoint Behavior
 *
 * The setpoint marker visual state is derived from the combination of `atAngleSetpoint`,
 * `angleSetpoint`, and `angleSetpointAtZeroDeadband` properties:
 *
 * - **notEqual**: Value differs from setpoint (triangular marker, offset outward)
 * - **equal**: Value matches setpoint (line marker, sits on ring)
 * - **equalZero**: Value matches setpoint at zero angle (double-line marker, offset outward)
 * - **focus**: User is actively adjusting via `newAngleSetpoint` - shows focus visual state
 *
 * ## newAngleSetpoint Pattern
 *
 * When `newAngleSetpoint` is defined, TWO setpoint markers are rendered:
 * 1. Original marker at `angleSetpoint` - dimmed (0.75 opacity)
 * 2. New marker at `newAngleSetpoint` - focus visual state, full opacity
 *
 * This enables the "adjustment preview" UX where users can see both the current
 * and proposed setpoint positions simultaneously.
 *
 * The `RADIAL_SETPOINT_INWARD_ADJUST` constant (4px) fine-tunes radial setpoint positioning
 * to match Figma designs, applied on top of visual state offsets from setpoint.ts.
 *
 * The `colorMode` property allows overriding the derived color mode (enhanced for enhanced priority,
 * regular for other states).
 *
 * ## Setpoint Animation (`animateSetpoint`)
 *
 * When `animateSetpoint` is true and a confirm occurs (`newAngleSetpoint` → `undefined`):
 * - The original setpoint slides to the new position via CSS transition
 * - The departing new-setpoint marker fades out
 * - Angular transitions always take the shortest path via accumulated
 *   CSS-safe angles (`cssSafeAngle()`), so even 350° → 10° animates +20°
 *
 * Duration: `var(--setpoint-animation-duration, 300ms)`
 *
 * Internally, `_departingNewAngleSetpoint` captures the departing angle during confirm
 * fade-out and `_animationTimer` auto-clears it after the animation duration.
 * `_setpointCssAngle` tracks the accumulated CSS angle to avoid long-way-around
 * transitions across the 0°/360° boundary.
 *
 * @property {InstrumentState} state - Instrument state (active, loading, off)
 * @property {Priority} priority - Color priority (enhanced = blue palette, regular = gray palette)
 * @property {number|undefined} angleSetpoint - Setpoint angle in degrees (0° = 12 o'clock)
 * @property {number|undefined} newAngleSetpoint - New setpoint being adjusted (focus mode)
 * @property {boolean} atAngleSetpoint - Whether value matches setpoint (within deadband)
 * @property {number} angleSetpointAtZeroDeadband - Deadband for zero detection (default 0.5°)
 * @property {boolean} setpointOverride - Override to derive setpoint color from priority regardless of state
 * @property {RotType|undefined} rotType - ROT visualization type: `'dots'` (spinning dots) or `'bar'` (arc bar with clipped dots). Undefined hides the ROT layer.
 * @property {RotPosition} rotPosition - Track on which ROT elements are placed: `'scale'` (on the outer ring) or `'innerCircle'` (default, inside the inner ring)
 * @property {number} rotStartAngle - Start angle of the ROT bar arc in degrees (0° = 12 o'clock, clockwise). Only used when `rotType` is `'bar'`.
 * @property {number} rotEndAngle - End angle of the ROT bar arc in degrees. The bar is hidden when the difference from `rotStartAngle` is less than 0.1°.
 * @property {Priority|undefined} rotPriority - Override priority for ROT color derivation. When set, ROT colors use this instead of the main `priority`. Useful when the ROT element has independent priority (e.g. compass per-element priority).
 * @property {number} rotationsPerMinute - Spin speed of the ROT dot ring in rotations per minute. Sign controls direction (positive = clockwise).
 * @property {ZoomToFitArcFrame|undefined} arcFrame - Pre-computed zoom-to-fit arc frame. When set, the watch skips its own `computeZoomToFitArcFrame()` call and uses these values directly. Consumer instruments (e.g. rudder, instrument-radial) should compute the frame once and pass it here to avoid redundant computation.
 */
export declare class ObcWatch extends LitElement {
    private _setpointId;
    private _newSetpointId;
    state: InstrumentState;
    priority: Priority;
    watchCircleType: WatchCircleType;
    northArrow: boolean;
    northArrowInside: boolean | undefined;
    angleSetpoint: number | undefined;
    newAngleSetpoint: number | undefined;
    atAngleSetpoint: boolean;
    angleSetpointAtZeroDeadband: number;
    setpointOverride: boolean;
    touching: boolean;
    animateSetpoint: boolean;
    private _departingNewAngleSetpoint;
    private _animationTimer?;
    /**
     * Accumulated CSS-safe angle for the original setpoint marker.
     * Ensures CSS rotate() transitions always take the shortest path,
     * even across the 0°/360° boundary.
     */
    private _setpointCssAngle;
    /** Whether the setpoint CSS angle has been initialised (to skip transition on first render). */
    private _setpointCssAngleInit;
    padding: number | undefined;
    areas: WatchArea[];
    barAreas: WatchBarArea[];
    needles: WatchNeedle[];
    tickmarks: Tickmark[];
    tickmarksInside: boolean;
    tickmarkStyle: TickmarkStyle;
    advices: AngleAdviceRaw[];
    crosshairEnabled: boolean;
    showLabels: boolean;
    vessels: WatchVessel[];
    wind: number | null;
    windFromDirectionDeg: number | null;
    windSymbolRadius: number | null;
    windColor: string | undefined;
    current: number | null;
    currentFromDirectionDeg: number | null;
    currentSymbolRadius: number | null;
    currentColor: string | undefined;
    starboardPortIndicator: boolean;
    clipTop: number;
    clipBottom: number;
    scaleWindIcon: number;
    rotation: number | undefined;
    zoomToFitArc: boolean;
    arcFrame: ZoomToFitArcFrame | undefined;
    tickFadeAngle: number;
    rotType: RotType | undefined;
    rotPosition: RotPosition;
    rotStartAngle: number;
    rotEndAngle: number;
    rotPriority: Priority | undefined;
    set rotationsPerMinute(value: number);
    get rotationsPerMinute(): number;
    private _rotationsPerMinute;
    private _rotController?;
    private _resizeController;
    willUpdate(changed: PropertyValues): void;
    disconnectedCallback(): void;
    updated(changed: PropertyValues): void;
    private get innerRingRadius();
    private _rOff;
    private watchCircle;
    private _renderTickFadeDefs;
    private renderCrosshair;
    private renderBars;
    private renderNeedles;
    private getScale;
    private getPadding;
    render(): import('lit-html').TemplateResult<1>;
    private getRotColors;
    private renderRot;
    private renderSetpoint;
    private renderVesselImage;
    private renderStarboardPortIndicator;
    static styles: import('lit').CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'obc-watch': ObcWatch;
    }
}
//# sourceMappingURL=watch.d.ts.map