Metro map interaction redesign: fit-to-view zoom, grid, branch handles, custom tracks

Phase 1 — Fit-to-view zoom:
- computeFitTransform() calculates bounding box and scales to fit all nodes
- Replaces hardcoded scale=1 reset in animateZoomReset() and initCanvas()
- Dim 1 no longer appears tiny after zooming out from dim 2

Phase 2 — Grid system:
- Shared gridConstants.js (GRID=50, GRID_STEP_X=200, GRID_STEP_Y=150)
- MapDataService snapToGrid() aligns all node positions server-side
- Canvas renders subtle grid lines (shown on interaction only, with fade)
- Line highlighting support via setHighlightedLine() for FAB hover

Phase 3 — Branch handles:
- Hover any station node → 3 "+" handles appear (0°/45°/315°)
- 0° extends the current line, 45°/315° fork to create new branch
- Ghost preview (dashed line + circle) on handle hover
- Handles only show at unoccupied grid positions
- Grid fades in during handle interaction, fades out after

Phase 4 — Custom tracks database:
- metro_lines table (project_id, naam, color, type, order)
- metro_nodes table (metro_line_id, naam, status, x, y, order)
- MetroLine + MetroNode models, controllers, routes
- Project.metroLines() relationship added

Phase 5+6 — FAB redesign + MetroMap wiring:
- FAB shows "Nieuw thema (lijn)" at root, "Nieuwe lijn" in project dim
- Track creation modal with retro-styled form
- MetroMap handles create-node events from branch handles
- Extend (0°) opens commitment/document form, fork opens track form
- Canvas context menu replaced with "hover to branch" hint

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/Http/Controllers/MetroLineController.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\MetroLine;
+use Illuminate\Http\Request;
+
+class MetroLineController extends Controller
+{
+    public function store(Request $request)
+    {
+        $validated = $request->validate([
+            'project_id' => 'required|exists:projects,id',
+            'naam'       => 'required|string|max:255',
+            'color'      => 'nullable|string|max:7',
+        ]);
+
+        $maxOrder = MetroLine::where('project_id', $validated['project_id'])->max('order') ?? 0;
+
+        $line = MetroLine::create([
+            'project_id' => $validated['project_id'],
+            'naam'       => $validated['naam'],
+            'color'      => $validated['color'] ?? $this->nextColor($validated['project_id']),
+            'type'       => 'custom',
+            'order'      => $maxOrder + 1,
+        ]);
+
+        return back()->with('success', "Lijn '{$line->naam}' aangemaakt.");
+    }
+
+    public function destroy(MetroLine $metroLine)
+    {
+        if ($metroLine->isBuiltIn()) {
+            return back()->with('error', 'Ingebouwde lijnen kunnen niet verwijderd worden.');
+        }
+
+        $metroLine->delete();
+
+        return back()->with('success', 'Lijn verwijderd.');
+    }
+
+    private function nextColor(int $projectId): string
+    {
+        $colors = ['#ff6b6b', '#ffd93d', '#6bcb77', '#4d96ff', '#ff8fab', '#a8dadc', '#e07a5f', '#81b29a'];
+        $used = MetroLine::where('project_id', $projectId)->pluck('color')->toArray();
+
+        foreach ($colors as $c) {
+            if (!in_array($c, $used)) {
+                return $c;
+            }
+        }
+
+        return $colors[0];
+    }
+}