@mp70/react-networks 0.1.9-beta → 0.2.0-beta.1

package/README.md

@@ -1,10 +1,10 @@
 # @mp70/react-networks
 
-[![npm version](https://badge.fury.io/js/%40mp70%2Freact-networks.svg)](https://badge.fury.io/js/%40mp70%2Freact-networks)
-[![License: AGPL v3](https://img.shields.io/badge/License-AGPLv3-blue.svg)](https://www.gnu.org/licenses/agpl-3.0)
-[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![npm version](https://img.shields.io/npm/v/@mp70/react-networks.svg)](https://www.npmjs.com/package/@mp70/react-networks)
+[![license](https://img.shields.io/npm/l/@mp70/react-networks.svg)](https://www.npmjs.com/package/@mp70/react-networks)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
 
-A production-ready React library for creating interactive network diagrams with support for rack management, fiber networks, and power distribution. Built on React Flow with TypeScript support.
+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.
 
 ## Features
 
@@ -13,6 +13,7 @@ A production-ready React library for creating interactive network diagrams with
 - **Fiber Networks**: Visual representation of fiber connections and patch panels
 - **Power Distribution**: Vertical PDU support with power connections
 - **View Switching**: Front/rear view switching for devices and racks
+- **Device Images**: Front/rear device images supported (PNG, SVG, JPEG, etc.) via `frontImageUrl` / `rearImageUrl`
 - **Rack Alignment**: Align rack bottoms to the same horizontal plane
 - **Inventory Integration**: Built-in helpers to import/export generic inventory/CMDB data
 - **Customizable**: Extensive styling and theming options
@@ -89,10 +90,8 @@ export default App;
 
 ### Documentation Resources
 
-- 📖 [Main Project README](../../README.md) - Project overview and quick start
-- 📚 [API Documentation](docs/API.md) - Complete API reference
-- 🌐 [Documentation Site](../docs/) - Interactive documentation with live examples
-- 📝 [Contributing Guide](CONTRIBUTING.md) - Development guidelines
+- Main Project README: `../../README.md` - Project overview and quick start
+- Contributing Guide: `CONTRIBUTING.md` - Development guidelines
 
 ### API Reference
 
@@ -127,7 +126,6 @@ export default App;
 - [`removeSpliceFromTray`](#removesplicefromtray) - Remove splice from tray schema
 
 **Data Integration:**
-- [`netboxToNetworkDiagram`](#netboxtonetworkdiagram) - Convert NetBox data to diagram
 - [`inventoryToNetworkDiagram`](#inventorytonetworkdiagram) - Convert inventory/CMDB data to diagram
 
 **Dimension Calculations:**
@@ -222,6 +220,8 @@ const rackSchema: RackConfig[] = [
 const nodes = buildNodesFromRackConfig(rackSchema);
 ```
 
+Device images (e.g. server front/rear photos or SVGs) use `frontImageUrl` and `rearImageUrl` on each device; supported formats include PNG, SVG, JPEG, GIF, and WebP.
+
 ### Inventory Integration
 
 ```tsx
@@ -285,13 +285,13 @@ The library supports extensive theming through CSS variables:
 
 ### Prerequisites
 
-- Node.js 18+
+- Node.js 22+
 - npm, yarn, or pnpm
 
 ### Setup
 
 ```bash
-git clone https://github.com/your-org/react-networks.git
+Clone the repository, then:
 cd react-networks/packages/network-diagrams
 npm install
 ```
@@ -331,7 +331,7 @@ The library is distributed as:
 
 ## Contributing
 
-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+We welcome contributions! See `CONTRIBUTING.md` for details.
 
 ### Development Workflow
 
@@ -346,26 +346,15 @@ We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) f
 
 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
+- **AGPL-3.0** (Free) - For open source, personal, and educational use. Copyleft applies.
+- **Commercial** (Paid) - For proprietary/commercial use without copyleft obligations.
 
-- 📖 [Main Documentation](../../README.md)
-- 📚 [API Documentation](docs/API.md)
-- 🌐 [Documentation Site](../docs/) - Interactive docs with examples
-- 🐛 [Issue Tracker](https://github.com/MP70/react-networks/issues)
-- 💬 [Discussions](https://github.com/MP70/react-networks/discussions)
-- 📧 [Email Support](mailto:info@serversearcher.com)
+See `../../LICENSE` for details. By installing, you agree to use under either license.
 
 ## Acknowledgments
 
-- [React Flow](https://reactflow.dev) for the excellent diagram foundation
-- Network inventory/CMDB projects for inspiration
-- The open source community for feedback and contributions
+- React Flow for the diagram foundation
 
 ---
 
-Made with love by [Matt Pickering](https://github.com/MP70)
+Made with love by [matt](https://github.com/MP70) from [rackout.net](https://rackout.net)

package/dist/index.d.mts

@@ -116,16 +116,22 @@ interface NetworkNode {
         rearPorts?: PortBlock[];
         /** Power port side for rear view */
         powerSide?: PowerSide;
-        /** Optional front image URL for device background */
+        /** Optional front image URL for device background (PNG, SVG, JPEG, etc.) */
         frontImageUrl?: string;
-        /** Optional rear image URL for device background */
+        /** 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?: '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';
+        /** When true, stretch device image to fill the device bounds (overrides imageFit) */
+        stretchToFit?: boolean;
         /** Vertical PDU height in centimeters */
         heightCm?: number;
         /** Number of AC power ports */
@@ -273,16 +279,22 @@ interface RackDevice {
     rearPorts?: PortBlock[];
     /** Power port side for rear view */
     powerSide?: PowerSide;
-    /** Optional front image URL for device background */
+    /** Optional front image URL for device background (PNG, SVG, JPEG, etc.) */
     frontImageUrl?: string;
-    /** Optional rear image URL for device background */
+    /** 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?: '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';
+    /** When true, stretch device image to fill the device bounds (overrides imageFit) */
+    stretchToFit?: boolean;
     /** Connected device IDs */
     connections?: string[];
 }

package/dist/index.d.ts

@@ -116,16 +116,22 @@ interface NetworkNode {
         rearPorts?: PortBlock[];
         /** Power port side for rear view */
         powerSide?: PowerSide;
-        /** Optional front image URL for device background */
+        /** Optional front image URL for device background (PNG, SVG, JPEG, etc.) */
         frontImageUrl?: string;
-        /** Optional rear image URL for device background */
+        /** 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?: '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';
+        /** When true, stretch device image to fill the device bounds (overrides imageFit) */
+        stretchToFit?: boolean;
         /** Vertical PDU height in centimeters */
         heightCm?: number;
         /** Number of AC power ports */
@@ -273,16 +279,22 @@ interface RackDevice {
     rearPorts?: PortBlock[];
     /** Power port side for rear view */
     powerSide?: PowerSide;
-    /** Optional front image URL for device background */
+    /** Optional front image URL for device background (PNG, SVG, JPEG, etc.) */
     frontImageUrl?: string;
-    /** Optional rear image URL for device background */
+    /** 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?: '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';
+    /** When true, stretch device image to fill the device bounds (overrides imageFit) */
+    stretchToFit?: boolean;
     /** Connected device IDs */
     connections?: string[];
 }