@tachui/cli 0.8.5-alpha → 0.8.8

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

@@ -1,903 +0,0 @@
-/**
- * Modifier Builder Implementation
- *
- * Provides a fluent API for chaining modifiers on components,
- * similar to SwiftUI's modifier system.
- */
-// Responsive functionality moved to @tachui/responsive package
-import { globalModifierRegistry } from '@tachui/registry';
-import { createModifiableComponent } from './registry';
-const EVENT_MODIFIER_TYPES = new Set([
-    'onFocus',
-    'onBlur',
-    'onKeyDown',
-    'onKeyUp',
-    'onKeyPress',
-    'onScroll',
-    'onWheel',
-    'onInput',
-    'onChange',
-    'onCopy',
-    'onCut',
-    'onPaste',
-    'onSelect',
-    'onTouchStart',
-    'onTouchMove',
-    'onTouchEnd',
-    'onSwipeLeft',
-    'onSwipeRight',
-]);
-// Registry bridge to handle potential instance isolation
-let externalRegistry = null;
-// Allow external packages to override the registry reference
-export function setExternalModifierRegistry(registry) {
-    externalRegistry = registry;
-    console.debug('[RegistryBridge] External modifier registry set with', registry?.list()?.length || 0, 'modifiers');
-}
-function getActiveRegistry() {
-    // Check for external registry first (set by setExternalModifierRegistry)
-    if (externalRegistry) {
-        return externalRegistry;
-    }
-    // Use the ESM singleton registry
-    return globalModifierRegistry;
-}
-/**
- * Registry-based modifier lookup helper
- * Replaces stub functions with actual modifier registry lookups
- */
-function createRegistryModifier(name, ..._args) {
-    const activeRegistry = getActiveRegistry();
-    // Registry lookup with debug info for development
-    // if (process.env.NODE_ENV === 'development' && (name === 'padding' || name === 'textShadow')) {
-    //   console.log(`🔍 Looking up modifier '${name}' in registry ${(activeRegistry as any).instanceId || 'unknown'}:`, {
-    //     registryHas: activeRegistry ? activeRegistry.has(name) : false,
-    //     registrySize: activeRegistry ? activeRegistry.list().length : 0,
-    //   })
-    // }
-    const factory = activeRegistry.get(name);
-    if (factory) {
-        try {
-            const modifier = factory.apply(null, _args);
-            return modifier;
-        }
-        catch (error) {
-            console.warn(`Error creating modifier '${name}':`, error);
-            throw error;
-        }
-    }
-    throw new Error(`Modifier '${name}' not found in registry. ` +
-        `Import @tachui/modifiers or @tachui/modifiers/effects to register modifiers.`);
-}
-// position and zIndex have been migrated to @tachui/modifiers/layout
-// AriaModifier and TabIndexModifier have been moved to @tachui/modifiers
-// import { AriaModifier, TabIndexModifier } from './attributes'
-// BackdropFilterModifier moved to @tachui/modifiers/effects entry point
-// Pseudo-element modifiers moved to @tachui/modifiers package
-// Temporarily commented out to resolve circular dependency during build
-// Filter modifiers moved to @tachui/modifiers/effects
-// import {
-//   textShadow,
-//   shadow as shadowModifier,
-//   shadows as shadowsModifier,
-//   shadowPreset,
-// } from '@tachui/modifiers'
-// Transform modifiers moved to @tachui/modifiers/effects
-// Interactive effects moved to @tachui/modifiers/effects
-// import {
-//   transition as transitionModifier,
-//   fadeTransition,
-//   transformTransition,
-//   colorTransition,
-//   layoutTransition,
-//   buttonTransition,
-//   cardTransition,
-//
-// Transition and scroll modifiers moved to @tachui/modifiers
-// Available via Proxy when @tachui/modifiers is imported
-// Attribute modifiers have been moved to @tachui/modifiers
-// import { id, data, aria, tabIndex } from '@tachui/modifiers'
-/**
- * Concrete modifier builder implementation
- *
- * Note: This class intentionally does not implement all ModifierBuilder methods.
- * Missing methods are handled dynamically via the Proxy in createModifierBuilder(),
- * which looks them up in the global modifier registry at runtime.
- */
-export class ModifierBuilderImpl {
-    component;
-    modifiers = [];
-    constructor(component) {
-        this.component = component;
-    }
-    frame(widthOrOptions, height) {
-        let frameProps;
-        if (typeof widthOrOptions === 'object') {
-            frameProps = widthOrOptions;
-        }
-        else {
-            frameProps = {};
-            if (widthOrOptions !== undefined)
-                frameProps.width = widthOrOptions;
-            if (height !== undefined)
-                frameProps.height = height;
-        }
-        this.modifiers.push(createRegistryModifier('frame', frameProps));
-        return this;
-    }
-    // margin() moved to @tachui/modifiers - available via Proxy when imported
-    layoutPriority(priority) {
-        this.modifiers.push(createRegistryModifier('layoutPriority', priority));
-        return this;
-    }
-    // Size, padding, and margin modifiers moved to @tachui/modifiers
-    // All available via Proxy when @tachui/modifiers is imported:
-    // - size(), width(), height(), minWidth(), maxWidth(), minHeight(), maxHeight()
-    // - padding(), paddingTop(), paddingBottom(), paddingLeft(), paddingRight()
-    // - paddingLeading(), paddingTrailing(), paddingHorizontal(), paddingVertical()
-    // - marginTop(), marginBottom(), marginLeft(), marginRight()
-    // - marginHorizontal(), marginVertical()
-    // Typography modifiers moved to @tachui/modifiers:
-    // typography(), textAlign(), textTransform(), gradientText()
-    // Available via Proxy when @tachui/modifiers is imported
-    // Text modifiers (lineClamp, wordBreak, overflowWrap, hyphens) moved to @tachui/modifiers
-    // Available via Proxy when @tachui/modifiers is imported
-    // position() and zIndex() methods have been migrated to @tachui/modifiers/layout
-    // for enhanced SwiftUI-compatible functionality
-    // Text spacing and overflow methods moved to @tachui/modifiers:
-    // letterSpacing(), lineHeight(), textOverflow(), whiteSpace(), overflow()
-    // Border modifiers moved to @tachui/modifiers:
-    // borderTop(), borderRight(), borderBottom(), borderLeft()
-    // Flexbox modifiers moved to @tachui/modifiers:
-    // flexGrow(), flexShrink(), justifyContent(), alignItems(), gap(), flexDirection(), flexWrap()
-    // Utility modifiers moved to @tachui/modifiers:
-    // cursor(), overflowX(), overflowY(), outline(), outlineOffset(), display()
-    // Raw CSS modifiers moved to @tachui/modifiers/utility
-    // Import { css } from '@tachui/modifiers/utility' and apply explicitly.
-    // textCase(), textDecoration(), and aspectRatio() moved to @tachui/modifiers
-    // Available via Proxy when @tachui/modifiers is imported
-    // Phase 1 SwiftUI modifiers
-    // Note: clipped() has been moved to @tachui/modifiers
-    // Phase 2 SwiftUI modifiers
-    // Note: clipShape() and overlay() have been moved to @tachui/modifiers
-    // Phase 3 SwiftUI modifiers - Critical Transform Modifiers
-    absolutePosition(x, y) {
-        this.modifiers.push(createRegistryModifier('absolutePosition', x, y));
-        return this;
-    }
-    // Appearance modifiers
-    foregroundColor(color) {
-        this.modifiers.push(createRegistryModifier('foregroundColor', color));
-        return this;
-    }
-    backgroundColor(color) {
-        this.modifiers.push(createRegistryModifier('backgroundColor', color));
-        return this;
-    }
-    background(value) {
-        const modifier = createRegistryModifier('background', value);
-        this.modifiers.push(modifier);
-        return this;
-    }
-    font(sizeOrOptions) {
-        let fontProps;
-        if (typeof sizeOrOptions === 'object') {
-            fontProps = sizeOrOptions;
-            if (fontProps.family !== undefined) {
-                this.modifiers.push(createRegistryModifier('fontFamily', fontProps.family));
-            }
-            if (fontProps.size !== undefined) {
-                this.modifiers.push(createRegistryModifier('fontSize', fontProps.size));
-            }
-            if (fontProps.weight !== undefined) {
-                this.modifiers.push(createRegistryModifier('fontWeight', fontProps.weight));
-            }
-            if (fontProps.style !== undefined) {
-                this.modifiers.push(createRegistryModifier('fontStyle', fontProps.style));
-            }
-        }
-        else {
-            fontProps = sizeOrOptions !== undefined ? { size: sizeOrOptions } : {};
-            if (typeof sizeOrOptions === 'string' &&
-                sizeOrOptions.startsWith('.')) {
-                this.modifiers.push(createRegistryModifier('fontPreset', sizeOrOptions));
-            }
-            else if (fontProps.size !== undefined) {
-                this.modifiers.push(createRegistryModifier('fontSize', fontProps.size));
-            }
-        }
-        return this;
-    }
-    fontWeight(weight) {
-        this.modifiers.push(createRegistryModifier('fontWeight', weight));
-        return this;
-    }
-    fontSize(size) {
-        this.modifiers.push(createRegistryModifier('fontSize', size));
-        return this;
-    }
-    fontFamily(family) {
-        this.modifiers.push(createRegistryModifier('fontFamily', family));
-        return this;
-    }
-    opacity(value) {
-        this.modifiers.push(createRegistryModifier('opacity', value));
-        return this;
-    }
-    cornerRadius(radius) {
-        this.modifiers.push(createRegistryModifier('cornerRadius', radius));
-        return this;
-    }
-    border(widthOrOptions, color) {
-        let borderProps;
-        if (typeof widthOrOptions === 'object') {
-            borderProps = widthOrOptions;
-        }
-        else {
-            borderProps = {
-                style: 'solid',
-                ...(widthOrOptions !== undefined && { width: widthOrOptions }),
-                ...(color !== undefined && { color }),
-            };
-        }
-        this.modifiers.push(createRegistryModifier('border', borderProps));
-        return this;
-    }
-    borderWidth(width) {
-        this.modifiers.push(createRegistryModifier('border', { width }));
-        return this;
-    }
-    // Shadow functionality moved to @tachui/modifiers/effects entry point
-    // Visual Effects Modifiers (Phase 2 - Epic: Butternut)
-    blur(radius) {
-        this.modifiers.push(createRegistryModifier('blur', radius));
-        return this;
-    }
-    brightness(amount) {
-        this.modifiers.push(createRegistryModifier('brightness', amount));
-        return this;
-    }
-    contrast(amount) {
-        this.modifiers.push(createRegistryModifier('contrast', amount));
-        return this;
-    }
-    saturation(amount) {
-        this.modifiers.push(createRegistryModifier('saturation', amount));
-        return this;
-    }
-    hueRotation(angle) {
-        this.modifiers.push(createRegistryModifier('hueRotation', angle));
-        return this;
-    }
-    grayscale(amount) {
-        this.modifiers.push(createRegistryModifier('grayscale', amount));
-        return this;
-    }
-    colorInvert(amount = 1.0) {
-        this.modifiers.push(createRegistryModifier('colorInvert', amount));
-        return this;
-    }
-    // ============================================================================
-    // VISUAL EFFECTS MOVED TO @tachui/modifiers/effects ENTRY
-    // ============================================================================
-    //
-    // Visual effects have been extracted to @tachui/modifiers/effects for better tree-shaking
-    // Visual effects methods removed - use @tachui/modifiers/effects
-    // Advanced gesture and interaction modifiers moved to @tachui/modifiers
-    // Available via Proxy when @tachui/modifiers is imported:
-    // - onLongPressGesture(), keyboardShortcut(), focused(), focusable(), onContinuousHover()
-    highPriorityGesture(gesture, including) {
-        this.modifiers.push(createRegistryModifier('highPriorityGesture', gesture, including));
-        return this;
-    }
-    simultaneousGesture(gesture, including) {
-        this.modifiers.push(createRegistryModifier('simultaneousGesture', gesture, including));
-        return this;
-    }
-    // allowsHitTesting() moved to @tachui/modifiers - available via Proxy when imported
-    // Animation modifiers
-    transform(value) {
-        this.modifiers.push(createRegistryModifier('transform', value));
-        return this;
-    }
-    animation(options) {
-        this.modifiers.push(createRegistryModifier('animation', options));
-        return this;
-    }
-    // Lifecycle modifiers
-    task(operation, options) {
-        this.modifiers.push(createRegistryModifier('task', {
-            operation,
-            id: options?.id,
-            priority: options?.priority || 'default',
-        }));
-        return this;
-    }
-    // Custom modifier application
-    /**
-     * @deprecated DO NOT USE - This is an internal API only.
-     * Always use direct modifier methods instead of .modifier()
-     *
-     * BAD:  component.modifier(padding(16))
-     * GOOD: component.padding(16)
-     *
-     * If you need a modifier from @tachui/modifiers, import and use it directly:
-     * BAD:  component.modifier(shadow({ radius: 4 }))
-     * GOOD: import { shadow } from '@tachui/modifiers'
-     *       const mod = shadow({ radius: 4 })
-     *       // Then apply via registry or component method
-     */
-    modifier(modifier) {
-        if (process.env.NODE_ENV === 'development') {
-            console.warn('⚠️ .modifier() should NOT be used by developers.\n' +
-                'Use direct modifier methods instead:\n' +
-                '  BAD:  component.modifier(padding(16))\n' +
-                '  GOOD: component.padding(16)\n' +
-                '\n' +
-                'If the method doesn\'t exist on the component, import the modifier package:\n' +
-                '  import { shadowModifier } from \'@tachui/modifiers\'\n' +
-                '\n' +
-                'This method is for internal framework use only.');
-        }
-        this.modifiers.push(modifier);
-        return this;
-    }
-    // Public method to add a modifier (used by Proxy)
-    addModifierInternal(modifier) {
-        this.modifiers.push(modifier);
-        return this;
-    }
-    // Resizable modifier for images
-    resizable() {
-        this.modifiers.push(createRegistryModifier('resizable'));
-        return this;
-    }
-    // Responsive Design Methods
-    /**
-     * Add modifier to internal list (used by responsive builder)
-     */
-    addModifier(modifier) {
-        this.modifiers.push(modifier);
-        // If the component is modifiable, automatically update its modifiers array
-        if ('modifiers' in this.component &&
-            Array.isArray(this.component.modifiers)) {
-            const modifiableComponent = this.component;
-            modifiableComponent.modifiers = [
-                ...modifiableComponent.modifiers,
-                modifier,
-            ];
-        }
-    }
-    // Responsive functionality moved to @tachui/responsive package
-    // Interaction modifiers
-    onTap(handler) {
-        this.modifiers.push(createRegistryModifier('onTap', handler));
-        return this;
-    }
-    onFocus(handler) {
-        this.modifiers.push(createRegistryModifier('onFocus', handler));
-        return this;
-    }
-    onBlur(handler) {
-        this.modifiers.push(createRegistryModifier('onBlur', handler));
-        return this;
-    }
-    onKeyDown(handler) {
-        this.modifiers.push(createRegistryModifier('onKeyDown', handler));
-        return this;
-    }
-    onScroll(handler) {
-        this.modifiers.push(createRegistryModifier('onScroll', handler));
-        return this;
-    }
-    onKeyPress(handler) {
-        this.modifiers.push(createRegistryModifier('onKeyPress', handler));
-        return this;
-    }
-    onKeyUp(handler) {
-        this.modifiers.push(createRegistryModifier('onKeyUp', handler));
-        return this;
-    }
-    onDoubleClick(handler) {
-        this.modifiers.push(createRegistryModifier('onDoubleClick', handler));
-        return this;
-    }
-    onContextMenu(handler) {
-        this.modifiers.push(createRegistryModifier('onContextMenu', handler));
-        return this;
-    }
-    onWheel(handler) {
-        this.modifiers.push(createRegistryModifier('onWheel', handler));
-        return this;
-    }
-    onInput(handler) {
-        this.modifiers.push(createRegistryModifier('onInput', handler));
-        return this;
-    }
-    onChange(handler) {
-        this.modifiers.push(createRegistryModifier('onChange', handler));
-        return this;
-    }
-    onCopy(handler) {
-        this.modifiers.push(createRegistryModifier('onCopy', handler));
-        return this;
-    }
-    onCut(handler) {
-        this.modifiers.push(createRegistryModifier('onCut', handler));
-        return this;
-    }
-    onPaste(handler) {
-        this.modifiers.push(createRegistryModifier('onPaste', handler));
-        return this;
-    }
-    onSelect(handler) {
-        this.modifiers.push(createRegistryModifier('onSelect', handler));
-        return this;
-    }
-    // Transition modifier moved to @tachui/modifiers:
-    // transition()
-    // HTML and ARIA Attributes moved to @tachui/modifiers
-    // Available via Proxy when @tachui/modifiers is imported:
-    // - id(), data(), aria(), tabIndex()
-    customProperties(_options) {
-        throw new Error('CSS property modifiers have been moved to @tachui/modifiers. Please import { customProperties } from "@tachui/modifiers" and use it directly instead of chaining it on components.');
-    }
-    customProperty(_name, _value) {
-        throw new Error('CSS property modifiers have been moved to @tachui/modifiers. Please import { customProperty } from "@tachui/modifiers" and use it directly instead of chaining it on components.');
-    }
-    cssVariables(_variables) {
-        throw new Error('CSS property modifiers have been moved to @tachui/modifiers. Please import { cssVariables } from "@tachui/modifiers" and use it directly instead of chaining it on components.');
-    }
-    themeColors(_colors) {
-        throw new Error('Theme modifiers have been moved to @tachui/modifiers. Please import { themeColors } from "@tachui/modifiers" and use it directly instead of chaining it on components.');
-    }
-    designTokens(_tokens) {
-        throw new Error('Design token modifiers have been moved to @tachui/modifiers. Please import { designTokens } from "@tachui/modifiers" and use it directly instead of chaining it on components.');
-    }
-    // State modifiers
-    disabled(isDisabled = true) {
-        this.modifiers.push(createRegistryModifier('disabled', isDisabled));
-        return this;
-    }
-    asHTML(options) {
-        const modifier = createRegistryModifier('asHTML', options);
-        this.modifiers.push(modifier);
-        return this;
-    }
-    // Build the final component with all modifiers applied
-    build() {
-        // Check if this component is already modifiable (from withModifiers)
-        if ('modifiers' in this.component) {
-            // Update the existing modifiable component with new modifiers
-            const existingModifiable = this.component;
-            const existingModifiers = Array.isArray(existingModifiable.modifiers)
-                ? [...existingModifiable.modifiers]
-                : [];
-            // Only add modifiers that aren't already in the component's modifiers array
-            // This prevents duplicates when addModifier has already added them
-            const newModifiers = this.modifiers.filter(builderModifier => !existingModifiable.modifiers.some(existingModifier => existingModifier === builderModifier // Reference equality check
-            ));
-            const combinedModifiers = [...existingModifiers, ...newModifiers];
-            const baseComponent = existingModifiable._originalComponent ||
-                existingModifiable;
-            let clonedBase;
-            if (typeof baseComponent?.clone === 'function') {
-                clonedBase = baseComponent.clone();
-            }
-            else {
-                const prototype = (baseComponent && Object.getPrototypeOf(baseComponent)) ||
-                    Object.prototype;
-                clonedBase = Object.create(prototype);
-                Object.assign(clonedBase, baseComponent);
-                clonedBase.props = { ...baseComponent.props };
-                clonedBase.cleanup = Array.isArray(baseComponent.cleanup)
-                    ? [...baseComponent.cleanup]
-                    : [];
-                clonedBase.mounted = baseComponent.mounted ?? false;
-                clonedBase.id = baseComponent.id;
-                clonedBase.type = baseComponent.type;
-                clonedBase.render =
-                    typeof baseComponent.render === 'function'
-                        ? baseComponent.render.bind(baseComponent)
-                        : () => [];
-            }
-            const modifiableComponent = createModifiableComponent(clonedBase, combinedModifiers);
-            // TEMPORARY: Apply modifiers to component props for test compatibility
-            if (process.env.NODE_ENV === 'test') {
-                this.applyModifiersToPropsForTesting(modifiableComponent, combinedModifiers);
-            }
-            return modifiableComponent;
-        }
-        else {
-            // Create a new modifiable component with the accumulated modifiers using the proper factory
-            const modifiableComponent = createModifiableComponent(this.component, this.modifiers);
-            // TEMPORARY: Apply modifiers to component props for test compatibility
-            if (process.env.NODE_ENV === 'test') {
-                this.applyModifiersToPropsForTesting(modifiableComponent, this.modifiers);
-            }
-            return modifiableComponent;
-        }
-    }
-    applyModifiersToPropsForTesting(component, modifiers) {
-        // Initialize props if not present
-        if (!component.props) {
-            component.props = {};
-        }
-        // Apply each modifier's test-compatible properties
-        modifiers.forEach(modifier => {
-            if (modifier.type === 'aria') {
-                // ARIA modifiers have been moved to @tachui/modifiers
-                // Legacy test compatibility support
-                const ariaModifier = modifier;
-                const aria = ariaModifier.properties?.aria || {};
-                Object.entries(aria).forEach(([key, value]) => {
-                    if (value !== undefined && value !== null) {
-                        if (key === 'role') {
-                            component.props.role = value;
-                        }
-                        else {
-                            const attributeName = key.startsWith('aria-')
-                                ? key
-                                : `aria-${key}`;
-                            // Preserve boolean values for test compatibility
-                            component.props[attributeName] =
-                                typeof value === 'boolean' ? value : String(value);
-                        }
-                    }
-                });
-            }
-            else if (EVENT_MODIFIER_TYPES.has(modifier.type)) {
-                const eventModifier = modifier;
-                const props = eventModifier.properties || {};
-                Object.entries(props).forEach(([key, value]) => {
-                    if (typeof value === 'function') {
-                        component.props[key] = value;
-                    }
-                });
-            }
-            else if (modifier.type === 'interaction') {
-                const interactionModifier = modifier;
-                const props = interactionModifier.properties; // Extended properties for swipe gestures
-                // Copy interaction handlers to component props
-                Object.entries(props).forEach(([key, value]) => {
-                    if (typeof value === 'function') {
-                        component.props[key] = value;
-                    }
-                });
-                // For swipe gestures, also add onTouchStart for test compatibility
-                // since swipe handling creates internal touch event handlers
-                if (props.onSwipeLeft || props.onSwipeRight) {
-                    component.props.onTouchStart = () => { }; // Placeholder for test compatibility
-                }
-            }
-            else if (modifier.type === 'utility') {
-                const utilityModifier = modifier; // UtilityModifier
-                const props = utilityModifier.properties;
-                // Copy utility styles to component props.style
-                if (!component.props.style) {
-                    component.props.style = {};
-                }
-                Object.entries(props).forEach(([key, value]) => {
-                    if (value !== undefined && value !== null) {
-                        component.props.style[key] = value;
-                    }
-                });
-            }
-            else if (modifier.type === 'tabIndex') {
-                // tabIndex modifier has been moved to @tachui/modifiers
-                // Legacy test compatibility support
-                const tabIndexModifier = modifier;
-                component.props.tabIndex = tabIndexModifier.properties?.tabIndex;
-            }
-            else if (modifier.type === 'appearance') {
-                const appearanceModifier = modifier;
-                const props = appearanceModifier.properties; // Extended for ARIA attributes
-                // Copy appearance styles to component props.style
-                if (!component.props.style) {
-                    component.props.style = {};
-                }
-                if (props.backgroundColor) {
-                    component.props.style.backgroundColor = props.backgroundColor;
-                }
-                if (props.foregroundColor) {
-                    component.props.style.color = props.foregroundColor;
-                }
-                if (props.opacity !== undefined) {
-                    component.props.style.opacity = props.opacity;
-                }
-                // Handle ARIA attributes and HTML attributes that may be on appearance modifiers
-                if (props.role !== undefined) {
-                    component.props.role = String(props.role);
-                }
-                if (props['aria-label'] !== undefined) {
-                    component.props['aria-label'] = String(props['aria-label']);
-                }
-                if (props['aria-live'] !== undefined) {
-                    component.props['aria-live'] = String(props['aria-live']);
-                }
-                if (props['aria-describedby'] !== undefined) {
-                    component.props['aria-describedby'] = String(props['aria-describedby']);
-                }
-                if (props['aria-modal'] !== undefined) {
-                    component.props['aria-modal'] =
-                        props['aria-modal'] === 'true' || props['aria-modal'] === true;
-                }
-                if (props['aria-hidden'] !== undefined) {
-                    component.props['aria-hidden'] = String(props['aria-hidden']);
-                }
-                if (props.navigationTitle !== undefined) {
-                    component.props.navigationTitle = String(props.navigationTitle);
-                }
-                if (props.navigationBarHidden !== undefined) {
-                    component.props.navigationBarHidden = props.navigationBarHidden;
-                    // Also set aria-hidden for navigationBarHidden
-                    if (props.navigationBarHidden) {
-                        component.props['aria-hidden'] = 'true';
-                    }
-                }
-                if (props.navigationBarItems !== undefined) {
-                    component.props.navigationBarItems = props.navigationBarItems;
-                }
-            }
-            else if (modifier.type === 'foreground') {
-                const foregroundModifier = modifier;
-                const props = foregroundModifier.properties || {};
-                if (props.color !== undefined) {
-                    if (!component.props.style) {
-                        component.props.style = {};
-                    }
-                    component.props.style.color = props.color;
-                }
-            }
-            else if (modifier.type === 'background') {
-                const backgroundModifier = modifier;
-                const props = backgroundModifier.properties || {};
-                if (props.background !== undefined) {
-                    if (!component.props.style) {
-                        component.props.style = {};
-                    }
-                    component.props.style.background = props.background;
-                    if (typeof props.background === 'string') {
-                        component.props.style.backgroundColor = props.background;
-                    }
-                }
-            }
-            else if (modifier.type === 'transition') {
-                const transitionModifier = modifier; // TransitionModifier
-                const props = transitionModifier.properties;
-                if (!component.props.style) {
-                    component.props.style = {};
-                }
-                if (props.transition) {
-                    component.props.style.transition = props.transition;
-                }
-            }
-            else if (modifier.type === 'size') {
-                const sizeModifier = modifier; // SizeModifier
-                const props = sizeModifier.properties;
-                if (!component.props.style) {
-                    component.props.style = {};
-                }
-                if (props.minHeight !== undefined) {
-                    component.props.style.minHeight = props.minHeight;
-                }
-                if (props.minWidth !== undefined) {
-                    component.props.style.minWidth = props.minWidth;
-                }
-                if (props.maxHeight !== undefined) {
-                    component.props.style.maxHeight = props.maxHeight;
-                }
-                if (props.maxWidth !== undefined) {
-                    component.props.style.maxWidth = props.maxWidth;
-                }
-                if (props.width !== undefined) {
-                    component.props.style.width = props.width;
-                }
-                if (props.height !== undefined) {
-                    component.props.style.height = props.height;
-                }
-            }
-            else if (modifier.type === 'css') {
-                const cssModifier = modifier; // CSSModifier
-                const props = cssModifier.properties;
-                if (!component.props.style) {
-                    component.props.style = {};
-                }
-                // Copy CSS properties directly to style
-                Object.entries(props).forEach(([key, value]) => {
-                    if (value !== undefined && value !== null) {
-                        component.props.style[key] = value;
-                    }
-                });
-            }
-        });
-    }
-    // ============================================================================
-    // MISSING MODIFIER METHODS - ACCESSIBILITY & NAVIGATION
-    // ============================================================================
-    // Individual ARIA methods for better developer experience
-    role(value) {
-        this.modifiers.push(createRegistryModifier('role', value));
-        return this;
-    }
-    ariaLabel(value) {
-        this.modifiers.push(createRegistryModifier('ariaLabel', value));
-        return this;
-    }
-    ariaLive(value) {
-        this.modifiers.push(createRegistryModifier('ariaLive', value));
-        return this;
-    }
-    ariaDescribedBy(value) {
-        this.modifiers.push(createRegistryModifier('ariaDescribedBy', value));
-        return this;
-    }
-    ariaModal(value) {
-        this.modifiers.push(createRegistryModifier('ariaModal', value));
-        return this;
-    }
-    // Touch and gesture events
-    onTouchStart(handler) {
-        this.modifiers.push(createRegistryModifier('onTouchStart', handler));
-        return this;
-    }
-    onTouchMove(handler) {
-        this.modifiers.push(createRegistryModifier('onTouchMove', handler));
-        return this;
-    }
-    onTouchEnd(handler) {
-        this.modifiers.push(createRegistryModifier('onTouchEnd', handler));
-        return this;
-    }
-    // Swipe gestures (simplified implementations)
-    onSwipeLeft(handler) {
-        this.modifiers.push(createRegistryModifier('onSwipeLeft', handler));
-        return this;
-    }
-    onSwipeRight(handler) {
-        this.modifiers.push(createRegistryModifier('onSwipeRight', handler));
-        return this;
-    }
-    // Navigation methods - these delegate to the navigation package functions
-    navigationTitle(title) {
-        this.modifiers.push(createRegistryModifier('navigationTitle', title));
-        return this;
-    }
-    navigationBarHidden(hidden = true) {
-        this.modifiers.push(createRegistryModifier('navigationBarHidden', hidden));
-        return this;
-    }
-    navigationBarItems(options) {
-        this.modifiers.push(createRegistryModifier('navigationBarItems', options));
-        return this;
-    }
-    // ============================================================================
-    // MISSING TRANSITION METHODS
-    // ============================================================================
-    transitions(config) {
-        // Placeholder - implement with proper transition system
-        this.modifiers.push(createRegistryModifier('transitions', config));
-        return this;
-    }
-    // All transition methods moved to @tachui/modifiers:
-    // fadeTransition(), transformTransition(), colorTransition(), layoutTransition(),
-    // buttonTransition(), cardTransition(), modalTransition(), smoothTransition(),
-    // quickTransition(), slowTransition()
-    // ============================================================================
-    // SCROLL METHODS - ALL MOVED TO @tachui/modifiers
-    // ============================================================================
-    // scroll(), scrollBehavior(), overscrollBehavior(), overscrollBehaviorX(),
-    // overscrollBehaviorY(), scrollMargin(), scrollPadding(), scrollSnap()
-    // ============================================================================
-    // MIGRATED MODIFIERS - NOW IN SPECIALIZED PACKAGES
-    // ============================================================================
-    // Viewport lifecycle modifiers - moved to @tachui/viewport
-    onAppear(_handler) {
-        throw new Error('onAppear modifier has been moved to @tachui/viewport. Please import { onAppear } from "@tachui/viewport/modifiers" and use it directly instead of chaining it on components.');
-    }
-    onDisappear(_handler) {
-        throw new Error('onDisappear modifier has been moved to @tachui/viewport. Please import { onDisappear } from "@tachui/viewport/modifiers" and use it directly instead of chaining it on components.');
-    }
-    // Mobile gesture modifiers - moved to @tachui/mobile
-    refreshable(_onRefresh, _isRefreshing) {
-        throw new Error('refreshable modifier has been moved to @tachui/mobile. Please import { refreshable } from "@tachui/mobile/modifiers" and use it directly instead of chaining it on components.');
-    }
-    // onAppear and onDisappear have been moved to @tachui/viewport/modifiers
-    // to maintain proper architectural boundaries
-    // Transform modifiers
-    scaleEffect(x, y, anchor) {
-        this.modifiers.push(createRegistryModifier('scaleEffect', x, y, anchor));
-        return this;
-    }
-}
-/**
- * Create a modifier builder for a component with dynamic method support
- */
-export function createModifierBuilder(component) {
-    const builderImpl = new ModifierBuilderImpl(component);
-    // Create a Proxy to handle dynamic modifier methods
-    return new Proxy(builderImpl, {
-        get(target, prop, receiver) {
-            // If the property exists on the target, return it
-            if (prop in target) {
-                const value = target[prop];
-                if (typeof value === 'function') {
-                    // For methods, bind them to the receiver and ensure they return the receiver
-                    return function (...args) {
-                        const result = value.apply(receiver, args);
-                        // If the method returns the target, return the receiver instead
-                        return result === target ? receiver : result;
-                    };
-                }
-                return value;
-            }
-            // If it's a string property and looks like a modifier method
-            if (typeof prop === 'string') {
-                const activeRegistry = getActiveRegistry();
-                // Special handling for responsive modifier
-                if (prop === 'responsive') {
-                    return function (...args) {
-                        const config = args[0];
-                        if (config) {
-                            const modifier = createRegistryModifier(prop, config);
-                            this.addModifierInternal(modifier);
-                        }
-                        // Return the receiver to maintain chaining compatibility
-                        return receiver;
-                    };
-                }
-                // Handle breakpoint methods directly on the builder
-                if (prop === 'base' || prop === 'sm' || prop === 'md' || prop === 'lg' || prop === 'xl' || prop === '2xl') {
-                    return new Proxy({}, {
-                        get(_target2, prop3) {
-                            if (typeof prop3 === 'string') {
-                                return (...args2) => {
-                                    // Create responsive modifier for this breakpoint
-                                    const responsiveConfig = { [prop3]: { [prop]: args2[0] } };
-                                    const modifier = createRegistryModifier('responsive', responsiveConfig);
-                                    target.addModifierInternal(modifier);
-                                    // Return the main proxy (receiver) to maintain chaining
-                                    return receiver;
-                                };
-                            }
-                            return undefined;
-                        }
-                    });
-                }
-                // Check if this modifier exists in the registry
-                if (activeRegistry.has(prop)) {
-                    // Return a function that creates the modifier and adds it to the builder
-                    return function (...args) {
-                        const modifier = createRegistryModifier(prop, ...args);
-                        this.addModifierInternal(modifier);
-                        return receiver;
-                    };
-                }
-            }
-            // Return undefined for unknown properties
-            return undefined;
-        },
-    });
-}
-/**
- * Apply modifiers to a component instance
- */
-export function applyModifiers(component, modifiers) {
-    return {
-        ...component,
-        modifiers,
-        modifierBuilder: createModifierBuilder(component),
-    };
-}
-/**
- * Utility functions for common modifier patterns
- */
-export const modifierUtils = {
-    /**
-     * Create a padding modifier with all sides
-     */
-    paddingAll(value) {
-        return createRegistryModifier('padding', { all: value });
-    },
-};
-//# sourceMappingURL=builder.js.map