@minnai/create-aura-app 0.0.12 → 0.0.14

package/templates/starter/src/src/components/Playground/CodeEditor.tsx

@@ -1,121 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-import Editor from '@monaco-editor/react';
-import { atmosphere } from '@minnai/aura/atmosphere';
-
-interface CodeEditorProps {
-    airId: string;
-    filePath: string;
-    initialCode: string;
-}
-
-export function CodeEditor({ airId, filePath, initialCode }: CodeEditorProps) {
-    const [isDirty, setIsDirty] = useState(false);
-    const [status, setStatus] = useState<'idle' | 'saving' | 'saved'>('idle');
-    const editorRef = useRef<any>(null);
-
-    function handleEditorDidMount(editor: any, monaco: any) {
-        editorRef.current = editor;
-
-        // Disable internal linting/errors
-        monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-            noSemanticValidation: true,
-            noSyntaxValidation: true,
-        });
-    }
-
-    const handleSave = async () => {
-        const content = editorRef.current?.getValue() || '';
-        setStatus('saving');
-
-        try {
-            // 1. Persist to Filesystem
-            const response = await fetch('/api/save-code', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ filePath, content })
-            });
-
-            if (!response.ok) throw new Error("Failed to save to disk");
-
-            setStatus('saved');
-            setIsDirty(false);
-            setTimeout(() => setStatus('idle'), 3000);
-
-            // Note: Since we saved to the filesystem, Vite should ideally hot-reload.
-            // But if user wants a manual reload of the AIR, we could trigger flux dispatch.
-            // For now, persistence is verified.
-        } catch (err: any) {
-            console.error(err);
-            alert("Save failed: " + err.message);
-            setStatus('idle');
-        }
-    };
-
-    return (
-        <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: '#1e1e1e' }}>
-            <div style={{
-                padding: '10px 20px',
-                background: '#2d2d2d',
-                color: '#ddd',
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                borderBottom: '1px solid #333',
-                height: '40px',
-                userSelect: 'none'
-            }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                    <span style={{ fontSize: '0.75rem', opacity: 0.7, fontFamily: 'monospace' }}>{filePath}</span>
-                    {isDirty && <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#ff9500' }} title="Unsaved changes" />}
-                </div>
-
-                <div style={{ display: 'flex', alignItems: 'center', gap: 15 }}>
-                    {status === 'saved' && (
-                        <span style={{ fontSize: '0.75rem', color: '#4cd964', fontWeight: 600 }}>Saved ✔</span>
-                    )}
-                    {status === 'saving' && (
-                        <span style={{ fontSize: '0.75rem', color: '#888' }}>Saving...</span>
-                    )}
-                    <button
-                        onClick={handleSave}
-                        style={{
-                            padding: '4px 12px',
-                            background: isDirty ? '#007aff' : '#444',
-                            color: 'white',
-                            border: 'none',
-                            borderRadius: 4,
-                            cursor: isDirty ? 'pointer' : 'default',
-                            fontSize: '0.75rem',
-                            fontWeight: 600,
-                            transition: 'all 0.2s',
-                            opacity: isDirty ? 1 : 0.6
-                        }}
-                    >
-                        Save & Reload
-                    </button>
-                </div>
-            </div>
-            <div style={{ flex: 1 }}>
-                <Editor
-                    key={filePath} // Force re-mount when file changes
-                    height="100%"
-                    defaultLanguage="typescript"
-                    theme="vs-dark"
-                    value={initialCode}
-                    onChange={() => setIsDirty(true)}
-                    onMount={handleEditorDidMount}
-                    options={{
-                        minimap: { enabled: false },
-                        fontSize: 13,
-                        scrollBeyondLastLine: false,
-                        automaticLayout: true,
-                        tabSize: 4,
-                        padding: { top: 10 },
-                        wordWrap: 'on'
-                    }}
-                />
-            </div>
-        </div>
-    );
-}
-

package/templates/starter/src/src/components/Playground/Debugger.tsx

@@ -1,71 +0,0 @@
-import { useEffect, useState } from 'react';
-import { flux } from '@minnai/aura/flux/index';
-
-interface DebuggerProps {
-    airId: string;
-}
-
-export function Debugger({ airId }: DebuggerProps) {
-    const [state] = useState<any>(null);
-    const [history, setHistory] = useState<any[]>([]);
-
-    useEffect(() => {
-        // Listen to all flux actions (simplified for playground)
-        const unsubscribe = flux.subscribe((action) => {
-            if (action.to === airId || action.type.includes(airId.toUpperCase())) {
-                setHistory(prev => [action, ...prev].slice(0, 20));
-            }
-
-            // Attempt to get current state (this requires a specific flux pattern or selector)
-            // For now, we assume the state is exposed or we track updates
-        });
-
-        return () => unsubscribe();
-    }, [airId]);
-
-    return (
-        <div style={{
-            width: '350px',
-            borderLeft: '1px solid #ddd',
-            background: 'white',
-            padding: '20px',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '20px',
-            overflowY: 'auto'
-        }}>
-            <section>
-                <h3 style={{ margin: '0 0 10px 0', fontSize: '0.9rem', color: '#666', textTransform: 'uppercase' }}>State (Live)</h3>
-                <pre style={{
-                    background: '#f8f8f8',
-                    padding: '10px',
-                    borderRadius: '6px',
-                    fontSize: '0.8rem',
-                    overflowX: 'auto',
-                    border: '1px solid #eee'
-                }}>
-                    {JSON.stringify(state || { message: 'State tracking pending flux integration' }, null, 2)}
-                </pre>
-            </section>
-
-            <section>
-                <h3 style={{ margin: '0 0 10px 0', fontSize: '0.9rem', color: '#666', textTransform: 'uppercase' }}>Action History</h3>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                    {history.length === 0 && <div style={{ fontSize: '0.8rem', color: '#999' }}>No recent actions</div>}
-                    {history.map((action, i) => (
-                        <div key={i} style={{
-                            fontSize: '0.75rem',
-                            padding: '8px',
-                            background: '#f0f0f0',
-                            borderRadius: '4px',
-                            borderLeft: '3px solid #007aff'
-                        }}>
-                            <div style={{ fontWeight: 'bold' }}>{action.type}</div>
-                            <div style={{ color: '#666', marginTop: '4px' }}>{JSON.stringify(action.payload)}</div>
-                        </div>
-                    ))}
-                </div>
-            </section>
-        </div>
-    );
-}

package/templates/starter/src/src/components/Playground/Playground.tsx

@@ -1,221 +0,0 @@
-import { useState, useEffect } from 'react';
-import { flux } from '@minnai/aura/flux/index';
-import { Sidebar } from './Sidebar';
-import { Debugger } from './Debugger';
-import { Space } from '@minnai/aura/controller/Space';
-import { CodeEditor } from './CodeEditor';
-
-export function Playground() {
-    const [selectedId, setSelectedId] = useState<string | undefined>();
-    const [editorHeight, setEditorHeight] = useState(350);
-    const [isResizing, setIsResizing] = useState(false);
-    const [files, setFiles] = useState<string[]>([]);
-    const [activeFile, setActiveFile] = useState<string | null>(null);
-    const [fileContent, setFileContent] = useState<string>('');
-
-    const BUILTIN_AIRS = ['note-taker-air', 'youtube-player-air', 'tasks-air'];
-
-    const handleSelect = async (id: string) => {
-        setSelectedId(id);
-        flux.dispatch({ type: 'SPAWN_AIR', payload: { id }, to: 'controller' });
-
-        if (BUILTIN_AIRS.includes(id)) {
-            setFiles([]);
-            setActiveFile(null);
-            setFileContent('');
-            return;
-        }
-
-        // Fetch files for this AIR
-        try {
-            const res = await fetch(`/api/list-files?airId=${id}`);
-            const data = await res.json();
-            setFiles(data.files || []);
-            if (data.files && data.files.length > 0) {
-                // Default to index.tsx or first file
-                const defaultFile = data.files.find((f: string) => f.endsWith('index.tsx')) || data.files[0];
-                handleFileSelect(defaultFile);
-            }
-        } catch (err) {
-            console.error("Failed to list files:", err);
-            setFiles([]);
-        }
-    };
-
-    const handleFileSelect = async (filePath: string) => {
-        setActiveFile(filePath);
-        try {
-            const url = filePath.startsWith('/') ? filePath : '/' + filePath;
-            const res = await fetch(url);
-            if (!res.ok) throw new Error("File not found");
-            const text = await res.text();
-            setFileContent(text);
-        } catch (err) {
-            console.error("Failed to load file content:", err);
-            setFileContent("// Error loading file: " + filePath);
-        }
-    };
-
-    const handleAddAIR = async () => {
-        const name = window.prompt("Enter AIR Name (e.g. My Custom Tool):");
-        if (!name) return;
-        const id = name.toLowerCase().replace(/\s+/g, '-') + '-air';
-
-        try {
-            const res = await fetch('/api/scaffold-air', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ airId: id, name })
-            });
-            const data = await res.json();
-            if (data.success) {
-                alert("Scaffolded successfully! Refreshing...");
-                window.location.reload();
-            } else {
-                alert("Scaffold failed: " + data.error);
-            }
-        } catch (err) {
-            alert("Scaffold error");
-        }
-    };
-
-    const handleMouseDown = (e: React.MouseEvent) => {
-        setIsResizing(true);
-        e.preventDefault();
-    };
-
-    useEffect(() => {
-        const handleMouseMove = (e: MouseEvent) => {
-            if (!isResizing) return;
-            const newHeight = window.innerHeight - e.clientY;
-            setEditorHeight(Math.max(100, Math.min(newHeight, window.innerHeight - 200)));
-        };
-        const handleMouseUp = () => setIsResizing(false);
-        if (isResizing) {
-            window.addEventListener('mousemove', handleMouseMove);
-            window.addEventListener('mouseup', handleMouseUp);
-        }
-        return () => {
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [isResizing]);
-
-    const isBuiltIn = selectedId && BUILTIN_AIRS.includes(selectedId);
-
-    return (
-        <div style={{ display: 'flex', height: 'calc(100vh - 60px)', width: '100vw', overflow: 'hidden' }}>
-            <div style={{
-                width: '250px',
-                height: '100%',
-                borderRight: '1px solid #ddd',
-                background: 'white',
-                display: 'flex',
-                flexDirection: 'column'
-            }}>
-                <Sidebar onSelect={handleSelect} onAddAIR={handleAddAIR} selectedId={selectedId} />
-            </div>
-
-
-            <main style={{ flex: 1, display: 'flex', flexDirection: 'column', background: '#fafafa' }}>
-                <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
-                    {!selectedId ? (
-                        <div style={{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center', color: '#999' }}>
-                            Select an AIR from the sidebar to begin testing
-                        </div>
-                    ) : (
-                        <Space />
-                    )}
-                </div>
-
-                {selectedId && (
-                    <div style={{ height: editorHeight, display: 'flex', flexDirection: 'column', borderTop: '1px solid #ddd', position: 'relative', background: '#fff' }}>
-                        <div
-                            onMouseDown={handleMouseDown}
-                            style={{
-                                height: '4px',
-                                width: '100%',
-                                position: 'absolute',
-                                top: '-2px',
-                                cursor: 'ns-resize',
-                                zIndex: 10,
-                                background: isResizing ? '#007aff' : 'transparent',
-                                transition: 'background 0.2s'
-                            }}
-                        />
-
-                        <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
-                            {/* File Explorer */}
-                            <div style={{
-                                width: '250px',
-                                borderRight: '1px solid #eee',
-                                background: '#fcfcfc',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                overflowY: 'auto'
-                            }}>
-                                <div style={{ padding: '10px 15px', fontSize: '0.7rem', color: '#999', fontWeight: 600, borderBottom: '1px solid #f0f0f0', textTransform: 'uppercase' }}>
-                                    File Explorer
-                                </div>
-                                {isBuiltIn ? (
-                                    <div style={{ padding: 20, color: '#999', fontSize: '0.8rem', textAlign: 'center', fontStyle: 'italic' }}>
-                                        Built-in Atmosphere AIR
-                                    </div>
-                                ) : (
-                                    files.map(file => (
-                                        <div
-                                            key={file}
-                                            onClick={() => handleFileSelect(file)}
-                                            style={{
-                                                padding: '8px 15px',
-                                                fontSize: '0.8rem',
-                                                cursor: 'pointer',
-                                                background: activeFile === file ? '#eef6ff' : 'transparent',
-                                                color: activeFile === file ? '#007aff' : '#555',
-                                                fontFamily: 'monospace',
-                                                textOverflow: 'ellipsis',
-                                                whiteSpace: 'nowrap',
-                                                overflow: 'hidden',
-                                                borderRight: activeFile === file ? '2px solid #007aff' : 'none'
-                                            }}
-                                            title={file}
-                                        >
-                                            {file.split(/[\\\/]/).pop()}
-                                        </div>
-                                    ))
-                                )}
-                            </div>
-
-                            {/* Editor */}
-                            <div style={{ flex: 1 }}>
-                                {isBuiltIn ? (
-                                    <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#1e1e1e', color: '#888', flexDirection: 'column', gap: 10 }}>
-                                        <div style={{ fontSize: '2rem' }}>🔒</div>
-                                        <div style={{ fontWeight: 600 }}>Built-in Atmosphere AIR</div>
-                                        <div style={{ fontSize: '0.8rem', opacity: 0.7 }}>Source code is managed by the main Aura package.</div>
-                                    </div>
-                                ) : activeFile ? (
-                                    <CodeEditor
-                                        airId={selectedId}
-                                        filePath={activeFile}
-                                        initialCode={fileContent}
-                                    />
-                                ) : (
-                                    <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f5f5f5', color: '#999' }}>
-                                        Select a file to edit
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </main>
-
-            {selectedId && (
-                <div style={{ width: '300px', borderLeft: '1px solid #ddd', background: 'white', overflowY: 'auto' }}>
-                    <Debugger airId={selectedId} />
-                </div>
-            )}
-        </div>
-    );
-}

package/templates/starter/src/src/components/Playground/Sidebar.tsx

@@ -1,68 +0,0 @@
-import { EXAMPLE_AIRS } from '../../ambiance';
-
-interface SidebarProps {
-    onSelect: (id: string) => void;
-    onAddAIR: () => void;
-    selectedId?: string;
-}
-
-export function Sidebar({ onSelect, onAddAIR, selectedId }: SidebarProps) {
-    return (
-        <div style={{
-            flex: 1,
-            padding: '20px',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '10px',
-            overflowY: 'auto'
-        }}>
-            <h3 style={{ margin: '0 0 10px 0', fontSize: '0.9rem', color: '#666', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
-                Available AIRs
-            </h3>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', flex: 1 }}>
-                {EXAMPLE_AIRS.map(air => (
-                    <button
-                        key={air.id}
-                        onClick={() => onSelect(air.id)}
-                        style={{
-                            padding: '12px 15px',
-                            textAlign: 'left',
-                            borderRadius: '8px',
-                            border: selectedId === air.id ? '1px solid #007aff' : '1px solid #eee',
-                            background: selectedId === air.id ? '#f0f7ff' : 'white',
-                            color: selectedId === air.id ? '#007aff' : '#1d1d1f',
-                            cursor: 'pointer',
-                            fontSize: '0.9rem',
-                            fontWeight: selectedId === air.id ? '600' : '400',
-                            transition: 'all 0.2s ease'
-                        }}
-                    >
-                        {typeof air.meta.title === 'function' ? air.meta.title('en') : air.meta.title}
-                    </button>
-                ))}
-            </div>
-
-            <button
-                onClick={onAddAIR}
-                style={{
-                    marginTop: '20px',
-                    padding: '12px',
-                    background: '#007aff',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: 8,
-                    cursor: 'pointer',
-                    fontSize: '0.85rem',
-                    fontWeight: 600,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    gap: '8px',
-                    boxShadow: '0 2px 8px rgba(0,122,255,0.2)'
-                }}
-            >
-                <span>+</span> Add Custom AIR
-            </button>
-        </div>
-    );
-}