# Magic Theme Transition Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Add a smooth Magic Move style transition when switching NataAset between dark mode and light mode.

**Architecture:** Keep the existing `data-theme` system and add a single global transition layer controlled by `dashboard.js`. The layer uses CSS variables for click position and color, while `applyTheme()` remains responsible for icon, label, and switch state.

**Tech Stack:** Laravel Blade, vanilla JavaScript, CSS animations.

---

### Task 1: Add Theme Transition Contract

**Files:**
- Modify: `resources/views/layouts/app.blade.php`
- Modify: `tests/Feature/ExampleTest.php`

- [ ] **Step 1: Write the failing test**

Assert the dashboard layout renders `data-theme-transition` and the public CSS/JS include the transition identifiers.

- [ ] **Step 2: Run test to verify it fails**

Run: `php artisan test --filter=test_the_application_returns_a_successful_response`

- [ ] **Step 3: Add transition layer markup**

Add `<div class="theme-transition-layer" data-theme-transition aria-hidden="true"></div>` near the existing global overlays in the layout.

- [ ] **Step 4: Run test to verify it passes**

Run: `php artisan test --filter=test_the_application_returns_a_successful_response`

### Task 2: Implement Magic Move Theme Toggle

**Files:**
- Modify: `public/assets/js/dashboard.js`
- Modify: `public/assets/css/dashboard-redesign.css`
- Modify: `tests/Feature/ExampleTest.php`

- [ ] **Step 1: Write the failing test**

Assert JS contains `runThemeTransition`, `data-theme-transition`, `--theme-transition-x`, and `prefers-reduced-motion`.

- [ ] **Step 2: Run test to verify it fails**

Run: `php artisan test --filter=test_native_selects_are_enhanced_with_custom_dropdown_ui`

- [ ] **Step 3: Implement transition**

Add `themeTransitionLayer`, `prefersReducedThemeMotion()`, `runThemeTransition()`, and update theme toggle click handlers to call it before `applyTheme()`.

- [ ] **Step 4: Add CSS animation**

Add `.theme-transition-layer`, `.theme-transition-layer.is-running`, and keyframes for expanding radial reveal. Add reduced-motion rules to disable the animation.

- [ ] **Step 5: Verify**

Run:
`node --check public\assets\js\dashboard.js`
`php artisan view:cache`
`php artisan test`
`php artisan view:clear`
