@qwickapps/react-framework 1.5.5 → 1.5.7

package/dist/index.esm.js

@@ -4,10 +4,11 @@ import { useMediaQuery, Box, useTheme as useTheme$1, Paper, Typography, Tooltip,
 import React, { useMemo, useContext, useState, useCallback, useEffect, createContext, useReducer, useRef, isValidElement, createElement, useId, useLayoutEffect, Component, cloneElement } from 'react';
 import { MustacheTemplateProvider, MemoryCacheProvider, CachedDataProvider, Field, Editor, FieldType, Schema, Model, DataType } from '@qwickapps/schema';
 import { createTheme, ThemeProvider as ThemeProvider$1 } from '@mui/material/styles';
-import { Check, ContentCopy, Home, Menu, Dashboard, Info, Help, Book, Email, Phone, Send, Add, Edit, Delete, Save, Close, ArrowForward, ArrowBack, Search, Share, Download, CloudDownload, CloudUpload, Person, Group, Favorite, Star, VerifiedUser, Business, ShoppingCart, AttachMoney, Lock, LockOpen, Visibility, VisibilityOff, Settings, Computer, Article as Article$1, Inventory, Inventory2, Speed, SupportAgent, Tune, Code as Code$1, Psychology, Autorenew, IntegrationInstructions, Construction, Work, Layers, TrendingUp, Route, Sync, Architecture, Security, Key, VpnKey, PersonSearch, ManageAccounts, Storage, Refresh, Block, CheckCircle, RotateRight, Memory, BrokenImage, MoreVert, FormatBold, FormatItalic, FormatUnderlined, ExpandMore, ExpandLess, Schedule, Launch, LightMode, DarkMode, SettingsSystemDaydream, Palette, Circle, RadioButtonUnchecked } from '@mui/icons-material';
+import { Check, ContentCopy, Add, CheckCircle, Close, Delete, Edit, Refresh, RotateRight, Save, Search, Send, Share, Sync, Block, Key, Lock, LockOpen, Login, Logout, Security, Shield, VerifiedUser, Visibility, VisibilityOff, VpnKey, AttachMoney, Business, ShoppingCart, Work, WorkspacePremium, Email, Notifications, Phone, SupportAgent, Article as Article$1, Book, InsertPhoto, LibraryBooks, PhotoLibrary, PlayArrow, Architecture, Autorenew, Cloud, CloudDownload, CloudUpload, Code as Code$1, Computer, Construction, IntegrationInstructions, Memory, Psychology, Rocket, Storage, ArrowBack, ArrowForward, Dashboard, Download, Explore, Home, Layers, Menu, Route, Settings, TrendingUp, Tune, Inventory, Inventory2, LocalOffer, Speed, Info, Favorite, Help, Star, AccountCircle, Group, ManageAccounts, People, Person, PersonSearch, HelpOutline, BrokenImage, MoreVert, FormatBold, FormatItalic, FormatUnderlined, ExpandMore, ExpandLess, Schedule, Launch, LightMode, DarkMode, SettingsSystemDaydream, Palette, Circle, RadioButtonUnchecked } from '@mui/icons-material';
 import { IsOptional, ValidateIf, IsIn, IsInt, Min, IsString, IsNotEmpty, IsBoolean, IsNumber, Max, IsArray, ValidateNested, IsUrl, IsObject } from 'class-validator';
 import 'reflect-metadata';
 import { Type } from 'class-transformer';
+import { useInRouterContext, useNavigate, useLocation } from 'react-router-dom';
 
 /**
  * Breakpoint utilities for QwickApps React Framework
@@ -3072,181 +3073,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: Home
-  },
-  menu: {
-    emoji: '☰',
-    component: Menu
-  },
-  dashboard: {
-    emoji: '📊',
-    component: Dashboard
-  },
-  // Information & Help
-  info: {
-    emoji: 'ℹ️',
-    component: Info
-  },
-  about: {
-    emoji: 'ℹ️',
-    component: Info
-  },
-  help: {
-    emoji: '❓',
-    component: Help
-  },
-  book: {
-    emoji: '📖',
-    component: Book
-  },
-  // Communication
-  email: {
-    emoji: '📧',
-    component: Email
-  },
-  contact: {
-    emoji: '📧',
-    component: Email
-  },
-  phone: {
-    emoji: '📱',
-    component: Phone
-  },
-  send: {
-    emoji: '📤',
-    component: Send
-  },
-  // Actions
+  // === Actions ===
   add: {
     emoji: '➕',
     component: Add
   },
-  edit: {
-    emoji: '✏️',
-    component: Edit
-  },
-  delete: {
-    emoji: '🗑️',
-    component: Delete
-  },
-  save: {
-    emoji: '💾',
-    component: Save
-  },
   check: {
     emoji: '✓',
     component: Check
   },
+  check_circle: {
+    emoji: '✅',
+    component: CheckCircle
+  },
   close: {
     emoji: '✕',
     component: Close
   },
-  // Navigation
-  arrowforward: {
-    emoji: '→',
-    component: ArrowForward
+  delete: {
+    emoji: '🗑️',
+    component: Delete
   },
-  arrowback: {
-    emoji: '←',
-    component: ArrowBack
+  edit: {
+    emoji: '✏️',
+    component: Edit
+  },
+  refresh: {
+    emoji: '🔄',
+    component: Refresh
+  },
+  rotate_right: {
+    emoji: '🔄',
+    component: RotateRight
+  },
+  save: {
+    emoji: '💾',
+    component: Save
   },
-  // Content
   search: {
     emoji: '🔍',
     component: Search
   },
+  send: {
+    emoji: '📤',
+    component: Send
+  },
   share: {
     emoji: '🔗',
     component: Share
   },
-  download: {
-    emoji: '⬇️',
-    component: Download
+  sync: {
+    emoji: '🔄',
+    component: Sync
   },
-  clouddownload: {
-    emoji: '☁️⬇️',
-    component: CloudDownload
+  // === Authentication & Security ===
+  block: {
+    emoji: '🚫',
+    component: Block
   },
-  cloudupload: {
-    emoji: '☁️⬆️',
-    component: CloudUpload
+  key: {
+    emoji: '🔑',
+    component: Key
   },
-  // User & Social
-  person: {
-    emoji: '👤',
-    component: Person
+  lock: {
+    emoji: '🔒',
+    component: Lock
   },
-  user: {
-    emoji: '👤',
-    component: Person
+  lock_open: {
+    emoji: '🔓',
+    component: LockOpen
   },
-  group: {
-    emoji: '👥',
-    component: Group
+  lockopen: {
+    emoji: '🔓',
+    component: LockOpen
   },
-  favorite: {
-    emoji: '❤️',
-    component: Favorite
+  // alias
+  login: {
+    emoji: '🔑',
+    component: Login
   },
-  star: {
-    emoji: '⭐',
-    component: Star
+  logout: {
+    emoji: '🚪',
+    component: Logout
+  },
+  security: {
+    emoji: '🔐',
+    component: Security
+  },
+  shield: {
+    emoji: '🛡️',
+    component: Shield
   },
   verified_user: {
     emoji: '✅',
     component: VerifiedUser
   },
-  // Business
+  visibility: {
+    emoji: '👁️',
+    component: Visibility
+  },
+  visibility_off: {
+    emoji: '🙈',
+    component: VisibilityOff
+  },
+  visibilityoff: {
+    emoji: '🙈',
+    component: VisibilityOff
+  },
+  // alias
+  vpn_key: {
+    emoji: '🔐',
+    component: VpnKey
+  },
+  // === Business & Commerce ===
+  attach_money: {
+    emoji: '💰',
+    component: AttachMoney
+  },
+  attachmoney: {
+    emoji: '💰',
+    component: AttachMoney
+  },
+  // alias
   business: {
     emoji: '🏢',
     component: Business
   },
-  shoppingcart: {
+  cart: {
     emoji: '🛒',
     component: ShoppingCart
   },
-  cart: {
+  // alias
+  shopping_cart: {
     emoji: '🛒',
     component: ShoppingCart
   },
-  attachmoney: {
-    emoji: '💰',
-    component: AttachMoney
+  shoppingcart: {
+    emoji: '🛒',
+    component: ShoppingCart
   },
-  // Security
-  lock: {
-    emoji: '🔒',
-    component: Lock
+  // alias
+  work: {
+    emoji: '💼',
+    component: Work
   },
-  lockopen: {
-    emoji: '🔓',
-    component: LockOpen
+  workspace_premium: {
+    emoji: '⭐',
+    component: WorkspacePremium
   },
-  visibility: {
-    emoji: '👁️',
-    component: Visibility
+  // === Communication ===
+  contact: {
+    emoji: '📧',
+    component: Email
   },
-  visibilityoff: {
-    emoji: '🙈',
-    component: VisibilityOff
+  // alias
+  email: {
+    emoji: '📧',
+    component: Email
   },
-  // System
-  settings: {
-    emoji: '⚙️',
-    component: Settings
+  mail: {
+    emoji: '📧',
+    component: Email
   },
-  computer: {
-    emoji: '💻',
-    component: Computer
+  // alias
+  notifications: {
+    emoji: '🔔',
+    component: Notifications
+  },
+  phone: {
+    emoji: '📱',
+    component: Phone
+  },
+  support_agent: {
+    emoji: '🛎️',
+    component: SupportAgent
   },
-  // Content Types
+  // === Content & Media ===
   article: {
     emoji: '📰',
     component: Article$1
@@ -3255,162 +3264,297 @@ const iconMap = {
     emoji: '📝',
     component: Book
   },
+  // alias
+  book: {
+    emoji: '📖',
+    component: Book
+  },
+  gallery: {
+    emoji: '🖼️',
+    component: InsertPhoto
+  },
+  // alias
+  image: {
+    emoji: '🖼️',
+    component: InsertPhoto
+  },
+  insert_photo: {
+    emoji: '🖼️',
+    component: InsertPhoto
+  },
+  library_books: {
+    emoji: '📚',
+    component: LibraryBooks
+  },
   news: {
     emoji: '📰',
-    component: Book
+    component: Article$1
   },
-  products: {
-    emoji: '🛍️',
-    component: ShoppingCart
+  // alias
+  photo_library: {
+    emoji: '📸',
+    component: PhotoLibrary
   },
-  services: {
-    emoji: '⚙️',
-    component: Settings
+  play: {
+    emoji: '▶️',
+    component: PlayArrow
+  },
+  // alias
+  play_arrow: {
+    emoji: '▶️',
+    component: PlayArrow
   },
   portfolio: {
     emoji: '💼',
     component: Business
   },
-  gallery: {
-    emoji: '🖼️',
-    component: Business
+  // alias
+  // === Development & Technology ===
+  architecture: {
+    emoji: '🏛️',
+    component: Architecture
   },
-  inventory: {
-    emoji: '📦',
-    component: Inventory
+  autorenew: {
+    emoji: '🔄',
+    component: Autorenew
   },
-  inventory_2: {
-    emoji: '📦',
-    component: Inventory2
+  cloud: {
+    emoji: '☁️',
+    component: Cloud
   },
-  speed: {
-    emoji: '⚡',
-    component: Speed
+  cloud_download: {
+    emoji: '☁️⬇️',
+    component: CloudDownload
   },
-  support_agent: {
-    emoji: '🛎️',
-    component: SupportAgent
+  cloud_upload: {
+    emoji: '☁️⬆️',
+    component: CloudUpload
   },
-  tune: {
-    emoji: '🎛️',
-    component: Tune
+  clouddownload: {
+    emoji: '☁️⬇️',
+    component: CloudDownload
+  },
+  // alias
+  cloudupload: {
+    emoji: '☁️⬆️',
+    component: CloudUpload
   },
-  // Development & Technology
+  // alias
   code: {
     emoji: '💻',
     component: Code$1
   },
-  psychology: {
-    emoji: '🧠',
-    component: Psychology
+  computer: {
+    emoji: '💻',
+    component: Computer
   },
-  autorenew: {
-    emoji: '🔄',
-    component: Autorenew
+  construction: {
+    emoji: '🚧',
+    component: Construction
   },
   integration_instructions: {
     emoji: '🔌',
     component: IntegrationInstructions
   },
-  construction: {
-    emoji: '🚧',
-    component: Construction
+  memory: {
+    emoji: '🧠',
+    component: Memory
   },
-  work: {
-    emoji: '💼',
-    component: Work
+  psychology: {
+    emoji: '🧠',
+    component: Psychology
+  },
+  rocket: {
+    emoji: '🚀',
+    component: Rocket
+  },
+  storage: {
+    emoji: '💾',
+    component: Storage
+  },
+  // === Navigation & Layout ===
+  arrow_back: {
+    emoji: '←',
+    component: ArrowBack
+  },
+  arrow_forward: {
+    emoji: '→',
+    component: ArrowForward
+  },
+  arrowback: {
+    emoji: '←',
+    component: ArrowBack
+  },
+  // alias
+  arrowforward: {
+    emoji: '→',
+    component: ArrowForward
+  },
+  // alias
+  dashboard: {
+    emoji: '📊',
+    component: Dashboard
+  },
+  download: {
+    emoji: '⬇️',
+    component: Download
+  },
+  explore: {
+    emoji: '🧭',
+    component: Explore
+  },
+  home: {
+    emoji: '🏠',
+    component: Home
   },
   layers: {
     emoji: '📚',
     component: Layers
   },
-  trending_up: {
-    emoji: '📈',
-    component: TrendingUp
+  menu: {
+    emoji: '☰',
+    component: Menu
   },
   route: {
     emoji: '🗺️',
     component: Route
   },
-  sync: {
-    emoji: '🔄',
-    component: Sync
+  settings: {
+    emoji: '⚙️',
+    component: Settings
   },
-  architecture: {
-    emoji: '🏛️',
-    component: Architecture
+  trending_up: {
+    emoji: '📈',
+    component: TrendingUp
   },
-  security: {
-    emoji: '🔐',
-    component: Security
+  tune: {
+    emoji: '🎛️',
+    component: Tune
   },
-  // Control Panel & Admin UI Icons
-  key: {
-    emoji: '🔑',
-    component: Key
+  // === Products & Inventory ===
+  inventory: {
+    emoji: '📦',
+    component: Inventory
   },
-  vpn_key: {
-    emoji: '🔐',
-    component: VpnKey
+  inventory_2: {
+    emoji: '📦',
+    component: Inventory2
   },
-  person_search: {
-    emoji: '🔍',
-    component: PersonSearch
+  local_offer: {
+    emoji: '🏷️',
+    component: LocalOffer
   },
-  manage_accounts: {
+  products: {
+    emoji: '🛍️',
+    component: ShoppingCart
+  },
+  // alias
+  services: {
+    emoji: '⚙️',
+    component: Settings
+  },
+  // alias
+  speed: {
+    emoji: '⚡',
+    component: Speed
+  },
+  // === Status & Feedback ===
+  about: {
+    emoji: 'ℹ️',
+    component: Info
+  },
+  // alias
+  favorite: {
+    emoji: '❤️',
+    component: Favorite
+  },
+  heart: {
+    emoji: '❤️',
+    component: Favorite
+  },
+  // alias
+  help: {
+    emoji: '❓',
+    component: Help
+  },
+  info: {
+    emoji: 'ℹ️',
+    component: Info
+  },
+  star: {
+    emoji: '⭐',
+    component: Star
+  },
+  // === Users & People ===
+  account_circle: {
+    emoji: '👤',
+    component: AccountCircle
+  },
+  group: {
     emoji: '👥',
-    component: ManageAccounts
+    component: Group
   },
-  storage: {
-    emoji: '💾',
-    component: Storage
+  manage_accounts: {
+    emoji: '👤',
+    component: ManageAccounts
   },
-  refresh: {
-    emoji: '🔄',
-    component: Refresh
+  people: {
+    emoji: '👥',
+    component: People
   },
-  block: {
-    emoji: '🚫',
-    component: Block
+  person: {
+    emoji: '👤',
+    component: Person
   },
-  check_circle: {
-    emoji: '✅',
-    component: CheckCircle
+  person_search: {
+    emoji: '🔍',
+    component: PersonSearch
   },
-  rotate_right: {
-    emoji: '🔄',
-    component: RotateRight
+  user: {
+    emoji: '👤',
+    component: Person
   },
-  memory: {
-    emoji: '🧠',
-    component: Memory
-  }
+  // alias
+  users: {
+    emoji: '👥',
+    component: 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 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 jsx(IconComponent, {});
+  return jsx(HelpOutline, {});
 }
 /**
  * Register a new icon or override an existing one
@@ -3420,13 +3564,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);
@@ -4815,41 +4960,6 @@ var FormBlockModel$1 = 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>
@@ -23386,6 +23496,121 @@ const useDimensions = () => {
   return context;
 };
 
+const NavigationContext = /*#__PURE__*/createContext(null);
+/**
+ * Internal provider that uses React Router hooks
+ * Only rendered when we're inside a Router context
+ */
+function ReactRouterNavigationProvider({
+  children
+}) {
+  const reactRouterNavigate = useNavigate();
+  const reactRouterLocation = 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 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 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 = useInRouterContext();
+  if (isInRouter) {
+    // We're inside a Router, use React Router's navigation
+    return jsx(ReactRouterNavigationProvider, {
+      children: children
+    });
+  }
+  // Not inside a Router, use window.location fallback
+  return 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 = 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
  *
@@ -24533,7 +24758,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 = useMemo(() => ({
@@ -24648,9 +24875,11 @@ const Scaffold = ({
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   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
   React.useEffect(() => {
@@ -25019,9 +25248,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(() => {
@@ -25896,6 +26127,15 @@ const QwickApp = ({
       ...updates
     }));
   };
+  // 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 = {
     appName: resolvedConfig.appName,
     // Safe to use ! since we validated above
@@ -25923,17 +26163,19 @@ const QwickApp = ({
   }) : content;
   const appContent = jsx(ErrorBoundary, {
     children: jsx(AccessibilityProvider, {
-      children: jsx("div", {
-        className: `qwick-app ${className || ''}`,
-        style: style,
-        children: jsx(ThemeProvider, {
-          appId: resolvedConfig.appId,
-          defaultTheme: resolvedConfig.defaultTheme,
-          defaultPalette: resolvedConfig.defaultPalette,
-          children: jsx(QwickAppContext.Provider, {
-            value: contextValue,
-            children: jsx(PrintModeProvider, {
-              children: wrappedContent
+      children: jsx(NavigationProvider, {
+        children: jsx("div", {
+          className: `qwick-app ${className || ''}`,
+          style: style,
+          children: jsx(ThemeProvider, {
+            appId: resolvedConfig.appId,
+            defaultTheme: resolvedConfig.defaultTheme,
+            defaultPalette: resolvedConfig.defaultPalette,
+            children: jsx(QwickAppContext.Provider, {
+              value: contextValue,
+              children: jsx(PrintModeProvider, {
+                children: wrappedContent
+              })
             })
           })
         })
@@ -31808,4 +32050,4 @@ __decorate([Field({
 }), IsOptional(), __metadata("design:type", Boolean)], PageTemplateSchema.prototype, "indexable", void 0);
 PageTemplateSchema = __decorate([Schema('PageTemplate', '1.0.0')], PageTemplateSchema);
 
-export { AVAILABLE_PALETTES, AccessibilityProvider, ActionModel, ActionType, AllPalettes, AppConfig, AppConfigBuilder, Article, ArticleModel, Breadcrumbs, Button, Captcha, CardListGrid, CardListGridModel, ChoiceInputField, ChoiceInputFieldModel, Code, CodeModel, CollapsibleLayout, CollapsibleLayoutView, ComponentTransformer$1 as ComponentTransformer, Container$8 as Container, Content, ContentModel, CoverImageHeader, CoverImageHeaderModel, DataProvider, DataProxy, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, DimensionsProvider, ErrorBoundary, FeatureCard, FeatureCardActionModel, FeatureCardModel, FeatureGrid, FeatureGridModel, FeatureItemModel, Footer, FooterItemModel, FooterModel, FooterSectionModel, FormBlock, FormBlockModel, FormCheckbox, FormField, FormMethod, FormPage, FormSelect, GridCell, GridCellModel, GridLayout, GridLayoutModel, HeaderActionModel, HeroBlock, HeroBlockModel, Html, HtmlInputField, HtmlModel, Image, ImageModel, Logo, Markdown, MarkdownModel, MetadataItemModel, ModelView, Page, PageBannerHeader, PageBannerHeaderModel, PageTemplateSchema, PaletteAutumn, PaletteCosmic, PaletteDefault, PaletteOcean, PaletteProvider, PaletteSpring, PaletteSwitcher, PaletteSwitcherModel, PaletteWinter, PrintConfigSchema, PrintModeProvider, ProductCard, ProductCardActionModel, ProductCardModel, ProductLogo, ProductModel, QWICKAPP_COMPONENT, QwickApp, QwickAppsLogo, QwickIcon, ResponsiveMenu, SafeSpan, SafeSpanModel, Scaffold, Section, SectionModel, SelectInputField, SwitchInputField, T, Text$1 as Text, TextField, TextInputField, TextInputFieldModel, TextModel, ThemeProvider, ThemeSwitcher, ThemeSwitcherModel, ViewSchema, animationConfigs, applyCustomPalette, clearManifestCache, clearPaletteCache, clearUserPalettePreference, clearUserThemePreference, configurePaletteLoader, createAppConfig, createModelViewClass, createPaletteFromCurrentTheme, createSerializableView, defaultCollapsibleLayoutProps, deleteCustomPalette, exportPalette, extractTextFromReactNode, getAvailablePalettes, getCSSVariable, getComputedTheme, getCurrentPalette, getCurrentTheme, getCustomPalettes, getIconComponent, getIconEmoji, getLogger, getPaletteConfig, getPaletteFromManifest, getPaletteName, getRegisteredIcons, getSystemTheme, getThemePerformanceStats, hasIcon, iconMap, importPalette, initializePalette, initializeTheme, isCollapsibleLayoutProps, isPaletteLoaded, loadPalette, loadPaletteManifest, loadUserPalettePreference, loadUserThemePreference, logThemePerformanceStats, loggers, preloadPalettes, registerCustomPalette, registerIcon, resetThemePerformanceStats, resolveDimension, resolveDimensions, resolveSpacing, resolveSpacingProps, saveCustomPalette, savePalettePreference, saveThemePreference, saveUserPalettePreference, saveUserThemePreference, setCSSVariable, setPalette, setTheme, spacingConfigs, t, toCssLength, useAccessibility, useBaseProps, useBreadcrumbs, useCollapsibleState, useData, useDataBinding, useDataContext, useDataProvider, useDimensions, usePageContext, usePalette, usePrintMode$1 as usePrintMode, usePrintMode as usePrintModeHook, useQwickApp, useResolveTemplate, useSafeLocation, useSafeNavigate, useTemplate, useTheme, withAccessibility, withErrorBoundary };
+export { AVAILABLE_PALETTES, AccessibilityProvider, ActionModel, ActionType, AllPalettes, AppConfig, AppConfigBuilder, Article, ArticleModel, Breadcrumbs, Button, Captcha, CardListGrid, CardListGridModel, ChoiceInputField, ChoiceInputFieldModel, Code, CodeModel, CollapsibleLayout, CollapsibleLayoutView, ComponentTransformer$1 as ComponentTransformer, Container$8 as Container, Content, ContentModel, CoverImageHeader, CoverImageHeaderModel, DataProvider, DataProxy, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, DimensionsProvider, ErrorBoundary, FeatureCard, FeatureCardActionModel, FeatureCardModel, FeatureGrid, FeatureGridModel, FeatureItemModel, Footer, FooterItemModel, FooterModel, FooterSectionModel, FormBlock, FormBlockModel, FormCheckbox, FormField, FormMethod, FormPage, FormSelect, GridCell, GridCellModel, GridLayout, GridLayoutModel, HeaderActionModel, HeroBlock, HeroBlockModel, Html, HtmlInputField, HtmlModel, Image, ImageModel, Logo, Markdown, MarkdownModel, MetadataItemModel, ModelView, NavigationProvider, Page, PageBannerHeader, PageBannerHeaderModel, PageTemplateSchema, PaletteAutumn, PaletteCosmic, PaletteDefault, PaletteOcean, PaletteProvider, PaletteSpring, PaletteSwitcher, PaletteSwitcherModel, PaletteWinter, PrintConfigSchema, PrintModeProvider, ProductCard, ProductCardActionModel, ProductCardModel, ProductLogo, ProductModel, QWICKAPP_COMPONENT, QwickApp, QwickAppsLogo, QwickIcon, ResponsiveMenu, SafeSpan, SafeSpanModel, Scaffold, Section, SectionModel, SelectInputField, SwitchInputField, T, Text$1 as Text, TextField, TextInputField, TextInputFieldModel, TextModel, ThemeProvider, ThemeSwitcher, ThemeSwitcherModel, ViewSchema, animationConfigs, applyCustomPalette, clearManifestCache, clearPaletteCache, clearUserPalettePreference, clearUserThemePreference, configurePaletteLoader, createAppConfig, createModelViewClass, createPaletteFromCurrentTheme, createSerializableView, defaultCollapsibleLayoutProps, deleteCustomPalette, exportPalette, extractTextFromReactNode, getAvailablePalettes, getCSSVariable, getComputedTheme, getCurrentPalette, getCurrentTheme, getCustomPalettes, getIconComponent, getIconEmoji, getLogger, getPaletteConfig, getPaletteFromManifest, getPaletteName, getRegisteredIcons, getSystemTheme, getThemePerformanceStats, hasIcon, iconMap, importPalette, initializePalette, initializeTheme, isCollapsibleLayoutProps, isPaletteLoaded, loadPalette, loadPaletteManifest, loadUserPalettePreference, loadUserThemePreference, logThemePerformanceStats, loggers, preloadPalettes, registerCustomPalette, registerIcon, resetThemePerformanceStats, resolveDimension, resolveDimensions, resolveSpacing, resolveSpacingProps, saveCustomPalette, savePalettePreference, saveThemePreference, saveUserPalettePreference, saveUserThemePreference, setCSSVariable, setPalette, setTheme, spacingConfigs, t, toCssLength, useAccessibility, useBaseProps, useBreadcrumbs, useCollapsibleState, useData, useDataBinding, useDataContext, useDataProvider, useDimensions, useNavigation, usePageContext, usePalette, usePrintMode$1 as usePrintMode, usePrintMode as usePrintModeHook, useQwickApp, useResolveTemplate, useTemplate, useTheme, withAccessibility, withErrorBoundary };