@cgaspard/webappmcp 0.1.0

package/README.md

@@ -0,0 +1,213 @@
+# @cgaspard/webappmcp
+
+WebApp MCP (Model Context Protocol) - A comprehensive toolkit for enabling AI assistants to interact with web applications through DOM inspection, user interaction simulation, and state management.
+
+## Installation
+
+```bash
+npm install @cgaspard/webappmcp
+```
+
+For global CLI usage:
+```bash
+npm install -g @cgaspard/webappmcp
+```
+
+## Quick Start
+
+### Express Middleware
+
+```javascript
+import express from 'express';
+import { webappMCP } from '@cgaspard/webappmcp';
+
+const app = express();
+
+// Add WebApp MCP middleware
+app.use(webappMCP({
+  transport: 'sse',
+  mcpPort: 3100,
+  wsPort: 3101,
+  cors: {
+    origin: true,
+    credentials: true
+  }
+}));
+
+app.listen(3000, () => {
+  console.log('Server running on port 3000');
+  console.log('MCP SSE endpoint: http://localhost:3000/mcp/sse');
+  console.log('WebSocket server: ws://localhost:3101');
+});
+```
+
+### Browser Client
+
+#### ES Modules
+```javascript
+import { WebAppMCPClient } from '@cgaspard/webappmcp';
+
+const client = new WebAppMCPClient({
+  serverUrl: 'ws://localhost:3101',
+  autoConnect: true
+});
+
+client.connect();
+```
+
+#### Script Tag
+```html
+<script src="https://unpkg.com/@cgaspard/webappmcp/dist/browser.min.js"></script>
+<script>
+  const client = new WebAppMCP.WebAppMCPClient({
+    serverUrl: 'ws://localhost:3101',
+    autoConnect: true
+  });
+  
+  client.connect();
+</script>
+```
+
+### Standalone Server
+
+```bash
+# Run the standalone MCP server
+webappmcp-server --port 3100 --ws-port 3101
+```
+
+## Features
+
+### MCP Tools Available
+
+- **DOM Operations**
+  - `dom_query` - Find elements using CSS selectors
+  - `dom_get_properties` - Get element properties and attributes
+  - `dom_get_text` - Extract text content
+  - `dom_get_html` - Get HTML structure
+  - `dom_manipulate` - Modify DOM elements
+
+- **User Interactions**
+  - `interaction_click` - Click on elements
+  - `interaction_type` - Type text into inputs
+  - `interaction_scroll` - Scroll page or elements
+  - `interaction_hover` - Hover over elements
+
+- **State Management**
+  - `state_get_variable` - Access JavaScript variables
+  - `state_local_storage` - Read/write localStorage
+  - `console_get_logs` - Retrieve console logs
+
+- **Visual Capture**
+  - `capture_screenshot` - Take full page screenshots
+  - `capture_element_screenshot` - Capture specific elements
+
+- **Diagnostic Tools**
+  - `webapp_list_clients` - List connected browser clients
+  - `javascript_inject` - Execute JavaScript code
+  - `execute_javascript` - Execute JavaScript with async support
+
+## Framework Integration
+
+### React
+```jsx
+import { useEffect } from 'react';
+import { WebAppMCPClient } from '@cgaspard/webappmcp';
+
+function App() {
+  useEffect(() => {
+    const client = new WebAppMCPClient({
+      serverUrl: 'ws://localhost:3101',
+      autoConnect: true
+    });
+    
+    client.connect();
+    
+    return () => client.disconnect();
+  }, []);
+  
+  return <div>Your React App</div>;
+}
+```
+
+### Vue
+```javascript
+import { WebAppMCPClient } from '@cgaspard/webappmcp';
+
+export default {
+  mounted() {
+    this.mcpClient = new WebAppMCPClient({
+      serverUrl: 'ws://localhost:3101',
+      autoConnect: true
+    });
+    
+    this.mcpClient.connect();
+  },
+  
+  beforeUnmount() {
+    if (this.mcpClient) {
+      this.mcpClient.disconnect();
+    }
+  }
+}
+```
+
+## Configuration
+
+### Middleware Options
+```javascript
+{
+  transport: 'sse',          // 'sse', 'stdio', 'socket', 'none'
+  mcpPort: 3100,            // MCP server port
+  wsPort: 3101,             // WebSocket server port
+  cors: {                   // CORS configuration
+    origin: true,
+    credentials: true
+  },
+  authentication: {         // Optional auth
+    enabled: false,
+    token: 'your-token'
+  }
+}
+```
+
+### Client Options
+```javascript
+{
+  serverUrl: 'ws://localhost:3101',    // WebSocket URL
+  autoConnect: true,                   // Auto-connect on init
+  reconnect: true,                     // Auto-reconnect
+  reconnectInterval: 5000,             // Reconnect interval (ms)
+  maxReconnectAttempts: 10,           // Max reconnect attempts
+  enableDevTools: false,               // Show DevTools overlay
+  debug: false                         // Enable debug logging
+}
+```
+
+## Claude CLI Configuration
+
+Add to your Claude CLI configuration:
+
+```json
+{
+  "mcpServers": {
+    "webapp-sse": {
+      "transport": {
+        "type": "sse",
+        "url": "http://localhost:3000/mcp/sse"
+      }
+    }
+  }
+}
+```
+
+## Examples
+
+See the `examples` directory for complete working examples with:
+- Basic Express integration
+- Todo app with vanilla JavaScript
+- React Todo app
+- Vue.js Todo app
+
+## License
+
+MIT

package/dist/browser.d.ts

@@ -0,0 +1,3 @@
+import WebAppMCPClient from './client/index';
+export { WebAppMCPClient };
+//# sourceMappingURL=browser.d.ts.map

package/dist/browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../src/browser.ts"],"names":[],"mappings":"AACA,OAAO,eAAe,MAAM,gBAAgB,CAAC;AAG7C,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/browser.js

@@ -0,0 +1,20 @@
+(function (factory) {
+    typeof define === 'function' && define.amd ? define(factory) :
+    factory();
+})((function () { 'use strict';
+
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.WebAppMCPClient = void 0;
+    const tslib_1 = require("tslib");
+    // Browser-only exports
+    const index_1 = tslib_1.__importDefault(require("./client/index"));
+    exports.WebAppMCPClient = index_1.default;
+    // Also attach to window for script tag usage
+    if (typeof window !== 'undefined') {
+        window.WebAppMCP = {
+            WebAppMCPClient: index_1.default
+        };
+    }
+
+}));
+//# sourceMappingURL=browser.js.map

package/dist/browser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.js","sources":["../src/browser.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;IAAA;IACA,MAAA,OAAA,GAAA,OAAA,CAAA,eAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,CAAA;IAGS,OAAA,CAAA,eAAA,GAHF,eAAe;IAKtB;IACA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;QAChC,MAAc,CAAC,SAAS,GAAG;IAC1B,QAAA,eAAe,EAAf,OAAA,CAAA;SACD;IACH;;;;;;"}

package/dist/browser.min.js

@@ -0,0 +1,2 @@
+!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.WebAppMCPClient=void 0;const e=require("tslib").__importDefault(require("./client/index"));exports.WebAppMCPClient=e.default,"undefined"!=typeof window&&(window.WebAppMCP={WebAppMCPClient:e.default})});
+//# sourceMappingURL=browser.min.js.map

package/dist/browser.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.min.js","sources":["../src/browser.ts"],"sourcesContent":[null],"names":["index_1","__importDefault","require","exports","WebAppMCPClient","window","WebAppMCP","default"],"mappings":"sLACAA,mBAAAC,gBAAAC,QAAA,mBAGSC,QAAAC,gBAHFJ,UAMe,oBAAXK,SACRA,OAAeC,UAAY,CAC1BF,gBAAAJ,EAAAO"}

package/dist/client/devtools.d.ts

@@ -0,0 +1,28 @@
+export interface MCPLog {
+    timestamp: string;
+    level: 'info' | 'warning' | 'error';
+    source: 'websocket' | 'mcp' | 'client';
+    message: string;
+    data?: any;
+}
+export declare class MCPDevTools {
+    private container;
+    private isExpanded;
+    private logs;
+    private maxLogs;
+    private connectionStatus;
+    constructor();
+    private createDevToolsUI;
+    private addStyles;
+    private setupEventListeners;
+    private togglePanel;
+    setConnectionStatus(status: 'connected' | 'connecting' | 'disconnected'): void;
+    addLog(level: 'info' | 'warning' | 'error', source: 'websocket' | 'mcp' | 'client', message: string, data?: any): void;
+    private renderLogs;
+    private safeStringify;
+    private clearLogs;
+    logWebSocketEvent(event: string, data?: any): void;
+    logMCPEvent(event: string, data?: any): void;
+    logError(source: 'websocket' | 'mcp' | 'client', message: string, error?: any): void;
+}
+//# sourceMappingURL=devtools.d.ts.map

package/dist/client/devtools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.d.ts","sourceRoot":"","sources":["../../src/client/devtools.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACpC,MAAM,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ;AAED,qBAAa,WAAW;IACtB,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,IAAI,CAAgB;IAC5B,OAAO,CAAC,OAAO,CAAO;IACtB,OAAO,CAAC,gBAAgB,CAA+D;;IAOvF,OAAO,CAAC,gBAAgB;IAuCxB,OAAO,CAAC,SAAS;IAsMjB,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,WAAW;IAQZ,mBAAmB,CAAC,MAAM,EAAE,WAAW,GAAG,YAAY,GAAG,cAAc;IAmBvE,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,EAAE,MAAM,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG;IAkBtH,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,aAAa;IA2BrB,OAAO,CAAC,SAAS;IAKV,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG;IAI3C,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG;IAIrC,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG;CAGrF"}

package/dist/client/devtools.js

@@ -0,0 +1,347 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MCPDevTools = void 0;
+class MCPDevTools {
+    constructor() {
+        this.container = null;
+        this.isExpanded = false;
+        this.logs = [];
+        this.maxLogs = 100;
+        this.connectionStatus = 'disconnected';
+        this.createDevToolsUI();
+        this.setupEventListeners();
+    }
+    createDevToolsUI() {
+        this.container = document.createElement('div');
+        this.container.id = 'mcp-devtools';
+        this.container.innerHTML = `
+      <div class="mcp-devtools-indicator" id="mcp-indicator">
+        <div class="mcp-status-dot" id="mcp-status-dot"></div>
+        <span class="mcp-label">MCP</span>
+      </div>
+      <div class="mcp-devtools-panel" id="mcp-panel" style="display: none;">
+        <div class="mcp-devtools-header">
+          <span>MCP DevTools</span>
+          <button class="mcp-close-btn" id="mcp-close-btn">×</button>
+        </div>
+        <div class="mcp-devtools-content">
+          <div class="mcp-status-section">
+            <div class="mcp-status-item">
+              <label>WebSocket:</label>
+              <span id="mcp-ws-status">Disconnected</span>
+            </div>
+            <div class="mcp-status-item">
+              <label>MCP Server:</label>
+              <span id="mcp-server-status">Disconnected</span>
+            </div>
+          </div>
+          <div class="mcp-logs-section">
+            <div class="mcp-logs-header">
+              <span>Console Logs</span>
+              <button class="mcp-clear-btn" id="mcp-clear-btn">Clear</button>
+            </div>
+            <div class="mcp-logs-container" id="mcp-logs"></div>
+          </div>
+        </div>
+      </div>
+    `;
+        this.addStyles();
+        document.body.appendChild(this.container);
+    }
+    addStyles() {
+        const style = document.createElement('style');
+        style.textContent = `
+      #mcp-devtools {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 10000;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      }
+
+      .mcp-devtools-indicator {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 8px;
+        background: rgba(255, 255, 255, 0.9);
+        border-radius: 4px;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      .mcp-label {
+        font-size: 10px;
+        font-weight: 600;
+        color: #495057;
+        user-select: none;
+      }
+
+      .mcp-status-dot {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background-color: #dc3545;
+        border: 2px solid rgba(255, 255, 255, 0.8);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        transition: background-color 0.3s ease;
+      }
+
+      .mcp-status-dot.connecting {
+        background-color: #ffc107;
+        animation: pulse 1.5s infinite;
+      }
+
+      .mcp-status-dot.connected {
+        background-color: #28a745;
+      }
+
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+
+      .mcp-devtools-panel {
+        position: absolute;
+        bottom: 30px;
+        right: 0;
+        width: 400px;
+        height: 300px;
+        background: white;
+        border: 1px solid #e0e0e0;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .mcp-devtools-header {
+        padding: 12px 16px;
+        background: #f8f9fa;
+        border-bottom: 1px solid #e0e0e0;
+        border-radius: 8px 8px 0 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: 600;
+        font-size: 14px;
+      }
+
+      .mcp-close-btn {
+        background: none;
+        border: none;
+        font-size: 18px;
+        cursor: pointer;
+        color: #6c757d;
+        padding: 0;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .mcp-close-btn:hover {
+        color: #495057;
+      }
+
+      .mcp-devtools-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .mcp-status-section {
+        padding: 12px 16px;
+        border-bottom: 1px solid #e0e0e0;
+        background: #f8f9fa;
+      }
+
+      .mcp-status-item {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 4px;
+        font-size: 12px;
+      }
+
+      .mcp-status-item label {
+        font-weight: 500;
+        color: #495057;
+      }
+
+      .mcp-status-item span {
+        color: #6c757d;
+      }
+
+      .mcp-logs-section {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .mcp-logs-header {
+        padding: 8px 16px;
+        background: #f8f9fa;
+        border-bottom: 1px solid #e0e0e0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .mcp-clear-btn {
+        background: none;
+        border: 1px solid #dee2e6;
+        border-radius: 4px;
+        padding: 2px 8px;
+        font-size: 11px;
+        cursor: pointer;
+        color: #6c757d;
+      }
+
+      .mcp-clear-btn:hover {
+        background: #e9ecef;
+      }
+
+      .mcp-logs-container {
+        flex: 1;
+        overflow-y: auto;
+        padding: 8px;
+        font-size: 11px;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+      }
+
+      .mcp-log-entry {
+        margin-bottom: 4px;
+        padding: 4px 8px;
+        border-radius: 4px;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      .mcp-log-entry.info {
+        background: #e7f3ff;
+        color: #0c5460;
+      }
+
+      .mcp-log-entry.warning {
+        background: #fff3cd;
+        color: #856404;
+      }
+
+      .mcp-log-entry.error {
+        background: #f8d7da;
+        color: #721c24;
+      }
+
+      .mcp-log-timestamp {
+        color: #6c757d;
+        font-size: 10px;
+      }
+    `;
+        document.head.appendChild(style);
+    }
+    setupEventListeners() {
+        const indicator = this.container?.querySelector('#mcp-indicator');
+        const closeBtn = this.container?.querySelector('#mcp-close-btn');
+        const clearBtn = this.container?.querySelector('#mcp-clear-btn');
+        indicator?.addEventListener('click', () => this.togglePanel());
+        closeBtn?.addEventListener('click', () => this.togglePanel());
+        clearBtn?.addEventListener('click', () => this.clearLogs());
+    }
+    togglePanel() {
+        this.isExpanded = !this.isExpanded;
+        const panel = this.container?.querySelector('#mcp-panel');
+        if (panel) {
+            panel.style.display = this.isExpanded ? 'flex' : 'none';
+        }
+    }
+    setConnectionStatus(status) {
+        this.connectionStatus = status;
+        const dot = this.container?.querySelector('#mcp-status-dot');
+        const wsStatus = this.container?.querySelector('#mcp-ws-status');
+        const serverStatus = this.container?.querySelector('#mcp-server-status');
+        if (dot) {
+            dot.className = `mcp-status-dot ${status}`;
+        }
+        if (wsStatus && serverStatus) {
+            const statusText = status.charAt(0).toUpperCase() + status.slice(1);
+            wsStatus.textContent = statusText;
+            serverStatus.textContent = statusText;
+        }
+        this.addLog('info', 'client', `Connection status: ${status}`);
+    }
+    addLog(level, source, message, data) {
+        const log = {
+            timestamp: new Date().toISOString(),
+            level,
+            source,
+            message,
+            data
+        };
+        this.logs.push(log);
+        if (this.logs.length > this.maxLogs) {
+            this.logs = this.logs.slice(-this.maxLogs);
+        }
+        this.renderLogs();
+    }
+    renderLogs() {
+        const logsContainer = this.container?.querySelector('#mcp-logs');
+        if (!logsContainer)
+            return;
+        logsContainer.innerHTML = this.logs.map(log => {
+            const time = new Date(log.timestamp).toLocaleTimeString();
+            const dataStr = log.data ? ` ${this.safeStringify(log.data)}` : '';
+            return `
+        <div class="mcp-log-entry ${log.level}">
+          <span class="mcp-log-timestamp">[${time}]</span> [${log.source.toUpperCase()}] ${log.message}${dataStr}
+        </div>
+      `;
+        }).join('');
+        logsContainer.scrollTop = logsContainer.scrollHeight;
+    }
+    safeStringify(obj) {
+        try {
+            // Handle simple types
+            if (obj === null || obj === undefined) {
+                return String(obj);
+            }
+            if (typeof obj === 'string' || typeof obj === 'number' || typeof obj === 'boolean') {
+                return String(obj);
+            }
+            // Handle arrays and objects with circular reference protection
+            const seen = new Set();
+            return JSON.stringify(obj, (key, value) => {
+                if (typeof value === 'object' && value !== null) {
+                    if (seen.has(value)) {
+                        return '[Circular Reference]';
+                    }
+                    seen.add(value);
+                }
+                return value;
+            });
+        }
+        catch (error) {
+            return `[Error stringifying: ${error instanceof Error ? error.message : 'Unknown error'}]`;
+        }
+    }
+    clearLogs() {
+        this.logs = [];
+        this.renderLogs();
+    }
+    logWebSocketEvent(event, data) {
+        this.addLog('info', 'websocket', event, data);
+    }
+    logMCPEvent(event, data) {
+        this.addLog('info', 'mcp', event, data);
+    }
+    logError(source, message, error) {
+        this.addLog('error', source, message, error);
+    }
+}
+exports.MCPDevTools = MCPDevTools;
+//# sourceMappingURL=devtools.js.map

package/dist/client/devtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.js","sourceRoot":"","sources":["../../src/client/devtools.ts"],"names":[],"mappings":"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"}

package/dist/client/index.d.ts

@@ -0,0 +1,47 @@
+interface WebAppMCPClientConfig {
+    serverUrl: string;
+    authToken?: string;
+    reconnectInterval?: number;
+    maxReconnectAttempts?: number;
+    enableDevTools?: boolean;
+}
+declare class WebAppMCPClient {
+    private ws;
+    private config;
+    private reconnectAttempts;
+    private reconnectTimer;
+    private messageHandlers;
+    private consoleLogs;
+    private _isConnected;
+    private devTools;
+    get isConnected(): boolean;
+    constructor(config: WebAppMCPClientConfig);
+    connect(): void;
+    disconnect(): void;
+    private setupWebSocketHandlers;
+    private scheduleReconnect;
+    private sendMessage;
+    private handleMessage;
+    private executeToolHandler;
+    private setupConsoleInterception;
+    private domQuery;
+    private domGetProperties;
+    private domGetText;
+    private domGetHTML;
+    private interactionClick;
+    private interactionType;
+    private interactionScroll;
+    private interactionHover;
+    private captureScreenshot;
+    private captureElementScreenshot;
+    private stateGetVariable;
+    private stateLocalStorage;
+    private consoleGetLogs;
+    private domManipulate;
+    private javascriptInject;
+    private webappListClients;
+    private executeJavascript;
+}
+export { WebAppMCPClient };
+export default WebAppMCPClient;
+//# sourceMappingURL=index.d.ts.map

package/dist/client/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/client/index.ts"],"names":[],"mappings":"AAEA,UAAU,qBAAqB;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,cAAM,eAAe;IACnB,OAAO,CAAC,EAAE,CAA0B;IACpC,OAAO,CAAC,MAAM,CAAwB;IACtC,OAAO,CAAC,iBAAiB,CAAK;IAC9B,OAAO,CAAC,cAAc,CAAM;IAC5B,OAAO,CAAC,eAAe,CAA0C;IACjE,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,QAAQ,CAA4B;IAE5C,IAAI,WAAW,IAAI,OAAO,CAEzB;gBAEW,MAAM,EAAE,qBAAqB;IAezC,OAAO,IAAI,IAAI;IA+Bf,UAAU,IAAI,IAAI;IAYlB,OAAO,CAAC,sBAAsB;IAwC9B,OAAO,CAAC,iBAAiB;IAmBzB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,aAAa;YAuBP,kBAAkB;IAoFhC,OAAO,CAAC,wBAAwB;YAoClB,QAAQ;YAuBR,gBAAgB;YAoBhB,UAAU;YAeV,UAAU;YAaV,gBAAgB;YAmBhB,eAAe;YAoBf,iBAAiB;YA2BjB,gBAAgB;YA2BhB,iBAAiB;YA4CjB,wBAAwB;YA+CxB,gBAAgB;YAgBhB,iBAAiB;YA2BjB,cAAc;YAWd,aAAa;YA8Eb,gBAAgB;YA4BhB,iBAAiB;YAcjB,iBAAiB;CAqChC;AAGD,OAAO,EAAE,eAAe,EAAE,CAAC;AAG3B,eAAe,eAAe,CAAC"}