@mp70/react-networks 0.1.9-beta → 0.2.0-rc.0

package/dist/index.d.mts

@@ -1,5 +1,182 @@
 import React$1, { Component, ReactNode, ErrorInfo } from 'react';
-import { NodeTypes, EdgeTypes, Connection, Edge, ConnectionMode, FitViewOptions, NodeProps, EdgeProps } from 'reactflow';
+import { Node, NodeTypes, EdgeTypes, Connection, Edge, ConnectionMode, ReactFlowInstance, Viewport, FitViewOptions, NodeProps, EdgeProps } from 'reactflow';
+
+type FibreFlowCableKind = 'simple' | 'tube';
+interface FibreFlowEndpoint {
+    tube?: number;
+    fiber: number;
+}
+interface FibreFlowSplice {
+    id: string;
+    from: FibreFlowEndpoint;
+    to: FibreFlowEndpoint;
+    lossDb?: number;
+    circuitId?: string;
+    label?: string;
+    color?: string;
+}
+interface FibreFlowCable {
+    id: string;
+    label: string;
+    kind?: FibreFlowCableKind;
+    fiberCount?: number;
+    tubeCount?: number;
+    fibersPerTube?: number;
+    tubeStartIndex?: number;
+    fiberStartIndex?: number;
+    tubeColorMap?: Record<number, string>;
+    jacketColor?: string;
+    distanceLabel?: string;
+    distanceMeters?: number;
+}
+interface FibreFlowClosure {
+    id: string;
+    chamberId?: string;
+    leftCable: FibreFlowCable;
+    rightCable: FibreFlowCable;
+    splices: FibreFlowSplice[];
+}
+interface FibreFlowCircuit {
+    id: string;
+    label: string;
+    color?: string;
+}
+
+interface NetBoxDevice {
+    id: number;
+    name: string;
+    device_type: {
+        id: number;
+        model: string;
+        manufacturer: {
+            name: string;
+        };
+    };
+    device_role: {
+        name: string;
+        color: string;
+    };
+    site: {
+        name: string;
+    };
+    rack: {
+        id: number;
+        name: string;
+    } | null;
+    position: number | null;
+    face: 'front' | 'rear' | null;
+    status: {
+        label: string;
+        value: string;
+        color: string;
+    };
+    primary_ip4?: {
+        address: string;
+    };
+    primary_ip6?: {
+        address: string;
+    };
+    interfaces: NetBoxInterface[];
+}
+interface NetBoxInterface {
+    id: number;
+    name: string;
+    type: {
+        label: string;
+        value: string;
+    };
+    enabled: boolean;
+    mac_address: string | null;
+    mtu: number | null;
+    connected_endpoint_type: string | null;
+    connected_endpoint: {
+        device: {
+            id?: number;
+            name: string;
+        };
+        name: string;
+    } | null;
+    cable: {
+        id: number;
+        label: string;
+        type: string;
+        color: string;
+    } | null;
+}
+interface NetBoxRack {
+    id: number;
+    name: string;
+    site: {
+        name: string;
+    };
+    group: {
+        name: string;
+    } | null;
+    tenant: {
+        name: string;
+    } | null;
+    role: {
+        name: string;
+        color: string;
+    } | null;
+    status: {
+        label: string;
+        value: string;
+        color: string;
+    };
+    facility_id: string | null;
+    serial: string | null;
+    asset_tag: string | null;
+    type: {
+        label: string;
+        value: string;
+    };
+    width: {
+        label: string;
+        value: number;
+    };
+    u_height: number;
+    desc_units: boolean;
+    outer_width: number | null;
+    outer_depth: number | null;
+    weight: number | null;
+    max_weight: number | null;
+    weight_unit: string;
+    mounting_depth: number | null;
+    devices: NetBoxDevice[];
+}
+interface NetBoxCable {
+    id: number;
+    label: string;
+    type: {
+        label: string;
+        value: string;
+    };
+    status: {
+        label: string;
+        value: string;
+        color: string;
+    };
+    color: string;
+    length: number | null;
+    length_unit: string;
+    termination_a_type: string;
+    termination_a: {
+        device: {
+            id?: number;
+            name: string;
+        };
+        name: string;
+    };
+    termination_b_type: string;
+    termination_b: {
+        device: {
+            id?: number;
+            name: string;
+        };
+        name: string;
+    };
+}
 
 /**
  * Rack device width configuration
@@ -21,6 +198,47 @@ declare enum Width {
  * @public
  */
 type PortType = 'ethernet' | 'fiber' | 'console' | 'mgmt' | 'usb' | 'power_ac' | 'power_c13' | 'power_c19';
+/**
+ * Cable types used for connected network ports.
+ * @public
+ */
+type PortCableType = 'smf' | 'cat6' | 'om3' | 'om4' | 'om5' | 'cat5e' | 'cat6a' | 'cat7' | 'fiber' | 'ethernet';
+/**
+ * Device image fit options.
+ *
+ * Values mirror object-fit terms for API ergonomics and are mapped to valid
+ * background-size values by renderers where needed.
+ *
+ * @public
+ */
+type DeviceImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+/**
+ * Device image repeat options.
+ * @public
+ */
+type DeviceImageRepeat = 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y';
+/**
+ * Shared image configuration for rack-mounted devices and device nodes.
+ * @public
+ */
+interface DeviceImageOptions {
+    /** Optional front image URL for device background (PNG, SVG, JPEG, etc.) */
+    frontImageUrl?: string;
+    /** Optional rear image URL for device background (PNG, SVG, JPEG, etc.) */
+    rearImageUrl?: string;
+    /** Optional attribution URL for front image (e.g. source/license link) */
+    frontImageAttribution?: string;
+    /** Optional attribution URL for rear image (e.g. source/license link) */
+    rearImageAttribution?: string;
+    /** Optional background sizing for device images */
+    imageFit?: DeviceImageFit;
+    /** Optional background position for device images */
+    imagePosition?: string;
+    /** Optional background repeat for device images */
+    imageRepeat?: DeviceImageRepeat;
+    /** When true, stretch device image to fill the device bounds (overrides imageFit) */
+    stretchToFit?: boolean;
+}
 interface Port {
     /** Display label for the port */
     label: string;
@@ -29,7 +247,7 @@ interface Port {
     /** Type of port for styling and validation */
     type?: PortType;
     /** Cable type for connection validation */
-    cableType?: 'smf' | 'cat6' | 'om3' | 'om4' | 'om5' | 'cat5e' | 'cat6a' | 'cat7' | 'fiber' | 'ethernet';
+    cableType?: PortCableType;
 }
 /**
  * Group of related ports on a device
@@ -67,119 +285,287 @@ type PowerSide = 'left' | 'right';
  */
 type UNumberingDirection = 'bottom-up' | 'top-down';
 /**
- * Network node data structure
+ * Shared node data fields available across node types.
+ * Specific node kinds can narrow these fields via `NetworkNodeDataByType`.
  * @public
  */
-interface NetworkNode {
-    /** Unique identifier for the node */
-    id: string;
+interface NetworkNodeDataBase extends DeviceImageOptions {
+    /** Display label for the node */
+    label: string;
+    /** Current status of the node/device */
+    status?: DeviceStatus | string;
+    /** Port configurations for device-like nodes */
+    ports?: PortBlock[] | number;
+    /** Rear port configurations */
+    rearPorts?: PortBlock[];
+    /** List of connected node IDs */
+    connections?: string[];
+    /** NetBox integration ID */
+    netboxId?: number | string;
+    /** NetBox object type */
+    netboxType?: 'device' | 'rack' | 'interface' | 'cable' | string;
+    /** Inventory integration ID */
+    inventoryId?: number | string;
+    /** Inventory object type */
+    inventoryType?: 'device' | 'rack' | 'interface' | 'cable' | string;
+    /** Rack height in U units */
+    uHeight?: number;
+    /** Device position within rack in U units */
+    uPosition?: number;
+    /** Current front/rear view orientation */
+    view?: DeviceView;
+    /** Rack face orientation */
+    face?: DeviceView;
+    /** Device type specification */
+    deviceType?: string;
+    /** Device manufacturer */
+    manufacturer?: string;
+    /** Device role in network */
+    role?: string;
+    /** Device width configuration */
+    width?: Width | number;
+    /** Power port side for rear view */
+    powerSide?: PowerSide;
+    /** Vertical PDU height in centimeters */
+    heightCm?: number;
+    /** Number of AC power ports */
+    powerPorts?: number;
+    /** Vertical PDU width in pixels */
+    widthPx?: number;
+    /** Optional management unit position for vertical PDUs */
+    mgmt_unit?: 'top' | 'middle' | 'bottom';
+    /** U numbering direction for rack nodes */
+    uNumberingDirection?: UNumberingDirection;
+    /** Custom header text for rack nodes */
+    customHeaderText?: string;
+    /** Rack UI marker visibility */
+    showUMarkers?: boolean;
+    /** Holder position within tray (1-12) for splice nodes */
+    holderPosition?: number;
+    /** Loss value in dB for splice nodes */
+    lossDb?: number;
+    /** Splice mode */
+    mode?: 'single' | 'ribbon';
+    /** Legacy ribbon flag */
+    ribbon?: boolean;
+    /** Ribbon fiber IDs */
+    ribbonFiberIds?: 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 panel-like container nodes */
+    panelWidth?: number;
+    /** Height override for panel-like container nodes */
+    panelHeight?: number;
+    /** Width override for closure nodes */
+    closureWidth?: number;
+    /** Height override for closure nodes */
+    closureHeight?: number;
+    /** Optional rack width in pixels (for rack nodes, default: 300px) */
+    rackWidthPx?: number;
+    /** Number of rows for container nodes (patch-panel, closure) */
+    rows?: number;
+    /** Number of columns for container nodes (patch-panel, closure) */
+    cols?: number;
+    /** Number of trays for closure nodes */
+    trayCount?: number;
+    /** Header text for container nodes */
+    header?: string;
+    /** Type of fibre splitter: 'splitter' or 'WDM' (default: 'splitter') */
+    splitterType?: 'splitter' | 'WDM';
+    /** Number of input fibers on the left (1 or 2, default: 1) */
+    inputCount?: number;
+    /** Number of output fibers on the right (1-64, default: 8) */
+    outputCount?: number;
+    /** Tube index (1-based) */
+    tubeIndex?: number;
+    /** Tube count for multi-tube cables */
+    tubeCount?: number;
+    /** Tube start index for multi-tube cables */
+    tubeStartIndex?: number;
+    /** Number of fibers per tube */
+    fibersPerTube?: number;
+    /** Total fiber count for cables */
+    fiberCount?: number;
+    /** Cable identifier */
+    cableId?: string;
+    /** Primary node color override */
+    color?: string;
+    /** Rotation in degrees for rotatable nodes */
+    rotation?: number;
+    /** Tube handle orientation */
+    startOn?: 'left-center' | 'left' | 'right';
+    /** Rack metadata for integrations */
+    facilityId?: string | number | null;
+    /** Rack serial metadata */
+    serial?: string | null;
+    /** Asset tag metadata */
+    assetTag?: string | null;
+    /** Site metadata */
+    site?: string;
+    /** Tenant metadata */
+    tenant?: string;
+    /** Primary IPv4 metadata */
+    primaryIp4?: string;
+    /** Primary IPv6 metadata */
+    primaryIp6?: string;
+    /** Rack name metadata */
+    rack?: string | number | null;
+    /** Optional arrays used by inventory/netbox transforms */
+    racks?: unknown[];
+    devices?: unknown[];
+    cables?: unknown[];
+    /** UI color mode metadata */
+    colorMode?: 'light' | 'dark' | 'system';
+    /** Generic dimensions used by some helpers */
+    height?: number;
+    headerHeight?: number;
+    /** Optional precomputed map for handle-to-face resolution */
+    handleSideMap?: Record<string, DeviceView>;
+    /** Additional extension metadata */
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Rack node data.
+ * @public
+ */
+interface RackNodeData extends NetworkNodeDataBase {
+    ports?: number | PortBlock[];
+}
+/**
+ * Device-like node data (servers/switches/routers/generic device).
+ * @public
+ */
+interface DeviceNodeData extends NetworkNodeDataBase {
+    ports?: PortBlock[] | number;
+}
+/**
+ * Fibre flow cable node data.
+ * @public
+ */
+interface FibreFlowCableNodeData extends NetworkNodeDataBase {
+    cable: FibreFlowCable;
+    side: 'left' | 'right';
+    rowHeight: number;
+    columnWidth: number;
+    showTubeLabels: boolean;
+    showFiberNumbers: boolean;
+    layout: unknown;
+    colorMode?: 'dark' | 'light';
+}
+/**
+ * Fibre flow closure node data.
+ * @public
+ */
+interface FibreFlowClosureNodeData extends NetworkNodeDataBase {
+    width?: number;
+    height?: number;
+    headerHeight?: number;
+    colorMode?: 'dark' | 'light';
+}
+/**
+ * Mapping from node type to corresponding data type.
+ * @public
+ */
+interface NetworkNodeDataByType {
+    rack: RackNodeData;
+    switch: DeviceNodeData;
+    router: DeviceNodeData;
+    server: DeviceNodeData;
+    fiber: NetworkNodeDataBase;
+    'patch-panel': NetworkNodeDataBase;
+    device: DeviceNodeData;
+    'vertical-pdu': NetworkNodeDataBase;
+    splice: NetworkNodeDataBase;
+    'splice-tray': NetworkNodeDataBase;
+    tube: NetworkNodeDataBase;
+    cable: NetworkNodeDataBase;
+    'multi-tube-cable': NetworkNodeDataBase;
+    coupler: NetworkNodeDataBase;
+    closure: NetworkNodeDataBase;
+    'fibre-split': NetworkNodeDataBase;
+    'fibre-flow-cable': FibreFlowCableNodeData;
+    'fibre-flow-closure': FibreFlowClosureNodeData;
+}
+/**
+ * Union of all node data variants.
+ * @public
+ */
+type NetworkNodeData = NetworkNodeDataByType[NetworkNodeType];
+/**
+ * Network node structure with data discriminated by `type`.
+ * @public
+ */
+type NetworkNode<TType extends NetworkNodeType = NetworkNodeType, TExtra = unknown> = TType extends NetworkNodeType ? Node<NetworkNodeDataByType[TType] & TExtra, TType> & {
     /** Type of network node */
-    type: NetworkNodeType;
-    /** Position coordinates in the diagram */
-    position: {
-        x: number;
-        y: number;
-    };
-    /** Parent node ID for React Flow sub-flows */
-    parentId?: string;
-    /** Node extent for sub-flows */
-    extent?: 'parent' | [[number, number], [number, number]];
+    type: TType;
     /** Node data and configuration */
-    data: {
-        /** Display label for the node */
-        label: string;
-        /** Port configurations for the device */
-        ports?: PortBlock[];
-        /** List of connected node IDs */
-        connections?: string[];
-        /** Current status of the device */
-        status?: DeviceStatus;
-        /** NetBox integration ID */
-        netboxId?: number;
-        /** NetBox object type */
-        netboxType?: 'device' | 'rack' | 'interface' | 'cable';
-        /** Rack height in U units */
-        uHeight?: number;
-        /** Device position within rack in U units */
-        uPosition?: number;
-        /** Current view orientation */
-        view?: DeviceView;
-        /** Device type specification */
-        deviceType?: string;
-        /** Device manufacturer */
-        manufacturer?: string;
-        /** Device role in network */
-        role?: string;
-        /** Device width configuration */
-        width?: Width;
-        /** Rear port configurations */
-        rearPorts?: PortBlock[];
-        /** Power port side for rear view */
-        powerSide?: PowerSide;
-        /** Optional front image URL for device background */
-        frontImageUrl?: string;
-        /** Optional rear image URL for device background */
-        rearImageUrl?: string;
-        /** Optional background sizing for device images */
-        imageFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-        /** Optional background position for device images */
-        imagePosition?: string;
-        /** Optional background repeat for device images */
-        imageRepeat?: 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y';
-        /** Vertical PDU height in centimeters */
-        heightCm?: number;
-        /** Number of AC power ports */
-        powerPorts?: number;
-        /** U numbering direction for rack nodes */
-        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;
-        /** 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;
-        /** Optional rack width in pixels (for rack nodes, default: 300px) */
-        rackWidthPx?: 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;
-        /** Type of fibre splitter: 'splitter' or 'WDM' (default: 'splitter') */
-        splitterType?: 'splitter' | 'WDM';
-        /** Number of input fibers on the left (1 or 2, default: 1) */
-        inputCount?: number;
-        /** Number of output fibers on the right (1-64, default: 8) */
-        outputCount?: number;
-        /** Additional custom properties */
-        [key: string]: any;
-    };
-}
+    data: NetworkNodeDataByType[TType] & TExtra;
+} : never;
 /**
  * Network edge types
  * @public
  */
 type NetworkEdgeType = 'fiber' | 'ethernet' | 'power' | 'smoothstep' | 'step' | 'thick-cable' | 'fibre-flow' | 'fibre-flow-link';
+/**
+ * Edge data payload.
+ * @public
+ */
+interface NetworkEdgeData {
+    /** Connection bandwidth */
+    bandwidth?: string;
+    /** Cable length */
+    length?: number;
+    /** Edge color for styling */
+    color?: string;
+    /** Edge kind for styling/validation */
+    kind?: 'fiber' | 'power' | 'network';
+    /** Whether this edge represents a ribbon fiber connection */
+    isRibbon?: boolean;
+    /** Array of fiber IDs for ribbon mode (6-12 fibers) */
+    ribbonFiberIds?: number[];
+    /** Highlight edge with a pulsing stroke */
+    highlight?: boolean;
+    /** Override highlight color (defaults to edge color) */
+    highlightColor?: string;
+    /** Override highlight max stroke width */
+    highlightWidth?: number;
+    /** Optional tag for grouping edges in demos */
+    traceTag?: string;
+    /** Legacy striped edge flag */
+    striped?: boolean;
+    /** Cable type metadata used by demos/helpers */
+    cableType?: PortCableType;
+    /** NetBox integration metadata */
+    netboxId?: number | string;
+    netboxType?: 'device' | 'rack' | 'interface' | 'cable' | string;
+    /** Inventory integration metadata */
+    inventoryId?: number | string;
+    inventoryType?: 'device' | 'rack' | 'interface' | 'cable' | string;
+    /** Status metadata */
+    status?: string;
+    /** Endpoint metadata */
+    terminationA?: string;
+    terminationB?: string;
+    /** Optional display label for the edge */
+    label?: string;
+    /** Optional opacity for styling (0–1) */
+    opacity?: number;
+    /** Additional extension metadata */
+    metadata?: Record<string, unknown>;
+}
 /**
  * Network edge data structure
  * @public
  */
-interface NetworkEdge {
+type NetworkEdge<TData extends NetworkEdgeData = NetworkEdgeData> = {
     /** Unique identifier for the edge */
     id: string;
     /** Source node ID */
@@ -193,31 +579,8 @@ interface NetworkEdge {
     /** Type of network connection */
     type?: NetworkEdgeType;
     /** Edge data and configuration */
-    data?: {
-        /** Connection bandwidth */
-        bandwidth?: string;
-        /** Cable length */
-        length?: number;
-        /** Edge color for styling */
-        color?: string;
-        /** Edge kind for styling/validation */
-        kind?: 'fiber' | 'power' | 'network';
-        /** Whether this edge represents a ribbon fiber connection */
-        isRibbon?: boolean;
-        /** Array of fiber IDs for ribbon mode (6-12 fibers) */
-        ribbonFiberIds?: number[];
-        /** Highlight edge with a pulsing stroke */
-        highlight?: boolean;
-        /** Override highlight color (defaults to edge color) */
-        highlightColor?: string;
-        /** Override highlight max stroke width */
-        highlightWidth?: number;
-        /** Optional tag for grouping edges in demos */
-        traceTag?: string;
-        /** Additional custom properties */
-        [key: string]: any;
-    };
-}
+    data?: TData;
+};
 /**
  * Rack device types
  * @public
@@ -252,7 +615,7 @@ interface RackConfig {
  * Device mounted in a rack
  * @public
  */
-interface RackDevice {
+interface RackDevice extends DeviceImageOptions {
     /** Unique device identifier */
     id: string;
     /** Device display name */
@@ -267,22 +630,14 @@ interface RackDevice {
     width?: Width;
     /** Device role in network */
     role?: string;
+    /** Current status of the device */
+    status?: DeviceStatus | string;
     /** Front port configurations */
     ports?: PortBlock[];
     /** Rear port configurations */
     rearPorts?: PortBlock[];
     /** Power port side for rear view */
     powerSide?: PowerSide;
-    /** Optional front image URL for device background */
-    frontImageUrl?: string;
-    /** Optional rear image URL for device background */
-    rearImageUrl?: string;
-    /** Optional background sizing for device images */
-    imageFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-    /** Optional background position for device images */
-    imagePosition?: string;
-    /** Optional background repeat for device images */
-    imageRepeat?: 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y';
     /** Connected device IDs */
     connections?: string[];
 }
@@ -349,6 +704,139 @@ interface SpliceTrayConfig {
     /** Splices in this tray */
     splices: SpliceConfig[];
 }
+/**
+ * Fine-grained interaction controls for network diagrams.
+ * @public
+ */
+interface NetworkDiagramInteractionOptions {
+    /** Enable node dragging. */
+    nodesDraggable?: boolean;
+    /** Enable creating connections from node handles. */
+    nodesConnectable?: boolean;
+    /** Enable selecting nodes/edges. */
+    elementsSelectable?: boolean;
+    /** Enable keyboard/mouse focus on edges. */
+    edgesFocusable?: boolean;
+    /** Enable reconnecting existing edges. */
+    edgesReconnectable?: boolean;
+    /** Enable click-to-connect behavior on handles. */
+    connectOnClick?: boolean;
+    /** Enable panning by dragging the canvas. */
+    panOnDrag?: boolean;
+    /** Enable panning by scrolling. */
+    panOnScroll?: boolean;
+    /** Enable zoom via mouse wheel/trackpad scroll. */
+    zoomOnScroll?: boolean;
+    /** Enable pinch-zoom gestures. */
+    zoomOnPinch?: boolean;
+    /** Enable zoom on double click. */
+    zoomOnDoubleClick?: boolean;
+    /** Enable deleting selected edges with keyboard keys. */
+    allowKeyboardDelete?: boolean;
+    /** Show or hide the built-in React Flow controls widget. */
+    showControls?: boolean;
+    /** Show or hide the minimap. */
+    showMiniMap?: boolean;
+    /** Show or hide the interactive lock/unlock button in controls. */
+    showInteractiveControl?: boolean;
+}
+/**
+ * Selection action panel options rendered above selected racks/devices.
+ * @public
+ */
+interface NetworkDiagramActionPanelOptions {
+    /** Enable or disable the floating action panel entirely. Defaults to true. */
+    enabled?: boolean;
+    /** Show or hide the front/rear toggle button. Defaults to true. */
+    showRearToggle?: boolean;
+    /** Show or hide the De-rack button for rack-mounted devices. Defaults to true. */
+    showDeRack?: boolean;
+}
+/**
+ * Serializable flow snapshot payload for save/restore helpers.
+ * @public
+ */
+interface NetworkDiagramFlowObject {
+    /** Snapshot nodes */
+    nodes: NetworkNode[];
+    /** Snapshot edges */
+    edges: NetworkEdge[];
+    /** Optional viewport state */
+    viewport?: Viewport;
+}
+/**
+ * Options for exported diagram images.
+ * @public
+ */
+interface NetworkDiagramToImageOptions {
+    /** Export width in px (clamped to 1-8192). */
+    width?: number;
+    /** Export height in px (clamped to 1-8192). */
+    height?: number;
+    backgroundColor?: string;
+    /** Export padding in px (clamped to 0-2048). */
+    padding?: number;
+    /** Device pixel ratio multiplier (clamped to 0.1-4). */
+    pixelRatio?: number;
+    /** JPEG/WebP quality (clamped to 0-1 when used). */
+    quality?: number;
+    filter?: (domNode: HTMLElement) => boolean;
+}
+/**
+ * Fit-view options that support targeting node IDs directly.
+ * @public
+ */
+interface NetworkDiagramFitViewOptions extends Omit<FitViewOptions, 'nodes'> {
+    /** Optional node IDs to fit */
+    nodes?: string[];
+}
+/**
+ * Exposed methods for save/restore and export integrations.
+ * @public
+ */
+interface NetworkDiagramFlowMethods {
+    toObject: () => NetworkDiagramFlowObject;
+    setViewport: (viewport: Viewport) => void;
+    setNodes: (nodes: NetworkNode[]) => void;
+    setEdges: (edges: NetworkEdge[]) => void;
+    toImage: (options?: NetworkDiagramToImageOptions) => Promise<string>;
+    getNodes: () => NetworkNode[];
+    getEdges: () => NetworkEdge[];
+    fitView: (options?: NetworkDiagramFitViewOptions) => void;
+}
+/**
+ * Store contract accepted by `NetworkDiagram`.
+ * @public
+ */
+interface NetworkDiagramStoreApi {
+    getState: () => {
+        nodes: NetworkNode[];
+        edges: NetworkEdge[];
+        debug?: boolean;
+    };
+    setState: (partial: Partial<{
+        nodes: NetworkNode[];
+        edges: NetworkEdge[];
+        debug?: boolean;
+    }>) => void;
+    subscribe: (listener: (state: {
+        nodes: NetworkNode[];
+        edges: NetworkEdge[];
+        debug?: boolean;
+    }) => void) => () => void;
+    selectEdgeZIndex: (edge: NetworkEdge) => number;
+    validateConnection: (params: {
+        source: string | null;
+        target: string | null;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+    }) => {
+        valid: boolean;
+        reason?: string;
+    };
+    selectNodeById: (id: string) => NetworkNode | undefined;
+    selectConnectedEdges: (nodeId: string) => NetworkEdge[];
+}
 /**
  * Network diagram component props
  * @public
@@ -367,7 +855,7 @@ interface NetworkDiagramProps {
     /** Initial edges for uncontrolled mode */
     initialEdges?: NetworkEdge[];
     /** Headless store injection */
-    store?: any;
+    store?: NetworkDiagramStoreApi;
     /** Enable debug mode */
     debug?: boolean;
     /** Callback when a node is clicked or selection changes (null when deselected) */
@@ -396,21 +884,14 @@ interface NetworkDiagramProps {
     style?: React.CSSProperties;
     /** If true, vertically align rack bottoms to the same baseline */
     alignRacksToBottom?: boolean;
+    /** Allow rack-mounted devices to move between racks/ungroup on drag and drop. Defaults to true. */
+    reAssignable?: boolean;
     /** Color mode for the diagram */
     colorMode?: 'light' | 'dark' | 'system';
     /** Callback when React Flow instance is initialized */
-    onInit?: (instance: any) => void;
+    onInit?: (instance: ReactFlowInstance) => void;
     /** Callback to get React Flow methods for save/restore */
-    onFlowMethods?: (methods: {
-        toObject: () => any;
-        setViewport: (viewport: any) => void;
-        setNodes: (nodes: any[]) => void;
-        setEdges: (edges: any[]) => void;
-        toImage: (options?: any) => Promise<string>;
-        getNodes: () => any[];
-        getEdges: () => any[];
-        fitView: (options?: any) => void;
-    }) => void;
+    onFlowMethods?: (methods: NetworkDiagramFlowMethods) => void;
     /** Show download button */
     showDownloadButton?: boolean;
     /** Download button position */
@@ -421,6 +902,12 @@ interface NetworkDiagramProps {
     downloadButtonStyle?: React.CSSProperties;
     /** Use smoothstep edges for tube connections (both tube-to-cable and cable-to-tube). Default is fiber. */
     useSmoothstepEdgesForTubes?: boolean;
+    /** Force read-only behavior for the diagram (no drag/connect/delete/reconnect/pan/zoom edits). */
+    readOnly?: boolean;
+    /** Centralized interaction options for consistent edit/lock behavior. */
+    interaction?: NetworkDiagramInteractionOptions;
+    /** Configuration for the floating action panel shown on selected rack/device nodes. */
+    actionPanel?: NetworkDiagramActionPanelOptions;
     /** Enable connecting edges by clicking on handles. When true, increases handle sizes for better touch targets. Default is true. */
     connectOnClick?: boolean;
     /** Disable panning on drag. Default is false. */
@@ -638,47 +1125,6 @@ declare const ClosureNode: React$1.FC<NodeProps<NetworkNode['data']>>;
  */
 declare const FibreSplitNode: React$1.FC<NodeProps<NetworkNode['data']>>;
 
-type FibreFlowCableKind = 'simple' | 'tube';
-interface FibreFlowEndpoint {
-    tube?: number;
-    fiber: number;
-}
-interface FibreFlowSplice {
-    id: string;
-    from: FibreFlowEndpoint;
-    to: FibreFlowEndpoint;
-    lossDb?: number;
-    circuitId?: string;
-    label?: string;
-    color?: string;
-}
-interface FibreFlowCable {
-    id: string;
-    label: string;
-    kind?: FibreFlowCableKind;
-    fiberCount?: number;
-    tubeCount?: number;
-    fibersPerTube?: number;
-    tubeStartIndex?: number;
-    fiberStartIndex?: number;
-    tubeColorMap?: Record<number, string>;
-    jacketColor?: string;
-    distanceLabel?: string;
-    distanceMeters?: number;
-}
-interface FibreFlowClosure {
-    id: string;
-    chamberId?: string;
-    leftCable: FibreFlowCable;
-    rightCable: FibreFlowCable;
-    splices: FibreFlowSplice[];
-}
-interface FibreFlowCircuit {
-    id: string;
-    label: string;
-    color?: string;
-}
-
 type FibreFlowLayoutDirection = 'horizontal' | 'vertical';
 type FibreFlowColorMode = 'dark' | 'light';
 interface FibreFlowMapProps {
@@ -697,6 +1143,7 @@ interface FibreFlowMapProps {
     showCircuitId?: boolean;
     className?: string;
     style?: React$1.CSSProperties;
+    readOnly?: boolean;
     panOnDrag?: boolean;
     panOnScroll?: boolean;
     zoomOnScroll?: boolean;
@@ -845,6 +1292,34 @@ declare const inventoryToNetworkDiagram: (data: {
  */
 declare const generateLayout: (nodes: NetworkNode[]) => NetworkNode[];
 
+/**
+ * Convert NetBox rack data to NetworkNode
+ */
+declare const netboxRackToNetworkNode: (rack: NetBoxRack) => NetworkNode;
+/**
+ * Convert NetBox device data to NetworkNode
+ */
+declare const netboxDeviceToNetworkNode: (device: NetBoxDevice) => NetworkNode;
+/**
+ * Convert NetBox cable data to NetworkEdge
+ */
+declare const netboxCableToNetworkEdge: (cable: NetBoxCable) => NetworkEdge;
+/**
+ * Convert NetBox data to network diagram format
+ */
+declare const netboxToNetworkDiagram: (data: {
+    racks: NetBoxRack[];
+    devices: NetBoxDevice[];
+    cables: NetBoxCable[];
+}) => {
+    nodes: NetworkNode[];
+    edges: NetworkEdge[];
+};
+/**
+ * Calculate U position for devices in a rack
+ */
+declare const calculateUPositions: (devices: NetBoxDevice[], _rackHeight: number) => Map<number, number>;
+
 /**
  * Snap a device position to the nearest U position within a rack
  */
@@ -874,11 +1349,11 @@ declare const calculateDevicePositionFromU: (rack: NetworkNode, uPosition: numbe
 /**
  * Update device U position and recalculate position
  */
-declare const updateDeviceUPosition$1: (device: NetworkNode, rack: NetworkNode, newUPosition: number) => NetworkNode;
+declare const updateDeviceUPosition$1: (device: NetworkNode<"device" | "server" | "switch" | "router" | "patch-panel" | "vertical-pdu">, rack: NetworkNode, newUPosition: number) => NetworkNode<"device" | "server" | "switch" | "router" | "patch-panel" | "vertical-pdu">;
 /**
  * Validate and snap device to valid U position
  */
-declare const validateAndSnapDevice: (device: NetworkNode, rack: NetworkNode) => NetworkNode;
+declare const validateAndSnapDevice: (device: NetworkNode<"device" | "server" | "switch" | "router" | "patch-panel" | "vertical-pdu">, rack: NetworkNode) => NetworkNode<"device" | "server" | "switch" | "router" | "patch-panel" | "vertical-pdu">;
 
 /**
  * Snap a splice to the nearest holder position within a tray
@@ -1115,7 +1590,31 @@ declare function calculateCouplerSpacing(numCouplers: number, couplerHeight: num
  * @public
  */
 declare function calculateCouplerSlotSpacing(numCouplers: number, couplerHeight: number, availableHeight: number): number;
+/**
+ * Calculate closure dimensions based on child nodes
+ *
+ * Automatically calculates the width and height of a closure based on its child nodes.
+ * Supports special layouts for closures with tubes and trays.
+ * Closure layout: [padding] [left tubes] [spacing] [trays] [spacing] [right tubes] [padding]
+ *
+ * @param closureNode - The closure node
+ * @param childNodes - Array of child nodes within the closure
+ * @returns Object with calculated width and height in pixels
+ * @public
+ *
+ * @example
+ * ```ts
+ * const closure = { id: 'closure-1', type: 'closure', data: {} };
+ * const children = [leftTubeNode, trayNode, rightTubeNode];
+ * const dims = calculateClosureDimensions(closure, children);
+ * ```
+ */
+declare function calculateClosureDimensions(closureNode: NetworkNode, childNodes: NetworkNode[]): {
+    width: number;
+    height: number;
+};
 
+type RackMountedNodeType = 'device' | 'server' | 'switch' | 'router' | 'patch-panel' | 'vertical-pdu';
 /**
  * Configuration options for building nodes from rack schema
  */
@@ -1125,7 +1624,7 @@ interface RackSchemaOptions {
     /** Whether to validate all placements before creating nodes */
     validatePlacements?: boolean;
     /** Custom device type mapping from schema to NetworkNode type */
-    deviceTypeMapping?: Record<string, NetworkNode['type']>;
+    deviceTypeMapping?: Record<string, RackMountedNodeType>;
 }
 /**
  * Error thrown when device placement conflicts occur in strict mode
@@ -1427,7 +1926,7 @@ declare function fiberSolidOrStriped(id: FiberColorId | number): React$1.CSSProp
 declare function getFiberColor(id: FiberColorId | number): string;
 
 /**
- * Calculate the bounding box of a rack node
+ * Calculate the bounding box of a rack node (header + body)
  * @param rack - The rack node
  * @returns Object with left, right, top, and bottom coordinates
  * @public
@@ -1483,8 +1982,10 @@ interface ReplaceEdgeOptions {
     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 */
+    /** Which end of the connection to use (source or target) for finding the edge */
     findBy: 'source' | 'target';
+    /** Which end of the existing edge to match against. Defaults to findBy. Use 'source' when the connection's target handle is on the edge's source (e.g. replacing switch connection when dragging from server to switch) */
+    matchOn?: 'source' | 'target';
     /** Optional edge data to set on the new edge */
     data?: NetworkEdge['data'];
 }
@@ -1507,6 +2008,8 @@ interface ValidateConnectionParams {
     target: string | null;
     sourceHandle?: string | null;
     targetHandle?: string | null;
+    /** Optional edge id to ignore during occupancy checks (used for reconnect). */
+    ignoreEdgeId?: string;
 }
 interface ValidationResult {
     valid: boolean;
@@ -1530,4 +2033,4 @@ declare function useNetworkDiagram(store: NetworkDiagramStore): NetworkDiagramSt
 declare function useNodes(store: NetworkDiagramStore): NetworkNode[];
 declare function useEdges(store: NetworkDiagramStore): NetworkEdge[];
 
-export { COUPLERS_PER_PANEL, COUPLER_SLOT_HEIGHT_PX, COUPLER_WIDTH_PX, CableNode, ClosureNode, CouplerNode, DeviceNode, DevicePlacementError, type DevicePlacementValidation, DiagramErrorBoundary, type DiagramErrorBoundaryProps, FIBER_COLORS_12, type FiberCable, type FiberColorId, FiberEdge, FiberNode, FibreCableWithTubesExpanded, type FibreFlowCable, type FibreFlowCableKind, type FibreFlowCircuit, type FibreFlowClosure, type FibreFlowEndpoint, FibreFlowMap, type FibreFlowMapProps, type FibreFlowSplice, FibreSplitNode, HANDLE_EXTENSION_PX, MultiTubeCableNode, 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, type PortType, PowerEdge, RACK_HEADER_HEIGHT, RACK_WIDTH_PX, type RackConfig, type RackDevice, RackNode, type RackSchemaOptions, type ReplaceEdgeOptions, type SpliceConfig, SpliceNode, SplicePlacementError, type SplicePlacementValidation, type SpliceSchemaOptions, type SpliceTrayConfig, SpliceTrayNode, TubeNode, U_HEIGHT_PX, 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 };
+export { COUPLERS_PER_PANEL, COUPLER_SLOT_HEIGHT_PX, COUPLER_WIDTH_PX, CableNode, ClosureNode, CouplerNode, type DeviceImageFit, type DeviceImageOptions, type DeviceImageRepeat, DeviceNode, DevicePlacementError, type DevicePlacementValidation, DiagramErrorBoundary, type DiagramErrorBoundaryProps, FIBER_COLORS_12, type FiberCable, type FiberColorId, FiberEdge, FiberNode, FibreCableWithTubesExpanded, type FibreFlowCable, type FibreFlowCableKind, type FibreFlowCableNodeData, type FibreFlowCircuit, type FibreFlowClosure, type FibreFlowClosureNodeData, type FibreFlowEndpoint, FibreFlowMap, type FibreFlowMapProps, type FibreFlowSplice, FibreSplitNode, HANDLE_EXTENSION_PX, MultiTubeCableNode, NetworkDiagram, type NetworkDiagramFitViewOptions, type NetworkDiagramFlowMethods, type NetworkDiagramFlowObject, type NetworkDiagramOptions, type NetworkDiagramProps, type NetworkDiagramStoreApi, type NetworkDiagramToImageOptions, type NetworkEdge, type NetworkEdgeData, type NetworkNode, type NetworkNodeData, type NetworkNodeDataBase, type NetworkNodeDataByType, PANEL_BORDER_WIDTH, PANEL_HEADER_HEIGHT, PANEL_HEIGHT_PX, PANEL_PADDING, PANEL_TUBE_TRAY_SPACING, PANEL_WIDTH_PX, POWER_CONNECTORS, PatchPanelNode, type Port, type PortBlock, type PortCableType, type PortType, PowerEdge, RACK_HEADER_HEIGHT, RACK_WIDTH_PX, type RackConfig, type RackDevice, RackNode, type RackSchemaOptions, type ReplaceEdgeOptions, type SpliceConfig, SpliceNode, SplicePlacementError, type SplicePlacementValidation, type SpliceSchemaOptions, type SpliceTrayConfig, SpliceTrayNode, TubeNode, U_HEIGHT_PX, type ValidateConnectionParams, type ValidationResult, VerticalPDU, Width, addDeviceToRack, addSpliceToTray, baseColorFor, buildNodesFromRackConfig, buildNodesFromSpliceConfig, calculateClosureDimensions, calculateCouplerRightX, calculateCouplerSlotSpacing, calculateCouplerSpacing, calculateDevicePositionFromU, calculatePanelDimensions, calculateSlotPositionFromY, calculateSplicePositionFromNumber, calculateUPositions, calculateYFromSlotPosition, createNetworkDiagramStore, createRackConfigFromNodes, createSpliceConfigFromNodes, fiberSolidOrStriped, findNearestRack, findNextAvailableHolderPosition, findNextAvailableUPosition, generateLayout, getConnectorConfig, getCouplerDimensions, getDeviceConnectorType, getFiberColor, getInnerContentWidth, getPDUPortType, getPanelHeight, getPanelWidth, getPowerPortStyle, getRackBounds, getStatusColor, getTrayDimensions, getTubeDimensions, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToNetworkDiagram, isHighPowerConnector, isPointInRack, isStriped, isUPositionAvailable, netboxCableToNetworkEdge, netboxDeviceToNetworkNode, netboxRackToNetworkNode, netboxToNetworkDiagram, removeDeviceFromRack, removeSpliceFromTray, replaceEdge, snapToCouplerPosition, snapToSplicePosition, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, updateSpliceHolderPosition, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements, validateSplicePlacements };