@flusys/ng-layout 1.1.0-beta → 1.1.0

package/README.md

@@ -9,6 +9,7 @@
 ## Package Information
 
 - **Package:** `@flusys/ng-layout`
+- **Version:** 1.1.0
 - **Dependencies:** ng-core, ng-shared
 - **Dependents:** flusysng
 - **Build Command:** `npm run build:ng-layout`
@@ -87,17 +88,21 @@ Recursive menu item component using attribute selector `[app-menuitem]`.
 
 #### AppFooter
 
-Displays company name (from `LAYOUT_AUTH_STATE`) or app name fallback.
+Displays product branding information from `LayoutService`:
+- **appName** - Application name from `APP_CONFIG` or default
+- **authorName** - Author/company name with link
+- **authorUrl** - Link to author website
 
 #### AppProfile
 
 User profile dropdown in topbar.
 
 **Features:**
-- User info display (picture, name, email)
+- User info display (picture, name, email) with text truncation for long values
 - Profile route link
 - Copy SignUp Link button (generates link with company slug)
 - Logout button with toast feedback
+- Responsive dropdown width (`w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]`)
 - Uses `LAYOUT_AUTH_API` and `LAYOUT_AUTH_STATE` tokens (optional injection)
 
 #### AppCompanyBranchSelector
@@ -128,11 +133,12 @@ Company and branch switcher in topbar. Shown when company feature is enabled.
 App launcher grid in topbar for quick access to related applications.
 
 **Features:**
-- 3-column grid of app icons with names
+- Responsive grid: 2 columns on mobile, 3 columns on desktop (`grid-cols-2 sm:grid-cols-3`)
 - External links (open in new tabs)
 - Icon support: PrimeNG, Material, or image URLs
 - Permission filtering via `permissionLogic`
 - Only visible when `layoutService.hasApps()` is true
+- App names truncated to prevent overflow
 
 **Configuration:**
 ```typescript
@@ -198,6 +204,8 @@ export class AppComponent {
 | `userProfile` | `Signal<UserProfile \| null>` | Current user display data |
 | `companyProfile` | `Signal<CompanyProfile \| null>` | Current company display data |
 | `appName` | `Signal<string>` | App name for fallback display |
+| `authorName` | `Signal<string>` | Author/company name for footer |
+| `authorUrl` | `Signal<string>` | Author website URL for footer |
 | `menu` | `Computed<IMenuItem[]>` | Permission-filtered menu items |
 | `apps` | `Computed<ILauncherApp[]>` | Permission-filtered launcher apps |
 
@@ -548,11 +556,59 @@ export class AppComponent implements OnInit {
 - Theme preferences persist automatically to localStorage
 - Test both light and dark themes for contrast
 
+**Dark Mode CSS Variables:**
+All components use PrimeNG CSS variables for automatic dark mode support:
+```css
+/* Backgrounds */
+background-color: var(--surface-overlay);  /* Dropdown panels */
+bg-emphasis                                 /* Hover states */
+
+/* Text */
+text-color                                  /* Primary text */
+text-muted-color                            /* Secondary text */
+
+/* Borders */
+border-surface                              /* Standard borders */
+
+/* Primary colors */
+bg-primary                                  /* Primary backgrounds */
+text-primary-contrast                       /* Text on primary */
+```
+
 ### Responsive Design
 - Use Tailwind for responsive utilities
 - Layout automatically handles responsive behavior (static → overlay on mobile)
 - Menu closes on navigation and outside clicks
 
+**Dropdown Panel Pattern:**
+```css
+/* Full width on mobile, auto-width on desktop with min/max constraints */
+class="w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
+```
+
+**Component Responsive Widths:**
+| Component | Pattern |
+|-----------|---------|
+| `AppConfigurator` | `w-[calc(100vw-2rem)] sm:w-72 max-w-72` |
+| `AppProfile` | `w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]` |
+| `AppCompanyBranchSelector` | `w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[300px] max-w-[360px]` |
+| `AppLauncher` | `w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]` |
+| `AppFloatingConfigurator` | Position: `top-4 md:top-8 right-2 md:right-8` |
+
+**Grid Responsiveness:**
+```css
+/* 2 columns mobile, 3 columns desktop */
+class="grid grid-cols-2 sm:grid-cols-3 gap-2"
+```
+
+**Text Truncation:**
+```html
+<!-- Prevent overflow on long names/emails -->
+<div class="flex flex-col min-w-0 flex-1">
+  <span class="truncate">{{ userName() }}</span>
+</div>
+```
+
 ## Common Issues
 
 ### Menu Not Showing
@@ -653,5 +709,6 @@ Layout automatically handles responsive behavior. Ensure you're using the `AppLa
 
 ---
 
-**Last Updated:** 2026-02-16
+**Last Updated:** 2026-02-23
+**Version:** 1.1.0
 **Angular Version:** 21