@stdbl/wao
Version:
Optimize web pages for LLM agent interaction and understanding
879 lines (861 loc) • 30.3 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/react.tsx
var react_exports = {};
__export(react_exports, {
WAODataFlow: () => WAODataFlow,
WAOElement: () => WAOElement,
WAOInspector: () => WAOInspector,
WAOPage: () => WAOPage,
WAOProvider: () => WAOProvider,
WAOToggle: () => WAOToggle,
WAOToggleShadcn: () => WAOToggleShadcn,
useWAO: () => useWAO
});
module.exports = __toCommonJS(react_exports);
var import_react = require("react");
// src/utils.ts
var logMessage = (message) => {
console.log(`LLM Optimization Library: ${message}`);
};
var createDOMComment = (message) => {
return document.createComment(message);
};
// src/core.ts
var pageState = {
originalDOM: document.body,
// Initial state
optimizedElements: [],
interactionMappings: [],
isActive: false,
pageStructure: void 0,
dataFlows: [],
accessibility: {
ariaLabels: {},
tabOrder: [],
colorContrast: {}
}
};
var injectStyles = () => {
const styleElement = document.createElement("style");
styleElement.id = "wao-styles";
styleElement.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(styleElement);
};
var injectActivationInstructions = () => {
const comment = createDOMComment(`
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(comment);
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === "data-wao-active") {
const bodyElement = document.body;
const isActive = bodyElement.getAttribute("data-wao-active") === "true";
if (isActive && !pageState.isActive) {
activateOptimizer(bodyElement);
} else if (!isActive && pageState.isActive) {
deactivateOptimizer();
}
}
});
});
observer.observe(document.body, { attributes: true });
};
var isActivated = () => {
return pageState.isActive;
};
var activateOptimizer = (domElement) => {
if (!isActivated()) {
pageState.originalDOM = domElement.cloneNode(true);
pageState.isActive = true;
document.body.setAttribute("data-wao-active", "true");
injectStyles();
addToggle();
setupEventListeners();
logMessage("Optimizer activated");
} else {
logMessage("Optimizer already active");
}
};
var deactivateOptimizer = () => {
if (pageState.isActive) {
pageState.optimizedElements.forEach(revertElementVisuals);
const styleElement = document.getElementById("wao-styles");
if (styleElement) styleElement.remove();
const toggleButton = document.querySelector(".wao-toggle");
if (toggleButton) toggleButton.remove();
document.body.removeAttribute("data-wao-active");
removeEventListeners();
pageState.optimizedElements = [];
pageState.interactionMappings = [];
pageState.isActive = false;
logMessage("Optimizer deactivated");
} else {
logMessage("Optimizer is not active");
}
};
var defineInteraction = (elementSelector, interactionType, methodName, expectedOutcome) => {
if (!isActivated()) return;
const mapping = {
elementSelector,
interactionType,
methodName,
expectedOutcome
};
pageState.interactionMappings.push(mapping);
const element = document.querySelector(elementSelector);
if (element) {
const optimizedElement = element.closest(".wao-optimized-element");
if (optimizedElement) {
let interactionElement = optimizedElement.querySelector(".wao-interaction");
if (!interactionElement) {
interactionElement = document.createElement("div");
interactionElement.className = "wao-interaction";
optimizedElement.appendChild(interactionElement);
}
const interactionText = `${interactionType} \u2192 ${methodName}`;
interactionElement.textContent += interactionText + (expectedOutcome ? ` (${expectedOutcome})` : "") + " ";
}
}
};
var handleInteraction = (event) => {
const target = event.target;
pageState.interactionMappings.forEach((mapping) => {
const matchedElement = target.closest(mapping.elementSelector);
if (matchedElement && mapping.interactionType === event.type) {
logMessage(`Interaction triggered: ${mapping.methodName} on ${mapping.elementSelector}`);
const method = window[mapping.methodName];
if (typeof method === "function") {
try {
method(matchedElement);
} catch (error) {
logMessage(`Error executing method ${mapping.methodName}: ${error}`);
}
}
}
});
};
var addToggle = () => {
const existingButton = document.querySelector(".wao-toggle");
if (existingButton) existingButton.remove();
const toggleButton = document.createElement("button");
toggleButton.className = "wao-toggle";
toggleButton.textContent = pageState.isActive ? "Deactivate Optimization" : "Activate Optimization";
toggleButton.addEventListener("click", () => {
if (pageState.isActive) {
deactivateOptimizer();
} else {
activateOptimizer(document.body);
}
toggleButton.textContent = pageState.isActive ? "Deactivate Optimization" : "Activate Optimization";
});
document.body.appendChild(toggleButton);
};
var setupEventListeners = () => {
document.addEventListener("click", handleInteraction);
document.addEventListener("mouseover", handleInteraction);
document.addEventListener("focus", handleInteraction, true);
};
var removeEventListeners = () => {
document.removeEventListener("click", handleInteraction);
document.removeEventListener("mouseover", handleInteraction);
document.removeEventListener("focus", handleInteraction, true);
};
var describeElementVisually = (selector, description, elementType, options) => {
if (!isActivated()) return;
const element = document.querySelector(selector);
if (!element) {
logMessage(`Element not found: ${selector}`);
return;
}
if (element.closest(".wao-optimized-element")) {
logMessage(`Element already optimized: ${selector}`);
return;
}
const wrapper = document.createElement("div");
wrapper.className = "wao-optimized-element";
wrapper.setAttribute("data-original-selector", selector);
if (options?.importance) {
wrapper.classList.add(`wao-importance-${options.importance}`);
}
const descriptionElement = document.createElement("div");
descriptionElement.className = "wao-description";
descriptionElement.textContent = description;
if (options?.dataContext) {
const dataContextEl = document.createElement("div");
dataContextEl.style.fontSize = "12px";
dataContextEl.style.fontStyle = "italic";
dataContextEl.textContent = `Data: ${options.dataContext}`;
descriptionElement.appendChild(dataContextEl);
}
const tagElement = document.createElement("span");
tagElement.className = "wao-tag";
tagElement.textContent = `<${elementType}>`;
if (options?.role) {
const roleElement = document.createElement("span");
roleElement.className = "wao-role";
roleElement.textContent = options.role;
wrapper.appendChild(roleElement);
}
wrapper.appendChild(tagElement);
wrapper.appendChild(descriptionElement);
element.parentNode?.replaceChild(wrapper, element);
pageState.optimizedElements.push({
selector,
description,
originalHTML: element.outerHTML,
role: options?.role,
importance: options?.importance,
dataContext: options?.dataContext
});
};
var revertElementVisuals = (elementDescription) => {
const optimizedElement = document.querySelector(
`.wao-optimized-element[data-original-selector="${elementDescription.selector}"]`
);
if (optimizedElement) {
const tempContainer = document.createElement("div");
if (elementDescription.originalHTML) {
tempContainer.innerHTML = elementDescription.originalHTML;
const originalElement = tempContainer.firstElementChild;
if (originalElement) {
optimizedElement.parentNode?.replaceChild(originalElement, optimizedElement);
}
}
}
};
var describePage = (pageInfo) => {
if (!isActivated()) return;
pageState.pageStructure = {
...pageState.pageStructure,
...pageInfo
};
let structureEl = document.querySelector(".wao-page-structure");
if (!structureEl) {
structureEl = document.createElement("div");
structureEl.className = "wao-page-structure";
document.body.appendChild(structureEl);
}
let structureHTML = "<h3>Page Structure</h3>";
if (pageInfo.title) {
structureHTML += `<div><strong>Title:</strong> ${pageInfo.title}</div>`;
}
if (pageInfo.mainContent) {
structureHTML += `<div><strong>Main:</strong> ${pageInfo.mainContent}</div>`;
const mainEl = document.querySelector(pageInfo.mainContent);
if (mainEl && !mainEl.classList.contains("wao-optimized-element")) {
mainEl.setAttribute("data-wao-role", "main-content");
mainEl.setAttribute("style", "border: 2px dashed #3498db !important; padding: 8px;");
}
}
if (pageInfo.navigation) {
structureHTML += `<div><strong>Navigation:</strong></div><ul>`;
const navItems = Array.isArray(pageInfo.navigation) ? pageInfo.navigation : [pageInfo.navigation];
navItems.forEach((nav) => {
structureHTML += `<li>${nav}</li>`;
const navEl = document.querySelector(nav);
if (navEl && !navEl.classList.contains("wao-optimized-element")) {
navEl.setAttribute("data-wao-role", "navigation");
navEl.setAttribute("style", "border: 2px dashed #2ecc71 !important; padding: 4px;");
}
});
structureHTML += `</ul>`;
}
if (pageInfo.sidebar) {
structureHTML += `<div><strong>Sidebars:</strong></div><ul>`;
const sidebarItems = Array.isArray(pageInfo.sidebar) ? pageInfo.sidebar : [pageInfo.sidebar];
sidebarItems.forEach((side) => {
structureHTML += `<li>${side}</li>`;
const sideEl = document.querySelector(side);
if (sideEl && !sideEl.classList.contains("wao-optimized-element")) {
sideEl.setAttribute("data-wao-role", "sidebar");
sideEl.setAttribute("style", "border: 2px dashed #f39c12 !important; padding: 4px;");
}
});
structureHTML += `</ul>`;
}
if (pageInfo.footer) {
structureHTML += `<div><strong>Footer:</strong> ${pageInfo.footer}</div>`;
const footerEl = document.querySelector(pageInfo.footer);
if (footerEl && !footerEl.classList.contains("wao-optimized-element")) {
footerEl.setAttribute("data-wao-role", "footer");
footerEl.setAttribute("style", "border: 2px dashed #9b59b6 !important; padding: 4px;");
}
}
structureEl.innerHTML = structureHTML;
};
var describeDataFlow = (flow) => {
if (!isActivated()) return;
if (!pageState.dataFlows) {
pageState.dataFlows = [];
}
pageState.dataFlows.push(flow);
const sourceEl = document.querySelector(flow.source);
const destEl = document.querySelector(flow.destination);
if (sourceEl && destEl) {
const flowContainer = document.createElement("div");
flowContainer.className = "wao-data-flow";
flowContainer.setAttribute("data-description", flow.description ?? "");
flowContainer.innerHTML = `
<div><strong>From:</strong> ${flow.source} (${flow.dataType})</div>
<div style="text-align: center;">\u2193</div>
<div><strong>To:</strong> ${flow.destination}</div>
`;
destEl.parentNode?.insertBefore(flowContainer, destEl.nextSibling);
}
};
var analyzeAccessibility = () => {
if (!isActivated()) return;
const accessibilityInfo = {
ariaLabels: {},
tabOrder: [],
colorContrast: {}
};
const interactiveElements = document.querySelectorAll(
'button, a, input, select, textarea, [role="button"], [tabindex]'
);
interactiveElements.forEach((element) => {
const elemNode = element;
const selector = getUniqueSelector(elemNode);
const ariaLabel = elemNode.getAttribute("aria-label");
const ariaLabelledBy = elemNode.getAttribute("aria-labelledby");
if (!ariaLabel && !ariaLabelledBy && elemNode.tagName !== "INPUT") {
elemNode.classList.add("wao-accessibility-issue");
accessibilityInfo.colorContrast[selector] = "Missing ARIA label";
}
if (ariaLabel) {
accessibilityInfo.ariaLabels[selector] = ariaLabel;
}
if (elemNode.tabIndex >= 0 || elemNode.tagName === "A" || elemNode.tagName === "BUTTON" || elemNode.tagName === "INPUT" || elemNode.tagName === "SELECT" || elemNode.tagName === "TEXTAREA") {
accessibilityInfo.tabOrder.push(selector);
}
});
pageState.accessibility = accessibilityInfo;
let accessibilityEl = document.querySelector(".wao-accessibility-report");
if (!accessibilityEl) {
accessibilityEl = document.createElement("div");
accessibilityEl.className = "wao-accessibility-report";
accessibilityEl.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(accessibilityEl);
}
let reportHTML = "<h3>Accessibility Report</h3>";
reportHTML += `<div><strong>Tab Order (${accessibilityInfo.tabOrder.length} elements):</strong></div><ol>`;
accessibilityInfo.tabOrder.slice(0, 10).forEach((selector) => {
reportHTML += `<li>${selector}</li>`;
});
if (accessibilityInfo.tabOrder.length > 10) {
reportHTML += `<li>... and ${accessibilityInfo.tabOrder.length - 10} more</li>`;
}
reportHTML += `</ol>`;
const issueCount = Object.keys(accessibilityInfo.colorContrast).length;
reportHTML += `<div><strong>Issues (${issueCount}):</strong></div>`;
if (issueCount > 0) {
reportHTML += `<ul>`;
Object.entries(accessibilityInfo.colorContrast).slice(0, 5).forEach(([selector, issue]) => {
reportHTML += `<li>${selector}: ${issue}</li>`;
});
if (issueCount > 5) {
reportHTML += `<li>... and ${issueCount - 5} more</li>`;
}
reportHTML += `</ul>`;
}
accessibilityEl.innerHTML = reportHTML;
};
var extractSemanticStructure = () => {
if (!isActivated()) return;
const pageInfo = {
title: document.title,
navigation: [],
sidebar: []
};
const mainContent = document.querySelector("main") || document.querySelector('[role="main"]') || document.querySelector("#main");
if (mainContent) {
pageInfo.mainContent = getUniqueSelector(mainContent);
}
const navElements = document.querySelectorAll(
'nav, [role="navigation"], header ul, .nav, .navbar'
);
navElements.forEach((nav) => {
if (Array.isArray(pageInfo.navigation)) {
pageInfo.navigation.push(getUniqueSelector(nav));
}
});
const footer = document.querySelector("footer") || document.querySelector(".footer") || document.querySelector("#footer");
if (footer) {
pageInfo.footer = getUniqueSelector(footer);
}
const sidebars = document.querySelectorAll('aside, .sidebar, [role="complementary"]');
sidebars.forEach((sidebar) => {
if (Array.isArray(pageInfo.sidebar)) {
pageInfo.sidebar.push(getUniqueSelector(sidebar));
}
});
describePage(pageInfo);
const headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
headings.forEach((heading) => {
const level = parseInt(heading.tagName.charAt(1));
const text = heading.textContent || "";
const selector = getUniqueSelector(heading);
describeElementVisually(selector, `Heading: ${text}`, heading.tagName.toLowerCase(), {
role: "heading-level-" + level,
importance: level <= 2 ? "primary" : level <= 4 ? "secondary" : "tertiary"
});
});
};
var highlightElementRole = (selector, role) => {
if (!isActivated()) return;
const element = document.querySelector(selector);
if (!element) {
logMessage(`Element not found: ${selector}`);
return;
}
const optimizedElement = element.closest(".wao-optimized-element");
if (optimizedElement) {
let roleElement2 = optimizedElement.querySelector(".wao-role");
if (!roleElement2) {
roleElement2 = document.createElement("span");
roleElement2.className = "wao-role";
optimizedElement.appendChild(roleElement2);
}
roleElement2.textContent = role;
return;
}
const wrapper = document.createElement("div");
wrapper.className = "wao-optimized-element";
wrapper.setAttribute("data-original-selector", selector);
const roleElement = document.createElement("span");
roleElement.className = "wao-role";
roleElement.textContent = role;
const clonedElement = element.cloneNode(true);
wrapper.appendChild(roleElement);
wrapper.appendChild(clonedElement);
element.parentNode?.replaceChild(wrapper, element);
pageState.optimizedElements.push({
selector,
description: `Element with role: ${role}`,
originalHTML: element.outerHTML,
role
});
};
var getUniqueSelector = (element) => {
if (element.id) {
return `#${element.id}`;
}
if (element.className && typeof element.className === "string") {
const classes = element.className.trim().split(/\s+/);
if (classes.length > 0) {
const selector = `.${classes.join(".")}`;
if (document.querySelectorAll(selector).length === 1) {
return selector;
}
}
}
const sameTagElements = Array.from(document.querySelectorAll(element.tagName));
const index = sameTagElements.indexOf(element);
return `${element.tagName.toLowerCase()}:nth-of-type(${index + 1})`;
};
var initialize = () => {
injectActivationInstructions();
if (document.body.getAttribute("data-wao-active") === "true") {
activateOptimizer(document.body);
}
window.WAO = {
activateOptimizer,
deactivateOptimizer,
describeElementVisually,
defineInteraction,
isActivated,
describePage,
describeDataFlow,
analyzeAccessibility,
extractSemanticStructure,
highlightElementRole
};
};
initialize();
// src/react.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var useWAO = (autoActivate = false) => {
const [isActive, setIsActive] = (0, import_react.useState)(isActivated());
(0, import_react.useEffect)(() => {
setIsActive(isActivated());
if (autoActivate && !isActivated()) {
activateOptimizer(document.body);
setIsActive(true);
}
return () => {
};
}, [autoActivate]);
const activate = () => {
activateOptimizer(document.body);
setIsActive(true);
};
const deactivate = () => {
deactivateOptimizer();
setIsActive(false);
};
return {
isActive,
activate,
deactivate,
describeElement: describeElementVisually,
defineInteraction,
describePage,
describeDataFlow,
analyzeAccessibility,
extractStructure: extractSemanticStructure,
highlightRole: highlightElementRole
};
};
var WAOProvider = ({ children, autoActivate = false }) => {
const { isActive, activate } = useWAO(autoActivate);
(0, import_react.useEffect)(() => {
if (autoActivate && !isActive) {
activate();
}
}, [autoActivate, isActive, activate]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
};
var WAOElement = ({
selector,
description,
elementType,
role,
importance,
dataContext,
interactions = [],
children
}) => {
const { isActive, describeElement, defineInteraction: defineInteraction2 } = useWAO();
(0, import_react.useEffect)(() => {
if (isActive) {
describeElement(selector, description, elementType, {
role,
importance,
dataContext
});
interactions.forEach((interaction) => {
defineInteraction2(
selector,
interaction.type,
interaction.method,
interaction.expectedOutcome
);
});
}
}, [
isActive,
selector,
description,
elementType,
role,
importance,
dataContext,
interactions,
describeElement,
defineInteraction2
]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
};
var WAOToggle = ({
className,
style,
variant = "default",
size = "default",
position = "bottom-right"
}) => {
const { isActive, activate, deactivate } = useWAO();
const positionClasses = {
"bottom-right": "fixed bottom-5 right-5",
"bottom-left": "fixed bottom-5 left-5",
"top-right": "fixed top-5 right-5",
"top-left": "fixed top-5 left-5",
custom: ""
// No position classes for custom positioning
};
const getVariantClasses = () => {
if (isActive) {
return variant === "default" ? "bg-blue-500 hover:bg-blue-600 text-white" : variant === "destructive" ? "bg-red-500 hover:bg-red-600 text-white" : variant === "outline" ? "border border-blue-500 text-blue-500 hover:bg-blue-50" : variant === "secondary" ? "bg-gray-200 hover:bg-gray-300 text-gray-800" : variant === "ghost" ? "hover:bg-blue-50 text-blue-500" : variant === "link" ? "text-blue-500 hover:underline" : variant === "success" ? "bg-green-500 hover:bg-green-600 text-white" : "";
} else {
return "bg-gray-200 hover:bg-gray-300 text-gray-800";
}
};
const sizeClasses = {
default: "px-4 py-2 text-sm",
sm: "px-3 py-1 text-xs",
lg: "px-6 py-3 text-base",
icon: "p-2"
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"button",
{
className: `
${positionClasses[position]}
${getVariantClasses()}
${sizeClasses[size]}
rounded-md font-medium shadow transition-colors duration-200
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
z-50
${className || ""}
`,
style,
onClick: () => isActive ? deactivate() : activate(),
children: isActive ? "Deactivate Optimization" : "Activate Optimization"
}
);
};
var WAOToggleShadcn = ({
className,
variant = isActivated() ? "default" : "secondary",
size = "default",
position = "bottom-right",
buttonProps
}) => {
const { isActive, activate, deactivate } = useWAO();
const positionClasses = {
"bottom-right": "fixed bottom-5 right-5",
"bottom-left": "fixed bottom-5 left-5",
"top-right": "fixed top-5 right-5",
"top-left": "fixed top-5 left-5",
custom: ""
// No position classes for custom positioning
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"button",
{
className: `
${positionClasses[position]}
${isActive ? variant === "default" ? "bg-primary text-primary-foreground shadow hover:bg-primary/90" : variant === "destructive" ? "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90" : variant === "outline" ? "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground" : variant === "secondary" ? "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80" : variant === "ghost" ? "hover:bg-accent hover:text-accent-foreground" : variant === "link" ? "text-primary underline-offset-4 hover:underline" : variant === "success" ? "bg-green-500 text-white shadow-sm hover:bg-green-600" : "" : "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80"}
${size === "default" ? "h-9 px-4 py-2" : size === "sm" ? "h-8 rounded-md px-3 text-xs" : size === "lg" ? "h-10 rounded-md px-8" : size === "icon" ? "h-9 w-9" : ""}
inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium
transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
disabled:pointer-events-none disabled:opacity-50
z-50
${className || ""}
`,
onClick: () => isActive ? deactivate() : activate(),
...buttonProps,
children: isActive ? "Deactivate Optimization" : "Activate Optimization"
}
);
};
var WAOPage = ({ structure, children }) => {
const { isActive, describePage: describePage2 } = useWAO();
(0, import_react.useEffect)(() => {
if (isActive) {
describePage2(structure);
}
}, [isActive, structure, describePage2]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
};
var WAODataFlow = ({ flow }) => {
const { isActive, describeDataFlow: describeDataFlow2 } = useWAO();
(0, import_react.useEffect)(() => {
if (isActive) {
describeDataFlow2(flow);
}
}, [isActive, flow, describeDataFlow2]);
return null;
};
var WAOInspector = ({ autoAnalyze = false }) => {
const { isActive, analyzeAccessibility: analyzeAccessibility2, extractStructure } = useWAO();
(0, import_react.useEffect)(() => {
if (isActive && autoAnalyze) {
analyzeAccessibility2();
extractStructure();
}
}, [isActive, autoAnalyze, analyzeAccessibility2, extractStructure]);
if (!isActive) return null;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "fixed top-5 right-5 z-50 flex gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"button",
{
onClick: analyzeAccessibility2,
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",
children: "Analyze Accessibility"
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"button",
{
onClick: extractStructure,
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",
children: "Analyze Structure"
}
)
] });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
WAODataFlow,
WAOElement,
WAOInspector,
WAOPage,
WAOProvider,
WAOToggle,
WAOToggleShadcn,
useWAO
});
//# sourceMappingURL=react.js.map