npm - fraim-framework - Versions diffs - 2.0.52 → 2.0.55 - Mend

fraim-framework 2.0.52 → 2.0.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

package/dist/website/demo.html DELETED Viewed

@@ -1,604 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FRAIM Demo - See It In Action</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <!-- Favicon -->
-    <link rel="icon" type="image/png" sizes="32x32" href="images/fraim-logo.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="images/fraim-logo.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="images/fraim-logo.png">
-    <link rel="shortcut icon" href="images/fraim-logo.png">
-    <style>
-        :root {
-            /* Light mode colors */
-            --bg-primary: #ffffff;
-            --bg-secondary: #f8fafc;
-            --text-primary: #1a1a1a;
-            --text-secondary: #64748b;
-            --accent-primary: #3b82f6;
-            --accent-secondary: #8b5cf6;
-            --border-color: #e2e8f0;
-            --terminal-bg: #1e293b;
-            --terminal-text: #e2e8f0;
-            --success-color: #10b981;
-            --warning-color: #f59e0b;
-        }
-        [data-theme="dark"] {
-            /* Dark mode colors */
-            --bg-primary: #0f172a;
-            --bg-secondary: #1e293b;
-            --text-primary: #f1f5f9;
-            --text-secondary: #94a3b8;
-            --accent-primary: #60a5fa;
-            --accent-secondary: #a78bfa;
-            --border-color: #334155;
-            --terminal-bg: #0f172a;
-            --terminal-text: #e2e8f0;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Inter', sans-serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.6;
-            transition: all 0.3s ease;
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 2rem;
-        }
-        /* Navigation */
-        .nav {
-            position: fixed;
-            top: 0;
-            width: 100%;
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            transition: all 0.3s ease;
-        }
-        [data-theme="dark"] .nav {
-            background: rgba(15, 23, 42, 0.95);
-        }
-        .nav-container {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 1rem 2rem;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-        .nav-brand {
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: var(--accent-primary);
-            text-decoration: none;
-        }
-        .nav-links {
-            display: flex;
-            gap: 2rem;
-            align-items: center;
-        }
-        .nav-links a {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-weight: 500;
-            transition: color 0.3s ease;
-        }
-        .nav-links a:hover {
-            color: var(--accent-primary);
-        }
-        .theme-toggle {
-            background: none;
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            padding: 0.5rem;
-            cursor: pointer;
-            font-size: 1.2rem;
-            transition: all 0.3s ease;
-        }
-        .theme-toggle:hover {
-            background: var(--bg-secondary);
-        }
-        /* Hero Section */
-        .hero {
-            padding: 8rem 0 4rem;
-            text-align: center;
-        }
-        .hero h1 {
-            font-size: 3rem;
-            font-weight: 700;
-            margin-bottom: 1rem;
-            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .hero p {
-            font-size: 1.25rem;
-            color: var(--text-secondary);
-            margin-bottom: 2rem;
-            max-width: 600px;
-            margin-left: auto;
-            margin-right: auto;
-        }
-        /* Demo Section */
-        .demo-section {
-            padding: 4rem 0;
-        }
-        .demo-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 4rem;
-            align-items: start;
-        }
-        .demo-content h2 {
-            font-size: 2rem;
-            margin-bottom: 1rem;
-            color: var(--text-primary);
-        }
-        .demo-content p {
-            color: var(--text-secondary);
-            margin-bottom: 1.5rem;
-        }
-        .demo-features {
-            list-style: none;
-        }
-        .demo-features li {
-            padding: 0.5rem 0;
-            color: var(--text-secondary);
-        }
-        .demo-features li::before {
-            content: "✓";
-            color: var(--success-color);
-            font-weight: bold;
-            margin-right: 0.5rem;
-        }
-        /* Terminal Demo */
-        .terminal-demo {
-            background: var(--terminal-bg);
-            border-radius: 12px;
-            overflow: hidden;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-            border: 1px solid var(--border-color);
-        }
-        .terminal-header {
-            background: #374151;
-            padding: 1rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .terminal-controls {
-            display: flex;
-            gap: 0.5rem;
-        }
-        .control {
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-        }
-        .control.red { background: #ef4444; }
-        .control.yellow { background: #f59e0b; }
-        .control.green { background: #10b981; }
-        .terminal-title {
-            color: var(--terminal-text);
-            font-size: 0.875rem;
-            margin-left: 1rem;
-        }
-        .terminal-body {
-            padding: 1.5rem;
-            font-family: 'Monaco', 'Menlo', monospace;
-            font-size: 0.875rem;
-            line-height: 1.6;
-        }
-        .terminal-line {
-            margin-bottom: 0.5rem;
-            color: var(--terminal-text);
-        }
-        .prompt {
-            color: var(--success-color);
-            margin-right: 0.5rem;
-        }
-        .command {
-            color: #60a5fa;
-        }
-        .output {
-            color: var(--terminal-text);
-            opacity: 0.8;
-        }
-        .success {
-            color: var(--success-color);
-        }
-        .warning {
-            color: var(--warning-color);
-        }
-        .cursor {
-            animation: blink 1s infinite;
-        }
-        @keyframes blink {
-            0%, 50% { opacity: 1; }
-            51%, 100% { opacity: 0; }
-        }
-        /* Workflow Steps */
-        .workflow-steps {
-            padding: 4rem 0;
-        }
-        .workflow-steps h2 {
-            text-align: center;
-            font-size: 2rem;
-            margin-bottom: 3rem;
-        }
-        .steps-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 2rem;
-        }
-        .step-card {
-            background: var(--bg-secondary);
-            padding: 2rem;
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            transition: transform 0.3s ease;
-        }
-        .step-card:hover {
-            transform: translateY(-4px);
-        }
-        .step-number {
-            background: var(--accent-primary);
-            color: white;
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
-            margin-bottom: 1rem;
-        }
-        .step-card h3 {
-            font-size: 1.25rem;
-            margin-bottom: 1rem;
-            color: var(--text-primary);
-        }
-        .step-card p {
-            color: var(--text-secondary);
-        }
-        /* CTA Section */
-        .cta {
-            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-            color: white;
-            padding: 4rem 0;
-            text-align: center;
-            margin: 4rem 0;
-            border-radius: 12px;
-        }
-        .cta h2 {
-            font-size: 2rem;
-            margin-bottom: 1rem;
-        }
-        .cta p {
-            font-size: 1.125rem;
-            margin-bottom: 2rem;
-            opacity: 0.9;
-        }
-        .btn {
-            display: inline-block;
-            padding: 1rem 2rem;
-            background: white;
-            color: var(--accent-primary);
-            text-decoration: none;
-            border-radius: 8px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-        }
-        .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-        }
-        /* Responsive */
-        @media (max-width: 768px) {
-            .demo-grid {
-                grid-template-columns: 1fr;
-                gap: 2rem;
-            }
-            .hero h1 {
-                font-size: 2rem;
-            }
-            .nav-links {
-                gap: 1rem;
-            }
-            .container {
-                padding: 0 1rem;
-            }
-        }
-    </style>
-</head>
-<body>
-    <!-- Navigation -->
-    <nav class="nav">
-        <div class="nav-container">
-            <a href="index.html" class="nav-brand">FRAIM</a>
-            <div class="nav-links">
-                <a href="index.html">Home</a>
-                <a href="index.html#features">Features</a>
-                <a href="pricing.html">Pricing</a>
-                <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
-                    <span class="theme-icon">🌙</span>
-                </button>
-            </div>
-        </div>
-    </nav>
-    <!-- Hero Section -->
-    <section class="hero">
-        <div class="container">
-            <h1>See FRAIM in Action</h1>
-            <p>Watch how FRAIM transforms chaotic AI coding into structured, production-ready development workflows.</p>
-        </div>
-    </section>
-    <!-- Demo Section -->
-    <section class="demo-section">
-        <div class="container">
-            <div class="demo-grid">
-                <div class="demo-content">
-                    <h2>From Idea to Production</h2>
-                    <p>FRAIM guides AI agents through a structured development process, ensuring consistent quality and reducing rework cycles.</p>
-                    <ul class="demo-features">
-                        <li>Automated specification generation</li>
-                        <li>Architecture design validation</li>
-                        <li>Implementation with quality gates</li>
-                        <li>Comprehensive testing coverage</li>
-                        <li>Production deployment readiness</li>
-                    </ul>
-                </div>
-                <div class="terminal-demo">
-                    <div class="terminal-header">
-                        <div class="terminal-controls">
-                            <span class="control red"></span>
-                            <span class="control yellow"></span>
-                            <span class="control green"></span>
-                        </div>
-                        <span class="terminal-title">FRAIM Terminal Demo</span>
-                    </div>
-                    <div class="terminal-body" id="terminal-content">
-                        <div class="terminal-line">
-                            <span class="prompt">$</span>
-                            <span class="command">fraim spec "user authentication system"</span>
-                        </div>
-                        <div class="terminal-line output">
-                            <span class="success">✓ Analyzing requirements...</span>
-                        </div>
-                        <div class="terminal-line output">
-                            <span class="success">✓ Generating user stories...</span>
-                        </div>
-                        <div class="terminal-line output">
-                            <span class="success">✓ Creating acceptance criteria...</span>
-                        </div>
-                        <div class="terminal-line output">
-                            <span class="success">✓ Specification complete</span>
-                        </div>
-                        <div class="terminal-line">
-                            <span class="prompt">$</span>
-                            <span class="command">fraim design --spec auth-spec.md</span>
-                        </div>
-                        <div class="terminal-line output">
-                            <span class="success">✓ Architecture analysis...</span>
-                        </div>
-                        <div class="terminal-line output">
-                            <span class="success">✓ Security review...</span>
-                        </div>
-                        <div class="terminal-line output">
-                            <span class="success">✓ Design document generated</span>
-                        </div>
-                        <div class="terminal-line">
-                            <span class="prompt">$</span>
-                            <span class="command">fraim implement --design auth-design.md</span>
-                        </div>
-                        <div class="terminal-line output">
-                            <span class="success">✓ Code generation...</span>
-                        </div>
-                        <div class="terminal-line output">
-                            <span class="success">✓ Test creation...</span>
-                        </div>
-                        <div class="terminal-line output">
-                            <span class="success">✓ Quality gates passed</span>
-                        </div>
-                        <div class="terminal-line output">
-                            <span class="success">✓ Implementation complete</span>
-                        </div>
-                        <div class="terminal-line">
-                            <span class="prompt">$</span>
-                            <span class="cursor">_</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Workflow Steps -->
-    <section class="workflow-steps">
-        <div class="container">
-            <h2>FRAIM Workflow Process</h2>
-            <div class="steps-grid">
-                <div class="step-card">
-                    <div class="step-number">1</div>
-                    <h3>Specification</h3>
-                    <p>AI agents analyze requirements and generate comprehensive specifications with user stories, acceptance criteria, and validation rules.</p>
-                </div>
-                <div class="step-card">
-                    <div class="step-number">2</div>
-                    <h3>Design</h3>
-                    <p>Architecture and design documents are created with security reviews, performance considerations, and implementation guidelines.</p>
-                </div>
-                <div class="step-card">
-                    <div class="step-number">3</div>
-                    <h3>Implementation</h3>
-                    <p>Code is generated following best practices with comprehensive testing, documentation, and quality gate validation.</p>
-                </div>
-                <div class="step-card">
-                    <div class="step-number">4</div>
-                    <h3>Testing</h3>
-                    <p>Automated test suites ensure code quality, performance benchmarks, and security compliance before deployment.</p>
-                </div>
-                <div class="step-card">
-                    <div class="step-number">5</div>
-                    <h3>Deployment</h3>
-                    <p>Production-ready deployment with monitoring, rollback procedures, and performance tracking in place.</p>
-                </div>
-                <div class="step-card">
-                    <div class="step-number">6</div>
-                    <h3>Retrospective</h3>
-                    <p>Continuous improvement through feedback analysis, workflow optimization, and knowledge base updates.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- CTA Section -->
-    <section class="cta">
-        <div class="container">
-            <h2>Ready to Transform Your Development Process?</h2>
-            <p>Start using FRAIM today and experience the power of structured AI management.</p>
-            <a href="https://github.com/mathursrus/FRAIM" class="btn">Get Started Free</a>
-        </div>
-    </section>
-    <script>
-        // Theme toggle functionality
-        const themeToggle = document.getElementById('theme-toggle');
-        const themeIcon = document.querySelector('.theme-icon');
-        // Check for saved theme preference or default to light mode
-        const currentTheme = localStorage.getItem('theme') || 'light';
-        document.documentElement.setAttribute('data-theme', currentTheme);
-        // Update icon based on current theme
-        themeIcon.textContent = currentTheme === 'dark' ? '☀️' : '🌙';
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            // Update icon
-            themeIcon.textContent = newTheme === 'dark' ? '☀️' : '🌙';
-        });
-        // Terminal animation
-        function animateTerminal() {
-            const terminal = document.getElementById('terminal-content');
-            const lines = terminal.querySelectorAll('.terminal-line');
-            // Hide all lines initially
-            lines.forEach(line => {
-                line.style.opacity = '0';
-                line.style.transform = 'translateY(10px)';
-            });
-            // Animate lines one by one
-            lines.forEach((line, index) => {
-                setTimeout(() => {
-                    line.style.transition = 'all 0.5s ease';
-                    line.style.opacity = '1';
-                    line.style.transform = 'translateY(0)';
-                }, index * 800);
-            });
-        }
-        // Start animation when page loads
-        window.addEventListener('load', () => {
-            setTimeout(animateTerminal, 1000);
-        });
-        // Restart animation on scroll into view
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    setTimeout(animateTerminal, 500);
-                }
-            });
-        });
-        observer.observe(document.querySelector('.terminal-demo'));
-    </script>
-</body>
-</html>

package/dist/website/images/.gitkeep DELETED Viewed

	@@ -1 +0,0 @@
1	- # Images directory for FRAIM logo and assets

package/dist/website/images/fraim-logo.png DELETED Viewed

Binary file