@tpitre/story-ui 2.6.1 → 2.7.1

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

@@ -0,0 +1,99 @@
+export const generateJSXCode = (components) => {
+    if (components.length === 0) {
+        return `import React from 'react';
+import { Box } from '@mantine/core';
+
+export const GeneratedComponent = () => {
+  return (
+    <Box>
+      {/* Add your components here */}
+    </Box>
+  );
+};`;
+    }
+    const imports = generateImports(components);
+    const componentCode = generateComponentCode(components);
+    return `import React from 'react';
+${imports}
+
+export const GeneratedComponent = () => {
+  return (
+    <>
+${componentCode.split('\n').map(line => line ? `      ${line}` : '').join('\n')}
+    </>
+  );
+};`;
+};
+const generateImports = (components) => {
+    const usedComponents = new Set();
+    const collectComponents = (comps) => {
+        comps.forEach(comp => {
+            usedComponents.add(comp.type);
+            if (comp.children) {
+                collectComponents(comp.children);
+            }
+        });
+    };
+    collectComponents(components);
+    const sortedComponents = Array.from(usedComponents).sort();
+    return `import { ${sortedComponents.join(', ')} } from '@mantine/core';`;
+};
+const generateComponentCode = (components, indent = 0) => {
+    const indentStr = '  '.repeat(indent);
+    return components.map(component => {
+        const { type, props, children } = component;
+        const hasChildren = children && children.length > 0;
+        const hasTextContent = props.children && typeof props.children === 'string';
+        // Generate props string
+        const propsString = generatePropsString(props, type);
+        if (hasChildren) {
+            // Component with children
+            return `${indentStr}<${type}${propsString}>
+${generateComponentCode(children, indent + 1)}
+${indentStr}</${type}>`;
+        }
+        else if (hasTextContent) {
+            // Component with text content
+            return `${indentStr}<${type}${propsString}>
+${indentStr}  ${props.children}
+${indentStr}</${type}>`;
+        }
+        else {
+            // Self-closing component
+            return `${indentStr}<${type}${propsString} />`;
+        }
+    }).join('\n');
+};
+const generatePropsString = (props, componentType) => {
+    const propEntries = Object.entries(props);
+    // Filter out children prop for components that don't use it as text content
+    const filteredProps = propEntries.filter(([key, value]) => {
+        if (key === 'children') {
+            // Keep children prop only for text-based components
+            return ['Button', 'Text', 'Title'].includes(componentType) && typeof value === 'string';
+        }
+        // Filter out undefined, null, empty string, and default values
+        if (value === undefined || value === null || value === '')
+            return false;
+        return true;
+    });
+    if (filteredProps.length === 0)
+        return '';
+    const propsString = filteredProps
+        .map(([key, value]) => {
+        if (typeof value === 'boolean') {
+            return value ? key : `${key}={false}`;
+        }
+        else if (typeof value === 'string') {
+            return `${key}="${value}"`;
+        }
+        else if (typeof value === 'number') {
+            return `${key}={${value}}`;
+        }
+        else {
+            return `${key}={${JSON.stringify(value)}}`;
+        }
+    })
+        .join(' ');
+    return propsString ? ` ${propsString}` : '';
+};

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, Accordion } from '@mantine/core';
+import { ComponentPaletteItem } from './ComponentPaletteItem';
+import { getComponentsByCategory } from '../../config/componentRegistry';
+export const ComponentPalette = () => {
+    const componentsByCategory = getComponentsByCategory();
+    return (_jsx(Box, { p: "sm", children: _jsx(Accordion, { defaultValue: ['Layout', 'Inputs', 'Typography'], multiple: true, children: Object.entries(componentsByCategory).map(([category, components]) => (_jsxs(Accordion.Item, { value: category, children: [_jsx(Accordion.Control, { children: _jsx(Text, { fw: 500, size: "sm", children: category }) }), _jsx(Accordion.Panel, { children: _jsx(Box, { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: components.map((component) => (_jsx(ComponentPaletteItem, { config: component }, component.type))) }) })] }, category))) }) }));
+};

package/dist/visual-builder/components/ComponentPalette/ComponentPaletteItem.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDraggable } from '@dnd-kit/core';
+import { Box, Text } from '@mantine/core';
+export const ComponentPaletteItem = ({ config }) => {
+    const { attributes, listeners, setNodeRef, transform, isDragging, } = useDraggable({
+        id: `palette-${config.type}`,
+        data: {
+            isFromPalette: true,
+            componentType: config.type,
+            config
+        }
+    });
+    const style = transform ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+        opacity: isDragging ? 0.5 : 1,
+        zIndex: isDragging ? 1000 : 1,
+    } : undefined;
+    return (_jsxs(Box, { ref: setNodeRef, style: {
+            ...style,
+            padding: '.75rem',
+            backgroundColor: '#f8f9fa',
+            borderRadius: '6px',
+            border: '1px solid #e9ecef',
+            cursor: 'grab',
+            userSelect: 'none',
+            transition: 'all 0.2s ease',
+            ':hover': {
+                backgroundColor: '#e9ecef',
+                borderColor: '#dee2e6'
+            }
+        }, ...attributes, ...listeners, onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = '#e9ecef';
+            e.currentTarget.style.borderColor = '#dee2e6';
+        }, onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = '#f8f9fa';
+            e.currentTarget.style.borderColor = '#e9ecef';
+        }, children: [_jsx(Text, { size: "sm", fw: 500, children: config.displayName }), _jsx(Text, { size: "xs", c: "dimmed", mt: 2, children: getComponentDescription(config.type) })] }));
+};
+const getComponentDescription = (type) => {
+    const descriptions = {
+        Button: 'Interactive button element',
+        TextInput: 'Text input field',
+        Text: 'Text display element',
+        Title: 'Heading element',
+        Container: 'Layout container',
+        Group: 'Horizontal layout',
+        Stack: 'Vertical layout',
+        Card: 'Card container'
+    };
+    return descriptions[type] || 'Component';
+};

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { DndContext } from '@dnd-kit/core';
+import { Box, Group, Button, Alert, Text, Modal, Stack } from '@mantine/core';
+import { Canvas } from './Canvas/Canvas';
+import { ComponentPalette } from './ComponentPalette/ComponentPalette';
+import { PropertyEditor } from './PropertyEditor/PropertyEditor';
+import { CodeExporter } from './CodeExporter/CodeExporter';
+import { useDragAndDrop } from '../hooks/useDragAndDrop';
+import { useVisualBuilderStore } from '../store/visualBuilderStore';
+import { parseAIGeneratedCode } from '../utils/aiParser';
+export const EmbeddedVisualBuilder = ({ initialCode, height = '600px', showPalette = true, showProperties = true, onCodeExport, compact = false, storyMetadata }) => {
+    const { sensors, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel } = useDragAndDrop();
+    const { components, clearCanvas, openCodeModal, loadFromCode, loadFromAI, importFromStoryUI, setCurrentStoryName } = useVisualBuilderStore();
+    const [loadError, setLoadError] = useState(null);
+    const [loadWarnings, setLoadWarnings] = useState([]);
+    const [showLoadDialog, setShowLoadDialog] = useState(false);
+    // Load initial code if provided
+    useEffect(() => {
+        if (initialCode) {
+            handleLoadCode(initialCode);
+        }
+    }, [initialCode]);
+    const handleLoadCode = async (code) => {
+        setLoadError(null);
+        setLoadWarnings([]);
+        try {
+            // First try to parse as Story UI content
+            if (code.includes('render:') || code.includes('.stories.')) {
+                const storyResult = await importFromStoryUI(code);
+                if (storyResult.success) {
+                    // Use story metadata if available and story name extraction failed
+                    if (storyMetadata?.title && storyMetadata.isExisting) {
+                        const { currentStoryName } = useVisualBuilderStore.getState();
+                        if (currentStoryName === 'Imported Story') {
+                            setCurrentStoryName(storyMetadata.title);
+                        }
+                    }
+                    if (storyResult.warnings.length > 0) {
+                        setLoadWarnings(storyResult.warnings);
+                        setShowLoadDialog(true);
+                    }
+                    return;
+                }
+                else {
+                    // If Story UI parsing fails, fall back to AI parser
+                    console.warn('Story UI parsing failed, falling back to AI parser:', storyResult.errors);
+                }
+            }
+            // Fall back to AI generated code parser
+            const result = parseAIGeneratedCode(code);
+            if (result.errors.length > 0) {
+                setLoadError(result.errors.join(', '));
+                return;
+            }
+            if (result.warnings.length > 0) {
+                setLoadWarnings(result.warnings);
+            }
+            loadFromAI(result.components);
+            if (result.warnings.length > 0) {
+                setShowLoadDialog(true);
+            }
+        }
+        catch (error) {
+            setLoadError(error instanceof Error ? error.message : 'Failed to parse code');
+        }
+    };
+    const handleExport = async () => {
+        if (onCodeExport && components.length > 0) {
+            try {
+                // Generate code and pass to callback
+                const { generateJSXCode } = await import('./CodeExporter/codeGenerator');
+                const code = generateJSXCode(components);
+                onCodeExport(code);
+            }
+            catch (error) {
+                console.error('Failed to generate code:', error);
+                openCodeModal();
+            }
+        }
+        else {
+            openCodeModal();
+        }
+    };
+    const paletteWidth = showPalette ? (compact ? 240 : 280) : 0;
+    const propertiesWidth = showProperties ? (compact ? 280 : 320) : 0;
+    return (_jsxs(_Fragment, { children: [_jsx(DndContext, { sensors: sensors, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: _jsxs(Box, { style: {
+                        display: 'flex',
+                        height,
+                        backgroundColor: '#f8f9fa',
+                        border: '1px solid #e9ecef',
+                        borderRadius: compact ? '8px' : '12px',
+                        overflow: 'hidden'
+                    }, children: [showPalette && (_jsxs(Box, { style: {
+                                width: paletteWidth,
+                                backgroundColor: 'white',
+                                borderRight: '1px solid #e9ecef',
+                                display: 'flex',
+                                flexDirection: 'column'
+                            }, children: [_jsxs(Box, { p: compact ? 'sm' : 'md', style: { borderBottom: '1px solid #e9ecef' }, children: [_jsx(Group, { justify: "space-between", mb: "xs", children: _jsx(Text, { size: compact ? 'sm' : 'md', fw: 600, children: "Components" }) }), _jsxs(Group, { gap: "xs", children: [_jsx(Button, { size: "xs", variant: "outline", onClick: clearCanvas, children: "Clear" }), _jsx(Button, { size: "xs", variant: "filled", onClick: handleExport, children: "Export" })] })] }), _jsx(Box, { style: { flex: 1, overflow: 'auto' }, children: _jsx(ComponentPalette, {}) })] })), _jsxs(Box, { style: { flex: 1, display: 'flex', flexDirection: 'column' }, children: [_jsx(Box, { p: compact ? 'sm' : 'md', style: { borderBottom: '1px solid #e9ecef', backgroundColor: 'white' }, children: _jsxs(Group, { justify: "space-between", children: [_jsx(Text, { size: compact ? 'sm' : 'md', fw: 600, children: "Canvas" }), !showPalette && (_jsxs(Group, { gap: "xs", children: [_jsx(Button, { size: "xs", variant: "outline", onClick: clearCanvas, children: "Clear" }), _jsx(Button, { size: "xs", variant: "filled", onClick: handleExport, children: "Export" })] }))] }) }), loadError && (_jsx(Box, { p: "sm", children: _jsx(Alert, { color: "red", title: "Parse Error", children: loadError }) })), _jsx(Box, { style: { flex: 1, overflow: 'auto' }, children: _jsx(Canvas, {}) })] }), showProperties && (_jsxs(Box, { style: {
+                                width: propertiesWidth,
+                                backgroundColor: 'white',
+                                borderLeft: '1px solid #e9ecef',
+                                display: 'flex',
+                                flexDirection: 'column'
+                            }, children: [_jsx(Box, { p: compact ? 'sm' : 'md', style: { borderBottom: '1px solid #e9ecef' }, children: _jsx(Text, { size: compact ? 'sm' : 'md', fw: 600, children: "Properties" }) }), _jsx(Box, { style: { flex: 1, overflow: 'auto' }, children: _jsx(PropertyEditor, {}) })] })), _jsx(CodeExporter, {})] }) }), _jsx(Modal, { opened: showLoadDialog, onClose: () => setShowLoadDialog(false), title: "Code Loaded with Warnings", size: "md", children: _jsxs(Stack, { gap: "md", children: [_jsx(Text, { children: "The code was successfully loaded into the Visual Builder, but there were some warnings:" }), _jsx(Box, { p: "md", style: { backgroundColor: '#fff3cd', borderRadius: '4px' }, children: loadWarnings.map((warning, index) => (_jsxs(Text, { size: "sm", c: "orange.8", children: ["\u2022 ", warning] }, index))) }), _jsx(Text, { size: "sm", c: "dimmed", children: "These warnings don't prevent you from editing the component, but you may want to review them." }), _jsx(Group, { justify: "flex-end", children: _jsx(Button, { onClick: () => setShowLoadDialog(false), children: "Continue Editing" }) })] }) })] }));
+};

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, Button, Group } from '@mantine/core';
+import { PropertyForm } from './PropertyForm';
+import { useVisualBuilderStore } from '../../store/visualBuilderStore';
+export const PropertyEditor = () => {
+    const { selectedComponent, removeComponent } = useVisualBuilderStore();
+    if (!selectedComponent) {
+        return (_jsx(Box, { p: "sm", children: _jsx(Text, { c: "dimmed", ta: "center", mt: "xl", children: "Select a component to edit its properties" }) }));
+    }
+    const handleDelete = () => {
+        if (selectedComponent) {
+            removeComponent(selectedComponent.id);
+        }
+    };
+    return (_jsxs(Box, { p: "sm", children: [_jsxs(Box, { mb: "lg", children: [_jsxs(Group, { justify: "space-between", align: "center", mb: "sm", children: [_jsx(Text, { fw: 600, size: "sm", children: selectedComponent.type }), _jsx(Button, { size: "xs", variant: "light", color: "red", onClick: handleDelete, children: "Delete" })] }), _jsxs(Text, { size: "xs", c: "dimmed", children: ["Component ID: ", selectedComponent.id] })] }), _jsx(PropertyForm, { componentId: selectedComponent.id, componentType: selectedComponent.type, currentProps: selectedComponent.props })] }));
+};

package/dist/visual-builder/components/PropertyEditor/PropertyForm.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, TextInput, Select, Switch, Text, Divider, Accordion, Group, Badge } from '@mantine/core';
+import { useVisualBuilderStore } from '../../store/visualBuilderStore';
+import { getComponentConfig } from '../../config/componentRegistry';
+import { useDebouncedCallback } from '@mantine/hooks';
+import { SpacingControl } from './SpacingControl';
+export const PropertyForm = ({ componentId, componentType, currentProps }) => {
+    const { updateComponent } = useVisualBuilderStore();
+    const config = getComponentConfig(componentType);
+    // Local state for inputs to prevent focus loss
+    const [localValues, setLocalValues] = useState({});
+    // Sync local values when currentProps changes
+    useEffect(() => {
+        setLocalValues(currentProps);
+    }, [currentProps]);
+    if (!config) {
+        return (_jsx(Text, { c: "dimmed", ta: "center", children: "No properties available for this component" }));
+    }
+    // Debounced update to store for text inputs
+    const debouncedUpdate = useDebouncedCallback((propertyName, value) => {
+        updateComponent(componentId, {
+            props: {
+                ...currentProps,
+                [propertyName]: value
+            }
+        });
+    }, 300);
+    // Immediate update for non-text inputs
+    const handleImmediatePropertyChange = (propertyName, value) => {
+        const newProps = { ...currentProps, [propertyName]: value };
+        setLocalValues(newProps);
+        updateComponent(componentId, {
+            props: newProps
+        });
+    };
+    // Handle text input changes with debouncing
+    const handleTextPropertyChange = (propertyName, value) => {
+        const newProps = { ...currentProps, [propertyName]: value };
+        setLocalValues(newProps);
+        debouncedUpdate(propertyName, value);
+    };
+    // Handle blur events to ensure immediate update
+    const handleTextBlur = (propertyName, value) => {
+        updateComponent(componentId, {
+            props: {
+                ...currentProps,
+                [propertyName]: value
+            }
+        });
+    };
+    // Group properties by category
+    const groupedProperties = config.properties.reduce((acc, property) => {
+        const category = property.category || 'general';
+        if (!acc[category]) {
+            acc[category] = [];
+        }
+        acc[category].push(property);
+        return acc;
+    }, {});
+    const renderPropertyInput = (property) => {
+        // Skip individual spacing properties as they'll be handled by SpacingControl
+        const spacingProps = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'];
+        if (spacingProps.includes(property.name)) {
+            return null;
+        }
+        return (_jsxs(Box, { mb: "xs", children: [_jsxs(Group, { justify: "space-between", mb: "xs", children: [_jsx(Text, { size: "sm", fw: 500, children: property.name.charAt(0).toUpperCase() + property.name.slice(1) }), property.category && (_jsx(Badge, { size: "xs", variant: "light", color: "gray", children: property.category }))] }), property.description && (_jsx(Text, { size: "xs", c: "dimmed", mb: "xs", children: property.description })), property.type === 'string' && (_jsx(TextInput, { value: localValues[property.name] || '', onChange: (e) => handleTextPropertyChange(property.name, e.target.value), onBlur: (e) => handleTextBlur(property.name, e.target.value), placeholder: `Enter ${property.name}...`, size: "sm" })), property.type === 'number' && (_jsx(TextInput, { type: "number", value: localValues[property.name] || 0, onChange: (e) => handleTextPropertyChange(property.name, Number(e.target.value)), onBlur: (e) => handleTextBlur(property.name, Number(e.target.value)), placeholder: `Enter ${property.name}...`, size: "sm" })), property.type === 'boolean' && (_jsx(Switch, { checked: Boolean(localValues[property.name]), onChange: (e) => handleImmediatePropertyChange(property.name, e.target.checked), label: property.description || `Enable ${property.name}`, size: "sm" })), property.type === 'select' && property.options && (_jsx(Select, { value: String(localValues[property.name] !== undefined ? localValues[property.name] : property.defaultValue), onChange: (value) => {
+                        // Convert back to number if needed
+                        const finalValue = property.name === 'order' && value ? Number(value) : value;
+                        handleImmediatePropertyChange(property.name, finalValue);
+                    }, data: property.options.map(option => ({
+                        value: String(option),
+                        label: String(option)
+                    })), placeholder: `Select ${property.name}...`, size: "sm", clearable: true, allowDeselect: true })), property.type === 'color' && (_jsx(TextInput, { value: localValues[property.name] || '', onChange: (e) => handleTextPropertyChange(property.name, e.target.value), onBlur: (e) => handleTextBlur(property.name, e.target.value), placeholder: "Enter color (hex, rgb, or name)...", size: "sm" }))] }, property.name));
+    };
+    const categoryOrder = ['content', 'appearance', 'spacing', 'behavior'];
+    const orderedCategories = categoryOrder.filter(cat => groupedProperties[cat]);
+    const remainingCategories = Object.keys(groupedProperties).filter(cat => !categoryOrder.includes(cat));
+    const allCategories = [...orderedCategories, ...remainingCategories];
+    return (_jsx(Box, { children: _jsx(Accordion, { multiple: true, defaultValue: ['content', 'appearance', 'spacing'], children: allCategories.map((category) => (_jsxs(Accordion.Item, { value: category, children: [_jsx(Accordion.Control, { children: _jsxs(Group, { justify: "space-between", children: [_jsx(Text, { fw: 600, tt: "capitalize", children: category }), _jsx(Badge, { size: "xs", variant: "light", children: groupedProperties[category].length })] }) }), _jsx(Accordion.Panel, { children: category === 'spacing' ? (_jsx(SpacingControl, { values: localValues, onChange: handleImmediatePropertyChange })) : (groupedProperties[category]
+                            .map((property, propertyIndex) => {
+                            const renderedInput = renderPropertyInput(property);
+                            if (!renderedInput)
+                                return null;
+                            return (_jsxs(Box, { children: [renderedInput, propertyIndex < groupedProperties[category].length - 1 && (_jsx(Divider, { mb: "xs" }))] }, property.name));
+                        })
+                            .filter(Boolean)) })] }, category))) }) }));
+};

package/dist/visual-builder/components/PropertyEditor/SpacingControl.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Group, Text, ActionIcon, NumberInput, Select, Stack, Paper, Tooltip, Switch } from '@mantine/core';
+const SPACING_OPTIONS = ['0', 'xs', 'sm', 'md', 'lg', 'xl', 'auto'];
+export const SpacingControl = ({ values, onChange }) => {
+    const [marginLocked, setMarginLocked] = useState(false);
+    const [paddingLocked, setPaddingLocked] = useState(false);
+    const [marginXLocked, setMarginXLocked] = useState(false);
+    const [marginYLocked, setMarginYLocked] = useState(false);
+    const [paddingXLocked, setPaddingXLocked] = useState(false);
+    const [paddingYLocked, setPaddingYLocked] = useState(false);
+    const [useNumbers, setUseNumbers] = useState(false);
+    const handleChange = (property, value) => {
+        const finalValue = value === null || value === '' ? undefined : value;
+        onChange(property, finalValue);
+        // Handle locked states
+        if (marginLocked && property.startsWith('m') && !property.includes('x') && !property.includes('y')) {
+            const props = ['mt', 'mr', 'mb', 'ml'];
+            props.forEach(prop => {
+                if (prop !== property)
+                    onChange(prop, finalValue);
+            });
+        }
+        if (paddingLocked && property.startsWith('p') && !property.includes('x') && !property.includes('y')) {
+            const props = ['pt', 'pr', 'pb', 'pl'];
+            props.forEach(prop => {
+                if (prop !== property)
+                    onChange(prop, finalValue);
+            });
+        }
+        // Handle axis-specific locks
+        if (marginXLocked && (property === 'ml' || property === 'mr')) {
+            if (property === 'ml')
+                onChange('mr', finalValue);
+            if (property === 'mr')
+                onChange('ml', finalValue);
+        }
+        if (marginYLocked && (property === 'mt' || property === 'mb')) {
+            if (property === 'mt')
+                onChange('mb', finalValue);
+            if (property === 'mb')
+                onChange('mt', finalValue);
+        }
+        if (paddingXLocked && (property === 'pl' || property === 'pr')) {
+            if (property === 'pl')
+                onChange('pr', finalValue);
+            if (property === 'pr')
+                onChange('pl', finalValue);
+        }
+        if (paddingYLocked && (property === 'pt' || property === 'pb')) {
+            if (property === 'pt')
+                onChange('pb', finalValue);
+            if (property === 'pb')
+                onChange('pt', finalValue);
+        }
+    };
+    const renderSpacingInput = (property, placeholder) => {
+        const value = values[property];
+        if (useNumbers) {
+            return (_jsxs(Group, { gap: 2, children: [_jsx(NumberInput, { value: typeof value === 'number' ? value : undefined, onChange: (val) => handleChange(property, val), placeholder: placeholder, size: "xs", w: 50, min: 0, hideControls: true }), _jsx(ActionIcon, { size: "xs", variant: "light", onClick: () => {
+                            const currentVal = typeof value === 'number' ? value : 0;
+                            handleChange(property, currentVal + 4);
+                        }, children: "+" }), _jsx(ActionIcon, { size: "xs", variant: "light", onClick: () => {
+                            const currentVal = typeof value === 'number' ? value : 0;
+                            handleChange(property, Math.max(0, currentVal - 4));
+                        }, children: "-" })] }));
+        }
+        return (_jsx(Select, { value: value ? String(value) : null, onChange: (val) => handleChange(property, val), data: SPACING_OPTIONS, placeholder: placeholder, size: "xs", w: 75, clearable: true, allowDeselect: true, styles: {
+                dropdown: { zIndex: 1000 }
+            } }));
+    };
+    return (_jsxs(Stack, { gap: "xs", children: [_jsxs(Group, { justify: "space-between", gap: "xs", children: [_jsx(Text, { size: "xs", fw: 500, children: "Spacing" }), _jsx(Switch, { label: "Numbers", size: "xs", checked: useNumbers, onChange: (event) => setUseNumbers(event.currentTarget.checked) })] }), _jsxs(Paper, { p: 4, withBorder: true, children: [_jsxs(Group, { justify: "space-between", mb: 4, gap: "xs", children: [_jsx(Text, { size: "xs", fw: 500, c: "blue", children: "Margin" }), _jsxs(Group, { gap: 2, children: [_jsx(Tooltip, { label: "Lock X-axis (left & right)", children: _jsx(ActionIcon, { size: "xs", variant: marginXLocked ? "filled" : "light", color: "blue", onClick: () => setMarginXLocked(!marginXLocked), children: marginXLocked ? '🔒' : '🔓' }) }), _jsx(Tooltip, { label: "Lock Y-axis (top & bottom)", children: _jsx(ActionIcon, { size: "xs", variant: marginYLocked ? "filled" : "light", color: "blue", onClick: () => setMarginYLocked(!marginYLocked), children: marginYLocked ? '🔒' : '🔓' }) }), _jsx(Tooltip, { label: "Lock all sides", children: _jsx(ActionIcon, { size: "xs", variant: marginLocked ? "filled" : "light", color: "blue", onClick: () => setMarginLocked(!marginLocked), children: marginLocked ? '🔒' : '🔓' }) })] })] }), _jsxs(Box, { style: {
+                            position: 'relative',
+                            border: '1px dashed #228be6',
+                            borderRadius: '4px',
+                            padding: '25px',
+                            minHeight: '140px'
+                        }, children: [_jsx(Box, { style: {
+                                    position: 'absolute',
+                                    top: '-8px',
+                                    left: '50%',
+                                    transform: 'translateX(-50%)',
+                                    zIndex: 2
+                                }, children: renderSpacingInput('mt', 'top') }), _jsx(Box, { style: {
+                                    position: 'absolute',
+                                    right: '-20px',
+                                    top: '50%',
+                                    transform: 'translateY(-50%)',
+                                    zIndex: 2
+                                }, children: renderSpacingInput('mr', 'right') }), _jsx(Box, { style: {
+                                    position: 'absolute',
+                                    bottom: '-4px',
+                                    left: '50%',
+                                    transform: 'translateX(-50%)',
+                                    zIndex: 2
+                                }, children: renderSpacingInput('mb', 'bottom') }), _jsx(Box, { style: {
+                                    position: 'absolute',
+                                    left: '-20px',
+                                    top: '50%',
+                                    transform: 'translateY(-50%)',
+                                    zIndex: 2
+                                }, children: renderSpacingInput('ml', 'left') }), _jsxs(Box, { style: {
+                                    position: 'absolute',
+                                    top: '26%',
+                                    left: '50%',
+                                    transform: 'translateX(-50%)',
+                                    textAlign: 'center'
+                                }, children: [_jsx(Text, { size: "xs", c: "dimmed", mb: 2, children: "All" }), renderSpacingInput('m', 'all')] })] }), _jsxs(Group, { justify: "center", mt: 10, gap: "xs", children: [_jsxs(Box, { ta: "center", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "X" }), renderSpacingInput('mx', 'x')] }), _jsxs(Box, { ta: "center", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "Y" }), renderSpacingInput('my', 'y')] })] })] }), _jsxs(Paper, { p: 4, withBorder: true, children: [_jsxs(Group, { justify: "space-between", mb: 4, gap: "xs", children: [_jsx(Text, { size: "xs", fw: 500, c: "green", children: "Padding" }), _jsxs(Group, { gap: 2, children: [_jsx(Tooltip, { label: "Lock X-axis (left & right)", children: _jsx(ActionIcon, { size: "xs", variant: paddingXLocked ? "filled" : "light", color: "green", onClick: () => setPaddingXLocked(!paddingXLocked), children: paddingXLocked ? '🔒' : '🔓' }) }), _jsx(Tooltip, { label: "Lock Y-axis (top & bottom)", children: _jsx(ActionIcon, { size: "xs", variant: paddingYLocked ? "filled" : "light", color: "green", onClick: () => setPaddingYLocked(!paddingYLocked), children: paddingYLocked ? '🔒' : '🔓' }) }), _jsx(Tooltip, { label: "Lock all sides", children: _jsx(ActionIcon, { size: "xs", variant: paddingLocked ? "filled" : "light", color: "green", onClick: () => setPaddingLocked(!paddingLocked), children: paddingLocked ? '🔒' : '🔓' }) })] })] }), _jsxs(Box, { style: {
+                            position: 'relative',
+                            border: '1px dashed #40c057',
+                            borderRadius: '4px',
+                            padding: '25px',
+                            minHeight: '140px'
+                        }, children: [_jsx(Box, { style: {
+                                    position: 'absolute',
+                                    top: '-8px',
+                                    left: '50%',
+                                    transform: 'translateX(-50%)',
+                                    zIndex: 2
+                                }, children: renderSpacingInput('pt', 'top') }), _jsx(Box, { style: {
+                                    position: 'absolute',
+                                    right: '-20px',
+                                    top: '50%',
+                                    transform: 'translateY(-50%)',
+                                    zIndex: 2
+                                }, children: renderSpacingInput('pr', 'right') }), _jsx(Box, { style: {
+                                    position: 'absolute',
+                                    bottom: '-4px',
+                                    left: '50%',
+                                    transform: 'translateX(-50%)',
+                                    zIndex: 2
+                                }, children: renderSpacingInput('pb', 'bottom') }), _jsx(Box, { style: {
+                                    position: 'absolute',
+                                    left: '-20px',
+                                    top: '50%',
+                                    transform: 'translateY(-50%)',
+                                    zIndex: 2
+                                }, children: renderSpacingInput('pl', 'left') }), _jsxs(Box, { style: {
+                                    position: 'absolute',
+                                    top: '26%',
+                                    left: '50%',
+                                    transform: 'translateX(-50%)',
+                                    textAlign: 'center'
+                                }, children: [_jsx(Text, { size: "xs", c: "dimmed", mb: 2, children: "All" }), renderSpacingInput('p', 'all')] })] }), _jsxs(Group, { justify: "center", mt: 10, gap: "xs", children: [_jsxs(Box, { ta: "center", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "X" }), renderSpacingInput('px', 'x')] }), _jsxs(Box, { ta: "center", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "Y" }), renderSpacingInput('py', 'y')] })] })] })] }));
+};

package/dist/visual-builder/components/PropertyEditor/SpacingEditor.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, NumberInput, SegmentedControl, Switch, Group, Stack, Paper } from '@mantine/core';
+export const SpacingEditor = ({ type, values = {}, onChange }) => {
+    const [unit, setUnit] = useState('px');
+    const [useUniform, setUseUniform] = useState(true);
+    const handleValueChange = (side, value) => {
+        if (useUniform && side === 'all') {
+            onChange({
+                top: value,
+                right: value,
+                bottom: value,
+                left: value,
+                all: value
+            });
+        }
+        else {
+            onChange({
+                ...values,
+                [side]: value
+            });
+        }
+    };
+    const currentValue = useUniform
+        ? values.all || values.top || 0
+        : null;
+    return (_jsx(Paper, { p: "xs", withBorder: true, children: _jsxs(Stack, { gap: "xs", children: [_jsxs(Group, { justify: "space-between", children: [_jsx(Text, { size: "sm", fw: 500, c: type === 'margin' ? 'blue.6' : 'green.6', children: type.charAt(0).toUpperCase() + type.slice(1) }), _jsx(SegmentedControl, { size: "xs", value: unit, onChange: (value) => setUnit(value), data: [
+                                { label: 'px', value: 'px' },
+                                { label: 'rem', value: 'rem' },
+                                { label: '%', value: '%' }
+                            ] })] }), _jsx(Switch, { size: "xs", label: "Uniform spacing", checked: useUniform, onChange: (e) => setUseUniform(e.currentTarget.checked) }), useUniform ? (_jsx(NumberInput, { size: "xs", label: "All sides", value: currentValue, onChange: (value) => handleValueChange('all', value), suffix: unit, min: 0 })) : (_jsxs(Box, { children: [_jsxs(Group, { gap: "xs", mb: "xs", children: [_jsx(NumberInput, { size: "xs", label: "Top", value: values.top || 0, onChange: (value) => handleValueChange('top', value), suffix: unit, min: 0, style: { flex: 1 } }), _jsx(NumberInput, { size: "xs", label: "Right", value: values.right || 0, onChange: (value) => handleValueChange('right', value), suffix: unit, min: 0, style: { flex: 1 } })] }), _jsxs(Group, { gap: "xs", children: [_jsx(NumberInput, { size: "xs", label: "Bottom", value: values.bottom || 0, onChange: (value) => handleValueChange('bottom', value), suffix: unit, min: 0, style: { flex: 1 } }), _jsx(NumberInput, { size: "xs", label: "Left", value: values.left || 0, onChange: (value) => handleValueChange('left', value), suffix: unit, min: 0, style: { flex: 1 } })] })] }))] }) }));
+};