@qwickapps/react-framework 1.5.5 → 1.5.7

package/dist/index.js

@@ -10,6 +10,7 @@ var iconsMaterial = require('@mui/icons-material');
 var classValidator = require('class-validator');
 require('reflect-metadata');
 var classTransformer = require('class-transformer');
+var reactRouterDom = require('react-router-dom');
 
 /**
  * Breakpoint utilities for QwickApps React Framework
@@ -3074,181 +3075,189 @@ Code.transformCodeHighlight = element => {
 };
 
 /**
- * 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.
  */
 const iconMap = {
-  // Navigation & Layout
-  home: {
-    emoji: '🏠',
-    component: iconsMaterial.Home
-  },
-  menu: {
-    emoji: '☰',
-    component: iconsMaterial.Menu
-  },
-  dashboard: {
-    emoji: '📊',
-    component: iconsMaterial.Dashboard
-  },
-  // Information & Help
-  info: {
-    emoji: 'ℹ️',
-    component: iconsMaterial.Info
-  },
-  about: {
-    emoji: 'ℹ️',
-    component: iconsMaterial.Info
-  },
-  help: {
-    emoji: '❓',
-    component: iconsMaterial.Help
-  },
-  book: {
-    emoji: '📖',
-    component: iconsMaterial.Book
-  },
-  // Communication
-  email: {
-    emoji: '📧',
-    component: iconsMaterial.Email
-  },
-  contact: {
-    emoji: '📧',
-    component: iconsMaterial.Email
-  },
-  phone: {
-    emoji: '📱',
-    component: iconsMaterial.Phone
-  },
-  send: {
-    emoji: '📤',
-    component: iconsMaterial.Send
-  },
-  // Actions
+  // === Actions ===
   add: {
     emoji: '➕',
     component: iconsMaterial.Add
   },
-  edit: {
-    emoji: '✏️',
-    component: iconsMaterial.Edit
-  },
-  delete: {
-    emoji: '🗑️',
-    component: iconsMaterial.Delete
-  },
-  save: {
-    emoji: '💾',
-    component: iconsMaterial.Save
-  },
   check: {
     emoji: '✓',
     component: iconsMaterial.Check
   },
+  check_circle: {
+    emoji: '✅',
+    component: iconsMaterial.CheckCircle
+  },
   close: {
     emoji: '✕',
     component: iconsMaterial.Close
   },
-  // Navigation
-  arrowforward: {
-    emoji: '→',
-    component: iconsMaterial.ArrowForward
+  delete: {
+    emoji: '🗑️',
+    component: iconsMaterial.Delete
   },
-  arrowback: {
-    emoji: '←',
-    component: iconsMaterial.ArrowBack
+  edit: {
+    emoji: '✏️',
+    component: iconsMaterial.Edit
+  },
+  refresh: {
+    emoji: '🔄',
+    component: iconsMaterial.Refresh
+  },
+  rotate_right: {
+    emoji: '🔄',
+    component: iconsMaterial.RotateRight
+  },
+  save: {
+    emoji: '💾',
+    component: iconsMaterial.Save
   },
-  // Content
   search: {
     emoji: '🔍',
     component: iconsMaterial.Search
   },
+  send: {
+    emoji: '📤',
+    component: iconsMaterial.Send
+  },
   share: {
     emoji: '🔗',
     component: iconsMaterial.Share
   },
-  download: {
-    emoji: '⬇️',
-    component: iconsMaterial.Download
+  sync: {
+    emoji: '🔄',
+    component: iconsMaterial.Sync
   },
-  clouddownload: {
-    emoji: '☁️⬇️',
-    component: iconsMaterial.CloudDownload
+  // === Authentication & Security ===
+  block: {
+    emoji: '🚫',
+    component: iconsMaterial.Block
   },
-  cloudupload: {
-    emoji: '☁️⬆️',
-    component: iconsMaterial.CloudUpload
+  key: {
+    emoji: '🔑',
+    component: iconsMaterial.Key
   },
-  // User & Social
-  person: {
-    emoji: '👤',
-    component: iconsMaterial.Person
+  lock: {
+    emoji: '🔒',
+    component: iconsMaterial.Lock
   },
-  user: {
-    emoji: '👤',
-    component: iconsMaterial.Person
+  lock_open: {
+    emoji: '🔓',
+    component: iconsMaterial.LockOpen
   },
-  group: {
-    emoji: '👥',
-    component: iconsMaterial.Group
+  lockopen: {
+    emoji: '🔓',
+    component: iconsMaterial.LockOpen
   },
-  favorite: {
-    emoji: '❤️',
-    component: iconsMaterial.Favorite
+  // alias
+  login: {
+    emoji: '🔑',
+    component: iconsMaterial.Login
   },
-  star: {
-    emoji: '⭐',
-    component: iconsMaterial.Star
+  logout: {
+    emoji: '🚪',
+    component: iconsMaterial.Logout
+  },
+  security: {
+    emoji: '🔐',
+    component: iconsMaterial.Security
+  },
+  shield: {
+    emoji: '🛡️',
+    component: iconsMaterial.Shield
   },
   verified_user: {
     emoji: '✅',
     component: iconsMaterial.VerifiedUser
   },
-  // Business
+  visibility: {
+    emoji: '👁️',
+    component: iconsMaterial.Visibility
+  },
+  visibility_off: {
+    emoji: '🙈',
+    component: iconsMaterial.VisibilityOff
+  },
+  visibilityoff: {
+    emoji: '🙈',
+    component: iconsMaterial.VisibilityOff
+  },
+  // alias
+  vpn_key: {
+    emoji: '🔐',
+    component: iconsMaterial.VpnKey
+  },
+  // === Business & Commerce ===
+  attach_money: {
+    emoji: '💰',
+    component: iconsMaterial.AttachMoney
+  },
+  attachmoney: {
+    emoji: '💰',
+    component: iconsMaterial.AttachMoney
+  },
+  // alias
   business: {
     emoji: '🏢',
     component: iconsMaterial.Business
   },
-  shoppingcart: {
+  cart: {
     emoji: '🛒',
     component: iconsMaterial.ShoppingCart
   },
-  cart: {
+  // alias
+  shopping_cart: {
     emoji: '🛒',
     component: iconsMaterial.ShoppingCart
   },
-  attachmoney: {
-    emoji: '💰',
-    component: iconsMaterial.AttachMoney
+  shoppingcart: {
+    emoji: '🛒',
+    component: iconsMaterial.ShoppingCart
   },
-  // Security
-  lock: {
-    emoji: '🔒',
-    component: iconsMaterial.Lock
+  // alias
+  work: {
+    emoji: '💼',
+    component: iconsMaterial.Work
   },
-  lockopen: {
-    emoji: '🔓',
-    component: iconsMaterial.LockOpen
+  workspace_premium: {
+    emoji: '⭐',
+    component: iconsMaterial.WorkspacePremium
   },
-  visibility: {
-    emoji: '👁️',
-    component: iconsMaterial.Visibility
+  // === Communication ===
+  contact: {
+    emoji: '📧',
+    component: iconsMaterial.Email
   },
-  visibilityoff: {
-    emoji: '🙈',
-    component: iconsMaterial.VisibilityOff
+  // alias
+  email: {
+    emoji: '📧',
+    component: iconsMaterial.Email
   },
-  // System
-  settings: {
-    emoji: '⚙️',
-    component: iconsMaterial.Settings
+  mail: {
+    emoji: '📧',
+    component: iconsMaterial.Email
   },
-  computer: {
-    emoji: '💻',
-    component: iconsMaterial.Computer
+  // alias
+  notifications: {
+    emoji: '🔔',
+    component: iconsMaterial.Notifications
+  },
+  phone: {
+    emoji: '📱',
+    component: iconsMaterial.Phone
+  },
+  support_agent: {
+    emoji: '🛎️',
+    component: iconsMaterial.SupportAgent
   },
-  // Content Types
+  // === Content & Media ===
   article: {
     emoji: '📰',
     component: iconsMaterial.Article
@@ -3257,162 +3266,297 @@ const iconMap = {
     emoji: '📝',
     component: iconsMaterial.Book
   },
+  // alias
+  book: {
+    emoji: '📖',
+    component: iconsMaterial.Book
+  },
+  gallery: {
+    emoji: '🖼️',
+    component: iconsMaterial.InsertPhoto
+  },
+  // alias
+  image: {
+    emoji: '🖼️',
+    component: iconsMaterial.InsertPhoto
+  },
+  insert_photo: {
+    emoji: '🖼️',
+    component: iconsMaterial.InsertPhoto
+  },
+  library_books: {
+    emoji: '📚',
+    component: iconsMaterial.LibraryBooks
+  },
   news: {
     emoji: '📰',
-    component: iconsMaterial.Book
+    component: iconsMaterial.Article
   },
-  products: {
-    emoji: '🛍️',
-    component: iconsMaterial.ShoppingCart
+  // alias
+  photo_library: {
+    emoji: '📸',
+    component: iconsMaterial.PhotoLibrary
   },
-  services: {
-    emoji: '⚙️',
-    component: iconsMaterial.Settings
+  play: {
+    emoji: '▶️',
+    component: iconsMaterial.PlayArrow
+  },
+  // alias
+  play_arrow: {
+    emoji: '▶️',
+    component: iconsMaterial.PlayArrow
   },
   portfolio: {
     emoji: '💼',
     component: iconsMaterial.Business
   },
-  gallery: {
-    emoji: '🖼️',
-    component: iconsMaterial.Business
+  // alias
+  // === Development & Technology ===
+  architecture: {
+    emoji: '🏛️',
+    component: iconsMaterial.Architecture
   },
-  inventory: {
-    emoji: '📦',
-    component: iconsMaterial.Inventory
+  autorenew: {
+    emoji: '🔄',
+    component: iconsMaterial.Autorenew
   },
-  inventory_2: {
-    emoji: '📦',
-    component: iconsMaterial.Inventory2
+  cloud: {
+    emoji: '☁️',
+    component: iconsMaterial.Cloud
   },
-  speed: {
-    emoji: '⚡',
-    component: iconsMaterial.Speed
+  cloud_download: {
+    emoji: '☁️⬇️',
+    component: iconsMaterial.CloudDownload
   },
-  support_agent: {
-    emoji: '🛎️',
-    component: iconsMaterial.SupportAgent
+  cloud_upload: {
+    emoji: '☁️⬆️',
+    component: iconsMaterial.CloudUpload
   },
-  tune: {
-    emoji: '🎛️',
-    component: iconsMaterial.Tune
+  clouddownload: {
+    emoji: '☁️⬇️',
+    component: iconsMaterial.CloudDownload
+  },
+  // alias
+  cloudupload: {
+    emoji: '☁️⬆️',
+    component: iconsMaterial.CloudUpload
   },
-  // Development & Technology
+  // alias
   code: {
     emoji: '💻',
     component: iconsMaterial.Code
   },
-  psychology: {
-    emoji: '🧠',
-    component: iconsMaterial.Psychology
+  computer: {
+    emoji: '💻',
+    component: iconsMaterial.Computer
   },
-  autorenew: {
-    emoji: '🔄',
-    component: iconsMaterial.Autorenew
+  construction: {
+    emoji: '🚧',
+    component: iconsMaterial.Construction
   },
   integration_instructions: {
     emoji: '🔌',
     component: iconsMaterial.IntegrationInstructions
   },
-  construction: {
-    emoji: '🚧',
-    component: iconsMaterial.Construction
+  memory: {
+    emoji: '🧠',
+    component: iconsMaterial.Memory
   },
-  work: {
-    emoji: '💼',
-    component: iconsMaterial.Work
+  psychology: {
+    emoji: '🧠',
+    component: iconsMaterial.Psychology
+  },
+  rocket: {
+    emoji: '🚀',
+    component: iconsMaterial.Rocket
+  },
+  storage: {
+    emoji: '💾',
+    component: iconsMaterial.Storage
+  },
+  // === Navigation & Layout ===
+  arrow_back: {
+    emoji: '←',
+    component: iconsMaterial.ArrowBack
+  },
+  arrow_forward: {
+    emoji: '→',
+    component: iconsMaterial.ArrowForward
+  },
+  arrowback: {
+    emoji: '←',
+    component: iconsMaterial.ArrowBack
+  },
+  // alias
+  arrowforward: {
+    emoji: '→',
+    component: iconsMaterial.ArrowForward
+  },
+  // alias
+  dashboard: {
+    emoji: '📊',
+    component: iconsMaterial.Dashboard
+  },
+  download: {
+    emoji: '⬇️',
+    component: iconsMaterial.Download
+  },
+  explore: {
+    emoji: '🧭',
+    component: iconsMaterial.Explore
+  },
+  home: {
+    emoji: '🏠',
+    component: iconsMaterial.Home
   },
   layers: {
     emoji: '📚',
     component: iconsMaterial.Layers
   },
-  trending_up: {
-    emoji: '📈',
-    component: iconsMaterial.TrendingUp
+  menu: {
+    emoji: '☰',
+    component: iconsMaterial.Menu
   },
   route: {
     emoji: '🗺️',
     component: iconsMaterial.Route
   },
-  sync: {
-    emoji: '🔄',
-    component: iconsMaterial.Sync
+  settings: {
+    emoji: '⚙️',
+    component: iconsMaterial.Settings
   },
-  architecture: {
-    emoji: '🏛️',
-    component: iconsMaterial.Architecture
+  trending_up: {
+    emoji: '📈',
+    component: iconsMaterial.TrendingUp
   },
-  security: {
-    emoji: '🔐',
-    component: iconsMaterial.Security
+  tune: {
+    emoji: '🎛️',
+    component: iconsMaterial.Tune
   },
-  // Control Panel & Admin UI Icons
-  key: {
-    emoji: '🔑',
-    component: iconsMaterial.Key
+  // === Products & Inventory ===
+  inventory: {
+    emoji: '📦',
+    component: iconsMaterial.Inventory
   },
-  vpn_key: {
-    emoji: '🔐',
-    component: iconsMaterial.VpnKey
+  inventory_2: {
+    emoji: '📦',
+    component: iconsMaterial.Inventory2
   },
-  person_search: {
-    emoji: '🔍',
-    component: iconsMaterial.PersonSearch
+  local_offer: {
+    emoji: '🏷️',
+    component: iconsMaterial.LocalOffer
   },
-  manage_accounts: {
+  products: {
+    emoji: '🛍️',
+    component: iconsMaterial.ShoppingCart
+  },
+  // alias
+  services: {
+    emoji: '⚙️',
+    component: iconsMaterial.Settings
+  },
+  // alias
+  speed: {
+    emoji: '⚡',
+    component: iconsMaterial.Speed
+  },
+  // === Status & Feedback ===
+  about: {
+    emoji: 'ℹ️',
+    component: iconsMaterial.Info
+  },
+  // alias
+  favorite: {
+    emoji: '❤️',
+    component: iconsMaterial.Favorite
+  },
+  heart: {
+    emoji: '❤️',
+    component: iconsMaterial.Favorite
+  },
+  // alias
+  help: {
+    emoji: '❓',
+    component: iconsMaterial.Help
+  },
+  info: {
+    emoji: 'ℹ️',
+    component: iconsMaterial.Info
+  },
+  star: {
+    emoji: '⭐',
+    component: iconsMaterial.Star
+  },
+  // === Users & People ===
+  account_circle: {
+    emoji: '👤',
+    component: iconsMaterial.AccountCircle
+  },
+  group: {
     emoji: '👥',
-    component: iconsMaterial.ManageAccounts
+    component: iconsMaterial.Group
   },
-  storage: {
-    emoji: '💾',
-    component: iconsMaterial.Storage
+  manage_accounts: {
+    emoji: '👤',
+    component: iconsMaterial.ManageAccounts
   },
-  refresh: {
-    emoji: '🔄',
-    component: iconsMaterial.Refresh
+  people: {
+    emoji: '👥',
+    component: iconsMaterial.People
   },
-  block: {
-    emoji: '🚫',
-    component: iconsMaterial.Block
+  person: {
+    emoji: '👤',
+    component: iconsMaterial.Person
   },
-  check_circle: {
-    emoji: '✅',
-    component: iconsMaterial.CheckCircle
+  person_search: {
+    emoji: '🔍',
+    component: iconsMaterial.PersonSearch
   },
-  rotate_right: {
-    emoji: '🔄',
-    component: iconsMaterial.RotateRight
+  user: {
+    emoji: '👤',
+    component: iconsMaterial.Person
   },
-  memory: {
-    emoji: '🧠',
-    component: iconsMaterial.Memory
-  }
+  // alias
+  users: {
+    emoji: '👥',
+    component: iconsMaterial.People
+  } // alias
 };
 /**
  * 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
  */
 function getIconEmoji(iconName, fallback = '🔗') {
   if (!iconName) return fallback;
-  const mapping = iconMap[iconName.toLowerCase()];
-  return mapping?.emoji || iconName;
+  const normalized = iconName.toLowerCase();
+  const mapping = iconMap[normalized];
+  return mapping?.emoji || fallback;
 }
 /**
- * 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
  */
 function getIconComponent(iconName) {
   if (!iconName) return null;
-  const mapping = iconMap[iconName.toLowerCase()];
-  if (!mapping?.component) {
-    console.warn(`[IconMap] Icon "${iconName}" not found in registry`);
-    return null;
+  const normalized = iconName.toLowerCase();
+  const mapping = iconMap[normalized];
+  if (mapping?.component) {
+    const IconComponent = mapping.component;
+    return jsxRuntime.jsx(IconComponent, {});
+  }
+  // Fallback: Return HelpOutline icon and warn about unmapped icon
+  // Use registerIcon() to add app-specific icons at runtime
+  {
+    console.warn(`[IconMap] Icon "${iconName}" not found. Add it to iconMap or use registerIcon().`);
   }
-  const IconComponent = mapping.component;
-  return jsxRuntime.jsx(IconComponent, {});
+  return jsxRuntime.jsx(iconsMaterial.HelpOutline, {});
 }
 /**
  * Register a new icon or override an existing one
@@ -3422,13 +3566,14 @@ function registerIcon(name, mapping) {
   iconMap[name.toLowerCase()] = mapping;
 }
 /**
- * Check if an icon is registered
+ * Check if an icon is registered in the static map
+ * If false, getIconComponent will return HelpOutline fallback
  */
 function hasIcon(iconName) {
   return iconName.toLowerCase() in iconMap;
 }
 /**
- * Get all registered icon names
+ * Get all registered icon names from the static map
  */
 function getRegisteredIcons() {
   return Object.keys(iconMap);
@@ -4817,41 +4962,6 @@ var FormBlockModel = exports.FormBlockModel;
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
-/**
- * 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
- */
-const useSafeLocation = () => {
-  // Use browser location if available (works in any React app)
-  if (typeof window !== 'undefined') {
-    return {
-      pathname: window.location.pathname,
-      search: window.location.search,
-      hash: window.location.hash
-    };
-  }
-  return undefined;
-};
-/**
- * Get a navigation function with fallback to window.location
- * Works without relying on routing libraries
- * @returns {NavigateFunction} - The navigate function
- */
-const useSafeNavigate = () => {
-  // Return function that uses window.location
-  return to => {
-    if (typeof to === 'string') {
-      if (typeof window !== 'undefined') {
-        window.location.href = to;
-      }
-    } else if (typeof to === 'number') {
-      if (typeof window !== 'undefined' && window.history) {
-        window.history.go(to);
-      }
-    }
-  };
-};
 /**
  * Extract text content from ReactNode for code processing
  * Handles natural React usage like <Code>const x = 1;</Code>
@@ -23388,6 +23498,121 @@ const useDimensions = () => {
   return context;
 };
 
+const NavigationContext = /*#__PURE__*/React.createContext(null);
+/**
+ * Internal provider that uses React Router hooks
+ * Only rendered when we're inside a Router context
+ */
+function ReactRouterNavigationProvider({
+  children
+}) {
+  const reactRouterNavigate = reactRouterDom.useNavigate();
+  const reactRouterLocation = reactRouterDom.useLocation();
+  const navigate = to => {
+    if (typeof to === 'string') {
+      reactRouterNavigate(to);
+    } else if (typeof to === 'number') {
+      reactRouterNavigate(to);
+    }
+  };
+  // Defensive check for location - fall back to window.location if React Router's location is undefined
+  const location = 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 jsxRuntime.jsx(NavigationContext.Provider, {
+    value: {
+      navigate,
+      location
+    },
+    children: children
+  });
+}
+/**
+ * Internal provider that uses window.location fallback
+ * Used when not inside a React Router context
+ */
+function FallbackNavigationProvider({
+  children
+}) {
+  const navigate = to => {
+    if (typeof window === 'undefined') return;
+    if (typeof to === 'string') {
+      window.location.href = to;
+    } else if (typeof to === 'number') {
+      window.history.go(to);
+    }
+  };
+  const location = typeof window !== 'undefined' ? {
+    pathname: window.location.pathname,
+    search: window.location.search,
+    hash: window.location.hash
+  } : undefined;
+  return jsxRuntime.jsx(NavigationContext.Provider, {
+    value: {
+      navigate,
+      location
+    },
+    children: children
+  });
+}
+/**
+ * Smart Navigation Provider
+ *
+ * Automatically detects if the app is inside a React Router context:
+ * - If inside Router: uses React Router's useNavigate/useLocation (respects basename)
+ * - If outside Router: falls back to window.location
+ *
+ * This is included automatically by QwickApp - you don't need to add it manually.
+ */
+function NavigationProvider({
+  children
+}) {
+  // Check if we're inside a React Router using the official hook
+  // This is more reliable than checking internal UNSAFE contexts
+  const isInRouter = reactRouterDom.useInRouterContext();
+  if (isInRouter) {
+    // We're inside a Router, use React Router's navigation
+    return jsxRuntime.jsx(ReactRouterNavigationProvider, {
+      children: children
+    });
+  }
+  // Not inside a Router, use window.location fallback
+  return jsxRuntime.jsx(FallbackNavigationProvider, {
+    children: children
+  });
+}
+/**
+ * Hook to access navigation functions
+ *
+ * @returns Object containing navigate function and current location
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { navigate, location } = useNavigation();
+ *
+ *   const handleClick = () => {
+ *     navigate('/dashboard');
+ *   };
+ *
+ *   return <button onClick={handleClick}>Go to Dashboard</button>;
+ * }
+ * ```
+ */
+function useNavigation() {
+  const context = React.useContext(NavigationContext);
+  if (!context) {
+    throw new Error('useNavigation must be used within a NavigationProvider. ' + 'Make sure your component is wrapped in QwickApp or NavigationProvider.');
+  }
+  return context;
+}
+
 /**
  * Schema for PaletteSwitcher component - Color palette switching control
  *
@@ -24535,7 +24760,9 @@ const PageView = ({
     };
   }, [isPrintMode, printConfig]);
   // Route (fallback to current location)
-  const location = useSafeLocation();
+  const {
+    location
+  } = useNavigation();
   const actualRoute = resolved.route || location?.pathname || '';
   // Context value
   const contextValue = React.useMemo(() => ({
@@ -24650,9 +24877,11 @@ const Scaffold = ({
   const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
   const [isRailExpanded, setIsRailExpanded] = React.useState(false);
   const [isMounted, setIsMounted] = React.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
   React.useEffect(() => {
@@ -25021,9 +25250,11 @@ const ResponsiveMenu = props => {
     appName,
     logo: contextLogo
   } = useQwickApp$1();
-  // 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
   React.useEffect(() => {
@@ -25898,6 +26129,15 @@ const QwickApp = ({
       ...updates
     }));
   };
+  // Sync logo prop changes with internal state (for dynamic logo updates)
+  React.useEffect(() => {
+    if (resolvedConfig.logo !== appConfig.logo) {
+      setAppConfig(prev => ({
+        ...prev,
+        logo: resolvedConfig.logo
+      }));
+    }
+  }, [resolvedConfig.logo]);
   const contextValue = {
     appName: resolvedConfig.appName,
     // Safe to use ! since we validated above
@@ -25925,17 +26165,19 @@ const QwickApp = ({
   }) : content;
   const appContent = jsxRuntime.jsx(ErrorBoundary, {
     children: jsxRuntime.jsx(AccessibilityProvider, {
-      children: jsxRuntime.jsx("div", {
-        className: `qwick-app ${className || ''}`,
-        style: style,
-        children: jsxRuntime.jsx(ThemeProvider, {
-          appId: resolvedConfig.appId,
-          defaultTheme: resolvedConfig.defaultTheme,
-          defaultPalette: resolvedConfig.defaultPalette,
-          children: jsxRuntime.jsx(QwickAppContext.Provider, {
-            value: contextValue,
-            children: jsxRuntime.jsx(PrintModeProvider, {
-              children: wrappedContent
+      children: jsxRuntime.jsx(NavigationProvider, {
+        children: jsxRuntime.jsx("div", {
+          className: `qwick-app ${className || ''}`,
+          style: style,
+          children: jsxRuntime.jsx(ThemeProvider, {
+            appId: resolvedConfig.appId,
+            defaultTheme: resolvedConfig.defaultTheme,
+            defaultPalette: resolvedConfig.defaultPalette,
+            children: jsxRuntime.jsx(QwickAppContext.Provider, {
+              value: contextValue,
+              children: jsxRuntime.jsx(PrintModeProvider, {
+                children: wrappedContent
+              })
             })
           })
         })
@@ -31854,6 +32096,7 @@ exports.Image = Image;
 exports.Logo = Logo;
 exports.Markdown = Markdown;
 exports.ModelView = ModelView;
+exports.NavigationProvider = NavigationProvider;
 exports.Page = Page;
 exports.PageBannerHeader = PageBannerHeader;
 exports.PaletteAutumn = PaletteAutumn;
@@ -31954,14 +32197,13 @@ exports.useDataBinding = useDataBinding;
 exports.useDataContext = useDataContext;
 exports.useDataProvider = useDataProvider;
 exports.useDimensions = useDimensions;
+exports.useNavigation = useNavigation;
 exports.usePageContext = usePageContext;
 exports.usePalette = usePalette;
 exports.usePrintMode = usePrintMode$1;
 exports.usePrintModeHook = usePrintMode;
 exports.useQwickApp = useQwickApp;
 exports.useResolveTemplate = useResolveTemplate;
-exports.useSafeLocation = useSafeLocation;
-exports.useSafeNavigate = useSafeNavigate;
 exports.useTemplate = useTemplate;
 exports.useTheme = useTheme;
 exports.withAccessibility = withAccessibility;