lean-spec 0.2.5-dev.20251124064307 → 0.2.5-dev.20251124070920

package/dist/cli.js

@@ -1,4 +1,4 @@
-import { analyzeCommand, archiveCommand, backfillCommand, boardCommand, checkCommand, compactCommand, createCommand, depsCommand, examplesCommand, filesCommand, ganttCommand, initCommand, linkCommand, listCommand, mcpCommand, migrateCommand, openCommand, searchCommand, splitCommand, statsCommand, templatesCommand, timelineCommand, tokensCommand, uiCommand, unlinkCommand, updateCommand, validateCommand, viewCommand } from './chunk-FYYLWDI6.js';
+import { analyzeCommand, archiveCommand, backfillCommand, boardCommand, checkCommand, compactCommand, createCommand, depsCommand, examplesCommand, filesCommand, ganttCommand, initCommand, linkCommand, listCommand, mcpCommand, migrateCommand, openCommand, searchCommand, splitCommand, statsCommand, templatesCommand, timelineCommand, tokensCommand, uiCommand, unlinkCommand, updateCommand, validateCommand, viewCommand } from './chunk-LV7XEQ4D.js';
 import './chunk-LVD7ZAVZ.js';
 import { Command } from 'commander';
 import { readFileSync } from 'fs';

package/dist/mcp-server.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-export { createMcpServer } from './chunk-FYYLWDI6.js';
+export { createMcpServer } from './chunk-LV7XEQ4D.js';
 import './chunk-LVD7ZAVZ.js';
 //# sourceMappingURL=mcp-server.js.map
 //# sourceMappingURL=mcp-server.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lean-spec",
-  "version": "0.2.5-dev.20251124064307",
+  "version": "0.2.5-dev.20251124070920",
   "description": "Specification-driven development made simple",
   "type": "module",
   "bin": {

package/templates/examples/dark-theme/README.md

@@ -4,21 +4,24 @@
 
 ## Scenario
 
-You're building a personal task manager web app. The app works great, but users keep requesting a dark mode option for late-night productivity sessions. Currently, the app only has a bright light theme that can strain eyes in low-light environments.
+You're building a professional admin dashboard for a SaaS product. The dashboard looks modern and works great, but users keep requesting a dark mode option for late-night monitoring sessions and to reduce eye strain during extended use. Currently, the dashboard only has a bright light theme.
 
 ## What's Here
 
-A minimal single-page task manager with:
-- Task creation and listing interface
-- Simple Express.js server serving static files
-- Clean light theme CSS
+A professional admin dashboard with:
+- Interactive data visualization with charts (Chart.js)
+- Real-time statistics cards with animations
+- Sidebar navigation and top bar
+- Activity feed with recent events
+- Responsive layout
+- Clean, modern light theme
 - No dark mode support (yet!)
 
 **Files:**
 - `src/server.js` - Express server for static files
-- `src/public/index.html` - Task manager interface
-- `src/public/style.css` - Current light theme styles
-- `src/public/app.js` - Task management logic
+- `src/public/index.html` - Dashboard interface with sidebar, charts, and stats
+- `src/public/style.css` - Current light theme styles (CSS custom properties ready)
+- `src/public/app.js` - Dashboard logic, chart initialization, and animations
 
 ## Getting Started
 
@@ -37,19 +40,27 @@ npm start
 
 Add dark theme support with automatic switching based on system preferences. Follow the tutorial and ask your AI assistant:
 
-> "Help me add dark theme support to this app using LeanSpec. It should automatically switch based on the user's system theme preference."
+> "Help me add dark theme support to this admin dashboard using LeanSpec. It should automatically switch based on the user's system theme preference."
 
 The AI will guide you through:
 1. Creating a spec for dark theme support
-2. Designing the CSS for dark mode
-3. Implementing system preference detection
-4. Testing the theme switching
+2. Designing CSS custom properties for dark mode colors
+3. Implementing the `@media (prefers-color-scheme: dark)` query
+4. Ensuring charts adapt to the theme
+5. Testing the theme switching
 
 ## Current Limitations
 
 - Only light theme available
 - No manual theme toggle
-- Colors may not be fully accessible
-- No theme persistence
+- Chart colors don't adapt to theme
+- No theme persistence across sessions
 
 These are perfect opportunities to practice spec-driven development!
+
+## Tech Stack
+
+- **Frontend**: Vanilla HTML, CSS, JavaScript
+- **Charts**: Chart.js 4.4.0
+- **Backend**: Express.js (serving static files)
+- **Styling**: CSS Custom Properties (CSS Variables)

package/templates/examples/dark-theme/package.json

@@ -1,13 +1,13 @@
 {
   "name": "dark-theme-demo",
   "version": "1.0.0",
-  "description": "Simple web app for LeanSpec Dark Theme Tutorial",
+  "description": "Professional admin dashboard for LeanSpec Dark Theme Tutorial",
   "type": "module",
   "scripts": {
     "start": "node src/server.js",
     "dev": "node --watch src/server.js"
   },
-  "keywords": ["leanspec", "tutorial", "demo"],
+  "keywords": ["leanspec", "tutorial", "demo", "dashboard", "admin"],
   "author": "",
   "license": "MIT",
   "dependencies": {

package/templates/examples/dark-theme/src/public/app.js

@@ -1,92 +1,277 @@
-// Task Manager - Simple task tracking
-let tasks = [];
-let taskIdCounter = 1;
+// Admin Dashboard - Interactive data visualization
+// This is a starting point for adding dark theme support
 
-const taskInput = document.getElementById('taskInput');
-const addButton = document.getElementById('addButton');
-const taskList = document.getElementById('taskList');
-const taskCount = document.getElementById('taskCount');
+// ============================================
+// Initialize Charts
+// ============================================
 
-// Add task on button click
-addButton.addEventListener('click', addTask);
-
-// Add task on Enter key
-taskInput.addEventListener('keypress', (e) => {
-  if (e.key === 'Enter') {
-    addTask();
+function initializeCharts() {
+  // Revenue Chart
+  const revenueCtx = document.getElementById('revenueChart');
+  if (revenueCtx) {
+    new Chart(revenueCtx, {
+      type: 'line',
+      data: {
+        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        datasets: [{
+          label: 'Revenue',
+          data: [4200, 5100, 4800, 6200, 5800, 7100, 6500],
+          borderColor: '#0066cc',
+          backgroundColor: 'rgba(0, 102, 204, 0.1)',
+          borderWidth: 2,
+          tension: 0.4,
+          fill: true,
+          pointBackgroundColor: '#0066cc',
+          pointBorderColor: '#fff',
+          pointBorderWidth: 2,
+          pointRadius: 4,
+          pointHoverRadius: 6
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: false
+          },
+          tooltip: {
+            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+            padding: 12,
+            borderRadius: 8,
+            titleColor: '#fff',
+            bodyColor: '#fff',
+            callbacks: {
+              label: function(context) {
+                return '$' + context.parsed.y.toLocaleString();
+              }
+            }
+          }
+        },
+        scales: {
+          y: {
+            beginAtZero: true,
+            grid: {
+              color: 'rgba(0, 0, 0, 0.05)'
+            },
+            ticks: {
+              callback: function(value) {
+                return '$' + value.toLocaleString();
+              }
+            }
+          },
+          x: {
+            grid: {
+              display: false
+            }
+          }
+        }
+      }
+    });
   }
-});
 
-function addTask() {
-  const text = taskInput.value.trim();
-  
-  if (!text) {
-    return;
+  // Traffic Chart
+  const trafficCtx = document.getElementById('trafficChart');
+  if (trafficCtx) {
+    new Chart(trafficCtx, {
+      type: 'doughnut',
+      data: {
+        labels: ['Organic', 'Direct', 'Social', 'Referral'],
+        datasets: [{
+          data: [42, 28, 18, 12],
+          backgroundColor: [
+            '#0066cc',
+            '#00a854',
+            '#7c3aed',
+            '#ff8c00'
+          ],
+          borderWidth: 0,
+          hoverOffset: 8
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            position: 'bottom',
+            labels: {
+              padding: 16,
+              usePointStyle: true,
+              pointStyle: 'circle',
+              font: {
+                size: 12
+              }
+            }
+          },
+          tooltip: {
+            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+            padding: 12,
+            borderRadius: 8,
+            titleColor: '#fff',
+            bodyColor: '#fff',
+            callbacks: {
+              label: function(context) {
+                return context.label + ': ' + context.parsed + '%';
+              }
+            }
+          }
+        }
+      }
+    });
   }
+}
 
-  const task = {
-    id: taskIdCounter++,
-    text: text,
-    completed: false
-  };
+// ============================================
+// Animate Stats on Load
+// ============================================
 
-  tasks.push(task);
-  taskInput.value = '';
+function animateValue(element, start, end, duration) {
+  const range = end - start;
+  const increment = range / (duration / 16);
+  let current = start;
   
-  renderTasks();
+  const timer = setInterval(() => {
+    current += increment;
+    if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
+      element.textContent = formatStatValue(end);
+      clearInterval(timer);
+    } else {
+      element.textContent = formatStatValue(Math.floor(current));
+    }
+  }, 16);
 }
 
-function toggleTask(id) {
-  const task = tasks.find(t => t.id === id);
-  if (task) {
-    task.completed = !task.completed;
-    renderTasks();
+function formatStatValue(value) {
+  if (value >= 1000) {
+    return value.toLocaleString();
   }
+  return value.toString();
 }
 
-function deleteTask(id) {
-  tasks = tasks.filter(t => t.id !== id);
-  renderTasks();
+function animateStats() {
+  const stats = [
+    { id: 'totalUsers', value: 2847 },
+    { id: 'revenue', value: 45231, prefix: '$' },
+    { id: 'completedTasks', value: 892 },
+    { id: 'activeProjects', value: 24 }
+  ];
+  
+  stats.forEach(stat => {
+    const element = document.getElementById(stat.id);
+    if (element) {
+      if (stat.prefix) {
+        const originalText = element.textContent;
+        element.textContent = stat.prefix + '0';
+        animateValue(element, 0, stat.value, 1000);
+        const timer = setInterval(() => {
+          if (element.textContent !== stat.prefix + '0') {
+            const currentVal = element.textContent.replace(/[^0-9]/g, '');
+            element.textContent = stat.prefix + Number(currentVal).toLocaleString();
+          }
+        }, 16);
+        setTimeout(() => clearInterval(timer), 1000);
+      } else {
+        element.textContent = '0';
+        animateValue(element, 0, stat.value, 1000);
+      }
+    }
+  });
 }
 
-function renderTasks() {
-  // Clear list
-  taskList.innerHTML = '';
-
-  // Show empty state if no tasks
-  if (tasks.length === 0) {
-    taskList.innerHTML = '<div class="empty-state">No tasks yet. Add one above to get started!</div>';
-    taskCount.textContent = '0 tasks';
-    return;
-  }
+// ============================================
+// Recent Activity
+// ============================================
 
-  // Render each task
-  tasks.forEach(task => {
-    const li = document.createElement('li');
-    li.className = `task-item ${task.completed ? 'completed' : ''}`;
-    
-    li.innerHTML = `
-      <div class="task-content">
-        <input type="checkbox" class="task-checkbox" ${task.completed ? 'checked' : ''} 
-               onchange="toggleTask(${task.id})">
-        <span class="task-text">${escapeHtml(task.text)}</span>
+function loadRecentActivity() {
+  const activities = [
+    {
+      type: 'user',
+      title: 'New user registration',
+      description: 'Sarah Johnson joined the platform',
+      time: '5 minutes ago',
+      icon: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path d="M10 11C12.2091 11 14 9.20914 14 7C14 4.79086 12.2091 3 10 3C7.79086 3 6 4.79086 6 7C6 9.20914 7.79086 11 10 11Z" stroke="currentColor" stroke-width="2"/>
+        <path d="M3 17C3 14.2386 5.23858 12 8 12H12C14.7614 12 17 14.2386 17 17" stroke="currentColor" stroke-width="2"/>
+      </svg>`
+    },
+    {
+      type: 'report',
+      title: 'Monthly report generated',
+      description: 'Q4 2024 performance summary is ready',
+      time: '1 hour ago',
+      icon: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <rect x="3" y="3" width="14" height="14" rx="2" stroke="currentColor" stroke-width="2"/>
+        <path d="M7 8H13M7 12H10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+      </svg>`
+    },
+    {
+      type: 'alert',
+      title: 'Server capacity warning',
+      description: 'CPU usage exceeded 80% threshold',
+      time: '3 hours ago',
+      icon: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path d="M10 6V10M10 14H10.01M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+      </svg>`
+    },
+    {
+      type: 'user',
+      title: 'Team member added',
+      description: 'Michael Chen joined the Development team',
+      time: '5 hours ago',
+      icon: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path d="M10 11C12.2091 11 14 9.20914 14 7C14 4.79086 12.2091 3 10 3C7.79086 3 6 4.79086 6 7C6 9.20914 7.79086 11 10 11Z" stroke="currentColor" stroke-width="2"/>
+        <path d="M3 17C3 14.2386 5.23858 12 8 12H12C14.7614 12 17 14.2386 17 17" stroke="currentColor" stroke-width="2"/>
+      </svg>`
+    },
+    {
+      type: 'report',
+      title: 'Backup completed',
+      description: 'Database backup finished successfully',
+      time: '8 hours ago',
+      icon: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path d="M3 12L9 18L21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>`
+    }
+  ];
+  
+  const activityList = document.getElementById('activityList');
+  if (activityList) {
+    activityList.innerHTML = activities.map(activity => `
+      <div class="activity-item">
+        <div class="activity-icon ${activity.type}">
+          ${activity.icon}
+        </div>
+        <div class="activity-content">
+          <div class="activity-title">${activity.title}</div>
+          <div class="activity-description">${activity.description}</div>
+          <div class="activity-time">${activity.time}</div>
+        </div>
       </div>
-      <button class="delete-button" onclick="deleteTask(${task.id})">Delete</button>
-    `;
-    
-    taskList.appendChild(li);
-  });
-
-  // Update count
-  const remaining = tasks.filter(t => !t.completed).length;
-  taskCount.textContent = `${remaining} task${remaining !== 1 ? 's' : ''} remaining`;
+    `).join('');
+  }
 }
 
-function escapeHtml(text) {
-  const div = document.createElement('div');
-  div.textContent = text;
-  return div.innerHTML;
-}
+// ============================================
+// Initialize Dashboard
+// ============================================
 
-// Initial render
-renderTasks();
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize all components
+  animateStats();
+  initializeCharts();
+  loadRecentActivity();
+  
+  // Add subtle hover effects
+  document.querySelectorAll('.stat-card').forEach(card => {
+    card.addEventListener('mouseenter', (e) => {
+      e.currentTarget.style.transform = 'translateY(-4px)';
+    });
+    card.addEventListener('mouseleave', (e) => {
+      e.currentTarget.style.transform = 'translateY(0)';
+    });
+  });
+  
+  console.log('✓ Dashboard initialized');
+  console.log('💡 Try adding dark theme support with CSS custom properties!');
+});