@lantos1618/better-ui 0.1.0

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

@@ -0,0 +1,233 @@
+import { z } from 'zod';
+import { createAITool } from '../ai-control';
+
+export const formSubmit = createAITool('form.submit')
+  .describe('Submit a form')
+  .tag('form', 'submission', 'client')
+  .input(z.object({
+    selector: z.string(),
+    preventDefault: z.boolean().optional().default(true)
+  }))
+  .clientExecute(async ({ input }) => {
+    const form = document.querySelector(input.selector) as HTMLFormElement;
+    if (!form) throw new Error(`Form not found: ${input.selector}`);
+    
+    if (!input.preventDefault) {
+      form.submit();
+    } else {
+      const event = new Event('submit', { bubbles: true, cancelable: true });
+      form.dispatchEvent(event);
+    }
+    
+    return { submitted: true, selector: input.selector };
+  });
+
+export const formReset = createAITool('form.reset')
+  .describe('Reset a form to its default values')
+  .tag('form', 'reset', 'client')
+  .input(z.object({
+    selector: z.string()
+  }))
+  .clientExecute(async ({ input }) => {
+    const form = document.querySelector(input.selector) as HTMLFormElement;
+    if (!form) throw new Error(`Form not found: ${input.selector}`);
+    
+    form.reset();
+    return { reset: true, selector: input.selector };
+  });
+
+export const formFill = createAITool('form.fill')
+  .describe('Fill multiple form fields at once')
+  .tag('form', 'input', 'client')
+  .input(z.object({
+    formSelector: z.string(),
+    values: z.record(z.any()),
+    submit: z.boolean().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    const form = document.querySelector(input.formSelector) as HTMLFormElement;
+    if (!form) throw new Error(`Form not found: ${input.formSelector}`);
+    
+    const filled: Record<string, any> = {};
+    
+    Object.entries(input.values).forEach(([name, value]) => {
+      const field = form.elements.namedItem(name) as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+      
+      if (field) {
+        if (field instanceof HTMLInputElement) {
+          if (field.type === 'checkbox') {
+            field.checked = Boolean(value);
+          } else if (field.type === 'radio') {
+            const radios = form.querySelectorAll(`input[name="${name}"]`) as NodeListOf<HTMLInputElement>;
+            radios.forEach(radio => {
+              radio.checked = radio.value === value;
+            });
+          } else {
+            field.value = String(value);
+          }
+        } else {
+          field.value = String(value);
+        }
+        
+        field.dispatchEvent(new Event('input', { bubbles: true }));
+        field.dispatchEvent(new Event('change', { bubbles: true }));
+        filled[name] = value;
+      }
+    });
+    
+    if (input.submit) {
+      form.submit();
+    }
+    
+    return { filled, submitted: input.submit };
+  });
+
+export const formValidate = createAITool('form.validate')
+  .describe('Validate a form using HTML5 validation')
+  .tag('form', 'validation', 'client')
+  .input(z.object({
+    selector: z.string(),
+    showErrors: z.boolean().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    const form = document.querySelector(input.selector) as HTMLFormElement;
+    if (!form) throw new Error(`Form not found: ${input.selector}`);
+    
+    const isValid = form.checkValidity();
+    const errors: Array<{ field: string; message: string }> = [];
+    
+    if (!isValid && input.showErrors) {
+      const fields = form.querySelectorAll('input, select, textarea') as NodeListOf<HTMLInputElement>;
+      fields.forEach(field => {
+        if (!field.validity.valid) {
+          errors.push({
+            field: field.name || field.id,
+            message: field.validationMessage
+          });
+          field.reportValidity();
+        }
+      });
+    }
+    
+    return { valid: isValid, errors };
+  });
+
+export const formGetData = createAITool('form.getData')
+  .describe('Get all form data as an object')
+  .tag('form', 'read', 'client')
+  .input(z.object({
+    selector: z.string(),
+    includeDisabled: z.boolean().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    const form = document.querySelector(input.selector) as HTMLFormElement;
+    if (!form) throw new Error(`Form not found: ${input.selector}`);
+    
+    const formData = new FormData(form);
+    const data: Record<string, any> = {};
+    
+    formData.forEach((value, key) => {
+      if (data[key]) {
+        if (!Array.isArray(data[key])) {
+          data[key] = [data[key]];
+        }
+        data[key].push(value);
+      } else {
+        data[key] = value;
+      }
+    });
+    
+    if (input.includeDisabled) {
+      const disabledFields = form.querySelectorAll('[disabled]') as NodeListOf<HTMLInputElement>;
+      disabledFields.forEach(field => {
+        if (field.name && !(field.name in data)) {
+          data[field.name] = field.value;
+        }
+      });
+    }
+    
+    return { data };
+  });
+
+export const formSetError = createAITool('form.setError')
+  .describe('Set custom validation error on a form field')
+  .tag('form', 'validation', 'client')
+  .input(z.object({
+    selector: z.string(),
+    message: z.string(),
+    show: z.boolean().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    const field = document.querySelector(input.selector) as HTMLInputElement;
+    if (!field) throw new Error(`Field not found: ${input.selector}`);
+    
+    field.setCustomValidity(input.message);
+    
+    if (input.show) {
+      field.reportValidity();
+    }
+    
+    return { field: input.selector, message: input.message };
+  });
+
+export const formClearErrors = createAITool('form.clearErrors')
+  .describe('Clear validation errors from form fields')
+  .tag('form', 'validation', 'client')
+  .input(z.object({
+    selector: z.string()
+  }))
+  .clientExecute(async ({ input }) => {
+    const form = document.querySelector(input.selector) as HTMLFormElement;
+    if (!form) throw new Error(`Form not found: ${input.selector}`);
+    
+    const fields = form.querySelectorAll('input, select, textarea') as NodeListOf<HTMLInputElement>;
+    fields.forEach(field => {
+      field.setCustomValidity('');
+    });
+    
+    return { cleared: true, fields: fields.length };
+  });
+
+export const formWatch = createAITool('form.watch')
+  .describe('Watch form changes')
+  .tag('form', 'reactive', 'client')
+  .input(z.object({
+    selector: z.string(),
+    fields: z.array(z.string()).optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    const form = document.querySelector(input.selector) as HTMLFormElement;
+    if (!form) throw new Error(`Form not found: ${input.selector}`);
+    
+    const watchId = Math.random().toString(36).substring(7);
+    
+    return {
+      watchId,
+      onChange: (callback: (data: Record<string, any>) => void) => {
+        const handler = () => {
+          const formData = new FormData(form);
+          const data: Record<string, any> = {};
+          
+          if (input.fields) {
+            input.fields.forEach(field => {
+              data[field] = formData.get(field);
+            });
+          } else {
+            formData.forEach((value, key) => {
+              data[key] = value;
+            });
+          }
+          
+          callback(data);
+        };
+        
+        form.addEventListener('input', handler);
+        form.addEventListener('change', handler);
+        
+        return () => {
+          form.removeEventListener('input', handler);
+          form.removeEventListener('change', handler);
+        };
+      }
+    };
+  });

package/lib/aui/tools/index.ts

@@ -0,0 +1,8 @@
+export * from './dom-tools';
+export * from './api-tools';
+export * from './state-tools';
+export * from './navigation-tools';
+export * from './form-tools';
+export * from './data-tools';
+export * from './notification-tools';
+export * from './file-tools';

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

@@ -0,0 +1,172 @@
+import { z } from 'zod';
+import { createAITool } from '../ai-control';
+
+export const navigate = createAITool('navigate')
+  .describe('Navigate to a different page or URL')
+  .tag('navigation', 'routing', 'client')
+  .input(z.object({
+    url: z.string(),
+    newTab: z.boolean().optional(),
+    replace: z.boolean().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    if (input.newTab) {
+      window.open(input.url, '_blank');
+    } else if (input.replace) {
+      window.location.replace(input.url);
+    } else {
+      window.location.href = input.url;
+    }
+    return { navigated: true, url: input.url };
+  });
+
+export const back = createAITool('navigate.back')
+  .describe('Go back in browser history')
+  .tag('navigation', 'history', 'client')
+  .input(z.object({
+    steps: z.number().optional().default(1)
+  }))
+  .clientExecute(async ({ input }) => {
+    const steps = input.steps || 1;
+    window.history.go(-steps);
+    return { back: steps };
+  });
+
+export const forward = createAITool('navigate.forward')
+  .describe('Go forward in browser history')
+  .tag('navigation', 'history', 'client')
+  .input(z.object({
+    steps: z.number().optional().default(1)
+  }))
+  .clientExecute(async ({ input }) => {
+    const steps = input.steps || 1;
+    window.history.go(steps);
+    return { forward: steps };
+  });
+
+export const reload = createAITool('navigate.reload')
+  .describe('Reload the current page')
+  .tag('navigation', 'page', 'client')
+  .input(z.object({
+    force: z.boolean().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    window.location.reload();
+    return { reloading: true };
+  });
+
+export const pushState = createAITool('navigate.pushState')
+  .describe('Push a new state to browser history')
+  .tag('navigation', 'history', 'client')
+  .input(z.object({
+    url: z.string(),
+    state: z.any().optional(),
+    title: z.string().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    window.history.pushState(input.state, input.title || '', input.url);
+    return { pushed: true, url: input.url };
+  });
+
+export const replaceState = createAITool('navigate.replaceState')
+  .describe('Replace current state in browser history')
+  .tag('navigation', 'history', 'client')
+  .input(z.object({
+    url: z.string(),
+    state: z.any().optional(),
+    title: z.string().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    window.history.replaceState(input.state, input.title || '', input.url);
+    return { replaced: true, url: input.url };
+  });
+
+export const getLocation = createAITool('navigate.getLocation')
+  .describe('Get current location information')
+  .tag('navigation', 'location', 'client')
+  .input(z.object({}))
+  .clientExecute(async () => {
+    return {
+      href: window.location.href,
+      protocol: window.location.protocol,
+      host: window.location.host,
+      hostname: window.location.hostname,
+      port: window.location.port,
+      pathname: window.location.pathname,
+      search: window.location.search,
+      hash: window.location.hash,
+      origin: window.location.origin
+    };
+  });
+
+export const getParams = createAITool('navigate.getParams')
+  .describe('Get URL search parameters')
+  .tag('navigation', 'params', 'client')
+  .input(z.object({
+    key: z.string().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    const params = new URLSearchParams(window.location.search);
+    
+    if (input.key) {
+      return { 
+        key: input.key, 
+        value: params.get(input.key),
+        found: params.has(input.key)
+      };
+    }
+    
+    const allParams: Record<string, string> = {};
+    params.forEach((value, key) => {
+      allParams[key] = value;
+    });
+    
+    return { params: allParams };
+  });
+
+export const setParams = createAITool('navigate.setParams')
+  .describe('Set URL search parameters')
+  .tag('navigation', 'params', 'client')
+  .input(z.object({
+    params: z.record(z.string()),
+    replace: z.boolean().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    const url = new URL(window.location.href);
+    
+    Object.entries(input.params).forEach(([key, value]) => {
+      if (value === null || value === undefined) {
+        url.searchParams.delete(key);
+      } else {
+        url.searchParams.set(key, value);
+      }
+    });
+    
+    if (input.replace) {
+      window.history.replaceState(null, '', url.toString());
+    } else {
+      window.history.pushState(null, '', url.toString());
+    }
+    
+    return { params: input.params, url: url.toString() };
+  });
+
+export const setHash = createAITool('navigate.setHash')
+  .describe('Set URL hash')
+  .tag('navigation', 'hash', 'client')
+  .input(z.object({
+    hash: z.string(),
+    scroll: z.boolean().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    window.location.hash = input.hash;
+    
+    if (input.scroll && input.hash) {
+      const element = document.querySelector(input.hash);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
+    }
+    
+    return { hash: input.hash };
+  });

package/lib/aui/tools/notification-tools.ts

@@ -0,0 +1,213 @@
+import React from 'react';
+import { z } from 'zod';
+import { createAITool } from '../ai-control';
+
+export const notifyToast = createAITool('notify.toast')
+  .describe('Show a toast notification')
+  .tag('notification', 'ui', 'client')
+  .input(z.object({
+    message: z.string(),
+    type: z.enum(['success', 'error', 'warning', 'info']).optional(),
+    duration: z.number().optional().default(3000),
+    position: z.enum(['top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right']).optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    const toast = document.createElement('div');
+    toast.className = `aui-toast aui-toast-${input.type || 'info'}`;
+    toast.textContent = input.message;
+    
+    const styles: any = {
+      position: 'fixed',
+      padding: '12px 24px',
+      borderRadius: '4px',
+      zIndex: '9999',
+      transition: 'opacity 0.3s',
+      fontSize: '14px',
+      fontFamily: 'system-ui, -apple-system, sans-serif'
+    };
+    
+    const typeStyles: any = {
+      success: { backgroundColor: '#10b981', color: 'white' },
+      error: { backgroundColor: '#ef4444', color: 'white' },
+      warning: { backgroundColor: '#f59e0b', color: 'white' },
+      info: { backgroundColor: '#3b82f6', color: 'white' }
+    };
+    
+    const positionStyles: any = {
+      top: { top: '20px', left: '50%', transform: 'translateX(-50%)' },
+      bottom: { bottom: '20px', left: '50%', transform: 'translateX(-50%)' },
+      'top-left': { top: '20px', left: '20px' },
+      'top-right': { top: '20px', right: '20px' },
+      'bottom-left': { bottom: '20px', left: '20px' },
+      'bottom-right': { bottom: '20px', right: '20px' }
+    };
+    
+    Object.assign(toast.style, styles, typeStyles[input.type || 'info'], positionStyles[input.position || 'top']);
+    
+    document.body.appendChild(toast);
+    
+    setTimeout(() => {
+      toast.style.opacity = '0';
+      setTimeout(() => document.body.removeChild(toast), 300);
+    }, input.duration);
+    
+    return { shown: true, message: input.message };
+  });
+
+export const notifyAlert = createAITool('notify.alert')
+  .describe('Show a browser alert dialog')
+  .tag('notification', 'dialog', 'client')
+  .input(z.object({
+    message: z.string(),
+    title: z.string().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    window.alert(input.message);
+    return { shown: true };
+  });
+
+export const notifyConfirm = createAITool('notify.confirm')
+  .describe('Show a confirmation dialog')
+  .tag('notification', 'dialog', 'client')
+  .input(z.object({
+    message: z.string(),
+    title: z.string().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    const confirmed = window.confirm(input.message);
+    return { confirmed };
+  });
+
+export const notifyPrompt = createAITool('notify.prompt')
+  .describe('Show a prompt dialog for user input')
+  .tag('notification', 'dialog', 'client')
+  .input(z.object({
+    message: z.string(),
+    defaultValue: z.string().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    const value = window.prompt(input.message, input.defaultValue);
+    return { value, cancelled: value === null };
+  });
+
+export const notifyBadge = createAITool('notify.badge')
+  .describe('Update badge count on an element')
+  .tag('notification', 'ui', 'client')
+  .input(z.object({
+    selector: z.string(),
+    count: z.number(),
+    show: z.boolean().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    const element = document.querySelector(input.selector);
+    if (!element) throw new Error(`Element not found: ${input.selector}`);
+    
+    let badge = element.querySelector('.aui-badge') as HTMLElement;
+    
+    if (!badge) {
+      badge = document.createElement('span');
+      badge.className = 'aui-badge';
+      badge.style.cssText = `
+        position: absolute;
+        top: -8px;
+        right: -8px;
+        background: #ef4444;
+        color: white;
+        border-radius: 10px;
+        padding: 2px 6px;
+        font-size: 12px;
+        font-weight: bold;
+        min-width: 20px;
+        text-align: center;
+      `;
+      (element as HTMLElement).style.position = 'relative';
+      element.appendChild(badge);
+    }
+    
+    if (input.show === false || input.count === 0) {
+      badge.style.display = 'none';
+    } else {
+      badge.style.display = 'block';
+      badge.textContent = String(input.count);
+    }
+    
+    return { selector: input.selector, count: input.count };
+  });
+
+export const notifyProgress = createAITool('notify.progress')
+  .describe('Show or update a progress indicator')
+  .tag('notification', 'ui', 'client')
+  .input(z.object({
+    id: z.string(),
+    value: z.number().min(0).max(100),
+    message: z.string().optional(),
+    show: z.boolean().optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    let progress = document.getElementById(`aui-progress-${input.id}`) as HTMLElement;
+    
+    if (!progress) {
+      progress = document.createElement('div');
+      progress.id = `aui-progress-${input.id}`;
+      progress.style.cssText = `
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: white;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        z-index: 9999;
+        min-width: 300px;
+      `;
+      
+      const bar = document.createElement('div');
+      bar.className = 'aui-progress-bar';
+      bar.style.cssText = `
+        width: 100%;
+        height: 20px;
+        background: #e5e7eb;
+        border-radius: 10px;
+        overflow: hidden;
+        margin-top: 10px;
+      `;
+      
+      const fill = document.createElement('div');
+      fill.className = 'aui-progress-fill';
+      fill.style.cssText = `
+        height: 100%;
+        background: #3b82f6;
+        transition: width 0.3s;
+        border-radius: 10px;
+      `;
+      
+      const label = document.createElement('div');
+      label.className = 'aui-progress-label';
+      label.style.cssText = 'margin-bottom: 10px; font-family: system-ui;';
+      
+      bar.appendChild(fill);
+      progress.appendChild(label);
+      progress.appendChild(bar);
+      document.body.appendChild(progress);
+    }
+    
+    if (input.show === false) {
+      progress.style.display = 'none';
+    } else {
+      progress.style.display = 'block';
+      const fill = progress.querySelector('.aui-progress-fill') as HTMLElement;
+      const label = progress.querySelector('.aui-progress-label') as HTMLElement;
+      
+      fill.style.width = `${input.value}%`;
+      label.textContent = input.message || `${input.value}%`;
+      
+      if (input.value >= 100) {
+        setTimeout(() => {
+          progress.style.display = 'none';
+        }, 1000);
+      }
+    }
+    
+    return { id: input.id, value: input.value };
+  });