@mp70/react-networks 0.1.4-alpha → 0.1.5-alpha

package/README.md

@@ -312,14 +312,20 @@ We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) f
 
 ## 📄 License
 
-Dual-licensed under AGPL-3.0 or Commercial. See [LICENSE](LICENSE) for details.
+Dual-licensed under:
+
+- **AGPL-3.0** (Free) - For open source, personal, and educational use. Copyleft applies. [Read License](https://www.gnu.org/licenses/agpl-3.0.html)
+- **Commercial** (Paid) - For proprietary/commercial use without copyleft obligations. [Contact us](mailto:info@serversearcher.com?subject=Commercial License Inquiry for @mp70/react-networks)
+
+See [LICENSE](../../LICENSE) for details. By installing, you agree to use under either license. Contact us for commercial use.
 
 ## 🆘 Support
 
-- 📖 [Documentation](https://react-networks.dev)
-- 🐛 [Issue Tracker](https://github.com/your-org/react-networks/issues)
-- 💬 [Discussions](https://github.com/your-org/react-networks/discussions)
-- 📧 [Email Support](mailto:support@react-networks.dev)
+- 📖 [Documentation](../../README.md)
+- 📚 [API Documentation](docs/API.md)
+- 🐛 [Issue Tracker](https://github.com/MP70/react-networks/issues)
+- 💬 [Discussions](https://github.com/MP70/react-networks/discussions)
+- 📧 [Email Support](mailto:info@serversearcher.com)
 
 ## 🙏 Acknowledgments
 
@@ -329,4 +335,4 @@ Dual-licensed under AGPL-3.0 or Commercial. See [LICENSE](LICENSE) for details.
 
 ---
 
-Made with ❤️ by the React Networks team
+Made with ❤️ by [Matt Pickering](https://github.com/MP70)

package/dist/index.css

@@ -32,7 +32,7 @@
 }
 
 .react-flow-light {
-  --react-flow-background: #ffffff;
+  --react-flow-background: #f5f5f5;
   --react-flow-text: #1a1a1a;
   --react-flow-border: #e9ecef;
   --react-flow-controls-bg: #f8f9fa;
@@ -50,6 +50,15 @@
   background-color: var(--react-flow-background);
 }
 
+/* Ensure canvas background is always off-white in light mode */
+.react-flow-light .react-flow__viewport {
+  background-color: #f5f5f5 !important;
+}
+
+.react-flow-light .react-flow {
+  background-color: #f5f5f5;
+}
+
 .react-flow-dark .react-flow__controls {
   background-color: var(--react-flow-controls-bg);
   border-color: var(--react-flow-controls-border);
@@ -90,6 +99,135 @@
   background-color: #e9ecef;
 }
 
+/* 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 {
+  border: none !important;
+  transform: none !important;
+  background-clip: padding-box !important;
+  opacity: 1 !important;
+  /* Remove React Flow's default background completely */
+  background: var(--fiber-bg-image, var(--fiber-bg)) !important;
+  background-color: var(--fiber-bg) !important;
+  /* Ensure no default React Flow styles interfere */
+  box-shadow: 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] {
+  background: var(--fiber-bg-image, var(--fiber-bg)) !important;
+  background-color: var(--fiber-bg) !important;
+  background-image: var(--fiber-bg-image, none) !important;
+}
+
+/* Connection animation - pulse effect when edge is first created */
+@keyframes edgeConnectPulse {
+  0% {
+    opacity: 0;
+    stroke-width: 1;
+  }
+  50% {
+    opacity: 1;
+    stroke-width: 4;
+  }
+  100% {
+    opacity: 1;
+    stroke-width: 2;
+  }
+}
+
+.react-flow__edge.edge-connecting path,
+.react-flow__edge.edge-connecting .react-flow__edge-path {
+  animation: edgeConnectPulse 1s ease-out;
+}
+
+/* Splice glow animation - fade in when both handles are connected */
+@keyframes spliceGlowFadeIn {
+  0% {
+    opacity: 0;
+    transform: translateX(-50%) scaleY(0.3);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(-50%) scaleY(1);
+  }
+}
+
+.splice-glow {
+  animation: spliceGlowFadeIn 0.5s ease-out;
+  transform-origin: center;
+}
+
+/* Splice text animation - fade in when both handles are connected */
+@keyframes spliceTextFadeIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Splice text overlay - blur and opacity for text readability */
+.splice-text-overlay {
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+
+/* Dark mode overlay */
+.react-flow-dark .splice-text-overlay {
+  background: rgba(0, 0, 0, 0.6);
+}
+
+/* Light mode overlay */
+.react-flow-light .splice-text-overlay {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+/* Splice text label - theme-aware colors */
+.splice-text-label {
+  color: #fff;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.6);
+}
+
+.splice-text-label.animate-in {
+  animation: spliceTextFadeIn 0.5s ease-out;
+  transform-origin: center;
+}
+
+/* Light mode text */
+.react-flow-light .splice-text-label {
+  color: #1a1a1a;
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.7);
+}
+
+/* Remove all borders from splice nodes */
+.react-flow__node[data-type="splice"],
+.react-flow__node[data-type="splice"] > div {
+  border: none !important;
+  outline: none !important;
+}
+
+.splice-node {
+  border: none !important;
+  outline: none !important;
+}
+
+/* Only remove box-shadow when not selected */
+.react-flow__node[data-type="splice"]:not(.selected) > div,
+.splice-node:not(.selected) {
+  box-shadow: none !important;
+}
+
 /* React Networks Attribution */
 .react-networks-attribution {
   padding: 0;

package/dist/index.d.mts

@@ -39,7 +39,7 @@ interface PortBlock {
  * Network node types supported by the diagram
  * @public
  */
-type NetworkNodeType = 'rack' | 'switch' | 'router' | 'server' | 'fiber' | 'patch-panel' | 'device' | 'vertical-pdu';
+type NetworkNodeType = 'rack' | 'switch' | 'router' | 'server' | 'fiber' | 'patch-panel' | 'device' | 'vertical-pdu' | 'splice' | 'splice-tray' | 'tube' | 'cable';
 /**
  * Device status states
  * @public
@@ -118,6 +118,10 @@ interface NetworkNode {
         uNumberingDirection?: UNumberingDirection;
         /** Custom header text for rack nodes */
         customHeaderText?: string;
+        /** Holder position within tray (1-12) for splice nodes */
+        holderPosition?: number;
+        /** Loss value in dB for splice nodes */
+        lossDb?: number;
         /** Additional custom properties */
         [key: string]: any;
     };
@@ -126,7 +130,7 @@ interface NetworkNode {
  * Network edge types
  * @public
  */
-type NetworkEdgeType = 'fiber' | 'ethernet' | 'power';
+type NetworkEdgeType = 'fiber' | 'ethernet' | 'power' | 'smoothstep' | 'step';
 /**
  * Network edge data structure
  * @public
@@ -242,6 +246,37 @@ interface FiberCable {
         to: string;
     };
 }
+/**
+ * Splice configuration structure
+ * @public
+ */
+interface SpliceConfig {
+    /** Unique splice identifier */
+    id: string;
+    /** Splice display name */
+    name: string;
+    /** Holder position within tray (1-12) */
+    holder: number;
+    /** Loss value in dB */
+    lossDb?: number;
+}
+/**
+ * Splice tray configuration structure
+ * @public
+ */
+interface SpliceTrayConfig {
+    /** Unique tray identifier */
+    id: string;
+    /** Tray display name */
+    name: string;
+    /** Tray position coordinates */
+    position: {
+        x: number;
+        y: number;
+    };
+    /** Splices in this tray */
+    splices: SpliceConfig[];
+}
 /**
  * Network diagram component props
  * @public
@@ -297,6 +332,10 @@ interface NetworkDiagramProps {
     downloadButtonText?: string;
     /** Download button styling options */
     downloadButtonStyle?: React.CSSProperties;
+    /** Allow reconnecting existing edges from either end */
+    allowReconnectExisting?: boolean;
+    /** Use smoothstep edges for tube connections (both tube-to-cable and cable-to-tube). Default is fiber. */
+    useSmoothstepEdgesForTubes?: boolean;
 }
 
 declare const NetworkDiagram: React$1.FC<NetworkDiagramProps>;
@@ -310,7 +349,9 @@ declare const RackNode: React$1.FC<RackNodeProps>;
 
 declare const FiberNode: React$1.FC<NodeProps<NetworkNode['data']>>;
 
-declare const FiberEdge: React$1.FC<EdgeProps<NetworkEdge['data']>>;
+declare const FiberEdge: React$1.FC<EdgeProps<NetworkEdge['data']> & {
+    className?: string;
+}>;
 
 declare const PowerEdge: React$1.FC<EdgeProps>;
 
@@ -318,6 +359,30 @@ declare const DeviceNode: React$1.FC<NodeProps<NetworkNode['data']>>;
 
 declare const VerticalPDU: React$1.FC<NodeProps<NetworkNode['data']>>;
 
+declare const SpliceNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
+declare const SpliceTrayNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
+/**
+ * TubeNode
+ * - Rectangular node representing a buffer tube (horizontal orientation, rotated 180 degrees)
+ * - Renders 12 or 24 fiber handles on the top side with TIA-598 colors
+ * - Tube border tinted by tube index color (1..12 cycling)
+ * - startOn parameter controls handle positioning:
+ *   - 'left-center' (default): handles centered on top, tube handle on bottom
+ *   - 'left': handles on left side, tube handle on left
+ *   - 'right': handles on right side with reversed colors, tube handle on right
+ */
+declare const TubeNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
+/**
+ * CableNode
+ * - Visually mirrors TubeNode but represents an entire cable
+ * - Each colored handle corresponds to a tube within the cable
+ * - Displays cable summary text (fiber count + cable identifier)
+ */
+declare const CableNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
 interface InventoryRackDTO {
     id: string | number;
     name: string;
@@ -461,6 +526,29 @@ declare const updateDeviceUPosition$1: (device: NetworkNode, rack: NetworkNode,
  */
 declare const validateAndSnapDevice: (device: NetworkNode, rack: NetworkNode) => NetworkNode;
 
+/**
+ * Snap a splice to the nearest holder position within a tray
+ */
+declare const snapToSplicePosition: (splice: NetworkNode, tray: NetworkNode, newPosition: {
+    x: number;
+    y: number;
+}, allNodes: NetworkNode[]) => {
+    x: number;
+    y: number;
+    holderPosition?: number;
+};
+/**
+ * Find the next available holder position
+ */
+declare const findNextAvailableHolderPosition: (tray: NetworkNode, splice: NetworkNode, allNodes: NetworkNode[], startFrom?: number) => number;
+/**
+ * Calculate splice position based on holder number within a tray
+ */
+declare const calculateSplicePositionFromNumber: (tray: NetworkNode, holderPosition: number) => {
+    x: number;
+    y: number;
+};
+
 /**
  * Configuration options for building nodes from rack schema
  */
@@ -526,6 +614,66 @@ declare function addDeviceToRack(racks: RackConfig[], rackId: string, device: Ra
  */
 declare function removeDeviceFromRack(racks: RackConfig[], rackId: string, deviceId: string): RackConfig[];
 
+/**
+ * Configuration options for building nodes from splice schema
+ */
+interface SpliceSchemaOptions {
+    /** How to handle splice placement conflicts */
+    conflictPolicy?: 'strict' | 'nearest';
+    /** Whether to validate all placements before creating nodes */
+    validatePlacements?: boolean;
+}
+/**
+ * Error thrown when splice placement conflicts occur in strict mode
+ */
+declare class SplicePlacementError extends Error {
+    trayId: string;
+    spliceId: string;
+    holder: number;
+    conflictWith?: string | undefined;
+    constructor(trayId: string, spliceId: string, holder: number, conflictWith?: string | undefined);
+}
+/**
+ * Validation result for splice placement
+ */
+interface SplicePlacementValidation {
+    isValid: boolean;
+    conflicts: Array<{
+        spliceId: string;
+        holder: number;
+        conflictWith: string;
+    }>;
+    outOfBounds: Array<{
+        spliceId: string;
+        holder: number;
+        max: number;
+    }>;
+}
+/**
+ * Validate splice placements within a tray schema
+ */
+declare function validateSplicePlacements(tray: SpliceTrayConfig, _options?: SpliceSchemaOptions): SplicePlacementValidation;
+/**
+ * Build NetworkNode array from SpliceTrayConfig array with comprehensive validation
+ */
+declare function buildNodesFromSpliceConfig(trays: SpliceTrayConfig[], options?: SpliceSchemaOptions): NetworkNode[];
+/**
+ * Create a SpliceTrayConfig from existing NetworkNode data (reverse operation)
+ */
+declare function createSpliceConfigFromNodes(nodes: NetworkNode[]): SpliceTrayConfig[];
+/**
+ * Update splice holder position in a splice schema
+ */
+declare function updateSpliceHolderPosition(trays: SpliceTrayConfig[], trayId: string, spliceId: string, newHolder: number): SpliceTrayConfig[];
+/**
+ * Add a splice to a tray schema
+ */
+declare function addSpliceToTray(trays: SpliceTrayConfig[], trayId: string, splice: SpliceConfig, options?: SpliceSchemaOptions): SpliceTrayConfig[];
+/**
+ * Remove a splice from a tray schema
+ */
+declare function removeSpliceFromTray(trays: SpliceTrayConfig[], trayId: string, spliceId: string): SpliceTrayConfig[];
+
 /**
  * Power connector utilities for consistent styling across devices and PDUs
  */
@@ -577,6 +725,48 @@ declare function getDeviceConnectorType(deviceName: string): string;
  */
 declare function getStatusColor(status: DeviceStatus | string): string;
 
+/**
+ * TIA-598-C standard fiber optic color codes (12 base colors)
+ * Colors 1-12: Blue, Orange, Green, Brown, Slate, White, Red, Black, Yellow, Violet, Rose, Aqua
+ * @public
+ */
+declare const FIBER_COLORS_12: readonly ["#1f77b4", "#ff7f0e", "#2ca02c", "#8c564b", "#708090", "#ffffff", "#d62728", "#000000", "#ffdf00", "#8a2be2", "#ff69b4", "#00ffff"];
+/**
+ * Fiber color ID type (1-24)
+ * @public
+ */
+type FiberColorId = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
+/**
+ * Get the base color for a fiber color ID
+ * Colors 13-24 use the same base colors as 1-12
+ * @param id - Fiber color ID (1-24)
+ * @returns Hex color code
+ * @public
+ */
+declare function baseColorFor(id: FiberColorId | number): string;
+/**
+ * Check if a fiber color ID uses a striped pattern (13-24)
+ * @param id - Fiber color ID (1-24)
+ * @returns True if the color should be striped
+ * @public
+ */
+declare function isStriped(id: FiberColorId | number): boolean;
+/**
+ * Get CSS properties for a fiber color (solid or striped)
+ * Colors 13-24 use a black stripe pattern over the base color
+ * @param id - Fiber color ID (1-24)
+ * @returns CSS properties for the color
+ * @public
+ */
+declare function fiberSolidOrStriped(id: FiberColorId | number): React$1.CSSProperties;
+/**
+ * Get the hex color code for a fiber color ID
+ * @param id - Fiber color ID (1-24)
+ * @returns Hex color code
+ * @public
+ */
+declare function getFiberColor(id: FiberColorId | number): string;
+
 /**
  * Calculate the bounding box of a rack node
  * @param rack - The rack node
@@ -622,11 +812,13 @@ interface ReplaceEdgeOptions {
     /** Connection parameters for the new edge */
     connection: Connection;
     /** Type of edge to create */
-    edgeType: 'power' | 'fiber';
+    edgeType: 'power' | 'fiber' | 'step' | 'smoothstep';
     /** Function to calculate zIndex for the edge */
     selectEdgeZIndex: (edge: NetworkEdge) => number;
     /** Whether to find edge by source or target */
     findBy: 'source' | 'target';
+    /** Optional edge data to set on the new edge */
+    data?: NetworkEdge['data'];
 }
 /**
  * Replace an existing edge with a new connection
@@ -670,4 +862,4 @@ declare function useNetworkDiagram(store: NetworkDiagramStore): NetworkDiagramSt
 declare function useNodes(store: NetworkDiagramStore): NetworkNode[];
 declare function useEdges(store: NetworkDiagramStore): NetworkEdge[];
 
-export { DeviceNode, DevicePlacementError, type DevicePlacementValidation, type FiberCable, FiberEdge, FiberNode, NetworkDiagram, type NetworkDiagramProps, type NetworkEdge, type NetworkNode, POWER_CONNECTORS, type Port, type PortBlock, PowerEdge, type RackConfig, type RackDevice, RackNode, type RackSchemaOptions, type ReplaceEdgeOptions, VerticalPDU, Width, addDeviceToRack, buildNodesFromRackConfig, calculateDevicePositionFromU, createNetworkDiagramStore, createRackConfigFromNodes, findNearestRack, findNextAvailableUPosition, generateLayout, getConnectorConfig, getDeviceConnectorType, getPDUPortType, getPowerPortStyle, getRackBounds, getStatusColor, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToNetworkDiagram, isHighPowerConnector, isPointInRack, isUPositionAvailable, removeDeviceFromRack, replaceEdge, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements };
+export { CableNode, DeviceNode, DevicePlacementError, type DevicePlacementValidation, FIBER_COLORS_12, type FiberCable, type FiberColorId, FiberEdge, FiberNode, NetworkDiagram, type NetworkDiagramProps, type NetworkEdge, type NetworkNode, POWER_CONNECTORS, type Port, type PortBlock, PowerEdge, type RackConfig, type RackDevice, RackNode, type RackSchemaOptions, type ReplaceEdgeOptions, type SpliceConfig, SpliceNode, SplicePlacementError, type SplicePlacementValidation, type SpliceSchemaOptions, type SpliceTrayConfig, SpliceTrayNode, TubeNode, VerticalPDU, Width, addDeviceToRack, addSpliceToTray, baseColorFor, buildNodesFromRackConfig, buildNodesFromSpliceConfig, calculateDevicePositionFromU, calculateSplicePositionFromNumber, createNetworkDiagramStore, createRackConfigFromNodes, createSpliceConfigFromNodes, fiberSolidOrStriped, findNearestRack, findNextAvailableHolderPosition, findNextAvailableUPosition, generateLayout, getConnectorConfig, getDeviceConnectorType, getFiberColor, getPDUPortType, getPowerPortStyle, getRackBounds, getStatusColor, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToNetworkDiagram, isHighPowerConnector, isPointInRack, isStriped, isUPositionAvailable, removeDeviceFromRack, removeSpliceFromTray, replaceEdge, snapToSplicePosition, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, updateSpliceHolderPosition, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements, validateSplicePlacements };