feat(network-maps): bring to front / send to back layering for nodes

Three entry points for z-index control:
- Right-click context menu: Bring to Front / Send to Back with ] / [ shortcuts, separated by dividers from copy/delete groups
- Properties panel: Layer row with Bring Front + Send Back buttons, tooltip shows keyboard shortcut
- Keyboard: ] brings selected node(s) to front, [ sends to back (skips when input focused)

Context menu also gains divider support (dividerBefore flag) for visual grouping.
Layering handlers use max/min zIndex across all nodes so repeated presses always stack correctly.

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

frontend/src/components/network/panels/PropertiesPanel.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState, useEffect } from 'react'
-import { Trash2, Minus, Spline, GitBranch } from 'lucide-react'
+import { Trash2, Minus, Spline, GitBranch, BringToFront, SendToBack } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { DeviceProperties, DiagramEdge } from '@/types'
 import type { Node, Edge } from '@xyflow/react'
@@ -11,6 +11,8 @@ interface PropertiesPanelProps {
   onNodeUpdate: (nodeId: string, data: Partial<DeviceNodeData>) => void
   onEdgeUpdate: (edgeId: string, data: Partial<DiagramEdge>) => void
   onEdgeTypeChange: (edgeId: string, edgeType: string) => void
+  onBringToFront: (nodeId: string) => void
+  onSendToBack: (nodeId: string) => void
   onDeleteNode: (nodeId: string) => void
   onDeleteEdge: (edgeId: string) => void
 }
@@ -72,6 +74,8 @@ export function PropertiesPanel({
   onNodeUpdate,
   onEdgeUpdate,
   onEdgeTypeChange,
+  onBringToFront,
+  onSendToBack,
   onDeleteNode,
   onDeleteEdge,
 }: PropertiesPanelProps) {
@@ -268,6 +272,29 @@ export function PropertiesPanel({
           <FieldInput value={nodeData.label} onChange={handleLabelChange} placeholder="Device name" />
         </div>
 
+        {/* Layering */}
+        <div className="flex flex-col gap-1">
+          <FieldLabel>Layer</FieldLabel>
+          <div className="flex gap-1.5">
+            <button
+              onClick={() => onBringToFront(selectedNode!.id)}
+              title="Bring to Front  ]"
+              className="flex flex-1 items-center justify-center gap-1.5 rounded border border-default px-2 py-1.5 text-[10px] text-muted-foreground hover:border-hover hover:text-primary"
+            >
+              <BringToFront size={12} />
+              Bring Front
+            </button>
+            <button
+              onClick={() => onSendToBack(selectedNode!.id)}
+              title="Send to Back  ["
+              className="flex flex-1 items-center justify-center gap-1.5 rounded border border-default px-2 py-1.5 text-[10px] text-muted-foreground hover:border-hover hover:text-primary"
+            >
+              <SendToBack size={12} />
+              Send Back
+            </button>
+          </div>
+        </div>
+
         {/* Status badge grid */}
         <div className="flex flex-col gap-1.5">
           <FieldLabel>Status</FieldLabel>