@tachui/cli 0.8.1-alpha → 0.8.5-alpha

package/dist/core/src/modifiers/base.js

@@ -0,0 +1,1062 @@
+/**
+ * Base Modifier System Implementation
+ *
+ * Core modifier classes and utilities for the SwiftUI-inspired modifier system.
+ */
+import { createEffect, isComputed, isSignal, getThemeSignal } from '../reactive';
+import { ModifierPriority } from './types';
+import { isInfinity, dimensionToCSS, shouldExpandForInfinity, } from '../constants/layout';
+/**
+ * Abstract base modifier class
+ */
+export class BaseModifier {
+    properties;
+    constructor(properties) {
+        this.properties = properties;
+    }
+    /**
+     * Helper to resolve reactive properties
+     */
+    resolveReactiveProps(props, context) {
+        const resolved = {};
+        for (const [key, value] of Object.entries(props)) {
+            if (isSignal(value) || isComputed(value)) {
+                // Preserve the signal/computed - let applyStyles handle reactivity
+                resolved[key] = value;
+            }
+            else {
+                // Static value
+                resolved[key] = 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
+     */
+    applyStyleChange(element, property, value) {
+        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
+     */
+    toCSSProperty(property) {
+        return property.replace(/([A-Z])/g, '-$1').toLowerCase();
+    }
+    /**
+     * Convert value to CSS value string
+     */
+    toCSSValue(value) {
+        if (typeof value === 'number') {
+            return `${value}px`;
+        }
+        return String(value);
+    }
+    /**
+     * Convert value to CSS value string with property-specific handling
+     */
+    toCSSValueForProperty(property, value) {
+        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
+     */
+    applyStyles(element, styles) {
+        // Check if element has a style property (for testing and real elements)
+        if (element instanceof HTMLElement || element.style) {
+            const styleTarget = element instanceof HTMLElement ? element.style : element.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[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[cssProperty] = cssValue;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Add CSS classes to an element
+     */
+    addClasses(element, classes) {
+        if (element instanceof HTMLElement) {
+            element.classList.add(...classes);
+        }
+    }
+    /**
+     * Remove CSS classes from an element
+     */
+    removeClasses(element, classes) {
+        if (element instanceof HTMLElement) {
+            element.classList.remove(...classes);
+        }
+    }
+    /**
+     * Create a style computation context
+     */
+    createStyleContext(componentId, element, modifiers) {
+        return {
+            componentId,
+            element,
+            modifiers,
+            signals: new Set(),
+            cleanup: [],
+        };
+    }
+}
+/**
+ * Layout modifier for frame, padding, margin
+ */
+export class LayoutModifier extends BaseModifier {
+    type = 'layout';
+    priority = ModifierPriority.LAYOUT;
+    apply(node, context) {
+        if (!node.element || !context.element)
+            return;
+        const styleContext = this.createStyleContext(context.componentId, context.element, []);
+        const styles = this.computeLayoutStyles(this.properties, styleContext);
+        this.applyStyles(context.element, styles);
+        // Layout modifiers (offset, aspectRatio, scaleEffect, zIndex) have been
+        // migrated to @tachui/modifiers/layout for enhanced functionality
+        // Handle absolutePosition separately for proper positioning (Phase 3 - Epic: Butternut)
+        const props = this.properties;
+        if (props.position && context.element instanceof HTMLElement) {
+            this.applyAbsolutePosition(context.element, props.position);
+        }
+        return undefined;
+    }
+    // Layout modifier implementations have been migrated to @tachui/modifiers/layout
+    applyAbsolutePosition(element, position) {
+        const { x, y } = position;
+        const currentX = x ?? 'auto';
+        const currentY = y ?? 'auto';
+        // Position-based transform (not a scale or offset, but absolute positioning)
+        element.style.left = this.toCSSValue(currentX);
+        element.style.top = this.toCSSValue(currentY);
+    }
+    computeLayoutStyles(props, _context) {
+        const styles = {};
+        // 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.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 {
+    type = 'appearance';
+    priority = ModifierPriority.APPEARANCE;
+    apply(node, context) {
+        if (!node.element || !context.element) {
+            return;
+        }
+        const styleContext = this.createStyleContext(context.componentId, context.element, []);
+        const resolved = this.resolveReactiveProps(this.properties, 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);
+        // Handle HTML attributes (ARIA, role, navigation, etc.)
+        this.applyAttributes(context.element, resolved);
+        return undefined;
+    }
+    /**
+     * Apply Asset-based styles with theme reactivity
+     */
+    applyAssetBasedStyles(element, props) {
+        // 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)
+     */
+    isAsset(value) {
+        return (value !== null &&
+            value !== undefined &&
+            typeof value === 'object' &&
+            'resolve' in value &&
+            typeof value.resolve === 'function');
+    }
+    computeAppearanceStyles(props) {
+        const styles = {};
+        // 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 &&
+                    typeof font.family.resolve === 'function') {
+                    const resolved = font.family.resolve();
+                    styles.fontFamily = resolved;
+                }
+                else {
+                    styles.fontFamily = font.family;
+                }
+            }
+            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;
+            }
+            if (border.style)
+                styles.borderStyle = border.style;
+        }
+        // Shadow functionality moved to @tachui/modifiers/effects entry point
+        // Clipped and Clip Shape modifiers moved to @tachui/modifiers package
+        // Visual Effects (Phase 2 - Epic: Butternut)
+        const filters = [];
+        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;
+    }
+    /**
+     * Apply HTML attributes (ARIA, role, data attributes, etc.)
+     */
+    applyAttributes(element, props) {
+        if (!element)
+            return;
+        // Also need to get the component from the context to update props
+        // This is a hack, but needed for tests that expect attributes on component.props
+        const component = this.findComponentFromElement(element);
+        // Common HTML attributes
+        if (props.role !== undefined) {
+            element.setAttribute('role', String(props.role));
+            if (component?.props) {
+                component.props.role = String(props.role);
+            }
+        }
+        // ARIA attributes
+        if (props['aria-label'] !== undefined) {
+            element.setAttribute('aria-label', String(props['aria-label']));
+            if (component?.props) {
+                component.props['aria-label'] = String(props['aria-label']);
+            }
+        }
+        if (props['aria-live'] !== undefined) {
+            element.setAttribute('aria-live', String(props['aria-live']));
+            if (component?.props) {
+                component.props['aria-live'] = String(props['aria-live']);
+            }
+        }
+        if (props['aria-describedby'] !== undefined) {
+            element.setAttribute('aria-describedby', String(props['aria-describedby']));
+            if (component?.props) {
+                component.props['aria-describedby'] = String(props['aria-describedby']);
+            }
+        }
+        if (props['aria-modal'] !== undefined) {
+            element.setAttribute('aria-modal', String(props['aria-modal']));
+            if (component?.props) {
+                component.props['aria-modal'] = String(props['aria-modal']);
+            }
+        }
+        if (props['aria-hidden'] !== undefined) {
+            element.setAttribute('aria-hidden', String(props['aria-hidden']));
+            if (component?.props) {
+                component.props['aria-hidden'] = String(props['aria-hidden']);
+            }
+        }
+        // Navigation attributes (for custom processing by navigation system)
+        if (props.navigationTitle !== undefined) {
+            element.setAttribute('data-navigation-title', String(props.navigationTitle));
+            if (component?.props) {
+                component.props.navigationTitle = String(props.navigationTitle);
+            }
+        }
+        if (props.navigationBarHidden !== undefined) {
+            element.setAttribute('data-navigation-bar-hidden', String(props.navigationBarHidden));
+            if (component?.props) {
+                component.props.navigationBarHidden = props.navigationBarHidden;
+            }
+            // Also apply aria-hidden for accessibility
+            if (props.navigationBarHidden) {
+                element.setAttribute('aria-hidden', 'true');
+                if (component?.props) {
+                    component.props['aria-hidden'] = 'true';
+                }
+            }
+        }
+        if (props.navigationBarItems !== undefined) {
+            // Store as JSON in data attribute for navigation system to process
+            element.setAttribute('data-navigation-bar-items', JSON.stringify(props.navigationBarItems));
+            if (component?.props) {
+                component.props.navigationBarItems = props.navigationBarItems;
+            }
+        }
+    }
+    findComponentFromElement(element) {
+        // Try to find the component instance associated with this element
+        // This is a simplified approach - in a real implementation, we'd have a proper mapping
+        return element._tachui_component || null;
+    }
+}
+/**
+ * Interaction modifier for events and accessibility
+ */
+export class InteractionModifier extends BaseModifier {
+    type = 'interaction';
+    priority = ModifierPriority.INTERACTION;
+    apply(_node, context) {
+        if (!context.element)
+            return;
+        const props = this.properties;
+        // 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);
+        }
+        // Touch events
+        if (props.onTouchStart) {
+            context.element.addEventListener('touchstart', props.onTouchStart, {
+                passive: true,
+            });
+        }
+        if (props.onTouchMove) {
+            context.element.addEventListener('touchmove', props.onTouchMove, {
+                passive: true,
+            });
+        }
+        if (props.onTouchEnd) {
+            context.element.addEventListener('touchend', props.onTouchEnd, {
+                passive: true,
+            });
+        }
+        if (props.onTouchCancel) {
+            context.element.addEventListener('touchcancel', props.onTouchCancel, {
+                passive: true,
+            });
+        }
+        // Swipe gestures (simplified implementation)
+        if (props.onSwipeLeft || props.onSwipeRight) {
+            let startX = 0;
+            let startY = 0;
+            context.element.addEventListener('touchstart', (e) => {
+                const touchEvent = e;
+                const touch = touchEvent.touches[0];
+                startX = touch.clientX;
+                startY = touch.clientY;
+            }, { passive: true });
+            context.element.addEventListener('touchend', (e) => {
+                const touchEvent = e;
+                const touch = touchEvent.changedTouches[0];
+                const deltaX = touch.clientX - startX;
+                const deltaY = touch.clientY - startY;
+                const minSwipeDistance = 50;
+                // Only register as swipe if horizontal movement is greater than vertical
+                if (Math.abs(deltaX) > Math.abs(deltaY) &&
+                    Math.abs(deltaX) > minSwipeDistance) {
+                    if (deltaX < 0 && props.onSwipeLeft) {
+                        props.onSwipeLeft();
+                    }
+                    else if (deltaX > 0 && props.onSwipeRight) {
+                        props.onSwipeRight();
+                    }
+                }
+            }, { passive: true });
+        }
+        // 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;
+                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);
+        }
+        return undefined;
+    }
+}
+/**
+ * Animation modifier for transitions and animations
+ */
+export class AnimationModifier extends BaseModifier {
+    type = 'animation';
+    priority = ModifierPriority.ANIMATION;
+    apply(_node, context) {
+        if (!context.element)
+            return;
+        const props = this.properties;
+        // 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;
+            }
+        }
+        // Scale Effect (SwiftUI .scaleEffect(x, y, anchor))
+        if (props.scaleEffect && context.element instanceof HTMLElement) {
+            const { x, y, anchor } = props.scaleEffect;
+            const scaleY = y ?? x; // Default to uniform scaling if y not provided
+            // Convert anchor to CSS transform-origin
+            const anchorOrigins = {
+                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%';
+            context.element.style.transformOrigin = transformOrigin;
+            // Create scale transform
+            const scaleTransform = `scale(${x}, ${scaleY})`;
+            // Preserve existing transforms but replace any existing scale functions
+            const existingTransform = context.element.style.transform || '';
+            const existingTransforms = existingTransform
+                .replace(/\s*scale[XYZ3d]*\([^)]*\)\s*/g, ' ')
+                .replace(/\s+/g, ' ')
+                .trim();
+            const newTransform = existingTransforms
+                ? `${existingTransforms} ${scaleTransform}`.trim()
+                : scaleTransform;
+            context.element.style.transform = newTransform;
+        }
+        // Overlay modifier moved to @tachui/modifiers package
+        return undefined;
+    }
+    createKeyframeRule(name, keyframes) {
+        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;
+    }
+    addKeyframesToStylesheet(rule) {
+        let stylesheet = document.querySelector('#tachui-animations');
+        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 {
+    type = 'lifecycle';
+    priority = ModifierPriority.CUSTOM;
+    activeAbortController;
+    apply(_node, context) {
+        if (!context.element)
+            return;
+        const props = this.properties;
+        // Clean up any existing tasks on re-application
+        if (this.activeAbortController) {
+            this.activeAbortController.abort();
+        }
+        // Set up async task with cancellation
+        if (props.task) {
+            this.setupTask(context, props.task);
+        }
+        // Set up onAppear/onDisappear with IntersectionObserver
+        if (props.onAppear || props.onDisappear) {
+            this.setupViewportObserver(context, props);
+        }
+        return undefined;
+    }
+    setupTask(_context, task) {
+        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();
+            }
+        });
+    }
+    setupViewportObserver(context, props) {
+        if (!context.element)
+            return;
+        const observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting && props.onAppear) {
+                    props.onAppear();
+                }
+                else if (!entry.isIntersecting && props.onDisappear) {
+                    props.onDisappear();
+                }
+            });
+        });
+        observer.observe(context.element);
+        // Add cleanup to disconnect observer
+        this.addCleanup(() => {
+            observer.disconnect();
+        });
+    }
+    addCleanup(cleanup) {
+        // Store cleanup functions for proper disposal
+        if (!this.properties._cleanupFunctions) {
+            ;
+            this.properties._cleanupFunctions = [];
+        }
+        ;
+        this.properties._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 {
+    type = 'resizable';
+    priority = ModifierPriority.APPEARANCE;
+    apply(_node, context) {
+        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;
+    }
+}
+//# sourceMappingURL=base.js.map