@visns-studio/visns-components 5.15.7 → 5.15.9

package/README.md

@@ -9,11 +9,11 @@ A comprehensive React component library used by the VISNS Studio team for CRM an
 
 VISNS Components is a React-based UI component library that provides a set of reusable, consistent, and customizable components for building web applications. It includes components for authentication, data grids, forms, navigation, and more, designed to work seamlessly together.
 
-## Recent Updates (v5.15.4)
+## Recent Updates (v5.15.6)
 
 ### Latest Enhancements
 
-- **CameraPlacement Module**: New interactive camera placement tool with Verkada database integration, FOV visualization, grid-based camera selection, save/load functionality, and professional export capabilities
+- **CameraPlacement Module**: Enhanced interactive camera placement tool with improved UI consistency, better icon visibility, drag-and-drop image upload, professional export capabilities, and complete Verkada database integration
 - **Complete StandardModal Migration**: All components now use StandardModal instead of reactjs-popup for consistent modal behavior across the entire library
 - **HTML Content Support**: Terms and conditions now properly parse HTML content from TinyMCE editors with clean rendering
 - **Improved Typography**: Refined font sizing in Terms and Conditions to match page typography hierarchy
@@ -2453,7 +2453,7 @@ The CustomFetch component includes these features:
 -   **Authentication Handling**: Silently handles unauthenticated errors without showing toast notifications
 
 #### CameraPlacement
-Interactive camera placement and visualization tool for security system design. Features a comprehensive Verkada camera database, FOV triangle visualization, and project save/load functionality.
+Interactive camera placement and visualization tool for security system design. Features a comprehensive Verkada camera database, FOV triangle visualization, and professional export capabilities with enhanced UI consistency.
 
 ```jsx
 import { CameraPlacement } from 'visns-components';
@@ -2462,34 +2462,46 @@ import { CameraPlacement } from 'visns-components';
 ```
 
 **Key Features:**
--   **Dual Mode Support**: Switch between Mapbox map integration and image-based placement
+-   **Enhanced User Interface**: Modern icon-based controls with tooltips, consistent color theming using project CSS variables
+-   **Dual Mode Support**: Switch between Mapbox map integration and image-based placement with seamless transitions
+-   **Drag & Drop Upload**: Direct image upload via drag-and-drop interface with visual feedback and file validation
 -   **Verkada Database**: Complete catalog of Verkada cameras with specifications, FOV, and environmental ratings
 -   **Grid-Based Selection**: Visual camera selection modal with categorized camera cards showing specs and icons  
 -   **FOV Visualization**: Intelligent field-of-view triangles with inverse distance scaling for realistic coverage display
 -   **Interactive Placement**: Drag-and-drop camera positioning with rotation handles for directional adjustment
--   **Save/Load Projects**: Export/import camera placements as JSON files for project continuity
--   **Export Functionality**: Generate high-quality PNG exports with side-by-side camera reference lists
--   **SweetAlert Integration**: Professional modal dialogs for confirmations and notifications
+-   **Save/Load Projects**: Export/import camera placements as JSON files with project metadata and timestamps
+-   **Professional Exports**: Generate high-quality PNG reports with side-by-side camera specifications and installation details
+-   **SweetAlert Integration**: Professional modal dialogs for confirmations, error handling, and success notifications
+
+**Recent Improvements (v5.15.6):**
+- **Icon Visibility**: Fixed save button icon visibility with improved color contrast and explicit styling
+- **UI Consistency**: All buttons now use project-standard color variables for consistent theming
+- **Tooltips**: CSS-based tooltips for all control buttons with descriptive text
+- **Error Prevention**: Rotation handle interactions no longer trigger accidental camera placement
+- **Confirmation Dialogs**: Delete confirmations now show camera names for better user context
+- **SCSS Structure**: Completely refactored styling with proper nesting and maintainable code structure
 
 **Camera Database:**
 - **29+ Camera Models**: Complete Verkada lineup including dome, bullet, PTZ, multisensor, fisheye, mini, and video intercom cameras
-- **Detailed Specifications**: Resolution, FOV, IR range, sensor size, environment rating, and feature lists
-- **Smart Categorization**: Organized by camera type with visual icons and environment compatibility
-- **Advanced Models**: Support for optical zoom, telephoto lenses, 4K resolution, and specialized features
+- **Detailed Specifications**: Resolution, FOV, IR range, sensor size, environment rating, and comprehensive feature lists
+- **Smart Categorization**: Organized by camera type with visual icons and environment compatibility indicators
+- **Advanced Models**: Support for optical zoom, telephoto lenses, 4K resolution, and specialized security features
+- **Real-time Updates**: Live camera specification display in sidebar with direction controls and coordinate tracking
 
 **Technical Capabilities:**
-- **Map Integration**: Mapbox GL JS with geocoding search and satellite imagery
-- **Image Upload**: Support for floor plans and site diagrams with HTML5 file API
-- **FOV Calculations**: Dynamic triangle sizing based on camera specifications with mathematical precision
-- **Export Quality**: HTML2Canvas integration for professional-grade layout exports
-- **State Management**: React hooks-based architecture with real-time updates
+- **Map Integration**: Mapbox GL JS with geocoding search, satellite imagery, and custom marker styling
+- **Image Processing**: Support for floor plans and site diagrams with HTML5 file API and FileReader integration
+- **FOV Calculations**: Dynamic triangle sizing based on camera specifications with mathematical precision and visual scaling
+- **Export Quality**: HTML2Canvas integration for professional-grade layout exports with custom report generation
+- **State Management**: React hooks-based architecture with real-time updates and persistent state handling
+- **Event Handling**: Advanced mouse/touch interactions for camera positioning, rotation, and tooltip management
 
 **Use Cases:**
-- Security system design and planning
-- Camera coverage analysis and optimization  
-- Client presentations with visual layouts
-- Installation planning and documentation
-- Site survey and assessment tools
+- Security system design and planning with professional documentation
+- Camera coverage analysis and optimization with visual feedback
+- Client presentations with high-quality visual layouts and specification sheets
+- Installation planning and documentation with detailed camera specifications
+- Site survey and assessment tools with save/load project functionality
 
 #### Download
 

package/package.json

@@ -12,7 +12,8 @@
         "@nivo/core": "^0.99.0",
         "@nivo/line": "^0.99.0",
         "@nivo/pie": "^0.99.0",
-        "@tanstack/react-query": "^5.84.1",
+        "@react-pdf/renderer": "^4.3.0",
+        "@tanstack/react-query": "^5.84.2",
         "@tinymce/miniature": "^6.0.0",
         "@tinymce/tinymce-react": "^6.3.0",
         "@uiw/react-color": "^2.7.3",
@@ -63,7 +64,7 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
-        "sweetalert2": "^11.22.2",
+        "sweetalert2": "^11.22.3",
         "tesseract.js": "^6.0.1",
         "truncate": "^3.0.0",
         "uuid": "^11.1.0",
@@ -82,10 +83,10 @@
         "copy-webpack-plugin": "^13.0.0",
         "css-loader": "^7.1.2",
         "css-minimizer-webpack-plugin": "^7.0.2",
-        "mini-css-extract-plugin": "^2.9.2",
+        "mini-css-extract-plugin": "^2.9.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "sass": "^1.89.2",
+        "sass": "^1.90.0",
         "sass-loader": "^16.0.5"
     },
     "peerDependencies": {
@@ -93,7 +94,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.15.7",
+    "version": "5.15.9",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [