@tachui/core 0.7.0-alpha1

package/src/modifiers/base.ts

@@ -0,0 +1,1815 @@
+/**
+ * Base Modifier System Implementation
+ *
+ * Core modifier classes and utilities for the SwiftUI-inspired modifier system.
+ */
+
+import { createEffect, isComputed, isSignal, getThemeSignal } from '../reactive'
+import type { Signal } from '../reactive/types'
+import type { DOMNode } from '../runtime/types'
+import type {
+  CSSStyleProperties,
+  LifecycleModifierProps,
+  Modifier,
+  ModifierContext,
+  ReactiveModifierProps,
+  StyleComputationContext,
+} from './types'
+import { ModifierPriority } from './types'
+import { isInfinity, dimensionToCSS, shouldExpandForInfinity } from '../constants/layout'
+
+/**
+ * Abstract base modifier class
+ */
+export abstract class BaseModifier<TProps = {}> implements Modifier<TProps> {
+  abstract readonly type: string
+  abstract readonly priority: number
+
+  constructor(public readonly properties: TProps) {}
+
+  /**
+   * Apply the modifier to a DOM node
+   */
+  abstract apply(node: DOMNode, context: ModifierContext): DOMNode | undefined
+
+  /**
+   * Helper to resolve reactive properties
+   */
+  protected resolveReactiveProps<T extends Record<string, any>>(
+    props: ReactiveModifierProps<T>,
+    context: StyleComputationContext
+  ): T {
+    const resolved = {} as T
+
+    for (const [key, value] of Object.entries(props)) {
+      if (isSignal(value) || isComputed(value)) {
+        // Preserve the signal/computed - let applyStyles handle reactivity
+        resolved[key as keyof T] = value as T[keyof T]
+      } else {
+        // Static value
+        resolved[key as keyof T] = value
+      }
+    }
+
+    // Context parameter is kept for compatibility but not used in new approach
+    void context
+
+    return resolved
+  }
+
+  /**
+   * Apply a single style change to an element with reactive support
+   */
+  protected applyStyleChange(element: Element, property: string, value: any): void {
+    if (element instanceof HTMLElement) {
+      const cssProperty = this.toCSSProperty(property)
+
+      // Handle reactive values (signals and computed)
+      if (isSignal(value) || isComputed(value)) {
+        // Create reactive effect for this style property
+        createEffect(() => {
+          const currentValue = value()
+          const cssValue = String(currentValue)
+
+          // Check if value contains !important and handle it properly
+          if (cssValue.includes('!important')) {
+            const actualValue = cssValue.replace(/\s*!important\s*$/, '').trim()
+            element.style.setProperty(cssProperty, actualValue, 'important')
+          } else {
+            element.style.setProperty(cssProperty, cssValue)
+          }
+        })
+      } else {
+        // Handle static values
+        const cssValue = String(value)
+
+        // Check if value contains !important and handle it properly
+        if (cssValue.includes('!important')) {
+          const actualValue = cssValue.replace(/\s*!important\s*$/, '').trim()
+          element.style.setProperty(cssProperty, actualValue, 'important')
+        } else {
+          element.style.setProperty(cssProperty, cssValue)
+        }
+      }
+    }
+  }
+
+  /**
+   * Convert camelCase property to CSS kebab-case
+   */
+  protected toCSSProperty(property: string): string {
+    return property.replace(/([A-Z])/g, '-$1').toLowerCase()
+  }
+
+  /**
+   * Convert value to CSS value string
+   */
+  protected toCSSValue(value: any): string {
+    if (typeof value === 'number') {
+      return `${value}px`
+    }
+    return String(value)
+  }
+
+  /**
+   * Convert value to CSS value string with property-specific handling
+   */
+  protected toCSSValueForProperty(property: string, value: any): string {
+    if (typeof value === 'number') {
+      // Properties that should be unitless
+      const unitlessProperties = [
+        'opacity',
+        'z-index',
+        'line-height',
+        'flex-grow',
+        'flex-shrink',
+        'order',
+        'column-count',
+        'font-weight',
+      ]
+
+      if (unitlessProperties.includes(property)) {
+        return String(value)
+      }
+
+      return `${value}px`
+    }
+
+    // Properties that should be passed through as-is (no processing)
+    const passthroughProperties = [
+      'filter', // CSS filter strings should not be processed
+      'transform', // CSS transform strings
+      'clip-path' // CSS clip-path strings
+    ]
+
+    if (passthroughProperties.includes(property)) {
+      return String(value)
+    }
+
+    return String(value)
+  }
+
+  /**
+   * Apply multiple CSS properties to an element with reactive support
+   */
+  protected applyStyles(element: Element, styles: CSSStyleProperties): void {
+    // Check if element has a style property (for testing and real elements)
+    if (element instanceof HTMLElement || (element as any).style) {
+      const styleTarget = element instanceof HTMLElement ? element.style : (element as any).style
+
+      for (const [property, value] of Object.entries(styles)) {
+        if (value !== undefined) {
+          const cssProperty = this.toCSSProperty(property)
+
+          // Handle reactive values (signals and computed)
+          if (isSignal(value) || isComputed(value)) {
+            // Create reactive effect for this style property
+            createEffect(() => {
+              const currentValue = value()
+              const cssValue = this.toCSSValueForProperty(cssProperty, currentValue)
+
+              if (styleTarget.setProperty) {
+                // Check if value contains !important and handle it properly
+                if (typeof cssValue === 'string' && cssValue.includes('!important')) {
+                  const actualValue = cssValue.replace(/\s*!important\s*$/, '').trim()
+                  styleTarget.setProperty(cssProperty, actualValue, 'important')
+                } else {
+                  styleTarget.setProperty(cssProperty, cssValue)
+                }
+              } else {
+                ;(styleTarget as any)[cssProperty] = cssValue
+              }
+            })
+          } else {
+            // Handle static values
+            const cssValue = this.toCSSValueForProperty(cssProperty, value)
+
+            if (styleTarget.setProperty) {
+              // Check if value contains !important and handle it properly
+              if (typeof cssValue === 'string' && cssValue.includes('!important')) {
+                const actualValue = cssValue.replace(/\s*!important\s*$/, '').trim()
+                styleTarget.setProperty(cssProperty, actualValue, 'important')
+              } else {
+                styleTarget.setProperty(cssProperty, cssValue)
+              }
+            } else {
+              ;(styleTarget as any)[cssProperty] = cssValue
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Add CSS classes to an element
+   */
+  protected addClasses(element: Element, classes: string[]): void {
+    if (element instanceof HTMLElement) {
+      element.classList.add(...classes)
+    }
+  }
+
+  /**
+   * Remove CSS classes from an element
+   */
+  protected removeClasses(element: Element, classes: string[]): void {
+    if (element instanceof HTMLElement) {
+      element.classList.remove(...classes)
+    }
+  }
+
+  /**
+   * Create a style computation context
+   */
+  protected createStyleContext(
+    componentId: string,
+    element: Element,
+    modifiers: Modifier[]
+  ): StyleComputationContext {
+    return {
+      componentId,
+      element,
+      modifiers,
+      signals: new Set(),
+      cleanup: [],
+    }
+  }
+}
+
+/**
+ * Layout modifier for frame, padding, margin
+ */
+export class LayoutModifier extends BaseModifier {
+  readonly type = 'layout'
+  readonly priority = ModifierPriority.LAYOUT
+
+  apply(node: DOMNode, context: ModifierContext): DOMNode | undefined {
+    if (!node.element || !context.element) return
+
+    const styleContext = this.createStyleContext(context.componentId, context.element, [])
+
+    const styles = this.computeLayoutStyles(this.properties as any, styleContext)
+
+    this.applyStyles(context.element, styles)
+
+    // Handle offset separately for proper transform combining
+    const props = this.properties as any
+    if (props.offset && context.element instanceof HTMLElement) {
+      this.applyOffsetTransform(context.element, props.offset)
+    }
+
+    // Handle aspectRatio separately for reactive support
+    if (props.aspectRatio && context.element instanceof HTMLElement) {
+      this.applyAspectRatio(context.element, props.aspectRatio)
+    }
+
+    // Handle scaleEffect separately for proper transform combining (Phase 3 - Epic: Butternut)
+    if (props.scaleEffect && context.element instanceof HTMLElement) {
+      this.applyScaleTransform(context.element, props.scaleEffect)
+    }
+
+    // Handle absolutePosition separately for proper positioning (Phase 3 - Epic: Butternut)
+    if (props.position && context.element instanceof HTMLElement) {
+      this.applyAbsolutePosition(context.element, props.position)
+    }
+
+    // Handle zIndex separately for proper layering (Phase 3 - Epic: Butternut)
+    if (props.zIndex !== undefined && context.element instanceof HTMLElement) {
+      this.applyZIndex(context.element, props.zIndex)
+    }
+
+    return undefined
+  }
+
+  private applyOffsetTransform(element: HTMLElement, offset: { x?: any; y?: any }): void {
+    const { x, y } = offset
+
+    // Handle reactive values
+    if (isSignal(x) || isComputed(x) || isSignal(y) || isComputed(y)) {
+      createEffect(() => {
+        const currentX = isSignal(x) || isComputed(x) ? x() : (x ?? 0)
+        const currentY = isSignal(y) || isComputed(y) ? y() : (y ?? 0)
+
+        const offsetX = this.toCSSValue(currentX)
+        const offsetY = this.toCSSValue(currentY)
+        const translateValue = `translate(${offsetX}, ${offsetY})`
+
+        // Preserve existing transforms but replace any existing translate
+        const existingTransform = element.style.transform || ''
+        const existingTransforms = existingTransform
+          .split(' ')
+          .filter((t) => t && !t.startsWith('translate('))
+          .join(' ')
+
+        const newTransform = existingTransforms
+          ? `${existingTransforms} ${translateValue}`
+          : translateValue
+
+        element.style.transform = newTransform
+      })
+    } else {
+      // Handle static values
+      const currentX = x ?? 0
+      const currentY = y ?? 0
+
+      const offsetX = this.toCSSValue(currentX)
+      const offsetY = this.toCSSValue(currentY)
+      const translateValue = `translate(${offsetX}, ${offsetY})`
+
+      // Preserve existing transforms but replace any existing translate
+      const existingTransform = element.style.transform || ''
+      const existingTransforms = existingTransform
+        .split(' ')
+        .filter((t) => t && !t.startsWith('translate('))
+        .join(' ')
+
+      const newTransform = existingTransforms
+        ? `${existingTransforms} ${translateValue}`
+        : translateValue
+
+      element.style.transform = newTransform
+    }
+  }
+
+  private applyAspectRatio(
+    element: HTMLElement,
+    aspectRatio: { ratio?: any; contentMode?: 'fit' | 'fill' }
+  ): void {
+    const { ratio, contentMode } = aspectRatio
+
+    if (ratio !== undefined) {
+      // Handle reactive aspect ratio
+      if (isSignal(ratio) || isComputed(ratio)) {
+        createEffect(() => {
+          const currentRatio = typeof ratio === 'function' ? ratio() : ratio
+          element.style.aspectRatio = String(currentRatio)
+        })
+      } else {
+        element.style.aspectRatio = String(ratio)
+      }
+
+      // Set content mode
+      if (contentMode === 'fill') {
+        element.style.objectFit = 'cover'
+      } else {
+        element.style.objectFit = 'contain'
+      }
+    }
+  }
+
+  // Phase 3 - Epic: Butternut Transform Methods
+
+  private applyScaleTransform(
+    element: HTMLElement,
+    scaleEffect: { x?: any; y?: any; anchor?: string }
+  ): void {
+    const { x, y, anchor } = scaleEffect
+    const scaleX = x ?? 1
+    const scaleY = y ?? scaleX // Default to uniform scaling if y not provided
+
+    // Handle reactive values
+    if (isSignal(scaleX) || isComputed(scaleX) || isSignal(scaleY) || isComputed(scaleY)) {
+      createEffect(() => {
+        const currentX = isSignal(scaleX) || isComputed(scaleX) ? scaleX() : scaleX
+        const currentY = isSignal(scaleY) || isComputed(scaleY) ? scaleY() : scaleY
+
+        const scaleValue = `scale(${currentX}, ${currentY})`
+
+        // Set transform-origin based on anchor
+        element.style.transformOrigin = this.getTransformOrigin(anchor || 'center')
+
+        // Preserve existing transforms but replace any existing scale
+        const existingTransform = element.style.transform || ''
+        const existingTransforms = existingTransform
+          .replace(/\s*scale\([^)]*\)\s*/g, ' ')
+          .replace(/\s+/g, ' ')
+          .trim()
+
+        const newTransform = existingTransforms
+          ? `${existingTransforms} ${scaleValue}`
+          : scaleValue
+
+        element.style.transform = newTransform
+      })
+    } else {
+      // Handle static values
+      const scaleValue = `scale(${scaleX}, ${scaleY})`
+
+      // Set transform-origin based on anchor
+      element.style.transformOrigin = this.getTransformOrigin(anchor || 'center')
+
+      // Preserve existing transforms but replace any existing scale
+      const existingTransform = element.style.transform || ''
+      const existingTransforms = existingTransform
+        .replace(/\s*scale\([^)]*\)\s*/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim()
+
+      const newTransform = existingTransforms
+        ? `${existingTransforms} ${scaleValue}`
+        : scaleValue
+
+      element.style.transform = newTransform
+    }
+  }
+
+  private applyAbsolutePosition(element: HTMLElement, position: { x?: any; y?: any }): void {
+    const { x, y } = position
+
+    // Set position to absolute for SwiftUI-style absolute positioning
+    element.style.position = 'absolute'
+
+    // Handle reactive values
+    if (isSignal(x) || isComputed(x) || isSignal(y) || isComputed(y)) {
+      createEffect(() => {
+        const currentX = isSignal(x) || isComputed(x) ? x() : (x ?? 0)
+        const currentY = isSignal(y) || isComputed(y) ? y() : (y ?? 0)
+
+        element.style.left = this.toCSSValue(currentX)
+        element.style.top = this.toCSSValue(currentY)
+      })
+    } else {
+      // Handle static values
+      const currentX = x ?? 0
+      const currentY = y ?? 0
+
+      element.style.left = this.toCSSValue(currentX)
+      element.style.top = this.toCSSValue(currentY)
+    }
+  }
+
+  private applyZIndex(element: HTMLElement, zIndex: any): void {
+    // Handle reactive values
+    if (isSignal(zIndex) || isComputed(zIndex)) {
+      createEffect(() => {
+        const currentZIndex = zIndex()
+        element.style.zIndex = String(currentZIndex)
+      })
+    } else {
+      // Handle static values
+      element.style.zIndex = String(zIndex)
+    }
+  }
+
+  private getTransformOrigin(anchor: string): string {
+    const anchorMap: Record<string, string> = {
+      center: 'center center',
+      top: 'center top',
+      topLeading: 'left top',
+      topTrailing: 'right top',
+      bottom: 'center bottom',
+      bottomLeading: 'left bottom',
+      bottomTrailing: 'right bottom',
+      leading: 'left center',
+      trailing: 'right center',
+    }
+
+    return anchorMap[anchor] || 'center center'
+  }
+
+  private computeLayoutStyles(props: any, _context: StyleComputationContext): CSSStyleProperties {
+    const styles: CSSStyleProperties = {}
+
+    // Frame properties - handle infinity values properly
+    if (props.frame) {
+      const frame = props.frame
+
+      // Check for infinity constraints and apply appropriate flex/size styles
+      const infinityResult = shouldExpandForInfinity(frame)
+      Object.assign(styles, infinityResult.cssProps)
+
+      // Convert dimensions to CSS, handling infinity appropriately
+      // Don't apply explicit width/height if infinity expansion is happening
+      if (frame.width !== undefined) {
+        const cssValue = dimensionToCSS(frame.width)
+        if (cssValue !== undefined && !isInfinity(frame.width) && !infinityResult.expandWidth) {
+          styles.width = cssValue
+        }
+      }
+
+      if (frame.height !== undefined) {
+        const cssValue = dimensionToCSS(frame.height)
+        if (cssValue !== undefined && !isInfinity(frame.height) && !infinityResult.expandHeight) {
+          styles.height = cssValue
+        }
+      }
+
+      if (frame.minWidth !== undefined) {
+        const cssValue = dimensionToCSS(frame.minWidth)
+        if (cssValue !== undefined) {
+          styles.minWidth = cssValue
+        }
+      }
+
+      if (frame.maxWidth !== undefined && !isInfinity(frame.maxWidth)) {
+        const cssValue = dimensionToCSS(frame.maxWidth)
+        if (cssValue !== undefined) {
+          styles.maxWidth = cssValue
+        }
+      } else if (isInfinity(frame.maxWidth)) {
+        // SwiftUI compatibility: maxWidth infinity means expand to fill available width
+        // Remove maxWidth constraint and use flex properties for expansion
+        styles.maxWidth = 'none'
+        styles.flexGrow = '1 !important'
+        styles.flexShrink = '1 !important'
+        styles.flexBasis = '0% !important'
+        styles.alignSelf = 'stretch !important'
+      }
+
+      if (frame.minHeight !== undefined) {
+        const cssValue = dimensionToCSS(frame.minHeight)
+        if (cssValue !== undefined) {
+          styles.minHeight = cssValue
+        }
+      }
+
+      if (frame.maxHeight !== undefined && !isInfinity(frame.maxHeight)) {
+        const cssValue = dimensionToCSS(frame.maxHeight)
+        if (cssValue !== undefined) {
+          styles.maxHeight = cssValue
+        }
+      } else if (isInfinity(frame.maxHeight)) {
+        // SwiftUI compatibility: maxHeight infinity means expand to fill available height
+        // Remove maxHeight constraint and use flex properties for expansion
+        styles.maxHeight = 'none'
+        styles.flexGrow = '1 !important'
+        styles.flexShrink = '1 !important'
+        styles.flexBasis = '0% !important'
+        styles.alignSelf = 'stretch !important'
+      }
+    }
+
+    // Padding
+    if (props.padding !== undefined) {
+      if (typeof props.padding === 'number') {
+        styles.padding = this.toCSSValue(props.padding)
+      } else {
+        const p = props.padding
+        if (p.top !== undefined) styles.paddingTop = this.toCSSValue(p.top)
+        if (p.right !== undefined) styles.paddingRight = this.toCSSValue(p.right)
+        if (p.bottom !== undefined) styles.paddingBottom = this.toCSSValue(p.bottom)
+        if (p.left !== undefined) styles.paddingLeft = this.toCSSValue(p.left)
+      }
+    }
+
+    // Margin
+    if (props.margin !== undefined) {
+      if (typeof props.margin === 'number') {
+        styles.margin = this.toCSSValue(props.margin)
+      } else {
+        const m = props.margin
+        if (m.top !== undefined) styles.marginTop = this.toCSSValue(m.top)
+        if (m.right !== undefined) styles.marginRight = this.toCSSValue(m.right)
+        if (m.bottom !== undefined) styles.marginBottom = this.toCSSValue(m.bottom)
+        if (m.left !== undefined) styles.marginLeft = this.toCSSValue(m.left)
+      }
+    }
+
+    // Alignment
+    if (props.alignment) {
+      switch (props.alignment) {
+        case 'leading':
+          styles.textAlign = 'left'
+          styles.alignItems = 'flex-start'
+          break
+        case 'center':
+          styles.textAlign = 'center'
+          styles.alignItems = 'center'
+          break
+        case 'trailing':
+          styles.textAlign = 'right'
+          styles.alignItems = 'flex-end'
+          break
+        case 'top':
+          styles.alignItems = 'flex-start'
+          break
+        case 'bottom':
+          styles.alignItems = 'flex-end'
+          break
+      }
+    }
+
+    // Layout Priority
+    // In SwiftUI, layoutPriority determines which views get priority in sizing
+    // Higher priority views determine container size in ZStack
+    // We implement this using CSS flexbox properties for flexible layouts
+    if (props.layoutPriority !== undefined) {
+      const priority = Number(props.layoutPriority)
+
+      // Set flex properties based on priority
+      // Higher priority = less flex shrink, more flex grow
+      if (priority > 0) {
+        // High priority: Don't shrink, allow growth
+        styles.flexShrink = '0'
+        styles.flexGrow = String(Math.max(1, priority / 10))
+
+        // For ZStack containers, higher priority elements determine size
+        // We use z-index for layering and flex properties for sizing behavior
+        styles.zIndex = String(priority)
+
+        // In grid layouts, higher priority gets more space
+        styles.gridRowEnd = `span ${String(Math.min(10, Math.max(1, Math.ceil(priority / 10))))}`
+        styles.gridColumnEnd = `span ${String(Math.min(10, Math.max(1, Math.ceil(priority / 10))))}`
+      } else if (priority === 0) {
+        // Default priority: Normal flex behavior
+        styles.flexShrink = '1'
+        styles.flexGrow = '1'
+      } else {
+        // Low priority: Shrink more, grow less
+        styles.flexShrink = String(Math.abs(priority))
+        styles.flexGrow = '0'
+        styles.zIndex = String(priority)
+      }
+
+      // For containers that need to size based on highest priority child
+      // We use CSS custom properties that can be read by parent containers
+      if (styles && typeof styles === 'object' && 'setProperty' in styles) {
+        ;(styles as any).setProperty('--layout-priority', String(priority))
+      }
+    }
+
+    // Offset modifier (SwiftUI .offset(x, y))
+    // Note: Offset handling is done in the apply method with proper reactive support
+    // This is just for setting up the basic structure
+    if (props.offset) {
+      // The actual transform application happens in apply() method
+      // to handle both reactive and static values properly
+    }
+
+    // Aspect Ratio modifier (SwiftUI .aspectRatio(ratio, contentMode))
+    if (props.aspectRatio) {
+      const { ratio, contentMode } = props.aspectRatio
+
+      if (ratio !== undefined) {
+        // Apply CSS aspect-ratio property
+        styles.aspectRatio = typeof ratio === 'number' ? String(ratio) : ratio
+
+        // Handle content mode
+        if (contentMode === 'fill') {
+          styles.objectFit = 'cover'
+        } else {
+          styles.objectFit = 'contain'
+        }
+      }
+    }
+
+    // Fixed Size modifier (SwiftUI .fixedSize())
+    if (props.fixedSize) {
+      const { horizontal, vertical } = props.fixedSize
+
+      if (horizontal) {
+        styles.flexShrink = '0'
+        styles.width = 'max-content'
+      }
+      if (vertical) {
+        styles.flexShrink = '0'
+        styles.height = 'max-content'
+      }
+    }
+
+    return styles
+  }
+}
+
+/**
+ * Appearance modifier for colors, fonts, borders, shadows
+ */
+export class AppearanceModifier extends BaseModifier {
+  readonly type = 'appearance'
+  readonly priority = ModifierPriority.APPEARANCE
+
+  apply(node: DOMNode, context: ModifierContext): DOMNode | undefined {
+    if (!node.element || !context.element) {
+      return
+    }
+
+    const styleContext = this.createStyleContext(context.componentId, context.element, [])
+
+    const resolved = this.resolveReactiveProps(this.properties as any, styleContext)
+
+    // Handle Assets separately with theme reactivity
+    this.applyAssetBasedStyles(context.element, resolved)
+
+    // Handle non-Asset styles normally
+    const styles = this.computeAppearanceStyles(resolved)
+    this.applyStyles(context.element, styles)
+
+    return undefined
+  }
+
+  /**
+   * Apply Asset-based styles with theme reactivity
+   */
+  private applyAssetBasedStyles(element: Element, props: any): void {
+    // Get the shared theme signal
+    const themeSignal = getThemeSignal()
+
+    // Handle foregroundColor Asset
+    if (props.foregroundColor && this.isAsset(props.foregroundColor)) {
+      createEffect(() => {
+        // Watch theme changes to trigger re-resolution
+        themeSignal()
+        // Re-resolve Asset when theme changes
+        const resolvedColor = props.foregroundColor.resolve()
+        this.applyStyleChange(element, 'color', resolvedColor)
+      })
+    }
+
+    // Handle backgroundColor Asset
+    if (props.backgroundColor && this.isAsset(props.backgroundColor)) {
+      createEffect(() => {
+        // Watch theme changes to trigger re-resolution
+        themeSignal()
+        // Re-resolve Asset when theme changes
+        const resolvedColor = props.backgroundColor.resolve()
+        this.applyStyleChange(element, 'backgroundColor', resolvedColor)
+      })
+    }
+
+    // Handle border color Asset
+    if (props.border?.color && this.isAsset(props.border.color)) {
+      createEffect(() => {
+        // Watch theme changes
+        themeSignal()
+        // Re-resolve Asset when theme changes
+        const resolvedColor = props.border.color.resolve()
+        this.applyStyleChange(element, 'borderColor', resolvedColor)
+      })
+    }
+  }
+
+  /**
+   * Check if a value is an Asset object (including Asset proxies)
+   */
+  private isAsset(value: any): boolean {
+    return (
+      value !== null &&
+      value !== undefined &&
+      typeof value === 'object' &&
+      'resolve' in value &&
+      typeof value.resolve === 'function'
+    )
+  }
+
+  private computeAppearanceStyles(props: any): CSSStyleProperties {
+    const styles: CSSStyleProperties = {}
+
+    // Colors (skip Assets - they're handled reactively in applyAssetBasedStyles)
+    if (props.foregroundColor && !this.isAsset(props.foregroundColor)) {
+      styles.color = props.foregroundColor
+    }
+    if (props.backgroundColor && !this.isAsset(props.backgroundColor)) {
+      styles.backgroundColor = props.backgroundColor
+    }
+    if (props.opacity !== undefined) styles.opacity = props.opacity
+
+    // Font
+    if (props.font) {
+      const font = props.font
+      if (font.family) {
+        // Handle FontAsset objects that need to be resolved
+        if (typeof font.family === 'object' && font.family !== null && 'resolve' in font.family) {
+          styles.fontFamily = (font.family as any).resolve()
+        } else {
+          styles.fontFamily = font.family as string
+        }
+      }
+      if (font.size) styles.fontSize = this.toCSSValue(font.size)
+      if (font.weight) styles.fontWeight = String(font.weight)
+      if (font.style) styles.fontStyle = font.style
+    }
+
+    // Corner radius
+    if (props.cornerRadius !== undefined) {
+      styles.borderRadius = this.toCSSValue(props.cornerRadius)
+    }
+
+    // Border
+    if (props.border) {
+      const border = props.border
+      if (border.width !== undefined) styles.borderWidth = this.toCSSValue(border.width)
+      if (border.color && !this.isAsset(border.color)) {
+        styles.borderColor = border.color as string
+      }
+      if (border.style) styles.borderStyle = border.style
+    }
+
+    // Shadow
+    if (props.shadow) {
+      const shadow = props.shadow
+      const x = shadow.x || 0
+      const y = shadow.y || 0
+      const radius = shadow.radius || 0
+      const color = shadow.color || 'rgba(0,0,0,0.25)'
+      styles.boxShadow = `${x}px ${y}px ${radius}px ${color}`
+    }
+
+    // Clipped modifier (SwiftUI .clipped())
+    if (props.clipped) {
+      styles.overflow = 'hidden'
+    }
+
+    // Clip Shape modifier (SwiftUI .clipShape())
+    if (props.clipShape) {
+      const { shape, parameters } = props.clipShape
+
+      switch (shape) {
+        case 'circle':
+          styles.clipPath = 'circle(50%)'
+          break
+        case 'ellipse': {
+          const radiusX = parameters?.radiusX || '50%'
+          const radiusY = parameters?.radiusY || '50%'
+          styles.clipPath = `ellipse(${radiusX} ${radiusY} at center)`
+          break
+        }
+        case 'rect': {
+          const inset = parameters?.inset || 0
+          styles.clipPath = `inset(${inset}px)`
+          break
+        }
+        case 'polygon': {
+          const points = parameters?.points || '0% 0%, 100% 0%, 100% 100%, 0% 100%'
+          styles.clipPath = `polygon(${points})`
+          break
+        }
+      }
+    }
+
+    // Visual Effects (Phase 2 - Epic: Butternut)
+    const filters: string[] = []
+
+    if (props.blur !== undefined) {
+      filters.push(`blur(${props.blur}px)`)
+    }
+    if (props.brightness !== undefined) {
+      filters.push(`brightness(${props.brightness})`)
+    }
+    if (props.contrast !== undefined) {
+      filters.push(`contrast(${props.contrast})`)
+    }
+    if (props.saturation !== undefined) {
+      filters.push(`saturate(${props.saturation})`)
+    }
+    if (props.hueRotation !== undefined) {
+      filters.push(`hue-rotate(${props.hueRotation}deg)`)
+    }
+    if (props.grayscale !== undefined) {
+      filters.push(`grayscale(${props.grayscale})`)
+    }
+    if (props.colorInvert !== undefined) {
+      filters.push(`invert(${props.colorInvert})`)
+    }
+
+    if (filters.length > 0) {
+      styles.filter = filters.join(' ')
+    }
+
+    return styles
+  }
+}
+
+/**
+ * Interaction modifier for events and accessibility
+ */
+export class InteractionModifier extends BaseModifier {
+  readonly type = 'interaction'
+  readonly priority = ModifierPriority.INTERACTION
+
+  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
+    if (!context.element) return
+
+    const props = this.properties as any
+
+    // Event handlers
+    if (props.onTap) {
+      context.element.addEventListener('click', props.onTap)
+    }
+
+    if (props.onHover) {
+      context.element.addEventListener('mouseenter', () => props.onHover(true))
+      context.element.addEventListener('mouseleave', () => props.onHover(false))
+    }
+
+    if (props.onMouseEnter) {
+      context.element.addEventListener('mouseenter', props.onMouseEnter)
+    }
+
+    if (props.onMouseLeave) {
+      context.element.addEventListener('mouseleave', props.onMouseLeave)
+    }
+
+    if (props.onMouseDown) {
+      context.element.addEventListener('mousedown', props.onMouseDown)
+    }
+
+    if (props.onMouseUp) {
+      context.element.addEventListener('mouseup', props.onMouseUp)
+    }
+
+    if (props.onDragStart) {
+      context.element.addEventListener('dragstart', props.onDragStart)
+    }
+
+    if (props.onDragOver) {
+      context.element.addEventListener('dragover', props.onDragOver)
+    }
+
+    if (props.onDragLeave) {
+      context.element.addEventListener('dragleave', props.onDragLeave)
+    }
+
+    if (props.onDrop) {
+      context.element.addEventListener('drop', props.onDrop)
+    }
+
+    // Additional mouse events
+    if (props.onDoubleClick) {
+      context.element.addEventListener('dblclick', props.onDoubleClick)
+    }
+
+    if (props.onContextMenu) {
+      context.element.addEventListener('contextmenu', props.onContextMenu)
+    }
+
+    // Focus events
+    if (props.onFocus) {
+      context.element.addEventListener('focus', () => props.onFocus(true))
+      context.element.addEventListener('blur', () => props.onFocus(false))
+    }
+
+    if (props.onBlur) {
+      context.element.addEventListener('blur', () => props.onBlur(false))
+    }
+
+    // Keyboard events
+    if (props.onKeyPress) {
+      context.element.addEventListener('keypress', props.onKeyPress)
+    }
+
+    if (props.onKeyDown) {
+      context.element.addEventListener('keydown', props.onKeyDown)
+    }
+
+    if (props.onKeyUp) {
+      context.element.addEventListener('keyup', props.onKeyUp)
+    }
+
+    // Scroll and wheel events
+    if (props.onScroll) {
+      context.element.addEventListener('scroll', props.onScroll, { passive: true })
+    }
+
+    if (props.onWheel) {
+      context.element.addEventListener('wheel', props.onWheel, { passive: false })
+    }
+
+    // Input events
+    if (props.onInput) {
+      context.element.addEventListener('input', props.onInput)
+    }
+
+    if (props.onChange) {
+      context.element.addEventListener('change', (event) => {
+        const target = event.target as HTMLInputElement
+        const value = target.value || target.textContent || ''
+        props.onChange(value, event)
+      })
+    }
+
+    // Clipboard events
+    if (props.onCopy) {
+      context.element.addEventListener('copy', props.onCopy)
+    }
+
+    if (props.onCut) {
+      context.element.addEventListener('cut', props.onCut)
+    }
+
+    if (props.onPaste) {
+      context.element.addEventListener('paste', props.onPaste)
+    }
+
+    // Selection events
+    if (props.onSelect) {
+      context.element.addEventListener('select', props.onSelect)
+    }
+
+    // Disabled state
+    if (props.disabled !== undefined) {
+      if (context.element instanceof HTMLElement) {
+        if (props.disabled) {
+          context.element.setAttribute('disabled', 'true')
+          context.element.style.pointerEvents = 'none'
+          context.element.style.opacity = '0.6'
+        } else {
+          context.element.removeAttribute('disabled')
+          context.element.style.pointerEvents = ''
+          context.element.style.opacity = ''
+        }
+      }
+    }
+
+    // Draggable state
+    if (props.draggable !== undefined) {
+      if (context.element instanceof HTMLElement) {
+        context.element.draggable = props.draggable
+      }
+    }
+
+    // Accessibility
+    if (props.accessibilityLabel) {
+      context.element.setAttribute('aria-label', props.accessibilityLabel)
+    }
+
+    if (props.accessibilityHint) {
+      context.element.setAttribute('aria-describedby', props.accessibilityHint)
+    }
+
+    // Advanced Gesture Modifiers (Phase 4 - Epic: Butternut)
+    if (props.onLongPressGesture) {
+      this.setupLongPressGesture(context.element, props.onLongPressGesture)
+    }
+
+    if (props.keyboardShortcut) {
+      this.setupKeyboardShortcut(context.element, props.keyboardShortcut)
+    }
+
+    if (props.focused !== undefined) {
+      this.setupFocusManagement(context.element, props.focused)
+    }
+
+    if (props.focusable) {
+      this.setupFocusable(context.element, props.focusable)
+    }
+
+    if (props.onContinuousHover) {
+      this.setupContinuousHover(context.element, props.onContinuousHover)
+    }
+
+    if (props.allowsHitTesting !== undefined) {
+      this.setupHitTesting(context.element, props.allowsHitTesting)
+    }
+
+    return undefined
+  }
+
+  // Phase 4 Advanced Gesture Methods
+
+  /**
+   * Setup long press gesture with timing and distance constraints
+   */
+  private setupLongPressGesture(
+    element: Element,
+    options: {
+      minimumDuration?: number
+      maximumDistance?: number
+      perform: () => void
+      onPressingChanged?: (isPressing: boolean) => void
+    }
+  ): void {
+    const minimumDuration = options.minimumDuration ?? 500 // ms
+    const maximumDistance = options.maximumDistance ?? 10 // px
+
+    let timeoutId: number | undefined
+    let startPoint: { x: number; y: number } | null = null
+    let isPressing = false
+
+    const cleanup = () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId)
+        timeoutId = undefined
+      }
+      if (isPressing && options.onPressingChanged) {
+        options.onPressingChanged(false)
+      }
+      isPressing = false
+      startPoint = null
+    }
+
+    const handlePointerDown = (event: Event) => {
+      const pointerEvent = event as PointerEvent
+      startPoint = { x: pointerEvent.clientX, y: pointerEvent.clientY }
+      isPressing = true
+
+      if (options.onPressingChanged) {
+        options.onPressingChanged(true)
+      }
+
+      timeoutId = window.setTimeout(() => {
+        if (isPressing && startPoint) {
+          options.perform()
+          cleanup()
+        }
+      }, minimumDuration)
+    }
+
+    const handlePointerMove = (event: Event) => {
+      const pointerEvent = event as PointerEvent
+      if (!startPoint || !isPressing) return
+
+      const distance = Math.sqrt(
+        Math.pow(pointerEvent.clientX - startPoint.x, 2) +
+        Math.pow(pointerEvent.clientY - startPoint.y, 2)
+      )
+
+      if (distance > maximumDistance) {
+        cleanup()
+      }
+    }
+
+    const handlePointerUp = () => {
+      cleanup()
+    }
+
+    const handlePointerCancel = () => {
+      cleanup()
+    }
+
+    // Use pointer events for better touch/mouse compatibility
+    element.addEventListener('pointerdown', handlePointerDown as EventListener)
+    element.addEventListener('pointermove', handlePointerMove as EventListener)
+    element.addEventListener('pointerup', handlePointerUp as EventListener)
+    element.addEventListener('pointercancel', handlePointerCancel as EventListener)
+
+    // Store cleanup function for later removal
+    ;(element as any)._longPressCleanup = cleanup
+  }
+
+  /**
+   * Setup keyboard shortcut handling
+   */
+  private setupKeyboardShortcut(
+    element: Element,
+    shortcut: {
+      key: string
+      modifiers?: ('cmd' | 'ctrl' | 'shift' | 'alt' | 'meta')[]
+      action: () => void
+    }
+  ): void {
+    const modifiers = shortcut.modifiers ?? []
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Check if all required modifiers are pressed
+      const requiredModifiers = {
+        cmd: modifiers.includes('cmd') || modifiers.includes('meta'),
+        ctrl: modifiers.includes('ctrl'),
+        shift: modifiers.includes('shift'),
+        alt: modifiers.includes('alt')
+      }
+
+      const actualModifiers = {
+        cmd: event.metaKey || event.ctrlKey, // Handle both Mac (meta) and PC (ctrl)
+        ctrl: event.ctrlKey,
+        shift: event.shiftKey,
+        alt: event.altKey
+      }
+
+      // Check key match (case insensitive)
+      const keyMatches = event.key.toLowerCase() === shortcut.key.toLowerCase()
+
+      // Check modifier requirements
+      const modifiersMatch = Object.entries(requiredModifiers).every(
+        ([mod, required]) => required === actualModifiers[mod as keyof typeof actualModifiers]
+      )
+
+      if (keyMatches && modifiersMatch) {
+        event.preventDefault()
+        shortcut.action()
+      }
+    }
+
+    // Add keyboard event listener to document for global shortcuts
+    document.addEventListener('keydown', handleKeyDown)
+
+    // Store cleanup function
+    ;(element as any)._keyboardShortcutCleanup = () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }
+
+  /**
+   * Setup focus management with reactive binding
+   */
+  private setupFocusManagement(element: Element, focused: boolean | Signal<boolean>): void {
+    if (!(element instanceof HTMLElement)) return
+
+    const htmlElement = element as HTMLElement
+
+    // Make element focusable if it's not naturally focusable
+    if (!htmlElement.hasAttribute('tabindex')) {
+      htmlElement.setAttribute('tabindex', '0')
+    }
+
+    if (isSignal(focused) || isComputed(focused)) {
+      // Reactive focus management
+      createEffect(() => {
+        const shouldFocus = focused()
+        if (shouldFocus) {
+          htmlElement.focus()
+        } else {
+          htmlElement.blur()
+        }
+      })
+    } else {
+      // Static focus management
+      if (focused) {
+        htmlElement.focus()
+      }
+    }
+  }
+
+  /**
+   * Setup focusable behavior
+   */
+  private setupFocusable(
+    element: Element,
+    options: {
+      isFocusable?: boolean
+      interactions?: ('activate' | 'edit')[]
+    }
+  ): void {
+    if (!(element instanceof HTMLElement)) return
+
+    const htmlElement = element as HTMLElement
+
+    if (options.isFocusable === false) {
+      htmlElement.setAttribute('tabindex', '-1')
+    } else {
+      if (!htmlElement.hasAttribute('tabindex')) {
+        htmlElement.setAttribute('tabindex', '0')
+      }
+    }
+
+    // Setup interaction behaviors
+    if (options.interactions?.includes('activate')) {
+      htmlElement.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          htmlElement.click()
+        }
+      })
+    }
+
+    if (options.interactions?.includes('edit')) {
+      htmlElement.setAttribute('role', 'textbox')
+      htmlElement.setAttribute('contenteditable', 'true')
+    }
+  }
+
+  /**
+   * Setup continuous hover tracking with coordinates
+   */
+  private setupContinuousHover(
+    element: Element,
+    options: {
+      coordinateSpace?: 'local' | 'global'
+      perform: (location: { x: number; y: number } | null) => void
+    }
+  ): void {
+    const coordinateSpace = options.coordinateSpace ?? 'local'
+
+    const handleMouseMove = (event: Event) => {
+      const mouseEvent = event as MouseEvent
+      let x: number, y: number
+
+      if (coordinateSpace === 'local') {
+        const rect = element.getBoundingClientRect()
+        x = mouseEvent.clientX - rect.left
+        y = mouseEvent.clientY - rect.top
+      } else {
+        x = mouseEvent.clientX
+        y = mouseEvent.clientY
+      }
+
+      options.perform({ x, y })
+    }
+
+    const handleMouseLeave = () => {
+      options.perform(null)
+    }
+
+    element.addEventListener('mousemove', handleMouseMove as EventListener)
+    element.addEventListener('mouseleave', handleMouseLeave as EventListener)
+
+    // Store cleanup
+    ;(element as any)._continuousHoverCleanup = () => {
+      element.removeEventListener('mousemove', handleMouseMove as EventListener)
+      element.removeEventListener('mouseleave', handleMouseLeave as EventListener)
+    }
+  }
+
+  /**
+   * Setup hit testing control
+   */
+  private setupHitTesting(element: Element, enabled: boolean): void {
+    if (element instanceof HTMLElement) {
+      element.style.pointerEvents = enabled ? '' : 'none'
+    }
+  }
+}
+
+/**
+ * Animation modifier for transitions and animations
+ */
+export class AnimationModifier extends BaseModifier {
+  readonly type = 'animation'
+  readonly priority = ModifierPriority.ANIMATION
+
+  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
+    if (!context.element) return
+
+    const props = this.properties as any
+
+    // Transition
+    if (props.transition) {
+      const t = props.transition
+      const property = t.property || 'all'
+      const duration = t.duration || 300
+      const easing = t.easing || 'ease'
+      const delay = t.delay || 0
+
+      if (context.element instanceof HTMLElement) {
+        context.element.style.transition = `${property} ${duration}ms ${easing} ${delay}ms`
+      }
+    }
+
+    // Animation
+    if (props.animation && context.element instanceof HTMLElement) {
+      const anim = props.animation
+
+      if (anim.keyframes) {
+        // Create keyframes
+        const keyframeName = `tachui-animation-${context.componentId}-${Date.now()}`
+        const keyframeRule = this.createKeyframeRule(keyframeName, anim.keyframes)
+
+        // Add keyframes to stylesheet
+        this.addKeyframesToStylesheet(keyframeRule)
+
+        // Apply animation
+        const duration = anim.duration || 1000
+        const easing = anim.easing || 'ease'
+        const iterations = anim.iterations || 1
+        const direction = anim.direction || 'normal'
+
+        context.element.style.animation = `${keyframeName} ${duration}ms ${easing} ${iterations} ${direction}`
+      }
+    }
+
+    // Transform
+    if (props.transform && context.element instanceof HTMLElement) {
+      if (isSignal(props.transform) || isComputed(props.transform)) {
+        // Create reactive effect for transform
+        createEffect(() => {
+          const transformValue = props.transform()
+          if (context.element instanceof HTMLElement) {
+            context.element.style.transform = transformValue
+          }
+        })
+      } else {
+        context.element.style.transform = props.transform
+      }
+    }
+
+    // Rotation Effect (SwiftUI .rotationEffect(angle))
+    if (props.rotationEffect && context.element instanceof HTMLElement) {
+      const { angle, anchor } = props.rotationEffect
+
+      // Convert anchor to CSS transform-origin
+      const anchorOrigins: Record<string, string> = {
+        center: '50% 50%',
+        top: '50% 0%',
+        topLeading: '0% 0%',
+        topTrailing: '100% 0%',
+        bottom: '50% 100%',
+        bottomLeading: '0% 100%',
+        bottomTrailing: '100% 100%',
+        leading: '0% 50%',
+        trailing: '100% 50%',
+      }
+
+      const transformOrigin = anchorOrigins[anchor || 'center'] || '50% 50%'
+
+      // Create rotation transform
+      const rotationTransform = `rotate(${angle}deg)`
+
+      if (isSignal(angle) || isComputed(angle)) {
+        // Reactive rotation
+        createEffect(() => {
+          const currentAngle = typeof angle === 'function' ? angle() : angle
+          const currentRotation = `rotate(${currentAngle}deg)`
+
+          if (context.element instanceof HTMLElement) {
+            context.element.style.transformOrigin = transformOrigin
+
+            // Combine with existing transforms if any
+            const existingTransform = context.element.style.transform || ''
+            const existingTransforms = existingTransform
+              .split(' ')
+              .filter((t) => t && !t.startsWith('rotate('))
+              .join(' ')
+
+            const newTransform = existingTransforms
+              ? `${existingTransforms} ${currentRotation}`
+              : currentRotation
+
+            context.element.style.transform = newTransform
+          }
+        })
+      } else {
+        // Static rotation
+        if (context.element instanceof HTMLElement) {
+          context.element.style.transformOrigin = transformOrigin
+
+          // Combine with existing transforms if any
+          const existingTransform = context.element.style.transform || ''
+          const existingTransforms = existingTransform
+            .split(' ')
+            .filter((t) => t && !t.startsWith('rotate('))
+            .join(' ')
+
+          const newTransform = existingTransforms
+            ? `${existingTransforms} ${rotationTransform}`
+            : rotationTransform
+
+          context.element.style.transform = newTransform
+        }
+      }
+    }
+
+    // Overlay modifier (SwiftUI .overlay())
+    if (props.overlay && context.element instanceof HTMLElement) {
+      this.applyOverlay(context.element, props.overlay, context)
+    }
+
+    return undefined
+  }
+
+  private applyOverlay(
+    element: HTMLElement,
+    overlay: { content: any; alignment?: string },
+    _context: ModifierContext
+  ): void {
+    const { content, alignment = 'center' } = overlay
+
+    // Make the element a positioned container
+    if (element.style.position === '' || element.style.position === 'static') {
+      element.style.position = 'relative'
+    }
+
+    // Create overlay container
+    const overlayContainer = document.createElement('div')
+    overlayContainer.style.position = 'absolute'
+    overlayContainer.style.pointerEvents = 'none' // Allow clicks to pass through by default
+
+    // Apply alignment positioning
+    const alignmentStyles = this.getOverlayAlignment(alignment)
+    Object.assign(overlayContainer.style, alignmentStyles)
+
+    // Render content
+    if (typeof content === 'function') {
+      // If content is a function, call it to get component
+      const contentComponent = content()
+      if (contentComponent && typeof contentComponent.render === 'function') {
+        const contentNode = contentComponent.render()
+        if (contentNode.element) {
+          overlayContainer.appendChild(contentNode.element)
+        }
+      }
+    } else if (content && typeof content.render === 'function') {
+      // If content is a component instance
+      const contentNode = content.render()
+      if (contentNode.element) {
+        overlayContainer.appendChild(contentNode.element)
+      }
+    } else if (content instanceof HTMLElement) {
+      // If content is already a DOM element
+      overlayContainer.appendChild(content)
+    }
+
+    // Add overlay to the element
+    element.appendChild(overlayContainer)
+  }
+
+  private getOverlayAlignment(alignment: string): Record<string, string> {
+    const alignments: Record<string, Record<string, string>> = {
+      center: {
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+      },
+      top: {
+        top: '0',
+        left: '50%',
+        transform: 'translateX(-50%)',
+      },
+      bottom: {
+        bottom: '0',
+        left: '50%',
+        transform: 'translateX(-50%)',
+      },
+      leading: {
+        top: '50%',
+        left: '0',
+        transform: 'translateY(-50%)',
+      },
+      trailing: {
+        top: '50%',
+        right: '0',
+        transform: 'translateY(-50%)',
+      },
+      topLeading: {
+        top: '0',
+        left: '0',
+      },
+      topTrailing: {
+        top: '0',
+        right: '0',
+      },
+      bottomLeading: {
+        bottom: '0',
+        left: '0',
+      },
+      bottomTrailing: {
+        bottom: '0',
+        right: '0',
+      },
+    }
+
+    return alignments[alignment] || alignments.center
+  }
+
+  private createKeyframeRule(
+    name: string,
+    keyframes: Record<string, Record<string, string>>
+  ): string {
+    let rule = `@keyframes ${name} {\n`
+
+    for (const [percentage, styles] of Object.entries(keyframes)) {
+      rule += `  ${percentage} {\n`
+      for (const [property, value] of Object.entries(styles)) {
+        const cssProperty = this.toCSSProperty(property)
+        rule += `    ${cssProperty}: ${value};\n`
+      }
+      rule += `  }\n`
+    }
+
+    rule += '}'
+    return rule
+  }
+
+  private addKeyframesToStylesheet(rule: string): void {
+    let stylesheet = document.querySelector('#tachui-animations') as HTMLStyleElement
+
+    if (!stylesheet) {
+      stylesheet = document.createElement('style')
+      stylesheet.id = 'tachui-animations'
+      document.head.appendChild(stylesheet)
+    }
+
+    stylesheet.appendChild(document.createTextNode(rule))
+  }
+}
+
+/**
+ * Lifecycle modifier for component lifecycle events
+ */
+export class LifecycleModifier extends BaseModifier {
+  readonly type = 'lifecycle'
+  readonly priority = ModifierPriority.CUSTOM
+
+  private activeAbortController?: AbortController
+
+  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
+    if (!context.element) return
+
+    const props = this.properties as LifecycleModifierProps
+
+    // Clean up any existing tasks on re-application
+    if (this.activeAbortController) {
+      this.activeAbortController.abort()
+    }
+
+    // Set up intersection observer for onAppear/onDisappear
+    if (props.onAppear || props.onDisappear) {
+      this.setupLifecycleObserver(context.element, props)
+    }
+
+    // Set up async task with cancellation
+    if (props.task) {
+      this.setupTask(context, props.task)
+    }
+
+    // Set up refreshable behavior
+    if (props.refreshable) {
+      this.setupRefreshable(context.element, props.refreshable)
+    }
+
+    return undefined
+  }
+
+  private setupLifecycleObserver(element: Element, props: LifecycleModifierProps): void {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && props.onAppear) {
+            // Element has appeared in viewport
+            props.onAppear()
+          } else if (!entry.isIntersecting && props.onDisappear) {
+            // Element has disappeared from viewport
+            props.onDisappear()
+          }
+        })
+      },
+      {
+        threshold: 0.1, // Trigger when 10% of element is visible
+        rootMargin: '10px', // Add some margin for better UX
+      }
+    )
+
+    observer.observe(element)
+
+    // Store cleanup function
+    this.addCleanup(() => {
+      observer.disconnect()
+    })
+  }
+
+  private setupTask(_context: ModifierContext, task: LifecycleModifierProps['task']): void {
+    if (!task) return
+
+    // Create abort controller for task cancellation
+    this.activeAbortController = new AbortController()
+    const { signal } = this.activeAbortController
+
+    // Execute the task operation
+    const executeTask = async () => {
+      try {
+        if (signal.aborted) return
+
+        const result = task.operation()
+
+        // Handle both sync and async operations
+        if (result instanceof Promise) {
+          await result
+        }
+      } catch (error) {
+        if (signal.aborted) return
+        console.error('TachUI Task Error:', error)
+      }
+    }
+
+    // Start task execution
+    executeTask()
+
+    // Add cleanup to cancel task on component unmount
+    this.addCleanup(() => {
+      if (this.activeAbortController) {
+        this.activeAbortController.abort()
+      }
+    })
+  }
+
+  private setupRefreshable(
+    element: Element,
+    refreshable: LifecycleModifierProps['refreshable']
+  ): void {
+    if (!refreshable) return
+
+    let isRefreshing = false
+    let pullDistance = 0
+    let startY = 0
+
+    const threshold = 70 // Pull threshold in pixels
+
+    // Create refresh indicator element
+    const refreshIndicator = document.createElement('div')
+    refreshIndicator.style.cssText = `
+      position: absolute;
+      top: -50px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 30px;
+      height: 30px;
+      border: 2px solid #ccc;
+      border-top: 2px solid #007AFF;
+      border-radius: 50%;
+      animation: tachui-spin 1s linear infinite;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      z-index: 1000;
+    `
+
+    // Add spinner animation
+    if (!document.querySelector('#tachui-refresh-styles')) {
+      const style = document.createElement('style')
+      style.id = 'tachui-refresh-styles'
+      style.textContent = `
+        @keyframes tachui-spin {
+          0% { transform: translateX(-50%) rotate(0deg); }
+          100% { transform: translateX(-50%) rotate(360deg); }
+        }
+      `
+      document.head.appendChild(style)
+    }
+
+    const container = element.parentElement || element
+    if (container instanceof HTMLElement) {
+      container.style.position = 'relative'
+      container.appendChild(refreshIndicator)
+    }
+
+    // Touch event handlers
+    const handleTouchStart = (e: TouchEvent) => {
+      if (isRefreshing) return
+      startY = e.touches[0].clientY
+    }
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (isRefreshing) return
+
+      const currentY = e.touches[0].clientY
+      pullDistance = Math.max(0, currentY - startY)
+
+      if (pullDistance > 20) {
+        e.preventDefault() // Prevent default scrolling
+
+        const progress = Math.min(pullDistance / threshold, 1)
+        refreshIndicator.style.opacity = String(progress * 0.8)
+        refreshIndicator.style.top = `${-50 + progress * 20}px`
+      }
+    }
+
+    const handleTouchEnd = async () => {
+      if (isRefreshing || pullDistance < threshold) {
+        // Reset if threshold not met
+        refreshIndicator.style.opacity = '0'
+        refreshIndicator.style.top = '-50px'
+        pullDistance = 0
+        return
+      }
+
+      // Trigger refresh
+      isRefreshing = true
+      refreshIndicator.style.opacity = '1'
+      refreshIndicator.style.top = '10px'
+
+      try {
+        await refreshable.onRefresh()
+      } catch (error) {
+        console.error('TachUI Refresh Error:', error)
+      } finally {
+        isRefreshing = false
+        refreshIndicator.style.opacity = '0'
+        refreshIndicator.style.top = '-50px'
+        pullDistance = 0
+      }
+    }
+
+    // Add event listeners with proper typing
+    element.addEventListener('touchstart', handleTouchStart as EventListener, { passive: false })
+    element.addEventListener('touchmove', handleTouchMove as EventListener, { passive: false })
+    element.addEventListener('touchend', handleTouchEnd as EventListener)
+
+    // Cleanup
+    this.addCleanup(() => {
+      element.removeEventListener('touchstart', handleTouchStart as EventListener)
+      element.removeEventListener('touchmove', handleTouchMove as EventListener)
+      element.removeEventListener('touchend', handleTouchEnd as EventListener)
+
+      if (refreshIndicator.parentElement) {
+        refreshIndicator.parentElement.removeChild(refreshIndicator)
+      }
+    })
+  }
+
+  private addCleanup(cleanup: () => void): void {
+    // Store cleanup functions for proper disposal
+    if (!(this.properties as any)._cleanupFunctions) {
+      ;(this.properties as any)._cleanupFunctions = []
+    }
+    ;(this.properties as any)._cleanupFunctions.push(cleanup)
+  }
+}
+
+/**
+ * Resizable modifier for making images resizable
+ * In SwiftUI, .resizable() allows images to be scaled to fit their container
+ */
+export class ResizableModifier extends BaseModifier {
+  readonly type = 'resizable'
+  readonly priority = ModifierPriority.APPEARANCE
+
+  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
+    if (!context.element) return
+
+    // For images, resizable means they can be scaled to fit their container
+    // This is typically achieved with object-fit: fill in CSS
+    if (context.element instanceof HTMLImageElement) {
+      context.element.style.objectFit = 'fill'
+    }
+
+    return undefined
+  }
+}