@stdbl/wao/dist/react.d.ts

Optimize web pages for LLM agent interaction and understanding

import React, { ReactNode, CSSProperties } from 'react';

/**
 * Data flow description
 */
interface DataFlow {
    source: string;
    destination: string;
    dataType?: string;
    description?: string;
    [key: string]: any;
}
/**
 * Page structure description
 */
interface PageStructure {
    title?: string;
    mainContent?: string;
    navigation?: string | string[];
    footer?: string;
    sidebar?: string | string[];
    [key: string]: any;
}
declare global {
    interface Window {
        WAO: {
            activateOptimizer: (domElement: HTMLElement) => void;
            deactivateOptimizer: () => void;
            describeElementVisually: (selector: string, description: string, elementType: string) => void;
            defineInteraction: (elementSelector: string, interactionType: 'click' | 'hover' | 'focus', methodName: string) => void;
            isActivated: () => boolean;
            describePage: (pageInfo: Partial<PageStructure>) => void;
            describeDataFlow: (flow: DataFlow) => void;
            analyzeAccessibility: () => void;
            extractSemanticStructure: () => void;
            highlightElementRole: (selector: string, role: string) => void;
        };
    }
}

declare const defineInteraction: (elementSelector: string, interactionType: "click" | "hover" | "focus", methodName: string, expectedOutcome?: string) => void;
declare const describeElementVisually: (selector: string, description: string, elementType: string, options?: {
    role?: string;
    importance?: "primary" | "secondary" | "tertiary";
    dataContext?: string;
}) => void;
declare const describePage: (pageInfo: Partial<PageStructure>) => void;
declare const describeDataFlow: (flow: DataFlow) => void;
declare const analyzeAccessibility: () => void;
declare const extractSemanticStructure: () => void;
declare const highlightElementRole: (selector: string, role: string) => void;

interface InteractionType {
    type: 'click' | 'hover' | 'focus';
    method: string;
    expectedOutcome?: string;
}
interface WAOHookReturn {
    isActive: boolean;
    activate: () => void;
    deactivate: () => void;
    describeElement: typeof describeElementVisually;
    defineInteraction: typeof defineInteraction;
    describePage: typeof describePage;
    describeDataFlow: typeof describeDataFlow;
    analyzeAccessibility: typeof analyzeAccessibility;
    extractStructure: typeof extractSemanticStructure;
    highlightRole: typeof highlightElementRole;
}
interface WAOProviderProps {
    children: ReactNode;
    autoActivate?: boolean;
}
interface WAOElementProps {
    selector: string;
    description: string;
    elementType: string;
    role?: string;
    importance?: 'primary' | 'secondary' | 'tertiary';
    dataContext?: string;
    interactions?: InteractionType[];
    children?: ReactNode;
}
interface WAOToggleProps {
    className?: string;
    style?: CSSProperties;
    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'success';
    size?: 'default' | 'sm' | 'lg' | 'icon';
    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'custom';
}
interface WAOToggleShadcnProps {
    className?: string;
    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'success';
    size?: 'default' | 'sm' | 'lg' | 'icon';
    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'custom';
    buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
}
interface WAOPageProps {
    structure: {
        title?: string;
        mainContent?: string;
        navigation?: string | string[];
        footer?: string;
        sidebar?: string | string[];
        [key: string]: any;
    };
    children?: ReactNode;
}
interface WAODataFlowProps {
    flow: {
        source: string;
        destination: string;
        dataType?: string;
        description?: string;
        [key: string]: any;
    };
}
interface WAOInspectorProps {
    autoAnalyze?: boolean;
}
/**
 * React hook to use WAO in functional components
 */
declare const useWAO: (autoActivate?: boolean) => WAOHookReturn;
/**
 * WAO Provider component for React applications
 */
declare const WAOProvider: React.FC<WAOProviderProps>;
/**
 * WAO Element component to describe UI elements
 */
declare const WAOElement: React.FC<WAOElementProps>;
/**
 * WAO Toggle Button component styled with Tailwind
 */
declare const WAOToggle: React.FC<WAOToggleProps>;
/**
 * WAO Toggle Button component using shadcn UI
 * Requires shadcn Button component and cn utility from a project using shadcn UI
 */
declare const WAOToggleShadcn: React.FC<WAOToggleShadcnProps>;
/**
 * WAO Page component to describe overall page structure
 */
declare const WAOPage: React.FC<WAOPageProps>;
/**
 * WAO DataFlow component to visualize data flows
 */
declare const WAODataFlow: React.FC<WAODataFlowProps>;
/**
 * WAO Inspector component for one-click accessibility and structure analysis
 */
declare const WAOInspector: React.FC<WAOInspectorProps>;

export { WAODataFlow, WAOElement, WAOInspector, WAOPage, WAOProvider, WAOToggle, WAOToggleShadcn, useWAO };