import { SwishApp } from "../swish";
import { CreateElementLocatorArgs } from "./dom-utils";
export declare function createPlacement<TDomElement extends HTMLElement = HTMLElement, TElementName extends ElementName = ElementName>(swish: SwishApp, spec: PlacementSpec<TDomElement, TElementName>): {
    mount(): void;
    unmount(): void;
};
/** --------------------------------------------
 * Types
 * -------------------------------------------- */
export type BreakpointsSpec = {
    sm?: number;
    lg?: number;
} | Record<string, number>;
export type ResponsiveValue<T> = T | {
    base?: T;
    [breakpoint: string]: T | undefined;
};
type ElementName = "save-button" | "home-button";
export type SaveButtonDesignSpec = {
    background?: ResponsiveValue<string>;
    savedBackground?: ResponsiveValue<string>;
    color?: ResponsiveValue<string>;
    savedColor?: ResponsiveValue<string>;
    height?: ResponsiveValue<string | number>;
    radius?: ResponsiveValue<string | number>;
};
export type HomeButtonDesignSpec = {
    background?: ResponsiveValue<string>;
    color?: ResponsiveValue<string>;
    height?: ResponsiveValue<string | number>;
    radius?: ResponsiveValue<string | number>;
};
type DesignSpecMap = {
    "save-button": SaveButtonDesignSpec;
    "home-button": HomeButtonDesignSpec;
};
export type DesignSpecForElementName<TName extends ElementName = ElementName> = TName extends keyof DesignSpecMap ? DesignSpecMap[TName] : never;
export type MountMode = "before" | "after" | "append" | "prepend" | "replace";
export type MountAt = "target" | {
    closest: string;
} | {
    query: string;
} | {
    withinClosest: {
        root: string;
        selector: string;
    };
};
export type ContainerSpec = {
    tag?: keyof HTMLElementTagNameMap;
    classNames?: string[];
};
export type OverlayAnchor = "top-left" | "top-right" | "bottom-left" | "bottom-right";
export type ElementSpec<TName extends string = ElementName> = {
    name: TName;
    props?: Record<string, unknown>;
    classNames?: string[];
};
export type OffsetSpec = {
    x?: number;
    y?: number;
};
export type OverlayLayoutSpec = {
    type: "overlay";
    anchor?: OverlayAnchor;
    zIndex?: number | string;
    offset?: OffsetSpec | ResponsiveValue<OffsetSpec>;
};
export type InlineLayoutSpec = {
    type: "inline";
    rowSelector?: string;
};
export type PlacementLayoutSpec = OverlayLayoutSpec | InlineLayoutSpec;
export type PlacementSpec<TDomElement extends HTMLElement = HTMLElement, TElementName extends ElementName = ElementName> = {
    id: string;
    target: Omit<CreateElementLocatorArgs, "onElementFound">;
    mount: {
        at?: MountAt;
        mode: MountMode;
    };
    layout?: PlacementLayoutSpec;
    breakpoints?: BreakpointsSpec;
    container?: ContainerSpec;
    element?: ElementSpec<TElementName> | RenderFn;
    /** Design tokens (typed when element name is known). */
    design?: DesignSpecForElementName<TElementName>;
    /** Custom CSS appended after defaults (one stylesheet per placement). */
    css?: string;
    onMount?: (ctx: MountContext<TDomElement>) => void;
    onUnmount?: (ctx: UnmountContext<TDomElement>) => void;
};
export type MountContext<T extends HTMLElement> = {
    id: string;
    targetEl: Element;
    renderTargetEl: Element;
    mountEl: T;
    containerEl?: HTMLElement;
    rowEl?: HTMLElement;
    cleanup: (fn: () => void) => void;
};
export type UnmountContext<T extends HTMLElement> = Omit<MountContext<T>, "cleanup">;
export type MountedElement<T extends HTMLElement> = {
    targetEl: HTMLElement;
    renderTargetEl: HTMLElement;
    mountEl: T;
    containerEl?: HTMLElement;
    rowEl?: HTMLElement;
    rowWasCreated?: boolean;
    rowInlineAttrPrevValue?: string | null;
    cleanupFns: Array<() => void>;
    ownsNode: boolean;
};
export type RenderFn = (spec: PlacementSpec<any, any>) => HTMLElement | Promise<HTMLElement>;
export {};