@qwickapps/react-framework 1.5.6 → 1.5.7

package/dist/index.js

@@ -3075,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
   },
-  // Content Types
+  phone: {
+    emoji: '📱',
+    component: iconsMaterial.Phone
+  },
+  support_agent: {
+    emoji: '🛎️',
+    component: iconsMaterial.SupportAgent
+  },
+  // === Content & Media ===
   article: {
     emoji: '📰',
     component: iconsMaterial.Article
@@ -3258,166 +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: {
-    emoji: '👥',
-    component: iconsMaterial.ManageAccounts
+  products: {
+    emoji: '🛍️',
+    component: iconsMaterial.ShoppingCart
   },
-  storage: {
-    emoji: '💾',
-    component: iconsMaterial.Storage
+  // alias
+  services: {
+    emoji: '⚙️',
+    component: iconsMaterial.Settings
   },
-  refresh: {
-    emoji: '🔄',
-    component: iconsMaterial.Refresh
+  // alias
+  speed: {
+    emoji: '⚡',
+    component: iconsMaterial.Speed
   },
-  block: {
-    emoji: '🚫',
-    component: iconsMaterial.Block
+  // === Status & Feedback ===
+  about: {
+    emoji: 'ℹ️',
+    component: iconsMaterial.Info
   },
-  check_circle: {
-    emoji: '✅',
-    component: iconsMaterial.CheckCircle
+  // alias
+  favorite: {
+    emoji: '❤️',
+    component: iconsMaterial.Favorite
   },
-  rotate_right: {
-    emoji: '🔄',
-    component: iconsMaterial.RotateRight
+  heart: {
+    emoji: '❤️',
+    component: iconsMaterial.Favorite
   },
-  memory: {
-    emoji: '🧠',
-    component: iconsMaterial.Memory
+  // alias
+  help: {
+    emoji: '❓',
+    component: iconsMaterial.Help
   },
-  local_offer: {
-    emoji: '🏷️',
-    component: iconsMaterial.LocalOffer
-  }
+  info: {
+    emoji: 'ℹ️',
+    component: iconsMaterial.Info
+  },
+  star: {
+    emoji: '⭐',
+    component: iconsMaterial.Star
+  },
+  // === Users & People ===
+  account_circle: {
+    emoji: '👤',
+    component: iconsMaterial.AccountCircle
+  },
+  group: {
+    emoji: '👥',
+    component: iconsMaterial.Group
+  },
+  manage_accounts: {
+    emoji: '👤',
+    component: iconsMaterial.ManageAccounts
+  },
+  people: {
+    emoji: '👥',
+    component: iconsMaterial.People
+  },
+  person: {
+    emoji: '👤',
+    component: iconsMaterial.Person
+  },
+  person_search: {
+    emoji: '🔍',
+    component: iconsMaterial.PersonSearch
+  },
+  user: {
+    emoji: '👤',
+    component: iconsMaterial.Person
+  },
+  // 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, {});
   }
-  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().`);
+  }
+  return jsxRuntime.jsx(iconsMaterial.HelpOutline, {});
 }
 /**
  * Register a new icon or override an existing one
@@ -3427,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);
@@ -23375,14 +23515,20 @@ function ReactRouterNavigationProvider({
       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: {
-        pathname: reactRouterLocation.pathname,
-        search: reactRouterLocation.search,
-        hash: reactRouterLocation.hash
-      }
+      location
     },
     children: children
   });
@@ -23427,10 +23573,10 @@ function FallbackNavigationProvider({
 function NavigationProvider({
   children
 }) {
-  // 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 = React.useContext(reactRouterDom.UNSAFE_NavigationContext);
-  if (routerContext) {
+  // 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
@@ -25983,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