@tpitre/story-ui 2.7.1 → 2.8.1

package/dist/visual-builder/components/Canvas/ComponentRenderer.js

@@ -1,545 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { useDraggable, useDroppable } from '@dnd-kit/core';
-import { Box, Button, TextInput, Text, Title, Container, Group, Stack, Card, Badge, Anchor, Image, Divider, Paper, Alert, PasswordInput, Textarea, Select, MultiSelect, NumberInput, Checkbox, Radio, Switch, Flex, Grid, GridCol, SimpleGrid, Code, Mark, Blockquote, Avatar, Indicator, Breadcrumbs, Tabs, Loader, Progress, RingProgress, Tooltip, Popover } from '@mantine/core';
-import { useSelection } from '../../hooks/useSelection';
-import { useVisualBuilderStore } from '../../store/visualBuilderStore';
-import { CONTAINER_COMPONENTS, MANTINE_COMPONENTS } from '../../config/componentRegistry';
-// Helper function to extract spacing props from component props
-const extractSpacingProps = (props) => {
-    const spacingProps = {};
-    // Extract spacing properties and filter out undefined values
-    ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'].forEach(key => {
-        if (props[key] !== undefined && props[key] !== null && props[key] !== '') {
-            spacingProps[key] = props[key];
-        }
-    });
-    return spacingProps;
-};
-const DropZone = ({ parentId, insertIndex, isVisible }) => {
-    const { setNodeRef, isOver } = useDroppable({
-        id: `dropzone-${parentId || 'root'}-${insertIndex}`,
-        data: {
-            isInsertionPoint: true,
-            parentId,
-            insertIndex,
-            insertPosition: 'before'
-        }
-    });
-    if (!isVisible)
-        return null;
-    return (_jsx(Box, { ref: setNodeRef, style: {
-            height: isOver ? '8px' : '2px',
-            backgroundColor: isOver ? '#3b82f6' : 'transparent',
-            border: isOver ? '2px dashed #3b82f6' : '1px dashed #e5e7eb',
-            borderRadius: '2px',
-            margin: '2px 0',
-            transition: 'all 0.2s ease-in-out',
-            opacity: isOver ? 1 : 0.5
-        } }));
-};
-export const ComponentRenderer = ({ component, index: _index, parentId = null, preserveOriginalLayout = false }) => {
-    const { handleComponentSelect, isSelected } = useSelection();
-    const { draggedComponent } = useVisualBuilderStore();
-    const selected = isSelected(component.id);
-    const isDraggedComponent = draggedComponent?.id === component.id;
-    // Draggable setup for existing components
-    const { attributes, listeners, setNodeRef: dragRef, transform, isDragging, } = useDraggable({
-        id: component.id,
-        data: {
-            component,
-            isFromCanvas: true,
-            parentId
-        }
-    });
-    // Droppable setup for container components
-    const isContainer = CONTAINER_COMPONENTS.includes(component.type);
-    // Get all component types for accepts array
-    const allComponentTypes = MANTINE_COMPONENTS.map(comp => comp.type);
-    const { setNodeRef: dropRef, isOver } = useDroppable({
-        id: `${component.id}-drop`,
-        data: {
-            isContainer: true,
-            componentId: component.id,
-            accepts: allComponentTypes
-        },
-        disabled: !isContainer
-    });
-    const style = transform ? {
-        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-        opacity: isDragging || isDraggedComponent ? 0.5 : 1,
-        zIndex: isDragging ? 1000 : 'auto',
-    } : { opacity: isDraggedComponent ? 0.5 : 1 };
-    // Show drop zones when dragging
-    const showDropZones = Boolean(draggedComponent && !isDraggedComponent);
-    const renderComponent = () => {
-        const { type, props, children } = component;
-        // Extract spacing props for all components
-        const spacingProps = extractSpacingProps(props);
-        // Ensure style is an object, not a string
-        let styleObject = {};
-        if (props.style) {
-            if (typeof props.style === 'string') {
-                // If style is still a string, try to parse it
-                try {
-                    // Handle case where style might be a stringified object
-                    if (props.style.startsWith('{') && props.style.endsWith('}')) {
-                        const styleStr = props.style.slice(1, -1);
-                        const pairs = styleStr.split(',');
-                        styleObject = {};
-                        for (const pair of pairs) {
-                            const colonIndex = pair.indexOf(':');
-                            if (colonIndex > -1) {
-                                const key = pair.substring(0, colonIndex).trim().replace(/['"]/g, '');
-                                const value = pair.substring(colonIndex + 1).trim().replace(/['"]/g, '');
-                                styleObject[key] = value;
-                            }
-                        }
-                    }
-                }
-                catch (e) {
-                    console.warn('Failed to parse style string:', props.style);
-                }
-            }
-            else if (typeof props.style === 'object' && !Array.isArray(props.style)) {
-                styleObject = props.style;
-            }
-        }
-        const commonProps = {
-            onClick: (e) => {
-                e.stopPropagation();
-                handleComponentSelect(component);
-            },
-            style: {
-                cursor: 'pointer',
-                ...styleObject
-            },
-            ...spacingProps
-        };
-        // Special handling for Button components when preserveOriginalLayout is true
-        const buttonProps = type === 'Button' && preserveOriginalLayout ? {
-            onClick: (e) => {
-                e.stopPropagation();
-                handleComponentSelect(component);
-            },
-            style: {
-                cursor: 'pointer',
-                ...styleObject,
-                // Ensure fullWidth is properly applied
-                width: props.fullWidth ? '100%' : styleObject.width || 'auto'
-            },
-            ...spacingProps
-        } : commonProps;
-        switch (type) {
-            case 'Button':
-                const finalButtonProps = type === 'Button' ? buttonProps : commonProps;
-                console.log(`🔵 [Button] fullWidth: ${props.fullWidth}, preserveOriginalLayout: ${preserveOriginalLayout}`);
-                console.log(`🔵 [Button] Final props width:`, finalButtonProps.style?.width);
-                console.log(`🔵 [Button] All props:`, {
-                    fullWidth: props.fullWidth,
-                    variant: props.variant,
-                    children: props.children
-                });
-                return (_jsx(Button, { ...finalButtonProps, variant: props.variant, size: props.size, color: props.color, disabled: props.disabled, fullWidth: props.fullWidth, children: props.children }));
-            case 'TextInput':
-                return (_jsx(TextInput, { ...commonProps, placeholder: props.placeholder, label: props.label, size: props.size, disabled: props.disabled }));
-            case 'Text':
-                const computedFw = typeof props.weight === 'number' ? props.weight :
-                    typeof props.fw === 'number' ? props.fw :
-                        props.weight === 'bold' ? 700 :
-                            props.weight === 'semibold' ? 600 :
-                                props.weight === 'medium' ? 500 :
-                                    props.weight === 'normal' ? 400 :
-                                        props.weight === 'lighter' ? 300 :
-                                            props.fw || props.weight || 400;
-                // Debug log for Text components with "Premium" or "Sport" in content
-                if (props.children && typeof props.children === 'string' &&
-                    (props.children.includes('Premium') || props.children.includes('Sport'))) {
-                    console.log('📝 [Text Component Title]', {
-                        content: props.children,
-                        preserveOriginalLayout,
-                        propsWeight: props.weight,
-                        propsFw: props.fw,
-                        computedFw,
-                        size: props.size,
-                        parentId,
-                        componentId: component.id
-                    });
-                }
-                return (_jsx(Text, { ...commonProps, size: props.size, fw: computedFw, c: props.c || props.color || undefined, children: props.children }));
-            case 'Title':
-                console.log(`🗞 [Title] preserveOriginalLayout: ${preserveOriginalLayout}, props:`, props, 'fw calculated:', props.fw || props.weight || undefined);
-                return (_jsx(Title, { ...commonProps, order: Number(props.order), fw: props.fw || props.weight || undefined, c: props.color || undefined, children: props.children }));
-            case 'Container':
-                const containerRef = (node) => {
-                    dropRef(node);
-                };
-                return (_jsxs(Container, { ...commonProps, size: props.size, fluid: props.fluid, ref: containerRef, style: {
-                        ...commonProps.style,
-                        ...(preserveOriginalLayout ? {} : {
-                            minHeight: children?.length === 0 ? '100px' : 'auto',
-                            borderWidth: isOver || selected ? '2px' : '1px',
-                            borderStyle: isOver || !selected ? 'dashed' : 'solid',
-                            borderColor: isOver || selected ? '#3b82f6' : '#e9ecef',
-                            borderRadius: '8px',
-                            padding: '1rem',
-                            backgroundColor: isOver ? '#f0f9ff' : 'transparent'
-                        })
-                    }, children: [children?.map((child, idx) => (_jsxs(React.Fragment, { children: [_jsx(DropZone, { parentId: component.id, insertIndex: idx, isVisible: showDropZones && isContainer }), _jsx(ComponentRenderer, { component: child, index: idx, isChild: true, parentId: component.id, preserveOriginalLayout: preserveOriginalLayout })] }, child.id))), showDropZones && isContainer && (_jsx(DropZone, { parentId: component.id, insertIndex: children?.length || 0, isVisible: true })), children?.length === 0 && (_jsx(Text, { c: "dimmed", ta: "center", children: "Drop components here" }))] }));
-            case 'Group':
-                const groupRef = (node) => {
-                    dropRef(node);
-                };
-                return (_jsxs(Group, { ...commonProps, justify: props.justify, align: props.align, gap: props.gap, ref: groupRef, style: {
-                        ...commonProps.style,
-                        ...(preserveOriginalLayout ? {} : {
-                            minHeight: children?.length === 0 ? '80px' : 'auto',
-                            borderWidth: isOver || selected ? '2px' : '1px',
-                            borderStyle: isOver || !selected ? 'dashed' : 'solid',
-                            borderColor: isOver || selected ? '#3b82f6' : '#e9ecef',
-                            borderRadius: '8px',
-                            padding: '1rem',
-                            backgroundColor: isOver ? '#f0f9ff' : 'transparent'
-                        })
-                    }, children: [children?.map((child, idx) => (_jsxs(React.Fragment, { children: [_jsx(DropZone, { parentId: component.id, insertIndex: idx, isVisible: showDropZones && isContainer }), _jsx(ComponentRenderer, { component: child, index: idx, isChild: true, parentId: component.id, preserveOriginalLayout: preserveOriginalLayout })] }, child.id))), showDropZones && isContainer && (_jsx(DropZone, { parentId: component.id, insertIndex: children?.length || 0, isVisible: true })), children?.length === 0 && (_jsx(Text, { c: "dimmed", children: "Drop components here" }))] }));
-            case 'Stack':
-                const stackRef = (node) => {
-                    dropRef(node);
-                };
-                console.log(`📚 [Stack] preserveOriginalLayout: ${preserveOriginalLayout}, gap: ${props.gap}`);
-                // Stack styling - preserve original when needed
-                const stackStyle = preserveOriginalLayout ? {
-                    ...commonProps.style
-                    // No additional styling that might interfere with original layout
-                } : {
-                    ...commonProps.style,
-                    minHeight: children?.length === 0 ? '100px' : 'auto',
-                    borderWidth: isOver || selected ? '2px' : '1px',
-                    borderStyle: isOver || !selected ? 'dashed' : 'solid',
-                    borderColor: isOver || selected ? '#3b82f6' : '#e9ecef',
-                    borderRadius: '8px',
-                    padding: '1rem',
-                    backgroundColor: isOver ? '#f0f9ff' : 'transparent'
-                };
-                return (_jsxs(Stack, { ...commonProps, gap: props.gap, align: props.align, ref: stackRef, style: stackStyle, children: [children?.map((child, idx) => (_jsxs(React.Fragment, { children: [_jsx(DropZone, { parentId: component.id, insertIndex: idx, isVisible: showDropZones && isContainer }), _jsx(ComponentRenderer, { component: child, index: idx, isChild: true, parentId: component.id, preserveOriginalLayout: preserveOriginalLayout })] }, child.id))), showDropZones && isContainer && (_jsx(DropZone, { parentId: component.id, insertIndex: children?.length || 0, isVisible: true })), children?.length === 0 && (_jsx(Text, { c: "dimmed", ta: "center", children: "Drop components here" }))] }));
-            case 'Card':
-                const cardRef = (node) => {
-                    dropRef(node);
-                };
-                // Use specific border properties to avoid conflicts
-                const cardStyles = {
-                    ...commonProps.style,
-                    ...(preserveOriginalLayout ? {} : { minHeight: children?.length === 0 ? '120px' : 'auto' })
-                };
-                // Only apply editor styling when not preserving original layout
-                if (!preserveOriginalLayout) {
-                    // Only apply border styles when withBorder is false
-                    if (!props.withBorder) {
-                        if (isOver) {
-                            cardStyles.borderWidth = '2px';
-                            cardStyles.borderStyle = 'dashed';
-                            cardStyles.borderColor = '#3b82f6';
-                        }
-                        else if (selected) {
-                            cardStyles.borderWidth = '2px';
-                            cardStyles.borderStyle = 'solid';
-                            cardStyles.borderColor = '#3b82f6';
-                        }
-                        else {
-                            cardStyles.borderWidth = '1px';
-                            cardStyles.borderStyle = 'dashed';
-                            cardStyles.borderColor = '#e9ecef';
-                        }
-                    }
-                    else if (selected || isOver) {
-                        // When withBorder is true, use outline for selection
-                        if (isOver) {
-                            cardStyles.outline = '2px dashed #3b82f6';
-                        }
-                        else if (selected) {
-                            cardStyles.outline = '2px solid #3b82f6';
-                        }
-                        cardStyles.outlineOffset = '1px';
-                    }
-                }
-                return (_jsxs(Card, { ...commonProps, shadow: props.shadow, padding: props.padding, radius: props.radius, withBorder: props.withBorder, ref: cardRef, style: cardStyles, children: [children?.map((child, idx) => (_jsxs(React.Fragment, { children: [_jsx(DropZone, { parentId: component.id, insertIndex: idx, isVisible: showDropZones && isContainer }), _jsx(ComponentRenderer, { component: child, index: idx, isChild: true, parentId: component.id, preserveOriginalLayout: preserveOriginalLayout })] }, child.id))), showDropZones && isContainer && (_jsx(DropZone, { parentId: component.id, insertIndex: children?.length || 0, isVisible: true })), children?.length === 0 && (_jsx(Text, { c: "dimmed", ta: "center", children: "Drop components here" }))] }));
-            case 'CardSection':
-                const cardSectionRef = (node) => {
-                    dropRef(node);
-                };
-                console.log(`🖼️ [CardSection] preserveOriginalLayout: ${preserveOriginalLayout}, inheritPadding: ${props.inheritPadding}`);
-                // Special styling for CardSection when preserving original layout
-                const cardSectionStyle = preserveOriginalLayout ? {
-                    ...commonProps.style,
-                    // Remove any extra margins/padding that might be added
-                    margin: 0,
-                    padding: props.inheritPadding ? undefined : 0
-                } : {
-                    ...commonProps.style,
-                    minHeight: children?.length === 0 ? '80px' : 'auto',
-                    borderWidth: isOver || selected ? '2px' : '1px',
-                    borderStyle: isOver || !selected ? 'dashed' : 'solid',
-                    borderColor: isOver || selected ? '#3b82f6' : '#e9ecef',
-                    padding: props.inheritPadding ? undefined : '1rem',
-                    backgroundColor: isOver ? '#f0f9ff' : 'transparent'
-                };
-                // For CardSection, we need to be more selective about which props to pass
-                const cardSectionProps = preserveOriginalLayout ? {
-                    onClick: commonProps.onClick,
-                    style: cardSectionStyle,
-                    // Only pass spacing props that are actually set
-                    ...Object.keys(spacingProps).reduce((acc, key) => {
-                        if (spacingProps[key] !== undefined && spacingProps[key] !== null && spacingProps[key] !== '') {
-                            acc[key] = spacingProps[key];
-                        }
-                        return acc;
-                    }, {})
-                } : commonProps;
-                return (_jsxs(Card.Section, { ...cardSectionProps, withBorder: props.withBorder, inheritPadding: props.inheritPadding, ref: cardSectionRef, style: cardSectionStyle, children: [children?.map((child, idx) => (_jsxs(React.Fragment, { children: [_jsx(DropZone, { parentId: component.id, insertIndex: idx, isVisible: showDropZones && isContainer }), _jsx(ComponentRenderer, { component: child, index: idx, isChild: true, parentId: component.id, preserveOriginalLayout: preserveOriginalLayout })] }, child.id))), showDropZones && isContainer && (_jsx(DropZone, { parentId: component.id, insertIndex: children?.length || 0, isVisible: true })), children?.length === 0 && (_jsx(Text, { c: "dimmed", ta: "center", children: "Drop components here" }))] }));
-            case 'Badge':
-                return (_jsx(Badge, { ...commonProps, variant: props.variant, color: props.color, size: props.size, children: props.children }));
-            case 'Anchor':
-                return (_jsx(Anchor, { ...commonProps, href: props.href, size: props.size, underline: props.underline, children: props.children }));
-            case 'Image':
-                // Convert aspect ratio to style
-                const getAspectRatioStyle = (aspectRatio) => {
-                    const ratios = {
-                        '16:9': '16 / 9',
-                        '4:3': '4 / 3',
-                        '1:1': '1 / 1',
-                        '3:2': '3 / 2',
-                        '21:9': '21 / 9'
-                    };
-                    return ratios[aspectRatio] || '16 / 9';
-                };
-                // Extract height from props if it exists
-                const imageHeight = props.height || props.h;
-                const imageStyle = {
-                    ...commonProps.style,
-                    width: '100%',
-                    objectFit: (props.fit || 'cover')
-                };
-                // Apply aspect ratio only if no explicit height is set
-                if (!imageHeight && props.aspectRatio) {
-                    imageStyle.aspectRatio = getAspectRatioStyle(props.aspectRatio);
-                }
-                return (_jsx(Image, { ...commonProps, src: props.src, alt: props.alt, radius: props.radius, height: imageHeight, style: imageStyle }));
-            case 'Divider':
-                return (_jsx(Divider, { ...commonProps, size: props.size, orientation: props.orientation, label: props.label || undefined, labelPosition: props.labelPosition }));
-            case 'Paper':
-                const paperRef = (node) => {
-                    dropRef(node);
-                };
-                // Use specific border properties to avoid conflicts
-                const paperStyles = {
-                    ...commonProps.style,
-                    ...(preserveOriginalLayout ? {} : { minHeight: children?.length === 0 ? '100px' : 'auto' })
-                };
-                // Only apply editor styling when not preserving original layout
-                if (!preserveOriginalLayout && !props.withBorder) {
-                    if (isOver) {
-                        paperStyles.borderWidth = '2px';
-                        paperStyles.borderStyle = 'dashed';
-                        paperStyles.borderColor = '#3b82f6';
-                    }
-                    else if (selected) {
-                        paperStyles.borderWidth = '2px';
-                        paperStyles.borderStyle = 'solid';
-                        paperStyles.borderColor = '#3b82f6';
-                    }
-                    else {
-                        paperStyles.borderWidth = '1px';
-                        paperStyles.borderStyle = 'dashed';
-                        paperStyles.borderColor = '#e9ecef';
-                    }
-                }
-                else if (!preserveOriginalLayout && (selected || isOver)) {
-                    // When withBorder is true, use outline for selection
-                    if (isOver) {
-                        paperStyles.outline = '2px dashed #3b82f6';
-                    }
-                    else if (selected) {
-                        paperStyles.outline = '2px solid #3b82f6';
-                    }
-                    paperStyles.outlineOffset = '1px';
-                }
-                return (_jsxs(Paper, { ...commonProps, shadow: props.shadow, radius: props.radius, p: props.p, withBorder: props.withBorder, ref: paperRef, style: paperStyles, children: [children?.map((child, idx) => (_jsxs(React.Fragment, { children: [_jsx(DropZone, { parentId: component.id, insertIndex: idx, isVisible: showDropZones && isContainer }), _jsx(ComponentRenderer, { component: child, index: idx, isChild: true, parentId: component.id, preserveOriginalLayout: preserveOriginalLayout })] }, child.id))), showDropZones && isContainer && (_jsx(DropZone, { parentId: component.id, insertIndex: children?.length || 0, isVisible: true })), children?.length === 0 && (_jsx(Text, { c: "dimmed", ta: "center", children: "Drop components here" }))] }));
-            case 'Alert':
-                return (_jsx(Alert, { ...commonProps, title: props.title, color: props.color, variant: props.variant, children: props.children }));
-            // Additional Input Components
-            case 'PasswordInput':
-                return (_jsx(PasswordInput, { ...commonProps, placeholder: props.placeholder, label: props.label, size: props.size, visible: props.visible, disabled: props.disabled }));
-            case 'Textarea':
-                return (_jsx(Textarea, { ...commonProps, placeholder: props.placeholder, label: props.label, size: props.size, rows: props.rows, autosize: props.autosize, disabled: props.disabled }));
-            case 'Select':
-                return (_jsx(Select, { ...commonProps, placeholder: props.placeholder, label: props.label, size: props.size, data: props.data || ['Option 1', 'Option 2', 'Option 3'], searchable: props.searchable, clearable: props.clearable, disabled: props.disabled }));
-            case 'MultiSelect':
-                return (_jsx(MultiSelect, { ...commonProps, placeholder: props.placeholder, label: props.label, size: props.size, data: props.data || ['Option 1', 'Option 2', 'Option 3'], searchable: props.searchable, clearable: props.clearable, disabled: props.disabled }));
-            case 'NumberInput':
-                return (_jsx(NumberInput, { ...commonProps, placeholder: props.placeholder, label: props.label, size: props.size, min: props.min, max: props.max, step: props.step, disabled: props.disabled }));
-            case 'Checkbox':
-                return (_jsx(Checkbox, { ...commonProps, label: props.label, size: props.size, color: props.color, indeterminate: props.indeterminate, disabled: props.disabled }));
-            case 'Radio':
-                return (_jsx(Radio, { ...commonProps, label: props.label, size: props.size, color: props.color, disabled: props.disabled }));
-            case 'Switch':
-                return (_jsx(Switch, { ...commonProps, label: props.label, size: props.size, color: props.color, disabled: props.disabled }));
-            // Layout Components
-            case 'Box':
-                const boxRef = (node) => {
-                    dropRef(node);
-                };
-                return (_jsxs(Box, { ...commonProps, bg: props.bg, c: props.c, ref: boxRef, style: {
-                        ...commonProps.style,
-                        ...(preserveOriginalLayout ? {} : {
-                            minHeight: children?.length === 0 ? '100px' : 'auto',
-                            borderWidth: isOver || selected ? '2px' : '1px',
-                            borderStyle: isOver || !selected ? 'dashed' : 'solid',
-                            borderColor: isOver || selected ? '#3b82f6' : '#e9ecef',
-                            borderRadius: '8px',
-                            padding: '1rem',
-                            backgroundColor: isOver ? '#f0f9ff' : props.bg || 'transparent'
-                        })
-                    }, children: [children?.map((child, idx) => (_jsxs(React.Fragment, { children: [_jsx(DropZone, { parentId: component.id, insertIndex: idx, isVisible: showDropZones && isContainer }), _jsx(ComponentRenderer, { component: child, index: idx, isChild: true, parentId: component.id, preserveOriginalLayout: preserveOriginalLayout })] }, child.id))), showDropZones && isContainer && (_jsx(DropZone, { parentId: component.id, insertIndex: children?.length || 0, isVisible: true })), children?.length === 0 && (_jsx(Text, { c: "dimmed", ta: "center", children: "Drop components here" }))] }));
-            case 'Flex':
-                const flexRef = (node) => {
-                    dropRef(node);
-                };
-                return (_jsxs(Flex, { ...commonProps, direction: props.direction, justify: props.justify, align: props.align, wrap: props.wrap, gap: props.gap, ref: flexRef, style: {
-                        ...commonProps.style,
-                        ...(preserveOriginalLayout ? {} : {
-                            minHeight: children?.length === 0 ? '100px' : 'auto',
-                            borderWidth: isOver || selected ? '2px' : '1px',
-                            borderStyle: isOver || !selected ? 'dashed' : 'solid',
-                            borderColor: isOver || selected ? '#3b82f6' : '#e9ecef',
-                            borderRadius: '8px',
-                            padding: '1rem',
-                            backgroundColor: isOver ? '#f0f9ff' : 'transparent'
-                        })
-                    }, children: [children?.map((child, idx) => (_jsxs(React.Fragment, { children: [_jsx(DropZone, { parentId: component.id, insertIndex: idx, isVisible: showDropZones && isContainer }), _jsx(ComponentRenderer, { component: child, index: idx, isChild: true, parentId: component.id, preserveOriginalLayout: preserveOriginalLayout })] }, child.id))), showDropZones && isContainer && (_jsx(DropZone, { parentId: component.id, insertIndex: children?.length || 0, isVisible: true })), children?.length === 0 && (_jsx(Text, { c: "dimmed", ta: "center", children: "Drop components here" }))] }));
-            case 'Grid':
-                const gridRef = (node) => {
-                    dropRef(node);
-                };
-                return (_jsxs(Grid, { ...commonProps, columns: props.columns, gutter: props.gutter, grow: props.grow, ref: gridRef, style: {
-                        ...commonProps.style,
-                        ...(preserveOriginalLayout ? {} : {
-                            minHeight: children?.length === 0 ? '100px' : 'auto',
-                            borderWidth: isOver || selected ? '2px' : '1px',
-                            borderStyle: isOver || !selected ? 'dashed' : 'solid',
-                            borderColor: isOver || selected ? '#3b82f6' : '#e9ecef',
-                            borderRadius: '8px',
-                            padding: '1rem',
-                            backgroundColor: isOver ? '#f0f9ff' : 'transparent'
-                        })
-                    }, children: [children?.map((child, idx) => (_jsxs(React.Fragment, { children: [_jsx(DropZone, { parentId: component.id, insertIndex: idx, isVisible: showDropZones && isContainer }), _jsx(ComponentRenderer, { component: child, index: idx, isChild: true, parentId: component.id, preserveOriginalLayout: preserveOriginalLayout })] }, child.id))), showDropZones && isContainer && (_jsx(DropZone, { parentId: component.id, insertIndex: children?.length || 0, isVisible: true })), children?.length === 0 && (_jsx(Text, { c: "dimmed", ta: "center", children: "Drop GridCol components here" }))] }));
-            case 'GridCol':
-                const gridColRef = (node) => {
-                    dropRef(node);
-                };
-                return (_jsxs(GridCol, { ...commonProps, span: props.span, offset: props.offset, ref: gridColRef, style: {
-                        ...commonProps.style,
-                        ...(preserveOriginalLayout ? {} : {
-                            minHeight: children?.length === 0 ? '80px' : 'auto',
-                            borderWidth: isOver || selected ? '2px' : '1px',
-                            borderStyle: isOver || !selected ? 'dashed' : 'solid',
-                            borderColor: isOver || selected ? '#3b82f6' : '#e9ecef',
-                            borderRadius: '8px',
-                            padding: '1rem',
-                            backgroundColor: isOver ? '#f0f9ff' : 'transparent'
-                        })
-                    }, children: [children?.map((child, idx) => (_jsxs(React.Fragment, { children: [_jsx(DropZone, { parentId: component.id, insertIndex: idx, isVisible: showDropZones && isContainer }), _jsx(ComponentRenderer, { component: child, index: idx, isChild: true, parentId: component.id, preserveOriginalLayout: preserveOriginalLayout })] }, child.id))), showDropZones && isContainer && (_jsx(DropZone, { parentId: component.id, insertIndex: children?.length || 0, isVisible: true })), children?.length === 0 && (_jsx(Text, { c: "dimmed", ta: "center", children: "Drop components here" }))] }));
-            case 'SimpleGrid':
-                const simpleGridRef = (node) => {
-                    dropRef(node);
-                };
-                return (_jsxs(SimpleGrid, { ...commonProps, cols: props.cols, spacing: props.spacing, verticalSpacing: props.verticalSpacing, ref: simpleGridRef, style: {
-                        ...commonProps.style,
-                        ...(preserveOriginalLayout ? {} : {
-                            minHeight: children?.length === 0 ? '100px' : 'auto',
-                            borderWidth: isOver || selected ? '2px' : '1px',
-                            borderStyle: isOver || !selected ? 'dashed' : 'solid',
-                            borderColor: isOver || selected ? '#3b82f6' : '#e9ecef',
-                            borderRadius: '8px',
-                            padding: '1rem',
-                            backgroundColor: isOver ? '#f0f9ff' : 'transparent'
-                        })
-                    }, children: [children?.map((child, idx) => (_jsxs(React.Fragment, { children: [_jsx(DropZone, { parentId: component.id, insertIndex: idx, isVisible: showDropZones && isContainer }), _jsx(ComponentRenderer, { component: child, index: idx, isChild: true, parentId: component.id, preserveOriginalLayout: preserveOriginalLayout })] }, child.id))), showDropZones && isContainer && (_jsx(DropZone, { parentId: component.id, insertIndex: children?.length || 0, isVisible: true })), children?.length === 0 && (_jsx(Text, { c: "dimmed", ta: "center", children: "Drop components here" }))] }));
-            // Typography Components
-            case 'Code':
-                return (_jsx(Code, { ...commonProps, color: props.color, block: props.block, children: props.children }));
-            case 'Mark':
-                return (_jsx(Mark, { ...commonProps, color: props.color, children: props.children }));
-            case 'Blockquote':
-                return (_jsx(Blockquote, { ...commonProps, cite: props.cite, color: props.color, children: props.children }));
-            // Display Components
-            case 'Avatar':
-                return (_jsx(Avatar, { ...commonProps, src: props.src, alt: props.alt, size: props.size, radius: props.radius, color: props.color }));
-            case 'Indicator':
-                return (_jsx(Indicator, { ...commonProps, label: props.label, size: props.size, color: props.color, position: props.position, children: _jsx(Box, { p: "md", bg: "gray.1", children: props.children }) }));
-            // Navigation Components
-            case 'Breadcrumbs':
-                return (_jsx(Breadcrumbs, { ...commonProps, separator: props.separator, children: (props.children || ['Home', 'Products', 'Current']).map((item, idx) => (_jsx(Anchor, { href: "#", children: item }, idx))) }));
-            case 'Tabs':
-                const tabsRef = (node) => {
-                    dropRef(node);
-                };
-                return (_jsxs(Tabs, { ...commonProps, variant: props.variant, color: props.color, orientation: props.orientation, defaultValue: "tab1", ref: tabsRef, style: {
-                        ...commonProps.style,
-                        ...(preserveOriginalLayout ? {} : {
-                            minHeight: children?.length === 0 ? '120px' : 'auto',
-                            borderWidth: isOver || selected ? '2px' : '1px',
-                            borderStyle: isOver || !selected ? 'dashed' : 'solid',
-                            borderColor: isOver || selected ? '#3b82f6' : '#e9ecef',
-                            borderRadius: '8px',
-                            padding: '1rem',
-                            backgroundColor: isOver ? '#f0f9ff' : 'transparent'
-                        })
-                    }, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Tab, { value: "tab2", children: "Tab 2" })] }), _jsxs(Tabs.Panel, { value: "tab1", children: [children?.map((child, idx) => (_jsxs(React.Fragment, { children: [_jsx(DropZone, { parentId: component.id, insertIndex: idx, isVisible: showDropZones && isContainer }), _jsx(ComponentRenderer, { component: child, index: idx, isChild: true, parentId: component.id })] }, child.id))), showDropZones && isContainer && (_jsx(DropZone, { parentId: component.id, insertIndex: children?.length || 0, isVisible: true })), children?.length === 0 && (_jsx(Text, { c: "dimmed", ta: "center", children: "Drop components here" }))] }), _jsx(Tabs.Panel, { value: "tab2", children: _jsx(Text, { children: "Tab 2 content" }) })] }));
-            // Feedback Components
-            case 'Loader':
-                return (_jsx(Loader, { ...commonProps, size: props.size, color: props.color, variant: props.variant }));
-            case 'Progress':
-                return (_jsx(Progress, { ...commonProps, value: props.value, size: props.size, color: props.color, radius: props.radius, striped: props.striped, animated: props.animated }));
-            case 'RingProgress':
-                return (_jsx(RingProgress, { ...commonProps, size: props.size, thickness: props.thickness, sections: props.sections || [{ value: 40, color: 'blue' }], label: props.label && _jsx(Text, { ta: "center", size: "xs", children: props.label }) }));
-            // Overlay Components
-            case 'Tooltip':
-                return (_jsx(Tooltip, { label: props.label, position: props.position, color: props.color, children: _jsx(Box, { ...commonProps, children: props.children }) }));
-            case 'Popover':
-                return (_jsxs(Popover, { position: props.position, width: props.width, shadow: props.shadow, children: [_jsx(Popover.Target, { children: _jsx(Button, { ...commonProps, children: props.children }) }), _jsx(Popover.Dropdown, { children: _jsx(Text, { size: "sm", children: "Popover content" }) })] }));
-            default:
-                return (_jsxs(Box, { ...commonProps, children: ["Unknown component: ", type] }));
-        }
-    };
-    // DEBUG: Wrapper styling decision
-    console.log(`🔵 [Wrapper] ${component.type} - preserveOriginalLayout: ${preserveOriginalLayout}, selected: ${selected}, isContainer: ${isContainer}`);
-    // Hover state management
-    const [isHovered, setIsHovered] = React.useState(false);
-    // When preserving original layout, use minimal wrapper styling with hover/selection indicators
-    const wrapperStyle = preserveOriginalLayout ? {
-        ...style,
-        position: 'relative',
-        // Use box-shadow instead of outline for selection/hover - doesn't affect layout
-        boxShadow: selected ? 'inset 0 0 0 2px #3b82f6' :
-            isHovered ? 'inset 0 0 0 2px rgba(59, 130, 246, 0.3)' : 'none',
-        // Subtle background for hover - very light tint
-        backgroundColor: isHovered && !selected ? 'rgba(59, 130, 246, 0.02)' : 'transparent',
-        // Smooth transitions
-        transition: 'box-shadow 0.2s ease, background-color 0.2s ease',
-        // Keep borders at exactly 0 to not affect layout
-        borderWidth: 0,
-        borderStyle: 'none',
-        padding: 0,
-        margin: 0
-    } : {
-        ...style,
-        borderWidth: selected && !isContainer ? '2px' : '0',
-        borderStyle: selected && !isContainer ? 'solid' : 'none',
-        borderColor: selected && !isContainer ? '#3b82f6' : 'transparent',
-        borderRadius: selected ? '4px' : '0',
-        padding: selected && !isContainer ? '2px' : '0',
-        outline: 'none',
-        position: 'relative'
-    };
-    return (_jsx(Box, { ref: dragRef, style: wrapperStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), ...attributes, ...listeners, children: renderComponent() }));
-};

package/dist/visual-builder/components/CodeExporter/CodeExporter.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, Button, Group, Code, ScrollArea, Text, Box } from '@mantine/core';
-import { useVisualBuilderStore } from '../../store/visualBuilderStore';
-import { generateJSXCode } from './codeGenerator';
-export const CodeExporter = () => {
-    const { isCodeModalOpen, closeCodeModal, components } = useVisualBuilderStore();
-    const jsxCode = generateJSXCode(components);
-    const handleCopyCode = async () => {
-        try {
-            await navigator.clipboard.writeText(jsxCode);
-            // You could add a notification here
-            console.log('Code copied to clipboard');
-        }
-        catch (err) {
-            console.error('Failed to copy code:', err);
-        }
-    };
-    return (_jsx(Modal, { opened: isCodeModalOpen, onClose: closeCodeModal, title: "Export React Code", size: "xl", children: _jsxs(Box, { children: [_jsxs(Group, { justify: "space-between", mb: "md", children: [_jsx(Text, { size: "sm", c: "dimmed", children: "Generated React/JSX code for your components" }), _jsx(Button, { size: "xs", onClick: handleCopyCode, children: "Copy Code" })] }), _jsx(ScrollArea, { h: 400, children: _jsx(Code, { block: true, style: {
-                            fontSize: '12px',
-                            whiteSpace: 'pre-wrap',
-                            backgroundColor: '#f8f9fa',
-                            padding: '1rem',
-                            borderRadius: '6px'
-                        }, children: jsxCode }) }), _jsx(Group, { justify: "flex-end", mt: "md", children: _jsx(Button, { variant: "outline", onClick: closeCodeModal, children: "Close" }) })] }) }));
-};