import { ISignal } from "../internals";
export declare const PulseViewFactory: unique symbol;
export declare const PulseView: unique symbol;
export interface ViewFactory<P> {
    [PulseViewFactory]: true;
    (): View<P>;
    (props: P): View<P>;
    (children: Children): View<P>;
    (props: P, children: Children): View<P>;
    styles(css: string): ViewFactory<P>;
}
export type Children = () => void | string | number | ISignal<string | number> | any;
export type RenderableChildren = () => void | string | number | ISignal<string | number>;
export type ViewHooks = {
    onDispose: (callback: Function) => void;
};
export type DomBuilder<P = any> = (props: P, children: Children, api: ViewHooks) => void;
export interface CssRecord {
    [property: string]: string | number | CssRecord | Partial<CSSStyleDeclaration>;
}
export type CustomCSS = (Partial<CSSStyleDeclaration> & CssRecord) | string;
export type CustomStyleCSS = Partial<CSSStyleDeclaration> | string;
export type ElementBuilder<P, M, E extends HTMLElement> = {
    (props: P, children: Children): ElementModifiers<M, E>;
    (props: P): ElementModifiers<M, E>;
    (children: Children): ElementModifiers<M, E>;
    (): ElementModifiers<M, E>;
    extend(css: CustomCSS): ElementBuilder<P, M, E>;
    extend<N>(modifiers: ModifierBuilder<N, E>): ElementBuilder<P, M & N, E>;
    extend<N>(css: CustomCSS, modifiers: ModifierBuilder<N, E>): ElementBuilder<P, M & N, E>;
};
export type ModifierBuilder<N, E extends HTMLElement> = (modifiers: BaseModifiers<E>, context: ModifierBuilderContext<E>) => N;
export type ModifierBuilderContext<E = HTMLElement> = {
    element: E;
    onDispose: (callback: Function) => void;
    bindValue: <T>(value: ReactiveValue<T>, callback: ReactiveCallback<T>) => void;
    bindEvent: <T extends keyof HTMLElementEventMap>(event: T, callback: (e: HTMLElementEventMap[T]) => void) => void;
};
export type BaseModifiers<E extends HTMLElement> = {
    /**
     * Adds a class name to the element.
     */
    className: (...args: any[]) => BaseModifiers<E>;
    /**
     * Adds a style to the element.
     */
    css: (styles: CustomStyleCSS) => BaseModifiers<E>;
    /**
     * Sets the element as `inert` (not interactive).
     */
    inert: (freeze?: ReactiveValue<boolean>) => BaseModifiers<E>;
    /**
     * Adds an event listener to the element that's automatically cleaned up.
     */
    on: (event: keyof HTMLElementEventMap, callback: (e: Event | CustomEvent) => void) => BaseModifiers<E>;
    /**
     * Sets the element's transition name. (Used for animations)
     */
    transitionName: (name: string) => BaseModifiers<E>;
    /**
     * Applies a directive to the element.
     */
    use: (callback: (element: E, helpers: ModifierBuilderContext<E>) => void) => BaseModifiers<E>;
};
export type ElementModifiers<M, E extends HTMLElement> = Chainable<BaseModifiers<E> & M>;
export type MaybeSignal<T> = {
    [P in keyof T]: T[P] | ISignal<T[P]>;
};
export type Chainable<T> = {
    [K in keyof T]: T[K] extends (...args: infer A) => any ? (...args: A) => Chainable<T> : T[K];
};
export type ExtractProps<T> = T extends ElementBuilder<infer P, any, any> ? P : never;
export declare const NOOP: () => void;
export declare const EMPTY_PROPS: {};
export declare const EMPTY_CHILDREN: Children;
export declare const _activeRoots: Set<View<any>>;
export declare const registerView: (key: string, view: any) => void;
export declare const unregisterView: (key: string) => void;
export declare function logVerbose(...messages: any): void;
/**
 * Global environment variables for all views.
 */
export declare const env: (<T>(key: string) => T | undefined) & {
    readonly _data: Map<string, any>;
    set(key: string, value: any): void;
    has(key: string): boolean;
    get<T>(key: string, defaultValue?: T): T | undefined;
};
/**
 * Context variables for view hierarchies.
 */
export declare const context: (<T>(key: string) => T | undefined) & {
    set(key: string, value: any): void;
    has(key: string): boolean | void;
    get<T>(key: string, defaultValue?: T): T | undefined;
};
/**
 * Creates a new view factory.
 *
 * @example
 *
 * ```ts
 * const MyView = view(() => {
 *    div("Hello, world!")
 * })
 * ```
 *
 * @param builder
 * @returns
 */
export declare function view<P>(builder: DomBuilder<P>): ViewFactory<P>;
export declare class View<P> {
    private _builder;
    [PulseView]: boolean;
    readonly id: string;
    readonly dom: DocumentFragment;
    readonly parent: View<any> | null;
    readonly children: Set<View<any>>;
    readonly props: P;
    protected _contextData?: Map<string, any>;
    context: {
        set: (key: string, value: any) => void;
        get: (key: string) => any;
        has: (key: string) => boolean;
    };
    constructor(_builder: DomBuilder, args: any[]);
    disposeCallbacks: Set<Function> | null;
    hooks: {
        onDispose: (callback: Function) => void;
    };
    dispose(): void;
    static active: View<any> | null;
    static appendToActiveView(child: Node): void;
    static activeElement: Node | null;
    static appendToActiveElement(child: Node): void;
    static appendToActiveElements(...children: Node[]): void;
    static inNestedElement<T>(el: Node, fn: () => T): T;
    static inRenderContext<T>(newView: View<any> | null | undefined, newElement: Node | null | undefined, fn: () => T): T;
    static create: ((builder: DomBuilder, ...args: any[]) => View<unknown>) & {
        styles(css: string): any;
    };
    static createBoundary(parent?: View<any> | null, element?: Node | null): View<unknown>;
}
/**
 * Registers a callback to be called when the active view is disposed.
 * @param callback
 */
export declare function onDispose(callback: Function): void;
export type Truthy = string | number | boolean | null | undefined;
export declare function isTruthy(value: Truthy): boolean;
/**
 * Conditionally renders a view based on a boolean condition.
 *
 * @param condition A function that returns a boolean value (for use in a computation)
 * @param thenBuilder When the condition is true, this function is called to build the view, otherwise it is skipped/torn down.
 * @param elseBuilder (optional) When the condition is false, this function is called to build the view, otherwise it is skipped/torn down.
 */
export declare function when(condition: ISignal<Truthy> | Truthy | (() => Truthy | ISignal<Truthy>), thenBuilder: () => void, elseBuilder?: () => void): void;
export declare function processCondition(condition: string | number | boolean | ISignal<Truthy> | (() => Truthy | ISignal<Truthy>) | null | undefined): boolean;
/**
 * Works kind of like `when`, but the whole block is evaluated and
 * re-rendered when any observed signals change.
 *
 * @param builder The function that builds the view
 * @returns void
 */
export declare function live(builder: () => void): void;
/**
 * Renders an value as text.
 * @param value The value to display
 */
export declare function text(value: string | number | ISignal<any>): void;
export declare function raw(html: TemplateStringsArray | string, ...args: any[]): void;
export type KeyedView<T> = {
    key: any;
    view: View<any>;
    markers: RenderMarker;
};
/**
 * Iterates over an array or signal containing an array, rendering views for each item.
 *
 * @param list - An array or signal containing an array of items.
 * @param itemBuilder - A function that receives each item and index, and builds the view.
 * @param options - Optional configuration, including a key extractor function.
 */
export declare function each<T>(list: T[] | ISignal<T[]> | Iterable<T> | ISignal<Iterable<T>>, itemBuilder: (item: T, index: number) => void, keyExtractor?: (item: T, index: number) => any): void;
/**
 * Creates a new element with the given tag name.
 * @usage
 * ```ts
 * const { a, div, button } = tags
 *
 * // elsewhere...
 * const MyView = view(() => { div("Hello") })
 * ```
 */
export declare const tags: {
    [key in keyof HTMLElementTagNameMap]: ElementBuilder<Partial<MaybeSignal<Omit<HTMLElementTagNameMap[key], "style">>> & Partial<{
        class: string | ISignal<string>;
        style: Partial<CSSStyleDeclaration> | string;
        ref: (el: HTMLElement) => void;
        on: (event: keyof HTMLElementEventMap, callback: (e: Event | CustomEvent) => void) => void;
        use: (el: HTMLElement, helpers: ModifierBuilderContext<HTMLElementTagNameMap[key]>) => void;
        key: any;
        switch: boolean | ISignal<boolean>;
        $value: ISignal<any>;
        $checked: ISignal<boolean>;
        $selected: ISignal<boolean>;
    }>, {}, HTMLElementTagNameMap[key]>;
};
export declare function getKeyForItem<T>(index: number, keyExtractor: ((item: T, index: number) => any) | undefined, item: T): any;
export declare function createElement<P = any, M = {}>(tag: keyof HTMLElementTagNameMap, classNames?: string[], modifiers?: ModifierBuilder<M, HTMLElementTagNameMap[typeof tag]>): ElementBuilder<P, M, HTMLElementTagNameMap[typeof tag]>;
export declare function camelToKebab(str: string): string;
export declare function convertToStyles(styles: Partial<CSSStyleDeclaration>): string;
export declare function convertToNestedCss(styles: Partial<CSSStyleDeclaration> & CssRecord): string;
/**
 * Renders a view instance into a target element.
 *
 * @param viewInstance  The view instance to render
 * @param target The target element to render the view into
 * @returns A function that can be called to dispose of the view
 */
export declare function render(viewInstance: View<any>, target: HTMLElement): () => void;
export declare function element<P, M, E extends HTMLElement>(name: string, props?: any, children?: Children, customClasses?: string[], customModifiers?: ModifierBuilder<M, E>): ElementModifiers<M, E>;
export declare function createModifierContext<E extends HTMLElement>(el: E): ModifierBuilderContext<E>;
export declare function createBaseModifiers<T extends HTMLElement>(el: T): {
    className: (...args: any[]) => any;
    css: (styles: CustomStyleCSS) => any;
    inert(freeze?: ReactiveValue<boolean>): any;
    on(event: keyof HTMLElementEventMap, callback: (e: Event | CustomEvent) => void): any;
    transitionName(name: string): any;
    use(callback: (element: T, context: ModifierBuilderContext<T>) => void): any;
};
export declare function setElAttr(el: Element, key: string, value: any): void;
export declare function setElProp(el: Element, key: string, value: any): void;
export declare function extractPropsAndChildren<P>(args: any[]): [P, Children];
export declare class RenderMarker {
    readonly id: string;
    start: Comment;
    end: Comment;
    constructor(id: string);
    appendToParent(parent: Node): this;
    removeFromParent(): void;
    insertBetween(node: Node): this;
    removeBetween(): this;
    extractAll(): DocumentFragment;
}
export declare function displayErrorWithinMarkers(markers: RenderMarker, error: any): void;
export declare function makeChainable<T extends object>(obj: T): Chainable<T>;
/**
 * A value, signal, or function that can be used to create a reactive value.
 */
export type ReactiveValue<T> = T | ISignal<T> | (() => T);
/**
 * A callback that is called when a reactive value changes.
 */
export type ReactiveCallback<T> = (unwrappedValue: T) => void;
/**
 * Unwraps a reactive value to its base value. (untracked)
 */
export declare function getValue<T>(value: ReactiveValue<T>): T;
/**
 * Binds a reactive value to a callback, executing whenever the value changes.
 */
export declare function bindValue<T>(value: ReactiveValue<T>, callback: ReactiveCallback<T>): () => void;
export declare function bindEvent(element: HTMLElement, event: keyof HTMLElementEventMap, callback: (e: HTMLElementEventMap[typeof event]) => void): () => void;
export declare function isIterable<T>(value: any): value is Iterable<T>;
export declare function isFunction(source: any): source is Function;
export declare function isView(value: any): value is View<any>;
export declare function iife<T>(fn: () => T): T;
/**
 * Defines a custom element tag that will render a Pulse view.
 *
 * @param tagName - The name of the custom element tag to define.
 * @param observedProps - The names of the properties that will be observed for changes.
 * @param viewFactory - A function that creates a Pulse view.
 */
export declare function customPulseElement(tagName: string, observedProps: string[], viewFactory: ViewFactory<any>): void;