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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # react-networks
2
2
 
3
- [![npm version](https://img.shields.io/npm/v/@mp70/react-networks.svg)](https://www.npmjs.com/package/@mp70/react-networks)
4
- [![license](https://img.shields.io/npm/l/@mp70/react-networks.svg)](https://www.npmjs.com/package/@mp70/react-networks)
3
+ [![npm version](https://img.shields.io/npm/v/react-networks.svg)](https://www.npmjs.com/package/react-networks)
4
+ [![license](https://img.shields.io/npm/l/react-networks.svg)](https://www.npmjs.com/package/react-networks)
5
5
  [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
6
6
 
7
7
  A React library for creating interactive network diagrams with support for rack management, fiber networks, and power distribution. Built on React Flow with TypeScript support.
@@ -25,19 +25,19 @@ A React library for creating interactive network diagrams with support for rack
25
25
  ### Installation
26
26
 
27
27
  ```bash
28
- npm install @mp70/react-networks react react-dom reactflow
28
+ npm install react-networks react react-dom reactflow
29
29
  # or
30
- yarn add @mp70/react-networks react react-dom reactflow
30
+ yarn add react-networks react react-dom reactflow
31
31
  # or
32
- pnpm add @mp70/react-networks react react-dom reactflow
32
+ pnpm add react-networks react react-dom reactflow
33
33
  ```
34
34
 
35
35
  ### Basic Usage
36
36
 
37
37
  ```tsx
38
38
  import React from 'react';
39
- import { NetworkDiagram, NetworkNode, NetworkEdge } from '@mp70/react-networks';
40
- import '@mp70/react-networks/index.css';
39
+ import { NetworkDiagram, NetworkNode, NetworkEdge } from 'react-networks';
40
+ import 'react-networks/index.css';
41
41
 
42
42
  const nodes: NetworkNode[] = [
43
43
  {
@@ -87,7 +87,7 @@ export default App;
87
87
 
88
88
  ### Data Model
89
89
 
90
- `@mp70/react-networks` supports two control layers:
90
+ `react-networks` supports two control layers:
91
91
 
92
92
  - `document` / `initialDocument` / `onDocumentChange` use `DiagramDocument`, the canonical persisted/editor schema. Prefer this for saved diagrams, import/export, and external integrations.
93
93
  - `nodes` / `edges` remain the lower-level React Flow-shaped control surface when you want direct control of rendered nodes and edges.
@@ -199,6 +199,8 @@ For new code, prefer the document-model props. The graph props and React Flow es
199
199
  | `onEdgeUpdate` | `(oldEdge: ReactFlowEdge, newConnection: Connection) => void` | - | Edge update (reconnect) override |
200
200
  | `isValidConnection` | `(connection: Connection) => boolean` | - | Connection validation override |
201
201
  | `connectionMode` | `ConnectionMode` | - | React Flow connection mode |
202
+ | `connectionRadius` | `number` | React Flow default | Pointer snap distance (px) for handles. Raise to make small ports easier to target; lower to avoid mis-targeting on dense devices |
203
+ | `onConnectRejected` | `(payload: NetworkConnectionRejection) => void` | - | Fired when a connect/reconnect attempt is rejected, so you can surface feedback instead of failing silently |
202
204
  | `reAssignable` | `boolean` | `true` | Allow devices to move between racks / ungroup on drag |
203
205
  | `colorMode` | `'light' \| 'dark' \| 'system'` | - | Diagram color mode |
204
206
  | `onInit` | `(instance: ReactFlowInstance) => void` | - | Called when React Flow is ready |
@@ -208,6 +210,54 @@ For new code, prefer the document-model props. The graph props and React Flow es
208
210
  | `useSmoothstepEdgesForTubes` | `boolean` | `false` | Use smoothstep edges for tube connections |
209
211
  | `debug` | `boolean` | `false` | Enable debug mode |
210
212
  | `fitViewOptions` | `FitViewOptions` | - | React Flow fitView options |
213
+ | `highlightedNodeIds` | `string[]` | - | Node IDs kept at full opacity when focus dimming is active |
214
+ | `highlightedEdgeIds` | `string[]` | - | Edge IDs kept at full opacity when focus dimming is active |
215
+ | `dimUnhighlighted` | `boolean` | `false` | Dim nodes/edges not in the focus ID lists |
216
+ | `dimOpacity` | `number` | `0.25` | Opacity applied to dimmed elements (0-1) |
217
+
218
+ ### Edge highlighting
219
+
220
+ Per-edge emphasis uses `NetworkEdge.data`:
221
+
222
+ ```tsx
223
+ {
224
+ id: 'edge-1',
225
+ source: 'switch-1',
226
+ target: 'server-1',
227
+ type: 'fiber',
228
+ data: {
229
+ highlight: true,
230
+ highlightColor: '#dc2626',
231
+ highlightWidth: 5,
232
+ label: 'Cable A',
233
+ },
234
+ }
235
+ ```
236
+
237
+ Diagram-level focus (trace, DRC row click):
238
+
239
+ ```tsx
240
+ <NetworkDiagram
241
+ nodes={nodes}
242
+ edges={edges}
243
+ highlightedEdgeIds={focusedEdgeIds}
244
+ highlightedNodeIds={focusedNodeIds}
245
+ dimUnhighlighted
246
+ />
247
+ ```
248
+
249
+ The library does not define severity enums. Apps pick `highlightColor` hex values. Common conventions:
250
+
251
+ | Meaning | Suggested `highlightColor` |
252
+ |---|---|
253
+ | Error | `#dc2626` |
254
+ | Warning | `#d97706` |
255
+ | Complete | `#16a34a` |
256
+ | Installer power step | `#f97316` |
257
+ | Installer network step | `#ef4444` |
258
+
259
+ Pass `showDeviceImages={false}` on `NetworkDiagram` to hide rack photos; status border colors from
260
+ `getStatusColor(status)` still apply. Use `onPortClick` and `highlightedPortHandles` for port trace UX.
211
261
 
212
262
  ### NetworkNode Types
213
263
 
@@ -244,7 +294,7 @@ type NetworkEdgeType = 'fiber' | 'ethernet' | 'power' | 'smoothstep' | 'step' |
244
294
  ### Rack Configuration
245
295
 
246
296
  ```tsx
247
- import { RackConfig, buildNodesFromRackConfig, Width } from '@mp70/react-networks';
297
+ import { RackConfig, buildNodesFromRackConfig, Width } from 'react-networks';
248
298
 
249
299
  const rackSchema: RackConfig[] = [
250
300
  {
@@ -291,7 +341,7 @@ Device images (e.g. server front/rear photos or SVGs) use `frontImageUrl` and `r
291
341
  ### Inventory Integration
292
342
 
293
343
  ```tsx
294
- import { inventoryToNetworkDiagram } from '@mp70/react-networks';
344
+ import { inventoryToNetworkDiagram } from 'react-networks';
295
345
 
296
346
  const inventoryData = {
297
347
  racks: [...],
@@ -305,7 +355,7 @@ const { nodes, edges } = inventoryToNetworkDiagram(inventoryData);
305
355
  ### Custom Styling
306
356
 
307
357
  ```tsx
308
- import '@mp70/react-networks/index.css';
358
+ import 'react-networks/index.css';
309
359
 
310
360
  // Override CSS variables
311
361
  .network-diagram {
package/dist/index.css CHANGED
@@ -158,6 +158,15 @@
158
158
  pointer-events: auto;
159
159
  }
160
160
 
161
+ .react-flow__handle.rn-port-handle--clickable {
162
+ cursor: pointer;
163
+ }
164
+
165
+ .react-flow__handle.rn-port-handle--highlighted {
166
+ box-shadow: 0 0 0 2px #f59e0b, 0 0 8px rgba(245, 158, 11, 0.75);
167
+ z-index: 12;
168
+ }
169
+
161
170
 
162
171
  .react-flow__handle-right.tube-fiber-handle {
163
172
  right: auto !important;
@@ -374,7 +383,8 @@
374
383
 
375
384
  /* Device node styles */
376
385
  .device-node {
377
- background-color: #1f2937;
386
+ background-color: var(--rn-device-bg-color, #1f2937);
387
+ color: var(--rn-device-text-color, white);
378
388
  background-image: var(--rn-device-bg-image, none);
379
389
  background-position: var(--rn-device-bg-position, center);
380
390
  background-repeat: var(--rn-device-bg-repeat, no-repeat);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/styles/index.css"],"sourcesContent":["/* Library styles for react-networks */\n\n/* Edge zIndex styles for dynamic prominence */\n.edge-prominent {\n z-index: 1000 !important;\n opacity: 1 !important;\n}\n\n.edge-dimmed {\n z-index: 500 !important;\n opacity: 0.3 !important;\n}\n\n/* Dynamic zIndex classes */\n.edge-z-1000 {\n z-index: 1000 !important;\n}\n\n.edge-z-500 {\n z-index: 500 !important;\n}\n\n/* React Flow theming */\n.react-flow-dark {\n --react-flow-background: #1a1a1a;\n --react-flow-text: #ffffff;\n --react-flow-border: #404040;\n --react-flow-controls-bg: #2d2d2d;\n --react-flow-controls-border: #404040;\n --react-flow-minimap-bg: #2d2d2d;\n --react-flow-minimap-border: #404040;\n}\n\n.react-flow-light {\n --react-flow-background: #f5f5f5;\n --react-flow-text: #1a1a1a;\n --react-flow-border: #e9ecef;\n --react-flow-controls-bg: #f8f9fa;\n --react-flow-controls-border: #e9ecef;\n --react-flow-minimap-bg: #f8f9fa;\n --react-flow-minimap-border: #e9ecef;\n}\n\n/* Apply ReactFlow theming */\n.react-flow-dark .react-flow__background {\n background-color: var(--react-flow-background);\n}\n\n.react-flow-light .react-flow__background {\n background-color: var(--react-flow-background);\n}\n\n/* Ensure canvas background is always off-white in light mode */\n.react-flow-light .react-flow__viewport {\n background-color: #f5f5f5 !important;\n}\n\n.react-flow-light .react-flow {\n background-color: #f5f5f5;\n}\n\n.react-flow-dark .react-flow__controls {\n background-color: var(--react-flow-controls-bg);\n border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-light .react-flow__controls {\n background-color: var(--react-flow-controls-bg);\n border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-dark .react-flow__minimap {\n background-color: var(--react-flow-minimap-bg);\n border-color: var(--react-flow-minimap-border);\n}\n\n.react-flow-light .react-flow__minimap {\n background-color: var(--react-flow-minimap-bg);\n border-color: var(--react-flow-minimap-border);\n}\n\n.react-flow-dark .react-flow__controls-button {\n background-color: var(--react-flow-controls-bg);\n color: var(--react-flow-text);\n border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-light .react-flow__controls-button {\n background-color: var(--react-flow-controls-bg);\n color: var(--react-flow-text);\n border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-dark .react-flow__controls-button:hover {\n background-color: #4b5563;\n}\n\n.react-flow-light .react-flow__controls-button:hover {\n background-color: #e9ecef;\n}\n\n/* Mobile-friendly control buttons - larger touch targets */\n@media (max-width: 768px) {\n .react-flow__controls-button {\n width: 44px !important;\n height: 44px !important;\n min-width: 44px !important;\n min-height: 44px !important;\n }\n}\n\n/* Override React Flow default handle styles for tube fiber handles */\n/* Use CSS variables set by inline styles to override React Flow defaults */\n.react-flow__handle.tube-fiber-handle {\n border: none !important;\n transform: none !important;\n background-clip: padding-box !important;\n opacity: 1 !important;\n /* Ensure no default React Flow styles interfere */\n box-shadow: none !important;\n /* Don't set background here - let inline styles or specific rules handle it */\n}\n\n/* Tube fiber handles - use fiber color */\n.react-flow__handle.tube-fiber-handle {\n background: var(--fiber-bg-image, var(--fiber-bg)) !important;\n background-color: var(--fiber-bg) !important;\n}\n\n/* Fibre flow map handles */\n.react-flow__handle.fibre-flow-handle {\n border: none !important;\n transform: none !important;\n background-clip: padding-box !important;\n opacity: 1 !important;\n box-shadow: none !important;\n}\n\n.react-flow__handle.fibre-flow-handle {\n background: var(--fiber-bg-image, var(--fiber-bg)) !important;\n background-color: var(--fiber-bg) !important;\n background-image: var(--fiber-bg-image, none) !important;\n}\n\n.react-flow__handle.rn-port-hitbox {\n overflow: visible;\n}\n\n.react-flow__handle.connectionindicator.rn-port-hitbox::before {\n content: '';\n position: absolute;\n top: calc(-1 * var(--rn-hit-expand-top, 0px));\n right: calc(-1 * var(--rn-hit-expand-right, 0px));\n bottom: calc(-1 * var(--rn-hit-expand-bottom, 0px));\n left: calc(-1 * var(--rn-hit-expand-left, 0px));\n border-radius: 4px;\n background: transparent;\n pointer-events: auto;\n}\n\n\n.react-flow__handle-right.tube-fiber-handle {\n right: auto !important;\n}\n\n/* More specific selector to ensure override - target all possible React Flow handle states */\n/* Only apply to non-ribbon handles */\n.react-flow__node .react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle),\n.react-flow__node .react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle)[data-handlepos],\n.react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle)[data-handlepos],\n.react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle)[data-fiber-idx] {\n background: var(--fiber-bg-image, var(--fiber-bg)) !important;\n background-color: var(--fiber-bg) !important;\n background-image: var(--fiber-bg-image, none) !important;\n}\n\n/* Ribbon bundle handles - simple solid color (removed gradient complexity) */\n\n/* Connection animation - pulse effect when edge is first created */\n@keyframes edgeConnectPulse {\n 0% {\n opacity: 0;\n stroke-width: 1;\n }\n 50% {\n opacity: 1;\n stroke-width: 4;\n }\n 100% {\n opacity: 1;\n stroke-width: 2;\n }\n}\n\n.react-flow__edge.edge-connecting path,\n.react-flow__edge.edge-connecting .react-flow__edge-path {\n animation: edgeConnectPulse 1s ease-out;\n}\n\n/* Highlighted edge pulse + dash motion (trace paths) */\n@keyframes rnEdgeHighlightPulse {\n 0%,\n 100% {\n opacity: 0.85;\n stroke-width: var(--rn-edge-highlight-from, 2px);\n }\n 50% {\n opacity: 1;\n stroke-width: var(--rn-edge-highlight-to, 6px);\n }\n}\n\n@keyframes rnEdgeHighlightDash {\n 0% {\n stroke-dashoffset: 0;\n }\n 100% {\n stroke-dashoffset: -48;\n }\n}\n\n.rn-edge-highlight {\n animation: rnEdgeHighlightPulse 2.4s ease-in-out infinite,\n rnEdgeHighlightDash 1.8s linear infinite;\n opacity: 0.9;\n stroke-linecap: round;\n}\n\n/* Splice glow animation - fade in when both handles are connected */\n@keyframes spliceGlowFadeIn {\n 0% {\n opacity: 0;\n transform: translateX(-50%) scaleY(0.3);\n }\n 100% {\n opacity: 1;\n transform: translateX(-50%) scaleY(1);\n }\n}\n\n.splice-glow {\n animation: spliceGlowFadeIn 0.5s ease-out;\n transform-origin: center;\n}\n\n/* Splice text animation - fade in when both handles are connected */\n@keyframes spliceTextFadeIn {\n 0% {\n opacity: 0;\n transform: scale(0.8);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* Splice text overlay - blur and opacity for text readability */\n.splice-text-overlay {\n backdrop-filter: blur(2px);\n -webkit-backdrop-filter: blur(2px);\n}\n\n/* Dark mode overlay */\n.react-flow-dark .splice-text-overlay {\n background: rgba(0, 0, 0, 0.6);\n}\n\n/* Light mode overlay */\n.react-flow-light .splice-text-overlay {\n background: rgba(255, 255, 255, 0.7);\n}\n\n/* Splice text label - theme-aware colors */\n.splice-text-label {\n color: #fff;\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.6);\n}\n\n.splice-text-label.animate-in {\n animation: spliceTextFadeIn 0.5s ease-out;\n transform-origin: center;\n}\n\n/* Light mode text */\n.react-flow-light .splice-text-label {\n color: #1a1a1a;\n text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.7);\n}\n\n/* Remove all borders from splice nodes */\n.react-flow__node[data-type=\"splice\"],\n.react-flow__node[data-type=\"splice\"] > div {\n border: none !important;\n outline: none !important;\n}\n\n.splice-node {\n background: transparent !important;\n border: none !important;\n outline: none !important;\n}\n\n/* Only remove box-shadow when not selected */\n.react-flow__node[data-type=\"splice\"]:not(.selected) > div,\n.splice-node:not(.selected) {\n box-shadow: none !important;\n}\n\n/* React Networks Attribution */\n.react-networks-attribution {\n padding: 0;\n margin: 0;\n z-index: 1000;\n}\n\n.react-networks-attribution-link {\n font-size: 7px;\n color: #9ca3af;\n text-decoration: none;\n font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n transition: color 0.2s ease;\n padding: 1px 4px;\n border-radius: 2px;\n display: inline-block;\n background: rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(4px);\n}\n\n.react-networks-attribution-link:hover {\n color: #e5e7eb;\n background: rgba(0, 0, 0, 0.4);\n}\n\n/* Light mode attribution */\n.react-flow-light .react-networks-attribution-link {\n color: #6b7280;\n background: rgba(255, 255, 255, 0.6);\n}\n\n.react-flow-light .react-networks-attribution-link:hover {\n color: #1a1a1a;\n background: rgba(255, 255, 255, 0.8);\n}\n\n/* Coupler node styles */\n.coupler-node {\n transition: box-shadow 0.2s ease;\n}\n\n.coupler-node.selected {\n box-shadow: 0 0 0 2px #3b82f6 !important;\n}\n\n/* Patch panel node styles */\n.patch-panel-node {\n transition: box-shadow 0.2s ease, border-color 0.2s ease;\n}\n\n.patch-panel-node.selected {\n box-shadow: 0 0 0 2px #3b82f6 !important;\n border-color: #3b82f6 !important;\n}\n\n/* Closure node styles */\n.closure-node {\n transition: box-shadow 0.2s ease, border-color 0.2s ease;\n}\n\n.closure-node.selected {\n box-shadow: 0 0 0 2px #3b82f6 !important;\n border-color: #3b82f6 !important;\n}\n\n/* Device node styles */\n.device-node {\n background-color: #1f2937;\n background-image: var(--rn-device-bg-image, none);\n background-position: var(--rn-device-bg-position, center);\n background-repeat: var(--rn-device-bg-repeat, no-repeat);\n background-size: var(--rn-device-bg-size, cover);\n border: 1px solid var(--rn-device-border-color, #10b981);\n border-radius: 2px;\n box-shadow: var(--rn-device-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.1));\n box-sizing: border-box;\n color: white;\n cursor: grab;\n display: flex;\n flex-direction: column;\n font-family: monospace;\n font-size: 8px;\n height: var(--rn-device-height, 20px);\n justify-content: center;\n left: var(--rn-device-left, auto);\n margin: 0;\n padding: 0;\n position: relative;\n transform: translateY(var(--rn-device-translate-y, 0px));\n width: var(--rn-device-width, 100%);\n}\n\n.device-node__content {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n padding: 2px;\n text-align: center;\n}\n\n.device-node__image-layer {\n inset: 0;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n z-index: 0;\n}\n\n.device-node__image {\n display: block;\n height: 100%;\n pointer-events: none;\n user-select: none;\n width: 100%;\n}\n\n.device-node__content--image-badge {\n overflow: visible;\n text-align: left;\n}\n\n.device-node__label {\n font-size: 7px;\n font-weight: bold;\n line-height: 1.1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.device-node__label--badge {\n background: rgba(15, 23, 42, 0.88);\n border: 1px solid rgba(148, 163, 184, 0.45);\n border-radius: 2px;\n display: inline-flex;\n max-width: 100%;\n padding: 1px 4px;\n}\n\n.device-node__manufacturer {\n color: #9ca3af;\n font-size: 6px;\n line-height: 1;\n}\n\n.device-node__u-indicator {\n background: #374151;\n border-radius: 1px;\n bottom: 1px;\n color: #9ca3af;\n font-size: 6px;\n line-height: 1;\n padding: 1px 2px;\n position: absolute;\n right: 1px;\n}\n\n.device-node__status-indicator {\n background: var(--rn-device-status-color, #6b7280);\n border-radius: 50%;\n bottom: 1px;\n height: 4px;\n left: 1px;\n position: absolute;\n width: 4px;\n}\n\n.device-node__split-face {\n background-color: #1f2937;\n overflow: hidden;\n position: relative;\n}\n\n.device-node__split-face--front {\n border-left: 1px dashed rgba(156, 163, 175, 0.35);\n}\n\n.device-node__split-face--rear {\n border-right: 1px dashed rgba(156, 163, 175, 0.35);\n}\n\n.device-node__face-bridge {\n position: relative;\n}\n\n.device-node__face-bridge-line {\n background: linear-gradient(180deg, transparent 0%, rgba(156, 163, 175, 0.8) 20%, rgba(156, 163, 175, 0.8) 80%, transparent 100%);\n left: 50%;\n position: absolute;\n top: 1px;\n transform: translateX(-50%);\n width: 1px;\n height: calc(100% - 2px);\n}\n\n.device-node__face-bridge-label {\n background: rgba(17, 24, 39, 0.82);\n border: 1px solid rgba(156, 163, 175, 0.4);\n border-radius: 999px;\n color: #d1d5db;\n font-size: 6px;\n font-weight: 700;\n left: 50%;\n letter-spacing: 0.04em;\n max-width: 120px;\n overflow: hidden;\n padding: 1px 6px;\n position: absolute;\n text-overflow: ellipsis;\n top: 50%;\n transform: translate(-50%, -50%) rotate(-90deg);\n white-space: nowrap;\n}\n\n/* Light mode adjustments */\n.react-flow-light .coupler-node {\n background: #f9fafb;\n color: #1f2937;\n border-color: #d1d5db;\n}\n\n.react-flow-light .patch-panel-node {\n background: transparent !important;\n color: #1f2937;\n border-color: #d1d5db;\n}\n\n.react-flow-light .closure-node {\n background: transparent !important;\n color: #1f2937;\n border-color: #d1d5db;\n}\n\n/* Triangle node styles */\n.react-flow__node[data-type=\"fibre-split\"],\n.react-flow__node.react-flow__node-fibre-split {\n background: transparent !important;\n border: none !important;\n padding: 0 !important;\n}\n\n.react-flow__node[data-type=\"fibre-split\"] > div,\n.react-flow__node.react-flow__node-fibre-split > div {\n background: transparent !important;\n border: none !important;\n padding: 0 !important;\n box-shadow: none !important;\n overflow: visible !important;\n}\n\n.react-flow__node[data-type=\"fibre-split\"] svg,\n.react-flow__node.react-flow__node-fibre-split svg {\n display: block !important;\n visibility: visible !important;\n opacity: 1 !important;\n}\n\n.triangle-node {\n position: relative !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n background: transparent !important;\n border: none !important;\n padding: 0 !important;\n margin: 0 !important;\n box-shadow: none !important;\n overflow: visible !important;\n box-sizing: border-box !important;\n}\n\n\n.triangle-node-text {\n text-align: center;\n position: relative;\n z-index: 2;\n width: 46px;\n height: 46px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n color: #000000;\n font-weight: bold;\n font-size: 12px;\n}\n\n/* Cable node rotation */\n.cable-node-rotated {\n transform-origin: center center !important;\n}\n\n/* Ensure Fibre Flow edges render with full saturation and aren't affected by node overlays */\n.react-flow__edge[data-type=\"fibre-flow\"] path,\n.react-flow__edge[data-type=\"fibre-flow\"] .react-flow__edge-path {\n opacity: 1 !important;\n stroke-opacity: 1 !important;\n mix-blend-mode: normal !important;\n filter: none !important;\n}\n\n.react-flow__edge[data-type=\"fibre-flow-link\"] path,\n.react-flow__edge[data-type=\"fibre-flow-link\"] .react-flow__edge-path {\n opacity: 1 !important;\n stroke-opacity: 1 !important;\n mix-blend-mode: normal !important;\n filter: none !important;\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/styles/index.css"],"sourcesContent":["/* Library styles for react-networks */\n\n/* Edge zIndex styles for dynamic prominence */\n.edge-prominent {\n z-index: 1000 !important;\n opacity: 1 !important;\n}\n\n.edge-dimmed {\n z-index: 500 !important;\n opacity: 0.3 !important;\n}\n\n/* Dynamic zIndex classes */\n.edge-z-1000 {\n z-index: 1000 !important;\n}\n\n.edge-z-500 {\n z-index: 500 !important;\n}\n\n/* React Flow theming */\n.react-flow-dark {\n --react-flow-background: #1a1a1a;\n --react-flow-text: #ffffff;\n --react-flow-border: #404040;\n --react-flow-controls-bg: #2d2d2d;\n --react-flow-controls-border: #404040;\n --react-flow-minimap-bg: #2d2d2d;\n --react-flow-minimap-border: #404040;\n}\n\n.react-flow-light {\n --react-flow-background: #f5f5f5;\n --react-flow-text: #1a1a1a;\n --react-flow-border: #e9ecef;\n --react-flow-controls-bg: #f8f9fa;\n --react-flow-controls-border: #e9ecef;\n --react-flow-minimap-bg: #f8f9fa;\n --react-flow-minimap-border: #e9ecef;\n}\n\n/* Apply ReactFlow theming */\n.react-flow-dark .react-flow__background {\n background-color: var(--react-flow-background);\n}\n\n.react-flow-light .react-flow__background {\n background-color: var(--react-flow-background);\n}\n\n/* Ensure canvas background is always off-white in light mode */\n.react-flow-light .react-flow__viewport {\n background-color: #f5f5f5 !important;\n}\n\n.react-flow-light .react-flow {\n background-color: #f5f5f5;\n}\n\n.react-flow-dark .react-flow__controls {\n background-color: var(--react-flow-controls-bg);\n border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-light .react-flow__controls {\n background-color: var(--react-flow-controls-bg);\n border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-dark .react-flow__minimap {\n background-color: var(--react-flow-minimap-bg);\n border-color: var(--react-flow-minimap-border);\n}\n\n.react-flow-light .react-flow__minimap {\n background-color: var(--react-flow-minimap-bg);\n border-color: var(--react-flow-minimap-border);\n}\n\n.react-flow-dark .react-flow__controls-button {\n background-color: var(--react-flow-controls-bg);\n color: var(--react-flow-text);\n border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-light .react-flow__controls-button {\n background-color: var(--react-flow-controls-bg);\n color: var(--react-flow-text);\n border-color: var(--react-flow-controls-border);\n}\n\n.react-flow-dark .react-flow__controls-button:hover {\n background-color: #4b5563;\n}\n\n.react-flow-light .react-flow__controls-button:hover {\n background-color: #e9ecef;\n}\n\n/* Mobile-friendly control buttons - larger touch targets */\n@media (max-width: 768px) {\n .react-flow__controls-button {\n width: 44px !important;\n height: 44px !important;\n min-width: 44px !important;\n min-height: 44px !important;\n }\n}\n\n/* Override React Flow default handle styles for tube fiber handles */\n/* Use CSS variables set by inline styles to override React Flow defaults */\n.react-flow__handle.tube-fiber-handle {\n border: none !important;\n transform: none !important;\n background-clip: padding-box !important;\n opacity: 1 !important;\n /* Ensure no default React Flow styles interfere */\n box-shadow: none !important;\n /* Don't set background here - let inline styles or specific rules handle it */\n}\n\n/* Tube fiber handles - use fiber color */\n.react-flow__handle.tube-fiber-handle {\n background: var(--fiber-bg-image, var(--fiber-bg)) !important;\n background-color: var(--fiber-bg) !important;\n}\n\n/* Fibre flow map handles */\n.react-flow__handle.fibre-flow-handle {\n border: none !important;\n transform: none !important;\n background-clip: padding-box !important;\n opacity: 1 !important;\n box-shadow: none !important;\n}\n\n.react-flow__handle.fibre-flow-handle {\n background: var(--fiber-bg-image, var(--fiber-bg)) !important;\n background-color: var(--fiber-bg) !important;\n background-image: var(--fiber-bg-image, none) !important;\n}\n\n.react-flow__handle.rn-port-hitbox {\n overflow: visible;\n}\n\n.react-flow__handle.connectionindicator.rn-port-hitbox::before {\n content: '';\n position: absolute;\n top: calc(-1 * var(--rn-hit-expand-top, 0px));\n right: calc(-1 * var(--rn-hit-expand-right, 0px));\n bottom: calc(-1 * var(--rn-hit-expand-bottom, 0px));\n left: calc(-1 * var(--rn-hit-expand-left, 0px));\n border-radius: 4px;\n background: transparent;\n pointer-events: auto;\n}\n\n.react-flow__handle.rn-port-handle--clickable {\n cursor: pointer;\n}\n\n.react-flow__handle.rn-port-handle--highlighted {\n box-shadow: 0 0 0 2px #f59e0b, 0 0 8px rgba(245, 158, 11, 0.75);\n z-index: 12;\n}\n\n\n.react-flow__handle-right.tube-fiber-handle {\n right: auto !important;\n}\n\n/* More specific selector to ensure override - target all possible React Flow handle states */\n/* Only apply to non-ribbon handles */\n.react-flow__node .react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle),\n.react-flow__node .react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle)[data-handlepos],\n.react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle)[data-handlepos],\n.react-flow__handle.tube-fiber-handle:not(.ribbon-bundle-handle)[data-fiber-idx] {\n background: var(--fiber-bg-image, var(--fiber-bg)) !important;\n background-color: var(--fiber-bg) !important;\n background-image: var(--fiber-bg-image, none) !important;\n}\n\n/* Ribbon bundle handles - simple solid color (removed gradient complexity) */\n\n/* Connection animation - pulse effect when edge is first created */\n@keyframes edgeConnectPulse {\n 0% {\n opacity: 0;\n stroke-width: 1;\n }\n 50% {\n opacity: 1;\n stroke-width: 4;\n }\n 100% {\n opacity: 1;\n stroke-width: 2;\n }\n}\n\n.react-flow__edge.edge-connecting path,\n.react-flow__edge.edge-connecting .react-flow__edge-path {\n animation: edgeConnectPulse 1s ease-out;\n}\n\n/* Highlighted edge pulse + dash motion (trace paths) */\n@keyframes rnEdgeHighlightPulse {\n 0%,\n 100% {\n opacity: 0.85;\n stroke-width: var(--rn-edge-highlight-from, 2px);\n }\n 50% {\n opacity: 1;\n stroke-width: var(--rn-edge-highlight-to, 6px);\n }\n}\n\n@keyframes rnEdgeHighlightDash {\n 0% {\n stroke-dashoffset: 0;\n }\n 100% {\n stroke-dashoffset: -48;\n }\n}\n\n.rn-edge-highlight {\n animation: rnEdgeHighlightPulse 2.4s ease-in-out infinite,\n rnEdgeHighlightDash 1.8s linear infinite;\n opacity: 0.9;\n stroke-linecap: round;\n}\n\n/* Splice glow animation - fade in when both handles are connected */\n@keyframes spliceGlowFadeIn {\n 0% {\n opacity: 0;\n transform: translateX(-50%) scaleY(0.3);\n }\n 100% {\n opacity: 1;\n transform: translateX(-50%) scaleY(1);\n }\n}\n\n.splice-glow {\n animation: spliceGlowFadeIn 0.5s ease-out;\n transform-origin: center;\n}\n\n/* Splice text animation - fade in when both handles are connected */\n@keyframes spliceTextFadeIn {\n 0% {\n opacity: 0;\n transform: scale(0.8);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* Splice text overlay - blur and opacity for text readability */\n.splice-text-overlay {\n backdrop-filter: blur(2px);\n -webkit-backdrop-filter: blur(2px);\n}\n\n/* Dark mode overlay */\n.react-flow-dark .splice-text-overlay {\n background: rgba(0, 0, 0, 0.6);\n}\n\n/* Light mode overlay */\n.react-flow-light .splice-text-overlay {\n background: rgba(255, 255, 255, 0.7);\n}\n\n/* Splice text label - theme-aware colors */\n.splice-text-label {\n color: #fff;\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.6);\n}\n\n.splice-text-label.animate-in {\n animation: spliceTextFadeIn 0.5s ease-out;\n transform-origin: center;\n}\n\n/* Light mode text */\n.react-flow-light .splice-text-label {\n color: #1a1a1a;\n text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.7);\n}\n\n/* Remove all borders from splice nodes */\n.react-flow__node[data-type=\"splice\"],\n.react-flow__node[data-type=\"splice\"] > div {\n border: none !important;\n outline: none !important;\n}\n\n.splice-node {\n background: transparent !important;\n border: none !important;\n outline: none !important;\n}\n\n/* Only remove box-shadow when not selected */\n.react-flow__node[data-type=\"splice\"]:not(.selected) > div,\n.splice-node:not(.selected) {\n box-shadow: none !important;\n}\n\n/* React Networks Attribution */\n.react-networks-attribution {\n padding: 0;\n margin: 0;\n z-index: 1000;\n}\n\n.react-networks-attribution-link {\n font-size: 7px;\n color: #9ca3af;\n text-decoration: none;\n font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n transition: color 0.2s ease;\n padding: 1px 4px;\n border-radius: 2px;\n display: inline-block;\n background: rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(4px);\n}\n\n.react-networks-attribution-link:hover {\n color: #e5e7eb;\n background: rgba(0, 0, 0, 0.4);\n}\n\n/* Light mode attribution */\n.react-flow-light .react-networks-attribution-link {\n color: #6b7280;\n background: rgba(255, 255, 255, 0.6);\n}\n\n.react-flow-light .react-networks-attribution-link:hover {\n color: #1a1a1a;\n background: rgba(255, 255, 255, 0.8);\n}\n\n/* Coupler node styles */\n.coupler-node {\n transition: box-shadow 0.2s ease;\n}\n\n.coupler-node.selected {\n box-shadow: 0 0 0 2px #3b82f6 !important;\n}\n\n/* Patch panel node styles */\n.patch-panel-node {\n transition: box-shadow 0.2s ease, border-color 0.2s ease;\n}\n\n.patch-panel-node.selected {\n box-shadow: 0 0 0 2px #3b82f6 !important;\n border-color: #3b82f6 !important;\n}\n\n/* Closure node styles */\n.closure-node {\n transition: box-shadow 0.2s ease, border-color 0.2s ease;\n}\n\n.closure-node.selected {\n box-shadow: 0 0 0 2px #3b82f6 !important;\n border-color: #3b82f6 !important;\n}\n\n/* Device node styles */\n.device-node {\n background-color: var(--rn-device-bg-color, #1f2937);\n color: var(--rn-device-text-color, white);\n background-image: var(--rn-device-bg-image, none);\n background-position: var(--rn-device-bg-position, center);\n background-repeat: var(--rn-device-bg-repeat, no-repeat);\n background-size: var(--rn-device-bg-size, cover);\n border: 1px solid var(--rn-device-border-color, #10b981);\n border-radius: 2px;\n box-shadow: var(--rn-device-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.1));\n box-sizing: border-box;\n color: white;\n cursor: grab;\n display: flex;\n flex-direction: column;\n font-family: monospace;\n font-size: 8px;\n height: var(--rn-device-height, 20px);\n justify-content: center;\n left: var(--rn-device-left, auto);\n margin: 0;\n padding: 0;\n position: relative;\n transform: translateY(var(--rn-device-translate-y, 0px));\n width: var(--rn-device-width, 100%);\n}\n\n.device-node__content {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n padding: 2px;\n text-align: center;\n}\n\n.device-node__image-layer {\n inset: 0;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n z-index: 0;\n}\n\n.device-node__image {\n display: block;\n height: 100%;\n pointer-events: none;\n user-select: none;\n width: 100%;\n}\n\n.device-node__content--image-badge {\n overflow: visible;\n text-align: left;\n}\n\n.device-node__label {\n font-size: 7px;\n font-weight: bold;\n line-height: 1.1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.device-node__label--badge {\n background: rgba(15, 23, 42, 0.88);\n border: 1px solid rgba(148, 163, 184, 0.45);\n border-radius: 2px;\n display: inline-flex;\n max-width: 100%;\n padding: 1px 4px;\n}\n\n.device-node__manufacturer {\n color: #9ca3af;\n font-size: 6px;\n line-height: 1;\n}\n\n.device-node__u-indicator {\n background: #374151;\n border-radius: 1px;\n bottom: 1px;\n color: #9ca3af;\n font-size: 6px;\n line-height: 1;\n padding: 1px 2px;\n position: absolute;\n right: 1px;\n}\n\n.device-node__status-indicator {\n background: var(--rn-device-status-color, #6b7280);\n border-radius: 50%;\n bottom: 1px;\n height: 4px;\n left: 1px;\n position: absolute;\n width: 4px;\n}\n\n.device-node__split-face {\n background-color: #1f2937;\n overflow: hidden;\n position: relative;\n}\n\n.device-node__split-face--front {\n border-left: 1px dashed rgba(156, 163, 175, 0.35);\n}\n\n.device-node__split-face--rear {\n border-right: 1px dashed rgba(156, 163, 175, 0.35);\n}\n\n.device-node__face-bridge {\n position: relative;\n}\n\n.device-node__face-bridge-line {\n background: linear-gradient(180deg, transparent 0%, rgba(156, 163, 175, 0.8) 20%, rgba(156, 163, 175, 0.8) 80%, transparent 100%);\n left: 50%;\n position: absolute;\n top: 1px;\n transform: translateX(-50%);\n width: 1px;\n height: calc(100% - 2px);\n}\n\n.device-node__face-bridge-label {\n background: rgba(17, 24, 39, 0.82);\n border: 1px solid rgba(156, 163, 175, 0.4);\n border-radius: 999px;\n color: #d1d5db;\n font-size: 6px;\n font-weight: 700;\n left: 50%;\n letter-spacing: 0.04em;\n max-width: 120px;\n overflow: hidden;\n padding: 1px 6px;\n position: absolute;\n text-overflow: ellipsis;\n top: 50%;\n transform: translate(-50%, -50%) rotate(-90deg);\n white-space: nowrap;\n}\n\n/* Light mode adjustments */\n.react-flow-light .coupler-node {\n background: #f9fafb;\n color: #1f2937;\n border-color: #d1d5db;\n}\n\n.react-flow-light .patch-panel-node {\n background: transparent !important;\n color: #1f2937;\n border-color: #d1d5db;\n}\n\n.react-flow-light .closure-node {\n background: transparent !important;\n color: #1f2937;\n border-color: #d1d5db;\n}\n\n/* Triangle node styles */\n.react-flow__node[data-type=\"fibre-split\"],\n.react-flow__node.react-flow__node-fibre-split {\n background: transparent !important;\n border: none !important;\n padding: 0 !important;\n}\n\n.react-flow__node[data-type=\"fibre-split\"] > div,\n.react-flow__node.react-flow__node-fibre-split > div {\n background: transparent !important;\n border: none !important;\n padding: 0 !important;\n box-shadow: none !important;\n overflow: visible !important;\n}\n\n.react-flow__node[data-type=\"fibre-split\"] svg,\n.react-flow__node.react-flow__node-fibre-split svg {\n display: block !important;\n visibility: visible !important;\n opacity: 1 !important;\n}\n\n.triangle-node {\n position: relative !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n background: transparent !important;\n border: none !important;\n padding: 0 !important;\n margin: 0 !important;\n box-shadow: none !important;\n overflow: visible !important;\n box-sizing: border-box !important;\n}\n\n\n.triangle-node-text {\n text-align: center;\n position: relative;\n z-index: 2;\n width: 46px;\n height: 46px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n color: #000000;\n font-weight: bold;\n font-size: 12px;\n}\n\n/* Cable node rotation */\n.cable-node-rotated {\n transform-origin: center center !important;\n}\n\n/* Ensure Fibre Flow edges render with full saturation and aren't affected by node overlays */\n.react-flow__edge[data-type=\"fibre-flow\"] path,\n.react-flow__edge[data-type=\"fibre-flow\"] .react-flow__edge-path {\n opacity: 1 !important;\n stroke-opacity: 1 !important;\n mix-blend-mode: normal !important;\n filter: none !important;\n}\n\n.react-flow__edge[data-type=\"fibre-flow-link\"] path,\n.react-flow__edge[data-type=\"fibre-flow-link\"] .react-flow__edge-path {\n opacity: 1 !important;\n stroke-opacity: 1 !important;\n mix-blend-mode: normal !important;\n filter: none !important;\n}\n"],"mappings":"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","names":[]}