create-auto-app 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-auto-app",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Create Auto Engineer apps with no configuration",
   "type": "module",
   "bin": {
@@ -33,7 +33,7 @@
     "fs-extra": "^11.2.0",
     "inquirer": "^9.2.15",
     "ora": "^8.0.1",
-    "@auto-engineer/id": "0.12.0"
+    "@auto-engineer/id": "0.13.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",

package/templates/kanban-todo/narratives/homepage.narrative.ts

@@ -1,131 +1,112 @@
-import { experience, narrative, should, specs } from '@auto-engineer/narrative';
-narrative('Todo Dashboard', 'AUTO-H6i9Rs2Gz', () => {
-  experience('Kanban Board View', 'AUTO-K7j0St3Hz').client(() => {
-    specs(() => {
-      should('display three distinct columns: To Do, In Progress, and Done');
-      should('show elegant column headers with gradient backgrounds');
-      should('display count badges on each column showing number of tasks');
-      should('support drag-and-drop of task cards between columns');
-      should('animate smooth transitions when tasks move between columns');
-      should('show visual feedback during drag operations with shadow elevation');
-      should('display task cards with glass morphism effect and subtle backdrop blur');
-      should('add hover effects with gentle scale and shadow transitions');
-      should('show empty state with beautiful illustrations when columns are empty');
-      should('maintain consistent card spacing and grid alignment');
-    });
+import { experience, narrative, it, describe } from '@auto-engineer/narrative';
+narrative('Todo Dashboard', 'H6i9Rs2Gz', () => {
+  experience('Kanban Board View', 'K7j0St3Hz').client(() => {
+    it('display three distinct columns: To Do, In Progress, and Done');
+    it('show elegant column headers with gradient backgrounds');
+    it('display count badges on each column showing number of tasks');
+    it('support drag-and-drop of task cards between columns');
+    it('animate smooth transitions when tasks move between columns');
+    it('show visual feedback during drag operations with shadow elevation');
+    it('display task cards with glass morphism effect and subtle backdrop blur');
+    it('add hover effects with gentle scale and shadow transitions');
+    it('show empty state with beautiful illustrations when columns are empty');
+    it('maintain consistent card spacing and grid alignment');
   });
-  experience('Task Cards', 'AUTO-T8k1Uu4Iz').client(() => {
-    specs(() => {
-      should('display task description with clear readable typography');
-      should('show status indicator with color-coded dot or icon');
-      should('display creation timestamp in subtle text');
-      should('show completion timestamp for completed tasks');
-      should('include quick action buttons appearing on hover');
-      should('support click to expand for future task details');
-      should('apply strike-through animation for completed tasks');
-      should('use gradient borders matching task status');
+  experience('Task Cards', 'T8k1Uu4Iz').client(() => {
+    describe('Task Card Layout', () => {
+      it('display task title with clear typography');
     });
+    it('should display task description with clear readable typography');
+    it('show status indicator with color-coded dot or icon');
+    it('display creation timestamp in subtle text');
+    it('show completion timestamp for completed tasks');
+    it('include quick action buttons appearing on hover');
+    it('support click to expand for future task details');
+    it('apply strike-through animation for completed tasks');
+    it('use gradient borders matching task status');
   });
-  experience('View Toggle Controls', 'AUTO-V3p6Zz9Nz').client(() => {
-    specs(() => {
-      should('provide toggle between Kanban and List views');
-      should('use segmented control or tab-style switcher');
-      should('position in top toolbar for easy access');
-      should('highlight active view with accent color');
-      should('animate view transitions with fade and slide effects');
-      should('preserve scroll position when switching views');
-      should('remember user preference in local storage');
-    });
+  experience('View Toggle Controls', 'V3p6Zz9Nz').client(() => {
+    it('provide toggle between Kanban and List views');
+    it('use segmented control or tab-style switcher');
+    it('position in top toolbar for easy access');
+    it('highlight active view with accent color');
+    it('animate view transitions with fade and slide effects');
+    it('preserve scroll position when switching views');
+    it('remember user preference in local storage');
   });
-  experience('Theme Toggle', 'AUTO-T4q7Aa0Oz').client(() => {
-    specs(() => {
-      should('support light and dark theme modes');
-      should('display sun/moon icon toggle in top bar');
-      should('transition smoothly between themes with fade animation');
-      should('adjust all colors including gradients for theme');
-      should('maintain high contrast and readability in both modes');
-      should('remember user preference in local storage');
-      should('use system preference as default');
-    });
+  experience('Theme Toggle', 'T4q7Aa0Oz').client(() => {
+    it('support light and dark theme modes');
+    it('display sun/moon icon toggle in top bar');
+    it('transition smoothly between themes with fade animation');
+    it('adjust all colors including gradients for theme');
+    it('maintain high contrast and readability in both modes');
+    it('remember user preference in local storage');
+    it('use system preference as default');
   });
-  experience('Celebration Animations', 'AUTO-C5r8Bb1Pz').client(() => {
-    specs(() => {
-      should('trigger confetti animation when task is completed');
-      should('show satisfying check mark animation');
-      should('play subtle success sound effect (optional, user configurable)');
-      should('display special animation for completing all tasks');
-      should('show streak celebration for consecutive daily completions');
-      should('use particle effects that do not obstruct UI');
-      should('respect reduced motion preferences for accessibility');
-    });
+  experience('Celebration Animations', 'C5r8Bb1Pz').client(() => {
+    it('trigger confetti animation when task is completed');
+    it('show satisfying check mark animation');
+    it('play subtle success sound effect (optional, user configurable)');
+    it('display special animation for completing all tasks');
+    it('show streak celebration for consecutive daily completions');
+    it('use particle effects that do not obstruct UI');
+    it('respect reduced motion preferences for accessibility');
   });
-  experience('Column Management', 'AUTO-M6s9Cc2Qz').client(() => {
-    specs(() => {
-      should('allow reordering tasks within same column via drag-and-drop');
-      should('auto-scroll columns when dragging near edges');
-      should('show drop zones with visual indicators');
-      should('prevent invalid drops with visual feedback');
-      should('support keyboard-based task movement for accessibility');
-      should('show task count updates immediately on column changes');
-      should('maintain smooth 60fps animations during all interactions');
-    });
+  experience('Column Management', 'M6s9Cc2Qz').client(() => {
+    it('allow reordering tasks within same column via drag-and-drop');
+    it('auto-scroll columns when dragging near edges');
+    it('show drop zones with visual indicators');
+    it('prevent invalid drops with visual feedback');
+    it('support keyboard-based task movement for accessibility');
+    it('show task count updates immediately on column changes');
+    it('maintain smooth 60fps animations during all interactions');
   });
-  experience('Empty States', 'AUTO-E7t0Dd3Rz').client(() => {
-    specs(() => {
-      should('display welcoming illustration when no tasks exist');
-      should('show encouraging message to add first task');
-      should('provide quick-add button directly in empty state');
-      should('show column-specific empty states with relevant illustrations');
-      should('use consistent visual style matching overall design system');
-      should('include helpful tips for new users');
-    });
+  experience('Empty States', 'E7t0Dd3Rz').client(() => {
+    it('display welcoming illustration when no tasks exist');
+    it('show encouraging message to add first task');
+    it('provide quick-add button directly in empty state');
+    it('show column-specific empty states with relevant illustrations');
+    it('use consistent visual style matching overall design system');
+    it('include helpful tips for new users');
   });
-  experience('Completion Progress Ring', 'AUTO-P9l2Vv5Jz').client(() => {
-    specs(() => {
-      should('display circular progress ring with gradient stroke');
-      should('show completion percentage prominently in center');
-      should('animate progress changes with smooth easing');
-      should('display total task count below percentage');
-      should('use vibrant colors for high completion rates');
-      should('show subtle pulse animation on milestone achievements');
-      should('position prominently at top of dashboard or sidebar');
-    });
+  experience('Completion Progress Ring', 'P9l2Vv5Jz').client(() => {
+    it('display circular progress ring with gradient stroke');
+    it('show completion percentage prominently in center');
+    it('animate progress changes with smooth easing');
+    it('display total task count below percentage');
+    it('use vibrant colors for high completion rates');
+    it('show subtle pulse animation on milestone achievements');
+    it('position prominently at top of dashboard or sidebar');
   });
-  experience('Quick Add Todo Widget', 'AUTO-Q0m3Ww6Kz').client(() => {
-    specs(() => {
-      should('display floating action button with plus icon');
-      should('position fixed in bottom-right corner for easy access');
-      should('expand into input form with smooth scale animation on click');
-      should('include elegant input field with placeholder text');
-      should('show submit button with icon when text is entered');
-      should('support keyboard shortcut (Ctrl/Cmd + K) to focus input');
-      should('auto-focus input when opened');
-      should('clear and collapse after successful task addition');
-      should('show loading state during task submission');
-    });
+  experience('Quick Add Todo Widget', 'Q0m3Ww6Kz').client(() => {
+    it('display floating action button with plus icon');
+    it('position fixed in bottom-right corner for easy access');
+    it('expand into input form with smooth scale animation on click');
+    it('include elegant input field with placeholder text');
+    it('show submit button with icon when text is entered');
+    it('support keyboard shortcut (Ctrl/Cmd + K) to focus input');
+    it('auto-focus input when opened');
+    it('clear and collapse after successful task addition');
+    it('show loading state during task submission');
   });
-  experience('Statistics Dashboard', 'AUTO-S1n4Xx7Lz').client(() => {
-    specs(() => {
-      should('show total tasks count with large prominent number');
-      should('display tasks completed today with celebration icon');
-      should('show breakdown: pending, in-progress, completed counts');
-      should('display completion percentage with visual indicator');
-      should('use card-based layout with glass morphism styling');
-      should('include subtle icons for each statistic');
-      should('update in real-time when tasks change status');
-      should('animate number changes with counting effect');
-    });
+  experience('Statistics Dashboard', 'S1n4Xx7Lz').client(() => {
+    it('show total tasks count with large prominent number');
+    it('display tasks completed today with celebration icon');
+    it('show breakdown: pending, in-progress, completed counts');
+    it('display completion percentage with visual indicator');
+    it('use card-based layout with glass morphism styling');
+    it('include subtle icons for each statistic');
+    it('update in real-time when tasks change status');
+    it('animate number changes with counting effect');
   });
-  experience('Recent Activity Feed', 'AUTO-R2o5Yy8Mz').client(() => {
-    specs(() => {
-      should('display recent task completions in chronological order');
-      should('show completion timestamp in relative format');
-      should('limit to last 5 completed tasks');
-      should('include task description with completed styling');
-      should('show subtle celebration icon for each completion');
-      should('use minimalist list design with dividers');
-      should('support click to view task details');
-      should('auto-scroll new completions into view with smooth animation');
-    });
+  experience('Recent Activity Feed', 'R2o5Yy8Mz').client(() => {
+    it('display recent task completions in chronological order');
+    it('show completion timestamp in relative format');
+    it('limit to last 5 completed tasks');
+    it('include task description with completed styling');
+    it('show subtle celebration icon for each completion');
+    it('use minimalist list design with dividers');
+    it('support click to view task details');
+    it('auto-scroll new completions into view with smooth animation');
   });
 });

package/templates/kanban-todo/narratives/structure.narrative.ts

@@ -1,151 +1,125 @@
-import { experience, narrative, should, specs } from '@auto-engineer/narrative';
-narrative('App Structure', 'AUTO-A8u1Ee4Sz', () => {
-  experience('Application Layout', 'AUTO-L9v2Ff5Tz').client(() => {
-    specs(() => {
-      should('display clean top navigation bar spanning full width');
-      should('include app logo or name on left side of top bar');
-      should('show view toggle controls in center of top bar');
-      should('display theme toggle, search, and profile menu on right side');
-      should('use gradient or glass morphism effect for top bar');
-      should('maintain top bar fixed position during scroll');
-      should('apply subtle shadow to separate top bar from content');
-    });
+import { experience, narrative, it } from '@auto-engineer/narrative';
+narrative('App Structure', 'A8u1Ee4Sz', () => {
+  experience('Application Layout', 'L9v2Ff5Tz').client(() => {
+    it('display clean top navigation bar spanning full width');
+    it('include app logo or name on left side of top bar');
+    it('show view toggle controls in center of top bar');
+    it('display theme toggle, search, and profile menu on right side');
+    it('use gradient or glass morphism effect for top bar');
+    it('maintain top bar fixed position during scroll');
+    it('apply subtle shadow to separate top bar from content');
   });
-  experience('Main Content Area', 'AUTO-C0w3Gg6Uz').client(() => {
-    specs(() => {
-      should('occupy full viewport height below top bar');
-      should('apply subtle gradient or textured background');
-      should('center Kanban board with max-width container for large screens');
-      should('provide adequate padding around content on all sides');
-      should('support smooth transitions when switching between views');
-      should('maintain responsive layout for tablet and mobile devices');
-      should('use CSS Grid for Kanban column layout');
-    });
+  experience('Main Content Area', 'C0w3Gg6Uz').client(() => {
+    it('occupy full viewport height below top bar');
+    it('apply subtle gradient or textured background');
+    it('center Kanban board with max-width container for large screens');
+    it('provide adequate padding around content on all sides');
+    it('support smooth transitions when switching between views');
+    it('maintain responsive layout for tablet and mobile devices');
+    it('use CSS Grid for Kanban column layout');
   });
-  experience('Column Headers', 'AUTO-H2y5Ii8Wz').client(() => {
-    specs(() => {
-      should('display column title with clear typography');
-      should('show task count badge with colored background');
-      should('use gradient or accent colors per column type');
-      should('apply sticky positioning within scrollable columns');
-      should('include subtle shadow for depth');
-      should('maintain consistent height across all columns');
-    });
+  experience('Column Headers', 'H2y5Ii8Wz').client(() => {
+    it('display column title with clear typography');
+    it('show task count badge with colored background');
+    it('use gradient or accent colors per column type');
+    it('apply sticky positioning within scrollable columns');
+    it('include subtle shadow for depth');
+    it('maintain consistent height across all columns');
   });
-  experience('Floating Action Button', 'AUTO-F3z6Jj9Xz').client(() => {
-    specs(() => {
-      should('position fixed in bottom-right corner of viewport');
-      should('display prominent plus icon or "Add" text');
-      should('use vibrant gradient or solid accent color');
-      should('apply circular shape with consistent size');
-      should('show shadow for elevation effect');
-      should('animate subtle pulse or glow on hover');
-      should('expand into input form with smooth scale animation on click');
-      should('maintain z-index above all other content');
-      should('hide on mobile when keyboard is visible');
-    });
+  experience('Floating Action Button', 'F3z6Jj9Xz').client(() => {
+    it('position fixed in bottom-right corner of viewport');
+    it('display prominent plus icon or "Add" text');
+    it('use vibrant gradient or solid accent color');
+    it('apply circular shape with consistent size');
+    it('show shadow for elevation effect');
+    it('animate subtle pulse or glow on hover');
+    it('expand into input form with smooth scale animation on click');
+    it('maintain z-index above all other content');
+    it('hide on mobile when keyboard is visible');
   });
-  experience('Statistics Sidebar', 'AUTO-S4a7Kk0Yz').client(() => {
-    specs(() => {
-      should('display on right side of screen in desktop view');
-      should('show progress ring at top of sidebar');
-      should('include statistics cards in vertical stack');
-      should('display recent activity feed below statistics');
-      should('apply glass morphism or card-based design');
-      should('collapse into expandable panel on tablet devices');
-      should('move to bottom sheet on mobile devices');
-      should('support toggle to show/hide for more workspace');
-    });
+  experience('Statistics Sidebar', 'S4a7Kk0Yz').client(() => {
+    it('display on right side of screen in desktop view');
+    it('show progress ring at top of sidebar');
+    it('include statistics cards in vertical stack');
+    it('display recent activity feed below statistics');
+    it('apply glass morphism or card-based design');
+    it('collapse into expandable panel on tablet devices');
+    it('move to bottom sheet on mobile devices');
+    it('support toggle to show/hide for more workspace');
   });
-  experience('Task Detail Panel', 'AUTO-D5b8Ll1Zz').client(() => {
-    specs(() => {
-      should('slide in from right side when task is clicked');
-      should('overlay main content with backdrop blur on mobile');
-      should('show full task information with edit capabilities');
-      should('include close button in top-right corner');
-      should('support swipe gesture to close on touch devices');
-      should('maintain consistent width on desktop');
-      should('animate slide-in/out with smooth easing');
-      should('trap focus within panel when open for accessibility');
-    });
+  experience('Task Detail Panel', 'D5b8Ll1Zz').client(() => {
+    it('slide in from right side when task is clicked');
+    it('overlay main content with backdrop blur on mobile');
+    it('show full task information with edit capabilities');
+    it('include close button in top-right corner');
+    it('support swipe gesture to close on touch devices');
+    it('maintain consistent width on desktop');
+    it('animate slide-in/out with smooth easing');
+    it('trap focus within panel when open for accessibility');
   });
-  experience('Search Overlay', 'AUTO-S6c9Mm2Az').client(() => {
-    specs(() => {
-      should('trigger with keyboard shortcut Cmd/Ctrl + K');
-      should('display centered modal overlay with backdrop blur');
-      should('show search input with large font size');
-      should('include recent searches or suggestions below input');
-      should('filter and display matching tasks in real-time');
-      should('support keyboard navigation through results');
-      should('close on Escape key or clicking backdrop');
-      should('focus input automatically when opened');
-    });
+  experience('Search Overlay', 'S6c9Mm2Az').client(() => {
+    it('trigger with keyboard shortcut Cmd/Ctrl + K');
+    it('display centered modal overlay with backdrop blur');
+    it('show search input with large font size');
+    it('include recent searches or suggestions below input');
+    it('filter and display matching tasks in real-time');
+    it('support keyboard navigation through results');
+    it('close on Escape key or clicking backdrop');
+    it('focus input automatically when opened');
   });
-  experience('Mobile Navigation', 'AUTO-M7d0Nn3Bz').client(() => {
-    specs(() => {
-      should('collapse top bar controls into hamburger menu on small screens');
-      should('show essential actions as bottom tab bar on mobile');
-      should('include tabs for: Kanban, Statistics, Add, Settings');
-      should('highlight active tab with accent color');
-      should('use icons for tabs with optional labels');
-      should('maintain fixed position at bottom of viewport');
-      should('apply safe area insets for notched devices');
-    });
+  experience('Mobile Navigation', 'M7d0Nn3Bz').client(() => {
+    it('collapse top bar controls into hamburger menu on small screens');
+    it('show essential actions as bottom tab bar on mobile');
+    it('include tabs for: Kanban, Statistics, Add, Settings');
+    it('highlight active tab with accent color');
+    it('use icons for tabs with optional labels');
+    it('maintain fixed position at bottom of viewport');
+    it('apply safe area insets for notched devices');
   });
-  experience('Responsive Breakpoints', 'AUTO-R8e1Oo4Cz').client(() => {
-    specs(() => {
-      should('support desktop layout for screens 1024px and wider');
-      should('adapt to tablet layout for screens 768px to 1023px');
-      should('optimize for mobile devices below 768px');
-      should('stack Kanban columns vertically on screens below 640px');
-      should('adjust font sizes and spacing for each breakpoint');
-      should('maintain touch-friendly tap targets on all devices');
-      should('test on common device dimensions for consistency');
-    });
+  experience('Responsive Breakpoints', 'R8e1Oo4Cz').client(() => {
+    it('support desktop layout for screens 1024px and wider');
+    it('adapt to tablet layout for screens 768px to 1023px');
+    it('optimize for mobile devices below 768px');
+    it('stack Kanban columns vertically on screens below 640px');
+    it('adjust font sizes and spacing for each breakpoint');
+    it('maintain touch-friendly tap targets on all devices');
+    it('test on common device dimensions for consistency');
   });
-  experience('Loading States', 'AUTO-L9f2Pp5Dz').client(() => {
-    specs(() => {
-      should('show skeleton loaders for initial page load');
-      should('display shimmer effect on loading cards');
-      should('include spinner for async operations');
-      should('maintain layout stability during loading');
-      should('show optimistic UI updates for immediate feedback');
-      should('handle slow network conditions gracefully');
-      should('provide timeout fallback with retry option');
-    });
+  experience('Loading States', 'L9f2Pp5Dz').client(() => {
+    it('show skeleton loaders for initial page load');
+    it('display shimmer effect on loading cards');
+    it('include spinner for async operations');
+    it('maintain layout stability during loading');
+    it('show optimistic UI updates for immediate feedback');
+    it('handle slow network conditions gracefully');
+    it('provide timeout fallback with retry option');
   });
-  experience('Error States', 'AUTO-E0g3Qq6Ez').client(() => {
-    specs(() => {
-      should('display inline error messages near relevant fields');
-      should('show toast notifications for global errors');
-      should('include helpful error messages with suggested actions');
-      should('use consistent error styling with red accent color');
-      should('provide retry buttons for failed operations');
-      should('log errors to console for debugging');
-      should('support error boundary for graceful failure recovery');
-    });
+  experience('Error States', 'E0g3Qq6Ez').client(() => {
+    it('display inline error messages near relevant fields');
+    it('show toast notifications for global errors');
+    it('include helpful error messages with suggested actions');
+    it('use consistent error styling with red accent color');
+    it('provide retry buttons for failed operations');
+    it('log errors to console for debugging');
+    it('support error boundary for graceful failure recovery');
   });
-  experience('Accessibility Features', 'AUTO-A1h4Rr7Fz').client(() => {
-    specs(() => {
-      should('support full keyboard navigation throughout app');
-      should('provide ARIA labels for all interactive elements');
-      should('include skip links for main content areas');
-      should('maintain focus indicators with high contrast');
-      should('support screen reader announcements for dynamic changes');
-      should('respect prefers-reduced-motion for animations');
-      should('ensure color contrast meets WCAG AA standards');
-      should('provide alt text for all decorative images and icons');
-    });
+  experience('Accessibility Features', 'A1h4Rr7Fz').client(() => {
+    it('support full keyboard navigation throughout app');
+    it('provide ARIA labels for all interactive elements');
+    it('include skip links for main content areas');
+    it('maintain focus indicators with high contrast');
+    it('support screen reader announcements for dynamic changes');
+    it('respect prefers-reduced-motion for animations');
+    it('ensure color contrast meets WCAG AA standards');
+    it('provide alt text for all decorative images and icons');
   });
-  experience('Kanban Board Container', 'AUTO-K1x4Hh7Vz').client(() => {
-    specs(() => {
-      should('display three equal-width columns in desktop view');
-      should('apply consistent gap spacing between columns');
-      should('stack columns vertically on mobile devices');
-      should('support horizontal scrolling on smaller screens if needed');
-      should('maintain minimum column width for readability');
-      should('apply max-height with scroll for columns with many tasks');
-      should('show subtle scrollbar styling matching theme');
-    });
+  experience('Kanban Board Container', 'K1x4Hh7Vz').client(() => {
+    it('display three equal-width columns in desktop view');
+    it('apply consistent gap spacing between columns');
+    it('stack columns vertically on mobile devices');
+    it('support horizontal scrolling on smaller screens if needed');
+    it('maintain minimum column width for readability');
+    it('apply max-height with scroll for columns with many tasks');
+    it('show subtle scrollbar styling matching theme');
   });
 });