import { SyncedState } from '@u-devtools/core';
/**
 * Cleanup function type (unsubscribe)
 */
export type CleanupFn = () => void;
/**
 * Reactive variable interface for Vanilla JS
 */
export interface VanillaRef<T> {
    /**
     * Current value. When assigned, automatically updates SyncedState.
     */
    value: T;
    /**
     * Unsubscribes from updates.
     */
    dispose: () => void;
}
/**
 * Binds element text content to state.
 * element.textContent = state.value
 * @param element - HTMLElement or Text node
 * @param state - SyncedState instance
 */
export declare function bindText(element: HTMLElement | Text, state: SyncedState<any>): CleanupFn;
/**
 * Binds element HTML content to state.
 * element.innerHTML = state.value
 * @param element - HTMLElement
 * @param state - SyncedState instance
 */
export declare function bindHtml(element: HTMLElement, state: SyncedState<any>): CleanupFn;
/**
 * Toggles CSS class based on boolean state.
 * element.classList.toggle(className, !!state.value)
 * @param element - HTMLElement
 * @param state - SyncedState instance
 * @param className - CSS class name
 */
export declare function bindClass(element: HTMLElement, state: SyncedState<any>, className: string): CleanupFn;
/**
 * Controls element visibility (display: none).
 * visible = true -> removes display: none
 * visible = false -> sets display: none
 * @param element - HTMLElement
 * @param state - SyncedState instance
 */
export declare function bindVisible(element: HTMLElement, state: SyncedState<any>): CleanupFn;
/**
 * Binds element attribute to state.
 * @param element - HTMLElement
 * @param state - SyncedState instance
 * @param attrName - Attribute name
 */
export declare function bindAttr(element: HTMLElement, state: SyncedState<any>, attrName: string): CleanupFn;
/**
 * Two-way binding for input, textarea, select elements.
 * state -> input.value
 * input event -> state.value
 * @param element - HTMLInputElement, HTMLTextAreaElement, or HTMLSelectElement
 * @param state - SyncedState instance
 */
export declare function bindInput(element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, state: SyncedState<any>): CleanupFn;
/**
 * Style binding.
 * element.style[property] = state.value
 */
export declare function bindStyle(element: HTMLElement, state: SyncedState<any>, property: keyof CSSStyleDeclaration): CleanupFn;
/**
 * Vanilla JS equivalent of useBridgeState.
 * Creates a reactive variable with automatic synchronization.
 *
 * @template T - State value type
 * @param syncedState - State from core (bridge.state(...))
 * @param onChange - (Optional) Effect function called on every change.
 *                   Called immediately on initialization (immediate: true).
 * @returns VanillaRef object with value and dispose
 *
 * @example
 * ```typescript
 * const count = useBridgeState(bridge.state('cnt', 0), (val) => {
 *   button.textContent = `Count: ${val}`;
 * });
 *
 * button.onclick = () => count.value++; // Updates both locally and in bridge
 * ```
 */
export declare function useBridgeState<T>(syncedState: SyncedState<T>, onChange?: (value: T) => void): VanillaRef<T>;
//# sourceMappingURL=vanilla.d.ts.map