import { type Placement } from "@floating-ui/dom";
import { SwishApp } from "../swish";
import { CreateElementLocatorArgs } from "./dom-utils";
import { type SaveButtonStyle } from "./save-button-style";
/** The placement that wraps the theme's account link. Resolves to one of the
 *  SDK's own custom elements rather than a `<swish-ui>` component — see
 *  `NATIVE_ELEMENT_TAGS` in ../swish-ui/swish-ui.ts. */
export declare const ACCOUNT_ICON = "account-icon";
/** A placement's element name, or undefined when it renders via a factory. */
export declare const elementNameOf: (spec: {
    element?: ElementSpec<string> | RenderFn;
}) => string | undefined;
export declare function createPlacement<TDomElement extends HTMLElement = HTMLElement, TElementName extends ElementName = ElementName>(swish: SwishApp, rawSpec: 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;
};
export type ElementName = "save-button" | "header-button" | "list-detail-page" | "account-icon" | "notify-button";
export type SaveButtonDesignSpec = {
    background?: ResponsiveValue<string>;
    savedBackground?: ResponsiveValue<string>;
    color?: ResponsiveValue<string>;
    savedColor?: ResponsiveValue<string>;
    width?: ResponsiveValue<string | number>;
    height?: ResponsiveValue<string | number>;
    /** Was `radius`, which emitted `--swish-placement-radius` — a variable no
     *  stylesheet ever read, so corner radius never applied (SWI-2240). */
    borderRadius?: ResponsiveValue<string | number>;
    marginTop?: ResponsiveValue<string | number>;
    marginBottom?: ResponsiveValue<string | number>;
    /** Per-placement overrides of the global Save button icon design. */
    iconColor?: ResponsiveValue<string>;
    iconFill?: ResponsiveValue<string>;
    /** The icon's fill once saved. Blank falls back to `iconFill`, then to the
     *  look's saved fill (SWI-3358). */
    savedIconFill?: ResponsiveValue<string>;
    iconSize?: ResponsiveValue<string | number>;
    iconStrokeWidth?: ResponsiveValue<string | number>;
    /** An icon-only button's diameter. `width` / `height` outrank it. */
    backgroundSize?: ResponsiveValue<string | number>;
};
export type HomeButtonDesignSpec = {
    width?: ResponsiveValue<string | number>;
    height?: ResponsiveValue<string | number>;
    /** Per-placement overrides of the global Save button icon design. */
    iconColor?: ResponsiveValue<string>;
    iconSize?: ResponsiveValue<string | number>;
    iconStrokeWidth?: ResponsiveValue<string | number>;
    iconMarginLeft?: ResponsiveValue<string | number>;
    iconMarginRight?: ResponsiveValue<string | number>;
    /** The saved-count badge. */
    statusIndicatorBackground?: ResponsiveValue<string>;
    statusIndicatorTextColor?: ResponsiveValue<string>;
    statusIndicatorFontSize?: ResponsiveValue<string | number>;
    statusIndicatorFontWeight?: ResponsiveValue<string | number>;
    statusIndicatorSize?: ResponsiveValue<string | number>;
    statusIndicatorPadding?: ResponsiveValue<string | number>;
    statusIndicatorBorderRadius?: ResponsiveValue<string | number>;
    statusIndicatorOutline?: ResponsiveValue<string>;
    /** CSS `inset` shorthand picking the badge corner, e.g. "0 0 auto auto". */
    statusIndicatorInset?: ResponsiveValue<string>;
    statusIndicatorOffsetX?: ResponsiveValue<string | number>;
    statusIndicatorOffsetY?: ResponsiveValue<string | number>;
};
export type NotifyButtonDesignSpec = {
    background?: ResponsiveValue<string>;
    color?: ResponsiveValue<string>;
    borderRadius?: ResponsiveValue<string | number>;
    fontSize?: ResponsiveValue<string | number>;
    fontWeight?: ResponsiveValue<string | number>;
    width?: ResponsiveValue<string | number>;
    height?: ResponsiveValue<string | number>;
    marginTop?: ResponsiveValue<string | number>;
    marginBottom?: ResponsiveValue<string | number>;
};
type DesignSpecMap = {
    "save-button": SaveButtonDesignSpec;
    "header-button": HomeButtonDesignSpec;
    "notify-button": NotifyButtonDesignSpec;
};
export type DesignSpecForElementName<TName extends ElementName = ElementName> = TName extends keyof DesignSpecMap ? DesignSpecMap[TName] : never;
export type MountMode = "before" | "after" | "append" | "prepend" | "replace" | "wrap";
export type MountAt = "target" | {
    closest: string;
} | {
    query: string;
} | {
    nearest: 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 AnchoredLayoutSpec = {
    type: "anchored";
    to?: MountAt;
    placement?: Placement;
    /** Position inside the anchor element's bounds rather than adjacent to it. */
    inside?: boolean;
    offset?: number;
    zIndex?: number | string;
};
export type PlacementLayoutSpec = OverlayLayoutSpec | InlineLayoutSpec | AnchoredLayoutSpec;
export type PlacementSpec<TDomElement extends HTMLElement = HTMLElement, TElementName extends ElementName = ElementName> = {
    id: string;
    /**
     * When true the placement is configured but not rendered — the customiser's
     * eye control. It stays in the config so it can be un-hidden; nothing mounts
     * and no stylesheet is emitted until it's cleared.
     */
    hidden?: boolean;
    target: Omit<CreateElementLocatorArgs, "onElementFound">;
    mount: {
        at?: MountAt;
        mode: MountMode;
    };
    layout?: PlacementLayoutSpec;
    breakpoints?: BreakpointsSpec;
    container?: ContainerSpec;
    element?: ElementSpec<TElementName> | RenderFn;
    /**
     * The look a placed save button renders (SWI-3202): "on-image" over product
     * media as an icon-only chip, or "on-page" in the page flow with a label.
     * Each look has its own `ui.design.saveButtonOnImage` / `saveButtonOnPage`
     * tokens and its own preset. Data on the placement, not derived from the
     * layout; resolved through `resolveSaveButtonStyle` (a product-card context
     * is always on-image, otherwise the default is on-page) and reflected on the
     * host as `swish-save-style`. Ignored for every other element.
     */
    style?: SaveButtonStyle;
    /** 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 {};