lean-spec 0.2.5-dev.20251124044002 → 0.2.5-dev.20251124050427

package/dist/cli.js

@@ -1,4 +1,4 @@
-import { analyzeCommand, archiveCommand, backfillCommand, boardCommand, checkCommand, compactCommand, createCommand, depsCommand, filesCommand, ganttCommand, initCommand, linkCommand, listCommand, mcpCommand, migrateCommand, openCommand, searchCommand, splitCommand, statsCommand, templatesCommand, timelineCommand, tokensCommand, uiCommand, unlinkCommand, updateCommand, validateCommand, viewCommand } from './chunk-IGNO4GX2.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-YKBICZNR.js';
 import './chunk-LVD7ZAVZ.js';
 import { Command } from 'commander';
 import { readFileSync } from 'fs';
@@ -15,6 +15,7 @@ function registerCommands(program2) {
   program2.addCommand(compactCommand());
   program2.addCommand(createCommand());
   program2.addCommand(depsCommand());
+  program2.addCommand(examplesCommand());
   program2.addCommand(filesCommand());
   program2.addCommand(ganttCommand());
   program2.addCommand(initCommand());
@@ -51,6 +52,7 @@ Command Groups:
     archive <spec>                Move spec to archived/
     backfill [specs...]           Backfill timestamps from git history
     create <name>                 Create new spec
+    examples                      List example projects for tutorials
     init                          Initialize LeanSpec in current directory
     link <spec>                   Add relationships between specs
     migrate <input-path>          Migrate specs from other SDD tools
@@ -91,6 +93,9 @@ Command Groups:
 Examples:
   $ lean-spec init
   $ lean-spec init -y
+  $ lean-spec init --example email-notifications
+  $ lean-spec init --example dashboard-widgets --name my-demo
+  $ lean-spec examples
   $ lean-spec create my-feature --priority high
   $ lean-spec list --status in-progress
   $ lean-spec view 042

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/commands/registry.ts","../src/cli.ts"],"names":["program"],"mappings":";;;;;;;;AAkCO,SAAS,iBAAiBA,QAAAA,EAAwB;AAEvD,EAAAA,QAAAA,CAAQ,UAAA,CAAW,cAAA,EAAgB,CAAA;AACnC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,cAAA,EAAgB,CAAA;AACnC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,eAAA,EAAiB,CAAA;AACpC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,YAAA,EAAc,CAAA;AACjC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,YAAA,EAAc,CAAA;AACjC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,cAAA,EAAgB,CAAA;AACnC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,aAAA,EAAe,CAAA;AAClC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,WAAA,EAAa,CAAA;AAChC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,YAAA,EAAc,CAAA;AACjC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,YAAA,EAAc,CAAA;AACjC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,WAAA,EAAa,CAAA;AAChC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,WAAA,EAAa,CAAA;AAChC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,WAAA,EAAa,CAAA;AAChC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,UAAA,EAAY,CAAA;AAC/B,EAAAA,QAAAA,CAAQ,UAAA,CAAW,cAAA,EAAgB,CAAA;AACnC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,WAAA,EAAa,CAAA;AAChC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,aAAA,EAAe,CAAA;AAClC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,YAAA,EAAc,CAAA;AACjC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,YAAA,EAAc,CAAA;AACjC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,gBAAA,EAAkB,CAAA;AACrC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,eAAA,EAAiB,CAAA;AACpC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,aAAA,EAAe,CAAA;AAClC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,SAAA,EAAW,CAAA;AAC9B,EAAAA,QAAAA,CAAQ,UAAA,CAAW,aAAA,EAAe,CAAA;AAClC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,aAAA,EAAe,CAAA;AAClC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,eAAA,EAAiB,CAAA;AACpC,EAAAA,QAAAA,CAAQ,UAAA,CAAW,WAAA,EAAa,CAAA;AAClC;;;ACxDA,IAAM,UAAA,GAAa,aAAA,CAAc,MAAA,CAAA,IAAA,CAAY,GAAG,CAAA;AAChD,IAAM,SAAA,GAAY,QAAQ,UAAU,CAAA;AACpC,IAAM,cAAc,IAAA,CAAK,KAAA;AAAA,EACvB,YAAA,CAAa,IAAA,CAAK,SAAA,EAAW,iBAAiB,GAAG,OAAO;AAC1D,CAAA;AAEA,IAAM,OAAA,GAAU,IAAI,OAAA,EAAQ;AAE5B,OAAA,CACG,IAAA,CAAK,WAAW,CAAA,CAChB,WAAA,CAAY,2BAA2B,CAAA,CACvC,OAAA,CAAQ,YAAY,OAAO,CAAA;AAG9B,OAAA,CAAQ,YAAY,OAAA,EAAS;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAkE5B,CAAA;AAGD,gBAAA,CAAiB,OAAO,CAAA;AAGxB,OAAA,CAAQ,KAAA,EAAM","file":"cli.js","sourcesContent":["import { Command } from 'commander';\nimport {\n  analyzeCommand,\n  archiveCommand,\n  backfillCommand,\n  boardCommand,\n  checkCommand,\n  compactCommand,\n  createCommand,\n  depsCommand,\n  filesCommand,\n  ganttCommand,\n  initCommand,\n  linkCommand,\n  listCommand,\n  mcpCommand,\n  migrateCommand,\n  openCommand,\n  searchCommand,\n  splitCommand,\n  statsCommand,\n  templatesCommand,\n  timelineCommand,\n  tokensCommand,\n  uiCommand,\n  unlinkCommand,\n  updateCommand,\n  validateCommand,\n  viewCommand,\n} from './index.js';\n\n/**\n * Register all commands in alphabetical order\n */\nexport function registerCommands(program: Command): void {\n  // Alphabetically sorted command registration\n  program.addCommand(analyzeCommand());\n  program.addCommand(archiveCommand());\n  program.addCommand(backfillCommand());\n  program.addCommand(boardCommand());\n  program.addCommand(checkCommand());\n  program.addCommand(compactCommand());\n  program.addCommand(createCommand());\n  program.addCommand(depsCommand());\n  program.addCommand(filesCommand());\n  program.addCommand(ganttCommand());\n  program.addCommand(initCommand());\n  program.addCommand(linkCommand());\n  program.addCommand(listCommand());\n  program.addCommand(mcpCommand());\n  program.addCommand(migrateCommand());\n  program.addCommand(openCommand());\n  program.addCommand(searchCommand());\n  program.addCommand(splitCommand());\n  program.addCommand(statsCommand());\n  program.addCommand(templatesCommand());\n  program.addCommand(timelineCommand());\n  program.addCommand(tokensCommand());\n  program.addCommand(uiCommand());\n  program.addCommand(unlinkCommand());\n  program.addCommand(updateCommand());\n  program.addCommand(validateCommand());\n  program.addCommand(viewCommand());\n}\n","import { Command } from 'commander';\nimport { readFileSync } from 'fs';\nimport { fileURLToPath } from 'url';\nimport { dirname, join } from 'path';\nimport { registerCommands } from './commands/registry.js';\n\n// Get version from package.json\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\nconst packageJson = JSON.parse(\n  readFileSync(join(__dirname, '../package.json'), 'utf-8')\n);\n\nconst program = new Command();\n\nprogram\n  .name('lean-spec')\n  .description('Manage LeanSpec documents')\n  .version(packageJson.version);\n\n// Add custom help text with grouped commands\nprogram.addHelpText('after', `\nCommand Groups:\n\n  Core Workflow:\n    archive <spec>                Move spec to archived/\n    backfill [specs...]           Backfill timestamps from git history\n    create <name>                 Create new spec\n    init                          Initialize LeanSpec in current directory\n    link <spec>                   Add relationships between specs\n    migrate <input-path>          Migrate specs from other SDD tools\n    unlink <spec>                 Remove relationships between specs\n    update <spec>                 Update spec metadata\n    \n  Discovery & Search:\n    files <spec>                  List files in a spec\n    list                          List all specs\n    open <spec>                   Open spec in editor\n    search <query>                Full-text search with metadata filters\n    view <spec>                   View spec content\n    \n  Project Analytics:\n    board                         Show Kanban-style board view\n    deps <spec>                   Show dependency graph for a spec\n    gantt                         Show timeline with dependencies\n    stats                         Show aggregate statistics\n    timeline                      Show creation/completion over time\n    \n  Quality & Optimization:\n    analyze <spec>                Analyze spec complexity and structure\n    check                         Check for sequence conflicts\n    tokens [spec]                 Count tokens for LLM context management\n    validate [specs...]           Validate specs for quality issues\n    \n  Advanced Editing:\n    compact <spec>                Remove specified line ranges from spec\n    split <spec>                  Split spec into multiple files\n    \n  Configuration:\n    templates                     Manage spec templates\n    \n  Integration:\n    mcp                           Start MCP server for AI assistants\n    ui                            Start local web UI for spec management\n\nExamples:\n  $ lean-spec init\n  $ lean-spec init -y\n  $ lean-spec create my-feature --priority high\n  $ lean-spec list --status in-progress\n  $ lean-spec view 042\n  $ lean-spec link 085 --depends-on 042,035\n  $ lean-spec link 085 --related 082\n  $ lean-spec unlink 085 --depends-on 042\n  $ lean-spec deps 085\n  $ lean-spec backfill --dry-run\n  $ lean-spec migrate ./docs/adr\n  $ lean-spec migrate ./docs/rfcs --with copilot\n  $ lean-spec board --tag backend\n  $ lean-spec search \"authentication\"\n  $ lean-spec validate\n  $ lean-spec tokens 059\n  $ lean-spec analyze 045 --json\n  $ lean-spec split 045 --output README.md:1-150 --output DESIGN.md:151-end\n  $ lean-spec ui\n  $ lean-spec ui --port 3001 --no-open\n  $ lean-spec ui --specs ./docs/specs --dry-run\n`);\n\n// Register all commands (alphabetically ordered)\nregisterCommands(program);\n\n// Parse and execute\nprogram.parse();\n"]}
+{"version":3,"sources":["../src/commands/registry.ts","../src/cli.ts"],"names":["program"],"mappings":"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","file":"cli.js","sourcesContent":["import { Command } from 'commander';\nimport {\n  analyzeCommand,\n  archiveCommand,\n  backfillCommand,\n  boardCommand,\n  checkCommand,\n  compactCommand,\n  createCommand,\n  depsCommand,\n  examplesCommand,\n  filesCommand,\n  ganttCommand,\n  initCommand,\n  linkCommand,\n  listCommand,\n  mcpCommand,\n  migrateCommand,\n  openCommand,\n  searchCommand,\n  splitCommand,\n  statsCommand,\n  templatesCommand,\n  timelineCommand,\n  tokensCommand,\n  uiCommand,\n  unlinkCommand,\n  updateCommand,\n  validateCommand,\n  viewCommand,\n} from './index.js';\n\n/**\n * Register all commands in alphabetical order\n */\nexport function registerCommands(program: Command): void {\n  // Alphabetically sorted command registration\n  program.addCommand(analyzeCommand());\n  program.addCommand(archiveCommand());\n  program.addCommand(backfillCommand());\n  program.addCommand(boardCommand());\n  program.addCommand(checkCommand());\n  program.addCommand(compactCommand());\n  program.addCommand(createCommand());\n  program.addCommand(depsCommand());\n  program.addCommand(examplesCommand());\n  program.addCommand(filesCommand());\n  program.addCommand(ganttCommand());\n  program.addCommand(initCommand());\n  program.addCommand(linkCommand());\n  program.addCommand(listCommand());\n  program.addCommand(mcpCommand());\n  program.addCommand(migrateCommand());\n  program.addCommand(openCommand());\n  program.addCommand(searchCommand());\n  program.addCommand(splitCommand());\n  program.addCommand(statsCommand());\n  program.addCommand(templatesCommand());\n  program.addCommand(timelineCommand());\n  program.addCommand(tokensCommand());\n  program.addCommand(uiCommand());\n  program.addCommand(unlinkCommand());\n  program.addCommand(updateCommand());\n  program.addCommand(validateCommand());\n  program.addCommand(viewCommand());\n}\n","import { Command } from 'commander';\nimport { readFileSync } from 'fs';\nimport { fileURLToPath } from 'url';\nimport { dirname, join } from 'path';\nimport { registerCommands } from './commands/registry.js';\n\n// Get version from package.json\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\nconst packageJson = JSON.parse(\n  readFileSync(join(__dirname, '../package.json'), 'utf-8')\n);\n\nconst program = new Command();\n\nprogram\n  .name('lean-spec')\n  .description('Manage LeanSpec documents')\n  .version(packageJson.version);\n\n// Add custom help text with grouped commands\nprogram.addHelpText('after', `\nCommand Groups:\n\n  Core Workflow:\n    archive <spec>                Move spec to archived/\n    backfill [specs...]           Backfill timestamps from git history\n    create <name>                 Create new spec\n    examples                      List example projects for tutorials\n    init                          Initialize LeanSpec in current directory\n    link <spec>                   Add relationships between specs\n    migrate <input-path>          Migrate specs from other SDD tools\n    unlink <spec>                 Remove relationships between specs\n    update <spec>                 Update spec metadata\n    \n  Discovery & Search:\n    files <spec>                  List files in a spec\n    list                          List all specs\n    open <spec>                   Open spec in editor\n    search <query>                Full-text search with metadata filters\n    view <spec>                   View spec content\n    \n  Project Analytics:\n    board                         Show Kanban-style board view\n    deps <spec>                   Show dependency graph for a spec\n    gantt                         Show timeline with dependencies\n    stats                         Show aggregate statistics\n    timeline                      Show creation/completion over time\n    \n  Quality & Optimization:\n    analyze <spec>                Analyze spec complexity and structure\n    check                         Check for sequence conflicts\n    tokens [spec]                 Count tokens for LLM context management\n    validate [specs...]           Validate specs for quality issues\n    \n  Advanced Editing:\n    compact <spec>                Remove specified line ranges from spec\n    split <spec>                  Split spec into multiple files\n    \n  Configuration:\n    templates                     Manage spec templates\n    \n  Integration:\n    mcp                           Start MCP server for AI assistants\n    ui                            Start local web UI for spec management\n\nExamples:\n  $ lean-spec init\n  $ lean-spec init -y\n  $ lean-spec init --example email-notifications\n  $ lean-spec init --example dashboard-widgets --name my-demo\n  $ lean-spec examples\n  $ lean-spec create my-feature --priority high\n  $ lean-spec list --status in-progress\n  $ lean-spec view 042\n  $ lean-spec link 085 --depends-on 042,035\n  $ lean-spec link 085 --related 082\n  $ lean-spec unlink 085 --depends-on 042\n  $ lean-spec deps 085\n  $ lean-spec backfill --dry-run\n  $ lean-spec migrate ./docs/adr\n  $ lean-spec migrate ./docs/rfcs --with copilot\n  $ lean-spec board --tag backend\n  $ lean-spec search \"authentication\"\n  $ lean-spec validate\n  $ lean-spec tokens 059\n  $ lean-spec analyze 045 --json\n  $ lean-spec split 045 --output README.md:1-150 --output DESIGN.md:151-end\n  $ lean-spec ui\n  $ lean-spec ui --port 3001 --no-open\n  $ lean-spec ui --specs ./docs/specs --dry-run\n`);\n\n// Register all commands (alphabetically ordered)\nregisterCommands(program);\n\n// Parse and execute\nprogram.parse();\n"]}

package/dist/mcp-server.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-export { createMcpServer } from './chunk-IGNO4GX2.js';
+export { createMcpServer } from './chunk-YKBICZNR.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.20251124044002",
+  "version": "0.2.5-dev.20251124050427",
   "description": "Specification-driven development made simple",
   "type": "module",
   "bin": {

package/templates/examples/api-refactor/README.md

@@ -0,0 +1,81 @@
+# API Refactor Demo
+
+> **Tutorial**: [Refactoring with Specs](https://leanspec.dev/docs/tutorials/refactoring-specs)
+
+## Scenario
+
+You're maintaining a Node.js application that started simple but has grown messy. The app integrates with multiple external services (weather API, currency converter, timezone lookup), but all the HTTP logic is tangled together in the main application code.
+
+You want to extract a reusable API client module that:
+- Centralizes HTTP request handling
+- Provides a clean interface for service calls
+- Handles errors consistently
+- Makes the code easier to test and maintain
+
+## What's Here
+
+A monolithic Node.js app with:
+- Weather lookup feature (calls external API)
+- Currency conversion (calls external API)
+- Timezone lookup (calls external API)
+- All HTTP logic mixed into business logic (tight coupling)
+- No error handling abstraction
+- Hard to test individual parts
+
+**Files:**
+- `src/app.js` - Main application with all features
+- `src/services/weatherService.js` - Weather API calls (tightly coupled)
+- `src/services/currencyService.js` - Currency API calls (tightly coupled)
+- `src/services/timezoneService.js` - Timezone API calls (tightly coupled)
+
+## Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Run the app
+npm start
+
+# Try the features:
+# - Weather: Get weather for a city
+# - Currency: Convert between currencies
+# - Timezone: Look up timezone info
+```
+
+## Your Mission
+
+Refactor the HTTP logic into a clean, reusable API client. Follow the tutorial and ask your AI assistant:
+
+> "Help me refactor this app using LeanSpec. I want to extract a reusable API client module that centralizes all the HTTP logic."
+
+The AI will guide you through:
+1. Creating a refactoring spec
+2. Designing the API client interface
+3. Extracting the HTTP logic step by step
+4. Updating services to use the new client
+5. Verifying everything still works
+
+## Current Problems
+
+- **Duplicated code**: Each service reimplements HTTP requests
+- **No error handling**: Errors handled inconsistently
+- **Hard to test**: Can't mock HTTP calls easily
+- **Tight coupling**: Business logic mixed with HTTP details
+- **No retry logic**: Network failures aren't handled
+
+These are perfect opportunities to practice refactoring with specs!
+
+## Expected Result
+
+After refactoring, you should have:
+```
+src/
+  app.js (unchanged interface)
+  client/
+    apiClient.js (new - centralized HTTP logic)
+  services/
+    weatherService.js (simplified - uses apiClient)
+    currencyService.js (simplified - uses apiClient)
+    timezoneService.js (simplified - uses apiClient)
+```

package/templates/examples/api-refactor/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "api-refactor-demo",
+  "version": "1.0.0",
+  "description": "Monolithic Node.js app for LeanSpec Tutorial 3",
+  "type": "module",
+  "scripts": {
+    "start": "node src/app.js",
+    "dev": "node --watch src/app.js"
+  },
+  "keywords": ["leanspec", "tutorial", "demo"],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "node-fetch": "^3.3.2"
+  }
+}

package/templates/examples/api-refactor/src/app.js

@@ -0,0 +1,40 @@
+import { getWeather } from './services/weatherService.js';
+import { convertCurrency } from './services/currencyService.js';
+import { getTimezone } from './services/timezoneService.js';
+
+console.log('=== Multi-Service App Demo ===\n');
+
+// Demo 1: Weather lookup
+console.log('1. Weather Lookup:');
+try {
+  const weather = await getWeather('London');
+  console.log(`   ${weather.city}: ${weather.temp}°C, ${weather.condition}`);
+} catch (error) {
+  console.log(`   Error: ${error.message}`);
+}
+
+console.log('');
+
+// Demo 2: Currency conversion
+console.log('2. Currency Conversion:');
+try {
+  const result = await convertCurrency(100, 'USD', 'EUR');
+  console.log(`   ${result.amount} ${result.from} = ${result.converted} ${result.to}`);
+} catch (error) {
+  console.log(`   Error: ${error.message}`);
+}
+
+console.log('');
+
+// Demo 3: Timezone lookup
+console.log('3. Timezone Lookup:');
+try {
+  const timezone = await getTimezone('America/New_York');
+  console.log(`   ${timezone.name}: ${timezone.offset} (${timezone.abbreviation})`);
+} catch (error) {
+  console.log(`   Error: ${error.message}`);
+}
+
+console.log('');
+console.log('Notice: All services work, but they all duplicate HTTP logic!');
+console.log('Your task: Extract a reusable API client module.');

package/templates/examples/api-refactor/src/services/currencyService.js

@@ -0,0 +1,43 @@
+import fetch from 'node-fetch';
+
+/**
+ * Convert currency
+ * 
+ * PROBLEM: Duplicates HTTP logic from weatherService
+ * - Same fetch boilerplate
+ * - Same error handling pattern
+ * - Same JSON parsing
+ * - Should be using a shared HTTP client!
+ */
+export async function convertCurrency(amount, from, to) {
+  // Mock API endpoint (replace with real API in production)
+  const url = `https://api.exchangerate.host/convert?from=${from}&to=${to}&amount=${amount}`;
+  
+  try {
+    const response = await fetch(url);
+    
+    if (!response.ok) {
+      throw new Error(`Currency API error: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    
+    // Business logic: Transform API response to our format
+    return {
+      amount,
+      from,
+      to,
+      converted: data.result || (amount * 0.85).toFixed(2),
+      rate: data.info?.rate || 0.85,
+    };
+  } catch (error) {
+    // For demo, return mock data on error
+    return {
+      amount,
+      from,
+      to,
+      converted: (amount * 0.85).toFixed(2),
+      rate: 0.85,
+    };
+  }
+}

package/templates/examples/api-refactor/src/services/timezoneService.js

@@ -0,0 +1,41 @@
+import fetch from 'node-fetch';
+
+/**
+ * Get timezone information
+ * 
+ * PROBLEM: Yet another copy of the same HTTP logic!
+ * - Third time we're writing fetch + error handling + JSON parsing
+ * - Violates DRY principle
+ * - Makes testing hard (need to mock fetch in 3 places)
+ * - Changes to HTTP logic need updates in 3 files
+ */
+export async function getTimezone(zone) {
+  // Mock API endpoint (replace with real API in production)
+  const url = `http://worldtimeapi.org/api/timezone/${zone}`;
+  
+  try {
+    const response = await fetch(url);
+    
+    if (!response.ok) {
+      throw new Error(`Timezone API error: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    
+    // Business logic: Transform API response to our format
+    return {
+      name: data.timezone || zone,
+      offset: data.utc_offset || '-05:00',
+      abbreviation: data.abbreviation || 'EST',
+      datetime: data.datetime || new Date().toISOString(),
+    };
+  } catch (error) {
+    // For demo, return mock data on error
+    return {
+      name: zone,
+      offset: '-05:00',
+      abbreviation: 'EST',
+      datetime: new Date().toISOString(),
+    };
+  }
+}

package/templates/examples/api-refactor/src/services/weatherService.js

@@ -0,0 +1,42 @@
+import fetch from 'node-fetch';
+
+/**
+ * Get weather for a city
+ * 
+ * PROBLEM: This function has HTTP logic mixed with business logic
+ * - Manual fetch calls
+ * - Manual error handling
+ * - Manual JSON parsing
+ * - No retry logic
+ * - Hard to test (can't mock HTTP)
+ */
+export async function getWeather(city) {
+  // Mock API endpoint (replace with real API in production)
+  const url = `https://api.weatherapi.com/v1/current.json?key=mock&q=${city}`;
+  
+  try {
+    const response = await fetch(url);
+    
+    if (!response.ok) {
+      throw new Error(`Weather API error: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    
+    // Business logic: Transform API response to our format
+    return {
+      city: data.location?.name || city,
+      temp: data.current?.temp_c || Math.floor(Math.random() * 30),
+      condition: data.current?.condition?.text || 'Sunny',
+      humidity: data.current?.humidity || Math.floor(Math.random() * 100),
+    };
+  } catch (error) {
+    // For demo, return mock data on error
+    return {
+      city,
+      temp: Math.floor(Math.random() * 30),
+      condition: 'Sunny (mock data)',
+      humidity: Math.floor(Math.random() * 100),
+    };
+  }
+}

package/templates/examples/dashboard-widgets/README.md

@@ -0,0 +1,70 @@
+# Dashboard Widgets Demo
+
+> **Tutorial**: [Managing Multiple Features](https://leanspec.dev/docs/tutorials/multiple-features)
+
+## Scenario
+
+You're building an analytics dashboard for a SaaS product. The dashboard has some basic widgets (stats cards and a simple chart), but the product team wants to add three new widgets:
+- **Recent Activity Feed** - Show latest user actions
+- **Performance Metrics** - Display system health indicators  
+- **Quick Actions Panel** - Common shortcuts for users
+
+Each widget needs to be designed, implemented, and integrated into the dashboard grid.
+
+## What's Here
+
+A minimal React + Vite dashboard with:
+- Grid layout for widgets
+- Two existing widgets (Stats, Chart)
+- Reusable widget wrapper component
+- Mock data utilities
+
+**Files:**
+- `src/App.jsx` - Main dashboard component
+- `src/components/Dashboard.jsx` - Dashboard grid layout
+- `src/components/widgets/` - Existing widgets
+- `src/utils/mockData.js` - Sample data generator
+- `index.html` - Entry point
+
+## Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Start dev server
+npm run dev
+
+# Open http://localhost:5173 in your browser
+```
+
+## Your Mission
+
+Add three new widgets to the dashboard. Follow the tutorial and ask your AI assistant:
+
+> "Help me add three new widgets to this dashboard using LeanSpec: Recent Activity Feed, Performance Metrics, and Quick Actions Panel."
+
+The AI will guide you through:
+1. Creating specs for each widget (or one unified spec)
+2. Designing the widget interfaces
+3. Implementing components
+4. Managing dependencies between widgets
+5. Testing the integrated dashboard
+
+## Current Structure
+
+```
+Dashboard
+├── StatsWidget (implemented)
+├── ChartWidget (implemented)
+├── ActivityWidget (TODO)
+├── MetricsWidget (TODO)
+└── ActionsWidget (TODO)
+```
+
+## Tips
+
+- Each widget is self-contained with its own component
+- Widgets use the `WidgetWrapper` component for consistent styling
+- Mock data is in `utils/mockData.js` - add new generators as needed
+- Consider which widgets share dependencies (e.g., both might need user data)

package/templates/examples/dashboard-widgets/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dashboard Widgets Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/examples/dashboard-widgets/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "dashboard-widgets-demo",
+  "version": "1.0.0",
+  "description": "React Dashboard for LeanSpec Tutorial 2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "keywords": ["leanspec", "tutorial", "demo"],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.0.0"
+  }
+}

package/templates/examples/dashboard-widgets/src/App.css

@@ -0,0 +1,20 @@
+.app {
+  padding: 20px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+header {
+  margin-bottom: 30px;
+}
+
+header h1 {
+  margin: 0 0 5px 0;
+  color: #333;
+}
+
+header p {
+  margin: 0;
+  color: #666;
+  font-size: 14px;
+}

package/templates/examples/dashboard-widgets/src/App.jsx

@@ -0,0 +1,16 @@
+import Dashboard from './components/Dashboard';
+import './App.css';
+
+function App() {
+  return (
+    <div className="app">
+      <header>
+        <h1>Analytics Dashboard</h1>
+        <p>Demo for LeanSpec Tutorial 2</p>
+      </header>
+      <Dashboard />
+    </div>
+  );
+}
+
+export default App;

package/templates/examples/dashboard-widgets/src/components/Dashboard.css

@@ -0,0 +1,17 @@
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+@media (min-width: 768px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1200px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}

package/templates/examples/dashboard-widgets/src/components/Dashboard.jsx

@@ -0,0 +1,15 @@
+import StatsWidget from './widgets/StatsWidget';
+import ChartWidget from './widgets/ChartWidget';
+import './Dashboard.css';
+
+function Dashboard() {
+  return (
+    <div className="dashboard-grid">
+      <StatsWidget />
+      <ChartWidget />
+      {/* TODO: Add new widgets here */}
+    </div>
+  );
+}
+
+export default Dashboard;

package/templates/examples/dashboard-widgets/src/components/WidgetWrapper.css

@@ -0,0 +1,23 @@
+.widget {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
+.widget-header {
+  padding: 15px 20px;
+  border-bottom: 1px solid #eee;
+  background: #fafafa;
+}
+
+.widget-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.widget-body {
+  padding: 20px;
+}

package/templates/examples/dashboard-widgets/src/components/WidgetWrapper.jsx

@@ -0,0 +1,16 @@
+import './WidgetWrapper.css';
+
+function WidgetWrapper({ title, children }) {
+  return (
+    <div className="widget">
+      <div className="widget-header">
+        <h3>{title}</h3>
+      </div>
+      <div className="widget-body">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default WidgetWrapper;

package/templates/examples/dashboard-widgets/src/components/widgets/ChartWidget.css

@@ -0,0 +1,33 @@
+.chart {
+  height: 200px;
+}
+
+.chart-bars {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-around;
+  height: 100%;
+  gap: 8px;
+}
+
+.chart-bar-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+}
+
+.chart-bar {
+  width: 100%;
+  background: linear-gradient(to top, #2563eb, #60a5fa);
+  border-radius: 4px 4px 0 0;
+  transition: height 0.3s ease;
+  min-height: 4px;
+}
+
+.chart-label {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #666;
+}

package/templates/examples/dashboard-widgets/src/components/widgets/ChartWidget.jsx

@@ -0,0 +1,28 @@
+import WidgetWrapper from '../WidgetWrapper';
+import { getChartData } from '../../utils/mockData';
+import './ChartWidget.css';
+
+function ChartWidget() {
+  const data = getChartData();
+  const maxValue = Math.max(...data.map(d => d.value));
+  
+  return (
+    <WidgetWrapper title="Activity Trend">
+      <div className="chart">
+        <div className="chart-bars">
+          {data.map((item, index) => (
+            <div key={index} className="chart-bar-container">
+              <div 
+                className="chart-bar"
+                style={{ height: `${(item.value / maxValue) * 100}%` }}
+              />
+              <div className="chart-label">{item.label}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </WidgetWrapper>
+  );
+}
+
+export default ChartWidget;

package/templates/examples/dashboard-widgets/src/components/widgets/StatsWidget.css

@@ -0,0 +1,24 @@
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 10px;
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: bold;
+  color: #2563eb;
+  margin-bottom: 5px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}