@tpitre/story-ui 2.6.1 → 2.7.1

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

@@ -0,0 +1,545 @@
+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

@@ -0,0 +1,25 @@
+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" }) })] }) }));
+};