@mp70/react-networks 0.3.0-alpha.3 → 0.5.0-alpha.0

package/README.md

@@ -1,4 +1,4 @@
-# @mp70/react-networks
+# react-networks
 
 [![npm version](https://img.shields.io/npm/v/@mp70/react-networks.svg)](https://www.npmjs.com/package/@mp70/react-networks)
 [![license](https://img.shields.io/npm/l/@mp70/react-networks.svg)](https://www.npmjs.com/package/@mp70/react-networks)
@@ -56,13 +56,10 @@ const nodes: NetworkNode[] = [
     data: { 
       label: 'Web Server',
       uPosition: 1,
-      ports: [{
-        name: 'Network Ports',
-        ports: [
-          { label: 'eth0', connected: true, type: 'ethernet' },
-          { label: 'eth1', connected: false, type: 'ethernet' }
-        ]
-      }]
+      ports: [
+        { id: 'eth0', label: 'eth0', group: 'Network Ports', connected: true, type: 'ethernet' },
+        { id: 'eth1', label: 'eth1', group: 'Network Ports', connected: false, type: 'ethernet' }
+      ]
     }
   }
 ];
@@ -250,13 +247,10 @@ const rackSchema: RackConfig[] = [
         height: 1,
         type: 'server',
         width: Width.FULL,
-        ports: [{
-          name: 'Network Ports',
-          ports: [
-            { label: 'eth0', connected: true, type: 'ethernet' },
-            { label: 'eth1', connected: false, type: 'ethernet' }
-          ]
-        }]
+        ports: [
+          { id: 'eth0', label: 'eth0', group: 'Network Ports', connected: true, type: 'ethernet' },
+          { id: 'eth1', label: 'eth1', group: 'Network Ports', connected: false, type: 'ethernet' }
+        ]
       },
       {
         id: 'switch-1',
@@ -265,13 +259,10 @@ const rackSchema: RackConfig[] = [
         height: 1,
         type: 'switch',
         width: Width.FULL,
-        ports: [{
-          name: 'Uplink Ports',
-          ports: [
-            { label: 'uplink-1', connected: true, type: 'fiber' },
-            { label: 'uplink-2', connected: false, type: 'fiber' }
-          ]
-        }]
+        ports: [
+          { id: 'port-1', label: 'port-1', group: 'Uplink Ports', connected: true, type: 'fiber' },
+          { id: 'port-2', label: 'port-2', group: 'Uplink Ports', connected: false, type: 'fiber' }
+        ]
       }
     ]
   }
@@ -280,6 +271,8 @@ const rackSchema: RackConfig[] = [
 const nodes = buildNodesFromRackConfig(rackSchema);
 ```
 
+For the simplest device API, pass a flat `ports: DevicePort[]` array and set `group` / `face` per port. Use `portGroups` and `rearPortGroups` only when you need explicit grouped front/rear control.
+
 Device images (e.g. server front/rear photos or SVGs) use `frontImageUrl` and `rearImageUrl` on each device; supported formats include PNG, SVG, JPEG, GIF, and WebP.
 
 ### Inventory Integration

package/dist/index.css

@@ -1,4 +1,4 @@
-/* Library styles for @mp70/react-networks */
+/* Library styles for react-networks */
 
 /* Edge zIndex styles for dynamic prominence */
 .edge-prominent {
@@ -393,6 +393,11 @@
   text-align: center;
 }
 
+.device-node__content--image-badge {
+  overflow: visible;
+  text-align: left;
+}
+
 .device-node__label {
   font-size: 7px;
   font-weight: bold;
@@ -402,6 +407,15 @@
   white-space: nowrap;
 }
 
+.device-node__label--badge {
+  background: rgba(15, 23, 42, 0.88);
+  border: 1px solid rgba(148, 163, 184, 0.45);
+  border-radius: 2px;
+  display: inline-flex;
+  max-width: 100%;
+  padding: 1px 4px;
+}
+
 .device-node__manufacturer {
   color: #9ca3af;
   font-size: 6px;

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styles/index.css"],"sourcesContent":["/* Library styles for @mp70/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\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__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__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}\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":"AAGA,CAAC,eACC,QAAS,eACT,QAAS,WACX,CAEA,CAAC,YACC,QAAS,cACT,QAAS,YACX,CAGA,CAAC,YACC,QAAS,cACX,CAEA,CAAC,WACC,QAAS,aACX,CAGA,CAAC,gBACC,yBAAyB,QACzB,mBAAmB,QACnB,qBAAqB,QACrB,0BAA0B,QAC1B,8BAA8B,QAC9B,yBAAyB,QACzB,6BAA6B,OAC/B,CAEA,CAAC,iBACC,yBAAyB,QACzB,mBAAmB,QACnB,qBAAqB,QACrB,0BAA0B,QAC1B,8BAA8B,QAC9B,yBAAyB,QACzB,6BAA6B,OAC/B,CAGA,CArBC,gBAqBgB,CAAC,uBAIlB,CAfC,iBAeiB,CAJA,uBAChB,iBAAkB,IAAI,wBACxB,CAOA,CApBC,iBAoBiB,CAAC,qBACjB,iBAAkB,iBACpB,CAEA,CAxBC,iBAwBiB,CAAC,WACjB,iBAAkB,OACpB,CAEA,CAtCC,gBAsCgB,CAAC,qBAKlB,CAjCC,iBAiCiB,CALA,qBAChB,iBAAkB,IAAI,0BACtB,aAAc,IAAI,6BACpB,CAOA,CAhDC,gBAgDgB,CAAC,oBAKlB,CA3CC,iBA2CiB,CALA,oBAChB,iBAAkB,IAAI,yBACtB,aAAc,IAAI,4BACpB,CAOA,CA1DC,gBA0DgB,CAAC,4BAMlB,CAtDC,iBAsDiB,CANA,4BAChB,iBAAkB,IAAI,0BACtB,MAAO,IAAI,mBACX,aAAc,IAAI,6BACpB,CAQA,CAtEC,gBAsEgB,CAZC,2BAY2B,OAC3C,iBAAkB,OACpB,CAEA,CAhEC,iBAgEiB,CAhBA,2BAgB4B,OAC5C,iBAAkB,OACpB,CAGA,OAAO,UAAY,OACjB,CAtBgB,4BAuBd,MAAO,eACP,OAAQ,eACR,UAAW,eACX,WAAY,cACd,CACF,CAIA,CAAC,kBAAkB,CAAC,kBAClB,OAAQ,eACR,UAAW,eACX,gBAAiB,sBACjB,QAAS,YAET,WAAY,cAEd,CAGA,CAXC,kBAWkB,CAXC,kBAYlB,WAAY,IAAI,gBAAgB,EAAE,IAAI,uBACtC,iBAAkB,IAAI,qBACxB,CAGA,CAjBC,kBAiBkB,CAAC,kBAClB,OAAQ,eACR,UAAW,eACX,gBAAiB,sBACjB,QAAS,YACT,WAAY,cACd,CAEA,CAzBC,kBAyBkB,CARC,kBASlB,WAAY,IAAI,gBAAgB,EAAE,IAAI,uBACtC,iBAAkB,IAAI,sBACtB,iBAAkB,IAAI,gBAAgB,EAAE,eAC1C,CAGA,CAAC,wBAAwB,CAhCL,kBAiClB,MAAO,cACT,CAIA,CAAC,iBAAiB,CAtCjB,kBAsCoC,CAtCjB,iBAsCmC,KAAK,CAAC,sBAC7D,CADC,iBACiB,CAvCjB,kBAuCoC,CAvCjB,iBAuCmC,KAAK,CADC,qBACqB,CAAC,gBACnF,CAxCC,kBAwCkB,CAxCC,iBAwCiB,KAAK,CAFmB,qBAEG,CAAC,gBACjE,CAzCC,kBAyCkB,CAzCC,iBAyCiB,KAAK,CAHmB,qBAGG,CAAC,gBAC/D,WAAY,IAAI,gBAAgB,EAAE,IAAI,uBACtC,iBAAkB,IAAI,sBACtB,iBAAkB,IAAI,gBAAgB,EAAE,eAC1C,CAKA,WAAW,iBACT,GACE,QAAS,EACT,aAAc,CAChB,CACA,IACE,QAAS,EACT,aAAc,CAChB,CACA,GACE,QAAS,EACT,aAAc,CAChB,CACF,CAEA,CAAC,gBAAgB,CAAC,gBAAgB,KAClC,CADC,gBACgB,CADC,gBACgB,CAAC,sBACjC,UAAW,iBAAiB,GAAG,QACjC,CAGA,WAAW,qBACT,MAEE,QAAS,IACT,aAAc,IAAI,wBAAwB,EAAE,IAC9C,CACA,IACE,QAAS,EACT,aAAc,IAAI,sBAAsB,EAAE,IAC5C,CACF,CAEA,WAAW,oBACT,GACE,kBAAmB,CACrB,CACA,GACE,kBAAmB,GACrB,CACF,CAEA,CAAC,kBACC,UAAW,qBAAqB,KAAK,YAAY,QAAQ,CACvD,oBAAoB,KAAK,OAAO,SAClC,QAAS,GACT,eAAgB,KAClB,CAGA,WAAW,iBACT,GACE,QAAS,EACT,UAAW,UAAW,MAAM,OAAO,GACrC,CACA,GACE,QAAS,EACT,UAAW,UAAW,MAAM,OAAO,EACrC,CACF,CAEA,CAAC,YACC,UAAW,iBAAiB,IAAK,SACjC,iBAAkB,MACpB,CAGA,WAAW,iBACT,GACE,QAAS,EACT,UAAW,MAAM,GACnB,CACA,GACE,QAAS,EACT,UAAW,MAAM,EACnB,CACF,CAGA,CAAC,oBACC,gBAAiB,KAAK,KACtB,wBAAyB,KAAK,IAChC,CAGA,CAjOC,gBAiOgB,CANhB,oBAOC,WAAY,KACd,CAGA,CA5NC,iBA4NiB,CAXjB,oBAYC,WAAY,SACd,CAGA,CAAC,kBACC,MAAO,KACP,YAAa,EAAE,IAAI,IAAI,KAAK,CAAC,CAAE,CAAC,CAAE,CAAC,CAAE,GAAI,CAAE,EAAE,EAAE,IAAI,KAAK,CAAC,CAAE,CAAC,CAAE,CAAC,CAAE,GACnE,CAEA,CALC,iBAKiB,CAAC,WACjB,UAAW,iBAAiB,IAAK,SACjC,iBAAkB,MACpB,CAGA,CA5OC,iBA4OiB,CAXjB,kBAYC,MAAO,QACP,YAAa,EAAE,IAAI,IAAI,KAAK,GAAG,CAAE,GAAG,CAAE,GAAG,CAAE,GAAI,CAAE,EAAE,EAAE,IAAI,KAAK,GAAG,CAAE,GAAG,CAAE,GAAG,CAAE,GAC/E,CAGA,CA5HC,gBA4HgB,CAAC,kBAClB,CA7HC,gBA6HgB,CAAC,iBAAoB,CAAE,IACtC,OAAQ,eACR,QAAS,cACX,CAEA,CAAC,YACC,WAAY,sBACZ,OAAQ,eACR,QAAS,cACX,CAGA,CAzIC,gBAyIgB,CAAC,iBAAmB,KAAK,CAAC,SAAU,CAAE,IACvD,CARC,WAQW,KAAK,CAD0B,UAEzC,WAAY,cACd,CAGA,CAAC,2BAtSD,QAuSW,EAvSX,OAwSU,EACR,QAAS,IACX,CAEA,CAAC,gCACC,UAAW,IACX,MAAO,QACP,gBAAiB,KACjB,YAAa,YAAY,CAAE,cAAc,CAAE,OAAS,CAAE,KAAK,CAAE,QAAQ,CAAE,eAAiB,CAAE,UAC1F,WAAY,MAAM,IAAK,KAjTzB,QAkTW,IAAI,IAlTf,cAmTiB,IACf,QAAS,aACT,WAAY,UACZ,gBAAiB,KAAK,IACxB,CAEA,CAbC,+BAa+B,OAC9B,MAAO,QACP,WAAY,KACd,CAGA,CA9RC,iBA8RiB,CAnBjB,gCAoBC,MAAO,QACP,WAAY,KACd,CAEA,CAnSC,iBAmSiB,CAxBjB,+BAwBiD,OAChD,MAAO,QACP,WAAY,KACd,CAGA,CAAC,aACC,WAAY,WAAW,IAAK,IAC9B,CAEA,CAJC,YAIY,CA9C8B,SA+CzC,WAAY,EAAE,EAAE,EAAE,IAAI,iBACxB,CAGA,CAAC,iBACC,WAAY,WAAW,IAAK,IAAI,CAAE,aAAa,IAAK,IACtD,CAEA,CAJC,gBAIgB,CAvD0B,SAwDzC,WAAY,EAAE,EAAE,EAAE,IAAI,kBACtB,aAAc,iBAChB,CAGA,CAAC,aACC,WAAY,WAAW,IAAK,IAAI,CAAE,aAAa,IAAK,IACtD,CAEA,CAJC,YAIY,CAjE8B,SAkEzC,WAAY,EAAE,EAAE,EAAE,IAAI,kBACtB,aAAc,iBAChB,CAGA,CAAC,YACC,iBAAkB,QAClB,iBAAkB,IAAI,oBAAoB,EAAE,MAC5C,oBAAqB,IAAI,uBAAuB,EAAE,QAClD,kBAAmB,IAAI,qBAAqB,EAAE,WAC9C,gBAAiB,IAAI,mBAAmB,EAAE,OAC1C,OAAQ,IAAI,MAAM,IAAI,wBAAwB,EAAE,SA7WlD,cA8WiB,IACf,WAAY,IAAI,sBAAsB,EAAE,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAChE,WAAY,WACZ,MAAO,KACP,OAAQ,KACR,QAAS,KACT,eAAgB,OAChB,YAAa,UACb,UAAW,IACX,OAAQ,IAAI,kBAAkB,EAAE,MAChC,gBAAiB,OACjB,KAAM,IAAI,gBAAgB,EAAE,MAzX9B,OA0XU,EA1XV,QA2XW,EACT,SAAU,SACV,UAAW,WAAW,IAAI,uBAAuB,EAAE,MACnD,MAAO,IAAI,iBAAiB,EAAE,KAChC,CAEA,CAAC,qBACC,QAAS,KACT,KAAM,EACN,eAAgB,OAChB,gBAAiB,OACjB,SAAU,OAtYZ,QAuYW,IACT,WAAY,MACd,CAEA,CAAC,mBACC,UAAW,IACX,YAAa,IACb,YAAa,IACb,SAAU,OACV,cAAe,SACf,YAAa,MACf,CAEA,CAAC,0BACC,MAAO,QACP,UAAW,IACX,YAAa,CACf,CAEA,CAAC,yBACC,WAAY,QA3Zd,cA4ZiB,IACf,OAAQ,IACR,MAAO,QACP,UAAW,IACX,YAAa,EAhaf,QAiaW,IAAI,IACb,SAAU,SACV,MAAO,GACT,CAEA,CAAC,8BACC,WAAY,IAAI,wBAAwB,EAAE,SAva5C,cAwaiB,IACf,OAAQ,IACR,OAAQ,IACR,KAAM,IACN,SAAU,SACV,MAAO,GACT,CAEA,CAAC,wBACC,iBAAkB,OACpB,CAEA,CAAC,+BACC,YAAa,IAAI,OAAO,KAAK,GAAG,CAAE,GAAG,CAAE,GAAG,CAAE,IAC9C,CAEA,CAAC,8BACC,aAAc,IAAI,OAAO,KAAK,GAAG,CAAE,GAAG,CAAE,GAAG,CAAE,IAC/C,CAEA,CAAC,yBACC,SAAU,QACZ,CAEA,CAAC,8BACC,WAAY,gBAAgB,MAAM,CAAE,YAAY,EAAE,CAAE,KAAK,GAAG,CAAE,GAAG,CAAE,GAAG,CAAE,IAAK,GAAG,CAAE,KAAK,GAAG,CAAE,GAAG,CAAE,GAAG,CAAE,IAAK,GAAG,CAAE,YAAY,MAC5H,KAAM,IACN,SAAU,SACV,IAAK,IACL,UAAW,UAAW,MACtB,MAAO,IACP,OAAQ,KAAK,KAAK,EAAE,IACtB,CAEA,CAAC,+BACC,WAAY,UACZ,OAAQ,IAAI,MAAM,KAAK,GAAG,CAAE,GAAG,CAAE,GAAG,CAAE,IA5cxC,cA6ciB,MACf,MAAO,QACP,UAAW,IACX,YAAa,IACb,KAAM,IACN,eAAgB,MAChB,UAAW,MACX,SAAU,OApdZ,QAqdW,IAAI,IACb,SAAU,SACV,cAAe,SACf,IAAK,IACL,UAAW,UAAU,IAAI,CAAE,MAAM,OAAO,QACxC,YAAa,MACf,CAGA,CA7bC,iBA6biB,CApJjB,aAqJC,WAAY,QACZ,MAAO,QACP,aAAc,OAChB,CAEA,CAncC,iBAmciB,CAjJjB,iBAuJD,CAzcC,iBAyciB,CA7IjB,aAwIC,WAAY,sBACZ,MAAO,QACP,aAAc,OAChB,CASA,CA1VC,gBA0VgB,CAAC,uBAClB,CA3VC,gBA2VgB,CAAC,6BAChB,WAAY,sBACZ,OAAQ,eApfV,QAqfW,WACX,CAEA,CAjWC,gBAiWgB,CAAC,sBAAyB,CAAE,IAC7C,CAlWC,gBAkWgB,CAPC,4BAO6B,CAAE,IAC/C,WAAY,sBACZ,OAAQ,eA3fV,QA4fW,YACT,WAAY,eACZ,SAAU,iBACZ,CAEA,CA1WC,gBA0WgB,CAAC,uBAAyB,IAC3C,CA3WC,gBA2WgB,CAhBC,6BAgB6B,IAC7C,QAAS,gBACT,WAAY,kBACZ,QAAS,WACX,CAEA,CAAC,cACC,SAAU,mBACV,QAAS,eACT,YAAa,iBACb,gBAAiB,iBACjB,WAAY,sBACZ,OAAQ,eA9gBV,QA+gBW,YA/gBX,OAghBU,YACR,WAAY,eACZ,SAAU,kBACV,WAAY,oBACd,CAGA,CAAC,mBACC,WAAY,OACZ,SAAU,SACV,QAAS,EACT,MAAO,KACP,OAAQ,KACR,QAAS,KACT,YAAa,OACb,gBAAiB,OA/hBnB,OAgiBU,EACR,MAAO,KACP,YAAa,IACb,UAAW,IACb,CAGA,CAAC,mBACC,iBAAkB,OAAO,gBAC3B,CAGA,CA1XC,gBA0XgB,CAAC,sBAAwB,KAC1C,CA3XC,gBA2XgB,CAAC,sBAAwB,CA1XP,sBA2XjC,QAAS,YACT,eAAgB,YAChB,eAAgB,iBAChB,OAAQ,cACV,CAEA,CAlYC,gBAkYgB,CAAC,2BAA6B,KAC/C,CAnYC,gBAmYgB,CAAC,2BAA6B,CAlYZ,sBAmYjC,QAAS,YACT,eAAgB,YAChB,eAAgB,iBAChB,OAAQ,cACV","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\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__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}\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

@@ -61,7 +61,7 @@ interface NetBoxMappedPort {
     position?: NetBoxPortPosition;
 }
 interface NetBoxDeviceTransformOptions {
-    /** Include interface arrays as `ports`/`rearPorts` in generated nodes */
+    /** Include interface arrays as flat `ports` in generated nodes */
     includeInterfacePorts?: boolean;
     /** Include per-port position metadata when provided */
     includePortPositions?: boolean;
@@ -253,7 +253,7 @@ type PortCableType = 'smf' | 'cat6' | 'om3' | 'om4' | 'om5' | 'cat5e' | 'cat6a'
  *
  * @public
  */
-type DeviceImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+type DeviceImageFit = 'cover' | 'contain' | 'contain-height' | 'fill' | 'none' | 'scale-down';
 /**
  * Device image repeat options.
  * @public
@@ -297,6 +297,40 @@ interface PortPosition {
     /** Absolute Y position as percentage (0-100) */
     yPercent?: number;
 }
+/**
+ * Recommended simple port input for device and PDU rendering.
+ * Pass a flat array in `ports`; `react-networks` groups entries into front/rear
+ * `PortBlock[]` internally using each port's `face` and `group`.
+ * @public
+ */
+interface DevicePort {
+    /** Stable handle identifier override (defaults to `group + label`, or `label` for power) */
+    id?: string;
+    /** Display label for the port */
+    label: string;
+    /** Front/rear device face. `back` is accepted as an alias for `rear`. */
+    face?: DeviceView | 'back';
+    /** Optional block/group name (for example `Network Ports`, `QSFP28`, `Power Ports`) */
+    group?: string;
+    /** Whether the port is currently connected */
+    connected?: boolean;
+    /** Type of port for styling and validation */
+    type?: PortType;
+    /** Cable type for connection validation */
+    cableType?: PortCableType;
+    /** Optional power connector type for rendering (mainly for PDU ports) */
+    connectorType?: 'C13' | 'C14' | 'C19' | 'C20';
+    /** Optional compatibility keys. When omitted, defaults are derived from type/cable/connector data. */
+    compatibility?: string[];
+    /** Optional sort order within a face/group bucket */
+    order?: number;
+    /**
+     * Optional placement hint.
+     * Use `side` with `offsetPercent`/`offsetPx` for edge-anchored placement,
+     * or `xPercent`/`yPercent` for exact coordinates.
+     */
+    position?: PortPosition;
+}
 interface Port {
     /** Stable handle identifier override (defaults to `label`) */
     id?: string;
@@ -310,6 +344,8 @@ interface Port {
     cableType?: PortCableType;
     /** Optional power connector type for rendering (mainly for PDU ports) */
     connectorType?: 'C13' | 'C14' | 'C19' | 'C20';
+    /** Optional compatibility keys. When omitted, defaults are derived from type/cable/connector data. */
+    compatibility?: string[];
     /** Optional explicit handle placement */
     position?: PortPosition;
 }
@@ -368,10 +404,12 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
     label: string;
     /** Current status of the node/device */
     status?: DeviceStatus | string;
-    /** Port configurations for device-like nodes */
-    ports?: PortBlock[] | number;
-    /** Rear port configurations */
-    rearPorts?: PortBlock[];
+    /** Simple flat port input. Use `portGroups` / `rearPortGroups` for explicit grouped control. */
+    ports?: DevicePort[] | number;
+    /** Advanced grouped front port input */
+    portGroups?: PortBlock[];
+    /** Advanced grouped rear port input */
+    rearPortGroups?: PortBlock[];
     /** List of connected node IDs */
     connections?: string[];
     /** NetBox integration ID */
@@ -386,6 +424,8 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
     uHeight?: number;
     /** Device position within rack in U units */
     uPosition?: number;
+    /** Whether this node is currently mounted inside a rack container */
+    isRackMounted?: boolean;
     /** Current front/rear view orientation */
     view?: DeviceView;
     /** Rack face orientation */
@@ -521,14 +561,14 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
  * @public
  */
 interface RackNodeData extends NetworkNodeDataBase {
-    ports?: number | PortBlock[];
+    ports?: number;
 }
 /**
  * Device-like node data (servers/switches/routers/generic device).
  * @public
  */
 interface DeviceNodeData extends NetworkNodeDataBase {
-    ports?: PortBlock[] | number;
+    ports?: DevicePort[] | number;
 }
 /**
  * Fibre flow cable node data.
@@ -668,9 +708,148 @@ type NetworkEdge<TData extends NetworkEdgeData = NetworkEdgeData> = {
     targetHandle?: string;
     /** Type of network connection */
     type?: NetworkEdgeType;
+    /** Whether the edge should be hidden from rendering */
+    hidden?: boolean;
     /** Edge data and configuration */
     data?: TData;
 };
+/**
+ * High-level document format independent from React Flow handle ids.
+ * @public
+ */
+interface DiagramDocument {
+    nodes: DiagramNode[];
+    edges: DiagramEdge[];
+    ui?: DiagramUiState;
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Node kinds used by the document model.
+ * @public
+ */
+type DiagramNodeKind = 'rack' | 'equipment' | 'pdu' | 'fiber' | 'tube' | 'cable' | 'multi-tube-cable' | 'splice' | 'coupler' | 'splitter' | 'container' | 'fibre-flow-cable' | 'fibre-flow-closure';
+/**
+ * Placement data for document nodes.
+ * @public
+ */
+interface DiagramNodePlacement {
+    position: {
+        x: number;
+        y: number;
+    };
+    parentId?: string;
+    extent?: 'parent';
+    rack?: {
+        uPosition?: number;
+        mountMode?: RackMountMode;
+        rackLayout?: RackLayoutMode;
+        rackWidthPx?: number;
+        rackFaceGapPx?: number;
+    };
+    container?: {
+        slotPosition?: number;
+        holderPosition?: number;
+    };
+}
+/**
+ * Endpoint definition for document nodes.
+ * @public
+ */
+interface DiagramEndpoint {
+    id: string;
+    label: string;
+    face?: DeviceView | 'internal';
+    group?: string;
+    role?: 'network' | 'power' | 'fiber' | 'tube' | 'splice' | 'coupler' | 'splitter' | 'cable' | 'generic';
+    medium?: 'ethernet' | 'fiber' | 'power' | 'tube' | 'generic';
+    type?: PortType;
+    cableType?: PortCableType;
+    connector?: string;
+    compatibility?: string[];
+    layout?: PortPosition;
+}
+/**
+ * Render-focused node data for the document model.
+ * @public
+ */
+interface DiagramNodeRender {
+    status?: DeviceStatus | string;
+    view?: DeviceView;
+    face?: DeviceView;
+    width?: Width | number;
+    widthPx?: number;
+    height?: number;
+    header?: string;
+    color?: string;
+    colorMode?: 'light' | 'dark' | 'system';
+    rackWidthPx?: number;
+    rackFaceGapPx?: number;
+    images?: DeviceImageOptions;
+    dimensions?: Record<string, number | undefined>;
+    showUMarkers?: boolean;
+    customHeaderText?: string;
+    powerSide?: PowerSide;
+    rotation?: number;
+}
+/**
+ * External reference attached to a document node.
+ * @public
+ */
+interface DiagramExternalRef {
+    source: 'netbox' | 'inventory' | string;
+    id: string | number;
+    type?: string;
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Document node.
+ * @public
+ */
+interface DiagramNode {
+    id: string;
+    kind: DiagramNodeKind;
+    subtype?: string;
+    label: string;
+    placement: DiagramNodePlacement;
+    endpoints?: DiagramEndpoint[];
+    render?: DiagramNodeRender;
+    config?: Record<string, unknown>;
+    externalRefs?: DiagramExternalRef[];
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Endpoint reference used by document edges.
+ * @public
+ */
+interface DiagramEdgeEndpoint {
+    nodeId: string;
+    endpointId?: string | null;
+}
+/**
+ * Document edge.
+ * @public
+ */
+interface DiagramEdge {
+    id: string;
+    source: DiagramEdgeEndpoint;
+    target: DiagramEdgeEndpoint;
+    type?: NetworkEdgeType;
+    hidden?: boolean;
+    data?: NetworkEdgeData;
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Non-topology UI state stored alongside a document.
+ * @public
+ */
+interface DiagramUiState {
+    nodeState?: Record<string, {
+        view?: DeviceView;
+        face?: DeviceView;
+        handleSideMap?: Record<string, DeviceView>;
+    }>;
+    metadata?: Record<string, unknown>;
+}
 /**
  * Rack device types
  * @public
@@ -726,12 +905,14 @@ 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[];
     /** Current status of the device */
     status?: DeviceStatus | string;
-    /** Front port configurations */
-    ports?: PortBlock[];
-    /** Rear port configurations */
-    rearPorts?: PortBlock[];
+    /** Advanced grouped front port input */
+    portGroups?: PortBlock[];
+    /** Advanced grouped rear port input */
+    rearPortGroups?: PortBlock[];
     /** Power port side for rear view */
     powerSide?: PowerSide;
     /** Connected device IDs */
@@ -938,6 +1119,12 @@ interface NetworkDiagramStoreApi {
  * @public
  */
 interface NetworkDiagramProps {
+    /** Controlled document model. When provided, it takes precedence over nodes/edges props. */
+    document?: DiagramDocument;
+    /** Initial document for uncontrolled document mode. */
+    initialDocument?: DiagramDocument;
+    /** Callback when the document changes in document mode. */
+    onDocumentChange?: (document: DiagramDocument) => void;
     /** Controlled nodes array */
     nodes?: NetworkNode[];
     /** Controlled edges array */
@@ -1016,30 +1203,6 @@ interface NetworkDiagramProps {
     fitViewOptions?: FitViewOptions;
 }
 
-/**
- * Main component for rendering interactive network diagrams.
- *
- * The NetworkDiagram component provides a complete solution for visualizing
- * network infrastructure including racks, devices, fiber connections, and power distribution.
- *
- * @example
- * ```tsx
- * import { NetworkDiagram, NetworkNode, NetworkEdge } from '@mp70/react-networks';
- *
- * const nodes: NetworkNode[] = [
- *   {
- *     id: 'rack-1',
- *     type: 'rack',
- *     position: { x: 100, y: 100 },
- *     data: { label: 'Main Rack', uHeight: 42 }
- *   }
- * ];
- *
- * <NetworkDiagram nodes={nodes} edges={[]} />
- * ```
- *
- * @public
- */
 declare const NetworkDiagram: React$1.FC<NetworkDiagramProps>;
 
 interface DiagramErrorBoundaryProps {
@@ -1159,12 +1322,9 @@ declare const PowerEdge: React$1.FC<EdgeProps>;
  *     label: 'Web Server',
  *     deviceType: 'server',
  *     uPosition: 1,
- *     ports: [{
- *       name: 'Network Ports',
- *       ports: [
- *         { label: 'eth0', connected: true, type: 'ethernet' }
- *       ]
- *     }]
+ *     ports: [
+ *       { id: 'eth0', label: 'eth0', group: 'Network Ports', connected: true, type: 'ethernet' }
+ *     ]
  *   }
  * }
  * ```
@@ -1928,6 +2088,43 @@ declare function addSpliceToTray(trays: SpliceTrayConfig[], trayId: string, spli
  */
 declare function removeSpliceFromTray(trays: SpliceTrayConfig[], trayId: string, spliceId: string): SpliceTrayConfig[];
 
+type PortFaces = {
+    ports: PortBlock[];
+    rearPorts: PortBlock[];
+};
+type PortFaceData = Pick<NetworkNode['data'], 'ports' | 'portGroups' | 'rearPortGroups'>;
+declare function buildPortBlocksFromPorts(devicePorts: DevicePort[]): PortFaces;
+declare function getResolvedPortBlocks(data: PortFaceData | undefined): PortFaces;
+declare function getFrontPortBlocks(data: PortFaceData | undefined): PortBlock[];
+declare function getRearPortBlocks(data: PortFaceData | undefined): PortBlock[];
+declare function hasFrontPorts(data: PortFaceData | undefined): boolean;
+declare function hasRearPorts(data: PortFaceData | undefined): boolean;
+declare function getDefaultDeviceView(data: PortFaceData | undefined): DeviceView;
+
+interface NetworkGraphSnapshot {
+    nodes: NetworkNode[];
+    edges: NetworkEdge[];
+}
+declare function networkGraphToDiagramDocument(snapshot: NetworkGraphSnapshot, previousDocument?: DiagramDocument): DiagramDocument;
+declare function diagramDocumentToNetworkGraph(document: DiagramDocument): NetworkGraphSnapshot;
+
+type EndpointConnectionKind = 'power' | 'network' | 'unknown';
+interface EndpointMetadata {
+    normalizedHandle: string;
+    face?: DeviceView;
+    kind: EndpointConnectionKind;
+    compatibility: string[];
+}
+declare function resolveEndpointCompatibilityKeys(input: {
+    compatibility?: string[];
+    kind?: EndpointConnectionKind;
+    type?: string;
+    cableType?: string;
+    connectorType?: string;
+    handleId?: string;
+}): string[];
+declare function getEndpointMetadata(node?: NetworkNode, handle?: string | null): EndpointMetadata;
+
 /**
  * Power connector utilities for consistent styling across devices and PDUs
  */
@@ -2259,6 +2456,10 @@ interface TemplateParseResult {
  *
  * **Port position semantics**: Positions use `xPercent` / `yPercent` (0-100)
  * to express where the port CENTER should be relative to the device face.
+ * Raw imports may also use semantic edge strings like `top-left` or
+ * `right-middle`; those are normalized into side/offset placements during
+ * import. `xPercent` / `yPercent` remain the manual override path for
+ * detailed templates.
  * The renderer (`DeviceNode`) converts these to pixel coordinates and clamps
  * them so the port stays fully inside the device bounds.  Clamp bounds are
  * computed from the **actual** rendered port dimensions (which vary by port
@@ -2280,7 +2481,7 @@ interface RawTemplatePort {
     type?: string;
     connectorType?: string;
     connector_type?: string;
-    position?: {
+    position?: string | {
         side?: string;
         offsetPercent?: number;
         offset_percent?: number;
@@ -2399,4 +2600,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 DeviceImageFit, type DeviceImageOptions, type DeviceImageRepeat, DeviceNode, DevicePlacementError, type DevicePlacementValidation, type DeviceTemplateV2, DiagramErrorBoundary, type DiagramErrorBoundaryProps, FIBER_COLORS_12, type FiberCable, type FiberColorId, FiberEdge, FiberNode, FibreCableWithTubesExpanded, type FibreFlowCable, type FibreFlowCableKind, type FibreFlowCableNodeData, type FibreFlowCircuit, type FibreFlowClosure, type FibreFlowClosureNodeData, type FibreFlowEndpoint, FibreFlowMap, type FibreFlowMapProps, type FibreFlowSplice, FibreSplitNode, HANDLE_EXTENSION_PX, type MountClass, MultiTubeCableNode, NetworkDiagram, type NetworkDiagramFitViewOptions, type NetworkDiagramFlowMethods, type NetworkDiagramFlowObject, type NetworkDiagramOptions, type NetworkDiagramProps, type NetworkDiagramStoreApi, type NetworkDiagramToImageOptions, type NetworkEdge, type NetworkEdgeData, type NetworkNode, type NetworkNodeData, type NetworkNodeDataBase, type NetworkNodeDataByType, 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 PortType, PowerEdge, RACK_HEADER_HEIGHT, RACK_WIDTH_PX, type RackConfig, type RackDevice, type RackLayoutMode, type RackMountMode, RackNode, 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, U_HEIGHT_PX, type ValidateConnectionParams, type ValidationResult, VerticalPDU, Width, addDeviceToRack, addSpliceToTray, baseColorFor, buildNodesFromRackConfig, buildNodesFromSpliceConfig, calculateClosureDimensions, calculateCouplerRightX, calculateCouplerSlotSpacing, calculateCouplerSpacing, calculateDevicePositionFromU, calculatePanelDimensions, calculateSlotPositionFromY, calculateSplicePositionFromNumber, calculateUPositions, calculateYFromSlotPosition, countTemplateFacePorts, createNetworkDiagramStore, createRackConfigFromNodes, createSpliceConfigFromNodes, fiberSolidOrStriped, findNearestRack, findNextAvailableHolderPosition, findNextAvailableUPosition, generateLayout, getConnectorConfig, getCouplerDimensions, getDeviceConnectorType, getFiberColor, getInnerContentWidth, getPDUPortType, getPanelHeight, getPanelWidth, getPowerPortStyle, getRackBounds, getStatusColor, getTrayDimensions, getTubeDimensions, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToNetworkDiagram, isHighPowerConnector, isPointInRack, isStriped, isUPositionAvailable, netboxCableToNetworkEdge, netboxDeviceToNetworkNode, netboxRackToNetworkNode, netboxToNetworkDiagram, parseNetboxTemplate, removeDeviceFromRack, removeSpliceFromTray, replaceEdge, snapToCouplerPosition, snapToSplicePosition, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, updateSpliceHolderPosition, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements, validateRenderFidelity, validateSplicePlacements };
+export { COUPLERS_PER_PANEL, COUPLER_SLOT_HEIGHT_PX, COUPLER_WIDTH_PX, CableNode, ClosureNode, CouplerNode, type DeviceImageFit, type DeviceImageOptions, type DeviceImageRepeat, DeviceNode, DevicePlacementError, type DevicePlacementValidation, type DevicePort, type DeviceStatus, type DeviceTemplateV2, type DeviceView, type DiagramDocument, type DiagramEdge, type DiagramEdgeEndpoint, type DiagramEndpoint, DiagramErrorBoundary, type DiagramErrorBoundaryProps, type DiagramExternalRef, type DiagramNode, type DiagramNodeKind, type DiagramNodePlacement, type DiagramNodeRender, type DiagramUiState, FIBER_COLORS_12, type FiberCable, type FiberCableType, type FiberColorId, FiberEdge, FiberNode, FibreCableWithTubesExpanded, type FibreFlowCable, type FibreFlowCableKind, type FibreFlowCableNodeData, type FibreFlowCircuit, type FibreFlowClosure, type FibreFlowClosureNodeData, type FibreFlowEndpoint, FibreFlowMap, type FibreFlowMapProps, type FibreFlowSplice, FibreSplitNode, HANDLE_EXTENSION_PX, type MountClass, MultiTubeCableNode, NetworkDiagram, type NetworkDiagramFitViewOptions, type NetworkDiagramFlowMethods, type NetworkDiagramFlowObject, type NetworkDiagramOptions, type NetworkDiagramProps, type NetworkDiagramStoreApi, type NetworkDiagramToImageOptions, type NetworkEdge, type NetworkEdgeData, type NetworkGraphSnapshot, type NetworkNode, type NetworkNodeData, type NetworkNodeDataBase, type NetworkNodeDataByType, 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, PowerEdge, type PowerSide, RACK_HEADER_HEIGHT, RACK_WIDTH_PX, type RackConfig, type RackDevice, type RackDeviceType, type RackLayoutMode, type RackMountMode, RackNode, 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, getDefaultDeviceView, getDeviceConnectorType, getEndpointMetadata, getFiberColor, getFrontPortBlocks, getInnerContentWidth, getPDUPortType, getPanelHeight, getPanelWidth, getPowerPortStyle, getRackBounds, getRearPortBlocks, getResolvedPortBlocks, getStatusColor, getTrayDimensions, getTubeDimensions, hasFrontPorts, hasRearPorts, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToNetworkDiagram, isHighPowerConnector, isPointInRack, isStriped, isUPositionAvailable, netboxCableToNetworkEdge, netboxDeviceToNetworkNode, netboxRackToNetworkNode, netboxToNetworkDiagram, networkGraphToDiagramDocument, parseNetboxTemplate, removeDeviceFromRack, removeSpliceFromTray, replaceEdge, resolveEndpointCompatibilityKeys, snapToCouplerPosition, snapToSplicePosition, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, updateSpliceHolderPosition, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements, validateRenderFidelity, validateSplicePlacements };