@mp70/react-networks 0.1.8-alpha → 0.1.9-beta

package/README.md

@@ -6,20 +6,20 @@
 
 A production-ready React library for creating interactive network diagrams with support for rack management, fiber networks, and power distribution. Built on React Flow with TypeScript support.
 
-## ✨ Features
+## Features
 
-- **🏗️ Rack Management**: Full support for 19" rack units with exact U positioning
-- **🔌 Device Placement**: Drag and drop devices with automatic U position snapping
-- **🌐 Fiber Networks**: Visual representation of fiber connections and patch panels
-- **⚡ Power Distribution**: Vertical PDU support with power connections
-- **👁️ View Switching**: Front/rear view switching for devices and racks
-- **📐 Rack Alignment**: Align rack bottoms to the same horizontal plane
-- **🔗 Inventory Integration**: Built-in helpers to import/export generic inventory/CMDB data
-- **🎨 Customizable**: Extensive styling and theming options
-- **📱 Responsive**: Works on desktop and mobile devices
-- **🔧 TypeScript**: Full TypeScript support with comprehensive type definitions
+- **Rack Management**: Full support for 19" rack units with exact U positioning
+- **Device Placement**: Drag and drop devices with automatic U position snapping
+- **Fiber Networks**: Visual representation of fiber connections and patch panels
+- **Power Distribution**: Vertical PDU support with power connections
+- **View Switching**: Front/rear view switching for devices and racks
+- **Rack Alignment**: Align rack bottoms to the same horizontal plane
+- **Inventory Integration**: Built-in helpers to import/export generic inventory/CMDB data
+- **Customizable**: Extensive styling and theming options
+- **Responsive**: Works on desktop and mobile devices
+- **TypeScript**: Full TypeScript support with comprehensive type definitions
 
-## 🚀 Quick Start
+## Quick Start
 
 ### Installation
 
@@ -85,7 +85,14 @@ function App() {
 export default App;
 ```
 
-## 📚 Documentation
+## Documentation
+
+### Documentation Resources
+
+- 📖 [Main Project README](../../README.md) - Project overview and quick start
+- 📚 [API Documentation](docs/API.md) - Complete API reference
+- 🌐 [Documentation Site](../docs/) - Interactive documentation with live examples
+- 📝 [Contributing Guide](CONTRIBUTING.md) - Development guidelines
 
 ### API Reference
 
@@ -96,13 +103,38 @@ export default App;
 - [`DeviceNode`](#devicenode) - Device visualization component
 - [`FiberNode`](#fibernode) - Fiber connection component
 - [`VerticalPDU`](#verticalpdu) - Power distribution component
+- [`PatchPanelNode`](#patchpanelnode) - Patch panel component
+- [`SpliceTrayNode`](#splicetraynode) - Splice tray component
+- [`CouplerNode`](#couplernode) - Coupler component
 
 #### Utilities
 
+**Rack Management:**
 - [`buildNodesFromRackConfig`](#buildnodesfromrackconfig) - Convert rack config to nodes
-- [`netboxToNetworkDiagram`](#netboxtonetworkdiagram) - Convert NetBox data to diagram
+- [`createRackConfigFromNodes`](#createrackconfigfromnodes) - Convert nodes to rack config
 - [`snapToUPosition`](#snaptouposition) - Snap devices to U positions
 - [`validateRackDevicePlacements`](#validaterackdeviceplacements) - Validate device placements
+- [`addDeviceToRack`](#adddevicetorack) - Add device to rack schema
+- [`removeDeviceFromRack`](#removedevicefromrack) - Remove device from rack schema
+- [`updateDeviceUPosition`](#updatedeviceuposition) - Update device U position
+
+**Splice Management:**
+- [`buildNodesFromSpliceConfig`](#buildnodesfromspliceconfig) - Convert splice tray config to nodes
+- [`createSpliceConfigFromNodes`](#createspliceconfigfromnodes) - Convert nodes to splice config
+- [`snapToSplicePosition`](#snaptospliceposition) - Snap splices to holder positions
+- [`validateSplicePlacements`](#validatespliceplacements) - Validate splice placements
+- [`addSpliceToTray`](#addsplicetotray) - Add splice to tray schema
+- [`removeSpliceFromTray`](#removesplicefromtray) - Remove splice from tray schema
+
+**Data Integration:**
+- [`netboxToNetworkDiagram`](#netboxtonetworkdiagram) - Convert NetBox data to diagram
+- [`inventoryToNetworkDiagram`](#inventorytonetworkdiagram) - Convert inventory/CMDB data to diagram
+
+**Dimension Calculations:**
+- [`calculatePanelDimensions`](#calculatepaneldimensions) - Calculate panel dimensions from children
+- [`calculateClosureDimensions`](#calculateclosuredimensions) - Calculate closure dimensions from children
+- [`getCouplerDimensions`](#getcouplerdimensions) - Get coupler dimensions
+- [`getTubeDimensions`](#gettubedimensions) - Get tube dimensions
 
 ### NetworkDiagram Props
 
@@ -139,7 +171,7 @@ type NetworkNodeType =
 type NetworkEdgeType = 'fiber' | 'ethernet' | 'power';
 ```
 
-## 🏗️ Advanced Usage
+## Advanced Usage
 
 ### Rack Configuration
 
@@ -218,7 +250,7 @@ import '@mp70/react-networks/index.css';
 }
 ```
 
-## 🎨 Theming
+## Theming
 
 The library supports extensive theming through CSS variables:
 
@@ -249,7 +281,7 @@ The library supports extensive theming through CSS variables:
 }
 ```
 
-## 🔧 Development
+## Development
 
 ### Prerequisites
 
@@ -288,7 +320,7 @@ npm test
 npm run lint
 ```
 
-## 📦 Distribution
+## Distribution
 
 The library is distributed as:
 
@@ -297,7 +329,7 @@ The library is distributed as:
 - **TypeScript**: `dist/index.d.ts`
 - **CSS**: `dist/index.css`
 
-## 🤝 Contributing
+## Contributing
 
 We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
 
@@ -310,7 +342,7 @@ We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) f
 5. Run the test suite
 6. Submit a pull request
 
-## 📄 License
+## License
 
 Dual-licensed under:
 
@@ -319,15 +351,16 @@ Dual-licensed under:
 
 See [LICENSE](../../LICENSE) for details. By installing, you agree to use under either license. Contact us for commercial use.
 
-## 🆘 Support
+## Support
 
-- 📖 [Documentation](../../README.md)
+- 📖 [Main Documentation](../../README.md)
 - 📚 [API Documentation](docs/API.md)
+- 🌐 [Documentation Site](../docs/) - Interactive docs with examples
 - 🐛 [Issue Tracker](https://github.com/MP70/react-networks/issues)
 - 💬 [Discussions](https://github.com/MP70/react-networks/discussions)
 - 📧 [Email Support](mailto:info@serversearcher.com)
 
-## 🙏 Acknowledgments
+## Acknowledgments
 
 - [React Flow](https://reactflow.dev) for the excellent diagram foundation
 - Network inventory/CMDB projects for inspiration
@@ -335,4 +368,4 @@ See [LICENSE](../../LICENSE) for details. By installing, you agree to use under
 
 ---
 
-Made with ❤️ by [Matt Pickering](https://github.com/MP70)
+Made with love by [Matt Pickering](https://github.com/MP70)

package/dist/index.css

@@ -99,6 +99,16 @@
   background-color: #e9ecef;
 }
 
+/* Mobile-friendly control buttons - larger touch targets */
+@media (max-width: 768px) {
+  .react-flow__controls-button {
+    width: 44px !important;
+    height: 44px !important;
+    min-width: 44px !important;
+    min-height: 44px !important;
+  }
+}
+
 /* Override React Flow default handle styles for tube fiber handles */
 /* Use CSS variables set by inline styles to override React Flow defaults */
 .react-flow__handle.tube-fiber-handle {
@@ -106,27 +116,50 @@
   transform: none !important;
   background-clip: padding-box !important;
   opacity: 1 !important;
-  /* Remove React Flow's default background completely */
+  /* Ensure no default React Flow styles interfere */
+  box-shadow: none !important;
+  /* Don't set background here - let inline styles or specific rules handle it */
+}
+
+/* Tube fiber handles - use fiber color */
+.react-flow__handle.tube-fiber-handle {
   background: var(--fiber-bg-image, var(--fiber-bg)) !important;
   background-color: var(--fiber-bg) !important;
-  /* Ensure no default React Flow styles interfere */
+}
+
+/* Fibre flow map handles */
+.react-flow__handle.fibre-flow-handle {
+  border: none !important;
+  transform: none !important;
+  background-clip: padding-box !important;
+  opacity: 1 !important;
   box-shadow: none !important;
 }
 
+.react-flow__handle.fibre-flow-handle {
+  background: var(--fiber-bg-image, var(--fiber-bg)) !important;
+  background-color: var(--fiber-bg) !important;
+  background-image: var(--fiber-bg-image, none) !important;
+}
+
+
 .react-flow__handle-right.tube-fiber-handle {
   right: auto !important;
 }
 
 /* More specific selector to ensure override - target all possible React Flow handle states */
-.react-flow__node .react-flow__handle.tube-fiber-handle,
-.react-flow__node .react-flow__handle.tube-fiber-handle[data-handlepos],
-.react-flow__handle.tube-fiber-handle[data-handlepos],
-.react-flow__handle.tube-fiber-handle[data-fiber-idx] {
+/* Only apply to non-ribbon handles */
+.react-flow__node .react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle),
+.react-flow__node .react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle)[data-handlepos],
+.react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle)[data-handlepos],
+.react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle)[data-fiber-idx] {
   background: var(--fiber-bg-image, var(--fiber-bg)) !important;
   background-color: var(--fiber-bg) !important;
   background-image: var(--fiber-bg-image, none) !important;
 }
 
+/* Ribbon bundle handles - simple solid color (removed gradient complexity) */
+
 /* Connection animation - pulse effect when edge is first created */
 @keyframes edgeConnectPulse {
   0% {
@@ -148,6 +181,35 @@
   animation: edgeConnectPulse 1s ease-out;
 }
 
+/* Highlighted edge pulse + dash motion (trace paths) */
+@keyframes rnEdgeHighlightPulse {
+  0%,
+  100% {
+    opacity: 0.85;
+    stroke-width: var(--rn-edge-highlight-from, 2px);
+  }
+  50% {
+    opacity: 1;
+    stroke-width: var(--rn-edge-highlight-to, 6px);
+  }
+}
+
+@keyframes rnEdgeHighlightDash {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: -48;
+  }
+}
+
+.rn-edge-highlight {
+  animation: rnEdgeHighlightPulse 2.4s ease-in-out infinite,
+    rnEdgeHighlightDash 1.8s linear infinite;
+  opacity: 0.9;
+  stroke-linecap: round;
+}
+
 /* Splice glow animation - fade in when both handles are connected */
 @keyframes spliceGlowFadeIn {
   0% {
@@ -218,6 +280,7 @@
 }
 
 .splice-node {
+  background: transparent !important;
   border: none !important;
   outline: none !important;
 }
@@ -239,7 +302,7 @@
   font-size: 7px;
   color: #9ca3af;
   text-decoration: none;
-  font-family: Inter, system-ui, -apple-system, sans-serif;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   transition: color 0.2s ease;
   padding: 1px 4px;
   border-radius: 2px;
@@ -312,3 +375,78 @@
   border-color: #d1d5db;
 }
 
+/* Triangle node styles */
+.react-flow__node[data-type="fibre-split"],
+.react-flow__node.react-flow__node-fibre-split {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+}
+
+.react-flow__node[data-type="fibre-split"] > div,
+.react-flow__node.react-flow__node-fibre-split > div {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+  overflow: visible !important;
+}
+
+.react-flow__node[data-type="fibre-split"] svg,
+.react-flow__node.react-flow__node-fibre-split svg {
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.triangle-node {
+  position: relative !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  box-shadow: none !important;
+  overflow: visible !important;
+  box-sizing: border-box !important;
+}
+
+
+.triangle-node-text {
+  text-align: center;
+  position: relative;
+  z-index: 2;
+  width: 46px;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  color: #000000;
+  font-weight: bold;
+  font-size: 12px;
+}
+
+/* Cable node rotation */
+.cable-node-rotated {
+  transform-origin: center center !important;
+}
+
+/* Ensure Fibre Flow edges render with full saturation and aren't affected by node overlays */
+.react-flow__edge[data-type="fibre-flow"] path,
+.react-flow__edge[data-type="fibre-flow"] .react-flow__edge-path {
+  opacity: 1 !important;
+  stroke-opacity: 1 !important;
+  mix-blend-mode: normal !important;
+  filter: none !important;
+}
+
+.react-flow__edge[data-type="fibre-flow-link"] path,
+.react-flow__edge[data-type="fibre-flow-link"] .react-flow__edge-path {
+  opacity: 1 !important;
+  stroke-opacity: 1 !important;
+  mix-blend-mode: normal !important;
+  filter: none !important;
+}

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styles/index.css"],"sourcesContent":["/* Library styles for @react-networks/network-diagrams */\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/* 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  /* Remove React Flow's default background completely */\n  background: var(--fiber-bg-image, var(--fiber-bg)) !important;\n  background-color: var(--fiber-bg) !important;\n  /* Ensure no default React Flow styles interfere */\n  box-shadow: none !important;\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.react-flow__node .react-flow__handle.tube-fiber-handle,\n.react-flow__node .react-flow__handle.tube-fiber-handle[data-handlepos],\n.react-flow__handle.tube-fiber-handle[data-handlepos],\n.react-flow__handle.tube-fiber-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/* 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/* 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  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: Inter, system-ui, -apple-system, sans-serif;\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/* 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"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/styles/index.css"],"sourcesContent":["/* Library styles for @react-networks/network-diagrams */\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/* 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":[]}