feat: ST-201-ST-210 M2 stories, drag-and-drop en Zustand stores

- usePlannerStore met pbiOrder/storyOrder init/reorder/rollback (ST-201)
- useSelectionStore uitgebreid met selectedStoryId en clearSelection (ST-202)
- PBI drag-and-drop binnen prioriteitsgroep via dnd-kit (ST-203)
- PBI slepen over prioriteitsgrens wijzigt priority (ST-204)
- Stories als blokken met prioriteit- en statusbadge (ST-205/ST-206)
- Story drag-and-drop horizontaal binnen en tussen groepen (ST-207)
- Story detail slide-over met bewerkformulier (ST-208)
- Story verwijderen met bevestigingsstap (ST-209)
- Filter op status en prioriteit in rechterpaneel (ST-210)
- Fix: infinite loop in useEffect door stabiele string dependency

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.icons/icon-master.svg

@@ -0,0 +1,92 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- Background gradient -->
+    <linearGradient id="bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#1a1028"/>
+      <stop offset="100%" stop-color="#0d0a14"/>
+    </linearGradient>
+
+    <!-- Rocket nose gradient -->
+    <linearGradient id="nose" x1="256" y1="52" x2="256" y2="210" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#c4b5fd"/>
+      <stop offset="100%" stop-color="#7c3aed"/>
+    </linearGradient>
+
+    <!-- Glow filter -->
+    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="8" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- Flame glow -->
+    <filter id="flame-glow" x="-40%" y="-40%" width="180%" height="180%">
+      <feGaussianBlur stdDeviation="6" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Background rounded rect -->
+  <rect width="512" height="512" rx="114" fill="url(#bg)"/>
+
+  <!-- Subtle radial glow behind rocket -->
+  <ellipse cx="256" cy="270" rx="140" ry="160" fill="#7c3aed" opacity="0.07"/>
+
+  <!-- ── BLOCK 1 (PBI) — bottom ── -->
+  <rect x="178" y="374" width="156" height="64" rx="14" fill="#3b55c4" opacity="0.55"/>
+  <rect x="178" y="374" width="156" height="64" rx="14" stroke="#4f6ef7" stroke-width="2" fill="none"/>
+  <!-- PBI label dots -->
+  <circle cx="210" cy="406" r="5" fill="#7c9fff" opacity="0.7"/>
+  <circle cx="228" cy="406" r="5" fill="#7c9fff" opacity="0.5"/>
+  <circle cx="246" cy="406" r="5" fill="#7c9fff" opacity="0.3"/>
+
+  <!-- ── BLOCK 2 (Story) — middle ── -->
+  <rect x="148" y="294" width="216" height="76" rx="14" fill="#4c52b8" opacity="0.7"/>
+  <rect x="148" y="294" width="216" height="76" rx="14" stroke="#818cf8" stroke-width="2" fill="none"/>
+  <!-- Story label line -->
+  <rect x="174" y="322" width="100" height="6" rx="3" fill="#a5b4fc" opacity="0.5"/>
+  <rect x="174" y="338" width="68" height="6" rx="3" fill="#a5b4fc" opacity="0.3"/>
+
+  <!-- ── BLOCK 3 (Task) — upper body ── -->
+  <rect x="164" y="210" width="184" height="80" rx="14" fill="#6d28d9" opacity="0.85"/>
+  <rect x="164" y="210" width="184" height="80" rx="14" stroke="#a78bfa" stroke-width="2" fill="none"/>
+  <!-- Task checkmark -->
+  <path d="M196 252 L212 268 L240 238" stroke="#c4b5fd" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.8"/>
+
+  <!-- ── ROCKET NOSE ── -->
+  <path d="M256 52 C224 52 164 112 164 210 H348 C348 112 288 52 256 52Z"
+        fill="url(#nose)" opacity="0.95" filter="url(#glow)"/>
+
+  <!-- Nose highlight -->
+  <path d="M256 70 C238 70 200 118 196 190"
+        stroke="white" stroke-width="3" stroke-linecap="round" opacity="0.15" fill="none"/>
+
+  <!-- ── WINDOW ── -->
+  <circle cx="256" cy="148" r="34" fill="#0d0a14" opacity="0.65"/>
+  <circle cx="256" cy="148" r="26" fill="#ddd6fe" opacity="0.12"/>
+  <circle cx="256" cy="148" r="18" fill="#ede9fe" opacity="0.9"/>
+  <!-- Window shine -->
+  <circle cx="248" cy="140" r="5" fill="white" opacity="0.6"/>
+
+  <!-- ── FINS ── -->
+  <path d="M164 330 L110 400 L164 400 Z" fill="#3b55c4" opacity="0.55"/>
+  <path d="M164 330 L110 400 L164 400 Z" stroke="#4f6ef7" stroke-width="1.5" fill="none" opacity="0.6"/>
+  <path d="M348 330 L402 400 L348 400 Z" fill="#3b55c4" opacity="0.55"/>
+  <path d="M348 330 L402 400 L348 400 Z" stroke="#4f6ef7" stroke-width="1.5" fill="none" opacity="0.6"/>
+
+  <!-- ── EXHAUST FLAME ── -->
+  <path d="M214 438 Q235 480 256 462 Q277 480 298 438"
+        stroke="#f59e0b" stroke-width="10" stroke-linecap="round" fill="none"
+        opacity="0.9" filter="url(#flame-glow)"/>
+  <path d="M228 438 Q242 468 256 455 Q270 468 284 438"
+        stroke="#fcd34d" stroke-width="7" stroke-linecap="round" fill="none"
+        opacity="0.75"/>
+  <path d="M238 438 Q248 458 256 450 Q264 458 274 438"
+        stroke="#fef3c7" stroke-width="4" stroke-linecap="round" fill="none"
+        opacity="0.6"/>
+</svg>