import { CSSProperties } from 'preact';

interface KnownHtmlAttributes {
    class?: string | (string | false | null | undefined)[] | undefined;
    style?: CSSProperties | undefined;
    acceptCharset?: string;
    autoComplete?: "on" | "off" | string;
    autoPlay?: boolean;
    bgColor?: string;
    colSpan?: string | number;
    crossOrigin?: "" | string | "anonymous" | "use-credentials";
    dateTime?: string;
    dirName?: string;
    encType?: string | "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
    formAction?: string;
    formEncType?: string;
    formMethod?: string;
    formNoValidate?: string;
    formTarget?: string;
    hrefLang?: string;
    httpEquiv?: string;
    isMap?: boolean;
    maxLength?: string | number;
    minLength?: string | number;
    noValidate?: boolean;
    playsInline?: boolean;
    readOnly?: string;
    referrerPolicy?: string;
    rowSpan?: string | number;
    srcDoc?: string;
    srcLang?: string;
    srcSet?: string;
    useMap?: string;
    accept?: string;
    action?: string;
    align?: string | "left" | "top" | "right" | "bottom";
    allow?: string;
    alt?: string;
    as?: "object" | "style" | "document" | string | "audio" | "embed" | "fetch" | "font" | "image" | "script" | "track" | "video" | "worker";
    async?: boolean;
    background?: string;
    border?: string;
    capture?: string | "user" | "environment";
    charset?: string;
    checked?: boolean;
    cite?: string;
    color?: string;
    cols?: string | number;
    content?: string | number;
    controls?: boolean;
    coords?: string;
    csp?: string;
    data?: string & Record<string, any>;
    decoding?: string;
    default?: boolean;
    defer?: boolean;
    disabled?: boolean;
    download?: string;
    for?: string;
    form?: string;
    headers?: string;
    height?: string | number;
    high?: string | number;
    href?: string;
    integrity?: string;
    kind?: string | "subtitles" | "captions" | "chapters" | "metadata";
    label?: string;
    language?: string;
    loading?: string | "lazy" | "eager";
    list?: string;
    loop?: boolean;
    low?: string | number;
    max?: string | number;
    media?: string;
    method?: string;
    min?: string | number;
    multiple?: boolean;
    muted?: boolean;
    name?: string;
    open?: boolean;
    optimum?: string | number;
    pattern?: string;
    ping?: string;
    placeholder?: string;
    poster?: string;
    preload?: string;
    rel?: "preload" | "search" | string | "alternate" | "author" | "bookmark" | "canonical" | "dns-prefetch" | "external" | "expect" | "help" | "icon" | "license" | "manifest" | "me" | "modulepreload" | "next" | "nofollow" | "noopener" | "noreferrer" | "opener" | "pingback" | "preconnect" | "prefetch" | "prerender" | "prey" | "privacy-policy" | "stylesheet" | "tag" | "terms-of-service";
    required?: boolean;
    reversed?: boolean;
    role?: string | string;
    rows?: string | number;
    sandbox?: string | "allow-downloads" | "allow-forms" | "allow-modals" | "allow-orientation-lock" | "allow-pointer-lock" | "allow-popups" | "allow-popups-to-escape-sandbox" | "allow-presentation" | "allow-same-origin" | "allow-scripts" | "allow-storage-access-by-user-activation" | "allow-top-navigation" | "allow-top-navigation-by-user-activation" | "allow-top-navigation-to-custom-protocols";
    scope?: "row" | "rowgroup" | string | "col" | "colgroup";
    selected?: boolean;
    shape?: string;
    size?: string | number;
    sizes?: string;
    span?: string | number;
    src?: string;
    start?: string | number;
    step?: string | number;
    summary?: string;
    target?: string | "_blank" | "_self" | "_parent" | "_top";
    type?: string;
    value?: string | number;
    width?: string | number;
    wrap?: string | "hard" | "soft" | "off";
    autoCapitalize?: "none" | string | "off" | "sentences" | "on" | "words" | "characters";
    autoFocus?: boolean;
    contentEditable?: boolean;
    enterKeyHint?: string;
    exportParts?: string;
    inputMode?: "none" | "search" | string | "text" | "decimal" | "numeric" | "tel" | "email" | "url";
    itemId?: string;
    itemProp?: string;
    itemRef?: string | string[];
    itemScope?: string;
    itemType?: string;
    popOver?: string;
    spellCheck?: boolean;
    tabIndex?: string | number;
    virtualKeyboardPolicy?: string | "auto" | "manual";
    writingSuggestions?: boolean;
    accesskey?: string;
    dir?: string | "auto" | "ltr" | "rtl";
    draggable?: boolean;
    hidden?: boolean;
    id?: string;
    lang?: string;
    nonce?: string;
    part?: string;
    slot?: string;
    title?: string;
    translate?: string | "yes" | "no";
    inert?: boolean;
    alpha?: boolean;
    colorSpace?: string;
    elemenTtiming?: string;
    fetchPriority?: string;
    imageSizes?: string;
    imageSrcset?: string;
    is?: string;
    popoverTarget?: string;
    popoverTargetAction?: string;
    credentialless?: boolean;
    browsingTopics?: boolean;
    onAbort?: (ev: UIEvent) => void;
    onActivate?: (ev: AnimationEvent) => void;
    onAnimationCancel?: (ev: AnimationEvent) => void;
    onAnimationEnd?: (ev: AnimationEvent) => void;
    onAnimationIteration?: (ev: AnimationEvent) => void;
    onAnimationStart?: (ev: AnimationEvent) => void;
    onAuxClick?: (ev: MouseEvent) => void;
    onBeforeInput?: (ev: InputEvent) => void;
    onBeforeToggle?: (ev: Event) => void;
    onBegin?: (ev: Event) => void;
    onBlur?: (ev: FocusEvent) => void;
    onCancel?: (ev: Event) => void;
    onCanPlay?: (ev: Event) => void;
    onCanPlayThrough?: (ev: Event) => void;
    onChange?: (ev: Event) => void;
    onClick?: (ev: MouseEvent) => void;
    onClose?: (ev: Event) => void;
    onContextLost?: (ev: Event) => void;
    onContextMenu?: (ev: MouseEvent) => void;
    onContextRestored?: (ev: Event) => void;
    onCopy?: (ev: ClipboardEvent) => void;
    onCueChange?: (ev: Event) => void;
    onCut?: (ev: ClipboardEvent) => void;
    onDblClick?: (ev: MouseEvent) => void;
    onDrag?: (ev: DragEvent) => void;
    onDragEnd?: (ev: DragEvent) => void;
    onDragEnter?: (ev: DragEvent) => void;
    onDragLeave?: (ev: DragEvent) => void;
    onDragOver?: (ev: DragEvent) => void;
    onDragStart?: (ev: DragEvent) => void;
    onDrop?: (ev: DragEvent) => void;
    onDurationChange?: (ev: Event) => void;
    onEmptied?: (ev: Event) => void;
    onEnded?: (ev: Event) => void;
    onError?: (event: Event | string) => void;
    onFocus?: (ev: FocusEvent) => void;
    onFocusIn?: (ev: FocusEvent) => void;
    onFocusOut?: (ev: FocusEvent) => void;
    onFormData?: (ev: FormDataEvent) => void;
    onGotPointerCapture?: (ev: PointerEvent) => void;
    onInput?: (ev: Event) => void;
    onInvalid?: (ev: Event) => void;
    onKeyDown?: (ev: KeyboardEvent) => void;
    onKeyPress?: (ev: KeyboardEvent) => void;
    onKeyUp?: (ev: KeyboardEvent) => void;
    onLoad?: (ev: Event) => void;
    onLoadedData?: (ev: Event) => void;
    onLoadedMetaData?: (ev: Event) => void;
    onLoadStart?: (ev: Event) => void;
    onLostPointerCapture?: (ev: PointerEvent) => void;
    onMouseDown?: (ev: MouseEvent) => void;
    onMouseEnter?: (ev: MouseEvent) => void;
    onMouseLeave?: (ev: MouseEvent) => void;
    onMouseMove?: (ev: MouseEvent) => void;
    onMouseOut?: (ev: MouseEvent) => void;
    onMouseOver?: (ev: MouseEvent) => void;
    onMouseUp?: (ev: MouseEvent) => void;
    onMouseWheel?: (event: Event) => void;
    onPaste?: (ev: ClipboardEvent) => void;
    onPause?: (ev: Event) => void;
    onPlay?: (ev: Event) => void;
    onPlaying?: (ev: Event) => void;
    onPointerCancel?: (ev: PointerEvent) => void;
    onPointerDown?: (ev: PointerEvent) => void;
    onPointerEnter?: (ev: PointerEvent) => void;
    onPointerLeave?: (ev: PointerEvent) => void;
    onPointerMove?: (ev: PointerEvent) => void;
    onPointerOut?: (ev: PointerEvent) => void;
    onPointerOver?: (ev: PointerEvent) => void;
    onPointerUp?: (ev: PointerEvent) => void;
    onProgress?: (ev: ProgressEvent) => void;
    onRateChange?: (ev: Event) => void;
    onRepeat?: (ev: Event) => void;
    onReset?: (ev: Event) => void;
    onResize?: (ev: UIEvent) => void;
    onScroll?: (ev: Event) => void;
    onScrollEnd?: (ev: Event) => void;
    onSecurityPolicyViolation?: (ev: SecurityPolicyViolationEvent) => void;
    onSeeked?: (ev: Event) => void;
    onSeeking?: (ev: Event) => void;
    onSelect?: (ev: Event) => void;
    onSelectionChange?: (ev: Event) => void;
    onSelectStart?: (ev: Event) => void;
    onShow?: (ev: Event) => void;
    onSlotChange?: (ev: Event) => void;
    onStalled?: (ev: Event) => void;
    onSubmit?: (ev: SubmitEvent) => void;
    onSuspend?: (ev: Event) => void;
    onTimeUpdate?: (ev: Event) => void;
    onToggle?: (ev: Event) => void;
    onTouchCancel?: (ev: TouchEvent) => void;
    onTouchEnd?: (ev: TouchEvent) => void;
    onTouchMove?: (ev: TouchEvent) => void;
    onTouchStart?: (ev: TouchEvent) => void;
    onTransitionCancel?: (ev: TransitionEvent) => void;
    onTransitionEnd?: (ev: TransitionEvent) => void;
    onTransitionRun?: (ev: TransitionEvent) => void;
    onTransitionStart?: (ev: TransitionEvent) => void;
    onUnload?: (ev: Event) => void;
    onVolumeChange?: (ev: Event) => void;
    onWaiting?: (ev: Event) => void;
    onWebkitAnimationEnd?: (ev: Event) => void;
    onWebkitAnimationIteration?: (ev: Event) => void;
    onWebkitAnimationStart?: (ev: Event) => void;
    onWebkitTransitionEnd?: (ev: Event) => void;
    onWheel?: (ev: WheelEvent) => void;
    ariaActiveDescendant?: string;
    ariaAtomic?: string | boolean;
    ariaAutoComplete?: "list" | "none" | string | "inline" | "both";
    ariaBrailleLabel?: string;
    ariaBrailleRoleDescription?: string;
    ariaBusy?: boolean;
    ariaChecked?: boolean | string | "true" | "false" | "mixed";
    ariaColCount?: number;
    ariaColIndex?: number;
    ariaColSpan?: number;
    ariaControls?: string;
    ariaCurrent?: boolean | "step" | string | "true" | "false" | "page" | "location" | "date" | "time";
    ariaDescription?: string;
    ariaDescribedBy?: string;
    ariaDetails?: string;
    ariaDisabled?: boolean;
    ariaDropEffect?: "link" | "none" | string | "copy" | "execute" | "move" | "popup";
    ariaErrorMessage?: string;
    ariaExpanded?: boolean;
    ariaFlowTo?: string;
    ariaGrabbed?: boolean;
    ariaHasPopup?: boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | string | "true" | "false";
    ariaHidden?: boolean;
    ariaInvalid?: boolean | string | "true" | "false" | "grammar" | "spelling";
    ariaKeyShortcuts?: string;
    ariaLabel?: string;
    ariaLabelledBy?: string;
    ariaLevel?: number;
    ariaLive?: string | "off" | "assertive" | "polite";
    ariaModal?: boolean;
    ariaMultiLine?: boolean;
    ariaMultiSelectable?: boolean;
    ariaOrientation?: string | "horizontal" | "vertical";
    ariaOwns?: string;
    ariaPlaceholder?: string;
    ariaPosInSet?: number;
    ariaPressed?: boolean | string | "true" | "false" | "mixed";
    ariaReadOnly?: boolean;
    ariaRelevant?: string | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
    ariaRequired?: boolean;
    ariaRoleDescription?: string;
    ariaRowCount?: number;
    ariaRowIndex?: number;
    ariaRowSpan?: number;
    ariaSelected?: boolean;
    ariaSetSize?: number;
    ariaSort?: "none" | string | "ascending" | "descending" | "other";
    ariaValueMax?: number;
    ariaValueMin?: number;
    ariaValueNow?: number;
    ariaValueText?: string;
}

interface KnownSvgAttributes {
    accentHeight?: string | number;
    accumulate?: string | "none" | "sum";
    additive?: string | "sum" | "replace";
    alignmentBaseline?: "alphabetic" | "hanging" | "ideographic" | "mathematical" | "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "inherit" | string;
    allowReorder?: string | "no" | "yes";
    alphabetic?: string | number;
    amplitude?: string | number;
    arabicForm?: string | "initial" | "medial" | "terminal" | "isolated";
    ascent?: string | number;
    attributeName?: string;
    azimuth?: string | number;
    baseFrequency?: string | number;
    baselineShift?: string;
    baseProfile?: string | number;
    bbox?: string | number;
    begin?: string;
    bias?: string | number;
    by?: string | number;
    calcMode?: string | "discrete" | "linear" | "paced" | "spline";
    capHeight?: string | number;
    className?: string;
    clip?: string;
    clipPath?: string;
    clipPathUnits?: string | number;
    clipRule?: string | number;
    colorInterpolation?: "auto" | "inherit" | string | "sRGB" | "linearRGB";
    colorInterpolationFilters?: "auto" | "inherit" | string | "sRGB" | "linearRGB";
    colorRendering?: string | number;
    cursor?: string;
    cx?: string | number;
    cy?: string | number;
    d?: string;
    decelerate?: string;
    descent?: string | number;
    diffuseConstant?: string | number;
    direction?: string | "ltr" | "rtl";
    display?: string;
    divisor?: string | number;
    dominantBaseline?: string;
    dur?: string;
    dx?: string | number;
    dy?: string | number;
    edgeMode?: string | number;
    elevation?: string | number;
    end?: string;
    exponent?: string | number;
    fill?: string;
    fillOpacity?: string | number;
    fillRule?: "inherit" | string | "nonzero" | "evenodd";
    filter?: string;
    filterRes?: string | number;
    filterUnits?: string | number;
    floodColor?: string;
    floodOpacity?: string | number;
    fontFamily?: string;
    fontSize?: string | number;
    fontSizeAdjust?: number | string | "none";
    fontStretch?: number | string | "normal" | "semi-condensed" | "condensed" | "extra-condensed" | "ultra-condensed" | "semi-expanded" | "expanded" | "extra-expanded" | "ultra-expanded";
    fontStyle?: string | "normal" | "italic" | "oblique";
    fontVariant?: string | "none" | "normal";
    fontWeight?: number | string | "normal" | "bold" | "bolder" | "lighter";
    format?: string;
    fr?: string | number;
    from?: string | number;
    fx?: string | number;
    fy?: string | number;
    g1?: string;
    g2?: string;
    glyphName?: string;
    glyphOrientationHorizontal?: string | number;
    glyphOrientationVertical?: string | number;
    glyphRef?: string | number;
    gradientTransform?: string;
    gradientUnits?: string | "userSpaceOnUse" | "objectBoundingBox";
    hanging?: string | number;
    horizAdvX?: string | number;
    horizOriginX?: string | number;
    horizOriginY?: string | number;
    ideographic?: string | number;
    imageRendering?: string;
    in?: string | "SourceGraphic" | "SourceAlpha" | "BackgroundImage" | "BackgroundAlpha" | "FillPaint" | "StrokePaint";
    in2?: string | "SourceGraphic" | "SourceAlpha" | "BackgroundImage" | "BackgroundAlpha" | "FillPaint" | "StrokePaint";
    intercept?: string | number;
    k?: string | number;
    k1?: string | number;
    k2?: string | number;
    k3?: string | number;
    k4?: string | number;
    kernelMatrix?: string | number;
    kernelUnitLength?: string | number;
    keyPoints?: string | number;
    keySplines?: string;
    keyTimes?: string;
    lengthAdjust?: string | number;
    letterSpacing?: string | number;
    lightingColor?: string;
    limitingConeAngle?: string | number;
    local?: string;
    markerEnd?: string | "none";
    markerHeight?: string | number;
    markerMid?: string | "none";
    markerStart?: string | "none";
    markerUnits?: string | number;
    markerWidth?: string | number;
    mask?: string;
    maskContentUnits?: string | "userSpaceOnUse";
    maskUnits?: string | number;
    mathematical?: string | number;
    method?: string | "align" | "stretch";
    mode?: string;
    numOctaves?: string | number;
    offset?: string | number;
    opacity?: string | number;
    operator?: "in" | string | "lighter" | "over" | "out" | "atop" | "xor" | "arithmetic";
    order?: string | number;
    orient?: number | "auto" | string | "auto-start-reverse";
    orientation?: string | "h" | "v";
    origin?: string;
    overflow?: "auto" | string | "visible" | "hidden" | "scroll";
    overlinePosition?: string | number;
    overlineThickness?: string | number;
    paintOrder?: "fill" | "stroke" | string | "normal" | "markers";
    path?: string;
    pathLength?: string | number;
    patternContentUnits?: string | "userSpaceOnUse" | "objectBoundingBox";
    patternTransform?: string;
    patternUnits?: string | "userSpaceOnUse" | "objectBoundingBox";
    pointerEvents?: "fill" | "stroke" | string | "none" | "bounding-box" | "visiblePainted" | "visibleFill" | "visibleStroke" | "visible" | "painted" | "all";
    points?: string | number;
    pointsAtX?: string | number;
    pointsAtY?: string | number;
    pointsAtZ?: string | number;
    preserveAlpha?: boolean;
    preserveAspectRatio?: string | "none" | "xMinYMin" | "xMidYMin" | "xMaxYMin" | "xMinYMid" | "xMidYMid" | "xMaxYMid" | "xMinYMax" | "xMidYMax" | "xMaxYMax" | "meet" | "slice";
    primitiveUnits?: string | "userSpaceOnUse" | "objectBoundingBox";
    r?: string | number;
    radius?: string | number;
    refX?: number | string | "left" | "center" | "right";
    refY?: number | string | "left" | "center" | "right";
    repeatCount?: string | number;
    repeatDur?: string | number;
    requiredExtensions?: string;
    restart?: string | "always" | "whenNotActive" | "never";
    result?: string;
    rotate?: number | "auto" | string | "auto-reverse";
    rx?: string | number;
    ry?: string | number;
    scale?: string | number;
    seed?: string | number;
    shapeRendering?: "auto" | string | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
    side?: string | "left" | "right";
    slope?: string | number;
    spacing?: "auto" | string | "exact";
    specularConstant?: string | number;
    specularExponent?: string | number;
    speed?: string | number;
    spreadMethod?: string | "pad" | "reflect" | "repeat";
    startOffset?: string | number;
    stdDeviation?: string | number;
    stemh?: string | number;
    stemv?: string | number;
    stitchTiles?: string | "noStitch" | "stitch";
    stopColor?: string;
    stopOpacity?: string | number;
    stroke?: string;
    strokeDashArray?: string | number;
    strokeDashOffset?: string | number;
    strokeLineCap?: "inherit" | string | "butt" | "round" | "square";
    strokeLineJoin?: "inherit" | string | "bevel" | "miter" | "miter-clip" | "round";
    strokeMiterLimit?: string | number;
    strokeOpacity?: string | number;
    strokeWidth?: string | number;
    surfaceScale?: string | number;
    systemLanguage?: string;
    tableValues?: string | number;
    targetX?: string | number;
    targetY?: string | number;
    textAnchor?: "middle" | string | "start" | "end";
    textDecoration?: string;
    textLength?: string | number;
    textRendering?: "auto" | string | "optimizeSpeed" | "geometricPrecision" | "optimizeLegibility";
    to?: string | number;
    transform?: string;
    transformOrigin?: string;
    u1?: string;
    u2?: string;
    underlinePosition?: string | number;
    underlineThickness?: string | number;
    unicode?: string;
    unicodeBidi?: string | "normal" | "embed" | "bidi-override" | "isolate" | "isolate-override" | "plaintext";
    unicodeRange?: string | number;
    unitsPerEm?: string | number;
    vAlphabetic?: string | number;
    values?: string | number;
    vectorEffect?: string | "none" | "non-scaling-stroke" | "non-scaling-size" | "non-rotation" | "fixed-position";
    vertAdvY?: string | number;
    vertOriginX?: string | number;
    vertOriginY?: string | number;
    vHanging?: string | number;
    vIdeographic?: string | number;
    viewBox?: string;
    viewTarget?: string | number;
    visibility?: string | "visible" | "hidden" | "collapse";
    vMathematical?: string | number;
    widths?: string | number;
    wordSpacing?: number | string | "normal";
    writingMode?: string | "horizontal-tb" | "vertical-rl" | "vertical-lr";
    x?: string | number;
    x1?: string | number;
    x2?: string | number;
    xChannelSelector?: string | "R" | "G" | "B" | "A";
    xHeight?: string | number;
    xlinkActuate?: string;
    xlinkArcrole?: string;
    xlinkHref?: string;
    xlinkRole?: string;
    xlinkShow?: string;
    xlinkTitle?: string;
    xlinkType?: string;
    xmlBase?: string;
    xmlLang?: string;
    xmlns?: string;
    xmlnsXlink?: string;
    xmlSpace?: string;
    y?: string | number;
    y1?: string | number;
    y2?: string | number;
    yChannelSelector?: string | "R" | "G" | "B" | "A";
    z?: string | number;
    zoomAndPan?: string | "disable" | "magnify";
}

type PreactHookConfig = {
    hook: Function;
    options?: any;
};
type PreactComponentConfig = {
    component: any;
    componentProps?: Record<string, any>;
};
type PreactWithConfig = PreactHookConfig | PreactComponentConfig;

type OnUnmounted = () => void;
interface VAttributes extends Partial<KnownHtmlAttributes & KnownSvgAttributes> {
    onMounted?: (element: Element) => OnUnmounted | void;
    key?: string | number;
    [dataAttribute: `data-${string}`]: string;
    withPreact?: PreactWithConfig;
}
type VNode = VElement | string | number;
interface VElement {
    nodeName: string;
    attributes: VAttributes;
    children: VNode[];
    key?: string | number;
}
declare function isVElement(vnode?: VNode): vnode is VElement;

type FrameworkAttrs = Record<string, any>;
type VElementTransformer<FrameworkNode> = {
    transformElement: (tag: string, attrs: FrameworkAttrs, children: FrameworkNode[]) => FrameworkNode;
    transformHook: (hookConfig: any, tag: string, attrs: FrameworkAttrs, children: FrameworkNode[]) => FrameworkNode;
    tranformComponent: (componentConfig: any, tag: string, props: FrameworkAttrs, children: FrameworkNode[]) => FrameworkNode;
    transformOnMounted: (frameworkElement: FrameworkNode, onMounted: (el: Element) => OnUnmounted | void, originalProps: FrameworkAttrs) => FrameworkNode;
    transformAttributeName?: (domEventName: string, isSVG: boolean) => string;
    transformAttributes?: (tag: string, attrs: FrameworkAttrs) => FrameworkAttrs;
};
declare abstract class Renderer<FrameworkNode> {
    private readonly _transformer;
    abstract get rendererName(): string;
    abstract patch(vElement: VElement, element: Element): Element;
    constructor(transformer: VElementTransformer<FrameworkNode>);
    protected renderVNode(node: VNode): FrameworkNode;
}

type ComponentState = "detached" | "updating" | "rendered";
type UpdateCause = "input" | "validator" | "router" | "serializer";
interface UpdateEvent {
    component: Component;
    cause?: UpdateCause | string;
    key?: string;
    value?: any;
}
interface IApp {
    update(event: UpdateEvent): void;
    root: Component;
    renderer: Renderer<any>;
}
declare const componentSkipProps: string[];

declare class Route {
    readonly segments: string[];
    readonly query: string;
    /**
     * Create a Route.
     * @param routeOrSegments Either:
     *  - a full path and query string, e.g. "/a/b?x=1"
     *  - an array of segments, e.g. ["a","b"]
     * @param query Raw query string (e.g. "x=1&y=2"). If provided, it overrides
     *              any ?query part embedded in the first argument.
     */
    constructor(routeOrSegments: string | string[], query?: string);
    get pathOnly(): Route;
    get firstSegment(): string;
    get remainder(): Route;
    withQuery(query: string): Route;
    concat(other: string | string[] | Route): Route;
    toString(): string;
    equals(other: Route): boolean;
    /** Return path relative to the given base path if it is a prefix; otherwise return this */
    relativeTo(base: Route): Route;
}

type HValue = VNode | VAttributes | null | undefined;
type HValues = HValue | HValues[];
declare function mergeAttrs(...attrs: (VAttributes | null | undefined)[]): VAttributes;
declare function h(tagName: string, ...values: HValues[]): VElement;

declare class Router {
    private readonly _component;
    private _activeSegment;
    private _navigationVersion;
    private _inFlight?;
    routeService?: IRouteService;
    constructor(owner: Component & IRouted);
    navigate(relativeRoute: Route | string | string[], action?: Action): Promise<boolean>;
    get component(): IRouted;
    private fireRouterUpdateEvent;
    private bumpNavigationVersion;
    private getInFlight;
    private shouldShortCircuit;
    private fireNavigated;
    private clearActiveSegments;
    get activeSegment(): string;
    get activeLeaf(): Router | undefined;
    get isActive(): boolean;
    get parent(): Router | undefined;
    get rootToHereRouters(): Router[];
    get rootToHereRoute(): Route;
    get root(): Router;
    get children(): IRouted[];
    child(seg: string): IRouted | undefined;
    get activeChild(): IRouted | undefined;
    get isTransparent(): boolean;
    link(relativeRoute: Route | string | string[], ...content: HValues[]): VElement;
}

interface IRouted extends Component {
    router: Router;
    routeSegment: string;
}
declare function isRouted(c: Component | IRouted): c is IRouted;
interface IRouteService {
    basePath: Route;
    currentRoute: Route;
    root: Router;
    syncHistory(action: Action): void;
    navigateAbsolute(absolute: Route, action: Action): Promise<boolean>;
}
interface RouterEvent extends UpdateEvent {
    cause: "router";
}

type Action = 'PUSH' | 'REPLACE' | 'POP';

type PropertyRef<T> = string | (() => T);
/**
 * Returns the property name from a property access expression, e.g. `key(() => obj.username)` returns `"username"`.
 * For a nested property access expression, only returns the last property (e.g. `key(() => a.b.c)` returns `"c"`).
 */
declare function key(propertyAccess: () => any): string;
declare const getPropertyKey: <T>(prop: PropertyRef<T>) => string;
declare const humanizeIdentifier: (str: string) => string;
declare function equalsIgnoreCase(a: string, b: string): boolean;
declare function fuzzyEquals(x: any, y: any): boolean;
declare const parseFloatDeNaN: (s: string) => number | undefined;
declare function isNullOrEmpty(s?: string | null): s is "" | null | undefined;
declare const kebab: (s: string) => string;

declare function isValidated(c: Component): c is Component & IValidated;
declare abstract class Validator {
    private readonly _form;
    private _errors?;
    private _runToken;
    private _asyncInProgress;
    private _syncErrors;
    private _asyncErrors;
    constructor(form: Component & IValidated);
    protected abstract validateSync(form: Component & IValidated): ValidatorError[];
    private validateSyncWrapper;
    validate(): Promise<boolean>;
    private fireUpdate;
    revalidate(evt: UpdateEvent): Promise<boolean>;
    private validateAsync;
    private mergeErrors;
    private children;
    getError<T>(prop: PropertyRef<T>): ValidatorError | undefined;
    private get isValid();
    private get isSettled();
    private get wasValidated();
    get state(): ValidationState;
    clearErrors(): void;
}

type ValidationState = "unvalidated" | "validating" | "invalid" | "valid";
interface IValidated {
    validator: Validator;
    customValidatorErrors?(): Promise<ValidatorError[]>;
}
interface ValidatorError {
    property: string;
    messages: string[];
    value?: any;
}
interface ValidatorEvent extends UpdateEvent {
    cause: "validator";
    async: boolean;
    validationState: ValidationState;
}

declare class ComponentContext {
    private _app?;
    private _parent?;
    private _state;
    private readonly _component;
    private readonly _componentId;
    private static _globalComponentId;
    constructor(component: Component);
    /** Returns the component this context manages. */
    get component(): Component;
    /** Return either "detached", "updating", or "rendered". */
    get state(): ComponentState;
    /** Returns a unique auto-incrementing identifier for the component. Used in form binding. */
    get componentId(): number;
    /** Returns the parent component, unless this is the root component, which has no parent.. */
    get parent(): Component | undefined;
    /** Returns the app that this component is attached to. */
    get app(): IApp | undefined;
    /** @internal */
    attach(app: IApp): void;
    private attachInternal;
    private attachTraverse;
    /**
     * Ensures child components are attached, propagates updates to ancestors,
     * then triggers an app render.
     */
    update(event?: Partial<UpdateEvent>): void;
    /** Performs a pre-order traversal (parent first) of the component tree. */
    traversePreOrder(action: (component: Component) => void, visited?: Set<Component>): void;
    /** Performs a post-order traversal (children first) of the component tree. */
    traversePostOrder(action: (component: Component) => void, visited?: Set<Component>): void;
    /** @internal */
    markRendered(): void;
    /** The root component of the component tree. */
    get root(): Component | undefined;
    /** An array of components from the root to this component. */
    get rootToHere(): Component[];
    /** Returns direct child components, flattening out arrays of components. */
    get children(): Component[];
    /**
     * The component's properties filtered to only be public, read/write, not prefixed with `_`,
     * not functions, which domeleon will consider part of the updatable component tree.
    */
    get keys(): string[];
    private throwOnDupe;
    /** Returns keys that are also components. */
    childrenKeys(): string[];
    /** Returns a child component by key, if the child is a field of this context's component. */
    childByKey(key: string): Component | undefined;
    /** Returns the field name of the component, if the component is a field of this context's component. */
    childKey(component: Component): string | undefined;
    /**
     * Returns a property name qualified with the application wide unique component id,
     * as used by `formField` to give an id to input elements.
     */
    qualify(prop: PropertyRef<any>): string;
}

declare class ComponentSerializer<T extends Component> {
    readonly component: T;
    constructor(component: T);
    /**
     * The component's serialization keys, which are `ctx.keys` (public, read/write, not prefixed with `_`,
     * not functions), further filtered by `serializerMap[key] === null`.
     */
    get keys(): string[];
    /**
     * Serialize the component into a JSON object, recursing into child components.
     *
     * Only `serializer.keys` will be serialized.
     *
     * Usage:
     *
     * ```ts
     * class MyComponent extends Component {
     *   a = "hello"
     *   b = [1,2]
     *
     *   testSerialize() {
     *     const json = this.serializer.serialize() // { a: "hello", b: [1,2] }
     *   }
     * }
     * ```
     */
    serialize(): Record<string, any>;
    /**
     * Deserialize a JSON object into the component, recursing into child components.
     *
     * Usage:
     *
     * ```ts
     * class MyComponent extends Component {
     *   a: string
     *   b: number[]
     *
     *   test() {
     *     this.serializer.deserialize ({ a: "hello", b: [1,2] })
     *   }
     * }
     * ```
     */
    deserialize(data: any): void;
    private deserializeInternal;
    private fromJSON;
}
interface SerializerEvent extends UpdateEvent {
    cause: "serializer";
}

type Ctor<T> = abstract new (...args: any[]) => T;
type SerializerCtor<T> = T extends string ? StringConstructor : T extends number ? NumberConstructor : T extends boolean ? BooleanConstructor : T extends Date ? DateConstructor : T extends object ? Ctor<T> : never;
type SerializerMap<T> = {
    [K in keyof T]?: T[K] extends (infer E)[] ? [SerializerCtor<E>] | null : SerializerCtor<NonNullable<T[K]>> | null;
};

/**
 * Base class for all Domeleon components.
 * Components are model-first, meaning their data structure and logic are fully initialized
 * before any view rendering occurs, and exist independently of the DOM.
 */
declare abstract class Component {
    /**
     * The ComponentContext manages the component's status in the component tree.
     */
    ctx: ComponentContext;
    /**
     * The ComponentSerializer serializes and deserializes the component's state to and from JSON objects.
     */
    serializer: ComponentSerializer<this>;
    constructor();
    /**
     * Implement to return your component's state as a VElement, for example:
     * ```
     * class Component {
     *   count = 1
     *   view () { return div(this.count) }
     * }
     * ```
     * @returns A VElement (virtual DOM element) representing the component's view.
     */
    view(...args: any[]): VElement;
    /**
     * Call to trigger an update cycle for the component and the app, after you've modified
     * your component's state.
     * @param event Optional data associated the update.
     */
    update(event?: Partial<UpdateEvent>): void;
    /**
     * Called when the component is attached to its parent and the app - this is a model event;
     * use a VElement's onMounted hook for attachment to the DOM.
     */
    onAttached(): void;
    /** Called then the component or any of its descendants have been updated. */
    onUpdated(event: UpdateEvent): void;
    /** Called after the app's view has been rendered. */
    onRendered(): void;
    /**
     * Use to return custom, asynchronous validation errors, to be used in concert with a
     * component that has a `validator` property that derives from `Validator`,
     * such as `ZodValidator`.
     */
    onValidate(): Promise<ValidatorError[]>;
    /**
     * Called before navigation occurs, for components that implement IRouted as follows:
     * ```
     * class Component {
     *   router:Router = new Router(this)
     *   routeSegment = "my-route"
     * }
     * ```
     *
     * `onNavigate` executes when `routeSegment` matches the incoming path. Use it to:
     *
     * 1. Initialize any child components *before* they are navigated to, each with a
     * matching `routeSegment`.
     * 2. Optionally return `false`, to block the navigation occuring.
     */
    onNavigate(relativeRoute: Route, action?: Action): Promise<boolean | void>;
    /**
     * Called *after* a component has been navigated to.
     * Used in concert with a component that has a router property of type Router.
    */
    onNavigated(): void;
    /**
     * Called after a component and its children have been deserialized, children first, recursively.
     * `onDeserialized` has early access to `ctx.parent` and `ctx.app` (when available) enabling contextual
     * validation, even if `onAttached` has yet to be called. `onUpdated` will always be called afterwards.
     */
    onDeserialized(): void;
    /**
     * Implement to map properties to classes, so that the deserializer can turn plain objects into classes.
     * Useful for properties that can be undefined or empty arrays, hence lack a runtime type. Use `null` to omit
     * properties during serialization/deserialization.
     * E.g.
     * ```
     * class MyComponent extends Component {
     *   items? Item[]          // runtime type can be undefined or empty array
     *   created?: Date         // runtime type can be undefined
     *   picker = new Picker()  // runtime type is known but we don't want to serialize it
     *
     *   serializerMap = SerializerMap<MyComponent> = {
     *     items: [Item]
     *     created: Date,
     *     picker: null // an alternative to prefixing property with `_` or `#`; useful for sub-components that you don't want to serialize
     *   }
     * }
     * ```
     */
    serializerMap: SerializerMap<any>;
}

interface PersisterHost {
    id: string;
    root: Component;
    refresh(): void;
    autoPersist: boolean;
}
declare class AppSerializer {
    private readonly _host;
    private readonly _localStorage;
    constructor(host: PersisterHost);
    private serialize;
    private deserialize;
    load(): void;
    save(): void;
    clear(): void;
    private createStorage;
}

interface CssAdapter {
    generate(classes: Set<string>, stickyClasses: Set<string>): Promise<void>;
}
declare function stickyClass(cls: string): string;

interface RouteServiceOptions {
    basePath?: string;
}
declare class RouteService implements IRouteService {
    private _basePath;
    private _history?;
    private _root;
    currentRoute: Route;
    get basePath(): Route;
    get root(): Router;
    constructor(options?: RouteServiceOptions);
    syncHistory(action: Action): void;
    init(app: IApp): void;
    navigateAbsolute(absolute: Route, action: Action): Promise<boolean>;
}

interface AppPlugin<T = unknown> {
    create?(app: IApp): T;
    onUpdated?(instance: T, event: UpdateEvent): void;
    onRendered?(instance: T): void;
}

/**
 * Configures your Domeleon app.
 */
interface AppSetupProps {
    /** The root component of your app. */
    root: Component;
    /** The `id` of the DOM element to mount the root component on. */
    id: string;
    /**
     * Renderer to use for the app.
     * Defaults to Domeleon's `PreactRenderer`.
     * You may specify `ReactRenderer` or `VueRenderer` imported from `domeleon/react` or `domeleon/vue`.
     */
    renderer?: Renderer<any>;
    /**
     * CSS adapter to use for the app, used for pluggable CSS-in-JS or utility class workflows.
     * For example, specify `themeMgr.unoCssAdapter`.
     */
    cssAdapter?: CssAdapter;
    /**
     * Custom route service for the app; useful for setting a base path, e.g. `new RouteService({ basePath: "admin" })`.
     */
    routeService?: RouteService;
    /**
     * Whether to automatically persist the app's state to local storage (useful for development when hot reloading).
     */
    autoPersist?: boolean;
    /**
     * Plugins to use for the app, e.g. `[inspector]` imported from `domeleon/inspector`.
     */
    plugins?: AppPlugin<any>[];
}
/** Manages the lifecycle of your Domeleon app. */
declare class App implements IApp {
    private _lock;
    private _pending;
    readonly serializer: AppSerializer;
    readonly renderer: Renderer<any>;
    readonly routeService: RouteService;
    private readonly _root;
    private readonly _props;
    private readonly _rootElement;
    private readonly _id;
    private readonly _saveDebounce;
    private readonly _plugins;
    /**
     * Configures and mounts your Domeleon `root` component on a DOM element with the given `id`.
     */
    constructor(props: AppSetupProps);
    get containerId(): string;
    get root(): Component;
    private render;
    update(event: UpdateEvent): void;
    private save;
}

/** Shape of the `window.domeleon` global handle, for devtools and page scripts. */
interface DomeleonGlobal {
    /** Live apps keyed by mount element `id`; re-mounting on the same id replaces the entry. */
    apps: Map<string, App>;
}

interface InputEvent$1 extends UpdateEvent {
    cause: "input";
}
declare const getPropertyValue: <T>(obj: Component, prop: PropertyRef<T>) => T;
declare const setPropertyValue: <T>(obj: Component, prop: PropertyRef<T>, value: T) => void;
declare const getLabel: <T>(target: Component & Partial<ILabeled>, prop: PropertyRef<T>) => string;
declare const getDescription: <T>(target: Component & Partial<ILabeled>, prop: PropertyRef<T>) => string | undefined;
interface DataBindProps<T> {
    target: Component;
    prop: PropertyRef<T>;
    id?: string;
}
interface ILabeled {
    getLabels(): ILabelMap;
}
interface ILabelMap {
    [property: string]: string | ILabel;
}
interface ILabel {
    /** The label to display for this field (localizable). */
    label?: string;
    /** Optional description/help text for this field (localizable). */
    description?: string;
}

declare function bindValue<PropType extends string | undefined>(target: Component, prop: PropertyRef<PropType>): {
    value: string;
    onInput: (e: Event) => void;
};
declare function bindRangeValue<T extends number | undefined>(target: Component, prop: PropertyRef<T>): {
    value: T;
    onInput: (ev: Event) => void;
};
interface BindRadioChoices<T> {
    mode: 'radio';
    elementValue: T;
}
interface BindSelectChoices<T> {
    mode: 'select';
    guideValue?: T;
}
type BindChoices<T> = BindRadioChoices<T> | BindSelectChoices<T>;
declare function bindChoice<T extends string | number | boolean | undefined>(target: Component, prop: PropertyRef<T>, options: BindChoices<T>): {
    value: string;
    checked: boolean;
    onChange: (e: Event) => void;
};
declare function bindChecked(target: Component, prop: PropertyRef<boolean>): {
    checked: boolean;
    onChange: (e: Event) => void;
};
interface Flag {
    key: string;
    value: boolean;
    label?: string;
}

/** Props for the `inputText` function. */
type InputTextProps<T extends string | undefined> = DataBindProps<T> & {
    /** HTML attributes to apply to the input element. */
    attrs?: VAttributes;
};
/**
 * Creates a standard text input element bound to a component property.
 * @param props Configuration for the text input.
 * @returns A VElement representing the text input.
 */
declare function inputText<T extends string | undefined>(props: InputTextProps<T>): VElement;
/** Props for the `inputTextArea` function. */
type InputTextAreaProps<T extends string | undefined> = DataBindProps<T> & {
    /** HTML attributes to apply to the textarea element. */
    attrs?: VAttributes;
};
/**
 * Creates a textarea element bound to a component property.
 * @param props Configuration for the textarea.
 * @returns A VElement representing the textarea.
 */
declare function inputTextArea<T extends string | undefined>(props: InputTextAreaProps<T>): VElement;
/** Props for the `inputRange` function. */
type InputRangeProps<T extends number> = DataBindProps<T> & {
    /** HTML attributes to apply to the range input element. */
    attrs?: VAttributes;
};
/**
 * Creates a range input element bound to a component property.
 * @param props Configuration for the range input.
 * @returns A VElement representing the range input.
 */
declare function inputRange<T extends number>(props: InputRangeProps<T>): VElement;
/** Defines the structure for an option in a select list. */
type SelectOption<T> = {
    /** The actual value of the option. */
    value: T;
    /** The visible text label for the option. */
    label: string | number;
    /** HTML attributes to apply to this specific option element. */
    attrs?: VAttributes;
};
/** Props for the `inputSelect` function, creating a single-select dropdown. */
type InputSelectProps<T extends string | number | undefined> = DataBindProps<T> & {
    /** HTML attributes to apply to the select element itself. */
    attrs?: VAttributes;
    /** Array of `SelectOption` objects to populate the dropdown. */
    options?: SelectOption<T>[];
    /**
     * An optional placeholder or empty option (e.g., "Select an item").
     * If provided, it's typically the first item in the list.
     */
    emptyOption?: Partial<SelectOption<T>>;
    /** CSS class to apply to the currently selected option element. */
    selectedClass?: string;
};
/**
 * Creates a single-select dropdown element bound to a component property.
 * @param props Configuration for the select input.
 * @returns A VElement representing the select input.
 */
declare function inputSelect<T extends string | number | undefined>(props: InputSelectProps<T>): VElement;
/** Defines the structure for an option within a radio button group. */
interface RadioOption<T> {
    /** The actual value associated with this radio option. */
    value: T;
    /** The visible label for this radio option. Can be simple text or complex HTML elements. */
    label: HValues;
    /** HTML attributes to apply to the radio input element itself. */
    attrs?: VAttributes;
    /** HTML attributes to apply to the label element associated with this radio input. */
    labelAttrs?: VAttributes; /** HTML attributes for the div that wraps this individual radio input and its label. */
}
/** Props for the `inputRadioGroup` function. */
type InputRadioGroupProps<T> = DataBindProps<T> & {
    /** HTML attributes for the main div that wraps all radio options. */
    attrs?: VAttributes;
    /** Array of `RadioOption` objects to create the radio buttons. */
    options?: RadioOption<T>[];
    /** CSS class to apply to the currently selected radio option. */
    selectedClass?: string;
};
/**
 * Creates a group of radio buttons bound to a component property.
 * Each radio option is wrapped in its own div, and the entire group is also wrapped in a div.
 * @param props Configuration for the radio button group.
 * @returns A VElement representing the radio button group.
 */
declare function inputRadioGroup<T extends string | number | undefined>(props: InputRadioGroupProps<T>): VElement;
/** Props for the `inputCheckbox` function. */
type InputCheckboxProps<T extends boolean> = DataBindProps<T> & {
    /** HTML attributes to apply to the checkbox input element. */
    attrs?: VAttributes;
};
/**
 * Creates a single checkbox input element bound to a boolean component property.
 * @param props Configuration for the checkbox input.
 * @returns A VElement representing the checkbox input.
 */
declare function inputCheckbox<T extends boolean>(props: InputCheckboxProps<T>): VElement;
/** Defines the structure for an option within a checkbox group. */
interface CheckboxOption {
    /**
     * Unique key for this checkbox, corresponding to `Flag.key`.
     * Used for binding its checked state within the `Flag[]` array.
     */
    key: string;
    /** The visible label for this checkbox option. */
    label: HValues;
    /** HTML attributes for the checkbox input element itself. */
    attrs?: VAttributes;
    /** HTML attributes for the label associated with this checkbox. */
    labelAttrs?: VAttributes;
}
/**
 * Props for the `inputCheckboxGroup` function.
 * This component binds to an array of `Flag` objects.
 */
interface InputCheckboxGroupProps extends DataBindProps<Flag[]> {
    /** HTML attributes for the main div that wraps all checkbox options. */
    attrs?: VAttributes;
    /** Array of `CheckboxOption` objects to create the checkboxes. */
    options: CheckboxOption[];
}
/**
 * Creates a group of checkboxes, where each checkbox corresponds to a `Flag` in an array on the component.
 * Each checkbox option is wrapped in its own div, and the entire group is also wrapped in a div.
 * @param props Configuration for the checkbox group.
 * @returns A VElement representing the checkbox group.
 */
declare function inputCheckboxGroup(props: InputCheckboxGroupProps): VElement;

type InputFn<T, P extends DataBindProps<T> = DataBindProps<T>> = (props: P) => VElement;
type InputPropsFrom<F> = F extends InputFn<any, infer P> ? P : never;
type InputType<F> = F extends InputFn<infer T, any> ? T : never;
type InputProps<F> = Omit<InputPropsFrom<F>, keyof DataBindProps<InputType<F>>>;
interface FormFieldCoreProps<F> {
    /** The component instance to which the input field will be bound. */
    target: Component;
    /**
     * A type-safe reference to the property on the `target` component that this field binds to.
     * Example: `() => this.username`
     */
    prop: PropertyRef<InputType<F>>;
    /**
     * Props specific to the chosen `inputFn`, excluding the standard `DataBindProps`
     * (`target`, `prop`, `id`) which are handled by `formField` itself.
     * Example: For `inputSelect`, it might include `options`.
     */
    inputProps?: InputProps<F>;
}
interface FormFieldCoreInputProps<F> extends FormFieldCoreProps<F> {
    /**
     * The input* function responsible for rendering the input control (e.g., `inputText`, `inputSelect`).
     */
    inputFn: F;
}
interface FormFieldExtraProps {
    /**
     * The text or HTML content for the field's label.
     * If not provided, a friendly name is generated from the `prop` name.
     */
    label?: HValues;
    /** Optional persistent supporting text displayed below the input. */
    description?: HValues;
    /** Whether to show the label. Defaults to `true`. */
    showLabel?: boolean;
    /**
     * Whether to display validation messages. Defaults to `true`.
     * Works in conjunction with Domeleon's integrated validation system.
     */
    showValidation?: boolean;
    /** HTML attributes for the main div that wraps the entire form field structure. */
    fieldAttrs?: VAttributes;
    /** HTML attributes for the label element. */
    labelAttrs?: VAttributes;
    /** HTML attributes for the validation message container, e.g. to make validation errors red. */
    validationAttrs?: VAttributes;
    /** HTML attributes for the description div. */
    descriptionAttrs?: VAttributes;
    /** HTML attributes for the main control wrapper div that contains the input element and any prefix/suffix elements. */
    controlAttrs?: VAttributes;
    /** HTML attributes for the div containing both the label and control, but not the description. */
    coreAttrs?: VAttributes;
    /** HTML attributes for the extra div formField will wrap around a select element; commonly used by css frameworks. */
    selectWrapperAttrs?: VAttributes;
    /** Optional VNodes inserted before the input element within the control wrapper. */
    inputPrefix?: VElement[];
    /** Optional VNodes inserted after the input element within the control wrapper. */
    inputSuffix?: VElement[];
}
/** Same as `FormFieldIputProps`, minus a specific `inputFn`. */
interface FormFieldProps<F> extends FormFieldCoreProps<F>, FormFieldExtraProps {
}
/** Props to pass to `formField`. */
interface FormFieldInputProps<F> extends FormFieldCoreInputProps<F>, FormFieldExtraProps {
}
/**
 * Creates a complete form field, typically consisting of a label, an input control,
 * an optional description, and an optional validation message area.
 * This high-level utility wraps an `InputFn` (like `inputText`, `inputSelect`, etc.)
 * to provide a consistent and accessible form field structure.
 *
 * Key benefits include:
 * - **Automatic label generation**: If a `label` prop is not provided, a user-friendly label
 *   is generated from the bound property's name or getLabels() on the component if available.
 *   Same for description.
 * - **Unique ID Generation**: Automatically generates and associates unique IDs for the input
 *   element, its label (`for` attribute), and any description or validation messages
 *   (`aria-describedby`), ensuring correct HTML semantics and accessibility links.
 * - **Integrated Validation Display**: If the `target` component uses Domeleon's validation
 *   system (`IValidated` and `Validator`), `formField` automatically displays validation
 *   messages and applies `data-validated` and `data-validation-state` attributes that you
 *   can style via the `validationAttrs` prop.
 * - **Automatic ARIA Attributes**: Relevant ARIA attributes (e.g., `aria-invalid`, `aria-describedby`)
 *   are automatically applied to the input element based on its validation state,
 *   enhancing accessibility with no manual effort.
 * - **Consistent HTML Structure**: Generates a predictable structure for each input* function,
 *   for inputs, selects, radios etc., where every node can be styled individually,
 *   typically with *attrs {class: ...}. Outputs a structure compatible with all major css frameworks.
 */
declare function formField<F extends InputFn<any, any>>(
/** Configuration options for the form field. */
props: FormFieldInputProps<F>): VElement;

declare const normalizeUtilityString: (value: string) => string;

declare function a(...values: HValues[]): VElement;
declare function abbr(...values: HValues[]): VElement;
declare function address(...values: HValues[]): VElement;
declare function area(...values: HValues[]): VElement;
declare function article(...values: HValues[]): VElement;
declare function aside(...values: HValues[]): VElement;
declare function audio(...values: HValues[]): VElement;
declare function b(...values: HValues[]): VElement;
declare function base(...values: HValues[]): VElement;
declare function bdi(...values: HValues[]): VElement;
declare function bdo(...values: HValues[]): VElement;
declare function blockquote(...values: HValues[]): VElement;
declare function body(...values: HValues[]): VElement;
declare function br(...values: HValues[]): VElement;
declare function button(...values: HValues[]): VElement;
declare function canvas(...values: HValues[]): VElement;
declare function caption(...values: HValues[]): VElement;
declare function cite(...values: HValues[]): VElement;
declare function code(...values: HValues[]): VElement;
declare function col(...values: HValues[]): VElement;
declare function colgroup(...values: HValues[]): VElement;
declare function data(...values: HValues[]): VElement;
declare function datalist(...values: HValues[]): VElement;
declare function dd(...values: HValues[]): VElement;
declare function del(...values: HValues[]): VElement;
declare function details(...values: HValues[]): VElement;
declare function dfn(...values: HValues[]): VElement;
declare function dialog(...values: HValues[]): VElement;
declare function div(...values: HValues[]): VElement;
declare function dl(...values: HValues[]): VElement;
declare function dt(...values: HValues[]): VElement;
declare function em(...values: HValues[]): VElement;
declare function embed(...values: HValues[]): VElement;
declare function fieldset(...values: HValues[]): VElement;
declare function figcaption(...values: HValues[]): VElement;
declare function figure(...values: HValues[]): VElement;
declare function footer(...values: HValues[]): VElement;
declare function form(...values: HValues[]): VElement;
declare function h1(...values: HValues[]): VElement;
declare function h2(...values: HValues[]): VElement;
declare function h3(...values: HValues[]): VElement;
declare function h4(...values: HValues[]): VElement;
declare function h5(...values: HValues[]): VElement;
declare function h6(...values: HValues[]): VElement;
declare function head(...values: HValues[]): VElement;
declare function header(...values: HValues[]): VElement;
declare function hgroup(...values: HValues[]): VElement;
declare function hr(...values: HValues[]): VElement;
declare function html(...values: HValues[]): VElement;
declare function i(...values: HValues[]): VElement;
declare function iframe(...values: HValues[]): VElement;
declare function img(...values: HValues[]): VElement;
declare function input(...values: HValues[]): VElement;
declare function ins(...values: HValues[]): VElement;
declare function kbd(...values: HValues[]): VElement;
declare function label(...values: HValues[]): VElement;
declare function legend(...values: HValues[]): VElement;
declare function li(...values: HValues[]): VElement;
declare function link(...values: HValues[]): VElement;
declare function main(...values: HValues[]): VElement;
declare function map(...values: HValues[]): VElement;
declare function mark(...values: HValues[]): VElement;
declare function menu(...values: HValues[]): VElement;
declare function meta(...values: HValues[]): VElement;
declare function meter(...values: HValues[]): VElement;
declare function nav(...values: HValues[]): VElement;
declare function noscript(...values: HValues[]): VElement;
declare function object(...values: HValues[]): VElement;
declare function ol(...values: HValues[]): VElement;
declare function optgroup(...values: HValues[]): VElement;
declare function option(...values: HValues[]): VElement;
declare function output(...values: HValues[]): VElement;
declare function p(...values: HValues[]): VElement;
declare function picture(...values: HValues[]): VElement;
declare function pre(...values: HValues[]): VElement;
declare function progress(...values: HValues[]): VElement;
declare function q(...values: HValues[]): VElement;
declare function rp(...values: HValues[]): VElement;
declare function rt(...values: HValues[]): VElement;
declare function ruby(...values: HValues[]): VElement;
declare function s(...values: HValues[]): VElement;
declare function samp(...values: HValues[]): VElement;
declare function script(...values: HValues[]): VElement;
declare function search(...values: HValues[]): VElement;
declare function section(...values: HValues[]): VElement;
declare function select(...values: HValues[]): VElement;
declare function slot(...values: HValues[]): VElement;
declare function small(...values: HValues[]): VElement;
declare function source(...values: HValues[]): VElement;
declare function span(...values: HValues[]): VElement;
declare function strong(...values: HValues[]): VElement;
declare function style(...values: HValues[]): VElement;
declare function sub(...values: HValues[]): VElement;
declare function summary(...values: HValues[]): VElement;
declare function sup(...values: HValues[]): VElement;
declare function table(...values: HValues[]): VElement;
declare function tbody(...values: HValues[]): VElement;
declare function td(...values: HValues[]): VElement;
declare function template(...values: HValues[]): VElement;
declare function textarea(...values: HValues[]): VElement;
declare function tfoot(...values: HValues[]): VElement;
declare function th(...values: HValues[]): VElement;
declare function thead(...values: HValues[]): VElement;
declare function time(...values: HValues[]): VElement;
declare function title(...values: HValues[]): VElement;
declare function tr(...values: HValues[]): VElement;
declare function track(...values: HValues[]): VElement;
declare function u(...values: HValues[]): VElement;
declare function ul(...values: HValues[]): VElement;
declare function video(...values: HValues[]): VElement;
declare function wbr(...values: HValues[]): VElement;

declare function animate(...values: HValues[]): VElement;
declare function animateMotion(...values: HValues[]): VElement;
declare function animateTransform(...values: HValues[]): VElement;
declare function circle(...values: HValues[]): VElement;
declare function clipPath(...values: HValues[]): VElement;
declare function defs(...values: HValues[]): VElement;
declare function ellipse(...values: HValues[]): VElement;
declare function feBlend(...values: HValues[]): VElement;
declare function feColorMatrix(...values: HValues[]): VElement;
declare function feComponentTransfer(...values: HValues[]): VElement;
declare function feComposite(...values: HValues[]): VElement;
declare function feConvolveMatrix(...values: HValues[]): VElement;
declare function feDiffuseLighting(...values: HValues[]): VElement;
declare function feDisplacementMap(...values: HValues[]): VElement;
declare function feDistantLight(...values: HValues[]): VElement;
declare function feDropShadow(...values: HValues[]): VElement;
declare function feFlood(...values: HValues[]): VElement;
declare function feFuncA(...values: HValues[]): VElement;
declare function feFuncB(...values: HValues[]): VElement;
declare function feFuncG(...values: HValues[]): VElement;
declare function feFuncR(...values: HValues[]): VElement;
declare function feGaussianBlur(...values: HValues[]): VElement;
declare function feImage(...values: HValues[]): VElement;
declare function feMerge(...values: HValues[]): VElement;
declare function feMergeNode(...values: HValues[]): VElement;
declare function feMorphology(...values: HValues[]): VElement;
declare function feOffset(...values: HValues[]): VElement;
declare function fePointLight(...values: HValues[]): VElement;
declare function feSpecularLighting(...values: HValues[]): VElement;
declare function feSpotLight(...values: HValues[]): VElement;
declare function feTile(...values: HValues[]): VElement;
declare function feTurbulence(...values: HValues[]): VElement;
declare function filter(...values: HValues[]): VElement;
declare function foreignObject(...values: HValues[]): VElement;
declare function g(...values: HValues[]): VElement;
declare function image(...values: HValues[]): VElement;
declare function line(...values: HValues[]): VElement;
declare function linearGradient(...values: HValues[]): VElement;
declare function marker(...values: HValues[]): VElement;
declare function mask(...values: HValues[]): VElement;
declare function metadata(...values: HValues[]): VElement;
declare function mpath(...values: HValues[]): VElement;
declare function path(...values: HValues[]): VElement;
declare function pattern(...values: HValues[]): VElement;
declare function polygon(...values: HValues[]): VElement;
declare function polyline(...values: HValues[]): VElement;
declare function radialGradient(...values: HValues[]): VElement;
declare function rect(...values: HValues[]): VElement;
declare function set(...values: HValues[]): VElement;
declare function stop(...values: HValues[]): VElement;
declare function svg(...values: HValues[]): VElement;
declare function symbol(...values: HValues[]): VElement;
declare function text(...values: HValues[]): VElement;
declare function textPath(...values: HValues[]): VElement;
declare function tspan(...values: HValues[]): VElement;
declare function use(...values: HValues[]): VElement;
declare function view(...values: HValues[]): VElement;

export { App, AppSerializer, Component, ComponentContext, ComponentSerializer, Renderer, Route, RouteService, Router, Validator, a, abbr, address, animate, animateMotion, animateTransform, area, article, aside, audio, b, base, bdi, bdo, bindChecked, bindChoice, bindRangeValue, bindValue, blockquote, body, br, button, canvas, caption, circle, cite, clipPath, code, col, colgroup, componentSkipProps, data, datalist, dd, defs, del, details, dfn, dialog, div, dl, dt, ellipse, em, embed, equalsIgnoreCase, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, fieldset, figcaption, figure, filter, footer, foreignObject, form, formField, fuzzyEquals, g, getDescription, getLabel, getPropertyKey, getPropertyValue, h, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, humanizeIdentifier, i, iframe, image, img, input, inputCheckbox, inputCheckboxGroup, inputRadioGroup, inputRange, inputSelect, inputText, inputTextArea, ins, isNullOrEmpty, isRouted, isVElement, isValidated, kbd, kebab, key, label, legend, li, line, linearGradient, link, main, map, mark, marker, mask, menu, mergeAttrs, meta, metadata, meter, mpath, nav, normalizeUtilityString, noscript, object, ol, optgroup, option, output, p, parseFloatDeNaN, path, pattern, picture, polygon, polyline, pre, progress, q, radialGradient, rect, rp, rt, ruby, s, samp, script, search, section, select, set, setPropertyValue, slot, small, source, span, stickyClass, stop, strong, style, sub, summary, sup, svg, symbol, table, tbody, td, template, text, textPath, textarea, tfoot, th, thead, time, title, tr, track, tspan, u, ul, use, video, view, wbr };
export type { AppPlugin, AppSetupProps, BindChoices, CheckboxOption, ComponentState, CssAdapter, DataBindProps, DomeleonGlobal, Flag, FormFieldCoreInputProps, FormFieldCoreProps, FormFieldExtraProps, FormFieldInputProps, FormFieldProps, FrameworkAttrs, HValue, HValues, IApp, ILabel, ILabelMap, ILabeled, IRouted, IValidated, InputCheckboxGroupProps, InputCheckboxProps, InputEvent$1 as InputEvent, InputFn, InputProps, InputRadioGroupProps, InputRangeProps, InputSelectProps, InputTextAreaProps, InputTextProps, InputType, KnownHtmlAttributes, KnownSvgAttributes, OnUnmounted, PropertyRef, RadioOption, RouterEvent, SelectOption, SerializerEvent, SerializerMap, UpdateCause, UpdateEvent, VAttributes, VElement, VElementTransformer, VNode, ValidatorError, ValidatorEvent };