@stdbl/wao/dist/react.mjs.map

Optimize web pages for LLM agent interaction and understanding

{"version":3,"sources":["../src/react.tsx","../src/utils.ts","../src/core.ts"],"sourcesContent":["import React, { useEffect, useState, Fragment } from 'react';\nimport type { ReactNode, CSSProperties } from 'react';\nimport {\n  activateOptimizer,\n  deactivateOptimizer,\n  describeElementVisually,\n  defineInteraction,\n  describePage,\n  describeDataFlow,\n  analyzeAccessibility,\n  extractSemanticStructure,\n  highlightElementRole,\n  isActivated,\n} from './core';\n\n// Define types for props and interfaces\ninterface InteractionType {\n  type: 'click' | 'hover' | 'focus';\n  method: string;\n  expectedOutcome?: string;\n}\n\ninterface WAOHookReturn {\n  isActive: boolean;\n  activate: () => void;\n  deactivate: () => void;\n  describeElement: typeof describeElementVisually;\n  defineInteraction: typeof defineInteraction;\n  describePage: typeof describePage;\n  describeDataFlow: typeof describeDataFlow;\n  analyzeAccessibility: typeof analyzeAccessibility;\n  extractStructure: typeof extractSemanticStructure;\n  highlightRole: typeof highlightElementRole;\n}\n\ninterface WAOProviderProps {\n  children: ReactNode;\n  autoActivate?: boolean;\n}\n\ninterface WAOElementProps {\n  selector: string;\n  description: string;\n  elementType: string;\n  role?: string;\n  importance?: 'primary' | 'secondary' | 'tertiary';\n  dataContext?: string;\n  interactions?: InteractionType[];\n  children?: ReactNode;\n}\n\ninterface WAOToggleProps {\n  className?: string;\n  style?: CSSProperties;\n  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'success';\n  size?: 'default' | 'sm' | 'lg' | 'icon';\n  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'custom';\n}\n\n// New interface for the shadcn version of the toggle\ninterface WAOToggleShadcnProps {\n  className?: string;\n  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'success';\n  size?: 'default' | 'sm' | 'lg' | 'icon';\n  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'custom';\n  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\ninterface WAOPageProps {\n  structure: {\n    title?: string;\n    mainContent?: string;\n    navigation?: string | string[];\n    footer?: string;\n    sidebar?: string | string[];\n    [key: string]: any;\n  };\n  children?: ReactNode;\n}\n\ninterface WAODataFlowProps {\n  flow: {\n    source: string;\n    destination: string;\n    dataType?: string;\n    description?: string;\n    [key: string]: any;\n  };\n}\n\ninterface WAOInspectorProps {\n  autoAnalyze?: boolean;\n}\n\n/**\n * React hook to use WAO in functional components\n */\nexport const useWAO = (autoActivate = false): WAOHookReturn => {\n  const [isActive, setIsActive] = useState<boolean>(isActivated());\n\n  // Sync state with WAO activation state\n  useEffect(() => {\n    setIsActive(isActivated());\n\n    // Auto activate if specified\n    if (autoActivate && !isActivated()) {\n      activateOptimizer(document.body);\n      setIsActive(true);\n    }\n\n    return () => {};\n  }, [autoActivate]);\n\n  // Wrapper functions to update React state after WAO operations\n  const activate = (): void => {\n    activateOptimizer(document.body);\n    setIsActive(true);\n  };\n\n  const deactivate = (): void => {\n    deactivateOptimizer();\n    setIsActive(false);\n  };\n\n  return {\n    isActive,\n    activate,\n    deactivate,\n    describeElement: describeElementVisually,\n    defineInteraction,\n    describePage,\n    describeDataFlow,\n    analyzeAccessibility,\n    extractStructure: extractSemanticStructure,\n    highlightRole: highlightElementRole,\n  };\n};\n\n/**\n * WAO Provider component for React applications\n */\nexport const WAOProvider: React.FC<WAOProviderProps> = ({ children, autoActivate = false }) => {\n  const { isActive, activate } = useWAO(autoActivate);\n\n  useEffect(() => {\n    if (autoActivate && !isActive) {\n      activate();\n    }\n  }, [autoActivate, isActive, activate]);\n\n  return <>{children}</>;\n};\n\n/**\n * WAO Element component to describe UI elements\n */\nexport const WAOElement: React.FC<WAOElementProps> = ({\n  selector,\n  description,\n  elementType,\n  role,\n  importance,\n  dataContext,\n  interactions = [],\n  children,\n}) => {\n  const { isActive, describeElement, defineInteraction } = useWAO();\n\n  useEffect(() => {\n    if (isActive) {\n      // Describe the element\n      describeElement(selector, description, elementType, {\n        role,\n        importance,\n        dataContext,\n      });\n\n      // Set up interactions if provided\n      interactions.forEach(interaction => {\n        defineInteraction(\n          selector,\n          interaction.type,\n          interaction.method,\n          interaction.expectedOutcome,\n        );\n      });\n    }\n  }, [\n    isActive,\n    selector,\n    description,\n    elementType,\n    role,\n    importance,\n    dataContext,\n    interactions,\n    describeElement,\n    defineInteraction,\n  ]);\n\n  return <>{children}</>;\n};\n\n/**\n * WAO Toggle Button component styled with Tailwind\n */\nexport const WAOToggle: React.FC<WAOToggleProps> = ({\n  className,\n  style,\n  variant = 'default',\n  size = 'default',\n  position = 'bottom-right',\n}) => {\n  const { isActive, activate, deactivate } = useWAO();\n\n  // Position classes based on the position prop\n  const positionClasses = {\n    'bottom-right': 'fixed bottom-5 right-5',\n    'bottom-left': 'fixed bottom-5 left-5',\n    'top-right': 'fixed top-5 right-5',\n    'top-left': 'fixed top-5 left-5',\n    custom: '', // No position classes for custom positioning\n  };\n\n  // Get the appropriate variant color\n  const getVariantClasses = () => {\n    if (isActive) {\n      return variant === 'default'\n        ? 'bg-blue-500 hover:bg-blue-600 text-white'\n        : variant === 'destructive'\n          ? 'bg-red-500 hover:bg-red-600 text-white'\n          : variant === 'outline'\n            ? 'border border-blue-500 text-blue-500 hover:bg-blue-50'\n            : variant === 'secondary'\n              ? 'bg-gray-200 hover:bg-gray-300 text-gray-800'\n              : variant === 'ghost'\n                ? 'hover:bg-blue-50 text-blue-500'\n                : variant === 'link'\n                  ? 'text-blue-500 hover:underline'\n                  : variant === 'success'\n                    ? 'bg-green-500 hover:bg-green-600 text-white'\n                    : '';\n    } else {\n      return 'bg-gray-200 hover:bg-gray-300 text-gray-800';\n    }\n  };\n\n  // Size classes\n  const sizeClasses = {\n    default: 'px-4 py-2 text-sm',\n    sm: 'px-3 py-1 text-xs',\n    lg: 'px-6 py-3 text-base',\n    icon: 'p-2',\n  };\n\n  return (\n    <button\n      className={`\n        ${positionClasses[position]} \n        ${getVariantClasses()} \n        ${sizeClasses[size]}\n        rounded-md font-medium shadow transition-colors duration-200\n        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\n        z-50\n        ${className || ''}\n      `}\n      style={style}\n      onClick={() => (isActive ? deactivate() : activate())}\n    >\n      {isActive ? 'Deactivate Optimization' : 'Activate Optimization'}\n    </button>\n  );\n};\n\n/**\n * WAO Toggle Button component using shadcn UI\n * Requires shadcn Button component and cn utility from a project using shadcn UI\n */\nexport const WAOToggleShadcn: React.FC<WAOToggleShadcnProps> = ({\n  className,\n  variant = isActivated() ? 'default' : 'secondary',\n  size = 'default',\n  position = 'bottom-right',\n  buttonProps,\n}) => {\n  const { isActive, activate, deactivate } = useWAO();\n\n  // For this component to work, you need to:\n  // 1. Import the Button component from your shadcn UI setup\n  // 2. Import the cn utility function\n\n  // Position classes for fixed positioning\n  const positionClasses = {\n    'bottom-right': 'fixed bottom-5 right-5',\n    'bottom-left': 'fixed bottom-5 left-5',\n    'top-right': 'fixed top-5 right-5',\n    'top-left': 'fixed top-5 left-5',\n    custom: '', // No position classes for custom positioning\n  };\n\n  // The component below is commented out because it requires imports from your shadcn setup\n  // Uncomment and adapt it to your project when using it\n\n  /*\n  return (\n    <Button\n      className={cn(\n        positionClasses[position],\n        'z-50',\n        className\n      )}\n      variant={isActive ? variant : 'secondary'}\n      size={size}\n      onClick={() => (isActive ? deactivate() : activate())}\n      {...buttonProps}\n    >\n      {isActive ? 'Deactivate Optimization' : 'Activate Optimization'}\n    </Button>\n  );\n  */\n\n  // This is a placeholder implementation until the component is properly imported\n  return (\n    <button\n      className={`\n        ${positionClasses[position]}\n        ${\n          isActive\n            ? variant === 'default'\n              ? 'bg-primary text-primary-foreground shadow hover:bg-primary/90'\n              : variant === 'destructive'\n                ? 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90'\n                : variant === 'outline'\n                  ? 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground'\n                  : variant === 'secondary'\n                    ? 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80'\n                    : variant === 'ghost'\n                      ? 'hover:bg-accent hover:text-accent-foreground'\n                      : variant === 'link'\n                        ? 'text-primary underline-offset-4 hover:underline'\n                        : variant === 'success'\n                          ? 'bg-green-500 text-white shadow-sm hover:bg-green-600'\n                          : ''\n            : 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80'\n        }\n        ${\n          size === 'default'\n            ? 'h-9 px-4 py-2'\n            : size === 'sm'\n              ? 'h-8 rounded-md px-3 text-xs'\n              : size === 'lg'\n                ? 'h-10 rounded-md px-8'\n                : size === 'icon'\n                  ? 'h-9 w-9'\n                  : ''\n        }\n        inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium\n        transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\n        disabled:pointer-events-none disabled:opacity-50\n        z-50\n        ${className || ''}\n      `}\n      onClick={() => (isActive ? deactivate() : activate())}\n      {...buttonProps}\n    >\n      {isActive ? 'Deactivate Optimization' : 'Activate Optimization'}\n    </button>\n  );\n};\n\n/**\n * WAO Page component to describe overall page structure\n */\nexport const WAOPage: React.FC<WAOPageProps> = ({ structure, children }) => {\n  const { isActive, describePage } = useWAO();\n\n  useEffect(() => {\n    if (isActive) {\n      describePage(structure);\n    }\n  }, [isActive, structure, describePage]);\n\n  return <>{children}</>;\n};\n\n/**\n * WAO DataFlow component to visualize data flows\n */\nexport const WAODataFlow: React.FC<WAODataFlowProps> = ({ flow }) => {\n  const { isActive, describeDataFlow } = useWAO();\n\n  useEffect(() => {\n    if (isActive) {\n      describeDataFlow(flow);\n    }\n  }, [isActive, flow, describeDataFlow]);\n\n  return null; // This component doesn't render anything directly\n};\n\n/**\n * WAO Inspector component for one-click accessibility and structure analysis\n */\nexport const WAOInspector: React.FC<WAOInspectorProps> = ({ autoAnalyze = false }) => {\n  const { isActive, analyzeAccessibility, extractStructure } = useWAO();\n\n  useEffect(() => {\n    if (isActive && autoAnalyze) {\n      // Automatically analyze page\n      analyzeAccessibility();\n      extractStructure();\n    }\n  }, [isActive, autoAnalyze, analyzeAccessibility, extractStructure]);\n\n  if (!isActive) return null;\n\n  return (\n    <div className=\"fixed top-5 right-5 z-50 flex gap-2\">\n      <button\n        onClick={analyzeAccessibility}\n        className=\"px-3 py-2 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2\"\n      >\n        Analyze Accessibility\n      </button>\n      <button\n        onClick={extractStructure}\n        className=\"px-3 py-2 bg-green-500 hover:bg-green-600 text-white text-sm font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2\"\n      >\n        Analyze Structure\n      </button>\n    </div>\n  );\n};\n","// utils.ts - Helper functions (pure functions)\nexport const logMessage = (message: string): void => {\n  console.log(`LLM Optimization Library: ${message}`);\n};\n\nexport const createDOMComment = (message: string): Comment => {\n  return document.createComment(message);\n};\n","// core.ts - Web Augmentation Optimizer (WAO)\nimport type {\n  ElementDescription,\n  PageState,\n  InteractionMapping,\n  PageStructure,\n  DataFlow,\n  AccessibilityInfo,\n} from './types';\nimport { createDOMComment, logMessage } from './utils';\n\n// Core state for the library\nconst pageState: PageState = {\n  originalDOM: document.body, // Initial state\n  optimizedElements: [],\n  interactionMappings: [],\n  isActive: false,\n  pageStructure: undefined,\n  dataFlows: [],\n  accessibility: {\n    ariaLabels: {},\n    tabOrder: [],\n    colorContrast: {},\n  },\n};\n\n// CSS Styles for optimized elements\nconst injectStyles = (): void => {\n  const styleElement = document.createElement('style');\n  styleElement.id = 'wao-styles';\n  styleElement.textContent = `\n    .wao-optimized-element {\n      border: 2px solid #3498db;\n      padding: 8px;\n      margin: 4px;\n      background-color: #f8f9fa;\n      border-radius: 4px;\n      position: relative;\n      display: block;\n    }\n    \n    .wao-description {\n      font-family: monospace;\n      margin-bottom: 6px;\n      color: #2c3e50;\n      display: block;\n    }\n    \n    .wao-tag {\n      background-color: #3498db;\n      color: white;\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-size: 12px;\n      font-family: monospace;\n      position: absolute;\n      top: -10px;\n      right: 5px;\n    }\n    \n    .wao-interaction {\n      margin-top: 6px;\n      font-style: italic;\n      color: #e74c3c;\n      font-size: 12px;\n      border-top: 1px dashed #ccc;\n      padding-top: 4px;\n    }\n    \n    .wao-toggle {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      z-index: 10000;\n      padding: 8px 16px;\n      background-color: #3498db;\n      color: white;\n      border: none;\n      border-radius: 4px;\n      cursor: pointer;\n      font-weight: bold;\n      box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n    }\n    \n    .wao-role {\n      position: absolute;\n      top: -10px;\n      left: 5px;\n      background-color: #27ae60;\n      color: white;\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-size: 12px;\n      font-family: monospace;\n    }\n    \n    .wao-importance-primary {\n      border-color: #e74c3c !important;\n      border-width: 3px !important;\n    }\n    \n    .wao-importance-secondary {\n      border-color: #f39c12 !important;\n    }\n    \n    .wao-importance-tertiary {\n      border-color: #95a5a6 !important;\n      border-style: dashed !important;\n    }\n    \n    .wao-data-flow {\n      position: relative;\n      border: 1px dashed #9b59b6;\n      margin: 10px 0;\n      padding: 8px;\n      background-color: rgba(155, 89, 182, 0.1);\n    }\n    \n    .wao-data-flow::before {\n      content: attr(data-description);\n      font-size: 12px;\n      color: #9b59b6;\n      position: absolute;\n      top: -10px;\n      left: 10px;\n      background: white;\n      padding: 0 5px;\n    }\n    \n    .wao-page-structure {\n      position: fixed;\n      top: 20px;\n      right: 20px;\n      background: rgba(52, 152, 219, 0.9);\n      color: white;\n      padding: 10px;\n      border-radius: 4px;\n      font-family: monospace;\n      font-size: 12px;\n      z-index: 10000;\n      max-width: 300px;\n      max-height: 300px;\n      overflow: auto;\n    }\n    \n    body[data-wao-active=\"true\"] {\n      filter: grayscale(0.3);\n      background-color: #f0f0f0 !important;\n    }\n    \n    .wao-accessibility-issue {\n      outline: 3px solid #c0392b !important;\n      position: relative;\n    }\n    \n    .wao-accessibility-issue::after {\n      content: \"⚠️\";\n      position: absolute;\n      top: 0;\n      right: 0;\n      background: #c0392b;\n      color: white;\n      padding: 2px;\n    }\n  `;\n  document.head.appendChild(styleElement);\n};\n\n// Inject activation instructions for the LLM Agent\nconst injectActivationInstructions = (): void => {\n  const comment = createDOMComment(`\n    LLM Agent Instructions:\n    - To activate this optimization library, set 'data-wao-active=\"true\"' on the body element\n    - For visual descriptions, call 'window.WAO.describeElementVisually(selector, description, elementType)'\n    - To map interactions, call 'window.WAO.defineInteraction(selector, interactionType, methodName)'\n    - To describe page structure, call 'window.WAO.describePage(pageInfo)'\n    - To analyze page semantics, call 'window.WAO.extractSemanticStructure()'\n    - To describe data flows, call 'window.WAO.describeDataFlow(flow)'\n    - To analyze accessibility, call 'window.WAO.analyzeAccessibility()'\n    - To highlight element roles, call 'window.WAO.highlightElementRole(selector, role)'\n    - To deactivate, call 'window.WAO.deactivateOptimizer()'\n  `);\n  document.body.prepend(comment);\n\n  // Also inject a data attribute observer\n  const observer = new MutationObserver(mutations => {\n    mutations.forEach(mutation => {\n      if (mutation.attributeName === 'data-wao-active') {\n        const bodyElement = document.body;\n        const isActive = bodyElement.getAttribute('data-wao-active') === 'true';\n\n        if (isActive && !pageState.isActive) {\n          activateOptimizer(bodyElement);\n        } else if (!isActive && pageState.isActive) {\n          deactivateOptimizer();\n        }\n      }\n    });\n  });\n\n  observer.observe(document.body, { attributes: true });\n};\n\n// Check if the optimizer is activated\nexport const isActivated = (): boolean => {\n  return pageState.isActive;\n};\n\n// Activate the optimizer\nconst activateOptimizer = (domElement: HTMLElement): void => {\n  if (!isActivated()) {\n    pageState.originalDOM = domElement.cloneNode(true) as HTMLElement;\n    pageState.isActive = true;\n    document.body.setAttribute('data-wao-active', 'true');\n    injectStyles();\n    addToggle();\n    setupEventListeners();\n    logMessage('Optimizer activated');\n  } else {\n    logMessage('Optimizer already active');\n  }\n};\n\n// Deactivate and restore original DOM\nconst deactivateOptimizer = (): void => {\n  if (pageState.isActive) {\n    // Don't replace the whole body to avoid losing the script\n    // Instead, revert individual optimized elements\n    pageState.optimizedElements.forEach(revertElementVisuals);\n\n    // Remove any added styles and toggles\n    const styleElement = document.getElementById('wao-styles');\n    if (styleElement) styleElement.remove();\n\n    const toggleButton = document.querySelector('.wao-toggle');\n    if (toggleButton) toggleButton.remove();\n\n    // Cleanup\n    document.body.removeAttribute('data-wao-active');\n    removeEventListeners();\n    pageState.optimizedElements = [];\n    pageState.interactionMappings = [];\n    pageState.isActive = false;\n    logMessage('Optimizer deactivated');\n  } else {\n    logMessage('Optimizer is not active');\n  }\n};\n\n// Define an interaction for an element\nconst defineInteraction = (\n  elementSelector: string,\n  interactionType: 'click' | 'hover' | 'focus',\n  methodName: string,\n  expectedOutcome?: string,\n): void => {\n  if (!isActivated()) return;\n\n  const mapping: InteractionMapping = {\n    elementSelector,\n    interactionType,\n    methodName,\n    expectedOutcome,\n  };\n\n  pageState.interactionMappings.push(mapping);\n\n  // Find any already optimized elements and add interaction information\n  const element = document.querySelector(elementSelector);\n  if (element) {\n    const optimizedElement = element.closest('.wao-optimized-element');\n    if (optimizedElement) {\n      let interactionElement = optimizedElement.querySelector('.wao-interaction');\n      if (!interactionElement) {\n        interactionElement = document.createElement('div');\n        interactionElement.className = 'wao-interaction';\n        optimizedElement.appendChild(interactionElement);\n      }\n\n      const interactionText = `${interactionType} → ${methodName}`;\n      interactionElement.textContent +=\n        interactionText + (expectedOutcome ? ` (${expectedOutcome})` : '') + ' ';\n    }\n  }\n};\n\n// Handle interaction events\nconst handleInteraction = (event: Event): void => {\n  const target = event.target as HTMLElement;\n\n  pageState.interactionMappings.forEach(mapping => {\n    const matchedElement = target.closest(mapping.elementSelector);\n    if (matchedElement && mapping.interactionType === event.type) {\n      logMessage(`Interaction triggered: ${mapping.methodName} on ${mapping.elementSelector}`);\n\n      // Here you would execute the actual method\n      // Safely attempt to call the method if it exists on window\n      const method = window[mapping.methodName as keyof typeof window];\n      if (typeof method === 'function') {\n        try {\n          method(matchedElement);\n        } catch (error) {\n          logMessage(`Error executing method ${mapping.methodName}: ${error}`);\n        }\n      }\n    }\n  });\n};\n\n// Add toggle button to UI\nconst addToggle = (): void => {\n  // Remove existing button if present\n  const existingButton = document.querySelector('.wao-toggle');\n  if (existingButton) existingButton.remove();\n\n  const toggleButton = document.createElement('button');\n  toggleButton.className = 'wao-toggle';\n  toggleButton.textContent = pageState.isActive\n    ? 'Deactivate Optimization'\n    : 'Activate Optimization';\n\n  toggleButton.addEventListener('click', () => {\n    if (pageState.isActive) {\n      deactivateOptimizer();\n    } else {\n      activateOptimizer(document.body);\n    }\n    toggleButton.textContent = pageState.isActive\n      ? 'Deactivate Optimization'\n      : 'Activate Optimization';\n  });\n\n  document.body.appendChild(toggleButton);\n};\n\n// Setup event listeners\nconst setupEventListeners = (): void => {\n  document.addEventListener('click', handleInteraction);\n  document.addEventListener('mouseover', handleInteraction); // Use mouseover for hover\n  document.addEventListener('focus', handleInteraction, true); // Capture phase for focus\n};\n\n// Remove event listeners\nconst removeEventListeners = (): void => {\n  document.removeEventListener('click', handleInteraction);\n  document.removeEventListener('mouseover', handleInteraction);\n  document.removeEventListener('focus', handleInteraction, true);\n};\n\n// Visually describe an element\nconst describeElementVisually = (\n  selector: string,\n  description: string,\n  elementType: string,\n  options?: {\n    role?: string;\n    importance?: 'primary' | 'secondary' | 'tertiary';\n    dataContext?: string;\n  },\n): void => {\n  if (!isActivated()) return;\n\n  const element = document.querySelector(selector);\n  if (!element) {\n    logMessage(`Element not found: ${selector}`);\n    return;\n  }\n\n  // Check if already optimized\n  if (element.closest('.wao-optimized-element')) {\n    logMessage(`Element already optimized: ${selector}`);\n    return;\n  }\n\n  // Create the wrapper\n  const wrapper = document.createElement('div');\n  wrapper.className = 'wao-optimized-element';\n  wrapper.setAttribute('data-original-selector', selector);\n\n  // Add importance class if specified\n  if (options?.importance) {\n    wrapper.classList.add(`wao-importance-${options.importance}`);\n  }\n\n  // Create description\n  const descriptionElement = document.createElement('div');\n  descriptionElement.className = 'wao-description';\n  descriptionElement.textContent = description;\n\n  // Add data context if specified\n  if (options?.dataContext) {\n    const dataContextEl = document.createElement('div');\n    dataContextEl.style.fontSize = '12px';\n    dataContextEl.style.fontStyle = 'italic';\n    dataContextEl.textContent = `Data: ${options.dataContext}`;\n    descriptionElement.appendChild(dataContextEl);\n  }\n\n  // Create tag\n  const tagElement = document.createElement('span');\n  tagElement.className = 'wao-tag';\n  tagElement.textContent = `<${elementType}>`;\n\n  // Create role tag if specified\n  if (options?.role) {\n    const roleElement = document.createElement('span');\n    roleElement.className = 'wao-role';\n    roleElement.textContent = options.role;\n    wrapper.appendChild(roleElement);\n  }\n\n  // Assemble the wrapper\n  wrapper.appendChild(tagElement);\n  wrapper.appendChild(descriptionElement);\n\n  // Replace the original element with our wrapper\n  element.parentNode?.replaceChild(wrapper, element);\n\n  // Store the optimization for potential revert\n  pageState.optimizedElements.push({\n    selector,\n    description,\n    originalHTML: element.outerHTML,\n    role: options?.role,\n    importance: options?.importance,\n    dataContext: options?.dataContext,\n  });\n};\n\n// Revert visual optimization\nconst revertElementVisuals = (elementDescription: ElementDescription): void => {\n  const optimizedElement = document.querySelector(\n    `.wao-optimized-element[data-original-selector=\"${elementDescription.selector}\"]`,\n  );\n\n  if (optimizedElement) {\n    // Create a temporary container to convert HTML string to Element\n    const tempContainer = document.createElement('div');\n    if (elementDescription.originalHTML) {\n      tempContainer.innerHTML = elementDescription.originalHTML;\n      const originalElement = tempContainer.firstElementChild;\n\n      if (originalElement) {\n        optimizedElement.parentNode?.replaceChild(originalElement, optimizedElement);\n      }\n    }\n  }\n};\n\n// New function: Describe overall page structure\nconst describePage = (pageInfo: Partial<PageStructure>): void => {\n  if (!isActivated()) return;\n\n  // Store page structure\n  pageState.pageStructure = {\n    ...pageState.pageStructure,\n    ...pageInfo,\n  } as PageStructure;\n\n  // Create or update page structure visualization\n  let structureEl = document.querySelector('.wao-page-structure');\n\n  if (!structureEl) {\n    structureEl = document.createElement('div');\n    structureEl.className = 'wao-page-structure';\n    document.body.appendChild(structureEl);\n  }\n\n  // Build HTML content for page structure\n  let structureHTML = '<h3>Page Structure</h3>';\n\n  if (pageInfo.title) {\n    structureHTML += `<div><strong>Title:</strong> ${pageInfo.title}</div>`;\n  }\n\n  if (pageInfo.mainContent) {\n    structureHTML += `<div><strong>Main:</strong> ${pageInfo.mainContent}</div>`;\n\n    // Highlight main content\n    const mainEl = document.querySelector(pageInfo.mainContent);\n    if (mainEl && !mainEl.classList.contains('wao-optimized-element')) {\n      mainEl.setAttribute('data-wao-role', 'main-content');\n      mainEl.setAttribute('style', 'border: 2px dashed #3498db !important; padding: 8px;');\n    }\n  }\n\n  if (pageInfo.navigation) {\n    structureHTML += `<div><strong>Navigation:</strong></div><ul>`;\n    const navItems = Array.isArray(pageInfo.navigation)\n      ? pageInfo.navigation\n      : [pageInfo.navigation];\n\n    navItems.forEach((nav: string) => {\n      structureHTML += `<li>${nav}</li>`;\n\n      // Highlight navigation\n      const navEl = document.querySelector(nav);\n      if (navEl && !navEl.classList.contains('wao-optimized-element')) {\n        navEl.setAttribute('data-wao-role', 'navigation');\n        navEl.setAttribute('style', 'border: 2px dashed #2ecc71 !important; padding: 4px;');\n      }\n    });\n    structureHTML += `</ul>`;\n  }\n\n  if (pageInfo.sidebar) {\n    structureHTML += `<div><strong>Sidebars:</strong></div><ul>`;\n    const sidebarItems = Array.isArray(pageInfo.sidebar) ? pageInfo.sidebar : [pageInfo.sidebar];\n\n    sidebarItems.forEach((side: string) => {\n      structureHTML += `<li>${side}</li>`;\n\n      // Highlight sidebar\n      const sideEl = document.querySelector(side);\n      if (sideEl && !sideEl.classList.contains('wao-optimized-element')) {\n        sideEl.setAttribute('data-wao-role', 'sidebar');\n        sideEl.setAttribute('style', 'border: 2px dashed #f39c12 !important; padding: 4px;');\n      }\n    });\n    structureHTML += `</ul>`;\n  }\n\n  if (pageInfo.footer) {\n    structureHTML += `<div><strong>Footer:</strong> ${pageInfo.footer}</div>`;\n\n    // Highlight footer\n    const footerEl = document.querySelector(pageInfo.footer);\n    if (footerEl && !footerEl.classList.contains('wao-optimized-element')) {\n      footerEl.setAttribute('data-wao-role', 'footer');\n      footerEl.setAttribute('style', 'border: 2px dashed #9b59b6 !important; padding: 4px;');\n    }\n  }\n\n  structureEl.innerHTML = structureHTML;\n};\n\n// New function: Describe data flows between elements\nconst describeDataFlow = (flow: DataFlow): void => {\n  if (!isActivated()) return;\n\n  // Store the data flow\n  if (!pageState.dataFlows) {\n    pageState.dataFlows = [];\n  }\n\n  pageState.dataFlows.push(flow);\n\n  // Visualize the data flow\n  const sourceEl = document.querySelector(flow.source);\n  const destEl = document.querySelector(flow.destination);\n\n  if (sourceEl && destEl) {\n    // Create flow container\n    const flowContainer = document.createElement('div');\n    flowContainer.className = 'wao-data-flow';\n    flowContainer.setAttribute('data-description', flow.description ?? '');\n    flowContainer.innerHTML = `\n      <div><strong>From:</strong> ${flow.source} (${flow.dataType})</div>\n      <div style=\"text-align: center;\">↓</div>\n      <div><strong>To:</strong> ${flow.destination}</div>\n    `;\n\n    // Insert after destination element\n    destEl.parentNode?.insertBefore(flowContainer, destEl.nextSibling);\n  }\n};\n\n// New function: Analyze page for accessibility issues\nconst analyzeAccessibility = (): void => {\n  if (!isActivated()) return;\n\n  const accessibilityInfo: AccessibilityInfo = {\n    ariaLabels: {},\n    tabOrder: [],\n    colorContrast: {},\n  };\n\n  // Find all interactive elements\n  const interactiveElements = document.querySelectorAll(\n    'button, a, input, select, textarea, [role=\"button\"], [tabindex]',\n  );\n\n  // Analyze each element\n  interactiveElements.forEach(element => {\n    const elemNode = element as HTMLElement;\n    const selector = getUniqueSelector(elemNode);\n\n    // Check for ARIA labels\n    const ariaLabel = elemNode.getAttribute('aria-label');\n    const ariaLabelledBy = elemNode.getAttribute('aria-labelledby');\n\n    if (!ariaLabel && !ariaLabelledBy && elemNode.tagName !== 'INPUT') {\n      // Mark as accessibility issue\n      elemNode.classList.add('wao-accessibility-issue');\n\n      // Store issue\n      accessibilityInfo.colorContrast[selector] = 'Missing ARIA label';\n    }\n\n    // Store existing labels\n    if (ariaLabel) {\n      accessibilityInfo.ariaLabels[selector] = ariaLabel;\n    }\n\n    // Build tab order\n    if (\n      elemNode.tabIndex >= 0 ||\n      elemNode.tagName === 'A' ||\n      elemNode.tagName === 'BUTTON' ||\n      elemNode.tagName === 'INPUT' ||\n      elemNode.tagName === 'SELECT' ||\n      elemNode.tagName === 'TEXTAREA'\n    ) {\n      accessibilityInfo.tabOrder.push(selector);\n    }\n  });\n\n  // Store accessibility info\n  pageState.accessibility = accessibilityInfo;\n\n  // Create accessibility report\n  let accessibilityEl = document.querySelector('.wao-accessibility-report');\n\n  if (!accessibilityEl) {\n    accessibilityEl = document.createElement('div');\n    accessibilityEl.className = 'wao-accessibility-report';\n    accessibilityEl.setAttribute(\n      'style',\n      `\n      position: fixed;\n      left: 20px;\n      top: 20px;\n      background: rgba(44, 62, 80, 0.9);\n      color: white;\n      padding: 15px;\n      border-radius: 4px;\n      font-family: monospace;\n      z-index: 10000;\n      max-width: 300px;\n      max-height: 300px;\n      overflow: auto;\n    `,\n    );\n    document.body.appendChild(accessibilityEl);\n  }\n\n  // Build HTML content for accessibility report\n  let reportHTML = '<h3>Accessibility Report</h3>';\n\n  // Tab order\n  reportHTML += `<div><strong>Tab Order (${accessibilityInfo.tabOrder.length} elements):</strong></div><ol>`;\n  accessibilityInfo.tabOrder.slice(0, 10).forEach(selector => {\n    reportHTML += `<li>${selector}</li>`;\n  });\n\n  if (accessibilityInfo.tabOrder.length > 10) {\n    reportHTML += `<li>... and ${accessibilityInfo.tabOrder.length - 10} more</li>`;\n  }\n\n  reportHTML += `</ol>`;\n\n  // Issues\n  const issueCount = Object.keys(accessibilityInfo.colorContrast).length;\n  reportHTML += `<div><strong>Issues (${issueCount}):</strong></div>`;\n\n  if (issueCount > 0) {\n    reportHTML += `<ul>`;\n    Object.entries(accessibilityInfo.colorContrast)\n      .slice(0, 5)\n      .forEach(([selector, issue]) => {\n        reportHTML += `<li>${selector}: ${issue}</li>`;\n      });\n\n    if (issueCount > 5) {\n      reportHTML += `<li>... and ${issueCount - 5} more</li>`;\n    }\n\n    reportHTML += `</ul>`;\n  }\n\n  accessibilityEl.innerHTML = reportHTML;\n};\n\n// New function: Extract semantic structure automatically\nconst extractSemanticStructure = (): void => {\n  if (!isActivated()) return;\n\n  const pageInfo: Partial<PageStructure> = {\n    title: document.title,\n    navigation: [],\n    sidebar: [],\n  };\n\n  // Detect main content\n  const mainContent =\n    document.querySelector('main') ||\n    document.querySelector('[role=\"main\"]') ||\n    document.querySelector('#main');\n\n  if (mainContent) {\n    pageInfo.mainContent = getUniqueSelector(mainContent as HTMLElement);\n  }\n\n  // Detect navigation\n  const navElements = document.querySelectorAll(\n    'nav, [role=\"navigation\"], header ul, .nav, .navbar',\n  );\n  navElements.forEach(nav => {\n    if (Array.isArray(pageInfo.navigation)) {\n      pageInfo.navigation.push(getUniqueSelector(nav as HTMLElement));\n    }\n  });\n\n  // Detect footer\n  const footer =\n    document.querySelector('footer') ||\n    document.querySelector('.footer') ||\n    document.querySelector('#footer');\n  if (footer) {\n    pageInfo.footer = getUniqueSelector(footer as HTMLElement);\n  }\n\n  // Detect sidebars\n  const sidebars = document.querySelectorAll('aside, .sidebar, [role=\"complementary\"]');\n  sidebars.forEach(sidebar => {\n    if (Array.isArray(pageInfo.sidebar)) {\n      pageInfo.sidebar.push(getUniqueSelector(sidebar as HTMLElement));\n    }\n  });\n\n  // Apply the structure\n  describePage(pageInfo);\n\n  // Also process headings for hierarchy\n  const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');\n  headings.forEach(heading => {\n    const level = parseInt(heading.tagName.charAt(1));\n    const text = heading.textContent || '';\n    const selector = getUniqueSelector(heading as HTMLElement);\n\n    describeElementVisually(selector, `Heading: ${text}`, heading.tagName.toLowerCase(), {\n      role: 'heading-level-' + level,\n      importance: level <= 2 ? 'primary' : level <= 4 ? 'secondary' : 'tertiary',\n    });\n  });\n};\n\n// New function: Highlight element with its semantic role\nconst highlightElementRole = (selector: string, role: string): void => {\n  if (!isActivated()) return;\n\n  const element = document.querySelector(selector);\n  if (!element) {\n    logMessage(`Element not found: ${selector}`);\n    return;\n  }\n\n  // If already optimized, add role to existing element\n  const optimizedElement = element.closest('.wao-optimized-element');\n  if (optimizedElement) {\n    let roleElement = optimizedElement.querySelector('.wao-role');\n\n    if (!roleElement) {\n      roleElement = document.createElement('span');\n      roleElement.className = 'wao-role';\n      optimizedElement.appendChild(roleElement);\n    }\n\n    (roleElement as HTMLElement).textContent = role;\n    return;\n  }\n\n  // Otherwise, create a minimal wrapper with just the role\n  const wrapper = document.createElement('div');\n  wrapper.className = 'wao-optimized-element';\n  wrapper.setAttribute('data-original-selector', selector);\n\n  const roleElement = document.createElement('span');\n  roleElement.className = 'wao-role';\n  roleElement.textContent = role;\n\n  // Clone the original element as a child of the wrapper\n  const clonedElement = element.cloneNode(true);\n\n  wrapper.appendChild(roleElement);\n  wrapper.appendChild(clonedElement);\n\n  // Replace original with wrapper\n  element.parentNode?.replaceChild(wrapper, element);\n\n  // Store for reversion\n  pageState.optimizedElements.push({\n    selector,\n    description: `Element with role: ${role}`,\n    originalHTML: element.outerHTML,\n    role,\n  });\n};\n\n// Helper function: Generate a unique CSS selector for an element\nconst getUniqueSelector = (element: HTMLElement): string => {\n  if (element.id) {\n    return `#${element.id}`;\n  }\n\n  // Try using classes\n  if (element.className && typeof element.className === 'string') {\n    const classes = element.className.trim().split(/\\s+/);\n    if (classes.length > 0) {\n      const selector = `.${classes.join('.')}`;\n      if (document.querySelectorAll(selector).length === 1) {\n        return selector;\n      }\n    }\n  }\n\n  // Fallback to tag name and position\n  const sameTagElements = Array.from(document.querySelectorAll(element.tagName));\n  const index = sameTagElements.indexOf(element);\n  return `${element.tagName.toLowerCase()}:nth-of-type(${index + 1})`;\n};\n\n// Initialize the library\nconst initialize = (): void => {\n  injectActivationInstructions();\n\n  // Check if the body already has the activation attribute\n  if (document.body.getAttribute('data-wao-active') === 'true') {\n    activateOptimizer(document.body);\n  }\n\n  // Expose API globally\n  window.WAO = {\n    activateOptimizer,\n    deactivateOptimizer,\n    describeElementVisually,\n    defineInteraction,\n    isActivated,\n    describePage,\n    describeDataFlow,\n    analyzeAccessibility,\n    extractSemanticStructure,\n    highlightElementRole,\n  };\n};\n\n// Run initialization\ninitialize();\n\n// Export public API\nexport {\n  activateOptimizer,\n  deactivateOptimizer,\n  describeElementVisually,\n  defineInteraction,\n  revertElementVisuals,\n  describePage,\n  describeDataFlow,\n  analyzeAccessibility,\n  extractSemanticStructure,\n  highlightElementRole,\n};\n"],"mappings":"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