@tachui/core 0.7.0-alpha1

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

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

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

@@ -0,0 +1,158 @@
+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}`)
+  }
+}