feat(Header): add props for elements className

memory-bank/activeContext.md

@@ -13,13 +13,18 @@ The Page Constructor library is currently focused on providing a comprehensive s
 
 Recent development has focused on:
 
-1. **Text Size Enhancement**: Updated `textSize` constant in `src/schema/validators/common.ts`:
-
-   - **Previous values**: `['s', 'm', 'l']`
-   - **Current values**: `['xs', 's', 'sm', 'm', 'l']`
-   - Added new smaller sizes: `'xs'` (extra small) and `'sm'` (small-medium)
-   - This affects all components that use text sizing: Links, FileLinkProps, TitleProps, and various blocks
-   - Updated TypeScript type `TextSize` to include new values
+1. **HeaderBlock Enhancements**: Significant updates to HeaderBlock with new functionality:
+
+   - **New Content Properties**: Added `additionalInfo`, `overtitle`, and `status` for richer content structure
+   - **Custom Rendering**: Added `renderTitle` function prop for custom title rendering
+   - **Enhanced Background Support**: New `fullWidthMedia` property for full-width media backgrounds
+   - **Improved Media Control**: Added `mediaView` and `mediaClassName` for better media customization
+   - **Layout Customization**: Added `contentWrapperClassName` for custom styling of the content-wrapper element
+   - **Content Inner Customization**: Added `contentInnerClassName` for custom styling of the content-inner element
+   - **Accessibility Improvements**: Enhanced ARIA support with `useUniqId()` and proper labeling
+   - **Context Integration**: Better integration with `useWindowWidth` and responsive breakpoints
+   - **Component Architecture**: Refactored background rendering into separate `Background` and `FullWidthBackground` components
+   - **Props Refactoring**: Renamed `containerFluidClassName` to `contentWrapperClassName` for better clarity
 
 2. **Card Component Standardization**: Updated BasicCard, LayoutItem, BackgroundCard, and ImageCard with consistent patterns:
 
@@ -41,6 +46,8 @@ Recent development has focused on:
 - **Component Structure**: The library follows a hierarchical component structure with blocks, sub-blocks, and base components
 - **Context Providers**: Multiple context providers manage different aspects of the application (theme, mobile detection, analytics, etc.)
 - **Type System**: A comprehensive TypeScript type system ensures type safety and developer experience
+- **Responsive Design**: Enhanced integration with window width context and breakpoint constants for better mobile adaptation
+- **Component Composition**: Complex blocks like HeaderBlock use internal component composition (Background, FullWidthBackground) for better maintainability
 
 ### Block System
 
@@ -102,10 +109,15 @@ The following areas are being considered for future development:
 
 ### Recent Achievements
 
-1. **Accessibility Enhancement**: Improved ARIA support across card components with proper ID management
-2. **Control Positioning Flexibility**: New `controlPosition` prop provides better layout control
-3. **Theme Integration**: Consistent theme support using `getThemedValue` utility
-4. **Component Consistency**: Standardized patterns across card components improve maintainability
+1. **HeaderBlock Enhancement**: Significant improvements to HeaderBlock functionality:
+
+   - Improved media control with `mediaClassName` props
+   - Added layout customization with `contentWrapperClassName` prop
+
+2. **Accessibility Enhancement**: Improved ARIA support across components with proper ID management
+3. **Control Positioning Flexibility**: New `controlPosition` prop provides better layout control
+4. **Theme Integration**: Consistent theme support using `getThemedValue` utility
+5. **Component Consistency**: Standardized patterns across card components improve maintainability
 
 ### Documentation Updates
 

memory-bank/progress.md

@@ -2,7 +2,7 @@
 
 ## Current Status
 
-The Page Constructor library is a mature and stable project that provides a comprehensive solution for building web pages using a component-based approach. It is currently at version 6.8.1 and follows semantic versioning for releases.
+The Page Constructor library is a mature and stable project that provides a comprehensive solution for building web pages using a component-based approach. It is currently at version 7.6.2 and follows semantic versioning for releases.
 
 ## What Works
 
@@ -19,12 +19,24 @@ The Page Constructor library is a mature and stable project that provides a comp
 
 The library includes a comprehensive set of blocks for various use cases:
 
-- **Layout Blocks**: Header, ContentLayout, CardLayout
+- **Layout Blocks**: Header (with enhanced features), ContentLayout, CardLayout
 - **Content Blocks**: Media, Banner, Info, Table, Tabs
 - **Interactive Blocks**: Slider, Questions, FoldableList, Form
 - **Feature Blocks**: PromoFeatures, ExtendedFeatures, Icons
 - **Integration Blocks**: Map, Share, Companies
 
+#### HeaderBlock Enhanced Features
+
+The HeaderBlock has been significantly enhanced with new capabilities:
+
+- **Media Customization**: `mediaView` and `mediaClassName` props for better media control
+- **Layout Customization**: Multiple className props for fine-grained styling control:
+  - `gridClassName` for Grid component styling
+  - `contentWrapperClassName` for content wrapper styling
+  - `contentInnerClassName` for content inner element styling
+  - `mediaClassName` for media element styling
+- **Props Evolution**: Renamed `containerFluidClassName` to `contentWrapperClassName` for better clarity
+
 ### Sub-block Components
 
 Recently updated sub-block components with enhanced consistency:

memory-bank/systemPatterns.md

@@ -74,6 +74,47 @@ Blocks are composed of smaller components and sub-blocks:
 └───────────────────────────────┘
 ```
 
+### HeaderBlock Architecture
+
+HeaderBlock follows an enhanced architectural pattern with component composition:
+
+```
+┌─────────────────────────────────────┐
+│           HeaderBlock               │
+├─────────────────────────────────────┤
+│  • useUniqId() for accessibility    │
+│  • useWindowWidth() for responsive  │
+│  • Theme support via getThemedValue │
+│  • Component composition pattern    │
+├─────────────────────────────────────┤
+│     Background Components           │
+│  • Background (media backgrounds)   │
+│  • FullWidthBackground (full width) │
+├─────────────────────────────────────┤
+│        Content Structure            │
+│  • overtitle (above title)          │
+│  • title with custom rendering      │
+│  • description and additionalInfo   │
+│  • status element support           │
+│  • buttons with ARIA labeling       │
+├─────────────────────────────────────┤
+│      Layout Customization           │
+│  • gridClassName for Grid styling   │
+│  • contentWrapperClassName          │
+│  • contentInnerClassName            │
+│  • mediaClassName for media styling │
+└─────────────────────────────────────┘
+```
+
+Key HeaderBlock patterns:
+
+- **Component Composition**: Separate Background and FullWidthBackground components
+- **Enhanced Content**: Support for overtitle, additionalInfo, status, and custom title rendering
+- **Responsive Integration**: useWindowWidth hook and BREAKPOINTS constants
+- **Media Flexibility**: mediaView and mediaClassName for customization
+- **Layout Customization**: Multiple className props for fine-grained styling control
+- **Accessibility**: Proper ARIA labeling with titleId for button descriptions
+
 ### Card Component Architecture
 
 Card components follow a consistent architectural pattern:

memory-bank/techContext.md

@@ -60,8 +60,8 @@
 - **Sub-blocks**: Components used within blocks (Cards, Quotes, etc.)
 - **Components**: Basic UI elements (Button, Link, Image, etc.)
 - **Grid**: Responsive layout system
-- **Context**: React context providers for various features
-- **Utils**: Utility functions and helpers
+- **Context**: React context providers for various features (including WindowWidthContext for responsive design)
+- **Utils**: Utility functions and helpers (including responsive breakpoint constants)
 
 ### Server-Side
 
@@ -81,6 +81,18 @@
 - **iframe**: Isolated environment for rendering pages
 - **Messaging**: Communication between editor and preview
 
+## Recent Technical Enhancements
+
+### HeaderBlock Technical Improvements
+
+- **Type Safety**: Extended TypeScript interfaces with new properties:
+  - `mediaClassName` for media element styling
+  - `gridClassName` for Grid component styling
+  - `contentWrapperClassName` for content wrapper styling
+  - `contentInnerClassName` for content inner element styling
+- **Props Refactoring**: Renamed `containerFluidClassName` to `contentWrapperClassName` for better semantic clarity
+- **Enhanced Layout Control**: Multiple className props provide fine-grained styling control over different HeaderBlock elements
+
 ## Technical Constraints
 
 1. **Browser Compatibility**: