@tpitre/story-ui 2.8.0 → 3.0.0

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

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

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

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

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

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

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

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

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

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