@qwickapps/react-framework 1.5.5 → 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;AAsE1B;;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,CAoG/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/dist/utils/reactUtils.d.ts

@@ -5,28 +5,6 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 import { ReactNode } from 'react';
-/** Location type for routing */
-type LocationType = {
-    pathname: string;
-    search: string;
-    hash: string;
-};
-/**
- * Get the current location from browser or undefined in SSR
- * Works without relying on routing libraries
- * @returns {object | undefined} - The location object if in browser, otherwise undefined
- */
-export declare const useSafeLocation: () => LocationType | undefined;
-/**
- * Navigate function type
- */
-export type NavigateFunction = (to: string | number, options?: unknown) => void;
-/**
- * Get a navigation function with fallback to window.location
- * Works without relying on routing libraries
- * @returns {NavigateFunction} - The navigate function
- */
-export declare const useSafeNavigate: () => NavigateFunction;
 /**
  * Extract text content from ReactNode for code processing
  * Handles natural React usage like <Code>const x = 1;</Code>
@@ -35,5 +13,4 @@ export declare const useSafeNavigate: () => NavigateFunction;
  * @returns String representation of the node's text content
  */
 export declare function extractTextFromReactNode(node: ReactNode): string;
-export {};
 //# sourceMappingURL=reactUtils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"reactUtils.d.ts","sourceRoot":"","sources":["../../src/utils/reactUtils.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,gCAAgC;AAChC,KAAK,YAAY,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvE;;;;GAIG;AACH,eAAO,MAAM,eAAe,QAAO,YAAY,GAAG,SAUjD,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;AAEhF;;;;GAIG;AACH,eAAO,MAAM,eAAe,QAAO,gBAalC,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CA2BhE"}
+{"version":3,"file":"reactUtils.d.ts","sourceRoot":"","sources":["../../src/utils/reactUtils.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CA2BhE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwickapps/react-framework",
-  "version": "1.5.5",
+  "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,8 +34,8 @@
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
-import React, { cloneElement, useState } from 'react';
-import { DataProvider, ThemeProvider, PrintModeProvider, type ThemeMode } from '../contexts';
+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';
 import { AppConfig } from '../config';
@@ -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,
@@ -160,19 +167,21 @@ export const QwickApp: React.FC<QwickAppComponentProps> = ({
   const appContent = (
     <ErrorBoundary>
       <AccessibilityProvider>
-        <div className={`qwick-app ${className || ''}`} style={style}>
-          <ThemeProvider 
-            appId={resolvedConfig.appId} 
-            defaultTheme={resolvedConfig.defaultTheme} 
-            defaultPalette={resolvedConfig.defaultPalette}
-          >
-            <QwickAppContext.Provider value={contextValue}>
-              <PrintModeProvider>
-                {wrappedContent}
-              </PrintModeProvider>
-            </QwickAppContext.Provider>
-          </ThemeProvider>
-        </div>
+        <NavigationProvider>
+          <div className={`qwick-app ${className || ''}`} style={style}>
+            <ThemeProvider
+              appId={resolvedConfig.appId}
+              defaultTheme={resolvedConfig.defaultTheme}
+              defaultPalette={resolvedConfig.defaultPalette}
+            >
+              <QwickAppContext.Provider value={contextValue}>
+                <PrintModeProvider>
+                  {wrappedContent}
+                </PrintModeProvider>
+              </QwickAppContext.Provider>
+            </ThemeProvider>
+          </div>
+        </NavigationProvider>
       </AccessibilityProvider>
     </ErrorBoundary>
   );

package/src/components/ResponsiveMenu.tsx

@@ -22,7 +22,7 @@ import { useQwickApp } from '../contexts/QwickAppContext';
 import Logo from './Logo';
 import { getIconComponent } from './buttons/Button';
 import './ResponsiveMenu.css';
-import { useSafeLocation, useSafeNavigate } from '../utils/reactUtils';
+import { useNavigation } from '../contexts/NavigationContext';
 import { loggers } from '../utils/logger';
 import type { MenuItem } from './menu/MenuItem';
 
@@ -63,9 +63,8 @@ const ResponsiveMenu: React.FC<ResponsiveMenuProps> = (props) => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const { appName, logo: contextLogo } = useQwickApp();
 
-  // React Router hooks (if available)
-  const navigate = useSafeNavigate();
-  const location = useSafeLocation();
+  // Navigation (uses React Router if available, falls back to window.location)
+  const { navigate, location } = useNavigation();
   const currentPath = location?.pathname;
   
   // Debug logging

package/src/components/Scaffold.tsx

@@ -24,7 +24,7 @@ import PaletteSwitcher from './buttons/PaletteSwitcher';
 import { RadioButtonUnchecked as DefaultIcon } from '@mui/icons-material';
 import { getIconComponent } from './buttons/Button';
 import './Scaffold.css';
-import { useSafeLocation, useSafeNavigate } from '../utils/reactUtils';
+import { useNavigation } from '../contexts/NavigationContext';
 import { loggers } from '../utils/logger';
 import type { MenuItem } from './menu/MenuItem';
 
@@ -92,9 +92,8 @@ const Scaffold: React.FC<ScaffoldProps> = ({
   const [isRailExpanded, setIsRailExpanded] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
 
-  // React Router hooks (if available)
-  const location = useSafeLocation();
-  const navigate = useSafeNavigate();
+  // Navigation (uses React Router if available, falls back to window.location)
+  const { navigate, location } = useNavigation();
   const currentPath = isMounted ? location?.pathname : undefined;
   
   // Debug logging for navigation

package/src/components/index.ts

@@ -25,6 +25,7 @@ export * from './layout';
 export * from './pages';
 export { default as Scaffold } from './Scaffold';
 export type { ScaffoldProps, AppBarProps } from './Scaffold';
+export type { MenuItem } from './menu/MenuItem';
 export { default as ResponsiveMenu } from './ResponsiveMenu';
 export type { ResponsiveMenuProps } from './ResponsiveMenu';
 export * from './QwickApp';

package/src/components/pages/Page.tsx

@@ -38,7 +38,7 @@ import { usePrintMode } from '../../hooks/usePrintMode';
 import { PageTemplateSchema } from '../../schemas/PageTemplateSchema';
 import { PrintConfigSchema } from '../../schemas/PrintConfigSchema';
 import { toCssLength } from '../../utils/cssUtils';
-import { useSafeLocation } from '../../utils/reactUtils';
+import { useNavigation } from '../../contexts/NavigationContext';
 import { SafeSpan } from '../SafeSpan';
 import './Page.css';
 import { Box } from '@mui/material';
@@ -275,7 +275,7 @@ export const PageView: React.FC<PageViewProps> = ({
   }, [isPrintMode, printConfig]);
 
   // Route (fallback to current location)
-  const location = useSafeLocation();
+  const { location } = useNavigation();
   const actualRoute = resolved.route || location?.pathname || '';
 
   // Context value