@tpitre/story-ui 3.0.0 → 3.2.0

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

@@ -1,166 +0,0 @@
-/* AI Assistant styles */
-
-.container {
-  padding: 16px;
-  height: 100%;
-  overflow-y: auto;
-}
-
-.section {
-  margin-bottom: 24px;
-}
-
-.label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: #374151;
-  margin-bottom: 8px;
-}
-
-.textarea {
-  width: 100%;
-  padding: 12px;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  font-size: 14px;
-  font-family: inherit;
-  resize: vertical;
-  transition: border-color 0.2s;
-  box-sizing: border-box;
-}
-
-.textarea:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.textarea:disabled {
-  background: #f3f4f6;
-  cursor: not-allowed;
-}
-
-.buttonGroup {
-  display: flex;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.button {
-  flex: 1;
-  padding: 10px 16px;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  border: none;
-}
-
-.button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.primaryButton {
-  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-  color: white;
-  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
-}
-
-.primaryButton:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
-}
-
-.secondaryButton {
-  background: white;
-  color: #3b82f6;
-  border: 1px solid #3b82f6;
-}
-
-.secondaryButton:hover:not(:disabled) {
-  background: #eff6ff;
-}
-
-.icon {
-  font-size: 16px;
-}
-
-.spinner {
-  width: 14px;
-  height: 14px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-top-color: white;
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.error {
-  margin-top: 12px;
-  padding: 12px;
-  background: #fee2e2;
-  border: 1px solid #fecaca;
-  border-radius: 8px;
-  color: #dc2626;
-  font-size: 14px;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.errorIcon {
-  flex-shrink: 0;
-}
-
-.sectionTitle {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1f2937;
-  margin: 0 0 12px 0;
-}
-
-.suggestions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.suggestion {
-  padding: 6px 12px;
-  background: #f3f4f6;
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  font-size: 13px;
-  color: #4b5563;
-  cursor: pointer;
-  transition: all 0.2s;
-  font-family: inherit;
-}
-
-.suggestion:hover {
-  background: #e5e7eb;
-  color: #1f2937;
-}
-
-.tips {
-  margin: 0;
-  padding-left: 20px;
-  color: #6b7280;
-  font-size: 13px;
-  line-height: 1.6;
-}
-
-.tips li {
-  margin-bottom: 6px;
-}

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

@@ -1,9 +0,0 @@
-/**
- * Canvas - Main rendering surface for visual components
- */
-import React from 'react';
-export interface CanvasProps {
-    onReady?: () => void;
-}
-export declare const Canvas: React.FC<CanvasProps>;
-//# sourceMappingURL=Canvas.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../../playground/components/Canvas/Canvas.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAO9D,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA6HxC,CAAC"}

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

@@ -1,58 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Canvas - Main rendering surface for visual components
- */
-import { useEffect, useRef, useCallback } from 'react';
-import { usePlaygroundStore } from '../../store/playgroundStore';
-import { DropZone } from '../DropZone/DropZone';
-import { DraggableComponent } from './DraggableComponent';
-import styles from './Canvas.module.css';
-export const Canvas = ({ onReady }) => {
-    const canvasRef = useRef(null);
-    const { components, rootId, selectedIds, hoveredId, canvasZoom, canvasOffset, showGrid, gridSize, mode, selectComponent, deselectAll, setHoveredComponent } = usePlaygroundStore();
-    // Notify when canvas is ready
-    useEffect(() => {
-        onReady?.();
-    }, [onReady]);
-    // Handle canvas click for deselection
-    const handleCanvasClick = useCallback((e) => {
-        // Only deselect if clicking directly on canvas
-        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();
-                // Implementation would go here
-            }
-            // Select all
-            if (e.metaKey && e.key === 'a') {
-                e.preventDefault();
-                // Implementation would go here
-            }
-            // Deselect all
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                deselectAll();
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [selectedIds, deselectAll]);
-    // 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" })] }) }));
-    }
-    return (_jsx("div", { ref: canvasRef, className: styles.canvas, onClick: handleCanvasClick, "data-mode": mode, "data-canvas": true, children: _jsxs("div", { className: styles.viewport, style: {
-                transform: `scale(${canvasZoom}) translate(${canvasOffset.x}px, ${canvasOffset.y}px)`,
-                transformOrigin: 'top left'
-            }, 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 }))] }) }));
-};
-//# sourceMappingURL=Canvas.js.map

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

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

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"}