@lantos1618/better-ui 0.2.2 → 0.3.1

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

@@ -1,233 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,172 +0,0 @@
-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

@@ -1,213 +0,0 @@
-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 };
-  });