Sprint 1: Auth, metro map canvas, services, and retro UI

Authentication:
- Laravel Fortify + Sanctum with Inertia views
- RBAC middleware (admin, project_owner, team_member, viewer)
- Retro terminal-styled login/register/forgot-password pages

Metro Map (core UI):
- D3.js zoomable SVG canvas with metro line rendering
- Station nodes with glow-on-hover, status coloring, tooltips
- Breadcrumb navigation for multi-level drill-down
- Node preview panel with zoom-in action
- C64-style CLI bar with blinking cursor at bottom

Backend services:
- ProjectService (CRUD, phase transitions, park/stop, audit logging)
- ThemaService (CRUD with audit)
- MapDataService (strategy map L1, project map L2)
- Thin controllers: MapController, ProjectController, ThemaController
- 32 routes total (auth + app + API)

Style foundation:
- Retro-futurism theme: VT323, Press Start 2P, IBM Plex Mono fonts
- Dark palette with cyan/orange/green/purple neon accents
- Comprehensive seed data (4 themes, 12 projects, commitments, deps)

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

resources/js/Pages/Map/MetroMap.vue

@@ -0,0 +1,127 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { usePage } from '@inertiajs/vue3'
+import MetroCanvas from '@/Components/MetroMap/MetroCanvas.vue'
+import Breadcrumb from '@/Components/MetroMap/Breadcrumb.vue'
+import NodePreview from '@/Components/MetroMap/NodePreview.vue'
+import CliBar from '@/Components/Cli/CliBar.vue'
+
+const page = usePage()
+
+// Navigation state
+const currentLevel = ref(1)
+const breadcrumbPath = ref([{ label: 'Strategie', level: 1, data: null }])
+const selectedNode = ref(null)
+const showPreview = ref(false)
+
+// Demo data for Level 1: Strategy map
+// Each theme is a metro line, projects are stations
+const demoLines = ref([
+    { id: 'water-quality', name: 'Waterkwaliteit', color: '#00d2ff' },
+    { id: 'smart-infra', name: 'Slimme Infrastructuur', color: '#e94560' },
+    { id: 'data-driven', name: 'Data-gedreven Beheer', color: '#00ff88' },
+    { id: 'sustainability', name: 'Duurzaamheid', color: '#7b68ee' },
+])
+
+const demoNodes = ref([
+    // Water Quality line
+    { id: 'wq1', name: 'Smart Sensors', lineId: 'water-quality', x: -200, y: -150, order: 1, status: 'actief', description: 'Slimme sensoren voor waterkwaliteitsmonitoring', owner: 'Jan Visser', children: 5, badge: 'Experiment' },
+    { id: 'wq2', name: 'Biomonitoring', lineId: 'water-quality', x: 0, y: -150, order: 2, status: 'concept', description: 'Biologische monitoring methoden', owner: 'Sara Jansen', children: 3, badge: 'Concept' },
+    { id: 'wq3', name: 'Voorspelmodel', lineId: 'water-quality', x: 200, y: -150, order: 3, status: 'signaal', description: 'Predictief model waterkwaliteit', badge: 'Signaal' },
+
+    // Smart Infrastructure line
+    { id: 'si1', name: 'Edge Computing', lineId: 'smart-infra', x: -200, y: -20, order: 1, status: 'actief', description: 'Edge-layer evolutie voor OT-omgevingen', owner: 'Rene de Ren', children: 8, badge: 'Pilot' },
+    { id: 'si2', name: 'Digital Twin', lineId: 'smart-infra', x: 50, y: -20, order: 2, status: 'verkenning', description: 'Digitale tweeling van zuiveringsinstallaties', children: 2, badge: 'Verkenning' },
+    { id: 'si3', name: 'Predictive Maint.', lineId: 'smart-infra', x: 250, y: -20, order: 3, status: 'concept', description: 'Voorspellend onderhoud op basis van sensordata', badge: 'Concept' },
+
+    // Data-driven line
+    { id: 'dd1', name: 'Data Platform', lineId: 'data-driven', x: -150, y: 110, order: 1, status: 'afgerond', description: 'Centraal dataplatform voor operationele data', owner: 'Lisa de Boer', badge: 'Afgerond' },
+    { id: 'dd2', name: 'ML Pipeline', lineId: 'data-driven', x: 80, y: 110, order: 2, status: 'actief', description: 'Machine learning pipeline voor anomalie-detectie', owner: 'Tom Bakker', children: 4, badge: 'Experiment' },
+    { id: 'dd3', name: 'Dashboard Suite', lineId: 'data-driven', x: 280, y: 110, order: 3, status: 'overdracht_bouwen', description: 'Operationele dashboards voor beheerders', badge: 'Overdracht' },
+
+    // Sustainability line
+    { id: 'su1', name: 'Energietransitie', lineId: 'sustainability', x: -100, y: 240, order: 1, status: 'pilot', description: 'Energieneutraal zuiveren', owner: 'Mark de Vries', children: 6, badge: 'Pilot' },
+    { id: 'su2', name: 'Circulair Water', lineId: 'sustainability', x: 150, y: 240, order: 2, status: 'verkenning', description: 'Circulaire waterbehandeling', badge: 'Verkenning' },
+])
+
+const demoConnections = ref([
+    { from: 'wq1', to: 'dd2' }, // Smart sensors feeds ML Pipeline
+    { from: 'si1', to: 'dd1' }, // Edge computing depends on data platform
+    { from: 'dd2', to: 'si3' }, // ML pipeline enables predictive maintenance
+])
+
+// Handlers
+const handleNodeClick = (node) => {
+    selectedNode.value = node
+    showPreview.value = true
+}
+
+const handleNodeHover = (node) => {
+    // Could highlight related nodes/connections
+}
+
+const handleNodeLeave = () => {
+    // Reset highlights
+}
+
+const handleZoomIn = (node) => {
+    showPreview.value = false
+    currentLevel.value++
+    breadcrumbPath.value.push({
+        label: node.name,
+        level: currentLevel.value,
+        data: node,
+    })
+    // In real app: load child nodes for this project
+}
+
+const handleBreadcrumbNavigate = (item, index) => {
+    breadcrumbPath.value = breadcrumbPath.value.slice(0, index + 1)
+    currentLevel.value = item.level
+    showPreview.value = false
+    selectedNode.value = null
+}
+
+const handleCliCommand = (command) => {
+    console.log('CLI command:', command)
+    // Will be connected to AI service
+}
+</script>
+
+<template>
+    <div class="metro-map-page">
+        <Breadcrumb
+            :path="breadcrumbPath"
+            @navigate="handleBreadcrumbNavigate"
+        />
+
+        <MetroCanvas
+            :nodes="demoNodes"
+            :lines="demoLines"
+            :connections="demoConnections"
+            :current-level="currentLevel"
+            @node-click="handleNodeClick"
+            @node-hover="handleNodeHover"
+            @node-leave="handleNodeLeave"
+        />
+
+        <NodePreview
+            :node="selectedNode"
+            :visible="showPreview"
+            @close="showPreview = false"
+            @zoom-in="handleZoomIn"
+        />
+
+        <CliBar @command="handleCliCommand" />
+    </div>
+</template>
+
+<style scoped>
+.metro-map-page {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    position: relative;
+    background: #1a1a2e;
+}
+</style>