Dialog builder

<script>
    import { DialogBuilder } from 'svxui';

    // Initialize dialog
    const dialog = new DialogBuilder({
        onClose: (reason) => console.log('onClose', reason),
        closeOnBackdropClick: true,
        closeOnEscape: true,
        focusTrap: true
    });
</script>

<button onclick={() => dialog.open()}>Open dialog</button>

{#if dialog.isOpen}
    <div class="backdrop" {...dialog.backdropAttrs}></div>
    <dialog open {...dialog.contentAttrs}>
        <p>Dialog content</p>
        <button onclick={() => dialog.close()}>Close dialog</button>
    </dialog>
{/if}

<style>
    .backdrop {
        z-index: 1;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.35);
    }

    dialog {
        z-index: 1;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
    }
</style>

export declare class DialogBuilder {
    /**
     * @param options - Dialog configuration options.
     *
     * **Lifecycle note:** `DialogBuilder` uses `$effect.root()` to keep its keyboard and stack
     * management effects alive outside any component lifecycle. Always call `destroy()` when you
     * are done with the builder to stop those effects and avoid memory leaks.
     */
    constructor(options: DialogBuilderOptions);
    get isOpen(): boolean;
    set isOpen(newIsOpen: boolean | undefined);
    get active(): boolean;
    get index(): number;

    /**
     * Dialog backdrop attributes
     */
    get backdropAttrs(): DialogBackdropAttributes;

    /**
     * Dialog content attributes
     */
    get contentAttrs(): DialogContentAttributes;

    /**
     * Open the dialog
     */
    open: () => void;

    /**
     * Close the dialog
     * @param reason optional close reason
     */
    close: (reason?: "escape" | "backdrop") => void;

    /**
     * Toggle the dialog open state
     */
    toggle: () => void;

    /**
     * Destoy root effect
     */
    destroy: () => void;
}

/**
 * Input-number state options
 */
export type DialogBuilderOptions = {
    isOpen?: boolean;
    /**
     * Close dialog on backdrop click
     */
    closeOnBackdropClick?: boolean;
    /**
     * Close dialog on escape key
     */
    closeOnEscape?: boolean;
    /**
     * Enable focustrap
     */
    focusTrap?: boolean;
    /**
     * Callback called on isOpen change
     * @param newValue
     * @returns
     */
    onOpen?: () => void;
    /**
     * Callback called on isOpen change
     * @param newValue
     * @returns
     */
    onClose?: (reason?: 'escape' | 'backdrop') => void;
};

/**
 * Dialog backdrop attributes
 */
export type DialogBackdropAttributes = {
    readonly id: string;
    readonly role: 'presentation';
    readonly inert?: true | undefined;
    readonly 'data-state': 'open' | 'closed';
    readonly onclick?: (e: MouseEvent) => void;
};

/**
 * Dialog content attributes
 */
export type DialogContentAttributes = {
    readonly id: string;
    readonly tabindex: number;
    readonly role: 'dialog';
    readonly inert?: true | undefined;
    readonly 'aria-modal': true;
    readonly 'data-state': 'open' | 'closed';
};