Recursive zoom dimensions with smooth transitions

MetroCanvas rewrite:
- Dimension stack: every node can contain children forming a sub-metro-map
- Zoom-triggered transitions: scroll-zoom near a node gradually cross-fades
  parent dimension out and child dimension in (threshold 2.5x, range 1.5x)
- Zoom out past 0.5x transitions back to parent dimension
- Right-click context menu: "New node here" on canvas, "Edit/Add child/Delete" on stations
- Depth indicator HUD with back button
- Transition progress bar during cross-fade
- Nodes with children get dashed ring + glow indicator

Backend:
- MapDataService now includes children data inline per project node
- Each project's children contain lifecycle phases, commitments, documents as sub-map
- New API endpoint: GET /api/map/node/{type}/{id}/children for lazy loading
- Consistent data structure: every node has children field (null = leaf)

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

app/Http/Controllers/MapController.php

@@ -43,4 +43,9 @@ class MapController extends Controller
     {
         return response()->json($this->mapDataService->getProjectMap($projectId));
     }
+
+    public function apiNodeChildren(string $type, int $id)
+    {
+        return response()->json($this->mapDataService->getNodeChildren($type, $id));
+    }
 }

app/Services/MapDataService.php

@@ -17,7 +17,7 @@ class MapDataService
     {
         $themas = Thema::with([
             'speerpunten.projects' => function ($q) {
-                $q->with('eigenaar')
+                $q->with(['eigenaar', 'fases', 'commitments.eigenaar', 'documents.auteur', 'risicos'])
                     ->withCount(['documents', 'commitments', 'risicos', 'fases']);
             }
         ])->get();
@@ -54,7 +54,7 @@ class MapDataService
                     'description' => Str::limit($project->beschrijving, 100),
                     'owner' => $project->eigenaar?->name,
                     'badge' => ucfirst(str_replace('_', ' ', $project->status->value)),
-                    'children' => $project->documents_count + $project->commitments_count,
+                    'children' => $this->buildProjectChildren($project),
                 ];
             }
 
@@ -114,6 +114,7 @@ class MapDataService
                 'order' => $order + 1,
                 'status' => $fase->status->value,
                 'badge' => ucfirst($fase->status->value),
+                'children' => null,
             ];
         }
 
@@ -131,6 +132,7 @@ class MapDataService
                 'status' => $commitment->status->value,
                 'owner' => $commitment->eigenaar?->name,
                 'badge' => $commitment->deadline?->format('d M'),
+                'children' => null,
             ];
         }
 
@@ -147,6 +149,7 @@ class MapDataService
                 'order' => $order + 1,
                 'status' => 'active',
                 'badge' => "v{$doc->versie}",
+                'children' => null,
             ];
         }
 
@@ -162,4 +165,94 @@ class MapDataService
             ],
         ];
     }
+
+    /**
+     * Build the Level 2 children data for a project node.
+     * Used inline in getStrategyMap() and via getNodeChildren().
+     */
+    private function buildProjectChildren(Project $project): array
+    {
+        $project->loadMissing(['fases', 'commitments.eigenaar', 'documents.auteur', 'risicos']);
+
+        $lines = [
+            ['id' => "lifecycle-{$project->id}", 'name' => 'Levenscyclus', 'color' => '#00d2ff'],
+            ['id' => "commitments-{$project->id}", 'name' => 'Commitments', 'color' => '#e94560'],
+            ['id' => "documents-{$project->id}", 'name' => 'Documenten', 'color' => '#7b68ee'],
+        ];
+
+        $nodes = [];
+        $xOffset = -250;
+        $spacing = 200;
+
+        // Phase nodes
+        foreach ($project->fases->sortBy('created_at') as $i => $fase) {
+            $nodes[] = [
+                'id' => "fase-{$fase->id}",
+                'entityId' => $fase->id,
+                'entityType' => 'fase',
+                'name' => ucfirst(str_replace('_', ' ', $fase->type->value)),
+                'lineId' => "lifecycle-{$project->id}",
+                'x' => $xOffset + ($i * $spacing),
+                'y' => -60,
+                'order' => $i + 1,
+                'status' => $fase->status->value,
+                'badge' => ucfirst($fase->status->value),
+                'children' => null, // Phases could have children in future
+            ];
+        }
+
+        // Commitment nodes
+        foreach ($project->commitments as $i => $commitment) {
+            $nodes[] = [
+                'id' => "commitment-{$commitment->id}",
+                'entityId' => $commitment->id,
+                'entityType' => 'commitment',
+                'name' => Str::limit($commitment->beschrijving, 35),
+                'lineId' => "commitments-{$project->id}",
+                'x' => $xOffset + ($i * $spacing),
+                'y' => 80,
+                'order' => $i + 1,
+                'status' => $commitment->status->value,
+                'owner' => $commitment->eigenaar?->name,
+                'badge' => $commitment->deadline?->format('d M Y'),
+                'children' => null, // Could contain acties in future
+            ];
+        }
+
+        // Document nodes
+        foreach ($project->documents as $i => $doc) {
+            $nodes[] = [
+                'id' => "document-{$doc->id}",
+                'entityId' => $doc->id,
+                'entityType' => 'document',
+                'name' => $doc->titel,
+                'lineId' => "documents-{$project->id}",
+                'x' => $xOffset + ($i * $spacing),
+                'y' => 220,
+                'order' => $i + 1,
+                'status' => 'active',
+                'badge' => "v{$doc->versie}",
+                'children' => null,
+            ];
+        }
+
+        return [
+            'lines' => $lines,
+            'nodes' => $nodes,
+            'connections' => [],
+        ];
+    }
+
+    /**
+     * Return children for any node by entity type and ID.
+     * Used by the API endpoint for on-demand dimension data.
+     */
+    public function getNodeChildren(string $entityType, int $entityId): ?array
+    {
+        return match ($entityType) {
+            'project' => $this->buildProjectChildren(Project::findOrFail($entityId)),
+            // Future: 'commitment' => $this->buildCommitmentChildren(...)
+            default => null,
+        };
+    }
 }

resources/js/Components/MetroMap/MetroCanvas.vue

@@ -1,32 +1,131 @@
 <script setup>
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
+import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue'
 import * as d3 from 'd3'
 
+// ---------------------------------------------------------------------------
+// Props & Emits
+// ---------------------------------------------------------------------------
+
 const props = defineProps({
+    dimensions: { type: Object, default: () => ({}) }, // root dimension data
+    currentPath: { type: Array, default: () => [] },   // breadcrumb path of dimension IDs
+
+    // Legacy flat-prop support (for backward compat with MetroMap.vue)
     nodes: { type: Array, default: () => [] },
     lines: { type: Array, default: () => [] },
     connections: { type: Array, default: () => [] },
     currentLevel: { type: Number, default: 1 },
 })
 
-const emit = defineEmits(['node-click', 'node-hover', 'node-leave', 'zoom-change'])
+const emit = defineEmits([
+    'node-click',
+    'node-hover',
+    'node-leave',
+    'dimension-change',
+    'create-node',
+    'edit-node',
+    'delete-node',
+    'zoom-change',
+])
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const ZOOM_IN_THRESHOLD  = 2.5
+const ZOOM_OUT_THRESHOLD = 0.5
+const TRANSITION_RANGE   = 1.5
+
+const LINE_COLORS = [
+    '#00d2ff', '#e94560', '#00ff88', '#7b68ee',
+    '#ff6b6b', '#ffd93d', '#6bcb77', '#4d96ff',
+    '#ff8fab', '#a8dadc', '#e07a5f', '#81b29a',
+]
+
+// ---------------------------------------------------------------------------
+// Refs
+// ---------------------------------------------------------------------------
 
 const svgRef       = ref(null)
 const containerRef = ref(null)
 const transform    = ref(d3.zoomIdentity)
 const hoveredNode  = ref(null)
 
-// Metro line colors
+// Dimension stack: each entry is a full metro-map dimension object
-const lineColors = [
+const dimensionStack = ref([])
-    '#00d2ff', '#e94560', '#00ff88', '#7b68ee',
+const currentDimensionIndex = ref(0)
-    '#ff6b6b', '#ffd93d', '#6bcb77', '#4d96ff',
-    '#ff8fab', '#a8dadc', '#e07a5f', '#81b29a',
-]
 
-const getLineColor = (index) => lineColors[index % lineColors.length]
+// Transition state
+const transitionState = ref({
+    active: false,
+    direction: null,   // 'in' | 'out'
+    progress: 0,
+    targetNode: null,
+    childDimension: null,
+})
 
+// Context menu
+const contextMenu = ref({
+    show: false,
+    x: 0, y: 0,
+    type: null,        // 'canvas' | 'node'
+    node: null,
+    canvasX: 0, canvasY: 0,
+})
+
+// D3 references (module-level, not reactive)
 let svg, g, zoom
 
+// ---------------------------------------------------------------------------
+// Derived helpers
+// ---------------------------------------------------------------------------
+
+const getLineColor = (index) => LINE_COLORS[index % LINE_COLORS.length]
+
+/** The dimension data that is currently "active" (top of stack) */
+const currentDimensionData = computed(() => {
+    return dimensionStack.value[currentDimensionIndex.value] ?? null
+})
+
+/** Flat list of nodes in the current dimension */
+const currentNodes = computed(() => {
+    return currentDimensionData.value?.nodes ?? []
+})
+
+/** Current depth (1-based) */
+const currentDepth = computed(() => currentDimensionIndex.value + 1)
+
+// ---------------------------------------------------------------------------
+// Bootstrap dimension stack from props
+// ---------------------------------------------------------------------------
+
+const buildRootDimension = () => {
+    // If a structured `dimensions` prop is provided, use it as root.
+    // Otherwise fall back to the legacy flat props (nodes/lines/connections).
+    if (props.dimensions && (props.dimensions.nodes || props.dimensions.lines)) {
+        return {
+            id: 'root',
+            parentNodeId: null,
+            lines: props.dimensions.lines ?? [],
+            nodes: props.dimensions.nodes ?? [],
+            connections: props.dimensions.connections ?? [],
+            opacity: 1,
+        }
+    }
+    return {
+        id: 'root',
+        parentNodeId: null,
+        lines: props.lines ?? [],
+        nodes: props.nodes ?? [],
+        connections: props.connections ?? [],
+        opacity: 1,
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Canvas init
+// ---------------------------------------------------------------------------
+
 const initCanvas = () => {
     if (!svgRef.value) return
 
@@ -37,18 +136,15 @@ const initCanvas = () => {
         .attr('width', width)
         .attr('height', height)
 
-    // Clear previous content
     svg.selectAll('*').remove()
 
-    // Add defs for glow filter
+    // --- Defs ---
     const defs = svg.append('defs')
 
     const glowFilter = defs.append('filter')
         .attr('id', 'glow')
-        .attr('x', '-50%')
+        .attr('x', '-50%').attr('y', '-50%')
-        .attr('y', '-50%')
+        .attr('width', '200%').attr('height', '200%')
-        .attr('width', '200%')
-        .attr('height', '200%')
 
     glowFilter.append('feGaussianBlur')
         .attr('stdDeviation', '4')
@@ -58,110 +154,288 @@ const initCanvas = () => {
     feMerge.append('feMergeNode').attr('in', 'coloredBlur')
     feMerge.append('feMergeNode').attr('in', 'SourceGraphic')
 
-    // Scanline pattern
+    // Subtle glow for child indicator
-    const scanlinePattern = defs.append('pattern')
+    const childGlowFilter = defs.append('filter')
-        .attr('id', 'scanlines')
+        .attr('id', 'childGlow')
-        .attr('patternUnits', 'userSpaceOnUse')
+        .attr('x', '-100%').attr('y', '-100%')
-        .attr('width', 4)
+        .attr('width', '300%').attr('height', '300%')
-        .attr('height', 4)
 
-    scanlinePattern.append('line')
+    childGlowFilter.append('feGaussianBlur')
-        .attr('x1', 0).attr('y1', 0)
+        .attr('stdDeviation', '2')
-        .attr('x2', 4).attr('y2', 0)
+        .attr('result', 'coloredBlur')
-        .attr('stroke', 'rgba(0,0,0,0.08)')
-        .attr('stroke-width', 1)
 
-    // Main group for zoom/pan
+    const feMerge2 = childGlowFilter.append('feMerge')
+    feMerge2.append('feMergeNode').attr('in', 'coloredBlur')
+    feMerge2.append('feMergeNode').attr('in', 'SourceGraphic')
+
+    // Main panning/zooming group
     g = svg.append('g')
 
-    // Setup zoom
+    // --- Zoom ---
     zoom = d3.zoom()
-        .scaleExtent([0.3, 5])
+        .scaleExtent([0.1, 8])
-        .on('zoom', (event) => {
+        .on('zoom', handleZoom)
-            g.attr('transform', event.transform)
-            transform.value = event.transform
-            emit('zoom-change', {
-                scale: event.transform.k,
-                x: event.transform.x,
-                y: event.transform.y,
-            })
-        })
 
     svg.call(zoom)
 
-    // Center the view
+    // Right-click context menu
-    const initialTransform = d3.zoomIdentity
+    svg.on('contextmenu', (event) => {
-        .translate(width / 2, height / 2)
+        event.preventDefault()
-        .scale(1)
+        const [x, y] = d3.pointer(event, g.node())
+        const clickedNode = findNodeAt(x, y)
+        contextMenu.value = {
+            show: true,
+            x: event.clientX,
+            y: event.clientY,
+            type: clickedNode ? 'node' : 'canvas',
+            node: clickedNode,
+            canvasX: x,
+            canvasY: y,
+        }
+    })
 
-    svg.call(zoom.transform, initialTransform)
+    // Centre the initial view
+    svg.call(
+        zoom.transform,
+        d3.zoomIdentity.translate(width / 2, height / 2).scale(1)
+    )
+
+    // Seed the dimension stack with root data
+    dimensionStack.value = [buildRootDimension()]
+    currentDimensionIndex.value = 0
 
     renderMap()
 }
 
-const renderMap = () => {
+// ---------------------------------------------------------------------------
-    if (!g) return
+// Zoom handler
+// ---------------------------------------------------------------------------
 
-    g.selectAll('*').remove()
+const handleZoom = (event) => {
+    const t = event.transform
+    g.attr('transform', t)
+    transform.value = t
 
-    // Draw metro lines
+    emit('zoom-change', { scale: t.k, x: t.x, y: t.y })
-    props.lines.forEach((line, lineIndex) => {
+
+    // Find nearest node to the viewport centre (in canvas space)
+    const w  = containerRef.value?.clientWidth  ?? 800
+    const h  = containerRef.value?.clientHeight ?? 600
+    const cx = (w / 2 - t.x) / t.k
+    const cy = (h / 2 - t.y) / t.k
+    const nearest = findNearestNode(cx, cy)
+
+    // --- Zoom-in transition ---
+    if (t.k > ZOOM_IN_THRESHOLD &&
+        nearest &&
+        nearest.node.children &&
+        nearest.distance < 200)
+    {
+        const progress = Math.min(1, (t.k - ZOOM_IN_THRESHOLD) / TRANSITION_RANGE)
+
+        transitionState.value = {
+            active: true,
+            direction: 'in',
+            progress,
+            targetNode: nearest.node,
+            childDimension: nearest.node.children,
+        }
+
+        renderWithTransition()
+
+        if (progress >= 1) {
+            commitDimensionChange('in', nearest.node)
+        }
+        return
+    }
+
+    // --- Zoom-out transition ---
+    if (t.k < ZOOM_OUT_THRESHOLD && dimensionStack.value.length > 1) {
+        const progress = Math.min(
+            1,
+            (ZOOM_OUT_THRESHOLD - t.k) / (ZOOM_OUT_THRESHOLD - 0.1)
+        )
+
+        transitionState.value = {
+            active: true,
+            direction: 'out',
+            progress,
+            targetNode: null,
+            childDimension: null,
+        }
+
+        renderWithTransition()
+
+        if (progress >= 1) {
+            commitDimensionChange('out', null)
+        }
+        return
+    }
+
+    // --- Normal range: cancel any ongoing transition ---
+    if (transitionState.value.active) {
+        transitionState.value.active = false
+    }
+    renderMap()
+}
+
+// ---------------------------------------------------------------------------
+// Dimension commit
+// ---------------------------------------------------------------------------
+
+const commitDimensionChange = (direction, node) => {
+    if (direction === 'in' && node) {
+        const child = {
+            id: node.id,
+            parentNodeId: node.id,
+            lines: node.children.lines ?? [],
+            nodes: node.children.nodes ?? [],
+            connections: node.children.connections ?? [],
+            opacity: 1,
+        }
+        dimensionStack.value.push(child)
+        currentDimensionIndex.value++
+
+        resetZoomToCenter()
+
+        transitionState.value.active = false
+        renderMap()
+        emit('dimension-change', {
+            direction: 'in',
+            node,
+            depth: dimensionStack.value.length,
+        })
+    } else if (direction === 'out') {
+        dimensionStack.value.pop()
+        currentDimensionIndex.value = Math.max(0, currentDimensionIndex.value - 1)
+
+        resetZoomToCenter()
+
+        transitionState.value.active = false
+        renderMap()
+        emit('dimension-change', {
+            direction: 'out',
+            depth: dimensionStack.value.length,
+        })
+    }
+}
+
+const resetZoomToCenter = () => {
+    if (!svg || !zoom) return
+    const w = containerRef.value?.clientWidth  ?? 800
+    const h = containerRef.value?.clientHeight ?? 600
+    svg.call(
+        zoom.transform,
+        d3.zoomIdentity.translate(w / 2, h / 2).scale(1)
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Node finders
+// ---------------------------------------------------------------------------
+
+const findNearestNode = (x, y) => {
+    const nodes = currentNodes.value
+    if (!nodes.length) return null
+    let nearest = null
+    let minDist  = Infinity
+    for (const node of nodes) {
+        const dist = Math.sqrt((node.x - x) ** 2 + (node.y - y) ** 2)
+        if (dist < minDist) {
+            minDist = dist
+            nearest = { node, distance: dist }
+        }
+    }
+    return nearest
+}
+
+const findNodeAt = (x, y, dimData = null) => {
+    const nodes = dimData?.nodes ?? currentNodes.value
+    return nodes.find(n => Math.sqrt((n.x - x) ** 2 + (n.y - y) ** 2) < 15) ?? null
+}
+
+// ---------------------------------------------------------------------------
+// Rendering
+// ---------------------------------------------------------------------------
+
+/** Render a complete metro-map dimension into a D3 group element */
+const renderDimension = (dimData, opacity, parentGroup) => {
+    if (!dimData) return
+
+    const group = parentGroup.append('g')
+        .attr('opacity', opacity)
+        .attr('class', 'dimension-group')
+        .style('transition', 'opacity 0.05s linear')
+
+    const nodes       = dimData.nodes       ?? []
+    const lines       = dimData.lines       ?? []
+    const connections = dimData.connections ?? []
+
+    // --- Metro lines ---
+    lines.forEach((line, lineIndex) => {
         const color     = line.color || getLineColor(lineIndex)
-        const lineNodes = props.nodes.filter(n => n.lineId === line.id)
+        const lineNodes = nodes
+            .filter(n => n.lineId === line.id)
+            .sort((a, b) => a.order - b.order)
 
         if (lineNodes.length < 2) return
 
-        // Sort nodes by order
+        const lineGen = d3.line()
-        lineNodes.sort((a, b) => a.order - b.order)
-
-        // Draw the line path
-        const lineGenerator = d3.line()
             .x(d => d.x)
             .y(d => d.y)
             .curve(d3.curveMonotoneX)
 
-        g.append('path')
+        // Outer glow track
+        group.append('path')
             .datum(lineNodes)
-            .attr('d', lineGenerator)
+            .attr('d', lineGen)
+            .attr('fill', 'none')
+            .attr('stroke', color)
+            .attr('stroke-width', 8)
+            .attr('stroke-linecap', 'round')
+            .attr('opacity', 0.15)
+
+        // Main track
+        group.append('path')
+            .datum(lineNodes)
+            .attr('d', lineGen)
             .attr('fill', 'none')
             .attr('stroke', color)
             .attr('stroke-width', 4)
             .attr('stroke-linecap', 'round')
-            .attr('opacity', 0.7)
+            .attr('opacity', 0.75)
 
-        // Line label — positioned well above the first station
+        // Line label
         if (lineNodes.length > 0) {
-            g.append('text')
+            group.append('text')
                 .attr('x', lineNodes[0].x - 10)
                 .attr('y', lineNodes[0].y - 35)
                 .attr('fill', color)
                 .attr('font-family', "'VT323', monospace")
                 .attr('font-size', '16px')
-                .attr('opacity', 0.8)
+                .attr('opacity', 0.85)
                 .text(line.name)
         }
     })
 
-    // Draw dependency connections
+    // --- Dependency connections ---
-    props.connections.forEach(conn => {
+    connections.forEach(conn => {
-        const source = props.nodes.find(n => n.id === conn.from)
+        const source = nodes.find(n => n.id === conn.from)
-        const target = props.nodes.find(n => n.id === conn.to)
+        const target = nodes.find(n => n.id === conn.to)
         if (!source || !target) return
 
-        g.append('line')
+        group.append('line')
-            .attr('x1', source.x)
+            .attr('x1', source.x).attr('y1', source.y)
-            .attr('y1', source.y)
+            .attr('x2', target.x).attr('y2', target.y)
-            .attr('x2', target.x)
-            .attr('y2', target.y)
             .attr('stroke', '#8892b0')
             .attr('stroke-width', 1.5)
             .attr('stroke-dasharray', '6,4')
             .attr('opacity', 0.4)
     })
 
-    // Draw station nodes
+    // --- Station nodes ---
-    const nodeGroups = g.selectAll('.station')
+    const nodeGroups = group.selectAll('.station')
-        .data(props.nodes)
+        .data(nodes)
         .enter()
         .append('g')
         .attr('class', 'station')
@@ -174,8 +448,7 @@ const renderMap = () => {
         .on('mouseenter', (event, d) => {
             hoveredNode.value = d
             d3.select(event.currentTarget).select('.station-dot')
-                .transition()
+                .transition().duration(200)
-                .duration(200)
                 .attr('r', 12)
                 .attr('filter', 'url(#glow)')
             emit('node-hover', d)
@@ -183,24 +456,23 @@ const renderMap = () => {
         .on('mouseleave', (event, d) => {
             hoveredNode.value = null
             d3.select(event.currentTarget).select('.station-dot')
-                .transition()
+                .transition().duration(200)
-                .duration(200)
                 .attr('r', 8)
                 .attr('filter', null)
             emit('node-leave', d)
         })
 
-    // Station outer ring
+    // Outer ring
     nodeGroups.append('circle')
         .attr('r', 11)
         .attr('fill', 'none')
         .attr('stroke', d => {
-            const line = props.lines.find(l => l.id === d.lineId)
+            const line = lines.find(l => l.id === d.lineId)
-            return line?.color || getLineColor(props.lines.indexOf(line))
+            return line?.color || getLineColor(lines.indexOf(line))
         })
         .attr('stroke-width', 2)
 
-    // Station inner dot
+    // Inner dot
     nodeGroups.append('circle')
         .attr('class', 'station-dot')
         .attr('r', 8)
@@ -212,12 +484,34 @@ const renderMap = () => {
             return '#16213e'
         })
         .attr('stroke', d => {
-            const line = props.lines.find(l => l.id === d.lineId)
+            const line = lines.find(l => l.id === d.lineId)
-            return line?.color || getLineColor(props.lines.indexOf(line))
+            return line?.color || getLineColor(lines.indexOf(line))
         })
         .attr('stroke-width', 2)
 
-    // Station labels — positioned below the station dot to avoid line overlap
+    // Child-dimension indicator (pulsing ring for nodes that have children)
+    nodeGroups.filter(d => d.children && (d.children.nodes?.length ?? 0) > 0)
+        .append('circle')
+        .attr('r', 16)
+        .attr('fill', 'none')
+        .attr('stroke', '#00d2ff')
+        .attr('stroke-width', 1)
+        .attr('stroke-dasharray', '3,3')
+        .attr('opacity', 0.5)
+        .attr('filter', 'url(#childGlow)')
+
+    // "[+]" label for nodes with children
+    nodeGroups.filter(d => d.children && (d.children.nodes?.length ?? 0) > 0)
+        .append('text')
+        .attr('x', 13)
+        .attr('y', -13)
+        .attr('fill', '#00d2ff')
+        .attr('font-family', "'VT323', monospace")
+        .attr('font-size', '11px')
+        .attr('opacity', 0.8)
+        .text('[+]')
+
+    // Station label
     nodeGroups.append('text')
         .attr('x', 0)
         .attr('y', 28)
@@ -227,7 +521,7 @@ const renderMap = () => {
         .attr('font-size', '14px')
         .text(d => d.name)
 
-    // Status badge — below the label
+    // Status badge
     nodeGroups.filter(d => d.badge)
         .append('text')
         .attr('x', 0)
@@ -239,60 +533,238 @@ const renderMap = () => {
         .text(d => d.badge)
 }
 
-const handleResize = () => {
+/** Normal (no transition) render */
-    if (svgRef.value && containerRef.value) {
+const renderMap = () => {
-        svg.attr('width', containerRef.value.clientWidth)
+    if (!g) return
-            .attr('height', containerRef.value.clientHeight)
+    g.selectAll('*').remove()
+    const dim = currentDimensionData.value
+    if (dim) renderDimension(dim, 1, g)
+}
+
+/** Cross-fade render during a zoom transition */
+const renderWithTransition = () => {
+    if (!g) return
+    g.selectAll('*').remove()
+
+    const { progress, direction, childDimension } = transitionState.value
+    const eased = d3.easeCubicInOut(progress)
+
+    if (direction === 'in') {
+        // Parent fades out
+        renderDimension(currentDimensionData.value, 1 - eased, g)
+        // Child fades in
+        if (childDimension) {
+            renderDimension(
+                {
+                    lines: childDimension.lines ?? [],
+                    nodes: childDimension.nodes ?? [],
+                    connections: childDimension.connections ?? [],
+                },
+                eased,
+                g
+            )
+        }
+    } else if (direction === 'out' && dimensionStack.value.length > 1) {
+        // Current child fades out
+        renderDimension(currentDimensionData.value, 1 - eased, g)
+        // Parent fades in
+        const parentDim = dimensionStack.value[currentDimensionIndex.value - 1]
+        if (parentDim) {
+            renderDimension(parentDim, eased, g)
+        }
     }
 }
 
-watch(() => [props.nodes, props.lines, props.connections], () => {
+// ---------------------------------------------------------------------------
+// Context menu handlers
+// ---------------------------------------------------------------------------
+
+const closeContextMenu = () => {
+    contextMenu.value.show = false
+}
+
+const handleContextCreate = () => {
+    emit('create-node', {
+        x: contextMenu.value.canvasX,
+        y: contextMenu.value.canvasY,
+        parentNodeId: currentDimensionData.value?.parentNodeId ?? null,
+        dimensionId: currentDimensionData.value?.id ?? 'root',
+    })
+    closeContextMenu()
+}
+
+const handleContextEdit = () => {
+    if (contextMenu.value.node) emit('edit-node', contextMenu.value.node)
+    closeContextMenu()
+}
+
+const handleContextAddChild = () => {
+    if (contextMenu.value.node) {
+        emit('create-node', {
+            x: contextMenu.value.canvasX,
+            y: contextMenu.value.canvasY,
+            parentNodeId: contextMenu.value.node.id,
+            dimensionId: contextMenu.value.node.id,
+            addToNode: contextMenu.value.node,
+        })
+    }
+    closeContextMenu()
+}
+
+const handleContextDelete = () => {
+    if (contextMenu.value.node) emit('delete-node', contextMenu.value.node)
+    closeContextMenu()
+}
+
+/** FAB / [+] button creates a node in the current dimension */
+const handleFabCreate = () => {
+    emit('create-node', {
+        x: 0, y: 0,
+        parentNodeId: currentDimensionData.value?.parentNodeId ?? null,
+        dimensionId: currentDimensionData.value?.id ?? 'root',
+    })
+}
+
+// ---------------------------------------------------------------------------
+// Resize
+// ---------------------------------------------------------------------------
+
+const handleResize = () => {
+    if (!svg || !containerRef.value) return
+    svg.attr('width', containerRef.value.clientWidth)
+       .attr('height', containerRef.value.clientHeight)
+}
+
+// ---------------------------------------------------------------------------
+// Document click to close context menu
+// ---------------------------------------------------------------------------
+
+const onDocumentClick = (e) => {
+    // Close context menu on any click outside it
+    if (contextMenu.value.show) {
+        closeContextMenu()
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Watchers
+// ---------------------------------------------------------------------------
+
+watch(
+    () => [props.nodes, props.lines, props.connections, props.dimensions],
+    () => {
+        // Rebuild the root dimension from updated props
+        if (dimensionStack.value.length > 0) {
+            dimensionStack.value[0] = buildRootDimension()
+        } else {
+            dimensionStack.value = [buildRootDimension()]
+        }
+        if (!transitionState.value.active) {
             renderMap()
-}, { deep: true })
+        }
+    },
+    { deep: true }
+)
+
+// ---------------------------------------------------------------------------
+// Lifecycle
+// ---------------------------------------------------------------------------
 
 onMounted(() => {
     initCanvas()
     window.addEventListener('resize', handleResize)
+    document.addEventListener('click', onDocumentClick)
 })
 
 onUnmounted(() => {
     window.removeEventListener('resize', handleResize)
+    document.removeEventListener('click', onDocumentClick)
 })
 
-// Expose zoom methods
+// ---------------------------------------------------------------------------
+// Exposed API
+// ---------------------------------------------------------------------------
+
 const zoomTo = (x, y, scale) => {
     if (!svg || !zoom) return
-    const transform = d3.zoomIdentity.translate(x, y).scale(scale)
+    svg.transition().duration(500).call(
-    svg.transition().duration(500).call(zoom.transform, transform)
+        zoom.transform,
+        d3.zoomIdentity.translate(x, y).scale(scale)
+    )
 }
 
-defineExpose({ zoomTo })
+defineExpose({ zoomTo, handleFabCreate })
 </script>
 
 <template>
-    <div ref="containerRef" class="metro-canvas-container">
+    <div ref="containerRef" class="metro-canvas-container" @click="closeContextMenu">
+
+        <!-- Main SVG canvas -->
         <svg ref="svgRef" class="metro-canvas"></svg>
 
+        <!-- Depth indicator -->
+        <div class="depth-indicator">
+            DEPTH:&nbsp;{{ currentDepth }}
+            <span v-if="currentDepth > 1" class="depth-back" @click.stop="commitDimensionChange('out', null)">
+                [↑ BACK]
+            </span>
+        </div>
+
+        <!-- Transition progress bar -->
+        <div
+            v-if="transitionState.active"
+            class="transition-bar"
+            :style="{ width: (transitionState.progress * 100) + '%' }"
+        ></div>
+
         <!-- Hover tooltip -->
         <Transition name="fade">
             <div
                 v-if="hoveredNode"
                 class="node-tooltip"
                 :style="{
-                    left: `${hoveredNode.x + transform.x + 30}px`,
+                    left: `${hoveredNode.x * transform.k + transform.x + 30}px`,
-                    top: `${hoveredNode.y + transform.y - 20}px`,
+                    top:  `${hoveredNode.y * transform.k + transform.y - 20}px`,
                 }"
             >
                 <div class="tooltip-title">{{ hoveredNode.name }}</div>
                 <div v-if="hoveredNode.description" class="tooltip-desc">{{ hoveredNode.description }}</div>
                 <div v-if="hoveredNode.status" class="tooltip-status">{{ hoveredNode.status }}</div>
-                <div class="tooltip-hint">Click to zoom in</div>
+                <div v-if="hoveredNode.children && (hoveredNode.children.nodes?.length ?? 0) > 0" class="tooltip-hint">
+                    Scroll to zoom in &rarr; child dimension
+                </div>
+                <div v-else class="tooltip-hint">Click to view details</div>
             </div>
         </Transition>
+
+        <!-- Context menu -->
+        <Transition name="menu-fade">
+            <div
+                v-if="contextMenu.show"
+                class="context-menu"
+                :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
+                @click.stop
+            >
+                <template v-if="contextMenu.type === 'canvas'">
+                    <div class="context-menu-header">CANVAS</div>
+                    <button class="context-item" @click="handleContextCreate">+ New node here</button>
+                </template>
+                <template v-else-if="contextMenu.type === 'node'">
+                    <div class="context-menu-header">{{ contextMenu.node?.name ?? 'NODE' }}</div>
+                    <button class="context-item" @click="handleContextEdit">Edit</button>
+                    <button class="context-item" @click="handleContextAddChild">+ Add child node</button>
+                    <button class="context-item danger" @click="handleContextDelete">Delete</button>
+                </template>
+            </div>
+        </Transition>
+
     </div>
 </template>
 
 <style scoped>
+/* -----------------------------------------------------------------------
+   Container & canvas
+   ----------------------------------------------------------------------- */
 .metro-canvas-container {
     position: relative;
     width: 100%;
@@ -307,6 +779,55 @@ defineExpose({ zoomTo })
     height: 100%;
 }
 
+/* -----------------------------------------------------------------------
+   Depth indicator
+   ----------------------------------------------------------------------- */
+.depth-indicator {
+    position: absolute;
+    bottom: 16px;
+    left: 16px;
+    font-family: 'VT323', monospace;
+    font-size: 14px;
+    color: #00d2ff;
+    background: rgba(22, 33, 62, 0.8);
+    border: 1px solid rgba(0, 210, 255, 0.3);
+    padding: 4px 10px;
+    border-radius: 3px;
+    letter-spacing: 0.1em;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.depth-back {
+    color: #e94560;
+    cursor: pointer;
+    transition: color 0.15s;
+}
+
+.depth-back:hover {
+    color: #ff8fab;
+    text-shadow: 0 0 8px rgba(233, 69, 96, 0.6);
+}
+
+/* -----------------------------------------------------------------------
+   Transition progress bar
+   ----------------------------------------------------------------------- */
+.transition-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #00d2ff, #e94560);
+    transition: width 0.05s linear;
+    pointer-events: none;
+    box-shadow: 0 0 8px rgba(0, 210, 255, 0.6);
+}
+
+/* -----------------------------------------------------------------------
+   Hover tooltip
+   ----------------------------------------------------------------------- */
 .node-tooltip {
     position: absolute;
     pointer-events: none;
@@ -347,10 +868,95 @@ defineExpose({ zoomTo })
     opacity: 0.6;
 }
 
-.fade-enter-active, .fade-leave-active {
+/* -----------------------------------------------------------------------
+   Context menu
+   ----------------------------------------------------------------------- */
+.context-menu {
+    position: fixed;
+    z-index: 200;
+    min-width: 180px;
+    background: #0d1b2a;
+    border: 1px solid #00d2ff;
+    border-radius: 4px;
+    box-shadow: 0 0 20px rgba(0, 210, 255, 0.25), inset 0 0 40px rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+    font-family: 'VT323', monospace;
+}
+
+.context-menu-header {
+    padding: 6px 12px;
+    font-size: 12px;
+    color: #00d2ff;
+    letter-spacing: 0.15em;
+    background: rgba(0, 210, 255, 0.08);
+    border-bottom: 1px solid rgba(0, 210, 255, 0.2);
+    user-select: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.context-item {
+    display: block;
+    width: 100%;
+    padding: 8px 14px;
+    text-align: left;
+    background: none;
+    border: none;
+    color: #e8e8e8;
+    font-family: 'VT323', monospace;
+    font-size: 15px;
+    cursor: pointer;
+    letter-spacing: 0.05em;
+    transition: background 0.12s, color 0.12s;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.context-item:last-child {
+    border-bottom: none;
+}
+
+.context-item:hover {
+    background: rgba(0, 210, 255, 0.12);
+    color: #00d2ff;
+}
+
+.context-item.danger {
+    color: #e94560;
+}
+
+.context-item.danger:hover {
+    background: rgba(233, 69, 96, 0.12);
+    color: #ff8fab;
+}
+
+/* -----------------------------------------------------------------------
+   Transitions
+   ----------------------------------------------------------------------- */
+.fade-enter-active,
+.fade-leave-active {
     transition: opacity 0.15s;
 }
-.fade-enter-from, .fade-leave-to {
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.menu-fade-enter-active {
+    transition: opacity 0.1s, transform 0.1s;
+}
+
+.menu-fade-leave-active {
+    transition: opacity 0.08s;
+}
+
+.menu-fade-enter-from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+}
+
+.menu-fade-leave-to {
     opacity: 0;
 }
 </style>

routes/web.php

@@ -20,6 +20,7 @@ Route::middleware(['auth', 'verified'])->group(function () {
     Route::prefix('api')->group(function () {
         Route::get('/map/strategy', [MapController::class, 'apiStrategy'])->name('api.map.strategy');
         Route::get('/map/project/{project}', [MapController::class, 'apiProject'])->name('api.map.project');
+        Route::get('/map/node/{type}/{id}/children', [MapController::class, 'apiNodeChildren'])->name('api.map.node.children');
     });
 
     // Projects