wad-lab 1.2.0 → 1.2.1

package/bin/index.js

@@ -41,114 +41,556 @@ const frontendOptions = [
   { name: 'vue-axios-interceptor (Vue 3 + Axios Interceptors + Toast Alerts)', value: 'vue-axios-interceptor' }
 ];
 
+const categories = [
+  {
+    id: 'fullstack',
+    title: 'Fullstack Web Applications',
+    icon: '🌐',
+    desc: 'Integrated Spring Boot + MongoDB + Vue 3 apps'
+  },
+  {
+    id: 'springboot',
+    title: 'Spring Boot Backend APIs',
+    icon: '🍃',
+    desc: 'REST APIs, MongoDB, Aggregations, Join & MockMvc'
+  },
+  {
+    id: 'servlet',
+    title: 'Java Servlets & Tomcat 9',
+    icon: '☕',
+    desc: 'Classic Tomcat Servlets, JDBC, Sessions & Web.xml'
+  },
+  {
+    id: 'vue-axios',
+    title: 'Vue 3 + Axios HTTP Variants',
+    icon: '⚡',
+    desc: 'All 10+ architectural combinations of Vue 3 with Axios'
+  },
+  {
+    id: 'vue-core',
+    title: 'Vue 3 Core Portals & State',
+    icon: '🎨',
+    desc: 'Router, Pinia, Native Fetch & Complete UI Portals'
+  },
+  {
+    id: 'games',
+    title: 'Interactive Games (JS & Vue)',
+    icon: '🎮',
+    desc: 'Logic, DOM & State Management Games'
+  },
+  {
+    id: 'html-css',
+    title: 'HTML5 & CSS3 Foundations',
+    icon: '📄',
+    desc: 'Form Validation, DOM Manipulation & 50 CSS Properties'
+  }
+];
+
 const templates = [
-  { name: 'all (Unpack All 56 Templates)', value: 'all' },
-  { name: 'servlet-voter-eligibility (Name & Age Voting Eligibility Check)', value: 'servlet-voter-eligibility' },
-  { name: 'fullstack-springboot-vue (Spring Boot: 2 Models, 2 Repos, 1 Service, 1 Controller + Selectable Vue 3 Axios Frontend)', value: 'fullstack-springboot-vue' },
-  { name: 'springboot-2model-1controller-api (Spring Boot 1 Service, 1 Controller, 2 Models, 2 Repos)', value: 'springboot-2model-1controller-api' },
-  { name: 'vue-axios-basic (Vue 3 + Axios Direct CRUD)', value: 'vue-axios-basic' },
-  { name: 'vue-axios-props-emits (Vue 3 + Axios + Props & Emits)', value: 'vue-axios-props-emits' },
-  { name: 'vue-axios-router (Vue 3 + Axios + Router Views)', value: 'vue-axios-router' },
-  { name: 'vue-axios-pinia (Vue 3 + Axios + Pinia Centralized Store)', value: 'vue-axios-pinia' },
-  { name: 'vue-axios-router-props (Vue 3 + Axios + Router + Props/Emits)', value: 'vue-axios-router-props' },
-  { name: 'vue-axios-pinia-props (Vue 3 + Axios + Pinia + Props/Emits)', value: 'vue-axios-pinia-props' },
-  { name: 'vue-axios-router-pinia (Vue 3 + Axios + Router + Pinia)', value: 'vue-axios-router-pinia' },
-  { name: 'vue-axios-router-pinia-props (The Kitchen Sink — Router + Pinia + Props + Emits)', value: 'vue-axios-router-pinia-props' },
-  { name: 'vue-axios-router-children (Vue 3 + Axios + Router Nested Children)', value: 'vue-axios-router-children' },
-  { name: 'vue-axios-interceptor (Vue 3 + Axios Interceptors + Toast Alerts)', value: 'vue-axios-interceptor' },
-  { name: 'vue-basics (ref, reactive, computed, v-model)', value: 'vue-basics' },
-  { name: 'vue-props-emits (Parent/Child Component Communication)', value: 'vue-props-emits' },
-  { name: 'vue-router (Parent Layout & Nested Children)', value: 'vue-router' },
-  { name: 'vue-pinia (Centralized State Store)', value: 'vue-pinia' },
-  { name: 'vue-router-pinia (Router with Children + Pinia)', value: 'vue-router-pinia' },
-  { name: 'vue-router-pinia-props (Router + Pinia + Props + Emits)', value: 'vue-router-pinia-props' },
-  { name: 'vue-fetch (Native fetch CRUD)', value: 'vue-fetch' },
-  { name: 'vue-axios (Axios CRUD Service)', value: 'vue-axios' },
-  { name: 'vue-todo-pinia (Pinia Task Manager)', value: 'vue-todo-pinia' },
-  { name: 'vue-todo-router (Router Multi-View Tasks)', value: 'vue-todo-router' },
-  { name: 'vue-cart-router-pinia (Router + Pinia Shopping Cart)', value: 'vue-cart-router-pinia' },
-  { name: 'html-css-js (Form Validation & DOM)', value: 'html-css-js' },
-  { name: 'html-css-styles (50 CSS properties showcase)', value: 'html-css-styles' },
-  { name: 'servlet-basic (Tomcat GET + POST)', value: 'servlet-basic' },
-  { name: 'servlet-jdbc (Tomcat + MySQL JDBC)', value: 'servlet-jdbc' },
-  { name: 'servlet-flow (HelloServlet with GET/POST)', value: 'servlet-flow' },
-  { name: 'servlet-session-tracking (HttpSession, Cookies, Redirect, URL Rewriting)', value: 'servlet-session-tracking' },
-  { name: 'springboot-mongo-crud (4-Layer REST API)', value: 'springboot-mongo-crud' },
-  { name: 'springboot-mongo-aggregation ($group, $sum, $avg, $sort)', value: 'springboot-mongo-aggregation' },
-  { name: 'springboot-mongo-aggregation-join ($lookup JOIN, @Query, @Aggregation)', value: 'springboot-mongo-aggregation-join' },
-  { name: 'springboot-mockmvc (Controller Tests)', value: 'springboot-mockmvc' },
-  { name: 'springboot-mongo-aggregation-mockmvc (Full Tests)', value: 'springboot-mongo-aggregation-mockmvc' },
-  { name: 'game-rock-paper-scissors (Player vs Computer RPS)', value: 'game-rock-paper-scissors' },
-  { name: 'game-tic-tac-toe (3x3 Turn Grid with Win Check)', value: 'game-tic-tac-toe' },
-  { name: 'game-whack-a-mole (3x3 Mole Whack with Timer)', value: 'game-whack-a-mole' },
-  { name: 'game-memory-cards (3x4 Flashcard Matching Game)', value: 'game-memory-cards' },
-  { name: 'game-bingo (Exercise 3 — JavaScript Bingo Game)', value: 'game-bingo' },
-  { name: 'vue-game-rps (Vue 3 + Pinia Rock Paper Scissors)', value: 'vue-game-rps' },
-  { name: 'vue-game-tictactoe (Vue 3 + Pinia Tic Tac Toe)', value: 'vue-game-tictactoe' },
-  { name: 'vue-game-whackamole (Vue 3 + Pinia Whack A Mole)', value: 'vue-game-whackamole' },
-  { name: 'vue-memory-game (Vue 3 + Pinia Flashcard Matching)', value: 'vue-memory-game' },
-  { name: 'vue-springboot-mongo-crud (Fullstack CRUD)', value: 'vue-springboot-mongo-crud' },
-  { name: 'vue-springboot-mongo-aggregation (Fullstack Dashboard)', value: 'vue-springboot-mongo-aggregation' },
-  { name: 'vue-router-pinia-springboot (Fullstack Enterprise)', value: 'vue-router-pinia-springboot' },
-  { name: 'vue-food-ordering (Exercise 7 — Online Food Ordering App)', value: 'vue-food-ordering' },
-  { name: 'vue-symposium-system (Exercise 6 — College Symposium Management)', value: 'vue-symposium-system' },
-  { name: 'vue-banking-app (Variant 2 — Banking Portal & Ledger)', value: 'vue-banking-app' },
-  { name: 'vue-employee-system (Variant 1 — Employee HR & Payroll)', value: 'vue-employee-system' },
-  { name: 'vue-hospital-portal (Variant 3 — Hospital OPD & Vitals Portal)', value: 'vue-hospital-portal' },
-  { name: 'vue-library-system (Variant 4 — Library Book Loans & Members)', value: 'vue-library-system' },
-  { name: 'springboot-course-registration (Exercise 5 — Course Registration REST API)', value: 'springboot-course-registration' },
-  { name: 'springboot-hospital-api (Variant 3 — Hospital Appointments API)', value: 'springboot-hospital-api' },
-  { name: 'springboot-library-api (Variant 4 — Library Catalog & Analytics API)', value: 'springboot-library-api' }
+  // Fullstack (4)
+  {
+    category: 'fullstack',
+    value: 'fullstack-springboot-vue',
+    name: 'fullstack-springboot-vue (Spring Boot 2-Model API + Selectable Vue 3 Frontend)'
+  },
+  {
+    category: 'fullstack',
+    value: 'vue-springboot-mongo-crud',
+    name: 'vue-springboot-mongo-crud (Spring Boot + MongoDB + Vue 3 Direct CRUD)'
+  },
+  {
+    category: 'fullstack',
+    value: 'vue-springboot-mongo-aggregation',
+    name: 'vue-springboot-mongo-aggregation (Spring Boot Aggregation + Vue 3 Dashboard)'
+  },
+  {
+    category: 'fullstack',
+    value: 'vue-router-pinia-springboot',
+    name: 'vue-router-pinia-springboot (Fullstack Enterprise: Router + Pinia + Spring Boot)'
+  },
+
+  // Spring Boot (9)
+  {
+    category: 'springboot',
+    value: 'springboot-mongo-crud',
+    name: 'springboot-mongo-crud (4-Layer REST API: Controller -> Service -> Repo -> Mongo)'
+  },
+  {
+    category: 'springboot',
+    value: 'springboot-mongo-aggregation',
+    name: 'springboot-mongo-aggregation (Aggregation Pipeline: $group, $sum, $avg, $sort)'
+  },
+  {
+    category: 'springboot',
+    value: 'springboot-mongo-aggregation-join',
+    name: 'springboot-mongo-aggregation-join (MongoDB $lookup JOIN, @Query, @Aggregation)'
+  },
+  {
+    category: 'springboot',
+    value: 'springboot-mockmvc',
+    name: 'springboot-mockmvc (Controller Unit Testing with MockMvc)'
+  },
+  {
+    category: 'springboot',
+    value: 'springboot-mongo-aggregation-mockmvc',
+    name: 'springboot-mongo-aggregation-mockmvc (Full Testing Lab: MockMvc + Aggregation)'
+  },
+  {
+    category: 'springboot',
+    value: 'springboot-2model-1controller-api',
+    name: 'springboot-2model-1controller-api (2 Models Dept & Emp, 2 Repos, 1 Service, 1 Controller)'
+  },
+  {
+    category: 'springboot',
+    value: 'springboot-course-registration',
+    name: 'springboot-course-registration (Exercise 5 — Course Registration REST API)'
+  },
+  {
+    category: 'springboot',
+    value: 'springboot-hospital-api',
+    name: 'springboot-hospital-api (Hospital OPD Appointments & Doctors API)'
+  },
+  {
+    category: 'springboot',
+    value: 'springboot-library-api',
+    name: 'springboot-library-api (Library Catalog, Loans & Analytics API)'
+  },
+
+  // Servlets (5)
+  {
+    category: 'servlet',
+    value: 'servlet-basic',
+    name: 'servlet-basic (Tomcat GET + POST Basic Servlet)'
+  },
+  {
+    category: 'servlet',
+    value: 'servlet-flow',
+    name: 'servlet-flow (HelloServlet Execution Flow with GET/POST Form)'
+  },
+  {
+    category: 'servlet',
+    value: 'servlet-jdbc',
+    name: 'servlet-jdbc (Tomcat + MySQL JDBC Database Connection)'
+  },
+  {
+    category: 'servlet',
+    value: 'servlet-session-tracking',
+    name: 'servlet-session-tracking (HttpSession, Cookies, Redirect & URL Rewriting)'
+  },
+  {
+    category: 'servlet',
+    value: 'servlet-voter-eligibility',
+    name: 'servlet-voter-eligibility (Voting Eligibility Check: Name & Age Validation)'
+  },
+
+  // Vue + Axios (11)
+  {
+    category: 'vue-axios',
+    value: 'vue-axios-basic',
+    name: 'vue-axios-basic (Vue 3 + Axios Direct CRUD in Single View)'
+  },
+  {
+    category: 'vue-axios-props-emits',
+    value: 'vue-axios-props-emits',
+    name: 'vue-axios-props-emits (Vue 3 + Axios + Parent/Child Props & Emits)'
+  },
+  {
+    category: 'vue-axios-router',
+    value: 'vue-axios-router',
+    name: 'vue-axios-router (Vue 3 + Axios + Router Views Dashboard & Details)'
+  },
+  {
+    category: 'vue-axios-pinia',
+    value: 'vue-axios-pinia',
+    name: 'vue-axios-pinia (Vue 3 + Axios + Pinia Centralized State Store)'
+  },
+  {
+    category: 'vue-axios-router-props',
+    value: 'vue-axios-router-props',
+    name: 'vue-axios-router-props (Vue 3 + Axios + Router + Component Props/Emits)'
+  },
+  {
+    category: 'vue-axios-pinia-props',
+    value: 'vue-axios-pinia-props',
+    name: 'vue-axios-pinia-props (Vue 3 + Axios + Pinia Store + Props/Emits)'
+  },
+  {
+    category: 'vue-axios-router-pinia',
+    value: 'vue-axios-router-pinia',
+    name: 'vue-axios-router-pinia (Vue 3 + Axios + Router Views + Pinia Store)'
+  },
+  {
+    category: 'vue-axios-router-pinia-props',
+    value: 'vue-axios-router-pinia-props',
+    name: 'vue-axios-router-pinia-props (The Complete Stack: Router + Pinia + Props + Emits)'
+  },
+  {
+    category: 'vue-axios-router-children',
+    value: 'vue-axios-router-children',
+    name: 'vue-axios-router-children (Vue 3 + Axios + Router Nested Children Layouts)'
+  },
+  {
+    category: 'vue-axios-interceptor',
+    value: 'vue-axios-interceptor',
+    name: 'vue-axios-interceptor (Vue 3 + Axios Interceptors + Toast Notifications)'
+  },
+  {
+    category: 'vue-axios',
+    value: 'vue-axios',
+    name: 'vue-axios (Classic Vue 3 Axios Service Layer CRUD)'
+  },
+
+  // Vue Core & Portals (16)
+  {
+    category: 'vue-core',
+    value: 'vue-basics',
+    name: 'vue-basics (Core Reactivity: ref, reactive, computed, v-model, watch)'
+  },
+  {
+    category: 'vue-props-emits',
+    value: 'vue-props-emits',
+    name: 'vue-props-emits (Parent/Child Component Communication & Custom Events)'
+  },
+  {
+    category: 'vue-router',
+    value: 'vue-router',
+    name: 'vue-router (Vue Router Parent Layout & Nested Children)'
+  },
+  {
+    category: 'vue-pinia',
+    value: 'vue-pinia',
+    name: 'vue-pinia (Pinia State Store: State, Getters, Actions)'
+  },
+  {
+    category: 'vue-router-pinia',
+    value: 'vue-router-pinia',
+    name: 'vue-router-pinia (Router Multi-Page Views + Pinia Store)'
+  },
+  {
+    category: 'vue-router-pinia-props',
+    value: 'vue-router-pinia-props',
+    name: 'vue-router-pinia-props (Router + Pinia Store + Component Props/Emits)'
+  },
+  {
+    category: 'vue-fetch',
+    value: 'vue-fetch',
+    name: 'vue-fetch (Native Fetch API CRUD without Axios)'
+  },
+  {
+    category: 'vue-todo-pinia',
+    value: 'vue-todo-pinia',
+    name: 'vue-todo-pinia (Pinia Task & Todo Manager)'
+  },
+  {
+    category: 'vue-todo-router',
+    value: 'vue-todo-router',
+    name: 'vue-todo-router (Router Multi-View Task Application)'
+  },
+  {
+    category: 'vue-cart-router-pinia',
+    value: 'vue-cart-router-pinia',
+    name: 'vue-cart-router-pinia (E-Commerce Shopping Cart with Router & Pinia)'
+  },
+  {
+    category: 'vue-food-ordering',
+    value: 'vue-food-ordering',
+    name: 'vue-food-ordering (Exercise 7 — Online Food Ordering Application)'
+  },
+  {
+    category: 'vue-symposium-system',
+    value: 'vue-symposium-system',
+    name: 'vue-symposium-system (Exercise 6 — College Symposium Management System)'
+  },
+  {
+    category: 'vue-banking-app',
+    value: 'vue-banking-app',
+    name: 'vue-banking-app (Banking Portal & Transaction Ledger System)'
+  },
+  {
+    category: 'vue-employee-system',
+    value: 'vue-employee-system',
+    name: 'vue-employee-system (Employee HR, Payroll & Records System)'
+  },
+  {
+    category: 'vue-hospital-portal',
+    value: 'vue-hospital-portal',
+    name: 'vue-hospital-portal (Hospital OPD & Patient Vitals Portal)'
+  },
+  {
+    category: 'vue-library-system',
+    value: 'vue-library-system',
+    name: 'vue-library-system (Library Catalog & Book Circulation System)'
+  },
+
+  // Games (9)
+  {
+    category: 'games',
+    value: 'game-bingo',
+    name: 'game-bingo (Exercise 3 — Two-Player JavaScript Bingo Game)'
+  },
+  {
+    category: 'games',
+    value: 'game-rock-paper-scissors',
+    name: 'game-rock-paper-scissors (Player vs Computer Rock Paper Scissors — Vanilla JS)'
+  },
+  {
+    category: 'games',
+    value: 'game-tic-tac-toe',
+    name: 'game-tic-tac-toe (3x3 Turn Grid with Win Detection — Vanilla JS)'
+  },
+  {
+    category: 'games',
+    value: 'game-whack-a-mole',
+    name: 'game-whack-a-mole (3x3 Mole Whack with Timer & Score — Vanilla JS)'
+  },
+  {
+    category: 'games',
+    value: 'game-memory-cards',
+    name: 'game-memory-cards (3x4 Flashcard Matching Game — Vanilla JS)'
+  },
+  {
+    category: 'games',
+    value: 'vue-game-rps',
+    name: 'vue-game-rps (Rock Paper Scissors with Vue 3 + Pinia Scoreboard)'
+  },
+  {
+    category: 'games',
+    value: 'vue-game-tictactoe',
+    name: 'vue-game-tictactoe (Tic Tac Toe with Vue 3 + Pinia Move History)'
+  },
+  {
+    category: 'games',
+    value: 'vue-game-whackamole',
+    name: 'vue-game-whackamole (Whack-A-Mole with Vue 3 + Pinia Countdown)'
+  },
+  {
+    category: 'games',
+    value: 'vue-memory-game',
+    name: 'vue-memory-game (Card Matching Game with Vue 3 + Pinia Flips)'
+  },
+
+  // HTML / CSS (2)
+  {
+    category: 'html-css',
+    value: 'html-css-js',
+    name: 'html-css-js (Form Validation Regex, Required & Dynamic DOM)'
+  },
+  {
+    category: 'html-css',
+    value: 'html-css-styles',
+    name: 'html-css-styles (50 CSS Properties Showcase: Box Model, Flex, Grid, Animations)'
+  }
 ];
 
 const PAGE_SIZE = 12;
+const templatesRoot = path.join(__dirname, '..', 'templates');
+
+let currentView = 'MAIN'; // 'MAIN' | 'CATEGORY' | 'SEARCH' | 'ALL'
+let activeCategory = null;
+let searchQuery = '';
 let selectedIndex = 0;
 const selectedValues = new Set();
-const templatesRoot = path.join(__dirname, '..', 'templates');
 let isPrompting = false;
 
-function renderMenu() {
-  console.clear();
-  console.log('=== WAD LAB STARTER TEMPLATES ===');
-  console.log('Use [UP / DOWN] arrow keys to move');
-  console.log('Press [SPACE] to select / deselect (multi-select supported)');
-  console.log('Press [ENTER] to confirm and proceed\n');
-
-  const total = templates.length;
-  let start = selectedIndex - Math.floor(PAGE_SIZE / 2);
-  if (start < 0) start = 0;
-  if (start + PAGE_SIZE > total) {
-    start = Math.max(0, total - PAGE_SIZE);
+function getActiveItemList() {
+  if (currentView === 'MAIN') {
+    const list = categories.map((cat, idx) => {
+      const count = templates.filter(t => t.category === cat.id).length;
+      return {
+        type: 'category',
+        id: cat.id,
+        name: `[${idx + 1}] ${cat.icon} ${cat.title} (${count} templates)`,
+        desc: cat.desc
+      };
+    });
+    list.push({ type: 'action', id: 'search', name: '[S] 🔍 Search templates by keyword...', desc: 'Quickly find templates by typing name or topic' });
+    list.push({ type: 'action', id: 'all_view', name: '[L] 📋 View all 56 templates (grouped)', desc: 'Browse the full catalog with section headers' });
+    list.push({ type: 'action', id: 'unpack_all', name: '[A] 📦 Unpack all 56 templates in 1-click', desc: 'Copy all 56 templates into target folder' });
+    return list;
   }
-  const end = Math.min(start + PAGE_SIZE, total);
 
-  if (start > 0) {
-    console.log(`    ▲ (${start} more above)`);
-  } else {
-    console.log('    --- Top of list ---');
+  if (currentView === 'CATEGORY') {
+    return templates.filter(t => t.category === activeCategory.id);
   }
 
-  for (let i = start; i < end; i++) {
-    const t = templates[i];
-    const isCursor = i === selectedIndex;
-    const isChecked = selectedValues.has(t.value);
-    const box = isChecked ? '[x]' : '[ ]';
-    const prefix = isCursor ? '> ' : '  ';
-    console.log(prefix + box + ' ' + t.name);
+  if (currentView === 'SEARCH') {
+    const q = searchQuery.toLowerCase().trim();
+    if (!q) return [];
+    return templates.filter(t =>
+      t.value.toLowerCase().includes(q) ||
+      t.name.toLowerCase().includes(q) ||
+      t.category.toLowerCase().includes(q)
+    );
   }
 
-  if (end < total) {
-    console.log(`    ▼ (${total - end} more below)`);
-  } else {
-    console.log('    --- Bottom of list ---');
+  if (currentView === 'ALL') {
+    return templates;
+  }
+
+  return [];
+}
+
+function renderScreen() {
+  console.clear();
+
+  if (currentView === 'MAIN') {
+    console.log('========================================================');
+    console.log('             🚀 WAD LAB STARTER TEMPLATES              ');
+    console.log('         56 Exam-Ready & Lab-Tested Templates          ');
+    console.log('========================================================\n');
+    console.log('Navigate with [UP / DOWN] arrow keys');
+    console.log('Press [ENTER] or press [1-7] to enter a category');
+    console.log('Press [S] to Search, [A] to Unpack All, [Ctrl+C] to Exit\n');
+
+    const items = getActiveItemList();
+    items.forEach((item, idx) => {
+      if (item.id === 'search') {
+        console.log('  ----------------------------------------------------');
+      }
+      const isCursor = idx === selectedIndex;
+      const prefix = isCursor ? '  👉 ' : '     ';
+      console.log(prefix + item.name);
+    });
+
+    const activeItem = items[selectedIndex];
+    if (activeItem && activeItem.desc) {
+      console.log('\n  ℹ️  ' + activeItem.desc);
+    }
+    return;
+  }
+
+  if (currentView === 'CATEGORY') {
+    console.log('========================================================');
+    console.log(`  ${activeCategory.icon} ${activeCategory.title}`);
+    console.log(`  ${activeCategory.desc}`);
+    console.log('========================================================\n');
+    console.log('  [SPACE] Select / Deselect (multi-select supported)');
+    console.log('  [ENTER] Confirm selection and proceed');
+    console.log('  [B / ESC] Back to Categories Menu\n');
+
+    const items = getActiveItemList();
+    const total = items.length;
+
+    let start = selectedIndex - Math.floor(PAGE_SIZE / 2);
+    if (start < 0) start = 0;
+    if (start + PAGE_SIZE > total) {
+      start = Math.max(0, total - PAGE_SIZE);
+    }
+    const end = Math.min(start + PAGE_SIZE, total);
+
+    if (start > 0) {
+      console.log(`     ▲ (${start} more above)`);
+    }
+
+    for (let i = start; i < end; i++) {
+      const t = items[i];
+      const isCursor = i === selectedIndex;
+      const isChecked = selectedValues.has(t.value);
+      const box = isChecked ? '[✓]' : '[ ]';
+      const prefix = isCursor ? ' 👉 ' : '    ';
+      console.log(prefix + box + ' ' + t.name);
+    }
+
+    if (end < total) {
+      console.log(`     ▼ (${total - end} more below)`);
+    }
+
+    const selCount = selectedValues.size;
+    console.log(`\n  Selected: ${selCount} template(s) [${selectedIndex + 1}/${total}]`);
+    return;
+  }
+
+  if (currentView === 'SEARCH') {
+    console.log('========================================================');
+    console.log('  🔍 Instant Template Search');
+    console.log('========================================================');
+    console.log(`  Query: "${searchQuery}" (type letters/numbers, Backspace to delete)`);
+    console.log('  [SPACE] Select | [ENTER] Confirm | [ESC] Back\n');
+
+    const items = getActiveItemList();
+    if (!searchQuery.trim()) {
+      console.log('  Start typing to search across all 56 templates...');
+      console.log('  Try keywords: "mongo", "join", "props", "servlet", "pinia", "game"\n');
+      return;
+    }
+
+    if (items.length === 0) {
+      console.log(`  No templates matched "${searchQuery}".`);
+      return;
+    }
+
+    const total = items.length;
+    let start = selectedIndex - Math.floor(PAGE_SIZE / 2);
+    if (start < 0) start = 0;
+    if (start + PAGE_SIZE > total) {
+      start = Math.max(0, total - PAGE_SIZE);
+    }
+    const end = Math.min(start + PAGE_SIZE, total);
+
+    if (start > 0) {
+      console.log(`     ▲ (${start} more above)`);
+    }
+
+    for (let i = start; i < end; i++) {
+      const t = items[i];
+      const isCursor = i === selectedIndex;
+      const isChecked = selectedValues.has(t.value);
+      const box = isChecked ? '[✓]' : '[ ]';
+      const prefix = isCursor ? ' 👉 ' : '    ';
+      console.log(prefix + box + ' ' + t.name);
+    }
+
+    if (end < total) {
+      console.log(`     ▼ (${total - end} more below)`);
+    }
+
+    console.log(`\n  Matches: ${total} | Selected: ${selectedValues.size}`);
+    return;
   }
 
-  const selectedDisplay = selectedValues.size === 0
-    ? templates[selectedIndex].name
-    : `${selectedValues.size} template(s) selected: ${Array.from(selectedValues).join(', ')}`;
-  console.log(`\n[${selectedIndex + 1}/${total}] Focused: ${templates[selectedIndex].value}`);
-  console.log(`Selection: ${selectedDisplay}`);
-  console.log('\nPress Ctrl+C to cancel.');
+  if (currentView === 'ALL') {
+    console.log('========================================================');
+    console.log('  📋 Full Catalog: All 56 Templates');
+    console.log('========================================================\n');
+    console.log('  [SPACE] Select / Deselect | [ENTER] Confirm | [ESC] Back\n');
+
+    const items = getActiveItemList();
+    const total = items.length;
+
+    let start = selectedIndex - Math.floor(PAGE_SIZE / 2);
+    if (start < 0) start = 0;
+    if (start + PAGE_SIZE > total) {
+      start = Math.max(0, total - PAGE_SIZE);
+    }
+    const end = Math.min(start + PAGE_SIZE, total);
+
+    if (start > 0) {
+      console.log(`     ▲ (${start} more above)`);
+    }
+
+    let lastCat = null;
+    for (let i = start; i < end; i++) {
+      const t = items[i];
+      if (t.category !== lastCat) {
+        const catObj = categories.find(c => c.id === t.category);
+        if (catObj) {
+          console.log(`  --- ${catObj.icon} ${catObj.title} ---`);
+        }
+        lastCat = t.category;
+      }
+      const isCursor = i === selectedIndex;
+      const isChecked = selectedValues.has(t.value);
+      const box = isChecked ? '[✓]' : '[ ]';
+      const prefix = isCursor ? ' 👉 ' : '    ';
+      console.log(prefix + box + ' ' + t.name);
+    }
+
+    if (end < total) {
+      console.log(`     ▼ (${total - end} more below)`);
+    }
+
+    console.log(`\n  [${selectedIndex + 1}/${total}] Selected: ${selectedValues.size}`);
+  }
 }
 
 function promptFolderName(choices) {
@@ -208,7 +650,7 @@ function promptFolderName(choices) {
 
       if (isAll) {
         copyDirRecursive(templatesRoot, destDir);
-        console.log('\nSuccessfully unpacked ALL templates into: ' + destDir);
+        console.log('\n✨ Successfully unpacked ALL 56 templates into: ' + destDir);
       } else {
         choices.forEach(c => {
           if (c === 'fullstack-springboot-vue') {
@@ -238,29 +680,56 @@ function promptFolderName(choices) {
             console.log('Unpacked [' + c + '] into: ' + dest);
           }
         });
-        console.log('\nSuccessfully unpacked all chosen templates into: ' + destDir);
+        console.log('\n✨ Successfully unpacked all chosen templates into: ' + destDir);
       }
       process.exit(0);
     });
   });
 }
 
+// Check command-line arguments for direct non-interactive use
 if (process.argv[2]) {
-  const arg = process.argv[2];
-  const found = templates.find(t => t.value === arg);
-  if (found) {
-    promptFolderName([found.value]);
+  const arg = process.argv[2].trim();
+  if (arg === 'all' || arg === '--all' || arg === '-a') {
+    promptFolderName(['all']);
+  } else if (arg === '--cat' && process.argv[3]) {
+    const catId = process.argv[3].trim().toLowerCase();
+    const foundCat = categories.find(c => c.id === catId);
+    if (foundCat) {
+      activeCategory = foundCat;
+      currentView = 'CATEGORY';
+      selectedIndex = 0;
+      startInteractive();
+    } else {
+      console.error(`Unknown category: "${catId}". Available: ${categories.map(c => c.id).join(', ')}`);
+      process.exit(1);
+    }
+  } else if (arg === '--search' && process.argv[3]) {
+    searchQuery = process.argv.slice(3).join(' ');
+    currentView = 'SEARCH';
+    selectedIndex = 0;
+    startInteractive();
   } else {
-    console.error('Unknown template: ' + arg);
-    process.exit(1);
+    const found = templates.find(t => t.value === arg);
+    if (found) {
+      promptFolderName([found.value]);
+    } else {
+      console.error('Unknown template: ' + arg);
+      console.error(`Available templates (56 total) or run without arguments for the interactive menu.`);
+      process.exit(1);
+    }
   }
 } else {
+  startInteractive();
+}
+
+function startInteractive() {
   readline.emitKeypressEvents(process.stdin);
   if (process.stdin.isTTY) {
     process.stdin.setRawMode(true);
   }
 
-  renderMenu();
+  renderScreen();
 
   process.stdin.on('keypress', (str, key) => {
     if (isPrompting) return;
@@ -269,36 +738,175 @@ if (process.argv[2]) {
       process.exit(0);
     }
 
-    if (key.name === 'up') {
-      selectedIndex = (selectedIndex - 1 + templates.length) % templates.length;
-      renderMenu();
-    } else if (key.name === 'down') {
-      selectedIndex = (selectedIndex + 1) % templates.length;
-      renderMenu();
-    } else if (key.name === 'space') {
-      const currentVal = templates[selectedIndex].value;
-      if (currentVal === 'all') {
-        if (selectedValues.has('all')) {
-          selectedValues.clear();
-        } else {
-          selectedValues.clear();
-          selectedValues.add('all');
+    const items = getActiveItemList();
+
+    // MAIN VIEW INPUT
+    if (currentView === 'MAIN') {
+      if (key.name === 'up') {
+        selectedIndex = (selectedIndex - 1 + items.length) % items.length;
+        renderScreen();
+      } else if (key.name === 'down') {
+        selectedIndex = (selectedIndex + 1) % items.length;
+        renderScreen();
+      } else if (str === 's' || str === 'S') {
+        currentView = 'SEARCH';
+        searchQuery = '';
+        selectedIndex = 0;
+        renderScreen();
+      } else if (str === 'a' || str === 'A') {
+        promptFolderName(['all']);
+      } else if (str === 'l' || str === 'L') {
+        currentView = 'ALL';
+        selectedIndex = 0;
+        renderScreen();
+      } else if (str >= '1' && str <= '7') {
+        const num = parseInt(str, 10);
+        activeCategory = categories[num - 1];
+        currentView = 'CATEGORY';
+        selectedIndex = 0;
+        renderScreen();
+      } else if (key.name === 'return' || key.name === 'enter') {
+        const item = items[selectedIndex];
+        if (item.type === 'category') {
+          activeCategory = categories.find(c => c.id === item.id);
+          currentView = 'CATEGORY';
+          selectedIndex = 0;
+          renderScreen();
+        } else if (item.id === 'search') {
+          currentView = 'SEARCH';
+          searchQuery = '';
+          selectedIndex = 0;
+          renderScreen();
+        } else if (item.id === 'all_view') {
+          currentView = 'ALL';
+          selectedIndex = 0;
+          renderScreen();
+        } else if (item.id === 'unpack_all') {
+          promptFolderName(['all']);
         }
-      } else {
-        selectedValues.delete('all');
-        if (selectedValues.has(currentVal)) {
-          selectedValues.delete(currentVal);
+      }
+      return;
+    }
+
+    // SEARCH VIEW INPUT
+    if (currentView === 'SEARCH') {
+      if (key.name === 'escape') {
+        currentView = 'MAIN';
+        selectedIndex = 0;
+        renderScreen();
+        return;
+      }
+
+      if (key.name === 'up') {
+        if (items.length > 0) {
+          selectedIndex = (selectedIndex - 1 + items.length) % items.length;
+          renderScreen();
+        }
+        return;
+      }
+
+      if (key.name === 'down') {
+        if (items.length > 0) {
+          selectedIndex = (selectedIndex + 1) % items.length;
+          renderScreen();
+        }
+        return;
+      }
+
+      if (key.name === 'space') {
+        if (items.length > 0) {
+          const currentVal = items[selectedIndex].value;
+          if (selectedValues.has(currentVal)) {
+            selectedValues.delete(currentVal);
+          } else {
+            selectedValues.add(currentVal);
+          }
+          renderScreen();
+        }
+        return;
+      }
+
+      if (key.name === 'return' || key.name === 'enter') {
+        let chosen = Array.from(selectedValues);
+        if (chosen.length === 0 && items.length > 0) {
+          chosen = [items[selectedIndex].value];
+        }
+        if (chosen.length > 0) {
+          promptFolderName(chosen);
+        }
+        return;
+      }
+
+      if (key.name === 'backspace') {
+        if (searchQuery.length > 0) {
+          searchQuery = searchQuery.slice(0, -1);
+          selectedIndex = 0;
+          renderScreen();
         } else {
-          selectedValues.add(currentVal);
+          currentView = 'MAIN';
+          selectedIndex = 0;
+          renderScreen();
+        }
+        return;
+      }
+
+      // Typing search query
+      if (str && str.length === 1 && !key.ctrl && !key.meta) {
+        searchQuery += str;
+        selectedIndex = 0;
+        renderScreen();
+        return;
+      }
+      return;
+    }
+
+    // CATEGORY / ALL VIEW INPUT
+    if (currentView === 'CATEGORY' || currentView === 'ALL') {
+      if (key.name === 'escape' || key.name === 'left' || str === 'b' || str === 'B') {
+        currentView = 'MAIN';
+        selectedIndex = 0;
+        renderScreen();
+        return;
+      }
+
+      if (key.name === 'up') {
+        if (items.length > 0) {
+          selectedIndex = (selectedIndex - 1 + items.length) % items.length;
+          renderScreen();
+        }
+        return;
+      }
+
+      if (key.name === 'down') {
+        if (items.length > 0) {
+          selectedIndex = (selectedIndex + 1) % items.length;
+          renderScreen();
         }
+        return;
       }
-      renderMenu();
-    } else if (key.name === 'return' || key.name === 'enter') {
-      let chosen = Array.from(selectedValues);
-      if (chosen.length === 0) {
-        chosen = [templates[selectedIndex].value];
+
+      if (key.name === 'space') {
+        if (items.length > 0) {
+          const currentVal = items[selectedIndex].value;
+          if (selectedValues.has(currentVal)) {
+            selectedValues.delete(currentVal);
+          } else {
+            selectedValues.add(currentVal);
+          }
+          renderScreen();
+        }
+        return;
+      }
+
+      if (key.name === 'return' || key.name === 'enter') {
+        let chosen = Array.from(selectedValues);
+        if (chosen.length === 0 && items.length > 0) {
+          chosen = [items[selectedIndex].value];
+        }
+        if (chosen.length > 0) {
+          promptFolderName(chosen);
+        }
       }
-      promptFolderName(chosen);
     }
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wad-lab",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Interactive CLI for WAD Lab starter templates compatible with Node 12+",
   "bin": {
     "wad-lab": "bin/index.js"