@useviber/plugin/dist/types/advanced-elements.d.ts

Universal Viber Plugin - Works with any framework (React, Vue, Angular, Svelte, Vanilla)

export interface Element {
    tagName: string;
    className?: string;
    id?: string;
    attributes?: Record<string, string>;
    innerText?: string;
    path: string;
    boundingBox: DOMRect;
    isSelected: boolean;
    parent?: Element;
    children?: Element[];
    framework?: string;
    componentName?: string;
    hasState?: boolean;
    eventHandlers?: string[];
    reactProps?: Record<string, any>;
    vueProps?: Record<string, any>;
    angularProps?: Record<string, any>;
    svelteProps?: Record<string, any>;
}
export interface ElementSelection {
    element: Element;
    context: DetailedElementContext;
    timestamp: Date;
    method: SelectionMethod;
    framework: string;
}
export type SelectionMethod = 'click' | 'hover' | 'manual' | 'auto';
export interface ElementPath {
    path: string;
    selector: string;
    xpath?: string;
    cssPath?: string;
}
export interface DetailedElementContext {
    tagName: string;
    className?: string;
    id?: string;
    attributes?: Record<string, string>;
    innerText?: string;
    parentPath?: string;
    children?: DetailedElementContext[];
    computedStyles?: Record<string, string>;
    boundingBox?: DOMRect;
    framework?: string;
    componentName?: string;
    hasState?: boolean;
    eventHandlers?: string[];
    deepInfo?: any;
}
export interface ElementAnalysisResult {
    element: Element;
    framework: string;
    analysis: {
        basic: DetailedElementContext;
        deep: any;
        computedStyles: Record<string, string>;
        accessibility: AccessibilityInfo;
        performance: PerformanceInfo;
        suggestions: Suggestion[];
    };
    timestamp: Date;
}
export interface AccessibilityInfo {
    hasAriaLabel: boolean;
    hasAriaDescribedBy: boolean;
    hasAriaLabelledBy: boolean;
    hasRole: boolean;
    role?: string;
    isFocusable: boolean;
    tabIndex?: number;
    hasKeyboardSupport: boolean;
    issues: string[];
    score: number;
}
export interface PerformanceInfo {
    hasEventListeners: boolean;
    eventListenerCount: number;
    hasInlineStyles: boolean;
    hasInlineScripts: boolean;
    domDepth: number;
    childCount: number;
    hasShadowRoot: boolean;
    hasCustomElements: boolean;
    issues: string[];
    score: number;
}
export interface Suggestion {
    type: 'accessibility' | 'performance' | 'best-practice' | 'framework-specific';
    priority: 'low' | 'medium' | 'high' | 'critical';
    title: string;
    description: string;
    code?: string;
    framework?: string;
    category: string;
}
export interface ElementSelectorOverlay {
    isActive: boolean;
    highlightedElement: HTMLElement | null;
    selectedElement: HTMLElement | null;
    parentChain: HTMLElement[];
    onSelect: (element: HTMLElement, parents: HTMLElement[]) => void;
    onCancel: () => void;
    onHighlight: (element: HTMLElement | null) => void;
}
export interface ElementHighlightStyles {
    outline: string;
    outlineOffset: string;
    backgroundColor: string;
    boxShadow: string;
    position: string;
    zIndex: string;
    transition: string;
}
export interface ElementPathUtils {
    getCSSPath: (element: HTMLElement) => string;
    getXPath: (element: HTMLElement) => string;
    getUniqueSelector: (element: HTMLElement) => string;
    getFrameworkPath: (element: HTMLElement) => string;
}
export interface FrameworkElementContext {
    react?: {
        componentName: string;
        props: Record<string, any>;
        state: Record<string, any>;
        fiber: any;
        hierarchy: Array<{
            name: string;
            type: 'regular' | 'rsc';
        }>;
    };
    vue?: {
        componentName: string;
        instance: any;
        data: Record<string, any>;
        computed: Record<string, any>;
        methods: Record<string, any>;
    };
    angular?: {
        componentName: string;
        context: any;
        inputs: Record<string, any>;
        outputs: Record<string, any>;
    };
    svelte?: {
        componentName: string;
        instance: any;
        props: Record<string, any>;
        state: Record<string, any>;
    };
    vanilla?: {
        customElements: any;
        shadowRoot: any;
        dataAttributes: Record<string, string>;
        customProperties: Record<string, any>;
    };
}