@stdbl/wao/dist/index.umd.js

Optimize web pages for LLM agent interaction and understanding

"use strict";var WAO=(()=>{var w=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var M=(e,i)=>{for(var o in i)w(e,o,{get:i[o],enumerable:!0})},N=(e,i,o,t)=>{if(i&&typeof i=="object"||typeof i=="function")for(let a of z(i))!T.call(e,a)&&a!==o&&w(e,a,{get:()=>i[a],enumerable:!(t=L(i,a))||t.enumerable});return e};var O=e=>N(w({},"__esModule",{value:!0}),e);var I={};M(I,{activateOptimizer:()=>b,analyzeAccessibility:()=>E,deactivateOptimizer:()=>v,defineInteraction:()=>h,describeDataFlow:()=>x,describeElementVisually:()=>f,describePage:()=>y,extractSemanticStructure:()=>A,highlightElementRole:()=>C,isActivated:()=>m});var u=e=>{console.log(`LLM Optimization Library: ${e}`)},S=e=>document.createComment(e);var c={originalDOM:document.body,optimizedElements:[],interactionMappings:[],isActive:!1,pageStructure:void 0,dataFlows:[],accessibility:{ariaLabels:{},tabOrder:[],colorContrast:{}}},$=()=>{let e=document.createElement("style");e.id="wao-styles",e.textContent=`
    .wao-optimized-element {
      border: 2px solid #3498db;
      padding: 8px;
      margin: 4px;
      background-color: #f8f9fa;
      border-radius: 4px;
      position: relative;
      display: block;
    }
    
    .wao-description {
      font-family: monospace;
      margin-bottom: 6px;
      color: #2c3e50;
      display: block;
    }
    
    .wao-tag {
      background-color: #3498db;
      color: white;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 12px;
      font-family: monospace;
      position: absolute;
      top: -10px;
      right: 5px;
    }
    
    .wao-interaction {
      margin-top: 6px;
      font-style: italic;
      color: #e74c3c;
      font-size: 12px;
      border-top: 1px dashed #ccc;
      padding-top: 4px;
    }
    
    .wao-toggle {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 10000;
      padding: 8px 16px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    .wao-role {
      position: absolute;
      top: -10px;
      left: 5px;
      background-color: #27ae60;
      color: white;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 12px;
      font-family: monospace;
    }
    
    .wao-importance-primary {
      border-color: #e74c3c !important;
      border-width: 3px !important;
    }
    
    .wao-importance-secondary {
      border-color: #f39c12 !important;
    }
    
    .wao-importance-tertiary {
      border-color: #95a5a6 !important;
      border-style: dashed !important;
    }
    
    .wao-data-flow {
      position: relative;
      border: 1px dashed #9b59b6;
      margin: 10px 0;
      padding: 8px;
      background-color: rgba(155, 89, 182, 0.1);
    }
    
    .wao-data-flow::before {
      content: attr(data-description);
      font-size: 12px;
      color: #9b59b6;
      position: absolute;
      top: -10px;
      left: 10px;
      background: white;
      padding: 0 5px;
    }
    
    .wao-page-structure {
      position: fixed;
      top: 20px;
      right: 20px;
      background: rgba(52, 152, 219, 0.9);
      color: white;
      padding: 10px;
      border-radius: 4px;
      font-family: monospace;
      font-size: 12px;
      z-index: 10000;
      max-width: 300px;
      max-height: 300px;
      overflow: auto;
    }
    
    body[data-wao-active="true"] {
      filter: grayscale(0.3);
      background-color: #f0f0f0 !important;
    }
    
    .wao-accessibility-issue {
      outline: 3px solid #c0392b !important;
      position: relative;
    }
    
    .wao-accessibility-issue::after {
      content: "\u26A0\uFE0F";
      position: absolute;
      top: 0;
      right: 0;
      background: #c0392b;
      color: white;
      padding: 2px;
    }
  `,document.head.appendChild(e)},q=()=>{let e=S(`
    LLM Agent Instructions:
    - To activate this optimization library, set 'data-wao-active="true"' on the body element
    - For visual descriptions, call 'window.WAO.describeElementVisually(selector, description, elementType)'
    - To map interactions, call 'window.WAO.defineInteraction(selector, interactionType, methodName)'
    - To describe page structure, call 'window.WAO.describePage(pageInfo)'
    - To analyze page semantics, call 'window.WAO.extractSemanticStructure()'
    - To describe data flows, call 'window.WAO.describeDataFlow(flow)'
    - To analyze accessibility, call 'window.WAO.analyzeAccessibility()'
    - To highlight element roles, call 'window.WAO.highlightElementRole(selector, role)'
    - To deactivate, call 'window.WAO.deactivateOptimizer()'
  `);document.body.prepend(e),new MutationObserver(o=>{o.forEach(t=>{if(t.attributeName==="data-wao-active"){let a=document.body,r=a.getAttribute("data-wao-active")==="true";r&&!c.isActive?b(a):!r&&c.isActive&&v()}})}).observe(document.body,{attributes:!0})},m=()=>c.isActive,b=e=>{m()?u("Optimizer already active"):(c.originalDOM=e.cloneNode(!0),c.isActive=!0,document.body.setAttribute("data-wao-active","true"),$(),H(),k(),u("Optimizer activated"))},v=()=>{if(c.isActive){c.optimizedElements.forEach(D);let e=document.getElementById("wao-styles");e&&e.remove();let i=document.querySelector(".wao-toggle");i&&i.remove(),document.body.removeAttribute("data-wao-active"),P(),c.optimizedElements=[],c.interactionMappings=[],c.isActive=!1,u("Optimizer deactivated")}else u("Optimizer is not active")},h=(e,i,o,t)=>{if(!m())return;let a={elementSelector:e,interactionType:i,methodName:o,expectedOutcome:t};c.interactionMappings.push(a);let r=document.querySelector(e);if(r){let n=r.closest(".wao-optimized-element");if(n){let s=n.querySelector(".wao-interaction");s||(s=document.createElement("div"),s.className="wao-interaction",n.appendChild(s));let l=`${i} \u2192 ${o}`;s.textContent+=l+(t?` (${t})`:"")+" "}}},g=e=>{let i=e.target;c.interactionMappings.forEach(o=>{let t=i.closest(o.elementSelector);if(t&&o.interactionType===e.type){u(`Interaction triggered: ${o.methodName} on ${o.elementSelector}`);let a=window[o.methodName];if(typeof a=="function")try{a(t)}catch(r){u(`Error executing method ${o.methodName}: ${r}`)}}})},H=()=>{let e=document.querySelector(".wao-toggle");e&&e.remove();let i=document.createElement("button");i.className="wao-toggle",i.textContent=c.isActive?"Deactivate Optimization":"Activate Optimization",i.addEventListener("click",()=>{c.isActive?v():b(document.body),i.textContent=c.isActive?"Deactivate Optimization":"Activate Optimization"}),document.body.appendChild(i)},k=()=>{document.addEventListener("click",g),document.addEventListener("mouseover",g),document.addEventListener("focus",g,!0)},P=()=>{document.removeEventListener("click",g),document.removeEventListener("mouseover",g),document.removeEventListener("focus",g,!0)},f=(e,i,o,t)=>{var l;if(!m())return;let a=document.querySelector(e);if(!a){u(`Element not found: ${e}`);return}if(a.closest(".wao-optimized-element")){u(`Element already optimized: ${e}`);return}let r=document.createElement("div");r.className="wao-optimized-element",r.setAttribute("data-original-selector",e),t!=null&&t.importance&&r.classList.add(`wao-importance-${t.importance}`);let n=document.createElement("div");if(n.className="wao-description",n.textContent=i,t!=null&&t.dataContext){let d=document.createElement("div");d.style.fontSize="12px",d.style.fontStyle="italic",d.textContent=`Data: ${t.dataContext}`,n.appendChild(d)}let s=document.createElement("span");if(s.className="wao-tag",s.textContent=`<${o}>`,t!=null&&t.role){let d=document.createElement("span");d.className="wao-role",d.textContent=t.role,r.appendChild(d)}r.appendChild(s),r.appendChild(n),(l=a.parentNode)==null||l.replaceChild(r,a),c.optimizedElements.push({selector:e,description:i,originalHTML:a.outerHTML,role:t==null?void 0:t.role,importance:t==null?void 0:t.importance,dataContext:t==null?void 0:t.dataContext})},D=e=>{var o;let i=document.querySelector(`.wao-optimized-element[data-original-selector="${e.selector}"]`);if(i){let t=document.createElement("div");if(e.originalHTML){t.innerHTML=e.originalHTML;let a=t.firstElementChild;a&&((o=i.parentNode)==null||o.replaceChild(a,i))}}},y=e=>{if(!m())return;c.pageStructure={...c.pageStructure,...e};let i=document.querySelector(".wao-page-structure");i||(i=document.createElement("div"),i.className="wao-page-structure",document.body.appendChild(i));let o="<h3>Page Structure</h3>";if(e.title&&(o+=`<div><strong>Title:</strong> ${e.title}</div>`),e.mainContent){o+=`<div><strong>Main:</strong> ${e.mainContent}</div>`;let t=document.querySelector(e.mainContent);t&&!t.classList.contains("wao-optimized-element")&&(t.setAttribute("data-wao-role","main-content"),t.setAttribute("style","border: 2px dashed #3498db !important; padding: 8px;"))}if(e.navigation&&(o+="<div><strong>Navigation:</strong></div><ul>",(Array.isArray(e.navigation)?e.navigation:[e.navigation]).forEach(a=>{o+=`<li>${a}</li>`;let r=document.querySelector(a);r&&!r.classList.contains("wao-optimized-element")&&(r.setAttribute("data-wao-role","navigation"),r.setAttribute("style","border: 2px dashed #2ecc71 !important; padding: 4px;"))}),o+="</ul>"),e.sidebar&&(o+="<div><strong>Sidebars:</strong></div><ul>",(Array.isArray(e.sidebar)?e.sidebar:[e.sidebar]).forEach(a=>{o+=`<li>${a}</li>`;let r=document.querySelector(a);r&&!r.classList.contains("wao-optimized-element")&&(r.setAttribute("data-wao-role","sidebar"),r.setAttribute("style","border: 2px dashed #f39c12 !important; padding: 4px;"))}),o+="</ul>"),e.footer){o+=`<div><strong>Footer:</strong> ${e.footer}</div>`;let t=document.querySelector(e.footer);t&&!t.classList.contains("wao-optimized-element")&&(t.setAttribute("data-wao-role","footer"),t.setAttribute("style","border: 2px dashed #9b59b6 !important; padding: 4px;"))}i.innerHTML=o},x=e=>{var t,a;if(!m())return;c.dataFlows||(c.dataFlows=[]),c.dataFlows.push(e);let i=document.querySelector(e.source),o=document.querySelector(e.destination);if(i&&o){let r=document.createElement("div");r.className="wao-data-flow",r.setAttribute("data-description",(t=e.description)!=null?t:""),r.innerHTML=`
      <div><strong>From:</strong> ${e.source} (${e.dataType})</div>
      <div style="text-align: center;">\u2193</div>
      <div><strong>To:</strong> ${e.destination}</div>
    `,(a=o.parentNode)==null||a.insertBefore(r,o.nextSibling)}},E=()=>{if(!m())return;let e={ariaLabels:{},tabOrder:[],colorContrast:{}};document.querySelectorAll('button, a, input, select, textarea, [role="button"], [tabindex]').forEach(r=>{let n=r,s=p(n),l=n.getAttribute("aria-label"),d=n.getAttribute("aria-labelledby");!l&&!d&&n.tagName!=="INPUT"&&(n.classList.add("wao-accessibility-issue"),e.colorContrast[s]="Missing ARIA label"),l&&(e.ariaLabels[s]=l),(n.tabIndex>=0||n.tagName==="A"||n.tagName==="BUTTON"||n.tagName==="INPUT"||n.tagName==="SELECT"||n.tagName==="TEXTAREA")&&e.tabOrder.push(s)}),c.accessibility=e;let o=document.querySelector(".wao-accessibility-report");o||(o=document.createElement("div"),o.className="wao-accessibility-report",o.setAttribute("style",`
      position: fixed;
      left: 20px;
      top: 20px;
      background: rgba(44, 62, 80, 0.9);
      color: white;
      padding: 15px;
      border-radius: 4px;
      font-family: monospace;
      z-index: 10000;
      max-width: 300px;
      max-height: 300px;
      overflow: auto;
    `),document.body.appendChild(o));let t="<h3>Accessibility Report</h3>";t+=`<div><strong>Tab Order (${e.tabOrder.length} elements):</strong></div><ol>`,e.tabOrder.slice(0,10).forEach(r=>{t+=`<li>${r}</li>`}),e.tabOrder.length>10&&(t+=`<li>... and ${e.tabOrder.length-10} more</li>`),t+="</ol>";let a=Object.keys(e.colorContrast).length;t+=`<div><strong>Issues (${a}):</strong></div>`,a>0&&(t+="<ul>",Object.entries(e.colorContrast).slice(0,5).forEach(([r,n])=>{t+=`<li>${r}: ${n}</li>`}),a>5&&(t+=`<li>... and ${a-5} more</li>`),t+="</ul>"),o.innerHTML=t},A=()=>{if(!m())return;let e={title:document.title,navigation:[],sidebar:[]},i=document.querySelector("main")||document.querySelector('[role="main"]')||document.querySelector("#main");i&&(e.mainContent=p(i)),document.querySelectorAll('nav, [role="navigation"], header ul, .nav, .navbar').forEach(n=>{Array.isArray(e.navigation)&&e.navigation.push(p(n))});let t=document.querySelector("footer")||document.querySelector(".footer")||document.querySelector("#footer");t&&(e.footer=p(t)),document.querySelectorAll('aside, .sidebar, [role="complementary"]').forEach(n=>{Array.isArray(e.sidebar)&&e.sidebar.push(p(n))}),y(e),document.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(n=>{let s=parseInt(n.tagName.charAt(1)),l=n.textContent||"",d=p(n);f(d,`Heading: ${l}`,n.tagName.toLowerCase(),{role:"heading-level-"+s,importance:s<=2?"primary":s<=4?"secondary":"tertiary"})})},C=(e,i)=>{var s;if(!m())return;let o=document.querySelector(e);if(!o){u(`Element not found: ${e}`);return}let t=o.closest(".wao-optimized-element");if(t){let l=t.querySelector(".wao-role");l||(l=document.createElement("span"),l.className="wao-role",t.appendChild(l)),l.textContent=i;return}let a=document.createElement("div");a.className="wao-optimized-element",a.setAttribute("data-original-selector",e);let r=document.createElement("span");r.className="wao-role",r.textContent=i;let n=o.cloneNode(!0);a.appendChild(r),a.appendChild(n),(s=o.parentNode)==null||s.replaceChild(a,o),c.optimizedElements.push({selector:e,description:`Element with role: ${i}`,originalHTML:o.outerHTML,role:i})},p=e=>{if(e.id)return`#${e.id}`;if(e.className&&typeof e.className=="string"){let t=e.className.trim().split(/\s+/);if(t.length>0){let a=`.${t.join(".")}`;if(document.querySelectorAll(a).length===1)return a}}let o=Array.from(document.querySelectorAll(e.tagName)).indexOf(e);return`${e.tagName.toLowerCase()}:nth-of-type(${o+1})`},F=()=>{q(),document.body.getAttribute("data-wao-active")==="true"&&b(document.body),window.WAO={activateOptimizer:b,deactivateOptimizer:v,describeElementVisually:f,defineInteraction:h,isActivated:m,describePage:y,describeDataFlow:x,analyzeAccessibility:E,extractSemanticStructure:A,highlightElementRole:C}};F();return O(I);})();
//# sourceMappingURL=index.umd.js.map