List of **next-stage tutorial ideas**, organized by **theme** and **complexity**, to help evolve both the teaching path and the framework.

---

## 🧩 **A. UI and Interaction Patterns**

1. **Tutorial 9 — Forms and Validation**

   * Build a `<user-form>` component with multiple fields and validation logic.
   * Introduce unit tests for validation rules and error display.
   * Show how to test async validations (e.g., simulated API check).

2. **Tutorial 10 — Modal Dialogs and Overlays**

   * Implement a `<modal-dialog>` web component using Lit and CSS transitions.
   * Demonstrate accessibility (`aria-*`) and keyboard interactions.
   * TDD focus: test open/close state, keyboard handling, and backdrop clicks.

3. **Tutorial 11 — Keyboard Navigation and Accessibility**

   * Add keyboard shortcuts and focus management to existing components.
   * Test tab order, focus restoration, and ARIA attributes using jsdom.

4. **Tutorial 12 — Dynamic Lists and Reordering**

   * Build a draggable `<sortable-list>` component.
   * Test DOM updates, drag/drop events, and final order assertions.

---

## ⚙️ **B. State, Data, and Logic**

5. **Tutorial 13 — Derived and Computed State**

   * Extend the store to include computed values (e.g., counts, filters).
   * Teach memoization and how to test reactive derivations.

6. **Tutorial 14 — Undo/Redo and Time Travel**

   * Add a store history stack and commands for undo/redo.
   * Test state rollbacks deterministically.

7. **Tutorial 15 — Multi-Store Coordination**

   * Split state across multiple stores (e.g., `UserStore`, `SettingsStore`).
   * Show how to compose subscriptions and test inter-store dependencies.

8. **Tutorial 16 — Data Fetching and Caching**

   * Use `fetch()` to load data asynchronously and cache it in the store.
   * Mock HTTP requests in tests.
   * Discuss retry and error handling patterns.

---

## 💎 **C. Styling, Theming, and Branding**

9. **Tutorial 17 — Theming and CSS Variables**

   * Implement a theme manager (light/dark/custom colors).
   * Test dynamic theme changes via store and DOM styles.

10. **Tutorial 18 — Component Libraries and Design Tokens**

    * Introduce reusable style tokens and component variants.
    * Build visual regression tests using Storybook snapshots.

---

## 🧠 **D. Architecture and Automation**

11. **Tutorial 19 — Reactive Controllers and Composition**

    * Use Lit’s `ReactiveController` pattern to encapsulate logic like stores or timers.
    * TDD pattern: one controller, multiple components.

12. **Tutorial 20 — Custom Build and Test Pipelines**

    * Show how to integrate Mocha tests into CI (GitHub Actions).
    * Include code coverage (nyc) and automatic agent test reporting.

13. **Tutorial 21 — Agentic Refactoring**

    * Demonstrate agents proposing architectural changes:

      * identifying code smells,
      * extracting controllers,
      * enforcing consistent store usage.

14. **Tutorial 22 — Agent-Driven Story Generation**

    * Agents create new Storybook stories based on test cases.
    * Bridge test specs and UX documentation automatically.

---

## 🔮 **E. Integration and Expansion**

15. **Tutorial 23 — REST and GraphQL API Integration**

    * Fetch and render real backend data.
    * Mock responses for offline testing.
    * Introduce contract tests for schema validation.

16. **Tutorial 24 — Internationalization (i18n)**

    * Add locale switching to greetings.
    * Test translation loading and pluralization behavior.

17. **Tutorial 25 — Progressive Web App (PWA) Integration**

    * Cache store data offline.
    * Add service worker tests for persistence.

18. **Tutorial 26 — Performance and Profiling**

    * Measure component render times.
    * Write regression tests for performance thresholds.

---

## 🚀 **F. Visionary / Meta Layer**

19. **Tutorial 27 — Visual AI Testing**

    * Integrate image snapshots from Storybook for visual regression comparison.
    * Show how agents can detect UI drift.

20. **Tutorial 28 — Self-Testing Components**

    * Each component ships with its own self-test harness.
    * Components can verify their own integrity in isolation.

21. **Tutorial 29 — AI-Assisted UX Heuristics**

    * Agents analyze user interaction logs and propose UI simplifications.
    * TDD for heuristic improvements.

22. **Tutorial 30 — Meta-Framework Evolution**

    * Turn TestDrive-UI into a reusable CLI (`npx testdrive-ui new <component>`).
    * Generate scaffolds, tests, and stories automatically.

xxx