@qwickapps/react-framework 1.5.6 → 1.5.7

package/dist/palettes/palette-winter.1.5.7.css

@@ -0,0 +1,172 @@
+/**
+ * Winter Color Palette
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * 
+ * Cool blues, icy whites, and frosty grays - inspired by winter landscapes
+ */
+
+/* ===== WINTER PALETTE - LIGHT THEME ===== */
+html[data-palette="winter"]:not([data-theme="dark"]), 
+html[data-palette="winter"][data-theme="light"] {
+  /* Primary palette - Ice blue */
+  --palette-primary-main: #0077be;
+  --palette-primary-light: #5ba3d0;
+  --palette-primary-dark: #005082;
+  --palette-on-primary: #ffffff;
+
+  /* Secondary palette - Steel blue */
+  --palette-secondary-main: #4682b4;
+  --palette-secondary-light: #7ba7cc;
+  --palette-secondary-dark: #2e5984;
+  --palette-on-secondary: #ffffff;
+
+  /* Surface palette - Snow white */
+  --palette-surface-main: #fafbfc;
+  --palette-surface-variant: #e2e8f0; /* Improved contrast with cooler tone */
+  --palette-surface-elevated: #ffffff;
+  --palette-on-surface: #0f172a;
+
+  /* Background palette - Frosty */
+  --palette-background-main: #f8fafc;
+  --palette-background-dark: #f1f5f9;
+  --palette-background-overlay: rgba(248, 250, 252, 0.95);
+  --palette-on-background: #475569;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(248, 250, 252, 0.98);
+  --palette-header-bg-end: rgba(248, 250, 252, 0.95);
+  --palette-header-collapsed-bg-start: rgba(248, 250, 252, 0.99);
+  --palette-header-collapsed-bg-end: rgba(248, 250, 252, 0.96);
+  
+  /* Text palette - Winter tones */
+  --palette-text-primary: #0f172a;
+  --palette-text-secondary: #475569;
+  --palette-text-disabled: rgba(15, 23, 42, 0.38);
+  --palette-text-inverted: #ffffff;
+  
+  /* Border palette - Icy */
+  --palette-border-main: #cbd5e1;
+  --palette-border-light: rgba(15, 23, 42, 0.12);
+  --palette-border-lighter: rgba(15, 23, 42, 0.05);
+  --palette-border-medium: #94a3b8;
+  
+  /* Success palette - Pine green */
+  --palette-success-main: #059669;
+  --palette-success-light: #d1fae5;
+  --palette-success-dark: #064e3b;
+  --palette-success-border: #a7f3d0;
+  
+  /* Error palette - Winter berry */
+  --palette-error-main: #dc2626;
+  --palette-error-light: #fee2e2;
+  --palette-error-dark: #7f1d1d;
+  --palette-error-border: #fecaca;
+  
+  /* Warning palette - Amber frost */
+  --palette-warning-main: #d97706;
+  --palette-warning-light: #fef3c7;
+  --palette-warning-dark: #92400e;
+  --palette-warning-border: #fde68a;
+  
+  /* Info palette - Arctic blue */
+  --palette-info-main: #0284c7;
+  --palette-info-light: #e0f2fe;
+  --palette-info-dark: #0c4a6e;
+  --palette-on-info: #ffffff;
+  --palette-info-border: #7dd3fc;
+  
+  /* Accent palette - Aurora colors */
+  --palette-accent-main: #ec4899;
+  --palette-accent-light: #fce7f3;
+  --palette-accent-dark: #be185d;
+  --palette-on-accent: #ffffff;
+  
+  /* Control palette - Charcoal */
+  --palette-control-main: #1e293b;
+  --palette-control-light: #334155;
+  --palette-control-text: #e2e8f0;
+  --palette-control-border: #475569;
+}
+
+/* ===== WINTER PALETTE - DARK THEME ===== */
+html[data-palette="winter"][data-theme="dark"] {
+  /* Primary palette - Arctic glow */
+  --palette-primary-main: #7dd3fc;
+  --palette-primary-light: #bae6fd;
+  --palette-primary-dark: #0369a1;
+  --palette-on-primary: #020617;
+
+  /* Secondary palette - Moonlight */
+  --palette-secondary-main: #94a3b8;
+  --palette-secondary-light: #cbd5e1;
+  --palette-secondary-dark: #64748b;
+  --palette-on-secondary: #020617;
+
+  /* Surface palette - Dark frost */
+  --palette-surface-main: #172033;
+  --palette-surface-variant: #1e293b;
+  --palette-surface-elevated: #334155;
+  --palette-on-surface: #f8fafc;
+
+  /* Background palette - Winter night */
+  --palette-background-main: #04080f;
+  --palette-background-dark: #0a1018;
+  --palette-background-overlay: rgba(15, 23, 42, 0.95);
+  --palette-on-background: #cbd5e1;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(4, 8, 15, 0.98);
+  --palette-header-bg-end: rgba(4, 8, 15, 0.95);
+  --palette-header-collapsed-bg-start: rgba(4, 8, 15, 0.99);
+  --palette-header-collapsed-bg-end: rgba(4, 8, 15, 0.96);
+  
+  /* Text palette - Snow and ice */
+  --palette-text-primary: #f8fafc;
+  --palette-text-secondary: #cbd5e1;
+  --palette-text-disabled: rgba(248, 250, 252, 0.38);
+  --palette-text-inverted: #020617;
+  
+  /* Border palette - Dark ice */
+  --palette-border-main: #475569;
+  --palette-border-light: rgba(248, 250, 252, 0.12);
+  --palette-border-lighter: rgba(248, 250, 252, 0.05);
+  --palette-border-medium: #334155;
+  
+  /* Success palette - Aurora green */
+  --palette-success-main: #34d399;
+  --palette-success-light: #064e3b;
+  --palette-success-dark: #10b981;
+  --palette-success-border: #065f46;
+  
+  /* Error palette - Northern lights red */
+  --palette-error-main: #f87171;
+  --palette-error-light: #7f1d1d;
+  --palette-error-dark: #ef4444;
+  --palette-error-border: #991b1b;
+  
+  /* Warning palette - Aurora orange */
+  --palette-warning-main: #fb923c;
+  --palette-warning-light: #9a3412;
+  --palette-warning-dark: #f97316;
+  --palette-warning-border: #c2410c;
+  
+  /* Info palette - Polar blue */
+  --palette-info-main: #38bdf8;
+  --palette-info-light: #0c4a6e;
+  --palette-info-dark: #0ea5e9;
+  --palette-on-info: #020617;
+  --palette-info-border: #0284c7;
+  
+  /* Accent palette - Northern lights */
+  --palette-accent-main: #f472b6;
+  --palette-accent-light: #fce7f3;
+  --palette-accent-dark: #db2777;
+  --palette-on-accent: #f8fafc;
+  
+  /* Control palette - Midnight */
+  --palette-control-main: #1e293b;
+  --palette-control-light: #334155;
+  --palette-control-text: #e2e8f0;
+  --palette-control-border: #475569;
+}

package/dist/palettes/palette-winter.1.5.7.min.css

@@ -0,0 +1 @@
+html[data-palette="winter"]:not([data-theme="dark"]),html[data-palette="winter"][data-theme="light"]{--palette-primary-main:#0077be;--palette-primary-light:#5ba3d0;--palette-primary-dark:#005082;--palette-on-primary:#ffffff;--palette-secondary-main:#4682b4;--palette-secondary-light:#7ba7cc;--palette-secondary-dark:#2e5984;--palette-on-secondary:#ffffff;--palette-surface-main:#fafbfc;--palette-surface-variant:#e2e8f0;--palette-surface-elevated:#ffffff;--palette-on-surface:#0f172a;--palette-background-main:#f8fafc;--palette-background-dark:#f1f5f9;--palette-background-overlay:rgba(248,250,252,0.95);--palette-on-background:#475569;--palette-header-bg-start:rgba(248,250,252,0.98);--palette-header-bg-end:rgba(248,250,252,0.95);--palette-header-collapsed-bg-start:rgba(248,250,252,0.99);--palette-header-collapsed-bg-end:rgba(248,250,252,0.96);--palette-text-primary:#0f172a;--palette-text-secondary:#475569;--palette-text-disabled:rgba(15,23,42,0.38);--palette-text-inverted:#ffffff;--palette-border-main:#cbd5e1;--palette-border-light:rgba(15,23,42,0.12);--palette-border-lighter:rgba(15,23,42,0.05);--palette-border-medium:#94a3b8;--palette-success-main:#059669;--palette-success-light:#d1fae5;--palette-success-dark:#064e3b;--palette-success-border:#a7f3d0;--palette-error-main:#dc2626;--palette-error-light:#fee2e2;--palette-error-dark:#7f1d1d;--palette-error-border:#fecaca;--palette-warning-main:#d97706;--palette-warning-light:#fef3c7;--palette-warning-dark:#92400e;--palette-warning-border:#fde68a;--palette-info-main:#0284c7;--palette-info-light:#e0f2fe;--palette-info-dark:#0c4a6e;--palette-on-info:#ffffff;--palette-info-border:#7dd3fc;--palette-accent-main:#ec4899;--palette-accent-light:#fce7f3;--palette-accent-dark:#be185d;--palette-on-accent:#ffffff;--palette-control-main:#1e293b;--palette-control-light:#334155;--palette-control-text:#e2e8f0;--palette-control-border:#475569}html[data-palette="winter"][data-theme="dark"]{--palette-primary-main:#7dd3fc;--palette-primary-light:#bae6fd;--palette-primary-dark:#0369a1;--palette-on-primary:#020617;--palette-secondary-main:#94a3b8;--palette-secondary-light:#cbd5e1;--palette-secondary-dark:#64748b;--palette-on-secondary:#020617;--palette-surface-main:#172033;--palette-surface-variant:#1e293b;--palette-surface-elevated:#334155;--palette-on-surface:#f8fafc;--palette-background-main:#04080f;--palette-background-dark:#0a1018;--palette-background-overlay:rgba(15,23,42,0.95);--palette-on-background:#cbd5e1;--palette-header-bg-start:rgba(4,8,15,0.98);--palette-header-bg-end:rgba(4,8,15,0.95);--palette-header-collapsed-bg-start:rgba(4,8,15,0.99);--palette-header-collapsed-bg-end:rgba(4,8,15,0.96);--palette-text-primary:#f8fafc;--palette-text-secondary:#cbd5e1;--palette-text-disabled:rgba(248,250,252,0.38);--palette-text-inverted:#020617;--palette-border-main:#475569;--palette-border-light:rgba(248,250,252,0.12);--palette-border-lighter:rgba(248,250,252,0.05);--palette-border-medium:#334155;--palette-success-main:#34d399;--palette-success-light:#064e3b;--palette-success-dark:#10b981;--palette-success-border:#065f46;--palette-error-main:#f87171;--palette-error-light:#7f1d1d;--palette-error-dark:#ef4444;--palette-error-border:#991b1b;--palette-warning-main:#fb923c;--palette-warning-light:#9a3412;--palette-warning-dark:#f97316;--palette-warning-border:#c2410c;--palette-info-main:#38bdf8;--palette-info-light:#0c4a6e;--palette-info-dark:#0ea5e9;--palette-on-info:#020617;--palette-info-border:#0284c7;--palette-accent-main:#f472b6;--palette-accent-light:#fce7f3;--palette-accent-dark:#db2777;--palette-on-accent:#f8fafc;--palette-control-main:#1e293b;--palette-control-light:#334155;--palette-control-text:#e2e8f0;--palette-control-border:#475569}

package/dist/utils/iconMap.d.ts

@@ -4,6 +4,11 @@
  * Provides centralized icon mapping for both Material-UI components and emoji representations.
  * Used across the framework for consistent icon rendering in buttons, navigation, admin UI, etc.
  *
+ * Features:
+ * - Static map for commonly used icons with emoji support
+ * - Fallback to HelpOutline icon for unmapped icons (with console warning)
+ * - Runtime icon registration via registerIcon() for app-specific icons
+ *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 import React from 'react';
@@ -15,21 +20,28 @@ export interface IconMapping {
     component: React.ComponentType;
 }
 /**
- * Centralized icon registry mapping icon names to their representations
- * Supports both Material-UI components and emoji for different contexts
+ * Centralized icon registry mapping icon names to their representations.
+ * Sorted alphabetically by category, then by key within each category.
+ *
+ * For icons not in this map, getIconComponent() will return a HelpOutline fallback
+ * and log a warning. Use registerIcon() to add app-specific icons at runtime.
  */
 export declare const iconMap: Record<string, IconMapping>;
 /**
  * Get emoji representation of an icon
- * @param iconName - Icon name (case-insensitive)
+ * @param iconName - Icon name (case-insensitive, supports snake_case)
  * @param fallback - Fallback emoji if icon not found (default: 🔗)
  * @returns Emoji string
  */
 export declare function getIconEmoji(iconName: string | undefined, fallback?: string): string;
 /**
- * Get Material-UI component representation of an icon
- * @param iconName - Icon name (case-insensitive)
- * @returns React element or null if not found
+ * Get Material-UI component representation of an icon.
+ *
+ * Uses the static iconMap for known icons. For unmapped icons,
+ * returns a HelpOutline fallback and logs a warning.
+ *
+ * @param iconName - Icon name (case-insensitive, supports snake_case)
+ * @returns React element (mapped icon or HelpOutline fallback), or null if no name provided
  */
 export declare function getIconComponent(iconName: string | undefined): React.ReactElement | null;
 /**
@@ -38,11 +50,12 @@ export declare function getIconComponent(iconName: string | undefined): React.Re
  */
 export declare function registerIcon(name: string, mapping: IconMapping): void;
 /**
- * Check if an icon is registered
+ * Check if an icon is registered in the static map
+ * If false, getIconComponent will return HelpOutline fallback
  */
 export declare function hasIcon(iconName: string): boolean;
 /**
- * Get all registered icon names
+ * Get all registered icon names from the static map
  */
 export declare function getRegisteredIcons(): string[];
 //# sourceMappingURL=iconMap.d.ts.map

package/dist/utils/iconMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iconMap.d.ts","sourceRoot":"","sources":["../../src/utils/iconMap.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAuE1B;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC;CAChC;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAqG/C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,GAAE,MAAa,GAAG,MAAM,CAI1F;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAWxF;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAErE;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAE7C"}
+{"version":3,"file":"iconMap.d.ts","sourceRoot":"","sources":["../../src/utils/iconMap.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAsF1B;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC;CAChC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CA0H/C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,GAAE,MAAa,GAAG,MAAM,CAK1F;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAiBxF;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAErE;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAE7C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwickapps/react-framework",
-  "version": "1.5.6",
+  "version": "1.5.7",
   "type": "module",
   "description": "Complete React framework with responsive navigation, flexible layouts, theming system, and reusable components for building modern applications.",
   "main": "dist/index.js",

package/src/__tests__/utils/iconMap.test.tsx

@@ -0,0 +1,197 @@
+/**
+ * Icon Map Tests
+ *
+ * Tests for the icon mapping utility functions.
+ */
+
+import {
+  getIconComponent,
+  getIconEmoji,
+  hasIcon,
+  registerIcon,
+  getRegisteredIcons,
+  iconMap,
+} from '../../utils/iconMap';
+import { Home, Star } from '@mui/icons-material';
+
+describe('iconMap', () => {
+  describe('getIconComponent', () => {
+    it('returns null for undefined input', () => {
+      expect(getIconComponent(undefined)).toBeNull();
+    });
+
+    it('returns null for empty string', () => {
+      expect(getIconComponent('')).toBeNull();
+    });
+
+    it('returns correct component for mapped icon', () => {
+      const result = getIconComponent('home');
+      expect(result).not.toBeNull();
+      expect(result?.type).toBe(Home);
+    });
+
+    it('is case-insensitive', () => {
+      const lower = getIconComponent('home');
+      const upper = getIconComponent('HOME');
+      const mixed = getIconComponent('Home');
+
+      expect(lower?.type).toBe(upper?.type);
+      expect(lower?.type).toBe(mixed?.type);
+    });
+
+    it('supports snake_case icon names', () => {
+      const result = getIconComponent('manage_accounts');
+      expect(result).not.toBeNull();
+    });
+
+    it('returns HelpOutline fallback for unmapped icons', () => {
+      // Suppress console.warn for this test
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      const result = getIconComponent('nonexistent_icon_xyz');
+      expect(result).not.toBeNull();
+
+      warnSpy.mockRestore();
+    });
+
+    it('logs warning for unmapped icons in non-production', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      getIconComponent('nonexistent_icon_xyz');
+
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('nonexistent_icon_xyz')
+      );
+
+      warnSpy.mockRestore();
+    });
+  });
+
+  describe('getIconEmoji', () => {
+    it('returns fallback for undefined input', () => {
+      expect(getIconEmoji(undefined)).toBe('🔗');
+    });
+
+    it('returns custom fallback when provided', () => {
+      expect(getIconEmoji(undefined, '❓')).toBe('❓');
+    });
+
+    it('returns correct emoji for mapped icon', () => {
+      expect(getIconEmoji('home')).toBe('🏠');
+      expect(getIconEmoji('favorite')).toBe('❤️');
+      expect(getIconEmoji('star')).toBe('⭐');
+    });
+
+    it('is case-insensitive', () => {
+      expect(getIconEmoji('HOME')).toBe(getIconEmoji('home'));
+    });
+
+    it('returns fallback for unmapped icons', () => {
+      expect(getIconEmoji('nonexistent_icon')).toBe('🔗');
+    });
+  });
+
+  describe('hasIcon', () => {
+    it('returns true for mapped icons', () => {
+      expect(hasIcon('home')).toBe(true);
+      expect(hasIcon('settings')).toBe(true);
+      expect(hasIcon('people')).toBe(true);
+    });
+
+    it('returns false for unmapped icons', () => {
+      expect(hasIcon('nonexistent_icon')).toBe(false);
+    });
+
+    it('is case-insensitive', () => {
+      expect(hasIcon('HOME')).toBe(true);
+      expect(hasIcon('Home')).toBe(true);
+    });
+  });
+
+  describe('registerIcon', () => {
+    // Cleanup any test icons after each test to prevent pollution
+    afterEach(() => {
+      delete iconMap['custom_test_icon'];
+      delete iconMap['upper_case_icon'];
+    });
+
+    it('registers new icons at runtime', () => {
+      const customIconName = 'custom_test_icon';
+
+      // Should not exist initially
+      expect(hasIcon(customIconName)).toBe(false);
+
+      // Register it
+      registerIcon(customIconName, {
+        emoji: '🎯',
+        component: Star,
+      });
+
+      // Should exist now
+      expect(hasIcon(customIconName)).toBe(true);
+      expect(getIconEmoji(customIconName)).toBe('🎯');
+    });
+
+    it('is case-insensitive for registration', () => {
+      registerIcon('UPPER_CASE_ICON', {
+        emoji: '🔤',
+        component: Star,
+      });
+
+      expect(hasIcon('upper_case_icon')).toBe(true);
+      expect(hasIcon('UPPER_CASE_ICON')).toBe(true);
+    });
+  });
+
+  describe('getRegisteredIcons', () => {
+    it('returns an array of icon names', () => {
+      const icons = getRegisteredIcons();
+
+      expect(Array.isArray(icons)).toBe(true);
+      expect(icons.length).toBeGreaterThan(0);
+    });
+
+    it('includes common icons', () => {
+      const icons = getRegisteredIcons();
+
+      expect(icons).toContain('home');
+      expect(icons).toContain('settings');
+      expect(icons).toContain('dashboard');
+      expect(icons).toContain('people');
+      expect(icons).toContain('manage_accounts');
+    });
+  });
+
+  describe('iconMap coverage', () => {
+    it('has emoji and component for all entries', () => {
+      for (const [name, mapping] of Object.entries(iconMap)) {
+        expect(mapping.emoji).toBeDefined();
+        expect(typeof mapping.emoji).toBe('string');
+        expect(mapping.emoji.length).toBeGreaterThan(0);
+
+        expect(mapping.component).toBeDefined();
+        // Components can be functions or objects (React.memo, forwardRef, etc.)
+        expect(['function', 'object']).toContain(typeof mapping.component);
+      }
+    });
+
+    it('includes essential icons for navigation', () => {
+      const essentialIcons = [
+        'home', 'dashboard', 'settings', 'menu',
+        'people', 'person', 'help', 'info',
+      ];
+
+      for (const icon of essentialIcons) {
+        expect(hasIcon(icon)).toBe(true);
+      }
+    });
+
+    it('includes authentication icons', () => {
+      const authIcons = ['lock', 'security', 'key', 'login', 'logout'];
+
+      for (const icon of authIcons) {
+        expect(hasIcon(icon)).toBe(true);
+      }
+    });
+  });
+});

package/src/components/QwickApp.tsx

@@ -34,7 +34,7 @@
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
-import React, { cloneElement, useState } from 'react';
+import React, { cloneElement, useState, useEffect } from 'react';
 import { DataProvider, ThemeProvider, PrintModeProvider, NavigationProvider, type ThemeMode } from '../contexts';
 import { QwickAppContext, type QwickAppContextValue, type QwickAppProps } from '../contexts/QwickAppContext';
 import { type TemplateResolverConfig } from '../types';
@@ -126,6 +126,13 @@ export const QwickApp: React.FC<QwickAppComponentProps> = ({
     setAppConfig(prev => ({ ...prev, ...updates } as typeof prev));
   };
 
+  // Sync logo prop changes with internal state (for dynamic logo updates)
+  useEffect(() => {
+    if (resolvedConfig.logo !== appConfig.logo) {
+      setAppConfig(prev => ({ ...prev, logo: resolvedConfig.logo }));
+    }
+  }, [resolvedConfig.logo]);
+
   const contextValue: QwickAppContextValue = {
     appName: resolvedConfig.appName!, // Safe to use ! since we validated above
     appId: resolvedConfig.appId,

package/src/contexts/NavigationContext.tsx

@@ -15,7 +15,7 @@ import { createContext, useContext, type ReactNode } from 'react';
 import {
   useNavigate,
   useLocation,
-  UNSAFE_NavigationContext as RouterContext,
+  useInRouterContext,
 } from 'react-router-dom';
 
 /**
@@ -58,17 +58,23 @@ function ReactRouterNavigationProvider({ children }: { children: ReactNode }) {
     }
   };
 
+  // Defensive check for location - fall back to window.location if React Router's location is undefined
+  const location: NavigationLocation | undefined = reactRouterLocation
+    ? {
+        pathname: reactRouterLocation.pathname,
+        search: reactRouterLocation.search,
+        hash: reactRouterLocation.hash,
+      }
+    : typeof window !== 'undefined'
+      ? {
+          pathname: window.location.pathname,
+          search: window.location.search,
+          hash: window.location.hash,
+        }
+      : undefined;
+
   return (
-    <NavigationContext.Provider
-      value={{
-        navigate,
-        location: {
-          pathname: reactRouterLocation.pathname,
-          search: reactRouterLocation.search,
-          hash: reactRouterLocation.hash,
-        },
-      }}
-    >
+    <NavigationContext.Provider value={{ navigate, location }}>
       {children}
     </NavigationContext.Provider>
   );
@@ -115,11 +121,11 @@ function FallbackNavigationProvider({ children }: { children: ReactNode }) {
  * This is included automatically by QwickApp - you don't need to add it manually.
  */
 export function NavigationProvider({ children }: { children: ReactNode }) {
-  // Check if we're inside a React Router by checking its internal context
-  // useContext doesn't throw - it returns null if the context doesn't exist
-  const routerContext = useContext(RouterContext);
+  // Check if we're inside a React Router using the official hook
+  // This is more reliable than checking internal UNSAFE contexts
+  const isInRouter = useInRouterContext();
 
-  if (routerContext) {
+  if (isInRouter) {
     // We're inside a Router, use React Router's navigation
     return (
       <ReactRouterNavigationProvider>{children}</ReactRouterNavigationProvider>