@lantos1618/better-ui 0.1.0

package/lib/aui/tools/data-tools.tsx

@@ -0,0 +1,232 @@
+import { z } from 'zod';
+import { createAITool } from '../ai-control';
+
+export const dataFetch = createAITool('data.fetch')
+  .describe('Fetch and process data from various sources')
+  .tag('data', 'fetch', 'async')
+  .input(z.object({
+    source: z.string(),
+    transform: z.enum(['json', 'text', 'csv', 'xml']).optional(),
+    cache: z.boolean().optional()
+  }))
+  .execute(async ({ input, ctx }) => {
+    const cacheKey = `data_${input.source}`;
+    
+    if (input.cache && ctx?.cache.has(cacheKey)) {
+      return ctx.cache.get(cacheKey);
+    }
+    
+    const response = await ctx!.fetch(input.source);
+    let data: any;
+    
+    switch (input.transform) {
+      case 'json':
+        data = await response.json();
+        break;
+      case 'csv':
+        const text = await response.text();
+        data = text.split('\n').map(line => line.split(','));
+        break;
+      case 'xml':
+        data = await response.text();
+        break;
+      default:
+        data = await response.text();
+    }
+    
+    if (input.cache) {
+      ctx?.cache.set(cacheKey, data);
+    }
+    
+    return { data, source: input.source, cached: false };
+  });
+
+export const dataTransform = createAITool('data.transform')
+  .describe('Transform data using various operations')
+  .tag('data', 'transform', 'utility')
+  .input(z.object({
+    data: z.any(),
+    operation: z.enum(['filter', 'map', 'reduce', 'sort', 'group']),
+    params: z.any()
+  }))
+  .execute(async ({ input }) => {
+    let result: any;
+    
+    switch (input.operation) {
+      case 'filter':
+        if (Array.isArray(input.data)) {
+          result = input.data.filter((item: any) => {
+            return Object.entries(input.params).every(([key, value]) => item[key] === value);
+          });
+        }
+        break;
+        
+      case 'map':
+        if (Array.isArray(input.data)) {
+          result = input.data.map((item: any) => {
+            const mapped: any = {};
+            Object.entries(input.params).forEach(([newKey, oldKey]) => {
+              mapped[newKey] = item[oldKey as string];
+            });
+            return mapped;
+          });
+        }
+        break;
+        
+      case 'sort':
+        if (Array.isArray(input.data)) {
+          const { field, order = 'asc' } = input.params;
+          result = [...input.data].sort((a, b) => {
+            const aVal = a[field];
+            const bVal = b[field];
+            return order === 'asc' ? (aVal > bVal ? 1 : -1) : (aVal < bVal ? 1 : -1);
+          });
+        }
+        break;
+        
+      case 'group':
+        if (Array.isArray(input.data)) {
+          const { by } = input.params;
+          result = input.data.reduce((acc: any, item: any) => {
+            const key = item[by];
+            if (!acc[key]) acc[key] = [];
+            acc[key].push(item);
+            return acc;
+          }, {});
+        }
+        break;
+        
+      default:
+        result = input.data;
+    }
+    
+    return { result, operation: input.operation };
+  });
+
+export const dataValidate = createAITool('data.validate')
+  .describe('Validate data against a schema')
+  .tag('data', 'validation', 'utility')
+  .input(z.object({
+    data: z.any(),
+    schema: z.any(),
+    strict: z.boolean().optional()
+  }))
+  .execute(async ({ input }) => {
+    try {
+      const validated = input.schema.parse(input.data);
+      return { valid: true, data: validated, errors: [] };
+    } catch (error: any) {
+      return { 
+        valid: false, 
+        data: input.data,
+        errors: error.errors || [{ message: error.message }]
+      };
+    }
+  });
+
+export const dataAggregate = createAITool('data.aggregate')
+  .describe('Perform aggregation operations on data')
+  .tag('data', 'analytics', 'utility')
+  .input(z.object({
+    data: z.array(z.any()),
+    operation: z.enum(['sum', 'avg', 'min', 'max', 'count', 'distinct']),
+    field: z.string().optional()
+  }))
+  .execute(async ({ input }) => {
+    let result: any;
+    
+    switch (input.operation) {
+      case 'sum':
+        result = input.data.reduce((sum, item) => 
+          sum + (input.field ? item[input.field] : item), 0);
+        break;
+        
+      case 'avg':
+        const sum = input.data.reduce((s, item) => 
+          s + (input.field ? item[input.field] : item), 0);
+        result = sum / input.data.length;
+        break;
+        
+      case 'min':
+        result = Math.min(...input.data.map(item => 
+          input.field ? item[input.field] : item));
+        break;
+        
+      case 'max':
+        result = Math.max(...input.data.map(item => 
+          input.field ? item[input.field] : item));
+        break;
+        
+      case 'count':
+        result = input.data.length;
+        break;
+        
+      case 'distinct':
+        const values = input.data.map(item => 
+          input.field ? item[input.field] : item);
+        result = [...new Set(values)];
+        break;
+    }
+    
+    return { result, operation: input.operation, field: input.field };
+  });
+
+export const dataPaginate = createAITool('data.paginate')
+  .describe('Paginate data')
+  .tag('data', 'pagination', 'utility')
+  .input(z.object({
+    data: z.array(z.any()),
+    page: z.number().min(1),
+    pageSize: z.number().min(1),
+    includeMetadata: z.boolean().optional()
+  }))
+  .execute(async ({ input }) => {
+    const start = (input.page - 1) * input.pageSize;
+    const end = start + input.pageSize;
+    const items = input.data.slice(start, end);
+    const totalPages = Math.ceil(input.data.length / input.pageSize);
+    
+    const result: any = { items };
+    
+    if (input.includeMetadata) {
+      result.metadata = {
+        page: input.page,
+        pageSize: input.pageSize,
+        total: input.data.length,
+        totalPages,
+        hasNext: input.page < totalPages,
+        hasPrev: input.page > 1
+      };
+    }
+    
+    return result;
+  });
+
+export const dataSearch = createAITool('data.search')
+  .describe('Search through data')
+  .tag('data', 'search', 'utility')
+  .input(z.object({
+    data: z.array(z.any()),
+    query: z.string(),
+    fields: z.array(z.string()).optional(),
+    fuzzy: z.boolean().optional()
+  }))
+  .execute(async ({ input }) => {
+    const query = input.query.toLowerCase();
+    
+    const results = input.data.filter(item => {
+      const fieldsToSearch = input.fields || Object.keys(item);
+      
+      return fieldsToSearch.some(field => {
+        const value = String(item[field]).toLowerCase();
+        
+        if (input.fuzzy) {
+          return value.includes(query) || query.includes(value);
+        } else {
+          return value === query;
+        }
+      });
+    });
+    
+    return { results, count: results.length, query: input.query };
+  });

package/lib/aui/tools/dom-tools.tsx

@@ -0,0 +1,202 @@
+import React from 'react';
+import { z } from 'zod';
+import { createAITool } from '../ai-control';
+
+export const domClick = createAITool('dom.click')
+  .describe('Click on a DOM element')
+  .tag('dom', 'interaction', 'client')
+  .input(z.object({
+    selector: z.string().describe('CSS selector for the element'),
+    wait: z.number().optional().describe('Wait time in ms before clicking')
+  }))
+  .clientExecute(async ({ input }) => {
+    if (input.wait) {
+      await new Promise(resolve => setTimeout(resolve, input.wait));
+    }
+    const element = document.querySelector(input.selector) as HTMLElement;
+    if (!element) throw new Error(`Element not found: ${input.selector}`);
+    element.click();
+    return { success: true, selector: input.selector, timestamp: Date.now() };
+  })
+  .render(({ data }) => (
+    <span className="text-green-600">✓ Clicked {data.selector}</span>
+  ));
+
+export const domType = createAITool('dom.type')
+  .describe('Type text into an input element')
+  .tag('dom', 'input', 'client')
+  .input(z.object({
+    selector: z.string(),
+    text: z.string(),
+    clear: z.boolean().optional().describe('Clear field before typing'),
+    delay: z.number().optional().describe('Delay between keystrokes in ms')
+  }))
+  .clientExecute(async ({ input }) => {
+    const element = document.querySelector(input.selector) as HTMLInputElement;
+    if (!element) throw new Error(`Element not found: ${input.selector}`);
+    
+    if (input.clear) {
+      element.value = '';
+    }
+    
+    if (input.delay) {
+      for (const char of input.text) {
+        element.value += char;
+        element.dispatchEvent(new Event('input', { bubbles: true }));
+        await new Promise(resolve => setTimeout(resolve, input.delay));
+      }
+    } else {
+      element.value = input.clear ? input.text : element.value + input.text;
+      element.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    
+    element.dispatchEvent(new Event('change', { bubbles: true }));
+    return { success: true, selector: input.selector, text: input.text };
+  })
+  .render(({ data }) => (
+    <span className="text-blue-600">✓ Typed &quot;{data.text}&quot; into {data.selector}</span>
+  ));
+
+export const domSelect = createAITool('dom.select')
+  .describe('Select an option from a dropdown')
+  .tag('dom', 'input', 'client')
+  .input(z.object({
+    selector: z.string(),
+    value: z.string().optional(),
+    index: z.number().optional(),
+    text: z.string().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    const element = document.querySelector(input.selector) as HTMLSelectElement;
+    if (!element) throw new Error(`Element not found: ${input.selector}`);
+    
+    if (input.value !== undefined) {
+      element.value = input.value;
+    } else if (input.index !== undefined) {
+      element.selectedIndex = input.index;
+    } else if (input.text) {
+      const option = Array.from(element.options).find(opt => opt.text === input.text);
+      if (option) element.value = option.value;
+    }
+    
+    element.dispatchEvent(new Event('change', { bubbles: true }));
+    return { success: true, selector: input.selector, value: element.value };
+  });
+
+export const domScroll = createAITool('dom.scroll')
+  .describe('Scroll to an element or position')
+  .tag('dom', 'navigation', 'client')
+  .input(z.object({
+    selector: z.string().optional(),
+    x: z.number().optional(),
+    y: z.number().optional(),
+    behavior: z.enum(['auto', 'smooth']).optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    if (input.selector) {
+      const element = document.querySelector(input.selector);
+      if (!element) throw new Error(`Element not found: ${input.selector}`);
+      element.scrollIntoView({ behavior: input.behavior || 'smooth' });
+    } else {
+      window.scrollTo({
+        left: input.x || 0,
+        top: input.y || 0,
+        behavior: input.behavior || 'smooth'
+      });
+    }
+    return { success: true, scrolled: true };
+  });
+
+export const domWaitFor = createAITool('dom.waitFor')
+  .describe('Wait for an element to appear')
+  .tag('dom', 'utility', 'client')
+  .input(z.object({
+    selector: z.string(),
+    timeout: z.number().optional().default(5000),
+    interval: z.number().optional().default(100)
+  }))
+  .clientExecute(async ({ input }) => {
+    const startTime = Date.now();
+    
+    const timeout = input.timeout || 5000;
+    const interval = input.interval || 100;
+    
+    while (Date.now() - startTime < timeout) {
+      const element = document.querySelector(input.selector);
+      if (element) {
+        return { success: true, found: true, selector: input.selector };
+      }
+      await new Promise(resolve => setTimeout(resolve, interval));
+    }
+    
+    throw new Error(`Element ${input.selector} not found after ${timeout}ms`);
+  });
+
+export const domGetText = createAITool('dom.getText')
+  .describe('Get text content from elements')
+  .tag('dom', 'read', 'client')
+  .input(z.object({
+    selector: z.string(),
+    all: z.boolean().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    if (input.all) {
+      const elements = document.querySelectorAll(input.selector);
+      const texts = Array.from(elements).map(el => el.textContent || '');
+      return { texts, count: texts.length };
+    } else {
+      const element = document.querySelector(input.selector);
+      if (!element) throw new Error(`Element not found: ${input.selector}`);
+      return { text: element.textContent || '' };
+    }
+  });
+
+export const domGetAttribute = createAITool('dom.getAttribute')
+  .describe('Get attribute value from an element')
+  .tag('dom', 'read', 'client')
+  .input(z.object({
+    selector: z.string(),
+    attribute: z.string()
+  }))
+  .clientExecute(async ({ input }) => {
+    const element = document.querySelector(input.selector);
+    if (!element) throw new Error(`Element not found: ${input.selector}`);
+    return { value: element.getAttribute(input.attribute) };
+  });
+
+export const domSetAttribute = createAITool('dom.setAttribute')
+  .describe('Set attribute value on an element')
+  .tag('dom', 'modify', 'client')
+  .input(z.object({
+    selector: z.string(),
+    attribute: z.string(),
+    value: z.string()
+  }))
+  .clientExecute(async ({ input }) => {
+    const element = document.querySelector(input.selector);
+    if (!element) throw new Error(`Element not found: ${input.selector}`);
+    element.setAttribute(input.attribute, input.value);
+    return { success: true, selector: input.selector, attribute: input.attribute };
+  });
+
+export const domToggleClass = createAITool('dom.toggleClass')
+  .describe('Toggle CSS class on elements')
+  .tag('dom', 'style', 'client')
+  .input(z.object({
+    selector: z.string(),
+    className: z.string(),
+    action: z.enum(['add', 'remove', 'toggle']).optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    const elements = document.querySelectorAll(input.selector);
+    elements.forEach(element => {
+      if (input.action === 'add') {
+        element.classList.add(input.className);
+      } else if (input.action === 'remove') {
+        element.classList.remove(input.className);
+      } else {
+        element.classList.toggle(input.className);
+      }
+    });
+    return { success: true, affected: elements.length };
+  });

package/lib/aui/tools/examples.ts

@@ -0,0 +1,43 @@
+import aui, { z } from '../index';
+
+export const weatherTool = aui
+  .tool('weather')
+  .input(z.object({ city: z.string() }))
+  .execute(async ({ input }) => ({
+    city: input.city,
+    temperature: Math.floor(Math.random() * 30 + 50),
+    condition: ['Sunny', 'Cloudy', 'Rainy'][Math.floor(Math.random() * 3)]
+  }));
+
+export const searchTool = aui
+  .tool('search')
+  .input(z.object({ query: z.string() }))
+  .execute(async ({ input }) => {
+    await new Promise(resolve => setTimeout(resolve, 500));
+    return Array.from({ length: 5 }, (_, i) => ({
+      id: i + 1,
+      title: `Result ${i + 1} for "${input.query}"`,
+      url: `https://example.com/${i + 1}`
+    }));
+  });
+
+export const calculatorTool = aui
+  .tool('calculator')
+  .input(z.object({ expression: z.string() }))
+  .execute(async ({ input }) => {
+    try {
+      // Simple safe evaluation for demo
+      const result = Function('"use strict"; return (' + input.expression + ')')();
+      return { expression: input.expression, result };
+    } catch {
+      throw new Error('Invalid expression');
+    }
+  });
+
+export const dataFetcherTool = aui
+  .tool('dataFetcher')
+  .input(z.object({ url: z.string().url() }))
+  .execute(async ({ input }) => {
+    const response = await fetch(input.url);
+    return response.json();
+  });

package/lib/aui/tools/file-tools.tsx

@@ -0,0 +1,202 @@
+import { z } from 'zod';
+import { createAITool } from '../ai-control';
+
+export const fileUpload = createAITool('file.upload')
+  .describe('Handle file uploads')
+  .tag('file', 'upload', 'client')
+  .input(z.object({
+    accept: z.string().optional(),
+    multiple: z.boolean().optional(),
+    maxSize: z.number().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    return new Promise((resolve, reject) => {
+      const fileInput = document.createElement('input');
+      fileInput.type = 'file';
+      if (input.accept) fileInput.accept = input.accept;
+      if (input.multiple) fileInput.multiple = true;
+      
+      fileInput.onchange = async (e) => {
+        const files = Array.from((e.target as HTMLInputElement).files || []);
+        
+        if (input.maxSize) {
+          const oversized = files.filter(file => file.size > input.maxSize!);
+          if (oversized.length > 0) {
+            reject(new Error(`Files exceed max size: ${oversized.map(f => f.name).join(', ')}`));
+            return;
+          }
+        }
+        
+        const fileData = await Promise.all(files.map(async file => ({
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          lastModified: file.lastModified,
+          content: await file.text().catch(() => null)
+        })));
+        
+        resolve({ files: fileData, count: fileData.length });
+      };
+      
+      fileInput.click();
+    });
+  });
+
+export const fileDownload = createAITool('file.download')
+  .describe('Download a file')
+  .tag('file', 'download', 'client')
+  .input(z.object({
+    content: z.string(),
+    filename: z.string(),
+    type: z.string().optional().default('text/plain')
+  }))
+  .clientExecute(async ({ input }) => {
+    const blob = new Blob([input.content], { type: input.type });
+    const url = URL.createObjectURL(blob);
+    
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = input.filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    
+    URL.revokeObjectURL(url);
+    
+    return { downloaded: true, filename: input.filename };
+  });
+
+export const fileRead = createAITool('file.read')
+  .describe('Read file from input element')
+  .tag('file', 'read', 'client')
+  .input(z.object({
+    selector: z.string(),
+    readAs: z.enum(['text', 'dataURL', 'arrayBuffer']).optional().default('text')
+  }))
+  .clientExecute(async ({ input }) => {
+    const fileInput = document.querySelector(input.selector) as HTMLInputElement;
+    if (!fileInput) throw new Error(`Input not found: ${input.selector}`);
+    if (!fileInput.files || fileInput.files.length === 0) {
+      throw new Error('No files selected');
+    }
+    
+    const file = fileInput.files[0];
+    const reader = new FileReader();
+    
+    return new Promise((resolve, reject) => {
+      reader.onload = (e) => {
+        resolve({
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          content: e.target?.result,
+          lastModified: file.lastModified
+        });
+      };
+      
+      reader.onerror = () => reject(new Error('Failed to read file'));
+      
+      switch (input.readAs) {
+        case 'dataURL':
+          reader.readAsDataURL(file);
+          break;
+        case 'arrayBuffer':
+          reader.readAsArrayBuffer(file);
+          break;
+        default:
+          reader.readAsText(file);
+      }
+    });
+  });
+
+export const fileDragDrop = createAITool('file.dragDrop')
+  .describe('Setup drag and drop file handling')
+  .tag('file', 'upload', 'client')
+  .input(z.object({
+    selector: z.string(),
+    accept: z.string().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    const dropZone = document.querySelector(input.selector) as HTMLElement;
+    if (!dropZone) throw new Error(`Element not found: ${input.selector}`);
+    
+    const dragId = Math.random().toString(36).substring(7);
+    
+    return {
+      dragId,
+      onDrop: (callback: (files: File[]) => void) => {
+        const handleDragOver = (e: DragEvent) => {
+          e.preventDefault();
+          dropZone.classList.add('dragging');
+        };
+        
+        const handleDragLeave = () => {
+          dropZone.classList.remove('dragging');
+        };
+        
+        const handleDrop = (e: DragEvent) => {
+          e.preventDefault();
+          dropZone.classList.remove('dragging');
+          
+          const files = Array.from(e.dataTransfer?.files || []);
+          
+          if (input.accept) {
+            const acceptedTypes = input.accept.split(',').map(t => t.trim());
+            const validFiles = files.filter(file => {
+              return acceptedTypes.some(type => {
+                if (type.startsWith('.')) {
+                  return file.name.endsWith(type);
+                }
+                return file.type.match(type.replace('*', '.*'));
+              });
+            });
+            callback(validFiles);
+          } else {
+            callback(files);
+          }
+        };
+        
+        dropZone.addEventListener('dragover', handleDragOver);
+        dropZone.addEventListener('dragleave', handleDragLeave);
+        dropZone.addEventListener('drop', handleDrop);
+        
+        return () => {
+          dropZone.removeEventListener('dragover', handleDragOver);
+          dropZone.removeEventListener('dragleave', handleDragLeave);
+          dropZone.removeEventListener('drop', handleDrop);
+        };
+      }
+    };
+  });
+
+export const filePreview = createAITool('file.preview')
+  .describe('Preview file content')
+  .tag('file', 'preview', 'client')
+  .input(z.object({
+    file: z.any(),
+    targetSelector: z.string()
+  }))
+  .clientExecute(async ({ input }) => {
+    const target = document.querySelector(input.targetSelector) as HTMLElement;
+    if (!target) throw new Error(`Element not found: ${input.targetSelector}`);
+    
+    const file = input.file;
+    
+    if (file.type.startsWith('image/')) {
+      const img = document.createElement('img');
+      img.src = URL.createObjectURL(new Blob([file.content]));
+      img.style.maxWidth = '100%';
+      target.innerHTML = '';
+      target.appendChild(img);
+    } else if (file.type.startsWith('text/') || file.type === 'application/json') {
+      const pre = document.createElement('pre');
+      pre.textContent = file.content;
+      pre.style.cssText = 'white-space: pre-wrap; word-wrap: break-word;';
+      target.innerHTML = '';
+      target.appendChild(pre);
+    } else {
+      target.innerHTML = `<div>File: ${file.name} (${file.type})</div>`;
+    }
+    
+    return { previewed: true, file: file.name };
+  });