@tpitre/story-ui 3.4.0 → 3.4.1

package/dist/playground/components/Canvas/Canvas.module.css

@@ -1,189 +0,0 @@
-/* Canvas styles */
-
-.canvas {
-  flex: 1;
-  position: relative;
-  background: #fafafa;
-  overflow: hidden;
-  height: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-}
-
-.viewport {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  transition: transform 0.2s ease-out;
-}
-
-.grid {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: 
-    linear-gradient(0deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
-  background-size: 8px 8px;
-  pointer-events: none;
-}
-
-.componentContainer {
-  position: relative;
-  width: 100%;
-  min-height: 100vh;
-}
-
-.component {
-  position: relative;
-  cursor: pointer;
-  transition: outline 0.2s ease;
-  font-family: inherit;
-}
-
-.component:hover {
-  outline: 1px solid #93c5fd;
-  outline-offset: 2px;
-}
-
-.component.selected {
-  outline: 2px solid #3b82f6;
-  outline-offset: 2px;
-}
-
-.component.hovered {
-  outline: 1px dashed #60a5fa;
-  outline-offset: 2px;
-}
-
-.component.root {
-  cursor: default;
-}
-
-.emptyState {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #6b7280;
-  text-align: center;
-  padding: 32px;
-}
-
-.emptyState p {
-  margin: 8px 0;
-  font-size: 16px;
-}
-
-.emptyState .hint {
-  font-size: 14px;
-  color: #9ca3af;
-}
-
-.selectionOverlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-}
-
-/* Mode-specific styles */
-.canvas[data-mode="view"] .component {
-  cursor: default;
-}
-
-.canvas[data-mode="view"] .component:hover {
-  outline: none;
-}
-
-/* Helper component indicators */
-[data-helper] {
-  position: relative;
-}
-
-[data-helper]::before {
-  content: attr(data-helper);
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  font-size: 10px;
-  color: #9ca3af;
-  background: rgba(255, 255, 255, 0.9);
-  padding: 2px 4px;
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 1;
-}
-
-/* Draggable Component */
-.draggableComponent {
-  position: relative;
-  cursor: move;
-  transition: opacity 0.2s;
-  font-family: inherit;
-}
-
-.draggableComponent.root {
-  cursor: default;
-}
-
-.draggableComponent.dragging {
-  opacity: 0.5;
-  cursor: grabbing;
-}
-
-.draggableComponent.selected {
-  outline: 2px solid #3b82f6;
-  outline-offset: 2px;
-  position: relative;
-  z-index: 10;
-}
-
-.draggableComponent.hovered {
-  outline: 1px dashed #93c5fd;
-  outline-offset: 2px;
-}
-
-.componentChildren {
-  position: relative;
-}
-
-.childWrapper {
-  position: relative;
-}
-
-/* Insertion zones for drag and drop */
-.insertionZone {
-  min-height: 4px;
-  transition: all 0.2s;
-  position: relative;
-}
-
-.insertionZone.active {
-  min-height: 24px;
-  background: rgba(59, 130, 246, 0.1);
-  border: 2px dashed #3b82f6;
-  border-radius: 4px;
-}
-
-/* Drag ghost */
-.dragGhost {
-  pointer-events: none;
-  opacity: 0.8;
-  transform: scale(1.05);
-  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
-}
-
-.newComponentGhost {
-  padding: 12px 24px;
-  background: white;
-  border: 2px solid #3b82f6;
-  border-radius: 8px;
-  font-weight: 500;
-  color: #3b82f6;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
-}

package/dist/playground/components/Canvas/CanvasWithDnd.d.ts

@@ -1,9 +0,0 @@
-/**
- * CanvasWithDnd - Canvas with drag and drop support
- */
-import React from 'react';
-export interface CanvasWithDndProps {
-    onReady?: () => void;
-}
-export declare const CanvasWithDnd: React.FC<CanvasWithDndProps>;
-//# sourceMappingURL=CanvasWithDnd.d.ts.map

package/dist/playground/components/Canvas/CanvasWithDnd.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CanvasWithDnd.d.ts","sourceRoot":"","sources":["../../../../playground/components/Canvas/CanvasWithDnd.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAkD,MAAM,OAAO,CAAC;AAyBvE,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsQtD,CAAC"}

package/dist/playground/components/Canvas/CanvasWithDnd.js

@@ -1,158 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * CanvasWithDnd - Canvas with drag and drop support
- */
-import { useEffect, useRef, useCallback } from 'react';
-import { DndContext, DragOverlay, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
-import { sortableKeyboardCoordinates, } from '@dnd-kit/sortable';
-import { usePlaygroundStore } from '../../store/playgroundStore';
-import { DragDropManager } from '../../services/DragDropManager';
-import { ComponentRenderer } from './ComponentRenderer';
-import { DropZone } from '../DropZone/DropZone';
-import { DraggableComponent } from './DraggableComponent';
-import styles from './Canvas.module.css';
-export const CanvasWithDnd = ({ onReady }) => {
-    const canvasRef = useRef(null);
-    const dragDropManagerRef = useRef(null);
-    const store = usePlaygroundStore();
-    const { components, rootId, selectedIds, hoveredId, canvasZoom, canvasOffset, showGrid, gridSize, mode, draggedItem, selectComponent, deselectAll, setHoveredComponent } = store;
-    // Initialize DragDropManager
-    useEffect(() => {
-        if (!dragDropManagerRef.current) {
-            dragDropManagerRef.current = new DragDropManager(store);
-        }
-    }, [store]);
-    // Configure drag sensors
-    const sensors = useSensors(useSensor(PointerSensor, {
-        activationConstraint: {
-            distance: 8,
-        },
-    }), useSensor(KeyboardSensor, {
-        coordinateGetter: sortableKeyboardCoordinates,
-    }));
-    // Handle drag start
-    const handleDragStart = useCallback((event) => {
-        const { active } = event;
-        // Create dragged item based on what's being dragged
-        let draggedItem;
-        if (active.data.current?.type === 'component') {
-            // Dragging from palette
-            draggedItem = {
-                type: 'new-component',
-                componentType: active.data.current.componentType,
-                source: 'palette'
-            };
-        }
-        else if (active.data.current?.type === 'canvas-component') {
-            // Dragging existing component
-            const component = components.get(active.id);
-            if (component) {
-                draggedItem = {
-                    id: component.id,
-                    type: 'move-component',
-                    component,
-                    source: 'canvas'
-                };
-            }
-            else {
-                return;
-            }
-        }
-        else {
-            return;
-        }
-        dragDropManagerRef.current?.startDrag(draggedItem);
-    }, [components]);
-    // Handle drag move
-    const handleDragMove = useCallback((event) => {
-        // Update drag position for drop zone detection
-        // This would be enhanced with actual mouse position tracking
-    }, []);
-    // Handle drag end
-    const handleDragEnd = useCallback((event) => {
-        const { active, over } = event;
-        if (over && dragDropManagerRef.current) {
-            // Perform the drop
-            const result = dragDropManagerRef.current.endDrag();
-            if (result?.success) {
-                // Select the dropped component
-                if (active.data.current?.type === 'component') {
-                    // New component was created, select it
-                    // We'd need to track the created component ID
-                }
-                else if (active.data.current?.type === 'canvas-component') {
-                    // Existing component was moved, keep it selected
-                    selectComponent(active.id);
-                }
-            }
-        }
-        else {
-            // Cancelled drop
-            dragDropManagerRef.current?.cancelDrag();
-        }
-    }, [selectComponent]);
-    // Handle drag cancel
-    const handleDragCancel = useCallback((event) => {
-        dragDropManagerRef.current?.cancelDrag();
-    }, []);
-    // Handle canvas click for deselection
-    const handleCanvasClick = useCallback((e) => {
-        if (e.target === e.currentTarget) {
-            deselectAll();
-        }
-    }, [deselectAll]);
-    // Handle keyboard shortcuts
-    useEffect(() => {
-        const handleKeyDown = (e) => {
-            // Delete selected components
-            if ((e.key === 'Delete' || e.key === 'Backspace') && selectedIds.size > 0) {
-                e.preventDefault();
-                selectedIds.forEach(id => {
-                    if (id !== rootId) {
-                        store.deleteComponent(id);
-                    }
-                });
-            }
-            // Select all
-            if (e.metaKey && e.key === 'a') {
-                e.preventDefault();
-                store.selectAll();
-            }
-            // Deselect all
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                deselectAll();
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [selectedIds, rootId, deselectAll, store]);
-    // Notify when ready
-    useEffect(() => {
-        onReady?.();
-    }, [onReady]);
-    // Get root component
-    const rootComponent = components.get(rootId);
-    if (!rootComponent) {
-        return (_jsx("div", { className: styles.canvas, children: _jsxs("div", { className: styles.emptyState, children: [_jsx("p", { children: "No components to display" }), _jsx("p", { className: styles.hint, children: "Use the AI Assistant to generate a layout or drag components from the palette" })] }) }));
-    }
-    // Render dragged component overlay
-    const renderDragOverlay = () => {
-        if (!draggedItem)
-            return null;
-        if (draggedItem.type === 'move-component' && draggedItem.component) {
-            return (_jsx("div", { className: styles.dragGhost, children: _jsx(ComponentRenderer, { component: draggedItem.component, isSelected: false, isHovered: false }) }));
-        }
-        if (draggedItem.type === 'new-component') {
-            return (_jsx("div", { className: styles.dragGhost, children: _jsx("div", { className: styles.newComponentGhost, children: draggedItem.componentType }) }));
-        }
-        return null;
-    };
-    return (_jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragMove: handleDragMove, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsx("div", { ref: canvasRef, className: styles.canvas, onClick: handleCanvasClick, "data-mode": mode, children: _jsxs("div", { className: styles.viewport, style: {
-                        transform: `scale(${canvasZoom}) translate(${canvasOffset.x}px, ${canvasOffset.y}px)`,
-                        transformOrigin: 'center center'
-                    }, children: [showGrid && (_jsx("div", { className: styles.grid, style: {
-                                backgroundSize: `${gridSize}px ${gridSize}px`
-                            } })), _jsx("div", { className: styles.componentContainer, children: _jsx(DropZone, { id: "root-drop-zone", componentId: rootId, accepts: ['all'], showIndicator: mode === 'edit', children: _jsx(DraggableComponent, { component: rootComponent, isRoot: true, isSelected: selectedIds.has(rootId), isHovered: hoveredId === rootId, onSelect: (id) => selectComponent(id), onHover: (id) => setHoveredComponent(id) }) }) }), selectedIds.size > 0 && (_jsx("div", { className: styles.selectionOverlay }))] }) }), _jsx(DragOverlay, { children: renderDragOverlay() })] }));
-};
-//# sourceMappingURL=CanvasWithDnd.js.map

package/dist/playground/components/Canvas/CanvasWithDnd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CanvasWithDnd.js","sourceRoot":"","sources":["../../../../playground/components/Canvas/CanvasWithDnd.tsx"],"names":[],"mappings":"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"}

package/dist/playground/components/Canvas/ComponentRenderer.d.ts

@@ -1,15 +0,0 @@
-/**
- * ComponentRenderer - Renders playground components recursively
- */
-import React from 'react';
-import type { PlaygroundComponent } from '../../types';
-export interface ComponentRendererProps {
-    component: PlaygroundComponent;
-    isRoot?: boolean;
-    isSelected?: boolean;
-    isHovered?: boolean;
-    onSelect?: (id: string) => void;
-    onHover?: (id: string | null) => void;
-}
-export declare const ComponentRenderer: React.FC<ComponentRendererProps>;
-//# sourceMappingURL=ComponentRenderer.d.ts.map

package/dist/playground/components/Canvas/ComponentRenderer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComponentRenderer.d.ts","sourceRoot":"","sources":["../../../../playground/components/Canvas/ComponentRenderer.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGvD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,mBAAmB,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmS9D,CAAC"}

package/dist/playground/components/Canvas/ComponentRenderer.js

@@ -1,177 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * ComponentRenderer - Renders playground components recursively
- */
-import { useMemo, useCallback } from 'react';
-import { usePlaygroundStore } from '../../store/playgroundStore';
-import styles from './Canvas.module.css';
-export const ComponentRenderer = ({ component, isRoot = false, isSelected = false, isHovered = false, onSelect, onHover }) => {
-    const { components } = usePlaygroundStore();
-    // Handle component click
-    const handleClick = useCallback((e) => {
-        e.stopPropagation();
-        onSelect?.(component.id);
-    }, [component.id, onSelect]);
-    // Handle hover
-    const handleMouseEnter = useCallback(() => {
-        onHover?.(component.id);
-    }, [component.id, onHover]);
-    const handleMouseLeave = useCallback(() => {
-        onHover?.(null);
-    }, [onHover]);
-    // Combine styles with font inheritance
-    const combinedStyles = useMemo(() => ({
-        fontFamily: 'inherit',
-        ...component.style,
-        ...(isRoot ? { minHeight: '100vh', width: '100%' } : {})
-    }), [component.style, isRoot]);
-    // Render based on component type
-    const renderComponent = () => {
-        // Handle text nodes
-        if (component.type === 'Text') {
-            return _jsx("span", { children: component.textContent });
-        }
-        // Handle layout helper components
-        if (component.isHelper) {
-            return renderHelperComponent();
-        }
-        // For now, render as a div with placeholder
-        // In production, this would dynamically load the actual component
-        return renderPlaceholderComponent();
-    };
-    // Render helper components (FlexContainer, GridContainer, etc.)
-    const renderHelperComponent = () => {
-        const { type, props, children } = component;
-        switch (type) {
-            case 'FlexContainer':
-                return (_jsx("div", { style: {
-                        display: 'flex',
-                        flexDirection: props.direction || 'row',
-                        justifyContent: props.justify || 'flex-start',
-                        alignItems: props.align || 'stretch',
-                        gap: props.gap ? `${props.gap}px` : undefined,
-                        flexWrap: props.wrap || 'nowrap',
-                        ...combinedStyles
-                    }, "data-helper": "flex", children: renderChildren() }));
-            case 'GridContainer':
-                return (_jsx("div", { style: {
-                        display: 'grid',
-                        gridTemplateColumns: props.columns || 'auto',
-                        gridTemplateRows: props.rows || 'auto',
-                        gap: props.gap ? `${props.gap}px` : undefined,
-                        ...combinedStyles
-                    }, "data-helper": "grid", children: renderChildren() }));
-            case 'Spacer':
-                return (_jsx("div", { style: {
-                        width: props.width || 'auto',
-                        height: props.height || '16px',
-                        ...combinedStyles
-                    }, "data-helper": "spacer" }));
-            default:
-                return renderPlaceholderComponent();
-        }
-    };
-    // Render placeholder for actual components
-    const renderPlaceholderComponent = () => {
-        const { type, props, children } = component;
-        // Common component rendering
-        switch (type) {
-            case 'Container':
-            case 'Box':
-            case 'div':
-                return (_jsx("div", { style: combinedStyles, ...props, children: renderChildren() }));
-            case 'Button':
-                return (_jsx("button", { style: {
-                        fontFamily: 'inherit',
-                        border: '1px solid #d1d5db',
-                        borderRadius: '6px',
-                        padding: '8px 16px',
-                        backgroundColor: '#3b82f6',
-                        color: 'white',
-                        cursor: 'pointer',
-                        ...combinedStyles
-                    }, ...props, disabled: props.disabled || false, children: props.children || props.text || 'Button' }));
-            case 'Card':
-                return (_jsxs("div", { style: {
-                        padding: '16px',
-                        borderRadius: '8px',
-                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-                        backgroundColor: 'white',
-                        ...combinedStyles
-                    }, ...props, children: [props.title && _jsx("h3", { children: props.title }), props.children || renderChildren()] }));
-            case 'Input':
-                return (_jsx("input", { type: props.type || 'text', placeholder: props.placeholder, value: props.value || '', style: {
-                        fontFamily: 'inherit',
-                        border: '1px solid #d1d5db',
-                        borderRadius: '4px',
-                        padding: '8px 12px',
-                        fontSize: '14px',
-                        ...combinedStyles
-                    }, ...props, readOnly: true }));
-            case 'Text':
-            case 'Typography':
-            case 'p':
-                return (_jsx("p", { style: {
-                        fontFamily: 'inherit',
-                        margin: '0',
-                        ...combinedStyles
-                    }, ...props, children: props.children || component.textContent }));
-            case 'Heading':
-            case 'h1':
-                return (_jsx("h1", { style: {
-                        fontFamily: 'inherit',
-                        margin: '0 0 16px 0',
-                        fontSize: '2rem',
-                        fontWeight: 'bold',
-                        ...combinedStyles
-                    }, ...props, children: props.children || component.textContent }));
-            case 'h2':
-                return (_jsx("h2", { style: {
-                        fontFamily: 'inherit',
-                        margin: '0 0 14px 0',
-                        fontSize: '1.5rem',
-                        fontWeight: 'bold',
-                        ...combinedStyles
-                    }, ...props, children: props.children || component.textContent }));
-            case 'h3':
-                return (_jsx("h3", { style: {
-                        fontFamily: 'inherit',
-                        margin: '0 0 12px 0',
-                        fontSize: '1.25rem',
-                        fontWeight: 'bold',
-                        ...combinedStyles
-                    }, ...props, children: props.children || component.textContent }));
-            default:
-                // Generic component placeholder
-                return (_jsxs("div", { style: {
-                        fontFamily: 'inherit',
-                        padding: '8px',
-                        border: '1px dashed #ccc',
-                        borderRadius: '4px',
-                        backgroundColor: '#f9f9f9',
-                        minHeight: '40px',
-                        ...combinedStyles
-                    }, ...props, children: [_jsx("span", { style: { fontSize: '12px', color: '#666', fontFamily: 'inherit' }, children: type }), renderChildren()] }));
-        }
-    };
-    // Render children recursively
-    const renderChildren = () => {
-        if (!component.children || component.children.length === 0) {
-            return null;
-        }
-        return component.children.map((childId) => {
-            const child = components.get(childId);
-            if (!child)
-                return null;
-            return (_jsx(ComponentRenderer, { component: child, isSelected: isSelected, isHovered: isHovered, onSelect: onSelect, onHover: onHover }, child.id));
-        });
-    };
-    // Main render
-    return (_jsx("div", { className: `
-        ${styles.component}
-        ${isSelected ? styles.selected : ''}
-        ${isHovered ? styles.hovered : ''}
-        ${isRoot ? styles.root : ''}
-      `, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "data-component-id": component.id, "data-component-type": component.type, children: renderComponent() }));
-};
-//# sourceMappingURL=ComponentRenderer.js.map

package/dist/playground/components/Canvas/ComponentRenderer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComponentRenderer.js","sourceRoot":"","sources":["../../../../playground/components/Canvas/ComponentRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/playground/components/Canvas/DraggableComponent.d.ts

@@ -1,15 +0,0 @@
-/**
- * DraggableComponent - Wrapper for draggable components in the canvas
- */
-import React from 'react';
-import type { PlaygroundComponent } from '../../types';
-export interface DraggableComponentProps {
-    component: PlaygroundComponent;
-    isRoot?: boolean;
-    isSelected?: boolean;
-    isHovered?: boolean;
-    onSelect?: (id: string) => void;
-    onHover?: (id: string | null) => void;
-}
-export declare const DraggableComponent: React.FC<DraggableComponentProps>;
-//# sourceMappingURL=DraggableComponent.d.ts.map

package/dist/playground/components/Canvas/DraggableComponent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DraggableComponent.d.ts","sourceRoot":"","sources":["../../../../playground/components/Canvas/DraggableComponent.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAsB,MAAM,OAAO,CAAC;AAK3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGvD,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,mBAAmB,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA0GhE,CAAC"}

package/dist/playground/components/Canvas/DraggableComponent.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * DraggableComponent - Wrapper for draggable components in the canvas
- */
-import { useCallback } from 'react';
-import { useDraggable } from '@dnd-kit/core';
-import { ComponentRenderer } from './ComponentRenderer';
-import { DropZone } from '../DropZone/DropZone';
-import { usePlaygroundStore } from '../../store/playgroundStore';
-import styles from './Canvas.module.css';
-export const DraggableComponent = ({ component, isRoot = false, isSelected = false, isHovered = false, onSelect, onHover }) => {
-    const { components, canvasZoom, canvasOffset } = usePlaygroundStore();
-    const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
-        id: component.id,
-        disabled: isRoot, // Root component should not be draggable
-        data: {
-            type: 'canvas-component',
-            component
-        }
-    });
-    const handleClick = useCallback((e) => {
-        e.stopPropagation();
-        onSelect?.(component.id);
-    }, [component.id, onSelect]);
-    const handleMouseEnter = useCallback(() => {
-        onHover?.(component.id);
-    }, [component.id, onHover]);
-    const handleMouseLeave = useCallback(() => {
-        onHover?.(null);
-    }, [onHover]);
-    const style = transform ? {
-        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-        opacity: isDragging ? 0.5 : undefined,
-        zIndex: isDragging ? 1000 : undefined
-    } : undefined;
-    return (_jsxs("div", { ref: setNodeRef, style: style, className: `
-        ${styles.draggableComponent}
-        ${isSelected ? styles.selected : ''}
-        ${isHovered ? styles.hovered : ''}
-        ${isDragging ? styles.dragging : ''}
-        ${isRoot ? styles.root : ''}
-      `, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "data-component-id": component.id, ...(!isRoot ? listeners : {}), ...(!isRoot ? attributes : {}), children: [_jsx(ComponentRenderer, { component: component, isSelected: isSelected, isHovered: isHovered }), component.children && component.children.length > 0 && (_jsx("div", { className: styles.componentChildren, children: component.children.map((childId, index) => {
-                    const child = components.get(childId);
-                    if (!child)
-                        return null;
-                    return (_jsxs("div", { className: styles.childWrapper, children: [_jsx(DropZone, { id: `${component.id}-before-${index}`, componentId: component.id, insertIndex: index, accepts: ['all'], showIndicator: false, className: styles.insertionZone }), _jsx(DraggableComponent, { component: child, isSelected: false, isHovered: false, onSelect: onSelect, onHover: onHover }), index === component.children.length - 1 && (_jsx(DropZone, { id: `${component.id}-after-${index}`, componentId: component.id, insertIndex: index + 1, accepts: ['all'], showIndicator: false, className: styles.insertionZone }))] }, child.id));
-                }) }))] }));
-};
-//# sourceMappingURL=DraggableComponent.js.map

package/dist/playground/components/Canvas/DraggableComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DraggableComponent.js","sourceRoot":"","sources":["../../../../playground/components/Canvas/DraggableComponent.tsx"],"names":[],"mappings":"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"}