import { FlowCoreMap } from '@emuanalytics/flow-rdf-core';
import * as lit_html from 'lit-html';
import * as lit from 'lit';
import { LitElement, CSSResultGroup, ReactiveController, ReactiveControllerHost, TemplateResult, PropertyValues, nothing, PropertyValueMap } from 'lit';
import * as chartjs_chart_matrix from 'chartjs-chart-matrix';
import * as chart_js from 'chart.js';
import { ChartComponentLike, Chart, ChartTypeRegistry, ChartOptions, ChartData, Plugin } from 'chart.js';
export { Chart as ChartJs } from 'chart.js';
import * as lit_html_directive_js from 'lit-html/directive.js';
import { Directive, PartInfo, ElementPart } from 'lit/directive.js';
import { AsyncDirective, PartInfo as PartInfo$1, ElementPart as ElementPart$1 } from 'lit/async-directive.js';

type FlowAfterCollapseEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-after-collapse': FlowAfterCollapseEvent;
    }
}

type FlowAfterExpandEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-after-expand': FlowAfterExpandEvent;
    }
}

type FlowAfterHideEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-after-hide': FlowAfterHideEvent;
    }
}

type FlowAfterShowEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-after-show': FlowAfterShowEvent;
    }
}

type FlowApplyEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-apply': FlowApplyEvent;
    }
}

type FlowBlurEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-blur': FlowBlurEvent;
    }
}

type FlowCancelEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-cancel': FlowCancelEvent;
    }
}

type FlowChangeEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-change': FlowChangeEvent;
    }
}

type FlowClearEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-clear': FlowClearEvent;
    }
}

type FlowCloseEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-close': FlowCloseEvent;
    }
}

type FlowCollapseEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-collapse': FlowCollapseEvent;
    }
}

type FlowCollapseTreeEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-collapse-tree': FlowCollapseTreeEvent;
    }
}

type FlowDragEvent = CustomEvent<{
    x: number;
    y: number;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-drag': FlowDragEvent;
    }
}

type FlowDragDropEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-drag-drop': FlowDragDropEvent;
    }
}

type FlowDragEndEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-drag-end': FlowDragEndEvent;
    }
}

type FlowDragOverEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-drag-over': FlowDragOverEvent;
    }
}

type FlowDragStartEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-drag-start': FlowDragStartEvent;
    }
}

type FlowErrorEvent = CustomEvent<{
    status?: number;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-error': FlowErrorEvent;
    }
}

type FlowExpandEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-expand': FlowExpandEvent;
    }
}

type FlowExpandTreeEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-expand-tree': FlowExpandTreeEvent;
    }
}

type FlowFinishEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-finish': FlowFinishEvent;
    }
}

type FlowFocusEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-focus': FlowFocusEvent;
    }
}

type FlowHideEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-hide': FlowHideEvent;
    }
}

type FlowHoverEvent = CustomEvent<{
    phase: 'start' | 'move' | 'end';
    value: number;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-hover': FlowHoverEvent;
    }
}

type FlowInitialFocusEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-initial-focus': FlowInitialFocusEvent;
    }
}

type FlowInputEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-input': FlowInputEvent;
    }
}

type FlowInvalidEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-invalid': FlowInvalidEvent;
    }
}

type FlowLazyChangeEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-lazy-change': FlowLazyChangeEvent;
    }
}

type FlowLazyLoadEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-lazy-load': FlowLazyLoadEvent;
    }
}

type FlowLoadEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-load': FlowLoadEvent;
    }
}

type FlowMapLoadEvent = CustomEvent<{
    map: FlowCoreMap;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-map-load': FlowMapLoadEvent;
    }
}

type FlowMutationEvent = CustomEvent<{
    mutationList: MutationRecord[];
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-mutation': FlowMutationEvent;
    }
}

type FlowPanelToggleEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-panel-toggle': FlowPanelToggleEvent;
    }
}

type FlowRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-remove': FlowRemoveEvent;
    }
}

type FlowRepositionEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-reposition': FlowRepositionEvent;
    }
}

type FlowRequestCloseEvent = CustomEvent<{
    source: 'close-button' | 'keyboard' | 'overlay';
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-request-close': FlowRequestCloseEvent;
    }
}

type FlowResizeEvent = CustomEvent<{
    entries: ResizeObserverEntry[];
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-resize': FlowResizeEvent;
    }
}

type EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? never : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? never : T : never : never;
type EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? T : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? T : never : T : T;
type EventTypesWithRequiredDetail = {
    [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;
};
type EventTypesWithoutRequiredDetail = {
    [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;
};
type WithRequired<T, K extends keyof T> = T & {
    [P in K]-?: T[P];
};
type SlEventInit<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']> : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']> : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'> : CustomEventInit : CustomEventInit;
type GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown> ? GlobalEventHandlersEventMap[T] : CustomEvent<unknown> : CustomEvent<unknown>;
declare class FlowRdfElement extends LitElement {
    dir: string;
    lang: string;
    /** Emits a custom event with more convenient defaults. */
    emit<T extends string & keyof EventTypesWithoutRequiredDetail>(name: EventTypeDoesNotRequireDetail<T>, options?: SlEventInit<T> | undefined): GetCustomEventType<T>;
    emit<T extends string & keyof EventTypesWithRequiredDetail>(name: EventTypeRequiresDetail<T>, options: SlEventInit<T>): GetCustomEventType<T>;
    /**
     * The component's standard tag name, such as `flow-ui-button`. `define()` registers the component with this tag name
     * when it isn't given one.
     *
     * Every component declares its own tag name. A component that extends another component does not inherit it.
     */
    static readonly tagName?: string;
    /**
     * The Flo.w RDF UI components that this component renders internally. `define()` registers each of them with its
     * standard tag name, so that a component registered on its own renders correctly.
     *
     * Each component lists only the elements it renders itself. The dependencies of those elements are registered in
     * turn by their own `define()`. Elements that the application supplies as content, such as the `<flow-ui-option>`
     * elements of a `<flow-ui-select>`, are not dependencies and must be registered separately.
     */
    static dependencies: (typeof FlowRdfElement)[];
    /**
     * Registers this component as a custom element, together with the elements it renders internally (see
     * `dependencies`).
     *
     * Use this to register only the components an application uses, instead of calling `registerComponents()`:
     *
     * ```typescript
     * import { FlowUiButton } from '@emuanalytics/flow-rdf-ui';
     *
     * // Registers <flow-ui-button> and the elements it renders, such as <flow-ui-icon>
     * FlowUiButton.define();
     * ```
     *
     * Without a tag name, the component is registered with its standard tag name (see `tagName`). Pass a tag name only
     * to register the component under a different one.
     *
     * It is safe to call this more than once. A tag name that is already registered, whether by this method, by
     * `registerComponents()` or by the application with another class, is left unchanged. Dependencies are always
     * registered with their standard tag names, even when the component itself is given a custom tag name.
     *
     * @param name - The tag name to register the component as. Defaults to the component's standard `flow-ui-*` tag
     * name.
     * @param elementConstructor - The class to register. Defaults to the class this method is called on.
     * @param options - Options passed to `customElements.define()`.
     */
    static define(name?: string, elementConstructor?: typeof FlowRdfElement, options?: ElementDefinitionOptions): void;
}
declare abstract class FlowRdfFormControl extends FlowRdfElement {
    static FLOW_UI_FORM_CONTROL_CLASS: string;
    class: string;
    /** The controls's size. */
    size: string;
    /** Indicates that the control should display a divider */
    divider: boolean;
    handleClassChange(): void;
    connectedCallback(): void;
    name: string;
    value: unknown;
    disabled?: boolean;
    defaultValue?: unknown;
    defaultChecked?: boolean;
    form?: string;
    pattern?: string;
    min?: number | string | Date;
    max?: number | string | Date;
    step?: number | 'any';
    required?: boolean;
    minlength?: number;
    maxlength?: number;
    abstract get validity(): ValidityState;
    abstract get validationMessage(): string;
    abstract checkValidity(): boolean;
    abstract getForm(): HTMLFormElement | null;
    abstract reportValidity(): boolean;
    abstract setCustomValidity(message: string): void;
    renderDivider(): lit_html.TemplateResult<1>;
}

/**
 *
 * @tagname flow-ui-icon
 * @summary Icons are symbols that can be used to represent various options within an application.
 * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/icon
 * @status stable
 * @since 2.0
 *
 * @event flow-ui-load - Emitted when the icon has loaded.
 * @event flow-ui-error - Emitted when the icon fails to load due to an error.
 *
 * @csspart svg - The internal SVG element.
 */
declare class FlowUiIcon extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
    private static resolveIcon;
    private svg;
    /** The name of the icon to draw. Available names depend on the icon library being used. */
    name?: string;
    /**
     * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
     * can result in XSS attacks.
     */
    src?: string;
    /**
     * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
     * ignored by assistive devices.
     */
    label: string;
    /** The name of a registered custom icon library. */
    library: string;
    connectedCallback(): void;
    firstUpdated(): void;
    disconnectedCallback(): void;
    private getUrl;
    /**
     * @internal
     */
    handleLabelChange(): void;
    /**
     * @internal
     */
    setIcon(): Promise<void>;
    render(): SVGElement | null;
}

/**
 * @tagname flow-ui-menu-item
 * @summary Menu items provide options for the user to pick from in a menu.
 * @docgroup menu
 *
 * @dependency flow-ui-icon
 *
 * @slot - The menu item's label.
 * @slot prefix - Used to prepend an icon or similar element to the menu item.
 * @slot suffix - Used to append an icon or similar element to the menu item.
 *
 * @csspart base - The component's base wrapper.
 * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
 * @csspart prefix - The prefix container.
 * @csspart label - The menu item label.
 * @csspart suffix - The suffix container.
 * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
 */
declare class FlowUiMenuItem extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon)[];
    private cachedTextLabel;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal */
    menuItem: HTMLElement;
    /** The type of menu item to render. To use `checked`, this value must be set to `checkbox` or `radio`. */
    type: 'normal' | 'checkbox' | 'radio';
    /** Draws the item in a checked state. */
    checked: boolean;
    /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
    value: string;
    /** Draws the menu item in a disabled state, preventing selection. */
    disabled: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private handleDefaultSlotChange;
    private handleHostClick;
    /** @internal */
    handleCheckedChange(): void;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleTypeChange(): void;
    /** @internal Returns a text label based on the contents of the menu item's default slot. */
    getTextLabel(): string;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-menu-item': FlowUiMenuItem;
    }
}

type FlowSelectEvent = CustomEvent<{
    item: FlowUiMenuItem;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-select': FlowSelectEvent;
    }
}

type FlowShowEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-show': FlowShowEvent;
    }
}

/**
 * @tagname flow-ui-carousel-item
 * @summary A carousel item represent a slide within a [carousel](./flow-ui-carousel).
 * @docgroup carousel
 *
 * @since 2.0
 * @status experimental
 *
 * @slot - The carousel item's content..
 *
 * @cssproperty --aspect-ratio - The slide's aspect ratio. Inherited from the carousel by default.
 *
 */
declare class FlowUiCarouselItem extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /** @internal */
    static isCarouselItem(node: Node): boolean;
    connectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-carousel-item': FlowUiCarouselItem;
    }
}

type FlowSlideChange = CustomEvent<{
    index: number;
    slide: FlowUiCarouselItem;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-slide-change': FlowSlideChange;
    }
}

type FlowStartEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-start': FlowStartEvent;
    }
}

type FlowTabHideEvent = CustomEvent<{
    name: string;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-tab-hide': FlowTabHideEvent;
    }
}

type FlowTabShowEvent = CustomEvent<{
    name: string;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-tab-show': FlowTabShowEvent;
    }
}

declare global {
    interface Set<T> {
        difference(other: Set<T>): Set<T>;
        intersection(other: Set<T>): Set<T>;
    }
}

/**
 * List of built-in edge routing names in registration order.
 *
 * @remarks
 * These routings are automatically registered when an EdgeRoutingManager is created:
 * - `orthogonal`: Routes edges with right-angle turns
 * - `bezier`: Routes edges with smooth Bezier curves
 * - `polyline`: Routes edges as straight line segments
 *
 * @category Types/Routing
 */
declare const BUILT_IN_EDGE_ROUTINGS: readonly ["orthogonal", "bezier", "polyline"];
/**
 * **Internal manager** for registration, selection, and execution of edge routing implementations.
 *
 * @remarks
 * **For application code, use {@link NgDiagramService} routing methods instead.**
 * This class is exposed primarily for middleware development where you can access it
 * via `context.edgeRoutingManager`.
 *
 * The manager comes pre-populated with built-in routings (`orthogonal`, `bezier`, `polyline`).
 * You can register custom routings at runtime.
 *
 * @example
 * ```typescript
 * const middleware: Middleware = {
 *   name: 'routing-optimizer',
 *   execute: (context, next) => {
 *     const routingManager = context.edgeRoutingManager;
 *     const defaultRouting = routingManager.getDefaultRouting();
 *     console.log('Using routing:', defaultRouting);
 *     next();
 *   }
 * };
 * ```
 *
 * @public
 * @since 0.8.0
 * @category Internals
 */
declare class EdgeRoutingManager {
    private routings;
    private defaultRouting;
    private getRoutingConfig;
    /**
     * Creates a new EdgeRoutingManager and registers built-in routings.
     *
     * @param defaultEdgeRouting - The routing to use when none is specified (defaults to `'orthogonal'`)
     * @param getRoutingConfiguration - Function returning the current routing configuration
     *
     * @internal
     */
    constructor(defaultEdgeRouting: EdgeRoutingName, getRoutingConfiguration: () => EdgeRoutingConfig);
    /**
     * Registers (or replaces) a routing implementation.
     *
     * @param routing - The routing instance to register. Its name must be non-empty.
     */
    registerRouting(routing: EdgeRouting): void;
    /**
     * Unregisters a routing by name.
     *
     * @param name - The routing name to remove
     */
    unregisterRouting(name: EdgeRoutingName): void;
    /**
     * Gets a routing implementation by name.
     *
     * @param name - The routing name to look up
     * @returns The routing implementation or `undefined` if not registered
     */
    getRouting(name: EdgeRoutingName): EdgeRouting | undefined;
    /**
     * Gets all registered routing names.
     *
     * @returns An array of registered routing names (built-in and custom)
     */
    getRegisteredRoutings(): EdgeRoutingName[];
    /**
     * Checks whether a routing is registered.
     *
     * @param name - The routing name to check
     * @returns `true` if registered; otherwise `false`
     */
    hasRouting(name: EdgeRoutingName): boolean;
    /**
     * Computes the routed points for an edge using the specified routing algorithm.
     *
     * @param routingName - The routing to use. If omitted or undefined, the default routing is used.
     * @param context - The routing context containing source/target nodes, ports, edge data, etc.
     * @returns The computed polyline as an array of points
     *
     * @example
     * ```typescript
     * const points = routingManager.computePoints('orthogonal', {
     *   sourceNode: node1,
     *   targetNode: node2,
     *   sourcePosition: { x: 100, y: 50 },
     *   targetPosition: { x: 300, y: 200 },
     *   edge: edge
     * });
     * ```
     */
    computePoints(routingName: EdgeRoutingName | undefined, context: EdgeRoutingContext): Point[];
    /**
     * Computes an SVG path string for the given points using the specified routing.
     *
     * @param routingName - The routing to use. If omitted or undefined, the default routing is used.
     * @param points - The points to convert into an SVG path string
     * @returns An SVG path string suitable for the `d` attribute of an SVG `<path>` element
     *
     * @example
     * ```typescript
     * const points = [{ x: 0, y: 0 }, { x: 100, y: 100 }, { x: 200, y: 100 }];
     * const path = routingManager.computePath('polyline', points);
     * // Returns: "M 0 0 L 100 100 L 200 100"
     * ```
     */
    computePath(routingName: EdgeRoutingName | undefined, points: Point[]): string;
    /**
     * Computes a point along the path at a given percentage.
     *
     * @remarks
     * If the selected routing implements `computePointOnPath`, it will be used.
     * Otherwise, falls back to linear interpolation between the first and last points.
     *
     * @param routingName - The routing to use. If omitted or undefined, the default routing is used.
     * @param points - The path points
     * @param percentage - Position along the path in range [0, 1] where 0 = start, 1 = end
     * @returns The interpolated point on the path
     *
     * @example
     * ```typescript
     * const points = [{ x: 0, y: 0 }, { x: 100, y: 100 }];
     * const midpoint = routingManager.computePointOnPath('polyline', points, 0.5);
     * // Returns: { x: 50, y: 50 }
     * const quarterPoint = routingManager.computePointOnPath('polyline', points, 0.25);
     * // Returns: { x: 25, y: 25 }
     * ```
     */
    computePointOnPath(routingName: EdgeRoutingName | undefined, points: Point[], percentage: number): Point;
    /**
     * Computes a point along the path at a given pixel distance from the start.
     *
     * @remarks
     * If the selected routing implements `computePointAtDistance`, it will be used.
     * Otherwise, falls back to segment-based distance traversal along the points array.
     * Negative values measure from the end of the path.
     *
     * @param routingName - The routing to use. If omitted, the default routing is used.
     * @param points - The path points
     * @param distancePx - Distance in pixels (positive = from start, negative = from end)
     * @returns The point on the path at the given distance
     */
    computePointAtDistance(routingName: EdgeRoutingName | undefined, points: Point[], distancePx: number): Point;
    /**
     * Sets the default routing to use for all edges when no specific routing is specified.
     *
     * @param name - The routing name to set as default
     */
    setDefaultRouting(name: EdgeRoutingName): void;
    /**
     * Gets the current default routing name.
     *
     * @returns The name of the current default routing
     */
    getDefaultRouting(): EdgeRoutingName;
}

/**
 * Type representing built-in edge routing names
 * @internal
 */
type BuiltInEdgeRoutingName = (typeof BUILT_IN_EDGE_ROUTINGS)[number];
/**
 * Type representing edge routing name - can be built-in or custom
 *
 * **Allowed values:** `'orthogonal' | 'bezier' | 'polyline'`
 *
 * @public
 * @since 0.8.0
 * @category Types/Routing
 */
type EdgeRoutingName = LooseAutocomplete<BuiltInEdgeRoutingName>;
/**
 * Context object containing all information needed for routing computation
 *
 * @public
 * @since 0.8.0
 * @category Types/Routing
 */
interface EdgeRoutingContext {
    /**
     * Source port location
     */
    sourcePoint: PortLocation;
    /**
     * Target port location
     */
    targetPoint: PortLocation;
    /**
     * The edge being routed
     */
    edge: Edge;
    /**
     * Source node
     */
    sourceNode?: Node$1;
    /**
     * Target node
     */
    targetNode?: Node$1;
    /**
     * Source port (if edge is connected to a specific port)
     */
    sourcePort?: Port;
    /**
     * Target port (if edge is connected to a specific port)
     */
    targetPort?: Port;
}
/**
 * Interface for routing implementations
 *
 * @public
 * @since 0.8.0
 * @category Types/Routing
 */
interface EdgeRouting {
    /**
     * Name identifier for the routing.
     */
    name: string;
    /**
     * Computes the points for the edge path.
     * This is the core routing logic that determines
     * how an edge is drawn between source and target.
     *
     * @param context - The routing context containing source/target info and layout state.
     * @param [config] - Optional configuration parameters for routing behavior.
     * @returns An array of points representing the routed edge path.
     */
    computePoints(context: EdgeRoutingContext, config?: EdgeRoutingConfig): Point[];
    /**
     * Generates an SVG path string from points.
     * Converts the routed points into a valid `d` attribute
     * for an `<path>` SVG element.
     *
     * @param points - The points defining the edge path.
     * @param [config] - Optional configuration parameters for path generation.
     * @returns An SVG path string.
     */
    computeSvgPath(points: Point[], config?: EdgeRoutingConfig): string;
    /**
     * Gets a point on the path at a given percentage (0-1).
     * Useful for positioning labels, decorations, or interaction handles.
     *
     * @param points - The points defining the path.
     * @param percentage - Position along the path (0 = start, 1 = end).
     * @returns The point at the given percentage along the path.
     */
    computePointOnPath?(points: Point[], percentage: number): Point;
    /**
     * Gets a point on the path at a given pixel distance from the start.
     * Negative values measure from the end of the path.
     *
     * @param points - The points defining the path.
     * @param distancePx - Distance in pixels (positive = from start, negative = from end).
     * @returns The point at the given distance along the path.
     */
    computePointAtDistance?(points: Point[], distancePx: number): Point;
}

/**
 * Interface representing size in the flow diagram
 *
 * @public
 * @since 0.8.0
 * @category Types/Geometry
 */
interface Size {
    /**
     * Width dimension
     */
    width: number;
    /**
     * Height dimension
     */
    height: number;
}
/**
 * Interface representing a point in the flow diagram
 *
 * @public
 * @since 0.8.0
 * @category Types/Geometry
 */
interface Point {
    /**
     * X coordinate of the point
     */
    x: number;
    /**
     * Y coordinate of the point
     */
    y: number;
}
/**
 * One of the four sides of a rectangular area.
 *
 * @public
 * @since 1.3.0
 * @category Types/Model
 */
type Side = 'top' | 'right' | 'bottom' | 'left';
/**
 * Interface representing a port side on a node in the diagram
 *
 * @public
 * @since 0.8.0
 * @category Types/Model
 */
type PortSide = Side;
/**
 * Interface representing a rect in the flow diagram
 *
 * @public
 * @since 0.8.0
 * @category Types/Geometry
 */
interface Rect {
    /**
     * X coordinate of the rect's top-left corner
     */
    x: number;
    /**
     * Y coordinate of the rect's top-left corner
     */
    y: number;
    /**
     * Width dimension
     */
    width: number;
    /**
     * Height dimension
     */
    height: number;
}
interface RectWithId extends Rect {
    id: string;
}
/**
 * Interface representing the location of a port on a node
 *
 * @public
 * @since 0.8.0
 * @category Types/Model
 */
type PortLocation = {
    side: PortSide;
} & Point;
type DataObject = object;
/**
 * @ignore
 */
type LooseAutocomplete<T> = T | (string & {});
type DeepPartial<T> = {
    [P in keyof T]?: T[P] extends (...args: unknown[]) => unknown ? T[P] : T[P] extends object ? DeepPartial<T[P]> : T[P];
};

/**
 * Type representing edge routing mode
 *
 * @public
 * @since 0.8.0
 * @category Types/Routing
 */
type RoutingMode = 'manual' | 'auto';
/**
 * Identifies one endpoint of an edge.
 *
 * @public
 * @since 1.4.0
 * @category Types/Model
 */
type EdgeEnd = 'source' | 'target';
/**
 * Interface representing an edge (connection) between nodes in the flow diagram
 *
 * @public
 * @since 0.8.0
 * @category Types/Model
 */
interface Edge<T extends DataObject = DataObject> {
    /**
     * The unique identifier for the edge.
     */
    id: string;
    /**
     * The source node of the edge. If empty string it will use sourcePosition.
     */
    source: string;
    /**
     * The target node of the edge. If empty string it will use targetPosition.
     */
    target: string;
    /**
     * The data associated with the edge.
     */
    data: T;
    /**
     * The points of the edge defining the path.
     */
    points?: Point[];
    /**
     * Whether the edge is selected
     */
    selected?: boolean;
    /**
     * Whether the edge is hidden. When not set, the edge is visible.
     *
     * A hidden edge keeps its geometry, does not block initialization or
     * `waitForMeasurements`, and is not routed. User interactions ignore it:
     * select-all, box selection and zoomToFit bounds. In the default render
     * mode the edge stays in the DOM with `display: none`. With virtualization
     * enabled it is removed from the DOM instead. An edge is also effectively
     * hidden when either endpoint node is effectively hidden.
     *
     * Programmatic APIs such as `select` and the z-order commands do not skip
     * hidden elements. It is up to the caller whether to use them on hidden
     * elements.
     *
     * Set by the user; the library only reads it.
     * @see {@link computedHidden} for the derived effective visibility.
     * @since 1.4.0
     */
    hidden?: boolean;
    /**
     * Whether the user can relink the ends of this edge. `true` allows both
     * ends, `'source'` or `'target'` allows only that end, and `false` allows
     * neither. When not set, `linking.defaultRelinkable` applies.
     *
     * Set by the user; the library only reads it.
     * @since 1.4.0
     */
    relinkable?: boolean | EdgeEnd;
    /**
     * @readonly
     * @remarks ComputedHidden is computed by the system and should not be set manually.
     * The effective visibility of the edge: `true` when its own `hidden` flag
     * or a template binding is set, or when either endpoint node is effectively
     * hidden.
     * @since 1.4.0
     */
    readonly computedHidden?: boolean;
    /**
     * The type of the edge declared in edgeTemplateMap.
     */
    type?: string;
    /**
     * The port of the source node.
     */
    sourcePort?: string;
    /**
     * The port of the target node.
     */
    targetPort?: string;
    /**
     * The id of the source arrowhead of the edge.
     */
    sourceArrowhead?: string;
    /**
     * The id of the target arrowhead of the edge.
     */
    targetArrowhead?: string;
    /**
     * The routing of the edge.
     */
    routing?: EdgeRoutingName;
    /**
     * The routing mode of the edge.
     * 'auto' (default): Points are computed automatically based on routing algorithm
     * 'manual': Points are provided by the user and routing algorithm is used to render the path
     */
    routingMode?: RoutingMode;
    /**
     * The position of the edge start.
     */
    sourcePosition?: Point;
    /**
     * The position of the edge end.
     */
    targetPosition?: Point;
    /**
     * Whether the edge is temporary.
     */
    temporary?: boolean;
    /**
     * The z-order of the edge. When set, overrides the default edge z-index
     * (which is derived from connected nodes). When a connected node is selected,
     * the node's elevation is added so the edge stays visible above elevated nodes.
     *
     * Set by `bringToFront` / `sendToBack` commands, or manually.
     * @see {@link computedZIndex} for the final rendered z-index.
     */
    zOrder?: number;
    /**
     * @readonly
     * @remarks ComputedZIndex is computed by the system and should not be set manually.
     * The final z-index applied to the DOM element for rendering order.
     * Without `zOrder`: derived from `max(source, target)` connected node z-indices.
     * With `zOrder`: uses the explicit value plus connected node elevation.
     */
    readonly computedZIndex?: number;
    /**
     * @readonly
     * @remarks MeasuredLabels are computed by the system and should not be set manually.
     * The labels of the edge with computed position and size.
     */
    readonly measuredLabels?: EdgeLabel[];
}
/**
 * Type representing an absolute edge label position in pixels.
 * Positive values measure from the source, negative from the target.
 *
 * @example `'30px'` — 30px from source, `'-20px'` — 20px from target
 *
 * @public
 * @since 1.1.0
 * @category Types/Model
 */
type AbsoluteEdgeLabelPosition = `${number}px`;
/**
 * Type representing edge label position — either relative (0-1) or absolute (`'Npx'`).
 *
 * - **Relative** (`number`, 0-1): percentage along the path. Clamped to [0, 1].
 * - **Absolute** (`string`, `'Npx'`): pixel distance from source (positive) or target (negative). Clamped to path length.
 *
 * @public
 * @since 1.1.0
 * @category Types/Model
 */
type EdgeLabelPosition = number | AbsoluteEdgeLabelPosition;
/**
 * Interface representing a label of an edge.
 *
 * @public
 * @since 0.8.0
 * @category Types/Model
 */
interface EdgeLabel {
    /**
     * The id of the label.
     */
    id: string;
    /**
     * The position of the label on the edge.
     *
     * - **Relative** (`number`, 0-1): 0 is the source, 1 is the target, 0.5 is the midpoint.
     * - **Absolute** (`'Npx'`): pixel distance from source (positive) or target (negative).
     *
     * @example
     * ```ts
     * positionOnEdge: 0.5      // midpoint (relative)
     * positionOnEdge: '30px'   // 30px from source (absolute)
     * positionOnEdge: '-20px'  // 20px from target (absolute)
     * ```
     */
    positionOnEdge: EdgeLabelPosition;
    /**
     * The position of the label on flow.
     */
    position?: Point;
    /**
     * The size of the label.
     */
    size?: Size;
}
/**
 * The origin point options for port placement.
 * @category Types/Model
 */
type OriginPoint = 'topLeft' | 'topCenter' | 'topRight' | 'centerLeft' | 'center' | 'centerRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';

/**
 * Interface representing all possible node types in the diagram
 *
 * @public
 * @since 0.8.0
 * @category Types/Model
 */
type Node$1<T extends DataObject = DataObject> = SimpleNode<T> | GroupNode<T>;
/**
 * Interface representing a group node in the diagram
 *
 * @public
 * @since 0.8.0
 * @category Types/Model
 */
interface GroupNode<T extends DataObject = DataObject> extends SimpleNode<T> {
    /**
     * Flag indicating the node is a group
     */
    isGroup: true;
    /**
     * Whether the group is highlighted. For example, when a node is being dragged over it.
     */
    highlighted: boolean;
}
/**
 * Interface representing the most basic node in the diagram
 *
 * @public
 * @since 0.8.0
 * @category Types/Model
 */
interface SimpleNode<T extends DataObject = DataObject> {
    /**
     * The unique identifier for the node.
     */
    id: string;
    /**
     * The position of the node in the diagram.
     */
    position: Point;
    /**
     * The data associated with the node.
     */
    data: T;
    /**
     * The type of the node declared in nodeTemplateMap.
     */
    type?: string;
    /**
     * Whether the node is selected.
     */
    selected?: boolean;
    /**
     * Whether the node is hidden. When not set, the node is visible.
     *
     * A hidden node keeps its size and position and does not block
     * initialization or `waitForMeasurements`. User interactions ignore it:
     * hit-testing, select-all, box selection, keyboard move, drag, linking,
     * zoomToFit bounds and edge routing. In the default render mode the node
     * stays in the DOM with `display: none`. With virtualization enabled it is
     * removed from the DOM instead; its geometry stays in the model and is
     * measured again when the node becomes visible. Hiding a group hides all
     * of its descendants. Hiding a node hides the edges connected to it.
     *
     * Programmatic APIs such as `select`, `centerOnNode` and the z-order
     * commands do not skip hidden elements. It is up to the caller whether to
     * use them on hidden elements.
     *
     * Set by the user; the library only reads it.
     * @see {@link computedHidden} for the derived effective visibility.
     * @since 1.4.0
     */
    hidden?: boolean;
    /**
     * @readonly
     * @remarks ComputedHidden is computed by the system and should not be set manually.
     * The effective visibility of the node: `true` when its own `hidden` flag
     * or a template binding is set, or when any ancestor group is effectively
     * hidden.
     * @since 1.4.0
     */
    readonly computedHidden?: boolean;
    /**
     * The size of the node.
     */
    size?: Size;
    /**
     * Whether the size of the node is automatically resized based on the content.
     */
    autoSize?: boolean;
    /**
     * The z-order of the node. Controls relative ordering among nodes on the same hierarchy level.
     * With proper values, it can also influence ordering across different hierarchy levels,
     * since each nesting level adds +1 to the computed z-index per child.
     * - Root nodes: used directly as the base z-index (negative values allowed).
     * - Grouped nodes: acts as a minimum floor — cannot go below the parent's z-index.
     *
     * Set by `bringToFront` / `sendToBack` commands, or manually.
     * @see {@link computedZIndex} for the final rendered z-index.
     */
    zOrder?: number;
    /**
     * @readonly
     * @remarks ComputedZIndex is computed by the system and should not be set manually.
     * The final z-index applied to the DOM element for rendering order.
     * Computed from `zOrder`, group hierarchy, and selection elevation.
     * Children are always above their parent group.
     */
    readonly computedZIndex?: number;
    /**
     * @readonly
     * @remarks MeasuredPorts are computed by the system and should not be set manually.
     * The ports of the node with computed position and size.
     */
    readonly measuredPorts?: Port[];
    /**
     * Whether the node is resizable.
     */
    resizable?: boolean;
    /**
     * Whether the node is rotatable.
     */
    rotatable?: boolean;
    /**
     * Whether the node is draggable.
     */
    draggable?: boolean;
    /**
     * The angle of the node from 0 to 360.
     */
    angle?: number;
    /**
     * The id of the parent node.
     */
    groupId?: Node$1<T>['id'];
    /**
     * @readonly
     * @remarks MeasuredBounds are computed by the system and should not be set manually.
     * Bounding box that encompasses the node including its ports, accounting for rotation.
     */
    measuredBounds?: Rect;
}
/**
 * Interface representing a port in the node.
 *
 * @public
 * @since 0.8.0
 * @category Types/Model
 */
interface Port {
    /**
     * The unique identifier for the port.
     */
    id: string;
    /**
     * The position of the port in the node.
     */
    position?: Point;
    /**
     * The size of the port.
     */
    size?: Size;
    /**
     * The type of the port.
     */
    type: 'source' | 'target' | 'both';
    /**
     * The id of the node that the port belongs to.
     */
    nodeId: string;
    /**
     * The side of the node that the port is on.
     */
    side: PortSide;
}
/**
 * Port properties owned by the measurement pipeline rather than by the
 * registering component. They are computed from the DOM and must never be
 * overwritten by authored data when a port component re-registers; every
 * other {@link Port} property is authored and is reconciled on re-registration.
 *
 * @internal
 */
declare const MEASURED_PORT_PROPERTIES: readonly ["size", "position"];
/**
 * Union of the {@link MEASURED_PORT_PROPERTIES} keys. Types the measurement
 * pipeline's view of a port, e.g. `Pick<Port, 'id' | MeasuredPortProperty>`.
 *
 * @internal
 */
type MeasuredPortProperty = (typeof MEASURED_PORT_PROPERTIES)[number];

/**
 * Position for diagram overlay panels (minimap, watermark, etc.).
 *
 * @public
 * @since 1.0.0
 * @category Types
 */
type NgDiagramPanelPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

type InputEventName = 'copy' | 'cut' | 'paste' | 'select' | 'selectAll' | 'deleteSelection' | 'panning' | 'keyboardPanning' | 'wheelPanning' | 'pointerMoveSelection' | 'keyboardMoveSelection' | 'resize' | 'zoom' | 'linking' | 'relinking' | 'rotate' | 'paletteDrop' | 'boxSelection' | 'undo' | 'redo' | 'cancelInteraction';
interface BaseInputEvent {
    name: InputEventName;
    id: string;
    timestamp: number;
    modifiers: InputModifiers;
}
/**
 * Interface representing keyboard and modifier keys state during an input event.
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Shortcuts
 */
interface InputModifiers {
    /**
     * Ctrl key (Windows/Linux) OR Cmd key (Mac)
     */
    primary: boolean;
    /**
     * Alt key
     */
    secondary: boolean;
    /**
     * Shift key
     */
    shift: boolean;
    /**
     * Windows key OR Cmd key
     */
    meta: boolean;
}

/**
 * Keyboard movement actions that map to directional events
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Shortcuts
 */
type KeyboardMoveSelectionAction = 'keyboardMoveSelectionUp' | 'keyboardMoveSelectionDown' | 'keyboardMoveSelectionLeft' | 'keyboardMoveSelectionRight';
/**
 * Keyboard panning actions that map to directional events
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Shortcuts
 */
type KeyboardPanAction = 'keyboardPanUp' | 'keyboardPanDown' | 'keyboardPanLeft' | 'keyboardPanRight';
/**
 * Keyboard zooming actions
 *
 * @public
 * @since 1.1.0
 * @category Types/Configuration/Shortcuts
 */
type KeyboardZoomAction = 'keyboardZoomIn' | 'keyboardZoomOut';
/**
 * Pointer-only action names that can only be triggered by pointer events with modifiers
 * (e.g., Shift+Click, Ctrl+Click)
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Shortcuts
 */
type PointerOnlyActionName = 'multiSelection' | 'boxSelection';
/**
 * Wheel-only action names that can only be triggered by wheel events with modifiers
 * (e.g., Shift+Wheel, Ctrl+Wheel)
 *
 * @public
 * @since 1.1.0
 * @category Types/Configuration/Shortcuts
 */
type WheelOnlyActionName = 'zoom';
/**
 * Keyboard action names that can be triggered by keyboard events
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Shortcuts
 */
type KeyboardActionName = KeyboardMoveSelectionAction | KeyboardPanAction | KeyboardZoomAction | Extract<InputEventName, 'cut' | 'paste' | 'copy' | 'deleteSelection' | 'undo' | 'redo' | 'selectAll' | 'cancelInteraction'>;

/**
 * Normalized keyboard input for shortcut matching
 * Contains the key and already-normalized modifiers
 */
interface NormalizedKeyboardInput {
    key?: string;
    modifiers: InputModifiers;
}
/**
 * Defines a keyboard shortcut binding with a key
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Shortcuts
 */
interface KeyboardShortcutBinding {
    /**
     * Key value (e.g., 'c', 'Delete', 'ArrowUp')
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values - Complete list of valid key values
     */
    key: string;
    /** Required modifier keys (all are optional - omitted means no modifiers required) */
    modifiers?: Partial<InputModifiers>;
}
/**
 * Defines a modifier-only shortcut binding (for pointer events)
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Shortcuts
 */
interface ModifierOnlyShortcutBinding {
    /**
     * Key must not be present for modifier-only bindings
     */
    key?: never;
    /** Required modifier keys - at least one modifier is typically required */
    modifiers: Partial<InputModifiers>;
}
/**
 * Keyboard shortcut definition with key-based bindings
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Shortcuts
 */
interface KeyboardShortcutDefinition {
    /** Action name for keyboard events */
    actionName: KeyboardActionName;
    /** Key-based bindings (at least one must have a key) */
    bindings: (KeyboardShortcutBinding | ModifierOnlyShortcutBinding)[];
}
/**
 * Pointer-only shortcut definition with modifier-only bindings
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Shortcuts
 */
interface PointerOnlyShortcutDefinition {
    /** Action name for pointer events */
    actionName: PointerOnlyActionName;
    /** Modifier-only bindings (keys are not allowed) */
    bindings: ModifierOnlyShortcutBinding[];
}
/**
 * Wheel-only shortcut definition with modifier-only bindings
 *
 * @public
 * @since 1.1.0
 * @category Types/Configuration/Shortcuts
 */
interface WheelOnlyShortcutDefinition {
    /** Action name for wheel events */
    actionName: WheelOnlyActionName;
    /** Modifier-only bindings (keys are not allowed) */
    bindings: ModifierOnlyShortcutBinding[];
}
/**
 * Shortcut definition for registering keyboard and pointer shortcuts
 *
 * This is a discriminated union that enforces:
 * - Pointer-only actions (multiSelection, boxSelection) can only have modifier-only bindings
 * - Wheel-only actions (zoom) can only have modifier-only bindings
 * - Keyboard actions must have at least one key-based binding
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Shortcuts
 */
type ShortcutDefinition = KeyboardShortcutDefinition | PointerOnlyShortcutDefinition | WheelOnlyShortcutDefinition;

/**
 * Configuration for node resizing behavior.
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Features
 */
interface ResizeConfig {
    /**
     * Returns the minimum allowed size for a node.
     * @param node The node to compute the minimum size for.
     * @default () => ({ width: 20, height: 20 })
     */
    getMinNodeSize: (node: Node$1) => Size;
    /**
     * Allows resizing a group node smaller than its children bounds.
     * When set to false, a group node cannot be resized smaller than the bounding box of its children.
     * By default a group can be resized below children size.
     * @default true
     */
    allowResizeBelowChildrenBounds: boolean;
    /**
     * The default resizable state for nodes.
     * @default true
     */
    defaultResizable: boolean;
}
/**
 * Configuration for linking (edge creation) behavior.
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Features
 */
interface LinkingConfig {
    /**
     * The maximum distance (in pixels) at temporary edge will snap to target port.
     * @default 10
     */
    portSnapDistance: number;
    /**
     * Validates whether a connection between two nodes and ports is allowed.
     *
     * Called for every operation that creates a connection: drawing a new edge,
     * relinking an endpoint of an existing edge, and `attachEdge`. The optional
     * `context` tells which operation is being validated (since 1.4.0).
     *
     * `source` is `null` for draws started with `startLinkingFromPosition`.
     * When an edge is relinked or attached, the other end of that edge can be
     * free (dangling); the `source` or `target` for that end is then `null`.
     *
     * @param source The source node, or `null` when the source end is free.
     * @param sourcePort The source port.
     * @param target The target node, or `null` when the target end is free.
     * @param targetPort The target port.
     * @param context The operation being validated (`draw` when omitted).
     * @returns True if the connection is valid, false otherwise.
     * @default () => true
     */
    validateConnection: (source: Node$1 | null, sourcePort: Port | null, target: Node$1 | null, targetPort: Port | null, context?: ConnectionValidationContext) => boolean;
    /**
     * Allows customization of the temporary edge object shown while the user is dragging to create a new edge.
     * Receives the default temporary edge (with source/target node/port IDs and positions)
     * and should return a fully-formed Edge object for rendering the temporary edge.
     * @param defaultTemporaryEdgeData The default temporary edge data (may be incomplete).
     * @returns The Edge object to use for the temporary edge.
     * @default (edge) => Edge
     */
    temporaryEdgeDataBuilder: (defaultTemporaryEdgeData: Edge) => Edge;
    /**
     * Allows customization of the final edge object when the user completes edge creation.
     * Receives the default finalized edge (with source/target node/port IDs)
     * and should return a fully-formed Edge object to be added to the flow.
     * @param defaultFinalEdgeData The default finalized edge data (may be incomplete).
     * @returns The Edge object to use for the finalized edge.
     * @default (edge) => Edge
     */
    finalEdgeDataBuilder: (defaultFinalEdgeData: Edge) => Edge;
    /**
     * Enable edge panning when the routed edge is near the edge of the viewport.
     *
     * @default true
     */
    edgePanningEnabled: boolean;
    /**
     * Multiplier for edge panning speed while routing edge is near the edge of the viewport.
     *
     * @default 10
     */
    edgePanningForce: number;
    /**
     * The threshold in pixels for edge panning to start.
     * If the mouse pointer is within this distance from the edge of the viewport, panning will be triggered.
     *
     * @default 30
     */
    edgePanningThreshold: number;
    /**
     * Whether to select a node when the user presses a port to start linking.
     * When true (default), pressing a port also triggers node selection events.
     * When false, port press only initiates the linking gesture without selecting the node.
     *
     * @default true
     * @since 1.2.0
     */
    selectNodeOnPortPress: boolean;
    /**
     * Default `relinkable` value for edges that do not set their own. `true`
     * lets the user drag both ends of an edge to another port, `'source'` or
     * `'target'` allows only that end, and `false` allows neither. A selected
     * edge shows a handle at each end that can be relinked. Dragging a handle
     * previews the new connection and commits it on drop. A drop on empty
     * canvas detaches the endpoint when `danglingEdges.enabled` is true;
     * otherwise the relink is reverted.
     *
     * Relinking uses the same `portSnapDistance`, edge panning and
     * `temporaryEdgeDataBuilder` settings as edge drawing. Each drop is
     * validated with `validateConnection`, which receives a context with
     * `reason: 'relink'` and the edge being relinked.
     *
     * @default false
     * @since 1.4.0
     */
    defaultRelinkable: boolean | EdgeEnd;
}
/**
 * Configuration for dangling edges: edges with one or both endpoints not
 * connected to any node. A free endpoint has an empty `source` or `target`,
 * and its position is stored in `sourcePosition` or `targetPosition`.
 *
 * The feature is off by default: an edge dropped on empty canvas is
 * discarded, and deleting a node deletes its edges.
 *
 * @public
 * @since 1.4.0
 * @category Types/Configuration/Features
 */
interface DanglingEdgesConfig {
    /**
     * Master switch for dangling edges. When true, an edge drawn onto empty
     * canvas is kept as a dangling edge instead of being discarded, and a
     * relink dropped on empty canvas detaches that endpoint. It also enables
     * `detachEdge` and `startLinkingFromPosition`.
     *
     * A drop on a port that the edge cannot connect to (for example a port
     * with the wrong direction) does not count as a drop on empty canvas. Such
     * a draw is discarded and such a relink is reverted.
     * @default false
     */
    enabled: boolean;
    /**
     * Decides per edge whether a draw or relink dropped on empty canvas keeps
     * the edge as a dangling edge. Called only when `enabled` is true. For a
     * draw, `edge` is the final edge, after `linking.finalEdgeDataBuilder` has
     * run. For a relink, `edge` is the edge as it would be after the detach.
     * Returning false discards the drawn edge or reverts the relink, which is
     * also what happens when the feature is off.
     * @param edge The edge that would be kept.
     * @param dropPosition The position where the pointer was released, in flow coordinates.
     * @default undefined (keep every edge)
     */
    shouldKeepOnDrop?: (edge: Edge, dropPosition: Point) => boolean;
    /**
     * When true, deleting a node keeps its edges as dangling edges instead of
     * deleting them. Each freed endpoint stays anchored where its port was.
     * Requires `enabled` to be true.
     *
     * An edge is still deleted, not detached, in these cases:
     * - The edge itself is part of the deleted selection. An explicit delete
     *   always wins.
     * - The edge is hidden only because of the node it loses, for example the
     *   edges of the collapsed children of a deleted group. Detaching it would
     *   turn invisible wiring into a visible dangling edge. An edge that is
     *   hidden for another reason (its own `hidden` flag, a template binding,
     *   or a hidden node at the other end) is detached like any other edge and
     *   stays hidden.
     * - The edge loses both endpoints in the same delete. It becomes a dual
     *   dangling edge only when {@link shouldDetachOnNodeDelete} is provided
     *   and returns true for both ends.
     * @default false
     */
    detachOnNodeDelete: boolean;
    /**
     * Decides per endpoint whether it is detached (kept as a free endpoint) or
     * deleted together with the node. Called only when `enabled` and
     * `detachOnNodeDelete` are true, once for each endpoint that loses its
     * node. Returning false deletes the edge. An edge that loses both
     * endpoints at once survives as a dual dangling edge only when this
     * callback is provided and returns true for both ends.
     * @param edge The edge that loses a node.
     * @param deletedNode The node being deleted.
     * @param end The endpoint of `edge` that is connected to `deletedNode`.
     * @default undefined (detach every edge, except edges losing both ends)
     */
    shouldDetachOnNodeDelete?: (edge: Edge, deletedNode: Node$1, end: EdgeEnd) => boolean;
}
/**
 * Context passed to {@link LinkingConfig.validateConnection}. It describes the
 * operation that is being validated.
 *
 * - `draw` — a new edge is being drawn, by a pointer gesture or by
 *   `startLinking` / `startLinkingFromPosition`.
 * - `relink` — an endpoint of `edge` is being dragged to a new target.
 * - `attach` — `NgDiagramModelService.attachEdge` connects an endpoint of `edge`.
 *
 * @public
 * @since 1.4.0
 * @category Types/Configuration/Features
 */
interface ConnectionValidationContext {
    /** The operation being validated. */
    reason: 'draw' | 'relink' | 'attach';
    /** The existing edge whose endpoint is being connected (relink and attach only). */
    edge?: Edge;
    /** Which endpoint of `edge` is being connected (relink and attach only). */
    end?: EdgeEnd;
}
/**
 * Configuration for node grouping behavior.
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Features
 */
interface GroupingConfig {
    /**
     * Determines if a node can be grouped into a group node.
     * @param node The node to group.
     * @param group The group node.
     * @returns True if the node can be grouped, false otherwise.
     * @default () => true
     */
    canGroup: (node: Node$1, group: Node$1) => boolean;
}
/**
 * Configuration for zoom-to-fit behavior.
 *
 * @category Types/Configuration/Features
 */
interface ZoomToFitConfig {
    /**
     * The default padding (in pixels) to use for zoom-to-fit operations.
     * Supports CSS-like padding syntax:
     * - Single number: applies to all sides
     * - [v, h]: vertical, horizontal
     * - [t, h, b]: top, horizontal, bottom
     * - [t, r, b, l]: top, right, bottom, left
     * Can be overridden per command invocation.
     * @default 50
     */
    padding: number | [number, number] | [number, number, number] | [number, number, number, number];
    /**
     * Whether to automatically zoom to fit all content when the diagram is initialized.
     * @default false
     */
    onInit: boolean;
}
/**
 * Configuration for zooming behavior.
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Features
 */
interface ZoomConfig {
    /**
     * The minimum allowed zoom level.
     * @default 0.01
     */
    min: number;
    /**
     * The maximum allowed zoom level.
     * @default 10.0
     */
    max: number;
    /**
     * The zoom step increment.
     * @default 0.03
     */
    step: number;
    /**
     * Configuration for zoom-to-fit operations.
     */
    zoomToFit: ZoomToFitConfig;
}
/**
 * Configuration for the diagram background.
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Features
 */
interface BackgroundConfig {
    /**
     * Distance in pixels between consecutive dots in the background pattern.
     * @default 30
     */
    dotSpacing?: number;
    /**
     * The size of the smallest grid cell (minor grid spacing).
     * Supports rectangular grids by specifying different width and height values.
     * @default { width: 10, height: 10 }
     */
    cellSize?: Size;
    /**
     * Specifies how often major grid lines occur, measured in counts of minor grid cells.
     * E.g., { x: 5, y: 5 } draws a major vertical line every 5 minor columns and
     * a major horizontal line every 5 minor rows.
     * @default { x: 5, y: 5 }
     */
    majorLinesFrequency?: {
        x: number;
        y: number;
    };
}
/**
 * Configuration for node rotation behavior.
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Features
 */
interface NodeRotationConfig {
    /**
     * Determines if rotation snapping should be enabled for a node.
     * @param node The node to check for rotation snapping.
     * @returns True if rotation should snap, false otherwise.
     * @default () => false
     */
    shouldSnapForNode: (node: Node$1) => boolean;
    /**
     * Computes the snap angle for a node's rotation.
     * @param node The node to compute the snap angle for.
     * @returns The angle in degrees to snap to, or null if default snapping should be used.
     * @default () => null
     */
    computeSnapAngleForNode: (node: Node$1) => number | null;
    /**
     * The default snap angle in degrees. Used if computeSnapAngleForNode returns null.
     * @default 30
     */
    defaultSnapAngle: number;
    /**
     * The default rotatable state for nodes.
     * @default true
     */
    defaultRotatable: boolean;
}
/**
 * Configuration for node dragging behavior.
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Features
 */
interface SnappingConfig {
    /**
     * Determines if a node should snap to grid while dragging.
     * @param node The node being dragged.
     * @returns True if the node should snap to grid, false otherwise.
     * @default () => false
     */
    shouldSnapDragForNode: (node: Node$1) => boolean;
    /**
     * Determines if a node should snap to grid while resizing.
     * @param node The node being resized.
     * @returns True if the node should snap to grid, false otherwise.
     * @default () => false
     */
    shouldSnapResizeForNode: (node: Node$1) => boolean;
    /**
     * Computes the snap size for a node while dragging. If null is returned, a default snap size will be used.
     * If computeSnapForNodeDrag is used, it takes precedence over defaultDragSnap.
     * @param node The node to compute the snap size for dragging.
     * @returns The snap size for the node while dragging, or null.
     * @default () => null
     */
    computeSnapForNodeDrag: (node: Node$1) => Size | null;
    /**
     * Computes the snap size for a node while resizing. If null is returned, a default snap size will be used.
     * @param node The node to compute the snap size for resizing.
     * @returns The snap size for the node while resizing, or null.
     * @default () => null
     */
    computeSnapForNodeSize: (node: Node$1) => Size | null;
    /**
     * Computes the snap offset for a node while resizing. The snapped size follows the
     * sequence `offset + n * snap` per axis, so a node with a 60px header snapping every
     * 50px can snap to 60, 110, 160, ... instead of 50, 100, 150, ...
     * If null is returned, {@link defaultResizeSnapOffset} is used.
     * If computeSnapOffsetForNodeSize is used, it takes precedence over defaultResizeSnapOffset.
     * @param node The node to compute the snap offset for resizing.
     * @returns The snap offset for the node while resizing, or null.
     * @default () => null
     * @since 1.3.0
     */
    computeSnapOffsetForNodeSize: (node: Node$1) => Size | null;
    /**
     * The default snap size for node dragging.
     * If computeSnapForNodeDrag is used, it takes precedence over this value.
     * @default { width: 10, height: 10 }
     */
    defaultDragSnap: Size;
    /**
     * The default snap size for node resizing.
     * @default { width: 10, height: 10 }
     */
    defaultResizeSnap: Size;
    /**
     * The default snap offset for node resizing. The snapped size follows the
     * sequence `offset + n * snap` per axis (see {@link computeSnapOffsetForNodeSize}).
     * If computeSnapOffsetForNodeSize is used, it takes precedence over this value.
     * @default { width: 0, height: 0 }
     * @since 1.3.0
     */
    defaultResizeSnapOffset: Size;
}
/**
 * Configuration for selection moving behavior.
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Features
 */
interface SelectionMovingConfig {
    /**
     * Enable edge panning when the moved node is near the edge of the viewport.
     *
     * @default true
     */
    edgePanningEnabled: boolean;
    /**
     * Multiplier for edge panning speed while dragging nodes near the edge of the viewport.
     *
     * @default 10
     */
    edgePanningForce: number;
    /**
     * The threshold in pixels for edge panning to start.
     * If the mouse pointer is within this distance from the edge of the viewport, panning will be triggered.
     *
     * @default 30
     */
    edgePanningThreshold: number;
}
/**
 * Configuration for z-index layering behavior.
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Features
 */
interface ZIndexConfig {
    /**
     * Whether z-index middleware is enabled.
     * @default true
     */
    enabled: boolean;
    /**
     * The z-index value added to selected elements' computed z-index.
     * Applied cumulatively — a selected child inside a selected parent
     * receives this value twice (once from the parent's elevation, once from its own).
     * @default 10000
     */
    selectedZIndex: number;
    /**
     * The z-index value for temporary edge.
     * @default 2147483647
     */
    temporaryEdgeZIndex: number;
    /**
     * Whether edges should appear above their connected nodes.
     * @default false
     */
    edgesAboveConnectedNodes: boolean;
    /**
     * Whether selected elements should be elevated by adding `selectedZIndex` to their computed z-index.
     * @default true
     */
    elevateOnSelection: boolean;
}
/**
 * Configuration for edge routing behavior.
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Features
 */
interface EdgeRoutingConfig {
    /**
     * The default edge routing algorithm to use for edges.
     * Can be one of the built-in routing names or a custom string for user-defined routing.
     * @see EdgeRoutingName
     * @default 'orthogonal'
     */
    defaultRouting: EdgeRoutingName;
    /** configuration options for bezier routing
     */
    bezier?: {
        /** bezier control point offset
         * @default 100
         */
        bezierControlOffset?: number;
    };
    /** configuration options for orthogonal routing
     */
    orthogonal?: {
        /** first/last segment length
         * @default 20
         */
        firstLastSegmentLength?: number;
        /** maximum corner radius
         * @default 15
         */
        maxCornerRadius?: number;
    };
    /**
     * Allow custom edge routing configurations.
     */
    [edgeRoutingName: string]: Record<string, unknown> | EdgeRoutingName | undefined;
}
/**
 * Configuration for box selection behavior.
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration/Features
 */
interface BoxSelectionConfig {
    /**
     * Whether to select nodes that are only partially within the selection box.
     * @default true
     */
    partialInclusion?: boolean;
    /**
     * Whether to select nodes in real-time as the selection box is being drawn.
     * If false, nodes will only be selected when the box selection ends.
     * @default true
     */
    realtime?: boolean;
}
/**
 * Configuration for viewport virtualization behavior.
 * When enabled, only nodes and edges visible in the viewport (plus padding) are rendered,
 * significantly improving performance for large diagrams.
 *
 * @public
 * @since 1.0.0
 * @category Types/Configuration/Features
 */
interface VirtualizationConfig {
    /**
     * Whether viewport virtualization is enabled.
     * When disabled, all nodes/edges are rendered regardless of viewport.
     * @default false
     */
    enabled: boolean;
    /**
     * Padding multiplier relative to viewport size.
     * The actual padding is calculated as: max(viewportWidth, viewportHeight) * padding
     * For example, 0.5 means 50% of the viewport size as padding in each direction.
     * @default 0.5
     */
    padding: number;
    /**
     * Delay in milliseconds after panning stops before re-rendering visible nodes.
     * @default 100
     */
    idleDelay?: number;
}
/**
 * Configuration for the default Node Templates
 *
 * @public
 * @since 1.3.0
 * @category Types/Configuration/Features
 */
interface DefaultNodeTemplateConfig {
    /**
     * When explicitly set to `true` this will remove the ports in the default Node Template
     * @default undefined;
     */
    removePorts: boolean;
}
/**
 * The main configuration interface for the flow system.
 *
 * This type defines all available configuration options for the diagram engine.
 *
 * For most use cases, you should use {@link NgDiagramConfig}, which allows you to override only the properties you need.
 *
 * @public
 * @since 0.8.0
 * @category Types/Configuration
 */
interface FlowConfig {
    /**
     * Computes a unique ID for a node.
     * @returns The node's unique ID.
     */
    computeNodeId: () => string;
    /**
     * Computes a unique ID for an edge.
     * @returns The edge's unique ID.
     */
    computeEdgeId: () => string;
    /**
     * Configuration for node resizing.
     */
    resize: ResizeConfig;
    /**
     * Configuration for linking (edge creation).
     */
    linking: LinkingConfig;
    /**
     * Configuration for dangling edges (edges with unconnected endpoints).
     * @since 1.4.0
     */
    danglingEdges: DanglingEdgesConfig;
    /**
     * Configuration for node grouping.
     */
    grouping: GroupingConfig;
    /**
     * Configuration for zooming.
     */
    zoom: ZoomConfig;
    /**
     * Configuration for edge routing.
     */
    edgeRouting: EdgeRoutingConfig;
    /**
     * Configuration for background behavior.
     */
    background: BackgroundConfig;
    /**
     * Configuration for node rotation behavior.
     */
    nodeRotation: NodeRotationConfig;
    /**
     * Configuration for snapping behavior.
     */
    snapping: SnappingConfig;
    /**
     * Configuration for selection moving behavior.
     */
    selectionMoving: SelectionMovingConfig;
    /**
     * Configuration for z-index layering behavior.
     */
    zIndex: ZIndexConfig;
    /**
     * Configuration for box selection behavior.
     */
    boxSelection: BoxSelectionConfig;
    /**
     * Configuration for viewport virtualization.
     * Improves performance for large diagrams by only rendering visible elements.
     */
    virtualization: VirtualizationConfig;
    /**
     * Configuration for keyboard shortcuts.
     */
    shortcuts: ShortcutDefinition[];
    /**
     * Enables or disables debug mode for the diagram.
     * When enabled, additional console logs are printed.
     * @default false
     */
    debugMode: boolean;
    /**
     * @since 0.9.0
     *
     * Hides the ngDiagram watermark when set to true.
     * @default undefined
     */
    hideWatermark?: boolean;
    /**
     * @since 1.2.0
     *
     * Sets the preferred position for the ngDiagram watermark.
     * If the chosen position collides with a registered panel (e.g., minimap),
     * the watermark shifts to the nearest available corner.
     * @default 'bottom-right'
     */
    watermarkPosition?: NgDiagramPanelPosition;
    /**
     * @since 0.9.0
     *
     * Enables or disables panning on the diagram.
     * When set to false, user is not able to move the viewport by panning.
     * @default true
     */
    viewportPanningEnabled: boolean;
    /**
     * @since 1.0.0
     *
     * Enables or disables node dragging on the diagram.
     * When set to false, users cannot move nodes via mouse dragging or keyboard arrow keys.
     * @default true
     */
    nodeDraggingEnabled: boolean;
    /**
     * @since 1.3.0
     * Configuration options for the default Node Templates
     */
    defaultNode?: DefaultNodeTemplateConfig;
}

/**
 * Interface representing the viewport of the diagram.
 *
 * @public
 * @since 0.8.0
 * @category Types/Model
 */
interface Viewport {
    /** X coordinate of the viewport center */
    x: number;
    /** Y coordinate of the viewport center */
    y: number;
    /** Scale factor of the viewport */
    scale: number;
    /** Width of the viewport */
    width?: number;
    /** Height of the viewport */
    height?: number;
}
/**
 * Interface representing the metadata of the diagram.
 *
 * @public
 * @since 0.8.0
 * @category Types/Model
 */
interface Metadata<T extends DataObject = DataObject> {
    /**
     * Viewport of the diagram
     */
    viewport: Viewport;
    /**
     * Custom user data associated with the diagram
     */
    data?: T;
}

interface AddToGroupCommand {
    name: 'addToGroup';
    groupId: Node$1['id'];
    nodeIds: Node$1['id'][];
}

interface AddNodesCommand {
    name: 'addNodes';
    nodes: Node$1[];
}
interface PaletteDropNodeCommand {
    name: 'paletteDropNode';
    node: Node$1;
}
interface UpdateNodeCommand {
    name: 'updateNode';
    id: string;
    nodeChanges: Partial<Node$1>;
}
interface UpdateNodesCommand {
    name: 'updateNodes';
    nodes: (Pick<Node$1, 'id'> & Partial<Node$1>)[];
}
interface DeleteNodesCommand {
    name: 'deleteNodes';
    ids: string[];
}
interface ClearModelCommand {
    name: 'clearModel';
}
interface AddEdgesCommand {
    name: 'addEdges';
    edges: Edge[];
}
interface UpdateEdgeCommand {
    name: 'updateEdge';
    id: string;
    edgeChanges: Partial<Edge>;
}
interface UpdateEdgesCommand {
    name: 'updateEdges';
    edges: (Pick<Edge, 'id'> & Partial<Edge>)[];
}
interface DeleteEdgesCommand {
    name: 'deleteEdges';
    ids: string[];
}
interface AddPortsBulkCommand {
    name: 'addPortsBulk';
    additions: Map<string, Port[]>;
}
interface UpdatePortsBulkCommand {
    name: 'updatePortsBulk';
    updates: Map<string, {
        portId: string;
        portChanges: Partial<Port>;
    }[]>;
}
interface DeletePortsBulkCommand {
    name: 'deletePortsBulk';
    deletions: Map<string, string[]>;
}
interface AddEdgeLabelsBulkCommand {
    name: 'addEdgeLabelsBulk';
    additions: Map<string, EdgeLabel[]>;
}
interface UpdateEdgeLabelsBulkCommand {
    name: 'updateEdgeLabelsBulk';
    updates: Map<string, {
        labelId: string;
        labelChanges: Partial<EdgeLabel>;
    }[]>;
}
interface DeleteEdgeLabelsBulkCommand {
    name: 'deleteEdgeLabelsBulk';
    deletions: Map<string, string[]>;
}

interface CenterOnRectCommand {
    name: 'centerOnRect';
    rect: Rect;
}
interface CenterOnNodeCommand {
    name: 'centerOnNode';
    nodeOrId: string | Node$1;
}

interface CopyCommand {
    name: 'copy';
}
interface PasteCommand {
    name: 'paste';
    position?: Point;
}

interface CutCommand {
    name: 'cut';
}

interface DeleteSelectionCommand {
    name: 'deleteSelection';
}

interface HighlightGroupCommand {
    name: 'highlightGroup';
    groupId: Node$1['id'];
    nodes: Node$1[];
}
interface HighlightGroupClearCommand {
    name: 'highlightGroupClear';
}

interface InitCommand {
    name: 'init';
    /** IDs of nodes currently rendered (for virtualization) */
    renderedNodeIds?: string[];
    /** IDs of edges currently rendered (for virtualization) */
    renderedEdgeIds?: string[];
}

interface CancelLinkingCommand {
    name: 'cancelLinking';
}

interface FinishLinkingCommand {
    name: 'finishLinking';
    position?: Point;
}

interface FinishLinkingToPositionCommand {
    name: 'finishLinkingToPosition';
    position: Point;
}

interface FinishRelinkingCommand {
    name: 'finishRelinking';
    /** The drop position in flow coordinates. */
    position: Point;
}

/**
 * State tracking a node resize operation in progress.
 *
 * @public
 * @since 0.8.0
 * @category Internals
 */
interface ResizeActionState {
    /** Initial width of the node before resize. */
    startWidth: number;
    /** Initial height of the node before resize. */
    startHeight: number;
    /** Initial X coordinate in screen space where the resize started. */
    startX: number;
    /** Initial Y coordinate in screen space where the resize started. */
    startY: number;
    /** Initial X position of the node in diagram space. */
    startNodePositionX: number;
    /** Initial Y position of the node in diagram space. */
    startNodePositionY: number;
    /** Reference to the node being resized. */
    resizingNode: Node$1;
    /** Set when the resize is aborted; carried into `nodeResizeEnded`. */
    cancelReason?: GestureCancelReason;
}
/**
 * State tracking an edge creation operation in progress.
 *
 * @public
 * @since 0.8.0
 * @category Internals
 */
interface LinkingActionState {
    /** ID of the node where the edge starts. */
    sourceNodeId: string;
    /** ID of the port where the edge starts. */
    sourcePortId: string;
    /** Temporary edge displayed while creating the connection. */
    temporaryEdge: Edge | null;
    /** Position where the pointer was released. */
    dropPosition?: Point;
    /** Reason the linking gesture was cancelled (set by finishLinking on failure paths). */
    cancelReason?: EdgeDrawCancelReason;
    /**
     * Present while an endpoint of an existing edge is being relinked. Until the
     * gesture ends, the original edge is not rendered and the temporary edge
     * represents it. `relink.end` is the end of the temporary edge that follows
     * the pointer (a normal draw always drags the target end).
     *
     * @since 1.4.0
     */
    relink?: LinkingRelinkContext;
    /**
     * Reason the relink gesture ended without changing the edge (set by
     * `finishRelinking` when the relink fails).
     *
     * @since 1.4.0
     */
    relinkCancelReason?: EdgeRelinkCancelReason;
}
/**
 * Context of an edge relink gesture carried inside the linking action state.
 *
 * @public
 * @since 1.4.0
 * @category Internals
 */
interface LinkingRelinkContext {
    /** ID of the edge whose endpoint is being dragged. */
    edgeId: string;
    /** Which endpoint of the edge is being dragged. */
    end: EdgeEnd;
    /** Snapshot of the edge as it was when the gesture started. */
    originalEdge: Edge;
}
/**
 * State containing copied nodes and edges for paste operations.
 *
 * @public
 * @since 0.8.0
 * @category Internals
 */
interface CopyPasteActionState {
    /** Array of nodes that were copied. */
    copiedNodes: Node$1[];
    /** Array of edges that were copied. */
    copiedEdges: Edge[];
}
/**
 * State tracking which group is currently highlighted.
 *
 * @public
 * @since 0.8.0
 * @category Internals
 */
interface HighlightGroupActionState {
    /** ID of the highlighted group, or null if no group is highlighted. */
    highlightedGroupId: string | null;
}
/**
 * State tracking a node rotation operation in progress.
 *
 * @public
 * @since 0.8.0
 * @category Internals
 */
interface RotationActionState {
    /** Angle in degrees at the start of the rotation operation. */
    startAngle: number;
    /** Initial angle of the node before rotation. */
    initialNodeAngle: number;
    /** ID of the node being rotated. */
    nodeId: string;
    /** Set when the rotation is aborted; carried into `nodeRotateEnded`. */
    cancelReason?: GestureCancelReason;
}
/**
 * State tracking a drag operation in progress.
 *
 * @public
 * @since 0.8.0
 * @category Internals
 */
interface DraggingActionState {
    /** IDs of all nodes participating in the drag (selected + children, filtered by draggable). */
    nodeIds: string[];
    /** Input modifiers (e.g., Ctrl, Shift) active during the drag. */
    modifiers: InputModifiers;
    /**
     * Accumulated deltas per node that haven't yet resulted in a snap movement.
     * Key is node ID, value is the accumulated delta that hasn't been applied due to snapping.
     */
    accumulatedDeltas: Map<string, Point>;
    /**
     * Whether the pointer has moved beyond the move threshold, indicating an actual drag.
     * `false` when the drag state is first created (on pointer down), `true` once movement exceeds the threshold.
     */
    movementStarted: boolean;
    /** Set when the drag is aborted; carried into `nodeDragEnded`. */
    cancelReason?: GestureCancelReason;
}
/**
 * State tracking a panning operation in progress.
 *
 * @public
 * @since 1.1.2
 * @category Internals
 */
interface PanningActionState {
    /** Whether panning is currently active. */
    active: boolean;
}
/**
 * State tracking whether a selection gesture has changed the selection.
 *
 * Set by selection commands when they apply changes, cleared when
 * the `selectionGestureEnded` event is emitted on `selectEnd`.
 *
 * @public
 * @since 1.1.2
 * @category Internals
 */
interface SelectionActionState {
    /** Whether selection has changed since the gesture started. */
    selectionChanged: boolean;
}
/**
 * Interface representing the current state of various user interactions in the diagram.
 *
 * This state is read-only and automatically managed by the library. It provides
 * information about active operations such as resizing, linking, dragging, and other
 * user interactions. Use this to observe the current state, not to modify it.
 *
 * @public
 * @since 0.8.0
 * @category Internals
 */
interface ActionState {
    /**
     * State related to node resizing action
     */
    resize?: ResizeActionState;
    /**
     * State related to linking nodes
     */
    linking?: LinkingActionState;
    /**
     * State related to copy-paste actions
     */
    copyPaste?: CopyPasteActionState;
    /**
     * State related to highlighting groups
     */
    highlightGroup?: HighlightGroupActionState;
    /**
     * State related to node rotation
     */
    rotation?: RotationActionState;
    /**
     * State related to dragging elements
     */
    dragging?: DraggingActionState;
    /**
     * State related to panning the viewport
     */
    panning?: PanningActionState;
    /**
     * State related to selection gestures
     */
    selection?: SelectionActionState;
}

interface MoveTemporaryEdgeCommand {
    name: 'moveTemporaryEdge';
    position: Point;
}

interface StartLinkingCommand {
    name: 'startLinking';
    source: string;
    sourcePort?: string;
}

interface StartLinkingFromPositionCommand {
    name: 'startLinkingFromPosition';
    position: Point;
}

interface StartRelinkingCommand {
    name: 'startRelinking';
    edgeId: string;
    end: EdgeEnd;
}

/**
 * Core implementation of CommandHandler interface
 * Handles command emission and registration of callbacks for system commands
 */
declare class CommandHandler$1 implements CommandHandler {
    private callbacks;
    readonly flowCore: FlowCore;
    constructor(flowCore: FlowCore);
    /**
     * Emit a system command to all registered callbacks for the command type
     * @param commandName Command name
     * @param rest Command props
     */
    emit<K extends CommandName>(commandName: K, ...props: IsEmpty<CommandByName<K>> extends true ? [] | [WithoutName<CommandByName<K>>] : [WithoutName<CommandByName<K>>]): Promise<void>;
    /**
     * Internal emit method that can bypass transaction checking
     * @param commandName Command name
     * @param bypassTransaction Whether to bypass transaction checking
     * @param rest Command props
     */
    emitInternal<K extends CommandName>(commandName: K, bypassTransaction: boolean, ...props: IsEmpty<CommandByName<K>> extends true ? [] | [WithoutName<CommandByName<K>>] : [WithoutName<CommandByName<K>>]): Promise<void>;
    /**
     * Register a callback for specific command types
     * @param commandName Type of command to listen for
     * @param callback Function to be called when command occurs
     * @returns Function to unregister the callback
     */
    register<K extends CommandName>(commandName: K, callback: CommandCallback<K>): () => void;
    private getCommandCallbacks;
}

type ResizeDirection = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left' | 'right' | 'top' | 'bottom';

declare abstract class EventHandler<TEvent extends BaseInputEvent> {
    protected readonly flow: FlowCore;
    /**
     * State whose end/cancel claimed the teardown. Never reset — a fresh state
     * object per gesture means a stale claim cannot match a live one.
     */
    private claimedTeardownState;
    constructor(flow: FlowCore);
    /** Handles one input event. Invoked un-awaited — implementations must tolerate interleaving at every await. */
    abstract handle(event: TEvent): void | Promise<void>;
    /**
     * Claims the teardown of the gesture owning `state`, so a racing cancel()
     * (or a second one) no-ops. Requires one state object per gesture lifetime —
     * linking stamps its replaced state instead, drag uses `DragGesture.ended`.
     */
    protected claimTeardown(state: unknown): void;
    /** Whether `state`'s teardown was already claimed by an in-flight end or cancel. */
    protected isTeardownClaimed(state: unknown): boolean;
    /**
     * Aborts the tracked gesture without the side effects of a normal `end`
     * (no edge creation, no group drop). Default: no-op.
     *
     * @returns Whether anything was torn down — `false` when there is no gesture
     * or its teardown is already claimed by an in-flight end or cancel.
     */
    cancel(): boolean | Promise<boolean>;
}

declare abstract class InputEventsRouter {
    private handlers;
    emit<TEvent extends BaseInputEvent>(event: TEvent): void | Promise<void>;
    register<K extends InputEventName>(eventName: K, handler: EventHandler<BaseInputEvent>): void;
    registerDefaultCallbacks(flow: FlowCore): void;
    hasHandler(eventName: InputEventName): boolean;
    /**
     * Aborts the gesture tracked by the handler registered for `eventName`.
     * No-op when the handler is missing or has no gesture in progress.
     *
     * @returns Whether the handler actually tore anything down
     */
    cancel(eventName: InputEventName): Promise<boolean>;
}

type FlushCallback<T> = (all: Map<string, T[]>) => void | Promise<void>;
/**
 * Returns the set of item IDs that are already measured for a given key.
 * Used at flush time to filter out redundant adds (e.g. virtualization re-mounts
 * a component for an item that was never deleted from the model).
 */
type GetMeasuredIdsFn = (key: string) => Set<string>;
/**
 * Generic batch processor that collects operations (add, update, delete) within
 * the same JavaScript tick and flushes them together in a single microtask.
 *
 * Before flushing, two deduplication strategies are applied:
 * 1. **Intent cancellation**: matching add+delete pairs for the same item ID are
 *    removed from both queues (e.g. type change destroys and recreates a port
 *    with the same ID in the same tick).
 * 2. **Measurement filtering**: remaining adds with no matching delete are checked
 *    via `getMeasuredIds`. If the item is already measured, the add is dropped
 *    (e.g. virtualization re-mounts a component for a port that was never deleted
 *    from the model).
 *
 * Remaining operations are flushed sequentially in order: adds → updates → deletes.
 * Each operation is awaited before the next begins, ensuring that later
 * operations read fresh state left by earlier ones.
 *
 * Callbacks are stored per-key, so different callers can safely use the same
 * BatchProcessor instance with different flush targets.
 *
 * @typeParam TAdd - Type of items being added (must have an `id` property)
 * @typeParam TUpdate - Type of update descriptors
 */
declare class BatchProcessor<TAdd extends {
    id: string;
}, TUpdate> {
    private readonly getMeasuredIds?;
    private readonly pendingAdds;
    private readonly pendingUpdates;
    private readonly pendingDeletes;
    private flushScheduled;
    private lastFlush;
    constructor(getMeasuredIds?: GetMeasuredIdsFn | undefined);
    processAdd(key: string, item: TAdd, onFlush: FlushCallback<TAdd>): void;
    processUpdate(key: string, update: TUpdate, onFlush: FlushCallback<TUpdate>): void;
    processDelete(key: string, itemId: string, onFlush: FlushCallback<string>): void;
    private scheduleFlush;
    /**
     * Flushes all pending operations.
     * First cancels matching add+delete intents for the same item ID,
     * then filters out redundant adds for items that are already measured,
     * then executes remaining operations sequentially: adds → updates → deletes.
     * Each callback is awaited before the next to prevent read-modify-write races.
     */
    private flush;
    /**
     * Groups entries by callback reference and invokes each callback once
     * with all its keys collected into a single Map.
     */
    private invokeCallbacks;
    /**
     * Cancels out items that appear in both pendingAdds and pendingDeletes for the same key.
     * This prevents scenarios where an add+delete (or delete+add) in the same tick
     * produces counter-intuitive results due to flush ordering.
     */
    private cancelMatchingIntents;
    /**
     * Filters out adds for items that are already measured and have no matching delete.
     * This runs after cancelMatchingIntents, so any remaining add without a delete
     * is an "orphaned" add — typically from virtualization re-mounting a component
     * for an item that was never removed from the model.
     */
    private filterAlreadyMeasuredAdds;
    private getOrCreate;
    private takeAll;
}

interface LabelUpdate {
    labelId: string;
    labelChanges: Partial<EdgeLabel>;
}
declare class LabelBatchProcessor extends BatchProcessor<EdgeLabel, LabelUpdate> {
    constructor(getEdgeById: (edgeId: string) => Edge | null | undefined);
}

interface MeasurementTrackingConfig {
    discoveryWindowMs?: number;
    debounceMs?: number;
}
/**
 * Tracks pending measurements and notifies when all measurements are complete.
 *
 * This class coordinates asynchronous DOM measurements (node sizes, port positions, labels, etc.)
 * with transaction completion using a two-phase observation model.
 *
 * ## Timing Model
 *
 * ### Phase 1: Discovery Window
 * After `registerParticipants()` is called, a discovery window opens. The tracker waits
 * to see if any measurement activity occurs for the registered participant entities.
 *
 * - If a **measurement signal** arrives (via `signalMeasurement()`): transitions to Phase 2.
 * - If a **ResizeObserver early signal** arrives (via `signalObserverActivity()`):
 *   if remaining time is below `OBSERVER_ACTIVITY_MIN_REMAINING`, the timer resets
 *   to full `discoveryWindowMs`, giving the double-RAF pipeline time to deliver.
 * - If the timer expires with no activity: resolves — nothing to measure.
 *
 * ### Phase 2: Debounce
 * Once the first measurement arrives, subsequent measurements reset a debounce timer.
 * When no measurements arrive for `debounceMs`, measurements are considered settled.
 *
 * @example
 * ```typescript
 * tracker.requestTracking({ discoveryWindowMs: 50, debounceMs: 50 });
 * tracker.registerParticipants(['node:abc', 'edge:xyz']); // starts discovery window
 *
 * // ResizeObserver fired for a participant — extend if running low
 * tracker.signalObserverActivity('node:abc');
 *
 * // Measurement arrived — transition to debounce
 * tracker.signalMeasurement('node:abc');
 *
 * await tracker.waitForMeasurements();
 * ```
 *
 * @internal
 */
declare class MeasurementTracker {
    private phase;
    private participantIds;
    private pendingConfig;
    private discoveryWindow;
    private debounce;
    private settlementPromise;
    private settlementResolve;
    /**
     * Stages tracking configuration for the next middleware-driven registration pass.
     * Called before `applyUpdate()` when `waitForMeasurements` is requested.
     */
    requestTracking(config?: MeasurementTrackingConfig): void;
    /**
     * Returns true if tracking has been requested via `requestTracking()`.
     * Used by the measurement-tracking middleware to decide first-pass vs subsequent-pass mode.
     */
    isTrackingRequested(): boolean;
    /**
     * Clears a staged tracking request.
     */
    cancelTrackingRequest(): void;
    /**
     * Registers entities that participated in the transaction.
     * Consumes the pending config from `requestTracking()`.
     *
     * If entityIds is empty (full no-op), just clears the pending config.
     * Otherwise, adds IDs to `participantIds` and starts the discovery window.
     *
     * @param entityIds - Prefixed entity IDs (e.g. 'node:abc', 'edge:xyz')
     */
    registerParticipants(entityIds: string[]): void;
    /**
     * Registers participants outside the middleware-driven transaction flow — used by
     * `invalidateMeasurements`, where measurements come from re-observing DOM elements
     * rather than a state-update pass. Settles like the transaction path (the discovery
     * window expires on its own, so `waitForMeasurements()` cannot hang), never consumes
     * a staged tracking request, and joining an active round keeps its window durations
     * unless an explicit config is given.
     *
     * @param entityIds - Prefixed entity IDs (e.g. 'node:abc', 'edge:xyz')
     */
    trackParticipants(entityIds: string[], config?: MeasurementTrackingConfig): void;
    /**
     * Removes entities from the current tracking round — used when an entity
     * becomes effectively hidden, which clears its pending measurement
     * expectations. Signals for removed ids no longer extend the observation
     * window; settlement stays timer-driven, so the round still resolves on its
     * own schedule.
     *
     * @param entityIds - Prefixed entity IDs (e.g. 'node:abc', 'edge:xyz')
     */
    unregisterParticipants(entityIds: string[]): void;
    /** Shared registration body; `null` config keeps the current window durations. */
    private register;
    /**
     * Signals that a ResizeObserver fired for a participant entity before batch processing.
     * This is an early indicator that measurements are in the pipeline (the double-RAF
     * processing hasn't delivered them yet).
     *
     * In both phases, if the remaining time is below `OBSERVER_ACTIVITY_MIN_REMAINING`,
     * the active timer resets to its full duration.
     */
    signalObserverActivity(entityId: string): void;
    /**
     * Signals that an actual measurement arrived for a participant entity
     * (e.g., `measuredPorts`, `size`, `position`, `measuredLabels` changed via `setState`).
     *
     * - During discovery window: transitions to debounce phase.
     * - During debounce phase: resets the debounce timer.
     */
    signalMeasurement(entityId: string): void;
    /**
     * Returns a promise that resolves when all currently pending measurements are complete.
     * If there are no pending measurements, resolves immediately.
     */
    waitForMeasurements(): Promise<void>;
    hasPendingMeasurements(): boolean;
    private activeTimer;
    private remainingTime;
    private startTimer;
    private clearTimer;
    private resolve;
}

declare class MiddlewareManager {
    private middlewareChain;
    private eventEmitterMiddleware;
    private measurementTrackingMiddleware;
    private hiddenComputationMiddleware;
    private hiddenComputationFinalizeMiddleware;
    private measuredBoundsMiddleware;
    readonly flowCore: FlowCore;
    constructor(flowCore: FlowCore, middlewares?: MiddlewareChain);
    isRegistered(name: string): boolean;
    /**
     * Registers a new middleware in the chain
     * @param middleware Middleware to register
     * @returns Function to unregister the middleware
     */
    register<T extends Middleware<any>>(middleware: T): () => void;
    /**
     * Unregister a middleware from the chain
     * @param name Name of the middleware to unregister
     */
    unregister(name: string): void;
    /**
     * Executes all registered middlewares in sequence
     * @param initialState Initial state to be transformed
     * @param stateUpdate State update to be applied
     * @param modelActionTypes Model action types which trigger the middleware (array for transactions, single-element for direct calls)
     * @returns State after all middlewares have been applied
     */
    execute(initialState: FlowState, stateUpdate: FlowStateUpdate, modelActionTypes: ModelActionTypes): Promise<FlowState | undefined>;
}

declare class ModelLookup {
    private readonly flowCore;
    private _nodesMap;
    private _edgesMap;
    private _directChildrenMap;
    private _descendantsCache;
    private _connectedEdgesMap;
    private _danglingEdges;
    constructor(flowCore: FlowCore);
    /**
     * Desynchronizes the model lookup
     */
    desynchronize(): void;
    /**
     * Gets the nodes map if it is not synchronized synchronize it
     * @returns Nodes map
     */
    get nodesMap(): Map<string, Node$1>;
    /**
     * Gets the edges map if it is not synchronized synchronize it
     * @returns Edges map
     */
    get edgesMap(): Map<string, Edge<object>>;
    /**
     * Gets the direct children map if it is not synchronized synchronize it
     * @returns Direct children map
     */
    get directChildrenMap(): Map<string, string[]>;
    /**
     * Gets the connected edges map if it is not synchronized synchronize it
     * @returns Connected edges map
     */
    get connectedEdgesMap(): Map<string, string[]>;
    /**
     * Committed edges with at least one free (unconnected) endpoint. Rebuilt
     * lazily after a state change with one pass over all edges (the same profile
     * as {@link connectedEdgesMap}), then served from cache until the next
     * change, so consumers iterate only the dangling subset.
     * @returns Dangling edges array
     */
    get danglingEdges(): Edge[];
    /**
     * Gets the descendants cache if it is not synchronized synchronize it
     * @returns Descendants cache
     */
    private get descendantsCache();
    /**
     * Builds a map of group nodes to their children
     * @param nodes Nodes array
     * @returns Map where key is group id and value is array of child ids
     */
    private buildDirectChildrenMap;
    /**
     * Builds a map of nodes to their connected edges
     * @param edges Edges array
     * @returns Map where key is node id and value is array of connected edge ids
     */
    private buildConnectedEdgesMap;
    /**
     * Gets a node by id
     * @param nodeId Node id
     * @returns Node
     */
    getNodeById(nodeId: string): Node$1 | null;
    /**
     * Gets an edge by id
     * @param edgeId Edge id
     * @returns Edge
     */
    getEdgeById(edgeId: string): Edge | null;
    /**
     * Gets all edges connected to a node
     * @param nodeId Node id
     * @returns Array of edges where the node is either source or target
     */
    getConnectedEdges(nodeId: string): Edge[];
    /**
     * Gets all nodes connected to a node via edges
     * @param nodeId Node id
     * @returns Array of nodes connected to the given node
     */
    getConnectedNodes(nodeId: string): Node$1[];
    /**
     * Gets the source and target nodes of an edge
     * @param edgeId Edge id
     * @returns Object containing source and target nodes, or null if edge doesn't exist
     */
    getNodeEnds(edgeId: string): {
        source: Node$1;
        target: Node$1;
    } | null;
    /**
     * Gets all children ids for a given group node id
     * @param groupId group node id
     * @returns Array of child node ids
     */
    private getChildrenIds;
    /**
     * Gets all children nodes for a given group node id
     * @param groupId group node id
     * @returns Array of child nodes
     */
    getChildren(groupId: string): Node$1[];
    /**
     * Gets all descendant IDs for a given group node id (with caching)
     * @param groupId group node id
     * @returns Array of all descendant node ids (children, grandchildren, etc.)
     */
    getAllDescendantIds(groupId: string): Node$1['id'][];
    /**
     * Recursively computes all descendants for a given group node id
     * @param groupId group node id
     * @returns Array of all descendant node ids
     */
    private computeAllDescendants;
    /**
     * Gets all descendant nodes for a given group node id
     * @param groupId group node id
     * @returns Array of all descendant nodes (children, grandchildren, etc.)
     */
    getAllDescendants(groupId: string): Node$1[];
    /**
     * Checks if a node has children
     * @param nodeId Node id
     * @returns True if the node has children
     */
    hasChildren(nodeId: string): boolean;
    /**
     * Checks if a node has any descendants (children, grandchildren, etc.)
     * @param nodeId Node id
     * @returns True if the node has any descendants
     */
    hasDescendants(nodeId: string): boolean;
    /**
     * Gets the children map (read-only access)
     * @returns Children map
     */
    getChildrenMap(): ReadonlyMap<Node$1['id'], readonly Node$1['id'][]>;
    /**
     * Gets all selected nodes
     * @returns Array of directly selected nodes
     */
    getSelectedNodes(): Node$1[];
    /**
     * Gets the children of a node
     * @param nodeId Node id
     * @param directOnly Whether to get only direct children
     * @returns Array of children nodes
     */
    getNodeChildren(nodeId: string, { directOnly }?: {
        directOnly?: boolean;
    }): Node$1[];
    /**
     * Gets the children ids of a node
     * @param nodeId Node id
     * @param directOnly Whether to get only direct children
     * @returns Array of children node ids
     */
    getNodeChildrenIds(nodeId: string, { directOnly }?: {
        directOnly?: boolean;
    }): Node$1['id'][];
    /**
     * Gets all selected nodes with their children
     * @returns Array of selected nodes with their children
     */
    getSelectedNodesWithChildren({ directOnly }?: {
        directOnly?: boolean;
    }): Node$1[];
    /**
     * Gets all selected edges
     * @returns Array of selected edges
     */
    getSelectedEdges(): Edge[];
    /**
     * Checks if a node is descendant of a group node
     * @param nodeId Node id
     * @param groupId Group node id
     * @returns True if the node is descendant of the group node
     */
    isNodeDescendantOfGroup(nodeId: string, groupId: string): boolean;
    /**
     * Check for potential circular dependency between a node and a group
     * @param nodeId Node id
     * @param groupId Group node id
     * @returns True if the group is a descendant of the node or the node is the group
     */
    wouldCreateCircularDependency(nodeId: string, groupId: string): boolean;
    /**
     * Gets the full chain of parent group Nodes for a given nodeId.
     * @param nodeId Node id
     * @returns Array of parent group Node objects, from closest parent to farthest ancestor
     */
    getParentChain(nodeId: string): GroupNode[];
}

interface PortUpdate {
    portId: string;
    portChanges: Partial<Port>;
}
declare class PortBatchProcessor extends BatchProcessor<Port, PortUpdate> {
    constructor(getNodeById: (nodeId: string) => Node$1 | null | undefined);
}

interface RenderStrategyResult {
    nodes: Node$1[];
    edges: Edge[];
    nodeIds: Set<string>;
    edgeIds: Set<string>;
}
interface RenderStrategy {
    /**
     * Initializes the strategy. Sets up model change handlers and starts the init process.
     */
    init(): void;
    process(nodes: Node$1[], edges: Edge[], viewport: Viewport | undefined): RenderStrategyResult;
    /**
     * Checks if a node is currently rendered (visible in viewport).
     * In direct mode, always returns true. In virtualized mode, checks the cached visible nodes.
     */
    isNodeRendered(nodeId: string): boolean;
}

/**
 * Manages keyboard shortcuts and input event matching
 *
 * Supports two types of shortcuts:
 * 1. Key-based shortcuts: Require a specific key with optional modifiers (e.g., Ctrl+C for copy)
 * 2. Modifier-only shortcuts: Require only modifier keys without a specific key (e.g., Alt for box-selection)
 *
 * @example
 * // Key-based shortcut
 * {
 *   actionName: 'copy',
 *   bindings: [{ key: 'c', modifiers: { primary: true } }]
 * }
 *
 * @example
 * // Modifier-only shortcut (useful for modal interactions like box-selection)
 * {
 *   actionName: 'boxSelection',
 *   bindings: [{ modifiers: { secondary: true } }] // Triggered when Alt is pressed
 * }
 */
declare class ShortcutManager {
    private readonly flowCore;
    constructor(flowCore: FlowCore);
    /**
     * Find all matching shortcuts for normalized keyboard input
     *
     * Each shortcut must have a binding that matches the input
     *
     * @param input - Normalized keyboard input (key + already-normalized modifiers)
     * @returns Array of matching shortcut definitions (empty if no matches)
     */
    match(input: NormalizedKeyboardInput): ShortcutDefinition[];
    /**
     * Check if the current modifiers match any binding for a specific action
     *
     * Useful for checking modifier-only shortcuts (like box-selection triggered by pointer events)
     *
     * @param actionName - The action name to check
     * @param modifiers - The current modifier state
     * @returns true if any binding for this action matches the modifiers
     *
     * @example
     * // Check if current modifiers match box selection shortcut
     * if (shortcutManager.matchesAction('boxSelection', { modifiers: event.modifiers })) {
     *   // Start box selection
     * }
     */
    matchesAction(actionName: LooseAutocomplete<ShortcutDefinition['actionName']>, input: NormalizedKeyboardInput): boolean;
    /**
     * Check if a normalized keyboard input matches a shortcut binding
     *
     * Compares:
     * - Key values (if specified in binding) - case-insensitive for single letters
     * - Modifier states
     *
     * Matching rules:
     * - If binding has a key: input must have the same key (case-insensitive for letters)
     * - If binding has no key (modifier-only): input must also have no key
     *   (modifier-only shortcuts are for pointer events, not keyboard events)
     *
     * @param input - Normalized keyboard input
     * @param binding - Shortcut binding to match against
     * @returns true if the input matches the binding
     */
    private matchBinding;
    /**
     * Check if modifiers match a binding's modifier requirements
     *
     * Ensures exact modifier matching:
     * - All modifiers specified in binding must match the input
     * - All modifiers NOT specified in binding must be false in the input
     * - Exception: meta modifier is ignored when checking if not explicitly specified in binding,
     *   because on macOS, meta and primary both map to the Command key
     *
     * @param modifiers - Current modifier state
     * @param binding - Shortcut binding to match against
     * @returns true if modifiers match the binding's requirements exactly
     */
    private matchModifiers;
    /**
     * Check if two keys match, using case-insensitive comparison for single letters
     *
     * This ensures shortcuts work regardless of CapsLock state.
     * Special keys like "Delete", "ArrowUp", etc. are compared as-is.
     *
     * @param inputKey - The key from the keyboard input
     * @param bindingKey - The key defined in the shortcut binding
     * @returns true if the keys match
     */
    private keysMatch;
}

declare class SpatialHash {
    private readonly cellSize;
    private readonly grid;
    private readonly idToCells;
    private readonly idToRect;
    process(nodes: Node$1[]): void;
    query(range: Rect): RectWithId[];
    queryIds(range: Rect): string[];
    private _query;
    private nodeToRect;
    private addToCell;
    private removeFromCell;
    private updateInCell;
    private addToGrid;
    private updateInGrid;
    private removeFromGrid;
    private getCellsRange;
    private getCells;
}

/**
 * Options for configuring transaction behavior.
 *
 * @public
 * @since 0.9.0
 * @category Types/Middleware
 */
interface TransactionOptions {
    /**
     * When true, the transaction promise will not resolve until all measurements
     * (node sizes, port positions, etc.) triggered by the transaction are complete.
     *
     * This is useful when you need to perform operations that depend on measured values,
     * such as `zoomToFit()` after adding nodes or edges.
     *
     * @default false
     *
     * @example
     * ```typescript
     * // Without waitForMeasurements - zoomToFit might not include new nodes
     * await diagramService.transaction(() => {
     *   modelService.addNodes([newNode]);
     * });
     * viewportService.zoomToFit(); // May not account for new node dimensions
     *
     * // With waitForMeasurements - zoomToFit will include new nodes
     * await diagramService.transaction(() => {
     *   modelService.addNodes([newNode]);
     * }, { waitForMeasurements: true });
     * viewportService.zoomToFit(); // Correctly includes new node dimensions
     * ```
     */
    waitForMeasurements?: boolean;
}
interface TransactionContext {
    /**
     * Emits a command in the core system.
     * @param name - The name of the command to emit.
     * @returns A promise that resolves when the command is emitted.
     */
    emit: CommandHandler['emit'];
    /**
     * Discards all changes in the current transaction
     */
    abort(): void;
    /**
     * Saves a point in the transaction.
     * @param name - The name of the savepoint.
     */
    savepoint(name: string): void;
    /**
     * Rolls back the transaction to a previously created savepoint
     * or to the beginning of the transaction if no savepoint is provided.
     * @param savepoint - The name of the savepoint to rollback to.
     */
    rollbackTo(savepoint?: string): void;
    /**
     * Starts a new nested transaction.
     * @param name - The name of the transaction.
     * @param callback - The callback to execute in the transaction.
     * @returns A promise that resolves when the transaction is complete.
     */
    transaction(name: LooseAutocomplete<ModelActionType>, callback: TransactionCallback): Promise<TransactionResult>;
    /**
     * Checks if the transaction has changes.
     * @returns True if the transaction has changes, false otherwise.
     */
    hasChanges(): boolean;
    /**
     * Checks if the transaction is dirty.
     * @returns True if the transaction is dirty, false otherwise.
     */
    isDirty(): boolean;
    /**
     * Gets the queued updates in the transaction.
     * @returns Readonly array of queued updates.
     */
    getQueuedUpdates(): readonly {
        update: FlowStateUpdate;
        actionTypes: ModelActionTypes;
    }[];
}
type TransactionCallback = (context: TransactionContext) => void | Promise<void>;
/**
 * Result of a transaction execution.
 *
 * @public
 * @since 0.8.0
 * @category Types/Middleware
 */
interface TransactionResult {
    /**
     * Results of the transaction as a state update
     */
    results: FlowStateUpdate;
    /**
     * Number of commands emitted during the transaction
     */
    commandsCount: number;
    /**
     * All action types that were executed within the transaction.
     * @since 0.9.0
     */
    actionTypes: ModelActionTypes;
}

interface TransactionState<TFlowCore extends FlowCore> {
    name: LooseAutocomplete<ModelActionType>;
    queue: {
        update: FlowStateUpdate;
        actionTypes: ModelActionTypes;
    }[];
    savepoints: Map<string, number>;
    isAborted: boolean;
    parent: Transaction<TFlowCore> | null;
}
declare class Transaction<TFlowCore extends FlowCore = FlowCore> {
    private readonly name;
    private readonly parent;
    private readonly flowCore;
    private queue;
    private savepoints;
    private _isAborted;
    private children;
    private _context;
    constructor(name: LooseAutocomplete<ModelActionType>, parent: Transaction<TFlowCore> | null, flowCore: TFlowCore);
    /**
     * Get the transaction context, creating it lazily if needed
     */
    get context(): TransactionContext;
    /**
     * Check if the transaction has been completely aborted
     */
    isAborted(): boolean;
    /**
     * Completely abort the transaction, making it unusable.
     * This also aborts all child transactions.
     */
    abort(): void;
    /**
     * Create a savepoint that can be rolled back to later
     */
    addSavepoint(name: string): void;
    /**
     * Rollback to a savepoint or to the beginning of the transaction.
     * Unlike abort(), this keeps the transaction active.
     * @param savepointName - If provided, rollback to this savepoint. If not provided, rollback to the beginning.
     */
    rollback(savepointName?: string): void;
    /**
     * Commit the transaction by merging changes to parent or applying them
     */
    commit(): void;
    /**
     * Check if the transaction can be committed (not aborted and has changes)
     */
    canCommit(): boolean;
    /**
     * Ensure the transaction is not aborted, throwing an error if it is
     */
    private ensureNotAborted;
    hasChanges(): boolean;
    getQueue(): readonly {
        update: FlowStateUpdate;
        actionTypes: ModelActionTypes;
    }[];
    queueUpdate(update: FlowStateUpdate, actionTypes: ModelActionTypes): void;
    getState(): TransactionState<TFlowCore>;
    mergeToParent(): void;
    getMergedUpdates(): {
        mergedUpdate: FlowStateUpdate;
        commandsCount: number;
        actionTypes: ModelActionTypes;
    };
}

declare class TransactionManager<TFlowCore extends FlowCore = FlowCore> {
    private readonly flowCore;
    private transactionStack;
    private pendingOptions;
    constructor(flowCore: TFlowCore);
    transaction(callback: TransactionCallback): Promise<TransactionResult>;
    transaction(callback: TransactionCallback, options: TransactionOptions): Promise<TransactionResult>;
    transaction(name: LooseAutocomplete<ModelActionType>, callback: TransactionCallback): Promise<TransactionResult>;
    transaction(name: LooseAutocomplete<ModelActionType>, callback: TransactionCallback, options: TransactionOptions): Promise<TransactionResult>;
    /**
     * Gets the options for the current root transaction.
     * Returns null if no transaction is active or no options were provided.
     */
    getCurrentOptions(): TransactionOptions | null;
    queueUpdate(update: FlowStateUpdate, actionTypes: ModelActionTypes): void;
    isActive(): boolean;
    getTransactionName(): LooseAutocomplete<ModelActionType> | null;
    getCurrentTransaction(): Transaction | null;
    private parseArgs;
}

interface Updater {
    /**
     * Apply a single node size change
     */
    applyNodeSize(nodeId: string, size: NonNullable<Node$1['size']>): void;
    /**
     * Apply node size changes in a single batch
     */
    applyNodeSizes(updates: {
        id: string;
        size: NonNullable<Node$1['size']>;
    }[]): void;
    /**
     * Add a port to a node
     */
    addPort(nodeId: string, port: Port): void;
    /**
     * Apply port changes (size, position, side, type, etc.)
     */
    applyPortChanges(nodeId: string, portUpdates: PortUpdate[]): void;
    /**
     * Add an edge label
     */
    addEdgeLabel(edgeId: string, label: EdgeLabel): void;
    /**
     * Apply edge label changes (size, positionOnEdge, etc.)
     */
    applyEdgeLabelChanges(edgeId: string, labelUpdates: LabelUpdate[]): void;
    /**
     * Delete an edge label
     */
    deleteEdgeLabel(edgeId: string, labelId: string): void;
}

/**
 * InitUpdater batches all initialization data and applies it in a single state update.
 *
 * Strategy:
 * 1. Wait for entity creation to stabilize (addPort, addEdgeLabel) using StabilityDetectors
 * 2. Immediately collect measurements (applyNodeSize, applyPortChanges, applyEdgeLabelChanges)
 * 3. Finish when: entities stabilized AND all rendered entities have measurements
 * 4. Apply everything in one setState
 * 5. Queue late arrivals to prevent data loss during finish transition
 * 6. Safety timeout: If measurements don't arrive within MEASUREMENT_TIMEOUT, force finish
 *
 * Note: With virtualization, only rendered nodes/edges are tracked for initialization.
 * Non-rendered elements will be initialized when they become visible.
 */
declare class InitUpdater implements Updater {
    private flowCore;
    /** Flag indicating whether initialization has completed */
    isInitialized: boolean;
    /** Flag indicating whether entity additions (ports/labels) have stabilized */
    private entitiesStabilized;
    /** Detects when port additions have stabilized */
    private portStabilityDetector;
    /** Detects when label additions have stabilized */
    private labelStabilityDetector;
    /** Collects all initialization data and applies it to diagram state */
    private initState;
    /** Queues updates that arrive during finish to prevent data loss */
    private lateArrivalQueue;
    /** Callback to execute when initialization completes */
    private onCompleteCallback?;
    /** Safety timeout to prevent indefinite waiting for measurements */
    private measurementTimeout;
    /** Effectively hidden node ids at init time — populated in start() */
    private hiddenNodeIds;
    /** Effectively hidden edge ids at init time — populated in start() */
    private hiddenEdgeIds;
    /**
     * Creates a new InitUpdater.
     *
     * @param flowCore - The FlowCore instance to update
     */
    constructor(flowCore: FlowCore);
    /**
     * Starts the initialization process.
     * Collects pre-existing measurements and waits for entity additions to stabilize.
     *
     * @param nodes - Rendered nodes to track for initialization
     * @param edges - Rendered edges to track for initialization
     * @param onComplete - Optional callback to execute after initialization completes
     */
    start(nodes: Node$1[], edges: Edge[], onComplete?: () => void | Promise<void>): void;
    /**
     * Recomputes effective visibility and drops measurement expectations for
     * entities that became hidden — hidden elements never deliver valid
     * measurements and must not keep initialization waiting. Entities that
     * became visible are not re-added; they measure through the observer path.
     * Safe no-op after initialization completes.
     */
    refreshHiddenEntities(): void;
    /**
     * Records a node size measurement.
     * Queues the update if finishing is in progress, otherwise records and attempts to finish.
     *
     * @param nodeId - The node ID
     * @param size - The measured size
     */
    applyNodeSize(nodeId: string, size: NonNullable<Node$1['size']>): void;
    applyNodeSizes(updates: {
        id: string;
        size: NonNullable<Node$1['size']>;
    }[]): void;
    /**
     * Adds a new port created during initialization.
     * Queues if finishing, otherwise adds to init state and notifies stability detector.
     *
     * @param nodeId - The node ID the port belongs to
     * @param port - The port to add
     */
    addPort(nodeId: string, port: Port): void;
    /**
     * Applies port changes (size, position, side, type, etc.).
     * During initialization, only size/position measurements are tracked for init completion.
     * Non-geometric changes (side, type) are ignored since ports are being created with initial values.
     *
     * @param nodeId - The node ID the ports belong to
     * @param portUpdates - Array of port updates
     */
    applyPortChanges(nodeId: string, portUpdates: PortUpdate[]): void;
    /**
     * Adds a new edge label created during initialization.
     * Queues if finishing, otherwise adds to init state and notifies stability detector.
     *
     * @param edgeId - The edge ID the label belongs to
     * @param label - The label to add
     */
    addEdgeLabel(edgeId: string, label: EdgeLabel): void;
    /**
     * Deletes an edge label. During initialization, queues for replay after init completes.
     */
    deleteEdgeLabel(edgeId: string, labelId: string): void;
    /**
     * Applies edge label changes (size, positionOnEdge, etc.).
     * During initialization, only size measurements are tracked for init completion.
     * Non-size changes (positionOnEdge) are ignored since labels are being created with initial values.
     *
     * @param edgeId - The edge ID the labels belong to
     * @param labelUpdates - Array of label updates
     */
    applyEdgeLabelChanges(edgeId: string, labelUpdates: LabelUpdate[]): void;
    /**
     * Attempts to finish initialization if conditions are met.
     * Conditions: not already finishing, not initialized, entities stabilized, all rendered entities measured.
     */
    private tryFinish;
    /**
     * Completes initialization by applying all collected data.
     * Marks as finishing, applies state, executes callback, marks as initialized, processes late arrivals.
     */
    private finish;
    /**
     * Forces initialization to finish even if conditions aren't fully met.
     * Used as a fallback when entity stabilization fails.
     */
    private forceFinish;
    /**
     * Starts a safety timeout to prevent indefinite waiting for measurements.
     * If measurements don't arrive within MEASUREMENT_TIMEOUT, initialization is forced to complete.
     * This handles cases where entities may not be measurable (e.g., display: none).
     */
    private startMeasurementTimeout;
    /**
     * Clears the measurement timeout if it's active.
     */
    private clearMeasurementTimeout;
}

declare class InternalUpdater implements Updater {
    private readonly flowCore;
    private readonly onPortAddsFlush;
    private readonly onPortUpdatesFlush;
    private readonly onPortDeletesFlush;
    private readonly onLabelAddsFlush;
    private readonly onLabelUpdatesFlush;
    private readonly onLabelDeletesFlush;
    constructor(flowCore: FlowCore);
    /**
     * @internal
     */
    applyNodeSize(nodeId: string, size: NonNullable<Node$1['size']>): void;
    /**
     * @internal
     */
    applyNodeSizes(updates: {
        id: string;
        size: NonNullable<Node$1['size']>;
    }[]): void;
    /**
     * @internal
     * An add for a port already in the model is a component recreation whose
     * batched add never lands — re-apply its authored (non-measured) properties.
     */
    addPort(nodeId: string, port: Port): void;
    /**
     * @internal
     */
    deletePort(nodeId: string, portId: string): void;
    /**
     * @internal
     * Filters out updates where no property actually differs from current state.
     */
    applyPortChanges(nodeId: string, portUpdates: PortUpdate[]): void;
    /**
     * @internal
     * See {@link addPort} — same recreation handling for labels.
     */
    addEdgeLabel(edgeId: string, label: EdgeLabel): void;
    /**
     * @internal
     */
    deleteEdgeLabel(edgeId: string, labelId: string): void;
    /**
     * @internal
     * Filters out updates where no property actually differs from current state.
     */
    applyEdgeLabelChanges(edgeId: string, labelUpdates: LabelUpdate[]): void;
    /**
     * Drops measured geometry (size + position) from updates carrying a 0×0 size —
     * the display: none signature — so hiding an observed port never corrupts its
     * last valid geometry. Non-measured properties in the same update still apply.
     */
    private rejectZeroSizePortGeometry;
    /**
     * See {@link rejectZeroSizePortGeometry} — same guard for edge labels.
     */
    private rejectZeroSizeLabelGeometry;
    /**
     * Filters out port updates where none of the changed properties actually differ from current state.
     */
    private filterUnchangedPortUpdates;
    /**
     * Filters out label updates where none of the changed properties actually differ from current state.
     */
    private filterUnchangedLabelUpdates;
}

/**
 * Monotonic generation counter — the standard O(1) cache-invalidation idiom.
 *
 * A producer calls {@link bump} whenever the tracked aspect actually changed;
 * consumers remember the {@link version} they last saw and treat a mismatch
 * as "invalidate and re-read". Unlike a dirty flag it supports any number of
 * independent consumers, and unlike caching derived values (e.g. counts) it
 * cannot alias two different states.
 *
 * @internal
 */
declare class ChangeGeneration {
    private v;
    bump(): void;
    get version(): number;
}

/**
 * One free (unconnected) endpoint of a dangling edge.
 *
 * @public
 * @since 1.4.0
 * @category Types/Model
 */
interface DanglingEndpoint {
    /** The dangling edge. */
    edge: Edge;
    /** Which endpoint of the edge is free. */
    end: EdgeEnd;
    /** The position the free endpoint is anchored at. */
    position: Point;
}

/**
 * Registry for template-declared hidden state.
 *
 * Ports and edge labels are declared in templates, not in the model, so their
 * `hidden` inputs (and the template-level hidden bindings for nodes and edges)
 * cannot live on model objects. The rendering layer writes the declared state
 * here; core reads it as one of the raw sources feeding effective-visibility
 * computation. Everything downstream reads effective visibility
 * (`computedHidden` on nodes/edges, `isPortHidden`/`isLabelHidden` for
 * template-owned items) — never raw flags.
 *
 * Absence means visible: entries exist only for currently hidden items.
 *
 * @internal
 */
declare class TemplateVisibilityRegistry {
    private readonly hiddenNodes;
    private readonly hiddenEdges;
    /** nodeId -> hidden port ids */
    private readonly hiddenPorts;
    /** edgeId -> hidden label ids */
    private readonly hiddenLabels;
    /**
     * Invoked when the hidden state of a node or edge changes.
     * Wired by FlowCore to re-run effective-visibility computation.
     * Port/label changes do not trigger it — their hidden state is read live
     * at each consumer and never stamped on the model.
     */
    onNodeOrEdgeVisibilityChange?: () => void;
    /**
     * Invoked when the hidden state of a port or edge label changes.
     * Wired by FlowCore to prune initialization measurement expectations —
     * post-init, port/label hidden state is read live and needs no state pass.
     */
    onPortOrLabelVisibilityChange?: () => void;
    setNodeHidden(nodeId: string, hidden: boolean): void;
    setEdgeHidden(edgeId: string, hidden: boolean): void;
    setPortHidden(nodeId: string, portId: string, hidden: boolean): void;
    setLabelHidden(edgeId: string, labelId: string, hidden: boolean): void;
    isNodeHidden(nodeId: string): boolean;
    isEdgeHidden(edgeId: string): boolean;
    isPortHidden(nodeId: string, portId: string): boolean;
    isLabelHidden(edgeId: string, labelId: string): boolean;
    /**
     * Silently drops every entry owned by a removed node (its own hidden
     * declaration and its ports'). No change callbacks fire — the element is
     * gone, so there is nothing to recompute or re-render for it; the goal is
     * only that a future element reusing the id starts visible.
     */
    removeNodeEntries(nodeId: string): void;
    /** See {@link removeNodeEntries} — same cleanup for a removed edge. */
    removeEdgeEntries(edgeId: string): void;
    /** @returns true when the stored state actually changed */
    private setFlag;
    /** @returns true when the stored state actually changed */
    private setNestedFlag;
}

declare class FlowCore {
    readonly renderer: Renderer;
    readonly inputEventsRouter: InputEventsRouter;
    readonly environment: EnvironmentInfo;
    private _model;
    private _config;
    readonly initUpdater: InitUpdater;
    readonly internalUpdater: InternalUpdater;
    private readonly updateSemaphore;
    readonly commandHandler: CommandHandler$1;
    readonly middlewareManager: MiddlewareManager;
    readonly spatialHash: SpatialHash;
    readonly modelLookup: ModelLookup;
    readonly transactionManager: TransactionManager;
    readonly portBatchProcessor: PortBatchProcessor;
    readonly labelBatchProcessor: LabelBatchProcessor;
    readonly actionStateManager: ActionStateManager;
    readonly edgeRoutingManager: EdgeRoutingManager;
    readonly eventManager: EventManager;
    readonly shortcutManager: ShortcutManager;
    readonly measurementTracker: MeasurementTracker;
    readonly templateVisibilityRegistry: TemplateVisibilityRegistry;
    /**
     * Bumped by the hidden-computation middleware whenever a pass changed some
     * element's effective visibility (`computedHidden`). Render caches keyed on
     * things a visibility toggle does not change (element counts, viewport)
     * compare its version as an O(1) invalidation signal.
     * @internal
     */
    readonly visibilityGeneration: ChangeGeneration;
    private readonly interactionCoordinator;
    private readonly directRenderStrategy;
    private readonly virtualizedRenderStrategy;
    readonly getFlowOffset: () => Point;
    readonly getViewportSize: () => {
        width: number;
        height: number;
    };
    constructor(modelAdapter: ModelAdapter, renderer: Renderer, inputEventsRouter: InputEventsRouter, environment: EnvironmentInfo, middlewares?: MiddlewareChain, getFlowOffset?: () => Point, getViewportSize?: () => {
        width: number;
        height: number;
    }, config?: DeepPartial<FlowConfig>);
    destroy(): void;
    private destroyed;
    /** Whether a template-visibility flush microtask is already queued. */
    private templateVisibilityFlushScheduled;
    /** Whether the queued flush must run a middleware pass (node/edge change). */
    private templateVisibilityFlushNeedsPass;
    /**
     * Coalesces template-visibility registry callbacks: any number of registry
     * writes landing in the same microtask tick get one
     * {@link InitUpdater.refreshHiddenEntities} prune and (for node/edge
     * changes) one `templateVisibilityChange` middleware pass. Both flags are
     * cleared BEFORE the flush body runs, so a write landing while the pass is
     * still in flight re-arms the flush and gets exactly one follow-up.
     */
    private scheduleTemplateVisibilityFlush;
    private init;
    /**
     * Sets initial viewport size from element dimensions.
     *
     * This must be called BEFORE renderStrategy.init() for two reasons:
     * 1. The viewport size is needed for features like zoomToFit on init
     * 2. At this point, no onChange callbacks are registered yet, so updateMetadata won't trigger events
     *
     * Without this, the ResizeObserver might not fire on reinitialization,
     * leaving viewport.width/height as undefined.
     */
    private initializeViewportSize;
    /**
     * Gets the current model that flow core is using
     */
    get model(): ModelAdapter;
    /**
     * Gets the current environment information
     */
    getEnvironment(): EnvironmentInfo;
    get config(): FlowConfig;
    updateConfig(updatedConfig: DeepPartial<FlowConfig>): void;
    /**
     * Registers a new middleware in the chain
     * @param middleware Middleware to register
     * @returns Function to unregister the middleware
     */
    registerMiddleware(middleware: Middleware): () => void;
    /**
     * Unregister a middleware from the chain
     * @param name Name of the middleware to unregister
     */
    unregisterMiddleware(name: string): void;
    /**
     * Gets the current state of the flow
     */
    getState(): FlowState;
    /**
     * Gets the active render strategy based on virtualization config.
     * When virtualization is enabled, uses VirtualizedRenderStrategy.
     * When disabled, uses DirectRenderStrategy.
     */
    get renderStrategy(): RenderStrategy;
    /**
     * Sets the current state of the flow
     * @param state State to set
     */
    setState(state: FlowState): void;
    /**
     * Executes a function within a transaction context.
     * All state updates within the callback are batched and applied atomically.
     *
     * @example
     * // Simple transaction
     * await flowCore.transaction(async (tx) => {
     *   await tx.emit('addNode', { node });
     *   await tx.emit('selectNode', { nodeId: node.id });
     * });
     *
     * // Named transaction
     * await flowCore.transaction('batchUpdate', async (tx) => {
     *   await tx.emit('updateNodes', { nodes });
     *   if (error) {
     *     tx.rollback(); // Discard all changes
     *   }
     * });
     *
     * // With savepoints
     * await flowCore.transaction(async (tx) => {
     *   await tx.emit('step1', {});
     *   tx.savepoint('afterStep1');
     *
     *   await tx.emit('step2', {});
     *   if (step2Failed) {
     *     tx.rollbackTo('afterStep1');
     *   }
     * });
     *
     * // Wait for measurements to complete before continuing
     * await flowCore.transaction(async (tx) => {
     *   await tx.emit('addNodes', { nodes: [newNode] });
     * }, { waitForMeasurements: true });
     * // Now safe to call zoomToFit() - node dimensions are measured
     * await viewportService.zoomToFit();
     */
    transaction(callback: TransactionCallback): Promise<TransactionResult>;
    transaction(callback: TransactionCallback, options: TransactionOptions): Promise<TransactionResult>;
    transaction(name: LooseAutocomplete<ModelActionType>, callback: TransactionCallback): Promise<TransactionResult>;
    transaction(name: LooseAutocomplete<ModelActionType>, callback: TransactionCallback, options: TransactionOptions): Promise<TransactionResult>;
    /**
     * Applies an update to the flow state
     * @param stateUpdate Partial state to apply
     * @param modelActionTypes Action type(s) that triggered this update. Can be a single type or an array of types (from transactions).
     */
    applyUpdate(stateUpdate: FlowStateUpdate, modelActionTypes: LooseAutocomplete<ModelActionType> | ModelActionTypes): Promise<void>;
    /**
     * Runs an update through the middleware chain and commits it to the model,
     * bypassing the active-transaction routing in `applyUpdate`.
     */
    private applyUpdateToModel;
    /**
     * Opens an out-of-band measurement round (used by `invalidateMeasurements`) and
     * resolves once the triggered measurements settle.
     */
    trackMeasurements(entityIds: string[]): Promise<void>;
    /**
     * Fast-path for viewport-only updates (panning/zooming).
     * Bypasses middleware chain and only updates viewport metadata.
     * Use this for high-frequency viewport changes where middleware processing is unnecessary.
     */
    applyViewportOnlyUpdate(viewportUpdate: Partial<Viewport>): void;
    /**
     * Converts a client position to a flow position
     * @param clientPosition Client position
     * @returns { x: number, y: number } Flow position
     */
    clientToFlowPosition(clientPosition: Point): Point;
    /**
     * Converts a flow position to a client position
     * @param flowPosition Flow position
     * @returns { x: number, y: number } Client position
     */
    flowToClientPosition(flowPosition: Point): Point;
    /**
     * Converts a client position to a position relative to the flow viewport
     * @param clientPosition Client position
     * @returns position on the flow viewport
     */
    clientToFlowViewportPosition(clientPosition: Point): Point;
    /**
     * Gets a node by id
     * @param nodeId Node id
     * @returns Node
     */
    getNodeById(nodeId: string): Node$1 | null;
    /**
     * Gets an edge by id
     * @param edgeId Edge id
     * @returns Edge
     */
    getEdgeById(edgeId: string): Edge | null;
    /**
     * Registers a cleanup for the gesture that is starting; it runs when
     * {@link cancelActiveInteraction} aborts the gesture. The caller must
     * unregister it in its own normal teardown, or stale cleanups accumulate.
     *
     * @returns Function that unregisters the callback
     */
    registerInteractionCleanup(cleanup: () => void): () => void;
    /**
     * Whether {@link cancelActiveInteraction} is mid-flight — its rollback has
     * not committed yet, so input read now could capture geometry it is about
     * to rewrite.
     */
    isCancellingInteraction(): boolean;
    /**
     * Whether an interactive gesture (linking, dragging, resizing, rotating,
     * panning) is currently in progress, or a gesture's listener cleanup is
     * still registered.
     */
    hasActiveInteraction(): boolean;
    /**
     * Aborts the in-progress gesture (linking, drag, resize, rotate or pan):
     * removes its listeners, restores the state it modified (the viewport is
     * not rolled back) and fires the "ended" event with the `cancelled` reason.
     * No-op when nothing is active, when the gesture is already completing, or
     * while a transaction is active (refused with a console warning).
     *
     * @returns Whether any gesture or registered cleanup was torn down
     */
    cancelActiveInteraction(): Promise<boolean>;
    /**
     * Gets all nodes in a range from a point
     * @param point Point to check from
     * @param range Range to check in
     * @returns Array of nodes in range
     */
    getNodesInRange(point: Point, range: number): Node$1[];
    /**
     * Gets the nearest node in a range from a point
     * @param point Point to check from
     * @param range Range to check in
     * @returns Nearest node in range or null
     */
    getNearestNodeInRange(point: Point, range: number): Node$1 | null;
    /**
     * Gets the nearest port in a range from a point
     * @param point Point to check from
     * @param range Range to check in
     * @returns Nearest port in range or null
     */
    getNearestPortInRange(point: Point, range: number): Port | null;
    /**
     * Gets all edges connected to a node
     * @param nodeId Node id
     * @returns Array of edges where the node is either source or target
     */
    getConnectedEdges(nodeId: string): Edge[];
    /**
     * Gets all nodes connected to a node via edges
     * @param nodeId Node id
     * @returns Array of nodes connected to the given node
     */
    getConnectedNodes(nodeId: string): Node$1[];
    /**
     * Gets the source and target nodes of an edge
     * @param edgeId Edge id
     * @returns Object containing source and target nodes, or null if edge doesn't exist
     */
    getNodeEnds(edgeId: string): {
        source: Node$1;
        target: Node$1;
    } | null;
    /**
     * Gets all children nodes for a given group node id
     * @param groupId group node id
     * @returns Array of child nodes
     */
    getChildren(groupId: string): Node$1[];
    /**
     * Gets all nested children (descendants) of a group node
     * @param groupId Group node id
     * @returns Array of all descendant nodes (children, grandchildren, etc.)
     */
    getChildrenNested(groupId: string): Node$1[];
    /**
     * Checks if a node is a nested child (descendant) of a group node
     * @param nodeId Node id
     * @param groupId Group node id
     * @returns True if the node is part of the group's nested subgraph
     */
    isNestedChild(nodeId: string, groupId: string): boolean;
    /**
     * Gets the full chain of parent group Nodes for a given nodeId.
     * @param nodeId Node id
     * @returns Array of parent group Node objects, from closest parent to farthest ancestor
     */
    getParentHierarchy(nodeId: string): GroupNode[];
    /**
     * Detects collision with other nodes by finding all nodes whose rectangles intersect
     * with the specified node's bounding rectangle.
     *
     * @param nodeId - The ID of the node to check for collisions
     * @returns An array of Nodes that overlap with the specified node
     */
    getOverlappingNodes(nodeId: string): Node$1[];
    /**
     * Detects collision with other nodes by finding all nodes whose rectangles intersect
     * with the specified node's bounding rectangle.
     *
     * @param node - The node to check for collisions
     * @returns An array of Nodes that overlap with the specified node
     */
    getOverlappingNodes(node: Node$1): Node$1[];
    /**
     * Checks if a node is currently rendered (visible in viewport).
     * In direct mode, always returns true. In virtualized mode, checks if the node
     * is in the current set of visible nodes.
     *
     * @param nodeId Node id to check
     * @returns True if the node is currently rendered
     */
    isNodeCurrentlyRendered(nodeId: string): boolean;
    /**
     * Returns the current zoom scale
     */
    getScale(): number;
    /**
     * Returns the current viewport
     */
    getViewport(): Viewport;
    get updater(): Updater;
    /**
     * Returns true if the diagram has completed its initialization phase.
     */
    get isInitialized(): boolean;
    /**
     * Returns true if virtualization is enabled.
     */
    get isVirtualizationActive(): boolean;
    setDebugMode(debugMode: boolean): void;
}

interface MoveNodesByCommand {
    name: 'moveNodesBy';
    nodes: Node$1[];
    delta: Point;
}

interface MoveNodesStartCommand {
    name: 'moveNodesStart';
    /** Ids of the nodes the starting gesture drags — reported by `nodeDragStarted`. */
    nodeIds?: string[];
}
interface MoveNodesStopCommand {
    name: 'moveNodesStop';
    /** Ids of the nodes the ending gesture dragged — reported by `nodeDragEnded`. */
    nodeIds?: string[];
}

interface MoveViewportByCommand {
    name: 'moveViewportBy';
    x: number;
    y: number;
}
interface MoveViewportCommand {
    name: 'moveViewport';
    x: number;
    y: number;
}

interface RemoveFromGroupCommand {
    name: 'removeFromGroup';
    groupId: GroupNode['id'];
    nodeIds: Node$1['id'][];
}

interface ResizeNodeCommand {
    name: 'resizeNode';
    id: string;
    size: Required<Node$1>['size'];
    position?: Node$1['position'];
    disableAutoSize?: boolean;
}

interface ResizeNodeStartCommand {
    name: 'resizeNodeStart';
    /** Id of the node the starting gesture resizes — reported by `nodeResizeStarted`. */
    nodeId?: string;
}
interface ResizeNodeStopCommand {
    name: 'resizeNodeStop';
    /** Id of the node the ending gesture resized — reported by `nodeResizeEnded`. */
    nodeId?: string;
}

interface RotateNodeToCommand {
    name: 'rotateNodeTo';
    nodeId: string;
    angle: number;
}

interface RotateNodeStartCommand {
    name: 'rotateNodeStart';
    /** Id of the node the starting gesture rotates — reported by `nodeRotateStarted`. */
    nodeId?: string;
}
interface RotateNodeStopCommand {
    name: 'rotateNodeStop';
    /** Id of the node the ending gesture rotated — reported by `nodeRotateEnded`. */
    nodeId?: string;
}

interface SelectCommand {
    name: 'select';
    nodeIds?: string[];
    edgeIds?: string[];
    multiSelection?: boolean;
}
interface DeselectCommand {
    name: 'deselect';
    nodeIds?: string[];
    edgeIds?: string[];
}
interface DeselectAllCommand {
    name: 'deselectAll';
}
interface SelectEndCommand {
    name: 'selectEnd';
}
interface SelectAllCommand {
    name: 'selectAll';
}

interface BringToFrontCommand {
    name: 'bringToFront';
    nodeIds?: string[];
    edgeIds?: string[];
}
interface SendToBackCommand {
    name: 'sendToBack';
    nodeIds?: string[];
    edgeIds?: string[];
}

interface ZoomCommand {
    name: 'zoom';
    x: number;
    y: number;
    scale: number;
}

interface ZoomToFitCommand {
    name: 'zoomToFit';
    nodeIds?: string[];
    edgeIds?: string[];
    padding?: number | [number, number] | [number, number, number] | [number, number, number, number];
}

/**
 * Type for system commands that can be emitted by InputEventHandler or user
 */
type Command = InitCommand | SelectCommand | SelectAllCommand | SelectEndCommand | DeselectCommand | DeselectAllCommand | MoveNodesByCommand | MoveNodesStartCommand | MoveNodesStopCommand | DeleteSelectionCommand | AddNodesCommand | UpdateNodeCommand | UpdateNodesCommand | PaletteDropNodeCommand | DeleteNodesCommand | AddEdgesCommand | UpdateEdgeCommand | UpdateEdgesCommand | DeleteEdgesCommand | CopyCommand | CutCommand | PasteCommand | MoveViewportCommand | MoveViewportByCommand | StartLinkingCommand | MoveTemporaryEdgeCommand | FinishLinkingCommand | CancelLinkingCommand | StartLinkingFromPositionCommand | FinishLinkingToPositionCommand | StartRelinkingCommand | FinishRelinkingCommand | ResizeNodeCommand | ResizeNodeStartCommand | ResizeNodeStopCommand | ZoomCommand | AddPortsBulkCommand | UpdatePortsBulkCommand | DeletePortsBulkCommand | BringToFrontCommand | SendToBackCommand | AddEdgeLabelsBulkCommand | UpdateEdgeLabelsBulkCommand | DeleteEdgeLabelsBulkCommand | RotateNodeToCommand | RotateNodeStartCommand | RotateNodeStopCommand | HighlightGroupCommand | HighlightGroupClearCommand | AddToGroupCommand | ClearModelCommand | RemoveFromGroupCommand | CenterOnNodeCommand | CenterOnRectCommand | ZoomToFitCommand;
/**
 * Type for command name
 */
type CommandName = Command['name'];
/**
 * Type for command by name
 */
type CommandByName<N extends CommandName> = Extract<Command, {
    name: N;
}>;
/**
 * Type for command without name
 */
type WithoutName<T> = Omit<T, 'name'>;
/**
 * Type for command without name
 */
type IsEmpty<T> = keyof WithoutName<T> extends never ? true : false;
/**
 * Type for command callback function.
 * A returned promise is awaited by `emit`, so emit resolves only after the command finished applying its updates.
 */
type CommandCallback<K extends CommandName> = (command: CommandByName<K>) => void | Promise<void>;
/**
 * Interface for interpreting and routing system commands
 * This is a core component that handles commands from InputEventHandler or user
 */
interface CommandHandler {
    readonly flowCore: FlowCore;
    /**
     * Emit a system command
     * @param command Command to emit
     */
    emit<K extends CommandName>(commandName: K, ...props: IsEmpty<CommandByName<K>> extends true ? [] | [WithoutName<CommandByName<K>>] : [WithoutName<CommandByName<K>>]): Promise<void>;
    /**
     * Register a callback for specific command types
     * @param commandType Type of command to listen for
     * @param callback Function to be called when command occurs
     */
    register<K extends CommandName>(commandType: K, callback: CommandCallback<K>): void;
}

/**
 * Interface representing environment information
 *
 * @public
 * @since 0.8.0
 * @category Internals
 */
interface EnvironmentInfo {
    /** User Operating system name */
    os: LooseAutocomplete<'MacOS' | 'Windows' | 'Linux' | 'iOS' | 'Android' | 'Unknown'> | null;
    /** User Browser name (when applicable) */
    browser: LooseAutocomplete<'Chrome' | 'Firefox' | 'Safari' | 'Edge' | 'Opera' | 'IE' | 'Other'> | null;
    /** Platform identity for high-level adapter routing */
    runtime: LooseAutocomplete<'web' | 'node' | 'other'> | null;
    /** Current timestamp in ms */
    now: () => number;
    /** Generates a unique ID */
    generateId: () => string;
}

/**
 * Array of model action types, used to track all actions in a transaction or a single action.
 * Supports both known action types with autocomplete and custom string action types.
 *
 * @example
 * ```typescript
 * const middleware: Middleware = {
 *   name: 'logger',
 *   execute: (context, next) => {
 *     console.log('Action types:', context.modelActionTypes.join(', '));
 *     next();
 *   }
 * };
 * ```
 *
 * @public
 * @since 0.9.0
 * @category Types/Middleware
 */
type ModelActionTypes = LooseAutocomplete<ModelActionType>[];
/**
 * Individual model action type that can trigger middleware execution.
 * These represent all possible operations that modify the diagram state.
 *
 * @example
 * ```typescript
 * const blockedActions: ModelActionType[] = ['addNodes', 'deleteNodes', 'updateNode'];
 * ```
 *
 * @public
 * @since 0.8.0
 * @category Types/Middleware
 */
type ModelActionType = 'init' | 'changeSelection' | 'moveNodesBy' | 'deleteSelection' | 'addNodes' | 'updateNode' | 'updateNodes' | 'deleteNodes' | 'clearModel' | 'paletteDropNode' | 'addEdges' | 'updateEdge' | 'deleteEdges' | 'deleteElements' | 'addEdgeLabelsBulk' | 'updateEdgeLabelsBulk' | 'deleteEdgeLabelsBulk' | 'addPortsBulk' | 'updatePortsBulk' | 'deletePortsBulk' | 'paste' | 'moveViewport' | 'resizeNode' | 'resizeNodeStart' | 'resizeNodeStop' | 'cancelResize' | 'startLinking' | 'startLinkingFromPosition' | 'moveTemporaryEdge' | 'finishLinking' | 'startRelinking' | 'finishRelinking' | 'zoom' | 'changeZOrder' | 'rotateNodeTo' | 'rotateNodeStart' | 'rotateNodeStop' | 'cancelRotate' | 'highlightGroup' | 'highlightGroupClear' | 'moveNodes' | 'moveNodesStart' | 'moveNodesStop' | 'cancelDrag' | 'selectEnd' | 'templateVisibilityChange';
/**
 * The complete state of the flow diagram.
 * Represents the current state of all nodes, edges, and metadata.
 *
 * @public
 * @since 0.8.0
 * @category Types/Model
 */
interface FlowState {
    /** All nodes currently in the diagram */
    nodes: Node$1[];
    /** All edges currently in the diagram */
    edges: Edge[];
    /** Diagram metadata (selection, viewport, etc.) */
    metadata: Metadata;
}
/**
 * Records a state update made by a specific middleware.
 * Used to track the history of state transformations through the middleware chain.
 *
 * @example
 * ```typescript
 * const middleware: Middleware = {
 *   name: 'audit-logger',
 *   execute: (context, next) => {
 *     // Check what previous middlewares did
 *     context.history.forEach(update => {
 *       console.log(`${update.name} modified:`, update.stateUpdate);
 *     });
 *     next();
 *   }
 * };
 * ```
 *
 * @public
 * @since 0.8.0
 * @category Types/Middleware
 */
interface MiddlewareHistoryUpdate {
    /** The name of the middleware that made the update */
    name: string;
    /** The state update that was applied */
    stateUpdate: FlowStateUpdate;
}
/**
 * Describes a set of changes to apply to the diagram state.
 * Middlewares can modify state by passing a FlowStateUpdate to the `next()` function.
 *
 * @example
 * ```typescript
 * const middleware: Middleware = {
 *   name: 'auto-arranger',
 *   execute: (context, next) => {
 *     // Apply state changes
 *     next({
 *       nodesToUpdate: [
 *         { id: 'node1', position: { x: 100, y: 200 } },
 *         { id: 'node2', position: { x: 300, y: 200 } }
 *       ],
 *       metadataUpdate: {
 *         viewport: { x: 0, y: 0, zoom: 1 }
 *       }
 *     });
 *   }
 * };
 * ```
 *
 * @public
 * @since 0.8.0
 * @category Types/Middleware
 */
interface FlowStateUpdate {
    /** Nodes to add to the diagram */
    nodesToAdd?: Node$1[];
    /** Partial node updates (only changed properties need to be specified) */
    nodesToUpdate?: (Partial<Node$1> & {
        id: Node$1['id'];
    })[];
    /** IDs of nodes to remove from the diagram */
    nodesToRemove?: string[];
    /** Edges to add to the diagram */
    edgesToAdd?: Edge[];
    /** Partial edge updates (only changed properties need to be specified) */
    edgesToUpdate?: (Partial<Edge> & {
        id: Edge['id'];
    })[];
    /** IDs of edges to remove from the diagram */
    edgesToRemove?: string[];
    /** Partial metadata update (viewport, selection, etc.) */
    metadataUpdate?: Partial<Metadata>;
    /**
     * IDs of nodes currently rendered in the viewport.
     * - `undefined` means all nodes are rendered (DirectRenderStrategy / no virtualization)
     * - `string[]` means only those specific IDs are rendered (VirtualizedRenderStrategy)
     * Used by 'init' action to track which nodes need measurement.
     * @internal
     */
    renderedNodeIds?: string[];
    /**
     * IDs of edges currently rendered in the viewport.
     * - `undefined` means all edges are rendered (DirectRenderStrategy / no virtualization)
     * - `string[]` means only those specific IDs are rendered (VirtualizedRenderStrategy)
     * Used by 'init' action to track which edges need measurement.
     * @internal
     */
    renderedEdgeIds?: string[];
    /**
     * Node ids of the gesture that emitted this lifecycle pass (moveNodes/
     * resizeNode/rotateNode start/stop) — the lifecycle emitters read it so their
     * events report the emitting gesture even when the live action state already
     * belongs to a newer one; absent means fall back to the live state. Not part
     * of the model state.
     * @internal
     */
    gestureNodeIds?: string[];
}
/**
 * Helper functions for checking what changed during middleware execution.
 * These helpers track all cumulative changes from the initial state update and all previous middlewares.
 *
 * @public
 * @since 0.8.0
 * @category Types/Middleware
 */
interface MiddlewareHelpers {
    /**
     * Checks if a specific node has been modified.
     * @param id - The node ID to check
     * @returns true if the node was modified (any property changed) by the initial state update or any previous middleware
     */
    checkIfNodeChanged: (id: string) => boolean;
    /**
     * Checks if a specific edge has been modified.
     * @param id - The edge ID to check
     * @returns true if the edge was modified (any property changed) by the initial state update or any previous middleware
     */
    checkIfEdgeChanged: (id: string) => boolean;
    /**
     * Checks if a specific node was added.
     * @param id - The node ID to check
     * @returns true if the node was added by the initial state update or any previous middleware
     */
    checkIfNodeAdded: (id: string) => boolean;
    /**
     * Checks if a specific node was removed.
     * @param id - The node ID to check
     * @returns true if the node was removed by the initial state update or any previous middleware
     */
    checkIfNodeRemoved: (id: string) => boolean;
    /**
     * Checks if a specific edge was added.
     * @param id - The edge ID to check
     * @returns true if the edge was added by the initial state update or any previous middleware
     */
    checkIfEdgeAdded: (id: string) => boolean;
    /**
     * Checks if a specific edge was removed.
     * @param id - The edge ID to check
     * @returns true if the edge was removed by the initial state update or any previous middleware
     */
    checkIfEdgeRemoved: (id: string) => boolean;
    /**
     * Checks if any node has one or more of the specified properties changed.
     * @param props - Array of property names to check (e.g., ['position', 'size'])
     * @returns true if any node has any of these properties modified by the initial state update or any previous middleware
     */
    checkIfAnyNodePropsChanged: (props: string[]) => boolean;
    /**
     * Checks if any edge has one or more of the specified properties changed.
     * @param props - Array of property names to check (e.g., ['sourcePosition', 'targetPosition'])
     * @returns true if any edge has any of these properties modified by the initial state update or any previous middleware
     */
    checkIfAnyEdgePropsChanged: (props: string[]) => boolean;
    /**
     * Checks if any nodes were added.
     * @returns true if at least one node was added by the initial state update or any previous middleware
     */
    anyNodesAdded: () => boolean;
    /**
     * Checks if any edges were added.
     * @returns true if at least one edge was added by the initial state update or any previous middleware
     */
    anyEdgesAdded: () => boolean;
    /**
     * Checks if any nodes were removed.
     * @returns true if at least one node was removed by the initial state update or any previous middleware
     */
    anyNodesRemoved: () => boolean;
    /**
     * Checks if any edges were removed.
     * @returns true if at least one edge was removed by the initial state update or any previous middleware
     */
    anyEdgesRemoved: () => boolean;
    /**
     * Gets all node IDs that have one or more of the specified properties changed.
     * @param props - Array of property names to check (e.g., ['position', 'size'])
     * @returns Array of node IDs that have any of these properties modified by the initial state update or any previous middleware
     */
    getAffectedNodeIds: (props: string[]) => string[];
    /**
     * Gets all edge IDs that have one or more of the specified properties changed.
     * @param props - Array of property names to check (e.g., ['sourcePosition', 'targetPosition'])
     * @returns Array of edge IDs that have any of these properties modified by the initial state update or any previous middleware
     */
    getAffectedEdgeIds: (props: string[]) => string[];
    /**
     * Gets all node IDs that have any property changed, regardless of which property.
     * @since 1.2.2
     * @returns Array of node IDs that were modified by the initial state update or any previous middleware
     */
    getChangedNodeIds: () => string[];
    /**
     * Gets all edge IDs that have any property changed, regardless of which property.
     * @since 1.2.2
     * @returns Array of edge IDs that were modified by the initial state update or any previous middleware
     */
    getChangedEdgeIds: () => string[];
    /**
     * Gets all nodes that were added.
     * @returns Array of node instances that were added by the initial state update or any previous middleware
     */
    getAddedNodes: () => Node$1[];
    /**
     * Gets all edges that were added.
     * @returns Array of edge instances that were added by the initial state update or any previous middleware
     */
    getAddedEdges: () => Edge[];
    /**
     * Gets all nodes that were removed.
     * Uses `initialNodesMap` to access the removed instances.
     * @returns Array of node instances that were removed by the initial state update or any previous middleware
     */
    getRemovedNodes: () => Node$1[];
    /**
     * Gets all edges that were removed.
     * Uses `initialEdgesMap` to access the removed instances.
     * @returns Array of edge instances that were removed by the initial state update or any previous middleware
     */
    getRemovedEdges: () => Edge[];
}
/**
 * The context object passed to middleware execute functions.
 * Provides access to the current state, helper functions, and configuration.
 *
 * @example
 * ```typescript
 * const middleware: Middleware = {
 *   name: 'validation',
 *   execute: (context, next, cancel) => {
 *     // Check if any nodes were added
 *     if (context.helpers.anyNodesAdded()) {
 *       console.log('Nodes added:', context.state.nodes);
 *     }
 *
 *     // Access configuration
 *     console.log('Cell size:', context.config.background.cellSize);
 *
 *     // Check what actions triggered this (supports transactions with multiple actions)
 *     if (context.modelActionTypes.includes('addNodes')) {
 *       // Validate new nodes
 *       const isValid = validateNodes(context.state.nodes);
 *       if (!isValid) {
 *         cancel(); // Block the operation
 *         return;
 *       }
 *     }
 *
 *     next(); // Continue to next middleware
 *   }
 * };
 * ```
 *
 * @public
 * @since 0.8.0
 * @category Types/Middleware
 */
interface MiddlewareContext {
    /** The state before any modifications (before the initial action and before any middleware modifications) */
    initialState: FlowState;
    /** The current state (includes the initial modification and all changes from previous middlewares) */
    state: FlowState;
    /**
     * Map for quick node lookup by ID.
     * Contains the current state after previous middleware processing.
     * Use this to access nodes by ID instead of iterating through `state.nodes`.
     */
    nodesMap: Map<string, Node$1>;
    /**
     * Map for quick edge lookup by ID.
     * Contains the current state after previous middleware processing.
     * Use this to access edges by ID instead of iterating through `state.edges`.
     */
    edgesMap: Map<string, Edge>;
    /**
     * The initial nodes map before any modifications (before the initial action and before any middleware modifications).
     * Use this to compare state before and after all modifications.
     * Common usage: Access removed node instances that no longer exist in `nodesMap`.
     */
    initialNodesMap: Map<string, Node$1>;
    /**
     * The initial edges map before any modifications (before the initial action and before any middleware modifications).
     * Use this to compare state before and after all modifications.
     * Common usage: Access removed edge instances that no longer exist in `edgesMap`.
     */
    initialEdgesMap: Map<string, Edge>;
    /**
     * Map from node ID to connected edge IDs (edges where node is source or target)
     * before any modifications (before the initial action and before any middleware modifications).
     * Use this to find edges connected to specific nodes without scanning all edges.
     * @since 1.2.3
     */
    initialConnectedEdgesMap: Map<string, string[]>;
    /**
     * The action that triggered the middleware execution.
     * @deprecated Use `modelActionTypes` instead, which supports multiple actions from transactions.
     * For single actions, this returns the first (and only) action type.
     */
    modelActionType: ModelActionType;
    /**
     * All action types that triggered the middleware execution.
     * For transactions, this contains the transaction name followed by all action types
     * from commands executed within the transaction.
     * For single commands outside transactions, this is a single-element array.
     *
     * @example
     * ```typescript
     * // For a transaction named 'batchUpdate' with addNodes and moveViewport commands:
     * // modelActionTypes = ['batchUpdate', 'addNodes', 'moveViewport']
     *
     * // For a single command outside a transaction:
     * // modelActionTypes = ['addNodes']
     * ```
     *
     * @since 0.9.0
     */
    modelActionTypes: ModelActionTypes;
    /** Helper functions to check what changed (tracks all cumulative changes from the initial action and all previous middlewares) */
    helpers: MiddlewareHelpers;
    /** All state updates from previous middlewares in the chain */
    history: MiddlewareHistoryUpdate[];
    /** Manager for action states (resizing, linking, etc.) */
    actionStateManager: ActionStateManager;
    /** Manager for edge routing algorithms */
    edgeRoutingManager: EdgeRoutingManager;
    /**
     * The initial state update that triggered the middleware chain.
     * Middlewares can add their own updates to the state, so this may not contain all modifications
     * that will be applied. Use `helpers` to get actual knowledge about all changes.
     */
    initialUpdate: FlowStateUpdate;
    /** The current diagram configuration */
    config: FlowConfig;
    /** Environment information (browser, rendering engine, etc.) */
    environment: EnvironmentInfo;
}
/**
 * Middleware interface for intercepting and modifying diagram state changes.
 *
 * Middlewares form a chain where each can:
 * - Inspect the current state and action type
 * - Modify the state by passing updates to `next()`
 * - Block operations by calling `cancel()`
 * - Perform side effects (logging, validation, etc.)
 *
 * @template TName - The middleware name type (string literal for type safety)
 *
 * @example
 * ```typescript
 * // Read-only middleware that blocks modifications
 * const readOnlyMiddleware: Middleware<'read-only'> = {
 *   name: 'read-only',
 *   execute: (context, next, cancel) => {
 *     const blockedActions = ['addNodes', 'deleteNodes', 'updateNode'];
 *     if (context.modelActionTypes.some((action) => blockedActions.includes(action))) {
 *       console.warn('Action blocked in read-only mode');
 *       cancel();
 *       return;
 *     }
 *     next();
 *   }
 * };
 *
 * // Auto-snap middleware that modifies positions
 * const snapMiddleware: Middleware<'auto-snap'> = {
 *   name: 'auto-snap',
 *   execute: (context, next) => {
 *     const gridSize = 20;
 *     const nodesToSnap = context.helpers.getAffectedNodeIds(['position']);
 *
 *     const updates = nodesToSnap.map(id => {
 *       const node = context.nodesMap.get(id)!;
 *       return {
 *         id,
 *         position: {
 *           x: Math.round(node.position.x / gridSize) * gridSize,
 *           y: Math.round(node.position.y / gridSize) * gridSize
 *         }
 *       };
 *     });
 *
 *     next({ nodesToUpdate: updates });
 *   }
 * };
 *
 * // Register middleware
 * ngDiagramService.registerMiddleware(snapMiddleware);
 * ```
 *
 * @public
 * @since 0.8.0
 * @category Types/Middleware
 */
interface Middleware<TName extends string = string> {
    /** Unique identifier for the middleware */
    name: TName;
    /**
     * The middleware execution function.
     *
     * @param context - Complete context including state, helpers, and configuration
     * @param next - Call this to continue to the next middleware (optionally with state updates)
     * @param cancel - Call this to abort the entire operation
     */
    execute: (context: MiddlewareContext, next: (stateUpdate?: FlowStateUpdate) => Promise<FlowState>, cancel: () => void) => Promise<void> | void;
}
/**
 * An array of middlewares that will be executed in sequence.
 *
 * @public
 * @since 0.8.0
 * @category Types/Middleware
 */
type MiddlewareChain = Middleware[];

/**
 * Interface representing a snapshot of the diagram model state.
 *
 * This read-only interface is provided by the library when the model changes.
 * It contains the complete current state of nodes, edges, and metadata.
 * Typically received in `onChange` callbacks to observe model updates.
 *
 * @public
 * @since 0.8.0
 * @category Types/Model
 */
interface ModelChanges {
    /** Current array of all nodes in the diagram. */
    nodes: Node$1[];
    /** Current array of all edges in the diagram. */
    edges: Edge[];
    /** Current metadata associated with the diagram. */
    metadata: Metadata;
}
/**
 * Interface for model adapters that handle the data management of a flow diagram
 *
 * @public
 * @since 0.8.0
 * @category Types/Model
 */
interface ModelAdapter {
    /**
     * Destroy the model adapter and clean up resources
     * This should be called when the model is no longer needed to prevent memory leaks
     */
    destroy(): void;
    /**
     * Get all nodes in the model
     */
    getNodes(): Node$1[];
    /**
     * Get all edges in the model
     */
    getEdges(): Edge[];
    /**
     * Update nodes in the model
     * @param nodes Array of nodes to set
     * @param nodesFn Function that takes current nodes and returns new nodes
     */
    updateNodes(nodes: Node$1[]): void;
    updateNodes(nodesFn: (nodes: Node$1[]) => Node$1[]): void;
    /**
     * Update edges in the model
     * @param edges Array of edges to set
     * @param edgesFn Function that takes current edges and returns new edges
     */
    updateEdges(edges: Edge[]): void;
    updateEdges(edgesFn: (edges: Edge[]) => Edge[]): void;
    /**
     * Get metadata associated with the model
     */
    getMetadata(): Metadata;
    /**
     * Set metadata for the model
     * @param metadata Metadata to set
     * @param metadataFn Function that takes current metadata and returns new metadata
     */
    updateMetadata(metadata: Metadata): void;
    updateMetadata(metadataFn: (metadata: Metadata) => Metadata): void;
    /**
     * Register a callback to be called when the model changes
     * @param callback Function to be called on changes
     */
    onChange(callback: ({ nodes, edges, metadata }: ModelChanges) => void): void;
    /**
     * Unregister a callback from being called when the model changes
     * @param callback Function to unregister from changes
     */
    unregisterOnChange(callback: ({ nodes, edges, metadata }: ModelChanges) => void): void;
    /**
     * Undo the last change
     */
    undo(): void;
    /**
     * Redo the last undone change
     */
    redo(): void;
    /**
     * Convert the model to a JSON string
     */
    toJSON(): string;
}

/**
 * Interface representing the entire model of the flow diagram
 *
 * @public
 * @since 0.8.0
 * @category Types/Model
 */
interface Model {
    /**
     * Array of nodes in the diagram
     */
    nodes: Node$1[];
    /**
     * Array of edges connecting the nodes
     */
    edges: Edge[];
    /**
     * Metadata associated with the diagram
     */
    metadata: Partial<Metadata>;
}

/**
 * Interface for the Renderer that handles drawing the flow diagram
 */
interface Renderer {
    /**
     * Draws the current state of the flow diagram
     * @param nodes List of nodes to render
     * @param edges List of edges to render
     * @param viewport Viewport to render
     */
    draw(nodes: Node$1[], edges: Edge[], viewport: Viewport): void;
}

/**
 * Map of all available diagram events and their payload types
 *
 * @public
 * @since 0.8.0
 * @category Types/Events
 */
interface DiagramEventMap$1 {
    /**
     * Event emitted when the diagram initialization is complete.
     *
     * This event fires after all nodes and edges including their internal parts
     * (ports, labels) have been measured and positioned.
     */
    diagramInit: DiagramInitEvent$1;
    /**
     * Event emitted when selected nodes are moved within the diagram.
     *
     * This event fires when the user moves nodes manually by dragging or
     * programmatically using the diagram node service.
     */
    selectionMoved: SelectionMovedEvent;
    /**
     * Event emitted when the selection state changes in the diagram.
     *
     * This event fires when the user selects or deselects nodes and edges through
     * clicking or programmatically using the diagram selection service.
     */
    selectionChanged: SelectionChangedEvent;
    /**
     * Event emitted when selected elements are deleted from the diagram.
     *
     * This event fires when the user deletes nodes and edges using the delete key,
     * or programmatically through the diagram service.
     */
    selectionRemoved: SelectionRemovedEvent;
    /**
     * Event emitted when nodes are grouped or ungrouped.
     *
     * This event fires when the user moves nodes in or out of a group node,
     * changing their group membership status.
     */
    groupMembershipChanged: GroupMembershipChangedEvent;
    /**
     * Event emitted when a node is rotated in the diagram.
     *
     * This event fires when the user rotates a node manually using the rotation handle
     * or programmatically using the diagram node service.
     */
    selectionRotated: SelectionRotatedEvent;
    /**
     * Event emitted when the viewport changes through panning or zooming.
     *
     * This event fires during pan and zoom operations, including mouse wheel zoom,
     * and programmatic viewport changes.
     */
    viewportChanged: ViewportChangedEvent;
    /**
     * Event emitted when a user manually draws an edge between two nodes.
     *
     * This event only fires for user-initiated edge creation through the UI,
     * but not for programmatically added edges.
     *
     * @deprecated Use `edgeDrawEnded` instead, which fires for both successful and cancelled draws.
     */
    edgeDrawn: EdgeDrawnEvent;
    /**
     * Event emitted when an edge draw gesture ends, regardless of outcome.
     *
     * Fires on every linking completion — both successful and cancelled.
     * For successful draws, includes the created edge and target.
     * For cancelled draws, includes the cancellation reason.
     *
     * @since 1.2.0
     */
    edgeDrawEnded: EdgeDrawEndedEvent;
    /**
     * Event emitted when the user starts dragging an endpoint of an existing
     * edge (the relinking gesture).
     *
     * @since 1.4.0
     */
    edgeRelinkStarted: EdgeRelinkStartedEvent;
    /**
     * Event emitted when an edge relink gesture ends, regardless of outcome.
     *
     * Fires when the dragged endpoint is dropped, whether it was reconnected to
     * a port, left dangling on empty canvas, or reverted (invalid drop or
     * cancelled gesture).
     *
     * @since 1.4.0
     */
    edgeRelinkEnded: EdgeRelinkEndedEvent;
    /**
     * Event emitted when clipboard content is pasted into the diagram.
     *
     * This event fires when nodes and edges are added via paste operations,
     * either through keyboard shortcuts or programmatic paste commands.
     */
    clipboardPasted: ClipboardPastedEvent;
    /**
     * Event emitted when a node or group size changes.
     *
     * This event fires when a node is resized manually by dragging resize handles
     * or programmatically using resize methods.
     */
    nodeResized: NodeResizedEvent;
    /**
     * Event emitted when a palette item is dropped onto the diagram.
     *
     * This event fires when users drag items from the palette and drop them
     * onto the canvas to create new nodes.
     */
    paletteItemDropped: PaletteItemDroppedEvent;
    /**
     * Event emitted when a node resize operation begins.
     *
     * This event fires once when the user starts resizing a node by dragging
     * a resize handle.
     */
    nodeResizeStarted: NodeResizeStartedEvent;
    /**
     * Event emitted when a node resize operation ends.
     *
     * This event fires when the user releases the pointer after resizing a node.
     * The node will have its final size when this event is received.
     */
    nodeResizeEnded: NodeResizeEndedEvent;
    /**
     * Event emitted when a node rotation operation begins.
     *
     * This event fires once when the user starts rotating a node by dragging
     * the rotation handle.
     */
    nodeRotateStarted: NodeRotateStartedEvent;
    /**
     * Event emitted when a node rotation operation ends.
     *
     * This event fires when the user releases the pointer after rotating a node.
     * The node will have its final angle when this event is received.
     */
    nodeRotateEnded: NodeRotateEndedEvent;
    /**
     * Event emitted when a selection gesture is complete.
     *
     * This event fires on pointerup after a selection operation completes -
     * whether from clicking a node/edge, box selection, or select-all.
     */
    selectionGestureEnded: SelectionGestureEndedEvent;
    /**
     * Event emitted when a node drag operation begins.
     *
     * This event fires once when the drag threshold is crossed, signaling the
     * start of a drag operation.
     */
    nodeDragStarted: NodeDragStartedEvent;
    /**
     * Event emitted when a node drag operation ends.
     *
     * This event fires when the user releases the pointer after dragging nodes.
     * Nodes will have their final positions when this event is received.
     */
    nodeDragEnded: NodeDragEndedEvent;
}
/**
 * Event payload emitted when the diagram initialization is complete.
 *
 * This event fires after all nodes and edges including their internal parts
 * (ports, labels) have been measured and positioned.
 *
 * @public
 * @since 0.8.0
 * @category Types/Events
 */
interface DiagramInitEvent$1 {
    /** All nodes present in the diagram after initialization */
    nodes: Node$1[];
    /** All edges present in the diagram after initialization */
    edges: Edge[];
    /** Current viewport configuration including position and scale */
    viewport: Viewport;
}
/**
 * Event payload emitted when selected nodes are moved within the diagram.
 *
 * This event fires when the user moves nodes manually by dragging or programmatically
 * using the {@link NgDiagramNodeService.moveNodesBy} method.
 *
 * @public
 * @since 0.8.0
 * @category Types/Events
 */
interface SelectionMovedEvent {
    /** Nodes that were moved with their updated positions */
    nodes: Node$1[];
}
/**
 * Event payload emitted when the selection state changes in the diagram.
 *
 * This event fires when the user selects or deselects nodes and edges through clicking
 * or programmatically using the {@link NgDiagramSelectionService}.
 *
 * @public
 * @since 0.8.0
 * @category Types/Events
 */
interface SelectionChangedEvent {
    /** Currently selected nodes */
    selectedNodes: Node$1[];
    /** Currently selected edges */
    selectedEdges: Edge[];
    /** Previously selected nodes before the change */
    previousNodes: Node$1[];
    /** Previously selected edges before the change */
    previousEdges: Edge[];
}
/**
 * Event payload emitted when a selection gesture is complete.
 *
 * This event fires on pointerup after a selection operation completes —
 * whether from clicking a node/edge, box selection, or select-all.
 *
 * @public
 * @since 1.1.0
 * @category Types/Events
 */
interface SelectionGestureEndedEvent {
    /** Currently selected nodes after the selection gesture */
    nodes: Node$1[];
    /** Currently selected edges after the selection gesture */
    edges: Edge[];
}
/**
 * Event payload emitted when the viewport changes through panning or zooming.
 *
 * This event fires during pan and zoom operations, including mouse wheel zoom,
 * and programmatic viewport changes.
 *
 * @public
 * @since 0.8.0
 * @category Types/Events
 */
interface ViewportChangedEvent {
    /** Current viewport state after the change */
    viewport: Viewport;
    /** Previous viewport state before the change */
    previousViewport: Viewport;
}
/**
 * Event payload emitted when a user manually draws an edge between two nodes.
 *
 * This event only fires for user-initiated edge creation through the UI,
 * but not for programmatically added edges.
 *
 * @deprecated Use {@link EdgeDrawEndedEvent} instead, which fires for both successful and cancelled draws.
 * @public
 * @since 0.8.0
 * @category Types/Events
 */
interface EdgeDrawnEvent {
    /** The newly created edge object */
    edge: Edge;
    /** The source node from which the edge originates */
    source: Node$1;
    /** The target node to which the edge connects */
    target: Node$1;
    /** Source port identifier if connected to a specific port */
    sourcePort?: string;
    /** Target port identifier if connected to a specific port */
    targetPort?: string;
}
/**
 * Reason an edge draw gesture was cancelled.
 *
 * - `noTarget` — the user released on empty space (no target node/port snapped)
 * - `invalidConnection` — `validateConnection()` returned false
 * - `invalidTarget` — the target node doesn't exist or the target port has wrong type
 * - `cancelled` — the gesture was aborted programmatically (e.g. Esc key,
 *   {@link NgDiagramService.cancelActiveInteraction})
 *
 * @public
 * @since 1.2.0
 * @category Types/Events
 */
type EdgeDrawCancelReason = 'noTarget' | 'invalidConnection' | 'invalidTarget' | 'cancelled';
/**
 * Reason an interactive gesture (drag, resize, rotation) ended without a normal
 * pointer release.
 *
 * - `cancelled` — the gesture was aborted programmatically (e.g. Esc key,
 *   {@link NgDiagramService.cancelActiveInteraction})
 *
 * @public
 * @since 1.3.0
 * @category Types/Events
 */
type GestureCancelReason = 'cancelled';
/**
 * Event payload emitted when an edge draw gesture ends, regardless of outcome.
 *
 * Fires on every linking completion — both successful and cancelled.
 * For successful completions, `edge`, `target`, and `targetPort` are populated.
 * For cancellations, `reason` indicates why the gesture was cancelled.
 *
 * @public
 * @since 1.2.0
 * @category Types/Events
 */
interface EdgeDrawEndedEvent {
    /**
     * The source node from which the edge was drawn.
     * Undefined for draws started from empty canvas
     * (see {@link NgDiagramService.startLinkingFromPosition}).
     */
    source?: Node$1;
    /** Source port identifier if connected to a specific port */
    sourcePort?: string;
    /** The position where the pointer was released */
    dropPosition: Point;
    /** Whether the edge was successfully created */
    success: boolean;
    /** The created edge (only present on success) */
    edge?: Edge;
    /** The target node (only present on success) */
    target?: Node$1;
    /** Target port identifier (only present on success) */
    targetPort?: string;
    /** The reason the draw was cancelled (only present on cancel) */
    reason?: EdgeDrawCancelReason;
}
/**
 * Reason an edge relink gesture ended without changing the edge.
 *
 * - `noTarget` — the endpoint was dropped on empty canvas while dangling
 *   edges are disabled, or `danglingEdges.shouldKeepOnDrop` returned false
 *   for the detached edge
 * - `invalidConnection` — the drop target failed validation: it was rejected
 *   by `linking.validateConnection` (context reason `relink`), or it is not a
 *   valid target at all (hidden node, hidden or missing port, port with the
 *   wrong direction)
 * - `cancelled` — the gesture was aborted (Esc key,
 *   {@link NgDiagramService.cancelActiveInteraction}, or another gesture took
 *   over the pointer), or the endpoint was dropped back on its original node
 *   and port, which changes nothing
 *
 * @public
 * @since 1.4.0
 * @category Types/Events
 */
type EdgeRelinkCancelReason = 'noTarget' | 'invalidConnection' | 'cancelled';
/**
 * Event payload emitted when the user starts dragging an endpoint of an
 * existing edge.
 *
 * @public
 * @since 1.4.0
 * @category Types/Events
 */
interface EdgeRelinkStartedEvent {
    /** The edge being relinked (snapshot at gesture start). */
    edge: Edge;
    /** Which endpoint is being dragged. */
    end: EdgeEnd;
}
/**
 * Event payload emitted when an edge relink gesture ends, regardless of outcome.
 *
 * On success the edge was either reconnected (`target` and `targetPort` are
 * set) or left dangling (`edge` has a free endpoint anchored at
 * `dropPosition`). On failure the edge is unchanged and `reason` explains why.
 *
 * @public
 * @since 1.4.0
 * @category Types/Events
 */
interface EdgeRelinkEndedEvent {
    /** The edge after the relink (unchanged snapshot when `success` is false). */
    edge: Edge;
    /** Which endpoint was dragged. */
    end: EdgeEnd;
    /** The node the endpoint was connected to before the relink, if any. */
    previousNode?: Node$1;
    /** The port the endpoint was connected to before the relink, if any. */
    previousPort?: string;
    /** The anchor position of the endpoint before the relink, present only when the endpoint was free (dangling). */
    previousPosition?: Point;
    /** The position where the pointer was released. */
    dropPosition: Point;
    /** Whether the edge was changed (reconnected or left dangling). */
    success: boolean;
    /** The node the endpoint was reconnected to (only present on reconnect). */
    target?: Node$1;
    /** The port the endpoint was reconnected to (only present on reconnect). */
    targetPort?: string;
    /** The reason the relink was reverted (only present on failure). */
    reason?: EdgeRelinkCancelReason;
}
/**
 * Event payload emitted when clipboard content is pasted into the diagram.
 *
 * This event fires when nodes and edges are added via paste operations,
 * either through keyboard shortcuts or programmatic paste commands.
 *
 * @public
 * @since 0.8.0
 * @category Types/Events
 */
interface ClipboardPastedEvent {
    /** Nodes that were pasted into the diagram */
    nodes: Node$1[];
    /** Edges that were pasted into the diagram */
    edges: Edge[];
}
/**
 * Event payload emitted when a node or group size changes.
 *
 * This event fires when a node is resized manually by dragging resize handles
 * or programmatically using resize methods.
 *
 * @public
 * @since 0.8.0
 * @category Types/Events
 */
interface NodeResizedEvent {
    /** Node that was resized with its updated size */
    node: Node$1;
    /** Previous size of the node before the change */
    previousSize: Size;
}
/**
 * Event payload emitted when a palette item is dropped onto the diagram.
 *
 * This event fires when users drag items from the palette and drop them
 * onto the canvas to create new nodes.
 *
 * @public
 * @since 0.8.0
 * @category Types/Events
 */
interface PaletteItemDroppedEvent {
    /** The node that was created from the dropped palette item */
    node: Node$1;
    /** The position where the item was dropped */
    dropPosition: Point;
}
/**
 * Event payload emitted when selected elements are deleted from the diagram.
 *
 * This event fires when the user deletes nodes and edges using the delete key,
 * or programmatically through the diagram service.
 *
 * @public
 * @since 0.8.0
 * @category Types/Events
 */
interface SelectionRemovedEvent {
    /** Nodes that were deleted from the diagram */
    deletedNodes: Node$1[];
    /** Edges that were deleted from the diagram */
    deletedEdges: Edge[];
    /**
     * Edges that were detached into dangling edges instead of being deleted
     * (see `danglingEdges.detachOnNodeDelete`). The snapshots are taken after
     * the detach: the freed endpoints already have an empty `source`/`target`
     * and their anchor positions set. Empty when nothing was detached.
     *
     * @since 1.4.0
     */
    detachedEdges: Edge[];
}
/**
 * Event payload emitted when nodes are grouped or ungrouped.
 *
 * This event fires when the user moves nodes in or out of a group node,
 * changing their group membership status.
 *
 * @public
 * @since 0.8.0
 * @category Types/Events
 */
interface GroupMembershipChangedEvent {
    /** Nodes added to groups, organized by target group */
    grouped: {
        nodes: Node$1[];
        targetGroup: GroupNode;
    }[];
    /** Nodes removed from groups */
    ungrouped: Node$1[];
}
/**
 * Event payload emitted when a node is rotated in the diagram.
 *
 * This event fires when the user rotates a node manually using the rotation handle
 * or programmatically using the {@link NgDiagramNodeService} rotation methods.
 *
 * @public
 * @since 0.8.0
 * @category Types/Events
 */
interface SelectionRotatedEvent {
    /** The node that was rotated */
    node: Node$1;
    /** The new angle of the node in degrees */
    angle: number;
    /** The previous angle of the node in degrees */
    previousAngle: number;
}
/**
 * Event payload emitted when a node resize operation begins.
 *
 * This event fires once when the user starts resizing a node by dragging
 * a resize handle.
 *
 * @public
 * @since 1.1.0
 * @category Types/Events
 */
interface NodeResizeStartedEvent {
    /** The node being resized */
    node: Node$1;
}
/**
 * Event payload emitted when a node resize operation ends.
 *
 * This event fires when the user releases the pointer after resizing a node.
 * The node will have its final size when this event is received.
 *
 * @public
 * @since 1.1.0
 * @category Types/Events
 */
interface NodeResizeEndedEvent {
    /** The node that was resized, with its final size */
    node: Node$1;
    /** Present when the resize ended without a normal pointer release */
    cancelReason?: GestureCancelReason;
}
/**
 * Event payload emitted when a node rotation operation begins.
 *
 * This event fires once when the user starts rotating a node by dragging
 * the rotation handle.
 *
 * @public
 * @since 1.1.0
 * @category Types/Events
 */
interface NodeRotateStartedEvent {
    /** The node being rotated */
    node: Node$1;
}
/**
 * Event payload emitted when a node rotation operation ends.
 *
 * This event fires when the user releases the pointer after rotating a node.
 * The node will have its final angle when this event is received.
 *
 * @public
 * @since 1.1.0
 * @category Types/Events
 */
interface NodeRotateEndedEvent {
    /** The node that was rotated, with its final angle */
    node: Node$1;
    /** Present when the rotation ended without a normal pointer release */
    cancelReason?: GestureCancelReason;
}
/**
 * Event payload emitted when a node drag operation begins.
 *
 * This event fires once when the drag threshold is crossed, signaling the
 * start of a drag operation.
 *
 * @public
 * @since 1.1.0
 * @category Types/Events
 */
interface NodeDragStartedEvent {
    /** Nodes being dragged */
    nodes: Node$1[];
}
/**
 * Event payload emitted when a node drag operation ends.
 *
 * This event fires when the user releases the pointer after dragging nodes.
 * Nodes will have their final positions when this event is received.
 *
 * @public
 * @since 1.1.0
 * @category Types/Events
 */
interface NodeDragEndedEvent {
    /** Nodes that were dragged, with their final positions */
    nodes: Node$1[];
    /** Present when the drag ended without a normal pointer release */
    cancelReason?: GestureCancelReason;
}
/**
 * Type for event listeners
 */
type EventListener<T> = (event: T) => void;
/**
 * Type for event unsubscribe function
 */
type UnsubscribeFn = () => void;

/**
 * Internal event map that extends the public DiagramEventMap with internal-only events.
 * These events are used internally by the library but are not part of the public API.
 *
 * @internal
 */
interface InternalDiagramEventMap extends DiagramEventMap$1 {
    /**
     * Event emitted when the action state changes.
     *
     * This event fires when an action like resizing, rotating, or linking
     * starts or ends, allowing subscribers to react to state changes.
     *
     * @internal - For internal use only. Use the `actionState` signal on NgDiagramService instead.
     */
    actionStateChanged: ActionStateChangedEvent;
}
/**
 * Event payload emitted when the action state changes.
 *
 * This event fires when an action like resizing, rotating, or linking
 * starts or ends, allowing subscribers to react to state changes.
 *
 * @internal
 */
interface ActionStateChangedEvent {
    /** The current action state */
    actionState: Readonly<ActionState>;
}

/**
 * Manages event subscriptions and emissions for the diagram
 */
declare class EventManager {
    private listeners;
    private enabled;
    private deferredEmits;
    /**
     * Subscribe to an event
     * @param event The event name
     * @param callback The callback to invoke when the event is emitted
     * @returns A function to unsubscribe
     */
    on<K extends keyof InternalDiagramEventMap>(event: K, callback: EventListener<InternalDiagramEventMap[K]>): UnsubscribeFn;
    /**
     * Subscribe to an event that will only fire once
     * @param event The event name
     * @param callback The callback to invoke when the event is emitted
     * @returns A function to unsubscribe
     */
    once<K extends keyof InternalDiagramEventMap>(event: K, callback: EventListener<InternalDiagramEventMap[K]>): UnsubscribeFn;
    /**
     * Emit an event
     * @param event The event name
     * @param payload The event payload
     */
    emit<K extends keyof InternalDiagramEventMap>(event: K, payload: InternalDiagramEventMap[K]): void;
    /**
     * Queue an event to be emitted later
     * @param event The event name
     * @param payload The event payload
     */
    deferredEmit<K extends keyof InternalDiagramEventMap>(event: K, payload: InternalDiagramEventMap[K]): void;
    /**
     * Remove all listeners for an event, or a specific listener
     * @param event The event name
     * @param callback Optional specific callback to remove
     */
    off<K extends keyof InternalDiagramEventMap>(event: K, callback?: EventListener<InternalDiagramEventMap[K]>): void;
    /**
     * Remove all event listeners
     */
    offAll(): void;
    /**
     * Enable or disable event emissions
     * @param enabled Whether events should be emitted
     */
    setEnabled(enabled: boolean): void;
    /**
     * Check if event emissions are enabled
     */
    isEnabled(): boolean;
    /**
     * Check if there are any listeners for an event
     * @param event The event name
     * @returns True if there are listeners
     */
    hasListeners(event: keyof InternalDiagramEventMap): boolean;
    /**
     * Flush all deferred emits
     */
    flushDeferredEmits(): void;
    /**
     * Clear all deferred emits without executing them
     */
    clearDeferredEmits(): void;
    private removeListener;
}

/**
 * **Internal manager** for temporary state during ongoing user actions.
 * Tracks the state of interactive operations like resizing, linking, rotating, and dragging
 * until the action completes.
 *
 * @remarks
 * **For application code, use {@link NgDiagramService.actionState} signal instead.**
 * This class is exposed primarily for middleware development where you can access it
 * via `context.actionStateManager`.
 *
 * @example
 * ```typescript
 * const middleware: Middleware = {
 *   name: 'resize-validator',
 *   execute: (context, next, cancel) => {
 *     const resizeState = context.actionStateManager.resize;
 *     if (resizeState) {
 *       console.log('Currently resizing node:', resizeState.nodeId);
 *     }
 *     next();
 *   }
 * };
 * ```
 *
 * @public
 * @since 0.8.0
 * @category Internals
 */
declare class ActionStateManager {
    private readonly eventManager;
    private state;
    constructor(eventManager: EventManager);
    /**
     * Gets the current action state (readonly).
     *
     * @returns The complete action state object
     */
    getState(): Readonly<ActionState>;
    /**
     * Emits an 'actionStateChanged' event with the current state.
     * @internal
     */
    private emitStateChanged;
    /**
     * Gets the current resize action state.
     *
     * @returns The resize state if a resize is in progress, undefined otherwise
     */
    get resize(): ResizeActionState | undefined;
    /**
     * Sets the resize action state.
     *
     * @param value - The resize state to set, or undefined to clear
     */
    set resize(value: ResizeActionState | undefined);
    /**
     * Gets the current linking action state.
     *
     * @returns The linking state if a link is being created, undefined otherwise
     */
    get linking(): LinkingActionState | undefined;
    /**
     * Sets the linking action state.
     *
     * @param value - The linking state to set, or undefined to clear
     */
    set linking(value: LinkingActionState | undefined);
    /**
     * Gets the current copy/paste action state.
     *
     * @returns The copy/paste state if a copy/paste operation is in progress, undefined otherwise
     */
    get copyPaste(): CopyPasteActionState | undefined;
    /**
     * Sets the copy/paste action state.
     *
     * @param value - The copy/paste state to set, or undefined to clear
     */
    set copyPaste(value: CopyPasteActionState | undefined);
    /**
     * Gets the current highlight group action state.
     *
     * @returns The highlight group state if a group is being highlighted, undefined otherwise
     */
    get highlightGroup(): HighlightGroupActionState | undefined;
    /**
     * Sets the highlight group action state.
     *
     * @param value - The highlight group state to set, or undefined to clear
     */
    set highlightGroup(value: HighlightGroupActionState | undefined);
    /**
     * Gets the current rotation action state.
     *
     * @returns The rotation state if a rotation is in progress, undefined otherwise
     */
    get rotation(): RotationActionState | undefined;
    /**
     * Sets the rotation action state.
     *
     * @param value - The rotation state to set, or undefined to clear
     */
    set rotation(value: RotationActionState | undefined);
    /**
     * Gets the current dragging action state.
     *
     * @returns The dragging state if nodes are being dragged, undefined otherwise
     */
    get dragging(): DraggingActionState | undefined;
    /**
     * Sets the dragging action state.
     *
     * @param value - The dragging state to set, or undefined to clear
     */
    set dragging(value: DraggingActionState | undefined);
    /**
     * Gets the current panning action state.
     *
     * @returns The panning state if viewport is being panned, undefined otherwise
     */
    get panning(): PanningActionState | undefined;
    /**
     * Sets the panning action state.
     *
     * @param value - The panning state to set, or undefined to clear
     */
    set panning(value: PanningActionState | undefined);
    /**
     * Clears the resize action state.
     */
    clearResize(): void;
    /**
     * Clears the linking action state.
     */
    clearLinking(): void;
    /**
     * Clears the copy/paste action state.
     */
    clearCopyPaste(): void;
    /**
     * Clears the highlight group action state.
     */
    clearHighlightGroup(): void;
    /**
     * Clears the rotation action state.
     */
    clearRotation(): void;
    /**
     * Clears the dragging action state.
     */
    clearDragging(): void;
    /**
     * Checks if a resize operation is currently in progress.
     */
    isResizing(): boolean;
    /**
     * Checks if a linking operation is currently in progress.
     */
    isLinking(): boolean;
    /**
     * Checks if a rotation operation is currently in progress.
     */
    isRotating(): boolean;
    /**
     * Checks if a dragging operation is currently in progress.
     */
    isDragging(): boolean;
    /**
     * Clears the panning action state.
     */
    clearPanning(): void;
    /**
     * Checks if a panning operation is currently in progress.
     */
    isPanning(): boolean;
    /**
     * Gets the current selection action state.
     *
     * @returns The selection state if set, undefined otherwise
     */
    get selection(): SelectionActionState | undefined;
    /**
     * Sets the selection action state.
     *
     * @param value - The selection state to set, or undefined to clear
     */
    set selection(value: SelectionActionState | undefined);
    /**
     * Clears the selection action state.
     */
    clearSelection(): void;
}

/**
 * What an observed element is: a node, one of a node's ports, or one of an edge's labels.
 *
 * @internal
 */
type ObservedElementMetadata = {
    type: 'port';
    nodeId: string;
    portId: string;
} | {
    type: 'edge-label';
    edgeId: string;
    labelId: string;
} | {
    type: 'node';
    nodeId: string;
};
/** @internal */
interface CapturedResizeEntry {
    entry: ResizeObserverEntry;
    /** The id of the node under an active resize gesture when the observer delivered the entry, if any. */
    resizingNodeId: string | undefined;
}
/** @internal */
interface BatchedResizeObserverConfig {
    /** Processes the batched entries after the double-rAF stabilization. */
    processBatch: (entries: CapturedResizeEntry[]) => void;
    /** Sampled synchronously at each observer delivery, to stamp the entries. */
    activeResizeNodeId: () => string | undefined;
    /** Called when the observer delivers entries, before batch processing is scheduled. */
    onObserverActivity?: (metadata: ObservedElementMetadata[]) => void;
}
/**
 * One `ResizeObserver` for every node, port and edge label of a diagram (ngDiagram's
 * `BatchResizeObserverService`).
 *
 * Entries are collected and processed together two animation frames after the observer delivers them, so layout
 * has settled. Only the newest entry per element is kept. Each element is indexed under its owner (`node:<id>` for
 * nodes and their ports, `edge:<id>` for labels), so all of an owner's elements can be re-measured at once.
 *
 * The {@link DiagramRuntime} owns one instance, as `runtime.resizeObserver`; elements observe themselves through
 * it and {@link DiagramResizeProcessor} consumes the batches.
 *
 * @internal
 */
declare class BatchedResizeObserver {
    private observer;
    private observedElements;
    private entityIndex;
    private config;
    private rafId;
    private pendingEntries;
    constructor();
    /** Sets the batch processor and the activity callbacks. */
    configure(config: BatchedResizeObserverConfig): void;
    /** Observes an element's size, recording what it is. */
    observe(element: Element, metadata: ObservedElementMetadata): void;
    /** Stops observing an element. Safe for an element that was never observed. */
    unobserve(element: Element): void;
    /**
     * Makes the observer deliver a fresh entry for the element. Use it when the element moved without changing
     * size, which `ResizeObserver` alone does not report.
     */
    invalidate(element: Element): void;
    getMetadata(element: Element): ObservedElementMetadata | undefined;
    /**
     * Re-measures a node's element and all its ports.
     *
     * @returns The entity keys invalidated: `['node:<nodeId>']`, or `[]` when nothing is observed for the node
     */
    invalidateNode(nodeId: string): string[];
    /**
     * Re-measures all of an edge's labels.
     *
     * @returns The entity keys invalidated: `['edge:<edgeId>']`, or `[]` when nothing is observed for the edge
     */
    invalidateEdgeLabels(edgeId: string): string[];
    /**
     * Re-measures every observed element.
     *
     * @returns The entity keys invalidated
     */
    invalidateAll(): string[];
    /** Disconnects the observer and drops pending work. The instance cannot be used afterwards. */
    destroy(): void;
    private invalidateByKey;
    private getEntityKey;
    private addToEntityIndex;
    private removeFromEntityIndex;
    private processBatch;
}

/** @internal */
interface CursorPosition extends Point {
    timestamp: number;
}
/**
 * The last known mouse position in client coordinates (ngDiagram's `CursorPositionTrackerService`), kept up to date
 * by the diagram's `CursorPositionTrackerController`. Paste uses it to place pasted nodes under the cursor, and
 * manual linking to start the temporary edge there. One per diagram, as `runtime.cursorPosition`.
 *
 * @internal
 */
declare class CursorPositionTracker {
    private lastPosition;
    /** Records a client position. */
    updatePosition(x: number, y: number): void;
    /** A copy of the last known position. */
    getLastPosition(): CursorPosition;
    /** Whether the last position was recorded within the last five seconds. */
    hasRecentPosition(): boolean;
}

/**
 * Environment information for the diagram core: OS and browser detection, a clock and an id generator. Ported from
 * ngDiagram's `EnvironmentProviderService`. Outside a browser (SSR, Node) it reports `runtime: 'node'` and no OS or
 * browser.
 *
 * @internal
 */
declare class DiagramEnvironment implements EnvironmentInfo {
    get os(): EnvironmentInfo['os'] | null;
    get browser(): EnvironmentInfo['browser'] | null;
    get runtime(): EnvironmentInfo['runtime'];
    /** Whether the code runs in a browser, with `window` and `document`. */
    get isClient(): boolean;
    now(): number;
    generateId(): string;
    private detectOS;
    private detectBrowser;
}

/**
 * Browser events that the router understands and can normalize.
 *
 * @internal
 */
type DomInputEvent = KeyboardEvent | WheelEvent | PointerEvent | DragEvent | TouchEvent;
/**
 * A `PointerEvent` with the flags that input controllers set to coordinate. Several controllers see the same
 * event as it bubbles (and on `document`), and each one checks the flags of the controllers before it, so
 * **listener order matters**. See the epic (ISSUE-9660) for the order on the diagram host.
 *
 * @internal
 */
interface PointerInputEvent extends PointerEvent {
    moveSelectionHandled?: boolean;
    zoomingHandled?: boolean;
    linkingHandled?: boolean;
    relinkHandled?: boolean;
    rotateHandled?: boolean;
    selectHandled?: boolean;
    boxSelectionHandled?: boolean;
}
/**
 * Bridges DOM events to the core input handlers. Ported from ngDiagram's `InputEventsRouterService`.
 *
 * Input controllers build a core event with {@link DomInputEventsRouter.getBaseEvent} (id, timestamp and
 * modifiers normalized across OSes: the primary modifier is Cmd on macOS and Ctrl elsewhere), add the event name and
 * payload, and pass it to `emit()`. `eventGuards` holds the common checks.
 *
 * @internal
 */
declare class DomInputEventsRouter extends InputEventsRouter {
    private readonly environment;
    constructor(environment: DiagramEnvironment);
    /** Creates the common part of a core input event from a DOM event. */
    getBaseEvent(event: DomInputEvent): Omit<BaseInputEvent, 'name'>;
    /** Guards for common event properties: type, modifiers, buttons and keys. */
    readonly eventGuards: {
        isPointerEvent: (event: Event) => event is PointerEvent;
        isKeyboardEvent: (event: Event) => event is KeyboardEvent;
        isWheelEvent: (event: Event) => event is WheelEvent;
        isDomEvent: (event: Event) => event is DomInputEvent;
        withPrimaryModifier: (event: Event) => boolean;
        withSecondaryModifier: (event: Event) => boolean;
        withShiftModifier: (event: Event) => boolean;
        withMetaModifier: (event: Event) => boolean;
        withoutModifiers: (event: Event) => boolean;
        withPrimaryButton: (event: Event) => boolean;
        isArrowKeyPressed: (event: Event) => boolean;
        isKeyPressed: (key: string) => (event: Event) => boolean;
        isKeyComboPressed: (key: string, ...mods: (keyof InputModifiers)[]) => (event: Event) => boolean;
    };
    private getPrimaryModifierKey;
    private isPointerEvent;
    private isKeyboardEvent;
    private isWheelEvent;
    private isDomEvent;
    private getModifiers;
}

/** Removes a subscription. Calling it more than once is safe. */
type Unsubscribe = () => void;
/**
 * Listener of a {@link ReadonlyObservable}, called with the new value and the value it replaced.
 *
 * @typeParam T - Type of the value.
 */
type ObservableListener<T> = (value: T, previous: T) => void;
/**
 * A value that changes over time, returned by the diagram API. Read the current value with `value`, and call
 * `subscribe()` to be notified of changes. In a Lit element, use a {@link DiagramObserver} to re-render when the
 * value changes.
 *
 * @example
 * Log the zoom scale whenever it changes:
 * ```ts
 * const unsubscribe = diagram.api.viewport.scale.subscribe((scale) => console.log('Scale', scale));
 * ...
 * unsubscribe();
 * ```
 *
 * @typeParam T - Type of the value.
 */
interface ReadonlyObservable<T> {
    /** The current value. */
    readonly value: T;
    /**
     * Calls `listener` whenever the value changes. The listener is not called for the current value.
     *
     * @param listener - Function called with the new and the previous value.
     * @returns A function that removes the subscription.
     */
    subscribe(listener: ObservableListener<T>): Unsubscribe;
}
/** @internal */
interface ObservableOptions<T> {
    /** Decides whether a new value is the same as the current one, so no listener runs. Defaults to `Object.is`. */
    equals?: (a: T, b: T) => boolean;
}
/** @internal */
declare class Observable<T> implements ReadonlyObservable<T> {
    private _value;
    private readonly equals;
    private readonly entries;
    private readonlyView?;
    constructor(initialValue: T, options?: ObservableOptions<T>);
    get value(): T;
    /** The number of active subscriptions. */
    get subscriberCount(): number;
    /**
     * Sets the value and notifies listeners if it changed.
     *
     * @returns Whether the value changed
     */
    set(value: T): boolean;
    /** Sets the value from the current one. */
    update(fn: (previous: T) => T): boolean;
    subscribe(listener: ObservableListener<T>): Unsubscribe;
    /** A view without `set`, to hand to consumers. */
    asReadonly(): ReadonlyObservable<T>;
    /** @internal Called by {@link batch}. */
    notifyAfterBatch(previous: unknown): void;
    private notify;
}
/**
 * A Lit reactive controller that re-renders its host element whenever an observable of the diagram API changes.
 * It subscribes while the host is connected and calls `requestUpdate()` on every change. The source can be set
 * later, for example once the element has found its diagram, with {@link DiagramObserver.setSource}.
 *
 * The optional callback runs whenever the controller sees a value different from the last one it saw, including on
 * the first subscription and after the host reconnects.
 *
 * @example
 * Show the number of selected nodes in a Lit element:
 * ```ts
 * class SelectionInfo extends LitElement {
 *   private selection = new DiagramObserver(this, diagram.api.selection.selection);
 *
 *   render() {
 *     return html`${this.selection.value?.nodes.length ?? 0} nodes selected`;
 *   }
 * }
 * ```
 *
 * @typeParam T - Type of the observed value.
 */
declare class DiagramObserver<T> implements ReactiveController {
    private readonly host;
    private readonly callback?;
    private source?;
    private unsubscribe?;
    private connected;
    private hasSeen;
    private lastSeen?;
    /**
     * Constructs a new `DiagramObserver` instance and adds it to `host`.
     *
     * @param host - Element to re-render.
     * @param source - Observable to observe. If not specified, set it later with {@link DiagramObserver.setSource}.
     * @param callback - Function called with each new value.
     */
    constructor(host: ReactiveControllerHost, source?: ReadonlyObservable<T>, callback?: ((value: T) => void) | undefined);
    /** The source's current value, or `undefined` without a source. */
    get value(): T | undefined;
    /**
     * Replaces the observed observable.
     *
     * @param source - Observable to observe, or `undefined` to stop observing.
     */
    setSource(source: ReadonlyObservable<T> | undefined): void;
    /** @internal */
    hostConnected(): void;
    /** @internal */
    hostDisconnected(): void;
    private attach;
    private detach;
    private handle;
}

/**
 * The core `Renderer`. Like ngDiagram's `RendererService`, it only stores what the core's render strategy hands
 * it; the diagram element observes the values and renders them.
 *
 * `draw()` sets all three observables in one {@link batch}, so a listener on any of them sees the other two
 * already updated. `nodes` and `edges` notify only when an item changes (by reference), is added, removed or
 * moved, and `viewport` only when it is a new object, so a pan or zoom notifies only `viewport`. The virtualized
 * render strategy hands over new arrays of the same items on every pan step; they do not notify.
 *
 * @internal
 */
declare class LitRenderer implements Renderer {
    private readonly _nodes;
    private readonly _edges;
    private readonly _viewport;
    /** The nodes to render, after virtualization and visibility filtering. */
    readonly nodes: ReadonlyObservable<Node$1[]>;
    /** The edges to render, including the temporary edge while linking. */
    readonly edges: ReadonlyObservable<Edge[]>;
    readonly viewport: ReadonlyObservable<Viewport>;
    draw(nodes: Node$1[], edges: Edge[], viewport: Viewport): void;
    /** Clears everything, for when the diagram's FlowCore is destroyed. */
    reset(): void;
}

/** The id of the built-in arrow marker, for an edge's `sourceArrowhead` / `targetArrowhead`. */
declare const DIAGRAM_ARROW_MARKER_ID = "flow-ui-diagram-arrow";
/**
 * The diagram's SVG edge markers, by id (ngDiagram's `MarkerRegistryService`). One per diagram, owned by the
 * runtime as `runtime.markerRegistry`.
 *
 * An SVG `url(#id)` reference only resolves inside its own document or shadow root, and every
 * `flow-ui-diagram-base-edge` draws in its own shadow root. So edges do not reference a shared `<marker>`: they
 * clone the registered one into their own `<defs>` ({@link DiagramMarkerRegistry.clone}). ngDiagram does this only
 * in Safari.
 *
 * The built-in arrow ({@link DIAGRAM_ARROW_MARKER_ID}, and `ng-diagram-arrow`, the core's id for the arrowhead of
 * drawn edges) is always available; registering a marker with the same id overrides it until that marker is
 * unregistered. `flow-ui-diagram-marker` registers the others.
 *
 * @internal
 */
declare class DiagramMarkerRegistry {
    /** Whether cloned markers keep `context-stroke` / `context-fill` (false in Safari). */
    readonly supportsContextStroke: boolean;
    private readonly builtIns;
    private readonly _markers;
    /** The registered markers by id, built-ins included. A new map on every change, so edges re-render. */
    readonly markers: ReadonlyObservable<ReadonlyMap<string, SVGMarkerElement>>;
    constructor();
    /** Registers (or replaces) the marker with this id. */
    register(id: string, element: SVGMarkerElement): void;
    /**
     * Unregisters the marker with this id. With `element`, only when that element is the one registered, so a
     * marker that was replaced does not remove its replacement. A built-in marker with the same id comes back.
     */
    unregister(id: string, element?: SVGMarkerElement): void;
    has(id: string): boolean;
    /** A deep copy of the marker with the id `newId`, or `null` when no marker has the id `markerId`. */
    clone(markerId: string, newId: string): SVGMarkerElement | null;
}

/** A port's measured geometry, relative to its node and in flow units. @internal */
type MeasuredPortData = Required<Pick<Port, MeasuredPortProperty>>;
/**
 * Measures port geometry from the DOM (ngDiagram's `UpdatePortsService`). Port elements plug one in through
 * {@link DiagramResizeProcessor.portMeasurer}; until then, port entries are skipped and nodes are measured
 * without their ports.
 *
 * @internal
 */
interface DiagramPortMeasurer {
    /** Measures one port element relative to its node, or returns `null` when it cannot. */
    getPortData(portElement: Element): MeasuredPortData | null;
    /** Measures every port inside a node element. */
    getNodePortsData(nodeElement: Element, nodeId: string): (MeasuredPortData & {
        id: string;
    })[];
}
/** What the processor needs from the {@link DiagramRuntime}. @internal */
interface DiagramResizeProcessorSource {
    readonly flowCore: ReadonlyObservable<FlowCore | null>;
    readonly actionState: ReadonlyObservable<Readonly<ActionState>>;
}
/**
 * Turns batches from the {@link BatchedResizeObserver} into core updates (ngDiagram's
 * `FlowResizeBatchProcessorService`): node sizes through `updater.applyNodeSizes`, port geometry through
 * `updater.applyPortChanges` and label sizes through `updater.applyEdgeLabelChanges`. Changes under 1px are
 * ignored. It also signals observer activity to the core's `measurementTracker`, and re-measures a node once its
 * resize gesture ends.
 *
 * The runtime creates one per diagram. It reads the current FlowCore on every batch, so it survives FlowCore
 * re-creation.
 *
 * @internal
 */
declare class DiagramResizeProcessor {
    private readonly source;
    private readonly observer;
    /** The runtime sets its port registry here. Without a measurer, port measurements are skipped. */
    portMeasurer: DiagramPortMeasurer | null;
    private readonly unsubscribeActionState;
    constructor(source: DiagramResizeProcessorSource, observer: BatchedResizeObserver);
    destroy(): void;
    /**
     * Re-measures the resized node once its gesture ends. Measurements of that node taken during the gesture are
     * dropped (see `processNodeBatch`), and when CSS (`min-width`, say) stops the DOM following the model size, the
     * observer never fires again by itself, so the model would keep a size the DOM never reached.
     */
    private watchResizeGestureEnd;
    private processAllResizes;
    private processPortBatch;
    private processNodeBatch;
    private processEdgeLabelBatch;
    private getBorderBoxSize;
}

/**
 * Knows which port elements belong to which node element, and measures them: the Lit version of ngDiagram's
 * `UpdatePortsService`. It is the runtime's {@link DiagramPortMeasurer}.
 *
 * ngDiagram finds a port's node with `closest()` and a node's ports with `querySelectorAll()`. Neither crosses
 * shadow roots, and a port can sit inside the shadow root of a tag-name node template, so here each
 * `flow-ui-diagram-port` attaches itself to the node element it got from the node context.
 *
 * A port's geometry is measured relative to its node element: `(port rect - node rect) / scale`, in flow units.
 * Ports that are not rendered (`display: none`, for example a hidden port) are skipped, so they keep their last
 * measured geometry.
 *
 * @internal
 */
declare class DiagramPortRegistry implements DiagramPortMeasurer {
    private readonly getScale;
    private readonly ports;
    private readonly portsByNode;
    /** @param getScale The current viewport scale, the one the DOM is transformed with. */
    constructor(getScale: () => number);
    /** Attaches a port element to its node element, or updates its id. */
    attach(portElement: Element, nodeElement: Element, portId: string): void;
    /** Detaches a port element. Safe for an element that was never attached. */
    detach(portElement: Element): void;
    /** The port elements attached to a node element, in attachment order. */
    getNodePorts(nodeElement: Element): Element[];
    getPortData(portElement: Element): MeasuredPortData | null;
    getNodePortsData(nodeElement: Element, _nodeId: string): (MeasuredPortData & {
        id: string;
    })[];
    private scale;
    private removeFromNode;
}

/**
 * The rectangle of the box selection in progress, in diagram viewport coordinates (pixels from the diagram's
 * top-left corner), or `null` when there is none. The box-selection controllers write it; `flow-ui-diagram` draws
 * it as the selection rectangle. Ported from ngDiagram's `BoxSelectionProviderService`, which was application-wide;
 * here there is one per diagram (`runtime.boxSelection`).
 *
 * @internal
 */
declare class DiagramBoxSelectionProvider {
    readonly boundingBox: Observable<Rect | null>;
}

/**
 * The pointer and touch gestures that claim the diagram's shared gesture marker ({@link DiagramTouchEventsState}).
 *
 * @internal
 */
declare enum DiagramEventName {
    Rotate = "rotate",
    Resize = "resize",
    Move = "move",
    BoxSelection = "box-selection",
    Linking = "linking",
    Panning = "panning",
    Zooming = "zooming",
    /** A touch long press on a node or edge that opened a context menu (a flow-rdf-ui addition). */
    ContextMenu = "context-menu"
}
/**
 * The gesture that currently owns the diagram's pointers, shared by the input controllers so that concurrent
 * gestures (mostly multi-touch: a node drag and a two-finger pan) stay out of each other's way. Ported from
 * ngDiagram's `TouchEventsStateService`, which was application-wide; here there is one per diagram
 * (`runtime.touchEventsState`).
 *
 * Only the controller that set the marker may clear it.
 *
 * @internal
 */
declare class DiagramTouchEventsState {
    private readonly _currentEvent;
    /** The gesture that owns the marker, or `null`. */
    readonly currentEvent: ReadonlyObservable<DiagramEventName | null>;
    setCurrentEvent(event: DiagramEventName | null): void;
    clearCurrentEvent(): void;
    rotateHandled(): boolean;
    resizeHandled(): boolean;
    moveHandled(): boolean;
    boxSelectionHandled(): boolean;
    linkingHandled(): boolean;
    panningHandled(): boolean;
    zoomingHandled(): boolean;
    contextMenuHandled(): boolean;
}

/**
 * What the runtime needs from the element that hosts the diagram. The core calls these lazily, so they can read
 * the DOM.
 *
 * @internal
 */
interface DiagramRuntimeHost {
    /** The client position of the diagram's top-left corner, used to turn client points into flow points. */
    getFlowOffset(): Point;
    /** The size of the diagram's viewport in CSS pixels. */
    getViewportSize(): {
        width: number;
        height: number;
    };
    /** The diagram's client rect, for edge panning while dragging. Defaults to a rect built from the two above. */
    getClientRect?(): DOMRect;
    /** The diagram's `selectionMode`, read on every press. Defaults to `'default'`. */
    getSelectionMode?(): DiagramSelectionMode;
}
/** @internal */
interface DiagramRuntimeOptions {
    /** Defaults to a new {@link DiagramEnvironment}. */
    environment?: DiagramEnvironment;
}
/** @internal */
interface DiagramRuntimeInitOptions {
    model: ModelAdapter;
    /** Defaults to {@link BUILTIN_MIDDLEWARES}. */
    middlewares?: MiddlewareChain;
    config?: DeepPartial<FlowConfig>;
}
/**
 * Manual linking (ngDiagram's `ManualLinkingService`): starts an edge-drawing gesture from code, which the pointer
 * then drives. The diagram's `ManualLinkingController` provides it as `runtime.manualLinking`; `api.startLinking()`
 * uses it.
 *
 * @internal
 */
interface DiagramManualLinking {
    startLinking(node: Node$1, portId?: string): void;
    startLinkingFromPosition(position: Point): void;
}
/**
 * The diagram-wide relink gesture (ngDiagram's `RelinkingGestureService`), provided by the diagram's
 * `RelinkingGestureController` as `runtime.relinkingGesture`. Relink handles on base edges start it.
 *
 * @internal
 */
interface DiagramRelinkingGesture {
    /** Registers a `pointerdown` on an endpoint handle as a relink candidate. Returns whether it was claimed. */
    beginRelink(event: PointerInputEvent, edge: Edge, end: EdgeEnd): boolean;
    /** `true` while an endpoint is being dragged. */
    readonly active: ReadonlyObservable<boolean>;
}
/**
 * The stable per-diagram holder of the core, the equivalent of ngDiagram's `FlowCoreProviderService`. One instance
 * lives as long as its `flow-ui-diagram` element and survives FlowCore re-creation (a new `model`), so elements
 * can hold on to it (through {@link diagramRuntimeContext}) and to its observables.
 *
 * It owns the renderer, the input-events router and the environment, and exposes the shared state as observables:
 *
 * - `flowCore`: the current FlowCore, or `null` before `init()` and after `destroy()`
 * - `isInitialized`: `true` once the core's `diagramInit` event has fired for the current FlowCore (deferred by one
 *   task, as in ngDiagram); the canvas stays hidden until then
 * - `config`: the resolved FlowConfig, refreshed by {@link DiagramRuntime.updateConfig}
 * - `actionState`: the core's action state (resizing, linking, and so on)
 * - `renderer.nodes`, `renderer.edges`, `renderer.viewport`: what to render
 *
 * It also owns the diagram's one {@link BatchedResizeObserver} (`resizeObserver`), which nodes, ports and labels
 * observe themselves through, and the {@link DiagramResizeProcessor} (`resizeProcessor`) that writes the
 * measurements into the current FlowCore. Ports attach themselves to their node element in `portRegistry`, which
 * is the processor's port measurer, and edges clone their arrowheads from `markerRegistry`.
 *
 * Core events are subscribed through {@link DiagramRuntime.on}; those subscriptions are re-attached to each new
 * FlowCore.
 *
 * @internal
 */
declare class DiagramRuntime {
    readonly environment: DiagramEnvironment;
    readonly renderer: LitRenderer;
    readonly inputEventsRouter: DomInputEventsRouter;
    private readonly _flowCore;
    private readonly _isInitialized;
    private readonly _config;
    private readonly _actionState;
    readonly flowCore: ReadonlyObservable<FlowCore | null>;
    readonly isInitialized: ReadonlyObservable<boolean>;
    readonly config: ReadonlyObservable<FlowConfig | null>;
    readonly actionState: ReadonlyObservable<Readonly<ActionState>>;
    /** The shared size observer for nodes, ports and edge labels. */
    readonly resizeObserver: BatchedResizeObserver;
    /** Writes the observer's measurements into the current FlowCore. */
    readonly resizeProcessor: DiagramResizeProcessor;
    /** Which port elements belong to which node element; measures them for the resize processor. */
    readonly portRegistry: DiagramPortRegistry;
    /** The SVG markers edges can use as arrowheads, the built-in arrow included. */
    readonly markerRegistry: DiagramMarkerRegistry;
    /** The gesture that currently owns the pointers, shared by the input controllers. */
    readonly touchEventsState: DiagramTouchEventsState;
    /** The rectangle of the box selection in progress, drawn by the diagram. */
    readonly boxSelection: DiagramBoxSelectionProvider;
    /** The last known mouse position, kept by the cursor-position-tracker controller. */
    readonly cursorPosition: CursorPositionTracker;
    /** Manual linking for `api.startLinking()`, set by the diagram's `ManualLinkingController`. */
    manualLinking?: DiagramManualLinking;
    /** The relink gesture that relink handles start, set by the diagram's `RelinkingGestureController`. */
    relinkingGesture?: DiagramRelinkingGesture;
    /**
     * The diagram's `nodeTemplateMap`, kept current by the diagram, for elements outside its content layer that
     * render nodes the same way (palette item previews).
     */
    readonly nodeTemplateMap: Observable<DiagramNodeTemplateMap | undefined>;
    /** The diagram's API (`diagram.api`), set by the diagram, for template contexts outside its content layer. */
    api?: DiagramApi;
    private readonly host;
    private readonly stableListeners;
    private readonly initListeners;
    private coreUnsubscribes;
    private initTimer;
    constructor(host: DiagramRuntimeHost, options?: DiagramRuntimeOptions);
    /** The diagram's client rect (`getBoundingClientRect()` of the `flow-ui-diagram` element). */
    getDiagramRect(): DOMRect;
    /** How presses change the selection: the diagram's `selectionMode` (`'default'` for any unknown value). */
    get selectionMode(): DiagramSelectionMode;
    /** Whether a FlowCore currently exists. */
    get hasFlowCore(): boolean;
    /**
     * Destroys the current FlowCore, if any, and creates a new one for `model`. The core draws into the renderer
     * synchronously during construction, then measures and emits `diagramInit` asynchronously.
     */
    init({ model, middlewares, config }: DiagramRuntimeInitOptions): FlowCore;
    /**
     * Destroys the current FlowCore. This also destroys its model adapter, as in ngDiagram, so a model cannot be
     * reused after its diagram is destroyed. Listeners registered with {@link DiagramRuntime.on} are kept.
     */
    destroy(): void;
    /** The current FlowCore. Throws before `init()` and after `destroy()`. */
    provide(): FlowCore;
    /** Merges `config` into the current FlowCore's config and refreshes the `config` observable. */
    updateConfig(config: DeepPartial<FlowConfig>): void;
    /**
     * Subscribes to a core event on the current FlowCore and on every FlowCore created later, until the returned
     * function is called. `diagramInit` listeners run after `isInitialized` turns `true`.
     */
    on<K extends keyof DiagramEventMap$1>(event: K, callback: EventListener<DiagramEventMap$1[K]>): UnsubscribeFn;
    /**
     * Redraws once a draw or relink has cleared its linking state. The core draws only on model changes, and the
     * relinked edge is left out of the drawing while the linking state names it. The finish commands clear that state
     * after their last model write; ngDiagram's model notifies through an Angular effect, which runs after that, but
     * the default model here notifies in a microtask, which can run before it. Without this the temporary edge would
     * stay on screen in place of the relinked edge until the next model change.
     */
    private redrawAfterLinking;
    private attach;
    private callSafely;
}

/**
 * Base class of the diagram API facades, giving access to the current diagram engine (ngDiagram's
 * `NgDiagramBaseService`).
 *
 * @internal
 */
declare abstract class DiagramApiBase {
    /** @internal */
    protected readonly runtime: DiagramRuntime;
    /** @internal */
    constructor(runtime: DiagramRuntime);
    /**
     * The current engine. Throws before the diagram has a model.
     *
     * @internal
     */
    protected get flowCore(): FlowCore;
}

/**
 * Clipboard operations, available as `diagram.api.clipboard`. The clipboard is internal to the diagram, not the
 * system clipboard.
 *
 * @example
 * Copy the selection and paste it at a point:
 * ```ts
 * await diagram.api.clipboard.copy();
 * await diagram.api.clipboard.paste({ x: 300, y: 200 });
 * ```
 */
declare class DiagramClipboardApi extends DiagramApiBase {
    /**
     * Copies the selection to the clipboard.
     *
     * Copying a node also copies all of its descendants (including the hidden children of a collapsed group) and
     * the edges between the copied nodes. Selected nodes and edges that are effectively hidden are skipped, as in
     * `deleteSelection()`.
     *
     * A selected edge is copied even when the nodes at its ends are not. {@link DiagramClipboardApi.paste} then
     * recreates it with a free end in place of each node that was not copied.
     *
     * @returns A promise that resolves once the selection has been copied.
     */
    copy(): Promise<void>;
    /**
     * Cuts the selection to the clipboard. It works like {@link DiagramClipboardApi.copy}: cutting a collapsed group
     * also cuts its hidden children, and pasting restores them.
     *
     * @returns A promise that resolves once the change has been applied to the model. Inside a transaction, it
     * resolves right away and the change is applied when the transaction commits.
     */
    cut(): Promise<void>;
    /**
     * Pastes the clipboard content, centered at a position.
     *
     * An edge end whose node was copied together with the edge connects to the pasted copy of the node. An end whose
     * node was **not** copied is pasted as a free end: `source` or `target` is set to `''`, and
     * `sourcePosition` or `targetPosition` holds the last position where the edge was attached, moved together with
     * the pasted content. So pasting a single edge never duplicates the connection between the original nodes.
     * Ends that were already free stay free. Free ends count like node positions when the content is
     * centered, so pasting only edges centers them at `position`. An edge whose free end has no known position (the
     * edge was never routed) is skipped.
     *
     * @param position - Paste position in flow coordinates.
     * @param options - Measurement options. Set `waitForMeasurements` to `true` to resolve only after the pasted
     * elements have been measured. Use this before calling `zoomToFit()` or `centerOnNode()`.
     * @returns A promise that resolves once the change has been applied to the model. Inside a transaction, it
     * resolves right away and the change is applied when the transaction commits.
     */
    paste(position: DiagramPoint, options?: DiagramMeasurementOptions): Promise<void>;
}

/**
 * Methods for managing group membership, available as `diagram.api.groups`.
 *
 * @example
 * Add two nodes to a group:
 * ```ts
 * await diagram.api.groups.addToGroup('group-1', ['node-1', 'node-2']);
 * ```
 */
declare class DiagramGroupsApi extends DiagramApiBase {
    /**
     * Adds nodes to a group.
     *
     * @param groupId - Group node ID.
     * @param nodeIds - IDs of the nodes to add.
     * @returns A promise that resolves once the change has been applied to the model. Inside a transaction, it
     * resolves right away and the change is applied when the transaction commits.
     */
    addToGroup(groupId: string, nodeIds: string[]): Promise<void>;
    /**
     * Highlights a group, for example to show where dragged nodes would be dropped.
     *
     * @param groupId - Group node ID.
     * @param nodes - Nodes to highlight as part of the group.
     * @returns A promise that resolves once the change has been applied.
     */
    highlightGroup(groupId: string, nodes: DiagramNode[]): Promise<void>;
    /**
     * Clears every group highlight.
     *
     * @returns A promise that resolves once the change has been applied.
     */
    highlightGroupClear(): Promise<void>;
    /**
     * Removes nodes from a group.
     *
     * @param groupId - Group node ID.
     * @param nodeIds - IDs of the nodes to remove.
     * @returns A promise that resolves once the change has been applied to the model. Inside a transaction, it
     * resolves right away and the change is applied when the transaction commits.
     */
    removeFromGroup(groupId: string, nodeIds: string[]): Promise<void>;
}

/**
 * Methods for reading and changing the diagram model, available as `diagram.api.model`.
 *
 * The `nodes`, `edges` and `metadata` observables follow the model of the current diagram engine. Methods that
 * change the model return a promise that resolves once the change has been applied. Inside a transaction (see
 * {@link DiagramApi.transaction}), the promise resolves right away and the change is applied when the transaction
 * commits.
 *
 * @example
 * Add two nodes and an edge between them:
 * ```ts
 * const api = await diagram.initialized;
 * await api.model.addNodes([
 *   { id: 'a', position: { x: 0, y: 0 }, data: { label: 'A' } },
 *   { id: 'b', position: { x: 200, y: 0 }, data: { label: 'B' } }
 * ]);
 * await api.model.addEdges([{ id: 'a-b', source: 'a', sourcePort: 'port-right', target: 'b', targetPort: 'port-left', data: {} }]);
 * ```
 */
declare class DiagramModelApi extends DiagramApiBase {
    private readonly _nodes;
    private readonly _edges;
    private readonly _metadata;
    private observedModel?;
    /** The nodes in the model. Empty before the diagram has a model. */
    readonly nodes: ReadonlyObservable<DiagramNode[]>;
    /** The edges in the model. Empty before the diagram has a model. */
    readonly edges: ReadonlyObservable<DiagramEdge[]>;
    /** The model metadata, including the viewport. */
    readonly metadata: ReadonlyObservable<DiagramMetadata>;
    /** @internal */
    constructor(runtime: DiagramRuntime);
    /**
     * Returns the model adapter the diagram is using.
     *
     * @returns The current model adapter.
     */
    getModel(): DiagramModelAdapter;
    /**
     * Serializes the model to a JSON string. Pass the parsed result to `initializeModel()` to restore it.
     *
     * @returns The model as a JSON string.
     */
    toJSON(): string;
    /**
     * Adds edges to the diagram.
     *
     * @param edges - Edges to add.
     * @param options - Measurement options. Set `waitForMeasurements` to `true` to resolve only after the added
     * elements (for example edge labels) have been measured.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    addEdges(edges: DiagramEdge[], options?: DiagramMeasurementOptions): Promise<void>;
    /**
     * Adds nodes to the diagram.
     *
     * @param nodes - Nodes to add.
     * @param options - Measurement options. Set `waitForMeasurements` to `true` to resolve only after the added
     * nodes have been measured. Use this before calling `zoomToFit()` or `centerOnNode()`.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    addNodes(nodes: DiagramNode[], options?: DiagramMeasurementOptions): Promise<void>;
    /**
     * Returns an edge by ID.
     *
     * @typeParam T - Type of the edge's `data`.
     * @param edgeId - Edge ID.
     * @returns The edge, or `null` if it does not exist.
     */
    getEdgeById<T extends DiagramDataObject = DiagramDataObject>(edgeId: string): DiagramEdge<T> | null;
    /**
     * Returns the node nearest to a point, within a range.
     *
     * @typeParam T - Type of the node's `data`.
     * @param point - Point in flow coordinates.
     * @param range - Search range in flow units.
     * @returns The nearest node in range, or `null`.
     */
    getNearestNodeInRange<T extends DiagramDataObject = DiagramDataObject>(point: DiagramPoint, range: number): DiagramNode<T> | null;
    /**
     * Returns the port nearest to a point, within a range.
     *
     * @param point - Point in flow coordinates.
     * @param range - Search range in flow units.
     * @returns The nearest port in range, or `null`.
     */
    getNearestPortInRange(point: DiagramPoint, range: number): DiagramPort | null;
    /**
     * Returns the free (unconnected) ends of all edges in the model. An edge with two free ends gives two
     * entries. Temporary and effectively hidden edges are skipped.
     *
     * @returns The free ends, each with its edge, end and anchor position.
     */
    getDanglingEndpoints(): DiagramDanglingEndpoint[];
    /**
     * Returns the free edge end nearest to a point, within a range. It works like
     * {@link DiagramModelApi.getNearestPortInRange}, but for the free ends of dangling edges. Temporary and
     * effectively hidden edges are skipped.
     *
     * @param point - Point in flow coordinates.
     * @param range - Search range in flow units.
     * @returns The nearest free end in range, or `null`.
     */
    getNearestDanglingEndpointInRange(point: DiagramPoint, range: number): DiagramDanglingEndpoint | null;
    /**
     * Detaches one end of an edge, so that it becomes a free (dangling) end.
     *
     * When `position` is not specified, the end stays anchored where it is: at the current position of its
     * port when the edge was connected to a port, otherwise at the routed end of the edge. An end that is
     * already free only moves, and only when `position` is specified.
     *
     * This requires `danglingEdges.enabled` in the configuration. Otherwise the method does nothing and logs a
     * warning.
     *
     * @param edgeId - ID of the edge to detach.
     * @param end - End to detach: `'source'` or `'target'`.
     * @param position - Anchor position of the freed end, in flow coordinates.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    detachEdge(edgeId: string, end: DiagramEdgeEnd, position?: DiagramPoint): Promise<void>;
    /**
     * Attaches one end of an edge to a node and, optionally, to one of its ports. This is the opposite of
     * {@link DiagramModelApi.detachEdge}.
     *
     * The same checks as for dropping a relinked edge apply: the node must exist and be visible, and the port must
     * exist, be visible and accept the direction of the end. The connection is then validated with
     * `linking.validateConnection` from the configuration, which receives the attached node as `source` or `target`
     * according to `end`, and a context with `reason: 'attach'`.
     *
     * @param edgeId - ID of the edge to attach.
     * @param end - End to attach: `'source'` or `'target'`.
     * @param nodeId - ID of the node to attach to.
     * @param portId - ID of the port to attach to. If not specified, the end is attached to the node without a
     * port.
     * @returns A promise of whether the connection was valid and applied.
     */
    attachEdge(edgeId: string, end: DiagramEdgeEnd, nodeId: string, portId?: string): Promise<boolean>;
    /**
     * Returns a node by ID.
     *
     * @typeParam T - Type of the node's `data`.
     * @param nodeId - Node ID.
     * @returns The node, or `null` if it does not exist.
     */
    getNodeById<T extends DiagramDataObject = DiagramDataObject>(nodeId: string): DiagramNode<T> | null;
    /**
     * Returns all nodes within a range of a point.
     *
     * @typeParam T - Type of the nodes' `data`.
     * @param point - Point in flow coordinates.
     * @param range - Search range in flow units.
     * @returns The nodes in range.
     */
    getNodesInRange<T extends DiagramDataObject = DiagramDataObject>(point: DiagramPoint, range: number): DiagramNode<T>[];
    /**
     * Returns the edges connected to a node.
     *
     * @typeParam T - Type of the edges' `data`.
     * @param nodeId - Node ID.
     * @returns The edges that have the node as their source or target.
     */
    getConnectedEdges<T extends DiagramDataObject = DiagramDataObject>(nodeId: string): DiagramEdge<T>[];
    /**
     * Returns the nodes connected to a node by edges.
     *
     * @typeParam T - Type of the nodes' `data`.
     * @param nodeId - Node ID.
     * @returns The nodes at the other end of the node's edges.
     */
    getConnectedNodes<T extends DiagramDataObject = DiagramDataObject>(nodeId: string): DiagramNode<T>[];
    /**
     * Returns the source and target nodes of an edge.
     *
     * @typeParam S - Type of the source node's `data`.
     * @typeParam T - Type of the target node's `data`.
     * @param edgeId - Edge ID.
     * @returns The source and target nodes, or `null` if the edge does not exist.
     */
    getNodeEnds<S extends DiagramDataObject = DiagramDataObject, T extends DiagramDataObject = DiagramDataObject>(edgeId: string): {
        source: DiagramNode<S>;
        target: DiagramNode<T>;
    } | null;
    /**
     * Returns the direct children of a group.
     *
     * @typeParam T - Type of the nodes' `data`.
     * @param groupId - Group node ID.
     * @returns The child nodes.
     */
    getChildren<T extends DiagramDataObject = DiagramDataObject>(groupId: string): DiagramNode<T>[];
    /**
     * Returns all descendants of a group: its children, their children and so on.
     *
     * @typeParam T - Type of the nodes' `data`.
     * @param groupId - Group node ID.
     * @returns The descendant nodes.
     */
    getChildrenNested<T extends DiagramDataObject = DiagramDataObject>(groupId: string): DiagramNode<T>[];
    /**
     * Returns whether a node is a descendant of a group.
     *
     * @param nodeId - Node ID.
     * @param groupId - Group node ID.
     * @returns `true` if the node is a child of the group, or of one of its nested groups.
     */
    isNestedChild(nodeId: string, groupId: string): boolean;
    /**
     * Returns the chain of groups a node belongs to.
     *
     * @typeParam T - Type of the group nodes' `data`.
     * @param nodeId - Node ID.
     * @returns The parent groups, from the closest parent to the farthest ancestor.
     */
    getParentHierarchy<T extends DiagramDataObject = DiagramDataObject>(nodeId: string): DiagramGroupNode<T>[];
    /**
     * Returns the nodes whose rectangles intersect the bounding rectangle of a node. Use this method to detect
     * collisions.
     *
     * @typeParam T - Type of the nodes' `data`.
     * @param nodeId - ID of the node to check.
     * @returns The overlapping nodes.
     */
    getOverlappingNodes<T extends DiagramDataObject = DiagramDataObject>(nodeId: string): DiagramNode<T>[];
    /**
     * Returns the nodes whose rectangles intersect the bounding rectangle of a node. Use this method to detect
     * collisions, for example for a node that is not in the model yet.
     *
     * @typeParam T - Type of the nodes' `data`.
     * @param node - Node to check.
     * @returns The overlapping nodes.
     */
    getOverlappingNodes<T extends DiagramDataObject = DiagramDataObject>(node: DiagramNode<T>): DiagramNode<T>[];
    /**
     * Returns the axis-aligned bounding rectangle of nodes and edges.
     *
     * Node bounds come from `measuredBounds`, which include the measured ports and the rotation, not from the raw
     * `position` and `size`. Nodes must therefore already be measured (rendered), and the result can be larger than
     * the node rectangles because of the ports. Edges contribute their routed `points` and their measured labels.
     * Effectively hidden nodes and edges (`computedHidden`) are left out.
     *
     * @param nodes - Nodes to include.
     * @param edges - Edges to include.
     * @returns The bounding rectangle. When there is nothing to measure, a zero-size rectangle at the origin.
     */
    computePartsBounds(nodes: DiagramNode[], edges: DiagramEdge[]): DiagramRect;
    /**
     * Updates the properties of an edge.
     *
     * @param edgeId - Edge ID.
     * @param edge - Edge properties to change.
     * @param options - Measurement options. Set `waitForMeasurements` to `true` to resolve only after the
     * measurements the update triggers have completed.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    updateEdge(edgeId: string, edge: Partial<DiagramEdge>, options?: DiagramMeasurementOptions): Promise<void>;
    /**
     * Replaces the `data` of an edge.
     *
     * @typeParam T - Type of the edge's `data`.
     * @param edgeId - Edge ID.
     * @param data - New edge data.
     * @param options - Measurement options. Set `waitForMeasurements` to `true` to resolve only after the
     * measurements the update triggers (for example re-rendered edge labels) have completed.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    updateEdgeData<T extends DiagramDataObject = DiagramDataObject>(edgeId: string, data: T, options?: DiagramMeasurementOptions): Promise<void>;
    /**
     * Updates the properties of a node.
     *
     * @param nodeId - Node ID.
     * @param node - Node properties to change.
     * @param options - Measurement options. Set `waitForMeasurements` to `true` to resolve only after the
     * measurements the update triggers have completed.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    updateNode(nodeId: string, node: Partial<DiagramNode>, options?: DiagramMeasurementOptions): Promise<void>;
    /**
     * Replaces the `data` of a node.
     *
     * @typeParam T - Type of the node's `data`.
     * @param nodeId - Node ID.
     * @param data - New node data.
     * @param options - Measurement options. Set `waitForMeasurements` to `true` to resolve only after the
     * measurements the update triggers (for example a template resized by the new data) have completed.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    updateNodeData<T extends DiagramDataObject = DiagramDataObject>(nodeId: string, data: T, options?: DiagramMeasurementOptions): Promise<void>;
    /**
     * Updates several nodes at once.
     *
     * @param nodes - Node changes. Each must include the node `id`.
     * @param options - Measurement options. Set `waitForMeasurements` to `true` to resolve only after the
     * measurements the update triggers have completed.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    updateNodes(nodes: (Pick<DiagramNode, 'id'> & Partial<DiagramNode>)[], options?: DiagramMeasurementOptions): Promise<void>;
    /**
     * Updates several edges at once.
     *
     * @param edges - Edge changes. Each must include the edge `id`.
     * @param options - Measurement options. Set `waitForMeasurements` to `true` to resolve only after the
     * measurements the update triggers have completed.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    updateEdges(edges: (Pick<DiagramEdge, 'id'> & Partial<DiagramEdge>)[], options?: DiagramMeasurementOptions): Promise<void>;
    /**
     * Deletes edges.
     *
     * @param ids - IDs of the edges to delete.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    deleteEdges(ids: string[]): Promise<void>;
    /**
     * Deletes nodes.
     *
     * Deleting a group also deletes all of its descendants, and the edges connected to any deleted node are removed
     * as well. This is the same behavior as deleting the selection.
     *
     * @param ids - IDs of the nodes to delete.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    deleteNodes(ids: string[]): Promise<void>;
    private observeModel;
    private modelListener;
}

/**
 * Methods for moving, resizing, rotating and reordering nodes, available as `diagram.api.nodes`.
 *
 * Every method returns a promise that resolves once the change has been applied to the model. Inside a
 * transaction (see {@link DiagramApi.transaction}), the promise resolves right away and the change is applied when
 * the transaction commits.
 *
 * @example
 * Move a node 10 units right and 20 units down:
 * ```ts
 * const node = diagram.api.model.getNodeById('node-1');
 * await diagram.api.nodes.moveNodesBy([node], { x: 10, y: 20 });
 * ```
 */
declare class DiagramNodesApi extends DiagramApiBase {
    /**
     * Moves nodes by an offset. Edges connected to the nodes are routed again.
     *
     * @param nodes - Nodes to move.
     * @param delta - Offset in flow units.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    moveNodesBy(nodes: DiagramNode[], delta: DiagramPoint): Promise<void>;
    /**
     * Resizes a node. The node's `autoSize` must be `false`, or `disableAutoSize` must be `true`.
     *
     * @param id - Node ID.
     * @param size - New size in flow units.
     * @param position - New position of the node, in flow coordinates.
     * @param disableAutoSize - Set to `true` to turn off the node's `autoSize`.
     * @param options - Measurement options. Set `waitForMeasurements` to `true` to resolve only after the
     * measurements the resize triggers have completed.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    resizeNode(id: string, size: DiagramSize, position?: DiagramPoint, disableAutoSize?: boolean, options?: DiagramMeasurementOptions): Promise<void>;
    /**
     * Rotates a node to an angle.
     *
     * @param nodeId - Node ID.
     * @param angle - Rotation angle in degrees.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    rotateNodeTo(nodeId: string, angle: number): Promise<void>;
    /**
     * Brings nodes and edges to the front (the highest z-index).
     *
     * @param nodeIds - IDs of the nodes to bring to the front.
     * @param edgeIds - IDs of the edges to bring to the front.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    bringToFront(nodeIds?: string[], edgeIds?: string[]): Promise<void>;
    /**
     * Sends nodes and edges to the back (the lowest z-index).
     *
     * @param nodeIds - IDs of the nodes to send to the back.
     * @param edgeIds - IDs of the edges to send to the back.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    sendToBack(nodeIds?: string[], edgeIds?: string[]): Promise<void>;
}

/**
 * Methods for reading and changing the selection, available as `diagram.api.selection`.
 *
 * Every method returns a promise that resolves once the change has been applied to the model. Inside a
 * transaction (see {@link DiagramApi.transaction}), the promise resolves right away and the change is applied when
 * the transaction commits.
 *
 * @example
 * Select a node and an edge, then log the selection:
 * ```ts
 * await diagram.api.selection.select(['node-1'], ['edge-1']);
 * console.log(diagram.api.selection.selection.value);
 * ```
 */
declare class DiagramSelectionApi extends DiagramApiBase {
    /**
     * The selected nodes and edges. It notifies only when the selected nodes or edges change.
     */
    readonly selection: ReadonlyObservable<DiagramSelection>;
    /** @internal */
    constructor(runtime: DiagramRuntime, model: DiagramModelApi);
    /**
     * Selects nodes and edges.
     *
     * @param nodeIds - IDs of the nodes to select.
     * @param edgeIds - IDs of the edges to select.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    select(nodeIds?: string[], edgeIds?: string[]): Promise<void>;
    /**
     * Deselects nodes and edges.
     *
     * @param nodeIds - IDs of the nodes to deselect.
     * @param edgeIds - IDs of the edges to deselect.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    deselect(nodeIds?: string[], edgeIds?: string[]): Promise<void>;
    /**
     * Deselects every selected node and edge.
     *
     * @returns A promise that resolves once the change has been applied to the model.
     */
    deselectAll(): Promise<void>;
    /**
     * Deletes the selected nodes and edges.
     *
     * @returns A promise that resolves once the change has been applied to the model.
     */
    deleteSelection(): Promise<void>;
}

/**
 * Methods and observables for the diagram viewport (pan and zoom), available as `diagram.api.viewport`.
 *
 * Two coordinate systems are used. The diagram's own coordinates, in which node positions are given, are called
 * flow coordinates. Client coordinates are the browser's viewport coordinates, as in `MouseEvent.clientX`.
 *
 * Every method that changes the viewport returns a promise that resolves once the change has been applied. Inside a
 * transaction (see {@link DiagramApi.transaction}), the promise resolves right away and the change is applied when
 * the transaction commits.
 *
 * @example
 * Zoom in by 20% and move the viewport:
 * ```ts
 * await diagram.api.viewport.zoom(1.2);
 * await diagram.api.viewport.moveViewport(100, 200);
 * ```
 */
declare class DiagramViewportApi extends DiagramApiBase {
    /** The current viewport: the pan offset (`x`, `y`) and zoom `scale`. */
    readonly viewport: ReadonlyObservable<DiagramViewport>;
    /** The current zoom scale. */
    readonly scale: ReadonlyObservable<number>;
    /** Whether the zoom scale is below the configured maximum. `false` before the diagram has a model. */
    readonly canZoomIn: ReadonlyObservable<boolean>;
    /** Whether the zoom scale is above the configured minimum. `false` before the diagram has a model. */
    readonly canZoomOut: ReadonlyObservable<boolean>;
    /** @internal */
    constructor(runtime: DiagramRuntime);
    /** The minimum zoom scale from the configuration. */
    get minZoom(): number;
    /** The maximum zoom scale from the configuration. */
    get maxZoom(): number;
    /**
     * Converts a client position to a flow position.
     *
     * @param clientPosition - Position in client coordinates.
     * @returns The position in flow coordinates.
     */
    clientToFlowPosition(clientPosition: DiagramPoint): DiagramPoint;
    /**
     * Converts a client position to a position relative to the diagram's top-left corner.
     *
     * @param clientPosition - Position in client coordinates.
     * @returns The position relative to the diagram element.
     */
    clientToFlowViewportPosition(clientPosition: DiagramPoint): DiagramPoint;
    /**
     * Converts a flow position to a client position.
     *
     * @param flowPosition - Position in flow coordinates.
     * @returns The position in client coordinates.
     */
    flowToClientPosition(flowPosition: DiagramPoint): DiagramPoint;
    /**
     * Moves the viewport to a pan offset.
     *
     * @param x - Horizontal pan offset in pixels.
     * @param y - Vertical pan offset in pixels.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    moveViewport(x: number, y: number): Promise<void>;
    /**
     * Moves the viewport by an offset.
     *
     * @param dx - Horizontal offset in pixels.
     * @param dy - Vertical offset in pixels.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    moveViewportBy(dx: number, dy: number): Promise<void>;
    /**
     * Sets the pan offset and zoom scale of the viewport. A scale outside the configured bounds is clamped, with a
     * warning.
     *
     * @example
     * Reset the viewport to the origin at 50% zoom:
     * ```ts
     * await diagram.api.viewport.setViewport(0, 0, 0.5);
     * ```
     *
     * @param x - Horizontal pan offset in pixels.
     * @param y - Vertical pan offset in pixels.
     * @param scale - Zoom scale.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    setViewport(x: number, y: number, scale: number): Promise<void>;
    /**
     * Zooms the viewport by a factor.
     *
     * @param factor - Zoom factor, for example `1.1` to zoom in by 10% or `0.9` to zoom out by 10%.
     * @param center - Point to zoom towards. If not specified, the viewport's pan offset is used.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    zoom(factor: number, center?: DiagramPoint): Promise<void>;
    /**
     * Fits the diagram content, or some of it, into the visible area.
     *
     * Always `await` the change to the model before calling this method (for example
     * `await api.model.deleteNodes(...)`). A change that is not awaited is not yet applied when `zoomToFit()` reads
     * the model, so the viewport fits the old content.
     *
     * Nodes that were just added or changed may not be measured yet. Use the `waitForMeasurements` option of the
     * change, or of a transaction, to fit them accurately:
     * ```ts
     * await api.model.addNodes([newNode], { waitForMeasurements: true });
     * await api.viewport.zoomToFit();
     * ```
     *
     * @example
     * Fit everything, with custom padding, or only some nodes:
     * ```ts
     * await api.viewport.zoomToFit();
     * await api.viewport.zoomToFit({ padding: [50, 100, 50, 100] });
     * await api.viewport.zoomToFit({ nodeIds: ['node-1', 'node-2'] });
     * ```
     *
     * @param options - Which nodes and edges to fit, and the padding around them.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    zoomToFit(options?: DiagramZoomToFitOptions): Promise<void>;
    /**
     * Centers a node in the viewport. A node that was just added may not be measured yet: add it with
     * `waitForMeasurements` first, as for {@link DiagramViewportApi.zoomToFit}.
     *
     * @param nodeOrId - Node, or node ID, to center on.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    centerOnNode(nodeOrId: string | DiagramNode): Promise<void>;
    /**
     * Centers a rectangle in the viewport.
     *
     * @param rect - Rectangle in flow coordinates.
     * @returns A promise that resolves once the change has been applied to the model.
     */
    centerOnRect(rect: DiagramRect): Promise<void>;
}

/**
 * The public API of a `flow-ui-diagram`, available as `diagram.api` and from the `diagram.initialized` promise:
 *
 * | Member | What it does |
 * | --- | --- |
 * | `model` | Reads and changes nodes and edges |
 * | `nodes` | Moves, resizes, rotates and reorders nodes |
 * | `selection` | Reads and changes the selection |
 * | `viewport` | Pans, zooms and converts coordinates |
 * | `groups` | Manages group membership |
 * | `clipboard` | Copies, cuts and pastes |
 * | everything else | Configuration, events, middlewares, routings, linking, transactions and measurements |
 *
 * State that changes over time is returned as read-only observables: read the current value with `value`, and call
 * `subscribe(listener)` to be notified of changes. In a Lit element,
 * a {@link DiagramObserver} re-renders the element when an observable changes.
 *
 * The object is stable for the lifetime of the element, across model changes, so it is safe to keep a reference.
 * Most methods need the diagram engine, which exists once the diagram has a `model`: they throw before that. Wait
 * for `diagram.initialized` (or the `flow-ui-diagram-init` event) before using the API, so that the content has
 * also been measured.
 *
 * :::info
 * Registered middlewares and routings, and `setEventsEnabled()`, apply to the current diagram engine. Setting a new
 * `model` creates a new engine, so register them again. Event listeners added with
 * {@link DiagramApi.addEventListener} are kept.
 * :::
 *
 * @example
 * Wait for the diagram, add a node and fit the view:
 * ```ts
 * const api = await diagram.initialized;
 * await api.model.addNodes([{ id: 'new', position: { x: 100, y: 100 }, data: { label: 'New node' } }], {
 *   waitForMeasurements: true
 * });
 * await api.viewport.zoomToFit();
 * ```
 */
declare class DiagramApi extends DiagramApiBase {
    /** Reads and changes the model: nodes, edges and metadata. */
    readonly model: DiagramModelApi;
    /** Moves, resizes, rotates and reorders nodes. */
    readonly nodes: DiagramNodesApi;
    /** Reads and changes the selection. */
    readonly selection: DiagramSelectionApi;
    /** Pans and zooms the viewport and converts between client and flow coordinates. */
    readonly viewport: DiagramViewportApi;
    /** Manages group membership. */
    readonly groups: DiagramGroupsApi;
    /** Copies, cuts and pastes the selection. */
    readonly clipboard: DiagramClipboardApi;
    private readonly listeners;
    /** @internal */
    constructor(runtime: DiagramRuntime);
    /**
     * Whether the diagram is initialized: every node, port and label has been measured. It turns `true` when
     * `flow-ui-diagram-init` fires, and back to `false` while a new model initializes.
     */
    get isInitialized(): ReadonlyObservable<boolean>;
    /**
     * The resolved configuration, or `null` before the diagram has a model. Change it with
     * {@link DiagramApi.updateConfig}.
     */
    get config(): ReadonlyObservable<Readonly<DiagramFlowConfig> | null>;
    /**
     * The state of the gesture in progress (resizing, rotating, linking and so on). The diagram manages it; it
     * changes when a gesture starts or ends.
     */
    get actionState(): ReadonlyObservable<Readonly<DiagramActionState>>;
    /**
     * Merges a partial configuration into the current configuration.
     *
     * @example
     * Enable debug mode:
     * ```ts
     * diagram.api.updateConfig({ debugMode: true });
     * ```
     *
     * @param config - Configuration properties to change.
     */
    updateConfig(config: DiagramConfig): void;
    /**
     * Returns information about the environment the diagram runs in (operating system, browser and so on).
     *
     * @returns The environment information.
     */
    getEnvironment(): DiagramEnvironmentInfo;
    /**
     * Adds a middleware to the end of the middleware chain. Use with care: a faulty middleware can slow down or
     * break every state update.
     *
     * @param middleware - Middleware to add.
     * @returns A function that removes the middleware again.
     */
    registerMiddleware(middleware: DiagramMiddleware): () => void;
    /**
     * Removes a middleware from the middleware chain.
     *
     * @param name - Name of the middleware to remove.
     */
    unregisterMiddleware(name: string): void;
    /**
     * Registers a custom edge routing. Edges use it when their `routing` is its name.
     *
     * @example
     * Register a routing that draws straight lines:
     * ```ts
     * diagram.api.registerRouting({
     *   name: 'straight',
     *   computePoints: ({ sourcePoint, targetPoint }) => [sourcePoint, targetPoint],
     *   computeSvgPath: (points) => points.map(({ x, y }, i) => `${i ? 'L' : 'M'} ${x},${y}`).join(' ')
     * });
     * ```
     *
     * @param routing - Routing implementation.
     */
    registerRouting(routing: DiagramEdgeRouting): void;
    /**
     * Unregisters an edge routing.
     *
     * @param name - Name of the routing to unregister.
     */
    unregisterRouting(name: string): void;
    /**
     * Returns the names of the registered edge routings.
     *
     * @returns The routing names.
     */
    getRegisteredRoutings(): string[];
    /**
     * Sets the routing of edges that do not specify one.
     *
     * @param name - Name of a registered routing.
     */
    setDefaultRouting(name: string): void;
    /**
     * Returns the name of the routing used by edges that do not specify one.
     *
     * @returns The default routing name.
     */
    getDefaultRouting(): string;
    /**
     * Starts drawing an edge from a node, for example from a context menu action. The free end of the edge starts
     * at the last known pointer position and follows the pointer until a click finishes the draw: a click on a port
     * connects the edge to it, as when dragging from a port. Escape cancels the draw.
     *
     * The call is ignored with a warning while another edge is being drawn or relinked, and when the node does not
     * exist or is hidden.
     *
     * @param node - Node the edge starts from.
     * @param portId - ID of the port the edge starts from. If not specified, the edge starts from the node itself.
     */
    startLinking(node: DiagramNode, portId?: string): void;
    /**
     * Starts drawing an edge from a position on the canvas instead of from a node, for example from a context menu
     * action. The free end of the edge follows the pointer until a click finishes the draw: a click on a port
     * connects the edge to that port, and a click on empty canvas leaves both ends free, which is kept when
     * `danglingEdges.shouldKeepOnDrop` allows it.
     *
     * This requires `danglingEdges.enabled` in the configuration, because an edge drawn from a position has no
     * source node. Otherwise the call is ignored with a warning.
     *
     * @param position - Start position in flow coordinates.
     */
    startLinkingFromPosition(position: DiagramPoint): void;
    /**
     * Aborts the gesture in progress (linking, dragging, resizing, rotating or panning). It removes the gesture's
     * listeners, restores the state the gesture changed (positions, size, angle and the temporary edge, but not the
     * viewport) and fires the matching "ended" event with the `cancelled` reason.
     *
     * It does nothing when no gesture is active or the gesture is already completing, and while a transaction is
     * active (with a warning). The Escape key calls it by default, through the `cancelInteraction` shortcut.
     *
     * @returns A promise of whether a gesture was aborted.
     */
    cancelActiveInteraction(): Promise<boolean>;
    /**
     * Adds a listener for a diagram engine event. Every engine event is also dispatched on the element as a
     * `flow-ui-diagram-*` DOM event.
     *
     * The listener can be added before the diagram has a model, and it is kept when a new model re-creates the
     * engine. A `diagramInit` listener runs when `isInitialized` turns `true`.
     *
     * @example
     * Log selection changes:
     * ```ts
     * const unsubscribe = diagram.api.addEventListener('selectionChanged', (event) => {
     *   console.log('Selection changed', event.selectedNodes);
     * });
     * ```
     *
     * @param event - Event name.
     * @param callback - Function called with the event payload.
     * @returns A function that removes the listener.
     */
    addEventListener<K extends keyof DiagramEventMap>(event: K, callback: DiagramEventListener<DiagramEventMap[K]>): Unsubscribe;
    /**
     * Adds a listener for a diagram engine event that is removed after it has been called once. See
     * {@link DiagramApi.addEventListener}.
     *
     * @example
     * Run code once the diagram is initialized:
     * ```ts
     * diagram.api.addEventListenerOnce('diagramInit', (event) => console.log('Diagram initialized', event));
     * ```
     *
     * @param event - Event name.
     * @param callback - Function called with the event payload.
     * @returns A function that removes the listener.
     */
    addEventListenerOnce<K extends keyof DiagramEventMap>(event: K, callback: DiagramEventListener<DiagramEventMap[K]>): Unsubscribe;
    /**
     * Removes listeners added with {@link DiagramApi.addEventListener} or {@link DiagramApi.addEventListenerOnce}.
     * The `flow-ui-diagram-*` DOM events are not affected.
     *
     * @example
     * Remove one listener, or every listener for an event:
     * ```ts
     * diagram.api.removeEventListener('selectionChanged', onSelectionChanged);
     * diagram.api.removeEventListener('selectionChanged');
     * ```
     *
     * @param event - Event name.
     * @param callback - Listener to remove. If not specified, every listener for the event is removed.
     */
    removeEventListener<K extends keyof DiagramEventMap>(event: K, callback?: DiagramEventListener<DiagramEventMap[K]>): void;
    /**
     * Removes every listener added with {@link DiagramApi.addEventListener} or
     * {@link DiagramApi.addEventListenerOnce}. The `flow-ui-diagram-*` DOM events are not affected.
     */
    removeAllEventListeners(): void;
    /**
     * Enables or disables diagram engine events. While they are disabled, neither API listeners nor the
     * `flow-ui-diagram-*` DOM events are called. A new model re-creates the engine with events enabled.
     *
     * @param enabled - Set to `true` to enable events, or `false` to disable them.
     */
    setEventsEnabled(enabled: boolean): void;
    /**
     * Returns whether diagram engine events are enabled.
     *
     * @returns `true` if events are enabled.
     */
    areEventsEnabled(): boolean;
    /**
     * Returns whether an event has listeners added with {@link DiagramApi.addEventListener} or
     * {@link DiagramApi.addEventListenerOnce}.
     *
     * @param event - Event name.
     * @returns `true` if the event has API listeners.
     */
    hasEventListeners(event: keyof DiagramEventMap): boolean;
    /**
     * Runs a function, which may be async, in a transaction: every model change made inside it through the API is
     * applied at once, as one update, when the function returns (or its promise resolves).
     *
     * @example
     * Add nodes and edges in one update, and wait until they are measured:
     * ```ts
     * await diagram.api.transaction(
     *   async () => {
     *     const { nodes, edges } = await fetchDiagram();
     *     diagram.api.model.addNodes(nodes);
     *     diagram.api.model.addEdges(edges);
     *   },
     *   { waitForMeasurements: true }
     * );
     * await diagram.api.viewport.zoomToFit();
     * ```
     *
     * @param callback - Function that makes the changes.
     * @param options - Transaction options. Set `waitForMeasurements` to `true` to resolve only after the added
     * or changed elements have been measured.
     * @returns A promise of the transaction result, which resolves once the transaction has been committed to the
     * model.
     */
    transaction(callback: () => void | Promise<void>, options?: DiagramTransactionOptions): Promise<DiagramTransactionResult>;
    /**
     * Measures diagram elements again. Without options, every node, port and edge label is measured again;
     * otherwise only the specified nodes (with their ports) and edge labels. Use this method when a template
     * changes size in a way the diagram cannot observe.
     *
     * The returned promise resolves once the measurements have settled, so the elements' `size`, `measuredPorts`
     * and `measuredLabels` are up to date. It never hangs: an element that delivers no new measurement (removed,
     * zero-size or unchanged) settles when the discovery window expires, and when nothing matching the options is
     * observed, it resolves immediately. Measurements running at the same time settle together.
     *
     * :::warning
     * Do not `await` this method inside an active transaction (measurements are applied only at commit, so the
     * promise resolves before the new geometry lands) or inside a middleware (the update pipeline is not
     * re-entrant, so the `await` deadlocks). Calling it without `await` is safe in both.
     * :::
     *
     * @example
     * Measure one node again and wait for its new geometry:
     * ```ts
     * await diagram.api.invalidateMeasurements({ nodes: [{ nodeId: 'node-1' }] });
     * ```
     *
     * @param options - Elements to measure again.
     * @returns A promise that resolves once the new measurements have been applied.
     */
    invalidateMeasurements(options?: DiagramInvalidateMeasurementsOptions): Promise<void>;
    private invalidateObservedElements;
    private manualLinking;
    private addListener;
    private removeListener;
}

/** A diagram node: a simple node or a group. */
type DiagramNode<T extends DataObject = DataObject> = Node$1<T>;
/** A node that is not a group. */
type DiagramSimpleNode<T extends DataObject = DataObject> = SimpleNode<T>;
/** A group node, which other nodes can belong to. */
type DiagramGroupNode<T extends DataObject = DataObject> = GroupNode<T>;
/** A diagram edge. */
type DiagramEdge<T extends DataObject = DataObject> = Edge<T>;
/** An edge's label, as registered by `flow-ui-diagram-edge-label` and stored in the edge's `measuredLabels`. */
type DiagramEdgeLabel = EdgeLabel;
/**
 * Where a label sits along its edge: a number from 0 (source) to 1 (target), or an absolute distance such as
 * `'30px'` from the source or `'-20px'` from the target.
 */
type DiagramEdgeLabelPosition = EdgeLabelPosition;
/** A node's port, as registered by `flow-ui-diagram-port` and stored in the node's `measuredPorts`. */
type DiagramPort = Port;
/** The side of a node a port is on. */
type DiagramPortSide = PortSide;
/** Which point of a port lies on its node's side. */
type DiagramOriginPoint = OriginPoint;
/** A side of a node, as in the `activeSides` of `flow-ui-diagram-resize-adornment`. */
type DiagramSide = Side;
/** The line or corner handle a node resize is dragged by. */
type DiagramResizeDirection = ResizeDirection;
/** The data an edge, node or port carries. */
type DiagramDataObject = DataObject;
/** The serializable diagram content: nodes, edges and metadata. */
type DiagramModel = Model;
/** The diagram metadata, including the viewport. */
type DiagramMetadata = Metadata;
/**
 * Stores the diagram model. Create the default in-memory adapter with `initializeModel()`, or implement this
 * interface (for example over a state store) and prepare it with `initializeModelAdapter()`.
 */
type DiagramModelAdapter = ModelAdapter;
/**
 * The diagram configuration accepted by the `config` property: any subset of {@link DiagramFlowConfig}. See the
 * [Configuration Reference](/flow-rdf/diagrams/configuration) for every option and its default.
 */
type DiagramConfig = PartialConfig<FlowConfig>;
type PartialConfig<T> = {
    [P in keyof T]?: T[P] extends (...args: never) => unknown ? T[P] : T[P] extends object ? PartialConfig<T[P]> : T[P];
};
/**
 * The fully resolved diagram configuration, with every default filled in: the value of `api.config`. See the
 * [Configuration Reference](/flow-rdf/diagrams/configuration) for every option and its default.
 */
type DiagramFlowConfig = FlowConfig;
/**
 * A middleware, which can inspect and change every state update.
 *
 * @typeParam TName - Type of the middleware's `name`.
 */
type DiagramMiddleware<TName extends string = string> = Middleware<TName>;
/** An ordered list of middlewares. */
type DiagramMiddlewareChain = MiddlewareChain;
/** The pan offset and zoom scale of the diagram. */
type DiagramViewport = Viewport;
/** A point in flow or client coordinates. */
type DiagramPoint = Point;
/** A width and height. */
type DiagramSize = Size;
/** A rectangle. */
type DiagramRect = Rect;
/** The state of the gesture in progress (resizing, rotating, linking and so on), from `api.actionState`. */
type DiagramActionState = ActionState;
/** The environment a diagram runs in (operating system, browser and so on), from `api.getEnvironment()`. */
type DiagramEnvironmentInfo = EnvironmentInfo;
/** An edge routing implementation, registered with `api.registerRouting()`. */
type DiagramEdgeRouting = EdgeRouting;
/** An end of an edge: `'source'` or `'target'`. */
type DiagramEdgeEnd = EdgeEnd;
/** A free (unconnected) end of a dangling edge, from `api.model.getDanglingEndpoints()`. */
type DiagramDanglingEndpoint = DanglingEndpoint;
/** The `linking` part of the diagram configuration: edge drawing and relinking (validation, snapping and so on). */
type DiagramLinkingConfig = LinkingConfig;
/** The `danglingEdges` part of the diagram configuration: edges with free (unconnected) ends. */
type DiagramDanglingEdgesConfig = DanglingEdgesConfig;
/** What `linking.validateConnection` is validating: a draw, a relink or `api.model.attachEdge()`. */
type DiagramConnectionValidationContext = ConnectionValidationContext;
/** The linking part of {@link DiagramActionState}, while an edge is drawn or relinked. */
type DiagramLinkingActionState = LinkingActionState;
/** The relink part of {@link DiagramLinkingActionState}, while an edge end is dragged. */
type DiagramLinkingRelinkContext = LinkingRelinkContext;
/** Why an edge draw ended without creating an edge. */
type DiagramEdgeDrawCancelReason = EdgeDrawCancelReason;
/** Why an edge relink ended without changing the edge. */
type DiagramEdgeRelinkCancelReason = EdgeRelinkCancelReason;
/** A keyboard, pointer or wheel shortcut in the `shortcuts` configuration; see `configureShortcuts()`. */
type DiagramShortcutDefinition = ShortcutDefinition;
/** Options of `api.transaction()`. */
type DiagramTransactionOptions = TransactionOptions;
/** The result of `api.transaction()`. */
type DiagramTransactionResult = TransactionResult;
/**
 * A diagram engine event listener, added with `api.addEventListener()`.
 *
 * @typeParam T - Type of the event payload.
 */
type DiagramEventListener<T> = EventListener<T>;
/**
 * Maps diagram engine event names to their payload types, for `api.addEventListener()`. `flow-ui-diagram` also
 * emits each event as a `flow-ui-diagram-*` DOM event with the payload as `detail` (for example, `selectionChanged`
 * as `flow-ui-diagram-selection-changed`).
 */
interface DiagramEventMap {
    /** Every node, port and edge label has been measured and the diagram is shown. */
    diagramInit: DiagramInitEvent;
    /** Selected nodes were moved, by dragging or through the API. */
    selectionMoved: DiagramSelectionMovedEvent;
    /** The selected nodes or edges changed. */
    selectionChanged: DiagramSelectionChangedEvent;
    /** Selected nodes and edges were deleted. */
    selectionRemoved: DiagramSelectionRemovedEvent;
    /** Nodes were moved into or out of a group. */
    groupMembershipChanged: DiagramGroupMembershipChangedEvent;
    /** A node was rotated. */
    selectionRotated: DiagramSelectionRotatedEvent;
    /** The viewport was panned or zoomed. */
    viewportChanged: DiagramViewportChangedEvent;
    /**
     * The user drew an edge between two nodes.
     *
     * @deprecated Use `edgeDrawEnded` instead, which is also emitted when a draw is canceled.
     */
    edgeDrawn: DiagramEdgeDrawnEvent;
    /** An edge-drawing gesture ended, whether an edge was created or not. */
    edgeDrawEnded: DiagramEdgeDrawEndedEvent;
    /** The user started dragging an end of an existing edge. */
    edgeRelinkStarted: DiagramEdgeRelinkStartedEvent;
    /** An edge relink gesture ended: the edge was reconnected, left dangling or reverted. */
    edgeRelinkEnded: DiagramEdgeRelinkEndedEvent;
    /** Nodes and edges were pasted. */
    clipboardPasted: DiagramClipboardPastedEvent;
    /** A node or group changed size. */
    nodeResized: DiagramNodeResizedEvent;
    /** A palette item was dropped onto the diagram. */
    paletteItemDropped: DiagramPaletteItemDroppedEvent;
    /** The user started resizing a node. */
    nodeResizeStarted: DiagramNodeResizeStartedEvent;
    /** The user finished resizing a node. */
    nodeResizeEnded: DiagramNodeResizeEndedEvent;
    /** The user started rotating a node. */
    nodeRotateStarted: DiagramNodeRotateStartedEvent;
    /** The user finished rotating a node. */
    nodeRotateEnded: DiagramNodeRotateEndedEvent;
    /** A selection gesture (click, box selection or select-all) ended. */
    selectionGestureEnded: DiagramSelectionGestureEndedEvent;
    /** A node drag crossed the drag threshold. */
    nodeDragStarted: DiagramNodeDragStartedEvent;
    /** The user finished dragging nodes. */
    nodeDragEnded: DiagramNodeDragEndedEvent;
}
/** Measurement options of the API methods that change the model. */
interface DiagramMeasurementOptions {
    /**
     * Set to `true` to resolve the returned promise only once the elements the change adds or affects have been
     * measured. Ignored, with a warning, inside a transaction: pass it to the transaction instead. Defaults to
     * `false`.
     */
    waitForMeasurements?: boolean;
}
/**
 * Which elements `api.invalidateMeasurements()` measures again. Without options, every element is measured again.
 */
interface DiagramInvalidateMeasurementsOptions {
    /** Nodes to measure again. Measuring a node again also measures its ports. */
    nodes?: {
        nodeId: string;
    }[];
    /** Edges whose labels to measure again. */
    edges?: {
        edgeId: string;
    }[];
}
/**
 * How pointer presses on `flow-ui-diagram` change the selection (its `selectionMode`): `'default'` replaces the
 * selection unless the multi-selection modifier is held, and `'toggle'` adds or removes each tapped node or edge.
 */
type DiagramSelectionMode = 'default' | 'toggle';
/** The selected nodes and edges, from `api.selection.selection`. */
interface DiagramSelection {
    /** Selected nodes. */
    nodes: DiagramNode[];
    /** Selected edges. */
    edges: DiagramEdge[];
}
/** Options of `api.viewport.zoomToFit()`. */
interface DiagramZoomToFitOptions {
    /** IDs of the nodes to fit. If not specified, all nodes are fitted. */
    nodeIds?: string[];
    /**
     * IDs of the edges to fit. If not specified, the edges with both ends among the fitted nodes are fitted, or all
     * edges when `nodeIds` is not specified either.
     */
    edgeIds?: string[];
    /**
     * Padding around the content in pixels, with the CSS shorthand forms: one value for every side,
     * `[vertical, horizontal]`, `[top, horizontal, bottom]` or `[top, right, bottom, left]`. Defaults to `50`.
     */
    padding?: number | [number, number] | [number, number, number] | [number, number, number, number];
}
/** What a node template is rendered with. */
interface DiagramNodeTemplateContext<N extends DiagramNode = DiagramNode> {
    /** The node, including runtime properties such as `selected` and `measuredBounds`. */
    node: N;
    /** Whether the node is selected. */
    selected: boolean;
    /** The diagram's API. */
    api: DiagramApi;
}
/** What an edge template is rendered with. */
interface DiagramEdgeTemplateContext<E extends DiagramEdge = DiagramEdge> {
    /** The edge, including runtime properties such as `selected` and `points`. */
    edge: E;
    /** Whether the edge is selected. */
    selected: boolean;
    /** The diagram's API. */
    api: DiagramApi;
}
/**
 * How a node type is rendered: either a function that returns a Lit template (or anything else Lit can render),
 * or the tag name of a custom element. A custom element receives the `node`, `selected` and `api` properties.
 *
 * Templates render into the light DOM of `flow-ui-diagram`, so the page or component that hosts the diagram
 * styles render-function templates.
 */
type DiagramNodeTemplate<N extends DiagramNode = DiagramNode> = string | ((context: DiagramNodeTemplateContext<N>) => unknown);
/** How an edge type is rendered. See {@link DiagramNodeTemplate}. */
type DiagramEdgeTemplate<E extends DiagramEdge = DiagramEdge> = string | ((context: DiagramEdgeTemplateContext<E>) => unknown);
/**
 * Maps node `type` values to templates, as a `Map` or a plain object. Nodes without a `type` use the default
 * node (or group) template; a type that is not in the map also falls back to the default, with a warning.
 *
 * @example
 * ```ts
 * diagram.nodeTemplateMap = {
 *   note: ({ node }) => html`<div class="note">${node.data.text}</div>`,
 *   chart: 'my-chart-node'
 * };
 * ```
 */
type DiagramNodeTemplateMap = ReadonlyMap<string, DiagramNodeTemplate<any>> | Record<string, DiagramNodeTemplate<any>>;
/** Maps edge `type` values to templates. See {@link DiagramNodeTemplateMap}. */
type DiagramEdgeTemplateMap = ReadonlyMap<string, DiagramEdgeTemplate<any>> | Record<string, DiagramEdgeTemplate<any>>;
/** The `detail` of `flow-ui-diagram-init`: the nodes, edges and viewport once the diagram is first shown. */
interface DiagramInitEvent {
    /** Nodes in the diagram. */
    nodes: DiagramNode[];
    /** Edges in the diagram. */
    edges: DiagramEdge[];
    /** Viewport of the diagram. */
    viewport: DiagramViewport;
}
/** The `detail` of `flow-ui-diagram-selection-moved`. */
type DiagramSelectionMovedEvent = SelectionMovedEvent;
/** The `detail` of `flow-ui-diagram-selection-changed`. */
type DiagramSelectionChangedEvent = SelectionChangedEvent;
/** The `detail` of `flow-ui-diagram-selection-removed`. */
type DiagramSelectionRemovedEvent = SelectionRemovedEvent;
/** The `detail` of `flow-ui-diagram-group-membership-changed`. */
type DiagramGroupMembershipChangedEvent = GroupMembershipChangedEvent;
/** The `detail` of `flow-ui-diagram-selection-rotated`. */
type DiagramSelectionRotatedEvent = SelectionRotatedEvent;
/** The `detail` of `flow-ui-diagram-viewport-changed`. */
type DiagramViewportChangedEvent = ViewportChangedEvent;
/** The `detail` of `flow-ui-diagram-edge-drawn`. */
type DiagramEdgeDrawnEvent = EdgeDrawnEvent;
/** The `detail` of `flow-ui-diagram-edge-draw-ended`. */
type DiagramEdgeDrawEndedEvent = EdgeDrawEndedEvent;
/** The `detail` of `flow-ui-diagram-edge-relink-started`. */
type DiagramEdgeRelinkStartedEvent = EdgeRelinkStartedEvent;
/** The `detail` of `flow-ui-diagram-edge-relink-ended`. */
type DiagramEdgeRelinkEndedEvent = EdgeRelinkEndedEvent;
/** The `detail` of `flow-ui-diagram-clipboard-pasted`. */
type DiagramClipboardPastedEvent = ClipboardPastedEvent;
/** The `detail` of `flow-ui-diagram-node-resized`. */
type DiagramNodeResizedEvent = NodeResizedEvent;
/** The `detail` of `flow-ui-diagram-palette-item-dropped`. */
type DiagramPaletteItemDroppedEvent = PaletteItemDroppedEvent;
/** The `detail` of `flow-ui-diagram-node-resize-started`. */
type DiagramNodeResizeStartedEvent = NodeResizeStartedEvent;
/** The `detail` of `flow-ui-diagram-node-resize-ended`. */
type DiagramNodeResizeEndedEvent = NodeResizeEndedEvent;
/** The `detail` of `flow-ui-diagram-node-rotate-started`. */
type DiagramNodeRotateStartedEvent = NodeRotateStartedEvent;
/** The `detail` of `flow-ui-diagram-node-rotate-ended`. */
type DiagramNodeRotateEndedEvent = NodeRotateEndedEvent;
/** The `detail` of `flow-ui-diagram-selection-gesture-ended`. */
type DiagramSelectionGestureEndedEvent = SelectionGestureEndedEvent;
/** The `detail` of `flow-ui-diagram-node-drag-started`. */
type DiagramNodeDragStartedEvent = NodeDragStartedEvent;
/** The `detail` of `flow-ui-diagram-node-drag-ended`. */
type DiagramNodeDragEndedEvent = NodeDragEndedEvent;
/**
 * The `detail` of `flow-ui-diagram-context-menu`, which `flow-ui-diagram` emits when the user asks for a context
 * menu: a right-click (or the platform's equivalent) on a node, an edge or the background, or a touch long press on
 * a node or edge.
 */
interface DiagramContextMenuEvent {
    /** The node or edge the menu is for, or `undefined` for the background. */
    target?: DiagramNode | DiagramEdge;
    /** What the menu is for: a `'node'`, an `'edge'` or the background (`'diagram'`). */
    targetType: 'node' | 'edge' | 'diagram';
    /** The input that asked for the menu. A context menu key press is reported as `'mouse'`. */
    pointerType: 'mouse' | 'pen' | 'touch';
    /** Where the menu was asked for, in client (viewport) coordinates. Open the menu here. */
    clientPosition: DiagramPoint;
    /** The same point in flow coordinates, for example to paste or add nodes there. */
    flowPosition: DiagramPoint;
    /**
     * The native event: the `contextmenu` event, or for a long press the `touchstart` that began it (or the browser's
     * own `contextmenu` for the long press, on browsers that fire one first).
     */
    originalEvent: MouseEvent | TouchEvent;
}
/** The `background` part of the diagram configuration: dot spacing and grid cell sizes. */
type DiagramBackgroundConfig = BackgroundConfig;
/** A corner of the diagram, for the `position` of the minimap and the zoom controls. */
type DiagramPanelPosition = NgDiagramPanelPosition;
/** The shape of a node in the minimap. */
type DiagramMinimapNodeShape = 'rect' | 'circle' | 'ellipse';
/**
 * Style overrides for a node in the minimap, returned by the minimap's `nodeStyle` function. Every property is
 * optional; properties that are not set use the `--flow-ui-diagram-minimap-node-*` custom properties.
 */
interface DiagramMinimapNodeStyle {
    /** The node's shape. Defaults to `'rect'`. */
    shape?: DiagramMinimapNodeShape;
    /** The fill color. */
    fill?: string;
    /** The stroke color. */
    stroke?: string;
    /** The stroke width, in minimap pixels. */
    strokeWidth?: number;
    /** The opacity, from 0 to 1. */
    opacity?: number;
    /**
     * Space-separated names added to the node's class and to its `part` names (next to `node`), so page CSS can
     * style it with `flow-ui-diagram-minimap::part(<name>)`.
     */
    cssClass?: string;
}
/**
 * Computes the minimap style of a node. Return `null` or `undefined` to use the defaults.
 *
 * @example
 * ```ts
 * minimap.nodeStyle = (node) => ({
 *   fill: node.type === 'database' ? '#4caf50' : undefined,
 *   opacity: node.selected ? 1 : 0.6
 * });
 * ```
 */
type DiagramMinimapNodeStyleFn = (node: DiagramNode) => DiagramMinimapNodeStyle | null | undefined;
/** What a minimap node template is rendered with. */
interface DiagramMinimapNodeTemplateContext<N extends DiagramNode = DiagramNode> {
    /** The diagram node. */
    node: N;
    /** The style from the minimap's `nodeStyle` function, or an empty object. */
    nodeStyle: DiagramMinimapNodeStyle;
}
/**
 * How a node type is drawn in the minimap: a function that returns a Lit template, or the tag name of a custom
 * element, which receives the `node` and `nodeStyle` properties. The content is rendered as HTML inside an SVG
 * `foreignObject` that covers the node's bounds, so it should fill its container (`width: 100%; height: 100%`).
 * It renders in the minimap's shadow root, so style it inline or inside the custom element.
 */
type DiagramMinimapNodeTemplate<N extends DiagramNode = DiagramNode> = string | ((context: DiagramMinimapNodeTemplateContext<N>) => unknown);
/**
 * Maps node `type` values to minimap node templates, as a `Map` or a plain object. Nodes whose type is not in the
 * map are drawn as plain shapes (see {@link DiagramMinimapNodeStyle}).
 */
type DiagramMinimapNodeTemplateMap = ReadonlyMap<string, DiagramMinimapNodeTemplate<any>> | Record<string, DiagramMinimapNodeTemplate<any>>;
/**
 * The base data of a palette item. Palette item data should extend it and include at least a `label`, which the
 * default node template shows.
 */
interface DiagramBasePaletteItemData {
    /** The display label of the item and of the node it creates. */
    label: string;
}
/**
 * The node properties a palette item for a simple node carries. Dropping the item creates a node with these
 * properties, a new `id` and the drop point as its `position`.
 */
type DiagramPaletteSimpleNodeData<Data extends DataObject = DiagramBasePaletteItemData> = Pick<SimpleNode<Data>, 'type' | 'data' | 'resizable' | 'rotatable' | 'size' | 'angle' | 'autoSize' | 'zOrder'>;
/** The node properties a palette item for a group carries: {@link DiagramPaletteSimpleNodeData} plus `isGroup`. */
type DiagramPaletteGroupNodeData<Data extends DataObject = DiagramBasePaletteItemData> = DiagramPaletteSimpleNodeData<Data> & Pick<GroupNode, 'isGroup'>;
/**
 * An item of a diagram palette (`flow-ui-diagram-palette-item`): the node or group that dragging it onto a
 * diagram creates.
 *
 * @example
 * ```ts
 * const item: DiagramPaletteItem = {
 *   type: 'task',
 *   data: { label: 'Task' },
 *   size: { width: 180, height: 60 },
 *   autoSize: false
 * };
 * ```
 */
type DiagramPaletteItem<Data extends DataObject = DiagramBasePaletteItemData> = DiagramPaletteSimpleNodeData<Data> | DiagramPaletteGroupNodeData<Data>;

/**
 * The `flow-ui-diagram-init` event, emitted when every node, port and label has been measured and the diagram is shown.
 */
type FlowUiDiagramInitEvent = CustomEvent<DiagramInitEvent>;
/**
 * The `flow-ui-diagram-selection-moved` event, emitted when selected nodes are moved, by dragging or through the API.
 */
type FlowUiDiagramSelectionMovedEvent = CustomEvent<DiagramSelectionMovedEvent>;
/** The `flow-ui-diagram-selection-changed` event, emitted when the selected nodes or edges change. */
type FlowUiDiagramSelectionChangedEvent = CustomEvent<DiagramSelectionChangedEvent>;
/** The `flow-ui-diagram-selection-removed` event, emitted when selected nodes and edges are deleted. */
type FlowUiDiagramSelectionRemovedEvent = CustomEvent<DiagramSelectionRemovedEvent>;
/** The `flow-ui-diagram-group-membership-changed` event, emitted when nodes are moved into or out of a group. */
type FlowUiDiagramGroupMembershipChangedEvent = CustomEvent<DiagramGroupMembershipChangedEvent>;
/** The `flow-ui-diagram-selection-rotated` event, emitted when a node is rotated. */
type FlowUiDiagramSelectionRotatedEvent = CustomEvent<DiagramSelectionRotatedEvent>;
/** The `flow-ui-diagram-viewport-changed` event, emitted when the viewport is panned or zoomed. */
type FlowUiDiagramViewportChangedEvent = CustomEvent<DiagramViewportChangedEvent>;
/**
 * The `flow-ui-diagram-edge-drawn` event, emitted when the user draws an edge between two nodes. Deprecated: use
 * `flow-ui-diagram-edge-draw-ended` instead.
 */
type FlowUiDiagramEdgeDrawnEvent = CustomEvent<DiagramEdgeDrawnEvent>;
/**
 * The `flow-ui-diagram-edge-draw-ended` event, emitted when an edge-drawing gesture ends, whether an edge was created
 * or not.
 */
type FlowUiDiagramEdgeDrawEndedEvent = CustomEvent<DiagramEdgeDrawEndedEvent>;
/**
 * The `flow-ui-diagram-edge-relink-started` event, emitted when the user starts dragging an end of an existing edge.
 */
type FlowUiDiagramEdgeRelinkStartedEvent = CustomEvent<DiagramEdgeRelinkStartedEvent>;
/**
 * The `flow-ui-diagram-edge-relink-ended` event, emitted when an edge relink gesture ends: the edge is reconnected,
 * left dangling or reverted.
 */
type FlowUiDiagramEdgeRelinkEndedEvent = CustomEvent<DiagramEdgeRelinkEndedEvent>;
/** The `flow-ui-diagram-clipboard-pasted` event, emitted when nodes and edges are pasted. */
type FlowUiDiagramClipboardPastedEvent = CustomEvent<DiagramClipboardPastedEvent>;
/** The `flow-ui-diagram-node-resized` event, emitted when a node or group changes size. */
type FlowUiDiagramNodeResizedEvent = CustomEvent<DiagramNodeResizedEvent>;
/** The `flow-ui-diagram-palette-item-dropped` event, emitted when a palette item is dropped onto the diagram. */
type FlowUiDiagramPaletteItemDroppedEvent = CustomEvent<DiagramPaletteItemDroppedEvent>;
/** The `flow-ui-diagram-node-resize-started` event, emitted when the user starts resizing a node. */
type FlowUiDiagramNodeResizeStartedEvent = CustomEvent<DiagramNodeResizeStartedEvent>;
/** The `flow-ui-diagram-node-resize-ended` event, emitted when the user finishes resizing a node. */
type FlowUiDiagramNodeResizeEndedEvent = CustomEvent<DiagramNodeResizeEndedEvent>;
/** The `flow-ui-diagram-node-rotate-started` event, emitted when the user starts rotating a node. */
type FlowUiDiagramNodeRotateStartedEvent = CustomEvent<DiagramNodeRotateStartedEvent>;
/** The `flow-ui-diagram-node-rotate-ended` event, emitted when the user finishes rotating a node. */
type FlowUiDiagramNodeRotateEndedEvent = CustomEvent<DiagramNodeRotateEndedEvent>;
/**
 * The `flow-ui-diagram-selection-gesture-ended` event, emitted when a selection gesture (click, box selection or
 * select-all) ends.
 */
type FlowUiDiagramSelectionGestureEndedEvent = CustomEvent<DiagramSelectionGestureEndedEvent>;
/** The `flow-ui-diagram-node-drag-started` event, emitted when a node drag crosses the drag threshold. */
type FlowUiDiagramNodeDragStartedEvent = CustomEvent<DiagramNodeDragStartedEvent>;
/** The `flow-ui-diagram-node-drag-ended` event, emitted when the user finishes dragging nodes. */
type FlowUiDiagramNodeDragEndedEvent = CustomEvent<DiagramNodeDragEndedEvent>;
/**
 * The `flow-ui-diagram-context-menu` event, emitted when the user asks for a context menu on a node, an edge or the
 * background (a right-click, or a touch long press on a node or an edge). Calling `event.preventDefault()` will cancel
 * the browser's context menu.
 */
type FlowUiDiagramContextMenuEvent = CustomEvent<DiagramContextMenuEvent>;
/** Every `flow-ui-diagram-*` event, by name. */
interface FlowUiDiagramEventMap {
    'flow-ui-diagram-init': FlowUiDiagramInitEvent;
    'flow-ui-diagram-selection-moved': FlowUiDiagramSelectionMovedEvent;
    'flow-ui-diagram-selection-changed': FlowUiDiagramSelectionChangedEvent;
    'flow-ui-diagram-selection-removed': FlowUiDiagramSelectionRemovedEvent;
    'flow-ui-diagram-group-membership-changed': FlowUiDiagramGroupMembershipChangedEvent;
    'flow-ui-diagram-selection-rotated': FlowUiDiagramSelectionRotatedEvent;
    'flow-ui-diagram-viewport-changed': FlowUiDiagramViewportChangedEvent;
    'flow-ui-diagram-edge-drawn': FlowUiDiagramEdgeDrawnEvent;
    'flow-ui-diagram-edge-draw-ended': FlowUiDiagramEdgeDrawEndedEvent;
    'flow-ui-diagram-edge-relink-started': FlowUiDiagramEdgeRelinkStartedEvent;
    'flow-ui-diagram-edge-relink-ended': FlowUiDiagramEdgeRelinkEndedEvent;
    'flow-ui-diagram-clipboard-pasted': FlowUiDiagramClipboardPastedEvent;
    'flow-ui-diagram-node-resized': FlowUiDiagramNodeResizedEvent;
    'flow-ui-diagram-palette-item-dropped': FlowUiDiagramPaletteItemDroppedEvent;
    'flow-ui-diagram-node-resize-started': FlowUiDiagramNodeResizeStartedEvent;
    'flow-ui-diagram-node-resize-ended': FlowUiDiagramNodeResizeEndedEvent;
    'flow-ui-diagram-node-rotate-started': FlowUiDiagramNodeRotateStartedEvent;
    'flow-ui-diagram-node-rotate-ended': FlowUiDiagramNodeRotateEndedEvent;
    'flow-ui-diagram-selection-gesture-ended': FlowUiDiagramSelectionGestureEndedEvent;
    'flow-ui-diagram-node-drag-started': FlowUiDiagramNodeDragStartedEvent;
    'flow-ui-diagram-node-drag-ended': FlowUiDiagramNodeDragEndedEvent;
    'flow-ui-diagram-context-menu': FlowUiDiagramContextMenuEvent;
}
declare global {
    interface GlobalEventHandlersEventMap extends FlowUiDiagramEventMap {
    }
}

/**
 * Removes runtime-computed properties from a node before initialization or serialization.
 */
type StripNodeRuntimePropertiesFn = (node: DiagramNode) => DiagramNode;
/**
 * Removes runtime-computed properties from an edge before initialization or serialization.
 */
type StripEdgeRuntimePropertiesFn = (edge: DiagramEdge) => DiagramEdge;
/**
 * Strips runtime-computed properties from a node (`selected`, `measuredPorts`, `measuredBounds`, `computedZIndex`,
 * `computedHidden`, `_internalId`).
 *
 * The core recomputes these during initialization, and stale values loaded from persistence make the measurement
 * system skip fresh DOM measurement. This is the default used by `initializeModel` and `initializeModelAdapter`.
 * A custom strip function should wrap this one rather than reimplement it.
 */
declare function stripNodeRuntimeProperties(node: DiagramNode): DiagramNode;
/**
 * Strips runtime-computed properties from an edge (`sourcePosition`, `targetPosition`, `measuredLabels`,
 * `computedZIndex`, `computedHidden`, `_internalId`).
 *
 * Free ends of dangling edges are the exception: when `source` or `target` is empty, the matching `sourcePosition`
 * or `targetPosition` is authored data, the only record of that end, so it is kept.
 */
declare function stripEdgeRuntimeProperties(edge: DiagramEdge): DiagramEdge;

type ChangeCallback = (data: ModelChanges) => void;
/**
 * The default in-memory model adapter (see {@link DiagramModelAdapter}), created by `initializeModel()`.
 *
 * Change notifications are coalesced: any number of writes in one task (`FlowCore.setState()` makes three in a
 * row: nodes, edges, metadata) produce one `onChange` call, in a microtask, with the latest state. A write that
 * keeps the same array or object reference does not count as a change.
 *
 * Undo and redo are not supported; they log a warning. Supply a custom adapter for history.
 */
declare class DefaultDiagramModelAdapter implements DiagramModelAdapter {
    /**
     * Strips runtime-computed properties from nodes in `toJSON()`. Replacing it to keep runtime properties will
     * probably break the diagram when the data is loaded back. Set it through `initializeModel` options.
     */
    stripNodeRuntimeProperties: StripNodeRuntimePropertiesFn;
    /** Strips runtime-computed properties from edges in `toJSON()`. See `stripNodeRuntimeProperties`. */
    stripEdgeRuntimeProperties: StripEdgeRuntimePropertiesFn;
    private nodes;
    private edges;
    private metadata;
    private callbacks;
    private notificationScheduled;
    /** Bumped by `destroy()` so a notification queued before it is dropped. */
    private generation;
    destroy(): void;
    getNodes(): DiagramNode[];
    getEdges(): DiagramEdge[];
    getMetadata(): DiagramMetadata;
    updateNodes(next: DiagramNode[] | ((prev: DiagramNode[]) => DiagramNode[])): void;
    updateEdges(next: DiagramEdge[] | ((prev: DiagramEdge[]) => DiagramEdge[])): void;
    updateMetadata(next: DiagramMetadata | ((prev: DiagramMetadata) => DiagramMetadata)): void;
    onChange(callback: ChangeCallback): void;
    unregisterOnChange(callback: ChangeCallback): void;
    undo(): void;
    redo(): void;
    toJSON(): string;
    private scheduleNotification;
}

/**
 * Options for {@link initializeModel} and {@link initializeModelAdapter}.
 */
interface InitializeModelOptions {
    /**
     * Replaces the function that strips runtime-computed properties from nodes during initialization (and, for the
     * model created by {@link initializeModel}, in `toJSON()`). Use at your own risk: stale runtime values
     * (`selected`, `measuredPorts`, `measuredBounds`, `computedZIndex`, `computedHidden`, `_internalId`) will
     * probably break the diagram. Prefer wrapping {@link stripNodeRuntimeProperties}.
     */
    stripNodeRuntimeProperties?: StripNodeRuntimePropertiesFn;
    /**
     * Replaces the function that strips runtime-computed properties from edges. Use at your own risk; prefer
     * wrapping {@link stripEdgeRuntimeProperties}, which already keeps the free end of a dangling edge.
     */
    stripEdgeRuntimeProperties?: StripEdgeRuntimePropertiesFn;
    /** Generates the internal ids. Defaults to the shared diagram environment. */
    environment?: Pick<DiagramEnvironmentInfo, 'generateId'>;
}
/**
 * Creates the default model adapter seeded with initial nodes, edges and metadata.
 *
 * This only creates the initial model. Change it, or read current data, through the diagram API.
 *
 * @example
 * ```ts
 * diagram.model = initializeModel({
 *   nodes: [{ id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } }],
 *   edges: []
 * });
 * ```
 */
declare function initializeModel(model?: Partial<DiagramModel>, options?: InitializeModelOptions): DefaultDiagramModelAdapter;
/**
 * Prepares an existing model adapter for a diagram: optionally seeds it with `model`, then strips runtime
 * properties from every node and edge and gives each a fresh internal id. Use it with a custom
 * {@link DiagramModelAdapter}. The strip options only affect initialization here; a custom adapter's `toJSON()` is its
 * own business.
 */
declare function initializeModelAdapter<A extends DiagramModelAdapter>(adapter: A, model?: Partial<DiagramModel>, options?: InitializeModelOptions): A;

/** The class {@link diagramGroupHighlighted} adds while the group is highlighted. */
declare const DIAGRAM_GROUP_HIGHLIGHT_CLASS = "flow-ui-diagram-group-highlight";
declare class DiagramGroupHighlightedDirective extends Directive {
    constructor(partInfo: PartInfo);
    render(_node: DiagramNode | undefined): symbol;
    update(part: ElementPart, [node]: [DiagramNode | undefined]): symbol;
}
/**
 * Gives a group template's element the built-in highlight, shown while a node is dragged over the group (the
 * group's `highlighted` flag, which the diagram sets).
 *
 * Apply it to the root element of a render-function group template, or to the element inside a
 * `flow-ui-diagram-resize-adornment`, with the template's `node`. The element gets the
 * `flow-ui-diagram-node-wrapper` class, plus `flow-ui-diagram-group-highlight` while the group is highlighted, and
 * the diagram gives it the highlight border and inner shadow (`--flow-ui-diagram-group-border-color-highlight`,
 * `--flow-ui-diagram-group-box-shadow-color-highlight`, `--flow-ui-diagram-group-highlight-size`). Combine it with
 * `diagramNodeSelected()` for the selected look.
 *
 * ```ts
 * const nodeTemplateMap = {
 *   lane: ({ node }) => html`
 *     <flow-ui-diagram-resize-adornment>
 *       <div class="lane" ${diagramNodeSelected(node)} ${diagramGroupHighlighted(node)}>${node.data.title}</div>
 *     </flow-ui-diagram-resize-adornment>
 *   `
 * };
 * ```
 */
declare const diagramGroupHighlighted: (_node: DiagramNode | undefined) => lit_html_directive_js.DirectiveResult<typeof DiagramGroupHighlightedDirective>;

declare class DiagramHiddenDirective extends AsyncDirective {
    private element?;
    private hidden;
    private runtime?;
    private nodeContext?;
    private edgeContext?;
    private contextsResolved;
    /** While the owner's wrapper has not received its node or edge yet: waits for it. */
    private ownerSubscription?;
    /** The owner's identity on the first write, which guards the teardown of a replaced element. */
    private ownerInternalId?;
    private declaration?;
    private applyScheduled;
    private warnedVirtualization;
    private warnedOutsideTemplate;
    constructor(partInfo: PartInfo$1);
    render(_hidden?: unknown): symbol;
    update(part: ElementPart$1, args: [unknown?]): symbol;
    protected reconnected(): void;
    /** ngDiagram's `ngOnDestroy`: clears this template's declaration, unless the element is gone or replaced. */
    protected disconnected(): void;
    private scheduleApply;
    private apply;
    private resolveContexts;
    private resolveOwner;
    private write;
}
/**
 * Hides the node or edge that owns the template from inside the template: the template equivalent of the model's
 * `hidden` flag.
 *
 * Apply it to any element of a node or edge template, in an element binding. `diagramHidden()` without an
 * argument hides, like a bare `hidden` attribute; `diagramHidden(false)` shows.
 *
 * ```ts
 * // A tag-name node template (a Lit element with a `node` property) with its own `collapsed` state
 * render() {
 *   return html`<div class="card" ${diagramHidden(this.collapsed)}>${this.node.data.title}</div>`;
 * }
 * ```
 *
 * It finds its node or edge through the diagram's contexts, so it works in a render-function template as well as
 * in a tag-name template's shadow root. A render-function template is only called again when its node or edge
 * changes (or the template map is replaced), so there it suits values derived from the node or edge.
 *
 * The element is hidden when any of these applies: the model `hidden` flag, this binding, a hidden ancestor group,
 * or, for an edge, a hidden endpoint node. All of them feed the same effective visibility (`computedHidden`).
 * Hidden elements stay in the DOM with `display: none`, never hold up initialization or `waitForMeasurements`,
 * and are ignored by user interactions. Programmatic APIs such as `select` do not skip hidden elements.
 *
 * Use the model `hidden` flag (`api.model.updateNodes()`) to hide many elements at once, or visibility that
 * belongs to your data. The binding is a per-template UI state: a template that stops rendering it clears its
 * declaration.
 *
 * Not supported with virtualization: hiding the element would remove the template that holds the binding. With
 * virtualization on, the binding is ignored and a console warning is logged. Use the model `hidden` flag instead.
 */
declare const diagramHidden: (_hidden?: unknown) => lit_html_directive_js.DirectiveResult<typeof DiagramHiddenDirective>;

/**
 * The middleware chain a diagram uses unless its `middlewares` property says otherwise.
 *
 * @internal
 */
declare const BUILTIN_MIDDLEWARES: [Middleware<string>, Middleware<"z-index">, Middleware<string>];
/**
 * The tuple type of the default middleware chain, which {@link createMiddlewares} passes to its callback.
 */
type DiagramMiddlewares = typeof BUILTIN_MIDDLEWARES;
/**
 * Builds a middleware chain from the defaults: remove, replace or add middlewares.
 *
 * Use with extreme caution: removing or breaking a required middleware can break the diagram.
 *
 * @example
 * ```ts
 * diagram.middlewares = createMiddlewares((defaults) => [...defaults, loggingMiddleware]);
 * ```
 *
 * @param middlewares - Receives the default chain and returns the chain to use.
 * @returns The middleware chain, for the diagram's `middlewares` property.
 */
declare function createMiddlewares<TMiddlewares extends DiagramMiddlewareChain = DiagramMiddlewares>(middlewares: (defaults: DiagramMiddlewares) => TMiddlewares): TMiddlewares;

/**
 * The `DataTransfer` type a `flow-ui-diagram-palette-item` puts its item under (as JSON), next to `text/plain`.
 * A custom drag source can set it too: `flow-ui-diagram` accepts a drop carrying this type, or `text/plain` with
 * the JSON of a palette item.
 */
declare const DIAGRAM_PALETTE_ITEM_MIME_TYPE = "application/x-flow-ui-diagram-palette-item";

/**
 * Put this class on a node template's element (or any element between it and its ports) to highlight a port while
 * the pointer is over it.
 */
declare const DIAGRAM_PORT_HOVERABLE_CLASS = "flow-ui-diagram-port-hoverable";
/**
 * Put this class on a node template's element (or any element between it and its ports) to highlight all of the
 * node's ports while the pointer is over the node, except during a resize or rotation. The default node template
 * has it.
 */
declare const DIAGRAM_PORT_HOVERABLE_OVER_NODE_CLASS = "flow-ui-diagram-port-hoverable-over-node";

/**
 * Returns whether an end of an edge is free, that is, not connected to a node. A free end has an empty `source` or
 * `target`, and its position is stored in `sourcePosition` or `targetPosition`.
 *
 * @param edge - Edge to check.
 * @param end - End to check. If not specified, both ends are checked.
 * @returns `true` when the end (or, without `end`, either end) is free.
 */
declare function hasFreeEndpoint(edge: DiagramEdge, end?: DiagramEdgeEnd): boolean;
/**
 * Returns whether an edge is dangling, that is, whether at least one of its ends is not connected to a node.
 *
 * @param edge - Edge to check.
 * @returns `true` when at least one end is free.
 *
 * @example
 * Find the IDs of the dangling edges in a model:
 * ```ts
 * const danglingIds = diagram.api.model.getModel().getEdges().filter(isDanglingEdge).map((edge) => edge.id);
 * ```
 */
declare function isDanglingEdge(edge: DiagramEdge): boolean;
/**
 * Returns the free ends of the given edges. An edge with both ends free gives two entries. Ends without a stored
 * position are skipped, as are temporary and hidden edges.
 *
 * Use `api.model.getDanglingEndpoints()` for the free ends of the edges in a diagram.
 *
 * @param edges - Edges to scan.
 * @returns The free ends, with their edge, end and position.
 */
declare function getDanglingEndpoints(edges: readonly DiagramEdge[]): DiagramDanglingEndpoint[];
/**
 * Returns the free edge end nearest to a point, within a maximum distance. Temporary and hidden edges are skipped.
 *
 * @param edges - Edges to scan.
 * @param point - Point to measure from, in flow coordinates.
 * @param range - Maximum distance from `point`.
 * @returns The nearest free end, or `null` when none is within `range`.
 */
declare function getNearestDanglingEndpointInRange(edges: readonly DiagramEdge[], point: DiagramPoint, range: number): DiagramDanglingEndpoint | null;
/**
 * Returns the position a detached edge end stays at: the current position of the port when the end was connected to
 * a port, otherwise the matching end of the edge's routed path, or the center of the node as a last resort. Call it
 * while the node is still in the model.
 *
 * @param edge - Edge whose end is detached.
 * @param end - End to detach.
 * @param node - Node the end is connected to, if it is still in the model.
 * @returns The position, or `null` when none can be computed.
 */
declare function computeDetachAnchor(edge: DiagramEdge, end: DiagramEdgeEnd, node: DiagramNode | null | undefined): DiagramPoint | null;
/**
 * Returns whether the user can relink an end of an edge. The edge's own `relinkable` value applies when it is set,
 * otherwise `defaultRelinkable`. `true` allows both ends, `'source'` or `'target'` allows only that end, and any other
 * value allows neither.
 *
 * @param edge - Edge to check.
 * @param end - End to check.
 * @param defaultRelinkable - The `linking.defaultRelinkable` configuration value.
 * @returns `true` when the user can relink that end.
 */
declare function isEdgeEndRelinkable(edge: DiagramEdge, end: DiagramEdgeEnd, defaultRelinkable: boolean | DiagramEdgeEnd): boolean;
/**
 * Merges shortcut definitions into a base list. A definition replaces the base definition with the same
 * `actionName`, and definitions for other actions are added. Use it to build the `shortcuts` configuration.
 *
 * @param userShortcuts - Shortcut definitions to merge.
 * @param baseShortcuts - Shortcut definitions to merge into. Defaults to the built-in shortcuts.
 * @returns The merged shortcut definitions.
 *
 * @example
 * Move the selection up with the W key instead of the arrow key, keeping the other built-in shortcuts:
 * ```ts
 * diagram.config = {
 *   shortcuts: configureShortcuts([{ actionName: 'keyboardMoveSelectionUp', bindings: [{ key: 'w' }] }])
 * };
 * ```
 *
 * @example
 * Change the paste shortcut of a running diagram, keeping its other shortcuts:
 * ```ts
 * const currentShortcuts = diagram.api.config.value?.shortcuts;
 * const pasteShortcut = { actionName: 'paste', bindings: [{ key: 'b', modifiers: { primary: true } }] };
 * diagram.api.updateConfig({ shortcuts: configureShortcuts([pasteShortcut], currentShortcuts) });
 * ```
 */
declare function configureShortcuts(userShortcuts: DiagramShortcutDefinition[], baseShortcuts?: DiagramShortcutDefinition[]): DiagramShortcutDefinition[];

/** The class {@link diagramNodeSelected} puts on every element it is applied to. */
declare const DIAGRAM_NODE_WRAPPER_CLASS = "flow-ui-diagram-node-wrapper";
/** The class {@link diagramNodeSelected} adds while the node is selected. */
declare const DIAGRAM_NODE_SELECTED_CLASS = "flow-ui-diagram-node-selected";
declare class DiagramNodeSelectedDirective extends Directive {
    constructor(partInfo: PartInfo);
    render(_node: DiagramNode | undefined): symbol;
    update(part: ElementPart, [node]: [DiagramNode | undefined]): symbol;
}
/**
 * Gives a node template's element the built-in selected look.
 *
 * Apply it to the root element of a render-function node template, or to the element inside a
 * `flow-ui-diagram-resize-adornment`, with the template's `node`. The element gets the `flow-ui-diagram-node-wrapper`
 * class, plus `flow-ui-diagram-node-selected` while the node is selected, and the diagram gives it the selected box
 * shadow (`--flow-ui-diagram-selected-node-box-shadow`). The diagram's styles only reach those two places; style
 * other elements with the class yourself, or use the template's `selected` value.
 *
 * ```ts
 * const nodeTemplateMap = {
 *   card: ({ node }) => html`<div class="card" ${diagramNodeSelected(node)}>${node.data.title}</div>`
 * };
 * ```
 *
 * A tag-name template receives `selected` as a property instead, and can style `:host([selected])` once it reflects
 * it.
 */
declare const diagramNodeSelected: (_node: DiagramNode | undefined) => lit_html_directive_js.DirectiveResult<typeof DiagramNodeSelectedDirective>;

/**
 * How an element names the diagram it works with: the `id` of a `flow-ui-diagram` (the `diagram` attribute), the
 * element itself (the `diagram` property), or nothing, to use the diagram the element is inside.
 */
type DiagramReference = string | HTMLElement | null | undefined;

declare module '@shoelace-style/animations' {
  export type Animation = Keyframe[];
  export const animations: Animation[];
  export const easings: { [key: string]: string };
  export const bounce: Animation;
  export const flash: Animation;
  export const headShake: Animation;
  export const heartBeat: Animation;
  export const jello: Animation;
  export const pulse: Animation;
  export const rubberBand: Animation;
  export const shake: Animation;
  export const shakeX: Animation;
  export const shakeY: Animation;
  export const swing: Animation;
  export const tada: Animation;
  export const wobble: Animation;
  export const backInDown: Animation;
  export const backInLeft: Animation;
  export const backInRight: Animation;
  export const backInUp: Animation;
  export const backOutDown: Animation;
  export const backOutLeft: Animation;
  export const backOutRight: Animation;
  export const backOutUp: Animation;
  export const bounceIn: Animation;
  export const bounceInDown: Animation;
  export const bounceInLeft: Animation;
  export const bounceInRight: Animation;
  export const bounceInUp: Animation;
  export const bounceOut: Animation;
  export const bounceOutDown: Animation;
  export const bounceOutLeft: Animation;
  export const bounceOutRight: Animation;
  export const bounceOutUp: Animation;
  export const fadeIn: Animation;
  export const fadeInBottomLeft: Animation;
  export const fadeInBottomRight: Animation;
  export const fadeInDown: Animation;
  export const fadeInDownBig: Animation;
  export const fadeInLeft: Animation;
  export const fadeInLeftBig: Animation;
  export const fadeInRight: Animation;
  export const fadeInRightBig: Animation;
  export const fadeInTopLeft: Animation;
  export const fadeInTopRight: Animation;
  export const fadeInUp: Animation;
  export const fadeInUpBig: Animation;
  export const fadeOut: Animation;
  export const fadeOutBottomLeft: Animation;
  export const fadeOutBottomRight: Animation;
  export const fadeOutDown: Animation;
  export const fadeOutDownBig: Animation;
  export const fadeOutLeft: Animation;
  export const fadeOutLeftBig: Animation;
  export const fadeOutRight: Animation;
  export const fadeOutRightBig: Animation;
  export const fadeOutTopLeft: Animation;
  export const fadeOutTopRight: Animation;
  export const fadeOutUp: Animation;
  export const fadeOutUpBig: Animation;
  export const flip: Animation;
  export const flipInX: Animation;
  export const flipInY: Animation;
  export const flipOutX: Animation;
  export const flipOutY: Animation;
  export const lightSpeedInLeft: Animation;
  export const lightSpeedInRight: Animation;
  export const lightSpeedOutLeft: Animation;
  export const lightSpeedOutRight: Animation;
  export const rotateIn: Animation;
  export const rotateInDownLeft: Animation;
  export const rotateInDownRight: Animation;
  export const rotateInUpLeft: Animation;
  export const rotateInUpRight: Animation;
  export const rotateOut: Animation;
  export const rotateOutDownLeft: Animation;
  export const rotateOutDownRight: Animation;
  export const rotateOutUpLeft: Animation;
  export const rotateOutUpRight: Animation;
  export const slideInDown: Animation;
  export const slideInLeft: Animation;
  export const slideInRight: Animation;
  export const slideInUp: Animation;
  export const slideOutDown: Animation;
  export const slideOutLeft: Animation;
  export const slideOutRight: Animation;
  export const slideOutUp: Animation;
  export const hinge: Animation;
  export const jackInTheBox: Animation;
  export const rollIn: Animation;
  export const rollOut: Animation;
  export const zoomIn: Animation;
  export const zoomInDown: Animation;
  export const zoomInLeft: Animation;
  export const zoomInRight: Animation;
  export const zoomInUp: Animation;
  export const zoomOut: Animation;
  export const zoomOutDown: Animation;
  export const zoomOutLeft: Animation;
  export const zoomOutRight: Animation;
  export const zoomOutUp: Animation;
}

/**
 * Returns a list of all supported animation names.
 *
 * Supply the required animation as the `name` property of the
 * `<flow-ui-animation>` component.
 */
declare function getAnimationNames(): string[];
/**
 * Returns a list of all supported easing method names.
 *
 * Supply the required easing method as the `easing` property of the
 * `<flow-ui-animation>` component.
 */
declare function getEasingNames(): string[];

/**
 * @internal
 *
 * Registers standard Chart.js components and plugins,
 * and sets default options.
 */
declare function initializeChartJs(): void;
declare function registerChartComponent(...components: ChartComponentLike[]): void;

interface BaseColorStopOptions {
    type: string;
    label?: string;
}
interface StringColorStopOptions {
    type: 'string';
}
interface NumberColorStopOptions {
    type: 'number';
    min?: number;
    max?: number;
    step?: number;
    units?: string;
}
interface SelectColorStopOptions {
    type: 'select';
    options: Array<string | {
        value: string;
        name?: string;
    }>;
}
type ColorStopOptions = StringColorStopOptions | NumberColorStopOptions | SelectColorStopOptions;
interface ColorStopValue {
    value: string | number;
    color: string;
    options?: {
        regex: boolean;
        caseSensitive: boolean;
    };
}
interface BaseColorMapperField {
    name?: string;
    field: string;
}
interface StringColorMapperField extends StringColorStopOptions, BaseColorMapperField {
    type: 'string';
}
interface NumberColorMapperField extends NumberColorStopOptions, BaseColorMapperField {
    type: 'number';
}
interface SelectColorMapperField extends SelectColorStopOptions, BaseColorMapperField {
    type: 'select';
}
type ColorMapperField = StringColorMapperField | NumberColorMapperField | SelectColorMapperField;
interface ColorMapperOptions {
    fields: Record<string, ColorMapperField>;
}
interface ColorMapperValue {
    mode: 'fixed' | 'data-driven';
    field: string | undefined;
    type?: 'string' | 'number' | 'select';
    defaultColor?: string;
    colorStops: ColorStopValue[];
}

declare function colorMapperValueToMaplibreExpression(value: ColorMapperValue): string;
declare function escapeMaplibreString(value: string): string;

/**
 *
 * The following code shows how to import FontAwesome SVG icons from the `flow-rdf-ui/icons` package and add them to the
 * default icon library.
 * ```js
 * // Import and register icons
 * import {fasHouse, fasGear, fasUser} from '@emuanalytics/flow-rdf-ui/icons';
 * import {addIcons} from '@emuanalytics/flow-rdf-ui';
 * addIcons({fasHouse, fasGear, fasUser});
 * ```
 *
 * Icons are registered under their camelCase name **and** kebab-case name.
 * Once registered, they can be used in the following way:
 *
 * ```html
 * <flow-ui-icon name="fas-house"></flow-ui-icon>
 * ```
 *
 * Note that missing or mis-spelled icons will be displayed as <flow-ui-icon name="unknown"></flow-ui-icon>.
 *
 * For a list of available icons, see the [FontAwesome icon gallery](https://fontawesome.com/search?o=r&m=free).
 */
declare const addIcons: (icons: {
    [name: string]: string;
}) => void;

type IconLibraryResolver = (name: string) => string;
type IconLibraryMutator = (svg: SVGElement) => void;
/**
 *
 * Use this function to add a custom icon library to the registry or override an existing one.
 * Provide a resolver function that returns the URL of the icon based on its name.
 * Optionally, provide a mutator function that modifies the SVG element of the icon.
 *
 * Two icon libraries are included by default:
 * - `system` (System icons used by `flow-rdf-ui` components)
 * - `default` (FontAwesome 6.4.2)
 *
 * To use a custom icon library, set the `library` property of the `<flow-ui-icon>` component
 * to the registered name of the library. If omitted, the `default` library is used.
 *
 * ```typescript
 * // Register FontAwesome icon library using SVGs from Flo.w CDN
 * registerIconLibrary('fa', {
 *   resolver: (name) => {
 *     const filename = name.replace(/^fa[rbs]-/, '');
 *     let folder = 'regular';
 *     if (name.substring(0, 4) === 'fas-') folder = 'solid';
 *     if (name.substring(0, 4) === 'fab-') folder = 'brands';
 *     return `https://flow-cdn.emu-analytics.net/icons/fontawesome-6.4.2/${folder}/${filename}.svg`;
 *   },
 *   mutator: (svg) => svg.setAttribute('fill', 'currentColor')
 * });
 * ```
 *
 * ```html
 * <flow-ui-icon library="fa" name="fas-house"></flow-ui-icon>
 * ```
 *
 * @param name The name of the custom icon library.
 * @param options The icon library resolver and optional mutator.
 * @param options.resolver A function that returns the URL of given icon.
 * @param options.mutator An optional function that mutates the SVG element of the icon.
 */
declare function registerIconLibrary(name: string, options: {
    resolver: IconLibraryResolver;
    mutator?: IconLibraryMutator;
}): void;
/**
 * Removes a custom icon library from the registry.
 */
declare function unregisterIconLibrary(name: string): void;

/**
 * Set the default locale used by date/time-sensitive components including
 * `<flow-ui-calendar>`, `<flow-ui-date-time-picker>` and `<flow-ui-timer>`.
 *
 * The default locale is can be overridden by setting the `locale` attribute
 * of date/time-sensitive components.
 *
 * @param locale Locale code (e.g. `'en'`, `'en-US'`, `'es-ES'`)
 */
declare function setDefaultLocale(locale: string): void;
/**
 * Set the default timezone used by date/time-sensitive components including
 * `<flow-ui-calendar>`, `<flow-ui-date-time-picker>` and `<flow-ui-timer>`.
 *
 * The default timezone is can be overridden by setting the `timezone` attribute
 * of date/time-sensitive components.
 *
 * @param timezone Timezone (e.g. `'Europe/London'`, `'America/New_York'`)
 */
declare function setDefaultTimeZone(timezone: string): void;

type FunctionParams<T> = T extends (...args: infer U) => string ? U : [];
interface Translation$1 {
    $code: string;
    $name: string;
    $dir: 'ltr' | 'rtl';
}
interface DefaultTranslation extends Translation$1 {
    $code: string;
    $name: string;
    $dir: 'ltr' | 'rtl';
    [key: string]: any;
}
interface ExistsOptions {
    lang: string;
    includeFallback: boolean;
}
/** Registers one or more translations */
declare function registerTranslation(...translation: Translation$1[]): void;
/** @internal */
declare class LocalizeController$1<UserTranslation extends Translation$1 = DefaultTranslation> implements ReactiveController {
    host: ReactiveControllerHost & HTMLElement;
    constructor(host: ReactiveControllerHost & HTMLElement);
    hostConnected(): void;
    hostDisconnected(): void;
    /**
     * Gets the host element's directionality as determined by the `dir` attribute. The return value is transformed to
     * lowercase.
     */
    dir(): string;
    /**
     * Gets the host element's language as determined by the `lang` attribute. The return value is transformed to
     * lowercase.
     */
    lang(): string;
    private getTranslationData;
    /** Determines if the specified term exists, optionally checking the fallback translation. */
    exists<K extends keyof UserTranslation>(key: K, options: Partial<ExistsOptions>): boolean;
    /** Outputs a translated term. */
    term<K extends keyof UserTranslation>(key: K, ...args: FunctionParams<UserTranslation[K]>): string;
    /** Outputs a localized date in the specified format. */
    date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string;
    /** Outputs a localized number in the specified format. */
    number(numberToFormat: number | string, options?: Intl.NumberFormatOptions): string;
    /** Outputs a localized time in relative format. */
    relativeTime(value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions): string;
}

/** @internal */
declare class LocalizeController extends LocalizeController$1<Translation> {
}

interface Translation extends Translation$1 {
    $code: string;
    $name: string;
    $dir: 'ltr' | 'rtl';
    carousel: string;
    clearEntry: string;
    close: string;
    copy: string;
    currentValue: string;
    dateAfterMax: (max: string) => string;
    dateBeforeMin: (min: string) => string;
    dateRangeTooLong: (maxRange: string) => string;
    goToSlide: (slide: number, count: number) => string;
    hidePassword: string;
    loading: string;
    nextSlide: string;
    numOptionsSelected: (num: number) => string;
    previousSlide: string;
    progress: string;
    rangeEndTime: string;
    rangeStartTime: string;
    remove: string;
    resize: string;
    scrollToEnd: string;
    scrollToStart: string;
    selectAColorFromTheScreen: string;
    showPassword: string;
    slideNum: (slide: number) => string;
    toggleColorFormat: string;
}

type NoUnion<T, U = T> = T extends U ? ([U] extends [T] ? T : never) : never;
/**
 * @tagname flow-ui-query-builder
 * @summary Query builder component
 *
 * @dependency flow-ui-date-time-picker
 * @dependency flow-ui-divider
 * @dependency flow-ui-dropdown
 * @dependency flow-ui-icon-button
 * @dependency flow-ui-input
 * @dependency flow-ui-menu
 * @dependency flow-ui-menu-item
 * @dependency flow-ui-option
 * @dependency flow-ui-select
 * @dependency flow-ui-tool-button
 * @dependency flow-ui-tool-button-group
 *
 * @event flow-ui-input - Emitted when the control's value changes.
 * @event flow-ui-change - Emitted when the control's value changes.
 * @event flow-ui-select - Emitted when a custom menu item is selected.
 * @event flow-ui-remove - Emitted when the user attempts to remove a rule or ruleset. Calling `event.preventDefault()` will cancel the removal.
 * @event flow-ui-clear - Emitted when the user clears all rules from the tool menu.
 * @event flow-ui-apply - Emitted when the user presses 'Enter' twice in the same value input control.
 *
 * @slot label - The component's label. Alternatively, you can use the `label` attribute.
 * @slot help-text - Text that describes how to use the component. Alternatively, you can use the `help-text` attribute.
 */
declare class FlowUiQueryBuilder extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowRdfElement)[];
    private static fieldDefinitions;
    private _value;
    private enterKeyElement;
    /**
     * Register a custom field definition.
     *
     * A field definition is used to add support for a custom field type. A field type comprises:
     *
     * - a field `type` string
     * - a `template` function that returns the template for the field's value control
     * - an array of `operators` that are valid for the field
     *
     * @param type
     * @param fieldDefinition
     */
    static registerFieldDefinition<T extends FlowQueryBuilderFieldType>(type: T, fieldDefinition: FlowQueryBuilderFieldDefinition<NoUnion<T>>): void;
    private readonly hasSlotController;
    /** @internal - add form control class */
    class: string;
    /** The query builder's value object. */
    value: FlowQueryBuilderRuleSet;
    /** The query builder's configuration object. */
    config: FlowQueryBuilderConfig;
    /** The query builder's size. */
    size: 'small' | 'medium' | 'large';
    /** Disables the select control. */
    disabled: boolean;
    /** The query builders's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /** The query builders's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** Display tree connector lines between query rules */
    treeLines: boolean;
    /** @internal */
    subQueryBuilder: boolean;
    /** Display control borders */
    borders: boolean;
    connectedCallback(): void;
    /** @internal */
    handleClassChange(): void;
    /** @internal */
    handleValueChange(): void;
    private valueTemplateForRule;
    private getDefault;
    private handleAddRule;
    /**
     * Handles removal of a rule set (displayed by a sub-query builder) in response to a remove event.
     *
     * @param ev
     * @param index
     */
    private handleRemoveRule;
    private handleSubQueryValueChange;
    private handleFieldChanged;
    private handleOperatorChanged;
    private handleConditionChange;
    private handleRuleMenuSelect;
    handleValueKeyDown(ev: KeyboardEvent): void;
    private handleToolbarMenuSelect;
    private emitValueChange;
    private operatorsForField;
    private defaultOperatorsForFieldType;
    private toolbarTemplate;
    private ruleTemplate;
    private ruleValueTemplate;
    private subQueryBuilderTemplate;
    private emptyRulesetTemplate;
    render(): lit_html.TemplateResult<1>;
}

/**
 * An abstract logical expression used to represent a user-defined query or filter.
 *
 * A rule set consists of one or more rules, where each rule is a single logical expression
 * of the form `<field> <operator> <value>` (for example, `name == 'John'`). A rule set combines
 * its rules using a condition, which can be either `and` or `or`. Rule sets can be nested to
 * create complex queries.
 *
 * Rule sets are typically created by the end-user using the [Query Builder](/flow-rdf/flow-rdf-ui/web-components/flow-ui-query-builder) UI component.
 */
interface FlowQueryBuilderRuleSet {
    /** The combining condition for rules in this rule set (`and` or `or`). */
    condition: string;
    /** One or more rules or rule sets to combine into a logical expression.*/
    rules: Array<FlowQueryBuilderRuleSet | FlowQueryBuilderRule>;
}
/**
 * A single abstract logical expression. Combined into a {@link FlowQueryBuilderRuleSet} to represent a user-defined query or filter.
 *
 * A rule is a single logical expression of the form `<field> <operator> <value>` (for example, `name == 'John'`).
 *
 * Supported operators are:
 *
 * - `=`: `<field>` exactly equals `<value>`.
 * - `!=`: `<field>` does not equal `<value>`.
 * - `<`: `<field>` less than `<value>`.
 * - `<=`: `<field>` less than or equal to `<value>`.
 * - `>`: `<field>` greater than `<value>`.
 * - `>=`: `<field>` greater than or equal to `<value>`.
 * - `in`: `<field>` in list of values. `<value>` is an array. (select-type fields only)
 * - `!in`: `<field>` not in list of values. `<value>` is an array. (select-type fields only)
 * - `contains`: `<field>` contains substring `<value>`. (string fields only)
 * - `!contains`: `<field>` does not contain substring `<value>`. (string fields only)
 * - `like`: `<field>` matches a wildcard pattern `<value>`. (string fields only)
 * - `!like`: `<field>` does not matched a wildcard pattern `<value>`. (string fields only)
 * - `regex`: `<field>` matches a regular expression pattern `<value>`. (string fields only)
 * - `!regex`: `<field>` does not match a regular expression pattern `<value>`. (string fields only)
 * - `between`: `<field>` is greater than or equal to `<value>[0]` and less than `<value>[1]`. `<value>` is an array of
 *   two ISO8601 date/time strings. (date, time and datetime fields only)
 *
 * Wildcard patterns use `*` to match any sequence of characters and `?` to match any single character.
 *
 * Regular expressions use the JavaScript regular expression syntax.
 *
 * The string-matching operators are case-sensitive by default. Specify `caseInsensitive: true` in the {@link FlowQueryBuilderStringField} field definition to use case-insensitive matching.
 *
 */
interface FlowQueryBuilderRule<ValueType = any> {
    /** Field identifier. */
    field?: string;
    /** Rule value. */
    value?: ValueType;
    /** Rule operator. */
    operator?: string;
    /** Set to `false` to disable a rule without removing it from its parent ruleset. */
    enabled?: boolean;
}
/**
 * An individual option for a select-type Query Builder field.
 */
interface FlowQueryBuilderOption {
    /** Display name of the value. */
    name: string;
    /** Option identifier. */
    value: string;
}
/** The set of field definitions comprising a {@link FlowQueryBuilderConfig} definition. */
interface FlowQueryBuilderFieldMap {
    [key: string]: FlowQueryBuilderField;
}
/**
 * Base interface for a Query Builder field definition. The field definition specifies how to display
 * a field in the Query Builder UI and how to convert the user-entered value to a concrete filter expression.
 *
 * The following field types are supported:
 *
 * - `string`: A text field, displayed as an input box. Supports string-matching operators.
 * - `number`: A numeric field, displayed as an numeric input box with stepper controls. Supports numeric comparison operators.
 * - `date`: A date field, displayed as a date picker. Supports numeric comparison operators and `between`.
 * - `time`: A time field, displayed as a time picker. Supports numeric comparison operators and `between`.
 * - `datetime`: A date-time field, displayed as a date-time picker. Supports numeric comparison operators and
 *   `between`.
 * - `select`: A select field, displayed as a dropdown list. Supports `in` and `!in` operators.
 *
 * In addition, all field types support equality operators (`=`, `!=`).
 *
 * @typeParam ValueType - The underlying type of the field value.
 */
interface FlowQueryBuilderFieldBase<ValueType = any> {
    /** Display name for the field. */
    name: string;
    /** Field type: `string`, `number`, `datetime`, `date`, `time`, `select`. */
    type: string;
    /** @internal */
    value?: ValueType;
    /** Set to `true` to allow the field to be `null`. */
    nullable?: boolean;
    /** Optionally override supported operators for the field. */
    operators?: string[];
    /** Default value for the field: static value or value-producing function. */
    defaultValue?: ValueType | (() => ValueType);
    /** Default operator for the field. */
    defaultOperator?: string;
    /**
     * Optional function to convert the user-entered value before applying a rule set converter. For the `between`
     * operator, the function is called separately for each end of the range.
     */
    convertValue?: (value: ValueType) => any;
    /** Optional validator function to validate the user-entered value. */
    validator?: (rule: FlowQueryBuilderRule<ValueType>) => string;
}
/**
 * Field definition for a string-type Query Builder field.
 */
interface FlowQueryBuilderStringField extends FlowQueryBuilderFieldBase<string> {
    type: 'string';
    /** Set to `true` to perform case-insensitive matching for `like` and `regex` operators. */
    caseInsensitive?: boolean;
}
/**
 * Field definition for a number-type Query Builder field.
 */
interface FlowQueryBuilderNumberField extends FlowQueryBuilderFieldBase<number> {
    type: 'number';
    /** Minimum allowed value for the field. */
    min?: number;
    /** Maximum allowed value for the field. */
    max?: number;
    /** Step size used by the field stepper controls. */
    step?: number;
}
/**
 * Base interface for date/time-type Query Builder fields.
 *
 * Note that the underlying value type for date/time fields is an ISO 8601 string.
 */
interface FlowQueryBuilderDateTimeFieldBase extends FlowQueryBuilderFieldBase<string> {
    /** Luxon date format for display of the field value. */
    dateFormat?: string | (() => string);
    /** Time zone specifier for display of the field value. */
    timezone?: string | (() => string);
    /** Locale code for display of the field value. */
    locale?: string | (() => string);
}
/**
 * Field definition for a datetime-type Query Builder field.
 */ interface FlowQueryBuilderDateTimeField extends FlowQueryBuilderDateTimeFieldBase {
    type: 'datetime';
}
/**
 * Field definition for a date-type Query Builder field.
 */
interface FlowQueryBuilderDateField extends FlowQueryBuilderDateTimeFieldBase {
    type: 'date';
}
/**
 * Field definition for a time-type Query Builder field.
 */
interface FlowQueryBuilderTimeField extends FlowQueryBuilderDateTimeFieldBase {
    type: 'time';
}
/**
 * Field definition for a select-type Query Builder field.
 *
 * The underlying value type for select fields is a string (single-select) or an array of strings (multi-select).
 * When the `in` or `!in` operator is selected, the field acts as a multi-select field. For other operators,
 * the field acts as a single-select field.
 *
 */
interface FlowQueryBuilderSelectField extends FlowQueryBuilderFieldBase<string | string[]> {
    type: 'select';
    /** The selectable options for the field. */
    options?: FlowQueryBuilderOption[];
}
/**
 * Map of field type names to field definitions for expansion of type parameters.
 */
interface FlowQueryBuilderFieldTypeMap {
    string: FlowQueryBuilderStringField;
    number: FlowQueryBuilderNumberField;
    datetime: FlowQueryBuilderDateTimeField;
    date: FlowQueryBuilderDateField;
    time: FlowQueryBuilderTimeField;
    select: FlowQueryBuilderSelectField;
}
type FlowQueryBuilderFieldType = keyof FlowQueryBuilderFieldTypeMap;
/**
 * The set of field types supported by the Query Builder. See {@link FlowQueryBuilderFieldBase}.
 */
type FlowQueryBuilderField = FlowQueryBuilderFieldTypeMap[keyof FlowQueryBuilderFieldTypeMap];
type FlowQueryBuilderTemplateFn<FieldType extends FlowQueryBuilderFieldType> = (rule: FlowQueryBuilderRule<FlowQueryBuilderFieldTypeMap[FieldType]['value']>, field: FlowQueryBuilderFieldTypeMap[FieldType], qb: FlowUiQueryBuilder, update: () => void) => TemplateResult;
/**
 * Configuration for a [Query Builder](/flow-rdf/flow-rdf-ui/web-components/flow-ui-query-builder) instance.
 *
 * The configuration specifies the set of fields available,
 * how to display those fields in the Query Builder UI, and how to convert the user-defined query to a concrete filter expression.
 */
interface FlowQueryBuilderConfig {
    fields: FlowQueryBuilderFieldMap;
}
interface FlowQueryBuilderFieldDefinition<Field extends FlowQueryBuilderFieldType> {
    operators: string[];
    template: FlowQueryBuilderTemplateFn<Field>;
}
/**
 * Options common to all Query Builder converters. These options are used to modify how a Query Builder
 * ruleset is converted to one of the supported concrete filter implementations:
 *
 * - Flo.w query definition - {@link flowQueryConverter}
 * - JavaScript filter function - {@link javascriptFilterConverter}
 * - Map layer filter - {@link mapLayerFilterConverter}
 */
interface FlowQueryBuilderConverterOptions {
    /** Subset of fields defined in the query ruleset to include in the converted result. */
    includeFields?: string[];
    /** Subset of fields defined in the query ruleset to exclude from the converted result. */
    excludeFields?: string[];
    /** Map of fields to rename in the converted result. */
    renameFields?: Record<string, string>;
    /** Set to `true` to throw an exception on error. By default, the problematic Query Builder field is ignored. */
    throwOnError?: boolean;
}
type FlowQueryBuilderConverter<R = any> = (ruleSet: FlowQueryBuilderRuleSet, config: FlowQueryBuilderConfig, options?: FlowQueryBuilderConverterOptions) => R;

/**
 * Recursively applies filters to the supplied {@link FlowQueryBuilderRuleSet}
 * returning a new rule set.
 *
 * This is used to sanitize user queries before they are executed by removing
 * excluded fields or including only the specified fields.
 *
 * Note that `includeFields` takes precedence over `excludeFields`.
 *
 * ```ts
 * const ruleSet = {
 *   condition: 'and',
 *   rules: [ { field: 'a', ... }, { field: 'b', ... }, { field: 'c', ... } ]
 * };
 *
 * const filteredRuleSet = filterRuleSet(ruleSet, { excludeFields: ['b', 'c'] });
 * ```
 *
 * @param ruleset Rule set to filter
 * @param options Filter rules
 * @param options.excludeFields Fields to exclude from the {@link FlowQueryBuilderRuleSet}
 * @param options.includeFields Fields to include in the {@link FlowQueryBuilderRuleSet}
 */
declare function filterRuleSet(ruleset: FlowQueryBuilderRuleSet, options: {
    excludeFields?: string[];
    includeFields?: string[];
}): FlowQueryBuilderRuleSet;
/**
 * Recursively renames fields in the supplied {@link FlowQueryBuilderRuleSet}
 * returning a new rule set.
 *
 * This can be used to sanitize user queries before they are executed.
 *
 * ```ts
 * const ruleSet = {
 *   condition: 'and',
 *   rules: [ { field: 'a', ... }, { field: 'b', ... }, ... } ]
 * };
 *
 * const renamedRuleSet = renameRuleSetFields(ruleSet, { a: 'renamedA' });
 *
 * // renamedRuleSet = {
 * //   condition: 'and',
 * //   rules: [ { field: 'renamedA', ... }, { field: 'b', ... }, ... } ]
 * // };
 *
 * ```
 *
 * @param ruleset Rule set to rename.
 * @param replacements Set of field name replacements.
 * @returns A new {@link FlowQueryBuilderRuleSet} with renamed fields.
 */
declare function renameRuleSetFields(ruleset: FlowQueryBuilderRuleSet, replacements: Record<string, string>): FlowQueryBuilderRuleSet;
/**
 * Recursively applies a tranform function to the supplied {@link FlowQueryBuilderRuleSet} returning a new rule set.
 *
 * The transform function should expect a single `FlowQueryBuilderRule` and return:
 *
 * - the same rule unmodified or modified in place
 * - `undefined` to exclude the rule from the rule set
 *
 * This can be used to modify and sanitize rule sets before they are used to perform queries.
 *
 * @param ruleSet Query builder rule set to transform.
 * @param transformFn Transform function
 * @returns A new {@link FlowQueryBuilderRuleSet} with transformed rules.
 */
declare function transformRuleSet(ruleSet: FlowQueryBuilderRuleSet, transformFn: (rule: FlowQueryBuilderRule) => FlowQueryBuilderRule | undefined, clone?: boolean): FlowQueryBuilderRuleSet;
/**
 * Recursively count the number of active rules in the supplied {@link FlowQueryBuilderRuleSet}.
 *
 * An 'active' rules is defined as having a valid field and being enabled.
 *
 * @param ruleSet Query builder rule set to count.
 * @returns The number of active rules in the rule set.
 */
declare function countRuleSet(ruleset: FlowQueryBuilderRuleSet): number;
/**
 * Helper function to determine if the supplied argument is a {@link FlowQueryBuilderRule}
 */
declare const isRule: (r: unknown) => r is FlowQueryBuilderRule;
/**
 * Helper function to determine if the supplied argument is a {@link FlowQueryBuilderRuleSet}
 */
declare const isRuleSet: (r: unknown) => r is FlowQueryBuilderRuleSet;
/**
 * Helper function to determine if the supplied argument is a {@link FlowQueryBuilderRule} or {@link FlowQueryBuilderRuleSet}
 */
declare const isRuleOrRuleset: (r: unknown) => r is FlowQueryBuilderRule | FlowQueryBuilderRuleSet;
/**
 * The start and end of a `between` rule's `[start, end]` value, each converted with the field's `convertValue`
 * function, if any. Gives `undefined` if the value isn't an array of two values.
 *
 * For a time field, a range that ends at 24:00 (the start of the day after its start) has no upper bound, because
 * every time of day is before it. The end is then `undefined`.
 *
 * @internal
 */
declare function betweenRuleValues(rule: FlowQueryBuilderRule, field: FlowQueryBuilderField): [any, any | undefined] | undefined;

declare const converter$2: FlowQueryBuilderConverter;

declare class JavaScriptFilterError extends Error {
    constructor(msg: string);
}
/**
 * A JavaScript function that implements the logical expression defined by a user-specified {@link FlowQueryBuilderRuleSet}. The function
 * accepts a data object as an argument and returns a boolean result indicating whether the data object matches the rule set.
 *
 * The filter function is typically created by using the {@link javascriptFilterConverter} converter function, prior to applying
 * the filter to a collection of data objects returned from a dataset query.
 *
 * The filter function has an additional `expression` property that contains the generated JavaScript expression for debugging purposes.
 *
 * @typeParam TData The type of the data object to be filtered.
 */
type JavaScriptFilterFn<TData = object> = ((data: TData) => boolean) & {
    /** The generated filter expression (for debugging purposes). */
    expression: string;
};
/**
 * A Query Builder converter that generates a JavaScript filter function from a user-specified {@link FlowQueryBuilderRuleSet}.
 *
 * The generated filter function accepts a data object as an argument and returns a boolean result indicating whether the data object
 * matches the rule set.
 *
 * This converter is typically used to apply a user-defined filter produced by the [Query Builder](/flow-rdf/flow-rdf-ui/web-components/flow-ui-query-builder) component to a collection of data objects returned
 * from a Flo.w reactive query. The filter is applied client-side as an alternative to server-side filtering using the {@link flowQueryConverter} converter.
 *
 * See [Examples](#filtering-reactive-query-results) for example usage.
 *
 *
 * ### The generated filter function
 *
 * The abstract logical expression defined by the Query Builder ruleset is compiled into a safe and efficient JavaScript function that is designed
 * to be passed to the Array.filter method. To view the generated JavaScript expression for debugging purposes, inspect the `expression` property
 * of the returned filter function. Note that the generated expression makes use of two internal helper functions: `get(prop, data)` to retrieve a
 *  sanitized property from the data object, and `regex(regex, value, caseInsensitive)` to compile, cache and evaluate regular expressions.
 *
 * Optionally, specify a type parameter when calling {@link javascriptFilterConverter} to strongly type the `data` parameter of the resulting filter function.
 *
 * @param ruleset Flo.w Query Builder ruleset to convert
 * @param config Flo.w Query Builder field configuration
 * @param options Converter options
 *
 * @typeParam TData The type of the data object to be filtered. Optionally specify to strongly type the returned filter function.
 *
 * @returns A function that accepts a data object and returns a boolean result indicating whether the data object matches the ruleset
 *
 * @example
### Basic usage
```typescript
// Query Builder field configuration
const config = {
  fields: {
    name: {name: 'Area Name', type: 'string', caseInsensitive: true },
    no2: {name: 'NO₂ (ppm)', type: 'number' };
  }
};

// Query Builder ruleset
const ruleset = {
  "condition": "and",
  "rules": [
    {
      "enabled": true,
      "operator": "like",
      "value": "bar*",
      "field": "name"
    },
    {
      "enabled": true,
      "operator": ">",
      "value": 20,
      "field": "no2"
    }
  ]
}

const filterFn = javascriptFilterConverter(ruleset, config);
filterFn.expression; // -> 'return (regex("^bar.*$", get("name", data), true)) && (get("no2", data) > 20);'

const data = [...]; // Array of data objects
const filteredData = data.filter(filterFn);
```

@example
### Filtering reactive query results

The filter is applied to the results of a Flo.w reactive query in a computed property. The computed property will be re-evaluated whenever
the query results or the filter ruleset changes.

The computed property can be bound to a map data source to display the filtered results on a map.

```typescript
// Reactive state store
class AppState extends StateStore {
  ...

  // User-defined Query Builder ruleset bound to Query Builder component
  @observable.ref
  queryBuilderRuleSet: FlowQueryBuilderRuleSet = { condition: 'and', rules: [] };

  // Reactive query
  airQualityQuery = query<FeatureCollection<Geometry>>(() => {

    const queryDefinition: QueryDefinition = {
      datasetId: 'airquality',
      format: 'geojson'
    };

    return queryDefinition;
  });

  // Application of client-side filter to query results
  @computed
  get filteredAirQuality() {
    // Bail out if results not yet retrieved
    if (!this.airQualityQuery.results) {
      return null;
    }

    // Apply javascript filter to features
    const filterFn = javascriptFilterConverter(this.queryBuilderRuleSet, queryBuilderConfig);
    const filteredFeatures = this.airQualityQuery.results.features.filter((f) => filterFn(f.properties));

    // Note: return a new FeatureCollection rather than mutating query results in-place
    return featureCollection(filteredFeatures);
  }
}
```
*/
declare const converter$1: <TData = object>(ruleset: FlowQueryBuilderRuleSet, config: FlowQueryBuilderConfig, options?: FlowQueryBuilderConverterOptions) => JavaScriptFilterFn<TData>;

declare const converter: FlowQueryBuilderConverter<string | undefined>;

/**
 * Registers every Flo.w RDF UI component as a custom element with its standard `flow-ui-*` tag name, except the
 * diagram components.
 *
 * This is a convenient way to get started. Note that it bundles every component into your application, whether or
 * not the application uses it. This includes large dependencies such as MapLibre GL JS (used by `<flow-ui-map>`) and
 * Chart.js (used by `<flow-ui-chart>`).
 *
 * We recommend registering only the components your application uses instead. To do this, call the `define()` method
 * of each component class, as shown in the example below. `define()` registers the component with its standard tag
 * name, and also registers the elements that the component renders internally, such as the `<flow-ui-icon>` of a
 * `<flow-ui-button>`. Components that you do not import are left out of the bundle.
 *
 * Elements that you place inside a component as content, such as the `<flow-ui-option>` elements of a
 * `<flow-ui-select>`, must be registered separately. It is safe to combine `define()` and `registerComponents()`. A tag
 * name that is already registered is left unchanged.
 *
 * The diagram components (`<flow-ui-diagram>` and the other `flow-ui-diagram-*` elements) are not registered, so that
 * applications that do not use a diagram do not bundle it. Register the diagram components that your application uses
 * with `define()`. `FlowUiDiagram.define()` also registers the elements that the diagram's default templates render.
 *
 * `FlowRdfAngularModule.forRoot()` in the `flow-rdf-angular` support library calls this function.
 *
 * @example
 * Register only the button and map components:
 * ```typescript
 * import { FlowUiButton, FlowUiMap } from '@emuanalytics/flow-rdf-ui';
 *
 * FlowUiButton.define();
 * FlowUiMap.define();
 * ```
 *
 * @returns A promise that resolves when all the components have been defined.
 */
declare function registerComponents(): Promise<void>;

/**
 * Initializes the `flow-rdf-ui` library.
 *
 * Call this once when your application starts, before registering components with their `define()` method or with
 * {@link registerComponents}.
 *
 * This function is called automatically when using the `flow-rdf-angular`
 * support library.
 */
declare function initialize(): void;

interface VirtualElement {
    getBoundingClientRect: () => DOMRect;
    contextElement?: Element;
}
/**
 * @tagname flow-ui-popup
 * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.

 * @event flow-ui-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
 *  operations in your listener or consider debouncing it.
 *
 * @slot - The popup's content.
 * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the
 *  `anchor` attribute or property instead.
 *
 * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are
 *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
 *  maybe a border or box shadow.
 * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
 * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
 *
 * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
 *  attribute is used.
 * @cssproperty [--arrow-color] - The color of the arrow.
 * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
 *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
 *  available when using `auto-size`.
 * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the
 *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
 *  available when using `auto-size`.
 */
declare class FlowUiPopup extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private anchorEl;
    private cleanup;
    /** @internal A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */
    popup: HTMLElement;
    private arrowEl;
    /**
     * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
     * element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the
     * `anchor` slot instead.
     */
    anchor: Element | string | VirtualElement;
    /**
     * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn
     * down and the popup will be hidden.
     */
    active: boolean;
    /**
     * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the
     * panel inside of the viewport.
     */
    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
    /**
     * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is
     * clipped, using a `fixed` position strategy can often workaround it.
     */
    strategy: 'absolute' | 'fixed';
    /** The distance in pixels from which to offset the panel away from its anchor. */
    distance: number;
    /** The distance in pixels from which to offset the panel along its anchor. */
    skidding: number;
    /**
     * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and
     * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using
     * `::part(arrow)` in your stylesheet.
     */
    arrow: boolean;
    /**
     * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the
     * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will
     * align the arrow to the start, end, or center of the popover instead.
     */
    arrowPlacement: 'start' | 'end' | 'center' | 'anchor';
    /**
     * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,
     * this will prevent it from overflowing the corners.
     */
    arrowPadding: number;
    /**
     * When set, placement of the popup will flip to the opposite site to keep it in view. You can use
     * `flipFallbackPlacements` to further configure how the fallback placement is determined.
     */
    flip: boolean;
    /**
     * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a
     * string of any number of placements separated by a space, e.g. "top bottom left". If no placement fits, the flip
     * fallback strategy will be used instead.
     * */
    flipFallbackPlacements: string;
    /**
     * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether
     * the popup should be positioned using the best available fit based on available space or as it was initially
     * preferred.
     */
    flipFallbackStrategy: 'best-fit' | 'initial';
    /**
     * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By
     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
     * change the boundary by passing a reference to one or more elements to this property.
     */
    flipBoundary: Element | Element[];
    /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */
    flipPadding: number;
    /** Moves the popup along the axis to keep it in view when clipped. */
    shift: boolean;
    /**
     * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By
     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
     * change the boundary by passing a reference to one or more elements to this property.
     */
    shiftBoundary: Element | Element[];
    /** The amount of padding, in pixels, to exceed before the shift behavior will occur. */
    shiftPadding: number;
    /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */
    autoSize: 'horizontal' | 'vertical' | 'both';
    /** Syncs the popup's width or height to that of the anchor element. */
    sync: 'width' | 'height' | 'both';
    /**
     * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By
     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
     * change the boundary by passing a reference to one or more elements to this property.
     */
    autoSizeBoundary: Element | Element[];
    /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */
    autoSizePadding: number;
    /**
     * When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the
     * gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane
     * because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is
     * active.
     */
    hoverBridge: boolean;
    connectedCallback(): Promise<void>;
    disconnectedCallback(): void;
    /** @internal */
    updated(changedProps: Map<string, unknown>): Promise<void>;
    private handleAnchorChange;
    private start;
    private stop;
    /** Forces the popup to recalculate and reposition itself. */
    reposition(): void;
    private updateHoverBridge;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-popup': FlowUiPopup;
    }
}

/**
 * @tagname flow-ui-tooltip
 * @summary Tooltips display additional information based on a specific action.
 *
 * @dependency flow-ui-popup
 *
 * @slot - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
 * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
 *
 * @event flow-ui-show - Emitted when the tooltip begins to show.
 * @event flow-ui-after-show - Emitted after the tooltip has shown and all animations are complete.
 * @event flow-ui-hide - Emitted when the tooltip begins to hide.
 * @event flow-ui-after-hide - Emitted after the tooltip has hidden and all animations are complete.
 *
 * @csspart base - The component's base wrapper, an `<flow-ui-popup>` element.
 * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
 * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
 * @csspart body - The tooltip's body where its content is rendered.
 *
 * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
 * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
 * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
 *
 * @animation tooltip.show - The animation to use when showing the tooltip.
 * @animation tooltip.hide - The animation to use when hiding the tooltip.
 */
declare class FlowUiTooltip extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiPopup)[];
    private hoverTimeout;
    private readonly localize;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal */
    body: HTMLElement;
    /** @internal */
    popup: FlowUiPopup;
    /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
    content: string;
    /**
     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
     * inside of the viewport.
     */
    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
    /** Disables the tooltip so it won't show when triggered. */
    disabled: boolean;
    /** The distance in pixels from which to offset the tooltip away from its target. */
    distance: number;
    /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
    open: boolean;
    /** The distance in pixels from which to offset the tooltip along its target. */
    skidding: number;
    /**
     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
     * programmatically.
     */
    trigger: string;
    /**
     * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
     * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
     * scenarios.
     */
    hoist: boolean;
    connectedCallback(): void;
    firstUpdated(): void;
    disconnectedCallback(): void;
    private handleBlur;
    private handleClick;
    private handleFocus;
    private handleKeyDown;
    private handleMouseOver;
    private handleMouseOut;
    private hasTrigger;
    /** @internal */
    handleOpenChange(): Promise<void>;
    /** @internal */
    handleOptionsChange(): Promise<void>;
    /** @internal */
    handleDisabledChange(): void;
    /** Shows the tooltip. */
    show(): Promise<void>;
    /** Hides the tooltip */
    hide(): Promise<void>;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tooltip': FlowUiTooltip;
    }
}

/**
 * @tagname flow-ui-progress-ring
 * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
 *
 * @slot label - A label to show inside the ring.
 *
 * @csspart base - The component's base wrapper.
 * @csspart label - The progress ring label.
 *
 * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
 * @cssproperty --track-width - The width of the track.
 * @cssproperty --track-color - The color of the track.
 * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.
 * @cssproperty --indicator-color - The color of the indicator.
 * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.
 */
declare class FlowUiProgressRing extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private readonly localize;
    /** A custom label for assistive devices. */
    label: string;
    /** The current progress as a percentage, 0 to 100. */
    value: number;
    /** If the progress animation is indeterminate */
    indeterminate: boolean;
    /** The progress ring's theme variant */
    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger';
    /** The progress ring's size */
    size: 'small' | 'medium' | 'large';
    connectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
}

/**
 * @tagname flow-ui-button
 * @summary Buttons represent actions that are available to the user.
 *
 * @dependency flow-ui-icon
 * @dependency flow-ui-progress-ring
 *
 * @event flow-ui-blur - Emitted when the button loses focus.
 * @event flow-ui-focus - Emitted when the button gains focus.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @slot - The button's label.
 * @slot prefix - A presentational prefix icon or similar element.
 * @slot suffix - A presentational suffix icon or similar element.
 *
 * @csspart base - The component's base wrapper.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart label - The button's label.
 * @csspart suffix - The container that wraps the suffix.
 * @csspart caret - The button's caret icon, an `<flow-ui-icon>` element.
 */
declare class FlowUiButton extends FlowRdfFormControl {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon | typeof FlowUiProgressRing)[];
    private readonly formControlController;
    private readonly hasSlotController;
    private readonly localize;
    /** @internal */
    button: HTMLButtonElement | HTMLLinkElement;
    private hasFocus;
    label: string;
    /** The button's theme variant. */
    variant: 'default' | 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
    /** The button's size. */
    size: 'small' | 'medium' | 'large';
    /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
    caret: boolean;
    /** Disables the button. */
    disabled: boolean;
    /** Draws the button in a loading state. */
    loading: boolean;
    /** Draws an outlined button. */
    outline: boolean;
    /** Draws a pill-style button with rounded edges. */
    pill: boolean;
    /**
     * Draws a circular FAB. When this attribute is present, the button expects a single `<flow-ui-icon>` in the
     * default slot.
     */
    fabCircle: boolean;
    /**
     * Draws a square FAB. When this attribute is present, the button expects a single `<flow-ui-icon>` in the
     * default slot.
     */
    fabSquare: boolean;
    /**
     * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native
     * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.
     */
    type: 'button' | 'submit' | 'reset';
    /**
     * The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.
     * This attribute is ignored when `href` is present.
     */
    name: string;
    /**
     * The value of the button, submitted as a pair with the button's name as part of the form data, but only when this
     * button is the submitter. This attribute is ignored when `href` is present.
     */
    value: string;
    /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
    href: string;
    /** Tells the browser where to open the link. Only used when `href` is present. */
    target: '_blank' | '_parent' | '_self' | '_top';
    /**
     * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the
     * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a
     * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by
     * setting the attribute to an empty string or a value of your choice, respectively.
     */
    rel: string;
    /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */
    download?: string;
    /**
     * The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
     * value of this attribute must be an id of a form in the same document or shadow root as the button.
     */
    form: string;
    /** Used to override the form owner's `action` attribute. */
    formAction: string;
    /** Used to override the form owner's `enctype` attribute.  */
    formEnctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
    /** Used to override the form owner's `method` attribute.  */
    formMethod: 'post' | 'get';
    /** Used to override the form owner's `novalidate` attribute. */
    formNoValidate: boolean;
    /** Used to override the form owner's `target` attribute. */
    formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    disconnectedCallback(): void;
    firstUpdated(): void;
    private handleBlur;
    private handleFocus;
    private handleClick;
    private handleHostClick;
    private handleInvalid;
    private isButton;
    private isLink;
    /** @internal */
    handleDisabledChange(): void;
    /** Simulates a click on the button. */
    click(): void;
    /** Sets focus on the button. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the button. */
    blur(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    render(): lit_html.TemplateResult;
}

/**
 * @tagname flow-ui-icon-button
 * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
 * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/icon-button
 * @status stable
 * @since 2.0
 *
 * @dependency flow-ui-button
 * @dependency flow-ui-icon
 * @dependency flow-ui-tooltip
 *
 * @event flow-ui-blur - Emitted when the icon button loses focus.
 * @event flow-ui-focus - Emitted when the icon button gains focus.
 *
 * @slot tooltip - The tooltip content to display when the user hovers over the icon button. Alternatively, you can use the `tooltip` attribute.
 *
 * @csspart base - The component's base wrapper.
 */
declare class FlowUiIconButton extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon | typeof FlowUiButton | typeof FlowUiTooltip)[];
    private readonly hasSlotController;
    private tooltipAnimating;
    /** @internal */
    button: HTMLButtonElement | HTMLLinkElement;
    /** @internal */
    tooltipElem: FlowUiTooltip;
    /** @internal */
    confirmButton: HTMLButtonElement;
    private hasFocus;
    /** The name of the icon to draw. Available names depend on the icon library being used. */
    name?: string;
    /** The name of a registered custom icon library. */
    library?: string;
    /**
     * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
     * can result in XSS attacks.
     */
    src?: string;
    /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
    href?: string;
    /** Tells the browser where to open the link. Only used when `href` is set. */
    target?: '_blank' | '_parent' | '_self' | '_top';
    /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
    download?: string;
    /**
     * A description that gets read by assistive devices. For optimal accessibility, you should always include a label
     * that describes what the icon button does.
     */
    label: string;
    /**
     * Tooltip text that gets displayed when the user hovers over the icon button. If you need to display HTML, use the
     * `tooltip` slot instead.
     */
    tooltip: string;
    /**
     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
     * inside of the viewport.
     */
    tooltipPlacement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
    /** The distance in pixels from which to offset the tooltip away from the icon button. */
    tooltipDistance: number;
    /** The distance in pixels from which to offset the tooltip along the icon button. */
    tooltipSkidding: number;
    /** Disables the button. */
    disabled: boolean;
    /**
     * Confirmation text that gets displayed in a tooltip when the user clicks the icon button.
     *  If you need to display HTML, use the `confirm` slot instead.
     */
    confirm: string;
    connectedCallback(): void;
    private handleBlur;
    private handleFocus;
    protected handleClick(event: MouseEvent): void;
    /** Simulates a click on the icon button. */
    click(): void;
    /** Sets focus on the icon button. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the icon button. */
    blur(): void;
    /** Hide the confirmation tooltip if it is showing */
    hideConfirm(): void;
    /** Show the confirmation tooltip */
    showConfirm(): void;
    private handleConfirmClick;
    private renderWithTooltip;
    private renderWithConfirmation;
    render(): TemplateResult;
}

/**
 * @tagname flow-ui-alert
 * @summary Alerts are used to display important messages inline or as toast notifications.
 *
 * @dependency flow-ui-icon-button
 *
 * @slot - The alert's main content.
 * @slot icon - An icon to show in the alert. Works best with `<flow-ui-icon>`.
 *
 * @event flow-ui-show - Emitted when the alert opens.
 * @event flow-ui-after-show - Emitted after the alert opens and all animations are complete.
 * @event flow-ui-hide - Emitted when the alert closes.
 * @event flow-ui-after-hide - Emitted after the alert closes and all animations are complete.
 *
 * @csspart base - The component's base wrapper.
 * @csspart icon - The container that wraps the optional icon.
 * @csspart message - The container that wraps the alert's main content.
 * @csspart close-button - The close button, an `<flow-ui-icon-button>`.
 * @csspart close-button__base - The close button's exported `base` part.
 *
 * @animation alert.show - The animation to use when showing the alert.
 * @animation alert.hide - The animation to use when hiding the alert.
 */
declare class FlowUiAlert extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIconButton)[];
    private autoHideTimeout;
    private readonly hasSlotController;
    private readonly localize;
    private base;
    /**
     * Set to `true` to display the alert. You can also
     * use the `show()` and `hide()` methods.
     */
    open: boolean;
    /** Enables a close button that allows the user to dismiss the alert. */
    closable: boolean;
    /** The alert's theme variant. */
    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger';
    /**
     * The length of time (in ms) that the alert will show itself before closing. If the user interacts with
     * the alert before it closes (e.g. by moving the mouse over it), the timer will restart.
     */
    duration: number;
    connectedCallback(): void;
    firstUpdated(): void;
    private restartAutoHide;
    private handleCloseClick;
    private handleMouseMove;
    /** @internal */
    handleOpenChange(): Promise<void>;
    /** @internal */
    handleDurationChange(): void;
    /** Shows the alert. */
    show(): Promise<void>;
    /** Hides the alert */
    hide(): Promise<void>;
    /**
     * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
     * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
     * calling this method again. The returned promise will resolve after the alert is hidden.
     */
    toast(): Promise<void>;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-alert': FlowUiAlert;
    }
}

/**
 * @tagname flow-ui-animation
 * @summary Animate elements declaratively with over 100 animation presets. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
 *
 * @event flow-ui-cancel - Emitted when the animation is canceled.
 * @event flow-ui-finish - Emitted when the animation finishes.
 * @event flow-ui-start - Emitted when the animation starts or restarts.
 *
 * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To
 *  animate multiple elements, either wrap them in a single container or use multiple `<flow-ui-animation>` elements.
 */
declare class FlowUiAnimation extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private animation?;
    private hasStarted;
    private defaultSlot;
    /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop.
     * Use `getAnimationNames()` to retrieve a list of available animations.
     */
    name: string;
    /**
     * Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when
     * the animation finishes or gets canceled.
     */
    play: boolean;
    /** The number of milliseconds to delay the start of the animation. */
    delay: number;
    /**
     * Determines the direction of playback as well as the behavior when reaching the end of an iteration.
     * [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)
     */
    direction: PlaybackDirection;
    /** The number of milliseconds each iteration of the animation takes to complete. */
    duration: number;
    /**
     * The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function
     * such as `cubic-bezier(0, 1, .76, 1.14)`.
     */
    easing: string;
    /** The number of milliseconds to delay after the active period of an animation sequence. */
    endDelay: number;
    /** Sets how the animation applies styles to its target before and after its execution. */
    fill: FillMode;
    /** The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops. */
    iterations: number;
    /** The offset at which to start the animation, usually between 0 (start) and 1 (end). */
    iterationStart: number;
    /** The keyframes to use for the animation. If this is set, `name` will be ignored. */
    keyframes?: Keyframe[];
    /**
     * Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this
     * to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This
     * value can be changed without causing the animation to restart.
     */
    playbackRate: number;
    /** Gets and sets the current animation time. */
    get currentTime(): CSSNumberish;
    set currentTime(time: number);
    connectedCallback(): void;
    disconnectedCallback(): void;
    private handleAnimationFinish;
    private handleAnimationCancel;
    private handleSlotChange;
    private createAnimation;
    private destroyAnimation;
    /** @internal */
    handleAnimationChange(): void;
    /** @internal */
    handlePlayChange(): boolean;
    /** @internal */
    handlePlaybackRateChange(): void;
    /** Clears all keyframe effects caused by this animation and aborts its playback. */
    cancel(): void;
    /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
    finish(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-animation': FlowUiAnimation;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-icon': FlowUiIcon;
    }
}

/**
 * @tagname flow-ui-divider
 * @summary Dividers are used to visually separate or group elements.
 *
 * @cssproperty --color - The color of the divider.
 * @cssproperty --width - The width of the divider.
 * @cssproperty --spacing - The spacing of the divider.
 */
declare class FlowUiDivider extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /** Draws the divider in a vertical orientation. */
    vertical: boolean;
    connectedCallback(): void;
    /** @internal */
    handleVerticalChange(): void;
}

/**
 * The autocomplete component does not filter its options itself. Listen for the `flow-ui-input` event, read the text
 * that the user has typed with `getInputText()`, and replace the slotted `<flow-ui-option>` elements with the options
 * that match. The autocomplete's value is the option value of the selected option. Use `displayWith` to show a label
 * in the input instead of the option value.
 *
 * @tagname flow-ui-autocomplete
 * @summary Autocompletes allow users to type into a text input and choose a value from a list of suggested [options](./flow-ui-option).
 *
 * @dependency flow-ui-divider
 * @dependency flow-ui-icon
 * @dependency flow-ui-popup
 *
 * @slot - The listbox options. Must be `<flow-ui-option>` elements. You can use `<flow-ui-divider>` to group items visually.
 * @slot label - The autocomplete's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
 * @slot suffix - Used to append a presentational icon or similar element to the combobox.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot help-text - Text that describes how to use the autocomplete. Alternatively, you can use the `help-text`
 *  attribute.
 *
 * @event flow-ui-input - Emitted when the input text changes. When the user types, the event is emitted after the `debounce-delay`. Call `getInputText()` to read the text, for example to update the options.
 * @event flow-ui-change - Emitted when the autocomplete's value changes.
 * @event flow-ui-focus - Emitted when the autocomplete gains focus.
 * @event flow-ui-blur - Emitted when the autocomplete loses focus.
 * @event flow-ui-show - Emitted when the listbox opens.
 * @event flow-ui-after-show - Emitted after the listbox opens and all animations are complete.
 * @event flow-ui-hide - Emitted when the listbox closes.
 * @event flow-ui-after-hide - Emitted after the listbox closes and all animations are complete.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart label - The label's wrapper.
 * @csspart help-text - The help text's wrapper.
 * @csspart control - The input's wrapper.
 * @csspart combobox - The container that wraps the prefix, suffix, input and clear button.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart suffix - The container that wraps the suffix.
 * @csspart display-input - The text input, an `<input>` element.
 * @csspart listbox - The listbox container where options are slotted.
 * @csspart clear-button - The clear button.
 */
declare class FlowUiAutocomplete extends FlowRdfFormControl {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon | typeof FlowUiPopup | typeof FlowUiDivider)[];
    private readonly hasSlotController;
    private readonly localize;
    /** @internal Last time when the mousedown event was fired */
    private mouseDownAt;
    /** @internal Emits `flow-ui-input` once typing pauses for {@link debounceDelay} */
    private debouncedInput;
    private pendingChangeEvent;
    private pendingInputEvent;
    /** @internal When true, the next value change leaves the input text as the user typed it */
    private pendingKeepInputText;
    private hasOptions;
    /** @internal True while the user is typing to filter (input text has diverged from the committed value). */
    private inputChanged;
    /** @internal Stable base used to generate option DOM ids when the host has no `id` of its own. */
    private optionIdBase;
    /** @internal Monotonic per-host suffix for option DOM ids, so ids never collide across re-renders. */
    private nextOptionId;
    /**
     * @internal True while hide()'s close animation is in flight. `open` stays true across that
     * animation (so the popup remains visible while it fades out), which would otherwise make a
     * concurrent show() no-op at its `!this.open` guard. show() flips this to false to cancel the
     * close and reopen; hide() bails after its animation if it finds the close was cancelled.
     */
    private closing;
    private readonly formControlController;
    /** The autocomplete's size. */
    size: 'small' | 'medium' | 'large';
    /** Draws a filled autocomplete input. */
    filled: boolean;
    /** Draws a pill-style autocomplete input with rounded edges. */
    pill: boolean;
    /** The autocomplete's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /** The autocomplete's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** The autocomplete's placeholder text. */
    placeholder: string;
    /** Disables the autocomplete. */
    disabled: boolean;
    /**
     * The "form owner" to associate the autocomplete with. If omitted, the closest containing form will be used
     * instead. The value of this attribute must be an id of a form in the same document or shadow root as the
     * autocomplete.
     */
    form: string;
    /** Makes the autocomplete a required field. */
    required: boolean;
    /** Set to `true` to display the autocomplete in the inline form control style. */
    inline: boolean;
    /** Set to `true` to display a divider below the control. */
    divider: boolean;
    /**
     * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
     */
    hoist: boolean;
    /**
     * The preferred placement of the autocomplete's menu. Note that the actual placement may vary as needed to keep the listbox
     * inside of the viewport.
     */
    placement: 'top' | 'bottom';
    /** The option value of the selected option. */
    value: string;
    /**
     * The function that returns the text to show in the input for a given `value`. It can return a promise. If not set,
     * the input shows the value itself.
     */
    displayWith: ((value: string) => string) | ((value: string) => Promise<string>);
    /** The delay in milliseconds between the user's last keystroke and the `flow-ui-input` event. */
    debounceDelay: number;
    /** Set to `true` to show a clear button when the autocomplete has a value. */
    clearable: boolean;
    /** Set to `true` to clear the value when the autocomplete gains focus. */
    clearOnFocus: boolean;
    /** Current value displayed by the control; this can be what the user is typing or the label of the selected option */
    private inputText;
    /** @internal Is the listbox open or not */
    private open;
    private selectedOption;
    private currentOption;
    /** @internal Is the component in focus or not */
    hasFocus: boolean;
    private input;
    private popup;
    private listbox;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Gets the validity state object.*/
    get validity(): ValidityState;
    /** Gets the validation message. */
    get validationMessage(): string;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(_: string): void;
    /** @internal Gets an array of all <flow-ui-option> elements */
    private getAllOptions;
    /** @internal Gets the first <flow-ui-option> element */
    private getFirstOption;
    /**
     * @internal
     * Gives each slotted option a stable DOM `id` (`<host-id>-option-<n>`) used purely for
     * ARIA wiring (`aria-activedescendant`). A consumer-provided `id` is preserved. This `id` is
     * independent of the option's `value` (domain identity). See ADR-0001.
     *
     * The suffix comes from a monotonic per-host counter rather than the option's index: a filter
     * re-render can retain some option elements while creating others, so an index-based suffix
     * could hand a new element an id that a retained element already owns.
     */
    private assignOptionIds;
    /**
     * @internal
     * Un-highlights currently highlighted option and highlights the given option.
     *
     * DOM focus stays on the `<input>` (per the APG editable-combobox pattern); the highlighted
     * ("current") option is conveyed to assistive tech via the input's `aria-activedescendant`,
     * not by moving focus. See ADR-0001.
     */
    private setCurrentOption;
    /**
     * @internal
     * Sets the input's `aria-activedescendant` to the given option `id`, or clears it (to `''`,
     * per the APG reference) when passed `null` or an empty id. Centralises the ARIA wiring so the
     * highlight and close paths stay in sync. See ADR-0001.
     */
    private setActiveDescendant;
    /**
     * @internal
     * Unselects currently selected option
     * and selects the given option
     */
    private setSelectedOption;
    /**
     * @internal
     * Sets the value of the control.
     * Should trigger {@link handleValueChange} when value is set.
     * By default, it will emit a `flow-ui-change` event.
     *
     * @param value - The value to set.
     * @param emitChangeEvent - A change event will be emitted if true.
     * @param keepInputText - The input text is not re-synced from {@link displayWith} if true.
     */
    private setValue;
    /** @internal Updates the debounced input emitter if `{@link debounceDelay} is changed. */
    updateDebounceDelay(): void;
    /** @internal Handle the `flow-ui-input` event from the input box. */
    private handleInput;
    /** @internal Handle the `flow-ui-change` event from the input box */
    private handleInputChange;
    /** @internal Handle `flow-ui-focus` event from the input box. */
    private handleInputFocus;
    /** @internal Handle `flow-ui-focus` event from the input box. */
    private handleInputBlur;
    handleClearClick(event: MouseEvent): void;
    /** @internal Handle the `mousedown` event from the clear button */
    handleClearMouseDown(event: MouseEvent): Promise<void>;
    /** @internal Handle option selection when an option is clicked on */
    private handleListboxClick;
    /**
     * @internal
     * Commits an option picked by the user and closes the control. Re-picking the already selected
     * option (e.g. after the input text was edited away) commits no new value, so no change event
     * fires; the input text is re-synced from {@link displayWith} instead.
     */
    private commitOption;
    /** @internal Handle mouse and keyboard events in the document, outside the control. */
    private handleDocumentEvent;
    /** @internal */
    private handleKeyDown;
    /** @internal Add event listeners to the document when the dropdown is opened. */
    private addListenersForDropdown;
    /** @internal Remove event listeners from the document when the dropdown is closed. */
    private removeListenersForDropdown;
    /** @internal Handles changes in the default slot */
    private handleDefaultSlotChange;
    /**
     * @internal
     * Establishes the highlighted ("current") option per the APG rules (ADR-0001):
     * - while filtering (input text has changed): always the first option, so type-then-Enter
     *   selects the narrowed-down top option.
     * - on open with unchanged input: the selected option if one matches, else the first.
     *
     * Called both on slot change (list re-rendered) and on open (listbox shown without a
     * re-render, e.g. clicking back into the input), since the latter fires no slot change.
     */
    private highlightCurrentOption;
    /** @internal Toggles listbox based on focus and options in the default slot. */
    toggleListbox(): void;
    /**
     * @internal
     * Syncs the {@link displayValue} by applying {@link displayWith} based on the current {@link value}.
     */
    private syncDisplayValue;
    /** @internal */
    handleValueChange(oldValue: string, value: string): Promise<void>;
    /** Focuses on the control */
    focus(): void;
    /** Blurs from the control. */
    blur(): void;
    /** Shows the listbox. */
    show(): Promise<void>;
    /** Hides the listbox. */
    hide(): Promise<void>;
    /** Gets the current value of the text input */
    getInputText(): string;
    /** @internal */
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-autocomplete': FlowUiAutocomplete;
    }
}

/**
 * @tagname flow-ui-avatar
 * @summary Avatars are used to represent a person or object.

 *
 * @dependency flow-ui-icon
 *
 * @slot icon - The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.
 *
 * @csspart base - The component's base wrapper.
 * @csspart icon - The container that wraps the avatar's icon.
 * @csspart initials - The container that wraps the avatar's initials.
 * @csspart image - The avatar image. Only shown when the `image` attribute is set.
 *
 * @cssproperty --size - The size of the avatar.
 */
declare class FlowUiAvatar extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon)[];
    private hasError;
    /** The image source to use for the avatar. */
    image: string;
    /** A label to use to describe the avatar to assistive devices. */
    label: string;
    /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
    initials: string;
    /** Indicates how the browser should load the image. */
    loading: 'eager' | 'lazy';
    /** The shape of the avatar. */
    shape: 'circle' | 'square' | 'rounded';
    /** @internal */
    handleImageChange(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-avatar': FlowUiAvatar;
    }
}

/**
 * @tagname flow-ui-badge
 * @summary Badges are used to draw attention and display statuses or counts.
 *
 * @slot - The badge's content.
 *
 * @csspart base - The component's base wrapper.
 */
declare class FlowUiBadge extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /** The badge's theme variant. */
    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger';
    /** The badge size. */
    size: 'small' | 'medium' | 'large';
    /** Draws a pill-style badge with rounded edges. */
    pill: boolean;
    /** Makes the badge pulsate to draw attention. */
    pulse: boolean;
    connectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-badge': FlowUiBadge;
    }
}

/**
 * @tagname flow-ui-base-control
 * @summary Inputs collect data from the user.
 * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/input
 * @status stable
 * @since 2.0
 *
 * @dependency flow-ui-divider
 *
 * @slot label - The input's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the input.
 * @slot suffix - Used to append a presentational icon or similar element to the input.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot show-password-icon - An icon to use in lieu of the default show password icon.
 * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 *
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-change - Emitted when an alteration to the control's value is committed by the user.
 * @event flow-ui-clear - Emitted when the clear button is activated.
 * @event flow-ui-focus - Emitted when the control gains focus.
 * @event flow-ui-input - Emitted when the control receives input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The input's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart base - The component's base wrapper.
 * @csspart input - The internal `<input>` control.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart clear-button - The clear button.
 * @csspart password-toggle-button - The password toggle button.
 * @csspart suffix - The container that wraps the suffix.
 */
declare class FlowUiBaseControl extends FlowRdfFormControl {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiDivider)[];
    private readonly formControlController;
    private readonly hasSlotController;
    /** @internal */
    input: HTMLInputElement;
    private hasFocus;
    /** The input's size. */
    size: 'small' | 'medium' | 'large';
    /** Draws a filled input. */
    filled: boolean;
    /** Draws a pill-style input with rounded edges. */
    pill: boolean;
    /** The input's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** Disables the input. */
    disabled: boolean;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Makes the input a required field. */
    required: boolean;
    /**
     * Display the input in the 'inline' form control style.
     */
    inline: boolean;
    /** Indicates that the control should display a divider */
    divider: boolean;
    connectedCallback(): void;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    firstUpdated(): void;
    private handleBlur;
    private handleFocus;
    /** @internal */
    handleDisabledChange(): void;
    /** Sets focus on the input. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the input. */
    blur(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-base-control': FlowUiBaseControl;
    }
}

/**
 * @tagname flow-ui-breadcrumb-item
 * @summary Breadcrumb Items are used inside [breadcrumbs](./flow-ui-breadcrumb) to represent different links.
 * @docgroup breadcrumb

 * @slot - The breadcrumb item's label.
 * @slot prefix - An optional prefix, usually an icon or icon button.
 * @slot suffix - An optional suffix, usually an icon or icon button.
 * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
 * you want to change it for all items in the group, set the separator on `<flow-ui-breadcrumb>` instead.
 *
 * @csspart base - The component's base wrapper.
 * @csspart label - The breadcrumb item's label.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart suffix - The container that wraps the suffix.
 * @csspart separator - The container that wraps the separator.
 */
declare class FlowUiBreadcrumbItem extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    /**
     * Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
     * internally. When unset, a button will be rendered instead.
     */
    href?: string;
    /** Tells the browser where to open the link. Only used when `href` is set. */
    target?: '_blank' | '_parent' | '_self' | '_top';
    /** The `rel` attribute to use on the link. Only used when `href` is set. */
    rel: string;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-breadcrumb-item': FlowUiBreadcrumbItem;
    }
}

/**
 * @tagname flow-ui-breadcrumb
 * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
 * @docgroup breadcrumb
 *
 * @dependency flow-ui-icon
 *
 * @slot - One or more breadcrumb items to display.
 * @slot separator - The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.
 *
 * @csspart base - The component's base wrapper.
 */
declare class FlowUiBreadcrumb extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon)[];
    private readonly localize;
    private separatorDir;
    private defaultSlot;
    private separatorSlot;
    /**
     * The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
     * screen readers and other assistive devices to provide more context for users.
     */
    label: string;
    private getSeparator;
    private handleSlotChange;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-breadcrumb': FlowUiBreadcrumb;
    }
}

/**
 * @tagname flow-ui-busy-overlay
 * @summary Busy overlay is used to indicate that a component which displays data is being currently updated.
 *
 * @dependency flow-ui-progress-ring
 *
 * @slot - The component to overlay with when busy.
 * @slot busy-animation - The indeterminate custom loading animation to display when busy.
 *
 * @cssproperty --transition-delay - The delay after which the overlay is shown.
 * @cssproperty --transition-duration - The duration of the overlay's fade-in/out transition.
 * @cssproperty --progress-ring-size - The size of the default progress ring loading animation.
 * @cssproperty --progress-ring-track-width - The width of the default progress ring's track.
 * @cssproperty --progress-ring-track-color - The color of the default progress ring's track.
 * @cssproperty --overlay-background-color - The background color of the overlay.
 */
declare class FlowUiBusyOverlay extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiProgressRing)[];
    busy: boolean;
    /** The default loading animation's theme variant. */
    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger';
    /** Size of the loading animation */
    size: 'small' | 'medium' | 'large';
    /** To overlay the parent element */
    overlayParent: boolean;
    connectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-busy-overlay': FlowUiBusyOverlay;
    }
}

/**
 * @tagname flow-ui-button-group
 * @summary Button groups can be used to group related buttons into sections.
 *
 * @slot - One or more `<flow-ui-button>` elements to display in the button group.
 *
 * @csspart base - The component's base wrapper.
 */
declare class FlowUiButtonGroup extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal  */
    disableRole: boolean;
    /** Text label for assistive devices. */
    label: string;
    /**
     * Use vertical layout for the button group.
     */
    vertical: boolean;
    connectedCallback(): void;
    /** @internal */
    handleVerticalChange(): Promise<void>;
    private handleFocus;
    private handleBlur;
    private handleMouseOver;
    private handleMouseOut;
    private handleSlotChange;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-button-group': FlowUiButtonGroup;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-button': FlowUiButton;
    }
}

/**
 * @tagname flow-ui-input
 * @summary Inputs collect data from the user.
 * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/input
 * @status stable
 * @since 2.0
 *
 * @dependency flow-ui-divider
 * @dependency flow-ui-icon
 * @dependency flow-ui-icon-button
 *
 * @slot label - The input's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the input.
 * @slot suffix - Used to append a presentational icon or similar element to the input.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot show-password-icon - An icon to use in lieu of the default show password icon.
 * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 *
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-change - Emitted when an alteration to the control's value is committed by the user.
 * @event flow-ui-clear - Emitted when the clear button is activated.
 * @event flow-ui-focus - Emitted when the control gains focus.
 * @event flow-ui-input - Emitted when the control receives input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The input's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart base - The component's base wrapper.
 * @csspart input - The internal `<input>` control.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart clear-button - The clear button.
 * @csspart password-toggle-button - The password toggle button.
 * @csspart suffix - The container that wraps the suffix.
 */
declare class FlowUiInput extends FlowRdfFormControl {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon | typeof FlowUiIconButton | typeof FlowUiDivider)[];
    private readonly formControlController;
    private readonly hasSlotController;
    private readonly localize;
    private _numberFormatter;
    /** @internal */
    input: HTMLInputElement;
    private hasFocus;
    /** @internal */
    title: string;
    /**
     * The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults
     * to `text`.
     */
    type: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
    /** The name of the input, submitted as a name/value pair with form data. */
    name: string;
    /** The current value of the input, submitted as a name/value pair with form data. */
    value: string;
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultValue: string;
    /** The input's size. */
    size: 'small' | 'medium' | 'large';
    /** Draws a filled input. */
    filled: boolean;
    /** Draws a pill-style input with rounded edges. */
    pill: boolean;
    /** The input's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** Adds a clear button when the input is not empty. */
    clearable: boolean;
    /** Disables the input. */
    disabled: boolean;
    /** Placeholder text to show as a hint when the input is empty. */
    placeholder: string;
    /** Number format to use for input controls with `type="number"`. (D3 format string) */
    format: string;
    /** Makes the input readonly. */
    readonly: boolean;
    /** Adds a button to toggle the password's visibility. Only applies to password types. */
    passwordToggle: boolean;
    /** Determines whether or not the password is currently visible. Only applies to password input types. */
    passwordVisible: boolean;
    /** Hides the increment/decrement step buttons for number inputs. */
    noStepButtons: boolean;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Makes the input a required field. */
    required: boolean;
    /** A regular expression pattern to validate input against. */
    pattern: string;
    /** The minimum length of input that will be considered valid. */
    minlength: number;
    /** The maximum length of input that will be considered valid. */
    maxlength: number;
    /** The input's minimum value. Only applies to date and number input types. */
    min: number | string;
    /** The input's maximum value. Only applies to date and number input types. */
    max: number | string;
    /**
     * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
     * implied, allowing any numeric value. Only applies to date and number input types.
     */
    step: number | 'any';
    /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
    autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
    /** Indicates whether the browser's autocorrect feature is on or off. */
    autocorrect: 'off' | 'on';
    /**
     * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
     * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
     */
    autocomplete: string;
    /** Indicates that the input should receive focus on page load. */
    autofocus: boolean;
    /** Used to customize the label or icon of the Enter key on virtual keyboards. */
    enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
    /** Enables spell checking on the input. */
    spellcheck: boolean;
    /**
     * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
     * keyboard on supportive devices.
     */
    inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
    /**
     * Display the input in the 'inline' form control style.
     */
    inline: boolean;
    /** Indicates that the control should display a divider */
    divider: boolean;
    connectedCallback(): void;
    /** @internal */
    handleFormatChange(): void;
    /** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. */
    get valueAsDate(): Date | null;
    set valueAsDate(newValue: Date | null);
    /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
    get valueAsNumber(): number;
    set valueAsNumber(newValue: number);
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    firstUpdated(): void;
    private handleBlur;
    private handleChange;
    private handleClearClick;
    private handleFocus;
    private handleInput;
    private handleInvalid;
    private handleKeyDown;
    private handlePasswordToggle;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleStepChange(): void;
    /** @internal */
    handleValueChange(): Promise<void>;
    /** Sets focus on the input. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the input. */
    blur(): void;
    /** Selects all the text in the input. */
    select(): void;
    /** Sets the start and end positions of the text selection (0-based). */
    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): void;
    /** Replaces a range of text with a new string. */
    setRangeText(replacement: string, start?: number, end?: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
    /** Displays the browser picker for an input element (only works if the browser supports it for the input type). */
    showPicker(): void;
    /** Increments the value of a numeric input type by the value of the step attribute. */
    stepUp(): void;
    /** Decrements the value of a numeric input type by the value of the step attribute. */
    stepDown(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    private fromDisplayValue;
    private toDisplayValue;
    /** Value to use for input sizer in inline mode */
    private toSizeValue;
    private clampValue;
    render(): lit_html.TemplateResult<1>;
}

/**
 * @tagname flow-ui-option
 * @summary Options define the selectable items within various form controls such as [select](./flow-ui-select).
 *
 * @dependency flow-ui-icon
 *
 * @slot - The option's label.
 * @slot prefix - Used to prepend an icon or similar element to the menu item.
 * @slot suffix - Used to append an icon or similar element to the menu item.
 *
 * @csspart checked-icon - The checked icon, a `<flow-ui-icon>` element.
 * @csspart base - The component's base wrapper.
 * @csspart label - The option's label.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart suffix - The container that wraps the suffix.
 */
declare class FlowUiOption extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon)[];
    private cachedTextLabel;
    private readonly localize;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal */
    current: boolean;
    /** @internal */
    selected: boolean;
    /** @internal */
    hasHover: boolean;
    /**
     * The option's value. When selected, the containing form control will receive this value. The value must be unique
     * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
     * multiple values.
     */
    value: string;
    /** Draws the option in a disabled state, preventing selection. */
    disabled: boolean;
    /** The options's size. */
    size: 'small' | 'medium' | 'large';
    connectedCallback(): void;
    private handleDefaultSlotChange;
    private handleMouseEnter;
    private handleMouseLeave;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleSelectedChange(): void;
    /** @internal */
    handleValueChange(): void;
    /** @internal Returns a plain text label based on the option's content. */
    getTextLabel(): string;
    render(): lit_html.TemplateResult<1>;
}

/**
 * @tagname flow-ui-tag
 * @summary Tags are used as labels to organize things or to indicate a selection.
 *
 * @dependency flow-ui-icon-button
 *
 * @slot - The tag's content.
 *
 * @event flow-ui-remove - Emitted when the remove button is activated.
 *
 * @csspart base - The component's base wrapper.
 * @csspart content - The tag's content.
 * @csspart remove-button - The tag's remove button, an `<flow-ui-icon-button>`.
 * @csspart remove-button__base - The remove button's exported `base` part.
 */
declare class FlowUiTag extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIconButton)[];
    private readonly localize;
    /** The tag's theme variant. */
    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
    /** The tag's size. */
    size: 'small' | 'medium' | 'large';
    /** Draws a pill-style tag with rounded edges. */
    pill: boolean;
    /** Makes the tag removable and shows a remove button. */
    removable: boolean;
    connectedCallback(): void;
    private handleRemoveClick;
    render(): lit_html.TemplateResult<1>;
}

/**
 * @tagname flow-ui-select
 * @summary Selects allow you to choose items from a menu of predefined options.
 * @documentation https://shoelace.style/components/select
 * @status stable
 * @since 2.0
 *
 * @dependency flow-ui-divider
 * @dependency flow-ui-icon
 * @dependency flow-ui-popup
 * @dependency flow-ui-tag
 *
 * @slot - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.
 * @slot label - The input's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
 * @slot suffix - Used to append a presentational icon or similar element to the combobox.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 *
 * @event flow-ui-change - Emitted when the control's value changes.
 * @event flow-ui-clear - Emitted when the control's value is cleared.
 * @event flow-ui-input - Emitted when the control receives input.
 * @event flow-ui-focus - Emitted when the control gains focus.
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-show - Emitted when the select's menu opens.
 * @event flow-ui-after-show - Emitted after the select's menu opens and all animations are complete.
 * @event flow-ui-hide - Emitted when the select's menu closes.
 * @event flow-ui-after-hide - Emitted after the select's menu closes and all animations are complete.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The select's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
 * @csspart prefix - The container that wraps the prefix slot.
 * @csspart suffix - The container that wraps the suffix slot.
 * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
 * @csspart listbox - The listbox container where options are slotted.
 * @csspart tags - The container that houses option tags when `multiselect` is used.
 * @csspart tag - The individual tags that represent each multiselect option.
 * @csspart tag__base - The tag's base part.
 * @csspart tag__content - The tag's content part.
 * @csspart tag__remove-button - The tag's remove button.
 * @csspart tag__remove-button__base - The tag's remove button base part.
 * @csspart clear-button - The clear button.
 * @csspart expand-icon - The container that wraps the expand icon.
 */
declare class FlowUiSelect extends FlowRdfFormControl {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon | typeof FlowUiPopup | typeof FlowUiTag | typeof FlowUiDivider)[];
    private readonly formControlController;
    private readonly hasSlotController;
    private readonly localize;
    private typeToSelectString;
    private typeToSelectTimeout;
    private closeWatcher;
    private mutationObserver;
    private mouseDownAt;
    private popup;
    private displayInput;
    private valueInput;
    private listbox;
    private hasFocus;
    private displayLabel;
    private currentOption;
    private selectedOptions;
    /** The name of the select, submitted as a name/value pair with form data. */
    name: string;
    /**
     * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
     * value attribute will be a space-delimited list of values based on the options selected, and the value property will
     * be an array. **For this reason, values must not contain spaces.**
     */
    value: string | string[];
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultValue: string | string[];
    /** The select's size. */
    size: 'small' | 'medium' | 'large';
    /** Placeholder text to show as a hint when the select is empty. */
    placeholder: string;
    /** Allows more than one option to be selected. */
    multiple: boolean;
    /**
     * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
     * indicate the number of additional items that are selected. Set to 0 to remove the limit.
     */
    maxOptionsVisible: number;
    /** Disables the select control. */
    disabled: boolean;
    /** Adds a clear button when the select is not empty. */
    clearable: boolean;
    /**
     * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can
     * use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
     */
    open: boolean;
    /** Draws a filled input. */
    filled: boolean;
    /**
     * Display the select in the 'inline' form control style.
     */
    inline: boolean;
    /**
     * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
     */
    hoist: boolean;
    /** Draws a pill-style select with rounded edges. */
    pill: boolean;
    /** The select's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /**
     * The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox
     * inside of the viewport.
     */
    placement: 'top' | 'bottom';
    sync: 'width' | 'none';
    /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** The select's required attribute. */
    required: boolean;
    /** @internal Indicates that a divider should be displayed below the control. */
    divider: boolean;
    /**
     * A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second
     * is the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at
     * the specified value.
     */
    getTag: (option: FlowUiOption, index: number) => TemplateResult | string | HTMLElement;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private addOpenListeners;
    private removeOpenListeners;
    private handleFocus;
    private handleBlur;
    private handleDocumentFocusIn;
    private handleDocumentKeyDown;
    private handleDocumentMouseDown;
    private handleLabelClick;
    private handleComboboxMouseDown;
    private handleComboboxKeyDown;
    private handleClearClick;
    private handleClearMouseDown;
    private handleOptionClick;
    private handleDefaultSlotChange;
    private handleTagRemove;
    private getAllOptions;
    private getFirstOption;
    private setCurrentOption;
    private setSelectedOptions;
    private toggleOptionSelection;
    private selectionChanged;
    protected get tags(): TemplateResult<1>[];
    private handleInvalid;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleValueChange(): void;
    /** @internal */
    handleSizeChange(): void;
    /** @internal */
    handleOpenChange(): Promise<void>;
    private syncOptions;
    /** Shows the listbox. */
    show(): Promise<void>;
    /** Hides the listbox. */
    hide(): Promise<void>;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    /** Sets focus on the control. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the control. */
    blur(): void;
    render(): TemplateResult<1>;
}

/**
 * The calendar component is used to select a date, a time or both. It is also used in the popups of the
 * [date time picker](./flow-ui-date-time-picker) and [timer](./flow-ui-timer) components.
 *
 * Set `range` to select a range instead of a single value. The type of range depends on `display-mode`:
 *
 * - `date` - A range of days.
 * - `datetime` - A range of days with a start time and an end time.
 * - `time` - A range of times within a single day.
 *
 * In range mode, the value is not updated and no events are emitted until both ends of the range have been selected.
 *
 * Use `min`, `max` and `max-range` to restrict the dates that can be selected. Note that the calendar does not change
 * a value that is outside these limits.
 *
 * @tagname flow-ui-calendar
 * @summary Calendars allow users to select a date, time or date range.
 *
 * @dependency flow-ui-icon-button
 * @dependency flow-ui-input
 * @dependency flow-ui-option
 * @dependency flow-ui-select
 *
 * @event flow-ui-input - Emitted when the calendar value changes.
 * @event flow-ui-change - Emitted when the calendar value changes.
 *
 * @csspart base - The component's base wrapper.
 *
 * @cssproperty --width - The width of the calendar in CSS units, or of each month when `months` is `2`. Set
 *   automatically if `size` is set.
 * @cssproperty --font-size - The font size of the calendar. Set automatically if `size` is set.
 * @cssproperty --day-font-size - The font size of the day labels. Set automatically if `size` is set.
 *
 */
declare class FlowUiCalendar extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIconButton | typeof FlowUiOption | typeof FlowUiSelect | typeof FlowUiInput)[];
    private _monthSelect;
    private _yearSelect;
    private _displayDate;
    private _selectedDate?;
    /** The selected date range in range mode (half-open, in whole days). */
    private _selectedRange?;
    /** The first day the user clicked in a range that isn't complete yet. It may become the range start or the last day. */
    private _pendingDay?;
    /** The day that the pointer or focus is on while a range is pending, used for the hover preview. */
    private _hoverDate?;
    /** The start time of a datetime range, on the range start. */
    private _startTime;
    /** The end time of a datetime range, on the last day. 24:00:00 is the end of the last day. */
    private _endTime;
    private readonly localize;
    /**
     * The value of the control. (ISO8601 date/time string) In range mode, the value is an ISO8601 interval string
     * (`<start>/<end>`) and the end is exclusive. For example, the date range October 1 to October 2 has the value
     * `2026-10-01T00:00:00.000+01:00/2026-10-03T00:00:00.000+01:00`.
     */
    value: string;
    /** The display mode: date only, time only, or both date and time. */
    displayMode: 'date' | 'time' | 'datetime';
    /** Set to `true` to select a date, datetime or time range instead of a single value, depending on `display-mode`. */
    range: boolean;
    /** Set the timezone for display. If not set the default timezone will be used. (TZ name e.g. `'Europe/London'`) */
    timezone?: string;
    /** Set the locale for display. If not set the default locale will be used. (e.g `'en-GB'`) */
    locale?: string;
    /** Set the size of the calendar. */
    size: 'small' | 'medium' | 'large';
    /** The number of months to show side by side. */
    months: 1 | 2;
    /**
     * The earliest date that can be selected. (ISO8601 date or date/time string) Note that `min` is ignored when
     * `display-mode` is `time`.
     */
    min?: string;
    /**
     * The latest date that can be selected. (ISO8601 date or date/time string) Note that `max` is ignored when
     * `display-mode` is `time`.
     */
    max?: string;
    /**
     * The maximum length of a range. (Duration string, e.g. `'7 days'` or `'1 month'`) Supported units are milliseconds,
     * seconds, minutes, hours, days, weeks and months.
     */
    maxRange?: string;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /** The number of months shown. Anything other than `2` shows one month. */
    private get monthCount();
    /** Whether the calendar selects a range: a date range, a datetime range or a time range. */
    private get isRangeMode();
    /** Whether the calendar selects a datetime range, with start and end times. */
    private get isDateTimeRangeMode();
    /** Whether the calendar selects a time range: start and end times, with no days. */
    private get isTimeRangeMode();
    /** The parsed `min`, `max` and `max-range`, in the calendar's timezone. There are no limits in time display mode. */
    private get limits();
    /**
     * Whether the user can't select `day` (the start of a day): it is outside `min` or `max`, or, while a range is
     * pending, it would make the range longer than `max-range`.
     */
    private isDayDisabled;
    /** Clamp a date and time to `min` and `max`, so that the time inputs can't select a time outside the limits. */
    private clampToLimits;
    /** The first and last months the user can navigate to, as the start of each month, if `min` or `max` is set. */
    private get monthLimits();
    /** Clamp a month to the months the user can navigate to. */
    private clampMonth;
    /** @internal */
    handleValueChange(): void;
    private handleRangeValueChange;
    /**
     * Show the month of `date` as the first month. In the two-month view, a date in the second month is already shown,
     * so the display doesn't move.
     */
    private showMonthOf;
    /** @internal */
    handleTimezoneChange(): void;
    /** @internal */
    handleRangeChange(): void;
    /** @internal */
    handleDisplayModeChange(): void;
    private dateClicked;
    /**
     * Handle a day click in range mode. The first click sets the pending day. The second click completes the range,
     * whichever order the two days were clicked in, so the user can click the last day first and then go back to the
     * range start.
     */
    private rangeDateClicked;
    /** Whether `max-range` only allows ranges of one day starting on `day`, so that a range is a single day. */
    private isSingleDayOnly;
    /** Complete a range from `first` to `last` (both the start of a day) and update the value. */
    private completeRange;
    /**
     * The datetime range from the start time on `first` to the end time on `last` (both the start of a day), clamped to
     * `min` and `max`. If the times would make the range empty, for example an end time before the start time on a
     * single day, the end time is reset to 24:00:00. If the range would be longer than `max-range`, the end is moved
     * back.
     */
    private makeDateTimeRange;
    private dayHovered;
    /**
     * Discard a pending range, so that the user can click a new range start. The value is unchanged. Returns `true` if a
     * range was pending.
     *
     * @internal
     */
    cancelPendingRange(): boolean;
    private handleKeyDown;
    private clearPendingRange;
    private stepDisplayDate;
    /**
     * Generate a list of years for the year select dropdown, newest first. With no limits, the years are from next year
     * to six years ago. With `min` or `max`, the list starts or ends at their years, and always includes the year shown.
     */
    private yearOptions;
    private makeDate;
    /**
     * Parse an ISO8601 interval string. In date mode, the interval is widened to whole days in the calendar's timezone:
     * the start is rounded down to the start of its day and the end is rounded up to the start of the next day. An
     * invalid or empty interval gives `undefined`.
     */
    private makeRange;
    /**
     * The days to highlight in range mode: the hover preview while a range is pending, otherwise the selected range.
     */
    private highlightedDays;
    private updateValue;
    private handleHeaderSelectChange;
    private handleTimeChange;
    /**
     * Handle a change in the Start or End row of a datetime range or a time range. In a datetime range, the start time
     * applies to the range start and the end time to the last day. The edited time can't pass the other one, so the range
     * is never empty.
     */
    private handleRangeTimeChange;
    /**
     * The header for the month at `index`. The first month has the month and year selects and the second month has a
     * static label. The previous button is on the first month and the next button on the last. In the two-month view, a
     * hidden button takes the place of each missing button, so the month label stays centered.
     */
    private calendarHeaderTemplate;
    private headerSelectsTemplate;
    /** Whether a month of the year shown is outside the months the user can navigate to. */
    private isMonthDisabled;
    private dayOfWeekGridTemplate;
    /**
     * The days shown in the grid for a month, including the filler days from the adjacent months that complete the
     * first and last weeks. In the two-month view, the filler days between the two months are hidden, because the other
     * month shows them.
     */
    private daysForMonth;
    private dayGridTemplate;
    private monthTemplate;
    private handleGridMouseLeave;
    /** The hour, minute and second inputs for `time`. */
    private timeInputsTemplate;
    /**
     * The time inputs: one row in single mode, or the Start and End rows of a datetime range or a time range. The Start
     * and End rows are stacked, except in a datetime range in the two-month view.
     */
    private timeTemplate;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-calendar': FlowUiCalendar;
    }
}

/**
 * @tagname flow-ui-card
 * @summary Cards can be used to group related subjects in a container.
 *
 * @slot - The card's main content.
 * @slot header - An optional header for the card.
 * @slot footer - An optional footer for the card.
 * @slot image - An optional image to render at the start of the card.
 *
 * @csspart base - The component's base wrapper.
 * @csspart image - The container that wraps the card's image.
 * @csspart header - The container that wraps the card's header.
 * @csspart body - The container that wraps the card's main content.
 * @csspart footer - The container that wraps the card's footer.
 *
 * @cssproperty --border-color - The card's border color, including borders that occur inside the card.
 * @cssproperty --border-radius - The border radius for the card's edges.
 * @cssproperty --border-width - The width of the card's borders.
 * @cssproperty --padding - The padding to use for the card's sections.
 */
declare class FlowUiCard extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    title: string;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-card': FlowUiCard;
    }
}

/**
 * @tagname flow-ui-carousel
 * @summary Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
 * @docgroup carousel
 *
 * @since 2.2
 * @status experimental
 *
 * @dependency flow-ui-icon
 *
 * @event {{ index: number, slide: FlowCarouselItem }} flow-ui-slide-change - Emitted when the active slide changes.
 *
 * @slot - The carousel's main content, one or more `<flow-ui-carousel-item>` elements.
 * @slot next-icon - Optional next icon to use instead of the default. Works best with `<flow-ui-icon>`.
 * @slot previous-icon - Optional previous icon to use instead of the default. Works best with `<flow-ui-icon>`.
 *
 * @csspart base - The carousel's internal wrapper.
 * @csspart scroll-container - The scroll container that wraps the slides.
 * @csspart pagination - The pagination indicators wrapper.
 * @csspart pagination-item - The pagination indicator.
 * @csspart pagination-item--active - Applied when the item is active.
 * @csspart navigation - The navigation wrapper.
 * @csspart navigation-button - The navigation button.
 * @csspart navigation-button--previous - Applied to the previous button.
 * @csspart navigation-button--next - Applied to the next button.
 *
 * @cssproperty --slide-gap - The space between each slide.
 * @cssproperty --aspect-ratio - The aspect ratio of each slide.
 * @cssproperty --scroll-hint - The amount of padding to apply to the scroll area, allowing adjacent slides to become
 *  partially visible as a scroll hint.
 */
declare class FlowUiCarousel extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon)[];
    /** Set to `true` to allow the user to navigate the carousel in the same direction indefinitely. */
    loop: boolean;
    /** Set to `true` to show the carousel's navigation. */
    navigation: boolean;
    /** Set to `true` to show the carousel's pagination indicators. */
    pagination: boolean;
    /** Set to `true` to automatically advance the carousel.  */
    autoplay: boolean;
    /** Specifies the amount of time (in ms) between each automatic scroll.  */
    autoplayInterval: number;
    /** Specifies how many slides should be shown at a given time.  */
    slidesPerPage: number;
    /**
     * Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page`
     * greater than one.
     */
    slidesPerMove: number;
    /** Specifies the orientation in which the carousel will lay out.  */
    orientation: 'horizontal' | 'vertical';
    /** When set, it is possible to scroll through the slides by dragging them with the mouse. */
    mouseDragging: boolean;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal */
    scrollContainer: HTMLElement;
    /** @internal */
    paginationContainer: HTMLElement;
    private activeSlide;
    private autoplayController;
    private scrollController;
    private readonly slides;
    private intersectionObserver;
    private readonly intersectionObserverEntries;
    private readonly localize;
    private mutationObserver;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected firstUpdated(): void;
    private getPageCount;
    private getCurrentPage;
    private getSlides;
    private handleKeyDown;
    private handleScrollEnd;
    private handleSlotChange;
    /** @internal */
    initializeSlides(): void;
    /** @internal */
    handelSlideChange(): void;
    /** @internal */
    handleSlidesPerMoveChange(): void;
    /** @internal */
    handleAutoplayChange(): void;
    /** @internal */
    handleMouseDraggingChange(): void;
    /**
     * Move the carousel backward by `slides-per-move` slides.
     *
     * @param behavior - The behavior used for scrolling.
     */
    previous(behavior?: ScrollBehavior): void;
    /**
     * Move the carousel forward by `slides-per-move` slides.
     *
     * @param behavior - The behavior used for scrolling.
     */
    next(behavior?: ScrollBehavior): void;
    /**
     * Scrolls the carousel to the slide specified by `index`.
     *
     * @param index - The slide index.
     * @param behavior - The behavior used for scrolling.
     */
    goToSlide(index: number, behavior?: ScrollBehavior): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-carousel': FlowUiCarousel;
    }
}

/**
 * The chart component is a container for [Chart.js](https://www.chartjs.org/) charts. The component
 * supplies additional Flow RDF UI features including:
 *
 * - Consistent theming with other flow-rdf-ui components.
 * - Additional plugins and charts types for commonly-used charts.
 * @tagname flow-ui-chart
 * @summary The chart component displays Chart.js charts.
 *
 * @slot title - The chart's title. Alternatively, you can use the `title` attribute.
 *
 * @cssproperty --background-color - Chart background color (applied as the background color of the base container).
 * @cssproperty --text-color - General text color (titles etc.)
 * @cssproperty --axis-color - Color of the axis lines.
 * @cssproperty --x-axis-color - Color of the x-axis lines. (defaults to `--axis-color`)
 * @cssproperty --y-axis-color - Color of the y-axis lines. (defaults to `--axis-color`)
 * @cssproperty --axis-grid-color - Color of the axis grid lines.
 * @cssproperty --x-axis-grid-color - Color of the x-axis grid lines. (defaults to `--axis-grid-color`)
 * @cssproperty --y-axis-grid-color - Color of the y-axis grid lines. (defaults to `--axis-grid-color`)
 * @cssproperty --axis-label-color - Color of the axis labels.
 * @cssproperty --x-axis-label-color - Color of the x-axis labels. (defaults to `--axis-label-color`)
 * @cssproperty --y-axis-label-color - Color of the y-axis labels. (defaults to `--axis-label-color`)
 * @cssproperty --tick-label-color - Color of the tick labels.
 * @cssproperty --x-tick-label-color - Color of the x-axis tick labels. (defaults to `--tick-label-color`)
 * @cssproperty --y-tick-label-color - Color of the y-axis tick labels. (defaults to `--tick-label-color`)
 * @cssproperty --dataset-stroke-color-n - Color of the stroke for dataset n (where n = 0-9).
 * @cssproperty --dataset-fill-color-n - Color of the fill for dataset n (where n = 0-9).
 *
 * @cssproperty --header-padding - Chart header padding.
 * @cssproperty --header-height - Chart header height.
 * @cssproperty --header-font-size - Chart header font size.
 * @cssproperty --header-color - Chart header text color.
 *
 * @csspart header - The header container of the chart.
 * @csspart title - The chart title placed in the header.
 */
declare class FlowUiChart extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    private _chartRef;
    private _chart;
    /** The Chart.js chart instance. */
    get chart(): Chart<keyof ChartTypeRegistry, (number | [number, number] | chart_js.Point | chart_js.BubbleDataPoint | chartjs_chart_matrix.MatrixDataPoint | null)[], unknown>;
    /** A label displayed in the chart's header. If you need to display HTML, use the `label` slot instead. */
    title: string;
    /** The Chart.js chart type (e.g `line`, `bar` or a custom type). */
    type: string;
    /** The Chart.js `options` object. */
    options: ChartOptions;
    /** The Chart.js `data` object */
    data: ChartData;
    /** List of extra plugins to use for this chart. */
    plugins: Plugin[];
    /** Trigger a repaint of the chart. */
    repaint(): void;
    connectedCallback(): Promise<void>;
    disconnectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-chart': FlowUiChart;
    }
}

interface FormControlControllerOptions {
    /** A function that returns the form containing the form control. */
    form: (input: FlowRdfFormControl) => HTMLFormElement | null;
    /** A function that returns the form control's name, which will be submitted with the form data. */
    name: (input: FlowRdfFormControl) => string;
    /** A function that returns the form control's current value. */
    value: (input: FlowRdfFormControl) => unknown | unknown[];
    /** A function that returns the form control's default value. */
    defaultValue: (input: FlowRdfFormControl) => unknown | unknown[];
    /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */
    disabled: (input: FlowRdfFormControl) => boolean;
    /**
     * A function that maps to the form control's reportValidity() function. When the control is invalid, this will
     * prevent submission and trigger the browser's constraint violation warning.
     */
    reportValidity: (input: FlowRdfFormControl) => boolean;
    /** A function that sets the form control's value */
    setValue: (input: FlowRdfFormControl, value: unknown) => void;
    /**
     * An array of event names to listen to. When all events in the list are emitted, the control will receive validity
     * states such as user-valid and user-invalid.user interacted validity states. */
    assumeInteractionOn: string[];
}
/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
declare class FormControlController implements ReactiveController {
    host: FlowRdfFormControl & ReactiveControllerHost;
    form?: HTMLFormElement | null;
    options: FormControlControllerOptions;
    constructor(host: ReactiveControllerHost & FlowRdfFormControl, options?: Partial<FormControlControllerOptions>);
    hostConnected(): void;
    hostDisconnected(): void;
    hostUpdated(): void;
    private attachForm;
    private detachForm;
    private handleFormData;
    private handleFormSubmit;
    private handleFormReset;
    private handleInteraction;
    private reportFormValidity;
    private setUserInteracted;
    private doAction;
    /** Returns the associated `<form>` element, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Resets the form, restoring all the control to their default value */
    reset(submitter?: HTMLInputElement | FlowUiButton): void;
    /** Submits the form, triggering validation and form data injection. */
    submit(submitter?: HTMLInputElement | FlowUiButton): void;
    /**
     * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
     * the host element immediately, i.e. before Lit updates the component in the next update.
     */
    setValidity(isValid: boolean): void;
    /**
     * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
     * that affects constraint validation changes so the component receives the correct validity states.
     */
    updateValidity(): void;
    /**
     * Dispatches a non-bubbling, cancelable custom event of type `flow-ui-invalid`.
     * If the `flow-ui-invalid` event will be cancelled then the original `invalid`
     * event (which may have been passed as argument) will also be cancelled.
     * If no original `invalid` event has been passed then the `flow-ui-invalid`
     * event will be cancelled before being dispatched.
     */
    emitInvalidEvent(originalInvalidEvent?: Event): void;
}

/**
 * The checkbox group component's value is an array of the values of its checked checkboxes. Set the `value`
 * attribute to a space-separated list of values to check the matching checkboxes.
 *
 * @tagname flow-ui-checkbox-group
 * @summary Checkbox groups are used to group multiple [checkboxes](./flow-ui-checkbox) so they function as a single form control.
 *
 * @dependency flow-ui-divider
 *
 * @slot - The default slot where `<flow-ui-checkbox>` elements are placed.
 * @slot label - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label`
 *  attribute.
 * @slot help-text - The checkbox group's help text. Alternatively, you can use the `help-text` attribute.
 *
 * @event flow-ui-change - Emitted when the checkbox group's value changes by UI interaction.
 * @event flow-ui-input - Emitted when the checkbox group receives user input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The input's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 */
declare class FlowUiCheckboxGroup extends FlowRdfFormControl {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiDivider)[];
    protected readonly formControlController: FormControlController;
    private readonly hasSlotController;
    private customValidityMessage;
    private validationTimeout;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal */
    validationInput: HTMLInputElement;
    private errorMessage;
    /** @internal */
    defaultValue: string[];
    /**
     * The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
     * instead.
     */
    label: string;
    /** The checkbox group's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** The name of the checkbox group, submitted as a name/value pair with form data. */
    name: string;
    /** The values of the checked checkboxes. (Space-separated list when set as an attribute) */
    value: string[];
    /** The checkbox group's size. This size will be applied to all child checkboxes. */
    size: 'small' | 'medium' | 'large';
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Makes the checkbox group a required field. */
    required: boolean;
    /** Set to `true` to display the child checkboxes in a reversed style with a left-aligned label. */
    reverse: boolean;
    /** Set to `true` to display a divider below the control. */
    divider: boolean;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    firstUpdated(): void;
    private getAllCheckboxes;
    private handleCheckboxClick;
    private handleLabelClick;
    private handleInvalid;
    private syncCheckboxes;
    private updateCheckedState;
    /** @internal */
    handleStyleChange(): void;
    /** @internal */
    handleValueChange(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message?: string): void;
    /** Stop propagation of flow-ui-input and flow-ui-change from child checkboxes */
    handleChildEvents(event: Event): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-checkbox-group': FlowUiCheckboxGroup;
    }
}

/**
 * @tagname flow-ui-checkbox
 * @summary Checkboxes allow the user to toggle an option on or off.

 *
 * @dependency flow-ui-icon
 *
 * @slot - The checkbox's label.
 *
 * @event flow-ui-blur - Emitted when the checkbox loses focus.
 * @event flow-ui-change - Emitted when the checked state changes.
 * @event flow-ui-focus - Emitted when the checkbox gains focus.
 * @event flow-ui-input - Emitted when the checkbox receives input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart base - The component's base wrapper.
 * @csspart control - The square container that wraps the checkbox's checked state.
 * @csspart control--checked - Matches the control part when the checkbox is checked.
 * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
 * @csspart checked-icon - The checked icon, an `<flow-ui-icon>` element.
 * @csspart indeterminate-icon - The indeterminate icon, an `<flow-ui-icon>` element.
 * @csspart label - The container that wraps the checkbox's label.
 */
declare class FlowUiCheckbox extends FlowRdfFormControl {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon)[];
    private readonly hasSlotController;
    private readonly formControlController;
    private input;
    private hasFocus;
    /** @internal */
    label: string;
    /** The name of the checkbox, submitted as a name/value pair with form data. */
    name: string;
    /** The current value of the checkbox. */
    value: string;
    /** The checkbox's size. */
    size: 'small' | 'medium' | 'large';
    /** Disables the checkbox. */
    disabled: boolean;
    /** Draws the checkbox in a checked state. */
    checked: boolean;
    /**
     * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
     * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
     */
    indeterminate: boolean;
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultChecked: boolean;
    /** Display the checkbox using a reversed style with left-aligned label. */
    reverse: boolean;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Makes the checkbox a required field. */
    required: boolean;
    connectedCallback(): void;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    firstUpdated(): void;
    private handleClick;
    private handleBlur;
    private handleInput;
    private handleInvalid;
    private handleFocus;
    /** @internal  */
    handleDisabledChange(): void;
    /** @internal  */
    handleStateChange(): void;
    /** Simulates a click on the checkbox. */
    click(): void;
    /** Sets focus on the checkbox. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the checkbox. */
    blur(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /**
     * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
     * the custom validation message, call this method with an empty string.
     */
    setCustomValidity(message: string): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-checkbox': FlowUiCheckbox;
    }
}

/**
 * @tagname flow-ui-visually-hidden
 * @summary The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
 *
 * @slot - The content to be visually hidden.
 */
declare class FlowUiVisuallyHidden extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    render(): lit_html.TemplateResult<1>;
}

/**
 * @tagname flow-ui-color-picker
 * @summary Color pickers allow the user to select a color.

 *
 * @dependency flow-ui-button
 * @dependency flow-ui-button-group
 * @dependency flow-ui-dropdown
 * @dependency flow-ui-icon
 * @dependency flow-ui-input
 * @dependency flow-ui-visually-hidden
 *
 * @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.
 *
 * @event flow-ui-blur - Emitted when the color picker loses focus.
 * @event flow-ui-change - Emitted when the color picker's value changes.
 * @event flow-ui-focus - Emitted when the color picker receives focus.
 * @event flow-ui-input - Emitted when the color picker receives input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart base - The component's base wrapper.
 * @csspart trigger - The color picker's dropdown trigger.
 * @csspart swatches - The container that holds the swatches.
 * @csspart swatch - Each individual swatch.
 * @csspart grid - The color grid.
 * @csspart grid-handle - The color grid's handle.
 * @csspart slider - Hue and opacity sliders.
 * @csspart slider-handle - Hue and opacity slider handles.
 * @csspart hue-slider - The hue slider.
 * @csspart hue-slider-handle - The hue slider's handle.
 * @csspart opacity-slider - The opacity slider.
 * @csspart opacity-slider-handle - The opacity slider's handle.
 * @csspart preview - The preview color.
 * @csspart input - The text input.
 * @csspart eye-dropper-button - The eye dropper button.
 * @csspart eye-dropper-button__base - The eye dropper button's exported `button` part.
 * @csspart eye-dropper-button__prefix - The eye dropper button's exported `prefix` part.
 * @csspart eye-dropper-button__label - The eye dropper button's exported `label` part.
 * @csspart eye-dropper-button__suffix - The eye dropper button's exported `suffix` part.
 * @csspart eye-dropper-button__caret - The eye dropper button's exported `caret` part.
 * @csspart format-button - The format button.
 * @csspart format-button__base - The format button's exported `button` part.
 * @csspart format-button__prefix - The format button's exported `prefix` part.
 * @csspart format-button__label - The format button's exported `label` part.
 * @csspart format-button__suffix - The format button's exported `suffix` part.
 * @csspart format-button__caret - The format button's exported `caret` part.
 *
 * @cssproperty --grid-width - The width of the color grid.
 * @cssproperty --grid-height - The height of the color grid.
 * @cssproperty --grid-handle-size - The size of the color grid's handle.
 * @cssproperty --slider-height - The height of the hue and alpha sliders.
 * @cssproperty --slider-handle-size - The diameter of the slider's handle.
 * @cssproperty --swatch-size - The size of each predefined color swatch.
 */
declare class FlowUiColorPicker extends FlowRdfFormControl {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon | typeof FlowUiButton | typeof FlowUiVisuallyHidden)[];
    private readonly formControlController;
    private isSafeValue;
    private readonly localize;
    private base;
    private input;
    private dropdown;
    private previewButton;
    private trigger;
    private hasFocus;
    private isDraggingGridHandle;
    private isEmpty;
    private inputValue;
    private hue;
    private saturation;
    private brightness;
    private alpha;
    /**
     * The current value of the color picker. The value's format will vary based the `format` attribute. To get the value
     * in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form
     * data.
     */
    value: string;
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultValue: string;
    /**
     * The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to
     * display HTML, you can use the `label` slot` instead.
     */
    label: string;
    /**
     * The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color
     * picker will accept user input in any format (including CSS color names) and convert it to the desired format.
     */
    format: 'hex' | 'rgb' | 'hsl' | 'hsv';
    /** Renders the color picker inline rather than in a dropdown. */
    inline: boolean;
    /** Determines the size of the color picker's trigger. This has no effect on inline color pickers. */
    size: 'small' | 'medium' | 'large';
    /** Removes the button that lets users toggle between format.   */
    noFormatToggle: boolean;
    /** The name of the form control, submitted as a name/value pair with form data. */
    name: string;
    /** Disables the color picker. */
    disabled: boolean;
    /**
     * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
     * inside of the viewport.
     */
    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
    /** The distance in pixels from which to offset the panel away from its trigger. */
    distance: number;
    /** The distance in pixels from which to offset the panel along its trigger. */
    skidding: number;
    /**
     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
     */
    hoist: boolean;
    /** Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA. */
    opacity: boolean;
    /** By default, values are lowercase. With this attribute, values will be uppercase instead. */
    uppercase: boolean;
    /**
     * One or more predefined color swatches to display as presets in the color picker. Can include any format the color
     * picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a
     * semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.
     */
    swatches: string | string[];
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Makes the color picker a required field. */
    required: boolean;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    disconnectedCallback(): void;
    firstUpdated(): void;
    private handleCopy;
    private handleFocusIn;
    private handleFocusOut;
    private handleFormatToggle;
    private handleAlphaDrag;
    private handleHueDrag;
    private handleGridDrag;
    private handleAlphaKeyDown;
    private handleHueKeyDown;
    private handleGridKeyDown;
    private handleInputChange;
    private handleInputInput;
    private handleInputKeyDown;
    private handleInputInvalid;
    private handleTouchMove;
    private parseColor;
    private setColor;
    private setLetterCase;
    private syncValues;
    private handleAfterHide;
    private handleEyeDropper;
    private selectSwatch;
    /** Generates a hex string from HSV values. Hue must be 0-360. All other arguments must be 0-100. */
    private getHexString;
    private stopNestedEventPropagation;
    /** @internal */
    handleFormatChange(): void;
    /** @internal  */
    handleOpacityChange(): void;
    /** @internal  */
    handleValueChange(oldValue: string | undefined, newValue: string): void;
    /** Sets focus on the color picker. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the color picker. */
    blur(): void;
    /** Returns the current value as a string in the specified format. */
    getFormattedValue(format?: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'): string;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    render(): lit_html.TemplateResult<1>;
}

/**
 * @tagname flow-ui-tool-button-group
 * @summary Tool buttons groups are used to build toolbars from [tool buttons](./flow-ui-tool-button).
 * @docgroup tool-button-group
 *
 * @dependency flow-ui-button-group
 *
 * @event flow-ui-change - Emitted when the control's value changes.
 * @event flow-ui-input - Emitted when the control receives input.
 */
declare class FlowUiToolButtonGroup extends FlowRdfFormControl {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiButtonGroup)[];
    /** @internal */
    protected readonly formControlController: FormControlController;
    private customValidityMessage;
    private validationTimeout;
    private validationInput;
    private errorMessage;
    /**
     * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
     * instead.
     */
    label: string;
    /** The name of the tool button group, submitted as a name/value pair with form data. */
    name: string;
    /**
     * The current value of the tool button group, submitted as a name/value pair with form data. When `checkbox` mode is enabled, the
     * value will be a space-delimited list of values based on the checked tool buttons.
     */
    value: string | string[];
    /** The radio group's size. This size will be applied to all child radios and radio buttons. */
    size: 'x-small' | 'small' | 'medium' | 'large';
    /** Draws pill-style tool buttons. This style will be applied to all child tool buttons. */
    pill: boolean;
    /** Draws outline-style tool buttons. This style will be applied to all child tool buttons. */
    outline: boolean;
    variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /**
     * Use vertical layout for the radio group.
     */
    vertical: boolean;
    mode: 'radio' | 'checkbox';
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    firstUpdated(): void;
    private getAllToolButtons;
    private handleButtonClick;
    private handleKeyDown;
    private handleInvalid;
    private syncButtons;
    private updateCheckedButtons;
    /** @internal */
    handleSizeChange(): void;
    /** @internal */
    handleOutlineChange(): void;
    /** @internal */
    handleVariantChange(): void;
    /** @internal */
    handlePillChange(): void;
    /** @internal */
    handleValueChange(): void;
    /** @internal */
    updateTabbableState(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message?: string): void;
    render(): lit_html.TemplateResult<1>;
}

/**
 * @tagname flow-ui-tool-button
 * @summary Tool buttons are used to build [toolbars](./flow-ui-tool-button-group). They can be used to toggle a state or perform an action.
 * @docgroup tool-button-group
 *
 * @dependency flow-ui-icon
 * @dependency flow-ui-tooltip
 *
 * @slot prefix - A presentational prefix icon or similar element.
 * @slot suffix - A presentational suffix icon or similar element.
 * @slot icon - The tool button's icon.
 * @slot tooltip - The tool button's tooltip content.
 *
 * @csspart base - The component's base wrapper.
 * @csspart button - The button element.
 * @csspart button--checked - The button element when checked.
 * @csspart tooltip - The tooltip element.
 * @csspart prefix - The prefix slot.
 * @csspart suffix - The suffix slot.
 * @csspart label-wrapper - The wrapper that contains the icon and label.
 * @csspart icon - The icon slot. Alternatively, you can use the `icon` attribute.
 * @csspart label - The button label.

 */
declare class FlowUiToolButton extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon | typeof FlowUiTooltip)[];
    private readonly hasSlotController;
    /** @internal */
    input: HTMLInputElement;
    /** @internal */
    hiddenInput: HTMLInputElement;
    protected hasFocus: boolean;
    /**
     * @internal The radio button's checked state. This is exposed as an "internal" attribute so we can reflect it, making
     * it easier to style in button groups.
     */
    checked: boolean;
    /** The radio's value. When selected, the radio group will receive this value. */
    value: string;
    /** Disables the radio button. */
    disabled: boolean;
    /**
     * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
     * this attribute can typically be omitted.
     */
    size: 'x-small' | 'small' | 'medium' | 'large';
    /** Draws a pill-style radio button with rounded edges. */
    pill: boolean;
    /** Draws an tool button with with an outline. */
    outline: boolean;
    /**
     * Tooltip text that gets displayed when the user hovers over the button. If you need to display HTML, use the
     * `tooltip` slot instead.
     */
    tooltip: string;
    /**
     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
     * inside of the viewport.
     */
    tooltipPlacement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
    /** The distance in pixels from which to offset the tooltip away from the button. */
    tooltipDistance: number;
    /** The distance in pixels from which to offset the tooltip along the button. */
    tooltipSkidding: number;
    /**
     * Specify an icon by name to display above the tool button label. Available names depend on the icon library being used.
     */
    icon?: string;
    /**
     * Specify an external SVG file to display as an icon above the tool button label.
     */
    iconSrc?: string;
    /**
     * The name of a registered custom icon library.
     */
    iconLibrary: string;
    variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
    connectedCallback(): void;
    private handleBlur;
    private handleClick;
    private handleFocus;
    /** @internal */
    handleDisabledChange(): void;
    /** Sets focus on the radio button. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the radio button. */
    blur(): void;
    private renderWithTooltip;
    render(): TemplateResult;
}

/**
 * @tagname flow-ui-color-stop
 * @summary A single color stop used by the `flow-ui-color-mapper` component.
 * @docgroup color-mapper
 *
 * @dependency flow-ui-color-picker
 * @dependency flow-ui-icon-button
 * @dependency flow-ui-input
 * @dependency flow-ui-option
 * @dependency flow-ui-select
 * @dependency flow-ui-tool-button
 * @dependency flow-ui-tool-button-group
 */
declare class FlowUiColorStop extends FlowRdfFormControl {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIconButton | typeof FlowUiOption | typeof FlowUiSelect | typeof FlowUiToolButton | typeof FlowUiToolButtonGroup | typeof FlowUiInput | typeof FlowUiColorPicker)[];
    private readonly formControlController;
    private input;
    private picker;
    private textOptions;
    /** The name of the color stop, submitted as a name/value pair with form data. */
    name: string;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Makes the color stop as a required field. */
    required: boolean;
    /** The color stop options object. */
    options: ColorStopOptions;
    /** The current value of the color stop component. */
    value: ColorStopValue;
    /** The size of the color stop component. */
    size: 'small' | 'medium' | 'large';
    /**
     * Set to `true` to display a placeholder color stop that
     * allows the user to add a new color stop.
     */
    placeholder: boolean;
    /**
     * Set to `true` to display a fixed color stop that allows the user
     * to select a fixed color in a color mapping.
     */
    fixed?: string;
    /**
     * One or more predefined color swatches to display as presets in the color picker. Can include any format the color
     * picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a
     * semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.
     */
    swatches: string | string[];
    connectedCallback(): void;
    /** Gets the validity state object. */
    get validity(): ValidityState;
    /** Gets the validation message. */
    get validationMessage(): "" | "Invalid regular expression";
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    private handleRemove;
    private handleChange;
    private emitChange;
    private validate;
    private textInputTemplate;
    private numberInputTemplate;
    private fixedInputTemplate;
    private selectInputTemplate;
    render(): lit_html.TemplateResult<1>;
}

/**
 * Which state a pane follower lays out in during a measuring pass: `open` shows all of it and `closed` only what it
 * shows while closed (a panel's header, a tab group's tab bar), whatever its `closed` state.
 *
 * @internal
 */
type ContentMeasuringMode = 'open' | 'closed';

/**
 * @tagname flow-ui-tab
 * @summary Tabs are used inside [tab groups](./flow-ui-tab-group) to represent and activate [tab panels](./flow-ui-tab-panel).
 * @docgroup tab-group
 *
 * @dependency flow-ui-icon-button
 * @dependency flow-ui-tooltip
 *
 * @slot - The tab's label.
 * @slot icon - An icon shown with the label, such as a `<flow-ui-icon>`. With `icon-only`, the tab shows only the icon
 * and the label is shown as a tooltip.
 *
 * @event flow-ui-close - Emitted when the tab is closable and the close button is activated.
 *
 * @csspart base - The component's base wrapper.
 * @csspart icon - The container of the `icon` slot.
 * @csspart label - The container of the label.
 * @csspart close-button - The close button, an `<flow-ui-icon-button>`.
 * @csspart close-button__base - The close button's exported `base` part.
 */
declare class FlowUiTab extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIconButton | typeof FlowUiTooltip)[];
    private readonly localize;
    private readonly hasSlotController;
    private readonly attrId;
    private readonly componentId;
    /** @internal */
    tab: HTMLElement;
    /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
    panel: string;
    /** Draws the tab in an active state. */
    active: boolean;
    /** Display tab icon only. Label text is displayed as a tooltip */
    iconOnly: boolean;
    /** Makes the tab closable and shows a close button. */
    closable: boolean;
    /** Disables the tab and prevents selection. */
    disabled: boolean;
    /** Full title of tab  */
    label: string;
    /** @internal
     * The placement of the tabs. This is set by the parent tab group.
     * */
    placement: 'top' | 'bottom' | 'start' | 'end';
    /**
     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
     * inside of the viewport.
     */
    tooltipPlacement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
    /** The distance in pixels from which to offset the tooltip away from the icon button. */
    tooltipDistance: number;
    /** The distance in pixels from which to offset the tooltip along the icon button. */
    tooltipSkidding: number;
    tabGroup?: FlowUiTabGroup;
    connectedCallback(): void;
    private handleCloseClick;
    /** @internal */
    handleActiveChange(): void;
    /** @internal */
    handleDisabledChange(): void;
    /** Sets focus to the tab. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the tab. */
    blur(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tab': FlowUiTab;
    }
}

/**
 * A closed tab group shows only its tab bar: the tabs and the nav accessories. In a
 * [split-view pane](./flow-ui-split-view-pane), it follows the pane's `closed` state, and with `closed-size="content"`
 * the pane closes to exactly the tab bar.
 *
 * @tagname flow-ui-tab-group
 * @summary Tab groups organize content into a container that shows one section at a time.
 * @docgroup tab-group
 *
 * @dependency flow-ui-divider
 * @dependency flow-ui-icon-button
 *
 * @slot - Used for grouping tab panels in the tab group. Must be `<flow-ui-tab-panel>` elements.
 * @slot nav - Used for grouping tabs in the tab group. Must be `<flow-ui-tab>` elements.
 * @slot nav-accessories-start - Content before the tabs in the tab bar, such as a split-view toggle button. Shown when
 * the tab group is closed.
 * @slot nav-accessories-end - Content after the tabs in the tab bar, such as icon buttons. Shown when the tab group is
 * closed.
 * @slot header - Content above the tab panels, such as an application title. Hidden when the tab group is closed.
 * @slot footer - Content below the tab panels. Hidden when the tab group is closed.
 *
 * @event {{ name: String }} flow-ui-tab-show - Emitted when a tab is shown.
 * @event {{ name: String }} flow-ui-tab-hide - Emitted when a tab is hidden.
 *
 * @csspart base - The component's base wrapper.
 * @csspart nav - The tab group's navigation container where tabs are slotted in.
 * @csspart tabs - The container that wraps the tabs.
 * @csspart active-tab-indicator - The line that highlights the currently selected tab.
 * @csspart nav-accessories-start - The container of the `nav-accessories-start` slot.
 * @csspart nav-accessories-end - The container of the `nav-accessories-end` slot.
 * @csspart accessory-divider - The dividers between the nav accessories and the tabs, `<flow-ui-divider>` elements.
 * @csspart header - The `header` slot.
 * @csspart body - The tab group's body where tab panels are slotted in.
 * @csspart footer - The `footer` slot.
 * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<flow-ui-icon-button>`.
 * @csspart scroll-button--start - The starting scroll button.
 * @csspart scroll-button--end - The ending scroll button.
 * @csspart scroll-button__base - The scroll button's exported `base` part.
 *
 * @cssproperty --indicator-color - The color of the active tab indicator.
 * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
 * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
 */
declare class FlowUiTabGroup extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIconButton | typeof FlowUiDivider)[];
    private readonly localize;
    private readonly hasSlotController;
    private _activeTab?;
    private mutationObserver;
    private resizeObserver;
    private tabs;
    private panels;
    /** What the header, body and footer do (see {@link BodyState}). */
    private bodyState;
    /** The size of the header, body and footer across the tab bar when the tab group was last open, in px. */
    private openBodySize?;
    /** Whether the split view of the tab group's pane is animating the panes' sizes. */
    private animating;
    private bodyFrame?;
    private bodyTimer?;
    /** Tracks the open size of the header, body and footer. */
    private bodyObserver?;
    /** Observes the content while a content-sized split-view pane watches the tab group's natural size. */
    private contentObserver?;
    /** @internal */
    tabGroup: HTMLElement;
    /** @internal */
    body: HTMLSlotElement;
    /** @internal */
    nav: HTMLElement;
    /** @internal */
    indicator: HTMLElement;
    private bodyWrapper?;
    private navContainer?;
    private hasScrollControls;
    /** The placement of the tabs. */
    placement: 'top' | 'bottom' | 'start' | 'end';
    /**
     * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
     * manual, the tab will receive focus but will not show until the user presses spacebar or enter.
     */
    activation: 'auto' | 'manual';
    /** Disables the scroll arrows that appear when tabs overflow. */
    noScrollControls: boolean;
    /** Set to `true` to allow parent split-view pane to be automatically opened and closed when tabs are clicked.  */
    controlSplitView: boolean;
    /**
     * Indicates whether the tab group is open or closed. A closed tab group shows only its tab bar (the tabs and the nav
     * accessories) and hides its header, tab panels and footer. In a [split-view pane](./flow-ui-split-view-pane), set
     * `closed` on the pane instead: the pane passes its state to a tab group that is its direct child (or a child of an
     * element that wraps it, such as an Angular component's host element), overriding the tab group's own. While the
     * pane animates closed, the header, tab panels and footer keep their size and cannot be focused, and they are hidden
     * when the animation ends.
     */
    closed: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected willUpdate(changed: PropertyValues<this>): void;
    protected updated(changed: PropertyValues<this>): void;
    /**
     * Lay the tab group out at its natural (max-content) size, all of it (`open`) or only its tab bar (`closed`)
     * whatever its `closed` state, until called with `false`. The change is synchronous and undone before the next
     * rendering, so a content-sized split-view pane can measure the tab group without anything being painted or
     * observed.
     *
     * @internal
     */
    setContentMeasuring(mode: ContentMeasuringMode | false): void;
    /**
     * Start or stop dispatching the internal `flow-ui-content-resize` event when the tab group's natural size may have
     * changed (its tab bar, header, footer or tab panels resized, or `closed` or `placement` changed). Used by a
     * content-sized split-view pane.
     *
     * @internal
     */
    watchContentSize(watch: boolean): void;
    /**
     * Called by a split-view pane when its split view starts and stops animating the panes' sizes. A tab group that
     * closes while the split view animates keeps its header, body and footer, inert, until the animation ends.
     *
     * @internal
     */
    setAnimating(animating: boolean): void;
    private observeContent;
    /**
     * `closed` changed: hide or show the header, body and footer. While the tab group's pane animates (or may be about
     * to: its split view can start animating after the pane has passed its state on), they keep their open size, and
     * are inert while closing, until the animation ends. Anywhere else (standalone, not rendered, the first rendering)
     * they change at once.
     */
    private startBodyChange;
    /** The header, body and footer stop keeping their open size: hidden if closed, following the tab group if open. */
    private settleBody;
    /** An element's size across the tab bar: its width for tabs at the start or end, its height for top or bottom. */
    private axisSize;
    private getAllTabs;
    get activeTab(): FlowUiTab | undefined;
    private getAllPanels;
    private handleClick;
    private handleKeyDown;
    private handleScrollToStart;
    private handleScrollToEnd;
    private isHorizontal;
    private setActiveTab;
    private setAriaLabels;
    private repositionIndicator;
    private syncTabsAndPanels;
    /** @internal */
    updateScrollControls(): void;
    /** @internal */
    syncIndicator(): void;
    private handleBodySlotChange;
    /** Shows the specified tab panel. */
    show(panel: string): void;
    render(): lit_html.TemplateResult<1>;
}

/**
 * @tagname flow-ui-dialog
 * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.

 *
 * @dependency flow-ui-icon-button
 * @dependency flow-ui-tab-group
 *
 * @slot - The dialog's main content.
 * @slot title - The dialog's title text. Alternatively, you can use the `title` attribute.
 * @slot header-actions - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.
 * @slot footer - The dialog's footer, usually one or more buttons representing various options.
 *
 * @event flow-ui-show - Emitted when the dialog opens.
 * @event flow-ui-after-show - Emitted after the dialog opens and all animations are complete.
 * @event flow-ui-hide - Emitted when the dialog closes.
 * @event flow-ui-after-hide - Emitted after the dialog closes and all animations are complete.
 * @event flow-ui-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling
 *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
 * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} flow-ui-request-close - Emitted when the user attempts to
 *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
 *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
 *   destructive behavior such as data loss.
 *
 * @event {{ name: String }} flow-ui-tab-show - Emitted when a tab is shown.
 * @event {{ name: String }} flow-ui-tab-hide - Emitted when a tab is hidden.
 *
 * @csspart base - The component's base wrapper.
 * @csspart overlay - The overlay that covers the screen behind the dialog.
 * @csspart panel - The dialog's panel (where the dialog and its content are rendered).
 * @csspart header - The dialog's header. This element wraps the title and header actions.
 * @csspart header-actions - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.
 * @csspart title - The dialog's title text.
 * @csspart close-button - The close button, an `<flow-ui-icon-button>`.
 * @csspart close-button__base - The close button's exported `base` part.
 * @csspart body - The dialog's body.
 * @csspart footer - The dialog's footer.
 *
 * @csspart tab-group__nav - The tab group's navigation container where tabs are slotted in.
 * @csspart tab-group__tabs - The container that wraps the tabs.
 * @csspart tab-group__active-tab-indicator - The line that highlights the currently selected tab.
 * @csspart tab-group__body - The tab group's body where tab panels are slotted in.
 *
 * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
 * @cssproperty --header-spacing - The amount of padding to use for the header.
 * @cssproperty --body-spacing - The amount of padding to use for the body.
 * @cssproperty --footer-spacing - The amount of padding to use for the footer.
 *
 * @animation dialog.show - The animation to use when showing the dialog.
 * @animation dialog.hide - The animation to use when hiding the dialog.
 * @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.
 * @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.
 * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.
 */
declare class FlowUiDialog extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIconButton | typeof FlowUiTabGroup)[];
    private readonly hasSlotController;
    private readonly localize;
    private modal;
    private originalTrigger;
    /** @internal */
    dialog: HTMLElement;
    /** @internal */
    panel: HTMLElement;
    /** @internal */
    overlay: HTMLElement;
    /** The embedded tab group in a tabbed-style dialog */
    tabGroup: FlowUiTabGroup;
    /**
     * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
     * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
     */
    open: boolean;
    /**
     * The dialog's title text. If you need to display HTML, use the `title` slot instead.
     */
    title: string;
    /**
     * Disables the header. This will also remove the default close button, so please ensure you provide an easy,
     * accessible way for users to dismiss the dialog.
     */
    noHeader: boolean;
    /** Display a tabbed-style settings dialog. */
    tabbed: boolean;
    connectedCallback(): void;
    firstUpdated(): void;
    disconnectedCallback(): void;
    private requestClose;
    private addOpenListeners;
    private removeOpenListeners;
    private handleDocumentKeyDown;
    /** @internal */
    handleOpenChange(): Promise<void>;
    /** Shows the dialog. */
    show(): Promise<void>;
    /** Hides the dialog */
    hide(): Promise<void>;
    private handleTabShow;
    private syncTabbedDialog;
    private handleChildHide;
    renderHeader(slot?: string): lit_html.TemplateResult<1>;
    renderTabContainer(): lit_html.TemplateResult<1>;
    renderDefaultContainer(): lit_html.TemplateResult<1>;
    render(): lit_html.TemplateResult<1>;
}

/**
 * @tagname flow-ui-radio-group
 * @summary Radio groups are used to group multiple [radios](./flow-ui-radio) so they function as a single form control.
 * @docgroup radio-group
 *
 * @dependency flow-ui-divider
 *
 * @slot - The default slot where `<flow-ui-radio>` elements are placed.
 * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
 *  attribute.
 * @slot help-text - The radio group's help text. Alternatively, you can use the `help-text` attribute.
 *
 * @event flow-ui-change - Emitted when the radio group's selected value changes.
 * @event flow-ui-input - Emitted when the radio group receives user input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The input's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 */
declare class FlowUiRadioGroup extends FlowRdfFormControl {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiDivider)[];
    protected readonly formControlController: FormControlController;
    private readonly hasSlotController;
    private customValidityMessage;
    private validationTimeout;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal */
    validationInput: HTMLInputElement;
    private errorMessage;
    /** @internal */
    defaultValue: string;
    /**
     * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
     * instead.
     */
    label: string;
    /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** The name of the radio group, submitted as a name/value pair with form data. */
    name: string;
    /** The current value of the radio group, submitted as a name/value pair with form data. */
    value: string;
    /** The radio group's size. This size will be applied to all child radios and radio buttons. */
    size: 'small' | 'medium' | 'large';
    /** Display the radios using a reversed style with left-aligned labels. */
    reverse: boolean;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Ensures a child radio is checked before allowing the containing form to submit. */
    required: boolean;
    /** @internal Indicates that a divider should be displayed below the control. */
    divider: boolean;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    firstUpdated(): void;
    private getAllRadios;
    private handleRadioClick;
    private handleKeyDown;
    private handleLabelClick;
    private handleInvalid;
    private syncRadios;
    private updateCheckedRadio;
    /** @internal */
    handleStyleChange(): void;
    /** @internal */
    handleValueChange(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message?: string): void;
    render(): lit_html.TemplateResult<1>;
}

/**
 *
 * @tagname flow-ui-radio
 * @summary Radios allow the user to select a single option from a group.
 * @docgroup radio-group
 *
 * @dependency flow-ui-icon
 *
 * @slot - The radio's label.
 *
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-focus - Emitted when the control gains focus.
 *
 * @csspart base - The component's base wrapper.
 * @csspart control - The circular container that wraps the radio's checked state.
 * @csspart control--checked - The radio control when the radio is checked.
 * @csspart checked-icon - The checked icon, an `<flow-ui-icon>` element.
 * @csspart label - The container that wraps the radio's label.
 */
declare class FlowUiRadio extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon)[];
    /** @internal */
    checked: boolean;
    /** @internal */
    protected hasFocus: boolean;
    /** The radio's value. When selected, the radio group will receive this value. */
    value: string;
    /**
     * The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
     * attribute can typically be omitted.
     */
    size: 'small' | 'medium' | 'large';
    /** The radio's variant color. */
    variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
    /** Disables the radio. */
    disabled: boolean;
    /** Display the radio using a reversed style with left-aligned label. */
    reverse: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private addEventListeners;
    private removeEventListeners;
    private handleBlur;
    private handleClick;
    private handleFocus;
    private setInitialAttributes;
    /** @internal */
    handleCheckedChange(): void;
    /** @internal */
    handleDisabledChange(): void;
    render(): lit_html.TemplateResult<1>;
}

/**
 * @tagname flow-ui-color-mapper
 * @summary A component for defining mappings between data values and colors.
 * @docgroup color-mapper
 *
 * @dependency flow-ui-button
 * @dependency flow-ui-color-picker
 * @dependency flow-ui-color-stop
 * @dependency flow-ui-dialog
 * @dependency flow-ui-icon-button
 * @dependency flow-ui-option
 * @dependency flow-ui-radio
 * @dependency flow-ui-radio-group
 * @dependency flow-ui-select
 *
 * @event flow-ui-change - Fired when the color mapper's value changes.
 *
 */
declare class FlowUiColorMapper extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiButton | typeof FlowUiIconButton | typeof FlowUiOption | typeof FlowUiSelect | typeof FlowUiColorPicker | typeof FlowUiColorStop | typeof FlowUiDialog | typeof FlowUiRadio | typeof FlowUiRadioGroup)[];
    private currentField?;
    private readonly hasSlotController;
    private modeRadioGroup;
    private fixedColorPicker;
    private fieldSelect;
    private infoDialog;
    /** @internal - add form control class */
    class: string;
    /** The color mapper configuration specifying available fields. */
    options: ColorMapperOptions;
    /** The current value of the color mapper. */
    value: ColorMapperValue;
    /** The size of the color mapper component. */
    size: 'small' | 'medium' | 'large';
    /** @internal */
    defaultColorStop: boolean;
    /**
     * One or more predefined color swatches to display as presets in the color picker. Can include any format the color
     * picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a
     * semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.
     */
    swatches: string | string[];
    connectedCallback(): void;
    /** @internal - ensure form class is always present */
    handleClassChange(): void;
    private handleFixedPickerClick;
    private handleChange;
    private emitChange;
    private handleColorStopRemove;
    private getAllColorStops;
    private getColorStopPlaceholder;
    private fixedColorTemplate;
    private dataDrivenColorTemplate;
    private colorStopsTemplate;
    private infoDialogTemplate;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-color-mapper': FlowUiColorMapper;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-color-picker': FlowUiColorPicker;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-color-stop': FlowUiColorStop;
    }
}

/**
 * The date time picker component displays its value in a text field and opens a [calendar](./flow-ui-calendar) in a
 * popup to change it.
 *
 * Set `range` to select a date, datetime or time range instead of a single value, depending on `display-mode`.
 *
 * Use `min`, `max` and `max-range` to restrict the dates that can be selected. Note that a value outside these limits
 * is not changed, but fails validation.
 *
 * @tagname flow-ui-date-time-picker
 * @summary Date time pickers allow users to select a date and time, or a date range, from a calendar.
 *
 * @dependency flow-ui-calendar
 * @dependency flow-ui-divider
 * @dependency flow-ui-icon
 * @dependency flow-ui-popup
 *
 * @slot label - The input's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the picker.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot mode-icon - An icon to use in lieu of the default mode icon.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 *
 * @event flow-ui-change - Emitted when the control's value changes.
 * @event flow-ui-clear - Emitted when the control's value is cleared.
 * @event flow-ui-input - Emitted when the control receives input.
 * @event flow-ui-focus - Emitted when the control gains focus.
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-show - Emitted when calendar opens.
 * @event flow-ui-after-show - Emitted after the calendar opens and all animations are complete.
 * @event flow-ui-hide - Emitted when the calendar closes.
 * @event flow-ui-after-hide - Emitted after the calendar closes and all animations are complete.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart combobox - The container the wraps the prefix, mode-icon, combobox, and clear icon.
 * @csspart prefix - The container that wraps the prefix slot.
 * @csspart display-input - The element that displays the selected date/time, an `<input>` element.
 * @csspart clear-button - The clear button.
 * @csspart mode-icon - The mode icon, a `<flow-ui-icon>` element.
 */
declare class FlowUiDateTimePicker extends FlowRdfFormControl {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon | typeof FlowUiPopup | typeof FlowUiDivider | typeof FlowUiCalendar)[];
    private readonly formControlController;
    private readonly hasSlotController;
    private readonly localize;
    private popup;
    private displayInput;
    private valueInput;
    private calendarContainer;
    private hasFocus;
    private displayLabel;
    /** The name of the date/time picker, submitted as a name/value pair with form data. */
    name: string;
    /**
     * The current value of the date/time picker. (ISO8601 date/time string) In range mode, the value is an ISO8601
     * interval string (`<start>/<end>`) and the end is exclusive. For example, the date range October 1 to October 2 has
     * the value `2026-10-01T00:00:00.000+01:00/2026-10-03T00:00:00.000+01:00`.
     */
    value: string;
    /** The display mode: date only, time only, or both date and time. */
    displayMode: 'date' | 'time' | 'datetime';
    /** Set to `true` to select a date, datetime or time range instead of a single value, depending on `display-mode`. */
    range: boolean;
    /** The format set by the user, if any. The default format depends on `display-mode`, so it is not stored here. */
    private _format?;
    /**
     * The format to use for display as a
     * [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens). If not set, the format
     * depends on `display-mode` (`'DD'` for `date`, `'HH:mm'` for `time` and `'FFF'` for `datetime`).
     */
    get format(): string;
    set format(format: string);
    /** Set the timezone for display. If not set the default timezone will be used. (TZ name e.g. `'Europe/London'`) */
    timezone?: string;
    /** Set the locale for display. If not set the default locale will be used. (e.g `'en-GB'`) */
    locale?: string;
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultValue: string;
    /** The date/time picker's size. */
    size: 'small' | 'medium' | 'large';
    /** The number of months to show side by side in the calendar. */
    months: 1 | 2;
    /**
     * The earliest date that can be selected. (ISO8601 date or date/time string) Note that `min` is ignored when
     * `display-mode` is `time`.
     */
    min?: string;
    /**
     * The latest date that can be selected. (ISO8601 date or date/time string) Note that `max` is ignored when
     * `display-mode` is `time`.
     */
    max?: string;
    /**
     * The maximum length of a range. (Duration string, e.g. `'7 days'` or `'1 month'`) Supported units are milliseconds,
     * seconds, minutes, hours, days, weeks and months.
     */
    maxRange?: string;
    /** Placeholder text to show as a hint when the date/time picker is empty. */
    placeholder: string;
    /** Disables the date/time picker control. */
    disabled: boolean;
    /** Adds a clear button when the date/time picker is not empty. */
    clearable: boolean;
    /**
     * Indicates whether or not the calendar is open. You can toggle this attribute to show and hide the calendar, or you can
     * use the `show()` and `hide()` methods.
     */
    open: boolean;
    /**
     * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
     */
    hoist: boolean;
    /** Draws a filled select. */
    filled: boolean;
    /** Draws a pill-style select with rounded edges. */
    pill: boolean;
    /** The select's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /**
     * The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox
     * inside of the viewport.
     */
    placement: 'top' | 'top-end' | 'top-start' | 'bottom' | 'bottom-end' | 'bottom-start';
    /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** The select's required attribute. */
    required: boolean;
    /**
     * Display the control in the 'inline' form control style.
     */
    inline: boolean;
    /** Indicates that the control should display a divider */
    divider: boolean;
    /** The message set with `setCustomValidity()`. It takes precedence over the limits messages. */
    private customValidityMessage;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    private addOpenListeners;
    private removeOpenListeners;
    /** Whether the picker selects a range: a date range, a datetime range or a time range. */
    private get isRangeMode();
    /** @internal */
    updateDisplayLabel(): void;
    /**
     * The label for a range. For a date range, it shows the range start and the last day, both included, and a range of
     * one day shows that day once. For a datetime range, it shows the start and end instants. For a time range, it shows
     * the start and end times, with an end at the end of the day shown as 24:00. An invalid range shows an empty label,
     * as the calendar shows no selection.
     */
    private rangeLabel;
    private handleFocus;
    private handleBlur;
    private handleDocumentFocusIn;
    private handleDocumentKeyDown;
    private handleDocumentMouseDown;
    private handleLabelClick;
    private handleComboboxMouseDown;
    private handleComboboxKeyDown;
    private handleClearClick;
    private handleClearMouseDown;
    private handleCalendarInput;
    private handleCalendarChange;
    private handleInvalid;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleValueChange(): void;
    /** @internal */
    handleOpenChange(): Promise<void>;
    /** Shows the calendar. */
    show(): Promise<void>;
    /** Hides the calendar. */
    hide(): Promise<void>;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    protected updated(changedProperties: PropertyValues<this>): void;
    /** Set the value input's custom validity: the message from `setCustomValidity()`, or a limits message. */
    private updateCustomValidity;
    /** The validation message for a value outside `min`, `max` or `max-range`, or an empty string. */
    private limitsValidityMessage;
    /** Sets focus on the control. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the control. */
    blur(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-date-time-picker': FlowUiDateTimePicker;
    }
}

/**
 * The base edge component draws a diagram edge as an SVG path. The default edge template uses it, and custom edge
 * templates can wrap it to restyle edges or add labels. Pressing the edge or one of its labels selects the edge.
 *
 * The path follows the edge's routed `points`, drawn with the edge routing named by `routing`, the edge's `routing` or
 * the diagram's default routing. Set `routing` to change the edge's routing in the model. The stroke properties only
 * change how this element draws the edge.
 *
 * `source-arrowhead` and `target-arrowhead` name a marker: the built-in `flow-ui-diagram-arrow`, or one defined with
 * `flow-ui-diagram-marker`. Note that the edge's own `sourceArrowhead` and `targetArrowhead` take precedence.
 *
 * A selected edge shows a relink handle at each end that can be relinked (the edge's `relinkable`, or the diagram's
 * `linking.defaultRelinkable`). For styling, the host has the `selected`, `temporary` (the preview of a draw or relink)
 * and `dangling` (an end is not connected) attributes.
 *
 * @tagname flow-ui-diagram-base-edge
 * @summary Base edges are used in edge templates to draw the path and arrowheads of a diagram edge.
 * @docgroup diagram
 *
 * @slot - Edge labels, such as `flow-ui-diagram-edge-label`.
 *
 * @csspart svg - The SVG element (positioned at the diagram origin, with visible overflow).
 * @csspart path - The visible path.
 * @csspart hit-area - The invisible, wider path that catches pointer events.
 *
 * @cssproperty --edge-stroke - The stroke color, when the `stroke` property is not set. Defaults to `--flow-ui-diagram-edge-stroke`.
 * @cssproperty --edge-stroke-width - The stroke width, when `stroke-width` is not set. Defaults to `2px`.
 * @cssproperty --edge-stroke-dasharray - The stroke dash pattern, when `stroke-dasharray` is not set. Defaults to `none`.
 * @cssproperty --edge-stroke-opacity - The stroke opacity, when `stroke-opacity` is not set. Defaults to `1`.
 * @cssproperty --edge-stroke-transition - A transition for the stroke, for example on hover. Defaults to `none`.
 * @cssproperty --edge-relink-handle-size - The outer diameter of the relink handles. Defaults to `--flow-ui-diagram-relink-handle-size`; the other `--edge-relink-handle-*` properties default to the matching `--flow-ui-diagram-relink-handle-*` ones.
 * @cssproperty --edge-relink-handle-stroke-width - The width of the relink handles' ring.
 * @cssproperty --edge-relink-handle-fill - The relink handles' fill color.
 * @cssproperty --edge-relink-handle-fill-hover - The fill color of a hovered relink handle.
 * @cssproperty --edge-relink-handle-fill-drag - The fill color of a dragged relink handle.
 * @cssproperty --edge-relink-handle-stroke - The relink handles' ring color.
 * @cssproperty --edge-relink-handle-stroke-hover - The ring color of a hovered relink handle.
 * @cssproperty --edge-relink-handle-stroke-drag - The ring color of a dragged relink handle.
 * @cssproperty --edge-relink-handle-halo-size - The width of the halo around a hovered or dragged relink handle.
 * @cssproperty --edge-relink-handle-halo-color-hover - The halo color of a hovered relink handle.
 * @cssproperty --edge-relink-handle-halo-color-drag - The halo color of a dragged relink handle.
 */
declare class FlowUiDiagramBaseEdge extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /** The edge to draw: the `edge` that the edge template receives. */
    edge: DiagramEdge;
    /**
     * The name of the edge routing to use, which is written to the edge in the model. If not set, the edge's `routing`
     * is used.
     */
    routing?: string;
    /** The stroke color. If not set, `--edge-stroke` is used. */
    stroke?: string;
    /** The ID of the marker at the source end. Note that the edge's `sourceArrowhead` takes precedence. */
    sourceArrowhead?: string;
    /** The ID of the marker at the target end. Note that the edge's `targetArrowhead` takes precedence. */
    targetArrowhead?: string;
    /** The stroke opacity, from 0 to 1. If not set, `--edge-stroke-opacity` is used. */
    strokeOpacity?: number;
    /** The stroke width in pixels. If not set, `--edge-stroke-width` is used. */
    strokeWidth?: number;
    /** The stroke dash pattern (e.g. `5 5` for a dashed line). If not set, `--edge-stroke-dasharray` is used. */
    strokeDasharray?: string;
    private runtime?;
    private readonly markersController;
    private readonly configController;
    private readonly actionStateController;
    private readonly viewportController;
    private readonly markerClones;
    private invalidPoints?;
    private prevRouting?;
    private prevRoutingMode?;
    private prevPoints?;
    constructor();
    protected willUpdate(changed: PropertyValues<this>): void;
    protected updated(changed: PropertyValues<this>): void;
    render(): lit_html.TemplateResult<1> | typeof nothing;
    /**
     * The relink handles. Both hit circles render before both visible handles, so a visible handle is never covered by
     * the other end's hit area on a short edge. A relink preview has no hit circles: its handles only show the
     * gesture. The stylesheet moves each handle and hit circle past the end of the line along its inset.
     */
    private renderRelinkHandles;
    /** ngDiagram's `RelinkHandleDirective`: a press on a handle starts the relink gesture for that end. */
    private onRelinkHandlePointerDown;
    /** Observes the configuration, viewport and (for the temporary edge) action state only when handles can show. */
    private observeRelinkState;
    /** The relink gesture this edge previews: set only on the temporary edge of a relink. */
    private relinkPreview;
    private relinkHandles;
    private relinkHandleInset;
    private computePath;
    /**
     * The marker for one end, cloned into this shadow root: `url(#id)` does not reach outside it. The clone is
     * kept until the marker id or the registry changes (a registered marker's content can change in place).
     */
    private markerFor;
    /** Writes `routing`, and the edge's routing mode and manual points, to the model (as ngDiagram does). */
    private syncEdgePropertiesToModel;
}

/**
 * The port component is a connection point on a diagram node. Place ports inside a node template (in the light DOM or
 * in a template element's shadow root). Edges attach to them through their `sourcePort` and `targetPort`. Note that a
 * port outside a diagram node (for example in a palette preview) is not shown.
 *
 * The port sits on the `side` of its node, and `origin-point` says which point of the port lies on that side. Without
 * slotted content it shows the default round port; slotted content replaces the round shape but keeps the port's
 * background and border. Positions are relative to the nearest positioned ancestor, so a custom node template that
 * places ports should be `position: relative`.
 *
 * Dragging from a port draws an edge. A port of type `target` cannot start an edge, and one of type `source` cannot end
 * one. Pressing a port also selects its node, unless `linking.selectNodeOnPortPress` is `false`.
 *
 * Ports highlight on hover when an element of the node template has the `flow-ui-diagram-port-hoverable` class (only
 * the port under the pointer) or the `flow-ui-diagram-port-hoverable-over-node` class (every port of the node while the
 * pointer is over the node). `flow-ui-diagram-base-node`, and so the default node, has the second class.
 *
 * @tagname flow-ui-diagram-port
 * @summary Ports are used in node templates to provide connection points for edges.
 * @docgroup diagram
 *
 * @slot - Optional custom content for the port, in place of the default round shape.
 *
 * @csspart base - The element that draws the port's background and border, around the slotted content.
 *
 * @cssproperty --flow-ui-diagram-port-size - The width and height of the default port (inside its border).
 * @cssproperty --flow-ui-diagram-port-background-color - The port's background color.
 * @cssproperty --flow-ui-diagram-port-border-color - The port's border color.
 * @cssproperty --flow-ui-diagram-port-border-size - The port's border width.
 * @cssproperty --flow-ui-diagram-port-border-radius - The default port's corner radius.
 * @cssproperty --flow-ui-diagram-port-background-color-hover - The highlighted port's background color.
 * @cssproperty --flow-ui-diagram-port-border-color-hover - The color of the highlighted port's outer ring.
 * @cssproperty --flow-ui-diagram-port-border-size-hover - The width of the highlighted port's outer ring.
 */
declare class FlowUiDiagramPort extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /** The port's ID, unique within its node. Edges reference it as `sourcePort` / `targetPort`. */
    id: string;
    /** The port's role: edges can start at a `source` port, end at a `target` port, or both. */
    type: DiagramPort['type'];
    /** The side of the node that the port is on, which is also the direction in which edges leave or enter it. */
    side: DiagramPortSide;
    /** The point of the port that lies on the node's side. */
    originPoint: DiagramOriginPoint;
    /**
     * Set to `true` to hide the port. A hidden port stays registered with its last measured position, so its edges
     * stay put, but it does not hold up initialization and cannot be linked to. It is measured again when shown.
     */
    hidden: boolean;
    private hasContent;
    private highlighted;
    private runtime?;
    private nodeContext?;
    private registration?;
    private subscriptions;
    private portHovered;
    private nodeHovered;
    private rotateHandleHovered;
    private hoverNodeElement?;
    constructor();
    disconnectedCallback(): void;
    protected updated(changed: PropertyValues<this>): void;
    render(): lit_html.TemplateResult<1>;
    private watchNodeHover;
    private unwatchNodeHover;
    private onNodePointerEnter;
    private onNodePointerLeave;
    private onNodePointerOver;
    private setHovered;
    private onSlotChange;
    private subscribe;
    private unsubscribe;
    /** Registers with the node (ngOnInit of ngDiagram's port), or re-registers after the core, node or id changed. */
    private register;
    /** Writes changed `side`, `type` and `hidden` to the core, and re-measures after a CSS-only move. */
    private syncRegistration;
    /** Unregisters from the node (ngOnDestroy of ngDiagram's port). */
    private unregister;
}

/**
 * The resize adornment component draws resize lines and corner handles around a selected, resizable node. Wrap a node
 * template's content in it. Dragging a line or handle resizes the node and writes its new `size` (and `autoSize:
 * false`) to the model, within `resize.getMinNodeSize` and, for groups, `resize.allowResizeBelowChildrenBounds`.
 *
 * The adornment fills its node, and is shown while the node is selected, resizable and not rotated. Whether the node is
 * resizable comes, in order of priority, from the node's `resizable`, the adornment's `default-resizable` and the
 * diagram's `resize.defaultResizable`.
 *
 * The four lines draw the node's selection frame, so they render even for sides missing from `active-sides`, but those
 * lines are inert. A corner handle renders only when both of its sides are active.
 *
 * Content slotted into the adornment gets the built-in selected and group-highlight looks of `diagramNodeSelected()`
 * and `diagramGroupHighlighted()`, as it would at the root of the template. Note that outside a diagram node (for
 * example in a palette preview) only the content is shown.
 *
 * @tagname flow-ui-diagram-resize-adornment
 * @summary Resize adornments allow users to resize a selected diagram node.
 * @docgroup diagram
 *
 * @slot - The node's content.
 *
 * @csspart line - A resize line, one for each side. Inert lines also have the `line-inactive` part.
 * @csspart line-inactive - A resize line for a side missing from `active-sides`.
 * @csspart handle - A corner resize handle.
 *
 * @cssproperty --flow-ui-diagram-resize-line-border-width - The width of the resize lines.
 * @cssproperty --flow-ui-diagram-resize-line-border-style - The style of the resize lines.
 * @cssproperty --flow-ui-diagram-resize-line-border-color - The color of the resize lines.
 * @cssproperty --flow-ui-diagram-resize-handle-size - The width and height of a corner handle.
 * @cssproperty --flow-ui-diagram-resize-handle-background-color - A corner handle's background color.
 * @cssproperty --flow-ui-diagram-resize-handle-border-size - A corner handle's border width.
 * @cssproperty --flow-ui-diagram-resize-handle-border-style - A corner handle's border style.
 * @cssproperty --flow-ui-diagram-resize-handle-border-color - A corner handle's border color.
 * @cssproperty --flow-ui-diagram-resize-handle-border-radius - A corner handle's corner radius.
 */
declare class FlowUiDiagramResizeAdornment extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /**
     * Set to `false` to stop users from resizing nodes that use this adornment and do not set their own `resizable`.
     * If not set, the diagram's `resize.defaultResizable` is used.
     */
    defaultResizable?: boolean;
    /**
     * The sides of the node that can be dragged to resize it, separated by spaces (`active-sides="right bottom"`).
     * Lines for other sides still render, as the selection frame, but are inert. An empty value keeps the frame
     * without any interactive resize.
     */
    activeSides: readonly DiagramSide[];
    private runtime?;
    private onNode;
    private renderedShown?;
    private readonly nodeObserver;
    private readonly configObserver;
    private readonly resizeController;
    constructor();
    /** Whether the node is resizable: the node's own setting, then this adornment's default, then the diagram's. */
    private get resizable();
    private get adornmentShown();
    protected shouldUpdate(changed: PropertyValues<this>): boolean;
    protected updated(): void;
    render(): lit_html.TemplateResult<1>;
    private renderAdornment;
    /** The direction of the line or handle a press landed on (in this shadow root), if any. */
    private getDirection;
}

/**
 * The rotate adornment component draws a rotation handle for a selected, rotatable node. Put it in a node template,
 * next to the content (it covers the node and only its handle takes pointer events). Dragging the handle rotates the
 * node and writes its `angle` to the model, snapped by the diagram's `nodeRotation` settings (`shouldSnapForNode`,
 * `computeSnapAngleForNode`, `defaultSnapAngle`).
 *
 * The handle is shown while the node is selected and rotatable. Whether the node is rotatable comes, in order of
 * priority, from the node's `rotatable`, the adornment's `default-rotatable` and the diagram's
 * `nodeRotation.defaultRotatable` (`true` by default).
 *
 * Slotted content replaces the built-in rotate icon and round background, for a custom handle.
 *
 * Outside a diagram node (for example in a palette preview) nothing is shown.
 *
 * @tagname flow-ui-diagram-rotate-adornment
 * @summary Rotate adornments allow users to rotate a selected diagram node.
 * @docgroup diagram
 *
 * @slot - Optional custom content for the handle, in place of the built-in icon.
 *
 * @csspart handle - The rotation handle. It has the `data-rotating` attribute while pressed.
 *
 * @cssproperty --flow-ui-diagram-rotate-handle-size - The width and height of the handle.
 * @cssproperty --flow-ui-diagram-rotate-handle-background-color - The built-in handle's background color.
 * @cssproperty --flow-ui-diagram-rotate-handle-background-color-hover - The built-in handle's background color on hover.
 * @cssproperty --flow-ui-diagram-rotate-handle-background-color-active - The built-in handle's background color while rotating.
 * @cssproperty --flow-ui-diagram-rotate-handle-top - The handle's `top` offset from the node's top edge.
 * @cssproperty --flow-ui-diagram-rotate-handle-right - The handle's `right` offset from the node's right edge.
 * @cssproperty --flow-ui-diagram-rotate-handle-bottom - The handle's `bottom` offset (unset by default).
 * @cssproperty --flow-ui-diagram-rotate-handle-left - The handle's `left` offset (unset by default).
 */
declare class FlowUiDiagramRotateAdornment extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /**
     * Set to `false` to stop users from rotating nodes that use this adornment and do not set their own `rotatable`.
     * If not set, the diagram's `nodeRotation.defaultRotatable` is used.
     */
    defaultRotatable?: boolean;
    private hasCustomHandle;
    private pressed;
    private runtime?;
    private onNode;
    private renderedShown?;
    private readonly nodeObserver;
    private readonly configObserver;
    private readonly rotateController;
    constructor();
    disconnectedCallback(): void;
    /** Whether the node is rotatable: the node's own setting, then this adornment's default, then the diagram's. */
    private get rotatable();
    private get handleShown();
    protected shouldUpdate(changed: PropertyValues<this>): boolean;
    protected updated(): void;
    render(): lit_html.TemplateResult<1>;
    private onHandlePointerDown;
    private release;
    private onSlotChange;
}

/**
 * The base node component draws the default node look, for custom node templates that keep it. The diagram's default
 * node (a node without a `type`) is a base node showing `data.label` (or the node ID).
 *
 * It draws the slotted content in the default node box (border, background, selected and hover states), with the
 * resize lines and handles (`flow-ui-diagram-resize-adornment`) and the rotation handle
 * (`flow-ui-diagram-rotate-adornment`) while the node is selected, and two ports, `port-left` and `port-right`
 * (both of type `both`). Every port of the node highlights while the pointer is over it (it has the
 * `flow-ui-diagram-port-hoverable-over-node` class).
 *
 * It reads its node from the diagram node it is rendered in, so a render-function template only needs
 * `` html`<flow-ui-diagram-base-node>${node.data.title}</flow-ui-diagram-base-node>` ``. It fills the node and
 * reflects the node's selection as the `selected` attribute.
 *
 * @tagname flow-ui-diagram-base-node
 * @summary Base nodes are used in node templates to draw the default node look, with adornments and ports.
 * @docgroup diagram
 *
 * @dependency flow-ui-diagram-port
 * @dependency flow-ui-diagram-resize-adornment
 * @dependency flow-ui-diagram-rotate-adornment
 *
 * @slot - The node's content.
 *
 * @csspart base - The node box around the slotted content.
 *
 * @cssproperty --flow-ui-diagram-node-background-color - The node's background color.
 * @cssproperty --flow-ui-diagram-node-color - The node's text color.
 * @cssproperty --flow-ui-diagram-node-border-color - The node's border color.
 * @cssproperty --flow-ui-diagram-node-border-color-hover - The node's border color on hover and while selected.
 * @cssproperty --flow-ui-diagram-node-border-radius - The node's corner radius.
 * @cssproperty --flow-ui-diagram-node-border-size - The node's border width.
 * @cssproperty --flow-ui-diagram-node-padding - The padding around the content.
 * @cssproperty --flow-ui-diagram-selected-node-box-shadow - The box shadow of the selected node.
 */
declare class FlowUiDiagramBaseNode extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiDiagramPort | typeof FlowUiDiagramResizeAdornment | typeof FlowUiDiagramRotateAdornment)[];
    /**
     * Set to `true` to remove the two default ports. If not set, the diagram's `defaultNode.removePorts` setting is
     * used (by default the ports are shown). Set to `false` to show them whatever the diagram's setting.
     */
    removeDefaultPorts?: boolean;
    private renderedState?;
    private readonly nodeObserver;
    private readonly configObserver;
    constructor();
    connectedCallback(): void;
    private get defaultPortsRemoved();
    private get renderState();
    protected shouldUpdate(changed: PropertyValues<this>): boolean;
    protected updated(): void;
    render(): lit_html.TemplateResult<1>;
}

/**
 * The wrapper `flow-ui-diagram` renders around each edge's template, beneath the nodes. It is not meant to be
 * used directly.
 *
 * It applies `computedZIndex` and effective visibility (`computedHidden` gives `display: none`, so unhiding
 * re-measures labels), and reflects the edge's state as attributes for styling: `selected`, `temporary` (the
 * preview edge drawn while linking or relinking) and `dangling` (an edge with a free end), plus `data-edge-id`.
 *
 * It provides the edge context, for labels inside the template.
 *
 * @internal
 *
 * @tagname flow-ui-diagram-edge
 * @summary Internal wrapper around one diagram edge.
 *
 * @slot - The edge's template.
 */
declare class FlowUiDiagramEdge extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /** The edge to render, as handed over by the diagram's renderer. */
    edge: DiagramEdge;
    private readonly edgeObservable;
    constructor();
    protected willUpdate(changed: PropertyValues<this>): void;
    protected updated(changed: PropertyValues<this>): void;
    render(): lit_html.TemplateResult<1>;
}

/**
 * The edge label component shows content at a position along a diagram edge. Place it inside an edge template, usually
 * as a child of `flow-ui-diagram-base-edge` (in the light DOM or in a template element's shadow root). Note that a
 * label outside a diagram edge is not shown.
 *
 * The label is centered on the point at `position-on-edge` along the edge's path, and follows the edge as its nodes
 * move. It stays hidden until the diagram has computed its position.
 *
 * Without `variant`, the label shows its slotted content as it is. `variant="default"` wraps the content in the
 * built-in label chip (the look of the default edge's label), with a highlighted border while the edge is hovered
 * or selected.
 *
 * The label catches pointer events, so slotted buttons and links work. Add `data-no-drag="true"` or
 * `data-no-pan="true"` to slotted content to stop a press on it from dragging the selection or panning the
 * diagram.
 *
 * @tagname flow-ui-diagram-edge-label
 * @summary Edge labels are used in edge templates to show text or controls at a position along a diagram edge.
 * @docgroup diagram
 *
 * @slot - The label's content: text, icons, buttons.
 *
 * @csspart base - The element around the slotted content. With `variant="default"`, it draws the label chip.
 *
 * @cssproperty --edge-label-padding - The default label's padding. Defaults to `4px 8px`.
 * @cssproperty --edge-label-border-radius - The default label's corner radius. Defaults to `4px`.
 * @cssproperty --edge-label-font-size - The default label's font size. Defaults to `12px`.
 * @cssproperty --edge-label-background-color - The default label's background color. Defaults to `--flow-ui-diagram-edge-label-background-color`.
 * @cssproperty --edge-label-text-color - The default label's text color. Defaults to `--flow-ui-diagram-edge-label-color`.
 * @cssproperty --edge-label-border-width - The default label's border width. Defaults to `1px`.
 * @cssproperty --edge-label-border-color - The default label's border color. Defaults to `--flow-ui-diagram-edge-label-border-color`.
 * @cssproperty --edge-label-border-color-hover - The default label's border color while the edge is hovered. Defaults to `--edge-label-border-color`, then `--flow-ui-diagram-edge-stroke-hover`.
 * @cssproperty --edge-label-border-color-selected - The default label's border color while the edge is selected. Defaults to `--edge-label-border-color`, then `--flow-ui-diagram-edge-stroke-selected`.
 * @cssproperty --edge-label-border-transition - The transition of the default label's border. Defaults to `border-color 0.1s ease-in-out`.
 */
declare class FlowUiDiagramEdgeLabel extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /**
     * The label's ID, unique within its edge. It identifies the label in the edge's `measuredLabels`. Note that the
     * property is not reflected, so many edges can use the same label ID without duplicate DOM IDs.
     */
    id: string;
    /**
     * The label's position along the edge: a number from 0 (the source end) to 1 (the target end), or an absolute
     * distance (e.g. `30px` from the source or `-20px` from the target).
     */
    positionOnEdge: DiagramEdgeLabelPosition;
    /** The label's look: `default` for the built-in label chip. If not set, the slotted content is shown as it is. */
    variant?: 'default';
    /**
     * Set to `true` to hide the label. A hidden label stays registered but does not hold up initialization. It is
     * measured again when shown.
     */
    hidden: boolean;
    private edgeHovered;
    private runtime?;
    private edgeContext?;
    private registration?;
    private readonly edgeObserver;
    private flowCoreSubscription?;
    private hoverListeners?;
    constructor();
    disconnectedCallback(): void;
    protected updated(changed: PropertyValues<this>): void;
    render(): lit_html.TemplateResult<1>;
    /** Follows hovering over the edge (its path or any of its labels), for the default label's border. */
    private listenForHover;
    /** Registers with the edge (ngOnInit of ngDiagram's label), or re-registers after the core, edge or id changed. */
    private register;
    /** Writes a changed `position-on-edge` and `hidden` to the core. */
    private syncRegistration;
    /** Unregisters from the edge (ngOnDestroy of ngDiagram's label). */
    private unregister;
}

/**
 * The wrapper `flow-ui-diagram` renders around each node's template. It is not meant to be used directly.
 *
 * It positions the node (`translate` from `node.position`), sizes it, applies `computedZIndex`, rotation
 * (`node.angle`, applied to the inner content so the measured size stays unrotated) and effective visibility
 * (`computedHidden` gives `display: none`, so unhiding re-measures). It reflects `node.selected` as the `selected`
 * attribute and `node.id` as `data-node-id`.
 *
 * Sizing follows ngDiagram: with `autoSize: false` and a `size`, the node gets that fixed size (and the configured
 * minimum size); otherwise default nodes and groups get built-in minimum sizes and nodes with a `type` size to
 * their template. Its border box is observed through the diagram's shared resize observer and written back to
 * the core.
 *
 * It provides the node context, for ports and adornments inside the template. Pressing the node selects it and
 * dragging it moves the selection (ngDiagram's node selection and pointer-move-selection directives).
 *
 * @internal
 *
 * @tagname flow-ui-diagram-node
 * @summary Internal wrapper that positions, sizes and measures one diagram node.
 *
 * @slot - The node's template.
 *
 * @csspart content - The rotated container around the node's template.
 */
declare class FlowUiDiagramNode extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /** The node to render, as handed over by the diagram's renderer. */
    node: DiagramNode;
    private runtime?;
    private observedNodeId?;
    private readonly nodeObservable;
    private lastSize?;
    private lastAngle?;
    private hasSynced;
    constructor();
    disconnectedCallback(): void;
    protected willUpdate(changed: PropertyValues<this>): void;
    protected updated(changed: PropertyValues<this>): void;
    render(): lit_html.TemplateResult<1>;
    private attachRuntime;
    private observe;
    private unobserve;
    private syncHostStyles;
    private applyExplicitSize;
    private setSizeStyles;
    /**
     * Re-measures the node's ports after its size or rotation changed (NgDiagramNodeComponent's port sync). The
     * first render is skipped: the resize observer measures the ports initially. Does nothing until a port measurer
     * is installed (ISSUE-ecbd).
     */
    private syncPortsOnGeometryChange;
}

/**
 * The diagram component displays an interactive diagram of nodes connected by edges. Set `model` to a diagram model
 * created with `initializeModel()`, or to a custom `DiagramModelAdapter` prepared with `initializeModelAdapter()`.
 * The `api` property gives access to the diagram API, and the `initialized` promise resolves to it once the diagram
 * has measured its content.
 *
 * The diagram renders each node with the template registered for its `type` in `nodeTemplateMap`, and each edge with
 * the template for its `type` in `edgeTemplateMap`. Nodes and edges without a template use the default templates.
 * Templates are rendered into the diagram's light DOM, so the page or component that hosts the diagram can style
 * them.
 *
 * The diagram stays hidden until its content has been measured, and then emits `flow-ui-diagram-init`. Note that
 * content hidden with CSS cannot be measured: hide nodes and edges with their `hidden` flag or `diagramHidden()`, and
 * ports and edge labels with their `hidden` property.
 *
 * Every diagram engine event is also emitted as a `flow-ui-diagram-*` event, with the engine's event object as
 * `detail`. The diagram also emits `flow-ui-diagram-context-menu` when the user asks for a context menu on a node, an
 * edge or the background.
 *
 * The diagram components are not registered by `registerComponents()`. `FlowUiDiagram.define()`
 * registers the diagram and the elements that its default templates render: base nodes and edges, ports, edge labels
 * and the resize and rotate adornments. Register the other diagram components that the application uses, such as the
 * background, the minimap and the palette items, with their own `define()`.
 *
 * @tagname flow-ui-diagram
 * @summary Diagrams are used to display and edit nodes connected by edges.
 * @docgroup diagram
 *
 * @dependency flow-ui-diagram-base-edge
 * @dependency flow-ui-diagram-base-node
 * @dependency flow-ui-diagram-edge
 * @dependency flow-ui-diagram-edge-label
 * @dependency flow-ui-diagram-node
 * @dependency flow-ui-diagram-resize-adornment
 *
 * @event {CustomEvent<DiagramInitEvent>} flow-ui-diagram-init - Emitted when every node, port and label has been measured and the diagram is shown.
 * @event {CustomEvent<DiagramSelectionMovedEvent>} flow-ui-diagram-selection-moved - Emitted when selected nodes are moved, by dragging or through the API.
 * @event {CustomEvent<DiagramSelectionChangedEvent>} flow-ui-diagram-selection-changed - Emitted when the selected nodes or edges change.
 * @event {CustomEvent<DiagramSelectionRemovedEvent>} flow-ui-diagram-selection-removed - Emitted when selected nodes and edges are deleted.
 * @event {CustomEvent<DiagramGroupMembershipChangedEvent>} flow-ui-diagram-group-membership-changed - Emitted when nodes are moved into or out of a group.
 * @event {CustomEvent<DiagramSelectionRotatedEvent>} flow-ui-diagram-selection-rotated - Emitted when a node is rotated.
 * @event {CustomEvent<DiagramViewportChangedEvent>} flow-ui-diagram-viewport-changed - Emitted when the viewport is panned or zoomed.
 * @event {CustomEvent<DiagramEdgeDrawnEvent>} flow-ui-diagram-edge-drawn - Emitted when the user draws an edge between two nodes. Deprecated: use `flow-ui-diagram-edge-draw-ended` instead, which is also emitted when a draw is canceled.
 * @event {CustomEvent<DiagramEdgeDrawEndedEvent>} flow-ui-diagram-edge-draw-ended - Emitted when an edge-drawing gesture ends, whether an edge was created or not.
 * @event {CustomEvent<DiagramEdgeRelinkStartedEvent>} flow-ui-diagram-edge-relink-started - Emitted when the user starts dragging an end of an existing edge.
 * @event {CustomEvent<DiagramEdgeRelinkEndedEvent>} flow-ui-diagram-edge-relink-ended - Emitted when an edge relink gesture ends: the edge is reconnected, left dangling or reverted.
 * @event {CustomEvent<DiagramClipboardPastedEvent>} flow-ui-diagram-clipboard-pasted - Emitted when nodes and edges are pasted.
 * @event {CustomEvent<DiagramNodeResizedEvent>} flow-ui-diagram-node-resized - Emitted when a node or group changes size.
 * @event {CustomEvent<DiagramPaletteItemDroppedEvent>} flow-ui-diagram-palette-item-dropped - Emitted when a palette item is dropped onto the diagram.
 * @event {CustomEvent<DiagramNodeResizeStartedEvent>} flow-ui-diagram-node-resize-started - Emitted when the user starts resizing a node.
 * @event {CustomEvent<DiagramNodeResizeEndedEvent>} flow-ui-diagram-node-resize-ended - Emitted when the user finishes resizing a node.
 * @event {CustomEvent<DiagramNodeRotateStartedEvent>} flow-ui-diagram-node-rotate-started - Emitted when the user starts rotating a node.
 * @event {CustomEvent<DiagramNodeRotateEndedEvent>} flow-ui-diagram-node-rotate-ended - Emitted when the user finishes rotating a node.
 * @event {CustomEvent<DiagramSelectionGestureEndedEvent>} flow-ui-diagram-selection-gesture-ended - Emitted when a selection gesture (click, box selection or select-all) ends.
 * @event {CustomEvent<DiagramNodeDragStartedEvent>} flow-ui-diagram-node-drag-started - Emitted when a node drag crosses the drag threshold.
 * @event {CustomEvent<DiagramNodeDragEndedEvent>} flow-ui-diagram-node-drag-ended - Emitted when the user finishes dragging nodes.
 * @event {CustomEvent<DiagramContextMenuEvent>} flow-ui-diagram-context-menu - Emitted when the user asks for a context menu: a right-click on a node, an edge or the background, or a touch long press on a node or an edge. The `detail` has the `target` and `targetType`, and the `clientPosition` and `flowPosition` to open the menu at. Calling `event.preventDefault()` will cancel the browser's context menu.
 *
 * @slot background - A background, such as `flow-ui-diagram-background`, drawn beneath the content. A
 *   `flow-ui-diagram-background` child is assigned to it automatically. Without one, the diagram has the plain
 *   `--flow-ui-diagram-background-color`.
 * @slot overlay - Elements drawn above the diagram, such as `flow-ui-diagram-minimap` and
 *   `flow-ui-diagram-zoom-controls` (assigned to it automatically when they are direct children). Pointer presses
 *   on overlay elements do not pan, select or box-select in the diagram.
 *
 * @csspart background - The container of the `background` slot.
 * @csspart overlay - The container of the `overlay` slot, covering the diagram. It does not take pointer events
 *   itself, but its slotted elements do.
 * @csspart canvas - The transformed layer (pan and zoom) that holds the nodes and edges.
 * @csspart box-selection - The rectangle drawn during a box selection.
 *
 * @cssproperty --flow-ui-diagram-background-color - The diagram's background color.
 * @cssproperty --flow-ui-diagram-text-color - The default text color of the diagram content.
 * @cssproperty --flow-ui-diagram-accent-color - The accent color (selection, hover, handles).
 * @cssproperty --flow-ui-diagram-node-background-color - The background color of default nodes.
 * @cssproperty --flow-ui-diagram-node-border-color - The border color of default nodes.
 * @cssproperty --flow-ui-diagram-node-border-color-hover - The border color of hovered and selected default nodes.
 * @cssproperty --flow-ui-diagram-node-border-radius - The corner radius of default nodes.
 * @cssproperty --flow-ui-diagram-selected-node-box-shadow - The box shadow of selected default nodes.
 * @cssproperty --flow-ui-diagram-group-border-color - The border color of default groups.
 * @cssproperty --flow-ui-diagram-box-selection-background - The fill of the box-selection rectangle.
 * @cssproperty --flow-ui-diagram-box-selection-border-color - The border color of the box-selection rectangle.
 * @cssproperty --flow-ui-diagram-box-selection-border-size - The border width of the box-selection rectangle.
 */
declare class FlowUiDiagram extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiDiagramBaseEdge | typeof FlowUiDiagramResizeAdornment | typeof FlowUiDiagramBaseNode | typeof FlowUiDiagramEdge | typeof FlowUiDiagramEdgeLabel | typeof FlowUiDiagramNode)[];
    /**
     * The diagram model. Create one with `initializeModel({ nodes, edges })`. Setting a new model re-creates the
     * diagram engine. Note that removing the diagram from the document destroys its model: to show the diagram again,
     * set a new model.
     */
    model?: DiagramModelAdapter;
    /**
     * The diagram configuration object: any subset of the engine's configuration (zoom, snapping, linking, edge
     * routing and so on). See the [Configuration Reference](../../diagrams/configuration) for every option. It is
     * applied when the model is set, and later changes are merged into the current configuration.
     */
    config?: DiagramConfig;
    /**
     * The middleware chain, read when the model is set. Defaults to the built-in middlewares. To add, remove or replace
     * middlewares, build a chain from the built-in ones with `createMiddlewares()`. Note that a faulty middleware can
     * slow down or break every state update.
     */
    middlewares: DiagramMiddlewareChain;
    /**
     * The node templates, by node `type`, as a `Map` or a plain object. Each template is a render function or a
     * custom element tag name. Note that a render function is called again only when its node changes (the engine
     * hands over a new node object) or the map is replaced, so derive what it renders from the node, or use a
     * tag-name template with its own state.
     */
    nodeTemplateMap?: DiagramNodeTemplateMap;
    /**
     * The edge templates, by edge `type`, as a `Map` or a plain object. Each template is a render function or a
     * custom element tag name. As with nodes, a render function is called again only when its edge changes or the map
     * is replaced.
     */
    edgeTemplateMap?: DiagramEdgeTemplateMap;
    /**
     * Set to `false` to take the diagram out of the page's Tab order (`tabindex="-1"` instead of `tabindex="0"`). It
     * can still be clicked and focused from code, and keyboard shortcuts still work while it has focus. Focusable
     * content inside node and edge templates keeps its own Tab stops.
     */
    tabbable: boolean;
    /**
     * The selection mode: how pressing nodes and edges changes the selection. In `default` mode, a press selects the
     * pressed node or edge alone, unless the multi-selection modifier is held. In `toggle` mode, each tap adds the
     * tapped node or edge to the selection or removes it, which allows multi-selection on touch screens. Note that
     * switching modes keeps the current selection.
     */
    selectionMode: DiagramSelectionMode;
    private canvas?;
    private boxSelectionEl?;
    private readonly runtime;
    private readonly _api;
    private readonly flowOffset;
    private readonly nodeTemplates;
    private readonly edgeTemplates;
    private readonly contentEl;
    private readonly isInitializedController;
    private readonly configController;
    private readonly _initialized;
    private resolveInitialized;
    private initializedModel?;
    private destroyedModel?;
    private viewportResizeObserver?;
    /**
     * The diagram API. It is the same object for the element's lifetime. Note that most of its methods throw until the
     * diagram has a model. To wait until the diagram is ready, use `initialized`.
     */
    get api(): DiagramApi;
    /**
     * A promise that resolves to the diagram API when the diagram has been initialized for the first time: its
     * content has been measured and `flow-ui-diagram-init` has been emitted. This is the safest way to retrieve the API
     * before using it.
     */
    get initialized(): Promise<DiagramApi>;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected willUpdate(changed: PropertyValues<this>): void;
    protected firstUpdated(): void;
    protected updated(changed: PropertyValues<this>): void;
    render(): lit_html.TemplateResult<1>;
    private stopOverlayInput;
    private ignoreOverlayContextMenu;
    /**
     * The host input controllers, in ngDiagram's `hostDirectives` order. Each adds its host listeners in its
     * constructor and several see the same event, coordinating through flags on it, so this order is load-bearing.
     * The commented slots are where the controllers of later features go (see `src/diagram/README.md`).
     */
    private attachInputControllers;
    private initializeEngine;
    private renderContent;
    private renderNodeTemplate;
    private renderEdgeTemplate;
    private applyViewportTransform;
    private applyBoxSelection;
    private startViewportSizeTracking;
    private stopViewportSizeTracking;
    private updateViewportSize;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-diagram': FlowUiDiagram;
    }
}

/**
 * The diagram background component draws a background for `flow-ui-diagram` that follows the diagram's pan and zoom.
 * Put it inside the diagram: as a direct child it is assigned to the diagram's `background` slot automatically.
 *
 * - `type="dots"` (the default) draws a dot every `config.background.dotSpacing` pixels (30 by default). The dots
 *   fade out as the diagram zooms out and disappear below 30% zoom.
 * - `type="grid"` draws minor lines every `config.background.cellSize` (10 × 10 by default) and a major line every
 *   `config.background.majorLinesFrequency` minor cells (5 × 5 by default).
 *
 * Slotted content replaces the built-in pattern and covers the whole diagram. To make custom content follow the
 * viewport, use the `--flow-ui-diagram-viewport-x`, `--flow-ui-diagram-viewport-y` (pan offset, in pixels) and
 * `--flow-ui-diagram-viewport-scale` (zoom scale, a number) custom properties the element sets on itself, for
 * example in a `background-position` and `background-size`.
 *
 * Without a background element, the diagram shows its plain `--flow-ui-diagram-background-color`. The background does
 * not take pointer events.
 *
 * @tagname flow-ui-diagram-background
 * @summary Diagram backgrounds are used to draw a dotted, grid or custom backdrop that follows pan and zoom.
 * @docgroup diagram
 *
 * @slot - Custom background content, in place of the built-in pattern.
 *
 * @csspart pattern - The SVG that draws the built-in dots or grid.
 * @csspart custom - The container of slotted custom content.
 *
 * @cssproperty --flow-ui-diagram-background-dot-color - The color of the dots.
 * @cssproperty --flow-ui-diagram-background-line-minor-color - The color of minor grid lines.
 * @cssproperty --flow-ui-diagram-background-line-major-color - The color of major grid lines.
 * @cssproperty --flow-ui-diagram-background-line-minor-width - The width of minor grid lines, in pixels (a number).
 * @cssproperty --flow-ui-diagram-background-line-major-width - The width of major grid lines, in pixels (a number).
 * @cssproperty --flow-ui-diagram-background-line-minor-opacity - The opacity of minor grid lines.
 * @cssproperty --flow-ui-diagram-background-line-major-opacity - The opacity of major grid lines.
 */
declare class FlowUiDiagramBackground extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /** The built-in pattern. Note that it is ignored when the element has custom content. */
    type: 'dots' | 'grid';
    private pattern?;
    private patternSvg?;
    private readonly hasSlotController;
    private readonly configObserver;
    private runtime?;
    private unsubscribeViewport?;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected updated(_changed: PropertyValues<this>): void;
    render(): lit_html.TemplateResult<1>;
    private renderDots;
    private renderGrid;
    private get dotSpacing();
    /** The smallest (minor) grid cell. */
    private get cellSize();
    /** How often major lines appear, in minor cells. */
    private get majorLinesFrequency();
    /** The grid pattern tile: one major cell. */
    private get gridPatternSize();
    private gridLines;
    private subscribeViewport;
    private applyViewport;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-diagram-background': FlowUiDiagramBackground;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-diagram-base-edge': FlowUiDiagramBaseEdge;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-diagram-base-node': FlowUiDiagramBaseNode;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-diagram-edge': FlowUiDiagramEdge;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-diagram-edge-label': FlowUiDiagramEdgeLabel;
    }
}

/**
 * The diagram marker component defines SVG markers that diagram edges can use as arrowheads. Place it inside
 * `flow-ui-diagram` with an `<svg>` holding one or more `<marker>` elements. Each is registered under its `id`, which
 * edges reference as `sourceArrowhead` / `targetArrowhead` (or `flow-ui-diagram-base-edge`'s `source-arrowhead` /
 * `target-arrowhead`). Note that the marker element must be inside the diagram.
 *
 * The element itself is not displayed: every edge draws its own copy of the marker. Draw with `context-stroke` (or
 * `context-fill`) to take the stroke color of the edge, including its hover and selected colors; browsers without
 * `context-stroke` support (Safari) get `currentColor`, which edges set to their stroke color. Changes to the
 * markers are picked up.
 *
 * The built-in arrow, `flow-ui-diagram-arrow`, needs no definition.
 *
 * @tagname flow-ui-diagram-marker
 * @summary Diagram markers are used to define SVG arrowheads for diagram edges.
 * @docgroup diagram
 *
 * @slot - An `<svg>` with the `<marker>` definitions.
 */
declare class FlowUiDiagramMarker extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private runtime?;
    private readonly registered;
    private mutationObserver?;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected firstUpdated(): void;
    render(): lit_html.TemplateResult<1>;
    /** Registers the current `<marker id>` elements and unregisters the ones that are gone. */
    private sync;
    private unregisterAll;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-diagram-marker': FlowUiDiagramMarker;
    }
}

/**
 * The zoom controls component shows zoom in, zoom out and fit-to-view buttons for a `flow-ui-diagram`, with the current
 * zoom level. `flow-ui-diagram-minimap` includes them, and they can also be used alone.
 *
 * The controls work with the diagram they are inside (as a direct child they are assigned to its `overlay` slot
 * automatically), or with the diagram named by `diagram`: the `id` of a `flow-ui-diagram` in the same document or
 * shadow root, or the element itself. With `position`, they sit in that corner of their containing block (the
 * diagram, when in its overlay) on a panel.
 *
 * Zoom in and out change the zoom scale by `step` (clamped to the diagram's `zoom.min` and `zoom.max`), keeping
 * the center of the view in place. Fit calls `api.viewport.zoomToFit()`, with the diagram's
 * `zoom.zoomToFit.padding`.
 *
 * @tagname flow-ui-diagram-zoom-controls
 * @summary Zoom controls allow users to zoom a diagram in and out, and to fit its content into the view.
 * @docgroup diagram
 *
 * @dependency flow-ui-icon-button
 *
 * @csspart base - The container of the buttons and the label.
 * @csspart zoom-out - The zoom-out button (`flow-ui-icon-button`).
 * @csspart label - The zoom level label.
 * @csspart zoom-in - The zoom-in button (`flow-ui-icon-button`).
 * @csspart fit - The fit-to-view button (`flow-ui-icon-button`).
 *
 * @cssproperty --flow-ui-diagram-nav-button-color - The color of the buttons.
 * @cssproperty --flow-ui-diagram-nav-button-size - The size of the button icons.
 * @cssproperty --flow-ui-diagram-nav-button-padding - The padding around the button icons.
 * @cssproperty --flow-ui-diagram-nav-button-border-radius - The corner radius of the buttons.
 * @cssproperty --flow-ui-diagram-nav-button-background-color-hover - The background color of hovered buttons.
 * @cssproperty --flow-ui-diagram-nav-button-color-active - The color of pressed buttons.
 * @cssproperty --flow-ui-diagram-nav-button-color-disabled - The color of disabled buttons.
 * @cssproperty --flow-ui-diagram-zoom-controls-font-size - The font size of the zoom level.
 * @cssproperty --flow-ui-diagram-zoom-controls-font-weight - The font weight of the zoom level.
 * @cssproperty --flow-ui-diagram-zoom-controls-color - The color of the zoom level.
 */
declare class FlowUiDiagramZoomControls extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIconButton)[];
    /**
     * The diagram to control: the `id` of a `flow-ui-diagram` in the same document or shadow root (attribute), or
     * the diagram element (property). If not set, the controls use the diagram they are inside.
     */
    diagram?: DiagramReference;
    /** The change in zoom scale for one click on zoom in or zoom out (`0.1` is 10 percentage points). */
    step: number;
    /**
     * The corner of the containing block to place the controls in, on a panel. If not set, the controls are laid out
     * inline, without a panel (as inside the minimap).
     */
    position?: DiagramPanelPosition;
    /** Set to `false` to hide the fit-to-view button. */
    showFit: boolean;
    private readonly reference;
    private readonly viewportObserver;
    private readonly configObserver;
    private readonly initializedObserver;
    constructor();
    connectedCallback(): void;
    protected willUpdate(changed: PropertyValues<this>): void;
    private observeRuntime;
    private get scale();
    private get canZoomIn();
    private get canZoomOut();
    /** Zooms in by `step`, around the center of the view. */
    zoomIn(): void;
    /** Zooms out by `step`, around the center of the view. */
    zoomOut(): void;
    /** Fits the diagram content into the view. */
    fit(): void;
    private zoomBy;
    render(): lit_html.TemplateResult<1>;
}

/**
 * The minimap component shows a bird's-eye view of a `flow-ui-diagram`. It draws every visible node as a small shape
 * and the visible area as a rectangle, and follows pan, zoom and model changes. Edges are not drawn.
 *
 * Drag on the minimap to pan the diagram: the visible area follows the pointer. Pressing outside the visible area
 * first centers the view on that point. Zoom controls (`flow-ui-diagram-zoom-controls`) are shown below the map
 * unless `show-zoom-controls="false"`.
 *
 * The minimap works with the diagram it is inside (as a direct child it is assigned to the diagram's `overlay`
 * slot automatically), or with the diagram named by `diagram`: the `id` of a `flow-ui-diagram` in the same
 * document or shadow root (it may be created later), or the element itself. It sits in the `position` corner of its
 * containing block: inside the diagram, the diagram; outside, give the parent `position: relative`.
 *
 * Nodes are drawn as rectangles in `--flow-ui-diagram-minimap-node-color`. `nodeStyle` changes the shape, colors
 * and opacity per node; `nodeTemplateMap` draws chosen node types with a template instead (rendered as HTML inside
 * an SVG `foreignObject`, which is slower: use it sparingly). With a virtualized diagram, no nodes are drawn, only
 * the diagram's extent and the visible area.
 *
 * @tagname flow-ui-diagram-minimap
 * @summary Minimaps provide a navigable overview of a diagram, with zoom controls.
 * @docgroup diagram
 *
 * @dependency flow-ui-diagram-zoom-controls
 *
 * @csspart base - The panel that holds the map and the zoom controls.
 * @csspart svg - The map.
 * @csspart node - Each default node shape. A node's `nodeStyle.cssClass` names are added as part names too.
 * @csspart viewport - The rectangle of the visible area.
 * @csspart diagram-bounds - The diagram's extent, drawn in virtualized mode.
 * @csspart zoom-controls - The zoom controls.
 *
 * @cssproperty --flow-ui-diagram-minimap-background - The panel background.
 * @cssproperty --flow-ui-diagram-minimap-border-color - The panel border color.
 * @cssproperty --flow-ui-diagram-minimap-border-radius - The panel corner radius.
 * @cssproperty --flow-ui-diagram-minimap-padding - The panel padding.
 * @cssproperty --flow-ui-diagram-minimap-margin - The distance from the corner of the containing block.
 * @cssproperty --flow-ui-diagram-minimap-shadow-color - The color of the panel shadow.
 * @cssproperty --flow-ui-diagram-minimap-node-color - The fill of the default node shapes.
 * @cssproperty --flow-ui-diagram-minimap-node-opacity - The opacity of the default node shapes.
 * @cssproperty --flow-ui-diagram-minimap-viewport-stroke-color - The stroke of the visible-area rectangle.
 * @cssproperty --flow-ui-diagram-minimap-viewport-stroke-width - The stroke width of the visible-area rectangle (a number).
 * @cssproperty --flow-ui-diagram-minimap-diagram-bounds-color - The fill of the diagram extent (virtualized mode).
 * @cssproperty --flow-ui-diagram-minimap-diagram-bounds-opacity - The opacity of the diagram extent (virtualized mode).
 */
declare class FlowUiDiagramMinimap extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiDiagramZoomControls)[];
    /**
     * The diagram to show: the `id` of a `flow-ui-diagram` in the same document or shadow root (attribute), or the
     * diagram element (property). If not set, the minimap uses the diagram it is inside.
     */
    diagram?: DiagramReference;
    /** The corner of the containing block to place the minimap in. */
    position: DiagramPanelPosition;
    /** The width of the map, in pixels. */
    width: number;
    /** The height of the map, in pixels. */
    height: number;
    /** Set to `false` to hide the zoom controls below the map. */
    showZoomControls: boolean;
    /**
     * Set to `true` to update the nodes on the minimap only when a drag, resize or rotation ends, not while it is in
     * progress. The visible-area rectangle always updates. We recommend it for large diagrams.
     */
    deferNodeUpdates: boolean;
    /**
     * The function that computes the style of each node (shape, fill, stroke, opacity, extra part names). Return
     * `null` or `undefined` for the default style.
     */
    nodeStyle?: DiagramMinimapNodeStyleFn;
    /**
     * The minimap node templates, by node `type`, as a `Map` or a plain object. Each template is a render function or
     * a custom element tag name. Types that are not in the map are drawn as shapes.
     */
    nodeTemplateMap?: DiagramMinimapNodeTemplateMap;
    private readonly reference;
    private readonly navigation;
    private readonly nodesObserver;
    private readonly viewportObserver;
    private readonly initializedObserver;
    private readonly actionStateObserver;
    private readonly flowCoreObserver;
    private readonly templates;
    private templateLookup;
    private readonly directStrategy;
    private readonly virtualizedStrategy;
    /** Cached stroke width, read once from CSS, so rendering does not call `getComputedStyle()`. */
    private strokePadding;
    private memoKey;
    private minimapNodes;
    private diagramBounds;
    private transform;
    private viewportRect;
    constructor();
    connectedCallback(): void;
    protected willUpdate(changed: PropertyValues<this>): void;
    protected firstUpdated(): void;
    private observeRuntime;
    private get viewport();
    private get initialized();
    /** The strategy for the rendering mode. Switching virtualization re-creates the engine, so this is stable. */
    private get strategy();
    private get showDiagramBounds();
    private computeLayout;
    render(): lit_html.TemplateResult<1>;
    private renderNodeLayer;
    private renderOverlay;
    private renderNode;
    private renderTemplate;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-diagram-minimap': FlowUiDiagramMinimap;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-diagram-node': FlowUiDiagramNode;
    }
}

/**
 * The palette item component is content that can be dragged onto a `flow-ui-diagram` to add the node (or group)
 * described by `item`, with its top-left corner at the drop point. The diagram then emits
 * `flow-ui-diagram-palette-item-dropped`.
 *
 * The slotted content is what the palette shows. Add a `flow-ui-diagram-palette-item-preview` inside it for the
 * drag image: with content of its own, or empty to show the node as the diagram renders it. Without a preview, the
 * browser's default drag image is used. A palette is any layout of items; grouping them into sections is up to the
 * page.
 *
 * Dragging uses the browser's drag and drop: the item is put into the `DataTransfer` as JSON, under the
 * `DIAGRAM_PALETTE_ITEM_MIME_TYPE` type and as `text/plain`, so it can be dropped onto a diagram on any part of the
 * page. On a touch screen, a touch drag from the item is dropped onto the diagram under the finger when it lifts.
 *
 * `diagram` links the item to a diagram, for its preview: the preview renders through that diagram's node templates
 * and is scaled to its zoom level. Without it, an item inside a diagram (for example in its `overlay` slot) uses that
 * diagram. Dropping works on any diagram either way.
 *
 * @tagname flow-ui-diagram-palette-item
 * @summary Palette items allow users to add nodes to a diagram by dragging them from a palette.
 * @docgroup diagram
 *
 * @slot - The item's content, and optionally its `flow-ui-diagram-palette-item-preview`.
 *
 * @csspart base - The draggable container around the content.
 */
declare class FlowUiDiagramPaletteItem extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /**
     * The node or group that dropping the item creates: its `type`, `data`, `size`, `autoSize`, `resizable`,
     * `rotatable`, `angle`, `zOrder` and, for a group, `isGroup`. The node gets a new ID and the drop point as its
     * position. Set it as a property, or as JSON in the attribute.
     */
    item?: DiagramPaletteItem;
    /**
     * The diagram whose node templates and zoom level the item's preview uses: the `id` of a `flow-ui-diagram` in the
     * same document or shadow root (attribute), or the diagram element (property). If not set, the item uses the
     * diagram it is inside, if any.
     */
    diagram?: DiagramReference;
    private readonly itemObservable;
    private readonly runtimeObservable;
    private readonly reference;
    private readonly previews;
    private touchPreview?;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected willUpdate(changed: PropertyValues<this>): void;
    render(): lit_html.TemplateResult<1>;
    /** The item's preview: the first registered one. */
    private get preview();
    private onDragStart;
    /**
     * Uses the preview as the drag image. The preview is placed for the drag image during `dragstart` (the browser
     * takes the bitmap then) and parked again on the next frame, before anything is painted; `dragend` backs that up,
     * because frames do not run while the tab is hidden.
     */
    private setDragImage;
    private onDragEnd;
    private onTouchStart;
    private onTouchMove;
    private onTouchFinish;
    private endTouchDrag;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-diagram-palette-item': FlowUiDiagramPaletteItem;
    }
}

/**
 * What a palette item needs from its preview (`flow-ui-diagram-palette-item-preview`).
 *
 * @internal
 */
interface DiagramPalettePreviewHandle {
    /**
     * Prepares the drag image with its top-left corner at the client point and returns the element to pass to
     * `setDragImage()`, or `null` when there is nothing to show.
     */
    beginDragImage(clientX: number, clientY: number): HTMLElement | null;
    /** Parks the preview again, after `beginDragImage()` or the touch ghost. */
    endDragImage(): void;
    /** Shows the preview under the finger during a touch drag, with its top-left corner at the client point. */
    showTouchGhost(clientX: number, clientY: number): void;
    /** Hides the touch ghost. */
    hideTouchGhost(): void;
}

/**
 * The palette item preview component defines what is shown under the pointer while a `flow-ui-diagram-palette-item` is
 * dragged onto a diagram. Put it inside the palette item.
 *
 * With content, the preview shows that content. Without content, it shows the item's node as the diagram renders
 * it: with the template for the item's `type` in its own `nodeTemplateMap`, else in the `nodeTemplateMap` of the
 * item's diagram (see the item's `diagram`), else with the default node or group template. Ports, edge labels,
 * resize and rotate handles inside the preview are inert, as outside a diagram.
 *
 * The preview is never shown in the page: it stays rendered off-screen, because the drag image is taken from it
 * when the drag starts. The drag image is scaled to the diagram's zoom level (up to 3x), so it matches the node that
 * the drop creates. The node is created with its top-left corner at the drop point, which is the top-left corner of
 * the drag image. On a touch screen, where browsers do not show a drag image, the preview follows the finger.
 *
 * Content and render-function templates are in the light DOM, so the page that hosts the palette styles them.
 *
 * @tagname flow-ui-diagram-palette-item-preview
 * @summary Palette item previews are used with palette items to provide the drag image.
 * @docgroup diagram
 *
 * @dependency flow-ui-diagram-base-node
 * @dependency flow-ui-diagram-resize-adornment
 *
 * @slot - Custom preview content. Without it, the preview renders the item's node through the node templates.
 *
 * @csspart base - The off-screen container of the preview, which becomes the drag image.
 */
declare class FlowUiDiagramPaletteItemPreview extends FlowRdfElement implements DiagramPalettePreviewHandle {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiDiagramResizeAdornment | typeof FlowUiDiagramBaseNode)[];
    /**
     * The node templates, by node `type`, as a `Map` or a plain object, used instead of the `nodeTemplateMap` of the
     * item's diagram. Note that they are only used when the preview has no slotted content.
     */
    nodeTemplateMap?: DiagramNodeTemplateMap;
    private hasCustomContent;
    private draggedNodeEl?;
    private zoomEl?;
    private readonly nodeEl;
    private readonly templates;
    private appliedTemplateMap?;
    private readonly itemObserver;
    private readonly diagramTemplateMapObserver;
    private readonly runtimeObserver;
    private unregister?;
    private ghostOrigin?;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    /** @internal */
    beginDragImage(clientX: number, clientY: number): HTMLElement | null;
    /** @internal */
    endDragImage(): void;
    /** @internal */
    showTouchGhost(clientX: number, clientY: number): void;
    /** @internal */
    hideTouchGhost(): void;
    protected willUpdate(changed: PropertyValues<this>): void;
    protected updated(): void;
    render(): lit_html.TemplateResult<1>;
    private onSlotChange;
    /** Whether the preview has content of its own (elements or text for the default slot). */
    private findCustomContent;
    private get hasContent();
    private renderNode;
    private applyNodeSize;
    /**
     * Takes the preview out of its clipping container (`position: fixed`) with its top-left corner at the client
     * point, scaled to the diagram's zoom. In place rather than as a clone (ngDiagram): a clone would not have the
     * shadow roots of the elements inside. Restored by `endDragImage()`; the item does that on the next frame, before
     * anything is painted, so it never shows in the page.
     */
    private place;
    private blockDiagramContexts;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-diagram-palette-item-preview': FlowUiDiagramPaletteItemPreview;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-diagram-port': FlowUiDiagramPort;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-diagram-resize-adornment': FlowUiDiagramResizeAdornment;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-diagram-rotate-adornment': FlowUiDiagramRotateAdornment;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-diagram-zoom-controls': FlowUiDiagramZoomControls;
    }
}

/**
 * @tagname flow-ui-details
 * @summary Details show a brief summary and expand to show additional content.

 *
 * @dependency flow-ui-icon
 *
 * @slot - The details' main content.
 * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
 * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<flow-ui-icon>`.
 * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<flow-ui-icon>`.
 *
 * @event flow-ui-show - Emitted when the details opens.
 * @event flow-ui-after-show - Emitted after the details opens and all animations are complete.
 * @event flow-ui-hide - Emitted when the details closes.
 * @event flow-ui-after-hide - Emitted after the details closes and all animations are complete.
 *
 * @csspart base - The component's base wrapper.
 * @csspart header - The header that wraps both the summary and the expand/collapse icon.
 * @csspart summary - The container that wraps the summary.
 * @csspart summary-icon - The container that wraps the expand/collapse icons.
 * @csspart content - The details content.
 *
 * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
 * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
 */
declare class FlowUiDetails extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon)[];
    private readonly localize;
    /** @internal */
    details: HTMLElement;
    /** @internal */
    header: HTMLElement;
    /** @internal */
    body: HTMLElement;
    /** @internal */
    expandIconSlot: HTMLSlotElement;
    /**
     * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
     * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
     */
    open: boolean;
    /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
    summary: string;
    /** Disables the details so it can't be toggled. */
    disabled: boolean;
    connectedCallback(): void;
    firstUpdated(): void;
    private handleSummaryClick;
    private handleSummaryKeyDown;
    /** @internal */
    handleOpenChange(): Promise<void>;
    /** Shows the details. */
    show(): Promise<void>;
    /** Hides the details */
    hide(): Promise<void>;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-details': FlowUiDetails;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-dialog': FlowUiDialog;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-divider': FlowUiDivider;
    }
}

/**
 * @tagname flow-ui-drawer
 * @summary Drawers slide in from a container to expose additional options and information.
 *
 * @dependency flow-ui-icon-button
 *
 * @slot - The drawer's main content.
 * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.
 * @slot header-actions - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.
 * @slot footer - The drawer's footer, usually one or more buttons representing various options.
 *
 * @event flow-ui-show - Emitted when the drawer opens.
 * @event flow-ui-after-show - Emitted after the drawer opens and all animations are complete.
 * @event flow-ui-hide - Emitted when the drawer closes.
 * @event flow-ui-after-hide - Emitted after the drawer closes and all animations are complete.
 * @event flow-ui-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling
 *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
 * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} flow-ui-request-close - Emitted when the user attempts to
 *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling
 *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
 *   destructive behavior such as data loss.
 *
 * @csspart base - The component's base wrapper.
 * @csspart overlay - The overlay that covers the screen behind the drawer.
 * @csspart panel - The drawer's panel (where the drawer and its content are rendered).
 * @csspart header - The drawer's header. This element wraps the title and header actions.
 * @csspart header-actions - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.
 * @csspart title - The drawer's title.
 * @csspart close-button - The close button, an `<flow-ui-icon-button>`.
 * @csspart close-button__base - The close button's exported `base` part.
 * @csspart body - The drawer's body.
 * @csspart footer - The drawer's footer.
 *
 * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height
 *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.
 * @cssproperty --header-spacing - The amount of padding to use for the header.
 * @cssproperty --body-spacing - The amount of padding to use for the body.
 * @cssproperty --footer-spacing - The amount of padding to use for the footer.
 *
 * @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.
 * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.
 * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.
 * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.
 * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.
 * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.
 * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.
 * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.
 * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.
 * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.
 * @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.
 */
declare class FlowUiDrawer extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIconButton)[];
    private readonly hasSlotController;
    private readonly localize;
    private modal;
    private originalTrigger;
    /** @internal */
    drawer: HTMLElement;
    /** @internal */
    panel: HTMLElement;
    /** @internal */
    overlay: HTMLElement;
    /**
     * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
     * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
     */
    open: boolean;
    /**
     * The drawer's label as displayed in the header. You should always include a relevant label even when using
     * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
     */
    label: string;
    /** The direction from which the drawer will open. */
    placement: 'top' | 'end' | 'bottom' | 'start';
    /**
     * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
     * its parent element, set this attribute and add `position: relative` to the parent.
     */
    contained: boolean;
    /**
     * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
     * accessible way for users to dismiss the drawer.
     */
    noHeader: boolean;
    connectedCallback(): void;
    firstUpdated(): void;
    disconnectedCallback(): void;
    private requestClose;
    private addOpenListeners;
    private removeOpenListeners;
    private handleDocumentKeyDown;
    /** @internal */
    handleOpenChange(): Promise<void>;
    /** @internal */
    handleNoModalChange(): void;
    /** Shows the drawer. */
    show(): Promise<void>;
    /** Hides the drawer */
    hide(): Promise<void>;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-drawer': FlowUiDrawer;
    }
}

/**
 * @tagname flow-ui-menu
 * @summary Menus provide a list of options for the user to choose from.
 * @docgroup menu

 * @slot - The menu's content, including menu items, menu labels, and dividers.
 *
 * @event {CustomEvent<{item: FlowMenuItem}>} flow-ui-select - Emitted when a menu item is selected.
 */
declare class FlowUiMenu extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    connectedCallback(): void;
    private handleClick;
    private handleKeyDown;
    private handleMouseDown;
    private handleSlotChange;
    private isMenuItem;
    /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
    getAllItems(): FlowUiMenuItem[];
    /**
     * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
     * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
     */
    getCurrentItem(): FlowUiMenuItem | undefined;
    /**
     * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
     * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
     */
    setCurrentItem(item: FlowUiMenuItem): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-menu': FlowUiMenu;
    }
}

/**
 * @tagname flow-ui-dropdown
 * @summary Dropdowns expose additional content that "drops down" in a panel.
 *
 * @dependency flow-ui-popup
 *
 * @slot - The dropdown's main content.
 * @slot trigger - The dropdown's trigger, usually a `<flow-ui-button>` element.
 *
 * @event flow-ui-show - Emitted when the dropdown opens.
 * @event flow-ui-after-show - Emitted after the dropdown opens and all animations are complete.
 * @event flow-ui-hide - Emitted when the dropdown closes.
 * @event flow-ui-after-hide - Emitted after the dropdown closes and all animations are complete.
 *
 * @csspart base - The component's base wrapper, an `<flow-ui-popup>` element.
 * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
 * @csspart trigger - The container that wraps the trigger.
 * @csspart panel - The panel that gets shown when the dropdown is open.
 *
 * @animation dropdown.show - The animation to use when showing the dropdown.
 * @animation dropdown.hide - The animation to use when hiding the dropdown.
 */
declare class FlowUiDropdown extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiPopup)[];
    /** @internal */
    popup: FlowUiPopup;
    /** @internal */
    trigger: HTMLSlotElement;
    /** @internal */
    panel: HTMLSlotElement;
    private readonly localize;
    private closeWatcher;
    /**
     * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
     * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
     */
    open: boolean;
    /**
     * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
     * inside of the viewport.
     */
    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
    /** Disables the dropdown so the panel will not open. */
    disabled: boolean;
    /**
     * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
     * dropdowns that allow for multiple interactions.
     */
    stayOpenOnSelect: boolean;
    /**
     * The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
     * components that use a dropdown internally.
     */
    containingElement?: HTMLElement;
    /** The distance in pixels from which to offset the panel away from its trigger. */
    distance: number;
    /** The distance in pixels from which to offset the panel along its trigger. */
    skidding: number;
    /**
     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
     */
    hoist: boolean;
    /**
     * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and
     * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using
     * `::part(arrow)` in your stylesheet.
     */
    arrow: boolean;
    /**
     * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the
     * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will
     * align the arrow to the start, end, or center of the popover instead.
     */
    arrowPlacement: 'start' | 'end' | 'center' | 'anchor';
    /**
     * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,
     * this will prevent it from overflowing the corners.
     */
    arrowPadding: number;
    /**
     * Syncs the popup width or height to that of the trigger element.
     */
    sync: 'width' | 'height' | 'both' | undefined;
    connectedCallback(): void;
    firstUpdated(): void;
    disconnectedCallback(): void;
    /** @internal */
    focusOnTrigger(): void;
    /** @internal */
    getMenu(): FlowUiMenu | undefined;
    private handleKeyDown;
    private handleDocumentKeyDown;
    private handleDocumentMouseDown;
    private handlePanelSelect;
    /** @internal */
    handleTriggerClick(): void;
    /** @internal */
    handleTriggerKeyDown(event: KeyboardEvent): Promise<void>;
    /** @internal */
    handleTriggerKeyUp(event: KeyboardEvent): void;
    /** @internal */
    handleTriggerSlotChange(): void;
    /** @internal */
    updateAccessibleTrigger(): void;
    /** Shows the dropdown panel. */
    show(): Promise<void>;
    /** Hides the dropdown panel */
    hide(): Promise<void>;
    /**
     * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
     * is activated.
     */
    reposition(): void;
    /** @internal */
    addOpenListeners(): void;
    /** @internal */
    removeOpenListeners(): void;
    /** @internal */
    handleOpenChange(): Promise<void>;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-dropdown': FlowUiDropdown;
    }
}

/**
 * The form group component applies its `size` to the form controls it contains, such as
 * [inputs](./flow-ui-input), [selects](./flow-ui-select) and [radio groups](./flow-ui-radio-group). Set `borders` to
 * draw the controls in a bordered panel with a divider between each control.
 *
 * @tagname flow-ui-form-group
 * @summary Form groups are used to group related form controls under a shared label and help text.
 *
 * @slot - The default slot where form controls are placed.
 * @slot label - The form group's label. Alternatively, you can use the `label` attribute.
 * @slot help-text - The form group's help text. Alternatively, you can use the `help-text` attribute.
 *
 * @csspart form-control - The component's base wrapper.
 * @csspart label - The label's wrapper.
 * @csspart help-text - The help text's wrapper.
 * @csspart control - The container that wraps the form controls.
 */
declare class FlowUiFormGroup extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal - add form control class */
    class: string;
    /**
     * The form group's label. If you need to display HTML, use the `label` slot instead.
     */
    label: string;
    /** The form group's size. Child form controls will automatically be set to the selected size. */
    size: 'small' | 'medium' | 'large';
    /** The form group's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** Set to `true` to draw the form controls in a bordered panel with a divider between each control. */
    borders: boolean;
    /** The form group's theme variant. */
    variant: 'default' | 'warning' | 'danger';
    connectedCallback(): void;
    /** @internal */
    handleClassChange(): void;
    /** @internal */
    handleStyleChange(): void;
    private syncControls;
    private getAllControls;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-form-group': FlowUiFormGroup;
    }
}

/**
 * @tagname flow-ui-gauge
 * @summary Gauges are used to display a single value with an optional icon and heading.
 *
 * @dependency flow-ui-button
 * @dependency flow-ui-dialog
 * @dependency flow-ui-icon
 * @dependency flow-ui-icon-button
 *
 * @slot title - The gauge's title. Alternatively, you can use the `title` attribute.
 * @slot value - The gauge's value. Alternatively, you can use the `value` attribute.
 * @slot unit - Alternatively, you can use the `unit` attribute.
 * @slot info - The content to display in the gauge's info dialog. If this is set then an info button will be displayed in the gauge's header.
 *
 * @csspart base - The component's base wrapper.
 * @csspart header - The gauge's header.
 * @csspart header-icon - The icon in the gauge's header.
 * @csspart title - The title text in the gauge's header.
 * @csspart info-button - The info button in the gauge's header (if info dialog configured).
 */
declare class FlowUiGauge extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon | typeof FlowUiButton | typeof FlowUiIconButton | typeof FlowUiDialog)[];
    private readonly hasSlotController;
    private _formatter;
    private _infoDialog;
    /** The gauge title displayed in the header. Alternatively, use the `title` slot to enhance the label with HTML markup. */
    title: string;
    /** The units of the gauge value. */
    units: string;
    /** The value to display in the gauge. */
    value: string | number;
    /** The icon to display in the gauge header. */
    icon: string;
    /** The icon library to use for the icon. Uses default library if not specified. */
    iconLibrary: string;
    /** The [D3 format](https://d3js.org/d3-format#locale_format) to use when displaying numeric values. */
    format: string;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /** @internal */
    handleFormatChange(): void;
    private showInfoDialog;
    private hideInfoDialog;
    private headerIconTemplate;
    private infoButtonTemplate;
    private infoDialogTemplate;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-gauge': FlowUiGauge;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-icon-button': FlowUiIconButton;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-input': FlowUiInput;
    }
}

/**
 * @tagname flow-ui-list-item
 * @summary A list item. Use with `<flow-ui-list>` to create selectable, editable, and reorderable lists.
 * @docgroup list
 *
 * @dependency flow-ui-divider
 * @dependency flow-ui-dropdown
 * @dependency flow-ui-icon
 * @dependency flow-ui-icon-button
 * @dependency flow-ui-input
 * @dependency flow-ui-menu
 * @dependency flow-ui-menu-item
 *
 * @slot prefix - The list item's prefix content.
 * @slot suffix - The list item's suffix content.
 * @slot menu - Specify custom menu items to add to the list item's menu.
 *
 * @event flow-ui-change - Emitted when the list item is renamed.
 * @event flow-ui-remove - Emitted when the list item is removed. Calling `event.preventDefault()` will cancel the removal.
 * @event flow-ui-select - Emitted when a menu item is selected.
 *
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-focus - Emitted when the control gains focus.
 *
 * @csspart base - The component's base wrapper.
 * @csspart input - The list item's flow-ui-input control.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart suffix - The container that wraps the suffix.
 * @csspart reorder-icon - The list item's reorder icon.
 * @csspart menu-button - The list item's menu-button.
 *
 */
declare class FlowUiListItem extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon | typeof FlowUiMenuItem | typeof FlowUiIconButton | typeof FlowUiDivider | typeof FlowUiInput | typeof FlowUiMenu | typeof FlowUiDropdown)[];
    private readonly hasSlotController;
    /** @internal */
    protected hasFocus: boolean;
    /** @internal */
    input: FlowUiInput;
    /** The label text for the list item. */
    label: string;
    /** The 'edit' menu item text. (default: 'Edit') */
    editMenuName: string;
    /** The list item input control's placeholder text. */
    placeholder: string;
    /** The tracking value (id) for the list item. */
    value: string;
    checked: boolean;
    /** Set to enable renaming of the list item text. */
    editable: boolean;
    /** Set to reordering of the list item. */
    reorder: boolean;
    /** Set to enable removing the list item. */
    removable: boolean;
    /** Set to enable removing the list item. */
    disabled: boolean;
    /** @internal Set to enable selection support for this list item. */
    selectable: boolean;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    /** @deprecated Use `edit` instead */
    rename(): void;
    edit(): void;
    /** @internal */
    handleCheckedChange(): void;
    private addEventListeners;
    private removeEventListeners;
    private handleBlur;
    private handleFocus;
    private handleMenuSelect;
    private handleInputEvents;
    private handleReorderPointerDown;
    private handleReorderPointerUp;
    private handleDragStart;
    private handleDragOver;
    private handleDragEnd;
    private handleDrop;
    renderMenu(): lit_html.TemplateResult<1>;
    render(): lit_html.TemplateResult<1>;
}

/**
 * @tagname flow-ui-list
 * @summary A list of items that can be edited and reordered.
 * @docgroup list
 *
 * @event flow-ui-change - Emitted when a list item is renamed **or**  a list item is selected (selectable lists only).
 * @event flow-ui-input - Emitted when a list item is selected (selectable lists only).
 *
 * @event flow-ui-remove - Emitted when a list item is removed.
 * @event flow-ui-drag-start - Emitted when the user starts dragging to reorder list items.
 * @event flow-ui-drag-drop - Emitted when the user drops a list item to reorder it.
 * @event flow-ui-drag-end - Emitted when the drag-drop operation has finished or been cancelled.
 *
 * @csspart base - The component's base wrapper.
 *
 */
declare class FlowUiList extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private draggedItem;
    private draggedOverItem;
    /** The current selected list item. (selectable lists only) */
    value: string;
    /** Set to enable radio-button-style selection of list items. */
    selectable: boolean;
    /** Set to enable renaming of the list item text. */
    editable: boolean;
    /** Set to reordering of the list item. */
    reorder: boolean;
    /** Set to enable removing the list item. */
    removable: boolean;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    get listItems(): FlowUiListItem[];
    /** @internal */
    handleStyleChange(): void;
    /** @internal */
    handleValueChange(): void;
    private handleItemClick;
    private handleKeyDown;
    private syncItems;
    private updateCheckedItem;
    private handleDragStart;
    private handleDragOver;
    private handleDrop;
    private handleDragEnd;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-list': FlowUiList;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-list-item': FlowUiListItem;
    }
}

/**
 * @tagname flow-ui-progress-bar
 * @summary Progress bars are used to show the status of an ongoing operation.
 *
 * @slot - A label to show inside the progress indicator.
 *
 * @csspart base - The component's base wrapper.
 * @csspart indicator - The progress bar's indicator.
 * @csspart label - The progress bar's label.
 *
 * @cssproperty --track-height - The progress bar's thickness (same as the indicator's thickness).
 * @cssproperty --track-color - The color of the track.
 * @cssproperty --indicator-color - The color of the indicator.
 */
declare class FlowUiProgressBar extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private readonly localize;
    /** A custom label for assistive devices. */
    label: string;
    /** The current progress as a percentage, 0 to 100. */
    value: number;
    /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
    indeterminate: boolean;
    /** The progress bar's theme variant */
    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger';
    connectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
}

/**
 * This component wraps a `FlowCoreMap` instance from the flow-rdf-core library and
 * provides access to its API.
 *
 * The `map` property provides direct access to the underlying `FlowCoreMap` instance.
 *
 * The `initialized` property provides a promise that resolves to the `FlowCoreMap` once
 * it has been initialized and is the safest way to access the map API.
 *
 * Convenience properties are provided for setting the base style, center, zoom, bearing, and pitch
 * of the map. These properties can be set to update the map or the `FlowCoreMap` API can be used directly.
 *
 * @tagname flow-ui-map
 * @summary Display a Flo.w map.
 *
 * @dependency flow-ui-progress-bar
 *
 * @event {CustomEvent<{ map: FlowCoreMap }>} flow-ui-map-load - Dispatched when the map is first initialized and has completed loading.
 * The Flo.w Core map instance can be retrieved from the event `detail` property.
 *
 * @csspart base - The base element of the component.
 * @csspart busy-indicator - The busy indicator flow-ui-progress-bar.
 * @csspart control-container - The map control containers.
 * @csspart control-container--top-left - The top left control container element.
 * @csspart control-container--top-right - The top right control container element.
 * @csspart control-container--bottom-left - The bottom left control container element.
 * @csspart control-container--bottom-right - The bottom right control container element.
 *
 * @cssproperty --flow-ui-map-inset - The inset of the `fixed` map canvas from the edges of the viewport (as for the
 * CSS `inset` property). Defaults to `0`. Note that the canvas is clipped to the map element, so an inset is no longer
 * needed to keep the map out of the borders of an application shell.
 */
declare class FlowUiMap extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiProgressBar)[];
    private _map?;
    private _initialized;
    private _resolveInitialized;
    private _pendingCenter?;
    private _pendingBaseStyle?;
    private _mapLoading;
    /**
     * The map ID. If not provided, a unique ID will be generated.
     */
    mapId: string;
    /**
     * The base style of the map.
     */
    baseStyle: string;
    /**
     * The center of the map specified as a longitude and latitude pair.
     *
     * Alternatively, use the `setCenter` method to update the center of the map
     * with animation options.
     */
    center: [number, number];
    /**
     * The zoom level of the map.
     *
     * Alternatively, use the `setCenter` method to update the center of the map
     * with animation options.
     */
    zoom: number;
    /**
     * The bearing of the map.
     *
     * Alternatively, use the `setCenter` method to update the center of the map
     * with animation options.
     */
    bearing: number;
    /**
     * The pitch of the map.
     *
     * Alternatively, use the `setCenter` method to update the center of the map
     * with animation options.
     */
    pitch: number;
    /**
     * Set to `true` to show a busy indicator on the map.
     *
     * Note that the busy indicator will also be automatically be shown when the map
     * is loading data.
     */
    busy: boolean;
    /**
     * Set to `true` to keep the map canvas the size of the viewport, so that the map is not resized or re-rendered when
     * the map element is.
     *
     * The canvas fills the viewport and is clipped to the map element, which shows the part of the map that lies
     * within it. Side bars next to the map can then be opened and closed smoothly: the map stays still on screen while
     * the map element grows and shrinks. Nothing outside the map element shows the map or passes pointer events to it,
     * so the surrounding panes need no `z-index` or opaque background, and popups hoisted out of them are shown above
     * the map.
     *
     * Use the `getVisibleBounds()` method of the `FlowCoreMap` to get the bounds of the part of the map that is
     * visible within the map element. `getBounds()` returns the bounds of the whole canvas.
     *
     * Note that the canvas is still resized with the viewport, and that MapLibre's own controls, such as the
     * attribution, are placed at the corners of the canvas, so they are hidden unless the map element reaches that
     * corner of the viewport.
     */
    fixed: boolean;
    /**
     * Set the bearing snap threshold in degrees. Set to 0 to disable bearing snapping.
     */
    bearingSnap: number;
    /**
     * Set fade duration in milliseconds for the label collision fade-in/fade-out animation.
     */
    fadeDuration: number;
    /**
     * The underlying core FlowCoreMap instance. Note that this is
     * `undefined` until the map has been initialized.
     */
    get map(): FlowCoreMap | undefined;
    /**
     * A promise that resolves to a map instance when the map has been initialized.
     *
     * This is the safest way to retrieve the underlying core FlowCoreMap instance before
     * using its API.
     */
    get initialized(): Promise<FlowCoreMap>;
    constructor();
    /** @internal */
    handleCenterChange(): void;
    /** @internal */
    handleBaseStyleChange(): void;
    connectedCallback(): Promise<void>;
    disconnectedCallback(): void;
    private initializeMap;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-map': FlowUiMap;
    }
}

/**
 * @tagname flow-ui-menu-label
 * @summary Menu labels are used to describe a group of menu items.
 * @docgroup menu
 *
 * @slot - The menu label's content.
 *
 * @csspart base - The component's base wrapper.
 */
declare class FlowUiMenuLabel extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-menu-label': FlowUiMenuLabel;
    }
}

/**
 * @tagname flow-ui-mutation-observer
 * @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
 *
 * @event {{ mutationList: MutationRecord[] }} flow-ui-mutation - Emitted when a mutation occurs.
 *
 * @slot - The content to watch for mutations.
 */
declare class FlowUiMutationObserver extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private mutationObserver;
    /**
     * Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
     * `attr="class id title"`. To watch all attributes, use `*`.
     */
    attr: string;
    /** Indicates whether or not the attribute's previous value should be recorded when monitoring changes. */
    attrOldValue: boolean;
    /** Watches for changes to the character data contained within the node. */
    charData: boolean;
    /** Indicates whether or not the previous value of the node's text should be recorded. */
    charDataOldValue: boolean;
    /** Watches for the addition or removal of new child nodes. */
    childList: boolean;
    /** Disables the observer. */
    disabled: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private handleMutation;
    private startObserver;
    private stopObserver;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleChange(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-mutation-observer': FlowUiMutationObserver;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-option': FlowUiOption;
    }
}

/**
 * The toggle button opens and closes the [split-view pane](./flow-ui-split-view-pane) that it is inside, and shows
 * the pane's state, including when the split view closes or opens the pane itself because the panes do not fit. Set
 * the `position` attribute to the side of the split view that the pane is on (`left`, `right`, `top` or `bottom`), so
 * that the button's chevron points the right way.
 *
 * @tagname flow-ui-split-view-toggle-button
 * @summary Split-view toggle buttons are used to open and close the split-view pane that contains them.
 * @docgroup split-view
 *
 * @dependency flow-ui-button
 * @dependency flow-ui-icon
 * @dependency flow-ui-tooltip
 */
declare class FlowUiSplitViewToggleButton extends FlowUiIconButton {
    static tagName: string;
    static styles: lit.CSSResultGroup[];
    private parentPane;
    private parentPanelObserver;
    /**
     * The icon to use for the button.
     */
    name?: string | undefined;
    /** The icon library to use for the button icon. */
    library?: string | undefined;
    /**
     * Indicates whether the parent split-view pane is closed. The button follows the pane's state; clicking it opens or
     * closes the pane.
     */
    closed: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /**
     * Toggles the button's state. Unless `emitEvents` is `false`, it emits `flow-ui-collapse` or `flow-ui-expand`,
     * which closes or opens the parent split-view pane.
     */
    toggle(emitEvents?: boolean): void;
    protected handleClick(event: MouseEvent): void;
    private closestElement;
}

/**
 * @tagname flow-ui-panel-header
 * @summary A panel header provides a label, optional accessory controls and expand/collapse behavior for panels.
 * @docgroup panel
 *
 * @dependency flow-ui-split-view-toggle-button
 *
 * @slot title - The panel header's title content. Alternatively, use the `title` attribute for plain text.
 * @slot prefix - The panel header's prefix content.
 * @slot suffix - The panel header's suffix content.
 * @slot expand-icon - Specify an alternative `<flow-ui-icon>` to use for the expand icon.
 * @slot collapse-icon - Specify an alternative `<flow-ui-icon>` to use for the collapse icon.
 *
 * @event flow-ui-collapse - Emitted when the header is collapsed by UI interaction.
 * @event flow-ui-expand - Emitted when the header is expanded by UI interaction.
 *
 * @csspart base - The component's base wrapper.
 * @csspart title - The container that wraps the title.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart suffix - The container that wraps the suffix.
 * @csspart toggle-icon - The container that wraps the expand/collapse icon.
 *
 * @cssproperty padding - The padding around the header. Defaults to `--flow-ui-panel-header-padding`.
 * @cssproperty header-height - The height of the header. Defaults to `--flow-ui-panel-header-height`.
 * @cssproperty background-color - The background color of the header. Defaults to `--flow-ui-panel-header-background-color`.
 * @cssproperty color - The text color of the header. Defaults to `--flow-ui-panel-header-color`.
 * @cssproperty accessory-color - The color of the accessory controls. Defaults to `--flow-ui-panel-header-accessory-color`.
 */
declare class FlowUiPanelHeader extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiSplitViewToggleButton)[];
    private readonly hasSlotController;
    private header;
    private toggleButton;
    /**
     * Indicates whether or not the header is open or closed. Toggle this attribute to expand or collapse the header.
     * Alternatively, call the `expand()` and `collapse()` methods.
     */
    closed: boolean;
    /** The header title. Use the `title` slot instead to display HTML. */
    title: string;
    /** Set to `true` to hide the panel expand/collapse button. */
    fixed: boolean;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    private handleHeaderClick;
    private handleAccessoryClick;
    private handleToggleClick;
    private handleHeaderKeyDown;
    private handleExpandCollapse;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-panel-header': FlowUiPanelHeader;
    }
}

/**
 * @tagname flow-ui-panel
 * @summary Panels are used with split-views to create resizable areas.
 * @docgroup panel
 *
 * @cssproperty --padding - Padding to add to the panel when the `padding` attribute is set. Defaults to `--flow-ui-spacing-small`.
 */
declare class FlowUiPanel extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    formElements: Array<HTMLElement>;
    private panelElement?;
    private bodyElement?;
    private headerSlot?;
    private bodySlot?;
    /** Observes the content while a content-sized split-view pane watches the panel's natural size. */
    private contentObserver?;
    /**
     * Indicates whether the panel is open or closed. A closed panel hides its body and shows only its header. A panel
     * header in the `header` slot follows this state. In a [split-view pane](./flow-ui-split-view-pane), set `closed` on
     * the pane instead: the pane passes its state to a panel that is its direct child (or a child of an element that
     * wraps it, such as an Angular component's host element), overriding the panel's own.
     */
    closed: boolean;
    /**
     * Indicates whether the panel is scrollable. By default overflow is hidden.
     */
    scrollable: boolean;
    /**
     * Indicates whether the panel body has padding.
     */
    padding: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected updated(changed: PropertyValues<this>): void;
    /** Open the panel */
    expand(emitEvent?: boolean): Promise<void>;
    /** Close the panel */
    collapse(emitEvent?: boolean): Promise<void>;
    /**
     * Lay the panel out at its natural (max-content) size, with its body shown (`open`) or hidden (`closed`) whatever
     * its `closed` state, until called with `false`. The change is synchronous and undone before the next rendering, so
     * a content-sized split-view pane can measure the panel without anything being painted or observed.
     *
     * @internal
     */
    setContentMeasuring(mode: ContentMeasuringMode | false): void;
    /**
     * Start or stop dispatching the internal `flow-ui-content-resize` event when the panel's natural size may have
     * changed (its header or content resized, or `closed`, `scrollable` or `padding` changed). Used by a content-sized
     * split-view pane.
     *
     * @internal
     */
    watchContentSize(watch: boolean): void;
    private observeContent;
    /** Pass the panel's state to the panel headers in the `header` slot (a property set: no events, idempotent). */
    private syncHeaders;
    private handleHeaderSlotChange;
    private handleSlotChange;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-panel': FlowUiPanel;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-progress-bar': FlowUiProgressBar;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-progress-ring': FlowUiProgressRing;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-query-builder': FlowUiQueryBuilder;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-radio-group': FlowUiRadioGroup;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-radio': FlowUiRadio;
    }
}

/**
 * @tagname flow-ui-range
 * @summary Ranges allow the user to select a single value within a given range using a slider.
 *
 * @dependency flow-ui-divider
 * @dependency flow-ui-input
 *
 * @slot label - The range's label. Alternatively, you can use the `label` attribute.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 *
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-change - Emitted when an alteration to the control's value is committed by the user.
 * @event flow-ui-focus - Emitted when the control gains focus.
 * @event flow-ui-input - Emitted when the control receives input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The range's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart base - The component's base wrapper.
 * @csspart number-input - The range's number input control.
 *
 * @cssproperty --thumb-size - The size of the thumb.
 * @cssproperty --track-color-active - The color of the portion of the track that represents the current value.
 * @cssproperty --track-color-inactive - The of the portion of the track that represents the remaining value.
 * @cssproperty --track-height - The height of the track.
 * @cssproperty --track-active-offset - The point of origin of the active track.
 */
declare class FlowUiRange extends FlowRdfFormControl {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiDivider | typeof FlowUiInput)[];
    private readonly formControlController;
    private readonly hasSlotController;
    private readonly localize;
    private resizeObserver;
    /** @internal */
    input: HTMLInputElement;
    /** @internal */
    numberInput: HTMLInputElement;
    private hasFocus;
    /** @internal */
    title: string;
    /** The name of the range, submitted as a name/value pair with form data. */
    name: string;
    /** The current value of the range, submitted as a name/value pair with form data. */
    value: number;
    /** The input's size. */
    size: 'small' | 'medium' | 'large';
    /** The range's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /** The range's help text. If you need to display HTML, use the help-text slot instead. */
    helpText: string;
    /** Disables the range. */
    disabled: boolean;
    /** The minimum acceptable value of the range. */
    min: number;
    /** The maximum acceptable value of the range. */
    max: number;
    /** The interval at which the range will increase and decrease. */
    step: number;
    /** Number format to use for numeric display. (D3 format string) */
    format: string;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultValue: number;
    /**
     * Display the control in the 'inline' form control style.
     */
    inline: boolean;
    /** @internal Indicates that a divider should be displayed below the control. */
    divider: boolean;
    noInput: boolean;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected willUpdate(changedProperties: PropertyValueMap<FlowUiRange> | Map<PropertyKey, unknown>): void;
    private handleRangeChange;
    private handleRangeInput;
    private handleNumberChange;
    private handleBlur;
    private handleFocus;
    private handleThumbDragStart;
    private handleThumbDragEnd;
    private syncProgress;
    /** @internal */
    handleValueChange(): void;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    syncRange(): void;
    private handleRangeInvalid;
    /** Sets focus on the range. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the range. */
    blur(): void;
    /** Increments the value of the range by the value of the step attribute. */
    stepUp(): void;
    /** Decrements the value of the range by the value of the step attribute. */
    stepDown(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-range': FlowUiRange;
    }
}

/**
 * @tagname flow-ui-resize-observer
 * @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
 *
 * @slot - One or more elements to watch for resizing.
 *
 * @event {CustomEvent<{entries: ResizeObserverEntry[]}>} flow-ui-resize - Emitted when the element is resized.
 */
declare class FlowUiResizeObserver extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private resizeObserver;
    private observedElements;
    /** Disables the observer. */
    disabled: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private handleSlotChange;
    private startObserver;
    private stopObserver;
    /** @internal */
    handleDisabledChange(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-resize-observer': FlowUiResizeObserver;
    }
}

/**
 * @internal Hide for now
 *
 * @tagname flow-ui-scroll-view
 * @summary Scroll views provide a scrollable area for content.
 */
declare class FlowUiScrollView extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private _scrollHost;
    private _scrollViewport;
    private _overlayScrollbars?;
    private readonly _componentId;
    mode?: 'native' | 'overlay';
    overflowX?: 'hidden' | 'scroll' | 'visible' | 'visible-hidden' | 'visible-scroll';
    overflowY?: 'hidden' | 'scroll' | 'visible' | 'visible-hidden' | 'visible-scroll';
    autoHide?: 'never' | 'scroll' | 'leave' | 'move';
    autoHideDelay?: number;
    autoHideSuspend?: boolean;
    connectedCallback(): void;
    firstUpdated(): void;
    updateScrollBars(): void;
    updated(_changedProperties: Map<string, unknown>): void;
    disconnectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-scroll-view': FlowUiScrollView;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-select': FlowUiSelect;
    }
}

/**
 * The [split view](./flow-ui-split-view) renders a divider between each pair of visible panes, in its own shadow DOM,
 * so you do not add dividers yourself. The split view handles dragging the divider and its keyboard, and gives it its
 * role, focus and ARIA values; the divider draws the line, its wider grab area and its highlight (shown on hover,
 * keyboard focus and while dragging). To style the dividers, use the split view's `divider` CSS part and its
 * `--flow-ui-split-view-divider-color` custom property.
 *
 * @tagname flow-ui-split-view-divider
 * @summary Split-view dividers are used internally by split-views to resize the panes on either side of them.
 * @docgroup split-view
 */
declare class FlowUiSplitViewDivider extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    /** Disables the divider. The split view sets it when the divider cannot move a pane or close one. */
    disabled: boolean;
    /** Set to `true` to draw the divider for vertically-arranged panes. The split view sets it. */
    vertical: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-split-view-divider': FlowUiSplitViewDivider;
    }
}

/**
 * The [split view](./flow-ui-split-view) decides the pane's actual size from its `size`, `min-size`, `max-size` and
 * `closed-size`, and never changes those attributes itself. Give a pane an `id` if it is added and removed, or hidden
 * and shown, at runtime: the split view then keeps its place and its space while it is away, so the layout returns
 * exactly to how it was when the pane comes back. If the split view has an `id` too, the pane's preferred size and
 * closed state also survive the split view being removed and created again.
 *
 * With `size="content"` or `closed-size="content"`, the pane is a *content-sized pane*: it measures the natural size
 * of its content and follows it as it changes. A [panel](./flow-ui-panel) or a [tab group](./flow-ui-tab-group) that
 * is a direct child of the pane, or a child of an element that wraps it (such as an Angular component's host element),
 * follows the pane's `closed` state: a closed panel shows only its header, and a closed tab group only its tab bar.
 *
 * @tagname flow-ui-split-view-pane
 * @summary Split-view panes are used with split-views to create resizable areas.
 * @docgroup split-view
 */
declare class FlowUiSplitViewPane extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private readonly attrId;
    private readonly componentId;
    private paneElement?;
    private contentsElement?;
    private contentSlot?;
    /** Observes the content (other than followers, which watch themselves) while the pane is content-sized. */
    private contentObserver?;
    /** The followers (panels and tab groups) the pane asked to watch their natural size. */
    private watchedFollowers;
    /** Whether the split view is animating the panes' sizes, passed on to the followers. */
    private animating;
    /**
     * Watches the children of the pane's other child elements, which may wrap a follower (an Angular component's host
     * element), so that a follower added to a wrapper later follows the pane too.
     */
    private readonly wrapperObserver;
    private warnedNestedSplitView;
    /** Set to `true` for vertically-arranged panes. */
    vertical: boolean;
    /**
     * The pane's preferred size, in CSS px or % units, `auto` or `content`. If not set, the pane is `auto`: it shares the
     * space the other panes leave with the other `auto` panes. Note that dragging a divider changes the pane's preferred
     * size but not this attribute; changing the attribute resets the preferred size to the new value.
     *
     * With `content`, the preferred size is the natural size of the pane's content, within `min-size` and `max-size`,
     * and follows the content as it changes, for example a card that appears or a header that wraps. The pane never
     * grows past its content to fill spare space, even when it is the only open pane. Dragging the divider can make it
     * smaller than its content, which then scrolls, but never larger; the dragged size lasts until this attribute
     * changes, and the pane still shrinks if the content becomes smaller. A [panel](./flow-ui-panel) or
     * [tab group](./flow-ui-tab-group) child fills the pane, so a scrollable panel scrolls its body, and a tab group its
     * tab panels. A pane whose content is a split view has no natural size: there, `content` is treated as `auto` (the
     * panes inside the nested split view can be content-sized).
     */
    size: string;
    /** The pane's minimum size, in CSS px or % units. */
    minSize: string;
    /** The pane's maximum size, in CSS px or % units. */
    maxSize: string;
    /**
     * The pane's size when closed, in CSS px or % units, or `content`. If not set (or `0px`), a closed pane takes no
     * space. Note that only panes with a non-zero or `content` closed size can be closed by dragging a divider, or by
     * the split view when the panes do not fit.
     *
     * With `content`, a closed pane takes the natural size of what its content still renders while closed. A
     * [panel](./flow-ui-panel) child hides its body when closed, so the pane closes to the panel's header at any font
     * size, however the header wraps. A [tab group](./flow-ui-tab-group) child hides its header, body and footer, so the
     * pane closes to the tab bar: its width for tabs at the `start` or `end` in a horizontal split view, or its height
     * for tabs at the `top` or `bottom` in a vertical one. A panel or tab group inside an element that wraps it, such as
     * an Angular component's host element, does the same. Other content can hide parts of itself with CSS on the pane's
     * `closed` attribute, for example `flow-ui-split-view-pane[closed] .details { display: none }`. In a horizontal
     * split view, the closed size is the natural width, for a panel the width of its header on one line. A pane whose
     * content is a split view has no natural size: there, `content` is treated as `0px`.
     */
    closedSize: string;
    /**
     * Indicates whether the split-view pane is open or closed. Toggle this attribute to expand or collapse the pane,
     * or call the `expand()` and `collapse()` methods. Note that the split view also closes panes that have a
     * `closed-size` when they do not fit, and opens them again when there is space, without emitting events. A
     * [panel](./flow-ui-panel) or [tab group](./flow-ui-tab-group) that is a direct child of the pane, or a child of an
     * element that wraps it, follows this state, whatever changes it.
     */
    closed: boolean;
    /**
     * Has no effect. The split view draws a divider between each pair of visible panes.
     *
     * @deprecated Dividers are drawn by the split view. This property will be removed in a future version.
     */
    divider: boolean;
    /**
     * Set to `true` to hide the pane. The other panes take its space, and give it back when it is shown again. Note
     * that a pane without an `id` gets its space back from wherever there is room, not necessarily from where it went.
     */
    hidden: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected updated(changed: PropertyValues<this>): void;
    /** Opens the pane. */
    expand(emitEvent?: boolean): Promise<void>;
    /** Closes the pane. */
    collapse(emitEvent?: boolean): Promise<void>;
    /**
     * Whether `content` sizes apply to this pane. A pane whose content is a split view has no natural size, so its
     * split view treats `size="content"` as `auto` and `closed-size="content"` as `0px`.
     *
     * @internal
     */
    get contentSizable(): boolean;
    /**
     * Called by the split view when it starts and stops animating the panes' sizes (opening and closing). Passed on to
     * the followers, so that a closing tab group keeps its body until the animation ends.
     *
     * @internal
     */
    setAnimating(animating: boolean): void;
    /**
     * Measure the natural size of the content along the split view's axis, in px: `open` for the content as it renders
     * while the pane is open, `closed` for while it is closed. A follower (panel or tab group) is measured in both
     * states; other content only in its current state. `undefined` when the pane isn't content-sized or isn't rendered
     * (the split view or the pane is hidden), so that a hidden pane never reports a size of 0. Synchronous: nothing is
     * painted or observed.
     *
     * @internal
     */
    measureContentSize(vertical: boolean): {
        open?: number;
        closed?: number;
    } | undefined;
    /**
     * The elements that follow the pane's `closed` state: each panel or tab group (see {@link PANE_FOLLOWER_TAGS}) that
     * is a direct child of the pane, or a child of a direct child that wraps it, such as an Angular component's host
     * element. Upgraded or not.
     */
    private followers;
    /** Pass the pane's `closed` state to its followers (a property set: no events, idempotent). */
    private syncFollowers;
    /** Watch the children of the pane's child elements that aren't followers, which may wrap one. */
    private observeWrappers;
    private get contentSized();
    /** Start, update or stop watching the content, as the pane's sizes and content require. */
    private configureContentSizing;
    private stopContentSizing;
    private handleSlotChange;
    private handleContentResize;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-split-view-pane': FlowUiSplitViewPane;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-split-view-toggle-button': FlowUiSplitViewToggleButton;
    }
}

/**
 * The split view lays out its child [split-view panes](./flow-ui-split-view-pane) side by side, or one above the
 * other with `vertical`, with a divider between each pair of visible panes that the user can drag to resize them.
 *
 * Each pane has a *preferred size*, which starts from its `size` and changes only when the user drags or moves a
 * divider, and an *actual size*, which the split view gives it to fit the space available. When a pane is added or
 * opened, or the split view shrinks, other panes are squeezed; when space comes back, they return to their preferred
 * sizes. When the panes do not fit, panes that have a `closed-size` are closed, starting from the last one, and opened
 * again when there is space. The split view never changes a pane's `size` attribute. See
 * [How Split Views Lay Out Panes](#how-split-views-lay-out-panes) for the rules.
 *
 * Each divider can also be moved with the keyboard: it is in the tab order between the panes on either side of it,
 * the arrow keys along the split axis move it by 10px (50px with Shift), and Home and End move it as far as it goes,
 * resizing panes and snapping them shut and open as dragging does. Enter closes or opens the pane the divider
 * controls: the pane before it, or the pane after it when only that one has a `closed-size`. A divider that cannot
 * move a pane or close one is disabled and not in the tab order.
 *
 * Give the split view and its panes an `id` to keep the layout when the split view is removed and created again, for
 * example by an Angular `@if`: a split view created later with the same `id` gives each pane with a remembered `id` its
 * preferred size and closed state back, so the layout returns to how the user left it. Without an `id`, a new split
 * view starts from the panes' declared sizes. The layout is remembered for the page only: it is not saved, and a
 * reload starts afresh. A pane whose `size` has changed since starts from its new `size`. Give each split view on the
 * page a unique `id`: split views that are on the page at the same time with the same `id` share what they remember,
 * the latest change to a pane wins, and the split view logs a warning.
 *
 * @tagname flow-ui-split-view
 * @summary Split-views are used to arrange two or more split-view panes in resizable areas.
 * @docgroup split-view
 *
 * @dependency flow-ui-split-view-divider
 *
 * @csspart divider - Each divider between two visible panes. The divider's line is its background.
 *
 * @cssproperty --flow-ui-split-view-divider-color - The color of the dividers' line. Hovered, focused and dragged
 * dividers are highlighted with `--flow-ui-divider-color-active`.
 */
declare class FlowUiSplitView extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiSplitViewDivider)[];
    static shadowRootOptions: ShadowRootInit;
    /** The solver state. Replaced (never mutated) by `commit()` on every trigger. */
    private layoutState;
    /**
     * What a split view without an id remembers about its panes with an id, for the element's lifetime. A split view with
     * an id keeps it in the page-level registry instead (see `split-view-layout-registry.ts`).
     */
    private layoutMemory;
    /** The id this split view is registered under in the layout registry, while it is connected. */
    private registryId?;
    /** Solver key of each child pane. */
    private paneKeys;
    /** The split view's size from the latest resize observation. */
    private containerRect?;
    /** Size of a divider along the split axis, in px, measured from a rendered divider. */
    private dividerSize;
    /** Set when the child pane list changed since the last commit (removed or added panes don't animate). */
    private paneListChanged;
    private drag?;
    private animationTimer?;
    private readonly localize;
    /** Panes whose content size may have changed, measured in the next animation frame. */
    private contentChanged;
    private contentFrame?;
    private readonly childObserver;
    private readonly paneObserver;
    private readonly resizeObserver;
    /** The child panes, in DOM order. */
    private panes;
    /** The latest actual layout. Kept while the split view has zero size. */
    private layout?;
    private animating;
    /** @internal */
    splitView: HTMLElement;
    /** Set to `true` to stop dragging a divider from closing panes. */
    noDragClose: boolean;
    /** Set to `true` for vertically-arranged panes. By default, panes are laid out horizontally. */
    vertical: boolean;
    /**
     * Indicates whether the user is dragging a divider. The split view sets this attribute while a drag is in progress,
     * for example to style the cursor with `flow-ui-split-view[dragging] *`. Note that setting it has no effect on the
     * drag.
     */
    dragging: boolean;
    /**
     * The actual sizes of the panes, in CSS px units, in the order of the child panes (`0px` for hidden panes), or
     * `auto` for each pane before the split view is first laid out. Note that this property is read-only output: setting
     * it has no effect. Use each pane's `size` to set its preferred size.
     */
    get positions(): string[];
    set positions(_value: string[]);
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected firstUpdated(changed: PropertyValues): void;
    protected updated(changed: PropertyValues): void;
    render(): lit_html.TemplateResult<1>;
    /**
     * The divider before pane `index`: a separator whose ARIA value is the size of the pane it controls, as a percentage
     * of the space the panes share (the WAI-ARIA window splitter pattern).
     */
    private renderSplitDivider;
    /**
     * Make `next` the solver state and apply it: the panes' `closed` properties (auto-close, auto-reopen and drag snaps
     * set them without events), the grid tracks, and the open and close animation.
     */
    private commit;
    /** Reconcile the solver with the child panes and their attributes. */
    private syncPanes;
    /**
     * Register the split view under its current `id` in the layout registry (it is unregistered when disconnected).
     * Returns `true` if the id it is registered under changed.
     */
    private updateRegistryId;
    /** Remember the panes' preferred sizes and user-closed states, in the registry if the split view has an id. */
    private storeMemory;
    /**
     * The space the solver shares between the panes: the split view's size along its axis less the visible dividers.
     * 0 while the split view has no size (for example in an inactive tab panel), so that nothing is laid out.
     */
    private containerSize;
    /** The actual size of each child pane, in px, or `undefined` before the first layout. */
    private paneSizes;
    private handleResize;
    /** A content-sized pane's content may have changed size: measure it in the next animation frame. */
    private handleContentResize;
    /** Measure the content of `panes` and give the sizes to the solver. Panes that aren't rendered are skipped. */
    private measureContent;
    private cancelContentFrame;
    private handleCollapseExpand;
    private startAnimation;
    private stopAnimation;
    private handleTransitionEnd;
    /** -1 for a horizontal split view in a right-to-left page, where the grid lays the panes out from the right. */
    private inlineSign;
    private pointerPosition;
    /** The divider rendered before pane `index`, or `undefined` before the first layout or if it isn't visible. */
    private describeDivider;
    private paneByKey;
    /** Enter can open the pane (any closed pane), or close it (following the snap rule and `no-drag-close`). */
    private canToggle;
    /** Solver key of the visible pane before the divider rendered before pane `index`. */
    private keyBeforeDivider;
    private handleDividerPointerDown;
    private handleDividerPointerMove;
    private handleDividerPointerUp;
    private handleDividerPointerCancel;
    private endDrag;
    private handleDividerKeyDown;
    /** Enter: open or close the pane the divider controls, as its header or a toggle button does (with events). */
    private toggleControlledPane;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-split-view': FlowUiSplitView;
    }
}

/**
 * @tagname flow-ui-stepper-panel
 * @summary Stepper panels provide a single page in a stepper to guide users through a series of steps.
 * @docgroup stepper
 */
declare class FlowUiStepperPanel extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private readonly attrId;
    private readonly componentId;
    /** The tab panel's name. */
    name: string;
    /** The stepper panel's sub-title. */
    subTitle: string;
    /** When true, the stepper panel will be shown. */
    active: boolean;
    /** When true, the stepper panel is marked as complete */
    complete: boolean;
    connectedCallback(): void;
    /** @internal */
    handleStateChange(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-stepper-panel': FlowUiStepperPanel;
    }
}

/**
 * @tagname flow-ui-stepper
 * @summary Steppers are used to guide users through a series of steps in a wizard-like UI.
 * @docgroup stepper
 */
declare class FlowUiStepper extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private bodySlot;
    private headerScrollContainer;
    private readonly attrId;
    private readonly componentId;
    private activePanel?;
    private mutationObserver;
    private panels;
    connectedCallback(): void;
    /** Mark the specified panel as `complete` */
    setComplete(panelName: string, complete?: boolean): void;
    show(panelName: string): void;
    private syncPanels;
    private getAllPanels;
    private setActivePanel;
    private renderHeaderItem;
    private renderHeader;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-stepper': FlowUiStepper;
    }
}

/**
 * @tagname flow-ui-switch
 * @summary Switches allow the user to toggle an option on or off.
 *
 * @dependency flow-ui-divider
 *
 * @slot - The switch's label.
 *
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-change - Emitted when the control's checked state changes.
 * @event flow-ui-input - Emitted when the control receives input.
 * @event flow-ui-focus - Emitted when the control gains focus.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart base - The component's base wrapper.
 * @csspart control - The control that houses the switch's thumb.
 * @csspart thumb - The switch's thumb.
 * @csspart label - The switch's label.
 *
 * @cssproperty --width - The width of the switch.
 * @cssproperty --height - The height of the switch.
 * @cssproperty --thumb-size - The size of the thumb.
 */
declare class FlowUiSwitch extends FlowRdfFormControl {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiDivider)[];
    private readonly formControlController;
    private readonly hasSlotController;
    private input;
    private hasFocus;
    /** @internal */
    label: string;
    /** The name of the switch, submitted as a name/value pair with form data. */
    name: string;
    /** The current value of the switch, submitted as a name/value pair with form data. */
    value: string;
    /** The switch's size. */
    size: 'small' | 'medium' | 'large';
    /** Disables the switch. */
    disabled: boolean;
    /** Draws the switch in a checked state. */
    checked: boolean;
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultChecked: boolean;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Makes the switch a required field. */
    required: boolean;
    /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** Indicates that the control should display a divider */
    divider: boolean;
    connectedCallback(): void;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    firstUpdated(): void;
    private handleBlur;
    private handleInput;
    private handleInvalid;
    private handleClick;
    private handleFocus;
    private handleKeyDown;
    /** @internal */
    handleCheckedChange(): void;
    /** @internal */
    handleDisabledChange(): void;
    /** Simulates a click on the switch. */
    click(): void;
    /** Sets focus on the switch. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the switch. */
    blur(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-switch': FlowUiSwitch;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tab-group': FlowUiTabGroup;
    }
}

/**
 * @tagname flow-ui-tab-panel
 * @summary Tab panels are used inside [tab groups](./flow-ui-tab-group) to display tabbed content.
 * @docgroup tab-group

 *
 * @slot - The tab panel's content.
 *
 * @csspart base - The component's base wrapper.
 *
 * @cssproperty --padding - The tab panel's padding.
 */
declare class FlowUiTabPanel extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private readonly attrId;
    private readonly componentId;
    /** The tab panel's name. */
    name: string;
    /** When true, the tab panel will be shown. */
    active: boolean;
    /**
     * Indicates whether the panel is scrollable. By default overflow is hidden.
     */
    scrollable: boolean;
    /**
     * Indicates whether the panel body has padding.
     */
    padding: boolean;
    connectedCallback(): void;
    /** @internal */
    handleActiveChange(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tab-panel': FlowUiTabPanel;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tag': FlowUiTag;
    }
}

/**
 * @tagname flow-ui-textarea
 * @summary Textareas collect data from the user and allow multiple lines of text.
 *
 * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 *
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-change - Emitted when an alteration to the control's value is committed by the user.
 * @event flow-ui-focus - Emitted when the control gains focus.
 * @event flow-ui-input - Emitted when the control receives input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The input's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart base - The component's base wrapper.
 * @csspart textarea - The internal `<textarea>` control.
 */
declare class FlowUiTextarea extends FlowRdfFormControl {
    static tagName: string;
    static styles: CSSResultGroup;
    private readonly formControlController;
    private readonly hasSlotController;
    private resizeObserver;
    /** @internal */
    input: HTMLTextAreaElement;
    private hasFocus;
    /** @internal */
    title: string;
    /** The name of the textarea, submitted as a name/value pair with form data. */
    name: string;
    /** The current value of the textarea, submitted as a name/value pair with form data. */
    value: string;
    /** The textarea's size. */
    size: 'small' | 'medium' | 'large';
    /** Draws a filled textarea. */
    filled: boolean;
    /** The textarea's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** Placeholder text to show as a hint when the input is empty. */
    placeholder: string;
    /** The number of rows to display by default. */
    rows: number;
    /** Controls how the textarea can be resized. */
    resize: 'none' | 'vertical' | 'auto';
    /** Disables the textarea. */
    disabled: boolean;
    /** Makes the textarea readonly. */
    readonly: boolean;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Makes the textarea a required field. */
    required: boolean;
    /** The minimum length of input that will be considered valid. */
    minlength: number;
    /** The maximum length of input that will be considered valid. */
    maxlength: number;
    /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
    autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
    /** Indicates whether the browser's autocorrect feature is on or off. */
    autocorrect: string;
    /**
     * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
     * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
     */
    autocomplete: string;
    /** Indicates that the input should receive focus on page load. */
    autofocus: boolean;
    /** Used to customize the label or icon of the Enter key on virtual keyboards. */
    enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
    /** Enables spell checking on the textarea. */
    spellcheck: boolean;
    /**
     * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
     * keyboard on supportive devices.
     */
    inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultValue: string;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    firstUpdated(): void;
    disconnectedCallback(): void;
    private handleBlur;
    private handleChange;
    private handleFocus;
    private handleInput;
    private handleInvalid;
    private setTextareaHeight;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleRowsChange(): void;
    /** @internal */
    handleValueChange(): Promise<void>;
    /** Sets focus on the textarea. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the textarea. */
    blur(): void;
    /** Selects all the text in the textarea. */
    select(): void;
    /** Gets or sets the textarea's scroll position. */
    scrollPosition(position?: {
        top?: number;
        left?: number;
    }): {
        top: number;
        left: number;
    } | undefined;
    /** Sets the start and end positions of the text selection (0-based). */
    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): void;
    /** Replaces a range of text with a new string. */
    setRangeText(replacement: string, start?: number, end?: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-textarea': FlowUiTextarea;
    }
}

/**
 * The timer component is the primary time control for Flo.w time-based visualizations. The current timer value is typically bound to a reactive state property
 * so that reactive queries and computed state will be re-evaluated when the timer changes.
 *
 * The timer value is an ISO8601 date/time string.
 *
 * The timer operates in two modes:
 *
 * - running - the timer is set to 'real time' and updates every second.
 * - paused - the timer is set to a specific time and does not update automatically.
 *
 * Selecting a date/time with the timer step controls or the popup calendar will set the timer to paused mode.
 * Clicking the play button switches the timer to 'real time' running mode.
 * The mode can also be set programmatically using the `running` attribute.
 *
 * @tagname flow-ui-timer
 * @summary The timer component is the primary time control for Flo.w time-based visualizations.
 *
 * @dependency flow-ui-calendar
 * @dependency flow-ui-dropdown
 * @dependency flow-ui-icon
 * @dependency flow-ui-icon-button
 * @dependency flow-ui-tooltip
 *
 * @event flow-ui-change - Emitted when the control's value changes.
 * @event flow-ui-input - Emitted when the control receives input.
 */
declare class FlowUiTimer extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon | typeof FlowUiIconButton | typeof FlowUiTooltip | typeof FlowUiCalendar | typeof FlowUiDropdown)[];
    private ticker;
    private tickerSubscription;
    private minorStepDuration;
    private majorStepDuration;
    /** Set while the calendar takes up a new timezone (see `updateTimezone()`). */
    private calendarZoneUpdate?;
    private dropdown;
    private calendar;
    private _displayDateTime;
    /**
     * The value of the timer. (ISO8601 date/time string)
     */
    value: string;
    /**
     * The timezone to use for display. (IANA timezone string).
     * If not set, the timezone will be the browser's local timezone.
     */
    timezone?: string;
    /**
     * The locale to use for display. (IETF BCP 47 language tag).
     * If not set, the locale will be the browser's default locale.
     */
    locale?: string;
    /**
     * Set to `true` to start the timer running.
     */
    running: boolean;
    /**
     * The date format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).
     */
    dateFormat: string;
    /**
     * The day format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).
     */
    dayFormat: string;
    /**
     * The time format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).
     */
    timeFormat: string;
    /**
     * The timezone format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).
     */
    zoneFormat: string;
    /**
     * The major step size to use for the timer step controls.
     */
    majorStep: string;
    /**
     * The minor step size to use for the timer step controls.
     */
    minorStep: string;
    /**
     * The timer update interval.
     */
    updateInterval: string;
    /**
     * Set to `true` to hide the timezone display.
     */
    hideZone: boolean;
    /**
     * The placement of the calendar popup relative to the timer control.
     */
    placement: 'top' | 'top-end' | 'top-start' | 'bottom' | 'bottom-start' | 'bottom-end';
    connectedCallback(): void;
    disconnectedCallback(): void;
    /** @internal */
    updateDisplayValue(): void;
    /** @internal */
    updateTimezone(): void;
    /** @internal */
    updateParsedSteps(): void;
    /** @internal */
    updateUpdateInterval(): void;
    /** @internal */
    updateRunning(): void;
    /** The timezone, or `undefined` (the local zone) when it isn't set. */
    private get zone();
    private setDisplayDateTime;
    private handleDateTimeKeyDown;
    private handleCalendarInput;
    private handleCalendarChange;
    private handlePlayPauseClicked;
    private handleStepClicked;
    private debouncedEmitChange;
    private formattedDisplayDateTime;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-timer': FlowUiTimer;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tool-button-group': FlowUiToolButtonGroup;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tool-button': FlowUiToolButton;
    }
}

/**
 * @tagname flow-ui-tree-item
 * @summary A tree item serves as a hierarchical node that lives inside a [tree](./flow-ui-tree).
 * @docgroup tree
 *
 * @dependency flow-ui-checkbox
 * @dependency flow-ui-icon
 * @dependency flow-ui-progress-ring
 *
 * @event flow-ui-expand - Emitted when the tree item expands.
 * @event flow-ui-after-expand - Emitted after the tree item expands and all animations are complete.
 * @event flow-ui-collapse - Emitted when the tree item collapses.
 * @event flow-ui-after-collapse - Emitted after the tree item collapses and all animations are complete.
 * @event flow-ui-lazy-change - Emitted when the tree item's lazy state changes.
 * @event flow-ui-lazy-load - Emitted when a lazy item is selected. Use this event to asynchronously load data and append
 *  items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading
 *  state and update the tree.
 *
 * @slot - The default slot.
 * @slot expand-icon - The icon to show when the tree item is expanded.
 * @slot collapse-icon - The icon to show when the tree item is collapsed.
 *
 * @csspart base - The component's base wrapper.
 * @csspart item - The tree item's container. This element wraps everything except slotted tree item children.
 * @csspart item--disabled - Applied when the tree item is disabled.
 * @csspart item--expanded - Applied when the tree item is expanded.
 * @csspart item--indeterminate - Applied when the selection is indeterminate.
 * @csspart item--selected - Applied when the tree item is selected.
 * @csspart indentation - The tree item's indentation container.
 * @csspart expand-button - The container that wraps the tree item's expand button and spinner.
 * @csspart label - The tree item's label.
 * @csspart children - The container that wraps the tree item's nested children.
 * @csspart checkbox - The checkbox that shows when using multiselect.
 * @csspart checkbox__base - The checkbox's exported `base` part.
 * @csspart checkbox__control - The checkbox's exported `control` part.
 * @csspart checkbox__control--checked - The checkbox's exported `control--checked` part.
 * @csspart checkbox__control--indeterminate - The checkbox's exported `control--indeterminate` part.
 * @csspart checkbox__checked-icon - The checkbox's exported `checked-icon` part.
 * @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.
 * @csspart checkbox__label - The checkbox's exported `label` part.
 */
declare class FlowUiTreeItem extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    static dependencies: (typeof FlowUiIcon | typeof FlowUiProgressRing | typeof FlowUiCheckbox)[];
    /** @internal */
    static isTreeItem(node: Node): boolean;
    private readonly localize;
    /** @internal */
    indeterminate: boolean;
    /** @internal */
    isLeaf: boolean;
    /** @internal */
    loading: boolean;
    /** @internal */
    selectable: boolean;
    /**
     * The tree-items's value. When selected, the containing tree control will receive this value. The value must be unique
     * from other tree-items in the same tree. Values may not contain spaces, as spaces are used as delimiters when listing
     * multiple values.
     */
    value: string;
    /** Expands the tree item. */
    expanded: boolean;
    /** Draws the tree item in a selected state. */
    selected: boolean;
    /** Disables the tree item. */
    disabled: boolean;
    /** Enables lazy loading behavior. */
    lazy: boolean;
    /** The select's size. */
    size: 'small' | 'medium' | 'large';
    /** Set to `true` to visually hide the tree item. */
    hidden: boolean;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal */
    childrenSlot: HTMLSlotElement;
    /** @internal */
    itemElement: HTMLDivElement;
    /** @internal */
    childrenContainer: HTMLDivElement;
    /** @internal */
    expandButtonSlot: HTMLSlotElement;
    connectedCallback(): void;
    firstUpdated(): void;
    /** @internal */
    handleValueChange(): void;
    private animateCollapse;
    private isNestedItem;
    private handleChildrenSlotChange;
    protected willUpdate(changedProperties: PropertyValueMap<FlowUiTreeItem> | Map<PropertyKey, unknown>): void;
    private animateExpand;
    /** @internal */
    handleLoadingChange(): void;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleSelectedChange(): void;
    /** @internal */
    handleExpandedChange(): void;
    /** @internal */
    handleExpandAnimation(): void;
    /** @internal */
    handleLazyChange(): void;
    /** Gets all the nested tree items in this node. */
    getChildrenItems({ includeDisabled }?: {
        includeDisabled?: boolean;
    }): FlowUiTreeItem[];
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tree-item': FlowUiTreeItem;
    }
}

/**
 * @tagname flow-ui-tree
 * @summary Trees allow you to display a hierarchical list of selectable [tree items](./flow-ui-tree-item). Items with children can be expanded and collapsed as desired by the user.
 * @docgroup tree
 *
 * @event flow-ui-input - Emitted when a tree item is selected or deselected.
 * @event flow-ui-change - Emitted when a tree item is selected or deselected.
 *
 * @slot - The default slot.
 * @slot expand-icon - The icon to show when the tree item is expanded. Works best with `<flow-ui-icon>`.
 * @slot collapse-icon - The icon to show when the tree item is collapsed. Works best with `<flow-ui-icon>`.
 *
 * @csspart base - The component's base wrapper.
 *
 * @cssproperty [--indent-size=var(--flow-ui-spacing-medium)] - The size of the indentation for nested items.
 * @cssproperty [--indent-guide-color=var(--flow-ui-color-neutral-200)] - The color of the indentation line.
 * @cssproperty [--indent-guide-offset=0] - The amount of vertical spacing to leave between the top and bottom of the
 *  indentation line's starting position.
 * @cssproperty [--indent-guide-style=solid] - The style of the indentation line, e.g. solid, dotted, dashed.
 * @cssproperty [--indent-guide-width=0] - The width of the indentation line.
 */
declare class FlowUiTree extends FlowRdfElement {
    static tagName: string;
    static styles: CSSResultGroup;
    private expandedIconSlot;
    private collapsedIconSlot;
    /** @internal - add form control class */
    class: string;
    /**
     * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
     * value attribute will be a space-delimited list of values based on the options selected, and the value property will
     * be an array. **For this reason, values must not contain spaces.**
     */
    value: string[];
    /**
     * The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
     * displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.
     */
    selectionMode: 'single' | 'multiple' | 'leaf';
    /** The select's size. */
    size: 'small' | 'medium' | 'large';
    private lastFocusedItem;
    private readonly localize;
    private mutationObserver;
    private clickTarget;
    connectedCallback(): Promise<void>;
    disconnectedCallback(): void;
    /** @internal - ensure form control class is always present */
    handleClassChange(): void;
    private getExpandButtonIcon;
    private initTreeItem;
    private handleTreeChanged;
    /** @internal */
    handleSizeChange(): void;
    private syncTreeItems;
    private selectItem;
    private getAllTreeItems;
    private focusItem;
    private handleKeyDown;
    private handleClick;
    private handleMouseDown;
    private handleFocusOut;
    private handleFocusIn;
    private handleHostExpandCollapse;
    private handleSlotChange;
    /** @internal */
    handleSelectionChange(): Promise<void>;
    /** @internal */
    handleValueChange(previousValue: string[]): void;
    /** @internal Returns the list of tree items that are selected in the tree. */
    get selectedItems(): FlowUiTreeItem[];
    /** @internal Gets focusable tree items in the tree. */
    getFocusableItems(): FlowUiTreeItem[];
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tree': FlowUiTree;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-visually-hidden': FlowUiVisuallyHidden;
    }
}

export { type BaseColorMapperField, type BaseColorStopOptions, type ColorMapperField, type ColorMapperOptions, type ColorMapperValue, type ColorStopOptions, type ColorStopValue, DIAGRAM_ARROW_MARKER_ID, DIAGRAM_GROUP_HIGHLIGHT_CLASS, DIAGRAM_NODE_SELECTED_CLASS, DIAGRAM_NODE_WRAPPER_CLASS, DIAGRAM_PALETTE_ITEM_MIME_TYPE, DIAGRAM_PORT_HOVERABLE_CLASS, DIAGRAM_PORT_HOVERABLE_OVER_NODE_CLASS, DefaultDiagramModelAdapter, type DiagramActionState, DiagramApi, type DiagramBackgroundConfig, type DiagramBasePaletteItemData, DiagramClipboardApi, type DiagramClipboardPastedEvent, type DiagramConfig, type DiagramConnectionValidationContext, type DiagramContextMenuEvent, type DiagramDanglingEdgesConfig, type DiagramDanglingEndpoint, type DiagramDataObject, type DiagramEdge, type DiagramEdgeDrawCancelReason, type DiagramEdgeDrawEndedEvent, type DiagramEdgeDrawnEvent, type DiagramEdgeEnd, type DiagramEdgeLabel, type DiagramEdgeLabelPosition, type DiagramEdgeRelinkCancelReason, type DiagramEdgeRelinkEndedEvent, type DiagramEdgeRelinkStartedEvent, type DiagramEdgeRouting, type DiagramEdgeTemplate, type DiagramEdgeTemplateContext, type DiagramEdgeTemplateMap, type DiagramEnvironmentInfo, type DiagramEventListener, type DiagramEventMap, type DiagramFlowConfig, type DiagramGroupMembershipChangedEvent, type DiagramGroupNode, DiagramGroupsApi, type DiagramInitEvent, type DiagramInvalidateMeasurementsOptions, type DiagramLinkingActionState, type DiagramLinkingConfig, type DiagramLinkingRelinkContext, type DiagramMeasurementOptions, type DiagramMetadata, type DiagramMiddleware, type DiagramMiddlewareChain, type DiagramMiddlewares, type DiagramMinimapNodeShape, type DiagramMinimapNodeStyle, type DiagramMinimapNodeStyleFn, type DiagramMinimapNodeTemplate, type DiagramMinimapNodeTemplateContext, type DiagramMinimapNodeTemplateMap, type DiagramModel, type DiagramModelAdapter, DiagramModelApi, type DiagramNode, type DiagramNodeDragEndedEvent, type DiagramNodeDragStartedEvent, type DiagramNodeResizeEndedEvent, type DiagramNodeResizeStartedEvent, type DiagramNodeResizedEvent, type DiagramNodeRotateEndedEvent, type DiagramNodeRotateStartedEvent, type DiagramNodeTemplate, type DiagramNodeTemplateContext, type DiagramNodeTemplateMap, DiagramNodesApi, DiagramObserver, type DiagramOriginPoint, type DiagramPaletteGroupNodeData, type DiagramPaletteItem, type DiagramPaletteItemDroppedEvent, type DiagramPaletteSimpleNodeData, type DiagramPanelPosition, type DiagramPoint, type DiagramPort, type DiagramPortSide, type DiagramRect, type DiagramReference, type DiagramResizeDirection, type DiagramSelection, DiagramSelectionApi, type DiagramSelectionChangedEvent, type DiagramSelectionGestureEndedEvent, type DiagramSelectionMode, type DiagramSelectionMovedEvent, type DiagramSelectionRemovedEvent, type DiagramSelectionRotatedEvent, type DiagramShortcutDefinition, type DiagramSide, type DiagramSimpleNode, type DiagramSize, type DiagramTransactionOptions, type DiagramTransactionResult, type DiagramViewport, DiagramViewportApi, type DiagramViewportChangedEvent, type DiagramZoomToFitOptions, type FlowQueryBuilderConfig, type FlowQueryBuilderConverter, type FlowQueryBuilderConverterOptions, type FlowQueryBuilderDateField, type FlowQueryBuilderDateTimeField, type FlowQueryBuilderDateTimeFieldBase, type FlowQueryBuilderField, type FlowQueryBuilderFieldBase, type FlowQueryBuilderFieldDefinition, type FlowQueryBuilderFieldMap, type FlowQueryBuilderFieldType, type FlowQueryBuilderFieldTypeMap, type FlowQueryBuilderNumberField, type FlowQueryBuilderOption, type FlowQueryBuilderRule, type FlowQueryBuilderRuleSet, type FlowQueryBuilderSelectField, type FlowQueryBuilderStringField, type FlowQueryBuilderTemplateFn, type FlowQueryBuilderTimeField, type FlowAfterCollapseEvent as FlowUiAfterCollapseEvent, type FlowAfterExpandEvent as FlowUiAfterExpandEvent, type FlowAfterHideEvent as FlowUiAfterHideEvent, type FlowAfterShowEvent as FlowUiAfterShowEvent, FlowUiAlert, FlowUiAnimation, type FlowApplyEvent as FlowUiApplyEvent, FlowUiAutocomplete, FlowUiAvatar, FlowUiBadge, FlowUiBaseControl, type FlowBlurEvent as FlowUiBlurEvent, FlowUiBreadcrumb, FlowUiBreadcrumbItem, FlowUiBusyOverlay, FlowUiButton, FlowUiButtonGroup, FlowUiCalendar, type FlowCancelEvent as FlowUiCancelEvent, FlowUiCard, FlowUiCarousel, FlowUiCarouselItem, type FlowChangeEvent as FlowUiChangeEvent, FlowUiChart, FlowUiCheckbox, FlowUiCheckboxGroup, type FlowClearEvent as FlowUiClearEvent, type FlowCloseEvent as FlowUiCloseEvent, type FlowCollapseEvent as FlowUiCollapseEvent, type FlowCollapseTreeEvent as FlowUiCollapseSplitViewEvent, FlowUiColorMapper, FlowUiColorPicker, FlowUiColorStop, FlowUiDateTimePicker, FlowUiDetails, FlowUiDiagram, FlowUiDiagramBackground, FlowUiDiagramBaseEdge, FlowUiDiagramBaseNode, type FlowUiDiagramClipboardPastedEvent, type FlowUiDiagramContextMenuEvent, FlowUiDiagramEdge, type FlowUiDiagramEdgeDrawEndedEvent, type FlowUiDiagramEdgeDrawnEvent, FlowUiDiagramEdgeLabel, type FlowUiDiagramEdgeRelinkEndedEvent, type FlowUiDiagramEdgeRelinkStartedEvent, type FlowUiDiagramEventMap, type FlowUiDiagramGroupMembershipChangedEvent, type FlowUiDiagramInitEvent, FlowUiDiagramMarker, FlowUiDiagramMinimap, FlowUiDiagramNode, type FlowUiDiagramNodeDragEndedEvent, type FlowUiDiagramNodeDragStartedEvent, type FlowUiDiagramNodeResizeEndedEvent, type FlowUiDiagramNodeResizeStartedEvent, type FlowUiDiagramNodeResizedEvent, type FlowUiDiagramNodeRotateEndedEvent, type FlowUiDiagramNodeRotateStartedEvent, FlowUiDiagramPaletteItem, type FlowUiDiagramPaletteItemDroppedEvent, FlowUiDiagramPaletteItemPreview, FlowUiDiagramPort, FlowUiDiagramResizeAdornment, FlowUiDiagramRotateAdornment, type FlowUiDiagramSelectionChangedEvent, type FlowUiDiagramSelectionGestureEndedEvent, type FlowUiDiagramSelectionMovedEvent, type FlowUiDiagramSelectionRemovedEvent, type FlowUiDiagramSelectionRotatedEvent, type FlowUiDiagramViewportChangedEvent, FlowUiDiagramZoomControls, FlowUiDialog, FlowUiDivider, type FlowDragDropEvent as FlowUiDragDrop, type FlowDragEndEvent as FlowUiDragEndEvent, type FlowDragEvent as FlowUiDragEvent, type FlowDragOverEvent as FlowUiDragOverEvent, type FlowDragStartEvent as FlowUiDragStartEvent, FlowUiDrawer, FlowUiDropdown, type FlowErrorEvent as FlowUiErrorEvent, type FlowExpandEvent as FlowUiExpandEvent, type FlowExpandTreeEvent as FlowUiExpandSplitViewEvent, type FlowFinishEvent as FlowUiFinishEvent, type FlowFocusEvent as FlowUiFocusEvent, FlowUiFormGroup, FlowUiGauge, type FlowHideEvent as FlowUiHideEvent, type FlowHoverEvent as FlowUiHoverEvent, FlowUiIcon, FlowUiIconButton, type FlowInitialFocusEvent as FlowUiInitialFocusEvent, FlowUiInput, type FlowInputEvent as FlowUiInputEvent, type FlowInvalidEvent as FlowUiInvalidEvent, type FlowLazyChangeEvent as FlowUiLazyChangeEvent, type FlowLazyLoadEvent as FlowUiLazyLoadEvent, FlowUiList, FlowUiListItem, type FlowLoadEvent as FlowUiLoadEvent, FlowUiMap, type FlowMapLoadEvent as FlowUiMapLoadEvent, FlowUiMenu, FlowUiMenuItem, FlowUiMenuLabel, type FlowMutationEvent as FlowUiMutationEvent, FlowUiMutationObserver, FlowUiOption, FlowUiPanel, FlowUiPanelHeader, type FlowPanelToggleEvent as FlowUiPanelToggleEvent, FlowUiPopup, FlowUiProgressBar, FlowUiProgressRing, FlowUiQueryBuilder, FlowUiRadio, FlowUiRadioGroup, FlowUiRange, type FlowRemoveEvent as FlowUiRemoveEvent, type FlowRepositionEvent as FlowUiRepositionEvent, type FlowRequestCloseEvent as FlowUiRequestCloseEvent, type FlowResizeEvent as FlowUiResizeEvent, FlowUiResizeObserver, FlowUiScrollView, FlowUiSelect, type FlowSelectEvent as FlowUiSelectEvent, type FlowShowEvent as FlowUiShowEvent, type FlowSlideChange as FlowUiSlideChange, FlowUiSplitView, FlowUiSplitViewDivider, FlowUiSplitViewPane, FlowUiSplitViewToggleButton, type FlowStartEvent as FlowUiStartEvent, FlowUiStepper, FlowUiStepperPanel, FlowUiSwitch, FlowUiTab, FlowUiTabGroup, type FlowTabHideEvent as FlowUiTabHideEvent, FlowUiTabPanel, type FlowTabShowEvent as FlowUiTabShowEvent, FlowUiTag, FlowUiTextarea, FlowUiTimer, FlowUiToolButton, FlowUiToolButtonGroup, FlowUiTooltip, FlowUiTree, FlowUiTreeItem, FlowUiVisuallyHidden, type InitializeModelOptions, JavaScriptFilterError, type JavaScriptFilterFn, LocalizeController, type NumberColorMapperField, type NumberColorStopOptions, type ObservableListener, type ReadonlyObservable, type SelectColorMapperField, type SelectColorStopOptions, type StringColorMapperField, type StringColorStopOptions, type StripEdgeRuntimePropertiesFn, type StripNodeRuntimePropertiesFn, type Translation, type Unsubscribe, addIcons, betweenRuleValues, colorMapperValueToMaplibreExpression, computeDetachAnchor, configureShortcuts, countRuleSet, createMiddlewares, diagramGroupHighlighted, diagramHidden, diagramNodeSelected, escapeMaplibreString, filterRuleSet, converter$2 as flowQueryConverter, getAnimationNames, getDanglingEndpoints, getEasingNames, getNearestDanglingEndpointInRange, hasFreeEndpoint, initialize, initializeChartJs, initializeModel, initializeModelAdapter, isDanglingEdge, isEdgeEndRelinkable, isRule, isRuleOrRuleset, isRuleSet, converter$1 as javascriptFilterConverter, converter as mapLayerFilterConverter, registerChartComponent, registerComponents, registerIconLibrary, registerTranslation, renameRuleSetFields, setDefaultLocale, setDefaultTimeZone, stripEdgeRuntimeProperties, stripNodeRuntimeProperties, transformRuleSet, unregisterIconLibrary };