@tpitre/story-ui 3.3.0 → 3.4.0

package/dist/playground/components/AIAssistant/AIAssistant.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AIAssistant - Connects to existing Story UI generation and enables visual editing
+ */
+import { useState, useCallback, useRef } from 'react';
+import { usePlaygroundStore } from '../../store/playgroundStore';
+import { StoryParser } from '../../services/StoryParser';
+import styles from './AIAssistant.module.css';
+// Get the MCP API port (same as StoryUIPanel)
+const getApiPort = () => {
+    const vitePort = import.meta.env?.VITE_STORY_UI_PORT;
+    if (vitePort)
+        return String(vitePort);
+    const windowOverride = window.__STORY_UI_PORT__;
+    if (windowOverride)
+        return String(windowOverride);
+    const mcpOverride = window.STORY_UI_MCP_PORT;
+    if (mcpOverride)
+        return String(mcpOverride);
+    return '4001';
+};
+const MCP_API = `http://localhost:${getApiPort()}/story-ui/generate`;
+export const AIAssistant = () => {
+    const [prompt, setPrompt] = useState('');
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [error, setError] = useState(null);
+    const [hasGenerated, setHasGenerated] = useState(false);
+    const textareaRef = useRef(null);
+    const { setGeneratedStoryCode, setIsParsingStory, setParseError, loadComponentsFromStory, setMode } = usePlaygroundStore();
+    const parser = useRef(new StoryParser());
+    // Generate layout using existing Story UI API
+    const handleGenerate = useCallback(async () => {
+        if (!prompt.trim() || isGenerating)
+            return;
+        setIsGenerating(true);
+        setError(null);
+        try {
+            // Call existing Story UI generation API
+            const response = await fetch(MCP_API, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    prompt,
+                    // Add hint for playground-optimized generation
+                    conversation: [{
+                            role: 'system',
+                            content: 'Generate a layout with clear component structure suitable for visual editing.'
+                        }, {
+                            role: 'user',
+                            content: prompt
+                        }]
+                })
+            });
+            if (!response.ok) {
+                throw new Error(`Generation failed: ${response.statusText}`);
+            }
+            const data = await response.json();
+            if (!data.success) {
+                throw new Error(data.error || 'Story generation failed');
+            }
+            // Store the generated code
+            setGeneratedStoryCode(data.code || data.story);
+            // Parse the generated story into playground components
+            setIsParsingStory(true);
+            const parseResult = await parser.current.parseStoryToComponents(data.code || data.story);
+            if (parseResult.success) {
+                loadComponentsFromStory(parseResult.components);
+                setHasGenerated(true);
+                // Show any warnings
+                if (parseResult.warnings && parseResult.warnings.length > 0) {
+                    console.warn('Parse warnings:', parseResult.warnings);
+                }
+            }
+            else {
+                throw new Error(parseResult.error || 'Failed to parse story');
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+            setError(errorMessage);
+            setParseError(errorMessage);
+        }
+        finally {
+            setIsGenerating(false);
+            setIsParsingStory(false);
+        }
+    }, [
+        prompt,
+        isGenerating,
+        setGeneratedStoryCode,
+        setIsParsingStory,
+        setParseError,
+        loadComponentsFromStory
+    ]);
+    // Switch to edit mode
+    const handleEditLayout = useCallback(() => {
+        setMode('edit');
+        // Additional edit mode setup could go here
+    }, [setMode]);
+    // Handle Enter key
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' && e.metaKey) {
+            e.preventDefault();
+            handleGenerate();
+        }
+    }, [handleGenerate]);
+    return (_jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.section, children: [_jsx("label", { className: styles.label, children: "Describe your layout" }), _jsx("textarea", { ref: textareaRef, className: styles.textarea, value: prompt, onChange: (e) => setPrompt(e.target.value), onKeyDown: handleKeyDown, placeholder: "Create a dashboard with a header, sidebar navigation, and main content area with cards...", rows: 4, disabled: isGenerating }), _jsxs("div", { className: styles.buttonGroup, children: [_jsx("button", { className: `${styles.button} ${styles.primaryButton}`, onClick: handleGenerate, disabled: !prompt.trim() || isGenerating, children: isGenerating ? (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.spinner }), "Generating..."] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.icon, children: "\u2728" }), "Generate Layout"] })) }), hasGenerated && (_jsxs("button", { className: `${styles.button} ${styles.secondaryButton}`, onClick: handleEditLayout, children: [_jsx("span", { className: styles.icon, children: "\u270F\uFE0F" }), "Edit Layout"] }))] }), error && (_jsxs("div", { className: styles.error, children: [_jsx("span", { className: styles.errorIcon, children: "\u26A0\uFE0F" }), error] }))] }), _jsxs("div", { className: styles.section, children: [_jsx("h3", { className: styles.sectionTitle, children: "Suggestions" }), _jsxs("div", { className: styles.suggestions, children: [_jsx("button", { className: styles.suggestion, onClick: () => setPrompt('Create a blog post layout with header, content, and sidebar'), children: "Blog Layout" }), _jsx("button", { className: styles.suggestion, onClick: () => setPrompt('Build a product card grid with filters'), children: "Product Grid" }), _jsx("button", { className: styles.suggestion, onClick: () => setPrompt('Design a user profile page with stats and activity feed'), children: "Profile Page" }), _jsx("button", { className: styles.suggestion, onClick: () => setPrompt('Create a dashboard with charts and metrics'), children: "Dashboard" })] })] }), _jsxs("div", { className: styles.section, children: [_jsx("h3", { className: styles.sectionTitle, children: "Tips" }), _jsxs("ul", { className: styles.tips, children: [_jsx("li", { children: "Be specific about layout structure and components" }), _jsx("li", { children: "Mention spacing and alignment preferences" }), _jsx("li", { children: "After generation, click \"Edit Layout\" to refine visually" }), _jsx("li", { children: "Use Cmd+Enter to generate quickly" })] })] })] }));
+};
+//# sourceMappingURL=AIAssistant.js.map

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

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

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