- );
-}
-```
-
-**Step 3: Integrate WindowControls into TopBar**
-
-In `src/components/layout/TopBar.tsx`, add this import at the top:
-
-```typescript
-import { WindowControls } from "@/components/layout/WindowControls";
-```
-
-Then, at the very end of the right section `
` (after the Settings tooltip, before the closing `
` on line 241), add:
-
-```tsx
-
-```
-
-**Step 4: Test**
-
-Run: `npm run tauri dev`
-Verify: Native titlebar is gone. Custom minimize/maximize/close buttons appear in TopBar right side. Window dragging still works via the header. All three buttons function correctly.
-
-**Step 5: Commit**
-
-```bash
-git add src-tauri/tauri.conf.json src/components/layout/WindowControls.tsx src/components/layout/TopBar.tsx
-git commit -m "feat: custom window titlebar — remove native decorations, add WindowControls to TopBar"
-```
-
----
-
-### Task 4: Page transitions in App.tsx
-
-**Files:**
-- Modify: `src/App.tsx`
-
-**Step 1: Add AnimatePresence page transitions**
-
-Replace the imports and the view rendering section in `src/App.tsx`.
-
-Add to imports:
-
-```typescript
-import { AnimatePresence, motion } from "framer-motion";
-import { springs, fadeSlideLeft, fadeSlideRight } from "@/lib/motion";
-```
-
-Replace line 76 (the view conditional):
-
-```tsx
-{view.type === "board-list" ? : }
-```
-
-With:
-
-```tsx
-
- {view.type === "board-list" ? (
-
-
-
- ) : (
-
-
-
- )}
-
-```
-
-**Step 2: Test**
-
-Run: `npm run tauri dev`
-Navigate between board list and board view. Verify smooth slide transitions with gentle spring.
-
-**Step 3: Commit**
-
-```bash
-git add src/App.tsx
-git commit -m "feat: add AnimatePresence page transitions between views"
-```
-
----
-
-### Task 5: Board list stagger animations
-
-**Files:**
-- Modify: `src/components/boards/BoardList.tsx`
-- Modify: `src/components/boards/BoardCard.tsx`
-
-**Step 1: Add stagger container to BoardList**
-
-In `src/components/boards/BoardList.tsx`, add imports:
-
-```typescript
-import { motion } from "framer-motion";
-import { staggerContainer, fadeSlideUp, springs, scaleIn } from "@/lib/motion";
-```
-
-Replace the empty state content (lines 27-44, the `
` block) — wrap the inner content with motion for fade-in:
-
-```tsx
-
-
-
- Welcome to OpenPylon
-
-
- A local-first Kanban board that keeps your data on your machine.
- Create your first board to get started.
-
-
-
-
-
-
-
-```
-
-Replace the board grid `
` (line 68):
-
-```tsx
-
-```
-
-With a `motion.div` stagger container:
-
-```tsx
-
-```
-
-**Step 2: Update BoardCard to use shared variants**
-
-In `src/components/boards/BoardCard.tsx`, add imports:
-
-```typescript
-import { fadeSlideUp, springs, subtleHover } from "@/lib/motion";
-```
-
-Replace the existing `` wrapper (lines 76-80):
-
-```tsx
-
-```
-
-With:
-
-```tsx
-
-```
-
-Remove the `index` prop from the `BoardCardProps` interface and function signature — stagger is now handled by the parent container. Also remove the `index = 0` default parameter.
-
-**Step 3: Commit**
-
-```bash
-git add src/components/boards/BoardList.tsx src/components/boards/BoardCard.tsx
-git commit -m "feat: add stagger animations to board list and board cards"
-```
-
----
-
-### Task 6: Board view — column stagger + card stagger
-
-**Files:**
-- Modify: `src/components/board/BoardView.tsx`
-- Modify: `src/components/board/KanbanColumn.tsx`
-- Modify: `src/components/board/CardThumbnail.tsx`
-
-**Step 1: Add column stagger to BoardView**
-
-In `src/components/board/BoardView.tsx`, add imports:
-
-```typescript
-import { motion } from "framer-motion";
-import { staggerContainer, springs } from "@/lib/motion";
-```
-
-Wrap the column list container (line 323, the `
`) — replace the `
` with ``:
-
-```tsx
-
-```
-
-Also change the closing `
` (line 378) to ``.
-
-**Step 2: Update KanbanColumn to use shared config**
-
-In `src/components/board/KanbanColumn.tsx`, update the import:
-
-```typescript
-import { motion, useReducedMotion } from "framer-motion";
-```
-
-Add:
-
-```typescript
-import { fadeSlideUp, springs, staggerContainer } from "@/lib/motion";
-```
-
-Replace the `` props (lines 66-74):
-
-```tsx
-
-```
-
-With:
-
-```tsx
-
-```
-
-Wrap the `
` card list (line 87) with stagger. Replace the `
`:
-
-```tsx
-
-```
-
-With a `motion.ul`:
-
-```tsx
-
-```
-
-Change the closing `
` to ``.
-
-**Step 3: Update CardThumbnail to use shared config**
-
-In `src/components/board/CardThumbnail.tsx`, add imports:
-
-```typescript
-import { fadeSlideUp, springs, subtleHover } from "@/lib/motion";
-```
-
-Replace the `` props (lines 49-56):
-
-```tsx
-`:
-
-After the `layout` prop, add:
-
-```tsx
-layoutId={`card-${card.id}`}
-```
-
-**Step 2: Replace Radix Dialog with custom Framer Motion modal in CardDetailModal**
-
-This is the most complex change. We replace the Radix `