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

package/dist/index.css

@@ -264,3 +264,51 @@
   background: rgba(255, 255, 255, 0.8);
 }
 
+/* Coupler node styles */
+.coupler-node {
+  transition: box-shadow 0.2s ease;
+}
+
+.coupler-node.selected {
+  box-shadow: 0 0 0 2px #3b82f6 !important;
+}
+
+/* Patch panel node styles */
+.patch-panel-node {
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.patch-panel-node.selected {
+  box-shadow: 0 0 0 2px #3b82f6 !important;
+  border-color: #3b82f6 !important;
+}
+
+/* Closure node styles */
+.closure-node {
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.closure-node.selected {
+  box-shadow: 0 0 0 2px #3b82f6 !important;
+  border-color: #3b82f6 !important;
+}
+
+/* Light mode adjustments */
+.react-flow-light .coupler-node {
+  background: #f9fafb;
+  color: #1f2937;
+  border-color: #d1d5db;
+}
+
+.react-flow-light .patch-panel-node {
+  background: transparent !important;
+  color: #1f2937;
+  border-color: #d1d5db;
+}
+
+.react-flow-light .closure-node {
+  background: transparent !important;
+  color: #1f2937;
+  border-color: #d1d5db;
+}
+

package/dist/index.css.map

@@ -0,0 +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":[]}

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' | 'splice' | 'splice-tray' | 'tube' | 'cable';
+type NetworkNodeType = 'rack' | 'switch' | 'router' | 'server' | 'fiber' | 'patch-panel' | 'device' | 'vertical-pdu' | 'splice' | 'splice-tray' | 'tube' | 'cable' | 'coupler' | 'closure';
 /**
  * Device status states
  * @public
@@ -122,6 +122,26 @@ interface NetworkNode {
         holderPosition?: number;
         /** Loss value in dB for splice nodes */
         lossDb?: number;
+        /** Connector type for coupler nodes */
+        connector?: 'SC' | 'LC';
+        /** Number of fibers for coupler nodes (1, 2, or 4) */
+        couplerFiberCount?: 1 | 2 | 4;
+        /** Optional port labels for left side of coupler */
+        portLabelsLeft?: string[];
+        /** Optional port labels for right side of coupler */
+        portLabelsRight?: string[];
+        /** Slot position for couplers inside panels (1-based, vertical slots aligned to right edge) */
+        slotPosition?: number;
+        /** Width override for container nodes (patch-panel, closure) */
+        panelWidth?: number;
+        /** Height override for container nodes (patch-panel, closure) */
+        panelHeight?: number;
+        /** Number of rows for container nodes (patch-panel, closure) */
+        rows?: number;
+        /** Number of columns for container nodes (patch-panel, closure) */
+        cols?: number;
+        /** Header text for container nodes */
+        header?: string;
         /** Additional custom properties */
         [key: string]: any;
     };
@@ -130,7 +150,7 @@ interface NetworkNode {
  * Network edge types
  * @public
  */
-type NetworkEdgeType = 'fiber' | 'ethernet' | 'power' | 'smoothstep' | 'step';
+type NetworkEdgeType = 'fiber' | 'ethernet' | 'power' | 'smoothstep' | 'step' | 'thick-cable';
 /**
  * Network edge data structure
  * @public
@@ -336,6 +356,8 @@ interface NetworkDiagramProps {
     allowReconnectExisting?: boolean;
     /** Use smoothstep edges for tube connections (both tube-to-cable and cable-to-tube). Default is fiber. */
     useSmoothstepEdgesForTubes?: boolean;
+    /** Enable connecting edges by clicking on handles. When true, increases handle sizes for better touch targets. Default is true. */
+    connectOnClick?: boolean;
 }
 
 declare const NetworkDiagram: React$1.FC<NetworkDiagramProps>;
@@ -383,6 +405,12 @@ declare const TubeNode: React$1.FC<NodeProps<NetworkNode['data']>>;
  */
 declare const CableNode: React$1.FC<NodeProps<NetworkNode['data']>>;
 
+declare const CouplerNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
+declare const PatchPanelNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
+declare const ClosureNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
 interface InventoryRackDTO {
     id: string | number;
     name: string;
@@ -549,6 +577,114 @@ declare const calculateSplicePositionFromNumber: (tray: NetworkNode, holderPosit
     y: number;
 };
 
+/**
+ * Panel header height in pixels
+ */
+declare const PANEL_HEADER_HEIGHT = 32;
+/**
+ * Coupler slot height in pixels
+ */
+declare const COUPLER_SLOT_HEIGHT_PX = 30;
+/**
+ * Default number of couplers per panel
+ */
+declare const COUPLERS_PER_PANEL = 24;
+/**
+ * Default coupler width in pixels
+ */
+declare const COUPLER_WIDTH_PX = 80;
+/**
+ * Default panel width in pixels
+ */
+declare const PANEL_WIDTH_PX = 400;
+/**
+ * Default panel height in pixels
+ */
+declare const PANEL_HEIGHT_PX = 300;
+/**
+ * Panel border width in pixels
+ */
+declare const PANEL_BORDER_WIDTH = 2;
+/**
+ * Panel padding in pixels
+ */
+declare const PANEL_PADDING = 8;
+/**
+ * Spacing between tubes and trays in patch panels (horizontal spacing)
+ */
+declare const PANEL_TUBE_TRAY_SPACING = 120;
+/**
+ * Calculate coupler dimensions based on node data
+ */
+declare function getCouplerDimensions(node: NetworkNode): {
+    width: number;
+    height: number;
+};
+/**
+ * Calculate tube dimensions based on node data
+ */
+declare function getTubeDimensions(node: NetworkNode): {
+    width: number;
+    height: number;
+};
+/**
+ * Get tray dimensions
+ */
+declare function getTrayDimensions(_node: NetworkNode): {
+    width: number;
+    height: number;
+};
+/**
+ * Calculate panel width based on content
+ */
+declare function getPanelWidth(panelNode: NetworkNode): number;
+/**
+ * Calculate panel height based on content
+ */
+declare function getPanelHeight(panelNode: NetworkNode): number;
+/**
+ * Get inner content width (panel width minus borders/padding)
+ */
+declare function getInnerContentWidth(panelNode: NetworkNode): number;
+/**
+ * Calculate coupler right X position
+ */
+declare function calculateCouplerRightX(panelNode: NetworkNode, couplerWidth: number): number;
+/**
+ * Calculate slot position from Y coordinate
+ */
+declare function calculateSlotPositionFromY(y: number, slotHeight?: number): number;
+/**
+ * Calculate Y coordinate from slot position
+ */
+declare function calculateYFromSlotPosition(slot: number, slotHeight?: number): number;
+/**
+ * Snap coupler to nearest slot position
+ */
+declare function snapToCouplerPosition(coupler: NetworkNode, panel: NetworkNode, position: {
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+    slotPosition?: number;
+};
+/**
+ * Calculate panel dimensions based on child nodes
+ */
+declare function calculatePanelDimensions(panelNode: NetworkNode, childNodes: NetworkNode[]): {
+    width: number;
+    height: number;
+};
+/**
+ * Calculate spacing between couplers
+ */
+declare function calculateCouplerSpacing(numCouplers: number, couplerHeight: number, availableHeight: number): number;
+/**
+ * Calculate coupler slot spacing
+ */
+declare function calculateCouplerSlotSpacing(numCouplers: number, couplerHeight: number, availableHeight: number): number;
+
 /**
  * Configuration options for building nodes from rack schema
  */
@@ -812,7 +948,7 @@ interface ReplaceEdgeOptions {
     /** Connection parameters for the new edge */
     connection: Connection;
     /** Type of edge to create */
-    edgeType: 'power' | 'fiber' | 'step' | 'smoothstep';
+    edgeType: 'power' | 'fiber' | 'step' | 'smoothstep' | 'thick-cable';
     /** Function to calculate zIndex for the edge */
     selectEdgeZIndex: (edge: NetworkEdge) => number;
     /** Whether to find edge by source or target */
@@ -862,4 +998,4 @@ declare function useNetworkDiagram(store: NetworkDiagramStore): NetworkDiagramSt
 declare function useNodes(store: NetworkDiagramStore): NetworkNode[];
 declare function useEdges(store: NetworkDiagramStore): NetworkEdge[];
 
-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 };
+export { COUPLERS_PER_PANEL, COUPLER_SLOT_HEIGHT_PX, COUPLER_WIDTH_PX, CableNode, ClosureNode, CouplerNode, DeviceNode, DevicePlacementError, type DevicePlacementValidation, FIBER_COLORS_12, type FiberCable, type FiberColorId, FiberEdge, FiberNode, NetworkDiagram, type NetworkDiagramProps, type NetworkEdge, type NetworkNode, 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, 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, calculateCouplerRightX, calculateCouplerSlotSpacing, calculateCouplerSpacing, calculateDevicePositionFromU, calculatePanelDimensions, calculateSlotPositionFromY, calculateSplicePositionFromNumber, calculateYFromSlotPosition, 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, removeDeviceFromRack, removeSpliceFromTray, replaceEdge, snapToCouplerPosition, snapToSplicePosition, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, updateSpliceHolderPosition, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements, validateSplicePlacements };

package/dist/index.d.ts

@@ -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' | 'splice' | 'splice-tray' | 'tube' | 'cable';
+type NetworkNodeType = 'rack' | 'switch' | 'router' | 'server' | 'fiber' | 'patch-panel' | 'device' | 'vertical-pdu' | 'splice' | 'splice-tray' | 'tube' | 'cable' | 'coupler' | 'closure';
 /**
  * Device status states
  * @public
@@ -122,6 +122,26 @@ interface NetworkNode {
         holderPosition?: number;
         /** Loss value in dB for splice nodes */
         lossDb?: number;
+        /** Connector type for coupler nodes */
+        connector?: 'SC' | 'LC';
+        /** Number of fibers for coupler nodes (1, 2, or 4) */
+        couplerFiberCount?: 1 | 2 | 4;
+        /** Optional port labels for left side of coupler */
+        portLabelsLeft?: string[];
+        /** Optional port labels for right side of coupler */
+        portLabelsRight?: string[];
+        /** Slot position for couplers inside panels (1-based, vertical slots aligned to right edge) */
+        slotPosition?: number;
+        /** Width override for container nodes (patch-panel, closure) */
+        panelWidth?: number;
+        /** Height override for container nodes (patch-panel, closure) */
+        panelHeight?: number;
+        /** Number of rows for container nodes (patch-panel, closure) */
+        rows?: number;
+        /** Number of columns for container nodes (patch-panel, closure) */
+        cols?: number;
+        /** Header text for container nodes */
+        header?: string;
         /** Additional custom properties */
         [key: string]: any;
     };
@@ -130,7 +150,7 @@ interface NetworkNode {
  * Network edge types
  * @public
  */
-type NetworkEdgeType = 'fiber' | 'ethernet' | 'power' | 'smoothstep' | 'step';
+type NetworkEdgeType = 'fiber' | 'ethernet' | 'power' | 'smoothstep' | 'step' | 'thick-cable';
 /**
  * Network edge data structure
  * @public
@@ -336,6 +356,8 @@ interface NetworkDiagramProps {
     allowReconnectExisting?: boolean;
     /** Use smoothstep edges for tube connections (both tube-to-cable and cable-to-tube). Default is fiber. */
     useSmoothstepEdgesForTubes?: boolean;
+    /** Enable connecting edges by clicking on handles. When true, increases handle sizes for better touch targets. Default is true. */
+    connectOnClick?: boolean;
 }
 
 declare const NetworkDiagram: React$1.FC<NetworkDiagramProps>;
@@ -383,6 +405,12 @@ declare const TubeNode: React$1.FC<NodeProps<NetworkNode['data']>>;
  */
 declare const CableNode: React$1.FC<NodeProps<NetworkNode['data']>>;
 
+declare const CouplerNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
+declare const PatchPanelNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
+declare const ClosureNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
 interface InventoryRackDTO {
     id: string | number;
     name: string;
@@ -549,6 +577,114 @@ declare const calculateSplicePositionFromNumber: (tray: NetworkNode, holderPosit
     y: number;
 };
 
+/**
+ * Panel header height in pixels
+ */
+declare const PANEL_HEADER_HEIGHT = 32;
+/**
+ * Coupler slot height in pixels
+ */
+declare const COUPLER_SLOT_HEIGHT_PX = 30;
+/**
+ * Default number of couplers per panel
+ */
+declare const COUPLERS_PER_PANEL = 24;
+/**
+ * Default coupler width in pixels
+ */
+declare const COUPLER_WIDTH_PX = 80;
+/**
+ * Default panel width in pixels
+ */
+declare const PANEL_WIDTH_PX = 400;
+/**
+ * Default panel height in pixels
+ */
+declare const PANEL_HEIGHT_PX = 300;
+/**
+ * Panel border width in pixels
+ */
+declare const PANEL_BORDER_WIDTH = 2;
+/**
+ * Panel padding in pixels
+ */
+declare const PANEL_PADDING = 8;
+/**
+ * Spacing between tubes and trays in patch panels (horizontal spacing)
+ */
+declare const PANEL_TUBE_TRAY_SPACING = 120;
+/**
+ * Calculate coupler dimensions based on node data
+ */
+declare function getCouplerDimensions(node: NetworkNode): {
+    width: number;
+    height: number;
+};
+/**
+ * Calculate tube dimensions based on node data
+ */
+declare function getTubeDimensions(node: NetworkNode): {
+    width: number;
+    height: number;
+};
+/**
+ * Get tray dimensions
+ */
+declare function getTrayDimensions(_node: NetworkNode): {
+    width: number;
+    height: number;
+};
+/**
+ * Calculate panel width based on content
+ */
+declare function getPanelWidth(panelNode: NetworkNode): number;
+/**
+ * Calculate panel height based on content
+ */
+declare function getPanelHeight(panelNode: NetworkNode): number;
+/**
+ * Get inner content width (panel width minus borders/padding)
+ */
+declare function getInnerContentWidth(panelNode: NetworkNode): number;
+/**
+ * Calculate coupler right X position
+ */
+declare function calculateCouplerRightX(panelNode: NetworkNode, couplerWidth: number): number;
+/**
+ * Calculate slot position from Y coordinate
+ */
+declare function calculateSlotPositionFromY(y: number, slotHeight?: number): number;
+/**
+ * Calculate Y coordinate from slot position
+ */
+declare function calculateYFromSlotPosition(slot: number, slotHeight?: number): number;
+/**
+ * Snap coupler to nearest slot position
+ */
+declare function snapToCouplerPosition(coupler: NetworkNode, panel: NetworkNode, position: {
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+    slotPosition?: number;
+};
+/**
+ * Calculate panel dimensions based on child nodes
+ */
+declare function calculatePanelDimensions(panelNode: NetworkNode, childNodes: NetworkNode[]): {
+    width: number;
+    height: number;
+};
+/**
+ * Calculate spacing between couplers
+ */
+declare function calculateCouplerSpacing(numCouplers: number, couplerHeight: number, availableHeight: number): number;
+/**
+ * Calculate coupler slot spacing
+ */
+declare function calculateCouplerSlotSpacing(numCouplers: number, couplerHeight: number, availableHeight: number): number;
+
 /**
  * Configuration options for building nodes from rack schema
  */
@@ -812,7 +948,7 @@ interface ReplaceEdgeOptions {
     /** Connection parameters for the new edge */
     connection: Connection;
     /** Type of edge to create */
-    edgeType: 'power' | 'fiber' | 'step' | 'smoothstep';
+    edgeType: 'power' | 'fiber' | 'step' | 'smoothstep' | 'thick-cable';
     /** Function to calculate zIndex for the edge */
     selectEdgeZIndex: (edge: NetworkEdge) => number;
     /** Whether to find edge by source or target */
@@ -862,4 +998,4 @@ declare function useNetworkDiagram(store: NetworkDiagramStore): NetworkDiagramSt
 declare function useNodes(store: NetworkDiagramStore): NetworkNode[];
 declare function useEdges(store: NetworkDiagramStore): NetworkEdge[];
 
-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 };
+export { COUPLERS_PER_PANEL, COUPLER_SLOT_HEIGHT_PX, COUPLER_WIDTH_PX, CableNode, ClosureNode, CouplerNode, DeviceNode, DevicePlacementError, type DevicePlacementValidation, FIBER_COLORS_12, type FiberCable, type FiberColorId, FiberEdge, FiberNode, NetworkDiagram, type NetworkDiagramProps, type NetworkEdge, type NetworkNode, 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, 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, calculateCouplerRightX, calculateCouplerSlotSpacing, calculateCouplerSpacing, calculateDevicePositionFromU, calculatePanelDimensions, calculateSlotPositionFromY, calculateSplicePositionFromNumber, calculateYFromSlotPosition, 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, removeDeviceFromRack, removeSpliceFromTray, replaceEdge, snapToCouplerPosition, snapToSplicePosition, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, updateSpliceHolderPosition, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements, validateSplicePlacements };