@tachui/core 0.7.0-alpha1

package/src/modifiers/size.ts

@@ -0,0 +1,208 @@
+/**
+ * Size Modifier - width, height, min/max dimensions
+ *
+ * Provides a unified interface for setting element dimensions
+ * with support for SwiftUI-style infinity constants.
+ */
+
+import type { DOMNode } from '../runtime/types'
+import type { Dimension } from '../constants/layout'
+import { dimensionToCSS, isInfinity, shouldExpandForInfinity } from '../constants/layout'
+import { BaseModifier } from './base'
+import type { ModifierContext, ReactiveModifierProps } from './types'
+
+export interface SizeOptions {
+  width?: Dimension
+  height?: Dimension
+  minWidth?: Dimension
+  maxWidth?: Dimension
+  minHeight?: Dimension
+  maxHeight?: Dimension
+}
+
+export type ReactiveSizeOptions = ReactiveModifierProps<SizeOptions>
+
+export class SizeModifier extends BaseModifier<SizeOptions> {
+  readonly type = 'size'
+  readonly priority = 80 // Priority 80 for layout
+
+  constructor(options: ReactiveSizeOptions) {
+    // Preserve reactive values; BaseModifier.applyStyles will create effects
+    super(options as unknown as SizeOptions)
+  }
+
+  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
+    if (!context.element) return
+
+    const styles = this.computeSizeStyles(this.properties)
+    this.applyStyles(context.element, styles)
+    
+    return undefined
+  }
+
+  private computeSizeStyles(props: SizeOptions) {
+    const styles: Record<string, any> = {}
+
+    // Check for infinity constraints and apply appropriate flex/size styles
+    const infinityResult = shouldExpandForInfinity(props)
+    Object.assign(styles, infinityResult.cssProps)
+
+    // Convert dimensions to CSS, handling infinity appropriately
+    if (props.width !== undefined) {
+      const cssValue = dimensionToCSS(props.width)
+      if (cssValue !== undefined && !isInfinity(props.width)) {
+        styles.width = cssValue
+      }
+    }
+    
+    if (props.height !== undefined) {
+      const cssValue = dimensionToCSS(props.height)
+      if (cssValue !== undefined && !isInfinity(props.height)) {
+        styles.height = cssValue
+      }
+    }
+    
+    if (props.minWidth !== undefined) {
+      const cssValue = dimensionToCSS(props.minWidth)
+      if (cssValue !== undefined) {
+        styles.minWidth = cssValue
+      }
+    }
+    
+    if (props.maxWidth !== undefined && !isInfinity(props.maxWidth)) {
+      const cssValue = dimensionToCSS(props.maxWidth)
+      if (cssValue !== undefined) {
+        styles.maxWidth = cssValue
+      }
+    } else if (isInfinity(props.maxWidth)) {
+      // Remove maxWidth constraint for infinity
+      styles.maxWidth = 'none'
+    }
+    
+    if (props.minHeight !== undefined) {
+      const cssValue = dimensionToCSS(props.minHeight)
+      if (cssValue !== undefined) {
+        styles.minHeight = cssValue
+      }
+    }
+    
+    if (props.maxHeight !== undefined && !isInfinity(props.maxHeight)) {
+      const cssValue = dimensionToCSS(props.maxHeight)
+      if (cssValue !== undefined) {
+        styles.maxHeight = cssValue
+      }
+    } else if (isInfinity(props.maxHeight)) {
+      // Remove maxHeight constraint for infinity
+      styles.maxHeight = 'none'
+    }
+
+    return styles
+  }
+}
+
+/**
+ * Create a size modifier with multiple dimension properties
+ * Now supports SwiftUI-style infinity for responsive layouts
+ *
+ * @example
+ * ```typescript
+ * // Set both width and height
+ * .size({ width: 200, height: 100 })
+ *
+ * // Set responsive width with constraints
+ * .size({ width: '100%', maxWidth: 800, minWidth: 320 })
+ *
+ * // SwiftUI-style infinity support
+ * .size({ width: infinity, height: 200 })
+ * .size({ maxWidth: infinity, maxHeight: infinity })
+ * ```
+ */
+export function size(options: ReactiveSizeOptions): SizeModifier {
+  return new SizeModifier(options)
+}
+
+/**
+ * Convenience function for setting width only
+ * Supports infinity for fill-available behavior
+ *
+ * @example
+ * ```typescript
+ * .width('100%')
+ * .width(280)
+ * .width(infinity) // Fill available space
+ * ```
+ */
+export function width(value: Dimension): SizeModifier {
+  return new SizeModifier({ width: value })
+}
+
+/**
+ * Convenience function for setting height only
+ * Supports infinity for fill-available behavior
+ *
+ * @example
+ * ```typescript
+ * .height('100vh')
+ * .height(64)
+ * .height(infinity) // Fill available space
+ * ```
+ */
+export function height(value: Dimension): SizeModifier {
+  return new SizeModifier({ height: value })
+}
+
+/**
+ * Convenience function for setting max-width only
+ * Supports infinity to remove width constraints
+ *
+ * @example
+ * ```typescript
+ * .maxWidth(800)
+ * .maxWidth('100%')
+ * .maxWidth(infinity) // Remove width constraints
+ * ```
+ */
+export function maxWidth(value: Dimension): SizeModifier {
+  return new SizeModifier({ maxWidth: value })
+}
+
+/**
+ * Convenience function for setting min-width only
+ *
+ * @example
+ * ```typescript
+ * .minWidth(320)
+ * .minWidth('50%')
+ * ```
+ */
+export function minWidth(value: Dimension): SizeModifier {
+  return new SizeModifier({ minWidth: value })
+}
+
+/**
+ * Convenience function for setting max-height only
+ * Supports infinity to remove height constraints
+ *
+ * @example
+ * ```typescript
+ * .maxHeight(600)
+ * .maxHeight('80vh')
+ * .maxHeight(infinity) // Remove height constraints
+ * ```
+ */
+export function maxHeight(value: Dimension): SizeModifier {
+  return new SizeModifier({ maxHeight: value })
+}
+
+/**
+ * Convenience function for setting min-height only
+ *
+ * @example
+ * ```typescript
+ * .minHeight(200)
+ * .minHeight('30vh')
+ * ```
+ */
+export function minHeight(value: Dimension): SizeModifier {
+  return new SizeModifier({ minHeight: value })
+}

package/src/modifiers/text.ts

@@ -0,0 +1,416 @@
+/**
+ * Text Modifiers Implementation
+ *
+ * Specialized text handling modifiers including line clamping, word breaking,
+ * overflow wrapping, and hyphenation control for enhanced typography.
+ */
+
+import type { DOMNode } from '../runtime/types'
+import { BaseModifier } from './base'
+import type { ModifierContext, ReactiveModifierProps } from './types'
+import { ModifierPriority } from './types'
+
+// ============================================================================
+// Line Clamp Modifier - Multi-line Text Truncation
+// ============================================================================
+
+export interface LineClampOptions {
+  lines: number
+}
+
+export type ReactiveLineClampOptions = ReactiveModifierProps<LineClampOptions>
+
+export class LineClampModifier extends BaseModifier<LineClampOptions> {
+  readonly type = 'lineClamp'
+  readonly priority = ModifierPriority.APPEARANCE + 15
+
+  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
+    if (!context.element) return
+
+    const { lines } = this.properties
+
+    // Validate lines in development mode
+    if (process.env.NODE_ENV === 'development') {
+      this.validateLines(lines)
+    }
+
+    // Apply line clamp styles
+    const styles = this.generateLineClampStyles(lines)
+    this.applyStyles(context.element, styles)
+    
+    return undefined
+  }
+
+  private generateLineClampStyles(lines: number): Record<string, string> {
+    const styles: Record<string, string> = {}
+
+    // Modern browsers: Use -webkit-line-clamp
+    styles.display = '-webkit-box'
+    styles.webkitLineClamp = String(lines)
+    styles.webkitBoxOrient = 'vertical'
+    styles.overflow = 'hidden'
+
+    // Additional properties for better cross-browser support
+    styles.textOverflow = 'ellipsis'
+    styles.wordWrap = 'break-word'
+
+    return styles
+  }
+
+  private validateLines(lines: number): void {
+    if (typeof lines !== 'number' || !Number.isInteger(lines) || lines < 1) {
+      console.warn('TachUI LineClamp Modifier: lines must be a positive integer')
+      return
+    }
+
+    if (lines > 10) {
+      console.info('TachUI LineClamp Modifier: Large line clamp values (>10) may impact readability. Consider if this is intentional.')
+    }
+  }
+}
+
+/**
+ * Line clamp modifier function - SwiftUI .lineLimit() equivalent
+ */
+export function lineClamp(lines: number): LineClampModifier {
+  return new LineClampModifier({ lines })
+}
+
+// ============================================================================
+// Word Break Modifier - Word Breaking Behavior
+// ============================================================================
+
+export type WordBreakValue = 'normal' | 'break-all' | 'keep-all' | 'break-word'
+
+export interface WordBreakOptions {
+  wordBreak: WordBreakValue
+}
+
+export type ReactiveWordBreakOptions = ReactiveModifierProps<WordBreakOptions>
+
+export class WordBreakModifier extends BaseModifier<WordBreakOptions> {
+  readonly type = 'wordBreak'
+  readonly priority = ModifierPriority.APPEARANCE + 8
+
+  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
+    if (!context.element) return
+
+    const { wordBreak } = this.properties
+
+    // Validate word break value in development mode
+    if (process.env.NODE_ENV === 'development') {
+      this.validateWordBreak(wordBreak)
+    }
+
+    this.applyStyles(context.element, { wordBreak })
+    
+    return undefined
+  }
+
+  private validateWordBreak(value: string): void {
+    const validValues: WordBreakValue[] = ['normal', 'break-all', 'keep-all', 'break-word']
+    
+    if (!validValues.includes(value as WordBreakValue)) {
+      console.warn(`TachUI WordBreak Modifier: Invalid word-break value "${value}". Valid values are: ${validValues.join(', ')}`)
+    }
+
+    if (value === 'break-word') {
+      console.info('TachUI WordBreak Modifier: "break-word" is deprecated. Consider using overflowWrap("break-word") instead.')
+    }
+  }
+}
+
+/**
+ * Word break modifier function
+ */
+export function wordBreak(value: WordBreakValue): WordBreakModifier {
+  return new WordBreakModifier({ wordBreak: value })
+}
+
+// ============================================================================
+// Overflow Wrap Modifier - Word Wrapping
+// ============================================================================
+
+export type OverflowWrapValue = 'normal' | 'break-word' | 'anywhere'
+
+export interface OverflowWrapOptions {
+  overflowWrap: OverflowWrapValue
+}
+
+export type ReactiveOverflowWrapOptions = ReactiveModifierProps<OverflowWrapOptions>
+
+export class OverflowWrapModifier extends BaseModifier<OverflowWrapOptions> {
+  readonly type = 'overflowWrap'
+  readonly priority = ModifierPriority.APPEARANCE + 9
+
+  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
+    if (!context.element) return
+
+    const { overflowWrap } = this.properties
+
+    // Validate overflow wrap value in development mode
+    if (process.env.NODE_ENV === 'development') {
+      this.validateOverflowWrap(overflowWrap)
+    }
+
+    this.applyStyles(context.element, { overflowWrap })
+    
+    return undefined
+  }
+
+  private validateOverflowWrap(value: string): void {
+    const validValues: OverflowWrapValue[] = ['normal', 'break-word', 'anywhere']
+    
+    if (!validValues.includes(value as OverflowWrapValue)) {
+      console.warn(`TachUI OverflowWrap Modifier: Invalid overflow-wrap value "${value}". Valid values are: ${validValues.join(', ')}`)
+    }
+  }
+}
+
+/**
+ * Overflow wrap modifier function
+ */
+export function overflowWrap(value: OverflowWrapValue): OverflowWrapModifier {
+  return new OverflowWrapModifier({ overflowWrap: value })
+}
+
+// ============================================================================
+// Hyphens Modifier - Hyphenation Control
+// ============================================================================
+
+export type HyphensValue = 'none' | 'manual' | 'auto'
+
+export interface HyphensOptions {
+  hyphens: HyphensValue
+}
+
+export type ReactiveHyphensOptions = ReactiveModifierProps<HyphensOptions>
+
+export class HyphensModifier extends BaseModifier<HyphensOptions> {
+  readonly type = 'hyphens'
+  readonly priority = ModifierPriority.APPEARANCE + 10
+
+  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
+    if (!context.element) return
+
+    const { hyphens } = this.properties
+
+    // Validate hyphens value in development mode
+    if (process.env.NODE_ENV === 'development') {
+      this.validateHyphens(hyphens)
+    }
+
+    this.applyStyles(context.element, { 
+      hyphens,
+      // Add vendor prefixes for better browser support
+      webkitHyphens: hyphens,
+      msHyphens: hyphens
+    })
+    
+    return undefined
+  }
+
+  private validateHyphens(value: string): void {
+    const validValues: HyphensValue[] = ['none', 'manual', 'auto']
+    
+    if (!validValues.includes(value as HyphensValue)) {
+      console.warn(`TachUI Hyphens Modifier: Invalid hyphens value "${value}". Valid values are: ${validValues.join(', ')}`)
+    }
+
+    if (value === 'auto') {
+      console.info('TachUI Hyphens Modifier: Automatic hyphenation requires proper lang attribute on the document or element for best results.')
+    }
+  }
+}
+
+/**
+ * Hyphens modifier function
+ */
+export function hyphens(value: HyphensValue): HyphensModifier {
+  return new HyphensModifier({ hyphens: value })
+}
+
+// ============================================================================
+// Background Clip Modifier (Moved from css-features.ts)
+// ============================================================================
+
+export interface BackgroundClipOptions {
+  backgroundImage?: string
+  backgroundClip?: 'text' | 'border-box' | 'padding-box' | 'content-box'
+  color?: string
+  webkitBackgroundClip?: string
+  webkitTextFillColor?: string
+}
+
+export type ReactiveBackgroundClipOptions = ReactiveModifierProps<BackgroundClipOptions>
+
+export class BackgroundClipModifier extends BaseModifier<BackgroundClipOptions> {
+  readonly type = 'backgroundClip'
+  readonly priority = 40
+
+  constructor(options: ReactiveBackgroundClipOptions) {
+    const resolvedOptions: BackgroundClipOptions = {}
+    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.computeBackgroundClipStyles(this.properties)
+    this.applyStyles(context.element, styles)
+    
+    return undefined
+  }
+
+  private computeBackgroundClipStyles(props: BackgroundClipOptions) {
+    const styles: Record<string, string> = {}
+
+    if (props.backgroundImage) {
+      styles.backgroundImage = props.backgroundImage
+    }
+
+    if (props.backgroundClip) {
+      styles.backgroundClip = props.backgroundClip
+      // Add webkit prefix for better browser support
+      styles.webkitBackgroundClip = props.backgroundClip
+    }
+
+    if (props.color) {
+      styles.color = props.color
+      // For text clipping, often need webkit-text-fill-color
+      if (props.backgroundClip === 'text') {
+        styles.webkitTextFillColor = props.color
+      }
+    }
+
+    // Add webkit-specific properties if provided
+    if (props.webkitBackgroundClip) {
+      styles.webkitBackgroundClip = props.webkitBackgroundClip
+    }
+
+    if (props.webkitTextFillColor) {
+      styles.webkitTextFillColor = props.webkitTextFillColor
+    }
+
+    return styles
+  }
+}
+
+/**
+ * Background clip modifier for advanced text effects
+ *
+ * @example
+ * ```typescript
+ * .backgroundClip(
+ *   'linear-gradient(45deg, #007AFF, #34C759)',
+ *   'text',
+ *   'transparent'
+ * )
+ * ```
+ */
+export function backgroundClip(
+  backgroundImage: string,
+  clip: 'text' | 'border-box' | 'padding-box' | 'content-box' = 'text',
+  color: string = 'transparent'
+): BackgroundClipModifier {
+  return new BackgroundClipModifier({
+    backgroundImage,
+    backgroundClip: clip,
+    color,
+    webkitBackgroundClip: clip,
+    webkitTextFillColor: color
+  })
+}
+
+/**
+ * Gradient text modifier - creates text with gradient colors
+ *
+ * @example
+ * ```typescript
+ * .gradientText('linear-gradient(45deg, #007AFF, #34C759)')
+ * .gradientText('radial-gradient(circle, #ff6b6b, #4ecdc4)')
+ * .gradientText('linear-gradient(90deg, #667eea 0%, #764ba2 100%)')
+ * ```
+ */
+export function gradientText(gradient: string): BackgroundClipModifier {
+  return new BackgroundClipModifier({
+    backgroundImage: gradient,
+    backgroundClip: 'text',
+    color: 'transparent',
+    webkitBackgroundClip: 'text',
+    webkitTextFillColor: 'transparent'
+  })
+}
+
+/**
+ * Background image modifier for text styling
+ *
+ * @example
+ * ```typescript
+ * .backgroundImage('url(texture.jpg)')
+ * .backgroundImage('linear-gradient(to right, #667eea, #764ba2)')
+ * ```
+ */
+export function backgroundImage(image: string): BackgroundClipModifier {
+  return new BackgroundClipModifier({ backgroundImage: image })
+}
+
+// ============================================================================
+// Common Gradient Text Presets
+// ============================================================================
+
+/**
+ * Blue to purple gradient text
+ */
+export function blueGradientText(): BackgroundClipModifier {
+  return gradientText('linear-gradient(45deg, #007AFF, #5856D6)')
+}
+
+/**
+ * Rainbow gradient text
+ */
+export function rainbowGradientText(): BackgroundClipModifier {
+  return gradientText('linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff80, #0080ff, #8000ff)')
+}
+
+/**
+ * Warm sunset gradient text
+ */
+export function sunsetGradientText(): BackgroundClipModifier {
+  return gradientText('linear-gradient(45deg, #ff6b6b, #feca57, #ff9ff3)')
+}
+
+/**
+ * Cool ocean gradient text
+ */
+export function oceanGradientText(): BackgroundClipModifier {
+  return gradientText('linear-gradient(45deg, #667eea, #764ba2)')
+}
+
+/**
+ * Green nature gradient text
+ */
+export function natureGradientText(): BackgroundClipModifier {
+  return gradientText('linear-gradient(45deg, #56ab2f, #a8e6cf)')
+}
+
+/**
+ * Gold metallic gradient text
+ */
+export function goldGradientText(): BackgroundClipModifier {
+  return gradientText('linear-gradient(45deg, #f7971e, #ffd200)')
+}
+
+/**
+ * Silver metallic gradient text  
+ */
+export function silverGradientText(): BackgroundClipModifier {
+  return gradientText('linear-gradient(45deg, #bdc3c7, #2c3e50)')
+}