@tachui/core 0.7.0-alpha1 → 0.7.1-alpha

package/src/gradients/__tests__/state-gradient-asset.test.ts

@@ -1,262 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { StateGradientAsset, StateGradient } from '../state-gradient-asset'
-import { LinearGradient } from '../index'
-import type { StateGradientOptions } from '../types'
-
-describe('StateGradientAsset', () => {
-  let stateGradients: StateGradientOptions
-  let asset: StateGradientAsset
-
-  beforeEach(() => {
-    vi.useFakeTimers()
-    
-    stateGradients = {
-      default: LinearGradient({
-        startPoint: 'top',
-        endPoint: 'bottom',
-        colors: ['#ff0000', '#0000ff']
-      }),
-      hover: LinearGradient({
-        startPoint: 'top',
-        endPoint: 'bottom',
-        colors: ['#ff6666', '#6666ff']
-      }),
-      active: LinearGradient({
-        startPoint: 'top',
-        endPoint: 'bottom',
-        colors: ['#cc0000', '#0000cc']
-      }),
-      focus: LinearGradient({
-        startPoint: 'top',
-        endPoint: 'bottom',
-        colors: ['#ffaa00', '#00aaff']
-      }),
-      disabled: '#cccccc',
-      animation: {
-        duration: 300,
-        easing: 'ease-in-out',
-        delay: 50
-      }
-    }
-
-    asset = new StateGradientAsset('test-gradient', stateGradients)
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  describe('construction and initialization', () => {
-    it('should initialize with default state', () => {
-      expect(asset.getState()).toBe('default')
-    })
-
-    it('should resolve default gradient initially', () => {
-      const resolved = asset.resolve()
-      expect(resolved).toContain('linear-gradient')
-      expect(resolved).toContain('#ff0000')
-      expect(resolved).toContain('#0000ff')
-    })
-
-    it('should pre-cache all gradients on construction', () => {
-      // All states should be resolvable immediately
-      expect(asset.getStateGradient('default')).toBeTruthy()
-      expect(asset.getStateGradient('hover')).toBeTruthy()
-      expect(asset.getStateGradient('active')).toBeTruthy()
-      expect(asset.getStateGradient('focus')).toBeTruthy()
-      expect(asset.getStateGradient('disabled')).toBe('#cccccc')
-    })
-
-    it('should create asset with StateGradient factory function', () => {
-      const factoryAsset = StateGradient('factory-test', stateGradients)
-      expect(factoryAsset).toBeInstanceOf(StateGradientAsset)
-      expect(factoryAsset.name).toBe('factory-test')
-    })
-  })
-
-  describe('state management', () => {
-    it('should change state when setState is called', () => {
-      asset.setState('hover')
-      expect(asset.getState()).toBe('hover')
-    })
-
-    it('should resolve different gradients for different states', () => {
-      const defaultGradient = asset.resolve()
-      
-      asset.setState('hover')
-      const hoverGradient = asset.resolve()
-      
-      expect(defaultGradient).not.toBe(hoverGradient)
-      expect(hoverGradient).toContain('#ff6666')
-      expect(hoverGradient).toContain('#6666ff')
-    })
-
-    it('should ignore invalid state changes', () => {
-      asset.setState('hover')
-      // @ts-ignore - Testing invalid state
-      asset.setState('invalid')
-      expect(asset.getState()).toBe('hover')
-    })
-
-    it('should ignore state changes during transition', () => {
-      asset.setState('hover')
-      asset.setState('active') // Should be ignored due to transition
-      expect(asset.getState()).toBe('hover')
-      
-      // After transition completes
-      vi.advanceTimersByTime(350) // duration + delay
-      asset.setState('active')
-      expect(asset.getState()).toBe('active')
-    })
-
-    it('should handle string gradients correctly', () => {
-      asset.setState('disabled')
-      expect(asset.resolve()).toBe('#cccccc')
-    })
-  })
-
-  describe('available states', () => {
-    it('should return all available states', () => {
-      const states = asset.getAvailableStates()
-      expect(states).toContain('default')
-      expect(states).toContain('hover')
-      expect(states).toContain('active')
-      expect(states).toContain('focus')
-      expect(states).toContain('disabled')
-      expect(states).toContain('animation')
-    })
-
-    it('should check if specific states are available', () => {
-      expect(asset.hasState('hover')).toBe(true)
-      expect(asset.hasState('active')).toBe(true)
-      // @ts-ignore - Testing invalid state
-      expect(asset.hasState('invalid')).toBe(false)
-    })
-  })
-
-  describe('animation configuration', () => {
-    it('should generate correct animation CSS', () => {
-      const animationCSS = asset.getAnimationCSS()
-      expect(animationCSS).toContain('transition: background 300ms ease-in-out 50ms;')
-    })
-
-    it('should handle default animation options', () => {
-      const simpleGradients = {
-        default: '#ff0000',
-        hover: '#0000ff'
-      }
-      const simpleAsset = new StateGradientAsset('simple', simpleGradients)
-      const animationCSS = simpleAsset.getAnimationCSS()
-      expect(animationCSS).toContain('transition: background 300ms ease 0ms;')
-    })
-
-    it('should update animation options', () => {
-      asset.setAnimation({ duration: 500, easing: 'ease-out' })
-      const animationCSS = asset.getAnimationCSS()
-      expect(animationCSS).toContain('transition: background 500ms ease-out')
-    })
-  })
-
-  describe('performance optimizations', () => {
-    it('should cache resolved gradients', () => {
-      const resolved1 = asset.resolve()
-      const resolved2 = asset.resolve()
-      
-      // Should return the same instance (cached)
-      expect(resolved1).toBe(resolved2)
-    })
-
-    it('should clear cache when requested', () => {
-      asset.resolve() // Cache the result
-      asset.clearCache()
-      
-      // Should work fine after cache clear
-      const resolved = asset.resolve()
-      expect(resolved).toBeTruthy()
-    })
-
-    it('should update gradients and clear cache', () => {
-      const originalResolved = asset.resolve()
-      
-      const newGradients: StateGradientOptions = {
-        default: '#ffffff',
-        hover: '#000000'
-      }
-      
-      asset.updateStateGradients(newGradients)
-      const newResolved = asset.resolve()
-      
-      expect(newResolved).not.toBe(originalResolved)
-      expect(newResolved).toBe('#ffffff')
-    })
-  })
-
-  describe('gradient value resolution', () => {
-    it('should resolve gradient definitions correctly', () => {
-      asset.setState('hover')
-      const resolved = asset.resolve()
-      expect(resolved).toContain('linear-gradient')
-      expect(resolved).toContain('to bottom')
-      expect(resolved).toContain('#ff6666')
-      expect(resolved).toContain('#6666ff')
-    })
-
-    it('should resolve string values correctly', () => {
-      asset.setState('disabled')
-      expect(asset.resolve()).toBe('#cccccc')
-    })
-
-    it('should get specific state gradients without changing current state', () => {
-      asset.setState('default')
-      const hoverGradient = asset.getStateGradient('hover')
-      
-      expect(asset.getState()).toBe('default') // Should not change
-      expect(hoverGradient).toContain('#ff6666')
-    })
-
-    it('should fall back to default for missing states', () => {
-      const defaultResolved = asset.getStateGradient('default')
-      // @ts-ignore - Testing missing state
-      const missingResolved = asset.getStateGradient('missing')
-      
-      expect(missingResolved).toBe(defaultResolved)
-    })
-  })
-
-  describe('edge cases', () => {
-    it('should handle asset with only default gradient', () => {
-      const minimalGradients: StateGradientOptions = {
-        default: '#ff0000'
-      }
-      
-      const minimalAsset = new StateGradientAsset('minimal', minimalGradients)
-      expect(minimalAsset.resolve()).toBe('#ff0000')
-      expect(minimalAsset.getAvailableStates()).toEqual(['default'])
-    })
-
-    it('should handle zero duration animations', () => {
-      const quickGradients: StateGradientOptions = {
-        default: '#ff0000',
-        hover: '#0000ff',
-        animation: { duration: 0 }
-      }
-      
-      const quickAsset = new StateGradientAsset('quick', quickGradients)
-      quickAsset.setState('hover')
-      // Should allow immediate state changes with zero duration
-      quickAsset.setState('default')
-      expect(quickAsset.getState()).toBe('default')
-    })
-
-    it('should handle missing animation configuration', () => {
-      const noAnimGradients: StateGradientOptions = {
-        default: '#ff0000',
-        hover: '#0000ff'
-      }
-      
-      const noAnimAsset = new StateGradientAsset('no-anim', noAnimGradients)
-      const animCSS = noAnimAsset.getAnimationCSS()
-      expect(animCSS).toContain('300ms ease 0ms') // Default values
-    })
-  })
-})

package/src/gradients/__tests__/state-gradient-integration.test.ts

@@ -1,277 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { ModifierBuilderImpl } from '../../modifiers/builder'
-import { LinearGradient } from '../index'
-import { StateGradient } from '../state-gradient-asset'
-import type { ComponentInstance } from '../../runtime/types'
-import type { StateGradientOptions } from '../types'
-
-describe('State Gradient Integration Tests', () => {
-  let mockComponent: ComponentInstance
-  let builder: ModifierBuilderImpl
-
-  beforeEach(() => {
-    mockComponent = {
-      type: 'test-component',
-      id: 'test-123',
-      props: {},
-      children: []
-    }
-    
-    builder = new ModifierBuilderImpl(mockComponent)
-  })
-
-  describe('modifier builder integration', () => {
-    it('should accept state gradient options in background method', () => {
-      const stateGradients: StateGradientOptions = {
-        default: LinearGradient({
-          startPoint: 'top',
-          endPoint: 'bottom',
-          colors: ['#ff0000', '#0000ff']
-        }),
-        hover: LinearGradient({
-          startPoint: 'leading',
-          endPoint: 'trailing',
-          colors: ['#ff6666', '#6666ff']
-        }),
-        animation: {
-          duration: 250,
-          easing: 'ease-in-out'
-        }
-      }
-
-      expect(() => {
-        builder.background(stateGradients)
-      }).not.toThrow()
-
-      const modifiedComponent = builder.build()
-      expect(modifiedComponent.modifiers).toHaveLength(1)
-      expect(modifiedComponent.modifiers[0].type).toBe('background')
-    })
-
-    it('should accept StateGradientAsset in background method', () => {
-      const asset = StateGradient('test-asset', {
-        default: '#ff0000',
-        hover: '#00ff00',
-        active: '#0000ff'
-      })
-
-      expect(() => {
-        builder.background(asset as any)
-      }).not.toThrow()
-
-      const modifiedComponent = builder.build()
-      expect(modifiedComponent.modifiers).toHaveLength(1)
-    })
-
-    it('should still accept regular gradients and strings', () => {
-      const gradient = LinearGradient({
-        startPoint: 'top',
-        endPoint: 'bottom',
-        colors: ['#ff0000', '#0000ff']
-      })
-
-      // Test gradient
-      builder.background(gradient)
-      expect(builder.build().modifiers).toHaveLength(1)
-
-      // Test string
-      const builder2 = new ModifierBuilderImpl(mockComponent)
-      builder2.background('#ff0000')
-      expect(builder2.build().modifiers).toHaveLength(1)
-    })
-
-    it('should chain with other modifiers correctly', () => {
-      const stateGradients: StateGradientOptions = {
-        default: '#ff0000',
-        hover: '#00ff00'
-      }
-
-      const modifiedComponent = builder
-        .background(stateGradients)
-        .padding(16)
-        .cornerRadius(8)
-        .build()
-
-      expect(modifiedComponent.modifiers).toHaveLength(3)
-      
-      // Background should have high priority (95)
-      const backgroundModifier = modifiedComponent.modifiers.find(m => m.type === 'background')
-      expect(backgroundModifier?.priority).toBe(95)
-    })
-  })
-
-  describe('type safety', () => {
-    it('should enforce proper StateGradientOptions structure', () => {
-      // Valid structure
-      const validGradients: StateGradientOptions = {
-        default: '#ff0000',
-        hover: '#00ff00',
-        animation: { duration: 300 }
-      }
-
-      expect(() => {
-        builder.background(validGradients)
-      }).not.toThrow()
-    })
-
-    it('should require default state', () => {
-      // This should cause TypeScript error (but test in JS context)
-      const invalidGradients = {
-        hover: '#00ff00',
-        active: '#0000ff'
-        // Missing required 'default'
-      }
-
-      // In actual TypeScript usage, this would be a compile-time error
-      // Here we test runtime behavior
-      expect(() => {
-        builder.background(invalidGradients as any)
-      }).not.toThrow() // BackgroundModifier should handle gracefully
-    })
-  })
-
-  describe('real-world usage patterns', () => {
-    it('should support button hover effects', () => {
-      const buttonGradients: StateGradientOptions = {
-        default: LinearGradient({
-          startPoint: 'top',
-          endPoint: 'bottom',
-          colors: ['#007AFF', '#0051D2']
-        }),
-        hover: LinearGradient({
-          startPoint: 'top',
-          endPoint: 'bottom',
-          colors: ['#1A8FFF', '#0062E3']
-        }),
-        active: LinearGradient({
-          startPoint: 'top',
-          endPoint: 'bottom',
-          colors: ['#0066CC', '#004499']
-        }),
-        disabled: '#CCCCCC',
-        animation: {
-          duration: 150,
-          easing: 'ease-out'
-        }
-      }
-
-      const button = builder
-        .background(buttonGradients)
-        .padding(12)
-        .cornerRadius(6)
-        .fontSize(16)
-        .fontWeight('600')
-        .build()
-
-      expect(button.modifiers).toHaveLength(5)
-      
-      const backgroundModifier = button.modifiers.find(m => m.type === 'background')
-      expect(backgroundModifier?.properties.background).toBe(buttonGradients)
-    })
-
-    it('should support card hover effects', () => {
-      const cardGradients: StateGradientOptions = {
-        default: '#FFFFFF',
-        hover: LinearGradient({
-          startPoint: 'topLeading',
-          endPoint: 'bottomTrailing',
-          colors: ['#F8F9FA', '#E9ECEF']
-        }),
-        animation: {
-          duration: 200,
-          easing: 'ease'
-        }
-      }
-
-      const card = builder
-        .background(cardGradients)
-        .padding(16)
-        .cornerRadius(8)
-        .shadow({ x: 0, y: 2, radius: 4, color: 'rgba(0,0,0,0.1)' })
-        .build()
-
-      expect(card.modifiers).toHaveLength(4)
-    })
-
-    it('should support form input focus states', () => {
-      const inputGradients: StateGradientOptions = {
-        default: '#FFFFFF',
-        focus: LinearGradient({
-          startPoint: 'top',
-          endPoint: 'bottom',
-          colors: ['#F0F8FF', '#E6F3FF']
-        }),
-        disabled: '#F5F5F5',
-        animation: {
-          duration: 100,
-          easing: 'ease-in-out'
-        }
-      }
-
-      const input = builder
-        .background(inputGradients)
-        .border({ width: 1, color: '#DDD', style: 'solid' })
-        .cornerRadius(4)
-        .padding(8)
-        .build()
-
-      expect(input.modifiers).toHaveLength(4)
-    })
-  })
-
-  describe('performance considerations', () => {
-    it('should create modifier only once per background call', () => {
-      const stateGradients: StateGradientOptions = {
-        default: '#ff0000',
-        hover: '#00ff00'
-      }
-
-      builder.background(stateGradients)
-      const modifiers1 = builder.build().modifiers
-
-      // Building again should reuse the same modifier list (reference equality)
-      const modifiers2 = builder.build().modifiers
-      
-      expect(modifiers1).toStrictEqual(modifiers2) // Use deep equality instead
-      expect(modifiers1).toHaveLength(1)
-    })
-
-    it('should handle complex state gradients efficiently', () => {
-      const complexGradients: StateGradientOptions = {
-        default: LinearGradient({
-          startPoint: 'topLeading',
-          endPoint: 'bottomTrailing',
-          colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57'],
-          stops: [0, 25, 50, 75, 100]
-        }),
-        hover: LinearGradient({
-          startPoint: 'bottomLeading',
-          endPoint: 'topTrailing',
-          colors: ['#FF8E53', '#FF6B9D', '#C44569', '#F8B500', '#FFD93D'],
-          stops: [0, 20, 40, 70, 100]
-        }),
-        active: LinearGradient({
-          startPoint: 'leading',
-          endPoint: 'trailing',
-          colors: ['#667eea', '#764ba2', '#f093fb', '#f5576c', '#4facfe'],
-          stops: [10, 30, 50, 80, 100]
-        }),
-        animation: {
-          duration: 300,
-          easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
-        }
-      }
-
-      // Should handle complex gradients without performance issues
-      const start = performance.now()
-      
-      builder.background(complexGradients)
-      const modifiedComponent = builder.build()
-      
-      const end = performance.now()
-      
-      expect(end - start).toBeLessThan(50) // Should be very fast
-      expect(modifiedComponent.modifiers).toHaveLength(1)
-    })
-  })
-})

package/src/gradients/css-generator.ts

@@ -1,158 +0,0 @@
-import type { Asset } from '../assets/types'
-import type { 
-  GradientDefinition, 
-  LinearGradientOptions,
-  RadialGradientOptions,
-  AngularGradientOptions,
-  ConicGradientOptions,
-  RepeatingLinearGradientOptions,
-  RepeatingRadialGradientOptions,
-  EllipticalGradientOptions,
-  GradientStartPoint,
-  GradientCenter
-} from './types'
-
-// Removed unused DIRECTION_MAP - using calculateDirection function instead
-
-const POSITION_MAP: Record<string, string> = {
-  'center': 'center',
-  'top': 'top',
-  'bottom': 'bottom',
-  'leading': 'left',
-  'trailing': 'right'
-}
-
-function resolveColor(color: string | Asset): string {
-  if (typeof color === 'string') {
-    return color
-  }
-  return color.resolve() as string
-}
-
-function formatColorStops(colors: (string | Asset)[], stops?: number[]): string {
-  return colors.map((color, index) => {
-    const resolvedColor = resolveColor(color)
-    if (stops && stops[index] !== undefined) {
-      return `${resolvedColor} ${stops[index]}%`
-    }
-    return resolvedColor
-  }).join(', ')
-}
-
-function formatPosition(center: GradientCenter): string {
-  if (Array.isArray(center)) {
-    return `${center[0]}% ${center[1]}%`
-  }
-  return POSITION_MAP[center] || center
-}
-
-function calculateDirection(startPoint: GradientStartPoint, endPoint: GradientStartPoint, angle?: number): string {
-  if (angle !== undefined) {
-    return `${angle}deg`
-  }
-  
-  // Simple direction mapping for common cases
-  const directionKey = `${startPoint}-${endPoint}`
-  const directionMappings: Record<string, string> = {
-    'top-bottom': 'to bottom',
-    'bottom-top': 'to top',
-    'leading-trailing': 'to right',
-    'trailing-leading': 'to left',
-    'topLeading-bottomTrailing': 'to bottom right',
-    'topTrailing-bottomLeading': 'to bottom left',
-    'bottomLeading-topTrailing': 'to top right',
-    'bottomTrailing-topLeading': 'to top left'
-  }
-  
-  return directionMappings[directionKey] || 'to bottom'
-}
-
-export function generateLinearGradientCSS(options: LinearGradientOptions): string {
-  const direction = calculateDirection(options.startPoint, options.endPoint, options.angle)
-  const colorStops = formatColorStops(options.colors, options.stops)
-  
-  return `linear-gradient(${direction}, ${colorStops})`
-}
-
-export function generateRadialGradientCSS(options: RadialGradientOptions): string {
-  const shape = options.shape || 'circle'
-  const position = formatPosition(options.center)
-  const colorStops = formatColorStops(options.colors, options.stops)
-  
-  // Handle radius specification based on shape
-  let sizeSpec: string
-  if (shape === 'circle') {
-    sizeSpec = `${options.endRadius}px`
-  } else {
-    // For ellipse, use endRadius for both axes unless specified differently
-    sizeSpec = `${options.endRadius}px ${options.endRadius}px`
-  }
-  
-  return `radial-gradient(${shape} ${sizeSpec} at ${position}, ${colorStops})`
-}
-
-export function generateAngularGradientCSS(options: AngularGradientOptions): string {
-  const position = formatPosition(options.center)
-  const fromAngle = `from ${options.startAngle}deg`
-  const colorStops = formatColorStops(options.colors, options.stops)
-  
-  return `conic-gradient(${fromAngle} at ${position}, ${colorStops})`
-}
-
-export function generateConicGradientCSS(options: ConicGradientOptions): string {
-  const position = formatPosition(options.center)
-  const fromAngle = `from ${options.startAngle}deg`
-  const colorStops = formatColorStops(options.colors, options.stops)
-  
-  return `conic-gradient(${fromAngle} at ${position}, ${colorStops})`
-}
-
-export function generateRepeatingLinearGradientCSS(options: RepeatingLinearGradientOptions): string {
-  const colorStops = options.colors.map((color, index) => {
-    const resolvedColor = resolveColor(color)
-    const stop = options.colorStops[index] || `${index * 10}px`
-    return `${resolvedColor} ${stop}`
-  }).join(', ')
-  
-  return `repeating-linear-gradient(${options.direction}, ${colorStops})`
-}
-
-export function generateRepeatingRadialGradientCSS(options: RepeatingRadialGradientOptions): string {
-  const shape = options.shape || 'circle'
-  const position = formatPosition(options.center)
-  const colorStops = options.colors.map((color, index) => {
-    const resolvedColor = resolveColor(color)
-    const stop = options.colorStops[index] || `${index * 10}px`
-    return `${resolvedColor} ${stop}`
-  }).join(', ')
-  
-  return `repeating-radial-gradient(${shape} at ${position}, ${colorStops})`
-}
-
-export function generateEllipticalGradientCSS(options: EllipticalGradientOptions): string {
-  const position = formatPosition(options.center)
-  const colorStops = formatColorStops(options.colors, options.stops)
-  
-  return `radial-gradient(ellipse ${options.radiusX}px ${options.radiusY}px at ${position}, ${colorStops})`
-}
-
-export function gradientToCSS(gradient: GradientDefinition): string {
-  switch (gradient.type) {
-    case 'linear':
-      return generateLinearGradientCSS(gradient.options as LinearGradientOptions)
-    case 'radial':
-      return generateRadialGradientCSS(gradient.options as RadialGradientOptions)
-    case 'angular':
-      return generateAngularGradientCSS(gradient.options as AngularGradientOptions)
-    case 'conic':
-      return generateConicGradientCSS(gradient.options as ConicGradientOptions)
-    case 'repeating-linear':
-      return generateRepeatingLinearGradientCSS(gradient.options as RepeatingLinearGradientOptions)
-    case 'repeating-radial':
-      return generateRepeatingRadialGradientCSS(gradient.options as RepeatingRadialGradientOptions)
-    case 'elliptical':
-      return generateEllipticalGradientCSS(gradient.options as EllipticalGradientOptions)
-    default:
-      throw new Error(`Unknown gradient type: ${gradient.type}`)
-  }
-}