@tpitre/story-ui 3.3.0 → 3.4.0

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

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

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

@@ -0,0 +1,15 @@
+/**
+ * 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

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

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

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

@@ -0,0 +1,15 @@
+/**
+ * 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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableComponent.js","sourceRoot":"","sources":["../../../../playground/components/Canvas/DraggableComponent.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAWzC,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,SAAS,EACT,MAAM,GAAG,KAAK,EACd,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,OAAO,EACR,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,kBAAkB,EAAE,CAAC;IACtE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,YAAY,CAAC;QAChF,EAAE,EAAE,SAAS,CAAC,EAAE;QAChB,QAAQ,EAAE,MAAM,EAAE,yCAAyC;QAC3D,IAAI,EAAE;YACJ,IAAI,EAAE,kBAAkB;YACxB,SAAS;SACV;KACF,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAmB,EAAE,EAAE;QACtD,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,QAAQ,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,OAAO,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5B,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC;QACxB,SAAS,EAAE,eAAe,SAAS,CAAC,CAAC,OAAO,SAAS,CAAC,CAAC,QAAQ;QAC/D,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS;QACrC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;KACtC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,eACE,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE;UACP,MAAM,CAAC,kBAAkB;UACzB,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;UACjC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;UAC/B,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;UACjC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;OAC5B,EACD,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,uBACX,SAAS,CAAC,EAAE,KAC3B,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAC1B,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,aAE/B,KAAC,iBAAiB,IAChB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,GACpB,EAGD,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CACtD,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,YACrC,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;oBACzC,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;oBACtC,IAAI,CAAC,KAAK;wBAAE,OAAO,IAAI,CAAC;oBAExB,OAAO,CACL,eAAoB,SAAS,EAAE,MAAM,CAAC,YAAY,aAEhD,KAAC,QAAQ,IACP,EAAE,EAAE,GAAG,SAAS,CAAC,EAAE,WAAW,KAAK,EAAE,EACrC,WAAW,EAAE,SAAS,CAAC,EAAE,EACzB,WAAW,EAAE,KAAK,EAClB,OAAO,EAAE,CAAC,KAAK,CAAC,EAChB,aAAa,EAAE,KAAK,EACpB,SAAS,EAAE,MAAM,CAAC,aAAa,GAC/B,EAEF,KAAC,kBAAkB,IACjB,SAAS,EAAE,KAAK,EAChB,UAAU,EAAE,KAAK,EACjB,SAAS,EAAE,KAAK,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,GAChB,EAGD,KAAK,KAAK,SAAS,CAAC,QAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CAC3C,KAAC,QAAQ,IACP,EAAE,EAAE,GAAG,SAAS,CAAC,EAAE,UAAU,KAAK,EAAE,EACpC,WAAW,EAAE,SAAS,CAAC,EAAE,EACzB,WAAW,EAAE,KAAK,GAAG,CAAC,EACtB,OAAO,EAAE,CAAC,KAAK,CAAC,EAChB,aAAa,EAAE,KAAK,EACpB,SAAS,EAAE,MAAM,CAAC,aAAa,GAC/B,CACH,KA7BO,KAAK,CAAC,EAAE,CA8BZ,CACP,CAAC;gBACJ,CAAC,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,9 @@
+export { Canvas } from './Canvas';
+export { CanvasWithDnd } from './CanvasWithDnd';
+export { ComponentRenderer } from './ComponentRenderer';
+export { DraggableComponent } from './DraggableComponent';
+export type { CanvasProps } from './Canvas';
+export type { CanvasWithDndProps } from './CanvasWithDnd';
+export type { ComponentRendererProps } from './ComponentRenderer';
+export type { DraggableComponentProps } from './DraggableComponent';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../playground/components/Canvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC"}

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

@@ -0,0 +1,5 @@
+export { Canvas } from './Canvas';
+export { CanvasWithDnd } from './CanvasWithDnd';
+export { ComponentRenderer } from './ComponentRenderer';
+export { DraggableComponent } from './DraggableComponent';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../playground/components/Canvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/playground/components/CodeView/CodeView.d.ts

@@ -0,0 +1,12 @@
+/**
+ * CodeView - Displays generated story code with syntax highlighting
+ */
+import React from 'react';
+export interface CodeViewProps {
+    storyName?: string;
+    framework?: 'react' | 'vue' | 'angular';
+    includeImports?: boolean;
+    includeHelpers?: boolean;
+}
+export declare const CodeView: React.FC<CodeViewProps>;
+//# sourceMappingURL=CodeView.d.ts.map

package/dist/playground/components/CodeView/CodeView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeView.d.ts","sourceRoot":"","sources":["../../../../playground/components/CodeView/CodeView.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwJ5C,CAAC"}

package/dist/playground/components/CodeView/CodeView.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CodeView - Displays generated story code with syntax highlighting
+ */
+import { useMemo, useState, useCallback } from 'react';
+import { usePlaygroundStore } from '../../store/playgroundStore';
+import { CodeGenerator } from '../../services/CodeGenerator';
+import styles from './CodeView.module.css';
+export const CodeView = ({ storyName = 'MyStory', framework = 'react', includeImports = true, includeHelpers = true }) => {
+    const { components, rootId } = usePlaygroundStore();
+    const [copied, setCopied] = useState(false);
+    const [showLineNumbers, setShowLineNumbers] = useState(true);
+    // Generate code
+    const generatedCode = useMemo(() => {
+        try {
+            const generator = new CodeGenerator({
+                framework,
+                includeImports,
+                includeHelpers,
+                prettier: true,
+                indentSize: 2,
+                useTypeScript: true
+            });
+            return generator.generateStoryCode(components, rootId, storyName);
+        }
+        catch (error) {
+            console.error('Code generation error:', error);
+            return '// Error generating code\n// ' + error.message;
+        }
+    }, [components, rootId, storyName, framework, includeImports, includeHelpers]);
+    // Copy to clipboard
+    const handleCopy = useCallback(() => {
+        navigator.clipboard.writeText(generatedCode).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        });
+    }, [generatedCode]);
+    // Export as file
+    const handleExport = useCallback(() => {
+        const blob = new Blob([generatedCode], { type: 'text/javascript' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${storyName}.stories.${framework === 'react' ? 'tsx' : 'js'}`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }, [generatedCode, storyName, framework]);
+    // Add line numbers
+    const codeWithLineNumbers = useMemo(() => {
+        const lines = generatedCode.split('\n');
+        return lines.map((line, index) => {
+            const lineNum = (index + 1).toString().padStart(3, ' ');
+            return `${lineNum} │ ${line}`;
+        }).join('\n');
+    }, [generatedCode]);
+    // Syntax highlighting (basic)
+    const highlightedCode = useMemo(() => {
+        let code = showLineNumbers ? codeWithLineNumbers : generatedCode;
+        // Keywords
+        code = code.replace(/\b(import|export|from|const|let|var|function|return|if|else|for|while|default|interface|type)\b/g, '<span class="keyword">$1</span>');
+        // Strings
+        code = code.replace(/(["'`])(?:(?=(\\?))\2.)*?\1/g, '<span class="string">$&</span>');
+        // Comments
+        code = code.replace(/(\/\/.*$|\/\*[\s\S]*?\*\/)/gm, '<span class="comment">$1</span>');
+        // JSX tags
+        code = code.replace(/(<\/?[A-Z][a-zA-Z]*)(.*?)(\/?>)/g, '<span class="tag">$1</span>$2<span class="tag">$3</span>');
+        // Props
+        code = code.replace(/\b([a-zA-Z]+)=/g, '<span class="prop">$1</span>=');
+        // Numbers
+        code = code.replace(/\b(\d+)\b/g, '<span class="number">$1</span>');
+        return code;
+    }, [generatedCode, codeWithLineNumbers, showLineNumbers]);
+    return (_jsxs("div", { className: styles.codeView, children: [_jsxs("div", { className: styles.toolbar, children: [_jsx("div", { className: styles.title, children: "Generated Story Code" }), _jsxs("div", { className: styles.actions, children: [_jsx("button", { className: styles.actionButton, onClick: () => setShowLineNumbers(!showLineNumbers), title: showLineNumbers ? 'Hide line numbers' : 'Show line numbers', children: "#" }), _jsx("button", { className: `${styles.actionButton} ${copied ? styles.copied : ''}`, onClick: handleCopy, title: "Copy to clipboard", children: copied ? '✓' : '📋' }), _jsx("button", { className: styles.actionButton, onClick: handleExport, title: "Export as file", children: "\uD83D\uDCBE" })] })] }), _jsx("div", { className: styles.codeContainer, children: _jsx("pre", { className: styles.code, children: _jsx("code", { dangerouslySetInnerHTML: { __html: highlightedCode } }) }) }), _jsxs("div", { className: styles.footer, children: [_jsxs("span", { className: styles.info, children: [generatedCode.split('\n').length, " lines"] }), _jsxs("span", { className: styles.info, children: [generatedCode.length, " characters"] }), _jsx("span", { className: styles.info, children: framework === 'react' ? 'React/TSX' : framework })] })] }));
+};
+//# sourceMappingURL=CodeView.js.map

package/dist/playground/components/CodeView/CodeView.js.map

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