nest-scramble 1.4.9 → 1.5.0

package/README.md

@@ -149,7 +149,7 @@ You'll see a beautiful dashboard in your terminal:
 
 Then open your browser:
 
-- **📖 Interactive API Docs (Scalar UI)**: http://localhost:3000/docs
+- **📖 Professional API Docs (Modal UI)**: http://localhost:3000/docs
 - **📄 OpenAPI JSON Spec**: http://localhost:3000/docs-json
 - **🎭 Mock Endpoints**: http://localhost:3000/scramble-mock/*
 
@@ -164,20 +164,25 @@ Then open your browser:
 
 ```typescript
 NestScrambleModule.forRoot({
+  // Documentation path served by the module
+  path: '/docs',                        // default: '/docs'
+
   // Source directory to scan for controllers
   sourcePath: 'src',                    // default: 'src'
 
   // API base URL for OpenAPI spec
   baseUrl: 'http://localhost:3000',     // default: 'http://localhost:3000'
 
-  // Enable live mocking middleware
+  // Enable live mocking endpoints under /scramble-mock/*
   enableMock: true,                     // default: true
 
-  // Auto-export Postman collection on startup
-  autoExportPostman: false,             // default: false
+  // Auto-export a Postman collection when generating
+  autoExportPostman: true,
+  postmanOutputPath: 'collection.json',
 
-  // Postman collection output path
-  postmanOutputPath: 'collection.json', // default: 'collection.json'
+  // API metadata
+  apiTitle: 'My API',                   // API documentation title
+  apiVersion: '1.0.0',                  // API version number
 })
 ```
 
@@ -185,11 +190,14 @@ NestScrambleModule.forRoot({
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
+| `path` | `string` | `'/docs'` | Documentation route path |
 | `sourcePath` | `string` | `'src'` | Directory where your NestJS controllers are located |
 | `baseUrl` | `string` | `'http://localhost:3000'` | Base URL for your API (used in OpenAPI spec) |
 | `enableMock` | `boolean` | `true` | Enable `/scramble-mock/*` endpoints for testing |
 | `autoExportPostman` | `boolean` | `false` | Automatically generate Postman collection file |
 | `postmanOutputPath` | `string` | `'collection.json'` | Output path for Postman collection |
+| `apiTitle` | `string` | Auto-detected | API documentation title |
+| `apiVersion` | `string` | Auto-detected | API version number |
 
 ## 🎭 Live Mocking Guide
 
@@ -346,94 +354,71 @@ jobs:
 
 ## 🎨 Documentation UI - Professional API Dashboard
 
-### ✨ Elite Dashboard Design (NEW!)
+### ✨ Professional Dashboard Design (NEW!)
 
-Nest-Scramble features a **professional, high-end API dashboard** inspired by Stripe and Postman, where each request is displayed on a separate page for focused documentation!
+Nest-Scramble features a **modern, professional API dashboard** where each request is displayed on a separate page with focused documentation and beautiful interactions!
 
 **🚀 Key Features:**
-- **Sidebar-Only Navigation** - Fixed 320px sidebar with controller grouping
-- **Single-Request Per Page** - Each endpoint gets its own dedicated view
-- **Three-Column Elite Layout** - Information | Request Editor | Test Panel
-- **Deep Black Background** - Professional `#000000` and `#0B0E14` theme
-- **Cyber-Cyan Accents** - `#00f2ff` for active states and primary actions
-- **Vibrant HTTP Method Badges** - Color-coded with glow effects:
-  - GET = Royal Blue (`#3B82F6`)
-  - POST = Emerald Green (`#10B981`)
-  - PUT = Amber Orange (`#F59E0B`)
-  - PATCH = Violet Purple (`#8B5CF6`)
-  - DELETE = Vibrant Red (`#EF4444`)
-- **Glassmorphism Effects** - Backdrop blur on request/response panels
-- **40px Spacious Padding** - Premium whitespace throughout
-- **Terminal-Style Response** - Black box with green text for API responses
-- **High-Contrast Labels** - Required, Type, and Default badges
-- **Custom Scrollbars** - Gradient cyan-to-purple styling
-- **Plus Jakarta Sans Typography** - Modern, professional font family
-- **Powered by Badge** - Animated branding with pulse effect
-
-### 📐 Three-Column Elite Interface
-
-The dashboard uses a professional three-column layout for each endpoint:
-
-**Column 1 (Left) - Information Panel:**
-- Endpoint title with large, bold typography
-- HTTP method badge with vibrant colors and glow
-- Endpoint description and documentation
-- Clean parameters table with high-contrast labels
-- Type information and required field indicators
-
-**Column 2 (Middle) - Request Body Editor:**
-- Glassmorphism design with backdrop blur
-- Auto-filled mock data examples
-- JSON editor with syntax highlighting
-- Copy-to-clipboard functionality
-- Real-time validation
-
-**Column 3 (Right) - Test Request Panel:**
-- Enhanced glassmorphism with cyan border glow
-- Large "Send Request" button with gradient animation
-- Terminal-style response viewer (black background, green text)
-- Status code indicators
-- Response headers display
-
-### 🎨 Theme Customization
-
-**Futuristic Theme (Default):**
-```typescript
-NestScrambleModule.forRoot({
-  theme: 'futuristic',           // Professional dark dashboard
-  primaryColor: '#00f2ff',       // Cyber-Cyan (default)
-  customDomainIcon: '/logo.png', // Your brand favicon
-  apiTitle: 'My Awesome API',
-})
-```
-
-**Classic Theme:**
-```typescript
-NestScrambleModule.forRoot({
-  theme: 'classic',              // Clean, light, professional
-  primaryColor: '#0066cc',       // Corporate blue
-  apiTitle: 'Enterprise API',
-})
-```
-
-**Custom Color Branding:**
-```typescript
-// One line changes the entire UI color scheme!
-NestScrambleModule.forRoot({
-  primaryColor: '#a855f7',       // Electric Purple
-  // or '#10b981' for Emerald Green
-  // or '#f59e0b' for Amber Orange
-  // or any hex color you want!
-})
-```
+- **Separate Pages Per Endpoint** - Each request opens in its own modal with dedicated view
+- **Smart Search & Filtering** - Real-time search across all endpoints
+- **Controller Grouping** - Endpoints organized by tags with counters
+- **Gradient Backgrounds** - Dynamic colors based on your brand
+- **Smooth Animations** - Professional transitions and hover effects
+- **Color-Coded HTTP Methods** - Visual distinction for different request types:
+  - GET = Green (`#c6f6d5`)
+  - POST = Blue (`#bee3f8`)
+  - PUT = Orange (`#feebc8`)
+  - PATCH = Purple (`#e9d8fd`)
+  - DELETE = Red (`#fed7d7`)
+- **Professional Typography** - Clean, readable fonts with proper hierarchy
+- **Responsive Design** - Works perfectly on desktop, tablet, and mobile
+- **Modal-Based Navigation** - Clean overlay system for endpoint details
+- **Parameter Documentation** - Clear display of request parameters and types
+- **Response Examples** - Formatted JSON responses with syntax highlighting
+
+### 📐 Single-Request Interface
+
+Each endpoint gets its own dedicated modal view with organized sections:
+
+**Header Section:**
+- Large HTTP method badge with color coding
+- Full endpoint path in monospace font
+- Summary and description of the endpoint
+- Close button with rotation animation
+
+**Information Sections:**
+- **Description** - Clear documentation of what the endpoint does
+- **Parameters** - Detailed breakdown of path, query, and body parameters
+- **Request Body** - JSON schema examples with syntax highlighting
+- **Responses** - All possible response codes with examples
+
+**Interactive Features:**
+- Click any endpoint card to open detailed view
+- Search across all endpoints in real-time
+- Smooth transitions and micro-interactions
+- Click outside modal or press X to close
+- Keyboard-friendly navigation
+
+### 🎨 Professional Design Features
+
+**Current Design System:**
+- **Beautiful Gradient Background** - Purple to blue gradient (`#667eea` to `#764ba2`)
+- **Modal-Based Navigation** - Each endpoint opens in its own modal overlay
+- **Smart Search Functionality** - Real-time filtering of endpoints
+- **Controller Grouping** - Endpoints organized by tags with counters
+- **Responsive Design** - Works perfectly on all devices
+- **Smooth Animations** - Professional transitions and hover effects
 
 ### 🎭 UI Configuration Options
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
-| `theme` | `'classic' \| 'futuristic'` | `'futuristic'` | UI theme selection |
-| `primaryColor` | `string` | `'#00f2ff'` | Primary accent color (hex) |
-| `customDomainIcon` | `string` | `''` | Custom favicon URL |
+| `path` | `string` | `'/docs'` | Documentation route path |
+| `sourcePath` | `string` | `'src'` | Directory where your NestJS controllers are located |
+| `baseUrl` | `string` | `'http://localhost:3000'` | Base URL for your API (used in OpenAPI spec) |
+| `enableMock` | `boolean` | `true` | Enable `/scramble-mock/*` endpoints for testing |
+| `autoExportPostman` | `boolean` | `false` | Automatically generate Postman collection file |
+| `postmanOutputPath` | `string` | `'collection.json'` | Output path for Postman collection |
 | `apiTitle` | `string` | Auto-detected | API documentation title |
 | `apiVersion` | `string` | Auto-detected | API version number |
 
@@ -441,16 +426,15 @@ NestScrambleModule.forRoot({
 
 When you visit `http://localhost:3000/docs`, you'll experience:
 
-- 🎯 **Single-Request Navigation** - Each endpoint on its own dedicated page
-- 📂 **Controller Grouping** - Organized sidebar with uppercase section headers
-- 🎨 **Active State Glow** - Cyber-cyan highlight for selected endpoints
-- 📝 **Auto-generated Examples** - Pre-filled mock data in request editor
-- 🧪 **Live Testing** - Send requests directly from the three-column interface
-- 💻 **Terminal Response** - Black box with green text for authentic feel
-- 🔍 **Quick Search** - Press 'K' to search endpoints instantly
-- 📱 **Responsive Design** - Adapts to mobile, tablet, and desktop
-- ✨ **Animated Branding** - Pulsing "Powered by Nest-Scramble" badge
-- 🎭 **Developer Easter Eggs** - Check your browser console for surprises!
+- 🎯 **Modal-Based Navigation** - Each endpoint opens in its own modal
+- 📂 **Smart Grouping** - Endpoints organized by tags with counters
+- 🔍 **Real-Time Search** - Instant filtering as you type
+- 🎨 **Beautiful Gradients** - Professional purple to blue background
+- 📱 **Responsive Design** - Perfect on desktop, tablet, and mobile
+- ✨ **Smooth Animations** - Professional transitions and hover effects
+- 📋 **Parameter Details** - Clear documentation of request parameters
+- 💻 **Code Examples** - Formatted JSON with syntax highlighting
+- 🔄 **Interactive Elements** - Click to explore, search to filter
 
 ### 🖥️ Terminal Dashboard
 
@@ -487,7 +471,7 @@ For complete UI customization guide, see:
 
 | Endpoint | Description |
 |----------|-------------|
-| `GET /docs` | Interactive Scalar UI documentation |
+| `GET /docs` | Professional API documentation with modal-based endpoint pages |
 | `GET /docs-json` | OpenAPI 3.0 JSON specification |
 | `GET /docs/json` | Legacy endpoint (same as above) |
 | `GET /docs/spec` | OpenAPI spec as JSON response |

package/dist/controllers/DocsController.js

@@ -60,398 +60,398 @@ let DocsController = class DocsController {
     }
     generateMainPage(endpoints) {
         const groupedEndpoints = this.groupByTag(endpoints);
-        return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${this.openApiSpec?.info?.title || 'API Documentation'}</title>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      min-height: 100vh;
-      color: #1a202c;
-    }
-    
-    .container {
-      max-width: 1400px;
-      margin: 0 auto;
-      padding: 2rem;
-    }
-    
-    .header {
-      text-align: center;
-      color: white;
-      margin-bottom: 3rem;
-      animation: fadeInDown 0.6s ease-out;
-    }
-    
-    .header h1 {
-      font-size: 2.5rem;
-      font-weight: 700;
-      margin-bottom: 0.5rem;
-      text-shadow: 0 2px 10px rgba(0,0,0,0.2);
-    }
-    
-    .header p {
-      font-size: 1.1rem;
-      opacity: 0.95;
-    }
-    
-    .search-box {
-      max-width: 600px;
-      margin: 0 auto 3rem;
-      animation: fadeIn 0.8s ease-out;
-    }
-    
-    .search-input {
-      width: 100%;
-      padding: 1rem 1.5rem;
-      font-size: 1rem;
-      border: none;
-      border-radius: 12px;
-      background: white;
-      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-      transition: all 0.3s ease;
-    }
-    
-    .search-input:focus {
-      outline: none;
-      box-shadow: 0 15px 40px rgba(0,0,0,0.3);
-      transform: translateY(-2px);
-    }
-    
-    .endpoints-grid {
-      display: grid;
-      gap: 1.5rem;
-      animation: fadeInUp 0.8s ease-out;
-    }
-    
-    .tag-section {
-      background: white;
-      border-radius: 16px;
-      padding: 2rem;
-      box-shadow: 0 10px 30px rgba(0,0,0,0.15);
-      transition: all 0.3s ease;
-    }
-    
-    .tag-section:hover {
-      box-shadow: 0 15px 40px rgba(0,0,0,0.2);
-      transform: translateY(-4px);
-    }
-    
-    .tag-title {
-      font-size: 1.5rem;
-      font-weight: 600;
-      margin-bottom: 1.5rem;
-      color: #2d3748;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-    
-    .tag-badge {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
-      padding: 0.25rem 0.75rem;
-      border-radius: 20px;
-      font-size: 0.875rem;
-      font-weight: 500;
-    }
-    
-    .endpoint-list {
-      display: grid;
-      gap: 1rem;
-    }
-    
-    .endpoint-card {
-      background: #f7fafc;
-      border-radius: 12px;
-      padding: 1.25rem;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      border: 2px solid transparent;
-      text-decoration: none;
-      display: block;
-    }
-    
-    .endpoint-card:hover {
-      background: white;
-      border-color: #667eea;
-      transform: translateX(8px);
-      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
-    }
-    
-    .endpoint-header {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      margin-bottom: 0.75rem;
-    }
-    
-    .method-badge {
-      padding: 0.375rem 0.875rem;
-      border-radius: 6px;
-      font-weight: 600;
-      font-size: 0.875rem;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      min-width: 70px;
-      text-align: center;
-    }
-    
-    .method-get { background: #c6f6d5; color: #22543d; }
-    .method-post { background: #bee3f8; color: #2c5282; }
-    .method-put { background: #feebc8; color: #7c2d12; }
-    .method-patch { background: #e9d8fd; color: #44337a; }
-    .method-delete { background: #fed7d7; color: #742a2a; }
-    
-    .endpoint-path {
-      font-family: 'Courier New', monospace;
-      font-size: 1rem;
-      color: #2d3748;
-      font-weight: 500;
-      flex: 1;
-    }
-    
-    .endpoint-summary {
-      color: #718096;
-      font-size: 0.95rem;
-      line-height: 1.5;
-    }
-    
-    .endpoint-detail {
-      display: none;
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0,0,0,0.5);
-      z-index: 1000;
-      overflow-y: auto;
-      animation: fadeIn 0.3s ease-out;
-    }
-    
-    .endpoint-detail.active {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 2rem;
-    }
-    
-    .detail-content {
-      background: white;
-      border-radius: 16px;
-      max-width: 900px;
-      width: 100%;
-      max-height: 90vh;
-      overflow-y: auto;
-      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-      animation: slideUp 0.4s ease-out;
-    }
-    
-    .detail-header {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
-      padding: 2rem;
-      border-radius: 16px 16px 0 0;
-      position: sticky;
-      top: 0;
-      z-index: 10;
-    }
-    
-    .detail-close {
-      float: right;
-      background: rgba(255,255,255,0.2);
-      border: none;
-      color: white;
-      font-size: 1.5rem;
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    
-    .detail-close:hover {
-      background: rgba(255,255,255,0.3);
-      transform: rotate(90deg);
-    }
-    
-    .detail-body {
-      padding: 2rem;
-    }
-    
-    .section {
-      margin-bottom: 2rem;
-    }
-    
-    .section-title {
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: #2d3748;
-      margin-bottom: 1rem;
-      padding-bottom: 0.5rem;
-      border-bottom: 2px solid #e2e8f0;
-    }
-    
-    .param-item, .response-item {
-      background: #f7fafc;
-      padding: 1rem;
-      border-radius: 8px;
-      margin-bottom: 0.75rem;
-      border-left: 3px solid #667eea;
-    }
-    
-    .param-name, .response-code {
-      font-weight: 600;
-      color: #2d3748;
-      font-family: 'Courier New', monospace;
-    }
-    
-    .param-type {
-      color: #667eea;
-      font-size: 0.875rem;
-      font-weight: 500;
-      margin-left: 0.5rem;
-    }
-    
-    .param-desc {
-      color: #718096;
-      margin-top: 0.5rem;
-      font-size: 0.95rem;
-    }
-    
-    .code-block {
-      background: #1a202c;
-      color: #e2e8f0;
-      padding: 1.5rem;
-      border-radius: 8px;
-      overflow-x: auto;
-      font-family: 'Courier New', monospace;
-      font-size: 0.9rem;
-      line-height: 1.6;
-    }
-    
-    .no-results {
-      text-align: center;
-      padding: 3rem;
-      color: white;
-      font-size: 1.1rem;
-    }
-    
-    @keyframes fadeIn {
-      from { opacity: 0; }
-      to { opacity: 1; }
-    }
-    
-    @keyframes fadeInDown {
-      from { opacity: 0; transform: translateY(-20px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    
-    @keyframes fadeInUp {
-      from { opacity: 0; transform: translateY(20px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    
-    @keyframes slideUp {
-      from { opacity: 0; transform: translateY(40px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    
-    @media (max-width: 768px) {
-      .container { padding: 1rem; }
-      .header h1 { font-size: 2rem; }
-      .detail-content { margin: 1rem; }
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <div class="header">
-      <h1>${this.openApiSpec?.info?.title || 'API Documentation'}</h1>
-      <p>${this.openApiSpec?.info?.description || ''} ${this.openApiSpec?.info?.version ? `v${this.openApiSpec.info.version}` : ''}</p>
-    </div>
-    
-    <div class="search-box">
-      <input type="text" class="search-input" id="searchInput" placeholder="🔍 Search endpoints...">
-    </div>
-    
-    <div class="endpoints-grid" id="endpointsGrid">
-      ${this.renderGroupedEndpoints(groupedEndpoints)}
-    </div>
-    
-    <div class="no-results" id="noResults" style="display: none;">
-      No endpoints found matching your search.
-    </div>
-  </div>
-  
-  ${this.renderEndpointModals(endpoints)}
-  
-  <script>
-    const searchInput = document.getElementById('searchInput');
-    const endpointsGrid = document.getElementById('endpointsGrid');
-    const noResults = document.getElementById('noResults');
-    
-    searchInput.addEventListener('input', (e) => {
-      const query = e.target.value.toLowerCase();
-      const sections = endpointsGrid.querySelectorAll('.tag-section');
-      let hasResults = false;
-      
-      sections.forEach(section => {
-        const cards = section.querySelectorAll('.endpoint-card');
-        let sectionHasResults = false;
-        
-        cards.forEach(card => {
-          const text = card.textContent.toLowerCase();
-          if (text.includes(query)) {
-            card.style.display = 'block';
-            sectionHasResults = true;
-            hasResults = true;
-          } else {
-            card.style.display = 'none';
-          }
-        });
-        
-        section.style.display = sectionHasResults ? 'block' : 'none';
-      });
-      
-      noResults.style.display = hasResults ? 'none' : 'block';
-      endpointsGrid.style.display = hasResults ? 'grid' : 'none';
-    });
-    
-    function openEndpoint(id) {
-      document.getElementById('detail-' + id).classList.add('active');
-      document.body.style.overflow = 'hidden';
-    }
-    
-    function closeEndpoint(id) {
-      document.getElementById('detail-' + id).classList.remove('active');
-      document.body.style.overflow = 'auto';
-    }
-    
-    document.querySelectorAll('.endpoint-detail').forEach(modal => {
-      modal.addEventListener('click', (e) => {
-        if (e.target === modal) {
-          modal.classList.remove('active');
-          document.body.style.overflow = 'auto';
-        }
-      });
-    });
-  </script>
-</body>
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${this.openApiSpec?.info?.title || 'API Documentation'}</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      color: #1a202c;
+    }
+    
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+    
+    .header {
+      text-align: center;
+      color: white;
+      margin-bottom: 3rem;
+      animation: fadeInDown 0.6s ease-out;
+    }
+    
+    .header h1 {
+      font-size: 2.5rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+      text-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    }
+    
+    .header p {
+      font-size: 1.1rem;
+      opacity: 0.95;
+    }
+    
+    .search-box {
+      max-width: 600px;
+      margin: 0 auto 3rem;
+      animation: fadeIn 0.8s ease-out;
+    }
+    
+    .search-input {
+      width: 100%;
+      padding: 1rem 1.5rem;
+      font-size: 1rem;
+      border: none;
+      border-radius: 12px;
+      background: white;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+      transition: all 0.3s ease;
+    }
+    
+    .search-input:focus {
+      outline: none;
+      box-shadow: 0 15px 40px rgba(0,0,0,0.3);
+      transform: translateY(-2px);
+    }
+    
+    .endpoints-grid {
+      display: grid;
+      gap: 1.5rem;
+      animation: fadeInUp 0.8s ease-out;
+    }
+    
+    .tag-section {
+      background: white;
+      border-radius: 16px;
+      padding: 2rem;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+      transition: all 0.3s ease;
+    }
+    
+    .tag-section:hover {
+      box-shadow: 0 15px 40px rgba(0,0,0,0.2);
+      transform: translateY(-4px);
+    }
+    
+    .tag-title {
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin-bottom: 1.5rem;
+      color: #2d3748;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    
+    .tag-badge {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      padding: 0.25rem 0.75rem;
+      border-radius: 20px;
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+    
+    .endpoint-list {
+      display: grid;
+      gap: 1rem;
+    }
+    
+    .endpoint-card {
+      background: #f7fafc;
+      border-radius: 12px;
+      padding: 1.25rem;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      border: 2px solid transparent;
+      text-decoration: none;
+      display: block;
+    }
+    
+    .endpoint-card:hover {
+      background: white;
+      border-color: #667eea;
+      transform: translateX(8px);
+      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+    }
+    
+    .endpoint-header {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin-bottom: 0.75rem;
+    }
+    
+    .method-badge {
+      padding: 0.375rem 0.875rem;
+      border-radius: 6px;
+      font-weight: 600;
+      font-size: 0.875rem;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      min-width: 70px;
+      text-align: center;
+    }
+    
+    .method-get { background: #c6f6d5; color: #22543d; }
+    .method-post { background: #bee3f8; color: #2c5282; }
+    .method-put { background: #feebc8; color: #7c2d12; }
+    .method-patch { background: #e9d8fd; color: #44337a; }
+    .method-delete { background: #fed7d7; color: #742a2a; }
+    
+    .endpoint-path {
+      font-family: 'Courier New', monospace;
+      font-size: 1rem;
+      color: #2d3748;
+      font-weight: 500;
+      flex: 1;
+    }
+    
+    .endpoint-summary {
+      color: #718096;
+      font-size: 0.95rem;
+      line-height: 1.5;
+    }
+    
+    .endpoint-detail {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0,0,0,0.5);
+      z-index: 1000;
+      overflow-y: auto;
+      animation: fadeIn 0.3s ease-out;
+    }
+    
+    .endpoint-detail.active {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+    }
+    
+    .detail-content {
+      background: white;
+      border-radius: 16px;
+      max-width: 900px;
+      width: 100%;
+      max-height: 90vh;
+      overflow-y: auto;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+      animation: slideUp 0.4s ease-out;
+    }
+    
+    .detail-header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      padding: 2rem;
+      border-radius: 16px 16px 0 0;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+    }
+    
+    .detail-close {
+      float: right;
+      background: rgba(255,255,255,0.2);
+      border: none;
+      color: white;
+      font-size: 1.5rem;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .detail-close:hover {
+      background: rgba(255,255,255,0.3);
+      transform: rotate(90deg);
+    }
+    
+    .detail-body {
+      padding: 2rem;
+    }
+    
+    .section {
+      margin-bottom: 2rem;
+    }
+    
+    .section-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: #2d3748;
+      margin-bottom: 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 2px solid #e2e8f0;
+    }
+    
+    .param-item, .response-item {
+      background: #f7fafc;
+      padding: 1rem;
+      border-radius: 8px;
+      margin-bottom: 0.75rem;
+      border-left: 3px solid #667eea;
+    }
+    
+    .param-name, .response-code {
+      font-weight: 600;
+      color: #2d3748;
+      font-family: 'Courier New', monospace;
+    }
+    
+    .param-type {
+      color: #667eea;
+      font-size: 0.875rem;
+      font-weight: 500;
+      margin-left: 0.5rem;
+    }
+    
+    .param-desc {
+      color: #718096;
+      margin-top: 0.5rem;
+      font-size: 0.95rem;
+    }
+    
+    .code-block {
+      background: #1a202c;
+      color: #e2e8f0;
+      padding: 1.5rem;
+      border-radius: 8px;
+      overflow-x: auto;
+      font-family: 'Courier New', monospace;
+      font-size: 0.9rem;
+      line-height: 1.6;
+    }
+    
+    .no-results {
+      text-align: center;
+      padding: 3rem;
+      color: white;
+      font-size: 1.1rem;
+    }
+    
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    
+    @keyframes fadeInDown {
+      from { opacity: 0; transform: translateY(-20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    
+    @keyframes slideUp {
+      from { opacity: 0; transform: translateY(40px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    
+    @media (max-width: 768px) {
+      .container { padding: 1rem; }
+      .header h1 { font-size: 2rem; }
+      .detail-content { margin: 1rem; }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1>${this.openApiSpec?.info?.title || 'API Documentation'}</h1>
+      <p>${this.openApiSpec?.info?.description || ''} ${this.openApiSpec?.info?.version ? `v${this.openApiSpec.info.version}` : ''}</p>
+    </div>
+    
+    <div class="search-box">
+      <input type="text" class="search-input" id="searchInput" placeholder="🔍 Search endpoints...">
+    </div>
+    
+    <div class="endpoints-grid" id="endpointsGrid">
+      ${this.renderGroupedEndpoints(groupedEndpoints)}
+    </div>
+    
+    <div class="no-results" id="noResults" style="display: none;">
+      No endpoints found matching your search.
+    </div>
+  </div>
+  
+  ${this.renderEndpointModals(endpoints)}
+  
+  <script>
+    const searchInput = document.getElementById('searchInput');
+    const endpointsGrid = document.getElementById('endpointsGrid');
+    const noResults = document.getElementById('noResults');
+    
+    searchInput.addEventListener('input', (e) => {
+      const query = e.target.value.toLowerCase();
+      const sections = endpointsGrid.querySelectorAll('.tag-section');
+      let hasResults = false;
+      
+      sections.forEach(section => {
+        const cards = section.querySelectorAll('.endpoint-card');
+        let sectionHasResults = false;
+        
+        cards.forEach(card => {
+          const text = card.textContent.toLowerCase();
+          if (text.includes(query)) {
+            card.style.display = 'block';
+            sectionHasResults = true;
+            hasResults = true;
+          } else {
+            card.style.display = 'none';
+          }
+        });
+        
+        section.style.display = sectionHasResults ? 'block' : 'none';
+      });
+      
+      noResults.style.display = hasResults ? 'none' : 'block';
+      endpointsGrid.style.display = hasResults ? 'grid' : 'none';
+    });
+    
+    function openEndpoint(id) {
+      document.getElementById('detail-' + id).classList.add('active');
+      document.body.style.overflow = 'hidden';
+    }
+    
+    function closeEndpoint(id) {
+      document.getElementById('detail-' + id).classList.remove('active');
+      document.body.style.overflow = 'auto';
+    }
+    
+    document.querySelectorAll('.endpoint-detail').forEach(modal => {
+      modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+          modal.classList.remove('active');
+          document.body.style.overflow = 'auto';
+        }
+      });
+    });
+  </script>
+</body>
 </html>`;
     }
     groupByTag(endpoints) {
@@ -466,90 +466,90 @@ let DocsController = class DocsController {
         return grouped;
     }
     renderGroupedEndpoints(grouped) {
-        return Object.entries(grouped).map(([tag, endpoints]) => `
-      <div class="tag-section">
-        <div class="tag-title">
-          ${tag}
-          <span class="tag-badge">${endpoints.length}</span>
-        </div>
-        <div class="endpoint-list">
-          ${endpoints.map(ep => `
-            <div class="endpoint-card" onclick="openEndpoint('${ep.id}')">
-              <div class="endpoint-header">
-                <span class="method-badge method-${ep.method.toLowerCase()}">${ep.method}</span>
-                <span class="endpoint-path">${ep.path}</span>
-              </div>
-              ${ep.summary ? `<div class="endpoint-summary">${ep.summary}</div>` : ''}
-            </div>
-          `).join('')}
-        </div>
-      </div>
+        return Object.entries(grouped).map(([tag, endpoints]) => `
+      <div class="tag-section">
+        <div class="tag-title">
+          ${tag}
+          <span class="tag-badge">${endpoints.length}</span>
+        </div>
+        <div class="endpoint-list">
+          ${endpoints.map(ep => `
+            <div class="endpoint-card" onclick="openEndpoint('${ep.id}')">
+              <div class="endpoint-header">
+                <span class="method-badge method-${ep.method.toLowerCase()}">${ep.method}</span>
+                <span class="endpoint-path">${ep.path}</span>
+              </div>
+              ${ep.summary ? `<div class="endpoint-summary">${ep.summary}</div>` : ''}
+            </div>
+          `).join('')}
+        </div>
+      </div>
     `).join('');
     }
     renderEndpointModals(endpoints) {
-        return endpoints.map(ep => `
-      <div class="endpoint-detail" id="detail-${ep.id}">
-        <div class="detail-content">
-          <div class="detail-header">
-            <button class="detail-close" onclick="closeEndpoint('${ep.id}')">&times;</button>
-            <div style="clear: both;">
-              <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
-                <span class="method-badge method-${ep.method.toLowerCase()}">${ep.method}</span>
-                <span style="font-family: 'Courier New', monospace; font-size: 1.25rem;">${ep.path}</span>
-              </div>
-              ${ep.summary ? `<p style="opacity: 0.95; font-size: 1.1rem;">${ep.summary}</p>` : ''}
-            </div>
-          </div>
-          
-          <div class="detail-body">
-            ${ep.description ? `
-              <div class="section">
-                <div class="section-title">Description</div>
-                <p style="color: #4a5568; line-height: 1.6;">${ep.description}</p>
-              </div>
-            ` : ''}
-            
-            ${ep.parameters && ep.parameters.length > 0 ? `
-              <div class="section">
-                <div class="section-title">Parameters</div>
-                ${ep.parameters.map((param) => `
-                  <div class="param-item">
-                    <div>
-                      <span class="param-name">${param.name}</span>
-                      <span class="param-type">${param.schema?.type || param.type || 'string'}</span>
-                      ${param.required ? '<span style="color: #e53e3e; font-size: 0.875rem; margin-left: 0.5rem;">*required</span>' : ''}
-                    </div>
-                    <div style="color: #a0aec0; font-size: 0.875rem; margin-top: 0.25rem;">in: ${param.in}</div>
-                    ${param.description ? `<div class="param-desc">${param.description}</div>` : ''}
-                  </div>
-                `).join('')}
-              </div>
-            ` : ''}
-            
-            ${ep.requestBody ? `
-              <div class="section">
-                <div class="section-title">Request Body</div>
-                <div class="code-block">${this.formatJson(ep.requestBody.content?.['application/json']?.schema || ep.requestBody)}</div>
-              </div>
-            ` : ''}
-            
-            ${ep.responses && Object.keys(ep.responses).length > 0 ? `
-              <div class="section">
-                <div class="section-title">Responses</div>
-                ${Object.entries(ep.responses).map(([code, response]) => `
-                  <div class="response-item">
-                    <div class="response-code">Status ${code}</div>
-                    ${response.description ? `<div class="param-desc">${response.description}</div>` : ''}
-                    ${response.content?.['application/json']?.schema ? `
-                      <div class="code-block" style="margin-top: 0.75rem;">${this.formatJson(response.content['application/json'].schema)}</div>
-                    ` : ''}
-                  </div>
-                `).join('')}
-              </div>
-            ` : ''}
-          </div>
-        </div>
-      </div>
+        return endpoints.map(ep => `
+      <div class="endpoint-detail" id="detail-${ep.id}">
+        <div class="detail-content">
+          <div class="detail-header">
+            <button class="detail-close" onclick="closeEndpoint('${ep.id}')">&times;</button>
+            <div style="clear: both;">
+              <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
+                <span class="method-badge method-${ep.method.toLowerCase()}">${ep.method}</span>
+                <span style="font-family: 'Courier New', monospace; font-size: 1.25rem;">${ep.path}</span>
+              </div>
+              ${ep.summary ? `<p style="opacity: 0.95; font-size: 1.1rem;">${ep.summary}</p>` : ''}
+            </div>
+          </div>
+          
+          <div class="detail-body">
+            ${ep.description ? `
+              <div class="section">
+                <div class="section-title">Description</div>
+                <p style="color: #4a5568; line-height: 1.6;">${ep.description}</p>
+              </div>
+            ` : ''}
+            
+            ${ep.parameters && ep.parameters.length > 0 ? `
+              <div class="section">
+                <div class="section-title">Parameters</div>
+                ${ep.parameters.map((param) => `
+                  <div class="param-item">
+                    <div>
+                      <span class="param-name">${param.name}</span>
+                      <span class="param-type">${param.schema?.type || param.type || 'string'}</span>
+                      ${param.required ? '<span style="color: #e53e3e; font-size: 0.875rem; margin-left: 0.5rem;">*required</span>' : ''}
+                    </div>
+                    <div style="color: #a0aec0; font-size: 0.875rem; margin-top: 0.25rem;">in: ${param.in}</div>
+                    ${param.description ? `<div class="param-desc">${param.description}</div>` : ''}
+                  </div>
+                `).join('')}
+              </div>
+            ` : ''}
+            
+            ${ep.requestBody ? `
+              <div class="section">
+                <div class="section-title">Request Body</div>
+                <div class="code-block">${this.formatJson(ep.requestBody.content?.['application/json']?.schema || ep.requestBody)}</div>
+              </div>
+            ` : ''}
+            
+            ${ep.responses && Object.keys(ep.responses).length > 0 ? `
+              <div class="section">
+                <div class="section-title">Responses</div>
+                ${Object.entries(ep.responses).map(([code, response]) => `
+                  <div class="response-item">
+                    <div class="response-code">Status ${code}</div>
+                    ${response.description ? `<div class="param-desc">${response.description}</div>` : ''}
+                    ${response.content?.['application/json']?.schema ? `
+                      <div class="code-block" style="margin-top: 0.75rem;">${this.formatJson(response.content['application/json'].schema)}</div>
+                    ` : ''}
+                  </div>
+                `).join('')}
+              </div>
+            ` : ''}
+          </div>
+        </div>
+      </div>
     `).join('');
     }
     formatJson(obj) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nest-scramble",
-  "version": "1.4.9",
+  "version": "1.5.0",
   "description": "A next-generation, decorator-free API documentation engine and intelligent mock server for NestJS, engineered by Mohamed Mustafa",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",