@tachui/core 0.7.0-alpha1

package/src/modifiers/filters.ts

@@ -0,0 +1,501 @@
+/**
+ * Filter Modifiers - CSS filter effects system
+ *
+ * Provides comprehensive CSS filter capabilities including blur, brightness,
+ * contrast, saturation, and other visual effects for enhanced styling.
+ */
+
+import type { DOMNode } from '../runtime/types'
+import { BaseModifier } from './base'
+import type { ModifierContext, ReactiveModifierProps } from './types'
+
+export interface FilterConfig {
+  blur?: number            // Blur radius in pixels
+  brightness?: number      // Brightness multiplier (1 = normal, >1 brighter, <1 darker)
+  contrast?: number        // Contrast multiplier (1 = normal, >1 more contrast, <1 less contrast)
+  saturate?: number        // Saturation multiplier (1 = normal, >1 more saturated, 0 = grayscale)
+  sepia?: number          // Sepia effect (0-1, where 1 is full sepia)
+  hueRotate?: string      // Hue rotation (e.g., '90deg', '0.25turn')
+  invert?: number         // Invert colors (0-1, where 1 is full invert)
+  opacity?: number        // Opacity filter (0-1, alternative to CSS opacity)
+  dropShadow?: string     // Drop shadow filter (e.g., '2px 2px 4px rgba(0,0,0,0.5)')
+  grayscale?: number      // Grayscale effect (0-1, where 1 is full grayscale)
+}
+
+export interface FilterOptions {
+  filter?: FilterConfig | string
+}
+
+export type ReactiveFilterOptions = ReactiveModifierProps<FilterOptions>
+
+export class FilterModifier extends BaseModifier<FilterOptions> {
+  readonly type = 'filter'
+  readonly priority = 30
+
+  constructor(options: ReactiveFilterOptions) {
+    const resolvedOptions: FilterOptions = {}
+    for (const [key, value] of Object.entries(options)) {
+      if (typeof value === 'function' && 'peek' in value) {
+        ;(resolvedOptions as any)[key] = (value as any).peek()
+      } else {
+        ;(resolvedOptions as any)[key] = value
+      }
+    }
+    super(resolvedOptions)
+  }
+
+  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
+    if (!context.element) return
+
+    const styles = this.computeFilterStyles(this.properties)
+    this.applyStyles(context.element, styles)
+    
+    return undefined
+  }
+
+  private computeFilterStyles(props: FilterOptions) {
+    const styles: Record<string, string> = {}
+
+    if (props.filter) {
+      const filterValue = typeof props.filter === 'string'
+        ? props.filter
+        : this.generateFilterCSS(props.filter)
+      
+      styles.filter = filterValue
+    }
+
+    return styles
+  }
+
+  private generateFilterCSS(config: FilterConfig): string {
+    const filters: string[] = []
+
+    Object.entries(config).forEach(([filterType, value]) => {
+      switch (filterType) {
+        case 'blur':
+          filters.push(`blur(${value}px)`)
+          break
+        case 'brightness':
+          filters.push(`brightness(${value})`)
+          break
+        case 'contrast':
+          filters.push(`contrast(${value})`)
+          break
+        case 'saturate':
+          filters.push(`saturate(${value})`)
+          break
+        case 'sepia':
+          filters.push(`sepia(${value})`)
+          break
+        case 'hueRotate':
+          filters.push(`hue-rotate(${value})`)
+          break
+        case 'invert':
+          filters.push(`invert(${value})`)
+          break
+        case 'opacity':
+          filters.push(`opacity(${value})`)
+          break
+        case 'dropShadow':
+          filters.push(`drop-shadow(${value})`)
+          break
+        case 'grayscale':
+          filters.push(`grayscale(${value})`)
+          break
+      }
+    })
+
+    return filters.join(' ')
+  }
+}
+
+// ============================================================================
+// Filter Functions
+// ============================================================================
+
+/**
+ * General filter modifier with flexible configuration
+ *
+ * @example
+ * ```typescript
+ * .filter({ blur: 5, brightness: 1.2, contrast: 1.1 })
+ * .filter('blur(3px) sepia(0.8)')  // Direct CSS filter string
+ * ```
+ */
+export function filter(config: FilterConfig | string): FilterModifier {
+  return new FilterModifier({ filter: config })
+}
+
+/**
+ * Blur filter effect
+ *
+ * @example
+ * ```typescript
+ * .blur(5)      // 5px blur
+ * .blur(0.5)    // Subtle 0.5px blur
+ * .blur(10)     // Heavy 10px blur
+ * ```
+ */
+export function blur(radius: number): FilterModifier {
+  return new FilterModifier({ filter: { blur: radius } })
+}
+
+/**
+ * Brightness adjustment filter
+ *
+ * @example
+ * ```typescript
+ * .brightness(1.2)    // 20% brighter
+ * .brightness(0.8)    // 20% darker
+ * .brightness(2.0)    // Double brightness
+ * ```
+ */
+export function brightness(value: number): FilterModifier {
+  return new FilterModifier({ filter: { brightness: value } })
+}
+
+/**
+ * Contrast adjustment filter
+ *
+ * @example
+ * ```typescript
+ * .contrast(1.5)     // 50% more contrast
+ * .contrast(0.7)     // 30% less contrast
+ * .contrast(2.0)     // Double contrast
+ * ```
+ */
+export function contrast(value: number): FilterModifier {
+  return new FilterModifier({ filter: { contrast: value } })
+}
+
+/**
+ * Saturation adjustment filter
+ *
+ * @example
+ * ```typescript
+ * .saturate(1.5)     // 50% more saturated
+ * .saturate(0.5)     // 50% less saturated  
+ * .saturate(0)       // Completely desaturated (grayscale)
+ * .saturate(2.0)     // Double saturation
+ * ```
+ */
+export function saturate(value: number): FilterModifier {
+  return new FilterModifier({ filter: { saturate: value } })
+}
+
+/**
+ * Grayscale filter effect
+ *
+ * @example
+ * ```typescript
+ * .grayscale(1)      // Full grayscale
+ * .grayscale(0.5)    // 50% grayscale
+ * .grayscale(0)      // No grayscale (full color)
+ * ```
+ */
+export function grayscale(value: number): FilterModifier {
+  return new FilterModifier({ filter: { grayscale: value } })
+}
+
+/**
+ * Sepia filter effect for vintage look
+ *
+ * @example
+ * ```typescript
+ * .sepia(1)        // Full sepia effect
+ * .sepia(0.6)      // 60% sepia effect  
+ * .sepia(0)        // No sepia effect
+ * ```
+ */
+export function sepia(value: number): FilterModifier {
+  return new FilterModifier({ filter: { sepia: value } })
+}
+
+/**
+ * Hue rotation filter effect
+ *
+ * @example
+ * ```typescript
+ * .hueRotate('90deg')     // Rotate hue by 90 degrees
+ * .hueRotate('0.25turn')  // Quarter turn hue rotation
+ * .hueRotate('180deg')    // Half rotation (complementary colors)
+ * ```
+ */
+export function hueRotate(angle: string): FilterModifier {
+  return new FilterModifier({ filter: { hueRotate: angle } })
+}
+
+/**
+ * Invert colors filter
+ *
+ * @example
+ * ```typescript
+ * .invert(1)       // Full color inversion
+ * .invert(0.5)     // 50% color inversion
+ * .invert(0)       // No inversion (normal colors)
+ * ```
+ */
+export function invert(value: number): FilterModifier {
+  return new FilterModifier({ filter: { invert: value } })
+}
+
+/**
+ * Drop shadow filter (alternative to box-shadow)
+ *
+ * @example
+ * ```typescript
+ * .dropShadow('2px 2px 4px rgba(0,0,0,0.3)')
+ * .dropShadow('0 4px 8px #000')
+ * .dropShadow('inset 0 0 10px rgba(255,255,255,0.5)')
+ * ```
+ */
+export function dropShadow(shadow: string): FilterModifier {
+  return new FilterModifier({ filter: { dropShadow: shadow } })
+}
+
+// ============================================================================
+// Filter Combinations - Common filter effect patterns
+// ============================================================================
+
+/**
+ * Vintage photo effect - sepia + contrast + slight blur
+ *
+ * @example
+ * ```typescript
+ * .vintagePhoto()           // Default vintage effect
+ * .vintagePhoto(0.8, 1.2)   // Custom sepia and contrast
+ * ```
+ */
+export function vintagePhoto(sepiaAmount: number = 0.7, contrastAmount: number = 1.1): FilterModifier {
+  return new FilterModifier({ 
+    filter: { 
+      sepia: sepiaAmount, 
+      contrast: contrastAmount,
+      blur: 0.3
+    } 
+  })
+}
+
+/**
+ * High contrast black and white effect
+ *
+ * @example
+ * ```typescript
+ * .blackAndWhite()          // Full grayscale with high contrast
+ * .blackAndWhite(1.5)       // Custom contrast level
+ * ```
+ */
+export function blackAndWhite(contrastAmount: number = 1.3): FilterModifier {
+  return new FilterModifier({ 
+    filter: { 
+      grayscale: 1, 
+      contrast: contrastAmount 
+    } 
+  })
+}
+
+/**
+ * Vibrant color enhancement
+ *
+ * @example
+ * ```typescript
+ * .vibrant()               // Enhanced saturation and contrast
+ * .vibrant(1.4, 1.1)       // Custom saturation and contrast
+ * ```
+ */
+export function vibrant(saturationAmount: number = 1.3, contrastAmount: number = 1.05): FilterModifier {
+  return new FilterModifier({ 
+    filter: { 
+      saturate: saturationAmount, 
+      contrast: contrastAmount 
+    } 
+  })
+}
+
+/**
+ * Warm color temperature effect
+ *
+ * @example
+ * ```typescript
+ * .warmTone()              // Warm hue shift with brightness
+ * .warmTone('15deg')       // Custom hue rotation
+ * ```
+ */
+export function warmTone(hueShift: string = '10deg'): FilterModifier {
+  return new FilterModifier({ 
+    filter: { 
+      hueRotate: hueShift, 
+      brightness: 1.05,
+      saturate: 1.1
+    } 
+  })
+}
+
+/**
+ * Cool color temperature effect
+ *
+ * @example
+ * ```typescript
+ * .coolTone()              // Cool hue shift
+ * .coolTone('-20deg')      // Custom hue rotation
+ * ```
+ */
+export function coolTone(hueShift: string = '-15deg'): FilterModifier {
+  return new FilterModifier({ 
+    filter: { 
+      hueRotate: hueShift, 
+      brightness: 0.98,
+      saturate: 1.05
+    } 
+  })
+}
+
+/**
+ * Faded/washed out effect
+ *
+ * @example
+ * ```typescript
+ * .faded()                 // Reduced contrast and saturation
+ * .faded(0.8, 0.7)         // Custom contrast and saturation
+ * ```
+ */
+export function faded(contrastAmount: number = 0.85, saturationAmount: number = 0.75): FilterModifier {
+  return new FilterModifier({ 
+    filter: { 
+      contrast: contrastAmount, 
+      saturate: saturationAmount,
+      brightness: 1.1
+    } 
+  })
+}
+
+/**
+ * High-key photography effect - bright and airy
+ *
+ * @example
+ * ```typescript
+ * .highKey()               // Bright, airy effect
+ * .highKey(1.3, 0.9)       // Custom brightness and contrast
+ * ```
+ */
+export function highKey(brightnessAmount: number = 1.2, contrastAmount: number = 0.85): FilterModifier {
+  return new FilterModifier({ 
+    filter: { 
+      brightness: brightnessAmount, 
+      contrast: contrastAmount 
+    } 
+  })
+}
+
+/**
+ * Low-key photography effect - dark and moody
+ *
+ * @example
+ * ```typescript
+ * .lowKey()                // Dark, moody effect  
+ * .lowKey(0.8, 1.4)        // Custom brightness and contrast
+ * ```
+ */
+export function lowKey(brightnessAmount: number = 0.85, contrastAmount: number = 1.3): FilterModifier {
+  return new FilterModifier({ 
+    filter: { 
+      brightness: brightnessAmount, 
+      contrast: contrastAmount 
+    } 
+  })
+}
+
+/**
+ * Soft focus effect - subtle blur with brightness
+ *
+ * @example
+ * ```typescript
+ * .softFocus()             // Subtle blur with glow effect
+ * .softFocus(1.5)          // Custom blur amount
+ * ```
+ */
+export function softFocus(blurAmount: number = 1): FilterModifier {
+  return new FilterModifier({ 
+    filter: { 
+      blur: blurAmount, 
+      brightness: 1.05 
+    } 
+  })
+}
+
+// ============================================================================
+// Accessibility and Theme Filters
+// ============================================================================
+
+/**
+ * High contrast mode for accessibility
+ */
+export function highContrastMode(): FilterModifier {
+  return new FilterModifier({ 
+    filter: { 
+      contrast: 2.0,
+      brightness: 1.1
+    } 
+  })
+}
+
+/**
+ * Reduced motion safe blur (very subtle)
+ */
+export function subtleBlur(): FilterModifier {
+  return new FilterModifier({ filter: { blur: 0.5 } })
+}
+
+/**
+ * Dark mode invert filter
+ */
+export function darkModeInvert(): FilterModifier {
+  return new FilterModifier({ 
+    filter: { 
+      invert: 1,
+      hueRotate: '180deg'
+    } 
+  })
+}
+
+// ============================================================================
+// SwiftUI Compatibility Functions
+// ============================================================================
+
+/**
+ * SwiftUI-compatible colorInvert modifier (full color inversion)
+ * 
+ * @example
+ * ```typescript
+ * .colorInvert()   // Full color inversion (equivalent to .invert(1))
+ * ```
+ */
+export function colorInvert(): FilterModifier {
+  return invert(1)
+}
+
+/**
+ * SwiftUI-compatible saturation modifier (alias for saturate)
+ * 
+ * @example
+ * ```typescript
+ * .saturation(1.5)   // 50% more saturated
+ * .saturation(0)     // Completely desaturated (grayscale)
+ * ```
+ */
+export function saturation(amount: number): FilterModifier {
+  return saturate(amount)
+}
+
+/**
+ * SwiftUI-compatible hueRotation modifier (alias for hueRotate)
+ * 
+ * @example
+ * ```typescript
+ * .hueRotation('90deg')     // Rotate hue by 90 degrees
+ * .hueRotation('0.25turn')  // Quarter turn hue rotation
+ * ```
+ */
+export function hueRotation(angle: string): FilterModifier {
+  return hueRotate(angle)
+}

package/src/modifiers/flexbox.ts

@@ -0,0 +1,180 @@
+/**
+ * Flexbox Modifier - comprehensive flexbox layout properties
+ *
+ * Provides a unified interface for flexbox properties
+ * including flex-grow, justify-content, align-items, etc.
+ */
+
+import type { DOMNode } from '../runtime/types'
+import { BaseModifier } from './base'
+import type { ModifierContext, ReactiveModifierProps } from './types'
+
+export interface FlexboxOptions {
+  flexGrow?: number
+  flexShrink?: number
+  flexBasis?: number | string
+  flex?: string
+  justifyContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly'
+  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
+  alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
+  flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse'
+  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse'
+  alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around'
+  gap?: number | string
+  rowGap?: number | string
+  columnGap?: number | string
+}
+
+export type ReactiveFlexboxOptions = ReactiveModifierProps<FlexboxOptions>
+
+export class FlexboxModifier extends BaseModifier<FlexboxOptions> {
+  readonly type = 'flexbox'
+  readonly priority = 60 // Priority 60 for flexbox layout
+
+  constructor(options: ReactiveFlexboxOptions) {
+    // Convert reactive options to regular options for immediate use
+    const resolvedOptions: FlexboxOptions = {}
+    for (const [key, value] of Object.entries(options)) {
+      if (typeof value === 'function' && 'peek' in value) {
+        ;(resolvedOptions as any)[key] = (value as any).peek()
+      } else {
+        ;(resolvedOptions as any)[key] = value
+      }
+    }
+    super(resolvedOptions)
+  }
+
+  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
+    if (!context.element) return
+
+    const styles = this.computeFlexboxStyles(this.properties)
+    this.applyStyles(context.element, styles)
+    
+    return undefined
+  }
+
+  private computeFlexboxStyles(props: FlexboxOptions) {
+    const styles: Record<string, string> = {}
+
+    if (props.flexGrow !== undefined) {
+      styles.flexGrow = props.flexGrow.toString()
+    }
+    if (props.flexShrink !== undefined) {
+      styles.flexShrink = props.flexShrink.toString()
+    }
+    if (props.flexBasis !== undefined) {
+      styles.flexBasis = this.toCSSValue(props.flexBasis)
+    }
+    if (props.flex !== undefined) {
+      styles.flex = props.flex
+    }
+    if (props.justifyContent !== undefined) {
+      styles.justifyContent = props.justifyContent
+    }
+    if (props.alignItems !== undefined) {
+      styles.alignItems = props.alignItems
+    }
+    if (props.alignSelf !== undefined) {
+      styles.alignSelf = props.alignSelf
+    }
+    if (props.flexDirection !== undefined) {
+      styles.flexDirection = props.flexDirection
+    }
+    if (props.flexWrap !== undefined) {
+      styles.flexWrap = props.flexWrap
+    }
+    if (props.alignContent !== undefined) {
+      styles.alignContent = props.alignContent
+    }
+    if (props.gap !== undefined) {
+      styles.gap = this.toCSSValue(props.gap)
+    }
+    if (props.rowGap !== undefined) {
+      styles.rowGap = this.toCSSValue(props.rowGap)
+    }
+    if (props.columnGap !== undefined) {
+      styles.columnGap = this.toCSSValue(props.columnGap)
+    }
+
+    return styles
+  }
+}
+
+/**
+ * Create a flexbox modifier with comprehensive flexbox properties
+ *
+ * @example
+ * ```typescript
+ * // Complete flexbox layout
+ * .flexbox({
+ *   flexGrow: 1,
+ *   justifyContent: 'center',
+ *   alignItems: 'stretch',
+ *   gap: 16
+ * })
+ *
+ * // Simple flex grow
+ * .flexGrow(1)
+ *
+ * // Justify content
+ * .justifyContent('space-between')
+ * ```
+ */
+export function flexbox(options: ReactiveFlexboxOptions): FlexboxModifier {
+  return new FlexboxModifier(options)
+}
+
+/**
+ * Convenience function for flex-grow
+ */
+export function flexGrow(value: number): FlexboxModifier {
+  return new FlexboxModifier({ flexGrow: value })
+}
+
+/**
+ * Convenience function for flex-shrink
+ */
+export function flexShrink(value: number): FlexboxModifier {
+  return new FlexboxModifier({ flexShrink: value })
+}
+
+/**
+ * Convenience function for justify-content
+ */
+export function justifyContent(value: FlexboxOptions['justifyContent']): FlexboxModifier {
+  return new FlexboxModifier({ justifyContent: value })
+}
+
+/**
+ * Convenience function for align-items
+ */
+export function alignItems(value: FlexboxOptions['alignItems']): FlexboxModifier {
+  return new FlexboxModifier({ alignItems: value })
+}
+
+/**
+ * Convenience function for gap
+ */
+export function gap(value: number | string): FlexboxModifier {
+  return new FlexboxModifier({ gap: value })
+}
+
+/**
+ * Convenience function for flex-direction
+ */
+export function flexDirection(value: FlexboxOptions['flexDirection']): FlexboxModifier {
+  return new FlexboxModifier({ flexDirection: value })
+}
+
+/**
+ * Convenience function for flex-wrap
+ */
+export function flexWrap(value: FlexboxOptions['flexWrap']): FlexboxModifier {
+  return new FlexboxModifier({ flexWrap: value })
+}