@tachui/core 0.7.0-alpha1

package/src/gradients/__tests__/angular-gradient.test.ts

@@ -0,0 +1,111 @@
+import { describe, it, expect } from 'vitest'
+import { AngularGradient } from '../index'
+import { generateAngularGradientCSS } from '../css-generator'
+import { createColorAsset } from '../../assets'
+
+describe('AngularGradient', () => {
+  it('creates an angular gradient definition', () => {
+    const gradient = AngularGradient({
+      colors: ['#FF0000', '#00FF00', '#0000FF'],
+      center: 'center',
+      startAngle: 0,
+      endAngle: 360
+    })
+
+    expect(gradient.type).toBe('angular')
+    expect(gradient.options.colors).toEqual(['#FF0000', '#00FF00', '#0000FF'])
+    expect(gradient.options.center).toBe('center')
+    expect(gradient.options.startAngle).toBe(0)
+    expect(gradient.options.endAngle).toBe(360)
+  })
+
+  it('generates correct CSS for simple angular gradient', () => {
+    const css = generateAngularGradientCSS({
+      colors: ['#FF0000', '#00FF00'],
+      center: 'center',
+      startAngle: 0,
+      endAngle: 360
+    })
+
+    expect(css).toBe('conic-gradient(from 0deg at center, #FF0000, #00FF00)')
+  })
+
+  it('supports custom center positioning', () => {
+    const css = generateAngularGradientCSS({
+      colors: ['#FF0000', '#00FF00'],
+      center: 'top',
+      startAngle: 45,
+      endAngle: 225
+    })
+
+    expect(css).toBe('conic-gradient(from 45deg at top, #FF0000, #00FF00)')
+  })
+
+  it('supports array-based center positioning', () => {
+    const css = generateAngularGradientCSS({
+      colors: ['#FF0000', '#00FF00'],
+      center: [30, 70],
+      startAngle: 90,
+      endAngle: 270
+    })
+
+    expect(css).toBe('conic-gradient(from 90deg at 30% 70%, #FF0000, #00FF00)')
+  })
+
+  it('supports rainbow gradients', () => {
+    const css = generateAngularGradientCSS({
+      colors: ['#ff0000', '#ff7f00', '#ffff00', '#00ff00', '#0000ff', '#4b0082', '#9400d3'],
+      center: 'center',
+      startAngle: 0,
+      endAngle: 360
+    })
+
+    expect(css).toContain('conic-gradient(from 0deg at center,')
+    expect(css).toContain('#ff0000')
+    expect(css).toContain('#9400d3')
+  })
+
+  it('supports color stops', () => {
+    const css = generateAngularGradientCSS({
+      colors: ['#FF0000', '#FFFF00', '#00FF00'],
+      center: 'center',
+      startAngle: 0,
+      endAngle: 360,
+      stops: [0, 50, 100]
+    })
+
+    expect(css).toBe('conic-gradient(from 0deg at center, #FF0000 0%, #FFFF00 50%, #00FF00 100%)')
+  })
+
+  it('works with Asset colors', () => {
+    const redAsset = createColorAsset('#FF0000', '#AA0000', 'red-asset')
+    const blueAsset = createColorAsset('#0000FF', '#0000AA', 'blue-asset')
+
+    const css = generateAngularGradientCSS({
+      colors: [redAsset, blueAsset],
+      center: 'center',
+      startAngle: 0,
+      endAngle: 180
+    })
+
+    expect(css).toContain('conic-gradient(from 0deg at center,')
+    expect(css).toContain('#FF0000')
+    expect(css).toContain('#0000FF')
+  })
+
+  it('handles mixed static colors and Assets', () => {
+    const greenAsset = createColorAsset('#00FF00', '#00AA00', 'green-asset')
+
+    const css = generateAngularGradientCSS({
+      colors: ['#FF0000', greenAsset, '#0000FF'],
+      center: 'center',
+      startAngle: 45,
+      endAngle: 315
+    })
+
+    expect(css).toContain('conic-gradient(from 45deg at center,')
+    expect(css).toContain('#FF0000')
+    expect(css).toContain('#00FF00')
+    expect(css).toContain('#0000FF')
+  })
+})

package/src/gradients/__tests__/background-modifier.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { BackgroundModifier } from '../../modifiers/background'
+import { LinearGradient } from '../index'
+import { createColorAsset } from '../../assets'
+import type { ModifierContext } from '../../modifiers/types'
+
+describe('BackgroundModifier', () => {
+  let mockElement: HTMLElement
+  let mockContext: ModifierContext
+
+  beforeEach(() => {
+    mockElement = document.createElement('div')
+    mockContext = {
+      componentId: 'test-component',
+      element: mockElement,
+      phase: 'creation'
+    } as ModifierContext
+  })
+
+  it('applies string background', () => {
+    const modifier = new BackgroundModifier({
+      background: 'red'
+    })
+
+    modifier.apply({} as any, mockContext)
+
+    expect(mockElement.style.background).toBe('red')
+  })
+
+  it('applies gradient background', () => {
+    const gradient = LinearGradient({
+      colors: ['#FF0000', '#00FF00'],
+      startPoint: 'top',
+      endPoint: 'bottom'
+    })
+
+    const modifier = new BackgroundModifier({
+      background: gradient
+    })
+
+    modifier.apply({} as any, mockContext)
+
+    expect(mockElement.style.background).toBe('linear-gradient(to bottom, #FF0000, #00FF00)')
+  })
+
+  it('applies Asset background', () => {
+    const backgroundAsset = createColorAsset('white', 'black', 'test-bg')
+
+    const modifier = new BackgroundModifier({
+      background: backgroundAsset
+    })
+
+    modifier.apply({} as any, mockContext)
+
+    expect(mockElement.style.background).toBe('white')
+  })
+
+  it('has correct priority', () => {
+    const modifier = new BackgroundModifier({
+      background: '#FF0000'
+    })
+
+    expect(modifier.priority).toBe(95)
+    expect(modifier.type).toBe('background')
+  })
+
+  it('handles missing element gracefully', () => {
+    const modifier = new BackgroundModifier({
+      background: '#FF0000'
+    })
+
+    const contextWithoutElement = {
+      componentId: 'test-component',
+      phase: 'creation'
+    } as ModifierContext
+
+    expect(() => {
+      modifier.apply({} as any, contextWithoutElement)
+    }).not.toThrow()
+  })
+})

package/src/gradients/__tests__/comprehensive-gradients.test.ts

@@ -0,0 +1,296 @@
+import { describe, it, expect } from 'vitest'
+import { 
+  LinearGradient, 
+  RadialGradient, 
+  AngularGradient,
+  RepeatingLinearGradient,
+  RepeatingRadialGradient,
+  createGradientAsset
+} from '../index'
+import { gradientToCSS } from '../css-generator'
+import { BackgroundModifier } from '../../modifiers/background'
+import { createColorAsset } from '../../assets'
+import type { ModifierContext } from '../../modifiers/types'
+
+describe('Comprehensive Gradient Integration', () => {
+  let mockElement: HTMLElement
+  let mockContext: ModifierContext
+
+  beforeEach(() => {
+    mockElement = document.createElement('div')
+    mockContext = {
+      componentId: 'test-component',
+      element: mockElement,
+      phase: 'creation'
+    } as ModifierContext
+  })
+
+  describe('All Gradient Types with Background Modifier', () => {
+    it('applies LinearGradient through background modifier', () => {
+      const gradient = LinearGradient({
+        colors: ['#FF0000', '#00FF00'],
+        startPoint: 'top',
+        endPoint: 'bottom'
+      })
+
+      const modifier = new BackgroundModifier({ background: gradient })
+      modifier.apply({} as any, mockContext)
+
+      expect(mockElement.style.background).toBe('linear-gradient(to bottom, #FF0000, #00FF00)')
+    })
+
+    it('applies RadialGradient through background modifier', () => {
+      const gradient = RadialGradient({
+        colors: ['#FF0000', '#00FF00'],
+        center: 'center',
+        startRadius: 0,
+        endRadius: 100
+      })
+
+      const modifier = new BackgroundModifier({ background: gradient })
+      modifier.apply({} as any, mockContext)
+
+      expect(mockElement.style.background).toBe('radial-gradient(circle 100px at center, #FF0000, #00FF00)')
+    })
+
+    it('applies AngularGradient through background modifier', () => {
+      const gradient = AngularGradient({
+        colors: ['#FF0000', '#00FF00'],
+        center: 'center',
+        startAngle: 0,
+        endAngle: 360
+      })
+
+      const modifier = new BackgroundModifier({ background: gradient })
+      modifier.apply({} as any, mockContext)
+
+      expect(mockElement.style.background).toBe('conic-gradient(from 0deg at center, #FF0000, #00FF00)')
+    })
+
+    it('applies RepeatingLinearGradient through background modifier', () => {
+      const gradient = RepeatingLinearGradient({
+        colors: ['#FF0000', '#00FF00'],
+        direction: '45deg',
+        colorStops: ['0px', '20px']
+      })
+
+      const modifier = new BackgroundModifier({ background: gradient })
+      modifier.apply({} as any, mockContext)
+
+      expect(mockElement.style.background).toBe('repeating-linear-gradient(45deg, #FF0000 0px, #00FF00 20px)')
+    })
+
+    it('applies RepeatingRadialGradient through background modifier', () => {
+      const gradient = RepeatingRadialGradient({
+        colors: ['#FF0000', '#00FF00'],
+        center: 'center',
+        colorStops: ['0px', '30px']
+      })
+
+      const modifier = new BackgroundModifier({ background: gradient })
+      modifier.apply({} as any, mockContext)
+
+      expect(mockElement.style.background).toBe('repeating-radial-gradient(circle at center, #FF0000 0px, #00FF00 30px)')
+    })
+  })
+
+  describe('Asset Integration Across All Gradient Types', () => {
+    it('works with Asset colors in LinearGradient', () => {
+      const redAsset = createColorAsset('#FF0000', '#AA0000', 'red')
+      const blueAsset = createColorAsset('#0000FF', '#0000AA', 'blue')
+
+      const gradient = LinearGradient({
+        colors: [redAsset, blueAsset],
+        startPoint: 'top',
+        endPoint: 'bottom'
+      })
+
+      const css = gradientToCSS(gradient)
+      expect(css).toContain('#FF0000')
+      expect(css).toContain('#0000FF')
+    })
+
+    it('works with Asset colors in RadialGradient', () => {
+      const greenAsset = createColorAsset('#00FF00', '#00AA00', 'green')
+      const yellowAsset = createColorAsset('#FFFF00', '#AAAA00', 'yellow')
+
+      const gradient = RadialGradient({
+        colors: [greenAsset, yellowAsset],
+        center: 'center',
+        startRadius: 0,
+        endRadius: 50
+      })
+
+      const css = gradientToCSS(gradient)
+      expect(css).toContain('#00FF00')
+      expect(css).toContain('#FFFF00')
+    })
+
+    it('works with Asset colors in AngularGradient', () => {
+      const purpleAsset = createColorAsset('#800080', '#400040', 'purple')
+      const orangeAsset = createColorAsset('#FFA500', '#CC8400', 'orange')
+
+      const gradient = AngularGradient({
+        colors: [purpleAsset, orangeAsset],
+        center: 'center',
+        startAngle: 0,
+        endAngle: 180
+      })
+
+      const css = gradientToCSS(gradient)
+      expect(css).toContain('#800080')
+      expect(css).toContain('#FFA500')
+    })
+  })
+
+  describe('Theme-Reactive Gradient Assets', () => {
+    it('creates theme-reactive LinearGradient assets', () => {
+      const gradientAsset = createGradientAsset({
+        light: LinearGradient({
+          colors: ['#ffffff', '#f8f9fa'],
+          startPoint: 'top',
+          endPoint: 'bottom'
+        }),
+        dark: LinearGradient({
+          colors: ['#343a40', '#212529'],
+          startPoint: 'top',
+          endPoint: 'bottom'
+        })
+      })
+
+      expect(gradientAsset.resolve()).toContain('linear-gradient')
+    })
+
+    it('creates theme-reactive RadialGradient assets', () => {
+      const gradientAsset = createGradientAsset({
+        light: RadialGradient({
+          colors: ['#007bff', '#0056b3'],
+          center: 'center',
+          startRadius: 0,
+          endRadius: 100
+        }),
+        dark: RadialGradient({
+          colors: ['#0d6efd', '#0b5ed7'],
+          center: 'center',
+          startRadius: 0,
+          endRadius: 100
+        })
+      })
+
+      expect(gradientAsset.resolve()).toContain('radial-gradient')
+    })
+
+    it('creates theme-reactive AngularGradient assets', () => {
+      const gradientAsset = createGradientAsset({
+        light: AngularGradient({
+          colors: ['#20c997', '#17a2b8'],
+          center: 'center',
+          startAngle: 0,
+          endAngle: 360
+        }),
+        dark: AngularGradient({
+          colors: ['#20c997', '#0dcaf0'],
+          center: 'center',
+          startAngle: 0,
+          endAngle: 360
+        })
+      })
+
+      expect(gradientAsset.resolve()).toContain('conic-gradient')
+    })
+  })
+
+  describe('Advanced Color Stop Support', () => {
+    it('supports precise color stops in LinearGradient', () => {
+      const gradient = LinearGradient({
+        colors: ['#ff0000', '#ffff00', '#00ff00', '#00ffff', '#0000ff'],
+        startPoint: 'top',
+        endPoint: 'bottom',
+        stops: [0, 25, 50, 75, 100]
+      })
+
+      const css = gradientToCSS(gradient)
+      expect(css).toContain('#ff0000 0%')
+      expect(css).toContain('#ffff00 25%')
+      expect(css).toContain('#00ff00 50%')
+      expect(css).toContain('#00ffff 75%')
+      expect(css).toContain('#0000ff 100%')
+    })
+
+    it('supports precise color stops in RadialGradient', () => {
+      const gradient = RadialGradient({
+        colors: ['#ff0000', '#00ff00', '#0000ff'],
+        center: 'center',
+        startRadius: 0,
+        endRadius: 100,
+        stops: [0, 60, 100]
+      })
+
+      const css = gradientToCSS(gradient)
+      expect(css).toContain('#ff0000 0%')
+      expect(css).toContain('#00ff00 60%')
+      expect(css).toContain('#0000ff 100%')
+    })
+
+    it('supports precise color stops in AngularGradient', () => {
+      const gradient = AngularGradient({
+        colors: ['#ff0000', '#00ff00', '#0000ff'],
+        center: 'center',
+        startAngle: 0,
+        endAngle: 360,
+        stops: [0, 50, 100]
+      })
+
+      const css = gradientToCSS(gradient)
+      expect(css).toContain('#ff0000 0%')
+      expect(css).toContain('#00ff00 50%')
+      expect(css).toContain('#0000ff 100%')
+    })
+  })
+
+  describe('Complex Gradient Patterns', () => {
+    it('creates rainbow angular gradient', () => {
+      const rainbow = AngularGradient({
+        colors: [
+          '#ff0000', // Red
+          '#ff7f00', // Orange
+          '#ffff00', // Yellow
+          '#00ff00', // Green
+          '#0000ff', // Blue
+          '#4b0082', // Indigo
+          '#9400d3'  // Violet
+        ],
+        center: 'center',
+        startAngle: 0,
+        endAngle: 360
+      })
+
+      const css = gradientToCSS(rainbow)
+      expect(css).toContain('conic-gradient')
+      expect(css).toContain('#ff0000')
+      expect(css).toContain('#9400d3')
+    })
+
+    it('creates striped pattern with repeating linear gradient', () => {
+      const stripes = RepeatingLinearGradient({
+        colors: ['#000000', '#ffffff'],
+        direction: '90deg',
+        colorStops: ['0px', '10px']
+      })
+
+      const css = gradientToCSS(stripes)
+      expect(css).toBe('repeating-linear-gradient(90deg, #000000 0px, #ffffff 10px)')
+    })
+
+    it('creates concentric circles with repeating radial gradient', () => {
+      const circles = RepeatingRadialGradient({
+        colors: ['#ff0000', 'transparent'],
+        center: 'center',
+        colorStops: ['0px', '20px']
+      })
+
+      const css = gradientToCSS(circles)
+      expect(css).toBe('repeating-radial-gradient(circle at center, #ff0000 0px, transparent 20px)')
+    })
+  })
+})

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

@@ -0,0 +1,144 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { createGradientAsset } from '../gradient-asset'
+import { LinearGradient } from '../index'
+
+describe('GradientAsset', () => {
+  beforeEach(() => {
+    // Reset window.matchMedia mock
+    vi.clearAllMocks()
+  })
+
+  it('creates a gradient asset with light and dark themes', () => {
+    const lightGradient = LinearGradient({
+      colors: ['#FFFFFF', '#F0F0F0'],
+      startPoint: 'top',
+      endPoint: 'bottom'
+    })
+
+    const darkGradient = LinearGradient({
+      colors: ['#333333', '#000000'],
+      startPoint: 'top',
+      endPoint: 'bottom'
+    })
+
+    const gradientAsset = createGradientAsset({
+      light: lightGradient,
+      dark: darkGradient
+    })
+
+    expect(gradientAsset).toBeDefined()
+  })
+
+  it('resolves to light theme by default', () => {
+    const lightGradient = LinearGradient({
+      colors: ['#FFFFFF', '#F0F0F0'],
+      startPoint: 'top',
+      endPoint: 'bottom'
+    })
+
+    const darkGradient = LinearGradient({
+      colors: ['#333333', '#000000'],
+      startPoint: 'top',
+      endPoint: 'bottom'
+    })
+
+    const gradientAsset = createGradientAsset({
+      light: lightGradient,
+      dark: darkGradient
+    })
+
+    // Mock light theme
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation(() => ({
+        matches: false // Light theme
+      }))
+    })
+
+    const css = gradientAsset.resolve()
+    expect(css).toBe('linear-gradient(to bottom, #FFFFFF, #F0F0F0)')
+  })
+
+  it('resolves to dark theme when preferred', () => {
+    const lightGradient = LinearGradient({
+      colors: ['#FFFFFF', '#F0F0F0'],
+      startPoint: 'top',
+      endPoint: 'bottom'
+    })
+
+    const darkGradient = LinearGradient({
+      colors: ['#333333', '#000000'],
+      startPoint: 'top',
+      endPoint: 'bottom'
+    })
+
+    const gradientAsset = createGradientAsset({
+      light: lightGradient,
+      dark: darkGradient
+    })
+
+    // Mock dark theme
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation(() => ({
+        matches: true // Dark theme
+      }))
+    })
+
+    const css = gradientAsset.resolve()
+    expect(css).toBe('linear-gradient(to bottom, #333333, #000000)')
+  })
+
+  it('falls back to light theme if dark is not available', () => {
+    const lightGradient = LinearGradient({
+      colors: ['#FFFFFF', '#F0F0F0'],
+      startPoint: 'top',
+      endPoint: 'bottom'
+    })
+
+    const gradientAsset = createGradientAsset({
+      light: lightGradient,
+      dark: lightGradient // Same as light for this test
+    })
+
+    // Mock dark theme preference
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation(() => ({
+        matches: true // Dark theme
+      }))
+    })
+
+    const css = gradientAsset.resolve()
+    expect(css).toBe('linear-gradient(to bottom, #FFFFFF, #F0F0F0)')
+  })
+
+  it('works in server-side environment', () => {
+    const lightGradient = LinearGradient({
+      colors: ['#FFFFFF', '#F0F0F0'],
+      startPoint: 'top',
+      endPoint: 'bottom'
+    })
+
+    const darkGradient = LinearGradient({
+      colors: ['#333333', '#000000'],
+      startPoint: 'top',
+      endPoint: 'bottom'
+    })
+
+    const gradientAsset = createGradientAsset({
+      light: lightGradient,
+      dark: darkGradient
+    })
+
+    // Mock server environment (no window)
+    const originalWindow = global.window
+    delete (global as any).window
+
+    const css = gradientAsset.resolve()
+    expect(css).toBe('linear-gradient(to bottom, #FFFFFF, #F0F0F0)')
+
+    // Restore window
+    global.window = originalWindow
+  })
+})