@mp70/react-networks 0.5.0-rc.1 → 0.5.1

package/README.md

@@ -208,6 +208,54 @@ For new code, prefer the document-model props. The graph props and React Flow es
 | `useSmoothstepEdgesForTubes` | `boolean` | `false` | Use smoothstep edges for tube connections |
 | `debug` | `boolean` | `false` | Enable debug mode |
 | `fitViewOptions` | `FitViewOptions` | - | React Flow fitView options |
+| `highlightedNodeIds` | `string[]` | - | Node IDs kept at full opacity when focus dimming is active |
+| `highlightedEdgeIds` | `string[]` | - | Edge IDs kept at full opacity when focus dimming is active |
+| `dimUnhighlighted` | `boolean` | `false` | Dim nodes/edges not in the focus ID lists |
+| `dimOpacity` | `number` | `0.25` | Opacity applied to dimmed elements (0-1) |
+
+### Edge highlighting
+
+Per-edge emphasis uses `NetworkEdge.data`:
+
+```tsx
+{
+  id: 'edge-1',
+  source: 'switch-1',
+  target: 'server-1',
+  type: 'fiber',
+  data: {
+    highlight: true,
+    highlightColor: '#dc2626',
+    highlightWidth: 5,
+    label: 'Cable A',
+  },
+}
+```
+
+Diagram-level focus (trace, DRC row click):
+
+```tsx
+<NetworkDiagram
+  nodes={nodes}
+  edges={edges}
+  highlightedEdgeIds={focusedEdgeIds}
+  highlightedNodeIds={focusedNodeIds}
+  dimUnhighlighted
+/>
+```
+
+The library does not define severity enums. Apps pick `highlightColor` hex values. Common conventions:
+
+| Meaning | Suggested `highlightColor` |
+|---|---|
+| Error | `#dc2626` |
+| Warning | `#d97706` |
+| Complete | `#16a34a` |
+| Installer power step | `#f97316` |
+| Installer network step | `#ef4444` |
+
+Pass `showDeviceImages={false}` on `NetworkDiagram` to hide rack photos; status border colors from
+`getStatusColor(status)` still apply. Use `onPortClick` and `highlightedPortHandles` for port trace UX.
 
 ### NetworkNode Types
 

package/dist/index.css

@@ -158,6 +158,15 @@
   pointer-events: auto;
 }
 
+.react-flow__handle.rn-port-handle--clickable {
+  cursor: pointer;
+}
+
+.react-flow__handle.rn-port-handle--highlighted {
+  box-shadow: 0 0 0 2px #f59e0b, 0 0 8px rgba(245, 158, 11, 0.75);
+  z-index: 12;
+}
+
 
 .react-flow__handle-right.tube-fiber-handle {
   right: auto !important;
@@ -374,7 +383,8 @@
 
 /* Device node styles */
 .device-node {
-  background-color: #1f2937;
+  background-color: var(--rn-device-bg-color, #1f2937);
+  color: var(--rn-device-text-color, white);
   background-image: var(--rn-device-bg-image, none);
   background-position: var(--rn-device-bg-position, center);
   background-repeat: var(--rn-device-bg-repeat, no-repeat);

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styles/index.css"],"sourcesContent":["/* Library styles for react-networks */\n\n/* Edge zIndex styles for dynamic prominence */\n.edge-prominent {\n  z-index: 1000 !important;\n  opacity: 1 !important;\n}\n\n.edge-dimmed {\n  z-index: 500 !important;\n  opacity: 0.3 !important;\n}\n\n/* Dynamic zIndex classes */\n.edge-z-1000 {\n  z-index: 1000 !important;\n}\n\n.edge-z-500 {\n  z-index: 500 !important;\n}\n\n/* React Flow theming */\n.react-flow-dark {\n  --react-flow-background: #1a1a1a;\n  --react-flow-text: #ffffff;\n  --react-flow-border: #404040;\n  --react-flow-controls-bg: #2d2d2d;\n  --react-flow-controls-border: #404040;\n  --react-flow-minimap-bg: #2d2d2d;\n  --react-flow-minimap-border: #404040;\n}\n\n.react-flow-light {\n  --react-flow-background: #f5f5f5;\n  --react-flow-text: #1a1a1a;\n  --react-flow-border: #e9ecef;\n  --react-flow-controls-bg: #f8f9fa;\n  --react-flow-controls-border: #e9ecef;\n  --react-flow-minimap-bg: #f8f9fa;\n  --react-flow-minimap-border: #e9ecef;\n}\n\n/* Apply ReactFlow theming */\n.react-flow-dark .react-flow__background {\n  background-color: var(--react-flow-background);\n}\n\n.react-flow-light .react-flow__background {\n  background-color: var(--react-flow-background);\n}\n\n/* Ensure canvas background is always off-white in light mode */\n.react-flow-light .react-flow__viewport {\n  background-color: #f5f5f5 !important;\n}\n\n.react-flow-light .react-flow {\n  background-color: #f5f5f5;\n}\n\n.react-flow-dark .react-flow__controls {\n  background-color: var(--react-flow-controls-bg);\n  border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-light .react-flow__controls {\n  background-color: var(--react-flow-controls-bg);\n  border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-dark .react-flow__minimap {\n  background-color: var(--react-flow-minimap-bg);\n  border-color: var(--react-flow-minimap-border);\n}\n\n.react-flow-light .react-flow__minimap {\n  background-color: var(--react-flow-minimap-bg);\n  border-color: var(--react-flow-minimap-border);\n}\n\n.react-flow-dark .react-flow__controls-button {\n  background-color: var(--react-flow-controls-bg);\n  color: var(--react-flow-text);\n  border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-light .react-flow__controls-button {\n  background-color: var(--react-flow-controls-bg);\n  color: var(--react-flow-text);\n  border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-dark .react-flow__controls-button:hover {\n  background-color: #4b5563;\n}\n\n.react-flow-light .react-flow__controls-button:hover {\n  background-color: #e9ecef;\n}\n\n/* Mobile-friendly control buttons - larger touch targets */\n@media (max-width: 768px) {\n  .react-flow__controls-button {\n    width: 44px !important;\n    height: 44px !important;\n    min-width: 44px !important;\n    min-height: 44px !important;\n  }\n}\n\n/* Override React Flow default handle styles for tube fiber handles */\n/* Use CSS variables set by inline styles to override React Flow defaults */\n.react-flow__handle.tube-fiber-handle {\n  border: none !important;\n  transform: none !important;\n  background-clip: padding-box !important;\n  opacity: 1 !important;\n  /* Ensure no default React Flow styles interfere */\n  box-shadow: none !important;\n  /* Don't set background here - let inline styles or specific rules handle it */\n}\n\n/* Tube fiber handles - use fiber color */\n.react-flow__handle.tube-fiber-handle {\n  background: var(--fiber-bg-image, var(--fiber-bg)) !important;\n  background-color: var(--fiber-bg) !important;\n}\n\n/* Fibre flow map handles */\n.react-flow__handle.fibre-flow-handle {\n  border: none !important;\n  transform: none !important;\n  background-clip: padding-box !important;\n  opacity: 1 !important;\n  box-shadow: none !important;\n}\n\n.react-flow__handle.fibre-flow-handle {\n  background: var(--fiber-bg-image, var(--fiber-bg)) !important;\n  background-color: var(--fiber-bg) !important;\n  background-image: var(--fiber-bg-image, none) !important;\n}\n\n.react-flow__handle.rn-port-hitbox {\n  overflow: visible;\n}\n\n.react-flow__handle.connectionindicator.rn-port-hitbox::before {\n  content: '';\n  position: absolute;\n  top: calc(-1 * var(--rn-hit-expand-top, 0px));\n  right: calc(-1 * var(--rn-hit-expand-right, 0px));\n  bottom: calc(-1 * var(--rn-hit-expand-bottom, 0px));\n  left: calc(-1 * var(--rn-hit-expand-left, 0px));\n  border-radius: 4px;\n  background: transparent;\n  pointer-events: auto;\n}\n\n\n.react-flow__handle-right.tube-fiber-handle {\n  right: auto !important;\n}\n\n/* More specific selector to ensure override - target all possible React Flow handle states */\n/* Only apply to non-ribbon handles */\n.react-flow__node .react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle),\n.react-flow__node .react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle)[data-handlepos],\n.react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle)[data-handlepos],\n.react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle)[data-fiber-idx] {\n  background: var(--fiber-bg-image, var(--fiber-bg)) !important;\n  background-color: var(--fiber-bg) !important;\n  background-image: var(--fiber-bg-image, none) !important;\n}\n\n/* Ribbon bundle handles - simple solid color (removed gradient complexity) */\n\n/* Connection animation - pulse effect when edge is first created */\n@keyframes edgeConnectPulse {\n  0% {\n    opacity: 0;\n    stroke-width: 1;\n  }\n  50% {\n    opacity: 1;\n    stroke-width: 4;\n  }\n  100% {\n    opacity: 1;\n    stroke-width: 2;\n  }\n}\n\n.react-flow__edge.edge-connecting path,\n.react-flow__edge.edge-connecting .react-flow__edge-path {\n  animation: edgeConnectPulse 1s ease-out;\n}\n\n/* Highlighted edge pulse + dash motion (trace paths) */\n@keyframes rnEdgeHighlightPulse {\n  0%,\n  100% {\n    opacity: 0.85;\n    stroke-width: var(--rn-edge-highlight-from, 2px);\n  }\n  50% {\n    opacity: 1;\n    stroke-width: var(--rn-edge-highlight-to, 6px);\n  }\n}\n\n@keyframes rnEdgeHighlightDash {\n  0% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -48;\n  }\n}\n\n.rn-edge-highlight {\n  animation: rnEdgeHighlightPulse 2.4s ease-in-out infinite,\n    rnEdgeHighlightDash 1.8s linear infinite;\n  opacity: 0.9;\n  stroke-linecap: round;\n}\n\n/* Splice glow animation - fade in when both handles are connected */\n@keyframes spliceGlowFadeIn {\n  0% {\n    opacity: 0;\n    transform: translateX(-50%) scaleY(0.3);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(-50%) scaleY(1);\n  }\n}\n\n.splice-glow {\n  animation: spliceGlowFadeIn 0.5s ease-out;\n  transform-origin: center;\n}\n\n/* Splice text animation - fade in when both handles are connected */\n@keyframes spliceTextFadeIn {\n  0% {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* Splice text overlay - blur and opacity for text readability */\n.splice-text-overlay {\n  backdrop-filter: blur(2px);\n  -webkit-backdrop-filter: blur(2px);\n}\n\n/* Dark mode overlay */\n.react-flow-dark .splice-text-overlay {\n  background: rgba(0, 0, 0, 0.6);\n}\n\n/* Light mode overlay */\n.react-flow-light .splice-text-overlay {\n  background: rgba(255, 255, 255, 0.7);\n}\n\n/* Splice text label - theme-aware colors */\n.splice-text-label {\n  color: #fff;\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.6);\n}\n\n.splice-text-label.animate-in {\n  animation: spliceTextFadeIn 0.5s ease-out;\n  transform-origin: center;\n}\n\n/* Light mode text */\n.react-flow-light .splice-text-label {\n  color: #1a1a1a;\n  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.7);\n}\n\n/* Remove all borders from splice nodes */\n.react-flow__node[data-type=\"splice\"],\n.react-flow__node[data-type=\"splice\"] > div {\n  border: none !important;\n  outline: none !important;\n}\n\n.splice-node {\n  background: transparent !important;\n  border: none !important;\n  outline: none !important;\n}\n\n/* Only remove box-shadow when not selected */\n.react-flow__node[data-type=\"splice\"]:not(.selected) > div,\n.splice-node:not(.selected) {\n  box-shadow: none !important;\n}\n\n/* React Networks Attribution */\n.react-networks-attribution {\n  padding: 0;\n  margin: 0;\n  z-index: 1000;\n}\n\n.react-networks-attribution-link {\n  font-size: 7px;\n  color: #9ca3af;\n  text-decoration: none;\n  font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  transition: color 0.2s ease;\n  padding: 1px 4px;\n  border-radius: 2px;\n  display: inline-block;\n  background: rgba(0, 0, 0, 0.3);\n  backdrop-filter: blur(4px);\n}\n\n.react-networks-attribution-link:hover {\n  color: #e5e7eb;\n  background: rgba(0, 0, 0, 0.4);\n}\n\n/* Light mode attribution */\n.react-flow-light .react-networks-attribution-link {\n  color: #6b7280;\n  background: rgba(255, 255, 255, 0.6);\n}\n\n.react-flow-light .react-networks-attribution-link:hover {\n  color: #1a1a1a;\n  background: rgba(255, 255, 255, 0.8);\n}\n\n/* Coupler node styles */\n.coupler-node {\n  transition: box-shadow 0.2s ease;\n}\n\n.coupler-node.selected {\n  box-shadow: 0 0 0 2px #3b82f6 !important;\n}\n\n/* Patch panel node styles */\n.patch-panel-node {\n  transition: box-shadow 0.2s ease, border-color 0.2s ease;\n}\n\n.patch-panel-node.selected {\n  box-shadow: 0 0 0 2px #3b82f6 !important;\n  border-color: #3b82f6 !important;\n}\n\n/* Closure node styles */\n.closure-node {\n  transition: box-shadow 0.2s ease, border-color 0.2s ease;\n}\n\n.closure-node.selected {\n  box-shadow: 0 0 0 2px #3b82f6 !important;\n  border-color: #3b82f6 !important;\n}\n\n/* Device node styles */\n.device-node {\n  background-color: #1f2937;\n  background-image: var(--rn-device-bg-image, none);\n  background-position: var(--rn-device-bg-position, center);\n  background-repeat: var(--rn-device-bg-repeat, no-repeat);\n  background-size: var(--rn-device-bg-size, cover);\n  border: 1px solid var(--rn-device-border-color, #10b981);\n  border-radius: 2px;\n  box-shadow: var(--rn-device-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.1));\n  box-sizing: border-box;\n  color: white;\n  cursor: grab;\n  display: flex;\n  flex-direction: column;\n  font-family: monospace;\n  font-size: 8px;\n  height: var(--rn-device-height, 20px);\n  justify-content: center;\n  left: var(--rn-device-left, auto);\n  margin: 0;\n  padding: 0;\n  position: relative;\n  transform: translateY(var(--rn-device-translate-y, 0px));\n  width: var(--rn-device-width, 100%);\n}\n\n.device-node__content {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  padding: 2px;\n  text-align: center;\n}\n\n.device-node__image-layer {\n  inset: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  z-index: 0;\n}\n\n.device-node__image {\n  display: block;\n  height: 100%;\n  pointer-events: none;\n  user-select: none;\n  width: 100%;\n}\n\n.device-node__content--image-badge {\n  overflow: visible;\n  text-align: left;\n}\n\n.device-node__label {\n  font-size: 7px;\n  font-weight: bold;\n  line-height: 1.1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.device-node__label--badge {\n  background: rgba(15, 23, 42, 0.88);\n  border: 1px solid rgba(148, 163, 184, 0.45);\n  border-radius: 2px;\n  display: inline-flex;\n  max-width: 100%;\n  padding: 1px 4px;\n}\n\n.device-node__manufacturer {\n  color: #9ca3af;\n  font-size: 6px;\n  line-height: 1;\n}\n\n.device-node__u-indicator {\n  background: #374151;\n  border-radius: 1px;\n  bottom: 1px;\n  color: #9ca3af;\n  font-size: 6px;\n  line-height: 1;\n  padding: 1px 2px;\n  position: absolute;\n  right: 1px;\n}\n\n.device-node__status-indicator {\n  background: var(--rn-device-status-color, #6b7280);\n  border-radius: 50%;\n  bottom: 1px;\n  height: 4px;\n  left: 1px;\n  position: absolute;\n  width: 4px;\n}\n\n.device-node__split-face {\n  background-color: #1f2937;\n  overflow: hidden;\n  position: relative;\n}\n\n.device-node__split-face--front {\n  border-left: 1px dashed rgba(156, 163, 175, 0.35);\n}\n\n.device-node__split-face--rear {\n  border-right: 1px dashed rgba(156, 163, 175, 0.35);\n}\n\n.device-node__face-bridge {\n  position: relative;\n}\n\n.device-node__face-bridge-line {\n  background: linear-gradient(180deg, transparent 0%, rgba(156, 163, 175, 0.8) 20%, rgba(156, 163, 175, 0.8) 80%, transparent 100%);\n  left: 50%;\n  position: absolute;\n  top: 1px;\n  transform: translateX(-50%);\n  width: 1px;\n  height: calc(100% - 2px);\n}\n\n.device-node__face-bridge-label {\n  background: rgba(17, 24, 39, 0.82);\n  border: 1px solid rgba(156, 163, 175, 0.4);\n  border-radius: 999px;\n  color: #d1d5db;\n  font-size: 6px;\n  font-weight: 700;\n  left: 50%;\n  letter-spacing: 0.04em;\n  max-width: 120px;\n  overflow: hidden;\n  padding: 1px 6px;\n  position: absolute;\n  text-overflow: ellipsis;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(-90deg);\n  white-space: nowrap;\n}\n\n/* Light mode adjustments */\n.react-flow-light .coupler-node {\n  background: #f9fafb;\n  color: #1f2937;\n  border-color: #d1d5db;\n}\n\n.react-flow-light .patch-panel-node {\n  background: transparent !important;\n  color: #1f2937;\n  border-color: #d1d5db;\n}\n\n.react-flow-light .closure-node {\n  background: transparent !important;\n  color: #1f2937;\n  border-color: #d1d5db;\n}\n\n/* Triangle node styles */\n.react-flow__node[data-type=\"fibre-split\"],\n.react-flow__node.react-flow__node-fibre-split {\n  background: transparent !important;\n  border: none !important;\n  padding: 0 !important;\n}\n\n.react-flow__node[data-type=\"fibre-split\"] > div,\n.react-flow__node.react-flow__node-fibre-split > div {\n  background: transparent !important;\n  border: none !important;\n  padding: 0 !important;\n  box-shadow: none !important;\n  overflow: visible !important;\n}\n\n.react-flow__node[data-type=\"fibre-split\"] svg,\n.react-flow__node.react-flow__node-fibre-split svg {\n  display: block !important;\n  visibility: visible !important;\n  opacity: 1 !important;\n}\n\n.triangle-node {\n  position: relative !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  background: transparent !important;\n  border: none !important;\n  padding: 0 !important;\n  margin: 0 !important;\n  box-shadow: none !important;\n  overflow: visible !important;\n  box-sizing: border-box !important;\n}\n\n\n.triangle-node-text {\n  text-align: center;\n  position: relative;\n  z-index: 2;\n  width: 46px;\n  height: 46px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  color: #000000;\n  font-weight: bold;\n  font-size: 12px;\n}\n\n/* Cable node rotation */\n.cable-node-rotated {\n  transform-origin: center center !important;\n}\n\n/* Ensure Fibre Flow edges render with full saturation and aren't affected by node overlays */\n.react-flow__edge[data-type=\"fibre-flow\"] path,\n.react-flow__edge[data-type=\"fibre-flow\"] .react-flow__edge-path {\n  opacity: 1 !important;\n  stroke-opacity: 1 !important;\n  mix-blend-mode: normal !important;\n  filter: none !important;\n}\n\n.react-flow__edge[data-type=\"fibre-flow-link\"] path,\n.react-flow__edge[data-type=\"fibre-flow-link\"] .react-flow__edge-path {\n  opacity: 1 !important;\n  stroke-opacity: 1 !important;\n  mix-blend-mode: normal !important;\n  filter: none !important;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/styles/index.css"],"sourcesContent":["/* Library styles for react-networks */\n\n/* Edge zIndex styles for dynamic prominence */\n.edge-prominent {\n  z-index: 1000 !important;\n  opacity: 1 !important;\n}\n\n.edge-dimmed {\n  z-index: 500 !important;\n  opacity: 0.3 !important;\n}\n\n/* Dynamic zIndex classes */\n.edge-z-1000 {\n  z-index: 1000 !important;\n}\n\n.edge-z-500 {\n  z-index: 500 !important;\n}\n\n/* React Flow theming */\n.react-flow-dark {\n  --react-flow-background: #1a1a1a;\n  --react-flow-text: #ffffff;\n  --react-flow-border: #404040;\n  --react-flow-controls-bg: #2d2d2d;\n  --react-flow-controls-border: #404040;\n  --react-flow-minimap-bg: #2d2d2d;\n  --react-flow-minimap-border: #404040;\n}\n\n.react-flow-light {\n  --react-flow-background: #f5f5f5;\n  --react-flow-text: #1a1a1a;\n  --react-flow-border: #e9ecef;\n  --react-flow-controls-bg: #f8f9fa;\n  --react-flow-controls-border: #e9ecef;\n  --react-flow-minimap-bg: #f8f9fa;\n  --react-flow-minimap-border: #e9ecef;\n}\n\n/* Apply ReactFlow theming */\n.react-flow-dark .react-flow__background {\n  background-color: var(--react-flow-background);\n}\n\n.react-flow-light .react-flow__background {\n  background-color: var(--react-flow-background);\n}\n\n/* Ensure canvas background is always off-white in light mode */\n.react-flow-light .react-flow__viewport {\n  background-color: #f5f5f5 !important;\n}\n\n.react-flow-light .react-flow {\n  background-color: #f5f5f5;\n}\n\n.react-flow-dark .react-flow__controls {\n  background-color: var(--react-flow-controls-bg);\n  border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-light .react-flow__controls {\n  background-color: var(--react-flow-controls-bg);\n  border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-dark .react-flow__minimap {\n  background-color: var(--react-flow-minimap-bg);\n  border-color: var(--react-flow-minimap-border);\n}\n\n.react-flow-light .react-flow__minimap {\n  background-color: var(--react-flow-minimap-bg);\n  border-color: var(--react-flow-minimap-border);\n}\n\n.react-flow-dark .react-flow__controls-button {\n  background-color: var(--react-flow-controls-bg);\n  color: var(--react-flow-text);\n  border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-light .react-flow__controls-button {\n  background-color: var(--react-flow-controls-bg);\n  color: var(--react-flow-text);\n  border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-dark .react-flow__controls-button:hover {\n  background-color: #4b5563;\n}\n\n.react-flow-light .react-flow__controls-button:hover {\n  background-color: #e9ecef;\n}\n\n/* Mobile-friendly control buttons - larger touch targets */\n@media (max-width: 768px) {\n  .react-flow__controls-button {\n    width: 44px !important;\n    height: 44px !important;\n    min-width: 44px !important;\n    min-height: 44px !important;\n  }\n}\n\n/* Override React Flow default handle styles for tube fiber handles */\n/* Use CSS variables set by inline styles to override React Flow defaults */\n.react-flow__handle.tube-fiber-handle {\n  border: none !important;\n  transform: none !important;\n  background-clip: padding-box !important;\n  opacity: 1 !important;\n  /* Ensure no default React Flow styles interfere */\n  box-shadow: none !important;\n  /* Don't set background here - let inline styles or specific rules handle it */\n}\n\n/* Tube fiber handles - use fiber color */\n.react-flow__handle.tube-fiber-handle {\n  background: var(--fiber-bg-image, var(--fiber-bg)) !important;\n  background-color: var(--fiber-bg) !important;\n}\n\n/* Fibre flow map handles */\n.react-flow__handle.fibre-flow-handle {\n  border: none !important;\n  transform: none !important;\n  background-clip: padding-box !important;\n  opacity: 1 !important;\n  box-shadow: none !important;\n}\n\n.react-flow__handle.fibre-flow-handle {\n  background: var(--fiber-bg-image, var(--fiber-bg)) !important;\n  background-color: var(--fiber-bg) !important;\n  background-image: var(--fiber-bg-image, none) !important;\n}\n\n.react-flow__handle.rn-port-hitbox {\n  overflow: visible;\n}\n\n.react-flow__handle.connectionindicator.rn-port-hitbox::before {\n  content: '';\n  position: absolute;\n  top: calc(-1 * var(--rn-hit-expand-top, 0px));\n  right: calc(-1 * var(--rn-hit-expand-right, 0px));\n  bottom: calc(-1 * var(--rn-hit-expand-bottom, 0px));\n  left: calc(-1 * var(--rn-hit-expand-left, 0px));\n  border-radius: 4px;\n  background: transparent;\n  pointer-events: auto;\n}\n\n.react-flow__handle.rn-port-handle--clickable {\n  cursor: pointer;\n}\n\n.react-flow__handle.rn-port-handle--highlighted {\n  box-shadow: 0 0 0 2px #f59e0b, 0 0 8px rgba(245, 158, 11, 0.75);\n  z-index: 12;\n}\n\n\n.react-flow__handle-right.tube-fiber-handle {\n  right: auto !important;\n}\n\n/* More specific selector to ensure override - target all possible React Flow handle states */\n/* Only apply to non-ribbon handles */\n.react-flow__node .react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle),\n.react-flow__node .react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle)[data-handlepos],\n.react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle)[data-handlepos],\n.react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle)[data-fiber-idx] {\n  background: var(--fiber-bg-image, var(--fiber-bg)) !important;\n  background-color: var(--fiber-bg) !important;\n  background-image: var(--fiber-bg-image, none) !important;\n}\n\n/* Ribbon bundle handles - simple solid color (removed gradient complexity) */\n\n/* Connection animation - pulse effect when edge is first created */\n@keyframes edgeConnectPulse {\n  0% {\n    opacity: 0;\n    stroke-width: 1;\n  }\n  50% {\n    opacity: 1;\n    stroke-width: 4;\n  }\n  100% {\n    opacity: 1;\n    stroke-width: 2;\n  }\n}\n\n.react-flow__edge.edge-connecting path,\n.react-flow__edge.edge-connecting .react-flow__edge-path {\n  animation: edgeConnectPulse 1s ease-out;\n}\n\n/* Highlighted edge pulse + dash motion (trace paths) */\n@keyframes rnEdgeHighlightPulse {\n  0%,\n  100% {\n    opacity: 0.85;\n    stroke-width: var(--rn-edge-highlight-from, 2px);\n  }\n  50% {\n    opacity: 1;\n    stroke-width: var(--rn-edge-highlight-to, 6px);\n  }\n}\n\n@keyframes rnEdgeHighlightDash {\n  0% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -48;\n  }\n}\n\n.rn-edge-highlight {\n  animation: rnEdgeHighlightPulse 2.4s ease-in-out infinite,\n    rnEdgeHighlightDash 1.8s linear infinite;\n  opacity: 0.9;\n  stroke-linecap: round;\n}\n\n/* Splice glow animation - fade in when both handles are connected */\n@keyframes spliceGlowFadeIn {\n  0% {\n    opacity: 0;\n    transform: translateX(-50%) scaleY(0.3);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(-50%) scaleY(1);\n  }\n}\n\n.splice-glow {\n  animation: spliceGlowFadeIn 0.5s ease-out;\n  transform-origin: center;\n}\n\n/* Splice text animation - fade in when both handles are connected */\n@keyframes spliceTextFadeIn {\n  0% {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* Splice text overlay - blur and opacity for text readability */\n.splice-text-overlay {\n  backdrop-filter: blur(2px);\n  -webkit-backdrop-filter: blur(2px);\n}\n\n/* Dark mode overlay */\n.react-flow-dark .splice-text-overlay {\n  background: rgba(0, 0, 0, 0.6);\n}\n\n/* Light mode overlay */\n.react-flow-light .splice-text-overlay {\n  background: rgba(255, 255, 255, 0.7);\n}\n\n/* Splice text label - theme-aware colors */\n.splice-text-label {\n  color: #fff;\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.6);\n}\n\n.splice-text-label.animate-in {\n  animation: spliceTextFadeIn 0.5s ease-out;\n  transform-origin: center;\n}\n\n/* Light mode text */\n.react-flow-light .splice-text-label {\n  color: #1a1a1a;\n  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.7);\n}\n\n/* Remove all borders from splice nodes */\n.react-flow__node[data-type=\"splice\"],\n.react-flow__node[data-type=\"splice\"] > div {\n  border: none !important;\n  outline: none !important;\n}\n\n.splice-node {\n  background: transparent !important;\n  border: none !important;\n  outline: none !important;\n}\n\n/* Only remove box-shadow when not selected */\n.react-flow__node[data-type=\"splice\"]:not(.selected) > div,\n.splice-node:not(.selected) {\n  box-shadow: none !important;\n}\n\n/* React Networks Attribution */\n.react-networks-attribution {\n  padding: 0;\n  margin: 0;\n  z-index: 1000;\n}\n\n.react-networks-attribution-link {\n  font-size: 7px;\n  color: #9ca3af;\n  text-decoration: none;\n  font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  transition: color 0.2s ease;\n  padding: 1px 4px;\n  border-radius: 2px;\n  display: inline-block;\n  background: rgba(0, 0, 0, 0.3);\n  backdrop-filter: blur(4px);\n}\n\n.react-networks-attribution-link:hover {\n  color: #e5e7eb;\n  background: rgba(0, 0, 0, 0.4);\n}\n\n/* Light mode attribution */\n.react-flow-light .react-networks-attribution-link {\n  color: #6b7280;\n  background: rgba(255, 255, 255, 0.6);\n}\n\n.react-flow-light .react-networks-attribution-link:hover {\n  color: #1a1a1a;\n  background: rgba(255, 255, 255, 0.8);\n}\n\n/* Coupler node styles */\n.coupler-node {\n  transition: box-shadow 0.2s ease;\n}\n\n.coupler-node.selected {\n  box-shadow: 0 0 0 2px #3b82f6 !important;\n}\n\n/* Patch panel node styles */\n.patch-panel-node {\n  transition: box-shadow 0.2s ease, border-color 0.2s ease;\n}\n\n.patch-panel-node.selected {\n  box-shadow: 0 0 0 2px #3b82f6 !important;\n  border-color: #3b82f6 !important;\n}\n\n/* Closure node styles */\n.closure-node {\n  transition: box-shadow 0.2s ease, border-color 0.2s ease;\n}\n\n.closure-node.selected {\n  box-shadow: 0 0 0 2px #3b82f6 !important;\n  border-color: #3b82f6 !important;\n}\n\n/* Device node styles */\n.device-node {\n  background-color: var(--rn-device-bg-color, #1f2937);\n  color: var(--rn-device-text-color, white);\n  background-image: var(--rn-device-bg-image, none);\n  background-position: var(--rn-device-bg-position, center);\n  background-repeat: var(--rn-device-bg-repeat, no-repeat);\n  background-size: var(--rn-device-bg-size, cover);\n  border: 1px solid var(--rn-device-border-color, #10b981);\n  border-radius: 2px;\n  box-shadow: var(--rn-device-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.1));\n  box-sizing: border-box;\n  color: white;\n  cursor: grab;\n  display: flex;\n  flex-direction: column;\n  font-family: monospace;\n  font-size: 8px;\n  height: var(--rn-device-height, 20px);\n  justify-content: center;\n  left: var(--rn-device-left, auto);\n  margin: 0;\n  padding: 0;\n  position: relative;\n  transform: translateY(var(--rn-device-translate-y, 0px));\n  width: var(--rn-device-width, 100%);\n}\n\n.device-node__content {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  padding: 2px;\n  text-align: center;\n}\n\n.device-node__image-layer {\n  inset: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  z-index: 0;\n}\n\n.device-node__image {\n  display: block;\n  height: 100%;\n  pointer-events: none;\n  user-select: none;\n  width: 100%;\n}\n\n.device-node__content--image-badge {\n  overflow: visible;\n  text-align: left;\n}\n\n.device-node__label {\n  font-size: 7px;\n  font-weight: bold;\n  line-height: 1.1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.device-node__label--badge {\n  background: rgba(15, 23, 42, 0.88);\n  border: 1px solid rgba(148, 163, 184, 0.45);\n  border-radius: 2px;\n  display: inline-flex;\n  max-width: 100%;\n  padding: 1px 4px;\n}\n\n.device-node__manufacturer {\n  color: #9ca3af;\n  font-size: 6px;\n  line-height: 1;\n}\n\n.device-node__u-indicator {\n  background: #374151;\n  border-radius: 1px;\n  bottom: 1px;\n  color: #9ca3af;\n  font-size: 6px;\n  line-height: 1;\n  padding: 1px 2px;\n  position: absolute;\n  right: 1px;\n}\n\n.device-node__status-indicator {\n  background: var(--rn-device-status-color, #6b7280);\n  border-radius: 50%;\n  bottom: 1px;\n  height: 4px;\n  left: 1px;\n  position: absolute;\n  width: 4px;\n}\n\n.device-node__split-face {\n  background-color: #1f2937;\n  overflow: hidden;\n  position: relative;\n}\n\n.device-node__split-face--front {\n  border-left: 1px dashed rgba(156, 163, 175, 0.35);\n}\n\n.device-node__split-face--rear {\n  border-right: 1px dashed rgba(156, 163, 175, 0.35);\n}\n\n.device-node__face-bridge {\n  position: relative;\n}\n\n.device-node__face-bridge-line {\n  background: linear-gradient(180deg, transparent 0%, rgba(156, 163, 175, 0.8) 20%, rgba(156, 163, 175, 0.8) 80%, transparent 100%);\n  left: 50%;\n  position: absolute;\n  top: 1px;\n  transform: translateX(-50%);\n  width: 1px;\n  height: calc(100% - 2px);\n}\n\n.device-node__face-bridge-label {\n  background: rgba(17, 24, 39, 0.82);\n  border: 1px solid rgba(156, 163, 175, 0.4);\n  border-radius: 999px;\n  color: #d1d5db;\n  font-size: 6px;\n  font-weight: 700;\n  left: 50%;\n  letter-spacing: 0.04em;\n  max-width: 120px;\n  overflow: hidden;\n  padding: 1px 6px;\n  position: absolute;\n  text-overflow: ellipsis;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(-90deg);\n  white-space: nowrap;\n}\n\n/* Light mode adjustments */\n.react-flow-light .coupler-node {\n  background: #f9fafb;\n  color: #1f2937;\n  border-color: #d1d5db;\n}\n\n.react-flow-light .patch-panel-node {\n  background: transparent !important;\n  color: #1f2937;\n  border-color: #d1d5db;\n}\n\n.react-flow-light .closure-node {\n  background: transparent !important;\n  color: #1f2937;\n  border-color: #d1d5db;\n}\n\n/* Triangle node styles */\n.react-flow__node[data-type=\"fibre-split\"],\n.react-flow__node.react-flow__node-fibre-split {\n  background: transparent !important;\n  border: none !important;\n  padding: 0 !important;\n}\n\n.react-flow__node[data-type=\"fibre-split\"] > div,\n.react-flow__node.react-flow__node-fibre-split > div {\n  background: transparent !important;\n  border: none !important;\n  padding: 0 !important;\n  box-shadow: none !important;\n  overflow: visible !important;\n}\n\n.react-flow__node[data-type=\"fibre-split\"] svg,\n.react-flow__node.react-flow__node-fibre-split svg {\n  display: block !important;\n  visibility: visible !important;\n  opacity: 1 !important;\n}\n\n.triangle-node {\n  position: relative !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  background: transparent !important;\n  border: none !important;\n  padding: 0 !important;\n  margin: 0 !important;\n  box-shadow: none !important;\n  overflow: visible !important;\n  box-sizing: border-box !important;\n}\n\n\n.triangle-node-text {\n  text-align: center;\n  position: relative;\n  z-index: 2;\n  width: 46px;\n  height: 46px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  color: #000000;\n  font-weight: bold;\n  font-size: 12px;\n}\n\n/* Cable node rotation */\n.cable-node-rotated {\n  transform-origin: center center !important;\n}\n\n/* Ensure Fibre Flow edges render with full saturation and aren't affected by node overlays */\n.react-flow__edge[data-type=\"fibre-flow\"] path,\n.react-flow__edge[data-type=\"fibre-flow\"] .react-flow__edge-path {\n  opacity: 1 !important;\n  stroke-opacity: 1 !important;\n  mix-blend-mode: normal !important;\n  filter: none !important;\n}\n\n.react-flow__edge[data-type=\"fibre-flow-link\"] path,\n.react-flow__edge[data-type=\"fibre-flow-link\"] .react-flow__edge-path {\n  opacity: 1 !important;\n  stroke-opacity: 1 !important;\n  mix-blend-mode: normal !important;\n  filter: none !important;\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -1,4 +1,5 @@
-import React$1, { Component, ReactNode, ErrorInfo } from 'react';
+import React$1, { Component, ReactNode, ErrorInfo, CSSProperties } from 'react';
+import * as reactflow from 'reactflow';
 import { Node, NodeTypes, EdgeTypes, Connection, Edge, ConnectionMode, ReactFlowInstance, Viewport, FitViewOptions, NodeProps, EdgeProps } from 'reactflow';
 
 type FibreFlowCableKind = 'simple' | 'tube';
@@ -240,7 +241,7 @@ declare enum Width {
  * Port type enumeration
  * @public
  */
-type PortType = 'ethernet' | 'fiber' | 'console' | 'mgmt' | 'usb' | 'power_ac' | 'power_c13' | 'power_c19';
+type PortType = 'ethernet' | 'rj45' | 'fiber' | 'console' | 'mgmt' | 'usb' | 'power_ac' | 'power_c13' | 'power_c19';
 /**
  * Cable types used for connected network ports.
  * @public
@@ -383,6 +384,17 @@ type DeviceStatus = 'active' | 'inactive' | 'maintenance';
  * @public
  */
 type DeviceFace = 'front' | 'rear';
+type DiagramPortHandleRef = {
+    nodeId: string;
+    handleId: string;
+};
+type DiagramPortClickPayload = {
+    nodeId: string;
+    handleId: string;
+    groupName: string;
+    portLabel: string;
+    face: DeviceFace;
+};
 /**
  * Rack rendering layout modes.
  * @public
@@ -413,12 +425,14 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
     label: string;
     /** Current status of the node/device */
     status?: DeviceStatus | string;
-    /** Simple flat port input. Use `portGroups` / `rearPortGroups` for explicit grouped control. */
-    ports?: DevicePort[] | number;
+    /** Simple flat port input or grouped port blocks. Use `portGroups` / `rearPortGroups` for explicit grouped control. */
+    ports?: DevicePort[] | PortBlock[] | number;
     /** Advanced grouped front port input */
     portGroups?: PortBlock[];
     /** Advanced grouped rear port input */
     rearPortGroups?: PortBlock[];
+    /** Grouped rear port blocks (rack JSON alias for `rearPortGroups`) */
+    rearPorts?: PortBlock[];
     /** List of connected node IDs */
     connections?: string[];
     /** NetBox integration ID */
@@ -445,6 +459,11 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
     mountMode?: RackMountMode;
     /** Device type specification */
     deviceType?: string;
+    /**
+     * When false, device elevation renders as a status-colored block without front/rear photos.
+     * Defaults to true (show photos when URLs exist).
+     */
+    showDeviceImages?: boolean;
     /** Device manufacturer */
     manufacturer?: string;
     /** Device role in network */
@@ -575,7 +594,7 @@ interface RackNodeData extends NetworkNodeDataBase {
  * @public
  */
 interface DeviceNodeData extends NetworkNodeDataBase {
-    ports?: DevicePort[] | number;
+    ports?: DevicePort[] | PortBlock[] | number;
 }
 /**
  * Fibre flow cable node data.
@@ -912,14 +931,16 @@ interface RackDevice extends DeviceImageOptions {
     mountMode?: RackMountMode;
     /** Device role in network */
     role?: string;
-    /** Recommended simple port input. Use `portGroups` / `rearPortGroups` for explicit grouped control. */
-    ports?: DevicePort[];
+    /** Recommended simple port input (flat `DevicePort[]` or grouped `PortBlock[]`). */
+    ports?: DevicePort[] | PortBlock[];
     /** Current status of the device */
     status?: DeviceStatus | string;
     /** Advanced grouped front port input */
     portGroups?: PortBlock[];
     /** Advanced grouped rear port input */
     rearPortGroups?: PortBlock[];
+    /** Grouped rear port blocks (rack JSON alias for `rearPortGroups`) */
+    rearPorts?: PortBlock[];
     /** Power port side for rear face */
     powerSide?: PowerSide;
     /** Connected device IDs */
@@ -1212,6 +1233,26 @@ interface NetworkDiagramProps {
      * Defaults to true, matching the library's existing large-diagram behavior.
      */
     onlyRenderVisibleElements?: boolean;
+    /** Node IDs to keep at full opacity when diagram focus dimming is enabled */
+    highlightedNodeIds?: string[];
+    /** Edge IDs to keep at full opacity when diagram focus dimming is enabled */
+    highlightedEdgeIds?: string[];
+    /**
+     * When true, non-highlighted nodes and edges are dimmed while focus IDs are set.
+     * Edges connected to highlighted nodes remain in focus unless
+     * `connectEdgesToHighlightedNodes` is false.
+     */
+    dimUnhighlighted?: boolean;
+    /** Opacity for dimmed nodes/edges (0-1). Defaults to 0.25 */
+    dimOpacity?: number;
+    /** When false, only explicit highlightedEdgeIds stay bright during focus. */
+    connectEdgesToHighlightedNodes?: boolean;
+    /** When false, devices render without rack photos. Status border still uses `getStatusColor`. Default true. */
+    showDeviceImages?: boolean;
+    /** Port handles kept highlighted during diagram trace/focus. */
+    highlightedPortHandles?: DiagramPortHandleRef[];
+    /** Fired when a port handle is clicked (typically in read-only trace mode). */
+    onPortClick?: (payload: DiagramPortClickPayload) => void;
 }
 
 declare const NetworkDiagram: React$1.FC<NetworkDiagramProps>;
@@ -1260,91 +1301,32 @@ interface RackNodeProps extends NodeProps<NetworkNode['data']> {
     onRackFaceChange?: (rackId: string, face: 'front' | 'rear') => void;
     isDragOver?: boolean;
 }
-/**
- * Rack visualization component with U positioning support.
- *
- * Displays a 19" rack with configurable height, front/rear face switching,
- * and support for mounting devices at specific U positions.
- *
- * @example
- * ```tsx
- * {
- *   id: 'rack-1',
- *   type: 'rack',
- *   position: { x: 100, y: 100 },
- *   data: {
- *     label: 'Main Rack',
- *     uHeight: 42,
- *     status: 'active'
- *   }
- * }
- * ```
- *
- * @public
- */
-declare const RackNode: React$1.FC<RackNodeProps>;
+/** Memoized; uses useStoreApi (not useReactFlow) so rack chrome does not re-render on every node move. */
+declare const RackNode: React$1.NamedExoticComponent<RackNodeProps>;
 
 declare const FiberNode: React$1.FC<NodeProps<NetworkNode['data']>>;
 
-/**
- * Fiber edge component for connecting fiber ports between nodes.
- *
- * Supports both single fiber connections with color coding and ribbon fiber
- * connections (6-12 fibers) with parallel stripe visualization.
- *
- * @example
- * ```tsx
- * {
- *   id: 'edge-1',
- *   source: 'node-1',
- *   target: 'node-2',
- *   sourceHandle: 'fiber-1',
- *   targetHandle: 'fiber-2',
- *   type: 'fiber',
- *   data: {
- *     kind: 'fiber',
- *     ribbonFiberIds: [1, 2, 3, 4, 5, 6] // For ribbon mode
- *   }
- * }
- * ```
- *
- * @public
- */
-declare const FiberEdge: React$1.FC<EdgeProps<NetworkEdge['data']> & {
+declare const FiberEdge: React$1.NamedExoticComponent<Pick<reactflow.Edge<NetworkEdgeData | undefined>, "id" | "data" | "source" | "target" | "style" | "selected" | "animated"> & Pick<reactflow.WrapEdgeProps<any>, "sourcePosition" | "targetPosition" | "interactionWidth" | "sourceX" | "sourceY" | "targetX" | "targetY" | "sourceHandleId" | "targetHandleId"> & {
+    label?: string | React$1.ReactNode;
+    labelStyle?: React$1.CSSProperties;
+    labelShowBg?: boolean;
+    labelBgStyle?: React$1.CSSProperties;
+    labelBgPadding?: [number, number];
+    labelBgBorderRadius?: number;
+} & {
+    markerStart?: string;
+    markerEnd?: string;
+    pathOptions?: any;
+} & {
     className?: string;
 }>;
 
-declare const PowerEdge: React$1.FC<EdgeProps>;
+declare const PowerEdge: React$1.NamedExoticComponent<EdgeProps>;
 
-/**
- * Device visualization component with port management.
- *
- * Represents a device that can be placed in a rack. Supports port configuration,
- * U positioning, front/rear views, and various device types (servers, switches, routers, etc.).
- *
- * @example
- * ```tsx
- * {
- *   id: 'server-1',
- *   type: 'device',
- *   position: { x: 120, y: 150 },
- *   parentId: 'rack-1',
- *   data: {
- *     label: 'Web Server',
- *     deviceType: 'server',
- *     uPosition: 1,
- *     ports: [
- *       { id: 'eth0', label: 'eth0', group: 'Network Ports', connected: true, type: 'ethernet' }
- *     ]
- *   }
- * }
- * ```
- *
- * @public
- */
-declare const DeviceNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+/** Memoized to avoid re-rendering rack devices when unrelated nodes move (React Flow perf guide). */
+declare const DeviceNode: React$1.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
 
-declare const VerticalPDU: React$1.FC<NodeProps<NetworkNode['data']>>;
+declare const VerticalPDU: React$1.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
 
 declare const SpliceNode: React$1.FC<NodeProps<NetworkNode['data']>>;
 
@@ -2128,7 +2110,10 @@ declare function buildPortBlocksFromPorts(devicePorts: DevicePort[]): {
  * flat `ports: DevicePort[]` or explicit `portGroups` / `rearPortGroups`.
  * @public
  */
-declare function getResolvedPortBlocks(data: Pick<NetworkNode['data'], 'ports' | 'portGroups' | 'rearPortGroups'> | undefined): {
+type ResolvedPortBlockInput = Pick<NetworkNode['data'], 'ports' | 'portGroups' | 'rearPortGroups'> & {
+    rearPorts?: PortBlock[];
+};
+declare function getResolvedPortBlocks(data: ResolvedPortBlockInput | undefined): {
     ports: PortBlock[];
     rearPorts: PortBlock[];
 };
@@ -2158,6 +2143,139 @@ declare function hasRearPorts(data: Pick<NetworkNode['data'], 'ports' | 'portGro
  */
 declare function getDefaultDeviceFace(data: Pick<NetworkNode['data'], 'ports' | 'portGroups' | 'rearPortGroups'> | undefined): DeviceFace;
 
+/**
+ * Normalize source/target directional suffixes used for bidirectional handles.
+ * Example: `Rear Ports-1-target` -\> `Rear Ports-1`.
+ */
+declare function normalizeDirectionalHandleId(handleId: string | null | undefined): string;
+/**
+ * Normalize rendered handle ids back to their canonical endpoint id.
+ * This removes both directional suffixes and split-face rear aliases.
+ */
+declare function normalizeHandleId(handleId: string | null | undefined): string;
+/**
+ * Returns true when a port type is considered power-related.
+ */
+declare function isPowerPortType(portType: string | undefined): boolean;
+/**
+ * Build a stable handle id for a port.
+ * Power ports use the label directly to preserve legacy ids.
+ */
+declare function buildPortHandleId(portBlockName: string, port: Pick<Port, 'label' | 'id'> & {
+    type?: string;
+}): string;
+/**
+ * Heuristic for whether a handle id represents a power endpoint.
+ */
+declare function looksLikePowerHandleId(handleId: string): boolean;
+
+/**
+ * Resolve the effective device face for a flat port input.
+ * @public
+ */
+declare function resolveDevicePortFace(port: Pick<DevicePort, 'face' | 'type'>): DeviceFace;
+/** @deprecated Use {@link resolveDevicePortFace}. */
+declare const resolveReactNetworksPortFace: typeof resolveDevicePortFace;
+/**
+ * Resolve the effective port group name for a flat port input.
+ * @public
+ */
+declare function resolveDevicePortGroup(port: Pick<DevicePort, 'face' | 'group' | 'type'>): string;
+/** @deprecated Use {@link resolveDevicePortGroup}. */
+declare const resolveReactNetworksPortGroup: typeof resolveDevicePortGroup;
+/**
+ * Normalize unknown port array input into canonical flat {@link DevicePort} entries.
+ * @public
+ */
+declare function normalizeDevicePorts(value: unknown): DevicePort[] | undefined;
+/** @deprecated Use {@link normalizeDevicePorts}. */
+declare const normalizeReactNetworksPorts: typeof normalizeDevicePorts;
+/**
+ * Resolve flat device ports from node data supporting flat or grouped port input.
+ * @public
+ */
+declare function resolveNodeDevicePorts(value: unknown): DevicePort[] | undefined;
+/** @deprecated Use {@link resolveNodeDevicePorts}. */
+declare const resolveReactNetworksNodePorts: typeof resolveNodeDevicePorts;
+/**
+ * Flatten grouped port blocks into canonical flat {@link DevicePort} entries.
+ * @public
+ */
+declare function flattenDevicePortsFromGroups({ portGroups, rearPortGroups, }: {
+    portGroups?: PortBlock[];
+    rearPortGroups?: PortBlock[];
+}): DevicePort[];
+/** @deprecated Use {@link flattenDevicePortsFromGroups}. */
+declare const flattenReactNetworksPortGroups: typeof flattenDevicePortsFromGroups;
+/**
+ * Build grouped port blocks from flat device port input.
+ * @public
+ */
+declare function buildDevicePortGroupsFromPorts(ports: DevicePort[] | undefined): {
+    portGroups: PortBlock[];
+    rearPortGroups: PortBlock[];
+};
+/** @deprecated Use {@link buildDevicePortGroupsFromPorts}. */
+declare const buildReactNetworksPortGroupsFromPorts: typeof buildDevicePortGroupsFromPorts;
+interface ListPossiblePortHandleIdsOptions {
+    deviceType?: string;
+    face?: DeviceFace;
+}
+/**
+ * List handle ids that may exist on a rendered node for a port.
+ * @public
+ */
+declare function listPossiblePortHandleIds(portBlockName: string, port: Pick<Port, 'id' | 'label' | 'type'>, options?: ListPossiblePortHandleIdsOptions): string[];
+/**
+ * Validate that a handle id exists on node data after grouping resolution.
+ * @public
+ */
+declare function validatePortHandleOnNodeData(nodeData: Pick<NetworkNodeDataBase, 'ports' | 'portGroups' | 'rearPortGroups'> | undefined, handle: string, options?: {
+    deviceType?: string;
+    sanitizeHandle?: (value: string) => string;
+}): boolean;
+/**
+ * Convert flat ports to grouped blocks using the same rules as renderers.
+ * @public
+ */
+declare function resolveDevicePortBlocksFromFlatPorts(ports: DevicePort[]): {
+    portGroups: PortBlock[];
+    rearPortGroups: PortBlock[];
+};
+
+declare const parseSemanticPortPosition: (value: string) => PortPosition | undefined;
+declare const normalizePortPositionInput: (value: unknown) => PortPosition | undefined;
+
+type PathLayoutDirection = 'horizontal' | 'vertical';
+interface PathLayoutStepInput {
+    id: string;
+    type?: NetworkNode['type'];
+    data?: NetworkNode['data'];
+}
+interface PathLayoutEdgeInput {
+    id: string;
+    source: string;
+    target: string;
+    type?: NetworkEdge['type'];
+    data?: NetworkEdge['data'];
+}
+interface BuildPathLayoutOptions {
+    direction?: PathLayoutDirection;
+    spacing?: number;
+    origin?: {
+        x: number;
+        y: number;
+    };
+}
+/**
+ * Lay out a sequential path of nodes and connecting edges with deterministic spacing.
+ * @public
+ */
+declare function buildPathLayoutGraph(steps: PathLayoutStepInput[], edges: PathLayoutEdgeInput[], options?: BuildPathLayoutOptions): {
+    nodes: NetworkNode[];
+    edges: NetworkEdge[];
+};
+
 interface NetworkGraphSnapshot {
     nodes: NetworkNode[];
     edges: NetworkEdge[];
@@ -2365,6 +2483,41 @@ interface ReplaceEdgeOptions {
  */
 declare function replaceEdge(options: ReplaceEdgeOptions): Edge[] | null;
 
+interface DiagramFocusOptions {
+    highlightedNodeIds?: readonly string[];
+    highlightedEdgeIds?: readonly string[];
+    dimUnhighlighted?: boolean;
+    dimOpacity?: number;
+    /** When false, only explicit highlightedEdgeIds stay bright (not every edge on a highlighted node). */
+    connectEdgesToHighlightedNodes?: boolean;
+}
+declare const DEFAULT_DIAGRAM_DIM_OPACITY = 0.25;
+declare function hasDiagramFocus(options: DiagramFocusOptions): boolean;
+declare function isNodeInDiagramFocus(nodeId: string, options: DiagramFocusOptions): boolean;
+declare function isEdgeInDiagramFocus(edgeId: string, edge: Pick<NetworkEdge, 'source' | 'target'>, options: DiagramFocusOptions): boolean;
+type RuntimeNode = NetworkNode & {
+    style?: CSSProperties;
+};
+type RuntimeEdge = NetworkEdge & {
+    style?: CSSProperties;
+};
+declare function applyDiagramFocusToNodes<TNode extends RuntimeNode>(nodes: TNode[], options: DiagramFocusOptions): TNode[];
+declare function applyDiagramFocusToEdges<TEdge extends RuntimeEdge>(edges: TEdge[], options: DiagramFocusOptions): TEdge[];
+
+declare function isDeviceDiagramNode(node: NetworkNode): boolean;
+declare function applyDeviceDisplayToNodes(nodes: NetworkNode[], options?: {
+    showDeviceImages?: boolean;
+}, previousNodes?: NetworkNode[]): NetworkNode[];
+
+type DiagramPortContextValue = {
+    highlightedPortHandles?: readonly DiagramPortHandleRef[];
+    onPortClick?: (payload: DiagramPortClickPayload) => void;
+    portClickEnabled: boolean;
+};
+declare const DiagramPortProvider: React$1.Provider<DiagramPortContextValue>;
+declare function useDiagramPortInteraction(): DiagramPortContextValue;
+declare function isDiagramPortHandleHighlighted(highlightedPortHandles: readonly DiagramPortHandleRef[] | undefined, nodeId: string, handleId: string): boolean;
+
 /**
  * Template Schema V2 — unified device template model.
  *
@@ -2674,4 +2827,4 @@ declare function useNetworkDiagram(store: NetworkDiagramStore): NetworkDiagramSt
 declare function useNodes(store: NetworkDiagramStore): NetworkNode[];
 declare function useEdges(store: NetworkDiagramStore): NetworkEdge[];
 
-export { COUPLERS_PER_PANEL, COUPLER_SLOT_HEIGHT_PX, COUPLER_WIDTH_PX, CableNode, ClosureNode, CouplerNode, type DeviceFace, type DeviceImageFit, type DeviceImageOptions, type DeviceImageRepeat, DeviceNode, type DeviceNodeData, DevicePlacementError, type DevicePlacementValidation, type DevicePort, type DeviceStatus, type DeviceTemplateV2, type DiagramDocument, type DiagramEdge, type DiagramEdgeEndpoint, type DiagramEndpoint, DiagramErrorBoundary, type DiagramErrorBoundaryProps, type DiagramErrorBoundaryState, type DiagramExternalRef, type DiagramNode, type DiagramNodeKind, type DiagramNodePlacement, type DiagramNodeRender, type DiagramUiState, type EndpointConnectionKind, type EndpointMetadata, FIBER_COLORS_12, type FiberCable, type FiberCableType, type FiberColorId, FiberEdge, FiberNode, FibreCableWithTubesExpanded, type FibreCableWithTubesExpandedProps, type FibreFlowCable, type FibreFlowCableKind, type FibreFlowCableLayout, type FibreFlowCableNodeData, type FibreFlowCircuit, type FibreFlowClosure, type FibreFlowClosureNodeData, type FibreFlowColorMode, type FibreFlowEndpoint, type FibreFlowLayoutDirection, FibreFlowMap, type FibreFlowMapProps, type FibreFlowRow, type FibreFlowSplice, type FibreFlowTubeLabel, FibreSplitNode, HANDLE_EXTENSION_PX, type InventoryCableDTO, type InventoryDeviceDTO, type InventoryRackDTO, type MountClass, MultiTubeCableNode, type NetBoxCable, type NetBoxDevice, type NetBoxDeviceTransformOptions, type NetBoxInterface, type NetBoxMappedPort, type NetBoxPortPosition, type NetBoxRack, NetworkDiagram, type NetworkDiagramActionPanelOptions, type NetworkDiagramFitViewOptions, type NetworkDiagramFlowMethods, type NetworkDiagramFlowObject, type NetworkDiagramInteractionOptions, type NetworkDiagramOptions, type NetworkDiagramProps, type NetworkDiagramState, type NetworkDiagramStore, type NetworkDiagramStoreApi, type NetworkDiagramStoreState, type NetworkDiagramToImageOptions, type NetworkDiagramValidateConnectionParams, type NetworkDiagramValidationResult, type NetworkEdge, type NetworkEdgeData, type NetworkEdgeType, type NetworkGraphSnapshot, type NetworkNode, type NetworkNodeData, type NetworkNodeDataBase, type NetworkNodeDataByType, type NetworkNodeType, PANEL_BORDER_WIDTH, PANEL_HEADER_HEIGHT, PANEL_HEIGHT_PX, PANEL_PADDING, PANEL_TUBE_TRAY_SPACING, PANEL_WIDTH_PX, POWER_CONNECTORS, PatchPanelNode, type Port, type PortBlock, type PortCableType, type PortPosition, type PortType, type PortVisualDimensions, type PortVisualInput, type PortVisualKind, type PowerConnectorConfig, PowerEdge, type PowerPortStyle, type PowerSide, RACK_HEADER_HEIGHT, RACK_WIDTH_PX, type RackConfig, type RackDevice, type RackDeviceType, type RackLayoutMode, type RackMountMode, type RackMountedNodeType, RackNode, type RackNodeData, type RackNodeProps, type RackSchemaOptions, type RawNetboxTemplate, type RawTemplatePort, type RawTemplatePortBlock, type ReplaceEdgeOptions, type SpliceConfig, SpliceNode, SplicePlacementError, type SplicePlacementValidation, type SpliceSchemaOptions, type SpliceTrayConfig, SpliceTrayNode, TEMPLATE_SCHEMA_VERSION, type TemplateFaceData, type TemplateFrontRearPortLink, type TemplateParseResult, type TemplatePort, type TemplatePortBlock, type TemplateSource, type TemplateValidationIssue, type TemplateValidationReport, type TemplateWidth, TubeNode, type UNumberingDirection, U_HEIGHT_PX, type ValidateConnectionParams, type ValidationResult, VerticalPDU, Width, addDeviceToRack, addSpliceToTray, baseColorFor, buildNodesFromRackConfig, buildNodesFromSpliceConfig, buildPortBlocksFromPorts, calculateClosureDimensions, calculateCouplerRightX, calculateCouplerSlotSpacing, calculateCouplerSpacing, calculateDevicePositionFromU, calculatePanelDimensions, calculateSlotPositionFromY, calculateSplicePositionFromNumber, calculateUPositions, calculateYFromSlotPosition, countTemplateFacePorts, createNetworkDiagramStore, createRackConfigFromNodes, createSpliceConfigFromNodes, diagramDocumentToNetworkGraph, fiberSolidOrStriped, findNearestRack, findNextAvailableHolderPosition, findNextAvailableUPosition, generateLayout, getConnectorConfig, getCouplerDimensions, getDefaultDeviceFace, getDeviceConnectorType, getEndpointMetadata, getFiberColor, getFrontPortBlocks, getInnerContentWidth, getPDUPortType, getPanelHeight, getPanelWidth, getPowerPortStyle, getRackBounds, getRearPortBlocks, getResolvedPortBlocks, getStandardPortVisualDimensions, getStatusColor, getTrayDimensions, getTubeDimensions, hasFrontPorts, hasRearPorts, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToDiagramDocument, inventoryToNetworkDiagram, isHighPowerConnector, isPointInRack, isStriped, isUPositionAvailable, netboxCableToNetworkEdge, netboxDeviceToNetworkNode, netboxRackToNetworkNode, netboxToDiagramDocument, netboxToNetworkDiagram, networkGraphToDiagramDocument, parseNetboxTemplate, removeDeviceFromRack, removeSpliceFromTray, replaceEdge, resolveEndpointCompatibilityKeys, resolvePortVisualKind, snapToCouplerPosition, snapToSplicePosition, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, updateSpliceHolderPosition, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements, validateRenderFidelity, validateSplicePlacements };
+export { type BuildPathLayoutOptions, COUPLERS_PER_PANEL, COUPLER_SLOT_HEIGHT_PX, COUPLER_WIDTH_PX, CableNode, ClosureNode, CouplerNode, DEFAULT_DIAGRAM_DIM_OPACITY, type DeviceFace, type DeviceImageFit, type DeviceImageOptions, type DeviceImageRepeat, DeviceNode, type DeviceNodeData, DevicePlacementError, type DevicePlacementValidation, type DevicePort, type DeviceStatus, type DeviceTemplateV2, type DiagramDocument, type DiagramEdge, type DiagramEdgeEndpoint, type DiagramEndpoint, DiagramErrorBoundary, type DiagramErrorBoundaryProps, type DiagramErrorBoundaryState, type DiagramExternalRef, type DiagramFocusOptions, type DiagramNode, type DiagramNodeKind, type DiagramNodePlacement, type DiagramNodeRender, type DiagramPortClickPayload, type DiagramPortContextValue, type DiagramPortHandleRef, DiagramPortProvider, type DiagramUiState, type EndpointConnectionKind, type EndpointMetadata, FIBER_COLORS_12, type FiberCable, type FiberCableType, type FiberColorId, FiberEdge, FiberNode, FibreCableWithTubesExpanded, type FibreCableWithTubesExpandedProps, type FibreFlowCable, type FibreFlowCableKind, type FibreFlowCableLayout, type FibreFlowCableNodeData, type FibreFlowCircuit, type FibreFlowClosure, type FibreFlowClosureNodeData, type FibreFlowColorMode, type FibreFlowEndpoint, type FibreFlowLayoutDirection, FibreFlowMap, type FibreFlowMapProps, type FibreFlowRow, type FibreFlowSplice, type FibreFlowTubeLabel, FibreSplitNode, HANDLE_EXTENSION_PX, type InventoryCableDTO, type InventoryDeviceDTO, type InventoryRackDTO, type ListPossiblePortHandleIdsOptions, type MountClass, MultiTubeCableNode, type NetBoxCable, type NetBoxDevice, type NetBoxDeviceTransformOptions, type NetBoxInterface, type NetBoxMappedPort, type NetBoxPortPosition, type NetBoxRack, NetworkDiagram, type NetworkDiagramActionPanelOptions, type NetworkDiagramFitViewOptions, type NetworkDiagramFlowMethods, type NetworkDiagramFlowObject, type NetworkDiagramInteractionOptions, type NetworkDiagramOptions, type NetworkDiagramProps, type NetworkDiagramState, type NetworkDiagramStore, type NetworkDiagramStoreApi, type NetworkDiagramStoreState, type NetworkDiagramToImageOptions, type NetworkDiagramValidateConnectionParams, type NetworkDiagramValidationResult, type NetworkEdge, type NetworkEdgeData, type NetworkEdgeType, type NetworkGraphSnapshot, type NetworkNode, type NetworkNodeData, type NetworkNodeDataBase, type NetworkNodeDataByType, type NetworkNodeType, PANEL_BORDER_WIDTH, PANEL_HEADER_HEIGHT, PANEL_HEIGHT_PX, PANEL_PADDING, PANEL_TUBE_TRAY_SPACING, PANEL_WIDTH_PX, POWER_CONNECTORS, PatchPanelNode, type PathLayoutDirection, type PathLayoutEdgeInput, type PathLayoutStepInput, type Port, type PortBlock, type PortCableType, type PortPosition, type PortType, type PortVisualDimensions, type PortVisualInput, type PortVisualKind, type PowerConnectorConfig, PowerEdge, type PowerPortStyle, type PowerSide, RACK_HEADER_HEIGHT, RACK_WIDTH_PX, type RackConfig, type RackDevice, type RackDeviceType, type RackLayoutMode, type RackMountMode, type RackMountedNodeType, RackNode, type RackNodeData, type RackNodeProps, type RackSchemaOptions, type RawNetboxTemplate, type RawTemplatePort, type RawTemplatePortBlock, type ReplaceEdgeOptions, type SpliceConfig, SpliceNode, SplicePlacementError, type SplicePlacementValidation, type SpliceSchemaOptions, type SpliceTrayConfig, SpliceTrayNode, TEMPLATE_SCHEMA_VERSION, type TemplateFaceData, type TemplateFrontRearPortLink, type TemplateParseResult, type TemplatePort, type TemplatePortBlock, type TemplateSource, type TemplateValidationIssue, type TemplateValidationReport, type TemplateWidth, TubeNode, type UNumberingDirection, U_HEIGHT_PX, type ValidateConnectionParams, type ValidationResult, VerticalPDU, Width, addDeviceToRack, addSpliceToTray, applyDeviceDisplayToNodes, applyDiagramFocusToEdges, applyDiagramFocusToNodes, baseColorFor, buildDevicePortGroupsFromPorts, buildNodesFromRackConfig, buildNodesFromSpliceConfig, buildPathLayoutGraph, buildPortBlocksFromPorts, buildPortHandleId, buildPortHandleId as buildReactNetworksHandleId, buildReactNetworksPortGroupsFromPorts, calculateClosureDimensions, calculateCouplerRightX, calculateCouplerSlotSpacing, calculateCouplerSpacing, calculateDevicePositionFromU, calculatePanelDimensions, calculateSlotPositionFromY, calculateSplicePositionFromNumber, calculateUPositions, calculateYFromSlotPosition, countTemplateFacePorts, createNetworkDiagramStore, createRackConfigFromNodes, createSpliceConfigFromNodes, diagramDocumentToNetworkGraph, fiberSolidOrStriped, findNearestRack, findNextAvailableHolderPosition, findNextAvailableUPosition, flattenDevicePortsFromGroups, flattenReactNetworksPortGroups, generateLayout, getConnectorConfig, getCouplerDimensions, getDefaultDeviceFace, getDeviceConnectorType, getEndpointMetadata, getFiberColor, getFrontPortBlocks, getInnerContentWidth, getPDUPortType, getPanelHeight, getPanelWidth, getPowerPortStyle, getRackBounds, getRearPortBlocks, getResolvedPortBlocks, getStandardPortVisualDimensions, getStatusColor, getTrayDimensions, getTubeDimensions, hasDiagramFocus, hasFrontPorts, hasRearPorts, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToDiagramDocument, inventoryToNetworkDiagram, isDeviceDiagramNode, isDiagramPortHandleHighlighted, isEdgeInDiagramFocus, isHighPowerConnector, isNodeInDiagramFocus, isPointInRack, isPowerPortType, isStriped, isUPositionAvailable, listPossiblePortHandleIds, looksLikePowerHandleId, netboxCableToNetworkEdge, netboxDeviceToNetworkNode, netboxRackToNetworkNode, netboxToDiagramDocument, netboxToNetworkDiagram, networkGraphToDiagramDocument, normalizeDevicePorts, normalizeDirectionalHandleId, normalizeHandleId, normalizePortPositionInput, normalizeReactNetworksPorts, parseNetboxTemplate, parseSemanticPortPosition, removeDeviceFromRack, removeSpliceFromTray, replaceEdge, resolveDevicePortBlocksFromFlatPorts, resolveDevicePortFace, resolveDevicePortGroup, resolveEndpointCompatibilityKeys, resolveNodeDevicePorts, resolvePortVisualKind, resolveReactNetworksNodePorts, resolveReactNetworksPortFace, resolveReactNetworksPortGroup, snapToCouplerPosition, snapToSplicePosition, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, updateSpliceHolderPosition, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useDiagramPortInteraction, useNetworkDiagram, validateAndSnapDevice, validatePortHandleOnNodeData, validateRackDevicePlacements, validateRenderFidelity, validateSplicePlacements };