@qwickapps/react-framework 1.3.2 → 1.3.3

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { CircularProgress, Button as Button$1, Paper, Typography, useTheme as useTheme$1, Box, Container as Container$8, Stack, Tooltip, IconButton, Snackbar, Alert, useMediaQuery, Avatar, Chip, Menu, MenuItem, Grid, Divider, Link, ListItemIcon, ListItemText, Card, CardContent, ButtonGroup, Collapse, TextField as TextField$1, FormControl, InputLabel, Select, FormHelperText } from '@mui/material';
-import React, { useMemo, useContext, useState, useEffect, createContext, useRef, useCallback, cloneElement } from 'react';
+import React, { useMemo, useContext, useState, useEffect, createContext, useRef, useCallback, Component, useReducer, cloneElement } from 'react';
 import { MustacheTemplateProvider, MemoryCacheProvider, CachedDataProvider, Field, Editor, FieldType, Schema, Model, DataType } from '@qwickapps/schema';
 import { IsOptional, IsString, IsIn, IsUrl, IsArray, ValidateNested, IsNumber, Min, Max, IsBoolean, IsNotEmpty, IsObject } from 'class-validator';
 import { Type } from 'class-transformer';
@@ -20579,6 +20579,605 @@ const Scaffold = ({
 
 loggers.menu;
 
+/**
+ * Generic ErrorBoundary component for catching and handling React errors
+ *
+ * Features:
+ * - Catches JavaScript errors anywhere in child component tree
+ * - Displays fallback UI with retry functionality
+ * - Shows error details in development mode
+ * - Customizable error handling and fallback UI
+ * - Automatic error logging
+ */
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.handleRetry = () => {
+      this.setState({
+        hasError: false,
+        error: null,
+        errorInfo: null
+      });
+    };
+    this.handleRefresh = () => {
+      if (typeof window !== 'undefined') {
+        window.location.reload();
+      }
+    };
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null
+    };
+  }
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI
+    return {
+      hasError: true,
+      error,
+      errorInfo: null
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    // Log error details
+    this.setState({
+      error,
+      errorInfo
+    });
+    // Log to console for debugging
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+    // Custom error handler
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+    // Send error to logging service if available
+    if (typeof window !== 'undefined') {
+      // @ts-ignore - Global error logging service
+      if (window.qwickapps?.logError) {
+        window.qwickapps.logError(error, errorInfo);
+      }
+    }
+  }
+  render() {
+    if (this.state.hasError) {
+      // Custom fallback UI
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      // Default error UI
+      return jsxs("div", {
+        className: "error-boundary",
+        role: "alert",
+        style: {
+          padding: '2rem',
+          textAlign: 'center',
+          backgroundColor: '#fef2f2',
+          border: '1px solid #fecaca',
+          borderRadius: '8px',
+          margin: '1rem',
+          color: '#991b1b'
+        },
+        children: [jsxs("div", {
+          style: {
+            marginBottom: '1.5rem'
+          },
+          children: [jsx("h2", {
+            style: {
+              fontSize: '1.5rem',
+              fontWeight: 'bold',
+              marginBottom: '0.5rem',
+              color: '#991b1b'
+            },
+            children: "Something went wrong"
+          }), jsx("p", {
+            style: {
+              color: '#7f1d1d',
+              marginBottom: '1rem'
+            },
+            children: "An unexpected error occurred in the application. Please try again or refresh the page."
+          })]
+        }), jsxs("div", {
+          style: {
+            display: 'flex',
+            gap: '0.75rem',
+            justifyContent: 'center',
+            marginBottom: '1rem'
+          },
+          children: [jsx(Button, {
+            variant: "contained",
+            onClick: this.handleRetry,
+            style: {
+              backgroundColor: '#dc2626',
+              color: 'white'
+            },
+            children: "Try Again"
+          }), jsx(Button, {
+            variant: "outlined",
+            onClick: this.handleRefresh,
+            style: {
+              borderColor: '#dc2626',
+              color: '#dc2626'
+            },
+            children: "Refresh Page"
+          })]
+        }), this.state.error && jsxs("details", {
+          style: {
+            textAlign: 'left',
+            marginTop: '1rem',
+            padding: '1rem',
+            backgroundColor: '#f9fafb',
+            border: '1px solid #d1d5db',
+            borderRadius: '6px'
+          },
+          children: [jsx("summary", {
+            style: {
+              cursor: 'pointer',
+              fontWeight: 'bold',
+              marginBottom: '0.5rem',
+              color: '#374151'
+            },
+            children: "Error Details (Development Mode)"
+          }), jsxs("pre", {
+            style: {
+              fontSize: '0.75rem',
+              color: '#374151',
+              whiteSpace: 'pre-wrap',
+              overflow: 'auto'
+            },
+            children: [this.state.error.toString(), this.state.errorInfo?.componentStack && jsxs(Fragment, {
+              children: [jsx("br", {}), jsx("br", {}), "Component Stack:", this.state.errorInfo.componentStack]
+            })]
+          })]
+        })]
+      });
+    }
+    return this.props.children;
+  }
+}
+/**
+ * Higher-order component that wraps a component with ErrorBoundary
+ */
+function withErrorBoundary(WrappedComponent, errorBoundaryProps) {
+  const WithErrorBoundaryComponent = props => jsx(ErrorBoundary, {
+    ...errorBoundaryProps,
+    children: jsx(WrappedComponent, {
+      ...props
+    })
+  });
+  WithErrorBoundaryComponent.displayName = `withErrorBoundary(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+  return WithErrorBoundaryComponent;
+}
+
+const AccessibilityContext = /*#__PURE__*/createContext(null);
+// Reducer
+const accessibilityReducer = (state, action) => {
+  switch (action.type) {
+    case 'SET_HIGH_CONTRAST':
+      return {
+        ...state,
+        highContrast: action.payload
+      };
+    case 'SET_REDUCED_MOTION':
+      return {
+        ...state,
+        reducedMotion: action.payload
+      };
+    case 'SET_LARGE_TEXT':
+      return {
+        ...state,
+        largeText: action.payload
+      };
+    case 'SET_FOCUS_VISIBLE':
+      return {
+        ...state,
+        focusVisible: action.payload
+      };
+    case 'SET_KEYBOARD_USER':
+      return {
+        ...state,
+        isKeyboardUser: action.payload
+      };
+    case 'ADD_ISSUE':
+      return {
+        ...state,
+        issues: [...state.issues, action.payload]
+      };
+    case 'CLEAR_ISSUES':
+      return {
+        ...state,
+        issues: []
+      };
+    case 'SET_ANNOUNCEMENT':
+      return {
+        ...state,
+        lastAnnouncement: action.payload
+      };
+    default:
+      return state;
+  }
+};
+// Initial state
+const initialState = {
+  highContrast: false,
+  reducedMotion: false,
+  largeText: false,
+  focusVisible: true,
+  isKeyboardUser: false,
+  issues: [],
+  lastAnnouncement: null,
+  preferences: {}
+};
+// ARIA Live Manager
+class AriaLiveManager {
+  constructor() {
+    this.politeRegion = null;
+    this.assertiveRegion = null;
+    this.createLiveRegions();
+  }
+  createLiveRegions() {
+    if (typeof document === 'undefined') return;
+    // Polite announcements
+    this.politeRegion = document.createElement('div');
+    this.politeRegion.setAttribute('aria-live', 'polite');
+    this.politeRegion.setAttribute('aria-atomic', 'true');
+    this.politeRegion.setAttribute('id', 'qwickapps-aria-live-polite');
+    this.politeRegion.style.cssText = `
+			position: absolute !important;
+			left: -10000px !important;
+			width: 1px !important;
+			height: 1px !important;
+			overflow: hidden !important;
+		`;
+    document.body.appendChild(this.politeRegion);
+    // Assertive announcements
+    this.assertiveRegion = document.createElement('div');
+    this.assertiveRegion.setAttribute('aria-live', 'assertive');
+    this.assertiveRegion.setAttribute('aria-atomic', 'true');
+    this.assertiveRegion.setAttribute('id', 'qwickapps-aria-live-assertive');
+    this.assertiveRegion.style.cssText = `
+			position: absolute !important;
+			left: -10000px !important;
+			width: 1px !important;
+			height: 1px !important;
+			overflow: hidden !important;
+		`;
+    document.body.appendChild(this.assertiveRegion);
+  }
+  announce(message, level = 'polite') {
+    if (level === 'assertive') {
+      this.announceAssertive(message);
+    } else {
+      this.announcePolite(message);
+    }
+  }
+  announcePolite(message) {
+    if (!this.politeRegion) return;
+    this.politeRegion.textContent = '';
+    // Small delay ensures screen readers detect the change
+    setTimeout(() => {
+      if (this.politeRegion) {
+        this.politeRegion.textContent = message;
+      }
+    }, 100);
+  }
+  announceAssertive(message) {
+    if (!this.assertiveRegion) return;
+    this.assertiveRegion.textContent = '';
+    // Small delay ensures screen readers detect the change
+    setTimeout(() => {
+      if (this.assertiveRegion) {
+        this.assertiveRegion.textContent = message;
+      }
+    }, 100);
+  }
+}
+const ariaLiveManager = new AriaLiveManager();
+/**
+ * Accessibility Provider Component
+ * Provides comprehensive accessibility context and utilities
+ *
+ * Features:
+ * - System preference detection (high contrast, reduced motion)
+ * - Keyboard navigation detection
+ * - ARIA live announcements
+ * - Focus management
+ * - Accessibility auditing
+ * - Settings persistence
+ */
+const AccessibilityProvider = ({
+  children,
+  enableAudit = "development" === 'development'
+}) => {
+  const [state, dispatch] = useReducer(accessibilityReducer, initialState);
+  useEffect(() => {
+    // Detect user preferences from system
+    detectUserPreferences();
+    // Set up keyboard detection
+    const keyboardCleanup = setupKeyboardDetection();
+    // Initialize focus management
+    initializeFocusManagement();
+    // Run initial accessibility audit
+    if (enableAudit) {
+      runAccessibilityAudit();
+    }
+    // Cleanup
+    return () => {
+      if (keyboardCleanup) keyboardCleanup();
+    };
+  }, [enableAudit]);
+  const detectUserPreferences = () => {
+    if (typeof window === 'undefined') return;
+    // High contrast mode
+    if (window.matchMedia && window.matchMedia('(prefers-contrast: high)').matches) {
+      dispatch({
+        type: 'SET_HIGH_CONTRAST',
+        payload: true
+      });
+    }
+    // Reduced motion
+    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      dispatch({
+        type: 'SET_REDUCED_MOTION',
+        payload: true
+      });
+    }
+    // Listen for changes
+    if (window.matchMedia) {
+      const contrastMedia = window.matchMedia('(prefers-contrast: high)');
+      const motionMedia = window.matchMedia('(prefers-reduced-motion: reduce)');
+      const contrastHandler = e => {
+        dispatch({
+          type: 'SET_HIGH_CONTRAST',
+          payload: e.matches
+        });
+      };
+      const motionHandler = e => {
+        dispatch({
+          type: 'SET_REDUCED_MOTION',
+          payload: e.matches
+        });
+      };
+      contrastMedia.addEventListener('change', contrastHandler);
+      motionMedia.addEventListener('change', motionHandler);
+      // Return cleanup function
+      return () => {
+        contrastMedia.removeEventListener('change', contrastHandler);
+        motionMedia.removeEventListener('change', motionHandler);
+      };
+    }
+  };
+  const setupKeyboardDetection = () => {
+    if (typeof document === 'undefined') return;
+    let keyboardUser = false;
+    const handleKeyDown = e => {
+      if (e.key === 'Tab') {
+        keyboardUser = true;
+        dispatch({
+          type: 'SET_KEYBOARD_USER',
+          payload: true
+        });
+        document.body.classList.add('keyboard-user');
+      }
+    };
+    const handleMouseDown = () => {
+      if (keyboardUser) {
+        keyboardUser = false;
+        dispatch({
+          type: 'SET_KEYBOARD_USER',
+          payload: false
+        });
+        document.body.classList.remove('keyboard-user');
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('mousedown', handleMouseDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('mousedown', handleMouseDown);
+    };
+  };
+  const initializeFocusManagement = () => {
+    if (typeof document === 'undefined') return;
+    // Enhanced focus indicators for keyboard users
+    const style = document.createElement('style');
+    style.textContent = `
+			.keyboard-user *:focus {
+				outline: 3px solid #005cee !important;
+				outline-offset: 2px !important;
+			}
+			
+			.high-contrast *:focus {
+				outline: 3px solid #ffffff !important;
+				outline-offset: 2px !important;
+				box-shadow: 0 0 0 1px #000000 !important;
+			}
+			
+			.reduced-motion * {
+				animation-duration: 0.01ms !important;
+				animation-iteration-count: 1 !important;
+				transition-duration: 0.01ms !important;
+			}
+			
+			.large-text {
+				font-size: 1.2em !important;
+			}
+		`;
+    document.head.appendChild(style);
+  };
+  const runAccessibilityAudit = () => {
+    if (typeof document === 'undefined') return;
+    setTimeout(() => {
+      const issues = [];
+      // Check for images without alt text
+      const images = document.querySelectorAll('img:not([alt])');
+      images.forEach(img => {
+        issues.push({
+          type: 'missing-alt-text',
+          message: 'Image missing alt attribute',
+          level: 'error',
+          element: img
+        });
+      });
+      // Check for buttons without accessible names
+      const buttons = document.querySelectorAll('button:not([aria-label]):not([title])');
+      buttons.forEach(button => {
+        if (!button.textContent?.trim()) {
+          issues.push({
+            type: 'unnamed-button',
+            message: 'Button missing accessible name',
+            level: 'error',
+            element: button
+          });
+        }
+      });
+      // Check for form inputs without labels
+      const inputs = document.querySelectorAll('input:not([aria-label]):not([title])');
+      inputs.forEach(input => {
+        const id = input.getAttribute('id');
+        if (id) {
+          const label = document.querySelector(`label[for="${id}"]`);
+          if (!label) {
+            issues.push({
+              type: 'unlabeled-input',
+              message: 'Form input missing label',
+              level: 'error',
+              element: input
+            });
+          }
+        } else {
+          issues.push({
+            type: 'unlabeled-input',
+            message: 'Form input missing label',
+            level: 'error',
+            element: input
+          });
+        }
+      });
+      dispatch({
+        type: 'CLEAR_ISSUES'
+      });
+      issues.forEach(issue => {
+        dispatch({
+          type: 'ADD_ISSUE',
+          payload: issue
+        });
+      });
+      if (issues.length > 0) {
+        console.group('🔍 Accessibility Issues Found');
+        issues.forEach(issue => {
+          const logMethod = issue.level === 'error' ? console.error : console.warn;
+          logMethod(`${issue.type}: ${issue.message}`);
+        });
+        console.groupEnd();
+      }
+    }, 1000);
+  };
+  // Context value
+  const contextValue = {
+    ...state,
+    // Actions
+    setHighContrast: enabled => dispatch({
+      type: 'SET_HIGH_CONTRAST',
+      payload: enabled
+    }),
+    setReducedMotion: enabled => dispatch({
+      type: 'SET_REDUCED_MOTION',
+      payload: enabled
+    }),
+    setLargeText: enabled => dispatch({
+      type: 'SET_LARGE_TEXT',
+      payload: enabled
+    }),
+    setFocusVisible: enabled => dispatch({
+      type: 'SET_FOCUS_VISIBLE',
+      payload: enabled
+    }),
+    // Utilities
+    announce: (message, level = 'polite') => {
+      ariaLiveManager.announce(message, level);
+      dispatch({
+        type: 'SET_ANNOUNCEMENT',
+        payload: {
+          message,
+          level,
+          timestamp: Date.now()
+        }
+      });
+    },
+    announcePolite: message => {
+      ariaLiveManager.announcePolite(message);
+      dispatch({
+        type: 'SET_ANNOUNCEMENT',
+        payload: {
+          message,
+          level: 'polite',
+          timestamp: Date.now()
+        }
+      });
+    },
+    announceAssertive: message => {
+      ariaLiveManager.announceAssertive(message);
+      dispatch({
+        type: 'SET_ANNOUNCEMENT',
+        payload: {
+          message,
+          level: 'assertive',
+          timestamp: Date.now()
+        }
+      });
+    },
+    addIssue: issue => dispatch({
+      type: 'ADD_ISSUE',
+      payload: issue
+    }),
+    clearIssues: () => dispatch({
+      type: 'CLEAR_ISSUES'
+    }),
+    // Audit function
+    runAudit: runAccessibilityAudit
+  };
+  // Apply CSS classes based on preferences
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const {
+      highContrast,
+      reducedMotion,
+      largeText
+    } = state;
+    document.body.classList.toggle('high-contrast', highContrast);
+    document.body.classList.toggle('reduced-motion', reducedMotion);
+    document.body.classList.toggle('large-text', largeText);
+  }, [state.highContrast, state.reducedMotion, state.largeText]);
+  return jsx(AccessibilityContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+};
+/**
+ * Hook to access accessibility context
+ */
+const useAccessibility = () => {
+  const context = useContext(AccessibilityContext);
+  if (!context) {
+    throw new Error('useAccessibility must be used within an AccessibilityProvider');
+  }
+  return context;
+};
+/**
+ * Higher-Order Component for accessibility enhancements
+ */
+const withAccessibility = WrappedComponent => {
+  const AccessibilityEnhancedComponent = props => {
+    const accessibility = useAccessibility();
+    return jsx(WrappedComponent, {
+      ...props,
+      accessibility: accessibility
+    });
+  };
+  AccessibilityEnhancedComponent.displayName = `withAccessibility(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+  return AccessibilityEnhancedComponent;
+};
+
 const QwickApp = ({
   children,
   className,
@@ -20640,16 +21239,20 @@ const QwickApp = ({
     dataSource: dataSource,
     children: content
   }) : content;
-  const appContent = jsx("div", {
-    className: `qwick-app ${className || ''}`,
-    style: style,
-    children: jsx(ThemeProvider, {
-      appId: appId,
-      defaultTheme: defaultTheme,
-      defaultPalette: defaultPalette,
-      children: jsx(QwickAppContext.Provider, {
-        value: contextValue,
-        children: wrappedContent
+  const appContent = jsx(ErrorBoundary, {
+    children: jsx(AccessibilityProvider, {
+      children: jsx("div", {
+        className: `qwick-app ${className || ''}`,
+        style: style,
+        children: jsx(ThemeProvider, {
+          appId: appId,
+          defaultTheme: defaultTheme,
+          defaultPalette: defaultPalette,
+          children: jsx(QwickAppContext.Provider, {
+            value: contextValue,
+            children: wrappedContent
+          })
+        })
       })
     })
   });
@@ -20757,6 +21360,186 @@ const setCSSVariable = (property, value) => {
   document.documentElement.style.setProperty(property, value);
 };
 
+/**
+ * Generic Breadcrumbs component for navigation hierarchy
+ *
+ * Features:
+ * - Accessible navigation with proper ARIA labels
+ * - Customizable separators and icons
+ * - Responsive design with item truncation
+ * - Support for custom navigation handlers
+ * - Keyboard navigation support
+ * - Screen reader friendly
+ */
+const Breadcrumbs = ({
+  items,
+  separator = '/',
+  className = '',
+  onNavigate,
+  maxItems,
+  showRoot = true
+}) => {
+  // Filter and prepare items
+  let displayItems = showRoot ? items : items.slice(1);
+  // Handle max items with ellipsis
+  if (maxItems && displayItems.length > maxItems) {
+    const firstItems = displayItems.slice(0, 1);
+    const lastItems = displayItems.slice(-Math.max(1, maxItems - 2));
+    displayItems = [...firstItems, {
+      label: '...',
+      href: undefined,
+      current: false
+    }, ...lastItems];
+  }
+  const handleItemClick = (e, item, index) => {
+    if (onNavigate) {
+      e.preventDefault();
+      onNavigate(item, index);
+    }
+  };
+  const handleKeyDown = (e, item, index) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      if (onNavigate) {
+        onNavigate(item, index);
+      } else if (item.href) {
+        window.location.href = item.href;
+      }
+    }
+  };
+  if (displayItems.length <= 1) {
+    return null;
+  }
+  return jsx("nav", {
+    className: `breadcrumbs ${className}`,
+    role: "navigation",
+    "aria-label": "Breadcrumb navigation",
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      fontSize: '14px',
+      color: '#6b7280',
+      ...defaultStyles.nav
+    },
+    children: jsx("ol", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        listStyle: 'none',
+        margin: 0,
+        padding: 0,
+        gap: '8px'
+      },
+      children: displayItems.map((item, index) => {
+        const isLast = index === displayItems.length - 1;
+        const isClickable = (item.href || onNavigate) && !item.current && item.label !== '...';
+        return jsxs("li", {
+          style: {
+            display: 'flex',
+            alignItems: 'center'
+          },
+          children: [isClickable ? jsxs("a", {
+            href: item.href,
+            onClick: e => handleItemClick(e, item, index),
+            onKeyDown: e => handleKeyDown(e, item, index),
+            style: {
+              ...defaultStyles.link,
+              color: isLast ? '#374151' : '#6b7280',
+              textDecoration: 'none',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px'
+            },
+            tabIndex: 0,
+            "aria-current": item.current ? 'page' : undefined,
+            children: [item.icon && jsx("span", {
+              style: {
+                display: 'flex',
+                alignItems: 'center'
+              },
+              "aria-hidden": "true",
+              children: item.icon
+            }), jsx("span", {
+              children: item.label
+            })]
+          }) : jsxs("span", {
+            style: {
+              ...defaultStyles.current,
+              color: isLast ? '#111827' : '#6b7280',
+              fontWeight: isLast ? 600 : 400,
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px'
+            },
+            "aria-current": item.current ? 'page' : undefined,
+            children: [item.icon && jsx("span", {
+              style: {
+                display: 'flex',
+                alignItems: 'center'
+              },
+              "aria-hidden": "true",
+              children: item.icon
+            }), jsx("span", {
+              children: item.label
+            })]
+          }), !isLast && jsx("span", {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              marginLeft: '8px',
+              color: '#d1d5db',
+              fontSize: '12px'
+            },
+            "aria-hidden": "true",
+            children: separator
+          })]
+        }, `${item.label}-${index}`);
+      })
+    })
+  });
+};
+// Default styles
+const defaultStyles = {
+  nav: {
+    padding: '8px 0'
+  },
+  link: {
+    transition: 'color 0.2s ease',
+    cursor: 'pointer',
+    borderRadius: '4px',
+    padding: '4px',
+    margin: '-4px'
+  },
+  current: {
+    padding: '4px'
+  }
+};
+/**
+ * Hook for managing breadcrumb state
+ */
+const useBreadcrumbs = () => {
+  const [breadcrumbs, setBreadcrumbs] = React.useState([]);
+  const addBreadcrumb = React.useCallback(item => {
+    setBreadcrumbs(prev => [...prev, item]);
+  }, []);
+  const removeBreadcrumb = React.useCallback(index => {
+    setBreadcrumbs(prev => prev.filter((_, i) => i !== index));
+  }, []);
+  const setBreadcrumbsCurrent = React.useCallback(items => {
+    setBreadcrumbs(items);
+  }, []);
+  const clearBreadcrumbs = React.useCallback(() => {
+    setBreadcrumbs([]);
+  }, []);
+  return {
+    breadcrumbs,
+    addBreadcrumb,
+    removeBreadcrumb,
+    setBreadcrumbs: setBreadcrumbsCurrent,
+    clearBreadcrumbs
+  };
+};
+
 const QwickAppsLogo = props => {
   const {
     styleProps,
@@ -24223,4 +25006,4 @@ var ActionType;
   ActionType["CANCEL"] = "cancel";
 })(ActionType || (ActionType = {}));
 
-export { AVAILABLE_PALETTES, ActionModel, ActionType, AllPalettes, Article, ArticleModel, BasePage, Button, CardListGrid, CardListGridModel, ChoiceInputField, ChoiceInputFieldModel, Code, CodeModel, Content, ContentModel, CoverImageHeader, CoverImageHeaderModel, DataProvider, DataProxy, DimensionsProvider, FeatureCard, FeatureCardActionModel, FeatureCardModel, FeatureGrid, FeatureGridModel, FeatureItemModel, Footer, FooterItemModel, FooterModel, FooterSectionModel, FormBlock, FormBlockModel, FormMethod, FormPage, GridCell, GridLayout, HeaderActionModel, HeroBlock, HeroBlockModel, Html, HtmlInputField, Logo, Markdown, MetadataItemModel, Page, PageBannerHeader, PageBannerHeaderModel, PaletteAutumn, PaletteCosmic, PaletteDefault, PaletteOcean, PaletteProvider, PaletteSpring, PaletteSwitcher, PaletteSwitcherModel, PaletteWinter, ProductCard, ProductCardActionModel, ProductCardModel, ProductModel, QWICKAPP_COMPONENT, QwickApp, QwickAppsLogo, SafeSpan, SafeSpanModel, Section, SectionModel, SelectInputField, T, TextField, TextInputField, TextInputFieldModel, ThemeProvider, ThemeSwitcher, ThemeSwitcherModel, applyCustomPalette, clearUserPalettePreference, clearUserThemePreference, createLogger, createPaletteFromCurrentTheme, deleteCustomPalette, exportPalette, getCSSVariable, getComputedTheme, getCurrentPalette, getCurrentTheme, getCustomPalettes, getPaletteConfig, getPaletteName, getSystemTheme, getThemePerformanceStats, importPalette, initializePalette, initializeTheme, loadUserPalettePreference, loadUserThemePreference, logThemePerformanceStats, loggers, resetThemePerformanceStats, resolveDimension, resolveDimensions, resolveSpacing, resolveSpacingProps, saveCustomPalette, savePalettePreference, saveThemePreference, saveUserPalettePreference, saveUserThemePreference, setCSSVariable, setPalette, setTheme, t, useBaseProps, useData, useDataBinding, useDataContext, useDataProvider, useDimensions, usePalette, useQwickApp, useResolveTemplate, useSafeLocation, useSafeNavigate, useTemplate, useTheme };
+export { AVAILABLE_PALETTES, AccessibilityProvider, ActionModel, ActionType, AllPalettes, Article, ArticleModel, BasePage, Breadcrumbs, Button, CardListGrid, CardListGridModel, ChoiceInputField, ChoiceInputFieldModel, Code, CodeModel, Content, ContentModel, CoverImageHeader, CoverImageHeaderModel, DataProvider, DataProxy, DimensionsProvider, ErrorBoundary, FeatureCard, FeatureCardActionModel, FeatureCardModel, FeatureGrid, FeatureGridModel, FeatureItemModel, Footer, FooterItemModel, FooterModel, FooterSectionModel, FormBlock, FormBlockModel, FormMethod, FormPage, GridCell, GridLayout, HeaderActionModel, HeroBlock, HeroBlockModel, Html, HtmlInputField, Logo, Markdown, MetadataItemModel, Page, PageBannerHeader, PageBannerHeaderModel, PaletteAutumn, PaletteCosmic, PaletteDefault, PaletteOcean, PaletteProvider, PaletteSpring, PaletteSwitcher, PaletteSwitcherModel, PaletteWinter, ProductCard, ProductCardActionModel, ProductCardModel, ProductModel, QWICKAPP_COMPONENT, QwickApp, QwickAppsLogo, SafeSpan, SafeSpanModel, Section, SectionModel, SelectInputField, T, TextField, TextInputField, TextInputFieldModel, ThemeProvider, ThemeSwitcher, ThemeSwitcherModel, applyCustomPalette, clearUserPalettePreference, clearUserThemePreference, createLogger, createPaletteFromCurrentTheme, deleteCustomPalette, exportPalette, getCSSVariable, getComputedTheme, getCurrentPalette, getCurrentTheme, getCustomPalettes, getPaletteConfig, getPaletteName, getSystemTheme, getThemePerformanceStats, importPalette, initializePalette, initializeTheme, loadUserPalettePreference, loadUserThemePreference, logThemePerformanceStats, loggers, resetThemePerformanceStats, resolveDimension, resolveDimensions, resolveSpacing, resolveSpacingProps, saveCustomPalette, savePalettePreference, saveThemePreference, saveUserPalettePreference, saveUserThemePreference, setCSSVariable, setPalette, setTheme, t, useAccessibility, useBaseProps, useBreadcrumbs, useData, useDataBinding, useDataContext, useDataProvider, useDimensions, usePalette, useQwickApp, useResolveTemplate, useSafeLocation, useSafeNavigate, useTemplate, useTheme, withAccessibility, withErrorBoundary };